/*
Theme Name: v215 Child
Template: v215
Author: The 215 Guys
Version: 2026.09.16.151300
Description: Global site styles. Generated by design-builder; safe to edit.
*/

/* ==========================================================================
   little courage co. — global child-theme layer
   Tokens and every shared component from the Claude Design export.
   Palette colours come from jawn_settings (var(--color-*)); the tokens below
   only add the values the palette cannot express.
   ========================================================================== */

/* === Tokens =============================================================== */
:root {
  /* brand ramp (from render/tokens.json — only what is used) */
  --lc-deep-blue: var(--color-deep-blue);
  --lc-deep-blue-900: var(--color-deep-blue-dark);
  --lc-deep-blue-700: var(--color-deep-blue-hover);
  --lc-deep-blue-300: #6D91C2;
  --lc-deep-blue-100: var(--color-deep-blue-soft);
  --lc-warm-red: var(--color-warm-red);
  --lc-sunny-yellow: var(--color-sunny-yellow);
  --lc-leaf-green: var(--color-leaf-green);
  --lc-calm-blue: var(--color-calm-blue);
  --lc-calm-blue-200: #CBDCF1;
  --lc-soft-cream: var(--color-soft-cream);
  --lc-cream-200: var(--color-cream);
  --lc-cream-300: var(--color-cream-border);
  --lc-white: var(--color-white);
  --lc-ink: var(--color-ink);
  --lc-ink-70: var(--color-body);
  --lc-ink-45: var(--color-muted);

  /* semantic aliases */
  --text-heading: var(--color-deep-blue);
  --text-body: var(--color-body);
  --text-muted: var(--color-muted);
  --text-on-dark: var(--color-soft-cream);
  --surface-page: var(--color-soft-cream);
  --surface-card: var(--color-white);
  --surface-sunken: var(--color-cream);
  --surface-calm: var(--color-calm-blue);
  --border-subtle: var(--color-cream-border);
  --status-warn-bg: var(--color-warn-bg);
  --status-warn-fg: var(--color-warn-fg);
  --status-success-bg: #E1F0E4;
  --status-success-fg: #3C7C47;

  /* type */
  --size-display-2: 48px;
  --size-h1: 38px;
  --size-h2: 30px;
  --size-h3: 24px;
  --size-h4: 20px;
  --size-body-lg: 18px;
  --size-body: 16px;
  --size-body-sm: 14px;
  --size-caption: 13px;
  --size-eyebrow: 12px;
  --leading-normal: 1.5;
  --leading-loose: 1.65;
  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.14em;

  /* space + radius + shadow */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --gutter-card: 24px;
  --gutter-grid: 24px;
  --page-pad: 32px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-card: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(22, 35, 58, .06);
  --shadow-card: 0 2px 6px rgba(22, 35, 58, .07);
  --shadow-card-hover: 0 6px 18px rgba(22, 35, 58, .09);
  --shadow-lift: 0 10px 24px rgba(30, 75, 138, .16);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out-soft: cubic-bezier(.22, .85, .3, 1);
}

/* === Base ================================================================= */
body {
  background-color: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  text-wrap: balance;
}

h1 + .lede, h2 + .lede, h3 + .lede {
  margin-top: var(--space-4);
}

a {
  text-decoration: none;
}

a:hover, a:focus {
  color: var(--color-warm-red);
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--lc-white), 0 0 0 6px var(--lc-calm-blue);
  border-radius: var(--radius-sm);
}

/* === Typography extras =================================================== */
.lede {
  font-size: var(--size-body-lg);
  line-height: var(--leading-loose);
  color: var(--text-body);
  max-width: 56ch;
  text-wrap: pretty;
}

.small,
p.small {
  font-size: var(--size-body-sm);
  line-height: var(--leading-normal);
}

.tiny {
  font-size: 12px;
  line-height: 1.5;
}

.muted {
  color: var(--text-muted);
  font-size: var(--size-body-sm);
}

.caption {
  font-size: var(--size-caption);
  line-height: 1.5;
  color: var(--text-muted);
}

/* the design's eyebrow label: 12px / 700 / +0.14em / uppercase, with a
   brand shape as its bullet */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Nunito, sans-serif;
  font-size: var(--size-eyebrow);
  font-weight: 700;
  line-height: 18px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.eyebrow-plain {
  display: block;
}

.eyebrow-light {
  color: rgba(247, 244, 236, .7);
}

.heading-on-dark,
.band-blue h2,
.band-blue h3,
.band-blue h4 {
  color: var(--lc-white);
}

.band-blue,
.band-blue p,
.band-blue li {
  color: var(--text-on-dark);
}

.band-sun h2,
.band-sun h3,
.band-calm h2,
.band-calm h3 {
  color: var(--lc-deep-blue-900);
}

.band-sun p,
.band-calm p {
  color: var(--lc-deep-blue-900);
}

.text-right {
  text-align: right;
}

.arrow-link {
  font-weight: 700;
  color: var(--color-deep-blue);
}

/* === Brand shape vocabulary ============================================== */
/* circle · square · triangle · arch · dash · dot grid — spot decoration only,
   never behind text (design-system rule) */
.shape {
  display: inline-block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background-color: var(--color-deep-blue);
  vertical-align: middle;
}

.shape-circle { border-radius: 50%; }
.shape-square { border-radius: 4px; }
.shape-triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.shape-arch { border-radius: 999px 999px 0 0; height: 7.5px; }
.shape-dash { border-radius: 999px; width: 17px; height: 4px; }
.shape-dots {
  background-color: transparent;
  background-image: radial-gradient(currentColor 34%, transparent 36%);
  background-size: 33.33% 33.33%;
  background-position: center;
  color: var(--color-deep-blue);
}

.sh-blue { background-color: var(--color-deep-blue); color: var(--color-deep-blue); }
.sh-blue-300 { background-color: var(--lc-deep-blue-300); color: var(--lc-deep-blue-300); }
.sh-red { background-color: var(--color-warm-red); color: var(--color-warm-red); }
.sh-yellow { background-color: var(--color-sunny-yellow); color: var(--color-sunny-yellow); }
.sh-green { background-color: var(--color-leaf-green); color: var(--color-leaf-green); }
.sh-calm { background-color: var(--color-calm-blue); color: var(--color-calm-blue); }
.sh-cream { background-color: rgba(247, 244, 236, .6); color: rgba(247, 244, 236, .6); }
.shape-dots.sh-blue,
.shape-dots.sh-red,
.shape-dots.sh-calm,
.shape-dots.sh-blue-300,
.shape-dots.sh-cream { background-color: transparent; }

.shape-cluster {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}

.shape-cluster .shape { width: 18px; height: 18px; }
.shape-cluster .shape-arch { height: 11px; }
.shape-cluster .shape-dash { width: 25px; height: 4px; }

.dot {
  display: block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-calm-blue);
}

.dot-yellow { background-color: var(--color-sunny-yellow); }
.dot-red { background-color: var(--color-warm-red); }

/* === Mask icons (Lucide, via dbx icon-css) =============================== */
.dbx-icon{display:inline-block;width:1.25em;height:1.25em;flex:0 0 auto;vertical-align:middle;background-color:currentColor;-webkit-mask:var(--dbx-icon) center/contain no-repeat;mask:var(--dbx-icon) center/contain no-repeat}
.dbx-icon-stethoscope{--dbx-icon:url("data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M11%202v2%22%20%2F%3E%20%3Cpath%20d%3D%22M5%202v2%22%20%2F%3E%20%3Cpath%20d%3D%22M5%203H4a2%202%200%200%200-2%202v4a6%206%200%200%200%2012%200V5a2%202%200%200%200-2-2h-1%22%20%2F%3E%20%3Cpath%20d%3D%22M8%2015a6%206%200%200%200%2012%200v-3%22%20%2F%3E%20%3Ccircle%20cx%3D%2220%22%20cy%3D%2210%22%20r%3D%222%22%20%2F%3E%20%3C%2Fsvg%3E")}
.dbx-icon-printer{--dbx-icon:url("data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M6%2018H4a2%202%200%200%201-2-2v-5a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v5a2%202%200%200%201-2%202h-2%22%20%2F%3E%20%3Cpath%20d%3D%22M6%209V3a1%201%200%200%201%201-1h10a1%201%200%200%201%201%201v6%22%20%2F%3E%20%3Crect%20x%3D%226%22%20y%3D%2214%22%20width%3D%2212%22%20height%3D%228%22%20rx%3D%221%22%20%2F%3E%20%3C%2Fsvg%3E")}
.dbx-icon-refresh-ccw{--dbx-icon:url("data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M21%2012a9%209%200%200%200-9-9%209.75%209.75%200%200%200-6.74%202.74L3%208%22%20%2F%3E%20%3Cpath%20d%3D%22M3%203v5h5%22%20%2F%3E%20%3Cpath%20d%3D%22M3%2012a9%209%200%200%200%209%209%209.75%209.75%200%200%200%206.74-2.74L21%2016%22%20%2F%3E%20%3Cpath%20d%3D%22M16%2016h5v5%22%20%2F%3E%20%3C%2Fsvg%3E")}
.dbx-icon-book-open{--dbx-icon:url("data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M12%207v14%22%20%2F%3E%20%3Cpath%20d%3D%22M3%2018a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1h5a4%204%200%200%201%204%204%204%204%200%200%201%204-4h5a1%201%200%200%201%201%201v13a1%201%200%200%201-1%201h-6a3%203%200%200%200-3%203%203%203%200%200%200-3-3z%22%20%2F%3E%20%3C%2Fsvg%3E")}
.dbx-icon-check{--dbx-icon:url("data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%20%2F%3E%20%3C%2Fsvg%3E")}
.dbx-icon-user{--dbx-icon:url("data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%20%2F%3E%20%3C%2Fsvg%3E")}
.dbx-icon-palette{--dbx-icon:url("data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M12%2022a1%201%200%200%201%200-20%2010%209%200%200%201%2010%209%205%205%200%200%201-5%205h-2.25a1.75%201.75%200%200%200-1.4%202.8l.3.4a1.75%201.75%200%200%201-1.4%202.8z%22%20%2F%3E%20%3Ccircle%20cx%3D%2213.5%22%20cy%3D%226.5%22%20r%3D%22.5%22%20fill%3D%22currentColor%22%20%2F%3E%20%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2210.5%22%20r%3D%22.5%22%20fill%3D%22currentColor%22%20%2F%3E%20%3Ccircle%20cx%3D%226.5%22%20cy%3D%2212.5%22%20r%3D%22.5%22%20fill%3D%22currentColor%22%20%2F%3E%20%3Ccircle%20cx%3D%228.5%22%20cy%3D%227.5%22%20r%3D%22.5%22%20fill%3D%22currentColor%22%20%2F%3E%20%3C%2Fsvg%3E")}
.dbx-icon-contrast{--dbx-icon:url("data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2018a6%206%200%200%200%200-12v12z%22%20%2F%3E%20%3C%2Fsvg%3E")}
.dbx-icon-message-circle{--dbx-icon:url("data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M2.992%2016.342a2%202%200%200%201%20.094%201.167l-1.065%203.29a1%201%200%200%200%201.236%201.168l3.413-.998a2%202%200%200%201%201.099.092%2010%2010%200%201%200-4.777-4.719%22%20%2F%3E%20%3C%2Fsvg%3E")}
.dbx-icon-truck{--dbx-icon:url("data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M14%2018V6a2%202%200%200%200-2-2H4a2%202%200%200%200-2%202v11a1%201%200%200%200%201%201h2%22%20%2F%3E%20%3Cpath%20d%3D%22M15%2018H9%22%20%2F%3E%20%3Cpath%20d%3D%22M19%2018h2a1%201%200%200%200%201-1v-3.65a1%201%200%200%200-.22-.624l-3.48-4.35A1%201%200%200%200%2017.52%208H14%22%20%2F%3E%20%3Ccircle%20cx%3D%2217%22%20cy%3D%2218%22%20r%3D%222%22%20%2F%3E%20%3Ccircle%20cx%3D%227%22%20cy%3D%2218%22%20r%3D%222%22%20%2F%3E%20%3C%2Fsvg%3E")}
.dbx-icon-quote{--dbx-icon:url("data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M16%203a2%202%200%200%200-2%202v6a2%202%200%200%200%202%202%201%201%200%200%201%201%201v1a2%202%200%200%201-2%202%201%201%200%200%200-1%201v2a1%201%200%200%200%201%201%206%206%200%200%200%206-6V5a2%202%200%200%200-2-2z%22%20%2F%3E%20%3Cpath%20d%3D%22M5%203a2%202%200%200%200-2%202v6a2%202%200%200%200%202%202%201%201%200%200%201%201%201v1a2%202%200%200%201-2%202%201%201%200%200%200-1%201v2a1%201%200%200%200%201%201%206%206%200%200%200%206-6V5a2%202%200%200%200-2-2z%22%20%2F%3E%20%3C%2Fsvg%3E")}
.dbx-icon-undo-2{--dbx-icon:url("data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M9%2014%204%209l5-5%22%20%2F%3E%20%3Cpath%20d%3D%22M4%209h10.5a5.5%205.5%200%200%201%205.5%205.5a5.5%205.5%200%200%201-5.5%205.5H11%22%20%2F%3E%20%3C%2Fsvg%3E")}
.dbx-icon-circle-alert{--dbx-icon:url("data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20%2F%3E%20%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%228%22%20y2%3D%2212%22%20%2F%3E%20%3Cline%20x1%3D%2212%22%20x2%3D%2212.01%22%20y1%3D%2216%22%20y2%3D%2216%22%20%2F%3E%20%3C%2Fsvg%3E")}
.dbx-icon-wand-sparkles{--dbx-icon:url("data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22m21.64%203.64-1.28-1.28a1.21%201.21%200%200%200-1.72%200L2.36%2018.64a1.21%201.21%200%200%200%200%201.72l1.28%201.28a1.2%201.2%200%200%200%201.72%200L21.64%205.36a1.2%201.2%200%200%200%200-1.72%22%20%2F%3E%20%3Cpath%20d%3D%22m14%207%203%203%22%20%2F%3E%20%3Cpath%20d%3D%22M5%206v4%22%20%2F%3E%20%3Cpath%20d%3D%22M19%2014v4%22%20%2F%3E%20%3Cpath%20d%3D%22M10%202v2%22%20%2F%3E%20%3Cpath%20d%3D%22M7%208H3%22%20%2F%3E%20%3Cpath%20d%3D%22M21%2016h-4%22%20%2F%3E%20%3Cpath%20d%3D%22M11%203H9%22%20%2F%3E%20%3C%2Fsvg%3E")}
.dbx-icon-shield-check{--dbx-icon:url("data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M20%2013c0%205-3.5%207.5-7.66%208.95a1%201%200%200%201-.67-.01C7.5%2020.5%204%2018%204%2013V6a1%201%200%200%201%201-1c2%200%204.5-1.2%206.24-2.72a1.17%201.17%200%200%201%201.52%200C14.51%203.81%2017%205%2019%205a1%201%200%200%201%201%201z%22%20%2F%3E%20%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%20%2F%3E%20%3C%2Fsvg%3E")}
.dbx-icon-shopping-bag{--dbx-icon:url("data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M16%2010a4%204%200%200%201-8%200%22%20%2F%3E%20%3Cpath%20d%3D%22M3.103%206.034h17.794%22%20%2F%3E%20%3Cpath%20d%3D%22M3.4%205.467a2%202%200%200%200-.4%201.2V20a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6.667a2%202%200%200%200-.4-1.2l-2-2.667A2%202%200%200%200%2017%202H7a2%202%200%200%200-1.6.8z%22%20%2F%3E%20%3C%2Fsvg%3E")}

.feature-icon {
  width: 24px;
  height: 24px;
  color: var(--color-deep-blue);
  margin-bottom: var(--space-2);
}

.icon-disc {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--lc-deep-blue-100);
  margin-bottom: var(--space-3);
}

.icon-disc .dbx-icon {
  width: 20px;
  height: 20px;
  color: var(--color-deep-blue);
}

/* === Builder layout ====================================================== */
/* NOTE ON SPECIFICITY: the builder's frontend.css is enqueued *after* this
   child stylesheet, so every rule below that also exists there is prefixed
   with `body` to win on specificity instead of on order. */

/* The design's wrap is 1200px max with 32px gutters (1136px of content); the
   builder defaults to 20px gutters. */
body .jawn_row.row_in_grid > .jawn_row-inner {
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

/* stacked elements inside a column (also applies to builder trees rendered
   as a WooCommerce product description, which have no .jawn-pb-content) */
.jawn_col-inner > * + * {
  margin-top: var(--space-5);
}

.jawn_col-inner > .jawn_text_block + .jawn_text_block {
  margin-top: var(--space-4);
}

/* card rows: every card in the row is as tall as the tallest one */
.cards-equal > .jawn_row-inner > .jawn_col > .jawn_col-inner,
.cards-equal > .jawn_row-inner > .jawn_col > .jawn_col-inner > .jawn_text_block,
.cards-equal .card,
.cards-equal .quote-card,
.cards-equal .callout {
  height: 100%;
  box-sizing: border-box;
}

/* row gap presets matching the design's grid gaps */
.gap-64 > .jawn_row-inner { gap: 64px; }
.gap-32 > .jawn_row-inner { gap: 32px; }
.gap-24 > .jawn_row-inner { gap: var(--gutter-grid); }
.gap-16 > .jawn_row-inner { gap: var(--space-4); }

/* section rhythm — desktop values come from each row's Spacing (css_box),
   which the builder writes as an inline style, so the design's tablet/mobile
   rhythm has to use !important to beat it. */
@media only screen and (max-width: 1023px) {
  .jawn_row.sec { padding-top: 56px !important; padding-bottom: 56px !important; }
  .jawn_row.sec-sm { padding-top: 40px !important; padding-bottom: 40px !important; }
  .jawn_row.sec-hero { padding-top: 56px !important; padding-bottom: 48px !important; }
}

@media only screen and (max-width: 767px) {
  .jawn_row.sec { padding-top: 48px !important; padding-bottom: 48px !important; }
  .jawn_row.sec-sm { padding-top: 32px !important; padding-bottom: 32px !important; }
  .jawn_row.sec-hero { padding-top: 40px !important; padding-bottom: 40px !important; }
}

/* buttons sit side by side when a column is marked as a button row
   (the builder's column wrapper is a flex column by default) */
.jawn_col.btn-row > .jawn_col-inner {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.jawn-pb-content .jawn_col.btn-row > .jawn_col-inner > * + * {
  margin-top: 0;
}

.jawn_button {
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: var(--size-body-lg);
  box-shadow: var(--shadow-xs);
  transition: background-color 120ms var(--ease-standard), color 120ms var(--ease-standard), box-shadow 200ms var(--ease-standard);
}

.jawn_button.btn-preset-ghost {
  padding-left: 0;
  padding-right: 0;
  font-size: var(--size-body);
  box-shadow: none;
}

.jawn_button.btn-sm {
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: var(--size-body);
}

/* === Cards =============================================================== */
.card {
  background-color: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--gutter-card);
}

.card-chunky {
  background-color: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: inset 0 0 0 2px var(--color-deep-blue);
  padding: var(--gutter-card);
}

.card-calm {
  background-color: var(--surface-calm);
  border-radius: var(--radius-card);
  padding: var(--gutter-card);
  color: var(--lc-deep-blue-900);
}

.card-calm strong,
.card-calm p { color: var(--lc-deep-blue-900); }

.card-sunken {
  background-color: var(--surface-sunken);
  border-radius: var(--radius-card);
  padding: var(--gutter-card);
}

.feature-title {
  font-size: var(--size-body);
  line-height: 24px;
  letter-spacing: 0;
  margin: 0 0 6px;
}

.feature-title-lg {
  font-size: var(--size-body-lg);
  line-height: 27px;
  letter-spacing: -0.36px;
  margin: 0 0 6px;
}

/* grey "Pack photo — …" slots: the design ships placeholders, not images */
.placeholder {
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-5);
  background-color: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--size-body-sm);
  line-height: var(--leading-normal);
}

.placeholder-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
}

.placeholder-arch {
  border-radius: 999px 999px var(--radius-card) var(--radius-card);
  background-color: var(--color-calm-blue);
  color: var(--lc-deep-blue-900);
  aspect-ratio: 380 / 420;
}

.placeholder::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto 10px;
  background-color: currentColor;
  opacity: .5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* === Badges, pills, chips, stars ========================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background-color: var(--color-sunny-yellow);
  color: var(--color-deep-blue);
  font-size: var(--size-eyebrow);
  font-weight: 700;
  line-height: 18px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.pill {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background-color: var(--color-sunny-yellow);
  color: var(--lc-deep-blue-900);
  font-size: var(--size-body-sm);
  font-weight: 700;
  line-height: 21px;
  box-shadow: 0 2px 6px rgba(22, 35, 58, .07);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.chip-row li { list-style: none; }

.chip {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background-color: var(--surface-card);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
  color: var(--color-deep-blue);
  font-size: var(--size-body-sm);
  font-weight: 600;
  line-height: 20px;
  transition: box-shadow 200ms var(--ease-standard), background-color 120ms var(--ease-standard);
}

.chip:hover,
.chip:focus {
  box-shadow: inset 0 0 0 2px var(--color-deep-blue);
  color: var(--color-deep-blue);
}

.stars {
  color: var(--color-sunny-yellow);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 2px;
}

.rating-count {
  color: var(--text-muted);
  font-size: var(--size-body-sm);
}

.price {
  font-family: Nunito, sans-serif;
  font-weight: 800;
  font-size: var(--size-h4);
  letter-spacing: var(--tracking-display);
  color: var(--color-deep-blue);
}

.price-note {
  font-size: var(--size-caption);
  color: var(--text-muted);
}

/* === Check list, step list =============================================== */
.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.check-list li {
  position: relative;
  padding-left: 32px;
  list-style: none;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  background-color: var(--color-leaf-green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

.check-list strong { color: var(--text-heading); }

.step-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.step-list > li {
  position: relative;
  padding-left: 56px;
  list-style: none;
}

.step-list > li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-sunny-yellow);
  color: var(--lc-deep-blue-900);
  font-weight: 700;
  font-size: var(--size-body);
}

.step-list > li > *:first-child { margin-top: 0; }
.step-list h3 { margin: 0 0 var(--space-2); }

.step-list-blue > li::before {
  background-color: var(--color-deep-blue);
  color: var(--lc-white);
}

.step-list-sm > li { padding-left: 48px; }
.step-list-sm > li::before { width: 32px; height: 32px; font-size: var(--size-body-sm); }

/* numbered card list (product "what's in the pack") */
.card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: cardnum;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.card-list > li {
  position: relative;
  list-style: none;
  padding: var(--space-4) var(--space-4) var(--space-4) 64px;
  background-color: var(--lc-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.card-list > li::before {
  counter-increment: cardnum;
  content: counter(cardnum);
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-deep-blue);
  color: var(--lc-white);
  font-weight: 700;
  font-size: var(--size-body-sm);
}

.card-list > li strong { color: var(--text-heading); }

.card-list > li.parent-card {
  background-color: var(--surface-calm);
  box-shadow: none;
}

.card-list > li.parent-card::before {
  content: "";
  background-color: var(--color-warm-red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center no-repeat;
  -webkit-mask-size: 18px 18px;
  mask-size: 18px 18px;
}

.card-list > li.parent-card strong,
.card-list > li.parent-card p { color: var(--lc-deep-blue-900); }

/* spec tiles (Size / Stock / Read time) */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter-grid);
}

.spec-tile {
  background-color: var(--surface-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.spec-tile strong {
  display: block;
  margin-top: 4px;
  color: var(--text-heading);
  font-size: var(--size-body);
}

/* === Callouts ============================================================ */
.callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-card);
}

.callout .dbx-icon {
  width: 20px;
  height: 20px;
  margin-top: 3px;
}

.callout strong {
  display: block;
  font-size: var(--size-body);
  font-weight: 700;
}

.callout span,
.callout p {
  display: block;
  font-size: var(--size-body-sm);
  line-height: var(--leading-normal);
}

.callout-warn {
  background-color: var(--status-warn-bg);
  color: var(--status-warn-fg);
}

.callout-warn strong,
.callout-warn span { color: var(--status-warn-fg); }

.callout-calm {
  background-color: var(--surface-calm);
  color: var(--lc-deep-blue-900);
}

.callout-calm strong,
.callout-calm span,
.callout-calm p { color: var(--lc-deep-blue-900); }

.callout-success {
  background-color: var(--status-success-bg);
  color: var(--status-success-fg);
}

/* === Story card motif (six panels, front / back) ========================= */
.storycard-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.storycard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.spread {
  display: flex;
  gap: var(--space-4);
  align-items: stretch;
}

.spread > * {
  flex: 1 1 0;
  min-width: 0;
}

.storycard {
  background-color: var(--lc-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.panelgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.panel {
  min-width: 0;
  aspect-ratio: 2.4 / 1;
  min-height: 62px;
  border-radius: 10px;
  background-color: var(--surface-sunken);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
  padding: 10px;
}

.panel b {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-muted);
}

.panel .panel-cap {
  min-width: 0;
  font-size: 13px;
  line-height: 1.28;
  color: var(--text-body);
}

.card-side {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* === Quote cards ========================================================= */
.quote-card {
  background-color: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--gutter-card);
  height: 100%;
}

.quote-mark {
  width: 22px;
  height: 22px;
  color: var(--color-warm-red);
  margin-bottom: var(--space-3);
}

.quote-text {
  line-height: var(--leading-normal);
  color: var(--text-heading);
}

.quote-card .muted { margin-top: var(--space-4); }

/* === Pack cards (used on home and on the product page) =================== */
.pack-grid {
  display: grid;
  gap: var(--gutter-grid);
}

.pack-grid-4 { grid-template-columns: repeat(4, 1fr); }
.pack-grid-3 { grid-template-columns: repeat(3, 1fr); }

.pack-card {
  display: flex;
  flex-direction: column;
  background-color: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  color: var(--text-body);
  transition: transform 200ms var(--ease-out-soft), box-shadow 200ms var(--ease-out-soft);
}

.pack-card:hover,
.pack-card:focus {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  color: var(--text-body);
}

.pack-media {
  position: relative;
  display: block;
}

.pack-media .placeholder {
  aspect-ratio: 4 / 3;
  border-radius: 0;
}

.pack-media .badge {
  position: absolute;
  top: 12px;
  left: 12px;
}

.pack-media .shape {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 26px;
  height: 26px;
}

.pack-media .shape-arch { height: 16px; }

.pack-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 auto;
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.pack-title {
  display: block;
  margin: 0;
  font-size: var(--size-h4);
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.4px;
  color: var(--text-heading);
}

.pack-blurb {
  display: block;
  font-size: var(--size-body-sm);
  line-height: var(--leading-normal);
}

.pack-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
}

/* price and note wrap inside their own block so the rating stays on the
   first line, as in the design's narrow cards */
.pack-price {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
}

.pack-rating { flex: 0 0 auto; }

.pack-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* === FAQ accordion (the design's details / summary cards) ================ */
body .jawn_accordion .jawn_accordion-trigger {
  padding: 18px 56px 18px 24px;
  background-color: var(--surface-card);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-3);
  font-family: Nunito, sans-serif;
  font-size: var(--size-body-lg);
  font-weight: 700;
  line-height: 27px;
  letter-spacing: -0.36px;
  color: var(--text-heading);
}

body .jawn_accordion .jawn_accordion-trigger:hover,
body .jawn_accordion .jawn_accordion-trigger:focus-visible {
  background-color: var(--surface-card);
  box-shadow: var(--shadow-card-hover);
}

body .jawn_accordion .jawn_accordion-trigger[aria-expanded="true"] {
  background-color: var(--surface-card);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  margin-bottom: 0;
  box-shadow: var(--shadow-card);
}

body .jawn_accordion .jawn_accordion-trigger i {
  right: 24px;
  color: var(--text-muted);
  font-size: 18px;
}

body .jawn_accordion .jawn_accordion-panel {
  padding: 0 24px 22px;
  background-color: var(--surface-card);
  border: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-3);
}

body .jawn_accordion .jawn_accordion-panel p {
  max-width: 68ch;
  line-height: var(--leading-loose);
}

/* === Notification bar ==================================================== */
.jawn_notification_inner {
  padding: 9px 16px;
  font-size: var(--size-caption);
  font-weight: 700;
  line-height: 20px;
}

.jawn_notification_inner p { margin: 0; }

/* === Header ============================================================== */
/* The design's header is a 92%-opacity cream bar with a cream-300 hairline and
   a blurred backdrop. header_background only emits a solid colour, in a
   <style> block after this stylesheet, so this has to out-specify it. */
#header .header-bottom,
#header #mobile-header {
  background-color: rgba(247, 244, 236, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 -1px 0 var(--border-subtle);
}

.header-bottom .container {
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
  box-sizing: border-box;
}

#header .menu > li > a {
  font-weight: 700;
}

#header .menu > li.current-menu-item > a,
#header .menu > li.current_page_parent > a {
  color: var(--color-deep-blue);
}

.search-trigger {
  color: var(--color-deep-blue);
  margin-left: var(--space-3);
}

.search-trigger i { font-size: 18px; }

/* Account and cart sit at the end of the main menu; the design shows them as
   icons only, so on desktop the label is swapped for a mask icon. */
#header .menu > li > a[href*="/my-account/"],
#header .menu > li > a[href*="/cart/"] {
  color: var(--color-deep-blue);
}

@media only screen and (min-width: 1024px) {
  #header .menu > li > a[href*="/my-account/"] span,
  #header .menu > li > a[href*="/cart/"] span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #header .menu > li > a[href*="/my-account/"]::before,
  #header .menu > li > a[href*="/cart/"]::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: var(--dbx-icon) center/contain no-repeat;
    mask: var(--dbx-icon) center/contain no-repeat;
  }

  #header .menu > li > a[href*="/my-account/"] {
    --dbx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    padding: 0 6px 0 16px;
  }

  #header .menu > li > a[href*="/cart/"] {
    --dbx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3Cpath d='M3.103 6.034h17.794'/%3E%3Cpath d='M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z'/%3E%3C/svg%3E");
    padding: 0 6px;
  }
}

/* === Footer ============================================================== */
/* design grid is 1.4fr 1fr 1fr 1fr */
#footer .footer-4-cols { flex-wrap: wrap; }
#footer .footer-4-cols .footer-col.col-1 { width: 34%; }
#footer .footer-4-cols .footer-col.col-2,
#footer .footer-4-cols .footer-col.col-3,
#footer .footer-4-cols .footer-col.col-4 { width: 22%; }

#footer .container {
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
  box-sizing: border-box;
}

#footer .widget:not(:last-child) { margin-bottom: var(--space-5); }

#footer .widget_title {
  margin-bottom: var(--space-3);
}

#footer .menu,
#footer .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#footer .footer-col li { list-style: none; }

#footer .footer-top a {
  transition: color 120ms var(--ease-standard);
}

/* cream tile behind the footer logo, as in the design */
.footer-logo-tile {
  display: inline-block;
  background-color: var(--color-soft-cream);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: var(--space-3);
}

.footer-logo-tile img {
  display: block;
  height: 40px;
  width: auto;
}

.footer-tagline {
  max-width: 280px;
  margin-bottom: var(--space-4);
}

#footer .shape-cluster { margin-top: var(--space-2); }

/* the design sets the copyright line flush left inside the wrap */
.footer-bottom-center,
.footer-bottom-inner { text-align: left; }

/* === Product page components ============================================= */
/* customized / uncustomized comparison (the design's variant picker, shown
   here as an informational block — see report.md) */
.version-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.version {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background-color: var(--surface-card);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}

.version.is-on { box-shadow: inset 0 0 0 2px var(--color-deep-blue); }

.version-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.version-head h4 { margin: 0; }
.version-head .price { font-size: var(--size-body-lg); }

.version ul {
  margin: var(--space-2) 0 0;
  padding-left: 18px;
  font-size: var(--size-body-sm);
  line-height: var(--leading-normal);
}

.version li + li { margin-top: 4px; }

/* "Written with Dr. Lele" / parent-card credit lines */
.credit {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 44ch;
  color: var(--text-muted);
  font-size: var(--size-body-sm);
  line-height: 22px;
}

.credit-icon { flex: 0 0 auto; width: 36px; height: 36px; object-fit: contain; }
.credit-icon-lg { width: 44px; height: 44px; }

/* Dr Lele portrait: arch-topped media with the brand stamp overlapping it */
.lele-media > .jawn_col-inner { position: relative; }
.lele-media .placeholder-arch { width: 100%; }

.lele-stamp {
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 96px;
  height: auto;
}

.quote-chunky { max-width: 560px; }

.quote-lede {
  font-size: var(--size-body-lg);
  line-height: var(--leading-normal);
  color: var(--text-heading);
}

.review-score {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.review-score .h2 {
  font-family: Nunito, sans-serif;
  font-size: var(--size-h2);
  font-weight: 800;
  line-height: 36px;
  letter-spacing: -0.6px;
  color: var(--text-heading);
}

.review-score .stars { font-size: 20px; }

.review-card h3 { margin: var(--space-3) 0 6px; }
.review-card .muted { margin-top: var(--space-4); }

.reviews-cta > .jawn_col-inner { justify-content: flex-end; }

/* === WooCommerce ========================================================= */
.woocommerce .woocommerce-breadcrumb {
  font-size: var(--size-body-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

.woocommerce .woocommerce-breadcrumb a { color: var(--text-muted); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--color-deep-blue); }

.woocommerce .woocommerce-products-header__title,
.woocommerce h1.product_title {
  color: var(--text-heading);
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  font-size: var(--size-body-sm);
  color: var(--text-muted);
}

.woocommerce .woocommerce-ordering select {
  font-family: Nunito, sans-serif;
  font-size: var(--size-body-sm);
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background-color: var(--lc-white);
  color: var(--text-heading);
}

/* product grid — 3 up, matching the design's Shop page */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter-grid);
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; display: none; }

.woocommerce ul.products li.product {
  width: 100% !important;    /* Woo sets an inline-style-level width on its float grid */
  margin: 0 !important;      /* and a percentage right margin we do not want in a grid */
  float: none !important;
  display: flex;
  flex-direction: column;
  background-color: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 200ms var(--ease-out-soft), box-shadow 200ms var(--ease-out-soft);
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.woocommerce ul.products li.product img {
  margin: 0;
  border-radius: 0;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

/* No product photography was supplied — the design shows a cream "Pack photo"
   slot, so WooCommerce's stock grey placeholder art is swapped for it. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { position: relative; }

.woocommerce ul.products li.product img.woocommerce-placeholder {
  opacity: 0;
  background-color: var(--surface-sunken);
}

.woocommerce ul.products li.product:has(img.woocommerce-placeholder) a.woocommerce-LoopProduct-link::before {
  content: "Pack photo";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background-color: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--size-body-sm);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: 0 var(--space-5);
  margin: 0 0 6px;
  font-family: Nunito, sans-serif;
  font-size: var(--size-h4);
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.4px;
  color: var(--text-heading);
}

.woocommerce ul.products li.product .product-meta {
  display: block;
  padding: var(--space-4) var(--space-5) 0;
  font-size: var(--size-eyebrow);
  font-weight: 700;
  line-height: 18px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.woocommerce ul.products li.product .woocommerce-loop-product__link p,
.woocommerce ul.products li.product .product-blurb {
  padding: 0 var(--space-5);
  font-size: var(--size-body-sm);
  line-height: var(--leading-normal);
  color: var(--text-body);
}

.woocommerce ul.products li.product .price {
  padding: var(--space-4) var(--space-5) 0;
  margin: auto 0 0;
  font-family: Nunito, sans-serif;
  font-weight: 800;
  font-size: var(--size-h4);
  letter-spacing: var(--tracking-display);
  color: var(--color-deep-blue);
}

.woocommerce ul.products li.product .price del { color: var(--text-muted); font-weight: 400; font-size: var(--size-caption); }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  align-self: flex-start;
  margin: var(--space-4) var(--space-5) var(--space-5);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  background-color: var(--color-deep-blue);
  color: var(--lc-white);
  font-family: Nunito, sans-serif;
  font-size: var(--size-body-sm);
  font-weight: 700;
  line-height: 20px;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .added_to_cart:hover {
  background-color: var(--color-deep-blue-hover);
  color: var(--lc-white);
}

.woocommerce span.onsale {
  background-color: var(--color-warm-red);
  color: var(--lc-white);
  border-radius: var(--radius-pill);
  font-family: Nunito, sans-serif;
  font-weight: 700;
  min-height: 0;
  line-height: 1;
  padding: 6px 12px;
  top: 12px;
  right: 12px;
  left: auto;
  margin: 0;
}

/* single product */
.woocommerce div.product .product_title {
  font-size: var(--size-h1);
  font-weight: 900;
  line-height: 40px;
  letter-spacing: -0.76px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--color-deep-blue);
  font-family: Nunito, sans-serif;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: var(--tracking-display);
}

.woocommerce div.product p.price del { color: var(--text-muted); font-size: var(--size-body-lg); font-weight: 400; }
.woocommerce div.product p.price ins { text-decoration: none; }

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: var(--size-body);
  line-height: var(--leading-loose);
  max-width: 56ch;
}

.woocommerce div.product div.images img {
  border-radius: var(--radius-card);
}

.woocommerce div.product .woocommerce-product-gallery__image--placeholder {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--surface-sunken);
  border-radius: var(--radius-card);
}

.woocommerce div.product .woocommerce-product-gallery__image--placeholder img { opacity: 0; }

.woocommerce div.product .woocommerce-product-gallery__image--placeholder::after {
  content: "Pack photo";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: var(--size-body-sm);
}

.woocommerce div.product form.cart { margin-top: var(--space-5); }

.woocommerce .quantity .qty {
  font-family: Nunito, sans-serif;
  padding: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background-color: var(--lc-white);
  color: var(--text-heading);
}

.woocommerce div.product form.cart .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background-color: var(--color-deep-blue);
  color: var(--lc-white);
  font-family: Nunito, sans-serif;
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 14px 32px;
  box-shadow: var(--shadow-xs);
}

.woocommerce div.product form.cart .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background-color: var(--color-deep-blue-hover);
  color: var(--lc-white);
}

.woocommerce div.product .product_meta {
  font-size: var(--size-body-sm);
  color: var(--text-muted);
  padding-top: var(--space-4);
}

.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 var(--space-5); border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--border-subtle); }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background-color: var(--surface-sunken);
  border: 0;
  border-radius: var(--radius-pill);
  margin: 0 8px 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: Nunito, sans-serif;
  font-weight: 700;
  color: var(--text-body);
  padding: 10px 20px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background-color: var(--color-deep-blue);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--lc-white); }

.woocommerce .star-rating span,
.woocommerce p.stars a { color: var(--color-sunny-yellow); }

.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce div.product .woocommerce-tabs .panel > h2 {
  color: var(--text-heading);
}

.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--color-deep-blue);
  background-color: var(--surface-card);
  border-radius: var(--radius-md);
}

.woocommerce-message::before,
.woocommerce-info::before { color: var(--color-deep-blue); }

/* the shop page's builder intro sits above the product grid */
.woocommerce .jawn-pb-content { margin-bottom: var(--space-6); }

/* The product description tab is where the builder tree for a product lands.
   It is inside the theme container, so the design's full-bleed colour bands
   become inset feature panels (28px, the design system's panel radius). */
.woocommerce-Tabs-panel--description > h2:first-child,
.woocommerce-Tabs-panel--description > p:empty { display: none; }

.woocommerce-Tabs-panel--description .jawn_row.band-cream,
.woocommerce-Tabs-panel--description .jawn_row.band-blue,
.woocommerce-Tabs-panel--description .jawn_row.band-sun {
  border-radius: var(--radius-xl);
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

.woocommerce-Tabs-panel--description .jawn_row + .jawn_row { margin-top: 0; }

@media only screen and (max-width: 767px) {
  .woocommerce-Tabs-panel--description .jawn_row.band-cream,
  .woocommerce-Tabs-panel--description .jawn_row.band-blue,
  .woocommerce-Tabs-panel--description .jawn_row.band-sun {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* === Responsive ========================================================== */
/* The design keeps its 4-up grids at two columns all the way down to 390px
   (site.css breaks .grid-4 to repeat(2,1fr) at 960px and never further); the
   builder collapses any 3+ column row to one column with !important, so these
   rows opt back in. */
@media only screen and (max-width: 991px) {
  body .jawn_row.cols-2-small > .jawn_row-inner {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media only screen and (max-width: 1023px) {
  .pack-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .pack-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
  #footer .footer-4-cols .footer-col.col-1 { width: 100%; margin-bottom: var(--space-5); }
  #footer .footer-4-cols .footer-col.col-2,
  #footer .footer-4-cols .footer-col.col-3,
  #footer .footer-4-cols .footer-col.col-4 { width: 33.33%; }
  .gap-64 > .jawn_row-inner { gap: 40px; }
}

@media only screen and (max-width: 767px) {
  .jawn_row.row_in_grid > .jawn_row-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .header-bottom .container,
  #footer .container { padding-left: 20px; padding-right: 20px; }

  .pack-grid-4,
  .pack-grid-3 { grid-template-columns: 1fr; }

  .woocommerce ul.products { grid-template-columns: 1fr; }

  .spread { flex-direction: column; }

  .spec-grid { grid-template-columns: 1fr; }

  .version-grid { grid-template-columns: 1fr; }

  .lele-stamp { right: 0; bottom: -16px; width: 72px; }

  #footer .footer-4-cols .footer-col.col-1,
  #footer .footer-4-cols .footer-col.col-2,
  #footer .footer-4-cols .footer-col.col-3,
  #footer .footer-4-cols .footer-col.col-4 { width: 100%; }

  #footer .footer-4-cols .footer-col { margin-bottom: var(--space-5); }

  .lede { font-size: var(--size-body); }

  .jawn_button { font-size: var(--size-body); padding-top: 14px; padding-bottom: 14px; }

  .woocommerce div.product .product_title { font-size: 30px; line-height: 34px; }
}