/* =========================================================
   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); }
.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 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: color-mix(in srgb, var(--products-card) 96%, 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;
    }
}