:root {
    --green-dark: #1a7a42;
    --green-mid: #22a356;
    --green-pale: #edfaf3;
    --text-dark: #1a1f1c;
    --text-mid: #4a5550;
    --text-light: #8a9e95;
    --border: #d4e8dc;
    --white: #ffffff;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .08);
    --radius: 16px;
    --radius-sm: 10px;
}

* {
    box-sizing: border-box;
}

html {
    scrollbar-gutter: stable;
    overflow-y: scroll;
}

body {
    font-family: 'DM Sans', sans-serif;
    color: var(--text-dark);
    background: #f4f6f8;
    min-height: 100vh;
    margin: 0;
}

a {
    text-decoration: none;
}

/* ── Navbar ── */
.site-navbar {
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.brand-name {
    font-family: 'DM Serif Display', serif;
    font-size: 28px;
    color: var(--green-mid);
    letter-spacing: -.3px;
}

.top-banner {
    background: linear-gradient(90deg, var(--green-dark), var(--green-mid));
    color: var(--white);
    text-align: center;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .3px;
}

/* Location strip — sits directly under the navbar on every main page */
.location-bar {
    border-bottom: 1px solid var(--border);
    background: #f7fcf9;
    color: var(--text-light);
    font-size: 13px;
}

.location-bar .bi {
    color: var(--green-mid);
}

.location-strong {
    color: var(--text-dark);
    font-weight: 700;
}

.nav-action {
    display: inline-flex;
    align-items: center;
    color: var(--text-mid);
    font-weight: 600;
    font-size: 14px;
    transition: color .2s;
    white-space: nowrap;
}

.nav-action:hover {
    color: var(--green-mid);
}

/* Icon-only nav button (bell) */
.nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--text-mid);
    font-size: 16px;
    position: relative;
    margin: 0 -6px;
    transition: background .15s, color .15s;
}

.nav-icon-btn:hover {
    background: var(--green-pale);
    color: var(--green-dark);
}

.nav-icon-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: #c0392b;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    border: 2px solid var(--white);
}

/* Plain separator before Logout/Login */
.nav-divider {
    width: 1px;
    height: 18px;
    background: var(--border);
}

.cart-badge {
    background: var(--green-mid);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    margin-right: 4px;
}

/* ── Search bar ── */
.search-wrap {
    display: flex;
    gap: 6px;
    flex: 1 1 220px;
    max-width: 400px;
    min-width: 200px;
}

.search-input {
    flex: 1;
    min-width: 0;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font-size: 13px;
    font-family: inherit;
    transition: border-color .15s;
}

.search-input:focus {
    outline: none;
    border-color: var(--green-mid);
}

.search-btn {
    background: var(--green-mid);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

.search-btn:hover {
    background: var(--green-dark);
}

/* ── Category sidebar (UI-006: no internal scrollbar, natural page scrolling) ── */
.cat-pill {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-mid);
    border: 1.5px solid var(--border);
    background: var(--white);
    margin-bottom: 5px;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
    text-decoration: none;
    line-height: 1.25;
    overflow-wrap: anywhere;
    position: relative;
}

.cat-pill:hover,
.cat-pill.active {
    background: var(--green-pale);
    border-color: var(--green-mid);
    color: var(--green-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
}

.cat-pill.active {
    background: var(--green-mid);
    color: #fff;
    border-color: var(--green-mid);
}

/* ── Product cards ── */
.product-card-wrap {
    scroll-margin-top: 100px;
    position: relative;
    height: 100%;
}

.product-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .15s, transform .15s;
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
}

.product-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.product-img {
    width: 100%;
    height: 180px;

    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    position: relative;
}

.product-img img {
    width: 100%;
    height: 180px;
    object-fit: scale-down; object-position: center; box-sizing: border-box; padding: 3px;
}

.product-body {
    padding: 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-category {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--green-mid);
    margin-bottom: 4px;
}

.product-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-dark);
    margin-bottom: 4px;
    line-height: 1.3;
}

.product-desc {
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.5;
    flex: 1;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-price {
    font-family: 'DM Serif Display', serif;
    font-size: 18px;
    color: var(--green-dark);
    margin-bottom: 10px;
}

.product-unit {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-light);
}

.stock-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    margin-bottom: 10px;
    display: inline-block;
}

/* ── Quick View trigger ── */
.qv-trigger {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--border);
    color: var(--green-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    opacity: .85;
    transition: opacity .15s, transform .15s, background .15s;
}

.qv-trigger:hover {
    opacity: 1;
    background: var(--white);
    transform: scale(1.08);
}

/* ── Quick View modal ── */
.qv-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(20, 30, 25, .55);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.qv-modal-overlay.open {
    display: flex;
}

.qv-modal-box {
    background: var(--white);
    border-radius: 16px;
    max-width: 480px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
    display: block;
}
.qv-modal-box.review-view{max-width:680px}
.qv-product-pane[hidden],.qv-reviews[hidden],.qv-open-reviews[hidden]{display:none!important}
.qv-open-reviews,.qv-back-product{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--green-mid);border-radius:8px;background:var(--white);color:var(--green-dark);font-size:13px;font-weight:700;padding:7px 11px;min-height:38px}
.qv-open-reviews{margin-top:12px}
.qv-open-reviews:hover,.qv-back-product:hover,.qv-open-reviews:focus-visible,.qv-back-product:focus-visible{background:var(--green-pale)}
.qv-back-product{margin-bottom:16px}

.qv-product-pane, .qv-reviews { min-width: 0; }
.qv-name, .qv-desc { overflow-wrap: anywhere; }
.qv-reviews { padding: 24px; }
.qv-reviews h2 { font-size: 20px; margin: 0 0 14px; color: var(--text-dark); }
.qv-review-average { font-size: 19px; font-weight: 700; color: var(--text-dark); margin: 0; }
.qv-review-count, .qv-review-empty, .qv-review-date { color: var(--text-light); font-size: 13px; }
.qv-review-count { margin: 0 0 12px; }
.qv-review-bar-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) 24px; align-items: center; gap: 8px; font-size: 12px; margin: 5px 0; }
.qv-review-bar-track { display: block; background: var(--green-pale); border-radius: 999px; height: 8px; overflow: hidden; }
.qv-review-bar-fill { display: block; height: 100%; background: var(--green-mid); }
.qv-review-card { padding: 14px 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.qv-review-card:focus-visible { outline: 2px solid var(--green-mid); outline-offset: 2px; }
.qv-review-card:first-child { margin-top: 16px; }
.qv-review-card-heading { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.qv-review-card-heading strong { font-size: 13px; }
.qv-review-verified { background: var(--green-pale); color: var(--green-dark); border-radius: 999px; font-size: 11px; padding: 2px 8px; font-weight: 700; }
.qv-review-stars { color: var(--green-dark); font-size: 12px; margin-top: 4px; }
.qv-review-comment { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; margin: 8px 0; }
.qv-review-photo { display: block; width: min(100%, 240px); max-height: 240px; object-fit: contain; margin: 8px 0; border-radius: 8px; }
.qv-review-more { border: 1px solid var(--green-mid); border-radius: 8px; background: var(--white); color: var(--green-dark); padding: 9px 14px; font-weight: 600; min-height: 40px; }
.qv-review-more:hover, .qv-review-more:focus-visible { background: var(--green-pale); }
.qv-review-more[hidden] { display: none; }
.qv-review-error { color: #9c2e25; font-size: 13px; }
@media (max-width: 700px) {
    .qv-modal-overlay { padding: 10px; }
    .qv-modal-box { max-width: 480px; max-height: calc(100dvh - 20px); display: block; }
    .qv-reviews { padding: 18px; }
}

.qv-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .92);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.qv-modal-close:hover {
    background: var(--white);
}

.qv-img {
    width: 100%;
    height: 190px;
    object-fit: scale-down; object-position: center; box-sizing: border-box; padding: 3px;
    border-radius: 10px;
    margin-bottom: 10px;
    background: var(--green-pale);
}

.qv-img-placeholder {
    width: 100%;
    height: 190px;
    border-radius: 10px;
    margin-bottom: 10px;
    background: var(--green-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 52px;
    color: var(--green-mid);
}

.qv-category {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--green-mid);
    margin-bottom: 4px;
}

.qv-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-dark);
    margin-bottom: 6px;
    line-height: 1.3;
}

.qv-desc {
    font-size: 12.5px;
    color: var(--text-mid);
    line-height: 1.6;
    margin-bottom: 10px;
    max-height: 96px;
    overflow-y: auto;
}

.qv-price {
    font-family: 'DM Serif Display', serif;
    font-size: 19px;
    color: var(--green-dark);
    margin-bottom: 8px;
}

.stock-ok {
    background: var(--green-pale);
    color: var(--green-dark);
    border: 1px solid var(--border);
}

.stock-low {
    background: #fff8ec;
    color: #b05900;
    border: 1px solid #ffe3bb;
}

.stock-out {
    background: #fff0f0;
    color: #c0392b;
    border: 1px solid #ffd5d0;
}

/* ── Sign-in required modal ── */
.signin-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(20, 30, 25, .55);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.signin-modal-overlay.open {
    display: flex;
}

.signin-modal-box {
    background: var(--white);
    border-radius: 16px;
    max-width: 380px;
    width: 100%;
    padding: 28px 26px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}

.signin-modal-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--green-pale);
    color: var(--green-mid);
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.signin-modal-box h3 {
    font-family: 'DM Serif Display', serif;
    font-size: 20px;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.signin-modal-box p {
    font-size: 13.5px;
    color: var(--text-mid);
    margin-bottom: 20px;
    line-height: 1.5;
}

.signin-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.signin-modal-actions a.signin-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--green-mid), var(--green-dark));
    color: #fff;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(34, 163, 86, .28);
    transition: transform .15s ease, box-shadow .15s ease;
}

.signin-modal-actions a.signin-btn-primary:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(34, 163, 86, .36);
}

.signin-modal-actions a.signin-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: var(--white);
    color: var(--text-dark);
    padding: 12px 20px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all .15s ease;
}

.signin-modal-actions a.signin-btn-secondary:hover {
    color: var(--green-dark);
    border-color: var(--green-mid);
    background: var(--green-pale);
}

.signin-modal-dismiss {
    margin-top: 12px;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 12.5px;
    cursor: pointer;
    text-decoration: underline;
}

/* ── Add to cart form ── */
.qty-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.qty-input {
    width: 64px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-size: 13px;
    text-align: center;
}

.qty-input:focus {
    outline: none;
    border-color: var(--green-mid);
}

.btn-cart {
    flex: 1;
    background: var(--green-mid);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

.btn-cart:hover {
    background: var(--green-dark);
}

.btn-cart:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.btn-preorder {
    flex: 1;
    background: #fff8ec;
    color: #b05900;
    border: 1.5px solid #ffe3bb;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    display: block;
    transition: all .15s;
}

.btn-preorder:hover {
    background: #b05900;
    color: #fff;
}

/* ── Alert ── */
.alert-gh {
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-success {
    background: var(--green-pale);
    border: 1.5px solid #b7e4c7;
    color: var(--green-dark);
}

.alert-error {
    background: #fff0f0;
    border: 1.5px solid #ffd5d0;
    color: #c0392b;
}

/* ── Batch — consolidated header controls (count + filter chips + sort)
   Previously ".sort-bar" was its own always-rendered row above
   everything. It's now a compact fragment (.catalog-controls) placed
   inside whichever section heading it belongs to — see
   .best-sellers-head and .catalog-section-heading below, both of which
   are already flex/space-between, so this just becomes their right-hand
   child. Wraps naturally under the heading on narrow screens via each
   parent's own flex-wrap. ── */
/* Batch — final desktop header-row correction. The controls are split
   into two explicit groups so a long category/search term can never
   push the sort control off its right-anchored position:
     .catalog-controls           — outer wrapper, right-aligned as a
                                    whole against the heading (see
                                    .catalog-header-row below)
       .catalog-controls-info    — count + filter chips; allowed to
                                    shrink/wrap; a chip's own text has a
                                    max-width so an unusually long
                                    category name wraps inside its own
                                    chip instead of growing indefinitely
       .catalog-controls-sort    — "Sort by" + the select; never
                                    shrinks and never wraps internally,
                                    so it stays a single fixed unit */
.catalog-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    min-width: 0;
}

.catalog-controls-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.catalog-controls-sort {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.result-count {
    font-size: 13px;
    color: var(--text-light);
    white-space: nowrap;
}

.catalog-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--green-mid);
    font-weight: 600;
    font-size: 13px;
    max-width: 100%;
}

.catalog-filter-chip a {
    color: var(--text-light);
    font-size: 12px;
    flex-shrink: 0;
}

.catalog-filter-chip-cat {
    background: var(--green-pale);
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
}

.catalog-filter-chip-text {
    max-width: 260px;
    overflow-wrap: break-word;
    line-height: 1.3;
}

.catalog-sort-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    white-space: nowrap;
}

.catalog-sort-label {
    font-size: 12px;
    color: var(--text-light);
    white-space: nowrap;
}

.sort-select {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font-size: 13px;
    font-family: inherit;
    background: var(--white);
}

.sort-select:focus {
    outline: none;
    border-color: var(--green-mid);
}

.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 28px 0 8px;
}

.page-btn {
    padding: 7px 13px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: #fff;
    color: var(--text-mid);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s;
    min-width: 38px;
    text-align: center;
}

.page-btn:hover {
    border-color: var(--green-mid);
    color: var(--green-dark);
    background: var(--green-pale);
}

.page-btn.active {
    background: var(--green-mid);
    color: #fff;
    border-color: var(--green-mid);
}

.page-btn.disabled {
    opacity: .4;
    pointer-events: none;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-light);
}

.empty-state i {
    font-size: 48px;
    color: var(--border);
    display: block;
    margin-bottom: 16px;
}

/* ── Catalog workspace layout ── */
.catalog-layout {
    display: grid;
    grid-template-columns: minmax(220px, 240px) minmax(0, 1fr) minmax(300px, 330px);
    gap: 20px;
    align-items: start;
}

/* Batch — empty-cart layout. When there are no cart items, the whole
   .cart-preview aside isn't rendered at all (see Add_to_cart.php), so
   the grid must drop its third (cart-preview) track entirely here —
   otherwise that ~300-330px track would just sit empty instead of
   letting the product area use the space. Scoped to the class added on
   .catalog-layout itself, not tied to any viewport width, so an empty
   cart always gets this treatment regardless of screen size; the
   ≤1399px tier below already collapses to sidebar+main either way and
   needs no separate override. */
.catalog-layout.cart-empty {
    grid-template-columns: minmax(220px, 240px) minmax(0, 1fr);
}

/* The server uses the same cart state for its 8/9-item page size. Empty-cart
   desktop layouts gain a fourth track; populated-cart layouts keep three. */
@media (min-width: 1100px) {
    .catalog-layout.cart-empty .catalog-product-grid,
    .catalog-layout.cart-empty .best-seller-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.catalog-sidebar,
.cart-preview {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 16px;
}

/* UI-006: Category sidebar without awkward internal scrollbar */
.catalog-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
}

.catalog-sidebar-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-light);
    margin: 16px 0 8px;
}

.catalog-sidebar-title:first-child {
    margin-top: 0;
}

.sidebar-search {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}

.sidebar-search .search-input {
    min-width: 0;
    width: 100%;
    padding: 8px 10px;
}

.sidebar-search .search-btn {
    flex: 0 0 40px;
    padding: 8px;
}

.cat-pill i {
    flex: 0 0 18px;
    text-align: center;
}

.catalog-main {
    scroll-margin-top: 100px;
    min-width: 0;
}

/* Batch — unified, reusable header-row architecture for both
   .catalog-section-heading (All Products / Best-Sellers-view heading)
   and .best-sellers-head (the featured panel's heading). Previously
   .catalog-section-heading used align-items:flex-end, which bottom-
   aligned the controls against the subtitle's line rather than
   centering them against the row as a whole — that mismatch was the
   actual cause of the controls looking "vertically offset" rather than
   sharing one clean header row with the heading. CSS Grid (rather than
   flex) is used deliberately here: the left column is a genuine
   minmax(0,1fr) track that can shrink without special-casing, and the
   right column is a true "auto" track sized to its content and never
   affected by the left column's size — a more robust anchor than flex's
   shrink/grow arithmetic for this two-zone layout. */
.catalog-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin: 4px 0 14px;
}

.catalog-section-heading h1,
.catalog-section-heading h2 {
    font-family: 'DM Serif Display', serif;
    color: var(--green-dark);
    margin: 0;
}

.catalog-section-heading h1 {
    font-size: 27px;
}

.catalog-section-heading h2 {
    font-size: 22px;
}

.catalog-section-heading p {
    margin: 3px 0 0;
    color: var(--text-light);
    font-size: 12px;
}

/* Batch — wider desktop container (Part A). Bootstrap's plain .container
   caps out at 1320px even on very wide screens; this page-specific class
   (added alongside .container in the markup, so no other page is
   affected) raises that cap so the product grid gets real room on
   1440-1920px screens without going edge-to-edge. Below this cap it's a
   no-op, since width:100% from .container is already smaller. */
.catalog-page-container {
    max-width: 1600px;
}

.catalog-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.catalog-product-grid>div {
    min-width: 0;
}

.catalog-product-grid .product-img,
.catalog-product-grid .product-img img {
    height: 150px;
}

/* Batch — Best Sellers refined (Part C): the previous version was its
   own oversized panel (gradient background, border, shadow, padding)
   holding 4 bespoke ".best-seller-*" cards in a fixed 2x2 grid. It now
   features only the top 3, and reuses .catalog-product-grid /
   .product-card / .product-img / .product-body / .product-category /
   .product-name / .product-price / .stock-badge / .btn-cart — the exact
   same classes and dimensions as the main grid below — so a featured
   card and a regular card are visually identical apart from the rank
   badge. The .best-seller-* card classes this replaced are no longer
   referenced anywhere and were removed rather than left as dead CSS.
   The section itself is now just a heading (no panel chrome) sitting
   above the grid, the same way "All Products" is presented. */
.best-sellers-panel {
    min-width:0;
    margin-bottom: 28px;
}
.best-sellers-panel .catalog-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:991px){.best-sellers-panel .catalog-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:575px){.best-sellers-panel .catalog-product-grid{grid-template-columns:minmax(0,1fr)}}

.best-sellers-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.best-sellers-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}

.best-sellers-title {
    font-family: 'DM Serif Display', serif;
    font-size: 22px;
    color: var(--text-dark);
    margin: 0;
}

.best-sellers-subtitle {
    font-size: 12px;
    color: var(--text-light);
}

/* Small "🔥 N sold" line inside a .product-card's .product-body — the
   one piece of best-seller-specific info kept, added as a single extra
   line rather than a taller card. */
.product-sold-line {
    font-size: 11px;
    color: var(--text-mid);
    margin: 0 0 6px;
}

/* ── Cart preview sidebar ── */
.cart-preview {
    position: sticky;
    top: 88px;
}

.cart-preview-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.cart-preview-head h2 {
    font-family: 'DM Serif Display', serif;
    font-size: 21px;
    color: var(--green-dark);
    margin: 0;
}

.cart-preview-count {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--green-mid);
    border-radius: 999px;
    padding: 3px 8px;
}

.cart-preview-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Keep the header and checkout action in view for large carts. */
.cart-preview {
    display: flex;
    flex-direction: column;
    max-height: max(390px, calc(100dvh - 180px));
    min-width: 0;
}
.cart-preview-head,
.cart-preview-total,
.cart-preview-link { flex-shrink: 0; }
.cart-preview-list {
    flex: 0 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.cart-preview-list:focus-visible { outline: 2px solid var(--green-mid); outline-offset: -2px; }

.cart-preview-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

/* Batch — small remove control added to each mini-cart row (its own
   grid column, not absolutely positioned), reusing Cart.php's existing
   remove_id POST — no new deletion logic, just a compact trigger for it. */
.cart-preview-remove-form {
    display: contents;
}

/* Follow-up 2 — × is now clearly red at rest per the latest browser
   test, rather than only turning red on hover. Kept compact and
   circular (not styled like a full "Remove" button) — the color is
   what changed, not the size or weight. Hover deepens to a stronger
   red/white-on-red treatment so it still visibly communicates "this
   will remove it" as a distinct state from resting. */
.cart-preview-remove {
    width: 22px;
    height: 22px;
    margin: 0;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #f3b4ab;
    border-radius: 50%;
    background: #fdecea;
    color: #c0392b;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.cart-preview-remove:hover {
    background: #c0392b;
    border-color: #c0392b;
    color: #fff;
}

.cart-preview-remove:focus-visible {
    background: #c0392b;
    border-color: #c0392b;
    color: #fff;
    outline: 2px solid #c0392b;
    outline-offset: 2px;
}

.cart-preview-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: scale-down; object-position: center; box-sizing: border-box; padding: 3px;
    background: var(--green-pale);
}

.cart-preview-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green-mid);
    font-size: 20px;
}

.cart-preview-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.cart-preview-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-light);
}

.cart-preview-meta strong {
    color: var(--text-dark);
    white-space: nowrap;
}

.cart-preview-warning {
    font-size: 11px;
    color: #b05900;
    margin-top: 3px;
}

.cart-preview-empty {
    text-align: center;
    padding: 28px 8px;
    color: var(--text-light);
    font-size: 13px;
}

.cart-preview-empty i {
    display: block;
    font-size: 32px;
    color: var(--border);
    margin-bottom: 8px;
}

.cart-preview-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 0;
    font-size: 13px;
}

.cart-preview-total strong {
    font-size: 17px;
    color: var(--green-dark);
}

.cart-preview-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 9px;
    background: var(--green-mid);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s;
}

.cart-preview-link:hover,
.cart-preview-link:focus-visible {
    background: var(--green-dark);
    color: #fff;
    outline: 3px solid rgba(34, 163, 86, .2);
    outline-offset: 2px;
}

.cart-preview-guest {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-mid);
    text-align: center;
    padding: 18px 4px;
}

/* ── Responsive media queries ── */
@media (max-width: 1399px) {
    .catalog-layout,
    .catalog-layout.cart-empty {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .cart-preview {
        grid-column: 1 / -1;
        position: static;
    }

    .cart-preview-list { display: flex; flex-direction: column; }
    .cart-preview-link { margin-right: 72px; }

    .cart-preview-item {
        border: 1px solid var(--border);
        border-radius: 9px;
        padding: 9px;
    }
}

@media (max-width: 767px) {
    .cart-preview { max-height: max(360px, calc(100dvh - 128px)); }
}

@media (max-width: 991px) {
    .catalog-layout,
    .catalog-layout.cart-empty {
        grid-template-columns: 1fr;
    }

    .catalog-sidebar {
        position: static;
        max-height: none;
    }

    .catalog-product-grid,
    .best-seller-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .category-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .cat-pill {
        margin: 0;
    }

    .catalog-sidebar .services-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .catalog-sidebar .services-list .cat-pill {
        flex: 1 1 150px;
    }
}

@media (max-width: 767px) {
    .category-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .catalog-section-heading {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .best-sellers-head {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .cart-preview-list {
        display: flex;
    }

    .product-name {
        font-size: 13px;
    }

    .catalog-controls {
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
    }

    .search-wrap {
        max-width: none;
        min-width: 0;
        width: 100%;
        flex-basis: 100%;
    }

    .catalog-sort-form {
        width: 100%;
        justify-content: space-between;
    }

    .sort-select {
        min-width: 0;
        max-width: 70%;
    }

    .product-body {
        padding: 12px;
    }
}

@media (max-width: 575px) {

    .category-list,
    .catalog-product-grid,
    .best-seller-grid {
        grid-template-columns: 1fr;
    }

    .catalog-layout {
        gap: 14px;
    }

    .catalog-sidebar,
    .cart-preview {
        padding: 13px;
    }

    .product-img,
    .product-img img,
    .catalog-product-grid .product-img,
    .catalog-product-grid .product-img img {
        height: 170px;
    }
}
.product-actions { display:flex; gap:8px; width:100%; margin-top:10px; }
.product-actions > form, .product-actions > button { flex:1; min-width:0; }
.product-actions .btn-cart { width:100%; min-height:44px; margin:0; padding:10px 6px; font:inherit; font-size:12px; font-weight:700; border-radius:8px; }
.product-actions .btn-preorder { background:#fff; color:var(--green-dark); border:1px solid var(--green-mid); }
.product-actions .btn-preorder:hover:not(:disabled) { background:var(--green-pale); }
.product-actions .btn-cart:focus-visible { outline:3px solid var(--green-mid); outline-offset:3px; }
.product-actions .btn-cart:disabled { opacity:.6; cursor:not-allowed; }
.product-actions { align-items:stretch; }
.product-actions > form { display:flex;align-items:stretch;margin:0; }
.product-actions .btn-cart { display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:46px;line-height:1.3;border:1px solid transparent; }
.product-actions .btn-preorder { border-color:var(--green-mid); }
.product-actions > form[hidden] { display:none; }
.catalog-cart-panels { display:flex; flex-direction:column; gap:16px; min-width:0; }
.catalog-cart-panels .cart-preview { position:static; width:100%; min-width:0; box-sizing:border-box; }
.preorder-preview-item { display:flex; gap:8px; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); }
.preorder-preview-item > div { min-width:0; overflow-wrap:anywhere; }
.preorder-preview-item .cart-preview-remove { position:static; min-width:40px; min-height:40px; }
.preorder-preview-note { font-size:12px; line-height:1.5; color:var(--text-mid); margin:12px 0; }
@media (max-width:1399px) { .catalog-cart-panels { grid-column:1 / -1; } }

/* One shared row height, including wrapped unavailable labels. */
.product-stock-row { display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 10px;min-width:0; }
.product-preorder-unavailable { margin-left:auto;font-size:11px;line-height:1.4;color:var(--text-mid);text-align:right;overflow-wrap:anywhere; }
.product-actions { display:flex;flex-wrap:wrap;align-items:stretch; }
.product-actions > form { min-width:0;height:auto; }
.product-actions > form[hidden] { display:none; }
.product-actions > form > .btn-cart { flex:0 0 auto;height:48px;min-height:48px;padding:6px;white-space:normal;gap:4px; }
.product-actions > button[hidden] { display:none; }

/* Product photos only: retain card geometry while leaving room around the image. */
img.qv-img { padding: 10px; }
.product-card .product-img > img { display: block; padding: 4px; background: #fff; object-fit: scale-down; object-position: center; box-sizing: border-box; }
#qvModalImageWrap > img { display: block; width: 100%; height: 260px; max-width: 100%; object-fit: scale-down; object-position: center; box-sizing: border-box; padding: 12px; border-radius: 16px 16px 0 0; }