/* ============================================================
   LocalBiz Store — Customer-facing storefront (store/*) styles
   ONLY. Scoped under body.lb-store-customer so nothing here can
   ever affect any other page on the platform. Loaded only from
   store/index, store/category, store/product, store/cart views.
   ============================================================ */

body.lb-store-customer .lb-bottom-nav { display: none !important; }

/* Brand-orange success/error banners instead of Bootstrap's default
   green/red, to match the storefront's own branding — scoped to
   customer store pages only. */
body.lb-store-customer .alert-success {
    background: var(--c-primary-light, #fff7ed);
    border-color: var(--c-primary, #ea580c);
    color: var(--c-primary-dark, #9a3412);
}

/* Checkout's "Welcome back" / error banners — the plain Bootstrap alert
   box read as flat and low-effort next to the rest of the checkout card
   styling, so it gets its own pill shape + icon badge treatment. */
.store-co-banner {
    display: flex; align-items: center; gap: 12px;
    border-radius: 14px; padding: 14px 16px; margin-bottom: 16px;
    font-size:.875rem; font-weight: 500; border: 1px solid transparent;
}
.store-co-banner-icon {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.store-co-banner-success {
    background: linear-gradient(135deg, var(--c-primary-light,#fff7ed), var(--c-primary-soft,#ffedd5));
    border-color: var(--c-primary-border,#fed7aa); color: var(--c-primary-dark,#9a3412);
}
.store-co-banner-success .store-co-banner-icon { background: var(--c-primary, #ea580c); color: #fff; }
.store-co-banner-error {
    background: #fef2f2; border-color: #fecaca; color: #991b1b;
}
.store-co-banner-error .store-co-banner-icon { background: #ef4444; color: #fff; }
.store-co-banner ul { padding-left: 18px; margin: 0; }

/* ── Wishlist heart (product cards + detail page) ─────────────── */
.store-pc-wishlist-btn {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 30px; height: 30px; border-radius: 50%; border: none;
    /* Reported on a cream/beige dish photo: a translucent white circle
       (.9 opacity) with a pale grey icon (#94a3b8) barely differs from a
       light photo behind it — the badge itself was never clipped, it just
       had no reliable contrast against food photography, which spans
       every colour from a dark curry to a pale roti. Full-opacity white
       plus a real shadow (matching .store-pc-foodmark's own badge-over-
       photo treatment below) keeps the circle's edge visible regardless
       of what is under it; a darker icon keeps the heart itself legible
       against its own white circle rather than needing the hover state
       to find any contrast at all. */
    background: #fff; color: #64748b;
    display: flex; align-items: center; justify-content: center;
    font-size:.875rem; cursor: pointer; box-shadow: 0 1px 4px rgba(15, 23, 42, .35);
    text-decoration: none; transition: transform .12s, color .12s;
}
.store-pc-wishlist-btn:hover { transform: scale(1.1); color: #ef4444; }
.store-pc-wishlist-btn.active { color: #ef4444; }
.store-pc-wishlist-btn.busy { pointer-events: none; opacity: .6; }

.store-pdp-wishlist-btn {
    border: 1px solid var(--c-border, #e2e8f0); border-radius: 10px;
    width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
    color: #94a3b8; background: #fff; flex-shrink: 0; cursor: pointer; transition: color .12s;
}
.store-pdp-wishlist-btn:hover, .store-pdp-wishlist-btn.active { color: #ef4444; }

/* ── Ratings & reviews ────────────────────────────────────────── */
.store-pc-rating {
    font-size:.75rem; font-weight: 700; color: #b45309; flex-shrink: 0;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 999px;
    padding: 1px 7px;
    display: flex; align-items: center; gap: 3px;
}
.store-pc-rating i { font-size:.625rem; color: #f59e0b; }
.store-pc-coupon {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; max-width: 100%;
    font-size: .6875rem; line-height: 1.3; color: #15803d; background: #f0fdf4;
    border: 1px dashed #86efac; border-radius: 6px; padding: 2px 6px;
}
.store-pc-coupon i { font-size: .6875rem; }
.store-pdp-coupon {
    display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; color: #15803d;
    background: #f0fdf4; border: 1px dashed #86efac; border-radius: 8px; padding: 6px 10px;
}

.store-pdp-rating-summary {
    display: inline-flex; align-items: center; gap: 6px;
    font-size:.875rem; color: var(--c-text, #0f172a); margin-bottom: 6px;
}
.store-pdp-stars { color: #f59e0b; font-size:.875rem; }

.store-pdp-review-cta {
    background: var(--c-primary, #ea580c); border: none; border-radius:10px;
    padding: 8px 16px; font-weight: 600;
    box-shadow: var(--shadow-glow);
    transition: transform .12s, box-shadow .12s, background .12s;
}
.store-pdp-review-cta:hover { background: var(--c-primary-dark, #c2410c); color: #fff; transform: translateY(-1px); }

/* ── Reviews card — mirrors partials/reviews.blade.php (.rev-card) so
   product reviews look like every other listing type's review section. ── */
.store-rev-card {
    background: #fff; border: 1px solid var(--c-border, #e2e8f0);
    border-radius:14px; box-shadow: var(--shadow-sm); overflow: hidden;
}
.store-rev-card-head {
    padding: 18px 22px; border-bottom: 1px solid var(--c-border, #e2e8f0);
    display: flex; align-items: center; justify-content: space-between;
}
.store-rev-card-body { padding: 20px 22px; }
.store-rev-avg-pill {
    display: inline-flex; align-items: center; gap: 5px;
    background: #fefce8; color: #92400e; border-radius: 999px;
    padding: 5px 14px; font-weight: 700; font-size:.875rem;
}
.store-rev-item { padding: 16px 0; border-bottom: 1px solid #f1f5f9; }
.store-rev-item:last-of-type { border-bottom: none; }
.store-rev-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--c-primary, #ea580c), #f59e0b);
    color: #fff; font-weight: 700; font-size:1rem;
    display: flex; align-items: center; justify-content: center;
}
.store-rev-verified-badge {
    display: inline-flex; align-items: center; gap: 3px;
    background: #dcfce7; color: #15803d; font-size:.6875rem; font-weight: 600;
    padding: 2px 7px; border-radius:999px;
}
.store-rev-verified-badge i { font-size: .75rem; }
.store-rev-stars i { font-size:.75rem; color: #f59e0b; }
.store-rev-stars i.bi-star { color: #d1d5db; }
.store-rev-body-text { color: #374151; font-size:.875rem; line-height: 1.65; margin: 6px 0 0; }
.store-rev-owner-reply {
    margin-top: 10px; margin-left: 12px; padding: 10px 12px;
    background: #f0f9ff; border-left: 3px solid var(--c-primary, #ea580c);
    border-radius: 0 8px 8px 0; font-size:.875rem; color: #374151;
}

.store-rev-write-wrap {
    background: #f8fafc; border-radius:14px; padding: 18px;
    border: 1px solid var(--c-border, #e2e8f0);
}

.store-pdp-star-input { font-size:1.5rem; color: #d1d5db; cursor: pointer; }
.store-pdp-star-input i { margin-right: 4px; transition: color .1s, transform .1s; }
.store-pdp-star-input i:hover { transform: scale(1.1); }
.store-pdp-star-input i.bi-star-fill { color: #f59e0b; }

.store-pdp-review-as {
    display: inline-flex; align-items: center; font-size:.875rem;
    background: var(--c-primary-light, #fff7ed); color: var(--c-primary-dark, #9a3412);
    border-radius:10px; padding: 6px 10px; margin-bottom: 4px;
}

/* ── Returning-customer welcome banner ───────────────────────── */
.store-c-welcome-banner {
    display: flex; align-items: center; gap: 10px;
    background: var(--c-primary-light, #fff7ed);
    border-radius:14px; padding: 10px 14px; margin-bottom: 14px;
    color: var(--c-primary-dark, #9a3412); font-size:.875rem;
}
.store-c-welcome-icon {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    background: var(--c-primary, #ea580c); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size:.875rem;
}

body.lb-store-customer { padding-bottom: 0; }

@media (max-width: 991.98px) {
    body.lb-store-customer { padding-bottom: 70px; }
}

/* ── Pagination — centered, compact, wraps instead of overflowing ─── */
body.lb-store-customer .pagination {
    justify-content: center; flex-wrap: wrap; gap: 4px;
}
body.lb-store-customer .pagination .page-link {
    border-radius:10px; margin: 0; min-width: 36px; text-align: center;
}
@media (max-width: 575.98px) {
    body.lb-store-customer .pagination .page-link { padding: .3rem .55rem; font-size:.875rem; }
}

/* ── Store cover video (reuses the linked Business listing's own
   cover_video — see businesses/show.blade.php's hero-wrap for the
   original). A plain 16:9-ish band above the compact header, not the
   business page's full hero treatment — the store page already has its
   own name/logo header right below, so this stays a shorter strip
   purely for the video, not a duplicate hero. ── */
.store-cv-wrap {
    position: relative; width: 100%; max-height: 260px; overflow: hidden;
    /* Reserved before the video's metadata arrives, or the page below jumps. */
    aspect-ratio: 16 / 9;
    background: #000;
}
.store-cv-video {
    width: 100%; height: 100%; max-height: 260px; display: block;
    object-fit: cover;
}
.store-cv-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.05) 0%, rgba(0,0,0,.35) 100%);
    pointer-events: none;
}

/* ── Compact storefront header (logo + name, no big banner) ── */
.store-c-header {
    background: #fff; border-bottom: 1px solid var(--c-border, #e2e8f0);
    padding: 14px 0;
}
.store-c-logo {
    width: 44px; height: 44px; border-radius:14px; flex-shrink: 0;
    background: var(--c-primary-light, #fff7ed); color: var(--c-primary, #ea580c);
    display: flex; align-items: center; justify-content: center;
    font-size:1.25rem; overflow: hidden;
}
.store-c-logo img { width: 100%; height: 100%; object-fit: cover; }
.store-c-name { font-size:1.125rem; font-weight: 700; margin-bottom: 0; color: var(--c-text, #0f172a); }
.store-c-tagline { font-size:.75rem; color: var(--c-text-muted, #64748b); margin-bottom: 0; }

/* ── Product search box ──────────────────────────────────────── */
.store-c-search-form { position: relative; }
.store-c-search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--c-text-muted, #94a3b8); font-size:1rem; pointer-events: none;
}
.store-c-search-input {
    padding-left: 38px; border-radius: 999px; border: 1px solid var(--c-border, #e2e8f0);
    height: 42px; font-size:.875rem;
}
.store-c-search-input:focus {
    border-color: var(--c-primary, #ea580c); box-shadow: 0 0 0 3px var(--c-primary-light, #fff7ed);
}

/* ── Desktop: search box + voice/filters/view-toggle share one row ──
   Below 992px this stays the original stacked layout (search full-width,
   controls on their own row below) — that's already correct for mobile. */
@media (min-width: 992px) {
    .store-c-search-row {
        display: flex; align-items: center; gap: 12px;
    }
    .store-c-search-row .store-c-search-form {
        flex: 1; min-width: 0; margin-bottom: 0 !important;
    }
    .store-c-search-row > div {
        margin-bottom: 0 !important;
    }
}

/* ── Category dropdown — replaces the old horizontally-scrolling pill row.
   A scrollable row of pills hid categories past the fold of the screen
   with no signal more existed, and scrolling it sideways on a phone while
   also trying to scroll the page down fought the same thumb. A <select>
   shows every category the moment it opens (native picker sheet/wheel),
   costs no JS to be keyboard- and screen-reader-operable, and is a
   pattern every phone already teaches its own OS-native way to use. */
.store-c-cat-dropdown-wrap { position: relative; }
.store-c-cat-dropdown {
    width: 100%; appearance: none; -webkit-appearance: none;
    height: 40px; padding: 0 30px 0 34px;
    border-radius: 10px; font-size:.875rem; font-weight: 600;
    border: 1px solid var(--c-border, #e2e8f0); color: var(--c-text, #0f172a);
    background: linear-gradient(#fff, #fffaf6);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.store-c-cat-dropdown:hover { border-color: var(--c-border-strong, #cbd5e1); }
.store-c-cat-dropdown:focus {
    outline: none;
    border-color: var(--c-primary, #ea580c);
    box-shadow: 0 0 0 3px var(--c-primary-light, #fff7ed);
}
.store-c-cat-dropdown-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size:.7rem; color: #fff; background: var(--c-primary, #ea580c);
    pointer-events: none;
}
.store-c-cat-dropdown-chevron {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    font-size:.7rem; color: var(--c-text-muted, #94a3b8); pointer-events: none;
    transition: transform .15s ease;
}
.store-c-cat-dropdown:focus ~ .store-c-cat-dropdown-chevron {
    transform: translateY(-50%) rotate(180deg); color: var(--c-primary, #ea580c);
}

.store-c-meal-banner:active { transform: scale(.995); }
.store-c-meal-banner {
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.store-c-meal-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(154, 52, 18, .28);
}
.store-c-meal-banner:hover .bi-chevron-right { transform: translateX(3px); }
.store-c-meal-banner .bi-chevron-right { display: inline-block; transition: transform .18s ease; }

/* Stays full width at every viewport — capping it on desktop left it a
   different width than the other full-width banners on the same page
   (repeat-order, festival), a mismatched row of bars instead of a
   consistent stack. */

/* ── Search + category dropdown + view-toggle + voice/filter, stuck as
   one unit ── */
.store-c-search-sticky {
    position: sticky; top: 56px; z-index: 1020;
    background: var(--c-bg, #f8fafc);
    padding-top: 4px; padding-bottom: 4px;
}
/* ── Utility icon buttons (Voice Order, Filters) — deliberately NOT
   pill-shaped like the category/navigation pills next to them. These are
   one-off actions ("open the mic", "open filters"), not a choice from a
   set of options, so they get a distinct circular-icon treatment instead
   of visually blending into the category row. */
.store-c-icon-btn {
    position: relative; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1.5px solid var(--c-border, #e2e8f0); background: #fff; color: #64748b;
    font-size: 1rem; cursor: pointer; transition: border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.store-c-icon-btn:hover {
    border-color: var(--c-primary, #ea580c); color: var(--c-primary, #ea580c);
    transform: translateY(-1px); box-shadow: 0 4px 10px rgb(var(--c-primary-rgb,234 88 12) / .15);
}
.store-c-icon-btn-badge {
    position: absolute; top: -4px; right: -4px;
    background: var(--c-primary, #ea580c); color: #fff;
    font-size:.6875rem; font-weight: 700; line-height: 1;
    min-width: 16px; height: 16px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px; border: 2px solid #fff;
}

/* ── List/Grid view toggle (customer product grid) ───────────── */
.store-c-view-toggle {
    display: flex; border: 1px solid var(--c-border, #e2e8f0); border-radius:10px; overflow: hidden;
    flex-shrink: 0;
}
.store-c-view-btn {
    width: 38px; height: 40px; border: none; background: #fff; color: var(--c-text-muted, #64748b);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background .15s, color .15s;
}
.store-c-view-btn + .store-c-view-btn { border-left: 1px solid var(--c-border, #e2e8f0); }
.store-c-view-btn:not(.active):hover { background: var(--c-primary-light,#fff7ed); color: var(--c-primary, #ea580c); }
.store-c-view-btn.active { background: var(--c-primary, #ea580c); color: #fff; }

/* ── Product card polish — subtle hover lift + image zoom ────── */
#store-product-grid .card {
    transition: transform .18s ease, box-shadow .18s ease;
}
#store-product-grid .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg)!important;
}
#store-product-grid .card > a > div:first-child { overflow: hidden; }
#store-product-grid .card > a img {
    transition: transform .3s ease;
}
#store-product-grid .card:hover > a img {
    transform: scale(1.06);
}
#store-product-grid.store-c-view-list .card:hover { transform: none; }

/* Cards fade/slide in as they render, instead of popping in abruptly —
   staggered slightly per card via nth-child so a full grid doesn't
   animate as one flat block. */
#store-product-grid > div {
    animation: store-card-in .35s ease both;
}
@keyframes store-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#store-product-grid > div:nth-child(1) { animation-delay: .02s; }
#store-product-grid > div:nth-child(2) { animation-delay: .06s; }
#store-product-grid > div:nth-child(3) { animation-delay: .1s; }
#store-product-grid > div:nth-child(4) { animation-delay: .14s; }
#store-product-grid > div:nth-child(n+5) { animation-delay: .16s; }

/* List mode reflows the same product-card markup into full-width rows,
   via a couple of layout overrides — no separate template needed. */
#store-product-grid.store-c-view-list > div { flex: 0 0 100%; max-width: 100%; }
#store-product-grid.store-c-view-list .card {
    flex-direction: row; align-items: stretch;
}
#store-product-grid.store-c-view-list .card > a {
    display: flex; flex-direction: row; align-items: center;
    flex: 1 1 0%; min-width: 0;
}
#store-product-grid.store-c-view-list .card > a > div:first-child {
    width: 72px !important; height: 72px !important; flex: 0 0 72px;
    /* The row's align-items:center (above) is right for the text column —
       a one-line product centers nicely against the photo — but it also
       centers the photo itself whenever the row is taller than 72px (an
       extra rating line, a 2-line name), pushing the thumbnail DOWN inside
       the row. The wishlist heart's position is fixed at top:4px from the
       CARD's own top edge (below), not from the photo — so on any taller
       row the photo would drift down and away from the heart while the
       heart stayed put, landing it above the photo on bare card background.
       Confirmed on a real card: cardHeight 96px (rating line present) put
       the photo 12px down from the card top while the heart sat at 4px —
       an 8px gap of heart floating on white. Pinning the photo to the top
       of the row keeps it flush with the heart regardless of how tall the
       text column next to it grows. */
    align-self: flex-start;
}
#store-product-grid.store-c-view-list .card-body { flex: 1 1 0%; min-width: 0; padding: 8px 12px !important; }
#store-product-grid.store-c-view-list .store-pc-cta {
    display: flex; align-items: center; padding: 8px 10px !important;
    flex: 0 0 auto; width: auto;
}
/* Both buttons default to width:100% (grid mode fills the card's full
   width) — that's a circular dependency against .store-pc-cta's own
   auto/content-based width as a flex item in list mode, and rendered
   as an oversized/stretched button. Pin to a sane fixed size instead. */
#store-product-grid.store-c-view-list .store-add-btn,
#store-product-grid.store-c-view-list .store-stepper {
    width: 76px; flex: 0 0 auto;
}
/* A list row is compact by design; the grid card's 44px/20px sizes are
   built for a card twice this tall and dominate the row here. */
#store-product-grid.store-c-view-list .store-add-btn {
    min-height: 36px; font-size:.8125rem; border-radius: 8px;
}
#store-product-grid.store-c-view-list .store-pc-price {
    font-size: 1.0625rem !important;
}
/* .store-stepper's own two buttons are 44px each unconditionally (base
   rule below) — 44+44 already equals this 88px total, leaving zero width
   for .store-qty in between despite its flex:1. The quantity number was
   rendering into a 0-width box: present in the DOM, invisible on screen.
   Narrower buttons in list mode's more compact row give the count a real
   width to flex into. */
#store-product-grid.store-c-view-list .store-stepper button {
    width: 28px; flex-shrink: 0;
}
#store-product-grid.store-c-view-list .store-qty {
    min-width: 20px;
}
/* The wishlist heart is absolutely positioned relative to the whole
   .card, which in grid mode is just the (short, image-topped) card — top
   right lands neatly on the image corner. In list mode the card becomes a
   full-width row, so the same top-right position lands on the Add button
   at the row's far right instead. Anchor it to the thumbnail corner
   (top-left of the row) there instead. */
#store-product-grid.store-c-view-list .store-pc-wishlist-btn {
    top: 4px; left: 4px; right: auto;
    width: 22px; height: 22px; font-size:.6875rem;
}
/* The discount/bestseller badges live in that same top-left corner of the
   thumbnail (see .store-pc-badges below) — fine in grid mode, where the
   image is 150px tall and the heart sits top-RIGHT instead. In list mode
   both were pinned to the same top-left corner of a 72px thumbnail and sat
   directly on top of each other. Badges move to the bottom-left corner
   instead. (The veg/non-veg foodmark used to also compete for a corner of
   this same thumbnail — it no longer lives on the photo at all; see
   .store-pc-foodmark-inline, set next to the product name instead.) */
#store-product-grid.store-c-view-list .store-pc-badges {
    /* !important because the wrapper's grid-mode position comes from an
       inline style (top:6px;left:6px), which beats a plain class selector
       regardless of source order — confirmed by testing this in the
       browser: without !important the badges stayed pinned to top:6px and
       visually sat on the heart exactly as before. */
    top: auto !important; bottom: 4px !important; left: 4px !important;
    max-width: calc(100% - 8px);
}
#store-product-grid.store-c-view-list .store-pc-badge-bestseller {
    width: 20px; height: 20px;
}
#store-product-grid.store-c-view-list .store-pc-badge {
    padding: 3px 5px;
}
/* Same overflow risk as .store-pc-cat-badge above: "99% OFF" is short
   enough to always fit, but nothing enforced that, so this is the same
   ellipsis safety net rather than a guarantee based on today's numbers. */
#store-product-grid.store-c-view-list .store-pc-badge-discount {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: block;
}
/* A dish with no photo reads as a printed menu line in list mode, not a
   grey box. The heart sits on the thumbnail, so it goes with it. */
#store-product-grid.store-c-view-list .store-pc-nophoto > a > div:first-child,
#store-product-grid.store-c-view-list .store-pc-nophoto .store-pc-wishlist-btn {
    display: none !important;
}

/* ── "Trending This Week" strip — same horizontal scroller on every
   viewport (a desktop wrap-into-grid attempt looked worse: 7 items wraps
   to 6+1, leaving one card stranded next to a wide empty gap). Classes
   only, sized to match what the old inline styles produced. ────────── */
.store-c-trending-row {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: thin;
}
.store-c-trending-card { flex-shrink: 0; width: 130px; text-decoration: none; }
.store-c-trending-card-inner { border-radius: 10px; transition: transform .18s ease, box-shadow .18s ease; }
.store-c-trending-card:hover .store-c-trending-card-inner { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.store-c-trending-img, .store-c-trending-img-placeholder {
    width: 100%; height: 90px; object-fit: cover; border-radius: 10px 10px 0 0;
    display: flex; align-items: center; justify-content: center; background: #f1f5f9;
    transition: transform .3s ease;
}
.store-c-trending-card:hover .store-c-trending-img { transform: scale(1.06); }

/* ── Category sidebar — desktop only (≥992px) ────────────────── */
.store-cat-sidebar {
    display: none;
}
@media (min-width: 992px) {
    .store-cat-sidebar {
        display: block; position: sticky; top: 16px;
        background: #fff; border: 1px solid var(--c-border, #e2e8f0);
        border-radius: 14px; padding: 8px; max-height: calc(100vh - 32px); overflow-y: auto;
    }
}
.store-cat-sidebar-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px; border-radius: 10px; font-size:.875rem; font-weight: 600;
    text-decoration: none; color: var(--c-text, #0f172a);
    border-left: 3px solid transparent;
    transition: background .15s, color .15s, transform .15s, border-color .15s;
}
.store-cat-sidebar-link .bi {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    background: #f1f5f9; color: #64748b; font-size:.875rem;
    transition: background .15s, color .15s, transform .15s;
}
.store-cat-sidebar-label { flex: 1 1 0%; min-width: 0; }
.store-cat-sidebar-count {
    flex-shrink: 0; font-size:.6875rem; font-weight: 700;
    color: var(--c-text-muted, #94a3b8); background: #f1f5f9;
    border-radius: 999px; padding: 1px 7px; transition: background .15s, color .15s;
}
/* A little forward motion on hover, not just a colour swap — the icon
   nudges right as if inviting the click, matching the same "something is
   about to happen" language as the meal-plan arrow and card lift below. */
.store-cat-sidebar-link:hover { background: #f8fafc; color: var(--c-primary, #ea580c); transform: translateX(2px); }
.store-cat-sidebar-link:hover .bi { background: var(--c-primary-light,#fff7ed); color: var(--c-primary, #ea580c); transform: scale(1.08); }
.store-cat-sidebar-link:hover .store-cat-sidebar-count { background: var(--c-primary-light,#fff7ed); color: var(--c-primary, #ea580c); }
.store-cat-sidebar-link.active {
    background: var(--c-primary-light, #fff7ed); color: var(--c-primary, #ea580c);
    border-left-color: var(--c-primary, #ea580c);
}
.store-cat-sidebar-link.active .bi { background: var(--c-primary, #ea580c); color: #fff; }
.store-cat-sidebar-link.active .store-cat-sidebar-count { background: #fff; color: var(--c-primary, #ea580c); }

/* ── Bottom navigation (customer) ─────────────────────────── */
.store-customer-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040;
    background: #fff; border-top: 1px solid var(--c-border, #e2e8f0);
    box-shadow: var(--shadow-up);
    padding: 6px 0 env(safe-area-inset-bottom, 6px);
    justify-content: space-around; align-items: center;
}
@media (max-width: 991.98px) {
    .store-customer-nav { display: flex; }
}

/* ── Floating "View Cart" bar (mobile only) ───────────────────
   Sits directly above the bottom nav (which is ~58px tall including its
   own padding + safe-area inset), full-width minus a small side margin so
   it still reads as a distinct floating element rather than another nav
   row. */
.store-view-cart-bar {
    display: none;
    position: fixed; left: 12px; right: 12px;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 10px);
    z-index: 1041;
    background: var(--c-primary, #ea580c); color: #fff;
    border-radius: 14px; padding: 12px 16px;
    align-items: center; justify-content: space-between;
    text-decoration: none; font-weight: 600; font-size: .875rem;
    box-shadow: var(--shadow-glow, 0 8px 20px rgb(var(--c-primary-rgb,234 88 12) / .35));
    animation: store-vcb-in .25s ease-out;
}
.store-view-cart-bar:hover, .store-view-cart-bar:focus { color: #fff; opacity: .95; }
.store-view-cart-bar.d-none { display: none !important; }
@media (max-width: 991.98px) {
    .store-view-cart-bar:not(.d-none) { display: flex; }
}
@keyframes store-vcb-in {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ── Desktop cart button (bottom nav above is mobile/tablet only) ── */
.store-cn-desktop-cart {
    display: none;
    position: fixed; top: 78px; right: 20px; z-index: 1040;
    align-items: center; gap: 6px;
    background: var(--c-primary, #ea580c); color: #fff;
    padding: 8px 14px; border-radius: 999px; text-decoration: none;
    font-weight: 600; font-size:.75rem;
    box-shadow: var(--shadow-glow);
    transition: transform .15s ease, box-shadow .15s ease;
}
.store-cn-desktop-cart:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px rgb(var(--c-primary-rgb,234 88 12) / .4); }
.store-cn-desktop-cart i { font-size:1rem; }
.store-cn-desktop-cart-badge {
    background: #fff; color: var(--c-primary, #ea580c);
    border-radius: 999px; min-width: 16px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size:.6875rem; font-weight: 700; padding: 0 4px;
}
@media (min-width: 992px) {
    .store-cn-desktop-cart { display: inline-flex; }
}

/* ── Add-to-cart "fly to cart" micro-interaction ─────────────── */
.store-fly-dot {
    position: fixed; z-index: 1600; width: 14px; height: 14px;
    border-radius: 50%; background: var(--c-primary, #ea580c);
    pointer-events: none; transition: transform .55s cubic-bezier(.3,.6,.4,1), opacity .55s ease-in;
}
.store-cart-bump { animation: storeCartBump .3s ease; }
@keyframes storeCartBump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.22); }
    100% { transform: scale(1); }
}
.store-cn-item {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    gap: 2px; text-decoration: none; color: var(--c-text-faint, #94a3b8);
    font-size:.6875rem; font-weight: 600; padding: 4px 14px;
    border-radius: 10px; transition: color .15s; min-width: 52px;
}
.store-cn-item i { font-size: 1.25rem; line-height: 1; }
.store-cn-item.active { color: var(--c-primary, #ea580c); }
.store-cn-item.active i {
    background: var(--c-primary-light, #fff7ed); border-radius:10px;
    padding: 4px 10px; display: block;
}
.store-cn-badge {
    position: absolute; top: -2px; right: 4px;
    background: var(--c-primary, #ea580c); color: #fff;
    font-size:.6875rem; font-weight: 700; line-height: 1;
    min-width: 16px; height: 16px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
}
.store-cn-badge.d-none { display: none !important; }

/* ── Product card add-to-cart stepper ─────────────────────────── */
/* Pushed to the bottom of the card's flex column regardless of how
   tall the content above it grows on a given card (rating row present or
   not, a wrapped 2-line title or one line) — without this the Add button
   floated at a different height on every card, so neighbouring cards in
   the same grid row never lined up. */
#store-product-grid:not(.store-c-view-list) .store-pc-cta { margin-top: auto; }
.store-pc-cta { padding: 6px 8px 8px; }
/* Subtle product-meta label, not a loud pill — the card's title/price
   already carry the visual weight, the category is just orienting
   context, so it reads more like a caption than another badge. */
/* Price was 14px/700 — the same size as the dish name right above it, so
   neither read first. On a menu the price is the thing being decided on,
   and it should be legible without leaning in. It also stops being orange:
   that is the Add button's colour now, and two oranges in one small card
   cancel each other out. */
.store-pc-price {
    font-size: 1.0625rem !important; font-weight: 700;
    color: var(--c-text, #0f172a); line-height: 1.2;
    letter-spacing: -.01em; font-variant-numeric: tabular-nums;
    margin-top: 1px;
}
/* The struck-through original stays small and quiet beside it. */
.store-pc-price .text-decoration-line-through { font-size: .75rem; }

/* The square-with-a-dot mark from every Indian menu. Drawn in CSS so it
   stays sharp at any size and adds no request. White plate behind it so it
   reads on a dark photo as well as a pale one. */
.store-pc-foodmark {
    position: absolute; top: 6px; right: 6px; z-index: 2;
    width: 20px; height: 20px; border: 2px solid; border-radius: 4px;
    background: #fff; display: grid; place-items: center;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
}
.store-pc-foodmark > span { width: 9px; height: 9px; border-radius: 50%; display: block; }

/* Same square-with-a-dot mark, set inline next to the product name instead
   of stamped on the photo — matches how the seller's own product row
   (store-owner-product-row.blade.php) and the product detail page already
   show it. Was .store-pc-foodmark, absolutely positioned top-right of the
   thumbnail: the same corner the wishlist heart occupies, which on a 150px
   grid photo was tight and on a 72px list-view thumbnail put two icons on
   top of each other. */
.store-pc-foodmark-inline {
    display: inline-grid; place-items: center; vertical-align: -2px;
    width: 13px; height: 13px; border: 1.5px solid; border-radius: 3px;
    margin-right: 4px;
}
.store-pc-foodmark-inline > span { width: 6px; height: 6px; border-radius: 50%; display: block; }

/* Same mark on the dish's own page, but labelled — there is room for the
   word here, and "Contains egg" is worth spelling out. */
.store-pdp-foodmark {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .75rem; font-weight: 700; letter-spacing: .02em;
    border: 1.5px solid; border-radius: 999px; padding: 2px 10px 2px 6px;
    margin-bottom: 6px;
}
.store-pdp-foodmark-box {
    width: 14px; height: 14px; border: 1.5px solid; border-radius: 3px;
    display: grid; place-items: center; flex-shrink: 0;
}
.store-pdp-foodmark-box > span { width: 7px; height: 7px; border-radius: 50%; display: block; }

/* 2-line clamp rather than a single-line ellipsis. A one-line cut left
   "3 Bati Dal with Gree…" on screen next to two other dal-bati options —
   exactly the word that told them apart was the one that got cut. Applies
   in both grid and list mode; list mode has more horizontal room per card
   but names still run long enough to want the second line. */
.store-pc-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    line-height: 1.25;
    min-height: calc(1.25em * 2);
}

.store-pc-cat-badge {
    background: var(--c-primary-light, #fff7ed); border: 0;
    padding: 2px 8px; border-radius: 999px;
    color: var(--c-primary, #ea580c); font-weight: 700; font-size:.6875rem;
    letter-spacing: .02em; text-transform: none;
    margin-top: 4px;
    /* The label had no overflow handling, so a long category name ran past
       the card and the card's own overflow:hidden sliced it mid-word with
       no ellipsis ("ECO-FRIENDLY GANPATI BAPPA IDO"). block + max-width
       bounds it to the card; the ellipsis makes the truncation deliberate
       instead of looking like a rendering fault. */
    /* A colour pill needs to size to its own text, not fill the card the
       way the old plain-text label did — inline-block + a max-width cap
       keeps the pill compact while still bounding a long category name so
       the card's overflow:hidden can't slice it mid-word ("ECO-FRIENDLY
       GANPATI BAPPA IDO..."); the ellipsis makes that truncation look
       deliberate instead of like a rendering fault. */
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.store-pc-cat-badge .bi { display: inline-block; font-size:.625rem; }

.store-pc-badge {
    font-size:.6875rem; font-weight: 700; letter-spacing: .02em;
    padding: 3px 7px; border-radius: 6px; line-height: 1.2;
    box-shadow: var(--shadow-sm);
    display: inline-flex; align-items: center; gap: 3px;
}
.store-pc-badge-discount { background: #dc2626; color: #fff; }
.store-pc-badge-bestseller {
    background: #f59e0b; color: #fff;
    width: 24px; height: 24px; padding: 0 !important;
    border-radius: 50%; justify-content: center;
}
.store-pc-badge-bestseller .bi { font-size:.8125rem; }
/* The one button the whole shop depends on.
   It was #16a34a — green, which everywhere else on this site means
   WhatsApp — and 32px tall, under the 44px a fingertip needs. It is now
   the brand colour, so "order" and "message us" stop looking alike, and
   tall enough to hit on a phone. */
.store-add-btn {
    width: 100%; border: 1px solid var(--c-primary, #ea580c); background: var(--c-primary, #ea580c);
    color: #fff; font-weight: 700; font-size:.8125rem;
    border-radius:9px; min-height: 38px; padding: 0 8px;
    transition: background .15s, transform .1s, box-shadow .15s;
}
.store-add-btn:hover { background: var(--c-primary-hover,#c2410c); border-color: var(--c-primary-hover,#c2410c); transform: translateY(-1px); box-shadow: 0 6px 14px rgb(var(--c-primary-rgb,234 88 12) / .3); }
.store-add-btn:active { background: var(--c-primary-hover,#c2410c); border-color: var(--c-primary-hover,#c2410c); transform: scale(.96); box-shadow: none; }
.store-add-btn:disabled { background: #94a3b8; border-color: #94a3b8; }
.store-pc-variant-picker {
    display: flex; align-items: center; gap: 6px;
}
/* A product with variants gets a select and a + instead of one wide Add,
   and a product already in the cart gets a stepper. All three are the same
   act as pressing Add, so they follow it: brand orange, and 44px so a
   fingertip lands on them. They were green and 32px, which meant the card
   changed colour and shrank its target the moment you used it. */
.store-pc-variant-select {
    flex: 1; min-width: 0; height: 44px; border: 1px solid #cbd5e1; border-radius:10px;
    font-size:.875rem; padding: 0 8px; background: #fff; color: #334155;
}
.store-pc-variant-add {
    flex-shrink: 0; width: 44px; height: 44px;
    border: 1px solid var(--c-primary, #ea580c); background: var(--c-primary, #ea580c);
    color: #fff; border-radius:10px; display: flex; align-items: center; justify-content: center;
    font-size: 1.125rem; transition: background .15s, transform .1s;
}
.store-pc-variant-add:hover, .store-pc-variant-add:active { background: var(--c-primary-hover,#c2410c); border-color: var(--c-primary-hover,#c2410c); }
.store-pc-variant-add:active { transform: scale(.92); }
.store-pc-variant-add:disabled { background: #94a3b8; border-color: #94a3b8; }
.store-stepper {
    display: flex; align-items: center; justify-content: space-between;
    border: 1px solid var(--c-primary, #ea580c); border-radius:10px;
    overflow: hidden; height: 44px;
    animation: store-stepper-in .18s ease;
}
@keyframes store-stepper-in { from { transform: scale(.92); opacity: .6; } to { transform: scale(1); opacity: 1; } }
.store-stepper button {
    background: var(--c-primary, #ea580c); color: #fff; border: none;
    width: 44px; height: 100%; font-weight: 700; font-size: 1.125rem;
    display: flex; align-items: center; justify-content: center;
}
/* Was a <span>, now a typeable <input> — a customer wanting 10 of
   something had to tap + nine times otherwise. Reset to look identical to
   the old span, and drop the number spinner arrows. */
.store-stepper .store-qty {
    flex: 1; text-align: center; font-weight: 700; font-size:.875rem; color: var(--c-primary, #ea580c);
    border: none; background: transparent; padding: 0; height: 100%;
    min-width: 0; -moz-appearance: textfield;
}
.store-stepper .store-qty::-webkit-outer-spin-button,
.store-stepper .store-qty::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.store-stepper .store-qty:focus { outline: none; background: var(--c-primary-light,#fff7ed); }
.store-add-spinner {
    width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; display: inline-block; animation: store-spin .6s linear infinite;
}
@keyframes store-spin { to { transform: rotate(360deg); } }

/* ── Toast container (scoped positioning) ─────────────────────── */
.store-toast-container { z-index: 1080; }

/* Hide the global support-chat FAB entirely on customer storefront pages —
   the bottom nav's own Chat/Call tab already covers this, and the FAB
   overlapped it. Scoped rule only; shared support-bot.blade.php untouched. */
body.lb-store-customer .sb-fab,
body.lb-store-customer .sb-panel { display: none !important; }

/* Hide the internal owner-inbox messages FAB (x-owner-inbox-popup) too —
   it's the platform's own message-center bubble, unrelated to shopping,
   and it visually collides with the desktop cart button below. */
body.lb-store-customer #oi-fab,
body.lb-store-customer #oi-panel { display: none !important; }

/* ── Checkout page ────────────────────────────────────────────── */
.store-co-card {
    background: #fff; border: 1px solid var(--c-border, #e2e8f0);
    border-radius: 14px; padding: 20px;
    box-shadow: var(--shadow-sm);
}
.store-co-field { margin-bottom: 16px; }
/* Numbered sections of the one-page checkout. */
.store-co-step {
    display: flex; align-items: center; gap: 10px;
    font-size: 1rem; font-weight: 700; margin: 0 0 14px;
}
.store-co-step:not(:first-child) { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--c-border, #e2e8f0); }
.store-co-step-num {
    flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-primary, #ea580c); color: #fff; font-size: .8125rem; font-variant-numeric: tabular-nums;
}
.store-co-pay-only {
    display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 10px;
    background: var(--c-primary-light, #fff7ed); color: var(--c-primary-dark, #9a3412); font-weight: 600; font-size: .875rem;
}
.store-co-label {
    display: block; font-size:.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--c-text-muted, #64748b); margin-bottom: 6px;
}
.store-co-input {
    border-radius: 10px; font-size:.875rem;
    border-color: var(--c-border, #e2e8f0); padding: 10px 12px;
    transition: border-color .15s, box-shadow .15s;
}
.store-co-input:focus {
    border-color: var(--c-primary, #ea580c);
    box-shadow: 0 0 0 3px rgb(var(--c-primary-rgb,234 88 12) / .12);
}
.store-co-option-group { display: flex; gap: 8px; flex-wrap: wrap; }
.store-co-option {
    position: relative; flex: 1 1 150px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--c-border, #e2e8f0); border-radius: 10px;
    padding: 10px 12px; font-size:.875rem; font-weight: 600;
    color: var(--c-text-muted, #64748b); cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.store-co-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.store-co-option:has(input:checked),
.store-co-option.store-co-option-checked {
    border-color: var(--c-primary, #ea580c); background: var(--c-primary-light, #fff7ed);
    color: var(--c-primary, #ea580c);
}

/* Coupon "Apply" — a solid brand-gradient pill rather than Bootstrap's flat
   outline-secondary, so it reads as the one actionable button next to the
   coupon box instead of blending into the form chrome around it. */
.store-co-btn-apply {
    border: none; border-radius: 10px; padding: 10px 18px;
    font-weight: 700; font-size: .8125rem; color: #fff; white-space: nowrap;
    background: linear-gradient(135deg, var(--c-primary, #ea580c), var(--c-primary-2, #f97316));
    box-shadow: 0 2px 8px rgb(var(--c-primary-rgb,234 88 12) / .28);
    transition: transform .15s, box-shadow .15s, opacity .15s;
}
.store-co-btn-apply:hover:not(:disabled) {
    transform: translateY(-1px); box-shadow: 0 4px 12px rgb(var(--c-primary-rgb,234 88 12) / .38);
    color: #fff;
}
.store-co-btn-apply:active:not(:disabled) { transform: translateY(0); }
.store-co-btn-apply:disabled { opacity: .65; box-shadow: none; }

/* Map pin toggle ("Pin exact location" / "Hide map") — an outlined pill
   that fills solid on hover, matching the weight of the other optional
   action next to it (Use my location) without competing with it. */
.store-co-btn-map {
    border: 1.5px solid var(--c-primary, #ea580c); border-radius: 10px;
    padding: 9px 14px; font-weight: 600; font-size: .8125rem;
    color: var(--c-primary, #ea580c); background: var(--c-primary-light, #fff7ed);
    transition: background .15s, color .15s, transform .15s;
}
.store-co-btn-map:hover {
    background: var(--c-primary, #ea580c); color: #fff; transform: translateY(-1px);
}

/* "Use my location" — filled, since it's the one-click shortcut most
   customers will actually reach for over typing a search query. */
.store-co-btn-geo {
    border: none; border-radius: 10px; padding: 9px 14px;
    font-weight: 700; font-size: .8125rem; color: #fff; white-space: nowrap;
    background: linear-gradient(135deg, var(--c-primary, #ea580c), var(--c-primary-2, #f97316));
    box-shadow: 0 2px 8px rgb(var(--c-primary-rgb,234 88 12) / .28);
    transition: transform .15s, box-shadow .15s;
}
.store-co-btn-geo:hover {
    transform: translateY(-1px); box-shadow: 0 4px 12px rgb(var(--c-primary-rgb,234 88 12) / .38);
    color: #fff;
}

/* Map card itself — the leaflet canvas looked like a bare rectangle
   dropped into the form; a border + shadow ties it visually to the rest
   of the store-co-card chrome around it. */
.store-co-map-wrap {
    border: 1px solid var(--c-border, #e2e8f0); border-radius: 14px;
    padding: 12px; background: #f8fafc;
}
.store-co-map-canvas {
    border-radius: 10px; overflow: hidden;
    border: 1px solid var(--c-border, #e2e8f0);
    box-shadow: 0 1px 4px rgba(15, 23, 42, .06);
}
.store-co-latlng-pill {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 8px; padding: 4px 10px; border-radius: 999px;
    background: var(--c-primary-light, #fff7ed); color: var(--c-primary-dark, #9a3412);
    font-size: .75rem; font-weight: 600;
}
/* Empty before a pin is dropped — the pill shape with padding would
   otherwise show as a stray blank orange bubble on first render. */
.store-co-latlng-pill:empty { display: none; }

@media (min-width: 992px) {
    .store-co-summary { position: sticky; top: 16px; }
}

/* ── Cart page ────────────────────────────────────────────────── */
.store-cart-item {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid var(--c-border, #e2e8f0);
    border-radius:14px; padding: 12px; margin-bottom: 10px;
    transition: opacity .15s;
}
.store-cart-item-busy { opacity: .55; pointer-events: none; }
.store-cart-item-img {
    width: 56px; height: 56px; background: #f1f5f9; border-radius:10px;
    flex-shrink: 0; overflow: hidden; display: flex; align-items: center;
    justify-content: center; color: #cbd5e1;
}
.store-cart-item-info { flex: 1 1 auto; min-width: 0; }
.store-cart-item-stepper {
    display: flex; align-items: center; border: 1px solid var(--c-border, #e2e8f0);
    border-radius:10px; overflow: hidden; flex-shrink: 0;
}
.store-cart-qty-btn {
    width: 30px; height: 32px; border: none; background: #f8fafc;
    font-size: 1rem; font-weight: 600; color: var(--c-text, #0f172a); cursor: pointer;
}
.store-cart-qty-btn:hover { background: #f1f5f9; }
/* Was a <span>, now a typeable <input> — a customer wanting a quantity of
   10 had to tap + nine times otherwise. Reset to look identical to the
   old span (no native input chrome), and drop the number spinner arrows,
   which fought with the custom +/- buttons already either side of it. */
.store-cart-qty-value {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 32px; font-weight: 600; font-size:.875rem;
    border: none; border-left: 1px solid var(--c-border, #e2e8f0); border-right: 1px solid var(--c-border, #e2e8f0);
    background: transparent; color: inherit; text-align: center; padding: 0;
    -moz-appearance: textfield;
}
.store-cart-qty-value::-webkit-outer-spin-button,
.store-cart-qty-value::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.store-cart-qty-value:focus { outline: none; background: var(--c-primary-light,#fff7ed); }
.store-cart-item-total { min-width: 64px; text-align: right; color: var(--c-primary, #ea580c); flex-shrink: 0; }
.store-cart-remove-btn {
    border: none; background: transparent; color: #ef4444; padding: 4px;
    flex-shrink: 0; font-size: 1rem; cursor: pointer;
}
.store-cart-remove-btn:hover { color: #dc2626; }

/* Desktop/default: the actions-row wrapper (and its inner total+remove
   grouping div) stay invisible to layout — their children act as plain
   direct flex items of .store-cart-item, same as before this wrapper
   was introduced for the mobile grid below. */
.store-cart-item-actions-row,
.store-cart-item-actions-row > .d-flex { display: contents; }

/* Narrow phones: image(56) + title/price + stepper(~92) + total(64) +
   remove(~24) don't fit on one line. Switch to a proper 2-column grid
   instead of a flex-wrap reflow (which zigzagged: row 1 left-aligned,
   row 2 right-aligned, nothing lined up) — image spans both grid rows
   on the left, title/price sits top-right, stepper+total+remove sits
   bottom-right, so everything aligns to the same left/right edges. */
@media (max-width: 420px) {
    .store-cart-item {
        display: grid;
        grid-template-columns: 56px 1fr;
        grid-template-rows: auto auto;
        column-gap: 12px; row-gap: 8px;
        padding: 10px;
    }
    .store-cart-item-img { grid-column: 1; grid-row: 1 / 3; }
    .store-cart-item-info { grid-column: 2; grid-row: 1; }
    .store-cart-item-actions-row {
        grid-column: 2; grid-row: 2;
        display: flex !important; align-items: center; justify-content: space-between;
    }
    .store-cart-item-actions-row > .d-flex { display: flex !important; }
}

.store-cart-summary-panel {
    position: sticky; bottom: 74px; margin-top: 14px;
    background: #fff; border: 1px solid var(--c-border, #e2e8f0);
    border-radius: 14px; padding: 10px; box-shadow: var(--shadow-up);
    display: flex; align-items: center; gap: 10px;
}
@media (min-width: 992px) {
    .store-cart-summary-panel { position: static; }
}
.store-cart-summary-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.store-cart-update-btn {
    flex-shrink: 0; width: 40px; height: 40px;
    border: none; background: #16a34a;
    color: #fff; font-size:1.125rem;
    border-radius: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.store-cart-update-btn:hover { background: #15803d; }
.store-cart-update-btn:disabled { opacity: .7; cursor: default; }
.store-cart-update-btn-spinning i { animation: store-cart-spin .7s linear infinite; }
@keyframes store-cart-spin { to { transform: rotate(360deg); } }
.store-cart-combo-savings {
    display: flex; align-items: center; gap: 6px;
    background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
    font-size: .8125rem; font-weight: 600;
    border-radius: 8px; padding: 7px 12px; margin-bottom: 8px;
}
.store-cart-combo-savings i { color: #16a34a; }
.store-cart-subtotal {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; justify-content: center;
    background: #f8fafc; border-radius: 10px; padding: 8px 14px;
}
.store-cart-checkout-btn { flex-shrink: 0; padding: 10px 22px; }
.store-cart-checkout-btn.disabled { opacity: .55; pointer-events: none; cursor: default; }

/* ── Filament-style button loading state ─────────────────────── */
.store-fila-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.store-fila-spinner { display: none; }
.store-fila-btn.store-fila-loading { pointer-events: none; opacity: .85; }
.store-fila-btn.store-fila-loading .store-fila-btn-content { visibility: hidden; }
.store-fila-btn.store-fila-loading .store-fila-spinner {
    display: block; position: absolute; top: 50%; left: 50%;
    width: 16px; height: 16px; margin: -8px 0 0 -8px;
    border: 2px solid rgba(255,255,255,.5); border-top-color: #fff;
    border-radius: 50%; animation: store-fila-spin .6s linear infinite;
}
.store-cart-update-btn.store-fila-loading .store-fila-spinner {
    border-color: rgba(255,255,255,.5); border-top-color: #fff;
}
@keyframes store-fila-spin { to { transform: rotate(360deg); } }
@media (max-width: 420px) {
    .store-cart-subtotal { padding: 8px 10px; }
    .store-cart-checkout-btn { padding: 10px 14px; font-size:.875rem; }
}

/* ── Product detail page (PDP) ───────────────────────────────── */
.store-pdp-back { display: inline-block; margin-bottom: 4px; }

.store-pdp-gallery-main {
    /* No fixed aspect-ratio: that forced a square box regardless of the
       photo's own shape, and once object-fit switched from cover to
       contain (so the full photo shows, not a cropped fill), a
       non-square photo left visible grey letterboxing above/below it
       inside that square -- exactly the empty space this was set up to
       avoid. The box now hugs whatever height the image (capped by
       max-height on the img itself) actually renders at. */
    position: relative; border-radius: 14px; overflow: hidden;
    background: #f1f5f9; display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow);
}

.store-pdp-category-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--c-primary-light, #fff7ed); color: var(--c-primary-dark, #9a3412);
    font-size:.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    border-radius: 999px; padding: 5px 12px; margin-bottom: 8px;
}

.store-pdp-stock-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size:.75rem; font-weight: 700; border-radius: 999px; padding: 5px 12px;
}
.store-pdp-stock-pill-in { background: #dcfce7; color: #15803d; }
.store-pdp-stock-pill-out { background: #fee2e2; color: #b91c1c; }
.store-pdp-stock-pill-unknown { background: #f1f5f9; color: #64748b; }
.store-pdp-stock-pill-amazon { background: var(--c-primary-soft,#ffedd5); color: var(--c-primary-dark,#9a3412); }

.store-pdp-variant-group-label {
    font-size:.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--c-text-muted, #64748b);
}
.store-pdp-variant-select {
    display: block; width: 100%; max-width: 320px;
    border-radius: 10px; border-color: var(--c-border, #e2e8f0);
    font-weight: 600; font-size:.875rem; height: 40px;
    transition: border-color .15s, box-shadow .15s;
}
.store-pdp-variant-select:focus {
    border-color: var(--c-primary, #ea580c);
    box-shadow: 0 0 0 3px rgb(var(--c-primary-rgb,234 88 12) / .12);
}
@media (max-width: 767.98px) {
    .store-pdp-gallery-main img { max-height: 260px; }
}
.store-pdp-discount-badge {
    position: absolute; top: 12px; left: 12px;
    background: #16a34a; color: #fff; font-size: .75rem; font-weight: 700;
    padding: 4px 10px; border-radius: 999px;
}
.store-pdp-thumbs {
    display: flex; gap: 8px; margin-top: 10px; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.store-pdp-thumbs::-webkit-scrollbar { display: none; }
.store-pdp-thumb {
    width: 64px; height: 64px; object-fit: cover; border-radius:10px;
    cursor: pointer; flex-shrink: 0; border: 2px solid transparent; opacity: .7;
    transition: border-color .15s, opacity .15s;
}
.store-pdp-thumb:hover { opacity: 1; }
.store-pdp-thumb.active { border-color: var(--c-primary, #ea580c); opacity: 1; }

.store-pdp-title { font-size:1.5rem; margin-bottom: 4px; }

.store-pdp-description {
    font-size:.875rem; line-height: 1.7; color: var(--c-text, #334155);
    background: #f8fafc; border-radius: 10px; padding: 12px 14px; margin-bottom: 16px;
}

.store-pdp-daily-note {
    background: var(--c-primary-light,#fff7ed); border: 1px solid var(--c-primary-border,#fed7aa); border-radius: 10px;
    padding: 12px 14px; margin-bottom: 16px;
}
.store-pdp-daily-note-label {
    font-size:.75rem; font-weight: 700; color: var(--c-primary-dark,#9a3412); text-transform: uppercase; letter-spacing: .03em;
    display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.store-pdp-daily-note-text { font-size:.875rem; line-height: 1.6; color: #431407; margin: 0 0 4px; white-space: pre-line; }
.store-pdp-daily-note-time { font-size:.75rem; color: #b45309; }
/* Note hasn't been touched in 24h+ — still shown (long-lived notes are
   valid for non-daily categories like grocery/clothing), but visibly
   dimmed so a customer can tell it may not reflect today. */
.store-pdp-daily-note-stale { background: #f8fafc; border-color: #e2e8f0; }
.store-pdp-daily-note-stale .store-pdp-daily-note-label { color: #64748b; }
.store-pdp-daily-note-stale .store-pdp-daily-note-text { color: #475569; }
.store-pdp-daily-note-stale .store-pdp-daily-note-time { color: #94a3b8; }

/* Every control across both rows (qty stepper, Add to Cart, Share, Chat
   with Seller) shares one height, and every full-width control fills its
   column edge to edge, so the whole action area reads as one matched
   set of pills instead of some being full pills and others floating
   compact boxes with empty space around them. */
.store-pdp-add-btn {
    min-width: 0; height: 40px; padding-top: 0; padding-bottom: 0;
    font-size:.875rem; box-shadow: var(--shadow-glow);
    transition: transform .12s, box-shadow .12s, opacity .12s;
}
.store-pdp-add-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-glow); }
.store-pdp-add-btn:disabled { box-shadow: none; opacity: .55; }
/* Full-width case (variant row present): same wrapper-with-max-width
   pattern as .store-pdp-secondary-actions below it (a container div
   capped at 420px, button just fills it with width:100%) instead of the
   button carrying its own inline max-width — keeps both rows built the
   exact same way so they can't drift out of alignment with each other. */
.store-pdp-add-btn-wrap { max-width: 420px; }

/* Affiliate CTA base: rounded like every other store-pdp-add-btn. Colour
   itself comes from .store-affiliate-btn-<platform> below, not from the
   seller's own accent -- once a store carries links to more than one
   marketplace, a single shared colour made an Amazon button and a
   Flipkart button indistinguishable at a glance. Falls back to the
   seller's accent only for an unrecognised host (affiliatePlatformSlug()
   returns "store"). */
.store-pdp-amazon-btn {
    background: var(--c-primary, #ea580c); border-radius: 10px;
}
.store-pdp-amazon-btn:hover { color: #fff; }
.store-pdp-amazon-note { font-size: .8125rem; color: var(--c-text-muted, #64748b); margin: 8px 0 0; }

/* Per-marketplace brand colours for the affiliate CTA -- grid card,
   both PDP buttons, and the mobile sticky bar all wear one of these via
   store-affiliate-btn-{{ affiliatePlatformSlug() }}. Real brand colours
   so "Flipkart" reads as Flipkart at a glance, not as this shop's own
   orange with different text. */
.store-affiliate-btn-amazon { background: #FF9900; border-color: #FF9900; }
.store-affiliate-btn-amazon:hover, .store-affiliate-btn-amazon:active { background: #e68a00; border-color: #e68a00; }
.store-affiliate-btn-flipkart { background: #2874F0; border-color: #2874F0; }
.store-affiliate-btn-flipkart:hover, .store-affiliate-btn-flipkart:active { background: #1d5fd1; border-color: #1d5fd1; }
.store-affiliate-btn-myntra { background: #FF3F6C; border-color: #FF3F6C; }
.store-affiliate-btn-myntra:hover, .store-affiliate-btn-myntra:active { background: #e12e5a; border-color: #e12e5a; }
.store-affiliate-btn-ajio { background: #2B2A29; border-color: #2B2A29; }
.store-affiliate-btn-ajio:hover, .store-affiliate-btn-ajio:active { background: #171716; border-color: #171716; }
.store-affiliate-btn-meesho { background: #9F2089; border-color: #9F2089; }
.store-affiliate-btn-meesho:hover, .store-affiliate-btn-meesho:active { background: #7f1a6e; border-color: #7f1a6e; }

/* No-variant products: qty stepper and Add to Cart share one row — same
   50/50 column split as the Share/Chat with Seller row below it. */
.store-pdp-add-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; max-width: 420px; }
.store-pdp-add-form .store-pdp-qty-wrap { flex: 1 1 0; min-width: 0; display: flex; }
.store-pdp-add-btn-half { flex: 1 1 auto; min-width: 130px; }

/* Variant select(s) + qty stepper share one row instead of stacking, so
   picking a size/color and setting quantity reads as one step rather than
   two separate ones before the Add to Cart button below. Same 50/50
   column split as the Share/Chat row underneath it. */
.store-pdp-variant-qty-row { display: flex; align-items: center; gap: 8px; max-width: 420px; }
.store-pdp-variant-groups { flex: 1 1 0; min-width: 0; }
.store-pdp-variant-group-item:not(:last-child) { margin-bottom: 8px; }
.store-pdp-qty-wrap { flex: 1 1 0; min-width: 0; display: flex; }

/* The stepper fills its full column edge to edge like the other pill
   controls — minus/plus pinned to the ends, the number stretching to
   absorb the rest of the space, instead of a small compact cluster
   floating with empty padding around it inside a full-width border. */
.store-pdp-qty-stepper {
    display: flex; align-items: center; width: 100%;
    border: 1px solid var(--c-border, #e2e8f0);
    border-radius: 10px; overflow: hidden; background: #fff;
}
.store-pdp-qty-btn {
    width: 40px; height: 40px; flex-shrink: 0; border: none; background: #f8fafc;
    font-size:1.125rem; font-weight: 700; color: var(--c-text, #0f172a); cursor: pointer;
    transition: background .12s, color .12s;
}
.store-pdp-qty-btn:hover { background: var(--c-primary-light, #fff7ed); color: var(--c-primary, #ea580c); }
.store-pdp-qty-input {
    flex: 1 1 auto; width: auto; min-width: 0; height: 40px; border: none;
    border-left: 1px solid var(--c-border, #e2e8f0); border-right: 1px solid var(--c-border, #e2e8f0);
    text-align: center; font-weight: 700; -moz-appearance: textfield;
}
.store-pdp-qty-input::-webkit-outer-spin-button,
.store-pdp-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.store-pdp-oos-btn { background: #94a3b8; border-radius: 10px; height: 40px; }

.store-pdp-secondary-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; max-width: 420px; }
.store-pdp-secondary-btn {
    /* min-width so a larger browser/OS text setting can wrap this onto its
       own line (via flex-wrap above) instead of the whole row refusing to
       shrink below its nowrap button text and forcing the page wider than
       the viewport. */
    flex: 1 1 auto; min-width: 140px; height: 40px; display: flex; align-items: center; justify-content: center;
    font-size:.875rem; font-weight: 600; border-radius: 10px; padding: 0 10px;
    transition: transform .12s;
}
.store-pdp-secondary-btn:hover { transform: translateY(-1px); }

/* Mobile sticky add-to-cart bar — sits just above the bottom nav. */
.store-pdp-sticky-bar {
    position: fixed; left: 0; right: 0; bottom: 62px; z-index: 1039;
    background: #fff; border-top: 1px solid var(--c-border, #e2e8f0);
    box-shadow: var(--shadow-up);
    padding: 10px 14px env(safe-area-inset-bottom, 10px);
    display: flex; align-items: center; gap: 12px;
}
.store-pdp-sticky-price { flex-shrink: 0; font-size:1rem; }
/* On a product page the sticky bar is the only bottom bar: Home and Cart
   move into it and the four-icon nav and floating View Cart bar step aside. */
.store-pdp-bar-icon {
    position: relative; flex: 0 0 44px; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; background: #f1f5f9; color: #475569;
    font-size: 1.25rem; text-decoration: none;
}
.store-pdp-bar-icon:hover, .store-pdp-bar-icon:focus { color: var(--c-primary, #ea580c); }
.store-pdp-bar-icon .store-cn-badge { top: -4px; right: -4px; }
@media (max-width: 991.98px) {
    body.lb-pdp-onebar .store-customer-nav,
    body.lb-pdp-onebar .store-view-cart-bar { display: none !important; }
    body.lb-pdp-onebar .store-pdp-sticky-bar {
        bottom: 0; z-index: 1040; gap: 8px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    }
}

/* ── Sort & Filter sheet — premium inputs, replaces bare Bootstrap
   form-control/form-select/form-check defaults which read as an unstyled
   admin form dropped onto the storefront. ────────────────────────────── */
.store-c-sheet {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(15, 23, 42, 0);
    transition: background .25s ease;
}
.store-c-sheet.store-c-sheet-show { background: rgba(15, 23, 42, .5); }
.store-c-sheet-panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: #fff; border-radius: 18px 18px 0 0;
    max-height: 80vh; overflow: auto;
    padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -12px 32px rgba(15, 23, 42, .18);
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
}
.store-c-sheet.store-c-sheet-show .store-c-sheet-panel { transform: translateY(0); }
.store-c-sheet-handle {
    width: 36px; height: 4px; border-radius: 999px;
    background: var(--c-border, #e2e8f0);
    margin: 4px auto 14px;
}
.store-c-sheet-title { font-size: 1.0625rem; font-weight: 800; color: var(--c-text, #0f172a); }
.store-c-sheet-close {
    width: 30px; height: 30px; border-radius: 50%; border: 0;
    background: #f1f5f9; color: #64748b;
    display: flex; align-items: center; justify-content: center;
    font-size: .8125rem; cursor: pointer; transition: background .15s;
}
.store-c-sheet-close:hover { background: #e2e8f0; }
.store-c-sheet-section { margin-bottom: 18px; }
.store-c-sheet-label {
    display: block; font-size: .75rem; font-weight: 700;
    color: var(--c-text-muted, #64748b); text-transform: uppercase;
    letter-spacing: .04em; margin-bottom: 8px;
}
.store-c-sheet-select-wrap { position: relative; }
.store-c-sheet-select {
    width: 100%; appearance: none; -webkit-appearance: none;
    height: 46px; padding: 0 34px 0 14px;
    border-radius: 12px; border: 1.5px solid var(--c-border, #e2e8f0);
    background: #f8fafc; color: var(--c-text, #0f172a);
    font-size: .875rem; font-weight: 600; cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.store-c-sheet-select:focus {
    outline: none; border-color: var(--c-primary, #ea580c); background: #fff;
    box-shadow: 0 0 0 3px var(--c-primary-light, #fff7ed);
}
.store-c-sheet-select-chevron {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    font-size: .75rem; color: var(--c-text-muted, #94a3b8); pointer-events: none;
}
.store-c-sheet-input-wrap {
    position: relative; flex: 1 1 0%; min-width: 0;
}
.store-c-sheet-input-prefix {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    font-size: .875rem; font-weight: 700; color: var(--c-text-muted, #94a3b8);
    pointer-events: none;
}
.store-c-sheet-input {
    width: 100%; height: 46px; padding: 0 14px 0 28px;
    border-radius: 12px; border: 1.5px solid var(--c-border, #e2e8f0);
    background: #f8fafc; color: var(--c-text, #0f172a);
    font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums;
    transition: border-color .15s, box-shadow .15s;
}
.store-c-sheet-input:focus {
    outline: none; border-color: var(--c-primary, #ea580c); background: #fff;
    box-shadow: 0 0 0 3px var(--c-primary-light, #fff7ed);
}
.store-c-sheet-input::placeholder { color: #cbd5e1; font-weight: 500; }
.store-c-sheet-input-dash { color: var(--c-text-muted, #94a3b8); font-weight: 600; flex-shrink: 0; }

/* Toggle rows replace bare .form-check squares — the whole row is
   tappable (label wraps both text and switch), which matters more on a
   phone than a 16px checkbox target ever could. */
.store-c-sheet-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 12px 4px; margin-bottom: 4px;
    border-bottom: 1px solid var(--c-border-light, #f1f5f9);
    cursor: pointer;
}
.store-c-sheet-toggle-label {
    display: flex; align-items: center; gap: 8px;
    font-size: .875rem; font-weight: 600; color: var(--c-text, #0f172a);
}
.store-c-sheet-switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.store-c-sheet-switch input {
    position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1;
}
.store-c-sheet-switch-track {
    position: absolute; inset: 0; border-radius: 999px;
    background: #cbd5e1; transition: background .18s ease;
}
.store-c-sheet-switch-thumb {
    position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
    transition: transform .18s cubic-bezier(.32, .72, 0, 1);
}
.store-c-sheet-switch input:checked ~ .store-c-sheet-switch-track { background: var(--c-primary, #ea580c); }
.store-c-sheet-switch input:checked ~ .store-c-sheet-switch-track .store-c-sheet-switch-thumb { transform: translateX(18px); }
.store-c-sheet-switch input:focus-visible ~ .store-c-sheet-switch-track { box-shadow: 0 0 0 3px var(--c-primary-light, #fff7ed); }

.store-c-sheet-apply-btn {
    width: 100%; border: 0; border-radius: 12px; height: 48px;
    background: var(--c-primary, #ea580c); color: #fff;
    font-weight: 700; font-size: .9375rem; margin-top: 6px;
    box-shadow: 0 6px 16px rgb(var(--c-primary-rgb,234 88 12) / .28);
    transition: background .15s, transform .1s;
}
.store-c-sheet-apply-btn:active { transform: scale(.98); background: var(--c-primary-hover,#c2410c); }
.store-c-sheet-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 6px; }
.store-c-sheet-actions .store-c-sheet-apply-btn { margin-top: 0; }
.store-c-sheet-clear-btn {
    width: 100%; height: 48px; border-radius: 12px; background: #fff;
    border: 1.5px solid var(--c-border, #e2e8f0);
    color: var(--c-text, #0f172a); font-weight: 700; font-size: .9375rem;
}
.store-c-sheet-clear-btn:hover { border-color: var(--c-primary, #ea580c); color: var(--c-primary, #ea580c); }
.store-c-icon-btn.is-active {
    border-color: var(--c-primary, #ea580c); color: var(--c-primary, #ea580c);
    background: var(--c-primary-light, #fff7ed);
}

/* Desktop: a full-width strip pinned to the bottom of a 1900px viewport
   reads as broken, not as a deliberate mobile pattern shown on the wrong
   screen. From the same breakpoint the rest of the storefront switches
   layouts (lg, 992px) this becomes a centred dialog instead — the handle
   bar (a "swipe to dismiss" affordance) drops too, since nothing here is
   swiped on desktop. */
@media (min-width: 992px) {
    .store-c-sheet { display: flex; align-items: center; justify-content: center; padding: 24px; }
    .store-c-sheet-panel {
        position: relative; left: auto; right: auto; bottom: auto;
        width: 100%; max-width: 440px; max-height: 85vh;
        border-radius: 18px;
        transform: translateY(10px) scale(.98); opacity: 0;
        transition: transform .2s cubic-bezier(.32, .72, 0, 1), opacity .16s ease;
    }
    .store-c-sheet.store-c-sheet-show .store-c-sheet-panel { transform: translateY(0) scale(1); opacity: 1; }
    .store-c-sheet-handle { display: none; }
}

/* ── Meal plan checkout card — a lone plan gets the full row and splits
   into identity+pricing / form panes on desktop instead of one long
   stacked column (see meal-plans.blade.php for when each class applies). */
.store-mp-plan-body { display: flex; flex-direction: column; }
@media (min-width: 992px) {
    .store-mp-plan-card-solo .store-mp-plan-body {
        flex-direction: row; align-items: flex-start; gap: 36px;
    }
    .store-mp-plan-card-solo .store-mp-plan-info {
        flex: 0 0 300px; position: sticky; top: 88px;
    }
    .store-mp-plan-card-solo .store-mp-plan-form-wrap { flex: 1 1 0%; min-width: 0; }
}
/* Payment options were full-width bordered rows stacked one per line —
   with 2-3 of them that alone was several stacked blocks. Side by side
   once there is room; still one per line on a phone, where a row of
   half-width cards would be too cramped to read. */
@media (min-width: 576px) {
    .store-mp-payment-group { flex-direction: row !important; flex-wrap: wrap; }
    .store-mp-payment-group > label { flex: 1 1 220px; }
}

/* ── Meal-plan checkout fields — the number/date/select/text inputs here
   were bare Bootstrap defaults (grey border, native date-picker chrome,
   no focus state) sitting right next to the restyled dropdown/filter
   inputs elsewhere on the storefront. Same treatment: rounded, tinted
   background, brand focus ring. HTML5 date/number types are kept — this
   only changes appearance, not the input types themselves. */
.store-mp-field {
    border-radius: 10px !important; border: 1.5px solid var(--c-border, #e2e8f0) !important;
    background: #f8fafc; min-height: 44px;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
textarea.store-mp-field { min-height: 0; }
.store-mp-field:focus {
    border-color: var(--c-primary, #ea580c) !important; background: #fff;
    box-shadow: 0 0 0 3px var(--c-primary-light, #fff7ed) !important;
}
/* The native calendar icon a date input draws is browser chrome, not
   something CSS can restyle directly — recolouring it orange on hover is
   the one hook browsers expose (::-webkit-calendar-picker-indicator). */
.store-mp-field[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; border-radius: 4px; }
.store-mp-field[type="date"]:hover::-webkit-calendar-picker-indicator { background: var(--c-primary-light, #fff7ed); }

/* Payment method cards — same "the whole card lights up, not just the
   radio dot" language as the storefront's own checkout page uses
   (.store-co-option), applied here to a card that also carries a
   description line underneath the label. */
.store-mp-payment-group > label {
    transition: border-color .15s, background .15s;
}
.store-mp-payment-group > label:has(input:checked) {
    border-color: var(--c-primary, #ea580c) !important;
    background: var(--c-primary-light, #fff7ed);
}

/* ── Slide-out cart (partials/store-cart-drawer.blade.php) ── */
.store-cd-backdrop {
    position: fixed; inset: 0; z-index: 1054;
    background: rgba(15, 23, 42, .45); opacity: 0;
    transition: opacity .2s ease;
}
.store-cd-backdrop.open { opacity: 1; }
.store-cd {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1055;
    width: min(400px, 100vw);
    display: flex; flex-direction: column;
    background: #fff; box-shadow: -12px 0 32px rgba(15, 23, 42, .18);
    transform: translateX(100%); visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
}
.store-cd.open { transform: none; visibility: visible; transition: transform .22s ease; }
.store-cd-lock { overflow: hidden; }
.store-cd-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid #e5e7eb;
}
.store-cd-title { font-size: 1rem; font-weight: 700; margin: 0; }
.store-cd-head .btn-close { min-width: 44px; min-height: 44px; margin: -10px -10px -10px 0; }
.store-cd-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px; }
.store-cd-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f1f5f9; transition: opacity .15s; }
.store-cd-item.busy { opacity: .5; pointer-events: none; }
.store-cd-thumb {
    flex: 0 0 56px; width: 56px; height: 56px; border-radius: 10px; overflow: hidden;
    background: #f1f5f9; color: #94a3b8;
    display: flex; align-items: center; justify-content: center;
}
.store-cd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.store-cd-info { flex: 1 1 auto; min-width: 0; }
.store-cd-name { font-size: .875rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.store-cd-variant { font-size: .75rem; color: #64748b; }
.store-cd-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.store-cd-qty { display: inline-flex; align-items: center; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.store-cd-qty button {
    width: 40px; height: 40px; border: 0; background: #fff;
    font-size: 1.125rem; font-weight: 600; color: var(--c-primary, #ea580c);
}
.store-cd-qty button:active { background: var(--c-primary-light, #fff7ed); }
.store-cd-qty span { min-width: 30px; text-align: center; font-weight: 600; font-size: .875rem; font-variant-numeric: tabular-nums; }
.store-cd-price { font-weight: 700; font-size: .875rem; font-variant-numeric: tabular-nums; }
.store-cd-foot {
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e5e7eb; background: #fff;
}
.store-cd-subtotal { display: flex; justify-content: space-between; font-size: 1rem; font-variant-numeric: tabular-nums; }
.store-cd-note { font-size: .75rem; color: #64748b; margin: 2px 0 12px; }
.store-cd-checkout {
    display: flex; align-items: center; justify-content: center;
    min-height: 48px; border-radius: 12px; text-decoration: none;
    background: var(--c-primary, #ea580c); color: #fff; font-weight: 700;
}
.store-cd-checkout:hover, .store-cd-checkout:focus { color: #fff; background: var(--c-primary-hover, #c2410c); }
.store-cd-full { display: block; text-align: center; margin-top: 10px; font-size: .8125rem; color: #475569; }
.store-cd-empty, .store-cd-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    min-height: 240px; color: #64748b; font-size: .875rem;
}
.store-cd-empty > i { font-size: 2.25rem; color: #cbd5e1; }
.store-cd-continue {
    min-height: 44px; padding: 0 18px; border-radius: 10px;
    border: 1px solid var(--c-primary, #ea580c); background: #fff;
    color: var(--c-primary, #ea580c); font-weight: 600;
}
@media (max-width: 575.98px) {
    .store-cd {
        top: auto; left: 0; width: 100%; max-height: 86dvh;
        border-radius: 18px 18px 0 0; box-shadow: 0 -12px 32px rgba(15, 23, 42, .2);
        transform: translateY(100%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .store-cd, .store-cd.open, .store-cd-backdrop { transition: none; }
}

/* ── Seller-chosen corner style (stores.brand_shape) ──────────────
   Only two classes exist; "rounded" is the stylesheet as written. The
   LinkBiz navbar, deals strip and footer are left out, and round things
   that must stay round (wishlist heart, logos, step numbers, badges on
   icons) are simply not listed. !important because many of these
   carry an inline border-radius. */
body.lb-shape-square :is(
    .btn, .card, .form-control, .form-select, .alert, .toast, .dropdown-menu,
    .store-add-btn, .store-stepper, .store-pc-variant-add, .store-view-cart-bar,
    .store-cn-desktop-cart, .store-c-search-input, .store-c-cat-dropdown, .store-c-view-toggle,
    .store-c-view-btn, .store-cat-sidebar, .store-cat-sidebar-link, .store-c-trending-card-inner,
    .store-c-trending-img, .store-pdp-add-btn, .store-pdp-qty-stepper, .store-pdp-stock-pill,
    .store-pdp-category-badge, .store-pdp-bar-icon, .store-pdp-secondary-btn, .store-pdp-variant-select,
    .store-co-card, .store-co-input, .store-co-option span, .store-co-banner, .store-co-pay-only,
    .store-co-btn-apply, .store-co-btn-map, .store-co-btn-geo, .store-co-map-wrap,
    .store-cart-item-img, .store-cd-thumb, .store-cd-qty, .store-cd-checkout, .store-cd-continue,
    .store-c-header img, .lb-lazy-img
):not(#main-navbar *, .mq *, footer *, .btn-close) { border-radius: 3px !important; }
body.lb-shape-square .store-cd { border-radius: 0 !important; }

body.lb-shape-pill :is(
    .btn, .store-add-btn, .store-stepper, .store-pc-variant-add, .store-view-cart-bar,
    .store-c-search-input, .store-c-cat-dropdown, .store-c-view-toggle, .store-pdp-add-btn,
    .store-pdp-qty-stepper, .store-pdp-secondary-btn, .store-pdp-variant-select,
    .store-co-option span, .store-co-pay-only, .store-co-btn-apply, .store-co-btn-map, .store-co-btn-geo,
    .store-cd-qty, .store-cd-checkout, .store-cd-continue, input.store-co-input, .form-select
):not(#main-navbar *, .mq *, footer *, .btn-close) { border-radius: 999px !important; }
body.lb-shape-pill :is(
    .card, .store-co-card, .store-cat-sidebar, .store-c-trending-card-inner, .store-co-banner,
    .store-co-map-wrap, textarea.store-co-input, textarea.form-control, .alert, .toast
):not(#main-navbar *, .mq *, footer *) { border-radius: 22px !important; }
body.lb-shape-pill :is(.store-pdp-bar-icon, .store-cd-thumb, .store-cart-item-img, .store-cat-sidebar-link) { border-radius: 16px !important; }

/* ── Loyalty stamp card (partials/store-loyalty-card.blade.php) ── */
.store-loyalty {
    background: var(--c-primary-light, #fff7ed); border: 1px solid var(--c-primary-border, #fed7aa);
    border-radius: 14px; padding: 12px 14px; margin-bottom: 12px;
}
.store-loyalty-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.store-loyalty-title { font-weight: 700; font-size: .875rem; color: var(--c-primary-dark, #9a3412); }
.store-loyalty-count { font-weight: 700; font-size: .8125rem; color: var(--c-primary-dark, #9a3412); font-variant-numeric: tabular-nums; }
.store-loyalty-stamps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.store-loyalty-stamp {
    width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px dashed var(--c-primary-border, #fed7aa); background: #fff; color: #fff; font-size: .875rem;
}
.store-loyalty-stamp.on { border-style: solid; border-color: var(--c-primary, #ea580c); background: var(--c-primary, #ea580c); }
.store-loyalty-text { font-size: .8125rem; color: #334155; }
.store-loyalty-ready {
    background: #dcfce7; color: #14532d; border-radius: 10px; padding: 8px 10px; font-size: .8125rem; margin-bottom: 8px;
}

/* ── Checkout: addresses used before ── */
.store-co-addresses { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.store-co-address {
    min-height: 44px; padding: 8px 12px; text-align: left; overflow-wrap: anywhere;
    border: 1px solid var(--c-border, #e2e8f0); border-radius: 10px; background: #fff;
    color: #334155; font-size: .8125rem; line-height: 1.35;
}
.store-co-address.active {
    border-color: var(--c-primary, #ea580c); background: var(--c-primary-light, #fff7ed);
    color: var(--c-primary-dark, #9a3412); font-weight: 600;
}