/* ===== Customer site — uses tokens ===== */



/* ===== Header ===== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--gradient-brand);
    color: var(--text-inverse);
    box-shadow: var(--shadow-md);
}

.site-header-inner {

    max-width: var(--container);

    margin: 0 auto;

    padding: var(--s-3) var(--s-4);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--s-3);

}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-size: var(--fs-lg);
    font-family: var(--ff-display);
    color: var(--text-inverse);
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.site-brand-logo {
    height: 44px;
    width: 44px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.92);
    padding: 3px;
    box-shadow: var(--shadow-md);
}
.site-brand-name {
    line-height: 1;
    letter-spacing: 0.01em;
}
.site-brand:hover { color: var(--text-inverse); }



.site-nav-toggle {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: var(--tap-min);

    height: var(--tap-min);

    background: transparent;

    border: 0;

    color: var(--text-inverse);

    border-radius: var(--r-md);

}

.site-nav-toggle:hover { background: rgba(255, 255, 255, 0.1); }



.site-nav-links {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    background: var(--color-brand-dark);

    flex-direction: column;

    padding: var(--s-2);

    gap: var(--s-1);

    box-shadow: var(--shadow-md);

}

.site-nav-links.is-open { display: flex; }

.site-nav-links a, .site-nav-links .nav-disabled {

    color: var(--text-inverse);

    text-decoration: none;

    padding: var(--s-3) var(--s-4);

    border-radius: var(--r-md);

    min-height: var(--tap-min);

    display: flex;

    align-items: center;

    font-size: var(--fs-md);

    transition: background var(--dur-fast) var(--ease);

}

.site-nav-links a:hover, .site-nav-links a.is-active {

    background: rgba(255, 255, 255, 0.15);

    color: var(--text-inverse);

}

.site-nav-links .nav-disabled {

    color: rgba(255, 255, 255, 0.45);

    cursor: not-allowed;

}



@media (min-width: 768px) {

    .site-nav-toggle { display: none; }

    .site-nav-links {

        display: flex !important;

        position: static;

        flex-direction: row;

        background: transparent;

        padding: 0;

        gap: 0;

        box-shadow: none;

    }

    .site-nav-links a, .site-nav-links .nav-disabled {

        padding: var(--s-2) var(--s-3);

        border-radius: var(--r-md);

    }

}



/* ===== Hero (Index) ===== */

.hero {
    position: relative;
    color: var(--text-inverse);
    text-align: center;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--s-16) var(--s-4);
    background: var(--gradient-brand);
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.10) 0, transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.08) 0, transparent 40%);
    pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero-logo {
    width: clamp(140px, 22vw, 220px);
    height: auto;
    margin-bottom: var(--s-5);
    filter: drop-shadow(0 6px 20px rgba(20, 24, 60, 0.4));
    border-radius: var(--r-xl);
}
.hero h1 {
    color: var(--text-inverse);
    font-size: clamp(2rem, 6vw, var(--fs-4xl));
    font-family: var(--ff-display);
    text-shadow: 0 2px 8px rgba(15, 23, 42, 0.4);
    margin-bottom: var(--s-3);

}

.hero .tagline {

    font-size: var(--fs-lg);

    opacity: 0.95;

    margin-bottom: var(--s-6);

    max-width: 480px;

    margin-left: auto;

    margin-right: auto;

}

.hero-cta {

    display: flex;

    flex-direction: column;

    gap: var(--s-3);

    align-items: center;

}

.hero-cta .btn { min-width: 220px; }



/* Customer-facing .btn — flat red, matches the landing-page palette. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-min, 44px);
    padding: 0.65rem 1.25rem;
    background: var(--color-brand);
    color: #fff;
    border: 0;
    border-radius: var(--r-pill);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
    box-shadow: var(--shadow-sm);
}
.btn:hover {
    background: var(--color-brand-soft);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-disabled {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: var(--tap-min);

    min-width: 220px;

    padding: var(--s-2) var(--s-5);

    background: rgba(255, 255, 255, 0.15);

    color: rgba(255, 255, 255, 0.6);

    border: 2px dashed rgba(255, 255, 255, 0.4);

    border-radius: var(--r-md);

    cursor: not-allowed;

}



@media (max-width: 479.98px) {

    /* Mobile: full-width stacked CTAs for thumb-friendly tapping. */

    .hero-cta { width: 100%; max-width: 320px; margin: 0 auto; }

    .hero-cta .btn { width: 100%; }

}



@media (min-width: 480px) {

    .hero-cta { flex-direction: row; justify-content: center; }

}



/* ===== Quick info bar (Index) ===== */

.quick-info {

    display: grid;

    grid-template-columns: 1fr;

    gap: var(--s-3);

    max-width: var(--container);

    margin: -3rem auto var(--s-8);

    padding: 0 var(--s-4);

    position: relative;

    z-index: 1;

}

.quick-info-card {

    background: var(--surface);

    border-radius: var(--r-lg);

    box-shadow: var(--shadow-md);

    padding: var(--s-5);

    display: flex;

    align-items: center;

    gap: var(--s-3);

}

.quick-info-icon {

    width: 44px; height: 44px;

    background: var(--color-brand);

    color: var(--text-inverse);

    border-radius: var(--r-pill);

    display: flex; align-items: center; justify-content: center;

    font-size: 1.25rem;

    flex-shrink: 0;

}

.quick-info-label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

.quick-info-value { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); }

.quick-info-value.is-open { color: var(--color-success); }

.quick-info-value.is-closed { color: var(--color-danger); }



@media (min-width: 768px) {

    .quick-info { grid-template-columns: repeat(3, 1fr); }

}



/* ===== Featured items ===== */

.featured-section {

    max-width: var(--container);

    margin: 0 auto var(--s-12);

    padding: 0 var(--s-4);

}

.featured-section h2 { text-align: center; margin-bottom: var(--s-6); }

.featured-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: var(--s-4);

}

@media (min-width: 640px) { .featured-grid { grid-template-columns: repeat(2, 1fr); } }

@media (min-width: 1024px) { .featured-grid { grid-template-columns: repeat(3, 1fr); } }



.featured-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border-top: 6px solid var(--color-brand);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    text-decoration: none;
    color: inherit;
}

.featured-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: inherit;
}

.featured-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.featured-card-body {
    padding: var(--s-6);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    flex: 1;
}

.featured-card h3 {
    font-size: var(--fs-xl);
    margin: 0;
    color: var(--text-strong, var(--color-brand-dark));
    text-decoration: none;
}

.featured-card .featured-price {
    font-weight: 700;
    font-size: var(--fs-lg);
    color: var(--color-brand);
}

.featured-card p {
    margin: 0;
    color: var(--text, inherit);
    text-decoration: none;
}



/* ===== Index content sections ===== */

.section {

    max-width: var(--container);

    margin: 0 auto var(--s-12);

    padding: 0 var(--s-4);

}

.section-title {

    text-align: center;

    margin-bottom: var(--s-6);

}



.about-section p {

    max-width: 720px;

    margin: 0 auto;

    text-align: center;

    font-size: var(--fs-lg);

    color: var(--text-secondary);

}



/* ===== Business hours (Index) ===== */

.hours-grid {

    max-width: 480px;

    margin: 0 auto;

    background: var(--surface);

    border-radius: var(--r-lg);

    box-shadow: var(--shadow-sm);

    overflow: hidden;

}

.hours-row {

    display: flex;

    justify-content: space-between;

    padding: var(--s-3) var(--s-4);

    border-bottom: 1px solid var(--border);

}

.hours-row:last-child { border-bottom: 0; }

.hours-row .day { font-weight: 600; }

.hours-row .time.closed { color: var(--color-danger); }

.hours-row.is-today { background: rgba(92, 0, 17, 0.05); }



/* ===== Featured product grid (legacy index cards) ===== */

.product-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

    gap: var(--s-4);

}

.product-card {

    display: block;

    background: var(--surface);

    border-radius: var(--r-lg);

    overflow: hidden;

    text-decoration: none;

    color: inherit;

    box-shadow: var(--shadow-sm);

    transition: transform var(--dur) var(--ease);

}

.product-card:hover { transform: translateY(-2px); }

/* Item is outside its declared time window (e.g. breakfast at noon).
   Dim the card so the customer sees it's not currently orderable, and
   show the schedule text instead of the Add-to-cart button. */
.product-card--unavailable {
    opacity: 0.55;
    filter: grayscale(0.5);
}
.product-card--unavailable:hover { transform: none; }
.product-card--unavailable img { filter: grayscale(0.7); }
.product-availability-note {
    padding: 0 var(--s-4) var(--s-3);
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

.product-card img {

    width: 100%;

    aspect-ratio: 4 / 3;

    object-fit: cover;

}

.product-card h3 { padding: var(--s-3) var(--s-4); margin: 0; }



/* ===== Menu page ===== */

.menu-container { max-width: var(--container); margin: 0 auto; padding: var(--s-4); }

.menu-container > h1 { text-align: center; margin-bottom: var(--s-2); }

.menu-subtitle { text-align: center; color: var(--text-muted); margin-bottom: var(--s-8); }



.menu-category {
    margin-bottom: var(--s-8);
    background: var(--surface);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* ===== Menu toolbar (search + Expand all / Collapse all) ===== */
.menu-toolbar {
    display: flex;
    gap: var(--s-3);
    align-items: center;
    margin-bottom: var(--s-5);
    flex-wrap: wrap;
}
.menu-toolbar .menu-search {
    flex: 1;
    min-width: 12rem;
}
.menu-toolbar-btn {
    background: var(--color-brand);
    color: var(--text-inverse);
    border: 0;
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: var(--fs-sm);
    cursor: pointer;
    min-height: var(--tap-min);
    transition: background-color var(--dur-fast) var(--ease);
}
.menu-toolbar-btn:hover { background: var(--color-brand-soft); }
.menu-toolbar-btn:active { background: var(--color-brand-deep); }

.category-header {

    background: var(--color-brand);

    color: var(--text-inverse);

    padding: var(--s-4);

    margin: 0;

    font-size: var(--fs-xl);

    font-family: var(--ff-display);

    font-weight: 400;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    border-bottom: 4px solid var(--color-brand-dark);

}

.menu-items-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: var(--s-3);

    padding: var(--s-4);

}

@media (min-width: 640px) { .menu-items-grid { grid-template-columns: repeat(2, 1fr); } }

@media (min-width: 1024px) { .menu-items-grid { grid-template-columns: repeat(3, 1fr); } }



.menu-item-card {

    background: var(--bg-page);

    border-radius: var(--r-md);

    padding: var(--s-3);

}

.menu-item-header {

    display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2);

    margin-bottom: var(--s-1);

}

.menu-item-header h3 { margin: 0; font-size: var(--fs-md); }

.menu-item-price { font-weight: 700; color: var(--color-brand); white-space: nowrap; }

.menu-item-description { color: var(--text-secondary); font-size: var(--fs-sm); }

.menu-item-customizations { margin-top: var(--s-2); }

.customization-note { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

.badge-unavailable {

    background: var(--color-danger);

    color: var(--text-inverse);

    border-radius: var(--r-pill);

    padding: 2px var(--s-2);

    font-size: var(--fs-xs);

    margin-left: var(--s-2);

}



/* ===== Order page ===== */
/* Matches the Jeff's BBQ landing page: cream paper background, white
   surface cards, Bungee display headings on the category strips, red
   primary CTAs. Inter for body copy, same spacing scale as the LP. */

.order-page-container, .event-order-page {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--s-6) var(--s-4) var(--s-12);
}
.order-page-container > h1, .event-order-page > h1 {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: clamp(2rem, 5vw, 3rem);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: center;
    color: var(--color-brand);
    margin: 0 0 var(--s-3);
}
.order-subtitle { text-align: center; color: var(--text-muted); margin-bottom: var(--s-8); font-size: 1.05rem; }

.order-disabled-card {
    max-width: 600px;
    margin: var(--s-12) auto;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: var(--s-8);
    text-align: center;
    border-top: 6px solid var(--color-brand);
}
.order-disabled-card h2 {
    font-family: var(--ff-display);
    font-weight: 400;
    color: var(--color-brand-dark);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-top: 0;
}
.order-disabled-card .btn { margin-top: var(--s-4); }

.order-category-section {
    margin-bottom: var(--s-10);
    background: var(--surface);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.order-category-header {
    background: var(--color-brand);
    color: var(--text-inverse);
    padding: var(--s-4) var(--s-5);
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: var(--fs-xl);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 4px solid var(--color-brand-dark);
    /* summary is a clickable flex container — keep the title on the left
       and the toggle pill on the right. list-style:none hides the native
       disclosure marker that some browsers render. */
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
}
.order-category-header::-webkit-details-marker { display: none; }
.order-category-name { flex: 1; min-width: 0; }
.order-category-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    color: var(--text-inverse);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
    transition: transform var(--dur) var(--ease), background-color var(--dur-fast) var(--ease);
}
.order-category-toggle::after { content: '+'; }
.order-category-section[open] > .order-category-header .order-category-toggle {
    background: rgba(255, 255, 255, 0.12);
}
.order-category-section[open] > .order-category-header .order-category-toggle::after {
    content: '\2212'; /* minus sign when expanded */
}

.order-category-section .product-grid {
    padding: var(--s-5);
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.product-card {
    background: var(--surface);
    border: 1px solid var(--border);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-brand);
}

.product-card button {
    margin: 0 var(--s-3) var(--s-3);
    width: calc(100% - var(--s-6));
    background: var(--color-brand);
    color: var(--text-inverse);
    border: 0;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-pill);
    min-height: var(--tap-min);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease);
}
.product-card button:hover { background: var(--color-brand-soft); }

.product-description { color: var(--text-secondary); font-size: var(--fs-sm); padding: 0 var(--s-3); }
.product-price { color: var(--color-brand); font-weight: 700; padding: 0 var(--s-3); }
.product-card h3 {
    font-family: var(--ff-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-brand-dark);
    padding: var(--s-3) var(--s-4) var(--s-2);
    margin: 0;
    font-size: var(--fs-md);
}



/* ===== Cart (in-page) ===== */

.cart-container {

    max-width: 600px;

    margin: var(--s-8) auto 0;

    background: var(--surface);

    border-radius: var(--r-lg);

    box-shadow: var(--shadow-md);

    padding: var(--s-5);

}

.cart-container h3 { margin-bottom: var(--s-3); }

.cart-item {

    display: flex;

    align-items: center;

    gap: var(--s-3);

    padding: var(--s-3) 0;

    border-bottom: 1px solid var(--border);

}

.cart-item:last-of-type { border-bottom: 0; }

.cart-name { flex: 1; min-width: 0; }

.cart-item-mods { font-size: var(--fs-sm); color: var(--text-muted); }

.cart-item-notes { font-size: var(--fs-sm); color: var(--color-warn); background: #FEF3C7; padding: 2px 6px; border-radius: var(--r-sm); margin-top: 2px; display: inline-block; }

.qty-controls { display: flex; align-items: center; gap: var(--s-1); }

.qty-controls button {

    width: 32px; height: 32px;

    background: var(--border); border: 0; border-radius: var(--r-sm);

    font-weight: 700; cursor: pointer;

}

.qty-controls button:hover { background: var(--border-strong); }

.qty-controls span { min-width: 24px; text-align: center; font-weight: 600; }

.cart-price { font-weight: 700; min-width: 64px; text-align: right; }

.cart-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4); }

.checkout-stub-btn { width: 100%; margin-top: var(--s-3); }

.checkout-note { font-size: var(--fs-sm); color: var(--text-muted); text-align: center; margin-top: var(--s-2); }



/* ===== Sticky cart bar ===== */

.sticky-cart {

    position: fixed;

    left: 0; right: 0; bottom: 0;

    background: var(--color-brand);

    color: var(--text-inverse);

    padding: var(--s-3) var(--s-4);

    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);

    display: none;

    align-items: center;

    justify-content: space-between;

    gap: var(--s-3);

    z-index: 90;

}

.sticky-cart.is-visible { display: flex; }

.sticky-cart-info { font-weight: 600; }

.sticky-cart .btn { background: var(--text-inverse); color: var(--color-brand); border-color: var(--text-inverse); }

.sticky-cart .btn:hover { background: var(--color-accent); color: var(--color-brand-dark); border-color: var(--color-accent); }



@media (min-width: 1024px) {

    /* Desktop: floating action button instead of bottom bar */

    .sticky-cart {

        position: fixed;

        left: auto;

        right: var(--s-6);

        bottom: var(--s-6);

        border-radius: var(--r-pill);

        padding: var(--s-3) var(--s-5);

        max-width: 320px;

    }

}



/* ===== Modal ===== */

.modal {

    display: none;

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.6);

    z-index: 200;

    align-items: center;

    justify-content: center;

    padding: var(--s-4);

}

.modal.is-open { display: flex; }

.modal-content {

    background: var(--surface);

    border-radius: var(--r-lg);

    max-width: 500px;

    width: 100%;

    max-height: 90vh;

    overflow: auto;

    padding: var(--s-5);

    position: relative;

}

.modal-content .close {

    position: absolute;

    top: var(--s-2);

    right: var(--s-3);

    background: transparent;

    border: 0;

    font-size: var(--fs-2xl);

    cursor: pointer;

    width: var(--tap-min);

    height: var(--tap-min);

    line-height: 1;

}

.customization-group { margin-bottom: var(--s-4); }

.customization-group h4 { margin-bottom: var(--s-2); }

.customization-option { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) 0; }

.customization-option .price-modifier { color: var(--text-muted); font-size: var(--fs-sm); margin-left: auto; }

.modal-footer { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); }

.modal-footer p { font-weight: 600; }



/* ===== EventOrder page ===== */

.event-address {

    background: var(--color-brand);

    color: var(--text-inverse);

    padding: var(--s-6) var(--s-4);

    text-align: center;

    border-radius: 0 0 var(--r-lg) var(--r-lg);

    margin-bottom: var(--s-4);

    border-top: 4px solid var(--color-brand-dark);

}

.event-address h1 { color: var(--text-inverse); }

.event-address-text { font-size: var(--fs-lg); }

.event-map iframe { width: 100%; height: 320px; border: 0; border-radius: var(--r-md); }

.event-map-placeholder {

    background: var(--border);

    color: var(--text-muted);

    padding: var(--s-12) var(--s-4);

    text-align: center;

    border-radius: var(--r-md);

}

.event-order-section { margin-top: var(--s-8); }



/* ===== Contact ===== */

.contact-page {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--s-8) var(--s-5) var(--s-12);
}

/* Flash banners above the form */
.contact-flash {
    margin: 0 auto var(--s-6);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.contact-flash--success {
    border-color: var(--color-success);
    background: rgba(22, 163, 74, 0.06);
    color: var(--color-success);
}
.contact-flash--error {
    border-color: var(--color-danger);
    background: rgba(179, 32, 26, 0.06);
    color: var(--color-danger);
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-6);
    align-items: start;
}
@media (min-width: 768px) {
    .contact-layout {
        grid-template-columns: 1.4fr 1fr;
        gap: var(--s-8);
    }
}

/* Form card */
.contact-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: var(--s-6);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}
.contact-form-title {
    margin: 0 0 var(--s-2);
    font-family: var(--ff-display);
    font-size: var(--fs-lg);
    color: var(--color-brand);
    line-height: var(--lh-tight);
}
.contact-form .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.contact-form .form-group label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-primary);
}
.contact-form .form-group .muted {
    font-weight: 400;
    color: var(--text-muted);
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: var(--s-3);
    font: inherit;
    font-size: var(--fs-md);
    color: var(--text-primary);
    background: var(--bg-page);
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
    min-height: var(--tap-min);
}
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-brand);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(179, 32, 26, 0.15);
}
.contact-form textarea {
    resize: vertical;
    min-height: 8rem;
    font-family: inherit;
}
.contact-form input:invalid:not(:placeholder-shown),
.contact-form textarea:invalid:not(:placeholder-shown) {
    border-color: var(--color-danger);
}
.contact-validation {
    color: var(--color-danger);
    font-size: var(--fs-sm);
    min-height: 1.2em;
}
.contact-form .btn-submit {
    background: var(--color-brand);
    color: var(--text-inverse);
    border: 0;
    padding: var(--s-3) var(--s-6);
    border-radius: var(--r-md);
    font-weight: 700;
    font-size: var(--fs-md);
    cursor: pointer;
    min-height: var(--tap-min);
    align-self: flex-start;
    transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.contact-form .btn-submit:hover {
    background: var(--color-brand-soft);
    transform: translateY(-1px);
}
.contact-form .btn-submit:active {
    background: var(--color-brand-deep);
    transform: translateY(0);
}

/* Info card on the right */
.contact-info {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.contact-info h3 {
    margin: 0;
    font-family: var(--ff-display);
    font-size: var(--fs-lg);
    color: var(--color-brand);
    line-height: var(--lh-tight);
}
.contact-info h4 {
    margin: var(--s-3) 0 0;
    font-size: var(--fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.contact-info-name {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--text-primary);
}
.contact-info-address {
    margin: 0;
    font-style: normal;
    color: var(--text-secondary);
    line-height: var(--lh-base);
}
.contact-info-row {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.contact-info-label {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.contact-info-row a {
    color: var(--color-brand);
    text-decoration: none;
    font-weight: 600;
}
.contact-info-row a:hover { text-decoration: underline; }
.contact-info-hours {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--fs-sm);
}
.contact-info-hours li {
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    padding: 2px 0;
    border-bottom: 1px solid var(--border);
}
.contact-info-hours li:last-child { border-bottom: 0; }
.contact-info-day { font-weight: 600; }
.contact-map {
    width: 100%;
    height: 14rem;
    border: 0;
    border-radius: var(--r-md);
    margin-top: var(--s-2);
    background: var(--bg-page);
}



/* ===== Confirmation ===== */

.confirmation-container {

    max-width: 600px; margin: var(--s-12) auto; padding: var(--s-6);

    text-align: center;

    background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-md);

}

.confirmation-lead { font-size: var(--fs-lg); margin-bottom: var(--s-4); }



/* ===== Footer ===== */

.site-footer {

    background: var(--color-brand-dark);

    color: var(--text-inverse);

    padding: var(--s-8) var(--s-4) var(--s-6);

    margin-top: var(--s-12);

}

.site-footer-inner {

    max-width: var(--container);

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr;

    gap: var(--s-6);

}

@media (min-width: 768px) { .site-footer-inner { grid-template-columns: 2fr 1fr 1fr; } }

.site-footer h4 {

    color: var(--text-inverse);

    font-size: var(--fs-md);

    text-transform: uppercase;

    letter-spacing: 0.05em;

    margin-bottom: var(--s-3);

}

.site-footer p, .site-footer a { color: var(--text-inverse); margin-bottom: var(--s-1); }

.site-footer a { text-decoration: none; opacity: 0.85; }

.site-footer a:hover { opacity: 1; text-decoration: underline; }

.site-footer-bottom {

    text-align: center;

    padding-top: var(--s-6);

    margin-top: var(--s-6);

    border-top: 1px solid rgba(255, 255, 255, 0.15);

    font-size: var(--fs-sm);

    opacity: 0.7;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: center;

    gap: var(--s-3);

}

.site-footer-legal {

    display: inline-flex;

    align-items: center;

    gap: var(--s-2);

    opacity: 0.85;

}

.site-footer-legal a { color: var(--text-inverse); }

.site-footer-legal-sep { opacity: 0.6; }

.site-footer-hours { font-size: var(--fs-sm); }

.site-footer-hours-row { display: flex; justify-content: space-between; padding: 2px 0; }

.site-footer-hours-row.is-today { font-weight: 700; }

.site-footer-hours-row .closed { color: var(--color-danger); }

/* ===== Menu search + collapsible categories ===== */

.menu-toolbar { margin-bottom: var(--s-5); }

.menu-search {

    width: 100%;

    padding: var(--s-3) var(--s-4);

    border: 2px solid var(--border-strong);

    border-radius: var(--r-pill);

    background: var(--surface);

    font-size: var(--fs-md);

}

.menu-search:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(92,0,17,0.1); }

.menu-category { transition: box-shadow var(--dur) var(--ease); }

.category-header {

    display: flex; justify-content: space-between; align-items: center;

    cursor: pointer; list-style: none; user-select: none;

}

.category-header::-webkit-details-marker { display: none; }

.category-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    color: var(--text-inverse);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
    transition: transform var(--dur) var(--ease), background-color var(--dur-fast) var(--ease);
}
.category-toggle::after {
    content: '+'; /* collapsed */
}
.menu-category[open] > .category-header .category-toggle {
    background: rgba(255, 255, 255, 0.12);
}
.menu-category[open] > .category-header .category-toggle::after {
    content: '\2212'; /* minus sign when expanded */
}

@media (max-width: 600px) {

    .menu-category { margin-bottom: var(--s-3); }

    .menu-items-grid { padding: var(--s-3); }

}



/* ===== Menu inline add-to-cart ===== */

.menu-add-btn {

    margin-top: var(--s-3);

    background: var(--color-brand);

    color: var(--text-inverse);

    border: 0;

    padding: var(--s-2) var(--s-4);

    border-radius: var(--r-md);

    min-height: var(--tap-min);

    font-weight: 600;

    cursor: pointer;

    transition: background var(--dur-fast) var(--ease);

}

.menu-add-btn:hover { background: var(--color-brand-soft); }



/* ===== Customer info block on /Order and /EventOrder ===== */
.customer-info {
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    padding: 1rem 1.25rem 1.25rem;
    margin: 1.25rem 0;
    max-width: 480px;
}
.customer-info h3 {
    margin: 0 0 .25rem;
    font-size: 1.1rem;
    color: var(--text-primary, #111827);
}
.customer-info p.muted {
    margin: 0 0 .75rem;
    font-size: .9rem;
}
.customer-info label {
    display: block;
    margin: .5rem 0;
    font-weight: 500;
    color: var(--text-primary, #111827);
}
.customer-info input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: .25rem;
    padding: .55rem .7rem;
    border: 2px solid var(--border, #d1d5db);
    border-radius: 6px;
    font-size: 1rem;
    background: #fff;
    color: var(--text-primary, #111827);
}
.customer-info input:focus {
    outline: none;
    border-color: var(--color-info, #3b82f6);
}
.customer-info input:invalid:not(:placeholder-shown) {
    border-color: #dc2626;
}


/* ===== Payment-method selector on /Order and /EventOrder ===== */
.payment-method {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    padding: .75rem 1rem 1rem;
    margin: 1rem 0;
    background: #fff;
}
.payment-method legend {
    font-weight: 600;
    padding: 0 .35rem;
    color: var(--text-primary, #111827);
}
.payment-option {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .85rem;
    margin: .5rem 0;
    border: 2px solid var(--border, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
    min-height: 56px;
}
.payment-option:hover {
    border-color: var(--color-info, #3b82f6);
    background: #f8fafc;
}
.payment-option input[type="radio"] {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--color-info, #3b82f6);
}
.payment-option:has(input:checked) {
    border-color: var(--color-info, #3b82f6);
    background: #eff6ff;
}
.payment-option-cash:has(input:checked) {
    border-color: #dc2626;
    background: #fef2f2;
}
.payment-option-label {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    color: var(--text-primary, #111827);
}
.payment-option-label small {
    font-weight: 400;
    font-size: .85rem;
    color: var(--text-secondary, #6b7280);
}
.payment-disabled-note {
    margin: .75rem 0 .25rem;
    font-size: .9rem;
    color: #92400e;
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    padding: .5rem .75rem;
    border-radius: 4px;
}


/* ===== Customize-modal modifier buttons =====
   Used on /Order, /EventOrder, and /Kitchen/Pos. Lives in site.css (not
   kitchen.css) because /Order and /EventOrder don't load kitchen.css.
   Color values are literal, not CSS variables, so they render correctly
   regardless of whether .pos-scope is in the ancestor chain. */
.customization-option-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 56px;
    padding: 0.75rem 1rem;
    background: #f8f4ed;
    border: 2px solid transparent;
    border-radius: 8px;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    color: #111827;
    font-weight: 500;
    transition: border-color 120ms ease, background-color 120ms ease;
}
.customization-option-btn:hover {
    border-color: #2563EB;
    background: rgba(37, 99, 235, 0.10);
}
.customization-option-btn:active {
    transform: scale(0.99);
}
.customization-option-btn.is-selected {
    border-color: #2563EB;
    background: rgba(37, 99, 235, 0.10);
    color: #2563EB;
    font-weight: 600;
}
.customization-option-btn .opt-label {
    flex: 1;
}
.customization-option-btn .price-modifier {
    color: #6B7280;
    font-size: 0.9rem;
    font-weight: 500;
}
.customization-option-btn.is-selected .price-modifier {
    color: #2563EB;
}

/* Quantity picker: +/- counter with the unit price displayed beside it. */
.quantity-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f8f4ed;
    border-radius: 8px;
    min-height: 56px;
}
.quantity-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
    color: #111827;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.quantity-btn:hover:not(:disabled) {
    border-color: #2563EB;
    color: #2563EB;
}
.quantity-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.quantity-display {
    min-width: 28px;
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
    color: #111827;
}
.quantity-price {
    margin-left: auto;
    color: #6B7280;
    font-size: 0.9rem;
    font-weight: 500;
}

/* ===== Cart totals breakdown ===== */
.cart-totals { width: 100%; margin-top: var(--s-3); border-collapse: collapse; }
.cart-totals td { padding: 0.25rem 0; }
.cart-totals td.num { text-align: right; padding-left: var(--s-3); font-variant-numeric: tabular-nums; }
.cart-totals .cart-grand-total td { font-weight: 700; font-size: var(--fs-lg); border-top: 1px solid var(--border); padding-top: var(--s-2); margin-top: var(--s-1); }
.modal-tax-note { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

/* ========================================================================
   Jeff's BBQ landing page
   Order: hero, about, photo band, menu band, marquee, dining band,
          photo band, reviews band.
   Palette comes from tokens.css: brand red #B3201A, brand-dark #1A1A1A,
   page bg #F6F1E8, text #1A1A1A. Display = Bungee, body = Inter.
   ======================================================================== */

/* The hero replaces the standard full-bleed photo with a dark truck.
   It needs to extend from below the sticky header to its own natural
   height, with the image filling the entire section. */
.lp-hero {
    position: relative;
    width: 100%;
    min-height: 90vh;
    overflow: hidden;
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}
.lp-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}
/* Subtle darkening so white text stays readable on the truck photo. */
.lp-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0,0,0,.45) 0%,
        rgba(0,0,0,.15) 30%,
        rgba(0,0,0,.15) 70%,
        rgba(0,0,0,.55) 100%);
    z-index: 1;
}
.lp-hero-content {
    position: relative;
    z-index: 2;
    width: min(100%, 1100px);
    padding: var(--s-12) var(--s-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-12);
    text-align: center;
}
.lp-hero-pill-row { width: 100%; display: flex; justify-content: center; }
.lp-hero-cta-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-4);
    margin-top: 25vh; /* push down so the two pills sit in the lower third of the photo */
}
@media (min-width: 640px) {
    .lp-hero-cta-row { flex-direction: row; justify-content: center; gap: var(--s-5); }
}

/* About section - cream paper background, red display heading, red body. */
.lp-about {
    background: var(--bg-page);
    color: var(--color-brand);
    padding: var(--s-12) var(--s-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s-4);
}
.lp-sparkle {
    /* CSS-only sparkle: a thin plus sign rendered with pseudo-elements
       (no glyph, no emoji). The container is the same square size the
       old glyph used to take, so surrounding spacing is unchanged. */
    display: inline-block;
    position: relative;
    width: 1rem;
    height: 1rem;
    color: inherit;
    margin-bottom: var(--s-2);
}
.lp-sparkle::before,
.lp-sparkle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
}
.lp-sparkle::before { width: 100%; height: 1.5px; }
.lp-sparkle::after  { width: 1.5px; height: 100%; }
.lp-section-title {
    font-family: var(--ff-display);
    font-weight: 400; /* Bungee only has one weight */
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0;
}
.lp-section-title--red  { color: var(--color-brand); }
.lp-section-title--light { color: #fff; }

.lp-section-body {
    font-family: var(--ff-sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    max-width: 60ch;
    margin: 0;
}
.lp-section-body--red   { color: var(--color-brand); }
.lp-section-body--light { color: #fff; }

.lp-section-attribution {
    font-family: var(--ff-sans);
    font-size: 0.95rem;
    font-style: italic;
    color: #fff;
    opacity: 0.85;
    margin: 0;
}

/* Full-bleed photo bands - no padding, image fills the section. */
.lp-band { width: 100%; }
.lp-band--photo { line-height: 0; background: #000; }
.lp-band--photo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 90vh;
    object-fit: cover;
}

/* Solid color bands (Our Menu = red, Dining Options = black, Reviews = red).
   Centered content, generous padding, no max-width on the section. */
.lp-band--red,
.lp-band--black {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--s-16) var(--s-5);
    gap: var(--s-4);
}
.lp-band--red   { background: var(--color-brand); }
.lp-band--black { background: var(--color-brand-dark); }
.lp-band--tall  { padding-block: var(--s-16); }

/* Cream band (Featured items): light surface with the same vertical rhythm
   as the other bands, so the page reads as a stack of color blocks. */
.lp-band--cream {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--s-16) var(--s-5);
    gap: var(--s-5);
    background: var(--surface);
    color: var(--text);
}
.lp-band--cream .lp-section-title { color: var(--color-brand); }

/* "View the full menu" pill on the red menu band. Same outline pill
   used in the hero, but here it sits inside a red section so it picks
   up the white stroke without the red background fill. */
.lp-menu-cta { margin-top: var(--s-3); }

/* Featured items grid. Three columns on desktop, two on tablet,
   one on phone. Each card has a square image, name, description, and
   price — no "Add to cart" button because the customer should
   browse, then click into /Menu to actually order. */
.lp-featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--s-4);
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
}
.lp-featured-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    text-align: left;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.lp-featured-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.lp-featured-img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.lp-featured-body { padding: var(--s-4); }
.lp-featured-name {
    margin: 0 0 var(--s-2);
    font-family: var(--ff-display);
    font-size: 1.25rem;
    color: var(--color-brand-dark);
    line-height: 1.2;
}
.lp-featured-desc {
    margin: 0 0 var(--s-3);
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.4;
    /* Clamp to three lines so cards stay even-height. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lp-featured-price {
    margin: 0;
    font-family: var(--ff-display);
    font-size: 1.1rem;
    color: var(--color-brand);
}

/* Pill buttons used across the landing page. */
.lp-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.625rem 1.75rem;
    font-family: var(--ff-sans);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    border-radius: var(--r-pill);
    border: 2px solid transparent;
    transition: background-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
    cursor: pointer;
    line-height: 1;
}
.lp-pill--white {
    background: #fff;
    color: var(--color-brand-dark);
    border-color: #fff;
    text-transform: uppercase;
    min-width: 220px;
}
.lp-pill--white:hover { background: #f3f3f3; }

.lp-pill--outline {
    background: transparent;
    color: #fff;
    border-color: #fff;
    text-transform: uppercase;
    min-width: 180px;
}
.lp-pill--outline:hover {
    background: rgba(255, 255, 255, 0.12);
}

.lp-pill--outline-red {
    background: transparent;
    color: var(--color-brand);
    border-color: var(--color-brand);
    text-transform: capitalize;
}
.lp-pill--outline-red:hover { background: rgba(179, 32, 26, 0.08); }

.lp-pill--dark {
    background: var(--color-brand-dark);
    color: #fff;
    border-color: var(--color-brand-dark);
    text-transform: capitalize;
}
.lp-pill--dark:hover { background: #000; }

/* Marquee strip - CSS-only infinite horizontal scroll. Pauses on hover.
   Respects prefers-reduced-motion (handled via the global rule in tokens.css). */
.lp-marquee {
    overflow: hidden;
    background: #fff;
    color: var(--color-brand);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: var(--s-3) 0;
    width: 100%;
}
.lp-marquee-track {
    display: inline-flex;
    white-space: nowrap;
    /* No gap here — items carry their own margin-right so the track width
       is exactly N * (item width + margin), which is a clean multiple of
       the duplicated content and makes the -50% loop perfectly seamless. */
    animation: lp-marquee-scroll 28s linear infinite;
    will-change: transform;
}
.lp-marquee:hover .lp-marquee-track { animation-play-state: paused; }
.lp-marquee-item {
    font-family: var(--ff-display);
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: var(--s-8);
    padding-right: var(--s-8);
    flex-shrink: 0;
}
.lp-marquee-star {
    /* CSS-only sparkle: a thin rotated plus sign. No glyph, no emoji. */
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    position: relative;
    color: inherit;
}
.lp-marquee-star::before,
.lp-marquee-star::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
}
.lp-marquee-star::before { width: 100%; height: 1.5px; }
.lp-marquee-star::after  { width: 1.5px; height: 100%; }
@keyframes lp-marquee-scroll {
    /* Animate by exactly half the track width. The track contains
       two identical copies of the same content back-to-back, so
       -50% lands pixel-perfectly on the start of copy 2 — the reset
       is invisible and the loop is seamless. */
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Mobile adjustments - shrink hero minimum and tighten padding. */
@media (max-width: 640px) {
    .lp-hero { min-height: 80vh; }
    .lp-hero-cta-row { margin-top: 30vh; }
    .lp-band--red,
    .lp-band--black { padding-block: var(--s-12); }
}

/* ===== Reviews carousel ===== */
.lp-carousel {
    width: 100%;
    max-width: 56rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-5);
}
.lp-carousel-viewport {
    position: relative;
    width: 100%;
    min-height: 12rem;
}
.lp-carousel-slide {
    display: none;
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    animation: lp-carousel-fade 320ms var(--ease);
}
.lp-carousel-slide.is-active { display: flex; }
.lp-carousel-slide[hidden] { display: none; }
@keyframes lp-carousel-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lp-carousel-stars {
    display: inline-flex;
    gap: 0.3rem;
    line-height: 1;
    vertical-align: middle;
}
.lp-carousel-star {
    /* CSS-only 5-pointed rating star, no glyph, no emoji. We draw a
       square and clip it to a 5-pointed star polygon. The "off" state
       is the same shape, just outlined instead of filled, so the
       rating is visually obvious at typical sizes. */
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    background: #fff;
}
.lp-carousel-star--on {
    background: #fff;
}
.lp-carousel-star:not(.lp-carousel-star--on) {
    background: transparent;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.lp-carousel-quote {
    font-style: italic;
}
.lp-carousel-dots {
    display: inline-flex;
    gap: 0.5rem;
    margin-top: var(--s-2);
}
.lp-carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease);
}
.lp-carousel-dot.is-active,
.lp-carousel-dot:hover {
    background: #fff;
}
@media (prefers-reduced-motion: reduce) {
    .lp-carousel-slide { animation: none; }
}

/* ===== Tip selector (added for tip flow) ===== */
.tip-section {
    margin: var(--s-4) 0 var(--s-5);
    padding: var(--s-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
}
.tip-label {
    display: block;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--s-1);
    font-size: var(--fs-md);
}
.tip-help {
    margin: 0 0 var(--s-3) 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}
.tip-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    align-items: center;
}
.tip-pct-btn {
    flex: 0 0 auto;
    min-width: 72px;
    min-height: var(--tap-min);
    padding: var(--s-2) var(--s-3);
    background: var(--surface);
    border: 2px solid var(--border-strong);
    border-radius: var(--r-md);
    color: var(--text-primary);
    font: 600 var(--fs-md) / 1.2 var(--ff-sans);
    cursor: pointer;
    transition: background var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.tip-pct-btn:hover {
    background: var(--bg-page);
    border-color: var(--color-brand);
}
.tip-pct-btn:active { transform: scale(0.97); }
.tip-pct-btn.is-selected {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--text-inverse);
    box-shadow: var(--shadow-sm);
}
.tip-pct-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.tip-other-wrap {
    flex: 1 1 120px;
    min-width: 120px;
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.tip-other-wrap > .tip-custom-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--tap-min);
    padding: var(--s-2) var(--s-3);
    border: 2px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text-primary);
    font: 600 var(--fs-md) / 1.2 var(--ff-sans);
}
.tip-other-wrap > .tip-custom-input:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-color: var(--color-brand);
}
#tipLine.tip-line {
    /* tip amount row in the cart-totals table */
}


/* ===== Future-order picker (customer Order page) ===== */
.future-order-picker {
    border: 1px solid var(--border, #d6d6d6);
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    background: #fffefb;
}
.future-order-picker[data-picker-mode="future-only"] {
    background: #fff8e1; /* yellow-tinted to call attention when the store is closed */
    border-color: #d4a017;
}
.future-order-picker .future-order-heading {
    margin: 0 0 8px;
    color: #5b4500;
    font-size: 1.05rem;
}
.future-order-picker .future-order-heading + p.muted {
    margin-top: 0;
}
#futureOrderConfirm {
    margin-top: 12px;
    padding: 10px 14px;
    background: #fef3c7;
    border: 1px solid #d4a017;
    border-radius: 999px; /* pill shape to match the restock banner */
    color: #5b4500;
    font-size: 0.95rem;
    text-align: center;
}
#futureOrderConfirm strong {
    font-weight: 600;
}

/* ===== Closed-store future-order checkout ===== */
.future-only-checkout {
    border: 1px solid #d4a017;
    border-radius: 8px;
    padding: 16px;
    margin-top: 12px;
    background: #fffefb;
}

/* ===== Settings page: dollar-prefixed input ===== */
.dollar-prefix {
    display: inline-block;
    margin-right: 6px;
    color: #555;
    font-weight: 600;
}
.dollar-prefix + input[type="number"] {
    display: inline-block;
    width: 110px;
}


/* ===== Order cap warning (cart over the operator's configured cap) ===== */
.order-cap-warning {
    margin: 8px 0 12px;
    padding: 10px 14px;
    background: #fee2e2; /* red-100 */
    border: 1px solid #ef4444; /* red-500 */
    border-radius: 6px;
    color: #991b1b; /* red-800 */
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
}
.order-cap-warning[role="alert"]::before {
    content: "⚠ ";
    margin-right: 4px;
    font-weight: 700;
}


/* ===== Legal pages (Privacy Policy, Terms of Service) =====
   Narrow reading column on the cream page surface, charcoal text,
   brand red accents. Reuses the lp-band--red hero so the page top
   reads as part of the same site chrome. */

.legal-page {
    background: var(--bg-page);
    padding: var(--s-10) var(--s-4) var(--s-16);
}

.legal-container {
    max-width: var(--container-narrow, 720px);
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--s-8) var(--s-8) var(--s-10);
}

.legal-container > * + * {
    margin-top: var(--s-5);
}

.legal-lead {
    font-size: 1.0625rem;
    line-height: var(--lh-base);
    color: var(--text-primary);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--border);
}

.legal-toc {
    background: #FAF6EC;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--s-4) var(--s-5);
}

.legal-toc-title {
    font-family: var(--ff-display);
    font-weight: 400;
    color: var(--color-brand);
    font-size: 1.05rem;
    margin: 0 0 var(--s-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.legal-toc ol {
    list-style: decimal;
    padding-left: 1.25rem;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-1) var(--s-4);
}

.legal-toc a {
    color: var(--text-primary);
    text-decoration: none;
    font-size: var(--fs-sm);
    line-height: 1.4;
}

.legal-toc a:hover,
.legal-toc a:focus-visible {
    color: var(--color-brand);
    text-decoration: underline;
}

.legal-section {
    padding-top: var(--s-5);
    border-top: 1px solid var(--border);
}

.legal-section h2 {
    font-family: var(--ff-display);
    font-weight: 400;
    color: var(--color-brand);
    font-size: 1.4rem;
    margin: 0 0 var(--s-3);
    line-height: var(--lh-tight);
}

.legal-section h2::before {
    content: "";
    display: block;
    width: 32px;
    height: 3px;
    background: var(--color-brand);
    margin-bottom: var(--s-2);
    border-radius: 2px;
}

.legal-section p,
.legal-section li {
    color: var(--text-primary);
    line-height: var(--lh-base);
    font-size: 1rem;
    margin: 0 0 var(--s-3);
}

.legal-section ul {
    padding-left: 1.25rem;
    margin: 0 0 var(--s-3);
}

.legal-section ul li {
    margin-bottom: var(--s-1);
}

.legal-section strong {
    color: var(--text-primary);
    font-weight: 700;
}

.legal-section a {
    color: var(--color-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-section a:hover,
.legal-section a:focus-visible {
    color: var(--color-brand-deep);
}

.legal-contact {
    list-style: none;
    padding-left: 0;
}

.legal-contact li {
    padding: var(--s-1) 0;
    border-bottom: 1px dashed var(--border);
}

.legal-contact li:last-child {
    border-bottom: 0;
}

.legal-effective {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-align: center;
    margin: 0;
}

.legal-effective--bottom {
    margin-top: var(--s-6);
    padding-top: var(--s-4);
    border-top: 1px solid var(--border);
}

.legal-questions {
    text-align: center;
    margin-top: var(--s-4);
    font-size: var(--fs-sm);
}

.legal-questions a {
    color: var(--color-brand);
    font-weight: 600;
    text-decoration: none;
}

.legal-questions a:hover,
.legal-questions a:focus-visible {
    text-decoration: underline;
}

/* Hero band shared by both legal pages. Slightly less vertical padding
   than the contact hero so the policy page reads as a tight unit. */
.lp-legal-hero {
    padding-block: var(--s-10);
    gap: var(--s-3);
    text-align: center;
}

.lp-legal-hero .lp-section-title--light {
    margin: 0;
}

.lp-legal-effective {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--fs-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
}

@media (max-width: 540px) {
    .legal-container {
        padding: var(--s-5);
    }
    .legal-toc ol {
        grid-template-columns: 1fr;
    }
}