/* ==========================================================================
   BAD KOREAN — "SAUCE AS A SERVICE"
   Mobile-first. Scoped under .bk so it never fights the Squarespace theme.
   Served from Cloudflare Pages alongside /assets/web/*.webp.

   Design rules this file holds to:
   - Three surfaces only: cream, ink, red. Every section picks one and commits.
     Contrast comes from switching surface, not from adding borders.
   - Red is the buy colour. It is allowed to carry a whole section, but inside
     a cream section it only ever appears on something you can click.
   - Display type is set big enough that it becomes the layout. If a heading
     needs a rule or a box to feel important, it is set too small.
   - Every interactive target is >= 48px tall.
   - Image URLs here are relative. On the CDN, /src/badkorean.css resolves
     ../assets/web/ to the same version; in preview/ it resolves to the same
     folder on disk. One path, both worlds.
   ========================================================================== */

/* Tokens also live on body.bk-skin, so the restyled native store pages
   (see SITE-WIDE SKIN at the end) can use them outside any .bk block. */
.bk, body.bk-skin {
  /* ---- brand ---------------------------------------------------------- */
  --bk-red:      #F00001;   /* sampled: Srirachajang label */
  --bk-red-dim:  #C60712;
  --bk-blood:    #8A0000;   /* site.css --accent-hsl */
  --bk-green:    #025506;   /* sampled: SRIRACHAJANG badge */
  --bk-ink:      #131114;
  --bk-char:     #2B272B;   /* site.css --black-hsl */
  --bk-cream:    #FDFBF6;   /* site.css --white-hsl */
  --bk-sand:     #F2EDE3;
  --bk-gold:     #F5E4C3;
  --bk-mute:     #6B6670;
  --bk-line:     rgba(19,17,20,.14);

  /* ---- type ----------------------------------------------------------- */
  --bk-display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --bk-ui: 'Epilogue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --bk-navh: 66px;
  --bk-max: 1240px;
  --bk-gut: clamp(20px, 5.4vw, 64px);
  --bk-sec: clamp(3.5rem, 9vw, 7.5rem);
  --bk-r: 16px;
  --bk-r-img: 0;   /* image frames are square-cornered */
}

.bk {
  font-family: var(--bk-ui);
  color: var(--bk-ink);
  background: var(--bk-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}

/* --- reset, scoped ------------------------------------------------------ */
.bk *, .bk *::before, .bk *::after { box-sizing: border-box; }
/* `:where()` keeps the reset at (0,1,0) so a later component class always wins.
   Written as `.bk figure {...}` this was (0,1,1) and quietly beat `.bk-quote`. */
.bk :where(p, h1, h2, h3, h4, ul, ol, figure, blockquote) { margin: 0; padding: 0; }
.bk :where(ul, ol) { list-style: none; }
/* The theme colours bare headings site-wide; inside .bk they follow their
   section's surface instead. */
.bk :is(h1, h2, h3, h4) { color: inherit; }
.bk img { display: block; max-width: 100%; height: auto; }
/* `.bk a { color: inherit }` is (0,1,1) and would outrank every class-based
   colour rule below, so keep the inherit to bare links only. */
.bk a { text-decoration: none; }
.bk a:not([class]) { color: inherit; }
.bk button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.bk :focus-visible { outline: 3px solid var(--bk-red); outline-offset: 3px; }
/* The product name is one item: it never breaks across lines. */
.bk-name { white-space: nowrap; }
/* In a big heading on a small phone it would not fit on one line at full
   size, so it shrinks to fit instead of breaking. */
.bk :is(h1, h2) .bk-name { font-size: min(1em, 9vw); }
.bk__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

body.bk-lock { overflow: hidden; }

/* --- layout ------------------------------------------------------------- */
.bk__wrap { width: 100%; max-width: var(--bk-max); margin-inline: auto; padding-inline: var(--bk-gut); }
.bk__wrap--wide { max-width: 1480px; }
.bk__sec { padding-block: var(--bk-sec); position: relative; }
.bk__sec--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.bk__sec--dark { background: var(--bk-ink); color: var(--bk-cream); }
.bk__sec--sand { background: var(--bk-sand); }
.bk__sec--red  { background: var(--bk-red); color: var(--bk-cream); }

/* --- display type ------------------------------------------------------- */
.bk h1, .bk h2, .bk h3, .bk .bk-display {
  font-family: var(--bk-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: -.005em;
}
.bk h1 { font-size: clamp(3rem, 12vw, 8.5rem); }
.bk h2 { font-size: clamp(2.25rem, 7.5vw, 5rem); }
.bk h3 { font-size: clamp(1.3rem, 3.6vw, 1.9rem); }
.bk p  { font-size: clamp(1rem, 3.6vw, 1.0625rem); line-height: 1.65; }
.bk .bk-lede { font-size: clamp(1.0625rem, 4vw, 1.375rem); line-height: 1.5; }

.bk-eyebrow {
  display: block;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bk-red);
  margin-bottom: 1rem;
}
.bk__sec--dark .bk-eyebrow { color: var(--bk-gold); }
.bk__sec--red .bk-eyebrow  { color: var(--bk-cream); opacity: .8; }
.bk-band .bk-eyebrow,
.bk-hero .bk-eyebrow { color: var(--bk-gold); }

/* Section head: oversized heading + optional right-hand link */
.bk-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.bk-head p { max-width: 46ch; margin-top: .9rem; color: var(--bk-mute); }
.bk__sec--dark .bk-head p { color: rgba(253,251,246,.72); }
.bk__sec--red .bk-head p { color: rgba(253,251,246,.9); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.bk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: 0 1.75rem;
  font-family: var(--bk-ui); font-weight: 800; font-size: .9375rem;
  letter-spacing: .04em; text-transform: uppercase;
  border-radius: 999px; border: 2px solid transparent;
  transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
  cursor: pointer; text-align: center;
}
.bk-btn:active { transform: translateY(1px); }
.bk-btn--red   { background: var(--bk-red); color: var(--bk-cream); }
.bk-btn--red:hover { background: var(--bk-red-dim); }
.bk-btn--ink   { background: var(--bk-ink); color: var(--bk-cream); }
.bk-btn--ink:hover { background: var(--bk-char); }
.bk-btn--cream { background: var(--bk-cream); color: var(--bk-ink); }
.bk-btn--cream:hover { background: #fff; }
.bk-btn--ghost { border-color: currentColor; color: inherit; }
.bk-btn--ghost:hover { background: currentColor; }
.bk-btn--ghost:hover > span { color: var(--bk-cream); }
.bk__sec--dark .bk-btn--ghost:hover > span,
.bk-hero .bk-btn--ghost:hover > span { color: var(--bk-ink); }
.bk-btn--lg { min-height: 60px; padding: 0 2.25rem; font-size: 1rem; }
.bk-btn--block { display: flex; width: 100%; }

/* Text link with a rule that grows on hover */
.bk-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 800; font-size: .875rem; letter-spacing: .06em; text-transform: uppercase;
  color: inherit; padding-bottom: 3px; border-bottom: 2px solid var(--bk-red);
  transition: gap .15s ease;
}
.bk-link:hover { gap: .8rem; }

/* ==========================================================================
   TICKER — the announcement strip above the nav
   ========================================================================== */
.bk-ticker {
  background: var(--bk-red); color: var(--bk-cream);
  overflow: hidden; position: relative; z-index: 60;
  padding-block: .6rem;
  display: flex; width: 100%;
}
.bk-ticker__run {
  display: flex; align-items: center; flex: 0 0 auto; gap: 2.5rem; padding-right: 2.5rem;
  font-family: var(--bk-display); text-transform: uppercase;
  font-size: .8125rem; letter-spacing: .12em; white-space: nowrap;
}
.bk-ticker__run > li { display: flex; align-items: center; gap: 2.5rem; }
.bk-ticker__run > li::after { content: "●"; font-size: .45em; opacity: .7; }
.bk-ticker.is-rolling .bk-ticker__run { animation: bk-roll 34s linear infinite; min-width: 100%; }
.bk-ticker.is-rolling:hover .bk-ticker__run { animation-play-state: paused; }
@keyframes bk-roll { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .bk-ticker { justify-content: center; }
  .bk-ticker__run { animation: none !important; }
}

/* ==========================================================================
   NAV
   ========================================================================== */
.bk-nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--bk-navh);
  display: flex; align-items: center;
  background: transparent;
  transition: background-color .25s ease, box-shadow .25s ease, color .25s ease;
  color: var(--bk-cream);
}
/* Ink once the page moves — keeps the white mark legible and means there is
   no hairline or colour seam under the bar at any scroll position. */
.bk-nav.is-stuck { background: var(--bk-ink); color: var(--bk-cream); }
.bk-nav--solid { background: var(--bk-ink); color: var(--bk-cream); }

.bk-nav__inner { display: flex; align-items: center; gap: 1rem; width: 100%; }
.bk-nav__logo { display: flex; align-items: center; flex: 0 0 auto; margin-right: auto; }
.bk-nav__logo img { height: 42px; width: auto; }

.bk-nav__links { display: none; align-items: center; gap: 1.75rem; }
.bk-nav__links a {
  font-weight: 700; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase;
  color: inherit; position: relative; padding-block: .5rem;
}
.bk-nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--bk-red); transition: right .2s ease;
}
.bk-nav__links a:hover::after { right: 0; }

.bk-nav__tools { display: flex; align-items: center; gap: .25rem; flex: 0 0 auto; }
.bk-nav__icon {
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  color: inherit; border-radius: 999px; position: relative;
}
.bk-nav__icon:hover { background: rgba(128,128,128,.16); }
.bk-nav__count {
  position: absolute; top: 6px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--bk-red); color: var(--bk-cream);
  font-size: .6875rem; font-weight: 800; line-height: 18px; text-align: center;
}
.bk-nav__count[hidden] { display: none; }
.bk-nav__icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bk-nav__burger { display: inline-flex; }
/* Search is switched off site-wide; the markup stays so it can come back. */
.bk-nav__search, .bk-search { display: none !important; }
@media (min-width: 940px) {
  .bk-nav__links { display: flex; }
  .bk-nav__burger { display: none; }
}

/* Search — a real GET to /search?q= */
.bk-search {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bk-ink); color: var(--bk-cream);
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease;
}
.bk-search.is-open { grid-template-rows: 1fr; }
.bk-search__in { overflow: hidden; }
.bk-search form { display: flex; gap: .75rem; padding: 1rem var(--bk-gut); max-width: var(--bk-max); margin-inline: auto; }
.bk-search input {
  flex: 1; min-height: 52px; padding: 0 1.1rem; font: inherit;
  border: 2px solid var(--bk-cream); border-radius: 999px; background: var(--bk-cream); color: var(--bk-ink);
}
.bk-search .bk-btn--ink { background: var(--bk-red); color: var(--bk-cream); }

/* Drawer */
.bk-drawer {
  position: fixed; inset: 0; z-index: 80;
  background: var(--bk-ink); color: var(--bk-cream);
  padding: 1.1rem var(--bk-gut) 2rem;
  display: flex; flex-direction: column;
  transform: translateY(-100%); visibility: hidden;
  transition: transform .3s cubic-bezier(.4,0,.2,1), visibility .3s;
  overflow-y: auto;
}
.bk-drawer.is-open { transform: none; visibility: visible; }
.bk-drawer__top { display: flex; justify-content: flex-end; }
.bk-drawer__close { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.bk-drawer__close svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.bk-drawer__links { margin-top: auto; margin-bottom: auto; display: flex; flex-direction: column; gap: .35rem; }
.bk-drawer__links a {
  font-family: var(--bk-display); text-transform: uppercase; font-size: clamp(2.25rem, 11vw, 3.5rem);
  line-height: 1.05; color: inherit;
}
.bk-drawer__links a:hover { color: var(--bk-red); }
.bk-drawer__foot { display: flex; gap: .75rem; padding-top: 2rem; }
.bk-drawer__foot .bk-btn { flex: 1; }

/* ==========================================================================
   HERO
   ========================================================================== */
.bk-hero {
  position: relative; margin-top: calc(var(--bk-navh) * -1);
  min-height: min(94vh, 900px);
  display: flex; align-items: flex-end;
  background: var(--bk-ink); color: var(--bk-cream);
  overflow: hidden;
}
.bk-hero__bg { position: absolute; inset: 0; }
.bk-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.bk-hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    /* Dark only where the text sits (left) and under the nav; the right half,
       where the bottle is, stays close to the original photo. */
    linear-gradient(95deg, rgba(19,17,20,.78) 0%, rgba(19,17,20,.5) 40%, rgba(19,17,20,0) 70%),
    linear-gradient(180deg, rgba(19,17,20,.55) 0%, rgba(19,17,20,0) 16%);
}
/* Phones: the text sits over the lower half of the photo, so shade from the
   bottom up instead of from the left. */
@media (max-width: 759px) {
  .bk-hero::after {
    background: linear-gradient(180deg, rgba(19,17,20,.5) 0%, rgba(19,17,20,0) 16%, rgba(19,17,20,0) 30%, rgba(19,17,20,.8) 62%, rgba(19,17,20,.92) 100%);
  }
  /* A shorter frame over the same-size photo (still 94vh tall, so it stays
     as sharp). The two values say how much is hidden above and below:
     raise --crop-top to move the photo up, raise --crop-bottom to move it
     down. Keep them adding up to 14vh so the photo keeps its size. */
  .bk-hero { --crop-top: 4vh; --crop-bottom: 10vh; min-height: calc(94vh - var(--crop-top) - var(--crop-bottom)); }
  .bk-hero__bg { top: calc(-1 * var(--crop-top)); bottom: calc(-1 * var(--crop-bottom)); }
}

.bk-hero__bg img { object-position: 68% top; }   /* never crop the bottle cap; trim the bottom instead */
.bk-hero__in { position: relative; z-index: 1; width: 100%; padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2.5rem, 6vw, 4rem); }
.bk-hero h1 { max-width: 15ch; }
.bk-hero h1 em { font-style: normal; color: var(--bk-red); }
.bk-hero .bk-lede { max-width: 42ch; margin-top: 1.5rem; color: rgba(253,251,246,.86); }
.bk-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.bk-hero__note { margin-top: 1.5rem; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: rgba(253,251,246,.85); }

/* ==========================================================================
   RAIL — horizontal scroll-snap strip of products
   ========================================================================== */
.bk-rail__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.bk-rail__arrows { display: none; gap: .5rem; flex: 0 0 auto; }
.bk-rail:not(.is-static) .bk-rail__arrows { display: flex; }
.bk-rail__arrows button {
  width: 48px; height: 48px; border-radius: 999px; border: 2px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  transition: opacity .15s ease, background-color .15s ease;
}
.bk-rail__arrows button:hover:not(:disabled) { background: var(--bk-red); border-color: var(--bk-red); color: var(--bk-cream); }
.bk-rail__arrows button:disabled { opacity: .28; cursor: default; }
.bk-rail__arrows svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.bk-rail__strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 340px);
  gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 4px;
  margin-inline: calc(var(--bk-gut) * -1); padding-inline: var(--bk-gut);
}
.bk-rail__strip::-webkit-scrollbar { display: none; }
.bk-rail__strip > * { scroll-snap-align: start; }
@media (min-width: 860px) { .bk-rail__strip { grid-auto-columns: 360px; } }

/* ==========================================================================
   PRODUCT CARD
   ========================================================================== */
.bk-card {
  display: flex; flex-direction: column;
  background: var(--bk-cream); color: var(--bk-ink);
  border-radius: var(--bk-r-img); overflow: hidden;
  border: 1px solid var(--bk-line);
  transition: transform .2s ease, box-shadow .2s ease;
}
.bk-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(19,17,20,.5); }
.bk-card__media { position: relative; aspect-ratio: 4/5; background: var(--bk-ink); overflow: hidden; }
.bk-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 1.25rem; }
.bk-card__media--crop img { object-fit: cover; padding: 0; }
.bk-card__tag {
  position: absolute; top: .875rem; left: .875rem; z-index: 1;
  background: var(--bk-red); color: var(--bk-cream);
  font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .4rem .7rem; border-radius: 999px;
}
.bk-card__tag--green { background: var(--bk-green); }
.bk-card__body { padding: 1.25rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.bk-card__body h3 { line-height: 1; }
.bk-card__heat { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--bk-mute); }
.bk-card__body p { font-size: .9375rem; color: var(--bk-mute); line-height: 1.55; }
.bk-card__price { margin-top: auto; padding-top: .75rem; display: flex; align-items: baseline; gap: .5rem; font-weight: 800; }
.bk-card__price b { font-family: var(--bk-display); font-size: 1.5rem; font-weight: 400; }
.bk-card__price span { font-size: .8125rem; color: var(--bk-mute); font-weight: 600; }
.bk-card .bk-btn { margin-top: .9rem; }

/* ==========================================================================
   CATEGORY CARDS — big image, headline over it
   ========================================================================== */
.bk-cats { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .bk-cats { grid-template-columns: repeat(3, 1fr); } }
.bk-cat {
  position: relative; display: flex; align-items: flex-end;
  min-height: clamp(300px, 46vw, 440px);
  border-radius: var(--bk-r-img); overflow: hidden;
  background: var(--bk-ink); color: var(--bk-cream);
  isolation: isolate;
}
.bk-cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s ease; }
.bk-cat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(19,17,20,0) 30%, rgba(19,17,20,.86) 100%); }
.bk-cat:hover img { transform: scale(1.05); }
.bk-cat__in { padding: 1.5rem; width: 100%; }
.bk-cat__in p { font-size: .9375rem; color: rgba(253,251,246,.8); margin-top: .5rem; max-width: 32ch; }
.bk-cat__in .bk-link { margin-top: 1.1rem; }

/* ==========================================================================
   BADGE ROW
   ========================================================================== */
.bk-badges { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); grid-template-columns: repeat(2, 1fr); text-align: center; }
@media (min-width: 780px) { .bk-badges { grid-template-columns: repeat(4, 1fr); } }
.bk-badge__ico { width: 46px; height: 46px; margin: 0 auto .9rem; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--bk-red); }
.bk-badge h3 { font-size: clamp(1rem, 2.6vw, 1.1875rem); }
.bk-badge p { font-size: .875rem; color: var(--bk-mute); margin-top: .4rem; }
.bk__sec--dark .bk-badge p { color: rgba(253,251,246,.7); }
.bk__sec--dark .bk-badge__ico { color: var(--bk-gold); }

/* ==========================================================================
   BAND — full-bleed image with copy over it
   ========================================================================== */
.bk-band {
  position: relative; display: flex; align-items: center;
  min-height: clamp(420px, 62vw, 640px);
  background: var(--bk-ink) center/cover no-repeat;
  color: var(--bk-cream); isolation: isolate; overflow: hidden;
}
.bk-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(19,17,20,.94) 0%, rgba(19,17,20,.78) 42%, rgba(19,17,20,.25) 100%); }
.bk-band--center { text-align: center; justify-content: center; }
.bk-band--center::after { background: rgba(19,17,20,.72); }
.bk-band__in { position: relative; padding-block: clamp(3rem, 8vw, 5rem); max-width: 40rem; }
.bk-band--center .bk-band__in { margin-inline: auto; }
.bk-band__in p { margin-top: 1.1rem; color: rgba(253,251,246,.86); }
.bk-band__in .bk-btn { margin-top: 1.85rem; }

/* Split: two half-width CTA panels side by side */
.bk-split { display: grid; grid-template-columns: 1fr; }
@media (min-width: 800px) { .bk-split { grid-template-columns: 1fr 1fr; } }
.bk-split .bk-band { min-height: clamp(360px, 46vw, 520px); }
.bk-split .bk-band::after { background: linear-gradient(180deg, rgba(19,17,20,.45) 0%, rgba(19,17,20,.92) 100%); }
.bk-split .bk-band__in { padding-inline: clamp(20px, 5vw, 3rem); }

/* ==========================================================================
   USE-CASE GRID — "put it on everything"
   ========================================================================== */
.bk-uses { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .bk-uses { grid-template-columns: repeat(3, 1fr); } }
.bk-use { position: relative; border-radius: var(--bk-r-img); overflow: hidden; aspect-ratio: 1; background: var(--bk-ink); isolation: isolate; }
.bk-use img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s ease; }
.bk-use::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(19,17,20,0) 42%, rgba(19,17,20,.85) 100%); }
.bk-use:hover img { transform: scale(1.06); }
.bk-use span {
  position: absolute; left: 1rem; right: 1rem; bottom: .9rem;
  font-family: var(--bk-display); text-transform: uppercase; color: var(--bk-cream);
  font-size: clamp(.9375rem, 2.6vw, 1.25rem); line-height: 1.05;
}
/* Six tiles at three across = two full rows, so nothing spans. */

/* ==========================================================================
   QUOTES
   ========================================================================== */
.bk-quotes { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .bk-quotes { grid-template-columns: repeat(3, 1fr); } }
.bk-quote { background: var(--bk-cream); color: var(--bk-ink); border-radius: var(--bk-r); padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; }
.bk__sec--red .bk-quote { box-shadow: 0 14px 30px -20px rgba(0,0,0,.6); }
.bk-quote__stars { color: var(--bk-red); letter-spacing: .15em; font-size: .9rem; }
.bk-quote blockquote { font-size: 1.0625rem; line-height: 1.55; font-weight: 500; }
.bk-quote figcaption { margin-top: auto; font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bk-mute); }

/* ==========================================================================
   FOUNDER
   ========================================================================== */
.bk-founder { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px) {
  .bk-founder { grid-template-columns: 1fr 1.1fr; }
  /* Alternating band: the packshot swaps to the right-hand column. */
  .bk-founder--flip .bk-founder__media { order: 2; }
  .bk-founder--flip { grid-template-columns: 1.1fr 1fr; }
}
.bk-founder__media { border-radius: var(--bk-r-img); overflow: hidden; aspect-ratio: 4/5; background: var(--bk-ink); }
.bk-founder__media img { width: 100%; height: 100%; object-fit: cover; }
/* A bottle is far taller than the 4:5 frame, so it is fitted, not cropped. */
/* Two portraits cross-fading in the same frame. Both are stacked absolutely so
   the box keeps one height; JS just moves the .is-on class. */
.bk-rotate { position: relative; }
.bk-rotate img { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.bk-rotate img.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .bk-rotate img { transition: none; }
}

/* The bottle is a transparent cut-out: no box, it stands on the section. */
.bk-founder__media--bottle { background: none; }
.bk-founder__media--bottle img { object-fit: contain; padding: clamp(1.5rem, 4vw, 3rem); filter: drop-shadow(0 18px 24px rgba(0,0,0,.35)); }
/* Two bottles: the featured one large in front, the other smaller behind it
   and to the right. */
.bk-founder__media--pair { position: relative; overflow: visible; }
.bk-founder__media--pair img { position: absolute; width: auto; padding: 0; }
.bk-founder__media--pair .bk-pair__front { z-index: 2; height: 94%; left: 18%; bottom: 3%; }
.bk-founder__media--pair .bk-pair__back { z-index: 1; height: 62%; left: 54%; bottom: 17%; filter: drop-shadow(0 12px 18px rgba(0,0,0,.25)) brightness(.92) !important; }

/* "New" pill sitting on the eyebrow line */
.bk-kicker { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.bk-kicker .bk-eyebrow { margin-bottom: 0; }
.bk-pill {
  display: inline-flex; align-items: center; padding: .35rem .75rem; border-radius: 999px;
  background: var(--bk-green); color: var(--bk-cream);
  font-size: .6875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
}
.bk-founder p + p { margin-top: 1rem; }
.bk-founder .bk-lede { margin-top: 1.25rem; }
.bk-founder .bk-link { margin-top: 1.75rem; }

/* ==========================================================================
   NEWSLETTER / FORM SLOTS
   The slot holds a real Squarespace block after JS moves it in. Everything
   below re-skins that native markup. If no block was found the whole
   [data-bk-needs-form] host is removed, so none of this ever shows empty.
   ========================================================================== */
.bk-signup { text-align: center; }
.bk-signup h2 { max-width: 18ch; margin-inline: auto; }
.bk-signup p { max-width: 46ch; margin: 1rem auto 2rem; }
.bk-slot { max-width: 34rem; margin-inline: auto; text-align: left; }

/* --- native Squarespace newsletter + form, restyled --------------------- */
.bk-slot .sqs-block { padding: 0 !important; background: none !important; }
/* A form on a white card, the block's own background turned off. */
.bk-contact + [data-bk-needs-form] { margin-top: clamp(2.5rem, 6vw, 4rem); }
.bk-slot--card {
  max-width: 40rem; padding: clamp(1.5rem, 4vw, 2.5rem);
  background: #fff; border-radius: 22px; box-shadow: 0 24px 50px rgba(19,17,20,.1);
}
.bk-slot--card .sqs-block-content > *,
.bk-slot--card .sqs-site-style-form,
.bk-slot--card .form-wrapper { background: none !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; }
.bk-slot .sqs-block-content { padding: 0 !important; }
.bk-slot .newsletter-form-header { display: none; }
.bk-slot .newsletter-form,
.bk-slot .form-wrapper { margin: 0; }
/* Row, always: the block's "Stack" layout sets column, which turns the
   fields' 16rem flex-basis into a 16rem height. */
.bk-slot .newsletter-form-body { display: flex; flex-direction: row !important; flex-wrap: wrap; align-items: flex-start; gap: .75rem; }
.bk-slot .newsletter-form-fields-wrapper { flex: 1 1 16rem; margin: 0 !important; }
.bk-slot .newsletter-form-fields-wrapper { min-width: 0; flex-wrap: wrap !important; }
.bk-slot .newsletter-form-field-wrapper { flex: 1 1 100%; min-width: 0 !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
.bk-slot .newsletter-form-field-element { width: 100% !important; }
.bk-slot .newsletter-form-button-wrapper { flex: 0 0 auto; margin: 0 !important; padding: 0 !important; }

/* Squarespace's newer form inputs often carry no type attribute, and their
   grey fill is a separate layer (.form-input-effects) behind the input. */
.bk-slot .form-input-effects { display: none !important; }
/* :not(#bk) adds id-level weight: the form's own select/textarea rules
   outrank a plain `.bk-slot select`. */
.bk-slot input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.bk-slot select:not(#bk),
.bk-slot textarea:not(#bk),
.bk-slot .field-element {
  width: 100%; min-height: 54px; padding: .85rem 1.15rem;
  font-family: var(--bk-ui) !important; font-size: 1rem !important; color: var(--bk-ink) !important;
  background: var(--bk-cream) !important;
  border: 2px solid var(--bk-ink) !important; border-radius: 12px !important;
  box-shadow: none !important;
}
.bk-slot textarea:not(#bk) { min-height: 130px; resize: vertical; }
/* On the white card the fields stay clear, so the dropdown's own arrow
   (drawn behind the select) still shows. */
.bk-slot--card input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.bk-slot--card select:not(#bk),
.bk-slot--card textarea:not(#bk) { background: transparent !important; }
.bk-slot input::placeholder, .bk-slot textarea::placeholder { color: var(--bk-mute) !important; opacity: 1; }
.bk-slot .field-list .field { padding: 0 0 1rem !important; }
.bk-slot .title, .bk-slot .caption, .bk-slot label {
  font-family: var(--bk-ui) !important; font-weight: 700 !important; font-size: .8125rem !important;
  letter-spacing: .06em; text-transform: uppercase; color: inherit !important; margin-bottom: .5rem !important;
}
.bk-slot .description { font-size: .8125rem !important; color: var(--bk-mute) !important; }
.bk-slot .newsletter-form-button,
.bk-slot .form-button-wrapper .button,
.bk-slot input[type="submit"],
.bk-slot button[type="submit"] {
  min-height: 54px !important; padding: 0 1.9rem !important; width: auto !important;
  font-family: var(--bk-ui) !important; font-weight: 800 !important; font-size: .9375rem !important;
  letter-spacing: .04em !important; text-transform: uppercase !important;
  background: var(--bk-red) !important; color: var(--bk-cream) !important;
  border: 0 !important; border-radius: 999px !important; cursor: pointer;
  transition: background-color .15s ease;
}
.bk-slot .newsletter-form-button:hover,
.bk-slot .form-button-wrapper .button:hover,
.bk-slot button[type="submit"]:hover { background: var(--bk-red-dim) !important; }
.bk-slot .form-button-wrapper { text-align: left !important; }
/* On a red section the fields need a light frame, not an ink one. */
.bk__sec--red .bk-slot input, .bk__sec--red .bk-slot textarea, .bk__sec--red .bk-slot select { border-color: var(--bk-cream) !important; }
.bk__sec--red .bk-slot .newsletter-form-button,
.bk__sec--red .bk-slot .form-button-wrapper .button { background: var(--bk-ink) !important; }
.bk-slot .newsletter-form-footnote, .bk-slot .form-footnote { font-size: .75rem !important; color: inherit !important; opacity: .7; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.bk-foot { background: var(--bk-ink); color: var(--bk-cream); padding-block: clamp(3rem, 7vw, 5rem) 2rem; }
.bk-foot__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .bk-foot__grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.bk-foot__brand img { height: 54px; width: auto; mix-blend-mode: screen; }
.bk-foot__brand p { margin-top: 1.1rem; max-width: 32ch; font-size: .9375rem; color: rgba(253,251,246,.66); }
.bk-foot h4 { font-family: var(--bk-display); text-transform: uppercase; font-size: 1rem; letter-spacing: .04em; margin-bottom: 1rem; }
.bk-foot__col a { display: block; padding: .4rem 0; font-size: .9375rem; color: rgba(253,251,246,.72); }
.bk-foot__col a:hover { color: var(--bk-cream); }
.bk-foot__social { display: flex; gap: .5rem; margin-top: 1.5rem; }
.bk-foot__social a { width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(253,251,246,.24); display: inline-flex; align-items: center; justify-content: center; }
.bk-foot__social a:hover { background: var(--bk-red); border-color: var(--bk-red); }
.bk-foot__social svg { width: 19px; height: 19px; fill: currentColor; }
.bk-foot__base {
  margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.5rem; border-top: 1px solid rgba(253,251,246,.16);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
  font-size: .8125rem; color: rgba(253,251,246,.55);
}
.bk-foot__base a { color: inherit; }
.bk-foot__base a:hover { color: var(--bk-cream); }

/* ==========================================================================
   STICKY BUY BAR
   ========================================================================== */
.bk-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--bk-ink); color: var(--bk-cream);
  padding: .7rem var(--bk-gut); padding-bottom: max(.7rem, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 1rem;
  transform: translateY(110%); transition: transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 -8px 24px -14px rgba(0,0,0,.8);
}
.bk-sticky.is-in { transform: none; }
.bk-sticky__txt { flex: 1; min-width: 0; }
.bk-sticky__txt b { display: block; font-family: var(--bk-display); text-transform: uppercase; font-size: 1.0625rem; line-height: 1; }
.bk-sticky__txt span { font-size: .75rem; color: rgba(253,251,246,.62); }
.bk-sticky .bk-btn { flex: 0 0 auto; }
@media (min-width: 940px) { .bk-sticky { display: none; } }

/* ==========================================================================
   SHOP PAGE
   ========================================================================== */
.bk-shophead { background: var(--bk-ink); color: var(--bk-cream); padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2.5rem, 6vw, 4rem); margin-top: calc(var(--bk-navh) * -1); padding-top: calc(var(--bk-navh) + clamp(3rem, 8vw, 5.5rem)); }
.bk-shophead p { max-width: 48ch; margin-top: 1.1rem; color: rgba(253,251,246,.78); }

.bk-prods { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); grid-template-columns: 1fr; }
@media (min-width: 820px) { .bk-prods { grid-template-columns: repeat(2, 1fr); } }
.bk-prod { border: 1px solid var(--bk-line); border-radius: var(--bk-r-img); overflow: hidden; display: flex; flex-direction: column; background: var(--bk-cream); }
.bk-prod__media { background: var(--bk-ink); display: flex; justify-content: center; align-items: center; padding: clamp(1.25rem, 3vw, 2rem); min-height: clamp(320px, 42vw, 500px); }
.bk-prod__media img { width: auto; height: auto; max-width: 100%; max-height: clamp(280px, 36vw, 440px); filter: drop-shadow(0 18px 24px rgba(0,0,0,.35)); }
/* Each sauce sits on the colour its label is not: black label on red,
   red label on the green of its own badge. */
.bk-prod--original .bk-prod__media { background: var(--bk-red); }
.bk-prod--sriracha .bk-prod__media { background: var(--bk-green); }
.bk-prod__body { padding: clamp(1.25rem, 3vw, 2rem); display: flex; flex-direction: column; gap: .75rem; flex: 1; }
.bk-prod__body p { color: var(--bk-char); font-size: 1rem; }
/* Pushes the button to the card floor so both cards line up. */
.bk-prod__body > .bk-btn:last-child { margin-top: auto; }

.bk-ingr { border-top: 1px solid var(--bk-line); padding-top: .75rem; margin-bottom: 1rem; }
.bk-ingr summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 44px;
  font-weight: 800; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; list-style: none;
}
.bk-ingr summary::-webkit-details-marker { display: none; }
.bk-ingr summary::after { content: "+"; font-size: 1.25rem; font-weight: 600; transition: transform .2s ease; }
.bk-ingr[open] summary::after { transform: rotate(45deg); }
.bk-ingr .bk-fine { padding-bottom: .25rem; }

.bk-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.bk-chip {
  min-height: 44px; padding: 0 1rem; border-radius: 999px;
  border: 2px solid var(--bk-line); background: transparent;
  font-weight: 700; font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.bk-chip:hover { border-color: var(--bk-ink); }
.bk-chip.is-on { background: var(--bk-ink); border-color: var(--bk-ink); color: var(--bk-cream); }

/* Bundle ladder — the per-bottle price is the argument, so it is the big number */
.bk-ladder { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .bk-ladder { grid-template-columns: repeat(3, 1fr); } }
.bk-tier {
  position: relative; border: 2px solid var(--bk-line); border-radius: var(--bk-r);
  padding: clamp(1.5rem, 4vw, 2rem); display: flex; flex-direction: column; gap: .6rem;
  background: var(--bk-cream);
}
.bk-tier h3 { font-size: clamp(1.05rem, 2.6vw, 1.25rem); line-height: 1.05; }
.bk-tier--best { border-color: var(--bk-red); }
.bk-tier__flag {
  position: absolute; top: -14px; left: clamp(1.5rem, 4vw, 2rem);
  background: var(--bk-red); color: var(--bk-cream);
  font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .4rem .8rem; border-radius: 999px;
}
.bk-tier__per { font-family: var(--bk-display); font-size: clamp(2.5rem, 7vw, 3.25rem); line-height: .9; text-transform: uppercase; }
.bk-tier__total { font-size: .9375rem; font-weight: 700; }
/* Keep the anchor price whole — a strike that breaks across two lines reads as a typo. */
.bk-tier__total s { color: var(--bk-mute); font-weight: 500; margin-left: .4rem; white-space: nowrap; }
.bk-tier ul { display: flex; flex-direction: column; gap: .5rem; margin-block: .5rem; }
.bk-tier li { font-size: .9375rem; display: flex; gap: .6rem; align-items: flex-start; color: var(--bk-mute); }
.bk-tier li::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: .55em; border-radius: 999px; background: var(--bk-red); }
.bk-tier .bk-btn { margin-top: auto; }

/* FAQ */
.bk-faq { max-width: 46rem; margin-inline: auto; }
.bk-q { border-bottom: 1px solid var(--bk-line); }
.bk-q__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; padding: 1.4rem 0; font-weight: 700; font-size: 1.0625rem; min-height: 60px; }
.bk-q__btn::after { content: ""; flex: 0 0 auto; width: 14px; height: 14px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg) translate(-3px,-3px); transition: transform .2s ease; }
.bk-q.is-open .bk-q__btn::after { transform: rotate(-135deg) translate(-3px,-3px); }
.bk-q__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.bk-q.is-open .bk-q__panel { grid-template-rows: 1fr; }
.bk-q__panel > div { overflow: hidden; }
.bk-q__panel p { color: var(--bk-mute); padding-bottom: 1.4rem; }

/* ==========================================================================
   WHOLESALE
   ========================================================================== */
.bk-whead { background: var(--bk-ink); color: var(--bk-cream); margin-top: calc(var(--bk-navh) * -1); padding-block: calc(var(--bk-navh) + clamp(3rem, 8vw, 5.5rem)) clamp(2.5rem, 6vw, 4rem); }
.bk-whead p { max-width: 48ch; margin-top: 1.1rem; color: rgba(253,251,246,.78); }
.bk-steps { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); grid-template-columns: 1fr; counter-reset: bkstep; }
@media (min-width: 760px) { .bk-steps { grid-template-columns: repeat(3, 1fr); } }
.bk-step { counter-increment: bkstep; }
.bk-step::before {
  content: counter(bkstep, decimal-leading-zero);
  font-family: var(--bk-display); font-size: 2.5rem; color: var(--bk-red); display: block; margin-bottom: .5rem; line-height: 1;
}
.bk-step p { color: var(--bk-mute); margin-top: .5rem; font-size: .9375rem; }
.bk__sec--dark .bk-step p { color: rgba(253,251,246,.7); }

/* ==========================================================================
   REVEAL
   ========================================================================== */
.bk-rv { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.bk-rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .bk-rv { opacity: 1; transform: none; transition: none; }
  .bk * { scroll-behavior: auto !important; }
}

/* ==========================================================================
   NO-FORM FALLBACK
   Shown only when the page has no native Squarespace Form Block to move in.
   The JS sets .bk-has-form on the root the moment a genuine block lands.
   ========================================================================== */
.bk-fallback { max-width: 34rem; margin-inline: auto; text-align: center; }
.bk-fallback p { color: var(--bk-mute); margin-bottom: 1.5rem; }
.bk__sec--dark .bk-fallback p { color: rgba(253,251,246,.72); }
.bk.bk-has-form .bk-fallback { display: none; }


/* ==========================================================================
   NOTE — the shipping and pricing lines that sit under a section heading
   ========================================================================== */
/* Long shipping copy — a bordered pill round three wrapped lines reads as a
   mistake, so this is emphasis by colour and weight only. */
.bk-note {
  display: block; margin-top: 1rem; max-width: 46ch;
  font-weight: 800; font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase;
  line-height: 1.5; color: var(--bk-red);
}
.bk__sec--dark .bk-note, .bk-hero .bk-note { color: var(--bk-gold); }
.bk__sec--red .bk-note { color: var(--bk-cream); }

/* Ingredient / allergen small print under a product */
.bk-fine { font-size: .8125rem !important; line-height: 1.6; color: var(--bk-mute); }
.bk-fine b { color: var(--bk-ink); font-weight: 800; }

/* FAQ category heading */
.bk-faq__group {
  font-family: var(--bk-display); text-transform: uppercase;
  font-size: 1.0625rem; letter-spacing: .04em; color: var(--bk-red);
  margin-top: 2.75rem; margin-bottom: .25rem;
}
.bk-faq__group:first-child { margin-top: 0; }


/* ==========================================================================
   COPY TO CLIPBOARD
   ========================================================================== */
/* `.bk .bk-copy`, not `.bk-copy`: the scoped button reset (`.bk button`)
   would otherwise strip the border and the white fill. */
.bk-fallback, .bk-contact { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.bk .bk-copy {
  display: inline-flex; align-items: center; gap: 1.25rem;
  min-height: 84px; padding: 0 .75rem 0 2rem;
  border: 1px solid var(--bk-line); border-radius: 999px;
  background: #fff; color: var(--bk-ink);
  box-shadow: 0 12px 30px rgba(19,17,20,.08);
  font-weight: 700; font-size: clamp(1.0625rem, 3.6vw, 1.5rem);
  max-width: 100%;
}
/* line-height + padding give the g and @ room: overflow:hidden (needed for
   the ellipsis) otherwise clips their descenders. */
.bk-copy__addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; padding-block: .15em; }
.bk-copy__label {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem;
  min-height: 60px; padding: 0 1.5rem;
  background: var(--bk-red); color: var(--bk-cream);
  border-radius: 999px;
  font-size: .9375rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  transition: background-color .15s ease;
}
.bk-copy:hover .bk-copy__label { background: var(--bk-red-dim); }
.bk-copy svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bk-copy.is-done .bk-copy__label { background: var(--bk-green); }
/* Phones: icon-only button so the whole address fits. */
@media (max-width: 480px) {
  .bk .bk-copy { gap: .75rem; padding-left: 1.25rem; min-height: 72px; }
  .bk-copy__label { min-height: 52px; padding: 0 1rem; }
  .bk-copy__word { display: none; }
}


/* ==========================================================================
   SITE-WIDE SKIN
   Every page gets the custom nav and footer: pasted pages carry their own,
   and the JS injects them everywhere else (product pages, cart, search,
   account, legal) and marks <body> with .bk-skin. Squarespace's own header
   and footer are hidden on both.

   The rules under body.bk-skin restyle Squarespace's own store markup. They
   change only how it looks — the real variant picker, quantity field and
   Add To Cart button stay in place, so the cart and checkout keep working.
   !important is needed because the theme sets these per-section.
   ========================================================================== */
/* html[data-bk] is set by a one-line script in Code Injection, before the page
   draws, so Squarespace's header never flashes. If our script then fails to
   run, that line takes the class off again and the old header comes back. */
html[data-bk] #header,
html[data-bk] .header,
html[data-bk] #footer-sections,
html[data-bk] .sqs-announcement-bar-dropzone { display: none !important; }
html[data-bk] #page,
html[data-bk] .page-section:first-child { padding-top: 0 !important; }
/* Pages without a pasted block get their nav injected a moment later; hold
   its space so the page does not jump down when it arrives. */
html[data-bk] body:not(.bk-skin) #siteWrapper:not(:has(.bk)) { padding-top: var(--bk-navh, 66px); }
/* Our page placed directly in the body (one-line block in the page's Code
   Injection) leaves Squarespace's wrapper empty below it; it would still
   take a full screen of height, so collapse it. */
html[data-bk] body > .bk:not(.bk-chrome) ~ #siteWrapper { min-height: 0 !important; padding-top: 0 !important; }

/* Pages with a pasted Code Block. Squarespace drops the block into a
   narrow cell of its layout grid, inside a padded section; here it becomes
   the full page. The page's other sections only exist to hold the native
   blocks we move in (newsletter, forms), so they are hidden; the JS moves
   those blocks out of them first. If our script fails, data-bk is removed
   and the page shows as Squarespace built it. */
html[data-bk] #page:has(.bk) .page-section:not(:has(.bk)) { display: none !important; }
html[data-bk] #page .page-section:has(.bk) { padding: 0 !important; min-height: 0 !important; }
html[data-bk] #page .page-section:has(.bk) :is(.content-wrapper, .content) { padding: 0 !important; max-width: none !important; width: 100% !important; }
html[data-bk] #page .fluid-engine:has(.bk) { display: block !important; }
html[data-bk] #page .fe-block:has(.bk) { width: 100% !important; }
html[data-bk] #page .sqs-block:has(.bk) { padding: 0 !important; }
html[data-bk] #page .sqs-block:has(.bk) .sqs-block-content { padding: 0 !important; }

.bk-chrome--top { position: sticky; top: 0; z-index: 1000; background: transparent; overflow: visible; }

body.bk-skin { background: var(--bk-cream); color: var(--bk-ink); font-family: var(--bk-ui); -webkit-font-smoothing: antialiased; }
body.bk-skin #siteWrapper,
body.bk-skin #page,
body.bk-skin #page .section-background { background: var(--bk-cream) !important; }
body.bk-skin #page :is(h1, h2, h3) {
  font-family: var(--bk-display) !important; font-weight: 400 !important;
  text-transform: uppercase; line-height: .95 !important; letter-spacing: -.005em; color: var(--bk-ink) !important;
}
body.bk-skin #page :is(p, li, label, input, select, textarea) { font-family: var(--bk-ui) !important; }
body.bk-skin #page a:not([class]) { color: var(--bk-red); }

/* Squarespace's primary button: Add To Cart, Checkout, account forms */
body.bk-skin .sqs-button-element--primary {
  display: inline-flex !important; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 1.75rem !important;
  background: var(--bk-red) !important; color: var(--bk-cream) !important;
  border: 0 !important; border-radius: 999px !important;
  font-family: var(--bk-ui) !important; font-weight: 800 !important; font-size: .9375rem !important;
  letter-spacing: .04em !important; text-transform: uppercase !important;
  transition: background-color .15s ease;
}
body.bk-skin .sqs-button-element--primary:hover { background: var(--bk-red-dim) !important; }

/* --- product page ------------------------------------------------------- */
body.bk-skin .product-detail { padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: var(--bk-sec); }
body.bk-skin .product-nav { margin-bottom: 1.5rem; }
body.bk-skin .product-nav a {
  font-weight: 800 !important; font-size: .72rem !important; letter-spacing: .18em !important;
  text-transform: uppercase; color: var(--bk-red) !important;
}
body.bk-skin .product-gallery img { border-radius: var(--bk-r-img); }
body.bk-skin .product-title { font-size: clamp(2rem, 3.4vw, 3rem) !important; line-height: .95 !important; margin: 0 0 1rem !important; }
/* Photo and text start level; on wider screens the photo stays in view while
   the text column scrolls. */
body.bk-skin .product-content-wrapper { align-items: flex-start !important; }
@media (min-width: 768px) {
  body.bk-skin .product-gallery { position: sticky; top: calc(var(--bk-navh) + 1.5rem); }
}
body.bk-skin .product-price,
body.bk-skin .product-price-value {
  font-family: var(--bk-ui) !important; font-weight: 800 !important;
  font-size: 1.375rem !important; color: var(--bk-ink) !important;
}
body.bk-skin .variant-option-title {
  font-weight: 800 !important; font-size: .72rem !important; letter-spacing: .18em !important;
  text-transform: uppercase; color: var(--bk-mute) !important; margin-bottom: .75rem !important;
}
body.bk-skin .variant-radiobtn-wrapper { display: flex; flex-wrap: wrap; gap: .5rem; }
body.bk-skin .variant-radiobtn-wrapper .option,
body.bk-skin .variant-radiobtn-wrapper .radio-button-outer-label { margin: 0 !important; padding: 0 !important; height: auto !important; }
/* :not(#bk): the theme's own chip padding outranks a plain class rule. */
body.bk-skin .variant-radiobtn-wrapper .radio-label:not(#bk) {
  box-sizing: border-box !important;
  display: inline-flex; align-items: center; min-height: 46px; height: auto !important; padding: .55rem 1.1rem !important;
  border: 2px solid var(--bk-ink) !important; border-radius: 999px !important;
  background: transparent !important; color: var(--bk-ink) !important;
  font: 700 .8125rem/1.2 var(--bk-ui) !important; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
body.bk-skin .variant-radiobtn-wrapper .radio-button-input:checked + .radio-label:not(#bk) { background: var(--bk-ink) !important; color: var(--bk-cream) !important; }
body.bk-skin .variant-radiobtn-wrapper .radio-label:focus-visible,
body.bk-skin .variant-radiobtn-wrapper .radio-button-input:focus-visible + .radio-label { outline: 3px solid var(--bk-red); outline-offset: 3px; }
body.bk-skin .product-variants select {
  min-height: 52px; padding: 0 1.1rem !important;
  border: 2px solid var(--bk-ink) !important; border-radius: 999px !important;
  background-color: var(--bk-cream) !important; color: var(--bk-ink) !important; font-weight: 600 !important;
}
body.bk-skin .product-quantity-input {
  min-height: 52px; border: 2px solid var(--bk-ink) !important; border-radius: 999px !important; overflow: hidden;
}
body.bk-skin .product-quantity-input input {
  background: transparent !important; border: 0 !important; color: var(--bk-ink) !important; font-weight: 700 !important;
}
body.bk-skin .product-quantity-input-wrapper .form-input-effects { display: none; }
body.bk-skin .sqs-add-to-cart-button { min-height: 56px; width: 100%; font-size: 1rem !important; }
body.bk-skin .product-description { color: var(--bk-ink) !important; }
body.bk-skin .product-description :is(p, li) { font-size: 1rem !important; line-height: 1.65 !important; }
body.bk-skin .product-description strong { font-weight: 800; }
/* Ingredients and allergen notes, folded into a toggle by the JS. */
body.bk-skin .product-description .bk-ingr { margin-top: 1.25rem; }
body.bk-skin .bk-ingr p[data-indent] { margin-left: 0 !important; }
body.bk-skin .bk-ingr :is(p, li) { font-size: .9375rem !important; color: var(--bk-char) !important; }
body.bk-skin .bk-ingr ul { padding-left: 1.1rem; margin: .5rem 0 0; }


/* ==========================================================================
   VIDEOS — [ reel | YouTube ], both vertical 9:16, side by side
   Phones stack them.
   ========================================================================== */
.bk-reel { background: #fff; }
.bk-reel__row { display: grid; gap: clamp(2rem, 4vw, 2.5rem) clamp(1rem, 2.5vw, 2rem); grid-template-columns: 1fr; justify-items: center; max-width: 860px; margin-inline: auto; }
@media (min-width: 700px) { .bk-reel__row { grid-template-columns: 1fr 1fr; } }
.bk-reel__item { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; width: min(100%, 400px); }
.bk-reel__item .bk-eyebrow { margin: .5rem 0 0; }

.bk-reel__frame,
.bk-yt {
  position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: var(--bk-char);
  box-shadow: 0 24px 50px rgba(19,17,20,.18);
}
.bk-reel__frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-reel__sound {
  position: absolute; right: .75rem; bottom: .75rem; z-index: 1;
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(19,17,20,.72) !important; color: var(--bk-cream) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.bk-reel__sound svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bk-reel__sound .bk-reel__spk { fill: currentColor; }
/* Muted shows an X; sound on shows the waves. */
.bk-reel__sound[aria-pressed="false"] .bk-reel__wave,
.bk-reel__sound[aria-pressed="true"] .bk-reel__x { display: none; }

.bk-yt { background-size: cover; background-position: center; }
.bk-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bk-yt__play {
  position: absolute; inset: 0; width: 100%; display: flex; align-items: center; justify-content: center;
  background: rgba(19,17,20,.12) !important; transition: background-color .15s ease;
}
.bk-yt__play:hover { background: rgba(19,17,20,.25) !important; }
.bk-yt__play svg {
  width: 84px; height: 84px; padding: 22px 20px 22px 26px; border-radius: 999px;
  background: var(--bk-red); fill: var(--bk-cream); box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .15s ease;
}
.bk-yt__play:hover svg { transform: scale(1.06); }

/* --- shop page (Squarespace product grid) --------------------------------
   His real grid: the variant dropdowns and Add To Cart are Squarespace's.
   Only the look changes, to match the cards on our pages. */
body.bk-skin .product-list-section .section-divider-display { display: none !important; }
body.bk-skin .product-list-section { min-height: 0 !important; }
body.bk-skin .product-list {
  max-width: var(--bk-max) !important; margin-inline: auto !important;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--bk-gut) var(--bk-sec) !important;
}
body.bk-skin .product-list-header { margin-bottom: clamp(1.5rem, 4vw, 2.5rem) !important; }
body.bk-skin .product-list-header h2:not(#bk) { font-size: clamp(3rem, 9vw, 6rem) !important; text-align: left !important; margin: 0 !important; }
body.bk-skin .product-list-layout-container { gap: clamp(1.25rem, 3vw, 2rem) !important; }

body.bk-skin .product-list-item:not(#bk) {
  display: flex !important; flex-direction: column !important;
  padding: 0 0 clamp(1.25rem, 3vw, 1.75rem) !important;
  background: #fff; border: 1px solid var(--bk-line); border-radius: 22px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(19,17,20,.06);
}
body.bk-skin .product-list-item-link { display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0 !important; }
body.bk-skin .product-list-image-wrapper { margin: 0 !important; background: #fff; }
body.bk-skin .product-list-item-meta:not(#bk) {
  padding: 1.25rem clamp(1.25rem, 3vw, 1.75rem) 0 !important; margin: 0 !important; text-align: left !important;
  justify-content: flex-start !important; align-items: flex-start !important;   /* the theme centres it on phones */
}
body.bk-skin .product-list-title-price { width: 100%; }
body.bk-skin .product-list-title-price,
body.bk-skin .product-list-title-price > * { text-align: left !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; }
body.bk-skin .product-list-item-title:not(#bk) {
  font-family: var(--bk-display) !important; font-weight: 400 !important; text-transform: uppercase;
  font-size: clamp(1.35rem, 2vw, 1.75rem) !important; line-height: 1 !important; color: var(--bk-ink) !important;
}
body.bk-skin .product-list-item-price:not(#bk) {
  margin-top: .6rem !important; font-family: var(--bk-ui) !important; font-weight: 800 !important;
  font-size: 1.125rem !important; color: var(--bk-ink) !important;
}
/* The buy controls sit on the card floor, so all three line up. */
body.bk-skin .product-list-item-add-to-cart:not(#bk) {
  margin-top: auto !important; padding: 1.25rem clamp(1.25rem, 3vw, 1.75rem) 0 !important;
  display: flex; flex-direction: column; gap: .75rem;
}
body.bk-skin .product-list-item-add-to-cart .product-variants { margin: 0 !important; }
body.bk-skin .product-list-item-add-to-cart .form-input-effects { display: none !important; }
body.bk-skin .product-list-item-add-to-cart .variant-select-wrapper { position: relative; }
body.bk-skin .product-list-item-add-to-cart select:not(#bk) {
  width: 100% !important; min-height: 52px; padding: 0 2.75rem 0 1.1rem !important;
  border: 2px solid var(--bk-ink) !important; border-radius: 999px !important;
  background: transparent !important; color: var(--bk-ink) !important;
  font-family: var(--bk-ui) !important; font-weight: 600 !important; font-size: .9375rem !important;
  -webkit-appearance: none; appearance: none;
}
body.bk-skin .product-list-item-add-to-cart .variant-select-icon { right: 1.1rem !important; pointer-events: none; }
body.bk-skin .product-list-item-add-to-cart .sqs-add-to-cart-button { width: 100% !important; min-height: 54px; }