/* =====================================================================
   STOCKFLOW V2 — shared foundation for every new page.
   "Cinematic for the experience. Minimalist for the transaction."
   Dark sections (.sf-dark) carry the brand; light sections (.sf-light)
   carry catalog, prices, forms and policies. The V19 homepage keeps its
   own stylesheet until Phase 2 replaces it.
   ===================================================================== */

/* fonts served from this site, same files and ranges as V19 */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-display:swap;font-weight:400 900;src:url(fonts/bodoni-moda-latin-ext-opsz-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bodoni Moda";font-style:normal;font-display:swap;font-weight:400 900;src:url(fonts/bodoni-moda-latin-opsz-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-display:swap;font-weight:400 900;src:url(fonts/bodoni-moda-latin-ext-opsz-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-display:swap;font-weight:400 900;src:url(fonts/bodoni-moda-latin-opsz-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/hanken-grotesk-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:italic;font-display:swap;font-weight:100 900;src:url(fonts/hanken-grotesk-latin-ext-wght-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:italic;font-display:swap;font-weight:100 900;src:url(fonts/hanken-grotesk-latin-wght-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- tokens ---------- */
:root{
  /* brand: the V19 values are kept where the proposed palette is a near-match */
  --sf-void:#050607;        /* cinematic opening only */
  --sf-obsidian:#101419;    /* dark surfaces */
  --sf-obsidian-2:#171C22;
  --sf-gold:#C8A87C;        /* = V19 --gold; proposed #C5A875 is visually the same */
  --sf-gold-hi:#E8D3A6;
  --sf-gold-dp:#8A6E43;
  --sf-teal-glow:#2FD9C0;   /* V19 signature teal: accents on dark only */
  --sf-teal:#247E80;        /* buttons and large text on light (4.3:1 on ivory) */
  --sf-teal-ink:#1D6B6D;    /* small text and links on light (5.6:1 on ivory) */
  --sf-ivory:#F5F3EE;
  --sf-paper:#FBFAF7;       /* cards on ivory */
  --sf-slate:#687276;       /* 18px+ only on ivory (4.45:1) */
  --sf-slate-ink:#5A6368;   /* small secondary text on ivory (5.5:1) */
  --sf-silver:#C6CCD3;
  --sf-ink:#141612;
  --sf-moon:#EDEFF2;
  --sf-low:#9A4E23;         /* "only a few left" */
  /* BOTA colours */
  --sf-mint:#7FBBA1; --sf-pearl:#E8E3D6; --sf-apricot:#D98F5F;

  /* type */
  --sf-serif:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;
  --sf-sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sf-t-xs:12px; --sf-t-sm:14px; --sf-t-base:16px; --sf-t-md:18px; --sf-t-lg:22px;
  --sf-t-xl:clamp(26px,3.2vw,34px); --sf-t-2xl:clamp(34px,5vw,52px); --sf-t-3xl:clamp(42px,7vw,80px);
  --sf-track:.16em;         /* uppercase labels */

  /* space, shape, motion */
  --sf-s1:4px; --sf-s2:8px; --sf-s3:12px; --sf-s4:16px; --sf-s5:24px; --sf-s6:32px; --sf-s7:48px; --sf-s8:72px;
  --sf-gutter:max(16px,env(safe-area-inset-left,0px));
  --sf-max:1200px;
  --sf-r-sm:6px; --sf-r-md:12px; --sf-r-pill:999px;
  --sf-ease:cubic-bezier(.22,.61,.36,1);
  --sf-hdr-h:64px;
}
/* surface modes: components read --bg/--fg/--fg2/--line/--accent/--accent-ink */
.sf-dark{--bg:var(--sf-obsidian);--bg2:var(--sf-obsidian-2);--fg:var(--sf-moon);--fg2:rgba(237,239,242,.74);
  --line:rgba(226,232,240,.14);--accent:var(--sf-gold);--accent-ink:var(--sf-teal-glow);--btn-bg:var(--sf-gold);--btn-fg:#14110B;
  background:var(--bg);color:var(--fg);color-scheme:dark}
.sf-light{--bg:var(--sf-ivory);--bg2:var(--sf-paper);--fg:var(--sf-ink);--fg2:var(--sf-slate-ink);
  --line:rgba(20,22,18,.13);--accent:var(--sf-gold-dp);--accent-ink:var(--sf-teal-ink);--btn-bg:var(--sf-teal);--btn-fg:#fff;
  background:var(--bg);color:var(--fg);color-scheme:light}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}   /* component display rules (e.g. .sf-card{display:flex}) must never override hidden */
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--sf-hdr-h) + 12px)}
body{margin:0;font:400 var(--sf-t-base)/1.6 var(--sf-sans);background:var(--sf-obsidian);color:var(--sf-moon)}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent-ink,var(--sf-teal-glow));outline-offset:3px}
.sf-wrap{max-width:var(--sf-max);margin:0 auto;padding-left:var(--sf-gutter);padding-right:max(16px,env(safe-area-inset-right,0px))}
.sf-section{padding-block:clamp(48px,7vw,96px)}
.sf-eyebrow{font-size:var(--sf-t-xs);font-weight:700;letter-spacing:var(--sf-track);text-transform:uppercase;color:var(--accent)}
.sf-h1{font-family:var(--sf-serif);font-weight:600;font-size:var(--sf-t-3xl);line-height:1.02;margin:.2em 0 .3em;text-wrap:balance}
.sf-h2{font-family:var(--sf-serif);font-weight:600;font-size:var(--sf-t-2xl);line-height:1.08;margin:.2em 0 .4em;text-wrap:balance}
.sf-h3{font-family:var(--sf-serif);font-weight:600;font-size:var(--sf-t-xl);line-height:1.15;margin:0 0 .4em}
.sf-h1 em,.sf-h2 em,.sf-h3 em{font-style:italic;font-weight:500;color:var(--accent)}
.sf-lede{font-size:var(--sf-t-md);color:var(--fg2);max-width:62ch;margin:0}
.sf-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--sf-gold);color:#14110B;padding:10px 14px;border-radius:var(--sf-r-sm)}
.sf-skip:focus{left:var(--sf-gutter);top:calc(8px + env(safe-area-inset-top,0px))}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- buttons ---------- */
.sf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 20px;border-radius:var(--sf-r-pill);
  border:1px solid var(--line);background:transparent;color:var(--fg);font:600 var(--sf-t-sm)/1.2 var(--sf-sans);letter-spacing:.02em;
  text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.sf-btn:hover{border-color:var(--accent)}
.sf-btn-solid{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)}
.sf-btn-solid:hover{filter:brightness(1.06);border-color:var(--btn-bg)}
.sf-btn-row{display:flex;flex-wrap:wrap;gap:var(--sf-s3)}

/* ---------- header ---------- */
.sf-hdr{position:sticky;top:0;z-index:50;background:rgba(16,20,25,.94);color:var(--sf-moon);border-bottom:1px solid rgba(226,232,240,.10);
  padding-top:env(safe-area-inset-top,0px);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sf-hdr-in{display:flex;align-items:center;gap:var(--sf-s4);min-height:var(--sf-hdr-h)}
.sf-mark{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;margin-right:auto}
.sf-mark svg{width:30px;height:auto}
.sf-mark .wm{font:600 13px/1 var(--sf-sans);letter-spacing:.32em}
.sf-nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.sf-nav a{color:rgba(237,239,242,.82);text-decoration:none;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:10px 0;border-bottom:1px solid transparent}
.sf-nav a:hover,.sf-nav a[aria-current="page"]{color:var(--sf-moon);border-bottom-color:var(--sf-gold)}
.sf-lang{display:inline-flex;border:1px solid rgba(226,232,240,.2);border-radius:var(--sf-r-pill);padding:2px}
.sf-lang button{font:700 11px/1 var(--sf-sans);letter-spacing:.12em;padding:8px 10px;min-width:40px;min-height:32px;border:0;border-radius:var(--sf-r-pill);background:transparent;color:rgba(237,239,242,.7);cursor:pointer}
.sf-lang button[aria-pressed="true"]{background:var(--sf-moon);color:var(--sf-obsidian)}
.sf-menu{display:none;width:44px;height:44px;border:1px solid rgba(226,232,240,.2);border-radius:50%;background:transparent;color:inherit;cursor:pointer;place-items:center}
.sf-menu i{display:block;width:16px;height:1.5px;background:currentColor;margin:2px 0}
@media (max-width:820px){
  .sf-menu{display:grid}
  .sf-nav{position:fixed;inset:calc(var(--sf-hdr-h) + env(safe-area-inset-top,0px)) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--sf-obsidian);border-bottom:1px solid rgba(226,232,240,.12);padding:8px var(--sf-gutter) 20px;display:none}
  .sf-nav.is-open{display:flex}
  .sf-nav a{padding:15px 0;border-bottom:1px solid rgba(226,232,240,.08);font-size:13px}
  .sf-nav .sf-lang{align-self:flex-start;margin-top:16px}
}

/* ---------- motion system ----------
   Four speeds, two curves. Hover feedback is quick, UI changes are short,
   entrances and reveals are slow and settle softly. Everything stops for
   reduced motion, and nothing waits on animation to be usable. */
:root{
  --sf-d-hover:180ms; --sf-d-ui:320ms; --sf-d-enter:900ms; --sf-d-reveal:760ms;
  --sf-out:cubic-bezier(.22,.61,.36,1);      /* settle */
  --sf-cine:cubic-bezier(.65,.05,.36,1);     /* the travelling light */
  --sf-stagger:90ms;
}
html.sf-motion [data-enter]{opacity:0;transform:translateY(22px)}
html.sf-motion.sf-ready [data-enter]{opacity:1;transform:none;
  transition:opacity var(--sf-d-enter) var(--sf-out) calc(var(--i,0)*var(--sf-stagger)),transform var(--sf-d-enter) var(--sf-out) calc(var(--i,0)*var(--sf-stagger))}
html.sf-motion [data-reveal]:not(.is-in){opacity:0;transform:translateY(28px)}
html.sf-motion [data-reveal]{transition:opacity var(--sf-d-reveal) var(--sf-out) calc(var(--i,0)*var(--sf-stagger)),transform var(--sf-d-reveal) var(--sf-out) calc(var(--i,0)*var(--sf-stagger))}
html.sf-revealall [data-reveal],html.sf-revealall [data-enter]{opacity:1!important;transform:none!important}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:260ms;animation-timing-function:var(--sf-out)}

/* ---------- header over a dark hero ---------- */
.sf-hdr{transition:background var(--sf-d-ui) var(--sf-out),border-color var(--sf-d-ui) var(--sf-out)}
.has-overlay-hdr .sf-hdr:not(.is-solid){background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.has-overlay-hdr main{margin-top:calc(-1*(var(--sf-hdr-h) + env(safe-area-inset-top,0px)))}

/* ---------- crescent edges between dark and light ----------
   A section rises out of the one before on a shallow arc, the crescent of the
   moon in the lockup. */
.sf-rise{position:relative}
.sf-rise::before{content:"";position:absolute;left:0;right:0;top:calc(-1*clamp(28px,4vw,56px) + 1px);height:clamp(28px,4vw,56px);
  background:var(--bg);border-radius:50% 50% 0 0/100% 100% 0 0;pointer-events:none}

/* ---------- product card ----------
   A warehouse tag: item number, name, price large, stock, shipping, then the action.
   Standard, "just in" (flag) and feature (large) share it. */
.sf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(12px,1.8vw,22px)}
@media (max-width:520px){.sf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.sf-card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--bg2);border-radius:var(--sf-r-md);
  box-shadow:0 0 0 1px var(--line);transition:box-shadow var(--sf-d-ui) var(--sf-out),transform var(--sf-d-ui) var(--sf-out)}
.sf-card:focus-within{box-shadow:0 0 0 2px var(--sf-teal-ink)}
.sf-card:hover{box-shadow:0 0 0 1px var(--accent),0 18px 40px -22px rgba(20,22,18,.35);transform:translateY(-2px)}
.sf-card-media{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:var(--sf-r-md) var(--sf-r-md) 0 0;
  background:radial-gradient(ellipse 70% 60% at 50% 55%,#F4F1EA,#E3DED3)}
.sf-card-media img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--sf-out)}
.sf-card:hover .sf-card-media img{transform:scale(1.04)}
.sf-flag{position:absolute;left:10px;top:10px;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 9px 5px;border-radius:3px;background:var(--sf-obsidian);color:var(--sf-gold-hi)}
.sf-card-body{display:flex;flex-direction:column;gap:5px;padding:14px 14px 16px;flex:1}
.sf-card-sku{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-variant-numeric:tabular-nums}
.sf-card-title{font:600 15px/1.35 var(--sf-sans);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.sf-card-sub{font-size:14px;line-height:1.5;color:var(--fg2);margin:2px 0 4px;max-width:46ch}
.sf-card-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:6px;padding-top:10px;border-top:1px dashed var(--line)}
.sf-price{font:600 26px/1 var(--sf-serif);font-variant-numeric:tabular-nums}
.sf-stock{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg2)}
.sf-stock::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sf-teal)}
.sf-stock.is-low{color:var(--sf-low)}.sf-stock.is-low::before{background:#D0763E}
.sf-ship{font-size:12px;line-height:1.45;color:var(--fg2);margin:0 0 8px}
.sf-buy{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border-radius:var(--sf-r-pill);
  border:1px solid var(--fg);color:var(--fg);font:600 14px/1 var(--sf-sans);text-decoration:none;
  transition:background var(--sf-d-hover) var(--sf-out),color var(--sf-d-hover) var(--sf-out)}
.sf-buy:hover,.sf-buy:focus-visible{background:var(--fg);color:var(--bg)}
.sf-card.is-feature .sf-card-title{font:600 var(--sf-t-xl)/1.15 var(--sf-serif)}
.sf-card.is-feature .sf-price{font-size:36px}
.sf-card.is-feature .sf-buy{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)}
.sf-card.is-feature .sf-buy:hover{filter:brightness(1.07)}

/* ---------- footer ---------- */
.sf-ftr{position:relative;overflow:hidden;background:var(--sf-void);color:rgba(237,239,242,.78);font-size:var(--sf-t-sm);
  padding-block:56px calc(40px + env(safe-area-inset-bottom,0px))}
.sf-ftr-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:32px;position:relative}
@media (max-width:720px){.sf-ftr-grid{grid-template-columns:1fr}}
.sf-ftr h2{font:700 var(--sf-t-xs)/1 var(--sf-sans);letter-spacing:var(--sf-track);text-transform:uppercase;color:var(--sf-gold);margin:0 0 14px}
.sf-ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sf-ftr a{color:inherit;text-decoration:none}.sf-ftr a:hover{color:var(--sf-moon);text-decoration:underline}
.sf-ftr .sf-mark{margin-bottom:12px}
/* the wordmark, etched into the floor of the page, as dim as it starts in the opening */
.sf-ftr-word{margin:clamp(40px,7vw,80px) 0 0;font:600 clamp(34px,10.2vw,156px)/.8 var(--sf-sans);letter-spacing:.2em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(237,239,242,.10);text-align:center;user-select:none;padding-left:.2em;overflow:hidden}

/* ---------- phone action bar ----------
   Shop, BOTA, Wholesale and Call under the thumb on phones. */
.sf-bar{display:none}
@media (max-width:820px){
  .sf-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(4,1fr);
    background:rgba(10,12,14,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(226,232,240,.1);
    padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
  .sf-bar a{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:48px;justify-content:center;color:rgba(237,239,242,.8);
    text-decoration:none;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
  .sf-bar a svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5}
  .sf-bar a[aria-current="page"],.sf-bar a:hover{color:var(--sf-gold-hi)}
  body.has-bar{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  html.sf-intro .sf-bar{visibility:hidden}
}

/* ---------- dialog (order thank-you) ---------- */
.sf-dialog{position:fixed;inset:0;z-index:700;display:none;place-items:center;padding:20px;background:rgba(5,6,7,.82)}
.sf-dialog.is-open{display:grid}
.sf-dialog-card{width:min(460px,100%);background:var(--sf-ivory);color:var(--sf-ink);border-radius:16px;padding:32px 28px;text-align:center}
.sf-dialog-card .tick{width:52px;height:52px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:var(--sf-teal);color:#fff;font-size:24px}
.sf-dialog-card h2{font:600 26px/1.2 var(--sf-serif);margin:0 0 10px}
.sf-dialog-card p{margin:0 0 8px;color:var(--sf-slate-ink);font-size:15px}
.sf-dialog-card .sf-btn{margin-top:14px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}