/* ===== 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 whole meter image is the drag surface. A circular "dot" indicator
   sits on the meter's colored body and slides up/down to show the
   current value. A hidden native range input drives the value so
   keyboard users and screen readers get the standard slider semantics.
   Side labels (e.g. "Candy Bar", "Half Sweet") sit in a column to the
   right of the meter, one per stop, and the active label is highlighted.

   Layout on desktop:
     | <dot on meter> | <meter> | <side labels>  |
   Layout on narrow screens: meter stacks above the side labels, the
   dot stays overlaid on the meter. */
.vertical-slider-wrap {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: var(--s-3);
    margin: var(--s-3) 0;
    width: 100%;
    /* Touch action: tell the browser we want pointer events, not scroll.
       The wrap is the drag target; nothing inside should scroll. */
    touch-action: none;
}

/* The stage is the drag surface. It's positioned so children can
   absolute-position relative to it (the dot, the hidden input).
   The stage is sized to match the meter asset's native aspect ratio
   (898x1751, i.e. ~0.513:1) so background-size: 100% 100% fills it
   pixel-for-pixel with no stretching. The width is 100px so the
   stage is large enough to read every band, label, and the 0% bulb
   at one-to-one scale on desktop; height follows from the aspect
   ratio (~195px). The meter ITSELF is set as a CSS background-image
   on the stage (see cart.js). */
.vertical-slider-stage {
    position: relative;
    flex: 0 0 auto;
    width: 100px;
    aspect-ratio: 898 / 1751;
    display: block;
    /* Cursor: grab when hoverable (desktop), grabbing during drag.
       The dot is the visual handle, but the whole stage is draggable. */
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    /* Right margin keeps the meter from kissing the side-labels column.
       No left margin needed — the dot lives ON the meter, not next to it. */
    margin-right: 10px;
    /* The meter asset is the hand-edited sweetness-meter.png (898x1751
       RGB, no baked-in copy, the arrow painted out). The hand-edit
       kept the original blue background and the full meter body:
       the white top outline, the five colored bands (red, orange,
       yellow, light green, green), and the round green bulb at the
       bottom. Stage aspect matches the asset, so 100% 100% is a
       perfect fit — no stretch, no crop, no mask needed. */
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.vertical-slider-stage.is-dragging {
    cursor: grabbing;
}

/* (The meter is now a background-image on the stage — see cart.js
   and .vertical-slider-stage. No <img class="vertical-slider-meter">
   is rendered any more, so this selector is intentionally a no-op
   in case any stale markup slips through. It can be deleted in a
   later sweep once we're sure no other surface references it.) */
.vertical-slider-meter {
    display: none;
}

/* The dot indicator — a circular "thumb" that sits on the meter at
   the current value's y position. Its `top` is set by JS as a
   percent of the stage height; CSS centers it on both axes so the
   dot sits squarely on the colored band for that stop. The dot is
   decorative (the side labels and the live label carry the meaning),
   so pointer-events: none lets the stage always receive the drag. */
.vertical-slider-dot {
    position: absolute;
    left: 50%;
    /* top is set inline by JS; default to the 50% stop so a flash
       of the dot before apply() is in a sensible place. */
    top: 43.69%;
    width: 30px;
    height: 30px;
    margin-left: -15px;   /* half of width, to center on the x axis */
    margin-top: -15px;    /* half of height, to center on the y axis */
    border-radius: 50%;
    background: #FFFFFF;
    border: 3px solid #1A202C;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    /* Smooth motion while dragging. Snapping still happens because
       the value is rounded to a stop on every move event. */
    transition: top 80ms ease-out;
    /* A subtle inner glow so the dot reads against white bands. */
    box-sizing: border-box;
}

/* While dragging, tighten the transition so the dot follows the
   finger/cursor with no perceptible lag. */
.vertical-slider-stage.is-dragging .vertical-slider-dot {
    transition: none;
    /* Slight scale-up so the user feels feedback that the dot is
       actively being dragged. */
    transform: scale(1.08);
}

/* Hidden native range input. Visually hidden but focusable so the
   keyboard path (Tab + arrow keys) and screen readers get the
   standard slider semantics. We can't use display: none or
   visibility: hidden because that removes the element from the
   accessibility tree; instead we use the visually-hidden trick
   (clip + absolute positioning + 0 size). */
.vertical-slider-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Focus ring on the hidden input: the user can't see the input
   itself, but we surface focus on the stage so keyboard users
   have a visible "I'm here" cue. */
.vertical-slider-stage:focus-within {
    outline: 2px solid var(--brand, #5C0011);
    outline-offset: 4px;
    border-radius: var(--s-2);
}

/* Side labels column. Each label is absolutely positioned at the
   y percent of its stop, so it lines up with the dot when the
   value lands on that stop. The column is positioned relative to
   the wrap (so absolute children resolve to it), and its own width
   takes the remaining space after the stage. */
.vertical-slider-labels {
    position: relative;
    flex: 1 1 auto;
    /* Matches the stage's height (so absolute children can use
       percentages of the column's height == percentages of the
       stage's height, since they're side by side). */
    min-height: 100%;
    display: block;
}

.vertical-slider-side-label {
    position: absolute;
    /* left/right and font-size are set below; the y is set inline
       by JS as a percent, matching the dot's y for the same stop. */
    left: 0;
    right: 0;
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.2;
    /* Center the label's text vertically on its y position. */
    transform: translateY(-50%);
    transition: color 120ms ease, font-weight 120ms ease, transform 120ms ease;
}

.vertical-slider-side-label.is-active {
    color: var(--brand, #5C0011);
    font-weight: 700;
    /* Subtle nudge so the active label feels "selected" without
       taking up more space. */
    transform: translateY(-50%) translateX(2px);
}

.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 stage above the side labels.
   The dot stays overlaid on the meter; the side labels collapse
   into a single horizontal row of small chips below the meter so
   the customer still gets the "Candy Bar / Less Sweet / ..." legend.
   Order on mobile:
     | <dot on meter> | <meter centered>          |
     | <side labels as a row of chips>             |
     | <big "50% Sweet" label below>               |
*/
@media (max-width: 600px) {
    .vertical-slider-wrap {
        flex-direction: column;
        align-items: center;
        gap: var(--s-2);
    }
    .vertical-slider-stage {
        width: 90px;
        margin-right: 0;
    }
    .vertical-slider-dot {
        width: 24px;
        height: 24px;
        margin-left: -12px;
        margin-top: -12px;
        border-width: 2px;
    }
    .vertical-slider-labels {
        position: relative;
        width: 100%;
        min-height: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: var(--s-1);
        padding: var(--s-1) 0;
    }
    .vertical-slider-side-label {
        position: static;
        transform: none;
        font-size: var(--fs-sm);
        text-align: center;
        flex: 1 1 0;
    }
    .vertical-slider-side-label.is-active {
        transform: none;
    }
    .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; }