/*
 * Anna Café — Widget Styles
 * Self-contained: works with Hello Elementor or any theme.
 * No dependency on anna-cafe-theme.
 */

/* ── Design tokens ─────────────────────────────────────────────
   Defined on :root so they cascade into all widget descendants.
   Custom properties only — no visual impact on non-Anna elements.
   ─────────────────────────────────────────────────────────────── */
:root {
    --anna-widgets-css-loaded: 1; /* debug marker — check via getComputedStyle(document.documentElement).getPropertyValue('--anna-widgets-css-loaded') */
    --cream:        #FDF8F2;
    --cream-deep:   #F4EADB;
    --brown:        #C3885D;
    --brown-dark:   #A06A3D;
    --brown-light:  #D9A87D;
    --green:        #004845;
    --green-light:  #0A5A56;
    --blush:        #F2CAC6;
    --blush-soft:   #F8E6DF;
    --ink:          #1A120A;
    --ink-soft:     #5A4030;
    --ink-mute:     #8A7060;
    --white:        #FFFFFF;
    --night:        #0C100F;
    --sans:         'Rubik', system-ui, sans-serif;
    --mono:         'Space Mono', ui-monospace, monospace;
    --ease-out:     cubic-bezier(.16, 1,   .3,  1);
    --ease-soft:    cubic-bezier(.33, 1,   .68, 1);
    --ease-back:    cubic-bezier(.34, 1.4, .64, 1);
    --r-sm:         14px;
    --r-md:         26px;
    --r-lg:         40px;
    --pad-x:        clamp(22px, 6vw, 96px);
    --section-y:    clamp(88px, 12vw, 170px);
}

/* ═══════════════════════════════════════════════════════════════
   BASE STYLES — replaces anna-base.css when Hello Elementor is active.
   Scoped minimally: body font/color are applied via .elementor-page so
   they don't break the WP admin. Typography helpers are global utilities.
   ═══════════════════════════════════════════════════════════════ */

/* Body defaults — applied only on Elementor-rendered pages */
.elementor-page {
    font-family:              var(--sans);
    background:               var(--cream);
    color:                    var(--ink);
    -webkit-font-smoothing:   antialiased;
    text-rendering:           optimizeLegibility;
    line-height:              1.6;
}

/* Global resets that Elementor / Hello Elementor don't provide */
img, video { display: block; max-width: 100%; }
a          { color: inherit; text-decoration: none; }

/* Typography helpers — used across all Anna widgets */
.kicker {
    display:        inline-block;
    font-family:    var(--mono);
    font-size:      11px;
    letter-spacing: .4em;
    text-transform: uppercase;
    color:          var(--brown);
}
.display      { font-weight: 900; line-height: .94; letter-spacing: -.035em; color: var(--ink); }
.h-sm         { font-size: clamp(36px, 5.2vw, 72px); }
.h-md         { font-size: clamp(42px, 6.5vw, 96px); }
.h-lg         { font-size: clamp(52px, 8vw, 124px); }
.lede         { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.85; color: var(--ink-soft); max-width: 54ch; }
em.accent     { font-style: normal; color: var(--brown); }
em.accent-green { font-style: normal; color: var(--green); }

/* .reveal — animation wrapper; content must be visible with animations off */
.reveal       { display: block; overflow: visible; }
.reveal > *   { display: block; opacity: 1; transform: none; visibility: visible; }

/* Section wrappers */
.scene        { position: relative; padding: var(--section-y) var(--pad-x); }
.scene-inner  { max-width: 1280px; margin: 0 auto; width: 100%; }

/* Continuous scene background — one fixed layer that cross-fades per
   [data-scene] as you scroll (injected + driven by anna-animations.js).
   Sits behind the page content; transparent Anna scenes reveal it. */
.anna-atmosphere {
    position:       fixed;
    inset:          0;
    z-index:        -1;
    pointer-events: none;
    background:     var(--cream, #FBF0E1);
}

/* Shared button styles */
.btn-primary {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--brown); color: var(--white); padding: 16px 42px;
    border-radius: 100px; font-weight: 700; font-size: 15px;
    box-shadow: 0 8px 28px rgba(195,136,93,.34);
    transition: background .3s, transform .3s, box-shadow .3s;
}
.btn-primary:hover { background: var(--brown-dark); transform: translateY(-2px); box-shadow: 0 14px 42px rgba(195,136,93,.5); color: var(--white); }
.btn-ghost {
    display: inline-flex; align-items: center; gap: 10px;
    border: 1.5px solid rgba(26,18,10,.2); color: var(--ink-soft); padding: 15px 40px;
    border-radius: 100px; font-weight: 600; font-size: 15px;
    transition: border-color .3s, color .3s, transform .3s;
}
.btn-ghost:hover  { border-color: var(--brown); color: var(--brown); transform: translateY(-2px); }
.btn-green {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--green); color: var(--white); padding: 16px 42px;
    border-radius: 100px; font-weight: 700; font-size: 15px;
    box-shadow: 0 8px 28px rgba(0,72,69,.28);
    transition: background .3s, transform .3s, box-shadow .3s;
}
.btn-green:hover  { background: var(--green-light); transform: translateY(-2px); color: var(--white); }

/* ═══════════════════════════════════════════════════════════════
   ELEMENTOR WRAPPER RESETS
   Strips Elementor's default padding from widget containers that
   render full-bleed or full-viewport sections.
   ═══════════════════════════════════════════════════════════════ */
.elementor-widget-anna-hero-bento,
.elementor-widget-anna-hero-bento .elementor-widget-container {
    padding: 0 !important;
    margin:  0 !important;
}
.elementor-widget-anna-about-story .elementor-widget-container {
    padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   HERO BENTO — opening video → bento assembles on scroll.
   Static default: video + content visible, bento grid visible.
   Under html.anna-frontend-animations-enabled the pre-animation
   states below apply and anna-animations.js drives the timeline.
   ═══════════════════════════════════════════════════════════════ */
.hero { position: relative; background: var(--night); }

.hero-stage {
    position: relative;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background: var(--night);
}

/* Full-screen background video */
.hero-video { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.hero-video video { width: 100%; height: 100%; object-fit: cover; }

/* Bento grid — cells fly in on scroll (desktop) */
.hero-bento {
    position: absolute; inset: 0; z-index: 2;
    display: grid;
    grid-template-columns: 18% 1fr 1fr 22%;
    grid-template-rows: 1fr 1fr;
    gap: 10px; padding: 10px;
}
.bento-cell { position: relative; overflow: hidden; border-radius: 16px; will-change: transform, opacity; }
.bento-cell img,
.bento-cell video { width: 100%; height: 100%; object-fit: cover; }

.bento-1 { grid-column: 1;   grid-row: 1 / 3; }
.bento-2 { grid-column: 2/4; grid-row: 1;     }
.bento-3 { grid-column: 4;   grid-row: 1;     }
.bento-4 { grid-column: 2/4; grid-row: 2;     }
.bento-5 { grid-column: 4;   grid-row: 2;     }

/* Readability scrim */
.hero-scrim {
    position: absolute; inset: 0; z-index: 5; pointer-events: none;
    background:
        radial-gradient(ellipse 56% 64% at 50% 48%, rgba(8,7,5,.72), rgba(8,7,5,.32) 50%, transparent 78%),
        linear-gradient(to bottom, rgba(8,7,5,.42), transparent 22%, transparent 78%, rgba(8,7,5,.5));
}

/* Hero text */
.hero-content {
    position: absolute; inset: 0; z-index: 10;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 0 22px; pointer-events: none;
}
.hero-content a { pointer-events: auto; }

.hero-eyebrow {
    font-family: var(--mono);
    font-size: 11px; letter-spacing: .46em; text-transform: uppercase;
    color: rgba(253,248,242,.5);
    margin-bottom: 24px;
}
.hero-title {
    font-weight: 900; line-height: .86; color: var(--cream);
    font-size: clamp(76px, 15vw, 210px); letter-spacing: -.04em;
}
.hero-title em { display: block; color: var(--brown-light); font-style: normal; }

.hero-actions {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 12px 14px; margin-top: 42px;
}
.hero-cta {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--brown); color: var(--white);
    padding: 16px 44px; border-radius: 100px;
    font-weight: 700; font-size: 15px;
    box-shadow: 0 10px 36px rgba(195,136,93,.42);
    transition: background .3s, box-shadow .3s, transform .3s;
}
.hero-cta:hover { background: var(--brown-dark); box-shadow: 0 16px 50px rgba(195,136,93,.55); transform: translateY(-2px); color: var(--white); }
/* Secondary hero action — the menu link, quiet next to the order button */
.hero-cta--ghost {
    background: rgba(253,248,242,.10); color: var(--cream);
    border: 1px solid rgba(253,248,242,.42);
    box-shadow: none;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero-cta--ghost:hover { background: rgba(253,248,242,.94); border-color: transparent; color: var(--ink); box-shadow: 0 14px 40px rgba(10,12,11,.28); }

/* Scroll cue */
.hero-scroll {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
    z-index: 10; display: flex; flex-direction: column; align-items: center;
    gap: 9px;
}
.hero-scroll .line  { width: 1px; height: 46px; background: linear-gradient(to bottom, rgba(253,248,242,.5), transparent); }
.hero-scroll span   { font-family: var(--mono); font-size: 9px; letter-spacing: .4em; text-transform: uppercase; color: rgba(253,248,242,.4); }

/* Rotating seal */
.hero-seal {
    position: absolute; bottom: 64px; right: 64px; z-index: 16;
    width: 88px; height: 88px; pointer-events: none;
}
.hero-seal svg      { width: 100%; height: 100%; animation: spin 20s linear infinite; }
.hero-seal .seal-mark {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--brown-light); font-size: 18px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Hero responsive ── */
@media (max-width: 768px) {
    .hero-stage { height: 100svh; }
    .hero-bento {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 6px; padding: 6px;
    }
    .bento-1 { grid-column: 1;   grid-row: 1;   }
    .bento-2 { grid-column: 1/3; grid-row: 2;   }
    .bento-3 { grid-column: 2;   grid-row: 1;   }
    .bento-4 { grid-column: 1/3; grid-row: 3;   }
    .bento-5 { display: none; }
    .hero-seal { display: none; }
}


/* ── Hero: gated pre-animation states (frontend only) ────────── */
html.anna-frontend-animations-enabled .hero-eyebrow,
html.anna-frontend-animations-enabled .hero-cta,
html.anna-frontend-animations-enabled .hero-scroll,
html.anna-frontend-animations-enabled .hero-seal { opacity: 0; }
html.anna-frontend-animations-enabled .hero-title .reveal { overflow: hidden; }
html.anna-frontend-animations-enabled .about-divider { transform: scaleX(0); transform-origin: right; }
/* Hide the bento only on desktop, where it assembles over the opening
   video on scroll. On mobile the assembled bento IS the hero (no video),
   so it must stay visible — hiding it there would flash video→bento. */
@media (min-width: 769px) {
    html.anna-frontend-animations-enabled .hero-bento .bento-cell { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT STORY
   ═══════════════════════════════════════════════════════════════ */
.about { position: relative; }

.about-grid {
    display: grid;
    grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
    gap: clamp(20px, 3vw, 52px);
    align-items: start;
}

/* Sticky left column */
.about-head { position: sticky; top: 18vh; }

.about-title {
    font-size: clamp(56px, 8.4vw, 128px);
    margin-top: 18px;
    letter-spacing: -.02em;
}
.about-title em { display: block; }

/* RTL glyph-bearing fix so mask reveal doesn't clip the right edge */
.about-title .reveal { padding-right: .14em; margin-right: -.14em; }

/* Story copy */
.about-body { max-width: 720px; }
.about-sentence {
    font-size: clamp(17px, 1.4vw, 21px);
    line-height: 1.9;
    color: var(--ink-soft);
    margin-bottom: 22px;
    will-change: transform, opacity;
}
.about-sentence:last-of-type { font-weight: 600; color: var(--ink); }
.about-body .about-line { will-change: transform, opacity; }

/* Divider */
.about-divider {
    height: 1px;
    background: rgba(26,18,10,.1);
    margin: clamp(28px, 3.5vw, 46px) 0;
}

/* Stats row */
.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-bottom: clamp(28px, 3.5vw, 44px);
}
.stat { padding: 0 clamp(14px, 2vw, 26px); border-left: 1px solid rgba(26,18,10,.1); }
.stat:first-child { padding-right: 0; }
.stat:last-child  { border-left: none; }

.stat-num {
    display: block;
    font-size: clamp(40px, 5vw, 68px);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--green);
}
.stat-label {
    display: block;
    margin-top: 8px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--brown);
}

/* ── About responsive ── */
@media (max-width: 768px) {
    .about-grid { grid-template-columns: 1fr; gap: 30px; }
    .about-head { position: static; }
}
@media (max-width: 480px) {
    .about-stats { gap: 0; }
    .stat { padding: 0 10px; }
    .stat-num { font-size: clamp(34px, 12vw, 48px); }
}

/* ═══════════════════════════════════════════════════════════════
   DOUGH SCROLL VIDEO
   ═══════════════════════════════════════════════════════════════ */

/* Elementor wrapper reset — section is full-bleed */
.elementor-widget-anna-dough-scroll-video,
.elementor-widget-anna-dough-scroll-video .elementor-widget-container {
    padding: 0 !important;
    margin:  0 !important;
}

/*
 * STATIC DEFAULT — no scroll trap, no sticky.
 * Cinematic scroll layout is restored under html.anna-animations-enabled (appended below).
 * CSS variables --anna-dough-desktop-height / --anna-dough-overlay-opacity still apply
 * when animations are enabled.
 */
.dough-video-story {
    position:   relative;
    height:     auto;
    min-height: 0;
    overflow:   visible;
    background: var(--cream);
}

/* Static stage — shows video at a natural height without trapping scroll */
.dough-video-sticky {
    position:   relative;
    top:        auto;
    height:     auto;
    min-height: 0;
    overflow:   visible;
}

.dough-video-stage {
    position:   relative;
    width:      100%;
    height:     min(78vh, 760px);
    overflow:   hidden;
    background: var(--night);
}

/* Video fills the stage (absolute inside relative stage — no scroll lock) */
.dough-scroll-video {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
}

/* Mobile fallback poster (only rendered when disable-mobile-scrub is on) */
.dough-mobile-poster {
    position:           absolute;
    inset:              0;
    z-index:            1;
    background-size:    cover;
    background-position: center;
    display:            none;
}

/* Gradient scrim over the video */
.dough-video-overlay {
    position:        absolute;
    inset:           0;
    z-index:         2;
    pointer-events:  none;
    opacity:         var(--anna-dough-overlay-opacity, 1);
    background: linear-gradient(
        to bottom,
        rgba(26,18,10,.22) 0%,
        transparent        28%,
        transparent        65%,
        rgba(26,18,10,.38) 100%
    );
}

/* Overlay text block — bottom-right, RTL */
.dough-video-copy {
    position:   absolute;
    z-index:    20;
    right:      clamp(24px, 7vw, 110px);
    bottom:     clamp(80px, 12vh, 130px);
    max-width:  520px;
}
.dough-video-copy .kicker {
    display:        inline-block;
    font-family:    var(--mono, monospace);
    font-size:      10px;
    letter-spacing: .38em;
    text-transform: uppercase;
    color:          var(--brown);
    margin-bottom:  18px;
}
.dough-video-copy h2 {
    font-size:      clamp(42px, 6vw, 92px);
    line-height:    .94;
    font-weight:    900;
    letter-spacing: -.04em;
    color:          var(--cream);
    text-shadow:    0 2px 24px rgba(26,18,10,.45);
}
.dough-video-copy h2 em { color: var(--brown); font-style: normal; }
.dough-video-copy p {
    margin-top:  22px;
    font-size:   clamp(16px, 1.2vw, 19px);
    line-height: 1.8;
    color:       rgba(253,248,242,.78);
    text-shadow: 0 1px 8px rgba(26,18,10,.5);
}

/* Step counter — bottom-left */
.dough-video-step {
    position:   absolute;
    z-index:    22;
    left:       clamp(22px, 5vw, 76px);
    bottom:     clamp(28px, 5vh, 54px);
    display:    flex;
    align-items: baseline;
    gap:        12px;
    font-family: var(--mono, monospace);
    direction:  rtl;
    color:      var(--cream);
}
.dough-step-num  { font-size: 24px; font-weight: 700; }
.dough-step-text { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--brown); }

/* Progress bar — bottom-right, pinned just above text copy on small viewports */
.dough-video-progress {
    position:   absolute;
    z-index:    22;
    right:      clamp(22px, 5vw, 76px);
    bottom:     clamp(34px, 5vh, 60px);
    width:      min(280px, 34vw);
    height:     2px;
    background: rgba(253,248,242,.2);
    overflow:   hidden;
}
.dough-video-progress span {
    display:          block;
    height:           100%;
    width:            100%;
    transform:        scaleX(0);
    transform-origin: right;
    background:       linear-gradient(to left, var(--cream), var(--brown));
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* dough-video-story: height auto by default — no override needed */

    .dough-video-stage {
        height:     min(58vh, 520px);
        min-height: 360px;
    }

    .dough-video-copy {
        right:      22px;
        left:       22px;
        bottom:     clamp(96px, 18vh, 150px);
        max-width:  none;
        text-align: right;
    }
    .dough-video-copy h2 {
        font-size:   clamp(40px, 11vw, 66px);
        text-shadow: 0 2px 24px rgba(26,18,10,.5);
    }
    .dough-video-copy p {
        font-size: 15px;
        color:     rgba(253,248,242,.82);
    }
    .dough-video-step     { left: 22px; bottom: 26px; }
    .dough-video-progress { right: 22px; bottom: 32px; width: min(46vw, 200px); }

    /* Show fallback poster on mobile when scrub is disabled */
    [data-disable-mobile-scrub="true"] .dough-scroll-video { display: none; }
    [data-disable-mobile-scrub="true"] .dough-mobile-poster { display: block; }
}

/* ═══════════════════════════════════════════════════════════════
   ELEMENTOR WRAPPER RESETS — Phase 4B + 5 full-bleed widgets
   ═══════════════════════════════════════════════════════════════ */
.elementor-widget-anna_moments_horizontal,
.elementor-widget-anna_moments_horizontal .elementor-widget-container {
    padding: 0 !important;
    margin:  0 !important;
}
.elementor-widget-anna_categories_gallery .elementor-widget-container,
.elementor-widget-anna_loyalty_section .elementor-widget-container,
.elementor-widget-anna_final_cta .elementor-widget-container {
    padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOMENTS HORIZONTAL
   ═══════════════════════════════════════════════════════════════ */
/*
 * STATIC DEFAULT — stacked full-height panels, no horizontal scroll trap.
 * Cinematic horizontal layout restored under html.anna-animations-enabled (appended below).
 */
.anna-moments-horizontal {
    position:   relative;
    height:     auto;
    min-height: 0;
    overflow:   visible;
    padding:    0;
    margin:     0;
    direction:  ltr;
}
.moments-sticky {
    position:  relative;
    top:       auto;
    width:     100%;
    height:    auto;
    min-height: 0;
    overflow:  visible;
    direction: ltr;
}
.moments-track {
    position:        static;
    display:         block;
    width:           100%;
    height:          auto;
    direction:       ltr;
}
.moment-panel {
    position:   relative;
    width:      100%;
    min-width:  0;
    max-width:  none;
    height:     auto;
    min-height: 100vh;
    min-height: 100svh;
    overflow:   hidden;
    direction:  rtl;
    padding:    clamp(80px,8vw,120px) clamp(28px,7vw,96px);
    display:    grid;
    grid-template-columns: minmax(0,1fr) minmax(320px,46vw);
    align-items: center;
    gap:        clamp(40px,6vw,90px);
}

/* Panel backgrounds */
.moment-friday   { background: linear-gradient(135deg, #FBF3E9 0%, #E3F0EB 100%); }
.moment-catering { background: linear-gradient(135deg, #FDFAF4 0%, #F2E9DB 100%); }
.moment-holidays { background: linear-gradient(135deg, #FCEAE3 0%, #FBF1E6 100%); }

/* Panel depth orbs */
.moment-panel::after {
    content:        '';
    position:       absolute;
    z-index:        0;
    border-radius:  50%;
    filter:         blur(90px);
    opacity:        .5;
    pointer-events: none;
}
.moment-friday::after   { width:48vh; height:48vh; background:radial-gradient(circle,rgba(0,72,69,.16),transparent 70%); top:-10vh; inset-inline-start:-6vh; }
.moment-catering::after { width:44vh; height:44vh; background:radial-gradient(circle,rgba(195,136,93,.20),transparent 70%); bottom:-12vh; inset-inline-end:-6vh; }
.moment-holidays::after { width:46vh; height:46vh; background:radial-gradient(circle,rgba(242,202,198,.45),transparent 70%); top:-8vh; inset-inline-end:-4vh; }

/* Content column */
.moment-content {
    position:        relative;
    z-index:         2;
    max-width:       600px;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
}
.moment-eyebrow { display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.moment-no      { font-family:var(--mono); font-size:clamp(13px,1vw,15px); font-weight:700; color:var(--brown); letter-spacing:.06em; }
.moment-eyebrow .rule { flex:0 0 auto; width:clamp(28px,3vw,46px); height:1px; background:var(--brown); opacity:.45; }
.moment-friday .moment-no,
.moment-friday .moment-eyebrow .rule { color:var(--green); background:var(--green); }

.moment-title {
    font-size:       clamp(44px,5vw,92px);
    line-height:     .94;
    font-weight:     900;
    letter-spacing:  -.035em;
    margin:          14px 0 0;
    color:           var(--ink);
}
.moment-title em { font-style:normal; color:var(--brown); }
.moment-title::after {
    content:          '';
    display:          block;
    width:            62px;
    height:           3px;
    border-radius:    2px;
    background:       var(--brown);
    margin-top:       18px;
    opacity:          .9;
}
.moment-friday .moment-title { color: var(--green); }
.moment-friday .moment-title::after { background: var(--green); }
.moment-friday .moment-lede  { color: rgba(0,72,69,.82); }

.moment-lede {
    margin-top:  20px;
    font-size:   clamp(16px,1.2vw,19px);
    line-height: 1.82;
    color:       var(--ink-soft);
    max-width:   46ch;
}

/* Perks */
.moment-perks { margin-top:24px; display:flex; flex-direction:column; gap:12px; }
.moment-perk  { display:flex; align-items:center; gap:12px; font-size:15px; color:var(--ink-soft); }
.moment-perk .dot { width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.65; flex-shrink:0; }

/* Chips */
.moment-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.moment-chip  {
    display:     inline-flex;
    align-items: center;
    gap:         8px;
    padding:     10px 18px;
    border-radius: 100px;
    background:  rgba(0,72,69,.07);
    border:      1px solid rgba(0,72,69,.14);
    font-size:   13px;
    font-weight: 600;
    color:       var(--green);
}
.moment-chip .dot { width:6px; height:6px; border-radius:50%; background:var(--brown); flex-shrink:0; }

/* CTA — moments-specific (flex column context) */
.btn-friday {
    display:      inline-flex;
    align-items:  center;
    gap:          10px;
    margin-top:   30px;
    align-self:   flex-start;
    background:   var(--brown);
    color:        var(--white);
    padding:      15px 40px;
    border-radius: 100px;
    font-weight:  700;
    font-size:    15px;
    box-shadow:   0 8px 30px rgba(195,136,93,.35);
    transition:   background .3s, transform .3s, box-shadow .3s;
}
.btn-friday:hover {
    background:  var(--brown-dark);
    transform:   translateY(-2px);
    box-shadow:  0 14px 42px rgba(195,136,93,.5);
    color:       var(--white);
}

/* Visual column */
.moment-visual {
    position:      relative;
    z-index:       1;
    height:        min(76vh,760px);
    border-radius: clamp(22px,2.2vw,38px);
    overflow:      hidden;
    box-shadow:    0 40px 90px rgba(26,18,10,.16);
}
.moment-visual img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transform:  scale(1.05);
    transition: transform 1.2s var(--ease-out, ease-out);
}
.moment-panel.is-active .moment-visual img { transform: scale(1); }
.moment-visual--duo { display:grid; grid-template-rows:1fr 1fr; gap:10px; }
.moment-visual--duo img { height:100%; }
.moment-visual:not(.moment-visual--gallery)::after {
    content:       '';
    position:      absolute;
    inset:         0;
    border-radius: inherit;
    box-shadow:    inset 0 0 0 1px rgba(253,248,242,.22);
    pointer-events: none;
}

/* Holiday gallery */
.moment-visual--gallery {
    height:                min(76vh,760px);
    display:               grid;
    /* Wider hero column — the holiday shots are portrait, so giving the
       lead card more width keeps it near its native ratio instead of
       cropping the sides off. */
    grid-template-columns: 1.18fr 1fr;
    grid-template-rows:    1fr 1fr;
    gap:                   10px;
    border-radius:         0;
    overflow:              visible;
    box-shadow:            none;
}
.moment-visual--gallery .hol-card:first-child { grid-row: 1 / 3; }
.hol-card { position:relative; border-radius:var(--r-md, 22px); overflow:hidden; }
.hol-card img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transform:  scale(1.05);
    transition: transform 1s var(--ease-out, ease-out);
}
.hol-card:hover img { transform:scale(1.12); }
.hol-info {
    position:   absolute;
    inset:      0;
    display:    flex;
    flex-direction: column;
    justify-content: flex-end;
    padding:    clamp(14px,1.4vw,22px);
    background: linear-gradient(to top, rgba(10,12,11,.84), rgba(10,12,11,.1) 54%, transparent 74%);
}
.hol-season { font-family:var(--mono); font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:var(--blush, #F2CAC6); margin-bottom:7px; }
.hol-name   { font-size:clamp(16px,1.5vw,24px); font-weight:900; color:var(--cream); }

/* Progress indicator */
.moments-progress {
    position:        absolute;
    bottom:          clamp(22px,4vh,44px);
    left:            50%;
    transform:       translateX(-50%);
    z-index:         10;
    display:         flex;
    align-items:     baseline;
    gap:             7px;
    direction:       ltr;
    font-family:     var(--mono);
    color:           var(--ink);
    background:      rgba(253,248,242,.62);
    backdrop-filter: blur(10px);
    padding:         9px 20px;
    border-radius:   100px;
    border:          1px solid rgba(26,18,10,.08);
    box-shadow:      0 8px 24px rgba(26,18,10,.08);
}
.moments-current { font-size:17px; font-weight:700; }
.moments-progress .sep,
.moments-total { font-size:13px; opacity:.5; }

/* ── Moments mobile ── */
@media (max-width: 768px) {
    /* Default is already static — these ensure nothing spills horizontally */
    .anna-moments-horizontal { overflow-x: hidden; }
    .moment-panel {
        grid-template-columns: 1fr;
        min-height: 100svh;
        padding: 80px 22px 60px;
        gap: 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .moment-content  { max-width: none; }
    .moment-visual   { height: auto; aspect-ratio: 16/11; width: 100%; box-shadow: 0 24px 60px rgba(26,18,10,.14); }
    .moment-visual img { transform: none; }
    .moment-visual--duo { aspect-ratio: 16/9; grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; }
    /* Holiday gallery on mobile: three portrait cards on a snap-scrolling
       row. Squeezing a 2×2 grid into a 4:3 box cropped every photo to a
       sliver — a swipeable row keeps each holiday actually readable. */
    .moment-visual--gallery {
        height: auto; aspect-ratio: auto;
        grid-template-columns: repeat(3, 66%);
        grid-template-rows: none;
        grid-auto-flow: column;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .moment-visual--gallery .hol-card { aspect-ratio: 3/4; scroll-snap-align: center; }
    .moment-visual--gallery .hol-card:first-child { grid-row: auto; }
    .moment-title    { font-size: clamp(36px,9vw,60px); }
    .btn-friday      { align-self: flex-start; }
    .moments-progress { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   CATEGORIES GALLERY
   ═══════════════════════════════════════════════════════════════ */
.cats-head { text-align:center; max-width:640px; margin:0 auto clamp(48px,6vw,80px); }
.cats-head .lede { margin:18px auto 0; }

.cats-grid {
    display:               grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap:                   clamp(14px, 1.8vw, 22px);
}
/* Three cards per row (each spans 2 of 6 tracks). A 6-track grid lets an
   incomplete last row fill the width instead of leaving a hole: a lone
   trailing card goes full width, a trailing pair splits it in half. */
.cats-grid > .cat-card { grid-column: span 2; }
.cats-grid > .cat-card:last-child:nth-child(3n + 1) { grid-column: span 6; }
.cats-grid > .cat-card:nth-last-child(2):nth-child(3n + 1),
.cats-grid > .cat-card:nth-last-child(2):nth-child(3n + 1) + .cat-card { grid-column: span 3; }
.cat-card.has-video .cat-video { pointer-events: none; }

/* ── Card container — fixed height, isolate stacking context ── */
.cat-card {
    position:        relative !important;
    overflow:        hidden !important;
    border-radius:   var(--r-md) !important;
    min-height:      clamp(420px, 46vw, 620px) !important;
    background:      #0C100F !important;
    isolation:       isolate !important;
    display:         block;
    text-decoration: none;
    will-change:     transform;
}

/* Any intermediate wrapper div/figure that might wrap the image */
.cat-card > a,
.cat-card > div,
.cat-card figure,
.cat-card .cat-image,
.cat-card .cat-media,
.cat-card .cat-thumb,
.cat-card .category-image {
    position: absolute !important;
    inset:    0 !important;
    width:    100% !important;
    height:   100% !important;
    display:  block !important;
    overflow: hidden !important;
    z-index:  1 !important;
}

/* Image — absolute fill with !important to beat theme height:auto reset */
.cat-card img,
.cat-card picture,
.cat-card video {
    position:        absolute !important;
    inset:           0 !important;
    width:           100% !important;
    height:          100% !important;
    min-width:       100% !important;
    min-height:      100% !important;
    object-fit:      cover !important;
    object-position: center !important;
    display:         block !important;
    z-index:         1 !important;
    transform:       scale(1.05);
    transition:      transform 1s var(--ease-out, ease-out);
}
.cat-card:hover img,
.cat-card:hover video { transform: scale(1.13); }

/* Gradient — pseudo-element at z:2, above image */
.cat-card::before {
    content:        "" !important;
    position:       absolute !important;
    inset:          0 !important;
    z-index:        2 !important;
    pointer-events: none !important;
    background:     linear-gradient(
        to bottom,
        rgba(12,16,15,0)    28%,
        rgba(12,16,15,.38)  58%,
        rgba(12,16,15,.82)  100%
    ) !important;
    transition: background .45s;
}
.cat-card:hover::before {
    background: linear-gradient(
        to bottom,
        rgba(0,72,69,0)    28%,
        rgba(0,72,69,.38)  58%,
        rgba(0,72,69,.88)  100%
    ) !important;
}
.cat-card::after { content: none !important; }

/* Text elements — z:3, above gradient pseudo */
.cat-card .cat-overlay,
.cat-card .cat-content,
.cat-card .cat-label,
.cat-card .cat-title,
.cat-card .cat-name,
.cat-card .cat-arrow {
    position: relative !important;
    z-index:  3 !important;
}

/* Overlay strip — bottom-anchored, transparent (gradient is on ::before) */
.cat-card .cat-overlay {
    position:        absolute !important;
    inset:           auto 0 0 0 !important;
    z-index:         3 !important;
    min-height:      46% !important;
    padding:         clamp(22px, 3vw, 42px) !important;
    display:         flex !important;
    flex-direction:  column !important;
    justify-content: flex-end !important;
    background:      transparent !important;
}

.cat-label { font-family:var(--mono); font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:var(--brown-light, #D9A87D); margin-bottom:6px; }
.cat-name  { font-size:clamp(20px, 2vw, 28px); font-weight:900; color:var(--cream); line-height:1.05; }

/* Arrow badge — absolute positioned corner element, above overlay */
.cat-card .cat-arrow {
    position:        absolute !important;
    inset:           auto !important;
    z-index:         4 !important;
    top:             clamp(16px, 2vw, 24px) !important;
    left:            clamp(16px, 2vw, 24px) !important;
    width:           38px;
    height:          38px;
    border-radius:   50%;
    border:          1.5px solid rgba(253,248,242,.3);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--cream);
    opacity:         0;
    transform:       translateY(-6px);
    transition:      opacity .4s, transform .4s, background .4s, border-color .4s;
}
.cat-card:hover .cat-arrow { opacity:1; transform:translateY(0); background:var(--brown); border-color:var(--brown); }

/* Two per row — 4 tracks so a lone trailing card fills the width */
@media (max-width:1024px) {
    .cats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cats-grid > .cat-card { grid-column: span 2; }
    .cats-grid > .cat-card:last-child:nth-child(3n + 1),
    .cats-grid > .cat-card:nth-last-child(2):nth-child(3n + 1),
    .cats-grid > .cat-card:nth-last-child(2):nth-child(3n + 1) + .cat-card { grid-column: span 2; }
    .cats-grid > .cat-card:last-child:nth-child(odd) { grid-column: span 4; }
}
@media (max-width:768px)  {
    .cats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px !important; }
    .cat-card  { min-height: 420px !important; }
}
@media (max-width:480px)  {
    .cats-grid { grid-template-columns: 1fr !important; }
    .cats-grid > .cat-card { grid-column: 1 / -1 !important; }
    .cat-card  { min-height: 380px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   LOYALTY SECTION
   ═══════════════════════════════════════════════════════════════ */
.loyalty-grid {
    display:               grid;
    grid-template-columns: minmax(300px,460px) minmax(0,1fr);
    gap:                   clamp(44px,6vw,96px);
    align-items:           center;
}
.loyalty-card-wrap { perspective: 1400px; }
.loyalty-card {
    position:         relative;
    width:            100%;
    aspect-ratio:     1.6/1;
    border-radius:    24px;
    overflow:         hidden;
    background:       linear-gradient(140deg, #005f5b 0%, #004845 48%, #012e2c 100%);
    padding:          clamp(24px,3vw,38px);
    display:          flex;
    flex-direction:   column;
    justify-content:  space-between;
    transform-style:  preserve-3d;
    will-change:      transform;
    box-shadow:       0 34px 76px rgba(0,72,69,.32), 0 0 0 1px rgba(0,72,69,.4);
    transition:       box-shadow .4s;
}
.loyalty-card:hover { box-shadow: 0 48px 100px rgba(0,72,69,.42), 0 0 0 1px rgba(0,72,69,.55); }

.lc-glow  { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 26% 20%,rgba(217,168,125,.28),transparent 52%),radial-gradient(ellipse at 84% 88%,rgba(253,248,242,.05),transparent 40%); }
.lc-shine { position:absolute; inset:0; pointer-events:none; border-radius:24px; background:linear-gradient(125deg,rgba(255,255,255,.14),transparent 46%,rgba(255,255,255,.05)); }
.lc-rings { position:absolute; bottom:-50px; left:-50px; width:240px; height:240px; border-radius:50%; border:1px solid rgba(253,248,242,.06); box-shadow:0 0 0 38px rgba(253,248,242,.03),0 0 0 76px rgba(253,248,242,.018); pointer-events:none; }

.lc-logo      { height:30px; width:auto; filter:brightness(0) invert(1); opacity:.9; position:relative; z-index:2; }
.lc-mid       { position:relative; z-index:2; }
.lc-club      { font-family:var(--mono); font-size:10px; letter-spacing:.36em; text-transform:uppercase; color:rgba(253,248,242,.45); }
.lc-num       { font-family:var(--mono); font-size:clamp(13px,1.4vw,17px); letter-spacing:.24em; color:rgba(253,248,242,.55); margin-top:7px; }
.lc-bot       { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:flex-end; }
.lc-name      { font-weight:700; font-size:15px; color:rgba(253,248,242,.85); }
.lc-pts       { font-size:clamp(24px,2.6vw,34px); font-weight:900; color:var(--brown-light, #D9A87D); line-height:1; }
.lc-pts-label { font-family:var(--mono); font-size:8px; letter-spacing:.26em; text-transform:uppercase; color:rgba(253,248,242,.4); margin-top:3px; }

.loyalty-copy .display    { color:var(--ink); }
.loyalty-copy .display em { color:var(--green); font-style:normal; }

.loyalty-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.loyalty-chip  {
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    padding:       10px 18px;
    border-radius: 100px;
    background:    rgba(0,72,69,.07);
    border:        1px solid rgba(0,72,69,.14);
    font-size:     13px;
    font-weight:   600;
    color:         var(--green);
}
.loyalty-chip .dot { width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0; }

@media (max-width:768px) { .loyalty-grid { grid-template-columns:1fr; gap:38px; } }

/* ═══════════════════════════════════════════════════════════════
   FINAL CTA
   ═══════════════════════════════════════════════════════════════ */
.final       { text-align:center; position:relative; }
.final-inner { max-width:760px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.final-title { font-size:clamp(52px,9vw,140px); }
.final-title em { display:block; color:var(--brown); font-style:normal; }
.final .lede    { margin:24px auto 0; text-align:center; }
.final-ctas     { display:flex; gap:14px; margin-top:44px; flex-wrap:wrap; justify-content:center; }

@media (max-width:480px) {
    .final-ctas   { flex-direction:column; align-self:stretch; }
    .final-ctas a { justify-content:center; }
}

/* ═══════════════════════════════════════════════════════════════
   ELEMENTOR EDITOR MODE — comprehensive overrides.
   Targets: body.elementor-editor-active  (editor panel open)
            body.elementor-editor-preview  (editor preview iframe)
            .anna-editor-preview           (PHP-stamped class)
   ═══════════════════════════════════════════════════════════════ */

/* ── Dough video — collapse scroll-height section ── */
body.elementor-editor-active .dough-video-story,
body.elementor-editor-preview .dough-video-story,
.anna-editor-preview.dough-video-story {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}
body.elementor-editor-active .dough-video-sticky,
body.elementor-editor-preview .dough-video-sticky,
.anna-editor-preview .dough-video-sticky {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

/* ── Moments horizontal — unstick and stack panels vertically ── */
body.elementor-editor-active .anna-moments-horizontal,
body.elementor-editor-preview .anna-moments-horizontal,
.anna-editor-preview.anna-moments-horizontal {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}
body.elementor-editor-active .moments-sticky,
body.elementor-editor-preview .moments-sticky,
.anna-editor-preview .moments-sticky {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}
body.elementor-editor-active .moments-track,
body.elementor-editor-preview .moments-track,
.anna-editor-preview .moments-track {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    right: auto !important;
    left: auto !important;
}
body.elementor-editor-active .moment-panel,
body.elementor-editor-preview .moment-panel,
.anna-editor-preview .moment-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: auto !important;
    transform: none !important;
    flex: 1 1 auto !important;
}

/* ── Hero — allow natural height, show bento cells ── */
body.elementor-editor-active .hero,
body.elementor-editor-preview .hero,
.anna-editor-preview.hero {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}
body.elementor-editor-active .hero-stage,
body.elementor-editor-preview .hero-stage,
.anna-editor-preview .hero-stage {
    height: auto !important;
    min-height: 60vh !important;
    max-height: none !important;
    overflow: visible !important;
}
body.elementor-editor-active .bento-cell,
body.elementor-editor-preview .bento-cell,
.anna-editor-preview .bento-cell {
    opacity: 1 !important;
    transform: none !important;
}

/* Extra-button blocks added by repeater */
.anna-extra-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

/* ═══════════════════════════════════════════════════════════════
   FRONTEND ANIMATION LAYOUTS
   Active only when anna-animations.js adds:
     html.anna-frontend-animations-enabled
   (non-editor, non-reduced-motion, GSAP loaded)
   Static layout remains default. Editor is never affected.
   ═══════════════════════════════════════════════════════════════ */

/* ─ Dough — scroll-scrub sticky layout ──────────────────────── */

html.anna-frontend-animations-enabled .dough-video-story {
    height: var(--anna-dough-desktop-height, 260vh);
}
html.anna-frontend-animations-enabled .dough-video-sticky {
    position: sticky;
    top:      0;
    height:   100vh;
    height:   100svh;
    overflow: hidden;
}
html.anna-frontend-animations-enabled .dough-video-stage {
    height:     100%;
    min-height: 0;
}
/* Dough copy — restore absolute overlay position on desktop */
html.anna-frontend-animations-enabled .dough-video-copy {
    position: absolute !important;
    right:    clamp(24px, 7vw, 110px) !important;
    bottom:   clamp(80px, 12vh, 130px) !important;
    left:     auto !important;
    padding:  0 !important;
    color:    var(--cream) !important;
}
html.anna-frontend-animations-enabled .dough-video-copy h2 { color: var(--cream) !important; text-shadow: 0 2px 24px rgba(26,18,10,.45) !important; }
html.anna-frontend-animations-enabled .dough-video-copy p  { color: rgba(253,248,242,.78) !important; }
html.anna-frontend-animations-enabled .dough-video-step,
html.anna-frontend-animations-enabled .dough-video-progress { display: flex !important; }
/* Mobile keeps the same sticky scroll-trap as desktop (like Gamos):
   the video scrubs on mobile too, with the copy as a cream overlay. */
@media (max-width: 768px) {
    html.anna-frontend-animations-enabled .dough-video-story  { height: var(--anna-dough-mobile-height, 260vh); }
    html.anna-frontend-animations-enabled .dough-video-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
    html.anna-frontend-animations-enabled .dough-video-stage  { height: 100%; min-height: 0; }
    html.anna-frontend-animations-enabled .dough-video-copy   { right: 22px !important; left: 22px !important; bottom: clamp(96px, 18vh, 150px) !important; padding: 0 !important; max-width: none !important; color: var(--cream) !important; }
    html.anna-frontend-animations-enabled .dough-video-copy h2 { color: var(--cream) !important; text-shadow: 0 2px 24px rgba(26,18,10,.5) !important; }
    html.anna-frontend-animations-enabled .dough-video-copy p  { color: rgba(253,248,242,.82) !important; }
}

/* ─ Moments — horizontal sticky layout (desktop only) ────────── */

@media (min-width: 769px) {
    html.anna-frontend-animations-enabled .anna-moments-horizontal {
        height: var(--anna-moments-height, 230vh);
    }
    html.anna-frontend-animations-enabled .moments-sticky {
        position: sticky;
        top:      0;
        height:   100vh;
        height:   100svh;
        overflow: hidden;
    }
    /* RTL track: row-reverse + right:0 → Friday is rightmost (visible first).
       GSAP translates track in the +x direction to reveal Catering → Holidays */
    html.anna-frontend-animations-enabled .moments-track {
        position:       absolute;
        top:            0;
        right:          0;
        left:           auto;
        display:        flex;
        flex-direction: row-reverse;
        /* width set by JS (count × 100vw) */
        height:         100vh;
        height:         100svh;
        will-change:    transform;
    }
    html.anna-frontend-animations-enabled .moment-panel {
        flex:       0 0 100vw;
        width:      100vw;
        min-width:  100vw;
        max-width:  100vw;
        height:     100vh;
        height:     100svh;
        min-height: 0;
    }
    html.anna-frontend-animations-enabled .moments-progress { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE SAFETY — widget-scoped only
   (No global html/body rules — plugin must not override the editor)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── About — single column, no sticky head ── */
    .about-grid {
        grid-template-columns: 1fr;
    }
    .about-head { position: relative; top: auto; }
    .about-title {
        font-size: clamp(46px,13vw,78px);
        line-height: 1;
        overflow-wrap: anywhere;
    }
    /* Drop the RTL mask nudge on mobile — the reveal is visible here, so the
       negative right-margin only risks pushing the first glyph off-screen. */
    .about-title .reveal { padding-right: 0; margin-right: 0; overflow: visible; }
    .about-body     { max-width: none; }
    .about-sentence { overflow-wrap: anywhere; }

    /* ── Dough copy — readable below video ── */
    .dough-video-copy {
        position: relative !important;
        right:    auto !important;
        left:     auto !important;
        bottom:   auto !important;
        padding:  28px 22px !important;
        max-width: none !important;
        color:    var(--ink);
    }
    .dough-video-copy h2 {
        color:       var(--green);
        text-shadow: none;
        font-size:   clamp(38px,11vw,62px);
    }
    .dough-video-copy p {
        color:       rgba(26,18,10,.78);
        text-shadow: none;
    }
    .dough-video-step,
    .dough-video-progress { display: none !important; }

    /* ── Categories — 2 columns ── */
    .cats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

    /* ── Loyalty — single column ── */
    .loyalty-grid { grid-template-columns: 1fr; }

    /* ── Final CTA ── */
    .final-ctas { flex-direction: column; align-self: stretch; }
    .final-ctas a { justify-content: center; }
    .final-title { font-size: clamp(42px,13vw,90px); }

    /* ── Hero mobile (aligned 1:1 with the original site layout) ── */
    .hero-stage { height: 100vh; height: 100svh; }
    .hero-title { font-size: clamp(52px,15vw,92px); }
    .hero-bento {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 6px;
        padding: 6px;
    }
    .bento-1 { grid-column: 1;   grid-row: 1; }
    .bento-2 { grid-column: 1/3; grid-row: 2; }
    .bento-3 { grid-column: 2;   grid-row: 1; }
    .bento-4 { grid-column: 1/3; grid-row: 3; }
    .bento-5 { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   V2 — INNER PAGE COMPONENTS (page-hero, menu, forms, sections)
   Appended for the multi-page widget set. Mobile-first, RTL.
   ═══════════════════════════════════════════════════════════════ */
:root{ --sans:'Rubik',system-ui,-apple-system,sans-serif; --mono:'Space Mono',ui-monospace,monospace;
  --ease-out:cubic-bezier(.16,1,.3,1); --r-sm:14px; --r-md:26px; --r-lg:40px;
  --pad-x:clamp(22px,6vw,96px); --section-y:clamp(72px,10vw,150px); --maxw:1280px; }

/* section header */
.sec-head{max-width:680px;margin:0 auto clamp(38px,5vw,66px);text-align:center;}
.sec-head.left{text-align:right;margin-inline:0;}
.sec-head .lede{margin:16px auto 0;}
.sec-title{font-size:clamp(38px,5.6vw,80px);margin-top:12px;font-weight:900;line-height:.96;letter-spacing:-.035em;color:var(--ink);}
.sec-title em{font-style:normal;color:var(--brown);}
.anna-scene{position:relative;padding:var(--section-y) var(--pad-x);}
.anna-scene .anna-scene-inner{max-width:var(--maxw);margin:0 auto;width:100%;}

/* ── PAGE HERO ── */
.anna-page-hero{position:relative;min-height:64vh;min-height:64svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(120px,16vw,190px) var(--pad-x) clamp(60px,9vw,120px);background:var(--night,#0C100F);overflow:hidden;}
.anna-page-hero__media{position:absolute;inset:0;z-index:0;}
.anna-page-hero__media img,.anna-page-hero__media video{width:100%;height:100%;object-fit:cover;transform:scale(1.06);}
.anna-page-hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 60% 66% at 50% 46%,rgba(8,7,5,.6),rgba(8,7,5,.32) 52%,rgba(8,7,5,.6) 100%),linear-gradient(to bottom,rgba(8,7,5,.5),transparent 30%,transparent 62%,rgba(12,16,15,.96));}
.anna-page-hero__inner{position:relative;z-index:2;max-width:820px;}
.anna-page-hero .kicker{color:var(--brown-light);}
.anna-page-hero__title{font-weight:900;line-height:.92;letter-spacing:-.035em;color:var(--cream);font-size:clamp(46px,9vw,120px);margin-top:16px;}
.anna-page-hero__title em{font-style:normal;color:var(--brown-light);}
.anna-page-hero__sub{margin:22px auto 0;font-size:clamp(16px,1.3vw,20px);line-height:1.8;color:rgba(253,248,242,.76);max-width:56ch;}
.anna-page-hero__crumbs{margin-top:24px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(253,248,242,.5);}
.anna-page-hero__crumbs a{color:rgba(253,248,242,.5);}
.anna-page-hero__crumbs .sep{margin:0 8px;opacity:.5;}

/* ── SPLIT ── */
.anna-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:center;}
.anna-split.reverse{direction:ltr;}
.anna-split.reverse>*{direction:rtl;}
.anna-split__media{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;box-shadow:0 40px 90px rgba(26,18,10,.14);}
.anna-split__media img{width:100%;height:100%;object-fit:cover;}
.anna-split__copy .lede{margin-top:16px;}
.anna-split__copy .btn-primary,.anna-split__copy .btn-green,.anna-split__copy .btn-ghost{margin-top:28px;}

/* ── STATS STRIP ── */
.anna-stats{display:grid;grid-template-columns:repeat(3,1fr);background:var(--white);border:1px solid rgba(26,18,10,.07);border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(26,18,10,.07);padding:clamp(28px,3.5vw,44px) clamp(20px,2vw,32px);max-width:820px;margin-inline:auto;}
.anna-stats .stat{position:relative;text-align:center;padding:clamp(8px,1.5vw,18px) clamp(14px,2vw,26px);border-inline-start:1px solid rgba(26,18,10,.1);}
.anna-stats .stat:first-child{border-inline-start:none;}
.anna-stats .stat-num{display:block;font-size:clamp(38px,5vw,66px);font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--green);}
.anna-stats .stat-label{display:block;margin-top:10px;font-family:var(--mono);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--brown);}

/* ── FEATURE GRID ── */
.anna-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);}
.anna-feat-card{background:var(--white);border:1px solid rgba(26,18,10,.07);border-radius:var(--r-md);padding:clamp(26px,3vw,38px);box-shadow:0 20px 50px rgba(26,18,10,.05);transition:transform .4s var(--ease-out),box-shadow .4s;}
.anna-feat-card:hover{transform:translateY(-6px);box-shadow:0 34px 70px rgba(26,18,10,.1);}
.anna-feat-icon{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:24px;background:linear-gradient(135deg,rgba(195,136,93,.16),rgba(0,72,69,.1));margin-bottom:18px;}
.anna-feat-title{font-size:19px;font-weight:800;color:var(--ink);margin-bottom:10px;}
.anna-feat-text{font-size:14.5px;line-height:1.75;color:var(--ink-soft);}

/* ── TIMELINE ── */
.anna-timeline{position:relative;max-width:820px;margin:0 auto;padding-inline-start:34px;}
.anna-timeline::before{content:'';position:absolute;inset-inline-start:6px;top:6px;bottom:6px;width:2px;background:linear-gradient(to bottom,var(--brown),rgba(195,136,93,.15));}
.anna-tl-item{position:relative;padding-bottom:clamp(34px,4.5vw,54px);}
.anna-tl-item:last-child{padding-bottom:0;}
.anna-tl-item::before{content:'';position:absolute;inset-inline-start:-33px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--brown);box-shadow:0 0 0 5px rgba(195,136,93,.18);}
.anna-tl-year{font-family:var(--mono);font-size:13px;letter-spacing:.16em;color:var(--brown);font-weight:700;}
.anna-tl-title{font-size:clamp(20px,2.2vw,28px);font-weight:800;color:var(--ink);margin:6px 0 8px;}
.anna-tl-text{font-size:15px;line-height:1.8;color:var(--ink-soft);max-width:56ch;}

/* ── QUOTE ── */
.anna-quote{max-width:900px;margin:0 auto;text-align:center;}
.anna-quote__mark{font-family:var(--mono);font-size:70px;line-height:0;color:var(--brown);opacity:.4;}
.anna-quote__text{font-size:clamp(24px,3.4vw,44px);font-weight:800;line-height:1.35;letter-spacing:-.02em;color:var(--ink);margin:22px 0;}
.anna-quote__text em{font-style:normal;color:var(--brown);}
.anna-quote__by{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-mute);}

/* ── PACKAGES ── */
.anna-pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);}
.anna-pkg{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--white);border:1px solid rgba(26,18,10,.08);display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(26,18,10,.06);transition:transform .4s var(--ease-out),box-shadow .4s;}
.anna-pkg:hover{transform:translateY(-6px);box-shadow:0 34px 74px rgba(26,18,10,.12);}
.anna-pkg__media{aspect-ratio:16/11;overflow:hidden;}
.anna-pkg__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1s var(--ease-out);}
.anna-pkg:hover .anna-pkg__media img{transform:scale(1.11);}
.anna-pkg__body{padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;flex:1;}
.anna-pkg__tag{font-family:var(--mono);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--brown);margin-bottom:10px;}
.anna-pkg__name{font-size:23px;font-weight:900;color:var(--ink);margin-bottom:10px;}
.anna-pkg__text{font-size:14.5px;line-height:1.75;color:var(--ink-soft);margin-bottom:18px;}
.anna-pkg__list{margin-bottom:22px;display:flex;flex-direction:column;gap:9px;list-style:none;padding:0;}
.anna-pkg__list li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-soft);}
.anna-pkg__list li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--brown);flex-shrink:0;}
.anna-pkg__foot{margin-top:auto;}

/* ── STEPS ── */
.anna-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);}
.anna-step__no{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--cream);background:var(--green);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.anna-step__title{font-size:18px;font-weight:800;color:var(--ink);margin-bottom:8px;}
.anna-step__text{font-size:14px;line-height:1.7;color:var(--ink-soft);}

/* ── GALLERY ── */
/* Justified mosaic — every row shares one height (--anna-gallery-row-h);
   each tile's width follows its image aspect ratio (--ar, set inline
   server-side when known and refined by anna-animations.js on load). */
.anna-gallery{
  display:flex;flex-wrap:wrap;gap:12px;
  --anna-gallery-row-h:300px;
}
.anna-gallery a{
  position:relative;display:block;overflow:hidden;border-radius:var(--r-sm);
  height:var(--anna-gallery-row-h);
  flex-grow:var(--ar,1);
  flex-shrink:1;
  flex-basis:calc(var(--ar,1) * var(--anna-gallery-row-h));
  min-width:90px;
}
.anna-gallery img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.03);transition:transform 1s var(--ease-out);}
.anna-gallery a:hover img{transform:scale(1.12);}

/* ── KOSHER ── */
.anna-kosher-cert{max-width:520px;margin:0 auto;background:var(--white);border-radius:var(--r-md);overflow:hidden;box-shadow:0 40px 90px rgba(26,18,10,.14);border:1px solid rgba(26,18,10,.08);}
.anna-kosher-cert__top{background:linear-gradient(140deg,#005f5b,#004845 60%,#012e2c);color:var(--cream);padding:clamp(26px,3.5vw,40px);text-align:center;position:relative;overflow:hidden;}
.anna-kosher-cert__top::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 15%,rgba(217,168,125,.28),transparent 55%);pointer-events:none;}
.anna-kosher-cert__badge{width:74px;height:74px;border-radius:50%;border:2px solid rgba(253,248,242,.4);display:flex;align-items:center;justify-content:center;font-size:34px;margin:0 auto 16px;position:relative;z-index:1;}
.anna-kosher-cert__auth{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--brown-light);position:relative;z-index:1;}
.anna-kosher-cert__title{font-size:26px;font-weight:900;margin-top:8px;position:relative;z-index:1;}
.anna-kosher-cert__body{padding:clamp(24px,3vw,36px);}
.anna-kosher-cert__body img{width:100%;border-radius:12px;margin-top:6px;}
.anna-kosher-row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px dashed rgba(26,18,10,.12);font-size:15px;}
.anna-kosher-row:last-child{border-bottom:none;}
.anna-kosher-row dt{color:var(--ink-mute);}
.anna-kosher-row dd{color:var(--ink);font-weight:700;text-align:left;margin:0;}

/* ── CONTACT INFO + HOURS ── */
.anna-info-card{display:flex;gap:16px;align-items:flex-start;background:var(--white);border:1px solid rgba(26,18,10,.07);border-radius:var(--r-md);padding:22px 24px;box-shadow:0 16px 40px rgba(26,18,10,.05);transition:transform .35s,box-shadow .35s;margin-bottom:14px;}
.anna-info-card:hover{transform:translateY(-3px);box-shadow:0 26px 56px rgba(26,18,10,.1);}
.anna-info-card__icon{width:46px;height:46px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:21px;background:linear-gradient(135deg,rgba(195,136,93,.16),rgba(0,72,69,.1));}
.anna-info-card__label{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brown);margin-bottom:4px;}
.anna-info-card__value{font-size:16px;font-weight:700;color:var(--ink);line-height:1.5;}
.anna-info-card__value a{color:var(--ink);}
.anna-hours-table{background:var(--white);border:1px solid rgba(26,18,10,.07);border-radius:var(--r-md);padding:24px 26px;box-shadow:0 16px 40px rgba(26,18,10,.05);}
.anna-hours-table h3{font-size:17px;font-weight:800;margin-bottom:14px;color:var(--ink);}
.anna-hours-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed rgba(26,18,10,.1);font-size:14.5px;}
.anna-hours-row:last-child{border-bottom:none;}
.anna-hours-row span:first-child{color:var(--ink-soft);}
.anna-hours-row span:last-child{font-family:var(--mono);color:var(--ink);font-weight:700;}
.anna-hours-row.closed span:last-child{color:var(--ink-mute);}

/* ── CTA BANNER ── */
.anna-cta-banner{position:relative;border-radius:var(--r-lg);overflow:hidden;padding:clamp(48px,7vw,96px) clamp(28px,5vw,72px);text-align:center;background:linear-gradient(140deg,#005f5b,#004845 55%,#012e2c);color:var(--cream);}
.anna-cta-banner::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 22% 18%,rgba(217,168,125,.24),transparent 55%),radial-gradient(ellipse at 82% 90%,rgba(242,202,198,.12),transparent 50%);pointer-events:none;}
.anna-cta-banner__inner{position:relative;z-index:1;max-width:640px;margin:0 auto;}
.anna-cta-banner h2{font-size:clamp(34px,5vw,68px);font-weight:900;letter-spacing:-.03em;line-height:1.02;}
.anna-cta-banner h2 em{font-style:normal;color:var(--brown-light);}
.anna-cta-banner p{margin:18px auto 0;font-size:clamp(15px,1.3vw,18px);line-height:1.8;color:rgba(253,248,242,.8);}
.anna-cta-banner .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px;}
.anna-cta-banner .btn-cream{background:var(--cream);color:var(--green);display:inline-flex;align-items:center;gap:10px;padding:16px 42px;border-radius:100px;font-weight:700;font-size:15px;box-shadow:0 10px 34px rgba(0,0,0,.22);}
.anna-cta-banner .btn-outline{border:1.5px solid rgba(253,248,242,.4);color:var(--cream);display:inline-flex;align-items:center;gap:10px;padding:15px 40px;border-radius:100px;font-weight:600;font-size:15px;}

/* ── MENU (with per-item image slot) ── */
.anna-menu{padding:var(--section-y) var(--pad-x);}

/* Sticky category navigation (pills) — ported from the original menu page */
.menu-nav{
  position:sticky;top:70px;z-index:40;margin:0 auto clamp(36px,5vw,60px);
  display:flex;gap:10px;overflow-x:auto;padding:14px 4px;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  background:rgba(253,248,242,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-block:1px solid rgba(26,18,10,.07);
}
.menu-nav::-webkit-scrollbar{display:none;}
.menu-nav__pill{
  flex:0 0 auto;padding:9px 20px;border-radius:100px;font-size:13px;font-weight:600;white-space:nowrap;
  color:var(--ink-soft);border:1px solid rgba(26,18,10,.12);background:var(--white);text-decoration:none;
  transition:background .3s,color .3s,border-color .3s,transform .2s;cursor:pointer;
}
.menu-nav__pill:hover{transform:translateY(-1px);border-color:var(--brown);color:var(--brown);}
.menu-nav__pill.is-active{background:var(--green);color:var(--cream);border-color:var(--green);}

.menu-cat{scroll-margin-top:160px;margin-bottom:clamp(48px,7vw,90px);}
.menu-cat__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(22px,3vw,34px);padding-bottom:16px;border-bottom:1.5px solid rgba(26,18,10,.1);}
.menu-cat__title{font-size:clamp(28px,4vw,52px);font-weight:900;letter-spacing:-.03em;color:var(--ink);line-height:1;}
.menu-cat__no{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--brown);white-space:nowrap;}
/* Legacy index anchor (#anna-c-N) — invisible, keeps old deep links alive */
.menu-anchor{display:block;height:0;overflow:hidden;scroll-margin-top:160px;}
.menu-subcat__title{scroll-margin-top:160px;font-size:clamp(15px,1.5vw,19px);font-weight:800;letter-spacing:-.01em;color:var(--brown-dark);margin:clamp(20px,2.6vw,30px) 0 6px;padding-bottom:8px;border-bottom:1px solid rgba(195,136,93,.28);}
.menu-subcat__title:first-child{margin-top:0;}
.menu-items{display:grid;grid-template-columns:1fr 1fr;gap:clamp(6px,1.2vw,18px) clamp(28px,5vw,68px);}
.menu-item{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:start;padding:13px 0;border-bottom:1px dashed rgba(26,18,10,.12);}
.menu-item__info{min-width:0;}
.menu-item__name{font-size:clamp(16px,1.4vw,19px);font-weight:700;color:var(--ink);display:block;}
.menu-item__tag{display:inline-block;margin-inline-start:8px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);background:rgba(0,72,69,.09);border-radius:100px;padding:2px 9px;vertical-align:middle;}
.menu-item__tag.hot{color:var(--brown-dark);background:rgba(195,136,93,.14);}
.menu-item__vegan{display:inline-block;margin-inline-start:6px;font-size:13px;line-height:1;vertical-align:middle;filter:saturate(1.15);}
.menu-item__price{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--brown-dark);white-space:nowrap;align-self:start;padding-top:2px;}
.menu-item__price.soft{color:var(--ink-mute);font-weight:400;}
.menu-item__desc{font-size:13.5px;line-height:1.55;color:var(--ink-mute);margin-top:2px;}
.menu-item__sizes{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--brown);margin-top:3px;}

/* ── LEAD FORM ── */
.anna-lead-form-wrap{display:flex;justify-content:center;}
.anna-lead-form{width:100%;max-width:720px;background:var(--white);border:1px solid rgba(26,18,10,.07);border-radius:var(--r-lg);padding:clamp(26px,3.4vw,42px);box-shadow:0 30px 70px rgba(26,18,10,.08);}
.anna-form-heading{font-size:clamp(22px,2.6vw,32px);font-weight:900;color:var(--ink);margin-bottom:22px;text-align:center;}
.anna-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
.anna-lead-form .form-field{margin-bottom:18px;}
.anna-lead-form .form-field.is-full{grid-column:1/-1;}
.anna-lead-form .form-field.is-half{grid-column:auto;}
.anna-lead-form label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:7px;}
.anna-lead-form input,.anna-lead-form textarea,.anna-lead-form select{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:var(--cream);border:1.5px solid rgba(26,18,10,.1);border-radius:14px;padding:13px 16px;transition:border-color .3s,background .3s;}
.anna-lead-form input:focus,.anna-lead-form textarea:focus,.anna-lead-form select:focus{outline:none;border-color:var(--brown);background:var(--white);}
.anna-lead-form textarea{resize:vertical;min-height:120px;}
.anna-lead-form button[type=submit]{width:100%;justify-content:center;margin-top:6px;border:none;cursor:pointer;}
.anna-lead-form .form-note{font-size:12px;color:var(--ink-mute);margin-top:12px;text-align:center;}
.anna-form-status{margin-top:12px;text-align:center;font-size:14px;font-weight:600;}
.anna-form-status.is-ok{color:var(--green);}
.anna-form-status.is-err{color:#b3402f;}

/* ── MAP ── */
.anna-map-embed{border-radius:var(--r-md);overflow:hidden;border:1px solid rgba(26,18,10,.08);box-shadow:0 20px 50px rgba(26,18,10,.06);}
.anna-map-embed iframe{display:block;width:100%;height:340px;border:0;filter:grayscale(.2) contrast(1.05);}

/* ═══ V2 RESPONSIVE — mobile-perfect ═══ */
@media (max-width:1024px){
  .anna-feat-grid,.anna-pkg-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .anna-steps{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  .anna-split,.anna-split.reverse{grid-template-columns:1fr;direction:rtl;gap:30px;}
  .anna-split__media{aspect-ratio:16/11;}
  .anna-feat-grid,.anna-pkg-grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto;}
  .anna-form-grid{grid-template-columns:1fr;}
  .anna-lead-form .form-field.is-half{grid-column:1/-1;}
  .anna-page-hero{min-height:54vh;min-height:54svh;padding-top:clamp(100px,24vw,140px);}
}
@media (max-width:680px){
  .menu-items{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .anna-stats{grid-template-columns:1fr;gap:22px;padding:30px 24px;}
  .anna-stats .stat{border-inline-start:none;padding:0;}
  .anna-stats .stat:not(:first-child){padding-top:22px;border-top:1px solid rgba(26,18,10,.1);}
  .anna-steps{grid-template-columns:1fr;}
}

/* ── CONTACT COLS — base fallback (Elementor control can override) ── */
.anna-contact-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:start;}
@media (max-width:768px){.anna-contact-cols{grid-template-columns:1fr;}}

/* ═══════════════════════════════════════════════════════════════
   V2 — HEADER + FOOTER WIDGETS (place inside Elementor Theme
   Builder Header/Footer templates). Ported from source base.css.
   ═══════════════════════════════════════════════════════════════ */
.anna-header .site-header{
  position:fixed;top:0;left:0;right:0;width:100%;z-index:800;
  padding:20px clamp(20px,3vw,44px);
  transition:padding .45s var(--ease-out),background .45s,backdrop-filter .45s,border-color .45s;
  border-bottom:1px solid transparent;
}
.anna-header .header-inner{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;max-width:none;margin-inline:auto;
}
.anna-header .site-header.scrolled{
  padding:12px clamp(20px,3vw,44px);
  background:rgba(12,16,15,.9);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-color:rgba(253,248,242,.08);
}
.anna-header .site-header.header-solid{background:rgba(12,16,15,.82);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);}
.anna-header .header-logo img{height:44px;width:auto;transition:height .4s;display:block;}
.anna-header .site-header.scrolled .header-logo img{height:38px;}
.anna-header .header-nav{display:flex;align-items:center;gap:26px;}
.anna-header .nav-link{font-size:13px;font-weight:500;color:rgba(253,248,242,.7);position:relative;transition:color .3s;text-decoration:none;}
.anna-header .nav-link::after{content:'';position:absolute;bottom:-4px;right:0;width:0;height:1.5px;background:var(--brown-light);transition:width .35s var(--ease-out);}
.anna-header .nav-link:hover,.anna-header .nav-link[aria-current="page"]{color:var(--cream);}
.anna-header .nav-link[aria-current="page"]::after,.anna-header .nav-link:hover::after{width:100%;}
.anna-header .nav-order{
  background:var(--brown);color:var(--white);padding:10px 24px;border-radius:100px;
  font-size:12px;font-weight:700;box-shadow:0 4px 18px rgba(195,136,93,.32);
  transition:background .3s,transform .3s,box-shadow .3s;
}
.anna-header .nav-order::after{display:none;}
.anna-header .nav-order:hover{background:var(--brown-dark);transform:translateY(-1px);box-shadow:0 8px 26px rgba(195,136,93,.45);color:var(--white);}
.anna-header .nav-toggle{display:none;flex-direction:column;gap:5px;padding:8px;z-index:810;background:none;border:none;cursor:pointer;}
.anna-header .nav-toggle span{display:block;width:24px;height:2px;background:var(--cream);border-radius:2px;transition:transform .35s var(--ease-out),opacity .25s;}
.anna-header .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.anna-header .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.anna-header .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.anna-header .mobile-menu{
  position:fixed;inset:0;z-index:790;background:var(--night,#0C100F);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;
}
.anna-header .mobile-menu.open{opacity:1;visibility:visible;}
.anna-header .mobile-menu a{font-size:23px;font-weight:700;color:var(--cream);text-decoration:none;}
.anna-header .mobile-menu a.order{color:var(--white);background:var(--brown);padding:14px 40px;border-radius:100px;font-size:18px;}

/* Editor preview: show header in-flow so it doesn't cover the canvas */
/* Editor preview: header in-flow + full-bleed breakout from the boxed canvas */
.elementor-editor-active .anna-header .site-header,
body.elementor-editor-preview .anna-header .site-header{
  position:relative;background:rgba(12,16,15,.92);
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
}
.elementor-editor-active .anna-footer .site-footer,
body.elementor-editor-preview .anna-footer .site-footer{
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
}

/* Header frontend fallback — full-bleed breakout while inside the boxed
   Elementor location wrapper (before portalChrome, or if JS is unavailable). */
.elementor-location-header .anna-header .site-header,
[data-elementor-type="header"] .anna-header .site-header{
  width:100vw;max-width:100vw;left:50%;right:auto;transform:translateX(-50%);
}

.anna-footer{width:100%;}
.anna-footer .site-footer{background:var(--ink);color:var(--cream);padding:clamp(64px,9vw,116px) var(--pad-x) 0;position:relative;z-index:2;}

/* Footer full-bleed — robust regardless of where the widget lives.
   DEFAULT: break out of any boxed container to the full viewport width, so
   it is full-width even if the JS portal never runs (any placement). */
.anna-footer .site-footer{
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
}
/* Once portalChrome has moved the footer to <body>, a plain 100% width is
   enough and avoids the horizontal scrollbar that 100vw causes when a
   vertical scrollbar is present. */
.anna-footer.anna-portaled .site-footer{
  width:100%;max-width:none;margin-inline:0;
}
.anna-footer .footer-inner{max-width:1280px;margin:0 auto;}
.anna-footer .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:clamp(52px,7vw,88px);border-bottom:1px solid rgba(253,248,242,.1);}
.anna-footer .footer-logo img{height:46px;margin-bottom:18px;width:auto;display:block;}
.anna-footer .footer-tag{font-size:14px;line-height:1.8;color:rgba(253,248,242,.5);}
.anna-footer .footer-hours{font-family:var(--mono);font-size:12px;color:rgba(253,248,242,.34);margin-top:10px;}
.anna-footer .footer-col h4{font-family:var(--mono);font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:rgba(253,248,242,.3);margin-bottom:18px;}
.anna-footer .footer-col ul{list-style:none;margin:0;padding:0;}
.anna-footer .footer-col li{margin-bottom:12px;}
.anna-footer .footer-col a{font-size:14px;color:rgba(253,248,242,.56);transition:color .3s;text-decoration:none;}
.anna-footer .footer-col a:hover{color:var(--brown-light);}
.anna-footer .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-family:var(--mono);font-size:11px;color:rgba(253,248,242,.26);}
.anna-footer .footer-bottom a{color:inherit;transition:color .3s;text-decoration:none;}
.anna-footer .footer-bottom a:hover{color:rgba(253,248,242,.5);}

@media (max-width:1024px){
  .anna-footer .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  .anna-header .header-nav{display:none;}
  .anna-header .nav-toggle{display:flex;}
  .anna-header .site-header{padding:16px var(--pad-x);}
  .anna-header .site-header.scrolled{padding:12px var(--pad-x);}
  .anna-footer .footer-grid{grid-template-columns:1fr;gap:32px;}
  .anna-footer .footer-bottom{flex-direction:column;gap:12px;text-align:center;}
}

/* ═══════════════════════════════════════════════════════════════
   BLOG — archive grid + single post (Anna styling)
   ═══════════════════════════════════════════════════════════════ */

/* ── Archive grid ── */
.anna-blog{position:relative;}
.anna-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.anna-blog-card{
  display:flex;flex-direction:column;background:var(--white);border-radius:var(--r-md);overflow:hidden;
  border:1px solid rgba(26,18,10,.07);box-shadow:0 20px 50px rgba(26,18,10,.06);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out);
}
.anna-blog-card:hover{transform:translateY(-6px);box-shadow:0 34px 70px rgba(26,18,10,.12);}
.anna-blog-card__media{position:relative;display:block;height:240px;overflow:hidden;background:linear-gradient(135deg,rgba(195,136,93,.16),rgba(0,72,69,.1));}
.anna-blog-card__media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform 1s var(--ease-out);}
.anna-blog-card:hover .anna-blog-card__media img{transform:scale(1.12);}
.anna-blog-card__media.is-empty::after{content:'🥖';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:44px;opacity:.5;}
.anna-blog-card__cat{
  position:absolute;top:14px;right:14px;z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--white);
  background:var(--brown);padding:6px 14px;border-radius:100px;box-shadow:0 6px 18px rgba(195,136,93,.4);
}
.anna-blog-card__body{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2vw,30px);flex:1;}
.anna-blog-card__meta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-mute);display:flex;align-items:center;gap:8px;}
.anna-blog-card__meta .sep{opacity:.5;}
.anna-blog-card__title{font-size:clamp(20px,1.8vw,26px);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--ink);}
.anna-blog-card__title a{color:inherit;text-decoration:none;transition:color .3s;}
.anna-blog-card__title a:hover{color:var(--brown-dark);}
.anna-blog-card__excerpt{font-size:15px;line-height:1.7;color:var(--ink-soft);margin:0;}
.anna-blog-card__more{margin-top:auto;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--brown-dark);text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:gap .3s,color .3s;}
.anna-blog-card__more:hover{gap:14px;color:var(--brown);}
.anna-blog-empty{text-align:center;color:var(--ink-mute);font-size:16px;padding:60px 20px;}

/* ── Single post ── */
.anna-post{position:relative;}
.anna-post__hero{
  position:relative;min-height:72vh;min-height:72svh;display:flex;align-items:flex-end;
  padding:clamp(90px,14vw,150px) var(--pad-x) clamp(48px,7vw,90px);
  background:var(--night);overflow:hidden;
}
.anna-post__hero.is-plain{min-height:0;padding-top:clamp(120px,16vw,190px);background:var(--night);}
.anna-post__media{position:absolute;inset:0;z-index:0;}
.anna-post__media img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.05);}
.anna-post__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(8,7,5,.92),rgba(8,7,5,.4) 45%,rgba(8,7,5,.55));}
.anna-post__head{position:relative;z-index:2;max-width:900px;margin:0 auto;width:100%;text-align:center;}
.anna-post__cat{display:inline-block;color:var(--brown-light);margin-bottom:16px;}
.anna-post__title{font-size:clamp(34px,6vw,84px);font-weight:900;line-height:1.02;letter-spacing:-.035em;color:var(--cream);}
.anna-post__meta{margin-top:20px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:rgba(253,248,242,.7);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;}
.anna-post__meta .sep{opacity:.5;}

.anna-post__body-wrap{background:var(--cream);padding:clamp(48px,8vw,110px) var(--pad-x);position:relative;z-index:2;}
.anna-post__body{max-width:760px;margin:0 auto;}
.anna-post__back{display:inline-flex;align-items:center;gap:10px;max-width:760px;margin:clamp(40px,5vw,64px) auto 0;
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--brown-dark);text-decoration:none;transition:gap .3s,color .3s;}
.anna-post__back:hover{gap:16px;color:var(--brown);}

/* ── Article typography (shared, used by post body) ── */
.anna-article{font-size:clamp(17px,1.25vw,19px);line-height:1.95;color:var(--ink-soft);}
.anna-article > *:first-child{margin-top:0;}
.anna-article p{margin:0 0 1.4em;}
.anna-article h2{font-size:clamp(26px,3vw,40px);font-weight:900;line-height:1.1;letter-spacing:-.03em;color:var(--ink);margin:1.8em 0 .5em;}
.anna-article h3{font-size:clamp(21px,2.2vw,28px);font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--ink);margin:1.6em 0 .45em;}
.anna-article h2 + p, .anna-article h3 + p{margin-top:0;}
.anna-article a{color:var(--brown-dark);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .3s;}
.anna-article a:hover{color:var(--brown);}
.anna-article strong{color:var(--ink);font-weight:700;}
.anna-article ul,.anna-article ol{margin:0 0 1.4em;padding-inline-start:1.4em;}
.anna-article li{margin-bottom:.5em;}
.anna-article ul li::marker{color:var(--brown);}
.anna-article blockquote{
  margin:1.8em 0;padding:clamp(22px,3vw,34px) clamp(24px,4vw,44px);border-radius:var(--r-md);
  background:linear-gradient(135deg,rgba(0,72,69,.06),rgba(195,136,93,.08));border-inline-start:4px solid var(--brown);
  font-size:clamp(19px,1.6vw,24px);line-height:1.6;font-weight:600;color:var(--green);
}
.anna-article blockquote p{margin:0;}
.anna-article img{width:100%;height:auto;border-radius:var(--r-md);margin:1.6em 0;display:block;}
.anna-article figure{margin:1.6em 0;}
.anna-article figcaption{font-family:var(--mono);font-size:12px;color:var(--ink-mute);text-align:center;margin-top:10px;}
.anna-article hr{border:none;border-top:1px solid rgba(26,18,10,.12);margin:2.2em 0;}

/* ── Inline CTA block inside an article (pasted into the post editor) ── */
.anna-article .anna-inline-cta{
    margin:2.4em 0;padding:clamp(24px,3vw,36px);
    border-radius:var(--r-md);
    background:linear-gradient(135deg,rgba(195,136,93,.12),rgba(0,72,69,.07));
    border:1px solid rgba(195,136,93,.28);
    text-align:right;
}
.anna-article .anna-inline-cta__kicker{
    display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.26em;
    text-transform:uppercase;color:var(--green);margin-bottom:12px;
}
.anna-article .anna-inline-cta__title{
    font-size:clamp(20px,2.2vw,27px);font-weight:900;line-height:1.25;letter-spacing:-.02em;
    color:var(--ink);margin:0 0 .4em;
}
.anna-article .anna-inline-cta__text{font-size:15.5px;line-height:1.7;color:var(--ink-mute);margin:0 0 20px;}
.anna-article .anna-inline-cta__btn{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--brown);color:var(--white);text-decoration:none;
    padding:13px 30px;border-radius:100px;font-weight:700;font-size:14.5px;
    box-shadow:0 10px 30px rgba(195,136,93,.34);
    transition:background .3s,box-shadow .3s,transform .3s;
}
.anna-article .anna-inline-cta__btn:hover{background:var(--brown-dark);color:var(--white);transform:translateY(-2px);box-shadow:0 16px 40px rgba(195,136,93,.45);}

/* ── Article media — images, galleries, uploaded video and oEmbeds ──
   The client adds these in the normal WordPress post editor; these rules
   make every variant land as a full-bleed rounded block instead of a
   raw, unstyled element. */
.anna-article figure img,
.anna-article .wp-block-image img{margin:0;}
.anna-article video,
.anna-article .wp-block-video video{width:100%;height:auto;display:block;border-radius:var(--r-md);background:#0C100F;margin:1.6em 0;}
.anna-article figure video{margin:0;}
/* Responsive embeds (YouTube, Vimeo, Instagram, Facebook…) */
.anna-article iframe{width:100%;border:0;border-radius:var(--r-md);display:block;margin:1.6em 0;}
.anna-article .wp-block-embed{margin:1.9em 0;}
.anna-article .wp-block-embed figcaption{margin-top:12px;}
.anna-article .wp-block-embed__wrapper{position:relative;border-radius:var(--r-md);overflow:hidden;}
.anna-article .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper,
.anna-article .wp-block-embed.wp-has-aspect-ratio.wp-embed-aspect-16-9 .wp-block-embed__wrapper{aspect-ratio:16/9;}
.anna-article .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper{aspect-ratio:4/3;}
.anna-article .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper{aspect-ratio:9/16;max-width:420px;margin-inline:auto;}
.anna-article .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper > iframe{position:absolute;inset:0;width:100%;height:100%;margin:0;}
/* Bare embed markup (classic editor / raw iframe in a <p>) */
.anna-article p > iframe{margin-block:1.6em;aspect-ratio:16/9;height:auto;}
/* Galleries */
.anna-article .wp-block-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:1.9em 0;}
.anna-article .wp-block-gallery figure{margin:0;height:100%;}
.anna-article .wp-block-gallery img{height:100%;object-fit:cover;}
/* Alignment helpers WP emits */
.anna-article .aligncenter{margin-inline:auto;}
.anna-article .alignwide,
.anna-article .alignfull{margin-inline:0;}

/* "Wide media" — media breathes a little past the text column */
@media (min-width:900px){
    .anna-article.media-wide > figure,
    .anna-article.media-wide > .wp-block-image,
    .anna-article.media-wide > .wp-block-video,
    .anna-article.media-wide > .wp-block-embed,
    .anna-article.media-wide > .wp-block-gallery,
    .anna-article.media-wide > video,
    .anna-article.media-wide > img{
        width:calc(100% + 2 * clamp(20px,4vw,80px));
        max-width:none;
        margin-inline:calc(-1 * clamp(20px,4vw,80px));
    }
}

/* ── Blog responsive ── */
@media (max-width:900px){ .anna-blog-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){
  .anna-blog-grid{grid-template-columns:1fr;}
  .anna-post__hero{min-height:56vh;min-height:56svh;text-align:right;}
  .anna-post__head{text-align:right;}
  .anna-post__meta{justify-content:flex-start;}
}

/* ═══════════════════════════════════════════════════════════════
   AUDIT FIXES (fidelity + mobile parity with the original site)
   ═══════════════════════════════════════════════════════════════ */

/* About: emphasis words match the original's even texture (no bold spike) */
.about-sentence strong{font-weight:inherit;color:inherit;}

/* About stats: prevent number overflow on very narrow phones */
@media (max-width:480px){
  .about-stats{gap:0;}
  .stat{padding:0 6px;min-width:0;}
  .stat-num{font-size:clamp(26px,9vw,40px);}
}

/* Moments: neutralise inner <p> margins so lede spacing stays even */
.moment-lede > p{margin:0;}

/* Split: lede spacing 1:1 with the original */
.anna-split__copy .lede{margin-top:18px;}

/* CTA Banner: restore the original button hover feel */
.anna-cta-banner .btn-cream{transition:transform .3s var(--ease-out),box-shadow .3s;}
.anna-cta-banner .btn-cream:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(0,0,0,.3);color:var(--green);}
.anna-cta-banner .btn-outline{transition:background .3s,color .3s,border-color .3s;}
.anna-cta-banner .btn-outline:hover{background:var(--cream);color:var(--green);border-color:var(--cream);}

/* Kosher: styled placeholder when no certificate scan is uploaded */
.anna-kosher-cert__pending{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-height:220px;padding:32px;border-radius:var(--r-md);text-align:center;
  border:1.5px dashed rgba(0,72,69,.28);background:linear-gradient(135deg,rgba(0,72,69,.05),rgba(195,136,93,.07));
  color:var(--ink-mute);font-family:var(--mono);font-size:12px;letter-spacing:.06em;
}
.anna-kosher-cert__pending span{font-size:34px;opacity:.6;}

/* Contact: map fills its column gracefully and sticks on desktop */
.anna-map-embed{border-radius:var(--r-md);overflow:hidden;box-shadow:0 20px 50px rgba(26,18,10,.1);position:sticky;top:100px;}
.anna-map-embed iframe{width:100%;height:460px;border:0;display:block;}
@media (max-width:768px){ .anna-map-embed{position:static;} .anna-map-embed iframe{height:320px;} }

/* Lead form / contact form: stack the two-up fields at 820px like the original */
@media (max-width:820px){
  .anna-form-grid{grid-template-columns:1fr;}
  .anna-lead-form .form-field.is-half{grid-column:1/-1;}
}