/* ===== Design tokens — single source of truth =====
     Mirror of design-system.jsx tokens. JSX components still read window.DS
     for runtime token use (dynamic colors, etc.); CSS classes (extracted
     from former inline styles, see CSS-REFACTOR-ROADMAP) reference these
     CSS custom properties via var(--…). Keep both in sync when tokens
     change. */
  :root {
    --c-bg:        #fafaf7;
    --c-surface:   #f0efe9;
    --c-ink:       #1a1d18;
    --c-sub:       #5a5d56;
    --c-sage:      #5a6b3f;
    --c-sage-light:#a8b289;
    --c-line:      #e3e1d8;
    --c-cream:     #f5f1e8;
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-pill: 999px;
    --shadow-floating: 0 24px 60px rgba(20,22,18,0.18);
  }
  * { box-sizing:border-box; }
  html, body { margin:0; padding:0; background:#fafaf7; scroll-behavior:smooth; }
  body { font-family: "Inter Tight", "Helvetica Neue", system-ui, sans-serif; color:#1a1d18; }
  img { display:block; }

  /* Generic image-fill utility — used inside cards/tiles where the wrapper
     defines the box (aspect-ratio or fixed height) and the image fills it
     with center crop. Replaces the repeated inline
     style={{width:'100%', height:'100%', objectFit:'cover'}}. */
  .r-img-cover { width: 100%; height: 100%; object-fit: cover; }
  details summary::-webkit-details-marker { display:none; }
  details[open] summary span:last-child { transform: rotate(45deg); }
  details summary span:last-child { transition: transform .2s; display:inline-block; }
  input:focus, textarea:focus { border-color:#5a6b3f !important; }
  a { color:inherit; }

  /* ===== Layout container — full-bleed sections, contained content =====
     Outer wrapper has no max-width: every section spans full viewport width
     (so backgrounds reach edges). Inside each section, content wraps in
     .r-container which keeps text/grid contained at 1280px and centered. */
  .r-container {
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 56px;
    padding-right: 56px;
    box-sizing: border-box;
  }
  @media (max-width: 960px) {
    .r-container { padding-left: 32px; padding-right: 32px; }
  }
  @media (max-width: 640px) {
    .r-container { padding-left: 20px; padding-right: 20px; }
  }

  /* ===== Animations ============================================ */

  /* Coordinates plate green dot — gentle living glow */
  @keyframes r-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(168,178,137,0.30); }
    50%      { box-shadow: 0 0 0 9px rgba(168,178,137,0.06); }
  }
  .r-dot-pulse { animation: r-dot-pulse 2.4s ease-in-out infinite; }

  /* Active nav link (current section while scrolling) */
  .r-nav-link {
    position: relative;
    transition: color 200ms ease;
  }
  .r-nav-link::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
  }
  .r-nav-link.active::after,
  .r-nav-link:hover::after {
    transform: scaleX(1);
  }

  /* Active state for the standalone Kontakt link (right cluster — separate
     element from the main nav row, so it needs its own .active rule).
     Uses the same underline pattern as r-nav-link for visual consistency. */
  .r-header-kontakt-link {
    position: relative;
    transition: color 200ms ease;
  }
  .r-header-kontakt-link::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
  }
  .r-header-kontakt-link.active::after,
  .r-header-kontakt-link:hover::after {
    transform: scaleX(1);
  }
  .r-header-kontakt-link.active { color: var(--c-ink); }

  /* Active state for mobile-menu items — sage colour + sage left bar so
     it's recognizable while text is large. Subtle, no underline (would
     fight with the bottom-border separator between items). */
  .r-mobile-menu-link-base.active {
    color: var(--c-sage);
  }

  /* CTA pill — Anfrage in header + similar primary buttons */
  .r-cta-pill {
    transition: transform 180ms cubic-bezier(.4,0,.2,1),
                box-shadow 200ms ease,
                background 180ms ease;
  }
  .r-cta-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(26, 29, 24, 0.25);
  }
  .r-cta-pill:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 2px 6px rgba(26, 29, 24, 0.18);
  }

  /* Hero buttons — "Sortiment ansehen" / "Unsere Geschichte →" */
  .r-hero-buttons a {
    transition: transform 180ms cubic-bezier(.4,0,.2,1),
                box-shadow 200ms ease,
                background 200ms ease,
                border-color 200ms ease;
  }
  .r-hero-buttons a:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
  }
  .r-hero-buttons a:active { transform: translateY(0) scale(0.98); }

  /* Generic primary buttons inside content (Bio CTA, Kontakt CTA, FAQ summaries that shouldn't shift) */
  button:not(.r-faq-summary):not(.r-burger):not(.r-cta-pill) {
    transition: transform 180ms cubic-bezier(.4,0,.2,1),
                box-shadow 200ms ease,
                background 180ms ease,
                opacity 180ms ease;
  }
  button:not(.r-faq-summary):not(.r-burger):not(.r-cta-pill):hover:not(:disabled) {
    transform: translateY(-1px);
  }
  button:not(.r-faq-summary):not(.r-burger):not(.r-cta-pill):active:not(:disabled) {
    transform: translateY(0) scale(0.98);
  }

  /* Cards — promote the existing JS-driven hover lift to CSS so the transition
     curve is consistent and snappier. The inline onMouseEnter/Leave still sets
     transform; we just smooth it. */
  .r-oil-card, .r-olive-card, .r-recipe-card, .r-related-card {
    transition: transform 280ms cubic-bezier(.4,0,.2,1),
                box-shadow 280ms ease;
  }
  .r-oil-card:hover, .r-olive-card:hover, .r-recipe-card:hover, .r-related-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  }

  /* RelatedStrip image — gentle zoom on card hover (editorial feel) */
  .r-related-card-img {
    transition: transform 600ms cubic-bezier(.4,0,.2,1);
  }
  .r-related-card:hover .r-related-card-img {
    transform: scale(1.05);
  }

  /* ===== Modal & widget appearance animations =====
     Forms and overlays should fade/slide in instead of popping. */

  /* Backdrop fade-in (used by AnfrageForm + DetailModal) */
  @keyframes r-anim-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .r-anim-fade { animation: r-anim-fade-in 250ms ease-out both; }

  /* Modal panel rise + scale-in */
  @keyframes r-anim-rise-in {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .r-anim-rise { animation: r-anim-rise-in 320ms cubic-bezier(.4,0,.2,1) both; }

  /* Anfrage bubble button — first-time appearance from the bottom */
  @keyframes r-anim-bubble-in {
    from { opacity: 0; transform: translateY(12px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .r-anfrage-bubble-btn {
    animation: r-anim-bubble-in 280ms cubic-bezier(.34,1.56,.64,1) both;
    transition: transform 180ms cubic-bezier(.4,0,.2,1),
                box-shadow 200ms ease;
  }
  .r-anfrage-bubble-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.24);
  }
  .r-anfrage-bubble-btn:active { transform: translateY(0) scale(0.97); }

  /* Bubble count badge — pulse when an item is added */
  @keyframes r-anim-count-pulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.18); }
    70%  { transform: scale(0.96); }
    100% { transform: scale(1); }
  }
  .r-anfrage-bubble-count {
    animation: r-anim-count-pulse 420ms cubic-bezier(.34,1.56,.64,1);
  }

  /* Bubble panel (item list when bubble is open) */
  @keyframes r-anim-bubble-panel-in {
    from { opacity: 0; transform: translateY(8px) scale(0.96); transform-origin: bottom left; }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .r-anim-bubble-panel { animation: r-anim-bubble-panel-in 220ms ease-out both; transform-origin: bottom left; }

  /* Submitted ✓ checkmark — gentle bounce */
  @keyframes r-anim-check-bounce {
    0%   { opacity: 0; transform: scale(0); }
    55%  { opacity: 1; transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
  }
  .r-anim-check { animation: r-anim-check-bounce 500ms cubic-bezier(.34,1.56,.64,1) both; }

  /* Hero Ken Burns — five keyframes for organic "wandering" motion instead
     of a symmetric back-and-forth. 20-second cycle, peaks at scale 1.10
     with diagonal pan up to ~2%. Image is over-sized to 110% with -5%
     offsets in JSX so the pan never reveals empty edges. */
  @keyframes r-hero-kenburns {
    0%   { transform: scale(1.00) translate(0%,    0%); }
    25%  { transform: scale(1.05) translate(-1%,   -0.5%); }
    50%  { transform: scale(1.10) translate(-2%,   -1.2%); }
    75%  { transform: scale(1.06) translate(-1%,   -0.9%); }
    100% { transform: scale(1.00) translate(0%,    0%); }
  }
  .r-hero-img {
    animation: r-hero-kenburns 20s ease-in-out infinite;
  }
  /* Respect users who request reduced motion (WCAG 2.3.3 / system setting) */
  @media (prefers-reduced-motion: reduce) {
    .r-hero-img { animation: none; }
  }

  /* Cookie banner — stack content + buttons vertically on narrow screens
     so the three buttons stay equally prominent (BGH compliance) instead
     of being squeezed onto one line. */
  @media (max-width: 760px) {
    .r-cookie-banner > div {
      grid-template-columns: 1fr !important;
      gap: 14px !important;
    }
    .r-cookie-actions { justify-content: stretch !important; }
    .r-cookie-actions button { flex: 1 1 auto; min-width: 0; }
  }

  /* Form inputs — focus ring + smooth border. Padding generous enough
     to feel premium (16/18) and rounded (12px) to soften the form. */
  .r-input {
    width: 100%; padding: 16px 18px;
    border-radius: 12px; background: var(--c-bg);
    border: 1px solid var(--c-line);
    font-size: 15px; font-family: inherit;
    color: var(--c-ink); outline: none;
    box-sizing: border-box;
    transition: border-color 200ms ease, box-shadow 200ms ease,
                background-color 200ms ease;
  }
  textarea.r-input { resize: vertical; min-height: 96px; line-height: 1.5; }
  .r-input::placeholder { color: var(--c-sub); opacity: 0.7; }
  .r-input:hover:not(:focus) { border-color: #c9c4b8; }
  .r-input.is-error { border-color: #e8b59a; }
  .r-input:focus {
    border-color: #5a6b3f !important;
    box-shadow: 0 0 0 3px rgba(90, 107, 63, 0.14);
  }
  /* Checkbox row — wraps input + label text. Extended in #14 with the
     flex/gap/font/color rules that used to be inline. */
  .r-checkbox {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 13px; color: var(--c-sub); line-height: 1.5;
    cursor: pointer;
  }
  /* Keyboard focus — accentColor doesn't draw a focus ring on Safari,
     so we add an explicit outline that matches the input focus tone. */
  .r-checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid #5a6b3f;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* AddButton (Vormerken pill on oil cards) and AddIcon (round "+" on
     olive cards) share the same dark-ink → dark-olive (sage) hover
     palette. Both lift slightly on hover for a soft motion cue.
     Pulse state (after add) snaps to sage; success-feedback intentionally
     matches the hover colour so the transition feels continuous. */
  .r-add-btn {
    background: var(--c-ink); color: var(--c-bg); border: none;
    padding: 12px 18px; border-radius: var(--r-pill);
    font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background-color .25s ease, transform .2s ease;
  }
  .r-add-btn.is-pulse { background: var(--c-sage); }
  .r-add-btn:hover {
    background-color: var(--c-sage) !important;
    transform: translateY(-1px);
  }
  .r-add-btn:active { transform: scale(0.94); }

  /* Olive-card "+" icon — visually matches r-add-btn (dark fill + cream
     glyph), just rendered as a 36px circle. Hover: sage + lift, same as
     r-add-btn. Uses !important on bg/border to beat the more general
     .r-icon-btn:hover rule below (the JSX applies both classes). */
  .r-add-icon {
    background: var(--c-ink);
    border: none;
    width: 36px; height: 36px;
    border-radius: 50%; font-size: 18px; cursor: pointer;
    color: var(--c-bg);
    transition: background-color .25s ease, transform .2s ease;
  }
  .r-add-icon.is-pulse { background: var(--c-sage); color: var(--c-bg); }

  /* Small icon buttons (+/- qty in widget, × close). The olive-card "+"
     also picks this up via shared className — its hover override comes
     after this block so it wins the cascade tie-break. */
  .r-icon-btn {
    transition: background-color 200ms ease, color 200ms ease,
                border-color 200ms ease, transform 150ms ease;
  }
  .r-icon-btn:hover:not(:disabled) {
    background-color: rgba(168, 178, 137, 0.20) !important;
    border-color: rgba(168, 178, 137, 0.55) !important;
    color: #5a6b3f !important;
  }
  .r-icon-btn:active:not(:disabled) { transform: scale(0.94); }

  /* Olive-card "+" hover: must come AFTER .r-icon-btn:hover so the
     full-sage fill wins the !important tie (same specificity, later
     rule wins). Without this ordering the rgba(168,178,137,0.20) tint
     from .r-icon-btn:hover overrides our intended sage fill. */
  .r-add-icon:hover:not(:disabled) {
    background-color: var(--c-sage) !important;
    border-color: transparent !important;
    color: var(--c-bg) !important;
    transform: translateY(-1px);
  }

  /* CTA pill — sage shift on hover, deeper sage on active. Matches the
     "all dark buttons → sage on hover" pattern used across the site
     (oil Vormerken, olive +, mobile-menu CTA, bubble-btn, etc.). */
  .r-cta-pill { transition: background-color 200ms ease, transform 180ms cubic-bezier(.4,0,.2,1), box-shadow 200ms ease; }
  .r-cta-pill:hover { background-color: var(--c-sage) !important; }
  .r-cta-pill:active { background-color: #4a5832 !important; }

  /* Unified hover for all dark/ink primary buttons across the site:
     fill shifts to sage (var(--c-sage), #5a6b3f) and the button gains
     a 1px lift. Transitions are inherited from the generic button
     transition rule above; bg-color is included in that transition.
     The grouped selector pulls in every dark button so hover behaviour
     stays consistent — header CTA, mobile-menu CTA, bio-section CTA,
     cart-widget CTA, modal add-to-enquiry, shop product side-CTA. */
  .r-mobile-menu-cta:hover:not(:disabled),
  .r-bio-cta:hover:not(:disabled),
  .r-anfrage-bubble-btn:hover:not(:disabled),
  .r-modal-add-btn:hover:not(:disabled),
  .r-aside-cta:hover:not(:disabled) {
    background-color: var(--c-sage) !important;
  }

  /* Design-system Button (window.DS.Button) gets variant classes from
     the JSX so we can layer CSS hover/transition on top of its inline
     base styles. The submit "Anfrage senden / Send enquiry" buttons in
     the cart-widget and the big modal form both use variant="primary",
     so this is where they get their hover, shadow, and lift —
     previously they were flat ink pills with no feedback at all. */
  .r-ds-btn {
    transition: background-color .25s ease, transform .2s ease,
                box-shadow .25s ease;
  }
  .r-ds-btn--primary {
    /* Soft default shadow lifts the dark pill off the modal/widget
       background — gives it depth without a heavy drop-shadow. */
    box-shadow: 0 6px 18px rgba(20, 22, 18, 0.18);
  }
  /* On hover the button "switches state" wholesale — bg, text, and a
     subtle outline all change, not just the fill. Cream text → pure
     white gives the button an "activated" feel; the 1px white-alpha
     border defines the silhouette against the sage fill. */
  .r-ds-btn--primary:hover:not(:disabled) {
    background-color: var(--c-sage) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 10px 26px rgba(90, 107, 63, 0.32);
    transform: translateY(-1px);
  }
  .r-ds-btn--primary:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 4px 12px rgba(20, 22, 18, 0.20);
  }
  /* Sage variant (light olive fill) — hover deepens to full sage with
     pure-white text + subtle outline, matching the primary language. */
  .r-ds-btn--sage:hover:not(:disabled) {
    background-color: var(--c-sage) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    transform: translateY(-1px);
  }
  /* Secondary (cream surface, ink text, line border) — hover swaps
     to ink-fill with pure-white text + a defined ink border so the
     button reads as "promoted" to primary strength. */
  .r-ds-btn--secondary:hover:not(:disabled) {
    background-color: var(--c-ink) !important;
    color: #ffffff !important;
    border: 1px solid var(--c-ink) !important;
    transform: translateY(-1px);
  }

  /* FAQ — smooth open/close using the grid-rows trick (Chrome 117+, FF 121+, Safari 17+).
     Falls back to instant open in older browsers — content still accessible. */
  .r-faq-summary { transition: opacity 180ms ease; }
  .r-faq-summary:hover { opacity: 0.65; }
  .r-faq-answer-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 320ms cubic-bezier(.4,0,.2,1),
                opacity 220ms ease 60ms;
    opacity: 0;
  }
  .r-faq-answer-inner {
    overflow: hidden;
    min-height: 0;
  }
  .r-faq-item.open .r-faq-answer-wrap {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .r-faq-item.open .r-faq-toggle {
    transform: rotate(45deg);
  }

  /* ===== Typography scale (desktop defaults; responsive overrides below) =====
     H2 = section headings ("Vier Sorten.")    — three sizes via modifier
     H3 = card / item titles ("Dimitris Olios O2") — three sizes via modifier
     Hierarchy must hold across breakpoints: H2 always > H3-lg. */
  .r-h2        { font-size: 56px; font-weight: 600; letter-spacing: -0.03em;
                 line-height: 1.05; margin: 0; }
  .r-h2--xl    { font-size: 64px; }
  .r-h2--sm    { font-size: 48px; }
  .r-h3        { font-size: 20px; font-weight: 600; letter-spacing: -0.01em;
                 line-height: 1.2; margin: 0; }
  .r-h3--lg    { font-size: 30px; letter-spacing: -0.02em; }
  .r-h3--md    { font-size: 24px; letter-spacing: -0.02em; }

  /* Recipe card: grid template areas let us swap head/img order on mobile
     while keeping desktop visual identical (image-on-top). */
  .r-recipe-card { display: grid; grid-template-areas: "img" "head" "body"; }
  .r-recipe-card-img  { grid-area: img; }
  .r-recipe-card-head { grid-area: head; }
  .r-recipe-card-body { grid-area: body; }

  /* ===== Design system base components — extracted from design-system.jsx
     (CSS refactor task #14, file 2/5). Static structural styles only;
     prop-driven dynamics (Pill background, Button variants, PriceTag size)
     intentionally kept inline in JSX since they're caller-controlled. */
  .ds-eyebrow {
    font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
    font-weight: 600; color: var(--c-sage);
  }
  .ds-italic {
    font-style: italic; color: var(--c-sage);
    font-family: "Fraunces", Georgia, serif; font-weight: 400;
  }
  .ds-wordmark {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
    color: var(--c-ink);
  }
  .ds-section-base { scroll-margin-top: 80px; }

  /* SpecGrid — used on product pages (oils, olives) */
  .r-spec-grid {
    display: grid; gap: 0;
    border: 1px solid var(--c-line); border-radius: var(--r-md);
    overflow: hidden;
  }
  .r-spec-grid-cell {
    padding: 32px 28px;
    border-right: 1px solid var(--c-line);
  }
  .r-spec-grid-cell:last-child { border-right: none; }
  .r-spec-grid-label {
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--c-sub); font-weight: 500; margin-bottom: 14px;
  }
  .r-spec-grid-value {
    font-size: 22px; font-weight: 500; letter-spacing: -0.015em;
    line-height: 1.25;
    font-family: "Fraunces", Georgia, serif;
  }

  /* BurgerButton — display:none default, overridden to flex in responsive
     media query for ≤960px viewports. */
  .r-burger {
    display: none;
    background: transparent; border: none; cursor: pointer;
    padding: 8px; margin-left: 4px;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
  }

  /* MobileMenu overlay — uses .is-open modifier for fade-in transition */
  /* Mobile menu has two visual modes:
       • Phone (≤640px) — fullscreen overlay (default rules below).
       • Tablet (641-960px) — right-side drawer panel ~440px wide with
         a dimmed backdrop on the rest of the screen (overrides in the
         responsive section further down).
     The tablet variant keeps the same DOM/components and reuses the
     same is-open state — only positioning, sizing, and the backdrop
     pseudo-element differ.
     Background: cream at 92% opacity + backdrop-filter blur — gives a
     light frosted-glass feel so the page texture is faintly visible
     through the menu without compromising readability. */
  /* Asymmetric timing — open is snappy (280ms ease-in-out), close is
     slower and softer (500ms ease-out-expo) so the menu doesn't feel
     yanked away. CSS transitions take the timing from the *destination*
     state: .is-open's transition runs on entry, base class's runs on
     exit. */
  .r-mobile-menu {
    position: fixed; inset: 0;
    background: rgba(250, 250, 247, 0.92);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    z-index: 40;
    opacity: 0; pointer-events: none;
    transform: translateY(8px);
    transition: opacity 500ms cubic-bezier(.16, 1, .3, 1),
                transform 500ms cubic-bezier(.16, 1, .3, 1);
    display: flex; flex-direction: column;
  }
  .r-mobile-menu.is-open {
    opacity: 1; pointer-events: auto;
    transform: translateY(0);
    transition: opacity 280ms cubic-bezier(.4, 0, .2, 1),
                transform 280ms cubic-bezier(.4, 0, .2, 1);
  }
  .r-mobile-menu-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 24px; border-bottom: 1px solid var(--c-line);
    min-height: 76px;
  }
  .r-mobile-menu-wordmark {
    display: flex; align-items: center; gap: 12px;
    font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  }
  .r-mobile-menu-nav {
    flex: 1; display: flex; flex-direction: column;
    padding: 40px 32px; gap: 4px;
    overflow-y: auto;
  }
  /* Mobile-menu nav links — calmer than hero-text scale. Was clamp(32, 7vw,
     44) which read as banner-headline; reduced to 22-28px so it functions
     as a navigation list, not a typographic statement. */
  .r-mobile-menu-link-base {
    font-family: "Fraunces", Georgia, serif;
    font-size: clamp(22px, 5.5vw, 28px);
    font-weight: 500; letter-spacing: -0.01em;
    color: var(--c-ink); text-decoration: none;
    padding: 14px 0;
    border-bottom: 1px solid var(--c-line);
  }
  /* Bottom-pinned CTA. env(safe-area-inset-bottom) accounts for the
     iPhone home-indicator strip; falls back to 0 elsewhere. The
     gap of 28px between language switcher and CTA gives clear visual
     separation between "secondary controls" and the primary action. */
  .r-mobile-menu-cta-wrap {
    padding: 24px 32px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--c-line);
    display: flex; flex-direction: column; gap: 28px;
  }
  /* Language switcher above the CTA — same DE | EN paradigm as desktop
     header, sized for touch. Active language plain ink, inactive sub
     gray with a tappable underline. */
  .r-mobile-menu-lang {
    display: flex; justify-content: center; align-items: center;
    gap: 12px;
    font-size: 14px; font-weight: 600; letter-spacing: 0.05em;
  }
  .r-mobile-menu-lang-active { color: var(--c-ink); }
  .r-mobile-menu-lang-link {
    color: var(--c-sub); text-decoration: none;
    padding: 4px 6px;
  }
  .r-mobile-menu-lang-divider { color: var(--c-line); }
  .r-mobile-menu-cta {
    width: 100%;
    background: var(--c-ink); color: var(--c-bg); border: none;
    padding: 18px 24px; border-radius: var(--r-pill);
    font-size: 15px; font-weight: 600; cursor: pointer;
    font-family: inherit;
  }

  /* When mobile menu is open, hide the floating widgets (Hanc voice pill,
     Anfrage cart bubble) so they don't obscure the bottom CTA. Toggled
     by MobileMenu effect via body.classList.
     Asymmetric timing matches the menu: fast disappear when menu opens,
     slow gentle re-appear when menu closes. CSS transitions take timing
     from the destination state. */
  .r-anfrage-widget,
  hanc-ai-pill-floating-call {
    /* Used when body.menu-open is REMOVED (menu closing): slow fade-in */
    transition: opacity 500ms cubic-bezier(.16, 1, .3, 1);
  }
  body.menu-open .r-anfrage-widget,
  body.menu-open hanc-ai-pill-floating-call {
    opacity: 0;
    pointer-events: none;
    /* Used when body.menu-open is ADDED (menu opening): fast fade-out */
    transition: opacity 280ms cubic-bezier(.4, 0, .2, 1);
  }

  /* ===== v3-app landing — extracted from v3-app.jsx (#14, file 5/5).
     Sections: header, hero, oils, heritage, bio, olives, recipes,
     FAQ, kontakt CTA, footer. Static structural styles only;
     runtime hover transforms (translateY -2/-3) stay inline since they
     toggle on mouse events. */
  .r-app-root {
    width: 100%;
    font-family: "Inter Tight", "Helvetica Neue", system-ui, sans-serif;
    color: var(--c-ink); background: var(--c-bg); position: relative;
  }
  /* Shop pages need full viewport height fallback so footer sticks to bottom
     even when the page content (e.g. RecipePage with short lists) is short. */
  .r-app-root--min-vh { min-height: 100vh; }

  /* Header */
  .r-header {
    border-bottom: 1px solid var(--c-line);
    position: sticky; top: 0;
    background: rgba(220, 215, 235, 0.7);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    z-index: 60;
  }
  .r-header-row {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 24px; padding-bottom: 24px;
  }
  .r-header-logo {
    display: flex; align-items: center; gap: 12px;
    font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  }
  /* When the header logo is wrapped in <a> (shop pages back-to-home link) */
  .r-header-logo-link {
    text-decoration: none; color: var(--c-ink);
  }
  .r-nav {
    display: flex; gap: 32px; font-size: 14px; font-weight: 500;
  }
  .r-nav-link { color: var(--c-ink); text-decoration: none; }
  .r-header-right {
    display: flex; gap: 12px; align-items: center;
  }
  .r-header-kontakt-link {
    font-size: 14px; color: var(--c-sub); text-decoration: none; cursor: pointer;
  }
  .r-lang-switch {
    font-size: 13px; font-weight: 600; letter-spacing: 0.05em;
    display: flex; align-items: center; gap: 6px; color: var(--c-sub);
  }
  .r-lang-active { color: var(--c-ink); }
  .r-lang-inactive { color: var(--c-sub); text-decoration: none; }
  .r-lang-divider { opacity: 0.4; }
  .r-cta-pill {
    background: var(--c-ink); color: var(--c-bg); border: none;
    padding: 10px 18px; border-radius: var(--r-pill);
    font-size: 14px; font-weight: 500; cursor: pointer;
  }

  /* Hero */
  .r-hero {
    position: relative; height: min(820px, 92vh); min-height: 680px;
    overflow: hidden; margin-top: -1px;
  }
  .r-hero-img-wrap {
    position: absolute; left: -5%; top: -5%;
    width: 110%; height: 110%;
    object-fit: cover; will-change: transform; transform-origin: center;
  }
  .r-hero-gradient {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20,22,18,0.28) 0%, rgba(20,22,18,0.06) 22%, rgba(20,22,18,0.0) 38%, rgba(20,22,18,0.15) 55%, rgba(20,22,18,0.55) 78%, rgba(20,22,18,0.85) 100%);
  }
  .r-hero-overlay {
    position: absolute; inset: 0; padding: 0;
  }
  .r-hero-eyebrow { position: absolute; top: 36px; left: 56px; color: #f5f1e8; }
  .r-hero-eyebrow-text {
    font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
    font-weight: 500;
  }
  .r-hero-eyebrow-dot { color: var(--c-sage-light); }
  .r-coord-plate {
    position: absolute; top: 30px; right: 56px;
    padding: 12px 18px; background: rgba(250,250,247,0.12);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(250,250,247,0.2); border-radius: var(--r-sm);
    color: #f5f1e8; font-feature-settings: "tnum"; min-width: 240px;
  }
  .r-coord-row {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
  }
  .r-coord-label {
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7;
  }
  .r-coord-value {
    font-size: 13px; font-weight: 600; margin-top: 3px; letter-spacing: 0.02em;
  }
  .r-coord-pulse {
    width: 8px; height: 8px; border-radius: 50%; background: var(--c-sage-light);
  }
  .r-coord-row-gps {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px dashed rgba(245,241,232,0.25);
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
  }
  .r-coord-gps-label {
    font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
    opacity: 0.55; font-weight: 500;
  }
  .r-coord-gps-value {
    font-family: "SF Mono", "Menlo", "Consolas", monospace;
    font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
    color: #f5f1e8; opacity: 0.92;
    display: flex; align-items: baseline; gap: 8px;
  }
  .r-hero-content {
    position: absolute; left: 56px; right: 56px; bottom: 120px;
    color: #f5f1e8; max-width: 1100px;
  }
  .r-hero-headline {
    font-size: clamp(56px, 7.2vw, 110px); line-height: 0.98; font-weight: 500;
    letter-spacing: -0.034em; margin: 0;
    text-shadow: 0 2px 40px rgba(0,0,0,0.25); max-width: 1080px;
  }
  .r-hero-headline-italic {
    font-style: italic; font-weight: 400; color: #e6dcc1;
    font-family: "Fraunces", Georgia, serif;
  }
  .r-hero-sub {
    font-size: 18px; line-height: 1.55; color: rgba(245,241,232,0.85);
    margin-top: 28px; max-width: 620px; font-weight: 400;
  }
  .r-hero-buttons { display: flex; gap: 12px; margin-top: 36px; }
  .r-hero-btn-primary {
    text-decoration: none; background: #f5f1e8; color: var(--c-ink);
    padding: 16px 28px; border-radius: var(--r-pill);
    font-size: 15px; font-weight: 500;
  }
  .r-hero-btn-secondary {
    text-decoration: none; background: rgba(245,241,232,0.08);
    color: #f5f1e8; border: 1px solid rgba(245,241,232,0.35);
    padding: 16px 28px; border-radius: var(--r-pill);
    font-size: 15px; font-weight: 500;
    backdrop-filter: blur(12px);
  }
  .r-hero-scroll {
    position: absolute; bottom: 36px; right: 56px;
    color: rgba(245,241,232,0.7); font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase;
    display: flex; align-items: center; gap: 10px;
    writing-mode: horizontal-tb;
  }
  .r-hero-scroll-line {
    width: 32px; height: 1px; background: rgba(245,241,232,0.4);
  }

  /* Section padding helpers */
  .r-section--big { padding: 120px 0; scroll-margin-top: 80px; }
  .r-section--medium { padding: 80px 0; scroll-margin-top: 80px; }
  .r-section--surface { background: var(--c-surface); }
  .r-section--no-top-pad { padding: 0 0 120px; scroll-margin-top: 80px; }
  .r-head-row {
    display: flex; justify-content: space-between; align-items: end;
    margin-bottom: 56px;
  }
  .r-head-row--small { margin-bottom: 48px; }
  .r-head-link {
    font-size: 14px; color: var(--c-ink); font-weight: 500; text-decoration: none;
  }

  /* Oil cards */
  .r-grid-oils {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  }
  .r-oil-card {
    background: var(--c-surface); border-radius: var(--r-lg);
    padding: 32px; cursor: pointer;
    display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px;
    align-items: center;
    transition: transform .25s ease;
  }
  .r-oil-card-img {
    width: 100%; aspect-ratio: 1/1; border-radius: 50%;
    overflow: hidden;
    background: var(--c-bg); box-shadow: 0 8px 30px rgba(0,0,0,0.06);
  }
  .r-oil-card-head {
    display: flex; justify-content: space-between; align-items: center;
  }
  .r-oil-tag {
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    font-weight: 600; color: var(--c-sage); background: var(--c-bg);
    padding: 4px 10px; border-radius: var(--r-pill);
  }
  .r-oil-acid { font-size: 13px; color: var(--c-sub); }
  .r-oil-sub { font-size: 14px; color: var(--c-sub); }
  .r-oil-short {
    font-size: 14px; line-height: 1.55; color: var(--c-sub); margin-top: 14px;
  }
  .r-oil-price-block {
    margin-top: 24px; padding-top: 20px;
    border-top: 1px solid var(--c-line);
    display: grid; grid-template-columns: 1fr auto;
    align-items: end; gap: 20px;
  }
  .r-oil-price-label {
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--c-sub); font-weight: 500; margin-bottom: 6px;
  }
  .r-oil-price-row {
    display: flex; align-items: baseline; gap: 4px;
    font-family: "Fraunces", Georgia, serif;
  }
  .r-oil-price-num {
    font-size: 46px; font-weight: 500; letter-spacing: -0.03em; line-height: 1;
  }
  .r-oil-price-currency {
    font-size: 22px; font-weight: 400; color: var(--c-sub); font-style: italic;
  }
  .r-oil-price-other {
    font-size: 18px; font-weight: 400; color: var(--c-sub);
    font-style: italic;
    font-family: "Inter Tight", sans-serif; margin-left: 0;
  }
  .r-oil-mehr-btn {
    background: transparent; color: var(--c-ink); border: none;
    padding: 0; margin-top: 14px; font-size: 13px; font-weight: 500;
    cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    border-bottom: 1px solid var(--c-ink); padding-bottom: 2px;
  }
  .r-oil-mehr-arrow { font-size: 14px; }

  /* Heritage */
  .r-heritage-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
    align-items: center;
  }
  .r-img-tall {
    width: 100%; height: 440px; object-fit: cover; border-radius: var(--r-md);
  }
  .r-paragraph-lg {
    font-size: 17px; line-height: 1.65; color: var(--c-ink); max-width: 520px;
    margin-bottom: 18px;
  }
  .r-paragraph-lg--sub {
    font-size: 17px; line-height: 1.65; color: var(--c-sub); max-width: 520px;
  }

  /* Bio */
  .r-bio-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
    align-items: start;
  }
  .r-bio-sticky { position: sticky; top: 120px; }
  .r-bio-paragraph {
    font-size: 17px; line-height: 1.65; color: var(--c-sub);
    max-width: 520px; margin: 0 0 24px;
  }
  .r-bio-quote {
    padding: 20px 24px; background: var(--c-surface);
    border-radius: 10px;
    font-size: 15px; color: var(--c-ink); line-height: 1.5;
    font-style: italic;
    font-family: "Fraunces", Georgia, serif;
  }
  .r-bio-benefits-col { display: grid; gap: 16px; }
  .r-bio-benefits-title {
    font-size: 13px; color: var(--c-sub); letter-spacing: 0.16em;
    text-transform: uppercase; font-weight: 600; margin-bottom: 4px;
  }
  .r-bio-benefit {
    padding: 24px 28px; background: var(--c-surface);
    border-radius: 10px;
    display: grid; grid-template-columns: 48px 1fr; gap: 20px; align-items: start;
  }
  .r-bio-benefit-num {
    width: 48px; height: 48px; border-radius: 50%; background: var(--c-bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 600; color: var(--c-sage);
    font-family: "Fraunces", Georgia, serif;
  }
  .r-bio-benefit-desc {
    font-size: 14px; line-height: 1.6; color: var(--c-sub); margin: 0;
  }
  .r-bio-cta {
    margin-top: 8px;
    background: var(--c-ink); color: var(--c-bg); border: none;
    padding: 16px 24px; border-radius: var(--r-pill);
    font-size: 14px; font-weight: 600; cursor: pointer;
    align-self: start;
  }

  /* Olives */
  .r-olives-price-label { font-size: 14px; color: var(--c-sub); }
  .r-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px; }
  .r-olive-card {
    background: var(--c-bg); border-radius: var(--r-md);
    padding: 16px; cursor: pointer;
    transition: transform .25s ease;
  }
  .r-olive-img-wrap {
    aspect-ratio: 1/1; overflow: hidden;
    border-radius: var(--r-sm); margin-bottom: 16px;
  }
  .r-olive-sub { font-size: 13px; color: var(--c-sub); }
  .r-olive-meta {
    font-size: 11px; color: var(--c-sage); margin-top: 10px;
    text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
  }
  .r-olive-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 16px;
  }
  .r-olive-price-row {
    display: flex; align-items: baseline; gap: 3px;
    font-family: "Fraunces", Georgia, serif;
  }
  .r-olive-price-num {
    font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 1;
  }
  .r-olive-price-cents {
    font-size: 18px; font-weight: 500; letter-spacing: -0.02em;
  }
  .r-olive-price-currency {
    font-size: 18px; font-weight: 400; color: var(--c-sub);
    font-style: italic; margin-left: 2px;
  }

  /* Recipes banner + cards */
  .r-rezepte-banner { width: 100%; overflow: hidden; }
  .r-rezepte-banner-img {
    width: 100%; height: 240px; object-fit: cover;
    object-position: center; display: block;
  }
  .r-h2--recipes { margin: 64px 0 0; }
  .r-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
  .r-recipe-card {
    background: var(--c-surface); border-radius: var(--r-md);
    overflow: hidden; cursor: pointer;
    transition: transform .25s ease;
  }
  .r-recipe-card-head { padding: 24px 24px 0; }
  .r-recipe-card-img {
    width: 100%; height: 240px; object-fit: cover; display: block;
  }
  .r-recipe-card-body { padding: 8px 24px 24px; }
  .r-recipe-card-desc {
    font-size: 14px; color: var(--c-sub); line-height: 1.55; margin: 0;
  }
  .r-recipe-card-cta {
    margin-top: 14px; font-size: 13px; color: var(--c-ink); font-weight: 500;
  }

  /* News feed — landing-page horizontal cards in a 2-col grid.
     Card layout: image left (~40%), text right (~60%) on desktop+tablet;
     stacks back to image-top / text-below on mobile for legibility.
     Container layout: 2 cols desktop, 1 col tablet+mobile.
     Overflow behaviour: when more than 4 articles exist (--scroll modifier
     applied from JSX), the container caps height to roughly 2.5 rows so
     ~5 cards "peek" and the remainder are reached via native vertical
     scroll. ≤4 articles render as a flat grid with no max-height. */
  .r-news-head-row { align-items: end; }

  .r-news-feed {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 24px;
  }
  .r-news-feed--scroll {
    /* Caps height to roughly 2.5 rows (~220px card + 24px gap). The
       fade-out mask below dissolves the cropped bottom row so the cut
       reads as intentional rather than abrupt. */
    max-height: 598px;
    overflow-y: auto;
    scroll-snap-type: y proximity;
    /* Inner padding: 4px top, 8px sides, 40px bottom — the bottom
       buffer absorbs the hover shadow (translateY(-3px) +
       0 18px 40px) so it isn't clipped by the overflow box. Negative
       horizontal margin keeps the grid visually flush with the
       section's container. */
    padding: 4px 8px 40px;
    margin-left: -8px; margin-right: -8px;
    /* Hide scrollbar — feed pattern, no chrome needed. The fade-out at
       the bottom edge is the affordance that signals "more below". */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Fade-out at the bottom: opaque for most of the height, then
       gradient to transparent over the last ~80px. mask-image works
       with overflow:auto (the mask follows the visible viewport, not
       the scrolled content). */
    -webkit-mask-image: linear-gradient(180deg,
      #000 0%, #000 calc(100% - 80px), transparent 100%);
            mask-image: linear-gradient(180deg,
      #000 0%, #000 calc(100% - 80px), transparent 100%);
  }
  .r-news-feed--scroll::-webkit-scrollbar { display: none; }

  .r-news-card {
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    overflow: hidden;
    cursor: pointer;
    text-decoration: none; color: inherit;
    transition: transform .25s ease, box-shadow .25s ease;
    /* Horizontal card: image left, text right. 40/60 split keeps the
       image visible enough to anchor the article while leaving the text
       column wide enough for a 3-line excerpt. */
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: stretch;
    scroll-snap-align: start;
  }
  .r-news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
  }
  .r-news-card-imgwrap {
    /* Wrapper holds the floor for image height — the card row stretches
       to at least this height even if body content is shorter. <Picture>
       renders <picture><img/></picture>; both fill the wrapper. */
    min-height: 220px;
    height: 100%;
    overflow: hidden;
  }
  .r-news-card-imgwrap picture,
  .r-news-card-imgwrap > * {
    width: 100%; height: 100%; display: block;
  }
  .r-news-card-img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }
  .r-news-card-body {
    padding: 20px 24px;
    display: flex; flex-direction: column;
    /* Push CTA to bottom so cards align across rows even when titles or
       excerpts wrap to different line counts. */
    justify-content: space-between;
  }
  .r-news-card-meta {
    display: flex; align-items: center; gap: 12px;
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--c-sub); font-weight: 600;
    margin-bottom: 10px;
  }
  .r-news-card-date { color: var(--c-sage); }
  .r-news-card-tag-sep { color: var(--c-line); }
  .r-news-card-title {
    font-size: 20px; font-weight: 600; letter-spacing: -0.015em;
    line-height: 1.25; color: var(--c-ink);
    margin: 0 0 10px;
  }
  .r-news-card-excerpt {
    font-size: 14px; color: var(--c-sub); line-height: 1.55;
    margin: 0 0 14px;
    /* Cap excerpt at 3 lines so card heights stay roughly aligned.
       Titles vary 1–2 lines; clipping the excerpt keeps the row rhythm. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .r-news-card-cta {
    font-size: 13px; color: var(--c-ink); font-weight: 500;
    margin-top: auto;
  }

  /* News — full article page (NewsPage in shop/page-templates.jsx).
     Hero banner mirrors RecipePage hero proportions; meta strip below
     gives date/author/tags; body paragraphs sit in a comfortable column. */
  .r-news-meta-strip {
    display: flex; flex-wrap: wrap; gap: 18px;
    align-items: center;
    padding: 24px 0 0;
    font-size: 13px; color: var(--c-sub);
  }
  .r-news-meta-date { color: var(--c-sage); font-weight: 600; }
  .r-news-meta-author { font-weight: 500; }
  .r-news-meta-tags { display: flex; gap: 8px; flex-wrap: wrap; }
  .r-news-tag {
    background: var(--c-surface);
    padding: 4px 10px; border-radius: var(--r-pill);
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    font-weight: 600; color: var(--c-sage);
  }
  /* News article body grid — text on the left, sticky media aside on
     the right. The aside fills the previously-empty space next to body
     paragraphs. Collapses to single column on tablet/mobile (rules in
     responsive section). */
  .r-news-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
    margin-top: 32px;
  }
  .r-news-grid:has(.r-news-aside) > .r-news-body {
    /* When the aside is present, body uses its full column width.
       (max-width was needed for old single-column layout to keep
       text readable; now the column itself is the constraint.) */
    max-width: none;
  }
  .r-news-body {
    max-width: 720px;  /* fallback for articles without aside */
  }
  .r-news-paragraph {
    font-size: 17px; line-height: 1.75; color: var(--c-ink);
    margin: 0 0 22px;
  }

  /* Sticky aside — sticks below the page header (108px = header height)
     so video stays visible while scrolling through the body. Stack
     contains video first (if present), then gallery photos. */
  .r-news-aside {
    position: sticky; top: 108px;
    display: flex; flex-direction: column;
    gap: 16px;
  }

  .r-news-back-link {
    display: inline-block; margin-top: 32px;
    font-size: 14px; color: var(--c-sub); text-decoration: none;
  }
  .r-news-back-link:hover { color: var(--c-ink); }

  /* Embedded video — responsive 16:9 frame. Legacy class, still used
     by some templates that haven't migrated to the launcher pattern. */
  .r-news-video {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--c-surface);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  }
  .r-news-video iframe {
    width: 100%; height: 100%; border: 0; display: block;
  }

  /* ── Video launcher: thumbnail with play overlay ────────────────
     Replaces the inline iframe in news article aside. Click → opens
     a modal with the full player. Keeps the aside compact while
     letting the user enlarge for proper viewing. */
  .r-news-video-launcher {
    position: relative; display: block;
    width: 100%; aspect-ratio: 16 / 9;
    border: 0; padding: 0; cursor: pointer;
    background: var(--c-surface);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .r-news-video-launcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
  }
  .r-news-video-launcher-img,
  .r-news-video-launcher picture,
  .r-news-video-launcher picture img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }
  .r-news-video-launcher-play {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 64px; height: 64px;
    pointer-events: none;
    transition: transform .25s ease;
  }
  .r-news-video-launcher:hover .r-news-video-launcher-play {
    transform: translate(-50%, -50%) scale(1.08);
  }
  .r-news-video-launcher-play svg {
    width: 100%; height: 100%; display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.30));
  }

  /* ── Video modal: centered popup with the full player ────────────
     Backdrop covers the page (fixed + inset:0 + blur), player
     is 16:9 capped at 90% viewport — large enough to read details,
     small enough to keep modal context. Native player controls
     handle fullscreen escalation. */
  @keyframes r-news-video-modal-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes r-news-video-modal-frame-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
  }
  .r-news-video-modal {
    position: fixed; inset: 0;
    z-index: 200;
    background: rgba(20, 22, 18, 0.78);
    backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    padding: 32px;
    animation: r-news-video-modal-in .2s ease;
  }
  .r-news-video-modal-close {
    position: absolute; top: 16px; right: 16px;
    width: 44px; height: 44px;
    border: 0; border-radius: 50%;
    background: rgba(245, 241, 232, 0.10);
    color: #f5f1e8;
    font-size: 26px; line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .2s ease, transform .15s ease;
  }
  .r-news-video-modal-close:hover {
    background: rgba(245, 241, 232, 0.22);
    transform: scale(1.05);
  }
  .r-news-video-modal-frame {
    position: relative;
    width: min(1280px, 90vw);
    aspect-ratio: 16 / 9;
    max-height: 86vh;
    background: #000;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55);
    animation: r-news-video-modal-frame-in .25s cubic-bezier(.4,0,.2,1);
  }
  .r-news-video-modal-video {
    width: 100%; height: 100%;
    border: 0; display: block;
  }
  @media (max-width: 640px) {
    .r-news-video-modal { padding: 16px; }
    .r-news-video-modal-frame { width: 100%; max-height: none; }
    .r-news-video-modal-close { top: 8px; right: 8px; width: 40px; height: 40px; }
  }

  /* Photo gallery — vertical stack inside aside. Each photo full-width
     of the aside column, fixed-ish height for visual rhythm. Mobile
     scales down further (rules in responsive section). */
  .r-news-gallery {
    display: flex; flex-direction: column; gap: 12px;
  }
  .r-news-gallery-img {
    width: 100%; height: 240px;
    object-fit: cover; display: block;
    border-radius: var(--r-md);
  }

  /* FAQ */
  .r-faq-grid {
    display: grid; grid-template-columns: 1fr 1.5fr; gap: 64px;
  }
  .r-faq-item {
    border-top: 1px solid var(--c-line); padding: 24px 0;
  }
  .r-faq-summary {
    cursor: pointer; display: flex; width: 100%;
    justify-content: space-between; align-items: baseline; gap: 24px;
    background: transparent; border: none; padding: 0;
    text-align: left; font-family: inherit; color: inherit;
  }
  .r-faq-question {
    font-size: 20px; font-weight: 600; letter-spacing: -0.01em;
  }
  .r-faq-toggle {
    font-size: 24px; color: var(--c-sub); font-weight: 300; flex-shrink: 0;
    transition: transform 280ms cubic-bezier(.4,0,.2,1);
  }
  .r-faq-answer-text {
    font-size: 15px; line-height: 1.65; color: var(--c-sub);
    margin-top: 12px; max-width: 680px; white-space: pre-line;
  }

  /* Kontakt CTA card */
  .r-kontakt-card {
    background: var(--c-ink); color: var(--c-bg);
    border-radius: 28px; padding: 80px 56px;
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px;
    align-items: center;
  }
  .r-kontakt-paragraph {
    font-size: 16px; color: #bdbdb5; line-height: 1.55; max-width: 480px;
  }
  .r-kontakt-actions {
    display: flex; flex-direction: column; gap: 12px;
  }
  .r-kontakt-cta-primary {
    background: var(--c-sage-light); color: var(--c-ink); border: none;
    padding: 18px 24px; border-radius: var(--r-pill);
    font-size: 15px; font-weight: 600; cursor: pointer;
  }
  .r-kontakt-cta-ghost {
    background: rgba(245,241,232,0.08); color: #f5f1e8;
    border: 1px solid rgba(245,241,232,0.25);
    padding: 16px 22px; border-radius: var(--r-pill);
    font-size: 14px; font-weight: 500; text-decoration: none;
    text-align: center; backdrop-filter: blur(8px);
  }

  /* Footer */
  .r-footer-wrap {
    padding: 60px 0 40px; border-top: 1px solid var(--c-line);
  }
  .r-footer {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
  }
  .r-footer-brand {
    font-size: 22px; font-weight: 600; letter-spacing: -0.01em;
  }
  .r-footer-tagline {
    font-size: 14px; color: var(--c-sub); margin-top: 14px;
    max-width: 340px; line-height: 1.55;
  }

  /* Social media icons under the brand tagline. Renders only platforms
     enabled in deploy/data/integrations.json. Each icon: 36px tap-friendly
     circle, sub-grey at rest, ink on hover. */
  .r-footer-social {
    display: flex; gap: 10px;
    margin-top: 18px;
  }
  .r-footer-social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--c-surface);
    color: var(--c-sub);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, transform .15s ease;
  }
  .r-footer-social-link:hover {
    background: var(--c-ink); color: var(--c-bg);
    transform: translateY(-1px);
  }
  .r-footer-social-link svg { display: block; }
  .r-footer-col-content { margin-top: 14px; }
  .r-footer-link-row { font-size: 14px; margin-top: 8px; }
  .r-footer-link {
    color: var(--c-ink); text-decoration: none;
  }
  .r-footer-legal {
    margin-top: 48px; padding-top: 24px;
    border-top: 1px solid var(--c-line);
    display: grid; grid-template-columns: 2fr 3fr; gap: 48px;
    font-size: 12px; color: var(--c-sub); line-height: 1.7;
  }
  .r-footer-legal-label {
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    font-weight: 600; color: var(--c-sub); margin-bottom: 10px;
  }
  .r-footer-legal-company { color: var(--c-ink); font-weight: 500; }
  .r-footer-legal-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-self: start;
  }
  .r-footer-legal-right { text-align: right; align-self: end; }
  .r-footer-legal-links { margin-bottom: 6px; }
  .r-footer-legal-link {
    color: var(--c-ink); text-decoration: underline;
    text-decoration-color: var(--c-line); text-underline-offset: 3px;
  }
  .r-footer-legal-divider { margin: 0 8px; color: var(--c-line); }

  /* ===== Anfrage widget + form — extracted from anfrage.jsx (#14, 4/5).
     Two visual states: floating widget bubble (count + items) and full
     form modal. Shares modal-overlay/box pattern with detail-modal. */
  .r-anfrage-widget {
    position: fixed; bottom: 24px; left: 24px; z-index: 50;
  }
  .r-anfrage-bubble {
    position: absolute; bottom: 64px; left: 0; width: 380px;
    background: var(--c-bg); border: 1px solid var(--c-line);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(20, 22, 18, 0.18),
                0 4px 14px rgba(20, 22, 18, 0.08);
    padding: 22px 22px 20px; max-height: 72vh; overflow-y: auto;
  }
  .r-anfrage-bubble-head {
    display: flex; justify-content: space-between;
    align-items: center; margin-bottom: 12px;
    padding-bottom: 14px; border-bottom: 1px solid var(--c-line);
  }
  .r-anfrage-bubble-title {
    font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
    color: var(--c-ink);
  }
  /* Close × button on the floating cart-widget header. Quiet by
     default (cream-surface circle, sub-grey glyph) so it doesn't
     compete with the primary CTA; on hover it goes ink-dark to
     confirm interactivity. */
  .r-anfrage-bubble-close {
    background: var(--c-surface); border: none; font-size: 20px;
    cursor: pointer; color: var(--c-sub);
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background-color .2s ease, color .2s ease, transform .15s ease;
  }
  .r-anfrage-bubble-close:hover {
    background: var(--c-ink) !important;
    color: var(--c-bg) !important;
  }
  /* First item has no top border — the head divider does that job. */
  .r-anfrage-item {
    display: flex; gap: 14px; padding: 14px 0;
    border-top: 1px solid var(--c-line);
  }
  .r-anfrage-item:first-child { border-top: none; padding-top: 4px; }
  .r-anfrage-item-img {
    width: 56px; height: 56px; object-fit: cover;
    border-radius: 10px; flex-shrink: 0; background: var(--c-surface);
  }
  .r-anfrage-item-body { flex: 1; min-width: 0; }
  .r-anfrage-item-name {
    font-size: 14px; font-weight: 600; color: var(--c-ink);
    line-height: 1.3;
  }
  .r-anfrage-item-variant {
    font-size: 12px; color: var(--c-sub); line-height: 1.4;
    margin-top: 2px;
  }
  .r-anfrage-item-controls {
    display: flex; align-items: center; gap: 8px; margin-top: 10px;
  }
  /* Qty +/− stepper in cart widget items. Filled cream-surface bg
     instead of the previous near-invisible border-only treatment, so
     they read as tappable on first glance. Hover: sage fill + cream
     glyph (matches the unified dark-button hover language). */
  .r-anfrage-qty-btn {
    width: 26px; height: 26px;
    border: none; border-radius: 6px;
    background: var(--c-surface);
    color: var(--c-ink);
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background-color .2s ease, color .2s ease, transform .15s ease;
  }
  .r-anfrage-qty-btn:hover:not(:disabled) {
    background: var(--c-sage) !important;
    color: var(--c-bg) !important;
  }
  .r-anfrage-qty-num {
    font-size: 13px; min-width: 20px; text-align: center;
  }
  /* "Entfernen / Remove" — destructive-ish but lightweight (it's an
     enquiry, not a payment), so still text-only. Default sub-grey;
     hover darkens to ink + underline so the affordance is obvious
     without being aggressive. */
  .r-anfrage-remove-btn {
    margin-left: auto; font-size: 12px; color: var(--c-sub);
    background: none; border: none; cursor: pointer;
    padding: 4px 6px; border-radius: 4px;
    transition: color .2s ease, text-decoration-color .2s ease;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
  }
  .r-anfrage-remove-btn:hover {
    color: var(--c-ink);
    text-decoration-color: var(--c-ink);
  }
  /* Inner CTA wrapper: separates the "send enquiry" button from the
     items list with a divider so the action feels like a footer step
     rather than glued to the last item. */
  .r-anfrage-bubble-cta-wrap {
    margin-top: 18px; padding-top: 18px;
    border-top: 1px solid var(--c-line);
  }
  .r-anfrage-bubble-cta-wrap > .r-ds-btn {
    padding: 16px 22px; font-size: 15px;
  }
  .r-anfrage-bubble-note {
    font-size: 12px; color: var(--c-sub); margin-top: 12px;
    line-height: 1.5; text-align: center;
  }
  .r-anfrage-bubble-btn {
    background: var(--c-ink); color: var(--c-bg); border: none;
    padding: 14px 22px; border-radius: var(--r-pill);
    font-size: 14px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  }
  .r-anfrage-bubble-count {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--c-sage-light); color: var(--c-ink);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
  }

  .r-anfrage-modal-overlay {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(20,22,18,0.5); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
  }
  .r-anfrage-modal-box {
    background: var(--c-bg); border-radius: 20px;
    width: 100%; max-width: 680px; max-height: 90vh;
    overflow-y: auto; padding: 44px 48px 40px; position: relative;
    box-shadow: 0 30px 80px rgba(20, 22, 18, 0.22);
  }
  /* Close × on the big Anfrage form modal. Same treatment as the
     bubble close: subtle cream circle by default (so it doesn't
     fight the form's headline + submit button for attention) but
     clearly tappable; ink-dark fill on hover for confirmation. */
  .r-anfrage-modal-close {
    position: absolute; top: 20px; right: 20px;
    background: var(--c-surface); border: none; font-size: 24px;
    cursor: pointer; color: var(--c-sub);
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background-color .2s ease, color .2s ease, transform .15s ease;
  }
  .r-anfrage-modal-close:hover {
    background: var(--c-ink) !important;
    color: var(--c-bg) !important;
  }

  .r-anfrage-success { text-align: center; padding: 40px 0; }
  .r-anfrage-success-check {
    width: 64px; height: 64px; margin: 0 auto 24px;
    border-radius: 50%; background: var(--c-sage); color: var(--c-bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
  }
  .r-anfrage-success-text {
    font-size: 16px; color: var(--c-sub); line-height: 1.6; margin: 0 0 12px;
  }
  .r-anfrage-success-newsletter {
    font-size: 14px; color: var(--c-sub); line-height: 1.6;
    background: var(--c-surface); padding: 14px 18px;
    border-radius: 10px; margin: 18px auto 0; max-width: 480px;
  }
  .r-anfrage-success-actions { margin-top: 28px; }
  .r-anfrage-success-close-btn {
    background: none; border: 1px solid var(--c-line);
    padding: 10px 22px; border-radius: var(--r-pill);
    font-size: 14px; color: var(--c-ink); cursor: pointer;
  }

  .r-anfrage-form-headline {
    font-size: 36px; margin: 14px 0 10px; line-height: 1.08;
    letter-spacing: -0.02em;
  }
  .r-anfrage-form-paragraph {
    font-size: 15px; color: var(--c-sub); line-height: 1.6; margin: 0 0 28px;
    max-width: 520px;
  }
  /* Summary block: cream surface with a sage left-accent so it reads
     as "your selection" callout rather than a plain content box. */
  .r-anfrage-summary {
    background: var(--c-surface); border-radius: 14px;
    padding: 20px 22px; margin-bottom: 28px;
    border-left: 3px solid var(--c-sage);
  }
  .r-anfrage-summary-eyebrow {
    color: var(--c-sage); font-weight: 700; margin-bottom: 14px;
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  }
  .r-anfrage-summary-item {
    display: flex; align-items: center; gap: 14px; padding: 12px 0;
    border-top: 1px solid rgba(20, 22, 18, 0.08);
  }
  .r-anfrage-summary-item:first-child { border-top: none; padding-top: 4px; }
  .r-anfrage-summary-img {
    width: 48px; height: 48px; object-fit: cover;
    border-radius: 10px; flex-shrink: 0; background: var(--c-bg);
  }
  .r-anfrage-summary-qty {
    font-size: 14px; font-weight: 600; flex-shrink: 0;
    color: var(--c-sage); letter-spacing: 0.04em;
  }

  /* Form grid: 18px gap reads as breathing room rather than cramped
     stack. Row gap (label + field) is handled inside each cell. */
  .r-anfrage-form { display: grid; gap: 18px; }
  .r-anfrage-form-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  }
  .r-anfrage-label {
    font-size: 12px; color: var(--c-sub);
    display: block; margin-bottom: 8px;
    font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  }
  .r-anfrage-error-text {
    font-size: 12px; color: #7a3a1a; margin-top: 6px;
  }
  .r-anfrage-honeypot {
    position: absolute; left: -10000px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
  }
  .r-anfrage-checkbox-input {
    margin-top: 3px; accent-color: var(--c-ink); flex-shrink: 0;
  }
  .r-anfrage-consent-link {
    color: var(--c-ink); text-decoration: underline;
  }
  .r-anfrage-required-mark { color: var(--c-ink); }
  .r-anfrage-newsletter-strong {
    color: var(--c-ink); font-weight: 600;
  }
  .r-anfrage-newsletter-desc { display: block; margin-top: 2px; }
  .r-anfrage-error-alert {
    background: #fdf3ef; border: 1px solid #e8b59a;
    color: #7a3a1a; padding: 12px 14px; border-radius: 10px;
    font-size: 14px; line-height: 1.5;
  }
  .r-anfrage-error-alert-title { display: block; margin-bottom: 4px; }
  /* Submit row: full-width button so the primary action gets the
     visual weight it deserves at the bottom of the form. The DS
     Button gets the .r-ds-btn--primary hover/shadow/lift on top. */
  .r-anfrage-form-submit { margin-top: 14px; }
  .r-anfrage-form-submit > .r-ds-btn {
    width: 100%; justify-content: center;
    padding: 18px 28px; font-size: 16px;
  }

  /* ===== Detail modal — extracted from detail-modal.jsx (#14, file 3/5).
     Three card variants: oil (2-col grid), olive (image header + body),
     recipe (image header + ingredients/steps). Shared modal shell.
     Static styles only; the modal show/hide is via parent state. */
  .r-modal-eyebrow {
    font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
    font-weight: 500; color: var(--c-sage);
  }
  .r-modal-italic {
    font-style: italic; color: var(--c-sage);
    font-family: "Fraunces", Georgia, serif; font-weight: 400;
  }
  .r-modal-backdrop {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(20,22,18,0.55); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
  }
  .r-modal-panel {
    background: var(--c-bg); border-radius: 20px;
    width: 100%; max-width: 980px; max-height: 92vh;
    overflow-y: auto; position: relative;
  }
  .r-modal-close {
    position: absolute; top: 20px; right: 20px;
    background: var(--c-bg); border: 1px solid var(--c-line);
    width: 40px; height: 40px; border-radius: 50%;
    font-size: 20px; cursor: pointer; color: var(--c-ink);
    z-index: 2;
  }

  /* Oil */
  .r-oil-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; }
  .r-oil-image-side {
    background: var(--c-surface); padding: 48px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
  }
  .r-oil-image-circle {
    width: 280px; height: 280px;
    border-radius: 50%; overflow: hidden;
    background: var(--c-bg);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
  }
  .r-oil-caption {
    margin-top: 32px; font-size: 13px; color: var(--c-sub);
    text-align: center; line-height: 1.6;
  }
  .r-oil-content-side { padding: 48px; }

  /* Shared modal text patterns */
  .r-modal-h2 {
    font-size: 42px; font-weight: 600; letter-spacing: -0.03em;
    margin: 12px 0 4px; line-height: 1.05;
  }
  .r-modal-h2--big {
    font-size: 48px; font-weight: 600; letter-spacing: -0.03em;
    margin: 8px 0 4px; line-height: 1.05;
  }
  .r-modal-h2--recipe {
    font-size: 54px; font-weight: 600; letter-spacing: -0.03em;
    margin: 8px 0 8px; line-height: 1.02;
    font-family: "Fraunces", Georgia, serif;
  }
  .r-modal-sub { font-size: 15px; color: var(--c-sub); margin-bottom: 24px; }
  .r-modal-paragraph {
    font-size: 15px; line-height: 1.65; color: var(--c-sub); margin: 0 0 14px;
  }
  .r-modal-specs-section {
    margin-top: 24px; padding-top: 20px;
    border-top: 1px solid var(--c-line);
  }
  .r-modal-specs-grid {
    margin-top: 12px; display: grid;
    grid-template-columns: 1fr 1fr; gap: 10px 24px;
  }
  .r-modal-spec-key { font-size: 12px; color: var(--c-sub); }
  .r-modal-spec-value { font-size: 14px; font-weight: 600; margin-top: 2px; }

  .r-modal-cta-row {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-top: 32px; padding-top: 24px;
    border-top: 1px solid var(--c-line);
  }
  .r-modal-price-label {
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--c-sub); font-weight: 500; margin-bottom: 8px;
  }
  .r-modal-price-row {
    display: flex; align-items: baseline; gap: 4px;
    font-family: "Fraunces", Georgia, serif;
  }
  .r-modal-price-num {
    font-size: 54px; font-weight: 500; letter-spacing: -0.03em; line-height: 1;
  }
  .r-modal-price-currency {
    font-size: 24px; font-weight: 400; color: var(--c-sub); font-style: italic;
  }
  .r-modal-price-other {
    font-size: 18px; font-weight: 400; color: var(--c-sub);
    font-style: italic;
    font-family: "Inter Tight", sans-serif;
  }
  .r-modal-add-btn {
    background: var(--c-ink); color: var(--c-bg); border: none;
    padding: 14px 22px; border-radius: 999px;
    font-size: 14px; font-weight: 600; cursor: pointer;
  }

  /* Olive/Recipe image header (shared pattern) */
  .r-modal-img-header { height: 320px; overflow: hidden; position: relative; }
  .r-modal-img-header--tall { height: 340px; }
  .r-modal-img-overlay-gradient {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(20,22,18,0.7));
  }
  .r-modal-img-overlay-gradient--strong {
    background: linear-gradient(180deg, transparent 40%, rgba(20,22,18,0.75));
  }
  .r-modal-img-overlay-text { position: absolute; bottom: 32px; left: 48px; }
  .r-modal-img-overlay-text--full {
    position: absolute; bottom: 36px; left: 48px; right: 48px;
  }
  .r-modal-img-sub { font-size: 16px; opacity: 0.85; }
  .r-modal-img-desc {
    font-size: 17px; opacity: 0.85;
    max-width: 600px; line-height: 1.5; margin: 0;
  }

  /* Olive */
  .r-olive-body-grid {
    padding: 48px; display: grid;
    grid-template-columns: 1.3fr 1fr; gap: 48px;
  }
  .r-olive-paragraph {
    font-size: 15px; line-height: 1.7; color: var(--c-sub); margin: 0 0 14px;
  }
  .r-olive-facts-card {
    background: var(--c-surface); padding: 24px;
    border-radius: 14px; align-self: start;
  }
  .r-olive-facts-list { margin-top: 14px; display: grid; gap: 14px; }
  .r-olive-fact {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--c-line);
  }
  .r-olive-fact:last-child { border-bottom: none; padding-bottom: 0; }

  .r-olive-cta-row {
    padding: 24px 48px 48px;
    display: flex; justify-content: space-between; align-items: flex-end;
    border-top: 1px solid var(--c-line);
  }
  .r-olive-price-row {
    display: flex; align-items: baseline; gap: 3px;
    font-family: "Fraunces", Georgia, serif;
  }
  .r-olive-price-num {
    font-size: 46px; font-weight: 500; letter-spacing: -0.03em; line-height: 1;
  }
  .r-olive-price-cents {
    font-size: 26px; font-weight: 500; letter-spacing: -0.02em;
  }
  .r-olive-price-currency {
    font-size: 22px; font-weight: 400; color: var(--c-sub);
    font-style: italic; margin-left: 2px;
  }

  /* Recipe */
  .r-recipe-body-grid {
    padding: 48px; display: grid;
    grid-template-columns: 0.9fr 1.4fr; gap: 56px;
  }
  .r-recipe-list { list-style: none; padding: 0; margin: 16px 0 0; }
  .r-recipe-list--ol { counter-reset: step; }
  .r-recipe-ingredient {
    font-size: 14px; line-height: 1.55; color: var(--c-ink); padding: 10px 0;
    display: flex; gap: 12px; align-items: baseline;
    border-bottom: 1px solid var(--c-line);
  }
  .r-recipe-ingredient:last-child { border-bottom: none; }
  .r-recipe-bullet {
    width: 6px; height: 6px; background: var(--c-sage);
    border-radius: 50%; flex-shrink: 0; transform: translateY(-2px);
  }
  .r-recipe-step {
    display: flex; gap: 20px; padding: 14px 0;
    border-bottom: 1px solid var(--c-line);
  }
  .r-recipe-step:last-child { border-bottom: none; }
  .r-recipe-step-number {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--c-surface); color: var(--c-sage);
    font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .r-recipe-step-text {
    font-size: 15px; line-height: 1.65; color: var(--c-sub); margin: 4px 0 0;
  }

  /* ===== Cookie consent — extracted from cookie-consent.jsx inline styles
     (CSS refactor task #14, file 1/5). All static styles moved here;
     dynamic state (toggle on/off, button hover) handled via class
     modifiers and CSS pseudo-classes. */
  .r-cookie-banner {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--c-bg); border-top: 1px solid var(--c-line);
    box-shadow: 0 -8px 24px rgba(20,22,18,0.08);
    padding: 20px 24px;
  }
  .r-cookie-banner-grid {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr auto; gap: 24px;
    align-items: center;
  }
  .r-cookie-banner-text { min-width: 0; }
  .r-cookie-banner-title {
    font-size: 15px; font-weight: 600; color: var(--c-ink); margin-bottom: 4px;
  }
  .r-cookie-banner-body {
    font-size: 13px; line-height: 1.55; color: var(--c-sub);
  }
  .r-cookie-link {
    color: var(--c-ink); text-decoration: underline;
  }
  .r-cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }

  .r-cookie-btn {
    padding: 12px 22px; border-radius: var(--r-pill);
    font-size: 14px; font-weight: 600; cursor: pointer;
    font-family: inherit; letter-spacing: 0.01em;
    transition: background .2s, border-color .2s, color .2s;
    border: 1px solid;
  }
  .r-cookie-btn--primary {
    background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink);
  }
  .r-cookie-btn--secondary {
    background: transparent; color: var(--c-ink); border-color: var(--c-ink);
  }
  .r-cookie-btn--ghost {
    background: transparent; color: var(--c-ink); border-color: var(--c-line);
  }

  .r-cookie-modal-overlay {
    position: fixed; inset: 0; z-index: 120;
    background: rgba(20,22,18,0.5); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
  }
  .r-cookie-modal-box {
    background: var(--c-bg); border-radius: var(--r-lg);
    width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto;
    padding: 36px; position: relative;
    box-shadow: var(--shadow-floating);
  }
  .r-cookie-modal-close {
    position: absolute; top: 14px; right: 14px;
    background: none; border: none; font-size: 24px;
    cursor: pointer; color: var(--c-sub);
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
  }
  .r-cookie-modal-title {
    margin: 0 0 8px; font-size: 24px; font-weight: 600;
    color: var(--c-ink); letter-spacing: -0.01em;
  }
  .r-cookie-modal-intro {
    font-size: 14px; color: var(--c-sub); line-height: 1.55; margin: 0 0 12px;
  }
  .r-cookie-modal-rows { margin-top: 8px; }
  .r-cookie-modal-actions {
    margin-top: 24px; display: flex; gap: 10px;
    justify-content: flex-end; flex-wrap: wrap;
  }

  .r-cookie-row {
    display: grid; grid-template-columns: 1fr auto; gap: 18px;
    padding: 16px 0; border-top: 1px solid var(--c-line);
    align-items: start;
  }
  .r-cookie-row-title {
    font-size: 15px; font-weight: 600; color: var(--c-ink); margin-bottom: 4px;
  }
  .r-cookie-row-desc {
    font-size: 13px; color: var(--c-sub); line-height: 1.5;
  }
  .r-cookie-row-control { padding-top: 2px; }
  .r-cookie-pill-static {
    font-size: 12px; color: var(--c-sub); padding: 6px 12px;
    border: 1px solid var(--c-line); border-radius: var(--r-pill);
    white-space: nowrap;
  }

  .r-toggle {
    width: 44px; height: 24px; border-radius: var(--r-pill); padding: 2px;
    border: 1px solid var(--c-line);
    background: var(--c-bg);
    cursor: pointer;
    transition: background .2s, border-color .2s;
    display: inline-block; vertical-align: middle;
  }
  .r-toggle.is-on {
    border-color: var(--c-sage);
    background: var(--c-sage);
  }
  .r-toggle-thumb {
    display: block; width: 18px; height: 18px; border-radius: 50%;
    background: var(--c-line);
    transform: translateX(0);
    transition: transform .2s, background .2s;
  }
  .r-toggle.is-on .r-toggle-thumb {
    background: var(--c-bg);
    transform: translateX(20px);
  }

  .r-cookie-reopen {
    color: var(--c-ink); text-decoration: underline;
    text-decoration-color: var(--c-line); text-underline-offset: 3px;
    cursor: pointer;
  }

  /* ===== Shop pages — extracted from shop/page-shell.jsx and
     shop/page-templates.jsx. Mobile overrides for these classes
     already exist in the responsive block below; these are the
     desktop base rules that used to be inline in JSX. */
  .r-breadcrumb {
    padding-top: 24px; padding-bottom: 24px;
    font-size: 13px; color: var(--c-sub);
    display: flex; gap: 10px; align-items: center;
  }
  .r-breadcrumb-sep { opacity: 0.5; }
  .r-breadcrumb-link { color: var(--c-sub); text-decoration: none; }
  .r-breadcrumb-current { color: var(--c-ink); }

  .r-shop-section { padding: 40px 0 80px; }
  .r-shop-section--surface { padding: 80px 0; background: var(--c-surface); }
  /* Same vertical rhythm as --surface but no background change. Used by
     OlivePage DESCRIPTION+BUY section, which sits between two surface
     blocks but stays on cream — needs the 80px breathing room. */
  .r-shop-section--cream { padding: 80px 0; }
  .r-shop-section--big { padding: 100px 0; }
  .r-shop-section--narrow { padding: 24px 0 0; }

  .r-shop-product {
    display: grid; gap: 64px; align-items: start;
    grid-template-columns: 1.3fr 1fr;
  }
  .r-shop-product--olive {
    grid-template-columns: 1.4fr 1fr; gap: 80px;
  }

  .r-shop-desc-grid {
    display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px;
  }
  .r-shop-desc-paragraph {
    font-size: 18px; line-height: 1.7; color: var(--c-ink);
    margin: 0 0 22px; max-width: 680px;
  }
  .r-shop-desc-paragraph--olive {
    font-size: 17px; margin: 0 0 18px;
  }
  /* Lead paragraph (first child) — editorial intro tone via Fraunces serif
     italic + sage colour + slightly larger size. Sets the page voice. */
  .r-shop-desc-paragraph--lead {
    font-family: "Fraunces", Georgia, serif;
    font-size: 24px; font-style: italic; font-weight: 400;
    color: var(--c-sage);
    line-height: 1.45; max-width: 720px;
    margin: 0 0 28px;
  }
  .r-shop-desc-paragraph--lead.r-shop-desc-paragraph--olive {
    font-size: 22px; margin: 0 0 24px;
  }
  /* Inline emphasis inside descriptions — slightly heavier, ink-toned.
     Avoids the default browser bold which can look jarring next to
     Inter Tight body weight. */
  .r-shop-desc-paragraph strong {
    font-weight: 600; color: var(--c-ink);
  }
  .r-shop-desc-paragraph--lead strong {
    font-weight: 500; color: var(--c-ink); font-style: normal;
  }

  .r-product-wrap {
    aspect-ratio: 1/1; background: var(--c-surface);
    border-radius: 28px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    position: relative;
  }
  .r-product-disc {
    width: 76%; aspect-ratio: 1/1; border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(20,22,18,0.18);
  }
  .r-product-disc img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .r-product-num {
    position: absolute; top: 24px; left: 24px;
    font-family: "Fraunces", Georgia, serif;
    font-size: 14px; font-style: italic; color: var(--c-sub);
  }
  .r-product-acid {
    position: absolute; bottom: 24px; right: 24px;
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--c-sub); font-weight: 500;
  }

  .r-aside {
    position: sticky; top: 108px;
    background: var(--c-surface);
    border-radius: var(--r-lg);
    padding: 32px;
  }
  .r-aside-h1 {
    font-size: 38px; font-weight: 600; letter-spacing: -0.025em;
    margin: 18px 0 6px; line-height: 1.05;
  }
  .r-aside-sub {
    font-size: 15px; color: var(--c-sub); margin-bottom: 24px;
  }
  .r-aside-price-block {
    padding-top: 20px; border-top: 1px solid var(--c-line);
    padding-bottom: 20px; border-bottom: 1px solid var(--c-line);
  }
  .r-aside-cta {
    width: 100%; margin-top: 24px;
    background: var(--c-ink); color: var(--c-bg); border: none;
    padding: 16px 22px; border-radius: var(--r-pill);
    font-size: 15px; font-weight: 600; cursor: pointer;
    font-family: inherit;
    transition: background .25s;
  }
  .r-aside-cta.is-pulse { background: var(--c-sage); }
  .r-aside-note {
    font-size: 12px; color: var(--c-sub); margin-top: 14px; line-height: 1.5;
  }

  .r-shop-hero {
    position: relative; overflow: hidden;
    border-radius: 28px;
    height: 520px;
  }
  .r-shop-hero--recipe { height: 560px; }
  .r-shop-hero-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
  }
  /* Banner hero gradients on shop product pages (Olive + Recipe). The
     headline + subtitle sit in the bottom-left corner of the image, so
     we layer two gradients:
       1) 90deg LEFT — darkens the left third regardless of what's behind
          (busy photo, white pasta, light olives), so cream/sage text stays
          legible on every photograph.
       2) 180deg BOTTOM — original soft top + denser bottom for foot-cap.
     CSS layers are painted top-to-bottom; first listed = on top. */
  .r-shop-hero-gradient {
    position: absolute; inset: 0;
    background:
      linear-gradient(90deg, rgba(20,22,18,0.55) 0%, rgba(20,22,18,0.20) 40%, rgba(20,22,18,0.0) 70%),
      linear-gradient(180deg, rgba(20,22,18,0.05) 0%, rgba(20,22,18,0.0) 40%, rgba(20,22,18,0.65) 100%);
  }
  .r-shop-hero-gradient--strong {
    background:
      linear-gradient(90deg, rgba(20,22,18,0.60) 0%, rgba(20,22,18,0.25) 40%, rgba(20,22,18,0.0) 70%),
      linear-gradient(180deg, rgba(20,22,18,0.1) 0%, rgba(20,22,18,0.0) 35%, rgba(20,22,18,0.7) 100%);
  }
  .r-shop-hero-content {
    position: absolute; bottom: 40px; left: 48px; right: 48px;
    color: var(--c-cream);
  }
  .r-shop-hero-content--recipe { bottom: 48px; left: 56px; right: 56px; }
  .r-shop-hero-meta {
    font-size: 12px; letter-spacing: 0.18em;
    text-transform: uppercase; font-weight: 500; color: var(--c-sage-light);
  }
  .r-shop-hero-h1 {
    font-size: clamp(54px, 7vw, 88px); line-height: 0.98;
    font-weight: 500; letter-spacing: -0.035em; margin: 10px 0 6px;
    font-family: "Fraunces", Georgia, serif;
    text-shadow: 0 2px 30px rgba(0,0,0,0.25);
  }
  .r-shop-hero-h1--recipe {
    font-size: clamp(60px, 8vw, 104px); line-height: 0.96;
    margin: 10px 0 14px;
    text-shadow: 0 2px 30px rgba(0,0,0,0.3);
  }
  .r-shop-hero-sub { font-size: 18px; opacity: 0.9; }
  .r-shop-hero-desc {
    font-size: 18px; opacity: 0.88; max-width: 620px;
    line-height: 1.5; margin: 0;
  }

  .r-related-section {
    padding: 80px 0; border-top: 1px solid var(--c-line);
  }
  .r-related-section-h2 { margin: 12px 0 32px; }
  .r-related-card {
    text-decoration: none; color: var(--c-ink);
    background: var(--c-surface); border-radius: var(--r-md);
    overflow: hidden; display: block;
  }
  .r-related-card-imgwrap { overflow: hidden; }
  .r-related-card-img {
    width: 100%; aspect-ratio: 1/1;
    height: auto; object-fit: cover; display: block;
  }
  .r-related-card-img--landscape { aspect-ratio: 4/3; }
  .r-related-card-body { padding: 20px; }
  .r-related-card-meta {
    font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--c-sage); font-weight: 600;
  }
  .r-related-card-title {
    font-size: 20px; font-weight: 600; margin-top: 8px;
    letter-spacing: -0.01em;
  }
  .r-related-card-cta {
    font-size: 13px; color: var(--c-sub); margin-top: 14px;
  }

  .r-recipe-grid {
    display: grid; grid-template-columns: 0.9fr 1.6fr;
    gap: 80px; align-items: start;
  }
  .r-recipe-aside-h3 { margin: 10px 0 20px; }
  .r-recipe-ing-list { list-style: none; padding: 0; margin: 0; }
  .r-recipe-ing-item {
    font-size: 14px; line-height: 1.55; color: var(--c-ink);
    padding: 12px 0;
    border-bottom: 1px solid var(--c-line);
    display: flex; gap: 12px; align-items: baseline;
  }
  .r-recipe-ing-item:last-child { border-bottom: none; }
  .r-recipe-ing-bullet {
    width: 6px; height: 6px; background: var(--c-sage);
    border-radius: 50%; flex-shrink: 0;
    transform: translateY(-2px);
  }
  .r-recipe-steps-list { list-style: none; padding: 0; margin: 0; }
  .r-recipe-step-item {
    display: grid; grid-template-columns: auto 1fr;
    gap: 24px; padding: 22px 0;
    border-top: 1px solid var(--c-line);
  }
  .r-recipe-step-item:first-child { border-top: none; }
  .r-recipe-step-num {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--c-surface); color: var(--c-sage);
    font-size: 18px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-family: "Fraunces", Georgia, serif;
  }
  .r-recipe-step-text {
    font-size: 17px; line-height: 1.7; color: var(--c-ink);
    margin: 10px 0 0;
  }

/* ===== Responsive overrides (mobile/tablet @media) =====
   Last block in the file so @media rules win on narrow screens via
   natural cascade. Used to be inline 
   in HTML; now consolidated here so landing AND shop pages share
   one cached stylesheet. */

/* ============================================================
   responsive.css — Mobile / tablet adaptation
   Used by: Dimitris Olios.html + shop/*.html
   Strategy: site.css supplies desktop base styles; this block (loaded
   AFTER site.css) overrides them on narrow screens via natural cascade
   — no !important needed.
   Breakpoints: 960px (tablet), 640px (mobile)
   ============================================================ */

html, body { -webkit-text-size-adjust: 100%; }

/* ===== TABLET ≤ 960px ===== */
@media (max-width: 960px) {

  /* Generic horizontal padding for full-width sections */
  .r-pad-x          { padding-left:  32px; padding-right: 32px; }

  /* Section vertical padding compaction */
  .r-section        { padding-top: 72px; padding-bottom: 72px; }

  /* Grid collapse helpers */
  .r-grid-1         { grid-template-columns: 1fr; gap: 32px; }
  /* Multi-col grids → 2 cols on tablet */
  .r-grid-3         { grid-template-columns: 1fr 1fr; gap: 24px; }
  .r-grid-4         { grid-template-columns: 1fr 1fr; gap: 20px; }

  /* Header */
  .r-header         { padding: 18px 24px; }
  .r-nav            { display: none; }
  .r-burger         { display: flex; }

  /* Hero */
  .r-hero           { min-height: 560px; height: 78vh; }
  .r-hero-headline  { font-size: clamp(40px, 9vw, 64px); }
  .r-hero-content   { left: 24px; right: 24px; bottom: 60px; }

  /* Coordinates plate */
  .r-coord-plate    { top: 18px; right: 18px;
                      min-width: 0; padding: 10px 14px; }

  /* Oil cards: inner card is single column on tablet (image disc on top, then details).
     Outer grid (.r-grid-oils) intentionally stays 2-col on tablet — handled below. */
  .r-oil-card       { grid-template-columns: 1fr; padding: 24px; }
  .r-oil-card-img   { width: 50%; margin: 0 auto; }

  /* Oil grid stays 2-up on tablet (matches the olive grid below the page) */
  .r-grid-oils      { gap: 20px; }

  /* Section heading row (eyebrow+h2 left, link right) */
  .r-head-row       { flex-direction: column; align-items: flex-start; gap: 16px; }
  /* Tablet typography: ease H2 down, keep modifier hierarchy */
  .r-h2             { font-size: clamp(40px, 5.5vw, 52px); }
  .r-h2--xl         { font-size: clamp(44px, 6vw, 60px); }
  .r-h2--sm         { font-size: clamp(36px, 5vw, 44px); }

  /* Heritage section ("Aus Mycenae nach Chouni"): text block above image
     on tablet+mobile. The text div is the 2nd grid child (order:0 default),
     image is 1st (we push it to the bottom with order:2). */
  .r-img-tall       { order: 2; }

  /* SpecGrid: 2-col on tablet, smaller serif value, recomputed borders for the
     new 2-row layout (4 items → row of 2 + row of 2). */
  .r-spec-grid                                       { grid-template-columns: 1fr 1fr; }
  .r-spec-grid-cell                                  { padding: 24px 20px; }
  .r-spec-grid-cell:nth-child(2n)                    { border-right: none; }
  .r-spec-grid-cell:not(:nth-last-child(-n+2))       { border-bottom: 1px solid #e3e1d8; }
  .r-spec-grid-value                                 { font-size: 18px; }

  /* Bio sticky panel */
  .r-bio-sticky     { position: static; }

  /* BuyCard sticky aside */
  .r-aside          { position: static; padding: 24px; }

  /* Recipe ingredients grid */
  .r-recipe-grid    { grid-template-columns: 1fr; gap: 32px; }

  /* Shop product description grid (1fr 1.6fr → 1fr on tablet) */
  .r-shop-desc-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Shop product wrapper variants (oil 1.3fr 1fr / olive 1.4fr 1fr → 1fr) */
  .r-shop-product--olive { grid-template-columns: 1fr; gap: 32px; }

  /* Lead paragraph scales down on tablet — keep editorial weight but not
     overpowering on narrower column. */
  .r-shop-desc-paragraph--lead { font-size: 22px; }
  .r-shop-desc-paragraph--lead.r-shop-desc-paragraph--olive { font-size: 20px; }

  /* News feed on tablet → 1 column. Cap raised so ~3.5 cards still
     peek before scrolling kicks in; cards get more horizontal room
     for the excerpt at this width. */
  .r-news-feed         { grid-template-columns: 1fr; }
  .r-news-feed--scroll { max-height: 720px; }

  /* News article body grid → single column on tablet. Aside sequences
     after body (video/gallery below the text). Drop sticky positioning
     since there's no longer a parallel column to scroll past. */
  .r-news-grid    { grid-template-columns: 1fr; gap: 32px; }
  .r-news-aside   { position: static; }
  .r-news-body    { max-width: none; }

  /* Footer */
  .r-footer         { grid-template-columns: 1fr 1fr; gap: 32px; }
  .r-footer-legal   { grid-template-columns: 1fr; gap: 24px; }

  /* Anfrage modal full-screen on tablet */
  .r-anfrage-modal  { width: 100%; max-width: none;
                      max-height: 100vh; border-radius: 0; }

  /* Anfrage floating widget */
  .r-anfrage-widget { right: 16px; bottom: 16px; left: 16px; }
  .r-anfrage-bubble { width: auto; max-width: none; }
}

/* ===== MOBILE ≤ 640px ===== */
@media (max-width: 640px) {

  .r-pad-x          { padding-left:  20px; padding-right: 20px; }
  .r-section        { padding-top: 56px; padding-bottom: 56px; }

  /* Mobile: lead description paragraph scales down further but keeps
     italic + sage so it still reads as an intro, not body. */
  .r-shop-desc-paragraph--lead { font-size: 19px; line-height: 1.5; }
  .r-shop-desc-paragraph--lead.r-shop-desc-paragraph--olive { font-size: 18px; }

  /* News feed mobile: drop the height cap so the section reads as a
     full vertical list (no inner scroll on phones — page scroll handles
     it). Cards stack image-on-top + text-below since 40/60 horizontal
     leaves the text column too narrow at this width. */
  .r-news-feed         { gap: 16px; }
  .r-news-feed--scroll { max-height: none; overflow: visible; padding: 0; margin: 0; }
  .r-news-card         { grid-template-columns: 1fr; }
  .r-news-card-img     { min-height: 200px; height: 200px; }
  .r-news-card-body    { padding: 18px 20px; }

  /* News article gallery on mobile — gallery is now always vertical
     stack inside (or below) aside. Just slightly shorter photos. */
  .r-news-gallery-img { height: 220px; }

  /* All multi-col grids → single column */
  .r-grid-4         { grid-template-columns: 1fr; gap: 16px; }
  .r-grid-3         { grid-template-columns: 1fr; gap: 20px; }
  .r-grid-oils      { grid-template-columns: 1fr; gap: 16px; }

  /* Header on phones: zero horizontal padding so the row stretches
     edge-to-edge. The visible 20px gutter previously came from the
     .r-container inside the header — overridden below. Brand assets
     are bigger and tighter: logo 46px and wordmark 20px sit flush
     together (no gap), reading as one mark rather than two pieces.
     Text still hides at ≤380px (see further down) where the row is
     genuinely too tight. */
  .r-header         { padding: 14px 0; }
  /* Override .r-container's 20px mobile padding only when nested in
     .r-header, so the header touches the viewport edges while every
     other section keeps its safe horizontal gutter. */
  .r-header > .r-container { padding-left: 12px; padding-right: 12px; }
  .r-header-logo    { gap: 0; }
  .r-logo-svg       { width: 46px; height: 46px; }
  .r-logo-text      { display: inline; font-size: 20px;
                      letter-spacing: -0.01em; }
  .r-cta-pill       { padding: 8px 14px; font-size: 13px; }

  /* Hero */
  .r-hero           { min-height: 480px; height: 86vh; }
  /* Mobile overlay: full-image dark veil instead of the desktop's
     punched-out gradient (clear middle zone). On a phone the headline
     and subtitle span almost the whole height, and the photo's bright
     spots (sky, light bark) were washing out the text wherever the
     desktop gradient was transparent. Uniform-ish darkening (top 45%
     → bottom 75%) covers the entire image so the text always sits
     on a contrast-safe surface. */
  .r-hero-gradient  {
    background: linear-gradient(180deg,
      rgba(20, 22, 18, 0.45) 0%,
      rgba(20, 22, 18, 0.55) 40%,
      rgba(20, 22, 18, 0.65) 70%,
      rgba(20, 22, 18, 0.78) 100%);
  }
  /* Bigger, more impactful headline on phones — was clamp(42, 12vw, 60).
     16vw on a 390px iPhone = 62px, on 320px = 51px. Sits well above the
     subtitle thanks to the increased gap below. */
  .r-hero-headline  { font-size: clamp(54px, 16vw, 88px); line-height: 1;
                      text-align: center; }
  /* More breathing room between headline and subtitle on mobile */
  .r-hero-sub       { font-size: 15px; margin-top: 28px; }
  /* Lift the hero block higher on mobile so the bigger headline doesn't
     crowd the buttons — pushed up to 100px (was 60). */
  .r-hero-content   { bottom: 100px; }
  .r-hero-buttons a { padding: 14px 22px; font-size: 14px; text-align: center; }
  .r-hero-buttons   { flex-direction: column; align-items: stretch; gap: 10px; }
  .r-hero-eyebrow   { font-size: 10px; left: 20px; top: 22px; }
  .r-hero-scroll    { display: none; }

  .r-coord-plate    { top: 56px; left: 20px; right: 20px; padding: 8px 12px; }

  /* Mobile typography: H2 is hero of its section, H3 is clearly subordinate.
     All H2 modifiers unify around the same range so rhythm stays clean on phones. */
  .r-h2             { font-size: clamp(34px, 8.5vw, 44px); }
  .r-h2--xl         { font-size: clamp(36px, 9.5vw, 48px); }
  .r-h2--sm         { font-size: clamp(30px, 7.5vw, 38px); }
  .r-h3             { font-size: 18px; }
  .r-h3--lg         { font-size: 22px; }
  .r-h3--md         { font-size: 20px; }

  /* Olive grid: 1col instead of 4 */
  .r-olive-card     { padding: 16px; }
  .r-olive-card img { aspect-ratio: 16/10; }

  /* ===== Product cards on mobile: title-above-image + centered title =====
     Three card types share the same pattern: eyebrow+title at top, image
     below, rest of the body below image. Implementation uses CSS order
     (oil card uses display:contents to flatten its details wrapper). */

  /* Oil card: flatten details wrapper, lift head/title above image */
  .r-oil-card             { display: flex; flex-direction: column;
                            gap: 16px; }
  .r-oil-card-details     { display: contents; }
  .r-oil-card-head        { order: -2; }
  /* Wipe title's desktop margin so the flex gap drives vertical rhythm */
  .r-oil-card-title       { order: -1; text-align: center;
                            margin: 0; }
  /* Image stays at order 0; sub/desc/price keep DOM order */

  /* Olive card: only h3 needs lifting (no eyebrow above title in this card) */
  .r-olive-card           { display: flex; flex-direction: column; }
  .r-olive-card > h3      { order: -1; text-align: center; }

  /* Recipe card: swap grid areas so head sits above the image */
  .r-recipe-card          { grid-template-areas: "head" "img" "body"; }
  .r-recipe-card-title    { text-align: center; }

  /* Recipes: single column already via r-grid-3 */

  /* Footer: stack everything */
  .r-footer         { grid-template-columns: 1fr; gap: 28px; }
  .r-footer-legal   { grid-template-columns: 1fr; }
  .r-footer-legal > div:last-child { text-align: left; }

  /* SpecGrid: full-width single column on mobile + smaller serif value */
  .r-spec-grid                       { grid-template-columns: 1fr; }
  .r-spec-grid-cell                  { border-right: none;
                                       padding: 20px 18px; }
  .r-spec-grid-cell:not(:last-child) { border-bottom: 1px solid #e3e1d8; }
  .r-spec-grid-value                 { font-size: 17px; }

  /* Shop hero (image overlay, OlivePage + RecipePage). On mobile the banner
     goes full-bleed: kills the rounded corners and escapes the parent
     .r-container's 20px horizontal padding via negative margins so it
     reaches the viewport edges. Internal text stays readable via own
     20px padding from the new edges. */
  .r-shop-hero      {
    height: 380px;
    border-radius: 0;
    margin-left: -20px; margin-right: -20px;
  }
  .r-shop-hero-content,
  .r-shop-hero-content--recipe {
    left: 20px; right: 20px; bottom: 28px;
  }

  /* Oil product page hero — image+aside stack on mobile.
     Same full-bleed treatment as Olive/Recipe banner: cream square
     escapes the .r-container 20px padding via negative margins so it
     reaches the viewport edges. The disc inside stays at its width
     percentage so it doesn't blow up to absurd sizes. Border-radius
     killed since the box reaches the screen edges. */
  .r-shop-product   { grid-template-columns: 1fr; gap: 32px; }
  .r-product-wrap   {
    border-radius: 0;
    margin-left: -20px; margin-right: -20px;
  }
  .r-product-disc   { width: 60%; }
  .r-product-num    { left: 20px; }
  .r-product-acid   { right: 20px; }

  /* BuyCard mobile padding/typography */
  .r-aside h1       { font-size: 30px; }

  /* Anfrage modal */
  .r-anfrage-modal-pad { padding: 24px; }
  .r-form-grid      { grid-template-columns: 1fr; gap: 14px; }

  /* Kontakt CTA card — full-bleed on phone: escape the container's
     20px horizontal padding via negative margin so the dark card
     reaches the screen edges, drop the border-radius. Internal
     padding stays so the headline + buttons keep breathing room
     against the card's own edges. */
  .r-kontakt-card   { padding: 40px 28px; border-radius: 0;
                      margin-left: -20px; margin-right: -20px; }

  /* Heritage image — full-bleed on mobile so the olive grove photo
     reads as a hero, not a contained card. Escapes the .r-container's
     20px horizontal padding via negative margin + width compensation,
     and drops border-radius since edges meet the viewport. Bumped to
     380px on mobile so the photo has visual weight matching its hero
     role on the small screen. */
  .r-img-tall       {
    height: 380px;
    border-radius: 0;
    width: calc(100% + 40px);
    max-width: calc(100% + 40px);
    margin-left: -20px;
  }

  /* Rezepte transition banner — slimmer on mobile so it doesn't dominate the screen */
  /* Rezepte transition banner — bumped to 220px on mobile (was 140px)
     so the image doesn't collapse into a thin strip and stays visible
     as a real visual divider between Olives and Recipes sections. */
  .r-rezepte-banner img { height: 220px; }
}

/* ===== Tablet-only overrides (641–960px) =====
   These rules don't cascade into the mobile block — useful when desktop and
   mobile both want the original behavior, only the tablet middle differs. */
@media (min-width: 641px) and (max-width: 960px) {
  /* Bio CTA: at single-column tablet width, the column is ~700px wide.
     A stretched primary CTA across the full column looks broken. Shrink to
     natural content width and pin to the start (left) of the column. */
  .r-bio-cta        { justify-self: start; }

  /* ===== Mobile-menu drawer mode on tablet =====
     Override the fullscreen overlay into a right-side drawer panel
     ~440px wide with a dimmed backdrop on the rest of the screen.
     Backdrop uses the .r-mobile-menu's background (we re-paint it
     transparent) and a ::before pseudo for the actual dim layer. */
  .r-mobile-menu {
    background: transparent;
  }
  /* Dim backdrop covering the area to the LEFT of the drawer */
  .r-mobile-menu::before {
    content: '';
    position: absolute; inset: 0;
    background: rgba(20, 22, 18, 0.45);
    backdrop-filter: blur(2px);
    transition: opacity 240ms ease;
  }
  /* Drawer panel — children of .r-mobile-menu shift into a contained
     box on the right. The bar/nav/cta-wrap take the inside-drawer
     width via flex: their parent gets repainted; we layer them above
     the ::before backdrop with z-index. Each panel slice has its own
     translucent cream + frosted-glass blur, sliding in from the right
     edge when the menu opens (translateX 40 → 0 in sync via shared
     timing curve). */
  .r-mobile-menu-bar,
  .r-mobile-menu-nav,
  .r-mobile-menu-cta-wrap {
    position: relative; z-index: 1;
    width: 440px; max-width: 80vw;
    margin-left: auto;
    background: rgba(250, 250, 247, 0.92);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    transform: translateX(40px);
    /* Slow gentle close (drawer slides back to the right) */
    transition: transform 560ms cubic-bezier(.16, 1, .3, 1);
  }
  .r-mobile-menu.is-open .r-mobile-menu-bar,
  .r-mobile-menu.is-open .r-mobile-menu-nav,
  .r-mobile-menu.is-open .r-mobile-menu-cta-wrap {
    transform: translateX(0);
    /* Snappy open (drawer slides in from right) */
    transition: transform 320ms cubic-bezier(.4, 0, .2, 1);
  }
  .r-mobile-menu-bar         { border-left: 1px solid var(--c-line); }
  .r-mobile-menu-nav         { border-left: 1px solid var(--c-line); }
  .r-mobile-menu-cta-wrap    { border-left: 1px solid var(--c-line); }

  /* Bigger brand identity on tablet drawer */
  .r-mobile-menu-bar .r-logo-svg,
  .r-mobile-menu-bar svg.r-logo-svg { width: 50px; height: 50px; }
  .r-mobile-menu-wordmark { font-size: 24px; }

  /* Smaller, calmer nav links on tablet — was 22-28px scale, this
     drawer width can comfortably take 20px serif rows. */
  .r-mobile-menu-link-base {
    font-size: 20px;
    padding: 12px 0;
  }

  /* CTA centered, not full-width, with symmetric padding around it */
  .r-mobile-menu-cta-wrap {
    padding: 28px 32px;
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    align-items: center;
  }
  .r-mobile-menu-cta {
    width: auto; min-width: 220px; max-width: 100%;
    padding: 16px 36px;
  }
}

/* ===== Helpful for very narrow phones ===== */
@media (max-width: 380px) {
  .r-hero-headline  { font-size: 40px; }
  .r-h2             { font-size: 30px; }
  .r-h2--xl         { font-size: 32px; }
  .r-h2--sm         { font-size: 28px; }
  .r-coord-plate    { font-size: 10px; }
  /* Header is too tight for the wordmark next to a 2-digit Anfrage counter — drop text */
  .r-logo-text      { display: none; }
}

/* ===== Detail modal — mobile collapse =====
   These classes were extracted from inline styles during refactor #14.
   The original responsive-css predates them, so add overrides here so
   the modal stops being a 2-col desktop layout on phones/tablets. */
@media (max-width: 960px) {
  /* Oil card modal — image on top, content below */
  .r-oil-grid             { grid-template-columns: 1fr; min-height: auto; }
  .r-oil-image-side       { padding: 32px 24px; }
  .r-oil-image-circle     { width: 200px; height: 200px; }
  .r-oil-content-side     { padding: 32px 24px; }
}
@media (max-width: 640px) {
  /* Modal panel goes full-bleed on phones — easier to read, more space */
  .r-modal-backdrop       { padding: 0; align-items: stretch; }
  .r-modal-panel          { max-width: 100%; max-height: 100vh;
                            border-radius: 0; }
  .r-modal-close          { top: 12px; right: 12px; }

  /* Olive / Recipe body grids stack vertically */
  .r-olive-body-grid      { grid-template-columns: 1fr; gap: 28px;
                            padding: 28px 20px; }
  .r-recipe-body-grid     { grid-template-columns: 1fr; gap: 32px;
                            padding: 28px 20px; }

  /* Image header shrinks on phone */
  .r-modal-img-header        { height: 220px; }
  .r-modal-img-header--tall  { height: 240px; }
  .r-modal-img-overlay-text,
  .r-modal-img-overlay-text--full { bottom: 20px; left: 20px; right: 20px; }

  /* Modal headlines scale down */
  .r-modal-h2             { font-size: 28px; }
  .r-modal-h2--big        { font-size: 32px; }
  .r-modal-h2--recipe     { font-size: 36px; }

  /* CTA rows stack — price on top, button below */
  .r-modal-cta-row,
  .r-olive-cta-row        { flex-direction: column; align-items: stretch;
                            gap: 16px; padding: 20px; }
  .r-olive-cta-row        { padding: 20px; }
  .r-modal-add-btn        { width: 100%; }

  /* Specs grid in oil modal — 1 col instead of 2 */
  .r-modal-specs-grid     { grid-template-columns: 1fr; }

  /* Anfrage form modal — full-bleed on phone (no border-radius, overlay
     padding 0) but keep a small inner side gap so input fields and
     summary items don't touch the screen edges. Side padding is 10px
     (half of the original 20px the modal used to have, per user
     preference): big enough to give breathing room, small enough that
     the modal still reads as edge-to-edge. */
  .r-anfrage-modal-overlay { padding: 0; align-items: stretch; }
  .r-anfrage-modal-box     { max-width: 100%; max-height: 100vh;
                             border-radius: 0; padding: 28px 10px; }
  .r-anfrage-form-row      { grid-template-columns: 1fr; }
  .r-anfrage-form-headline { font-size: 26px; }

  /* Anfrage floating widget — bubble panel becomes near-full-width */
  .r-anfrage-bubble        { width: calc(100vw - 32px); max-width: 380px;
                             left: 0; right: 0; }
  .r-anfrage-widget        { left: 16px; right: 16px; bottom: 16px; }

  /* Cookie modal — full-bleed on phone */
  .r-cookie-modal-overlay  { padding: 0; align-items: stretch; }
  .r-cookie-modal-box      { max-width: 100%; max-height: 100vh;
                             border-radius: 0; padding: 28px 20px; }
}