/* === tokens/_ds_bundle.css === */
/* src/components.css */
* {
  box-sizing: border-box;
}
.cc-h1,
.cc-h2,
.cc-h3,
.cc-h4,
.cc-h5,
.cc-h6 {
  font-family: var(--cc-font-heading);
  font-weight: var(--cc-font-heading-weight);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 var(--cc-space-2);
}
.cc-h1 {
  font-size: 48px;
}
.cc-h2 {
  font-size: 34px;
}
.cc-h3 {
  font-size: 26px;
}
.cc-h4 {
  font-size: 20px;
}
.cc-h5 {
  font-size: 17px;
}
.cc-h6 {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cc-display {
  font-family: var(--cc-font-display);
  font-weight: var(--cc-font-display-weight);
  font-style: italic;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
}
.cc-text-muted {
  color: color-mix(in srgb, var(--cc-color-text) 60%, transparent);
}
.cc-hr {
  height: 1px;
  border: 0;
  margin: var(--cc-space-6) 0;
  background: var(--cc-color-divider);
}
.cc-btn {
  display:inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  font-family: var(--cc-font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  color: var(--cc-color-text);
  background: transparent;
  border: 1.5px solid transparent;
  padding: var(--cc-space-3) var(--cc-space-6);
  border-radius: var(--cc-radius-pill);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;flex-direction:row !important;}
.cc-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.cc-btn-primary {
  background: var(--cc-color-accent);
  color: var(--cc-color-bg);
}
.cc-btn-primary:hover {
  background: var(--cc-accent-700);
}
.cc-btn-primary:active {
  background: var(--cc-accent-800);
}
.cc-btn-secondary {
  background: var(--cc-color-accent-2);
  color: var(--cc-color-bg);
}
.cc-btn-secondary:hover {
  background: var(--cc-accent2-700);
}
.cc-btn-secondary:active {
  background: var(--cc-accent2-800);
}
.cc-btn-outline {
  border-color: var(--cc-color-text);
  color: var(--cc-color-text);
}
.cc-btn-outline:hover {
  background: color-mix(in srgb, var(--cc-color-text) 8%, transparent);
}
.cc-btn-ghost {
  color: var(--cc-accent-700);
  padding-inline: var(--cc-space-2);
}
.cc-btn-ghost:hover {
  background: color-mix(in srgb, var(--cc-color-accent) 10%, transparent);
}
.cc-btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
}
.cc-btn-block {
  width: 100%;
  margin-top: var(--cc-space-2);
}
.cc-stepper {
  display:inline-flex !important;
  align-items: center;
  border: 1.5px solid var(--cc-color-divider);
  border-radius: var(--cc-radius-pill);
  overflow: hidden;flex-direction:row !important;}
.cc-stepper button {
  width: 36px;
  height: 36px;
  display:grid !important;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--cc-color-text);
  font-size: 18px;
  line-height: 1;
}
.cc-stepper button:hover {
  background: var(--cc-color-surface);
}
.cc-stepper input {
  width: 40px;
  text-align: center;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--cc-color-text);
}
.cc-field {
  display:block !important;
}
.cc-field > label {
  display:block !important;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--cc-color-text);
}
.cc-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--cc-color-text);
  caret-color: var(--cc-color-accent);
  background: var(--cc-color-bg);
  border: 1.5px solid var(--cc-color-divider);
  border-radius: var(--cc-radius-sm);
}
.cc-input:hover {
  border-color: color-mix(in srgb, var(--cc-color-text) 45%, transparent);
}
.cc-input:focus-visible {
  border-color: var(--cc-color-accent-2);
  outline-offset: 0;
}
.cc-textarea {
  min-height: 110px;
  resize: vertical;
}
.cc-radio {
  display:inline-flex !important;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;flex-direction:row !important;}
.cc-radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.cc-radio .cc-dot {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--cc-color-divider);
}
.cc-radio:hover .cc-dot {
  border-color: var(--cc-color-accent-2);
}
.cc-radio input:checked + .cc-dot {
  border-color: var(--cc-color-accent-2);
  background: var(--cc-color-accent-2);
  box-shadow: inset 0 0 0 4px var(--cc-color-bg);
}
.cc-seg {
  display:inline-flex !important;
  flex-direction: row !important;
  overflow: hidden;
  border: 1.5px solid var(--cc-color-divider);
  border-radius: var(--cc-radius-pill);
}
.cc-seg-opt {
  display:inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;flex-direction:row !important;}
.cc-seg-opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.cc-seg-opt + .cc-seg-opt {
  border-left: 1.5px solid var(--cc-color-divider);
}
.cc-seg-opt:has(input:checked) {
  background: var(--cc-color-accent-2);
  color: var(--cc-color-bg);
}
.cc-seg-opt:not(:has(input:checked)):hover {
  background: var(--cc-color-surface);
}
.cc-card {
  display:flex !important;
  flex-direction:column !important;
  gap: var(--cc-space-2);
  padding: var(--cc-space-4);
  border-radius: var(--cc-radius-md);
  background: var(--cc-color-surface);
}
.cc-card-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cc-accent-700);
}
.cc-card-title {
  font-family: var(--cc-font-heading);
  font-weight: var(--cc-font-heading-weight);
  font-size: 19px;
  line-height: 1.2;
}
.cc-card-body {
  margin: 0;
  font-size: 14px;
  opacity: 0.85;
  flex: 1;
}
.cc-card-meta {
  display:flex !important;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: color-mix(in srgb, var(--cc-color-text) 60%, transparent);flex-direction:row !important;}
.cc-card-quote {
  background: var(--cc-color-bg);
  border: 1.5px solid var(--cc-color-divider);
}
.cc-card-quote .cc-card-body {
  font-family: var(--cc-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  opacity: 1;
  line-height: 1.35;
  color: var(--cc-color-text);
}
.cc-elev-sm {
  box-shadow: var(--cc-shadow-sm);
}
.cc-elev-md {
  box-shadow: var(--cc-shadow-md);
}
.cc-elev-lg {
  box-shadow: var(--cc-shadow-lg);
}
.cc-product-card {
  display:flex !important;
  flex-direction:column !important;
  gap: var(--cc-space-2);
  background: var(--cc-color-bg);
  border-radius: var(--cc-radius-md);
  overflow: hidden;
}
.cc-product-photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--cc-radius-md);
  background:
    repeating-linear-gradient(
      45deg,
      var(--cc-color-surface),
      var(--cc-color-surface) 10px,
      color-mix(in srgb, var(--cc-color-surface) 60%, var(--cc-color-bg)) 10px,
      color-mix(in srgb, var(--cc-color-surface) 60%, var(--cc-color-bg)) 20px);
  display:grid !important;
  place-items: center;
  text-align: center;
  padding: var(--cc-space-2);
  font-family:
    ui-monospace,
    "SF Mono",
    Menlo,
    monospace;
  font-size: 11px;
  color: color-mix(in srgb, var(--cc-color-text) 55%, transparent);
}
.cc-product-tags {
  display:flex !important;
  gap: 6px;
  flex-wrap:wrap !important;flex-direction:row !important;}
.cc-product-name {
  font-family: var(--cc-font-heading);
  font-weight: var(--cc-font-heading-weight);
  font-size: 17px;
  line-height: 1.25;
  margin: 0;
}
.cc-product-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--cc-accent-700);
}
.cc-product-price .cc-from {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.7;
  margin-right: 3px;
}
.cc-rating {
  display:flex !important;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--cc-gold-700);flex-direction:row !important;}
.cc-rating svg {
  fill: var(--cc-color-gold);
  stroke: var(--cc-gold-700);
  stroke-width: 1;
}
.cc-tag {
  display:inline-flex !important;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 4px 11px;
  border-radius: var(--cc-radius-pill);flex-direction:row !important;}
.cc-tag-accent {
  background: var(--cc-accent-100);
  color: var(--cc-accent-800);
}
.cc-tag-accent2 {
  background: var(--cc-accent2-100);
  color: var(--cc-accent2-800);
}
.cc-tag-gold {
  background: var(--cc-gold-100);
  color: var(--cc-gold-900);
}
.cc-tag-neutral {
  background: var(--cc-neutral-200);
  color: var(--cc-neutral-800);
}
.cc-tag-outline {
  border: 1.5px solid var(--cc-color-accent-2);
  color: var(--cc-accent2-800);
}
.cc-trust-badge {
  display:inline-flex !important;
  flex-direction:column !important;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px solid var(--cc-color-accent-2);
  color: var(--cc-accent2-800);
  text-align: center;
  padding: var(--cc-space-2);
}
.cc-trust-badge .cc-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}
.cc-trust-badge .cc-sub {
  font-size: 8px;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cc-nav {
  display:flex !important;
  align-items: center;
  gap: var(--cc-space-6);
  padding: var(--cc-space-3) var(--cc-space-6);
  background: var(--cc-color-bg);
  border-bottom: 1px solid var(--cc-color-divider);flex-direction:row !important;}
.cc-nav-brand {
  font-family: var(--cc-font-display);
  font-weight: var(--cc-font-display-weight);
  font-style: italic;
  font-size: 24px;
  margin-right: auto;
  color: var(--cc-color-text);
}
.cc-nav-links {
  display:flex !important;
  align-items: center;
  gap: var(--cc-space-4);flex-direction:row !important;}
.cc-nav a {
  color: inherit;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.cc-nav a:hover,
.cc-nav a[aria-current=page] {
  color: var(--cc-accent-700);
}
.cc-nav-cart {
  position: relative;
  display:inline-flex !important;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cc-color-surface);flex-direction:row !important;}
.cc-nav-cart .cc-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--cc-radius-pill);
  background: var(--cc-color-accent);
  color: var(--cc-color-bg);
  font-size: 10px;
  font-weight: 800;
  display:grid !important;
  place-items: center;
}
.cc-nav-utility {
  display:flex !important;
  align-items: center;
  gap: var(--cc-space-4);
  padding: var(--cc-space-1) var(--cc-space-6);
  background: var(--cc-accent2-800);
  color: var(--cc-color-bg);
  font-size: 12px;flex-direction:row !important;}
.cc-nav-utility a {
  color: var(--cc-color-bg);
  text-decoration: none;
}
.cc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.cc-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cc-color-text) 65%, transparent);
  padding: var(--cc-space-3) var(--cc-space-2);
  border-bottom: 1.5px solid var(--cc-color-divider);
}
.cc-table td {
  padding: var(--cc-space-3) var(--cc-space-2);
  border-bottom: 1px solid var(--cc-color-divider);
  vertical-align: middle;
}
.cc-table tbody tr:hover {
  background: color-mix(in srgb, var(--cc-color-accent-2) 5%, transparent);
}
.cc-stock {
  display:inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 13px;flex-direction:row !important;}
.cc-stock .cc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cc-color-accent-2);
}
.cc-dialog-backdrop {
  position: fixed;
  inset: 0;
  display:grid !important;
  place-items: center;
  padding: var(--cc-space-4);
  background: color-mix(in srgb, var(--cc-neutral-900) 55%, transparent);
}
.cc-dialog {
  width: min(440px, 100%);
  display:flex !important;
  flex-direction:column !important;
  gap: var(--cc-space-3);
  padding: var(--cc-space-6);
  border-radius: var(--cc-radius-lg);
  background: var(--cc-color-bg);
  box-shadow: var(--cc-shadow-lg);
}
.cc-dialog-title {
  font-family: var(--cc-font-heading);
  font-weight: var(--cc-font-heading-weight);
  font-size: 22px;
  margin: 0;
}
.cc-dialog-body {
  font-size: 14px;
  opacity: 0.85;
}
.cc-dialog-actions {
  display:flex !important;
  justify-content: flex-end;
  gap: var(--cc-space-2);
  margin-top: var(--cc-space-2);flex-direction:row !important;}

/* appended from cfg.cssEntry */
/*
  Crafty Cook: design tokens.
  Source of truth for the system's look. Every component in ./components
  reads exclusively from these custom properties, never a hard-coded hex,
  font name, or px value.
*/
:root {
  /* Core palette */
  --cc-color-bg: #f7f3e6;
  --cc-color-surface: #efe7d2;
  --cc-color-text: #22301f;
  --cc-color-accent: #ba3d14;
  --cc-color-accent-2: #1e6141;
  --cc-color-gold: #dc9a22; /* reserved: ratings, subscriptions, trust badges only */
  --cc-color-divider: color-mix(in srgb, #22301f 20%, transparent);

  /* Neutral ramp: oat paper (100) to the brand's own ink (900). This
     brand's "black" is a dark forest green, not true grey. */
  --cc-neutral-100: #fbf8ee;
  --cc-neutral-200: #efe7d2;
  --cc-neutral-300: #ddd2af;
  --cc-neutral-400: #c0b888;
  --cc-neutral-500: #9fa066;
  --cc-neutral-600: #7c8350;
  --cc-neutral-700: #59613c;
  --cc-neutral-800: #38452a;
  --cc-neutral-900: #22301f;

  /* Base design-system accent ramp; overridden by the brand palette below. */
  --cc-accent-100: #fdeee7;
  --cc-accent-200: #fad7c5;
  --cc-accent-300: #f3b393;
  --cc-accent-400: #e68a5d;
  --cc-accent-500: #d06432;
  --cc-accent-600: #ba3d14;
  --cc-accent-700: #93300f;
  --cc-accent-800: #6c240b;
  --cc-accent-900: #451707;

  /* Base design-system accent-2 ramp; overridden by the brand palette below. */
  --cc-accent2-100: #e6f1ea;
  --cc-accent2-200: #c3decb;
  --cc-accent2-300: #91c09e;
  --cc-accent2-400: #5a9c70;
  --cc-accent2-500: #2f7a4c;
  --cc-accent2-600: #1e6141;
  --cc-accent2-700: #174e35;
  --cc-accent2-800: #123b28;
  --cc-accent2-900: #0b2418;

  /* Gold: a short 5-step scale, deliberately not a full ramp. */
  --cc-gold-100: #fbf0d8;
  --cc-gold-300: #f0ce85;
  --cc-gold-500: #dc9a22;
  --cc-gold-700: #a66d12;
  --cc-gold-900: #6e4608;

  /* Type */
  --cc-font-display: "Fraunces", Georgia, serif;
  --cc-font-heading: "Fraunces", Georgia, serif;
  --cc-font-heading-weight: 600;
  --cc-font-display-weight: 900;
  --cc-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Spacing: a wider top end than most systems (up to 64px) because this
     is an editorial layout: sections breathe rather than pack tight. */
  --cc-space-1: 4px;
  --cc-space-2: 8px;
  --cc-space-3: 12px;
  --cc-space-4: 16px;
  --cc-space-6: 24px;
  --cc-space-8: 32px;
  --cc-space-12: 48px;
  --cc-space-16: 64px;

  /* Radius: soft, like the hand-tied pouches, not corporate-sharp. */
  --cc-radius-sm: 8px;
  --cc-radius-md: 14px;
  --cc-radius-lg: 24px;
  --cc-radius-pill: 999px;

  /* Elevation: soft, warm, ink-tinted. Nothing floats hard. */
  --cc-shadow-sm: 0 1px 3px color-mix(in srgb, #22301f 12%, transparent);
  --cc-shadow-md: 0 6px 20px color-mix(in srgb, #22301f 14%, transparent);
  --cc-shadow-lg: 0 20px 48px color-mix(in srgb, #22301f 20%, transparent);
}

.cc-root {
  background: var(--cc-color-bg);
  color: var(--cc-color-text);
  font-family: var(--cc-font-body);
  font-size: 16px;
  line-height: 1.6;
}
.cc-root :focus-visible {
  outline: 2px solid var(--cc-color-accent-2);
  outline-offset: 2px;
}
.cc-root ::selection {
  background: color-mix(in srgb, var(--cc-color-gold) 40%, transparent);
}

/* === tokens/styles.css (re-import, harmless duplicate) === */
/* skipped: this file only @imports _ds_bundle.css again, which is already emitted above as block 1. Re-emitting it here would duplicate all 672 lines, so it is intentionally omitted. */

/* === tokens/cc-brand.css (brand overrides, must follow the base tokens) === */
/* Crafty Cook brand guide (Karen Grey, Route 1, 20.06.25) mapped onto the DS tokens */
@import url("https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,500;0,600;0,700;1,600;1,700&family=Source+Sans+3:wght@400;600;700&family=Caveat:wght@500;600&display=swap");
:root{
--cc-color-bg:#fbf8ec;--cc-color-surface:#eef7f0;--cc-color-text:#232323;
--cc-color-accent:#007a53;--cc-color-accent-2:#007a53;--cc-color-gold:#ffc72c;
--cc-color-divider:color-mix(in srgb,#232323 16%,transparent);
--cc-accent-100:#e3f4ea;--cc-accent-200:#c7ead5;--cc-accent-300:#7fd3a4;--cc-accent-500:#009a67;--cc-accent-600:#007a53;--cc-accent-700:#00603f;--cc-accent-800:#004a33;--cc-accent-900:#003324;
--cc-accent2-100:#e3f4ea;--cc-accent2-200:#c7ead5;--cc-accent2-300:#7fd3a4;--cc-accent2-500:#009a67;--cc-accent2-600:#007a53;--cc-accent2-700:#00603f;--cc-accent2-800:#004a33;--cc-accent2-900:#003324;
--cc-gold-100:#fff3cc;--cc-gold-300:#ffde7a;--cc-gold-500:#ffc72c;--cc-gold-700:#d9a100;--cc-gold-900:#8a6600;
--cc-mint:#7fd3a4;--cc-mint-pale:#c8ebd5;
--cc-cat-soup:#ee5fa0;--cc-cat-soup-tint:#f7b9d4;--cc-cat-stew:#c4007a;--cc-cat-stew-tint:#e2a2cf;--cc-cat-rice:#b58c8a;--cc-cat-rice-tint:#e0cbc9;--cc-cat-pud:#8b2a16;--cc-cat-pud-tint:#caa08f;
--cc-font-display:"Zilla Slab","Clarendon URW",Georgia,serif;--cc-font-heading:"Zilla Slab","Clarendon URW",Georgia,serif;--cc-font-display-weight:700;--cc-font-heading-weight:600;
--cc-font-body:"Source Sans 3","Source Sans Pro",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;--cc-font-script:"Caveat","Turbinado Light Pro",cursive;
}
.cc-root{font-size:17px}
.cc-display,.cc-h1,.cc-h2{font-style:normal;letter-spacing:-.01em}
.hero .cc-display{line-height:1.02}
/* wordmark */
.cc-nav-brand,.ftr .brand{display:block !important;color:transparent!important;font-size:0!important;line-height:0;background:url("../brand/wordmark.svg") left center/contain no-repeat;width:150px;height:46px;overflow:hidden}
.ftr .brand{width:200px;height:64px}
.hero-b .cc-nav-brand{background-image:url("../brand/wordmark.svg")}
/* script kickers (Turbinado role) */
.sec-head .cc-h6,.kicker,.cc-card-kicker,.tl .yr{font-family:var(--cc-font-script);text-transform:none;letter-spacing:0;font-size:24px;line-height:1;font-weight:600;color:var(--cc-accent2-600)}
.sec-head .cc-h6{margin:0 0 2px}
/* gold ticks + green hero B */
.hero-b{background:var(--cc-accent2-600)}
.hero-b .tick>span::before{color:var(--cc-gold-500)}
.hero-b .cc-h6{color:var(--cc-gold-300)!important}
.band{background:var(--cc-accent2-800)}
/* Home A lockup hero */
.lockup{position:relative;aspect-ratio:4/3;border-radius:var(--cc-radius-lg);background:var(--cc-mint-pale);overflow:hidden;display:grid !important;place-items:end center}
.lockup::before{content:"";position:absolute;left:50%;top:6%;width:78%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:#fff}
.lockup .wm{position:absolute;left:50%;top:13%;width:56%;transform:translateX(-50%);z-index:1}
.lockup .couple{position:relative;width:78%;display:block !important;z-index:1;margin-bottom:-2%}
/* pack visuals inside product cards */
.cc-product-photo{position:relative;overflow:hidden}
.pack{position:absolute;inset:0;display:flex !important;flex-direction:row !important;align-items:center;justify-content:center;background:var(--tint,var(--cc-color-surface))}
.pack img{height:88%;width:auto;max-width:90%;object-fit:contain;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.pack .lbl{font:600 13px/1.3 var(--cc-font-body);color:#fff;text-align:center;padding:12px;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.pack.photo-slot{background:none}
/* category tiles use range colours (soup pink, stew magenta, rice mauve, pudding brick) */
.cat-tile{background:var(--tint,var(--cc-color-surface));align-items:flex-end}
.cat-tile .pack-mini{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);height:66%;border-radius:3px;box-shadow:0 6px 16px rgba(0,0,0,.2)}
.cat-tile .lbl{background:#fff;font-family:var(--cc-font-heading);font-weight:600;color:#232323!important;box-shadow:inset 4px 0 0 var(--c,transparent);padding-left:14px}
.cat-tile .cnt{background:#fff}
/* gallery main uses pack front */
.gallery-main .pack img{height:82%}
.line .ph .pack img{height:84%;box-shadow:none}
/* descriptor + name pattern from pack (Aromatic / Coconut Curried Lentil) */
.desc{font-family:var(--cc-font-script);font-size:26px;line-height:1;color:var(--cc-cat,var(--cc-accent2-600))}
/* icon badges (Source Sans Pro Bold, white pill, green icon) */
.badges{display:flex !important;flex-direction:row !important;gap:8px;flex-wrap:wrap !important}
.badge{display:inline-flex !important;align-items:center;gap:6px;background:#fff;border:1px solid var(--cc-color-divider);border-radius:6px;padding:4px 10px;font:700 11px/1 var(--cc-font-body);letter-spacing:.04em;text-transform:uppercase;color:#232323;flex-direction:row !important;}
.badge b{font:700 18px/1 var(--cc-font-heading);color:var(--cc-accent2-600)}
/* stew/soup colour dots in the nav chips */
.chip-a[data-cat]{border-color:var(--c);}
.chip-a[data-cat][aria-current]{background:var(--c);border-color:var(--c);color:#fff}
.steps .cc-card::before{background:var(--cc-gold-500);color:#232323;font-style:normal}

/* === tokens/cc-redesign.css (layout primitives, converted) === */
body{margin:0}
.cc-root a{color:var(--cc-accent2-700)}.cc-root a:hover{color:var(--cc-accent-700)}
.cc-root p{margin:0}
.cc-root .cc-input,.cc-root select.cc-input{max-width:100%}
/* mobile-first primitives */
.wrap{padding:0 var(--cc-space-4)}
.sec{padding:var(--cc-space-8) var(--cc-space-4);display:flex !important;flex-direction:column !important;gap:var(--cc-space-4);position:relative}
.sec-head{display:flex !important;flex-direction:row !important;align-items:flex-end;justify-content:space-between;gap:var(--cc-space-3)}
.sec-head .cc-h2{margin:0;font-size:28px}
.sec-head .cc-h6{margin:0 0 6px;color:var(--cc-accent-700)}
.stack{display:flex !important;flex-direction:column !important;gap:var(--cc-space-3)}
.row{display:flex !important;flex-direction:row !important;gap:var(--cc-space-2);align-items:center;flex-wrap:wrap !important}
.grid{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--cc-space-4)}
ul.products{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:var(--cc-space-4) !important;list-style:none;margin:0;padding:0}

.grid-1{display:grid !important;grid-template-columns:1fr;gap:var(--cc-space-3)}
.scroller{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;gap:var(--cc-space-3);overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--cc-space-4));scroll-padding-inline:var(--cc-space-4)}
.scroller::before,.scroller::after{content:"";flex:0 0 calc(var(--cc-space-4) - var(--cc-space-3))}
.scroller>*{flex:0 0 78%;scroll-snap-align:start}
.chips{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;gap:8px;overflow-x:auto;padding:var(--cc-space-2) var(--cc-space-4) var(--cc-space-3);border-bottom:1px solid var(--cc-color-divider)}
.chips>*{flex:none}
.chip-a{border-radius:var(--cc-radius-pill);padding:7px 14px;font-size:13px;font-weight:600;border:1.5px solid var(--cc-color-divider);color:var(--cc-color-text);background:var(--cc-color-bg);white-space:nowrap}
.chip-a[aria-current]{background:var(--cc-color-accent-2);border-color:var(--cc-color-accent-2);color:var(--cc-color-bg)}
/* nav */
.hdr{position:relative}
.hdr .cc-nav{padding-inline:var(--cc-space-4)}
.hdr .cc-nav-utility{padding-inline:var(--cc-space-4);white-space:nowrap;overflow:hidden}
.hdr .cc-nav-utility span:nth-child(2){display:none !important}
.hdr .cc-nav-links{display:none !important}
.hdr .cc-btn-icon{background:var(--cc-color-surface);order:-1;margin-right:var(--cc-space-2)}
.hdr .cc-nav-brand{margin-right:auto}
.hdr-tools{position:absolute;left:var(--cc-space-4);bottom:10px;display:none !important}
/* hero */
.hero{display:grid !important;gap:var(--cc-space-4);padding:var(--cc-space-6) var(--cc-space-4) var(--cc-space-8)}
.hero .cc-display{font-size:44px}
.hero .lede{font-size:17px;line-height:1.5;max-width:34ch}
.hero-img{aspect-ratio:4/3;border-radius:var(--cc-radius-lg);overflow:hidden;position:relative}
.hero-img image-slot,.hero-img img{position:absolute;inset:0;width:100%;height:100%}
.hero-actions{display:flex !important;flex-direction:column !important;gap:var(--cc-space-2)}
.hero-actions .cc-btn{width:100%}
.hero-b{color:var(--cc-color-bg)}
.hero-b .cc-display{color:var(--cc-color-bg)}
.hero-b .cc-text-muted{color:color-mix(in srgb,var(--cc-color-bg) 70%,transparent)}
.hero-b .cc-btn-outline{border-color:var(--cc-color-bg);color:var(--cc-color-bg)}
.hero-b .cc-btn-primary{color:var(--cc-color-bg)}
.hero-b .tick{display:flex !important;flex-direction:column !important;gap:6px;font-size:14px}
.hero-b .tick>span::before{content:"✓";color:var(--cc-gold-300);margin-right:8px;font-weight:800}
/* trust */
.trust{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;gap:var(--cc-space-2);justify-content:space-between;overflow-x:auto;padding:var(--cc-space-4)}
.trust .cc-trust-badge,.trust .trust-seal{flex:none;width:84px;height:84px}.trust .trust-seal{border-radius:50%;object-fit:contain;background:#fff}
.usp{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--cc-space-3)}
.usp .cc-card{padding:var(--cc-space-3)}
.usp .cc-card-title{font-size:16px}
/* categories */
.cat-tiles{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--cc-space-3)}
.cat-tile{position:relative;aspect-ratio:1;border-radius:var(--cc-radius-md);overflow:hidden;display:flex !important;flex-direction:row !important;align-items:flex-end;padding:var(--cc-space-3);background:var(--cc-color-surface);text-decoration:none;color:var(--cc-color-text)}
.cat-tile image-slot,.cat-tile img{position:absolute;inset:0}
.cat-tile .lbl{position:relative;font-family:var(--cc-font-heading);font-weight:600;font-size:18px;background:var(--cc-color-bg);padding:6px 12px;border-radius:var(--cc-radius-pill);pointer-events:none}
.cat-tile .cnt{position:relative;margin-left:auto;font-size:12px;background:var(--cc-color-bg);padding:6px 10px;border-radius:var(--cc-radius-pill);pointer-events:none}
/* videos */
.videos{display:grid !important;grid-template-columns:1fr;gap:var(--cc-space-4)}
.video{display:flex !important;flex-direction:column !important;gap:10px;text-decoration:none;color:inherit}
.video-thumb{position:relative;display:block !important;aspect-ratio:16/9;border-radius:var(--cc-radius-md);overflow:hidden;background:var(--cc-color-surface)}
.video-thumb image-slot{position:absolute;inset:0}
.video-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video .play{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--cc-color-accent-2);color:#fff;display:grid !important;place-items:center;font-size:20px;padding-left:4px;box-shadow:var(--cc-shadow-md);pointer-events:none}
.video .dur{position:absolute;right:10px;bottom:10px;font-size:12px;font-weight:700;background:rgba(0,0,0,.65);color:#fff;padding:3px 8px;border-radius:var(--cc-radius-pill)}
.video-meta{display:flex !important;flex-direction:column !important;gap:2px}.video-meta .cc-h6{margin:0;color:var(--cc-accent2-700)}
.cc-root a.video,.cc-root a.video:hover{color:var(--cc-color-text)}.cc-root a.video:hover .video-title{color:var(--cc-accent2-700)}
.video-title{font-family:var(--cc-font-heading);font-weight:var(--cc-font-heading-weight);font-size:18px}
/* steps */
.steps{display:grid !important;grid-template-columns:1fr;gap:var(--cc-space-3);counter-reset:s}
.steps .cc-card{flex-direction:row !important;align-items:flex-start;gap:var(--cc-space-3)}
.steps .cc-card::before{counter-increment:s;content:counter(s);flex:none;width:36px;height:36px;border-radius:50%;display:grid !important;place-items:center;font-family:var(--cc-font-display);font-weight:900;font-style:italic;font-size:18px}
.steps .cc-card>div{display:flex !important;flex-direction:column !important;gap:4px}
/* band */
.band{background:var(--cc-accent2-800);color:var(--cc-color-bg);padding:var(--cc-space-8) var(--cc-space-4);display:grid !important;gap:var(--cc-space-4)}
.band .cc-h2{color:var(--cc-color-bg);margin:0;font-size:28px}
.band .cc-text-muted{color:color-mix(in srgb,var(--cc-color-bg) 70%,transparent)}
.band .cc-trust-badge{border-color:var(--cc-gold-300);color:var(--cc-gold-300)}
.sub-card{background:var(--cc-gold-100);border-radius:var(--cc-radius-lg);padding:var(--cc-space-6) var(--cc-space-4);display:grid !important;gap:var(--cc-space-3)}
.sub-card .cc-h2{margin:0;font-size:28px}
.price-big{font-family:var(--cc-font-display);font-weight:900;font-size:40px;line-height:1;letter-spacing:-.02em}
.price-big small{font:600 14px var(--cc-font-body);opacity:.7;letter-spacing:0}
/* footer */
.ftr{background:var(--cc-color-surface);padding:var(--cc-space-8) var(--cc-space-4) var(--cc-space-6);display:grid !important;gap:var(--cc-space-6);font-size:14px}
.ftr .cols{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--cc-space-4)}
.ftr .cols div{display:flex !important;flex-direction:column !important;gap:6px}
.ftr .cols a{text-decoration:none;color:var(--cc-color-text)}
.ftr .cc-h6{margin:0 0 4px}
.ftr .brand{font-family:var(--cc-font-display);font-style:italic;font-weight:900;font-size:28px}
.ftr .legal{font-size:12px;opacity:.65;display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;gap:8px 16px}
.newsletter{display:flex !important;flex-direction:column !important;gap:8px}
.newsletter .cc-btn{width:100%}
/* shop */
.toolbar{display:flex !important;flex-direction:column !important;gap:var(--cc-space-3)}
.toolbar .cc-seg{overflow-x:auto;max-width:100%}
.toolbar .cc-seg-opt{white-space:nowrap}
.result-row{display:flex !important;flex-direction:row !important;justify-content:space-between;align-items:center;gap:var(--cc-space-2);font-size:14px}
.result-row .cc-input{min-height:40px;width:auto}
.shop-layout{display:grid !important;gap:var(--cc-space-6)}
.filters{display:none !important}
.pager{display:flex !important;flex-direction:row !important;justify-content:center;gap:8px}
.pager .cc-btn{min-width:40px;padding-inline:14px}
.crumbs{font-size:13px;display:flex !important;flex-direction:row !important;gap:6px;flex-wrap:wrap !important;padding:var(--cc-space-3) var(--cc-space-4) 0}
.crumbs a{text-decoration:none}
.crumbs span{opacity:.6}
.cc-product-card image-slot{position:absolute;inset:0}
.cc-product-card{height:100%}.cc-product-card>:last-child:not(.cc-product-photo){margin-top:auto}.cc-product-card .cc-product-name{min-height:calc(1.25em*2)}
.cc-product-photo{position:relative}
/* product */
.pdp{display:grid !important;gap:var(--cc-space-6);padding:var(--cc-space-4)}
.gallery{display:grid !important;gap:8px}
.gallery-main{aspect-ratio:1;border-radius:var(--cc-radius-lg);overflow:hidden;position:relative}
.gallery-main image-slot{position:absolute;inset:0}
.thumbs{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.thumbs image-slot,.thumbs img{width:100%;height:72px;aspect-ratio:auto;border-radius:10px;overflow:hidden;display:block !important}
.gallery{width:100%;overflow:hidden}
.buy{display:flex !important;flex-direction:column !important;gap:var(--cc-space-4)}
.buy .cc-h1{font-size:32px;margin:0}
.buy .price{display:flex !important;flex-direction:row !important;align-items:baseline;gap:8px}
.buy .price b{font-size:26px;color:var(--cc-accent-700)}
.opts{display:grid !important;gap:8px}
.opt{display:flex !important;flex-direction:row !important;align-items:center;justify-content:space-between;padding:12px 14px;border:1.5px solid var(--cc-color-divider);border-radius:var(--cc-radius-sm)}
.opt.on{border-color:var(--cc-color-accent-2);background:var(--cc-accent2-100)}
.opt .cc-radio{flex:1}
.addrow{display:flex !important;flex-direction:row !important;gap:var(--cc-space-3);align-items:center}
.addrow .cc-btn{flex:1;margin:0}
.acc{border-top:1px solid var(--cc-color-divider)}
.acc details{border-bottom:1px solid var(--cc-color-divider)}
.acc summary{list-style:none;cursor:pointer;display:flex !important;flex-direction:row !important;justify-content:space-between;padding:14px 0;font-weight:600;font-size:15px}
.acc summary::after{content:"+";font-size:20px;line-height:1;color:var(--cc-accent2-700)}
.acc details[open] summary::after{content:"–"}
.acc summary::-webkit-details-marker{display:none !important}
.acc .body{padding:0 0 16px;font-size:14px;line-height:1.6}
.acc .body ol{margin:0;padding-left:20px;display:grid !important;gap:6px}
.sticky-bar{position:sticky;bottom:0;background:var(--cc-color-bg);border-top:1px solid var(--cc-color-divider);padding:var(--cc-space-3) var(--cc-space-4);display:flex !important;flex-direction:row !important;gap:var(--cc-space-3);align-items:center;box-shadow:var(--cc-shadow-md)}
.sticky-bar .cc-btn{flex:1;margin:0}
.review{display:grid !important;gap:6px;padding:var(--cc-space-3) 0;border-bottom:1px solid var(--cc-color-divider);font-size:14px}
.review .who{font-size:12px;opacity:.65}
/* basket/checkout */
.line{display:grid !important;grid-template-columns:72px minmax(0,1fr);gap:var(--cc-space-3);padding:var(--cc-space-3) 0;border-bottom:1px solid var(--cc-color-divider)}
.line .ph{width:72px;height:72px;border-radius:var(--cc-radius-sm);overflow:hidden;position:relative}
.line .ph image-slot{position:absolute;inset:0}
.line .nm{font-family:var(--cc-font-heading);font-weight:600;font-size:16px;line-height:1.25}
.line .meta{font-size:13px;opacity:.7}
.line .bottom{display:flex !important;flex-direction:row !important;justify-content:space-between;align-items:center;margin-top:6px}
.line .bottom b{color:var(--cc-accent-700)}
.progress{display:grid !important;gap:6px;font-size:13px}
.progress .bar{height:8px;border-radius:var(--cc-radius-pill);background:var(--cc-color-surface);overflow:hidden}
.progress .bar i{display:block !important;height:100%;width:68%;background:var(--cc-color-accent-2);border-radius:inherit}
.tot{display:grid !important;gap:8px;font-size:15px}
.tot div{display:flex !important;flex-direction:row !important;justify-content:space-between}
.tot .grand{font-weight:700;font-size:18px;border-top:1.5px solid var(--cc-color-divider);padding-top:8px}
.co-layout{display:grid !important;gap:var(--cc-space-6)}
.form{display:grid !important;gap:var(--cc-space-3)}
.form .two{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--cc-space-3)}
.co-steps{display:flex !important;flex-direction:row !important;gap:6px;font-size:12px;font-weight:600;align-items:center}
.co-steps span{padding:6px 12px;border-radius:var(--cc-radius-pill);background:var(--cc-color-surface);color:var(--cc-color-text);line-height:1.2;white-space:nowrap}
.co-steps span.on{background:var(--cc-color-accent-2);color:#fff}
.summary-mini{display:flex !important;flex-direction:column !important;gap:8px;font-size:14px}
.summary-mini .it{display:flex !important;flex-direction:row !important;justify-content:space-between}
/* story */
.timeline{display:grid !important;gap:0;position:relative;padding-left:28px}
.timeline::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:var(--cc-accent2-200)}
.tl{position:relative;padding:0 0 var(--cc-space-6)}
.tl::before{content:"";position:absolute;left:-26px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--cc-color-accent-2);border:3px solid var(--cc-color-bg)}
.tl .yr{font-family:var(--cc-font-display);font-style:italic;font-weight:900;font-size:22px;color:var(--cc-accent-700)}
.tl p{font-size:14px;line-height:1.55}
.photo{border-radius:var(--cc-radius-lg);overflow:hidden;position:relative;aspect-ratio:4/3}
.photo image-slot{position:absolute;inset:0}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pull{font-family:var(--cc-font-display);font-style:italic;font-weight:500;font-size:26px;line-height:1.2;letter-spacing:-.01em}
/* wholesale */
.logos{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--cc-space-3)}
.logos .cc-card{align-items:center;text-align:center;padding:var(--cc-space-3)}
.logos .cc-card-title{font-size:15px}
.stockist{display:grid !important;gap:4px;padding:12px 0;border-bottom:1px solid var(--cc-color-divider);font-size:14px}
.stockist b{font-family:var(--cc-font-heading);font-size:16px}
.stockist span{opacity:.7;font-size:13px}
/* subs */
.plan{display:grid !important;gap:var(--cc-space-3)}
.plan .cc-card{border:1.5px solid transparent}
.plan .cc-card.on{border-color:var(--cc-color-gold)}
.faq summary{font-family:var(--cc-font-heading);font-size:16px}
.contact-meta{display:grid !important;gap:var(--cc-space-3);font-size:14px}
.contact-meta b{display:block !important;font-size:12px;text-transform:uppercase;letter-spacing:.06em;opacity:.65;font-weight:700}
/* ===== desktop (min-width: 900px) ===== */
@media (min-width: 900px){
.wrap,.sec,.hero,.band,.ftr,.chips,.crumbs,.trust,.pdp{padding-inline:max(var(--cc-space-8),calc((100vw - 1180px)/2))}
.sec{padding-block:var(--cc-space-16);gap:var(--cc-space-6)}
.sec-head .cc-h2{font-size:38px}
.hdr .cc-nav{padding-block:var(--cc-space-4)}
.hdr .cc-nav-links{display:flex !important;flex-direction:row !important}
.hdr .cc-btn-icon{display:none !important}
.chips{display:none !important}
.hero{grid-template-columns:1.05fr minmax(0,1fr);align-items:center;padding-block:var(--cc-space-12);gap:var(--cc-space-12)}
.hero .cc-display{font-size:72px}
.hero .lede{font-size:19px}
.hero-img{aspect-ratio:5/4}
.hero-actions{flex-direction:row !important}.hero-actions .cc-btn{width:auto}
.hero-b{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.trust{justify-content:center;gap:var(--cc-space-12)}
.trust .cc-trust-badge,.trust .trust-seal{width:96px;height:96px}
.usp{grid-template-columns:repeat(4,minmax(0,1fr))}
.videos{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cc-space-6)}
.cat-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--cc-space-6)}
ul.products{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:var(--cc-space-6) !important}

.grid-1{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cc-space-6)}
.scroller{overflow:visible;margin:0;padding:0;display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--cc-space-6)}
.scroller::before,.scroller::after{display:none !important}
.scroller>*{flex:auto}
.steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps .cc-card{flex-direction:column !important}
.band{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding-block:var(--cc-space-12)}
.band .cc-h2{font-size:38px}
.sub-card{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:var(--cc-space-12) var(--cc-space-8);gap:var(--cc-space-8)}
.ftr{grid-template-columns:minmax(0,1.3fr) minmax(0,2fr);padding-block:var(--cc-space-12)}
.ftr .cols{grid-template-columns:repeat(4,minmax(0,1fr))}
.ftr .legal{grid-column:1/-1}
.newsletter{flex-direction:row !important;max-width:420px}.newsletter .cc-btn{width:auto}
.shop-layout{grid-template-columns:260px minmax(0,1fr);gap:var(--cc-space-12)}
.filters{display:grid !important;gap:var(--cc-space-4);align-content:start}
.filters .cc-h6{margin:0}
.filters .fl{display:grid !important;gap:6px;font-size:14px}
.filters .fl label{display:flex !important;flex-direction:row !important;justify-content:space-between}
.toolbar{flex-direction:row !important;justify-content:space-between;align-items:center}
.pdp{grid-template-columns:560px minmax(0,1fr);gap:var(--cc-space-12);padding-block:var(--cc-space-8)}
.buy .cc-h1{font-size:44px}
.thumbs image-slot,.thumbs img{height:120px}
.sticky-bar{display:none !important}
.co-layout{grid-template-columns:1.4fr minmax(0,1fr);gap:var(--cc-space-12);align-items:start}
.timeline{padding-left:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cc-space-6)}
.timeline::before{left:0;right:0;top:8px;bottom:auto;height:2px;width:auto}
.tl{padding:var(--cc-space-6) 0 0}
.tl::before{left:0;top:0}
.logos{grid-template-columns:repeat(4,minmax(0,1fr))}
.plan{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.two-col{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--cc-space-12);align-items:start}
.story-hero{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--cc-space-12);align-items:center}
}

/* --- Charlie 2026-09-17: header icons never had a glyph, drawing them directly --- */
.cc-btn-icon{display:flex !important;align-items:center;justify-content:center;position:relative;flex-direction:row !important;}
.cc-btn-icon::before{content:"";display:block;width:18px;height:2px;background:currentColor;box-shadow:0 6px 0 currentColor,0 -6px 0 currentColor}
.cc-nav-cart .cart-icon{display:flex !important;align-items:center;justify-content:center;width:100%;height:100%;flex-direction:row !important;}
.cc-nav-cart .cart-icon::before{content:"";display:block;width:20px;height:18px;background-color:currentColor;-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>') center/contain no-repeat}
.cc-nav-utility{justify-content:space-between}
.cc-nav-utility-links{display:flex !important;flex-direction:row !important;gap:var(--cc-space-3)}

/* --- Charlie 2026-09-17: form submit buttons never get a custom global
   class from the Bricks Form element (only .bricks-button); style them
   directly to match the design system's primary buttons --- */
.newsletter .bricks-button,
.brxe-form .bricks-button{display:inline-flex !important;flex-direction:row !important;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none;text-align:center;font-family:var(--cc-font-body);font-weight:600;font-size:15px;line-height:1.2;color:var(--cc-color-bg) !important;background:var(--cc-color-accent) !important;border:1.5px solid transparent;padding:var(--cc-space-3) var(--cc-space-6);border-radius:var(--cc-radius-pill)}
.newsletter .bricks-button:hover,
.brxe-form .bricks-button:hover{background:var(--cc-accent-700) !important}

/* --- Charlie 2026-09-17: the .grid utility class was also applied to the
   outer Bricks WooCommerce-Products wrapper, which only ever has ONE real
   child (ul.products). That child was only filling 1 of .grid's own column
   tracks, squeezing ul.products' own grid down to a quarter of the real
   width before ul.products' own column split ran a second time inside it.
   Make the ul always span every column of any .grid wrapper it sits in. */
.grid > ul.products,.scroller > ul.products{grid-column:1/-1 !important;grid-row:1/-1 !important}
.scroller > ul.products{display:contents}

/* --- Charlie 2026-09-17: native WooCommerce buttons (Add to basket, View
   cart, product-loop buttons) never carried a custom cc-btn class, so they
   rendered with zero design-system styling site-wide. Style them directly. */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
a.add_to_cart_button,button.add_to_cart_button{display:inline-flex !important;flex-direction:row !important;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none;text-align:center;font-family:var(--cc-font-body);font-weight:600;font-size:15px;line-height:1.2;color:var(--cc-color-bg) !important;background:var(--cc-color-accent) !important;border:1.5px solid transparent !important;padding:var(--cc-space-3) var(--cc-space-6);border-radius:var(--cc-radius-pill)}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
a.add_to_cart_button:hover,button.add_to_cart_button:hover{background:var(--cc-accent-700) !important;color:var(--cc-color-bg) !important}
.woocommerce a.button.loading,a.add_to_cart_button.loading{opacity:.6}

/* --- Charlie 2026-09-17: the Product Add to Cart element's cc-btn/
   cc-btn-primary/cc-stepper classes were authored on the OUTER wrapper div
   (meant for its real inner <button>/<input> only), so the whole variation
   form inherited the pill button's fill and rounded shape. Neutralise the
   wrapper, let the real inner controls keep their own correct styling
   (already covered by the site-wide WooCommerce button rule above). */
.brxe-product-add-to-cart.cc-btn{display:block !important;background:none !important;border:none !important;padding:0 !important;border-radius:0 !important;color:inherit !important;width:auto !important}
.brxe-product-add-to-cart .quantity{display:inline-flex !important;flex-direction:row !important;align-items:center;border:1.5px solid var(--cc-color-divider);border-radius:var(--cc-radius-pill);overflow:hidden;margin-right:8px}
.brxe-product-add-to-cart .quantity input.qty{width:44px;text-align:center;border:none;background:transparent}
.brxe-product-add-to-cart .variations{margin-bottom:var(--cc-space-3)}
.brxe-product-add-to-cart .variations select{width:100%;padding:var(--cc-space-2) var(--cc-space-3);border:1.5px solid var(--cc-color-divider);border-radius:var(--cc-radius-md, 8px);background:var(--cc-color-bg)}
.brxe-product-add-to-cart form.cart{display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;align-items:center;gap:8px}
.brxe-product-add-to-cart .variations,
.brxe-product-add-to-cart .woocommerce-variation{flex-basis:100%}

/* --- Charlie 2026-09-17: same wrapper-inherits-button-styling issue as the
   product add-to-cart, this time on the checkout payment/place-order block. */
.brxe-woocommerce-checkout-order-payment.cc-btn,
.brxe-woocommerce-checkout-order-review.cc-btn{display:block !important;background:none !important;border:none !important;padding:0 !important;border-radius:0 !important;color:inherit !important;width:auto !important}

/* --- Charlie 2026-09-17: WooCommerce's native .cross-sells block (cart
   page "You may be interested in...") isn't wrapped in .grid or .scroller
   at all, so it never got any of the ul.products grid fixes above. Same
   overlapping-card bug, same fix, applied directly. */
.cross-sells ul.products{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:var(--cc-space-4) !important;list-style:none;margin:var(--cc-space-4) 0 0;padding:0}
.cross-sells h2{margin-bottom:0}

/* --- Charlie 2026-09-17: checkout's payment/order-review sidebar card
   carries Bricks' scroll-reveal class and never clears it (same stuck
   bricks-lazy-hidden bug as the third round's homepage section). Force it
   visible directly rather than fight the reveal-on-scroll observer again. */
.co-layout .bricks-lazy-hidden{display:block !important;opacity:1 !important;visibility:visible !important}

/* --- Charlie 2026-09-18: WooCommerce's checkout "Place order" button
   (button.button.alt, id #place_order) doesn't always sit under an
   ancestor with the .woocommerce class (depends on which Bricks element
   rendered it), so the earlier .woocommerce-scoped button rule misses it.
   Target the real classes directly, no ancestor required. */
button.button.alt,#place_order{display:inline-flex !important;flex-direction:row !important;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none;text-align:center;font-family:var(--cc-font-body);font-weight:600;font-size:15px;line-height:1.2;color:var(--cc-color-bg) !important;background:var(--cc-color-accent) !important;border:1.5px solid transparent !important;padding:var(--cc-space-3) var(--cc-space-6);border-radius:var(--cc-radius-pill);width:100%}
button.button.alt:hover,#place_order:hover{background:var(--cc-accent-700) !important;color:var(--cc-color-bg) !important}

/* --- Charlie 2026-09-18: WooCommerce's native cart-items table always
   includes its own coupon form inline, duplicating the separate, styled
   woocommerce-cart-coupon element placed deliberately elsewhere on the
   page. Hide the auto-embedded one, keep the intentionally-placed one. */
.actions .coupon{display:none !important}

/* --- Charlie 2026-09-18: cart and checkout order tables use WooCommerce's
   bare default table styling (heavy borders, cramped padding), not the
   design system's clean card look. Strip the default chrome, match the
   spacing/typography used everywhere else, keep it a real table (line
   items still need real columns) rather than forcing it into .tot's flex
   rows, which only fits a totals-only summary, not itemised rows. */
table.shop_table{width:100%;border-collapse:collapse;font-size:15px;border:none !important}
table.shop_table th{text-align:left;font-weight:700;padding:var(--cc-space-2) var(--cc-space-2);border:none !important;border-bottom:1.5px solid var(--cc-color-divider) !important}
table.shop_table td{padding:var(--cc-space-3) var(--cc-space-2);border:none !important;border-bottom:1px solid var(--cc-color-divider) !important;vertical-align:middle}
table.shop_table tr:last-child td{border-bottom:none !important}
table.shop_table .product-thumbnail img{border-radius:8px;width:56px;height:56px;object-fit:cover}
table.shop_table th:last-child,table.shop_table td:last-child{text-align:right}
table.shop_table tfoot th,table.shop_table tfoot td{border-bottom:none !important}
table.shop_table tfoot tr:last-child th,table.shop_table tfoot tr:last-child td{font-weight:700;font-size:18px;border-top:1.5px solid var(--cc-color-divider) !important;padding-top:var(--cc-space-3)}

/* --- Charlie 2026-09-18: WooCommerce's native .cart_totals wrapper isn't
   a .brxe-container, so it never got the site-wide flex-direction/wrap
   hardening; it inherits a bare browser default that happened to compute
   as row here, running the "Basket totals" heading beside the table
   instead of above it. */
.tot .cart_totals,.cart_totals{display:flex !important;flex-direction:column !important}
.cart_totals table{margin-top:var(--cc-space-3)}

/* --- Charlie 2026-09-18: <html> itself never had a background-color set,
   only <body> did. If body ever falls short of the full viewport width for
   any reason (a stale cached stylesheet mid-transition, a slow-loading
   font causing a layout shift, a future regression), the gap shows the
   browser's own default canvas colour instead of the site's background,
   a jarring dark edge on a dark-mode system rather than a soft margin.
   Belt-and-braces: paint html the same base colour so that failure mode
   can't happen regardless of root cause. */
html{background-color:var(--cc-color-bg,#fbf8ec)}