/* ==========================================================================
   The Braai Boys — design tokens
   ========================================================================== */
:root {
  --bb-bg: #0d0a09;
  --bb-surface: #17100d;
  --bb-surface-2: #1f1512;
  --bb-cream: #f4ede2;
  --bb-cream-70: rgba(244, 237, 226, .7);
  --bb-cream-55: rgba(244, 237, 226, .55);
  --bb-cream-40: rgba(244, 237, 226, .4);
  --bb-cream-14: rgba(244, 237, 226, .14);
  --bb-cream-10: rgba(244, 237, 226, .1);
  --bb-orange: #ff7a18;
  --bb-orange-light: #ffb066;
  --bb-red: #a01a0d;
  --bb-red-dark: #7d150e;
  --bb-red-glow: #b02a1c;
  --bb-red-deep: #530d07;
  --bb-cream-surface: #f4ede2;
  --bb-cream-surface-text: #17100d;

  --bb-font-display: 'Alfa Slab One', Georgia, serif;
  --bb-font-label: 'Barlow Condensed', system-ui, sans-serif;
  --bb-font-body: 'Karla', system-ui, sans-serif;
  --bb-font-editorial: 'Newsreader', Georgia, serif;

  --bb-container: 1240px;
  --bb-header-h: 92px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
html, body { margin: 0; padding: 0; background: var(--bb-bg); }
body { -webkit-font-smoothing: antialiased; font-family: var(--bb-font-body); color: var(--bb-cream); overflow-x: hidden; position: relative; }
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--bb-orange); text-decoration: none; }
a:hover { color: var(--bb-orange-light); }
img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
input, select, textarea, button { font-family: inherit; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

.bb-container { max-width: var(--bb-container); margin: 0 auto; padding: 0 22px; }
.bb-eyebrow { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .28em; font-size: 12px; color: var(--bb-orange-light); }
.bb-eyebrow--muted { letter-spacing: .3em; color: var(--bb-cream-55); }

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes bb-rise { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(0,-96vh,0); } }
@keyframes bb-drift {
  0% { transform: translate3d(0,0,0) scale(1); opacity: 0; }
  6% { opacity: 1; }
  22% { transform: translate3d(16px,0,0) scale(.95); }
  44% { transform: translate3d(-14px,0,0) scale(1.05); opacity: .55; }
  62% { transform: translate3d(20px,0,0) scale(.85); opacity: 1; }
  82% { transform: translate3d(-8px,0,0) scale(.6); opacity: .35; }
  100% { transform: translate3d(10px,0,0) scale(.2); opacity: 0; }
}
@keyframes bb-marquee { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-50%,0,0); } }
@keyframes bb-drawer-in { 0% { transform: translate3d(100%,0,0); } 100% { transform: translate3d(0,0,0); } }
@keyframes bb-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes bb-flicker { 0%, 100% { opacity: .55; } 50% { opacity: .85; } }

[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  [data-ember] { display: none; }
  .bb-marquee-track { animation: none; }
}

.mobile-only { display: block; }
.desktop-only { display: none !important; }
@media (min-width: 900px) {
  .desktop-only { display: flex !important; }
  .mobile-only { display: none !important; }
}

/* ==========================================================================
   Buttons & badges
   ========================================================================== */
.bb-btn {
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--bb-font-label); font-weight: 700; text-transform: uppercase; letter-spacing: .16em;
  font-size: 15px; padding: 17px 30px; border: 0; transition: background .2s ease, color .2s ease;
}
.bb-btn--primary { background: var(--bb-orange); color: var(--bb-bg); }
.bb-btn--primary:hover { background: var(--bb-orange-light); color: var(--bb-bg); }
.bb-btn--dark { background: var(--bb-bg); color: var(--bb-orange); }
.bb-btn--dark:hover { background: var(--bb-cream); color: var(--bb-red); }
.bb-btn--outline { background: transparent; border: 1px solid rgba(244,237,226,.3); color: var(--bb-cream); }
.bb-btn--outline:hover { border-color: var(--bb-orange); color: var(--bb-orange); }
.bb-btn--block { width: 100%; }
.bb-btn:disabled { opacity: .5; cursor: not-allowed; }

.bb-halal-seal {
  width: 118px; height: 118px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 36% 30%, var(--bb-red-glow), var(--bb-red-dark) 58%, var(--bb-red-deep));
  border: 1px solid rgba(244,237,226,.3);
  box-shadow: 0 13px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 6px rgba(0,0,0,.4);
  transform: rotate(-9deg); display: grid; place-items: center;
}
.bb-halal-seal__inner {
  border-radius: 50%; border: 1px dashed rgba(244,237,226,.4); width: 82%; height: 82%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; padding: 4px;
}
.bb-halal-seal__label { font-family: var(--bb-font-label); letter-spacing: .22em; text-transform: uppercase; color: var(--bb-cream-70); }
.bb-halal-seal__word { font-family: var(--bb-font-display); text-transform: uppercase; color: var(--bb-cream); line-height: 1; }
.bb-halal-seal__est { font-family: var(--bb-font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--bb-cream-55); }
.bb-halal-seal--sm { width: 76px; height: 76px; }
.bb-halal-seal--xs { width: 72px; height: 72px; }

.bb-tag {
  font-family: var(--bb-font-label); letter-spacing: .16em; text-transform: uppercase; font-size: 10px;
  background: rgba(13,10,9,.8); border: 1px solid rgba(255,122,24,.5); color: var(--bb-orange-light); padding: 4px 8px;
}
.bb-pill {
  font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .14em; font-size: 12px;
  padding: 9px 16px; border: 1px solid rgba(244,237,226,.24); color: rgba(244,237,226,.8); cursor: pointer; background: transparent;
}
.bb-pill.is-active, .bb-pill:hover { background: var(--bb-orange); color: var(--bb-bg); font-weight: 700; border-color: var(--bb-orange); }
.bb-paycard {
  border: 1px solid rgba(244,237,226,.2); padding: 7px 10px; font-family: var(--bb-font-label);
  font-size: 11px; letter-spacing: .1em; color: rgba(244,237,226,.7); display: inline-block;
}
.bb-paycard--accent { border-color: rgba(255,122,24,.4); color: var(--bb-orange-light); }

/* ==========================================================================
   Header
   ========================================================================== */
.bb-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(13,10,9,.94), rgba(13,10,9,.55) 70%, rgba(13,10,9,0));
  backdrop-filter: blur(6px);
}
.bb-header__brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.bb-header__brand img { width: 44px; height: 44px; object-fit: contain; }
.bb-header__brand-name { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .16em; font-weight: 700; font-size: 13px; color: var(--bb-cream); }
.bb-nav { align-items: center; font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .14em; font-size: 13px; font-weight: 600; }
.bb-nav ul.bb-nav-menu { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.bb-nav ul.bb-nav-menu li { display: flex; align-items: center; }
.bb-nav a { color: #cfc4b6; }
.bb-nav a:hover, .bb-nav a.is-current, .bb-nav .current-menu-item > a { color: var(--bb-cream); }
.bb-nav__cart { cursor: pointer; padding: 8px 16px; background: var(--bb-orange); color: var(--bb-bg) !important; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.bb-nav__cart:hover { background: var(--bb-orange-light); color: var(--bb-bg) !important; }
.bb-header__cutoff {
  font-family: var(--bb-font-label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--bb-orange-light);
  border: 1px solid rgba(255,122,24,.4); padding: 6px 10px;
}
.bb-noise {
  position: fixed; inset: 0; z-index: 54; pointer-events: none; opacity: .13; mix-blend-mode: overlay;
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27180%27 height=%27180%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.85%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27180%27 height=%27180%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
  background-size: 180px 180px;
}
.bb-vignette { position: fixed; inset: 0; z-index: 53; pointer-events: none; background: radial-gradient(125% 95% at 50% 42%, transparent 52%, rgba(0,0,0,.45) 100%); }

/* ==========================================================================
   Hero
   ========================================================================== */
.bb-hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; background: #120c09; }
.bb-hero__img {
  position: absolute; inset: -8% -4%; background-size: cover; background-position: center; background-repeat: no-repeat;
  filter: contrast(1.1) saturate(.85) brightness(.82); will-change: transform;
}
.bb-hero__scrim {
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 74% 8%, rgba(255,122,24,.2), transparent 52%),
    linear-gradient(100deg, rgba(13,10,9,.9) 0%, rgba(13,10,9,.72) 38%, rgba(13,10,9,.12) 74%),
    linear-gradient(180deg, rgba(13,10,9,.62) 0%, rgba(13,10,9,.5) 45%, rgba(13,10,9,.97) 94%);
}
.bb-hero__content { position: relative; padding: clamp(88px,14svh,120px) 22px clamp(36px,8svh,72px); max-width: 1200px; margin: 0 auto; width: 100%; }
.bb-hero__kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.bb-hero__kicker span.bb-rule { width: 26px; height: 1px; background: var(--bb-orange); display: inline-block; }
.bb-hero h1 { margin: 0; font-family: var(--bb-font-display); font-weight: 400; font-size: clamp(40px, min(10.5vw, 13.5svh), 118px); line-height: .94; letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance; }
.bb-hero h1 .accent { color: var(--bb-orange); }
.bb-hero__sub { margin: clamp(14px,2.4svh,22px) 0 0; max-width: 470px; font-family: var(--bb-font-editorial); font-size: clamp(17px,4.2vw,21px); line-height: 1.55; font-weight: 300; color: rgba(244,237,226,.78); }
.bb-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: clamp(18px,3.4svh,30px); }
.bb-hero__note { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: rgba(244,237,226,.6); }
.bb-hero__seal { position: absolute; right: 24px; bottom: 8px; }

.bb-embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bb-embers__glow { position: absolute; inset: auto 0 -14% 0; height: 40%; background: radial-gradient(60% 100% at 50% 100%, rgba(255,122,24,.28), transparent 70%); filter: blur(14px); animation: bb-flicker 3.4s ease-in-out infinite; }
.bb-ember { position: absolute; bottom: -12px; will-change: transform; }
.bb-ember span { display: block; border-radius: 50% 50% 45% 45%; will-change: transform, opacity; }

/* ==========================================================================
   Marquee
   ========================================================================== */
.bb-marquee { background: var(--bb-cream); color: var(--bb-cream-surface-text); overflow: hidden; padding: 13px 0; border-top: 1px solid var(--bb-bg); border-bottom: 1px solid rgba(23,16,13,.12); }
.bb-marquee-track { display: flex; width: max-content; animation: bb-marquee 26s linear infinite; font-family: var(--bb-font-display); font-size: clamp(18px,4vw,26px); text-transform: uppercase; letter-spacing: .02em; gap: 34px; padding-right: 34px; }
.bb-marquee-track .dot { color: var(--bb-orange); }

/* ==========================================================================
   Heritage
   ========================================================================== */
.bb-heritage { position: relative; padding: clamp(84px,12svh,110px) 0 clamp(36px,7svh,80px); background: var(--bb-bg); overflow: hidden; }
.bb-heritage__glow { position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 110%, rgba(140,28,19,.55), transparent 60%); animation: bb-flicker 6s ease-in-out infinite; }
.bb-heritage__lines { display: grid; gap: clamp(14px,2.6svh,26px); font-family: var(--bb-font-display); font-size: clamp(22px, min(5.4vw, 5.2svh), 56px); line-height: 1.08; text-transform: uppercase; }
.bb-heritage__lines .l1 { color: var(--bb-cream); }
.bb-heritage__lines .l2 { color: rgba(244,237,226,.42); }
.bb-heritage__lines .l3 { color: var(--bb-orange); }
.bb-heritage__strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: clamp(22px,4svh,44px); }
.bb-heritage__strip div { height: clamp(72px,12svh,150px); background-size: cover; background-position: center; filter: contrast(1.07) saturate(.88) brightness(.96); }

/* ==========================================================================
   Category tiles
   ========================================================================== */
.bb-categories { background: var(--bb-cream); color: var(--bb-cream-surface-text); padding: 84px 0 0; }
.bb-categories__head { padding: 0 22px 44px; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px; }
.bb-categories__head h2 { margin: 0; font-family: var(--bb-font-display); font-size: clamp(30px,7vw,62px); line-height: .98; text-transform: uppercase; max-width: 620px; }
.bb-categories__head h2 .accent { color: var(--bb-red); }
.bb-categories__head p { margin: 0; max-width: 330px; font-family: var(--bb-font-editorial); font-size: 17px; line-height: 1.6; font-weight: 300; color: rgba(23,16,13,.72); }
.bb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 2px; background: var(--bb-surface); }
.bb-tile { position: relative; min-height: 46vh; overflow: hidden; cursor: pointer; background: var(--bb-surface); display: block; }
.bb-tile__img { position: absolute; inset: 0; background-size: cover; background-position: center; filter: contrast(1.07) saturate(.88) brightness(.96); transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.bb-tile:hover .bb-tile__img { transform: scale(1.07); }
.bb-tile__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,10,9,.1), rgba(13,10,9,.88)); }
.bb-tile__body { position: absolute; inset: auto 0 0 0; padding: 24px; display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.bb-tile__name { font-family: var(--bb-font-display); font-size: clamp(26px,5vw,40px); text-transform: uppercase; color: var(--bb-cream); line-height: 1; }
.bb-tile__meta { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .2em; font-size: 11px; color: rgba(244,237,226,.5); margin-top: 8px; }
.bb-tile__arrow { width: 40px; height: 40px; border: 1px solid rgba(244,237,226,.32); color: rgba(244,237,226,.8); display: grid; place-items: center; flex: none; }

/* ==========================================================================
   Trust / delivery
   ========================================================================== */
.bb-trust { position: relative; background: var(--bb-surface); padding: 92px 22px; overflow: hidden; }
.bb-trust__glow { position: absolute; inset: 0; background: radial-gradient(70% 60% at 85% 20%, rgba(255,122,24,.14), transparent 60%); }
.bb-trust__grid { position: relative; max-width: var(--bb-container); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 46px; align-items: start; }
.bb-trust h2 { margin: 16px 0 0; font-family: var(--bb-font-display); font-size: clamp(30px,6.4vw,56px); line-height: 1; text-transform: uppercase; }
.bb-trust h2 .accent { color: var(--bb-orange); }
.bb-trust__list { display: grid; gap: 0; margin-top: 34px; border-top: 1px solid rgba(244,237,226,.14); }
.bb-trust__item { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid rgba(244,237,226,.14); }
.bb-trust__num { font-family: var(--bb-font-display); color: rgba(244,237,226,.34); font-size: 15px; min-width: 34px; }
.bb-trust__item-title { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .14em; font-size: 16px; font-weight: 700; }
.bb-trust__item-body { color: rgba(244,237,226,.65); font-family: var(--bb-font-editorial); font-size: 16px; line-height: 1.55; font-weight: 300; margin-top: 6px; }
.bb-zones-card { background: linear-gradient(160deg, var(--bb-surface-2), #14100e); border: 1px solid rgba(255,122,24,.28); padding: 30px; }
.bb-zones-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid rgba(244,237,226,.14); }
.bb-zones-card__cutoff { font-family: var(--bb-font-display); font-size: 13px; color: var(--bb-orange); }
.bb-zones-card__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(244,237,226,.1); }
.bb-zones-card__row:last-of-type { border-bottom: 0; }
.bb-zones-card__row .zone-eta { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .14em; font-size: 13px; color: rgba(244,237,226,.66); }
.bb-zones-card__foot { margin-top: 18px; font-size: 13px; line-height: 1.6; color: rgba(244,237,226,.6); }

/* ==========================================================================
   Photography direction / editorial grid
   ========================================================================== */
.bb-editorial { background: var(--bb-bg); padding: 92px 22px; border-top: 1px solid rgba(244,237,226,.1); }
.bb-editorial__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; }
.bb-editorial h2 { margin: 0; font-family: var(--bb-font-display); font-size: clamp(28px,6vw,52px); line-height: 1; text-transform: uppercase; max-width: 620px; }
.bb-editorial h2 .accent { color: var(--bb-orange); }
.bb-editorial__head p { margin: 0; max-width: 370px; font-family: var(--bb-font-editorial); font-size: 17px; line-height: 1.6; font-weight: 300; color: rgba(244,237,226,.7); }
.bb-editorial__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 16px; margin-top: 44px; }
.bb-editorial__card { border: 1px solid rgba(244,237,226,.14); padding: 0 0 20px; }
.bb-editorial__card-img { aspect-ratio: 1; background-size: cover; background-position: center; filter: contrast(1.07) saturate(.88) brightness(.96); }
.bb-editorial__card-title { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .16em; font-size: 14px; font-weight: 700; color: rgba(244,237,226,.9); margin-top: 18px; padding: 0 18px; }
.bb-editorial__card-body { font-family: var(--bb-font-editorial); font-size: 16px; line-height: 1.55; font-weight: 300; color: rgba(244,237,226,.72); margin-top: 6px; padding: 0 18px; }
.bb-editorial__note { margin-top: 20px; padding: 18px 20px; border: 1px dashed rgba(255,122,24,.4); font-size: 14px; line-height: 1.6; color: rgba(244,237,226,.7); }

/* ==========================================================================
   Proof / receipts / reviews
   ========================================================================== */
.bb-proof { background: var(--bb-surface); padding: 88px 22px; border-top: 1px solid rgba(244,237,226,.1); }
.bb-proof h2 { margin: 16px 0 0; font-family: var(--bb-font-display); font-size: clamp(28px,6vw,52px); line-height: 1; text-transform: uppercase; }
.bb-proof h2 .accent { color: var(--bb-orange); }
.bb-proof__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 16px; margin-top: 40px; }
.bb-proof__card { border: 1px solid rgba(244,237,226,.14); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.bb-proof__card-label { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .2em; font-size: 11px; color: rgba(244,237,226,.5); }
.bb-proof__placeholder { aspect-ratio: 3/4; background-image: repeating-linear-gradient(122deg, #1d1512 0 9px, #241a16 9px 18px); border: 1px dashed rgba(244,237,226,.22); display: grid; place-items: center; text-align: center; padding: 18px; font-family: var(--bb-font-label); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(244,237,226,.45); }
.bb-proof__body { font-family: var(--bb-font-editorial); font-size: 16px; line-height: 1.55; font-weight: 300; color: rgba(244,237,226,.72); }
.bb-proof__sourcing-row { display: flex; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(244,237,226,.1); font-size: 15px; }
.bb-proof__sourcing-row span:first-child { color: rgba(244,237,226,.65); }
.bb-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 16px; margin-top: 16px; }
.bb-review { border: 1px solid rgba(244,237,226,.14); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.bb-review__stars { font-family: var(--bb-font-display); color: var(--bb-orange); font-size: 13px; letter-spacing: .1em; }
.bb-review__quote { font-family: var(--bb-font-editorial); font-size: 19px; line-height: 1.55; font-weight: 300; }
.bb-review__meta { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; color: rgba(244,237,226,.5); margin-top: auto; }

/* ==========================================================================
   CTA banner
   ========================================================================== */
.bb-cta { position: relative; background: var(--bb-red); color: var(--bb-cream); padding: clamp(70px,12vw,130px) 22px; text-align: center; overflow: hidden; }
.bb-cta__glow { position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 120%, rgba(255,122,24,.6), transparent 60%); }
.bb-cta__inner { position: relative; max-width: 900px; margin: 0 auto; }
.bb-cta h2 { margin: 0; font-family: var(--bb-font-display); font-weight: 400; font-size: clamp(32px,8vw,78px); line-height: .98; text-transform: uppercase; }

/* ==========================================================================
   Shop / product grid
   ========================================================================== */
.bb-page-head { padding: 96px 22px 0; max-width: var(--bb-container); margin: 0 auto; }
.bb-page-head h1 { margin: 12px 0 0; font-family: var(--bb-font-display); font-size: clamp(34px,8vw,70px); line-height: .96; text-transform: uppercase; }
.bb-page-head p { margin: 18px 0 0; max-width: 52ch; font-family: var(--bb-font-editorial); font-size: 19px; line-height: 1.65; font-weight: 300; color: rgba(244,237,226,.74); }
.bb-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 8px; padding: 0 22px; max-width: var(--bb-container); margin-left: auto; margin-right: auto; }

.bb-product-grid, ul.products {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)) !important; gap: 16px !important;
  margin: 26px 0 0 !important; padding: 0 22px 120px !important; max-width: var(--bb-container); margin-left: auto !important; margin-right: auto !important; list-style: none !important;
}
.bb-product-card, ul.products li.product {
  background: var(--bb-surface); border: 1px solid rgba(244,237,226,.1); cursor: pointer; display: flex; flex-direction: column; transition: border-color .2s ease; margin: 0 !important; padding: 0 !important;
}
.bb-product-card:hover, ul.products li.product:hover { border-color: rgba(255,122,24,.6); }
.bb-product-card__link { display: flex; flex-direction: column; flex: 1; color: inherit; }
.bb-product-card__link:hover { color: inherit; }
.bb-product-card__media, ul.products li.product .bb-media { position: relative; aspect-ratio: 1; background-image: repeating-linear-gradient(122deg, #1d1310 0 9px, #241813 9px 18px); display: grid; place-items: center; overflow: hidden; }
.bb-product-card__media img, ul.products li.product img { position: absolute !important; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.07) saturate(.88) brightness(.96); }
.bb-product-card__seal { position: absolute; right: 10px; bottom: 10px; }
.bb-product-card__tag { position: absolute; top: 10px; left: 10px; }
.bb-product-card__body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bb-product-card__cat { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .18em; font-size: 11px; color: rgba(244,237,226,.5); }
.bb-product-card__name { font-family: var(--bb-font-display); font-size: 18px; line-height: 1.2; }
.bb-product-card__weight { font-size: 13px; color: rgba(244,237,226,.55); }
.bb-product-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.bb-product-card__price { font-family: var(--bb-font-display); font-size: 19px; color: var(--bb-cream); }
.bb-product-card__price small { font-size: 12px; color: rgba(244,237,226,.5); font-weight: normal; }
.bb-product-card__add { font-family: var(--bb-font-label); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; background: var(--bb-orange); color: var(--bb-bg); padding: 10px 14px; border: 0; cursor: pointer; }
.bb-product-card__add:hover { background: var(--bb-orange-light); }

/* WooCommerce cleanup */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--bb-cream); font-family: var(--bb-font-display); }
.woocommerce span.onsale { display: none; }
.woocommerce nav.woocommerce-pagination { padding: 0 22px 80px; max-width: var(--bb-container); margin: 0 auto; }
.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; gap: 8px; }
.woocommerce nav.woocommerce-pagination ul li { border: 0 !important; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { border: 1px solid rgba(244,237,226,.24) !important; color: var(--bb-cream) !important; font-family: var(--bb-font-label); padding: 10px 16px !important; }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--bb-orange) !important; color: var(--bb-bg) !important; }

/* ==========================================================================
   Single product
   ========================================================================== */
.bb-product { padding: 92px 0 120px; }
.bb-product__crumb { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .18em; font-size: 11px; color: rgba(244,237,226,.5); }
.bb-product__crumb a { color: rgba(244,237,226,.5); }
.bb-product__layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 44px; margin-top: 22px; align-items: start; }
.bb-product__gallery-main { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--bb-surface); cursor: zoom-in; touch-action: pan-y; }
.bb-product__gallery-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.07) saturate(.88) brightness(.96); transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.bb-product__gallery-thumbs { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 10px; }
.bb-product__gallery-thumbs img { aspect-ratio: 1; object-fit: cover; width: 100%; height: 100%; filter: contrast(1.07) saturate(.88) brightness(.96); border: 1px solid transparent; cursor: pointer; }
.bb-product__gallery-thumbs img.is-active { border-color: rgba(255,122,24,.5); }
.bb-product__bestseller { position: absolute; top: 14px; left: 14px; font-family: var(--bb-font-label); letter-spacing: .16em; font-size: 10px; background: var(--bb-orange); color: var(--bb-bg); padding: 5px 10px; font-weight: 700; }
.bb-product__zoom-hint { position: absolute; bottom: 14px; left: 14px; font-family: var(--bb-font-label); letter-spacing: .16em; font-size: 10px; text-transform: uppercase; background: rgba(13,10,9,.7); border: 1px solid rgba(244,237,226,.2); color: rgba(244,237,226,.75); padding: 6px 10px; }
.bb-product__info { position: sticky; top: calc(var(--bb-header-h) + 6px); }
.bb-product__info h1 { margin: 12px 0 0; font-family: var(--bb-font-display); font-size: clamp(26px,4.4vw,52px); line-height: 1; text-transform: uppercase; overflow-wrap: break-word; }
.bb-product__price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin-top: 18px; }
.bb-product__price { font-family: var(--bb-font-display); font-size: 34px; color: var(--bb-orange); }
.bb-product__price small { font-size: 15px; color: rgba(244,237,226,.6); }
.bb-product__packnote { font-size: 13px; color: rgba(244,237,226,.55); }
.bb-product__desc { margin: 20px 0 0; font-family: var(--bb-font-editorial); font-size: 19px; line-height: 1.68; font-weight: 300; color: rgba(244,237,226,.8); max-width: 50ch; }
.bb-product__specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: 1px; background: rgba(244,237,226,.14); margin-top: 26px; }
.bb-product__spec { background: var(--bb-surface); padding: 16px; }
.bb-product__spec-label { font-family: var(--bb-font-label); letter-spacing: .16em; text-transform: uppercase; font-size: 10px; color: rgba(244,237,226,.5); }
.bb-product__spec-value { font-family: var(--bb-font-display); font-size: 16px; margin-top: 6px; }
.bb-product__buybar { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin-top: 26px; }
.bb-qty { display: flex; align-items: center; border: 1px solid rgba(244,237,226,.24); }
.bb-qty button { cursor: pointer; padding: 14px 18px; font-size: 18px; color: var(--bb-orange-light); background: transparent; border: 0; }
.bb-qty input { min-width: 38px; width: 48px; text-align: center; font-family: var(--bb-font-display); background: transparent; border: 0; color: var(--bb-cream); font-size: 15px; -moz-appearance: textfield; }
.bb-qty input::-webkit-outer-spin-button, .bb-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bb-product__addcart { flex: 1; min-width: 200px; }
.bb-product__note { margin-top: 16px; padding: 14px 16px; border: 1px solid rgba(255,122,24,.3); background: rgba(255,122,24,.07); font-size: 13px; line-height: 1.6; color: rgba(244,237,226,.75); }

.bb-cooking { background: var(--bb-cream); color: var(--bb-cream-surface-text); margin-top: 76px; padding: 76px 22px; }
.bb-cooking__grid { max-width: var(--bb-container); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 40px; }
.bb-cooking__kicker { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .24em; font-size: 12px; color: var(--bb-red); }
.bb-cooking h2 { margin: 12px 0 0; font-family: var(--bb-font-display); font-size: clamp(26px,5vw,42px); line-height: 1.02; text-transform: uppercase; }
.bb-cooking__steps { display: grid; gap: 0; margin-top: 24px; border-top: 1px solid rgba(23,16,13,.15); }
.bb-cooking__step { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(23,16,13,.15); }
.bb-cooking__step-num { font-family: var(--bb-font-display); color: var(--bb-red); min-width: 26px; }
.bb-cooking__step-text { font-size: 15px; line-height: 1.6; }
.bb-cooking__pairs { background: #fff; padding: 24px; }
.bb-cooking__pairs-label { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .2em; font-size: 11px; color: var(--bb-red); }
.bb-cooking__pairs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bb-cooking__pairs-tags span { border: 1px solid rgba(23,16,13,.2); padding: 8px 12px; font-size: 13px; }
.bb-cooking__photo { aspect-ratio: 16/10; background-size: cover; background-position: center; filter: contrast(1.07) saturate(.88) brightness(.96); }

.bb-related { padding: 76px 22px 0; max-width: var(--bb-container); margin: 0 auto 60px; }
.bb-related h2 { margin: 0 0 26px; font-family: var(--bb-font-display); font-size: clamp(24px,5vw,38px); text-transform: uppercase; }
.bb-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 16px; }
.bb-related__card { background: var(--bb-surface); border: 1px solid rgba(244,237,226,.1); cursor: pointer; }
.bb-related__card:hover { border-color: rgba(255,122,24,.6); }
.bb-related__media { position: relative; aspect-ratio: 1; background-image: repeating-linear-gradient(122deg, #1d1310 0 9px, #241813 9px 18px); overflow: hidden; }
.bb-related__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.07) saturate(.88) brightness(.96); }
.bb-related__body { padding: 16px; }
.bb-related__name { font-family: var(--bb-font-display); font-size: 16px; line-height: 1.25; }
.bb-related__row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.bb-related__row span:first-child { font-size: 13px; color: rgba(244,237,226,.55); }
.bb-related__row span:last-child { font-family: var(--bb-font-display); color: var(--bb-orange); }

/* ==========================================================================
   Braai Tips (blog) archive + single
   ========================================================================== */
.bb-tips-featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 0; margin: 34px 22px 0; max-width: calc(var(--bb-container) - 0px); margin-left: auto; margin-right: auto; border: 1px solid rgba(244,237,226,.14); cursor: pointer; }
.bb-tips-featured:hover { border-color: rgba(255,122,24,.55); }
.bb-tips-featured__media { position: relative; min-height: 320px; }
.bb-tips-featured__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.07) saturate(.88) brightness(.96); }
.bb-tips-featured__latest { position: absolute; top: 16px; left: 16px; font-family: var(--bb-font-label); letter-spacing: .16em; font-size: 10px; text-transform: uppercase; background: var(--bb-orange); color: var(--bb-bg); padding: 5px 10px; font-weight: 700; }
.bb-tips-featured__body { padding: clamp(26px,4vw,44px); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.bb-tips-featured__meta { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .2em; font-size: 11px; color: rgba(244,237,226,.5); }
.bb-tips-featured__title { font-family: var(--bb-font-display); font-size: clamp(24px,3.4vw,36px); line-height: 1.12; text-transform: uppercase; }
.bb-tips-featured__excerpt { font-size: 15px; line-height: 1.7; color: rgba(244,237,226,.7); max-width: 46ch; }
.bb-tips-featured__cta { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .16em; font-size: 13px; color: var(--bb-orange); margin-top: 4px; }

.bb-tips-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 16px; margin: 16px 22px 0; max-width: var(--bb-container); margin-left: auto; margin-right: auto; }
.bb-tip-card { border: 1px solid rgba(244,237,226,.12); cursor: pointer; display: flex; flex-direction: column; }
.bb-tip-card:hover { border-color: rgba(255,122,24,.55); }
.bb-tip-card__media { position: relative; aspect-ratio: 3/2; }
.bb-tip-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.07) saturate(.88) brightness(.96); }
.bb-tip-card__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.bb-tip-card__meta { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .2em; font-size: 11px; color: rgba(244,237,226,.5); }
.bb-tip-card__title { font-family: var(--bb-font-display); font-size: 19px; line-height: 1.22; }
.bb-tip-card__excerpt { font-size: 14px; line-height: 1.65; color: rgba(244,237,226,.62); }
.bb-tip-card__date { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: rgba(244,237,226,.4); margin-top: auto; padding-top: 12px; }

.bb-newsletter { background: var(--bb-red); margin-top: 76px; padding: 66px 22px; text-align: center; }
.bb-newsletter__inner { max-width: 640px; margin: 0 auto; }
.bb-newsletter h2 { margin: 0; font-family: var(--bb-font-display); font-size: clamp(24px,5vw,40px); line-height: 1.05; text-transform: uppercase; }
.bb-newsletter form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.bb-newsletter input[type="email"] { flex: 1; min-width: 220px; background: rgba(13,10,9,.35); border: 1px solid rgba(244,237,226,.35); color: var(--bb-cream); font-family: var(--bb-font-body); font-size: 15px; padding: 15px 16px; }
.bb-newsletter button { cursor: pointer; background: var(--bb-bg); color: var(--bb-orange); font-family: var(--bb-font-label); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: 14px; padding: 15px 26px; border: 0; }

.bb-article-hero { position: relative; min-height: 62svh; display: grid; align-items: end; overflow: hidden; }
.bb-article-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.07) saturate(.88) brightness(.96); }
.bb-article-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,10,9,.55) 0%, rgba(13,10,9,.35) 40%, rgba(13,10,9,.95) 100%); }
.bb-article-hero__inner { position: relative; max-width: 900px; margin: 0 auto; width: 100%; padding: 120px 22px 46px; }
.bb-article-hero h1 { margin: 14px 0 0; font-family: var(--bb-font-display); font-size: clamp(30px,6.4vw,62px); line-height: 1.02; text-transform: uppercase; max-width: 20ch; }
.bb-article-hero__byline { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 20px; font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: rgba(244,237,226,.6); }

.bb-article-body { max-width: 720px; margin: 0 auto; padding: 56px 22px 0; font-family: var(--bb-font-editorial); font-size: 20px; line-height: 1.7; font-weight: 300; color: rgba(244,237,226,.78); }
.bb-article-body > p:first-child { font-size: clamp(21px,3vw,26px); line-height: 1.5; color: var(--bb-cream); }
.bb-article-body h2 { margin: 40px 0 0; font-family: var(--bb-font-display); font-size: clamp(22px,3.4vw,30px); line-height: 1.2; text-transform: uppercase; color: var(--bb-cream); }
.bb-article-body p { margin: 18px 0 0; }
.bb-article-body blockquote { margin: 34px 0 0; padding: 26px 28px; border-left: 3px solid var(--bb-orange); background: rgba(255,122,24,.07); font-family: var(--bb-font-display); font-size: clamp(19px,2.8vw,24px); line-height: 1.3; color: var(--bb-cream); }
.bb-article-glance { margin: 36px 0 0; border: 1px solid rgba(244,237,226,.16); }
.bb-article-glance__head { padding: 18px 20px; border-bottom: 1px solid rgba(244,237,226,.16); font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .2em; font-size: 12px; color: var(--bb-orange-light); }
.bb-article-glance__row { display: flex; justify-content: space-between; gap: 16px; padding: 15px 20px; border-bottom: 1px solid rgba(244,237,226,.1); font-size: 15px; }
.bb-article-glance__row:last-child { border-bottom: 0; }
.bb-article-glance__row span:first-child { color: rgba(244,237,226,.65); }

.bb-article-promo { max-width: var(--bb-container); margin: 66px auto 0; padding: 0 22px; }
.bb-article-promo__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 0; border: 1px solid rgba(255,122,24,.3); }
.bb-article-promo__media { position: relative; min-height: 260px; }
.bb-article-promo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.07) saturate(.88) brightness(.96); }
.bb-article-promo__body { padding: clamp(24px,4vw,40px); display: flex; flex-direction: column; justify-content: center; gap: 14px; background: var(--bb-surface); }
.bb-article-promo__price { font-family: var(--bb-font-display); font-size: 22px; color: var(--bb-orange); }
.bb-article-promo__price small { font-size: 13px; color: rgba(244,237,226,.6); }
.bb-article-promo__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

.bb-read-next { max-width: var(--bb-container); margin: 66px auto 60px; padding: 0 22px; }
.bb-read-next h2 { margin: 0 0 24px; font-family: var(--bb-font-display); font-size: clamp(22px,4vw,34px); text-transform: uppercase; }
.bb-read-next__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 16px; }
.bb-read-next__card { border: 1px solid rgba(244,237,226,.12); cursor: pointer; }
.bb-read-next__card:hover { border-color: rgba(255,122,24,.55); }
.bb-read-next__media { position: relative; aspect-ratio: 3/2; }
.bb-read-next__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.07) saturate(.88) brightness(.96); }
.bb-read-next__body { padding: 18px; }
.bb-read-next__cat { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .2em; font-size: 10px; color: var(--bb-orange-light); }
.bb-read-next__title { font-family: var(--bb-font-display); font-size: 17px; line-height: 1.25; margin-top: 8px; }

/* ==========================================================================
   Cart / checkout
   ========================================================================== */
.bb-cart, .bb-checkout { padding: 96px 22px 120px; max-width: var(--bb-container); margin: 0 auto; }
.bb-cart h1, .bb-checkout h1 { margin: 12px 0 0; font-family: var(--bb-font-display); font-size: clamp(32px,7vw,58px); line-height: .98; text-transform: uppercase; }
.bb-step-label { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .24em; font-size: 12px; color: rgba(244,237,226,.5); }
.bb-back-link { cursor: pointer; font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .18em; font-size: 12px; color: rgba(244,237,226,.5); }
.bb-back-link:hover { color: var(--bb-orange); }

.bb-cart__layout, .bb-checkout__layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 34px; margin-top: 34px; align-items: start; }
.bb-banner { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid rgba(255,122,24,.4); background: rgba(255,122,24,.08); font-size: 14px; color: var(--bb-orange-light); }
.bb-empty { margin-top: 16px; border: 1px dashed rgba(244,237,226,.24); padding: 40px 24px; text-align: center; }
.bb-empty__title { font-family: var(--bb-font-display); font-size: 22px; text-transform: uppercase; }
.bb-empty__sub { margin-top: 10px; font-size: 15px; color: rgba(244,237,226,.6); }

.bb-line-list { margin-top: 16px; border: 1px solid rgba(244,237,226,.14); }
.bb-line { display: flex; flex-wrap: wrap; gap: 18px; padding: 18px; border-bottom: 1px solid rgba(244,237,226,.1); align-items: center; }
.bb-line__thumb { position: relative; width: 92px; height: 92px; flex: none; }
.bb-line__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.07) saturate(.88) brightness(.96); }
.bb-line__info { flex: 1; min-width: 150px; display: grid; gap: 6px; }
.bb-line__name { font-family: var(--bb-font-display); font-size: 17px; line-height: 1.25; }
.bb-line__meta { font-size: 13px; color: rgba(244,237,226,.55); }
.bb-line__remove { cursor: pointer; font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: rgba(244,237,226,.45); background: none; border: 0; padding: 0; }
.bb-line__remove:hover { color: var(--bb-orange); }
.bb-line__total { font-family: var(--bb-font-display); font-size: 18px; min-width: 96px; text-align: right; }
.bb-line-list__foot { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; padding: 18px; }
.bb-line-list__foot .note { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .14em; font-size: 13px; color: rgba(244,237,226,.5); }

.bb-upsell { margin-top: 30px; }
.bb-upsell__label { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .2em; font-size: 12px; color: var(--bb-orange-light); }
.bb-upsell__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; margin-top: 14px; }
.bb-upsell__item { border: 1px solid rgba(244,237,226,.12); display: flex; gap: 12px; align-items: center; padding: 10px; }
.bb-upsell__thumb { position: relative; width: 54px; height: 54px; flex: none; }
.bb-upsell__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.07) saturate(.88) brightness(.96); }
.bb-upsell__add { cursor: pointer; font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--bb-orange); background: none; border: 0; padding: 0; }

.bb-summary { border: 1px solid rgba(255,122,24,.28); background: linear-gradient(160deg, var(--bb-surface-2), #14100e); padding: 26px; }
.bb-summary__label { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .22em; font-size: 12px; color: rgba(244,237,226,.5); }
.bb-summary__row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(244,237,226,.12); font-size: 15px; }
.bb-summary__row span:first-child { color: rgba(244,237,226,.7); }
.bb-summary__total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; }
.bb-summary__total-label { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .16em; font-size: 14px; }
.bb-summary__total-value { font-family: var(--bb-font-display); font-size: 26px; color: var(--bb-orange); }
.bb-progress { height: 4px; background: rgba(244,237,226,.14); overflow: hidden; }
.bb-progress__bar { height: 100%; background: var(--bb-orange); transition: width .4s ease; }
.bb-summary__note { margin-top: 10px; font-size: 13px; line-height: 1.6; color: rgba(244,237,226,.65); }
.bb-summary__footnote { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(244,237,226,.12); font-size: 13px; line-height: 1.7; color: rgba(244,237,226,.6); }
.wc-proceed-to-checkout { margin-top: 20px; }
.wc-proceed-to-checkout a.checkout-button {
  cursor: pointer; display: flex; align-items: center; justify-content: center; background: var(--bb-orange) !important; color: var(--bb-bg) !important;
  font-family: var(--bb-font-label); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: 15px; padding: 17px 26px; text-decoration: none;
}
.wc-proceed-to-checkout a.checkout-button:hover { background: var(--bb-orange-light) !important; }
.woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.woocommerce-shipping-methods li { font-size: 14px; }
.woocommerce-shipping-methods input { accent-color: var(--bb-orange); margin-right: 6px; }
.shipping-calculator-form { margin-top: 10px; display: grid; gap: 8px; }
.shipping-calculator-button { color: var(--bb-orange-light); text-decoration: underline; cursor: pointer; font-size: 13px; }
.woocommerce-cart-form .remove { font-family: var(--bb-font-label); }
.woocommerce-cart-form td, .woocommerce-cart-form th { border: 0; }
table.shop_table { border-collapse: collapse; }
tr.cart-discount .amount, tr.cart-discount td { color: var(--bb-orange-light) !important; }

.bb-checkout-step { margin-bottom: 30px; }
.bb-checkout-step__head { display: flex; align-items: baseline; gap: 12px; }
.bb-checkout-step__num { font-family: var(--bb-font-display); color: var(--bb-orange); font-size: 14px; }
.bb-checkout-step__title { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .18em; font-size: 15px; font-weight: 700; }
.bb-checkout-step__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 12px; margin-top: 16px; }

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce-checkout select, .bb-checkout input[type="text"], .bb-checkout input[type="email"], .bb-checkout input[type="tel"] {
  background: var(--bb-surface); border: 1px solid rgba(244,237,226,.2); color: var(--bb-cream);
  font-family: var(--bb-font-body); font-size: 15px; padding: 15px 16px; width: 100%; appearance: none;
}
.woocommerce form .form-row label { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: rgba(244,237,226,.6); }
.woocommerce-checkout #payment { background: transparent !important; border-radius: 0 !important; }
.woocommerce-checkout #payment ul.payment_methods { border: 0 !important; padding: 0 !important; display: grid; gap: 10px; }
.woocommerce-checkout #payment ul.payment_methods li { display: flex; align-items: center; gap: 14px; border: 1px solid rgba(244,237,226,.2) !important; padding: 16px !important; }
.woocommerce-checkout #payment ul.payment_methods li input { accent-color: var(--bb-orange); }
.woocommerce-checkout #payment div.payment_box { background: rgba(255,122,24,.06) !important; }
#order_review, .woocommerce-checkout-review-order { border: 1px solid rgba(255,122,24,.28); background: linear-gradient(160deg, var(--bb-surface-2), #14100e); padding: 26px; }
.woocommerce-checkout-review-order-table { width: 100%; }
.woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { border: 0 !important; padding: 12px 0; border-bottom: 1px solid rgba(244,237,226,.12) !important; }
.woocommerce-checkout-review-order-table .order-total .amount { font-family: var(--bb-font-display); color: var(--bb-orange); font-size: 22px; }
#place_order { cursor: pointer; display: flex; align-items: center; justify-content: center; background: var(--bb-orange) !important; color: var(--bb-bg) !important; font-family: var(--bb-font-label) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .16em; font-size: 15px !important; padding: 17px 26px !important; width: 100%; border: 0 !important; border-radius: 0 !important; }
#place_order:hover { background: var(--bb-orange-light) !important; }
.bb-paycards { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.bb-delivery-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; margin-top: 16px; }
.bb-delivery-slot { border: 1px solid rgba(244,237,226,.2); padding: 16px; cursor: pointer; display: block; }
.bb-delivery-slot input { display: none; }
.bb-delivery-slot .day { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .14em; font-size: 13px; color: rgba(244,237,226,.6); }
.bb-delivery-slot .window { font-size: 15px; margin-top: 6px; }
.bb-delivery-slot:has(input:checked) { border-color: var(--bb-orange); background: rgba(255,122,24,.08); }
.bb-delivery-note { margin-top: 12px; font-size: 13px; color: rgba(244,237,226,.6); }

/* ==========================================================================
   Cart drawer
   ========================================================================== */
.bb-drawer-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(9,6,5,.66); backdrop-filter: blur(3px); animation: bb-fade-in .3s ease both; display: none; }
.bb-drawer-overlay.is-open { display: block; }
.bb-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; width: min(400px,92vw); display: none; flex-direction: column; background: #14100e; border-left: 1px solid rgba(255,122,24,.28); box-shadow: -30px 0 60px rgba(0,0,0,.6); }
.bb-drawer.is-open { display: flex; animation: bb-drawer-in .42s cubic-bezier(.2,.8,.2,1) both; }
.bb-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 22px 18px; border-bottom: 1px solid rgba(244,237,226,.12); }
.bb-drawer__head-label { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .22em; font-size: 12px; color: rgba(244,237,226,.5); }
.bb-drawer__close { cursor: pointer; min-width: 44px; min-height: 44px; display: grid; place-items: center; font-size: 20px; color: rgba(244,237,226,.6); background: none; border: 0; }
.bb-drawer__body { flex: 1; overflow-y: auto; padding: 18px 22px; }
.bb-drawer__line { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(244,237,226,.1); }
.bb-drawer__thumb { position: relative; width: 66px; height: 66px; flex: none; }
.bb-drawer__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.07) saturate(.88) brightness(.96); }
.bb-drawer__info { flex: 1; min-width: 0; display: grid; gap: 5px; }
.bb-drawer__name { font-family: var(--bb-font-display); font-size: 15px; line-height: 1.25; }
.bb-drawer__meta { font-size: 12px; color: rgba(244,237,226,.5); }
.bb-drawer__qty { display: flex; align-items: center; gap: 10px; }
.bb-drawer__qty button { cursor: pointer; min-width: 30px; min-height: 30px; display: grid; place-items: center; border: 1px solid rgba(244,237,226,.22); color: rgba(244,237,226,.8); background: none; }
.bb-drawer__price { font-family: var(--bb-font-display); font-size: 15px; color: var(--bb-orange); }
.bb-drawer__empty { padding: 40px 0; text-align: center; font-family: var(--bb-font-editorial); font-size: 18px; font-weight: 300; color: rgba(244,237,226,.6); }
.bb-drawer__foot { padding: 20px 22px 24px; border-top: 1px solid rgba(244,237,226,.12); }
.bb-drawer__subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; }
.bb-drawer__subtotal-label { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .16em; font-size: 13px; color: rgba(244,237,226,.7); }
.bb-drawer__subtotal-value { font-family: var(--bb-font-display); font-size: 24px; color: var(--bb-orange); }

/* ==========================================================================
   Footer
   ========================================================================== */
.bb-footer { background: var(--bb-bg); border-top: 1px solid rgba(244,237,226,.12); padding: 72px 22px 130px; }
@media (min-width: 900px) { .bb-footer { padding-bottom: 72px; } }
.bb-footer__grid { max-width: var(--bb-container); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 40px; }
.bb-footer__brand { display: flex; align-items: center; gap: 12px; }
.bb-footer__brand img { width: 96px; height: 96px; object-fit: contain; }
.bb-footer__brand-name { font-family: var(--bb-font-display); font-size: 17px; text-transform: uppercase; line-height: 1.1; }
.bb-footer__tag { margin: 18px 0 0; font-size: 14px; line-height: 1.7; color: rgba(244,237,226,.6); max-width: 32ch; }
.bb-footer__social { display: flex; gap: 8px; margin-top: 18px; }
.bb-footer__social a { width: 42px; height: 42px; border: 1px solid rgba(244,237,226,.2); display: grid; place-items: center; }
.bb-footer__social a:hover { border-color: var(--bb-orange); background: rgba(255,122,24,.1); }
.bb-footer__social img { width: 17px; height: 17px; }
.bb-footer__heading { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .2em; font-size: 11px; color: rgba(244,237,226,.5); }
.bb-footer__list { display: grid; gap: 10px; margin-top: 16px; font-size: 14px; color: rgba(244,237,226,.72); }
.bb-footer__list a { color: rgba(244,237,226,.72); }
.bb-footer__list a:hover { color: var(--bb-orange); }
.bb-footer__cutoff { color: var(--bb-orange-light); margin-top: 6px; }
.bb-footer__bottom { max-width: var(--bb-container); margin: 46px auto 0; padding-top: 20px; border-top: 1px solid rgba(244,237,226,.12); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: 12px; color: rgba(244,237,226,.45); }

/* ==========================================================================
   Mobile sticky bar
   ========================================================================== */
.bb-mobile-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; display: grid; grid-template-columns: 1fr 1fr 1fr; background: rgba(23,16,13,.96); border-top: 1px solid rgba(255,122,24,.35); backdrop-filter: blur(10px); }
.bb-mobile-bar a, .bb-mobile-bar button { min-height: 56px; display: flex; align-items: center; justify-content: center; font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .16em; font-size: 13px; font-weight: 700; color: var(--bb-cream); background: none; border: 0; }
.bb-mobile-bar .mid { border-left: 1px solid rgba(244,237,226,.12); border-right: 1px solid rgba(244,237,226,.12); }
.bb-mobile-bar .cart { background: var(--bb-orange); color: var(--bb-bg); }

/* ==========================================================================
   Generic page / 404
   ========================================================================== */
.bb-page { padding: 140px 22px 120px; max-width: 820px; margin: 0 auto; }
.bb-page h1 { font-family: var(--bb-font-display); font-size: clamp(30px,6vw,54px); text-transform: uppercase; line-height: 1.02; }
.bb-page .entry-content { font-family: var(--bb-font-editorial); font-size: 19px; line-height: 1.7; font-weight: 300; color: rgba(244,237,226,.8); margin-top: 20px; }
.bb-page .entry-content h2, .bb-page .entry-content h3 { font-family: var(--bb-font-display); text-transform: uppercase; color: var(--bb-cream); }
.bb-404 { padding: 180px 22px 140px; max-width: 640px; margin: 0 auto; text-align: center; }
.bb-404 h1 { font-family: var(--bb-font-display); font-size: clamp(60px,14vw,140px); color: var(--bb-orange); line-height: 1; }

/* ==========================================================================
   Mobile menu
   ========================================================================== */
.bb-menu-toggle { display: none; background: none; border: 1px solid rgba(244,237,226,.24); color: var(--bb-cream); width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; }
@media (max-width: 899px) { .bb-menu-toggle { display: flex; } }
.bb-mobile-nav { position: fixed; inset: 0; z-index: 90; background: var(--bb-bg); display: none; flex-direction: column; padding: 90px 28px 40px; }
.bb-mobile-nav.is-open { display: flex; }
.bb-mobile-nav a { font-family: var(--bb-font-display); font-size: 30px; text-transform: uppercase; color: var(--bb-cream); padding: 14px 0; border-bottom: 1px solid rgba(244,237,226,.1); }
.bb-mobile-nav__close { position: absolute; top: 18px; right: 18px; background: none; border: 1px solid rgba(244,237,226,.24); color: var(--bb-cream); width: 44px; height: 44px; font-size: 20px; cursor: pointer; }

@media (max-width: 899px) {
  body.has-mobile-bar { padding-bottom: 56px; }
}

/* ==========================================================================
   Comments
   ========================================================================== */
.bb-comments { max-width: 720px; margin: 60px auto 0; padding: 40px 22px 0; border-top: 1px solid rgba(244,237,226,.14); }
.bb-comments__title { font-family: var(--bb-font-display); text-transform: uppercase; font-size: 24px; }
.bb-comments__list { list-style: none; margin: 24px 0 0; padding: 0; }
.bb-comments__list .comment-body { border-bottom: 1px solid rgba(244,237,226,.1); padding: 18px 0; }
.bb-comments__list .comment-author { font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .1em; font-size: 13px; }
.bb-comments__list .comment-metadata { font-size: 12px; color: rgba(244,237,226,.45); margin-bottom: 8px; }
.bb-comments__list .comment-metadata a { color: rgba(244,237,226,.45); }
.comment-respond { margin-top: 30px; }
.comment-respond .comment-reply-title { font-family: var(--bb-font-display); text-transform: uppercase; font-size: 20px; }
.comment-form p { margin: 14px 0; }
.comment-form label { display: block; font-family: var(--bb-font-label); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: rgba(244,237,226,.6); margin-bottom: 6px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
  width: 100%; background: var(--bb-surface); border: 1px solid rgba(244,237,226,.2); color: var(--bb-cream); font-family: var(--bb-font-body); font-size: 15px; padding: 12px 14px;
}