/* ═══════════════════════════════════════════════════════════════════
 * EEINA Marketing Recipes — Landing Specimen Styles
 * Standalone stylesheet extracted from recipes.njk
 * ═══════════════════════════════════════════════════════════════════ */

/* RECIPES INDEX · v6 · expanded marketing + interactive (owner-authorized brand flex) */

/* HERO */
.rcx-hero { position: relative; padding-block: calc(var(--nav-h) + clamp(36px, 5vw, 64px)) clamp(40px, 5vw, 72px); background: var(--cream); overflow: hidden; }
.rcx-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 85% 20%, rgba(106,178,64,0.10), transparent 50%), radial-gradient(circle at 15% 80%, rgba(196,151,74,0.10), transparent 50%); pointer-events: none; }
.rcx-hero-inner { max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); position: relative; display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 48px); align-items: center; }
@media (min-width: 880px) { .rcx-hero-inner { grid-template-columns: 1.15fr 1fr; } }
.rcx-hero-text { max-width: 580px; }
.rcx-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--olive-dark); padding: 6px 14px; background: var(--olive-tint); border-radius: 999px; margin-block-end: 18px; }
.rcx-eyebrow svg { width: 14px; height: 14px; }
.rcx-hero h1 { font-size: clamp(34px, 5vw, 58px); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; margin-block-end: 18px; }
.rcx-hero h1 .accent { color: var(--olive-dark); }
.rcx-hero .lede { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.75; color: var(--text-soft); margin-block-end: 28px; }
.rcx-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-block-end: 24px; }
.rcx-btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: var(--olive-dark); color: var(--white); border-radius: 12px; font-weight: 600; font-size: 15px; text-decoration: none; transition: background 160ms var(--ease-out-quart), transform 160ms var(--ease-out-quart); }
.rcx-btn-primary:hover { background: var(--olive-darker); transform: translateY(-1px); }
.rcx-btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; background: transparent; color: var(--text); border: 1px solid var(--border-strong); border-radius: 12px; font-weight: 600; font-size: 15px; text-decoration: none; transition: border-color 160ms var(--ease-out-quart); }
.rcx-btn-ghost:hover { border-color: var(--olive); color: var(--olive-dark); }
.rcx-btn-primary, .rcx-btn-ghost { white-space: nowrap; }
.rcx-btn-primary svg, .rcx-btn-ghost svg, .rcx-banner .btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.rcx-hero-stats { display: flex; gap: 24px; flex-wrap: wrap; padding-block-start: 22px; border-block-start: 1px solid var(--border); }
.rcx-stat { display: flex; flex-direction: column; }
.rcx-stat .n { font-size: 24px; font-weight: 700; color: var(--text); font-feature-settings: "tnum"; line-height: 1; }
.rcx-stat .l { font-size: 12px; color: var(--text-soft); margin-block-start: 4px; }
.rcx-hero-visual { position: relative; aspect-ratio: 4/3; max-width: 560px; margin-inline: auto; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(60,52,38,0.18); }
.rcx-hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcx-hero-pill { position: absolute; inset-block-end: 18px; inset-inline-end: 18px; padding: 12px 16px; background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); border-radius: 14px; box-shadow: 0 8px 24px rgba(60,52,38,0.18); border: 1px solid rgba(255,255,255,0.6); display: flex; gap: 10px; align-items: center; max-width: 75%; }
.rcx-hero-pill .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--success); flex-shrink: 0; box-shadow: 0 0 0 4px rgba(28,172,74,0.18); }
.rcx-hero-pill .txt { font-size: 12.5px; font-weight: 600; color: var(--text); }
.rcx-hero-stat-pill { position: absolute; inset-block-start: 18px; inset-inline-start: 18px; padding: 8px 14px 8px 12px; background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); border-radius: 12px; box-shadow: 0 6px 18px rgba(60,52,38,0.16); display: flex; gap: 8px; align-items: baseline; }
.rcx-hero-stat-pill .num { font-size: 18px; font-weight: 700; color: var(--olive-dark); font-feature-settings: "tnum"; letter-spacing: -0.01em; }
.rcx-hero-stat-pill .lb { font-size: 10.5px; font-weight: 600; color: var(--text-soft); letter-spacing: 0.06em; }

/* TRUST STRIP */
.rcx-trust { background: var(--white); border-block: 1px solid var(--border); padding-block: 18px; }
.rcx-trust-inner { max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 720px) { .rcx-trust-inner { grid-template-columns: repeat(4, 1fr); } }
.rcx-trust-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text); font-weight: 500; }
.rcx-trust-item svg { width: 22px; height: 22px; color: var(--olive); flex-shrink: 0; }
.rcx-trust-item strong { font-weight: 600; color: var(--text); }

/* STICKY FILTER BAR */
.rcx-controls { background: var(--white); border-block-end: 1px solid var(--border); position: sticky; top: var(--nav-h); z-index: 8; padding-block: 14px; }
.rcx-controls-inner { max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); }
.rcx-controls-row1 { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.rcx-search-wrap { position: relative; flex: 1 1 280px; min-width: 220px; }
.rcx-search-input { width: 100%; padding: 11px 42px 11px 16px; border: 1px solid var(--border-strong); border-radius: 999px; font: inherit; font-size: 14px; background: var(--bg-soft); transition: background 160ms var(--ease-out-quart), border-color 160ms var(--ease-out-quart); }
.rcx-search-input:focus { outline: none; border-color: var(--olive); background: var(--white); }
.rcx-search-input::placeholder { color: var(--text-soft); }
.rcx-search-icon { position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); color: var(--text-soft); pointer-events: none; }
.rcx-search-icon svg { width: 16px; height: 16px; }
.rcx-toggle-filters { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--olive-tint); color: var(--olive-darker); border: 1px solid color-mix(in srgb, var(--olive) 30%, transparent); border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background 160ms var(--ease-out-quart); }
.rcx-toggle-filters:hover { background: color-mix(in srgb, var(--olive) 18%, var(--white)); }
.rcx-toggle-filters svg { width: 14px; height: 14px; }
.rcx-result-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--white); border: 1px solid var(--border); color: var(--text-soft); border-radius: 999px; font-size: 13px; font-weight: 500; margin-inline-start: auto; }
.rcx-result-pill .rcx-result-count { font-weight: 700; color: var(--olive-dark); font-feature-settings: "tnum"; }
.rcx-clear { padding: 8px 14px; background: transparent; color: var(--text-soft); border: none; font: inherit; font-size: 13px; cursor: pointer; }
.rcx-clear:hover { color: var(--error); }
.rcx-axes { margin-block-start: 14px; display: none; }
.rcx-axes.open { display: block; }
.rcx-axis { display: flex; align-items: baseline; gap: 12px; padding-block: 8px; flex-wrap: wrap; }
.rcx-axis + .rcx-axis { border-block-start: 1px solid var(--border); }
.rcx-axis-label { font-size: 12px; font-weight: 600; color: var(--text-soft); letter-spacing: 0.04em; min-width: 96px; flex-shrink: 0; }
.rcx-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rcx-chip { font: inherit; font-size: 13px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--white); color: var(--text); cursor: pointer; transition: all 140ms var(--ease-out-quart); display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; }
.rcx-chip:hover { border-color: var(--olive); color: var(--olive-darker); }
.rcx-chip[aria-pressed="true"] { background: var(--olive-dark); color: var(--white); border-color: var(--olive-dark); }

/* SECTION HEAD (shared) */
.rcx-section { padding-block: clamp(36px, 4vw, 52px); overflow-x: clip; }
.rcx-section.alt { background: var(--bg-soft); }
.rcx-section-head { max-width: 1180px; margin: 0 auto clamp(18px, 2.5vw, 24px); padding-inline: var(--gutter); display: flex; align-items: end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rcx-section-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--olive-dark); margin-block-end: 6px; text-transform: uppercase; }
.rcx-section-head h2 { font-size: clamp(22px, 2.5vw, 28px); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.rcx-section-head .sub { font-size: 13px; color: var(--text-soft); margin-block-start: 4px; }
.rcx-section-nav { display: inline-flex; gap: 8px; align-items: center; }
.rcx-strip-btn { width: 36px; height: 36px; border-radius: 999px; background: var(--white); border: 1px solid var(--border-strong); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 140ms var(--ease-out-quart); }
.rcx-strip-btn:hover { border-color: var(--olive); color: var(--olive-dark); }
.rcx-strip-btn svg { width: 14px; height: 14px; }
.rcx-strip-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* HORIZONTAL STRIP */
.rcx-strip { overflow: hidden; width: 100%; }
.rcx-strip-scroll { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gutter); padding-block-end: 12px; max-width: 1180px; margin: 0 auto; scrollbar-width: thin; }
.rcx-strip-scroll::-webkit-scrollbar { height: 6px; }
.rcx-strip-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.rcx-strip-scroll .rc-card { flex: 0 0 clamp(260px, 26vw, 290px); scroll-snap-align: start; }

/* FEATURED RECIPE OF THE WEEK */
.rcx-featured { max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); }
.rcx-featured-card { background: var(--white); border: 1px solid var(--border); border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: 1fr; text-decoration: none; color: var(--text); transition: transform 240ms var(--ease-out-quart), box-shadow 240ms var(--ease-out-quart); }
.rcx-featured-card:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(60,52,38,0.12); }
@media (min-width: 768px) { .rcx-featured-card { grid-template-columns: 1fr 1fr; } }
.rcx-featured-visual { background: var(--cream); aspect-ratio: 4/3; position: relative; overflow: hidden; }
.rcx-featured-visual img.rcx-featured-photo { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-out-quart); }
.rcx-featured-card:hover .rcx-featured-photo { transform: scale(1.03); }
.rcx-featured-visual svg.rcx-featured-fallback { width: 120px; height: 120px; color: rgba(60,52,38,0.20); position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); }
.rcx-featured-tag { position: absolute; inset-block-start: 18px; inset-inline-start: 18px; background: rgba(255,255,255,0.95); color: var(--olive-dark); font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 999px; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 6px; }
.rcx-featured-tag svg { width: 12px; height: 12px; }
.rcx-featured-gi { position: absolute; inset-block-end: 18px; inset-inline-end: 18px; background: var(--olive); color: var(--white); padding: 10px 14px; border-radius: 12px; text-align: center; font-feature-settings: "tnum"; box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.rcx-featured-gi .num { font-size: 22px; font-weight: 700; line-height: 1; display: block; }
.rcx-featured-gi .lb { font-size: 10px; opacity: 0.9; letter-spacing: 0.08em; }
.rcx-featured-body { padding: clamp(28px, 3.5vw, 44px); display: flex; flex-direction: column; }
.rcx-featured-body .meal { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--olive-dark); margin-block-end: 10px; }
.rcx-featured-body h3 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; margin-block-end: 14px; }
.rcx-featured-body p { font-size: 15px; line-height: 1.8; color: var(--text-soft); margin-block-end: 20px; }
.rcx-featured-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding-block: 16px; margin-block-end: 18px; border-block: 1px solid var(--border); }
@media (min-width: 600px) { .rcx-featured-meta { grid-template-columns: repeat(4, 1fr); } }
.rcx-featured-meta div { text-align: center; }
.rcx-featured-meta .lb { font-size: 10px; color: var(--text-soft); letter-spacing: 0.04em; margin-block-end: 3px; }
.rcx-featured-meta .vl { font-size: 15px; font-weight: 600; color: var(--text); font-feature-settings: "tnum"; }
.rcx-featured-cta { display: inline-flex; align-items: center; gap: 6px; color: var(--olive-dark); font-weight: 600; font-size: 14.5px; margin-block-start: auto; }
.rcx-featured-cta svg { width: 14px; height: 14px; }

/* MEAL TABS */
.rcx-tabs { max-width: 1180px; margin: 0 auto 24px; padding-inline: var(--gutter); display: flex; gap: 6px; flex-wrap: wrap; }
.rcx-tab { font: inherit; font-size: 14px; padding: 10px 22px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--white); color: var(--text); cursor: pointer; transition: all 160ms var(--ease-out-quart); }
.rcx-tab:hover { border-color: var(--olive); }
.rcx-tab[aria-pressed="true"] { background: var(--olive-dark); color: var(--white); border-color: var(--olive-dark); }

/* BROWSE TILES (extends original system) */
.rcx-browse-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); }
@media (min-width: 720px) { .rcx-browse-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .rcx-browse-grid.six { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1024px) { .rcx-browse-grid.four { grid-template-columns: repeat(4, 1fr); } }
.rcx-browse-tile { aspect-ratio: 1; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; color: var(--white); position: relative; overflow: hidden; transition: transform 220ms var(--ease-out-quart); }
.rcx-browse-tile:hover { transform: translateY(-3px); }
.rcx-browse-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 28%, rgba(0,0,0,0.6) 100%); z-index: 1; }
.rcx-browse-tile > * { position: relative; z-index: 2; }
.rcx-browse-tile > .tile-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.rcx-browse-tile.has-photo .ic { display: none; }
.rcx-browse-tile .ic { width: 32px; height: 32px; color: rgba(255,255,255,0.9); }
.rcx-browse-tile h3 { font-size: 16px; font-weight: 600; line-height: 1.3; }
.rcx-browse-tile .count { font-size: 11px; opacity: 0.88; margin-block-start: 2px; font-feature-settings: "tnum"; }
.rcx-browse-tile.cumin { background: #A5703C; }
.rcx-browse-tile.kabsa { background: #C4974A; }
.rcx-browse-tile.chicken { background: #B8743A; }
.rcx-browse-tile.lamb { background: #8B5A2E; }
.rcx-browse-tile.lentil { background: #5A6E3D; }
.rcx-browse-tile.salmon { background: #4A6E76; }
.rcx-browse-tile.saudi { background: #5A6E3D; }
.rcx-browse-tile.hejazi { background: #8B6E3F; }
.rcx-browse-tile.gulf { background: #4A6E76; }
.rcx-browse-tile.levantine { background: #6B8537; }
.rcx-browse-tile.diabetes { background: #5A6E3D; }
.rcx-browse-tile.weight { background: #729A4B; }
.rcx-browse-tile.pregnant { background: #B8743A; }
.rcx-browse-tile.sport { background: #4A6E76; }

/* SEASONAL BANNER */
.rcx-banner { max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.rcx-banner-card { background: var(--olive-darker); border-radius: 24px; padding: clamp(28px, 4vw, 48px); color: var(--white); display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; position: relative; overflow: hidden; isolation: isolate; }
@media (min-width: 760px) { .rcx-banner-card { grid-template-columns: 1.4fr 1fr; } }
.rcx-banner-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.rcx-banner-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.32; display: block; }
.rcx-banner-card::before { content: ''; position: absolute; inset: 0; background: rgba(28,28,30,0.45); z-index: 1; pointer-events: none; }
.rcx-banner-card > *:not(.rcx-banner-bg) { position: relative; z-index: 2; }
.rcx-banner-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; opacity: 0.85; margin-block-end: 10px; }
.rcx-banner h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; margin-block-end: 12px; }
.rcx-banner p { font-size: 15px; line-height: 1.75; opacity: 0.92; margin-block-end: 20px; max-width: 460px; }
.rcx-banner .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: var(--white); color: #8B5A2E; border-radius: 10px; font-weight: 600; font-size: 14.5px; text-decoration: none; transition: transform 160ms var(--ease-out-quart); }
.rcx-banner .btn:hover { transform: translateY(-1px); }
.rcx-banner-deco { display: flex; align-items: center; justify-content: center; position: relative; min-height: 140px; }
.rcx-banner-deco svg { width: 140px; height: 140px; color: rgba(255,255,255,0.45); position: relative; z-index: 1; }

/* WHY EEINA */
.rcx-why-grid { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); }
@media (min-width: 640px) { .rcx-why-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .rcx-why-grid { grid-template-columns: repeat(4, 1fr); } }
.rcx-why-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 24px; transition: border-color 200ms var(--ease-out-quart), transform 200ms var(--ease-out-quart); }
.rcx-why-card:hover { border-color: var(--olive); transform: translateY(-2px); }
.rcx-why-card .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--olive-tint); color: var(--olive-darker); display: inline-flex; align-items: center; justify-content: center; margin-block-end: 14px; }
.rcx-why-card .ic svg { width: 22px; height: 22px; }
.rcx-why-card h3 { font-size: 16.5px; font-weight: 600; line-height: 1.35; margin-block-end: 8px; }
.rcx-why-card p { font-size: 13.5px; line-height: 1.75; color: var(--text-soft); margin: 0; }

/* NEWSLETTER */
.rcx-newsletter { background: var(--olive-tint); padding-block: clamp(40px, 5vw, 60px); }
.rcx-newsletter-inner { max-width: 720px; margin: 0 auto; padding-inline: var(--gutter); text-align: center; }
.rcx-newsletter h2 { font-size: clamp(24px, 2.8vw, 32px); font-weight: 600; line-height: 1.25; margin-block-end: 10px; }
.rcx-newsletter p { font-size: 15.5px; color: var(--text-soft); line-height: 1.7; margin-block-end: 22px; }
.rcx-news-form { display: flex; gap: 8px; flex-wrap: wrap; max-width: 480px; margin-inline: auto; }
.rcx-news-form input { flex: 1 1 240px; padding: 13px 18px; border: 1px solid var(--border-strong); border-radius: 12px; font: inherit; font-size: 14.5px; background: var(--white); }
.rcx-news-form input:focus { outline: none; border-color: var(--olive); }
.rcx-news-form button { padding: 13px 26px; background: var(--olive-dark); color: var(--white); border: none; border-radius: 12px; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background 160ms var(--ease-out-quart); }
.rcx-news-form button:hover { background: var(--olive-darker); }
.rcx-news-note { font-size: 12px; color: var(--text-soft); margin-block-start: 12px; }

/* APP DOWNLOAD */
.rcx-app { padding-block: clamp(40px, 5vw, 60px); }
.rcx-app-inner { max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 800px) { .rcx-app-inner { grid-template-columns: 1.2fr 1fr; } }
.rcx-app h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; margin-block-end: 14px; }
.rcx-app p { font-size: 16px; line-height: 1.75; color: var(--text-soft); margin-block-end: 24px; max-width: 520px; }
.rcx-app-badges { display: flex; gap: 12px; flex-wrap: wrap; }
.rcx-app-badge { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--text); color: var(--white); border-radius: 12px; text-decoration: none; transition: transform 160ms var(--ease-out-quart); }
.rcx-app-badge:hover { transform: translateY(-2px); }
.rcx-app-badge svg { width: 26px; height: 26px; flex-shrink: 0; }
.rcx-app-badge .top { font-size: 10px; opacity: 0.78; line-height: 1; display: block; margin-block-end: 3px; }
.rcx-app-badge .bot { font-size: 15px; font-weight: 600; line-height: 1; }
.rcx-app-visual { aspect-ratio: 4/3; background: var(--olive-darker); border-radius: 24px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.rcx-app-visual::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent 60%); }
.rcx-app-visual svg { width: 100px; height: 100px; color: rgba(255,255,255,0.55); position: relative; z-index: 1; }

/* FULL GRID */
.rcx-grid-inner { display: grid; grid-template-columns: 1fr; gap: 18px; max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); }
@media (min-width: 600px) { .rcx-grid-inner { grid-template-columns: 1fr 1fr; } }
@media (min-width: 920px) { .rcx-grid-inner { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .rcx-grid-inner { grid-template-columns: repeat(4, 1fr); } }
.rcx-empty { max-width: 480px; margin: 24px auto; padding: 28px; text-align: center; background: var(--bg-soft); border: 1px dashed var(--border-strong); border-radius: 14px; color: var(--text-soft); display: none; }
.rcx-empty.show { display: block; }
.rcx-sort { max-width: 1180px; margin: 0 auto 20px; padding-inline: var(--gutter); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rcx-sort-label { font-size: 12px; font-weight: 600; color: var(--text-soft); letter-spacing: 0.04em; flex-shrink: 0; }
.rcx-sort-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rcx-sort-chip { font: inherit; font-size: 13px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--white); color: var(--text); cursor: pointer; transition: all 140ms var(--ease-out-quart); }
.rcx-sort-chip:hover { border-color: var(--olive); color: var(--olive-darker); }
.rcx-sort-chip[aria-pressed="true"] { background: var(--olive-dark); color: var(--white); border-color: var(--olive-dark); }
.rcx-cond-note { display: flex; gap: 9px; align-items: flex-start; max-width: 1180px; margin: 0 auto 18px; padding: 11px 16px; background: color-mix(in srgb, var(--info) 8%, var(--white)); border: 1px solid color-mix(in srgb, var(--info) 26%, var(--white)); border-radius: 12px; }
.rcx-cond-note[hidden] { display: none; }
.rcx-cond-note svg { flex: 0 0 17px; width: 17px; height: 17px; color: var(--info); margin-block-start: 1px; }
.rcx-cond-note span { font-size: 12.5px; color: var(--text-soft); line-height: 1.75; }

/* RECIPE CARD */
.rc-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform 220ms var(--ease-out-quart), box-shadow 220ms var(--ease-out-quart), border-color 220ms var(--ease-out-quart); text-decoration: none; color: var(--text); }
.rc-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(60,52,38,0.10); border-color: var(--olive); }
.rc-card-img { aspect-ratio: 4/3; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rc-card-img-icon { width: 56px; height: 56px; color: rgba(255,255,255,0.55); position: relative; z-index: 1; }
.rc-card-img.kebsa { background: #C4974A; }
.rc-card-img.shakshuka { background: #B8694B; }
.rc-card-img.lentil { background: #5A6E3D; }
.rc-card-img.salad { background: #729A4B; }
.rc-card-img.jareesh { background: #A88040; }
.rc-card-img.mufattah { background: #8B6E3F; }
.rc-card-img.dates { background: #6B4423; }
.rc-card-img.fish { background: #4A6E76; }
.rc-card-img.machbous { background: #B07B3A; }
.rc-card-img.harees { background: #9B7D52; }
.rc-card-img.thareed { background: #A06B3A; }
.rc-card-img.mansaf { background: #9C7A45; }
.rc-card-img.salmon { background: #4A6E76; }
.rc-card-img.fattoush { background: #6B8E3F; }
.rc-card-img.hummus { background: #B89A5E; }
.rc-card-img.tabbouleh { background: #5A8042; }
.rc-card-img.liver { background: #7A3E3E; }
.rc-card-img.maasoub { background: #A06B3A; }
.rc-card-img.falafel { background: #6B8537; }
.rc-card-img.ful { background: #8B7236; }
.rc-card-img.mahalabia { background: #B89A5E; }
.rc-card-img.oats { background: #9B7D52; }
.rc-card-img.laban { background: #5A8042; }
.rc-card-img.margoog { background: #A06B3A; }
.rc-card-gi { position: absolute; inset-block-end: 12px; inset-inline-end: 12px; background: rgba(255,255,255,0.95); padding: 5px 10px; border-radius: 8px; font-size: 11px; font-weight: 600; font-feature-settings: "tnum"; display: inline-flex; align-items: baseline; gap: 4px; }
.rc-card-gi-num { font-size: 14px; font-weight: 700; }
.rc-card-gi.low { color: var(--olive-darker); }
.rc-card-gi.mid { color: #8A6018; }
.rc-card-saudi { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; background: rgba(255,255,255,0.95); color: var(--olive-dark); padding: 4px 10px; border-radius: 6px; font-size: 10.5px; font-weight: 600; }
.rc-card-badge { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; background: var(--olive-darker); color: var(--white); padding: 4px 10px; border-radius: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; }
.rc-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.rc-card-meal { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--olive-dark); }
.rc-card-body h3 { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--text); }
.rc-card-meta-row { display: flex; gap: 14px; font-size: 12px; color: var(--text-soft); margin-block-start: auto; padding-block-start: 8px; border-block-start: 1px solid var(--border); }
.rc-card-meta-row span { display: inline-flex; align-items: center; gap: 5px; font-feature-settings: "tnum"; }
.rc-card-meta-row svg { width: 12px; height: 12px; }
.rc-card-meta-row strong { color: var(--text); font-weight: 600; }

/* Injected recipe photos (override colored bg + icon) */
.rc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; }
.rc-card-img.has-photo .rc-card-img-icon { display: none; }
.rc-card-img .rc-card-gi, .rc-card-img .rc-card-saudi { z-index: 2; }

/* FINAL CTA */
.rcx-cta { background: var(--olive-dark); color: var(--white); padding-block: clamp(48px, 6vw, 80px); }
.rcx-cta-inner { max-width: 760px; margin: 0 auto; padding-inline: var(--gutter); text-align: center; }
.rcx-cta h2 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; margin-block-end: 14px; }
.rcx-cta p { font-size: 16px; line-height: 1.75; opacity: 0.85; margin-block-end: 26px; max-width: 540px; margin-inline: auto; }
.rcx-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.rcx-cta .btn-w { background: var(--white); color: var(--olive-dark); padding: 14px 28px; border-radius: 12px; font-weight: 600; text-decoration: none; font-size: 15px; transition: transform 160ms var(--ease-out-quart); }
.rcx-cta .btn-w:hover { transform: translateY(-1px); }
.rcx-cta .btn-line { background: transparent; color: var(--white); padding: 14px 22px; border: 1px solid rgba(255,255,255,0.4); border-radius: 12px; font-weight: 600; text-decoration: none; font-size: 15px; transition: background 160ms var(--ease-out-quart); }
.rcx-cta .btn-line:hover { background: rgba(255,255,255,0.1); }

@media (prefers-reduced-motion: no-preference) {
  .rc-card { opacity: 0; transform: translateY(10px); animation: rcxReveal 480ms var(--ease-out-quart) forwards; animation-delay: var(--rcx-delay, 0ms); }
  @keyframes rcxReveal { to { opacity: 1; transform: translateY(0); } }
}

/* === Owner refinements · round 2 === */

/* Less rounded corners */
.rc-card, .rcx-browse-tile, .rcx-why-card { border-radius: 12px; }
.rcx-featured-card, .rcx-banner-card, .rcx-app-visual { border-radius: 16px; }
.rcx-hero-tile { border-radius: 14px; }
.rcx-hero-tile.t3 { border-radius: 10px; }
.rcx-btn-primary, .rcx-btn-ghost, .rcx-news-form input, .rcx-news-form button, .rcx-app-badge, .rcx-cta .btn-w, .rcx-cta .btn-line { border-radius: 10px; }

/* Tighter section spacing */
.rcx-section { padding-block: clamp(22px, 3vw, 38px); }
.rcx-hero { padding-block: calc(var(--nav-h) + clamp(28px, 4vw, 48px)) clamp(26px, 3vw, 44px); }

/* Hide horizontal scrollbar on strips */
.rcx-strip-scroll { scrollbar-width: none; }
.rcx-strip-scroll::-webkit-scrollbar { display: none; }

/* Stronger arrow buttons */
.rcx-strip-btn { width: 40px; height: 40px; transition: all 180ms var(--ease-out-quart); }
.rcx-strip-btn:hover { background: var(--olive-dark); border-color: var(--olive-dark); color: var(--white); transform: scale(1.05); }

/* Better readability of tile text over photos */
.rcx-browse-tile::after { background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.12) 32%, rgba(0,0,0,0.15) 58%, rgba(0,0,0,0.72) 100%); }
.rcx-browse-tile h3 { text-shadow: 0 1px 8px rgba(0,0,0,0.55), 0 0 4px rgba(0,0,0,0.4); font-size: 17px; }
.rcx-browse-tile .count { text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.rcx-browse-tile .ic { filter: drop-shadow(0 1px 4px rgba(0,0,0,0.45)); }

/* Card tagline (between name and meta) */
.rc-card-tagline { font-size: 12px; color: var(--olive-dark); font-weight: 500; line-height: 1.5; margin-block-start: -2px; }

/* Better meta-row · pill-styled */
.rc-card-meta-row { gap: 6px; flex-wrap: wrap; padding-block-start: 10px; }
.rc-card-meta-row span { background: var(--bg-soft); padding: 5px 11px; border-radius: 999px; font-size: 11.5px; color: var(--text-soft); }
.rc-card-meta-row strong { color: var(--text); font-weight: 700; }

/* Meal tabs refined */
.rcx-tab { padding: 11px 22px; border-radius: 10px; font-weight: 600; transition: all 200ms var(--ease-out-quart); display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; }
.rcx-tab:hover { border-color: var(--olive); background: var(--olive-tint); color: var(--olive-darker); }
.rcx-tab[aria-pressed="true"] { background: var(--olive-dark); color: var(--white); border-color: var(--olive-dark); box-shadow: 0 6px 18px rgba(106,178,64,0.28); transform: translateY(-1px); }

/* === SPICES · photo catalogue (circular macro shots) === */
.rcx-spices { max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1fr; gap: 0; border-block-start: 1px solid var(--olive-dark); border-block-end: 1px solid var(--olive-dark); }
@media (min-width: 720px) { .rcx-spices { grid-template-columns: 1fr 1fr; column-gap: 48px; } .rcx-spice-orb:nth-child(odd):not(.lead) { border-inline-end: 1px solid var(--border); padding-inline-end: 24px; } }
.rcx-spice-orb { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 16px; padding-block: 14px; padding-inline: 4px; border-block-end: 1px solid var(--border); text-decoration: none; color: var(--text); transition: padding-inline 280ms var(--ease-out-quart), background 280ms var(--ease-out-quart); }
.rcx-spice-orb:hover { padding-inline-start: 14px; background: var(--olive-tint); }
.rcx-spice-orb:last-child, .rcx-spice-orb:nth-last-child(2):nth-child(odd) { border-block-end: none; }
.rcx-spice-orb .orb { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex: none; background: var(--cream); box-shadow: 0 4px 12px rgba(60,52,38,0.08); }
.rcx-spice-orb .orb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 480ms var(--ease-out-quart); }
.rcx-spice-orb:hover .orb img { transform: scale(1.08); }
.rcx-spice-orb h3 { font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--text); margin: 0; }
.rcx-spice-orb:hover h3 { color: var(--olive-darker); }
.rcx-spice-orb .arr { font-size: 14px; color: var(--olive-dark); opacity: 0.5; transition: opacity 240ms, transform 280ms var(--ease-out-quart); }
.rcx-spice-orb:hover .arr { opacity: 1; transform: translateX(-4px); }
/* tier — kabsa as lead with bigger photo */
.rcx-spice-orb.lead { grid-column: 1 / -1; grid-template-columns: 110px 1fr auto; padding-block: 20px; border-block-end: 1px solid var(--olive-dark); }
.rcx-spice-orb.lead .orb { width: 110px; height: 110px; box-shadow: 0 10px 28px rgba(60,52,38,0.14); }
.rcx-spice-orb.lead h3 { font-size: clamp(20px, 2.4vw, 24px); font-weight: 500; letter-spacing: -0.01em; color: var(--olive-darker); }
.rcx-spice-orb.lead .arr { font-size: 20px; opacity: 0.8; }

/* === SAUCES · image-led typographic menu === */
.rcx-sauces { max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); }
.rcx-sauce-list { border-block-start: 1px solid var(--olive-dark); }
.rcx-sauce { display: grid; grid-template-columns: 140px 1fr auto; gap: 0 24px; align-items: center; padding-block: 18px; padding-inline: 4px; border-block-end: 1px solid var(--border); text-decoration: none; color: var(--text); transition: padding-inline 280ms var(--ease-out-quart), background 280ms var(--ease-out-quart); position: relative; }
.rcx-sauce:hover { padding-inline: 14px; background: var(--olive-tint); }
.rcx-sauce::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 0; inset-block-end: 0; width: 3px; background: var(--olive-dark); transform: scaleY(0); transform-origin: top; transition: transform 280ms var(--ease-out-quart); }
.rcx-sauce:hover::before { transform: scaleY(1); }
.rcx-sauce-photo { width: 140px; height: 140px; border-radius: 4px; overflow: hidden; background: var(--cream); position: relative; }
.rcx-sauce-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 480ms var(--ease-out-quart); }
.rcx-sauce:hover .rcx-sauce-photo img { transform: scale(1.04); }
.rcx-sauce-body { display: flex; flex-direction: column; gap: 6px; padding-block: 4px; }
.rcx-sauce-title-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.rcx-sauce h3 { font-size: clamp(20px, 2.6vw, 26px); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--olive-darker); margin: 0; }
.rcx-sauce-meta { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--olive-dark); white-space: nowrap; align-self: center; }
.rcx-sauce-desc { font-size: 13.5px; line-height: 1.7; color: var(--text-soft); margin: 0; max-width: 56ch; }
.rcx-sauce-num { font-family: var(--font-sans); font-size: 13px; color: var(--olive-dark); font-weight: 600; opacity: 0.55; letter-spacing: 0.06em; }
@media (max-width: 640px) {
  .rcx-sauce { grid-template-columns: 88px 1fr; gap: 4px 16px; }
  .rcx-sauce-photo { width: 88px; height: 88px; }
  .rcx-sauce-meta { grid-column: 2; justify-self: start; padding-block-start: 4px; }
}

/* === WHOLE INGREDIENTS · broadsheet specimen + photo === */
.rcx-wholes { max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); display: flex; flex-direction: column; }
.rcx-whole { display: grid; grid-template-columns: 90px 110px 1fr auto; gap: 20px 24px; align-items: center; padding-block: 18px; border-block-end: 1px solid var(--border); text-decoration: none; color: var(--text); transition: padding-inline 240ms var(--ease-out-quart); position: relative; }
.rcx-whole:first-child { border-block-start: 1px solid var(--border); }
.rcx-whole:hover { padding-inline: 14px; }
.rcx-whole:hover h3 { color: var(--olive-darker); }
.rcx-whole .photo { width: 90px; height: 90px; border-radius: 4px; overflow: hidden; background: var(--cream); box-shadow: 0 4px 12px rgba(60,52,38,0.08); }
.rcx-whole .photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 480ms var(--ease-out-quart); }
.rcx-whole:hover .photo img { transform: scale(1.06); }
.rcx-whole .idx { font-size: clamp(48px, 7vw, 78px); font-weight: 150; color: var(--olive-dark); line-height: 0.9; font-feature-settings: "tnum"; letter-spacing: -0.03em; opacity: 0.85; }
.rcx-whole:hover .idx { opacity: 1; }
.rcx-whole h3 { font-size: clamp(19px, 2.4vw, 24px); font-weight: 500; line-height: 1.2; margin-block-end: 6px; transition: color 240ms; }
.rcx-whole p { font-size: 14px; color: var(--text-soft); margin: 0; line-height: 1.65; max-width: 52ch; }
.rcx-whole .read { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--olive-dark); white-space: nowrap; align-self: center; }
@media (max-width: 720px) {
  .rcx-whole { grid-template-columns: 64px 56px 1fr; gap: 12px; }
  .rcx-whole .photo { width: 64px; height: 64px; }
  .rcx-whole .idx { font-size: 40px; }
  .rcx-whole .read { display: none; }
}

/* === BLENDS · refined composition + photo top === */
.rcx-blends { max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .rcx-blends { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .rcx-blends { grid-template-columns: repeat(3, 1fr); } }
.rcx-blend { background: var(--white); border: 1px solid var(--border); border-radius: 4px; padding: 0; text-decoration: none; color: var(--text); transition: all 280ms var(--ease-out-quart); position: relative; overflow: hidden; display: flex; flex-direction: column; }
.rcx-blend:hover { border-color: var(--olive-dark); box-shadow: 0 14px 30px rgba(60,52,38,0.08); transform: translateY(-3px); }
.rcx-blend-photo { width: 100%; aspect-ratio: 16/10; overflow: hidden; background: var(--cream); }
.rcx-blend-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-out-quart); }
.rcx-blend:hover .rcx-blend-photo img { transform: scale(1.05); }
.rcx-blend-body { padding: 22px 24px 20px; display: flex; flex-direction: column; gap: 14px; }
.rcx-blend-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.rcx-blend .lead { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--olive-dark); }
.rcx-blend .count { font-size: 11px; font-weight: 600; color: var(--text-soft); letter-spacing: 0.06em; font-feature-settings: "tnum"; }
.rcx-blend h3 { font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: var(--olive-darker); }
.rcx-blend .components { display: flex; flex-direction: column; gap: 8px; padding-block-start: 4px; }
.rcx-blend .comp { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 12px; font-size: 13px; line-height: 1.4; }
.rcx-blend .comp .sw { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); justify-self: center; }
.rcx-blend .comp .name { color: var(--text); }
.rcx-blend .comp .pct { font-size: 11px; color: var(--text-soft); font-feature-settings: "tnum"; letter-spacing: 0.04em; }
.rcx-blend .more { font-size: 11.5px; color: var(--text-soft); padding-inline-start: 30px; font-style: normal; }
.rcx-blend p { font-size: 13.5px; color: var(--text-soft); line-height: 1.7; margin: 0; }
.rcx-blend-foot { display: flex; align-items: center; justify-content: space-between; padding-block-start: 12px; border-block-start: 1px solid var(--border); margin-block-start: 4px; }
.rcx-blend .arrow { color: var(--olive-dark); font-size: 18px; font-weight: 600; transition: transform 280ms var(--ease-out-quart); }
.rcx-blend:hover .arrow { transform: translateX(-6px); }
.rcx-blend .use { font-size: 11.5px; color: var(--text-soft); letter-spacing: 0.04em; font-weight: 500; }

/* === DRINKS · menu board with photo accents === */
.rcx-drinks-wrap { max-width: 980px; margin: 0 auto; padding-inline: var(--gutter); }
.rcx-drinks { background: var(--cream); border-radius: 4px; padding: clamp(16px, 3vw, 28px) clamp(20px, 4vw, 38px); position: relative; }
.rcx-drinks::before { content: ''; position: absolute; inset-block-start: 0; inset-inline-start: 0; inset-inline-end: 0; height: 4px; background: var(--olive-dark); border-radius: 4px 4px 0 0; }
.rcx-drinks::after { content: ''; position: absolute; inset-block-end: 0; inset-inline-start: 0; inset-inline-end: 0; height: 4px; background: var(--olive-dark); border-radius: 0 0 4px 4px; }
.rcx-drink { display: grid; grid-template-columns: 48px 96px 1fr auto; align-items: center; gap: 18px 22px; padding-block: 18px; border-block-end: 1px dashed var(--border); text-decoration: none; color: var(--text); transition: padding-inline 280ms var(--ease-out-quart); }
.rcx-drink:last-child { border-block-end: none; }
.rcx-drink:hover { padding-inline: 12px; }
.rcx-drink:hover h3 { color: var(--olive-darker); }
.rcx-drink .num { font-size: 38px; font-weight: 150; color: var(--olive-dark); line-height: 1; opacity: 0.7; font-feature-settings: "tnum"; letter-spacing: -0.02em; align-self: center; }
.rcx-drink .photo { width: 96px; height: 96px; border-radius: 4px; overflow: hidden; background: var(--white); box-shadow: 0 4px 12px rgba(60,52,38,0.10); }
.rcx-drink .photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 480ms var(--ease-out-quart); }
.rcx-drink:hover .photo img { transform: scale(1.06); }
.rcx-drink .body { display: flex; flex-direction: column; gap: 4px; }
.rcx-drink h3 { font-size: clamp(19px, 2.4vw, 24px); font-weight: 500; line-height: 1.2; transition: color 240ms; letter-spacing: -0.01em; margin: 0; }
.rcx-drink .note { font-size: 13px; color: var(--text-soft); line-height: 1.6; max-width: 44ch; }
.rcx-drink .serve { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--olive-dark); white-space: nowrap; align-self: center; }
@media (max-width: 720px) {
  .rcx-drink { grid-template-columns: 36px 72px 1fr; gap: 10px 14px; }
  .rcx-drink .num { font-size: 26px; }
  .rcx-drink .photo { width: 72px; height: 72px; }
  .rcx-drink .serve { grid-column: 1 / -1; padding-inline-start: 0; }
}
@media (max-width: 480px) {
  .rcx-drink { grid-template-columns: 72px 1fr; gap: 10px 12px; }
  .rcx-drink .num { display: none; }
  .rcx-drink .photo { width: 72px; height: 72px; }
  .rcx-drink .serve { grid-column: 1 / -1; padding-inline-start: 0; }
}

/* === NAV DROPDOWN · jump menu for sections === */
.rcx-navdrop { position: relative; display: inline-block; }
.rcx-navdrop-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: transparent; border: 0; color: inherit; font: inherit; font-family: var(--font-sans, inherit); cursor: pointer; line-height: inherit; }
.rcx-navdrop-trigger[aria-current="page"] { color: var(--olive-dark); font-weight: 600; }
.rcx-navdrop-trigger:hover { color: var(--olive-dark); }
.rcx-navdrop-chev { transition: transform 240ms var(--ease-out-quart); opacity: 0.7; }
.rcx-navdrop-trigger[aria-expanded="true"] .rcx-navdrop-chev { transform: rotate(180deg); opacity: 1; }
.rcx-navdrop-menu { position: absolute; inset-block-start: calc(100% + 14px); inset-inline-end: -8px; background: var(--white); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 24px 56px rgba(28,28,30,0.10), 0 4px 12px rgba(28,28,30,0.04); padding: 22px 24px; display: grid; grid-template-columns: repeat(3, minmax(170px, 1fr)); gap: 28px 36px; z-index: 50; min-width: 620px; }
.rcx-navdrop-menu[hidden] { display: none; }
.rcx-navdrop-menu::before { content: ''; position: absolute; inset-block-start: -7px; inset-inline-end: 22px; width: 12px; height: 12px; background: var(--white); border-block-start: 1px solid var(--border); border-inline-start: 1px solid var(--border); transform: rotate(45deg); }
.rcx-navdrop-col { display: flex; flex-direction: column; gap: 4px; }
.rcx-navdrop-eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; color: var(--olive-dark); margin-block-end: 6px; padding-block-end: 8px; border-block-end: 1px solid var(--border); }
.rcx-navdrop-col a { display: block; padding: 7px 8px; margin-inline: -8px; border-radius: 4px; font-size: 13.5px; line-height: 1.4; color: var(--text); text-decoration: none; transition: background 180ms, color 180ms, padding-inline 220ms var(--ease-out-quart); }
.rcx-navdrop-col a:hover { background: var(--olive-tint); color: var(--olive-darker); padding-inline-start: 14px; }
@media (max-width: 880px) {
  .rcx-navdrop-menu { position: fixed; inset-inline: 16px; inset-block-start: calc(var(--nav-h, 64px) + 6px); inset-inline-end: 16px; min-width: 0; grid-template-columns: 1fr; gap: 18px; padding: 18px 20px; max-height: calc(100vh - var(--nav-h, 64px) - 24px); overflow-y: auto; }
  .rcx-navdrop-menu::before { display: none; }
}

/* scroll-margin so anchor jumps clear the sticky nav */
#popular, #featured, #meals, #ingredients, #spices, #sauces, #wholes, #blends, #drinks, #cuisines, #goals, #all { scroll-margin-block-start: calc(var(--nav-h, 64px) + 12px); }

/* ═══ MOBILE · extra small screens (≤480px) ═══ */
@media (max-width: 480px) {
  /* Browse tiles — tighter padding + smaller text so labels fit */
  .rcx-browse-tile { padding: 12px; }
  .rcx-browse-tile h3 { font-size: 15px; }
  .rcx-browse-tile .count { font-size: 10px; }

  /* Spice orbs — shrink photo on very narrow screens */
  .rcx-spice-orb { grid-template-columns: 48px 1fr auto; gap: 10px; }
  .rcx-spice-orb .orb { width: 48px; height: 48px; }
  .rcx-spice-orb h3 { font-size: 14px; }
  .rcx-spice-orb.lead { grid-template-columns: 80px 1fr auto; padding-block: 14px; }
  .rcx-spice-orb.lead .orb { width: 80px; height: 80px; }
  .rcx-spice-orb.lead h3 { font-size: 18px; }

  /* Whole ingredients — collapse index number column */
  .rcx-whole { grid-template-columns: 52px 1fr; gap: 10px; }
  .rcx-whole .photo { width: 52px; height: 52px; }
  .rcx-whole .idx { display: none; }
  .rcx-whole .read { display: none; }

  /* Sauce items — stack photo above content on narrowest screens */
  .rcx-sauce { grid-template-columns: 72px 1fr; gap: 4px 12px; }
  .rcx-sauce-photo { width: 72px; height: 72px; }
  .rcx-sauce-meta { grid-column: 2; }

  /* Section head — allow nav arrows to drop below heading */
  .rcx-section-head { align-items: flex-start; }

  /* Hero stats — reduce gap */
  .rcx-hero-stats { gap: 16px; }

  /* Strip cards — slightly narrower on small phones */
  .rcx-strip-scroll .rc-card { flex: 0 0 clamp(220px, 70vw, 260px); }

  /* Sort chips — allow wrapping */
  .rcx-sort { flex-wrap: wrap; gap: 8px; }
}

/* ═══ EEINA Unified Footer · Aēsop-grade · v3 ═══ */
.eeina-footer { background: var(--cream, #FBF8F3); color: var(--text, #1C1C1E); padding: clamp(56px, 7vw, 96px) 0 28px; margin-block-start: clamp(60px, 8vw, 96px); border-block-start: 1px solid var(--border, #E8E8E6); font-size: 13.5px; line-height: 1.7; font-family: 'IBM Plex Sans Arabic', -apple-system, sans-serif; }
.ftr-inner { max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); }
.ftr-top { display: grid; grid-template-columns: 1fr; gap: 28px; margin-block-end: clamp(40px, 5vw, 64px); padding-block-end: clamp(32px, 4vw, 48px); border-block-end: 1px solid var(--border, #E8E8E6); }
@media (min-width: 880px) { .ftr-top { grid-template-columns: 1.4fr 1fr; align-items: end; gap: 48px; } }
.ftr-top-brand img { height: 32px; margin-block-end: 18px; opacity: 0.95; width: auto; }
.ftr-top-brand .tagline { font-size: clamp(20px, 2.4vw, 26px); font-weight: 500; letter-spacing: -0.015em; color: var(--olive-darker, #2E5A18); line-height: 1.3; margin-block-end: 8px; max-width: 480px; }
.ftr-top-brand p { font-size: 14px; color: var(--text-soft, #6E6E73); line-height: 1.75; max-width: 440px; }
.ftr-newsletter { max-width: 380px; }
.ftr-newsletter label { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; color: var(--olive-dark, #3D7A1F); text-transform: uppercase; margin-block-end: 10px; }
.ftr-newsletter-form { display: flex; gap: 8px; }
.ftr-newsletter-form input { flex: 1; background: #FFFFFF; border: 1px solid var(--border, #E8E8E6); border-radius: 8px; padding: 11px 14px; font: inherit; font-size: 13.5px; color: var(--text, #1C1C1E); outline: none; transition: all 180ms; }
.ftr-newsletter-form input::placeholder { color: #98989D; }
.ftr-newsletter-form input:focus { border-color: var(--olive, #6AB240); box-shadow: 0 0 0 3px rgba(106,178,64,0.12); }
.ftr-newsletter-form button { padding: 11px 18px; background: var(--olive-darker, #2E5A18); color: #FFFFFF; border: 0; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 180ms, transform 180ms; white-space: nowrap; }
.ftr-newsletter-form button:hover { background: var(--olive-dark, #3D7A1F); transform: translateY(-1px); }
.ftr-newsletter .note { font-size: 11.5px; color: #98989D; margin-block-start: 8px; }
.ftr-newsletter .ok { font-size: 12px; color: var(--olive-dark, #3D7A1F); margin-block-start: 8px; display: none; align-items: center; gap: 6px; }
.ftr-newsletter .ok.show { display: flex; }
.ftr-newsletter .ok svg { width: 12px; height: 12px; }
.ftr-cols { display: grid; grid-template-columns: 1fr; gap: 36px 32px; margin-block-end: clamp(40px, 5vw, 56px); }
@media (min-width: 560px) { .ftr-cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 880px) { .ftr-cols { grid-template-columns: repeat(3, 1fr); } }
.ftr-col h4 { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; color: var(--olive-darker, #2E5A18); text-transform: uppercase; margin-block-end: 18px; }
.ftr-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.ftr-col a { font-size: 13.5px; color: var(--text-soft, #6E6E73); transition: color 180ms; text-decoration: none; }
.ftr-col a:hover { color: var(--olive-darker, #2E5A18); }
.ftr-trust { display: flex; flex-wrap: wrap; gap: 14px 28px; padding-block: 26px; border-block: 1px solid var(--border, #E8E8E6); margin-block-end: 24px; align-items: center; }
.ftr-trust-item { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-soft, #6E6E73); }
.ftr-trust-item svg { width: 14px; height: 14px; color: var(--olive-dark, #3D7A1F); }
.ftr-trust-item strong { color: var(--text, #1C1C1E); font-weight: 600; }
.ftr-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 12px; color: #98989D; }
.ftr-copy { font-feature-settings: "tnum"; }
.ftr-legal { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.ftr-legal a { color: #98989D; transition: color 180ms; text-decoration: none; }
.ftr-legal a:hover { color: var(--olive-darker, #2E5A18); }
.ftr-social { display: flex; gap: 14px; align-items: center; }
.ftr-social a { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--text-soft, #6E6E73); transition: color 180ms, transform 180ms; }
.ftr-social a:hover { color: var(--olive-darker, #2E5A18); transform: translateY(-1px); }
.ftr-social svg { width: 15px; height: 15px; }