/* ============================================================
   Graination — Film Product Detail Page (PDP)
   Mobile-first. Centered transparent-PNG product hero with a soft
   CSS shadow; buy panel; sticky mobile add-to-cart bar. Prefix `pd-`.
   Reuses styles.css tokens + homepage.css chrome.
   ============================================================ */

/* ---------- breadcrumb strip ---------- */
.pd-crumbwrap { background:var(--g-white); border-bottom:1px solid var(--g-border); padding-top: 96px; }

/* ============================================================
   GALLERY HERO (editorial — SKU top · floating product · price+name)
   ============================================================ */
.pd-main { background:var(--g-soft); padding: clamp(20px,3vw,40px) clamp(20px,4vw,72px) clamp(48px,6vw,90px); position:relative; }
.pd-sku { text-align:center; font-family:var(--font-accent); font-size:13px; letter-spacing:0.16em; text-transform:uppercase; color:var(--g-muted); margin:0 0 clamp(20px,3vw,40px); }
.pd-gallery { position:relative; display:grid; grid-template-columns: 1fr minmax(0,420px) 1fr; align-items:center; gap:clamp(20px,3vw,56px); max-width:1320px; margin:0 auto; min-height:min(64vh,620px); }
.pd-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:46px; height:46px; border-radius:999px; border:1px solid transparent; background:transparent; color:var(--g-muted); font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:color var(--dur-fast), border-color var(--dur-fast); }
.pd-arrow:hover { color:var(--g-black); border-color:var(--g-border); }
.pd-arrow.prev { left:-4px; } .pd-arrow.next { right:-4px; }

/* left spec column */
.pd-gcol.left { display:flex; flex-direction:column; gap:clamp(22px,3vw,40px); text-align:center; }
.pd-gspec .gk { font-family:var(--font-accent); font-size:14px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--g-black); margin-bottom:12px; }
.pd-gspec .gv { font-family:var(--font-accent); font-size:13px; line-height:1.7; letter-spacing:0.02em; color:var(--g-muted); margin:0; max-width:30ch; margin-inline:auto; }

/* center floating product */
.pd-gstage { position:relative; align-self:center; }
.pd-gstage .pd-prod { position:relative; aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; }
.pd-gstage .pd-prod::after { content:""; position:absolute; left:50%; bottom:-30px; transform:translateX(-50%); width:62%; height:26px; background:radial-gradient(50% 50% at 50% 50%, rgba(11,11,11,0.22), transparent 72%); filter:blur(3px); z-index:0; }
.pd-gstage .pd-prod image-slot { position:relative; z-index:1; width:100%; height:100%; }

/* right price + name + buy */
.pd-gcol.right { display:flex; flex-direction:column; align-items:center; text-align:center; gap:0; }
.pd-gprice { font-family:var(--font-display); font-weight:700; color:var(--g-blue); margin-bottom:clamp(18px,2.4vw,28px); }
.pd-gprice .cur { font-size:0.6em; vertical-align:super; margin-right:2px; }
.pd-gprice .amt { font-size:clamp(28px,3vw,40px); letter-spacing:-0.02em; }
.pd-gcol.right .pd-brand { font-family:var(--font-accent); font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:var(--g-muted); padding-top:clamp(18px,2.4vw,28px); border-top:1px solid var(--g-border); width:100%; max-width:240px; }
.pd-gtitle { font-family:var(--font-display); font-weight:800; font-size:clamp(40px,4.6vw,72px); line-height:0.92; letter-spacing:-0.03em; color:var(--g-black); margin:14px 0 clamp(20px,2.6vw,30px); }
.pd-gcol.right .pd-stock { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:#1f8a4c; margin-bottom:clamp(22px,3vw,32px); }
.pd-gcol.right .pd-stock .dot { width:7px; height:7px; border-radius:50%; background:#1f8a4c; }
.pd-gactions { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.pd-buybtn { -webkit-appearance:none; appearance:none; border:0; cursor:pointer; background:var(--g-white); color:var(--g-black); font-family:var(--font-body); font-weight:700; font-size:14px; letter-spacing:0.04em; text-transform:uppercase; padding:0 clamp(34px,4vw,56px); height:56px; border:1px solid var(--g-black); transition:background var(--dur-fast), color var(--dur-fast); }
.pd-buybtn:hover { background:var(--g-black); color:#fff; }
.pd-buybtn.added { background:var(--g-blue); border-color:var(--g-blue); color:#fff; }
.pd-gnote { font-family:var(--font-accent); font-size:12px; letter-spacing:0.03em; text-transform:uppercase; color:var(--g-muted); margin:6px 0 0; }

/* intro grid (desc + specs strip below the gallery) */
.pd-introgrid { display:grid; grid-template-columns: 1.3fr 1fr; gap:clamp(28px,4vw,64px); align-items:center; }

@media (max-width:1023px){
  .pd-gallery { grid-template-columns:1fr; gap:clamp(28px,5vw,40px); min-height:0; }
  .pd-gcol.left { order:3; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:24px 32px; }
  .pd-gspec .gv { font-size:12.5px; }
  .pd-gstage { order:1; max-width:340px; margin:0 auto; }
  .pd-gcol.right { order:2; }
  .pd-arrow { top:auto; bottom:-6px; transform:none; } .pd-arrow.prev{left:24%;} .pd-arrow.next{right:24%;}
  .pd-introgrid { grid-template-columns:1fr; gap:24px; }
}
@media (max-width:560px){
  .pd-gcol.left { flex-direction:column; }
  .pd-arrow { display:none; }
}

/* ---------- breadcrumb (cont.) ---------- */
.pd-crumb { display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-family:var(--font-accent); font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color:var(--g-muted); padding:16px 0; }
.pd-crumb a { color:var(--g-muted); } .pd-crumb a:hover { color:var(--g-blue); }
.pd-crumb .sep { opacity:.5; } .pd-crumb .cur { color:var(--g-black); }

/* ============ MOBILE-FIRST: single column, image is the hero ============ */
.pd-main { background:var(--g-white); padding: clamp(20px,5vw,40px) 0 clamp(48px,8vw,80px); }
.pd-grid { display:flex; flex-direction:column; gap: clamp(22px,4vw,32px); }

/* product image + soft shadow */
.pd-stage { position:relative;
  background:
    radial-gradient(70% 60% at 50% 38%, rgba(0,91,255,0.06), transparent 64%),
    linear-gradient(180deg, var(--g-soft), #fff);
  border:1px solid var(--g-border); border-radius:4px;
  padding: clamp(28px,7vw,56px) clamp(20px,5vw,48px) clamp(40px,8vw,64px);
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pd-prod { position:relative; width:100%; max-width: 320px; aspect-ratio: 3/4; margin-inline:auto; }
.pd-prod image-slot, .pd-prod .pd-ph { position:absolute; inset:0; width:100%; height:100%; z-index:2; }
/* soft realistic contact shadow under the floating PNG (pure CSS) */
.pd-prod::after { content:""; position:absolute; left:50%; bottom:-7%; transform:translateX(-50%);
  width:62%; height:7%; background:rgba(11,11,11,0.28); filter:blur(13px); border-radius:50%; z-index:1; }
.pd-prod .pd-ph { z-index:2; border-radius:6px;
  background:#e7e4dc; background-image:
    radial-gradient(120% 90% at 50% 18%, rgba(0,91,255,0.08), transparent 60%),
    repeating-linear-gradient(118deg, #efece5 0 2px, #e4e0d7 2px 11px);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-accent); font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color:#9a978d; }
/* stage badges */
.pd-badges { position:absolute; top:14px; left:14px; z-index:3; display:flex; gap:6px; }
.pd-badge { font-family:var(--font-body); font-weight:600; font-size:11px; letter-spacing:0.04em; text-transform:uppercase; padding:5px 10px; border-radius:3px; }
.pd-badge.new { background:var(--g-acid); color:var(--g-black); }
.pd-badge.cold { background:#fff; color:var(--g-black); border:1px solid var(--g-border); }

/* thumbnails — swipeable carousel on mobile */
.pd-thumbs { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
.pd-thumbs::-webkit-scrollbar { height:0; }
.pd-thumb { flex:0 0 64px; width:64px; height:64px; border-radius:7px; border:1.5px solid var(--g-border); overflow:hidden; background:var(--g-soft); scroll-snap-align:start; cursor:pointer; position:relative; }
.pd-thumb.on { border-color:var(--g-blue); }
.pd-thumb image-slot, .pd-thumb .pd-ph2 { position:absolute; inset:0; width:100%; height:100%; }
.pd-thumb .pd-ph2 { background:#e7e4dc; background-image:repeating-linear-gradient(118deg, #efece5 0 2px, #e4e0d7 2px 9px); }

/* ---------- buy panel ---------- */
.pd-buy { display:flex; flex-direction:column; }
.pd-brand { font-family:var(--font-accent); font-size:13px; letter-spacing:0.05em; text-transform:uppercase; color:var(--g-muted); }
.pd-title { font-family:var(--font-display); font-weight:800; font-size:clamp(28px,5vw,44px); line-height:0.98; letter-spacing:-0.03em; margin:8px 0 0; }
.pd-price-row { display:flex; align-items:baseline; gap:12px; margin-top:16px; }
.pd-price { font-family:var(--font-display); font-weight:800; font-size:clamp(24px,3.4vw,32px); letter-spacing:-0.02em; color:var(--g-black); }
.pd-was { font-size:15px; color:var(--g-muted); text-decoration:line-through; }
.pd-unit { font-family:var(--font-accent); font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color:var(--g-muted); }
.pd-stock { display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-size:14px; font-weight:600; color:#1f8a3b; }
.pd-stock .dot { width:8px; height:8px; border-radius:50%; background:#1f8a3b; }
.pd-stock.low { color:#b06a00; } .pd-stock.low .dot { background:#b06a00; }
.pd-stock.out { color:var(--g-muted); } .pd-stock.out .dot { background:var(--g-muted); }

/* quick specs */
.pd-specs { display:grid; grid-template-columns: 1fr 1fr; gap:1px; margin-top:22px; background:var(--g-border); border:1px solid var(--g-border); border-radius:8px; overflow:hidden; }
.pd-spec { background:#fff; padding:14px 16px; }
.pd-spec .k { font-family:var(--font-accent); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--g-muted); }
.pd-spec .v { font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:-0.01em; color:var(--g-black); margin-top:4px; }

.pd-desc { font-size:15.5px; line-height:1.6; color:#33332f; margin:22px 0 0; max-width:46ch; }

/* quantity + add to cart */
.pd-actions { display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.pd-qty { display:inline-flex; align-items:center; border:1.5px solid var(--g-border); border-radius:8px; overflow:hidden; align-self:flex-start; }
.pd-qty button { -webkit-appearance:none; appearance:none; width:48px; height:52px; background:#fff; border:0; font-size:20px; color:var(--g-black); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background var(--dur-fast); }
.pd-qty button:hover { background:var(--g-soft); }
.pd-qty button:disabled { color:var(--g-border); cursor:not-allowed; }
.pd-qty .q { min-width:56px; text-align:center; font-family:var(--font-display); font-weight:800; font-size:18px; border-inline:1.5px solid var(--g-border); height:52px; display:flex; align-items:center; justify-content:center; }
.pd-atc { -webkit-appearance:none; appearance:none; width:100%; min-height:54px; border:0; border-radius:8px; cursor:pointer;
  background:var(--g-blue); color:#fff; font-family:var(--font-body); font-weight:700; font-size:15px; letter-spacing:0.02em;
  display:inline-flex; align-items:center; justify-content:center; gap:10px; transition:background var(--dur-base), transform var(--dur-fast); }
.pd-atc:hover { background:#0a4fd0; } .pd-atc:active { transform:scale(0.99); }
.pd-atc.added { background:#1f8a3b; }
.pd-atc:disabled { background:var(--g-border); color:#fff; cursor:not-allowed; }

.pd-note { display:flex; gap:9px; align-items:flex-start; font-size:13px; line-height:1.5; color:var(--g-muted); margin-top:14px; }
.pd-note .i { flex:none; margin-top:1px; color:var(--g-blue); }
.pd-note.sale .i { color:var(--g-black); }

/* ---------- secondary sections ---------- */
.pd-sec { background:var(--g-white); padding: clamp(44px,7vw,88px) 0; border-top:1px solid var(--g-border); }
.pd-sec.dark { background:var(--g-dark); color:#fff; border-top:0; }
.pd-sec .lead-sm { font-family:var(--font-accent); font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:var(--g-blue); }
.pd-sec.dark .lead-sm { color:var(--g-acid); }
.pd-sec h2 { font-family:var(--font-display); font-weight:800; font-size:clamp(26px,4vw,52px); line-height:0.96; letter-spacing:-0.03em; text-transform:uppercase; margin:14px 0 0; }
.pd-sec .body { font-size:16px; line-height:1.6; color:var(--g-muted); max-width:54ch; margin:18px 0 0; }
.pd-sec.dark .body { color:#A3A39E; }

/* film look traits */
.pd-look { display:grid; grid-template-columns:1fr; gap:14px; margin-top:clamp(28px,4vw,44px); }
.pd-trait { border:1px solid #2A2A2A; border-radius:4px; padding:20px 22px; }
.pd-trait .tk { font-family:var(--font-accent); font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color:var(--g-acid); }
.pd-trait .tv { font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-0.01em; margin:8px 0 6px; }
.pd-trait p { font-size:14px; line-height:1.5; color:#A3A39E; margin:0; }

/* sample images — swipeable on mobile */
.pd-samples { display:grid; grid-auto-flow:column; grid-auto-columns:78%; gap:14px; margin-top:clamp(24px,4vw,40px); overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
.pd-samples::-webkit-scrollbar { height:0; }
.pd-sample { position:relative; aspect-ratio:4/5; border-radius:4px; overflow:hidden; background:#0d0d0d; scroll-snap-align:center; }
.pd-sample image-slot, .pd-sample .pd-ph3 { position:absolute; inset:0; width:100%; height:100%; }
.pd-sample .pd-ph3 { background:#141414; background-image:repeating-linear-gradient(118deg,#181818 0 2px,#0f0f0f 2px 11px); }
.pd-sample .cap { position:absolute; left:12px; bottom:12px; z-index:2; font-family:var(--font-accent); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:#fff; }

/* details accordions */
.pd-acc { max-width:760px; margin-top:clamp(20px,3vw,32px); border-top:1px solid var(--g-border); }
.pd-ac { border-bottom:1px solid var(--g-border); }
.pd-ac-q { -webkit-appearance:none; appearance:none; width:100%; background:transparent; border:0; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 0; text-align:left; font-family:var(--font-display); font-weight:700; font-size:clamp(17px,2vw,22px); letter-spacing:-0.01em; color:var(--g-black); }
.pd-ac-q .ic { flex:none; width:22px; height:22px; position:relative; }
.pd-ac-q .ic::before, .pd-ac-q .ic::after { content:""; position:absolute; background:var(--g-blue); transition:transform var(--dur-base) var(--ease-out); }
.pd-ac-q .ic::before { top:10px; left:1px; right:1px; height:2px; }
.pd-ac-q .ic::after { left:10px; top:1px; bottom:1px; width:2px; }
.pd-ac.open .pd-ac-q .ic::after { transform:scaleY(0); }
.pd-ac-a { overflow:hidden; max-height:0; transition:max-height var(--dur-slow) var(--ease-standard); }
.pd-ac-a p { font-size:15px; line-height:1.6; color:var(--g-muted); margin:0 0 22px; max-width:62ch; }

/* related products */
.pd-rel { display:grid; grid-template-columns: 1fr 1fr; gap:clamp(14px,2vw,24px); margin-top:clamp(28px,4vw,44px); }
.pd-rcard { display:flex; flex-direction:column; }
.pd-rcard .ri { position:relative; aspect-ratio:1/1; border-radius:4px; overflow:hidden; background:var(--g-soft); border:1px solid var(--g-border); }
.pd-rcard .ri image-slot, .pd-rcard .ri .pd-ph4 { position:absolute; inset:0; width:100%; height:100%; }
.pd-rcard .ri .pd-ph4 { background:#e7e4dc; background-image:repeating-linear-gradient(118deg,#efece5 0 2px,#e4e0d7 2px 10px); }
.pd-rcard .rb { font-family:var(--font-accent); font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color:var(--g-muted); margin-top:12px; }
.pd-rcard .rn { font-family:var(--font-body); font-weight:600; font-size:14.5px; color:var(--g-black); margin-top:4px; line-height:1.3; }
.pd-rcard .rp { font-family:var(--font-display); font-weight:800; font-size:15px; margin-top:7px; }

/* ============ STICKY MOBILE ADD-TO-CART BAR ============ */
.pd-sticky { position:fixed; left:0; right:0; bottom:0; z-index:80; display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,0.96); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid var(--g-border); padding:10px clamp(14px,4vw,20px); padding-bottom:max(10px, env(safe-area-inset-bottom));
  transform:translateY(110%); transition:transform var(--dur-base) var(--ease-out); }
.pd-sticky.show { transform:translateY(0); }
.pd-sticky .s-info { display:flex; flex-direction:column; line-height:1.1; }
.pd-sticky .s-name { font-family:var(--font-body); font-weight:600; font-size:12.5px; color:var(--g-black); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:40vw; }
.pd-sticky .s-price { font-family:var(--font-display); font-weight:800; font-size:18px; letter-spacing:-0.01em; margin-top:2px; }
.pd-sticky .pd-atc { flex:1; min-height:48px; margin:0; }

/* ============ TABLET ============ */
@media (min-width: 700px) {
  .pd-specs { grid-template-columns: repeat(4,1fr); }
  .pd-look { grid-template-columns: 1fr 1fr; }
  .pd-rel { grid-template-columns: repeat(4,1fr); }
  .pd-samples { grid-auto-columns: 46%; }
  .pd-actions { flex-direction:row; align-items:center; }
  .pd-atc { width:auto; flex:1; }
}

/* ============ DESKTOP: two-column, sticky buy panel ============ */
@media (min-width: 1024px) {
  .pd-grid { display:grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(36px,4vw,72px); align-items:start; }
  .pd-stage { position:sticky; top:96px; }
  .pd-media { position:sticky; top:96px; }
  .pd-prod { max-width: 360px; }
  .pd-buy { padding-top:8px; }
  .pd-sticky { display:none !important; }   /* sticky bar is mobile/tablet only */
  .pd-samples { grid-auto-columns: 31%; }
}
@media (max-width: 1023px) {
  .pd-media { display:flex; flex-direction:column; gap:14px; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-sticky, .pd-ac-a, .pd-atc { transition:none; }
}