/* ==========================================================================
   Central Sushi — Light "cream" theme
   Everything here is scoped under body.light-theme so it can never leak
   into the existing dark shopping-flow pages (menu/cart/checkout/product).
   Applied by resources/views/components/user.blade.php.
   ========================================================================== */

body.light-theme {
    --lt-bg: #FBF8F2;
    --lt-surface: #FFFEFB;
    --lt-text: #2B2621;
    --lt-muted: #948575;
    --lt-muted-dark: #544A40;
    --lt-accent: #EA6A34;
    --lt-accent-dark: #CC5322;
    --lt-accent-soft: #FBE3D4;
    --lt-border: #E6D8C0;
    --lt-beige-100: #F2E9DB;
    --lt-beige-300: #D6C29B;
    --lt-card-bg: #FFFEFB;
    --lt-card-bg-solid: #FFFEFB;
    --lt-red: #B23A34;
    --lt-radius-xl: 28px;
    --lt-radius-lg: 20px;
    --lt-radius-md: 16px;
    --lt-radius-sm: 12px;
    --lt-radius-full: 100px;
    --lt-shadow-soft: 0 2px 6px rgba(43, 38, 33, .05), 0 14px 30px -18px rgba(43, 38, 33, .16);
    --lt-shadow-pop: 0 10px 26px -10px rgba(204, 83, 34, .4);
    --lt-ease: cubic-bezier(.22, .85, .32, 1);
    /* Actual .lt-header height, measured by JS (header.blade.php) on load/resize;
       this is just the fallback before that runs. */
    --lt-header-h: 68px;
    --lt-menu-tabs-h: 52px;

    /* .body-colour sets a dark gradient via the `background` shorthand, which
       also sets background-image — override both, not just the color, or the
       gradient still shows through in any gap below the footer (e.g. a short
       page on a tall viewport). */
    background-color: var(--lt-bg) !important;
    background-image: none !important;
    color: var(--lt-text) !important;
    font-weight: 300;
    letter-spacing: .005em;
    -webkit-font-smoothing: antialiased;
}

body.light-theme ::selection {
    background: var(--lt-accent-soft);
}

body.light-theme .main {
    background-color: var(--lt-bg);
}

/* main.css paints every bare <section> black by default (dark-theme pages opt
   out per-section with a `bg-transparent` class); undo that globally here so
   every section on a light-theme page falls back to the cream background. */
body.light-theme section,
body.light-theme .section {
    background-color: transparent !important;
}

body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme h4,
body.light-theme h5,
body.light-theme h6 {
    color: var(--lt-text);
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1.15;
}

body.light-theme a {
    color: inherit;
}

body.light-theme .lt-section {
    padding: 70px 0;
}

body.light-theme .lt-eyebrow {
    color: var(--lt-accent-dark);
    font-size: .78rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 10px;
}

body.light-theme .lt-heading {
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 500;
    text-transform: none;
    letter-spacing: -.01em;
    color: var(--lt-text);
    line-height: 1.15;
}

body.light-theme .lt-heading .accent {
    color: var(--lt-accent);
}

body.light-theme .lt-text-muted {
    color: var(--lt-muted) !important;
}

/* ---- Scroll-to-top (shared #scroll-top button, main.css/main.js) ------ */
body.light-theme .scroll-top {
    background-color: var(--lt-accent);
    border-radius: 50%;
}

body.light-theme .scroll-top:hover {
    background-color: var(--lt-accent-dark);
}

/* Clears the light menu page's bottom cart bar instead of sitting on it. */
body.light-theme .scroll-top.above-bottom-bar {
    bottom: 96px;
}

/* Hidden while a product/cart offcanvas is open — its z-index (99999, from
   main.css) otherwise floats it above panel content, mobile especially. */
body.light-theme .scroll-top.suppressed {
    visibility: hidden !important;
    opacity: 0 !important;
}

@media (max-width: 768px) {
    body.light-theme .scroll-top.above-bottom-bar {
        bottom: 110px;
    }
}

/* ---- Buttons ---------------------------------------------------------- */
body.light-theme .lt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    font-size: .86rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--lt-radius-full);
    transition: transform .2s var(--lt-ease), background .2s var(--lt-ease);
    cursor: pointer;
    white-space: nowrap;
}

body.light-theme .lt-btn-solid {
    background: var(--lt-accent);
    color: var(--lt-surface);
    border-color: var(--lt-accent);
}

body.light-theme .lt-btn-solid:hover {
    background: var(--lt-accent-dark);
    border-color: var(--lt-accent-dark);
    color: var(--lt-surface);
    transform: translateY(-1px);
}

body.light-theme .lt-btn-solid:active {
    transform: scale(.97);
}

body.light-theme .lt-btn-solid:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

body.light-theme .lt-btn-outline {
    background: transparent;
    color: var(--lt-text);
    border-color: #DED2C0;
}

body.light-theme .lt-btn-outline:hover {
    background: var(--lt-beige-100);
    color: var(--lt-text);
}

/* ---- Feature strip (Ingredients frais / Depuis 15 ans / ...) ---------- */
body.light-theme .lt-features {
    /* !important: this is itself a <section>, so it needs to win over the
       transparent reset above — both are !important, and this selector is
       more specific (two classes vs. one class + one type), so it wins. */
    background: transparent !important;
    border: none;
    padding: 0 0 20px;
}

body.light-theme .lt-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--lt-border);
    border-radius: var(--lt-radius-lg);
    overflow: hidden;
}

@media (min-width: 760px) {
    body.light-theme .lt-features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

body.light-theme .lt-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px;
    background: var(--lt-surface);
}

body.light-theme .lt-feature-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--lt-beige-100);
    color: var(--lt-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.light-theme .lt-feature i {
    font-size: 16px;
    color: var(--lt-accent-dark);
    flex-shrink: 0;
}

body.light-theme .lt-feature-title {
    font-size: .88rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--lt-text);
    margin: 0 0 3px;
}

body.light-theme .lt-feature-sub {
    font-size: .8rem;
    color: var(--lt-muted);
    font-weight: 300;
    margin: 0;
}

/* ---- Product card (menu previews) -------------------------------------- */
body.light-theme .lt-product-card {
    background: var(--lt-surface);
    border: 1px solid var(--lt-border);
    border-radius: var(--lt-radius-md);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow .25s var(--lt-ease), transform .25s var(--lt-ease);
}

body.light-theme .lt-product-card:hover {
    box-shadow: var(--lt-shadow-soft);
    transform: translateY(-3px);
}

body.light-theme .lt-product-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    /* contain, not cover — same "show the whole photo, don't crop it" rule
       as the panel image; beige letterbox instead of a stark white gap. */
    object-fit: contain;
    background: var(--lt-beige-100);
    display: block;
    transform: scale(1) rotate(0deg);
    transform-origin: center center;
    transition: transform .5s var(--lt-ease);
    will-change: transform;
}

/* Card keeps overflow: hidden so this never spills past its corners, and
   the img's own transform is independent of the card's translateY hover
   above so the two motions don't fight each other. */
body.light-theme .lt-product-card:hover img {
    transform: scale(1.07) rotate(1.75deg);
}

@media (prefers-reduced-motion: reduce) {
    body.light-theme .lt-product-card img {
        transition: none;
    }

    body.light-theme .lt-product-card:hover img {
        transform: scale(1) rotate(0deg);
    }
}

/* Shown instead of <img> when a product has no real photo yet, in place of
   the site's generic (and jarringly pale-blue) stock "no image" icon. */
body.light-theme .lt-product-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    background: var(--lt-beige-100);
    display: flex;
    align-items: center;
    justify-content: center;
}

body.light-theme .lt-product-placeholder i {
    font-size: 30px;
    color: var(--lt-border);
}

body.light-theme .lt-product-body {
    padding: 12px 13px 13px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

body.light-theme .lt-product-name {
    font-size: .85rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
    color: var(--lt-text);
    text-decoration: none;
}

body.light-theme .lt-product-desc {
    font-size: .72rem;
    color: var(--lt-muted);
    font-weight: 300;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.light-theme .lt-product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

body.light-theme .lt-product-price {
    color: var(--lt-text);
    font-weight: 600;
    font-size: .88rem;
}

body.light-theme .lt-add-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--lt-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 300;
    line-height: 1;
    color: var(--lt-surface);
    text-decoration: none;
    transition: background .2s var(--lt-ease), transform .15s var(--lt-ease);
}

body.light-theme .lt-add-btn:hover {
    background: var(--lt-accent-dark);
    color: var(--lt-surface);
}

body.light-theme .lt-add-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

body.light-theme .lt-meal-slot-message {
    font-size: .7rem;
    color: var(--lt-muted);
    margin: 0;
}

body.light-theme .lt-cart-toast {
    position: fixed;
    top: 90px;
    right: 20px;
    z-index: 100060;
    background: var(--lt-text);
    color: #fff;
    padding: 14px 22px;
    font-size: .86rem;
    font-weight: 500;
    border-radius: var(--lt-radius-full);
    box-shadow: var(--lt-shadow-soft);
    opacity: 1;
    animation: ltToastIn .25s ease-out forwards;
}

body.light-theme .lt-cart-toast.is-hiding {
    opacity: 0;
    transition: opacity .3s ease;
}

@keyframes ltToastIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Category tabs ------------------------------------------------------ */
body.light-theme .lt-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    border-bottom: none;
    margin: 0 -15px 18px;
    padding: 4px 15px 10px;
    scrollbar-width: none;
}

body.light-theme .lt-tabs::-webkit-scrollbar {
    display: none;
}

body.light-theme .lt-tabs-sticky {
    position: sticky;
    top: var(--lt-header-h);
    z-index: 20;
    margin-left: -22px;
    margin-right: -22px;
    padding: 10px 22px 10px;
    /* Solid, not faded — the fade-to-transparent now lives on the row below
       (.lt-home-subtabs), right above the product grid it actually needs to
       blend into. A fade here let the grid's images show through behind
       these pills instead. */
    background: var(--lt-bg);
}

body.light-theme .lt-tab {
    flex-shrink: 0;
    background: var(--lt-surface);
    border: 1px solid var(--lt-border);
    padding: 9px 18px;
    font-size: .82rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--lt-muted-dark);
    cursor: pointer;
    border-radius: var(--lt-radius-full);
    transition: .2s var(--lt-ease);
    white-space: nowrap;
}

body.light-theme .lt-tab.active {
    background: var(--lt-text);
    border-color: var(--lt-text);
    color: var(--lt-surface);
    font-weight: 500;
}

body.light-theme .lt-tab:hover:not(.active) {
    border-color: var(--lt-accent);
    color: var(--lt-accent-dark);
}

/* Row 2 (home "Le menu" only) — subcategories of the active parent tab.
   Same visual language as the /menu page's .lt-mobile-subtabs, but NOT
   display:none above 991px — this bar is meant to show on desktop too, so
   it gets its own classes instead of reusing the mobile-only ones. Sticks
   right below row 1 (.lt-tabs-sticky); --lt-home-row1-h is row 1's real
   measured height, kept in sync by JS. */
body.light-theme .lt-home-subtabs {
    position: sticky;
    top: calc(var(--lt-header-h) + var(--lt-home-row1-h, 52px));
    z-index: 19;
    margin: 0 -22px 18px;
    padding: 0 22px 22px;
    background: linear-gradient(var(--lt-bg) 72%, transparent);
}

body.light-theme .lt-home-subtabs-group {
    display: none;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

body.light-theme .lt-home-subtabs-group.active-group {
    display: flex;
}

body.light-theme .lt-home-subtabs-group::-webkit-scrollbar {
    display: none;
}

body.light-theme .lt-home-subtab {
    flex-shrink: 0;
    font-family: inherit;
    cursor: pointer;
    color: var(--lt-text);
    font-size: .78rem;
    font-weight: 400;
    white-space: nowrap;
    background: var(--lt-beige-100);
    border: 1px solid transparent;
    border-radius: var(--lt-radius-full);
    padding: 8px 16px;
}

body.light-theme .lt-home-subtab.active {
    background: var(--lt-accent-soft);
    color: var(--lt-red);
    font-weight: 500;
}

/* ---- Forms --------------------------------------------------------------- */
/* !important throughout: vendor rules like `.contact .php-email-form
   input[type=email]` (main.css) target the checkout form's exact ancestry
   with higher specificity than a single .lt-field class and were winning,
   leaving dark-theme colors (cream text on a near-black translucent fill)
   on these fields instead of the light theme's. */
body.light-theme .lt-field,
body.light-theme .lt-cart-offcanvas .lt-field,
body.light-theme .lt-cart-offcanvas input.lt-field,
body.light-theme .lt-cart-offcanvas select.lt-field,
body.light-theme .lt-cart-offcanvas textarea.lt-field {
    width: 100% !important;
    background: var(--lt-surface) !important;
    border: 1.5px solid var(--lt-border) !important;
    border-radius: 12px !important;
    padding: 12px 15px !important;
    font-size: .86rem !important;
    font-weight: 400;
    font-family: inherit !important;
    color: var(--lt-text) !important;
    box-shadow: none !important;
    appearance: none;
    -webkit-appearance: none;
}

body.light-theme .lt-field::placeholder {
    color: var(--lt-muted) !important;
    text-transform: none;
    font-size: .82rem;
    letter-spacing: 0;
}

body.light-theme .lt-field:focus {
    outline: none;
    border-color: var(--lt-accent) !important;
    box-shadow: none;
}

/* Google's Places Autocomplete dropdown (menu.css's .pac-container, loaded
   globally) hardcodes the dark theme's colors (black background, orange
   text) with !important — restyled here for every autocomplete on a light
   page, the delivery address field in the checkout wizard included. */
body.light-theme .pac-container {
    background-color: var(--lt-surface) !important;
    color: var(--lt-text) !important;
    border: 1.5px solid var(--lt-border) !important;
    border-radius: var(--lt-radius-md);
    box-shadow: var(--lt-shadow-soft);
    font-family: inherit;
    margin-top: 4px;
}

body.light-theme .pac-item {
    padding: 10px 14px;
    font-size: .84rem;
    font-family: inherit;
    color: var(--lt-text);
    border-top-color: var(--lt-border);
}

body.light-theme .pac-item:hover,
body.light-theme .pac-item-selected {
    background-color: var(--lt-beige-100);
}

body.light-theme .pac-item-query {
    color: var(--lt-text);
}

body.light-theme .pac-matched {
    color: var(--lt-accent-dark);
}

/* .lt-field above strips the native select arrow (appearance: none) for every
   field type it's used on but never draws a replacement, leaving every
   dropdown looking like a plain box with no indicator it's a select at all.
   One rule here covers all of them — no per-page markup changes needed.
   !important + the extra `select` type selector: needed to win over the base
   .lt-field rule's `background: var(--lt-surface) !important` shorthand,
   which resets background-image (and everything else about the background)
   to none with the same !important weight. Both selector forms from that
   base rule are repeated here (plain .lt-field and the .lt-cart-offcanvas-
   scoped one) — the offcanvas one is more specific and was winning over a
   plain `select.lt-field` rule for every select inside the cart drawer /
   checkout wizard (e.g. "Heure souhaitée"), leaving those still arrow-less. */
body.light-theme select.lt-field,
body.light-theme .lt-cart-offcanvas select.lt-field {
    color: var(--lt-muted);
    background: var(--lt-surface) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23544A40' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e") no-repeat right 14px center / 12px !important;
    padding-right: 38px !important;
}

/* ---- Restaurant / Localisation cards ------------------------------------- */
body.light-theme .lt-restaurant-card {
    background: var(--lt-surface);
    border: 1px solid var(--lt-border);
    border-radius: var(--lt-radius-lg);
    margin-bottom: 40px;
    overflow: hidden;
}

body.light-theme .lt-restaurant-map {
    width: 100%;
    height: 320px;
    border: 0;
    display: block;
    border-radius: var(--lt-radius-lg);
}

body.light-theme .lt-restaurant-photo {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    border-radius: var(--lt-radius-lg);
}

body.light-theme .lt-restaurant-info {
    padding: 34px;
}

body.light-theme .lt-restaurant-city {
    color: var(--lt-accent);
}

body.light-theme .lt-hours-table {
    width: 100%;
    font-size: 13px;
}

body.light-theme .lt-hours-table td {
    padding: 3px 0;
    color: var(--lt-text);
}

body.light-theme .lt-hours-table td:first-child {
    text-transform: capitalize;
    color: var(--lt-muted);
    width: 40%;
}

@media (max-width: 768px) {
    body.light-theme .lt-restaurant-map,
    body.light-theme .lt-restaurant-photo {
        height: 220px;
    }

    body.light-theme .lt-restaurant-info {
        padding: 24px;
    }

    body.light-theme .lt-section {
        padding: 45px 0;
    }
}

/* ==========================================================================
   Menu page (light theme)
   ========================================================================== */

body.light-theme .lt-menu-page {
    padding-top: 36px;
}

body.light-theme .lt-menu-sidebar {
    position: sticky;
    top: calc(var(--lt-header-h) + 16px);
    height: calc(100vh - 170px);
    overflow-y: auto;
    padding-bottom: 40px;
    text-align: center;
}

body.light-theme .lt-menu-sidebar-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--lt-text);
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--lt-border);
}

body.light-theme .lt-menu-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

body.light-theme .lt-menu-parent-item {
    margin-bottom: 26px;
}

/* The active category (per scroll position) gets a divider under its name
   and reveals its own children; every other category is a plain line. */
body.light-theme .lt-menu-parent-item.expanded {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--lt-border);
}

body.light-theme .lt-menu-parent-item.expanded > .lt-menu-cat-link {
    color: var(--lt-accent);
}

body.light-theme .lt-menu-subcat-list {
    list-style: none;
    padding: 16px 0 0;
    margin: 0;
    display: none;
}

body.light-theme .lt-menu-parent-item.expanded .lt-menu-subcat-list {
    display: block;
}

body.light-theme .lt-menu-subcat-list li {
    margin-bottom: 12px;
}

body.light-theme .lt-menu-subcat-list a {
    font-size: 12px;
    font-weight: 500;
    color: var(--lt-muted);
}

body.light-theme .lt-menu-subcat-list a:hover,
body.light-theme .lt-menu-subcat-list a.active {
    color: var(--lt-accent);
}

body.light-theme .lt-menu-sidebar a {
    display: inline-block;
    color: var(--lt-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .3px;
    transition: color .2s ease;
}

body.light-theme .lt-menu-sidebar a:hover {
    color: var(--lt-accent);
}

body.light-theme .lt-menu-category-header {
    text-align: center;
    margin: 10px 0 34px;
    scroll-margin-top: calc(var(--lt-header-h) + var(--lt-menu-tabs-h) + 12px);
}

body.light-theme .lt-menu-category-header h4 {
    font-size: 22px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: -.01em;
    color: var(--lt-text);
    margin-bottom: 12px;
}

body.light-theme .lt-menu-category-header hr {
    border: none;
    border-top: 1px solid var(--lt-border);
    max-width: 260px;
    margin: 0 auto 12px;
}

body.light-theme .lt-menu-category-header p {
    color: var(--lt-muted);
    font-size: 13px;
    font-style: italic;
}

body.light-theme .lt-menu-mobile-tabs,
body.light-theme .lt-menu-mobile-subtabs {
    display: none;
}

@media (max-width: 991px) {
    /* Fallback until JS sets --lt-header-h from .lt-header-stack (location bar + header). */
    body.light-theme:has(.lt-location-bar:not(.d-none)) {
        --lt-header-h: 103px;
    }

    body.light-theme .lt-menu-page {
        padding-top: 8px;
    }

    body.light-theme .lt-menu-sidebar {
        display: none;
    }

    body.light-theme .lt-menu-mobile-tabs {
        display: flex;
        position: sticky;
        top: var(--lt-header-h, 68px);
        z-index: 9998;
        gap: 8px;
        overflow-x: auto;
        padding: 8px 15px 8px;
        margin: 0 -8px 0;
        border-bottom: none;
        scrollbar-width: none;
        background: var(--lt-bg);
    }

    body.light-theme .lt-menu-mobile-tabs::-webkit-scrollbar {
        display: none;
    }

    body.light-theme .lt-mobile-tab {
        font-family: inherit;
        cursor: pointer;
        color: var(--lt-muted-dark);
        text-decoration: none;
        font-size: .82rem;
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0;
        white-space: nowrap;
        background: var(--lt-surface);
        border: 1px solid var(--lt-border);
        border-radius: var(--lt-radius-full);
        padding: 9px 18px;
    }

    body.light-theme .lt-mobile-tab.active {
        background: var(--lt-text);
        border-color: var(--lt-text);
        color: var(--lt-surface);
        font-weight: 500;
    }

    /* Row 2: the active parent's subcategories, shown only while that parent
       has children — hidden entirely otherwise (see .lt-menu-mobile-subtabs-group).
       Sticks right below row 1 — --lt-mobile-row1-h is row 1's real measured
       height, kept in sync by JS (falls back to an estimate before that runs). */
    body.light-theme .lt-menu-mobile-subtabs {
        display: block;
        position: sticky;
        top: calc(var(--lt-header-h, 68px) + var(--lt-mobile-row1-h, 52px));
        z-index: 9997;
        gap: 8px;
        padding: 0 15px 12px;
        margin: 0 -8px 16px;
        background: var(--lt-bg);
        box-shadow: 0 8px 16px -12px rgba(43, 38, 33, 0.18);
    }

    body.light-theme .lt-menu-mobile-subtabs-group {
        display: none;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body.light-theme .lt-menu-mobile-subtabs-group.active-group {
        display: flex;
    }

    body.light-theme .lt-menu-mobile-subtabs-group::-webkit-scrollbar {
        display: none;
    }

    body.light-theme .lt-mobile-subtab {
        font-family: inherit;
        cursor: pointer;
        color: var(--lt-text);
        text-decoration: none;
        font-size: .78rem;
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0;
        white-space: nowrap;
        background: var(--lt-beige-100);
        border: 1px solid transparent;
        border-radius: var(--lt-radius-full);
        padding: 8px 16px;
    }

    body.light-theme .lt-mobile-subtab.active {
        background: var(--lt-accent-soft);
        color: var(--lt-red);
        font-weight: 500;
    }

    body.light-theme .lt-menu-parent-section {
        scroll-margin-top: calc(var(--lt-header-h, 68px) + var(--lt-menu-tabs-h, 52px) + 12px);
    }
}

/* Product card with favorite heart */
body.light-theme .lt-menu-product-card {
    position: relative;
}

@media (max-width: 767px) {
    body.light-theme .lt-menu-page .row.g-3 {
        --bs-gutter-x: 10px;
        --bs-gutter-y: 10px;
    }

    body.light-theme .lt-menu-page .lt-product-body {
        padding: 10px 10px 11px;
    }

    body.light-theme .lt-menu-page .lt-product-name {
        font-size: .78rem;
        line-height: 1.25;
    }

    body.light-theme .lt-menu-page .lt-product-desc {
        font-size: .68rem;
        -webkit-line-clamp: 2;
    }

    body.light-theme .lt-menu-page .lt-product-price {
        font-size: .82rem;
    }

    body.light-theme .lt-menu-page .lt-add-btn {
        width: 28px;
        height: 28px;
        font-size: 1rem;
    }

    body.light-theme .lt-menu-page .lt-heart-btn {
        width: 28px;
        height: 28px;
        top: 8px;
        right: 8px;
    }

    body.light-theme .lt-menu-page .lt-most-loved-badge {
        font-size: .62rem;
        padding: 4px 7px;
    }
}

body.light-theme .lt-heart-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lt-text);
    font-size: 16px;
    cursor: pointer;
    z-index: 2;
    transition: all .2s ease;
}

body.light-theme .lt-heart-btn:hover {
    color: var(--lt-accent);
}

body.light-theme .lt-heart-btn.favorited {
    color: var(--lt-accent);
}

body.light-theme .lt-heart-btn.favorited i::before {
    content: "\f415"; /* bi-heart-fill */
}

body.light-theme .lt-most-loved-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--lt-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 5px 10px;
    border-radius: var(--lt-radius-full);
    z-index: 2;
}

body.light-theme .lt-discount-badge {
    position: absolute;
    /* Below the heart-favorite button (top:10px, 32px tall), which also
       claims the top-right corner — avoids the two badges overlapping. */
    top: 50px;
    right: 10px;
    background: var(--lt-red);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 5px 10px;
    border-radius: var(--lt-radius-full);
    z-index: 2;
}

body.light-theme .lt-price-original {
    text-decoration: line-through;
    color: var(--lt-muted);
    font-size: .85em;
    margin-right: 6px;
    font-weight: 400;
}

body.light-theme .lt-price-discounted {
    color: var(--lt-red);
}

body.light-theme .lt-product-image-link {
    display: block;
    background: var(--lt-beige-100);
    overflow: hidden;
}

/* Bottom cart bar */
body.light-theme .lt-bottom-cart-bar {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 9998;
    background: var(--lt-text);
    color: var(--lt-surface);
    border: none;
    border-radius: var(--lt-radius-full);
    padding: 8px 8px 8px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 16px 34px -10px rgba(43, 38, 33, .45);
    transform: translateY(160%);
    opacity: 0;
    pointer-events: none;
    transition: transform .4s var(--lt-ease), opacity .25s var(--lt-ease);
    max-width: 460px;
    margin: 0 auto;
}

body.light-theme .lt-bottom-cart-bar.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Wins over .active (same specificity, declared later) whenever a
   product or cart offcanvas is open, so the two don't stack. */
body.light-theme .lt-bottom-cart-bar.suppressed {
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
}

/* Stacked "N article(s)" / price, instead of one run-on sentence that wraps
   to two cramped lines on narrow screens ("Votre panier : 1 produit(s) |
   16,50 €") and crowds the button. */
body.light-theme .lt-bottom-cart-bar-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-transform: none;
    color: var(--lt-surface);
    line-height: 1.3;
}

body.light-theme .lt-bottom-cart-bar-count {
    font-size: .74rem;
    font-weight: 500;
    color: var(--lt-surface);
    opacity: .72;
}

body.light-theme .lt-bottom-cart-bar-price {
    font-size: 1rem;
    font-weight: 700;
}

body.light-theme .lt-bottom-cart-bar .lt-btn {
    background: var(--lt-accent);
    color: var(--lt-surface);
    border-color: var(--lt-accent);
    padding: 11px 20px;
    font-size: .82rem;
}

@media (max-width: 768px) {
    body.light-theme .lt-bottom-cart-bar {
        padding: 8px 8px 8px 18px;
        flex-direction: row;
        gap: 10px;
        align-items: center;
    }
}

/* Product detail slide panel (offcanvas) */
body.light-theme .lt-product-panel {
    /* Opens on top of the fixed header (header is z-index 9999 — see
       .lt-header-stack) instead of starting below it, so the panel's hero
       image is never clipped by the navbar. Full viewport height from the
       very top. .offcanvas-backdrop is raised to match, just below this. */
    z-index: 10001;
    top: 0 !important;
    height: 100%;
    height: 100dvh;
    width: 480px;
    max-width: 100%;
    overflow-x: hidden;
    /* Same cream as the page body and header (--lt-bg), not --lt-card-bg-solid
       — that read as near-white next to the header's cream tint. Fully opaque
       (unlike the header's translucent version) so the menu grid underneath
       never bleeds through. */
    background: var(--lt-bg);
}

body.light-theme .lt-product-panel .offcanvas-header {
    border-bottom: 1px solid var(--lt-border);
}

body.light-theme .lt-panel-image-wrap {
    position: relative;
    margin: 0 -24px 20px;
    /* .lt-panel-content has 24px of left/right padding (inline style in
       quickview.blade.php) — cancel it here so the image's beige background
       (--lt-beige-100) runs edge-to-edge instead of leaving a strip of the
       panel's own, slightly different cream (--lt-bg) visible on each side. */
    overflow: hidden;
}

/* Floats over the panel's top edge instead of sitting in its own header bar
   — the image starts right at the top of the panel, matching the reference.
   Opaque chip + explicit dark X (same technique as .lt-cart-offcanvas
   .btn-close below) rather than filter: invert on the photo's own icon, so
   it stays legible no matter what's in the product photo underneath. */
body.light-theme .lt-panel-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    opacity: 1;
    background-color: var(--lt-beige-100);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232B2621'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

body.light-theme .lt-panel-close:hover {
    background-color: var(--lt-beige-300);
    opacity: 1;
}

/* Shared by every offcanvas (product panel + cart) since Bootstrap renders
   one generic backdrop element regardless of which one is open — must sit
   above the header (9999) so the header doesn't visually float above a dim
   layer that's supposed to be covering it, but below the panel itself. */
body.light-theme .offcanvas-backdrop {
    z-index: 10000;
}

body.light-theme .lt-panel-image {
    width: 100%;
    height: 300px;
    /* contain, not cover — show the whole dish, never crop it. The frame
       keeps a fixed height so the panel layout (close chip, heart, add-to-
       cart row below) doesn't jump per photo; empty letterbox bands get the
       same beige as the no-image placeholder below, not a stark white gap. */
    object-fit: contain;
    background: var(--lt-beige-100);
    margin-bottom: 0;
}

/* Bare icon on the panel's own image (no white circle backing, unlike the
   card's heart) — matches the reference design for this specific spot. */
body.light-theme .lt-panel-image-wrap .lt-heart-btn {
    /* Sits below .lt-panel-close (top-right of the whole panel, same corner)
       so the two floating buttons don't overlap. */
    top: 56px;
    background: none;
    color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
}

body.light-theme .lt-panel-image-wrap .lt-heart-btn:hover,
body.light-theme .lt-panel-image-wrap .lt-heart-btn.favorited {
    color: var(--lt-accent);
}

/* Standalone product page (/product/{restaurant}/{product}) — two columns on
   desktop (large image left, details right), stacked on mobile. Everything
   below the image reuses the same content classes as the light quickview
   panel (.lt-panel-title, .lt-panel-price, .lt-option-row, .lt-qty-stepper,
   .lt-panel-accordion*, .lt-btn*), so only the outer grid/image frame are
   new — .lt-heart-btn keeps its normal white-chip look here (no close chip
   to avoid on this page, unlike the offcanvas panel). */
body.light-theme .lt-product-page {
    padding-top: 24px;
}

body.light-theme .lt-product-page .lt-cart-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
}

body.light-theme .lt-product-page-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 992px) {
    body.light-theme .lt-product-page-grid {
        grid-template-columns: minmax(0, 460px) 1fr;
        gap: 56px;
        align-items: start;
    }
}

body.light-theme .lt-product-page-image-wrap {
    position: relative;
}

body.light-theme .lt-product-page-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--lt-beige-100);
    border-radius: var(--lt-radius-lg);
    display: block;
}

body.light-theme .lt-product-page-details {
    min-width: 0;
}

body.light-theme .lt-supplement-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 40px;
}

@media (max-width: 480px) {
    body.light-theme .lt-supplement-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

body.light-theme .lt-panel-add-row {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

body.light-theme .lt-panel-add-row .lt-qty-stepper {
    margin: 0;
    flex-shrink: 0;
}

body.light-theme .lt-panel-title {
    font-size: 22px;
    font-weight: 500;
    text-transform: none;
    color: var(--lt-text);
    margin-bottom: 6px;
}

body.light-theme .lt-panel-price {
    color: var(--lt-accent);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

body.light-theme .lt-panel-desc {
    color: var(--lt-muted);
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 24px;
}

body.light-theme .lt-supplement-title {
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--lt-muted-dark);
    margin-bottom: 12px;
}

body.light-theme .lt-supplement-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    font-size: 15px;
    color: var(--lt-text);
    cursor: pointer;
}

body.light-theme .lt-supplement-row .lt-text-muted {
    font-size: 13px;
    margin-left: auto;
}

body.light-theme .lt-supplement-row input[type="checkbox"],
body.light-theme .lt-supplement-row input[type="radio"] {
    /* WebKit ignores the unprefixed property alone on radios/checkboxes —
       both are required or Safari falls back to its grey system control. */
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: 1.5px solid var(--lt-muted);
    background: var(--lt-card-bg-solid);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    margin: 0;
}

body.light-theme .lt-supplement-row input[type="checkbox"]:checked,
body.light-theme .lt-supplement-row input[type="radio"]:checked {
    background: var(--lt-accent);
    border-color: var(--lt-accent);
}

body.light-theme .lt-supplement-row input[type="checkbox"]:checked::after,
body.light-theme .lt-supplement-row input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Product options (radio rows) — same square-row look as .lt-supplement-row,
   just stacked full-width instead of the 2-column supplement grid, and with
   a guaranteed touch target since these replace what used to be a <select>. */
body.light-theme .lt-option-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.light-theme .lt-option-row {
    min-height: 44px;
}

/* Flavor picker (e.g. MOCHI — pick exactly flavor_total flavors, same one
   twice allowed). Same .lt-supplement-row row look as the option rows above;
   tapping the row increments that flavor, a small minus chip (hidden until
   count > 0) decrements it. */
body.light-theme .lt-flavor-hint {
    margin: 0 0 12px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--lt-muted-dark);
}

body.light-theme .lt-flavor-hint.is-complete {
    color: var(--lt-accent-dark);
}

body.light-theme .lt-flavor-row {
    min-height: 44px;
    user-select: none;
}

body.light-theme .lt-flavor-row.selected {
    background: var(--lt-accent-soft);
    color: var(--lt-accent-dark);
    border-radius: var(--lt-radius-sm);
    padding-left: 10px;
    padding-right: 10px;
    margin-left: -10px;
    margin-right: -10px;
}

body.light-theme .lt-flavor-name {
    flex: 1;
}

body.light-theme .lt-flavor-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

body.light-theme .lt-flavor-minus {
    appearance: none;
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
    border: 1.5px solid var(--lt-muted);
    background: var(--lt-card-bg-solid);
    border-radius: 50%;
    color: var(--lt-text);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

body.light-theme .lt-flavor-count {
    min-width: 18px;
    text-align: center;
    font-weight: 600;
}

body.light-theme .lt-qty-stepper {
    display: inline-flex;
    align-items: center;
    background: var(--lt-beige-100);
    border: none;
    border-radius: var(--lt-radius-full);
    margin: 20px 0;
    padding: 4px 6px;
}

body.light-theme .lt-qty-stepper button {
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    font-size: 18px;
    color: var(--lt-text);
    cursor: pointer;
}

body.light-theme .lt-qty-stepper input,
body.light-theme .lt-qty-stepper > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 38px;
    border: none;
    /* Transparent, not --lt-surface — the number should sit on the same
       beige as the stepper pill itself, not its own white box. Explicit
       appearance reset since Safari otherwise still paints a default
       text-input background/border here. */
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    text-align: center;
    font-size: 14px;
    color: var(--lt-text);
}

body.light-theme .lt-panel-accordion {
    border-top: 1px solid var(--lt-border);
}

body.light-theme .lt-panel-accordion-toggle {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--lt-border);
    padding: 14px 0;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--lt-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

body.light-theme .lt-panel-accordion-body {
    display: none;
    padding: 14px 0;
    font-size: 13px;
    color: var(--lt-muted);
    line-height: 1.7;
}

body.light-theme .lt-panel-accordion-body.active {
    display: block;
}

/* Restaurant-picker popup (header, home, /menu auto-open) */
body.light-theme .lt-restaurant-picker {
    z-index: 10050;
}

body.light-theme .lt-restaurant-picker.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

body.light-theme.lt-picker-open .modal-backdrop {
    z-index: 10040;
}

body.light-theme .lt-restaurant-picker .modal-dialog {
    max-width: 560px !important;
    width: min(560px, 100%);
    margin: 0 auto !important;
    min-height: 0 !important;
    display: block;
}

body.light-theme .lt-restaurant-picker .modal-content {
    max-width: none !important;
    width: 100% !important;
    border-radius: 24px;
    border: none;
    background: #fff;
    box-shadow: 0 24px 60px -20px rgba(43, 38, 33, .28);
    padding: 28px 26px 24px;
}

body.light-theme .lt-picker-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

body.light-theme .lt-picker-title {
    font-size: 1.28rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--lt-text);
    margin: 0 0 6px;
    line-height: 1.2;
}

body.light-theme .lt-picker-subtitle {
    font-size: .86rem;
    font-weight: 400;
    color: var(--lt-muted);
    margin: 0;
    line-height: 1.45;
}

body.light-theme .lt-picker-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.light-theme .lt-picker-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid var(--lt-border);
    border-radius: 16px;
    padding: 18px 16px 18px 20px;
    background: #fff;
}

body.light-theme .lt-picker-card-info {
    min-width: 0;
}

body.light-theme .lt-picker-card-name {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--lt-text);
    margin: 0 0 4px;
    letter-spacing: -.01em;
}

body.light-theme .lt-picker-card-meta {
    font-size: .82rem;
    font-weight: 400;
    color: var(--lt-muted);
    margin: 0;
    line-height: 1.45;
}

body.light-theme .lt-picker-choose {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lt-text);
    color: #fff;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    padding: 10px 20px;
    border-radius: var(--lt-radius-full);
    transition: background .2s var(--lt-ease), transform .2s var(--lt-ease);
}

body.light-theme .lt-picker-choose:hover {
    background: #1c1814;
    color: #fff;
    transform: translateY(-1px);
}

@media (max-width: 520px) {
    body.light-theme .lt-restaurant-picker .modal-content {
        padding: 22px 16px 18px;
    }

    body.light-theme .lt-picker-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }

    body.light-theme .lt-picker-choose {
        align-self: flex-end;
    }
}

/* Mini-cart offcanvas (the header's bag icon), light theme */
body.light-theme .lt-cart-offcanvas {
    /* Same positioning as .lt-product-panel — opens above the fixed header
       (not below it) at every width now, so it isn't left underneath the
       shared .offcanvas-backdrop once that's raised above the header too. */
    z-index: 10001;
    top: 0 !important;
    bottom: auto;
    background: var(--lt-bg);
    width: 440px;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    height: 100dvh;
}

body.light-theme .lt-cart-offcanvas .offcanvas-header {
    padding: 20px 22px;
    border-bottom: 1px solid var(--lt-border);
    flex-shrink: 0;
    background: var(--lt-bg);
    justify-content: space-between;
}

body.light-theme .lt-cart-offcanvas .offcanvas-header .lt-panel-title,
body.light-theme .lt-cart-offcanvas #offcanvasCartLabel {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--lt-text);
}

body.light-theme .lt-cart-offcanvas .btn-close {
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background-color: var(--lt-beige-100);
    opacity: 1;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232B2621'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

body.light-theme .lt-cart-offcanvas .btn-close:hover {
    background-color: var(--lt-beige-300);
    opacity: 1;
}

body.light-theme .lt-cart-offcanvas .lt-cart-item-row:not(:last-child) {
    border-bottom: 1px solid var(--lt-border);
}

body.light-theme .lt-cart-offcanvas-footer {
    border-top: 1px solid var(--lt-border);
    padding-top: 18px;
    margin-top: 12px;
}


/* ==========================================================================
   Cart page (light theme)
   ========================================================================== */

body.light-theme .lt-cart-page {
    padding-top: 36px;
    padding-bottom: 70px;
}

body.light-theme .lt-cart-back {
    color: var(--lt-muted);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

body.light-theme .lt-cart-back:hover {
    color: var(--lt-accent);
}

body.light-theme .lt-cart-title {
    font-size: 22px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: -.01em;
    color: var(--lt-text);
}

body.light-theme .lt-cart-item-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 18px 0;
    border-bottom: 1px solid var(--lt-border);
}

body.light-theme .lt-cart-item-image-wrap {
    position: relative;
    display: block;
    flex-shrink: 0;
}

body.light-theme .lt-cart-item-row img,
body.light-theme .lt-cart-item-row .lt-product-placeholder {
    width: 140px;
    height: 140px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

@media (max-width: 480px) {
    body.light-theme .lt-cart-item-row img,
    body.light-theme .lt-cart-item-row .lt-product-placeholder {
        width: 96px;
        height: 96px;
    }
}

body.light-theme .lt-cart-item-image-wrap .lt-heart-btn {
    width: 22px;
    height: 22px;
    top: 4px;
    right: 4px;
    font-size: 11px;
}

body.light-theme .lt-cart-item-image-wrap .lt-most-loved-badge {
    top: 4px;
    left: 4px;
    font-size: 8px;
    padding: 2px 5px;
}

body.light-theme .lt-cart-item-category {
    color: var(--lt-muted);
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    margin: 0 0 2px;
}

body.light-theme .lt-cart-item-name {
    color: var(--lt-text);
    font-weight: 500;
    font-size: .86rem;
    text-decoration: none;
    text-transform: none;
}

body.light-theme .lt-cart-item-options {
    color: var(--lt-muted);
    font-size: 12px;
    margin: 2px 0 0;
}

body.light-theme .lt-cart-item-price {
    color: var(--lt-text);
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px;
}

body.light-theme .lt-qty-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    background: var(--lt-beige-100);
    border-radius: var(--lt-radius-full);
    padding: 4px 6px;
    width: fit-content;
}

body.light-theme .lt-qty-group button {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    /* Transparent, not --lt-surface — sits directly on the beige pill
       instead of its own white disk (matches .lt-qty-stepper button). */
    background: transparent;
    width: 22px;
    height: 22px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--lt-text);
    cursor: pointer;
}

body.light-theme .lt-qty-group span {
    min-width: 18px;
    text-align: center;
    font-size: 13px;
    color: var(--lt-text);
}

body.light-theme .lt-options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

body.light-theme .lt-cart-stack {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

body.light-theme .lt-option-box {
    border: 1.5px solid var(--lt-border);
    background: var(--lt-surface);
    border-radius: var(--lt-radius-sm);
    padding: 14px 10px;
    text-align: center;
}

body.light-theme .lt-option-name {
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--lt-text);
    margin-bottom: 10px;
    min-height: 26px;
}

body.light-theme .lt-option-price {
    font-size: 11px;
    color: var(--lt-accent);
    margin-top: 8px;
}

body.light-theme .lt-cart-totals {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--lt-border);
}

body.light-theme .lt-cart-totals-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--lt-muted);
    margin-bottom: 8px;
}

body.light-theme .lt-cart-totals-row.total {
    color: var(--lt-text);
    font-weight: 700;
    font-size: 15px;
}

body.light-theme .lt-cart-validate {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

@media (max-width: 991px) {
    body.light-theme .lt-options-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    body.light-theme .lt-options-grid {
        grid-template-columns: 1fr;
    }
}

/* Same content as .lt-cart-page, but sized for the header's cart offcanvas
   instead of a standalone page — no fixed-header offset, tighter side
   padding, and everything shrinks to fit the narrower panel. */
body.light-theme .lt-cart-embedded {
    padding: 0 4px;
}

body.light-theme .lt-cart-embedded .lt-cart-stack {
    gap: 28px;
}

/* ==========================================================================
   Checkout page (light theme)
   ========================================================================== */

body.light-theme .lt-checkout-page {
    padding-top: 36px;
    padding-bottom: 70px;
}

body.light-theme .lt-checkout-section {
    border: 1px solid var(--lt-border);
    background: var(--lt-surface);
    border-radius: var(--lt-radius-md);
    margin-bottom: 18px;
}

body.light-theme .lt-checkout-section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}

body.light-theme .lt-checkout-section-toggle .label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .86rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--lt-text);
}

body.light-theme .lt-checkout-section-toggle .value {
    color: var(--lt-accent);
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

body.light-theme .lt-checkout-section-toggle .chevron {
    transition: transform .2s ease;
    color: var(--lt-muted);
}

body.light-theme .lt-checkout-section.open .chevron {
    transform: rotate(180deg);
}

body.light-theme .lt-checkout-section-body {
    display: none;
    padding: 0 22px 22px;
    border-top: 1px solid var(--lt-border);
    padding-top: 18px;
}

body.light-theme .lt-checkout-section.open .lt-checkout-section-body {
    display: block;
}

body.light-theme .lt-delivery-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 22px;
}

body.light-theme .lt-delivery-card {
    border: 1.5px solid var(--lt-border);
    background: var(--lt-surface);
    border-radius: var(--lt-radius-md);
    padding: 15px;
    text-align: left;
    cursor: pointer;
    transition: all .2s var(--lt-ease);
}

body.light-theme .lt-delivery-card.active {
    background: var(--lt-accent-soft);
    border-color: var(--lt-accent);
    color: var(--lt-text);
}

body.light-theme .lt-delivery-card .title {
    /* Explicit color needed: without it these <p> tags were rendering in the
       dark theme's cream (#e5d5bf) instead of inheriting the light theme's
       text color — some vendor rule outranks plain inheritance here. */
    color: var(--lt-text);
    font-size: .86rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 3px;
}

body.light-theme .lt-delivery-card.active .title {
    color: var(--lt-text);
}

body.light-theme .lt-delivery-card .sub {
    color: var(--lt-muted);
    font-size: .74rem;
    font-weight: 300;
    opacity: 1;
}

@media (max-width: 576px) {
    body.light-theme .lt-delivery-cards {
        grid-template-columns: 1fr;
    }
}

body.light-theme .lt-promo-row {
    display: flex;
    gap: 0;
}

body.light-theme .lt-promo-row input {
    flex: 1;
}

body.light-theme .lt-promo-row button {
    white-space: nowrap;
}

body.light-theme .lt-payment-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0;
    border-bottom: 1px solid var(--lt-border);
    font-size: 13px;
    color: var(--lt-text);
}

body.light-theme .lt-payment-option:last-child {
    border-bottom: none;
}

body.light-theme .lt-payment-option input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--lt-accent);
}

body.light-theme .lt-checkout-submit {
    /* !important: a vendor rule (.contact .php-email-form button[type=submit] in
       main.css) targets this exact button ancestry with higher specificity and
       was winning over .lt-btn-solid, silently dropping the orange background
       and leaving the white "total" text unreadable on the page background. */
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 26px !important;
    background: var(--lt-accent) !important;
    color: #fff !important;
    border-radius: var(--lt-radius-full) !important;
}

body.light-theme .lt-checkout-submit:hover {
    background: var(--lt-accent-dark) !important;
}

/* ==========================================================================
   Auth pages (login / register / password)
   ========================================================================== */

body.light-theme .lt-auth-page {
    padding: 40px 0 70px;
    min-height: calc(100vh - 220px);
}

body.light-theme .lt-auth-wrap {
    max-width: 420px;
    margin: 0 auto;
}

body.light-theme .lt-auth-box {
    text-align: center;
    margin-bottom: 24px;
}

body.light-theme .lt-auth-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--lt-accent-soft);
    color: var(--lt-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 22px;
}

body.light-theme .lt-auth-box h1 {
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0 0 6px;
}

body.light-theme .lt-auth-box p {
    font-size: .82rem;
    color: var(--lt-muted);
    font-weight: 300;
    margin: 0;
}

body.light-theme .lt-auth-form .lt-field-label {
    display: block;
    font-size: .76rem;
    font-weight: 500;
    color: var(--lt-muted-dark);
    margin-bottom: 6px;
}

body.light-theme .lt-auth-form .lt-field-group {
    margin-bottom: 12px;
}

body.light-theme .lt-auth-form .lt-field.lt-field-error {
    border-color: var(--lt-red) !important;
}

body.light-theme .lt-auth-error {
    display: block;
    font-size: .74rem;
    color: var(--lt-red);
    margin-top: 6px;
    font-weight: 400;
}

body.light-theme .lt-auth-alert {
    background: var(--lt-accent-soft);
    color: var(--lt-accent-dark);
    border-radius: var(--lt-radius-sm);
    padding: 12px 14px;
    font-size: .82rem;
    margin-bottom: 16px;
}

body.light-theme .lt-auth-submit {
    width: 100% !important;
    margin-top: 6px;
    padding: 15px !important;
    background: var(--lt-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--lt-radius-full) !important;
    font-size: .9rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
}

body.light-theme .lt-auth-submit:hover {
    background: var(--lt-accent-dark) !important;
}

body.light-theme .lt-auth-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: .82rem;
    color: var(--lt-muted);
    font-weight: 300;
}

body.light-theme .lt-auth-links a {
    color: var(--lt-accent-dark);
    font-weight: 500;
    text-decoration: none;
}

body.light-theme .lt-auth-links a:hover {
    color: var(--lt-accent);
}

/* ==========================================================================
   Cart offcanvas checkout wizard
   ========================================================================== */

body.light-theme .lt-cart-offcanvas .offcanvas-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 22px 24px;
    background: var(--lt-bg);
}

body.light-theme .lt-cart-offcanvas .lt-cart-embedded {
    padding: 0;
}

body.light-theme .lt-cart-offcanvas .lt-cart-stack {
    gap: 22px;
}

body.light-theme .lt-cart-offcanvas .lt-eyebrow {
    display: none;
}

body.light-theme .lt-cart-offcanvas .lt-cart-item-row {
    gap: 12px;
    padding: 14px 0;
    align-items: flex-start;
}

body.light-theme .lt-cart-offcanvas .lt-cart-item-row img,
body.light-theme .lt-cart-offcanvas .lt-cart-item-row .lt-product-placeholder {
    width: 58px !important;
    height: 58px !important;
    max-width: 58px;
    border-radius: 12px !important;
    object-fit: cover;
}

body.light-theme .lt-cart-offcanvas .lt-heart-btn,
body.light-theme .lt-cart-offcanvas .lt-most-loved-badge,
body.light-theme .lt-cart-offcanvas .lt-cart-item-category,
body.light-theme .lt-cart-offcanvas .lt-cart-totals,
body.light-theme .lt-cart-offcanvas .lt-cart-embedded-total {
    display: none !important;
}

body.light-theme .lt-cart-offcanvas .lt-cart-item-name {
    font-size: .86rem;
    font-weight: 500;
}

body.light-theme .lt-cart-offcanvas .lt-cart-item-price {
    font-size: .84rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
}

body.light-theme .lt-cart-offcanvas .lt-qty-stepper {
    margin: 6px 0 0;
    padding: 4px 6px;
}

body.light-theme .lt-cart-offcanvas .lt-qty-stepper button {
    width: 22px;
    height: 22px;
    font-size: 14px;
    font-weight: 600;
    /* Transparent, not --lt-surface — no white disk behind −/+, same as the
       panel's own .lt-qty-stepper button. */
    background: transparent;
    line-height: 1;
}

body.light-theme .lt-cart-offcanvas .lt-qty-stepper > span {
    width: auto;
    min-width: 14px;
    height: auto;
    background: transparent;
    font-size: .82rem;
    font-weight: 600;
}

body.light-theme .lt-cart-offcanvas .lt-cart-options-label {
    display: block;
    font-size: .76rem;
    font-weight: 500;
    color: var(--lt-muted-dark);
    margin: 4px 0 10px;
    text-transform: none;
    letter-spacing: 0;
}

body.light-theme .lt-cart-offcanvas .lt-options-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

body.light-theme .lt-cart-offcanvas .lt-option-box {
    padding: 8px 6px 10px;
    border-radius: var(--lt-radius-sm);
}

body.light-theme .lt-cart-offcanvas .lt-option-name {
    font-size: 10px;
    min-height: 0;
    margin-bottom: 6px;
    line-height: 1.3;
}

body.light-theme .lt-cart-offcanvas .lt-qty-group {
    margin: 0 auto;
    padding: 3px 4px;
    gap: 6px;
}

body.light-theme .lt-cart-offcanvas .lt-option-price {
    margin-top: 4px;
    font-size: 10px;
}

body.light-theme .lt-cart-offcanvas .lt-text-muted {
    font-size: 11px !important;
}

body.light-theme .lt-checkout-progress {
    padding: 16px 22px 0;
    flex-shrink: 0;
    background: var(--lt-bg);
}

body.light-theme .lt-step-dots {
    display: flex;
    align-items: center;
    gap: 6px;
}

body.light-theme .lt-step-dot {
    flex: 1;
    height: 3px;
    border-radius: 4px;
    background: var(--lt-beige-100);
    transition: background .3s var(--lt-ease);
}

body.light-theme .lt-step-dot.done {
    background: var(--lt-accent);
}

body.light-theme .lt-step-label {
    padding: 8px 0 4px;
    font-size: .76rem;
    color: var(--lt-muted);
    font-weight: 400;
    margin: 0;
}

body.light-theme .lt-cart-drawer-foot {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 22px 18px;
    /* iOS home-indicator devices reserve space at the very bottom of the
       screen — without this, "Passer commande" (flush against the bottom of
       a now-full-height-on-mobile offcanvas) can end up sitting behind it,
       which is what made the button not show on some phones. Falls back to
       the plain 18px above on browsers without env() support. */
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--lt-border);
    flex-shrink: 0;
    background: var(--lt-surface);
}

body.light-theme .lt-foot-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .88rem;
    padding: 5px 0;
    font-weight: 300;
    color: var(--lt-text);
}

body.light-theme .lt-foot-row.total {
    font-weight: 600;
    font-size: 1rem;
    padding-top: 10px;
    border-top: 1px dashed var(--lt-beige-300);
    margin-top: 6px;
}

body.light-theme .lt-cart-foot-actions {
    display: flex !important;
    width: 100%;
    gap: 10px;
}

body.light-theme .lt-cart-offcanvas #ltCheckoutBack,
body.light-theme .lt-cart-offcanvas #ltCheckoutNext {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 15px 20px !important;
    font-size: .9rem !important;
    font-family: inherit;
    font-weight: 500;
    border-radius: 100px !important;
    width: 100%;
}

body.light-theme .lt-cart-offcanvas #ltCheckoutBack.d-none {
    display: none !important;
}

body.light-theme .lt-cart-offcanvas #ltCheckoutBack:not(.d-none) {
    flex: 0 0 38%;
    width: auto;
    background: transparent !important;
    color: var(--lt-text) !important;
    border: 1.5px solid var(--lt-border) !important;
}

body.light-theme .lt-cart-offcanvas #ltCheckoutNext {
    flex: 1 1 auto;
    background: var(--lt-accent) !important;
    color: #fff !important;
    border: none !important;
}

body.light-theme .lt-cart-offcanvas #ltCheckoutNext:disabled {
    opacity: .4;
    transform: none;
}

body.light-theme .lt-option-card,
body.light-theme .lt-pay-chip {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    box-shadow: none;
}

body.light-theme .lt-option-card {
    width: 100%;
    border: 1.5px solid var(--lt-border);
    border-radius: var(--lt-radius-md);
    padding: 15px;
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
    background: var(--lt-surface);
    text-align: left;
    color: var(--lt-text);
    cursor: pointer;
    transition: .2s var(--lt-ease);
}

body.light-theme .lt-option-card:focus,
body.light-theme .lt-pay-chip:focus {
    outline: none;
}

body.light-theme .lt-option-card.selected {
    border-color: var(--lt-accent);
    background: var(--lt-accent-soft);
}

body.light-theme .lt-option-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--lt-beige-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

body.light-theme .lt-option-card.selected .lt-option-icon {
    background: var(--lt-accent);
    color: #fff;
}

body.light-theme .lt-option-title {
    display: block;
    font-size: .86rem;
    font-weight: 500;
    color: var(--lt-text);
}

body.light-theme .lt-option-sub {
    display: block;
    font-size: .74rem;
    color: var(--lt-muted);
    font-weight: 300;
}

body.light-theme .lt-field-wrap {
    margin-bottom: 12px;
}

body.light-theme .lt-field-wrap label {
    display: block;
    font-size: .76rem;
    font-weight: 500;
    color: var(--lt-muted-dark);
    margin-bottom: 6px;
}

body.light-theme .lt-closed-banner {
    border: 1.5px solid var(--lt-border);
    border-radius: var(--lt-radius-md);
    padding: 14px 16px;
    margin: 4px 0 12px;
    background: var(--lt-beige-100);
}

body.light-theme .lt-closed-title {
    font-size: .86rem;
    font-weight: 600;
    margin: 0 0 4px;
}

body.light-theme .lt-closed-sub {
    font-size: .78rem;
    color: var(--lt-muted);
    margin: 0 0 10px;
}

body.light-theme .lt-checkout-errors {
    background: #fdecea;
    color: var(--lt-red);
    border-radius: var(--lt-radius-sm);
    padding: 10px 12px;
    font-size: .8rem;
    margin-bottom: 14px;
}

body.light-theme .lt-checkout-errors p {
    margin: 0;
}

body.light-theme .lt-checkout-recap {
    margin-top: 14px;
}

body.light-theme .lt-recap-title {
    font-size: .86rem;
    font-weight: 600;
    margin-bottom: 6px;
}

body.light-theme .lt-recap-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: .86rem;
    padding: 5px 0;
    font-weight: 300;
}

body.light-theme .lt-recap-option {
    display: block;
    font-size: .76rem;
    color: var(--lt-muted);
}

body.light-theme .lt-recap-total {
    font-weight: 600;
    font-size: 1rem;
    padding-top: 10px;
    border-top: 1px dashed var(--lt-beige-300);
    margin-top: 6px;
}

body.light-theme .lt-recap-discount span:last-child,
body.light-theme .lt-foot-row.discount span:last-child {
    color: var(--lt-accent-dark);
    font-weight: 500;
}

body.light-theme .lt-promo-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    padding: 8px 14px;
    background: var(--lt-accent-soft);
    border-radius: var(--lt-radius-full);
    font-size: .82rem;
}

body.light-theme .lt-promo-applied strong {
    color: var(--lt-accent-dark);
}

body.light-theme .lt-promo-applied button {
    background: none;
    border: none;
    color: var(--lt-muted);
    font-size: .78rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

body.light-theme .lt-pay-intro {
    font-size: .82rem;
    color: var(--lt-muted);
    margin-bottom: 12px;
    font-weight: 300;
}

body.light-theme .lt-pay-methods {
    /* 4 chips now (was 3) — a 2x2 grid keeps "Espèces / Tickets Restaurants"
       readable instead of squeezing 4 equal flex items into one cramped row. */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

body.light-theme .lt-pay-chip {
    border: 1.5px solid var(--lt-border);
    border-radius: var(--lt-radius-sm);
    padding: 12px 8px;
    min-height: 44px;
    text-align: center;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.3;
    background: var(--lt-surface);
    color: var(--lt-text);
    cursor: pointer;
}

body.light-theme .lt-pay-chip.selected {
    border-color: var(--lt-accent);
    background: var(--lt-accent-soft);
    color: var(--lt-accent-dark);
}

body.light-theme .lt-pay-chip.is-disabled,
body.light-theme .lt-pay-chip:disabled {
    opacity: .4;
    pointer-events: none;
}

body.light-theme .lt-slot-block {
    margin: 8px 0 14px;
}

body.light-theme .lt-schedule-later {
    display: block;
    width: 100%;
    margin: 4px 0 10px;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    font-size: .82rem;
    font-weight: 500;
    color: var(--lt-accent-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

body.light-theme .lt-schedule-panel {
    margin: 10px 0 14px;
    padding: 14px;
    border: 1px solid var(--lt-border);
    border-radius: var(--lt-radius-md);
    background: var(--lt-surface);
}

body.light-theme .lt-schedule-intro {
    margin: 0 0 10px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--lt-text);
}

body.light-theme .lt-schedule-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

body.light-theme .lt-schedule-tab {
    flex: 1;
    border: 1.5px solid var(--lt-border);
    border-radius: var(--lt-radius-full);
    padding: 8px 6px;
    font-size: .72rem;
    font-weight: 500;
    background: var(--lt-beige-100);
    color: var(--lt-muted-dark);
    cursor: pointer;
}

body.light-theme .lt-schedule-tab.selected {
    border-color: var(--lt-accent);
    background: var(--lt-accent-soft);
    color: var(--lt-accent-dark);
}

body.light-theme .lt-schedule-pane {
    min-height: 0;
}

/* Click-to-open time field (replaces the old chip grid) — closed state
   shows the current selection, tapping it reveals a scrollable list
   instead of a native <select> (which Safari renders as a grey system
   control no CSS can fully restyle). */
body.light-theme .lt-time-field-wrap {
    position: relative;
    margin: 12px 0 4px;
}

body.light-theme .lt-time-field-label {
    display: block;
    margin: 0 0 6px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--lt-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

body.light-theme .lt-time-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    border: 1.5px solid var(--lt-border);
    border-radius: var(--lt-radius-md);
    background: var(--lt-surface);
    font-size: .85rem;
    font-weight: 500;
    color: var(--lt-text);
    text-align: left;
    cursor: pointer;
}

body.light-theme .lt-time-field.open {
    border-color: var(--lt-accent);
}

body.light-theme .lt-time-field i {
    flex-shrink: 0;
    color: var(--lt-muted);
    transition: transform .15s ease;
}

body.light-theme .lt-time-field.open i {
    transform: rotate(180deg);
}

body.light-theme .lt-time-list-overlay {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--lt-surface);
    border: 1px solid var(--lt-border);
    border-radius: var(--lt-radius-md);
    box-shadow: var(--lt-shadow-soft);
    overflow: hidden;
}

body.light-theme .lt-time-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--lt-border);
    font-size: .78rem;
    font-weight: 600;
    color: var(--lt-muted-dark);
}

body.light-theme .lt-time-list-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: var(--lt-beige-100);
    color: var(--lt-text);
    font-size: .68rem;
    cursor: pointer;
    padding: 0;
}

/* Scrollable list itself — plain markup, no native <select>/<option>
   anywhere, so there's nothing for Safari to paint with its own chrome. */
body.light-theme .lt-time-list {
    max-height: 260px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px;
}

body.light-theme .lt-time-list-section {
    margin: 10px 8px 4px;
    font-size: .7rem;
    font-weight: 700;
    color: var(--lt-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

body.light-theme .lt-time-list-section:first-child {
    margin-top: 4px;
}

body.light-theme .lt-time-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 11px 10px;
    border: none;
    border-radius: var(--lt-radius-sm);
    background: transparent;
    font-size: .82rem;
    font-weight: 500;
    color: var(--lt-text);
    text-align: left;
    cursor: pointer;
}

body.light-theme .lt-time-row:hover {
    background: var(--lt-beige-100);
}

body.light-theme .lt-time-row.selected {
    background: var(--lt-accent-soft);
    color: var(--lt-accent-dark);
    font-weight: 600;
}

body.light-theme .lt-time-row-check {
    display: none;
    flex-shrink: 0;
    color: var(--lt-accent-dark);
}

body.light-theme .lt-time-row.selected .lt-time-row-check {
    display: inline-block;
}

body.light-theme .lt-schedule-empty {
    font-size: .78rem;
    color: var(--lt-muted);
    margin: 0;
    padding: 10px;
}

body.light-theme .lt-schedule-confirm {
    margin: 12px 0 0;
    font-size: .8rem;
    font-weight: 500;
    color: var(--lt-text);
    line-height: 1.45;
}

body.light-theme .lt-schedule-calendar {
    margin-bottom: 12px;
}

body.light-theme .lt-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

body.light-theme .lt-cal-title {
    font-size: .86rem;
    font-weight: 600;
    text-transform: capitalize;
}

body.light-theme .lt-cal-nav {
    width: 32px;
    height: 32px;
    border: 1px solid var(--lt-border);
    border-radius: 50%;
    background: var(--lt-surface);
    color: var(--lt-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.light-theme .lt-cal-weekdays,
body.light-theme .lt-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

body.light-theme .lt-cal-weekdays span {
    font-size: .65rem;
    font-weight: 600;
    color: var(--lt-muted);
    text-align: center;
    padding: 4px 0;
}

body.light-theme .lt-cal-day {
    aspect-ratio: 1;
    border: none;
    border-radius: var(--lt-radius-sm);
    font-size: .78rem;
    font-weight: 500;
    background: transparent;
    color: var(--lt-muted);
    cursor: default;
}

body.light-theme .lt-cal-day.is-empty {
    visibility: hidden;
}

body.light-theme .lt-cal-day.is-available {
    background: var(--lt-beige-100);
    color: var(--lt-text);
    cursor: pointer;
}

body.light-theme .lt-cal-day.is-available.selected {
    background: var(--lt-accent);
    color: #fff;
}

body.light-theme .lt-cal-day.is-disabled {
    opacity: .35;
}

body.light-theme .lt-checkout-form {
    padding-bottom: 4px;
}

/* Newsletter band — shared by home.blade.php and thank_you.blade.php.
   body.light-theme prefix + !important: needed to outrank the light theme's
   blanket <section> background reset, which otherwise wins on specificity
   too (2 type selectors there vs. 1 class here) and leaves this band's
   light text on the cream page background instead of the dark one it's
   designed for. */
body.light-theme .lt-newsletter {
    background: transparent !important;
    color: #fff;
    padding: 0 0 20px;
}

body.light-theme .lt-newsletter-band {
    background: var(--lt-text);
    color: var(--lt-surface);
    border-radius: var(--lt-radius-xl);
    padding: 44px 26px;
    margin: 20px auto 40px;
    text-align: center;
}

body.light-theme .lt-newsletter-band h2 {
    color: var(--lt-surface);
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 8px;
}

body.light-theme .lt-newsletter-band p {
    color: #C9B9A5;
    font-size: .85rem;
    font-weight: 300;
    margin: 0 0 22px;
}

body.light-theme .lt-newsletter-form {
    display: flex;
    gap: 8px;
    max-width: 380px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}

body.light-theme .lt-newsletter-form input {
    flex: 1;
    min-width: 180px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--lt-radius-full);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    padding: 12px 16px;
    font-size: .85rem;
    font-weight: 300;
}

body.light-theme .lt-newsletter-form input::placeholder {
    color: #A8967F;
}

body.light-theme .lt-newsletter-form button {
    border: none;
    background: var(--lt-accent);
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--lt-radius-full);
    text-transform: none;
    font-size: .86rem;
    font-weight: 500;
    letter-spacing: 0;
}

/* ---- Thank-you page (order confirmation) --------------------------------- */
body.light-theme .lt-ty-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--lt-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    margin-bottom: 18px;
}

body.light-theme .lt-ty-icon.is-fail {
    background: var(--lt-red);
}

body.light-theme .lt-ty-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--lt-text);
    margin-bottom: 2px;
}

body.light-theme .lt-ty-sub {
    color: var(--lt-muted);
    font-size: 1rem;
    margin-bottom: 16px;
}

body.light-theme .lt-ty-id-pill {
    display: inline-block;
    background: var(--lt-accent-soft);
    color: var(--lt-accent-dark);
    font-weight: 600;
    font-size: .85rem;
    padding: 6px 18px;
    border-radius: var(--lt-radius-full);
    margin-bottom: 14px;
}

body.light-theme .lt-ty-eta-pill {
    display: block;
    width: fit-content;
    margin: 0 auto 28px;
    background: var(--lt-beige-100);
    color: var(--lt-text);
    font-weight: 600;
    font-size: .9rem;
    padding: 10px 22px;
    border-radius: var(--lt-radius-full);
}

body.light-theme .lt-ty-card {
    background: var(--lt-surface);
    border: 1px solid var(--lt-border);
    border-radius: var(--lt-radius-lg);
    box-shadow: var(--lt-shadow-soft);
    padding: 22px;
    margin-bottom: 18px;
    text-align: left;
}

body.light-theme .lt-ty-card-title {
    font-weight: 600;
    font-size: .95rem;
    color: var(--lt-text);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.light-theme .lt-ty-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 9px 0;
    font-size: .86rem;
    border-bottom: 1px solid var(--lt-border);
}

body.light-theme .lt-ty-row:last-child {
    border-bottom: none;
}

body.light-theme .lt-ty-row>span:first-child {
    color: var(--lt-muted);
    flex-shrink: 0;
}

body.light-theme .lt-ty-row strong {
    color: var(--lt-text);
    font-weight: 600;
    text-align: right;
}

body.light-theme .lt-ty-row-total {
    border-top: 1px dashed var(--lt-beige-300);
    border-bottom: none;
    margin-top: 4px;
    padding-top: 14px;
}

body.light-theme .lt-ty-row-total span,
body.light-theme .lt-ty-row-total strong {
    font-weight: 700;
    font-size: .95rem;
    color: var(--lt-text);
}

body.light-theme .lt-ty-item-option {
    display: block;
    font-size: .74rem;
    color: var(--lt-muted);
    margin-top: 2px;
}

body.light-theme .lt-ty-badge {
    display: inline-block;
    background: var(--lt-beige-100);
    color: var(--lt-muted-dark);
    font-size: .76rem;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: var(--lt-radius-full);
}

body.light-theme .lt-ty-badge.is-paid {
    background: #DCEEDD;
    color: #2F7D42;
}

body.light-theme .lt-ty-badge.is-fail {
    background: #F6DEDC;
    color: var(--lt-red);
}

body.light-theme .lt-ty-note {
    text-align: center;
    color: var(--lt-muted);
    font-size: .8rem;
    line-height: 1.6;
    margin: 8px 0 18px;
}

body.light-theme .lt-ty-account-box {
    border: 1px dashed var(--lt-beige-300);
    border-radius: var(--lt-radius-lg);
    padding: 16px 18px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 8px;
    font-size: .84rem;
}

body.light-theme .lt-ty-account-box strong {
    display: block;
    color: var(--lt-text);
    margin-bottom: 2px;
}

body.light-theme .lt-ty-account-box p {
    color: var(--lt-muted);
    margin: 0;
}

/* ---- Order tracking (order/track.blade.php) ------------------------------ */
body.light-theme .lt-track-topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 18px 20px;
    border-bottom: 1px solid var(--lt-border);
}

body.light-theme .lt-track-topbar h1 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--lt-text);
    text-transform: none;
    letter-spacing: 0;
}

body.light-theme .lt-track-back {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--lt-beige-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lt-text);
    text-decoration: none;
}

body.light-theme .lt-track-back:hover {
    background: var(--lt-beige-300);
}

body.light-theme .lt-track-subline {
    color: var(--lt-muted);
    font-size: .86rem;
    margin: 8px 0 0;
}

body.light-theme .lt-track-stepper {
    position: relative;
    margin: 32px 0 24px;
    padding-left: 16px;
}

body.light-theme .lt-track-step {
    position: relative;
    padding: 0 0 30px 32px;
}

body.light-theme .lt-track-step:last-child {
    padding-bottom: 0;
}

/* Connecting vertical line, drawn from this step's dot down to the next. */
body.light-theme .lt-track-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 24px;
    bottom: 0;
    width: 2px;
    background: var(--lt-border);
}

body.light-theme .lt-track-dot {
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--lt-beige-100);
    border: 2px solid var(--lt-beige-300);
    box-sizing: border-box;
}

body.light-theme .lt-track-step.is-done .lt-track-dot {
    background: var(--lt-accent);
    border-color: var(--lt-accent);
}

body.light-theme .lt-track-step.is-active .lt-track-dot {
    background: #fff;
    border: 3px solid var(--lt-accent);
}

body.light-theme .lt-track-step-label {
    margin: 0;
    font-weight: 600;
    font-size: .95rem;
    color: var(--lt-muted);
}

body.light-theme .lt-track-step.is-done .lt-track-step-label,
body.light-theme .lt-track-step.is-active .lt-track-step-label {
    color: var(--lt-text);
}

body.light-theme .lt-track-step-sub {
    margin: 4px 0 0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--lt-accent);
}

body.light-theme .lt-track-note {
    text-align: center;
    color: var(--lt-muted);
    font-size: .8rem;
    line-height: 1.6;
    margin: 0 0 24px;
}

/* ---- Account dashboard (user-dashboard/dashboard.blade.php) -------------- */
body.light-theme .lt-btn-sm {
    padding: 7px 16px;
    font-size: .78rem;
}

body.light-theme .lt-account-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

body.light-theme .lt-account-card-header .lt-ty-card-title {
    margin-bottom: 0;
}

body.light-theme .lt-account-logout {
    display: block;
    text-align: center;
    color: var(--lt-muted);
    font-size: .85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    background: none;
    border: none;
    padding: 0;
    margin: 4px auto 28px;
    cursor: pointer;
}

body.light-theme .lt-account-logout:hover {
    color: var(--lt-text);
}

body.light-theme .lt-account-edit {
    border-top: 1px dashed var(--lt-beige-300);
    margin-top: 6px;
    padding-top: 16px;
}

body.light-theme .lt-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

body.light-theme .lt-field {
    display: block;
    background: var(--lt-bg);
    border: 1px solid var(--lt-border);
    border-radius: var(--lt-radius-sm);
    padding: 11px 14px;
    font-size: .86rem;
    color: var(--lt-text);
    width: 100%;
}

body.light-theme .lt-field:focus {
    outline: none;
    border-color: var(--lt-accent);
    background: var(--lt-surface);
}

body.light-theme .lt-field:disabled {
    color: var(--lt-muted);
    cursor: not-allowed;
}

body.light-theme .lt-field-label {
    display: block;
    color: var(--lt-muted);
    font-size: .74rem;
    margin-bottom: 5px;
}

body.light-theme .lt-account-edit-divider {
    border: none;
    border-top: 1px solid var(--lt-border);
    margin: 18px 0;
}

@media (max-width: 560px) {
    body.light-theme .lt-field-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Order history rows (account dashboard, Card 2) ----------------------- */
body.light-theme .lt-order-row {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--lt-border);
    text-decoration: none;
    color: inherit;
    transition: background .15s var(--lt-ease);
}

body.light-theme a.lt-order-row:hover {
    background: var(--lt-bg);
}

body.light-theme .lt-order-row:last-child {
    border-bottom: none;
}

body.light-theme .lt-order-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

body.light-theme .lt-order-row-id {
    font-weight: 600;
    color: var(--lt-text);
}

body.light-theme .lt-order-row-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

body.light-theme .lt-order-row-meta {
    color: var(--lt-muted);
    font-size: .78rem;
    line-height: 1.4;
}

body.light-theme .lt-order-row-total {
    font-weight: 700;
    color: var(--lt-text);
    font-size: .92rem;
    white-space: nowrap;
}

body.light-theme .lt-ty-card .pagination {
    justify-content: center;
    gap: 4px;
    margin: 16px 0 2px;
}

body.light-theme .lt-ty-card .pagination .page-link {
    border: 1px solid var(--lt-border);
    color: var(--lt-text);
    border-radius: var(--lt-radius-sm);
    background: transparent;
}

body.light-theme .lt-ty-card .pagination .page-item.active .page-link {
    background: var(--lt-accent);
    border-color: var(--lt-accent);
    color: #fff;
}

body.light-theme .lt-ty-card .pagination .page-item.disabled .page-link {
    color: var(--lt-muted);
    background: transparent;
}

/* ---- Error pages (resources/views/errors/*.blade.php) -------------------- */
body.light-theme .lt-error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}

body.light-theme .lt-error-card {
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.light-theme .lt-error-code {
    font-size: 4.5rem;
    font-weight: 600;
    color: var(--lt-accent);
    line-height: 1;
    margin-bottom: 6px;
}

body.light-theme .lt-error-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--lt-text);
    margin-bottom: 10px;
}

body.light-theme .lt-error-message {
    color: var(--lt-muted);
    font-size: .92rem;
    line-height: 1.6;
    margin-bottom: 28px;
}

/* ---- Legal / CMS static pages (pages.pages.page) -------------------------- */
body.light-theme .lt-legal-page {
    padding: 48px 0 64px;
}

body.light-theme .lt-legal-title {
    text-align: center;
    margin-bottom: 8px;
}

body.light-theme .lt-legal-updated {
    text-align: center;
    color: var(--lt-muted);
    font-size: .82rem;
    margin-bottom: 28px;
}

body.light-theme .lt-legal-card {
    position: relative;
    overflow: hidden;
    background: var(--lt-surface);
    border: 1px solid var(--lt-border);
    border-radius: var(--lt-radius-lg);
    box-shadow: var(--lt-shadow-soft);
    padding: 40px 40px 36px;
    color: var(--lt-text);
    line-height: 1.75;
}

/* Thin branded strip along the top edge — the one bit of color the card
   needed to stop reading as a plain document dump. */
body.light-theme .lt-legal-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--lt-accent), var(--lt-accent-dark));
}

/* `body` is untouched legacy rich text — its own <h1> duplicates the page
   title already rendered above the card (Page::renderedBody() doesn't
   touch this, it only promotes "Article ..." paragraphs), so hide it
   rather than showing the same title twice. Harmless where no such h1
   exists (e.g. mentions-légales). */
body.light-theme .lt-legal-card > h1:first-child {
    display: none;
}

body.light-theme .lt-legal-card h1,
body.light-theme .lt-legal-card h2,
body.light-theme .lt-legal-card h3,
body.light-theme .lt-legal-card h4 {
    color: var(--lt-accent-dark);
    margin-top: 1.4em;
    margin-bottom: .5em;
}

body.light-theme .lt-legal-card h1:first-child,
body.light-theme .lt-legal-card h2:first-child,
body.light-theme .lt-legal-card h3:first-child {
    margin-top: 0;
}

/* Section titles promoted from plain <p> tags by Page::renderedBody() —
   the only real hierarchy this legacy content has, so this is what turns
   a wall of paragraphs into something scannable. */
body.light-theme .lt-legal-card p.lt-legal-article-heading {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--lt-accent-dark);
    letter-spacing: -.005em;
    margin-top: 2.1em;
    margin-bottom: .7em;
    padding-top: .9em;
    border-top: 1px solid var(--lt-border);
}

body.light-theme .lt-legal-card p.lt-legal-article-heading:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

body.light-theme .lt-legal-card p {
    color: var(--lt-text);
    margin-bottom: 1em;
}

body.light-theme .lt-legal-card strong,
body.light-theme .lt-legal-card b {
    color: var(--lt-muted-dark);
    font-weight: 600;
}

body.light-theme .lt-legal-card a {
    color: var(--lt-accent-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.light-theme .lt-legal-card a:hover {
    color: var(--lt-accent);
}

body.light-theme .lt-legal-card ul,
body.light-theme .lt-legal-card ol {
    color: var(--lt-text);
    padding-left: 1.3em;
    margin-bottom: 1em;
}

body.light-theme .lt-legal-card li {
    margin-bottom: .4em;
}

body.light-theme .lt-legal-card li::marker {
    color: var(--lt-accent);
    font-weight: 600;
}

body.light-theme .lt-legal-card table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
}

body.light-theme .lt-legal-card table th {
    background: var(--lt-beige-100);
    color: var(--lt-muted-dark);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}

body.light-theme .lt-legal-card table th,
body.light-theme .lt-legal-card table td {
    border: 1px solid var(--lt-border);
    padding: 8px 10px;
    text-align: left;
}

@media (max-width: 600px) {
    body.light-theme .lt-legal-card {
        padding: 28px 22px 24px;
    }

    body.light-theme .lt-legal-card p.lt-legal-article-heading {
        font-size: 1rem;
    }
}