/*! CookEat Brand Styles
 * Version: 3.0.0
 * Last updated: December 12, 2025
 * Part of: SEI Design System
 * 
 * ========================================
 * TABLE OF CONTENTS
 * ========================================
 * 1. Color Palette (Brand-Specific Variables)
 * 2. Base Styles & Reset
 * 3. Typography
 * 4. Accessibility Helpers
 * 5. Layout Components
 *    5.1 Navigation Bar
 *    5.2 Hero Section
 *    5.3 Footer
 * 6. Interactive Components
 *    6.1 Buttons
 *    6.2 Cookie Consent
 *    6.3 Tooltips
 * 7. Page-Specific Styles (Common Across Brands)
 *    7.1 Subscription Flow
 *    7.2 Legal Policies Pages
 *    7.3 Landing Hero (Homepage)
 * 8. Brand-Specific Custom Styles
 * 9. Responsive & Media Queries
 */

/* ========================================
   1. COLOR PALETTE
   ======================================== */

@import url('/Common/css/viewport-contract.css');

/* Brand-Specific Colors - B2: Warm Glow (v7) */
:root {
  /* Core Brand Colors */
  --brand-primary: #F28C28;         /* Warm orange - main brand color (BrandPrimary) */
  --brand-accent: #F28C28;          /* Warm orange - primary CTA (BrandAccent) */
  --brand-accent-hover: #E86A1C;    /* Darker warm orange - accent hover state (BrandAccentHover) */
  
  /* Background Colors - B2: Warm Glow */
  --brand-bg-light: #FFF7ED;        /* Warm cream background */
  --brand-bg-warm: #FFF5E8;         /* Slightly warmer cream tone */
  --brand-bg-white: #FFFFFF;        /* Pure white */
  
  /* Text Colors */
  --brand-text: #3F2E1F;            /* Dark warm brown text */
  --brand-text-secondary: #666;     /* Medium gray for descriptions */
  --brand-btn-text: #ffffff;        /* White text on buttons (BrandBtnText) */
  
  /* UI Elements */
  --brand-border: #E0E0E0;          /* Light gray borders */
  --brand-shadow: rgba(0,0,0,0.08); /* Subtle shadow (user approved divider B) */
  --brand-banner-bg: #E86A1C;       /* Warm orange banner */
  --brand-tooltip-bg: #D65A10;      /* Tooltip darker than banner */
  
  /* Modal / Shared Component Mappings (used by Common/newsletter-loader.js) */
  --brand-title-color: var(--brand-primary);
  --brand-input-border: var(--brand-primary);
  --brand-input-text: var(--brand-text);
  --brand-input-bg: var(--brand-bg-white);
  --brand-input-invalid: #D32F2F;
  
  /* Navigation Component Variables - DO NOT CHANGE */
  --nav-height: 68px;
  --nav-bg: var(--brand-bg-white);
  --nav-text: var(--brand-text);
  --nav-hover-line: #bfbebe;
  --nav-active-line: #5c5c5c;

  /* Cook page UI tuning */
  /*--cook-filters-bg: #FFF4CC;      /* Soft pastel mustard (between banner + hero) */
  --cook-filters-bg: #FFEAC8;
}

/* ========================================
   2. BASE STYLES & RESET
   ======================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

/* Body intentionally NOT pinned to height: 100%. Doing so caps the body's
   height to one viewport, which constrains position: sticky children
   (e.g. the announcement banner) to stick for only ~1 screen of scroll
   before unsticking. min-height: 100vh below handles the short-content
   case without breaking sticky over the full page height. */

@media (min-width: 1400px) and (hover: hover) and (pointer: fine) {
  html {
    /* Desktop only: reserve scrollbar gutter symmetrically (both sides)
       so pages don't shift when content length changes. On mobile this
       can create a phantom side strip and interfere with scroll behavior. */
    scrollbar-gutter: stable both-edges;
  }
}

body {
  font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--brand-bg-light); /* Phase 0: Soft cream, no gradient */
  color: var(--brand-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overscroll-behavior-y: contain;
}

/* ========================================
   3. TYPOGRAPHY
   ======================================== */

h1 {
  color: var(--brand-accent-hover);
  font-size: 2.5rem;
  margin-bottom: 20px;
  font-weight: 700;
}

p {
  color: var(--brand-text);
  line-height: 1.8;
  margin-bottom: 15px;
  font-size: 1.1rem;
}

strong {
  color: var(--brand-accent-hover);
}

a {
  color: var(--brand-accent);
  text-decoration: none;
}

a:hover {
  color: var(--brand-accent-hover);
}

/* ========================================
   4. ACCESSIBILITY HELPERS
   ======================================== */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ========================================
   5. LAYOUT COMPONENTS
   ======================================== */

/* 5.1 NAVIGATION BAR
   ---------------------------------------- */

/* Announcement Banner — fixed-height ribbon; content always centred.
   Sticky top is driven by sticky-shell.js (below nav, or flush when nav hides). */
.announcement-banner {
  background: var(--brand-banner-bg);
  color: #fff !important;
  padding: 0 1rem;
  height: 48px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-weight: 700;
  position: sticky;
  top: var(--nav-height);
  z-index: 1400;
  transition: top 0.3s ease;
  flex-shrink: 0;
}

.site-nav.is-hidden-mobile + .announcement-banner {
  top: 0;
}

.announcement-banner p { 
  margin: 0;
  color: #fff !important;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

.announcement-banner .banner-cta {
  background: #fff;
  color: var(--brand-accent-hover);
  border: 0;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  transition: background-color 0.2s, transform 0.2s;
}

.announcement-banner .banner-cta:hover {
  background: #f0f0f0;
  transform: scale(1.05);
}

/* .banner-dismiss removed — banner is always visible (no dismiss) */

/* ─── Ad slots: fixed containers, image scales to fit, centred ─── */

/* In-feed: matches recipe card in grid (width from grid, fixed height) */
.ad-card--fullbleed {
    position: relative;
    overflow: hidden;
    background: rgba(0,0,0,0.01);
    cursor: pointer;
    height: 500px; /* fixed — image fills without expanding container */
}
.ad-card--fullbleed .ad-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}
.ad-card--fullbleed .ad-card-link {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    text-decoration: none;
}
.ad-card--fullbleed .ad-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* In-feed ad: text fallback when image is missing or fails to load */
.ad-card--fullbleed .ad-card-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 1.5rem;
    text-align: center;
    gap: 0.75rem;
    color: var(--brand-text);
}
.ad-card--fullbleed .ad-card-fallback-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0;
}
.ad-card--fullbleed .ad-card-fallback-desc {
    opacity: 0.8;
    font-size: 0.9rem;
    margin: 0;
    max-width: 280px;
}

/* Sidebar ad — grey wrapper fills full gutter height; ad image centred vertically */
.ad-rail-unit {
    height: 100vh;               /* fill the full viewport height so image centres vertically */
    width: 100%;
    background: rgba(139,69,19,0.08); /* warm brown tint — matches allergen indicator background */
    display: flex;
    align-items: center;         /* centre image vertically within the 100vh unit */
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.ad-rail-link {
    display: block;
    width: 100%;
    text-decoration: none;
}
.ad-rail-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100vh;           /* image never taller than the viewport */
    object-fit: contain;
}

/* Ad label badge — mirrors in-feed .ad-badge */
.ad-rail-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    pointer-events: none;
    user-select: none;
}

/* Banner ad mode */
.announcement-banner.banner-ad-mode a {
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 100%;   /* definite height so child img height:100% resolves correctly */
}
.announcement-banner.banner-ad-mode a:hover {
    text-decoration: underline;
}
.announcement-banner.banner-ad-mode img {
    height: 100%;
    width: auto;
    display: block;
}

/* Main Navigation Bar */
.site-nav {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--brand-border);
  position: sticky;
  top: 0;
  z-index: 1500;
  flex-shrink: 0;
  transition: top 0.3s ease;
}

/* While the nav is sliding away on mobile, keep it under the announcement banner
   (1400) so the transform animation does not paint over the banner. */
.site-nav.is-hidden-mobile {
  top: var(--site-nav-hide-offset, calc(-1 * var(--nav-height)));
  z-index: 1350;
}

/* If the user opens the mobile menu while the bar is in “hidden” scroll state,
   restore stacking above the banner so actions and overlays stay usable. */
.site-nav.is-hidden-mobile.nav-open {
  z-index: 1600;
}

.site-nav .nav-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0.75rem;
  min-height: var(--nav-height);
}

.site-nav .brand {
  text-decoration: none;
  display: inline-block;
}

.site-nav .brand img {
  height: calc(var(--nav-height) * 1.35);
  width: auto;
  display: block;
}

/* Compact nav: favicon-sized logo — keep in sync with <picture source media="(max-width: 959px)"> */
@media (max-width: 959px) {
  .site-nav .brand img {
    height: 36px;
    width: 36px;
  }
}

/* Hamburger Button */
.nav-toggle {
  margin-left: auto;
  background: transparent;
  border: 0;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.nav-toggle .hamburger,
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--nav-text);
  border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after {
  content: '';
  position: relative;
}

.nav-toggle .hamburger::before { transform: translateY(-7px); }
.nav-toggle .hamburger::after  { transform: translateY(5px); }

/* Navigation Links */
.nav-links {
  display: none;
  position: static;
  margin-left: auto;
  width: auto;
  min-width: 180px;
  max-width: 92vw;
  background: var(--nav-bg);
  flex-direction: column;
  padding: 0.4rem 0.25rem;
  gap: 0.125rem;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform 0.22s ease, opacity 0.18s ease;
  overflow: hidden;
}

.nav-links li {
  list-style: none;
}

.nav-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.6rem 0.5rem;
  color: var(--nav-text);
  text-decoration: none;
  font-weight: 600;
  position: relative;
  border-bottom: 0;
}

.nav-links a svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Underline Animation */
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: transparent;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.18s ease, background-color 0.18s ease;
}

.nav-links a:hover::after {
  transform: scaleX(1);
  background: var(--nav-hover-line);
}

.nav-links a.active::after {
  transform: scaleX(1);
  background: var(--nav-active-line);
}

.nav-links a.active:hover::after {
  background: var(--nav-active-line);
}

/* Navigation Action Items (Location, Login, Subscribe) */
.nav-actions {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
  align-items: center;
}

.nav-actions .nav-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--nav-text);
  background: transparent;
  text-decoration: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.16s ease, color 0.16s ease;
}

.nav-actions .nav-item svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
}

/* User Profile Dropdown */
.nav-item.user-profile {
  position: relative;
  display: inline-flex;
  z-index: 2001;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-accent);
  color: white;
  border: 2px solid var(--brand-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  transition: transform 0.16s ease, background 0.16s ease;
  padding: 0;
}

/* User initials circle (navbar logged-in state) */
.user-initials-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
  transition: transform 0.16s ease, background 0.16s ease;
}

.nav-item.login.logged-in:hover .user-initials-circle {
  background: var(--brand-accent-hover);
  transform: scale(1.1);
}

.user-avatar:hover {
  background: var(--brand-accent-hover);
  border-color: var(--brand-accent-hover);
  transform: scale(1.05);
}

.user-avatar .initials {
  display: block;
  line-height: 1;
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 180px;
  padding: 0.75rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 2000;
  pointer-events: none;
}

.user-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.user-info {
  padding: 0.5rem 1rem;
}

.user-info .username {
  display: block;
  font-weight: 600;
  color: var(--brand-text);
  font-size: 14px;
}

.user-dropdown a,
.user-dropdown button {
  display: block;
  width: 100%;
  padding: 0.6rem 1rem;
  text-align: left;
  color: var(--brand-text);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.16s ease;
}

.user-dropdown a:hover,
.user-dropdown button:hover {
  background: #f5f5f5;
}

/* Mobile Menu State - handled in media query */

/* 5.2 HERO SECTION
   ---------------------------------------- */

main {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  /* Clip stray horizontal bleed from filter bars / touch-scroll rails without
     affecting sticky nav + banner (they sit outside main). Restored after the
     Plan module contract dropped the old main:has(.page-rail-wrap--plan) clip. */
  overflow-x: clip;
}

.page-rail-wrap,
.page-rail-main {
  min-width: 0;
  max-width: 100%;
}

/* Landing hero: fill viewport between nav+banner and footer */
main:has(.landing-hero) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 20px;
}

/* 5.3 FOOTER
   ---------------------------------------- */

.site-footer {
  background-color: rgba(255, 255, 255, 0.8);
  border-top: 1px solid var(--brand-border);
  padding: 16px 20px;
}

.site-footer .footer-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.site-footer p {
  color: var(--brand-text);
  margin-bottom: 8px;
  font-size: 0.85rem;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.site-footer a {
  margin: 0 10px;
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: var(--brand-accent-hover);
}

.site-footer p a {
  color: inherit;
  text-decoration: none;
  margin: 0;
}

.site-footer p a:hover {
  color: var(--brand-accent-hover);
}

/* Footer policy icons - show text by default, hide icons */
.site-footer nav a .footer-icon {
  display: none;
  width: 20px;
  height: 20px;
}

/* Style SVG child elements (path, circle, line, polyline) within footer icons */
.site-footer nav a .footer-icon path,
.site-footer nav a .footer-icon circle,
.site-footer nav a .footer-icon line,
.site-footer nav a .footer-icon polyline {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-footer nav a .footer-text {
  display: inline;
}

/* Footer legal: full copy on desktop, shorter line on narrow viewports */
.site-footer .footer-copy-mobile {
  display: none;
}

/* ========================================
   6. INTERACTIVE COMPONENTS
   ======================================== */

/* 6.1 BUTTONS
   ---------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 1rem;
}

/* Primary Button */
.button.primary {
  background-color: var(--brand-accent);
  color: white;
}

.button.primary:hover {
  background-color: var(--brand-accent-hover);
  color: var(--brand-btn-text);
  transform: scale(1.05);
  text-decoration: none;
}

/* Secondary Button */
.button.secondary {
  background-color: transparent;
  border: 2px solid var(--brand-accent);
  color: var(--brand-accent-hover);
}

.button.secondary:hover {
  background-color: var(--brand-accent);
  color: white;
  transform: scale(1.05);
  text-decoration: none;
}

/* Newsletter Button Icon */
.newsletter-btn .mail-icon {
  width: 18px;
  height: 18px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.9;
}

/* 6.2 COOKIE CONSENT
   ---------------------------------------- */

/* Cookie Modal (Preferences Popup) */
.cookie-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  animation: fadeIn 0.3s ease-out;
  padding: 20px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cookie-modal-inner {
  position: relative;
  background: var(--brand-bg-white);
  padding: 30px;
  border-radius: 12px;
  max-width: 450px;
  width: 100%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  animation: popUp 0.4s ease-out;
}

@keyframes popUp {
  from {
    transform: scale(0.9) translateY(-20px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.cookie-modal-inner h3 {
  margin: 0 0 10px 0;
  color: var(--brand-primary);
  font-size: 1.3rem;
}

.cookie-modal-inner .close {
  position: absolute;
  right: 18px;
  top: 12px;
  background: transparent;
  border: none;
  font-size: 28px;
  color: var(--brand-text, #333);
  cursor: pointer;
  padding: 6px;
  line-height: 1;
  transition: opacity 0.2s;
}

.cookie-modal-inner .close:hover {
  opacity: 0.7;
}

.cookie-modal-inner .close:focus {
  outline: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
}

.cookie-modal-inner p {
  margin: 0 0 20px 0;
  color: #666;
  font-size: 0.95rem;
}

.cookie-toggle {
  margin: 12px 0;
}

.cookie-toggle label {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--brand-primary);
  font-size: 0.95rem;
}

.cookie-toggle input[type="checkbox"] {
  margin-right: 12px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--brand-accent);
}

.cookie-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.cookie-modal-actions .btn {
  flex: 1;
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  font-size: 0.95rem;
}

.cookie-modal-actions .btn.accept {
  background: var(--brand-accent);
  color: #fff;
}

.cookie-modal-actions .btn.reject-all {
  background: #e74c3c;
  color: #fff;
  border: 1px solid #c0392b;
}

.cookie-modal-actions .btn.reject-all:hover {
  background: #c0392b;
}

.cookie-modal-actions .btn.save-prefs {
  background: #f5f5f5;
  color: var(--brand-primary);
  border: 1px solid #ddd;
}

/* Cookie modal — mobile responsive */
@media (max-width: 600px) {
  .cookie-modal {
    padding: 10px;
    align-items: flex-end;
  }

  .cookie-modal-inner {
    padding: 20px 16px;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 12px 12px 0 0;
  }

  .cookie-modal-inner h3 {
    font-size: 1.1rem;
  }

  .cookie-modal-inner p {
    font-size: 0.85rem;
  }

  .cookie-modal-actions {
    flex-direction: column;
    gap: 8px;
  }

  .cookie-modal-actions .btn {
    font-size: 0.9rem;
    padding: 12px 16px;
  }

  .cookie-toggle label {
    font-size: 0.9rem;
  }
}

/* Nutrition breakdown modal (Discover / Cook) */
.nutrition-breakdown-modal {
  z-index: 10050;
  align-items: flex-start;
  padding-top: 24px;
  padding-bottom: 24px;
  overflow-y: auto;
}

.nutrition-breakdown-modal__inner {
  max-width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.nutrition-breakdown-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(232, 245, 175, 0.3);
  border: none;
  font-size: 1.5em;
  color: var(--brand-text, #222);
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.3s;
  line-height: 1;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nutrition-breakdown-modal__close:hover {
  opacity: 1;
  background: var(--brand-bg-light, #faf7f4);
  transform: rotate(90deg) scale(1.1);
}

.nutrition-breakdown-modal__close:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.12);
  outline-offset: 2px;
}

.nutrition-breakdown-modal__subtitle {
  margin: 0 0 10px 0;
  font-size: 0.85rem;
  color: var(--brand-text-muted, #666);
}

.nutrition-breakdown-modal__inner h3 {
  padding-right: 40px;
}

.nutrition-breakdown-modal__body {
  margin-top: 2px;
}

.nutrition-breakdown-modal__loading,
.nutrition-breakdown-modal__error {
  color: var(--brand-text-muted, #666);
  font-size: 0.95rem;
}

.nutrition-breakdown-modal__error {
  color: #b35;
  font-weight: 600;
}

.nutrition-breakdown-modal__lead {
  margin: 0 0 16px 0;
  color: #555;
  font-size: 0.92rem;
  line-height: 1.5;
}

.nutrition-breakdown-modal__preview-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-text-muted, #666);
  margin: 0 0 8px 0;
}

.nutrition-breakdown-modal__match {
  margin: 0 0 12px 0;
  font-size: 0.82rem;
  color: var(--brand-text-muted, #666);
}

.nutrition-breakdown-modal__educator {
  margin: -4px 0 12px 0;
  font-size: 0.84rem;
  color: #555;
  line-height: 1.45;
}

.nutrition-breakdown-modal__post-footnote {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.nutrition-breakdown-modal__post-footnote-lines {
  margin: 0 0 6px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--brand-text-muted, #777);
  font-weight: 400;
}

.nutrition-breakdown-modal__post-footnote-muted {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--brand-text-muted, #999);
  font-weight: 400;
}

.import-save-nutrition-note {
  margin: 16px 0 0;
  padding: 12px 14px;
  font-size: 0.88em;
  color: var(--brand-text-muted, #8a7a72);
  background: var(--brand-bg-light, #faf7f4);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  line-height: 1.45;
}

.import-preview-creator-stated {
  margin: 0 0 8px;
  font-size: 0.86em;
  color: var(--brand-text-muted, #8a7a72);
}

.nutrition-breakdown-modal .nutrition-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: visible;
  padding-bottom: 0;
}

.nutrition-breakdown-modal .nutrition-totals--single-row .total-card {
  min-width: 0;
  max-width: none;
}

.nutrition-breakdown-modal .nutrition-totals--compact {
  margin-bottom: 16px;
}

.nutrition-breakdown-modal .total-card {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
}

.nutrition-breakdown-modal .total-card .value {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--brand-text, #222);
  white-space: nowrap;
}

.nutrition-breakdown-modal .total-card .label {
  font-size: 0.6rem;
  color: #666;
  text-transform: uppercase;
  margin-top: 4px;
  line-height: 1.2;
}

.nutrition-breakdown-modal .total-card .per-serving {
  font-size: 0.68rem;
  color: #888;
  margin-top: 4px;
}

.nutrition-breakdown-modal__th-nutrient {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}

.nutrition-breakdown-modal__pct-icon {
  font-weight: 800;
  line-height: 1;
}

.nutrition-breakdown-modal__pct-cal-icon {
  display: inline-flex;
  align-items: center;
}

.nutrition-breakdown-modal__col-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
}

.nutrition-breakdown-modal .breakdown-table thead .nutrition-breakdown-modal__col-icon.stroke-icon {
  color: inherit;
}

.nutrition-breakdown-modal .breakdown-table td strong {
  font-weight: 800;
  color: var(--brand-text, #111);
}

.nutrition-breakdown-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 8px;
}

.nutrition-breakdown-modal .breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.nutrition-breakdown-modal .breakdown-table th,
.nutrition-breakdown-modal .breakdown-table td {
  padding: 6px 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  text-align: left;
  vertical-align: top;
}

.nutrition-breakdown-modal .breakdown-table thead th {
  background: rgba(0, 0, 0, 0.03);
  font-weight: 700;
  color: #555;
  white-space: nowrap;
}

.nutrition-breakdown-modal .breakdown-table tr.ing-row-warn {
  background: #fffef5;
}

.nutrition-breakdown-modal .breakdown-table tr.nutrition-today-row {
  background: rgba(0, 0, 0, 0.04);
}

.nutrition-breakdown-modal .breakdown-table tr.nutrition-post-row,
.nutrition-breakdown-modal .breakdown-table tr.nutrition-variation-row {
  background: transparent;
}

.nutrition-breakdown-modal .breakdown-table tr.nutrition-post-row td,
.nutrition-breakdown-modal .breakdown-table tr.nutrition-variation-row td {
  font-size: 0.72rem;
  color: var(--brand-text-muted, #777);
  border-bottom: none;
  padding-top: 4px;
  padding-bottom: 4px;
}

.nutrition-breakdown-modal .breakdown-table tr.nutrition-post-row td strong,
.nutrition-breakdown-modal .breakdown-table tr.nutrition-variation-row td strong {
  font-weight: 600;
  color: var(--brand-text-muted, #666);
}

.nutrition-breakdown-modal .nutrition-variation--ok {
  color: #3d7a4a;
}

.nutrition-breakdown-modal .nutrition-variation--warn {
  color: #a65c2e;
}

.nutrition-breakdown-modal .breakdown-table .no-data {
  color: #888;
}

.nutrition-source-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  background: #eee;
  color: #444;
}

.nutrition-breakdown-upsell {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 138, 61, 0.12), rgba(255, 138, 61, 0.06));
  border: 1px solid rgba(255, 138, 61, 0.35);
}

.nutrition-breakdown-upsell__text {
  margin: 0 0 12px 0;
  font-size: 0.9rem;
  color: var(--brand-text, #333);
  line-height: 1.45;
}

.nutrition-breakdown-upsell__cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  padding: 10px 18px !important;
  border-radius: 8px;
  flex: none !important;
}

.nutrition-breakdown-modal__actions {
  margin-top: 8px;
}

.nutrition-breakdown-modal__actions .btn {
  flex: 1;
}

@media (max-width: 768px) {
  .nutrition-breakdown-modal .breakdown-table .nm-desktop-only {
    display: none;
  }

  .nutrition-breakdown-modal__th-nutrient .nm-th-label {
    display: none;
  }

  .nutrition-breakdown-modal__th-nutrient {
    justify-content: center;
    gap: 0;
  }
}

/* Creator mode — shared (create-recipe toggle bar + internal labs placeholder grid) */
.creator-mode-bar {
  margin: 0 0 24px 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 138, 61, 0.08), rgba(107, 158, 111, 0.08));
  border: 1px solid rgba(90, 117, 102, 0.2);
}

.creator-mode-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.creator-mode-bar__label {
  font-weight: 700;
  color: var(--brand-text, #333);
  font-size: 1.05rem;
}

.creator-mode-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
}

.creator-mode-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.creator-mode-switch__slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 28px;
  transition: background 0.2s;
}

.creator-mode-switch__slider::before {
  content: '';
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.creator-mode-switch input:checked + .creator-mode-switch__slider {
  background: var(--brand-accent, #ff8a3d);
}

.creator-mode-switch input:checked + .creator-mode-switch__slider::before {
  transform: translateX(24px);
}

.creator-mode-switch input:focus-visible + .creator-mode-switch__slider {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.creator-mode-bar__hint {
  margin: 10px 0 0 0;
  font-size: 0.88rem;
  color: #555;
  line-height: 1.45;
}

.creator-mode-bar__hint-preview {
  opacity: 0.9;
}

/* Compact bar between create tabs and Sous Chef title */
.creator-mode-bar--inline {
  margin: 0 0 0 0;
  padding: 10px 16px;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: 1px solid rgba(90, 117, 102, 0.15);
  border-bottom: 1px solid rgba(90, 117, 102, 0.12);
  background: linear-gradient(135deg, rgba(255, 138, 61, 0.06), rgba(107, 158, 111, 0.06));
}

.creator-mode-bar--inline .creator-mode-bar__inner {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.creator-mode-bar--inline .creator-mode-bar__controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.creator-mode-bar--inline .creator-mode-bar__label {
  font-size: 0.92rem;
  font-weight: 600;
}

.creator-mode-bar--inline .creator-mode-bar__hint--inline {
  margin: 0;
  flex: 1 1 220px;
  min-width: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #555;
}

/* Subtle inline creator toggle used on Create + Create+ */
.creator-mode-inline {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 18px 4px 18px;
}

.creator-mode-inline__controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.creator-mode-inline__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(51, 51, 51, 0.72);
  letter-spacing: 0.01em;
}

.creator-mode-inline .creator-mode-switch {
  width: 40px;
  height: 22px;
}

.creator-mode-inline .creator-mode-switch__slider {
  border-radius: 999px;
}

.creator-mode-inline .creator-mode-switch__slider::before {
  width: 16px;
  height: 16px;
  left: 3px;
  bottom: 3px;
}

.creator-mode-inline .creator-mode-switch input:checked + .creator-mode-switch__slider::before {
  transform: translateX(18px);
}

/* Public create page: Creator tools not ready — messaging only */
.creator-coming-soon {
  margin-bottom: 28px;
  padding: 22px 20px;
  border-radius: 12px;
  border: 1px solid rgba(90, 117, 102, 0.25);
  background: rgba(255, 255, 255, 0.9);
}

.creator-coming-soon__title {
  margin: 0 0 10px 0;
  font-size: 1.2rem;
  color: var(--brand-text, #333);
}

.creator-coming-soon__lede {
  margin: 0 0 14px 0;
  font-size: 0.95rem;
  color: #444;
  line-height: 1.5;
}

.creator-coming-soon__list {
  margin: 0 0 18px 1.1rem;
  padding: 0;
  font-size: 0.88rem;
  color: #555;
  line-height: 1.45;
}

.creator-coming-soon__list li {
  margin-bottom: 6px;
}

.creator-coming-soon__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.creator-coming-soon__actions a.primary-action,
.creator-coming-soon__actions .primary-action {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.creator-coming-soon__actions .btn-text {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-accent, #ff8a3d);
  cursor: pointer;
  text-decoration: underline;
}

/* Internal labs only — placeholder tool grid (not linked from production) */
.creator-workspace {
  margin-bottom: 28px;
  padding: 20px;
  border-radius: 12px;
  border: 1px dashed rgba(90, 117, 102, 0.35);
  background: rgba(255, 255, 255, 0.65);
}

.creator-workspace__title {
  margin: 0 0 8px 0;
  font-size: 1.25rem;
  color: var(--brand-text, #333);
}

.creator-workspace__lede {
  margin: 0 0 18px 0;
  font-size: 0.92rem;
  color: #555;
  line-height: 1.45;
}

.creator-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.creator-tool-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 14px 14px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  cursor: pointer;
  font-family: 'Quicksand', sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
}

a.creator-tool-card {
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

.creator-tool-card__open-hint {
  margin-top: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-accent, #ff8a3d);
  letter-spacing: 0.02em;
}

.creator-tool-card:hover,
.creator-tool-card:focus-visible {
  border-color: var(--brand-accent, #ff8a3d);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  outline: none;
}

.creator-tool-card__icon {
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: 8px;
}

.creator-tool-card__name {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--brand-text, #222);
  margin-bottom: 6px;
}

.creator-tool-card__desc {
  font-size: 0.82rem;
  color: #666;
  line-height: 1.35;
  flex: 1;
}

.creator-tool-card__badge {
  margin-top: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 138, 61, 0.15);
  color: var(--brand-accent-hover, #c65d1a);
}

/* Create+ labs (/create-plus) — component library + merge preview */
.create-plus-labs-page {
  background: var(--brand-bg-light, #f8f9fa);
  min-height: 100vh;
  padding: 28px 16px 48px;
  font-family: 'Quicksand', sans-serif;
  color: var(--brand-text, #333);
}

.create-plus-labs {
  max-width: 1040px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px var(--brand-shadow, rgba(0, 0, 0, 0.08));
  padding: 28px 24px 36px;
}

.create-plus-labs__header {
  margin-bottom: 24px;
}

.create-plus-labs__title {
  margin: 0 0 8px 0;
  font-size: 1.35rem;
  color: var(--brand-text, #333);
}

.create-plus-labs__lede {
  margin: 0 0 14px 0;
  font-size: 0.95rem;
  color: #555;
  line-height: 1.5;
  max-width: 52rem;
}

.create-plus-labs__nav {
  font-size: 0.85rem;
}

.create-plus-labs__nav a {
  color: var(--brand-accent, #f28c28);
  font-weight: 600;
  text-decoration: none;
}

.create-plus-labs__nav a:hover {
  text-decoration: underline;
}

.create-plus-labs__nav-sep {
  opacity: 0.35;
  margin: 0 10px;
}

.create-plus-labs__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 880px) {
  .create-plus-labs__grid {
    grid-template-columns: 1fr;
  }
}

.create-plus-labs__panel {
  border: 1px solid rgba(90, 117, 102, 0.2);
  border-radius: 12px;
  padding: 18px 16px 20px;
  background: rgba(255, 255, 255, 0.95);
}

.create-plus-labs__panel-title {
  margin: 0 0 6px 0;
  font-size: 1.05rem;
  color: var(--brand-text, #333);
}

.create-plus-labs__panel-hint {
  margin: 0 0 16px 0;
  font-size: 0.82rem;
  color: #666;
  line-height: 1.4;
}

.create-plus-labs__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.create-plus-labs__label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brand-text, #333);
}

.create-plus-labs__optional {
  font-weight: 600;
  opacity: 0.75;
}

.create-plus-labs__input,
.create-plus-labs__textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--brand-border, #e0e0e0);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--brand-text, #333);
  background: var(--brand-input-bg, #fff);
}

.create-plus-labs__input:focus,
.create-plus-labs__textarea:focus {
  outline: 2px solid var(--brand-primary, #f28c28);
  outline-offset: 1px;
}

.create-plus-labs__form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.create-plus-labs__btn {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
}

.create-plus-labs__btn--primary {
  background: var(--brand-accent, #f28c28);
  color: var(--brand-btn-text, #fff);
  border-color: var(--brand-accent, #f28c28);
}

.create-plus-labs__btn--primary:hover {
  background: var(--brand-accent-hover, #e86a1c);
  border-color: var(--brand-accent-hover, #e86a1c);
}

.create-plus-labs__btn--ghost {
  background: transparent;
  color: var(--brand-text, #333);
  border-color: var(--brand-border, #ddd);
}

.create-plus-labs__btn--ghost:hover {
  border-color: var(--brand-accent, #f28c28);
  color: var(--brand-accent-hover, #e86a1c);
}

.create-plus-labs__empty {
  margin: 0 0 12px 0;
  font-size: 0.88rem;
  color: #666;
  font-style: italic;
}

.create-plus-labs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.create-plus-labs__lib-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fafafa;
}

.create-plus-labs__lib-cb {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: var(--brand-accent, #f28c28);
  flex-shrink: 0;
}

.create-plus-labs__lib-body {
  flex: 1;
  min-width: 0;
}

.create-plus-labs__lib-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--brand-text, #222);
}

.create-plus-labs__lib-note {
  font-size: 0.8rem;
  color: #666;
  margin-top: 4px;
  line-height: 1.35;
}

.create-plus-labs__icon-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--brand-border, #ddd);
  border-radius: 8px;
  background: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--brand-text, #333);
}

.create-plus-labs__icon-btn:hover:not(:disabled) {
  border-color: var(--brand-accent, #f28c28);
  color: var(--brand-accent-hover, #e86a1c);
}

.create-plus-labs__icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.create-plus-labs__merge-order {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;
  counter-reset: merge;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.create-plus-labs__merge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px dashed rgba(90, 117, 102, 0.35);
  background: rgba(255, 247, 237, 0.5);
}

.create-plus-labs__merge-label {
  font-weight: 600;
  font-size: 0.9rem;
}

.create-plus-labs__merge-actions {
  display: flex;
  gap: 6px;
}

.create-plus-labs__merge-actions-bar {
  margin-bottom: 18px;
}

.create-plus-labs__preview-heading {
  margin: 0 0 8px 0;
  font-size: 0.95rem;
  color: var(--brand-text, #333);
}

.create-plus-labs__preview {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(90, 117, 102, 0.2);
  background: linear-gradient(135deg, rgba(242, 140, 40, 0.06), rgba(107, 158, 111, 0.06));
  min-height: 4rem;
  font-size: 0.9rem;
}

.create-plus-labs__preview-placeholder {
  margin: 0;
  color: #777;
  font-size: 0.88rem;
}

.create-plus-labs__preview-title {
  margin: 0 0 12px 0;
  font-size: 1.05rem;
  color: var(--brand-text, #222);
  line-height: 1.35;
}

.create-plus-labs__preview-parts {
  margin: 0;
  padding-left: 1.2rem;
  color: #444;
  line-height: 1.45;
}

.create-plus-labs__preview-parts li {
  margin-bottom: 10px;
}

.create-plus-labs__preview-note {
  margin-top: 4px;
  font-size: 0.85rem;
  color: #666;
  font-weight: 400;
}

.creator-labs-banner {
  margin: 0 0 20px 0;
  padding: 12px 16px;
  border-radius: 10px;
  background: #fff8e6;
  border: 1px solid #ffe082;
  font-size: 0.88rem;
  color: #5d4037;
  line-height: 1.45;
}

/* Feature gate modal (Creator / paywalled features) */
.feature-gate-modal {
  z-index: 10060;
}

.feature-gate-modal__inner {
  max-width: 480px;
}

.feature-gate-modal__intro {
  margin: 0 0 12px 0;
  color: #555;
  font-size: 0.92rem;
  line-height: 1.45;
}

.feature-gate-modal__list {
  margin: 0 0 16px 1.1rem;
  padding: 0;
  color: #444;
  font-size: 0.88rem;
  line-height: 1.5;
}

.feature-gate-modal__list li {
  margin-bottom: 6px;
}

.feature-gate-modal__actions {
  flex-direction: column;
}

.feature-gate-modal__actions .btn {
  width: 100%;
}

/* 6.3 TOOLTIPS
   ---------------------------------------- */

.tooltip-parent {
  position: relative;
  display: inline-flex;
  overflow: visible;
}

.custom-tooltip {
  visibility: hidden;
  opacity: 0;
  width: max-content;
  max-width: 240px;
  background: var(--brand-tooltip-bg);
  color: var(--brand-btn-text);
  text-align: center;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.75rem;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  position: absolute;
  z-index: 1200;
  left: 50%;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Discover: spicy filter button tones (icons use currentColor) */
.discover-icon-btn.tone-spice-mild { color: #F4A259; }
.discover-icon-btn.tone-spice-medium { color: #E85D04; }
.discover-icon-btn.tone-spice-hot { color: #DC2626; }

/* Only show hover-tooltips when the device truly supports hover (avoids sticky hover on touch). */
@media (hover: hover) and (pointer: fine) {
  .tooltip-parent:hover .custom-tooltip {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}

/* Hide while pressed; hide keyboard focus only — keep hover visible after mouse click */
.tooltip-parent:active .custom-tooltip {
  visibility: hidden !important;
  opacity: 0 !important;
}

.tooltip-parent:focus-visible:not(:hover) .custom-tooltip {
  visibility: hidden !important;
  opacity: 0 !important;
}

.cook-filter-btn.tooltip-parent {
  position: relative;
  overflow: visible;
}

/* ========================================
   7. PAGE-SPECIFIC STYLES (Common Across Brands)
   ======================================== */

/* 7.1 SUBSCRIPTION FLOW
   ---------------------------------------- */

/* Confirmation Page Elements */
.confirm-logo {
  max-width: 200px;
  margin-bottom: 20px;
}

.confirm-section {
  display: none;
}

.confirm-section.show {
  display: block;
}

/* Subscription Flow Container */
.subscription-flow {
  font-family: Arial, Helvetica, sans-serif;
  background: var(--brand-bg-light);
  color: var(--brand-text);
  min-height: 100vh;
}

.subscription-flow .container {
  max-width: 480px;
  margin: 40px auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 24px;
}

.subscription-flow .confirm-container {
  max-width: 480px;
  margin: 100px auto;
  padding: 40px 24px;
  text-align: center;
  background: var(--brand-bg-white);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.subscription-flow .brand-logo {
  max-width: 120px;
  height: auto;
  margin-bottom: 24px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Loading Spinner */
.subscription-flow .spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--brand-accent);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Status Messages */
.subscription-flow .success { 
  color: #28a745; 
}

.subscription-flow .error { 
  color: #dc3545; 
}

.subscription-flow .message-box {
  margin: 20px 0;
  padding: 20px;
  border-radius: 8px;
}

.subscription-flow .success-box {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
}

.subscription-flow .error-box {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
}

/* Subscription Flow Buttons */
.subscription-flow .button,
.subscription-flow button,
.subscription-flow input[type="submit"] {
  display: inline-block;
  padding: 12px 24px;
  background: var(--brand-accent);
  color: var(--brand-btn-text);
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  border: none;
  margin: 24px 0;
  transition: background 0.2s, transform 0.2s;
  cursor: pointer;
}

.subscription-flow .button:hover,
.subscription-flow button:hover,
.subscription-flow input[type="submit"]:hover {
  background: var(--brand-accent-hover);
  color: var(--brand-btn-text);
  transform: scale(1.05);
  text-decoration: none;
}

.subscription-flow .home-link {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 30px;
  background-color: var(--brand-accent);
  color: var(--brand-btn-text);
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  font-size: 1.1rem;
  transition: background 0.2s, transform 0.2s;
}

.subscription-flow .home-link:hover {
  background: var(--brand-accent-hover);
  color: var(--brand-btn-text);
  transform: scale(1.05);
  text-decoration: none;
}

/* Subscription Flow Links */
.subscription-flow a {
  color: var(--brand-accent);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
}

.subscription-flow a:hover {
  color: var(--brand-accent-hover);
  text-decoration: underline;
  cursor: pointer;
  transform: scale(1.05);
}

.subscription-flow .footer {
  font-size: 12px;
  color: #666666;
  text-align: center;
  padding: 20px 0 0 0;
  background: none;
}

/* 7.2 MY ACCOUNT PAGE
   ---------------------------------------- */

.account-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
}

.account-container h1 {
  color: var(--brand-text);
  margin-bottom: 2rem;
}

.account-section {
  background: #fff;
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.account-section h2 {
  color: var(--brand-text);
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--brand-bg-light);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  color: var(--brand-text);
  margin-bottom: 0.5rem;
}

.form-group input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.form-group input:focus {
  outline: none;
  border-color: var(--brand-accent);
}

.form-group input:read-only {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.help-text {
  display: block;
  font-size: 0.875rem;
  color: #666;
  margin-top: 0.25rem;
}

.form-message {
  border-radius: 4px;
}

.form-message:not(:empty) {
  margin: 1rem 0;
  padding: 1rem;
}

.form-message p {
  margin: 0;
}

.form-message .success {
  color: #2e7d32;
  background-color: #e8f5e9;
}

.form-message .error {
  color: #c62828;
  background-color: #ffebee;
}

/* My Preferences toggle groups (My Account page) */
.pref-toggle-groups {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.pref-toggle-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pref-group-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--brand-text);
}

.pref-icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* Pill-style toggle buttons (icon + text) for My Preferences */
.pref-pill {
  --break-color: var(--brand-bg-white);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem 0.35rem 0.4rem;
  border: 1.5px solid var(--brand-border);
  border-radius: 20px;
  background: var(--brand-bg-white);
  color: var(--brand-text);
  cursor: pointer;
  font-size: 0.82rem;
  font-family: inherit;
  line-height: 1;
  transition: border-color 0.2s, background-color 0.2s, transform 0.15s;
}

@media (hover: hover) and (pointer: fine) {
  .pref-pill:hover {
    border-color: var(--brand-text);
    transform: scale(1.03);
  }
}

.pref-pill.is-active {
  --break-color: #fdf2eb;
  border-color: var(--brand-accent);
  background: rgba(232, 93, 4, 0.08);
}

.pref-pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.pref-pill-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.pref-pill.stroke-icon .pref-pill-icon svg {
  fill: none;
  stroke: currentColor;
}

.pref-pill .break-line {
  stroke: var(--break-color) !important;
  stroke-width: 2.5px !important;
}

.pref-pill-label {
  white-space: nowrap;
}

.pref-pill.tone-spice-mild { color: #F4A259; }
.pref-pill.tone-spice-medium { color: #E85D04; }
.pref-pill.tone-spice-hot { color: #DC2626; }
.pref-pill.tone-green { color: #2e7d32; }
.pref-pill.tone-blue { color: #1565c0; }
.pref-pill.tone-avocado { color: #689f38; }
.pref-pill.tone-neutral { color: #8B4513; }

.btn-primary {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: var(--brand-accent);
  color: var(--brand-btn-text);
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.btn-primary:hover {
  background: var(--brand-accent-hover);
  transform: translateY(-1px);
}

.btn-primary:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

.button-row {
  margin-top: 1rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.btn-sm {
  padding: 0.4rem 1rem;
  font-size: 0.875rem;
}

/* ── Creator Hub ──────────────────────────────────────── */
.creator-hub-container {
  max-width: 900px;
  margin: 2rem auto;
  padding: 2rem;
}

.creator-hub-container h1 {
  color: var(--brand-text);
  margin-bottom: 2rem;
}

/* Stats grid — 4 cards in a row */
.creator-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.creator-stat-card {
  background: #fff;
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  text-align: center;
}

.stat-label {
  font-size: 0.8rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--brand-text);
  line-height: 1.1;
}

.stat-sub {
  font-size: 0.8rem;
  color: #999;
  margin-top: 0.25rem;
}

.stat-trend {
  font-size: 0.75rem;
  color: #666;
  margin-top: 0.35rem;
}

/* Badge progress */
.badge-current {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.badge-hat-display {
  flex-shrink: 0;
}

.badge-level-label {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brand-text);
}

.badge-progress-section h3 {
  font-size: 1rem;
  color: var(--brand-text);
  margin-bottom: 0.75rem;
}

.badge-progress-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.badge-progress-label {
  width: 90px;
  font-size: 0.85rem;
  color: #555;
  flex-shrink: 0;
}

.badge-progress-bar {
  flex: 1;
  height: 8px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
}

.badge-progress-fill {
  height: 100%;
  background: var(--brand-accent);
  border-radius: 4px;
  transition: width 0.4s ease;
}

.badge-progress-fill.met {
  background: #4caf50;
}

.badge-progress-value {
  font-size: 0.8rem;
  color: #666;
  white-space: nowrap;
  min-width: 80px;
  text-align: right;
}

.badge-max {
  color: #FFD700;
  font-weight: 600;
}

/* Creator recipe controls */
.creator-recipe-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.creator-sort-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.creator-sort-bar label {
  font-size: 0.875rem;
  color: #666;
}

.creator-sort-bar select {
  padding: 0.35rem 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.875rem;
  font-family: inherit;
}

/* Creator recipes table */
.creator-recipes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.creator-recipes-table th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 2px solid var(--brand-bg-light);
  color: #666;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.creator-recipes-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #f0f0f0;
  color: var(--brand-text);
}

.creator-recipes-table a {
  color: var(--brand-accent);
  text-decoration: none;
}

.creator-recipes-table a:hover {
  text-decoration: underline;
}

.recipe-status {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-published {
  background: #e8f5e9;
  color: #2e7d32;
}

.status-draft {
  background: #fff3e0;
  color: #e65100;
}

/* Earnings summary */
.earnings-summary {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.earnings-total {
  display: flex;
  flex-direction: column;
}

.earnings-amount {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--brand-text);
  line-height: 1.1;
}

.earnings-label {
  font-size: 0.85rem;
  color: #888;
}

.earnings-metrics {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.earnings-metrics span {
  font-size: 0.875rem;
  color: #555;
}

/* Responsive: stats grid stacks on mobile */
@media (max-width: 600px) {
  .creator-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .creator-hub-container {
    padding: 1rem;
  }

  .stat-value {
    font-size: 1.5rem;
  }

  .badge-progress-row {
    flex-wrap: wrap;
  }

  .badge-progress-label {
    width: 100%;
  }

  .badge-progress-value {
    min-width: auto;
    text-align: left;
  }

  .creator-recipes-table th:nth-child(n+4),
  .creator-recipes-table td:nth-child(n+4) {
    display: none;
  }

  .earnings-amount {
    font-size: 1.75rem;
  }
}

#newsletterModal {
  display: none;
}

.status-info {
  background: var(--brand-bg-light);
  padding: 1rem;
  border-radius: 4px;
}

.status-info p {
  margin-bottom: 0.5rem;
}

.status-info p:last-child {
  margin-bottom: 0;
}

.status-info strong {
  color: var(--brand-text);
}

/* 7.2.1 APPEAL SECTION (My Account)
   ---------------------------------------- */

.appeal-notice {
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.appeal-notice p {
  margin: 0 0 0.5rem 0;
}

.appeal-notice p:last-child {
  margin-bottom: 0;
}

.appeal-notice-warn {
  background: #fff3cd;
  border: 1px solid #ffc107;
  color: #856404;
}

.appeal-notice-warn p { color: #856404; }
.appeal-notice-warn .appeal-notice-title { font-weight: 600; }
.appeal-notice-warn .appeal-notice-desc { font-size: 0.9rem; }

.appeal-notice-pending {
  background: #e3f2fd;
  border: 1px solid #90caf9;
  color: #1565c0;
}

.appeal-notice-pending p { color: #1565c0; }
.appeal-notice-pending .appeal-notice-title { font-weight: 600; }
.appeal-notice-pending .appeal-notice-desc { font-size: 0.9rem; }

/* 7.2.2 SUSPENSION BLOCK OVERLAY
   ---------------------------------------- */

.suspension-block-overlay {
  max-width: 600px;
  margin: 4rem auto;
  padding: 3rem 2rem;
  text-align: center;
  background: #fff;
  border: 2px solid #d32f2f;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(211, 47, 47, 0.1);
}

.suspension-block-icon {
  margin-bottom: 1.5rem;
}

.suspension-block-overlay h2 {
  color: #d32f2f;
  font-size: 1.75rem;
  margin: 0 0 1rem 0;
}

.suspension-reason {
  color: #333;
  margin-bottom: 0.75rem;
}

.suspension-info {
  color: #666;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.suspension-appeal-status {
  background: #e3f2fd;
  border: 1px solid #90caf9;
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  color: #1565c0;
}

.suspension-appeal-status p {
  margin: 0 0 0.25rem 0;
}

.suspension-appeal-status p:last-child {
  margin-bottom: 0;
  font-size: 0.9rem;
}

.suspension-appeal-btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--brand-accent, #6B9E6F);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  margin-bottom: 1.5rem;
  transition: background 0.2s;
}

.suspension-appeal-btn:hover {
  background: var(--brand-accent-hover, #4A7C4E);
  color: #fff;
}

.suspension-banned-notice {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.suspension-banned-notice a {
  color: #1976d2;
}

.suspension-actions {
  margin-top: 1rem;
}

.suspension-browse-btn {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: transparent;
  color: var(--brand-accent, #6B9E6F);
  border: 2px solid var(--brand-accent, #6B9E6F);
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.2s;
}

.suspension-browse-btn:hover {
  background: var(--brand-accent, #6B9E6F);
  color: #fff;
}

/* 7.3 LEGAL POLICIES PAGES
   ---------------------------------------- */

.legal-content {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  margin: 1.5rem auto;
  max-width: 800px;
  line-height: 1.8;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* When .legal-policy is inside .legal-content, remove its frame */
.legal-content .legal-policy {
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
}

/* Standalone .legal-policy (not inside .legal-content) */
.legal-policy:not(.legal-content .legal-policy) {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  margin: 1.5rem auto;
  max-width: 800px;
  line-height: 1.8;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.legal-policy h2 {
  border-bottom: 3px solid var(--brand-primary);
  padding-bottom: 15px;
}

.legal-policy h3 {
  color: var(--brand-accent-hover);
  font-size: 1.3rem;
  margin-top: 25px;
  margin-bottom: 12px;
}

.legal-policy p {
  margin-bottom: 20px;
}

.legal-policy ul {
  margin-left: 25px;
  margin-bottom: 15px;
}

.legal-policy ol,
.legal-policy ol.legal-numbered-list {
  margin: 0 0 15px 25px;
  padding-left: 1.5em;
  list-style-type: decimal;
  list-style-position: outside;
}

.legal-policy li {
  color: var(--brand-text);
  line-height: 1.8;
  margin-bottom: 8px;
}

.legal-policy ol li {
  padding-left: 0.35em;
}

.beliefs-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.beliefs-list li {
  font-size: 1.1em;
  line-height: 1.8;
  color: var(--brand-text);
  margin-bottom: 20px;
  padding-left: 30px;
  position: relative;
}

.beliefs-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--brand-accent);
  font-weight: bold;
  font-size: 1.5em;
}

/* Legal policy tables — desktop + mobile responsive */
.legal-policy table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 0.92rem;
}

.legal-policy th,
.legal-policy td {
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  text-align: left;
  vertical-align: top;
}

.legal-policy thead th {
  background: var(--brand-primary, #2c3e50);
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
}

.legal-policy tbody tr:nth-child(even) {
  background: #f9f9f9;
}

@media (max-width: 600px) {
  .legal-policy table,
  .legal-policy thead,
  .legal-policy tbody,
  .legal-policy th,
  .legal-policy td,
  .legal-policy tr {
    display: block;
  }

  .legal-policy thead {
    display: none;
  }

  .legal-policy tr {
    margin-bottom: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
  }

  .legal-policy td {
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    padding-left: 40%;
    min-height: 36px;
  }

  .legal-policy td::before {
    content: attr(data-label);
    position: absolute;
    left: 12px;
    top: 8px;
    font-weight: 600;
    color: var(--brand-primary, #2c3e50);
    font-size: 0.82rem;
    width: 35%;
  }

  .legal-policy td:last-child {
    border-bottom: none;
  }
}

/* 7.4 HELP PAGE
   ---------------------------------------- */

.help-page {
  max-width: 1120px;
  margin: 1.5rem auto;
  padding: 0 1rem;
}

.help-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}

.help-index {
  background: var(--brand-bg-white);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  padding: 1rem;
  position: sticky;
  top: calc(var(--nav-height) + 12px);
}

.help-index h2 {
  margin: 0;
}

.help-index-subtitle {
  margin: 0.25rem 0 0.75rem 0;
  color: rgba(63, 46, 31, 0.75);
  font-size: 0.95rem;
}

.help-index ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.help-index li {
  margin: 0;
}

.help-index a {
  display: block;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--brand-text);
}

.help-index a:hover,
.help-index a.active {
  background: var(--brand-bg-light);
}

.help-index a.active {
  font-weight: 600;
  color: var(--brand-primary);
}

.help-content {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  line-height: 1.8;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.help-content ul,
.help-content ol {
  padding-left: 1.2rem;
}

.help-header h1 {
  margin-top: 0;
}

.help-intro {
  margin-top: 0.5rem;
  color: #666;
}

.help-section + .help-section {
  margin-top: 2rem;
}

.help-section h2 {
  border-bottom: 3px solid var(--brand-primary);
  padding-bottom: 12px;
}

/* Help pages: anchor scroll offset for sticky navbar + banner */
.help-section {
  scroll-margin-top: calc(var(--nav-height) + 56px);
}

/* Help pages: keep banner sticky below navbar */
body.page-help .announcement-banner {
  position: sticky;
  top: var(--nav-height);
  z-index: 1400;
}

/* Sidebar offset accounts for navbar + sticky banner */
body.page-help .help-index {
  top: calc(var(--nav-height) + 56px);
}

@media (max-width: 900px) {
  /* Reduce cream gap around help content on mobile */
  body.page-help main {
    padding: 14px 12px;
  }
  .help-page {
    padding: 0;
    margin: 0.75rem auto;
  }

  .help-layout {
    grid-template-columns: 1fr;
  }

  .help-index {
    position: static;
    display: none;
  }

  /* Fallback horizontal scroll for wide content */
  .help-content {
    overflow-x: auto;
    padding: 1.4rem 1.2rem;
  }

  /* Prevent list markers from being clipped by the horizontal scroll container */
  .help-content ul,
  .help-content ol {
    list-style-position: inside;
    padding-left: 0;
  }
}

/* Floating help-index toggle button (mobile only) */
.help-index-fab {
  display: none;
}

@media (max-width: 900px) {
  .help-index-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 12px; /* JS updates this as nav/banner hide/show */
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: white;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    cursor: pointer;
    z-index: 1500;
    transition: transform 0.2s;
  }

  .help-index-fab:hover {
    transform: scale(1.1);
  }

  .help-index-fab svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Overlay state: show sidebar as modal */
  .help-index.help-index--open {
    display: block;
    position: fixed;
    top: calc(var(--nav-height) + 56px);
    right: 12px;
    left: auto;
    width: 260px;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1499;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    animation: helpIndexSlideIn 0.2s ease-out;
  }

  @keyframes helpIndexSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* 7.3 LANDING HERO (Homepage)
   ---------------------------------------- */

.landing-hero {
  text-align: center;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 48px 40px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  max-width: 680px;
  width: 100%;
}

.landing-hero a {
  color: inherit;
  text-decoration: none;
}

.landing-hero a:hover {
  color: var(--brand-accent-hover);
}

.landing-hero-img {
  height: 140px;
  width: auto;
  margin-bottom: 20px;
}

.landing-hero h1 {
  font-size: 1.35rem;
  margin-bottom: 0;
}

.landing-subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary, #555);
  line-height: 1.6;
  margin-top: 10px;
}

.landing-byline {
  font-size: 0.85rem;
  color: var(--text-tertiary, #888);
  margin-top: 6px;
}

.landing-cta-group {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

.landing-cta-btn,
.landing-hero .newsletter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.2s;
}

.landing-cta-btn {
  background-color: var(--brand-accent);
  color: white;
  border: 1.5px solid var(--brand-accent);
}

.landing-cta-btn:hover {
  background-color: var(--brand-accent-hover);
  border-color: var(--brand-accent-hover);
  transform: scale(1.03);
  color: white;
}

.landing-hero .newsletter-btn {
  background-color: transparent;
  color: var(--brand-accent);
  border: 1.5px solid var(--brand-accent);
}

.landing-hero .newsletter-btn:hover {
  background-color: var(--brand-accent);
  color: white;
  transform: scale(1.03);
}

.landing-hero .mail-icon {
  width: 16px;
  height: 16px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.9;
}

/* ========================================
   8. BRAND-SPECIFIC CUSTOM STYLES
   ======================================== */

/* CookEat-specific customizations go here */
/* Currently no brand-specific custom styles */

/* ========================================
   8. DISCOVER PAGE STYLES (PALETTE B - SOFT CREAM)
   ======================================== */

/* Filters Section */
.filters-section {
    background: var(--brand-bg-white);
    padding: 2rem 1rem;
    border-bottom: 1px solid var(--brand-border);
    box-shadow: 0 2px 8px var(--brand-shadow);
}

.filters-container {
    max-width: 1200px;
    margin: 0 auto;
}

.search-box {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.search-box input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid var(--brand-accent);
    border-radius: 8px;
    font-size: 1rem;
}

.search-box button {
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--brand-accent);
}

.search-box button svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.filter-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--brand-text);
}

.filter-group select {
    width: 100%;
    padding: 0.5rem;
    border: 2px solid var(--brand-accent);
    border-radius: 6px;
    font-size: 0.95rem;
}

/* Recipes Section */
.recipes-section {
    padding: 2rem 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.results-header h1 {
    margin: 0;
    color: var(--brand-text);
}

#resultsCount {
    color: rgba(90, 117, 102, 0.7);
    font-weight: 600;
}

#resultsCount .results-alert {
  font-weight: 600;
}

#resultsCount .results-alert-link {
  color: var(--brand-accent);
  text-decoration: none;
}

#resultsCount .results-alert-link:hover {
  text-decoration: underline;
}

/* Recipe Grid */
.recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 100%;
}

/* Recipe Card - LAYOUT C (COMPACT + SHADOW FRAME) */

/* --- Display ads (Sprint 3) --- */
.ad-banner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.75rem 1rem 0;
}

@media (max-width: 1024px) {
  .ad-banner--header {
    display: none !important;
  }
}

.ad-banner[hidden] {
  display: none !important;
}

.ad-rail {
  display: none;
}

.ad-rail[hidden] {
  display: none !important;
}

.ad-unit {
  border: 1px solid var(--brand-border, #e0d5cc);
  border-radius: 14px;
  background: var(--brand-bg-light);
  overflow: hidden;
}

.ad-unit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.ad-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.85);
  color: var(--brand-text);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
}

.ad-unit-body {
  padding: 0.85rem;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0.85rem;
  align-items: center;
}

.ad-unit-image {
  width: 120px;
  height: 80px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  background: var(--brand-bg-warm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-unit-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ad-unit-title {
  font-weight: 800;
  color: var(--brand-text);
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.25;
}

.ad-unit-desc {
  margin: 0.25rem 0 0;
  color: var(--brand-text);
  opacity: 0.8;
  font-size: 0.9rem;
  line-height: 1.35;
}

.ad-unit-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.55rem;
  padding: 0.45rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.10);
  background: var(--brand-bg-warm);
  color: var(--brand-text);
  font-weight: 800;
  font-size: 0.85rem;
  text-decoration: none;
  width: fit-content;
}

/* In-feed ads share recipe-card sizing, but use the ad-unit internals */
.recipe-card.ad-card {
  padding: 0;
}

.recipe-card.ad-card .ad-unit {
  border: none;
  border-radius: inherit;
}

/* ───────────────────────────────────────────────────────────────
   Ad Rail — fixed left sidebar, outside content frame.
   Anchored to left of the centred 1200px content area.
   Content position and width are NEVER affected.

   ≥1600px  → 160px  (IAB Wide Skyscraper 160×600)
   ≥1680px  → 300px  (IAB Half Page 300×600, accommodates Windows 125% scaling)
   <1600px  → hidden (not enough gutter space)
   ─────────────────────────────────────────────────────────────── */

/* Left rail — width = image’s natural rendered width (aspect-ratio-correct), height = 100vh */
/* Left rail — full gutter width, transparent. Inner unit carries grey fill + ad. */
@media (min-width: 1600px) {
  .ad-rail:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;       /* unit sizes itself; no stretch */
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: calc((100vw - 1200px) / 2); /* full gutter — outer boundary */
    min-width: 160px;
    max-width: 300px;
    background: transparent;       /* no fill on gutter outside the ad */
    overflow: hidden;              /* clip anything that escapes the viewport-tall rail */
    z-index: 1600;
  }
}

/* ≥1680px: calc handles width dynamically; no override needed */

/* ─── Right ad rail (mirrors left, positioned on opposite side) ── */
@media (min-width: 1600px) {
  .ad-rail--right:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: flex-end;             /* unit hugs the right/outer edge */
    position: fixed;
    left: auto;                        /* unset inherited left from .ad-rail */
    right: 0;
    top: 0;
    bottom: 0;
    width: 160px;
    overflow: hidden;
    z-index: 1550;
  }

  .ad-rail--right .ad-unit-body {
    grid-template-columns: 1fr;
    padding: 0.5rem;
  }

  .ad-rail--right .ad-unit-image {
    width: 100%;
    height: 600px;
  }
}

@media (min-width: 1680px) {
  .ad-rail--right:not([hidden]) {
    left: auto;
    right: 0;
    width: 300px;
  }

  .ad-rail--right .ad-unit-image {
    height: 600px;
  }
}

/* ─── Right rail dismiss button ───────────────────────────────── */
.ad-rail-dismiss {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 10;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.ad-rail-dismiss:hover { opacity: 1; }

/* ─── Equipment card styling ──────────────────────────────────── */
.equipment-badge { background: var(--brand-primary, #c77b3f); }
.equipment-price { font-weight: 600; color: var(--brand-primary, #c77b3f); }

/* ─── My Account: Display Settings ────────────────────────────── */
.display-setting-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.display-setting-label {
  font-size: 0.95rem;
  flex: 1;
}
.display-setting-hint {
  display: block;
  font-size: 0.8rem;
  color: #888;
  margin-top: 2px;
}
.display-setting-checkbox {
  width: 20px;
  height: 20px;
  accent-color: var(--brand-primary, #c77b3f);
  cursor: pointer;
}

/* ─── Admin Pills (shared tabs + filter chips) ────────────────
   Single source of truth for admin-section tab/filter buttons.
   Use .admin-pill for main tabs, .admin-pill.admin-pill--sm for
   smaller inline filters. Active state via .active or [aria-selected="true"]. */
.admin-typography {
  --admin-font-heading: 1rem;
  --admin-font-metric: 0.95rem;
  --admin-font-sub: 0.82rem;
  --admin-font-micro: 0.78rem;
}

.admin-text-heading { font-size: var(--admin-font-heading, 1rem); font-weight: 800; }
.admin-text-metric { font-size: var(--admin-font-metric, 0.95rem); font-weight: 700; font-variant-numeric: tabular-nums; }
.admin-text-sub { font-size: var(--admin-font-sub, 0.82rem); font-weight: 600; }
.admin-text-micro { font-size: var(--admin-font-micro, 0.78rem); font-weight: 600; }

.admin-pill {
  background: none;
  border: 1px solid var(--brand-border, #e0e0e0);
  padding: 0.4rem 0.85rem;
  border-radius: 20px;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brand-text-muted, #666);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.admin-pill:hover { background: #f3f4f6; }
.admin-pill.active,
.admin-pill[aria-selected="true"] {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: #fff;
}
.admin-pill--sm { padding: 0.3rem 0.75rem; font-size: 0.78rem; }

/* ─── Admin Modal (shared shell across admin pages) ─────────────
   Structure:
     .admin-modal-overlay
       .admin-modal[.admin-modal--wide|.admin-modal--xwide]
         .admin-modal__banner    (flex-shrink: 0; title + close button)
         .admin-modal__body      (flex: 1 1 auto; overflow-y: auto; form content)
         .admin-modal__actions   (flex-shrink: 0; footer row, right-aligned)
   Use .admin-modal.is-readonly to hide __actions (audit-only view). */

.admin-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 10050;
  display: none;
  padding: 1rem;
  overflow-y: auto;
  align-items: flex-start;
}
.admin-modal-overlay.active { display: flex; flex-direction: column; }

.admin-modal {
  background: #fff;
  border-radius: 12px;
  max-width: 540px;
  width: 100%;
  margin: 0 auto;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.admin-modal--wide  { max-width: 680px; }
.admin-modal--xwide { max-width: 820px; }

.admin-modal__banner {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 1.1rem 1.35rem 1rem;
  background: linear-gradient(to bottom, #fff, rgba(232, 245, 175, 0.14));
  border-bottom: 1px solid rgba(232, 245, 175, 0.55);
  flex-shrink: 0;
}
.admin-modal__banner h2 {
  margin: 0; flex: 1;
  font-size: 1.08rem; font-weight: 800;
  color: var(--brand-text);
  padding-right: 0.5rem;
}
.admin-modal__close {
  flex-shrink: 0;
  width: 2.1rem; height: 2.1rem;
  border: none; border-radius: 50%;
  cursor: pointer; padding: 0;
  background: rgba(232, 245, 175, 0.45);
  color: var(--brand-text);
  font-size: 1.4rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.9;
  font-family: system-ui, sans-serif; font-weight: 400;
  transition: background 0.2s, opacity 0.2s, box-shadow 0.2s;
}
.admin-modal__close:hover {
  opacity: 1;
  background: var(--brand-bg-light, #f0f0e8);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.admin-modal__close:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

.admin-modal__body {
  padding: 1.25rem 1.5rem 1.5rem;
  flex: 1 1 auto;
  overflow-y: auto;
}
.admin-modal__body label,
.admin-modal__body .small { font-size: 0.82rem; }
.admin-modal__body textarea {
  width: 100%; min-height: 80px;
  padding: 0.5rem;
  border: 1px solid #ddd; border-radius: 6px;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.85rem;
  resize: vertical;
  margin-top: 0.4rem;
  box-sizing: border-box;
}
.admin-modal__body select {
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: 1px solid #ddd; border-radius: 6px;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.85rem;
  margin-top: 0.4rem;
  background: #fff;
}

.admin-modal__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  border-top: 1px solid #eee;
  background: #fff;
  flex-shrink: 0;
}
.admin-modal__actions--between { justify-content: space-between; }

.admin-modal.is-readonly .admin-modal__actions { display: none; }

/* ─── Admin Sub-tabs (in-page navigation between queues / primary areas)
   Visually distinct from .admin-pill (which is reserved for filter controls).
   Use .admin-subtabs as the container and .admin-subtab on each tab button.
   Active state: accent-colored text + accent-colored bottom border. */
.admin-subtabs {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 1rem;
}
.admin-subtab {
  background: none;
  border: none;
  padding: 0.65rem 0;
  color: var(--brand-text-muted, #666);
  font-family: 'Quicksand', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.admin-subtab:hover { color: var(--brand-text, #2c2c2c); }
.admin-subtab.active,
.admin-subtab[aria-selected="true"] {
  color: var(--brand-accent);
  border-bottom-color: var(--brand-accent);
}

/* ─── Admin Checkbox (binary filter toggle, visually distinct from pills) ─── */
.admin-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brand-text-muted, #666);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  line-height: 1.5;
}
.admin-checkbox input[type="checkbox"] {
  margin: 0;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: var(--brand-accent);
}

/* Admin toolbar row: normalises vertical alignment across mixed child types
   (pills, checkboxes, selects, inputs, labels). Every admin filter toolbar
   should use this class so the visual line-up stays consistent across pages. */
.admin-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}
.admin-toolbar-row > * { align-self: center; line-height: 1.5; }
.admin-toolbar-row select,
.admin-toolbar-row input[type="search"],
.admin-toolbar-row input[type="text"] {
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.82rem;
  background: #fff;
  box-sizing: border-box;
}

/* ─── Admin Testing Tools ─────────────────────────────────────── */
.admin-testing-hint {
  font-size: 0.85rem;
  color: var(--brand-text-muted);
  margin-bottom: 1rem;
}
.admin-testing-row {
  margin-bottom: 0.75rem;
}
.admin-testing-row-last {
  margin-bottom: 1rem;
}
.admin-testing-select {
  padding: 0.4rem 0.6rem;
  border: 2px solid var(--brand-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9rem;
}
.admin-testing-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.admin-testing-status {
  font-size: 0.85rem;
  color: var(--brand-text-muted);
}

/* ─── Compact ad card (Plan strip) ────────────────────────────── */
.ad-card--compact {
  position: relative;
  padding: 0;
}

.ad-card--compact .ad-compact-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.ad-card--compact .ad-compact-photo {
  height: 90px;
  background: var(--brand-bg-warm);
  overflow: hidden;
}

.ad-card--compact .ad-compact-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ad-card--compact .recipe-content {
  padding: 10px 12px 8px;
}

.ad-card--compact .recipe-title {
  font-size: 0.9rem;
  line-height: 1.25;
}

.ad-card--compact .ad-compact-bottom {
  padding: 0 12px 10px;
  margin-top: auto;
}

.ad-card--compact .ad-unit-cta {
  font-size: 0.75rem;
}

.ad-badge--compact {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
  background: var(--brand-bg-light);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--brand-text);
  opacity: 0.8;
}

/* ─── Ad format variants (applied from AdFormat column) ───────── */
.ad-format-compact_card .ad-unit-body    { grid-template-columns: 1fr; }
.ad-format-compact_card .ad-unit-image   { width: 100%; height: 90px; }

.ad-format-skyscraper_160x600 .ad-unit-body  { grid-template-columns: 1fr; }
.ad-format-skyscraper_160x600 .ad-unit-image { width: 100%; height: 600px; }

.ad-format-halfpage_300x600 .ad-unit-body  { grid-template-columns: 1fr; }
.ad-format-halfpage_300x600 .ad-unit-image { width: 100%; height: 600px; }

.ad-format-card_300x250 .ad-unit-body  { grid-template-columns: 1fr; }
.ad-format-card_300x250 .ad-unit-image { width: 100%; height: 250px; }

.ad-format-leaderboard_728x90 .ad-unit-body  { grid-template-columns: 90px 1fr; }
.ad-format-leaderboard_728x90 .ad-unit-image { width: 90px; height: 90px; }

.recipe-card {
    display: flex;
    flex-direction: column;
  position: relative;
    background: var(--brand-bg-white);
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--brand-shadow);
    overflow: visible;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

/* Clip images only — card footer + photo chrome tooltips must not be clipped */
.recipe-card > .photo-view {
  overflow: visible;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.recipe-card .recipe-bottom {
  position: relative;
  z-index: 2;
  overflow: visible;
}

/* Sponsored recipe disclosure (Sprint 3.13) */
.sponsored-badge-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--brand-border);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--brand-text);
  pointer-events: none;
}

/* When badge + step indicator coexist, they sit in a flex row at top-right */
.carousel-top-bar {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 3;
}
.carousel-top-bar .sponsored-badge-overlay {
  position: relative;  /* not static — keeps ::before contained */
  top: auto;
  right: auto;
}
.carousel-top-bar .carousel-step-indicator {
  position: static;
}

.sponsored-badge-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand-bg-white);
  opacity: 0.85;
  border-radius: inherit;
  z-index: -1;
}

@media (hover: hover) and (pointer: fine) {
  .recipe-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  }
}

/* Discover card content (title + cuisine icon + description) */
.recipe-content {
  padding: 14px 16px 10px 16px;
  flex: 1 1 auto;
}

.recipe-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.recipe-title {
  margin: 0;
  color: var(--brand-text-primary);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.1px;
  flex: 1 1 auto;
  min-width: 0;
}

.recipe-title a {
  color: inherit;
  text-decoration: none;
}

.recipe-title a:hover {
  text-decoration: underline;
}

.cuisine-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--brand-text-warm, #5D4037);
  flex: 0 0 auto;
}

.cuisine-icon-only .recipe-icon-wrapper {
  width: 22px;
  height: 22px;
}

.recipe-desc {
  margin: 0;
  color: var(--brand-text-muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Fixed title+desc block for cross-card uniformity (spec): the title clamps to 2 lines and
   the description fills the rest of a fixed ~6-line block — a 1-line title lets the desc grow
   (up to ~5), a 2-line title leaves ~4. The block clips overflow so cards align regardless of
   text length (replaces the old 90-char truncation). Tune --card-textblock-h per viewport. */
:root { --card-textblock-h: 132px; }
.recipe-textblock {
  height: var(--card-textblock-h);
  overflow: hidden;
}
.recipe-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.recipe-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

/* Card Views Container (Horizontal Scroll) */
.card-views-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.card-views-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.card-view {
    min-width: 100%;
    scroll-snap-align: start;
    padding: 1.5rem;
}

/* Photo View - Step Photo Carousel */
.photo-view {
    padding: 0;
    position: relative;
    height: 250px;
    overflow: visible;
}

.photo-view > img {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.photo-view img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

/* Plan-card hero mosaic (Discover plan mode) — fill the photo frame as a clipped
   3x2 grid. The Plan-reel's scoped `.plan-strip-grid .plan-mosaic` is more specific
   and still wins there; this general rule covers the Discover card. */
.plan-mosaic {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
/* Tile-able layouts so the mosaic always fills the frame (no empty cells). */
.plan-mosaic--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.plan-mosaic--2 { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; }
.plan-mosaic--3 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; }
.plan-mosaic--4 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.plan-mosaic--6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }

/* Discover plan card — ONE card whose carousel re-renders the body per slide.
   The image/mosaic lives in .plan-photo-inner (filling the photo frame); the standard
   carousel controls (.carousel-prev/.carousel-next/.carousel-dots) overlay it. */
.plan-card .plan-photo-inner { position: absolute; inset: 0; }
.plan-card .plan-photo-inner .plan-mosaic { height: 100%; }
/* Match the direct-child radius the standard .photo-view > img gets (ours is nested). */
.plan-card .plan-photo-inner > img { border-top-left-radius: 12px; border-top-right-radius: 12px; }

/* ── Plan preview panel + nutrition modal (Discover plan mode, slice #3) ──────
   Mirrors the recipe preview panel: hero mosaic, then Shopping list (=ingredients)
   and Recipes day-by-day (=steps); nutrition is the day accordion in its modal.
   NOTE: classes are namespaced `dpp-` (discover-plan-panel). The planner page
   (plan.js) uses `.plan-day-header` / `.plan-meal-label` for its calendar grid —
   reusing those names here once clobbered the planner header. Keep this prefix. */
.dpp-detail .dpp-hero-wrap { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; }
.dpp-detail .dpp-hero-wrap .plan-photo-inner { position: absolute; inset: 0; }
.dpp-detail .dpp-hero-wrap .plan-mosaic { height: 100%; }
/* The card mosaic gets img sizing from `.photo-view img`; the panel hero isn't a
   .photo-view, so constrain its tiles here or large heroes overflow the frame. */
.dpp-detail .dpp-hero-wrap .plan-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Recipes, day-by-day */
.dpp-recipes-day {
  margin: 18px 0 8px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-accent);
}
.dpp-recipe-item {
  display: flex;
  gap: 12px;
  width: 100%;
  align-items: center;
  padding: 8px;
  margin-bottom: 6px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.dpp-recipe-item:hover, .dpp-recipe-item:focus { background: var(--brand-bg-light, #f6faf7); border-color: var(--brand-border, #d9e6dd); outline: none; }
.dpp-recipe-thumb { width: 56px; height: 56px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: #f0f0f0; }
.dpp-recipe-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dpp-recipe-thumb--placeholder { background: linear-gradient(135deg, #e9efeb, #dfe9e1); }
.dpp-recipe-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.dpp-recipe-meal { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand-text-muted, #7a8b82); font-weight: 700; }
.dpp-recipe-title { font-weight: 700; color: var(--brand-text, #2f3d35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpp-recipe-desc { font-size: 0.82rem; color: var(--brand-text-muted, #6b7280); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Shopping list (read-only aggregate; full tick/share lives on /shopping-list) */
.dpp-shopping-body { font-size: 0.9rem; }
.dpp-shop-aisle { margin-bottom: 12px; }
.dpp-shop-aisle-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-accent); font-weight: 800; margin-bottom: 4px; }
.dpp-shop-items { list-style: none; margin: 0; padding: 0; }
.dpp-shop-items li { padding: 4px 0; border-bottom: 1px solid #f1f1f1; color: var(--brand-text, #2f3d35); }
.dpp-shop-open { display: inline-block; margin-top: 10px; font-weight: 600; color: var(--brand-accent); text-decoration: none; }
.dpp-shop-open:hover { text-decoration: underline; }

/* Plan nutrition modal — reuses the recipe modal shell (CookEatNutritionModal.openCustom)
   and the global .breakdown-table chrome. Only the day/meal row affordances are local:
   day rows are clickable and expand to show their meal rows. */
.dpp-nm-day-row { cursor: pointer; }
.dpp-nm-day-row:hover { background: var(--brand-bg-light, #f6faf7); }
.dpp-nm-day-row td:first-child strong::after { content: " \25B8"; color: var(--brand-text-muted, #9aa8a0); font-weight: 400; }
.dpp-nm-day-row.expanded td:first-child strong::after { content: " \25BE"; }
/* Meal row: occasion icon + recipe name in a flex wrapper so the icon top-aligns with
   the first line of the name (vertical-align is unreliable across a 2-line clamp). The
   name is capped + 2-line-clamped so the first column stays narrow and the nutrient
   columns don't compress. */
.dpp-nm-meal-cell { padding-left: 14px !important; white-space: normal; }
.dpp-nm-meal-wrap { display: flex; align-items: flex-start; gap: 6px; }
.dpp-nm-meal-ico { display: inline-flex; flex-shrink: 0; margin-top: 1px; color: var(--brand-text-muted, #7a8b82); }
.dpp-nm-meal-ico svg { display: block; }
.dpp-nm-meal-ico--text { font-weight: 700; }
.dpp-nm-meal-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 150px;
  overflow: hidden;
  line-height: 1.2;
}

/* Plan publish eye overlays the summary-slide hero AND the preview-panel hero (like
   recipe cards). Neither has a locale flag beside it, so the eye sits at the left edge
   (recipes offset it to 44px to clear their flag). */
.plan-card--summary .recipe-visibility-btn,
.dpp-hero-wrap .recipe-visibility-btn { left: 12px; }

/* Recipe visibility overlay (eye icon) — after locale flag */
.recipe-visibility-btn {
  position: absolute;
  top: 12px;
  left: 44px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 12;
  color: var(--brand-text);
  overflow: visible;
}

.recipe-visibility-btn .visibility-icon {
  width: 14px;
  height: 14px;
}

.recipe-visibility-btn.is-unpublished {
  background: rgba(255, 255, 255, 0.92);
}

.recipe-visibility-btn.is-disabled {
  opacity: 0.6;
}

.recipe-visibility-btn.is-loading {
  opacity: 0.75;
}

/* Recipe content locale flag (top-left; first chrome icon, all users) */
.recipe-locale-flag {
  position: absolute;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  display: block;
  cursor: pointer;
  z-index: 12;
  line-height: 0;
  /* Anchor overlapping filter badge (top-left of flag) */
  overflow: visible;
}

.recipe-locale-flag .recipe-locale-flag-svg,
.recipe-locale-flag .lang-flag {
  width: 26px;
  height: 26px;
  display: block;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}

/* Content-locale filter active — white funnel badge overlaps top-left of flag (no layout growth) */
.recipe-locale-filter-badge {
  display: none;
  position: absolute;
  top: -8px;
  left: -8px;
  width: 18px;
  height: 18px;
  z-index: 2;
  pointer-events: none;
  line-height: 0;
  box-sizing: border-box;
}

.recipe-locale-filter-badge-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.recipe-locale-flag.is-content-locale-filter-active .recipe-locale-filter-badge {
  display: block;
}

.recipe-locale-flag:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

.recipe-locale-flag-menu {
  position: fixed;
  z-index: 10050;
  min-width: 200px;
  max-width: min(280px, calc(100vw - 16px));
  padding: 6px 0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.recipe-locale-flag-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
  color: var(--text-primary, #1a1a1a);
}

.recipe-locale-flag-menu-item .recipe-locale-flag-svg,
.recipe-locale-flag-menu-item .lang-flag {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.recipe-locale-flag-menu-label,
.content-locale-filter-banner-text {
  flex: 1;
  min-width: 0;
}

.content-locale-filter-banner-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.content-locale-filter-banner-label .recipe-locale-flag-svg,
.content-locale-filter-banner-label .lang-flag {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.recipe-locale-flag-menu-item:hover,
.recipe-locale-flag-menu-item:focus-visible {
  background: rgba(255, 138, 61, 0.12);
  outline: none;
}

.content-locale-filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 138, 61, 0.12);
  border: 1px solid rgba(255, 138, 61, 0.35);
  font-size: 14px;
  line-height: 1.4;
}

.content-locale-filter-banner-label {
  flex: 1;
  min-width: 0;
}

.content-locale-filter-banner-clear {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--brand-accent, #e86f1a);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  font-size: 14px;
  padding: 4px 0;
}

.content-locale-filter-banner-clear:hover,
.content-locale-filter-banner-clear:focus-visible {
  opacity: 0.85;
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

/* Quick edit pencil button (hero overlay, after eye) */
.recipe-edit-btn {
  position: absolute;
  top: 12px;
  left: 76px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 12;
  color: var(--brand-text-secondary);
  transition: color 0.15s ease, background 0.15s ease;
  overflow: visible;
}

.recipe-edit-btn:hover {
  color: var(--brand-accent);
  background: rgba(255, 255, 255, 1);
}

.recipe-edit-btn svg {
  width: 14px;
  height: 14px;
}

/* Carousel navigation arrows */
.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.carousel-prev {
    left: 12px;
}

.carousel-next {
    right: 12px;
}

@media (hover: hover) and (pointer: fine) {
  .recipe-card:hover .carousel-prev,
  .recipe-card:hover .carousel-next {
    opacity: 1;
  }

  .carousel-prev:hover,
  .carousel-next:hover {
    background: white;
    transform: translateY(-50%) scale(1.1);
  }
}

/* Touch + narrow: always show larger carousel arrows (no hover on touch devices). */
@media (max-width: 770px) and (any-pointer: coarse) {
  .carousel-prev,
  .carousel-next {
    opacity: 0.85;
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
  }

  .carousel-prev:active,
  .carousel-next:active {
    background: white;
    transform: translateY(-50%) scale(0.95);
  }
}

/* Step indicator on carousel */
.carousel-step-indicator {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Carousel dot indicators */
.carousel-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
  transform: translateX(-50%) scale(var(--carousel-dots-scale, 1));
  transform-origin: center bottom;
    display: flex;
    gap: 8px;
    z-index: 2;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.carousel-dot:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: scale(1.2);
}

.carousel-dot.active {
    background: white;
    width: 24px;
    border-radius: 4px;
}

.photo-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    padding: 1.5rem;
    color: white;
}

.photo-overlay h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.3rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.cuisine-tag {
    display: inline-block;
    background: var(--brand-accent-coral);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
}

/* Ingredients View */
.ingredients-view h4,
.steps-view h4 {
    margin: 0 0 1rem 0;
    color: var(--brand-text-primary);
}

.ingredients-preview {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

.ingredients-preview li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--brand-border);
    color: var(--brand-text-warm);
}

/* Steps View */
.steps-count {
    font-size: 2rem;
    font-weight: bold;
    color: var(--brand-accent-coral);
    margin: 1rem 0;
}

/* Info View */
.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

/* LAYOUT C - COMPACT CARD ATTRIBUTES */
.recipe-attributes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 0.5rem;
  padding-bottom: 0;
  background: transparent;
}

  .card-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    margin-top: 0.25rem;
    margin-bottom: 8px;
  }

  .card-meta-row.no-creator {
    justify-content: flex-start;
  }

  .card-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .card-action-btn {
    display: inline-flex;
    align-items: center;       /* icon centered; count drops to bottom via align-self below */
    justify-content: center;
    gap: 2px;
    min-width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 6px;
    color: var(--brand-text-muted);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Subscript-style count next to heart / save / star icons on Discover cards.
   * Specific selector + explicit dark color so the count doesn't inherit
   * the button's active state (e.g. red when heart is favourited). */
  .card-actions .card-action-count {
    font-size: 0.68em;
    color: #333;
    font-weight: 500;
    letter-spacing: -0.02em;
    white-space: nowrap;
    line-height: 1;
    align-self: flex-end;
    padding-bottom: 3px;
  }

  .card-actions .card-action-rating .card-action-count {
    color: #333;
  }

  /* Read-only rating widget on Discover cards (single partial-fill star + meta) */
  .card-action-rating {
    display: inline-flex;
    align-items: center;       /* star icon centered */
    justify-content: center;
    gap: 2px;
    height: 28px;
    padding: 0 4px;
    color: var(--brand-text-muted);
  }

  .card-action-btn .engagement-icon {
    width: 20px;
    height: 20px;
  }

  .card-action-btn .engagement-icon.engagement-outline {
    fill: none;
    stroke: currentColor;
  }

  .card-action-btn .engagement-icon.engagement-filled {
    fill: currentColor;
    stroke: none;
  }

  .card-action-btn.is-active {
    color: var(--brand-accent-coral);
    background: transparent;
  }

  .card-action-btn.action-like.is-active {
    color: #e11d48;
  }

  .creator-signature span {
    font-size: 0.75rem;
    color: var(--brand-text-muted);
    font-style: italic;
  }

  .creator-signature {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    transition: opacity 0.15s ease;
  }

  .creator-signature .sponsor-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 4px;
    background: transparent;
  }

  .creator-signature .sponsor-logo[hidden] {
    display: none;
  }

/* ── Creator Badge Display (4.6) ───────────────────── */
/* Wrapper around the username — allows hat to float above */
.creator-name-hatted {
  position: relative;
  display: inline-block;
  padding-top: 10px;   /* room for the hat */
}

/* Hat positioned above the 2nd-3rd letter of the username (logo style) */
.creator-badge-hat {
  position: absolute;
  top: -2px;
  left: 0.4em;   /* roughly above 2nd letter */
  line-height: 1;
  pointer-events: none;
}

.creator-badge-hat svg {
  display: block;
}

/* Card border tints for badge levels */
.recipe-card.badge-bronze {
  border: 1.5px solid #CD7F32;
}

.recipe-card.badge-silver {
  border: 1.5px solid #C0C0C0;
}

.recipe-card.badge-gold {
  border: 1.5px solid #FFD700;
}

/* Cook page sponsor disclosure (Sprint 3.15) */
.cook-sponsor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 0.5rem;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--brand-border);
  background: transparent;
  color: var(--brand-text-secondary);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.cook-sponsor:hover {
  border-color: var(--brand-primary);
}

.cook-sponsor:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.cook-sponsor-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 4px;
}

.cook-sponsor[hidden] {
  display: none;
}

.recipe-attributes .attribute-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9em;
    color: var(--brand-text-warm);
    white-space: nowrap;
    vertical-align: middle;
}

.recipe-attributes .attribute-item .icon {
    font-size: 1.1em;
}

/* Nutritional icons */
.recipe-attributes .nutrition-icon {
    font-size: 1em;
}

/* Cost indicator */
.recipe-attributes .cost-indicator {
    color: var(--brand-accent-sage);
    font-weight: 600;
}

/* Spicy level indicator */
.spicy-indicator {
    display: inline-flex;
    align-items: center;
}

.spicy-indicator .spicy-icon {
    width: 20px;
    height: 20px;
    fill: #E85D04; /* Orange-red for spicy */
}

.spicy-level-1 .spicy-icon { fill: #F4A259; } /* Mild - light orange */
.spicy-level-2 .spicy-icon { fill: #E85D04; } /* Medium - orange */
.spicy-level-3 .spicy-icon { fill: #DC2626; } /* Hot - red */

/* Recipe attributes container (holds allergen row + attributes) */
.recipe-attributes-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  padding: 8px 12px 10px 12px;
  flex-shrink: 0;
  margin-top: auto;
  background: transparent;
  border-top: none;
}

/* Discover card bottom info blocks (mockup v2) */
.recipe-bottom {
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.01);
  margin-top: auto;
}

/* Discover card bottom info (anchored layout: Features | dynamic middle | Nutrition) */
.recipe-bottom-row {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  /* Keep nutrition block on the same row for consistent cards; allow wrap only on small phones. */
  flex-wrap: nowrap;
}

.recipe-bottom-block {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}

.features-block {
  flex: 0 0 auto;
}

.middle-block {
  flex: 1 1 auto;
  min-width: 0;
}

/* Lifestyle + allergens empty: keep a flex slot so nutrition stays right (Discover). */
.recipe-bottom-row .middle-block:empty {
  flex: 1 1 0;
}

.nutrition-block {
  flex: 0 1 130px;
  margin-left: auto;
}

.recipe-grid .recipe-bottom {
  padding: 10px 12px;
}

/* Discover grid: keep 3 columns (features | lifestyle+allergens | nutrition).
 * Middle uses default .middle-block flow (no scroll) unless touch + ≤770px below.
 * Nutrition stays fixed right — never flex-wrap to a new line on card footers.
 */
.recipe-grid .recipe-bottom-row {
  flex-wrap: nowrap;
  align-items: center;
}

.recipe-grid .features-block,
.recipe-grid .middle-block {
  justify-content: center;
  align-self: center;
}

.recipe-grid .features-block .attr-box--plain,
.recipe-grid .middle-block .attr-box--plain {
  padding-top: 0;
  padding-bottom: 0;
}

.recipe-grid .nutrition-block {
  flex: 0 0 130px;
  margin-left: auto;
}

/* Touch + narrow (≤770px): swipe middle lifestyle/allergens — touch devices only (no hover tooltips). */
@media (max-width: 770px) and (any-pointer: coarse) {
  .recipe-grid .middle-block,
  .cook-card--info .middle-block {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
  }

  .recipe-grid .middle-block .attr-box--plain,
  .cook-card--info .middle-block .attr-box--plain {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x;
  }

  .recipe-grid .middle-block .attr-box--plain::-webkit-scrollbar,
  .cook-card--info .middle-block .attr-box--plain::-webkit-scrollbar {
    display: none;
  }

  .recipe-grid .recipe-middle-flow,
  .cook-card--info .recipe-middle-flow {
    width: max-content;
    max-width: none;
  }
}

@media (max-width: 600px) {
  .recipe-bottom-row {
    flex-wrap: wrap;
  }

  .nutrition-block {
    margin-left: 0;
  }

  .recipe-grid .recipe-bottom-row,
  .cook-card--info .recipe-bottom-row {
    flex-wrap: nowrap;
  }

  .recipe-grid .nutrition-block,
  .cook-card--info .nutrition-block {
    margin-left: auto;
  }
}

/* Shared alignment wrapper used to align icon rows with nutrition rows */
.attr-box {
  padding: 2px;
  border-radius: 10px;
  width: 100%;
  min-width: 0;
}

.attr-box--plain {
  background: transparent;
  border: 1px solid transparent;
}

.attr-box--nutrition {
  padding: 6px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--brand-border);
  cursor: pointer;
}

.attr-box--nutrition:focus {
  outline: 2px solid var(--brand-accent, #ff8a3d);
  outline-offset: 2px;
}

.recipe-info-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 1.15fr 1.35fr;
  gap: 0;
  align-items: stretch;
}

.recipe-info-section {
  padding: 8px 8px;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recipe-info-title {
  font-size: 0.78rem;
  color: var(--brand-text-muted);
  font-weight: 700;
}

.recipe-icons {
  display: grid;
  gap: 8px;
  align-items: center;
  justify-items: center;
  grid-auto-rows: 18px;
}

.recipe-icons.features {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

/* Plan cards: Features is a 2-col block — col1 Completeness/Cost, col2 Duration/Difficulty. */
.recipe-icons.features.features-grid--plan {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.recipe-icons.lifestyle {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.recipe-icons.allergens {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.discover-iconOnly {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: rgba(106, 75, 58, 0.85);
}

.discover-iconEmpty {
  width: 18px;
  height: 18px;
}

.discover-iconOnly.tone-green {
  color: #2e7d32;
}

.discover-iconOnly.tone-blue {
  color: #1565c0;
}

.discover-iconOnly.tone-avocado {
  color: #689f38;
}

/* Ensure bottom-layout icons fit 18×18 slots (new layout doesn't use .recipe-info-grid) */
.recipe-bottom .recipe-icon-wrapper {
  width: 18px;
  height: 18px;
}

/* Force any feature SVGs to the intended size (some icons are not wrapped) */
.recipe-bottom .features-block svg {
  width: 18px;
  height: 18px;
}

.recipe-bottom .dietary-icon {
  width: 18px;
  height: 18px;
}

.recipe-bottom .spicy-indicator {
  width: 18px;
  height: 18px;
}

.recipe-bottom .cost-icon {
  fill: var(--brand-text-warm, #5D4037);
}

.discover-iconOnly.tone-neutral {
  color: #8B4513;
}


/* Discover bottom-grid: ensure SVG wrappers fill 22×22 slots */
.recipe-info-grid .recipe-icon-wrapper {
  width: 18px;
  height: 18px;
}

.recipe-info-grid .dietary-icon {
  width: 18px;
  height: 18px;
}

.recipe-info-grid .spicy-indicator {
  width: 18px;
  height: 18px;
}

/* New middle flow: two-row, column-by-column packing */
.recipe-middle-flow {
  display: grid;
  grid-template-rows: repeat(2, 18px);
  grid-auto-flow: column;
  grid-auto-columns: 18px;
  gap: 6px 8px;
  align-items: center;
  justify-items: center;
  align-content: start;
}

.recipe-attributes-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.recipe-attributes-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 124px;
  align-items: end;
  gap: 10px;
  width: 100%;
  padding-top: 0;
}

.recipe-attributes-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.recipe-attributes-row--top {
  padding-bottom: 0;
  border-bottom: none;
}

.dietary-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: var(--brand-accent-sage);
}

/* Allergen row (separate from attributes) */
.allergen-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  border: none;
}

/* Allergen icons */
.allergen-icons {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.allergen-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
    background: rgba(139, 69, 19, 0.08); /* Subtle warm brown background */
    border-radius: 4px;
  padding: 2px;
    color: #8B4513; /* SaddleBrown - consistent color for stroke icons */
}

.allergen-indicator .allergen-icon {
    width: 100%;
    height: 100%;
    fill: #8B4513; /* SaddleBrown - uniform color for all allergens */
}

.allergen-indicator .allergen-icon.stroke-icon {
    fill: none;
    stroke: #8B4513; /* SaddleBrown - matches fill icons */
}

/* Allergen icon tooltip on hover */
.allergen-indicator:hover {
    background: rgba(139, 69, 19, 0.15);
}

.dietary-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.dietary-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.dietary-icon.stroke-icon {
  fill: none;
  stroke: currentColor;
}

.attribute-item.dietary-item {
  gap: 4px;
}

/* Dietary tag toggle grid (edit-recipe page) — discover icon style */
.dietary-tags-toggle-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.dietary-tags-toggle-grid .dietary-group-label {
  width: 100%;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

.dietary-tag-toggle {
  --break-color: var(--brand-bg-white, #fff);
  width: 34px;
  height: 34px;
  padding: 5px;
  border: 1.5px solid var(--brand-border, #e0e0e0);
  background: var(--brand-bg-white, #fff);
  color: var(--brand-text, #333);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  position: relative;
}

/* Lifestyle = circle, Free-from = rounded square */
.dietary-tag-toggle.is-lifestyle {
  border-radius: 50%;
}

.dietary-tag-toggle.is-freefrom {
  border-radius: 10px;
}

@media (hover: hover) and (pointer: fine) {
  .dietary-tag-toggle:hover:not(:disabled) {
    border-color: var(--brand-text, #333);
    transform: scale(1.08);
  }
}

.dietary-tag-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dietary-tag-toggle.is-active {
  --break-color: #fdf2eb;
  border-color: var(--brand-accent, #E85D04);
  background: rgba(232, 93, 4, 0.08);
}

/* Tone colors matching discover */
.dietary-tag-toggle.tone-green { color: #2e7d32; }
.dietary-tag-toggle.tone-blue { color: #1565c0; }
.dietary-tag-toggle.tone-avocado { color: #689f38; }
.dietary-tag-toggle.tone-neutral { color: #8B4513; }

.dietary-tag-toggle .break-line {
  stroke: var(--break-color) !important;
  stroke-width: 2.5px !important;
}

.dietary-tag-toggle svg,
.dietary-tag-toggle svg.dietary-icon {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.dietary-tag-toggle.stroke-icon svg,
.dietary-tag-toggle svg.stroke-icon {
  fill: none;
  stroke: currentColor;
}

.error-text {
  color: var(--brand-error, #d32f2f);
  font-size: 0.875rem;
  margin-top: 8px;
}

/* Recipe SVG icons (cuisine, servings, time, difficulty) */
.recipe-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.recipe-icon-wrapper .cuisine-icon {
    width: 100%;
    height: 100%;
    fill: var(--brand-text-warm, #5D4037);
}

.recipe-icon-wrapper .cuisine-icon.stroke-icon {
    fill: none;
    stroke: var(--brand-text-warm, #5D4037);
}

.nutrition-box font,
.nutrition-box .nutrition-item font {
  font-size: inherit !important;
  background: transparent !important;
}

.nutrition-box {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  align-content: start;
  gap: 6px 4px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  width: 100%;
  min-width: 0;
}

.nutrition-item--span {
  grid-column: 1 / span 2;
}

.nutrition-item {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  color: var(--brand-text-warm);
  min-width: 0;
  min-height: 18px;
}

.nutrition-item--cal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nutrition-item--cal span {
  justify-self: auto;
}

.nutrition-item span {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  justify-self: end;
}

.nutrition-item .nutrition-icon {
  width: 14px;
  height: 14px;
  fill: var(--brand-text-warm);
  stroke: var(--brand-text-warm);
}

.nutrition-item .nutrition-icon.stroke-icon {
  fill: none;
  stroke: var(--brand-text-warm);
  stroke-width: 2;
}

/* Cook info card: same footer contract as Discover cards */
.cook-card--info .recipe-bottom {
  margin-top: auto;
  overflow: visible;
}

.cook-card--info .recipe-bottom-row {
  flex-wrap: nowrap;
  align-items: center;
}

.cook-card--info .features-block,
.cook-card--info .middle-block {
  justify-content: center;
  align-self: center;
}

.cook-card--info .features-block .attr-box--plain,
.cook-card--info .middle-block .attr-box--plain {
  padding-top: 0;
  padding-bottom: 0;
}

.cook-card--info .nutrition-block {
  flex: 0 0 130px;
  margin-left: auto;
}

#cookAttributesMount {
  width: 100%;
  overflow: visible;
}


/* Mobile behavior: subtle dividers, no titles */
@media (max-width: 720px) {
  .recipe-info-title { display: none; }

  .recipe-info-section {
    border-right: 1px solid rgba(0, 0, 0, 0.08);
  }

  .recipe-info-section:last-child { border-right: 0; }
}

@media (max-width: 540px) {
  .recipe-info-grid {
    grid-template-columns: 1fr 1fr;
  }

  .recipe-info-section {
    border-right: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .recipe-info-section:nth-child(odd) {
    border-right: 1px solid rgba(0, 0, 0, 0.08);
  }

  .recipe-info-section:nth-child(2n) {
    border-right: 0;
  }

  /* Remove borders for the last row without relying on fixed section counts */
  .recipe-info-section:last-child {
    border-bottom: 0;
    border-right: 0;
  }

  /* If the last row has 2 items (even count), also remove bottom border on the second-last (odd index). */
  .recipe-info-section:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
  }
}

.info-item {
    text-align: center;
}

.info-icon {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 0.25rem;
}

.info-label {
    display: block;
    font-size: 0.75rem;
    color: var(--brand-text-muted);
    margin-bottom: 0.15rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value {
    display: block;
    font-weight: 600;
    color: var(--brand-text-warm);
    font-size: 0.9rem;
}

.view-hint {
    text-align: center;
    color: var(--brand-text-muted);
    font-size: 0.85rem;
    margin: 0;
}

/* Scroll Indicators (Carousel Dots) */
.scroll-indicators {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--brand-bg-white);
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-border);
    transition: background 0.3s, transform 0.2s;
    cursor: pointer;
}

.dot:hover {
    transform: scale(1.2);
}

.dot.active {
    background: var(--brand-accent-coral);
    transform: scale(1.3);
}

/* Recipe Detail Panel */
.recipe-panel {
    position: fixed;
    top: var(--nav-height); /* Start below sticky navbar */
    right: -100%;
    width: 100%;
    max-width: 600px;
    height: calc(100vh - var(--nav-height)); /* Adjust height for navbar */
    background: var(--brand-bg-white);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    transition: right 0.3s ease-in-out;
    z-index: 10000; /* Nuclear option: Way above everything */
    overflow-y: auto;
}

.recipe-panel.open {
    right: 0;
}

.panel-overlay {
    display: none;
    position: fixed;
    top: var(--nav-height); /* Start below sticky navbar */
    left: 0;
    width: 100%;
    height: calc(100% - var(--nav-height)); /* Adjust for navbar */
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999; /* Just below panel (10000) */
    cursor: pointer;
}

.recipe-panel.open .panel-overlay {
    display: block;
}

/* Language overlay loads async; keep panel visible (loading spinner covers fetch). */
#recipePanelContent.discover-panel--language-pending,
#recipePanelContent.discover-panel--locale-pending {
    opacity: 1;
    pointer-events: auto;
}

.panel-content {
    position: relative;
    padding: 2rem;
    z-index: 10001; /* Above panel (10000) and overlay (9999) */
    background: var(--brand-bg-white);
}

.panel-close {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    font-size: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--brand-text);
    z-index: 1600; /* Higher than navbar (1500) */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.panel-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

.recipe-detail .recipe-hero {
    width: 100%;
    border-radius: 12px;
  margin-bottom: 0;
  display: block;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.recipe-detail .recipe-hero-wrap {
  position: relative;
  margin-bottom: 1.5rem;
}

.recipe-detail h2 {
    color: var(--brand-text);
    margin-bottom: 0.5rem;
}

.recipe-meta {
    display: flex;
    gap: 1.5rem;
    margin: 1rem 0 2rem 0;
    color: rgba(90, 117, 102, 0.7);
}

.recipe-section {
    margin-bottom: 2rem;
}

.recipe-section h3 {
    color: var(--brand-accent);
    border-bottom: 2px solid var(--brand-accent);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.ingredients-list,
.steps-list {
    padding-left: 1.5rem;
}

.ingredients-list li,
.steps-list li {
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.ingredient-note {
    display: block;
    font-style: italic;
    color: rgba(90, 117, 102, 0.7);
    font-size: 0.9rem;
}

.step-time {
    display: inline-block;
    margin-left: 0.5rem;
    color: var(--brand-accent);
    font-weight: 600;
}

/* Loading & No Results */
.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(107, 155, 118, 0.2);
    border-top-color: var(--brand-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.no-results {
    text-align: center;
    padding: 3rem;
    color: rgba(90, 117, 102, 0.7);
}

.error {
    color: #dc3545;
    text-align: center;
    padding: 2rem;
}

/* ========================================
   8.1 COOK PAGE STYLES
   ======================================== */

/* Cook Loading State */
.cook-loading {
    text-align: center;
    padding: 3rem;
    color: var(--brand-text-secondary);
    font-size: 1.1rem;
}

/* Language overlay loads async; canonical content stays visible while getRecipe returns. */
.cook-recipe-container.cook-recipe--language-pending,
.cook-recipe-container.cook-recipe--locale-pending {
    opacity: 1;
    pointer-events: auto;
}

/* Hide shell until Phase 1 JSON applies — nav stays visible for stable chrome */
html.cookeat-i18n-pending .announcement-banner,
html.cookeat-i18n-pending .site-footer,
html.cookeat-i18n-pending .landing-hero {
    visibility: hidden;
}

/* Cook Hero Section */
.cook-hero {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: visible;
}

.cook-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    display: block;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* Prevent casual image download from step carousel */
.cook-photo-carousel img {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Cook Meta Row - Like/Save and Creator (Below Hero) */
.cook-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.75rem;
  margin-top: 0.35rem;
  margin-bottom: 1rem;
}

.cook-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cook-action-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;       /* icon stays centered like main — only count drops to bottom (see .cook-action-count) */
  justify-content: center;
  gap: 2px;
  min-width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0 6px;
  border-radius: 6px;
  color: var(--brand-text-muted, #666);
  transition: color 0.2s;
}

.cook-action-btn:hover {
  color: var(--brand-text);
}

.cook-engagement-icon {
  width: 24px;
  height: 24px;
}

.cook-engagement-icon.engagement-outline {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.cook-engagement-icon.engagement-filled {
  fill: currentColor;
  stroke: none;
}

.cook-like-btn.active .engagement-outline {
  display: none;
}

.cook-like-btn.active .engagement-filled {
  color: #e11d48;
}

.cook-save-btn.active .engagement-outline {
  display: none;
}

.cook-save-btn.active .engagement-filled {
  color: var(--brand-text);
}

.cook-creator-signature span {
  font-size: 0.9rem;
  color: var(--brand-text-muted);
  font-style: italic;
}

/* ===== Recipe rating + engagement counts (Cook + Discover icon rows) ===== */

/* Subscript-style count next to heart / save / rating icons.
 * align-self: flex-end overrides the parent's align-items: center so
 * the count drops to the bottom of the row while the icon stays centered. */
.cook-action-count {
  font-size: 0.72em;
  color: var(--brand-text-muted, #666);
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
  line-height: 1;
  align-self: flex-end;
  padding-bottom: 4px;
}

/* Rating wrapper: trigger collapsed by default, picker expands on hover/focus */
.recipe-rating {
  display: inline-flex;
  align-items: center;
  -webkit-user-select: none;
  user-select: none;
  line-height: 1;
  position: relative;
}

.recipe-rating-trigger { display: inline-flex; }
.recipe-rating-picker  {
  display: none;
  align-items: center;
  gap: 1px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.recipe-rating--interactive:hover .recipe-rating-trigger,
.recipe-rating--interactive:focus-within .recipe-rating-trigger,
.recipe-rating--interactive.is-open .recipe-rating-trigger {
  display: none;
}

.recipe-rating--interactive:hover .recipe-rating-picker,
.recipe-rating--interactive:focus-within .recipe-rating-picker,
.recipe-rating--interactive.is-open .recipe-rating-picker {
  display: inline-flex;
}

/* Picker stars — outline like heart/save in inactive state, filled on hover/select */
.recipe-rating-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--brand-text-muted, #666);
  cursor: pointer;
  transition: color 0.15s, transform 0.1s;
}

.recipe-rating-star svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.recipe-rating-star.is-filled,
.recipe-rating-star.is-preview,
.recipe-rating-star:hover {
  color: var(--brand-accent, #ff8a3d);
}

.recipe-rating-star.is-filled svg,
.recipe-rating-star.is-preview svg,
.recipe-rating-star:hover svg {
  fill: currentColor;
  stroke: currentColor;
}

.recipe-rating-star:hover { transform: scale(1.1); }

/* Reusable partial-fill star (--fill-pct: 0..100). Two stacked SVG paths:
 * outline always renders; filled clipped to fill-pct so the star appears
 * partially filled to match a rating average. Used on Cook (interactive)
 * + Discover (read-only). */
.star-progress {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
}

/* On Cook the engagement icons render at 24px, so the rate-trigger star
 * needs to match — otherwise it looks visibly smaller next to heart + save. */
.cook-rate-btn .star-progress {
  width: 20px;
  height: 20px;
}

.star-progress.star-progress--sm {
  width: 16px;
  height: 16px;
}

.star-progress svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.star-progress .star-outline {
  fill: none;
  stroke: var(--brand-text-muted, #666);
  stroke-width: 2;
  stroke-linejoin: round;
}

.star-progress .star-fill {
  fill: var(--brand-accent, #ff8a3d);
  stroke: none;
  clip-path: inset(0 calc(100% - var(--fill-pct, 0%)) 0 0);
}

.cook-rate-btn:hover .star-outline,
.cook-rate-btn.has-rated .star-outline {
  stroke: var(--brand-accent, #ff8a3d);
}

.card-action-rating.has-rated .star-outline {
  stroke: var(--brand-accent, #ff8a3d);
}

/* Discover read-only display: small star + "4.8 (8K)" inline */
.recipe-rating--display {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85em;
}

.recipe-rating--display .recipe-rating-icon {
  width: 14px;
  height: 14px;
  color: var(--brand-accent, #ff8a3d);
  display: inline-flex;
}

.recipe-rating--display .recipe-rating-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
}

.recipe-rating-avg {
  font-weight: 600;
  color: var(--brand-text, #333);
}

.recipe-rating-count-inline {
  color: var(--brand-text-muted, #666);
}

/* Cook Header - Title & Description */
.cook-header {
    padding: 2rem;
    background: var(--brand-bg-white);
}

.cook-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
    margin: 0 0 1rem 0;
    color: var(--brand-text);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.2;
}

.cook-title-text {
  flex: 1 1 auto;
  min-width: 0;
}

.cook-cuisine-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  color: var(--brand-text);
}

.cook-cuisine-icon svg {
    width: 32px;
    height: 32px;
}

/* Cuisine icons that use fill (not strokes) - e.g., Asian, Mexican */
.cook-cuisine-icon svg:not(.stroke-icon) {
    fill: currentColor;
}

/* Cuisine icons that use strokes */
.cook-cuisine-icon svg.stroke-icon {
    stroke: currentColor;
    fill: none;
}

.cook-description {
    margin: 0;
    color: var(--brand-text-secondary);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 90%;
}

/* Cook Info Section - 4-Column Grid Layout */
.cook-info-section {
    padding: 2rem;
    background: var(--brand-bg-light);
    border-top: 1px solid var(--brand-border);
}

.cook-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.cook-info-group {
    padding: 0;
}

.cook-info-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--brand-text);
    margin-bottom: 0.75rem;
    padding-bottom: 0;
}

.cook-info-icons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cook-icon-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: var(--brand-text);
    padding: 0.5rem 0;
}

.cook-icon-item svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
}

.cook-icon-label {
    display: none;
}

.cook-icon-empty {

    /* Cook Features Grid - 3x2 layout for attributes section */
    .cook-features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.75rem 1rem;
    }
    color: var(--brand-text-secondary);
    font-style: italic;
}

.cook-nutrition-group {
    grid-column: 4;
}

/* Cook Sections - Ingredients & Instructions */
.cook-section {
    padding: 2rem;
    border-top: 1px solid var(--brand-border);
}

.cook-section-title {
    margin: 0 0 1.5rem 0;
    color: var(--brand-text);
    font-size: 1.5rem;
    font-weight: 800;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--brand-accent);
}

/* Ingredients List */
.cook-ingredients-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cook-ingredient {
    padding: 0.75rem 1rem;
    background: var(--brand-bg-light);
    border-left: 3px solid var(--brand-accent);
    border-radius: 4px;
}

/* Steps List */
.cook-steps-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cook-step {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--brand-bg-light);
    border-radius: 8px;
}

.cook-step-number {
    min-width: 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-accent);
    color: white;
    border-radius: 50%;
    font-weight: 800;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Step content - flexible layout for image + text + duration */
.cook-step-content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}

.cook-step-image {
    flex-shrink: 0;
    width: 100px;
}

.cook-step-img {
    width: 100%;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
}

.cook-step-text-col {
    flex: 1;
    min-width: 200px;
}

.cook-step-text {
    margin: 0;
    color: var(--brand-text);
    line-height: 1.6;
    font-size: 1rem;
}

.cook-step-duration-col {
    flex-shrink: 0;
    align-self: flex-start;
}

.cook-step-duration {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--brand-text-secondary);
    background: white;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    white-space: nowrap;
}

.cook-step-duration svg {
    width: 16px;
    height: 16px;
}

/* Cook Navigation Controls */
.cook-nav-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5rem;
    padding: 1.5rem;
}

.cook-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand-accent);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    font-size: 1.2rem;
}

.cook-nav-btn:hover:not(:disabled) {
    background: var(--brand-accent-hover);
    transform: scale(1.1);
}

.cook-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cook-position {
    font-weight: 600;
    color: var(--brand-text);
    font-size: 1rem;
    min-width: 60px;
    text-align: center;
}

/* ========================================
   9. RESPONSIVE & MEDIA QUERIES
   ======================================== */

/* Announcement Banner Desktop */
@media (min-width: 768px) {
  .announcement-banner { 
    height: 48px;
    padding: 0 1rem;
  }
}

/* Navigation Desktop Layout (≥960 — below that uses compact burger shell) */
@media (min-width: 960px) {
  .nav-toggle { 
    display: none; 
  }
  
  .nav-links {
    display: flex !important;
    position: static;
    flex-direction: row;
    gap: 0.25rem 0.5rem;
    align-items: center;
    margin-left: 0.5rem;
    padding: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    transform: none;
    opacity: 1;
    justify-content: flex-start;
  }
  
  .nav-links a {
    padding: 0.5rem 0.25rem;
  }
  
  /* Desktop: Larger icons with hover effects */
  .nav-actions {
    gap: 0.5rem;
    margin-left: auto;
  }
  
  .nav-actions .nav-item {
    width: 50px;
    height: 50px;
    transition: transform 0.16s ease, color 0.16s ease, background-color 0.16s ease;
    will-change: transform;
  }
  
  .nav-actions .nav-item svg {
    width: 26px;
    height: 26px;
  }
  
  .nav-actions .nav-item:hover {
    transform: translateY(-3px) scale(1.06);
    color: var(--brand-accent);
    background-color: rgba(90, 117, 102, 0.04);
  }
  
  .nav-actions .subscribe svg {
    stroke-width: 1.9;
  }
}

/* Tablet 768–1024: hide Home (logo = home). Was landscape-only, which left Home
   visible in portrait (e.g. 820–914px wide) — looked like Home “came back”. */
@media (min-width: 768px) and (max-width: 1024px) {
  .nav-links > li:first-child {
    display: none;
  }
}

/* Compact main nav (≤959): burger, icon row, slide-in location/login/subscribe */
@media (max-width: 959px) {
  .site-nav {
    overflow: clip visible;
  }

  .nav-links {
    display: flex !important;
    position: static;
    flex-direction: row;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
    margin-right: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    min-width: auto;
    width: auto;
    max-width: none;
    transition: opacity 0.25s ease;
  }

  /* Logo links to /; hide duplicate Home icon so Create fits in the mobile row */
  .nav-links > li:first-child {
    display: none;
  }

  .nav-links a span {
    display: none;
  }

  .nav-links a {
    padding: 0.5rem;
    justify-content: center;
  }

  .nav-links a svg {
    width: 22px;
    height: 22px;
  }

  .site-nav.nav-open .nav-links {
    opacity: 0;
    pointer-events: none;
  }

  .nav-toggle {
    order: 10;
    margin-left: auto;
  }

  .nav-actions {
    position: absolute;
    right: 50px;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.5rem;
    background: var(--nav-bg);
    transform: translateX(calc(100% + 100px));
    transition: transform 0.3s ease;
  }

  .nav-actions .nav-item {
    width: 40px;
    height: 40px;
  }

  .nav-actions .nav-item svg {
    width: 22px;
    height: 22px;
  }

  .site-nav.nav-open .nav-actions {
    transform: translateX(0);
  }

  .site-nav.nav-open .nav-toggle .hamburger {
    background: transparent;
  }

  .site-nav.nav-open .nav-toggle .hamburger::before {
    transform: translateY(0) rotate(45deg);
  }

  .site-nav.nav-open .nav-toggle .hamburger::after {
    transform: translateY(-2px) rotate(-45deg);
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .landing-hero {
    padding: 32px 20px;
  }

  .landing-hero-img {
    height: 100px;
  }

  .landing-cta-group {
    flex-direction: column;
    align-items: center;
  }

  h1 {
    font-size: 2rem;
  }

  .legal-content,
  .legal-policy {
    padding: 1.25rem;
    margin: 1rem;
  }

  main {
    padding: 20px 10px;
  }

  /* ======================================
     FOOTER MOBILE - COMPACT
     ====================================== */

  .site-footer {
    padding: 14px 4px calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .site-footer .footer-content {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  .site-footer p.footer-legal,
  .site-footer p {
    font-size: clamp(0.68rem, 2.8vw, 0.8rem);
    line-height: 1.35;
    margin-bottom: 8px;
    text-wrap: balance;
  }

  .site-footer .footer-copy-desktop {
    display: none;
  }

  .site-footer .footer-copy-mobile {
    display: inline;
  }

  /* One row of six icon links — no wrap */
  .site-footer nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2px;
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    justify-content: stretch;
  }

  .site-footer nav a {
    margin: 0 !important;
    padding: 8px 0;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }

  /* Footer policy icons - show icons on mobile, hide text */
  .site-footer nav a .footer-icon {
    display: block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }

  .site-footer nav a .footer-text {
    display: none;
  }

  /* Ensure SVG child elements inherit stroke styling on mobile */
  .site-footer nav a .footer-icon path,
  .site-footer nav a .footer-icon circle,
  .site-footer nav a .footer-icon line,
  .site-footer nav a .footer-icon polyline {
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ======================================
     CAROUSEL MOBILE RESPONSIVENESS (touch only — keep hover arrows on narrow desktop)
     ====================================== */

  /* Larger touch target for dots on narrow viewports */
  .carousel-dot {
    width: 10px;
    height: 10px;
    padding: 4px;
  }

  .carousel-dot.active {
    width: 28px;
  }

  /* Step indicator slightly larger for readability */
  .carousel-step-indicator {
    font-size: 0.85rem;
    padding: 5px 12px;
  }

  /* Recipe card full width on small screens */
  .recipe-card {
    max-width: 100%;
  }

  /* Photo view height adjusts to viewport */
  .photo-view {
    height: 220px;
  }

  /* ======================================
     RECIPE PANEL MOBILE - FULL SCREEN
     ====================================== */

  .recipe-panel {
    max-width: 100%;
    width: 100%;
    top: 0;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile browsers */
  }

  .panel-overlay {
    top: 0;
    height: 100%;
  }

  .panel-content {
    padding: 1rem;
    padding-top: 3.5rem; /* Space for close button */
  }

  .panel-close {
    top: 0.5rem;
    right: 0.5rem;
    width: 44px;
    height: 44px;
    font-size: 1.8rem;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }

  /* Recipe detail content */
  .recipe-detail .recipe-hero {
    border-radius: 8px;
    margin-bottom: 1rem;
  }

  .recipe-detail h2 {
    font-size: 1.5rem;
  }

  .recipe-meta {
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.9rem;
  }

  .recipe-section {
    margin-bottom: 1.5rem;
  }

  .recipe-section h3 {
    font-size: 1.1rem;
  }

  .ingredients-list,
  .steps-list {
    padding-left: 1.25rem;
  }

  .ingredients-list li,
  .steps-list li {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
  }
}

/* Desktop: Wider content */
@media (min-width: 1200px) {
  .nav-inner,
  .footer-content {
    max-width: 1200px;
  }
}

/* Coming Soon Toast (mobile) */
.coming-soon-toast {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--brand-text);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 9999;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.coming-soon-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ========================================
   DISCOVER PAGE STYLES
   ======================================== */

/* Filters Section */
.filters-section {
  background: var(--brand-accent);
  padding: 30px 20px;
  margin-bottom: 30px;
}

.filters-container {
  max-width: 1200px;
  margin: 0 auto;
}

.search-box {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  max-width: 600px;
}

.search-box input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid white;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Quicksand', sans-serif;
}

.search-box button {
  padding: 12px 20px;
  background: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.2rem;
  transition: transform 0.2s;
}

.search-box button svg {
  display: block;
  stroke: var(--brand-accent);
}

.search-box button:hover {
  transform: scale(1.05);
}

.search-box button:hover svg {
  stroke: var(--brand-accent-hover);
}

.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.filter-group label {
  display: block;
  color: white;
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 0.9rem;
}

.filter-group select {
  width: 100%;
  padding: 10px;
  border: 2px solid white;
  border-radius: 6px;
  font-size: 1rem;
  font-family: 'Quicksand', sans-serif;
  background: white;
}

/* Recipes Section */
.recipes-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 8px 12px;
}

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 25px;
  margin-bottom: 0;
  justify-items: stretch;
  align-items: stretch;
}

/* In-feed ads: fill grid cell; image scales with contain (no crop) */
.recipe-grid > .recipe-card {
  width: 100%;
  height: 100%;
  max-width: 100%;
}

.recipe-grid > .recipe-card.ad-card--fullbleed {
  height: 100%;
  min-height: 0;
}

/* Link + img use global fullbleed rules (100% × 100%, object-fit: contain) to scale up narrow ads */

/* Discover: tighter min track below desktop rail width */
@media (max-width: 1112px) {
  .recipe-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
  }
}

/* Width band 935–1112: exactly 3 cards per row (matches pager; no orientation) */
@media (min-width: 935px) and (max-width: 1112px) {
  .recipe-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    justify-items: stretch;
  }
}

/* c935: 2 cards per row */
@media (max-width: 934px) {
  .recipe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    justify-items: stretch;
  }
}

/* c960: slightly smaller card titles, max 3 lines */
@media (max-width: 959px) {
  .recipe-card .recipe-title {
    font-size: 1.05rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Phones: keep single-column cards for the “mobile nailed” layout */
@media (max-width: 600px) {
  .recipe-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    justify-items: stretch;
  }
}

/* Duplicate .recipe-card removed — primary definition at line ~1829 with proper
   @media (hover: hover) guard. This unguarded :hover caused touch flicker. */

.card-views-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.card-views-container::-webkit-scrollbar {
  display: none;
}

.card-view {
  min-width: 100%;
  scroll-snap-align: start;
  padding: 20px;
}

.card-view img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

.scroll-indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 0;
}

.scroll-indicators .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
  transition: background 0.3s;
}

.scroll-indicators .dot.active {
  background: var(--brand-accent);
}

/* Recipe Panel styles moved to main section above (lines 1461-1520) */

/* Loading & Error States */
.loading {
  text-align: center;
  padding: 60px 20px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--brand-bg-light);
  border-top-color: var(--brand-accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.error-message {
  /* Background/padding removed - inner content handles styling */
  text-align: center;
  margin: 20px;
}

/* ========================================
   CREATE RECIPE PAGE STYLES
   ======================================== */

.create-recipe-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--nav-height) - 120px);
  padding: 40px 20px;
}

.create-container {
  max-width: 700px;
  text-align: center;
}

.create-container h1 {
  margin-bottom: 15px;
}

.page-description {
  font-size: 1.1rem;
  margin-bottom: 40px;
  color: var(--brand-text);
}

.coming-soon-box {
  background: white;
  border-radius: 16px;
  padding: 50px 40px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.chef-icon {
  width: 80px;
  height: 80px;
  stroke: var(--brand-accent);
  margin-bottom: 20px;
}

.coming-soon-box h2 {
  color: var(--brand-accent-hover);
  font-size: 2rem;
  margin-bottom: 20px;
}

.coming-soon-box p {
  font-size: 1.1rem;
  margin-bottom: 15px;
  line-height: 1.6;
}

.feature-list {
  list-style: none;
  margin: 30px 0;
  text-align: left;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  margin-bottom: 10px;
  background: var(--brand-bg-light);
  border-radius: 8px;
  font-size: 1.05rem;
}

.feature-list svg {
  width: 24px;
  height: 24px;
  stroke: var(--brand-accent);
  flex-shrink: 0;
}

.feature-list a {
  color: var(--brand-accent-hover);
  text-decoration: none;
  font-weight: 600;
}

.feature-list a:hover {
  text-decoration: underline;
}

/* ========================================
   COOK PAGE STYLES
   ======================================== */

/* Filter Section */
.cook-filters-section {
  background: var(--cook-filters-bg);
  border-bottom: 1px solid var(--brand-border);
  padding: 0.6rem 0;
  position: sticky;
  top: var(--nav-height);
  z-index: 90;
}

.cook-filters-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.cook-search-box {
  display: flex;
  align-items: center;
  background: var(--brand-bg-white);
  border: 2px solid var(--brand-border);
  border-radius: 24px;
  padding: 0.45rem 0.9rem;
  flex: 1;
  min-width: 200px;
  max-width: 400px;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.cook-search-box:hover {
  border-color: var(--brand-accent);
}

.cook-search-box:focus-within {
  border-color: var(--brand-accent);
  box-shadow: 0 2px 10px rgba(0,0,0,0.10);
}

.cook-search-box input {
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--brand-text);
  width: 100%;
}

.cook-search-box input::placeholder {
  color: rgba(63, 46, 31, 0.75);
}

.cook-search-box button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  color: var(--brand-text);
}


.cook-search-box button svg {
  width: 13px;
  height: 13px;
}

.cook-filters-bar {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  flex: 1;
  position: relative;
  justify-content: flex-end;
}

.cook-filter-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-border);
  background: var(--brand-bg-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: var(--brand-text);
}

.cook-filter-btn:hover {
  border-color: var(--brand-accent);
  background: var(--brand-bg-light);
}

.cook-filter-btn.active {
  border-color: var(--brand-accent);
  background: var(--brand-accent);
  color: white;
}

.cook-filter-btn.active svg {
  stroke: white;
}

.cook-filter-btn.disabled,
.cook-filter-btn:disabled {
  cursor: not-allowed;
  border-color: var(--brand-border);
  background: var(--brand-bg-light);
}

/* Apply opacity to icon only, not button (preserves stacking context for tooltips) */
.cook-filter-btn.disabled svg,
.cook-filter-btn:disabled svg {
  opacity: 0.4;
}

.cook-filter-btn.disabled:hover,
.cook-filter-btn:disabled:hover {
  border-color: var(--brand-border);
  background: var(--brand-bg-light);
}

/* Vertical divider between filter groups */
.cook-filter-separator {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--brand-border, #ddd);
  margin: 0 4px;
  align-self: center;
}

/* Scaling button wrapper + dropdown */
.cook-scaling-wrapper {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.cook-scaling-btn {
  background: none;
  border: 1.5px solid transparent;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s;
  color: var(--brand-text, #333);
  overflow: visible;
}
.cook-scaling-btn:hover {
  border-color: var(--brand-border, #ddd);
  background: var(--brand-bg-light, #f8f8f8);
}
.cook-scaling-btn svg {
  width: 24px;
  height: 24px;
}

.cook-scaling-btn.active {
  border-color: var(--brand-accent, #ff8a3d);
  background: rgba(255, 138, 61, 0.08);
}
.cook-scaling-btn.active svg text {
  fill: var(--brand-accent, #ff8a3d);
}
.cook-scaling-btn.active svg circle {
  stroke: var(--brand-accent, #ff8a3d);
}

.cook-scaling-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  min-width: 260px;
  max-width: 340px;
  background: #fff;
  border: 1px solid var(--brand-border, #ddd);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 1rem;
  margin-top: 6px;
}

/* Cook: scaling sits left of prev/next; default right:0 on the popover would extend
   260px left and clip the viewport. Anchor the panel to the *left* of the button so it
   extends right, and cap width to the viewport. */
@media (max-width: 767px), (any-pointer: coarse) and (orientation: portrait) and (min-width: 601px) and (max-width: 1024px) {
  .cook-page-filters .cook-scaling-wrapper .cook-scaling-dropdown {
    left: 0;
    right: auto;
    min-width: min(260px, calc(100vw - 1.5rem));
    max-width: min(340px, calc(100vw - 1.5rem));
  }
}

.scaling-dropdown-header {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  color: var(--brand-text, #333);
}

.scaling-member-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  font-size: 0.875rem;
}
.scaling-member-row input[type="checkbox"] {
  accent-color: var(--brand-accent, #ff8a3d);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.scaling-member-name {
  flex: 1;
  color: var(--brand-text, #333);
}
.scaling-member-multiplier {
  color: #888;
  font-size: 0.8rem;
  min-width: 2.5rem;
  text-align: right;
}

.scaling-simple-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.scaling-simple-row .household-stepper,
.household-stepper--sm {
  width: 28px;
  height: 28px;
  font-size: 1rem;
  border-radius: 50%;
  border: 1.5px solid var(--brand-border, #ddd);
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-text, #333);
}
.household-stepper--sm:hover {
  border-color: var(--brand-accent, #ff8a3d);
  background: var(--brand-bg-light, #f8f8f8);
}
.scaling-simple-value {
  font-weight: 700;
  min-width: 1.5rem;
  text-align: center;
}

.scaling-summary {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--brand-border, #eee);
  font-size: 0.8rem;
  color: #888;
}

.scaling-toggle-row {
  margin-bottom: 0.75rem;
}
.scaling-toggle-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
}
.scaling-toggle-label input[type="checkbox"] {
  accent-color: var(--brand-accent, #ff8a3d);
  width: 16px;
  height: 16px;
}
.scaling-toggle-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.scaling-toggle-disabled input {
  cursor: not-allowed;
}
.scaling-toggle-hint {
  font-size: 0.8rem;
  color: #888;
  margin-top: 0.35rem;
  line-height: 1.4;
}
.scaling-toggle-hint a {
  color: var(--brand-accent, #ff8a3d);
  font-weight: 600;
  text-decoration: none;
}
.scaling-toggle-hint strong {
  color: var(--brand-accent, #ff8a3d);
}

.scaling-household-info {
  font-size: 0.85rem;
  color: var(--brand-accent, #ff8a3d);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.scaling-member-type-label {
  color: #aaa;
}

.scaling-divider {
  font-size: 0.8rem;
  color: #aaa;
  text-align: center;
  margin: 0.75rem 0 0.5rem;
  position: relative;
}
.scaling-divider::before,
.scaling-divider::after {
  content: '';
  display: inline-block;
  width: 20%;
  height: 1px;
  background: var(--brand-border, #ddd);
  vertical-align: middle;
  margin: 0 0.5rem;
}

.scaling-visitor-msg {
  font-size: 0.85rem;
  color: #888;
  text-align: center;
  padding: 0.5rem 0;
}
.scaling-visitor-msg a {
  color: var(--brand-accent, #ff8a3d);
  font-weight: 600;
}

/* Scaled ingredient highlight */
.cook-ingredient-amount.scaled {
  color: var(--brand-accent, #ff8a3d);
}
.cook-scaled-label {
  font-size: 0.8rem;
  color: var(--brand-accent, #ff8a3d);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

/* Cook page uses Discover's 3-column grid directly (empty middle column reserved for future) */

/* ========================================
   DISCOVER FILTER BAR (Cook-style)
   ======================================== */

.discover-filters-bar {
  flex: 1;
}

/* Discover: tighten top gap under announcement banner while keeping breathing room */
.cook-filters-section.discover-filters-section {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.sticky-shell-target {
  position: sticky;
  top: var(--nav-height, 56px);
  z-index: var(--sticky-shell-z-index, 1300);
  transition: top 0.3s ease, transform 0.3s ease;
}

/* Add separation between filter bar and recipe cards (Discover + Cook) */
.cook-filters-section.discover-filters-section + .recipes-section,
.cook-filters-section.discover-filters-section + .cook-recipe-section {
  padding-top: 16px;
}

/* Discover: recipe grid is now wrapped for the optional desktop ad rail */
.cook-filters-section.discover-filters-section + .page-rail-wrap .recipes-section {
  padding-top: 16px;
}

/* ── Filter-page module (main.page-main--filter) ─────────────────────────────
   Site shell (nav, banner) stays outside main.
   main holds: [filter module] + [page-rail-wrap → page-rail-main + ad rails].
   Inset padding lives on content sections inside .page-rail-main — not on main, not on
   the page-rail-main wrapper (vertical gap only there). Plan + Discover on module contract; Cook follows. */

.page-main--filter {
  padding: 0;
  overscroll-behavior-x: none;
}

.page-main--filter > .page-rail-wrap {
  min-width: 0;
  max-width: 100%;
}

.page-main--filter .cook-filters-section.discover-filters-section {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

.page-main--filter > .page-rail-wrap > .page-rail-main {
  padding-top: 16px;
  min-width: 0;
  max-width: 100%;
}

/* Module contract: vertical gap on page-rail-main only — not on inner content sections */
.page-main--filter .cook-filters-section.discover-filters-section + .page-rail-wrap .recipes-section,
.page-main--filter .cook-filters-section.discover-filters-section + .page-rail-wrap .cook-recipe-section {
  padding-top: 0;
}

/* Discover / Cook reel pager: right-edge next control — anchor tooltip to the right */
#nextRecipeBtn .custom-tooltip,
#planStripNextBtn .custom-tooltip {
  left: auto;
  right: 0;
  transform: translateX(0);
}

#prevRecipeBtn .custom-tooltip,
#planStripPrevBtn .custom-tooltip {
  left: 0;
  right: auto;
  transform: translateX(0);
}

/* Discover card footer: favourite / add-to-list */
.card-action-btn.tooltip-parent {
  position: relative;
  overflow: visible;
}

/* Cook hero engagement row */
.cook-action-btn.tooltip-parent {
  position: relative;
  overflow: visible;
}

/* Plan reel / editor preview: publish eye (top-left) */
.plan-strip-grid .plan-card-eye.tooltip-parent {
  overflow: visible;
}

.plan-strip-grid .plan-card-eye .custom-tooltip {
  left: 0;
  right: auto;
  top: calc(100% + 6px);
  transform: translateX(0);
}

/* Photo chrome (top-left): locale flag, publish eye, quick edit — anchor below, left-aligned */
.recipe-locale-flag.tooltip-parent,
.recipe-visibility-btn.tooltip-parent,
.recipe-edit-btn.tooltip-parent {
  overflow: visible;
}

.recipe-locale-flag .custom-tooltip,
.recipe-visibility-btn .custom-tooltip,
.recipe-edit-btn .custom-tooltip,
.cook-hero .recipe-locale-flag .custom-tooltip,
.cook-hero .recipe-visibility-btn .custom-tooltip,
.cook-hero .recipe-edit-btn .custom-tooltip {
  left: 0;
  right: auto;
  top: calc(100% + 6px);
  transform: translateX(0);
  text-align: left;
  white-space: normal;
  max-width: 260px;
}

/* Cook: scale servings on the left below c935 — anchor tooltip below-left so it grows right */
@media (max-width: 934px) {
  #scalingBtn .custom-tooltip,
  .cook-scaling-btn .custom-tooltip {
    left: 0;
    right: auto;
    transform: translateX(0);
  }
}

/* Plan S4 shell: tight desktop/tablet (601–1112) — horizontal scroll on the grid only.
   Container stays overflow:visible so quick icons are not vertically clipped (overflow-y:auto
   side-effect when overflow-x is on the container). Matches search-shrink band @1112px. */
@media (min-width: 601px) and (max-width: 1112px) {
  .page-main--filter:has(.page-rail-wrap--plan) .cook-filters-container {
    max-width: 100%;
    overflow: visible;
  }

  .page-main--filter:has(.page-rail-wrap--plan) .plan-filters-grid {
    min-width: 0;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .page-main--filter:has(.page-rail-wrap--plan) .plan-filters-grid::-webkit-scrollbar {
    display: none;
  }

  /* Plan has no Discover bottom meta row — allow search+quick row to wrap before rail overlaps */
  .page-main--filter:has(.page-rail-wrap--plan) .plan-filters-grid .discover-left-top-row {
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }
}

@media (max-width: 1024px) {
  .page-main--filter:has(.page-rail-wrap--plan) .cook-filters-container,
  .page-main--filter:has(.page-rail-wrap--plan) .plan-strip,
  .page-main--filter:has(.page-rail-wrap--plan) .mealplan-grid-wrap,
  .page-main--filter:has(.page-rail-wrap--plan) .plan-grid-week-nav-row,
  .page-main--filter:has(.page-rail-wrap--discover) .recipes-section,
  .page-main--filter:has(.page-rail-wrap--cook) .cook-recipe-section {
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media (min-width: 1025px) {
  .page-main--filter:has(.page-rail-wrap--plan) .cook-filters-container,
  .page-main--filter:has(.page-rail-wrap--plan) .plan-strip,
  .page-main--filter:has(.page-rail-wrap--plan) .mealplan-grid-wrap,
  .page-main--filter:has(.page-rail-wrap--plan) .plan-grid-week-nav-row {
    padding-left: 12px;
    padding-right: 12px;
  }

  .page-main--filter:has(.page-rail-wrap--cook) .cook-recipe-section {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (max-width: 934px) {
  /* Vertical inset only — horizontal lives on each content section (plan-strip, etc.). */
  .page-main--filter > .page-rail-wrap > .page-rail-main {
    padding-bottom: 20px;
  }
}

.discover-filters-grid {
  display: grid;
  width: 100%;
  /* 3 columns: left (search+quick), middle (pills/meta), right (pager/count) */
  grid-template-columns: minmax(560px, 1.25fr) minmax(380px, 1fr) max-content;
  grid-template-areas:
    "leftTop midTop rightTop"
    "leftBottom midBottom rightBottom";
  gap: 0.75rem 0.5rem;
  align-items: start;
}

/* Discover page: collapse to a 2-column grid (left flexes, right is snug & right-aligned) */
.discover-filters-grid.discover-filters-desktop {
  grid-template-columns: 1fr max-content;
  grid-template-areas:
    "leftTop rightTop"
    "leftBottom rightBottom";
}

/* Allow grid cells to shrink instead of forcing overflow at in-between widths */
.discover-filters-grid > * {
  min-width: 0;
}

@media (max-width: 1050px) {
  .discover-filters-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) max-content;
  }
}

/* Cook page: 2-column grid — middle column is always empty so collapse it */
.cook-page-filters .discover-filters-grid {
  grid-template-columns: 1fr max-content;
  grid-template-areas: "leftTop rightTop";
}

.cook-page-filters .discover-cell--mid-top:empty {
  display: none;
}

/* Align scaling btn + separator + nav in a row */
.cook-page-filters .discover-cell--right-top {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.discover-cell--left-top { grid-area: leftTop; }
.discover-cell--mid-top { grid-area: midTop; }
.discover-cell--right-top { grid-area: rightTop; }
.discover-cell--left-bottom { grid-area: leftBottom; }
.discover-cell--mid-bottom { grid-area: midBottom; }
.discover-cell--right-bottom { grid-area: rightBottom; }

/* Keep right column content aligned (pager + results count) */
.discover-cell--right-top,
.discover-cell--right-bottom {
  justify-self: end;
}

.discover-cell--right-bottom {
  display: flex;
  justify-content: flex-end;
}

/* Top row: vertically align + establish stacking context above bottom row */
.discover-cell--left-top,
.discover-cell--mid-top,
.discover-cell--right-top {
  align-self: center;
  position: relative;
  z-index: 2;
}

/* Bottom row: lower stacking context so top row tooltips appear above */
.discover-cell--left-bottom,
.discover-cell--mid-bottom,
.discover-cell--right-bottom {
  position: relative;
  z-index: 1;
}

.discover-left-top-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

/* Desktop: keep search + quick icons on one line (prevents the “extra row” look) */
@media (min-width: 901px) {
  .discover-left-top-row {
    flex-wrap: nowrap;
  }

  .cook-filters-bar.discover-quick-filters {
    flex-wrap: nowrap;
  }
}

/* Discover: ensure the top row stays on one line at all desktop widths */
@media (min-width: 768px) {
  .discover-filters-desktop .discover-left-top-row {
    flex-wrap: nowrap;
  }

  .discover-filters-desktop .cook-filters-bar.discover-quick-filters {
    flex-wrap: nowrap;
  }
}

/* Discover top row overflow priorities:
   1) Drop servings icon
   2) Drop the 3 select pills (Cuisine/Occasion/Course)
   (If that still doesn't fit, the page should switch to mobile-style at the existing cutoff.)
*/
@media (max-width: 1112px) {
  .discover-filters-desktop #servingsToggleBtn,
  .plan-filters-grid #planServingsToggleBtn {
    display: none;
  }

  /* Surface/iPad-ish widths: let search pill shrink so row 1 fits */
  .discover-filters-desktop .discover-search-box {
    flex: 0 1 240px;
    min-width: 140px;
    max-width: 280px;
    padding: 0.25rem 0.7rem;
  }

  .discover-filters-desktop .discover-left-top-row {
    gap: 0.45rem;
  }

  .discover-filters-desktop .discover-pill-grid--top {
    gap: 6px;
    margin-left: 0;
  }
}

@media (max-width: 934px) {
  /* c935: drop cuisine / occasion / course only */
  .discover-filters-desktop .discover-pill-grid--top {
    display: none;
  }

  /*
   * Plan keeps the desktop filter shell below 934 (unlike Discover/Cook mobile bar).
   * Match mobile compact control sizing so the row does not clip at ~940px.
   */
  .page-main--filter:has(.page-rail-wrap--plan) .plan-filters-grid .cook-filter-btn {
    width: 32px;
    height: 32px;
    border-width: 2px;
  }

  .page-main--filter:has(.page-rail-wrap--plan) .plan-filters-grid .cook-filter-btn svg,
  .page-main--filter:has(.page-rail-wrap--plan) .plan-filters-grid #planMyPlanBtn svg {
    width: 18px;
    height: 18px;
  }

  .page-main--filter:has(.page-rail-wrap--plan) .plan-filters-grid .discover-quick-filters {
    gap: 0.25rem;
  }

  .page-main--filter:has(.page-rail-wrap--plan) .plan-filters-grid .discover-icon-btn {
    width: 28px;
    height: 28px;
    padding: 4px;
  }

  .page-main--filter:has(.page-rail-wrap--plan) .plan-right-controls {
    gap: 0.45rem;
  }
}

/* Bottom row: all 6 icon sections as flat siblings */
.discover-bottom-row {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.discover-bottom-section {
  flex: 0 0 auto;
}

/* Expanded meta sections (spicy/cost/difficulty/duration) visible by default */
.discover-bottom-meta-expanded {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Compact meta hidden by default on wide desktop.
   Must be more specific than .discover-icon-filter-group base rule. */
.discover-icon-filter-group.discover-meta-compact {
  display: none;
  margin-top: 0;
}

@media (max-width: 1200px) {
  /* Compact mode: hide expanded meta, show compact summary buttons */
  .discover-filters-desktop .discover-bottom-meta-expanded {
    display: none;
  }

  .discover-filters-desktop .discover-icon-filter-group.discover-meta-compact {
    display: flex;
  }
}

/* Compact meta: inline flex row — each button followed by its options.
   Must override .discover-icon-filter-group's flex-direction:column. */
.discover-icon-filter-group.discover-meta-compact {
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.4rem;
  align-items: center;
}

/* Expanded option rows sit inline after their button */
.discover-meta-compact > .discover-compact-options {
  gap: 4px;
  align-items: center;
}

/* Separator for expanded options: use a border so we don't add a new flex item
   (which interacts with flex gap and can increase the perceived spacing/jump). */
.discover-meta-compact > .discover-compact-options:not([hidden]) {
  border-left: 1.5px solid var(--brand-border);
  padding-left: 2px;
  margin-left: 2px;
}

.discover-quick-filters {
  flex: 0 0 auto;
  justify-content: flex-start;
}

/* Plan mode toggle (Browse Plans): match Discover myPlanBtn icon scale on desktop */
.plan-filters-grid #planMyPlanBtn svg {
  width: 24px;
  height: 24px;
}

.discover-filters-mobile #planMobileMyPlanBtn svg {
  width: 18px;
  height: 18px;
}

.discover-search-box {
  /* Don't let search grow and steal width from the middle column */
  flex: 0 1 320px;
  min-width: 200px;
  max-width: 360px;
  box-sizing: border-box;
  min-height: var(--discover-control-height);
  padding: 0.25rem 0.9rem;
}

/* Discover-specific: make search input match pill sizing */
.cook-search-box.discover-search-box input {
  font-size: 0.85rem;
}

/* .discover-cell--mid-top {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-start;
}*/

.discover-results-count {
  margin: 0;
  text-align: right;
}

/* Recipe count pill — shared across Discover/Cook filter bars (compact on all viewports) */
.recipe-count-pill,
.discover-results-count,
.mobile-results-indicator,
.plan-recipe-count,
#resultsCount.discover-results-count,
#mobileResultsCount.mobile-results-indicator {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: none;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--brand-text);
  padding: 0.4rem 0.6rem;
  background: var(--brand-bg-light);
  border-radius: 12px;
  white-space: nowrap;
  box-sizing: border-box;
}

/* Results count is now inside the filter grid; override the older #resultsCount styling */
#resultsCount.discover-results-count {
  color: var(--brand-text);
}

.discover-pill-grid.discover-pill-grid--top {
  display: grid;
  /* Modifier must win over .discover-pill-grid (which sets a stretching template) */
  grid-template-columns: repeat(4, max-content);
  gap: 8px;
  align-items: center;
  justify-content: start;
  margin-left: 0.25rem;
  flex: 0 1 auto;
  min-width: 0;
}

/* Plan mode swaps the recipe-only pills (Occasion/Course) for plan-only pills (Completeness). */
.discover-pill--plan-only { display: none; }
body.discover-plan-mode .discover-pill--recipe-only { display: none; }
body.discover-plan-mode .discover-pill--plan-only { display: block; }

.discover-pill-grid--bottom {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 8px;
}

.discover-filters-container {
  align-items: center;
  /* ~15% shorter than 40px */
  --discover-control-height: 34px;
}



.discover-nav-controls {
  margin-left: 0;
}

.discover-nav-controls {
  gap: 0.25rem;
  justify-content: flex-end;
  /* Prevent inheriting Cook page nav padding (keeps pager aligned with results count) */
  padding: 0;
  margin: 0;
  display: inline-flex;
  width: max-content;
}

/* Touch / compact shell: scroll all results; hide desktop pager (Plan uses plan-reel-touch-scroll). */
html.discover-touch-scroll .page-main--filter:has(.page-rail-wrap--discover) .discover-cell--right-top .discover-nav-controls {
  display: none !important;
}

.discover-nav-controls .cook-nav-btn {
  width: 24px;
  height: 24px;
}

.discover-nav-controls .cook-nav-btn svg {
  width: 13px;
  height: 13px;
}

.discover-nav-controls .cook-position {
  font-size: 0.78rem;
}

.discover-filters-row2 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem 0.6rem;
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.discover-icon-filters {
  flex: 2;
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  align-items: flex-start;
  min-width: 240px;
}

.discover-icon-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.discover-filter-error {
  margin: 0;
  color: #8b2f00;
  font-size: 0.9rem;
  font-weight: 600;
}

.discover-icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Author CSS sets `.discover-icon-row { display:flex; }`, which overrides the browser's
   default `[hidden]{display:none}`. Enforce hidden rows staying hidden. */
.discover-icon-row[hidden] {
  display: none !important;
}

.discover-icon-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.discover-icon-btn {
  --break-color: var(--brand-bg-white);  /* Background color creates visual "gap" in slash icons */
  width: 30px;
  height: 30px;
  padding: 5px;
  border-radius: 10px;
  border: 1.5px solid var(--brand-border);
  background: var(--brand-bg-white);
  color: var(--brand-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

/* Avoid sticky :hover on touch devices (Surface/iPad) by only enabling hover effects on fine pointers. */
@media (hover: hover) and (pointer: fine) {
  .discover-icon-btn:hover {
    border-color: var(--brand-text);
    transform: scale(1.05);
  }
}

.discover-icon-btn.is-active {
  --break-color: #fdf2eb;  /* Solid color matching computed active bg (rgba on white) */
  border-color: var(--brand-accent);
  background: rgba(232, 93, 4, 0.08);
}

.discover-icon-btn svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.discover-icon-btn.stroke-icon svg {
  fill: none;
  stroke: currentColor;
}

.discover-icon-btn .break-line {
  stroke: var(--break-color) !important;
  stroke-width: 2.5px !important;
}

/* Lifestyle (circle + color) vs Free-from (square) */
.discover-icon-filter-group.is-lifestyle .discover-icon-btn {
  border-radius: 50%;
}

.discover-icon-filter-group.is-lifestyle .discover-icon-btn svg {
  fill: currentColor;
}

.discover-icon-filter-group.is-lifestyle .discover-icon-btn svg.stroke-icon {
  fill: none;
  stroke: currentColor;
}

.discover-icon-btn.tone-green {
  color: #2e7d32;
}

.discover-icon-btn.tone-blue {
  color: #1565c0;
}

.discover-icon-btn.tone-avocado {
  color: #689f38;
}

.discover-icon-btn.tone-neutral {
  color: #8B4513;
}

/* Halal/Kosher icons are filled-path SVGs; render as stroke to match other lifestyle toggles */
/*.discover-icon-filter-group.is-lifestyle .discover-icon-btn[data-tag-slug="halal"] svg,
.discover-icon-filter-group.is-lifestyle .discover-icon-btn[data-tag-slug="kosher"] svg {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}*/

.discover-icon-filter-group.is-lifestyle .discover-icon-btn.is-active {
  border-color: var(--brand-accent);
  background: var(--brand-bg-light);
}

@media (hover: hover) and (pointer: fine) {
  .discover-icon-filter-group.is-lifestyle .discover-icon-btn:hover {
    border-color: var(--brand-accent);
    background: var(--brand-bg-light);
  }
}

.discover-icon-filter-group.is-freefrom .discover-icon-btn {
  border-radius: 12px;
}

.discover-icon-filter-group.is-freefrom .discover-icon-btn.is-active {
  --break-color: #fdf2eb;  /* Solid color matching computed active bg (rgba on white) */
  border-color: var(--brand-accent);
  background: rgba(232, 93, 4, 0.08);
}

.discover-pill-grid {
  flex: 1;
  min-width: 260px;
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 6px;
}

.discover-pill-select {
  width: 100%;
  box-sizing: border-box;
  height: var(--discover-control-height);
  padding: 0 0.5rem;
  border: 2px solid var(--brand-border);
  border-radius: 999px;
  background: var(--brand-bg-white);
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--brand-text);
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.discover-pill-select:hover {
  border-color: var(--brand-accent);
}

.discover-pill-select:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 2px 10px rgba(0,0,0,0.10);
}

@media (max-width: 900px) {
  .discover-filters-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "leftTop"
      "midTop"
      "rightTop"
      "leftBottom"
      "midBottom"
      "rightBottom";
  }

  .discover-results-count {
    text-align: left;
  }

  .discover-pill-grid--top {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
  .discover-pill-grid--bottom {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
  .discover-pill-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

@media (max-width: 520px) {
  .discover-pill-grid {
    grid-template-columns: 1fr;
  }
}

.cook-nav-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-left: auto;
}

.cook-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--brand-border);
  background: var(--brand-bg-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: var(--brand-text);
}

.cook-nav-btn:hover:not(:disabled) {
  border-color: var(--brand-accent);
  background: var(--brand-bg-light);
}

.cook-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cook-position {
  font-weight: 600;
  min-width: 60px;
  text-align: center;
  font-size: 0.9rem;
}

/* Recipe Container */
.cook-recipe-section {
  flex: 1;
  padding: 0 8px 40px;
}

.cook-recipe-container {
  max-width: 1200px;
  margin: 0 auto;
}

.cook-loading,
.cook-empty,
.cook-error {
  text-align: center;
  padding: 3rem;
  font-size: 1.1rem;
}

.cook-error {
  color: #D32F2F;
}

/* Hero Section */
.cook-hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  height: 500px;
}

.cook-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Header Section */
.cook-header {
  margin-bottom: 1.5rem;
}

.cook-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 1.8rem;
  color: var(--brand-text);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.cook-title-text {
  flex: 1 1 auto;
  min-width: 0;
}

.cook-cuisine-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-text);
}

.cook-description {
  font-size: 1.05rem;
  color: var(--brand-text-secondary);
  line-height: 1.6;
}

/* ========================================
   COOK PAGE: 4-Card Recipe Layout
   ======================================== */
.cook-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Row height = tallest card in that row; stretch siblings to match */
  grid-template-rows: auto auto;
  gap: 1.5rem;
  align-items: stretch;
}

/* --- Base card --- */
.cook-card {
  background: var(--brand-bg-white);
  border-radius: 12px;
  box-shadow: 0 4px 12px var(--brand-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* --- Card 1: Hero --- */
/* Like Discover .recipe-card: card shell visible so engagement tooltips are not clipped;
   hero image still clips via .cook-hero { overflow: hidden }. */
.cook-card.cook-card--hero {
  overflow: visible;
}

.cook-card--hero .cook-hero {
  flex: 1;
  position: relative;
  min-height: 250px;
  /* Pull actions row slightly closer to the image */
  margin-bottom: 0.25rem;
}

.cook-card--hero .cook-card-actions {
  position: relative;
  z-index: 2;
  overflow: visible;
}

/* Imported recipes: smaller hero since only a thumbnail is available */
.cook-card--hero.cook-card--imported .cook-hero {
  flex: 0 0 auto;
  height: 280px;
  min-height: 0;
  background: var(--brand-bg-light, #f5f5f5);
}

.cook-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 1rem;
}

.import-source-compact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-style: italic;
  color: var(--brand-text-muted, #888);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.import-source-compact .import-source-handle {
  font-weight: 600;
  font-style: normal;
}
.import-source-compact .import-source-icon {
  display: inline-flex;
  flex-shrink: 0;
}
.import-source-icon--instagram { color: #e4405f; }
.import-source-icon--tiktok { color: #010101; }
.import-source-icon--youtube { color: #ff0000; }
.import-source-icon--pinterest { color: #bd081c; }
.import-source-icon--facebook { color: #1877f2; }

.cook-card-creator {
  font-size: 0.85rem;
  color: var(--brand-text-secondary);
  font-style: italic;
  transition: opacity 0.15s ease;
}

/* Hide the "by Creator" line when the 5-star rating picker is open. The picker
 * expands the icon row and would otherwise push the creator name off the card
 * edge on narrow screens. :has() lets the parent know its child rating picker
 * is hovered/focused/open. */
.cook-card-actions:has(.recipe-rating--interactive:hover) .cook-card-creator,
.cook-card-actions:has(.recipe-rating--interactive:focus-within) .cook-card-creator,
.cook-card-actions:has(.recipe-rating--interactive.is-open) .cook-card-creator {
  opacity: 0;
  pointer-events: none;
}

/* --- Card 2: Info + Features --- */
/* Footer meta tooltips extend below the icon row (same pattern as Discover .recipe-card). */
.cook-card.cook-card--info {
  overflow: visible;
}

.cook-card--info .cook-card-body {
  flex: 1;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cook-card--info .cook-title {
  font-size: 1.4rem;
}

.cook-card--info .cook-description {
  font-size: 0.95rem;
  color: var(--brand-text-secondary);
  line-height: 1.6;
}

.cook-card-footer {
  margin-top: auto;
  border-top: 1px solid var(--brand-border);
  padding: 0.75rem 1rem;
  position: relative;
  z-index: 2;
  overflow: visible;
}

.cook-card--info #cookAttributesMount {
  overflow: visible;
}

/* --- Card 3: Ingredients --- */
.cook-card--ingredients .cook-card-body {
  padding: 1.25rem 1.5rem;
  flex: 1;
  overflow-y: auto;
}

.cook-card-heading {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--brand-text);
}

.cook-card--ingredients .cook-ingredients-list {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 1.5rem;
}

/* Reset old ingredient styling (border-left, background, border-radius, ::before) */
.cook-card--ingredients .cook-ingredient {
  display: block;
  padding: 0.45rem 0;
  border-bottom: 1px solid #f3f0ed;
  font-size: 0.92rem;
  color: var(--brand-text);
  line-height: 1.5;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  border-radius: 0;
  gap: 0;
  break-inside: avoid;
}

/* One inline slug: bold qty+uom stay together; name wraps on the same line flow */
.cook-card--ingredients .cook-ingredient-slug {
  display: inline;
}

.cook-card--ingredients .cook-ingredient-amount {
  font-weight: 700;
  color: inherit;
  display: inline;
  white-space: nowrap;
}

.cook-card--ingredients .cook-ingredient-name {
  display: inline;
}

.cook-card--ingredients .cook-ingredient::before {
  content: none;
}

.cook-card--ingredients .cook-ingredient:last-child {
  border-bottom: none;
}

.cook-card--ingredients .cook-ingredient--empty {
  color: var(--brand-text-secondary);
  font-style: italic;
}

/* Future slots: hidden when empty */
#cookEquipmentMount:empty,
#cookComponentsMount:empty {
  display: none;
}

/* --- Card 4: Steps (Discover-style photo carousel + synced step text) --- */
.cook-card--steps {
  min-height: 0;
}

/* Make the step carousel mount consume available vertical space so text/nav can sit at the bottom of the tile */
.cook-card--steps #cookStepCarousel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* When carousel has no photos (e.g. imported recipes), collapse it entirely */
.cook-card--steps #cookStepCarousel:empty,
.cook-card--steps #cookStepCarousel.carousel-hidden {
  flex: 0 0 0;
  display: none;
}

/* Step photo carousel: reuse Discover .photo-view but taller */
.cook-card--steps .photo-view {
  height: 320px;
  flex-shrink: 0;
}

/* When bottom step nav is hidden (carousel fully represents steps), anchor the step text at the bottom */
.cook-card--steps.cook-steps--navless .photo-view {
  height: auto;
  min-height: 360px;
  flex: 1 1 auto;
}

.cook-card--steps.cook-steps--navless #cookStepCarousel {
  flex: 1 1 auto;
  min-height: 0;
}

.cook-card--steps.cook-steps--navless .cook-step-text-area {
  flex: 0 0 auto;
  margin-top: auto;
  overflow: visible;
  min-height: 0;
}

/* Always show carousel arrows in Cook (not hover-only like Discover cards) */
.cook-card--steps .carousel-prev,
.cook-card--steps .carousel-next {
  opacity: 1;
}

/* Step text area below the carousel */
.cook-step-text-area {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 0 0 auto;
  overflow: visible;
}

.cook-step-text-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cook-step-text-number {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--brand-accent);
}

.cook-step-text-time {
  font-size: 0.85rem;
  color: var(--brand-text-secondary);
}

.cook-step-text-instruction {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--brand-text);
}

.cook-step-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--brand-border);
  margin-top: auto;
}

.cook-step-nav .cook-step-position {
  font-size: 0.85rem;
  color: var(--brand-text-secondary);
  min-width: 80px;
  text-align: center;
}

/* Steps fallback: text-only list when no navigation */
.cook-step-list-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid #f3f0ed;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.cook-step-list-item:last-child {
  border-bottom: none;
}

.cook-step-list-number {
  font-weight: 700;
  color: var(--brand-accent);
  flex-shrink: 0;
  min-width: 20px;
}

.cook-step-list-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--brand-text);
  flex: 1;
}

.cook-step-list-time {
  font-size: 0.8rem;
  color: var(--brand-text-secondary);
  flex-shrink: 0;
}

/* DEPRECATED — replaced by Section A/B layout */
/* Info Section - Similar to Discover Card */
.cook-info-section {
  background: var(--brand-bg-white);
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.cook-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.cook-info-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cook-info-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand-text);
  padding-bottom: 0;
  margin-bottom: 0.5rem;
}

.cook-info-icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: center;
  justify-items: center;
}

.cook-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px;
}

.cook-icon-item svg {
  width: 20px;
  height: 20px;
  color: rgba(106, 75, 58, 0.85);
}

.cook-icon-label {
  display: none;
}

.cook-icon-empty {
  color: var(--brand-text-secondary);
  font-size: 0.75rem;
  grid-column: span 3;
  text-align: center;
  padding: 0.5rem;
}

/* Nutrition box - similar to Discover card */
.cook-nutrition-group {
  background: var(--brand-bg-light);
  border-radius: 12px;
  padding: 0.75rem;
}

.cook-nutrition-group .cook-info-title {
  border-bottom: none;
  padding-bottom: 0.25rem;
}

.cook-nutrition-group .cook-info-icons {
  grid-template-columns: repeat(3, 1fr);
}

.cook-nutrition-group .cook-icon-item svg {
  color: var(--brand-accent);
}

/* Allergen styling */
.cook-icon-item.cook-allergen svg {
  color: #D32F2F;
}

/* Nutrition Box */
.cook-nutrition-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  background: var(--brand-bg-light);
  border-radius: 12px;
  padding: 0.75rem;
}

.cook-nutrition-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand-text);
}

.cook-nutrition-item svg {
  width: 16px;
  height: 16px;
  color: var(--brand-accent);
}

/* Spicy indicator */
.cook-spicy {
  display: flex;
  gap: 2px;
}

/* Section Styles */
.cook-section {
  margin-bottom: 2rem;
}

.cook-section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.4rem;
  color: var(--brand-text);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--brand-border);
}

.cook-section-title svg {
  color: var(--brand-accent);
}

/* Ingredients List */
.cook-ingredients-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.5rem;
}

.cook-ingredient {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--brand-bg-white);
  border-radius: 10px;
  font-size: 0.95rem;
  border-left: 3px solid var(--brand-accent);
}

.cook-ingredient::before {
  content: '•';
  color: var(--brand-accent);
  font-weight: bold;
}

/* Steps List */
.cook-steps-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cook-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.cook-step-number {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
}

.cook-step-content {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
}

/* Step image column */
.cook-step-image {
  width: 100px;
  flex-shrink: 0;
}

.cook-step-img {
  width: 100%;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
}

/* Step text column */
.cook-step-text-col {
  flex: 1;
  min-width: 200px;
}

.cook-step-text {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* Step duration column */
.cook-step-duration-col {
  flex-shrink: 0;
  align-self: flex-start;
}

.cook-step-duration {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--brand-text-secondary);
  background: var(--brand-bg-light);
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  white-space: nowrap;
}

.cook-step-duration svg {
  color: var(--brand-accent);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .card-meta-row:has(.recipe-rating--interactive:hover) .creator-signature,
  .card-meta-row:has(.recipe-rating--interactive:focus-within) .creator-signature,
  .card-meta-row:has(.recipe-rating--interactive.is-open) .creator-signature {
    opacity: 0;
    pointer-events: none;
  }

  .cook-card-creator {
    transition: none;
  }

  .cook-hero {
    height: 360px;
  }

  /* 4-Card: stack vertically on mobile */
  .cook-cards-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1rem;
  }

  .cook-card--hero .cook-hero {
    min-height: 220px;
  }

  .cook-card--hero.cook-card--imported .cook-hero {
    height: 220px;
    min-height: 0;
  }

  .cook-card--steps .photo-view {
    height: 240px;
  }

  .cook-card--steps.cook-steps--navless .photo-view {
    height: auto;
    min-height: 280px;
  }

  .cook-card--ingredients .cook-ingredients-list {
    columns: 1;
  }

  .cook-card--info .cook-card-body {
    padding: 1rem 1.25rem;
  }

  /* Mobile: match Discover title/description typography */
  .cook-card--info .cook-title {
    font-size: 1.15rem;
    line-height: 1.2;
    letter-spacing: 0.1px;
    margin-bottom: 0.5rem;
  }

  .cook-card--info .cook-description {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--brand-text-muted);
    max-width: 100%;
  }

  .cook-card--ingredients .cook-card-body {
    padding: 1rem 1.25rem;
  }

  .cook-title {
    font-size: 1.4rem;
  }

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

  .cook-nutrition-box {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Cook: two-row mobile layout is handled in the max-width: 934px cook rules (display:contents) */

/* Newsletter banner: single line on mobile (size only — sticky behavior
   is in the base rule and applies to all viewports) */
@media (max-width: 768px) {
  .announcement-banner {
    font-size: 0.8rem;
    gap: 8px;
    height: 40px;
    padding: 0 0.75rem;
    white-space: nowrap;
  }

  .announcement-banner p {
    white-space: nowrap;
  }

  .announcement-banner .banner-cta {
    padding: 4px 10px;
    font-size: 0.8rem;
    flex-shrink: 0;
  }
}

@media (max-width: 374px) {
  .announcement-banner {
    font-size: 0.72rem;
    gap: 6px;
    height: 36px;
    padding: 0 0.5rem;
  }

  .announcement-banner .banner-cta {
    padding: 3px 8px;
    font-size: 0.72rem;
  }
}

@media (max-width: 480px) {
  .cook-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 0.75rem;
  }

  .cook-info-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cook-info-icons {
    grid-template-columns: repeat(2, 1fr);
  }

  .cook-hero {
    height: 300px;
  }
}

/* ========================================
   Mobile Filter Bar (Discover)
   ======================================== */

/* Hide mobile on desktop, hide desktop on mobile */
.discover-filters-mobile {
  display: none;
}

@media (max-width: 934px) {
  .discover-filters-mobile {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }

  /* Legacy full-bleed hack — excluded once page uses .page-main--filter module contract. */
  main:has(.discover-filters-section):not(.page-main--filter) {
    padding: 20px 10px;
  }

  main:not(.page-main--filter) > .cook-filters-section.discover-filters-section {
    margin-top: -20px;
    margin-left: -10px;
    margin-right: -10px;
  }

  .discover-filters-desktop {
    display: none !important;
  }

  /* Cook: show row-2 (scaling + recipe pager) under mobile search; grid uses display:contents */
  .cook-page-filters .cook-filters-container--cook {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
  }

  .cook-page-filters .cook-filters-grid-panel.discover-filters-desktop {
    display: contents !important;
  }

  .cook-page-filters .cook-filters-container--cook .discover-cell--left-top,
  .cook-page-filters .cook-filters-container--cook .discover-cell--mid-top {
    display: none !important;
  }

  .cook-page-filters .cook-filters-container--cook .discover-cell--right-top {
    display: flex !important;
    width: 100%;
    min-width: 0;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    justify-self: stretch;
  }

  .cook-page-filters .cook-filters-container--cook .discover-cell--right-top .cook-scaling-wrapper {
    flex-shrink: 0;
  }
}

/* iPad portrait (and similar tablets): treat as mobile UI */
@media (any-pointer: coarse) and (orientation: portrait) and (min-width: 601px) and (max-width: 934px) {
  .discover-filters-mobile {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }

  main:has(.discover-filters-section):not(.page-main--filter) {
    padding: 20px 10px;
  }

  main:not(.page-main--filter) > .cook-filters-section.discover-filters-section {
    margin-top: -20px;
    margin-left: -10px;
    margin-right: -10px;
  }

  .discover-filters-desktop {
    display: none !important;
  }

  .cook-page-filters .cook-filters-container--cook {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
  }

  .cook-page-filters .cook-filters-grid-panel.discover-filters-desktop {
    display: contents !important;
  }

  .cook-page-filters .cook-filters-container--cook .discover-cell--left-top,
  .cook-page-filters .cook-filters-container--cook .discover-cell--mid-top {
    display: none !important;
  }

  .cook-page-filters .cook-filters-container--cook .discover-cell--right-top {
    display: flex !important;
    width: 100%;
    min-width: 0;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    justify-self: stretch;
  }

  .cook-page-filters .cook-filters-container--cook .discover-cell--right-top .cook-scaling-wrapper {
    flex-shrink: 0;
  }
}

/* Row 1: Search + Action Icons */
.mobile-filter-row-1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mobile-search-box {
  flex: 1;
  min-width: 0;
  max-width: none;
}

.mobile-action-icons {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.mobile-action-icons .cook-filter-btn {
  width: 32px;
  height: 32px;
  padding: 0;
}

.mobile-action-icons .cook-filter-btn svg {
  width: 18px;
  height: 18px;
}

/* Row 2: Filter Groups + Pagination */
.mobile-filter-row-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Plan (mobile): save on the left, week pager on the right (matches desktop mental model) */
@media (max-width: 767px) {
  .plan-mobile-row-2 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
  }
  .plan-mobile-row-2 .plan-mobile-save-btn {
    flex-shrink: 0;
  }
  .plan-mobile-row-2 .plan-mobile-week-tray {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
  }
  .plan-mobile-row-2 .plan-mobile-week-tray .cook-nav-controls {
    margin-left: 0;
  }
  .plan-mobile-row-2 .plan-mobile-name-bar {
    flex: 0 1 12.5rem;
    min-width: 0;
  }
}

.mobile-filter-left {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
}

.mobile-preferences-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 0;
  font-weight: 600;
  font-family: inherit;
  background: var(--brand-bg-white);
  border: 2px solid var(--brand-border);
  border-radius: 999px;
  color: var(--brand-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.mobile-preferences-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.mobile-preferences-btn:hover {
  border-color: var(--brand-accent);
}

.mobile-preferences-btn[aria-expanded="true"] {
  background: rgba(232, 93, 4, 0.08);
  border-color: var(--brand-accent);
  color: var(--brand-accent);
}

.mobile-selected-icons {
  flex: 1;
  min-width: 0;
}

/* (Arrow removed: group buttons are icon-only on mobile) */

/* Results count */
.mobile-results-count {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Expandable Panels */
.mobile-filter-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  animation: slideDown 0.2s ease;
}

.mobile-filter-panel[hidden] {
  display: none;
}

/* Discover mobile preferences popup: keep tooltip direction below icons, but
   raise hovered/focused hosts above sibling rows so bubbles are not obscured. */
.mobile-feature-section {
  position: relative;
  z-index: 1;
}

.mobile-feature-section .tooltip-parent {
  position: relative;
  z-index: 1;
}

.mobile-feature-section .tooltip-parent:hover,
.mobile-feature-section .tooltip-parent:focus-visible {
  z-index: 30;
}

.mobile-feature-section:has(.tooltip-parent:hover),
.mobile-feature-section:has(.tooltip-parent:focus-visible) {
  z-index: 40;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-panel-content {
  padding: 0;
}

/* Icon rows in panels */
.mobile-panel-icons,
.mobile-icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mobile-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 0.4rem;
  justify-items: center;
  width: 100%;
}

/* Feature sections in Features panel */
.mobile-feature-section {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--brand-border);
}

.mobile-feature-section:last-child {
  border-bottom: none;
}

.mobile-feature-label {
  flex: 0 0 60px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand-text);
  padding-top: 0.25rem;
}

/* Ensure icon containers can actually expand horizontally inside the flex row */
.mobile-feature-section > .mobile-icon-row,
.mobile-feature-section > .mobile-icon-grid {
  flex: 1;
  min-width: 0;
}

.mobile-panel-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.25rem;
}

.mobile-active-chips {
  display: flex;
  flex: 1;
  gap: 0.35rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mobile-active-chips::-webkit-scrollbar {
  display: none;
}

.mobile-active-chip {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(232, 93, 4, 0.1);
  border: 1px solid var(--brand-accent);
  border-radius: 16px;
  color: var(--brand-accent);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mobile-active-chip:hover {
  background: rgba(232, 93, 4, 0.2);
}

.mobile-active-chip .chip-remove {
  font-size: 0.9rem;
  line-height: 1;
  opacity: 0.7;
}

.mobile-active-chip:hover .chip-remove {
  opacity: 1;
}

.mobile-clear-all {
  flex-shrink: 0;
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  background: transparent;
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  color: var(--brand-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.mobile-clear-all:hover {
  border-color: var(--brand-text);
  color: var(--brand-text);
}

/* ─── Recipe Photo Placeholder (no hero image) ─── */

/* Plan grid slot placeholder */
.mealplan-slot-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 6px;
    text-align: center;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--brand-text-secondary);
    line-height: 1.2;
    overflow: hidden;
    word-break: break-word;
}

/* Plan strip card + Discover card placeholder */
.photo-view--placeholder {
    background: var(--brand-bg-warm);
}

.recipe-photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 16px;
    text-align: center;
    gap: 6px;
}

.recipe-photo-placeholder-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--brand-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.recipe-photo-placeholder-source {
    font-size: 0.72rem;
    color: var(--brand-text-muted);
    font-style: italic;
}

/* Cook page hero placeholder */
.cook-hero-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--brand-bg-warm);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    gap: 8px;
}

.cook-hero-placeholder-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--brand-text);
    line-height: 1.3;
}

.cook-hero-placeholder-source {
    font-size: 0.85rem;
    color: var(--brand-text-muted);
    font-style: italic;
}

.cook-share-btn .share-icon,
.cook-share-btn svg {
  width: 20px;
  height: 20px;
}

.card-action-btn.action-share svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
}

/* ─── Recipe share menu ─── */

.recipe-share-menu {
  background: var(--brand-bg-white, #fff);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  border: 1px solid var(--brand-border, #e8e8e8);
  padding: 8px;
  font-family: 'Quicksand', sans-serif;
}

.recipe-share-menu__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.recipe-share-menu__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  color: var(--brand-text, #333);
}

.recipe-share-menu__icon-btn:hover,
.recipe-share-menu__icon-btn:focus-visible {
  background: var(--brand-bg-light, #f5f5f5);
  outline: none;
}

.recipe-share-menu__icon-btn svg {
  display: block;
  width: 22px;
  height: 22px;
}

.card-action-btn.action-share.tooltip-parent,
.cook-share-btn.tooltip-parent {
  position: relative;
}

/* ─── Save List Picker Dropdown ─── */

.save-list-dropdown {
    background: var(--brand-bg-white);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
    border: 1px solid var(--brand-border);
    width: 240px;
    font-family: 'Quicksand', sans-serif;
    overflow: hidden;
}

.sld-header {
    padding: 10px 14px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--brand-text);
    border-bottom: 1px solid var(--brand-bg-light);
}

.sld-items {
    max-height: 220px;
    overflow-y: auto;
    padding: 4px 0;
}

.sld-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--brand-text);
    transition: background 0.1s;
}

.sld-item:hover {
    background: var(--brand-bg-warm);
}

.sld-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--brand-accent);
    flex-shrink: 0;
    cursor: pointer;
}

.sld-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sld-count {
    font-size: 0.75rem;
    color: var(--brand-text-muted);
    flex-shrink: 0;
}

.sld-create {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid var(--brand-bg-light);
}

.sld-new-input {
    flex: 1;
    padding: 6px 10px;
    border: 1.5px solid var(--brand-border);
    border-radius: 6px;
    font-family: 'Quicksand', sans-serif;
    font-size: 0.82rem;
}

.sld-new-input:focus {
    outline: none;
    border-color: var(--brand-accent);
}

.sld-new-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: var(--brand-accent);
    color: white;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sld-new-btn:hover {
    background: var(--brand-accent-hover);
}

.sld-loading, .sld-error, .sld-empty {
    padding: 16px 14px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--brand-text-muted);
}

.sld-error {
    color: #c62828;
}

.sld-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--brand-border);
    border-top-color: var(--brand-accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

/* ─── Shared Modal (moderation, violations, confirmations) ─── */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-overlay.active {
    display: flex;
}

.modal-container {
    background: var(--brand-bg-white);
    border-radius: 16px;
    max-width: 600px;
    width: 100%;
    max-height: 85vh;
    box-shadow: 0 20px 60px rgba(90, 117, 102, 0.15);
    border: 2px solid var(--brand-bg-light);
    display: flex;
    flex-direction: column;
    animation: modalPopUp 0.4s ease-out;
}

@keyframes modalPopUp {
    from { transform: scale(0.9) translateY(-20px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.modal-header {
    padding: 30px 35px 25px;
    border-bottom: 1px solid rgba(232, 245, 175, 0.5);
    position: relative;
    flex-shrink: 0;
    background: linear-gradient(to bottom, var(--brand-bg-white), rgba(232, 245, 175, 0.1));
    border-radius: 16px 16px 0 0;
}

.modal-header h3 {
    color: var(--brand-text);
    margin: 0;
    font-size: 1.4em;
    padding-right: 30px;
}

.modal-close {
    position: absolute;
    top: 25px;
    right: 25px;
    background: rgba(232, 245, 175, 0.3);
    border: none;
    font-size: 1.5em;
    color: var(--brand-text);
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    opacity: 1;
    background: var(--brand-bg-light);
    transform: rotate(90deg) scale(1.1);
}

.modal-body {
    padding: 25px 30px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    padding: 20px 30px;
    border-top: 2px solid var(--brand-bg-light);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-shrink: 0;
}

.modal-btn {
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Quicksand', sans-serif;
    font-size: 1em;
}

.modal-btn.cancel {
    background: var(--brand-bg-light);
    color: var(--brand-text);
    border: 2px solid transparent;
}

.modal-btn.cancel:hover {
    background: rgba(232, 245, 175, 0.7);
    border-color: var(--brand-primary);
}

.modal-btn.confirm {
    background: var(--brand-primary);
    color: white;
}

.modal-btn.confirm:hover {
    background: var(--brand-accent-hover);
    box-shadow: 0 4px 12px rgba(107, 155, 118, 0.3);
}

/* ─── Quick Edit Panel (Creator) ─── */

.quick-edit-panel {
    position: fixed;
    top: var(--nav-height);
    right: -100%;
    width: 100%;
    max-width: 600px;
    height: calc(100vh - var(--nav-height));
    background: var(--brand-bg-white);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    transition: right 0.3s ease-in-out;
    z-index: 10000;
    overflow-y: auto;
}

.quick-edit-panel.open {
    right: 0;
}

.quick-edit-panel .panel-overlay {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    height: calc(100% - var(--nav-height));
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    cursor: pointer;
}

.quick-edit-panel.open .panel-overlay {
    display: block;
}

.quick-edit-panel .panel-content {
    position: relative;
    padding: 1.5rem;
    z-index: 10001;
    background: var(--brand-bg-white);
}

.quick-edit-panel .panel-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 1.8rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--brand-text);
    z-index: 1600;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.quick-edit-panel .panel-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

.quick-edit-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 1.25rem 0;
    color: var(--brand-text);
}

/* Hero section in quick-edit */
.qe-section {
    margin-bottom: 1.5rem;
}

.qe-section-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.qe-hero-current {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    aspect-ratio: 16 / 10;
    background: var(--brand-bg-warm);
}

.qe-hero-current img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.qe-hero-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--brand-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.qe-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
}

.qe-photo-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s ease, transform 0.15s ease;
    background: var(--brand-bg-warm);
}

.qe-photo-thumb:hover {
    border-color: var(--brand-accent);
    transform: scale(1.03);
}

.qe-photo-thumb.active {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 2px var(--brand-accent);
}

.qe-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Add photo card in quick-edit grid */
.qe-add-photo {
    border: 2px dashed rgba(90, 117, 102, 0.35);
    background: rgba(232, 245, 175, 0.18);
    box-shadow: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qe-add-photo:hover {
    border-color: var(--brand-accent);
    background: rgba(232, 245, 175, 0.28);
    transform: scale(1.03);
}

.qe-add-photo-inner {
    text-align: center;
    color: var(--brand-text);
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
}

.qe-add-photo-plus {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin: 0 auto 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(90, 117, 102, 0.25);
    color: var(--brand-accent);
    font-size: 20px;
    line-height: 1;
}

.qe-photo-thumb .qe-hero-indicator {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: var(--brand-accent);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 4px;
}

/* Rotation controls */
.qe-rotation-controls {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
}

.qe-rotation-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--brand-border);
    border-radius: 6px;
    background: var(--brand-bg-white);
    cursor: pointer;
    color: var(--brand-text-secondary);
    font-size: 0.85rem;
    transition: all 0.15s ease;
}

.qe-rotation-btn:hover {
    border-color: var(--brand-accent);
    color: var(--brand-accent);
}

.qe-rotation-label {
    font-size: 0.75rem;
    color: var(--brand-text-muted);
}

/* Dietary tag toggles — reuses .discover-icon-btn / .discover-icon-row from filter bar */

.qe-tag-label {
    font-size: 0.65rem;
    color: var(--brand-text-muted);
    text-align: center;
    max-width: 42px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.discover-icon-btn.is-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.qe-tag-conflict-hint {
    font-size: 0.72rem;
    color: var(--brand-text-muted);
    margin-top: 6px;
    font-style: italic;
}

/* Stats row */
.qe-stats-row {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    background: var(--brand-bg-warm);
    border-radius: 10px;
}

.qe-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.qe-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-text);
}

.qe-stat-label {
    font-size: 0.7rem;
    color: var(--brand-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Removal options explainer */
.qe-removal-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qe-removal-option {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.8rem;
    color: var(--brand-text-secondary);
    line-height: 1.4;
}

.qe-removal-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.qe-removal-icon svg {
    width: 16px;
    height: 16px;
}

.qe-removal-icon--warn {
    font-size: 16px;
    color: #dc3545;
}

.qe-removal-option strong {
    color: var(--brand-text);
}

/* Deactivate section */
.qe-delete-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--brand-border);
}

.qe-delete-btn {
    width: 100%;
    padding: 10px 16px;
    border: 1.5px solid #dc3545;
    border-radius: 8px;
    background: transparent;
    color: #dc3545;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.qe-delete-btn:hover {
    background: #dc3545;
    color: #fff;
}

/* Delete confirmation */
.qe-delete-confirm {
    background: #fff5f5;
    border: 1px solid #dc3545;
    border-radius: 10px;
    padding: 16px;
    margin-top: 12px;
}

.qe-delete-confirm p {
    font-size: 0.85rem;
    color: var(--brand-text);
    margin: 0 0 12px 0;
}

.qe-delete-confirm-actions {
    display: flex;
    gap: 8px;
}

.qe-delete-confirm-yes {
    flex: 1;
    padding: 8px 16px;
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
}

.qe-delete-confirm-no {
    flex: 1;
    padding: 8px 16px;
    background: var(--brand-bg-warm);
    color: var(--brand-text);
    border: 1px solid var(--brand-border);
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.82rem;
    cursor: pointer;
}

/* Save indicator */
.qe-saving-indicator {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--brand-accent);
    margin-top: 8px;
}

.qe-saving-indicator.visible {
    display: flex;
}

.qe-saving-indicator .spinner-small {
    width: 14px;
    height: 14px;
    border: 2px solid var(--brand-border);
    border-top-color: var(--brand-accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Toast for quick-edit */
.qe-toast {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--brand-text);
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    z-index: 20000;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

.qe-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

@media (max-width: 768px) {
    .quick-edit-panel {
        max-width: 100%;
        top: 0;
        height: 100vh;
        height: 100dvh;
    }
    .quick-edit-panel .panel-overlay {
        top: 0;
        height: 100%;
    }
    .quick-edit-panel .panel-content {
        padding-bottom: 5rem;
    }
    .qe-photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    }
}

/* ============================================================
   Print styles — policy pages (ethics, privacy, terms, cookies,
   data-deletion). Hide all chrome; print the legal content only.
   ============================================================ */
@media print {
    /* Hide navigation, banner, footer, cookie consent, PWA prompts */
    .site-nav,
    .announcement-banner,
    .site-footer,
    #cookie-consent,
    #cookie-banner,
    .cookie-consent,
    #pwa-install-prompt,
    #subscribe-modal,
    .modal-overlay,
    .language-picker,
    #language-picker {
        display: none !important;
    }

    /* Remove main page margins/padding so content fills the page */
    body {
        margin: 0;
        padding: 0;
        background: #fff;
        color: #000;
        font-size: 11pt;
    }

    main {
        margin: 0;
        padding: 1cm;
    }

    /* Legal content: full width, no box shadow */
    .legal-content,
    .legal-policy {
        max-width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }

    /* Hide the Download PDF button itself when printing */
    #download-policy {
        display: none !important;
    }

    /* Ensure links are readable (show href) */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #444;
    }

    /* Except mailto and internal anchors */
    a[href^="mailto"]::after,
    a[href^="#"]::after {
        content: "";
    }
}