/* =============================================================================
   Bobo's Cana Cartel - premium island-lifestyle theme
   -----------------------------------------------------------------------------
   THE ONE FILE TO EDIT FOR BRANDING.

   Every colour, font, radius, shadow and timing used on the site is a token in
   :root below. /public/js/tailwind-config.js mirrors the same values, so
   utility classes and component classes always agree.

   Brand colours .... --brand-gold (primary actions), --brand-red (small accent),
                      --brand-green, --brand-deep -> --brand-night (page base)
   Fonts ............ --font-display (headings) / --font-body (everything else)
   Radii ............ --r-lg 20px (cards) / --r-pill 999px (buttons + chips)
   Shadows .......... --shadow-1 / --shadow-2 (soft, layered - no hard offsets)
   Hairlines ........ --line 1px rgba(255,255,255,.08)
   Type scale ........ --fs-* fluid with clamp()
   Container ........ --container 1200px / --gutter horizontal padding
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Brand colour -------------------------------------------------------- */
  --brand-green: #1e9e3a;
  --brand-gold: #ffc72c;
  --brand-gold-soft: #ffd45c;
  --brand-red: #e2231a;
  --brand-deep: #0b3d1e; /* mid green (gradient partner) */
  --brand-night: #06170d; /* near-black green (page base) */

  /* --- Surfaces ------------------------------------------------------------ */
  --surface: rgba(255, 255, 255, 0.05);
  --surface-2: rgba(255, 255, 255, 0.08);
  --surface-3: rgba(255, 255, 255, 0.12);
  --line: rgba(255, 255, 255, 0.08); /* 1px hairline on dark */
  --line-strong: rgba(255, 255, 255, 0.18);
  --glass: rgba(10, 40, 22, 0.55); /* translucent dark-green card */

  /* --- Text (contrast checked against --brand-night: all AA or better) ----- */
  --text: #f3f7f1; /* 16.1:1 */
  --text-dim: #c9d8cb; /* 11.0:1 */
  --text-faint: #9db3a2; /*  7.6:1 */
  --ink: #14110f; /* text on gold / on light cards */
  --ink-dim: #4a4438;

  /* --- Light working surface (CRM, login, privacy) ------------------------- */
  --shell: #f6f7f4;
  --card-light: #ffffff;
  --line-light: rgba(6, 23, 13, 0.09);
  --text-light: #101b14;
  --text-light-dim: #4c5a51;

  /* --- Status -------------------------------------------------------------- */
  --status-open: #3ecf6a;
  --status-closed: #9db3a2;

  /* --- Fonts: exactly two families ----------------------------------------- */
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Legacy alias - the cartoon marker font is gone; text keeps the body face. */
  --font-marker: var(--font-body);

  /* --- Fluid type scale ---------------------------------------------------- */
  --fs-xs: 0.8125rem; /* 13px */
  --fs-sm: 0.9375rem; /* 15px */
  --fs-base: 1rem; /* 16px - body floor */
  --fs-lg: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --fs-h3: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  --fs-h1: clamp(2.6rem, 1.6rem + 4.6vw, 4.25rem);

  /* --- Shape ---------------------------------------------------------------- */
  --r-lg: 20px; /* cards, tiles */
  --r-md: 14px; /* inputs, small cards */
  --r-sm: 10px;
  --r-pill: 999px; /* buttons, chips, badges */
  --radius-card: var(--r-lg); /* legacy alias */
  --radius-sticker: var(--r-md);
  --border-ink: 1px; /* legacy alias - the thick comic outline is gone */

  /* --- Depth ---------------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(3, 12, 7, 0.3), 0 12px 26px -16px rgba(3, 12, 7, 0.6);
  --shadow-2: 0 2px 4px rgba(3, 12, 7, 0.28), 0 26px 50px -26px rgba(3, 12, 7, 0.7);
  --shadow-gold: 0 12px 26px -14px rgba(255, 199, 44, 0.55);
  --shadow-light: 0 1px 2px rgba(6, 23, 13, 0.05), 0 14px 30px -20px rgba(6, 23, 13, 0.35);
  /* Legacy aliases: the old hard "sticker" offsets are now soft and layered. */
  --shadow-sticker: var(--shadow-1);
  --shadow-sticker-sm: var(--shadow-1);
  --shadow-lift: var(--shadow-2);

  /* --- Layout --------------------------------------------------------------- */
  --container: 1200px;
  --gutter: clamp(1rem, 4vw, 2rem);
  /* 48px mobile / 64px tablet / 96px desktop. */
  --section-y: clamp(3rem, 2rem + 5vw, 6rem);
  --header-h: 72px; /* sticky header + 2px stripe (drives the CRM rail) */
  --crm-rail: 232px;

  /* --- Motion --------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.22s;
  --ease-bounce: var(--ease); /* legacy alias */
  --tilt: 0deg; /* the hand-drawn lean is gone - headings sit level */

  /* --- Legacy colour aliases ----------------------------------------------- */
  --reggae-green: var(--brand-green);
  --forest: var(--brand-deep);
  --forest-deep: #07180e;
  --forest-soft: #0e4a26;
  --green-deep: #157a2c;
  --green-soft: #35c25a;
  --gold: var(--brand-gold);
  --gold-text: var(--brand-gold);
  --gold-text-soft: #ffe08a;
  --red: var(--brand-red);
  --red-text: #ff9b90;
  --green-text: #7ff2a0;
  --cream: #f4f7f1;
  --cream-dim: var(--text-dim);
  --cream-faint: var(--text-faint);

  /* --- Tri-colour stripe motif + film grain --------------------------------- */
  --stripe-1: var(--brand-red);
  --stripe-2: var(--brand-gold);
  --stripe-3: var(--brand-green);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =============================================================================
   1. BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  max-width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* never scroll sideways */
  background-color: var(--brand-night);
  background-image: linear-gradient(180deg, var(--brand-night) 0%, #082410 42%, var(--brand-deep) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Subtle film grain: depth without noise. 3.5% opacity, never blocks clicks. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  background-image: var(--grain);
  opacity: 0.035;
}

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

/* Visible focus ring for keyboard users (WCAG 2.4.7). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--brand-gold);
  outline-offset: 2px;
  border-radius: 6px;
}

img, svg, video { max-width: 100%; height: auto; }

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================================
   2. LAYOUT - one container everywhere so header, hero and cards line up
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 96px desktop / 64px tablet / 48px mobile. */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 5vw, 4rem); }

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.section__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-gold);
}

.section__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-wrap: balance;
}

.section__sub {
  margin: 0.5rem 0 0;
  max-width: 62ch;
  color: var(--text-dim);
  font-size: 1rem;
  text-wrap: pretty;
}

.section__link {
  font-weight: 600;
  color: var(--brand-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 199, 44, 0.4);
  padding-bottom: 2px;
}
.section__link:hover { border-bottom-color: var(--brand-gold); }

/* =============================================================================
   3. TYPOGRAPHY - two families only
   ========================================================================== */

.font-display,
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  /* Stops a two-word heading from breaking with one word stranded. */
  text-wrap: balance;
}

.font-display { font-weight: 700; }

/* Kept for compatibility: headings sit level now (no cartoon lean). */
.tilt, .tilt-r { transform: none; }


p { margin-top: 0; text-wrap: pretty; }
a { color: inherit; }

/* =============================================================================
   4. STRIPE MOTIF - the recurring red / gold / green line (kept very thin)
   ========================================================================== */

.stripe-bar {
  height: 2px;
  width: 100%;
  background: repeating-linear-gradient(
    90deg,
    var(--stripe-1) 0 14px,
    var(--stripe-2) 14px 28px,
    var(--stripe-3) 28px 42px
  );
}


/* Gentle wave divider (inline SVG - no extra request). Kept low-key. */
.stripe-wave {
  display: block;
  width: 100%;
  height: 22px;
  opacity: 0.6;
  background-repeat: repeat-x;
  background-position: center;
  background-size: 120px 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22' viewBox='0 0 120 22'%3E%3Cpath d='M0 14c10-6 20-6 30 0s20 6 30 0 20-6 30 0 20 6 30 0v8H0z' fill='%230B3D1E'/%3E%3Cpath d='M0 11c10-6 20-6 30 0s20 6 30 0 20-6 30 0 20 6 30 0v4H0z' fill='%23FFC72C' fill-opacity='.65'/%3E%3Cpath d='M0 7c10-6 20-6 30 0s20 6 30 0 20-6 30 0 20 6 30 0v4H0z' fill='%23E2231A' fill-opacity='.5'/%3E%3C/svg%3E");
}

.stripe-wave--flip { transform: scaleY(-1); }

/* =============================================================================
   5. HEADER - sticky, translucent, thin tri-colour line underneath
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
}

/* The translucent blur lives on ::before, NOT on the header itself: a
   backdrop-filter on the header would turn it into the containing block for
   position:fixed descendants, clipping the mobile drawer to the header box. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(6, 23, 13, 0.7);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  z-index: -1;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: calc(var(--header-h) - 2px);
}

/* The tri-colour stripe must stay full width and visible even when the open
   drawer (z 45) and its scrim (z 44) cover the header area. */
.site-header > .stripe-bar {
  position: relative;
  z-index: 46;
}

/* Light CRM surface: the header must stay a solid brand bar (the translucent
   one goes washed-out over white content). Same ::before trick as above. */
.crm-shell .site-header::before {
  background: rgba(6, 23, 13, 0.97);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* --- Logo badge + wordmark ------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 4px 0;
  text-decoration: none;
}

.brand__badge {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
  box-shadow: 0 0 0 2px rgba(255, 199, 44, 0.18), var(--shadow-1);
  flex-shrink: 0;
}

.brand__badge img {
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  object-fit: cover;
}

.brand__text { display: flex; flex-direction: column; line-height: 1.15; }

.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: #ffffff;
}

/* The tagline only appears once there is room for it - below 1024px it would
   crowd the wordmark on a tablet. */
.brand__tag {
  display: none;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.7;
}

@media (min-width: 1024px) { .brand__tag { display: block; } }

/* --- Nav -------------------------------------------------------------------- */
.site-nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: auto;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: none;
  border-radius: var(--r-pill);
  transition: color var(--dur) var(--ease);
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.4rem;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}

.nav-link:hover { color: #ffffff; }
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: #ffffff; }

/* --- Account dropdown (avatar) ----------------------------------------------
   Desktop keeps the header to five top-level items: Home, Products, About,
   Privacy and this avatar. Dashboard / Staff / identity / logout live inside
   the menu, which renders inline in the drawer below 900px. */
.nav-account {
  position: relative;
  margin-left: 0.35rem;
}

.nav-account__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.nav-account__toggle:hover,
.nav-account__toggle:focus-visible {
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 2px rgba(255, 199, 44, 0.25);
}

.nav-account__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 60;
  min-width: 240px;
  padding: 0.4rem;
  background: rgba(6, 23, 13, 0.98);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-1), 0 18px 40px rgba(0, 0, 0, 0.35);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  /* visibility waits for the fade-out on close but flips instantly on open,
     so the menu is focusable the moment JS toggles the class. */
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
}

.nav-account.is-open .nav-account__menu {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility 0s linear 0s;
}

.nav-account__identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem 0.55rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--line);
}

.nav-account__identity strong {
  font-size: 0.875rem;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Staff" group: a labelled block of CRM links so the menu reads as
   identity / staff / logout instead of one flat list. */
.nav-account__staff-label {
  display: block;
  padding: 0.35rem 0.7rem 0.3rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* Logged-out grouping: on desktop the wrapper is transparent and its caption
   is hidden, so the header keeps its flat row; both switch on in the drawer. */
.nav-account__staff--guest { display: contents; }
.nav-account__staff-label--guest { display: none; }

.nav-account__menu .nav-account__link {
  display: flex;
  width: 100%;
}

.nav-account__menu .nav-account__link::after { display: none; }

.nav-account__menu .nav-account__link:hover,
.nav-account__menu .nav-account__link:focus-visible {
  background: rgba(255, 255, 255, 0.07);
}

.nav-account__menu .nav-account__link.is-active {
  background: rgba(255, 199, 44, 0.12);
}

.nav-account__menu .nav-account__logout {
  margin: 0.35rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}

/* A plain "Log out" text button, not a large pill: it matches the menu's link
   rows, never wraps, and only tints on hover. */
.nav-account__logout-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 0.5rem 0.7rem;
  background: none;
  border: 0;
  border-radius: var(--r-pill);
  color: var(--text-dim);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-account__logout-link:hover,
.nav-account__logout-link:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
}

.nav-form { margin-left: 0.35rem; }
.nav-login { margin-left: 0.5rem; }
.nav-close { display: none; }
.nav-toggle { display: none; }

/* --- Mobile / narrow desktop: hamburger + slide-in panel ------------------- */
/* The drawer takes over below 1100px. The logged-in header carries the avatar
   account menu next to the public links, and past ~1100px that row starts to
   crowd, so the switch to the drawer happens earlier than it used to (899px). */
@media (max-width: 1099px) {
  /* The off-canvas panel sits translated beyond the right edge when closed;
     `clip` (unlike `hidden`) does not create a scroll container, so the sticky
     header keeps working while the page can no longer scroll sideways. */
  html { overflow-x: clip; }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-left: auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.7rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line-strong);
    color: var(--text);
    cursor: pointer;
  }

  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .nav-toggle__bars { position: relative; }
  .nav-toggle__bars::before,
  .nav-toggle__bars::after { content: ''; position: absolute; left: 0; }
  .nav-toggle__bars::before { top: -6px; }
  .nav-toggle__bars::after { top: 6px; }

  .site-nav {
    position: fixed;
    inset: 0 0 0 auto; /* right-side panel, full viewport height */
    width: min(86vw, 360px);
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    margin: 0;
    padding: calc(5.25rem + env(safe-area-inset-top)) 1.25rem calc(2rem + env(safe-area-inset-bottom));
    background: rgba(6, 23, 13, 0.97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    transform: translateX(105%);
    visibility: hidden;
    pointer-events: none;
    overflow-y: auto;
    z-index: 45;
    /* visibility flips instantly on open (so the drawer is focusable the
       moment JS calls focus()) but only after the slide-out on close. */
    transition: transform 0.3s var(--ease), visibility 0s linear 0.3s;
  }

  .site-nav.is-open {
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.3s var(--ease), visibility 0s linear 0s;
  }

  .site-nav .nav-link {
    min-height: 52px;
    padding: 0.75rem 1rem;
    font-size: 1.05rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
  }
  .site-nav .nav-link::after { display: none; }

  .site-nav .nav-form,
  .site-nav .nav-login { margin: 0.5rem 0 0; }
  .site-nav .btn--block { width: 100%; }

  /* In the drawer the avatar button is redundant: the account menu renders
     inline (always visible), so Dashboard / Staff / logout stay one tap away
     and no dropdown state is needed on mobile. */
  .nav-account {
    display: block;
    width: 100%;
    margin: 0.5rem 0 0;
  }
  .nav-account__toggle { display: none; }
  .nav-account__menu {
    position: static;
    z-index: auto;
    min-width: 0;
    width: 100%;
    padding: 0;
    margin-top: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .nav-account__identity {
    padding: 0.6rem 0.1rem 0.4rem;
    margin-bottom: 0;
    border-bottom: 0;
  }
  .nav-account__menu .nav-account__logout {
    margin: 0.5rem 0 0;
    padding-top: 0;
    border-top: 0;
  }

  /* Drawer grouping: public links (above, in the panel) then, inside this
     menu, the Staff section under the divider, the user's name + role badge,
     and Log out pinned to the bottom of the panel. When the content is taller
     than the screen there is no free space to absorb, so the auto margin
     collapses and the panel simply scrolls. */
  .nav-account {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
  }
  .nav-account__menu {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .nav-account__staff {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }
  .nav-account__identity {
    order: 2;
    border-top: 1px solid var(--line);
    margin-top: 0.6rem;
    padding-top: 0.65rem;
  }
  .nav-account__staff-label {
    padding: 0.55rem 0.1rem 0.35rem;
    color: var(--brand-gold);
  }
  /* Logged-out: the guest wrapper stops being transparent and takes the same
     divider + gold caption as the logged-in menu, with the login button
     pinned to the bottom of the panel. */
  .nav-account__staff--guest {
    display: flex;
    flex-direction: column;
    flex: 1;
    border-top: 1px solid var(--line);
    margin-top: 0.6rem;
    padding-top: 0.55rem;
  }
  .nav-account__staff-label--guest {
    display: block;
    padding: 0 0.1rem 0.5rem;
    color: var(--brand-gold);
  }
  .site-nav .nav-login {
    margin: auto 0 0;
    width: 100%;
  }
  .site-nav .nav-account__logout {
    order: 3;
    margin-top: auto;
    padding-top: 0;
  }

  .nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--line-strong);
    color: var(--text);
    cursor: pointer;
  }

  body.nav-open { overflow: hidden; }
}

/* Scrim behind the open panel (element-free: painted by JS toggling a class on
   <body>). It is ::after because ::before is the header's blur layer now; with
   the header's own backdrop-filter gone, this position:fixed inset:0 finally
   resolves against the viewport instead of the header box. */
body.nav-open .site-header::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(3, 10, 6, 0.55);
  z-index: 44;
}

/* =============================================================================
   6. HERO - two columns, soft gradient blobs, floating logo badge
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem);
  background:
    radial-gradient(58% 55% at 10% 15%, rgba(255, 199, 44, 0.16), transparent 62%),
    radial-gradient(52% 52% at 88% 22%, rgba(30, 158, 58, 0.24), transparent 65%),
    radial-gradient(75% 65% at 55% 112%, rgba(11, 61, 30, 0.9), transparent 72%),
    linear-gradient(180deg, #06170d 0%, #08240f 55%, #0b3d1e 100%);
}

/* Sunburst rays kept only as a whisper (7% opacity). */
.hero__rays {
  position: absolute;
  inset: -40%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.07;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(255, 212, 92, 0.55) 0deg 5deg,
    transparent 5deg 16deg
  );
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 78%);
  mask-image: radial-gradient(closest-side, #000 20%, transparent 78%);
}

/* Twelve columns on desktop so the copy and the photo split 6/6 and both stay
   vertically centred. On a phone it is a single column and the photo is
   reordered to sit directly under the buttons (see the order rules below). */
.hero__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}

@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    min-height: 640px;
    gap: clamp(2rem, 3vw, 3.5rem);
  }
  .hero__copy { grid-column: 1 / span 6; }
  .hero__art { grid-column: 7 / span 6; }
}

.hero__copy { max-width: 34rem; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 34px;
  padding: 0.4rem 0.95rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}

.pill__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--brand-red); /* the red accent, used sparingly */
  box-shadow: 0 0 0 3px rgba(226, 35, 26, 0.25);
  flex-shrink: 0;
}

/* --- Headline: two fixed lines, last word in gold ------------------------- */
.hero__title {
  margin: 1.1rem 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #ffffff;
  text-wrap: balance;
}

/* Each line is its own block so the break is always after the first word. */
.hero__title-line { display: block; }

/* The last word carries the brand gold plus a hairline underline, which reads
   as an underline stroke without needing an SVG. */
.hero__title-accent {
  position: relative;
  font-style: normal;
  color: var(--brand-gold);
  white-space: nowrap;
}

.hero__title-accent::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.02em;
  height: 0.055em;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 199, 44, 0.85), rgba(255, 199, 44, 0.35));
}

.hero__sub {
  margin: 1.1rem 0 0;
  max-width: 32ch;
  font-size: clamp(1.125rem, 0.95rem + 0.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--text-dim);
  text-wrap: balance;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.9rem;
}

/* The hero buttons are 52px tall with 16px labels - a comfortable target on a
   phone and enough presence to read as the primary row. */
.hero__actions .btn {
  min-height: 52px;
  font-size: 1rem;
  padding-inline: clamp(1rem, 2.2vw, 1.5rem);
}

.hero__actions .btn--wa { gap: 0.55rem; }
.hero__actions .btn--wa svg { width: 20px; height: 20px; flex-shrink: 0; }


/* --- Trust chips ------------------------------------------------------------ */
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 36px;
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--line);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
}

/* A small gold line icon instead of the old 5px dot - the chips read as three
   promises rather than three bullets. */
.trust-chip__icon {
  display: inline-flex;
  color: var(--brand-gold);
  flex-shrink: 0;
}

.trust-chip__icon svg { width: 16px; height: 16px; }

/* --- Countdown (only while the opening date is in the future) --------------- */
.hero__meta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

.cd-grid {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 0.4rem;
  padding: 0.5rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-1);
}

.cd-card {
  min-width: 66px;
  padding: 0.4rem 0.5rem;
  border-radius: var(--r-md);
  background: rgba(6, 23, 13, 0.5);
  border: 1px solid var(--line);
  text-align: center;
}

.cd-card__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.1;
  color: var(--brand-gold);
  font-variant-numeric: tabular-nums;
}

.cd-card__label {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.cd-caption {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.78rem;
  color: var(--text-faint);
}

/* --- "We're open!" status chip (once the date has passed) ------------------- */
.status-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.05rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-1);
  font-size: 0.9rem;
  color: var(--text-dim);
}

.status-chip strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  color: #ffffff;
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--status-closed);
  box-shadow: 0 0 0 3px rgba(157, 179, 162, 0.2);
  flex-shrink: 0;
}

.status-dot.is-open {
  background: var(--status-open);
  box-shadow: 0 0 0 3px rgba(62, 207, 106, 0.22);
  animation: bobo-pulse 2.4s ease-in-out infinite;
}

/* The green dot breathes while the shop is open, so "Open now" reads at a glance
   as well as to a screen reader. */
@keyframes bobo-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(62, 207, 106, 0.24); }
  50% { box-shadow: 0 0 0 7px rgba(62, 207, 106, 0.04); }
}

.status-chip__sep { color: var(--text-faint); }
.status-chip__hours { color: var(--text-faint); font-size: 0.875rem; }

/* --- Logo art --------------------------------------------------------------- */
.hero__art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(240px, 42vw, 440px);
}

/* Two blurred colour blobs behind the photo. They sit at 20% opacity so they
   read as depth rather than as a coloured halo around the frame. */
.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
  z-index: 0;
}
.hero__blob--gold {
  width: min(62%, 320px);
  height: min(62%, 320px);
  background: rgba(255, 199, 44, 0.2);
  top: 2%;
  right: 4%;
}
.hero__blob--green {
  width: min(74%, 360px);
  height: min(74%, 360px);
  background: rgba(30, 158, 58, 0.2);
  bottom: 2%;
  left: 2%;
}

.logo-badge {
  position: relative;
  width: min(74vw, 340px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 8%;
  border-radius: var(--r-pill);
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.12), rgba(6, 23, 13, 0.72) 70%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 0 0 1px rgba(255, 199, 44, 0.28),
    0 0 90px rgba(255, 199, 44, 0.3),
    var(--shadow-2);
}

.logo-badge img {
  width: 100%;
  height: 100%;
  border-radius: var(--r-pill);
  object-fit: cover;
}

.logo-badge--float { animation: bobo-float 7s ease-in-out infinite; }

@keyframes bobo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* The overlapping badge animates its own offset, so it needs its own keyframes -
   reusing bobo-float would drop it back to the frame's corner. */
@keyframes bobo-badge-float {
  0%, 100% { transform: translate(-32%, 32%); }
  50% { transform: translate(-32%, calc(32% - 6px)); }
}

/* =============================================================================
   7. MARQUEE - full-bleed, 40px, edge-fade mask, pauses on hover
   ========================================================================== */

.marquee {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.035);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: 2.75rem;
  width: max-content;
  padding-inline: 1.5rem;
  white-space: nowrap;
  animation: bobo-marquee 48s linear infinite;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee__item {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.85;
}

/* The separator is gold, matching the stripe under the header. */
.marquee__item b { color: var(--brand-gold); font-weight: 600; }

@keyframes bobo-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* =============================================================================
   8. BUTTONS - one primary (gold), one secondary (quiet)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--brand-gold);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-gold);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.btn:hover {
  transform: translateY(-2px) scale(1.02);
  background: var(--brand-gold-soft);
  box-shadow: 0 16px 32px -14px rgba(255, 199, 44, 0.7);
}

.btn:active {
  transform: translateY(0) scale(0.99);
  background: var(--brand-gold);
  box-shadow: 0 6px 14px -10px rgba(255, 199, 44, 0.6);
}

.btn:focus-visible {
  outline: 3px solid rgba(255, 199, 44, 0.75);
  outline-offset: 3px;
}

/* Secondary: translucent fill, 1px light border, white text. */
.btn--outline,
.btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
  box-shadow: none;
}

.btn--outline:hover,
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
  box-shadow: none;
}

.btn--ghost { border-color: rgba(255, 255, 255, 0.22); }


.btn--sm {
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  font-size: 0.9rem;
}

.btn--block { width: 100%; }

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* =============================================================================
   9. CARDS, CHIPS AND GLASS SURFACES
   ========================================================================== */

.glass,
.card--dark {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-1);
}

/* Light card (CRM, login, privacy). */
.card {
  background: var(--card-light);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-light);
  color: var(--text-light);
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
}

/* Dark card on the shop surface. Declared with `.card` so its glass background
   wins over the light `.card` default (same specificity, declared later). */
.card.card--dark {
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  color: var(--text);
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
}
.lift {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.lift:hover {
  transform: translateY(-5px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-2);
}

/* --- Badges ----------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--edibles { background: rgba(255, 199, 44, 0.16); border-color: rgba(255, 199, 44, 0.4); color: #ffedbe; }
.badge--clothing { background: rgba(255, 255, 255, 0.1); border-color: var(--line-strong); color: var(--text); }
.badge--herbs { background: rgba(53, 194, 90, 0.16); border-color: rgba(53, 194, 90, 0.42); color: #cdf7db; }
.badge--herb-tonix { background: rgba(226, 35, 26, 0.16); border-color: rgba(226, 35, 26, 0.45); color: #ffc9c5; }
.badge--accessory { background: rgba(255, 199, 44, 0.12); border-color: rgba(255, 199, 44, 0.32); color: #ffe7b1; }

/* Document status badges (CRM, on white cards). */
.badge--type-sa { background: #157a2c; border-color: transparent; color: #ffffff; }
.badge--type-passport { background: var(--brand-gold); border-color: transparent; color: var(--ink); }

/* --- "New" ribbon on advert cards (no more comic rotation) ------------------ */
.ribbon {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--r-pill);
  background: rgba(226, 35, 26, 0.92);
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: none;
}

.badge__icon { width: 14px; height: 14px; flex: none; }

/* --- Pill link tabs (products filter) --------------------------------------- */
.tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-dim);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.tab:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
.tab.is-active {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--ink);
}
.tab__icon { width: 16px; height: 16px; flex: none; }

/* =============================================================================
   10. FORMS - 48px, rounded, gold focus ring, clear labels
   ========================================================================== */

.field-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: inherit;
}

.field-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-faint);
}
.card .field-hint,
.crm-card .field-hint { color: var(--text-light-dim); }

.field-error {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #ff8a80;
}
.card .field-error,
.crm-card .field-error { color: #c62828; }

.field {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(6, 23, 13, 0.16);
  border-radius: var(--r-md);
  background: #ffffff;
  color: var(--text-light);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.field::placeholder { color: #8a948d; }

.field:focus {
  outline: none;
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 3px rgba(255, 199, 44, 0.38);
}

.field:focus-visible {
  outline: none;
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 3px rgba(255, 199, 44, 0.38);
}

textarea.field { min-height: 120px; resize: vertical; }

select.field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234c5a51' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* Dark-glass contexts (used where inputs sit on a dark card). */
.card--dark .field,
.glass .field {
  background: rgba(6, 23, 13, 0.5);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text);
}

/* ID / passport choice toggle: large, calm, high contrast. */
.type-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.type-toggle label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 64px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  background: #ffffff;
  color: var(--text-light);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.type-toggle input { width: 18px; height: 18px; accent-color: var(--brand-gold); flex-shrink: 0; }

.type-toggle label:hover { border-color: rgba(6, 23, 13, 0.28); }

.type-toggle label:has(input:checked),
.type-toggle label.is-checked {
  border-color: var(--brand-gold);
  background: #fff9e8;
  box-shadow: 0 0 0 3px rgba(255, 199, 44, 0.3);
}

/* =============================================================================
   11. HOMEPAGE - category bento
   ========================================================================== */

/* Three across on top (2 columns each) and two across underneath (3 columns
   each), all rows the same height. One column on a phone. */
.bento-cats {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .bento-cats { grid-template-columns: repeat(2, 1fr); }
  .cat-tile--1 { grid-column: span 2; }
}

.cat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  /* The height lives in a custom property, and every breakpoint that changes it
     is declared BELOW this base rule. In CSS the later rule of equal specificity
     wins, so putting the media queries first (which is how this block used to
     read) left every tile stuck at one height. */
  --tile-min: 160px;
  min-height: var(--tile-min);
  /* No padding on a photo tile: the photo has to reach the very edge. The text
     carries its own inset instead (see .cat-tile__body below). */
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  color: #ffffff;
  text-decoration: none;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025));
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

/* --- Category tile breakpoints (after the base rule on purpose, see --tile-min) */
@media (min-width: 600px) and (max-width: 1023px) {
  .cat-tile { --tile-min: 200px; }
}

@media (min-width: 1024px) {
  .bento-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cat-tile--1,
  .cat-tile--2,
  .cat-tile--3 { grid-column: span 2; }
  .cat-tile--4,
  .cat-tile--5 { grid-column: span 3; }
  /* Every tile the same height, so the grid reads as one clean block. */
  .cat-tile { --tile-min: 280px; }
}


.cat-tile:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-2);
}

.cat-tile:focus-visible {
  outline: 3px solid var(--brand-gold);
  outline-offset: 3px;
}

.cat-tile::after {
  content: '';
  position: absolute;
  inset: auto -20% -55% auto;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 70%);
  pointer-events: none;
}

/* One gradient per category - tune the brand tints here. */
.cat-tile[data-cat='edibles'] { background: linear-gradient(140deg, rgba(255, 199, 44, 0.3), rgba(255, 199, 44, 0.06) 62%, rgba(255, 255, 255, 0.04)); }
.cat-tile[data-cat='clothing'] { background: linear-gradient(140deg, rgba(244, 247, 241, 0.16), rgba(255, 255, 255, 0.03) 65%); }
.cat-tile[data-cat='herbs'] { background: linear-gradient(140deg, rgba(30, 158, 58, 0.4), rgba(11, 61, 30, 0.5) 65%, rgba(255, 255, 255, 0.04)); }
.cat-tile[data-cat='herb-tonix'] { background: linear-gradient(140deg, rgba(226, 35, 26, 0.34), rgba(226, 35, 26, 0.08) 62%, rgba(255, 255, 255, 0.04)); }
.cat-tile[data-cat='accessory'] { background: linear-gradient(140deg, rgba(255, 199, 44, 0.18), rgba(11, 61, 30, 0.55) 70%); }

/* The icon sits in a small glass chip so it stays readable over any photo. */
.cat-tile__glyph {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.45rem;
  border-radius: 14px;
  background: rgba(6, 23, 13, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
}

.cat-tile__icon {
  width: clamp(1.6rem, 4vw, 2rem);
  height: clamp(1.6rem, 4vw, 2rem);
}

.cat-tile__body { display: flex; flex-direction: column; gap: 0.25rem; }

.cat-tile__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.cat-tile__tag { font-size: 0.875rem; color: rgba(243, 247, 241, 0.8); }

.cat-tile__arrow {
  position: absolute;
  top: clamp(1.1rem, 2.5vw, 1.6rem);
  right: clamp(1.1rem, 2.5vw, 1.6rem);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: rgba(6, 23, 13, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 1rem;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.cat-tile:hover .cat-tile__arrow { transform: translateX(4px); background: rgba(6, 23, 13, 0.55); }

/* =============================================================================
   12. HOMEPAGE - featured products carousel (scroll-snap)
   ========================================================================== */

.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(80%, 1fr);
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-bottom: 0.75rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 199, 44, 0.5) transparent;
}

.carousel > * { scroll-snap-align: start; }

.carousel::-webkit-scrollbar { height: 8px; }
.carousel::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 8px; }
.carousel::-webkit-scrollbar-thumb { background: rgba(255, 199, 44, 0.5); border-radius: 8px; }

@media (min-width: 640px) { .carousel { grid-auto-columns: minmax(46%, 1fr); } }
@media (min-width: 1024px) { .carousel { grid-auto-columns: minmax(31%, 1fr); } }

.placeholder-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.6rem;
  min-height: 280px;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.04);
}

.placeholder-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: #ffffff;
}
.placeholder-card p { margin: 0; max-width: 40ch; color: var(--text-dim); font-size: var(--fs-sm); }

/* =============================================================================
   13. HOMEPAGE - visit us (glass bento), why strip, house rules
   ========================================================================== */

.visit-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .visit-grid { grid-template-columns: repeat(6, 1fr); }
  .visit-tile--addr { grid-column: span 4; }
  .visit-tile--hours { grid-column: span 2; }
  .visit-tile--mail,
  .visit-tile--wa { grid-column: span 3; }
}

.visit-tile {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: clamp(1.2rem, 3vw, 1.75rem);
}

.visit-tile__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-gold);
}

.visit-tile__value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.3;
  color: #ffffff;
}

.visit-tile__meta { margin: 0; color: var(--text-dim); font-size: var(--fs-sm); }

.visit-tile a:not(.btn):not(.link-wa) {
  color: var(--text);
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 3px;
}
.visit-tile a:not(.btn):not(.link-wa):hover { color: var(--brand-gold); }

/* Why Bobo's strip */
.why-strip {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: 1fr;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}

@media (min-width: 768px) { .why-strip { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); } }

.why-item { display: flex; flex-direction: column; gap: 0.5rem; }

.why-item__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  background: rgba(255, 199, 44, 0.14);
  border: 1px solid rgba(255, 199, 44, 0.3);
  color: var(--brand-gold);
}
.why-item__icon svg { width: 24px; height: 24px; }

.why-item h3 {
  margin: 0.25rem 0 0;
  font-size: var(--fs-h3);
  color: #ffffff;
}

.why-item p { margin: 0; color: var(--text-dim); font-size: var(--fs-sm); }

/* House rules - red used as a small accent only (left rule, not a red block) */
.rules-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .rules-grid { grid-template-columns: repeat(2, 1fr); } }

.rule-card {
  position: relative;
  padding: clamp(1.2rem, 3vw, 1.75rem);
  padding-left: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-gold);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: var(--shadow-1);
}

.rule-card--red { border-left-color: var(--brand-red); }

.rule-card h2,
.rule-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: #ffffff;
}

.rule-card p { margin: 0.6rem 0 0; color: var(--text-dim); font-size: var(--fs-sm); }
.rule-card a { color: var(--brand-gold); }

/* --- Empty states ------------------------------------------------------------ */
.empty-state {
  padding: clamp(1.75rem, 5vw, 3rem);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.04);
  text-align: center;
}
.empty-state p { margin: 0; }
.empty-state p + p { margin-top: 0.5rem; color: var(--text-dim); }

/* =============================================================================
   14. FOOTER
   ========================================================================== */

.site-footer {
  position: relative;
  margin-top: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
  background: rgba(4, 16, 9, 0.75);
}

.site-footer__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } }

.site-footer h2,
.site-footer h3 {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-gold);
}

.site-footer p { color: var(--text-dim); font-size: var(--fs-sm); }
.site-footer a { color: var(--text-dim); text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; }
.site-footer a:hover { color: var(--brand-gold); }

.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li + li { margin-top: 0.5rem; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 32px; }

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.site-footer__brand img {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  box-shadow: 0 0 0 2px rgba(255, 199, 44, 0.2);
}

.site-footer__tagline { margin-top: 0.75rem; color: var(--text-faint); font-size: var(--fs-sm); }

.site-footer__legal {
  border-top: 1px solid var(--line);
  padding-block: 1.1rem;
  color: var(--text-faint);
  font-size: 0.78rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
}

/* =============================================================================
   15. AGE GATE - glass card, two clear buttons
   ========================================================================== */

#age-gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(3, 12, 7, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.age-card {
  width: 100%;
  max-width: 26rem;
  padding: clamp(1.5rem, 5vw, 2.25rem);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background: rgba(8, 34, 17, 0.82);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-2);
  text-align: center;
}

.age-card__logo {
  width: 96px;
  height: 96px;
  margin-inline: auto;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  box-shadow: 0 0 0 3px rgba(255, 199, 44, 0.35), 0 0 46px rgba(255, 199, 44, 0.28);
  object-fit: cover;
}

.age-card h2 {
  margin: 1.1rem 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 6vw, 2rem);
  letter-spacing: -0.03em;
  color: #ffffff;
}

.age-card p { margin: 0.75rem 0 0; color: var(--text-dim); font-size: var(--fs-sm); }

.age-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 1.5rem;
}

.age-card__actions .btn { width: 100%; }

.age-card__fine { font-size: 0.75rem; color: var(--text-faint); }

/* =============================================================================
   16. FLASH MESSAGES
   ========================================================================== */

.flash-messages .flash {
  display: block;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: var(--fs-sm);
}
.flash--error { border-color: rgba(255, 138, 128, 0.6); background: rgba(226, 35, 26, 0.16); }
.flash--warning { border-color: rgba(255, 199, 44, 0.6); background: rgba(255, 199, 44, 0.14); }
.flash--success { border-color: rgba(53, 194, 90, 0.55); background: rgba(30, 158, 58, 0.16); }

/* =============================================================================
   17. MOTION - fade-up reveals, restrained and optional
   ========================================================================== */

html.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
}

html.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

@keyframes bobo-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

#age-gate { animation: bobo-fade-in 200ms ease-out; }

/* Countdown digits should not jump while ticking. */
[data-countdown-days],
[data-countdown-hours],
[data-countdown-minutes],
[data-countdown-seconds] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html.js-reveal [data-reveal] { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
  .logo-badge--float { animation: none; }
  .logo-badge--overlap { animation: none; }
  .status-dot.is-open { animation: none; }
  #age-gate { animation: none; }
}

/* =============================================================================
   18. CRM - light neutral working surface, slim dark-green rail, clean tables
   ========================================================================== */

body.crm-shell {
  background: var(--shell);
  background-image: none;
  background-attachment: scroll;
  color: var(--text-light);
}

.crm-shell h1,
.crm-shell h2,
.crm-shell h3 { color: var(--text-light); }

.crm-shell .section__title { color: var(--text-light); }

/* --- Slim rail -------------------------------------------------------------- */
.crm-side {
  position: relative;
  background: linear-gradient(180deg, #06170d 0%, #0b3d1e 100%);
  border-bottom: 1px solid var(--line);
}

.crm-side__nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.crm-side__nav::-webkit-scrollbar { display: none; }

.crm-side__link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: var(--text-dim);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.crm-side__link:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }

.crm-side__link.is-active {
  background: rgba(255, 199, 44, 0.14);
  border-color: rgba(255, 199, 44, 0.45);
  color: var(--brand-gold);
  box-shadow: inset 0 -2px 0 0 var(--brand-gold);
}

.crm-side__meta { display: none; }

@media (min-width: 1024px) {
  .crm-side {
    position: fixed;
    top: var(--header-h);
    left: 0;
    bottom: 0;
    width: var(--crm-rail);
    z-index: 30;
    overflow-y: auto;
    padding: 1.25rem 0.9rem;
    border-right: 1px solid var(--line);
    border-bottom: none;
  }

  .crm-side__nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
    padding: 0;
    overflow: visible;
  }

  .crm-side__link { justify-content: flex-start; padding: 0.6rem 1rem; }
  .crm-side__link.is-active { box-shadow: inset 3px 0 0 0 var(--brand-gold); }

  .crm-side__meta {
    display: block;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--text-faint);
  }

  .crm-shell main,
  .crm-shell footer,
  .crm-shell .flash-messages {
    margin-left: var(--crm-rail);
  }
}

/* --- Cards ------------------------------------------------------------------ */
.crm-card {
  background: var(--card-light);
  border: 1px solid var(--line-light);
  border-radius: 16px;
  box-shadow: var(--shadow-light);
  color: var(--text-light);
}

/* --- Tables: sticky header, zebra rows, hover highlight ---------------------
   The card is the ONLY horizontal scrollport at every width. The page itself
   can never scroll sideways (`body { overflow-x: hidden }`, plus
   `html { overflow-x: clip }` on phones), so if the table were allowed to spill
   out of the card the right-hand columns would simply be clipped and become
   unreachable. Because the card is therefore always a scroll container, the
   sticky <thead> must pin to `top: 0` of that scrollport: `top: var(--header-h)`
   would shift the header 72px down INSIDE the card and cover the first rows. */
.crm-card--table {
  overflow-x: auto;
  overflow-y: hidden; /* horizontal-only scroll: no stray 1px vertical bar */
}

/* ISO country code chip (used where a flag emoji would be platform-dependent). */
.country-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 0.1rem 0.4rem;
  border: 1px solid rgba(16, 27, 20, 0.22);
  border-radius: var(--r-pill);
  background: #f2f5f1;
  color: var(--text-light-dim);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.crm-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  color: var(--text-light);
  font-size: 0.9rem;
}

.crm-table thead th {
  position: sticky;
  top: 0; /* the card is a horizontal scrollport at every width */
  z-index: 4;
  background: #0b3d1e;
  color: #ffe08a;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}

.crm-table tbody td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line-light);
  vertical-align: middle;
}

.crm-table tbody tr:nth-child(even) { background: #fafbf9; }
.crm-table tbody tr:hover { background: #fff8e6; }
.crm-table tbody tr:last-child td { border-bottom: none; }

/* --- Controls on the light surface ------------------------------------------ */
.crm-shell .btn--outline,
.crm-shell .btn--ghost {
  background: #ffffff;
  border-color: rgba(6, 23, 13, 0.2);
  color: var(--text-light);
}
.crm-shell .btn--outline:hover,
.crm-shell .btn--ghost:hover {
  background: #f1f3ef;
  border-color: rgba(6, 23, 13, 0.35);
  color: var(--text-light);
}

.crm-shell .badge {
  background: #eef1ec;
  border-color: var(--line-light);
  color: var(--text-light);
}
.crm-shell .badge--type-sa { background: #157a2c; border-color: transparent; color: #ffffff; }
.crm-shell .badge--type-passport { background: var(--brand-gold); border-color: transparent; color: var(--ink); }

.crm-shell .flash-messages .flash {
  background: #ffffff;
  border-color: var(--line-light);
  color: var(--text-light);
  box-shadow: var(--shadow-light);
}
.crm-shell .flash-messages .flash--error { border-color: rgba(198, 40, 40, 0.4); background: #fdf2f1; }
.crm-shell .flash-messages .flash--warning { border-color: rgba(255, 199, 44, 0.55); background: #fff9e8; }
.crm-shell .flash-messages .flash--success { border-color: rgba(21, 122, 44, 0.35); background: #f1fbf3; }

.crm-shell .field-hint { color: var(--text-light-dim); }
.crm-shell .field-error { color: #c62828; }

/* Light cards inside the CRM keep dark text where utilities did not set it. */
.crm-shell .empty-state {
  background: #ffffff;
  border-color: rgba(6, 23, 13, 0.2);
  color: var(--text-light);
}
.crm-shell .empty-state p + p { color: var(--text-light-dim); }

/* =============================================================================
   19. PRINT (chrome is hidden - handled in site.css)
   ========================================================================== */

@media print {
  body::after { display: none; }
  body { background: #ffffff !important; color: #000000 !important; }
  .site-header,
  .site-footer,
  .marquee,
  .crm-side { display: none !important; }
}

/* =============================================================================
   SHOP PHOTOS (STEP 3)
   -----------------------------------------------------------------------------
   Every photo on the site is a <picture> with a WebP source, a JPG fallback,
   width/height attributes and a sizes attribute. The rules below only handle
   the frames, the overlays and the lightbox - never the loading, which the
   partial does.
   ========================================================================== */

/* --- The shared photo frame ------------------------------------------------ */
/* The background is the photo's dominant colour (set inline by the partial), so
   the reserved box is the right colour from the very first paint. */
.photo {
  display: block;
  position: relative;
  overflow: hidden;
  background-color: #0b1f14; /* fallback when the manifest has no colour */
}

.photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* An upload that 404s (Cloudinary copy deleted, wrong key) must not leave a
   broken-image icon on the page: the frame simply keeps its background. */
.photo--broken img { opacity: 0; }
.photo--broken { background-image: linear-gradient(140deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); }

/* --- Hero: the counter photo (STEP 3.1) ------------------------------------ */
.hero__photo {
  position: relative;
  z-index: 1;
  margin: 0;
  width: 100%;
  border-radius: 28px;
  overflow: visible; /* the badge hangs off the corner */
}

/* The thin gold border sits on a wrapper so the image itself can be the crop. */
.hero__photo::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 28px;
  border: 1px solid rgba(255, 199, 44, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(6, 23, 13, 0.35),
    0 30px 70px -28px rgba(0, 0, 0, 0.75),
    0 8px 24px -12px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 3;
}

.hero__photo .photo {
  border-radius: 28px;
  aspect-ratio: 16 / 10; /* landscape on a phone */
  box-shadow: var(--shadow-2);
}

@media (min-width: 960px) {
  .hero__photo .photo { aspect-ratio: 4 / 5; }
}

.hero__photo .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The counter sits low-left in the frame, the shelves above it. */
  object-position: 50% 42%;
  /* A gentle grade towards the theme's dark green. The file on disk is never
     touched - this is presentation only. */
  filter: saturate(1.05) brightness(0.95);
}

/* The bottom wash that ties the photo into the page background. */
.hero__photo-grade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(6, 23, 13, 0) 55%, rgba(6, 23, 13, 0.55) 100%);
}

/* The caption is a small glass pill inside the frame's bottom-right corner. */
.hero__photo-caption {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  z-index: 4;
  max-width: 68%;
  margin: 0;
  padding: 0.34rem 0.7rem;
  border-radius: var(--r-pill);
  background: rgba(6, 23, 13, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: #ffffff;
  text-align: right;
  /* One line: the pill must not grow into a block over the photo. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The round logo badge, overlapping the bottom-left corner of the photo and
   hanging about 30% of its own width outside the frame. */
.logo-badge--overlap {
  position: absolute;
  z-index: 5;
  left: 0;
  bottom: 0;
  width: 88px; /* mobile */
  padding: 5px;
  border-radius: var(--r-pill);
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.12), rgba(6, 23, 13, 0.92) 70%);
  border: 1px solid rgba(255, 199, 44, 0.55);
  box-shadow:
    0 0 22px rgba(255, 199, 44, 0.22),
    0 14px 30px rgba(0, 0, 0, 0.55);
  transform: translate(-32%, 32%);
  animation: bobo-badge-float 6s ease-in-out infinite;
}

/* On a phone the frame starts at the page gutter (about 16px), so the desktop
   offset would push the badge past the left edge of the screen. Hang it a
   little less far outside, which keeps the overlap without clipping. */
@media (max-width: 959px) {
  .logo-badge--overlap { transform: translate(-12%, 30%); }
}

@media (min-width: 960px) {
  .logo-badge--overlap { width: 120px; padding: 6px; }
}

.logo-badge--overlap img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  object-fit: cover;
}

/* The badge hangs off the frame, so the hero column needs room for it. */
.hero__art { padding-bottom: clamp(1.75rem, 4vw, 2.75rem); }

/* On a phone the photo comes directly under the buttons, before the trust chips
   and the status chip, so the promise of the shop is visible without scrolling.
   The photo order lives here rather than in the markup because the copy block
   has to stay one <div> for the desktop 6/6 grid split. */
@media (max-width: 959px) {
  .hero__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: 48px;
  }
  .hero__copy { display: contents; }
  .pill { order: 1; align-self: flex-start; }
  .hero__title { order: 2; }
  .hero__sub { order: 3; }
  .hero__actions { order: 4; }
  .hero__art { order: 5; margin-top: 2rem; }
  .trust { order: 6; margin-top: 1.75rem; }
  .hero__meta { order: 7; }
}

/* On a phone the headline sits on the same dark page as everything else, but a
   bright photo can bleed behind it on a very wide screen. This gradient keeps
   the text on a known dark background. */
@media (max-width: 899px) {
  .hero::before,
  .hero {
    background-image: linear-gradient(180deg, rgba(6, 23, 13, 0.55), rgba(6, 23, 13, 0.9) 40%, var(--brand-night));
  }
}

/* --- "Inside the shop" bento gallery (STEP 3.2) ---------------------------- */
.bento-gallery {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .bento-gallery { grid-template-columns: repeat(2, 1fr); }
  .bento-tile--1 { grid-column: span 2; }
}

@media (min-width: 1024px) {
  .bento-gallery { grid-template-columns: repeat(6, 1fr); }
  .bento-tile--1 { grid-column: span 4; grid-row: span 2; }
  .bento-tile--2 { grid-column: span 2; }
  .bento-tile--3 { grid-column: span 2; }
  .bento-tile--4 { grid-column: span 3; }
  .bento-tile--5 { grid-column: span 3; }
}

.bento-tile {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: zoom-in;
  background: transparent;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

/* A <button> needs an explicit reset or the UA gives it a background and a
   font that do not match the tiles. */
.bento-tile:focus-visible {
  outline: 3px solid var(--brand-gold);
  outline-offset: 3px;
}

.bento-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 199, 44, 0.4);
  box-shadow: var(--shadow-2);
}

.bento-tile .photo,
.bento-tile__img { width: 100%; height: 100%; }

.bento-tile__img { aspect-ratio: 4 / 3; }
.bento-tile .bento-tile__img img { width: 100%; height: 100%; object-fit: cover; }

/* Hover zoom: the image scales inside its own frame, so the grid never moves. */
.bento-tile .bento-tile__img img {
  transition: transform 420ms var(--ease), filter 420ms var(--ease);
}
.bento-tile:hover .bento-tile__img img,
.bento-tile:focus-visible .bento-tile__img img { transform: scale(1.06); }

.bento-tile__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem 0.9rem 0.8rem;
  font-size: var(--fs-sm);
  color: var(--text);
  text-align: left;
  background: linear-gradient(180deg, transparent, rgba(6, 23, 13, 0.88) 65%);
  pointer-events: none;
}

/* --- Lightbox -------------------------------------------------------------- */
.lightbox {
  width: min(96vw, 1100px);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: rgba(6, 23, 13, 0.96);
  color: var(--text);
  overflow: visible;
}

.lightbox::backdrop { background: rgba(3, 10, 6, 0.88); }

.lightbox__frame {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 1rem;
}

.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  border-radius: calc(var(--r-lg) - 8px);
  box-shadow: var(--shadow-2);
  transition: opacity 180ms var(--ease);
}

/* A short cross-fade while the next photo decodes. */
.lightbox.is-loading .lightbox__img { opacity: 0.25; }

.lightbox__caption {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  text-align: center;
  max-width: 60ch;
}

.lightbox__caption:empty { display: none; }

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(6, 23, 13, 0.8);
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.lightbox__btn:hover { background: rgba(30, 158, 58, 0.9); }
.lightbox__btn:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: 2px; }
.lightbox__btn[hidden] { display: none; }

.lightbox__btn--close { top: 0.7rem; right: 0.7rem; }
.lightbox__btn--prev { top: 50%; left: 0.7rem; transform: translateY(-50%); }
.lightbox__btn--next { top: 50%; right: 0.7rem; transform: translateY(-50%); }
.lightbox__btn--prev:hover,
.lightbox__btn--next:hover { transform: translateY(-50%) scale(1.06); }

@media (max-width: 599px) {
  .lightbox { width: 100vw; max-height: 100dvh; border-radius: 0; }
  .lightbox__img { max-height: 72dvh; }
  /* Bigger tap targets on a phone. */
  .lightbox__btn { width: 48px; height: 48px; }
}

/* --- Category tiles with a photo (STEP 3.4) -------------------------------- */
/* Full bleed: the picture is pinned to the tile's box, so the 20px radius and
   the overflow:hidden on .cat-tile do the cropping. No padding, no gap. */
.cat-tile__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}

.cat-tile__photo-img {
  width: 100%;
  height: 100%;
  transition: transform 400ms var(--ease), filter 400ms var(--ease);
}

.cat-tile--photo:hover .cat-tile__photo-img,
.cat-tile--photo:focus-visible .cat-tile__photo-img { transform: scale(1.05); }

/* Two layers: the dark-green wash that puts the title on a known background
   (which is what keeps it above 4.5:1 on every crop), then a light
   category-coloured tint so the five tiles are still told apart. */
.cat-tile__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 23, 13, 0.05) 0%, rgba(6, 23, 13, 0.34) 38%, rgba(6, 23, 13, 0.88) 100%);
}

.cat-tile[data-cat='edibles'] .cat-tile__scrim {
  background:
    linear-gradient(180deg, rgba(6, 23, 13, 0.05) 0%, rgba(6, 23, 13, 0.32) 38%, rgba(6, 23, 13, 0.88) 100%),
    linear-gradient(140deg, rgba(255, 199, 44, 0.18), rgba(255, 160, 20, 0.12));
}
.cat-tile[data-cat='clothing'] .cat-tile__scrim {
  background:
    linear-gradient(180deg, rgba(6, 23, 13, 0.05) 0%, rgba(6, 23, 13, 0.32) 38%, rgba(6, 23, 13, 0.88) 100%),
    linear-gradient(140deg, rgba(226, 35, 26, 0.18), rgba(160, 20, 15, 0.12));
}
.cat-tile[data-cat='herbs'] .cat-tile__scrim {
  background:
    linear-gradient(180deg, rgba(6, 23, 13, 0.05) 0%, rgba(6, 23, 13, 0.32) 38%, rgba(6, 23, 13, 0.88) 100%),
    linear-gradient(140deg, rgba(30, 158, 58, 0.2), rgba(20, 110, 40, 0.12));
}
.cat-tile[data-cat='herb-tonix'] .cat-tile__scrim {
  background:
    linear-gradient(180deg, rgba(6, 23, 13, 0.05) 0%, rgba(6, 23, 13, 0.32) 38%, rgba(6, 23, 13, 0.88) 100%),
    linear-gradient(140deg, rgba(140, 62, 20, 0.22), rgba(90, 30, 12, 0.16));
}
.cat-tile[data-cat='accessory'] .cat-tile__scrim {
  background:
    linear-gradient(180deg, rgba(6, 23, 13, 0.05) 0%, rgba(6, 23, 13, 0.32) 38%, rgba(6, 23, 13, 0.88) 100%),
    linear-gradient(140deg, rgba(32, 178, 170, 0.2), rgba(18, 110, 105, 0.14));
}

/* Two crops sit against a bright white wall, so they need the extra lift. */
.cat-tile[data-cat='herbs'] .cat-tile__photo-img,
.cat-tile[data-cat='clothing'] .cat-tile__photo-img {
  filter: brightness(0.98) contrast(1.06);
}

/* With a photo behind it the tile's own gradient would fight it. */
.cat-tile--photo { background: var(--brand-night); }

/* The soft highlight blob is decoration for a flat tile; over a photo it just
   fogs the shelf, so it is switched off. */
.cat-tile--photo::after { display: none; }

/* The icon, the title and the arrow all move above the scrim. */
.cat-tile--photo .cat-tile__glyph,
.cat-tile--photo .cat-tile__body,
.cat-tile--photo .cat-tile__arrow { z-index: 2; }

.cat-tile--photo .cat-tile__name { text-shadow: 0 2px 10px rgba(6, 23, 13, 0.85); }
.cat-tile--photo .cat-tile__tag { color: rgba(255, 255, 255, 0.92); text-shadow: 0 2px 8px rgba(6, 23, 13, 0.85); }
.cat-tile--photo .cat-tile__arrow { background: rgba(6, 23, 13, 0.5); }

/* --- Team block (STEP 3.3) ------------------------------------------------- */
.team-strip {
  display: grid;
  gap: 1.1rem;
  margin: 0 0 1.5rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  box-shadow: var(--shadow-1);
}

@media (min-width: 860px) {
  .team-strip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; padding: 1.25rem; }
}

.team-strip .photo,
.team-strip__img { border-radius: calc(var(--r-lg) - 8px); }
.team-strip__img { aspect-ratio: 3 / 2; }
.team-strip .team-strip__img img { width: 100%; height: 100%; object-fit: cover; }

.team-strip__body { display: flex; flex-direction: column; gap: 0.45rem; }

.team-strip__eyebrow {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-gold);
}

.team-strip__caption {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.25;
  color: var(--text);
}

.team-strip__note { font-size: var(--fs-sm); color: var(--text-dim); }

/* --- "Your site is hidden from Google" banner ------------------------------- */
/* A standing condition, not a toast: it sits under the stripe bar, full width,
   and stays until the setting is switched on. The gold-on-dark-red treatment is
   the same one the CRM already uses for a destructive warning. */
.crm-index-warning {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  padding: 0.75rem 1.25rem;
  background: linear-gradient(90deg, rgba(226, 35, 26, 0.22), rgba(226, 35, 26, 0.06));
  border-bottom: 1px solid rgba(255, 199, 44, 0.45);
  color: var(--text);
  font-size: 0.9375rem; /* 15px - never below the 14px secondary-text floor */
  line-height: 1.45;
}

.crm-index-warning__title {
  color: var(--brand-gold);
  font-weight: 700;
}

.crm-index-warning__body { color: var(--text-dim); }

.crm-index-warning code {
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  font-size: 0.875em;
}

.crm-index-warning a {
  color: var(--brand-gold);
  text-decoration: underline;
}

.crm-index-warning a:hover { color: var(--brand-gold-light, var(--brand-gold)); }

/* --- "Your site is hidden from Google" banner ------------------------------- */
/* A standing condition, not a toast: full width under the stripe bar, and it
   stays until the setting is switched on. Gold on a dark-red wash, which is the
   same treatment the CRM already uses for a destructive warning. */
.crm-index-warning {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  padding: 0.75rem 1.25rem;
  background: linear-gradient(90deg, rgba(226, 35, 26, 0.22), rgba(226, 35, 26, 0.06));
  border-bottom: 1px solid rgba(255, 199, 44, 0.45);
  color: var(--text);
  font-size: 0.9375rem; /* 15px - never under the 14px secondary-text floor */
  line-height: 1.45;
}

.crm-index-warning__title { color: var(--brand-gold); font-weight: 700; }
.crm-index-warning__body { color: var(--text-dim); }

.crm-index-warning code {
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  font-size: 0.875em;
}

.crm-index-warning a { color: var(--brand-gold); text-decoration: underline; }
.crm-index-warning a:hover { color: var(--brand-gold-light, var(--brand-gold)); }
/* --- Price list photo (STEP 3.6, staff only) ------------------------------- */
/* The price list is a tall, dense sheet, so it gets a plain sheet of paper
   treatment rather than a photo frame: full width, never cropped, and
   scrollable inside the page so a long list stays readable. */
.price-sheet {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--brand-night);
  box-shadow: var(--shadow-2);
}

.price-sheet__img { display: block; }

.price-sheet__img img {
  width: 100%;
  height: auto;
  /* The photo is upright, not a crop - object-fit must not letterbox it. */
  object-fit: contain;
}

.price-sheet__caption {
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  background: rgba(6, 23, 13, 0.6);
}