:root{
  --bg:#020712;
  --bg-2:#06101d;
  --panel:#091423;
  --panel-2:#0d1c30;
  --line:rgba(122,155,202,.16);
  --line-strong:rgba(122,155,202,.34);
  --text:#dce8f7;
  --muted:#788ba7;
  --soft:#93add4;
  --accent:#5278b2;
  --accent-2:#9fbbe7;
  --danger:#e16262;
  --gold:#c7a768;
  --shadow:0 30px 80px -45px rgba(0,0,0,.85);
  --max:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  background:
    linear-gradient(180deg,rgba(2,7,18,.96),rgba(2,7,18,.9) 48%,#030915),
    radial-gradient(900px 520px at 70% 0,rgba(66,94,141,.22),transparent 62%),
    var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
  overflow-x:hidden;
}
body.modal-open{overflow:hidden}
body.nav-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.loader{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  gap:1rem;
  align-content:center;
  background:#020712;
  overflow:hidden;
  transition:opacity .8s ease,visibility .8s ease,transform .8s cubic-bezier(.16,1,.3,1);
}
.loader::before,
.loader::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.loader::before{
  background:
    linear-gradient(90deg,rgba(2,7,18,.82),rgba(2,7,18,.42),rgba(2,7,18,.8)),
    url("assets/hero-reference-tshirt-black.png") center/cover;
  filter:saturate(1) contrast(1.16) brightness(.8);
  animation:loaderPhoto 4.2s cubic-bezier(.16,1,.3,1) both;
}
.loader::after{
  background:
    repeating-linear-gradient(90deg,rgba(159,187,231,.08) 0 1px,transparent 1px 19vw),
    repeating-linear-gradient(180deg,rgba(159,187,231,.06) 0 1px,transparent 1px 18vh),
    radial-gradient(circle at 50% 50%,transparent 0 36%,rgba(2,7,18,.78) 80%);
  opacity:.45;
}
.loader-title{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.32em;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(2.4rem,8vw,5.8rem);
  max-width:calc(100vw - 2rem);
  text-align:center;
  color:var(--text);
}
.loader-title i,
.loader p i{
  display:inline-block;
  font-style:normal;
  opacity:0;
  transform:translateY(14px);
  filter:blur(6px);
  animation:loaderWord 1.35s cubic-bezier(.16,1,.3,1) forwards;
}
.loader-title i{
  letter-spacing:.22em;
  padding-left:.22em;
}
.loader-title i:nth-child(1){animation-delay:.35s}
.loader-title i:nth-child(2){animation-delay:1.05s}
.loader p{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.75em;
  color:var(--soft);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.62rem;
  font-weight:800;
}
.loader p i:nth-child(1){animation-delay:1.7s}
.loader p i:nth-child(2){animation-delay:2.05s}
.loader p i:nth-child(3){animation-delay:2.4s}
.loader p i:nth-child(4){animation-delay:2.75s}
.loader.is-hidden{opacity:0;visibility:hidden;transform:scale(1.025)}
.loader-bar{
  position:relative;
  z-index:1;
  width:min(620px,72vw);
  height:2px;
  overflow:hidden;
  border:0;
  background:rgba(159,187,231,.18);
}
.loader-bar i{
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,var(--text) 18%,var(--accent-2) 50%,transparent);
  transform:translateX(-100%);
  animation:loaderBar 4.6s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes loaderPhoto{
  from{transform:scale(1.015);filter:saturate(.86) contrast(1.08) brightness(.64)}
  to{transform:scale(1);filter:saturate(1) contrast(1.16) brightness(.8)}
}
@keyframes loaderWord{
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes loaderBar{
  0%{transform:translateX(-100%)}
  72%{transform:translateX(-8%)}
  100%{transform:translateX(0)}
}

.nav{
  position:sticky;
  top:0;
  z-index:40;
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(1.2rem,4vw,3rem);
  background:rgba(2,7,18,.82);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
}
.nav::before{
  content:"";
  position:fixed;
  inset:76px 0 0;
  z-index:0;
  pointer-events:none;
  background:rgba(2,7,18,.7);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s;
}
body.nav-open .nav::before{opacity:1;pointer-events:auto}
.brand{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:.8rem;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(1.15rem,3vw,1.8rem);
  font-weight:700;
  letter-spacing:.32em;
  white-space:nowrap;
}
.brand img{
  width:44px;
  height:44px;
  object-fit:cover;
  border-radius:50%;
  border:1px solid rgba(159,187,231,.28);
}
.nav-actions{display:flex;align-items:center;gap:.7rem;color:var(--accent-2);margin-left:auto}
.bag,.menu-button{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid transparent;
  background:transparent;
  color:var(--accent-2);
  cursor:pointer;
}
.bag:hover,.menu-button:hover{border-color:var(--line-strong)}
.nav-panel{
  position:absolute;
  top:76px;
  right:clamp(1rem,4vw,3rem);
  width:min(310px,calc(100vw - 2rem));
  display:flex;
  flex-direction:column;
  padding:.65rem;
  background:rgba(6,16,29,.96);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .28s,visibility .28s,transform .28s;
}
.nav-panel.open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.nav-panel a{
  padding:1rem;
  color:var(--soft);
  border-bottom:1px solid var(--line);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.78rem;
  font-weight:700;
}
.nav-panel a:last-child{border-bottom:0}
.nav-panel a:hover,.nav-ig{color:var(--text)}

.hero{
  min-height:calc(100svh - 76px);
  display:flex;
  align-items:center;
  padding:clamp(4rem,8vw,7rem) clamp(1.2rem,5vw,4rem) 5.5rem;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background:url("assets/hero-reference-tshirt-black.png") center/cover;
  filter:saturate(.96) contrast(1.14) brightness(.84);
  transform:scale(1.005);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    repeating-linear-gradient(90deg,rgba(159,187,231,.09) 0 1px,transparent 1px 25%),
    repeating-linear-gradient(180deg,rgba(159,187,231,.06) 0 1px,transparent 1px 25%),
    linear-gradient(90deg,rgba(2,7,18,.8),rgba(2,7,18,.4) 46%,rgba(2,7,18,.66)),
    linear-gradient(180deg,rgba(2,7,18,.12),rgba(2,7,18,.5) 78%,#020712);
  pointer-events:none;
}
.hero-copy{position:relative;z-index:2;max-width:780px;min-width:0}
.letter-animate{display:inline-block}
.letter-animate h1,
h1.letter-animate,
p.letter-animate{display:block}
.letter-animate .letter{
  display:inline-block;
  opacity:0;
  transform:translateX(-36px);
  filter:blur(5px);
  animation:heroLetter 1.15s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:var(--letter-delay);
}
.letter-animate .letter-space{
  display:inline-block;
  width:.32em;
}
.kicker{
  display:inline-block;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.34em;
  font-size:.72rem;
  font-weight:800;
}
h1,h2,h3{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:600;
  letter-spacing:.12em;
  line-height:.94;
}
h1{
  margin:.8rem 0 1rem;
  font-size:clamp(2rem,9vw,8.6rem);
  letter-spacing:.02em;
  text-transform:uppercase;
}
h2{font-size:clamp(2.5rem,6vw,5rem);text-transform:uppercase}
.hero-copy p{
  max-width:600px;
  color:var(--soft);
  font-size:clamp(1rem,1.6vw,1.2rem);
  line-height:1.8;
  font-family:"Courier New",monospace;
  opacity:.82;
}
.hero-links{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.btn{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:.82rem 1.15rem;
  border:1px solid var(--line-strong);
  border-radius:2px;
  cursor:pointer;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:.72rem;
  box-shadow:0 18px 46px -36px rgba(159,187,231,.9);
  transition:background .24s,border-color .24s,transform .24s,color .24s,box-shadow .24s;
}
.btn::before{
  content:"";
  position:absolute;
  inset:-30% -90%;
  z-index:-1;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.36) 48%,transparent 62%);
  transform:translateX(-48%);
  opacity:0;
  transition:transform .75s cubic-bezier(.16,1,.3,1),opacity .24s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 24px 58px -34px rgba(159,187,231,1)}
.btn:hover::before{opacity:.52;transform:translateX(48%)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}
.btn.primary{background:var(--text);border-color:var(--text);color:#06101d}
.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.ghost{background:rgba(82,120,178,.08);color:var(--text)}
.btn.ghost:hover{border-color:var(--accent-2)}

.hero-scroll{
  position:absolute;
  left:clamp(1.2rem,5vw,4rem);
  bottom:5.1rem;
  z-index:2;
  display:flex;
  align-items:center;
  gap:1rem;
  color:var(--accent-2);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.72rem;
  font-weight:800;
}
.hero-scroll::before{
  content:"";
  width:72px;
  height:1px;
  background:var(--accent-2);
  opacity:.72;
}
.hero-scroll svg{
  width:18px;
  height:18px;
  animation:scrollCue 1.6s ease-in-out infinite;
}
@keyframes scrollCue{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(6px)}
}
@keyframes heroLetter{
  to{opacity:1;transform:none;filter:blur(0)}
}
.hero-strip{
  position:absolute;
  left:clamp(1.2rem,5vw,4rem);
  right:clamp(1.2rem,5vw,4rem);
  bottom:1.2rem;
  z-index:2;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.68rem;
  border-top:1px solid var(--line);
  padding-top:1rem;
}

.container{max-width:var(--max);margin:0 auto;padding:0 1.2rem}
section{padding:5rem 0}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .65s,transform .65s}
.reveal.is-visible{opacity:1;transform:none}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1.6rem}

.categories{max-width:960px;margin:0 auto;padding:3.5rem 1.2rem}
.categories,
#drops,
#reviews,
.order-band{
  position:relative;
  isolation:isolate;
}
.categories::before,
#drops::before,
#reviews::before,
.order-band::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-size:cover;
  background-position:center;
  opacity:.44;
  filter:saturate(.98) contrast(1.12) brightness(.98);
}
.categories::after,
#drops::after,
#reviews::after,
.order-band::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,rgba(2,7,18,.9),rgba(2,7,18,.48) 58%,rgba(2,7,18,.76)),
    linear-gradient(180deg,rgba(2,7,18,.66),rgba(2,7,18,.14) 42%,rgba(2,7,18,.76));
  pointer-events:none;
}
.categories::before{background-image:url("assets/category-bg-shorts.png")}
#drops::before{background-image:url("assets/category-bg-clothing-fixed.png")}
#reviews::before{background-image:url("assets/category-bg-accessories.png")}
.order-band::before{background-image:url("assets/category-bg-shoes.png")}
.categories[hidden],#drops[hidden],.catalog-section[hidden]{display:none}
.category-section-head{margin-bottom:1rem}
.category-section-head p{margin-top:.65rem;color:var(--soft);line-height:1.6}
#categoryList{display:grid;gap:.75rem}
.category-block{
  --tilt-x:0deg;
  --tilt-y:0deg;
  --photo-x:0px;
  --photo-y:0px;
  --glow-x:50%;
  --glow-y:48%;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:#020712;
  transform:perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style:preserve-3d;
  will-change:transform;
  transition:background .72s cubic-bezier(.16,1,.3,1),border-color .72s cubic-bezier(.16,1,.3,1),box-shadow .72s cubic-bezier(.16,1,.3,1),transform .28s ease-out;
}
.category-block.is-pressing{
  transform:perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(.988);
}
.category-block:focus-within{
  border-color:var(--accent-2);
  box-shadow:0 34px 90px -60px rgba(159,187,231,.95);
}
.category-block::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:var(--category-image);
  background-size:cover;
  background-position:center;
  opacity:.5;
  filter:saturate(.82) contrast(1.1) brightness(.68);
  transform:scale(1.04) translate3d(var(--photo-x),var(--photo-y),0);
  transition:opacity .72s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.category-block:hover::before,
.category-block.active::before{
  opacity:.62;
  transform:scale(1.08) translate3d(var(--photo-x),var(--photo-y),0);
}
.category-block::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(560px circle at var(--glow-x) var(--glow-y),rgba(159,187,231,.22),transparent 42%),
    linear-gradient(180deg,rgba(2,7,18,.04) 0%,rgba(2,7,18,.2) 50%,rgba(2,7,18,.92) 78%,rgba(2,7,18,.98) 100%),
    linear-gradient(90deg,rgba(2,7,18,.3),rgba(2,7,18,.02) 46%,rgba(2,7,18,.42));
  pointer-events:none;
}
.category-photo{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:.58;
  filter:saturate(.82) contrast(1.1) brightness(.68);
  transform:scale(1.02);
  transition:opacity .72s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.category-block:hover .category-photo,
.category-block.active .category-photo{
  opacity:.72;
  transform:scale(1.045);
}
.category-block > :not(.category-photo){
  position:relative;
  z-index:1;
}
.category-block.active{
  border:1px solid var(--line-strong);
  background:linear-gradient(180deg,rgba(82,120,178,.08),rgba(6,16,29,.32));
  box-shadow:0 28px 80px -58px rgba(159,187,231,.7);
}
.category-row{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:"copy arrow";
  gap:1rem;
  align-items:end;
  width:100%;
  min-height:clamp(520px,74svh,760px);
  border-bottom:0;
  border-top:0;
  border-left:0;
  border-right:0;
  background:transparent;
  color:var(--accent-2);
  text-align:left;
  cursor:pointer;
  padding:2rem;
  transition:background .72s cubic-bezier(.16,1,.3,1),color .72s cubic-bezier(.16,1,.3,1);
}
.category-row::before,
.category-row::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  transition:opacity .72s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1);
}
.category-row::before{
  top:auto;
  left:2rem;
  right:2rem;
  bottom:1.35rem;
  height:1px;
  background:linear-gradient(90deg,var(--accent-2),transparent);
  opacity:.28;
  transform:scaleX(.18);
  transform-origin:left;
}
.category-block:hover .category-row::before,
.category-block.active .category-row::before,
.category-row:focus-visible::before{
  opacity:.82;
  transform:scaleX(1);
}
.category-row::after{
  background:linear-gradient(180deg,rgba(2,7,18,0) 0%,rgba(2,7,18,.1) 48%,rgba(2,7,18,.86) 78%,rgba(2,7,18,.98) 100%);
}
.category-row > *{
  position:relative;
  z-index:1;
}
.category-row span{
  grid-area:copy;
  align-self:end;
  transition:transform .48s cubic-bezier(.16,1,.3,1);
}
.category-block:hover .category-row span,
.category-block.active .category-row span,
.category-row:focus-visible span{
  transform:translateY(-10px);
}
.category-row em{
  display:block;
  margin-top:.42rem;
  color:var(--accent);
  font-style:normal;
  text-transform:uppercase;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.36em;
}
.category-row i{
  position:absolute;
  top:2rem;
  right:2rem;
}
.category-row svg{
  grid-area:arrow;
  align-self:end;
  width:48px;
  height:48px;
  padding:12px;
  border:1px solid rgba(220,232,247,.26);
  background:rgba(2,7,18,.32);
  border-radius:50%;
  transition:transform .48s cubic-bezier(.16,1,.3,1),border-color .24s,background .24s;
}
.category-row::marker{content:""}
.category-row b{
  display:block;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(2.1rem,6vw,3.4rem);
  letter-spacing:.18em;
  color:var(--text);
}
.animated-hero-text i{
  display:inline-block;
  font-style:normal;
  opacity:0;
  transform:translateY(12px);
  filter:blur(4px);
  animation:heroLetterIn 0.9s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:5.4s;
}
@keyframes heroLetterIn{
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
.category-row i{font-style:normal;color:rgba(220,232,247,.32);font-weight:800;letter-spacing:.2em}
.category-row:hover b,.category-row.active b{color:var(--accent-2)}
.category-row.active{background:transparent}
.category-row:hover svg{transform:translateX(6px);border-color:var(--accent-2);background:rgba(159,187,231,.1)}
.category-row.active svg{transform:rotate(90deg)}
.category-row svg{transition:transform .48s cubic-bezier(.16,1,.3,1)}
.category-products{
  margin:0 1rem 1rem;
  padding:1.25rem;
  border-top:1px solid var(--line);
  background:rgba(2,7,18,.38);
  overflow:hidden;
  animation:categoryDrawerIn 1.05s cubic-bezier(.16,1,.3,1) both;
  transform-origin:top;
}
@keyframes categoryDrawerIn{
  0%{opacity:0;max-height:0;transform:translateY(-16px);filter:blur(3px)}
  45%{opacity:1}
  100%{opacity:1;max-height:900px;transform:translateY(0);filter:blur(0)}
}
.category-products-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.1rem;
}
.category-products-head h3{
  font-size:clamp(2rem,4vw,3rem);
  text-transform:uppercase;
}
.category-product-grid{
  grid-template-columns:repeat(auto-fill,190px);
  justify-content:start;
  align-items:start;
  border-color:var(--line-strong);
  background:transparent;
  border:0;
  gap:.75rem;
}
.category-product-grid .product-card{width:190px}
.category-product-grid .product-card{
  animation:categoryCardIn .7s cubic-bezier(.16,1,.3,1) both;
  animation-delay:.16s;
}
@keyframes categoryCardIn{
  from{opacity:0;transform:translateY(14px) scale(.975)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.category-product-grid .product-image{aspect-ratio:1/1}
.category-product-grid .product-body{padding:.8rem;gap:.32rem}
.category-product-grid .product-body h3{font-size:1.08rem;line-height:1.05}
.category-product-grid .product-body small,
.category-product-grid .product-body p{font-size:.58rem;letter-spacing:.12em}
.category-product-grid .product-body b{font-size:1.35rem}
.category-product-grid .product-body a{font-size:.62rem}
.category-product-grid .product-image span{font-size:.55rem;padding:.28rem .45rem}
.category-close{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid var(--line-strong);
  background:rgba(2,7,18,.72);
  color:var(--text);
  cursor:pointer;
  font-size:1.35rem;
  line-height:1;
}
.category-close:hover{background:var(--text);color:var(--bg)}

.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px;
  border:1px solid var(--line);
  background:var(--line);
}
.product-card{
  background:rgba(6,16,29,.86);
  cursor:pointer;
  min-width:0;
  transition:transform .2s,background .2s;
}
.product-card:hover{background:rgba(11,27,47,.94);transform:translateY(-2px)}
.product-card.sold{opacity:.55}
.product-image{
  position:relative;
  aspect-ratio:4/5;
  background:#020712;
  overflow:hidden;
}
.product-image img{width:100%;height:100%;object-fit:cover;transition:transform .45s,filter .45s;filter:saturate(.78) contrast(1.04)}
.product-card:hover img{transform:scale(1.04)}
.product-image span{
  position:absolute;
  top:.85rem;
  right:.85rem;
  padding:.35rem .55rem;
  background:rgba(2,7,18,.68);
  border:1px solid var(--line-strong);
  color:var(--accent-2);
  text-transform:uppercase;
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.14em;
}
.product-body{padding:1rem;display:flex;flex-direction:column;gap:.45rem}
.product-body small,.product-body p{
  color:var(--muted);
  text-transform:uppercase;
  font-size:.68rem;
  letter-spacing:.14em;
  font-weight:700;
}
.product-body h3{font-size:1.6rem;letter-spacing:.1em;text-transform:uppercase}
.product-body div{display:flex;justify-content:space-between;align-items:center;gap:.8rem;margin-top:.4rem}
.product-body b{
  font-family:"Cormorant Garamond",serif;
  font-size:1.8rem;
  letter-spacing:.08em;
}
.product-body a{
  color:var(--accent-2);
  font-size:.7rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.empty{
  grid-column:1/-1;
  min-height:180px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:.4rem;
  background:var(--panel);
  color:var(--muted);
  text-align:center;
}
.empty b{font-family:"Cormorant Garamond",serif;font-size:2rem;color:var(--text);letter-spacing:.1em}

#reviews{
  display:block;
  padding-top:7rem;
  margin-top:2rem;
  overflow:hidden;
}
#reviews .section-head{
  margin-bottom:2.2rem;
}
.review-panel{border:1px solid var(--line);background:linear-gradient(180deg,rgba(11,27,47,.86),rgba(6,16,29,.72));padding:1.4rem;min-width:0;box-shadow:var(--shadow)}
.review-score{display:flex;align-items:end;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:1rem;margin-bottom:1rem}
.review-score b{font-family:"Cormorant Garamond",serif;font-size:4rem;line-height:.8}
.review-score span{color:var(--muted);text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:800}
.review-track-wrap{overflow:hidden;margin-bottom:1rem;max-width:100%}
.review-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.review-track.is-rolling{
  display:flex;
  width:max-content;
  animation:reviewRoll 42s linear infinite;
}
.review-track.is-rolling:hover{animation-play-state:paused}
.review-track.is-rolling .review-chip{width:280px;flex:0 0 280px}
@keyframes reviewRoll{
  to{transform:translateX(-50%)}
}
.review-chip{
  width:auto;
  min-height:172px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:1px solid var(--line);
  background:rgba(2,7,18,.42);
  padding:1rem;
}
.review-chip span{color:var(--gold);letter-spacing:.12em}
.review-chip p{color:var(--soft);line-height:1.55}
.review-chip b{color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-size:.68rem}

.payment-section{
  max-width:var(--max);
  margin:2rem auto;
  padding:5rem 1.2rem;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(280px,420px);
  align-items:center;
  gap:clamp(2rem,5vw,4rem);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.payment-copy h2{margin:.6rem 0}
.payment-copy p{max-width:560px;color:var(--soft);line-height:1.7}
.payment-banner{
  justify-self:end;
  width:min(420px,100%);
  border:1px solid var(--line-strong);
  background:rgba(6,16,29,.8);
  box-shadow:0 34px 90px -48px rgba(67,124,220,.9);
  overflow:hidden;
}
.payment-banner img{display:block;width:100%;height:auto}

.order-band{
  max-width:var(--max);
  margin:3rem auto;
  padding:3rem 1.2rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.order-band div{max-width:720px}
.order-band h2{margin:.6rem 0}
.order-band p{color:var(--soft);line-height:1.7}

.product-modal[hidden]{display:none}
.product-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1rem}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7);border:0}
.modal-card{
  position:relative;
  width:min(980px,100%);
  max-height:92vh;
  overflow:auto;
  background:var(--panel);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow);
  padding:1rem;
}
.modal-close{
  position:absolute;
  right:.8rem;
  top:.8rem;
  z-index:2;
  width:38px;
  height:38px;
  border:1px solid var(--line-strong);
  background:rgba(2,7,18,.82);
  color:var(--text);
  cursor:pointer;
  font-size:1.4rem;
}
.modal-product{display:grid;grid-template-columns:minmax(260px,.95fr) 1fr;gap:1.5rem;align-items:start}
.modal-product>img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#020712}
.modal-product h2{margin:.6rem 0 .3rem}
.modal-price{font-family:"Cormorant Garamond",serif;font-size:3rem;margin-bottom:1rem}
dl{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin:1rem 0}
dl div{background:var(--panel-2);padding:.8rem}
dt{color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;font-weight:800;margin-bottom:.3rem}
dd{color:var(--text)}
.modal-product p{color:var(--soft);line-height:1.7;margin-bottom:1rem}

.review-modal-card{max-width:520px}
.review-modal-card h2{margin:.6rem 0 1rem}
.review-form{display:grid;gap:.85rem}
.review-form label{display:grid;gap:.35rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;font-weight:800}
.review-form .optional{color:var(--accent-2);font-size:.62rem;letter-spacing:.12em;margin-left:.25rem}
.review-form input,.review-form textarea{
  width:100%;
  border:1px solid var(--line);
  background:#020712;
  color:var(--text);
  padding:.85rem;
  outline:none;
}
.review-form input:focus,.review-form textarea:focus{border-color:var(--accent-2)}
.check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;text-transform:none!important;letter-spacing:0!important;font-size:.9rem!important}
.check input{width:auto}
.stars-input{display:flex;gap:.25rem}
.stars-input button{border:0;background:transparent;color:rgba(220,232,247,.25);font-size:1.6rem;cursor:pointer}
.stars-input button.active{color:var(--gold)}
#reviewNote{color:var(--accent-2);min-height:1.2rem}

footer{
  display:grid;
  gap:2.6rem;
  padding:3.4rem clamp(1.2rem,4vw,3rem) 2.2rem;
  border-top:1px solid var(--line);
  background:
    linear-gradient(180deg,rgba(8,18,32,.94),#020712 62%),
    radial-gradient(800px 360px at 82% 10%,rgba(82,120,178,.16),transparent 62%);
  color:var(--muted);
  font-size:.82rem;
}
body.admin-mode footer{display:none}
footer b{font-family:"Cormorant Garamond",serif;letter-spacing:.32em;color:var(--text)}
footer code{background:var(--panel);border:1px solid var(--line);padding:.1rem .35rem}
.footer-directory{
  display:grid;
  grid-template-columns:minmax(160px,1fr) minmax(170px,230px) minmax(220px,280px) minmax(240px,330px);
  gap:clamp(1.3rem,4vw,4rem);
  align-items:start;
  padding:1.45rem;
  border:1px solid var(--line);
  background:rgba(4,12,22,.5);
  box-shadow:0 30px 90px -70px rgba(159,187,231,.75);
}
.footer-directory>div{
  display:grid;
  gap:.85rem;
  padding-left:1.1rem;
  border-left:1px solid rgba(122,155,202,.18);
}
.footer-kicker{
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.34em;
  font-size:.7rem;
  font-weight:800;
  margin-bottom:.65rem;
}
.footer-directory a{
  color:var(--soft);
  font-family:"Courier New",monospace;
  font-size:clamp(1rem,1.6vw,1.35rem);
  font-weight:700;
  letter-spacing:.02em;
  transition:color .2s,transform .2s;
}
.footer-directory a:hover{color:var(--text);transform:translateX(4px)}
.footer-socials a{
  display:grid;
  gap:.25rem;
  padding:.9rem;
  border:1px solid var(--line);
  background:rgba(2,7,18,.48);
  font-family:Inter,system-ui,sans-serif;
}
.footer-socials a:hover{border-color:var(--line-strong);background:rgba(82,120,178,.12)}
.footer-socials b{font-family:Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;font-size:.72rem}
.footer-socials small{color:var(--muted);letter-spacing:.04em;font-size:.74rem}
.footer-closer{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.35rem 1.45rem;
  border:1px solid var(--line);
  background:
    linear-gradient(90deg,rgba(82,120,178,.16),rgba(2,7,18,.52)),
    rgba(4,12,22,.68);
}
.footer-closer div{max-width:760px}
.footer-closer strong{
  display:block;
  margin:.35rem 0 .35rem;
  font-family:"Cormorant Garamond",serif;
  color:var(--text);
  font-size:clamp(2rem,4vw,3.6rem);
  line-height:.95;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.footer-closer p{color:var(--soft);line-height:1.65;max-width:620px}
.footer-closer .btn{white-space:nowrap}
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding-top:1.2rem;
  border-top:1px solid var(--line);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:.68rem;
  font-weight:800;
}
.footer-bottom a{
  display:inline-flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  padding:.78rem 1.05rem;
  border:1px solid rgba(220,232,247,.72);
  background:rgba(220,232,247,.08);
  color:var(--text);
  box-shadow:0 18px 45px -34px rgba(159,187,231,.95);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.68rem;
  font-weight:800;
  transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.footer-bottom a:hover{background:var(--text);border-color:var(--text);color:var(--bg);transform:translateY(-1px)}

@media (prefers-reduced-motion: reduce){
  .btn,
  .btn::before,
  .category-block,
  .category-photo,
  .category-row span,
  .category-row svg,
  .category-row::before{
    transition:none!important;
    animation:none!important;
  }
  .btn:hover,
  .btn:active,
  .category-block,
  .category-block.is-pressing{
    transform:none!important;
  }
  .category-photo,
  .category-block:hover .category-photo,
  .category-block.active .category-photo{
    transform:scale(1.02)!important;
  }
}

.admin-mode{
  background:
    radial-gradient(900px 420px at 20% -10%,rgba(59,130,246,.24),transparent 60%),
    linear-gradient(135deg,#06101d,#0f172a 46%,#e8eef7 46%,#f7f9fc);
  color:#111827;
}
.admin-view{min-height:100vh;padding:2rem 0}
.admin-view .container{max-width:1380px}
.login-card{
  max-width:460px;
  margin:8vh auto;
  display:grid;
  gap:1rem;
  place-items:center;
  padding:2.25rem;
  background:linear-gradient(180deg,rgba(10,22,38,.96),rgba(4,10,18,.98));
  border:1px solid rgba(159,187,231,.28);
  box-shadow:0 34px 90px -45px #020617;
  color:#e5eefb;
  border-radius:22px;
}
.login-card img{width:86px;height:86px;object-fit:cover;border-radius:22px}
.login-card h2,.admin-main h2{font-family:Inter,system-ui,sans-serif;letter-spacing:0;text-transform:none}
.login-card p,.admin-note{color:#9fb3cf;text-align:center}
.login-card input{
  width:100%;
  border:1px solid rgba(159,187,231,.24);
  background:rgba(2,7,18,.7);
  color:#e5eefb;
  padding:1rem;
  text-align:center;
  border-radius:12px;
}
.admin-mode .btn.primary{background:#60a5fa;border-color:#60a5fa;color:#06101d}
.admin-mode .btn.ghost{background:white;color:#0f172a;border-color:#d9e0ea}
.admin-shell{display:grid;grid-template-columns:280px 1fr;min-height:82vh;background:white;border:1px solid rgba(217,224,234,.9);box-shadow:0 28px 80px -45px #0f172a;border-radius:24px;overflow:hidden}
.admin-shell aside{background:linear-gradient(180deg,#07111f,#0f172a);color:#e5eefb;padding:1rem;display:flex;flex-direction:column;gap:.45rem}
.admin-logo{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.admin-logo img{width:42px;height:42px;object-fit:cover;border-radius:12px}
.admin-logo span{display:grid;gap:.1rem}
.admin-logo small{color:#7b8da8;text-transform:uppercase;letter-spacing:.18em;font-size:.62rem}
.admin-shell aside button,.admin-shell aside a{
  width:100%;
  border:0;
  background:transparent;
  color:#b7c4d6;
  padding:.85rem;
  text-align:left;
  cursor:pointer;
  border-radius:6px;
  display:flex;
  justify-content:space-between;
}
.admin-shell aside button:hover,.admin-shell aside a:hover,.admin-shell aside button.active{background:rgba(96,165,250,.16);color:white}
.admin-main{padding:1.2rem;background:#f8fafc;color:#111827}
.admin-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}
.admin-top .kicker{color:#5278b2}
.admin-top input{border:1px solid #d9e0ea;padding:.75rem;width:min(320px,100%);border-radius:6px}
.admin-metrics,.overview-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;margin-bottom:1rem}
.admin-metrics div,.overview-grid div,.admin-card{
  background:white;
  border:1px solid #d9e0ea;
  border-radius:8px;
  padding:1rem;
}
.admin-metrics b,.overview-grid b{display:block;font-size:1.5rem}
.admin-metrics span,.overview-grid span{color:#64748b;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
.admin-grid{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:1rem;align-items:start}
.category-admin-grid{grid-template-columns:minmax(260px,360px) 1fr}
.admin-card h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;color:#64748b;margin-bottom:1rem}
.admin-form{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.admin-form label{display:grid;gap:.35rem;color:#64748b;text-transform:uppercase;font-size:.72rem;font-weight:800;letter-spacing:.06em}
.admin-form .full,.size-editor,.form-actions{grid-column:1/-1}
.admin-form input,.admin-form select,.admin-form textarea{
  border:1px solid #d9e0ea;
  padding:.75rem;
  border-radius:6px;
  background:white;
  color:#111827;
}
.size-editor{display:grid;gap:.5rem}
.size-row{display:grid;grid-template-columns:1fr 100px 38px;gap:.4rem}
.size-row button,.add-size,.row-actions button,.sold-form button,.admin-row>button{
  border:1px solid #d9e0ea;
  background:white;
  color:#111827;
  border-radius:6px;
  cursor:pointer;
}
.add-size{padding:.75rem;color:#5278b2;font-weight:800}
.form-actions{display:flex;justify-content:flex-end;gap:.6rem}
.admin-list{display:grid;gap:.6rem}
.admin-row{
  display:grid;
  grid-template-columns:58px 1fr auto;
  gap:.75rem;
  align-items:center;
  border:1px solid #e2e8f0;
  border-radius:8px;
  padding:.65rem;
  background:#fff;
}
.admin-row[hidden]{display:none}
.admin-row img{width:58px;height:72px;object-fit:contain;border-radius:4px;background:#0f172a}
.admin-row span{display:block;color:#64748b;font-size:.82rem;margin-top:.1rem}
.row-actions{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:end}
.row-actions button,.sold-form button,.admin-row>button{padding:.5rem .65rem}
.danger{color:#b91c1c!important;border-color:#fecaca!important}
.sold-form{grid-column:2/-1;display:grid;grid-template-columns:1fr 90px auto;gap:.45rem}
.sold-form select,.sold-form input{border:1px solid #d9e0ea;padding:.55rem;border-radius:6px;background:white;color:#111827}
.review-row{grid-template-columns:64px 1fr auto}
.review-row strong{color:#b8860b}
.category-admin-list{display:grid;gap:.65rem}
.category-admin-row{
  display:grid;
  grid-template-columns:74px 1fr auto;
  align-items:center;
  gap:1rem;
  padding:.85rem;
  border:1px solid #e2e8f0;
  background:#fff;
  border-radius:10px;
}
.category-admin-row img{
  width:74px;
  height:56px;
  object-fit:contain;
  border-radius:8px;
  background:#0f172a;
}
.category-admin-row b{display:block}
.category-admin-row span,.admin-help{color:#64748b;font-size:.84rem}
.category-admin-row button{border:1px solid #fecaca;background:white;border-radius:8px;padding:.55rem .7rem;cursor:pointer}
.category-form .btn{width:100%}

@media (max-width:900px){
  .hero{min-height:calc(100svh - 76px)}
  .hero::after{
    background:
      repeating-linear-gradient(90deg,rgba(159,187,231,.08) 0 1px,transparent 1px 33.33%),
      repeating-linear-gradient(180deg,rgba(159,187,231,.06) 0 1px,transparent 1px 22%),
      linear-gradient(180deg,rgba(2,7,18,.52),rgba(2,7,18,.76) 55%,rgba(2,7,18,.96));
  }
  .hero-strip{position:relative;left:auto;right:auto;bottom:auto;margin-top:2rem}
  .split,.admin-shell,.admin-grid,.payment-section{grid-template-columns:1fr}
  .payment-banner{justify-self:stretch;margin:0 auto}
  .admin-metrics,.overview-grid{grid-template-columns:repeat(2,1fr)}
  .admin-shell aside{position:static}
  .footer-directory{grid-template-columns:1fr 1fr}
  .footer-directory>b{grid-column:1/-1}
}

@media (max-width:620px){
  .nav{height:68px;padding:0 1.1rem}
  .nav::before{inset:68px 0 0}
  .brand{font-size:1.05rem;letter-spacing:.28em}
  .brand img{width:38px;height:38px;border-radius:50%}
  .nav-panel{
    position:fixed;
    top:68px;
    left:0;
    right:0;
    width:100%;
    height:calc(100svh - 68px);
    overflow:auto;
    padding:1.1rem 1.35rem calc(1.35rem + env(safe-area-inset-bottom));
    border-left:0;
    border-right:0;
    border-top:1px solid var(--line-strong);
    border-bottom:1px solid var(--line-strong);
    background:
      linear-gradient(180deg,rgba(4,13,24,.98),rgba(2,7,18,.98)),
      url("assets/category-bg-clothing-fixed.png") center/cover;
    transform:translateY(-14px);
  }
  .nav-panel a{
    padding:1.18rem .35rem;
    letter-spacing:.24em;
    font-size:.9rem;
  }
  h1{font-size:4rem}
  .hero{padding:clamp(4.2rem,16vh,8rem) 1.2rem 5.5rem}
  .hero-copy p{font-size:1rem}
  .hero-scroll{bottom:4.65rem}
  .hero-scroll span{display:none}
  .hero-scroll::before{width:46px}
  .hero-links,.order-band{align-items:stretch;flex-direction:column}
  .hero-links .btn,.order-band .btn{width:100%}
  .hero-strip{display:grid;grid-template-columns:1fr;gap:.6rem}
  section{padding:3.5rem 0}
  .category-row{min-height:clamp(520px,76svh,680px);padding:1.35rem}
  .category-row b{font-size:2.45rem}
  .category-row em{font-size:.66rem;letter-spacing:.28em}
  .category-row i{top:1.35rem;right:1.35rem}
  .section-head{display:block}
  .product-grid{grid-template-columns:1fr}
  #reviews{padding-top:4.5rem;margin-top:1rem}
  .review-panel{padding:1rem}
  .review-score{align-items:flex-start;flex-direction:column;gap:.65rem}
  .review-track{grid-template-columns:1fr}
  .payment-section{padding:3.5rem 1.2rem}
  .modal-product{grid-template-columns:1fr}
  dl{grid-template-columns:1fr}
  footer{padding:3rem 1.2rem 2rem}
  .footer-directory{grid-template-columns:1fr;gap:2.4rem}
  .footer-closer{align-items:stretch;flex-direction:column;padding:1.15rem}
  .footer-closer .btn{width:100%;white-space:normal}
  .footer-closer strong{font-size:2.15rem}
  .footer-directory a{font-size:1.25rem}
  .footer-bottom{display:grid;gap:1rem}
  .footer-bottom a{width:max-content}
  .admin-main{padding:.8rem}
  .admin-top{align-items:stretch;flex-direction:column}
  .admin-metrics{grid-template-columns:1fr}
  .admin-form{grid-template-columns:1fr}
  .admin-row{grid-template-columns:48px 1fr}
  .admin-row img{width:48px;height:62px}
  .row-actions,.sold-form{grid-column:1/-1}
  .sold-form{grid-template-columns:1fr}
}

@media (max-width:430px){
  .brand{gap:0}
  .brand span{display:none}
  .brand img{width:44px;height:44px}
  h1{font-size:3.35rem}
  .hero{padding-top:5.5rem}
  .loader-mark{width:112px;height:112px}
}