/* ==========================================================================
   Farah Shuja — Theme Stylesheet
   --------------------------------------------------------------------------
   Values mirror design-system/tokens.css. The brand colour #7D95A6 measures
   2.95:1 on bone and therefore never carries text — see design-system/README.
   ========================================================================== */

:root {
  --fs-brand-50:#F3F5F7;  --fs-brand-100:#E7EBEF; --fs-brand-150:#D8DFE4;
  --fs-brand-200:#C2CED6; --fs-brand-300:#A4B5C1; --fs-brand-400:#8FA4B3;
  --fs-brand-500:#7D95A6; --fs-brand-600:#627E93; --fs-brand-700:#506A7C;
  --fs-brand-800:#3C5262; --fs-brand-900:#2B3D4A; --fs-brand-950:#1C2831;

  --fs-bone:#FAF8F5; --fs-bone-deep:#F2EFEA; --fs-rule:#E4DFD8;
  --fs-muted:#77706A; --fs-ink:#242628;

  --fs-font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --fs-font-sans:"Jost",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;

  --fs-section:clamp(4.5rem,11vw,10rem);
  --fs-block:clamp(3rem,7vw,6rem);
  --fs-gutter:clamp(1.25rem,4vw,3.5rem);
  --fs-wide:90rem;
  --fs-text:58rem;
  --fs-narrow:42rem;

  --fs-ease:cubic-bezier(.22,1,.36,1);
  --fs-fast:180ms; --fs-base:400ms; --fs-slow:700ms; --fs-reveal:1100ms;

  /* 64px. The old 84px bar was the single biggest reason the header felt
     heavy — it came from stacking the monogram above the wordmark. */
  --fs-header-h:4rem;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--fs-bone);
  color:var(--fs-ink);
  font-family:var(--fs-font-sans);
  font-size:.9375rem;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--fs-font-display);
  font-weight:300;
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}

p{margin:0}
img,svg,video{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}

::selection{background:var(--fs-brand-150);color:var(--fs-ink)}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--fs-brand-800);
  outline-offset:3px;
}

.fs-skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--fs-ink);color:var(--fs-bone);padding:1rem 1.5rem;
}
.fs-skip:focus{left:0}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}

/* --------------------------------------------------------------------------
   Typography utilities
   -------------------------------------------------------------------------- */

.fs-label{
  font-family:var(--fs-font-sans);
  font-size:.6875rem;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.18em;
  line-height:1;
}

.fs-display-xl{font-size:clamp(2.75rem,7vw,6rem)}
.fs-display-lg{font-size:clamp(2.125rem,5vw,4rem)}
.fs-display-md{font-size:clamp(1.75rem,3.4vw,2.75rem)}
.fs-display-sm{font-size:clamp(1.375rem,2.4vw,1.875rem)}

.fs-italic{font-style:italic;font-weight:300}
.fs-muted{color:var(--fs-muted)}
.fs-measure{max-width:62ch}
.fs-center{text-align:center}

/* Ornament echoing the botanical curl in the mark. Used sparingly —
   twice per page at most, or it stops being special. */
.fs-ornament{
  display:block;width:2.25rem;height:auto;margin-inline:auto;
  color:var(--fs-brand-400);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.fs-wrap{max-width:var(--fs-wide);margin-inline:auto;padding-inline:var(--fs-gutter)}
.fs-wrap--text{max-width:var(--fs-text)}
.fs-wrap--narrow{max-width:var(--fs-narrow)}
.fs-section{padding-block:var(--fs-section)}
.fs-block{padding-block:var(--fs-block)}
.fs-bleed{width:100%}

.fs-section-head{text-align:center;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.fs-section-head p.fs-measure{margin:1.5rem auto 0;color:var(--fs-muted)}

/* Eyebrow flanked by hairlines. */
.fs-eyebrow{
  display:flex;align-items:center;justify-content:center;gap:1.25rem;
  color:var(--fs-brand-700);margin-bottom:1.5rem;
}
.fs-eyebrow::before,.fs-eyebrow::after{
  content:"";height:1px;width:clamp(1.5rem,5vw,3.5rem);background:var(--fs-brand-200);
}
.fs-eyebrow--left{justify-content:flex-start}
.fs-eyebrow--left::before{display:none}

/* --------------------------------------------------------------------------
   Placeholder imagery
   Campaign photography does not exist yet. These are deliberately abstract
   so composition can be judged without implying art direction.
   -------------------------------------------------------------------------- */

.fs-ph{
  position:relative;overflow:hidden;background:var(--fs-brand-100);
  background-image:
    radial-gradient(120% 90% at 22% 8%,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 55%),
    radial-gradient(90% 70% at 82% 88%,rgba(43,61,74,.28) 0%,rgba(43,61,74,0) 60%),
    linear-gradient(152deg,#D8DFE4 0%,#A4B5C1 38%,#7D95A6 68%,#506A7C 100%);
}
.fs-ph--warm{
  background-image:
    radial-gradient(110% 80% at 76% 14%,rgba(255,255,255,.8) 0%,rgba(255,255,255,0) 58%),
    linear-gradient(198deg,#F2EFEA 0%,#E4DFD8 34%,#C2CED6 72%,#8FA4B3 100%);
}
.fs-ph--deep{
  background-image:
    radial-gradient(130% 100% at 12% 92%,rgba(125,149,166,.5) 0%,rgba(125,149,166,0) 62%),
    linear-gradient(168deg,#506A7C 0%,#3C5262 46%,#2B3D4A 78%,#1C2831 100%);
}
.fs-ph--mist{
  background-image:
    radial-gradient(100% 80% at 40% 20%,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 60%),
    linear-gradient(210deg,#FAF8F5 0%,#E7EBEF 45%,#C2CED6 100%);
}
.fs-ph[data-note]::after{
  content:attr(data-note);position:absolute;left:1.25rem;bottom:1.1rem;
  font-size:.5625rem;text-transform:uppercase;letter-spacing:.2em;
  color:rgba(250,248,245,.6);
}
.fs-ph--warm[data-note]::after,.fs-ph--mist[data-note]::after{color:rgba(36,38,40,.38)}

/* --------------------------------------------------------------------------
   Announcement + header
   -------------------------------------------------------------------------- */

.fs-announce{
  background:var(--fs-brand-900);color:var(--fs-bone);
  text-align:center;padding:.6875rem 1rem;position:relative;z-index:60;
}
.fs-announce .fs-label{opacity:.92}

.fs-header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,248,245,.86);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color var(--fs-base) var(--fs-ease),
             background var(--fs-base) var(--fs-ease);
}
.fs-header.is-stuck{border-bottom-color:var(--fs-rule)}

/* Over a dark hero the header inverts until the page scrolls.

   Deliberately still `sticky`, not `fixed`. Fixed positioning pulled the bar
   out of flow to top:0, where it landed underneath the announcement strip and
   the entire navigation was drawn behind it. Staying in flow keeps the two
   stacked correctly; the hero is pulled up under the bar with .fs-hero--flush
   instead. */
.fs-header--overlay{
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  color:var(--fs-bone);
}
.fs-header--overlay.is-stuck{
  background:rgba(250,248,245,.86);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  color:var(--fs-ink);
}

/* Three zones, wordmark optically centred by the 1fr / auto / 1fr grid.
   Navigation lives left, utilities right. Mixing the two — a "Bespoke" link
   sitting beside Search and Bag — is what made the old header read as
   scattered: nothing told you which side was "where to go" and which was
   "what to do". */
.fs-header__bar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;
  min-height:var(--fs-header-h);
}
.fs-header__left{display:flex;align-items:center;gap:2rem;min-width:0}
.fs-header__right{display:flex;align-items:center;justify-content:flex-end;gap:1.75rem}

.fs-nav{display:flex;gap:2rem;align-items:center}

.fs-nav a,.fs-util{
  position:relative;padding-block:.5rem;display:inline-block;
  font-family:var(--fs-font-sans);font-size:.6875rem;
  text-transform:uppercase;letter-spacing:.18em;line-height:1;white-space:nowrap;
}
.fs-nav a::after,.fs-util::after{
  content:"";position:absolute;left:0;right:0;bottom:.125rem;height:1px;
  background:currentColor;opacity:.5;
  transform:scaleX(0);transform-origin:right;
  transition:transform var(--fs-base) var(--fs-ease);
}
.fs-nav a:hover::after,.fs-nav a[aria-current]::after,
.fs-util:hover::after{transform:scaleX(1);transform-origin:left}

/* Wordmark set in live type rather than an image: sharper at every size,
   scales without a 2x asset, and keeps the bar slim. The monogram is not in
   the header at all — stacking mark over wordmark forced the bar to ~84px,
   which no luxury retailer does in a sticky header. */
.fs-wordmark{
  font-family:var(--fs-font-display);font-size:1.125rem;font-weight:400;
  letter-spacing:.36em;text-indent:.36em;line-height:1;white-space:nowrap;
  display:block;
}
.fs-header:not(.fs-header--overlay) .fs-wordmark,
.fs-header--overlay.is-stuck .fs-wordmark{color:var(--fs-brand-800)}

/* Bag count is permanent — including mobile. Hiding cart access behind a
   burger loses the one control a shopper needs at all times. */
.fs-bag{display:inline-flex;align-items:baseline;gap:.375rem}
.fs-bag__count{font-variant-numeric:tabular-nums;letter-spacing:.1em}
.fs-bag[data-count="0"] .fs-bag__count{opacity:.5}

.fs-util-icon{display:none;padding:.5rem;line-height:0}
.fs-util-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.1}

.fs-burger{display:none;align-items:center;gap:.6875rem;padding:.5rem 0}
.fs-burger-lines{display:inline-flex;flex-direction:column;gap:5px;width:18px}
.fs-burger-lines span{display:block;height:1px;background:currentColor}

/* --------------------------------------------------------------------------
   Collections flyout

   A single quiet panel, not a mega-menu. With a curated catalogue there is
   nothing to merchandise into columns, and a large panel over a small
   collection reads as padding.
   -------------------------------------------------------------------------- */

.fs-has-flyout{position:static}

.fs-flyout{
  position:absolute;left:0;right:0;top:100%;z-index:45;
  background:var(--fs-bone);border-top:1px solid var(--fs-rule);
  border-bottom:1px solid var(--fs-rule);
  padding-block:clamp(2rem,4vw,3.25rem);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--fs-base) var(--fs-ease),
             transform var(--fs-base) var(--fs-ease),
             visibility 0s linear var(--fs-base);
}
.fs-flyout.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.fs-flyout__inner{display:flex;gap:clamp(2rem,6vw,5rem);flex-wrap:wrap}
.fs-flyout__col{min-width:11rem}
.fs-flyout__col h3{
  font-family:var(--fs-font-sans);font-size:.6875rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.18em;color:var(--fs-muted);
  margin-bottom:1.25rem;
}
.fs-flyout__col a{
  display:block;font-family:var(--fs-font-display);font-size:1.375rem;
  font-weight:300;line-height:1.45;color:var(--fs-ink);
  transition:color var(--fs-base) var(--fs-ease);
}
.fs-flyout__col a:hover{color:var(--fs-brand-700)}

/* --------------------------------------------------------------------------
   Search overlay

   Full-screen rather than a page navigation. Searching is a momentary act;
   sending someone to a separate URL and back loses their place.
   -------------------------------------------------------------------------- */

.fs-search{
  position:fixed;inset:0;z-index:110;background:var(--fs-bone);
  display:flex;flex-direction:column;padding:var(--fs-gutter);
  opacity:0;visibility:hidden;
  transition:opacity var(--fs-base) var(--fs-ease),visibility 0s linear var(--fs-base);
}
.fs-search.is-open{opacity:1;visibility:visible;transition-delay:0s}
.fs-search__top{display:flex;justify-content:flex-end;min-height:var(--fs-header-h);align-items:center}
.fs-search__body{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  max-width:52rem;margin-inline:auto;width:100%;
}
.fs-search__field{display:flex;align-items:center;gap:1rem;border-bottom:1px solid var(--fs-ink)}
.fs-search__field input{
  flex:1;background:transparent;border:0;padding:.75rem 0;
  font-family:var(--fs-font-display);font-size:clamp(1.75rem,5vw,3rem);
  font-weight:300;color:var(--fs-ink);
}
.fs-search__field input::placeholder{color:var(--fs-brand-300)}
.fs-search__field input:focus{outline:none}
.fs-search__hint{margin-top:1.5rem;color:var(--fs-muted)}

/* --------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */

.fs-drawer{
  position:fixed;inset:0;z-index:100;
  background:var(--fs-bone);
  display:flex;flex-direction:column;
  padding:var(--fs-gutter);
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform var(--fs-slow) var(--fs-ease),visibility 0s linear var(--fs-slow);
}
.fs-drawer.is-open{transform:none;visibility:visible;transition-delay:0s}

.fs-drawer-top{display:flex;justify-content:space-between;align-items:center;min-height:var(--fs-header-h)}
.fs-drawer-nav{
  display:flex;flex-direction:column;gap:.25rem;
  margin-top:clamp(2rem,8vh,4rem);
}
/* Typography only. The staggered entrance lives in the core/navigation
   section below, gated on .js so it covers both raw markup and block markup
   without hiding anything when JavaScript is unavailable. */
.fs-drawer-nav a{
  font-family:var(--fs-font-display);font-size:clamp(2rem,9vw,3rem);
  font-weight:300;line-height:1.25;letter-spacing:-.015em;
  padding-block:.375rem;
}

.fs-drawer-foot{
  margin-top:auto;padding-top:2rem;border-top:1px solid var(--fs-rule);
  display:flex;gap:1.5rem;flex-wrap:wrap;color:var(--fs-muted);
}

body.fs-locked{overflow:hidden}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.fs-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.75rem;
  padding:1.0625rem 2.5rem;border:1px solid transparent;
  font-family:var(--fs-font-sans);font-size:.6875rem;
  text-transform:uppercase;letter-spacing:.18em;line-height:1;
  transition:background var(--fs-base) var(--fs-ease),
             color var(--fs-base) var(--fs-ease),
             border-color var(--fs-base) var(--fs-ease);
}
.fs-btn--solid{background:var(--fs-brand-800);color:var(--fs-bone)}
.fs-btn--solid:hover{background:var(--fs-brand-900)}
.fs-btn--outline{border-color:currentColor}
.fs-btn--outline:hover{background:var(--fs-ink);color:var(--fs-bone);border-color:var(--fs-ink)}
.fs-btn--ghost{border-color:rgba(250,248,245,.45);color:var(--fs-bone)}
.fs-btn--ghost:hover{background:var(--fs-bone);color:var(--fs-ink);border-color:var(--fs-bone)}
.fs-btn--block{width:100%}

/* Text link with a wiping underline. */
.fs-link{
  position:relative;display:inline-block;padding-bottom:.25rem;
  font-size:.6875rem;text-transform:uppercase;letter-spacing:.18em;
}
.fs-link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform-origin:right;transition:transform var(--fs-base) var(--fs-ease);
}
.fs-link:hover::after{transform:scaleX(0);transform-origin:left}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.fs-hero{position:relative;min-height:100svh;display:grid;align-items:end;isolation:isolate}

/* Pulls the hero up so the transparent header sits over the imagery rather
   than on a band above it. Pairs with .fs-header--overlay. */
.fs-hero--flush{margin-top:calc(-1 * var(--fs-header-h))}
.fs-hero__media{position:absolute;inset:0;z-index:-2}
.fs-hero__media .fs-ph{position:absolute;inset:0}
.fs-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(28,40,49,.72) 0%,rgba(28,40,49,.24) 44%,rgba(28,40,49,0) 74%);
}
.fs-hero__copy{
  position:relative;color:var(--fs-bone);
  padding-block:clamp(3.5rem,9vh,7rem);
  max-width:64rem;
}
.fs-hero__copy .fs-eyebrow{color:rgba(250,248,245,.82);justify-content:flex-start}
.fs-hero__copy .fs-eyebrow::before{display:none}
.fs-hero__copy .fs-eyebrow::after{background:rgba(250,248,245,.35)}
.fs-hero h1{max-width:15ch}
.fs-hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:clamp(2rem,4vw,3rem)}

/* Scroll cue */
.fs-scroll-cue{
  position:absolute;left:50%;bottom:1.75rem;translate:-50% 0;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
  color:rgba(250,248,245,.7);
}
.fs-scroll-cue::after{
  content:"";width:1px;height:2.5rem;background:currentColor;
  transform-origin:top;animation:fs-cue 2.6s var(--fs-ease) infinite;
}
@keyframes fs-cue{
  0%{transform:scaleY(0);opacity:0}
  40%{transform:scaleY(1);opacity:1}
  100%{transform:scaleY(1);opacity:0}
}

/* --------------------------------------------------------------------------
   Product cards
   -------------------------------------------------------------------------- */

.fs-grid{display:grid;gap:clamp(1.5rem,2.5vw,2.5rem) clamp(1rem,2vw,2rem)}
.fs-grid--3{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.fs-grid--4{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.fs-grid--2{grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}

.fs-card{display:flex;flex-direction:column}
.fs-card__media{position:relative;overflow:hidden;background:var(--fs-bone-deep)}
.fs-card__media .fs-ph{aspect-ratio:3/4;transition:transform 1.3s var(--fs-ease),opacity var(--fs-slow) var(--fs-ease)}

/* Second image cross-fades in on hover — the standard fashion-retail gesture. */
.fs-card__media .fs-ph--alt{position:absolute;inset:0;opacity:0}
.fs-card:hover .fs-ph--alt{opacity:1}
.fs-card:hover .fs-ph{transform:scale(1.04)}

.fs-card__tag{
  position:absolute;top:1rem;left:1rem;z-index:2;
  background:var(--fs-bone);color:var(--fs-ink);padding:.5rem .75rem;
}
.fs-card__tag--dark{background:var(--fs-brand-900);color:var(--fs-bone)}

/* No quick-view panel. It is a retailer device for moving volume, and on a
   curated house collection it puts a grey slab over the photograph — the one
   thing the page exists to show. The card links straight to the product. */

.fs-card__body{padding-top:1.375rem;display:flex;flex-direction:column;gap:.4375rem}
.fs-card__name{font-family:var(--fs-font-display);font-size:1.4375rem;line-height:1.2;font-weight:300}
.fs-card__meta{color:var(--fs-muted);font-size:.8125rem;line-height:1.5}
.fs-card__price{font-size:.8125rem;letter-spacing:.05em;margin-top:.125rem}
.fs-card__price del{color:var(--fs-muted);margin-right:.5rem}

/* Editorial offset — every third card drops, breaking the grid's regularity. */
.fs-grid--offset > *:nth-child(3n+2){margin-top:clamp(1.5rem,5vw,4rem)}

/* --------------------------------------------------------------------------
   Editorial split
   -------------------------------------------------------------------------- */

.fs-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:clamp(2rem,6vw,6rem);align-items:center}
.fs-split__media .fs-ph{aspect-ratio:4/5}
.fs-split__copy h2{margin-bottom:1.75rem}
.fs-split__copy p{color:var(--fs-muted);margin-bottom:1.25rem;max-width:52ch}
.fs-split--reverse .fs-split__media{order:2}

/* --------------------------------------------------------------------------
   Lookbook
   -------------------------------------------------------------------------- */

.fs-lookbook{background:var(--fs-bone-deep)}
.fs-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1px;background:var(--fs-rule)}
.fs-strip .fs-ph{aspect-ratio:2/3}

/* Horizontal scroll variant for narrow screens. */
.fs-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(14rem,22vw);
  gap:1px;overflow-x:auto;scroll-snap-type:x mandatory;
  background:var(--fs-rule);
  scrollbar-width:thin;
}
.fs-rail > *{scroll-snap-align:start}
.fs-rail .fs-ph{aspect-ratio:2/3}

/* --------------------------------------------------------------------------
   Bands
   -------------------------------------------------------------------------- */

.fs-band{background:var(--fs-brand-900);color:var(--fs-bone);text-align:center}
.fs-band .fs-eyebrow{color:var(--fs-brand-300)}
.fs-band .fs-eyebrow::before,.fs-band .fs-eyebrow::after{background:var(--fs-brand-700)}
.fs-band p{color:rgba(250,248,245,.76);margin:0 auto 2.5rem;max-width:48ch}
.fs-band .fs-ornament{color:var(--fs-brand-600)}

.fs-band--image{position:relative;isolation:isolate;background:none}
.fs-band--image .fs-ph{position:absolute;inset:0;z-index:-2}
.fs-band--image::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(28,40,49,.62)}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.fs-field{display:flex;flex-direction:column;gap:.625rem;margin-bottom:1.75rem}
.fs-field label{color:var(--fs-muted)}
.fs-field input,.fs-field textarea,.fs-field select{
  font-family:var(--fs-font-sans);font-size:.9375rem;color:var(--fs-ink);
  background:transparent;border:0;border-bottom:1px solid var(--fs-rule);
  padding:.75rem 0;transition:border-color var(--fs-base) var(--fs-ease);
}
.fs-field input:focus,.fs-field textarea:focus,.fs-field select:focus{
  outline:none;border-bottom-color:var(--fs-brand-700);
}
.fs-field textarea{resize:vertical;min-height:7rem}

.fs-subscribe{display:flex;max-width:30rem;margin-inline:auto;border-bottom:1px solid var(--fs-ink)}
.fs-subscribe input{
  flex:1;background:transparent;border:0;padding:.875rem .25rem;
  font-family:var(--fs-font-sans);font-size:.875rem;color:var(--fs-ink);
}
.fs-subscribe input::placeholder{color:var(--fs-muted)}
.fs-subscribe input:focus{outline:none}
.fs-subscribe button{
  padding:.875rem .5rem;font-size:.6875rem;
  text-transform:uppercase;letter-spacing:.18em;color:var(--fs-brand-800);
}

/* --------------------------------------------------------------------------
   Product detail
   -------------------------------------------------------------------------- */

.fs-product{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4.5rem)}
@media (min-width:60rem){
  .fs-product{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}
  .fs-product__info{position:sticky;top:calc(var(--fs-header-h) + 2rem)}
}
.fs-product__gallery{display:grid;gap:.5rem}
.fs-product__gallery .fs-ph{aspect-ratio:3/4}
@media (min-width:48rem){
  .fs-product__gallery{grid-template-columns:1fr 1fr}
  .fs-product__gallery > *:first-child{grid-column:1 / -1}
}

.fs-product__price{font-size:1.0625rem;letter-spacing:.05em;margin-top:1rem}
.fs-product__lede{color:var(--fs-muted);margin-block:1.5rem;max-width:46ch}

.fs-swatches{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:.875rem}
.fs-swatch{
  min-width:3.25rem;padding:.75rem .875rem;border:1px solid var(--fs-rule);
  font-size:.75rem;letter-spacing:.08em;text-align:center;
  transition:border-color var(--fs-base) var(--fs-ease),background var(--fs-base) var(--fs-ease);
}
.fs-swatch:hover{border-color:var(--fs-brand-600)}
.fs-swatch[aria-pressed="true"]{border-color:var(--fs-ink);background:var(--fs-ink);color:var(--fs-bone)}
.fs-swatch[disabled]{opacity:.38;cursor:not-allowed;text-decoration:line-through}

.fs-spec{border-top:1px solid var(--fs-rule);margin-top:2.5rem}
.fs-spec details{border-bottom:1px solid var(--fs-rule)}
.fs-spec summary{
  list-style:none;cursor:pointer;padding:1.25rem 0;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.fs-spec summary::-webkit-details-marker{display:none}
.fs-spec summary::after{content:"+";font-size:1rem;color:var(--fs-muted);transition:transform var(--fs-base) var(--fs-ease)}
.fs-spec details[open] summary::after{content:"−"}
.fs-spec .fs-spec__body{padding-bottom:1.5rem;color:var(--fs-muted);max-width:52ch}

.fs-note{
  display:flex;gap:.75rem;align-items:flex-start;
  background:var(--fs-brand-50);padding:1rem 1.125rem;margin-top:1.75rem;
  color:var(--fs-brand-800);font-size:.8125rem;line-height:1.55;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.fs-footer{border-top:1px solid var(--fs-rule);padding-block:clamp(3.5rem,7vw,5.5rem) 2rem;margin-top:0}
.fs-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:2.75rem clamp(1.5rem,4vw,3rem)}
.fs-footer h2,.fs-footer h3{font-family:var(--fs-font-sans);font-size:.6875rem;text-transform:uppercase;letter-spacing:.18em;font-weight:400;color:var(--fs-brand-700);margin-bottom:1.375rem}
.fs-footer li{margin-bottom:.75rem}
.fs-footer li a{color:var(--fs-muted);font-size:.8125rem;transition:color var(--fs-base) var(--fs-ease)}
.fs-footer li a:hover{color:var(--fs-ink)}
.fs-footer__base{
  margin-top:clamp(2.75rem,5vw,4rem);padding-top:1.75rem;border-top:1px solid var(--fs-rule);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  color:var(--fs-muted);font-size:.75rem;
}
.fs-pay{display:flex;gap:.5rem;flex-wrap:wrap}
.fs-pay span{border:1px solid var(--fs-rule);padding:.4375rem .6875rem;font-size:.5625rem;text-transform:uppercase;letter-spacing:.14em}

/* --------------------------------------------------------------------------
   Reveals
   Gated on .js so content is visible unless JavaScript is confirmed running.
   Without the guard, a script failure leaves the page blank below the fold.
   -------------------------------------------------------------------------- */

.js .fs-reveal{opacity:0;transform:translateY(24px);
  transition:opacity var(--fs-reveal) var(--fs-ease),transform var(--fs-reveal) var(--fs-ease)}
.js .fs-reveal.is-in{opacity:1;transform:none}
.js .fs-reveal[data-delay="1"]{transition-delay:110ms}
.js .fs-reveal[data-delay="2"]{transition-delay:220ms}
.js .fs-reveal[data-delay="3"]{transition-delay:330ms}

/* --------------------------------------------------------------------------
   WooCommerce
   Restyled to match, rather than left in Woo's default look.
   -------------------------------------------------------------------------- */

.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border:0;border-left:2px solid var(--fs-brand-700);
  background:var(--fs-brand-50);color:var(--fs-ink);
  padding:1rem 1.25rem;font-size:.875rem;border-radius:0;
}
.woocommerce-error{border-left-color:#9B3024;background:#FBF3F2}

.woocommerce ul.products{display:grid;gap:clamp(1.5rem,2.5vw,2.5rem);grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));margin:0}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;text-align:left}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--fs-font-display);font-size:1.4375rem;font-weight:300;line-height:1.2;padding:1.25rem 0 .25rem;
}
.woocommerce ul.products li.product .price{color:var(--fs-ink);font-size:.8125rem;letter-spacing:.05em;font-family:var(--fs-font-sans)}
.woocommerce ul.products li.product .price del{color:var(--fs-muted);opacity:1}

.woocommerce span.onsale{
  background:var(--fs-brand-900);color:var(--fs-bone);border-radius:0;
  font-family:var(--fs-font-sans);font-size:.5625rem;text-transform:uppercase;letter-spacing:.16em;
  min-height:0;min-width:0;line-height:1;padding:.5rem .75rem;top:1rem;left:1rem;right:auto;margin:0;
}

.woocommerce #respond input#submit,.woocommerce a.button,
.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit.alt,.woocommerce a.button.alt,
.woocommerce button.button.alt,.woocommerce input.button.alt{
  background:var(--fs-brand-800);color:var(--fs-bone);border-radius:0;
  font-family:var(--fs-font-sans);font-size:.6875rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.18em;line-height:1;
  padding:1.0625rem 2.5rem;transition:background var(--fs-base) var(--fs-ease);
}
.woocommerce #respond input#submit:hover,.woocommerce a.button:hover,
.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{
  background:var(--fs-brand-900);color:var(--fs-bone);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text{
  border:0;border-bottom:1px solid var(--fs-rule);background:transparent;
  border-radius:0;padding:.75rem 0;font-family:var(--fs-font-sans);font-size:.9375rem;
}
.woocommerce form .form-row label{color:var(--fs-muted);font-size:.8125rem}

.woocommerce table.shop_table{border:0;border-radius:0}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{border-color:var(--fs-rule);padding:1.125rem .75rem}
.woocommerce table.shop_table th{
  font-family:var(--fs-font-sans);font-size:.6875rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.18em;color:var(--fs-muted);
}

.woocommerce-checkout #payment{background:var(--fs-bone-deep);border-radius:0}
.woocommerce-checkout #payment div.payment_box{background:var(--fs-brand-50);border-radius:0}
.woocommerce-checkout #payment div.payment_box::before{display:none}

.woocommerce div.product .product_title{font-family:var(--fs-font-display);font-weight:300}
.woocommerce div.product p.price{color:var(--fs-ink);font-family:var(--fs-font-sans);font-size:1.0625rem;letter-spacing:.05em}
.woocommerce .quantity .qty{border:1px solid var(--fs-rule);border-radius:0;padding:.75rem .5rem;background:transparent}

/* --------------------------------------------------------------------------
   core/navigation

   The Navigation block wraps links in ul > li, so the flex layout has to move
   onto the container and the stagger selectors have to reach through the li.
   Both raw markup and block markup are supported so the static previews and
   WordPress render identically.
   -------------------------------------------------------------------------- */

/* wp_nav_menu() emits nav > ul > li > a; core/navigation emits its own
   container class. Both are supported, along with the bare <a> children used
   by the static previews. */
.fs-nav ul,
.fs-nav .wp-block-navigation__container{
  display:flex;align-items:center;gap:2rem;
  margin:0;padding:0;list-style:none;
}
.fs-nav li{margin:0}
.fs-nav .wp-block-navigation-item__content{
  font-family:var(--fs-font-sans);font-size:.6875rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.18em;line-height:1;
  position:relative;display:inline-block;padding-block:.5rem;
  text-decoration:none;
}
.fs-nav .wp-block-navigation-item__content::after{
  content:"";position:absolute;left:0;right:0;bottom:.125rem;height:1px;
  background:currentColor;opacity:.55;
  transform:scaleX(0);transform-origin:right;
  transition:transform var(--fs-base) var(--fs-ease);
}
.fs-nav .wp-block-navigation-item__content:hover::after,
.fs-nav .current-menu-item .wp-block-navigation-item__content::after{
  transform:scaleX(1);transform-origin:left;
}
/* The block prints its own gap via inline style; ours wins. */
.fs-nav.wp-block-navigation{gap:2rem}

.fs-drawer-nav ul,
.fs-drawer-nav .wp-block-navigation__container{
  display:flex;flex-direction:column;gap:.25rem;
  margin:0;padding:0;list-style:none;
}
.fs-drawer-nav li{margin:0}
.fs-drawer-nav .wp-block-navigation-item__content{
  font-family:var(--fs-font-display);font-size:clamp(2rem,9vw,3rem);
  font-weight:300;line-height:1.25;letter-spacing:-.015em;
  padding-block:.375rem;text-decoration:none;display:inline-block;
}

/* Stagger works for raw <a> children and for block <li><a>. */
.js .fs-drawer .fs-drawer-nav > a,
.js .fs-drawer .fs-drawer-nav li{
  opacity:0;transform:translateY(14px);
  transition:opacity var(--fs-slow) var(--fs-ease),transform var(--fs-slow) var(--fs-ease);
}
.fs-drawer.is-open .fs-drawer-nav > a,
.fs-drawer.is-open .fs-drawer-nav li{opacity:1;transform:none}

.fs-drawer.is-open .fs-drawer-nav > a:nth-child(1),
.fs-drawer.is-open .fs-drawer-nav li:nth-child(1){transition-delay:120ms}
.fs-drawer.is-open .fs-drawer-nav > a:nth-child(2),
.fs-drawer.is-open .fs-drawer-nav li:nth-child(2){transition-delay:180ms}
.fs-drawer.is-open .fs-drawer-nav > a:nth-child(3),
.fs-drawer.is-open .fs-drawer-nav li:nth-child(3){transition-delay:240ms}
.fs-drawer.is-open .fs-drawer-nav > a:nth-child(4),
.fs-drawer.is-open .fs-drawer-nav li:nth-child(4){transition-delay:300ms}
.fs-drawer.is-open .fs-drawer-nav > a:nth-child(5),
.fs-drawer.is-open .fs-drawer-nav li:nth-child(5){transition-delay:360ms}
.fs-drawer.is-open .fs-drawer-nav > a:nth-child(6),
.fs-drawer.is-open .fs-drawer-nav li:nth-child(6){transition-delay:420ms}

/* --------------------------------------------------------------------------
   WooCommerce — archive and single surfaces
   -------------------------------------------------------------------------- */

.woocommerce-products-header{text-align:center;margin-bottom:clamp(2.5rem,5vw,4rem)}
.woocommerce-products-header__title,
.woocommerce .page-title{
  font-family:var(--fs-font-display);font-weight:300;
  font-size:clamp(2.125rem,5vw,4rem);line-height:1.08;letter-spacing:-.015em;
}
.woocommerce-products-header .term-description{color:var(--fs-muted);max-width:62ch;margin:1.5rem auto 0}

.woocommerce .woocommerce-breadcrumb{
  font-size:.6875rem;text-transform:uppercase;letter-spacing:.18em;
  color:var(--fs-muted);margin-bottom:2.5rem;
}
.woocommerce .woocommerce-breadcrumb a{color:var(--fs-muted)}
.woocommerce .woocommerce-breadcrumb a:hover{color:var(--fs-ink)}

.woocommerce .woocommerce-result-count{color:var(--fs-muted);font-size:.8125rem}
.woocommerce .woocommerce-ordering select{
  border:0;border-bottom:1px solid var(--fs-rule);background:transparent;
  font-family:var(--fs-font-sans);font-size:.8125rem;padding:.5rem 0;border-radius:0;
}

.woocommerce div.product div.images{margin-bottom:2rem}
.woocommerce div.product div.summary{margin-bottom:2rem}
.woocommerce div.product .woocommerce-product-details__short-description{
  color:var(--fs-muted);max-width:46ch;margin-block:1.25rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin-bottom:2rem}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border-color:var(--fs-rule)}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent;border:0;border-radius:0;margin:0 2rem 0 0;padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:var(--fs-font-sans);font-size:.6875rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.18em;color:var(--fs-muted);padding:1rem 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--fs-ink)}

.woocommerce .related > h2,
.woocommerce .upsells > h2{
  font-family:var(--fs-font-display);font-weight:300;
  font-size:clamp(1.75rem,3.4vw,2.75rem);text-align:center;
  margin-bottom:clamp(2rem,4vw,3rem);
}

.woocommerce nav.woocommerce-pagination ul{border:0;margin-top:3rem}
.woocommerce nav.woocommerce-pagination ul li{border:0;margin:0 .25rem}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  font-size:.8125rem;letter-spacing:.08em;padding:.625rem .875rem;border-radius:0;
}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--fs-ink);color:var(--fs-bone)}

/* --------------------------------------------------------------------------
   WooCommerce — block cart and checkout

   New installs ship the block-based Cart and Checkout, which emit .wc-block-*
   markup rather than the classic table. Both are styled so the store looks
   right whichever the store ends up using.
   -------------------------------------------------------------------------- */

.wc-block-components-button:not(.is-link){
  background:var(--fs-brand-800);color:var(--fs-bone);border-radius:0;
  font-family:var(--fs-font-sans);font-size:.6875rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.18em;line-height:1;
  padding:1.0625rem 2.5rem;min-height:0;
  transition:background var(--fs-base) var(--fs-ease);
}
.wc-block-components-button:not(.is-link):hover{background:var(--fs-brand-900)}

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-select .wc-block-components-select__select,
.wc-block-components-textarea{
  border:0;border-bottom:1px solid var(--fs-rule);border-radius:0;
  background:transparent;font-family:var(--fs-font-sans);font-size:.9375rem;
  padding:.75rem 0;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select .wc-block-components-select__select:focus{
  outline:none;border-bottom-color:var(--fs-brand-700);box-shadow:none;
}
.wc-block-components-text-input label{color:var(--fs-muted)}

.wc-block-components-title,
.wc-block-cart__totals-title,
.wc-block-checkout__form h2,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title{
  font-family:var(--fs-font-sans)!important;font-size:.6875rem!important;
  font-weight:400!important;text-transform:uppercase;letter-spacing:.18em;
  color:var(--fs-muted);
}

.wc-block-components-product-name{
  font-family:var(--fs-font-display);font-size:1.25rem;font-weight:300;line-height:1.25;
}
.wc-block-components-totals-item__value{font-family:var(--fs-font-sans);letter-spacing:.04em}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{font-size:1.0625rem}

.wc-block-cart-items__row,
.wc-block-components-totals-wrapper{border-color:var(--fs-rule)!important}
.wp-block-woocommerce-checkout-order-summary-block{
  background:var(--fs-bone-deep);border:0;border-radius:0;padding:1.75rem;
}
.wc-block-components-radio-control__option,
.wc-block-components-checkout-step{border-radius:0}
.wc-block-components-notice-banner{border-radius:0;border-left-width:2px}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width:64rem){
  .fs-nav{display:none}
  .fs-burger{display:inline-flex}
  .fs-flyout{display:none}
}

@media (max-width:48rem){
  :root{--fs-header-h:3.5rem}

  /* Utilities collapse to icons, but the bag keeps its count — that number is
     the only piece of state a shopper tracks across the whole site. */
  .fs-header__right{gap:.75rem}
  .fs-util--text{display:none}
  .fs-util-icon{display:inline-block}
  .fs-bag{font-size:.625rem;letter-spacing:.12em}
  .fs-burger span:not(.fs-burger-lines){display:none}

  .fs-hero{min-height:88svh}
  .fs-split--reverse .fs-split__media{order:0}
  .fs-grid--offset > *:nth-child(3n+2){margin-top:0}
  .fs-wordmark{font-size:.875rem;letter-spacing:.26em;text-indent:.26em}
}

/* --------------------------------------------------------------------------
   Preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .js .fs-reveal{opacity:1;transform:none}
  .fs-scroll-cue::after{animation:none}
}

@media print{
  .fs-header,.fs-announce,.fs-drawer,.fs-scroll-cue,.fs-footer{display:none}
  body{background:#fff;color:#000}
}