/** Shopify CDN: Minification failed

Line 130:0 All "@import" rules must come first

**/
/*
 * ================================================================
 * NOSH GOURMET FOODS — Custom Design Layer v8.0
 * Nosh Brand System — LOCKED palette
 * (White dominant / Brand accent / Deep Navy text / CTA blue)
 * ================================================================
 * Theme   : NGF v2.0 (Beta Testing) - KB
 * Theme ID: gid://shopify/OnlineStoreTheme/154235961511
 * File    : assets/nosh-custom.css
 * Loaded  : layout/theme.liquid AFTER the inline color-scheme
 *           <style> block, so re-declaring Dawn's scheme CSS
 *           variables here wins the cascade.
 *
 * WHAT CHANGED FROM v7.8 (Founder Feedback Correction Pass):
 * The palette is now LOCKED and every blue has a single semantic
 * role. The near-duplicate logo blue was migrated to the locked
 * brand accent #2FA5FA, and every pale-blue field (the soft panel
 * tint, and the retired pale blue which is now gone from the theme
 * entirely) became white or a restrained neutral, so #FFFFFF is
 * the dominant surface and real product packaging supplies the
 * colour. Blue text and blue-backed white text that could not meet
 * contrast at #2FA5FA (community badge/name, hero eyebrow) moved to
 * #4770DB, which clears 4.5:1 on white. Hover, focus, active and
 * selected states are all #4770DB. § 16 replaced the deep-navy
 * footer with a premium light footer. Previously, from v7.7: logo
 * blue accents + § 26 header dropdown polish. Previously, from
 * v7.6: homepage mobile-first upgrade (premium announcement
 * ticker + § 25 hero/trust-strip/button system). Previously, from
 * v7.5:
 * Added § 24, an urgent readability + CTA patch for the Our Story
 * page: mobile-first body-copy size/line-height increases across
 * hero, intro, bands, value cards and founder bios; a styled hero
 * "hook" line; a compact pill-style founder CTA button with an
 * arrow cue (fully decoupled from Dawn's global .button styles so
 * it cannot affect Add to Cart / product forms); refined, more
 * compact bottom CTA buttons; tighter mobile vertical rhythm so
 * placeholders/gaps don't dominate the scroll; and a plain fallback
 * render style for any other page that resolves to the Default page
 * template. No colour-system change.
 *
 * NOSH LOCKED COLOUR SYSTEM:
 *   White        #FFFFFF  dominant page and card background
 *   Brand accent #2FA5FA  decorative rules, larger icons, section
 *                         accents, subtle borders, brand highlights.
 *                         NEVER small text on white, and never white
 *                         normal-size text on it — it is ~2.7:1.
 *   CTA blue     #4770DB  primary CTA fills (with #FFFFFF label),
 *                         CTA outlines, links needing contrast,
 *                         hover / focus / active / selected states.
 *                         4.56:1 on white — safe for text.
 *   Deep Navy    #0E1B4D  headings, body, nav, important icons.
 *                         Never a large section/campaign/footer field.
 *   Neutrals     #E5E7EB borders, #F7F8FA restrained surface.
 *   RETIRED      the pale blue, the soft-blue panel tint and the
 *                near-duplicate logo blue — zero occurrences left.
 *
 * HOW TO UNDO ALL CHANGES:
 * Shopify Admin → Online Store → Themes → NGF v2.0 (Beta Testing) - KB
 * → Actions → Edit code → assets/nosh-custom.css → clear all contents
 * OR delete the file. Zero Dawn source files, zero theme settings,
 * zero Liquid were modified. Fully reversible.
 * ================================================================
 */

/* NOSH CUSTOM START */

/* ================================================================
   § 1. DESIGN TOKENS — Locked Pomelli palette only
   ================================================================ */
:root {
  --nosh-white:  #FFFFFF;  /* dominant page + card background */
  --nosh-navy:   #0E1B4D;  /* headings, body text, nav text, key icons */
  --nosh-blue:   #4770DB;  /* CTAs, hover, focus, active, selected */
  --nosh-accent: #2FA5FA;  /* brand accent: rules, larger icons, borders */
  --nosh-border: #E5E7EB;  /* neutral separators + card hairlines */
  --nosh-surface: #F7F8FA; /* restrained neutral off-white, sparing use */

  /* Legacy aliases — retained so nothing that still references the old
     token names breaks. Both now resolve into the locked system. */
  --nosh-logo-blue: #2FA5FA;
  --nosh-soft-blue: #FFFFFF;

  /* Typography */
  --nosh-font-heading: 'Merriweather', Georgia, serif;
  --nosh-font-body:    'Inter', -apple-system, sans-serif;

  /* Card corner radii — Dawn reads these */
  --product-card-corner-radius:    1rem;
  --collection-card-corner-radius: 1rem;
  --blog-card-corner-radius:       1rem;

  /* Buttons + badges */
  --buttons-radius:        0.5rem;
  --buttons-radius-outset: 0.6rem;
  --badge-corner-radius:   0.4rem;

  /* Section spacing */
  --spacing-sections-desktop: 30px;
  --spacing-sections-mobile:  20px;

  /* Subtle navy/blue shadows */
  --nosh-card-shadow:
    0 1px 3px rgba(14, 27, 77, 0.06),
    0 4px 14px rgba(14, 27, 77, 0.06);
  --nosh-lift-shadow:
    0 14px 32px rgba(14, 27, 77, 0.16),
    0 4px 10px rgba(71, 112, 219, 0.10);
  --nosh-blue-glow:
    0 0 0 3px rgba(71, 112, 219, 0.14);

  /* Motion */
  --nosh-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --nosh-ease-smooth:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --nosh-transition:  0.25s var(--nosh-ease);
  --nosh-transition-slow: 0.4s var(--nosh-ease-smooth);
}

/* ================================================================
   § 2. FONTS — Merriweather (selective headings), Inter (body/UI)
   Fonts are loaded from Google Fonts. Dawn's own font system
   (settings.type_header_font / type_body_font) is left untouched;
   this only affects elements explicitly opted into these families
   below, so no Liquid/theme-settings change is needed.
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=Inter:wght@400;500;600;700;800&display=swap');

/* Merriweather for large hero/section display headings only */
.slideshow__text .banner__heading,
.multirow .image-with-text__heading {
  font-family: var(--nosh-font-heading);
  font-weight: 700;
}

/* Inter for all functional/ecommerce UI text */
body,
.button,
.card__heading,
.card-information,
.price,
.header__menu-item,
.multicolumn-card__info {
  font-family: var(--nosh-font-body);
}

/* ================================================================
   § 3. COHESIVE COLOUR-SCHEME SYSTEM
   Re-declares Dawn's scheme CSS variables (loaded after the inline
   block, so these win). Variables are R,G,B triplets; Dawn wraps
   them in rgb(). --gradient-background is what .gradient paints, so
   it MUST be set to kill any old gradients (v5's teal/purple, v6's
   soft-blue, etc.) — this is the ONLY place a "gradient" appears,
   and it is a flat colour, not an actual gradient.

   v7 mapping (white-dominant, no cream/soft-blue/gradient bands):
     scheme-1     → WHITE  (body root, slideshow, cart, multicolumn)
     scheme-2     → WHITE
     scheme-3     → WHITE  (Categories band)
     scheme-4     → NAVY   (announcement ticker / dark accent)
     scheme-5     → WHITE  (Collections band + PRODUCT CARDS)
     accent-2     → NAVY   (footer; header forced white in § 5)
     background-1 → WHITE  (slideshow slides / password)
   ================================================================ */

/* scheme-1 — WHITE (also :root / body / cart) */
:root,
.color-scheme-1 {
  --color-background: 255, 255, 255;
  --gradient-background: #FFFFFF;
  --color-background-contrast: 231, 235, 247;
  --color-foreground: 14, 27, 77;
  --color-shadow: 14, 27, 77;
  --color-button: 71, 112, 219;
  --color-button-text: 255, 255, 255;
  --color-secondary-button: 255, 255, 255;
  --color-secondary-button-text: 14, 27, 77;
  --color-link: 71, 112, 219;
}

/* scheme-2 — WHITE */
.color-scheme-2 {
  --color-background: 255, 255, 255;
  --gradient-background: #FFFFFF;
  --color-background-contrast: 231, 235, 247;
  --color-foreground: 14, 27, 77;
  --color-shadow: 14, 27, 77;
  --color-button: 71, 112, 219;
  --color-button-text: 255, 255, 255;
  --color-secondary-button: 255, 255, 255;
  --color-secondary-button-text: 14, 27, 77;
  --color-link: 71, 112, 219;
}

/* scheme-3 — WHITE (Categories band) */
.color-scheme-3 {
  --color-background: 255, 255, 255;
  --gradient-background: #FFFFFF;
  --color-background-contrast: 231, 235, 247;
  --color-foreground: 14, 27, 77;
  --color-shadow: 14, 27, 77;
  --color-button: 71, 112, 219;
  --color-button-text: 255, 255, 255;
  --color-secondary-button: 255, 255, 255;
  --color-secondary-button-text: 14, 27, 77;
  --color-link: 71, 112, 219;
}

/* scheme-4 — NAVY (announcement bar / dark premium accent) */
.color-scheme-4 {
  --color-background: 14, 27, 77;
  --gradient-background: #0E1B4D;
  --color-background-contrast: 41, 58, 116;
  --color-foreground: 255, 255, 255;
  --color-shadow: 0, 0, 0;
  --color-button: 71, 112, 219;
  --color-button-text: 255, 255, 255;
  --color-secondary-button: 14, 27, 77;
  --color-secondary-button-text: 255, 255, 255;
  --color-link: 255, 255, 255;
}

/* scheme-5 — WHITE (Collections band + product cards) */
.color-scheme-5 {
  --color-background: 255, 255, 255;
  --gradient-background: #FFFFFF;
  --color-background-contrast: 231, 235, 247;
  --color-foreground: 14, 27, 77;
  --color-shadow: 14, 27, 77;
  --color-button: 71, 112, 219;
  --color-button-text: 255, 255, 255;
  --color-secondary-button: 255, 255, 255;
  --color-secondary-button-text: 14, 27, 77;
  --color-link: 71, 112, 219;
}

/* accent-2 — NAVY (footer). Header uses this too but is forced
   white with navy text in § 5. */
.color-accent-2 {
  --color-background: 14, 27, 77;
  --gradient-background: #0E1B4D;
  --color-background-contrast: 41, 58, 116;
  --color-foreground: 255, 255, 255;
  --color-shadow: 0, 0, 0;
  --color-button: 71, 112, 219;
  --color-button-text: 255, 255, 255;
  --color-secondary-button: 14, 27, 77;
  --color-secondary-button-text: 255, 255, 255;
  --color-link: 255, 255, 255;
}

/* background-1 — WHITE (slideshow slides / password pages) */
.color-background-1 {
  --color-background: 255, 255, 255;
  --gradient-background: #FFFFFF;
  --color-background-contrast: 231, 235, 247;
  --color-foreground: 14, 27, 77;
  --color-shadow: 14, 27, 77;
  --color-button: 71, 112, 219;
  --color-button-text: 255, 255, 255;
  --color-secondary-button: 255, 255, 255;
  --color-secondary-button-text: 14, 27, 77;
  --color-link: 71, 112, 219;
}

/* ================================================================
   § 4. SITE BACKGROUND — White
   ================================================================ */
body {
  background-color: #FFFFFF !important;
}

/* ================================================================
   § 5. HEADER — white, deep navy text, subtle shadow, blue hover
   accent-2 is navy (for the footer), so we force the header white
   and its menu/icons navy here. Logo is untouched (image asset).
   ================================================================ */
.header-wrapper {
  background-color: #FFFFFF !important;
  background-image: none !important;
  background-attachment: initial !important;
  box-shadow:
    0 1px 0 rgba(14, 27, 77, 0.06),
    0 2px 14px rgba(14, 27, 77, 0.05);
}

/* Force header text + icons navy (accent-2 foreground is white) */
.header-wrapper .header__menu-item,
.header-wrapper .header__active-menu-item,
.header-wrapper .header__icon,
.header-wrapper .header__icon .icon,
.header-wrapper .header__heading-link {
  color: #0E1B4D !important;
}

.header-wrapper .header__icon .icon {
  fill: none;
}

/* Nav hover → Brand Blue with smooth underline motion */
.header-wrapper .header__menu-item {
  position: relative;
  transition: color var(--nosh-transition);
}

.header-wrapper .header__menu-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.2rem;
  width: 100%;
  height: 2px;
  background: #4770DB;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--nosh-transition);
}

@media (hover: hover) {
  .header-wrapper .header__menu-item:hover {
    color: #4770DB !important;
  }
  .header-wrapper .header__menu-item:hover::after {
    transform: scaleX(1);
  }
}

.shopify-section-header-sticky .header-wrapper {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 18px rgba(14, 27, 77, 0.09);
  border-bottom: 1px solid rgba(14, 27, 77, 0.06) !important;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.section-header.animate {
  transition: top 0.18s ease-out;
}

/* ================================================================
   § 6. ANNOUNCEMENT BAR — CSS-only infinite ticker (navy + white)
   The <span> becomes inline-flex; ::before + ::after hold two
   identical text copies; translateX(0 → -50%) loops seamlessly.
   Liquid text node hidden (font-size:0). Reduced motion restores
   a static centred line.
   ================================================================ */
.announcement-bar-section .utility-bar {
  background-color: #0E1B4D !important;
  background-image: none !important;
  background-attachment: initial !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.announcement-bar-section .page-width {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.announcement-bar-section div.announcement-bar {
  width: 100%;
  overflow: hidden;
}

.announcement-bar-section div.announcement-bar .announcement-bar__message {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: inherit;
  letter-spacing: normal;
}

/* Hide arrow SVG Dawn injects when a link is set */
.announcement-bar-section div.announcement-bar .announcement-bar__message svg,
.announcement-bar-section div.announcement-bar .announcement-bar__message .svg-wrapper {
  display: none !important;
}

/* Animated belt */
.announcement-bar-section div.announcement-bar .announcement-bar__message > span {
  display: inline-flex;
  white-space: nowrap;
  font-size: 0;
  color: transparent;
  animation: nosh-ticker 42s linear infinite;
  will-change: transform;
}

/* Two identical copies for the seamless loop.
   v7.7: premium Title-Case copy (not shouty all-caps), spaced
   bullet separators (\2022 with \00A0 breathing room), lighter
   weight and calmer letter-spacing for a boutique ticker feel. */
.announcement-bar-section div.announcement-bar .announcement-bar__message > span::before,
.announcement-bar-section div.announcement-bar .announcement-bar__message > span::after {
  content: "New Global Snack Drops Weekly\00A0\00A0\00A0\2022\00A0\00A0\00A0Imported Treats Curated for India\00A0\00A0\00A0\2022\00A0\00A0\00A0Pan-India Delivery\00A0\00A0\00A0\2022\00A0\00A0\00A0Limited Drops Sell Fast\00A0\00A0\00A0\2022\00A0\00A0\00A0Bestsellers Restocking Soon\00A0\00A0\00A0\2022\00A0\00A0\00A0";
  font-family: var(--nosh-font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: #FFFFFF;
  letter-spacing: 0.045em;
  text-transform: none;
  white-space: nowrap;
  display: inline-block;
  padding: 0.7rem 0;
}

@keyframes nosh-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (hover: hover) {
  .announcement-bar-section div.announcement-bar:hover
    .announcement-bar__message > span {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .announcement-bar-section div.announcement-bar .announcement-bar__message {
    white-space: normal;
    text-align: center;
  }
  .announcement-bar-section div.announcement-bar .announcement-bar__message > span {
    display: block;
    animation: none !important;
    font-size: 0.95rem;
    color: #FFFFFF;
    letter-spacing: 0.045em;
    font-weight: 500;
    text-align: center;
    padding: 0.7rem 1.5rem;
  }
  .announcement-bar-section div.announcement-bar .announcement-bar__message > span::before,
  .announcement-bar-section div.announcement-bar .announcement-bar__message > span::after {
    display: none;
  }
}

/* ================================================================
   § 7. PRODUCT CARDS — white, subtle navy/blue shadow, stronger
   desktop hover (lift + zoom + tilt), mobile-safe.
   ================================================================ */
.card-wrapper .card {
  background-color: #FFFFFF;
  transition:
    transform var(--nosh-transition),
    box-shadow var(--nosh-transition);
  will-change: transform;
}

.product-card-wrapper .card--card {
  box-shadow: var(--nosh-card-shadow);
}

@media (hover: hover) {
  .card-wrapper:hover .card {
    transform: translateY(-8px) rotate(0.4deg);
    box-shadow: var(--nosh-lift-shadow);
  }
}

.card__media .media img {
  transition: transform var(--nosh-transition-slow);
}

@media (hover: hover) {
  .card-wrapper:hover .card__media .media img {
    transform: scale(1.08);
  }
}

.card__information {
  padding-bottom: 1.5rem;
}

/* Product price/title micro-motion on hover for extra polish */
@media (hover: hover) {
  .card-wrapper:hover .card-information .price {
    color: #4770DB;
  }
}

.card-information .price {
  transition: color var(--nosh-transition);
}

/* ================================================================
   § 8. PRODUCT / GLOBAL BUTTONS — Brand Blue only, no yellow
   Primary: #4770DB bg / white text. Hover: #0E1B4D bg.
   Applies to Add to Cart, Shop Now, View All, form submits, etc.
   ================================================================ */
.button--primary,
.product-form__submit,
.quick-add__submit {
  background-color: #4770DB !important;
  color: #FFFFFF !important;
  border-color: #4770DB !important;
  font-weight: 700;
}

@media (hover: hover) {
  .button--primary:not([disabled]):hover,
  .product-form__submit:not([disabled]):hover,
  .quick-add__submit:not([disabled]):hover {
    background-color: #0E1B4D !important;
    border-color: #0E1B4D !important;
    color: #FFFFFF !important;
  }
}

.button {
  transition:
    background-color var(--nosh-transition),
    border-color var(--nosh-transition),
    color var(--nosh-transition),
    opacity var(--nosh-transition),
    transform var(--nosh-transition) !important;
  letter-spacing: 0.04em;
}

@media (hover: hover) {
  .button:not([disabled]):hover {
    transform: translateY(-2px);
    box-shadow: var(--nosh-blue-glow);
  }
}

.button:not([disabled]):active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.1s !important;
}

/* Secondary/outline buttons — navy border, blue hover fill */
.button--secondary {
  border-color: #0E1B4D !important;
  color: #0E1B4D !important;
  background-color: transparent !important;
}

@media (hover: hover) {
  .button--secondary:not([disabled]):hover {
    background-color: #4770DB !important;
    border-color: #4770DB !important;
    color: #FFFFFF !important;
  }
}

/* ================================================================
   § 9. CATEGORY / COLLECTION CARDS — white, blue hover/border
   accents, rounded corners, clean lift animation.
   ================================================================ */
.collection-card-wrapper .card,
.collection-card-wrapper .card .card__inner {
  background-color: #FFFFFF;
}

.collection-card-wrapper .card {
  border-radius: var(--collection-card-corner-radius);
  box-shadow: var(--nosh-card-shadow);
  border: 1px solid transparent;
  transition:
    transform var(--nosh-transition),
    box-shadow var(--nosh-transition),
    border-color var(--nosh-transition);
  overflow: hidden;
}

.collection-card-wrapper .card__heading,
.collection-card-wrapper .card__heading a {
  font-weight: 700;
  color: #0E1B4D;
  transition: color var(--nosh-transition);
}

@media (hover: hover) {
  .collection-card-wrapper:hover .card {
    transform: translateY(-6px);
    box-shadow: var(--nosh-lift-shadow);
    border-color: #4770DB;
  }
  .collection-card-wrapper:hover .card__media .media img {
    transform: scale(1.05);
  }
  .collection-card-wrapper:hover .card__heading,
  .collection-card-wrapper:hover .card__heading a {
    color: #4770DB;
  }
}

/* ================================================================
   § 10. MULTICOLUMN — stats + testimonials ("Snack notes from our
   customers"). Section band stays white per the locked palette
   (no soft-grey/cream band); cards get a subtle navy/blue shadow
   to separate from the page background instead.
   ================================================================ */
.multicolumn:not(.background-none) {
  background: #FFFFFF !important;
}

.multicolumn:not(.background-none) .multicolumn-card {
  background-color: #FFFFFF !important;
  border-radius: 1rem !important;
  border: 1px solid rgba(14, 27, 77, 0.07) !important;
  box-shadow: var(--nosh-card-shadow) !important;
  overflow: hidden;
  height: 100%;
  transition:
    transform var(--nosh-transition),
    box-shadow var(--nosh-transition),
    border-color var(--nosh-transition);
}

@media (hover: hover) {
  .multicolumn-list__item:hover .multicolumn-card {
    transform: translateY(-4px);
    box-shadow: var(--nosh-lift-shadow) !important;
    border-color: #4770DB !important;
  }
}

.multicolumn-card__info {
  padding: 1.8rem 2rem !important;
}

.multicolumn-card__info .rte,
.multicolumn-card__info p {
  color: rgba(14, 27, 77, 0.78);
}

/* --- STAT CARDS (have an icon): big Brand-Blue number --- */
.multicolumn-card:has(.multicolumn-card__image-wrapper) .multicolumn-card__info h3 {
  color: #4770DB;
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 0.2rem;
}

.multicolumn-card:has(.multicolumn-card__image-wrapper) .multicolumn-card__info p {
  color: #0E1B4D;
  font-weight: 600;
}

.multicolumn-card:has(.multicolumn-card__image-wrapper) .multicolumn-card__image-wrapper {
  max-width: 7.5rem;
  margin-left: auto;
  margin-right: auto;
}

/* --- TESTIMONIAL / "SNACK NOTES" CARDS (no image/title) ---
   Blue star row (not yellow) keeps the review accent inside the
   locked 3-colour system. Navy text, white card, no dead-grey
   background. This block also targets the section heading text
   itself so the merchant can safely rename "Testimonials" to
   "Snack notes from our customers" in the theme editor without
   any CSS follow-up — styling is heading-agnostic. */
.multicolumn-card:not(:has(.multicolumn-card__image-wrapper)) {
  position: relative;
}

.multicolumn-card:not(:has(.multicolumn-card__image-wrapper)) .multicolumn-card__info::before {
  content: "\2605\2605\2605\2605\2605";
  display: block;
  color: #4770DB;
  font-size: 1.4rem;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
  line-height: 1;
}

.multicolumn-card:not(:has(.multicolumn-card__image-wrapper)) .multicolumn-card__info {
  color: #0E1B4D;
}

.multicolumn-card:not(:has(.multicolumn-card__image-wrapper)) .multicolumn-card__info .rte {
  color: rgba(14, 27, 77, 0.86);
  line-height: 1.5;
}

/* ================================================================
   § 11. FOUNDER / MULTIROW — white-led layout, navy heading,
   blue caption/accent, brand-blue CTA. No soft-blue panel fill.
   ================================================================ */
.multirow .image-with-text__media {
  border-radius: 1.1rem;
  overflow: hidden;
  box-shadow: var(--nosh-card-shadow);
  transition: transform var(--nosh-transition-slow);
}

@media (hover: hover) {
  .multirow .image-with-text:hover .image-with-text__media {
    transform: scale(1.015);
  }
}

/* White content panel — no soft-blue tint fill */
.multirow .image-with-text__content {
  background-color: #FFFFFF !important;
  border-radius: 1.1rem;
  box-shadow: var(--nosh-card-shadow);
  padding: 2.4rem 2.6rem !important;
}

.multirow .image-with-text__text--caption {
  color: #4770DB;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.multirow .image-with-text__heading {
  color: #0E1B4D;
}

.multirow .image-with-text__text:not(.image-with-text__text--caption) {
  color: rgba(14, 27, 77, 0.80);
}

/* Founder CTA → Brand Blue, no yellow */
.multirow .button,
.multirow .button--secondary {
  background-color: #4770DB !important;
  color: #FFFFFF !important;
  border-color: #4770DB !important;
  font-weight: 700;
}

@media (hover: hover) {
  .multirow .button:hover,
  .multirow .button--secondary:hover {
    background-color: #0E1B4D !important;
    border-color: #0E1B4D !important;
  }
}

@media screen and (min-width: 750px) {
  .multirow .image-with-text__grid.grid--gapless {
    gap: 2rem;
    align-items: stretch;
  }
}

/* ================================================================
   § 12. BADGES — no orange. Sale = Brand Blue. Sold-out = navy.
   ================================================================ */
.badge--sale {
  background-color: #4770DB !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  font-weight: 700;
  letter-spacing: 0.05rem;
}

.badge--sold-out {
  background-color: #0E1B4D !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  font-weight: 600;
  letter-spacing: 0.05rem;
}

/* ================================================================
   § 13. PRICE DISPLAY
   ================================================================ */
.card-information .price .price-item--regular,
.card-information .price--on-sale .price-item--sale {
  font-weight: 700;
  color: #0E1B4D;
}

.price--on-sale .price-item--regular {
  color: rgba(14, 27, 77, 0.45) !important;
  font-size: 1.2rem;
}

/* ================================================================
   § 14. SECTION HEADINGS — navy Merriweather display text +
   Brand-Blue accent underline, with a subtle reveal-safe fade.
   ================================================================ */
.title-wrapper > h2.title,
.title-wrapper-with-link > h2.title {
  color: #0E1B4D;
}

.title-wrapper > h2.title::after,
.title-wrapper-with-link > h2.title::after {
  content: '';
  display: block;
  width: 2.8rem;
  height: 3px;
  background: #2FA5FA;
  border-radius: 2px;
  margin-top: 0.6rem;
}

/* ================================================================
   § 15. COMMUNITY REVIEWS — legacy utility classes (pre-section)
   Kept for backward compatibility with anything already using
   these classes; § 20 below is the real styling for the new
   sections/nosh-community-reviews.liquid section.
   ================================================================ */
.nosh-reel-card {
  background-color: #FFFFFF;
  border-radius: 1rem;
  box-shadow: var(--nosh-card-shadow);
  border: 1px solid rgba(14, 27, 77, 0.07);
  overflow: hidden;
  transition:
    transform var(--nosh-transition),
    box-shadow var(--nosh-transition),
    border-color var(--nosh-transition);
}

@media (hover: hover) {
  .nosh-reel-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--nosh-lift-shadow);
    border-color: #4770DB;
  }
}

.nosh-reel-card__meta {
  color: #0E1B4D;
  font-family: var(--nosh-font-body);
}

.nosh-reel-card__accent {
  color: #4770DB;
}

/* ================================================================
   § 16. FOOTER — premium LIGHT footer (Founder Feedback Correction
   Pass). The deep-navy footer field is retired: no navy or royal-blue
   panel, no dark legal strip, no gradient. White ground, Deep Navy
   type, neutral separators, CTA blue for hover/focus.

   This restyles Dawn's existing footer markup only. Every real
   element the merchant configured — the Quick links menu, the
   Contact Us text block, social icons, language selector, payment
   icons, policy links and copyright — is left exactly as configured.
   Nothing is invented: no press logos, no app badges, no extra menu
   items, and no legal wording is touched.

   Paired with sections/footer-group.json → color_scheme "scheme-1",
   which supplies the white ground and navy foreground natively; the
   rules below are refinement, not a colour override war.
   ================================================================ */
.footer {
  background-color: #FFFFFF !important;
  background-image: none !important;
  border-top: 1px solid #E5E7EB;
  color: #0E1B4D;
}

/* Separator between the link columns and the utility row */
.footer__content-bottom {
  border-top: 1px solid #E5E7EB;
}

/* Column headings — quiet, premium, not shouty */
.footer .footer-block__heading {
  color: #0E1B4D;
  font-family: var(--nosh-font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

/* Body + link text: readable navy, generous tap targets kept */
.footer .footer-block__details-content,
.footer .footer-block__details-content p,
.footer .copyright__content {
  color: rgba(14, 27, 77, 0.78);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.footer .footer-block__details-content .list-menu__item--link,
.footer .copyright__content a,
.footer .policies a {
  color: rgba(14, 27, 77, 0.78);
  font-size: 0.9375rem;
  text-decoration: none;
}

.footer .footer-block__details-content .list-menu__item--active {
  color: #0E1B4D;
}

.footer a:not(.button) {
  transition: color var(--nosh-transition);
}

/* Social + payment icons sit on white, so they need navy, not white */
.footer .list-social__link {
  color: #0E1B4D;
}

.footer .footer__list-social .icon {
  color: currentColor;
}

/* Localisation control reads as a quiet neutral chip, never a dark pill */
.footer .localization-form__select .icon-caret,
.footer .footer__localization h2 {
  color: rgba(14, 27, 77, 0.7);
}

.footer .disclosure__button {
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 0.5rem;
  color: #0E1B4D;
}

/* Hover / focus — CTA blue, the only interaction colour */
@media (hover: hover) {
  .footer a:not(.button):hover,
  .footer .footer-block__details-content .list-menu__item--link:hover,
  .footer .copyright__content a:hover,
  .footer .policies a:hover {
    color: #4770DB !important;
    text-decoration: underline;
    text-underline-offset: 0.3rem;
  }

  .footer .list-social__link:hover {
    color: #4770DB;
  }

  .footer .disclosure__button:hover {
    border-color: #4770DB;
    color: #4770DB;
  }
}

.footer a:focus-visible,
.footer .disclosure__button:focus-visible {
  outline: 2px solid #4770DB;
  outline-offset: 3px;
  border-radius: 0.25rem;
}

/* If the merchant ever re-enables the footer newsletter, its CTA
   follows the locked primary-CTA treatment. */
.footer .newsletter-form__button {
  background-color: #4770DB;
  color: #FFFFFF;
}

.footer .newsletter-form__field-wrapper .field__input {
  border-color: #E5E7EB;
  color: #0E1B4D;
}

/* ================================================================
   § 17. SCROLL-REVEAL — sections fade/rise into view on scroll.
   CSS only (transform/opacity), ready for the existing Phase 6 JS
   IntersectionObserver that toggles .nosh-visible.
   ================================================================ */
@media (prefers-reduced-motion: no-preference) {
  .nosh-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity 0.6s var(--nosh-ease-smooth),
      transform 0.6s var(--nosh-ease-smooth);
  }
  .nosh-reveal.nosh-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nosh-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ================================================================
   § 18. MOBILE REFINEMENTS — mobile-safe, no stuck hover, no
   layout-shifting animation.
   ================================================================ */
@media screen and (max-width: 749px) {
  .card__heading.h5 {
    font-size: 1.25rem;
    line-height: 1.35;
  }

  .card__information {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    padding-bottom: 1.2rem;
  }

  .grid.product-grid {
    --grid-mobile-vertical-spacing: 1.4rem;
    --grid-mobile-horizontal-spacing: 1rem;
  }

  .collection-list__item .card__information {
    padding: 1rem 1.1rem;
  }

  .quick-add__submit {
    font-size: 1.3rem;
  }

  .multicolumn-card__info {
    padding: 1.5rem !important;
  }

  .multirow .image-with-text__content {
    padding: 1.8rem !important;
  }

  /* Disable transform-based hover/lift animations on touch
     devices entirely — hover states can't be "unhovered" by touch,
     so we neutralise them at the media-query level as a second
     layer of protection beyond the (hover: hover) guards above. */
  .card-wrapper .card,
  .collection-card-wrapper .card,
  .multicolumn-card,
  .multirow .image-with-text__media {
    transition: box-shadow var(--nosh-transition) !important;
  }
}

/* ================================================================
   § 19. REDUCED-MOTION SAFETY — WCAG 2.1 § 2.3.3
   (Ticker has its own reduced-motion block in § 6.)
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .card-wrapper .card,
  .collection-card-wrapper .card,
  .card__media .media img,
  .multicolumn-card,
  .multirow .image-with-text__media,
  .button,
  .header-wrapper,
  .header-wrapper .header__menu-item::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ================================================================
   § 20. COMMUNITY SNACK REVIEWS SECTION
   Styles sections/nosh-community-reviews.liquid ("Community snack
   reviews" — Frido-inspired manual reel-card grid). White
   background, 4 columns on desktop, horizontal snap-scroll on
   mobile/tablet, rounded corners, subtle navy/blue shadow, brand
   blue hover border. No Instagram API, no app — purely a styled
   wrapper around merchant-uploaded images/videos and optional
   outbound links.
   ================================================================ */

.nosh-community-reviews {
  background-color: #FFFFFF;
}

.nosh-community-reviews__header {
  max-width: 640px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.nosh-community-reviews__heading {
  color: #0E1B4D;
  font-family: var(--nosh-font-heading);
  font-weight: 700;
  margin: 0;
  font-size: 2.6rem;
  line-height: 1.15;
}

.nosh-community-reviews__heading::after {
  content: '';
  display: block;
  width: 2.8rem;
  height: 3px;
  background: #4770DB;
  border-radius: 2px;
  margin: 0.7rem auto 0;
}

.nosh-community-reviews__subheading {
  color: rgba(14, 27, 77, 0.72);
  font-family: var(--nosh-font-body);
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 1rem 0 0;
}

.nosh-community-reviews__empty {
  text-align: center;
  color: rgba(14, 27, 77, 0.45);
  font-family: var(--nosh-font-body);
  padding: 2rem 0;
}

/* Track — 4-column grid on desktop */
.nosh-community-reviews__track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}

/* Card */
.nosh-community-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border-radius: 1.1rem;
  overflow: hidden;
  border: 1px solid rgba(14, 27, 77, 0.08);
  box-shadow: var(--nosh-card-shadow);
  transition:
    transform var(--nosh-transition),
    box-shadow var(--nosh-transition),
    border-color var(--nosh-transition);
}

@media (hover: hover) {
  .nosh-community-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--nosh-lift-shadow);
    border-color: #4770DB;
  }
}

/* Vertical / portrait "reel" media area */
.nosh-community-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background-color: rgba(14, 27, 77, 0.04);
  overflow: hidden;
}

.nosh-community-card__media img,
.nosh-community-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nosh-community-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(14, 27, 77, 0.25);
}

.nosh-community-card__placeholder svg {
  width: 60%;
  height: 60%;
}

/* Decorative play icon overlay — shown only when a video is set */
.nosh-community-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: rgba(14, 27, 77, 0.55);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

/* Badge — "Snack haul", "Imported drinks", etc. */
.nosh-community-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background-color: #4770DB;
  color: #FFFFFF;
  font-family: var(--nosh-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 2rem;
  z-index: 2;
}

/* Caption + name */
.nosh-community-card__info {
  padding: 1.1rem 1.2rem 1.3rem;
}

.nosh-community-card__caption {
  color: #0E1B4D;
  font-family: var(--nosh-font-body);
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0 0 0.4rem;
}

.nosh-community-card__name {
  color: #4770DB;
  font-family: var(--nosh-font-body);
  font-weight: 700;
  font-size: 0.85rem;
  margin: 0;
}

/* Full-card stretched link — only rendered when a link is set */
.nosh-community-card__link {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.nosh-community-card__link:focus-visible {
  outline: 2px solid #4770DB;
  outline-offset: 2px;
}

/* Mobile / tablet — horizontal snap-scroll "reel" row instead of a grid */
@media screen and (max-width: 989px) {
  .nosh-community-reviews__track {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nosh-community-reviews__track::-webkit-scrollbar {
    display: none;
  }

  .nosh-community-card {
    flex: 0 0 68%;
    scroll-snap-align: start;
  }
}

@media screen and (max-width: 480px) {
  .nosh-community-card {
    flex-basis: 78%;
  }

  .nosh-community-reviews__heading {
    font-size: 2rem;
  }
}

/* Touch devices — neutralise the transform-based hover lift (second
   layer of protection beyond the (hover: hover) guard above). */
@media screen and (max-width: 749px) {
  .nosh-community-card {
    transition: box-shadow var(--nosh-transition) !important;
  }
}

/* Reduced motion — disable card lift transform entirely */
@media (prefers-reduced-motion: reduce) {
  .nosh-community-card {
    transition: none !important;
    transform: none !important;
  }
}

/* ================================================================
   § 21. OUR STORY PAGE SECTION  (v2 — tighter rhythm, two-column
   hero, branded placeholders, more motion)
   Styles sections/nosh-our-story-page.liquid, used by
   templates/page.nosh-our-story.json. Editorial layout inspired by
   DailyObjects/Blue Tokai, shopping-friendly CTA structure inspired
   by MyFrido. White background, deep navy text, brand blue accents
   only — no yellow, orange, cream or gradients.

   Animation approach: CSS-only staggered fade-up on page load
   (NOT a scroll-triggered reveal — no JS IntersectionObserver exists
   in this theme yet, so gating opacity behind a JS-added class would
   leave content permanently invisible). Fully respects
   prefers-reduced-motion; content is always visible even if the
   animation is skipped.
   ================================================================ */

.nosh-story {
  background-color: #FFFFFF;
}

/* --- Load-in animation (CSS-only, no scroll trigger needed) --- */
@keyframes noshStoryFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes noshStoryUnderline {
  from { width: 0; }
  to   { width: 2.8rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .nosh-story__hero-inner,
  .nosh-story__hero-media-wrap,
  .nosh-story__intro,
  .nosh-story-card,
  .nosh-story__band,
  .nosh-story__cta {
    animation: noshStoryFadeUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .nosh-story__hero-media-wrap,
  .nosh-story__intro,
  .nosh-story__band,
  .nosh-story__cta {
    animation-delay: 0.05s;
  }

  .nosh-story-card:nth-child(2) { animation-delay: 0.08s; }
  .nosh-story-card:nth-child(3) { animation-delay: 0.16s; }
  .nosh-story-card:nth-child(4) { animation-delay: 0.24s; }
  .nosh-story-card:nth-child(5) { animation-delay: 0.32s; }
  .nosh-story-card:nth-child(6) { animation-delay: 0.40s; }

  .nosh-story__hero-heading::after,
  .nosh-story__band-heading::after {
    animation: noshStoryUnderline 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nosh-story__hero-inner,
  .nosh-story__hero-media-wrap,
  .nosh-story__intro,
  .nosh-story-card,
  .nosh-story__band,
  .nosh-story__cta {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .nosh-story__hero-heading::after,
  .nosh-story__band-heading::after {
    animation: none !important;
    width: 2.8rem !important;
  }
}

/* --- 1. Hero: two-column desktop, text + media --- */
.nosh-story__hero {
  padding-bottom: 0.5rem;
}

.nosh-story__hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.nosh-story__hero-inner {
  text-align: left;
}

.nosh-story__eyebrow {
  color: #4770DB;
  font-family: var(--nosh-font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.nosh-story__hero-heading {
  color: #0E1B4D;
  font-family: var(--nosh-font-heading);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.1;
  margin: 0;
}

.nosh-story__hero-heading::after {
  content: '';
  display: block;
  width: 2.8rem;
  height: 3px;
  background: #4770DB;
  border-radius: 2px;
  margin: 0.9rem 0 0;
}

.nosh-story__hero-subheading {
  color: rgba(14, 27, 77, 0.72);
  font-family: var(--nosh-font-body);
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 1.25rem 0 0;
  max-width: 32rem;
}

.nosh-story__hero-media-wrap {
  position: relative;
}

.nosh-story__hero-media {
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: var(--nosh-lift-shadow);
  border: 2px solid rgba(14, 27, 77, 0.10);
  aspect-ratio: 4 / 5;
}

.nosh-story__hero-media img,
.nosh-story__hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--nosh-transition-slow);
}

@media (hover: hover) {
  .nosh-story__hero-media-wrap:hover .nosh-story__hero-media img,
  .nosh-story__hero-media-wrap:hover .nosh-story__hero-media video {
    transform: scale(1.05);
  }
}

/* --- Branded "shelf" placeholder (replaces pale Dawn default) ---
   Navy/blue-framed box with a faint dot-grid texture, a row of
   abstract "shelf bar" silhouettes (evoking a snack shelf without
   needing real photography yet), and a centred line-icon. Every
   colour used is from the locked 3-colour system. */
.nosh-story__media-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 1.25rem;
  background-color: #FFFFFF;
  border: 2px solid #4770DB;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nosh-story__media-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(14, 27, 77, 0.12) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  opacity: 0.5;
}

.nosh-story__media-placeholder--hero {
  aspect-ratio: 4 / 5;
}

.nosh-story__media-placeholder-grid {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 14%;
  display: flex;
  align-items: flex-end;
  gap: 8%;
  height: 42%;
}

.nosh-story__media-placeholder-grid span {
  flex: 1;
  border-radius: 0.5rem 0.5rem 0.3rem 0.3rem;
  background-color: #4770DB;
}

.nosh-story__media-placeholder-grid span:nth-child(1) { height: 55%; background-color: #0E1B4D; }
.nosh-story__media-placeholder-grid span:nth-child(2) { height: 85%; background-color: #4770DB; }
.nosh-story__media-placeholder-grid span:nth-child(3) { height: 65%; background-color: #FFFFFF; border: 2px solid #0E1B4D; }
.nosh-story__media-placeholder-grid span:nth-child(4) { height: 100%; background-color: #0E1B4D; }
.nosh-story__media-placeholder-grid span:nth-child(5) { height: 45%; background-color: #4770DB; }

.nosh-story__media-placeholder-icon {
  position: relative;
  z-index: 1;
  width: 22%;
  color: #0E1B4D;
  margin-bottom: 22%;
  opacity: 0.9;
}

.nosh-story__media-placeholder-icon svg {
  width: 100%;
  height: auto;
}

/* --- 2. Intro story --- */
.nosh-story__intro {
  margin-top: 2.75rem;
}

.nosh-story__intro-grid {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.nosh-story__intro-grid--with-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 100%;
  text-align: left;
}

.nosh-story__intro-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.1rem;
  display: block;
  box-shadow: var(--nosh-card-shadow);
  transition: transform var(--nosh-transition-slow);
}

@media (hover: hover) {
  .nosh-story__intro-media:hover img {
    transform: scale(1.04);
  }
}

.nosh-story__intro-media {
  border-radius: 1.1rem;
  overflow: hidden;
}

.nosh-story__intro-text {
  color: rgba(14, 27, 77, 0.82);
  font-family: var(--nosh-font-body);
  font-size: 1.125rem;
  line-height: 1.75;
}

.nosh-story__intro-text p {
  margin: 0 0 1rem;
}

.nosh-story__intro-text p:last-child {
  margin-bottom: 0;
}

/* --- 3. Value cards: compact, pulled close to hero --- */
.nosh-story__values {
  margin-top: 2.25rem;
}

.nosh-story__values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.nosh-story-card {
  background-color: #FFFFFF;
  border: 1px solid rgba(14, 27, 77, 0.08);
  border-radius: 1.1rem;
  padding: 1.5rem 1.4rem;
  box-shadow: var(--nosh-card-shadow);
  transition:
    transform var(--nosh-transition),
    box-shadow var(--nosh-transition),
    border-color var(--nosh-transition);
}

@media (hover: hover) {
  .nosh-story-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--nosh-lift-shadow);
    border-color: #4770DB;
  }
  .nosh-story-card:hover .nosh-story-card__icon {
    color: #4770DB;
  }
}

.nosh-story-card__icon {
  color: #0E1B4D;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.85rem;
  transition: color var(--nosh-transition);
}

.nosh-story-card__icon svg {
  width: 100%;
  height: 100%;
}

.nosh-story-card__heading {
  color: #0E1B4D;
  font-family: var(--nosh-font-body);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 0.4rem;
}

.nosh-story-card__text {
  color: rgba(14, 27, 77, 0.72);
  font-family: var(--nosh-font-body);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* --- 4 & 5. Trust/sourcing and Curated shelf (shared band layout) --- */
.nosh-story__band {
  margin-top: 3rem;
}

.nosh-story__band-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.nosh-story__band-grid--image-left .nosh-story__band-media {
  order: 1;
}
.nosh-story__band-grid--image-left .nosh-story__band-text {
  order: 2;
}
.nosh-story__band-grid--image-right .nosh-story__band-media {
  order: 2;
}
.nosh-story__band-grid--image-right .nosh-story__band-text {
  order: 1;
}

.nosh-story__band-media {
  border-radius: 1.25rem;
  overflow: hidden;
}

.nosh-story__band-media img {
  width: 100%;
  display: block;
  border-radius: 1.25rem;
  box-shadow: var(--nosh-card-shadow);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--nosh-transition-slow);
}

@media (hover: hover) {
  .nosh-story__band-media:hover img {
    transform: scale(1.04);
  }
}

.nosh-story__band-heading {
  color: #0E1B4D;
  font-family: var(--nosh-font-heading);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.2;
  margin: 0;
}

.nosh-story__band-heading::after {
  content: '';
  display: block;
  width: 2.8rem;
  height: 3px;
  background: #4770DB;
  border-radius: 2px;
  margin: 0.75rem 0 0;
}

.nosh-story__band-body {
  color: rgba(14, 27, 77, 0.78);
  font-family: var(--nosh-font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  margin-top: 1rem;
}

.nosh-story__band-body p {
  margin: 0 0 1rem;
}

.nosh-story__band-body p:last-child {
  margin-bottom: 0;
}

/* --- 6. CTA --- */
.nosh-story__cta {
  margin-top: 3.25rem;
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.nosh-story__cta-heading {
  color: #0E1B4D;
  font-family: var(--nosh-font-heading);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.2;
  margin: 0;
}

.nosh-story__cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.nosh-story__cta-button {
  min-width: 220px;
  text-align: center;
}

/* --- Responsive: tablet --- */
@media screen and (max-width: 989px) {
  .nosh-story__hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .nosh-story__hero-inner {
    text-align: center;
  }

  .nosh-story__hero-heading::after {
    margin-left: auto;
    margin-right: auto;
  }

  .nosh-story__hero-subheading {
    margin-left: auto;
    margin-right: auto;
  }

  .nosh-story__hero-media {
    aspect-ratio: 16 / 10;
  }

  .nosh-story__media-placeholder--hero {
    aspect-ratio: 16 / 10;
  }

  .nosh-story__intro-grid--with-image {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }

  .nosh-story__values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .nosh-story__band-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Consistent reading order on stacked layouts regardless of the
     desktop image-position setting: text first, then image. */
  .nosh-story__band-grid .nosh-story__band-media {
    order: 2;
  }
  .nosh-story__band-grid .nosh-story__band-text {
    order: 1;
  }

  /* Hero media also comes after text on mobile/tablet even though
     it's visually "second column" on desktop. */
  .nosh-story__hero-grid .nosh-story__hero-inner {
    order: 1;
  }
  .nosh-story__hero-grid .nosh-story__hero-media-wrap {
    order: 2;
  }
}

/* --- Responsive: mobile --- */
@media screen and (max-width: 749px) {
  .nosh-story__hero-heading {
    font-size: 2.1rem;
  }

  .nosh-story__hero-subheading {
    font-size: 1rem;
  }

  .nosh-story__band-heading {
    font-size: 1.5rem;
  }

  .nosh-story__cta-heading {
    font-size: 1.6rem;
  }

  .nosh-story__values,
  .nosh-story__intro,
  .nosh-story__band,
  .nosh-story__cta {
    margin-top: 2rem;
  }
}

@media screen and (max-width: 479px) {
  .nosh-story__values-grid {
    grid-template-columns: 1fr;
  }

  .nosh-story__cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .nosh-story__cta-button {
    min-width: 0;
    width: 100%;
  }
}

/* Touch devices — neutralise the transform-based hover lift/zoom
   (second layer of protection beyond the (hover: hover) guard
   above). */
@media screen and (max-width: 749px) {
  .nosh-story-card,
  .nosh-story__hero-media img,
  .nosh-story__hero-media video,
  .nosh-story__band-media img,
  .nosh-story__intro-media img {
    transition: box-shadow var(--nosh-transition) !important;
  }
}

/* ================================================================
   § 22. FOUNDERS SECTION — "Meet the people behind Nosh"
   Two Instagram-Reel-size (9:16) founder cards. White cards, navy
   text, brand-blue eyebrow/underline/buttons/quote-accent. Video
   (Shopify-native, muted/looped/playsinline) takes priority over
   image, which takes priority over a branded placeholder — no pale
   grey boxes. Hover lift + media zoom + blue border on desktop,
   fully reduced-motion safe, touch-safe on mobile.
   ================================================================ */

.nosh-story__founders {
  margin-top: 3rem;
}

.nosh-story__founders-header {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.nosh-story__founders-heading {
  text-align: center;
}

.nosh-story__founders-heading::after {
  margin-left: auto;
  margin-right: auto;
}

.nosh-story__founders-intro {
  color: rgba(14, 27, 77, 0.72);
  font-family: var(--nosh-font-body);
  font-size: 1.1rem;
  line-height: 1.75;
}

.nosh-story__founders-intro p {
  margin: 0 0 0.9rem;
}

.nosh-story__founders-intro p:last-child {
  margin-bottom: 0;
}

.nosh-story__founders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2.25rem;
}

/* --- Founder card --- */
.nosh-story-founder-card {
  background-color: #FFFFFF;
  border: 1px solid rgba(14, 27, 77, 0.08);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: var(--nosh-card-shadow);
  transition:
    transform var(--nosh-transition),
    box-shadow var(--nosh-transition),
    border-color var(--nosh-transition);
}

@media (hover: hover) {
  .nosh-story-founder-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--nosh-lift-shadow);
    border-color: #4770DB;
  }
  .nosh-story-founder-card:hover .nosh-story-founder-card__media img,
  .nosh-story-founder-card:hover .nosh-story-founder-card__media video {
    transform: scale(1.05);
  }
}

/* Instagram-Reel-size (9:16) media area */
.nosh-story-founder-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background-color: rgba(14, 27, 77, 0.04);
  overflow: hidden;
}

.nosh-story-founder-card__media img,
.nosh-story-founder-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--nosh-transition-slow);
}

.nosh-story-founder-card__info {
  padding: 1.75rem 1.75rem 2rem;
}

.nosh-story-founder-card__name {
  color: #0E1B4D;
  font-family: var(--nosh-font-body);
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 0 0.25rem;
}

.nosh-story-founder-card__role {
  color: #4770DB;
  font-family: var(--nosh-font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  margin: 0 0 1.1rem;
}

.nosh-story-founder-card__bio {
  color: rgba(14, 27, 77, 0.72);
  font-family: var(--nosh-font-body);
  font-size: 1rem;
  line-height: 1.7;
}

.nosh-story-founder-card__bio p {
  margin: 0 0 0.85rem;
}

.nosh-story-founder-card__bio p:last-child {
  margin-bottom: 0;
}

.nosh-story-founder-card__quote {
  margin: 0 0 1.25rem;
  padding-left: 1rem;
  border-left: 3px solid #2FA5FA;
  color: #0E1B4D;
  font-family: var(--nosh-font-body);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
}

.nosh-story-founder-card__quote::before {
  content: '\201C';
}

.nosh-story-founder-card__quote::after {
  content: '\201D';
}

.nosh-story-founder-card__button {
  display: inline-block;
  margin-top: 0.25rem;
}

/* --- Founder branded placeholder (no shelf bars — a large centred
   person icon instead, matching the 9:16 aspect of the media slot) --- */
.nosh-story__media-placeholder--founder {
  aspect-ratio: 9 / 16;
}

.nosh-story__media-placeholder-icon--founder {
  width: 34%;
  margin-bottom: 0;
}

/* --- Responsive: tablet — stack to one column --- */
@media screen and (max-width: 989px) {
  .nosh-story__founders-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    max-width: 26rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- Responsive: mobile --- */
@media screen and (max-width: 749px) {
  .nosh-story__founders {
    margin-top: 2rem;
  }

  .nosh-story-founder-card__info {
    padding: 1.5rem 1.5rem 1.75rem;
  }
}

/* Touch devices — neutralise the transform-based hover lift/zoom
   (second layer of protection beyond the (hover: hover) guard
   above). */
@media screen and (max-width: 749px) {
  .nosh-story-founder-card,
  .nosh-story-founder-card__media img,
  .nosh-story-founder-card__media video {
    transition: box-shadow var(--nosh-transition) !important;
  }
}

/* --- Load-in fade-up + reduced-motion (extends § 21's rules) --- */
@media (prefers-reduced-motion: no-preference) {
  .nosh-story__founders-header,
  .nosh-story-founder-card {
    animation: noshStoryFadeUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .nosh-story-founder-card:nth-child(2) {
    animation-delay: 0.1s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nosh-story__founders-header,
  .nosh-story-founder-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .nosh-story-founder-card__media img,
  .nosh-story-founder-card__media video {
    transition: none !important;
    transform: none !important;
  }
}

/* ================================================================
   § 23. STORYTELLING PASS — "What we stand for" heading wrapper +
   subtle floating micro-motion on branded placeholders.
   Everything else in the deeper brand-story update (Why Nosh
   Exists, Built on Import Experience, Made for Discovery, Shaped by
   Craving) reuses existing § 21 band/heading/card classes — no new
   CSS was needed for those. This section only adds the two
   genuinely new visual elements.
   ================================================================ */

/* Centred header above the value-cards grid, reusing the same
   heading/underline styling and fade-up animation as § 21 via the
   shared .nosh-story__band-heading + .nosh-story__founders-heading
   class combo (band-heading gives colour/font/underline-reveal;
   founders-heading centres it). */
.nosh-story__values-header {
  max-width: 700px;
  margin: 0 auto 1.5rem;
  text-align: center;
}

/* --- Subtle floating micro-motion on placeholder icons only ---
   Purely decorative (icons are aria-hidden), never applied to real
   uploaded images/video. Slow, small-amplitude, transform-only. */
@keyframes noshPlaceholderFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: no-preference) {
  .nosh-story__media-placeholder-icon {
    animation: noshPlaceholderFloat 4.5s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nosh-story__media-placeholder-icon {
    animation: none !important;
    transform: none !important;
  }
}

/* ================================================================
   § 24. URGENT READABILITY + CTA PATCH (v7.6)
   Mobile-first typography bump across the Our Story page (85%+ of
   Nosh traffic converts on mobile), a new hero "hook" line, a
   compact pill-style founder CTA button with an arrow cue, refined
   bottom CTA buttons, and tightened vertical rhythm on mobile so
   image placeholders and gaps don't dominate the scroll. Locked
   3-colour system only; no new hover meaning (arrow/label text is
   always visible, hover is a bonus, not a requirement).
   ================================================================ */

/* --- Fallback render for any OTHER page that resolves to the
   Default page template (Privacy Policy, Terms of Use, Shipping
   Policy, Refund Policy, etc.) so they are no longer hijacked by
   the Our Story design. Plain, readable, on-brand. --- */
.nosh-story__fallback {
  padding: 3rem 0 4rem;
}
.nosh-story__fallback-title {
  color: #0E1B4D;
  font-family: var(--nosh-font-heading);
  font-weight: 700;
  font-size: 2.2rem;
  margin: 0 0 1.5rem;
}
.nosh-story__fallback-content {
  color: rgba(14, 27, 77, 0.82);
  font-family: var(--nosh-font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
}

/* --- Hero hook line (new, between heading and subheading) --- */
.nosh-story__hero-hook {
  color: #4770DB;
  font-family: var(--nosh-font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.3;
  margin: 0.9rem 0 0;
}

@media screen and (max-width: 749px) {
  .nosh-story__hero-hook {
    font-size: 1.2rem;
  }
}

/* --- Desktop body-copy already updated in place above (§ 21/§ 22
   selectors) — this block only adds mobile overrides + new CTA
   styling that could not reuse existing selectors. --- */

/* --- Mobile body-copy: never below ~16px, generous line-height --- */
@media screen and (max-width: 749px) {
  .nosh-story__hero-subheading {
    font-size: 1.0625rem;
    line-height: 1.7;
  }

  .nosh-story__intro-text {
    font-size: 1rem;
    line-height: 1.7;
  }

  .nosh-story__band-body {
    font-size: 1rem;
    line-height: 1.7;
  }

  .nosh-story-card__text {
    font-size: 1rem;
    line-height: 1.6;
  }

  .nosh-story__founders-intro {
    font-size: 1rem;
    line-height: 1.7;
  }

  .nosh-story-founder-card__bio {
    font-size: 1rem;
    line-height: 1.65;
  }
}

/* --- Reduce empty vertical space on mobile: smaller placeholder/
   media footprint, tighter section rhythm --- */
@media screen and (max-width: 749px) {
  .nosh-story__hero-media,
  .nosh-story__media-placeholder--hero {
    aspect-ratio: 4 / 3;
  }

  .nosh-story__band-media img,
  .nosh-story__media-placeholder:not(.nosh-story__media-placeholder--hero):not(.nosh-story__media-placeholder--founder) {
    aspect-ratio: 16 / 10;
  }

  .nosh-story__hero {
    padding-bottom: 0.25rem;
  }

  .nosh-story__intro,
  .nosh-story__values,
  .nosh-story__band,
  .nosh-story__founders,
  .nosh-story__cta {
    margin-top: 1.75rem;
  }
}

/* ================================================================
   Founder CTA — compact pill button with arrow cue.
   Fully custom (no longer inherits Dawn's .button / .button--primary
   base styles) so it has independent, isolated control and cannot
   affect the global Add to Cart / product-form buttons.
   ================================================================ */
.nosh-story-founder-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.75rem 1.35rem;
  margin-top: 0.6rem;
  border-radius: 999px;
  background-color: #4770DB;
  color: #FFFFFF !important;
  font-family: var(--nosh-font-body);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition:
    background-color var(--nosh-transition),
    transform var(--nosh-transition),
    box-shadow var(--nosh-transition);
}

.nosh-story-founder-card__button-arrow {
  display: inline-block;
  line-height: 1;
  transition: transform var(--nosh-transition);
}

@media (hover: hover) {
  .nosh-story-founder-card__button:hover {
    background-color: #0E1B4D;
    transform: translateY(-2px);
    box-shadow: var(--nosh-blue-glow);
  }
  .nosh-story-founder-card__button:hover .nosh-story-founder-card__button-arrow {
    transform: translateX(3px);
  }
}

.nosh-story-founder-card__button:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.1s;
}

/* Touch devices — no stuck hover, keep tap target thumb-friendly */
@media screen and (max-width: 749px) {
  .nosh-story-founder-card__button {
    padding: 0.7rem 1.25rem;
    font-size: 0.9rem;
    transition: background-color var(--nosh-transition) !important;
    transform: none !important;
  }
  .nosh-story-founder-card__button:active {
    background-color: #0E1B4D;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nosh-story-founder-card__button,
  .nosh-story-founder-card__button-arrow {
    transition: none !important;
    transform: none !important;
  }
}

/* ================================================================
   Bottom CTA — refined to feel consistent with the founder pill
   buttons but slightly larger, since it closes the page. Still
   uses the site's global .button--primary / .button--secondary
   classes for consistent brand-blue/navy hover, just tightened.
   ================================================================ */
.nosh-story__cta-button {
  border-radius: 999px !important;
  padding: 0.95rem 1.75rem !important;
  font-size: 0.95rem;
  min-width: 0;
  width: fit-content;
}

@media screen and (max-width: 479px) {
  .nosh-story__cta-button {
    width: 100%;
  }
}

/* ================================================================
   § 25. HOMEPAGE — mobile-first premium upgrade (v7.7)
   New hero + trust strip sections, a shared Nosh button system,
   entrance/reveal animations, and section polish. Locked 3-colour
   system only. All motion is transform/opacity, reduced-motion
   safe, and hover effects are neutralised on touch so nothing gets
   stuck. 85%+ of Nosh traffic converts on mobile, so every rule
   below is authored mobile-first and enhanced up at breakpoints.
   ================================================================ */

/* --- Shared Nosh button system (hero CTAs; consistent radius,
   padding and font across the homepage) --- */
.nosh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--nosh-font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  padding: 0.95rem 1.6rem;
  border-radius: 0.65rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--nosh-transition),
    border-color var(--nosh-transition),
    color var(--nosh-transition),
    transform var(--nosh-transition),
    box-shadow var(--nosh-transition);
}

.nosh-btn--primary {
  background-color: #4770DB;
  color: #FFFFFF;
  border-color: #4770DB;
}

.nosh-btn--secondary {
  background-color: transparent;
  color: #0E1B4D;
  border-color: #0E1B4D;
}

@media (hover: hover) {
  .nosh-btn--primary:hover {
    background-color: #0E1B4D;
    border-color: #0E1B4D;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: var(--nosh-lift-shadow), var(--nosh-blue-glow);
  }
  .nosh-btn--secondary:hover {
    background-color: #4770DB;
    border-color: #4770DB;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: var(--nosh-blue-glow);
  }
}

.nosh-btn:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.1s;
}

/* ================================================================
   HERO
   ================================================================ */
.nosh-hero {
  background-color: #FFFFFF;
  overflow: hidden;
}

.nosh-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: center;
}

/* Text first on mobile so the CTA is reachable early */
.nosh-hero__text {
  order: 1;
  text-align: center;
}

.nosh-hero__media-wrap {
  order: 2;
}

.nosh-hero__eyebrow {
  color: #4770DB;
  font-family: var(--nosh-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 0.85rem;
}

.nosh-hero__heading {
  color: #0E1B4D;
  font-family: var(--nosh-font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 7.2vw, 3.1rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 0;
}

.nosh-hero__heading::after {
  content: '';
  display: block;
  width: 2.8rem;
  height: 3px;
  background: #2FA5FA;
  border-radius: 2px;
  margin: 1rem auto 0;
}

.nosh-hero__subheading {
  color: rgba(14, 27, 77, 0.74);
  font-family: var(--nosh-font-body);
  font-size: 1.08rem;
  line-height: 1.6;
  margin: 1.1rem auto 0;
  max-width: 34rem;
}

.nosh-hero__ctas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.nosh-hero__cta {
  width: 100%;
}

/* Hero media — fixed ratio so there is never a giant empty space */
.nosh-hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: var(--nosh-lift-shadow);
  border: 2px solid rgba(14, 27, 77, 0.08);
}

.nosh-hero__media img,
.nosh-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--nosh-transition-slow);
}

/* Branded placeholder (reuses Our Story shelf visual) — hero ratio */
.nosh-hero__media-placeholder {
  aspect-ratio: 4 / 3;
  border-radius: 1.25rem;
}

@media (hover: hover) {
  .nosh-hero__media-wrap:hover .nosh-hero__media img,
  .nosh-hero__media-wrap:hover .nosh-hero__media video {
    transform: scale(1.05);
  }
}

/* Desktop: two columns, text left, media right, larger media */
@media screen and (min-width: 990px) {
  .nosh-hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3.5rem;
  }
  .nosh-hero__text {
    order: 1;
    text-align: left;
  }
  .nosh-hero__media-wrap {
    order: 2;
  }
  .nosh-hero__heading::after {
    margin-left: 0;
    margin-right: 0;
  }
  .nosh-hero__subheading {
    margin-left: 0;
    margin-right: 0;
  }
  .nosh-hero__ctas {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .nosh-hero__cta {
    width: auto;
    min-width: 200px;
  }
  .nosh-hero__media,
  .nosh-hero__media-placeholder {
    aspect-ratio: 5 / 4;
  }
}

/* Hero entrance animation (load-time fade-up, staggered) */
@media (prefers-reduced-motion: no-preference) {
  .nosh-hero__eyebrow,
  .nosh-hero__heading,
  .nosh-hero__subheading,
  .nosh-hero__ctas,
  .nosh-hero__media-wrap {
    animation: noshStoryFadeUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .nosh-hero__heading      { animation-delay: 0.06s; }
  .nosh-hero__subheading   { animation-delay: 0.12s; }
  .nosh-hero__ctas         { animation-delay: 0.18s; }
  .nosh-hero__media-wrap   { animation-delay: 0.10s; }

  .nosh-hero__heading::after {
    animation: noshStoryUnderline 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nosh-hero__eyebrow,
  .nosh-hero__heading,
  .nosh-hero__subheading,
  .nosh-hero__ctas,
  .nosh-hero__media-wrap {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .nosh-hero__heading::after {
    animation: none !important;
    width: 2.8rem !important;
  }
  .nosh-hero__media img,
  .nosh-hero__media video {
    transition: none !important;
    transform: none !important;
  }
}

/* Touch — neutralise media hover zoom */
@media screen and (max-width: 749px) {
  .nosh-hero__media img,
  .nosh-hero__media video {
    transition: none !important;
  }
  .nosh-btn:hover {
    transform: none !important;
  }
}

/* ================================================================
   TRUST STRIP
   ================================================================ */
.nosh-trust {
  background-color: #FFFFFF;
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
}

.nosh-trust__heading {
  text-align: center;
  color: rgba(14, 27, 77, 0.6);
  font-family: var(--nosh-font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.nosh-trust__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem 0.75rem;
}

.nosh-trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.nosh-trust__icon {
  display: inline-flex;
  width: 1.9rem;
  height: 1.9rem;
  color: #2FA5FA;
}

.nosh-trust__icon svg {
  width: 100%;
  height: 100%;
}

.nosh-trust__label {
  color: #0E1B4D;
  font-family: var(--nosh-font-body);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.3;
}

@media screen and (min-width: 750px) {
  .nosh-trust__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
  .nosh-trust__item {
    flex-direction: row;
    justify-content: center;
    gap: 0.7rem;
  }
  .nosh-trust__icon {
    width: 1.7rem;
    height: 1.7rem;
    flex: 0 0 auto;
  }
  .nosh-trust__label {
    font-size: 0.98rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .nosh-trust__item {
    animation: noshStoryFadeUp 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .nosh-trust__item:nth-child(2) { animation-delay: 0.07s; }
  .nosh-trust__item:nth-child(3) { animation-delay: 0.14s; }
  .nosh-trust__item:nth-child(4) { animation-delay: 0.21s; }
}

@media (prefers-reduced-motion: reduce) {
  .nosh-trust__item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ================================================================
   HOMEPAGE SECTION POLISH (Dawn sections)
   ================================================================ */

/* "Founder's Favourites" rich-text heading — editorial Merriweather
   navy with a centred brand-blue underline, matching the rest of
   the Nosh heading family. */
.rich-text__heading {
  color: #0E1B4D;
  font-family: var(--nosh-font-heading);
  font-weight: 700;
}

.rich-text__heading::after {
  content: '';
  display: block;
  width: 2.8rem;
  height: 3px;
  background: #4770DB;
  border-radius: 2px;
  margin: 0.7rem auto 0;
}

/* Collection-list ("Shop by craving" / "Shop the Nosh shelf") — a
   touch more tap comfort + premium feel on mobile. Card visuals and
   hover lift are already handled in § 9. */
@media screen and (max-width: 749px) {
  .collection-list .card__heading,
  .collection-list .card__heading a {
    font-size: 1.05rem;
    line-height: 1.3;
  }
}

/* Slideshow (parked/disabled on the homepage, but kept premium in
   case it is re-enabled): calmer mobile height + brand dots. */
@media screen and (max-width: 749px) {
  .slideshow.banner--adapt,
  .slideshow.banner--adapt .slideshow__slide,
  .slideshow.banner--adapt .banner__media {
    max-height: 68vh;
  }
}

.slideshow__controls .slider-counter__link.slick-active,
.slideshow .slideshow__control-wrapper .slider-counter--dots .dot--active {
  color: #4770DB;
}

/* Note: hero and trust-strip reveals are handled at the child level
   above (staggered fade-up on their inner elements), so the section
   wrappers themselves are intentionally NOT animated — that would
   compound transforms. Dawn card grids keep their existing § 7/§ 9
   hover polish and are deliberately left without load animations to
   avoid any flash on other templates that share those classes. */

/* ================================================================
   § 26. HEADER DROPDOWN + DESKTOP-EDITORIAL HERO (v7.8)
   Task 11: the Founder's Favourites (and every header) dropdown was
   reading as a heavy dark-navy block. This lightens all header
   submenus to a premium white card with a soft-blue border, navy
   text and a Nosh-logo-blue hover accent — accessible focus states
   included. Also adds a soft Nosh-blue editorial panel behind the
   desktop hero media so the hero doesn't read as a stretched mobile
   layout. Header layout/positioning is untouched; colour + polish
   only. Locked to the Nosh palette.
   ================================================================ */

/* --- Desktop dropdown / submenu popovers --- */
.header__submenu.list-menu--disclosure,
.header-wrapper .header__submenu {
  background-color: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 14px 34px rgba(14, 27, 77, 0.14) !important;
  padding: 0.4rem !important;
  margin-top: 0.4rem;
}

.header-wrapper .header__submenu .header__menu-item {
  color: #0E1B4D !important;
  border-radius: 0.45rem;
  padding: 0.55rem 0.85rem;
  transition:
    background-color var(--nosh-transition),
    color var(--nosh-transition);
}

/* No sliding underline inside the dropdown — use a clean pill hover */
.header-wrapper .header__submenu .header__menu-item::after {
  display: none !important;
}

@media (hover: hover) {
  .header-wrapper .header__submenu .header__menu-item:hover {
    background-color: #F3F4F6 !important;
    color: #4770DB !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: #4770DB;
  }
}

.header-wrapper .header__submenu .header__menu-item:focus-visible {
  outline: 2px solid #4770DB;
  outline-offset: 2px;
  background-color: #F3F4F6 !important;
  color: #0E1B4D !important;
}

/* --- Mega-menu variant (if a menu uses the mega layout) --- */
.header-wrapper .mega-menu__content {
  background-color: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 14px 34px rgba(14, 27, 77, 0.14) !important;
}

.header-wrapper .mega-menu__link {
  color: #0E1B4D !important;
  transition: color var(--nosh-transition);
}

@media (hover: hover) {
  .header-wrapper .mega-menu__link:hover {
    color: #4770DB !important;
  }
}

/* --- Mobile menu drawer: keep submenu links readable (navy on
   white) with a logo-blue active/hover accent --- */
.menu-drawer__menu-item,
.menu-drawer__submenu .menu-drawer__menu-item {
  color: #0E1B4D;
}

@media (hover: hover) {
  .menu-drawer__menu-item:hover {
    color: #4770DB;
    background-color: #F3F4F6;
  }
}

.menu-drawer__menu-item:focus-visible {
  outline: 2px solid #4770DB;
  outline-offset: -2px;
}

/* --- Rich-text ("Founder's Favourites") underline → logo blue --- */
.rich-text__heading::after {
  background: #2FA5FA;
}

/* --- Desktop-editorial hero: a soft Nosh-blue panel tucked behind
   the hero media adds depth and reduces flat white on large
   screens. Mobile stays clean/flat. --- */
.nosh-hero__media-wrap {
  position: relative;
}

@media screen and (min-width: 990px) {
  .nosh-hero__media-wrap::before {
    content: '';
    position: absolute;
    right: -16px;
    bottom: -16px;
    width: 55%;
    height: 68%;
    background: #F7F8FA;
    border: 1px solid #E5E7EB;
    border-radius: 1.5rem;
    z-index: 0;
    pointer-events: none;
  }
  .nosh-hero__media {
    position: relative;
    z-index: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-wrapper .header__submenu .header__menu-item,
  .header-wrapper .mega-menu__link,
  .menu-drawer__menu-item {
    transition: none !important;
  }
}

/* ================================================================
   § 28. PASS C1 — Premium sale state
   One restrained saving cue beside Dawn's sale price. The Liquid
   source suppresses duplicate generic Sale badges.
   ================================================================ */
.nosh-sale-state {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-inline-start: 0.65rem;
  padding: 0.28rem 0.58rem;
  border: 0.1rem solid rgba(71, 112, 219, 0.36);
  border-radius: 999rem;
  color: var(--nosh-blue, #4770db);
  background: #ffffff;
  font-family: var(--nosh-font-body, Inter, sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  vertical-align: middle;
}

.card-information .nosh-sale-state {
  margin-top: 0.3rem;
  margin-inline-start: 0;
}

/* NOSH CUSTOM END */