/* =========================================================
   PRODUCT PAGE (PDP) — extends the homepage system
   ========================================================= */
.nav{margin-bottom:0}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-weight:700;font-size:14.5px;padding:26px 0 18px}
.crumbs a{text-decoration:none;color:var(--charcoal)}
.crumbs a:hover{color:var(--ink);text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--lens)}
.crumbs span{color:var(--charcoal)}
.crumbs b{background:var(--lens);border:2px solid var(--ink);border-radius:8px;padding:1px 10px;transform:rotate(-2deg);display:inline-block}

.pdp{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px);align-items:start;padding-bottom:clamp(60px,8vw,110px)}
/* gallery */
.gallery{display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;position:relative}
.extra{grid-column:2;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.extra button{padding:0;border:var(--edge);border-radius:22px;overflow:hidden;aspect-ratio:1/1;background:var(--studio);box-shadow:5px 5px 0 var(--ink);transition:transform .15s}
.extra button:hover{transform:translate(-2px,-2px) rotate(-1deg)}
.extra button:nth-child(2){transform:rotate(1.5deg)}
.extra img{width:100%;height:100%;object-fit:cover}
.thumbs{display:flex;flex-direction:column;gap:12px}
.thumb{position:relative;width:92px;aspect-ratio:4/5;border:var(--edge);border-radius:14px;overflow:hidden;padding:0;background:#ddd;box-shadow:3px 3px 0 var(--ink);transition:transform .15s}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
.thumb:hover{transform:translate(-2px,-2px) rotate(-2deg)}
.thumb[aria-current="true"]{outline:4px solid var(--lens);outline-offset:2px}
.thumb .lbl{position:absolute;left:4px;bottom:4px;background:var(--paper);border:1.5px solid var(--ink);border-radius:6px;font-size:10.5px;font-weight:800;padding:0 5px}
.stage{position:relative;border:var(--edge);border-radius:26px;overflow:hidden;background:var(--studio);aspect-ratio:4/5;box-shadow:8px 8px 0 var(--ink);cursor:zoom-in}
.stage img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .35s ease,opacity .25s}
.stage.zoom img{transform:scale(1.9)}
.stage .tags{position:absolute;top:16px;left:16px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;z-index:3}
.stage .tag{position:static}
.stage .nav-a{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:var(--edge);background:var(--paper);display:grid;place-items:center;z-index:3;box-shadow:3px 3px 0 var(--ink)}
.stage .nav-a:hover{background:var(--lens)}
.stage .nav-a svg{width:22px;height:22px;stroke:var(--ink)}
.stage .prev{left:14px}.stage .next{right:14px}
.stage .count-pill{position:absolute;right:16px;bottom:16px;z-index:3;background:var(--ink);color:var(--paper);border-radius:999px;padding:4px 12px;font-weight:800;font-size:13px}
.stage .zoom-hint{position:absolute;left:16px;bottom:16px;z-index:3;background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:4px 12px;font-weight:800;font-size:13px}
.gallery .burst{right:-26px;top:-26px;width:130px;height:130px;font-size:18px;transform:rotate(12deg);z-index:6}

/* info column */
.buy{position:relative}
.buy .chips-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.buy .chips-row span{border:2px solid var(--ink);border-radius:999px;padding:3px 12px;font-weight:800;font-size:13px;background:var(--paper)}
.buy .chips-row span:nth-child(1){background:var(--puff);transform:rotate(-3deg)}
.buy .chips-row span:nth-child(2){background:var(--mint);transform:rotate(2deg)}
.buy h1{font-size:clamp(38px,4.2vw,64px);line-height:.95}
.rating{display:flex;align-items:center;gap:10px;margin:14px 0 18px;font-weight:700;flex-wrap:wrap}
.rating .stars{color:var(--hot);letter-spacing:2px;font-size:19px}
.rating a{color:var(--ink)}
.price-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.price-big{font-family:var(--display);font-size:clamp(36px,3.6vw,52px);background:var(--paper);border:var(--edge);border-radius:16px;padding:4px 18px 2px;box-shadow:5px 5px 0 var(--lens);transform:rotate(-2deg);display:inline-block}
.price-row small{color:var(--charcoal);font-weight:700}
.opt-block{margin-top:26px}
.opt-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px;font-weight:800}
.opt-head span{font-weight:600;color:var(--charcoal)}
.opt-head a,.opt-head button{border:0;background:none;padding:0;font-weight:800;text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--lens)}
.swatches{display:flex;gap:12px;flex-wrap:wrap}
.swatch{width:56px;height:56px;border-radius:50%;border:var(--edge);padding:4px;background:var(--paper);box-shadow:3px 3px 0 var(--ink);transition:transform .15s}
.swatch i{display:block;width:100%;height:100%;border-radius:50%;border:1.5px solid rgba(0,0,0,.2)}
.swatch[aria-pressed="true"]{transform:rotate(-8deg) scale(1.08);outline:4px solid var(--lens);outline-offset:2px}
.size-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.size-grid button{height:56px;border:var(--edge);border-radius:14px;background:var(--paper);font-family:var(--display);font-size:19px;box-shadow:3px 3px 0 var(--ink);transition:transform .12s}
.size-grid button:hover:not(:disabled){transform:translate(-2px,-2px)}
.size-grid button[aria-pressed="true"]{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 var(--lens)}
.size-grid button:disabled{opacity:.45;background:repeating-linear-gradient(-45deg,transparent 0 6px,rgba(0,0,0,.08) 6px 8px);cursor:not-allowed;box-shadow:none;text-decoration:line-through}
.fitnote{position:relative;margin-top:14px;display:flex;gap:12px;align-items:center;background:var(--smoke);border:2px dashed var(--ink);border-radius:14px;padding:10px 14px;font-weight:600;font-size:15px}
.fitnote b{font-weight:800}
.fitnote .hand{position:absolute;right:12px;bottom:-24px;font-size:19px;color:var(--hot);transform:rotate(6deg)}
.stock{margin-top:12px;font-weight:800;font-size:14.5px;display:flex;align-items:center;gap:8px}
.stock::before{content:"";width:10px;height:10px;border-radius:50%;background:#1FAF5A;box-shadow:0 0 0 3px rgba(31,175,90,.25)}
.stock.low::before{background:var(--hot);box-shadow:0 0 0 3px rgba(232,84,42,.25)}
.cta-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;margin-top:22px;align-items:stretch}
.qty{display:flex;align-items:center;border:var(--edge);border-radius:999px;background:var(--paper);box-shadow:3px 3px 0 var(--ink)}
.qty button{width:44px;height:100%;border:0;background:none;font-size:22px;font-weight:800}
.qty output{min-width:28px;text-align:center;font-family:var(--display);font-size:20px}
.cta-row .btn{justify-content:center;font-size:18px;padding:17px 22px}
.big-heart{width:60px;border:var(--edge);border-radius:50%;background:var(--paper);display:grid;place-items:center;box-shadow:3px 3px 0 var(--ink)}
.big-heart svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2.4}
.big-heart[aria-pressed="true"]{background:var(--blush)}
.big-heart[aria-pressed="true"] svg{fill:var(--hot);stroke:var(--hot)}
.buy-now{width:100%;justify-content:center;margin-top:10px}
.pin{margin-top:22px;border:var(--edge);border-radius:18px;padding:14px;background:var(--paper)}
.pin b{display:block;margin-bottom:8px}
.pin form{display:flex;gap:8px}
.pin input{flex:1;min-width:0;border:2px solid var(--ink);border-radius:12px;padding:12px 14px;font:inherit;font-weight:700;letter-spacing:.08em}
.pin input:focus{outline:none;box-shadow:0 0 0 3px var(--lens)}
.pin button{border:var(--edge);border-radius:12px;background:var(--ink);color:var(--paper);font-weight:800;padding:0 18px}
.pin p{margin:10px 0 0;font-weight:700;font-size:14.5px}
.pin p.ok{color:#17662E}
.perks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.perks div{display:flex;gap:10px;align-items:center;border:2px solid var(--ink);border-radius:14px;padding:10px 12px;font-weight:700;font-size:14px;background:var(--paper)}
.perks div:nth-child(1){background:var(--lens)}
.perks div:nth-child(4){background:var(--puff)}
.perks span{font-size:22px}
.acc{margin-top:22px;border-top:var(--edge)}
.acc details{border-bottom:var(--edge)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 2px;font-family:var(--display);font-size:20px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";width:34px;height:34px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-family:var(--body);font-weight:800;font-size:20px;flex:none;transition:transform .2s;background:var(--paper)}
.acc details[open] summary::after{transform:rotate(45deg);background:var(--lens)}
.acc .body{padding:0 2px 18px;font-size:15.5px}
.acc ul{margin:0;padding-left:20px}
.acc li{margin-bottom:6px}
.share{display:flex;gap:10px;align-items:center;margin-top:18px;font-weight:800;font-size:14px}
.share a{width:38px;height:38px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;text-decoration:none;background:var(--paper)}
.share a:hover{background:var(--lens)}
.share svg{width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:2}

/* print close-ups */
.closeups{background:var(--ink);color:var(--paper);border-block:var(--edge);overflow:hidden}
.closeups .head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.closeups .head .hand{color:var(--lens);font-size:26px;transform:rotate(-3deg)}
.crops{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.crop{margin:0;position:relative}
.crop .frame{aspect-ratio:1/1;border:3px solid var(--paper);border-radius:24px;overflow:hidden;background:var(--studio)}
.crop .frame img{width:100%;height:100%;object-fit:cover}
.crop:nth-child(1){transform:rotate(-2deg)}.crop:nth-child(2){transform:rotate(1.5deg) translateY(20px)}.crop:nth-child(3){transform:rotate(-1deg)}
.crop figcaption{margin-top:14px}
.crop figcaption b{display:block;font-family:var(--display);font-weight:400;font-size:24px;color:var(--lens)}
.crop figcaption span{opacity:.85;font-size:15px}
.crop .num{position:absolute;top:-16px;left:-12px;width:48px;height:48px;border-radius:50%;background:var(--lens);color:var(--ink);border:3px solid var(--paper);display:grid;place-items:center;font-family:var(--display);font-size:20px;z-index:2}

/* complete the fit */
.big{font-size:clamp(40px,5.4vw,82px)}
.pair{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:18px;align-items:center}
.pair .plus{font-family:var(--hand);font-size:30px;line-height:1;transform:rotate(-8deg)}
.pair .card{box-shadow:var(--pop)}
.pair-total{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px;border:var(--edge);border-radius:20px;padding:16px 20px;background:var(--lens);box-shadow:var(--pop)}
.pair-total b{font-family:var(--display);font-weight:400;font-size:28px}
.pair-total s{color:var(--charcoal);margin-right:8px;font-weight:700}

/* reviews */
.rev-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,60px);align-items:start}
.score{border:var(--edge);border-radius:24px;padding:24px;background:var(--paper);box-shadow:var(--pop);position:sticky;top:110px}
.score .num{font-family:var(--display);font-size:88px;line-height:.85}
.score .stars{color:var(--hot);font-size:24px;letter-spacing:3px}
.bars{display:grid;gap:8px;margin:18px 0 22px}
.bars div{display:grid;grid-template-columns:28px 1fr 38px;gap:10px;align-items:center;font-weight:700;font-size:14px}
.bars i{height:12px;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--smoke)}
.bars i::after{content:"";display:block;height:100%;width:var(--w);background:var(--lens)}
.fitmeter{border-top:2px dashed var(--ink);padding-top:16px;margin-top:4px}
.fitmeter b{display:block;margin-bottom:10px}
.fitmeter .track2{position:relative;height:12px;border:2px solid var(--ink);border-radius:999px;background:linear-gradient(90deg,var(--mint),var(--lens),var(--blush))}
.fitmeter .track2 i{position:absolute;top:50%;left:62%;width:24px;height:24px;border-radius:50%;background:var(--ink);border:3px solid var(--paper);transform:translate(-50%,-50%)}
.fitmeter .ends{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin-top:8px;color:var(--charcoal)}
.rev-list{display:grid;gap:18px}
.rev{border:var(--edge);border-radius:22px;padding:20px;background:var(--paper);box-shadow:var(--pop)}
.rev:nth-child(2){transform:rotate(.6deg);background:var(--smoke)}
.rev .top{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.rev .who{display:flex;gap:10px;align-items:center}
.rev .av{width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-family:var(--display);background:var(--lens)}
.rev .who small{display:block;color:var(--charcoal);font-weight:600}
.rev .stars{color:var(--hot);letter-spacing:2px}
.rev h3{font-family:var(--display);font-size:22px;margin:12px 0 6px}
.rev p{margin:0}
.rev .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.rev .meta span{border:2px solid var(--ink);border-radius:999px;padding:2px 10px;font-weight:700;font-size:13px}
.rev .verified{color:#17662E;font-weight:800;font-size:13px}
.rev .helpful{margin-top:12px;display:flex;gap:8px;align-items:center;font-size:14px;font-weight:700}
.rev .helpful button{border:2px solid var(--ink);border-radius:999px;background:var(--paper);padding:3px 12px;font-weight:800}
.rev .helpful button[aria-pressed="true"]{background:var(--lens)}

/* related */
.related{background:var(--smoke);border-block:var(--edge)}
.related::before{content:"";position:absolute;inset:0;background:var(--dots);opacity:.35}
.related .grid{position:relative}
.related .grid .card:nth-child(2){transform:rotate(1deg)}
.related .grid .card:nth-child(3){transform:rotate(-1deg)}

/* size guide modal */
.modal{position:fixed;inset:0;z-index:75;display:grid;place-items:center;padding:20px;pointer-events:none;opacity:0;transition:opacity .2s}
.modal.on{pointer-events:auto;opacity:1}
.modal .box{position:relative;width:min(680px,100%);max-height:calc(100% - 40px);overflow:auto;background:var(--paper);border:var(--edge);border-radius:28px;box-shadow:10px 10px 0 var(--ink);padding:26px;transform:translateY(20px) rotate(1deg);transition:transform .25s cubic-bezier(.2,1.4,.4,1)}
.modal.on .box{transform:none}
.modal .box header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.modal h3{font-size:34px}
.unit{display:inline-flex;border:var(--edge);border-radius:999px;overflow:hidden;margin-bottom:14px}
.unit button{border:0;background:var(--paper);padding:6px 16px;font-weight:800}
.unit button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.chart{width:100%;border-collapse:separate;border-spacing:0;border:var(--edge);border-radius:16px;overflow:hidden;font-weight:700}
.chart th,.chart td{padding:12px 10px;text-align:center;border-bottom:2px solid var(--ink)}
.chart tr:last-child td{border-bottom:0}
.chart th{background:var(--lens);font-family:var(--display);font-weight:400}
.chart td:first-child{font-family:var(--display);font-weight:400;background:var(--smoke)}
.chart tr.me td{background:var(--puff)}
.how{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;font-size:14.5px}
.how div{border:2px dashed var(--ink);border-radius:14px;padding:12px}
.how b{display:block}

/* sticky mobile bar */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;gap:10px;align-items:center;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:var(--edge)}
.mbar img{width:44px;height:54px;object-fit:cover;object-position:top;border:2px solid var(--ink);border-radius:8px}
.mbar div{flex:1;min-width:0;line-height:1.2}
.mbar b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbar span{font-family:var(--display)}
.mbar .btn{padding:12px 18px;font-size:15px}

@media (max-width:1100px){
  .pdp{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .gallery{grid-template-columns:1fr;position:static}
  .extra{display:none}
  .thumbs{flex-direction:row;order:2;overflow-x:auto;padding:4px 4px 8px}
  .thumb{flex:none;width:76px}
}
@media (max-width:860px){
  .pdp{grid-template-columns:minmax(0,1fr)}
  .gallery .burst{width:100px;height:100px;font-size:14px;right:-6px;top:-18px}
  .crops{grid-template-columns:1fr 1fr}
  .crop:nth-child(3){display:none}
  .pair{grid-template-columns:1fr 1fr}
  .pair .plus{display:none}
  .pair .card:nth-child(5){display:none}
  .rev-wrap{grid-template-columns:minmax(0,1fr)}
  .score{position:static}
  .mbar{display:flex}
  .fab{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .site-foot{padding-bottom:110px}
}
@media (max-width:520px){
  .size-grid button{height:50px;font-size:16px}
  .cta-row{grid-template-columns:auto 1fr}
  .big-heart{display:none}
  .perks{grid-template-columns:1fr}
  .how{grid-template-columns:1fr}
  .crops{gap:14px}
  .chart th,.chart td{padding:9px 4px;font-size:13px}
}