:root{--bg:#FFFFFF;--ink:#111111;--mut:#8A8A8A;--line:#EDEDED;}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{background:var(--bg);color:var(--ink);
  font-family:"Archivo",-apple-system,Helvetica,Arial,sans-serif;
  font-size:13px;line-height:1.4;overflow-x:hidden;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);}
a{color:inherit;text-decoration:none;}
img{display:block;}
.lbl{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);}

/* header --------------------------------------------------------- */
header{position:relative;padding:22px 14px 24px;text-align:center;}
header .b{display:inline-block;font-size:13px;letter-spacing:.40em;
  text-transform:uppercase;font-weight:600;}
header .bag{position:absolute;right:14px;top:22px;font-size:10px;
  letter-spacing:.20em;text-transform:uppercase;color:var(--mut);}
header .back{position:absolute;left:14px;top:22px;font-size:10px;
  letter-spacing:.20em;text-transform:uppercase;color:var(--mut);}
header .bag:hover,header .back:hover{color:var(--ink);}

/* grid ----------------------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);row-gap:30px;padding:0 10px 50px;}
@media(min-width:520px){.grid{grid-template-columns:repeat(3,1fr);row-gap:32px;padding:0 14px 60px;}}
@media(min-width:820px){.grid{grid-template-columns:repeat(4,1fr);}}
@media(min-width:1180px){.grid{grid-template-columns:repeat(6,1fr);padding:0 18px 70px;}}
.p{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;
  min-height:44px;content-visibility:auto;contain-intrinsic-size:auto 260px;}
.ph{display:flex;align-items:center;justify-content:center;width:100%;
  aspect-ratio:1/1;overflow:hidden;}
.ph img{max-width:100%;max-height:100%;width:auto;height:auto;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);}
@media(hover:hover){.p:hover .ph img{transform:scale(1.05);}}
.p:focus-visible .ph img{transform:scale(1.05);}
.no{font-size:10px;letter-spacing:.16em;color:var(--mut);font-variant-numeric:tabular-nums;}
.n{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pr{font-size:11px;letter-spacing:.06em;color:var(--mut);font-variant-numeric:tabular-nums;}

/* product -------------------------------------------------------- */
.prod{display:grid;grid-template-columns:1fr;gap:22px;padding:0 14px 70px;}
@media(min-width:900px){.prod{grid-template-columns:1.35fr 1fr;gap:44px;
  max-width:1240px;margin:0 auto;padding:0 20px 90px;align-items:start;}}
.stage{width:100%;aspect-ratio:1/1;overflow:hidden;cursor:zoom-in;
  display:flex;align-items:center;justify-content:center;}
.stage img{max-width:100%;max-height:100%;width:auto;height:auto;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.stage.zoom{cursor:zoom-out;}
.stage.zoom img{transform:scale(2);}
.thumbs{display:flex;gap:6px;overflow-x:auto;padding:10px 0 2px;scrollbar-width:thin;}
.thumbs button{flex:0 0 58px;height:58px;border:1px solid transparent;background:none;
  padding:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.thumbs button[aria-current="true"]{border-color:var(--ink);}
.thumbs img{max-width:100%;max-height:100%;width:auto;height:auto;}
.info{display:flex;flex-direction:column;gap:14px;}
@media(min-width:900px){.info{position:sticky;top:20px;}}
.info h1{font-size:14px;letter-spacing:.10em;text-transform:uppercase;font-weight:600;
  line-height:1.5;text-wrap:balance;}
.price{font-size:14px;letter-spacing:.06em;font-variant-numeric:tabular-nums;}
.opts{display:flex;flex-wrap:wrap;gap:6px;}
.opts button{font:inherit;font-size:10px;letter-spacing:.10em;text-transform:uppercase;
  padding:8px 11px;min-height:34px;border:1px solid var(--line);background:none;
  color:var(--ink);cursor:pointer;}
.opts button[aria-pressed="true"]{border-color:var(--ink);}
.add{font:inherit;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  padding:16px;width:100%;border:none;background:var(--ink);color:#fff;cursor:pointer;}
.add:disabled{background:var(--mut);cursor:not-allowed;}
.desc{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);
  padding-top:16px;}
.desc li{font-size:12px;line-height:1.6;color:#333;list-style:none;}
.oos{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#B00;}

/* cart ----------------------------------------------------------- */
.cart{max-width:720px;margin:0 auto;padding:0 14px 80px;}
.row{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--line);}
.row img{width:64px;height:64px;object-fit:contain;}
.row .t{font-size:11px;letter-spacing:.08em;text-transform:uppercase;}
.row .v{font-size:10px;color:var(--mut);letter-spacing:.06em;margin-top:3px;}
.qty{display:flex;align-items:center;gap:10px;margin-top:6px;}
.qty button{font:inherit;width:26px;height:26px;border:1px solid var(--line);
  background:none;cursor:pointer;color:var(--ink);}
.tot{display:flex;justify-content:space-between;padding:22px 0;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;}
.empty{padding:60px 0;text-align:center;}
.err{padding:12px;border:1px solid #B00;color:#B00;font-size:11px;
  letter-spacing:.06em;margin-bottom:14px;display:none;}

/* zoom-in transition ---------------------------------------------
   Tapping a tile scales that one photo up and fades the rest away, then the
   product page fades its hero in from the same scale. Two short keyframes,
   ~320ms, so it reads as one continuous move into the product. */
@keyframes tileGo{to{transform:scale(1.9);opacity:.15;}}
@keyframes pageOut{to{opacity:0;}}
@keyframes heroIn{from{transform:scale(1.14);opacity:0;}to{transform:scale(1);opacity:1;}}
.p.going .ph img{animation:tileGo .34s cubic-bezier(.4,0,.2,1) forwards;}
body.leaving .grid > *:not(.going),
body.leaving header,body.leaving footer{animation:pageOut .28s ease forwards;}
.stage img{animation:heroIn .42s cubic-bezier(.2,.7,.2,1) both;}

/* details ---------------------------------------------------------- */
.ship{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);
  text-align:center;padding-top:2px;}
.details{border-top:1px solid var(--line);padding-top:14px;}
.details summary{font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  cursor:pointer;list-style:none;padding:6px 0;color:var(--mut);}
.details summary::-webkit-details-marker{display:none;}
.details summary::after{content:" +";}
.details[open] summary::after{content:" ‘2";}
.details summary:hover{color:var(--ink);}
.details__in{padding-top:10px;display:flex;flex-direction:column;gap:10px;}
.full{font-size:11px;line-height:1.6;color:var(--mut);}

footer{padding:24px 14px calc(50px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);text-align:center;}
footer span{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--mut);}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px;}
@media(prefers-reduced-motion:reduce){*{transition:none!important;}}