/* ===== 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: 0 2px 8px rgba(99, 102, 241, 0.25);
}
.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 — matches admin's premium indigo gradient. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-min, 44px);
    padding: 0.65rem 1.25rem;
    background: linear-gradient(135deg, var(--color-brand, #6366F1) 0%, var(--color-brand-mid, #14B8A6) 100%);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    box-shadow: 0 1px 2px rgba(99, 102, 241, 0.18);
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.28);
    filter: brightness(1.05);
}
.btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(99, 102, 241, 0.2); }
.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); }

.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);

}

.category-header {

    background: linear-gradient(135deg, var(--color-brand), var(--color-brand-dark));

    color: var(--text-inverse);

    padding: var(--s-4);

    margin: 0;

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

}

.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 ===== */

.order-page-container, .event-order-page { max-width: var(--container); margin: 0 auto; padding: var(--s-4); }

.order-page-container > h1, .event-order-page > h1 { text-align: center; }

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



.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;

}

.order-disabled-card h2 { color: var(--color-warn); }

.order-disabled-card .btn { margin-top: var(--s-4); }



.order-category-section {

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

    background: var(--surface);

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

    overflow: hidden;

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

}

.order-category-header {

    background: linear-gradient(135deg, var(--color-brand), var(--color-brand-dark));

    color: var(--text-inverse);

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

    margin: 0;

}



.order-category-section .product-grid {

    padding: var(--s-4);

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

}



.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-md);

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

    font-weight: 600;

    cursor: pointer;

    transition: background 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); }



/* ===== 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); }

/* Optional per-group image (e.g. the Sweetness Level thermometer). Renders
   between the header and the option buttons so the customer sees the
   visual reference before picking. Constrained so it never overflows the
   modal on phones, and centered because it's not data, just a legend. */
.modifier-group-image {
    display: block;
    max-width: 100%;
    max-height: 240px;
    margin: 0 auto var(--s-3) auto;
    border-radius: var(--s-2);
    object-fit: contain;
}

/* Vertical slider for the Sweetness Level group. One-off — only triggered
   when group.sliderMode === "Vertical". The meter image (if any) sits
   to the LEFT of the slider, the percentage tick labels in the middle,
   and the slider track on the right. On narrow screens the three
   stack vertically so the meter never blows the modal width. */
.vertical-slider-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    margin: var(--s-3) 0;
    height: 220px;
    width: 100%;
}

/* Meter image on the left of the wrap. The inner <img> scales to fit
   the meter column while keeping its aspect ratio. */
.vertical-slider-meter {
    flex: 1 1 auto;
    max-width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.vertical-slider-meter img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: var(--s-2);
    object-fit: contain;
}

/* Tick labels in the middle column. Right-aligned to the slider. */
.vertical-slider-ticks {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1;
    user-select: none;
    height: 100%;
    padding: 2px 0;
    flex: 0 0 auto;
}

.vertical-slider-tick {
    transition: color 120ms ease, font-weight 120ms ease;
}

.vertical-slider-tick.is-active {
    color: var(--brand, #5C0011);
    font-weight: 700;
}

/* Slider column on the right. */
.vertical-slider-col {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex: 0 0 auto;
}

/* Native vertical range slider. appearance: slider-vertical is the
   standardized WebKit/Blink form; writing-mode: vertical-lr is the Firefox
   fallback. Without one of these, the input renders horizontally. */
.vertical-slider {
    -webkit-appearance: slider-vertical;
    -moz-appearance: none;
    writing-mode: vertical-lr;        /* Firefox */
    direction: rtl;                   /* WebKit quirk for vertical */
    width: 32px;
    height: 100%;
    cursor: pointer;
    background: transparent;
}

.vertical-slider-label {
    text-align: center;
    font-size: var(--fs-lg);
    font-weight: 600;
    margin-top: var(--s-2);
    color: var(--brand, #5C0011);
}

/* On narrow screens (mobile), stack the meter above the slider. The
   slider sits centered horizontally beneath the image. The tick labels
   are hidden because there's no clean way to position them on a narrow
   screen; the live label below the slider shows the current percentage.
   Order on mobile:
     | meter image (full width)              |
     | <centered vertical slider>            |
     | <large "50% Sweet" label below>       |
*/
@media (max-width: 600px) {
    .vertical-slider-wrap {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: auto;
        gap: var(--s-2);
    }
    .vertical-slider-meter {
        max-width: 100%;
        margin: 0 auto;
        height: auto;
    }
    .vertical-slider-meter img {
        max-height: 180px;
        height: auto;
    }
    .vertical-slider-ticks {
        display: none;
    }
    .vertical-slider-col {
        align-self: center;
        height: 220px;
    }
    .vertical-slider-label {
        text-align: center;
    }
}

/* PickN counter: shows "0 of 2 selected" next to the group header so the
   customer knows how many more picks they need. Sits inline with the h4 via
   the .customization-group > h4 + .pick-n-counter adjacency, but is appended
   to the groupDiv in cart.js so it lives on its own line. */
.pick-n-counter {
    display: inline-block;
    margin-left: var(--s-2);
    font-size: var(--fs-sm);
    font-weight: normal;
    color: var(--text-muted);
}

/* The button row uses the same .customization-option-btn styling as
   Single/Multi groups; PickN is just a different click handler. The cap
   at N is enforced in cart.js; this rule gives the cap-reached state a
   visual hint by dimming unselected options. */
.customization-buttons[data-selection-type="pickN"] .customization-option-btn {
    /* Same shape as Multi; nothing extra needed today. The (N of M) counter
       on the header is the primary indicator. */
}

.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: linear-gradient(135deg, var(--color-brand), var(--color-brand-dark));

    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);

}

.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-layout {

    display: grid;

    grid-template-columns: 1fr;

    gap: var(--s-6);

    max-width: var(--container);

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

}

@media (min-width: 768px) { .contact-layout { grid-template-columns: 1fr 1fr; } }

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

.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: 600; cursor: pointer; min-height: var(--tap-min);

}

.contact-form .btn-submit:hover { background: var(--color-brand-soft); }

.contact-info {

    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);

    padding: var(--s-5);

}

.contact-info h3 { color: var(--color-brand); }



/* ===== 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;

}

.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::after {

    content: '+'; font-size: 1.5rem; font-weight: 700; color: var(--text-inverse);

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

    display: inline-block; width: 1.5rem; text-align: center;

}

.menu-category[open] > .category-header .category-toggle::after {

    content: '-'; /* minus - plain ASCII so font fallback can't render weird escapes */

}

@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; }

/* ===== 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; }