/**
 * EatMeals Component Library — "The Modern Larder"
 * ==================================================
 * 
 * Atomic design system components built on tokens.css.
 * 
 * Structure:
 * 1. Button System (2.1)
 * 2. Card System (2.2) — TBD
 * 3. Form Elements (2.3) — TBD
 * 4. Navigation Components (2.4) — TBD
 * 5. Feedback Components (2.5) — TBD
 * 
 * Usage:
 * - All components use design tokens from tokens.css
 * - Use Tailwind for layout (flex, grid, gap)
 * - Use these classes for visual styling
 * 
 * @requires tokens.css (must be loaded first)
 * @version 1.0.0
 * @date 2026-02-02
 */

/* ============================================
 * 1. BUTTON SYSTEM
 * ============================================
 * 
 * Naming Convention:
 * - .btn — Base styles (required)
 * - .btn-{variant} — Visual variant (primary, secondary, ghost, danger)
 * - .btn-{size} — Size modifier (sm, md, lg, xl)
 * - .btn-loading — Loading state (add dynamically with JS)
 * 
 * Example: <button class="btn btn-primary btn-lg">Get Started</button>
 */

/* -----------------------------------------
 * 1.1 Button Base Styles
 * ----------------------------------------- */

.btn {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  
  /* Default sizing (Medium) */
  height: var(--btn-height-md);
  padding-inline: var(--space-6);
  min-width: 120px;
  
  /* Typography */
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  
  /* Visual */
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  
  /* Transitions — Only transform and opacity for performance */
  transition: 
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-normal),
    transform var(--transition-fast);
  
  /* Positioning for pseudo-elements */
  position: relative;
  overflow: hidden;
  
  /* Reset */
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

/* Focus-visible ring (keyboard navigation) */
.btn:focus-visible {
  outline: none;
  box-shadow: 
    0 0 0 3px var(--color-surface-cream),
    0 0 0 5px var(--color-primary);
}

/* Remove tap highlight on mobile */
.btn {
  -webkit-tap-highlight-color: transparent;
}

/* -----------------------------------------
 * 1.2 Button Variants
 * ----------------------------------------- */

/* PRIMARY — Orange solid, main CTAs
 * Use sparingly: hero CTAs, add to cart, checkout
 * ------------------------------------------------ */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-surface-pure);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: var(--shadow-glow-sm);
  transform: translateY(-1px);
}

.btn-primary:active {
  background-color: var(--color-primary-active);
  border-color: var(--color-primary-active);
  box-shadow: none;
  transform: translateY(0);
}

/* SECONDARY — Outlined, supporting actions
 * Use for: secondary CTAs, filter buttons, less prominent actions
 * --------------------------------------------------------------- */
.btn-secondary {
  background-color: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.btn-secondary:hover {
  background-color: var(--color-surface-warm);
  border-color: var(--color-text-primary);
  transform: translateY(-1px);
}

.btn-secondary:active {
  background-color: var(--color-surface-muted);
  transform: translateY(0);
}

/* GHOST — Text only, minimal visual weight
 * Use for: tertiary actions, navigation, close buttons
 * ---------------------------------------------------- */
.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-text-secondary);
  min-width: auto;
  padding-inline: var(--space-4);
}

.btn-ghost:hover {
  background-color: var(--color-primary-dim);
  color: var(--color-primary);
}

.btn-ghost:active {
  background-color: var(--color-primary-subtle);
}

/* DANGER — Destructive actions
 * Use for: delete, cancel subscription, irreversible actions
 * ---------------------------------------------------------- */
.btn-danger {
  background-color: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-surface-pure);
}

.btn-danger:hover {
  background-color: #a32828;
  border-color: #a32828;
  box-shadow: 0 4px 12px rgba(197, 48, 48, 0.3);
  transform: translateY(-1px);
}

.btn-danger:active {
  background-color: #8a2222;
  border-color: #8a2222;
  box-shadow: none;
  transform: translateY(0);
}

/* DANGER OUTLINE — Less severe destructive actions */
.btn-danger-outline {
  background-color: transparent;
  border-color: var(--color-error);
  color: var(--color-error);
}

.btn-danger-outline:hover {
  background-color: var(--color-error-dim);
}

.btn-danger-outline:active {
  background-color: rgba(197, 48, 48, 0.2);
}

/* -----------------------------------------
 * 1.3 Button Sizes
 * ----------------------------------------- */

/* Small — 32px height
 * Use for: inline actions, table rows, tight spaces
 * ------------------------------------------------- */
.btn-sm {
  height: var(--btn-height-sm);
  padding-inline: var(--space-4);
  font-size: var(--text-xs);
  min-width: 80px;
  border-radius: var(--radius-sm);
}

/* Medium — 40px height (default, no class needed) */
.btn-md {
  height: var(--btn-height-md);
  padding-inline: var(--space-6);
  font-size: var(--text-sm);
  min-width: 120px;
}

/* Large — 48px height
 * Use for: prominent CTAs, form submit buttons
 * -------------------------------------------- */
.btn-lg {
  height: var(--btn-height-lg);
  padding-inline: var(--space-8);
  font-size: var(--text-base);
  min-width: 160px;
  border-radius: var(--radius-lg);
}

/* Extra Large — 56px height
 * Use for: hero CTAs only, maximum emphasis
 * ----------------------------------------- */
.btn-xl {
  height: var(--btn-height-xl);
  padding-inline: var(--space-10);
  font-size: var(--text-lg);
  min-width: 200px;
  border-radius: var(--radius-lg);
  letter-spacing: var(--tracking-wider);
}

/* -----------------------------------------
 * 1.4 Button States
 * ----------------------------------------- */

/* DISABLED — Reduced opacity, no interactions */
.btn:disabled,
.btn[disabled],
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

/* LOADING — Spinner + disabled state
 * Add .btn-loading and include spinner element
 * ------------------------------------------- */
.btn-loading {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}

/* Loading spinner */
.btn-loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  top: 50%;
  left: 50%;
  margin-top: -9px;
  margin-left: -9px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: btn-spin 0.6s linear infinite;
}

/* Spinner color based on variant */
.btn-primary.btn-loading::after,
.btn-danger.btn-loading::after {
  border-color: var(--color-surface-pure);
  border-top-color: transparent;
}

.btn-secondary.btn-loading::after,
.btn-ghost.btn-loading::after {
  border-color: var(--color-text-primary);
  border-top-color: transparent;
}

/* Size-adjusted spinners */
.btn-sm.btn-loading::after {
  width: 14px;
  height: 14px;
  margin-top: -7px;
  margin-left: -7px;
}

.btn-xl.btn-loading::after {
  width: 24px;
  height: 24px;
  margin-top: -12px;
  margin-left: -12px;
  border-width: 3px;
}

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

/* -----------------------------------------
 * 1.5 Button Icon Support
 * ----------------------------------------- */

/* Icon inside button */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-icon svg {
  width: 1.25em;
  height: 1.25em;
}

/* Icon-only button (square) */
.btn-icon-only {
  min-width: auto;
  padding: 0;
  aspect-ratio: 1;
}

.btn-icon-only.btn-sm {
  width: var(--btn-height-sm);
}

.btn-icon-only.btn-md,
.btn-icon-only:not(.btn-sm):not(.btn-lg):not(.btn-xl) {
  width: var(--btn-height-md);
}

.btn-icon-only.btn-lg {
  width: var(--btn-height-lg);
}

.btn-icon-only.btn-xl {
  width: var(--btn-height-xl);
}

/* -----------------------------------------
 * 1.6 Button Groups
 * ----------------------------------------- */

.btn-group {
  display: inline-flex;
}

.btn-group .btn {
  border-radius: 0;
}

.btn-group .btn:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.btn-group .btn:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.btn-group .btn:not(:first-child) {
  margin-left: -2px;
}

.btn-group .btn:hover,
.btn-group .btn:focus {
  z-index: 1;
}

/* -----------------------------------------
 * 1.7 Full-Width Button
 * ----------------------------------------- */

.btn-full {
  width: 100%;
  min-width: 100%;
}

/* -----------------------------------------
 * 1.8 Reduced Motion Support
 * ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
  
  .btn:hover {
    transform: none;
  }
  
  .btn-loading::after {
    animation: none;
    /* Show static indicator instead */
    border-color: currentColor;
    opacity: 0.5;
  }
}

/* -----------------------------------------
 * 1.9 High Contrast Support
 * ----------------------------------------- */

@media (prefers-contrast: high) {
  .btn {
    border-width: 3px;
  }
  
  .btn:focus-visible {
    outline: 3px solid;
    outline-offset: 2px;
  }
  
  .btn-ghost {
    border-color: currentColor;
  }
}

/* ============================================
 * 2. MAGNETIC BUTTON EFFECT
 * ============================================
 * 
 * Applied via JavaScript. CSS setup for the effect.
 * Add .btn-magnetic class to enable.
 * Requires: /frontend/js/interactions.js
 */

.btn-magnetic {
  /* Will be animated via JS transform */
  will-change: transform;
}

/* Magnetic glow effect on proximity */
.btn-magnetic::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    var(--color-primary-glow) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
  z-index: -1;
}

.btn-magnetic:hover::before {
  opacity: 1;
}

/* -----------------------------------------
 * 1.8 Touch Device Enhancements
 * ----------------------------------------- */

/* On touch devices, ensure buttons meet 44px minimum touch target */
@media (pointer: coarse) {
  .btn-sm {
    min-height: 44px;
    padding-block: var(--space-2);
  }
  
  .btn-md,
  .btn:not(.btn-sm):not(.btn-lg):not(.btn-xl) {
    min-height: 44px;
  }
  
  /* Icon-only buttons need 44x44 minimum */
  .btn-icon-only.btn-sm {
    min-width: 44px;
    min-height: 44px;
  }
  
  /* Form inputs also need 44px height on touch */
  .input,
  .select,
  .toggle,
  .checkbox,
  .radio {
    min-height: 44px;
  }
}

/* ============================================
 * END BUTTON SYSTEM
 * ============================================ */


/* ============================================
 * 2. CARD SYSTEM
 * ============================================
 * 
 * Naming Convention:
 * - .card — Base styles (required)
 * - .card-{variant} — Visual variant (elevated, glass, interactive)
 * - .card-meal — Specialized meal card with image and steam effect
 * 
 * Example: <div class="card card-elevated">Content</div>
 * Example: <article class="card card-meal">...</article>
 */

/* -----------------------------------------
 * 2.1 Base Card Styles
 * ----------------------------------------- */

.card {
  /* Layout */
  position: relative;
  display: flex;
  flex-direction: column;
  
  /* Visual */
  background-color: var(--color-surface-pure);
  border-radius: var(--card-radius);
  border: 1px solid var(--color-border);
  box-shadow: var(--card-shadow);
  
  /* Content */
  padding: var(--card-padding);
  
  /* Smooth transitions */
  transition: 
    box-shadow var(--transition-normal),
    transform var(--transition-normal),
    border-color var(--transition-fast);
  
  /* Prevent content overflow */
  overflow: hidden;
}

/* Card with no padding (for images that bleed to edge) */
.card-flush {
  padding: 0;
}

/* Card header section */
.card-header {
  padding: var(--space-4) var(--card-padding);
  border-bottom: 1px solid var(--color-border);
  margin: calc(var(--card-padding) * -1);
  margin-bottom: var(--card-padding);
}

.card-flush .card-header {
  margin: 0;
  margin-bottom: 0;
}

/* Card footer section */
.card-footer {
  padding: var(--space-4) var(--card-padding);
  border-top: 1px solid var(--color-border);
  margin: calc(var(--card-padding) * -1);
  margin-top: auto;
  padding-top: var(--card-padding);
}

.card-flush .card-footer {
  margin: 0;
  margin-top: auto;
}

/* Card body (for consistent spacing) */
.card-body {
  flex: 1;
}

/* -----------------------------------------
 * 2.2 Card Variants
 * ----------------------------------------- */

/* ELEVATED — Stronger shadow, slight lift
 * Use for: Featured content, highlighted items
 * ----------------------------------------- */
.card-elevated {
  box-shadow: var(--shadow-md);
  transform: translateY(0);
}

.card-elevated:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
}

/* GLASS — Glassmorphism (Apple Vision Pro style)
 * Use for: Overlays, floating UI, modern emphasis
 * ---------------------------------------------- */
.card-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* Glass on dark backgrounds */
.card-glass-dark {
  background: var(--glass-bg-dark);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--glass-shadow);
  color: var(--color-text-inverse);
}

/* INTERACTIVE — Hover state with orange accent line
 * Use for: Clickable cards, list items, selections
 * ------------------------------------------------ */
.card-interactive {
  cursor: pointer;
  border-left: 3px solid transparent;
  padding-left: calc(var(--card-padding) - 3px);
}

.card-interactive:hover {
  border-left-color: var(--color-primary);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
}

.card-interactive:active {
  transform: translateY(0);
  box-shadow: var(--card-shadow);
}

/* Interactive with full orange border on hover */
.card-interactive-border:hover {
  border-color: var(--color-primary);
}

/* SELECTABLE — For bundle builder selections
 * Use for: Meal selection, option cards
 * ----------------------------------------- */
.card-selectable {
  cursor: pointer;
  border: 2px solid var(--color-border);
}

.card-selectable:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.card-selectable.is-selected {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow-sm);
  background-color: var(--color-primary-subtle);
}

.card-selectable.is-selected::after {
  content: '';
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 24px;
  height: 24px;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
}

/* -----------------------------------------
 * 2.3 Meal Card Component
 * ----------------------------------------- */

/* Meal card container */
.card-meal {
  padding: 0;
  overflow: hidden;
}

/* Meal image container */
.card-meal-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-surface-warm);
}

.card-meal-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.card-meal:hover .card-meal-image img {
  transform: scale(1.05);
}

/* Steam effect container (hidden by default, shows on hover) */
.card-meal-steam {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.card-meal:hover .card-meal-steam {
  opacity: 1;
}

/* Heat shimmer overlay */
.card-meal-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 50%,
    transparent 100%
  );
  animation: shimmer 2s ease-in-out infinite;
  opacity: 0;
}

.card-meal:hover .card-meal-shimmer {
  opacity: 1;
}

@keyframes shimmer {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Individual steam wisps */
.steam-wisp {
  position: absolute;
  bottom: 20%;
  width: 8px;
  height: 40px;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: var(--radius-full);
  filter: blur(4px);
  opacity: 0;
  animation: steam-rise 2s ease-out infinite;
}

.card-meal:hover .steam-wisp {
  opacity: 1;
}

/* Position and animate each wisp differently */
.steam-wisp:nth-child(1) {
  left: 25%;
  animation-delay: 0s;
}

.steam-wisp:nth-child(2) {
  left: 40%;
  animation-delay: 0.3s;
  height: 50px;
}

.steam-wisp:nth-child(3) {
  left: 55%;
  animation-delay: 0.6s;
}

.steam-wisp:nth-child(4) {
  left: 70%;
  animation-delay: 0.9s;
  height: 35px;
}

@keyframes steam-rise {
  0% {
    transform: translateY(0) scaleX(1);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(-60px) scaleX(1.5);
    opacity: 0;
  }
}

/* Meal content area */
.card-meal-content {
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Meal title */
.card-meal-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin: 0;
}

/* Meal description */
.card-meal-description {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
  
  /* Clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meal price display */
.card-meal-price {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  margin: 0;
}

/* Price per serving (smaller) */
.card-meal-price-per {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-left: var(--space-1);
}

/* -----------------------------------------
 * 2.4 Macro Badges (Nutrition data)
 * ----------------------------------------- */

.card-meal-macros {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.macro-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-surface-warm);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.macro-badge-value {
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

/* Protein badge (highlighted) */
.macro-badge-protein {
  background-color: var(--color-sage-dim);
}

.macro-badge-protein .macro-badge-value {
  color: var(--color-sage);
}

/* Calories badge */
.macro-badge-calories {
  background-color: var(--color-primary-subtle);
}

.macro-badge-calories .macro-badge-value {
  color: var(--color-primary);
}

/* -----------------------------------------
 * 2.5 Card Action Area
 * ----------------------------------------- */

.card-meal-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.card-meal-actions .btn {
  flex: 1;
}

/* Quick add button (icon only, appears on hover) */
.card-meal-quick-add {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  opacity: 0;
  transform: scale(0.8);
  transition: 
    opacity var(--transition-fast),
    transform var(--transition-bounce);
}

.card-meal:hover .card-meal-quick-add {
  opacity: 1;
  transform: scale(1);
}

/* -----------------------------------------
 * 2.6 Card Badges & Labels
 * ----------------------------------------- */

.card-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border-radius: var(--radius-sm);
  z-index: 1;
}

.card-badge-new {
  background-color: var(--color-primary);
  color: var(--color-surface-pure);
}

.card-badge-popular {
  background-color: var(--color-surface-dark);
  color: var(--color-surface-cream);
}

.card-badge-sale {
  background-color: var(--color-error);
  color: var(--color-surface-pure);
}

.card-badge-out-of-stock {
  background-color: var(--color-surface-muted);
  color: var(--color-text-secondary);
}

/* Out of stock overlay */
.card-meal.is-out-of-stock .card-meal-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.6);
}

.card-meal.is-out-of-stock .card-meal-content {
  opacity: 0.6;
}

/* -----------------------------------------
 * 2.7 Card Hover Lift Effect
 * ----------------------------------------- */

/* Apply to any card that should lift on hover */
.card-hover-lift:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-4px);
}

/* -----------------------------------------
 * 2.8 Card Grid Utilities
 * ----------------------------------------- */

/* Card grid container */
.card-grid {
  display: grid;
  gap: var(--space-6);
}

/* Responsive columns using CSS Grid */
@media (min-width: 640px) {
  .card-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .card-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .card-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* -----------------------------------------
 * 2.9 Reduced Motion Support
 * ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .card,
  .card-elevated,
  .card-interactive,
  .card-selectable,
  .card-meal-image img {
    transition: none;
  }
  
  .card-elevated:hover,
  .card-interactive:hover,
  .card-hover-lift:hover {
    transform: none;
  }
  
  .card-meal:hover .card-meal-image img {
    transform: none;
  }
  
  /* Disable steam animation */
  .steam-wisp,
  .card-meal-shimmer {
    animation: none;
    opacity: 0 !important;
  }
  
  /* Still show quick-add button */
  .card-meal-quick-add {
    opacity: 1;
    transform: scale(1);
  }
}

/* -----------------------------------------
 * 2.10 High Contrast Support
 * ----------------------------------------- */

@media (prefers-contrast: high) {
  .card {
    border-width: 2px;
    border-color: var(--color-text-primary);
  }
  
  .card-glass,
  .card-glass-dark {
    background: var(--color-surface-pure);
    backdrop-filter: none;
  }
  
  .card-selectable.is-selected {
    border-width: 3px;
  }
}

/* ============================================
 * END CARD SYSTEM
 * ============================================ */


/* ============================================
 * 3. FORM ELEMENTS
 * ============================================
 * 
 * Naming Convention:
 * - .form-* — Form layout utilities
 * - .input — Text inputs
 * - .textarea — Text areas
 * - .select — Custom select dropdown
 * - .checkbox — Custom checkbox
 * - .radio — Custom radio button
 * - .toggle — Toggle switch
 * 
 * States:
 * - :focus, .is-focused — Focus state (orange glow)
 * - .is-error, .has-error — Error state (red)
 * - .is-success — Success state (green)
 * - :disabled, .is-disabled — Disabled state
 * 
 * Example: <input type="text" class="input" placeholder="Your email">
 */

/* -----------------------------------------
 * 3.1 Form Layout Utilities
 * ----------------------------------------- */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-row {
  display: flex;
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .form-row {
    flex-direction: column;
  }
}

.form-row > * {
  flex: 1;
}

/* Form labels */
.form-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
}

.form-label-required::after {
  content: ' *';
  color: var(--color-error);
}

/* Helper text below inputs */
.form-helper {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  line-height: var(--leading-relaxed);
}

/* Error message below inputs */
.form-error {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-error);
  line-height: var(--leading-relaxed);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.form-error::before {
  content: '';
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c53030'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
  background-size: contain;
  flex-shrink: 0;
}

/* Success message below inputs */
.form-success {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-success);
  line-height: var(--leading-relaxed);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.form-success::before {
  content: '';
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232d5a3d'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
  background-size: contain;
  flex-shrink: 0;
}

/* -----------------------------------------
 * 3.2 Text Input
 * ----------------------------------------- */

.input {
  /* Layout */
  display: block;
  width: 100%;
  height: var(--input-height);
  padding: 0 var(--space-4);
  
  /* Typography */
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
  
  /* Visual */
  background-color: var(--color-surface-pure);
  border: var(--input-border-width) solid var(--color-border);
  border-radius: var(--input-radius);
  
  /* Transitions */
  transition: 
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
  
  /* Reset */
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

/* Placeholder */
.input::placeholder {
  color: var(--color-text-tertiary);
  opacity: 1;
}

/* Hover state */
.input:hover:not(:focus):not(:disabled):not(.is-error) {
  border-color: var(--color-border-strong);
}

/* Focus state — Orange glow */
.input:focus,
.input.is-focused {
  border-color: var(--color-primary);
  box-shadow: var(--input-focus-ring);
  background-color: var(--color-surface-pure);
}

/* Error state */
.input.is-error,
.input.has-error,
.form-group.has-error .input {
  border-color: var(--color-error);
  background-color: var(--color-error-dim);
}

.input.is-error:focus,
.input.has-error:focus,
.form-group.has-error .input:focus {
  box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.15);
}

/* Success state */
.input.is-success,
.form-group.is-success .input {
  border-color: var(--color-success);
  background-color: var(--color-success-dim);
}

.input.is-success:focus,
.form-group.is-success .input:focus {
  box-shadow: 0 0 0 3px rgba(45, 90, 61, 0.15);
}

/* Disabled state */
.input:disabled,
.input.is-disabled {
  background-color: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-text-tertiary);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Input with icon (left) */
.input-with-icon {
  position: relative;
}

.input-with-icon .input {
  padding-left: calc(var(--space-4) + 20px + var(--space-2));
}

.input-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--color-text-tertiary);
  pointer-events: none;
}

.input-with-icon .input:focus + .input-icon,
.input-with-icon .input:focus ~ .input-icon {
  color: var(--color-primary);
}

/* Input with icon (right) — for validation icons */
.input-with-icon-right .input {
  padding-right: calc(var(--space-4) + 20px + var(--space-2));
}

.input-icon-right {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  pointer-events: none;
}

/* -----------------------------------------
 * 3.3 Textarea
 * ----------------------------------------- */

.textarea {
  /* Layout */
  display: block;
  width: 100%;
  min-height: 120px;
  padding: var(--space-3) var(--space-4);
  resize: vertical;
  
  /* Typography */
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  line-height: var(--leading-relaxed);
  
  /* Visual */
  background-color: var(--color-surface-pure);
  border: var(--input-border-width) solid var(--color-border);
  border-radius: var(--input-radius);
  
  /* Transitions */
  transition: 
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
  
  /* Reset */
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.textarea::placeholder {
  color: var(--color-text-tertiary);
  opacity: 1;
}

.textarea:hover:not(:focus):not(:disabled):not(.is-error) {
  border-color: var(--color-border-strong);
}

.textarea:focus {
  border-color: var(--color-primary);
  box-shadow: var(--input-focus-ring);
}

.textarea.is-error {
  border-color: var(--color-error);
  background-color: var(--color-error-dim);
}

.textarea.is-success {
  border-color: var(--color-success);
  background-color: var(--color-success-dim);
}

.textarea:disabled {
  background-color: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-text-tertiary);
  cursor: not-allowed;
  opacity: 0.7;
  resize: none;
}

/* Character counter */
.textarea-counter {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  text-align: right;
  margin-top: var(--space-1);
}

.textarea-counter.is-near-limit {
  color: var(--color-warning);
}

.textarea-counter.is-over-limit {
  color: var(--color-error);
}

/* -----------------------------------------
 * 3.4 Custom Select
 * ----------------------------------------- */

.select-wrapper {
  position: relative;
  display: block;
  width: 100%;
}

.select {
  /* Layout */
  display: block;
  width: 100%;
  height: var(--input-height);
  padding: 0 calc(var(--space-4) + 24px) 0 var(--space-4);
  
  /* Typography */
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
  
  /* Visual */
  background-color: var(--color-surface-pure);
  border: var(--input-border-width) solid var(--color-border);
  border-radius: var(--input-radius);
  cursor: pointer;
  
  /* Transitions */
  transition: 
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  
  /* Reset */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
}

/* Custom dropdown arrow */
.select-wrapper::after {
  content: '';
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236a6158'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-size: contain;
  pointer-events: none;
  transition: transform var(--transition-fast);
}

.select-wrapper:focus-within::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Placeholder option */
.select option[value=""] {
  color: var(--color-text-tertiary);
}

.select:hover:not(:focus):not(:disabled) {
  border-color: var(--color-border-strong);
}

.select:focus {
  border-color: var(--color-primary);
  box-shadow: var(--input-focus-ring);
}

.select.is-error {
  border-color: var(--color-error);
}

.select:disabled {
  background-color: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-text-tertiary);
  cursor: not-allowed;
  opacity: 0.7;
}

/* -----------------------------------------
 * 3.5 Custom Checkbox
 * ----------------------------------------- */

.checkbox {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
}

.checkbox input[type="checkbox"] {
  /* Hide native checkbox but keep accessible */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox-box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px; /* Align with text baseline */
  background-color: var(--color-surface-pure);
  border: var(--input-border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  position: relative;
  transition: 
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* Checkmark */
.checkbox-box::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--transition-bounce);
}

/* Hover */
.checkbox:hover .checkbox-box {
  border-color: var(--color-border-strong);
}

/* Focus */
.checkbox input:focus-visible + .checkbox-box {
  border-color: var(--color-primary);
  box-shadow: var(--input-focus-ring);
}

/* Checked state */
.checkbox input:checked + .checkbox-box {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.checkbox input:checked + .checkbox-box::after {
  transform: translate(-50%, -50%) scale(1);
}

/* Checked hover */
.checkbox:hover input:checked + .checkbox-box {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* Disabled */
.checkbox input:disabled + .checkbox-box {
  background-color: var(--color-surface-muted);
  border-color: var(--color-border);
  cursor: not-allowed;
  opacity: 0.6;
}

.checkbox input:disabled ~ .checkbox-label {
  color: var(--color-text-tertiary);
  cursor: not-allowed;
}

/* Checkbox label */
.checkbox-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: var(--leading-relaxed);
}

/* Error state */
.checkbox.is-error .checkbox-box {
  border-color: var(--color-error);
}

/* -----------------------------------------
 * 3.6 Custom Radio Button
 * ----------------------------------------- */

.radio {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
}

.radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-circle {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  background-color: var(--color-surface-pure);
  border: var(--input-border-width) solid var(--color-border);
  border-radius: var(--radius-full);
  position: relative;
  transition: 
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* Inner dot */
.radio-circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: var(--color-surface-pure);
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--transition-bounce);
}

/* Hover */
.radio:hover .radio-circle {
  border-color: var(--color-border-strong);
}

/* Focus */
.radio input:focus-visible + .radio-circle {
  border-color: var(--color-primary);
  box-shadow: var(--input-focus-ring);
}

/* Checked state */
.radio input:checked + .radio-circle {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.radio input:checked + .radio-circle::after {
  transform: translate(-50%, -50%) scale(1);
}

/* Checked hover */
.radio:hover input:checked + .radio-circle {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* Disabled */
.radio input:disabled + .radio-circle {
  background-color: var(--color-surface-muted);
  border-color: var(--color-border);
  cursor: not-allowed;
  opacity: 0.6;
}

.radio input:disabled ~ .radio-label {
  color: var(--color-text-tertiary);
  cursor: not-allowed;
}

/* Radio label */
.radio-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: var(--leading-relaxed);
}

/* Radio group */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.radio-group-inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-6);
}

/* -----------------------------------------
 * 3.7 Toggle Switch
 * ----------------------------------------- */

.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
}

.toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-track {
  position: relative;
  width: 48px;
  height: 26px;
  background-color: var(--color-surface-muted);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-fast);
}

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background-color: var(--color-surface-pure);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-bounce);
}

/* Hover */
.toggle:hover .toggle-track {
  background-color: var(--color-border-strong);
}

/* Focus */
.toggle input:focus-visible + .toggle-track {
  box-shadow: var(--input-focus-ring);
}

/* Checked state */
.toggle input:checked + .toggle-track {
  background-color: var(--color-primary);
}

.toggle input:checked + .toggle-track .toggle-thumb {
  transform: translateX(22px);
}

/* Checked hover */
.toggle:hover input:checked + .toggle-track {
  background-color: var(--color-primary-hover);
}

/* Disabled */
.toggle input:disabled + .toggle-track {
  background-color: var(--color-surface-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

.toggle input:disabled ~ .toggle-label {
  color: var(--color-text-tertiary);
  cursor: not-allowed;
}

/* Toggle label */
.toggle-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
}

/* Toggle with labels on both sides */
.toggle-with-labels {
  gap: var(--space-2);
}

.toggle-label-off,
.toggle-label-on {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  transition: color var(--transition-fast);
}

.toggle input:not(:checked) ~ .toggle-label-off {
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}

.toggle input:checked ~ .toggle-label-on {
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}

/* -----------------------------------------
 * 3.8 Input Sizes
 * ----------------------------------------- */

.input-sm,
.select-wrapper .select-sm {
  height: 36px;
  font-size: var(--text-sm);
  padding: 0 var(--space-3);
}

.input-lg,
.select-wrapper .select-lg {
  height: 52px;
  font-size: var(--text-lg);
  padding: 0 var(--space-5);
}

/* -----------------------------------------
 * 3.9 Reduced Motion Support
 * ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .input,
  .textarea,
  .select,
  .checkbox-box,
  .checkbox-box::after,
  .radio-circle,
  .radio-circle::after,
  .toggle-track,
  .toggle-thumb {
    transition: none;
  }
}

/* -----------------------------------------
 * 3.10 High Contrast Support
 * ----------------------------------------- */

@media (prefers-contrast: high) {
  .input,
  .textarea,
  .select {
    border-width: 2px;
  }
  
  .input:focus,
  .textarea:focus,
  .select:focus {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: none;
  }
  
  .checkbox-box,
  .radio-circle {
    border-width: 2px;
  }
}

/* ============================================
 * END FORM ELEMENTS
 * ============================================ */


/* ============================================
 * 4. NAVIGATION COMPONENTS
 * ============================================
 * 
 * Header, mobile menu, footer, and navigation utilities.
 * 
 * Naming Convention:
 * - .site-header — Main header wrapper
 * - .nav-* — Navigation-related components
 * - .site-footer — Footer wrapper
 * 
 * Dependencies:
 * - Uses tokens.css variables
 * - Pairs with interactions.js for scroll effects
 * 
 * @section 2.4
 */

/* -----------------------------------------
 * 4.1 Header / Navbar
 * ----------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  
  /* Glass effect base */
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  /* Border */
  border-bottom: 1px solid var(--color-border);
  
  /* Transition for scroll effects */
  transition: 
    box-shadow var(--transition-normal),
    background-color var(--transition-normal);
}

/* Scrolled state — adds shadow */
.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
  background-color: rgba(255, 255, 255, 0.98);
}

/* Header container — centers content and provides flex layout */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-5);
  height: var(--header-height, 72px);
}

/* Reduce height on smaller screens */
@media (max-width: 767px) {
  .header-inner {
    height: var(--header-height-mobile, 64px);
    padding: var(--space-3) var(--space-4);
  }
}

/* -----------------------------------------
 * 4.2 Logo
 * ----------------------------------------- */

.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  z-index: var(--z-dropdown);
}

.site-logo img {
  height: 32px;
  width: auto;
  display: block;
  transition: transform var(--transition-fast);
}

.site-logo:hover img {
  transform: scale(1.02);
}

@media (min-width: 768px) {
  .site-logo img {
    height: 36px;
  }
}

/* -----------------------------------------
 * 4.3 Desktop Navigation
 * ----------------------------------------- */

.nav-desktop {
  display: none;
  align-items: center;
  gap: var(--space-1);
}

@media (min-width: 992px) {
  .nav-desktop {
    display: flex;
  }
}

/* Nav link base */
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
  
  transition: color var(--transition-fast);
}

.nav-link:hover,
.nav-link:focus {
  color: var(--color-primary);
}

/* Underline slide-in animation */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--space-4);
  right: var(--space-4);
  height: 2px;
  
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-normal) var(--ease-out);
}

.nav-link:hover::after,
.nav-link:focus::after,
.nav-link.is-active::after {
  transform: scaleX(1);
}

/* Secondary style (muted) */
.nav-link-secondary {
  color: var(--color-text-secondary);
  font-weight: var(--weight-regular);
}

.nav-link-secondary:hover,
.nav-link-secondary:focus {
  color: var(--color-primary);
}

/* CTA button in nav — override button margin */
.nav-cta {
  margin-left: var(--space-3);
}

/* -----------------------------------------
 * 4.4 Cart Badge
 * ----------------------------------------- */

.nav-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  
  color: var(--color-text-primary);
  transition: color var(--transition-fast);
}

.nav-cart:hover {
  color: var(--color-primary);
}

.nav-cart-icon {
  width: 24px;
  height: 24px;
}

.cart-badge {
  position: absolute;
  top: 0;
  right: 0;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-bold);
  line-height: 1;
  
  transform: translate(25%, -25%);
  transition: transform var(--transition-fast);
}

/* Animate badge on item add */
.cart-badge.is-updating {
  animation: badge-bounce 0.4s var(--ease-bounce);
}

@keyframes badge-bounce {
  0%, 100% { transform: translate(25%, -25%) scale(1); }
  50% { transform: translate(25%, -25%) scale(1.3); }
}

/* Empty state — hide badge */
.cart-badge:empty,
.cart-badge[data-count="0"] {
  display: none;
}

/* -----------------------------------------
 * 4.5 Mobile Hamburger Menu
 * ----------------------------------------- */

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 44px;
  height: 44px;
  padding: var(--space-2);
  
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: var(--z-dropdown);
  
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 992px) {
  .nav-toggle {
    display: none;
  }
}

/* Hamburger icon container */
.nav-toggle-icon {
  position: relative;
  width: 24px;
  height: 18px;
}

/* Hamburger lines */
.nav-toggle-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  
  background-color: var(--color-text-primary);
  border-radius: var(--radius-full);
  
  transition: 
    transform var(--transition-normal) var(--ease-out),
    opacity var(--transition-fast);
}

.nav-toggle-icon span:nth-child(1) { top: 0; }
.nav-toggle-icon span:nth-child(2) { top: 8px; }
.nav-toggle-icon span:nth-child(3) { top: 16px; }

/* Active state — X icon */
.nav-toggle.is-active .nav-toggle-icon span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle.is-active .nav-toggle-icon span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-toggle.is-active .nav-toggle-icon span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Focus state */
.nav-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* -----------------------------------------
 * 4.6 Mobile Slide-in Drawer
 * ----------------------------------------- */

.nav-mobile {
  position: fixed;
  top: var(--header-height-mobile, 64px);
  right: 0;
  bottom: 0;
  
  width: min(320px, 85vw);
  
  background-color: var(--color-surface-pure);
  box-shadow: var(--shadow-2xl);
  
  /* Hidden by default */
  transform: translateX(100%);
  visibility: hidden;
  
  transition: 
    transform var(--transition-normal) var(--ease-out),
    visibility var(--transition-normal);
  
  z-index: var(--z-modal);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Active state */
.nav-mobile.is-active {
  transform: translateX(0);
  visibility: visible;
}

/* Backdrop */
.nav-mobile-backdrop {
  position: fixed;
  inset: 0;
  
  background-color: rgba(26, 22, 18, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  
  opacity: 0;
  visibility: hidden;
  
  transition: 
    opacity var(--transition-normal),
    visibility var(--transition-normal);
  
  z-index: calc(var(--z-modal) - 1);
}

.nav-mobile-backdrop.is-active {
  opacity: 1;
  visibility: visible;
}

/* Mobile nav content */
.nav-mobile-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
}

/* Mobile nav links */
.nav-mobile-link {
  display: flex;
  align-items: center;
  padding: var(--space-4);
  
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  text-decoration: none;
  
  border-radius: var(--radius-md);
  transition: 
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.nav-mobile-link:hover,
.nav-mobile-link:focus {
  background-color: var(--color-surface-warm);
  color: var(--color-primary);
}

.nav-mobile-link.is-active {
  color: var(--color-primary);
  background-color: var(--color-primary-dim);
}

/* Staggered entrance animation */
.nav-mobile.is-active .nav-mobile-link {
  animation: nav-link-slide 0.3s var(--ease-out) backwards;
}

.nav-mobile.is-active .nav-mobile-link:nth-child(1) { animation-delay: 0.05s; }
.nav-mobile.is-active .nav-mobile-link:nth-child(2) { animation-delay: 0.1s; }
.nav-mobile.is-active .nav-mobile-link:nth-child(3) { animation-delay: 0.15s; }
.nav-mobile.is-active .nav-mobile-link:nth-child(4) { animation-delay: 0.2s; }
.nav-mobile.is-active .nav-mobile-link:nth-child(5) { animation-delay: 0.25s; }
.nav-mobile.is-active .nav-mobile-link:nth-child(6) { animation-delay: 0.3s; }

@keyframes nav-link-slide {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Mobile nav CTA button */
.nav-mobile-cta {
  margin-top: var(--space-4);
}

/* Mobile nav divider */
.nav-mobile-divider {
  height: 1px;
  background-color: var(--color-border);
  margin: var(--space-4) 0;
}

/* Lock body scroll when mobile nav is open */
body.nav-open {
  overflow: hidden;
}

@media (min-width: 992px) {
  body.nav-open {
    overflow: auto;
  }
}

/* -----------------------------------------
 * 4.7 Header Scroll Behavior
 * ----------------------------------------- */

/* 
 * Note: The .is-scrolled class is added via JavaScript.
 * See interactions.js for implementation.
 * 
 * CSS handles the visual transition:
 */

/* Compact header on scroll (optional) */
.site-header.is-compact .header-inner {
  height: calc(var(--header-height, 72px) - 8px);
}

.site-header.is-compact .site-logo img {
  height: 28px;
}

/* Hide header on scroll down, show on scroll up (optional class) */
.site-header.is-hidden {
  transform: translateY(-100%);
}

.site-header {
  transition: 
    box-shadow var(--transition-normal),
    background-color var(--transition-normal),
    transform var(--transition-normal);
}

/* -----------------------------------------
 * 4.8 Footer
 * ----------------------------------------- */

.site-footer {
  background-color: var(--color-surface-dark);
  color: var(--color-text-inverse);
  padding: var(--space-16) 0 var(--space-8);
}

.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

/* Footer grid */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 2fr repeat(3, 1fr);
  }
}

/* Footer column */
.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Footer brand section */
.footer-brand {
  max-width: 280px;
}

.footer-brand .site-logo img {
  height: 32px;
  filter: brightness(0) invert(1); /* Make logo white */
}

.footer-brand-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* Footer headings */
.footer-heading {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-inverse);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-2);
}

/* Footer links */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-link:hover,
.footer-link:focus {
  color: var(--color-primary);
}

/* Social links */
.footer-social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 40px;
  height: 40px;
  
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  color: var(--color-text-inverse);
  
  transition: 
    background-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.footer-social-link:hover {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  transform: translateY(-2px);
}

.footer-social-link svg,
.footer-social-link i {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

/* Footer bottom bar */
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  
  padding-top: var(--space-8);
  margin-top: var(--space-10);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.footer-legal-links {
  display: flex;
  gap: var(--space-4);
}

.footer-legal-link {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-legal-link:hover {
  color: var(--color-text-inverse);
}

/* Newsletter in footer */
.footer-newsletter {
  margin-top: var(--space-4);
}

.footer-newsletter-form {
  display: flex;
  gap: var(--space-2);
}

.footer-newsletter-input {
  flex: 1;
  height: 44px;
  padding: 0 var(--space-4);
  
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-inverse);
  
  transition: 
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.footer-newsletter-input::placeholder {
  color: var(--color-text-muted);
}

.footer-newsletter-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background-color: rgba(255, 255, 255, 0.15);
}

/* -----------------------------------------
 * 4.9 Breadcrumb Navigation
 * ----------------------------------------- */

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  
  padding: var(--space-3) 0;
  list-style: none;
  margin: 0;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.breadcrumb-item::before {
  content: '/';
  color: var(--color-text-tertiary);
}

.breadcrumb-item:first-child::before {
  display: none;
}

.breadcrumb-link {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb-link:hover {
  color: var(--color-primary);
}

.breadcrumb-item.is-current {
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}

/* -----------------------------------------
 * 4.10 Reduced Motion Support
 * ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .nav-link::after,
  .nav-toggle-icon span,
  .nav-mobile,
  .nav-mobile-backdrop,
  .nav-mobile-link,
  .cart-badge {
    transition: none;
    animation: none;
  }
  
  .nav-mobile.is-active .nav-mobile-link {
    animation: none;
  }
}

/* -----------------------------------------
 * 4.11 High Contrast Support
 * ----------------------------------------- */

@media (prefers-contrast: high) {
  .site-header {
    border-bottom-width: 2px;
  }
  
  .nav-link::after {
    height: 3px;
  }
  
  .nav-toggle:focus-visible {
    outline-width: 3px;
  }
  
  .footer-social-link {
    border: 2px solid currentColor;
  }
}

/* ============================================
 * END NAVIGATION COMPONENTS
 * ============================================ */


/* ============================================
 * 5. FEEDBACK COMPONENTS
 * ============================================
 * 
 * Toast notifications, loaders, spinners, progress bars, modals.
 * 
 * Naming Convention:
 * - .toast — Toast notification
 * - .skeleton — Skeleton loader placeholder
 * - .spinner — Loading spinner
 * - .progress — Progress bar
 * - .modal — Modal dialog
 * 
 * @section 2.5
 */

/* -----------------------------------------
 * 5.1 Toast Notifications
 * ----------------------------------------- */

/* Toast container — positions all toasts */
.toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  
  z-index: var(--z-toast);
  pointer-events: none;
  
  max-width: min(400px, calc(100vw - var(--space-8)));
}

/* Mobile positioning */
@media (max-width: 640px) {
  .toast-container {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
  }
}

/* Individual toast */
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  
  padding: var(--space-4);
  
  background-color: var(--color-surface-pure);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-border-strong);
  box-shadow: var(--shadow-lg);
  
  pointer-events: auto;
  
  /* Animation */
  animation: toast-slide-in 0.3s var(--ease-out);
}

/* Toast entrance animation */
@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Mobile toast animation (slide up) */
@media (max-width: 640px) {
  @keyframes toast-slide-in {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Toast exit animation */
.toast.is-exiting {
  animation: toast-slide-out 0.2s var(--ease-in) forwards;
}

@keyframes toast-slide-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

@media (max-width: 640px) {
  .toast.is-exiting {
    animation-name: toast-slide-out-mobile;
  }
  
  @keyframes toast-slide-out-mobile {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(100%);
    }
  }
}

/* Toast icon */
.toast-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

/* Toast content */
.toast-content {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin: 0;
}

.toast-message {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: var(--space-1) 0 0;
}

/* Toast close button */
.toast-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 24px;
  height: 24px;
  
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  
  color: var(--color-text-tertiary);
  transition: 
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.toast-close:hover {
  background-color: var(--color-surface-muted);
  color: var(--color-text-primary);
}

.toast-close svg {
  width: 14px;
  height: 14px;
}

/* Toast progress bar (auto-dismiss timer) */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 4px; /* Account for border-left */
  right: 0;
  height: 3px;
  
  background-color: var(--color-border);
  border-radius: 0 0 var(--radius-lg) 0;
  overflow: hidden;
}

.toast-progress-bar {
  height: 100%;
  background-color: var(--color-text-tertiary);
  transform-origin: left;
  animation: toast-progress-shrink 5s linear forwards;
}

@keyframes toast-progress-shrink {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* Toast variants */

/* Success */
.toast-success {
  border-left-color: var(--color-success);
}

.toast-success .toast-icon {
  color: var(--color-success);
}

.toast-success .toast-progress-bar {
  background-color: var(--color-success);
}

/* Error */
.toast-error {
  border-left-color: var(--color-error);
}

.toast-error .toast-icon {
  color: var(--color-error);
}

.toast-error .toast-progress-bar {
  background-color: var(--color-error);
}

/* Warning */
.toast-warning {
  border-left-color: var(--color-warning);
}

.toast-warning .toast-icon {
  color: var(--color-warning);
}

.toast-warning .toast-progress-bar {
  background-color: var(--color-warning);
}

/* Info (orange accent) */
.toast-info {
  border-left-color: var(--color-primary);
}

.toast-info .toast-icon {
  color: var(--color-primary);
}

.toast-info .toast-progress-bar {
  background-color: var(--color-primary);
}

/* -----------------------------------------
 * 5.2 Skeleton Loaders
 * ----------------------------------------- */

/* Base skeleton element */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface-muted) 25%,
    var(--color-surface-warm) 50%,
    var(--color-surface-muted) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  
  border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Skeleton variants */

/* Text line */
.skeleton-text {
  height: 1em;
  width: 100%;
  margin-bottom: var(--space-2);
}

.skeleton-text:last-child {
  width: 70%;
  margin-bottom: 0;
}

/* Title (larger) */
.skeleton-title {
  height: 1.5em;
  width: 60%;
  margin-bottom: var(--space-3);
}

/* Avatar/circle */
.skeleton-circle {
  border-radius: var(--radius-full);
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
}

.skeleton-avatar-sm {
  width: 32px;
  height: 32px;
}

.skeleton-avatar-lg {
  width: 64px;
  height: 64px;
}

/* Image placeholder */
.skeleton-image {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
}

.skeleton-image-square {
  aspect-ratio: 1;
}

/* Button placeholder */
.skeleton-button {
  height: var(--btn-height-md);
  width: 120px;
  border-radius: var(--radius-md);
}

/* Card skeleton (composite) */
.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--card-padding);
  background-color: var(--color-surface-pure);
  border-radius: var(--card-radius);
  border: 1px solid var(--color-border);
}

/* Meal card skeleton */
.skeleton-meal-card {
  overflow: hidden;
}

.skeleton-meal-card .skeleton-image {
  border-radius: 0;
}

.skeleton-meal-card-content {
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* -----------------------------------------
 * 5.2.1 Image Blur-Up (Progressive Loading)
 * ----------------------------------------- 
 * 
 * Usage: Wrap image in .blur-up-container, use .blur-up on img
 * Add data-src for lazy loading, src for low-res placeholder
 * 
 * <div class="blur-up-container">
 *   <img class="blur-up" src="tiny-placeholder.jpg" data-src="full-image.jpg">
 * </div>
 */

.blur-up-container {
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface-muted);
}

.blur-up {
  filter: blur(10px);
  transition: filter var(--transition-slow);
  transform: scale(1.05); /* Prevent blur edge artifacts */
}

.blur-up.is-loaded {
  filter: blur(0);
  transform: scale(1);
}

/* Native lazy loading enhancement */
img[loading="lazy"] {
  /* Smooth fade in when loaded */
  opacity: 0;
  transition: opacity var(--transition-normal);
}

img[loading="lazy"].is-visible,
img[loading="lazy"]:not([src=""]) {
  opacity: 1;
}

/* Skeleton placeholder for images not yet loaded */
.blur-up-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--color-surface-muted) 25%,
    var(--color-surface-warm) 50%,
    var(--color-surface-muted) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  z-index: 0;
}

.blur-up-container.is-loaded::before {
  opacity: 0;
  animation: none;
  pointer-events: none;
}

/* Reduced motion: no shimmer, just solid color */
@media (prefers-reduced-motion: reduce) {
  .blur-up {
    filter: none;
    transform: none;
    transition: none;
  }
  
  .blur-up-container::before {
    animation: none;
  }
}

/* -----------------------------------------
 * 5.3 Spinner Component
 * ----------------------------------------- */

/* Base spinner */
.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  
  animation: spinner-rotate 0.8s linear infinite;
}

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

/* Spinner sizes */
.spinner-sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.spinner-md {
  width: 24px;
  height: 24px;
  border-width: 3px;
}

.spinner-lg {
  width: 40px;
  height: 40px;
  border-width: 4px;
}

.spinner-xl {
  width: 56px;
  height: 56px;
  border-width: 5px;
}

/* Spinner on dark backgrounds */
.spinner-light {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: var(--color-surface-pure);
}

/* Spinner inside container (centered) */
.spinner-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
}

/* Full page loader */
.spinner-fullpage {
  position: fixed;
  inset: 0;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  
  z-index: var(--z-modal);
}

.spinner-fullpage .spinner {
  width: 48px;
  height: 48px;
  border-width: 4px;
}

.spinner-fullpage-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* Dots spinner variant */
.spinner-dots {
  display: inline-flex;
  gap: var(--space-1);
}

.spinner-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: spinner-dot-bounce 1.4s ease-in-out infinite both;
}

.spinner-dot:nth-child(1) { animation-delay: -0.32s; }
.spinner-dot:nth-child(2) { animation-delay: -0.16s; }
.spinner-dot:nth-child(3) { animation-delay: 0s; }

@keyframes spinner-dot-bounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* -----------------------------------------
 * 5.4 Progress Bar
 * ----------------------------------------- */

/* Base progress bar */
.progress {
  position: relative;
  width: 100%;
  height: 8px;
  
  background-color: var(--color-surface-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  
  transition: width var(--transition-normal) var(--ease-out);
}

/* Animated indeterminate state */
.progress-indeterminate .progress-bar {
  width: 30%;
  animation: progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes progress-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* Progress sizes */
.progress-sm {
  height: 4px;
}

.progress-lg {
  height: 12px;
}

/* Progress with label */
.progress-labeled {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.progress-value {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

/* Progress variants */
.progress-success .progress-bar {
  background-color: var(--color-success);
}

.progress-warning .progress-bar {
  background-color: var(--color-warning);
}

.progress-error .progress-bar {
  background-color: var(--color-error);
}

/* Striped progress (animated) */
.progress-striped .progress-bar {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 20px 20px;
  animation: progress-stripe 1s linear infinite;
}

@keyframes progress-stripe {
  from { background-position: 0 0; }
  to { background-position: 20px 0; }
}

/* Circular progress (ring) */
.progress-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.progress-ring svg {
  transform: rotate(-90deg);
}

.progress-ring-track {
  fill: none;
  stroke: var(--color-surface-muted);
}

.progress-ring-fill {
  fill: none;
  stroke: var(--color-primary);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--transition-slow) var(--ease-out);
}

.progress-ring-text {
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}

/* -----------------------------------------
 * 5.5 Modal Base Styles
 * ----------------------------------------- */

/* Modal backdrop */
.modal-backdrop {
  position: fixed;
  inset: 0;
  
  background-color: rgba(26, 22, 18, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  
  transition: 
    opacity var(--transition-normal),
    visibility var(--transition-normal);
  
  z-index: var(--z-modal);
}

.modal-backdrop.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Modal container (centers modal) */
.modal-container {
  position: fixed;
  inset: 0;
  
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  
  transition: 
    opacity var(--transition-normal),
    visibility var(--transition-normal);
  
  z-index: calc(var(--z-modal) + 1);
  overflow-y: auto;
}

.modal-container.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Modal dialog */
.modal {
  position: relative;
  
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  
  background-color: var(--color-surface-pure);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  
  overflow: hidden;
  
  /* Entrance animation */
  transform: scale(0.95) translateY(10px);
  transition: transform var(--transition-normal) var(--ease-out);
}

.modal-container.is-active .modal {
  transform: scale(1) translateY(0);
}

/* Modal sizes */
.modal-sm {
  max-width: 400px;
}

.modal-lg {
  max-width: 720px;
}

.modal-xl {
  max-width: 960px;
}

.modal-fullscreen {
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

/* Modal header */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.modal-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.modal-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 36px;
  height: 36px;
  
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  
  color: var(--color-text-secondary);
  transition: 
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.modal-close:hover {
  background-color: var(--color-surface-muted);
  color: var(--color-text-primary);
}

.modal-close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.modal-close svg {
  width: 20px;
  height: 20px;
}

/* Modal body */
.modal-body {
  padding: var(--space-6);
  overflow-y: auto;
  max-height: 60vh;
}

.modal-body::-webkit-scrollbar {
  width: 8px;
}

.modal-body::-webkit-scrollbar-track {
  background: var(--color-surface-muted);
  border-radius: var(--radius-full);
}

.modal-body::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
}

/* Modal footer */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface-cream);
}

/* Confirmation modal variant */
.modal-confirmation .modal-body {
  text-align: center;
  padding: var(--space-8);
}

.modal-confirmation-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-4);
}

.modal-confirmation-icon.is-warning {
  color: var(--color-warning);
}

.modal-confirmation-icon.is-danger {
  color: var(--color-error);
}

.modal-confirmation-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.modal-confirmation-message {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.modal-confirmation .modal-footer {
  justify-content: center;
}

/* Image lightbox variant */
.modal-lightbox {
  background-color: transparent;
  box-shadow: none;
  max-width: 90vw;
  max-height: 90vh;
}

.modal-lightbox img {
  display: block;
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
}

.modal-lightbox .modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--color-surface-pure);
}

.modal-lightbox .modal-close:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Lock body scroll when modal is open */
body.modal-open {
  overflow: hidden;
}

/* -----------------------------------------
 * 5.6 Reduced Motion Support
 * ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }
  
  .toast.is-exiting {
    animation: none;
    opacity: 0;
  }
  
  .skeleton {
    animation: none;
    background: var(--color-surface-muted);
  }
  
  .spinner,
  .spinner-dot {
    animation: none;
  }
  
  .spinner {
    /* Show static indicator */
    border-top-color: var(--color-primary);
    border-right-color: var(--color-primary);
    opacity: 0.7;
  }
  
  .progress-bar {
    transition: none;
  }
  
  .progress-indeterminate .progress-bar,
  .progress-striped .progress-bar {
    animation: none;
  }
  
  .modal-backdrop,
  .modal-container,
  .modal {
    transition: none;
  }
}

/* -----------------------------------------
 * 5.7 High Contrast Support
 * ----------------------------------------- */

@media (prefers-contrast: high) {
  .toast {
    border: 2px solid currentColor;
    border-left-width: 4px;
  }
  
  .progress {
    border: 1px solid var(--color-text-primary);
  }
  
  .modal {
    border: 2px solid var(--color-text-primary);
  }
  
  .modal-close:focus-visible {
    outline-width: 3px;
  }
}

/* ============================================
 * END FEEDBACK COMPONENTS
 * ============================================ */

/* ============================================
 * 6. MENU PAGE LAYOUT
 * ============================================
 * 
 * Layout system for the menu page with:
 * - Filter sidebar (desktop)
 * - Filter drawer (mobile)
 * - Meal card grid
 * - Category tabs
 * - Sort controls
 * 
 * Structure:
 * .menu-page-layout
 *   .menu-filter-sidebar (desktop)
 *   .menu-main
 *     .menu-header (category tabs + sort)
 *     .menu-grid (meal cards)
 * 
 * Mobile: .menu-filter-drawer + .menu-filter-toggle
 */

/* -----------------------------------------
 * 6.1 Menu Page Layout Container
 * ----------------------------------------- */

.menu-page-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-8);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-6);
}

@media (max-width: 1024px) {
  .menu-page-layout {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-4);
  }
}

/* -----------------------------------------
 * 6.2 Filter Sidebar (Desktop)
 * ----------------------------------------- */

.menu-filter-sidebar {
  position: sticky;
  top: calc(var(--space-header, 80px) + var(--space-6));
  height: fit-content;
  max-height: calc(100vh - var(--space-header, 80px) - var(--space-12));
  overflow-y: auto;
  padding: var(--space-6);
  background-color: var(--color-surface-pure);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Hide scrollbar but keep functionality */
.menu-filter-sidebar {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.menu-filter-sidebar::-webkit-scrollbar {
  width: 6px;
}

.menu-filter-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.menu-filter-sidebar::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: var(--radius-full);
}

/* Hide on mobile (drawer used instead) */
@media (max-width: 1024px) {
  .menu-filter-sidebar {
    display: none;
  }
}

/* -----------------------------------------
 * 6.3 Filter Section Styles
 * ----------------------------------------- */

.filter-section {
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
}

.filter-section:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.filter-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Collapsible filter section */
.filter-section-title.is-collapsible {
  cursor: pointer;
  user-select: none;
}

.filter-section-title.is-collapsible::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-text-secondary);
  border-bottom: 2px solid var(--color-text-secondary);
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
}

.filter-section.is-collapsed .filter-section-title.is-collapsible::after {
  transform: rotate(-135deg);
}

.filter-section.is-collapsed .filter-options {
  display: none;
}

.filter-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* -----------------------------------------
 * 6.4 Filter Option (Checkbox Style)
 * ----------------------------------------- */

.filter-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.filter-option:hover {
  background-color: var(--color-surface-cream);
}

.filter-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.filter-option-check {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-pure);
  transition: 
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

/* Checkmark */
.filter-option-check::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: solid var(--color-surface-pure);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--transition-fast);
}

/* Checked state */
.filter-option input[type="checkbox"]:checked + .filter-option-check {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.filter-option input[type="checkbox"]:checked + .filter-option-check::after {
  transform: rotate(45deg) scale(1);
}

/* Focus state */
.filter-option input[type="checkbox"]:focus-visible + .filter-option-check {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.filter-option-label {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.filter-option-count {
  margin-left: auto;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  background-color: var(--color-surface-muted);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

/* -----------------------------------------
 * 6.5 Active Filters Bar
 * ----------------------------------------- */

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.active-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  background-color: var(--color-primary-dim);
  border-radius: var(--radius-full);
  cursor: default;
}

.active-filter-tag button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  color: var(--color-primary);
  background: none;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.active-filter-tag button:hover {
  background-color: var(--color-primary);
  color: var(--color-surface-pure);
}

.clear-filters-btn {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  background: none;
  border: none;
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.clear-filters-btn:hover {
  color: var(--color-primary);
}

/* -----------------------------------------
 * 6.6 Mobile Filter Toggle Button
 * ----------------------------------------- */

.menu-filter-toggle {
  display: none;
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-sticky);
  
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-surface-pure);
  background-color: var(--color-surface-dark);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  
  transition: 
    transform var(--transition-normal),
    box-shadow var(--transition-fast);
}

.menu-filter-toggle:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: var(--shadow-xl);
}

.menu-filter-toggle svg {
  width: 16px;
  height: 16px;
  margin-right: var(--space-2);
}

/* Filter count badge */
.menu-filter-toggle .filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  font-size: 10px;
  font-weight: var(--weight-bold);
  color: var(--color-surface-dark);
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
}

.menu-filter-toggle .filter-count:empty {
  display: none;
}

@media (max-width: 1024px) {
  .menu-filter-toggle {
    display: flex;
    align-items: center;
  }
}

/* -----------------------------------------
 * 6.7 Mobile Filter Drawer
 * ----------------------------------------- */

.menu-filter-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  visibility: hidden;
  pointer-events: none;
}

.menu-filter-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

/* Backdrop */
.menu-filter-drawer-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.menu-filter-drawer.is-open .menu-filter-drawer-backdrop {
  opacity: 1;
}

/* Drawer panel */
.menu-filter-drawer-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 80vh;
  background-color: var(--color-surface-pure);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform var(--transition-normal) var(--ease-out);
}

.menu-filter-drawer.is-open .menu-filter-drawer-panel {
  transform: translateY(0);
}

/* Drawer header */
.menu-filter-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
}

.menu-filter-drawer-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.menu-filter-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.menu-filter-drawer-close:hover {
  background-color: var(--color-surface-muted);
}

.menu-filter-drawer-close svg {
  width: 20px;
  height: 20px;
}

/* Drawer content */
.menu-filter-drawer-content {
  padding: var(--space-5);
  max-height: calc(80vh - 60px - 72px); /* 60px header, 72px footer */
  overflow-y: auto;
}

/* Drawer footer */
.menu-filter-drawer-footer {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border-light);
  background-color: var(--color-surface-cream);
}

.menu-filter-drawer-footer .btn {
  flex: 1;
}

/* -----------------------------------------
 * 6.8 Menu Main Content Area
 * ----------------------------------------- */

.menu-main {
  min-width: 0; /* Prevent grid blowout */
}

/* -----------------------------------------
 * 6.9 Menu Header (Tabs + Sort + Count)
 * ----------------------------------------- */

.menu-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

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

.menu-header-title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
}

.menu-header-title span {
  color: var(--color-primary);
}

.menu-results-count {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.menu-results-count strong {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

/* -----------------------------------------
 * 6.10 Category Tabs
 * ----------------------------------------- */

.menu-category-tabs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  
  /* Hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.menu-category-tabs::-webkit-scrollbar {
  display: none;
}

.menu-category-tab {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  background-color: var(--color-surface-cream);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: 
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
  white-space: nowrap;
}

.menu-category-tab:hover {
  color: var(--color-text-primary);
  background-color: var(--color-surface-muted);
}

.menu-category-tab.is-active {
  color: var(--color-primary);
  background-color: var(--color-primary-dim);
  border-color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

/* -----------------------------------------
 * 6.11 Sort Dropdown
 * ----------------------------------------- */

.menu-sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.menu-sort-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.menu-sort-select {
  position: relative;
  min-width: 160px;
}

.menu-sort-select select {
  width: 100%;
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  background-color: var(--color-surface-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  appearance: none;
  transition: border-color var(--transition-fast);
}

.menu-sort-select select:hover,
.menu-sort-select select:focus {
  border-color: var(--color-primary);
  outline: none;
}

/* Custom dropdown arrow */
.menu-sort-select::after {
  content: '';
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-text-secondary);
  border-bottom: 2px solid var(--color-text-secondary);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Controls row */
.menu-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .menu-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .menu-sort {
    justify-content: space-between;
  }
  
  .menu-sort-select {
    flex: 1;
  }
}

/* -----------------------------------------
 * 6.12 Menu Grid
 * ----------------------------------------- */

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}

@media (max-width: 640px) {
  .menu-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* No results message */
.menu-no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-16) var(--space-8);
}

.menu-no-results-icon {
  font-size: 48px;
  margin-bottom: var(--space-4);
  opacity: 0.5;
}

.menu-no-results-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.menu-no-results-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

/* -----------------------------------------
 * 6.13 Reduced Motion Support
 * ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .menu-filter-drawer-backdrop,
  .menu-filter-drawer-panel {
    transition: none;
  }
  
  .menu-filter-toggle {
    transition: none;
  }
  
  .menu-filter-toggle:hover {
    transform: translateX(-50%);
  }
}

/* ============================================
 * END MENU PAGE LAYOUT
 * ============================================ */

/* ============================================
 * 7. MEAL DETAIL MODAL
 * ============================================
 * 
 * Full-featured meal detail modal with:
 * - Hero image with steam effect
 * - Thumbnail gallery
 * - Product info and pricing
 * - Nutrition panel with macro visualization
 * - Add to cart with quantity selector
 * - Related meals section
 * 
 * Structure:
 * .modal-meal-detail
 *   .meal-detail-hero (image + steam)
 *   .meal-detail-gallery (thumbnails)
 *   .meal-detail-content
 *     .meal-detail-info (title, description, price)
 *     .meal-detail-nutrition (macros, table)
 *     .meal-detail-actions (quantity, add-to-cart)
 *   .meal-detail-related (related meals)
 * 
 * @section 7
 */

/* -----------------------------------------
 * 7.1 Modal Container & Layout
 * ----------------------------------------- */

.modal-meal-detail {
  max-width: 960px;
  height: 95vh;
  max-height: 95vh;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto 1fr;
}

@media (max-width: 768px) {
  .modal-meal-detail {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
  }
  
  .modal-container.is-active .modal-meal-detail {
    transform: none;
  }
}

/* Modal close button override for meal detail */
.modal-meal-detail .modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 10;
  background-color: rgba(26, 22, 18, 0.6);
  color: var(--color-surface-pure);
  backdrop-filter: blur(4px);
}

.modal-meal-detail .modal-close:hover {
  background-color: rgba(26, 22, 18, 0.8);
  color: var(--color-surface-pure);
}

/* -----------------------------------------
 * 7.2 Hero Image with Steam Effect
 * ----------------------------------------- */

.meal-detail-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-surface-warm);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .meal-detail-hero {
    aspect-ratio: 4 / 3;
  }
}

.meal-detail-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow) var(--ease-out);
}

/* Steam effect container */
.meal-detail-steam {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  pointer-events: none;
  overflow: hidden;
}

/* Steam wisps - larger version for hero */
.meal-detail-steam .steam-wisp {
  position: absolute;
  bottom: 0;
  width: 40px;
  height: 80px;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0)
  );
  border-radius: 50%;
  filter: blur(10px);
  animation: steamRise 4s ease-out infinite;
  opacity: 0;
}

.meal-detail-steam .steam-wisp:nth-child(1) {
  left: 20%;
  animation-delay: 0s;
}

.meal-detail-steam .steam-wisp:nth-child(2) {
  left: 35%;
  animation-delay: 0.8s;
  width: 50px;
  height: 100px;
}

.meal-detail-steam .steam-wisp:nth-child(3) {
  left: 50%;
  animation-delay: 1.6s;
  width: 35px;
  height: 90px;
}

.meal-detail-steam .steam-wisp:nth-child(4) {
  left: 65%;
  animation-delay: 2.4s;
  width: 45px;
  height: 85px;
}

.meal-detail-steam .steam-wisp:nth-child(5) {
  left: 80%;
  animation-delay: 3.2s;
  width: 38px;
  height: 75px;
}

@keyframes steamRise {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.8);
  }
  10% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: translateY(-120px) scale(1.5) translateX(15px);
  }
}

/* Heat shimmer overlay */
.meal-detail-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(255, 247, 240, 0.3),
    transparent 40%
  );
  pointer-events: none;
  animation: shimmerPulse 3s ease-in-out infinite;
}

@keyframes shimmerPulse {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}

/* Badge positioning in hero */
.meal-detail-hero .card-badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 5;
}

/* -----------------------------------------
 * 7.3 Image Gallery Thumbnails
 * ----------------------------------------- */

.meal-detail-gallery {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface-cream);
  overflow-x: auto;
  flex-shrink: 0;
}

.meal-detail-gallery::-webkit-scrollbar {
  height: 4px;
}

.meal-detail-gallery::-webkit-scrollbar-track {
  background: transparent;
}

.meal-detail-gallery::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: var(--radius-full);
}

.meal-detail-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: 
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.meal-detail-thumb:hover {
  transform: scale(1.05);
}

.meal-detail-thumb.is-active {
  border-color: var(--color-primary);
}

.meal-detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -----------------------------------------
 * 7.4 Content Layout
 * ----------------------------------------- */

.meal-detail-content {
  min-height: 0; /* Required for grid/flex child to scroll properly */
  overflow-y: scroll !important; /* Force scrollbar */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  overscroll-behavior: contain; /* Prevent scroll chaining */
  touch-action: pan-y; /* Allow vertical touch scrolling */
  padding: var(--space-6);
}

.meal-detail-content::-webkit-scrollbar {
  width: 8px;
}

.meal-detail-content::-webkit-scrollbar-track {
  background: var(--color-surface-cream);
  border-radius: var(--radius-full);
}

.meal-detail-content::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
}

/* Two-column layout on larger screens */
.meal-detail-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-8);
}

@media (max-width: 768px) {
  .meal-detail-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* -----------------------------------------
 * 7.5 Product Info Section
 * ----------------------------------------- */

.meal-detail-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.meal-detail-category {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
}

.meal-detail-title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  margin: 0;
}

.meal-detail-description {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.meal-detail-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.meal-detail-price-current {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}

.meal-detail-price-original {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.meal-detail-price-savings {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-success);
  background-color: rgba(122, 154, 122, 0.15);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

/* Serving info */
.meal-detail-serving {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.meal-detail-serving-icon {
  width: 20px;
  height: 20px;
  color: var(--color-sage);
}

/* Tags/badges */
.meal-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.meal-detail-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  background-color: var(--color-surface-cream);
  border-radius: var(--radius-full);
}

.meal-detail-tag-icon {
  width: 14px;
  height: 14px;
}

/* -----------------------------------------
 * 7.6 Nutrition Panel
 * ----------------------------------------- */

.meal-detail-nutrition {
  background-color: var(--color-surface-cream);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.meal-detail-nutrition-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
}

/* Macro visualization - circular rings */
.meal-detail-macros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.macro-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.macro-ring-circle {
  position: relative;
  width: 60px;
  height: 60px;
}

.macro-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.macro-ring-bg {
  fill: none;
  stroke: var(--color-surface-warm);
  stroke-width: 6;
}

.macro-ring-progress {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s var(--ease-out);
}

.macro-ring-progress.is-protein {
  stroke: var(--color-primary);
}

.macro-ring-progress.is-carbs {
  stroke: var(--color-sage);
}

.macro-ring-progress.is-fat {
  stroke: var(--color-copper, #b87333);
}

.macro-ring-progress.is-calories {
  stroke: var(--color-text-secondary);
}

.macro-ring-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}

.macro-ring-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 480px) {
  .meal-detail-macros {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Detailed nutrition table */
.meal-detail-nutrition-table {
  width: 100%;
  border-collapse: collapse;
}

.meal-detail-nutrition-table th,
.meal-detail-nutrition-table td {
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border);
}

.meal-detail-nutrition-table th {
  text-align: left;
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}

.meal-detail-nutrition-table td {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.meal-detail-nutrition-table tr:last-child th,
.meal-detail-nutrition-table tr:last-child td {
  border-bottom: none;
}

/* Expandable details */
.meal-detail-nutrition-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) 0;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  background: none;
  border: none;
  border-top: 1px solid var(--color-border);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.meal-detail-nutrition-toggle:hover {
  color: var(--color-primary-hover);
}

.meal-detail-nutrition-toggle-icon {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.meal-detail-nutrition-toggle[aria-expanded="true"] .meal-detail-nutrition-toggle-icon {
  transform: rotate(180deg);
}

.meal-detail-nutrition-details {
  display: none;
  padding-top: var(--space-4);
}

.meal-detail-nutrition-details.is-visible {
  display: block;
}

/* Ingredients list */
.meal-detail-ingredients {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.meal-detail-ingredients-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.meal-detail-ingredients-list {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Allergen warnings */
.meal-detail-allergens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3);
  background-color: rgba(239, 68, 68, 0.08);
  border-radius: var(--radius-md);
}

.meal-detail-allergens-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-error);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: 100%;
}

.meal-detail-allergen {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  background-color: var(--color-surface-pure);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

/* -----------------------------------------
 * 7.7 Add to Cart Section
 * ----------------------------------------- */

.meal-detail-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* Quantity selector */
.meal-detail-quantity {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.meal-detail-quantity-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}

.quantity-selector {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background-color: var(--color-surface-cream);
  border-radius: var(--radius-lg);
  padding: var(--space-1);
}

.quantity-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background-color: transparent;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: 
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.quantity-btn:hover:not(:disabled) {
  background-color: var(--color-surface-warm);
  color: var(--color-text-primary);
}

.quantity-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.quantity-btn svg {
  width: 18px;
  height: 18px;
}

.quantity-value {
  min-width: 40px;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  text-align: center;
}

/* Add to cart button */
.meal-detail-add-btn {
  width: 100%;
}

/* Success feedback */
.meal-detail-success {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-success);
  background-color: rgba(122, 154, 122, 0.15);
  border-radius: var(--radius-md);
  animation: successFadeIn 0.3s var(--ease-out);
}

.meal-detail-success.is-visible {
  display: flex;
}

.meal-detail-success-icon {
  width: 20px;
  height: 20px;
}

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

/* -----------------------------------------
 * 7.8 Related Meals Section
 * ----------------------------------------- */

.meal-detail-related {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.meal-detail-related-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
}

.meal-detail-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .meal-detail-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mini meal card for related items */
.meal-card-mini {
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.meal-card-mini:hover {
  transform: translateY(-2px);
}

.meal-card-mini-image {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.meal-card-mini-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.meal-card-mini-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meal-card-mini-price {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}

/* -----------------------------------------
 * 7.9 Reduced Motion Support
 * ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .meal-detail-steam .steam-wisp,
  .meal-detail-shimmer {
    animation: none;
    opacity: 0.3;
  }
  
  .meal-detail-success {
    animation: none;
  }
  
  .macro-ring-progress {
    transition: none;
  }
}

/* -----------------------------------------
 * 7.10 High Contrast Support
 * ----------------------------------------- */

@media (prefers-contrast: more) {
  .modal-meal-detail {
    border: 2px solid var(--color-text-primary);
  }
  
  .meal-detail-nutrition {
    border: 1px solid var(--color-text-primary);
  }
  
  .quantity-btn {
    border: 1px solid var(--color-text-secondary);
  }
}

/* ============================================
 * END MEAL DETAIL MODAL
 * ============================================ */


/* ============================================
 * 8. BUNDLE BUILDER — "YOUR FREEZER"
 * ============================================
 * 
 * Two-column layout for the bundle builder page.
 * Left: Meal selection grid
 * Right: Sticky box summary sidebar (desktop)
 * Mobile: Sticky bottom bar with drawer
 * 
 * @page plan100.html
 * @version 1.0.0
 * @date 2026-02-03
 */

/* -----------------------------------------
 * 8.1 Bundle Builder Layout
 * ----------------------------------------- */

.bundle-builder {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* Two-column layout on desktop */
@media (min-width: 1024px) {
  .bundle-builder {
    grid-template-columns: 1fr 380px;
    gap: var(--space-8);
    align-items: start;
  }
}

@media (min-width: 1280px) {
  .bundle-builder {
    grid-template-columns: 1fr 420px;
  }
}

/* -----------------------------------------
 * 8.2 Meal Selection Grid (Left Column)
 * ----------------------------------------- */

.bundle-meals {
  min-width: 0; /* Prevent grid blowout */
}

.bundle-meals-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.bundle-meals-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.bundle-meals-count {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  background-color: var(--color-surface-warm);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
}

/* Meal Grid */
.bundle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .bundle-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1400px) {
  .bundle-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -----------------------------------------
 * 8.3 Bundle Card (Selectable Meal Card)
 * ----------------------------------------- */

.bundle-card {
  position: relative;
  background-color: var(--color-surface-pure);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  transition:
    border-color var(--transition-normal),
    box-shadow var(--transition-normal),
    transform var(--transition-fast);
}

.bundle-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* Selected state */
.bundle-card.is-selected {
  border-color: var(--color-primary);
  box-shadow: 
    0 0 0 2px var(--color-primary-dim),
    var(--shadow-md);
}

/* Selected checkmark badge */
.bundle-card-check {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 32px;
  height: 32px;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
  font-size: 16px;
  opacity: 0;
  transform: scale(0.5);
  transition: 
    opacity var(--transition-fast),
    transform var(--transition-normal);
  z-index: 10;
}

.bundle-card.is-selected .bundle-card-check {
  opacity: 1;
  transform: scale(1);
}

/* Card image */
.bundle-card-image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.bundle-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.bundle-card:hover .bundle-card-image img {
  transform: scale(1.05);
}

/* Card content */
.bundle-card-content {
  padding: var(--space-4);
}

.bundle-card-category {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-1);
}

.bundle-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-tight);
}

.bundle-card-price {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}

.bundle-card-price-old {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-tertiary);
  text-decoration: line-through;
  margin-left: var(--space-2);
}

/* Quantity control (appears when selected) */
.bundle-card-quantity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: 
    opacity var(--transition-normal),
    max-height var(--transition-normal);
}

.bundle-card.is-selected .bundle-card-quantity {
  opacity: 1;
  max-height: 80px;
}

.bundle-qty-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface-warm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: 18px;
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: 
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.bundle-qty-btn:hover {
  background-color: var(--color-primary-dim);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.bundle-qty-value {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  min-width: 40px;
  text-align: center;
}

/* Out of stock state */
.bundle-card.is-out-of-stock {
  opacity: 0.6;
  cursor: not-allowed;
}

.bundle-card.is-out-of-stock::after {
  content: 'SOLD OUT';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
  background-color: rgba(0, 0, 0, 0.85);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  z-index: 20;
}

.bundle-card.is-out-of-stock:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

/* -----------------------------------------
 * 8.4 Box Summary Sidebar (Right Column)
 * ----------------------------------------- */

.bundle-summary {
  display: none; /* Hidden on mobile */
}

@media (min-width: 1024px) {
  .bundle-summary {
    display: block;
    position: sticky;
    top: calc(var(--space-4) + 80px); /* Below header */
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
}

.bundle-summary-card {
  background-color: var(--color-surface-pure);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Summary header */
.bundle-summary-header {
  background: linear-gradient(
    135deg,
    var(--color-surface-dark) 0%,
    color-mix(in srgb, var(--color-surface-dark) 90%, var(--color-primary)) 100%
  );
  padding: var(--space-6);
  color: var(--color-text-inverse);
}

.bundle-summary-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-2);
}

.bundle-summary-title-icon {
  font-size: 24px;
}

.bundle-summary-subtitle {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* Progress indicator */
.bundle-progress {
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.bundle-progress-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.bundle-progress-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}

.bundle-progress-count {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}

.bundle-progress-bar {
  height: 8px;
  background-color: var(--color-surface-warm);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.bundle-progress-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-primary-hover) 100%
  );
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
  width: 0%;
}

/* Tier indicator */
.bundle-tiers {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.bundle-tier {
  text-align: center;
}

.bundle-tier.is-active {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

/* Selected items list */
.bundle-items {
  padding: var(--space-4);
  max-height: 280px;
  overflow-y: auto;
}

.bundle-items-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-tertiary);
}

.bundle-items-empty-icon {
  font-size: 48px;
  margin-bottom: var(--space-3);
  opacity: 0.3;
}

.bundle-items-empty-text {
  font-size: var(--text-sm);
  margin: 0;
}

.bundle-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.bundle-item:last-child {
  border-bottom: none;
}

.bundle-item-image {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.bundle-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bundle-item-info {
  flex: 1;
  min-width: 0;
}

.bundle-item-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bundle-item-qty {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.bundle-item-price {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.bundle-item-remove {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-full);
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: 
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.bundle-item-remove:hover {
  background-color: var(--color-error-dim);
  color: var(--color-error);
}

/* Pricing section */
.bundle-pricing {
  padding: var(--space-5);
  background-color: var(--color-surface-cream);
  border-top: 1px solid var(--color-border);
}

.bundle-pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.bundle-pricing-row:last-child {
  margin-bottom: 0;
}

.bundle-pricing-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.bundle-pricing-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.bundle-pricing-row.is-total {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
}

.bundle-pricing-row.is-total .bundle-pricing-label {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.bundle-pricing-row.is-total .bundle-pricing-value {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}

/* Per meal price */
.bundle-per-meal {
  text-align: center;
  padding: var(--space-3);
  background-color: var(--color-primary-dim);
  border-radius: var(--radius-md);
  margin-top: var(--space-3);
}

.bundle-per-meal-value {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}

.bundle-per-meal-label {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Savings badge */
.bundle-savings {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: linear-gradient(
    135deg,
    var(--color-success) 0%,
    color-mix(in srgb, var(--color-success) 80%, var(--color-sage)) 100%
  );
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-md);
  margin-top: var(--space-3);
}

.bundle-savings-icon {
  font-size: 16px;
}

/* Checkout button */
.bundle-checkout {
  padding: var(--space-5);
}

.bundle-checkout-btn {
  width: 100%;
}

.bundle-checkout-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Trust signals */
.bundle-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--color-surface-warm);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.bundle-trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.bundle-trust-icon {
  color: var(--color-sage);
}

/* -----------------------------------------
 * 8.5 Mobile Bottom Bar (Sticky)
 * ----------------------------------------- */

.bundle-mobile-bar {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-surface-pure);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  padding: var(--space-4);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  z-index: var(--z-sticky);
}

@media (min-width: 1024px) {
  .bundle-mobile-bar {
    display: none;
  }
}

.bundle-mobile-bar-content {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: var(--container-max);
  margin: 0 auto;
}

.bundle-mobile-info {
  flex: 1;
}

.bundle-mobile-count {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.bundle-mobile-price {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.bundle-mobile-price-value {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}

.bundle-mobile-btn {
  flex-shrink: 0;
}

/* Mobile drawer (slides up) */
.bundle-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
}

.bundle-drawer.is-open {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.bundle-drawer-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.2s ease-out;
}

.bundle-drawer-content {
  position: relative;
  background-color: var(--color-surface-pure);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  max-height: 85vh;
  overflow-y: auto;
  animation: slideUp 0.3s var(--ease-out);
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.bundle-drawer-handle {
  width: 40px;
  height: 4px;
  background-color: var(--color-border);
  border-radius: var(--radius-full);
  margin: var(--space-3) auto;
}

/* -----------------------------------------
 * 8.6 Add More Messaging
 * ----------------------------------------- */

.bundle-add-more {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-primary-dim);
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
}

.bundle-add-more-icon {
  font-size: 24px;
  color: var(--color-primary);
}

.bundle-add-more-text {
  flex: 1;
}

.bundle-add-more-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1);
}

.bundle-add-more-desc {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin: 0;
}

/* -----------------------------------------
 * 8.7 Dynamic Pricing Animations
 * 
 * Animate price changes, savings badges, and tier milestones
 * for a rewarding bundle builder experience.
 * ----------------------------------------- */

/* Price Value Container (wrapper for animated numbers) */
.bundle-price-animated {
  display: inline-flex;
  align-items: baseline;
  position: relative;
  font-variant-numeric: tabular-nums;
}

/* Individual price digits for flip animation */
.bundle-price-digit {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bundle-price-digit.is-updating {
  animation: priceFlip 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes priceFlip {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  40% {
    transform: translateY(-15px) scale(0.85);
    opacity: 0.4;
  }
  60% {
    transform: translateY(8px) scale(1.1);
    opacity: 0.6;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Price cascade effect (stagger from right to left) */
.bundle-price-cascade .bundle-price-digit:nth-child(1) { animation-delay: 0.05s; }
.bundle-price-cascade .bundle-price-digit:nth-child(2) { animation-delay: 0.08s; }
.bundle-price-cascade .bundle-price-digit:nth-child(3) { animation-delay: 0.11s; }
.bundle-price-cascade .bundle-price-digit:nth-child(4) { animation-delay: 0.14s; }
.bundle-price-cascade .bundle-price-digit:nth-child(5) { animation-delay: 0.17s; }
.bundle-price-cascade .bundle-price-digit:nth-child(6) { animation-delay: 0.20s; }
.bundle-price-cascade .bundle-price-digit:nth-child(7) { animation-delay: 0.23s; }

/* Price change glow effect */
.bundle-pricing-value.is-changing {
  animation: priceGlow 0.6s ease-out;
}

@keyframes priceGlow {
  0% {
    text-shadow: 0 0 0 transparent;
  }
  30% {
    text-shadow: 0 0 12px var(--color-primary-glow);
  }
  100% {
    text-shadow: 0 0 0 transparent;
  }
}

/* Price increase/decrease indicators */
.bundle-price-change {
  position: absolute;
  right: -24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.bundle-price-change.is-increase {
  color: var(--color-error);
  animation: priceChangeUp 0.6s ease-out forwards;
}

.bundle-price-change.is-decrease {
  color: var(--color-success);
  animation: priceChangeDown 0.6s ease-out forwards;
}

@keyframes priceChangeUp {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(-10px);
  }
  30% {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-100%) translateX(0);
  }
}

@keyframes priceChangeDown {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(-10px);
  }
  30% {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateY(0%) translateX(0);
  }
}

/* -----------------------------------------
 * 8.7.1 Savings Badge Animation
 * ----------------------------------------- */

/* Base savings badge (already defined, but add animation states) */
.bundle-savings {
  transform: scale(0.8);
  opacity: 0;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease-out;
}

.bundle-savings.is-visible {
  transform: scale(1);
  opacity: 1;
}

/* Savings badge pop-in animation */
.bundle-savings.is-popping {
  animation: savingsPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes savingsPop {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Savings badge shimmer effect */
.bundle-savings::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
}

.bundle-savings.is-visible::before {
  animation: savingsShimmer 2s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes savingsShimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}

/* Savings amount increase animation */
.bundle-savings-amount {
  display: inline-block;
  transition: transform 0.3s ease-out;
}

.bundle-savings-amount.is-increasing {
  animation: savingsIncrease 0.5s ease-out;
}

@keyframes savingsIncrease {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
    color: var(--color-success);
  }
  100% {
    transform: scale(1);
  }
}

/* -----------------------------------------
 * 8.7.2 Tier Milestone Animations
 * ----------------------------------------- */

/* Enhanced tier indicator styling */
.bundle-tier {
  position: relative;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    transform 0.3s ease;
}

.bundle-tier.is-active {
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  font-weight: var(--weight-bold);
}

/* Tier unlock celebration */
.bundle-tier.is-unlocking {
  animation: tierUnlock 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes tierUnlock {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.3);
    box-shadow: 0 0 0 4px var(--color-primary-dim);
  }
  60% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
    box-shadow: none;
  }
}

/* Tier celebration particles */
.bundle-tier-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.bundle-tier-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: var(--color-primary);
  border-radius: 50%;
  opacity: 0;
}

.bundle-tier.is-unlocking .bundle-tier-particle {
  animation: tierParticle 0.8s ease-out forwards;
}

.bundle-tier-particle:nth-child(1) { animation-delay: 0.1s; }
.bundle-tier-particle:nth-child(2) { animation-delay: 0.15s; }
.bundle-tier-particle:nth-child(3) { animation-delay: 0.2s; }
.bundle-tier-particle:nth-child(4) { animation-delay: 0.25s; }
.bundle-tier-particle:nth-child(5) { animation-delay: 0.3s; }
.bundle-tier-particle:nth-child(6) { animation-delay: 0.35s; }

@keyframes tierParticle {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--particle-x, 20px), var(--particle-y, -20px)) scale(0);
    opacity: 0;
  }
}

/* Custom particle positions */
.bundle-tier-particle:nth-child(1) { --particle-x: -15px; --particle-y: -20px; }
.bundle-tier-particle:nth-child(2) { --particle-x: 15px; --particle-y: -18px; }
.bundle-tier-particle:nth-child(3) { --particle-x: -20px; --particle-y: 5px; }
.bundle-tier-particle:nth-child(4) { --particle-x: 20px; --particle-y: 8px; }
.bundle-tier-particle:nth-child(5) { --particle-x: -8px; --particle-y: -25px; }
.bundle-tier-particle:nth-child(6) { --particle-x: 8px; --particle-y: -22px; }

/* Progress bar milestone markers */
.bundle-progress-bar {
  position: relative;
}

.bundle-progress-marker {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background-color: var(--color-border);
  border-radius: var(--radius-full);
  transition: background-color 0.3s ease;
}

.bundle-progress-marker[data-tier="8"] { left: 80%; }
.bundle-progress-marker[data-tier="10"] { left: 100%; }

.bundle-progress-marker.is-reached {
  background-color: var(--color-primary);
}

/* Progress bar fill glow on tier reach */
.bundle-progress-fill.is-celebrating {
  animation: progressCelebrate 0.6s ease-out;
}

@keyframes progressCelebrate {
  0% {
    box-shadow: 0 0 0 0 var(--color-primary-glow);
  }
  50% {
    box-shadow: 0 0 16px 4px var(--color-primary-glow);
  }
  100% {
    box-shadow: 0 0 0 0 var(--color-primary-glow);
  }
}

/* -----------------------------------------
 * 8.7.3 "Add X More" Messaging Animation
 * ----------------------------------------- */

/* Enhanced add-more section */
.bundle-add-more {
  transform: translateY(10px);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease-out,
    max-height 0.4s ease-out,
    margin 0.3s ease-out;
  margin: 0;
  padding: 0;
}

.bundle-add-more.is-visible {
  transform: translateY(0);
  opacity: 1;
  max-height: 80px;
  margin: var(--space-4) 0;
  padding: var(--space-3);
}

/* Pulsing icon for urgency */
.bundle-add-more-icon {
  animation: addMorePulse 2s ease-in-out infinite;
}

@keyframes addMorePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.8;
  }
}

/* Count down emphasis */
.bundle-add-more-count {
  display: inline-block;
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  transition: transform 0.3s ease-out;
}

.bundle-add-more-count.is-updating {
  animation: countBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes countBounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}

/* Almost there excitement */
.bundle-add-more.is-close {
  background-color: var(--color-warning-dim);
  border-color: var(--color-warning);
}

.bundle-add-more.is-close .bundle-add-more-icon {
  animation: addMoreExcited 0.5s ease-in-out infinite;
}

@keyframes addMoreExcited {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.1) rotate(-5deg);
  }
  75% {
    transform: scale(1.1) rotate(5deg);
  }
}

/* -----------------------------------------
 * 8.7.4 Per-Meal Price Animation
 * ----------------------------------------- */

/* Per meal value animation on change */
.bundle-per-meal-value {
  position: relative;
  transition: transform 0.3s ease-out;
}

.bundle-per-meal-value.is-dropping {
  animation: priceDrop 0.6s ease-out;
}

@keyframes priceDrop {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.2);
    color: var(--color-success);
  }
  100% {
    transform: scale(1);
  }
}

/* Per meal highlight on improvement */
.bundle-per-meal.is-improved {
  animation: perMealImproved 0.5s ease-out;
}

@keyframes perMealImproved {
  0% {
    background-color: var(--color-primary-dim);
  }
  50% {
    background-color: var(--color-success-dim);
    box-shadow: 0 0 0 3px var(--color-success-dim);
  }
  100% {
    background-color: var(--color-primary-dim);
    box-shadow: none;
  }
}

/* -----------------------------------------
 * 8.8 Reduced Motion Support
 * ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .bundle-card,
  .bundle-card-check,
  .bundle-card-quantity,
  .bundle-progress-fill,
  .bundle-drawer-content {
    transition: none;
    animation: none;
  }
  
  .bundle-drawer-backdrop {
    animation: none;
  }
  
  /* Disable all dynamic pricing animations */
  .bundle-price-digit,
  .bundle-pricing-value,
  .bundle-savings,
  .bundle-tier,
  .bundle-add-more,
  .bundle-add-more-icon,
  .bundle-add-more-count,
  .bundle-per-meal-value,
  .bundle-per-meal {
    transition: none !important;
    animation: none !important;
  }
  
  /* But keep visibility toggles working */
  .bundle-savings.is-visible,
  .bundle-add-more.is-visible {
    transform: none;
    opacity: 1;
    max-height: 80px;
  }
}

/* -----------------------------------------
 * 8.9 High Contrast Support
 * ----------------------------------------- */

@media (prefers-contrast: more) {
  .bundle-card {
    border-width: 3px;
  }
  
  .bundle-card.is-selected {
    border-width: 3px;
    box-shadow: none;
  }
  
  .bundle-summary-card {
    border: 2px solid var(--color-text-primary);
  }
  
  .bundle-progress-bar {
    border: 1px solid var(--color-border);
  }
}

/* ============================================
 * END BUNDLE BUILDER
 * ============================================ */

/* ============================================
 * 9. UPSELLS SECTION
 * ============================================
 * 
 * Add-on products and upsells for the bundle builder.
 * Designed to feel playful and helpful, not pushy.
 * 
 * Components:
 * - .upsells-section — Container section
 * - .upsell-card — Individual upsell item
 * - .upsell-featured — Large featured upsell (Whiskey Smoker)
 * - .upsell-add-on — Smaller add-on item (sauces, sides)
 * 
 * @since Phase 5.3
 */

/* -----------------------------------------
 * 9.1 Upsells Section Layout
 * ----------------------------------------- */

.upsells-section {
  padding: var(--space-12) var(--space-4);
  background: linear-gradient(
    to bottom,
    var(--color-surface-cream) 0%,
    var(--color-surface-pure) 100%
  );
  border-top: 1px solid var(--color-border);
}

.upsells-section-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.upsells-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.upsells-title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.upsells-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 500px;
  margin: 0 auto;
}

/* -----------------------------------------
 * 9.2 Featured Upsell Card (Whiskey Smoker)
 * ----------------------------------------- */

.upsell-featured {
  position: relative;
  background: var(--color-surface-pure);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: var(--space-8);
  transition: 
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}

@media (min-width: 768px) {
  .upsell-featured {
    grid-template-columns: 1.2fr 1fr;
  }
}

.upsell-featured:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* Feature badge */
.upsell-featured-badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  background: linear-gradient(135deg, #8b5a2b 0%, #cd853f 100%);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  z-index: 2;
  box-shadow: 0 2px 8px rgba(139, 90, 43, 0.3);
}

/* Image side */
.upsell-featured-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.upsell-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.upsell-featured:hover .upsell-featured-image img {
  transform: scale(1.05);
}

/* Smoke overlay effect */
.upsell-featured-smoke {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.9) 0%,
    transparent 100%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.upsell-featured:hover .upsell-featured-smoke {
  opacity: 1;
}

/* Animated smoke wisps */
.upsell-smoke-wisp {
  position: absolute;
  bottom: 0;
  width: 60px;
  height: 100px;
  background: radial-gradient(ellipse at center, rgba(200, 200, 200, 0.5) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  animation-fill-mode: forwards;
}

.upsell-featured:hover .upsell-smoke-wisp {
  animation: upsellSmokeRise 3s ease-out infinite;
}

.upsell-smoke-wisp:nth-child(1) { left: 20%; animation-delay: 0s; }
.upsell-smoke-wisp:nth-child(2) { left: 45%; animation-delay: 0.4s; }
.upsell-smoke-wisp:nth-child(3) { left: 70%; animation-delay: 0.8s; }

@keyframes upsellSmokeRise {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.8);
  }
  20% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: translateY(-120px) scale(1.5);
  }
}

/* Content side */
.upsell-featured-content {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.upsell-featured-category {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-copper);
  margin-bottom: var(--space-2);
}

.upsell-featured-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
  line-height: var(--leading-tight);
}

@media (min-width: 768px) {
  .upsell-featured-title {
    font-size: var(--text-3xl);
  }
}

.upsell-featured-tagline {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
}

.upsell-featured-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

/* Price display */
.upsell-featured-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.upsell-featured-price-current {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}

.upsell-featured-price-original {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--color-text-tertiary);
  text-decoration: line-through;
}

/* Add button */
.upsell-featured-btn {
  align-self: flex-start;
}

/* Added state */
.upsell-featured.is-added {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-success-dim);
}

.upsell-featured.is-added .upsell-featured-btn {
  background-color: var(--color-success);
  border-color: var(--color-success);
}

.upsell-featured.is-added .upsell-featured-btn:hover {
  background-color: var(--color-success-hover, #15803d);
}

/* -----------------------------------------
 * 9.3 Add-on Items Grid
 * ----------------------------------------- */

.upsell-addons-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  text-align: center;
}

.upsell-addons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .upsell-addons-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .upsell-addons-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Individual add-on card */
.upsell-addon {
  position: relative;
  background: var(--color-surface-pure);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: 
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
  cursor: pointer;
}

.upsell-addon:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-dim);
}

/* Image */
.upsell-addon-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-surface-cream);
}

.upsell-addon-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.upsell-addon:hover .upsell-addon-image img {
  transform: scale(1.08);
}

/* Content */
.upsell-addon-content {
  padding: var(--space-3);
  text-align: center;
}

.upsell-addon-name {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
  line-height: var(--leading-snug);
  
  /* 2-line truncation */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.upsell-addon-price {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}

/* Quick add button */
.upsell-addon-add {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: 
    opacity var(--transition-fast),
    transform var(--transition-fast),
    background-color var(--transition-fast);
  z-index: 2;
}

.upsell-addon:hover .upsell-addon-add {
  opacity: 1;
  transform: scale(1);
}

.upsell-addon-add:hover {
  background: var(--color-primary-hover);
  transform: scale(1.1);
}

/* Added state */
.upsell-addon.is-added {
  border-color: var(--color-success);
}

.upsell-addon.is-added .upsell-addon-add {
  opacity: 1;
  background: var(--color-success);
}

.upsell-addon.is-added .upsell-addon-add::before {
  content: '\f00c'; /* checkmark */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}

/* -----------------------------------------
 * 9.4 Playful Copy Styles
 * ----------------------------------------- */

/* Emphasis for playful taglines */
.upsell-playful {
  font-style: italic;
  color: var(--color-copper);
}

/* Fire emoji replacement (for accessibility) */
.upsell-fire-icon {
  display: inline-block;
  color: var(--color-primary);
  margin-inline: var(--space-1);
}

/* Wink emoji replacement */
.upsell-wink-icon {
  display: inline-block;
  margin-left: var(--space-1);
}

/* -----------------------------------------
 * 9.5 Impact Preview (Price Change)
 * ----------------------------------------- */

.upsell-impact {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-cream);
  border-radius: var(--radius-md);
  opacity: 0;
  transform: translateY(-8px);
  transition: 
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

.upsell-featured:hover .upsell-impact,
.upsell-addon:hover .upsell-impact {
  opacity: 1;
  transform: translateY(0);
}

.upsell-impact-icon {
  color: var(--color-sage);
}

.upsell-impact-text strong {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

/* -----------------------------------------
 * 9.6 Gift Option
 * ----------------------------------------- */

.upsell-gift {
  position: relative;
  background: linear-gradient(
    135deg,
    var(--color-surface-cream) 0%,
    var(--color-surface-warm) 100%
  );
  border: 2px dashed var(--color-sage);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: center;
  margin-top: var(--space-6);
  transition: 
    border-color var(--transition-fast),
    transform var(--transition-fast);
  cursor: pointer;
}

.upsell-gift:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.upsell-gift-icon {
  font-size: var(--text-3xl);
  color: var(--color-sage);
  margin-bottom: var(--space-3);
  display: block;
}

.upsell-gift:hover .upsell-gift-icon {
  color: var(--color-primary);
  animation: giftWiggle 0.5s ease-in-out;
}

@keyframes giftWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

.upsell-gift-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.upsell-gift-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.upsell-gift-price {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: var(--weight-bold);
  margin-top: var(--space-3);
}

.upsell-gift-checkbox {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-pure);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.upsell-gift.is-added .upsell-gift-checkbox {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* -----------------------------------------
 * 9.7 Reduced Motion Support
 * ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .upsell-featured,
  .upsell-addon,
  .upsell-gift,
  .upsell-featured-image img,
  .upsell-addon-image img,
  .upsell-addon-add,
  .upsell-impact {
    transition: none;
    animation: none;
  }
  
  .upsell-smoke-wisp {
    display: none;
  }
  
  .upsell-featured-smoke {
    display: none;
  }
  
  .upsell-addon:hover .upsell-addon-add {
    opacity: 1;
    transform: none;
  }
}

/* -----------------------------------------
 * 9.8 High Contrast Support
 * ----------------------------------------- */

@media (prefers-contrast: more) {
  .upsell-featured,
  .upsell-addon,
  .upsell-gift {
    border-width: 3px;
    border-style: solid;
  }
  
  .upsell-featured.is-added,
  .upsell-addon.is-added,
  .upsell-gift.is-added {
    border-width: 3px;
  }
}

/* ============================================
 * END UPSELLS SECTION
 * ============================================ */


/* ============================================
 * 10. ACCESSIBILITY UTILITIES
 * ============================================
 * 
 * Accessibility-focused components and utilities.
 * These support keyboard navigation, screen readers,
 * and other assistive technologies.
 */

/* -----------------------------------------
 * 10.1 Skip to Content Link
 * ----------------------------------------- */

.skip-to-content {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  z-index: var(--z-overlay, 300);
  
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
  
  transition: transform var(--transition-fast);
}

.skip-to-content:focus,
.skip-to-content:focus-visible {
  transform: translateX(-50%) translateY(0);
  outline: 3px solid var(--color-primary-glow);
  outline-offset: 2px;
}

/* -----------------------------------------
 * 10.2 Screen Reader Only (visually hidden)
 * ----------------------------------------- */

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

/* Makes element focusable when visually hidden */
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* -----------------------------------------
 * 10.3 Focus Ring Utilities
 * ----------------------------------------- */

/* Default focus ring for keyboard navigation */
.focus-ring:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Strong focus ring for important interactive elements */
.focus-ring-strong:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--color-primary-glow);
}

/* -----------------------------------------
 * 10.4 Touch Target Sizing
 * ----------------------------------------- */

/* Ensure minimum 44x44px touch target for mobile */
.touch-target {
  min-width: 44px;
  min-height: 44px;
}

/* Expand touch area without changing visual size */
.touch-target-expand {
  position: relative;
}

.touch-target-expand::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
}

/* -----------------------------------------
 * 10.5 Reduced Motion Utilities
 * ----------------------------------------- */

/* Remove all animations for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .motion-safe {
    animation: none !important;
    transition: none !important;
  }
}

/* Only animate when motion is not reduced */
@media (prefers-reduced-motion: no-preference) {
  .motion-reduce {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================
 * END ACCESSIBILITY UTILITIES SECTION
 * ============================================ */