/* ═══════════════════════════════════════════════════════════════════════
   SHOP THE DARK TIDES
   ═══════════════════════════════════════════════════════════════════════ */

.sf{
  padding:0 var(--pad) 0;
  padding-left:calc(var(--rail) + var(--pad));
}
@media (max-width:860px){ .sf{ padding-left:calc(var(--rail) + var(--pad)); } }

/* ── hero ──────────────────────────────────────────────────────────────── */
.sf-hero{
  position:relative;
  margin:0 calc(var(--pad) * -1) 0;
  margin-left:calc((var(--rail) + var(--pad)) * -1);
  min-height:min(46vh, 360px);
  display:grid; place-items:center; overflow:hidden;
}
@media (max-width:860px){ .sf-hero{ margin-left:calc((var(--rail) + var(--pad)) * -1); } }

.sf-hero img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 58%;
}
.sf-hero::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(80% 74% at 50% 46%, rgba(4,4,6,.3), rgba(4,4,6,.85) 82%),
    linear-gradient(180deg, rgba(8,8,10,.86), transparent 34%, rgba(8,8,10,.96));
}
.sf-hero-in{
  position:relative; z-index:2; text-align:center;
  padding:calc(var(--bar) + 34px) 22px 34px; max-width:660px; width:100%;
}
.sf-hero-in h1{
  margin:0; font-family:var(--display); font-weight:400;
  font-size:clamp(30px,5.2vw,56px); line-height:1.04;
  color:var(--cream); text-shadow:0 4px 34px rgba(0,0,0,.9);
}
.sf-hero-in p{
  margin:12px auto 22px; max-width:48ch; color:var(--cream-dim);
  text-shadow:0 2px 16px rgba(0,0,0,.9);
}

.sf-search{ position:relative; max-width:430px; margin:0 auto; }
.sf-search input{
  width:100%; padding:14px 46px 14px 18px;
  background:rgba(8,8,10,.84); border:1px solid var(--hair); border-radius:2px;
  color:var(--cream); font:inherit; font-size:14.5px;
}
.sf-search input:focus{ outline:none; border-color:var(--gold); }
.sf-search input::placeholder{ color:#5d584f; }
.sf-search svg{
  position:absolute; right:15px; top:50%; transform:translateY(-50%);
  width:19px; height:19px; color:var(--gold-soft); pointer-events:none;
}
.sf-sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ── tabs ──────────────────────────────────────────────────────────────── */
/* Department entrance */
.sf-departments{ padding:clamp(34px,5vw,68px) 0 18px; }
.sf-dept-head{ max-width:650px; margin:0 auto clamp(25px,4vw,42px); text-align:center; }
.sf-dept-head p{ margin:0 0 7px; color:var(--gold-soft); font-size:9px; letter-spacing:.3em; text-transform:uppercase; }
.sf-dept-head h2{ margin:0; color:var(--cream); font:400 clamp(25px,3.4vw,40px) var(--display); letter-spacing:.07em; }
.sf-dept-head>span{ display:block; margin-top:8px; color:var(--muted); font-size:12px; }
.sf-dept-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:clamp(300px,28vw,480px); gap:14px; }
.sf-dept-card{ position:relative; grid-column:span 3; display:block; min-height:285px; overflow:hidden; border:1px solid var(--hair-2); background:#090a0c; color:inherit; text-align:left; text-decoration:none; cursor:pointer; }
.sf-dept-card:nth-child(1),.sf-dept-vault{ grid-column:span 6; }
.sf-dept-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .75s var(--ease),filter .5s var(--ease); }
.sf-dept-shade{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,5,6,.12) 20%,rgba(4,5,6,.24) 45%,rgba(4,5,6,.96) 100%),linear-gradient(90deg,rgba(4,5,6,.2),transparent 65%); transition:background .4s var(--ease); }
.sf-dept-card::after{ content:''; position:absolute; inset:9px; border:1px solid transparent; pointer-events:none; transition:border-color .4s var(--ease); }
.sf-dept-card:hover::after,.sf-dept-card:focus-visible::after{ border-color:rgba(201,169,97,.55); }
.sf-dept-card:hover img,.sf-dept-card:focus-visible img{ transform:scale(1.035); filter:brightness(1.08); }
.sf-dept-card[data-department="women"] img{ object-position:68% center; }
.sf-dept-card:focus-visible{ outline:1px solid var(--gold); outline-offset:3px; }
.sf-dept-status{ position:absolute; z-index:2; top:19px; right:19px; padding:4px 8px; border:1px solid rgba(201,169,97,.38); background:rgba(6,7,8,.72); color:var(--gold); font-size:8px; letter-spacing:.15em; text-transform:uppercase; }
.sf-dept-copy{ position:absolute; z-index:2; left:clamp(21px,2.4vw,34px); right:clamp(21px,2.4vw,34px); bottom:clamp(20px,2.5vw,33px); }
.sf-dept-copy small,.sf-dept-copy b,.sf-dept-copy em,.sf-dept-copy i{ display:block; }
.sf-dept-copy small{ color:var(--gold); font-size:8px; letter-spacing:.28em; text-transform:uppercase; }
.sf-dept-copy b{ margin-top:6px; color:var(--cream); font:400 clamp(20px,2.2vw,31px) var(--display); letter-spacing:.07em; }
.sf-dept-copy em{ max-width:38ch; margin-top:5px; color:#b7afa1; font:normal 11px/1.55 var(--ui); }
.sf-dept-copy i{ margin-top:14px; color:var(--gold-soft); font:normal 8px var(--ui); letter-spacing:.22em; text-transform:uppercase; opacity:0; transform:translateY(5px); transition:opacity .35s var(--ease),transform .35s var(--ease); }
.sf-dept-card:hover .sf-dept-copy i,.sf-dept-card:focus-visible .sf-dept-copy i{ opacity:1; transform:none; }
.sf-dept-vault img{ object-position:center 52%; }
@media(max-width:1100px){
  .sf-dept-grid{ grid-auto-rows:clamp(270px,42vw,390px); }
  .sf-dept-card,.sf-dept-card:nth-child(1),.sf-dept-vault{ grid-column:span 6; }
}
@media(max-width:620px){
  .sf-departments{ padding-top:30px; }
  .sf-hero-in{ padding-left:calc(var(--rail) + 14px); padding-right:14px; }
  .sf-hero-in h1{ font-size:25px; line-height:1.12; }
  .sf-dept-head h2{ font-size:22px; letter-spacing:.035em; }
  .sf-dept-grid{ display:grid; grid-template-columns:1fr; grid-auto-rows:clamp(320px,115vw,500px); }
  .sf-dept-card,.sf-dept-card:nth-child(1),.sf-dept-vault{ grid-column:auto; }
  .sf-dept-copy i{ opacity:1; transform:none; }
}

.sf-tabs{
  display:flex; gap:4px; flex-wrap:wrap;
  margin:0 calc(var(--pad) * -1) 26px;
  margin-left:calc((var(--rail) + var(--pad)) * -1);
  padding:0 var(--pad); padding-left:calc(var(--rail) + var(--pad));
  border-bottom:1px solid var(--hair-2);
  overflow-x:auto; scrollbar-width:none;
}
.sf-tabs::-webkit-scrollbar{ display:none; }
@media (max-width:860px){
  .sf-tabs{ margin-left:calc(var(--pad) * -1); padding-left:var(--pad); flex-wrap:nowrap; }
}
.sf-tabs button{
  flex:none; display:flex; align-items:center; gap:7px;
  padding:15px 16px; background:none; border:0; cursor:pointer;
  border-bottom:2px solid transparent;
  color:var(--cream-dim); font:inherit; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.sf-tabs button:hover{ color:var(--cream); }
.sf-tabs button[aria-current]{ color:var(--gold); border-bottom-color:var(--gold); }
.sf-tabs button.is-soon{ color:var(--muted); }
.sf-tabs .sf-vault-link{
  align-self:stretch; display:flex; align-items:center; padding:0 4px;
  color:var(--gold); font:10px var(--ui); letter-spacing:.2em;
  text-transform:uppercase; text-decoration:none; border-bottom:1px solid transparent;
}
.sf-tabs .sf-vault-link:hover{ color:var(--cream); border-bottom-color:var(--gold); }
.sf-tabs i{
  font-style:normal; font-size:9px; letter-spacing:.12em;
  padding:1px 5px; border:1px solid var(--hair-2); border-radius:2px;
}

/* ── grid ──────────────────────────────────────────────────────────────── */
.sf-count{
  margin:0 0 16px; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}
.sf-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.sf-card{
  height:100%; display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--hair-2); border-radius:3px;
  overflow:hidden;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.sf-card:hover{ border-color:var(--gold-soft); transform:translateY(-3px); }
.sf-card-img{ position:relative; display:block; aspect-ratio:1; background:#0a0a0c; }
.sf-card-img img{ width:100%; height:100%; object-fit:cover; }
.sf-badge{
  position:absolute; top:10px; left:10px;
  padding:3px 9px; border-radius:2px;
  background:rgba(8,8,10,.86); border:1px solid var(--gold-soft);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
}
.sf-card-in{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
.sf-card-no{
  margin:0 0 5px; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-soft);
}
.sf-card h3{ margin:0; font-family:var(--display); font-weight:400; font-size:19px; }
.sf-card h3 a{ color:var(--cream); text-decoration:none; }
.sf-card h3 a:hover{ color:var(--gold); }
.sf-card-sub{
  margin:5px 0 0; font-family:var(--display); font-style:italic;
  font-size:13.5px; color:var(--gold-soft);
}
.sf-card-colours{
  margin:12px 0 0; display:flex; align-items:center; gap:7px;
  font-size:11.5px; color:var(--muted);
}
.sf-card-colours i{
  width:14px; height:14px; border-radius:50%;
  border:1px solid rgba(233,226,212,.25);
}
.sf-card-colours span{ margin-left:4px; }
.sf-card-foot{
  margin-top:auto; padding-top:16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.sf-card-price{ margin:0; font-family:var(--display); font-size:20px; color:var(--cream); }
.sf-card-price em{
  font-style:normal; font-family:var(--ui); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-left:7px;
}
.sf-quick{
  padding:9px 14px; background:none; cursor:pointer;
  border:1px solid var(--hair); border-radius:2px;
  color:var(--cream-dim); font:inherit; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.sf-quick:hover{ color:var(--gold); border-color:var(--gold-soft); }

/* ── empty states ──────────────────────────────────────────────────────── */
.sf-soon{
  padding:clamp(30px,6vw,64px); text-align:center;
  border:1px dashed var(--hair); border-radius:3px;
  background:rgba(255,255,255,.012);
}
.sf-soon-k{
  margin:0 0 10px; font-family:var(--display); font-size:clamp(21px,3vw,29px);
  color:var(--cream); letter-spacing:.04em;
}
.sf-soon-b{ margin:0 auto 16px; max-width:44ch; color:var(--cream-dim); }
.sf-soon-n{ margin:0; font-size:13px; color:var(--muted); }
.sf-soon-n a, .sf-soon-n button{ color:var(--gold); }
.sf-none{ margin:0; color:var(--muted); }
.link-u{
  background:none; border:0; padding:0; cursor:pointer; font:inherit;
  color:var(--gold); border-bottom:1px solid var(--hair);
}

/* ── shop by legend ────────────────────────────────────────────────────── */
.sf-legends{ margin-top:52px; }
.sf-rule{
  display:flex; align-items:center; gap:18px; margin:0 0 22px;
  font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-soft);
}
.sf-rule span{ flex:1; height:1px; background:var(--hair); }
.sf-legends ul{
  list-style:none; margin:0; padding:0;
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.sf-legends a{ display:block; text-align:center; text-decoration:none; }
.sf-legend-img{
  display:block; width:118px; height:118px; margin:0 auto 12px;
  border-radius:50%; overflow:hidden;
  border:1px solid var(--hair);
  transition:border-color .25s var(--ease);
}
.sf-legend-img img{ width:100%; height:100%; object-fit:cover; }
.sf-legends a:hover .sf-legend-img{ border-color:var(--gold); }
.sf-legends b{
  display:block; font-family:var(--display); font-weight:400;
  font-size:16px; letter-spacing:.08em; color:var(--cream);
}
.sf-legends em{ font-style:normal; font-size:12px; color:var(--muted); }

/* ── the closing note ──────────────────────────────────────────────────── */
.sf-made{
  margin:56px calc(var(--pad) * -1) 0;
  margin-left:calc((var(--rail) + var(--pad)) * -1);
  padding:clamp(34px,5vw,64px) var(--pad);
  padding-left:calc(var(--rail) + var(--pad));
  border-top:1px solid var(--hair-2);
  background:linear-gradient(180deg, rgba(201,169,97,.035), transparent);
}
@media (max-width:860px){
  .sf-made{ margin-left:calc(var(--pad) * -1); padding-left:var(--pad); }
}
.sf-made h2{
  margin:0 0 12px; font-family:var(--display); font-weight:400;
  font-size:clamp(21px,2.6vw,28px); color:var(--cream); letter-spacing:.04em;
}
.sf-made p{ margin:0 0 14px; max-width:56ch; color:var(--cream-dim); }

.sf-navlink{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-dim); text-decoration:none; margin-right:6px;
}
.sf-navlink:hover{ color:var(--gold); }

@media (prefers-reduced-motion:reduce){
  .sf-card:hover{ transform:none; }
}