/* ===========================================================
   Lagoon of Randomness™ — Product showcase (/shop/product/)
   One full-screen stage per product: vertical category word,
   numbered image rail, center-stage product, buy panel and a
   "Next item" control that cycles through the same category.
   The stage is always dark (Brand Black with a Yellow light),
   in both site themes. Motion lives in shop-app.js (Web
   Animations); idle motion is CSS and stops for reduced motion.
   =========================================================== */
.sc{
  --ink:#f3f3ef;--soft:#d6d6d1;--mute:#9c9c96;--line:rgba(255,255,255,.14);--line2:rgba(255,255,255,.24);
  --y:#ffd400;--yd:#f5c400;--b:#28a8e0;--bl:#6cc5f2;--panel:#141414;
  position:relative;isolation:isolate;overflow:hidden;color:var(--ink);background:#0a0a0a;
  min-height:clamp(700px,calc(100svh - var(--sc-top,78px)),980px);
  display:flex;flex-direction:column;
}
/* ---- background: black first, yellow light second ---- */
.sc-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(70% 60% at 58% 52%,rgba(255,212,0,.16),rgba(255,212,0,.05) 38%,transparent 66%),
    radial-gradient(55% 45% at 0% 0%,rgba(255,212,0,.13),transparent 60%),
    radial-gradient(40% 40% at 100% 100%,rgba(255,212,0,.08),transparent 70%),
    linear-gradient(165deg,#15120a 0%,#0a0a0a 34%,#0a0a0a 72%,#100e06 100%)}
.sc-bg::before{content:"";position:absolute;left:-20%;top:-60%;width:70%;height:180%;transform:rotate(28deg);
  background:linear-gradient(90deg,transparent,rgba(255,212,0,.07) 45%,rgba(255,212,0,.11) 50%,rgba(255,212,0,.07) 55%,transparent);filter:blur(30px)}
.sc-bg::after{content:"";position:absolute;inset:0;opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.2px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(60% 60% at 55% 50%,#000,transparent 80%);mask-image:radial-gradient(60% 60% at 55% 50%,#000,transparent 80%)}
.sc-ghost{position:absolute;left:50%;top:50%;transform:translate(-42%,-50%);font-weight:900;font-size:min(34vw,560px);line-height:.8;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:2px rgba(255,212,0,.08);white-space:nowrap;user-select:none}

/* ---- layout ---- */
.sc-inner{flex:1;width:97%;max-width:1720px;margin:0 auto;display:grid;position:relative;
  grid-template-columns:70px clamp(70px,6.6vw,140px) minmax(220px,270px) minmax(0,1fr) minmax(280px,310px);
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"crumb crumb crumb crumb crumb" "rail word copy hero panel" "social social . hero foot";
  column-gap:clamp(12px,1.6vw,30px);padding:14px 0 26px}
.sc .breadcrumb{grid-area:crumb;width:auto;margin:0 0 6px;font-size:.78rem;color:var(--mute);letter-spacing:.02em;padding:0;background:none;border:0}
.sc .breadcrumb a{color:var(--mute);text-decoration:none}.sc .breadcrumb a:hover{color:var(--ink)}
.sc .breadcrumb span{color:var(--soft)}

/* ---- left rail: numbered images ---- */
.sc-rail{grid-area:rail;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:14px;min-height:0;overflow:hidden}
.sc-thumbs{list-style:none;margin:0;padding:4px 2px;display:flex;flex-direction:column;gap:10px;overflow:auto;scrollbar-width:none;flex:0 1 auto;min-height:0}
.sc-thumbs::-webkit-scrollbar{display:none}
.sc-thumbs li{display:grid;gap:5px}
.sc-thumbs .n{font-size:.68rem;font-weight:800;letter-spacing:.08em;color:var(--mute)}
.sc-thumb{width:64px;height:64px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);padding:4px;overflow:hidden;cursor:pointer;display:grid;place-items:center;transition:border-color .2s,transform .2s,box-shadow .2s}
.sc-thumb img{width:100%;height:100%;object-fit:contain;border-radius:10px}
.sc-thumb:hover{border-color:var(--line2);transform:translateY(-2px)}
.sc-thumb[aria-current="true"]{border:1.5px solid var(--y);box-shadow:0 0 0 4px rgba(255,212,0,.12),0 10px 26px -12px rgba(255,212,0,.6)}
.sc-thumbs li:has([aria-current="true"]) .n{color:var(--y)}
.sc-motto{flex:none;margin:6px 0 0;font-size:.66rem;font-weight:800;letter-spacing:.18em;line-height:1.75;text-transform:uppercase;color:var(--mute)}
.sc-motto::after{content:"";display:block;width:38px;height:1px;background:var(--line2);margin-top:12px}
.sc-social{grid-area:social;align-self:end;display:flex;gap:10px}
.sc-social a{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;color:var(--soft);background:rgba(255,255,255,.06);border:1px solid var(--line);transition:color .2s,border-color .2s,background .2s}
.sc-social a:hover{color:#0a0a0a;background:var(--y);border-color:var(--y)}
.sc-social svg{width:17px;height:17px}

/* ---- the big vertical category word ---- */
.sc-word{grid-area:word;align-self:center;justify-self:center;margin:0;writing-mode:vertical-rl;white-space:nowrap;
  font-weight:900;line-height:.8;letter-spacing:-.02em;text-transform:uppercase;color:#fff;font-size:120px;user-select:none;
  text-shadow:0 18px 50px rgba(0,0,0,.45)}
.sc-word span{display:inline-block}

/* ---- copy ---- */
.sc-copy{grid-area:copy;align-self:center;position:relative;z-index:3;padding-bottom:4vh}
.sc-eyebrow{margin:0 0 18px;font-size:.7rem;font-weight:900;letter-spacing:.42em;text-transform:uppercase;color:var(--bl)}
.sc-title{margin:0;font-size:clamp(2.3rem,3.5vw,3.7rem);font-weight:900;line-height:.95;letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.sc-title mark{background:linear-gradient(transparent 62%,var(--y) 62%,var(--y) 90%,transparent 90%);color:inherit;padding:0 .04em}
.sc-tag{margin:14px 0 0;font-size:1rem;font-weight:700;color:var(--soft)}
.sc-pitch{margin:14px 0 0;font-size:.95rem;line-height:1.65;color:#b7b7b1;max-width:34ch;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.sc-look{margin-top:26px;display:inline-flex;align-items:center;gap:14px;background:none;border:0;color:var(--ink);cursor:pointer;padding:0;font:inherit;text-align:left}
.sc-look .ring{width:58px;height:58px;border-radius:999px;display:grid;place-items:center;border:1.5px solid var(--y);background:rgba(255,212,0,.08);position:relative}
.sc-look .ring::after{content:"";position:absolute;inset:-7px;border-radius:999px;border:1px solid rgba(255,212,0,.35);animation:scRing 2.6s ease-out infinite}
.sc-look svg{width:18px;height:18px;color:var(--y);margin-left:3px}
.sc-look b{font-size:.78rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;line-height:1.35}

/* ---- center stage ---- */
.sc-hero{grid-area:hero;position:relative;z-index:1;margin:0;display:grid;place-items:center;min-height:0;min-width:0;overflow:visible}
.sc-hero::before{content:"";position:absolute;left:50%;top:50%;width:min(78%,720px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,212,0,.55) 0%,rgba(255,212,0,.2) 40%,transparent 68%);filter:blur(22px);animation:scGlow 4.8s ease-in-out infinite}
.sc-hero::after{content:"";position:absolute;left:50%;bottom:-8px;width:52%;height:34px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);filter:blur(6px)}
/* The product fills its own column — clear of the description on the left and the buy panel on the right — and keeps
   its aspect ratio (never cropped or stretched). It stands on the bottom of the stage, so a Printful lifestyle mockup
   whose model is cut off at the bottom of its square looks like it continues below the frame; a soft fade hides the cut. */
.sc-stagebox{position:absolute;z-index:1;inset:0 var(--sc-gap) -26px;display:grid;place-items:center;pointer-events:none}
.sc{--sc-gap:clamp(14px,1.5vw,30px)}
.sc-img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:50% 50%;background:none;
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 8%);mask-image:linear-gradient(to top,transparent 0,#000 8%);
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.55)) drop-shadow(0 0 1.5px rgba(255,212,0,.3));
  animation:scBreathe 5.2s ease-in-out infinite;will-change:transform;transform-origin:50% 100%}
.sc-img.framed{position:relative;inset:auto;width:auto;height:auto;max-width:100%;max-height:92%;align-self:end;border-radius:28px;-webkit-mask-image:none;mask-image:none;filter:drop-shadow(0 40px 60px rgba(0,0,0,.6))}
.sc-hnav{display:none}

/* ---- buy panel ---- */
.sc-panel{grid-area:panel;align-self:center;position:relative;z-index:3;display:grid;gap:14px;padding-top:6px;min-height:0}
.sc-badge{justify-self:start;font-size:.68rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--y);border:1px solid rgba(255,212,0,.7);border-radius:999px;padding:6px 13px;background:rgba(255,212,0,.06)}
.sc-price{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.sc-price b{font-size:clamp(2.2rem,2.8vw,2.8rem);font-weight:800;letter-spacing:-.03em;line-height:1}
.sc-price small{font-size:.74rem;color:var(--mute);text-align:right;line-height:1.35}
.sc-lbl{font-size:.76rem;color:var(--mute);margin:0 0 8px}.sc-lbl b{color:var(--ink);font-weight:700}
.sc-swatches{display:flex;flex-wrap:wrap;gap:12px}
.sc-sw{width:32px;height:32px;border-radius:999px;border:2px solid rgba(255,255,255,.2);cursor:pointer;padding:0;background-size:cover;background-position:center;transition:transform .15s,box-shadow .2s}
.sc-sw:hover{transform:scale(1.08)}
.sc-sw[aria-pressed="true"]{box-shadow:0 0 0 3px #0a0a0a,0 0 0 5px var(--y)}
.sc-sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:7px}
.sc-size{height:38px;border-radius:12px;border:1px solid var(--line2);background:transparent;color:var(--soft);font-weight:700;font-size:.8rem;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.sc-size:hover{border-color:rgba(255,255,255,.5);color:#fff}
.sc-size[aria-pressed="true"]{border-color:var(--y);background:rgba(255,212,0,.1);color:#fff}
.sc-size:disabled{opacity:.28;text-decoration:line-through;cursor:not-allowed}
.sc-buy{display:flex;gap:12px;align-items:center}
.sc-add{flex:1;min-height:58px;border-radius:999px;border:0;background:var(--y);color:#0a0a0a;font-weight:800;font-size:.95rem;display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;
  box-shadow:0 14px 34px -14px rgba(255,212,0,.7);transition:background .15s,transform .15s,box-shadow .2s}
.sc-add:hover{background:var(--yd);transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(255,212,0,.85)}
.sc-add:disabled{opacity:.5;cursor:not-allowed;transform:none}
.sc-add svg{width:19px;height:19px}
.sc-quick{width:58px;height:58px;flex:none;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,color .2s,box-shadow .2s}
.sc-quick:hover{border-color:var(--y);color:var(--y);box-shadow:0 0 24px -6px rgba(255,212,0,.6)}
.sc-quick svg{width:20px;height:20px}
.sc-feats{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sc-feats li{display:grid;gap:7px;font-size:.74rem;line-height:1.3;color:var(--mute)}
.sc-feats svg{width:24px;height:24px;color:#c9c9c3;stroke-width:1.5}
.sc-feats li.glow svg{color:var(--y);animation:scIcon 3.2s ease-in-out infinite}
.sc-feats li.glow{color:var(--soft)}
.sc-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.sc-card{position:relative;display:block;border-radius:18px;overflow:hidden;background:rgba(255,255,255,.05);border:1px solid var(--line);aspect-ratio:1.2/1;text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s}
.sc-card:hover{border-color:rgba(255,212,0,.6);transform:translateY(-3px)}
.sc-card img{position:absolute;inset:8px 8px 30px;width:calc(100% - 16px);height:calc(100% - 38px);object-fit:contain}
.sc-card small{position:absolute;left:10px;right:10px;bottom:8px;font-size:.68rem;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-card .go{position:absolute;right:10px;bottom:30px;width:34px;height:34px;border-radius:999px;background:#fff;color:#0a0a0a;display:grid;place-items:center;box-shadow:0 8px 20px -6px rgba(0,0,0,.6)}
.sc-card .go svg{width:15px;height:15px}

/* ---- next item ---- */
.sc-foot{grid-area:foot;align-self:end;display:flex;align-items:center;gap:14px;font-size:.8rem;color:var(--soft);padding-top:14px}
.sc-foot>span:first-child{white-space:nowrap}
.sc-line{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden;min-width:40px}
.sc-line i{display:block;height:100%;background:var(--y);width:0;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.sc-count{font-variant-numeric:tabular-nums;color:var(--mute);white-space:nowrap}.sc-count b{color:#fff}
.sc-arrows{display:flex;gap:8px}
.sc-arrow{width:46px;height:46px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,color .2s,box-shadow .2s,transform .15s}
.sc-arrow:hover{border-color:var(--y);color:var(--y);box-shadow:0 0 22px -6px rgba(255,212,0,.6)}
.sc-arrow:active{transform:scale(.94)}
.sc-arrow svg{width:17px;height:17px}
.sc-arrow:disabled{opacity:.3;cursor:default;box-shadow:none;border-color:var(--line)}

/* ---- focus ---- */
.sc :focus-visible{outline:2px solid var(--y);outline-offset:3px}

/* ---- details under the stage ---- */
.sc-details{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,3rem);align-items:start}
.sc-details .s2-trust{margin-top:0}

/* ---- lookbook overlay ---- */
.sc-modal{position:fixed;inset:0;z-index:200;background:rgba(5,5,5,.88);display:grid;place-items:center;padding:4vw;backdrop-filter:blur(8px)}
.sc-modal .box{position:relative;width:min(1100px,100%);aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,212,0,.3),0 40px 120px -20px rgba(255,212,0,.25)}
.sc-modal video,.sc-modal iframe{width:100%;height:100%;border:0;display:block}
.sc-modal .x{position:absolute;top:-56px;right:0;width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-size:20px;cursor:pointer}

/* ---- idle motion ---- */
@keyframes scBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}
@keyframes scGlow{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
@keyframes scIcon{0%,100%{filter:drop-shadow(0 0 0 rgba(255,212,0,0))}50%{filter:drop-shadow(0 0 7px rgba(255,212,0,.85))}}
@keyframes scRing{0%{opacity:.9;transform:scale(.9)}100%{opacity:0;transform:scale(1.35)}}

/* ---- desktop: the stage is exactly one screen tall ---- */
/* ---- large screens: shop-app.js scales the whole stage (CSS zoom, --sc-z) from a 1600×860 design so text, buttons and
   the product grow together; the product column takes every extra pixel of width ---- */
@media (min-width:1700px){ .sc-inner{max-width:2600px} }
@media (min-width:1061px){
  .sc{height:max(640px,calc(100svh - var(--sc-top,78px)));min-height:0}
  .sc-inner{min-height:0}
  .sc-foot{padding-right:104px} /* room for the Milo chat button */
}
@media (min-width:1061px) and (max-height:860px){
  .sc-thumb{width:52px;height:52px;border-radius:12px}
  .sc-thumbs{gap:6px}.sc-thumbs .n{font-size:.6rem}
  .sc-pitch{-webkit-line-clamp:3}
  .sc-eyebrow{margin-bottom:12px}
  .sc-panel{gap:10px}
  .sc-price b{font-size:2.1rem}
  .sc-add,.sc-quick{min-height:50px;height:50px}.sc-quick{width:50px}
  .sc-cards{grid-template-columns:1fr 1fr}.sc-card{aspect-ratio:1.5/1}
  .sc-feats li{font-size:.7rem}
}
@media (min-width:1061px) and (max-height:720px){
  .sc-cards,.sc-motto{display:none}
}
/* ---- medium screens ---- */
@media (max-width:1360px){
  .sc-inner{grid-template-columns:62px clamp(62px,6vw,110px) minmax(200px,235px) minmax(0,1fr) minmax(262px,284px);column-gap:14px}
  .sc-thumb{width:56px;height:56px}
  .sc-title{font-size:clamp(2rem,3vw,2.9rem)}
}
/* ---- tablets & phones: one column ---- */
@media (max-width:1060px){
  .sc{min-height:0}
  .sc-inner{grid-template-columns:minmax(0,1fr);grid-template-rows:none;
    grid-template-areas:"crumb" "word" "hero" "rail" "copy" "panel" "foot";row-gap:18px;padding:12px 0 28px;width:min(92vw,680px)}
  .sc-word{writing-mode:horizontal-tb;justify-self:start;font-size:22vw;line-height:.82;margin-bottom:-14vw;opacity:.95;z-index:0}
  .sc-hero{margin:0;min-height:min(100vw,620px);z-index:1}
  .sc-stagebox{inset:0}
  .sc-hnav{display:flex;position:absolute;inset:auto 0 50% 0;justify-content:space-between;pointer-events:none;z-index:2}
  .sc-hnav .sc-arrow{pointer-events:auto;background:rgba(10,10,10,.55);backdrop-filter:blur(6px);width:42px;height:42px}
  .sc-rail{align-self:auto}
  .sc-thumbs{flex-direction:row;max-height:none;overflow-x:auto;gap:10px}
  .sc-thumbs li{flex:none}
  .sc-motto,.sc-social{display:none}
  .sc-copy{padding:0}
  .sc-pitch{max-width:none;-webkit-line-clamp:6}
  .sc-panel{padding:0}
  .sc-details{grid-template-columns:1fr}
}
@media (max-width:420px){
  .sc-feats{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .sc-buy{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .sc-img,.sc-hero::before,.sc-feats li.glow svg,.sc-look .ring::after{animation:none!important}
}