/* Lekkerfriet storefront theme (Oct 2026), see docs/design/2026-10-17-design-direction.md
   Loaded after main.css: brand tokens, type, buttons, status, menu, cart, popup, checkout. */

:root {
    --lf-red: #DD312C;
    --lf-red-dark: #B8231E;
    --lf-red-soft: #FDEEEC;
    --lf-gold: #F2B33D;
    --lf-gold-ink: #7A5200;
    --lf-gold-soft: #FFF4DC;
    --lf-green: #1A7C45;   /* 4.6:1 on --lf-green-soft (WCAG AA) */
    --lf-green-soft: #E6F4EC;
    --lf-ink: #211A16;
    --lf-ink-2: #62584F;
    --lf-ink-3: #786E65;   /* 4.6:1 on --lf-bg (WCAG AA) */
    --lf-line: #ECE4DA;
    --lf-bg: #FAF6F1;
    --lf-card: #FFFFFF;
    --lf-radius: 14px;
    --lf-shadow: 0 1px 2px rgba(33, 26, 22, .06), 0 8px 24px rgba(33, 26, 22, .06);
    --lf-cart-w: 360px;
}

/* ---------- Base ---------- */
body {
    font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    color: var(--lf-ink);
    background: var(--lf-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    letter-spacing: -.01em;
}

a, a:hover, a:focus {
    color: var(--lf-red-dark);
}

.text-light {
    color: var(--lf-ink-2) !important;
}

:focus-visible {
    outline: 3px solid rgba(221, 49, 44, .35);
    outline-offset: 2px;
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: 999px;
    font-weight: 700;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--lf-red) !important;
    border-color: var(--lf-red) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-success:hover {
    background-color: var(--lf-red-dark) !important;
    border-color: var(--lf-red-dark) !important;
}

.btn:disabled,
.disabled-checkoutButton {
    background-color: #D9D1C8 !important;
    border-color: #D9D1C8 !important;
    color: #fff !important;
    opacity: 1 !important;
}

/* Round "+" buttons in the menu and the options popup */
.add-to-cart,
#product-tables-sheet a.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    font-size: 16px;
    position: relative;
    box-shadow: 0 2px 6px rgba(221, 49, 44, .25) !important;
}

/* Quantity already in the cart: small dark bubble on the "+" */
.add-to-cart[data-count]:after {
    top: -6px;
    right: -6px;
    margin-top: 0;
    width: 22px;
    height: 22px;
    line-height: 20px;
    font-size: 12px;
    font-weight: 800;
    background: var(--lf-ink);
    color: #fff;
    border: 2px solid #fff;
}

.add-to-cart.loading:after {
    top: -6px;
    right: -6px;
    margin-top: 0;
    width: 22px;
    height: 22px;
    border-width: 3px;
    border-color: #F1ECE6;
    border-top-color: var(--lf-red);
    background: #fff;
}

/* ---------- Top bar (mobile) and sidebar (desktop) ---------- */
#top-navbar,
#top-navbar.bg-light {
    background: var(--lf-card) !important;
    border-bottom: 1px solid var(--lf-line);
    min-height: 56px;
}

#sidebar-wrapper {
    background: var(--lf-card);
    border-right: 1px solid var(--lf-line);
}

#sidebar-wrapper .list-group-item {
    background: transparent;
    color: var(--lf-ink-2);
    font-weight: 700;
    border-radius: 999px;
    margin: 2px 12px;
    width: auto;
}

#sidebar-wrapper .list-group-item:hover {
    background: var(--lf-bg);
    color: var(--lf-ink);
}

/* Platform logo (Lekkerfriet.nl / Gastrobestellpunkt.de): top bar on phones, sidebar on desktop */
.lf-brand {
    display: inline-flex;
    align-items: center;
}

.lf-brand img {
    display: block;
    height: 28px;
    width: auto;
}

.lf-brand-sidebar {
    display: flex;
    justify-content: center;
    padding: 28px 14px 28px;
}

.lf-brand-sidebar .lf-brand img {
    height: auto;
    width: 100%;
    max-width: 96px;
}

#top-navbar {
    align-items: center;
}

#top-navbar .lf-brand {
    margin-right: auto;
}

/* The bars carry only the platform logo; the store shows itself in the page
   (store header on the menu, a small line under the title on the checkout) */
#top-navbar > a:first-child:not(.lf-brand),
#sidebar-wrapper .sidebar-heading {
    display: none;
}

.checkout-store {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -4px 0 14px;
    font-weight: 700;
    color: var(--lf-ink-2);
}

.checkout-store img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 50%;
    background: var(--lf-card);
    border: 1px solid var(--lf-line);
    padding: 2px;
}



/* ---------- Store header ---------- */
#accordion .card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 20px 16px 12px;
}

.store-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 260px;
    min-width: 0;
}

.store-hero-logo {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lf-card);
    border: 1px solid var(--lf-line);
    border-radius: 50%;
    box-shadow: var(--lf-shadow);
}

/* The circle is the wrapper, the logo itself stays square inside it: at 70% of
   the diameter (= diameter / 1.41) even a square logo's corners stay inside. */
.store-hero-logo img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.store-name {
    font-size: 26px;
    line-height: 1.15;
}

.status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-top: 6px;
    font-weight: 400;
    color: var(--lf-ink-2);
    font-size: 14px;
}

.geopend,
.gesloten {
    color: var(--lf-ink-2);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    background: #F1ECE6;
    color: var(--lf-ink-2);
}

.status-pill:before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.geopend .status-pill {
    background: var(--lf-green-soft);
    color: var(--lf-green);
}

.gepauzeerd .status-pill {
    background: var(--lf-gold-soft);
    color: var(--lf-gold-ink);
}

.gesloten .status-pill {
    background: #F1ECE6;
    color: #6E645B;
}

/* "Info & openingstijden" */
.hours-toggle,
.none.hours-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--lf-line);
    border-radius: 999px;
    background: var(--lf-card);
    color: var(--lf-ink) !important;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.none.hours-toggle:hover {
    border-color: var(--lf-ink-3);
}

.hours-toggle .fa-info-circle {
    color: var(--lf-red);
    font-size: 16px;
}

.hours-toggle .fa-chevron-down,
.hours-toggle .fa-chevron-up {
    font-size: 11px;
}

#collapseOne .card-body {
    margin: 0 16px 8px;
    padding: 16px;
    background: var(--lf-card);
    border: 1px solid var(--lf-line);
    border-radius: var(--lf-radius);
    font-size: 15px;
}

#collapseOne .table {
    margin: 8px 0 0;
}

#collapseOne .table td {
    border-color: var(--lf-line);
    padding: 6px 10px;
}

/* ---------- Category tabs ---------- */
.navbar-overflow,
.navbar-overflow.bg-light {
    background: var(--lf-bg) !important;
    padding: 10px 0;
    box-shadow: 0 1px 0 var(--lf-line);
    scrollbar-width: none;
}

.navbar-overflow::-webkit-scrollbar {
    display: none;
}

.navbar-overflow .navbar-nav {
    gap: 8px;
    padding: 0 16px;
}

.navbar-overflow .navbar-nav .nav-link {
    padding: 7px 14px !important;
    border-radius: 999px;
    background: var(--lf-card);
    border: 1px solid var(--lf-line);
    color: var(--lf-ink);
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.navbar-overflow .navbar-nav .nav-link.cat-active {
    background: var(--lf-ink);
    border-color: var(--lf-ink);
    color: #fff;
    box-shadow: none;
}

/* ---------- Menu: categories and products ---------- */
#product-tables.container-fluid {
    padding-left: 16px;
    padding-right: 16px;
}

#product-tables .product-table,
#product-tables .product-table thead,
#product-tables .product-table thead tr {
    display: block;
}

#product-tables .product-table thead {
    border-bottom: 0;
}

#product-tables .product-table thead th {
    display: block;
    padding: 22px 2px 10px;
    font-size: 20px;
    font-weight: 800;
}

#product-tables .product-table thead th:not(:first-child) {
    display: none;
}

#product-tables .product-table thead th .text-light {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 400;
}

/* Phone/tablet: one white card per category with divided rows */
#product-tables .product-table tbody {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background: var(--lf-card);
    border: 1px solid var(--lf-line);
    border-radius: var(--lf-radius);
    overflow: hidden;
}

#product-tables .product-table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "info button" "price button";
    align-items: center;
    column-gap: 16px;
    row-gap: 4px;
    padding: 14px 16px;
    border-top: 1px solid var(--lf-line);
}

#product-tables .product-table tbody tr:first-child {
    border-top: 0;
}

#product-tables .product-table tbody tr td {
    display: block;
    padding: 0;
    width: auto;
    text-align: left;
}

#product-tables .product-table tbody tr td:nth-child(1) {
    grid-area: info;
    align-self: start;
    font-size: 15px;
    line-height: 1.35;
}

#product-tables .product-table tbody tr td:nth-child(1) > span:first-child,
#product-tables .product-table tbody tr td:nth-child(1) > div > span:first-child {
    font-weight: 700;
    font-size: 16px;
}

#product-tables .product-table tbody tr td:nth-child(1) .text-light {
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#product-tables .product-table tbody tr td:nth-child(2) {
    grid-area: price;
    align-self: end;
    font-weight: 700;
    text-align: left !important;
    color: var(--lf-ink);
}

#product-tables .product-table tbody tr td:nth-child(3) {
    grid-area: button;
}

/* "Populair": horizontal row of small cards above the menu */
.popular {
    margin: 4px 0 8px;
}

.popular-title {
    font-size: 20px;
    padding: 18px 2px 10px;
    margin: 0;
}

.popular-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.popular-row::-webkit-scrollbar {
    display: none;
}

.popular-card {
    position: relative;
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 12px 54px;
    background: var(--lf-card);
    border: 1px solid var(--lf-line);
    border-radius: var(--lf-radius);
    scroll-snap-align: start;
}

.popular-boost {
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--lf-gold-soft);
    color: var(--lf-gold-ink);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.popular-card .product-thumb {
    width: 100%;
    height: 96px;
    margin-bottom: 4px;
}

.popular-name {
    font-weight: 700;
    line-height: 1.25;
}

.popular-price {
    font-weight: 700;
    color: var(--lf-ink-2);
    font-size: 14px;
}

.popular-card .add-to-cart {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

/* Sold out: row dimmed, label instead of the + button */
#product-tables .product-table tbody tr.is-sold-out td:nth-child(1),
#product-tables .product-table tbody tr.is-sold-out td:nth-child(2),
#product-tables .product-table tbody tr.is-sold-out .product-thumb {
    opacity: .5;
}

.sold-out-label {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: #F1ECE6;
    color: var(--lf-ink-2);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

/* Mouse users get a thin visible scrollbar on the horizontal rows */
@media (hover: hover) and (pointer: fine) {
    .popular-row,
    .navbar-overflow {
        scrollbar-width: thin;
        scrollbar-color: #D6CBBF transparent;
    }
    .popular-row::-webkit-scrollbar,
    .navbar-overflow::-webkit-scrollbar {
        display: block;
        height: 6px;
    }
    .popular-row::-webkit-scrollbar-thumb,
    .navbar-overflow::-webkit-scrollbar-thumb {
        background: #D6CBBF;
        border-radius: 999px;
    }
}

/* Category banners and other content images: rounded like the cards */
#product-tables img.banner {
    border-radius: var(--lf-radius);
    height: auto;   /* width/height attributes only reserve the aspect ratio */
}

/* Product photo with the + button overlapping its corner */
#product-tables .product-table tbody tr td.has-thumb {
    position: relative;
    width: 88px;
    height: 88px;
}

.product-thumb {
    display: block;
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 12px;
    background: var(--lf-bg);
}

td.has-thumb .add-to-cart {
    position: absolute;
    right: -8px;
    bottom: -8px;
    width: 38px;
    height: 38px;
    border: 3px solid var(--lf-card);
}

/* ---------- Cart: phone = floating red button + white bottom sheet ---------- */
#shopping-cart-bar {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    height: 56px;
    line-height: 56px;
    border-radius: 999px;
    background: var(--lf-red);
    box-shadow: 0 8px 24px rgba(221, 49, 44, .35);
    display: none;
}

#shopping-cart.has-items #shopping-cart-bar {
    display: block;
}

#shopping-cart.has-items #shopping-cart-bar {
    display: flex;
}

#shopping-cart-bar {
    align-items: center;
    gap: 12px;
    padding: 0 20px 0 10px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    line-height: 1;
    font-weight: 800;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
    -webkit-tap-highlight-color: transparent;
}

#shopping-cart-bar:active {
    transform: scale(.98);
    box-shadow: 0 4px 12px rgba(221, 49, 44, .35);
}

#shopping-cart-bar:focus-visible {
    outline: 3px solid var(--lf-gold);
    outline-offset: 3px;
}

.cart-bar-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-radius: 999px;
    background: #fff;
    color: var(--lf-red);
    font-size: 16px;
}

.cart-bar-label {
    flex: 1;
    font-size: 16px;
}

.cart-bar-total {
    font-size: 17px;
    white-space: nowrap;
}

.cart-bar-total #shopping-cart-total {
    font-size: inherit !important;
}

/* Sheet header + close; dimmed page behind the open sheet */
.cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cart-head .cart-title {
    margin: 0;
}

.cart-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    border: 0;
    border-radius: 50%;
    background: var(--lf-bg);
    color: var(--lf-ink);
    cursor: pointer;
}

.cart-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(33, 26, 22, .45);
}

body.cart-open .cart-backdrop {
    display: block;
}

body.cart-open #shopping-cart-bar {
    display: none !important;
}

body.cart-open {
    overflow: hidden;
}

#shopping-cart-inner::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: -8px auto 12px;
    border-radius: 2px;
    background: var(--lf-line);
}

/* Phones have no hover: no sticky tap colours on buttons */
@media (hover: none) {
    .btn-primary:hover,
    .btn-primary:focus:not(:focus-visible) {
        background-color: var(--lf-red) !important;
        border-color: var(--lf-red) !important;
    }
    .btn-primary:active {
        background-color: var(--lf-red-dark) !important;
    }
}

#shopping-cart-inner {
    top: auto;
    bottom: 0;
    height: auto;
    max-height: 85vh;
    background: var(--lf-card);
    color: var(--lf-ink);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 40px rgba(33, 26, 22, .18);
    padding: 20px 0 calc(20px + env(safe-area-inset-bottom));
}

#page-content-wrapper {
    padding-bottom: calc(56px + 32px);
}

.cart-title {
    display: block;
    font-size: 20px;
    margin-bottom: 8px;
}

/* Cart line: name on its own line, line total + quantity stepper below */
.cart-line {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name name" "price qty";
    align-items: center;
    row-gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid var(--lf-line);
}

.cart-line-name {
    grid-area: name;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.cart-line-attr {
    font-weight: 400;
    color: var(--lf-ink-2);
}

.cart-line-price {
    grid-area: price;
    font-weight: 700;
}

.cart-line-qty {
    grid-area: qty;
    display: flex;
    align-items: center;
    margin-right: -10px;
}

#shopping-cart-inner .update-quantity,
#shopping-cart-inner .update-quantity:hover,
#shopping-cart-inner .update-quantity:focus {
    color: var(--lf-ink) !important;
    width: 44px;
    height: 44px;
    font-size: 26px;
}

.cart-subtotal {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    font-size: 17px;
    font-weight: 800;
}

.cart-title {
    margin-bottom: 4px;
}

.shopping-cart-min {
    color: var(--lf-gold-ink);
    background: var(--lf-gold-soft);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 14px;
}

.shopping-cart-min.is-reached {
    color: var(--lf-green);
    background: var(--lf-green-soft);
}

.store-delivery-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--lf-gold-soft);
    color: var(--lf-gold-ink);
    font-size: 13px;
    font-weight: 800;
}

#shopping-cart-checkout .btn {
    max-width: none;
    height: 52px;
    font-size: 17px;
}

.added-toast {
    background: var(--lf-ink);
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    bottom: calc(56px + 28px);
}

/* Checkout order summary: light rows instead of a boxed grid */
.table-wrapper .table-bordered,
.table-wrapper .table-bordered td,
.table-wrapper .table-bordered th {
    border-left: 0;
    border-right: 0;
}

.table-wrapper .table thead th {
    border-bottom: 1px solid var(--lf-line);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--lf-ink-3);
}

.table-wrapper .checkout-total-row th {
    border-top: 2px solid var(--lf-ink) !important;
    font-size: 18px;
}

.cart-empty {
    text-align: center;
    padding: 24px 8px;
    color: var(--lf-ink-2);
}

.cart-empty .fa {
    font-size: 36px;
    color: #D6CBBF;
    margin-bottom: 10px;
}

.cart-empty p {
    margin: 0;
    font-weight: 700;
    color: var(--lf-ink);
}

.cart-empty span {
    font-weight: 400;
    color: var(--lf-ink-2);
}

/* "Vaak samen besteld" in the cart */
.cart-suggestions {
    margin-top: 14px;
    padding: 12px;
    background: var(--lf-bg);
    border-radius: 12px;
}

.cart-suggestions-title {
    font-size: 15px;
    margin: 0 0 8px;
}

.cart-suggestion {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-top: 1px solid var(--lf-line);
    font-size: 14px;
}

.cart-suggestion:first-child {
    border-top: 0;
}

.cart-suggestion-name {
    font-weight: 700;
}

.cart-suggestion-price {
    color: var(--lf-ink-2);
    white-space: nowrap;
}

.cart-suggestion .add-to-cart {
    width: 36px;
    height: 36px;
    font-size: 14px;
}

/* ---------- Options popup ---------- */
.product-sheet .modal-content {
    border: 0;
    border-radius: 20px;
    overflow: hidden;
}

.product-sheet .modal-header {
    border-bottom: 1px solid var(--lf-line);
    padding: 18px 20px;
}

.product-sheet .modal-title {
    font-size: 20px;
    font-weight: 800;
}

#product-tables-sheet .product-table {
    width: 100%;
}

#product-tables-sheet .product-table thead {
    border-bottom: 0;
}

#product-tables-sheet .product-table thead th {
    padding: 14px 20px 6px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--lf-ink-3);
}

#product-tables-sheet .product-table tbody tr td {
    padding: 10px 20px;
    border-top: 1px solid var(--lf-line);
    vertical-align: middle;
}

#product-tables-sheet .product-table tbody tr:first-child td {
    border-top: 0;
}

#product-tables-sheet .product-table tbody tr td:nth-child(1) {
    font-weight: 700;
}

#product-tables-sheet .product-table tbody tr td:nth-child(2) {
    color: var(--lf-ink-2);
    font-weight: 600;
}

/* ---------- Checkout ---------- */
.form-control {
    border-radius: 12px;
    border-color: #DCD3C9;
    height: 48px;
    font-size: 16px;
}

textarea.form-control {
    height: auto;
    min-height: 96px;
}

.form-control:focus {
    border-color: var(--lf-red) !important;
    box-shadow: 0 0 0 3px rgba(221, 49, 44, .15) !important;
}

.checkout-label {
    color: var(--lf-ink-2);
}

#checkoutButton {
    min-width: 220px;
    height: 52px;
    font-size: 17px;
}

.table-wrapper .table {
    background: var(--lf-card);
    border-radius: var(--lf-radius);
    overflow: hidden;
}

.table-bordered,
.table-bordered td,
.table-bordered th {
    border-color: var(--lf-line);
}

.backto a {
    font-weight: 700;
}

/* Checkout layout: summary card + form card; side by side on desktop */
.checkout-page {
    max-width: 1100px;
}

.checkout-summary,
.checkout-form {
    background: var(--lf-card);
    border: 1px solid var(--lf-line);
    border-radius: var(--lf-radius);
    padding: 16px 16px 4px;
    margin-bottom: 16px;
}

.checkout-form {
    padding: 20px 20px 24px;
}

.checkout-summary h3,
.checkout-form h3 {
    font-size: 18px;
    margin: 4px 0 12px;
}

.checkout-form h4 {
    font-size: 16px;
}

.checkout-summary .table {
    margin-bottom: 8px;
    border: 0;
}

.checkout-summary .table td,
.checkout-summary .table th {
    border-top-color: var(--lf-line);
    border-bottom: 0;
    padding: 10px 4px;
}

.checkout-summary .table thead th {
    border-top: 0;
}

.checkout-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--lf-ink-2);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

.checkout-newsletter {
    align-items: flex-start;
    line-height: 1.4;
}

.checkout-remember.checkout-newsletter input {
    flex: none;
    margin-top: 1px;
}

.checkout-remember input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--lf-red);
}

.checkout-terms {
    margin: 0;
    color: var(--lf-ink-2);
    font-size: 13px;
    text-align: center;
}

.checkout-terms a {
    color: inherit;
    text-decoration: underline;
}

.checkout-submit {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checkout-submit #checkoutButton {
    width: 100%;
}

.checkout-notice {
    display: block;
    color: var(--lf-gold-ink);
    background: var(--lf-gold-soft);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 14px;
}

@media (min-width: 1024px) {
    .checkout-page {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        grid-template-areas: "back back" "title title" "store store" "form summary";
        column-gap: 28px;
        align-items: start;
    }
    .checkout-page > .backto { grid-area: back; }
    .checkout-page > h1 { grid-area: title; }
    .checkout-page > .checkout-store { grid-area: store; }
    .checkout-page > .checkout-form { grid-area: form; }
    .checkout-page > .checkout-summary {
        grid-area: summary;
        position: sticky;
        top: 24px;
    }
}

/* Pickup / delivery choice buttons (checkout) */
.choice-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
    pointer-events: none;
}

.choice-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 12px 14px;
    border: 2px solid var(--lf-line);
    border-radius: 12px;
    background: var(--lf-card);
    color: var(--lf-ink);
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.choice-main {
    font-weight: 800;
    font-size: 16px;
}

.choice-sub {
    font-size: 13px;
    color: var(--lf-ink-2);
}

.choice.is-selected {
    border-color: var(--lf-red);
    background: var(--lf-red-soft);
}

.choice:focus,
.choice:focus-visible {
    outline: none;
}

.choice:focus-visible {
    box-shadow: 0 0 0 3px rgba(221, 49, 44, .2);
}

.choice:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Day / time selects (checkout) */
.slot-select.form-control {
    height: 52px;
    padding-left: 44px;
    border: 2px solid var(--lf-line);
    font-weight: 700;
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 18px 18px;
    cursor: pointer;
}

.slot-day.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23DD312C'%3E%3Cpath fill-rule='evenodd' d='M4 0h1.6v1.6h4.8V0H12v1.6h2.4V16H1.6V1.6H4zM3.2 5.6v8.8h9.6V5.6z'/%3E%3C/svg%3E");
}

.slot-time.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23DD312C'%3E%3Cpath fill-rule='evenodd' d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm0 1.6a6.4 6.4 0 1 0 0 12.8A6.4 6.4 0 0 0 8 1.6zM7.2 3.5h1.6v4.2l2.9 1.7-.8 1.4-3.7-2.2z'/%3E%3C/svg%3E");
}

/* Thank-you page */
.thanks-page {
    max-width: 560px;
}

.thanks-hero {
    text-align: center;
    padding: 16px 0 8px;
}

.thanks-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--lf-green-soft);
    color: var(--lf-green);
    font-size: 28px;
    margin-bottom: 12px;
}

.thanks-hero h1 {
    font-size: 28px;
    margin-bottom: 4px;
}

.thanks-sub {
    color: var(--lf-ink-2);
}

.thanks-card {
    background: var(--lf-card);
    border: 1px solid var(--lf-line);
    border-radius: var(--lf-radius);
    padding: 16px 18px;
    margin-bottom: 14px;
}

.thanks-card h3 {
    font-size: 17px;
    margin-bottom: 10px;
}

.thanks-when {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.thanks-label {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--lf-ink-3);
}

.thanks-when strong {
    font-size: 20px;
}

.thanks-address {
    color: var(--lf-ink-2);
}

.thanks-phone {
    font-weight: 700;
}

.thanks-line {
    display: flex;
    gap: 10px;
    padding: 6px 0;
    border-top: 1px solid var(--lf-line);
}

.thanks-line:first-of-type {
    border-top: 0;
}

.thanks-qty {
    color: var(--lf-ink-3);
    min-width: 28px;
}

.thanks-name {
    flex: 1;
}

.thanks-price {
    font-weight: 700;
    white-space: nowrap;
}

.thanks-total {
    border-top: 2px solid var(--lf-ink);
    margin-top: 4px;
    padding-top: 10px;
    font-weight: 800;
    font-size: 18px;
}

.thanks-details p {
    margin: 0;
    color: var(--lf-ink-2);
}

.thanks-back {
    width: 100%;
}

/* Product page fallback: round option buttons like the menu */
#product-tables a.btn-primary[data-option] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
}

/* ---------- Desktop (>= 1024px): white cart column on the right ---------- */
@media (min-width: 1024px) {
    /* room for the cart column - only on pages that have the cart (not the product page) */
    body:has(#shopping-cart) #accordion,
    body:has(#shopping-cart) .navbar-overflow,
    body:has(#shopping-cart) #product-tables,
    body:has(#shopping-cart) #store-description {
        width: auto;
        max-width: 1100px;
        margin-left: auto;
        margin-right: calc(var(--lf-cart-w) + 16px);
    }
    @supports (margin-right: max(1px, 2px)) {
        body:has(#shopping-cart) #accordion,
        body:has(#shopping-cart) .navbar-overflow,
        body:has(#shopping-cart) #product-tables,
        body:has(#shopping-cart) #store-description {
            margin-right: max(calc(var(--lf-cart-w) + 16px), calc((100vw - var(--lf-cart-w) - 1100px) / 2 + var(--lf-cart-w)));
        }
    }
    #shopping-cart.has-items #shopping-cart-bar,
    #shopping-cart-bar {
        display: none;
    }
    #shopping-cart-inner {
        display: block !important;
        top: 0;
        bottom: 0;
        left: auto;
        right: 0;
        width: var(--lf-cart-w);
        height: 100vh;
        max-height: none;
        border-radius: 0;
        box-shadow: none;
        border-left: 1px solid var(--lf-line);
        padding: 24px 0;
        z-index: 100;
    }
    #page-content-wrapper {
        padding-bottom: 2rem;
    }
    .added-toast {
        left: calc((100vw - var(--lf-cart-w)) / 2);
        bottom: 24px;
    }
    .lang-switch {
        right: calc(var(--lf-cart-w) + 12px) !important;
        bottom: 12px;
    }
    .store-name {
        font-size: 32px;
    }
    .store-hero-logo {
        width: 80px;
        height: 80px;
        flex-basis: 80px;
    }
}

/* Wide screens: products as separate cards in a grid */
@media (min-width: 1280px) {
    #product-tables .product-table tbody {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        background: transparent;
        border: 0;
        border-radius: 0;
        overflow: visible;
    }
    #product-tables .product-table tbody tr,
    #product-tables .product-table tbody tr:first-child {
        border: 1px solid var(--lf-line);
        border-radius: var(--lf-radius);
        background: var(--lf-card);
        transition: border-color .15s, box-shadow .15s;
    }
    #product-tables .product-table tbody tr:hover {
        border-color: #D6CBBF;
        box-shadow: var(--lf-shadow);
    }
}

@media (min-width: 1700px) {
    #product-tables .product-table tbody {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* ---------- Top bar on every screen (no sidebar): logo left, Menu / Afrekenen /
   Alle restaurants right; on desktop it spans the menu column, the cart keeps the right ---------- */
#sidebar-wrapper {
    display: none !important;
}

body {
    margin-left: 0 !important;
}

#top-navbar {
    display: flex !important;
    padding: 8px 16px;
}

/* the sheet spans the full width; the "Bekijk bestelling" bar floats with 12px all around */
#shopping-cart-inner {
    left: 0;
    width: 100%;
}

#shopping-cart-bar {
    left: 12px;
    right: 12px;
    width: auto;
}

#page-content-wrapper {
    padding-top: 0 !important;
}

@media (min-width: 768px) {
    #page-content-wrapper {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    #top-navbar {
        margin: 0 -1.25rem;
        padding: 10px 28px;
    }
    #top-navbar .lf-brand img {
        height: 34px;
    }
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--lf-ink-2) !important;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none !important;
    white-space: nowrap;
}

.topbar-link:hover {
    background: var(--lf-bg);
    color: var(--lf-ink) !important;
}

.topbar-link svg {
    color: var(--lf-red);
    flex: none;
}

#top-navbar {
    flex-wrap: nowrap !important;
}

/* phones: phone number as an icon only, to keep the bar on one line */
@media (max-width: 599px) {
    #top-navbar .lf-brand img {
        height: 24px;
    }
    .topbar-label {
        display: none;
    }
    .topbar-link {
        padding: 8px 10px;
        font-size: 14px;
    }
}

@media (min-width: 1024px) {
    body:has(#shopping-cart) #top-navbar {
        padding-right: calc(var(--lf-cart-w) + 28px);   /* only next to the cart column */
    }
    #shopping-cart-inner {
        left: auto;
        width: var(--lf-cart-w);
    }
}

/* "Saus erbij?" / "Iets te drinken?" under "Vaak samen besteld" */
.cart-gaps .cart-suggestions-list + .cart-suggestions-title {
    margin-top: 14px;
}

/* Desktop: the cart is a column, never a sheet */
@media (min-width: 1024px) {
    .cart-close,
    .cart-backdrop,
    #shopping-cart-inner::before {
        display: none !important;
    }
    body.cart-open {
        overflow: auto;
    }
}

/* Checkout summary: price and quantity line up under their headers */
.checkout-summary th:not(:first-child),
.checkout-summary td:not(:first-child) {
    text-align: right;
    white-space: nowrap;
}

/* Product page (no cart column): one centred column */
@media (min-width: 768px) {
    #page-content-wrapper > .container-fluid:has(#variation_form) {   /* not when the form is copied into the store-page option sheet */
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Thank-you page: the shop's number on its own line, explained */
.thanks-call {
    margin: 4px 0 16px;
    text-align: center;
    color: var(--lf-ink-2);
}

.thanks-call a {
    font-weight: 800;
    white-space: nowrap;
}

/* Checkout: where the order is picked up, and a warning when that's far away */
.checkout-pickup-where {
    margin: 4px 0 0;
    padding: 12px 14px;
    background: var(--lf-bg);
    border-radius: 12px;
    color: var(--lf-ink-2);
}

.checkout-pickup-where strong {
    color: var(--lf-ink);
}

.checkout-pickup-far {
    margin: 8px 0 0;
    padding: 10px 14px;
    background: var(--lf-gold-soft);
    color: var(--lf-gold-ink);
    border-radius: 12px;
    font-weight: 700;
}

.checkout-submit .pickup-details {
    margin-bottom: 12px;
}

/* Added to cart: the cart reacts instead of a toast */
@keyframes cart-bar-pulse {
    0% { transform: scale(1); }
    35% { transform: scale(1.03); box-shadow: 0 10px 30px rgba(221, 49, 44, .45); }
    100% { transform: scale(1); }
}

@keyframes cart-count-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

@keyframes cart-subtotal-flash {
    0% { background: var(--lf-gold-soft); }
    100% { background: transparent; }
}

#shopping-cart-bar.cart-bump {
    animation: cart-bar-pulse .45s ease-out;
}

#shopping-cart-count.cart-bump {
    animation: cart-count-pop .45s ease-out;
}

#shopping-cart-subtotal.cart-bump {
    animation: cart-subtotal-flash 1.2s ease-out;
    border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
    #shopping-cart-bar.cart-bump,
    #shopping-cart-count.cart-bump,
    #shopping-cart-subtotal.cart-bump {
        animation: none;
    }
}

.added-toast {
    display: none !important;
}

/* Payment cancelled: same layout as the thank-you page, softer icon */
.cancelled-page .cancelled-icon {
    background: var(--lf-gold-soft);
    color: var(--lf-gold-ink);
}

.cancelled-menu {
    display: block;
    margin-top: 14px;
    text-align: center;
    font-weight: 700;
}