/* ==========================================================================
   Cacao Boys base styles: fonts, reset, typography, layout, buttons, chrome.
   Component/section styles live alongside their templates and are appended here
   as the build grows.
   ========================================================================== */

/* --- Fonts (self-hosted variable Open Sans) ------------------------------ */
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans.var.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Italic.var.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

/* --- Brand typeface (Montserrat, client-supplied, SIL OFL) ---------------
   Used ONLY for the "Cacao Boys" company name in the header and footer.
   Subset to basic Latin with the wght axis kept at 400-700, so it costs
   ~22KB rather than the ~390KB full variable font. */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Wordmark.subset.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* --- Reset / normalize (light touch on top of WP defaults) --------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cb-bg);
  color: var(--cb-text);
  font-family: var(--cb-font-body);
  font-weight: var(--cb-weight-body);
  font-size: var(--cb-text-base);
  line-height: var(--cb-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }
a:hover { color: var(--cb-accent-2); }

button,
input,
select,
textarea { font: inherit; color: inherit; }

ul, ol { margin: 0; padding: 0; }

/* --- Typography ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--cb-font-heading);
  font-weight: var(--cb-weight-heading);
  line-height: var(--cb-leading-heading);
  color: var(--cb-text);
  margin: 0 0 0.6em;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--cb-weight-medium); }

/* Heavy uppercase display headings, per the mockup's heading style */
.cb-display {
  font-weight: var(--cb-weight-black);
  text-transform: uppercase;
  letter-spacing: var(--cb-tracking-display);
  line-height: var(--cb-leading-display);
}

/* Small italic script eyebrow ("Made for delight") */
.cb-eyebrow {
  display: inline-block;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--cb-accent-text);
  font-size: var(--cb-text-lg);
  margin-bottom: 0.75rem;
}

.cb-eyebrow--caps {
  font-style: normal;
  font-family: var(--cb-font-body);
  text-transform: uppercase;
  letter-spacing: var(--cb-tracking-eyebrow);
  font-size: var(--cb-text-sm);
  font-weight: var(--cb-weight-heading);
}

/* --- Layout primitives --------------------------------------------------- */
.cb-container {
  width: 100%;
  max-width: var(--cb-container);
  margin-inline: auto;
  padding-inline: var(--cb-gutter);
}
.cb-container--narrow { max-width: var(--cb-container-narrow); }
.cb-container--prose { max-width: var(--cb-container-prose); }

.cb-section { padding-block: var(--cb-section-y); }
.cb-section--alt { background: var(--cb-surface-alt); }
.cb-section--inverse { background: var(--cb-inverse); color: var(--cb-text-inverse); }
.cb-section--inverse h1,
.cb-section--inverse h2,
.cb-section--inverse h3 { color: var(--cb-text-inverse); }

.cb-stack > * + * { margin-top: var(--cb-flow, 1rem); }

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

.cb-skip-link {
  position: absolute;
  left: 0.5rem; top: -3rem;
  background: var(--cb-inverse);
  color: var(--cb-text-inverse);
  padding: 0.65rem 1rem;
  border-radius: var(--cb-radius-sm);
  z-index: 1000;
  transition: top var(--cb-transition);
}
.cb-skip-link:focus { top: 0.5rem; }

/* --- Buttons ------------------------------------------------------------- */
.cb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.6rem;
  border-radius: var(--cb-radius-pill);
  border: var(--cb-border-width) solid var(--cb-btn-border);
  background: var(--cb-btn-bg);
  color: var(--cb-btn-text);
  font-weight: var(--cb-weight-heading);
  font-size: var(--cb-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1;
  cursor: pointer;
  transition: background var(--cb-transition), color var(--cb-transition), border-color var(--cb-transition);
}
.cb-btn:hover {
  background: var(--cb-btn-hover-bg);
  border-color: var(--cb-btn-hover-bg);
  color: var(--cb-btn-hover-text);
}
.cb-btn--ghost {
  background: transparent;
  color: var(--cb-btn-ghost-text);
  border-color: var(--cb-btn-ghost-border);
}
.cb-btn--ghost:hover {
  background: var(--cb-btn-hover-bg);
  border-color: var(--cb-btn-hover-bg);
  color: var(--cb-btn-hover-text);
}
.cb-btn--sm { min-height: 2.5rem; padding: 0.5rem 1.15rem; }
.cb-btn--text {
  background: none;
  border: none;
  color: var(--cb-text);
  padding: 0;
  min-height: 0;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* --- Site header --------------------------------------------------------- */
.cb-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--cb-cream-light) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: var(--cb-border-width) solid var(--cb-border);
}
.cb-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 5rem;
}
.cb-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--cb-text);
}
.cb-brand img { max-height: 2.75rem; width: auto; }
/* Pin the logo to one size on every page. !important on height resists the
   global img{height:auto} reset and WooCommerce/plugin img rules that would
   otherwise let it render taller on some templates than others. */
.cb-brand__logo { height: 2.75rem !important; width: auto; flex: none; }
.cb-brand__wordmark {
  font-family: var(--cb-font-wordmark);
  font-weight: var(--cb-weight-heading);
  font-size: var(--cb-text-xl);
  line-height: 1;
  letter-spacing: 0.01em;
  color: inherit;
}
@media (min-width: 640px) {
  .cb-brand__wordmark { font-size: var(--cb-text-2xl); }
}

.cb-nav__list {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
}
.cb-nav__link {
  font-size: var(--cb-text-xs);
  font-weight: var(--cb-weight-heading);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.cb-nav__link:hover { color: var(--cb-accent-text); }
.cb-nav__link--active { color: var(--cb-accent-text); position: relative; }
.cb-nav--primary .cb-nav__link--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.4rem;
  height: 2px;
  border-radius: 2px;
  background: var(--cb-accent);
}

/* Caret indicating a dropdown. */
.cb-nav__link--has-children { display: inline-flex; align-items: center; gap: 0.34rem; }
.cb-nav__caret { flex: none; transition: transform var(--cb-transition); }
.cb-nav--primary .cb-nav__item--has-children:hover .cb-nav__caret,
.cb-nav--primary .cb-nav__item--has-children:focus-within .cb-nav__caret { transform: rotate(180deg); }

/* Shop dropdown (desktop): revealed on hover / keyboard focus-within. */
.cb-nav--primary .cb-nav__item--has-children { position: relative; }
.cb-nav--primary .cb-nav__submenu {
  list-style: none;
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 50%;
  transform: translateX(-50%) translateY(0.4rem);
  min-width: 12rem;
  padding: 0.5rem 0;
  margin: 0;
  background: var(--cb-cream-light);
  border: var(--cb-border-width) solid var(--cb-border);
  border-radius: var(--cb-radius-md);
  box-shadow: 0 12px 28px rgba(60, 36, 20, 0.14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--cb-transition), transform var(--cb-transition), visibility var(--cb-transition);
  z-index: 60;
}
/* Hover bridge so the pointer can cross the (now larger) gap without closing. */
.cb-nav--primary .cb-nav__item--has-children::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 1.1rem;
}
.cb-nav--primary .cb-nav__item--has-children:hover .cb-nav__submenu,
.cb-nav--primary .cb-nav__item--has-children:focus-within .cb-nav__submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.cb-nav__submenu-item { display: block; }
.cb-nav__submenu-link {
  display: block;
  padding: 0.5rem 1.25rem;
  font-size: var(--cb-text-xs);
  font-weight: var(--cb-weight-heading);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
  transition: background var(--cb-transition), color var(--cb-transition);
}
.cb-nav__submenu-link:hover { background: var(--cb-surface-inset); color: var(--cb-accent-text); }
.cb-nav__submenu-divider {
  height: var(--cb-border-width);
  margin: 0.4rem 1.25rem;
  background: var(--cb-border);
}

.cb-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.cb-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--cb-radius-pill);
  border: var(--cb-border-width) solid var(--cb-border);
  color: var(--cb-text);
  transition: background var(--cb-transition), color var(--cb-transition);
}
.cb-cart:hover { background: var(--cb-surface-inset); color: var(--cb-text); }
/* Item-count bubble; matches the dark "Shop" pill. Hidden when empty. */
.cb-cart__count {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.32rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cb-radius-pill);
  background: var(--cb-inverse);
  color: var(--cb-text-inverse);
  font-family: var(--cb-font-heading);
  font-size: 0.68rem;
  font-weight: var(--cb-weight-black);
  line-height: 1;
  box-shadow: 0 0 0 2px var(--cb-cream-light);
}
.cb-cart__count--empty { display: none; }
.cb-cart__icon { display: block; }

/* Mobile nav: CSS-only <details> disclosure */
.cb-nav-toggle { display: none; }
.cb-nav-toggle > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--cb-radius-pill);
  border: var(--cb-border-width) solid var(--cb-border);
  color: var(--cb-text);
}
.cb-nav-toggle > summary::-webkit-details-marker { display: none; }
/* Burger swaps to a close glyph while the panel is open. */
.cb-nav-toggle[open] > summary > svg { display: none; }
.cb-nav-toggle[open] > summary::after {
  content: "\2715";
  font-size: 0.95rem;
  line-height: 1;
}

@media (max-width: 1023.98px) {
  .cb-nav--primary { display: none; }
  /* Anchor the panel to the burger itself, so the popup hangs off the
     top-right corner instead of spanning the full header width. */
  .cb-nav-toggle { display: block; position: relative; }
  /* Shop already lives in the hamburger + the cart icon, so drop the
     redundant header Shop pill to keep the mobile action row uncrowded. */
  .cb-header__shop-cta { display: none; }
  /* Compact right-anchored card, matched to the TDM Insights mobile menu's
     dimensions and location (right-aligned, width:max-content, 210px min,
     78vw cap, offset 8px below the trigger). Cacao's design system is flat,
     so this carries the border + radius but deliberately skips TDM's shadow. */
  .cb-nav-toggle[open] .cb-nav-toggle__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: max-content;
    min-width: 210px;
    max-width: 78vw;
    background: var(--cb-cream-light);
    border: var(--cb-border-width) solid var(--cb-border);
    border-radius: var(--cb-radius-md);
    padding: 0.5rem 0;
    z-index: 50;
    /* Keep a long menu inside the viewport rather than running off-screen. */
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .cb-nav-toggle__panel .cb-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  /* Full-height tap targets for the menu links (>=44px). */
  .cb-nav-toggle__panel .cb-nav__link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 22px;
    white-space: nowrap;
  }
  .cb-nav-toggle__panel .cb-nav__link--has-children { justify-content: space-between; gap: 0.75rem; }
  .cb-nav-toggle__panel .cb-nav__item--has-children { width: 100%; }
  /* Mobile: submenu is a static, indented list under Shop (no dropdown). */
  .cb-nav__submenu--mobile {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 0.25rem;
    padding: 0;
  }
  .cb-nav__submenu--mobile .cb-nav__submenu-link {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 22px 0 40px;
    font-size: var(--cb-text-xs);
    letter-spacing: 0.14em;
    white-space: nowrap;
  }
  .cb-nav__submenu--mobile .cb-nav__submenu-divider {
    height: var(--cb-border-width);
    margin: 0.35rem 22px;
    background: var(--cb-border);
  }
}

/* --- Site footer --------------------------------------------------------- */
.cb-footer {
  background: var(--cb-inverse);
  color: var(--cb-text-inverse);
  padding-block: clamp(2rem, 3.5vw, 3rem);
}
.cb-footer a { color: var(--cb-text-inverse); }
.cb-footer a:hover { color: var(--cb-accent); }
.cb-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2rem;
}
.cb-footer__brand { font-family: var(--cb-font-wordmark); font-weight: var(--cb-weight-heading); font-size: var(--cb-text-2xl); letter-spacing: 0.01em; margin-bottom: 0.6rem; display: inline-flex; align-items: center; gap: 0.55rem; }
.cb-footer__logo { height: 2.25rem !important; width: auto; flex: none; }
.cb-footer__tagline { color: var(--cb-text-inverse-muted); margin-bottom: 1rem; max-width: 26rem; }
.cb-footer__contact { color: var(--cb-text-inverse-muted); font-size: var(--cb-text-sm); line-height: 1.75; }
.cb-footer__list { list-style: none; display: grid; gap: 0.5rem; font-size: var(--cb-text-sm); }
.cb-footer__bottom {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cb-text-inverse-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: var(--cb-text-xs);
  color: var(--cb-text-inverse-muted);
}
@media (max-width: 980px) {
  .cb-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .cb-footer__grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* --- WooCommerce utility pages (cart / checkout / account via page.php) --- */
.cb-wc-page { padding-block: clamp(2rem, 4vw, 3.5rem); }
.cb-wc-page__header { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.cb-wc-page__title { font-size: var(--cb-text-5xl); margin: 0; }

/* --- Prose (Markdown / editor content) ----------------------------------- */
.cb-prose { max-width: var(--cb-container-prose); }
.cb-prose h2 { margin-top: 1.8em; }
.cb-prose a { color: var(--cb-accent-2); text-decoration: underline; text-underline-offset: 0.2em; }
.cb-prose img { border-radius: var(--cb-radius-md); margin-block: 1.5em; }

/* ==========================================================================
   Homepage sections (front-page.php)
   ========================================================================== */

/* --- 1. Hero ------------------------------------------------------------- */
/* Contained split hero: calm cream text column beside a bounded, capped photo,
   so the imagery supports the copy rather than dominating the viewport. */
.cb-hero { padding-block: clamp(1.5rem, 4vw, 3rem); }
.cb-hero__inner {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .cb-hero__inner { grid-template-columns: 1.05fr 0.95fr; }
}
.cb-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 40rem;
}
.cb-hero__location { margin-bottom: 1rem; }
.cb-hero__title { font-size: var(--cb-text-5xl); margin: 0; max-width: 16ch; }
.cb-hero__copy {
  margin-top: 1.25rem;
  max-width: 34rem;
  font-size: var(--cb-text-lg);
  line-height: 1.6;
  color: var(--cb-text-muted);
}
.cb-hero__copy + .cb-hero__copy { margin-top: 0; }
.cb-hero__copy:not(:last-of-type) { margin-bottom: 1.05rem; }
.cb-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }
.cb-hero__media {
  /* Top-aligned so the image's top edge matches the eyebrow, consistently with
     every other template. See page-about.css / page-events.css for the twins. */
  align-self: start;
  margin: 0;
  overflow: hidden;
  border-radius: var(--cb-radius-xl);
  background: var(--cb-surface-alt);
}
.cb-hero__image {
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 4;
  max-height: 28rem;
  object-fit: cover;
  object-position: center;
}

/* --- 2. Collections ------------------------------------------------------ */
.cb-collections { padding-block: var(--cb-section-y); }
.cb-collections__intro { max-width: 52rem; margin-inline: auto; text-align: center; }
.cb-collections__title { font-size: var(--cb-text-4xl); margin: 0.5rem 0 0; }

.cb-collections__grid {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .cb-collections__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cb-collections__grid { grid-template-columns: repeat(5, 1fr); } }

.cb-collection-card {
  display: block;
  border: var(--cb-border-width) solid var(--cb-border);
  background: var(--cb-surface);
  border-radius: var(--cb-radius-lg);
  padding: 0.75rem;
  transition: background var(--cb-transition), border-color var(--cb-transition), transform var(--cb-transition);
}
.cb-collection-card:hover {
  background: var(--cb-surface-inset);
  border-color: var(--cb-border-strong);
  transform: translateY(-2px);
}
.cb-collection-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--cb-radius-md);
}
.cb-collection-card__body { padding: 1.25rem 0.35rem 0.5rem; }
.cb-collection-card__title { font-size: var(--cb-text-xl); margin: 0 0 0.5rem; }
.cb-collection-card__copy { font-size: var(--cb-text-sm); line-height: 1.55; color: var(--cb-text-muted); margin: 0; }
.cb-collection-card__action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.15rem;
  font-size: var(--cb-text-xs);
  font-weight: var(--cb-weight-black);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.cb-collection-card__action svg { transition: transform var(--cb-transition); }
.cb-collection-card:hover .cb-collection-card__action svg { transform: translateX(3px); }

.cb-collections__features {
  margin-top: clamp(3rem, 5vw, 5rem);
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) { .cb-collections__features { grid-template-columns: repeat(2, 1fr); } }

.cb-feature-card {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border: var(--cb-border-width) solid var(--cb-border);
  background: var(--cb-surface);
  border-radius: var(--cb-radius-lg);
}
@media (min-width: 768px) { .cb-feature-card { grid-template-columns: 1fr 1fr; } }
.cb-feature-card__image { width: 100%; height: 100%; min-height: 14rem; object-fit: cover; }
.cb-feature-card__body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(1.75rem, 3vw, 2.5rem); }
.cb-feature-card__label { font-size: var(--cb-text-xs); font-weight: var(--cb-weight-black); text-transform: uppercase; letter-spacing: 0.14em; color: var(--cb-accent-text); margin: 0; }
.cb-feature-card__title { font-size: var(--cb-text-2xl); margin: 1rem 0 0; }
.cb-feature-card__copy { margin: 1rem 0 1.5rem; line-height: 1.6; color: var(--cb-text-muted); }
/* Phones: image sits cleanly above the text (never behind it), and the body is
   an explicitly solid panel so copy stays readable.

   The image keeps its NATURAL aspect here rather than being forced into a
   16:10 letterbox. On desktop the card is two columns and the image has to fill
   the height of the body beside it, so `cover` is right there. Stacked on a
   phone it has no such job, and these are product shots: the seasonal tile is
   1024x819 and the build-a-box platter is a 1024x1024 square, so 16:10 + cover
   was throwing away 22% and 38% of their height respectively, slicing the top
   and bottom off a round tray of chocolates. Nothing here needs a crop, so the
   whole subject is shown. */
@media (max-width: 767.98px) {
  .cb-feature-card__image { aspect-ratio: auto; height: auto; min-height: 0; max-height: none; }
  .cb-feature-card__body { background: var(--cb-surface); padding: 1.5rem 1.35rem 1.75rem; }
  .cb-feature-card__title { font-size: var(--cb-text-xl); }
}

/* --- 3. Craft + Events --------------------------------------------------- */
.cb-craft { background: var(--cb-surface-alt); padding-block: var(--cb-section-y); }
.cb-craft__story { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .cb-craft__story { grid-template-columns: 1fr 1fr; } }
.cb-craft__image { width: 100%; max-width: 27rem; margin-inline: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--cb-radius-xl); }
.cb-craft__title { font-size: var(--cb-text-4xl); margin: 0.5rem 0 0; }
.cb-craft__description { margin-top: 1.5rem; font-size: var(--cb-text-lg); line-height: 1.7; color: var(--cb-text-muted); }
.cb-craft__copy .cb-btn { margin-top: 2rem; }

.cb-events {
  position: relative;
  overflow: hidden;
  border-radius: var(--cb-radius-xl);
  margin-top: clamp(3rem, 5vw, 5rem);
  min-height: clamp(20rem, 32vw, 24rem);
  background: var(--cb-surface);
}
.cb-events__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cb-events__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--cb-bg) 0%, color-mix(in srgb, var(--cb-bg) 95%, transparent) 35%, color-mix(in srgb, var(--cb-bg) 35%, transparent) 100%);
}
@media (min-width: 640px) {
  .cb-events__scrim { background: linear-gradient(to right, var(--cb-bg) 0%, color-mix(in srgb, var(--cb-bg) 95%, transparent) 45%, transparent 78%); }
}
.cb-events__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: clamp(20rem, 32vw, 24rem);
  max-width: 34rem;
  padding: clamp(1.75rem, 4vw, 4rem);
}
.cb-events__title { font-size: var(--cb-text-3xl); margin: 0; }
.cb-events__description { margin-top: 1.25rem; font-size: var(--cb-text-lg); line-height: 1.7; color: var(--cb-text-muted); }
.cb-events__copy .cb-btn { margin-top: 2rem; }

/* --- 4. Visit ------------------------------------------------------------ */
.cb-visit { padding-block: var(--cb-section-y); }
.cb-visit__panel {
  border: var(--cb-border-width) solid var(--cb-border);
  background: var(--cb-surface);
  border-radius: var(--cb-radius-xl);
  padding: clamp(1.75rem, 4vw, 3.5rem);
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
  grid-template-columns: 1fr;
}
/* Desktop: text column (heading + body + contact details) on the left,
   image filling the right half. Uses grid areas so the shared markup order
   (header, image, details) needs no template changes. */
@media (min-width: 1024px) {
  .cb-visit__panel {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "header image"
      "details image";
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
  .cb-visit__header { grid-area: header; }
  .cb-visit__details { grid-area: details; align-self: start; }
  .cb-visit__image {
    grid-area: image;
    align-self: stretch;
    height: 100%;
    min-height: 22rem;
    aspect-ratio: auto;
  }
}
.cb-visit__header { display: grid; gap: 1rem; align-items: start; grid-template-columns: 1fr; }
.cb-visit__title { font-size: var(--cb-text-4xl); margin: 0; }
.cb-visit__description { font-size: var(--cb-text-lg); line-height: 1.7; color: var(--cb-text-muted); margin: 0; max-width: 46ch; }
.cb-visit__image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; border-radius: var(--cb-radius-lg); }
.cb-visit__details {
  padding-top: 1.5rem;
  border-top: var(--cb-border-width) solid var(--cb-border);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
.cb-visit__detail { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; border-radius: var(--cb-radius-md); transition: background var(--cb-transition); }
.cb-visit__detail:hover { background: var(--cb-surface-inset); }
.cb-visit__icon { flex: none; color: var(--cb-accent); }
.cb-visit__detail-label { display: block; font-size: var(--cb-text-xs); font-weight: var(--cb-weight-black); text-transform: uppercase; letter-spacing: 0.12em; }
.cb-visit__detail-value { display: block; margin-top: 0.25rem; font-size: var(--cb-text-sm); color: var(--cb-text-muted); }

/* ============================================================
   Real photography: soft fade + crossfade rotators
   Motion is opt-out for reduced-motion visitors (first frame stays).
   ============================================================ */

/* Dissolve an image's lower edge into the section beneath it. Kept gentle: the
   subject sits above the fade line so product detail is not lost. */
.cb-fade {
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(to bottom, #000 78%, rgba(0, 0, 0, 0) 100%);
  background: transparent;
}

/* Crossfade rotator: slides stack, only .is-active shows. */
.cb-rotator { position: relative; }
.cb-rotator .cb-rotator__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
}
.cb-rotator .cb-rotator__slide.is-active { opacity: 1; }

/* Hero rotators need an intrinsic box once their slides are absolute. */
.cb-hero__media.cb-rotator,
.cb-evt-hero__media.cb-rotator { aspect-ratio: 5 / 4; max-height: 28rem; }

/* Events rotator fills the banner behind the scrim and copy. */
.cb-events__media { position: absolute; inset: 0; }

@media (prefers-reduced-motion: reduce) {
  .cb-rotator .cb-rotator__slide { transition: none; }
  /* The one animation left unguarded: html{scroll-behavior:smooth} at the top
     of this file. Three CSS guards and a JS bail-out already exist elsewhere. */
  html { scroll-behavior: auto; }
}


/* --- FAQ blocks ---------------------------------------------------------- */
/* Questions sit directly above their own answers, in a <dl>, because that is
   what the pairing actually is. No accordion: these answers earn no rich result
   (Google restricted FAQ rich results to gov/health sites in 2023), so hiding
   them behind a click would only make a shopper work for something they came to
   find, and an AI answer engine reads the question next to its answer either
   way. */
.cb-faq {
  padding-block: var(--cb-section-y);
  background: var(--cb-surface-alt);
  /* ONE measure for the whole block. The rows and the answer share it, so the
     chevron on the right lands on the same line the paragraph wraps at, and the
     two can never drift apart when either is touched. */
  --cb-faq-measure: 68ch;
}
.cb-faq__title { font-size: var(--cb-text-3xl); margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
/* Rows are held to the answer's reading measure rather than the page container:
   a question row stretched to 1400px puts its chevron miles from its text, and
   the answer underneath would either wrap short of it (ragged) or run too wide
   to read comfortably. Matching the two lines everything up. */
.cb-faq__list { max-width: var(--cb-faq-measure); margin: 0; }
.cb-faq__item { border-top: var(--cb-border-width) solid var(--cb-border); }
.cb-faq__item:first-child { border-top: 0; }

/* The whole row is the control, so the tap target is the full width rather than
   the words alone. */
.cb-faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  cursor: pointer;
  padding-block: 1.35rem;
  font-family: var(--cb-font-heading);
  font-weight: var(--cb-weight-heading);
  font-size: var(--cb-text-lg);
  line-height: 1.35;
  color: var(--cb-text);
  list-style: none;
  transition: color var(--cb-transition);
}
/* Both are needed: the pseudo-element for WebKit, list-style above for the rest. */
.cb-faq__q::-webkit-details-marker { display: none; }
.cb-faq__q:hover { color: var(--cb-accent-text); }
.cb-faq__q:focus-visible { outline: 2px solid var(--cb-accent-text); outline-offset: 3px; border-radius: var(--cb-radius-sm); }

/* Chevron, drawn rather than shipped as an icon: it is two borders. */
.cb-faq__q::after {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: -0.25rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--cb-transition);
}
.cb-faq__item[open] .cb-faq__q::after { transform: rotate(-135deg); margin-top: 0.15rem; }

.cb-faq__a {
  margin: 0;
  padding-bottom: 1.5rem;
  line-height: 1.7;
  color: var(--cb-text-muted);
  /* No cap of its own: the list above already holds the measure. */
}

@media (prefers-reduced-motion: reduce) {
  .cb-faq__q, .cb-faq__q::after { transition: none; }
}

/* ============================================================
   Free-shipping progress notice (cart + checkout)
   Lives in main.css rather than woo-cart.css / woo-checkout.css
   because it renders on both, and those two files load separately.
   ============================================================ */

.cb-free-ship {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--cb-radius-md);
  background: var(--cb-cream-light);
  border: 1px solid color-mix(in oklab, var(--cb-caramel) 35%, transparent);
}

.cb-free-ship__text {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--cb-cocoa);
}

.cb-free-ship--earned .cb-free-ship__text { font-weight: 600; }

.cb-free-ship__track {
  height: 0.4rem;
  border-radius: var(--cb-radius-pill);
  background: color-mix(in oklab, var(--cb-cocoa) 12%, transparent);
  overflow: hidden;
}

.cb-free-ship__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cb-caramel);
  transition: width 0.4s ease;
}

.cb-free-ship--earned .cb-free-ship__fill { background: var(--cb-accent-text); }

@media (prefers-reduced-motion: reduce) {
  .cb-free-ship__fill { transition: none; }
}