#aharaCartBar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    /* env() resolves to 0 on non-notched devices, so this is a no-op
       there -- only pushes the pill up clear of the iPhone home
       indicator where one exists. */
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 999;
    display: none;
}
#aharaCartBar button {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--ink-deep);
    color: #fff;
    border: none;
    padding: .75rem 1.4rem;
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .92rem;
    box-shadow: 0 12px 30px rgba(58,51,49,.35);
}
#aharaCartBar .cart-ic {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .85;
}
#aharaCartBar #aharaCartTotal {
    color: var(--yellow);
}

#aharaCartDrawer {
    position: fixed;
    right: 20px;
    bottom: 90px;
    width: min(360px, calc(100vw - 40px));
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(58,51,49,.25);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    overflow: hidden;
    transform: translateY(20px) scale(.96);
    opacity: 0;
    pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
}
#aharaCartDrawer.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}
.cart-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--line);
}
.cart-drawer__head h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
}
#aharaCartClose {
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--ink);
    line-height: 1;
}
#aharaCartItems {
    padding: .6rem 1.2rem;
    overflow-y: auto;
    flex: 1;
}
.cart-empty {
    font-size: .88rem;
    opacity: .7;
    padding: 1rem 0;
    text-align: center;
}

/* ---- Qty stepper + add-to-cart row (product cards) ---- */
.pcard__cartrow {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: .3rem;
}
.qty-stepper {
    display: flex;
    align-items: center;
    flex: none;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
}
.qty-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ivory);
    border: none;
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1;
    color: var(--ink-deep);
    cursor: pointer;
    transition: background .15s ease;
}
.qty-btn:hover { background: var(--cream); }
.qty-val {
    min-width: 26px;
    text-align: center;
    font-weight: 600;
    font-size: .9rem;
    color: var(--ink-deep);
}
.btn--cart {
    flex: 1;
    background: var(--ink-deep);
    color: #fff;
}
.btn--cart:hover { background: var(--red); }

/* ---- Cart drawer line items ---- */
.cart-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .7rem;
    padding: .9rem 0;
    border-bottom: 1px solid var(--line);
}
.cart-line:last-child { border-bottom: none; }
.cart-line__info {
    flex: 1 1 100%;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .6rem;
}
.cart-line__name {
    font-weight: 600;
    font-size: .92rem;
    color: var(--ink-deep);
}
.cart-line__unit {
    font-size: .78rem;
    opacity: .6;
    white-space: nowrap;
}
.cart-line__sub {
    font-weight: 600;
    font-size: .92rem;
    color: var(--red);
    margin-left: auto;
}
.cart-line__remove {
    background: none;
    border: none;
    color: var(--ink);
    opacity: .5;
    font-family: var(--font-body);
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    padding: .2rem .3rem;
}
.cart-line__remove:hover { opacity: 1; color: var(--red); }

/* ---- Cart drawer customer details ---- */
.cart-drawer__details {
    padding: .8rem 1.2rem;
    display: grid;
    gap: .55rem;
    border-top: 1px solid var(--line);
}
.cart-drawer__details-label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--ink-deep);
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .7;
}
.cart-drawer__details-row {
    display: flex;
    gap: .55rem;
}
/* .cart-drawer__details-row is also used standalone in the book modal
   (name/phone), not just nested inside .cart-drawer__details (cart
   drawer) -- styled directly on the row's own inputs rather than via
   a .cart-drawer__details ancestor, so it doesn't silently fall back
   to unstyled native inputs wherever that ancestor isn't present. */
.cart-drawer__details-row input,
.cart-drawer__details input {
    flex: 1;
    min-width: 0;
    font-family: var(--font-body);
    /* 16px minimum -- below this, iOS Safari auto-zooms on focus. */
    font-size: 1rem;
    color: var(--ink-deep);
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding: .55rem .75rem;
    background: var(--ivory);
    width: 100%;
}
.cart-drawer__details-row input:focus,
.cart-drawer__details input:focus {
    outline: none;
    border-color: var(--orange);
    background: #fff;
}

/* ---- Delivery location: distinct pin-led search style, not a plain boxed input ---- */
.cart-locate-wrap {
    position: relative;
}
.cart-locate {
    border: 1.5px solid var(--line);
    border-radius: 14px;
    background: var(--ivory);
    overflow: hidden;
    transition: border-color .15s ease, background .15s ease;
}
.cart-locate:focus-within {
    border-color: var(--orange);
    background: #fff;
}
.cart-locate__row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem;
}
.cart-locate__row--sub {
    padding-left: calc(.75rem + 1.9rem + .6rem);
}
.cart-locate__icon {
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: #FFF3EE;
    color: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart-locate__icon .ic { width: 1rem; height: 1rem; }
.cart-locate__divider {
    height: 1px;
    background: var(--line);
    margin-left: calc(.75rem + 1.9rem + .6rem);
}
/* The book modal's address fields (#b-address/#b-address2) share this
   exact markup structure (.cart-locate-wrap > .cart-locate >
   .cart-locate__row > input) but were never added to this selector --
   the surrounding pin/border chrome (class-based) rendered fine, but
   the input itself fell back to the browser's native input styling
   (its own border/background/padding) inside that nicely-styled box. */
#aharaCustAddress,
#aharaCustAddress2,
#b-address,
#b-address2 {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-family: var(--font-body);
    /* 16px minimum -- below this, iOS Safari auto-zooms on focus. */
    font-size: 1rem;
    color: var(--ink-deep);
}
/* No smaller than the primary address line -- it's still a focusable
   text input, and iOS Safari doesn't care that it's "secondary". */
#aharaCustAddress:focus,
#aharaCustAddress2:focus,
#b-address:focus,
#b-address2:focus {
    outline: none;
    border: none;
    background: transparent;
}

/* ---- Live address suggestions (Nominatim/OpenStreetMap) ---- */
.cart-locate-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 16px 34px rgba(58,51,49,.18);
    z-index: 20;
    max-height: 15rem;
    overflow-y: auto;
    padding: .3rem;
}
.cart-locate-result {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    width: 100%;
    padding: .55rem .6rem;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    border-radius: 10px;
    font-family: var(--font-body);
}
.cart-locate-result:hover,
.cart-locate-result:focus-visible {
    background: var(--ivory);
    outline: none;
}
.cart-locate-result__icon {
    flex: none;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: .1rem;
    color: var(--red);
    opacity: .75;
}
.cart-locate-result__icon svg { width: 100%; height: 100%; display: block; }
.cart-locate-result__text {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}
.cart-locate-result__primary {
    display: block;
    font-size: .86rem;
    font-weight: 600;
    color: var(--ink-deep);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cart-locate-result__secondary {
    display: block;
    font-size: .74rem;
    color: var(--ink);
    opacity: .65;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cart-locate-status {
    padding: .65rem .6rem;
    font-size: .8rem;
    color: var(--ink);
    opacity: .65;
    text-align: center;
}
.cart-locate-attrib {
    margin-top: .2rem;
    padding: .35rem .6rem .15rem;
    border-top: 1px solid var(--line);
    font-size: .65rem;
    color: var(--ink);
    opacity: .5;
    text-align: right;
}
.cart-locate-distance {
    margin-top: .5rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink-deep);
    opacity: .8;
}

/* ---- Cart drawer footer ---- */
.cart-drawer__foot {
    padding: 1rem 1.2rem 1.2rem;
    border-top: 1px solid var(--line);
    display: grid;
    gap: .7rem;
}
.cart-delivery-note {
    font-size: .78rem;
    color: var(--ink);
    opacity: .85;
    text-align: center;
}
.cart-drawer__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.cart-drawer__total span {
    font-size: .88rem;
    opacity: .75;
}
.cart-drawer__total strong {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--ink-deep);
}
#aharaCartCheckout {
    width: 100%;
    text-align: center;
    border: none;
    cursor: pointer;
}
#aharaCartCheckout:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.cart-checkout-error {
    font-size: .8rem;
    color: var(--red);
    text-align: center;
}

/* ---- Book a meal popup ---- */
/* A centered overlay with its own backdrop, not a floating card like
   the cart drawer -- this opens from wherever the user is on the
   page (hero, nav, footer), so it needs to dim the whole page rather
   than assume a fixed anchor point nearby. */
#aharaBookModal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(58,51,49,0);
    pointer-events: none;
    transition: background .2s ease;
}
#aharaBookModal.open {
    background: rgba(58,51,49,.45);
    pointer-events: auto;
}
.book-modal__panel {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(58,51,49,.35);
    width: min(440px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    transform: translateY(20px) scale(.97);
    opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
}
#aharaBookModal.open .book-modal__panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.book-modal__form {
    display: grid;
    gap: 1rem;
    padding: 1.2rem;
}
/* Shown instead of the date/dish pickers when the modal was opened
   with a preset (Best Sellers / Plan your week "Book") -- confirms
   what's being booked without letting it be re-picked here. */
.book-modal__preset {
    font-weight: 600;
    color: var(--ink-deep);
    text-align: center;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .7rem .9rem;
    margin: 0;
}
.book-modal__payment-note {
    font-size: .82rem;
    color: var(--ink);
    opacity: .85;
    text-align: center;
    background: var(--ivory);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .6rem .8rem;
}

/* ---- Weekly planner ---- */
.weekly-planner {
    max-width: 1180px;
    margin: 0 auto;
}
.wplan__grid {
    display: flex;
    gap: 1.3rem;
    overflow-x: auto;
    padding: .3rem .1rem 1rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.wplan__day {
    flex: 0 0 305px;
    scroll-snap-align: start;
    background: var(--card);
    border: 1px solid var(--line);
    border-top: 5px solid var(--accent);
    border-radius: var(--radius);
    padding: 1.2rem 1.1rem;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wplan__day:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(82,73,72,.14);
}
/* The one day the single Book button below the carousel will act on --
   picked by tapping the card, a tier pill, or the qty stepper. */
.wplan__day.is-picked {
    border-color: var(--red);
    box-shadow: 0 0 0 2px rgba(224,5,4,.15);
}
.wplan__book-btn { margin-top: 1.2rem; }
.wplan__top {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    margin-bottom: .6rem;
}
.wplan__topinfo { flex: 1; min-width: 0; }
.wplan__thumb {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--cream);
}
.wplan__thumb img { width: 100%; height: 100%; object-fit: cover; }
.wplan__thumb--ph {
    display: flex; align-items: center; justify-content: center;
    background: repeating-linear-gradient(135deg, rgba(255,94,23,.08) 0 10px, rgba(255,179,44,.08) 10px 20px);
    border: 1.5px dashed rgba(255,94,23,.35);
}
.wplan__thumb--ph svg { width: 24px; height: 24px; }
.wplan__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .3rem;
}
.wplan__badge {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--yellow);
    color: var(--ink-deep);
    padding: .22rem .55rem;
    border-radius: 999px;
    white-space: nowrap;
}
.wplan__dish {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--ink-deep);
    margin: .1rem 0 .5rem;
}
@media (max-width: 560px) {
    .wplan__day { flex-basis: 285px; }
    /* Side by side, the wider (44px) qty buttons leave "Add to cart"
       too narrow and its text wraps to two lines. Stacking avoids that
       instead of shrinking the buttons back down. */
    .daycard__cartrow { flex-wrap: wrap; }
    .daycard__cartrow .qty-stepper { flex: 1 1 100%; justify-content: center; }
    .daycard__cartrow .btn--cart { flex: 1 1 100%; }
}

/* ---- Sold out (kitchen capacity) ---- */
.qty-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.btn--cart:disabled {
    background: var(--ink);
    opacity: .5;
    cursor: not-allowed;
}
.btn--cart:disabled:hover { background: var(--ink); }
.wplan__day.is-soldout {
    opacity: .72;
}
.wplan__badge--soldout {
    background: var(--ink);
    color: #fff;
}
.wplan__soldout-note {
    font-size: .78rem;
    color: var(--ink);
    opacity: .8;
    margin: -.2rem 0 .9rem;
}

/* ---- Products page: one card per day ---- */
.daycards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.8rem;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.25rem;
}
.daycards__empty {
    text-align: center;
    color: var(--ink);
    opacity: .8;
    padding: 2rem 1rem;
}
.daycard {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease;
}
.daycard:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 44px rgba(82,73,72,.16);
}
.daycard__img {
    background: var(--cream);
    padding: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}
.daycard__img img { width: min(210px, 68%); }
.daycard__ph {
    width: 100%;
    height: 100%;
    min-height: 148px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    background: repeating-linear-gradient(135deg, rgba(255,94,23,.08) 0 14px, rgba(255,179,44,.08) 14px 28px);
    border: 1.5px dashed rgba(255,94,23,.35);
}
.daycard__ph svg { width: 46px; height: 46px; }
.daycard__ph span {
    font-size: .74rem;
    font-weight: 600;
    color: var(--ink);
    opacity: .7;
    letter-spacing: .04em;
}
.daycard__body {
    padding: 1.2rem 1.3rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    flex: 1;
}
.daycard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.daycard__date {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: .65;
}
.daycard__dish {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--ink-deep);
    margin: 0;
}
.daycard__desc { font-size: .9rem; color: var(--ink); }
.daycard__allergens { font-size: .78rem; color: var(--ink); opacity: .6; }
.daycard__allergens strong { font-weight: 600; opacity: .85; }
.daycard__tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}
.tier-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    background: var(--ivory);
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: .5rem .4rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.tier-pill.is-selected {
    border-color: var(--red);
    background: #FFF3EE;
}
.tier-pill__name {
    font-weight: 600;
    font-size: .82rem;
    color: var(--ink-deep);
}
.tier-pill.is-selected .tier-pill__name::before {
    content: "\2713 ";
    color: var(--red);
}
.tier-pill__pc { font-size: .68rem; color: var(--ink); opacity: .6; }
.tier-pill__price { font-weight: 600; font-size: .82rem; color: var(--red); }
.daycard__cartrow {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: auto;
    padding-top: .4rem;
}
.daycard__cartrow .btn--cart { flex: 1; }
.daycard.is-soldout .daycard__img { opacity: .6; }