/* ============================================================================
   LANDING 2026  —  .lp-*
   ----------------------------------------------------------------------------
   The public landing page. Built around what a restaurant deployment actually
   has — its food photography, its menu structure and its branches — rather
   than around chef/blog/testimonial blocks that ship empty and then render as
   holes in the page.

   Colours come from the DB theme tokens, so the landing page cannot drift away
   from the palette the rest of the product uses. The shade end of the brand
   gradient is derived from the brand itself: the stored shade can be left over
   from another palette, which used to render green brands green-to-brown.

   Mobile first. Every spacing rule is logical (inline-start/end), so RTL needs
   no separate stylesheet.
   ========================================================================== */

.lp {
    --lp-brand:      var(--theme-brand, #B8541A);
    --lp-brand-dark: var(--theme-brand-dark, #8B3F12);
    --lp-brand-rgb:  var(--theme-brand-rgb, 184, 84, 26);
    --lp-accent:     var(--theme-accent, #E0A82E);
    --lp-accent-rgb: var(--theme-accent-rgb, 224, 168, 46);

    --lp-ink:        var(--theme-text, #241A13);
    --lp-ink-soft:   var(--theme-text-soft, #5C4938);
    --lp-ink-mute:   var(--theme-text-muted, #8C7A66);

    --lp-canvas:     #FBF7F0;
    --lp-surface:    #FFFFFF;
    --lp-surface-2:  #F6F0E6;
    --lp-line:       rgba(36, 26, 19, .09);
    --lp-line-2:     rgba(36, 26, 19, .16);
    --lp-night:      #1A120C;

    --lp-r-sm: 12px;
    --lp-r-md: 18px;
    --lp-r-lg: 26px;
    --lp-r-xl: 34px;
    --lp-pill: 999px;

    --lp-sh-1: 0 1px 2px rgba(36, 26, 19, .04), 0 6px 18px -10px rgba(36, 26, 19, .18);
    --lp-sh-2: 0 2px 6px rgba(36, 26, 19, .05), 0 18px 38px -18px rgba(36, 26, 19, .28);
    --lp-sh-3: 0 30px 70px -28px rgba(36, 26, 19, .42);
    --lp-sh-brand: 0 16px 34px -14px rgba(var(--lp-brand-rgb), .6);

    --lp-ease: cubic-bezier(.22, .61, .36, 1);
    --lp-gap:  clamp(48px, 8vw, 96px);

    --lp-font: 'Inter', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --lp-display: 'Playfair Display', 'Tajawal', Georgia, serif;

    display: block;
    background: var(--lp-canvas);
    color: var(--lp-ink);
    font-family: var(--lp-font);
    overflow-x: clip;
}
html[dir="rtl"] .lp {
    --lp-font: 'Tajawal', 'Inter', system-ui, -apple-system, sans-serif;
    --lp-display: 'Tajawal', 'Playfair Display', Georgia, serif;
}
@supports (color: color-mix(in srgb, red 50%, black)) {
    .lp { --lp-brand-dark: color-mix(in srgb, var(--lp-brand) 74%, #000); }
}

/* ---------------------------------------------------------------- LAYOUT */
.lp-shell {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 32px);
}
.lp-section { padding-block: var(--lp-gap); }
.lp-section--tight { padding-block: clamp(32px, 5vw, 56px); }
.lp-section--alt { background: var(--lp-surface); }

/* Section heading: eyebrow, title, optional lead + action on one baseline. */
.lp-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: clamp(20px, 3.5vw, 34px);
}
.lp-head__text { min-width: 0; }
.lp-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--lp-brand);
    margin-bottom: 10px;
}
html[dir="rtl"] .lp-eyebrow { letter-spacing: 0; text-transform: none; font-size: 13px; }
.lp-eyebrow::before {
    content: "";
    width: 22px; height: 2px; border-radius: 2px;
    background: var(--lp-brand);
    opacity: .7;
}
.lp-title {
    font-family: var(--lp-display);
    font-size: clamp(1.6rem, 4.2vw, 2.5rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--lp-ink);
    margin: 0;
}
html[dir="rtl"] .lp-title { font-weight: 800; letter-spacing: 0; }
.lp-lead {
    margin: 10px 0 0;
    font-size: clamp(.9rem, 2.2vw, 1rem);
    line-height: 1.75;
    color: var(--lp-ink-mute);
    max-width: 60ch;
}
.lp-head__link {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13.5px; font-weight: 800;
    color: var(--lp-brand) !important;
    text-decoration: none !important;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: border-color .2s var(--lp-ease), gap .2s var(--lp-ease);
}
.lp-head__link:hover { border-bottom-color: var(--lp-brand); gap: 12px; }
html[dir="rtl"] .lp-head__link i { transform: scaleX(-1); }
@media (max-width: 640px) {
    .lp-head { flex-direction: column; align-items: stretch; gap: 12px; }
    .lp-head__link { align-self: flex-start; }
}

/* ---------------------------------------------------------------- BUTTONS */
.lp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 26px;
    border: 0;
    border-radius: var(--lp-pill);
    font-family: inherit;
    font-size: 15px; font-weight: 800;
    text-decoration: none !important;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .22s var(--lp-ease), box-shadow .22s var(--lp-ease), filter .2s, background .2s, color .2s;
}
.lp-btn:active { transform: translateY(0) scale(.985); }
.lp-btn:focus-visible { outline: 2px solid var(--lp-brand); outline-offset: 3px; }
.lp-btn i { font-size: 14px; }

.lp-btn--primary {
    background: linear-gradient(135deg, var(--lp-brand), var(--lp-brand-dark));
    color: #fff !important;
    box-shadow: var(--lp-sh-brand);
}
.lp-btn--primary:hover { transform: translateY(-2px); filter: brightness(1.07); color: #fff !important; }

.lp-btn--glass {
    background: rgba(255, 255, 255, .14);
    color: #fff !important;
    border: 1.5px solid rgba(255, 255, 255, .4);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lp-btn--glass:hover { background: rgba(255, 255, 255, .24); transform: translateY(-2px); color: #fff !important; }

.lp-btn--ghost {
    background: var(--lp-surface);
    color: var(--lp-ink) !important;
    border: 1.5px solid var(--lp-line-2);
}
.lp-btn--ghost:hover { border-color: var(--lp-brand); color: var(--lp-brand) !important; transform: translateY(-2px); }

/* ------------------------------------------------------------------- HERO */
.lp-hero {
    position: relative;
    isolation: isolate;
    min-height: min(86svh, 720px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--lp-night);
}
@media (min-width: 992px) {
    .lp-hero { min-height: min(78svh, 760px); align-items: center; }
}

/* Media layer: every slide stacks here and cross-fades. */
.lp-hero__media { position: absolute; inset: 0; z-index: 0; }
.lp-hero__slide {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1s var(--lp-ease), transform 8s linear;
    will-change: opacity, transform;
}
.lp-hero__slide.is-active { opacity: 1; transform: scale(1); }
.lp-hero__slide[hidden] { display: none; }

/* Photo mosaic — the fallback when no slide media has been uploaded. Built
   from real dish photos, so an unconfigured hero still looks like a menu. */
.lp-hero__mosaic {
    position: absolute; inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 3px;
    opacity: .85;
}
@media (min-width: 768px) { .lp-hero__mosaic { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .lp-hero__mosaic { grid-template-columns: repeat(6, 1fr); } }
.lp-hero__mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Scrim: keeps the copy readable over any photograph. */
.lp-hero__scrim {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(to top, rgba(20, 12, 7, .94) 0%, rgba(20, 12, 7, .74) 34%, rgba(20, 12, 7, .34) 70%, rgba(20, 12, 7, .5) 100%),
        radial-gradient(70% 60% at 50% 100%, rgba(var(--lp-brand-rgb), .30), transparent 70%);
    pointer-events: none;
}

.lp-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: clamp(40px, 9vw, 88px);
    color: #fff;
}
.lp-hero__body { max-width: 44rem; }

.lp-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 16px;
    border-radius: var(--lp-pill);
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .26);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font-size: 12px; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase;
    color: #fff;
}
html[dir="rtl"] .lp-hero__eyebrow { letter-spacing: 0; text-transform: none; font-size: 13px; }
.lp-hero__eyebrow i { color: var(--lp-accent); font-size: 12px; }

.lp-hero__title {
    font-family: var(--lp-display);
    font-size: clamp(2rem, 7.4vw, 4rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.02em;
    margin: 18px 0 0;
    color: #fff;
    text-wrap: balance;
    text-shadow: 0 2px 26px rgba(0, 0, 0, .38);
}
html[dir="rtl"] .lp-hero__title { font-weight: 800; letter-spacing: 0; line-height: 1.22; }

.lp-hero__sub {
    margin: 14px 0 0;
    font-size: clamp(.95rem, 2.6vw, 1.12rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, .84);
    max-width: 46ch;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .35);
}

.lp-hero__actions {
    display: flex; flex-wrap: wrap; gap: 12px;
    margin-top: clamp(22px, 4vw, 32px);
}
@media (max-width: 420px) {
    .lp-hero__actions { flex-direction: column; align-items: stretch; }
    .lp-hero__actions .lp-btn { width: 100%; }
}

/* Trust row — facts, counted from the menu, not marketing adjectives. */
.lp-hero__facts {
    display: flex; flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: clamp(24px, 4vw, 36px);
    padding-top: clamp(18px, 3vw, 24px);
    border-top: 1px solid rgba(255, 255, 255, .18);
}
.lp-fact { display: inline-flex; align-items: center; gap: 10px; }
.lp-fact__icon {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .22);
    color: var(--lp-accent);
    font-size: 13px;
    flex: none;
}
.lp-fact__text { display: flex; flex-direction: column; line-height: 1.25; }
.lp-fact__num { font-size: 15px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.lp-fact__label { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .68); }

/* Slider chrome */
.lp-hero__dots {
    position: absolute;
    inset-block-end: clamp(16px, 3vw, 26px);
    inset-inline-end: clamp(16px, 4vw, 32px);
    z-index: 3;
    display: flex; gap: 8px;
}
.lp-hero__dot {
    width: 8px; height: 8px; padding: 0;
    border: 0; border-radius: var(--lp-pill);
    background: rgba(255, 255, 255, .38);
    cursor: pointer;
    transition: width .3s var(--lp-ease), background .3s;
}
.lp-hero__dot:hover { background: rgba(255, 255, 255, .7); }
.lp-hero__dot.is-active { width: 26px; background: #fff; }
.lp-hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.lp-hero__vidbtn {
    position: absolute;
    inset-block-end: clamp(16px, 3vw, 26px);
    inset-inline-start: clamp(16px, 4vw, 32px);
    z-index: 3;
    width: 40px; height: 40px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: rgba(20, 12, 7, .5);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: #fff;
    font-size: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .2s, transform .2s var(--lp-ease);
}
.lp-hero__vidbtn:hover { background: rgba(20, 12, 7, .78); transform: scale(1.06); }
.lp-hero__vidbtn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* A scroll hint only makes sense while the hero is the whole screen. */
.lp-hero__scroll {
    position: absolute;
    inset-block-end: 14px;
    inset-inline: 0;
    z-index: 3;
    display: none;
    justify-content: center;
    color: rgba(255, 255, 255, .6);
    font-size: 15px;
    animation: lp-bob 2.2s var(--lp-ease) infinite;
}
@media (min-width: 992px) { .lp-hero__scroll { display: flex; } }
@keyframes lp-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* --------------------------------------------------- ORDER METHODS (cards)
   «كيف تبي طلبك» — one illustration per way of ordering, edited from
   لوحة التحكم ← محتوى الموقع ← طرق استلام الطلب.

   The picture is the card here, not an accessory to it, which changes two
   things about the box:

     • The art well owns a fixed aspect ratio and the image is `contain`ed
       inside it. Every card is uploaded by a different person on a different
       day; without this, one tall photo makes its card a head taller than the
       two beside it and the row stops being a row.

     • The whole card is the link, and the label sits UNDER the art with the
       chevron ahead of it, mirroring itself for RTL through a logical
       `flex-direction` rather than a second rule.
   ------------------------------------------------------------------------ */
.lp-head--center { justify-content: center; text-align: center; }
.lp-head--center .lp-head__text { max-width: 62ch; }
.lp-head--center .lp-lead { margin-inline: auto; }
.lp-head--center .lp-eyebrow { justify-content: center; }

.lp-order {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 640px) { .lp-order { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .lp-order { grid-template-columns: repeat(3, 1fr); } }

.lp-order__card {
    display: flex; flex-direction: column; align-items: center;
    gap: 4px;
    padding: 22px 20px 20px;
    border-radius: var(--lp-r-lg);
    background: var(--lp-surface);
    border: 1px solid var(--lp-line);
    box-shadow: var(--lp-sh-1);
    text-decoration: none !important;
    color: inherit !important;
    text-align: center;
    transition: transform .25s var(--lp-ease), box-shadow .25s var(--lp-ease), border-color .25s;
}
.lp-order__card:hover {
    transform: translateY(-5px);
    box-shadow: var(--lp-sh-2);
    border-color: rgba(var(--lp-brand-rgb), .3);
}
.lp-order__card:focus-visible { outline: 2px solid var(--lp-brand); outline-offset: 3px; }

.lp-order__art {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
}
.lp-order__art img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
    transition: transform .3s var(--lp-ease);
}
.lp-order__card:hover .lp-order__art img { transform: scale(1.045); }
.lp-order__art i { font-size: clamp(46px, 8vw, 64px); color: var(--lp-brand); opacity: .55; }

.lp-order__go {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: clamp(1rem, 2.4vw, 1.15rem);
    font-weight: 800;
    color: var(--lp-brand);
}
.lp-order__go i {
    font-size: .68em;
    transition: transform .22s var(--lp-ease);
}
.lp-order__card:hover .lp-order__go i { transform: translateX(-4px); }
html[dir="ltr"] .lp-order__card:hover .lp-order__go i { transform: translateX(4px); }

.lp-order__sub {
    margin: 0;
    font-size: .83rem; line-height: 1.7;
    color: var(--lp-ink-mute);
    max-width: 34ch;
}

/* Motion is decoration here; a reader who asked for less does not get the
   lift or the zoom, only the colour change. */
@media (prefers-reduced-motion: reduce) {
    .lp-order__card, .lp-order__art img, .lp-order__go i { transition: none; }
    .lp-order__card:hover { transform: none; }
    .lp-order__card:hover .lp-order__art img { transform: none; }
    .lp-order__card:hover .lp-order__go i { transform: none; }
}

/* ------------------------------------------------------------ ORDER MODES */
.lp-modes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 720px) { .lp-modes { grid-template-columns: repeat(3, 1fr); } }

.lp-mode {
    position: relative;
    display: flex; flex-direction: column;
    gap: 10px;
    padding: 24px;
    border-radius: var(--lp-r-lg);
    background: var(--lp-surface);
    border: 1px solid var(--lp-line);
    box-shadow: var(--lp-sh-1);
    text-decoration: none !important;
    color: inherit !important;
    overflow: hidden;
    transition: transform .25s var(--lp-ease), box-shadow .25s var(--lp-ease), border-color .25s;
}
.lp-mode::after {
    content: "";
    position: absolute;
    inset-block-start: -40%;
    inset-inline-end: -30%;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(var(--lp-brand-rgb), .07);
    transition: transform .4s var(--lp-ease);
    pointer-events: none;
}
.lp-mode:hover { transform: translateY(-4px); box-shadow: var(--lp-sh-2); border-color: rgba(var(--lp-brand-rgb), .28); }
.lp-mode:hover::after { transform: scale(1.25); }
.lp-mode:focus-visible { outline: 2px solid var(--lp-brand); outline-offset: 3px; }

.lp-mode__icon {
    position: relative; z-index: 1;
    width: 52px; height: 52px;
    border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--lp-brand), var(--lp-brand-dark));
    color: #fff;
    font-size: 19px;
    box-shadow: var(--lp-sh-brand);
}
.lp-mode__tag {
    position: relative; z-index: 1;
    font-size: 11.5px; font-weight: 800;
    color: var(--lp-brand);
    letter-spacing: .06em;
}
.lp-mode__title {
    position: relative; z-index: 1;
    font-size: 1.12rem; font-weight: 800;
    color: var(--lp-ink);
    margin: 0;
}
.lp-mode__desc {
    position: relative; z-index: 1;
    margin: 0;
    font-size: .875rem; line-height: 1.65;
    color: var(--lp-ink-mute);
    flex: 1 1 auto;
}
.lp-mode__go {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 6px;
    font-size: 13.5px; font-weight: 800;
    color: var(--lp-brand);
    transition: gap .2s var(--lp-ease);
}
.lp-mode:hover .lp-mode__go { gap: 13px; }
html[dir="rtl"] .lp-mode__go i { transform: scaleX(-1); }

/* -------------------------------------------------------------- CATEGORIES */
/* Two fixed rows on a rail that scrolls sideways at every width: 19 categories
   must not become 19 stacked rows on a phone, nor three wrapped rows of tiles
   on a desktop. Everything past the second row rides the rail instead.
   Desktop gets arrows; touch just swipes. */
.lp-rail { position: relative; }

.lp-cats {
    --lp-cats-gap: 12px;
    --lp-cats-fit: 2.35;  /* columns in view — fractional so the cut tile hints at more */
    --lp-cats-per: min(var(--lp-cats-fit), var(--lp-cats-cols, 99));
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: calc(
        (100% - (var(--lp-cats-per) - 1) * var(--lp-cats-gap)) / var(--lp-cats-per)
    );
    gap: var(--lp-cats-gap);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-block-end: 6px;
    /* Let the rail bleed to the screen edge so it reads as scrollable. */
    margin-inline: calc(-1 * clamp(16px, 4vw, 32px));
    padding-inline: clamp(16px, 4vw, 32px);
    scroll-padding-inline: clamp(16px, 4vw, 32px);
}
.lp-cats::-webkit-scrollbar { display: none; }
.lp-cats:focus-visible {
    outline: 2px solid var(--lp-brand);
    outline-offset: 4px;
    border-radius: var(--lp-r-md);
}
@media (min-width: 560px) { .lp-cats { --lp-cats-fit: 3.35; } }
@media (min-width: 768px) {
    .lp-cats {
        --lp-cats-gap: 14px;
        --lp-cats-fit: 4;
        margin-inline: 0;
        padding-inline: 0;
        scroll-padding-inline: 0;
    }
}
@media (min-width: 1024px) { .lp-cats { --lp-cats-fit: 5; } }
@media (min-width: 1200px) { .lp-cats { --lp-cats-fit: 6; } }

/* Rail arrows. Hidden until JS confirms there is something to scroll, so a
   short menu never shows two dead buttons. */
.lp-rail__nav {
    position: absolute;
    inset-block-start: calc(50% - 25px);
    z-index: 3;
    display: none;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    padding: 0;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-pill);
    background: var(--lp-surface);
    color: var(--lp-ink);
    font-size: 15px;
    box-shadow: var(--lp-sh-2);
    cursor: pointer;
    transition: transform .2s var(--lp-ease), background .2s var(--lp-ease),
                color .2s var(--lp-ease), border-color .2s var(--lp-ease), opacity .2s var(--lp-ease);
}
.lp-rail__nav--prev { inset-inline-start: -18px; }
.lp-rail__nav--next { inset-inline-end: -18px; }
.lp-rail__nav:hover {
    background: var(--lp-brand);
    border-color: var(--lp-brand);
    color: #fff;
    transform: scale(1.06);
}
.lp-rail__nav:focus-visible { outline: 2px solid var(--lp-brand); outline-offset: 3px; }
.lp-rail__nav[disabled] { opacity: .3; pointer-events: none; box-shadow: var(--lp-sh-1); }
html[dir="rtl"] .lp-rail__nav i { transform: scaleX(-1); }
@media (min-width: 768px) {
    .lp-rail.is-scrollable .lp-rail__nav { display: flex; }
}
/* A finger already does this better than a button overlapping the tiles. */
@media (hover: none) {
    .lp-rail__nav { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-cats { scroll-behavior: auto; }
    .lp-rail__nav { transition: none; }
    .lp-rail__nav:hover { transform: none; }
}

.lp-cat {
    position: relative;
    scroll-snap-align: start;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: var(--lp-r-md);
    overflow: hidden;
    background: var(--lp-surface-2);
    text-decoration: none !important;
    box-shadow: var(--lp-sh-1);
    transition: transform .25s var(--lp-ease), box-shadow .25s var(--lp-ease);
}
@media (min-width: 768px) { .lp-cat { aspect-ratio: 4 / 5; } }
.lp-cat:hover { transform: translateY(-3px); box-shadow: var(--lp-sh-2); }
.lp-cat:focus-visible { outline: 2px solid var(--lp-brand); outline-offset: 3px; }

.lp-cat__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s var(--lp-ease);
}
.lp-cat:hover .lp-cat__img { transform: scale(1.07); }
/* Categories have no image column of their own; one whose dishes are all
   un-photographed gets a plate glyph rather than an empty tile. */
.lp-cat__ph {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px;
    color: rgba(var(--lp-brand-rgb), .26);
}
.lp-cat__veil {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(16, 10, 6, .88) 6%, rgba(16, 10, 6, .32) 52%, rgba(16, 10, 6, .06) 100%);
}
.lp-cat__body {
    position: absolute;
    inset-inline: 0; inset-block-end: 0;
    padding: 12px;
    color: #fff;
}
.lp-cat__name {
    display: block;
    font-size: .9rem; font-weight: 800;
    line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.lp-cat__count {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px; font-weight: 700;
    color: rgba(255, 255, 255, .74);
}

/* ------------------------------------------------------------------ DISHES */
.lp-dishes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 2.2vw, 20px);
}
@media (min-width: 720px)  { .lp-dishes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .lp-dishes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.lp-dish {
    position: relative;
    display: flex; flex-direction: column;
    border-radius: var(--lp-r-md);
    overflow: hidden;
    background: var(--lp-surface);
    border: 1px solid var(--lp-line);
    box-shadow: var(--lp-sh-1);
    transition: transform .25s var(--lp-ease), box-shadow .25s var(--lp-ease);
}
.lp-dish:hover { transform: translateY(-4px); box-shadow: var(--lp-sh-2); }

.lp-dish__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--lp-surface-2);
}
.lp-dish__img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .5s var(--lp-ease);
}
.lp-dish:hover .lp-dish__img { transform: scale(1.06); }

.lp-dish__cal {
    position: absolute;
    inset-block-end: 8px; inset-inline-start: 8px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    border-radius: var(--lp-pill);
    background: rgba(16, 10, 6, .62);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    color: #fff;
    font-size: 11px; font-weight: 700;
}
.lp-dish__cal i { color: var(--lp-accent); font-size: 10px; }

.lp-dish__body {
    display: flex; flex-direction: column;
    gap: 4px;
    padding: 12px 13px 13px;
    flex: 1 1 auto;
}
.lp-dish__cat {
    font-size: 10.5px; font-weight: 800;
    color: var(--lp-brand);
    letter-spacing: .05em;
    text-transform: uppercase;
}
html[dir="rtl"] .lp-dish__cat { letter-spacing: 0; text-transform: none; font-size: 11.5px; }
.lp-dish__name {
    font-size: .92rem; font-weight: 800;
    line-height: 1.35;
    color: var(--lp-ink) !important;
    text-decoration: none !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.lp-dish__name:hover { color: var(--lp-brand) !important; }

.lp-dish__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
}
.lp-dish__price {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 1.02rem; font-weight: 800;
    color: var(--lp-brand);
    font-variant-numeric: tabular-nums;
}
.lp-dish__price .Saudi_Riyal { width: .62em !important; height: auto !important; vertical-align: -.02em; }
.lp-dish__add {
    flex: none;
    width: 38px; height: 38px;
    border: 0; padding: 0;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--lp-brand), var(--lp-brand-dark));
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: var(--lp-sh-brand);
    transition: transform .2s var(--lp-ease), filter .2s;
}
.lp-dish__add:hover { transform: scale(1.09); filter: brightness(1.07); }
.lp-dish__add:focus-visible { outline: 2px solid var(--lp-brand); outline-offset: 2px; }

/* ---------------------------------------------------------------- BRANCHES */
.lp-branches {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 760px)  { .lp-branches { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .lp-branches { grid-template-columns: repeat(3, 1fr); } }

.lp-branch {
    display: flex; flex-direction: column;
    gap: 12px;
    padding: 22px;
    border-radius: var(--lp-r-lg);
    background: var(--lp-surface);
    border: 1px solid var(--lp-line);
    box-shadow: var(--lp-sh-1);
}
.lp-branch__top { display: flex; align-items: flex-start; gap: 12px; }
.lp-branch__pin {
    flex: none;
    width: 42px; height: 42px;
    border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--lp-brand-rgb), .10);
    color: var(--lp-brand);
    font-size: 16px;
}
.lp-branch__name {
    font-size: .98rem; font-weight: 800;
    line-height: 1.4;
    color: var(--lp-ink);
    margin: 0;
}
.lp-branch__addr {
    margin: 0;
    font-size: .82rem; line-height: 1.6;
    color: var(--lp-ink-mute);
}
.lp-branch__row {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: auto;
    padding-top: 4px;
}
.lp-branch__act {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 15px;
    border-radius: var(--lp-pill);
    border: 1px solid var(--lp-line-2);
    background: var(--lp-surface);
    font-size: 12.5px; font-weight: 800;
    color: var(--lp-ink-soft) !important;
    text-decoration: none !important;
    transition: border-color .2s, color .2s, background .2s;
}
.lp-branch__act:hover { border-color: var(--lp-brand); color: var(--lp-brand) !important; background: rgba(var(--lp-brand-rgb), .05); }
.lp-branch__act i { font-size: 11px; color: var(--lp-brand); }
.lp-branch__act--call { background: rgba(var(--lp-brand-rgb), .07); border-color: rgba(var(--lp-brand-rgb), .22); color: var(--lp-brand) !important; }

/* -------------------------------------------------------------- CLOSING CTA */
.lp-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--lp-r-xl);
    padding: clamp(32px, 6vw, 60px) clamp(22px, 5vw, 56px);
    background: linear-gradient(135deg, var(--lp-brand), var(--lp-brand-dark));
    color: #fff;
    box-shadow: var(--lp-sh-3);
}
.lp-cta::before {
    content: "";
    position: absolute;
    inset-block-start: -60%;
    inset-inline-end: -10%;
    width: 460px; height: 460px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
    z-index: -1;
}
.lp-cta__inner {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    gap: 24px;
}
.lp-cta__text { min-width: 0; flex: 1 1 340px; }
.lp-cta__title {
    font-family: var(--lp-display);
    font-size: clamp(1.4rem, 3.6vw, 2.1rem);
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
    color: #fff;
}
html[dir="rtl"] .lp-cta__title { font-weight: 800; }
.lp-cta__sub {
    margin: 10px 0 0;
    font-size: .95rem; line-height: 1.7;
    color: rgba(255, 255, 255, .82);
    max-width: 52ch;
}
.lp-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lp-cta .lp-btn--primary {
    background: #fff;
    color: var(--lp-brand) !important;
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5);
}
.lp-cta .lp-btn--primary:hover { filter: brightness(1); background: #fff; }
@media (max-width: 560px) {
    .lp-cta__actions { width: 100%; }
    .lp-cta__actions .lp-btn { width: 100%; }
}

/* ---------------------------------------------------------------- REVEAL */
/* Sections lift in once, on first sight. Anything that has not been observed
   yet stays fully visible, so the page is never blank if JS does not run. */
/* Hidden only once the script has claimed the page: without JS, or if it
   throws before the observer is wired, every section stays visible. */
html.lp-js .lp-reveal { opacity: 0; transform: translateY(18px); }
html.lp-js .lp-reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity .6s var(--lp-ease), transform .6s var(--lp-ease);
}

@media (prefers-reduced-motion: reduce) {
    html.lp-js .lp-reveal, html.lp-js .lp-reveal.is-in { opacity: 1; transform: none; transition: none; }
    .lp-hero__slide { transition: opacity .2s linear; transform: none; }
    .lp-hero__slide.is-active { transform: none; }
    .lp-hero__scroll { animation: none; }
    .lp-mode, .lp-dish, .lp-cat, .lp-btn { transition: none; }
}

/* The marketing chrome this page sits in already provides its own top spacing;
   the hero must start hard against it, with no gap of canvas showing. */
.lp-hero + * { margin-block-start: 0; }

/* The mosaic is a backdrop, not a gallery: photographs at thumbnail size on a
   dark hero read as noise unless they are dimmed and slightly desaturated. */
.lp-hero__mosaic { opacity: 1; }
.lp-hero__mosaic img { filter: saturate(.88) brightness(.72); }
/* With a mosaic behind it the copy needs a heavier floor than a single photo
   does — twelve small images give the eye far more to compete with. */
.lp-hero:has(.lp-hero__mosaic) .lp-hero__scrim {
    background:
        linear-gradient(to top, rgba(16, 10, 6, .97) 0%, rgba(16, 10, 6, .9) 42%, rgba(16, 10, 6, .66) 74%, rgba(16, 10, 6, .74) 100%),
        radial-gradient(80% 62% at 50% 100%, rgba(var(--lp-brand-rgb), .34), transparent 72%);
}

/* At 414px the two hero buttons still fit side by side; stacking them there
   made the fold two tall pills and pushed the facts row off screen. */
@media (max-width: 420px) {
    .lp-hero__actions { flex-direction: row; align-items: stretch; }
    .lp-hero__actions .lp-btn { width: auto; flex: 1 1 auto; padding-inline: 18px; font-size: 14px; }
}
@media (max-width: 340px) {
    .lp-hero__actions { flex-direction: column; }
    .lp-hero__actions .lp-btn { width: 100%; }
}
/* The mosaic gave the fold a tall band of photography above the headline. */
@media (max-width: 991.98px) {
    .lp-hero { min-height: min(78svh, 640px); }
}

/* The site's floating buttons (WhatsApp, dark-mode) live in the bottom
   corners, so the hero's own controls have to stay out of those corners:
   the video toggle moves to the top edge and the dots go centre-bottom. */
@media (max-width: 991.98px) {
    .lp-hero__vidbtn {
        inset-block-start: 14px;
        inset-block-end: auto;
        inset-inline-end: 14px;
        inset-inline-start: auto;
    }
    .lp-hero__dots {
        inset-inline: 0;
        justify-content: center;
        inset-block-end: 10px;
    }
}

/* ============================================================== HERO MOTION
   The fold is a moving picture, not a poster.

   A real clip plays whenever one exists — a video slide, or a drop-in file at
   public/user/media/hero.(webm|mp4) that needs no admin step. With no clip the
   hero still moves: the photography drifts in a slow ken-burns while a kitchen
   atmosphere runs over it — steam off the pass, warm embers, a sweeping light
   and film grain. That is a cinemagraph, which is what a restaurant hero wants
   anyway: motion that suggests a kitchen without a 12 MB download on 4G.

   Everything below animates transform and opacity only (compositor work, no
   layout), the whole layer is decorative and aria-hidden, it can be stopped
   from the hero's own pause button, and it is fully switched off under
   prefers-reduced-motion.
   ========================================================================= */

/* The whole ambience is screen-blended as one group, so it can only ever
   lighten the photograph underneath — steam and firelight add glow instead of
   laying a grey film over the food. Blending on the wrapper (not on each
   child) is what lets it reach past the scrim to the image itself. */
.lp-hero__fx {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* Ken burns — the still plate is kept alive. Videos are excluded: they carry
   their own motion and a second one on top reads as a wobble. */
.lp-hero__slide:not(.lp-hero__video).is-active {
    animation: lp-kenburns 30s var(--lp-ease) infinite alternate;
}
@keyframes lp-kenburns {
    0%   { transform: scale(1.04) translate3d(0, 0, 0); }
    50%  { transform: scale(1.11) translate3d(-1.8%, -1.4%, 0); }
    100% { transform: scale(1.06) translate3d(1.6%, .9%, 0); }
}
.lp-hero__mosaic { animation: lp-mosaic-drift 46s var(--lp-ease) infinite alternate; }
@keyframes lp-mosaic-drift {
    0%   { transform: scale(1.02); }
    100% { transform: scale(1.08); }
}

/* Steam — three plumes off the pass, each on its own rhythm so they never
   pulse together. Soft radial gradients rather than blur(): a filter on a
   full-bleed animated layer costs a repaint every frame. */
.lp-fx__steam {
    position: absolute;
    inset-block-end: -22%;
    width: clamp(200px, 32vw, 440px);
    aspect-ratio: 1 / 1.3;
    background: radial-gradient(50% 52% at 50% 62%,
        rgba(255, 246, 232, .17), rgba(255, 240, 224, .07) 46%, transparent 72%);
    opacity: 0;
    will-change: transform, opacity;
}
.lp-fx__steam--a { inset-inline-start: 6%;  animation: lp-steam 14s ease-in-out infinite; }
.lp-fx__steam--b { inset-inline-start: 42%; animation: lp-steam 18s ease-in-out 3.5s infinite; }
.lp-fx__steam--c { inset-inline-start: 74%; animation: lp-steam 16s ease-in-out 8s infinite; }
@keyframes lp-steam {
    0%   { opacity: 0;   transform: translate3d(0, 14%, 0) scale(.68); }
    16%  { opacity: .8;  }
    56%  { opacity: .46; transform: translate3d(4%, -42%, 0) scale(1.08); }
    100% { opacity: 0;   transform: translate3d(-3%, -98%, 0) scale(1.5); }
}

/* Embers — the flare off a grill. Position, size, speed and drift come from
   the markup, so no two specks share a path. */
.lp-fx__ember {
    position: absolute;
    inset-block-end: -12px;
    inset-inline-start: var(--lp-x, 50%);
    width: var(--lp-s, 4px);
    height: var(--lp-s, 4px);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 221, 168, .95), rgba(255, 160, 60, .55) 45%, rgba(255, 130, 30, 0) 72%);
    opacity: 0;
    animation: lp-ember var(--lp-t, 13s) linear var(--lp-dl, 0s) infinite;
    will-change: transform, opacity;
}
@keyframes lp-ember {
    0%   { opacity: 0;   transform: translate3d(0, 0, 0) scale(.5); }
    14%  { opacity: .85; }
    64%  { opacity: .5;  }
    100% { opacity: 0;   transform: translate3d(var(--lp-dx, 20px), -76vh, 0) scale(1.3); }
}

/* A light source moving across the room. */
.lp-fx__sweep {
    position: absolute;
    inset: -25% -45%;
    background: linear-gradient(104deg,
        transparent 36%, rgba(255, 228, 186, .11) 47%, rgba(255, 238, 210, .04) 55%, transparent 65%);
    transform: translate3d(-42%, 0, 0);
    animation: lp-sweep 19s ease-in-out infinite;
    will-change: transform;
}
@keyframes lp-sweep {
    0%, 8%   { transform: translate3d(-42%, 0, 0); }
    62%,100% { transform: translate3d(42%, 0, 0); }
}

/* The warm floor glow of a working pass, breathing like flame. */
.lp-fx__glow {
    position: absolute;
    inset-block-end: -16%;
    inset-inline: 0;
    height: 54%;
    background: radial-gradient(58% 100% at 50% 100%,
        rgba(255, 140, 42, .17), rgba(255, 110, 30, .06) 46%, transparent 72%);
    animation: lp-flicker 7s ease-in-out infinite;
}
@keyframes lp-flicker {
    0%, 100% { opacity: .55; }
    28%      { opacity: .88; }
    54%      { opacity: .42; }
    76%      { opacity: .76; }
}

/* Film grain — what makes the whole thing read as footage rather than CSS. It
   sits outside the screen-blended group on purpose: grain has to darken as
   well as lighten, which only an overlay blend against the frame itself can
   do. */
.lp-hero__grain {
    position: absolute;
    inset: -14%;
    z-index: 1;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.5'/></svg>");
    opacity: .1;
    mix-blend-mode: overlay;
    animation: lp-grain 1.2s steps(6) infinite;
    will-change: transform;
}
@keyframes lp-grain {
    0%   { transform: translate3d(0, 0, 0); }
    20%  { transform: translate3d(-3%, 2%, 0); }
    40%  { transform: translate3d(2%, -3%, 0); }
    60%  { transform: translate3d(-2%, -2%, 0); }
    80%  { transform: translate3d(3%, 1%, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* A real clip sits behind its own grade: uploaded footage is rarely shot for
   this palette, and the copy has to stay readable over all of it. */
.lp-hero__video { filter: saturate(1.04) contrast(1.03); }
.lp-hero:has(.lp-hero__video) .lp-fx__steam,
.lp-hero:has(.lp-hero__video) .lp-fx__ember { display: none; }

/* The pause button stops the ambience too, not just the footage — a control
   that leaves half the motion running is not a pause. */
.lp-hero.is-still .lp-hero__fx *,
.lp-hero.is-still .lp-hero__grain,
.lp-hero.is-still .lp-hero__slide,
.lp-hero.is-still .lp-hero__mosaic { animation-play-state: paused; }

/* Phones: the grain and half the specks are the first things to go — they are
   the frames nobody sees and the battery everybody feels. */
@media (max-width: 767.98px) {
    .lp-hero__grain { display: none; }
    .lp-fx__ember:nth-child(even) { display: none; }
    .lp-fx__steam--c { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-hero__fx,
    .lp-hero__grain,
    .lp-hero__vidbtn { display: none; }
    .lp-hero__slide:not(.lp-hero__video).is-active,
    .lp-hero__mosaic { animation: none; }
}