/* =========================================================
   PRODUCTS PAGE
   File: /OrdersCenter/ProductsCart/Products/Products.css
   Stable card/grid/row view + multi-checkbox filter modal
========================================================= */

:root {
    --products-bg: var(--theme-bg, #f6f8fb);
    --products-card: var(--theme-surface, rgba(255,255,255,.94));
    --products-card2: var(--theme-soft, rgba(255,255,255,.76));
    --products-text: var(--theme-text, #101827);
    --products-muted: var(--theme-muted, #64748b);
    --products-border: var(--theme-border, rgba(15,23,42,.10));
    --products-shadow: var(--theme-shadow, 0 10px 28px rgba(15,23,42,.08));
    --products-accent: var(--theme-accent, var(--theme-color, #2563eb));
    --products-accent-soft: color-mix(in srgb, var(--products-accent) 11%, transparent);
    --products-danger: #ef4444;
    --products-success: #16a34a;
    --products-radius: 22px;
}

html.dark,
html[data-mode="dark"],
body.dark {
    --products-bg: #0b1220;
    --products-card: rgba(15,23,42,.90);
    --products-card2: rgba(30,41,59,.76);
    --products-text: #f8fafc;
    --products-muted: #a9b6c8;
    --products-border: rgba(255,255,255,.11);
    --products-shadow: none;
    --products-accent-soft: color-mix(in srgb, var(--products-accent) 18%, transparent);
}

html:not(.theme-ready) body { visibility: hidden; }

* { box-sizing: border-box; }

.products-page {
    min-height: calc(100vh - 80px);
    padding: 18px;
    background: radial-gradient(circle at top left, color-mix(in srgb, var(--products-accent) 16%, transparent), transparent 34%), var(--products-bg);
    color: var(--products-text);
}

.server-hidden-btn { display: none !important; }

/* =========================================================
   TOP TITLE / ACTIONS
========================================================= */

.products-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    padding: 16px 18px;
    border: 1px solid var(--products-border);
    border-radius: var(--products-radius);
    background: var(--products-card);
    box-shadow: var(--products-shadow);
    backdrop-filter: blur(14px);
}

.products-title-left { min-width: 0; }

.products-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--products-accent-soft);
    color: var(--products-accent);
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 7px;
}

.products-title-row h1 {
    margin: 0;
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -.04em;
}

.products-title-row p {
    margin: 5px 0 0;
    color: var(--products-muted);
    font-size: 14px;
    font-weight: 650;
}

.products-title-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.products-search-wrap {
    width: min(420px, 44vw);
    min-width: 260px;
    height: 42px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    align-items: center;
    border: 1px solid var(--products-border);
    border-radius: 15px;
    background: var(--products-card2);
    overflow: hidden;
}

.products-search-wrap input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 12px;
    background: transparent;
    color: var(--products-text);
    font-size: 13px;
    font-weight: 800;
}

.products-search-wrap button {
    height: 100%;
    border: none;
    background: transparent;
    color: var(--products-muted);
    font-size: 20px;
    font-weight: 900;
    cursor: pointer;
}

.products-search-wrap button:hover { color: var(--products-accent); }

.products-action-btn,
.view-link {
    position: relative;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 13px;
    border: 1px solid var(--products-border);
    border-radius: 15px;
    background: var(--products-card2);
    color: var(--products-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .14s ease, border-color .14s ease, background .14s ease;
}

.products-action-btn:hover,
.view-link:hover,
.view-link.is-active {
    border-color: color-mix(in srgb, var(--products-accent) 55%, var(--products-border));
    background: var(--products-accent-soft);
}

.products-action-btn:active,
.view-link:active { transform: scale(.97); }

.products-action-btn em {
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--products-accent);
    color: #fff;
    font-style: normal;
    font-size: 11px;
    font-weight: 950;
}

.products-view-actions { display: inline-flex; gap: 6px; }

/* =========================================================
   SUMMARY / EMPTY
========================================================= */

.products-results-toolbar { margin: 8px 0 12px; }

.products-results-summary,
.products-filter-summary {
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 13px;
    border: 1px solid var(--products-border);
    background: color-mix(in srgb, var(--products-accent) 9%, transparent);
    color: var(--products-text);
    font-size: 13px;
    font-weight: 900;
}

.products-message,
.products-empty,
.cart-empty-panel {
    padding: 28px;
    border: 1px solid var(--products-border);
    border-radius: 22px;
    background: var(--products-card);
    color: var(--products-text);
    text-align: center;
}

.empty-icon { font-size: 34px; margin-bottom: 8px; }
.client-empty-products { margin-top: 12px; }

/* =========================================================
   PRODUCT GRID + CARD BASE
========================================================= */

.products-grid {
    display: grid;
    gap: 12px;
    align-items: stretch;
}

.products-grid.grid-view { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.products-grid.cards-view { grid-template-columns: repeat(auto-fill, minmax(390px, 1fr)); }
.products-grid.rows-view { grid-template-columns: 1fr; }

.product-card {
    position: relative;
    min-width: 0;
    border: 1px solid var(--products-border);
    border-radius: 22px;
    background: var(--products-card);
    box-shadow: var(--products-shadow);
    overflow: hidden;
    transition: border-color .14s ease, transform .14s ease, background .14s ease;
}

.product-card:hover { border-color: color-mix(in srgb, var(--products-accent) 50%, var(--products-border)); }

.product-card.ordered-product,
.product-card.has-qty {
    border-color: color-mix(in srgb, var(--products-accent) 70%, var(--products-border));
    background: linear-gradient(135deg, var(--products-accent-soft), transparent 45%), var(--products-card);
}

.product-image-box {
    position: relative;
    display: block;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(15,23,42,.08);
    text-decoration: none;
}

.product-image-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 8px;
}

.price-badge {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 5;
    max-width: calc(100% - 20px);
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--products-accent), color-mix(in srgb, var(--products-accent) 68%, #001b52));
    color: #fff;
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
    font-size: 12px;
    line-height: 1;
    font-weight: 950;
    white-space: nowrap;
}

.product-badge { display: none; }

.product-badge.show {
    position: absolute;
    right: 8px;
    bottom: 8px;
    min-height: 27px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--products-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 950;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.product-badge.frequent { background: #7c3aed; }
.product-badge.promo { background: #f97316; }

.product-info-box { min-width: 0; }
.product-main-info { min-width: 0; }

.product-main-info h3 {
    margin: 0;
    color: var(--products-text);
    font-size: 16px;
    line-height: 1.28;
    font-weight: 950;
    letter-spacing: -.02em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.arabic-line {
    margin: 0;
    color: var(--products-muted);
    font-size: 14px;
    line-height: 1.48;
    font-weight: 800;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.product-meta,
.product-quick-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--products-muted);
    font-size: 12px;
    font-weight: 850;
}

.product-meta span,
.stock-pill,
.last-order-pill,
.price-pill {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid var(--products-border);
    background: color-mix(in srgb, var(--products-text) 6%, transparent);
    color: var(--products-text);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.stock-pill { color: var(--products-success); }
.stock-pill.website-promotion-badge {
    width: 100%;
    justify-content: center;
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
    background: #fff1f2 !important;
    font-weight: 900;
    cursor: pointer;
}

/* Keep promotions equally noticeable in light and dark modes. */
html[data-mode="light"] body .stock-pill.website-promotion-badge,
html.light body .stock-pill.website-promotion-badge,
body:not(.dark) .stock-pill.website-promotion-badge,
html[data-mode="dark"] body .stock-pill.website-promotion-badge,
body.dark .stock-pill.website-promotion-badge {
    border-color: #b91c1c !important;
    background-color: #dc2626 !important;
    background-image: none !important;
    color: #ffffff !important;
    font-weight: 950 !important;
    box-shadow: 0 4px 12px rgba(220,38,38,.30) !important;
}
.last-order-pill { color: var(--products-muted); }
.price-pill { color: var(--products-accent); }

.product-qty-row {
    display: grid;
    align-items: center;
    gap: 8px;
}

.qty-btn,
.qty-value {
    min-height: 42px;
    border-radius: 14px;
}

.qty-btn {
    width: 100%;
    min-width: 40px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--products-accent);
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    font-weight: 950;
    cursor: pointer;
    transition: transform .12s ease, opacity .12s ease;
}

.qty-btn:hover { opacity: .92; }
.qty-btn:active { transform: scale(.94); }
.qty-btn.is-loading { opacity: .65; pointer-events: none; }
.qty-minus, .cart-minus { background: color-mix(in srgb, var(--products-danger) 86%, #111827); }

.qty-value {
    border: 1px solid var(--products-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--products-text);
    background: var(--products-card2);
    font-size: 16px;
    font-weight: 950;
}

.qty-bump { animation: qtyBump .22s ease; }
@keyframes qtyBump {
    0% { transform: scale(1); }
    45% { transform: scale(1.14); }
    100% { transform: scale(1); }
}

.is-pulse { animation: cartPulse .45s ease; }
@keyframes cartPulse {
    0% { transform: scale(1); }
    45% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* =========================================================
   GRID VIEW - compact vertical cards
========================================================= */

.products-grid.grid-view .product-card {
    height: 468px;
    min-height: 468px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 196px minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
}

.products-grid.grid-view .product-image-box {
    width: 100%;
    height: 196px;
    min-height: 196px;
    max-height: 196px;
    border-radius: 20px;
}

.products-grid.grid-view .product-info-box {
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 42px;
    gap: 8px;
    overflow: hidden;
}

.products-grid.grid-view .product-main-info {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}

.products-grid.grid-view .product-main-info h3 {
    min-height: 44px;
    max-height: 44px;
    font-size: 15.5px;
    line-height: 1.32;
}

.products-grid.grid-view .arabic-line {
    min-height: 40px;
    max-height: 40px;
    font-size: 13.5px;
    line-height: 1.48;
}

.products-grid.grid-view .product-meta.compact-line,
.products-grid.grid-view .product-quick-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    margin: 0;
}

.products-grid.grid-view .product-meta.compact-line span,
.products-grid.grid-view .stock-pill,
.products-grid.grid-view .last-order-pill {
    min-height: 28px;
    max-height: 28px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.15;
    font-weight: 900;
}

.products-grid.grid-view .product-quick-row {
    min-height: 61px;
    max-height: 61px;
    overflow: hidden;
}

.products-grid.grid-view .product-qty-row {
    grid-template-columns: 42px 1fr 42px;
    align-self: end;
}

/* =========================================================
   CARDS VIEW - wider horizontal cards
========================================================= */

.products-grid.cards-view .product-card {
    min-height: 170px;
    display: grid;
    grid-template-columns: 142px minmax(0, 1fr);
    gap: 12px;
    padding: 10px;
}

.products-grid.cards-view .product-image-box {
    width: 142px;
    height: 150px;
}

.products-grid.cards-view .product-info-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    align-items: stretch;
    gap: 10px;
}

.products-grid.cards-view .product-main-info {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.products-grid.cards-view .product-qty-row {
    width: 48px;
    grid-template-rows: 42px 38px 42px;
    align-content: center;
}

/* =========================================================
   ROWS VIEW - list style
========================================================= */

.products-grid.rows-view .product-card {
    min-height: 116px;
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px;
    padding: 9px;
}

.products-grid.rows-view .product-image-box {
    width: 110px;
    height: 96px;
}

.products-grid.rows-view .product-info-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 10px;
}

.products-grid.rows-view .product-main-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}

.products-grid.rows-view .product-qty-row {
    width: 150px;
    grid-template-columns: 42px 1fr 42px;
    align-content: center;
}

/* =========================================================
   GROUP TITLES
========================================================= */

.product-client-group-title,
.product-group-title {
    grid-column: 1 / -1;
    min-height: 48px;
    margin: 10px 0 2px;
    padding: 10px 14px;
    border-radius: 17px;
    border: 1px solid color-mix(in srgb, var(--products-accent) 42%, var(--products-border));
    background: linear-gradient(135deg, color-mix(in srgb, var(--products-accent) 22%, transparent), color-mix(in srgb, var(--products-accent) 8%, transparent));
    color: var(--products-text);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--products-accent) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.product-client-group-title .group-title-name,
.product-group-title .group-title-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: -.02em;
}

.product-client-group-title .group-title-count,
.product-group-title .group-title-count {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--products-accent);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    font-weight: 950;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--products-accent) 24%, transparent);
}

/* =========================================================
   FILTER MODAL - multi checkbox with images
========================================================= */

.products-filter-overlay,
.product-filter-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 999990;
    display: none;
}

.products-filter-overlay.is-open,
.product-filter-modal-overlay.is-open { display: block; }

.products-filter-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, .58);
    backdrop-filter: blur(7px);
}

.products-filter-modal,
.product-filter-modal {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(980px, calc(100vw - 34px));
    max-height: min(88vh, 820px);
    overflow: visible;
    padding: 24px;
    border-radius: 26px;
    border: 1px solid color-mix(in srgb, var(--products-accent) 30%, var(--products-border));
    background: var(--products-card);
    color: var(--products-text);
    box-shadow: 0 30px 80px rgba(0,0,0,.38);
    backdrop-filter: blur(18px);
}

.products-filter-head,
.pfm-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.products-filter-head h2,
.pfm-header h2 {
    margin: 0;
    color: var(--products-text);
    font-size: 21px;
    font-weight: 950;
}

.products-filter-head p,
.pfm-header p {
    margin: 5px 0 0;
    color: var(--products-muted);
    font-size: 13px;
    font-weight: 700;
}

.products-filter-close,
.pfm-close {
    width: 40px;
    height: 40px;
    border: 1px solid var(--products-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--products-text) 7%, transparent);
    color: var(--products-text);
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
}

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

.filter-field,
.pfm-field { min-width: 0; }

.filter-field > label,
.pfm-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--products-muted);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.filter-field select,
.pfm-select,
.pfm-dropdown-btn {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    border: 1px solid var(--products-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--products-text) 6%, transparent);
    color: var(--products-text);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    outline: none;
}

.pfm-dropdown { position: relative; }
.pfm-dropdown-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfm-dropdown-btn em { font-style: normal; opacity: .7; transition: transform .16s ease; }
.pfm-dropdown.open .pfm-dropdown-btn em { transform: rotate(180deg); }

.pfm-dropdown-panel {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 1000002;
    width: min(320px, 88vw);
    max-height: 330px;
    overflow: auto;
    display: none;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid var(--products-border);
    background: var(--products-card);
    box-shadow: 0 20px 50px rgba(0,0,0,.36);
}

.pfm-dropdown.open .pfm-dropdown-panel { display: block; }
.pfm-wide-panel { max-height: 280px; }

.pfm-mini-search {
    position: sticky;
    top: 0;
    z-index: 2;
    margin-bottom: 8px;
    padding-bottom: 8px;
    background: var(--products-card);
}

.pfm-mini-search input {
    width: 100%;
    height: 36px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid var(--products-border);
    background: color-mix(in srgb, var(--products-text) 6%, transparent);
    color: var(--products-text);
    padding: 0 10px;
    font-size: 12px;
    font-weight: 850;
    outline: none;
}

.pfm-check-entry,
.filter-entry {
    min-height: 44px;
    display: grid !important;
    grid-template-columns: 18px 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 6px;
    margin: 0 !important;
    border-radius: 12px;
    color: var(--products-text);
    cursor: pointer;
    font-size: 12px;
    font-weight: 850;
}

.pfm-check-entry:hover,
.filter-entry:hover { background: color-mix(in srgb, var(--products-accent) 12%, transparent); }

.pfm-check-entry input,
.filter-entry input { accent-color: var(--products-accent); }

.pfm-check-entry img,
.filter-entry img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    background: #fff;
    border-radius: 9px;
    padding: 3px;
}

.pfm-check-entry span,
.filter-entry span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.products-filter-checks,
.pfm-switches {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.filter-check,
.pfm-switch-card {
    min-height: 64px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid var(--products-border);
    background: color-mix(in srgb, var(--products-text) 5%, transparent);
    color: var(--products-text);
    cursor: pointer;
}

.filter-check strong,
.pfm-switch-card strong {
    display: block;
    color: var(--products-text);
    font-size: 14px;
    font-weight: 950;
}

.filter-check small,
.pfm-switch-card span {
    display: block;
    margin-top: 3px;
    color: var(--products-muted);
    font-size: 12px;
    font-weight: 700;
}

.filter-check input,
.pfm-switch-card input {
    width: 20px;
    height: 20px;
    accent-color: var(--products-accent);
}

.products-filter-actions,
.pfm-footer {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--products-border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.filter-clear-btn,
.filter-apply-btn,
.pfm-clear-btn,
.pfm-apply-btn,
.drawer-btn {
    min-width: 92px;
    min-height: 46px;
    border-radius: 14px;
    border: none;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
}

.filter-clear-btn,
.pfm-clear-btn,
.drawer-btn-soft {
    background: color-mix(in srgb, var(--products-text) 6%, transparent);
    color: var(--products-text);
    border: 1px solid var(--products-border);
}

.filter-apply-btn,
.pfm-apply-btn,
.drawer-btn-accent {
    background: var(--products-accent);
    color: #fff;
}

body.drawer-open,
body.products-filter-open { overflow: hidden; }

/* =========================================================
   PRODUCT INFO MODAL
========================================================= */

.product-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9200;
    padding: 18px;
    background: rgba(15,23,42,.55);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-modal {
    width: min(920px, 96vw);
    max-height: 92vh;
    overflow: auto;
    border-radius: 24px;
    background: var(--products-card);
    color: var(--products-text);
    border: 1px solid var(--products-border);
    box-shadow: 0 24px 80px rgba(0,0,0,.35);
}

.product-modal-header {
    padding: 16px;
    border-bottom: 1px solid var(--products-border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.product-modal-header h2 { margin: 0; font-size: 22px; font-weight: 950; }
.product-modal-header p { margin: 4px 0 0; color: var(--products-muted); font-weight: 800; }

.product-modal-close {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: var(--products-card2);
    color: var(--products-text);
    border: 1px solid var(--products-border);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 900;
}

.product-modal-body {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
}

.product-modal-image-card {
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(15,23,42,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.product-modal-image {
    max-width: 100%;
    max-height: 280px;
    object-fit: contain;
}

.modal-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.modal-info-grid div {
    padding: 10px;
    border-radius: 16px;
    background: var(--products-card2);
    border: 1px solid var(--products-border);
}

.modal-info-grid span {
    display: block;
    color: var(--products-muted);
    font-size: 11px;
    font-weight: 900;
    margin-bottom: 4px;
}

.modal-info-grid strong { font-size: 13px; font-weight: 950; }

.history-table {
    margin-top: 10px;
    border: 1px solid var(--products-border);
    border-radius: 16px;
    overflow: hidden;
}

.history-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 70px 90px;
    gap: 8px;
    padding: 9px 10px;
    border-bottom: 1px solid var(--products-border);
    font-size: 12px;
    font-weight: 800;
}

.history-row:last-child { border-bottom: none; }
.history-head { background: var(--products-accent-soft); color: var(--products-accent); font-weight: 950; }

/* =========================================================
   DRAWER / CART SUPPORT - kept for master/cart hooks
========================================================= */

.app-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(15,23,42,.48);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
}

.app-drawer-overlay.is-open { opacity: 1; visibility: visible; }

.app-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9010;
    width: min(430px, 94vw);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: var(--products-card);
    color: var(--products-text);
    border-left: 1px solid var(--products-border);
    box-shadow: -18px 0 44px rgba(0,0,0,.22);
    transform: translateX(105%);
    transition: transform .22s ease;
    backdrop-filter: blur(18px);
}

.app-drawer.is-open { transform: translateX(0); }

.drawer-head,
.drawer-footer {
    padding: 14px 15px;
    border-color: var(--products-border);
    background: var(--products-card);
}

.drawer-head {
    min-height: 66px;
    border-bottom: 1px solid var(--products-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.drawer-footer { border-top: 1px solid var(--products-border); }
.drawer-title { font-size: 18px; font-weight: 950; letter-spacing: -.03em; }
.drawer-subtitle { margin-top: 2px; color: var(--products-muted); font-size: 12px; font-weight: 800; }

.drawer-x {
    width: 38px;
    height: 38px;
    border: 1px solid var(--products-border);
    border-radius: 14px;
    background: var(--products-card2);
    color: var(--products-text);
    font-size: 22px;
    font-weight: 900;
    cursor: pointer;
}

.drawer-body { min-height: 0; overflow: auto; padding: 14px; }
.filter-footer { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }

.cart-drawer-card {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 11px;
    margin-bottom: 10px;
    padding: 9px;
    border: 1px solid var(--products-border);
    border-radius: 18px;
    background: var(--products-card2);
}

.cart-drawer-card img {
    width: 82px;
    height: 82px;
    border-radius: 15px;
    object-fit: contain;
    background: #fff;
    padding: 6px;
}

.cart-drawer-info { min-width: 0; }
.cart-drawer-info h4 {
    margin: 0 0 5px;
    color: var(--products-text);
    font-size: 13px;
    line-height: 1.25;
    font-weight: 950;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cart-drawer-meta { display: flex; flex-wrap: wrap; gap: 5px; color: var(--products-muted); font-size: 11px; font-weight: 800; }
.cart-drawer-meta span { padding: 3px 7px; border-radius: 999px; background: rgba(148,163,184,.12); }
.cart-drawer-price { margin-top: 6px; color: var(--products-accent); font-size: 13px; font-weight: 950; }
.cart-drawer-qty { margin-top: 7px; width: 126px; display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: 6px; }
.cart-drawer-qty .qty-btn { min-width: 36px; min-height: 34px; border-radius: 12px; font-size: 17px; }
.cart-drawer-qty strong { min-height: 34px; border: 1px solid var(--products-border); border-radius: 12px; background: var(--products-card); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 950; }
.cart-footer-total { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 950; }
.cart-footer-total span { color: var(--products-muted); }
.cart-footer-total strong { color: var(--products-accent); font-size: 20px; }

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {
    .products-page { padding: 12px; }
    .products-title-row { align-items: stretch; flex-direction: column; }
    .products-title-actions { justify-content: flex-start; }
    .products-search-wrap { width: 100%; min-width: 0; }
    .products-grid.cards-view { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}

@media (max-width: 900px) {
    .products-filter-modal,
    .product-filter-modal { overflow: auto; }
    .products-filter-grid,
    .pfm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .products-filter-checks,
    .pfm-switches { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .products-grid.grid-view,
    .products-grid.cards-view,
    .products-grid.rows-view { grid-template-columns: 1fr; }

    .products-grid.grid-view .product-card,
    .products-grid.cards-view .product-card,
    .products-grid.rows-view .product-card {
        height: auto;
        min-height: 0;
        grid-template-columns: 128px minmax(0, 1fr);
        grid-template-rows: auto;
    }

    .products-grid.grid-view .product-image-box,
    .products-grid.cards-view .product-image-box,
    .products-grid.rows-view .product-image-box {
        width: 128px;
        height: 138px;
        min-height: 138px;
        max-height: 138px;
    }

    .products-grid.grid-view .product-info-box,
    .products-grid.cards-view .product-info-box,
    .products-grid.rows-view .product-info-box {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        min-height: 0;
    }

    .products-grid.grid-view .product-main-info h3 { min-height: 0; max-height: none; }
    .products-grid.grid-view .arabic-line { min-height: 0; max-height: none; }
    .products-grid.grid-view .product-quick-row { min-height: 0; max-height: none; }

    .products-grid.grid-view .product-qty-row,
    .products-grid.cards-view .product-qty-row,
    .products-grid.rows-view .product-qty-row {
        width: 100%;
        grid-template-columns: 46px 1fr 46px;
        grid-template-rows: auto;
        margin-top: 4px;
    }

    .product-modal-body { grid-template-columns: 1fr; }
    .product-modal-image-card { min-height: 220px; }
}

@media (max-width: 640px) {
    .products-filter-overlay,
    .product-filter-modal-overlay {
        overflow: auto;
    }

    .products-filter-modal,
    .product-filter-modal {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        margin: 10px auto;
        width: calc(100vw - 20px);
        max-height: none;
        border-radius: 22px;
        padding: 18px;
    }

    .products-filter-grid,
    .pfm-grid { grid-template-columns: 1fr; }

    .products-filter-actions,
    .pfm-footer {
        position: sticky;
        bottom: 0;
        background: var(--products-card);
        padding-bottom: 4px;
    }

    .filter-clear-btn,
    .filter-apply-btn,
    .pfm-clear-btn,
    .pfm-apply-btn { flex: 1; }
}

@media (max-width: 560px) {
    .products-page { padding: 10px; padding-bottom: 78px; }

    .products-title-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .products-search-wrap { grid-column: 1 / -1; width: 100%; }

    .products-view-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .products-action-btn,
    .view-link { width: 100%; }

    .products-grid.grid-view .product-card,
    .products-grid.cards-view .product-card,
    .products-grid.rows-view .product-card {
        grid-template-columns: 118px minmax(0, 1fr);
        gap: 9px;
        padding: 8px;
        border-radius: 18px;
    }

    .products-grid.grid-view .product-image-box,
    .products-grid.cards-view .product-image-box,
    .products-grid.rows-view .product-image-box {
        width: 118px;
        height: 132px;
        min-height: 132px;
        max-height: 132px;
        border-radius: 16px;
    }

    .product-main-info h3 { font-size: 14px; }
    .arabic-line { font-size: 12px; }

    .product-meta span,
    .stock-pill,
    .last-order-pill,
    .price-pill { font-size: 11px; }

    .app-drawer { width: 100vw; }
    .history-row { grid-template-columns: 1fr; }

    .site-mobile-bar,
    .mobile-bottom-bar,
    .site-mobile-bottom-nav { display: flex !important; }

    .site-desktop-menu,
    .site-desktop-nav,
    .desktop-nav { display: none !important; }
}

@media (min-width: 561px) and (max-width: 1024px) and (orientation: portrait) {
    .site-mobile-bar,
    .mobile-bottom-bar,
    .site-mobile-bottom-nav { display: flex !important; }

    .site-desktop-menu,
    .site-desktop-nav,
    .desktop-nav { display: none !important; }
}


/* =========================================================
   FINAL SMALL READABILITY FIXES
========================================================= */
@media (max-width: 640px) {
    .product-main-info h3 { font-size: 15px; }
    .arabic-line { font-size: 13px; }
    .product-client-group-title .group-title-name,
    .product-group-title .group-title-name { font-size: 14px; }
    .product-client-group-title .group-title-count,
    .product-group-title .group-title-count { font-size: 11px; }
}

.products-view-only-actions { flex: 0 0 auto; }
.products-view-only-actions .products-view-actions { display: inline-flex; }
@media (max-width: 560px) {
    .products-view-only-actions { width: 100%; }
    .products-view-only-actions .products-view-actions { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
}


/* =========================================================
   FINAL GAP FIX - compact grid card spacing
   Reduces the big empty gap between image/title/Arabic lines.
========================================================= */
.products-grid.grid-view .product-card {
    height: 428px !important;
    min-height: 428px !important;
    grid-template-rows: 172px minmax(0, 1fr) !important;
    gap: 7px !important;
}

.products-grid.grid-view .product-image-box {
    height: 172px !important;
    min-height: 172px !important;
    max-height: 172px !important;
}

.product-image-box img {
    color: transparent !important;
    font-size: 0 !important;
}

.products-grid.grid-view .product-info-box {
    gap: 6px !important;
}

.products-grid.grid-view .product-main-info {
    gap: 4px !important;
}

.products-grid.grid-view .product-main-info h3 {
    min-height: 0 !important;
    max-height: 42px !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.24 !important;
}

.products-grid.grid-view .arabic-line {
    min-height: 0 !important;
    max-height: 38px !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.34 !important;
}

.products-grid.grid-view .product-meta.compact-line,
.products-grid.grid-view .product-quick-row {
    gap: 4px !important;
}

.products-grid.grid-view .product-meta.compact-line span,
.products-grid.grid-view .stock-pill,
.products-grid.grid-view .last-order-pill {
    min-height: 27px !important;
    max-height: 27px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.products-grid.grid-view .product-quick-row {
    min-height: 58px !important;
    max-height: 58px !important;
}

@media (max-width: 640px) {
    .products-grid.grid-view .product-card {
        height: 418px !important;
        min-height: 418px !important;
        grid-template-rows: 162px minmax(0, 1fr) !important;
    }

    .products-grid.grid-view .product-image-box {
        height: 162px !important;
        min-height: 162px !important;
        max-height: 162px !important;
    }

    .products-grid.grid-view .product-main-info h3 {
        font-size: 16px !important;
        line-height: 1.22 !important;
        max-height: 40px !important;
    }

    .products-grid.grid-view .arabic-line {
        font-size: 14px !important;
        line-height: 1.32 !important;
        max-height: 37px !important;
    }
}


/* =========================================================
   FINAL LIGHT MODE CONTRAST FIX
   Makes filter modal, dropdowns, pills, qty/size, and master search readable in light mode.
   Dark mode stays controlled by the existing dark selectors above.
========================================================= */
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .products-page,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) {
    --products-card: #ffffff;
    --products-card2: #f8fafc;
    --products-text: #0f172a;
    --products-muted: #334155;
    --products-border: rgba(15, 23, 42, .18);
    --products-accent-soft: color-mix(in srgb, var(--products-accent) 13%, #ffffff);
}

html:not(.dark):not([data-mode="dark"]) body:not(.dark) .products-filter-backdrop {
    z-index: 1 !important;
    background: rgba(15, 23, 42, .58) !important;
    backdrop-filter: blur(6px) !important;
}

html:not(.dark):not([data-mode="dark"]) body:not(.dark) .products-filter-modal,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .product-filter-modal {
    z-index: 2 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, .18) !important;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .28) !important;
}

html:not(.dark):not([data-mode="dark"]) body:not(.dark) .products-filter-head h2,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .pfm-header h2,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .filter-field > label,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .pfm-field label,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .filter-check strong,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .pfm-switch-card strong,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .pfm-check-entry span,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .filter-entry span {
    color: #0f172a !important;
    opacity: 1 !important;
}

html:not(.dark):not([data-mode="dark"]) body:not(.dark) .products-filter-head p,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .pfm-header p,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .filter-check small,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .pfm-switch-card span {
    color: #475569 !important;
    opacity: 1 !important;
}

html:not(.dark):not([data-mode="dark"]) body:not(.dark) .filter-field select,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .pfm-select,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .pfm-dropdown-btn,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .pfm-mini-search input {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important;
}

html:not(.dark):not([data-mode="dark"]) body:not(.dark) .pfm-dropdown-btn span,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .pfm-dropdown-btn em,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .pfm-mini-search input::placeholder {
    color: #334155 !important;
    opacity: 1 !important;
}

html:not(.dark):not([data-mode="dark"]) body:not(.dark) .pfm-dropdown-panel {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22) !important;
}

html:not(.dark):not([data-mode="dark"]) body:not(.dark) .pfm-mini-search {
    background: #ffffff !important;
}

html:not(.dark):not([data-mode="dark"]) body:not(.dark) .pfm-check-entry,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .filter-entry,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .filter-check,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .pfm-switch-card {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, .10) !important;
}

html:not(.dark):not([data-mode="dark"]) body:not(.dark) .pfm-check-entry:hover,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .filter-entry:hover,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .filter-check:hover,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .pfm-switch-card:hover {
    background: color-mix(in srgb, var(--products-accent) 11%, #ffffff) !important;
    border-color: color-mix(in srgb, var(--products-accent) 30%, #cbd5e1) !important;
}

html:not(.dark):not([data-mode="dark"]) body:not(.dark) .products-filter-close,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .pfm-close,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .filter-clear-btn,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .pfm-clear-btn {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html:not(.dark):not([data-mode="dark"]) body:not(.dark) .product-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, .13) !important;
}

html:not(.dark):not([data-mode="dark"]) body:not(.dark) .product-meta span,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .meta-pill,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .upc-pill,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .qtysize-pill,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .stock-pill,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .last-order-pill,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .price-pill {
    background: #eef2f7 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78) !important;
}

html:not(.dark):not([data-mode="dark"]) body:not(.dark) .qtysize-pill,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .upc-pill {
    font-weight: 950 !important;
}

html:not(.dark):not([data-mode="dark"]) body:not(.dark) .product-main-info h3 {
    color: #0f172a !important;
}

html:not(.dark):not([data-mode="dark"]) body:not(.dark) .arabic-line {
    color: #475569 !important;
    opacity: 1 !important;
}

html:not(.dark):not([data-mode="dark"]) body:not(.dark) .qty-value {
    background: #475569 !important;
    color: #ffffff !important;
    border-color: #334155 !important;
}

html:not(.dark):not([data-mode="dark"]) body:not(.dark) .product-client-group-title,
html:not(.dark):not([data-mode="dark"]) body:not(.dark) .product-group-title {
    background: color-mix(in srgb, var(--products-accent) 15%, #ffffff) !important;
    border-color: color-mix(in srgb, var(--products-accent) 45%, #cbd5e1) !important;
    color: #0f172a !important;
}

/* =========================================================
   STRONG LIGHT MODE READABILITY FIX v1600
   This uses the actual master theme flag: html[data-mode="light"].
   It also protects against old cached dark classes by winning with !important.
========================================================= */
html[data-mode="light"] .products-page,
html.light .products-page {
    --products-bg: #f6f8fb !important;
    --products-card: #ffffff !important;
    --products-card2: #f8fafc !important;
    --products-text: #0f172a !important;
    --products-muted: #334155 !important;
    --products-border: rgba(15,23,42,.18) !important;
    --products-shadow: 0 10px 26px rgba(15,23,42,.08) !important;
    color: #0f172a !important;
}

html[data-mode="light"] .product-card,
html.light .product-card {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(15,23,42,.14) !important;
}

html[data-mode="light"] .product-main-info h3,
html.light .product-main-info h3 {
    color: #020617 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

html[data-mode="light"] .arabic-line,
html.light .arabic-line {
    color: #334155 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

html[data-mode="light"] .product-meta span,
html[data-mode="light"] .meta-pill,
html[data-mode="light"] .upc-pill,
html[data-mode="light"] .qtysize-pill,
html[data-mode="light"] .stock-pill,
html[data-mode="light"] .last-order-pill,
html[data-mode="light"] .price-pill,
html.light .product-meta span,
html.light .meta-pill,
html.light .upc-pill,
html.light .qtysize-pill,
html.light .stock-pill,
html.light .last-order-pill,
html.light .price-pill {
    background: #eef2f7 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
}

html[data-mode="light"] .stock-pill,
html.light .stock-pill {
    color: #14532d !important;
}

html[data-mode="light"] .last-order-pill,
html.light .last-order-pill {
    color: #1e293b !important;
}

html[data-mode="light"] .qty-value,
html.light .qty-value {
    background: #475569 !important;
    color: #ffffff !important;
    border-color: #334155 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

html[data-mode="light"] .product-client-group-title,
html[data-mode="light"] .product-group-title,
html.light .product-client-group-title,
html.light .product-group-title {
    background: linear-gradient(135deg, color-mix(in srgb, var(--products-accent) 18%, #ffffff), #ffffff) !important;
    color: #0f172a !important;
    border-color: color-mix(in srgb, var(--products-accent) 48%, #cbd5e1) !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.07) !important;
}

/* Filter modal hard reset for light mode */
html[data-mode="light"] #ProductFilterOverlay,
html[data-mode="light"] .products-filter-overlay,
html[data-mode="light"] .product-filter-modal-overlay,
html.light #ProductFilterOverlay,
html.light .products-filter-overlay,
html.light .product-filter-modal-overlay {
    color: #0f172a !important;
}

html[data-mode="light"] .products-filter-backdrop,
html.light .products-filter-backdrop {
    background: rgba(15,23,42,.56) !important;
    backdrop-filter: blur(6px) !important;
}

html[data-mode="light"] .products-filter-modal,
html[data-mode="light"] .product-filter-modal,
html.light .products-filter-modal,
html.light .product-filter-modal {
    --products-card: #ffffff !important;
    --products-card2: #f8fafc !important;
    --products-text: #0f172a !important;
    --products-muted: #475569 !important;
    --products-border: rgba(15,23,42,.18) !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(15,23,42,.18) !important;
    box-shadow: 0 30px 90px rgba(15,23,42,.30) !important;
    opacity: 1 !important;
}

html[data-mode="light"] .products-filter-modal h2,
html[data-mode="light"] .product-filter-modal h2,
html[data-mode="light"] .products-filter-modal label,
html[data-mode="light"] .product-filter-modal label,
html[data-mode="light"] .products-filter-modal strong,
html[data-mode="light"] .product-filter-modal strong,
html[data-mode="light"] .products-filter-modal .pfm-check-entry,
html[data-mode="light"] .product-filter-modal .pfm-check-entry,
html[data-mode="light"] .products-filter-modal .pfm-check-entry span,
html[data-mode="light"] .product-filter-modal .pfm-check-entry span,
html[data-mode="light"] .products-filter-modal .filter-entry,
html[data-mode="light"] .product-filter-modal .filter-entry,
html[data-mode="light"] .products-filter-modal .filter-entry span,
html[data-mode="light"] .product-filter-modal .filter-entry span,
html.light .products-filter-modal h2,
html.light .product-filter-modal h2,
html.light .products-filter-modal label,
html.light .product-filter-modal label,
html.light .products-filter-modal strong,
html.light .product-filter-modal strong,
html.light .products-filter-modal .pfm-check-entry,
html.light .product-filter-modal .pfm-check-entry,
html.light .products-filter-modal .pfm-check-entry span,
html.light .product-filter-modal .pfm-check-entry span,
html.light .products-filter-modal .filter-entry,
html.light .product-filter-modal .filter-entry,
html.light .products-filter-modal .filter-entry span,
html.light .product-filter-modal .filter-entry span {
    color: #0f172a !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

html[data-mode="light"] .products-filter-modal p,
html[data-mode="light"] .product-filter-modal p,
html[data-mode="light"] .products-filter-modal small,
html[data-mode="light"] .product-filter-modal small,
html[data-mode="light"] .products-filter-modal .pfm-switch-card span,
html[data-mode="light"] .product-filter-modal .pfm-switch-card span,
html.light .products-filter-modal p,
html.light .product-filter-modal p,
html.light .products-filter-modal small,
html.light .product-filter-modal small,
html.light .products-filter-modal .pfm-switch-card span,
html.light .product-filter-modal .pfm-switch-card span {
    color: #475569 !important;
    opacity: 1 !important;
}

html[data-mode="light"] .products-filter-modal select,
html[data-mode="light"] .product-filter-modal select,
html[data-mode="light"] .products-filter-modal input,
html[data-mode="light"] .product-filter-modal input,
html[data-mode="light"] .products-filter-modal .pfm-dropdown-btn,
html[data-mode="light"] .product-filter-modal .pfm-dropdown-btn,
html.light .products-filter-modal select,
html.light .product-filter-modal select,
html.light .products-filter-modal input,
html.light .product-filter-modal input,
html.light .products-filter-modal .pfm-dropdown-btn,
html.light .product-filter-modal .pfm-dropdown-btn {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    opacity: 1 !important;
}

html[data-mode="light"] .products-filter-modal select option,
html[data-mode="light"] .product-filter-modal select option,
html.light .products-filter-modal select option,
html.light .product-filter-modal select option {
    background: #ffffff !important;
    color: #0f172a !important;
}

html[data-mode="light"] .products-filter-modal .pfm-dropdown-btn span,
html[data-mode="light"] .product-filter-modal .pfm-dropdown-btn span,
html[data-mode="light"] .products-filter-modal .pfm-dropdown-btn em,
html[data-mode="light"] .product-filter-modal .pfm-dropdown-btn em,
html.light .products-filter-modal .pfm-dropdown-btn span,
html.light .product-filter-modal .pfm-dropdown-btn span,
html.light .products-filter-modal .pfm-dropdown-btn em,
html.light .product-filter-modal .pfm-dropdown-btn em {
    color: #334155 !important;
    opacity: 1 !important;
}

html[data-mode="light"] .products-filter-modal .pfm-dropdown-panel,
html[data-mode="light"] .product-filter-modal .pfm-dropdown-panel,
html.light .products-filter-modal .pfm-dropdown-panel,
html.light .product-filter-modal .pfm-dropdown-panel {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 24px 60px rgba(15,23,42,.24) !important;
}

html[data-mode="light"] .products-filter-modal .pfm-mini-search,
html[data-mode="light"] .product-filter-modal .pfm-mini-search,
html.light .products-filter-modal .pfm-mini-search,
html.light .product-filter-modal .pfm-mini-search {
    background: #ffffff !important;
}

html[data-mode="light"] .products-filter-modal .pfm-check-entry,
html[data-mode="light"] .product-filter-modal .pfm-check-entry,
html[data-mode="light"] .products-filter-modal .filter-entry,
html[data-mode="light"] .product-filter-modal .filter-entry,
html[data-mode="light"] .products-filter-modal .filter-check,
html[data-mode="light"] .product-filter-modal .filter-check,
html[data-mode="light"] .products-filter-modal .pfm-switch-card,
html[data-mode="light"] .product-filter-modal .pfm-switch-card,
html.light .products-filter-modal .pfm-check-entry,
html.light .product-filter-modal .pfm-check-entry,
html.light .products-filter-modal .filter-entry,
html.light .product-filter-modal .filter-entry,
html.light .products-filter-modal .filter-check,
html.light .product-filter-modal .filter-check,
html.light .products-filter-modal .pfm-switch-card,
html.light .product-filter-modal .pfm-switch-card {
    background: #ffffff !important;
    border-color: rgba(15,23,42,.12) !important;
}

html[data-mode="light"] .products-filter-modal .pfm-check-entry:hover,
html[data-mode="light"] .product-filter-modal .pfm-check-entry:hover,
html[data-mode="light"] .products-filter-modal .filter-entry:hover,
html[data-mode="light"] .product-filter-modal .filter-entry:hover,
html.light .products-filter-modal .pfm-check-entry:hover,
html.light .product-filter-modal .pfm-check-entry:hover,
html.light .products-filter-modal .filter-entry:hover,
html.light .product-filter-modal .filter-entry:hover {
    background: color-mix(in srgb, var(--products-accent) 12%, #ffffff) !important;
}

html[data-mode="light"] .products-filter-modal .filter-apply-btn,
html[data-mode="light"] .product-filter-modal .filter-apply-btn,
html[data-mode="light"] .products-filter-modal .pfm-apply-btn,
html[data-mode="light"] .product-filter-modal .pfm-apply-btn,
html.light .products-filter-modal .filter-apply-btn,
html.light .product-filter-modal .filter-apply-btn,
html.light .products-filter-modal .pfm-apply-btn,
html.light .product-filter-modal .pfm-apply-btn {
    background: var(--products-accent, #2563eb) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

html[data-mode="light"] .products-filter-modal .filter-clear-btn,
html[data-mode="light"] .product-filter-modal .filter-clear-btn,
html[data-mode="light"] .products-filter-modal .pfm-clear-btn,
html[data-mode="light"] .product-filter-modal .pfm-clear-btn,
html[data-mode="light"] .products-filter-close,
html[data-mode="light"] .pfm-close,
html.light .products-filter-modal .filter-clear-btn,
html.light .product-filter-modal .filter-clear-btn,
html.light .products-filter-modal .pfm-clear-btn,
html.light .product-filter-modal .pfm-clear-btn,
html.light .products-filter-close,
html.light .pfm-close {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}


/* =========================================================
   PRODUCTS PAGE v20260602_30 - THEME SYNC + ACTIVE STATUS + FAST QTY
========================================================= */
.products-page,
.product-card,
.products-filter-modal,
.product-modal,
.pfm-dropdown-panel,
.products-action-btn,
.view-link,
.qty-btn,
.qty-value {
    font-family: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif !important;
}

.products-page { font-size: calc(15px * var(--theme-font-scale, 1)) !important; }

.product-card.is-syncing::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--products-accent) 11%, transparent), transparent);
    transform: translateX(-100%);
    animation: productsSyncShimmer .85s ease infinite;
}

@keyframes productsSyncShimmer { to { transform: translateX(100%); } }

.filter-field #FilterStatus { border-color: color-mix(in srgb, var(--products-accent) 30%, var(--products-border)) !important; }

html[data-mode="light"] .products-page,
html.light .products-page {
    --products-bg: var(--theme-bg, #f6f8fb);
    --products-card: var(--theme-surface, #ffffff);
    --products-card2: var(--theme-soft, #f8fafc);
    --products-text: var(--theme-text, #0f172a);
    --products-muted: var(--theme-muted, #475569);
    --products-border: var(--theme-border, rgba(15,23,42,.14));
}

html[data-mode="dark"] .products-page,
html.dark .products-page {
    --products-bg: var(--theme-bg, #0b1220);
    --products-card: var(--theme-surface, rgba(15,23,42,.92));
    --products-card2: var(--theme-soft, rgba(30,41,59,.78));
    --products-text: var(--theme-text, #f8fafc);
    --products-muted: var(--theme-muted, #a9b6c8);
    --products-border: var(--theme-border, rgba(255,255,255,.11));
}

.empty-icon {
    width: max-content;
    min-width: 72px;
    margin: 0 auto 10px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--products-accent-soft);
    color: var(--products-accent);
    font-size: 12px !important;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.product-modal-close,
.products-filter-close { font-size: 13px !important; line-height: 1 !important; }


/* =========================================================
   PRODUCTS FILTER DRAWER UPDATE v20260609_01
   Converts the old centered filter modal into a right-side drawer,
   enlarges image dropdown rows, forces clean mobile row cards,
   and keeps exact matching behavior paired with Products.js.
========================================================= */

.products-filter-overlay,
.product-filter-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147481000 !important;
    display: none !important;
    overflow: hidden !important;
}

.products-filter-overlay.is-open,
.product-filter-modal-overlay.is-open {
    display: block !important;
}

.products-filter-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(2, 6, 23, .54) !important;
    backdrop-filter: blur(7px) saturate(1.08) !important;
}

.products-filter-modal,
.product-filter-modal {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(540px, 94vw) !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 28px 0 0 28px !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 1px solid color-mix(in srgb, var(--products-accent) 42%, var(--products-border)) !important;
    background:
        radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--products-accent) 17%, transparent), transparent 38%),
        color-mix(in srgb, var(--products-card) 96%, transparent) !important;
    box-shadow: -26px 0 70px rgba(0, 0, 0, .38) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
    transform: translateX(105%) !important;
    transition: transform .24s cubic-bezier(.2,.8,.2,1) !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
}

.products-filter-overlay.is-open .products-filter-modal,
.product-filter-modal-overlay.is-open .product-filter-modal {
    transform: translateX(0) !important;
}

.products-filter-head,
.pfm-header {
    min-height: 78px !important;
    margin: 0 !important;
    padding: 18px 20px !important;
    border-bottom: 1px solid var(--products-border) !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--products-accent) 15%, transparent), transparent 54%),
        color-mix(in srgb, var(--products-card) 88%, transparent) !important;
}

.products-filter-head h2,
.pfm-header h2 {
    font-size: 22px !important;
    letter-spacing: -.035em !important;
}

.products-filter-close,
.pfm-close {
    min-width: 76px !important;
    width: auto !important;
    height: 42px !important;
    padding: 0 14px !important;
    border-radius: 16px !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

.products-filter-grid,
.pfm-grid {
    min-height: 0 !important;
    overflow: auto !important;
    padding: 16px 18px 8px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
}

.filter-field,
.pfm-field {
    min-width: 0 !important;
}

.filter-field > label,
.pfm-field label {
    margin: 0 0 8px 2px !important;
    color: var(--products-muted) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

.filter-field select,
.pfm-select,
.pfm-dropdown-btn {
    min-height: 54px !important;
    height: 54px !important;
    padding: 0 15px !important;
    border-radius: 18px !important;
    font-size: 14px !important;
    border-color: color-mix(in srgb, var(--products-accent) 22%, var(--products-border)) !important;
    background: color-mix(in srgb, var(--products-text) 6%, transparent) !important;
}

.pfm-dropdown {
    position: relative !important;
}

.pfm-dropdown-panel {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
    display: block !important;
    margin-top: 0 !important;
    padding: 0 !important;
    border-width: 0 !important;
    opacity: 0 !important;
    transform: translateY(-4px) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--products-card) 98%, transparent) !important;
    transition: max-height .22s ease, padding .22s ease, margin .22s ease, opacity .18s ease, transform .18s ease !important;
}

.pfm-dropdown.open .pfm-dropdown-panel {
    max-height: 390px !important;
    overflow: auto !important;
    margin-top: 9px !important;
    padding: 10px !important;
    border: 1px solid color-mix(in srgb, var(--products-accent) 28%, var(--products-border)) !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.20) !important;
}

.pfm-mini-search {
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
}

.pfm-mini-search input {
    height: 42px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
}

.pfm-check-entry,
.filter-entry {
    min-height: 66px !important;
    grid-template-columns: 22px 52px minmax(0, 1fr) !important;
    gap: 11px !important;
    padding: 8px !important;
    border: 1px solid transparent !important;
    border-radius: 16px !important;
    font-size: 13px !important;
}

.pfm-check-entry:hover,
.filter-entry:hover {
    border-color: color-mix(in srgb, var(--products-accent) 24%, var(--products-border)) !important;
}

.pfm-check-entry input,
.filter-entry input {
    width: 18px !important;
    height: 18px !important;
}

.pfm-check-entry img,
.filter-entry img {
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    padding: 4px !important;
}

.pfm-check-entry span,
.filter-entry span {
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
}

.products-filter-checks,
.pfm-switches {
    margin: 0 !important;
    padding: 10px 18px !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    border-top: 1px solid var(--products-border) !important;
    background: color-mix(in srgb, var(--products-card) 88%, transparent) !important;
}

.filter-check,
.pfm-switch-card {
    min-height: 58px !important;
    border-radius: 18px !important;
}

.products-filter-actions,
.pfm-footer {
    margin: 0 !important;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid var(--products-border) !important;
    background: color-mix(in srgb, var(--products-card) 94%, transparent) !important;
    display: grid !important;
    grid-template-columns: 1fr 1.35fr !important;
    gap: 10px !important;
}

.filter-clear-btn,
.filter-apply-btn,
.pfm-clear-btn,
.pfm-apply-btn {
    width: 100% !important;
    min-height: 50px !important;
    border-radius: 17px !important;
    font-size: 14px !important;
}

/* Stronger mobile row mode. Any selected view becomes a row list on phone/tablet. */
@media (max-width: 820px) {
    .products-grid,
    .products-grid.grid-view,
    .products-grid.cards-view,
    .products-grid.rows-view,
    .products-grid.mobile-row-view {
        grid-template-columns: 1fr !important;
    }

    .products-grid .product-card,
    .products-grid.grid-view .product-card,
    .products-grid.cards-view .product-card,
    .products-grid.rows-view .product-card,
    .products-grid.mobile-row-view .product-card {
        height: auto !important;
        min-height: 134px !important;
        display: grid !important;
        grid-template-columns: 118px minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
        gap: 10px !important;
        padding: 9px !important;
        border-radius: 20px !important;
    }

    .products-grid .product-image-box,
    .products-grid.grid-view .product-image-box,
    .products-grid.cards-view .product-image-box,
    .products-grid.rows-view .product-image-box,
    .products-grid.mobile-row-view .product-image-box {
        width: 118px !important;
        height: 128px !important;
        min-height: 128px !important;
        max-height: 128px !important;
        border-radius: 17px !important;
    }

    .products-grid .product-info-box,
    .products-grid.grid-view .product-info-box,
    .products-grid.cards-view .product-info-box,
    .products-grid.rows-view .product-info-box,
    .products-grid.mobile-row-view .product-info-box {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 8px !important;
        min-height: 0 !important;
    }

    .products-grid .product-main-info,
    .products-grid.grid-view .product-main-info,
    .products-grid.cards-view .product-main-info,
    .products-grid.rows-view .product-main-info,
    .products-grid.mobile-row-view .product-main-info {
        gap: 5px !important;
        justify-content: start !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .products-grid .product-main-info h3,
    .products-grid.grid-view .product-main-info h3,
    .products-grid.cards-view .product-main-info h3,
    .products-grid.rows-view .product-main-info h3,
    .products-grid.mobile-row-view .product-main-info h3 {
        min-height: 0 !important;
        max-height: 40px !important;
        font-size: 15px !important;
        line-height: 1.28 !important;
        -webkit-line-clamp: 2 !important;
    }

    .products-grid .arabic-line,
    .products-grid.grid-view .arabic-line,
    .products-grid.cards-view .arabic-line,
    .products-grid.rows-view .arabic-line,
    .products-grid.mobile-row-view .arabic-line {
        min-height: 0 !important;
        max-height: 34px !important;
        font-size: 12.5px !important;
        line-height: 1.32 !important;
        -webkit-line-clamp: 2 !important;
    }

    .products-grid .product-meta.compact-line,
    .products-grid.grid-view .product-meta.compact-line,
    .products-grid.cards-view .product-meta.compact-line,
    .products-grid.rows-view .product-meta.compact-line,
    .products-grid.mobile-row-view .product-meta.compact-line,
    .products-grid .product-quick-row,
    .products-grid.grid-view .product-quick-row,
    .products-grid.cards-view .product-quick-row,
    .products-grid.rows-view .product-quick-row,
    .products-grid.mobile-row-view .product-quick-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .products-grid .product-meta.compact-line span,
    .products-grid.grid-view .product-meta.compact-line span,
    .products-grid.cards-view .product-meta.compact-line span,
    .products-grid.rows-view .product-meta.compact-line span,
    .products-grid.mobile-row-view .product-meta.compact-line span,
    .products-grid .stock-pill,
    .products-grid.grid-view .stock-pill,
    .products-grid.cards-view .stock-pill,
    .products-grid.rows-view .stock-pill,
    .products-grid.mobile-row-view .stock-pill,
    .products-grid .last-order-pill,
    .products-grid.grid-view .last-order-pill,
    .products-grid.cards-view .last-order-pill,
    .products-grid.rows-view .last-order-pill,
    .products-grid.mobile-row-view .last-order-pill {
        min-height: 25px !important;
        max-height: 25px !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
    }

    .products-grid .product-qty-row,
    .products-grid.grid-view .product-qty-row,
    .products-grid.cards-view .product-qty-row,
    .products-grid.rows-view .product-qty-row,
    .products-grid.mobile-row-view .product-qty-row {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        grid-template-rows: auto !important;
        gap: 8px !important;
        margin-top: 2px !important;
    }

    .qty-btn,
    .qty-value {
        min-height: 40px !important;
        border-radius: 14px !important;
    }

    .products-filter-modal,
    .product-filter-modal {
        width: min(500px, 96vw) !important;
        border-radius: 24px 0 0 24px !important;
    }
}

@media (max-width: 520px) {
    .products-grid .product-card,
    .products-grid.grid-view .product-card,
    .products-grid.cards-view .product-card,
    .products-grid.rows-view .product-card,
    .products-grid.mobile-row-view .product-card {
        grid-template-columns: 104px minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .products-grid .product-image-box,
    .products-grid.grid-view .product-image-box,
    .products-grid.cards-view .product-image-box,
    .products-grid.rows-view .product-image-box,
    .products-grid.mobile-row-view .product-image-box {
        width: 104px !important;
        height: 118px !important;
        min-height: 118px !important;
        max-height: 118px !important;
    }

    .price-badge {
        left: 7px !important;
        top: 7px !important;
        min-height: 25px !important;
        padding: 5px 8px !important;
        font-size: 10px !important;
    }

    .products-filter-modal,
    .product-filter-modal {
        width: 100vw !important;
        border-radius: 22px 0 0 22px !important;
    }
}

html[data-mode="light"] .products-filter-modal,
html[data-mode="light"] .product-filter-modal,
html.light .products-filter-modal,
html.light .product-filter-modal {
    background:
        radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--products-accent) 13%, transparent), transparent 38%),
        #ffffff !important;
}

html[data-mode="light"] .pfm-dropdown-panel,
html.light .pfm-dropdown-panel {
    background: #ffffff !important;
}



/* =========================================================
   /Products bridge + smooth scroll/performance fixes
========================================================= */

html {
    scroll-behavior: smooth;
}

.products-page {
    position: relative;
    isolation: isolate;
    padding-top: 92px;
    padding-bottom: 96px;
    overflow-anchor: none;
}

.products-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--products-accent) 14%, transparent), transparent 28%),
        radial-gradient(circle at 86% 24%, color-mix(in srgb, var(--products-accent) 10%, transparent), transparent 32%),
        radial-gradient(circle at 50% 100%, rgba(148,163,184,.12), transparent 44%);
    transform: translateZ(0);
    animation: productsSoftBackground 18s ease-in-out infinite alternate;
}

@keyframes productsSoftBackground {
    from { opacity: .76; transform: translate3d(0,0,0) scale(1); }
    to { opacity: 1; transform: translate3d(0,-14px,0) scale(1.03); }
}

.products-shell {
    transform: translateZ(0);
}

.products-grid {
    will-change: contents;
}

.product-card {
    backface-visibility: hidden;
    transform: translateZ(0);
    contain: layout paint style;
}

.product-image-box,
.card-img-stage {
    isolation: isolate;
}

.card-img-stage .card-img-nav {
    position: absolute;
    top: 50%;
    z-index: 8;
    width: 30px;
    height: 42px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,23,42,.52);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    font-weight: 950;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, background .16s ease;
}

.card-img-stage:hover .card-img-nav,
.card-img-stage:focus-within .card-img-nav {
    opacity: 1;
    pointer-events: auto;
}

.card-img-stage .card-img-prev {
    left: 8px;
}

.card-img-stage .card-img-next {
    right: 8px;
}

.card-img-stage .card-img-nav:hover {
    background: var(--products-accent);
    transform: translateY(-50%) scale(1.04);
}

.image-count-badge {
    right: 8px !important;
    bottom: 8px !important;
}

.product-actions-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: end;
}

.products-info-btn,
.card-info {
    min-height: 38px;
    min-width: 38px;
    border-radius: 14px;
    border: 1px solid var(--products-border);
    background: var(--products-card2);
    color: var(--products-accent);
    font-weight: 950;
    cursor: pointer;
}

.products-info-btn:hover,
.card-info:hover {
    border-color: color-mix(in srgb, var(--products-accent) 50%, var(--products-border));
    background: var(--products-accent-soft);
}

.products-grid.grid-view .product-actions-box {
    display: grid;
    grid-template-columns: 1fr 38px;
    align-items: center;
    gap: 8px;
}

.products-grid.cards-view .product-actions-box,
.products-grid.rows-view .product-actions-box {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.product-out-stock-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    align-items: center;
    gap: 8px;
}

.product-out-stock-pill {
    min-height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(239,68,68,.22);
    background: rgba(239,68,68,.10);
    color: #b91c1c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

html[data-mode="dark"] .product-out-stock-pill,
body.dark .product-out-stock-pill {
    color: #fecaca;
    background: rgba(239,68,68,.16);
    border-color: rgba(248,113,113,.24);
}

.stock-badge.out-of-stock-badge {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 12;
    min-height: 27px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,23,42,.86);
    color: #fff;
    border: 1px solid rgba(255,255,255,.22);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.product-card.is-out-of-stock .qty-btn,
.product-card.is-out-of-stock .qty-value,
.product-card.is-out-of-stock .card-qty,
.product-card.is-out-of-stock .product-qty-row {
    display: none !important;
}

.product-card.is-out-of-stock .product-image-box img {
    filter: grayscale(.18) saturate(.86);
}

.products-summary-spacer {
    flex: 1 1 auto;
}

.product-image-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 1000001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(2,6,23,.76);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.product-image-preview-modal.is-open,
.product-image-preview-modal.open {
    display: flex;
}

.product-image-preview-modal img {
    max-width: min(92vw, 1200px);
    max-height: 88vh;
    object-fit: contain;
    border-radius: 18px;
    background: #fff;
    padding: 12px;
}

.product-image-preview-close {
    position: fixed;
    top: 16px;
    right: 18px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: #0f172a;
    font-size: 28px;
    font-weight: 950;
    cursor: pointer;
}

.drawer-dot {
    display: inline-block;
}

.drawer-login-note {
    margin-top: 10px;
    color: var(--products-muted);
    font-weight: 850;
}

.drawer-desc {
    margin-top: 12px;
    color: var(--products-muted);
    line-height: 1.55;
    font-size: 13px;
    font-weight: 700;
}

.drawer-thumbwrap {
    margin-bottom: 12px;
}

.drawer-thumbtitle {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 950;
    color: var(--products-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.drawer-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.drawer-thumbs img,
.drawer-thumb {
    width: 62px;
    height: 62px;
    flex: 0 0 auto;
    border-radius: 14px;
    background: #fff;
    object-fit: contain;
    padding: 4px;
    border: 1px solid var(--products-border);
    cursor: pointer;
}

.drawer-qty-fixed {
    display: grid;
    gap: 10px;
}

.drawer-qty-control {
    display: grid;
    grid-template-columns: 54px 1fr 54px;
    gap: 10px;
}

#DrawerQty {
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid var(--products-border);
    background: var(--products-card2);
    color: var(--products-text);
    text-align: center;
    font-weight: 950;
}

.drawer-primary-btn {
    min-height: 48px;
    border-radius: 15px;
    border: 0;
    cursor: pointer;
    background: var(--products-accent);
    color: #fff;
    font-weight: 950;
}

@media (max-width: 820px) {
    .products-page {
        padding-top: 82px;
    }

    .card-img-stage .card-img-nav {
        opacity: 1;
        pointer-events: auto;
        width: 28px;
        height: 38px;
    }

    .products-grid.grid-view .product-actions-box,
    .product-out-stock-row {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .products-page::before { animation: none; }
    .product-card,
    .product-image-box,
    .card-img-stage .card-img-nav {
        transition: none !important;
    }
}




/* =========================================================
   PATCH: Search/options bar like screenshot + single modern filter drawer
========================================================= */

.products-title-row {
    display: none !important;
}

.products-hero-row {
    width: min(1480px, calc(100% - 24px));
    margin: 0 auto 10px;
    padding: 14px 18px;
    border: 1px solid var(--products-border);
    border-radius: 22px;
    background: color-mix(in srgb, var(--products-card) 72%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.products-search-option-bar {
    position: sticky;
    top: 74px;
    z-index: 240;
    width: 100%;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    background: color-mix(in srgb, var(--products-bg) 86%, transparent);
    border-top: 1px solid var(--products-border);
    border-bottom: 1px solid var(--products-border);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 12px 30px rgba(15,23,42,.08);
}

.products-search-wide {
    min-height: 48px;
    display: grid;
    grid-template-columns: 34px minmax(0,1fr) 42px;
    align-items: center;
    gap: 2px;
    border: 1px solid color-mix(in srgb, var(--products-accent) 20%, var(--products-border));
    border-radius: 18px;
    background: var(--products-card);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
    overflow: hidden;
}

.products-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--products-accent);
    font-size: 22px;
    font-weight: 950;
}

.products-search-wide input {
    width: 100%;
    height: 48px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--products-text);
    font-size: 15px;
    font-weight: 850;
}

.products-search-wide input::placeholder {
    color: var(--products-muted);
    opacity: .92;
}

.products-search-clear {
    width: 34px;
    height: 34px;
    margin-right: 5px;
    border-radius: 999px;
    border: 1px solid var(--products-border);
    background: var(--products-card2);
    color: var(--products-text);
    cursor: pointer;
    font-size: 25px;
    line-height: 1;
}

.products-filter-button {
    min-width: 118px;
    min-height: 48px;
    border: 1px solid color-mix(in srgb, var(--products-accent) 20%, var(--products-border));
    border-radius: 18px;
    background: var(--products-card);
    color: var(--products-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 950;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}

.products-filter-button:hover {
    border-color: color-mix(in srgb, var(--products-accent) 55%, var(--products-border));
    background: var(--products-accent-soft);
}

.products-filter-button em {
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--products-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    font-size: 11px;
    font-style: normal;
    font-weight: 950;
}

.filter-icon {
    color: var(--products-accent);
    transform: rotate(90deg);
    display: inline-block;
}

/* Kill the old full modal behavior and force one left slide drawer. */
.products-filter-overlay,
.product-filter-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999990 !important;
    display: none !important;
}

.products-filter-overlay.is-open,
.products-filter-overlay.open,
.product-filter-modal-overlay.is-open,
.product-filter-modal-overlay.open {
    display: block !important;
}

.products-filter-backdrop,
.products-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: rgba(2, 6, 23, .52) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

.products-filter-modal,
.product-filter-modal {
    position: fixed !important;
    left: 12px !important;
    top: 12px !important;
    bottom: 12px !important;
    right: auto !important;
    transform: none !important;
    z-index: 2 !important;
    width: min(560px, calc(100vw - 24px)) !important;
    max-height: none !important;
    height: calc(100vh - 24px) !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-radius: 28px !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
    background: var(--products-card) !important;
    color: var(--products-text) !important;
    border: 1px solid color-mix(in srgb, var(--products-accent) 24%, var(--products-border)) !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.38) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}

.products-filter-head,
.pfm-header {
    margin: 0 !important;
    padding: 20px 22px 16px !important;
    border-bottom: 1px solid var(--products-border);
    background: linear-gradient(135deg, color-mix(in srgb, var(--products-accent) 8%, transparent), transparent 55%);
}

.products-filter-grid,
.pfm-grid {
    min-height: 0;
    overflow-y: auto;
    padding: 18px 20px 130px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    scrollbar-gutter: stable;
}

.products-filter-checks,
.pfm-switches {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 86px;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    background: color-mix(in srgb, var(--products-card) 94%, transparent);
    border-top: 1px solid var(--products-border);
    padding-top: 12px;
}

.products-filter-actions,
.pfm-footer {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 12px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
    background: transparent !important;
}

#ApplyFiltersBtn {
    grid-column: 1 / -1;
}

.filter-field > label,
.pfm-field label {
    color: var(--products-text) !important;
    opacity: 1 !important;
    margin-bottom: 8px !important;
    letter-spacing: .08em;
}

.filter-field select,
.modern-select,
.pfm-select,
.pfm-dropdown-btn,
.filter-dropdown-btn {
    height: 54px !important;
    border-radius: 18px !important;
    background: var(--products-card2) !important;
    color: var(--products-text) !important;
    border-color: color-mix(in srgb, var(--products-accent) 18%, var(--products-border)) !important;
    font-size: 15px !important;
    font-weight: 950 !important;
}

.pfm-dropdown-panel,
.filter-dropdown-panel {
    position: static !important;
    display: none;
    width: 100% !important;
    max-height: 372px !important;
    margin-top: 10px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--products-card2) 92%, transparent) !important;
    border: 1px solid var(--products-border) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.36) !important;
}

.pfm-dropdown.open .pfm-dropdown-panel,
.filter-dropdown.open .filter-dropdown-panel {
    display: block !important;
}

.pfm-mini-search {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-bottom: 10px;
    margin-bottom: 10px;
    background: color-mix(in srgb, var(--products-card2) 96%, transparent);
}

.pfm-mini-search input,
.filter-list-search {
    width: 100%;
    height: 42px;
    border-radius: 15px;
    border: 1px solid var(--products-border);
    background: var(--products-card);
    color: var(--products-text);
    padding: 0 12px;
    font-size: 13px;
    font-weight: 900;
    outline: none;
}

.categories-item.modern-entry,
.pfm-check-entry.modern-entry {
    min-height: 70px;
    padding: 0 !important;
    margin-bottom: 8px !important;
    border-radius: 18px;
    border: 1px solid var(--products-border);
    background: var(--products-card);
    color: var(--products-text);
    overflow: hidden;
}

.categories-item.modern-entry:hover,
.pfm-check-entry.modern-entry:hover {
    background: var(--products-accent-soft);
    border-color: color-mix(in srgb, var(--products-accent) 55%, var(--products-border));
}

.categories-item.modern-entry .categories-label,
.pfm-check-entry.modern-entry .categories-label {
    width: 100%;
    min-height: 70px;
    display: grid !important;
    grid-template-columns: 22px 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    cursor: pointer;
}

.entry-img-wrap {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.08);
    overflow: hidden;
}

.entry-img-wrap img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    padding: 3px;
}

.cat-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--products-text);
    font-size: 14px;
    font-weight: 950;
}

.cat-count {
    min-width: 36px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--products-accent-soft);
    color: var(--products-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 950;
}

.filter-check,
.pfm-switch-card {
    min-height: 62px !important;
    border-radius: 18px !important;
    background: var(--products-card) !important;
    border-color: var(--products-border) !important;
}

.filter-clear-btn,
.filter-apply-btn,
.pfm-clear-btn,
.pfm-apply-btn {
    min-height: 50px !important;
    border-radius: 16px !important;
}

.filter-apply-btn,
.pfm-apply-btn {
    background: linear-gradient(135deg, var(--products-accent), color-mix(in srgb, var(--products-accent) 74%, #001b52)) !important;
}

@media (max-width: 680px) {
    .products-search-option-bar {
        top: 62px;
        grid-template-columns: 1fr;
    }

    .products-filter-button {
        width: 100%;
    }

    .products-filter-modal,
    .product-filter-modal {
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        border-radius: 0 !important;
    }

    .products-filter-checks,
    .pfm-switches {
        left: 14px;
        right: 14px;
    }

    .products-filter-actions,
    .pfm-footer {
        left: 14px;
        right: 14px;
    }
}




/* =========================================================
   FINAL CLEAN FIX - Products page
   - remove hero/title space
   - search/filter bar only
   - right-side filter drawer
   - compact dropdown fields
   - visible entry names/images
   - no broken symbol icons
   - smoother scroll
========================================================= */

html {
    scroll-behavior: smooth;
}

.products-page {
    padding: 8px 18px 82px 18px !important;
    margin: 0 !important;
    min-height: calc(100vh - var(--site-header-height, 74px) - var(--site-footer-height, 42px)) !important;
    background:
        radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--products-accent) 14%, transparent), transparent 32rem),
        radial-gradient(circle at 90% 18%, color-mix(in srgb, var(--products-accent) 9%, transparent), transparent 28rem),
        var(--products-bg) !important;
    color: var(--products-text);
    overflow-anchor: none;
}

.products-hero-row,
.products-title-row,
.products-title-left,
.products-eyebrow {
    display: none !important;
}

.products-search-option-bar {
    position: sticky !important;
    top: calc(var(--site-header-height, 74px) + 8px) !important;
    z-index: 560 !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;
    padding: 10px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--products-accent) 10%, var(--products-card)),
            color-mix(in srgb, var(--products-card) 92%, transparent)) !important;
    border: 1px solid color-mix(in srgb, var(--products-accent) 18%, var(--products-border)) !important;
    border-radius: 0 !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .08) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
}

.products-search-wide {
    min-height: 48px !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    border: 1px solid color-mix(in srgb, var(--products-accent) 28%, var(--products-border)) !important;
    border-radius: 18px !important;
    background: var(--products-card) !important;
    overflow: hidden !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45) !important;
}

.products-search-icon::before {
    content: "Q";
    color: var(--products-accent);
    font-size: 16px;
    font-weight: 950;
}

.products-search-wide input {
    width: 100% !important;
    height: 48px !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--products-text) !important;
    font-size: 15px !important;
    font-weight: 850 !important;
}

.products-search-wide input::placeholder {
    color: var(--products-muted) !important;
    opacity: .9 !important;
}

.products-search-clear {
    width: 34px !important;
    height: 34px !important;
    margin-right: 5px !important;
    border-radius: 999px !important;
    border: 1px solid var(--products-border) !important;
    background: var(--products-card2) !important;
    color: var(--products-text) !important;
    cursor: pointer !important;
    font-size: 24px !important;
    line-height: 1 !important;
}

.products-filter-button {
    min-width: 122px !important;
    min-height: 48px !important;
    padding: 0 18px !important;
    border: 1px solid color-mix(in srgb, var(--products-accent) 28%, var(--products-border)) !important;
    border-radius: 18px !important;
    background: var(--products-card) !important;
    color: var(--products-text) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    cursor: pointer !important;
    font-size: 15px !important;
    font-weight: 950 !important;
}

.products-filter-button:hover {
    background: var(--products-accent-soft) !important;
    border-color: color-mix(in srgb, var(--products-accent) 55%, var(--products-border)) !important;
}

.filter-icon::before {
    content: "Menu";
    color: var(--products-accent);
    font-size: 18px;
    font-weight: 950;
}

.products-filter-button em {
    min-width: 22px !important;
    height: 22px !important;
    border-radius: 999px !important;
    background: var(--products-accent) !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 950 !important;
}

.products-results-toolbar {
    margin: 8px 0 10px !important;
}

.products-results-summary {
    min-height: 34px !important;
    padding: 6px 12px !important;
    border-radius: 15px !important;
}

.products-shell {
    padding: 0 !important;
    margin: 0 !important;
    transform: translateZ(0);
}

/* right filter drawer */
.products-filter-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
    display: none !important;
}

.products-filter-overlay.open,
.products-filter-overlay.is-open,
.products-filter-overlay[aria-hidden="false"] {
    display: block !important;
}

.products-filter-backdrop,
.products-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: rgba(15,23,42,.48) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

.products-filter-modal {
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    left: auto !important;
    transform: none !important;
    z-index: 2 !important;
    width: min(520px, calc(100vw - 20px)) !important;
    height: calc(100vh - 20px) !important;
    max-height: none !important;
    padding: 0 !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--products-accent) 7%, var(--products-card)),
            var(--products-card) 42%) !important;
    color: var(--products-text) !important;
    border: 1px solid color-mix(in srgb, var(--products-accent) 22%, var(--products-border)) !important;
    box-shadow: 0 28px 90px rgba(0,0,0,.34) !important;
}

.products-filter-head {
    margin: 0 !important;
    padding: 18px 20px 14px !important;
    border-bottom: 1px solid var(--products-border) !important;
    background: color-mix(in srgb, var(--products-card) 90%, transparent) !important;
}

.products-filter-head h2 {
    font-size: 21px !important;
    margin: 0 !important;
}

.products-filter-head p {
    margin: 4px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.products-filter-close {
    width: auto !important;
    min-width: 70px !important;
    height: 42px !important;
    border-radius: 16px !important;
}

.products-filter-scroll {
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 14px 20px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    scrollbar-gutter: stable !important;
}

.products-filter-grid {
    display: contents !important;
}

.filter-field {
    margin: 0 !important;
    padding: 0 !important;
}

.filter-field > label {
    margin: 0 0 7px !important;
    color: var(--products-text) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
}

.filter-field select,
.modern-select,
.pfm-dropdown-btn,
.filter-dropdown-btn {
    width: 100% !important;
    height: 52px !important;
    padding: 0 14px !important;
    border-radius: 17px !important;
    background: var(--products-card2) !important;
    color: var(--products-text) !important;
    border: 1px solid color-mix(in srgb, var(--products-accent) 18%, var(--products-border)) !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    box-shadow: none !important;
}

.pfm-dropdown-panel,
.filter-dropdown-panel {
    display: none !important;
    position: static !important;
    width: 100% !important;
    max-height: 330px !important;
    overflow-y: auto !important;
    margin: 8px 0 0 0 !important;
    padding: 10px !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--products-card2) 88%, transparent) !important;
    border: 1px solid var(--products-border) !important;
    box-shadow: none !important;
}

.pfm-dropdown.open .pfm-dropdown-panel,
.filter-dropdown.open .filter-dropdown-panel {
    display: block !important;
}

.pfm-dropdown:not(.open) .pfm-dropdown-panel,
.filter-dropdown:not(.open) .filter-dropdown-panel {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

.pfm-mini-search {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
    background: color-mix(in srgb, var(--products-card2) 96%, transparent) !important;
}

.pfm-mini-search input,
.filter-list-search {
    width: 100% !important;
    height: 40px !important;
    border-radius: 14px !important;
    border: 1px solid var(--products-border) !important;
    background: var(--products-card) !important;
    color: var(--products-text) !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.categories-item.modern-entry,
.pfm-check-entry.modern-entry {
    min-height: 64px !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 0 8px 0 !important;
    border-radius: 18px !important;
    border: 1px solid var(--products-border) !important;
    background: var(--products-card) !important;
    color: var(--products-text) !important;
    overflow: hidden !important;
}

.categories-item.modern-entry .categories-label,
.pfm-check-entry.modern-entry .categories-label {
    width: 100% !important;
    min-height: 64px !important;
    display: grid !important;
    grid-template-columns: 22px 52px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    color: var(--products-text) !important;
}

.entry-img-wrap {
    width: 46px !important;
    height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    border-radius: 14px !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    overflow: hidden !important;
}

.entry-img-wrap img {
    width: 44px !important;
    height: 44px !important;
    display: block !important;
    object-fit: contain !important;
    padding: 3px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.cat-name,
.categories-item.modern-entry .cat-name,
.pfm-check-entry.modern-entry .cat-name {
    display: block !important;
    min-width: 0 !important;
    color: var(--products-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    line-height: 1.22 !important;
    font-size: 13.5px !important;
    font-weight: 950 !important;
}

.cat-count {
    min-width: 34px !important;
    height: 26px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    background: var(--products-accent-soft) !important;
    color: var(--products-accent) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

.products-filter-checks {
    padding: 10px 20px !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    border-top: 1px solid var(--products-border) !important;
    background: transparent !important;
}

.filter-check {
    min-height: 58px !important;
    padding: 9px 13px !important;
    border-radius: 17px !important;
    background: var(--products-card) !important;
    border: 1px solid var(--products-border) !important;
}

.products-filter-actions {
    padding: 10px 20px 14px !important;
    margin: 0 !important;
    border-top: 1px solid var(--products-border) !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    background: color-mix(in srgb, var(--products-card) 96%, transparent) !important;
}

#ApplyFiltersBtn {
    grid-column: 1 / -1 !important;
}

.filter-clear-btn,
.filter-apply-btn {
    min-height: 48px !important;
    border-radius: 16px !important;
}

.filter-apply-btn {
    background: linear-gradient(135deg, var(--products-accent), color-mix(in srgb, var(--products-accent) 76%, #001b52)) !important;
}

.product-card {
    backface-visibility: hidden;
    transform: translateZ(0);
    contain: layout paint style;
}

.card-img-stage .card-img-nav {
    position: absolute;
    top: 50%;
    z-index: 8;
    width: 30px;
    height: 42px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,23,42,.52);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    font-weight: 950;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, background .16s ease;
}

.card-img-stage:hover .card-img-nav,
.card-img-stage:focus-within .card-img-nav {
    opacity: 1;
    pointer-events: auto;
}

.card-img-stage .card-img-prev { left: 8px; }
.card-img-stage .card-img-next { right: 8px; }

.products-info-btn,
.card-info {
    min-height: 38px !important;
    min-width: 38px !important;
    border-radius: 14px !important;
    border: 1px solid var(--products-border) !important;
    background: var(--products-card2) !important;
    color: var(--products-accent) !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.products-grid.grid-view .product-actions-box {
    display: grid !important;
    grid-template-columns: 1fr 38px !important;
    align-items: center !important;
    gap: 8px !important;
}

.product-actions-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: end;
}

.product-out-stock-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 38px !important;
    gap: 8px !important;
    align-items: center !important;
}

.product-out-stock-pill {
    min-height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(239,68,68,.22);
    background: rgba(239,68,68,.10);
    color: #b91c1c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.stock-badge.out-of-stock-badge {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 12;
    min-height: 27px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,23,42,.86);
    color: #fff;
    border: 1px solid rgba(255,255,255,.22);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.product-card.is-out-of-stock .qty-btn,
.product-card.is-out-of-stock .qty-value,
.product-card.is-out-of-stock .card-qty,
.product-card.is-out-of-stock .product-qty-row {
    display: none !important;
}

.products-summary-spacer {
    flex: 1 1 auto;
}

.product-image-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 1000001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(2,6,23,.76);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.product-image-preview-modal.is-open,
.product-image-preview-modal.open,
.product-image-preview-modal[aria-hidden="false"] {
    display: flex;
}

.product-image-preview-modal img {
    max-width: min(92vw, 1200px);
    max-height: 88vh;
    object-fit: contain;
    border-radius: 18px;
    background: #fff;
    padding: 12px;
}

.product-image-preview-close {
    position: fixed;
    top: 16px;
    right: 18px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: #0f172a;
    font-size: 28px;
    font-weight: 950;
    cursor: pointer;
}

@media (max-width: 680px) {
    .products-page {
        padding: 6px 10px 86px 10px !important;
    }

    .products-search-option-bar {
        top: calc(var(--site-header-small-height, 58px) + 6px) !important;
        grid-template-columns: 1fr !important;
        border-radius: 18px !important;
    }

    .products-filter-button {
        width: 100% !important;
    }

    .products-filter-modal {
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        border-radius: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .product-card,
    .card-img-stage .card-img-nav {
        transition: none !important;
    }
}




/* =========================================================
   FINAL POLISH PATCH
   - no summary row
   - no edge gap
   - search touches menu bar
   - price badge = case - unit
   - last order uses old PPU location
   - cart fly image animation
========================================================= */

body.site-master-body:has(.products-page) .page-content-wrapper {
    padding: 0 !important;
}

.products-page {
    padding: 0 10px calc(var(--site-footer-height, 44px) + 10px) 10px !important;
    margin: 0 !important;
    width: 100% !important;
    min-height: calc(100vh - var(--site-header-height, 70px) - var(--site-footer-height, 44px)) !important;
}

.products-results-toolbar,
.products-results-summary,
#FiltersSummary,
#TotalItemsLabel,
#FilteredItemsLabel,
#CartCasesLabel,
#CartTotalLabel {
    display: none !important;
}

.products-search-option-bar {
    top: var(--site-header-height, 70px) !important;
    margin: 0 0 8px 0 !important;
    border-radius: 0 0 16px 16px !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

body.header-scrolled .products-search-option-bar {
    top: var(--site-header-small-height, 58px) !important;
}

.product-client-group-title,
.product-group-title {
    margin-top: 8px !important;
}

.price-badge {
    gap: 5px !important;
    min-height: 32px !important;
    padding: 7px 11px !important;
    font-size: 12px !important;
}

.product-old-price {
    opacity: .76;
    text-decoration: line-through;
    margin-right: 3px;
}

.product-quick-row {
    grid-template-columns: 1fr !important;
}

.products-grid.grid-view .product-quick-row {
    min-height: 58px !important;
    max-height: 58px !important;
}

.last-order-pill {
    color: var(--products-accent) !important;
    background: color-mix(in srgb, var(--products-accent) 9%, transparent) !important;
    border-color: color-mix(in srgb, var(--products-accent) 24%, var(--products-border)) !important;
}

.cart-fly-image {
    will-change: transform, opacity;
}

#HeaderCartLink.is-pulse,
#MobileCartLink.is-pulse,
#HamburgerCartLink.is-pulse,
.cart-link.is-pulse {
    animation: headerCartPulse .45s ease;
}

@keyframes headerCartPulse {
    0% { transform: scale(1); }
    45% { transform: scale(1.10); }
    100% { transform: scale(1); }
}

@media (max-width: 680px) {
    .products-page {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .products-search-option-bar {
        top: var(--site-header-small-height, 58px) !important;
        margin-bottom: 6px !important;
        border-radius: 0 0 14px 14px !important;
    }
}



/* =========================================================
   FINAL FIX: Product Item Info Drawer
========================================================= */

#ItemDrawerOverlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100500 !important;
    background: rgba(15, 23, 42, .52) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
}

#ItemDrawerOverlay.is-open,
#ItemDrawerOverlay.open,
#ItemDrawerOverlay[aria-hidden="false"] {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#ItemDrawer {
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    left: auto !important;
    z-index: 100520 !important;
    width: min(520px, calc(100vw - 20px)) !important;
    height: calc(100vh - 20px) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    border-radius: 28px !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--products-accent) 8%, var(--products-card)), var(--products-card) 42%) !important;
    color: var(--products-text) !important;
    border: 1px solid color-mix(in srgb, var(--products-accent) 22%, var(--products-border)) !important;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .38) !important;
    transform: translateX(calc(100% + 24px)) !important;
    opacity: 1 !important;
    pointer-events: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: transform .24s cubic-bezier(.22, 1, .36, 1) !important;
}

#ItemDrawer.is-open,
#ItemDrawer.open,
#ItemDrawer[aria-hidden="false"] {
    transform: translateX(0) !important;
    pointer-events: auto !important;
}

#ItemDrawer,
#ItemDrawer * {
    box-sizing: border-box !important;
    max-width: 100%;
}

#ItemDrawer .drawer-head {
    min-height: 72px !important;
    padding: 16px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    border-bottom: 1px solid var(--products-border) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--products-accent) 9%, transparent), color-mix(in srgb, var(--products-card) 94%, transparent)) !important;
}

#ItemDrawer .drawer-title {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    color: var(--products-text) !important;
    font-size: 18px !important;
    font-weight: 950 !important;
}

#ItemDrawer .drawer-subtitle {
    margin-top: 4px !important;
    color: var(--products-muted) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

#ItemDrawer .drawer-x {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 16px !important;
    border: 1px solid var(--products-border) !important;
    background: var(--products-card2) !important;
    color: var(--products-text) !important;
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

#ItemDrawer .drawer-body {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 16px 18px !important;
    background: var(--products-card) !important;
    scrollbar-gutter: stable !important;
}

#ItemDrawer .drawer-hero {
    width: 100% !important;
    height: 260px !important;
    min-height: 260px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 24px !important;
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, .10) !important;
    overflow: hidden !important;
}

#ItemDrawer .drawer-hero img,
#DrawerImage {
    max-width: 100% !important;
    max-height: 240px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    padding: 10px !important;
    background: transparent !important;
    filter: none !important;
    opacity: 1 !important;
}

#ItemDrawer .drawer-thumbwrap {
    margin: 14px 0 12px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    border: 1px solid var(--products-border) !important;
    background: var(--products-card2) !important;
}

#ItemDrawer .drawer-thumbtitle {
    margin: 0 0 8px !important;
    color: var(--products-muted) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

#ItemDrawer .drawer-thumbs {
    display: flex !important;
    gap: 8px !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 4px !important;
}

#ItemDrawer .drawer-thumbs img,
#ItemDrawer .drawer-thumb {
    width: 66px !important;
    height: 66px !important;
    flex: 0 0 66px !important;
    border-radius: 16px !important;
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, .10) !important;
    object-fit: contain !important;
    padding: 5px !important;
    cursor: pointer !important;
}

#ItemDrawer .drawer-name {
    margin-top: 10px !important;
    color: var(--products-text) !important;
    font-size: 19px !important;
    line-height: 1.22 !important;
    font-weight: 950 !important;
    overflow-wrap: anywhere !important;
}

#ItemDrawer .drawer-sub {
    margin-top: 5px !important;
    color: var(--products-muted) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 800 !important;
    overflow-wrap: anywhere !important;
}

#ItemDrawer .drawer-meta {
    margin-top: 14px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

#ItemDrawer .meta-row {
    min-width: 0 !important;
    padding: 11px 12px !important;
    border-radius: 17px !important;
    background: var(--products-card2) !important;
    border: 1px solid var(--products-border) !important;
}

#ItemDrawer .meta-row span {
    display: block !important;
    margin-bottom: 4px !important;
    color: var(--products-muted) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
}

#ItemDrawer .meta-row strong {
    display: block !important;
    color: var(--products-text) !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 950 !important;
    overflow-wrap: anywhere !important;
}

#ItemDrawer .drawer-price {
    margin-top: 14px !important;
    min-height: 46px !important;
    padding: 0 16px !important;
    border-radius: 17px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--products-accent), color-mix(in srgb, var(--products-accent) 72%, #001b52)) !important;
    font-size: 20px !important;
    font-weight: 950 !important;
}

#ItemDrawer .drawer-login-note {
    margin-top: 10px !important;
    color: var(--products-muted) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

#ItemDrawer .drawer-desc {
    margin-top: 14px !important;
    padding: 12px !important;
    border-radius: 17px !important;
    background: var(--products-card2) !important;
    color: var(--products-muted) !important;
    border: 1px solid var(--products-border) !important;
    line-height: 1.55 !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    overflow-wrap: anywhere !important;
}

#ItemDrawer .drawer-footer {
    padding: 14px 18px !important;
    border-top: 1px solid var(--products-border) !important;
    background: color-mix(in srgb, var(--products-card) 96%, transparent) !important;
}

#ItemDrawer .drawer-qty-fixed {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

#ItemDrawer .drawer-qty-control {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) 54px !important;
    gap: 10px !important;
    align-items: center !important;
}

#ItemDrawer #DrawerQty {
    min-width: 0 !important;
    height: 52px !important;
    border-radius: 17px !important;
    border: 1px solid var(--products-border) !important;
    background: var(--products-card2) !important;
    color: var(--products-text) !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 950 !important;
}

#ItemDrawer #DrawerMinus,
#ItemDrawer #DrawerPlus {
    width: 54px !important;
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 17px !important;
}

#ItemDrawer #DrawerApply {
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 17px !important;
    border: 0 !important;
    background: linear-gradient(135deg, var(--products-accent), color-mix(in srgb, var(--products-accent) 72%, #001b52)) !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

body.products-item-drawer-open {
    overflow: hidden !important;
}

@media (max-width: 680px) {
    #ItemDrawer {
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        border-radius: 0 !important;
    }

    #ItemDrawer .drawer-body {
        padding: 14px !important;
    }

    #ItemDrawer .drawer-hero {
        height: 220px !important;
        min-height: 220px !important;
    }

    #ItemDrawer .drawer-meta {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   PRODUCTS LOAD ERROR DETAILS
   Shows the exact server/AJAX error instead of generic text.
========================================================= */
.products-error-box {
    text-align: left !important;
    max-width: 1100px;
    margin: 0 auto;
}

.products-error-title {
    font-size: 20px;
    font-weight: 1000;
    color: var(--products-danger, #ef4444);
    margin-bottom: 8px;
}

.products-error-message {
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 12px;
    color: var(--products-text);
}

.products-error-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0;
}

.products-error-meta div {
    padding: 9px 10px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--products-danger, #ef4444) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--products-danger, #ef4444) 18%, var(--products-border));
    font-size: 12px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.products-error-box details {
    margin-top: 10px;
    border: 1px solid var(--products-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--products-text) 4%, transparent);
    overflow: hidden;
}

.products-error-box summary {
    cursor: pointer;
    padding: 10px 12px;
    font-weight: 950;
    color: var(--products-text);
}

.products-error-box pre {
    margin: 0;
    padding: 12px;
    max-height: 360px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 12px;
    line-height: 1.45;
    color: var(--products-text);
    background: color-mix(in srgb, var(--products-danger, #ef4444) 6%, transparent);
    border-top: 1px solid var(--products-border);
}

.products-copy-error-btn {
    margin-top: 12px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    border: 0;
    cursor: pointer;
    color: #fff;
    background: var(--products-danger, #ef4444);
    font-weight: 950;
}

@media (max-width: 640px) {
    .products-error-meta {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   PROMOTION FILTER + ITEM DRAWER HISTORY/PROMOTION TABS
   Added 2026-06-28
========================================================= */

.products-filter-modal {
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
}

.products-filter-scroll {
    padding-bottom: 22px !important;
}

#PromotionList .categories-item.modern-entry .categories-label {
    grid-template-columns: 22px minmax(0, 1fr) auto !important;
}

#PromotionList .entry-img-wrap {
    display: none !important;
}

.products-filter-actions {
    position: relative !important;
    z-index: 5 !important;
}

.drawer-tabs {
    margin-top: 16px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

.drawer-tab-btn {
    min-height: 42px !important;
    border-radius: 15px !important;
    border: 1px solid var(--products-border) !important;
    background: var(--products-card2) !important;
    color: var(--products-text) !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.drawer-tab-btn.is-active {
    border-color: color-mix(in srgb, var(--products-accent) 55%, var(--products-border)) !important;
    background: var(--products-accent-soft) !important;
    color: var(--products-accent) !important;
}

.drawer-tab-panel {
    margin-top: 10px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    border: 1px solid var(--products-border) !important;
    background: var(--products-card2) !important;
}

.drawer-tab-title {
    margin-bottom: 8px !important;
    color: var(--products-text) !important;
    font-size: 13px !important;
    font-weight: 950 !important;
}

.drawer-loading-text,
.drawer-empty-text {
    padding: 12px !important;
    color: var(--products-muted) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    text-align: center !important;
}

.drawer-data-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    border: 1px solid var(--products-border) !important;
}

.drawer-data-table th,
.drawer-data-table td {
    padding: 8px 9px !important;
    border-bottom: 1px solid var(--products-border) !important;
    color: var(--products-text) !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    text-align: left !important;
    vertical-align: top !important;
}

.drawer-data-table th {
    background: var(--products-accent-soft) !important;
    color: var(--products-accent) !important;
    font-weight: 950 !important;
}

.drawer-data-table tr:last-child td {
    border-bottom: 0 !important;
}

.drawer-promo-name {
    font-weight: 950 !important;
}

.drawer-promo-note {
    color: var(--products-muted) !important;
    font-size: 11px !important;
    margin-top: 3px !important;
}

@media (max-width: 640px) {
    .drawer-data-table,
    .drawer-data-table thead,
    .drawer-data-table tbody,
    .drawer-data-table th,
    .drawer-data-table td,
    .drawer-data-table tr {
        display: block !important;
    }

    .drawer-data-table thead {
        display: none !important;
    }

    .drawer-data-table tr {
        border-bottom: 1px solid var(--products-border) !important;
    }

    .drawer-data-table tr:last-child {
        border-bottom: 0 !important;
    }

    .drawer-data-table td {
        border-bottom: 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    .drawer-data-table td:before {
        content: attr(data-label) !important;
        color: var(--products-muted) !important;
        font-weight: 950 !important;
    }
}

/* Guest ordering state: hide quantity controls until login. */
.product-login-order-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 8px;
}

.product-login-order-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 14px;
    border-radius: 14px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 950;
    background: linear-gradient(135deg, var(--products-accent), color-mix(in srgb, var(--products-accent) 74%, #001b52));
    box-shadow: 0 12px 26px color-mix(in srgb, var(--products-accent) 22%, transparent);
}

.product-login-order-btn svg,
.products-info-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.product-login-order-btn:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
}

.products-info-btn {
    display: inline-grid !important;
    place-items: center !important;
    font-size: 0 !important;
}
.card-img-nav svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   PROFESSIONAL08 - FILTER DRAWER VIEWPORT FIX
   Keeps header and action footer visible below the fixed site header.
========================================================= */
.products-filter-overlay,
.product-filter-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    overflow: hidden !important;
}

.products-filter-modal,
.product-filter-modal {
    position: fixed !important;
    top: calc(var(--site-header-height, 74px) + 10px) !important;
    right: 10px !important;
    bottom: calc(var(--site-footer-height, 42px) + 10px) !important;
    left: auto !important;
    width: min(430px, calc(100vw - 20px)) !important;
    max-height: none !important;
    height: auto !important;
    transform: none !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
    overflow: hidden !important;
    border-radius: 22px !important;
}

.products-filter-head,
.pfm-header {
    margin: 0 !important;
    padding: 16px 16px 14px !important;
    background: color-mix(in srgb, var(--products-card) 96%, transparent) !important;
    border-bottom: 1px solid var(--products-border) !important;
}

.products-filter-scroll {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    padding: 14px 16px !important;
    overscroll-behavior: contain;
}

.products-filter-checks,
.pfm-switches {
    margin: 0 !important;
    padding: 12px 16px !important;
    max-height: 190px !important;
    overflow-y: auto !important;
    border-top: 1px solid var(--products-border) !important;
    background: color-mix(in srgb, var(--products-card) 97%, transparent) !important;
}

.products-filter-actions,
.pfm-footer {
    position: static !important;
    margin: 0 !important;
    padding: 12px 16px 16px !important;
    background: var(--products-card) !important;
    border-top: 1px solid var(--products-border) !important;
    z-index: 4;
}

@media (max-width: 700px) {
    .products-filter-modal,
    .product-filter-modal {
        top: calc(var(--site-header-small-height, 58px) + 6px) !important;
        right: 6px !important;
        bottom: calc(var(--site-mobile-bottom-height, 72px) + 6px) !important;
        width: calc(100vw - 12px) !important;
        border-radius: 18px !important;
    }
}

/* Keep every filter option in the same scrolling body. */
.products-filter-modal { grid-template-rows: auto minmax(0, 1fr) auto !important; }
.products-filter-scroll > .products-filter-checks {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 12px 0 0 !important;
    background: transparent !important;
}
.product-qty-select {
    min-width: 76px;
    height: 40px;
    border: 1px solid var(--line, #d8e1ec);
    border-radius: 10px;
    background: var(--surface, #ffffff);
    color: var(--text, #172033);
    text-align: center;
    font-weight: 900;
    cursor: pointer;
}
.website-promotion-badge { width: 100%; min-height: 30px; margin: 0 0 7px; border: 1px solid var(--products-accent); border-radius: 10px; background: var(--products-accent-soft); color: var(--products-accent); font-weight: 950; cursor: pointer; }
.stock-pill.website-promotion-badge {
    width: auto;
    min-height: 28px;
    margin: 0;
    border: 1px solid var(--products-accent) !important;
    border-radius: 999px;
    background: var(--products-accent) !important;
    color: #ffffff !important;
    font-weight: 950 !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--products-accent) 30%, transparent);
}
html[data-mode="light"] body .product-card .stock-pill.website-promotion-badge,
html.light body .product-card .stock-pill.website-promotion-badge,
html:not([data-mode="dark"]) body:not(.dark) .product-card .stock-pill.website-promotion-badge {
    background: var(--products-accent) !important;
    border-color: var(--products-accent) !important;
    color: #ffffff !important;
}

.promotion-details-modal { position: fixed; inset: 0; z-index: 10030; display: none; place-items: center; padding: 20px; }
.promotion-details-modal.is-open { display: grid; }
.promotion-details-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.58); backdrop-filter: blur(7px); }
.promotion-details-dialog { position: relative; width: min(560px, 96vw); max-height: min(720px, 88vh); overflow: hidden; border: 1px solid color-mix(in srgb, var(--products-accent) 30%, var(--products-border)); border-radius: 24px; background: var(--products-card); color: var(--products-text); box-shadow: 0 30px 90px rgba(0,0,0,.32); }
.promotion-details-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 20px 22px; border-bottom: 1px solid var(--products-border); }
.promotion-details-head small { color: var(--products-accent); font-size: 11px; font-weight: 950; letter-spacing: .1em; }
.promotion-details-head h2 { margin: 3px 0 0; font-size: 22px; }
.promotion-details-close { width: 42px; height: 42px; border: 0; border-radius: 14px; background: var(--products-card2); color: var(--products-text); font-size: 25px; cursor: pointer; }
.promotion-details-body { max-height: 60vh; overflow-y: auto; padding: 18px 22px 22px; display: grid; gap: 12px; }
.promotion-detail-card { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 13px; align-items: center; padding: 15px; border: 1px solid color-mix(in srgb, var(--products-accent) 25%, var(--products-border)); border-radius: 18px; background: color-mix(in srgb, var(--products-accent) 7%, var(--products-card)); }
.promotion-detail-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; background: var(--products-accent); color: #fff; font-size: 19px; }
.promotion-detail-card strong, .promotion-detail-card span, .promotion-detail-card small { display: block; }
.promotion-detail-card strong { font-size: 15px; }
.promotion-detail-card span { margin-top: 4px; color: var(--products-accent); font-weight: 950; }
.promotion-detail-card small { margin-top: 5px; color: var(--products-muted); line-height: 1.4; }
.promotion-details-loading, .promotion-details-empty { padding: 28px; text-align: center; color: var(--products-muted); font-weight: 850; }
body.promotion-details-open { overflow: hidden; }

/* =========================================================
   PERFORMANCE PATCH 20260820
   Preserve the visual design while avoiding full-page repaints.
========================================================= */
.products-page::before {
    animation: none !important;
    transform: none !important;
}

.products-grid {
    will-change: auto !important;
    contain: layout style !important;
}

.product-card {
    backface-visibility: visible !important;
    transform: none !important;
    content-visibility: auto;
    contain: layout style paint;
    contain-intrinsic-size: 390px 520px;
}

.products-search-option-bar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--products-accent) 10%, var(--products-card)),
            var(--products-card)) !important;
}

.products-filter-backdrop,
.products-modal-backdrop,
.products-filter-modal,
.product-filter-modal {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.products-filter-backdrop,
.products-modal-backdrop {
    background: rgba(15, 23, 42, .55) !important;
}

@media (prefers-reduced-motion: reduce) {
    .product-card,
    .products-filter-modal,
    .product-filter-modal,
    .products-search-option-bar {
        transition: none !important;
    }
}


/* =========================================================
   FULL PRODUCTS / TABLET / PHONE UPGRADE - 2026-09-18
   ========================================================= */

/* Filter switch cards never cover dropdown/select fields. */
.products-filter-scroll {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 14px !important;
    align-items: start !important;
    overflow: visible !important;
}
.products-filter-checks {
    grid-column: 1 / -1 !important;
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
}
.filter-field-select { position: static !important; }

/* Dropdown choices open as a large independent chooser instead of being trapped under the filter field. */
.pfm-dropdown.open .pfm-dropdown-panel,
.filter-dropdown.open .filter-dropdown-panel {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%,-50%) !important;
    width: min(680px, calc(100vw - 36px)) !important;
    max-height: min(72vh, 650px) !important;
    z-index: 1000020 !important;
    padding: 16px !important;
    border-radius: 24px !important;
    overflow: auto !important;
    box-shadow: 0 34px 100px rgba(0,0,0,.42) !important;
}
.pfm-mini-search {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    padding-bottom: 10px !important;
    margin-bottom: 8px !important;
}
.pfm-mini-search input { height: 44px !important; }

/* Special For You */
.product-card.special-for-you-product {
    border-color: color-mix(in srgb,#10b981 42%,var(--products-border)) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb,#10b981 8%,transparent), var(--products-shadow) !important;
}
.special-price-badge {
    background: linear-gradient(135deg,#059669,#10b981) !important;
}
.special-price-badge .product-old-price {
    opacity: .8;
    text-decoration: line-through;
    margin-right: 6px;
}
.special-filter-check {
    border-color: color-mix(in srgb,#10b981 28%,var(--products-border)) !important;
}

/* Qty 0 = Add Product only. */
.product-add-row { display:flex; align-items:center; width:100%; }
.product-add-btn {
    width:100%;
    min-height:42px;
    border:0;
    border-radius:14px;
    cursor:pointer;
    color:#fff;
    background:linear-gradient(135deg,var(--products-accent),color-mix(in srgb,var(--products-accent) 72%,#001b52));
    font-weight:950;
    box-shadow:0 10px 22px color-mix(in srgb,var(--products-accent) 22%,transparent);
}
.product-qty-pad-trigger {
    appearance:none;
    cursor:pointer;
    width:100%;
}

/* Quantity pad */
.qty-pad-modal {
    position:fixed; inset:0; z-index:1000040;
    display:none; align-items:center; justify-content:center; padding:18px;
}
.qty-pad-modal.is-open { display:flex; }
.qty-pad-backdrop { position:absolute; inset:0; background:rgba(2,6,23,.60); backdrop-filter:blur(8px); }
.qty-pad-dialog {
    position:relative; z-index:2;
    width:min(430px,94vw);
    padding:18px;
    border-radius:26px;
    background:var(--products-card);
    color:var(--products-text);
    border:1px solid color-mix(in srgb,var(--products-accent) 32%,var(--products-border));
    box-shadow:0 32px 90px rgba(0,0,0,.36);
}
.qty-pad-dialog header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.qty-pad-dialog header small { display:block; color:var(--products-accent); font-size:10px; font-weight:950; letter-spacing:.14em; }
.qty-pad-dialog header strong { display:block; margin-top:4px; font-size:17px; }
.qty-pad-dialog header button { width:38px;height:38px;border-radius:13px;border:1px solid var(--products-border);background:var(--products-card2);color:var(--products-text);font-size:23px; }
.qty-pad-value-row { display:grid; grid-template-columns:54px 1fr 54px; gap:10px; align-items:center; margin:18px 0; }
.qty-pad-value-row strong { min-height:58px; display:flex; align-items:center; justify-content:center; border-radius:18px; background:var(--products-accent-soft); color:var(--products-accent); font-size:28px; font-weight:950; }
.qty-pad-step { height:54px; border:0; border-radius:17px; color:#fff; background:var(--products-accent); font-size:27px; font-weight:950; }
.qty-pad-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.qty-pad-grid button { min-height:48px; border-radius:14px; border:1px solid var(--products-border); background:var(--products-card2); color:var(--products-text); font-weight:950; font-size:16px; }
.qty-pad-grid button.is-active { background:var(--products-accent); color:#fff; border-color:transparent; }
.qty-pad-apply { width:100%; min-height:50px; margin-top:14px; border:0; border-radius:16px; color:#fff; background:linear-gradient(135deg,var(--products-accent),color-mix(in srgb,var(--products-accent) 70%,#001b52)); font-weight:950; }

/* Showcase view: group imagery across top, product list left, focus item right. */
.products-grid.showcase-view { display:block !important; }
.showcase-group {
    margin:0 0 18px;
    padding:16px;
    border-radius:26px;
    background:var(--products-card);
    border:1px solid var(--products-border);
    box-shadow:var(--products-shadow);
}
.showcase-group-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }
.showcase-group-head strong { display:block; font-size:20px; font-weight:950; }
.showcase-group-head span { color:var(--products-muted); font-size:12px; font-weight:800; }
.showcase-group-images { display:flex; gap:7px; overflow-x:auto; }
.showcase-group-images img { width:46px;height:46px;flex:0 0 46px;object-fit:contain;padding:3px;border-radius:12px;background:#fff;border:1px solid var(--products-border); }
.showcase-layout { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.35fr); gap:14px; }
.showcase-list { max-height:500px; overflow:auto; display:flex; flex-direction:column; gap:8px; padding-right:3px; }
.showcase-mini { min-height:68px; width:100%; display:grid; grid-template-columns:58px minmax(0,1fr); gap:10px; align-items:center; text-align:left; border:1px solid var(--products-border); border-radius:17px; background:var(--products-card2); color:var(--products-text); padding:7px; cursor:pointer; }
.showcase-mini.is-active { border-color:var(--products-accent); background:var(--products-accent-soft); }
.showcase-mini.is-special { box-shadow:inset 3px 0 0 #10b981; }
.showcase-mini img { width:58px;height:54px;object-fit:contain;background:#fff;border-radius:12px;padding:3px; }
.showcase-mini span { min-width:0; display:flex; flex-direction:column; gap:4px; }
.showcase-mini strong { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px; }
.showcase-mini small { color:var(--products-accent);font-weight:950; }
.showcase-focus { min-height:500px; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(230px,.75fr); gap:18px; align-items:center; padding:18px; border-radius:22px; background:radial-gradient(circle at top right,var(--products-accent-soft),transparent 38%),var(--products-card2); border:1px solid var(--products-border); }
.showcase-focus-image { min-height:390px; display:flex; align-items:center; justify-content:center; border-radius:20px; background:#fff; overflow:hidden; }
.showcase-focus-image img { max-width:100%;max-height:380px;object-fit:contain;padding:16px; }
.showcase-focus-copy small { color:var(--products-accent); font-weight:900; }
.showcase-focus-copy h3 { margin:7px 0 10px;font-size:clamp(22px,3vw,34px);line-height:1.04; }
.showcase-focus-copy p { color:var(--products-muted);line-height:1.55; }
.showcase-add-btn { width:100%;min-height:48px;border:0;border-radius:15px;color:#fff;background:var(--products-accent);font-weight:950;cursor:pointer; }

/* Transition loader */
.products-page-transition-loader { position:fixed;inset:0;z-index:120000;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;pointer-events:none;background:rgba(4,10,22,.54);backdrop-filter:blur(12px);transition:.15s ease; }
.products-page-transition-loader.is-active { opacity:1;visibility:visible;pointer-events:all; }
.products-page-loader-card { width:min(330px,calc(100vw - 34px));padding:28px;border-radius:28px;text-align:center;background:var(--products-card);color:var(--products-text);border:1px solid color-mix(in srgb,var(--products-accent) 30%,var(--products-border));box-shadow:0 30px 90px rgba(0,0,0,.34); }
.products-loader-art { width:100px;height:100px;margin:0 auto 18px;position:relative;display:grid;place-items:center; }
.products-loader-art img { width:66px;height:66px;object-fit:contain;padding:4px;border-radius:18px;background:#fff; }
.products-loader-ring { position:absolute;inset:2px;border-radius:50%;border:2px solid transparent;border-top-color:var(--products-accent);border-right-color:color-mix(in srgb,var(--products-accent) 45%,transparent);animation:prodSpin 1.1s linear infinite; }
.products-page-loader-card strong { display:block;font-size:22px;font-weight:950; }
.products-page-loader-card>span { display:block;margin-top:6px;color:var(--products-muted);font-size:12px; }
.products-loader-line { height:4px;margin-top:19px;overflow:hidden;border-radius:999px;background:var(--products-accent-soft); }
.products-loader-line i { display:block;width:40%;height:100%;background:linear-gradient(90deg,transparent,var(--products-accent),transparent);animation:prodLine 1.1s ease-in-out infinite; }
@keyframes prodSpin { to{transform:rotate(360deg)} }
@keyframes prodLine { from{transform:translateX(-120%)} to{transform:translateX(300%)} }

/* Tablet-first tuning */
@media (max-width:1100px) {
    .products-filter-scroll { grid-template-columns:1fr 1fr !important; }
    .products-filter-checks { grid-template-columns:1fr 1fr !important; }
    .showcase-layout { grid-template-columns:320px minmax(0,1fr); }
    .showcase-focus { grid-template-columns:1fr; }
    .showcase-focus-image { min-height:300px; }
}
@media (max-width:760px) {
    .products-page { padding:8px !important; padding-bottom:86px !important; }
    .products-search-option-bar { position:sticky;top:0;z-index:80;padding:8px;border-radius:18px;background:color-mix(in srgb,var(--products-card) 94%,transparent);backdrop-filter:blur(12px); }
    .products-filter-scroll { grid-template-columns:1fr !important; }
    .products-filter-checks { grid-template-columns:1fr !important; }
    .pfm-dropdown.open .pfm-dropdown-panel,.filter-dropdown.open .filter-dropdown-panel { width:calc(100vw - 18px) !important; max-height:78vh !important; padding:12px !important; }
    .showcase-layout { grid-template-columns:1fr; }
    .showcase-list { max-height:290px; }
    .showcase-focus { min-height:0;grid-template-columns:1fr;padding:12px; }
    .showcase-focus-image { min-height:260px; }
    .showcase-focus-image img { max-height:250px; }
    .qty-pad-grid { grid-template-columns:repeat(3,1fr); }
}


/* =========================================================
   PRODUCTS HOTFIX 2026-09-18
   Cleaner filter drawer + compact showcase view
   ========================================================= */

/* ---------- FILTER DRAWER ---------- */
.products-filter-modal {
    width: min(500px, calc(100vw - 20px)) !important;
}

/* The filter fields themselves stay in a clean 2-column grid. */
.products-filter-scroll {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 14px !important;
    padding: 16px 18px 18px !important;
}

/* Toggle filters: roomy 2x2 cards instead of four squeezed columns. */
.products-filter-checks {
    grid-column: 1 / -1 !important;
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 14px 0 4px !important;
    margin: 0 !important;
    border-top: 1px solid var(--products-border) !important;
    background: transparent !important;
}

.filter-check {
    position: relative !important;
    min-height: 78px !important;
    padding: 13px 46px 12px 13px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 18px !important;
    background: var(--products-card2) !important;
    border: 1px solid color-mix(in srgb, var(--products-accent) 14%, var(--products-border)) !important;
    overflow: hidden !important;
}

.filter-check > span {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.filter-check strong {
    font-size: 13px !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;
    color: var(--products-text) !important;
}

.filter-check small {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    color: var(--products-muted) !important;
}

.filter-check input[type="checkbox"] {
    position: absolute !important;
    right: 13px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    accent-color: var(--products-accent) !important;
}

.special-filter-check {
    border-color: color-mix(in srgb, #10b981 34%, var(--products-border)) !important;
}

/* Selects stay in normal flow below toggles. */
.filter-field-select {
    position: static !important;
    min-width: 0 !important;
}

/*
   Dropdown choices are a floating chooser INSIDE the visual drawer footprint.
   It is no longer attached under the button and never grows wider than the drawer.
*/
.pfm-dropdown.open .pfm-dropdown-panel,
.filter-dropdown.open .filter-dropdown-panel {
    position: fixed !important;
    top: 96px !important;
    right: 26px !important;
    bottom: 104px !important;
    left: auto !important;
    transform: none !important;
    width: min(456px, calc(100vw - 52px)) !important;
    max-width: calc(100vw - 52px) !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 1000020 !important;
    border-radius: 22px !important;
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--products-accent) 6%, var(--products-card)),
            var(--products-card)) !important;
    border: 1px solid color-mix(in srgb, var(--products-accent) 26%, var(--products-border)) !important;
    box-shadow: 0 26px 70px rgba(0,0,0,.34) !important;
}

/* Search is a real header row and cannot cover the first choices. */
.pfm-dropdown.open .pfm-mini-search,
.filter-dropdown.open .pfm-mini-search {
    position: sticky !important;
    top: -12px !important;
    z-index: 6 !important;
    margin: -12px -12px 10px !important;
    padding: 12px !important;
    background: color-mix(in srgb, var(--products-card) 97%, transparent) !important;
    border-bottom: 1px solid var(--products-border) !important;
    backdrop-filter: blur(12px) !important;
}

.pfm-dropdown.open .pfm-mini-search input,
.filter-dropdown.open .pfm-mini-search input {
    width: 100% !important;
    height: 46px !important;
    border-radius: 15px !important;
    padding: 0 13px !important;
}

.pfm-dropdown.open .categories-list,
.filter-dropdown.open .categories-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
}

.pfm-dropdown.open .categories-item,
.filter-dropdown.open .categories-item {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
}

/* ---------- SHOWCASE VIEW ---------- */
.products-grid.showcase-view {
    display: block !important;
    width: 100% !important;
}

.showcase-group {
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 14px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
}

.showcase-group-head {
    min-height: 58px !important;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--products-border) !important;
}

.showcase-group-title {
    min-width: 180px !important;
}

.showcase-group-title strong {
    font-size: 18px !important;
    line-height: 1.1 !important;
}

.showcase-group-images {
    max-width: 48% !important;
    padding-bottom: 2px !important;
    scrollbar-width: none !important;
}

.showcase-group-images::-webkit-scrollbar {
    display: none !important;
}

.showcase-group-images img {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
}

/*
   Compact split layout:
   left = scrollable product list
   right = selected item
*/
.showcase-layout {
    display: grid !important;
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    min-height: 0 !important;
}

.showcase-list {
    height: 350px !important;
    max-height: 350px !important;
    min-height: 350px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    gap: 7px !important;
    padding: 2px 5px 2px 1px !important;
    scrollbar-width: thin !important;
}

.showcase-mini {
    min-height: 60px !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 6px !important;
    border-radius: 15px !important;
}

.showcase-mini img {
    width: 50px !important;
    height: 48px !important;
    border-radius: 11px !important;
}

.showcase-mini strong {
    font-size: 12px !important;
}

.showcase-mini small {
    font-size: 11px !important;
}

/* Selected product is intentionally NOT huge. */
.showcase-focus {
    min-height: 350px !important;
    height: 350px !important;
    max-height: 350px !important;
    display: grid !important;
    grid-template-columns: minmax(220px, .9fr) minmax(220px, 1.1fr) !important;
    gap: 16px !important;
    align-items: center !important;
    padding: 14px !important;
    overflow: hidden !important;
    border-radius: 20px !important;
}

.showcase-focus.is-special {
    border-color: color-mix(in srgb, #10b981 40%, var(--products-border)) !important;
    box-shadow: inset 3px 0 0 #10b981 !important;
}

.showcase-focus-image {
    width: 100% !important;
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    padding: 10px !important;
    overflow: hidden !important;
    border-radius: 17px !important;
}

.showcase-focus-image img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 278px !important;
    margin: auto !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
}

.showcase-focus-copy {
    min-width: 0 !important;
    max-height: 310px !important;
    overflow: hidden !important;
}

.showcase-focus-kicker {
    color: var(--products-accent) !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

.showcase-focus-copy h3 {
    margin: 7px 0 8px !important;
    font-size: clamp(19px, 2.2vw, 28px) !important;
    line-height: 1.05 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.showcase-focus-desc {
    min-height: 34px !important;
    max-height: 64px !important;
    margin: 0 0 10px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    color: var(--products-muted) !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

.showcase-focus-prices {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 11px !important;
}

.showcase-focus-regular {
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.showcase-focus-current {
    color: var(--products-accent) !important;
    font-size: 21px !important;
    font-weight: 950 !important;
}

.showcase-focus-special {
    min-height: 24px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    color: #047857 !important;
    background: rgba(16,185,129,.10) !important;
    border: 1px solid rgba(16,185,129,.22) !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
}

.showcase-add-btn {
    min-height: 44px !important;
}

/* Tablet: keep split view instead of exploding the image vertically. */
@media (min-width: 761px) and (max-width: 1100px) {
    .products-filter-checks {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }

    .showcase-layout {
        grid-template-columns: minmax(210px, 255px) minmax(0, 1fr) !important;
    }

    .showcase-list {
        height: 320px !important;
        min-height: 320px !important;
        max-height: 320px !important;
    }

    .showcase-focus {
        height: 320px !important;
        min-height: 320px !important;
        max-height: 320px !important;
        grid-template-columns: minmax(190px, .9fr) minmax(190px, 1.1fr) !important;
    }

    .showcase-focus-image {
        height: 270px !important;
        min-height: 270px !important;
        max-height: 270px !important;
    }

    .showcase-focus-image img {
        max-height: 248px !important;
    }
}

/* Phone: horizontal item strip + compact selected item below. */
@media (max-width: 760px) {
    .products-filter-modal {
        top: 6px !important;
        right: 6px !important;
        bottom: 6px !important;
        width: calc(100vw - 12px) !important;
        height: calc(100vh - 12px) !important;
        border-radius: 22px !important;
    }

    .products-filter-scroll {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
    }

    .products-filter-checks {
        grid-template-columns: 1fr !important;
    }

    .filter-check {
        min-height: 66px !important;
    }

    .pfm-dropdown.open .pfm-dropdown-panel,
    .filter-dropdown.open .filter-dropdown-panel {
        top: 82px !important;
        right: 14px !important;
        bottom: 92px !important;
        width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px) !important;
        border-radius: 19px !important;
    }

    .showcase-group {
        padding: 10px !important;
        border-radius: 19px !important;
    }

    .showcase-group-head {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .showcase-group-images {
        width: 100% !important;
        max-width: 100% !important;
    }

    .showcase-layout {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .showcase-list {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(205px, 72vw) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 1px 0 6px !important;
        scroll-snap-type: x proximity !important;
    }

    .showcase-mini {
        scroll-snap-align: start !important;
    }

    .showcase-focus {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 10px !important;
    }

    .showcase-focus-image {
        height: 215px !important;
        min-height: 215px !important;
        max-height: 215px !important;
    }

    .showcase-focus-image img {
        max-height: 195px !important;
    }

    .showcase-focus-copy {
        max-height: none !important;
    }

    .showcase-focus-copy h3 {
        font-size: 20px !important;
        -webkit-line-clamp: 2 !important;
    }

    .showcase-focus-desc {
        -webkit-line-clamp: 2 !important;
        max-height: 42px !important;
    }
}


/* =========================================================
   HOTFIX #2 - FILTER POSITION + ADD PRODUCT + SHOWCASE
   ========================================================= */

/* Zero qty and positive qty controls are both present; class controls visibility. */
.product-order-controls {
    flex: 1 1 auto;
    min-width: 0;
}

.product-card:not(.has-qty) .product-order-controls .product-add-row {
    display: flex !important;
}

.product-card:not(.has-qty) .product-order-controls .product-qty-row {
    display: none !important;
}

.product-card.has-qty .product-order-controls .product-add-row {
    display: none !important;
}

.product-card.has-qty .product-order-controls .product-qty-row {
    display: grid !important;
}

/* Exact panel coordinates are measured from the real drawer header/actions in JS. */
.pfm-dropdown.open .pfm-dropdown-panel,
.filter-dropdown.open .filter-dropdown-panel {
    position: fixed !important;
    top: var(--pf-panel-top, 120px) !important;
    left: var(--pf-panel-left, 18px) !important;
    right: auto !important;
    bottom: var(--pf-panel-bottom, 106px) !important;
    width: var(--pf-panel-width, min(456px, calc(100vw - 36px))) !important;
    max-width: var(--pf-panel-width, min(456px, calc(100vw - 36px))) !important;
    max-height: none !important;
    transform: none !important;
    z-index: 1000080 !important;
}

.products-filter-head {
    position: relative !important;
    z-index: 8 !important;
}

.products-filter-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.filter-check {
    min-height: 74px !important;
    padding: 12px 48px 12px 14px !important;
}

.filter-check input[type="checkbox"] {
    width: 23px !important;
    height: 23px !important;
    right: 14px !important;
}

/* Compact Showcase. */
.showcase-group {
    max-width: 1120px !important;
    margin: 0 auto 16px !important;
    padding: 12px !important;
}

.showcase-group-head {
    min-height: 54px !important;
    margin-bottom: 10px !important;
}

.showcase-group-images {
    max-width: 54% !important;
}

.showcase-group-images img {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
}

.showcase-layout {
    grid-template-columns: 270px minmax(0, 1fr) !important;
    gap: 10px !important;
}

.showcase-list {
    height: 286px !important;
    min-height: 286px !important;
    max-height: 286px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.showcase-mini {
    min-height: 56px !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    padding: 5px !important;
}

.showcase-mini img {
    width: 46px !important;
    height: 44px !important;
}

.showcase-focus {
    height: 286px !important;
    min-height: 286px !important;
    max-height: 286px !important;
    grid-template-columns: minmax(210px, 42%) minmax(0, 58%) !important;
    gap: 14px !important;
    padding: 12px !important;
}

.showcase-focus-image {
    width: 100% !important;
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
    padding: 9px !important;
}

.showcase-focus-image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 230px !important;
    object-fit: contain !important;
    object-position: center !important;
}

.showcase-focus-copy {
    max-height: 252px !important;
}

.showcase-focus-copy h3 {
    font-size: clamp(18px, 2vw, 25px) !important;
    -webkit-line-clamp: 2 !important;
}

.showcase-focus-desc {
    max-height: 58px !important;
    -webkit-line-clamp: 3 !important;
}

@media (min-width: 761px) and (max-width: 1100px) {
    .showcase-group {
        max-width: 100% !important;
    }

    .showcase-layout {
        grid-template-columns: 230px minmax(0, 1fr) !important;
    }

    .showcase-list,
    .showcase-focus {
        height: 270px !important;
        min-height: 270px !important;
        max-height: 270px !important;
    }

    .showcase-focus {
        grid-template-columns: minmax(180px, 40%) minmax(0, 60%) !important;
    }

    .showcase-focus-image {
        height: 232px !important;
        min-height: 232px !important;
        max-height: 232px !important;
    }

    .showcase-focus-image img {
        max-height: 212px !important;
    }
}

@media (max-width: 760px) {
    .products-filter-checks {
        grid-template-columns: 1fr !important;
    }

    .pfm-dropdown.open .pfm-dropdown-panel,
    .filter-dropdown.open .filter-dropdown-panel {
        top: var(--pf-panel-top, 84px) !important;
        left: var(--pf-panel-left, 10px) !important;
        bottom: var(--pf-panel-bottom, 92px) !important;
        width: var(--pf-panel-width, calc(100vw - 20px)) !important;
        max-width: var(--pf-panel-width, calc(100vw - 20px)) !important;
    }

    .showcase-layout {
        grid-template-columns: 1fr !important;
    }

    .showcase-list {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(190px, 72vw) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-bottom: 6px !important;
    }

    .showcase-focus {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        grid-template-columns: 1fr !important;
    }

    .showcase-focus-image {
        height: 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;
    }

    .showcase-focus-image img {
        max-height: 172px !important;
    }

    .showcase-focus-copy {
        max-height: none !important;
    }
}


/* =========================================================
   2026-09-18 FINAL FILTER + SHOWCASE REDESIGN
   ========================================================= */

/* FILTER: one wide dropdown control per row */
.products-filter-scroll {
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 14px 16px 18px !important;
}

.products-filter-scroll > .filter-field,
.products-filter-scroll > .filter-field-select {
    width: 100% !important;
    margin: 0 0 13px !important;
}

.products-filter-scroll > .filter-field > label,
.products-filter-scroll > .filter-field-select > label {
    display: block !important;
    margin-bottom: 6px !important;
}

.pfm-dropdown,
.filter-dropdown,
.pfm-dropdown-btn,
.filter-dropdown-btn,
.modern-select {
    width: 100% !important;
    max-width: none !important;
}

.pfm-dropdown-btn,
.filter-dropdown-btn,
.modern-select {
    min-height: 48px !important;
    border-radius: 15px !important;
}

/* inline dropdown — stable and impossible to hide behind filter header */
.pfm-dropdown-panel,
.filter-dropdown-panel {
    display: none !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: 320px !important;
    margin: 8px 0 0 !important;
    padding: 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
    border-radius: 16px !important;
    background: color-mix(in srgb, var(--products-card2) 92%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--products-accent) 18%, var(--products-border)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.pfm-dropdown.open .pfm-dropdown-panel,
.filter-dropdown.open .filter-dropdown-panel {
    display: block !important;
    height: auto !important;
    max-height: 320px !important;
    margin-top: 8px !important;
    padding: 10px !important;
    border-width: 1px !important;
}

.pfm-dropdown:not(.open) .pfm-dropdown-panel,
.filter-dropdown:not(.open) .filter-dropdown-panel {
    display: none !important;
}

/* dropdown search is part of list flow, sticky only inside its list */
.pfm-mini-search,
.filter-list-search-wrap {
    position: sticky !important;
    top: -10px !important;
    z-index: 4 !important;
    margin: -10px -10px 9px !important;
    padding: 10px !important;
    background: color-mix(in srgb, var(--products-card2) 98%, transparent) !important;
    border-bottom: 1px solid var(--products-border) !important;
}

.pfm-mini-search input,
.filter-list-search {
    width: 100% !important;
    height: 44px !important;
}

/* Switch cards remain clean 2x2 below dropdowns */
.products-filter-checks {
    width: 100% !important;
    margin: 4px 0 14px !important;
    padding: 13px 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    border-top: 1px solid var(--products-border) !important;
}

.filter-check {
    min-height: 72px !important;
}

/* SHOWCASE: a single modern catalog workspace, not repeated giant blocks */
.products-grid.showcase-view {
    display: block !important;
    width: 100% !important;
}

.showcase-browser {
    width: min(1180px, 100%) !important;
    margin: 0 auto !important;
    padding: 18px !important;
    border-radius: 26px !important;
    background:
        radial-gradient(circle at top right,
            color-mix(in srgb, var(--products-accent) 9%, transparent),
            transparent 28rem),
        var(--products-card) !important;
    border: 1px solid color-mix(in srgb, var(--products-accent) 20%, var(--products-border)) !important;
    box-shadow: 0 18px 46px rgba(15,23,42,.10) !important;
}

.showcase-browser-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 20px !important;
    margin-bottom: 14px !important;
}

.showcase-browser-kicker {
    display: block !important;
    margin-bottom: 5px !important;
    color: var(--products-accent) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}

.showcase-browser-head h2 {
    margin: 0 !important;
    color: var(--products-text) !important;
    font-size: clamp(22px, 2.5vw, 32px) !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
}

.showcase-browser-head p {
    margin: 7px 0 0 !important;
    color: var(--products-muted) !important;
    font-size: 12px !important;
}

/* Group chooser */
.showcase-group-rail {
    width: 100% !important;
    display: flex !important;
    gap: 9px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 2px 1px 11px !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: thin !important;
}

.showcase-group-tab {
    flex: 0 0 190px !important;
    min-width: 190px !important;
    min-height: 76px !important;
    display: grid !important;
    grid-template-columns: 72px minmax(0,1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 8px !important;
    text-align: left !important;
    border-radius: 17px !important;
    border: 1px solid var(--products-border) !important;
    background: var(--products-card2) !important;
    color: var(--products-text) !important;
    cursor: pointer !important;
    scroll-snap-align: start !important;
}

.showcase-group-tab.is-active {
    border-color: color-mix(in srgb, var(--products-accent) 58%, transparent) !important;
    background: var(--products-accent-soft) !important;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--products-accent) 10%, transparent) !important;
}

.showcase-group-tab-images {
    width: 72px !important;
    height: 56px !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    gap: 3px !important;
}

.showcase-group-tab-images img {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 2px !important;
    object-fit: contain !important;
    border-radius: 7px !important;
    background: #fff !important;
}

.showcase-group-tab-images img:first-child {
    grid-row: 1 / 3 !important;
}

.showcase-group-tab-copy {
    min-width: 0 !important;
}

.showcase-group-tab-copy strong {
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
}

.showcase-group-tab-copy small {
    display: block !important;
    margin-top: 5px !important;
    color: var(--products-muted) !important;
    font-size: 10px !important;
    font-weight: 750 !important;
}

/* Main workspace */
.showcase-workspace {
    display: grid !important;
    grid-template-columns: 310px minmax(0,1fr) !important;
    gap: 12px !important;
    min-height: 430px !important;
}

.showcase-items-pane,
.showcase-detail {
    min-width: 0 !important;
    border-radius: 21px !important;
    border: 1px solid var(--products-border) !important;
    background: var(--products-card2) !important;
    overflow: hidden !important;
}

.showcase-pane-head {
    min-height: 58px !important;
    padding: 12px 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 9px !important;
    border-bottom: 1px solid var(--products-border) !important;
}

.showcase-pane-head strong {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

.showcase-pane-head span {
    flex: 0 0 auto !important;
    color: var(--products-muted) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}

.showcase-items-list {
    height: 370px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 8px !important;
}

.showcase-item {
    width: 100% !important;
    min-height: 70px !important;
    margin: 0 0 7px !important;
    padding: 7px !important;
    display: grid !important;
    grid-template-columns: 56px minmax(0,1fr) 24px !important;
    gap: 9px !important;
    align-items: center !important;
    text-align: left !important;
    border-radius: 15px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--products-text) !important;
    cursor: pointer !important;
}

.showcase-item:hover {
    background: color-mix(in srgb, var(--products-accent) 5%, transparent) !important;
}

.showcase-item.is-active {
    border-color: color-mix(in srgb, var(--products-accent) 36%, var(--products-border)) !important;
    background: var(--products-accent-soft) !important;
}

.showcase-item.is-special {
    box-shadow: inset 3px 0 0 #10b981 !important;
}

.showcase-item-image {
    width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: #fff !important;
}

.showcase-item-image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.showcase-item-copy {
    min-width: 0 !important;
}

.showcase-item-copy strong {
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
}

.showcase-item-copy small {
    display: block !important;
    margin-top: 3px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    color: var(--products-muted) !important;
    font-size: 9px !important;
}

.showcase-item-price {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    margin-top: 5px !important;
}

.showcase-item-price del {
    color: #94a3b8 !important;
    font-size: 9px !important;
}

.showcase-item-price b {
    color: var(--products-accent) !important;
    font-size: 12px !important;
}

.showcase-item-arrow {
    color: var(--products-accent) !important;
    font-size: 20px !important;
    font-weight: 900 !important;
}

/* Detail: image is useful, never huge */
.showcase-detail {
    min-height: 430px !important;
    display: grid !important;
    grid-template-columns: minmax(260px, 42%) minmax(0,58%) !important;
    gap: 0 !important;
}

.showcase-detail.is-special {
    border-color: color-mix(in srgb, #10b981 34%, var(--products-border)) !important;
    box-shadow: inset 3px 0 0 #10b981 !important;
}

.showcase-detail-image {
    min-height: 430px !important;
    padding: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #fff !important;
}

.showcase-detail-image img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 350px !important;
    object-fit: contain !important;
    object-position: center !important;
}

.showcase-detail-copy {
    min-width: 0 !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.showcase-detail-badges {
    min-height: 25px !important;
    display: flex !important;
    gap: 7px !important;
    flex-wrap: wrap !important;
    margin-bottom: 8px !important;
}

.showcase-badge {
    min-height: 23px !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 999px !important;
    color: var(--products-accent) !important;
    background: var(--products-accent-soft) !important;
    border: 1px solid color-mix(in srgb, var(--products-accent) 20%, transparent) !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
}

.showcase-badge.special {
    color: #047857 !important;
    background: rgba(16,185,129,.10) !important;
    border-color: rgba(16,185,129,.22) !important;
}

.showcase-detail-meta {
    color: var(--products-accent) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
}

.showcase-detail-copy h3 {
    margin: 7px 0 9px !important;
    color: var(--products-text) !important;
    font-size: clamp(22px, 2.5vw, 34px) !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
}

.showcase-detail-description {
    max-height: 66px !important;
    margin: 0 0 14px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    color: var(--products-muted) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

.showcase-detail-facts {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}

.showcase-detail-facts > span {
    min-width: 0 !important;
    padding: 9px !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--products-card) 68%, transparent) !important;
    border: 1px solid var(--products-border) !important;
}

.showcase-detail-facts small {
    display: block !important;
    margin-bottom: 4px !important;
    color: var(--products-muted) !important;
    font-size: 8px !important;
    font-weight: 850 !important;
    text-transform: uppercase !important;
}

.showcase-detail-facts strong {
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 11px !important;
}

.showcase-detail-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: auto !important;
}

.showcase-detail-price {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
}

.showcase-detail-price del {
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.showcase-detail-price strong {
    color: var(--products-accent) !important;
    font-size: 24px !important;
    font-weight: 950 !important;
}

.showcase-detail-add {
    min-width: 150px !important;
    min-height: 46px !important;
    padding: 0 17px !important;
    border: 0 !important;
    border-radius: 14px !important;
    color: #fff !important;
    background: linear-gradient(135deg,
        var(--products-accent),
        color-mix(in srgb,var(--products-accent) 72%,#001b52)) !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

/* Tablet */
@media (min-width: 761px) and (max-width: 1100px) {
    .showcase-browser {
        padding: 13px !important;
    }

    .showcase-workspace {
        grid-template-columns: 250px minmax(0,1fr) !important;
        min-height: 390px !important;
    }

    .showcase-items-list {
        height: 330px !important;
    }

    .showcase-detail {
        min-height: 390px !important;
        grid-template-columns: minmax(210px,40%) minmax(0,60%) !important;
    }

    .showcase-detail-image {
        min-height: 390px !important;
        padding: 13px !important;
    }

    .showcase-detail-image img {
        max-height: 300px !important;
    }

    .showcase-detail-copy {
        padding: 18px !important;
    }
}

/* Phone */
@media (max-width: 760px) {
    .products-filter-scroll {
        padding: 12px !important;
    }

    .products-filter-checks {
        grid-template-columns: 1fr !important;
    }

    .showcase-browser {
        padding: 10px !important;
        border-radius: 19px !important;
    }

    .showcase-browser-head h2 {
        font-size: 22px !important;
    }

    .showcase-group-tab {
        flex-basis: 165px !important;
        min-width: 165px !important;
    }

    .showcase-workspace {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }

    .showcase-items-pane {
        overflow: visible !important;
    }

    .showcase-pane-head {
        min-height: 48px !important;
    }

    .showcase-items-list {
        width: 100% !important;
        height: auto !important;
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(210px,76vw) !important;
        gap: 7px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 8px !important;
        scroll-snap-type: x proximity !important;
    }

    .showcase-item {
        margin: 0 !important;
        scroll-snap-align: start !important;
    }

    .showcase-detail {
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
    }

    .showcase-detail-image {
        min-height: 235px !important;
        height: 235px !important;
        padding: 12px !important;
    }

    .showcase-detail-image img {
        max-height: 210px !important;
    }

    .showcase-detail-copy {
        padding: 16px !important;
    }

    .showcase-detail-copy h3 {
        font-size: 22px !important;
    }

    .showcase-detail-facts {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    .showcase-detail-bottom {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .showcase-detail-add {
        width: 100% !important;
    }
}


/* =========================================================
   CACHE-BUSTED SHOWCASE/FILTER FINISH - 2026-09-18
   ========================================================= */

/* Give opened filter lists substantially more room. */
.pfm-dropdown.open .pfm-dropdown-panel,
.filter-dropdown.open .filter-dropdown-panel {
    max-height: min(520px, 58vh) !important;
}

.pfm-dropdown-panel,
.filter-dropdown-panel {
    max-height: min(520px, 58vh) !important;
}

@media (max-height: 760px) {
    .pfm-dropdown.open .pfm-dropdown-panel,
    .filter-dropdown.open .filter-dropdown-panel,
    .pfm-dropdown-panel,
    .filter-dropdown-panel {
        max-height: 46vh !important;
    }
}

/* Showcase: make the image even more controlled so it can never feel like a hero banner. */
.showcase-detail-image {
    min-height: 360px !important;
    height: 360px !important;
    max-height: 360px !important;
}

.showcase-detail-image img {
    max-height: 310px !important;
    max-width: 92% !important;
}

.showcase-detail {
    min-height: 360px !important;
}

.showcase-workspace {
    min-height: 360px !important;
}

.showcase-items-list {
    height: 302px !important;
}

@media (min-width: 761px) and (max-width: 1100px) {
    .showcase-detail,
    .showcase-detail-image {
        min-height: 330px !important;
        height: 330px !important;
        max-height: 330px !important;
    }

    .showcase-detail-image img {
        max-height: 280px !important;
    }

    .showcase-items-list {
        height: 272px !important;
    }
}

@media (max-width: 760px) {
    .showcase-detail {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
    }

    .showcase-detail-image {
        min-height: 210px !important;
        height: 210px !important;
        max-height: 210px !important;
    }

    .showcase-detail-image img {
        max-height: 184px !important;
        max-width: 88% !important;
    }
}


/* =========================================================
   SHOWCASE FULL-WIDTH + VIEW MENU + QTY CONTROLS
   2026-09-18
   ========================================================= */

/* ---------- VIEW MODE ICON BETWEEN SEARCH AND FILTERS ---------- */
.products-search-option-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 8px !important;
    align-items: center !important;
}

.products-view-menu {
    position: relative !important;
    flex: 0 0 auto !important;
}

.products-view-mode-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.products-view-menu-btn {
    min-width: 54px !important;
    height: 46px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    border-radius: 15px !important;
    border: 1px solid var(--products-border) !important;
    color: var(--products-text) !important;
    background: var(--products-card) !important;
    cursor: pointer !important;
}

.products-view-menu-btn:hover,
.products-view-menu.open .products-view-menu-btn {
    color: var(--products-accent) !important;
    border-color: color-mix(in srgb, var(--products-accent) 40%, var(--products-border)) !important;
    background: var(--products-accent-soft) !important;
}

.products-view-menu-btn svg {
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
}

.products-view-menu-caret {
    font-size: 10px !important;
}

.products-view-menu-panel {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    z-index: 10030 !important;
    width: 260px !important;
    padding: 8px !important;
    display: none !important;
    border-radius: 18px !important;
    background: var(--products-card) !important;
    border: 1px solid color-mix(in srgb, var(--products-accent) 24%, var(--products-border)) !important;
    box-shadow: 0 22px 54px rgba(0,0,0,.24) !important;
}

.products-view-menu.open .products-view-menu-panel {
    display: grid !important;
    gap: 5px !important;
}

.products-view-option {
    width: 100% !important;
    min-height: 56px !important;
    padding: 8px 10px !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0,1fr) !important;
    gap: 9px !important;
    align-items: center !important;
    text-align: left !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: transparent !important;
    color: var(--products-text) !important;
    cursor: pointer !important;
}

.products-view-option:hover,
.products-view-option.is-active {
    background: var(--products-accent-soft) !important;
}

.products-view-option-icon {
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 11px !important;
    color: var(--products-accent) !important;
    background: color-mix(in srgb, var(--products-accent) 9%, transparent) !important;
    font-size: 20px !important;
}

.products-view-option strong {
    display: block !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

.products-view-option small {
    display: block !important;
    margin-top: 2px !important;
    color: var(--products-muted) !important;
    font-size: 9px !important;
}

/* ---------- FULL PAGE SHOWCASE ---------- */

/* Expand Showcase to the actual Products page edges. */
.products-grid.showcase-view {
    width: calc(100% + 20px) !important;
    max-width: none !important;
    margin-left: -10px !important;
    margin-right: -10px !important;
}

.showcase-browser {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 12px 14px 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.showcase-browser-head {
    padding: 2px 8px 8px !important;
}

.showcase-group-rail {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.showcase-workspace {
    grid-template-columns: 330px minmax(0,1fr) !important;
    gap: 10px !important;
    padding: 0 8px !important;
}

.showcase-items-pane,
.showcase-detail {
    border-radius: 19px !important;
}

/* ---------- LEFT ITEM QTY ---------- */
.showcase-item {
    cursor: pointer !important;
}

.showcase-item-copy {
    display: block !important;
}

.showcase-item-qty {
    width: 100% !important;
    margin-top: 7px !important;
    display: grid !important;
    grid-template-columns: 30px minmax(38px, 1fr) 30px !important;
    gap: 5px !important;
    align-items: center !important;
}

.showcase-qty-btn {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    color: #fff !important;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--products-accent) 72%, #243b6b),
        color-mix(in srgb, var(--products-accent) 54%, #11203f)) !important;
    cursor: pointer !important;
    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
}

.showcase-qty-btn.showcase-qty-plus {
    background: linear-gradient(135deg,
        var(--products-accent),
        color-mix(in srgb, var(--products-accent) 70%, #17427b)) !important;
}

.showcase-qty-btn:disabled {
    opacity: .36 !important;
    cursor: default !important;
}

.showcase-qty-value {
    height: 30px !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9px !important;
    color: var(--products-text) !important;
    background: color-mix(in srgb, var(--products-card) 72%, transparent) !important;
    border: 1px solid var(--products-border) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

/* ---------- RIGHT DETAIL QTY ---------- */
.showcase-detail-bottom {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: end !important;
    gap: 14px !important;
}

.showcase-detail-qty {
    min-width: 190px !important;
    display: grid !important;
    grid-template-columns: 48px minmax(70px, 1fr) 48px !important;
    gap: 7px !important;
    align-items: center !important;
}

.showcase-detail-qty-btn,
.showcase-detail-qty-value {
    height: 48px !important;
    border-radius: 14px !important;
}

.showcase-detail-qty-btn {
    width: 48px !important;
    padding: 0 !important;
    border: 0 !important;
    color: #fff !important;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--products-accent) 72%, #243b6b),
        color-mix(in srgb, var(--products-accent) 54%, #11203f)) !important;
    cursor: pointer !important;
    font-size: 25px !important;
    font-weight: 950 !important;
}

.showcase-detail-qty-btn.plus {
    background: linear-gradient(135deg,
        var(--products-accent),
        color-mix(in srgb, var(--products-accent) 70%, #17427b)) !important;
}

.showcase-detail-qty-btn:disabled {
    opacity: .34 !important;
    cursor: default !important;
}

.showcase-detail-qty-value {
    width: 100% !important;
    min-width: 70px !important;
    padding: 0 10px !important;
    border: 1px solid color-mix(in srgb, var(--products-accent) 18%, var(--products-border)) !important;
    color: var(--products-text) !important;
    background: var(--products-card) !important;
    cursor: pointer !important;
    font-size: 19px !important;
    font-weight: 950 !important;
}

/* Tablet */
@media (min-width: 761px) and (max-width: 1100px) {
    .showcase-workspace {
        grid-template-columns: 285px minmax(0,1fr) !important;
    }

    .showcase-detail-qty {
        min-width: 166px !important;
        grid-template-columns: 44px minmax(62px,1fr) 44px !important;
    }

    .showcase-detail-qty-btn,
    .showcase-detail-qty-value {
        height: 44px !important;
    }

    .showcase-detail-qty-btn {
        width: 44px !important;
    }
}

/* Phone */
@media (max-width: 760px) {
    .products-search-option-bar {
        grid-template-columns: minmax(0,1fr) 48px auto !important;
        gap: 6px !important;
    }

    .products-view-menu-btn {
        min-width: 48px !important;
        width: 48px !important;
        height: 44px !important;
        padding: 0 !important;
    }

    .products-view-menu-caret {
        display: none !important;
    }

    .products-view-menu-panel {
        position: fixed !important;
        top: calc(var(--site-header-small-height, 58px) + 56px) !important;
        right: 8px !important;
        left: 8px !important;
        width: auto !important;
    }

    .products-grid.showcase-view {
        width: calc(100% + 16px) !important;
        margin-left: -8px !important;
        margin-right: -8px !important;
    }

    .showcase-browser {
        padding: 8px 0 14px !important;
    }

    .showcase-browser-head,
    .showcase-group-rail,
    .showcase-workspace {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .showcase-workspace {
        grid-template-columns: 1fr !important;
    }

    .showcase-item {
        grid-template-columns: 56px minmax(0,1fr) !important;
    }

    .showcase-item-arrow {
        display: none !important;
    }

    .showcase-detail-bottom {
        grid-template-columns: 1fr !important;
    }

    .showcase-detail-qty {
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* =========================================================
   SHOWCASE FULL-PAGE HEIGHT + NO TITLE
   2026-09-18
   ========================================================= */

/* In Showcase mode, the Products page becomes a fixed-height app workspace. */
body.site-master-body:has(.products-grid.showcase-view) .products-page {
    height: calc(100dvh - var(--site-header-height, 70px) - var(--site-footer-height, 44px)) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--site-header-height, 70px) - var(--site-footer-height, 44px)) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
}

body.header-scrolled:has(.products-grid.showcase-view) .products-page {
    height: calc(100dvh - var(--site-header-small-height, 58px) - var(--site-footer-height, 44px)) !important;
    max-height: calc(100dvh - var(--site-header-small-height, 58px) - var(--site-footer-height, 44px)) !important;
}

body.site-master-body:has(.products-grid.showcase-view) .products-search-option-bar {
    flex: 0 0 auto !important;
}

body.site-master-body:has(.products-grid.showcase-view) .products-shell {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
}

body.site-master-body:has(.products-grid.showcase-view) #ProductsGrid.showcase-view {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

.showcase-browser {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Title is physically removed from JS; keep a safety rule for old cached markup. */
.showcase-browser-head,
.showcase-browser-kicker {
    display: none !important;
}

.showcase-group-rail {
    flex: 0 0 auto !important;
    margin-bottom: 6px !important;
    padding-top: 2px !important;
    padding-bottom: 6px !important;
}

.showcase-workspace {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    align-items: stretch !important;
    overflow: hidden !important;
}

.showcase-items-pane,
.showcase-detail {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
}

.showcase-items-pane {
    display: flex !important;
    flex-direction: column !important;
}

.showcase-pane-head {
    flex: 0 0 auto !important;
}

.showcase-items-list {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
}

.showcase-detail {
    overflow: hidden !important;
}

.showcase-detail-image {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
}

.showcase-detail-image img {
    max-height: calc(100% - 24px) !important;
}

.showcase-detail-copy {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
}

/* Tablet keeps the same full-height workspace. */
@media (min-width: 761px) and (max-width: 1100px) {
    body.site-master-body:has(.products-grid.showcase-view) .products-page {
        height: calc(100dvh - var(--site-header-height, 70px) - var(--site-footer-height, 44px)) !important;
        max-height: calc(100dvh - var(--site-header-height, 70px) - var(--site-footer-height, 44px)) !important;
    }

    .showcase-detail-image {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
    }
}

/* Phone: use the viewport height but allow the detail to scroll naturally. */
@media (max-width: 760px) {
    body.site-master-body:has(.products-grid.showcase-view) .products-page {
        height: calc(100dvh - var(--site-header-small-height, 58px) - var(--site-footer-height, 44px)) !important;
        max-height: calc(100dvh - var(--site-header-small-height, 58px) - var(--site-footer-height, 44px)) !important;
    }

    .showcase-browser {
        overflow-y: auto !important;
    }

    .showcase-workspace {
        flex: 0 0 auto !important;
        overflow: visible !important;
    }

    .showcase-items-pane,
    .showcase-detail {
        height: auto !important;
        max-height: none !important;
    }

    .showcase-detail-image {
        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
    }

    .showcase-detail-copy {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}


/* =========================================================
   SHOWCASE LAYOUT 11
   - rail never hides behind search
   - no wasted space above search
   - clean SVG view icons
   - item information below full-width image
   ========================================================= */

/* The Showcase page itself is already a fixed-height workspace, so sticky search
   is unnecessary and was the reason the group rail could slide underneath it. */
body.site-master-body:has(.products-grid.showcase-view) .products-page {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.site-master-body:has(.products-grid.showcase-view) .products-search-option-bar {
    position: relative !important;
    top: auto !important;
    z-index: 30 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    flex: 0 0 auto !important;
}

body.site-master-body:has(.products-grid.showcase-view) .products-shell {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.site-master-body:has(.products-grid.showcase-view) .showcase-browser {
    padding-top: 0 !important;
}

/* Product type rail always sits in normal flow directly UNDER search. */
body.site-master-body:has(.products-grid.showcase-view) .showcase-group-rail {
    position: relative !important;
    top: auto !important;
    z-index: 5 !important;
    flex: 0 0 auto !important;
    margin: 0 0 6px !important;
    padding-top: 6px !important;
    padding-bottom: 7px !important;
    background: transparent !important;
}

/* Clean SVG icons inside View menu. */
.products-view-option-icon svg {
    width: 21px !important;
    height: 21px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* ---------------------------------------------------------
   SELECTED PRODUCT: IMAGE ABOVE, INFORMATION BELOW
   --------------------------------------------------------- */
.showcase-detail {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

/* Image socket stretches across the ENTIRE available detail width. */
.showcase-detail-image {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    padding: 10px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: #fff !important;
}

.showcase-detail-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* Information becomes one compact dock BELOW the image. */
.showcase-detail-copy {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 132px !important;
    max-height: none !important;
    padding: 12px 14px !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 1.25fr) minmax(320px, 1.5fr) auto !important;
    grid-template-areas:
        "meta facts controls"
        "name facts controls"
        "desc facts controls" !important;
    column-gap: 18px !important;
    row-gap: 3px !important;
    align-items: center !important;
    overflow: hidden !important;
    border-top: 1px solid var(--products-border) !important;
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--products-accent) 5%, var(--products-card2)),
            var(--products-card2)) !important;
}

.showcase-detail-badges {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    z-index: 3 !important;
    min-height: 0 !important;
    margin: 0 !important;
}

.showcase-detail-meta {
    grid-area: meta !important;
    min-width: 0 !important;
}

.showcase-detail-copy h3 {
    grid-area: name !important;
    min-width: 0 !important;
    margin: 2px 0 !important;
    font-size: clamp(20px, 2vw, 28px) !important;
    line-height: 1.05 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.showcase-detail-description {
    grid-area: desc !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 34px !important;
    margin: 0 !important;
    -webkit-line-clamp: 2 !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
}

.showcase-detail-facts {
    grid-area: facts !important;
    width: 100% !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 6px !important;
}

.showcase-detail-facts > span {
    min-height: 54px !important;
    padding: 8px !important;
}

.showcase-detail-bottom {
    grid-area: controls !important;
    min-width: 230px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 8px !important;
}

.showcase-detail-price {
    justify-content: flex-end !important;
}

.showcase-detail-price strong {
    font-size: 24px !important;
}

.showcase-detail-qty {
    width: 100% !important;
    min-width: 210px !important;
}

/* Since badges are absolute inside the detail, establish containing block. */
.showcase-detail {
    position: relative !important;
}

/* Tablet: keep info below image, just tighten the dock. */
@media (min-width: 761px) and (max-width: 1100px) {
    .showcase-detail-copy {
        min-height: 142px !important;
        grid-template-columns: minmax(180px, 1.1fr) minmax(250px, 1.35fr) 190px !important;
        column-gap: 10px !important;
        padding: 10px !important;
    }

    .showcase-detail-bottom {
        min-width: 180px !important;
    }

    .showcase-detail-qty {
        min-width: 180px !important;
    }
}

/* Phone: image full width, info naturally stacks underneath. */
@media (max-width: 760px) {
    body.site-master-body:has(.products-grid.showcase-view) .products-page {
        padding-top: 0 !important;
    }

    .showcase-detail {
        height: auto !important;
        max-height: none !important;
    }

    .showcase-detail-image {
        height: 240px !important;
        min-height: 240px !important;
        max-height: 240px !important;
        padding: 9px !important;
    }

    .showcase-detail-copy {
        min-height: 0 !important;
        padding: 12px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "meta"
            "name"
            "desc"
            "facts"
            "controls" !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    .showcase-detail-facts {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    .showcase-detail-bottom {
        min-width: 0 !important;
    }

    .showcase-detail-price {
        justify-content: flex-start !important;
    }

    .showcase-detail-qty {
        min-width: 0 !important;
    }
}


/* =========================================================
   NUMBER PAD + FLOATING THEME BUTTON HOTFIX
   2026-09-20
   ========================================================= */

/* Keep the right-side ordering controls clear of the floating theme icon. */
.showcase-detail-bottom {
    padding-right: 62px !important;
}

.showcase-detail-qty {
    margin-right: 0 !important;
}

/* Quantity pad must always be above SiteMaster drawers/floating tools. */
.qty-pad-modal {
    z-index: 2147483000 !important;
}

.qty-pad-dialog {
    z-index: 2147483001 !important;
}

/* Prevent page content from scrolling while pad is open. */
body.qty-pad-open {
    overflow: hidden !important;
}

@media (max-width: 760px) {
    .showcase-detail-bottom {
        padding-right: 54px !important;
    }

    .qty-pad-dialog {
        width: min(420px, calc(100vw - 20px)) !important;
        max-height: calc(100dvh - 24px) !important;
        overflow-y: auto !important;
    }
}


/* =========================================================
   FINAL QUANTITY DROPDOWN + PROMOTION TIERS
   2026-09-20 numberpad13_promo_tiers
   Screenshot-matched anchored 4-column quantity selector.
   ========================================================= */
.product-qty-pad-trigger {
    position: relative !important;
    padding-right: 28px !important;
    cursor: pointer !important;
}

.product-qty-pad-trigger::after,
.showcase-detail-qty-value::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transform: translateY(-20%);
    opacity: .9;
    pointer-events: none;
}

.showcase-detail-qty-value {
    position: relative !important;
    padding-right: 28px !important;
}

.qty-pad-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: none !important;
    padding: 0 !important;
    pointer-events: none !important;
}

.qty-pad-modal.is-open {
    display: block !important;
}

.qty-pad-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: auto !important;
}

.qty-pad-dialog {
    position: fixed !important;
    z-index: 2 !important;
    width: 220px !important;
    max-width: calc(100vw - 12px) !important;
    max-height: min(470px, calc(100dvh - 12px)) !important;
    padding: 7px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    border-radius: 11px !important;
    border: 1px solid color-mix(in srgb, var(--products-accent) 22%, var(--products-border)) !important;
    background: var(--products-card) !important;
    color: var(--products-text) !important;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .28) !important;
    pointer-events: auto !important;
}

.qty-pad-grid {
    min-height: 0 !important;
    max-height: 292px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 6px !important;
    padding: 0 4px 0 0 !important;
    margin: 0 !important;
    scrollbar-width: auto !important;
    scrollbar-color: color-mix(in srgb, var(--products-text) 48%, transparent) transparent !important;
}

.qty-pad-grid::-webkit-scrollbar {
    width: 9px !important;
}

.qty-pad-grid::-webkit-scrollbar-track {
    background: transparent !important;
}

.qty-pad-grid::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--products-text) 48%, transparent) !important;
    border-radius: 999px !important;
    border: 2px solid var(--products-card) !important;
}

.qty-pad-grid button {
    position: relative !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9px !important;
    border: 1px solid color-mix(in srgb, var(--products-text) 13%, var(--products-border)) !important;
    background: color-mix(in srgb, var(--products-card2) 88%, var(--products-card)) !important;
    color: var(--products-text) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    cursor: pointer !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.42) !important;
    transition: transform .08s ease, border-color .12s ease, background .12s ease !important;
}

.qty-pad-grid button:hover {
    border-color: color-mix(in srgb, var(--products-accent) 50%, var(--products-border)) !important;
    background: var(--products-accent-soft) !important;
}

.qty-pad-grid button:active {
    transform: scale(.96) !important;
}

.qty-pad-grid button.is-active {
    background: var(--products-accent) !important;
    color: #fff !important;
    border-color: var(--products-accent) !important;
    box-shadow: 0 5px 12px color-mix(in srgb, var(--products-accent) 24%, transparent) !important;
}

.qty-pad-grid button.has-promo-tier::after {
    content: "★";
    position: absolute;
    right: 3px;
    top: 2px;
    color: #f59e0b;
    font-size: 8px;
    line-height: 1;
}

.qty-pad-grid button.is-active.has-promo-tier::after {
    color: #fff7c2;
}

.qty-pad-promotion-tiers[hidden] {
    display: none !important;
}

.qty-pad-promotion-tiers {
    flex: 0 0 auto !important;
    padding: 7px !important;
    border-radius: 9px !important;
    border: 1px solid color-mix(in srgb, #f59e0b 38%, var(--products-border)) !important;
    background: color-mix(in srgb, #f59e0b 9%, var(--products-card)) !important;
}

.qty-pad-promotion-heading {
    min-height: 20px !important;
    margin-bottom: 5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: var(--products-text) !important;
}

.qty-pad-promotion-heading strong {
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

.qty-pad-promotion-star {
    color: #f59e0b !important;
    font-size: 12px !important;
}

.qty-pad-promotion-tier-list {
    display: grid !important;
    gap: 4px !important;
    max-height: 108px !important;
    overflow-y: auto !important;
}

.qty-pad-promotion-tier {
    width: 100% !important;
    min-height: 31px !important;
    padding: 4px 6px 4px 8px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 28px !important;
    align-items: center !important;
    gap: 5px !important;
    border-radius: 8px !important;
    border: 1px solid color-mix(in srgb, #f59e0b 28%, var(--products-border)) !important;
    background: var(--products-card) !important;
    color: var(--products-text) !important;
    cursor: pointer !important;
    text-align: left !important;
}

.qty-pad-promotion-tier span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    font-weight: 900 !important;
}

.qty-pad-promotion-tier b {
    width: 28px !important;
    height: 23px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 7px !important;
    background: #f59e0b !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 950 !important;
}

.qty-pad-promotion-tier:hover {
    border-color: #f59e0b !important;
    background: color-mix(in srgb, #f59e0b 12%, var(--products-card)) !important;
}

/* The anchored picker should not lock the page like the old full-screen modal did. */
body.qty-pad-open {
    overflow: auto !important;
}

@media (max-width: 760px) {
    .qty-pad-dialog {
        width: 220px !important;
        max-width: calc(100vw - 12px) !important;
        max-height: min(440px, calc(100dvh - 12px)) !important;
        overflow: hidden !important;
    }

    .qty-pad-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        max-height: 292px !important;
    }
}


/* 2026-09-20: Site.Master owns the only page-level loader. */
#ProductsPageTransitionLoader,
.products-page-transition-loader {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* =========================================================
   VIEW MODE ICON SAFETY PATCH
   Use SVG only; no font/Unicode symbols in the view selector.
========================================================= */
.products-view-current-icon,
.products-view-menu-caret {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    line-height: 0 !important;
    font-size: 0 !important;
}
.products-view-current-icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}
.products-view-menu-caret svg {
    width: 13px !important;
    height: 13px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    transition: transform .16s ease !important;
}
.products-view-menu.open .products-view-menu-caret svg {
    transform: rotate(180deg) !important;
}


/* =========================================================
   SHOWCASE STRIP + STICKY SEARCH RESTORE
   2026-09-20
   - group description/name uses two lines
   - product count is a circular number-only badge
   - search/view/filter toolbar remains fixed at the top
========================================================= */

/* Keep the product toolbar pinned below the master header in EVERY product view. */
.products-search-option-bar {
    position: sticky !important;
    top: var(--site-header-height, 70px) !important;
    z-index: 1450 !important;
    margin-top: 0 !important;
}

body.header-scrolled .products-search-option-bar {
    top: var(--site-header-small-height, 58px) !important;
}

/* Showcase previously forced this toolbar back into normal flow. Restore the approved sticky behavior. */
body.site-master-body:has(.products-grid.showcase-view) .products-search-option-bar,
body.header-scrolled:has(.products-grid.showcase-view) .products-search-option-bar {
    position: sticky !important;
    top: var(--site-header-height, 70px) !important;
    z-index: 1450 !important;
    flex: 0 0 auto !important;
}

body.header-scrolled:has(.products-grid.showcase-view) .products-search-option-bar {
    top: var(--site-header-small-height, 58px) !important;
}

/* The strip stays directly under the sticky toolbar, never underneath it. */
body.site-master-body:has(.products-grid.showcase-view) .showcase-group-rail {
    position: relative !important;
    top: auto !important;
    z-index: 10 !important;
    margin-top: 0 !important;
}

/* Showcase group cards: keep the thumbnail collage, allow two text lines, and use a round count badge. */
.showcase-group-tab {
    flex: 0 0 205px !important;
    min-width: 205px !important;
    min-height: 78px !important;
    grid-template-columns: 66px minmax(0, 1fr) 29px !important;
    gap: 8px !important;
    padding: 8px !important;
}

.showcase-group-tab-images {
    width: 66px !important;
    height: 58px !important;
}

.showcase-group-tab-copy {
    min-width: 0 !important;
    align-self: center !important;
}

.showcase-group-tab-copy strong {
    display: -webkit-box !important;
    min-width: 0 !important;
    max-height: 31px !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-overflow: ellipsis !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: 11.5px !important;
    line-height: 1.32 !important;
    font-weight: 950 !important;
}

/* Old item-count subtitle is intentionally removed in current JS; hide cached markup too. */
.showcase-group-tab-copy small {
    display: none !important;
}

.showcase-group-tab-count {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    justify-self: end !important;
    padding: 0 !important;
    border: 1px solid color-mix(in srgb, var(--products-accent) 30%, var(--products-border)) !important;
    background: color-mix(in srgb, var(--products-accent) 11%, var(--products-card)) !important;
    color: var(--products-accent) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.38) !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    font-variant-numeric: tabular-nums !important;
}

.showcase-group-tab.is-active .showcase-group-tab-count {
    background: var(--products-accent) !important;
    border-color: var(--products-accent) !important;
    color: #fff !important;
    box-shadow: 0 6px 15px color-mix(in srgb, var(--products-accent) 24%, transparent) !important;
}

@media (max-width: 1024px) {
    .products-search-option-bar,
    body.site-master-body:has(.products-grid.showcase-view) .products-search-option-bar {
        top: var(--site-header-height, 62px) !important;
    }

    body.header-scrolled .products-search-option-bar,
    body.header-scrolled:has(.products-grid.showcase-view) .products-search-option-bar {
        top: var(--site-header-small-height, 56px) !important;
    }

    .showcase-group-tab {
        flex-basis: 194px !important;
        min-width: 194px !important;
        grid-template-columns: 62px minmax(0, 1fr) 28px !important;
    }

    .showcase-group-tab-images {
        width: 62px !important;
        height: 56px !important;
    }
}

@media (max-width: 680px) {
    .products-search-option-bar,
    body.site-master-body:has(.products-grid.showcase-view) .products-search-option-bar,
    body.header-scrolled .products-search-option-bar,
    body.header-scrolled:has(.products-grid.showcase-view) .products-search-option-bar {
        top: var(--site-header-small-height, 58px) !important;
    }

    .showcase-group-tab {
        flex-basis: 184px !important;
        min-width: 184px !important;
        min-height: 74px !important;
        grid-template-columns: 58px minmax(0, 1fr) 27px !important;
        gap: 7px !important;
    }

    .showcase-group-tab-images {
        width: 58px !important;
        height: 54px !important;
    }

    .showcase-group-tab-count {
        width: 27px !important;
        height: 27px !important;
        min-width: 27px !important;
        font-size: 10px !important;
    }
}


/* =========================================================
   SHOWCASE COMPACT WORKSPACE + VISIBLE STRIP FIX
   2026-09-20 showcase17_compact_strip
   - no giant empty image area on desktop
   - product type strip always fully visible below search
   - search remains at the top of the Showcase workspace
   - selected product information returns beside the image
   - two-line descriptions
   - number-only circular counts
========================================================= */

/* Showcase is a fixed app workspace, so the toolbar does not need to float over
   the strip. Keeping it in normal flex flow makes it stay at the top while also
   reserving its real height, preventing the strip from being covered. */
body.site-master-body:has(#ProductsGrid.showcase-view) .products-search-option-bar,
body.header-scrolled:has(#ProductsGrid.showcase-view) .products-search-option-bar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 80 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

body.site-master-body:has(#ProductsGrid.showcase-view) .products-page {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.site-master-body:has(#ProductsGrid.showcase-view) .products-shell {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 6px 6px !important;
}

body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-browser {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 4px 6px 6px !important;
    border-radius: 0 0 20px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Product-type strip: always reserve its full height under the search bar. */
body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-group-rail {
    position: relative !important;
    top: auto !important;
    z-index: 20 !important;
    flex: 0 0 82px !important;
    width: 100% !important;
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
    margin: 0 0 6px !important;
    padding: 4px 2px 6px !important;
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: transparent !important;
    scroll-snap-type: x proximity !important;
}

.showcase-group-tab {
    flex: 0 0 202px !important;
    min-width: 202px !important;
    width: 202px !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    grid-template-columns: 58px minmax(0,1fr) 28px !important;
    gap: 7px !important;
    padding: 6px 7px !important;
    border-radius: 15px !important;
}

.showcase-group-tab-images {
    width: 58px !important;
    height: 52px !important;
}

.showcase-group-tab-copy strong {
    display: -webkit-box !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-overflow: ellipsis !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    max-height: 30px !important;
    font-size: 11px !important;
    line-height: 1.32 !important;
}

.showcase-group-tab-count,
.showcase-pane-head > span {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: color-mix(in srgb, var(--products-accent) 11%, var(--products-card)) !important;
    color: var(--products-accent) !important;
    border: 1px solid color-mix(in srgb, var(--products-accent) 28%, var(--products-border)) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    font-variant-numeric: tabular-nums !important;
}

.showcase-group-tab.is-active .showcase-group-tab-count {
    background: var(--products-accent) !important;
    color: #fff !important;
    border-color: var(--products-accent) !important;
}

/* Main area uses the remaining viewport without forcing a huge empty hero image. */
.showcase-workspace {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: 300px minmax(0,1fr) !important;
    gap: 8px !important;
    overflow: hidden !important;
}

.showcase-items-pane,
.showcase-detail {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
}

.showcase-pane-head {
    min-height: 48px !important;
    height: 48px !important;
    padding: 8px 10px !important;
}

.showcase-pane-head strong {
    font-size: 12px !important;
}

.showcase-items-list {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 6px !important;
    overflow-y: auto !important;
}

.showcase-item {
    min-height: 64px !important;
    margin-bottom: 5px !important;
    grid-template-columns: 52px minmax(0,1fr) 18px !important;
    gap: 7px !important;
    padding: 6px !important;
}

.showcase-item-image {
    width: 52px !important;
    height: 52px !important;
}

/* Desktop selected-product layout: image LEFT, information RIGHT. */
.showcase-detail {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(360px, 1.08fr) minmax(390px, .92fr) !important;
    grid-template-rows: minmax(0,1fr) !important;
    gap: 0 !important;
    overflow: hidden !important;
}

.showcase-detail-image {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at center, color-mix(in srgb, var(--products-accent) 4%, #fff), #fff 62%) !important;
    border-right: 1px solid var(--products-border) !important;
}

.showcase-detail-image img {
    width: auto !important;
    height: auto !important;
    max-width: min(84%, 560px) !important;
    max-height: min(82%, 500px) !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.showcase-detail-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 18px 18px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0 !important;
    overflow-y: auto !important;
    border-top: 0 !important;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--products-accent) 5%, var(--products-card2)),
            var(--products-card2)) !important;
}

.showcase-detail-badges {
    position: static !important;
    min-height: 0 !important;
    margin: 0 0 7px !important;
}

.showcase-detail-meta {
    margin: 0 !important;
    font-size: 9.5px !important;
}

.showcase-detail-copy h3 {
    margin: 5px 0 7px !important;
    font-size: clamp(22px, 2.1vw, 31px) !important;
    line-height: 1.07 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.showcase-detail-description {
    min-height: 0 !important;
    max-height: 36px !important;
    margin: 0 0 11px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
}

.showcase-detail-facts {
    width: 100% !important;
    margin: 0 0 12px !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 7px !important;
}

.showcase-detail-facts > span {
    min-height: 50px !important;
    padding: 7px 8px !important;
}

.showcase-detail-bottom {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-right: 56px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.showcase-detail-price {
    justify-content: flex-start !important;
}

.showcase-detail-price strong {
    font-size: 22px !important;
}

.showcase-detail-qty {
    width: min(250px, 52%) !important;
    min-width: 205px !important;
    margin: 0 !important;
}

/* Tablet: preserve the compact side-by-side layout where practical. */
@media (min-width: 761px) and (max-width: 1180px) {
    .showcase-workspace {
        grid-template-columns: 260px minmax(0,1fr) !important;
    }

    .showcase-detail {
        grid-template-columns: minmax(280px, .95fr) minmax(330px, 1.05fr) !important;
    }

    .showcase-detail-copy {
        padding: 14px !important;
    }

    .showcase-detail-image {
        padding: 12px !important;
    }

    .showcase-detail-bottom {
        padding-right: 48px !important;
    }
}

/* Phone: keep the existing stacked layout, but keep the strip visible and compact. */
@media (max-width: 760px) {
    body.site-master-body:has(#ProductsGrid.showcase-view) .products-search-option-bar,
    body.header-scrolled:has(#ProductsGrid.showcase-view) .products-search-option-bar {
        position: relative !important;
        top: auto !important;
    }

    body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-group-rail {
        flex-basis: 76px !important;
        height: 76px !important;
        min-height: 76px !important;
        max-height: 76px !important;
    }

    .showcase-group-tab {
        flex-basis: 184px !important;
        min-width: 184px !important;
        width: 184px !important;
        height: 65px !important;
        min-height: 65px !important;
        max-height: 65px !important;
        grid-template-columns: 52px minmax(0,1fr) 26px !important;
    }

    .showcase-group-tab-images {
        width: 52px !important;
        height: 48px !important;
    }

    .showcase-group-tab-count,
    .showcase-pane-head > span {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
    }

    .showcase-workspace {
        grid-template-columns: 1fr !important;
        overflow-y: auto !important;
    }

    .showcase-items-pane,
    .showcase-detail {
        height: auto !important;
        max-height: none !important;
    }

    .showcase-detail {
        grid-template-columns: 1fr !important;
        grid-template-rows: 220px auto !important;
    }

    .showcase-detail-image {
        grid-column: 1 !important;
        grid-row: 1 !important;
        height: 220px !important;
        min-height: 220px !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--products-border) !important;
    }

    .showcase-detail-image img {
        max-width: 88% !important;
        max-height: 195px !important;
    }

    .showcase-detail-copy {
        grid-column: 1 !important;
        grid-row: 2 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 12px !important;
    }

    .showcase-detail-bottom {
        padding-right: 48px !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .showcase-detail-qty {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* =========================================================
   SHOWCASE FINAL LAYOUT - STICKY SEARCH + BOTTOM DETAILS
   2026-09-20 showcase18_bottom_details
   - search toolbar stays visible directly below Site.Master
   - category strip stays below the search toolbar
   - left product list is wider
   - selected item image uses the main area
   - description/details are docked along the bottom
========================================================= */

/* Keep the product search/view/filter toolbar visible below the fixed Site.Master header.
   Sticky keeps its real height in the layout, so the Showcase strip cannot slide behind it. */
body.site-master-body:has(#ProductsGrid.showcase-view) .products-search-option-bar {
    position: sticky !important;
    top: var(--site-header-height, 70px) !important;
    left: auto !important;
    right: auto !important;
    z-index: 1490 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--products-accent) 9%, var(--products-card)),
            color-mix(in srgb, var(--products-card) 96%, transparent)) !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.10) !important;
    backdrop-filter: blur(18px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}

body.header-scrolled:has(#ProductsGrid.showcase-view) .products-search-option-bar {
    position: sticky !important;
    top: var(--site-header-small-height, 58px) !important;
}

/* The page stays below Site.Master and the search bar consumes real layout space. */
body.site-master-body:has(#ProductsGrid.showcase-view) .products-page {
    position: relative !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Category strip follows the search bar in normal flow. */
body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-group-rail {
    position: relative !important;
    top: auto !important;
    z-index: 20 !important;
    margin-top: 0 !important;
}

/* Give the left product browser more room. */
body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-workspace {
    grid-template-columns: clamp(340px, 22vw, 390px) minmax(0, 1fr) !important;
    gap: 8px !important;
}

body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-items-pane {
    min-width: 340px !important;
}

/* Selected product: image above, all information in one compact bottom dock. */
body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-detail {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-detail-image {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--products-border) !important;
    background: #fff !important;
}

body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-detail-image img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 88% !important;
    max-height: 90% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
}

body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-detail-copy {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 142px !important;
    max-height: 168px !important;
    padding: 12px 14px !important;
    display: grid !important;
    grid-template-columns: minmax(260px, 1.35fr) minmax(330px, 1.45fr) minmax(220px, .75fr) !important;
    grid-template-areas:
        "meta facts controls"
        "name facts controls"
        "desc facts controls" !important;
    column-gap: 16px !important;
    row-gap: 3px !important;
    align-items: center !important;
    overflow: hidden !important;
    border-top: 0 !important;
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--products-accent) 5%, var(--products-card2)),
            var(--products-card2)) !important;
}

body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-detail-badges {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    z-index: 4 !important;
    min-height: 0 !important;
    margin: 0 !important;
}

body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-detail-meta {
    grid-area: meta !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 9.5px !important;
}

body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-detail-copy h3 {
    grid-area: name !important;
    min-width: 0 !important;
    margin: 2px 0 !important;
    font-size: clamp(19px, 1.7vw, 27px) !important;
    line-height: 1.06 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-detail-description {
    grid-area: desc !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 34px !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
}

body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-detail-facts {
    grid-area: facts !important;
    width: 100% !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-detail-facts > span {
    min-height: 52px !important;
    padding: 8px !important;
}

body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-detail-bottom {
    grid-area: controls !important;
    min-width: 220px !important;
    margin: 0 !important;
    padding-right: 56px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 8px !important;
}

body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-detail-price {
    justify-content: flex-end !important;
}

body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-detail-price strong {
    font-size: 23px !important;
}

body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-detail-qty {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

@media (min-width: 761px) and (max-width: 1180px) {
    body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-workspace {
        grid-template-columns: 305px minmax(0, 1fr) !important;
    }

    body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-items-pane {
        min-width: 305px !important;
    }

    body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-detail-copy {
        min-height: 154px !important;
        max-height: 184px !important;
        grid-template-columns: minmax(190px, 1.1fr) minmax(250px, 1.25fr) 205px !important;
        column-gap: 10px !important;
        padding: 10px !important;
    }
}

@media (max-width: 760px) {
    body.site-master-body:has(#ProductsGrid.showcase-view) .products-search-option-bar,
    body.header-scrolled:has(#ProductsGrid.showcase-view) .products-search-option-bar {
        position: sticky !important;
        top: var(--site-header-small-height, 58px) !important;
        z-index: 1490 !important;
    }

    body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-workspace {
        grid-template-columns: 1fr !important;
        overflow-y: auto !important;
    }

    body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-items-pane {
        min-width: 0 !important;
    }

    body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-detail {
        height: auto !important;
        max-height: none !important;
        grid-template-rows: 230px auto !important;
    }

    body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-detail-image {
        height: 230px !important;
        min-height: 230px !important;
        max-height: 230px !important;
        padding: 9px !important;
    }

    body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-detail-copy {
        min-height: 0 !important;
        max-height: none !important;
        padding: 12px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "meta"
            "name"
            "desc"
            "facts"
            "controls" !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-detail-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-detail-bottom {
        min-width: 0 !important;
        padding-right: 50px !important;
    }

    body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-detail-price {
        justify-content: flex-start !important;
    }
}

/* =========================================================
   SHOWCASE 20 - ISOLATED TOP TOOLBAR HOTFIX
   2026-09-20
   IMPORTANT:
   - This patch applies ONLY to Showcase view.
   - Grid / Cards / Rows keep their original approved sticky behavior.
   - Do not reserve another Site.Master header height inside Products.
========================================================= */

/* Showcase is already contained in the viewport-height Products workspace.
   Keep the toolbar in Showcase's own top row with NO second header offset. */
body.site-master-body:has(#ProductsGrid.showcase-view) .products-search-option-bar,
body.header-scrolled:has(#ProductsGrid.showcase-view) .products-search-option-bar {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    z-index: 1490 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 9px 12px !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-radius: 0 0 16px 16px !important;
}

/* Never add a second toolbar/header spacer to Showcase. */
body.site-master-body:has(#ProductsGrid.showcase-view) .products-page {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* The category rail stays in normal flow immediately below the toolbar. */
body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-browser {
    padding-top: 0 !important;
}

body.site-master-body:has(#ProductsGrid.showcase-view) .showcase-group-rail {
    position: relative !important;
    top: auto !important;
    margin-top: 0 !important;
}

@media (max-width: 760px) {
    body.site-master-body:has(#ProductsGrid.showcase-view) .products-search-option-bar,
    body.header-scrolled:has(#ProductsGrid.showcase-view) .products-search-option-bar {
        top: 0 !important;
        padding: 7px 8px !important;
        border-radius: 0 0 14px 14px !important;
    }
}

/* =========================================================
   SHOWCASE 21 - KEEP SEARCH TOOLBAR BELOW SITE.MASTER
   2026-09-20
   Showcase-only correction. Grid / Cards / Rows are untouched.
========================================================= */
body.site-master-body:has(#ProductsGrid.showcase-view) .products-search-option-bar {
    position: sticky !important;
    top: var(--site-header-height, 70px) !important;
    z-index: 1490 !important;
}

body.header-scrolled:has(#ProductsGrid.showcase-view) .products-search-option-bar {
    top: var(--site-header-small-height, 58px) !important;
}

@media (max-width: 760px) {
    body.site-master-body:has(#ProductsGrid.showcase-view) .products-search-option-bar {
        top: var(--site-header-height, 62px) !important;
    }

    body.header-scrolled:has(#ProductsGrid.showcase-view) .products-search-option-bar {
        top: var(--site-header-small-height, 56px) !important;
    }
}

/* =========================================================
   SHOWCASE 22 - DEFINITIVE MASTER/TOOLBAR LAYOUT
   2026-09-20
   IMPORTANT:
   - Showcase only. Grid / Cards / Rows are not changed here.
   - Site.Master already reserves the fixed header with body padding-top.
   - Therefore Showcase must NOT add the header height again with sticky top.
   - Lock the outer page and let only the Showcase panes scroll.
========================================================= */
body.site-master-body.products-showcase-mode {
    overflow: hidden !important;
}

body.site-master-body.products-showcase-mode .page-content-wrapper {
    height: calc(100dvh - var(--site-header-height, 70px) - var(--site-footer-height, 44px)) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--site-header-height, 70px) - var(--site-footer-height, 44px)) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

body.site-master-body.products-showcase-mode .products-page {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Critical fix: this bar lives INSIDE content that is already below Site.Master.
   Keep it in normal flex flow instead of applying another 70px sticky offset. */
body.site-master-body.products-showcase-mode .products-search-option-bar,
body.site-master-body.products-showcase-mode.header-scrolled .products-search-option-bar {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 1490 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
}

body.site-master-body.products-showcase-mode .products-shell {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden !important;
}

body.site-master-body.products-showcase-mode #ProductsGrid.showcase-view,
body.site-master-body.products-showcase-mode .showcase-browser {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

body.site-master-body.products-showcase-mode .showcase-group-rail {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    flex: 0 0 82px !important;
    margin-top: 0 !important;
}

@media (max-width: 1024px) {
    body.site-master-body.products-showcase-mode .page-content-wrapper {
        height: calc(100dvh - var(--site-header-height, 62px) - var(--site-mobile-bottom-height, 72px)) !important;
        max-height: calc(100dvh - var(--site-header-height, 62px) - var(--site-mobile-bottom-height, 72px)) !important;
    }
}

@media (max-width: 760px) {
    body.site-master-body.products-showcase-mode .products-search-option-bar,
    body.site-master-body.products-showcase-mode.header-scrolled .products-search-option-bar {
        position: relative !important;
        top: auto !important;
        inset: auto !important;
    }

    body.site-master-body.products-showcase-mode .showcase-group-rail {
        flex-basis: 76px !important;
    }
}

/* =========================================================
   SHOWCASE 23 - SEARCH / PRODUCT-TYPE STRIP ROW LOCK
   2026-09-20
   Showcase only.
   The toolbar and product-type rail are separate layout rows so
   neither can paint on top of the other.
========================================================= */
body.site-master-body.products-showcase-mode .products-page {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-content: stretch !important;
    gap: 0 !important;
}

body.site-master-body.products-showcase-mode .products-search-option-bar,
body.site-master-body.products-showcase-mode.header-scrolled .products-search-option-bar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 60 !important;
}

body.site-master-body.products-showcase-mode .products-shell {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 6px 6px !important;
    overflow: hidden !important;
}

body.site-master-body.products-showcase-mode #ProductsGrid.showcase-view {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body.site-master-body.products-showcase-mode .showcase-browser {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 4px 0 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 82px minmax(0, 1fr) !important;
    row-gap: 6px !important;
    overflow: hidden !important;
}

body.site-master-body.products-showcase-mode .showcase-group-rail {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
    margin: 0 !important;
    padding: 4px 2px 6px !important;
    z-index: 10 !important;
    transform: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

body.site-master-body.products-showcase-mode .showcase-workspace {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
}

@media (max-width: 760px) {
    body.site-master-body.products-showcase-mode .showcase-browser {
        grid-template-rows: 76px minmax(0, 1fr) !important;
    }

    body.site-master-body.products-showcase-mode .showcase-group-rail {
        height: 76px !important;
        min-height: 76px !important;
        max-height: 76px !important;
    }
}

/* =========================================================
   SHOWCASE 24 - MOVE SEARCH BAR UP ONLY
   2026-09-20
   Final override with higher specificity than the older
   #ProductsGrid :has() sticky rules. Showcase only.
========================================================= */
body.site-master-body.products-showcase-mode:has(#ProductsGrid.showcase-view) .products-search-option-bar,
body.site-master-body.products-showcase-mode.header-scrolled:has(#ProductsGrid.showcase-view) .products-search-option-bar {
    position: relative !important;
    top: 0 !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin-top: 0 !important;
    transform: none !important;
    z-index: 1490 !important;
}

/* Do not create any extra top spacer in Showcase. */
body.site-master-body.products-showcase-mode:has(#ProductsGrid.showcase-view) .products-page,
body.site-master-body.products-showcase-mode.header-scrolled:has(#ProductsGrid.showcase-view) .products-page {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Keep the product-type strip immediately AFTER the search row. */
body.site-master-body.products-showcase-mode:has(#ProductsGrid.showcase-view) .showcase-browser {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.site-master-body.products-showcase-mode:has(#ProductsGrid.showcase-view) .showcase-group-rail {
    position: relative !important;
    top: 0 !important;
    margin-top: 0 !important;
}


/* =========================================================
   LOCAL PRODUCT PANELS - ISOLATED FROM SITE.MASTER
   2026-09-20 localpanels_fix01
   ========================================================= */

/* Product filter is a page-owned drawer. Never let generic Site.Master
   drawer styles or old modal rules win over it. */
#CategoriesModal.products-filter-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147482000 !important;
    display: none !important;
    overflow: hidden !important;
    isolation: isolate !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#CategoriesModal.products-filter-overlay.open,
#CategoriesModal.products-filter-overlay.is-open,
#CategoriesModal.products-filter-overlay[aria-hidden="false"] {
    display: block !important;
}

#CategoriesModal > .products-filter-backdrop {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    background: rgba(15, 23, 42, .52) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#CategoriesModal > .products-filter-modal {
    position: absolute !important;
    top: calc(var(--site-header-height, 70px) + 10px) !important;
    right: 10px !important;
    bottom: calc(var(--site-footer-height, 44px) + 10px) !important;
    left: auto !important;
    z-index: 2 !important;
    width: min(500px, calc(100vw - 20px)) !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    border: 1px solid color-mix(in srgb, var(--products-accent) 28%, var(--products-border)) !important;
    background: var(--products-card) !important;
    color: var(--products-text) !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.36) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#CategoriesModal .products-filter-head,
#CategoriesModal .products-filter-scroll,
#CategoriesModal .products-filter-actions,
#CategoriesModal .filter-field,
#CategoriesModal .products-filter-checks {
    opacity: 1 !important;
    visibility: visible !important;
}

#CategoriesModal .products-filter-head {
    display: flex !important;
    position: relative !important;
    z-index: 4 !important;
}

#CategoriesModal .products-filter-scroll {
    display: grid !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#CategoriesModal .products-filter-actions {
    display: grid !important;
    position: relative !important;
    z-index: 4 !important;
}

/* Item Info is also page-owned. It intentionally does NOT use .app-drawer,
   so Site.Master's iframe/cart/customer/vendor drawer controller cannot touch it. */
#ItemDrawerOverlay.products-item-drawer-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147482100 !important;
    display: block !important;
    background: rgba(15, 23, 42, .52) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .18s ease, visibility .18s ease !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#ItemDrawerOverlay.products-item-drawer-overlay.is-open,
#ItemDrawerOverlay.products-item-drawer-overlay.open,
#ItemDrawerOverlay.products-item-drawer-overlay[aria-hidden="false"] {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#ItemDrawer.products-item-drawer {
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    left: auto !important;
    z-index: 2147482120 !important;
    width: min(520px, calc(100vw - 20px)) !important;
    height: calc(100vh - 20px) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    background: var(--products-card) !important;
    color: var(--products-text) !important;
    border: 1px solid color-mix(in srgb, var(--products-accent) 24%, var(--products-border)) !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.38) !important;
    transform: translateX(calc(100% + 30px)) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transition: transform .24s cubic-bezier(.22,1,.36,1) !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#ItemDrawer.products-item-drawer.is-open,
#ItemDrawer.products-item-drawer.open,
#ItemDrawer.products-item-drawer[aria-hidden="false"] {
    transform: translateX(0) !important;
    pointer-events: auto !important;
}

#ItemDrawer.products-item-drawer > .drawer-head {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#ItemDrawer.products-item-drawer > .drawer-body {
    display: block !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#ItemDrawer.products-item-drawer > .drawer-footer {
    display: block;
    opacity: 1 !important;
    visibility: visible !important;
}

body.products-filter-open,
body.products-item-drawer-open {
    overflow: hidden !important;
}

@media (max-width: 700px) {
    #CategoriesModal > .products-filter-modal {
        top: calc(var(--site-header-small-height, 58px) + 6px) !important;
        right: 6px !important;
        bottom: calc(var(--site-mobile-bottom-height, 72px) + 6px) !important;
        width: calc(100vw - 12px) !important;
        border-radius: 20px !important;
    }

    #ItemDrawer.products-item-drawer {
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        border-radius: 0 !important;
    }
}

/* =========================================================
   PRODUCT FILTER DRAWER - TOP + ACTION BUTTON FIX
   2026-09-20 filterdrawer_top_buttons02
   Only affects the Products filter drawer.
========================================================= */
#CategoriesModal.products-filter-overlay > .products-filter-modal {
    top: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    left: auto !important;
    height: auto !important;
    max-height: none !important;
    width: min(500px, calc(100vw - 20px)) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
    margin: 0 !important;
}

#CategoriesModal.products-filter-overlay .products-filter-head {
    grid-row: 1 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

#CategoriesModal.products-filter-overlay .products-filter-scroll {
    grid-row: 2 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 16px !important;
}

#CategoriesModal.products-filter-overlay .products-filter-actions {
    grid-row: 3 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    z-index: 20 !important;
    width: 100% !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 11px 14px 13px !important;
    display: grid !important;
    grid-template-columns: minmax(0, .8fr) minmax(0, .9fr) minmax(130px, 1.35fr) !important;
    gap: 9px !important;
    align-items: stretch !important;
    border-top: 1px solid var(--products-border) !important;
    background: var(--products-card) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
}

#CategoriesModal.products-filter-overlay .products-filter-actions > button,
#CategoriesModal.products-filter-overlay #ClearFiltersBtn,
#CategoriesModal.products-filter-overlay #ClearAllFiltersBtn,
#CategoriesModal.products-filter-overlay #ApplyFiltersBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#CategoriesModal.products-filter-overlay #ApplyFiltersBtn {
    grid-column: auto !important;
}

@media (max-width: 700px) {
    #CategoriesModal.products-filter-overlay > .products-filter-modal {
        top: 6px !important;
        right: 6px !important;
        bottom: 6px !important;
        width: calc(100vw - 12px) !important;
        border-radius: 20px !important;
    }

    #CategoriesModal.products-filter-overlay .products-filter-actions {
        grid-template-columns: 1fr 1fr !important;
        min-height: 112px !important;
    }

    #CategoriesModal.products-filter-overlay #ApplyFiltersBtn {
        grid-column: 1 / -1 !important;
    }
}



/* =========================================================
   PRODUCTS FLOATING UI - VIEWPORT/STABLE FINAL FIX
   2026-09-20 floatingui_viewport01
   The JS portals these page-owned panels directly under <body>.
   These rules intentionally override every older filter/drawer/pad patch.
========================================================= */

/* ---------- FILTER DRAWER ---------- */
#CategoriesModal.products-filter-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147482200 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

#CategoriesModal.products-filter-overlay > .products-filter-backdrop,
#CategoriesModal.products-filter-overlay > .products-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
}

#CategoriesModal.products-filter-overlay > .products-filter-modal {
    position: fixed !important;
    top: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    left: auto !important;
    z-index: 2 !important;
    width: min(520px, calc(100vw - 16px)) !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
    border-radius: 24px !important;
}

#CategoriesModal.products-filter-overlay .products-filter-head {
    grid-row: 1 !important;
    position: relative !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

/* Return the filter body to the stable one-column layout. */
#CategoriesModal.products-filter-overlay .products-filter-scroll {
    grid-row: 2 !important;
    min-height: 0 !important;
    width: 100% !important;
    padding: 14px 16px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable !important;
}

#CategoriesModal.products-filter-overlay .filter-field,
#CategoriesModal.products-filter-overlay .filter-field-select,
#CategoriesModal.products-filter-overlay .pfm-dropdown,
#CategoriesModal.products-filter-overlay .filter-dropdown {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Dropdown lists MUST stay attached to their own field inside the drawer. */
#CategoriesModal.products-filter-overlay .pfm-dropdown > .pfm-dropdown-panel,
#CategoriesModal.products-filter-overlay .filter-dropdown > .filter-dropdown-panel {
    display: none !important;
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: min(420px, 48vh) !important;
    margin: 8px 0 0 !important;
    padding: 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
}

#CategoriesModal.products-filter-overlay .pfm-dropdown.open > .pfm-dropdown-panel,
#CategoriesModal.products-filter-overlay .filter-dropdown.open > .filter-dropdown-panel {
    display: block !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
}

#CategoriesModal.products-filter-overlay .products-filter-checks {
    position: static !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 2px 0 0 !important;
    padding: 12px 0 0 !important;
}

#CategoriesModal.products-filter-overlay .products-filter-actions {
    grid-row: 3 !important;
    position: relative !important;
    inset: auto !important;
    z-index: 20 !important;
    width: 100% !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 11px 14px 13px !important;
    display: grid !important;
    grid-template-columns: .8fr .9fr 1.35fr !important;
    gap: 9px !important;
    align-items: stretch !important;
    border-top: 1px solid var(--products-border) !important;
    background: var(--products-card) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#CategoriesModal.products-filter-overlay .products-filter-actions > button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#CategoriesModal.products-filter-overlay #ApplyFiltersBtn {
    grid-column: auto !important;
}

/* ---------- ITEM INFO DRAWER ---------- */
#ItemDrawerOverlay.products-item-drawer-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147482300 !important;
}

#ItemDrawer.products-item-drawer {
    position: fixed !important;
    top: calc(var(--site-header-height, 70px) + 8px) !important;
    right: 8px !important;
    bottom: calc(var(--site-footer-height, 44px) + 8px) !important;
    left: auto !important;
    z-index: 2147482320 !important;
    width: min(520px, calc(100vw - 16px)) !important;
    height: auto !important;
    max-height: none !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
}

body.header-scrolled #ItemDrawer.products-item-drawer {
    top: calc(var(--site-header-small-height, 58px) + 8px) !important;
}

#ItemDrawer.products-item-drawer > .drawer-body {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 18px !important;
    scrollbar-gutter: stable !important;
}

#ItemDrawer.products-item-drawer > .drawer-footer {
    position: relative !important;
    inset: auto !important;
    z-index: 10 !important;
    display: block !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    background: var(--products-card) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ---------- QUANTITY PAD ---------- */
#QuantityPadModal.qty-pad-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
}

#QuantityPadModal.qty-pad-modal[hidden] {
    display: none !important;
}

#QuantityPadModal.qty-pad-modal.is-open:not([hidden]) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#QuantityPadModal .qty-pad-backdrop {
    position: fixed !important;
    inset: 0 !important;
}

#QuantityPadModal .qty-pad-dialog {
    position: fixed !important;
    max-height: min(460px, calc(100dvh - var(--site-footer-height, 44px) - 14px)) !important;
}

@media (max-width: 700px) {
    #CategoriesModal.products-filter-overlay > .products-filter-modal {
        top: 6px !important;
        right: 6px !important;
        bottom: 6px !important;
        width: calc(100vw - 12px) !important;
        border-radius: 20px !important;
    }

    #CategoriesModal.products-filter-overlay .products-filter-checks {
        grid-template-columns: 1fr !important;
    }

    #CategoriesModal.products-filter-overlay .products-filter-actions {
        min-height: 112px !important;
        grid-template-columns: 1fr 1fr !important;
    }

    #CategoriesModal.products-filter-overlay #ApplyFiltersBtn {
        grid-column: 1 / -1 !important;
    }

    #ItemDrawer.products-item-drawer {
        top: calc(var(--site-header-small-height, 58px) + 6px) !important;
        right: 6px !important;
        bottom: calc(var(--site-mobile-bottom-height, 72px) + 6px) !important;
        width: calc(100vw - 12px) !important;
        border-radius: 20px !important;
    }
}


/* Simple cards: generous photo, compact details and a single row of order controls. */
.product-simple-upc,.product-simple-price{display:none}
.products-grid.simple-view{grid-template-columns:repeat(auto-fill,minmax(min(245px,100%),1fr));gap:18px}
.products-grid.simple-view .product-card{display:flex;flex-direction:column;align-self:start;border-radius:18px;padding:0;background:var(--products-card);contain-intrinsic-size:245px 450px}
.products-grid.simple-view .product-image-box{display:block;flex:none;width:100%;height:245px;min-height:245px;margin:0;border-radius:0;background:#fff;position:relative}
.products-grid.simple-view .card-img{display:block;width:100%;height:100%;max-height:none;object-fit:contain;padding:18px;box-sizing:border-box;transform:none}
.products-grid.simple-view .product-image-box>.price-badge{display:none!important}
.products-grid.simple-view .product-info-box{display:flex;flex:none;flex-direction:column;padding:12px;gap:10px;min-height:0}
.products-grid.simple-view .product-main-info{display:flex;flex-direction:column;justify-content:flex-start;gap:4px;min-width:0}
.products-grid.simple-view .product-main-info h3{font-size:1rem;line-height:1.3;font-weight:750;margin:0;min-height:0;max-height:none;-webkit-line-clamp:unset;overflow:visible}
.products-grid.simple-view .arabic-line{margin:0;min-height:0;max-height:none;line-height:1.3;color:var(--products-muted)}
.products-grid.simple-view .arabic-line:empty{display:none}
.products-grid.simple-view .product-simple-price{display:block;color:var(--wa-accent-deep,var(--products-accent));font-size:1.2rem;font-weight:800;line-height:1.3;margin:2px 0}
.products-grid.simple-view .product-simple-price small{display:inline-block;white-space:nowrap;font-size:.8rem;font-weight:600;color:var(--products-muted)}
.products-grid.simple-view .product-simple-price del{font-size:.88rem;font-weight:500;color:var(--products-muted)}
.products-grid.simple-view .product-simple-upc{display:block;font-size:.8rem;line-height:1.25;color:var(--products-muted);overflow-wrap:anywhere}
.products-grid.simple-view .product-meta.compact-line{display:none!important}
.products-grid.simple-view .product-quick-row{margin:2px 0 0;display:flex;flex-wrap:wrap;gap:4px}
/* Reset the legacy vertical action layout. Keep zero/positive-qty visibility rules. */
.products-grid.simple-view .product-actions-box{margin:0;display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:8px;width:100%;min-width:0}
.products-grid.simple-view .product-order-controls{flex:1 1 0;min-width:0}
.products-grid.simple-view .product-qty-row{grid-template-columns:40px minmax(0,1fr) 40px;grid-template-rows:40px;align-items:center;gap:4px;width:100%;margin:0}
.products-grid.simple-view :is(.qty-btn,.product-qty-value){height:40px;min-height:40px;min-width:0;padding:0;border-radius:11px;font-size:17px;line-height:1}
.products-grid.simple-view .product-qty-value{font-size:15px;font-weight:750}
.products-grid.simple-view .card-info{flex:0 0 40px;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0}
.products-grid.simple-view :is(.product-add-btn,.product-login-order-btn){min-height:40px;border-radius:11px}
.products-grid.simple-view :is(.product-login-order-row,.product-out-stock-row){width:100%;min-width:0}
html[data-mode="dark"] .products-grid.simple-view .product-simple-price{color:var(--wa-accent,var(--products-accent))}
/* Legacy phone/tablet rules force every view into a small horizontal card. */
@media(max-width:820px){
    .products-grid.simple-view{grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr))!important}
    .products-grid.simple-view .product-card{display:flex!important;gap:0!important;padding:0!important;min-height:0!important}
    .products-grid.simple-view .product-image-box{width:100%!important;height:230px!important;min-height:230px!important;max-height:none!important;border-radius:0!important}
    .products-grid.simple-view .product-info-box{display:flex!important;gap:10px!important}
    .products-grid.simple-view .product-main-info{gap:4px!important}
    .products-grid.simple-view .product-main-info h3,.products-grid.simple-view .arabic-line{max-height:none!important;-webkit-line-clamp:unset!important}
    .products-grid.simple-view .product-quick-row{display:flex!important;gap:4px!important}
    .products-grid.simple-view .product-qty-row{grid-template-columns:40px minmax(0,1fr) 40px!important;grid-template-rows:40px!important;gap:4px!important;margin:0!important}
}

/* The image viewer is a body-level overlay, including images opened in drawers. */
#ProductImagePreviewModal[hidden]{display:none!important}
#ProductImagePreviewModal.is-open:not([hidden]){display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
#ProductImagePreviewModal{position:fixed!important;inset:0!important;z-index:2147483100!important;padding:20px}
#ProductImagePreviewModal .product-image-preview-dialog{position:relative;display:flex;align-items:center;justify-content:center;max-width:calc(100vw - 40px);max-height:calc(100dvh - 40px)}
#ProductImagePreviewImg{display:block;max-width:min(92vw,1200px);max-height:calc(100dvh - 64px);object-fit:contain;border-radius:18px;background:#fff;padding:12px}
#ProductImagePreviewClose{position:absolute;top:8px;right:8px;z-index:1;width:44px;height:44px;min-width:44px;min-height:44px;border:1px solid var(--products-border);border-radius:50%;background:var(--products-card);color:var(--products-text);cursor:pointer}
body.product-image-preview-open{overflow:hidden}
.product-image-box,#ShowcaseDetailImage,#DrawerImage{cursor:zoom-in}

/* Shared feedback in Grid, Cards, Rows, Simple cards and Showcase. */
.products-grid{--product-hover-lift:-3px}
.products-grid.rows-view,.products-grid.showcase-view{--product-hover-lift:-1px}
.products-grid .product-card,.products-grid.showcase-view .showcase-item{transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease!important}
.products-grid .product-card:focus-within,.products-grid.showcase-view .showcase-item:focus-within{border-color:color-mix(in srgb,var(--products-accent) 60%,var(--products-border))!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--products-accent) 20%,transparent),0 8px 20px color-mix(in srgb,var(--products-accent) 12%,transparent)!important}
@media(hover:hover) and (pointer:fine){
    .products-grid .product-card:hover,.products-grid.showcase-view .showcase-item:hover{transform:translateY(var(--product-hover-lift))!important;border-color:color-mix(in srgb,var(--products-accent) 60%,var(--products-border))!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--products-accent) 20%,transparent),0 10px 24px color-mix(in srgb,var(--products-accent) 14%,transparent)!important}
}
@media(prefers-reduced-motion:reduce){
    .products-grid .product-card,.products-grid .product-card:hover,.products-grid.showcase-view .showcase-item,.products-grid.showcase-view .showcase-item:hover{transform:none!important;transition:none!important}
}