:root{
    --red:#6B1E2E;
    --red-dark:#4A1420;
    --cream:#F4F4F2;
    --gold:#8B2848;
    --wine:#6B1E2E;
    --wine-lt:#8B2848;
    --bg-dark:#161614;
    --ink:#161614;
    --ink-mid:#525250;
    --ink-lt:#909088;
    --rule:rgba(22,22,20,.1);
}

* { box-sizing: border-box; }

body{
    margin:0;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    background:var(--cream);
    color:#333;
    overflow-x:hidden;
}

/* ── DESIGN-SYSTEM ELEMENTS (shared with index/catering/services) ── */
.eyebrow {
    font-size: .65rem; font-weight: 500; letter-spacing: 5px;
    text-transform: uppercase; color: var(--wine);
    display: block; margin-bottom: 12px;
}
.section-head {
    border-left: 2px solid var(--wine);
    padding-left: 18px;
}

.page-hero {
    margin-top: 60px;
    height: 360px;
    position: relative;
    display: flex; align-items: flex-end;
    overflow: hidden;
}
.page-hero-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    filter: brightness(.38) saturate(.7);
}
.page-hero-content {
    position: relative; z-index: 2;
    padding: 52px 60px;
    border-left: 2px solid var(--wine);
    margin: 0 60px 52px;
}
.page-hero-content .eyebrow { color: rgba(180,80,100,.85); }
.page-hero-content h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    font-weight: 300; line-height: 1.1;
    color: rgba(240,240,238,.92);
    margin: 0;
}
.page-hero-content .hero-sub {
    color: rgba(240,240,238,.5);
    font-size: .88rem; font-weight: 300;
    margin-top: 14px; max-width: 380px;
}

.site-footer, footer.site-footer {
    border-top: 1px solid rgba(240,240,238,.08);
    padding: 32px 60px; background: var(--bg-dark);
    display: flex; justify-content: space-between;
    align-items: center; flex-wrap: wrap; gap: 12px;
    margin-top: 60px;
}
.site-footer p { font-size: .72rem; letter-spacing: 1px; color: rgba(240,240,238,.3); margin: 0; }
.site-footer .f-accent { color: rgba(139,40,72,.6); font-size: .72rem; letter-spacing: 1px; }

@media (max-width: 860px) {
    .page-hero { height: 280px; }
    .page-hero-content { padding: 36px 28px; margin: 0 28px 36px; }
    .site-footer { padding: 24px 28px; flex-direction: column; text-align: center; }
}

::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-thumb{
    background:rgba(139,30,30,.4);
    border-radius:10px;
}

/* TOP NAV */
.nav{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:58px;
    background:var(--cream);
    border-bottom:1px solid var(--rule);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    transition:transform .3s ease;
}
.nav.hidden{transform:translateY(-100%);}

.nav-wordmark{
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem; font-weight: 400;
    letter-spacing: 6px; text-transform: uppercase;
    color: var(--ink);
    /* The wordmark is centered independently of the burger/cart icons
       (which are position:absolute at the nav's edges), so on a narrow
       screen its wide letter-spacing could run right under them. Capping
       its width and truncating is a hard guarantee it never can, on top
       of shrinking it below so truncation is rarely what's actually seen. */
    max-width: calc(100% - 100px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media(max-width:480px){
    .nav-wordmark{ font-size:.8rem; letter-spacing:3px; }
}

.burger{
    position:absolute;
    left:20px;
    display:flex;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
    z-index:10001;
}
.burger span{
    width:22px;
    height:1.5px;
    background:var(--ink);
    display:block;
}

/* CART TOGGLE */
.cart-toggle{
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    gap:5px;
    color:var(--ink);
    font-size:1.3rem;
    cursor:pointer;
    z-index:10001;
}
.cart-count{
    background:var(--wine);
    color:white;
    font-size:.72rem;
    font-weight:700;
    border-radius:50%;
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
}
/* Brief bounce on the cart count when flyToCart's badge lands (see
   seasonal-menu.js) -- the actual "added" confirmation now that adding
   an item no longer closes anything to signal it happened. */
.cart-count.pulse{
    animation:cartCountPulse .4s ease;
}
@keyframes cartCountPulse{
    0%{ transform:scale(1); }
    40%{ transform:scale(1.45); }
    100%{ transform:scale(1); }
}

/* FLY TO CART
   Appended as the first child of #addItemModal (see flyToCart in
   seasonal-menu.js) so it inherits that element's own stacking: above
   the modal's dark backdrop (just that element's own background-color,
   so any child already sits above it) but behind .checkout-modal, the
   white content box and a later sibling in the same DOM order -- so it
   visibly ducks behind the popout partway through its flight to the
   cart icon, rather than flying in front of it. */
.fly-to-cart{
    position:fixed;
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--wine);
    color:white;
    font-size:.85rem;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    /* No z-index here on purpose: .checkout-modal (the white content box)
       is position:relative with no z-index of its own (so it's "auto",
       ~0) -- giving this an explicit number, even 1, would beat that and
       render the badge ON TOP of the modal instead of behind it. Leaving
       both at auto means plain DOM order decides, and this is inserted
       as #addItemModal's first child while .checkout-modal is a later
       sibling, so the modal correctly wins and paints over it. */
    transition:transform .7s cubic-bezier(.3,-0.2,.4,1), opacity .7s ease .2s;
    box-shadow:0 4px 14px rgba(0,0,0,.35);
}

/* ADDED TO CART TOAST
   A plain readable confirmation, separate from the fly-to-cart badge
   above (which is a subtle motion cue, easy to miss) -- appended once to
   <body> and reused for every add, so rapid adds just restart its timer
   instead of stacking up multiple toasts. z-index above .checkout-overlay
   (10005) since this needs to read on top of the add-item modal itself. */
.added-toast{
    position:fixed;
    left:50%;
    bottom:36px;
    transform:translate(-50%,12px);
    background:var(--red-dark);
    color:white;
    font-size:.85rem;
    font-weight:600;
    padding:12px 22px;
    border-radius:999px;
    box-shadow:0 10px 28px rgba(0,0,0,.3);
    display:flex;
    align-items:center;
    gap:8px;
    opacity:0;
    pointer-events:none;
    z-index:10020;
    transition:opacity .25s ease, transform .25s ease;
}
.added-toast.show{
    opacity:1;
    transform:translate(-50%,0);
}

/* SIDE MENU */
.side-menu{
    position:fixed;
    top:0;
    left:-300px;
    width:300px;
    height:100%;
    background:var(--bg-dark);
    padding:80px 36px;
    box-sizing:border-box;
    transition:left .32s ease;
    z-index:10000;
    overflow-y:auto;
}
.side-menu.open{left:0;}

.sm-logo{
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem; font-weight: 300; letter-spacing: 5px;
    text-transform: uppercase; color: #f0f0ee;
    text-align: center; margin-bottom: 44px;
}
.side-menu a{
    display:block;
    color:rgba(240,240,238,.6);
    text-decoration:none;
    font-size:.85rem; letter-spacing:.5px;
    padding:14px 0;
    border-bottom:1px solid rgba(240,240,238,.08);
    transition:color .2s;
}
.side-menu a:hover{ color:#f0f0ee; }

/* CART PANEL */
.cart-panel{
    position:fixed;
    top:0;
    right:-320px;
    width:320px;
    max-width:85vw;
    height:100%;
    background:white;
    box-shadow:-4px 0 16px rgba(0,0,0,.15);
    transition:.3s ease;
    z-index:10002;
    padding:80px 20px 20px;
    overflow-y:auto;
}
.cart-panel.open{ right:0; }
.cart-panel h3{ color:var(--red); margin-top:0; }
.cart-empty{ color:#888; font-size:.9rem; }

.cart-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    padding:10px 0;
    border-bottom:1px solid #eee;
}
.cart-item-info{ flex:1; }
.cart-item-name{ display:block; font-size:.9rem; font-weight:600; }
.cart-item-price{ display:block; font-size:.78rem; color:#888; }
.cart-item-controls{ display:flex; align-items:center; gap:5px; }
.cart-item-controls button{
    background:var(--cream);
    border:1px solid #ddd;
    width:24px;
    height:24px;
    border-radius:4px;
    cursor:pointer;
    font-size:.9rem;
    line-height:1;
}
.cart-item-controls .remove-btn{
    background:none;
    border:none;
    color:var(--red);
    font-size:1rem;
    margin-left:2px;
    cursor:pointer;
}

.cart-subtotal{
    margin-top:16px;
    padding-top:12px;
    border-top:2px solid var(--red);
    font-weight:700;
    text-align:right;
}
.checkout-btn{
    width:100%;
    margin-top:16px;
    padding:12px;
    border:none;
    border-radius:4px;
    font-weight:700;
    font-size:1rem;
}
.checkout-btn:disabled{
    background:#ccc;
    color:#666;
    cursor:not-allowed;
}
.checkout-btn:not(:disabled){
    background:var(--red);
    color:white;
    cursor:pointer;
}
.checkout-btn:not(:disabled):hover{ background:var(--red-dark); }

.cart-disclaimer{
    font-size:.74rem;
    color:#999;
    margin-top:14px;
    text-align:center;
}

.cart-party-size{
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid #eee;
}
.cart-party-size-label{
    display:flex;
    justify-content:space-between;
    font-size:.8rem;
    color:#555;
    margin-bottom:6px;
}
.cart-party-size-label strong{ color:var(--red); }
.cart-party-size input[type="range"]{
    width:100%;
    accent-color:var(--red);
    /* Without this, a press-and-drag on the thumb inside the scrollable
       cart panel/checkout modal gets claimed by the panel's own scroll
       gesture instead of the slider -- the drag either does nothing or
       scrolls the panel rather than moving the thumb. */
    touch-action:none;
}
.cart-per-person{
    text-align:right;
    font-size:.78rem;
    color:#888;
    margin-top:6px;
}
.cart-per-person strong{ color:var(--red); font-size:.85rem; }

/* CHECKOUT OVERLAY */
.checkout-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:10005;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.checkout-overlay.open{ display:flex; }

.checkout-modal{
    background:white;
    border-radius:8px;
    max-width:480px;
    width:100%;
    max-height:90vh;
    /* iOS Safari's vh includes space the address/toolbar can be occupying,
       so 90vh there ends up taller than what's actually visible — the
       modal reads as edge-to-edge instead of a popup. dvh tracks the real
       visible viewport; the vh line above is just the fallback for
       browsers that don't support it. */
    max-height:85dvh;
    overflow-y:auto;
    padding:32px 26px;
    position:relative;
}
#addItemModal .checkout-modal.has-photo{ max-width:540px; }
.add-modal-layout{ display:flex; gap:20px; align-items:flex-start; }
.add-modal-info{ flex:1; min-width:0; }
/* Slightly bigger than .menu-list-row .item-thumb (40px) — a real step
   up, not a barely-noticeable one, matching the modal's own larger
   presence on screen. Hidden by default; .has-photo (added in JS only
   when the item actually has an image_url) is what reveals it, so an
   item with no photo just gets the original single-column modal back.
   Bounded to the top of the modal only — title through Quantity — not
   the full height down to the Add to Cart button: Special requests, its
   textarea, and the button now sit below .add-modal-layout as their own
   full-width block (see the markup), rather than sharing the row with
   the photo and leaving that whole right column mostly empty space
   below it. margin-top nudges it clear of .checkout-close (top:14px;
   right:14px) sitting in the same corner — a hard image edge reads as
   noticeably closer to that button than plain text starting at the same
   y-position does, so it needs a bit more breathing room than the text
   column next to it gets for free from its own line-height. */
.add-modal-photo{
    display:none;
    width:130px;
    height:130px;
    margin-top:6px;
    border-radius:12px;
    object-fit:cover;
    flex-shrink:0;
}
.checkout-modal.has-photo .add-modal-photo{ display:block; }
@media(max-width:640px){
    /* align-items:flex-start (the base rule) keeps title/price top-aligned
       next to the photo on desktop's row layout -- but once this flips to
       a stacked column here, flex-start also means children stop
       stretching to the container's full width and instead shrink to
       their own content width, so the size select (and everything else in
       .add-modal-info) ended up a different width depending on how long
       its own content happened to be. Stretch fixes that once stacked. */
    .add-modal-layout{ flex-direction:column-reverse; align-items:stretch; }
    .add-modal-photo{ width:100%; height:160px; margin-top:0; }
    /* Same "not touching the edges" fix as .checkout-modal's max-height,
       plus a bit less side/vertical padding — every extra px here is one
       less px of actual content room on a small screen. */
    .checkout-overlay{ padding:14px; }
    .checkout-modal{ max-height:82dvh; padding:28px 20px; }
}
.checkout-close{
    position:absolute;
    top:14px;
    right:14px;
    background:none;
    border:none;
    font-size:1.2rem;
    color:#888;
    cursor:pointer;
}
@media(max-width:640px){
    .checkout-close{ font-size:1.6rem; top:10px; right:10px; padding:4px; }
}
/* The add-item modal is the biggest of the checkout-overlay family (photo,
   size picker, notes field, quantity stepper) and, unlike the checkout
   modal, doesn't have a fixed header row the button sits calmly inside —
   it floats over the content up top, so it needs to read clearly and be
   an easy target on its own. Bigger glyph and a real tap-target size,
   not just a bigger font. */
#addItemModal .checkout-close{
    font-size:1.7rem;
    padding:8px;
    line-height:1;
}
@media(max-width:640px){
    #addItemModal .checkout-close{ font-size:2rem; padding:10px; }
}
.checkout-modal h3{ color:var(--red); margin-top:0; }

.order-summary{
    margin-bottom:18px;
    border-bottom:1px solid #eee;
    padding-bottom:12px;
}
.order-summary-row{
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:.86rem;
    padding:4px 0;
    color:#555;
}
.order-summary-total{
    display:flex;
    justify-content:space-between;
    font-weight:700;
    margin-top:8px;
    color:var(--red-dark);
}

.checkout-form label{
    display:block;
    font-size:.85rem;
    font-weight:600;
    margin:14px 0 4px;
    color:#444;
}
.checkout-form input{
    width:100%;
    padding:10px;
    border:1px solid #ccc;
    border-radius:4px;
    font-size:.95rem;
    font-family:inherit;
}
.checkout-form .field-error{
    color:var(--red);
    font-size:.78rem;
    margin-top:4px;
    display:none;
}
.checkout-form textarea{
    width:100%;
    padding:10px;
    border:1px solid #ccc;
    border-radius:4px;
    font-size:.95rem;
    font-family:inherit;
    resize:vertical;
    min-height:90px;
}
.place-order-btn{
    width:100%;
    margin-top:20px;
    padding:12px;
    background:var(--red);
    color:white;
    border:none;
    border-radius:4px;
    font-weight:700;
    font-size:1rem;
    cursor:pointer;
}
.place-order-btn:hover{ background:var(--red-dark); }
.place-order-btn:disabled{
    background:#ccc;
    opacity:.6;
    cursor:not-allowed;
}
/* Scoped to the add-item modal specifically (the checkout form's own Place
   Order button and the special-request form's Submit keep the plain
   background-swap hover above) -- :not(:disabled) so this doesn't pop
   while the button reads "Sending…" mid-submit. */
#addItemModal .place-order-btn{
    transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
#addItemModal .place-order-btn:hover:not(:disabled){
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 8px 18px rgba(107,30,46,.35);
}
#addItemModal .place-order-btn:active:not(:disabled){
    transform:translateY(0) scale(.99);
    box-shadow:0 3px 10px rgba(107,30,46,.25);
}

.confirmation{ text-align:center; }
.confirmation .checkmark{ font-size:2.6rem; margin-bottom:10px; }
.confirmation h3{ color:var(--red); }
.confirmation p{ color:#555; line-height:1.5; }
.done-btn{
    margin-top:16px;
    padding:10px 22px;
    background:var(--red);
    color:white;
    border:none;
    border-radius:4px;
    font-weight:600;
    cursor:pointer;
}
.done-btn:hover{ background:var(--red-dark); }

/* HERO */
.hero{
    margin-top:60px;
    height:180px;
    background:linear-gradient(135deg, var(--red-dark), var(--red));
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 20px;
}
.hero h1{
    color:white;
    font-size:2.4rem;
    margin:0 0 6px;
    text-shadow:0 2px 6px rgba(0,0,0,.4);
}
.hero p{
    color:var(--cream);
    margin:0;
    font-size:1rem;
    opacity:.95;
}

/* INTRO */
section{padding:50px 20px;}
.intro{
    text-align:center;
    padding-bottom:10px;
}
.intro h2{color:var(--red); margin-bottom:10px;}
.intro p{
    max-width:700px;
    margin:0 auto;
    line-height:1.6;
    font-size:1.05rem;
}

/* MENU LIST — laid out like a real printed menu: each category is a
   two-column row (its name sitting in a left label column, the way a menu
   sets a section name apart in the margin) with the actual items in a wide
   column to the right, grouped under plain subcategory headings (Vegetables,
   Starches, ...) rather than colored boxes. .menu-section/.menu-shell carry
   full-bleed background + a generous-but-capped width so the page uses the
   screen instead of sitting in a narrow centered column; Dinner for One
   reuses the same shell in its "band" variant (see DINNER FOR ONE below). */
.menu-section{ padding:0; }
.menu-section + .menu-section{ border-top:1px solid var(--rule); }
.menu-shell{
    max-width:1800px;
    margin:0 auto;
    padding:56px 60px;
}
.menu-category{
    display:grid;
    grid-template-columns:230px 1fr;
    gap:16px 56px;
    align-items:start;
}
.menu-category-label{ position:sticky; top:78px; }
.menu-category-label h3{
    font-family:'Cormorant Garamond',serif;
    font-size:1.85rem;
    font-weight:400;
    line-height:1.25;
    color:var(--ink);
    border-left:2px solid var(--wine);
    padding-left:18px;
    margin:0;
}
.menu-category-label .cat-count{
    display:block;
    margin-top:8px;
    padding-left:20px;
    font-size:.68rem;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--ink-lt);
}
.menu-category-content{ min-width:0; }
.list-disclaimer{
    font-size:.85rem;
    color:var(--ink-lt);
    margin:0 0 20px;
}
.menu-subcategory + .menu-subcategory{ margin-top:36px; }
.menu-subcategory-heading{
    display:flex;
    align-items:baseline;
    gap:10px;
    font-family:'Cormorant Garamond',serif;
    font-size:1.05rem;
    font-weight:600;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--ink);
    padding-bottom:8px;
    margin:0 0 4px;
    border-bottom:1px solid var(--rule);
}
.menu-subcategory-count{
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:.68rem;
    font-weight:400;
    letter-spacing:.3px;
    text-transform:none;
    color:var(--ink-lt);
}
.menu-subcategory-subtitle{
    font-size:.82rem;
    font-style:italic;
    color:var(--ink-lt);
    margin:0 0 14px;
}
/* Plain itemized list — same row-with-bottom-rule pattern the homepage
   already uses for its hours list (.h-row) — rather than a photo grid, so
   this reads as a menu, not a product catalog. Block instead of flex so
   .menu-list-2col below can hand the same rows to CSS multi-column layout
   without fighting a flex context. */
.menu-list{ display:block; }
/* A long list with no subcategory breakdown (see TWO_COL_THRESHOLD in
   seasonal-menu.js — this is exactly the "Ready to Heat & Eat" case) reads
   far better as two columns side by side than one column stretched the
   full width of the content area, with the price left stranded way off
   from the item name. break-inside keeps a single row
   from being split across the column gap.
   The split only happens above 1150px, though — below that the content
   column itself isn't wide enough to give each of the two columns enough
   room for a 120px photo plus a name and price without squeezing them
   into overflow, so it stays one (still much wider than before) column. */
@media(min-width:1150px){
    .menu-list-2col{
        columns:2;
        column-gap:44px;
    }
    .menu-list-2col .menu-tile{ break-inside:avoid-column; }
}
.menu-list-2col .menu-tile{ break-inside:avoid-column; }
/* Now a <button>, not a <div> — the whole tile is the tap target (there's
   no separate Add button anymore), so it needs the usual button resets
   (width/margin/font/text-align/background/border/cursor) undoing the
   browser's own button chrome on top of its existing layout rules, plus
   real hover/active feedback so the whole row reads as clickable, not
   just decorative. Sized identically on mobile and desktop — the same
   padding was already generous enough as a tap target either way. */
.menu-tile{
    display:flex;
    align-items:center;
    gap:16px;
    width:100%;
    margin:0;
    padding:14px 4px;
    border:none;
    border-bottom:1px solid var(--rule);
    background:none;
    font:inherit;
    text-align:left;
    color:inherit;
    cursor:pointer;
    /* transform/box-shadow/background-color only -- all cheap, compositor-
       friendly properties (no width/top/left), so the hover "pop" stays
       smooth even on a long list of rows. */
    transition:background-color .15s ease, transform .15s ease, box-shadow .15s ease;
    border-radius:6px;
}
.menu-tile:last-child{ border-bottom:none; }
.menu-tile:hover{
    background:var(--bg-off, var(--cream));
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(22,22,20,.12);
}
.menu-tile:active{
    background:var(--rule);
    transform:translateY(0);
    box-shadow:0 2px 6px rgba(22,22,20,.08);
}
.menu-tile-media{
    display:flex;
    align-items:center;
    justify-content:center;
    width:120px;
    height:120px;
    border-radius:9px;
    overflow:hidden;
    background:var(--bg-off, var(--cream));
    flex-shrink:0;
}
.menu-tile-media .item-thumb{
    width:100%;
    height:100%;
    object-fit:cover;
}
.menu-tile-media .icon{ font-size:2.6rem; }
.menu-tile-body{
    flex:1;
    min-width:0;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px 14px;
}
.menu-tile .item-name{
    font-size:.94rem;
    font-weight:500;
    color:var(--ink);
}
/* Badge sits in its own reserved row above the price/Add row — same slot
   for every item whether or not it actually has a badge (min-height keeps
   the slot's line box even when empty) — so the price row lines up at the
   same height down the whole list instead of drifting with name length. */
.menu-tile-footer{
    margin-left:auto;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
    flex-shrink:0;
}
.menu-tile-badge-row{ min-height:1em; line-height:1; }
.menu-tile-price-row{
    display:flex;
    align-items:center;
    gap:14px;
}
.menu-tile .item-price{
    font-weight:600;
    color:var(--red-dark);
    white-space:nowrap;
}
@media(max-width:860px){
    .menu-shell{ padding:40px 28px; }
}
@media(max-width:760px){
    .menu-category{ grid-template-columns:1fr; gap:14px; }
    .menu-category-label{ position:static; }
}
/* On a narrow phone there's only ~120-130px left for the price/Add pill
   once the 120px photo and item name have their share -- not quite enough
   for "from $9.99" and "Add" side by side without spilling past the edge.
   Stacking the price above the pill shrinks that column down to just the
   pill's own width, which always fits. */
@media(max-width:480px){
    .menu-tile-price-row{ flex-direction:column; align-items:flex-end; gap:4px; }
}
.size-select{
    padding:4px 6px;
    border:1px solid #ccc;
    border-radius:4px;
    font-size:.82rem;
}
/* A visual cue only, not a second click target -- the whole .menu-tile/
   .dinner-card is already a <button>, and a <button> can't contain another
   one, so this is a plain <span> styled to read as a pill. It inherits
   the tile's own cursor:pointer and hover/active pop; it doesn't need (or
   get) its own interaction states. */
.add-btn{
    background:var(--red);
    color:white;
    padding:6px 14px;
    border-radius:4px;
    font-size:.82rem;
    font-weight:600;
    white-space:nowrap;
}

/* DINNER FOR ONE — a full-bleed black band, the same var(--bg-dark) block
   the rest of the site (hero, owner section, footer) already uses to break
   up light sections, brought in here instead of an arbitrary accent color
   so this section reads as a deliberate highlight, not just another list. */
.dinner-band{ background:var(--bg-dark); }
.dinner-band-heading{
    font-family:'Cormorant Garamond',serif;
    font-size:1.85rem;
    font-weight:400;
    color:rgba(240,240,238,.92);
    border-left:2px solid var(--wine-lt);
    padding-left:18px;
    margin:0 0 30px;
}
.dinner-cards{
    display:grid;
    /* min(300px, 100%) instead of a bare 300px — a plain fixed minimum
       forces every track to be at least that wide even when the
       container itself is narrower (a phone screen under ~360px with
       side padding), which pushes the grid past the viewport edge rather
       than actually shrinking to fit. */
    grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap:30px;
}
/* Now a <button>, not a <div> — the whole card is the tap target (there's
   no separate Add to Cart button anymore inside it), hence the button
   resets (display/width/margin/padding/font/text-align/cursor) alongside
   its existing card styling. A grid item's own display doesn't need to be
   flex/grid, just not the browser's inline-block button default, which
   behaves slightly differently as a grid child. Lift-on-hover plus a
   press-down on tap gives it the same "this is clickable" read a big
   photo card needs, on both desktop and mobile. */
.dinner-card{
    display:block;
    width:100%;
    margin:0;
    padding:0;
    background:white;
    border:1px solid rgba(139,30,30,.15);
    border-radius:6px;
    overflow:hidden;
    font:inherit;
    text-align:left;
    color:inherit;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;
}
.dinner-card:hover{ transform:translateY(-4px) scale(1.015); box-shadow:0 12px 26px rgba(22,22,20,.14); }
.dinner-card:active{ transform:translateY(-1px) scale(1); box-shadow:0 4px 12px rgba(22,22,20,.1); }
.dinner-card .card-photo{
    width:100%;
    height:160px;
    object-fit:cover;
    display:block;
}
.dinner-card .ribbon{
    background:white;
    color:var(--wine);
    border-bottom:2px solid var(--wine);
    text-align:center;
    font-family: 'Cormorant Garamond', serif;
    font-weight:400;
    font-size:1.3rem;
    padding:14px 12px;
}
.dinner-card-body{
    padding:18px 20px 22px;
}
.dinner-card-body p{
    font-size:.92rem;
    line-height:1.5;
    color:#555;
    margin:0;
}
.price-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:14px;
}
.price-row .price{
    font-weight:700;
    color:var(--red-dark);
    font-size:1.05rem;
}

.note-box{
    text-align:center;
    max-width:650px;
    margin:50px auto 0;
    padding:18px 24px;
    background:white;
    border:1px solid var(--gold);
    border-radius:6px;
    font-size:.92rem;
    color:var(--red-dark);
}
.menu-closed-msg{
    text-align:center;
    max-width:650px;
    margin:50px auto 0;
    padding:18px 24px;
    background:white;
    border:1px solid var(--gold);
    border-radius:6px;
    font-size:.92rem;
    color:var(--red-dark);
}
.menu-closed-msg a{ color:var(--wine); }

.special-request-card{
    max-width:520px;
    margin:0 auto;
}
.special-request-heading{
    font-family:'Cormorant Garamond',serif;
    font-size:2rem;
    font-weight:400;
    color:var(--ink);
    margin-bottom:8px;
    text-align:center;
}
.special-request-intro{
    color:var(--ink-mid);
    font-size:.92rem;
    text-align:center;
    margin-bottom:20px;
}
.special-request-success{
    background:#eefaf1;
    border-left:3px solid #2e7d4f;
    color:#1a6b3c;
    padding:10px 14px;
    border-radius:4px;
    font-size:.88rem;
    margin-top:14px;
}
.loading-msg{
    text-align:center;
    padding:40px;
    color:#888;
}

/* FOOTER */
.footer{
    background:var(--red);
    color:white;
    text-align:center;
    padding:20px 10px;
    margin-top:50px;
    font-size:1rem;
    letter-spacing:0.5px;
}
.footer-content{
    max-width:900px;
    margin:0 auto;
}

@media(max-width:600px){
    .hero h1{ font-size:1.9rem; }
}


.add-modal-desc{font-size:.88rem;color:#555;line-height:1.5;margin-bottom:10px;}
.add-modal-serving{font-size:.83rem;color:#7a5000;background:#fff8e6;border:1px solid var(--gold);border-radius:4px;padding:8px 12px;margin-bottom:12px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.serving-icon{font-size:1rem;}
.serving-cost{font-weight:700;color:var(--red-dark);display:block;width:100%;margin-top:2px;}

/* ══ ADD-ITEM MODAL / TIME PICKER / MEAT (moved from christmas-menu.html) ══ */
/* ── ADD ITEM MODAL extras (not in shared CSS) ── */
.weight-badge{
    display:inline-block;
    background:#f5ebe0;
    color:var(--red-dark);
    font-size:.65rem;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    padding:2px 6px;
    border-radius:3px;
    margin-left:6px;
    vertical-align:middle;
}
.meat-disclaimer{
    font-size:.8rem;
    color:#888;
    font-style:italic;
    margin:8px 0 0;
    padding:8px 12px;
    background:#f9f6f0;
    border-left:3px solid var(--gold);
    border-radius:0 4px 4px 0;
}
.add-modal-title{
    font-size:1.1rem;
    font-weight:700;
    color:var(--red-dark);
    margin:0 0 4px;
}
.add-modal-price{
    font-size:.88rem;
    color:#888;
    margin:0 0 18px;
}
.add-modal-section-label{
    font-size:.78rem;
    font-weight:700;
    color:#555;
    text-transform:uppercase;
    letter-spacing:.5px;
    margin-bottom:8px;
}
.modal-qty-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:16px;
}
.modal-qty-btn{
    width:32px;
    height:32px;
    border:1px solid #ccc;
    background:var(--cream);
    border-radius:4px;
    font-size:1.1rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}
.modal-qty-btn:hover{ background:#e8e0d0; }
.modal-qty-val{
    font-size:1.1rem;
    font-weight:700;
    min-width:28px;
    text-align:center;
}
.qty-warning{
    background:#fff8e6;
    border:1px solid var(--gold);
    border-radius:4px;
    padding:9px 12px;
    font-size:.82rem;
    color:#7a5000;
    margin-bottom:14px;
    display:none;
}
.add-modal-notes{
    width:100%;
    padding:10px;
    border:1px solid #ccc;
    border-radius:4px;
    font-size:.9rem;
    font-family:inherit;
    resize:vertical;
    min-height:80px;
}
.add-modal-notes:focus{ outline:2px solid var(--gold); }

/* Time picker */
.time-loading{
    font-size:.82rem;
    color:#888;
    font-style:italic;
    margin-top:4px;
}
.time-select{
    width:100%;
    padding:10px;
    border:1px solid #ccc;
    border-radius:4px;
    font-size:.95rem;
    font-family:inherit;
    background:white;
}
.time-select:disabled{ background:#f5f5f5; color:#aaa; }

/* Cart item notes */
.cart-item-notes{
    font-size:.75rem;
    color:#888;
    font-style:italic;
    display:block;
    margin-top:2px;
}

/* ── Custom pickup-date calendar ──
   Replaces the native <input type="date"> for the checkout "Pickup Day"
   field. Native date pickers can't be restyled (the calendar popup is
   browser-native, outside page CSS), which is why the old field's colors
   read as flat/unclear — this is a fully custom dropdown instead, so
   "selected" and "today" can each get an unmistakably different treatment. */
.pickup-date-field {
    position: relative;
}
.pickup-date-btn {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: .95rem;
    font-family: inherit;
    background: white;
    text-align: left;
    cursor: pointer;
    color: var(--ink);
}
.pickup-date-btn:hover { border-color: var(--wine); }
.pickup-calendar {
    display: none;
    /* position:fixed with top/left set by JS (repositionPickupCalendar in
       seasonal-menu.js), not CSS — this element gets moved to a direct
       child of <body> the first time it opens, specifically so
       .checkout-modal's overflow-y:auto can no longer clip it. z-index
       above .checkout-overlay's 10005 since it's now a sibling of that
       overlay rather than a descendant of the modal it visually belongs
       to. */
    position: fixed;
    z-index: 10010;
    width: 280px;
    max-width: 90vw;
    background: white;
    border: 1px solid var(--rule);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(22,22,20,.18);
    padding: 14px;
}
.pickup-calendar.open { display: block; }
.pickup-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.pickup-cal-title {
    font-size: .85rem;
    font-weight: 700;
    color: var(--ink);
}
.pickup-cal-nav {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--rule);
    background: white;
    color: var(--wine);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pickup-cal-nav:hover:not(:disabled) { background: var(--cream); }
.pickup-cal-nav:disabled {
    opacity: .3;
    cursor: not-allowed;
}
.pickup-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}
.pickup-calendar-weekdays span {
    text-align: center;
    font-size: .68rem;
    font-weight: 700;
    color: var(--ink-lt);
    letter-spacing: .5px;
}
.pickup-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.pickup-day {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--ink);
    cursor: pointer;
}
.pickup-day-empty {
    cursor: default;
    background: transparent;
}
.pickup-day:hover:not(.disabled):not(.selected) {
    background: var(--cream);
}
/* Today: a visible outline ring so it reads distinctly even before
   anything is picked — never confused with "selected" since it has no
   fill, only a border. */
.pickup-day.today {
    border: 2px solid var(--wine);
    font-weight: 700;
}
/* Selected: solid, high-contrast fill — the one state that should be
   impossible to miss. */
.pickup-day.selected {
    background: var(--wine);
    border: 2px solid var(--wine);
    color: white;
    font-weight: 700;
}
.pickup-day.disabled {
    color: #ccc;
    cursor: not-allowed;
}
/* Card field — sized and shaped like the other checkout inputs, not a
   rounded pill. Stripe toggles the StripeElement--* classes on focus /
   validation; the text styling itself lives in the elements.create()
   style block in seasonal-menu.js. */
.card-element{
  padding:11px 12px;
  border:1px solid #ccc;
  border-radius:4px;
  background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.card-element.StripeElement--focus{
  border-color:var(--wine);
  box-shadow:0 0 0 3px rgba(107,30,46,.12);
}
.card-element.StripeElement--invalid{ border-color:#b3261e; }
.card-error{
  display:block;
  color:#b3261e;
  font-size:.78rem;
  margin-top:5px;
  min-height:1em;
}

/* No-show consent — a calm grouped block in regular weight, not the bold
   form-label style it would otherwise inherit. */
.consent-row{
  display:flex;
  gap:9px;
  align-items:flex-start;
  margin:16px 0 0;
  padding:11px 12px;
  background:var(--cream);
  border:1px solid var(--rule);
  border-radius:6px;
  font-size:.8rem;
  font-weight:400;
  line-height:1.45;
  color:var(--ink-mid);
  cursor:pointer;
}
.consent-row input{
  margin-top:1px;
  flex-shrink:0;
  width:15px;
  height:15px;
  accent-color:var(--wine);
  cursor:pointer;
}
.consent-links{
  margin:8px 0 0;
  font-size:.78rem;
  line-height:1.5;
}
.consent-links a{ color:var(--wine); text-decoration:underline; }
.consent-agree{
  margin:8px 0 0;
  font-size:.72rem;
  color:#8a8a86;
  text-align:center;
}

/* Turnstile captcha sits in the customer-info part of the checkout form
   and above the General Orders submit button. The widget is a fixed-size
   iframe (300x65 normal); the box reserves that height so the form
   doesn't jump when it loads. */
.turnstile-box{ min-height:65px; margin:14px 0 4px; }