/*
Theme Name: Mediterranean Table
Theme URI: https://themediterraneanrecipe.com
Author: The Mediterranean Recipe
Description: A professional, SEO-optimized WordPress theme built specifically for Mediterranean recipe websites. Includes recipe schema markup, Jump-to-Recipe, nutrition facts, print functionality, star ratings, and all features found on top-ranked food blogs.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mediterranean-table
Tags: food, recipe, blog, mediterranean, custom-header, custom-footer, full-width-template, threaded-comments, featured-images, sticky-post, microformats, rtl-language-support, translation-ready
*/

/* =============================================
   1. CSS CUSTOM PROPERTIES
   ============================================= */
:root {
  /* Brand Colors */
  --clr-green-900: #1a3d1c;
  --clr-green-800: #2c5f2e;
  --clr-green-700: #3a7d44;
  --clr-green-600: #4a9455;
  --clr-green-100: #edf5ee;
  --clr-terra-700: #a04f22;
  --clr-terra-600: #c0622f;
  --clr-terra-500: #d4733f;
  --clr-terra-100: #fdf3ed;
  --clr-gold: #c9a84c;
  --clr-cream-900: #d4ccb8;
  --clr-cream-300: #f5f0e8;
  --clr-cream-100: #faf8f4;
  --clr-white: #ffffff;
  --clr-text-900: #1a1a1a;
  --clr-text-700: #3d3d3d;
  --clr-text-500: #666666;
  --clr-text-300: #999999;
  --clr-border: #e2ddd4;

  /* Typography */
  --font-serif: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-sans: 'Lato', 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Sizes */
  --container: 1200px;
  --container-narrow: 860px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --shadow-hover: 0 12px 40px rgba(0,0,0,0.15);

  /* Transitions */
  --transition: 0.2s ease;
}

/* =============================================
   2. RESET & BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background-color: var(--clr-cream-100);
  color: var(--clr-text-700);
  line-height: 1.7;
  font-size: 1rem;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--clr-terra-600); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--clr-terra-700); }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-serif); line-height: 1.25; color: var(--clr-text-900); }
ul, ol { padding-left: 1.5rem; }
table { width: 100%; border-collapse: collapse; }
input, textarea, select, button { font-family: inherit; font-size: inherit; }
:focus-visible { outline: 2px solid var(--clr-green-700); outline-offset: 2px; }

/* =============================================
   3. LAYOUT UTILITIES
   ============================================= */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-5); }
.site-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; }
.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; }
.skip-link { position: absolute; top: -60px; left: 0; background: var(--clr-green-800); color: var(--clr-white); padding: var(--space-3) var(--space-4); z-index: 9999; transition: top 0.1s; }
.skip-link:focus { top: 0; }

/* =============================================
   4. HEADER
   ============================================= */
.site-header {
  background-color: var(--clr-green-800);
  position: sticky;
  top: 0;
  z-index: 500;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-5);
  max-width: var(--container);
  margin: 0 auto;
}

/* Logo */
.site-logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.site-logo img { height: 48px; width: 48px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.3); }
.site-logo-text {}
.site-logo-name {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--clr-white);
  line-height: 1.2;
  display: block;
}
.site-logo-tagline {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.65);
  font-style: italic;
  display: block;
}

/* Primary Nav */
.primary-nav { display: flex; justify-content: center; }
.nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; }
.nav-list > li { position: relative; }
.nav-list > li > a {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: rgba(255,255,255,0.9);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: var(--space-4) var(--space-4);
  transition: color var(--transition), background-color var(--transition);
}
.nav-list > li > a:hover,
.nav-list > li.current-menu-item > a,
.nav-list > li.current-menu-ancestor > a {
  color: var(--clr-white);
  background-color: rgba(255,255,255,0.12);
}
.nav-list > li > a .nav-arrow { font-size: 0.65rem; opacity: 0.7; }

/* Dropdown */
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--clr-green-900);
  min-width: 220px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 600;
  list-style: none;
  padding: var(--space-2) 0;
  margin: 0;
}
.nav-list > li:hover .nav-dropdown { display: block; }
.nav-dropdown li a {
  display: block;
  color: rgba(255,255,255,0.85);
  font-size: 0.85rem;
  padding: var(--space-3) var(--space-5);
  transition: background-color var(--transition);
  border-left: 3px solid transparent;
}
.nav-dropdown li a:hover {
  background-color: rgba(255,255,255,0.1);
  border-left-color: var(--clr-terra-500);
  color: var(--clr-white);
}

/* Header Actions */
.header-actions { display: flex; align-items: center; gap: var(--space-3); }
.header-search-btn, .mobile-menu-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition);
  font-size: 1.1rem;
}
.header-search-btn:hover, .mobile-menu-btn:hover {
  background-color: rgba(255,255,255,0.15);
  color: var(--clr-white);
}
.mobile-menu-btn { display: none; font-size: 1.4rem; }

/* Search Bar */
.header-search { display: none; }
.header-search.open {
  display: block;
  background: var(--clr-green-900);
  padding: var(--space-3) var(--space-5);
}
.header-search-form { max-width: var(--container); margin: 0 auto; display: flex; gap: var(--space-2); }
.header-search-form input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  color: var(--clr-white);
  border-radius: var(--radius-sm);
}
.header-search-form input::placeholder { color: rgba(255,255,255,0.5); }
.header-search-form button {
  background: var(--clr-terra-600);
  color: var(--clr-white);
  border: none;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
}

/* =============================================
   5. BREADCRUMBS
   ============================================= */
.breadcrumbs-bar {
  background: var(--clr-cream-300);
  border-bottom: 1px solid var(--clr-border);
  padding: var(--space-2) 0;
}
.breadcrumbs-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-5);
  font-size: 0.8rem;
  color: var(--clr-text-300);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.breadcrumbs-inner a { color: var(--clr-text-500); }
.breadcrumbs-inner a:hover { color: var(--clr-terra-600); }
.breadcrumbs-inner .sep { color: var(--clr-text-300); }
.breadcrumbs-inner .current { color: var(--clr-text-700); font-weight: 500; }

/* =============================================
   6. HOMEPAGE - HERO
   ============================================= */
.hero {
  position: relative;
  background-color: var(--clr-green-800);
  background-image: linear-gradient(135deg, var(--clr-green-900) 0%, var(--clr-green-700) 100%);
  overflow: hidden;
  padding: var(--space-20) 0;
  text-align: center;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-content { position: relative; z-index: 1; }
.hero-eyebrow {
  display: inline-block;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.2);
  margin-bottom: var(--space-5);
}
.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--clr-white);
  margin-bottom: var(--space-5);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.hero-sub {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.8);
  font-style: italic;
  max-width: 580px;
  margin: 0 auto var(--space-8);
}
.hero-cta-group { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-10); }

/* Category Pills inside hero */
.hero-categories { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.hero-category-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  color: rgba(255,255,255,0.9);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  transition: background-color var(--transition), border-color var(--transition);
  min-width: 90px;
}
.hero-category-pill:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.4); color: var(--clr-white); }
.hero-category-pill .cat-icon { font-size: 1.5rem; }

/* =============================================
   7. BUTTONS
   ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
  line-height: 1;
  text-decoration: none;
}
.btn-primary { background: var(--clr-terra-600); color: var(--clr-white); border-color: var(--clr-terra-600); }
.btn-primary:hover { background: var(--clr-terra-700); border-color: var(--clr-terra-700); color: var(--clr-white); }
.btn-secondary { background: transparent; color: var(--clr-white); border-color: rgba(255,255,255,0.6); }
.btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: var(--clr-white); color: var(--clr-white); }
.btn-outline { background: transparent; color: var(--clr-green-800); border-color: var(--clr-green-800); }
.btn-outline:hover { background: var(--clr-green-800); color: var(--clr-white); }
.btn-sm { padding: 8px 18px; font-size: 0.78rem; }
.btn-lg { padding: 16px 36px; font-size: 1rem; }

/* =============================================
   8. SECTION HEADERS
   ============================================= */
.section-header { text-align: center; margin-bottom: var(--space-10); }
.section-header .eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--clr-terra-600);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.section-header h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: var(--space-3); }
.section-header p { color: var(--clr-text-500); max-width: 560px; margin: 0 auto; }
.divider-leaf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-4) auto 0;
}
.divider-leaf::before, .divider-leaf::after {
  content: '';
  width: 40px;
  height: 2px;
  background: var(--clr-terra-600);
  border-radius: 2px;
}
.divider-leaf span { color: var(--clr-terra-600); font-size: 1rem; }

/* =============================================
   9. RECIPE CARDS
   ============================================= */
.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--space-6);
}
.recipe-grid-4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.recipe-card {
  background: var(--clr-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.recipe-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }

.recipe-card-image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--clr-cream-300);
}
.recipe-card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.recipe-card:hover .recipe-card-image-wrap img { transform: scale(1.05); }

.recipe-card-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: var(--clr-terra-600);
  color: var(--clr-white);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-weight: 700;
}
.recipe-card-save {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: rgba(255,255,255,0.9);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--clr-terra-600);
  font-size: 0.9rem;
  transition: background var(--transition), transform var(--transition);
}
.recipe-card-save:hover { background: var(--clr-white); transform: scale(1.1); }

.recipe-card-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: linear-gradient(135deg, var(--clr-cream-300), var(--clr-cream-900));
}

.recipe-card-body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.recipe-card-category {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clr-terra-600);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.recipe-card-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.35;
  margin-bottom: var(--space-3);
}
.recipe-card-title a { color: var(--clr-text-900); }
.recipe-card-title a:hover { color: var(--clr-terra-600); }
.recipe-card-excerpt {
  font-size: 0.875rem;
  color: var(--clr-text-500);
  line-height: 1.6;
  margin-bottom: var(--space-4);
  flex: 1;
}

.recipe-card-meta {
  display: flex;
  gap: var(--space-4);
  font-size: 0.78rem;
  color: var(--clr-text-300);
  padding-top: var(--space-4);
  border-top: 1px solid var(--clr-border);
}
.recipe-card-meta-item { display: flex; align-items: center; gap: var(--space-1); }
.recipe-card-stars { display: flex; gap: 1px; }
.recipe-card-stars .star { color: var(--clr-gold); font-size: 0.75rem; }
.recipe-card-stars .star.empty { color: var(--clr-border); }

.recipe-card-footer { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--clr-border); background: var(--clr-cream-100); }
.read-more-link {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--clr-terra-600);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.read-more-link:hover { color: var(--clr-terra-700); }
.read-more-link .arrow { transition: transform var(--transition); }
.read-more-link:hover .arrow { transform: translateX(3px); }

/* =============================================
   10. HOMEPAGE SECTIONS
   ============================================= */
.section-latest { padding: var(--space-16) 0; }
.section-featured { padding: var(--space-16) 0; background: var(--clr-white); }
.section-categories { padding: var(--space-16) 0; background: var(--clr-green-800); }
.section-med-diet { padding: var(--space-16) 0; background: var(--clr-cream-300); }
.section-newsletter { padding: var(--space-16) 0; background: var(--clr-terra-100); }
.section-about { padding: var(--space-16) 0; background: var(--clr-white); }

/* Category Browse Cards */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-4); }
.cat-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  color: rgba(255,255,255,0.9);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
  cursor: pointer;
}
.cat-card:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); transform: translateY(-3px); color: var(--clr-white); }
.cat-card-icon { font-size: 2rem; margin-bottom: var(--space-3); display: block; }
.cat-card-name { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; }
.cat-card-count { font-size: 0.75rem; color: rgba(255,255,255,0.6); margin-top: var(--space-1); }
.section-categories .section-header h2, .section-categories .section-header p { color: var(--clr-white); }
.section-categories .section-header .eyebrow { color: rgba(255,255,255,0.7); }

/* Mediterranean Diet Strip */
.med-diet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.med-diet-text h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--space-5); }
.med-diet-text p { color: var(--clr-text-500); margin-bottom: var(--space-4); }
.med-diet-pillars { list-style: none; padding: 0; margin: var(--space-6) 0; }
.med-diet-pillars li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--clr-border);
  font-size: 0.9rem;
}
.med-diet-pillars li:last-child { border-bottom: none; }
.med-diet-pillars li .icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.med-diet-pillars li strong { display: block; color: var(--clr-text-900); margin-bottom: 2px; }
.med-diet-image img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; }

/* Newsletter */
.newsletter-wrap { max-width: 560px; margin: 0 auto; text-align: center; }
.newsletter-wrap h2 { font-size: 1.8rem; color: var(--clr-terra-700); margin-bottom: var(--space-3); }
.newsletter-wrap p { color: var(--clr-text-500); margin-bottom: var(--space-6); }
.newsletter-form { display: flex; gap: var(--space-2); }
.newsletter-form input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--clr-border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  transition: border-color var(--transition);
  background: var(--clr-white);
}
.newsletter-form input:focus { outline: none; border-color: var(--clr-green-700); }
.newsletter-form button { background: var(--clr-green-800); color: var(--clr-white); border: none; padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm); font-weight: 700; cursor: pointer; white-space: nowrap; }
.newsletter-form button:hover { background: var(--clr-green-700); }
.newsletter-disclaimer { font-size: 0.75rem; color: var(--clr-text-300); margin-top: var(--space-3); }

/* About Strip */
.about-inner { display: grid; grid-template-columns: auto 1fr; gap: var(--space-12); align-items: center; }
.about-photo img { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; border: 5px solid var(--clr-cream-300); box-shadow: var(--shadow-md); }
.about-text .eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--clr-terra-600); font-weight: 700; margin-bottom: var(--space-3); display: block; }
.about-text h2 { font-size: 1.8rem; margin-bottom: var(--space-4); }
.about-text p { color: var(--clr-text-500); margin-bottom: var(--space-4); }
.about-credentials { display: flex; gap: var(--space-6); flex-wrap: wrap; margin: var(--space-5) 0; }
.about-cred { display: flex; align-items: center; gap: var(--space-2); font-size: 0.85rem; color: var(--clr-text-500); }
.about-cred .icon { font-size: 1rem; }

/* =============================================
   11. FEATURED / HERO RECIPE
   ============================================= */
.featured-recipe-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--clr-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.featured-recipe-image { position: relative; min-height: 400px; }
.featured-recipe-image img { width: 100%; height: 100%; object-fit: cover; }
.featured-recipe-body { padding: var(--space-10) var(--space-8); display: flex; flex-direction: column; justify-content: center; }
.featured-label {
  display: inline-block;
  background: var(--clr-terra-100);
  color: var(--clr-terra-600);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  font-weight: 700;
  margin-bottom: var(--space-4);
}
.featured-recipe-body h2 { font-size: 2rem; margin-bottom: var(--space-4); }
.featured-recipe-body p { color: var(--clr-text-500); margin-bottom: var(--space-6); }
.featured-recipe-quick-facts { display: flex; gap: var(--space-6); margin-bottom: var(--space-6); }
.qf-item { text-align: center; }
.qf-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--clr-text-300); }
.qf-value { font-family: var(--font-serif); font-size: 1.2rem; color: var(--clr-green-800); font-weight: 700; }

/* =============================================
   12. SINGLE RECIPE POST
   ============================================= */
.recipe-article { padding: var(--space-10) 0; }

/* Jump to Recipe bar */
.jump-bar {
  background: var(--clr-green-100);
  border: 1px solid #c8deca;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.jump-bar-text { font-size: 0.9rem; color: var(--clr-text-500); }
.jump-bar-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.jump-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
}
.jump-btn-primary { background: var(--clr-green-800); color: var(--clr-white); }
.jump-btn-primary:hover { background: var(--clr-green-700); color: var(--clr-white); }
.jump-btn-outline { background: var(--clr-white); color: var(--clr-text-700); border: 1px solid var(--clr-border); }
.jump-btn-outline:hover { border-color: var(--clr-green-700); color: var(--clr-green-800); }

/* Recipe Post Header */
.recipe-post-category { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--clr-terra-600); font-weight: 700; margin-bottom: var(--space-3); }
.recipe-post-title { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: var(--space-4); }
.recipe-post-description { font-size: 1.1rem; color: var(--clr-text-500); font-style: italic; margin-bottom: var(--space-5); line-height: 1.7; }

.recipe-post-meta-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: var(--space-6);
  font-size: 0.85rem;
  color: var(--clr-text-500);
}
.recipe-author { display: flex; align-items: center; gap: var(--space-3); }
.recipe-author img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.recipe-author-name { color: var(--clr-text-900); font-weight: 600; }
.recipe-stars { display: flex; align-items: center; gap: var(--space-2); }
.recipe-stars .stars { color: var(--clr-gold); letter-spacing: 1px; }
.recipe-stars .count { font-size: 0.8rem; color: var(--clr-text-300); }

/* Social Share */
.social-share { display: flex; align-items: center; gap: var(--space-2); }
.social-share-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.share-btn {
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 0.75rem;
  color: var(--clr-white); font-weight: 700; transition: transform var(--transition);
  text-decoration: none;
}
.share-btn:hover { transform: scale(1.1); color: var(--clr-white); }
.share-btn.pinterest { background: #E60023; }
.share-btn.facebook { background: #1877F2; }
.share-btn.twitter { background: #000000; }
.share-btn.email { background: var(--clr-text-500); }

/* Hero Image */
.recipe-hero-image { position: relative; border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-8); }
.recipe-hero-image img { width: 100%; max-height: 520px; object-fit: cover; }

/* Recipe Quick Info Bar */
.recipe-info-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--clr-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-border);
  overflow: hidden;
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-sm);
}
.recipe-info-item {
  text-align: center;
  padding: var(--space-5) var(--space-3);
  border-right: 1px solid var(--clr-border);
}
.recipe-info-item:last-child { border-right: none; }
.recipe-info-icon { font-size: 1.3rem; margin-bottom: var(--space-1); }
.recipe-info-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clr-text-300);
  margin-bottom: var(--space-1);
}
.recipe-info-value { font-family: var(--font-serif); font-size: 1.1rem; color: var(--clr-green-800); font-weight: 700; }

/* Recipe Content Layout */
.recipe-content-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-10);
  align-items: flex-start;
}

/* Ingredients & Instructions Card */
.recipe-card-box {
  background: var(--clr-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-border);
  padding: var(--space-8);
  margin-bottom: var(--space-6);
  scroll-margin-top: 80px;
}
.recipe-card-box h2 {
  font-size: 1.5rem;
  color: var(--clr-green-800);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--clr-cream-300);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.recipe-card-box h2 .section-icon { font-size: 1.2rem; }

/* Ingredients */
.ingredients-list { list-style: none; padding: 0; }
.ingredients-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--clr-cream-300);
  font-size: 0.95rem;
  line-height: 1.5;
}
.ingredients-list li:last-child { border-bottom: none; }
.ingredient-checkbox {
  width: 18px; height: 18px; border: 2px solid var(--clr-border);
  border-radius: 3px; flex-shrink: 0; margin-top: 2px; cursor: pointer;
  transition: all var(--transition); background: var(--clr-white);
  appearance: none; -webkit-appearance: none;
}
.ingredient-checkbox:checked {
  background: var(--clr-green-700);
  border-color: var(--clr-green-700);
}
.ingredient-checkbox:checked + span { text-decoration: line-through; color: var(--clr-text-300); }

/* Instructions */
.instructions-list { list-style: none; padding: 0; counter-reset: steps; }
.instructions-list li {
  counter-increment: steps;
  display: flex;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--clr-cream-300);
}
.instructions-list li:last-child { border-bottom: none; }
.step-number {
  min-width: 36px; height: 36px;
  background: var(--clr-green-800);
  color: var(--clr-white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700;
  flex-shrink: 0;
}
.step-content { font-size: 0.95rem; line-height: 1.7; padding-top: var(--space-1); }
.step-content strong { display: block; margin-bottom: var(--space-2); color: var(--clr-text-900); }

/* Servings Adjuster */
.servings-control {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--clr-cream-100);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-5);
  width: fit-content;
}
.servings-label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; }
.servings-btn {
  width: 28px; height: 28px; border: 1px solid var(--clr-border);
  border-radius: 50%; background: var(--clr-white); cursor: pointer;
  font-size: 1rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  color: var(--clr-green-800); transition: all var(--transition);
}
.servings-btn:hover { background: var(--clr-green-800); color: var(--clr-white); border-color: var(--clr-green-800); }
.servings-count { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 700; color: var(--clr-green-800); min-width: 24px; text-align: center; }

/* Nutrition Facts */
.nutrition-box {
  background: var(--clr-white);
  border: 2px solid var(--clr-text-900);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}
.nutrition-header { border-bottom: 8px solid var(--clr-text-900); margin-bottom: var(--space-3); padding-bottom: var(--space-3); }
.nutrition-header h3 { font-size: 1.8rem; font-family: var(--font-serif); }
.nutrition-serving { font-size: 0.85rem; color: var(--clr-text-500); }
.nutrition-calories { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 4px solid var(--clr-text-900); padding-bottom: var(--space-3); margin-bottom: var(--space-3); }
.nutrition-calories-label { font-size: 0.85rem; font-weight: 700; }
.nutrition-calories-value { font-size: 2rem; font-weight: 900; font-family: var(--font-serif); }
.nutrition-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 0.8rem; border-bottom: 1px solid var(--clr-border); }
.nutrition-row.bold { font-weight: 700; }
.nutrition-row.indent { padding-left: var(--space-4); }
.nutrition-disclaimer { font-size: 0.7rem; color: var(--clr-text-300); margin-top: var(--space-3); }

/* Notes Box */
.recipe-notes {
  background: var(--clr-terra-100);
  border-left: 4px solid var(--clr-terra-600);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
}
.recipe-notes h3 { font-size: 1rem; color: var(--clr-terra-700); margin-bottom: var(--space-3); text-transform: uppercase; letter-spacing: 0.08em; }
.recipe-notes ul { padding-left: var(--space-5); }
.recipe-notes ul li { font-size: 0.9rem; margin-bottom: var(--space-2); color: var(--clr-text-700); }

/* Tips Box */
.pro-tips-box {
  background: var(--clr-green-100);
  border: 1px solid #c8deca;
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
}
.pro-tips-box h3 { color: var(--clr-green-800); margin-bottom: var(--space-3); font-size: 1rem; }

/* Recipe Print Card */
@media print {
  .site-header, .breadcrumbs-bar, .jump-bar, .sidebar, .related-recipes, .site-footer, .social-share, .header-actions, nav { display: none !important; }
  .recipe-content-layout { grid-template-columns: 1fr; }
  .recipe-card-box { border: 1px solid #ccc; break-inside: avoid; }
}

/* Sidebar */
.sidebar { position: sticky; top: 80px; }
.sidebar-widget {
  background: var(--clr-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-border);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.sidebar-widget-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clr-text-900);
  font-weight: 700;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--clr-terra-600);
}

/* Related Recipes */
.related-section { padding: var(--space-12) 0; background: var(--clr-cream-300); border-top: 1px solid var(--clr-border); }

/* Author Box */
.author-box {
  background: var(--clr-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-border);
  padding: var(--space-6);
  margin: var(--space-8) 0;
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
}
.author-box-photo img { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid var(--clr-cream-300); }
.author-box-info .name { font-family: var(--font-serif); font-size: 1.2rem; margin-bottom: var(--space-1); }
.author-box-info .credentials { font-size: 0.8rem; color: var(--clr-terra-600); font-weight: 600; margin-bottom: var(--space-3); }
.author-box-info .bio { font-size: 0.875rem; color: var(--clr-text-500); }

/* Comments */
.comments-section { padding: var(--space-10) 0; }
.comment { display: flex; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: 1px solid var(--clr-border); }
.comment-avatar img { width: 44px; height: 44px; border-radius: 50%; }
.comment-meta { font-size: 0.8rem; color: var(--clr-text-300); margin-bottom: var(--space-2); }
.comment-meta .author { font-weight: 700; color: var(--clr-text-900); margin-right: var(--space-3); }
.comment-content p { font-size: 0.9rem; }
.comment-reply { font-size: 0.78rem; color: var(--clr-terra-600); font-weight: 600; margin-top: var(--space-2); cursor: pointer; background: none; border: none; padding: 0; }

/* Star Rating Input */
.rate-form { margin-top: var(--space-6); padding: var(--space-5); background: var(--clr-cream-100); border-radius: var(--radius-md); }
.rate-form h3 { font-size: 1rem; margin-bottom: var(--space-4); }
.star-rating-input { display: flex; gap: var(--space-1); flex-direction: row-reverse; justify-content: flex-end; margin-bottom: var(--space-3); }
.star-rating-input input { display: none; }
.star-rating-input label { font-size: 1.5rem; color: var(--clr-border); cursor: pointer; transition: color var(--transition); }
.star-rating-input input:checked ~ label, .star-rating-input label:hover, .star-rating-input label:hover ~ label { color: var(--clr-gold); }

/* =============================================
   13. ARCHIVE / INDEX PAGES
   ============================================= */
.archive-header {
  background: var(--clr-green-800);
  padding: var(--space-12) 0;
  text-align: center;
  color: var(--clr-white);
}
.archive-header h1 { color: var(--clr-white); font-size: clamp(1.5rem, 3vw, 2.2rem); }
.archive-header p { color: rgba(255,255,255,0.75); margin-top: var(--space-3); }

.filter-bar {
  background: var(--clr-white);
  border-bottom: 1px solid var(--clr-border);
  padding: var(--space-4) 0;
  position: sticky;
  top: 68px;
  z-index: 100;
}
.filter-inner { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.filter-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; color: var(--clr-text-300); letter-spacing: 0.07em; }
.filter-btn {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--clr-border);
  font-size: 0.8rem;
  background: var(--clr-white);
  color: var(--clr-text-700);
  cursor: pointer;
  transition: all var(--transition);
  font-weight: 500;
}
.filter-btn:hover, .filter-btn.active { background: var(--clr-green-800); color: var(--clr-white); border-color: var(--clr-green-800); }

.archive-grid-wrap { padding: var(--space-10) 0; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: var(--space-2); padding: var(--space-10) 0; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 var(--space-3);
  border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
  font-size: 0.875rem; font-weight: 600; color: var(--clr-text-700);
  transition: all var(--transition); background: var(--clr-white);
}
.pagination a:hover, .pagination span.current { background: var(--clr-green-800); border-color: var(--clr-green-800); color: var(--clr-white); }

/* =============================================
   14. GENERIC PAGE
   ============================================= */
.page-wrap { padding: var(--space-12) 0; }
.page-header { margin-bottom: var(--space-8); padding-bottom: var(--space-6); border-bottom: 2px solid var(--clr-border); }
.page-header h1 { font-size: 2.2rem; color: var(--clr-green-800); }
.entry-content h2 { font-size: 1.5rem; color: var(--clr-green-800); margin: var(--space-8) 0 var(--space-4); }
.entry-content h3 { font-size: 1.2rem; color: var(--clr-terra-600); margin: var(--space-6) 0 var(--space-3); }
.entry-content p { margin-bottom: var(--space-4); line-height: 1.8; }
.entry-content ul, .entry-content ol { margin-bottom: var(--space-4); }
.entry-content li { margin-bottom: var(--space-2); }
.entry-content blockquote {
  border-left: 4px solid var(--clr-terra-600);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-6) 0;
  background: var(--clr-terra-100);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--clr-text-700);
}

/* =============================================
   15. CONTACT PAGE
   ============================================= */
.contact-grid { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-10); }
.contact-form-wrap h2 { font-size: 1.6rem; color: var(--clr-green-800); margin-bottom: var(--space-5); }
.form-group { margin-bottom: var(--space-5); }
.form-group label {
  display: block; font-weight: 600; font-size: 0.875rem;
  color: var(--clr-text-900); margin-bottom: var(--space-2);
}
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--clr-border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  color: var(--clr-text-900);
  background: var(--clr-white);
  transition: border-color var(--transition);
}
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--clr-green-700); }
.form-group textarea { min-height: 160px; resize: vertical; }
.form-submit { background: var(--clr-green-800); color: var(--clr-white); border: none; padding: var(--space-4) var(--space-8); border-radius: var(--radius-sm); font-weight: 700; font-size: 0.95rem; cursor: pointer; letter-spacing: 0.05em; transition: background var(--transition); }
.form-submit:hover { background: var(--clr-green-700); }
.contact-info-card { background: var(--clr-green-800); border-radius: var(--radius-md); padding: var(--space-8); color: var(--clr-white); }
.contact-info-card h3 { color: var(--clr-white); margin-bottom: var(--space-5); font-size: 1.2rem; }
.contact-info-item { display: flex; gap: var(--space-3); margin-bottom: var(--space-5); }
.contact-info-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.contact-info-text { font-size: 0.875rem; color: rgba(255,255,255,0.8); }
.contact-info-text strong { display: block; color: var(--clr-white); margin-bottom: 2px; }
.contact-social { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
.contact-social a {
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85);
  width: 40px; height: 40px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 1rem;
  transition: background var(--transition);
}
.contact-social a:hover { background: rgba(255,255,255,0.25); color: var(--clr-white); }

/* =============================================
   16. FOOTER
   ============================================= */
.site-footer { background: var(--clr-green-900); color: rgba(255,255,255,0.75); margin-top: auto; }
.footer-main { padding: var(--space-16) 0 var(--space-10); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-10); }
.footer-brand .footer-logo { font-family: var(--font-serif); font-size: 1.4rem; color: var(--clr-white); margin-bottom: var(--space-4); display: block; }
.footer-brand p { font-size: 0.875rem; line-height: 1.7; margin-bottom: var(--space-5); }
.footer-social { display: flex; gap: var(--space-3); }
.footer-social a {
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.75);
  width: 36px; height: 36px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 0.85rem;
  transition: background var(--transition), color var(--transition);
  text-decoration: none;
}
.footer-social a:hover { background: var(--clr-terra-600); color: var(--clr-white); }
.footer-col h4 {
  font-family: var(--font-sans); font-size: 0.8rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--clr-white); margin-bottom: var(--space-5);
  padding-bottom: var(--space-3); border-bottom: 1px solid rgba(255,255,255,0.15);
}
.footer-col ul { list-style: none; padding: 0; }
.footer-col ul li { margin-bottom: var(--space-3); }
.footer-col ul li a { color: rgba(255,255,255,0.65); font-size: 0.875rem; transition: color var(--transition); }
.footer-col ul li a:hover { color: var(--clr-white); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: var(--space-5) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
}
.footer-bottom-links { display: flex; gap: var(--space-5); }
.footer-bottom-links a { color: rgba(255,255,255,0.5); }
.footer-bottom-links a:hover { color: var(--clr-white); }
.footer-disclaimer { padding: 0 0 var(--space-5); font-size: 0.72rem; color: rgba(255,255,255,0.35); max-width: 800px; line-height: 1.6; }

/* =============================================
   17. RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .recipe-content-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .featured-recipe-card { grid-template-columns: 1fr; }
  .recipe-info-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .med-diet-grid { grid-template-columns: 1fr; }
  .about-inner { grid-template-columns: 1fr; text-align: center; }
  .about-photo img { margin: 0 auto; }
}

@media (max-width: 768px) {
  .header-inner { grid-template-columns: auto 1fr auto; }
  .primary-nav { display: none; }
  .primary-nav.open {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--clr-green-900); z-index: 999;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .primary-nav.open .nav-list { flex-direction: column; }
  .primary-nav.open .nav-list > li > a { border-bottom: 1px solid rgba(255,255,255,0.08); }
  .mobile-menu-btn { display: flex; }
  .recipe-info-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .newsletter-form { flex-direction: column; }
  .featured-recipe-quick-facts { flex-wrap: wrap; gap: var(--space-4); }
  .about-credentials { flex-direction: column; gap: var(--space-3); }
}

@media (max-width: 480px) {
  .container, .container-narrow { padding: 0 var(--space-4); }
  .recipe-info-grid { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: 1.6rem; }
  .hero-categories { gap: var(--space-2); }
  .hero-category-pill { padding: var(--space-2) var(--space-3); min-width: 75px; font-size: 0.7rem; }
  .jump-bar { flex-direction: column; align-items: flex-start; }
}

/* =============================================
   18. WOOCOMMERCE / SHOP (optional)
   ============================================= */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-5); }
.product-card { background: var(--clr-white); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--clr-border); transition: box-shadow var(--transition); }
.product-card:hover { box-shadow: var(--shadow-md); }
.product-image { aspect-ratio: 1; overflow: hidden; }
.product-image img { width: 100%; height: 100%; object-fit: cover; }
.product-body { padding: var(--space-4); }
.product-title { font-family: var(--font-serif); font-size: 1rem; margin-bottom: var(--space-2); }
.product-price { font-size: 1.1rem; font-weight: 700; color: var(--clr-terra-600); margin-bottom: var(--space-3); }

/* =============================================
   19. UTILITIES
   ============================================= */
.text-center { text-align: center; }
.text-left { text-align: left; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.hidden { display: none; }
.loading { opacity: 0.6; pointer-events: none; }

/* Print-friendly recipe */
.print-only { display: none; }
@media print { .print-only { display: block; } }