@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ===================================================================
   STONE ISLAND × VISURA — PRODUCT STUDY (editorial PDP)
   One continuous light-grey composition. Film blends into the page.
   =================================================================== */
:root{
  --paper:#f0f0f0;        /* matches the product film backdrop exactly */
  --ink:#141510;
  --sub:#5d5f57;
  --faint:#8b8d84;
  --line:rgba(20,21,16,.14);
  --line-soft:rgba(20,21,16,.08);
  --olive:#6f713c;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
body{min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono)}

/* ---- Nav ---- */
.shop-nav{position:fixed;z-index:50;inset:0 0 auto 0;height:66px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 32px;background:rgba(240,240,240,.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--line-soft)}
.shop-brand{display:flex;align-items:center;height:100%}
.shop-brand img{width:auto;height:23px;transition:opacity .3s ease}
.shop-brand:hover img{opacity:.7}
.shop-nav nav{display:flex;gap:28px;justify-self:center;font:500 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sub)}
.shop-nav nav a{position:relative;padding-bottom:3px;transition:color .3s ease}
.shop-nav nav a:after{content:"";position:absolute;left:0;right:100%;bottom:0;border-top:1px solid var(--ink);transition:right .35s var(--ease)}
.shop-nav nav a:hover{color:var(--ink)}
.shop-nav nav a:hover:after{right:0}
.shop-bag{justify-self:end;font:500 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;display:inline-flex;gap:8px;transition:transform .2s cubic-bezier(.34,1.56,.64,1);transform-origin:right center}
.shop-bag.is-bump{transform:scale(1.16)}
.shop-bag span{color:var(--olive)}

/* ===================================================================
   1 — PRODUCT VIEW
   =================================================================== */
.pdp-view{position:relative;padding:92px 40px 56px;min-height:100svh;display:flex;flex-direction:column;justify-content:center}

.pdp-grid{display:grid;grid-template-columns:minmax(190px,.82fr) minmax(420px,1.55fr) minmax(280px,1fr);gap:clamp(28px,4vw,64px);align-items:center;flex:1}

/* --- left: technical spec column --- */
.pdp-tech{display:flex;flex-direction:column;gap:24px;align-self:center}
.pdp-tech .code{font:500 10px/1 var(--mono);letter-spacing:.16em;color:var(--sub)}
.pdp-tech dl{margin:0;display:flex;flex-direction:column;gap:20px}
.pdp-tech .row{display:flex;flex-direction:column;gap:6px;padding-top:16px;border-top:1px solid var(--line-soft)}
.pdp-tech dt{font:500 8px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.pdp-tech dd{margin:0;font-size:13px;letter-spacing:-.01em;color:var(--ink)}

/* --- center: film stage --- */
.pdp-stage{position:relative;justify-self:center;width:100%;max-width:min(52vw,640px);aspect-ratio:1/1}
.pdp-film{position:absolute;inset:0;overflow:hidden;background:var(--paper)}
.pdp-film video{width:100%;height:100%;object-fit:cover;display:block;background:var(--paper)}
/* soft contact shadow grounds the product */
.pdp-stage:before{content:"";position:absolute;left:50%;bottom:9%;width:56%;height:34px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(20,21,16,.13),transparent 72%);filter:blur(3px);z-index:1}
/* floor-fade: hides any below-hem film artifact and blends product base into page */
.pdp-film:after{content:"";position:absolute;left:0;right:0;bottom:0;height:20%;background:linear-gradient(to bottom,rgba(240,240,240,0) 0%,rgba(240,240,240,.9) 62%,var(--paper) 100%);pointer-events:none;z-index:2}
.pdp-corner{position:absolute;z-index:3;font:500 8px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.pdp-corner--tl{top:14px;left:16px}
.pdp-corner--tr{top:14px;right:16px;text-align:right}
.pdp-loop{position:absolute;z-index:3;left:16px;bottom:14px;display:flex;align-items:center;gap:8px;font:500 8px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--sub)}
.pdp-loop i{width:6px;height:6px;border-radius:50%;background:var(--olive);animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.pdp-caption{position:absolute;left:0;right:0;bottom:-34px;display:flex;justify-content:space-between;font:500 8px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}

/* --- right: identity + buy --- */
.pdp-buy{align-self:center;display:flex;flex-direction:column}
.pdp-buy .eyebrow{font:500 9px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.pdp-buy h1{font-size:clamp(34px,3vw,50px);line-height:.94;letter-spacing:-.055em;font-weight:700;margin:18px 0 0}
.pdp-buy h1 em{font-style:normal;color:var(--olive)}
.pdp-price{margin:22px 0 0;font-size:22px;letter-spacing:-.02em}
.pdp-buy .desc{margin:16px 0 0;font-size:13px;line-height:1.65;color:var(--sub);max-width:36ch}

.pdp-choice{margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.pdp-choice-head{display:flex;justify-content:space-between;font:500 8px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.pdp-choice-head b{color:var(--ink);font-weight:500}
.swatches,.sizes{display:flex;gap:9px;margin-top:14px}
.swatches button{width:26px;height:26px;border-radius:50%;border:0;background:#171817;box-shadow:inset 0 0 0 4px var(--paper);outline:1px solid var(--line);padding:0}
.swatches button:nth-child(2){background:#4e504c}
.swatches button:nth-child(3){background:#6f713c}
.sizes button{height:40px;min-width:48px;border:1px solid var(--line);background:transparent;font:500 9px var(--mono);letter-spacing:.04em;color:var(--ink)}
.sizes button.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.add-bag{margin-top:30px;height:60px;border:0;background:var(--ink);color:var(--paper);display:flex;justify-content:space-between;align-items:center;padding:0 22px;font:500 9px var(--mono);letter-spacing:.16em;cursor:pointer}
.add-bag b{font-size:20px;font-weight:400}
.add-bag.is-added{background:var(--olive)}
.add-bag.is-added b{transform:rotate(45deg)}
.pdp-buy .microspec{margin-top:20px;display:flex;flex-wrap:wrap;gap:6px 18px;font:500 7px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* ===================================================================
   2 — MATERIAL BREAKDOWN (flows on the same background)
   =================================================================== */
.pdp-material{padding:40px 40px 96px}
.pdp-material .mhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-bottom:30px;border-bottom:1px solid var(--line)}
.pdp-material .mhead h2{font-size:clamp(26px,2.6vw,40px);letter-spacing:-.045em;font-weight:700;margin:0;max-width:16ch}
.pdp-material .mhead span{font:500 9px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);text-align:right;white-space:nowrap}
.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,32px);margin-top:36px}
.detail-card figure{margin:0}
.detail-card .img{aspect-ratio:1/1;overflow:hidden;background:#e8e8e8}
.detail-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.detail-card:hover img{transform:scale(1.04)}
.detail-card figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font:500 8px/1.5 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.detail-card figcaption b{color:var(--ink);font-weight:500}

.spec-table{margin-top:64px;border-top:1px solid var(--ink)}
.spec-table .srow{display:grid;grid-template-columns:minmax(120px,.5fr) 1fr auto;gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line-soft)}
.spec-table dt{font:500 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0}
.spec-table dd{margin:0;font-size:14px;letter-spacing:-.01em}
.spec-table .idx{font:500 8px/1 var(--mono);letter-spacing:.14em;color:var(--faint)}

/* ---- footer ---- */
.pdp-foot{background:#131410;color:#efeeea;padding:56px 40px 64px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.pdp-foot .fmark{font-size:clamp(30px,5vw,64px);letter-spacing:-.05em;font-weight:700;line-height:.86}
.pdp-foot .fmeta{text-align:right;font:500 8px/1.8 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:rgba(239,238,234,.62)}
.pdp-foot a{color:var(--olive)}

.visura-return{position:fixed;z-index:60;left:50%;bottom:14px;transform:translateX(-50%);padding:10px 15px;border-radius:999px;background:rgba(19,20,16,.92);color:#fff;font:500 8px var(--mono);letter-spacing:.08em;backdrop-filter:blur(12px)}

/* ---- interactive states ---- */
.swatches button,.sizes button,.add-bag{cursor:pointer;transition:transform .2s var(--ease),background .22s ease,color .22s ease,outline-color .18s ease,border-color .18s ease,box-shadow .22s ease}
.swatches button:hover{transform:scale(1.12)}
.swatches button.active{outline:2px solid var(--ink);outline-offset:2px}
.sizes button:hover{border-color:var(--ink)}
.add-bag:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(20,21,16,.2)}
.add-bag:active{transform:translateY(0)}
.add-bag b{transition:transform .3s var(--ease)}
:where(.swatches button,.sizes button,.add-bag,.shop-nav a,.detail-card):focus-visible{outline:2px solid var(--olive);outline-offset:3px}

/* ===================================================================
   Responsive
   =================================================================== */
@media(max-width:1080px){
  .pdp-grid{grid-template-columns:1fr 1fr;grid-template-areas:"stage stage" "tech buy";gap:40px}
  .pdp-stage{grid-area:stage;max-width:min(74vw,560px);margin:0 auto}
  .pdp-tech{grid-area:tech}
  .pdp-buy{grid-area:buy}
}
@media(max-width:720px){
  .shop-nav{height:58px;padding:0 18px;grid-template-columns:1fr auto}
  .shop-nav nav{display:none}
  .pdp-view{padding:92px 18px 56px}
  .pdp-grid{grid-template-columns:1fr;grid-template-areas:"stage" "buy" "tech";gap:44px;padding-top:34px}
  .pdp-stage{max-width:min(92vw,460px)}
  .pdp-caption{position:static;margin-top:16px}
  .pdp-buy h1{font-size:clamp(32px,10vw,46px)}
  .pdp-buy .desc{max-width:none}
  .pdp-material{padding:20px 18px 80px}
  .pdp-material .mhead{flex-direction:column;align-items:flex-start;gap:14px}
  .pdp-material .mhead span{text-align:left}
  .detail-grid{grid-template-columns:1fr;gap:26px}
  .detail-card .img{aspect-ratio:4/3}
  .spec-table{margin-top:44px}
  .spec-table .srow{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .spec-table .idx{display:none}
  .pdp-foot{flex-direction:column;align-items:flex-start;gap:24px;padding:44px 18px 56px}
  .pdp-foot .fmeta{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  .pdp-loop i{animation:none}
  .detail-card img,.swatches button,.sizes button,.add-bag,.shop-bag{transition:none}
}