/* Graination 2.0 — PDP (.pdm) styles. WO-007 B3 base; WO-028 (2026-08-04) product-first redesign:
   pure-white first-viewport stage with a dominant product image + a compact lower/right buy panel,
   details relocated to a restrained editorial band below the fold. Tokens from foundation.
   Route-scoped via body.gn-pdp-route (set only for the owned generic ordinary-retail PDP) — no global
   header or sticky change; excluded products (film-dev/frames/PPOM) never carry the class. */
.pd .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}

/* ---- ordinary retail surface = PURE WHITE (#fff), not bone; header fuses into the white first screen ---- */
body.gn-pdp-route{background:#fff;}
body.gn-pdp-route .ff-head{background:#fff;border-bottom-color:transparent;box-shadow:none;}
.pd.g2main,.pd .pdm,.pd .pdm-stagewrap,.pd .pdm-detail,.pd .pdm-related{background:#fff;}

/* ---- first viewport: dominant image + compact lower/right buy panel, strong whitespace ---- */
.pd .pdm{padding:0 0 clamp(40px,6vw,88px);}
.pd .pdm-stage{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,29vw,392px);grid-template-rows:1fr auto;
  gap:0 clamp(28px,4vw,72px);min-height:calc(100svh - var(--headh,68px) - 6px);
  padding:clamp(8px,1.6vw,20px) 0 clamp(14px,2vw,30px);align-items:stretch;}
.pd .pdm-hero{grid-column:1;grid-row:1 / 3;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:0;}
.pd .pdm-hero .pdm-img{max-width:100%;max-height:calc(100svh - var(--headh,68px) - 72px);width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 26px 26px rgba(11,11,11,.13)) drop-shadow(0 8px 10px rgba(11,11,11,.10));}
.pd .pdm-hero .gn-media-fallback.pdm-img{position:relative;inset:auto;width:min(58%,420px);height:min(52vh,480px);}
.pd .pdm-hero .ph{position:static;font-family:var(--gn-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gn-mut);margin-top:14px;text-align:center;}
.pd .pdm-buy{grid-column:2;grid-row:2;align-self:end;max-width:392px;min-width:0;}

/* ---- buy panel leaves ---- */
.pdm-cat{font-family:var(--gn-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gn-cobalt);margin:0 0 12px;}
.pdm-name{font-family:var(--gn-grot);font-weight:800;line-height:.98;letter-spacing:-.02em;text-transform:uppercase;margin:0 0 14px;text-wrap:balance;overflow-wrap:break-word;hyphens:auto;}
.pd .pdm-buy .pdm-name{font-size:clamp(21px,1.7vw,30px);}   /* compact panel — long names wrap freely, never clipped */
.pdm-name .dot{color:var(--gn-cobalt);}
.pdm-price{font-family:var(--gn-grot);font-weight:800;font-size:clamp(23px,2.2vw,30px);font-variant-numeric:tabular-nums;letter-spacing:-.015em;margin:0 0 12px;display:flex;align-items:baseline;gap:12px;}
.pdm-price .was{font-size:.6em;color:var(--gn-mut);text-decoration:line-through;font-weight:600;}
.pdm-price .now.sale{color:var(--gn-cobalt);}
.pdm-stock{display:inline-flex;align-items:center;gap:8px;font-family:var(--gn-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gn-ink);margin:0 0 18px;}
.pdm-stock i{width:7px;height:7px;border-radius:50%;background:var(--gn-ok);flex:none;}
.pdm-stock.is-out i{background:var(--gn-mut);}
.pdm-actions{display:flex;gap:10px;align-items:stretch;margin:0 0 14px;}
.pd-qty{display:flex;align-items:center;border:1px solid var(--gn-ink);flex:none;}
.pd-qty button{width:44px;height:56px;border:0;background:var(--gn-paper);font-size:19px;cursor:pointer;font-family:var(--gn-mono);}
.pd-qty button:hover{background:var(--gn-soft);}
.pd-qty input{width:42px;height:56px;border:0;border-left:1px solid var(--gn-line);border-right:1px solid var(--gn-line);text-align:center;font-family:var(--gn-mono);font-size:15px;font-variant-numeric:tabular-nums;}
.pd-add{flex:1;justify-content:center;min-height:56px;}
.pd-add.is-loading{background:var(--gn-cobalt);border-color:var(--gn-cobalt);color:rgba(255,255,255,.55);pointer-events:none;}
.pd-add.is-added{background:var(--gn-ok);border-color:var(--gn-ok);color:#fff;}
.pd-add:disabled{background:#e7e5dd;border-color:var(--gn-line);color:var(--gn-mut);cursor:not-allowed;}
.pdm-fulfil-min{font-family:var(--gn-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gn-mut);margin:0;}
.pdm-fulfil-min b{color:var(--gn-ink);font-weight:700;}

/* ---- below the fold: restrained editorial detail band ---- */
.pd .pdm-detail{border-top:1px solid var(--gn-line);padding:clamp(30px,5vw,64px) 0 clamp(8px,2vw,24px);}
.pd .pdm-detail-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.75fr);gap:clamp(28px,5vw,72px);align-items:start;}
.pd .pdm-desc .lab,.pdm-related .lab{font-family:var(--gn-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gn-mut);margin:0 0 16px;}
.pd .pdm-desc .prose{font-family:var(--gn-sans);font-size:15px;line-height:1.72;color:#33322f;max-width:64ch;}
.pd .pdm-desc .prose p{margin:0 0 1em;}
.pd .pdm-desc .prose p:last-child{margin-bottom:0;}
.pd .pdm-secondary{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:26px;}
.pd .pdm-shot2{margin:0;position:relative;background:var(--gn-paper);border:1px solid var(--gn-line);aspect-ratio:1/1;overflow:hidden;}
.pd .pdm-shot2 .pdm-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8%;}
.pdm-spec{border-top:1px solid var(--gn-ink);margin:0 0 8px;}
.pdm-spec .r{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--gn-line);}
.pdm-spec .l{font-family:var(--gn-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gn-mut);}
.pdm-spec .v{font-family:var(--gn-sans);font-size:13px;color:var(--gn-ink);text-align:right;}
.pd .pdm-acc{margin:6px 0 14px;}
details.pd-acc{border-bottom:1px solid var(--gn-line);}
details.pd-acc summary{list-style:none;cursor:pointer;padding:14px 0;font-family:var(--gn-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;display:flex;justify-content:space-between;color:var(--gn-ink);}
details.pd-acc summary::-webkit-details-marker{display:none;}
details.pd-acc summary::after{content:"+";color:var(--gn-cobalt);}
details.pd-acc[open] summary::after{content:"\2013";}
details.pd-acc .body{padding:0 0 15px;font-family:var(--gn-sans);font-size:13.5px;line-height:1.6;color:#3f3e38;}
.pdm-fulfil{font-family:var(--gn-sans);font-size:13px;line-height:1.65;color:var(--gn-mut);margin:14px 0 0;}
.pdm-fulfil b{color:var(--gn-ink);font-weight:600;}
.pdm-fulfil a{color:var(--gn-cobalt);text-decoration:none;border-bottom:1px solid rgba(0,91,255,.35);}
.pdm-fulfil a:hover{border-bottom-color:var(--gn-cobalt);}

/* ---- related shelf ---- */
.pdm-related{border-top:1px solid var(--gn-line);margin-top:clamp(30px,4vw,52px);padding-top:clamp(26px,3.5vw,44px);}
.gn-svc{display:flex;flex-direction:column;gap:10px;background:var(--gn-void);color:#fff;border:1px solid var(--gn-ink);border-radius:2px;padding:16px 14px;text-decoration:none;}
.gn-svc .k{font-family:var(--gn-grot);font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;}
.gn-svc .h{font-family:var(--gn-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gn-acid);}
.gn-svc .go{font-family:var(--gn-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-top:auto;padding-top:8px;}
.gn-svc:hover .go{color:var(--gn-acid);}

/* ---- mobile / tablet: intentionally recomposed — image first, compact panel second, then details ---- */
@media(max-width:860px){
  .pd .pdm-stage{grid-template-columns:1fr;grid-template-rows:auto auto;min-height:0;gap:clamp(14px,3vw,22px);padding:clamp(6px,2vw,14px) 0 8px;}
  .pd .pdm-hero{grid-column:1;grid-row:1;}
  .pd .pdm-hero .pdm-img{max-height:min(64vh,560px);}
  .pd .pdm-buy{grid-column:1;grid-row:2;max-width:none;align-self:auto;}
  .pd .pdm-detail-grid{grid-template-columns:1fr;gap:26px;}
}
@media(max-width:560px){
  .pd .pdm-secondary{grid-template-columns:1fr 1fr;}
}

/* ---- mobile sticky add (unchanged behaviour; gn2-pdp.js drives #pdSticky) ---- */
.pd-sticky{position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;align-items:center;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--gn-line);transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s;}
.pd-sticky.show{transform:translateY(0);visibility:visible;transition:transform .25s ease;}
.pd-sticky .pr{font-family:var(--gn-grot);font-weight:800;font-size:18px;font-variant-numeric:tabular-nums;}
.pd-sticky .nm{font-family:var(--gn-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gn-mut);}
.pd-sticky .sadd{margin-left:auto;border:1px solid var(--gn-ink);background:var(--gn-ink);color:#fff;font-family:var(--gn-sans);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:0 22px;min-height:48px;cursor:pointer;}
.pd-sticky .sadd.is-added{background:var(--gn-ok);border-color:var(--gn-ok);color:#fff;}
.pd-sticky .sadd.is-loading{color:rgba(255,255,255,.55);pointer-events:none;}
@media(max-width:860px){.pd-sticky{display:flex;}}
@media(prefers-reduced-motion:reduce){.pd-sticky{transition:none;}}