/* ============================================================
   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: .88rem; 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, #fff7ed, #ffedd5);
    border-color: #fed7aa; color: #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;
    background: rgba(255,255,255,.9); color: #94a3b8;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.15);
    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: .74rem; color: #f59e0b; margin-top: 2px;
    display: flex; align-items: center; gap: 3px;
}
.store-pc-rating i { font-size: .7rem; }

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

.store-pdp-review-cta {
    background: var(--c-primary, #ea580c); border: none; border-radius: 9px;
    padding: 8px 16px; font-weight: 600;
    box-shadow: 0 2px 8px rgba(234, 88, 12, .25);
    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: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.05); 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: .88rem;
}
.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: .95rem;
    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: .68rem; font-weight: 600;
    padding: 2px 7px; border-radius: 20px;
}
.store-rev-verified-badge i { font-size: .75rem; }
.store-rev-stars i { font-size: .8rem; color: #f59e0b; }
.store-rev-stars i.bi-star { color: #d1d5db; }
.store-rev-body-text { color: #374151; font-size: .88rem; 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: .85rem; color: #374151;
}

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

.store-pdp-star-input { font-size: 1.6rem; 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: .85rem;
    background: var(--c-primary-light, #fff7ed); color: var(--c-primary-dark, #9a3412);
    border-radius: 8px; 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: 12px; padding: 10px 14px; margin-bottom: 14px;
    color: var(--c-primary-dark, #9a3412); font-size: .88rem;
}
.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: .9rem;
}

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: 8px; 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: .82rem; }
}

/* ── 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: 12px; 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.2rem; overflow: hidden;
}
.store-c-logo img { width: 100%; height: 100%; object-fit: cover; }
.store-c-name { font-size: 1.1rem; font-weight: 700; margin-bottom: 0; color: var(--c-text, #0f172a); }
.store-c-tagline { font-size: .78rem; 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: .95rem; pointer-events: none;
}
.store-c-search-input {
    padding-left: 38px; border-radius: 999px; border: 1px solid var(--c-border, #e2e8f0);
    height: 42px; font-size: .88rem;
}
.store-c-search-input:focus {
    border-color: var(--c-primary, #ea580c); box-shadow: 0 0 0 3px var(--c-primary-light, #fff7ed);
}

/* ── Category pills — horizontally scrollable on mobile/tablet ──
   Sticky under the main navbar (which is itself position:sticky, top:0,
   z-index:1030) so the category nav stays reachable while scrolling
   through a long product list instead of scrolling off screen. */
.store-c-cats {
    display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 8px 0 12px; scrollbar-width: none;
    position: sticky; top: 56px; z-index: 1020;
    background: var(--c-bg, #f8fafc);
}
.store-c-cats::-webkit-scrollbar { display: none; }
.store-c-cats .store-c-cat-pill {
    flex-shrink: 0; display: inline-flex; align-items: center;
    padding: 7px 16px; border-radius: 999px; font-size: .84rem; font-weight: 600;
    text-decoration: none; white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
    border: 1px solid var(--c-border, #e2e8f0); color: var(--c-text, #0f172a); background: #fff;
}
.store-c-cats .store-c-cat-pill:hover { border-color: var(--c-primary, #ea580c); color: var(--c-primary, #ea580c); }
.store-c-cats .store-c-cat-pill.active {
    background: var(--c-primary, #ea580c); border-color: var(--c-primary, #ea580c); color: #fff;
}

/* ── List/Grid view toggle (customer product grid) ───────────── */
.store-c-view-toggle {
    display: flex; border: 1px solid var(--c-border, #e2e8f0); border-radius: 8px; overflow: hidden;
    flex-shrink: 0;
}
.store-c-view-btn {
    width: 40px; height: 42px; border: none; background: #fff; color: var(--c-text-muted, #64748b);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.store-c-view-btn + .store-c-view-btn { border-left: 1px solid var(--c-border, #e2e8f0); }
.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: 0 10px 24px rgba(15, 23, 42, .08) !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;
}
#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: 88px; flex: 0 0 auto;
}
/* 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: .65rem;
}

/* ── 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: 8px;
    padding: 10px 14px; border-radius: 10px; font-size: .88rem; font-weight: 600;
    text-decoration: none; color: var(--c-text, #0f172a);
    border-left: 3px solid transparent; transition: background .15s, color .15s;
}
.store-cat-sidebar-link:hover { background: #f8fafc; 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);
}

/* ── 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: 0 -4px 16px rgba(0,0,0,.08);
    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; }
}

/* ── 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: .8rem;
    box-shadow: 0 6px 20px rgba(234,88,12,.35);
}
.store-cn-desktop-cart:hover { color: #fff; opacity: .92; }
.store-cn-desktop-cart i { font-size: .95rem; }
.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: .65rem; font-weight: 700; padding: 0 4px;
}
@media (min-width: 992px) {
    .store-cn-desktop-cart { display: inline-flex; }
}
.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: .62rem; 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: 8px;
    padding: 4px 10px; display: block;
}
.store-cn-badge {
    position: absolute; top: -2px; right: 4px;
    background: var(--c-primary, #ea580c); color: #fff;
    font-size: .6rem; 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 ─────────────────────────── */
.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. */
.store-pc-cat-badge {
    background: none; border: 0; padding: 0;
    color: var(--c-text-muted, #94a3b8); font-weight: 600; font-size: .64rem;
    letter-spacing: .04em; text-transform: uppercase;
    margin-top: 3px; display: inline-block;
}
.store-pc-cat-badge .bi { display: none; }
.store-add-btn {
    width: 100%; border: 1px solid #16a34a; background: #16a34a;
    color: #fff; font-weight: 700; font-size: .78rem;
    border-radius: 8px; padding: 6px 0; transition: background .15s, transform .1s;
}
.store-add-btn:hover, .store-add-btn:active { background: #15803d; border-color: #15803d; }
.store-add-btn:active { transform: scale(.96); }
.store-add-btn:disabled { background: #94a3b8; border-color: #94a3b8; }
.store-pc-variant-picker {
    display: flex; align-items: center; gap: 6px;
}
.store-pc-variant-select {
    flex: 1; min-width: 0; height: 32px; border: 1px solid #cbd5e1; border-radius: 8px;
    font-size: .72rem; padding: 0 6px; background: #fff; color: #334155;
}
.store-pc-variant-add {
    flex-shrink: 0; width: 32px; height: 32px; border: 1px solid #16a34a; background: #16a34a;
    color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    font-size: 1rem; transition: background .15s, transform .1s;
}
.store-pc-variant-add:hover, .store-pc-variant-add:active { background: #15803d; border-color: #15803d; }
.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 #16a34a; border-radius: 8px;
    overflow: hidden; height: 32px;
    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: #16a34a; color: #fff; border: none;
    width: 32px; height: 100%; font-weight: 700; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
}
.store-stepper .store-qty {
    flex: 1; text-align: center; font-weight: 700; font-size: .82rem; color: var(--c-primary, #ea580c);
}
.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: 0 1px 3px rgba(15, 23, 42, .04);
}
.store-co-field { margin-bottom: 16px; }
.store-co-label {
    display: block; font-size: .72rem; 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: .92rem;
    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 rgba(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: .85rem; 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);
}
@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: 12px; 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: 8px;
    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: 8px; 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; }
.store-cart-qty-value {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; font-weight: 600; font-size: .88rem;
    border-left: 1px solid var(--c-border, #e2e8f0); border-right: 1px solid var(--c-border, #e2e8f0);
}
.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: 0 -4px 16px rgba(0,0,0,.04);
    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.1rem;
    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-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: .88rem; }
}

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

.store-pdp-gallery-main {
    position: relative; border-radius: 14px; overflow: hidden;
    background: #f1f5f9; aspect-ratio: 1 / 1; max-height: 420px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .08);
}

.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: .74rem; 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: .8rem; 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-variant-group-label {
    font-size: .72rem; 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: .88rem; 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 rgba(234, 88, 12, .12);
}
@media (max-width: 767.98px) {
    .store-pdp-gallery-main { aspect-ratio: 4 / 3; 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: 8px;
    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.6rem; margin-bottom: 4px; }

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

/* 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: .88rem; box-shadow: 0 3px 10px rgba(234, 88, 12, .28);
    transition: transform .12s, box-shadow .12s, opacity .12s;
}
.store-pdp-add-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(234, 88, 12, .35); }
.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; }

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

/* 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.1rem; 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; gap: 8px; margin-top: 10px; max-width: 420px; }
.store-pdp-secondary-btn {
    flex: 1 1 0; height: 40px; display: flex; align-items: center; justify-content: center;
    font-size: .82rem; 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: 0 -4px 16px rgba(0,0,0,.06);
    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: 1.05rem; }