/*
====================================================
TrendBridge UI Framework
Module : Product Details
Version : 1.0.0
====================================================
*/

:root{

--tb-radius:18px;
--tb-primary:#F5B51D;
--tb-dark:#111;
--tb-border:#ECECEC;

}

/* Title */

.ab-product-title{

font-size:34px;

font-weight:800;

line-height:1.35;

color:#111;

margin-bottom:18px;

}

/* Rating */

.ab-product-rating{

display:flex;

align-items:center;

gap:8px;

margin:14px 0;

font-weight:600;

}

/* Price */

.ab-product-price{

display:flex;

align-items:center;

gap:14px;

margin:22px 0;

flex-wrap:wrap;

}

.ab-product-price-current{

font-size:34px;

font-weight:800;

color:#111;

}

.ab-product-price-old{

font-size:20px;

text-decoration:line-through;

opacity:.45;

}

.ab-product-discount{

background:#F5B51D;

padding:7px 14px;

border-radius:50px;

font-size:13px;

font-weight:700;

}

/* Features */

.ab-product-features{

display:grid;

gap:12px;

margin-top:26px;

}

.ab-product-feature{

display:flex;

align-items:center;

gap:12px;

padding:14px 16px;

background:#fff;

border:1px solid #ECECEC;

border-radius:16px;

transition:.3s;

}

.ab-product-feature:hover{

transform:translateX(-5px);

box-shadow:0 10px 25px rgba(0,0,0,.08);

}

/* Short Description */

.ab-product-short-description{

font-size:16px;

line-height:1.9;

color:#555;

margin-top:22px;

}
/*
====================================================
TrendBridge Product Details V2
====================================================
*/

.ab-pd{

display:flex;
flex-direction:column;
gap:18px;

}

.tb-product-badge{

display:flex;

}

.tb-badge-hot{

background:linear-gradient(135deg,#F5B51D,#FFD86A);

color:#111;

padding:8px 16px;

border-radius:999px;

font-size:13px;

font-weight:800;

box-shadow:0 10px 25px rgba(245,181,29,.28);

animation:tbPulse 2.5s infinite;

}

@keyframes tbPulse{

0%,100%{transform:scale(1);}
50%{transform:scale(1.05);}

}

.ab-pd-name{

font-size:36px;

font-weight:800;

line-height:1.3;

color:#111;

margin:0;

}

.ab-pd-rating{

display:flex;

align-items:center;

justify-content:space-between;

padding:14px 18px;

border:1px solid #ececec;

border-radius:18px;

background:#fff;

}

.ab-pd-price-row{

display:flex;

align-items:center;

gap:14px;

flex-wrap:wrap;

}

.ab-pd-price{

font-size:36px;

font-weight:900;

color:#111;

}

.ab-pd-price-old{

font-size:20px;

opacity:.45;

text-decoration:line-through;

}

.ab-pd-discount{

background:#111;

color:#fff;

padding:8px 14px;

border-radius:999px;

font-size:13px;

font-weight:700;

}

.ab-pd-divider{

height:1px;

background:#ececec;

margin:4px 0;

}

.ab-pd-features{

display:grid;

grid-template-columns:repeat(2,minmax(0,1fr));

gap:12px;

}

.ab-pd-feature{

padding:14px;

border-radius:16px;

background:#fff;

border:1px solid #ececec;

font-weight:700;

transition:.30s;

}

.ab-pd-feature:hover{

transform:translateY(-4px);

box-shadow:0 12px 30px rgba(0,0,0,.08);

border-color:#F5B51D;

}

.ab-pd-description{

padding:18px;

background:#fafafa;

border-radius:18px;

line-height:1.9;

color:#555;

}

@media(max-width:768px){

.ab-pd-name{

font-size:28px;

}

.ab-pd-price{

font-size:28px;

}

.ab-pd-features{

grid-template-columns:1fr;

}

}