/* ============================================================================
   50-cc-site.css — Can Cristòfol website design system ("market garden").
   The ONE stable stylesheet. Styles the imported WordPress/Stackable markup via
   STRUCTURAL classes only — never per-instance .stk-<id> selectors (those styles
   were never harvested; this sheet replaces that whole layer by design).

   Token contract: every color/font/shape decision reads a --cc-* custom property
   declared in §1. The worker may emit <style id="cc-tokens">:root{…}</style>
   AFTER this sheet to override values from config entries (site›theme, core root
   cancristofol). The defaults below must always render a complete design.

   Breakpoints — exactly two, matching Stackable's model (the markup's
   stk--hide-desktop/tablet/mobile classes were authored against 690/1000):
     mobile  < 690px   ·   tablet 690–999.98px   ·   desktop ≥ 1000px
   ========================================================================== */

/* ===== 1. Tokens ========================================================== */
:root {
  /* palette */
  --cc-color-primary: #1f5133;        /* deep leaf green — matches the order app */
  --cc-color-primary-dark: #163d26;
  --cc-color-primary-inv: #ffffff;
  --cc-color-accent: #c98a2d;         /* harvest amber — CTAs, highlights */
  --cc-color-accent-dark: #a76f1e;
  --cc-color-background: #faf9f6;     /* warm off-white page ground */
  --cc-color-surface: #ffffff;        /* cards */
  --cc-color-surface-alt: #f1ede3;    /* parchment tint — alt sections, accordion heads */
  --cc-color-foreground: #232a25;
  --cc-color-muted: #5c6b5e;
  --cc-color-border: #e2e0d5;
  --cc-color-light: #e8ece4;          /* light text on dark/photo grounds */
  --cc-color-success: #3e7a4a;
  --cc-color-warning: #d9a514;
  --cc-color-danger: #a03d2e;
  /* heritage accents (kept as swappable tokens; used sparingly) */
  --cc-color-onion: #d4db7a;
  --cc-color-onion-dark: #4a5c2f;
  --cc-color-coop-bg: #c4956a;
  --cc-color-coop-ink: #2d2318;

  /* type */
  --cc-font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --cc-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cc-font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --cc-fs-300: 0.875rem;
  --cc-fs-400: 1rem;
  --cc-fs-500: 1.125rem;
  --cc-fs-600: clamp(1.2rem, 1.05rem + 0.7vw, 1.45rem);
  --cc-fs-700: clamp(1.45rem, 1.2rem + 1.2vw, 1.9rem);
  --cc-fs-800: clamp(1.8rem, 1.4rem + 1.9vw, 2.6rem);
  --cc-fs-900: clamp(2.2rem, 1.7rem + 2.6vw, 3.4rem);

  /* space & shape */
  --cc-content-max: 1200px;
  --cc-narrow-max: 720px;
  --cc-wide-offset: 120px;
  --cc-section-gap: clamp(3rem, 8vw, 5.5rem);
  --cc-grid-gap: clamp(1rem, 2.5vw, 1.75rem);
  --cc-card-pad: clamp(1.1rem, 2.5vw, 1.6rem);
  --cc-radius-card: 12px;
  --cc-radius-button: 999px;
  --cc-shadow-card: 0 1px 2px rgba(20, 28, 20, 0.06), 0 8px 24px -12px rgba(20, 28, 20, 0.14);
  --cc-shadow-card-hover: 0 2px 4px rgba(20, 28, 20, 0.07), 0 14px 32px -12px rgba(20, 28, 20, 0.2);

  /* Old Blocksy palette slots, remapped so the has-palette-color-* utilities in
     §4 recolor — KEPT because those utilities (outside the deleted §6–§17 compat
     layer) still read them and legal blobs still carry the classes. The
     --wp--style--global layout tokens died with §10 (their only consumer). */
  --wp--preset--color--palette-color-1: var(--cc-color-accent);
  --wp--preset--color--palette-color-2: var(--cc-color-onion-dark);
  --wp--preset--color--palette-color-3: var(--cc-color-muted);
  --wp--preset--color--palette-color-4: var(--cc-color-foreground);
  --wp--preset--color--palette-color-5: var(--cc-color-light);
  --wp--preset--color--palette-color-6: var(--cc-color-surface-alt);
  --wp--preset--color--palette-color-7: var(--cc-color-background);
  --wp--preset--color--palette-color-8: var(--cc-color-primary-inv);
}

/* ===== 2. Fonts (self-hosted, GDPR-clean) ================================= */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/fraunces-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-600.woff2') format('woff2');
}

/* ===== 3. Reset / base ====================================================
   NOTE: raw button/input/select/textarea are deliberately NOT styled globally —
   the /order page ships its own Tailwind-styled form which must not inherit. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cc-color-background);
  color: var(--cc-color-foreground);
  font-family: var(--cc-font-body);
  font-size: var(--cc-fs-400);
  line-height: 1.65;
  overflow-x: clip;
}
img, svg, video, iframe { max-width: 100%; }
/* ⚠️ STOPS AT THE ORDER BUNDLE. #order-root is a self-contained Tailwind app whose utilities
   live in `@layer utilities`, and an UNLAYERED rule in this sheet beats every layered utility
   no matter how specific — so this `height: auto` was silently winning over the bundle's
   `h-12`/`h-9` thumbnails. `:not(:where(…))` because :where() contributes ZERO specificity:
   the exclusion must not change which of this sheet's own rules wins. See §3's note about
   form controls — same boundary, it was just never drawn around anything else. */
img:not(:where(#order-root *)), video:not(:where(#order-root *)) { height: auto; }
figure { margin: 0; }
::selection { background: var(--cc-color-onion); color: var(--cc-color-coop-ink); }
:focus-visible { outline: 2px solid var(--cc-color-accent); outline-offset: 2px; }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.cc-skip {
  position: absolute; left: 1rem; top: -3rem; z-index: 200;
  background: var(--cc-color-primary); color: var(--cc-color-primary-inv);
  padding: 0.5rem 1rem; border-radius: 0 0 8px 8px;
  transition: top 0.15s ease;
}
.cc-skip:focus-visible { top: 0; }

/* ===== 4. Typography ====================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--cc-font-heading);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--cc-color-foreground);
  margin: 0 0 0.6em;
  overflow-wrap: anywhere;
}
h1 { font-size: var(--cc-fs-900); }
h2 { font-size: var(--cc-fs-800); }
h3 { font-size: var(--cc-fs-700); }
h4 { font-size: var(--cc-fs-600); }
h5 { font-size: var(--cc-fs-500); }
h6 { font-size: var(--cc-fs-400); text-transform: uppercase; letter-spacing: 0.06em; }
p { margin: 0 0 1em; overflow-wrap: anywhere; }
p:last-child { margin-bottom: 0; }
/* Same boundary: unlayered, so this was beating the bundle's `text-white` and painting the
   confirmation screen's WhatsApp button dark green on emerald. */
a:not(:where(#order-root *)) { color: var(--cc-color-primary); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--cc-color-primary-dark); }
ul:not(:where(#order-root *)), ol:not(:where(#order-root *)) { margin: 0 0 1em; padding-left: 1.4em; }
li:not(:where(#order-root *)) { margin-bottom: 0.35em; }
blockquote {
  margin: 1.5em 0; padding: 0.6em 1.2em;
  border-left: 3px solid var(--cc-color-accent);
  color: var(--cc-color-muted); font-size: var(--cc-fs-500);
}
hr { border: 0; border-top: 1px solid var(--cc-color-border); margin: 2rem auto; }
code, pre { font-family: var(--cc-font-mono); font-size: 0.92em; }
strong { font-weight: 600; }

/* Stackable text elements ride the same scale */
.stk-block-heading__text { margin-bottom: 0.6em; }
.stk-block-subtitle__text, .stk-subtitle {
  font-family: var(--cc-font-body);
  font-size: var(--cc-fs-500);
  color: var(--cc-color-muted);
  line-height: 1.5;
}
.stk-block-text__text { margin-bottom: 0; }
.stk-block-text { margin-bottom: 1em; }
.stk-block-text:last-child { margin-bottom: 0; }
/* Stackable "bar" heading style — small accent bar above */
.is-style-bar .stk-block-heading__text::before,
.stk-block-heading.is-style-bar > *::before {
  content: '';
  display: block;
  width: 44px; height: 4px;
  border-radius: 2px;
  background: var(--cc-color-accent);
  margin-bottom: 0.55em;
}
.has-text-align-center .is-style-bar .stk-block-heading__text::before,
.is-style-bar .has-text-align-center.stk-block-heading__text::before { margin-inline: auto; }
.stk-highlight {
  background: var(--cc-color-onion);
  color: var(--cc-color-coop-ink);
  padding: 0.06em 0.28em;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* text utilities from the markup */
.has-text-align-center { text-align: center; }
.has-text-align-left { text-align: left; }
.has-text-align-right { text-align: right; }
.aligncenter { margin-inline: auto; display: block; }
.has-white-color { color: var(--cc-color-primary-inv); }
.has-medium-font-size { font-size: var(--cc-fs-500); }
.has-palette-color-1-color { color: var(--wp--preset--color--palette-color-1); }
.has-palette-color-2-color { color: var(--wp--preset--color--palette-color-2); }
.has-palette-color-3-color { color: var(--wp--preset--color--palette-color-3); }
.has-palette-color-4-color { color: var(--wp--preset--color--palette-color-4); }
.has-palette-color-5-color { color: var(--wp--preset--color--palette-color-5); }
.has-palette-color-6-color { color: var(--wp--preset--color--palette-color-6); }
.has-palette-color-7-color { color: var(--wp--preset--color--palette-color-7); }
.has-palette-color-8-color { color: var(--wp--preset--color--palette-color-8); }
.has-palette-color-1-background-color { background-color: var(--wp--preset--color--palette-color-1); }
.has-palette-color-2-background-color { background-color: var(--wp--preset--color--palette-color-2); }
.has-palette-color-3-background-color { background-color: var(--wp--preset--color--palette-color-3); }
.has-palette-color-4-background-color { background-color: var(--wp--preset--color--palette-color-4); }
.has-palette-color-5-background-color { background-color: var(--wp--preset--color--palette-color-5); }
.has-palette-color-6-background-color { background-color: var(--wp--preset--color--palette-color-6); }
.has-palette-color-7-background-color { background-color: var(--wp--preset--color--palette-color-7); }
.has-palette-color-8-background-color { background-color: var(--wp--preset--color--palette-color-8); }
@media (max-width: 689.98px) {
  .has-text-align-center-mobile { text-align: center; }
}

/* ===== 5. Layout engine =================================================== */
.cc-main { min-height: 55vh; }
.cc-section { margin: 0; padding-block: var(--cc-section-gap); }
/* Owner 2026-08-10: text always centre/middle. Lists stay left-ragged inside a
   centered block; legal prose keeps a readable left edge. */
.cc-section { text-align: center; }
/* 🚨 THIS RULE IS WHAT KILLED THE CARD GRID. The order bundle mounts inside a .cc-section, so
   `display: inline-block` landed on every <ul> it renders — including the card grid, which
   Tailwind had correctly set to `display: grid`. The site sheet is UNLAYERED and Tailwind's
   utilities live in `@layer utilities`, and an unlayered declaration beats a layered one
   whatever the specificity, so `.grid` never stood a chance and the cards stacked one-up at
   every width. The centring on the line above reached in the same way. Both stop at the
   bundle now; nothing in this sheet may style the inside of #order-root. */
.cc-section :is(ul, ol):not(:where(#order-root *)) { text-align: left; display: inline-block; margin-inline: auto; }
.cc-order-shell { text-align: left; }
.cc-legal .cc-section { text-align: left; }
.cc-legal .cc-section :is(ul, ol) { display: block; }
.cc-section + .cc-section { padding-top: 0; }
/* a full-bleed hero opening the page sits flush under the nav */
.cc-main > .cc-section:first-child:has(> .wp-block-cover.alignfull, .wp-block-cover.alignfull) {
  padding-top: 0;
}
.cc-section-title { text-align: center; }
/* The page-opening band is .cc-pagehead and the home hero is .cc-section--hero;
   both live in §21 with the rest of the typed components. */

/* THREE standardised width tiers (owner 2026-08-10):
     prose        — everything defaults to the readable measure (--cc-narrow-max)
     components   — grids, cards, media, embeds, alignwide → --cc-content-max
     full-bleed   — .alignfull spans the viewport (image bands, heroes)
   Both rules are :where() so they stay (0,1,0); the component rule comes second
   and wins where both match. */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: min(var(--cc-narrow-max), 92vw);
  margin-left: auto !important;
  margin-right: auto !important;
}
.is-layout-constrained > :where(:is(.alignwide, .wp-block-columns, .wp-block-image,
    .tagembed-widget, .wp-block-group, figure):not(.alignfull)) {
  max-width: min(var(--cc-content-max), 92vw);
}
.alignfull { width: 100%; max-width: none; }

/* ===== 6. Profiles (typed) ================================================
   The WP/Stackable compat layer (§6–§17: Stackable structure, Blocksy palette
   grids, Complianz, WPForms, posts grid) was DELETED 2026-08-12 with the typed
   cutover — the renderer emits no .stk-/.wp-/cmplz/wpforms markup any more, and
   the legal blobs keep only the generic guards (§20) and .cc-body (§21). What
   follows is the TYPED profile UI that previously shared that range. */
/* Uniform cards; the full bio opens in a MODAL (owner 2026-08-11 — the hover
   overlay looked awful). Open/close is a checkbox and the dialog is the toggle's
   own sibling, so ONE static rule opens it — no JS, and no generated
   per-profile <style> either. Markup: _worker.js profileCard(). */
.cc-profile { position: relative; }
/* The PHOTO is the subject — full card width, no inset — with the name, role and
   Read more under it. The bio lives in the modal. */
.cc-profile-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--cc-color-surface);
  border-radius: var(--cc-radius-card);
  box-shadow: var(--cc-shadow-card);
  overflow: hidden;
  padding-bottom: 1rem;
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}
label.cc-profile-card { cursor: pointer; }
.cc-profile:hover > label.cc-profile-card,
.cc-pm-toggle:focus-visible ~ .cc-profile-card {
  box-shadow: var(--cc-shadow-card-hover);
  transform: translateY(-3px);
}
.cc-profile-photo {
  margin: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--cc-color-surface-alt);
}
.cc-profile-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.cc-profile-name {
  font-size: var(--cc-fs-600);
  margin: 0.9rem var(--cc-card-pad) 0.2rem;
  text-align: center;
}
.cc-profile-role {
  margin: 0 var(--cc-card-pad);
  font-size: var(--cc-fs-300);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cc-color-muted);
  text-align: center;
}
.cc-profile-more {
  margin-top: auto;
  padding-top: 0.7rem;
  font-size: var(--cc-fs-300);
  font-weight: 600;
  color: var(--cc-color-primary);
  text-align: center;
}
.cc-pm-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cc-pm-toggle:focus-visible ~ .cc-profile-card {
  outline: 2px solid var(--cc-color-accent);
  outline-offset: 3px;
}
/* the whole interaction, in one rule: the dialog is the toggle's sibling */
.cc-pm-toggle:checked ~ .cc-pm { display: flex; }
body:has(.cc-pm-toggle:checked) { overflow: hidden; }
/* .cc-main is a stacking context under the sticky nav, so an open dialog has to
   lift the whole layer or the header floats over the backdrop */
body:has(.cc-pm-toggle:checked) .cc-main { z-index: 200; }

.cc-pm {
  display: none;
  position: fixed; inset: 0;
  z-index: 200;
  align-items: center; justify-content: center;
  padding: clamp(0.75rem, 4vw, 2rem);
}
.cc-pm-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 26, 18, 0.6);
  backdrop-filter: blur(3px);
  cursor: pointer;
}
/* One column, centred, scrolling without visible scrollbar chrome. */
.cc-pm-dialog {
  position: relative;
  width: min(680px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--cc-color-surface);
  border-radius: var(--cc-radius-card);
  box-shadow: 0 24px 60px -12px rgba(15, 26, 18, 0.45);
  text-align: center;
  scrollbar-width: none;
}
.cc-pm-dialog::-webkit-scrollbar { width: 0; height: 0; }
/* a wide, shallow portrait keeps the name and the bio above the fold */
.cc-pm-photo {
  margin: 0;
  aspect-ratio: 16 / 9;
  max-height: 40vh;
  overflow: hidden;
  background: var(--cc-color-surface-alt);
  border-radius: var(--cc-radius-card) var(--cc-radius-card) 0 0;
}
.cc-pm-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.cc-pm-text {
  display: flex; flex-direction: column;
  gap: 0.35rem;
  padding: var(--cc-card-pad);
}
.cc-pm-text .cc-p {
  margin-top: 0.6rem;
  max-width: 60ch;
  margin-inline: auto;
  text-align: left;
}
.cc-pm-close {
  position: absolute; top: 0.5rem; right: 0.6rem;
  z-index: 2;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--cc-color-foreground);
  font-size: 1.5rem; line-height: 1;
  cursor: pointer;
  box-shadow: var(--cc-shadow-card);
}
.cc-pm-close:hover { background: #fff; color: var(--cc-color-primary); }

/* ---- Profiles grid ------------------------------------------------------
   One grid per profile_grid section (the section IS the group — "Management
   Team", "Trustees"). Column count is the container's decision, not a
   breakpoint's: a card is at least 15rem, and as many fit as fit. */
.cc-profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--cc-grid-gap);
  align-items: stretch;   /* every card the same height */
  width: 100%;
  max-width: min(var(--cc-content-max), 92vw);
  margin-inline: auto;
}
.cc-profile { display: flex; min-width: 0; }

/* ===== 7. CMS section backgrounds =========================================
   section.meta.background {color, gradient, image, fixed, light_text}; the
   worker emits the layers as an inline style on .cc-section--bg (sectionBg).
   Sections span the viewport, so a section background is full-bleed. */
.cc-section--bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-block: clamp(3.5rem, 10vw, 7rem);
}
.cc-section--bg.cc-bg-dark { color: var(--cc-color-primary-inv); }
.cc-section--bg.cc-bg-dark :is(h1, h2, h3, h4) { color: inherit; }
@media (min-width: 1000px) and (hover: hover) {
  .cc-bg-fixed { background-attachment: fixed; }
}
/* any blob element carrying its own inline background reads as a bounded card */
.cc-section :is(div, p, span, li)[style*='background'] {
  border-radius: var(--cc-radius-card);
}

/* ===== 8. Embed shells ====================================================
   Third-party embed shells render empty until their script hydrates them — an
   empty hook must not reserve a hole (the consent placeholder stands in). */
figcaption { font-size: var(--cc-fs-300); color: var(--cc-color-muted); margin-top: 0.4rem; text-align: center; }
.tagembed-widget:empty, .wp-block-cloudinary-gallery:empty { display: none; }
.tagembed-widget { min-height: 0; }

/* ===== 18. Order page shell =============================================== */
/* Flush under the compact hero, and the form's own controls ride in the header
   area rather than opening with a second title block. */
.cc-order-shell { max-width: none; padding-block: 0 !important; }
.cc-order .cc-main { padding-bottom: 0; }
.cc-order #order-root { padding-top: 0; }
.cc-order #order-root > * { margin-top: 0; }
/* the bundle ships its own page heading — the site hero already says it */
.cc-order #order-root > div > header:first-child { padding-top: 0.5rem; }
/* the order bundle's iframe-era order.css hides scrollbars and repaints body —
   this sheet loads after it on /order and must win */
html { scrollbar-width: auto; }
html::-webkit-scrollbar { display: block; }
body { background: var(--cc-color-background); }

/* ===== 19. Site chrome ==================================================== */
.cc-nav {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.25rem 1.3rem;
  padding: 0.8rem clamp(1rem, 4vw, 2.2rem);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cc-color-border);
  position: sticky; top: 0; z-index: 99;
}
.cc-nav .brand {
  font-family: var(--cc-font-heading);
  font-size: 1.35rem; font-weight: 700;
  color: var(--cc-color-primary);
  text-decoration: none;
  margin-right: auto;
  letter-spacing: -0.01em;
}
.cc-nav nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; }
.cc-nav nav a {
  font-size: 0.95rem;
  color: var(--cc-color-foreground);
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}
.cc-nav nav a:hover { color: var(--cc-color-primary); }
.cc-nav nav a.current { color: var(--cc-color-primary); font-weight: 600; border-bottom-color: var(--cc-color-accent); }
.cc-nav nav a.cta {
  background: var(--cc-color-accent);
  color: #fff;
  border: 0;
  border-radius: var(--cc-radius-button);
  padding: 0.5rem 1.2rem;
  font-weight: 600;
}
.cc-nav nav a.cta:hover { background: var(--cc-color-accent-dark); color: #fff; }
.cc-nav nav a.cta.current { border-bottom: 0; }
.cc-nav nav a.lang {
  border: 1px solid var(--cc-color-border);
  border-radius: var(--cc-radius-button);
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cc-color-muted);
}
.cc-nav nav a.lang:hover { color: var(--cc-color-primary); border-color: var(--cc-color-primary); }
#cc-nav-toggle, .cc-burger { display: none; }
@media (max-width: 689.98px) {
  .cc-burger {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    cursor: pointer; font-size: 1.45rem;
    color: var(--cc-color-primary);
  }
  .cc-nav nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 0.4rem 0 0.6rem; }
  .cc-nav nav a { padding: 0.7rem 0.25rem; border-bottom: 1px solid var(--cc-color-border); }
  .cc-nav nav a:last-child { border-bottom: 0; }
  .cc-nav nav a.cta { text-align: center; margin-top: 0.5rem; }
  .cc-nav nav a.lang { align-self: center; margin-top: 0.5rem; border-bottom: 1px solid var(--cc-color-border); }
  #cc-nav-toggle:checked ~ nav { display: flex; }
  /* Search stays on the top row, beside the burger — a search bar folded into a
     hamburger is not a search bar. Brand and gaps give up a little width for it;
     at 320px that leaves the pill ~4.5rem, which is still the icon plus the head
     of the active filter, and one tap opens the whole thing. */
  .cc-nav { gap: 0.25rem 0.6rem; }
  .cc-nav .brand { font-size: 1.15rem; }
  .cc-search-slot { flex: 1 1 4rem; max-width: none; }
  .cc-search { padding: 0 0.7rem; gap: 0.4rem; }
  /* Three controls plus a burger do not fit a 320px row. The view switch stays — it is the one
     with no other home — and the clear × goes, because the modal the pill opens carries both
     ways to clear (the "All" facet and the search field's own ×). */
  .cc-search-clear { display: none; }
  .cc-view-toggle { margin-left: 0.2rem; }
}

/* ── header search ─────────────────────────────────────────────────────────
   ONE control for the seasonal list, living in the header on every page.

   Two renderings, one box. The shell ships a plain GET form to /order?q=… that
   works with no JS at all; on /order the order bundle portals its live version
   into this slot — same classes, plus the active filter and its count — and sets
   `data-live`, which hides the form. Styling both from one place is what keeps
   the header from jumping when the bundle takes over.

   flex-basis stays SMALL and the pill GROWS into whatever the nav leaves. A
   20rem basis would force the nav onto a second row on every mid-width screen:
   wrapping is decided on the base size, before any shrinking happens. */
.cc-search-slot {
  display: flex; align-items: center;
  flex: 1 1 7rem; min-width: 2.5rem; max-width: 20rem;
}
.cc-search-slot[data-live] > form { display: none; }
.cc-search {
  display: flex; align-items: center; gap: 0.5rem;
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  height: 2.5rem; margin: 0; padding: 0 0.9rem;
  background: var(--cc-color-surface);
  border: 1px solid var(--cc-color-border);
  border-radius: 999px;
  color: var(--cc-color-muted);
  text-align: left;
  cursor: text;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
button.cc-search { cursor: pointer; font: inherit; }
.cc-search:hover { border-color: var(--cc-color-primary); }
.cc-search:focus-within,
button.cc-search:focus-visible {
  outline: none;
  border-color: var(--cc-color-primary);
  box-shadow: 0 0 0 3px rgba(31, 81, 51, 0.13);
}
.cc-search-ico { flex: 0 0 auto; color: var(--cc-color-primary); }
.cc-search-in {
  flex: 1 1 auto; min-width: 0;
  padding: 0; border: 0; background: transparent;
  font: inherit; font-size: 0.9rem;
  color: var(--cc-color-foreground);
}
.cc-search-in:focus { outline: none; }
.cc-search-in::-webkit-search-cancel-button { -webkit-appearance: none; }
/* The live pill's label IS the active filter, so it truncates and never wraps —
   the header is sticky and this is what tells a customer, sixty products down,
   why they are only being shown six. */
.cc-search-label {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 0.9rem;
}
.cc-search--on {
  border-color: var(--cc-color-accent);
  color: var(--cc-color-foreground);
  font-weight: 500;
}
.cc-search-n {
  flex: 0 0 auto;
  min-width: 1.45rem; padding: 0 0.4rem;
  background: var(--cc-color-accent); color: #fff;
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; line-height: 1.45rem; text-align: center;
}
.cc-search-clear {
  flex: 0 0 auto;
  width: 2rem; height: 2rem; margin-left: 0.2rem; padding: 0;
  background: transparent; border: 0; border-radius: 999px;
  color: var(--cc-color-muted); font-size: 1.15rem; line-height: 1;
  cursor: pointer;
}
.cc-search-clear:hover { background: var(--cc-color-surface-alt); color: var(--cc-color-foreground); }
/* List ⇄ grid, beside the search rather than inside the modal — a two-state switch behind a
   door cannot be found. One button showing the view it switches TO, so it costs 2.25rem of a
   phone header instead of the 4.5rem a segmented pair would. */
.cc-view-toggle {
  flex: 0 0 auto;
  width: 2.25rem; height: 2.25rem; margin-left: 0.3rem; padding: 0;
  background: var(--cc-color-surface);
  border: 1px solid var(--cc-color-border);
  border-radius: 999px;
  color: var(--cc-color-primary);
  font-size: 0.95rem; line-height: 1;
  cursor: pointer;
}
.cc-view-toggle:hover { border-color: var(--cc-color-primary); background: var(--cc-color-surface-alt); }

/* The closing CTA band sits FLUSH to the footer — no page ground between them. */
.cc-main > .cc-section:last-child { padding-bottom: 0; }
.cc-main > .cc-section:last-child.cc-section--bg { padding-bottom: clamp(3.5rem, 10vw, 7rem); }
.cc-main > .cc-section:last-child:has(.stk--has-background-overlay) { padding-bottom: 0; }
.cc-main > .cc-section:last-child > .stk--has-background-overlay:last-child { margin-bottom: 0; }

/* Footer reveals only at the bottom of the page: the content layer scrolls over
   it, so the footer is uncovered by the last section clearing it. Falls back to
   a normal static footer where sticky isn't supported. */
.cc-foot {
  border-top: 1px solid var(--cc-color-border);
  background: var(--cc-color-surface-alt);
  padding: 2rem clamp(1rem, 4vw, 2.2rem) 2.4rem;
  font-size: var(--cc-fs-300);
  color: var(--cc-color-muted);
  text-align: center;
  position: sticky;
  bottom: 0;
  z-index: 0;
}
.cc-main {
  position: relative;
  z-index: 1;
  background: var(--cc-color-background);
}
/* the order page's fixed basket must clear the revealed footer */
.cc-order .cc-foot { position: static; }
.cc-foot .cc-foot-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.4rem 1.4rem;
  margin-bottom: 0.9rem;
}
.cc-foot a { color: var(--cc-color-primary); text-decoration: none; }
.cc-foot a:hover { text-decoration: underline; }

/* ===== 20. Guards ========================================================= */
/* 12 sections carry WP-era inline widths — never let them overflow */
.cc-section [style*='width'] { max-width: 100% !important; }
.cc-section table { display: block; overflow-x: auto; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ===== 21. Typed content components =======================================
   Everything below styles the TYPED renderer: one component per section kind
   (_worker.js KINDS), built from plain-text child blocks. No content carries
   markup, so every visual decision lives here — and nothing here is inherited
   from the WordPress theme. The §6–§17 compat layer above serves only the
   `legal` blobs and the sections not yet decomposed; when the last body is
   typed, that layer and this one part company cleanly.

   Sizing is CONTAINER-RELATIVE, not breakpoint-driven: a grid declares its
   narrowest card and lets auto-fit decide the count, so a section reflows on
   the space it actually has. The only viewport units left are the ones that
   genuinely mean the viewport — hero height, modal height.

   The scale, in one place:
     --cc-measure    the text column
     --cc-flow       rhythm between blocks in a stack
     --cc-card-min   narrowest a grid card may get before the grid wraps      */
:root {
  --cc-measure: 66ch;
  --cc-flow: 1.15rem;
  --cc-card-min: 20rem;
}

/* ---- the block stack ----------------------------------------------------
   Every kind builds on this: children in manifest order, one flow gap between
   them, text held to a measure while media may run wider. */
.cc-blocks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cc-flow);
  width: 100%;
  max-width: min(var(--cc-content-max), 92vw);
  margin-inline: auto;
}
.cc-blocks > * { max-width: 100%; }
.cc-blocks > :is(p, h2, h3, h4, h5) { max-width: min(var(--cc-measure), 100%); }
.cc-prose { max-width: min(var(--cc-measure), 92vw); }

/* ---- paragraph ----------------------------------------------------------
   A newline in the copy is a real line break in the copy: pre-line renders it
   without ever putting a tag inside the data. */
.cc-p {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* ---- heading ------------------------------------------------------------ */
.cc-heading { margin: 0; text-wrap: balance; }
.cc-section-title {
  margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
  max-width: min(var(--cc-measure), 92vw);
  text-wrap: balance;
}

/* ---- cta ---------------------------------------------------------------- */
.cc-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.6rem;
  border-radius: var(--cc-radius-button);
  background: var(--cc-color-primary);
  color: var(--cc-color-primary-inv);
  font-family: var(--cc-font-body);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}
.cc-cta:hover {
  background: var(--cc-color-primary-dark);
  color: var(--cc-color-primary-inv);
  transform: translateY(-1px);
}

/* ---- media --------------------------------------------------------------
   An image never dictates the height of what contains it. */
.cc-media { margin: 0; width: 100%; }
.cc-media img {
  display: block;
  margin-inline: auto;
  width: auto;
  max-width: 100%;
  max-height: min(65vh, 620px);
  border-radius: var(--cc-radius-card);
}
video.cc-video {
  display: block;
  width: 100%;
  border-radius: var(--cc-radius-card);
  background: var(--cc-color-primary-dark);
}
.cc-embed { width: 100%; }
.cc-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--cc-radius-card);
}

/* ---- hero ---------------------------------------------------------------
   Backdrop video, scrim, then the block stack over it. */
.cc-section--hero {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(24rem, 78vh, 46rem);
  padding: clamp(3rem, 8vw, 6rem) 1rem;
  overflow: hidden;
  background-color: var(--cc-color-primary-dark);
  color: var(--cc-color-primary-inv);
}
.cc-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cc-section--hero::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(15, 26, 18, 0.5), rgba(15, 26, 18, 0.3));
}
.cc-hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(1rem, 2.5vw, 1.6rem);
  width: 100%;
  max-width: min(var(--cc-content-max), 92vw);
}
.cc-section--hero :is(h1, h2, h3, h4, p) { color: inherit; }
.cc-section--hero .cc-p { max-width: 46ch; font-size: var(--cc-fs-500); }
.cc-hero-logo { width: auto; }
.cc-hero-logo img {
  max-height: clamp(5.5rem, 15vh, 12rem);
  width: auto;
  border-radius: 0;
}

/* ---- feature ------------------------------------------------------------
   Cards of image + text + CTA. The column count is the container's decision;
   a lone feature turns side-on rather than standing as a solitary column. */
.cc-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--cc-card-min), 100%), 1fr));
  gap: var(--cc-grid-gap);
  align-items: stretch;
  width: 100%;
  max-width: min(var(--cc-content-max), 92vw);
  margin-inline: auto;
}
.cc-feature {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--cc-color-surface);
  border-radius: var(--cc-radius-card);
  box-shadow: var(--cc-shadow-card);
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.cc-feature:hover { box-shadow: var(--cc-shadow-card-hover); transform: translateY(-3px); }
/* in a grid an image is a 4:3 tile — that is what keeps the cards one size */
.cc-feature-media { margin: 0; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.cc-feature-media img {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  object-fit: cover;
  border-radius: 0;
}
.cc-feature-body {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.6rem;
  flex: 1 1 auto;
  padding: var(--cc-card-pad);
}
.cc-feature-body .cc-heading { font-size: var(--cc-fs-600); }
.cc-feature-body .cc-cta { margin-top: auto; }   /* CTAs line up across a row */
/* a single feature is a row, not a lonely card */
.cc-feature-grid:has(> .cc-feature:only-child) { grid-template-columns: 1fr; }
@media (min-width: 48rem) {
  .cc-feature:only-child { flex-direction: row; align-items: stretch; }
  .cc-feature:only-child > .cc-feature-media { flex: 0 0 45%; aspect-ratio: auto; }
  .cc-feature:only-child > .cc-feature-body {
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 2.5rem);
  }
}

/* ---- faq ----------------------------------------------------------------
   Native details/summary: the interaction is the browser's. */
.cc-faq {
  width: 100%;
  max-width: min(var(--cc-narrow-max), 92vw);
  margin-inline: auto;
  text-align: left;
}
details.cc-faq-item {
  border: 1px solid var(--cc-color-border);
  border-radius: var(--cc-radius-card);
  background: var(--cc-color-surface);
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.cc-faq-q {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 0.95rem 3rem 0.95rem var(--cc-card-pad);
  font-family: var(--cc-font-heading);
  font-size: var(--cc-fs-500);
  font-weight: 600;
  background: var(--cc-color-surface-alt);
}
.cc-faq-q::-webkit-details-marker { display: none; }
.cc-faq-q::after {
  content: '';
  position: absolute; right: 1.15rem; top: 50%;
  width: 0.55rem; height: 0.55rem;
  border-right: 2px solid var(--cc-color-primary);
  border-bottom: 2px solid var(--cc-color-primary);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
details[open] > .cc-faq-q::after { transform: translateY(-30%) rotate(225deg); }
.cc-faq-a {
  display: flex; flex-direction: column;
  gap: 0.8rem;
  padding: var(--cc-card-pad);
}
.cc-faq-a > :is(p, h2, h3, h4, h5) { max-width: min(var(--cc-measure), 100%); }

/* ---- cta band -----------------------------------------------------------
   The full-bleed close: dark ground, one line, one button. A CMS background
   (section.meta.background) paints over the default. */
.cc-section--cta-band {
  padding-block: clamp(3.5rem, 10vw, 7rem);
  background-color: var(--cc-color-primary-dark);
  color: var(--cc-color-primary-inv);
}
.cc-section--cta-band :is(h1, h2, h3, h4, p) { color: inherit; }
.cc-band {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(1rem, 3vw, 1.6rem);
  width: 100%;
  max-width: min(var(--cc-narrow-max), 92vw);
  margin-inline: auto;
}
.cc-section--cta-band .cc-cta { background: var(--cc-color-accent); }
.cc-section--cta-band .cc-cta:hover { background: var(--cc-color-accent-dark); }
.cc-main > .cc-section--cta-band:last-child { padding-bottom: clamp(3.5rem, 10vw, 7rem); }

/* ---- gallery ------------------------------------------------------------
   The tagembed feed hydrates itself into .cc-widget; until it does there is
   nothing to see, so it must not reserve a hole in the page. */
.cc-widget {
  width: 100%;
  max-width: min(var(--cc-content-max), 92vw);
  margin-inline: auto;
}
.cc-widget:empty { display: none; }

/* ---- legal, and anything not yet decomposed -----------------------------
   ONE container, and nothing else. The blob is served exactly as authored:
   these rules deliberately do not reach inside it (that is what the compat
   layer above is for) and carry NO alignment opinion, because every section
   still awaiting decomposition also lands here. */
.cc-body {
  width: 100%;
  max-width: min(var(--cc-content-max), 92vw);
  margin-inline: auto;
}
.cc-legal .cc-body { text-align: left; max-width: min(var(--cc-narrow-max), 92vw); }

/* ---- page head ----------------------------------------------------------
   Every page that does not open with a hero opens with this band. */
.cc-pagehead {
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(14rem, 34vh, 21rem);
  padding: clamp(2rem, 6vw, 3.5rem) 1rem;
  background-color: var(--cc-color-primary-dark);
  background-image:
    linear-gradient(180deg, rgba(15, 26, 18, 0.55), rgba(15, 26, 18, 0.35)),
    url(https://res.cloudinary.com/dd345nnhg/images/f_auto,q_auto/v1740944921/CanCristofolIbiza_087/CanCristofolIbiza_087.jpg?_i=AA);
  background-size: cover;
  background-position: center;
  color: var(--cc-color-primary-inv);
}
.cc-pagetitle { margin: 0; color: inherit; text-align: center; text-wrap: balance; }
/* the order page's head is compact so the form sits flush beneath it */
.cc-order .cc-pagehead { min-height: 0; padding-block: clamp(1.25rem, 3vw, 2rem); }

/* ---- kind hooks ---------------------------------------------------------
   Every section carries `cc-section--<kind>` and `data-kind`, but layout lives
   on the INNER container (.cc-feature-grid, .cc-faq, .cc-profiles-grid, …), so
   most modifiers deliberately carry no rules: they are stable hooks for a
   one-off, and a kind can be restyled without touching the components.
   `--legal` in particular must stay neutral — every section still awaiting
   decomposition renders under it too. */
.cc-section--profile-grid { padding-inline: clamp(1rem, 4vw, 2.5rem); }

/* ---- contact form -------------------------------------------------------
   Native form (section meta.kind='contact_form', _worker.js contactSection).
   Plain POST is the baseline; CONTACT_JS upgrades it. Controls are styled HERE
   deliberately — §3's "no global form styling" rule protects the order bundle,
   and these selectors are scoped to the form so they cannot reach it. */
.cc-contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--cc-flow);
  width: 100%;
  max-width: min(var(--cc-measure), 92vw);
  margin-inline: auto;
  text-align: left;
}
.cc-contact-field { display: flex; flex-direction: column; gap: 0.35rem; }
.cc-contact-field > span { font-weight: 600; font-size: var(--cc-fs-300); }
.cc-contact-form input[type='text'],
.cc-contact-form input[type='email'],
.cc-contact-form textarea {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--cc-color-border);
  border-radius: 8px;
  background: var(--cc-color-surface);
  font: inherit;
  color: inherit;
}
.cc-contact-form input:focus-visible,
.cc-contact-form textarea:focus-visible {
  outline: 2px solid var(--cc-color-primary);
  outline-offset: 0;
  border-color: var(--cc-color-primary);
}
.cc-contact-consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--cc-fs-300);
}
.cc-contact-consent input { margin-top: 0.2rem; }
.cc-contact-form .cc-cta { align-self: center; border: 0; cursor: pointer; font-size: var(--cc-fs-400); }
.cc-contact-msg {
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: var(--cc-radius-card);
  font-weight: 600;
}
.cc-contact-msg--ok { background: var(--cc-color-surface-alt); color: var(--cc-color-success); }
.cc-contact-msg--err { background: var(--cc-color-surface-alt); color: var(--cc-color-danger); }
/* honeypot — visually hidden, still focusable-by-bot. NOT display:none: some
   naive bots skip hidden fields, and screen readers are kept out via aria-hidden. */
.cc-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}