/* Tiny Maket — PDP (single product) styles. Ported from prototype; shared tokens live in design-system.css / components.css. */
.breadcrumb{padding:16px 0 0;font-size:.78rem;color:var(--ink3);display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.breadcrumb a{color:var(--ink2);font-weight:600;transition:color .18s;}
.breadcrumb a:hover{color:var(--red);}
.breadcrumb svg{width:12px;height:12px;color:var(--line2);}
.breadcrumb .cur{color:var(--ink);font-weight:700;}
.pdp-wrap{padding-bottom:46px;}

.pdp-main{display:grid;grid-template-columns:1fr;gap:26px;margin-top:22px;}
@media(min-width:900px){.pdp-main{grid-template-columns:1fr 1fr;gap:38px;align-items:start;}.pdp-gallery{position:sticky;top:88px;}}

/* ── GALLERY CAROUSEL ── */
.pdp-gallery{margin:0;min-width:0;}
.bgimg{background-repeat:no-repeat;background-position:center;mix-blend-mode:multiply;}
.gmain{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;background:radial-gradient(120% 120% at 50% 0,#fff,var(--sf2));}
.gtrack{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.gtrack::-webkit-scrollbar{display:none;}
.gslide{flex:0 0 100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;}
.gpic{width:100%;height:100%;background-size:84%;transition:transform .5s cubic-bezier(.22,.7,.3,1);}
.gpic svg{width:70%;height:70%;color:var(--ink3);}
@media(min-width:900px){.gmain:hover .gpic{transform:scale(1.04);}}
.gcount{position:absolute;top:14px;left:14px;z-index:3;background:rgba(20,22,25,.7);backdrop-filter:blur(6px);color:#fff;font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:999px;letter-spacing:.5px;}
.gbadges{position:absolute;top:14px;right:14px;z-index:3;display:flex;flex-direction:column;gap:6px;align-items:flex-end;}
.gbadge{font-size:.68rem;font-weight:800;padding:5px 11px;border-radius:999px;color:#fff;box-shadow:var(--sh2);}
.gb-disc{background:var(--red);}
.gb-tier{background:linear-gradient(135deg,#C79A52,#9c7733);}
.gzoom{position:absolute;bottom:14px;left:14px;z-index:3;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:transform .2s,background .2s,color .2s;}
.gzoom:hover{background:#fff;color:var(--red);transform:scale(1.08);}
.gzoom svg{width:19px;height:19px;}
.garrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:transform .2s,background .2s,color .2s,opacity .2s;box-shadow:var(--sh2);}
.garrow:hover{background:#fff;color:var(--red);transform:translateY(-50%) scale(1.09);}
.garrow svg{width:20px;height:20px;}
.garrow.prev{right:12px;}
.garrow.next{left:12px;}
.garrow.hide{opacity:0;pointer-events:none;}
.gthumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;-webkit-overflow-scrolling:touch;}
.gthumbs::-webkit-scrollbar{display:none;}
.gthumb{flex:0 0 auto;width:74px;height:74px;border:2px solid var(--line);border-radius:14px;overflow:hidden;background-color:#fff;background-size:76%;cursor:pointer;transition:transform .2s,border-color .2s;padding:0;}
.gthumb.active{border-color:var(--red);}
.gthumb:hover{transform:translateY(-2px);border-color:var(--line2);}

/* ── INFO COLUMN ── */
.pdp-info{min-width:0;}
.pdp-title{font-size:clamp(1.35rem,3.6vw,2rem);font-weight:900;letter-spacing:-.6px;line-height:1.32;margin-bottom:14px;}
.pdp-brands{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;}
.pdp-brandchip{display:flex;align-items:center;gap:9px;background:var(--sf);border:1px solid var(--line);border-radius:13px;padding:7px 14px 7px 9px;text-decoration:none;transition:transform .18s,border-color .18s,box-shadow .18s;}
.pdp-brandchip:hover{transform:translateY(-2px);border-color:var(--red);box-shadow:var(--sh2);}
.pdp-brandchip .bb,.pdp-brandchip .micon{width:32px;height:32px;font-size:.64rem;box-shadow:none;flex:none;}
.pdp-brandchip .micon{padding:5px;border-radius:9px;background:var(--sf2);}
.bc-txt{display:flex;flex-direction:column;line-height:1.3;}
.bc-txt small{font-size:.6rem;color:var(--ink3);font-weight:600;}
.bc-txt b{font-size:.84rem;font-weight:800;color:var(--ink);transition:color .18s;}
.pdp-brandchip:hover .bc-txt b{color:var(--red);}

.pdp-price{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--sf);border:1px solid var(--line);border-radius:var(--r2);padding:16px 20px;margin-bottom:18px;}
.pdp-price .now{font-size:1.7rem;font-weight:900;color:var(--ink);letter-spacing:-.5px;}
.pdp-price .now small{font-size:.86rem;font-weight:700;color:var(--ink3);}
.pdp-price .now del{font-size:1rem;color:var(--ink3);font-weight:600;margin-inline-end:8px;}
.pdp-price .now ins{text-decoration:none;}
.pdp-price .old{font-size:1rem;color:var(--ink3);text-decoration:line-through;font-weight:600;}
.pdp-price .save{margin-inline-start:auto;background:var(--red-soft);color:var(--red);font-size:.74rem;font-weight:800;padding:6px 12px;border-radius:999px;}

.pdp-highlights{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.phl{display:flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;color:var(--ink2);background:var(--sf2);border:1px solid var(--line);padding:7px 13px;border-radius:10px;transition:transform .18s,border-color .18s;}
.phl:hover{transform:translateY(-2px);border-color:var(--line2);}
.phl svg{width:15px;height:15px;color:var(--red);}

.scaleguide{background:var(--slate);border-radius:var(--r3);padding:20px 22px;color:#fff;margin-bottom:20px;position:relative;overflow:hidden;}
.scaleguide-grain{position:absolute;inset:0;background:repeating-linear-gradient(118deg,rgba(255,255,255,.025) 0 1px,transparent 1px 26px);}
.sg-head{display:flex;align-items:center;gap:9px;margin-bottom:16px;position:relative;}
.sg-head svg{width:18px;height:18px;color:#FF6B72;}
.sg-head b{font-size:.92rem;font-weight:800;}
.sg-head>span{margin-inline-start:auto;font-size:.74rem;color:rgba(255,255,255,.6);font-weight:700;}
.sg-ruler{position:relative;height:60px;margin:0 4px;}
.sg-bar{position:absolute;top:32px;left:0;right:0;height:3px;background:rgba(255,255,255,.2);border-radius:2px;}
.sg-fill{position:absolute;top:32px;left:0;height:3px;background:linear-gradient(90deg,#FF6B72,var(--red));border-radius:2px;width:0;transition:width 1.1s cubic-bezier(.22,.7,.3,1);}
.sg-car{position:absolute;top:0;height:34px;left:0;opacity:0;transition:opacity .6s .4s,left 1.1s cubic-bezier(.22,.7,.3,1);}
.scaleguide.on .sg-fill{width:74%;}
.scaleguide.on .sg-car{opacity:1;left:calc(74% - 30px);}
.sg-car svg{height:34px;width:auto;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4));}
.sg-tick{position:absolute;top:26px;width:1px;height:15px;background:rgba(255,255,255,.25);}
.sg-tick span{position:absolute;top:18px;left:50%;transform:translateX(-50%);font-size:.6rem;color:rgba(255,255,255,.5);white-space:nowrap;}
.sg-foot{display:flex;align-items:baseline;gap:8px;margin-top:8px;position:relative;}
.sg-foot b{font-size:1.5rem;font-weight:900;}
.sg-foot span{font-size:.74rem;color:rgba(255,255,255,.6);}

.pdp-opt{margin-bottom:18px;}
.pdp-opt-label{font-size:.8rem;font-weight:800;margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.pdp-opt-label span{color:var(--ink3);font-weight:600;}
.swatches{display:flex;gap:9px;}
.swatch{width:38px;height:38px;border-radius:11px;border:2px solid var(--line);position:relative;cursor:pointer;transition:transform .18s,border-color .18s;}
.swatch::after{content:"";position:absolute;inset:3px;border-radius:8px;background:var(--sc);}
.swatch.active{border-color:var(--ink);}
.swatch:hover{transform:translateY(-3px) scale(1.05);}

.pdp-buy{margin-bottom:12px;}
.btn-cart{width:100%;font-size:.98rem;padding:15px;display:flex;align-items:center;justify-content:center;gap:8px;}
.pdp-cta2{display:flex;gap:10px;margin-bottom:22px;}
.pdp-cta2 .btn{flex:1;}
.btn-wa{background:#25D366;color:#fff;}
.btn-red:hover{transform:translateY(-2px);box-shadow:0 13px 26px -11px rgba(236,28,37,.55);}
.btn-dark:hover{transform:translateY(-2px);box-shadow:var(--sh);}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 13px 26px -11px rgba(37,211,102,.5);filter:brightness(1.04);}

.pdp-trust{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px;}
.ptr{display:flex;align-items:center;gap:11px;transition:transform .18s;}
.ptr:hover{transform:translateX(-3px);}
.ptr .ic{width:38px;height:38px;border-radius:11px;background:var(--red-soft);display:flex;align-items:center;justify-content:center;flex:none;color:var(--red);transition:background .2s,color .2s;}
.ptr:hover .ic{background:var(--red);color:#fff;}
.ptr .ic svg{width:19px;height:19px;}
.ptr b{display:block;font-size:.78rem;font-weight:800;}
.ptr span{font-size:.68rem;color:var(--ink3);}

.pdp-rating{display:inline-flex;align-items:center;gap:9px;background:none;border:none;cursor:pointer;font-family:inherit;padding:4px 0;}
.stars{display:flex;gap:2px;color:#E8B23A;}
.stars svg{width:16px;height:16px;}
.stars .off{color:var(--line2);}
.pdp-rating .rtxt{font-size:.82rem;color:var(--ink3);font-weight:600;display:flex;align-items:center;gap:5px;}
.pdp-rating .rtxt b{color:var(--ink);}
.pdp-rating .rtxt svg{width:13px;height:13px;color:var(--ink3);transition:transform .2s,color .2s;}
.pdp-rating:hover .rtxt,.pdp-rating:hover .rtxt b{color:var(--red);}
.pdp-rating:hover .rtxt svg{color:var(--red);transform:translateX(-3px);}

/* ── TABS ── */
.pdp-tabs{margin-top:46px;}
.tabbar{display:flex;gap:4px;border-bottom:1.5px solid var(--line);overflow-x:auto;scrollbar-width:none;margin-bottom:24px;}
.tabbar::-webkit-scrollbar{display:none;}
.tabbtn{flex:none;padding:13px 18px;font-family:inherit;font-weight:700;font-size:.88rem;color:var(--ink3);border-bottom:2.5px solid transparent;margin-bottom:-1.5px;transition:color .2s,border-color .2s;white-space:nowrap;background:none;cursor:pointer;}
.tabbtn:hover{color:var(--ink2);}
.tabbtn.active{color:var(--red);border-bottom-color:var(--red);}
.tabpanel{display:none;animation:tabIn .35s ease;}
.tabpanel.active{display:block;}
@keyframes tabIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.spectable{width:100%;border-collapse:collapse;max-width:640px;text-align:right;}
.spectable tr{border-bottom:1px solid var(--line);}
.spectable td,.spectable th{padding:12px 4px;font-size:.85rem;vertical-align:top;text-align:right;font-weight:inherit;}
.spectable th{color:var(--ink3);font-weight:600;width:40%;}
.spectable td{color:var(--ink);font-weight:700;}
.pdp-desc{max-width:680px;font-size:.9rem;line-height:1.95;color:var(--ink2);}
.pdp-desc h3{font-size:1rem;color:var(--ink);font-weight:800;margin:18px 0 8px;}
.pdp-desc h3:first-child{margin-top:0;}
.pdp-desc p{margin-bottom:12px;}
.about-brand{display:flex;align-items:center;gap:14px;background:var(--sf);border:1px solid var(--line);border-radius:var(--r2);padding:16px 20px;margin-bottom:20px;max-width:680px;}
.about-brand .bb,.about-brand .micon{width:48px;height:48px;font-size:.9rem;flex:none;box-shadow:none;}
.about-brand b{font-size:1.05rem;font-weight:900;display:block;}
.about-brand span{font-size:.76rem;color:var(--ink3);}

/* ── REVIEWS ── */
.rev-summary{display:flex;gap:26px;align-items:center;flex-wrap:wrap;background:var(--sf);border:1px solid var(--line);border-radius:var(--r2);padding:22px;margin-bottom:22px;}
.rev-big{text-align:center;}
.rev-big b{font-size:2.6rem;font-weight:900;line-height:1;}
.rev-big .stars{justify-content:center;margin:6px 0;}
.rev-big span{font-size:.74rem;color:var(--ink3);}
.rev-bars{flex:1;min-width:200px;display:flex;flex-direction:column;gap:6px;}
.rev-bar{display:flex;align-items:center;gap:9px;font-size:.74rem;color:var(--ink3);}
.rev-bar .bar{flex:1;height:7px;background:var(--line2);border-radius:4px;overflow:hidden;}
.rev-bar .bar i{display:block;height:100%;background:#E8B23A;border-radius:4px;}
.rev-card{padding:18px 0;border-bottom:1px solid var(--line);}
.rev-card-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.rev-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--slate2),var(--slate3));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;flex:none;}
.rev-card-head b{font-size:.86rem;font-weight:800;}
.rev-card-head .stars{margin-inline-start:auto;}
.rev-card-head .stars svg{width:13px;height:13px;}
.rev-date{font-size:.7rem;color:var(--ink3);}
.rev-card p{font-size:.85rem;color:var(--ink2);line-height:1.8;}

.pdp-related{margin-top:50px;}

/* ── review form ── */
.rev-actions{display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap;background:var(--sf2);border:1px solid var(--line);border-radius:var(--r2);padding:16px 20px;margin-bottom:18px;}
.rev-actions-txt b{display:block;font-size:.9rem;font-weight:800;}
.rev-actions-txt span{font-size:.74rem;color:var(--ink3);}
.rev-actions .btn{flex:none;}
.rev-form{background:var(--sf);border:1px solid var(--line);border-radius:var(--r2);padding:20px;margin-bottom:20px;animation:tabIn .3s ease;}
.rev-form-title{font-size:1rem;font-weight:800;margin-bottom:16px;}
.rev-field{margin-bottom:14px;}
.rev-field label{display:block;font-size:.76rem;font-weight:700;color:var(--ink2);margin-bottom:7px;}
.rev-field input,.rev-field textarea{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:11px 13px;font-family:inherit;font-size:.86rem;color:var(--ink);background:var(--sf2);outline:none;transition:border-color .2s;resize:vertical;box-sizing:border-box;}
.rev-field input:focus,.rev-field textarea:focus{border-color:var(--red);}
.rate-stars{display:flex;gap:4px;}
.rate-star{color:var(--line2);transition:transform .15s,color .15s;padding:2px;background:none;cursor:pointer;}
.rate-star svg{width:27px;height:27px;}
.rate-star:hover{transform:scale(1.18);}
.rate-star.on{color:#E8B23A;}
.rev-form-btns{display:flex;gap:10px;margin-top:4px;}
.rev-form-btns .btn{flex:1;}

/* ── LIGHTBOX ── */
.lightbox{position:fixed;inset:0;background:rgba(15,17,20,.93);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;padding:24px;}
.lightbox.open{opacity:1;pointer-events:auto;}
.lbpic{width:min(86vw,720px);height:80vh;background-size:contain;background-repeat:no-repeat;background-position:center;}
.lbclose{position:absolute;top:20px;left:20px;width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.lbclose:hover{background:rgba(255,255,255,.26);}
.lbclose svg{width:22px;height:22px;}

/* ── STICKY MOBILE BUY BAR ── */
.buybar{position:fixed;bottom:0;left:0;right:0;z-index:90;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:11px;box-shadow:0 -6px 22px -12px rgba(20,22,25,.2);transform:translateY(110%);transition:transform .35s;}
.buybar.show{transform:translateY(0);}
.buybar-price{flex:none;}
.buybar-price b{display:block;font-size:1.05rem;font-weight:900;line-height:1.1;}
.buybar-price span{font-size:.64rem;color:var(--ink3);}
.buybar .btn{flex:1;}
.buybar-call{width:46px;height:46px;flex:none;border-radius:13px;background:var(--slate);color:#fff;display:flex;align-items:center;justify-content:center;}
.buybar-call svg{width:20px;height:20px;}
@media(min-width:900px){.buybar{display:none!important;}}

/* ── MOTION: load-in + scroll reveal ── */
@keyframes pdpIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
body.js-anim .pdp-gallery{animation:pdpIn .55s ease both;}
body.js-anim .pdp-info{animation:pdpIn .55s .08s ease both;}
body.js-anim .reveal{opacity:0;transform:translateY(24px);transition:opacity .65s cubic-bezier(.22,.7,.3,1),transform .65s cubic-bezier(.22,.7,.3,1);}
body.js-anim .reveal.shown{opacity:1;transform:none;}

/* ── MOBILE RESPONSIVE ── */
@media(max-width:899px){ body:has(.buybar.show){padding-bottom:74px;} }
@media(max-width:600px){
.pdp-wrap{padding-bottom:40px;}
.pdp-main{gap:18px;margin-top:16px;}
.pdp-title{font-size:1.28rem;line-height:1.36;margin-bottom:12px;}
.pdp-brands{gap:8px;margin-bottom:16px;}
.pdp-price{padding:14px 16px;gap:9px;}
.pdp-price .now{font-size:1.42rem;}
.pdp-price .save{margin-inline-start:0;}
.pdp-highlights{gap:7px;margin-bottom:16px;}
.scaleguide{padding:18px 16px;}
.pdp-trust{gap:9px;padding:16px 0;}
.ptr .ic{width:34px;height:34px;}
.ptr .ic svg{width:17px;height:17px;}
.gthumb{width:62px;height:62px;}
.pdp-tabs{margin-top:34px;}
.tabbtn{padding:12px 14px;font-size:.84rem;}
.pdp-related{margin-top:38px;}
.rev-summary{gap:18px;padding:18px;}
.rev-big b{font-size:2.2rem;}
}
@media(max-width:430px){
.pdp-cta2{flex-direction:column;}
.pdp-trust{grid-template-columns:1fr;}
}