/* ============================================================
   VIC'S KITCHEN — MASTER STYLESHEET v4
   Palette: Spicy Carnation
   Font: Instrument Sans
   ============================================================ */

/* ------------------------------------------------------------
   1. CUSTOM PROPERTIES
   ------------------------------------------------------------ */
:root {
  /* ── Italian Summer palette ────────────────────────────── */
  --color-cream:            #fffcf9;   /* near-white linen        */
  --color-cream-light:      #fdf3ea;   /* very light sand         */
  --color-cream-dark:       #f5e6d4;   /* lighter card hover      */
  --color-cream-mid:        #ead4bb;   /* lighter dividers        */

  --color-dark:             #49261D;   /* espresso                */
  --color-dark-soft:        #683629;   /* lifted espresso         */
  --color-darkchoc:         #2a100a;   /* near-black              */

  --color-terracotta:       #e17474;   /* rose — main accent      */
  --color-terracotta-light: #ed9090;   /* rose lighter            */
  --color-peach:            #f3b2b2;   /* soft rose peach         */
  --color-blush:            #f0b8b8;   /* blush light             */
  --color-blush-light:      #fdf0f0;   /* blush very light        */
  --color-blush-dark:       #c85a5a;   /* blush dark              */
  --color-chocolate:        #49261D;   /* espresso alias          */
  --color-lime:             #ced245;   /* lime fresh accent       */
  --color-sun:              #FAC450;   /* sun yellow              */
  --color-sand:             #fdf0e4;   /* lighter sand            */

  /* border */
  --color-border:           #eedccc;
  --color-border-light:     #f8eedf;

  /* ── Accessible text ────────────────────────────────────── */
  --color-text-primary:   #49261D;   /* espresso on cream       */
  --color-text-secondary: #6b3a28;   /* medium brown            */
  --color-text-muted:     #8c5540;   /* muted warm              */
  --color-text-inverse:   #fffbfa;
  --color-text-darkbg:    #d8c5b7;


  /* ── Semantic aliases ───────────────────────────────────── */
  --color-accent:         var(--color-terracotta);
  --color-accent-hover:   var(--color-terracotta-light);

  /* ── Tag (reverted — plain border, no pill) ─────────────── */
  --color-tag-bg:     transparent;
  --color-tag-border: var(--color-border);
  --color-tag-text:   var(--color-text-muted);

  /* ── Fonts ──────────────────────────────────────────────── */
  --font-display: 'Playfair', Georgia, serif;
  --font-body:    'Instrument Sans', 'Trebuchet MS', sans-serif;

  /* ── Type scale (rem, base 16px) ────────────────────────── */
  --text-xs:   0.6875rem;                                       /* 11 */
  --text-sm:   clamp(0.8125rem, 0.793rem + 0.1vw, 0.875rem);   /* 13–14 */
  --text-base: 1rem;                                            /* 16 */
  --text-md:   clamp(1rem, 0.929rem + 0.24vw, 1.125rem);       /* 16–18 */
  --text-lg:   clamp(1.125rem, 1.018rem + 0.36vw, 1.3125rem);  /* 18–21 */
  --text-xl:   clamp(1.25rem, 1.093rem + 0.52vw, 1.525rem);    /* 20–24 */
  --text-2xl:  clamp(1.45rem, 1.214rem + 0.95vw, 2rem);         /* 24–32 */
  --text-3xl:  clamp(2rem, 1.644rem + 1.1891vw, 2.625rem);     /* 32–42 */
  --text-4xl:  clamp(2rem, 1.729rem + 1.9vw, 3.5rem);        /* 40–56 */
  --text-5xl:  clamp(3.5rem, 2.643rem + 2.86vw, 5rem);         /* 56–80 */
  --text-hero: clamp(3.5rem, 8vw, 5rem);

  /* ── Spacing ────────────────────────────────────────────── */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;  --space-4: 1rem;
  --space-5:  clamp(1rem,    0.857rem + 0.48vw, 1.25rem);   /* 16–20 */
  --space-6:  clamp(1.125rem,0.911rem + 0.71vw, 1.5rem);    /* 18–24 */
  --space-8:  clamp(1.5rem,  1.214rem + 0.95vw, 2rem);      /* 24–32 */
  --space-10: clamp(1.75rem, 1.321rem + 1.43vw, 2.5rem);    /* 28–40 */
  --space-12: clamp(2rem,    1.429rem + 1.9vw,  3rem);      /* 32–48 */
  --space-16: clamp(2.5rem,  1.643rem + 2.86vw, 4rem);      /* 40–64 */
  --space-20: clamp(3rem,    1.857rem + 3.81vw, 5rem);      /* 48–80 */
  --space-24: clamp(3.5rem,  2.071rem + 4.76vw, 6rem);      /* 56–96 */

  /* ── Layout ─────────────────────────────────────────────── */
  --max-width:        1200px;
  --max-width-narrow: 925px;
  --max-width-recipe: 1080px;
  --max-width-wide: 1450px;
  --page-padding:     clamp(1.55rem, 5vw, 4rem);

  /* ── Shape — SUBTLE rounded, 2px everywhere ─────────────── */
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 4px;
  --radius-5xl: 30px;

  /* ── Motion ─────────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 380ms ease;

  /* ── Shadow ─────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(61,18,8,.07);
  --shadow-md: 0 4px 16px rgba(61,18,8,.09);
  --shadow-lg: 0 8px 32px rgba(61,18,8,.12);

  /* ── Section colour themes ─────────────────────────── */
    .section--cream    { background: var(--color-cream); }
    .section--sand     { background: var(--color-sand); }
    .section--blush    { background: var(--color-blush-light); }
    .section--sun      { background: #fffbf0; }
    .section--dark     { background: var(--color-dark); }
    .section--white    { background: white; }
    .section--checkered {
        background-image: repeating-linear-gradient(45deg, var(--color-blush-light) 25%, transparent 25%, transparent 75%, var(--color-blush-light) 75%, var(--color-blush-light)), repeating-linear-gradient(45deg, var(--color-blush-light) 25%, var(--color-cream) 25%, var(--color-cream) 75%, var(--color-blush-light) 75%, var(--color-blush-light));
        background-position: 0 0, 10px 10px;
        background-size: 20px 20px;
        border-block: 1px solid var(--color-blush-light);
    }
}

/* ------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--color-cream);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;          /* one step thicker than 300 */
  line-height: 1.7;
  min-height: 100vh;
}

/* Subtle grain */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 999; opacity: 0.6;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul, ol { list-style: none; }

/* ------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------ */
h1,h2,h3,h4,h5 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.1;
  color: var(--color-text-primary);
}

.eyebrow {
  font-size: var(--text-xs);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-family: var(--font-body);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.section-label {
  font-size: var(--text-xs);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-weight: 500;
  display: flex; align-items: center; gap: var(--space-4);
  margin-bottom: var(--space-10);
}
.section-label::after { content: ''; flex:1; height:1px; background:var(--color-border); }

/* ------------------------------------------------------------
   4. LAYOUT
   ------------------------------------------------------------ */
.container { max-width:var(--max-width); margin:0 auto; padding-inline:var(--page-padding); }
.container--narrow { max-width:var(--max-width-narrow); margin:0 auto; padding-inline:var(--page-padding); }

/* ------------------------------------------------------------
   5. SITE NAV
   ------------------------------------------------------------ */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-dark);
  padding: var(--space-2) var(--page-padding);
  display: flex; align-items: center;
  justify-content: space-between; gap: var(--space-6);
}

.site-nav__logo {
  font-family: var(--font-display);
  font-size: var(--text-xl); font-weight: 300;
  color: var(--color-text-inverse);
  white-space: nowrap;
}
.site-nav__logo em { font-style: italic; color: var(--color-peach); }

.site-nav__links { 
  display: flex; 
  align-items: center; gap: var(--space-8); }

/* ALL nav links: same colour, same opacity */
.site-nav__link {
  font-size: var(--text-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-blush-light);   /* consistent for all */
  transition: all var(--transition-fast);
  font-weight: 500;
  position: relative;
}

.site-nav__link:hover { 
  color: var(--color-text-inverse); 
  transform: translateY(-3px);
}
.site-nav__link:hover::after { transform: scaleX(1); }
/* Active: underline indicator, NOT brighter text */
.site-nav__link.active { color: rgba(255, 255, 255, 0.845); }
.site-nav__link.active::after { transform: scaleX(1); }

.site-nav__actions { display: flex; align-items: center; gap: var(--space-3); }

.lang-toggle {
  display: flex; background: rgba(255,255,255,.08);
  border-radius: var(--radius-lg); padding: var(--space-1); gap: var(--space-1);
}
.lang-btn {
  font-size: var(--text-xs); letter-spacing: .1em; font-weight: 500;
  padding: var(--space-1) var(--space-3);
  border: none; background: transparent;
  color: rgba(233, 218, 209, 0.792); border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}
.lang-btn.active { background: var(--color-terracotta); color: white; }

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 2.5rem; height: 2.5rem;
  background: transparent;
  border: 1px solid var(--color-blush-light);
  border-radius: var(--radius-sm);
  padding: var(--space-2); transition: border-color var(--transition-fast);
}
.nav-hamburger:hover { border-color: rgba(255,255,255,.5); }
.hamburger-bar { display: block; width: 18px; height: 2px; background: var(--color-text-inverse); border-radius: 1px; }

@media (max-width: 680px) {
  .nav-hamburger { display: flex; }
  .site-nav__links { display: none; }
}

/* ------------------------------------------------------------
   6. MOBILE MENU
   ------------------------------------------------------------ */
.mobile-menu { position:fixed; inset:0; z-index:200; display:flex; pointer-events:none; visibility:hidden; }
.mobile-menu.open { pointer-events:auto; visibility:visible; }
.mobile-menu__backdrop { position:absolute; inset:0; background:rgba(61,18,8,.6); opacity:0; transition:opacity var(--transition-base); backdrop-filter:blur(2px); }
.mobile-menu.open .mobile-menu__backdrop { opacity:1; }
.mobile-menu__panel {
  position:absolute; top:0; right:0;
  width:min(320px,85vw); height:100%;
  background:var(--color-dark);
  padding:var(--space-10) var(--space-8);
  transform:translateX(100%); transition:transform var(--transition-slow);
  display:flex; flex-direction:column; gap:var(--space-8); overflow-y:auto;
}
.mobile-menu.open .mobile-menu__panel { transform:translateX(0); }
.mobile-menu__close {
  position:absolute; top:var(--space-5); right:var(--space-5);
  width:2rem; height:2rem;
  background: rgba(255,255,255,.1); border:none;
  color:var(--color-text-inverse); border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--transition-fast);
}
.mobile-menu__close:hover { background:var(--color-terracotta); }
.mobile-menu__nav { display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-8); }
.mobile-menu__link {
  font-family:var(--font-display); font-size:var(--text-3xl); font-weight:300;
  color: rgba(250,240,234,.7); padding:var(--space-3) 0;
  border-bottom:1px solid var(--color-blush-light); transition:color var(--transition-fast);
}
.mobile-menu__link:hover, .mobile-menu__link.active { color:var(--color-text-inverse); }
.mobile-menu__lang { display:flex; gap:var(--space-2); margin-top:auto; }

/* ------------------------------------------------------------
   7. PAGE HEADER
   ------------------------------------------------------------ */
.page-header {
  padding: var(--space-20) var(--page-padding) var(--space-16);
  border-bottom: 1px solid var(--color-border);
  position: relative; overflow: hidden;
  background: var(--color-dark);
}
.page-header::before {
  content: '';
  position: absolute; top: -80px; right: -80px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, var(--color-peach-18) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
}
.page-header--split {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-10); max-width: var(--max-width); margin: 0 auto;
}
.page-header__title { 
  font-size: var(--text-hero);
  line-height: 1.1; 
  margin-top: 10px;
}
.page-header__title em { font-style: italic; color: var(--color-terracotta-light); }
.page-header__desc { max-width:330px; text-align:right; font-size:var(--text-md); color:rgba(255,252,249,.65); line-height:1.7; }

/* ------------------------------------------------------------
   8. TAGS — plain, square, uppercase
   ------------------------------------------------------------ */
.tag {
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);  /* 2px */
  font-weight: 500;
  font-family: var(--font-body);
  display: inline-block;
}
/* Colour tints — all from palette */
.tag--peach { border-color: var(--color-peach); color: var(--color-chocolate); }
.tag--blush { border-color: var(--color-blush); color: var(--color-chocolate); }
.tag--terra { border-color: var(--color-terracotta); color: var(--color-terracotta); }
.tag--choc  { border-color: var(--color-chocolate); color: var(--color-chocolate); }

/* ------------------------------------------------------------
   9. RECIPE GRID + CARDS
   ------------------------------------------------------------ */
.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(320px,1fr));
  gap: 15px; 
  background: none; 
}
.recipe-card {
  background: var(--color-cream); display: block; text-decoration: none; color: inherit;
  transition: background var(--transition-base); position: relative; overflow: hidden;
  border: 1px solid var(--color-border);
}
.recipe-card:hover { background: var(--color-cream-light); box-shadow:0 6px 24px rgba(73, 38, 29, 0.065);transform:translateY(-3px);}
.recipe-card::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--color-blush-dark), var(--color-blush));
  transform: scaleX(0); transform-origin: left; transition: transform var(--transition-base);
}
.recipe-card:hover::after { transform: scaleX(1); }
.recipe-card__image-wrap { overflow: hidden; background: var(--color-cream-dark); }
.recipe-card__image { width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform var(--transition-slow); }
.recipe-card:hover .recipe-card__image { transform:scale(1.04); }
.recipe-card__image-placeholder {
  width:100%; aspect-ratio:4/3;
  background:linear-gradient(135deg, var(--color-blush-light) 0%, var(--color-cream-mid) 100%);
  display:flex; align-items:center; justify-content:center;
  color:var(--color-border); font-size:var(--text-3xl);
}
.recipe-card__body { padding: var(--space-6); }
.recipe-card__cuisine {
  font-size: var(--text-xs); letter-spacing: .25em; text-transform: uppercase;
  color: var(--color-terracotta-light); font-weight: 600; margin-bottom: var(--space-3);
}
.recipe-card__title { font-size: var(--text-2xl); line-height: 1.15; margin-bottom: var(--space-3); }
.recipe-card__desc { font-size: var(--text-base); color: var(--color-text-secondary); line-height: 1.7; margin-bottom: var(--space-6); }
.recipe-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.recipe-card[data-hidden="true"] { display: none; }
.recipe-card--soon {
  display: flex; align-items: center; justify-content: center;
  min-height: 280px; color: var(--color-cream-dark);
  font-size: var(--text-xs); letter-spacing: .3em; text-transform: uppercase;
}

.recipe-grid__empty {
  grid-column: 1 / -1;
  padding: var(--space-12);
  background: var(--color-cream-light);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
}

.browse-section {
  padding: var(--space-14) var(--page-padding) var(--space-12);
}

.browse-section__head {
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-6); margin-bottom:var(--space-6); flex-wrap:wrap;
}

.browse-section__title {
  font-size: clamp(2rem, 3vw, 2.75rem);
  margin: 0 0 var(--space-2) 0;
}

.browse-section__subtitle {
  color: var(--color-text-secondary);
  max-width: 60ch;
  margin-top: var(--space-3);
  line-height: 1.8;
}

.browse-panel-grid {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4);
}

@media(max-width:840px){ .browse-panel-grid { grid-template-columns:1fr; } }

.browse-panel {
  padding:var(--space-6); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-cream-light);
}

.browse-panel h3 { font-size:var(--text-lg); margin-bottom:var(--space-4); }

.browse-chip-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:var(--space-3); }

.browse-chip {
  display:inline-flex; align-items:center; justify-content:center; padding:var(--space-3) var(--space-4); border:1px solid var(--color-border); background:white; color:var(--color-dark); border-radius:999px; text-decoration:none; font-size:var(--text-sm); transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.browse-chip:hover { transform:translateY(-1px); border-color:var(--color-terracotta); box-shadow:0 10px 24px rgba(0,0,0,.08); }

.browse-panel--selected {
  background: var(--color-cream-light);
  border: 1px solid var(--color-border);
  padding: var(--space-6);
  border-radius: var(--radius-md);
}

.browse-panel--selected p {
  margin: 0;
  color: var(--color-text-secondary);
}

.browse-panel--selected strong {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--text-lg);
}

.filter-meta {
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-3); margin-bottom:var(--space-4);
}

.filter-badge {
  display:inline-flex; align-items:center; padding:.65rem 1rem; border-radius:999px;
  border:1px solid var(--color-border); background:white; color:var(--color-text-secondary);
  font-size:var(--text-sm); font-weight:600;
}

.filter-count {
  color: var(--color-dark); font-size: var(--text-sm); font-weight:600;
}

/* ------------------------------------------------------------
   10. FILTER BAR
   ------------------------------------------------------------ */
.filter-bar { padding: var(--space-8) 0; border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-12); }
.filter-bar__inner { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.filter-group { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.filter-group__label { font-size: var(--text-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 500; margin-right: var(--space-2); }
.filter-btn {
  font-size: var(--text-sm); padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border); background: transparent;
  color: var(--color-text-secondary); border-radius: var(--radius-sm);
  transition: all var(--transition-fast); font-family: var(--font-body); font-weight: 400;
}
.filter-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.filter-btn.active { background: var(--color-dark); border-color: var(--color-dark); color: var(--color-text-inverse); }
.filter-divider { width: 1px; height: 1.5rem; background: var(--color-border); }

/* ------------------------------------------------------------
   HOME PAGE HERO
  ------------------------------------------------------------ */
 /* ── Hero: warm sand background, espresso text ──────── */
    .home-hero {
      background: var(--color-sand);
      padding: var(--space-20) var(--page-padding) var(--space-16);
      border-bottom: 1px solid var(--color-border);
      position: relative; overflow: hidden;
    }
    
    .home-hero__inner {
      max-width: var(--max-width); margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1fr;
      align-items: end; gap: var(--space-10);
    }
    @media(max-width:700px){ .home-hero__inner { grid-template-columns: 1fr; } }
    .home-hero__title {
      font-family: var(--font-display);
      font-size: clamp(3rem,7vw,5.5rem);
      font-weight: 300; line-height: .92;
      color: var(--color-dark);
    }
    .home-hero__title em { font-style: italic; color: var(--color-terracotta); }
    .home-hero__desc {
      font-size: var(--text-md);
      color: var(--color-text-secondary);
      line-height: 1.75; max-width: 320px;
      text-align: right;
      margin-right: 0;
      margin-left: auto;
    }
    @media(max-width:700px){ .home-hero__desc { text-align:left; max-width:100%; } }

    /* ── Recipes section: crisp white ───────────────────── */
    .recipes-section {
      background: white;
      padding-block: var(--space-16);
      border-bottom: 1px solid var(--color-border-light);
    }

    .browse-section {
      margin-bottom: var(--space-12);
    }
    .browse-section__head {
      display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-6); margin-bottom:var(--space-6);
      flex-wrap:wrap;
    }
    .browse-section__title { font-size:clamp(2rem,3vw,2.75rem); margin:0; }
    .browse-panel-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); }
    @media(max-width:840px){ .browse-panel-grid { grid-template-columns:1fr; } }
    .browse-panel { padding:var(--space-6); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-cream-light); }
    .browse-panel h3 { font-size:var(--text-lg); margin-bottom:var(--space-4); }
    .browse-chip-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:var(--space-3); }
    .browse-chip { display:inline-flex; align-items:center; justify-content:center; padding:var(--space-3) var(--space-4); border:1px solid var(--color-border); background:white; color:var(--color-dark); border-radius:999px; text-decoration:none; font-size:var(--text-sm); transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
    .browse-chip:hover { transform:translateY(-1px); border-color:var(--color-terracotta); box-shadow:0 10px 24px rgba(0,0,0,.08); }

/* ------------------------------------------------------------
   CAKE BANNER
   ------------------------------------------------------------ */    
   .cake-banner {
      display: grid; grid-template-columns: .65fr 1fr;
      min-height: 380px; 
      max-height: clamp(25rem, 9.3207rem + 35.6718vw, 43.75rem);
    }
    @media(max-width:680px){ .cake-banner { grid-template-columns: 1fr; max-height: none;} }
    .cake-banner__image {
      position: relative; overflow: hidden; min-height: 260px;

      @media (max-width: 900px) {
       max-height: 500px;
      }

      @media (max-width: 600px) {
       max-height: 320px;
      }
    }
    .cake-banner__image img {
      width:100%; height:100%; object-fit:cover; opacity:1; display:block;
    }
    .cake-banner__image-placeholder {
      width:100%; height:100%; min-height:260px;
      display:flex; align-items:center; justify-content:center; font-size:5.5rem;
      background: linear-gradient(135deg,rgba(243,178,178,.25) 0%,rgba(73,38,29,.55) 100%);
    }
    .cake-banner__content {
      padding: var(--space-12) var(--space-12);
      display: flex; flex-direction:column; justify-content:center; gap:var(--space-8);
      
      @media (min-width: 1100px) {
        padding: var(--space-24);
      }
    }
    .cake-banner__eyebrow {
      font-size:var(--text-xs); letter-spacing:.28em; text-transform:uppercase;
      font-weight:600; color:var(--color-terracotta-light,#FAC450);
    }
    .cake-banner__title {
      font-family:var(--font-display); font-size:clamp(1.9rem,3.5vw,3rem);
      font-weight:300; color:var(--color-dark); line-height:1.1;
      max-width: 20ch;
    }
    .cake-banner__title em { font-style:italic; color:var(--color-terracotta,#f3b2b2); }
    .cake-banner__desc {
      font-size:var(--text-md); color:var(--color-dark);
      line-height:1.75; max-width:480px;
    }
    .cake-banner__local {
      font-size:var(--text-xs); font-weight:600; letter-spacing:.1em;
      text-transform:uppercase; color:rgba(255,252,249,.38);
    }
    .cake-banner__actions { display:flex; gap:var(--space-3); flex-wrap:wrap; }
    .btn-cake {
      display:inline-flex; align-items:center; gap:var(--space-2);
      padding:.65rem 1.4rem;
      background:var(--color-dark-soft); color:var(--color-cream-light);
      font-family:var(--font-body); font-size:var(--text-sm);
      font-weight:700; letter-spacing:.1em; text-transform:uppercase;
      border-radius:var(--radius-sm); text-decoration:none;
      transition:background 150ms, transform 150ms; white-space:nowrap;
    }
    .btn-cake:hover { background:var(--color-terracotta-light); transform:translateY(-1px); }
    .btn-cake--wa {
      background:rgba(105, 147, 84, 0.86); border:1.5px solid rgba(74, 168, 51, 0.558);
      color:rgba(255, 252, 249, 0.86);
    }
    .btn-cake--wa:hover { background:rgba(39, 175, 91, 0.811); border-color:#29c261; color:white; }
  
/* ------------------------------------------------------------
   11. ABOUT SECTION
   ------------------------------------------------------------ */
.about-section {
  border-top: 1px solid var(--color-border);
  padding: var(--space-16) var(--page-padding);
  position: relative; overflow: hidden;
  opacity: 1;
}
.about-section__inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.about-section__image-wrap { position: relative; }
.about-section__image { transform: scale(0.9); width: 100%; aspect-ratio: 8/9; object-fit: cover; border-radius: var(--radius-5xl); }
.about-section__image-placeholder { width:100%; aspect-ratio:3/4; background:var(--color-cream-dark); display:flex; align-items:center; justify-content:center; color:var(--color-text-muted); font-size:var(--text-sm); letter-spacing:.2em; text-transform:uppercase; border:2px dashed var(--color-border); border-radius:var(--radius-sm); }
.about-section__accent { position:absolute; bottom:-1rem; right:-1rem; width:60%; height:60%; background:var(--color-accent-summer); z-index:-1; opacity:.35; border-radius: var(--radius-sm); }
.about-section__title { font-size:var(--text-4xl); margin-bottom:var(--space-6); line-height:1.05; }
.about-section__title em { font-style:italic; color:var(--color-terracotta); }
.about-section__text { font-size:var(--text-md); color:var(--color-text-secondary); line-height:1.8; margin-bottom:var(--space-4); max-width: 43ch;}
.about-section__catchphrase {
  font-family: var(--font-display); font-size: var(--text-xl); font-style: italic;
  color: var(--color-blush-dark); margin: var(--space-6) 0;
  padding-left: var(--space-4); border-left: 3px solid var(--color-peach); line-height: 1.4;
}
.about-section__location { font-size:var(--text-sm); color:var(--color-text-muted); letter-spacing:.1em; margin-top:var(--space-10); display:flex; align-items:center; gap:var(--space-2); }

/* ------------------------------------------------------------
   12. RECIPE PAGE
   ------------------------------------------------------------ */
.recipe-back { background: var(--color-blush-light);padding: var(--space-4) var(--page-padding); border-bottom: 1px solid var(--color-border); }
.recipe-back a { font-size:var(--text-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--color-text-muted); display:inline-flex; align-items:center; gap:var(--space-2); transition:color var(--transition-fast); font-weight:500; }
.recipe-back a:hover { color:var(--color-accent); }

.recipe-hero { width:100%; max-height:480px; object-fit:cover; display:block; }
.recipe-hero-placeholder { width:100%; height:320px; background:linear-gradient(135deg,var(--color-blush-light),var(--color-cream-mid)); display:flex; align-items:center; justify-content:center; font-size:var(--text-4xl); }
.has-hero-image .recipe-hero-placeholder { display:none; }

.recipe-intro { padding:var(--space-12) var(--page-padding) var(--space-20) var(--page-padding); border-bottom:1px solid var(--color-border); }
.recipe-intro__inner { max-width:var(--max-width-narrow); margin:0 auto; }
.recipe-breadcrumbs {
  font-size: var(--text-xs);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--color-terracotta-light);
  font-weight: 600;
  margin-bottom: var(--space-4);
}
.recipe-breadcrumbs a {
  color: var(--color-terracotta-light);
  text-decoration: none;
}
.recipe-breadcrumbs a:hover {
  text-decoration: underline;
}
.recipe-breadcrumbs span {
  color: var(--color-text-muted);
}
.recipe-intro__title { font-size:var(--text-4xl); margin-block:var(--space-4); }
.recipe-intro__desc { 
  font-size:var(--text-md); 
  color:var(--color-text-secondary); 
  line-height:1.8; 
  max-width: 55ch;
  }
.recipe-yield {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 600;
  margin-top: var(--space-3);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.recipe-additional-desc {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-top: var(--space-4);
  max-width: 55ch;
  font-style: italic;
}
.recipe-tools {
  margin-top: var(--space-6);
}
.recipe-tools__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}
.recipe-tools__table {
  border-collapse: collapse;
  width: 100%;
  max-width: 300px;
  display: flex;
}
.recipe-tools__table td {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-light);
  background: var(--color-cream-light);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.recipe-callout {
    background: var(--color-cream-light);
    border: 2px dashed var(--color-blush);
    color: var(--color-cream-light);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin-bottom: var(--space-20);
    max-width: var(--max-width-narrow);
    margin-inline: auto;
}
.recipe-callout__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-blush-dark);
  margin-bottom: var(--space-3);
}
.recipe-callout__text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
}
.recipe-intro__inner { max-width:var(--max-width); margin:0 auto; display:grid; gap:var(--space-8); }
@media (min-width:900px) {
  .recipe-intro__inner { grid-template-columns: .95fr 1.1fr; align-items:start; gap:var(--space-10); }
}
.recipe-intro__content { max-width:100%;display: flex;flex-direction: column;justify-content: space-between;height: 100%; }
.recipe-intro__media { display:grid; gap:var(--space-4); }
.recipe-intro__hero img, .recipe-intro__hero .recipe-hero-placeholder { max-height: 450px;object-fit: cover;object-position: center; width:100%; display:block; border-radius:var(--radius-md); box-shadow:0 30px 80px rgba(0,0,0,.08); }
.recipe-intro__gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-2); }
.recipe-intro__gallery-thumb { border:1px solid var(--color-border); border-radius:var(--radius-sm); overflow:hidden; background:white; padding:0; cursor:pointer; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.recipe-intro__gallery-thumb.active { border-color:var(--color-terracotta); transform:translateY(-1px); box-shadow:0 12px 24px rgba(0,0,0,.08); }
.recipe-intro__gallery-thumb img { aspect-ratio: 4/3;width:100%; height:100%; object-fit:cover; display:block; }

/* ── Servings bar ─────────────────────────────────────────── */
.servings-bar {
  position: sticky; top: 40px; z-index: 40;
  background: var(--color-dark);
  padding: var(--space-1) var(--page-padding);
  display: flex; align-items: center; justify-content: center;
  row-gap: var(--space-2);
  column-gap: var(--space-8);
  flex-wrap: wrap;
}
.servings-bar__label { font-size:var(--text-xs); letter-spacing:.25em; text-transform:uppercase; color:var(--color-peach); font-weight:600; }
.servings-controls { display:flex; align-items:center; gap:var(--space-4); }
.btn-serving {
  width:2.25rem; height:2.25rem;
  border:1px solid rgba(255,255,255,.25); background:transparent;
  color:var(--color-text-inverse); font-size:var(--text-xl);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--transition-fast); border-radius:var(--radius-sm); line-height:1;
}
.btn-serving:hover { background:var(--color-terracotta); border-color:var(--color-terracotta); }
.servings-display { font-family:var(--font-display); font-size:var(--text-3xl); min-width:2.5rem; text-align:center; color:white; font-weight:300; }
.servings-bar__note { font-size:var(--text-xs); color:rgba(250,240,234,.75); }


/* ── Recipe content ───────────────────────────────────────── */
.recipe-content { padding:var(--space-16) var(--page-padding); }
.recipe-content__inner { max-width:var(--max-width-recipe); margin:0 auto; }
.course-block { margin-bottom:var(--space-20); }
.course-header { display:flex; align-items:baseline; gap:var(--space-5); margin-bottom:var(--space-10); padding-bottom:var(--space-5); border-bottom:1px solid var(--color-border); }
.course-number { font-family:var(--font-display); font-size:var(--text-5xl); color:var(--color-border); line-height:1; flex-shrink:0; font-weight:300; }
.course-pairing { font-size:var(--text-xs); letter-spacing:.25em; text-transform:uppercase; color:var(--color-terracotta-light); font-weight:600; margin-bottom:var(--space-2); }
.course-title { font-size:var(--text-3xl); line-height:1.1; }
.recipe-section { margin-bottom:var(--space-12); }
.recipe-section__heading { font-size:var(--text-2xl); margin-bottom:var(--space-6); display:flex; align-items:center; gap:var(--space-4); }
.recipe-section__heading::after { content:''; flex:1; height:1px; background:var(--color-border); }
.recipe-section__body { display:grid; gap:var(--space-16); }
@media (min-width:900px) {
  .recipe-section__body { grid-template-columns: minmax(240px,1fr) minmax(320px,1.5fr); align-items:start; }
}
.recipe-section__col { position:relative; }
.recipe-section__ingredients { position:sticky; top:120px; align-self:start; }

/* Ingredients */
.ingredient-list { 
  margin-bottom:var(--space-12); 
  padding-inline: var(--space-3);}
.ingredient-row { display:flex; justify-content:space-between; align-items:baseline; padding:var(--space-3) 0; border-bottom:1px dotted var(--color-border); gap:var(--space-4); }
.ingredient-name { font-size:var(--text-md); color:var(--color-text-primary); }
.ingredient-amount { font-family:var(--font-display); font-size:var(--text-xl); font-weight:600; color:var(--color-terracotta); white-space:nowrap; transition:transform var(--transition-fast),color var(--transition-fast); }
.ingredient-amount.updating { transform:scale(1.12); color:var(--color-peach); }

/* Method */
.method-list {     
  border-radius: var(--radius-md);
  counter-reset: steps;
  background: white;
      padding-block: var(--space-10);
    padding-inline: var(--space-16);
  border: 2px dashed var(--color-blush);

  @media (max-width: 900px) {
    padding: var(--space-8);
  }
}
.method-list li {
  counter-increment:steps;
  display:grid;
  grid-template-columns: 1.75rem 1fr;   /* fixed number column, aligned */
  gap:var(--space-4);
  margin-bottom:var(--space-4);
  align-items: baseline;
  font-size:var(--text-base); line-height:1.75; color:var(--color-text-secondary);
}
.method-list li::before {
  content:counter(steps);
  font-family:var(--font-display); font-size:var(--text-2xl);
  color:var(--color-terracotta); line-height:1.3;
  display:block;
}

/* Notes & plating */
.recipe-note { background:rgba(228,98,55,.06); border-left:3px solid var(--color-terracotta); padding:var(--space-4) var(--space-5); font-size:var(--text-base); color:var(--color-text-secondary); line-height:1.7; margin-top:var(--space-5); font-style:italic; border-radius:var(--radius-sm); }
.plating-list li { display:flex; gap:var(--space-3); margin-bottom:var(--space-3); font-size:var(--text-base); line-height:1.75; color:var(--color-text-secondary); }
.plating-list li::before { content:'→'; color:var(--color-peach); flex-shrink:0; font-size:var(--text-lg); margin-top:-.05em; }
.course-divider { text-align:center; padding:var(--space-10) 0; color:var(--color-border); font-size:var(--text-lg); letter-spacing:.5em; }
.recipe-image-placeholder { width:100%; height:240px; background:linear-gradient(135deg,var(--color-blush-light),var(--color-cream-mid)); display:flex; align-items:center; justify-content:center; margin:var(--space-8) 0; font-size:var(--text-sm); color:var(--color-text-muted); letter-spacing:.15em; text-transform:uppercase; }

/* ── Wine pairing ─────────────────────────────────────────── */
.wine-pairing { background: var(--color-cream-light); border:1px solid var(--color-border); padding:var(--space-8); margin-top:var(--space-12); position:relative; overflow:hidden; border-radius:var(--radius-sm); }
.wine-pairing::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--color-blush),var(--color-peach)); }
.wine-pairing__eyebrow { font-size:var(--text-xs); letter-spacing:.3em; text-transform:uppercase; color:var(--color-blush-dark); font-weight:600; margin-bottom:var(--space-3); display:flex; align-items:center; gap:var(--space-2); }
.wine-pairing__title { font-family:var(--font-display); font-size:var(--text-2xl); font-weight:300; margin-bottom:var(--space-4); }
.wine-pairing__desc { font-size:var(--text-base); color:var(--color-text-secondary); line-height:1.75; margin-bottom:var(--space-6); }
.wine-pairing__bottle { display:flex; align-items:center; gap:var(--space-6); border: 1px solid var(--color-blush-light); padding:var(--space-5); background:var(--color-cream); flex-wrap:wrap; border-radius:var(--radius-sm); }
.wine-pairing__bottle-info { flex:1; min-width:200px; }
.wine-pairing__bottle-name { font-family:var(--font-display); font-size:var(--text-xl); margin-bottom:var(--space-1); }
.wine-pairing__bottle-sub { font-size:var(--text-sm); color:var(--color-text-muted); }
.btn-buy { display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-6); background:var(--color-blush-dark); color:var(--color-text-inverse); font-size:var(--text-sm); letter-spacing:.1em; font-weight:500; border:none; transition:background var(--transition-fast); white-space:nowrap; text-transform:uppercase; font-family:var(--font-body); border-radius:var(--radius-sm); }
.btn-buy:hover { background:var(--color-terracotta); }

/* ── Floating toolbar ─────────────────────────────────────── */
.recipe-toolbar { display:none !important; }
.toolbar-btn { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-5); background:var(--color-dark); color:var(--color-text-inverse); border:none; border-radius:100px; font-size:var(--text-sm); letter-spacing:.08em; font-weight:500; transition:all var(--transition-fast); box-shadow:var(--shadow-lg); white-space:nowrap; min-height:2.75rem; font-family:var(--font-body); }
.toolbar-btn:hover, .toolbar-btn.active { background:var(--color-terracotta); }
.toolbar-btn__icon { font-size:1rem; flex-shrink:0; }
@media (max-width:680px) { .recipe-toolbar { display:none; } }

/* ------------------------------------------------------------
   13. MEAL PREP PAGE
   ------------------------------------------------------------ */
.meal-prep-hero {
  background: none;
  padding: var(--space-20) var(--page-padding);
  text-align: center; position: relative; overflow: hidden;
}
.meal-prep-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 60% 40%, rgba(255,190,152,.15) 0%, transparent 70%);
  pointer-events: none;
}
.meal-prep-hero__eyebrow { font-size:var(--text-xs); letter-spacing:.3em; text-transform:uppercase; color:var(--color-blush-dark); font-weight:600; margin-bottom:var(--space-5); }
.meal-prep-hero__title { font-family:var(--font-display); font-size:clamp(2.5rem,5vw,5rem); font-weight:300; color:var(--color-text-secondary); margin-bottom:var(--space-6); line-height:1.05; }
.meal-prep-hero__title em { font-style:italic; color:var(--color-blush-dark); }
.meal-prep-hero__desc { font-size:var(--text-base); color: var(--color-text-secondary); max-width:520px; margin:0 auto; line-height:1.7; }

.meal-prep-intro { padding:var(--space-8) var(--page-padding); border-bottom:1px solid var(--color-border); background: var(--color-accent-summer); }
.meal-prep-intro__inner { max-width:var(--max-width-narrow); margin:0 auto; display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--space-8); }
.prep-feature { text-align:center; padding:var(--space-6); }
.prep-feature__icon { font-size:var(--text-3xl); margin-bottom:var(--space-3); }
.prep-feature__title { font-family:var(--font-display); font-size:var(--text-xl); margin-bottom:var(--space-2); }
.prep-feature__text { font-size:var(--text-base); color:var(--color-text-secondary); line-height:1.7; }

/* Meal prep recipe cards */
.prep-recipe-section { border:1px solid var(--color-border); margin-bottom:var(--space-8); background:var(--color-cream); border-radius:var(--radius-sm); }

/* ── Serving selector on meal-prep index cards ──────────── */
.card-serving-selector {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-10);
  padding: var(--space-2) var(--space-8);
  background: var(--color-accent-summer);
  border-block: 1px solid var(--color-border-light);
}
.card-serving-selector__label { font-size:var(--text-xs); letter-spacing:.15em; text-transform:uppercase; color:var(--color-text-muted); font-weight:500; margin-right:auto; }
.card-btn-serving {
  width:1.75rem; height:1.75rem;
  border:1px solid var(--color-border); background:white;
  color:var(--color-text-secondary); font-size:var(--text-lg); line-height:1;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); transition:all var(--transition-fast);
}
.card-btn-serving:hover { background:var(--color-terracotta); border-color:var(--color-terracotta); color:white; }
.card-servings-display { font-family:var(--font-display); font-size:var(--text-xl); font-weight:600; color:var(--color-terracotta); min-width:1.5rem; text-align:center; }

/* ── Add to cook list label — small ─────────────────────── */
.recipe-selector {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-8);
  background: rgba(228,98,55,.04);
  border-top: 1px solid var(--color-border-light);
}
.recipe-checkbox { width:1.1rem; height:1.1rem; accent-color:var(--color-terracotta); cursor:pointer; flex-shrink:0; }
.recipe-selector label { font-size: var(--text-xs); letter-spacing:.05em; color:var(--color-text-muted); cursor:pointer; }

/* To cook bar */
.to-cook-bar { position:sticky; bottom:0; z-index:50; background:var(--color-dark); color:var(--color-text-inverse); padding:var(--space-4) var(--page-padding); display:none; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; border-top:2px solid var(--color-peach); }
.to-cook-bar.visible { display:flex; }
.to-cook-bar__text { font-size:var(--text-sm); color:rgba(250,240,234,.8); }
.to-cook-bar__text strong { color:var(--color-peach); }
.btn-view-list { padding:var(--space-3) var(--space-6); background:var(--color-terracotta); border:none; color:white; font-size:var(--text-sm); font-weight:500; letter-spacing:.08em; font-family:var(--font-body); border-radius:var(--radius-sm); transition:background var(--transition-fast); }
.btn-view-list:hover { background:var(--color-terracotta-light); }

/* Week planner */
.week-planner { background:var(--color-cream-dark); border:1px solid var(--color-border); padding:var(--space-6) var(--space-8); margin-top:var(--space-6); border-radius:var(--radius-sm); }
.week-planner__title { font-family:var(--font-display); font-size:var(--text-xl); margin-bottom:var(--space-5); }
.week-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:var(--space-2); margin-bottom:var(--space-4); }
.week-day { text-align:center; }
.week-day__label { font-size:var(--text-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--color-text-muted); margin-bottom:var(--space-1); font-weight:500; display:block; }
.week-day__portion { font-family:var(--font-display); font-size:var(--text-xl); color:var(--color-terracotta); font-weight:600; display:block; }
.week-day__unit { font-size:var(--text-xs); color:var(--color-text-muted); display:block; }
.week-note { font-size:var(--text-sm); color:var(--color-text-muted); font-style:italic; }
@media (max-width:600px) { .week-grid { grid-template-columns:repeat(4,1fr); } }

/* Prep two-col */
.prep-two-col { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); }
@media (max-width:600px) { .prep-two-col { grid-template-columns:1fr; } }

/* ── Cook today page: accordion ──────────────────────────── */
.cook-accordion-item { border:1px solid var(--color-border); margin-bottom:var(--space-4); border-radius:var(--radius-sm); overflow:hidden; }
.cook-accordion-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-5) var(--space-6);
  background:var(--color-cream-dark); cursor:pointer;
  transition:background var(--transition-fast);
  list-style:none; border:none; width:100%; text-align:left;
  font-family:var(--font-body);
}
.cook-accordion-header:hover { background:var(--color-cream-mid); }
.cook-accordion-title { font-family:var(--font-display); font-size:var(--text-2xl); font-weight:300; }
.cook-accordion-meta { font-size:var(--text-sm); color:var(--color-text-muted); margin-left:var(--space-3); }
.cook-accordion-chevron { font-size:var(--text-lg); color:var(--color-text-muted); transition:transform var(--transition-fast); flex-shrink:0; }
.cook-accordion-item.open .cook-accordion-chevron { transform:rotate(180deg); }
.cook-accordion-body { padding:var(--space-6); display:none; }
.cook-accordion-item.open .cook-accordion-body { display:block; }

/* Prep page individual */
.prep-page-hero { padding:var(--space-16) var(--page-padding) var(--space-8); border-bottom:1px solid var(--color-border); }
.prep-page-hero__inner { max-width:var(--max-width-narrow); margin:0 auto; }
.prep-page-hero__type { font-size:var(--text-xs); letter-spacing:.25em; text-transform:uppercase; color:var(--color-terracotta-light); font-weight:600; margin-bottom:var(--space-4); }
.prep-page-hero__title { font-size:var(--text-4xl); margin-bottom:var(--space-4); }
.prep-page-hero__desc { font-size:var(--text-md); color:var(--color-text-secondary); line-height:1.8; }

.prep-intro-box { background:none; color:var(--color-dark-soft); padding:var(--space-8); margin-bottom:var(--space-12); border-radius:var(--radius-sm); }
.prep-intro-box__title { font-family:var(--font-display); font-size:var(--text-2xl); font-weight:300; ; margin-bottom:var(--space-3); }
.prep-intro-box__title em { font-style:italic; color:var(--color-blush-dark); }
.prep-intro-box__text { font-size:var(--text-base); color:var(--color-dark-soft); line-height:1.75; }

/* ------------------------------------------------------------
   14. FOOTER
   ------------------------------------------------------------ */
.site-footer { background:var(--color-dark); color:rgba(250,240,234,.5); text-align:center; padding:var(--space-12) var(--page-padding); font-size:var(--text-sm); letter-spacing:.1em; margin-top:auto; }
.site-footer span { color:var(--color-peach); }

/* ------------------------------------------------------------
   15. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width:900px) {
  .page-header--split { flex-direction:column; align-items:flex-start; }
  .page-header__desc { text-align:left; max-width:100%; }
  .about-section__inner { grid-template-columns:1fr; }
  .meal-prep-intro__inner { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  .recipe-grid { grid-template-columns:1fr; }
  .filter-bar__inner { gap:var(--space-4); }
  .recipe-toolbar { display:none; }
}

/* ------------------------------------------------------------
   16. PRINT
   ------------------------------------------------------------ */
@media print {
  .site-nav,.recipe-back,.servings-bar,.recipe-toolbar,.site-footer,.recipe-image-placeholder,.mobile-menu,.wine-pairing .btn-buy,.filter-bar,.about-section,body::after { display:none !important; }
  body { background:white; color:black; font-size:11pt; }
  .recipe-hero-placeholder { display:none; }
  .recipe-intro { padding:0 0 1rem; border-bottom:1pt solid #ccc; }
  .recipe-intro__title { font-size:24pt; color:black; }
  .recipe-content { padding:1rem 0; }
  .recipe-content__inner { max-width:100%; }
  .course-number { font-size:36pt; color:#ddd; }
  .ingredient-amount { color:#E46237; font-size:13pt; }
  .ingredient-row { border-bottom:0.5pt dotted #ddd; padding:4pt 0; }
  .method-list li { margin-bottom:6pt; color:#333; grid-template-columns:1.5rem 1fr; }
  .method-list li::before { color:#E46237; font-size:14pt; }
  .recipe-note { border-left:2pt solid #E46237; padding:4pt 8pt; font-style:italic; }
  .course-block,.recipe-section { page-break-inside:avoid; }
  .recipe-intro__inner::before { content:"Vic's Kitchen · byviccruse.com"; display:block; font-size:9pt; color:#999; margin-bottom:.5rem; letter-spacing:.1em; text-transform:uppercase; }
  @page { margin:2cm; size:A4; }
}

/* --- MERGED from additions.css --- */
/* ============================================================
   VIC'S KITCHEN — CSS ADDITIONS v5
   Import after style.css — never modifies existing rules.
   ============================================================ */

/* ------------------------------------------------------------
   FEATURED RECIPE BANNER
   ------------------------------------------------------------ */

.featured-recipe-section {
  background: var(--color-peach);
  padding: var(--space-8) var(--page-padding);
}

.featured-recipe-banner {
  margin: 0 auto;
  max-height: 340px;
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 0.75fr 1fr;
  overflow: hidden;
  max-width: var(--max-width-wide);
  }

  .featured-recipe-banner__content {
    padding: var(--space-10) var(--space-16);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
    border: 1px solid var(--color-border);
  }

  .featured-recipe-banner__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-blush-dark);
    margin: 0;
  }

  .featured-recipe-banner__title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 300;
    color: var(--color-text-primary);
    line-height: 1.15;
    margin: 0;
  }

.featured-recipe-banner__btn {
  display: inline-block;
    align-self: flex-start;
    margin-top: var(--space-2);
    padding: .55rem 1.35rem;
    border: 2px dashed var(--color-blush-dark);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-dark);
    text-decoration: none;
    background: transparent;
    transition: background 150ms ease, color 150ms ease;
    text-transform: uppercase;
}

.featured-recipe-banner__btn:hover {
  background: var(--color-blush-dark);
  color: var(--color-cream);
}

.featured-recipe-banner__image {
  overflow: hidden;
  min-height: 240px;
}

.featured-recipe-banner__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {

  .featured-recipe-banner {max-height: unset; }
  .featured-recipe-banner__content {padding: var(--space-8) var(--space-6);}
  .featured-recipe-banner__title {font-size: var(--text-2xl);}
}

@media (max-width: 600px) {
  .featured-recipe-banner {
    grid-template-columns: 1fr;
  }
  .featured-recipe-banner__image {
    aspect-ratio: 16/9;
    min-height: unset;
    order: -1;
  }
  .featured-recipe-banner__content {
    padding: var(--space-8) var(--space-6);
  }
}


/* ------------------------------------------------------------
   RECIPE GRID — VIEW MORE + ALL CATEGORIES BUTTONS
   ------------------------------------------------------------ */

.recipe-card--collapsed { display: none; }

.recipe-grid__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding-top: var(--space-10);
  padding-bottom: var(--space-2);
  flex-wrap: wrap;
}

.btn-view-more {
  padding: .6rem 1.5rem;
  border: 2px solid var(--color-dark);
  background: transparent;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-dark);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.btn-view-more:hover {
  background: var(--color-dark);
  color: var(--color-cream);
}

.btn-all-categories {
  display: inline-block;
  padding: .6rem 1.5rem;
  border: 2px solid var(--color-blush-dark);
  background: transparent;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-blush-dark);
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
}
.btn-all-categories:hover {
  background: var(--color-blush-dark);
  color: var(--color-cream);
}

/* ------------------------------------------------------------
   ALL CATEGORIES PAGE
   ------------------------------------------------------------ */

.categories-page-header {
  background: var(--color-cream);
  padding: var(--space-16) var(--page-padding) var(--space-12);
  border-bottom: 1px solid var(--color-border);
  max-width: 100%;
}
.categories-page-header .eyebrow {
  max-width: var(--max-width);
  margin: 0 auto var(--space-2);
}
.categories-page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, var(--text-4xl));
  font-weight: 300;
  color: var(--color-dark);
  max-width: var(--max-width);
  margin: 0 auto var(--space-3);
}
.categories-page-header__sub {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  max-width: var(--max-width);
  margin: 0 auto;
}

.categories-section {
  background: white;
  padding-block: var(--space-16);
}

.categories-group-heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 300;
  color: var(--color-dark);
  margin: var(--space-10) 0 var(--space-6);
}
.categories-group-heading:first-child { margin-top: 0; }

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.category-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.category-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(73, 38, 29, 0.14);
}

.category-card__img-wrap {
  position: relative;
  aspect-ratio: 6/7;
  overflow: hidden;
  background: var(--color-cream-dark);
}

.category-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 350ms ease;
}

.category-card:hover .category-card__img-wrap img {
  transform: scale(1.05);
}

.category-card__overlay {
  position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 var(--space-6);
    background: rgba(240, 233, 233, 0.876);
    transition: background 200ms ease;
    backdrop-filter: blur(1px);
    align-items: center;
}

.category-card:hover .category-card__overlay {
  background: rgba(200, 90, 90, 0.92);
}

.category-card__label {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-dark);
  margin: 0;
  transition: color 200ms ease;
}
.category-card:hover .category-card__label { color: var(--color-cream); }

.category-card__count {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: var(--space-1) 0 0;
  transition: color 200ms ease;
}
.category-card:hover .category-card__count { color: rgba(255, 252, 249, 0.8); }

/* ------------------------------------------------------------
   ABOUT SECTION — RESPONSIVE OVERRIDES
   Default breakpoint in style.css collapses at 900px (too early)
   and leaves the image oversized in single-column view.
   ------------------------------------------------------------ */

/* Keep 2 columns down to 680px; tighten gap at mid-widths */
@media (max-width: 900px) {
  .about-section__inner {
    grid-template-columns: 0.8fr 1fr !important;
    gap: var(--space-8);
  }
}

@media (max-width: 720px) {
  .about-section__inner {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-6);
  }
}

/* Stack below 580px — but constrain the image */
@media (max-width: 580px) {
  .about-section__inner {
    grid-template-columns: 1fr !important;
    gap: var(--space-8);
  }
  .about-section__image {
    transform: none;
    aspect-ratio: 4 / 4.5;
    max-height: 440px;
    width: 100%;
    object-fit: cover;
    object-position: center top;
  }
}

/* ------------------------------------------------------------
   FULL SITE FOOTER
   ------------------------------------------------------------ */

.site-footer-full {
  background: var(--color-darkchoc);   /* deeper than --color-dark */
  color: rgba(250,240,234,0.55);
}
.site-footer-full__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-12) var(--page-padding);
  display: grid;
  grid-template-columns: 260px repeat(4, 1fr);
  gap: var(--space-8);
  align-items: start;
}
.site-footer-full__logo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 300;
  color: rgba(250,240,234,0.9);
  display: block;
  margin-bottom: var(--space-4);
  text-decoration: none;
}
.site-footer-full__logo em { font-style: italic; color: var(--color-peach, #f3b2b2); }
.site-footer-full__tagline {
  font-style: italic;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-sand);
  margin-bottom: var(--space-3);
  line-height: 1.4;
}
.site-footer-full__location {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-white-75);
  margin-bottom: var(--space-4);
}
.site-footer-full__social a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-white-85);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: color 150ms ease;
}
.site-footer-full__social a:hover { color: var(--color-peach, #f3b2b2); }
.site-footer-full__nav { display: contents; }
.site-footer-full__col-heading {
  font-size: var(--text-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-peach, #f3b2b2);
  font-weight: 600;
  margin-bottom: var(--space-4);
}
.site-footer-full__col ul { list-style: none; padding: 0; }
.site-footer-full__col li { margin-bottom: var(--space-2); }
.site-footer-full__col a {
  font-size: var(--text-md);
  color: #f7e9d3ed;
  text-decoration: none;
  transition: all 150ms ease;
}
.site-footer-full__col a:hover { color: var(--color-blush-light); transform:translateY(-10px)}
.site-footer-full__bottom {
  border-top: 1px solid var(--color-cream-07);
  padding: var(--space-5) var(--page-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.site-footer-full__copy,
.site-footer-full__credits {
  font-size: var(--text-xs);
  color: var(--color-white-70);
  letter-spacing: 0.05em;
}
.site-footer-full__credits a {
  color: var(--color-white-70);
  text-decoration: underline;
  transition: color 150ms ease;
}
.site-footer-full__credits a:hover { color: var(--color-blush, #f3b2b2); }

@media (max-width: 960px) { 
  .site-footer-full__inner { grid-template-columns: 1fr 1fr 1fr;  gap: var(--space-20) var(--space-2); }
  .site-footer-full__brand { grid-column: span 3; }
}
@media (max-width: 600px) { .site-footer-full__inner { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .site-footer-full__inner { grid-template-columns: 1fr; } }
@media (max-width: 440px) {
  .site-footer-full__nav { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   WINE PAIRING — FULL BANNER
   Replaces the bordered box with an edge-to-edge section.
   ------------------------------------------------------------ */
.wine-pairing-banner {
  margin-top: var(--space-12);
  margin-left: calc(-1 * var(--page-padding));
  margin-right: calc(-1 * var(--page-padding));
  position: relative;
  overflow: hidden;
  background: var(--color-dark);
}

.wine-pairing-banner__image-wrap {
  position: relative;
  width: 100%;
  min-height: 320px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Left: bottle image */
.wine-pairing-banner__bottle-img {
  position: relative;
  background: var(--color-dark-soft, #2e2820);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  overflow: hidden;
}

.wine-pairing-banner__bottle-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: opacity 0.3s ease;
}


/* Placeholder when no image */
.wine-pairing-banner__bottle-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-10);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  min-height: 320px;
}
.wine-pairing-banner__bottle-placeholder-icon { font-size: 3rem; }

/* Right: content */
.wine-pairing-banner__content {
  padding: var(--space-12) var(--space-10);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
}

.wine-pairing-banner__eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-blush, #E69FA3);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.wine-pairing-banner__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 300;
  color: var(--color-text-inverse);
  line-height: 1.1;
}

.wine-pairing-banner__desc {
  font-size: var(--text-base);
  color: var(--color-text-darkbg);
  line-height: 1.75;
}

.wine-pairing-banner__bottle-info {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-cream-12);
}

.wine-pairing-banner__bottle-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-white-95);
  margin-bottom: var(--space-1);
}

.wine-pairing-banner__bottle-sub {
  font-size: var(--text-sm);
  color: var(--color-sun);
  margin-bottom: var(--space-5);
}

.wine-pairing-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--color-terracotta, #E46237);
  color: white;
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  font-weight: 500;
  border: none;
  border-radius: var(--radius-sm, 2px);
  text-transform: uppercase;
  font-family: var(--font-body);
  transition: background 150ms ease;
  text-decoration: none;
  align-self: flex-start;
}
.wine-pairing-banner__btn:hover { background: var(--color-terracotta-light, #E6815A); }

/* Accent stripe */
.wine-pairing-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-blush, #E69FA3), var(--color-peach, #f3b2b2));
}

@media (max-width: 700px) {
  .wine-pairing-banner__image-wrap { grid-template-columns: 1fr; }
  .wine-pairing-banner__bottle-img { min-height: 240px; }
  .wine-pairing-banner__content    { padding: var(--space-8); }
  .wine-pairing-banner__title      { font-size: var(--text-2xl); }
}



/* ============================================================
   RECIPE QUICK SEARCH / FILTER BAR
   ============================================================ */
.recipe-search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  position: relative;
}
.recipe-search-bar__input {
  flex: 1;
  padding: var(--space-3) var(--space-4) var(--space-3) 2.5rem;
  border: 1px solid var(--color-border);
  background: white;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  border-radius: var(--radius-sm);
  transition: border-color 150ms ease;
  outline: none;
}
.recipe-search-bar__input:focus { border-color: var(--color-terracotta); }
.recipe-search-bar__icon {
  position: absolute;
  left: var(--space-3);
  color: var(--color-text-muted);
  pointer-events: none;
  font-size: var(--text-base);
}
.recipe-search-bar__clear {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  cursor: pointer;
  padding: var(--space-2);
  display: none;
  border-radius: var(--radius-sm);
  transition: color 150ms ease;
}
.recipe-search-bar__clear:hover { color: var(--color-accent); }
.recipe-search-bar__clear.visible { display: block; }

/* No results message */
.recipe-grid__empty {
  display: none;
  grid-column: 1 / -1;
  padding: var(--space-16);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-base);
}
.recipe-grid__empty.visible { display: block; }

/* ============================================================
   TOOLS & CALCULATORS — Hub + Multiplier
   ============================================================ */
.tools-hero {
  background: var(--color-dark);
  padding: var(--space-20) var(--page-padding) var(--space-16);
  position: relative; overflow: hidden;
}
.tools-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 50%, var(--color-peach-12) 0%, transparent 65%);
  pointer-events: none;
}
.tools-hero__inner { max-width: var(--max-width); margin: 0 auto; }
.tools-hero__eyebrow {
  font-size: var(--text-xs); letter-spacing: .3em; text-transform: uppercase;
  color: var(--color-peach, #f3b2b2); font-weight: 600; margin-bottom: var(--space-4);
}
.tools-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 300; color: white; margin-bottom: var(--space-5); line-height: 1.05;
}
.tools-hero__title em { font-style: italic; color: var(--color-peach, #f3b2b2); }

/* ── Low Fat page hero and banner ───────────────────────── */
.lowfat-hero {
  background: var(--color-sand);
  border-bottom: 1px solid var(--color-border);
  min-height: 380px;
  max-height: clamp(25rem, 9.3207rem + 35.6718vw, 43.75rem);
}
.lowfat-hero__inner {
  display: grid;
  grid-template-columns: .65fr 1fr;
  height: 100%;
  min-height: inherit;
  max-height: inherit;
}
@media(max-width:680px) {
  .lowfat-hero { max-height: none; }
  .lowfat-hero__inner { grid-template-columns: 1fr; }
}
.lowfat-hero__image {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  max-height: 600px;

  @media (max-width: 900px) { max-height: 500px; }
  @media (max-width: 600px) { max-height: 320px; }
}
.lowfat-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;

}
.lowfat-hero__image-placeholder {
  font-size: 5rem;
}
.lowfat-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-12);

  @media (min-width: 1100px) { padding: var(--space-24); }
}
.lowfat-hero__eyebrow {
  font-size: var(--text-xs);
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-terracotta-light, #FAC450);
}
.lowfat-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1.05;
  color: var(--color-dark);
  margin: 0;
}
.lowfat-hero__desc {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  line-height: 1.8;
  max-width: 520px;
}
.lowfat-hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.lowfat-banner .cake-banner__image-placeholder {
  background: linear-gradient(135deg, rgba(196, 233, 222, 0.35) 0%, rgba(36, 110, 75, 0.6) 100%);
  color: #fff;
}

.tools-hero__desc {
  font-size: var(--text-md); color: var(--color-text-darkbg);
  max-width: 560px; line-height: 1.75;
}

/* Tool cards on hub page */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
  padding: var(--space-12) 0;
}
.tool-card {
  border: 1px solid var(--color-border);
  padding: var(--space-8);
  text-decoration: none;
  color: inherit;
  display: block;
  background: var(--color-cream);
  transition: background var(--transition-base), transform var(--transition-base);
  border-radius: var(--radius-sm);
  position: relative;
}
.tool-card:hover { background: var(--color-cream-light); transform: translateY(-2px); }
.tool-card::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--color-terracotta), var(--color-peach, #f3b2b2));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition-base);
}
.tool-card:hover::after { transform: scaleX(1); }
.tool-card__icon { font-size: 2.5rem; margin-bottom: var(--space-4); display: block; }
.tool-card__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 300; margin-bottom: var(--space-3); }
.tool-card__desc { font-size: var(--text-base); color: var(--color-text-secondary); line-height: 1.65; }
.tool-card__arrow {
  position: absolute; top: var(--space-6); right: var(--space-6);
  font-size: var(--text-base); color: var(--color-text-muted);
  transition: color var(--transition-fast), transform var(--transition-base);
}
.tool-card:hover .tool-card__arrow { color: var(--color-terracotta); transform: translate(3px,-3px); }

/* ── Multiplier tool ─────────────────────────────────────── */
.multiplier-layout {
  max-width: var(--max-width-narrow);
  margin: 0 auto;
  padding: var(--space-12) var(--page-padding) var(--space-24);
}
.multiplier-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-8);
  background: var(--color-cream);
}
.multiplier-panel__header {
  background: var(--color-cream-dark);
  padding: var(--space-5) var(--space-6);
  display: flex; align-items: center; gap: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.multiplier-panel__num {
  font-family: var(--font-display); font-size: var(--text-3xl);
  color: white; font-weight: 300; line-height: 1;
}
.multiplier-panel__heading {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 300;
}
.multiplier-panel__body { padding: var(--space-6); }

/* Input areas */
.multiplier-field { margin-bottom: var(--space-5); }
.multiplier-field label {
  display: block;
  font-size: var(--text-xs); letter-spacing: .15em; text-transform: uppercase;
  color: var(--color-text-muted); font-weight: 600; margin-bottom: var(--space-2);
}
.multiplier-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  background: white; font-family: var(--font-body);
  font-size: var(--text-base); color: var(--color-text-primary);
  border-radius: var(--radius-sm); outline: none;
  transition: border-color 150ms ease;
}
.multiplier-input:focus { border-color: var(--color-terracotta); }
.multiplier-textarea {
  width: 100%; min-height: 180px; resize: vertical;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); background: white;
  font-family: var(--font-body); font-size: var(--text-base);
  color: var(--color-text-primary); border-radius: var(--radius-sm);
  outline: none; transition: border-color 150ms ease; line-height: 1.65;
}
.multiplier-textarea:focus { border-color: var(--color-terracotta); }
.multiplier-textarea::placeholder { color: var(--color-text-muted); }

.multiplier-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
}
@media (max-width: 520px) { .multiplier-row { grid-template-columns: 1fr; } }

.btn-parse {
  width: 100%;
  padding: var(--space-4);
  background: var(--color-dark); color: white;
  border: none; font-family: var(--font-body);
  font-size: var(--text-sm); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; border-radius: var(--radius-sm);
  cursor: pointer; transition: background 150ms ease;
  margin-top: var(--space-2);
}
.btn-parse:hover { background: var(--color-terracotta); }

/* Servings scaler inside multiplier */
.multiplier-scaler {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-dark); border-radius: var(--radius-sm);
  margin-bottom: var(--space-6);
}
.multiplier-scaler__label {
  font-size: var(--text-xs); letter-spacing: .25em; text-transform: uppercase;
  color: var(--color-peach, #f3b2b2); font-weight: 600;
}
.multiplier-scaler__controls { display: flex; align-items: center; gap: var(--space-4); }
.multiplier-scaler__display {
  font-family: var(--font-display); font-size: var(--text-3xl); color: white; font-weight: 300;
  min-width: 3rem; text-align: center;
}
.multiplier-scaler__note { font-size: var(--text-xs); color: rgba(250,240,234,.6); }
.multiplier-scaler .btn-serving {
  width: 2.25rem; height: 2.25rem;
  border: 1px solid rgba(255,255,255,.25); background: transparent;
  color: white; font-size: var(--text-xl);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); transition: all 150ms ease;
}
.multiplier-scaler .btn-serving:hover { background: var(--color-terracotta); border-color: var(--color-terracotta); }

/* Results table */
.multiplier-results { display: none; }
.multiplier-results.visible { display: block; }
.result-ing-list { border-top: 1px solid var(--color-border); }
.result-ing-row {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: baseline; gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px dotted var(--color-border);
}
.result-ing-name { font-size: var(--text-base); color: var(--color-text-primary); }
.result-ing-original { font-size: var(--text-sm); color: var(--color-text-muted); text-align: right; }
.result-ing-scaled {
  font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: 600; color: var(--color-terracotta);
  min-width: 80px; text-align: right;
  transition: transform 150ms ease, color 150ms ease;
}
.result-ing-scaled.flash { transform: scale(1.15); color: var(--color-peach, #f3b2b2); }

.multiplier-actions {
  display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6);
}
.multiplier-actions .sl-btn { flex: 1; min-width: 120px; }

/* Parse hint */
.parse-hint {
  font-size: var(--text-xs); color: var(--color-text-muted);
  margin-top: var(--space-2); line-height: 1.6;
}
.parse-hint code {
  background: var(--color-cream-dark); padding: 1px 5px;
  border-radius: 2px; font-family: monospace; font-size: .85em;
}

/* URL input row */
.url-row { display: flex; gap: var(--space-3); }
.url-row .multiplier-input { flex: 1; }
.btn-fetch-url {
  padding: var(--space-3) var(--space-5);
  background: var(--color-cream-dark); border: 1px solid var(--color-border);
  color: var(--color-text-secondary); font-family: var(--font-body);
  font-size: var(--text-sm); font-weight: 500; border-radius: var(--radius-sm);
  cursor: pointer; transition: all 150ms ease; white-space: nowrap;
}
.btn-fetch-url:hover { background: var(--color-border); }

.mult-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6);padding:var(--space-20) var(--page-padding) var(--space-24);max-width:var(--max-width);margin:0 auto}
    @media(min-width:760px){.mult-grid{grid-template-columns:1fr 1fr;align-items:start}}
    .m-panel{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:white}
    .m-panel__head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5) var(--space-6);background:var(--color-blush-light);border-bottom:1px solid var(--color-border)}
    .m-panel__num{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--color-border);font-weight:300;line-height:1;flex-shrink:0}
    .m-panel__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:300}
    .m-panel__body{padding:var(--space-6)}
    .m-field{margin-bottom:var(--space-5)}
    .m-field label{display:block;font-size:var(--text-xs);font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:var(--space-2)}
    .m-input{width:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);background:var(--color-cream);font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text-primary);border-radius:var(--radius-sm);outline:none;transition:border-color 150ms}
    .m-input:focus{border-color:var(--color-terracotta);background:white}
    .m-textarea{width:100%;min-height:260px;resize:vertical;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);background:var(--color-cream);font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text-primary);border-radius:var(--radius-sm);outline:none;transition:border-color 150ms;line-height:1.65}
    .m-textarea:focus{border-color:var(--color-terracotta);background:white}
    .m-hint{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-2);line-height:1.6}
    .m-hint code{background:var(--color-cream-light);padding:1px 4px;border-radius:2px;font-size:.88em}
    .m-row-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
    .m-target{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);background:rgba(250,196,80,.1);border:1px solid rgba(250,196,80,.35);border-radius:var(--radius-sm);margin-bottom:var(--space-5);flex-wrap:wrap}
    .m-target label{font-size:var(--text-xs);font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--color-text-muted);white-space:nowrap}
    .m-target .m-input{width:90px;padding:var(--space-2) var(--space-3)}
    .m-target-unit{font-size:var(--text-sm);color:var(--color-text-muted)}
    .m-calc-btn{width:100%;padding:var(--space-4);background:var(--color-dark);color:white;border:none;font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--radius-sm);cursor:pointer;transition:background 150ms}
    .m-calc-btn:hover{background:var(--color-terracotta)}
    .m-results{opacity:.5;pointer-events:none;transition:opacity 350ms ease}
    .m-results.visible{opacity:1;pointer-events:auto}
    .m-result-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--space-4);gap:var(--space-4);flex-wrap:wrap}
    .m-result-title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:300}
    .m-result-sub{font-size:var(--text-sm);color:var(--color-terracotta);font-weight:600}
    .result-row{display:grid;grid-template-columns:1fr auto;align-items:baseline;padding:var(--space-3) 0;border-bottom:1px dotted var(--color-border);gap:var(--space-4)}
    .result-row__name{font-size:var(--text-base);color:var(--color-text-primary)}
    .result-row__qty{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;color:var(--color-terracotta);text-align:right;white-space:nowrap;transition:color 200ms,transform 200ms}
    .result-row__qty.flash{color:var(--color-sun,#FAC450);transform:scale(1.1)}
    .result-row__fixed{color:var(--color-text-muted);font-family:var(--font-body);font-size:var(--text-sm)}
    .m-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-6)}
    .m-ratio{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:rgba(225,116,116,.1);border:1px solid rgba(225,116,116,.25);border-radius:100px;font-size:var(--text-xs);font-weight:600;color:var(--color-terracotta);margin-bottom:var(--space-5)}
  



/* SOURDOUGH PAGE */

.sd-wrap { max-width:680px; margin:0 auto; padding:var(--space-8) var(--page-padding) var(--space-24); }
    /* Row layout: icon | label+slider | pct | grams */
    .sd-row { display:grid; grid-template-columns: .2fr 1fr;grid-template-rows: 1fr 1fr; align-items:center; gap:var(--space-4); padding:var(--space-5) var(--space-6); border-bottom:1px solid var(--color-border-light); background:white; }
    .sd-row:first-child { border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
    .sd-row--total { border-radius:0 0 var(--radius-lg) var(--radius-lg); background:var(--color-cream-light); border:none; }
    .sd-row__icon { font-size:2rem; margin-inline: auto; }
    .sd-row__label { font-size:var(--text-sm); font-weight:600; color:var(--color-text-primary); }
    .sd-row__hint { font-size:var(--text-sm); color:var(--color-text-muted); margin-top:2px; line-height:1.4; }
    .sd-row__slider-wrap { display:flex; flex-direction:column; gap:4px; }
    .sd-row__pct { font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-terracotta);
    text-align: center;
    background: rgba(225, 116, 116, .1);
    padding: 2px 8px;
    border-radius: 100px;
    }
    .sd-row__gram-wrap { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
    .sd-row__grams { font-family:var(--font-display); font-size:var(--text-2xl); font-weight:300; color:var(--color-dark); transition:color 250ms; line-height:1; }
    .sd-row__grams.flash { color:var(--color-terracotta); }
    .sd-row__unit { font-family:var(--font-body); font-size:var(--text-xs); color:var(--color-text-muted); }
    /* Flour input */
    .sd-flour-input { font-family:var(--font-display); font-size:var(--text-2xl); font-weight:300; color:var(--color-dark); width:90px; text-align:right; border:none; border-bottom:2px solid var(--color-border); background:transparent; outline:none; padding:2px 0; transition:border-color 150ms; }
    .sd-flour-input:focus { border-color:var(--color-terracotta); }
    /* Sliders */
    .sd-slider { -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:2px; outline:none; cursor:pointer; background:var(--color-border); }
    .sd-slider::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--color-terracotta); border:3px solid white; box-shadow:0 1px 4px rgba(73,38,29,.2); cursor:pointer; }
    .sd-slider::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--color-terracotta); border:3px solid white; }
    /* Salt toggle */
    .sd-salt-toggle { display:flex; align-items:center; gap:var(--space-2); }
    .sd-salt-toggle input { accent-color:var(--color-terracotta); }
    /* Loaves */
    .sd-loaves-row { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-5) var(--space-6); background:rgba(250,196,80,.08); border:1px solid rgba(250,196,80,.25); border-radius:var(--radius-sm); margin:var(--space-4) 0; flex-wrap:wrap; }
    .sd-loaves-row label { font-size:var(--text-xs); font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--color-text-muted); white-space:nowrap; }
    .sd-loaves-input { width:64px; text-align:center; padding:var(--space-2) var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-sm); font-family:var(--font-body); font-size:var(--text-base); color:var(--color-dark); background:white; outline:none; }
    .sd-loaves-input:focus { border-color:var(--color-terracotta); }
    /* Card */
    .sd-card { border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:var(--space-4); }
    .sd-card__head { padding:var(--space-4) var(--space-6); background:var(--color-cream-light); border-bottom:1px solid var(--color-border); font-family:var(--font-display); font-size:var(--text-lg); font-weight:300; }
    /* Explainer */
    .sd-explainer { padding:var(--space-5); background:rgba(250,196,80,.07); border:1px solid rgba(250,196,80,.2); border-radius:var(--radius-sm); margin-bottom:var(--space-5); font-size:var(--text-sm); color:var(--color-text-muted); line-height:1.65; }
    .sd-explainer strong { color:var(--color-dark); }
    /* Process */
    .sd-process { list-style:none; padding:0; margin:0; counter-reset:step; }
    .sd-process li { display:grid; grid-template-columns:1.5rem 1fr; gap:var(--space-3); padding:var(--space-3) 0; border-bottom:1px dotted var(--color-border-light); font-size:var(--text-sm); color:var(--color-text-secondary); line-height:1.65; counter-increment:step; }
    .sd-process li::before { content:counter(step); font-family:var(--font-display); font-size:var(--text-xl); color:var(--color-terracotta); line-height:1.3; font-weight:300; }
    .sd-actions { display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-5); }
  

/* ============================================================
   ADDITIONS v9 — Back banner, dropdown filters, button designs,
   shopping list improvements, tools banner component
   ============================================================ */

/* ── Back link banner (meal prep + tools pages) ──────────── */
.back-banner {
  background: var(--color-cream-light);
  border-bottom: 1px solid var(--color-border);
}
.back-banner .back-banner__link { color: var(--color-dark) !important; font-weight: 600; }
.back-banner .back-banner__link:hover { color: var(--color-terracotta) !important; }
.back-banner .back-banner__crumb { color: var(--color-text-muted) !important; }
.back-banner__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-3) var(--page-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.back-banner__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,251,250,.65);
  text-decoration: none;
  transition: color 150ms ease;
}
.back-banner__link:hover { color: var(--color-terracotta); }
.back-banner__link::before { content: '←'; }
.back-banner__crumb {
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,251,250,.3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.back-banner__crumb span:not(:last-child)::after {
  content: '·';
  margin-left: var(--space-2);
  opacity: .4;
}

/* ── Dropdown filter bar ─────────────────────────────────── */
.filter-bar--dropdowns {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-5) 0;
  margin-bottom: var(--space-8);
}
.filter-dropdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.filter-dropdown__label {
  font-size: var(--text-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-muted);
}
.filter-select {
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  background: rgba(250,196,80,.08);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  border-radius: var(--radius-sm);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238c5540' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: 2.2rem;
  min-width: 140px;
  transition: border-color 150ms ease;
}
.filter-select:focus { border-color: var(--color-terracotta); }
.filter-clear-btn {
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  align-self: flex-end;
  margin-bottom: 1px;
  transition: all 150ms ease;
}
.filter-clear-btn:hover {
  border-color: var(--color-terracotta);
  color: var(--color-terracotta);
}

/* Active filter indicator */
.filter-active-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.filter-active-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--color-terracotta);
  color: white;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .08em;
  border-radius: var(--radius-sm);
}
.filter-active-tag button {
  background: none;
  border: none;
  color: var(--color-white-70);
  cursor: pointer;
  font-size: .7rem;
  padding: 0 0 0 var(--space-1);
  line-height: 1;
}
.filter-active-tag button:hover { color: white; }

/* ── Action button designs (copy / download / print) ─────── */
.action-btn-group {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .08em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 180ms ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.action-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-white-15);
  transform: translateY(100%);
  transition: transform 180ms ease;
}
.action-btn:hover::before { transform: translateY(0); }
.action-btn__icon { font-size: 1.1rem; flex-shrink: 0; }
.action-btn--copy {
  background: var(--color-dark);
  color: var(--color-text-inverse);
}
.action-btn--download {
  background: var(--color-terracotta);
  color: white;
}
.action-btn--print {
  background: transparent;
  color: var(--color-dark);
  border: 1.5px solid var(--color-border);
}
.action-btn--print:hover { border-color: var(--color-dark); }
.action-btn--add {
  background: rgba(206,210,69,.15);
  color: #5a5e10;
  border: 1.5px solid #ced245;
}
.action-btn--add:hover { background: rgba(206,210,69,.28); }
.action-btn--shopping {
  background: var(--color-sun, #FAC450);
  color: var(--color-dark);
}

/* ── Shopping list improvements ──────────────────────────── */
#shopping-modal .sl-panel {
  background: #fef9f4 !important;  /* paper-like, lighter than cream */
  max-width: 580px !important;
}
#shopping-modal .sl-panel__title {
  font-family: var(--font-display);
  font-size: 1.8rem !important;
}
#shopping-modal .sl-panel__sub {
  font-size: 0.9rem !important;
  color: var(--color-text-muted);
}
#shopping-modal .sl-item__name {
  font-size: 1.05rem !important;
}
#shopping-modal .sl-item__amount {
  font-size: 1.2rem !important;
  color: var(--color-terracotta) !important;
}
#shopping-modal .sl-item {
  border-bottom: 1px dotted var(--color-border) !important;
}
#shopping-modal .sl-checkbox {
  width: 1.2rem !important;
  height: 1.2rem !important;
}
/* Add ingredient input in shopping list */
.sl-add-row {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-2);
}
.sl-add-input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  background: white;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  outline: none;
}
.sl-add-input:focus { border-color: var(--color-terracotta); }
.sl-add-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--color-dark);
  color: white;
  border: none;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .1em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms;
}
.sl-add-btn:hover { background: var(--color-terracotta); }

/* Shopping list top trigger bar */
.sl-top-bar {
  background: rgba(250,196,80,.12);
  border: 1px solid rgba(250,196,80,.35);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 auto var(--space-8);
  
}
.sl-top-bar__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.sl-top-bar__text strong {
  font-weight: 700;
  color: var(--color-dark);
}
.sl-top-bar__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ── Tools section banner (reusable component) ───────────── */
.tools-section-banner {
  background: var(--color-dark);
  padding: var(--space-24) var(--page-padding);
  position: relative;
  overflow: hidden;
}
.tools-section-banner::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(250,196,80,.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.tools-section-banner__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-6);
}
@media(max-width:800px){
  .tools-section-banner__inner { grid-template-columns: 1fr 1fr; }
}
@media(max-width:520px){
  .tools-section-banner__inner { grid-template-columns: 1fr; }
}
.tools-section-banner__header {
  grid-column: 1 / -1;
  margin-bottom: var(--space-4);
}
.tools-section-banner__eyebrow {
  font-size: var(--text-xs);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--color-sun, #FAC450);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.tools-section-banner__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 300;
  color: white;
  margin-bottom: var(--space-3);
  line-height: 1.1;
}
.tools-section-banner__title em {
  font-style: italic;
  color: var(--color-sun, #FAC450);
}
.tools-section-banner__desc {
  font-size: var(--text-md);
  color: var(--color-text-darkbg);
  max-width: 600px;
  line-height: 1.7;
}
.tool-card-mini {
  background: rgba(242, 214, 238, 0.071);
  border: 1px solid rgba(241, 209, 201, 0.291);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: all 200ms ease;
  position: relative;
}
.tool-card-mini:hover {
  background: rgba(255,251,250,.1);
  border-color: rgba(250,196,80,.4);
  transform: translateY(-2px);
}
.tool-card-mini__icon { font-size: 1.8rem; margin-bottom: var(--space-3); display: block; }
.tool-card-mini__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 300;
  color: var(--color-cream-light);
  margin-bottom: var(--space-2);
}
.tool-card-mini__desc {
  font-size: var(--text-base);
  color: rgba(255, 251, 250, 0.67);
  line-height: 1.6;
}
.tool-card-mini__arrow {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  color: rgba(255,251,250,.25);
  font-size: var(--text-base);
  transition: color 150ms, transform 200ms;
}
.tool-card-mini:hover .tool-card-mini__arrow {
  color: var(--color-sun, #FAC450);
  transform: translate(2px,-2px);
}

/* ── Portions target calculator in multiplier ────────────── */
.target-calc-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: rgba(250,196,80,.08);
  border: 1px solid rgba(250,196,80,.3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.target-calc-row label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.target-calc-row .multiplier-input {
  width: 80px;
  padding: var(--space-2) var(--space-3);
}
.target-calc-row span {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.target-calc-btn {
  padding: var(--space-2) var(--space-5);
  background: var(--color-dark);
  color: white;
  border: none;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .1em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms;
}
.target-calc-btn:hover { background: var(--color-terracotta); }
.target-calc-result {
  font-size: var(--text-sm);
  color: var(--color-terracotta);
  font-weight: 600;
}

/* ══ NAV DROPDOWNS ══════════════════════════════════════════ */
.site-nav__item {
  position: relative;
}
.site-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 190px;
  background: var(--color-sand);
  border: 1px solid rgba(255,251,250,.12);
  border-radius: var(--radius-lg);
  /* Invisible top padding bridges the gap — prevents menu from closing */
  padding: calc(var(--space-4)) 0 var(--space-2);
  margin-top: -10px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(73,38,29,.3);
}
/* dropdown arrow removed — using invisible bridge padding instead */
.site-nav__item:hover .site-nav__dropdown,
.site-nav__item:focus-within .site-nav__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.site-nav__dropdown a {
  display: block;
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--dark);
  text-decoration: none;
  transition: color 150ms, background 150ms;
  white-space: nowrap;
}
.site-nav__dropdown a:hover {
  color: var(--color-terracotta);
  background: rgba(255,251,250,.07);
}
.site-nav__dropdown .dropdown-divider {
  height: 1px;
  background: rgba(255,251,250,.08);
  margin: var(--space-2) 0;
}
/* Chevron on links with dropdowns */
.site-nav__link--has-dropdown::after {
  content: '↓' !important;
  font-size: .9em;
  padding-left: 5px;
  opacity: .6;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  position: static !important;
}

/* ══ SEARCH + FILTER COMBINED ═══════════════════════════════ */
.recipe-search-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-5) 0 var(--space-6);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
}
.recipe-search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}
.recipe-search-wrap__icon {
  position: absolute;
  left: var(--space-3);
  top: 50%; transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
  font-size: .95rem;
}
.recipe-search-input {
  width: 100%;
  padding: var(--space-3) var(--space-3) var(--space-3) 2.4rem;
  border: 1px solid var(--color-border);
  background: white;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 150ms;
}
.recipe-search-input:focus { border-color: var(--color-terracotta); }
.recipe-search-clear {
  position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--color-text-muted); cursor: pointer;
  font-size: 1rem; padding: 0; display: none;
}
.recipe-search-clear.visible { display: block; }

.filter-select-group { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.filter-select-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--color-text-muted); white-space: nowrap; }

.apply-filters-btn {
  padding: var(--space-2) var(--space-5);
  background: var(--color-dark);
  color: white;
  border: none;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms;
}
.apply-filters-btn:hover { background: var(--color-terracotta); }

/* ══ CAKE CARD COLLAPSIBLE ═══════════════════════════════════ */
.cake-details-toggle {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-border-light);
  margin-top: var(--space-3);
}
.cake-accordion-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) var(--space-5);
  background: var(--color-cream);
  border: none;
  border-top: 1px solid var(--color-border-light);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 150ms, color 150ms;
  text-align: left;
}
.cake-accordion-btn:first-child { border-top: none; }
.cake-accordion-btn:hover { background: var(--color-cream-light); color: var(--color-dark); }
.cake-accordion-btn .ca-chevron {
  font-size: .75rem;
  transition: transform 200ms;
  opacity: .5;
}
.cake-accordion-btn.open { color: var(--color-terracotta); }
.cake-accordion-btn.open .ca-chevron { transform: rotate(180deg); opacity: 1; }
.cake-accordion-body {
  display: none;
  padding: var(--space-4) var(--space-5);
  background: white;
  border-top: 1px solid var(--color-border-light);
}
.cake-accordion-body.open { display: block; }

/* ══ MULTIPLIER HORIZONTAL LAYOUT ═══════════════════════════ */
@media (min-width: 760px) {
  .multiplier-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
  }
  .multiplier-panel { height: 100%; }
}

/* Shopping list bar beneath servings */
.sl-below-servings {
  background: var(--color-yellow-08);
  border-bottom: 1px solid var(--color-yellow-25);
  padding: var(--space-3) var(--page-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.sl-below-servings__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* ══ MEAL PREP RECIPE — 2-COL IMAGE LAYOUT ══════════════════ */
.prep-content-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-10);
  align-items: start;
  padding: var(--space-10) var(--page-padding) var(--space-24);
  max-width: var(--max-width);
  margin: 0 auto;
}
@media(max-width:720px){ .prep-content-grid { grid-template-columns: 1fr; } }

.prep-recipe-image {
  position: sticky;
  top: calc(80px + var(--space-4));
}
.prep-recipe-image img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  box-shadow: 0 4px 20px rgba(73,38,29,.12);
}
.prep-recipe-image__placeholder {
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--color-sand) 0%, var(--color-cream-dark) 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-3);
  font-size: 3.5rem;
  border: 2px dashed var(--color-border);
}
.prep-recipe-image__placeholder span {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--color-text-muted);
}

/* ── Recipes section heading ────────────────────────────────── */
.recipes-section__heading {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 300;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: var(--space-3);
}


/* ── Mobile recipe intro: media-first, full-bleed ──────────── */
@media (max-width: 599px) {
  .recipe-intro {
    padding: 0 0 var(--space-6);
  }
  .recipe-intro__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .recipe-intro__media {
    order: -1;
    gap: 0;
  }
  .recipe-intro__hero img,
  .recipe-intro__hero .recipe-hero-placeholder {
    border-radius: 0;
    max-height: 300px;
    box-shadow: none;
  }
  .recipe-intro__gallery {
    padding: var(--space-2) 0;
  }
  .recipe-intro__content {
    padding: var(--space-5) var(--page-padding) 0;
  }
}

/* ── Recipe info grid (Tools / Cook Time / Yield + action buttons) ── */
.recipe-info-grid {
  margin-top: var(--space-6);
}
.recipe-info-grid__row--top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  overflow: hidden;
}
.recipe-info-cell {
  padding: var(--space-4) var(--space-5);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.recipe-info-cell:last-child { border-right: none; }
.recipe-info-cell__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--color-text-muted);
  font-weight: 600;
}
.recipe-info-cell__value {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 300;
  color: var(--color-dark);
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.recipe-info-grid__row--bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  overflow: hidden;
}
.info-grid-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: none;
  border-right: 1px solid var(--color-border);
  background: var(--color-blush-light, #fdf6f0);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-dark);
  letter-spacing: .05em;
  cursor: pointer;
  transition: background 150ms;
}
.info-grid-btn:last-child { border-right: none; }
.info-grid-btn:hover { background: var(--color-blush); }
.info-grid-btn__icon { font-size: 1rem; }
@media (max-width: 560px) {
  .recipe-info-grid__row--top {
    grid-template-columns: 1fr;
    margin-inline: auto;
    text-align: center;
  }
  .recipe-info-cell { border-right: none; border-bottom: 1px solid var(--color-border); }
  .recipe-info-cell:last-child { border-bottom: none; }
}