/* ============================================================
   SHOPICKS — product view
   ============================================================ */
.pview{ padding-bottom:30px; }
.crumbs{ display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted); padding:18px 0 14px; }
.crumbs a{ cursor:pointer; } .crumbs a:hover{ color:var(--gold-deep); }
.crumbs b{ color:var(--ink); font-weight:600; }

.pview-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:46px; align-items:start; }

/* media */
.pview-media{ position:sticky; top:96px; }
.pstage{ position:relative; height:min(60vh,560px); border-radius:var(--r-lg); overflow:hidden;
  background:radial-gradient(120% 90% at 50% 16%, #FFFDF8 0%, #F1E9DA 60%, #E5D8C2 100%);
  border:1px solid var(--line); box-shadow:var(--sh-1); perspective:1100px; cursor:grab; touch-action:none; }
.pstage:active{ cursor:grabbing; }
.pstage-light{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(40% 50% at 50% 0%, rgba(255,247,228,.9), transparent 70%); mix-blend-mode:screen; }
.pstage-pedestal{ position:absolute; left:50%; bottom:7%; transform:translateX(-50%); width:62%; height:24px;
  background:radial-gradient(closest-side, rgba(150,110,55,.22), transparent 75%); }
.pstage-3d{ position:absolute; inset:0; display:grid; place-items:center; transform-style:preserve-3d; }
.pstage-obj{ width:78%; height:80%; display:grid; place-items:center; transform-style:preserve-3d;
  transition:transform .14s ease-out; filter:drop-shadow(0 30px 36px rgba(45,30,12,.28)); }
.pstage-shadow{ position:absolute; left:50%; bottom:9%; width:48%; height:20px; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(50,34,14,.32), transparent 78%); filter:blur(3px); transition:transform .14s; }
.pstage-hint{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); font-size:12px;
  color:var(--gold-deep); font-weight:600; background:rgba(255,255,255,.7); padding:5px 12px; border-radius:99px; backdrop-filter:blur(4px); }

/* scene (real-photo) stage */
.pstage.scene{ cursor:default; }
/* cut-out garment stage (drag to rotate) */
.pstage.cut{ perspective:1100px; cursor:grab; }
.pstage.cut:active{ cursor:grabbing; }
.cut-3d{ position:absolute; inset:0; display:grid; place-items:center; transform-style:preserve-3d; }
.cut-obj{ display:grid; place-items:center; transform-style:preserve-3d; transition:transform .14s ease-out; }
.cut-obj img{ object-fit:contain; filter:drop-shadow(0 30px 36px rgba(45,30,12,.34)); }
.cut-shadow{ position:absolute; bottom:8%; left:50%; width:46%; height:24px; background:radial-gradient(closest-side, rgba(40,26,10,.42), transparent 76%); filter:blur(4px); transition:transform .14s; }
.pcard-cut{ width:100%; height:100%; display:grid; place-items:center; padding:8px; }
.pcard-cut img{ max-height:92%; max-width:84%; object-fit:contain; filter:drop-shadow(0 12px 16px rgba(45,30,12,.22)); transition:.4s var(--ease); }
.pcard:hover .pcard-cut img{ transform:translateY(-5px) scale(1.04); }
.mini-cut{ width:100%; height:100%; display:grid; place-items:center; padding:5px; }
.mini-cut img{ max-height:88%; max-width:86%; object-fit:contain; }
/* SceneView fills whatever frame holds it — cards, product stage, thumbnails.
   Without this it collapses to 0×0 and the photo never paints. */
.sv{ width:100%; height:100%; display:block; }
.pstage-scene{ position:absolute; inset:0; border-radius:inherit; }
.pstage.scene .pstage-hint{ bottom:auto; top:14px; background:rgba(24,18,12,.6); color:#F4ECDC; }
.pstage-shots{ position:absolute; bottom:12px; left:50%; transform:translateX(-50%); display:flex; gap:9px; z-index:6; }
.pshot{ width:48px; height:60px; border-radius:9px; overflow:hidden; border:1.5px solid rgba(255,255,255,.65);
  box-shadow:var(--sh-1); transition:.18s; }
.pshot.on{ border-color:var(--gold-soft); box-shadow:0 0 0 2px rgba(233,220,182,.7); }
.pshot:hover{ transform:translateY(-2px); }

.pview-thumbs{ display:flex; gap:11px; margin-top:14px; }
.thumb{ flex:1; aspect-ratio:1/1; border-radius:var(--r-sm); border:1.5px solid var(--line); overflow:hidden;
  background:radial-gradient(120% 90% at 50% 20%, #fff, var(--cream-2)); display:grid; place-items:center; transition:.2s; }
.thumb.on{ border-color:var(--gold); box-shadow:0 0 0 2px var(--gold-pale); }
.thumb:hover{ border-color:var(--line-2); }
.thumb-in{ width:80%; height:80%; display:grid; place-items:center; }

/* info */
.pview-info{ padding-top:6px; }
.pview-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.pview-head h1{ font-size:clamp(28px,3vw,38px); margin:10px 0 4px; line-height:1.05; }
.pview-brand{ font-size:15px; color:var(--muted); letter-spacing:.04em; }
.fav-lg{ width:48px; height:48px; border-radius:50%; border:1.5px solid var(--line-2); display:grid; place-items:center; flex-shrink:0; transition:.2s; }
.fav-lg:hover{ border-color:var(--gold); }
.fav-lg.on{ background:var(--gold-pale); border-color:var(--gold-soft); }

.pview-price{ display:flex; align-items:baseline; gap:12px; margin:18px 0 4px; }
.pview-price b{ font-size:34px; font-family:var(--serif); font-weight:600; }
.pview-price s{ font-size:18px; color:var(--muted-2); }
.save{ background:var(--warn-bg); color:var(--warn); font-weight:700; font-size:13px; padding:3px 10px; border-radius:99px; }

.pview-specs{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-sm); overflow:hidden; margin:20px 0; }
.inforow{ background:#fff; padding:12px 15px; display:flex; flex-direction:column; gap:3px; }
.inforow span{ font-size:12px; color:var(--muted); } .inforow b{ font-size:15px; font-weight:600; }

.pview-desc{ font-size:14.5px; line-height:1.7; color:var(--ink-2); margin:0 0 22px; }

.seller-card{ display:flex; align-items:center; gap:13px; padding:14px 16px; background:var(--paper-warm);
  border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:18px; }
.seller-meta{ flex:1; }
.seller-name{ font-weight:700; font-size:15.5px; display:flex; align-items:center; gap:6px; }
.seller-rate{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); margin-top:2px; }
.verif{ background:var(--gold-grad); color:#2A2008; font-size:10px; font-weight:800; width:16px; height:16px; border-radius:50%; display:inline-grid; place-items:center; }

.pview-cta{ display:grid; grid-template-columns:1fr 1.2fr; gap:12px; margin-bottom:24px; }
.pview-cta .btn{ width:100%; }
.btn.is-added{ background:var(--pos); color:#fff; }

.pview-reviews{ border-top:1px solid var(--line); padding-top:18px; }
.prv-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.prv-head b{ font-size:16px; } .prv-head a{ font-size:13px; color:var(--gold-deep); cursor:pointer; font-weight:600; }
.rev{ padding:12px 0; border-bottom:1px dashed var(--line); }
.rev:last-child{ border-bottom:none; }
.rev-top{ display:flex; align-items:center; gap:9px; font-size:13px; margin-bottom:5px; }
.rev-top b{ font-weight:700; } .rev-top span{ color:var(--muted); margin-inline-start:auto; font-size:12px; }
.rev p{ margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.6; }

/* hero banner */
.hero-banner{ position:relative; height:clamp(300px,40vh,400px); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-2); }
.hb-img{ position:absolute; inset:0; background:url('assets/hero.jpg') center 40%/cover; transform:scale(1.02); }
.hb-shade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(22,15,8,.46) 0%, rgba(20,13,7,.64) 100%); }
.hb-content{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; }
.hb-emblem{ height:clamp(96px,13vw,150px); width:auto; filter:drop-shadow(0 6px 16px rgba(0,0,0,.45)); }
.hb-word{ font-size:clamp(32px,5vw,54px); color:#F6ECD6; margin:8px 0 2px; letter-spacing:.3em; text-shadow:0 2px 16px rgba(0,0,0,.4); }
.hb-tag{ font-size:11px; letter-spacing:.34em; color:var(--gold-soft); text-transform:uppercase; }
.hb-cta{ display:flex; gap:12px; margin-top:22px; }
.hb-cta .btn-ink{ background:rgba(22,16,9,.55); border:1.5px solid rgba(245,236,220,.35); backdrop-filter:blur(5px); color:#F4ECDC; }
.hb-cta .btn-ink:hover{ background:rgba(0,0,0,.6); }

/* shops row (photo cards) */
.shops-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.shopcard{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; text-align:start; transition:.24s var(--ease); }
.shopcard:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--line-2); }
.shopcard-photo{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--cream-2);
  margin:10px 10px 0; border-radius:var(--r-sm); }
.shopcard-photo img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; object-position:center; }
.shopcard-verif{ position:absolute; top:9px; right:9px; background:rgba(255,255,255,.92); color:var(--gold-deep);
  font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:99px; box-shadow:var(--sh-1); }
.shopcard-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px 14px 2px; }
.shopcard-row b{ font-size:16px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sc-rate{ display:flex; align-items:center; gap:3px; font-size:13.5px; font-weight:700; color:var(--ink); flex-shrink:0; }
.sc-rate i{ color:var(--gold-2); font-style:normal; }
.shopcard-sub{ padding:0 14px 13px; font-size:12px; color:var(--muted); }

@media(max-width:880px){
  .pview-grid{ grid-template-columns:1fr; gap:22px; }
  .pview-grid > *{ min-width:0; }            /* allow columns to shrink below content */
  .pview-media{ position:static; }
  .shops-row{ grid-template-columns:repeat(2,1fr); }
  .pview-cta{ grid-template-columns:1fr; }
  .pview-cta .btn{ width:100%; }
}