:root {
    --purple: #5b1f7d;
    --purple-deep: #3d1556;
    --purple-soft: #efe7f5;
    --orange: #ff9a1f;
    --orange-deep: #f47b00;
    --ink: #15171c;
    --ink-soft: #2a2f33;
    --text: #4a4d52;
    --muted: #7d8085;
    --bg: #faf6f1;
    --bg-cream: #fbf8f3;
    --white: #ffffff;
    --line: rgba(14, 19, 23, 0.08);
    --radius: 18px;
    --radius-lg: 28px;
    --radius-xl: 36px;
    --shadow: 0 20px 50px rgba(14, 19, 23, 0.10);
    --shadow-soft: 0 8px 28px rgba(14, 19, 23, 0.06);
    --container: 1240px;
    --display: "Archivo Black", "Plus Jakarta Sans", Georgia, serif;
    --script: "Caveat Brush", "Caveat", cursive;
    --serif: "Abril Fatface", Georgia, serif;
    --body: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
section[id] { scroll-margin-top: 90px; }
body {
    margin: 0;
    font-family: var(--body);
    color: var(--text);
    background: var(--white);
    line-height: 1.65;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--purple); text-decoration: none; transition: color .2s; }
a:hover { color: var(--orange); }
h1, h2, h3, h4 { font-family: var(--body); color: var(--ink); margin: 0 0 .5em; line-height: 1.15; letter-spacing: -.02em; font-weight: 800; }
h1 { font-size: clamp(2.4rem, 5.5vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.85rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1rem; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 22px; }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--ink); color: #fff; padding: 10px 16px; z-index: 1000;
}
.skip-link:focus { left: 16px; top: 16px; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    text-transform: uppercase; letter-spacing: .22em; font-size: .8rem;
    font-weight: 700; color: var(--orange-deep); margin: 0 0 1rem;
}
.eyebrow::before {
    content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px;
}
.eyebrow.light { color: #fff; opacity: .9; }
.eyebrow.purple { color: var(--purple); }
.section-script {
    font-family: var(--script); color: var(--orange);
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    transform: rotate(-2deg); display: inline-block;
    line-height: 1; margin: 0 0 6px;
}

.cta-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: 15px 30px; border-radius: 999px; font-weight: 700;
    background: var(--purple); color: #fff !important;
    border: 2px solid var(--purple);
    transition: transform .25s, background .25s, color .25s, border-color .25s, box-shadow .25s;
    box-shadow: 0 12px 28px rgba(91, 31, 125, .28);
    white-space: nowrap; font-size: .96rem; letter-spacing: .01em;
}
.cta-btn:hover { background: var(--purple-deep); border-color: var(--purple-deep); color: #fff !important; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(91, 31, 125, .35); }
.cta-btn.primary { background: var(--orange); border-color: var(--orange); color: var(--ink) !important; box-shadow: 0 12px 28px rgba(255, 154, 31, .35); }
.cta-btn.primary:hover { background: var(--orange-deep); border-color: var(--orange-deep); color: #fff !important; }
.cta-btn.ghost { background: transparent; color: var(--ink) !important; border-color: var(--ink); box-shadow: none; }
.cta-btn.ghost:hover { background: var(--ink); color: #fff !important; }
.cta-btn.ghost-light { background: transparent; color: #fff !important; border-color: #fff; box-shadow: none; }
.cta-btn.ghost-light:hover { background: #fff; color: var(--ink) !important; }
.cta-btn.big { padding: 20px 36px; font-size: 1.08rem; }

/* HEADER */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    transition: background .35s ease, box-shadow .35s ease, padding .35s ease, border-color .35s ease;
    background: transparent;
    border-bottom: 1px solid transparent;
}
.site-header.is-floating .header-inner { padding-top: 14px; padding-bottom: 14px; }
.site-header.is-scrolled {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(1.4) blur(18px);
    -webkit-backdrop-filter: saturate(1.4) blur(18px);
    border-bottom-color: var(--line);
    box-shadow: 0 8px 26px rgba(14, 19, 23, .06);
}
.site-header.is-scrolled .header-inner { padding-top: 0; padding-bottom: 0; }
.header-inner {
    display: flex; align-items: center; gap: 24px;
    min-height: 72px;
    transition: padding .35s ease;
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand img { height: 42px; width: auto; transition: filter .3s ease; }

.primary-nav {
    margin-left: auto;
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(91, 31, 125, .12);
    border-radius: 999px;
    padding: 6px;
    transition: background .3s ease, border-color .3s ease;
}
.site-header.is-scrolled .primary-nav {
    background: transparent;
    border-color: transparent;
}
.primary-nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 2px; align-items: center; }
.primary-nav a {
    position: relative; display: inline-flex; align-items: center;
    color: var(--ink); font-weight: 600; padding: 10px 18px; border-radius: 999px;
    font-size: .92rem; letter-spacing: -.005em;
    transition: color .2s, background .25s;
}
.primary-nav a::before {
    content: ""; position: absolute; left: 50%; bottom: 4px;
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--orange); opacity: 0; transform: translateX(-50%) translateY(4px);
    transition: opacity .25s, transform .25s;
}
.primary-nav a:hover { color: var(--purple); background: rgba(91, 31, 125, .08); }
.primary-nav a:hover::before { opacity: 1; transform: translateX(-50%) translateY(0); }
.primary-nav a.is-current {
    color: var(--purple); background: rgba(91, 31, 125, .12);
}
.primary-nav a.is-current::before { opacity: 1; transform: translateX(-50%) translateY(0); }

.header-cta {
    padding: 11px 22px; font-size: .9rem;
    box-shadow: 0 10px 24px rgba(91, 31, 125, .35);
}
.header-cta svg { width: 16px; height: 16px; }
.site-header.is-scrolled .header-cta { box-shadow: 0 8px 20px rgba(91, 31, 125, .25); }

.nav-toggle { display: none; }
.nav-toggle-btn {
    display: none; width: 44px; height: 44px;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; cursor: pointer; margin-left: auto;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    border: 1px solid rgba(91, 31, 125, .12);
    transition: background .2s;
}
.nav-toggle-btn:hover { background: var(--purple-soft); }
.nav-toggle-btn span { display: block; width: 20px; height: 2px; background: var(--purple); border-radius: 2px; transition: transform .3s, opacity .25s; }
.nav-toggle:checked ~ .nav-toggle-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle:checked ~ .nav-toggle-btn span:nth-child(2) { opacity: 0; }
.nav-toggle:checked ~ .nav-toggle-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* DARK-HERO HEADER OVERRIDES
   When the active hero slide carries data-theme="dark" the slider JS
   toggles body.hero-on-dark. While the floating header sits over that
   dark photo (i.e. before the user scrolls and .is-scrolled kicks in)
   recolor the logo, nav pill and mobile menu button for contrast.
   Once .is-scrolled is added these rules drop out and the regular
   white-backed header takes over. */
body.hero-on-dark .site-header:not(.is-scrolled) .brand img {
    filter: brightness(0) invert(1);
}
body.hero-on-dark .site-header:not(.is-scrolled) .primary-nav {
    background: rgba(15, 17, 28, .42);
    border-color: rgba(255, 255, 255, .18);
}
body.hero-on-dark .site-header:not(.is-scrolled) .primary-nav a { color: #fff; }
body.hero-on-dark .site-header:not(.is-scrolled) .primary-nav a:hover {
    color: #fff; background: rgba(255, 255, 255, .14);
}
body.hero-on-dark .site-header:not(.is-scrolled) .primary-nav a.is-current {
    color: #fff; background: rgba(255, 255, 255, .2);
}
body.hero-on-dark .site-header:not(.is-scrolled) .primary-nav a::before { background: var(--orange); }
body.hero-on-dark .site-header:not(.is-scrolled) .nav-toggle-btn {
    background: rgba(15, 17, 28, .42);
    border-color: rgba(255, 255, 255, .18);
}
body.hero-on-dark .site-header:not(.is-scrolled) .nav-toggle-btn span { background: #fff; }

/* HERO SLIDER */
.hero-slider {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--bg-cream);
    /* JS sets a precise height equal to window.innerHeight; these are first-paint fallbacks. */
    min-height: 100vh;
    min-height: 100svh;
    display: flex; flex-direction: column;
}
@supports not (min-height: 100svh) {
    .hero-slider { min-height: 100vh; }
}
.slider-track {
    position: relative; width: 100%;
    flex: 1; display: block;
}
.slide {
    position: absolute; inset: 0; display: flex; align-items: center;
    opacity: 0; visibility: hidden;
    transition: opacity .8s ease, visibility 0s linear .8s;
    padding: 110px 0 70px;
    overflow-y: auto;
}
.slide.is-active {
    opacity: 1; visibility: visible;
    transition: opacity .8s ease, visibility 0s linear 0s;
    width: 100%;
}
.slide-media {
    position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
.slide-media picture { display: block; width: 100%; height: 100%; }
.slide-media img {
    width: 100%; height: 100%; object-fit: cover; object-position: center;
    transform: scale(1.04);
    animation: kenburns 14s ease-out forwards;
}
.slide.is-active .slide-media img { animation-play-state: running; }
@keyframes kenburns {
    from { transform: scale(1.04); }
    to   { transform: scale(1.10); }
}
.slide-overlay {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(95deg,
            rgba(251, 248, 243, .98) 0%,
            rgba(251, 248, 243, .92) 38%,
            rgba(251, 248, 243, .55) 58%,
            rgba(251, 248, 243, 0) 78%);
}

/* Slide 1 ships with a dark, almost-black product photo (the döner on
   black). The default cream overlay washes that out, so swap to a
   transparent / mild-dark wash and flip the headline text to light. */
.slide:nth-child(1) .slide-overlay {
    background: linear-gradient(95deg,
        rgba(15, 17, 28, .55) 0%,
        rgba(15, 17, 28, .38) 38%,
        rgba(15, 17, 28, .10) 58%,
        rgba(15, 17, 28, 0) 78%);
}
.slide:nth-child(1) .slide-title-bold { color: #ffffff; }
.slide:nth-child(1) .slide-title-script {
    color: var(--orange);
    text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.slide:nth-child(1) .slide-sub { color: rgba(255, 255, 255, .92); }
.slide:nth-child(1) .slide-sub strong { color: var(--orange); }

/* Recolor the rest of slide 1's foreground (features, ghost CTA,
   spinning signature, meta row) to read on the dark wash. Scoped to
   ≥721px because the mobile overlay still drops a cream cap from 58%
   down for the bottom group, so those elements need to stay on
   purple/ink down there. */
@media (min-width: 721px) {
    .slide:nth-child(1) .slide-features li { color: #fff; }
    .slide:nth-child(1) .feature-icon {
        border-color: rgba(255, 255, 255, .55);
        background: rgba(255, 255, 255, .08);
        color: #fff;
    }
    .slide:nth-child(1) .slide-features li:hover .feature-icon {
        background: #fff; color: var(--purple);
    }

    .slide:nth-child(1) .cta-btn.ghost {
        color: #fff !important;
        border-color: rgba(255, 255, 255, .7);
    }
    .slide:nth-child(1) .cta-btn.ghost:hover {
        background: #fff; color: var(--ink) !important; border-color: #fff;
    }

    .slide:nth-child(1) .slide-footer { border-top-color: rgba(255, 255, 255, .22); }
    .slide:nth-child(1) .slide-signature { color: rgba(255, 255, 255, .88); }
    .slide:nth-child(1) .slide-meta-item { color: #fff; }
    .slide:nth-child(1) .slide-meta-item svg { color: var(--orange); }
    .slide:nth-child(1) .slide-meta-item:hover { color: var(--orange); }
    .slide:nth-child(1) .slide-meta-item:hover svg { color: #fff; }
}
.slide-inner {
    position: relative; z-index: 2; width: 100%;
    display: grid; grid-template-columns: minmax(0, 1fr);
}
.slide-copy { max-width: 640px; }

.slide-eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    background: rgba(255, 255, 255, .65); backdrop-filter: blur(6px);
    border: 1px solid rgba(91, 31, 125, .15);
    padding: 8px 18px 8px 8px; border-radius: 999px;
    margin: 0 0 20px;
    font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--purple);
}
.slide-eyebrow img { height: 28px; width: auto; border-radius: 50%; background: #fff; padding: 2px; }

.slide-title {
    font-family: var(--display);
    color: var(--purple);
    line-height: .95;
    margin: 0 0 18px;
    font-weight: 400;
    letter-spacing: -.01em;
}
.slide-title-bold {
    display: block;
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(3.6rem, 9vw, 7.4rem);
    text-transform: uppercase;
    color: var(--purple);
    line-height: .9;
}
.slide-title-script {
    display: block;
    font-family: var(--script);
    color: var(--orange);
    font-size: clamp(3rem, 7.5vw, 6rem);
    line-height: .9;
    margin-top: -.15em;
    margin-left: .2em;
    transform: rotate(-3deg);
    transform-origin: left center;
    text-shadow: 0 2px 0 rgba(244, 123, 0, .15);
    position: relative;
}
.slide-title-script::after {
    content: ""; display: block;
    width: 62%; height: 6px;
    background: var(--orange);
    border-radius: 999px;
    margin: 6px 0 0 .15em;
    transform: rotate(-1deg);
}

.slide-sub {
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    color: var(--ink-soft);
    max-width: 460px;
    margin: 0 0 22px;
    line-height: 1.55;
}
.slide-sub strong { color: var(--purple); font-weight: 700; }

.slide-features {
    list-style: none; padding: 0; margin: 0 0 24px;
    display: flex; flex-direction: column; gap: 10px;
}
.slide-features li {
    display: flex; align-items: center; gap: 14px;
    font-weight: 600; color: var(--ink); font-size: 1.02rem;
}
.feature-icon {
    width: 42px; height: 42px; flex: 0 0 42px;
    border-radius: 50%; border: 1.5px solid var(--purple);
    color: var(--purple);
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff;
    transition: transform .25s, background .25s, color .25s;
}
.feature-icon svg { width: 22px; height: 22px; }
.slide-features li:hover .feature-icon { background: var(--purple); color: #fff; transform: rotate(-6deg); }

.slide-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }

.slide-footer {
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    padding-top: 20px; border-top: 1px dashed rgba(91, 31, 125, .25);
}
.slide-signature {
    width: 110px; height: 110px; flex: 0 0 110px;
    color: var(--purple);
}
.slide-signature svg { width: 100%; height: 100%; overflow: visible; }
.slide-signature .sig-rotate {
    transform-origin: 60px 60px;
    transform-box: view-box;
    animation: spinSig 22s linear infinite;
}
@keyframes spinSig { to { transform: rotate(360deg); } }
.slide-meta { display: flex; gap: 22px; flex-wrap: wrap; }
.slide-meta-item {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--ink); font-weight: 600; font-size: .94rem;
}
.slide-meta-item svg { width: 18px; height: 18px; color: var(--purple); }
.slide-meta-item:hover { color: var(--purple); }
.slide-meta-item:hover svg { color: var(--orange); }

/* Slider controls */
.slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(255, 255, 255, .9); color: var(--purple);
    border: 1px solid rgba(91, 31, 125, .18);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 5;
    transition: background .2s, color .2s, transform .2s;
    box-shadow: var(--shadow-soft);
}
.slider-arrow:hover { background: var(--purple); color: #fff; transform: translateY(-50%) scale(1.05); }
.slider-arrow svg { width: 22px; height: 22px; }
.slider-arrow.prev { left: 22px; }
.slider-arrow.next { right: 22px; }

.slider-dots {
    position: absolute; left: 0; right: 0; bottom: 28px; z-index: 5;
    display: flex; justify-content: center; gap: 10px;
}
.slider-dot {
    width: 10px; height: 10px; border-radius: 50%;
    border: 0; background: rgba(91, 31, 125, .25); cursor: pointer;
    padding: 0; transition: width .25s, background .25s;
}
.slider-dot.is-active { width: 32px; border-radius: 999px; background: var(--purple); }

/* DELIVERY STRIP */
.delivery-strip { background: #fff; padding: 56px 0; position: relative; }
.delivery-strip .container { padding-top: 0; padding-bottom: 0; }
.delivery-card {
    position: relative; z-index: 3;
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 44px 40px 48px;
    box-shadow: 0 18px 44px rgba(91, 31, 125, .08);
    border: 1px solid rgba(91, 31, 125, .08);
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 40px;
}
.delivery-intro { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.delivery-kicker {
    text-transform: uppercase; letter-spacing: .22em; font-size: .82rem;
    font-weight: 700; color: var(--orange-deep);
}
.delivery-title {
    font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    color: var(--ink); margin: 0; font-weight: 400; line-height: 1.1;
}
.delivery-script {
    font-family: var(--script); color: var(--orange);
    font-size: 1.2em; display: inline-block; transform: rotate(-3deg);
    margin-left: 4px;
}
.delivery-logos { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; gap: 52px; flex-wrap: wrap; }
.delivery-logos a {
    display: inline-flex; align-items: center;
    padding: 18px 34px; border-radius: 999px;
    background: var(--bg-cream); border: 1px solid var(--line);
    transition: background .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.delivery-logos a:hover {
    background: #fff; border-color: var(--purple);
    transform: translateY(-3px); box-shadow: 0 10px 24px rgba(91, 31, 125, .15);
}
.delivery-logos img {
    height: 72px; width: auto; object-fit: contain;
    filter: grayscale(.15); opacity: .96; transition: filter .25s, opacity .25s;
}
.delivery-logos a:hover img { filter: none; opacity: 1; }

/* ABOUT */
.about { padding: 90px 0 110px; background: var(--white); }
.delivery-strip + .about { padding-top: 110px; }
.about-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px; align-items: center; }
.about h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 4vw, 3.2rem); letter-spacing: -.02em; }
.about-stats { list-style: none; padding: 0; margin: 36px 0 0; display: flex; gap: 32px; flex-wrap: wrap; }
.about-stats li { display: flex; flex-direction: column; padding: 0 18px 0 0; border-right: 1px solid var(--line); }
.about-stats li:last-child { border-right: 0; }
.about-stats strong { font-family: var(--serif); font-size: 2.4rem; color: var(--purple); line-height: 1; }
.about-stats span { font-size: .88rem; color: var(--muted); margin-top: 4px; }
.about-gallery {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 220px 220px;
    gap: 18px;
}
.about-img { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
.about-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.about-img:hover img { transform: scale(1.05); }
.about-img-1 { grid-row: span 2; border-radius: var(--radius-xl); }

/* SECTION HEAD */
.section-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.section-head .eyebrow { justify-content: center; }
.section-head h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
.section-head.light h2, .section-head.light .section-sub { color: #fff; }
.section-sub { color: var(--muted); font-size: 1.05rem; }

/* MENU */
.menu-section {
    padding: 110px 0; background: var(--bg);
    position: relative; overflow: hidden;
}
.menu-section::before {
    content: ""; position: absolute; top: 60px; right: -100px;
    width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 154, 31, .15) 0%, transparent 70%);
    pointer-events: none;
}
.menu-section::after {
    content: ""; position: absolute; bottom: 80px; left: -120px;
    width: 360px; height: 360px; border-radius: 50%;
    background: radial-gradient(circle, rgba(91, 31, 125, .12) 0%, transparent 70%);
    pointer-events: none;
}
.menu-section .container { position: relative; z-index: 1; }
.menu-filters {
    display: inline-flex; justify-content: center; gap: 6px; margin: 0 auto 44px;
    flex-wrap: wrap; padding: 6px;
    background: #fff; border-radius: 999px;
    box-shadow: 0 8px 24px rgba(14, 19, 23, .06);
    border: 1px solid rgba(91, 31, 125, .08);
}
.menu-filters-wrap { display: flex; justify-content: center; margin-bottom: 44px; }
.filter-btn {
    border: 0; background: transparent; color: var(--ink);
    padding: 11px 22px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600;
    font-size: .92rem;
    transition: all .25s;
}
.filter-btn:hover { color: var(--purple); }
.filter-btn.is-active { background: var(--purple); color: #fff; box-shadow: 0 8px 20px rgba(91, 31, 125, .3); }

.menu-grid {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 28px;
}
.menu-card {
    background: #fff; border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: 0 6px 22px rgba(14, 19, 23, .05);
    transition: transform .35s ease, box-shadow .35s ease;
    display: flex; flex-direction: column;
    border: 1px solid rgba(14, 19, 23, .04);
}
.menu-card.is-hidden { display: none; }
.menu-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(91, 31, 125, .15); }
.menu-card figure { margin: 0; display: flex; flex-direction: column; height: 100%; }

.menu-card-media {
    position: relative; overflow: hidden;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--purple-soft) 0%, #fbf3e8 100%);
}
.menu-card-media::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 50%;
    background: linear-gradient(180deg, transparent 0%, rgba(14, 19, 23, .25) 100%);
    pointer-events: none; opacity: 0; transition: opacity .35s;
}
.menu-card:hover .menu-card-media::after { opacity: 1; }
.menu-card-media picture { display: block; width: 100%; height: 100%; }
.menu-card-media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s ease;
}
.about-img picture { display: block; height: 100%; }
.menu-card:hover .menu-card-media img { transform: scale(1.08); }

.menu-card-cat {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
    color: var(--purple); background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    padding: 6px 12px; border-radius: 999px; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(14, 19, 23, .08);
}

.menu-card figcaption {
    padding: 20px 22px 22px;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.menu-card h3 {
    margin: 0; font-size: 1.12rem; font-family: var(--body); font-weight: 700;
    color: var(--ink); letter-spacing: -.01em; line-height: 1.3;
}
.menu-card-cta {
    width: 38px; height: 38px; flex: 0 0 38px;
    border-radius: 50%; background: var(--purple-soft); color: var(--purple);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .25s, color .25s, transform .35s;
}
.menu-card-cta svg { width: 18px; height: 18px; }
.menu-card:hover .menu-card-cta { background: var(--orange); color: #fff; transform: rotate(-45deg); }

/* legacy alias */
.cat-badge { display: none; }

/* REVIEWS */
.reviews {
    padding: 110px 0; color: #fff;
    background: radial-gradient(circle at 20% 0%, var(--purple) 0%, var(--purple-deep) 70%);
    position: relative; overflow: hidden;
}
.reviews::before {
    content: ""; position: absolute; top: -120px; right: -80px;
    width: 360px; height: 360px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 154, 31, .25) 0%, transparent 70%);
    pointer-events: none;
}
.review-grid {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 24px;
}
.review-card {
    background: #fff; color: var(--ink-soft); padding: 30px 28px;
    border-radius: var(--radius-lg); box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: 14px;
    transition: transform .3s;
}
.review-card:hover { transform: translateY(-4px); }
.stars { color: var(--orange); font-size: 1.1rem; letter-spacing: 2px; }
.stars .dim { color: #e3dce8; }
.review-card blockquote {
    margin: 0; font-size: .98rem; line-height: 1.65; quotes: none; flex: 1;
    color: var(--ink-soft);
}
.review-card cite {
    font-style: normal; font-weight: 700; color: var(--purple);
    border-top: 1px solid var(--line); padding-top: 14px;
}

/* CTA BAND */
.cta-band {
    padding: 90px 0; background: var(--ink); color: #fff;
    position: relative; overflow: hidden;
}
.cta-band::after {
    content: "Bol Lezzet"; position: absolute;
    right: -10px; bottom: -30px;
    font-family: var(--script); color: rgba(255, 154, 31, .12);
    font-size: clamp(6rem, 14vw, 12rem); line-height: 1;
    transform: rotate(-6deg); pointer-events: none;
}
.cta-band-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
    position: relative; z-index: 1;
}
.cta-band h2 { color: #fff; margin: 0 0 8px; font-family: var(--serif); font-weight: 400; }
.cta-band-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* CONTACT */
.contact { padding: 110px 0; background: var(--bg-cream); }
.contact h2 { font-family: var(--serif); font-weight: 400; }
.contact-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: stretch; }
.contact address { font-style: normal; margin: 14px 0 24px; }
.contact address p { margin: 6px 0; }
.contact-map {
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow); min-height: 380px;
    background: var(--bg);
}
.contact-map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; }

/* CONTACT FORM */
.contact-form-wrap { margin-top: 70px; }
.form-alert {
    border-radius: var(--radius); padding: 14px 18px; margin: 0 auto 24px;
    max-width: 720px; font-weight: 500;
}
.form-alert.success { background: #e6f6ec; color: #1f6f3a; border: 1px solid #b8e2c5; }
.form-alert.error   { background: #fdecec; color: #a02020; border: 1px solid #f5c2c2; }
.form-alert ul { margin: 0; padding-left: 20px; }

/* Full-card success state shown in place of the form after a successful
   submit. Replaces the small .form-alert.success banner for a clearer
   confirmation moment. */
.form-success {
    max-width: 720px; margin: 0 auto;
    padding: 56px 32px;
    background: #f1faf3;
    border: 1px solid #cdebd6;
    border-radius: var(--radius-lg);
    text-align: center;
    color: #1f6f3a;
    box-shadow: var(--shadow-soft);
}
.form-success-tick {
    width: 84px; height: 84px; margin: 0 auto 18px;
    color: #2e9b56;
    animation: ticksPop .45s cubic-bezier(.18, .9, .28, 1.25);
}
.form-success-tick svg { width: 100%; height: 100%; }
.form-success-tick circle { stroke-dasharray: 145; stroke-dashoffset: 145; animation: tickCircle .55s ease-out forwards; }
.form-success-tick path   { stroke-dasharray: 40;  stroke-dashoffset: 40;  animation: tickCheck .35s .45s ease-out forwards; }
@keyframes ticksPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes tickCircle { to { stroke-dashoffset: 0; } }
@keyframes tickCheck  { to { stroke-dashoffset: 0; } }
.form-success h3 {
    font-family: var(--display); font-style: italic;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: #1f6f3a; margin: 0 0 10px; letter-spacing: -.01em;
}
.form-success p { color: #2c5d3d; font-size: 1rem; margin: 0; }
.form-success a { color: #1f6f3a; font-weight: 700; text-decoration: underline; }

.contact-form {
    max-width: 720px; margin: 0 auto;
    background: var(--bg); padding: 32px;
    border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
}
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.contact-form label { display: flex; flex-direction: column; gap: 6px; }
.contact-form label.full { grid-column: 1 / -1; }
.contact-form span { font-size: .9rem; font-weight: 600; color: var(--ink); }
.contact-form em { color: var(--orange); font-style: normal; }
.contact-form input,
.contact-form textarea {
    font: inherit; padding: 12px 14px; border-radius: 10px;
    border: 1.5px solid var(--line); background: #fff; color: var(--ink);
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
}
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none; border-color: var(--purple);
    box-shadow: 0 0 0 4px rgba(100, 41, 131, .12);
}
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form > label.full { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.form-note { font-size: .82rem; color: var(--muted); margin: 0; max-width: 420px; }
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 600px) {
    .contact-form { padding: 22px; }
    .contact-form .form-row { grid-template-columns: 1fr; gap: 14px; }
}

/* FOOTER */
.site-footer { background: #0a0d10; color: #c8cbd0; padding: 60px 0 22px; }
.footer-inner { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-brand img { background: #fff; padding: 6px 10px; border-radius: 8px; height: 44px; width: auto; }
.footer-brand p { margin-top: 14px; color: #8e9197; }
.footer-nav ul, .footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-nav ul { display: flex; flex-direction: column; gap: 8px; }
.footer-nav a, .footer-contact a { color: #c8cbd0; }
.footer-nav a:hover, .footer-contact a:hover { color: #fff; }
.footer-contact p { margin: 4px 0; }
.copy { padding-top: 22px; text-align: center; font-size: .9rem; color: #6b6e74; }

/* FAB CALL BUTTON */
.fab-call {
    position: fixed; right: 22px; bottom: 22px; z-index: 60;
    width: 58px; height: 58px; border-radius: 50%;
    background: var(--orange); color: #fff !important;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 30px rgba(223, 63, 0, .45);
    font-size: 1.5rem; transition: transform .25s;
}
.fab-call:hover { transform: scale(1.08); background: var(--orange); }

/* RESPONSIVE */
@media (max-width: 960px) {
    .about-inner, .contact-inner, .cta-band-inner { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .about-gallery { grid-template-rows: 180px 180px; }
    .slide-overlay {
        background: linear-gradient(100deg,
            rgba(251, 248, 243, .97) 0%,
            rgba(251, 248, 243, .88) 42%,
            rgba(251, 248, 243, .42) 70%,
            rgba(251, 248, 243, 0) 100%);
    }
    /* slide-media img object-position is now per-slide via inline style (config.image_pos) */
    .slide-copy { max-width: 100%; }
    .slider-arrow.prev { left: 10px; }
    .slider-arrow.next { right: 10px; }
}

@media (max-width: 860px) {
    .header-inner { gap: 12px; min-height: 64px; flex-wrap: wrap; }
    .header-cta { display: none; }
    .nav-toggle-btn { display: flex; }
    .site-header.is-floating .header-inner { padding-top: 8px; padding-bottom: 8px; }
    .primary-nav {
        order: 99; width: 100%; max-height: 0; overflow: hidden;
        background: rgba(255, 255, 255, .98);
        backdrop-filter: blur(14px);
        border-radius: var(--radius);
        border-color: transparent;
        padding: 0;
        transition: max-height .35s ease, padding .35s ease;
    }
    .primary-nav ul {
        flex-direction: column; gap: 0; padding: 8px 14px 14px;
        align-items: stretch;
    }
    .primary-nav a { padding: 12px 14px; display: block; border-radius: 10px; }
    .primary-nav a::before { display: none; }
    .nav-toggle:checked ~ .primary-nav {
        max-height: 600px; padding: 8px; margin-top: 8px;
        box-shadow: var(--shadow-soft);
    }
    .site-header.is-scrolled .primary-nav,
    .nav-toggle:checked ~ .primary-nav { background: rgba(255, 255, 255, .98); }
}

/* Short viewports — keep the slider content from overflowing on
   laptops with ~700px or shorter visible viewport (URL bar / OS chrome). */
@media (min-width: 721px) and (max-height: 820px) {
    .slide { padding: 90px 0 50px; }
    .slide-title { margin-bottom: 12px; }
    .slide-title-bold { font-size: clamp(2.6rem, 6.4vw, 5rem); }
    .slide-title-script { font-size: clamp(2.2rem, 5.4vw, 4rem); }
    .slide-sub { font-size: .96rem; margin-bottom: 14px; }
    .slide-features { gap: 6px; margin-bottom: 16px; }
    .slide-features li { font-size: .92rem; }
    .feature-icon { width: 34px; height: 34px; flex-basis: 34px; }
    .feature-icon svg { width: 18px; height: 18px; }
    .slide-actions { margin-bottom: 16px; }
    .slide-footer { padding-top: 12px; }
    .slide-signature { width: 90px; height: 90px; flex-basis: 90px; }
}
@media (min-width: 721px) and (max-height: 680px) {
    .slide { padding: 80px 0 40px; }
    .slide-title-bold { font-size: clamp(2.2rem, 5vw, 3.8rem); }
    .slide-title-script { font-size: clamp(1.8rem, 4.2vw, 3rem); }
    .slide-features { display: none; }
    .slide-sub { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
}

@media (max-width: 720px) {
    /* Restore full-height hero on phones so we can space the content
       (title up top, features + CTAs down low, photo in between). */
    .hero-slider { min-height: 100svh; }

    /* On phones, nudge slides 1-2 photos toward the left so the subject
       sits under the title group rather than the right margin
       (overrides the per-slide inline object-position from config).
       Slide 1 stays a gentler 35% so the döner cylinder remains in
       frame; slide 2's wider plate composition handles 20%. */
    /* All four slider sources have the food anchored on the right with
       a blank cream/marble left half. On phones, push the focal point
       to the right edge so the food is in frame and the title group
       still has clear cream space to land on (top band of the
       sandwich overlay). */
    .slide:nth-child(1) .slide-media img { object-position: 75% 50% !important; }
    .slide:nth-child(2) .slide-media img { object-position: 100% 50% !important; }
    .slide:nth-child(3) .slide-media img { object-position: 100% 50% !important; }
    .slide:nth-child(4) .slide-media img { object-position: 100% 50% !important; }
    .slide { align-items: stretch; padding: 96px 0 96px; }
    .slide-inner { display: flex; flex-direction: column; }
    .slide-copy {
        display: flex; flex-direction: column;
        flex: 1; max-width: 100%;
    }
    /* Tighter type so "GELENEKSEL" stays inside the viewport on narrow
       phones (10 italic caps at 14vw was overflowing right). */
    .slide-title-bold { font-size: clamp(2.4rem, 11.5vw, 4.2rem); letter-spacing: -.015em; }
    .slide-title-script { font-size: clamp(2.1rem, 9.8vw, 3.4rem); }
    .slide-title { word-break: break-word; overflow-wrap: anywhere; }

    /* Sandwich overlay: opaque cream at the top for the title, near-
       transparent through the middle so the döner shows, then a thicker
       cream cap at the bottom so the feature labels + CTAs stay legible
       no matter what the photo behind them looks like. */
    .slide-overlay {
        background: linear-gradient(180deg,
            rgba(251, 248, 243, .96) 0%,
            rgba(251, 248, 243, .82) 22%,
            rgba(251, 248, 243, .18) 42%,
            rgba(251, 248, 243, .18) 58%,
            rgba(251, 248, 243, .78) 80%,
            rgba(251, 248, 243, .96) 100%);
    }
    /* Slide 1 photo is near-black; flip the top of the sandwich to a
       dark wash so the white headline reads, and keep the bottom cream
       so the feature/CTA strip stays legible. */
    .slide:nth-child(1) .slide-overlay {
        background: linear-gradient(180deg,
            rgba(15, 17, 28, .60) 0%,
            rgba(15, 17, 28, .40) 22%,
            rgba(15, 17, 28, .10) 42%,
            rgba(251, 248, 243, .25) 58%,
            rgba(251, 248, 243, .82) 80%,
            rgba(251, 248, 243, .96) 100%);
    }

    /* Title block tight, then a soft sub that doesn't push the bottom
       group down — the auto margin on .slide-features does the spacing. */
    .slide-title { margin-bottom: 12px; }
    .slide-sub {
        font-size: .92rem; margin: 0; max-width: 100%;
        display: -webkit-box; -webkit-line-clamp: 2;
        -webkit-box-orient: vertical; overflow: hidden;
    }

    /* Push the features row + CTAs to the bottom of the slide so the
       middle of the screen stays photo. */
    .slide-features {
        margin: auto 0 16px;
        display: flex; flex-direction: row; flex-wrap: nowrap;
        gap: 10px;
        justify-content: space-between;
    }
    .slide-features li {
        flex: 1 1 0; min-width: 0;
        flex-direction: column; gap: 6px;
        align-items: center; text-align: center;
        font-size: .72rem; line-height: 1.2; font-weight: 600;
    }
    .feature-icon { width: 36px; height: 36px; flex-basis: 36px; border-width: 1.25px; }
    .feature-icon svg { width: 18px; height: 18px; }

    /* Drop the dashed footer (spinning signature + instagram/phone meta)
       on phones — the header already has nav, and the page is photo-first. */
    .slide-footer { display: none; }

    /* Hide the prev/next arrows on phones — dots + swipe are enough,
       and the side arrows overlap the slide content on narrow viewports. */
    .slider-arrow { display: none; }

    /* Keep the two hero CTAs on the same line on phones — shrink them
       instead of letting the second one wrap to a new row. */
    .slide-actions { gap: 10px; flex-wrap: nowrap; margin: 0; }
    .slide-actions .cta-btn {
        padding: 12px 16px; font-size: .82rem; letter-spacing: 0;
        flex: 1 1 0; min-width: 0; justify-content: center;
    }
    .slide-actions .cta-btn.big { padding: 14px 18px; font-size: .9rem; }

    /* Pin the call FAB to the very bottom-right corner of the viewport. */
    .fab-call { right: 14px; bottom: 14px; width: 52px; height: 52px; font-size: 1.35rem; }

    .about, .menu-section, .reviews, .contact { padding: 70px 0; }
    .about-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 150px 150px; }
    .delivery-strip { padding: 40px 0; }
    .delivery-card { padding: 30px 22px 34px; gap: 28px; align-items: center; text-align: center; }
    .delivery-logos { gap: 22px; width: 100%; }
    .delivery-logos img { height: 50px; }
    .delivery-logos a { padding: 12px 20px; }
    .footer-inner { grid-template-columns: 1fr; gap: 26px; }
    .contact-map iframe, .contact-map { min-height: 320px; }
}

/* INNER PAGES */
.visually-hidden {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* Floating header keeps the inner pages from being hidden — push content down */
body:not(.page-home) main { padding-top: 96px; }

/* Solid header variant for inner pages: visible from the start */
.site-header.is-solid {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(1.4) blur(18px);
    border-bottom-color: var(--line);
}

/* Page hero (top banner on inner pages) */
.page-hero {
    background: linear-gradient(135deg, var(--bg-cream) 0%, var(--purple-soft) 100%);
    padding: 60px 0 80px;
    position: relative; overflow: hidden;
}
.page-hero::before {
    content: ""; position: absolute; top: -120px; right: -120px;
    width: 360px; height: 360px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 154, 31, .2) 0%, transparent 70%);
    pointer-events: none;
}
.page-hero::after {
    content: ""; position: absolute; bottom: -140px; left: -120px;
    width: 380px; height: 380px; border-radius: 50%;
    background: radial-gradient(circle, rgba(91, 31, 125, .15) 0%, transparent 70%);
    pointer-events: none;
}
.page-hero-inner { position: relative; z-index: 1; max-width: 820px; }
.page-title {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    color: var(--ink); margin: 8px 0 16px;
    letter-spacing: -.02em; line-height: 1.05;
}
.page-title em {
    font-style: italic; font-family: var(--script); color: var(--orange);
    font-size: 1.05em; display: inline-block; transform: rotate(-2deg);
}
.page-lead {
    font-size: clamp(1.05rem, 1.4vw, 1.18rem);
    color: var(--ink-soft); max-width: 640px;
    margin: 0;
}

/* Breadcrumbs */
.breadcrumbs ol {
    list-style: none; padding: 0; margin: 0 0 18px;
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    font-size: .85rem;
}
.breadcrumbs li { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.breadcrumbs li + li::before {
    content: "›"; color: var(--muted); margin-right: 8px;
}
.breadcrumbs a { color: var(--muted); font-weight: 600; }
.breadcrumbs a:hover { color: var(--purple); }
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 700; }

/* Menu card link wrapper */
.menu-card-link {
    display: block; color: inherit; text-decoration: none;
    height: 100%;
}
.menu-card-link:hover { color: inherit; }
.menu-card-desc {
    font-size: .88rem; color: var(--muted); margin: 4px 0 0;
    line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.menu-card figcaption {
    align-items: flex-start;
}

/* About page tweaks */
.page-about { padding-top: 80px; padding-bottom: 110px; }
.page-menu { padding-top: 80px; }

/* Values grid (about page) */
.values { padding: 90px 0 110px; background: var(--bg); }
.values-grid {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
}
.value-card {
    background: #fff; padding: 32px 28px; border-radius: var(--radius-lg);
    box-shadow: 0 6px 24px rgba(14, 19, 23, .04);
    border: 1px solid rgba(91, 31, 125, .06);
    transition: transform .3s, box-shadow .3s;
}
.value-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(91, 31, 125, .12); }
.value-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 18px;
    background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%);
    color: #fff; margin-bottom: 16px;
}
.value-icon svg { width: 26px; height: 26px; }
.value-card h3 { margin: 0 0 8px; font-size: 1.15rem; font-weight: 700; }
.value-card p { margin: 0; color: var(--muted); font-size: .96rem; }

/* Product detail page */
.product-hero {
    padding: 50px 0 90px;
    background: var(--white);
}
.product-hero-inner { max-width: 1180px; margin: 0 auto; }
.product-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
    align-items: center; margin-top: 24px;
}
.product-media {
    margin: 0; border-radius: var(--radius-xl); overflow: hidden;
    box-shadow: 0 30px 60px rgba(91, 31, 125, .15);
    aspect-ratio: 1 / 1; background: var(--purple-soft);
}
.product-media picture, .product-media img { width: 100%; height: 100%; display: block; }
.product-media img { object-fit: cover; }
.product-copy h1 { margin-bottom: 14px; }
.product-desc {
    font-size: 1.08rem; line-height: 1.7; color: var(--ink-soft);
    margin: 0 0 24px;
}
.product-ingredients {
    background: var(--bg-cream); border-radius: var(--radius-lg);
    padding: 22px 26px; margin-bottom: 28px;
    border: 1px solid rgba(91, 31, 125, .08);
}
.product-ingredients h2 {
    font-family: var(--body); font-weight: 700; font-size: 1rem;
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--purple); margin: 0 0 12px;
}
.product-ingredients ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.product-ingredients li {
    background: #fff; padding: 6px 14px; border-radius: 999px;
    font-size: .88rem; font-weight: 600; color: var(--ink);
    border: 1px solid rgba(91, 31, 125, .12);
}
.product-actions {
    display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px;
}
.product-note { font-size: .85rem; color: var(--muted); margin: 0; }

.menu-section.related { padding: 70px 0 100px; }

@media (max-width: 860px) {
    .product-grid { grid-template-columns: 1fr; gap: 32px; }
    .product-media { aspect-ratio: 4 / 3; max-width: 560px; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0s !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
}