/**
 * Staytics 鈥?Product Archive Page Stylesheet
 *
 * Extracted from archive-product.php. The template now enqueues this file
 * via `wp_enqueue_style` in inc/enqueue.php.
 */

/* 鈹€鈹€ LOCAL FONTS (replace remote @import for faster first paint) 鈹€鈹€ */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-800.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-500.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-600.woff2') format('woff2');
}

/* 鈹€鈹€ Original styles 鈹€鈹€ */

/* Scoped box-sizing reset — archive-product.css is missing a global
   one, which is why the quickview columns used to overflow the modal
   whenever a `padding` was added back. Scoping via .staytics-wrapper
   keeps us from clobbering third-party plugin styles. */
.staytics-wrapper,
.staytics-wrapper *,
.staytics-wrapper *::before,
.staytics-wrapper *::after {
    box-sizing: border-box;
}

    :root {
        --brand-blue: #2f7fff;
        --brand-hover: #0053e1;
        --text-slate-800: #1e293b;
        --text-slate-700: #334155;
        --text-slate-600: #475569;
        --text-slate-500: #64748b;
        --text-slate-400: #94a3b8;
        --text-slate-300: #cbd5e1;
        --text-slate-200: #e2e8f0;
        --text-slate-100: #f1f5f9;
        --text-slate-50: #f8fafc;
        --bg-slate-50: #f8fafc;
        --bg-emerald-500: #10b981;
        --bg-emerald-600: #059669;
        --bg-rose-500: #f43f5e;
        --premium-blue-50: #eff6ff;
        --premium-blue-100: #dbeafe;
        --premium-indigo-50: #eef2ff;
    }

    .staytics-wrapper {
        margin-top: 130px;
    }

    button{
        border: 0;
        position: relative;
        background: none;
        font-family: inherit;
        font-size: inherit;
        line-height: 1;
        outline: none;
        cursor: pointer;
        padding: 0;
        margin: 0;
    }



    .staytics-wrapper select {
        background-image: none;
    }

    /* ── MAIN LAYOUT ── */
    .staytics-wrapper {
        font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
        color: var(--text-slate-800);
        background: #fff;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    /* ── HEADER CSS removed — using WordPress theme header ── */

    /* ── MAIN AREA ── */
    .st-main {
        flex: 1;
        max-width: 75%;
        margin: 0 auto;
        padding: 1.5rem 1rem;
        width: 100%;
    }

    /* ── HERO BANNER ── */
    .st-promo-banner {
        background: linear-gradient(135deg, #1e3a5f 0%, #0f2744 50%, #1a3356 100%);
        border-radius: 20px;
        padding: 2rem;
        margin-bottom: 1.5rem;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    .st-promo-banner::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(47,127,255,0.15) 0%, transparent 70%);
        border-radius: 50%;
    }

    .st-promo-banner::after {
        content: '';
        position: absolute;
        bottom: -30%;
        left: 20%;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(16,185,129,0.1) 0%, transparent 70%);
        border-radius: 50%;
    }

    .st-promo-banner-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        color: rgba(255,255,255,0.6);
        padding: 0.375rem;
        border-radius: 8px;
        transition: all 0.15s;
        z-index: 2;
    }

    .st-promo-banner-close:hover {
        background: rgba(255,255,255,0.1);
        color: #fff;
    }

    .st-promo-banner-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        background: rgba(47,127,255,0.2);
        color: #93c5fd;
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0.375rem 0.75rem;
        border-radius: 9999px;
        margin-bottom: 0.75rem;
    }

    .st-promo-banner-title {
        font-size: 1.5rem;
        font-weight: 800;
        color: #fff;
        line-height: 1.3;
        margin-bottom: 0.625rem;
        max-width: 600px;
    }

    .st-promo-banner-title .gradient-text {
        background: linear-gradient(90deg, #60a5fa, #34d399);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .st-promo-banner-desc {
        font-size: 0.8125rem;
        color: rgba(255,255,255,0.6);
        max-width: 560px;
        line-height: 1.6;
    }

    /* ── BREADCRUMB ── */
    .st-breadcrumb-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
        gap: 1rem;
    }

    .st-breadcrumb {
        font-size: 0.75rem;
        color: var(--text-slate-500);
        font-weight: 500;
    }

    .st-breadcrumb span {
        color: var(--text-slate-800);
        font-weight: 600;
    }

    .st-btn-add-mobile {
        background: var(--bg-emerald-500);
        color: #fff;
        font-weight: 600;
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 0.375rem;
        display: none;
    }

    /* ── CONTENT LAYOUT (SIDEBAR + MAIN) ── */
    .st-content-layout {
        display: flex;
        gap: 2rem;
        align-items: flex-start;
    }

    /* ── SIDEBAR ── */
    .st-sidebar {
        width: 288px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        position: sticky;
        top: 80px;
    }

    .st-sidebar-card {
        background: #fff;
        border: 1px solid var(--text-slate-100);
        border-radius: 16px;
        padding: 1.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .st-sidebar-card-title {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--text-slate-400);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .st-sidebar-card-title .cat-count {
        font-size: 0.625rem;
        background: var(--text-slate-100);
        color: var(--text-slate-600);
        padding: 0.125rem 0.5rem;
        border-radius: 9999px;
        font-weight: 600;
    }

    .st-cat-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.625rem 0.75rem;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--text-slate-600);
        transition: all 0.15s;
        text-align: left;
        text-decoration: none;
        margin-bottom: 0.25rem;
    }

    .st-cat-btn:hover {
        background: var(--text-slate-50);
        color: var(--text-slate-900);
    }

    .st-cat-btn.active {
        background: var(--premium-blue-50);
        color: var(--brand-blue);
        font-weight: 700;
        box-shadow: 0 1px 3px rgba(47,127,255,0.1);
    }

    .st-cat-btn-left {
        display: flex;
        align-items: center;
        gap: 0.625rem;
    }

    .st-cat-btn-right {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .st-cat-name {
        cursor: pointer;
    }

    .st-cat-expand-btn {
        background: none;
        border: none;
        padding: 0.25rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: background-color 0.15s;
    }

    .st-cat-expand-btn:hover {
        background: var(--text-slate-100);
    }

    .st-cat-expand-btn .chevron-toggle {
        transition: transform 0.25s ease;
        color: var(--text-slate-400);
    }

    .st-cat-btn.expanded .st-cat-expand-btn .chevron-toggle {
        transform: rotate(90deg);
        color: var(--brand-blue);
    }

    .st-cat-count-badge {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
        border-radius: 6px;
        font-family: 'JetBrains Mono', monospace;
        font-weight: 600;
    }

    .st-cat-btn.active .st-cat-count-badge {
        background: var(--premium-blue-100);
        color: var(--brand-blue);
    }

    .st-cat-btn:not(.active) .st-cat-count-badge {
        background: var(--text-slate-100);
        color: var(--text-slate-500);
    }

    .st-cat-btn .chevron-toggle {
        transition: transform 0.25s ease;
        color: var(--text-slate-400);
    }

    .st-cat-btn.expanded .chevron-toggle {
        transform: rotate(90deg);
        color: var(--brand-blue);
    }

    .st-cat-sub-list {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        margin-left: 0.75rem;
        padding-left: 0.75rem;
        border-left: 1px dashed var(--text-slate-200);
    }

    .st-cat-sub-list.open {
        max-height: 500px;
    }

    .st-cat-sub-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.375rem 0.5rem 0.375rem 0.75rem;
        border-radius: 8px;
        font-size: 0.6875rem;
        color: var(--text-slate-500);
        font-weight: 500;
        transition: all 0.15s;
        text-decoration: none;
        margin: 0.125rem 0;
    }

    .st-cat-sub-item:hover {
        background: var(--text-slate-50);
        color: var(--text-slate-800);
        transform: translateX(2px);
    }

    .st-cat-sub-item.active {
        background: var(--premium-blue-50);
        color: var(--brand-blue);
        font-weight: 600;
    }

    .st-cat-sub-item-left {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
    }

    .st-cat-sub-dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--text-slate-300);
        flex-shrink: 0;
        transition: all 0.15s;
    }

    .st-cat-sub-item:hover .st-cat-sub-dot {
        background: var(--text-slate-400);
    }

    .st-cat-sub-item.active .st-cat-sub-dot {
        background: var(--brand-blue);
        width: 6px;
        height: 6px;
        box-shadow: 0 0 0 2px rgba(47,127,255,0.2);
    }

    .st-cat-sub-count {
        font-size: 0.5625rem;
        font-family: 'JetBrains Mono', monospace;
        padding: 0.125rem 0.375rem;
        border-radius: 4px;
        background: var(--text-slate-50);
        color: var(--text-slate-400);
        flex-shrink: 0;
        font-weight: 600;
    }

    .st-cat-sub-item.active .st-cat-sub-count {
        background: var(--premium-blue-100);
        color: var(--brand-blue);
        font-weight: 700;
    }

    .st-cat-sub-item:hover .st-cat-sub-count {
        background: var(--text-slate-100);
        color: var(--text-slate-600);
    }

    /* ── FILTER PANEL ── */
    .st-filter-panel {
        background: #fff;
        border: 1px solid var(--text-slate-100);
        border-radius: 16px;
        padding: 1.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .st-filter-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
    }

    .st-filter-panel-title {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--text-slate-400);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .st-filter-reset {
        font-size: 0.625rem;
        font-weight: 600;
        color: var(--bg-rose-500);
        display: flex;
        align-items: center;
        gap: 0.25rem;
        display: none;
        cursor: pointer;
        background: none;
        border: none;
    }

    .st-filter-reset.show {
        display: flex;
    }

    .st-filter-reset:hover {
        text-decoration: underline;
    }

    .st-filter-checkbox {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.75rem;
        color: var(--text-slate-600);
        font-weight: 500;
        cursor: pointer;
        margin-bottom: 0.875rem;
        transition: color 0.15s;
    }

    .st-filter-checkbox:hover {
        color: var(--text-slate-900);
    }

    .st-filter-checkbox input[type="checkbox"] {
        width: 18px;
        height: 18px;
        border-radius: 6px;
        border: 1.5px solid var(--text-slate-300);
        cursor: pointer;
        flex-shrink: 0;
        background: #fff;
    }

    .st-filter-checkbox input[type="checkbox"]:checked {
        background: var(--brand-blue);
        border-color: var(--brand-blue);
    }

    /* ── PRICE RANGE (DUAL SLIDER) ── */
    .st-price-range-panel {
        background: #fff;
        border: 1px solid var(--text-slate-100);
        border-radius: 16px;
        padding: 1.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .st-price-range-panel h3 {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--text-slate-400);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 1.25rem;
    }

    /* Wrap with vertical gap between slider and labels */
    .st-price-range-wrap {
        position: relative;
        padding: 1.75rem 0 0.5rem;
    }

    /* The visible track sits behind two native sliders */
    .st-price-track {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 6px;
        border-radius: 9999px;
        background: var(--text-slate-200);
        transform: translateY(-50%);
        pointer-events: none;
    }

    .st-price-track-fill {
        position: absolute;
        height: 100%;
        background: linear-gradient(90deg, var(--brand-blue), #60a5fa);
        border-radius: 9999px;
    }

    /* Native range input – visually hidden but functional */
    .st-price-slider {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        width: 100%;
        height: 28px;
        background: none;
        -webkit-appearance: none;
        appearance: none;
        pointer-events: none;
        transform: translateY(-50%);
        margin: 0;
    }

    .st-price-slider::-webkit-slider-runnable-track {
        background: transparent;
        height: 28px;
        border: none;
    }

    .st-price-slider::-moz-range-track {
        background: transparent;
        height: 28px;
        border: none;
    }

    .st-price-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #fff;
        border: 3px solid var(--brand-blue);
        cursor: grab;
        pointer-events: auto;
        box-shadow: 0 2px 8px rgba(47,127,255,0.35);
        margin-top: 3px;
        transition: transform 0.15s, box-shadow 0.15s;
    }

    .st-price-slider::-webkit-slider-thumb:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(47,127,255,0.5);
    }

    .st-price-slider::-webkit-slider-thumb:active {
        cursor: grabbing;
        transform: scale(1.15);
    }

    .st-price-slider::-moz-range-thumb {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #fff;
        border: 3px solid var(--brand-blue);
        cursor: grab;
        pointer-events: auto;
        box-shadow: 0 2px 8px rgba(47,127,255,0.35);
        transition: transform 0.15s, box-shadow 0.15s;
    }

    .st-price-slider::-moz-range-thumb:hover {
        transform: scale(1.1);
    }

    .st-price-slider:focus {
        outline: none;
    }

    .st-price-slider:focus::-webkit-slider-thumb {
        box-shadow: 0 0 0 6px rgba(47,127,255,0.18), 0 2px 8px rgba(47,127,255,0.35);
    }

    /* Floating bubble tooltip above each thumb */
    .st-price-bubble {
        position: absolute;
        top: 0;
        transform: translateX(-50%);
        background: var(--brand-blue);
        color: #fff;
        font-size: 0.6875rem;
        font-weight: 700;
        font-family: 'JetBrains Mono', monospace;
        padding: 0.25rem 0.625rem;
        border-radius: 8px;
        white-space: nowrap;
        pointer-events: none;
        box-shadow: 0 4px 12px rgba(47,127,255,0.3);
        opacity: 0;
        transition: opacity 0.2s;
    }

    .st-price-bubble.show {
        opacity: 1;
    }

    .st-price-bubble::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 8px;
        height: 8px;
        background: var(--brand-blue);
    }

    /* Min / Max value badges below slider */
    .st-price-display {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .st-price-tag {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        flex: 1;
    }

    .st-price-tag-label {
        font-size: 0.5625rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-slate-400);
    }

    .st-price-tag-value {
        background: var(--text-slate-50);
        padding: 0.4375rem 0.75rem;
        border-radius: 8px;
        font-size: 0.75rem;
        font-weight: 700;
        font-family: 'JetBrains Mono', monospace;
        color: var(--text-slate-700);
        border: 1px solid var(--text-slate-100);
        min-width: 88px;
        text-align: center;
    }

    .st-price-tag.active .st-price-tag-value {
        background: var(--premium-blue-50);
        color: var(--brand-blue);
        border-color: var(--premium-blue-100);
    }

    /* ── SUPPORT BANNER ── */
    .st-support-banner {
        background: linear-gradient(135deg, var(--premium-blue-50), var(--premium-indigo-50));
        border: 1px solid var(--premium-blue-100);
        border-radius: 16px;
        padding: 1.5rem;
        position: relative;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .st-support-banner h4 {
        font-size: 0.8125rem;
        font-weight: 700;
        color: var(--text-slate-800);
        margin-bottom: 0.25rem;
    }

    .st-support-banner p {
        font-size: 0.75rem;
        color: var(--text-slate-500);
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    .st-btn-support {
        width: 100%;
        background: #fff;
        color: var(--text-slate-700);
        font-weight: 700;
        font-size: 0.75rem;
        padding: 0.625rem 1rem;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border: 1px solid rgba(0,0,0,0.08);
        transition: all 0.2s;
    }

    .st-btn-support:hover {
        background: var(--text-slate-50);
        transform: scale(1.02);
    }

    /* ── PRODUCT SECTION ── */
    .st-product-section {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    /* ── INFO BAR ── */
    .st-info-bar {
        background: #fff;
        border: 1px solid var(--text-slate-100);
        border-radius: 16px;
        padding: 1rem 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .st-info-bar-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .st-info-bar h1 {
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--text-slate-900);
        letter-spacing: -0.02em;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-width: 0;
    }

    .st-info-bar h1 > span:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .st-info-bar h1 .count-badge {
        font-size: 0.75rem;
        font-weight: 600;
        background: var(--premium-blue-100);
        color: var(--brand-blue);
        padding: 0.25rem 0.625rem;
        border-radius: 9999px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .st-info-bar p {
        font-size: 0.6875rem;
        color: var(--text-slate-400);
        margin-top: 0.25rem;
    }

    .st-info-bar-right {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-shrink: 0;
    }

    .st-sort-wrapper {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .st-sort-wrapper label {
        font-size: 0.75rem;
        color: var(--text-slate-400);
        font-weight: 500;
        white-space: nowrap;
    }

    .st-sort-select {
        background: var(--text-slate-50);
        border: 1px solid var(--text-slate-200);
        border-radius: 12px;
        padding: 0.5rem 2rem 0.5rem 0.875rem;
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--text-slate-700);
        cursor: pointer;
        background-image: none;
        transition: all 0.15s;
    }

    .st-sort-select:hover {
        background: var(--text-slate-100);
    }

    .st-view-toggle {
        display: flex;
        align-items: center;
        background: var(--text-slate-100);
        padding: 0.25rem;
        border-radius: 12px;
        border: 1px solid rgba(0,0,0,0.04);
    }

    .st-view-btn {
        padding: 0.375rem;
        border-radius: 8px;
        color: var(--text-slate-400);
        transition: all 0.15s;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .st-view-btn:hover {
        color: var(--text-slate-600);
    }

    .st-view-btn.active {
        background: #fff;
        color: var(--brand-blue);
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

    /* ── ACTIVE FILTER CHIPS ── */
    .st-chips-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        display: none;
    }

    .st-chips-bar.show {
        display: flex;
    }

    .st-chips-bar-label {
        font-size: 0.75rem;
        color: var(--text-slate-400);
        font-weight: 500;
    }

    .st-chip {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        background: var(--premium-blue-50);
        color: var(--brand-blue);
        font-size: 0.6875rem;
        font-weight: 700;
        padding: 0.25rem 0.625rem;
        border-radius: 9999px;
    }

    .st-chip button {
        display: flex;
        align-items: center;
        justify-content: center;
        color: inherit;
        opacity: 0.7;
        transition: opacity 0.15s;
    }

    .st-chip button:hover {
        opacity: 1;
    }

    /* ── PRODUCT GRID ── */
    .st-product-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    @media (min-width: 640px) {


        .st-product-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 1024px) {
        .st-product-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 1280px) {
        .st-product-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (min-width: 1536px) {
        .st-product-grid {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    /* ── PRODUCT CARD ── */
    .st-product-card {
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: all 0.3s;
        cursor: pointer;
        position: relative;
        outline: 1px solid var(--text-slate-100);
    }

    .st-product-card:hover {
        outline-color: var(--text-slate-200);
        box-shadow: 0 8px 24px rgba(0,0,0,0.08);
        transform: translateY(-2px);
    }

    .st-product-card.highlight {
        outline-color: var(--brand-blue);
        box-shadow: 0 0 0 2px rgba(47,127,255,0.15);
    }

    .st-product-image-wrap {
        position: relative;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background: var(--text-slate-50);
    }

    .st-product-image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s;
    }

    .st-product-card:hover .st-product-image-wrap img {
        transform: scale(1.05);
    }

    .st-product-wish-btn {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        background: rgba(255,255,255,0.95);
        padding: 0.5rem;
        border-radius: 9999px;
        color: var(--text-slate-500);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: all 0.15s;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .st-product-wish-btn:hover {
        background: #fff;
        color: var(--bg-rose-500);
        transform: scale(1.1);
    }

    .st-product-wish-btn.wishlisted {
        color: var(--bg-rose-500);
    }

    .st-product-img-count {
        position: absolute;
        bottom: 0.75rem;
        right: 0.75rem;
        background: rgba(0,0,0,0.6);
        color: #fff;
        font-size: 0.625rem;
        font-weight: 700;
        padding: 0.125rem 0.5rem;
        border-radius: 6px;
        font-family: 'JetBrains Mono', monospace;
    }

    .st-product-tag-new {
        position: absolute;
        top: 0.75rem;
        left: 0.75rem;
        background: var(--bg-emerald-500);
        color: #fff;
        font-size: 0.625rem;
        font-weight: 700;
        padding: 0.25rem 0.625rem;
        border-radius: 9999px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .st-product-card-body {
        padding: 1rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .st-product-code {
        font-size: 0.625rem;
        color: var(--text-slate-400);
        font-family: 'JetBrains Mono', monospace;
    }

    .st-product-title {
        font-size: 0.8125rem;
        font-weight: 700;
        color: var(--text-slate-800);
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: color 0.15s;
    }

    .st-product-card:hover .st-product-title {
        color: var(--brand-blue);
    }

    .st-product-card-footer {
        padding: 0.75rem 1rem;
        border-top: 1px solid var(--text-slate-50);
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
        margin-top: auto;
    }

    .st-product-card-footer .st-product-price {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        flex-wrap: wrap;
    }

    .st-product-card-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }

    .st-product-card-actions .st-btn-add-to-cart,
    .st-product-card-actions .st-btn-view-details {
        flex: 1;
        min-width: 0;
        padding: 0.5rem 0.625rem;
        font-size: 0.6875rem;
    }

    .st-product-price {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        padding-bottom: 0.125rem;
    }

    .st-product-price-main {
        display: flex;
        align-items: baseline;
        gap: 0.375rem;
        flex-wrap: wrap;
    }

    .st-product-price-value {
        font-size: 1.375rem;
        font-weight: 800;
        color: #0f172a;
        font-family: 'JetBrains Mono', monospace;
        letter-spacing: -0.02em;
        line-height: 1.1;
    }

    .st-product-price-unit {
        font-size: 0.6875rem;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .st-product-price-meta {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        flex-wrap: wrap;
    }

    .st-product-price-was {
        font-size: 0.75rem;
        font-weight: 600;
        color: #94a3b8;
        text-decoration: line-through;
        text-decoration-color: #cbd5e1;
        text-decoration-thickness: 1.5px;
        font-family: 'JetBrains Mono', monospace;
    }

    .st-product-price-save {
        display: inline-flex;
        align-items: center;
        font-size: 0.625rem;
        font-weight: 700;
        color: #047857;
        background: #d1fae5;
        padding: 0.125rem 0.4375rem;
        border-radius: 999px;
        letter-spacing: 0.01em;
        white-space: nowrap;
    }

    .st-product-price-status {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    /* Live-data loader (toggled by archive-product.php while the
       AJAX refresh is in flight). Both the price block and the
       status pill get a soft fade so users know something is
       updating without the layout jumping. The keyframe name is
       namespaced with `st-` so it can't collide with anything
       pulled in by a third-party plugin. */
    .st-product-price.st-loading-live-data,
    .st-product-card .st-product-price-status.st-loading-live-data {
        opacity: .55;
        animation: st-archive-live-data-pulse 1.1s ease-in-out infinite;
        transition: opacity .2s ease;
    }

    /* Inner rows also fade so the whole price/status column reads
       as a single unit. We rely on opacity (not display:none) so
       the page doesn't reflow when the AJAX response swaps the
       content in. */
    .st-product-price.st-loading-live-data > *,
    .st-product-card .st-product-price-status.st-loading-live-data > * {
        opacity: .55;
    }

    @keyframes st-archive-live-data-pulse {
        0%, 100% { opacity: .35; }
        50%      { opacity: .85; }
    }

    @media (prefers-reduced-motion: reduce) {
        .st-product-price.st-loading-live-data,
        .st-product-card .st-product-price-status.st-loading-live-data {
            animation: none;
            opacity: .6;
        }
    }

    .st-restocking-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.625rem;
        font-weight: 700;
        color: #92400e;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        background: #fef3c7;
        padding: 0.1875rem 0.5rem;
        border-radius: 999px;
        border: 1px solid #fde68a;
    }

    .st-out-of-stock-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.625rem;
        font-weight: 700;
        color: #991b1b;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        background: #fee2e2;
        padding: 0.1875rem 0.5rem;
        border-radius: 999px;
        border: 1px solid #fecaca;
    }

    .st-qty-available {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.6875rem;
        color: #475569;
        font-weight: 500;
    }

    .st-qty-available svg {
        color: #059669;
        flex-shrink: 0;
    }

    .st-qty-available-label {
        color: #64748b;
    }

    .st-qty-available-value {
        font-family: 'JetBrains Mono', monospace;
        font-weight: 700;
        color: #0f172a;
    }

    .st-add-to-cart-btn {
        background: var(--text-slate-50);
        border: 1px solid var(--text-slate-100);
        color: var(--text-slate-600);
        padding: 0.625rem;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s;
        flex-shrink: 0;
    }

    .st-add-to-cart-btn:hover {
        background: var(--brand-blue);
        border-color: var(--brand-blue);
        color: #fff;
    }

    /* ── LIST VIEW ── */
    .st-product-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .st-list-card {
        background: #fff;
        border-radius: 16px;
        border: 1px solid var(--text-slate-100);
        padding: 1rem;
        display: flex;
        gap: 1.25rem;
        transition: all 0.2s;
        cursor: pointer;
    }

    .st-list-card:hover {
        border-color: var(--text-slate-200);
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    }

    .st-list-card-image {
        width: 176px;
        height: 176px;
        border-radius: 12px;
        overflow: hidden;
        background: var(--text-slate-50);
        flex-shrink: 0;
        position: relative;
    }

    .st-list-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .st-list-card-image .st-product-img-count {
        bottom: 0.5rem;
        right: 0.5rem;
    }

    .st-list-card-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0.25rem 0;
    }

    .st-list-card-top {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }

    .st-list-card-tags {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.375rem;
    }

    .st-list-tag {
        font-size: 0.5625rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--brand-blue);
        background: var(--premium-blue-50);
        padding: 0.125rem 0.5rem;
        border-radius: 4px;
    }

    .st-list-card-title {
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--text-slate-800);
        line-height: 1.5;
        transition: color 0.15s;
    }

    .st-list-card:hover .st-list-card-title {
        color: var(--brand-blue);
    }

    .st-list-card-desc {
        font-size: 0.75rem;
        color: var(--text-slate-400);
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .st-list-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        font-size: 0.75rem;
        color: var(--text-slate-500);
    }

    .st-list-card-meta strong {
        color: var(--text-slate-700);
        font-weight: 600;
    }

    .st-list-card-right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        gap: 0.75rem;
        padding-left: 1.25rem;
        border-left: 1px solid var(--text-slate-100);
        flex-shrink: 0;
    }

    .st-list-card-price {
        font-size: 1rem;
        font-weight: 800;
        color: var(--text-slate-900);
        font-family: 'JetBrains Mono', monospace;
    }

    .st-list-card-price-label {
        font-size: 0.625rem;
        color: var(--text-slate-400);
        text-align: right;
    }

    .st-list-add-btn {
        background: var(--brand-blue);
        color: #fff;
        font-weight: 700;
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
        border-radius: 12px;
        display: flex;
        align-items: center;
        gap: 0.375rem;
        box-shadow: 0 2px 8px rgba(47,127,255,0.2);
        transition: all 0.15s;
    }

    .st-list-add-btn:hover {
        background: var(--brand-hover);
        transform: scale(1.02);
    }

    /* ── NO PRODUCTS ── */
    .st-no-products {
        background: #fff;
        border-radius: 24px;
        padding: 3rem;
        text-align: center;
        border: 1px solid var(--text-slate-100);
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .st-no-products-icon {
        width: 64px;
        height: 64px;
        background: var(--text-slate-50);
        border: 1px solid var(--text-slate-100);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        color: var(--text-slate-300);
    }

    .st-no-products h3 {
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-slate-800);
        margin-bottom: 0.25rem;
    }

    .st-no-products p {
        font-size: 0.75rem;
        color: var(--text-slate-400);
        max-width: 320px;
        margin: 0 auto 1rem;
    }

    .st-btn-clear-filters {
        background: var(--brand-blue);
        color: #fff;
        font-weight: 700;
        font-size: 0.75rem;
        padding: 0.5rem 1.25rem;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(47,127,255,0.2);
        transition: all 0.15s;
    }

    .st-btn-clear-filters:hover {
        background: var(--brand-hover);
    }

    /* ── PAGINATION ── */
    .st-pagination {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 1rem;
        border-top: 1px solid var(--text-slate-100);
    }

    .st-pagination-info {
        font-size: 0.75rem;
        color: var(--text-slate-400);
    }

    .st-pagination-info strong {
        color: var(--text-slate-700);
        font-weight: 700;
    }

    .st-pagination-btns {
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    .st-page-btn {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        font-size: 0.75rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s;
        color: var(--text-slate-500);
        border: 1px solid transparent;
        text-decoration: none;
        background: transparent;
    }

    .st-page-btn:hover {
        background: var(--text-slate-50);
        border-color: var(--text-slate-200);
        color: var(--text-slate-700);
    }

    .st-page-btn.nav {
        border: 1px solid var(--text-slate-200);
    }

    .st-page-btn.nav:disabled,
    .st-page-btn.nav.disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .st-page-btn.current {
        background: var(--brand-blue);
        color: #fff;
        box-shadow: 0 2px 6px rgba(47,127,255,0.2);
    }

    .st-page-ellipsis {
        font-size: 0.75rem;
        color: var(--text-slate-400);
        padding: 0 0.25rem;
        font-weight: 600;
    }

    /* ── FOOTER CSS removed — using WordPress theme footer ── */

    /* ── CART OVERLAY ── */
    .st-cart-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15,23,42,0.4);
        backdrop-filter: blur(4px);
        z-index: 50;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
        display: flex;
        justify-content: flex-end;
    }

    .st-cart-overlay.open {
        opacity: 1;
        pointer-events: all;
    }

    .st-cart-panel {
        width: 100%;
        max-width: 420px;
        background: #fff;
        height: 100%;
        display: flex;
        flex-direction: column;
        box-shadow: -8px 0 32px rgba(0,0,0,0.15);
        transform: translateX(100%);
        transition: transform 0.3s;
    }

    .st-cart-overlay.open .st-cart-panel {
        transform: translateX(0);
    }

    .st-cart-header {
        padding: 1.25rem;
        border-bottom: 1px solid var(--text-slate-100);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .st-cart-header h2 {
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-slate-900);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .st-cart-header-badge {
        background: var(--premium-blue-100);
        color: var(--brand-blue);
        font-size: 0.75rem;
        font-weight: 700;
        padding: 0.125rem 0.5rem;
        border-radius: 9999px;
    }

    .st-cart-close {
        color: var(--text-slate-400);
        padding: 0.375rem;
        border-radius: 8px;
        transition: all 0.15s;
    }

    .st-cart-close:hover {
        background: var(--text-slate-100);
        color: var(--text-slate-800);
    }

    .st-cart-body {
        flex: 1;
        overflow-y: auto;
        padding: 1.25rem;
        display: flex;
        flex-direction: column;
    }

    .st-cart-empty {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        text-align: center;
        color: var(--text-slate-400);
    }

    .st-cart-empty p {
        font-size: 0.75rem;
        line-height: 1.6;
    }

    .st-cart-item {
        display: flex;
        gap: 0.875rem;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid var(--text-slate-100);
    }

    .st-cart-item img {
        width: 56px;
        height: 56px;
        border-radius: 8px;
        object-fit: cover;
        background: var(--text-slate-50);
        border: 1px solid var(--text-slate-100);
    }

    .st-cart-item-info {
        flex: 1;
        min-width: 0;
    }

    .st-cart-item-code {
        font-size: 0.625rem;
        font-family: 'JetBrains Mono', monospace;
        color: var(--text-slate-400);
    }

    .st-cart-item-title {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--text-slate-800);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .st-cart-item-price {
        font-size: 0.75rem;
        color: var(--text-slate-500);
        font-family: 'JetBrains Mono', monospace;
        margin-top: 0.125rem;
    }

    .st-cart-item-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        flex-shrink: 0;
    }

    .st-cart-item-total {
        font-size: 0.75rem;
        font-weight: 700;
        font-family: 'JetBrains Mono', monospace;
        color: var(--text-slate-900);
    }

    .st-qty-btns {
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    .st-qty-btn {
        width: 24px;
        height: 24px;
        border-radius: 6px;
        border: 1px solid var(--text-slate-200);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-slate-600);
        font-size: 0.75rem;
        transition: all 0.15s;
    }

    .st-qty-btn:hover {
        background: var(--text-slate-50);
    }

    .st-cart-footer {
        padding: 1.25rem;
        border-top: 1px solid var(--text-slate-100);
        background: var(--text-slate-50);
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .st-cart-subtotal {
        display: flex;
        justify-content: space-between;
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--text-slate-900);
    }

    .st-cart-subtotal span:last-child {
        font-family: 'JetBrains Mono', monospace;
    }

    .st-cart-note {
        font-size: 0.625rem;
        color: var(--text-slate-400);
    }

    .st-btn-checkout {
        width: 100%;
        background: var(--brand-blue);
        color: #fff;
        font-weight: 700;
        font-size: 0.75rem;
        padding: 0.75rem;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        box-shadow: 0 4px 12px rgba(47,127,255,0.25);
        transition: all 0.15s;
    }

    .st-btn-checkout:hover {
        background: var(--brand-hover);
        transform: scale(1.02);
    }

    /* ── QUICKVIEW MODAL ── */
    .st-quickview-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15,23,42,0.5);
        backdrop-filter: blur(4px);
        z-index: 50;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
    }

    .st-quickview-overlay.open {
        opacity: 1;
        pointer-events: all;
    }

    .st-quickview-modal {
        background: #fff;
        border-radius: 24px;
        width: 100%;
        max-width: 48rem;
        /* Use dvh where supported so the browser's dynamic URL bar
           is honoured, fall back to vh. Cap at 92vh on the smallest
           devices so the close button stays reachable. */
        max-height: 92vh;
        max-height: 92dvh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        position: relative;
        box-shadow: 0 25px 60px rgba(0,0,0,0.2);
        /* Give flex children a stable box so they can shrink/scroll
           instead of pushing past the modal's overflow boundary. */
        min-height: 0;
    }

    .st-quickview-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        z-index: 10;
        background: rgba(255,255,255,0.9);
        border: 1px solid var(--text-slate-100);
        padding: 0.5rem;
        border-radius: 9999px;
        color: var(--text-slate-500);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: all 0.15s;
    }

    .st-quickview-close:hover {
        background: #fff;
        color: var(--text-slate-800);
    }

    .st-quickview-inner {
        display: flex;
        flex-direction: column;
        /* Modal owns the viewport cap now — no need to repeat
           max-height here, which caused the "cut in half" artefact. */
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    @media (min-width: 768px) {
        .st-quickview-inner {
            flex-direction: row;
        }
    }

    .st-quickview-image-col {
        width: 100%;
        background: var(--text-slate-50);
        padding: 1.5rem;
        border-right: 1px solid var(--text-slate-100);
        display: flex;
        align-items: center;
        justify-content: center;
        /* Don't let the flex parent squash the image column — that's
           what was clipping the 1:1 image in half. */
        flex: 0 0 auto;
        overflow: hidden;
        max-height: 90vh;
    }

    @media (min-width: 768px) {
        .st-quickview-image-col {
            width: 50%;
            max-height: 90vh;
        }
    }

    .st-quickview-main-img {
        border-radius: 16px;
        overflow: hidden;
        background: #fff;
        border: 1px solid var(--text-slate-200);
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        aspect-ratio: 1 / 1;
        /* Cap on both axes so a very tall product image cannot push
           the column beyond the modal — was the root cause of the
           "image half cut off" bug on mobile. */
        max-width: 100%;
        max-height: 100%;
    }

    .st-quickview-main-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .st-quickview-details-col {
        width: 100%;
        padding: 1.5rem;
        overflow-y: auto;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* On mobile the details column should fill what's left of the
           viewport and scroll internally instead of clipping the
           add-to-cart row out of the modal. */
        flex: 1 1 auto;
        min-height: 0;
    }

    @media (min-width: 768px) {
        .st-quickview-details-col {
            width: 50%;
            max-height: 90vh;
        }
    }

    .st-quickview-details-body {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .st-quickview-code {
        font-size: 0.625rem;
        font-family: 'JetBrains Mono', monospace;
        color: var(--brand-blue);
        background: var(--premium-blue-50);
        padding: 0.25rem 0.625rem;
        border-radius: 6px;
        display: inline-block;
    }

    .st-quickview-title {
        font-size: 1rem;
        font-weight: 800;
        color: var(--text-slate-900);
        line-height: 1.4;
        margin-top: 0.5rem;
    }

    .st-quickview-price-row {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.75rem 0;
        border-top: 1px solid var(--text-slate-100);
        border-bottom: 1px solid var(--text-slate-100);
    }

    .st-quickview-price-label {
        font-size: 0.75rem;
        color: var(--text-slate-400);
    }

    .st-quickview-price {
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--text-slate-900);
        font-family: 'JetBrains Mono', monospace;
    }

    .st-quickview-stock {
        padding-left: 1rem;
        border-left: 1px solid var(--text-slate-200);
    }

    .st-quickview-section-title {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--text-slate-700);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 0.375rem;
    }

    .st-quickview-desc {
        font-size: 0.75rem;
        color: var(--text-slate-500);
        line-height: 1.7;
    }

    .st-quickview-specs {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }

    .st-quickview-specs li {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.75rem;
        color: var(--text-slate-500);
    }

    .st-quickview-specs li svg {
        color: var(--bg-emerald-500);
        flex-shrink: 0;
    }

    .st-quickview-add-row {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--text-slate-100);
        margin-top: 1.5rem;
    }

    .st-qty-control {
        display: flex;
        align-items: center;
        border: 1px solid var(--text-slate-200);
        border-radius: 12px;
        overflow: hidden;
        background: var(--text-slate-50);
    }

    .st-qty-control button {
        padding: 0.5rem 0.75rem;
        color: var(--text-slate-500);
        font-size: 0.875rem;
        font-weight: 700;
        transition: background 0.15s;
    }

    .st-qty-control button:hover {
        background: var(--text-slate-100);
    }

    .st-qty-control span {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
        font-weight: 700;
        font-family: 'JetBrains Mono', monospace;
    }

    .st-btn-add-to-cart {
        flex: 1;
        background: #2f7fff;
        color: #ffffff;
        font-weight: 700;
        font-size: 0.75rem;
        padding: 0.625rem;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        box-shadow: 0 4px 12px rgba(47,127,255,0.25);
        transition: all 0.15s;
        cursor: pointer;
    }

    .st-btn-add-to-cart:hover {
        background: #0053e1;
        transform: scale(1.02);
    }

    .st-btn-add-to-cart-icon {
        flex-shrink: 0;
        display: block;
    }

    .st-btn-add-to-cart.disabled,
    .st-btn-add-to-cart[disabled] {
        background: #e2e8f0;
        color: #94a3b8;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }

    .st-btn-view-details {
        margin-top: 5px;
        background: #ffffff;
        color: #2f7fff;
        border: 1px solid #2f7fff;
        font-weight: 700;
        font-size: 0.75rem;
        padding: 0.625rem;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        transition: all 0.15s;
        cursor: pointer;
        text-decoration: none;
    }

    .st-btn-view-details:hover {
        background: #2f7fff;
        color: #ffffff;
        text-decoration: none;
    }

    a.st-btn-view-details:visited {
        color: #2f7fff;
    }

    a.st-btn-view-details:hover {
        color: #ffffff;
    }

    /* ── NOTIFICATION TOAST ── */
    .st-toast {
        position: fixed;
        bottom: 1.5rem;
        left: 1.5rem;
        padding: 0.875rem 1.25rem;
        border-radius: 16px;
        color: #fff;
        box-shadow: 0 8px 24px rgba(0,0,0,0.2);
        z-index: 100;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        max-width: 320px;
        animation: st-toast-in 0.3s ease;
    }

    @keyframes st-toast-in {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .st-toast-title {
        font-size: 0.75rem;
        font-weight: 700;
    }

    .st-toast-msg {
        font-size: 0.625rem;
        opacity: 0.8;
        margin-top: 0.125rem;
        line-height: 1.5;
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 1024px) {
        .st-sidebar {
            display: none;
        }
    }

    /* ── MOBILE FILTER DRAWER BUTTON ── */
    .st-mobile-filter-bar {
        display: none;
    }

    @media (max-width: 1024px) {
        .st-mobile-filter-bar {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 0rem;
            background: #fff;
            border-bottom: 1px solid var(--text-slate-100);
            position: sticky;
            top: 0;
            z-index: 20;
        }

        .st-btn-open-filters {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            background: var(--brand-blue);
            color:  #fff;
            font-weight: 700;
            font-size: 0.8125rem;
            padding: 0.625rem 1rem;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(47,127,255,0.25);
        }

        .st-btn-open-filters-icon {
            flex-shrink: 0;
            display: block;
        }

        .st-btn-open-filters-label {
            white-space: nowrap;
        }

        .st-active-filter-count {
            background: rgba(255,255,255,0.25);
            color: #fff;
            font-size: 0.6875rem;
            font-weight: 700;
            padding: 0.0625rem 0.4375rem;
            border-radius: 9999px;
            display: none;
        }

        .st-active-filter-count.show {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 18px;
        }

        .st-sort-wrapper {
            flex-shrink: 0;
        }

        .st-mobile-filter-sort {
            background: var(--text-slate-100);
            color: var(--text-slate-700);
            font-weight: 700;
            font-size: 0.75rem;
            padding: 0.625rem 0.875rem;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 0.375rem;
            white-space: nowrap;
        }

        /* ── FILTER DRAWER (BOTTOM SHEET) ── */
        .st-filter-drawer-overlay {
            position: fixed;
            inset: 0;
            background: rgba(15,23,42,0.5);
            backdrop-filter: blur(4px);
            z-index: 60;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }

        .st-filter-drawer-overlay.open {
            opacity: 1;
            pointer-events: all;
        }

        .st-filter-drawer {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            max-height: 88vh;
            background: #fff;
            border-radius: 20px 20px 0 0;
            box-shadow: 0 -8px 32px rgba(0,0,0,0.18);
            z-index: 61;
            transform: translateY(100%);
            transition: transform 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .st-filter-drawer.open {
            transform: translateY(0);
        }

        .st-filter-drawer-handle {
            width: 40px;
            height: 4px;
            background: var(--text-slate-200);
            border-radius: 9999px;
            margin: 0.625rem auto 0.25rem;
            flex-shrink: 0;
        }

        .st-filter-drawer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.75rem 1.25rem 0.875rem;
            border-bottom: 1px solid var(--text-slate-100);
            flex-shrink: 0;
        }

        .st-filter-drawer-header h3 {
            font-size: 1rem;
            font-weight: 800;
            color: var(--text-slate-900);
            letter-spacing: -0.02em;
        }

        .st-filter-drawer-close {
            width: 32px;
            height: 32px;
            border-radius: 9999px;
            background: var(--text-slate-100);
            color: var(--text-slate-500);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .st-filter-drawer-body {
            flex: 1;
            overflow-y: auto;
            padding: 1.25rem;
            -webkit-overflow-scrolling: touch;
        }

        .st-filter-drawer-footer {
            padding: 0.875rem 1.25rem 1.25rem;
            border-top: 1px solid var(--text-slate-100);
            display: flex;
            gap: 0.75rem;
            background: #fff;
            flex-shrink: 0;
            padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
        }

        .st-btn-apply-filters {
            flex: 1;
            background: var(--brand-blue);
            color: #fff;
            font-weight: 700;
            font-size: 0.875rem;
            padding: 0.875rem 1rem;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(47,127,255,0.25);
        }
    }

    @media (min-width: 1025px) {
        
        .st-mobile-filter-bar,
        .st-filter-drawer,
        .st-filter-drawer-overlay {
            display: none !important;
        }
    }

    /* ── PRICE RANGE MOBILE TWEAKS ── */
    @media (max-width: 768px) {
        .st-product-card-actions {
            flex-direction: column;
            align-items: stretch;
        }

        .st-product-card-body {
            padding-bottom: 0;
            padding-top: 0;
        }

        .st-product-card-footer {
            padding-top: 0;
        }
        .st-price-range-panel {
            padding: 1rem;
            border-radius: 12px;
        }

        .st-price-range-panel h3 {
            font-size: 0.6875rem;
            margin-bottom: 1rem;
        }

        .st-price-range-wrap {
            padding: 2rem 0 0.5rem;
        }

        .st-price-track {
            height: 5px;
        }

        .st-price-slider {
            height: 36px;
        }

        .st-price-slider::-webkit-slider-thumb {
            width: 26px;
            height: 26px;
            border-width: 3px;
            margin-top: 5px;
            box-shadow: 0 2px 10px rgba(47,127,255,0.45);
        }

        .st-price-slider::-webkit-slider-thumb:active {
            transform: scale(1.15);
        }

        .st-price-slider::-moz-range-thumb {
            width: 26px;
            height: 26px;
            border-width: 3px;
        }

        .st-price-bubble {
            font-size: 0.625rem;
            padding: 0.1875rem 0.5rem;
            border-radius: 6px;
        }

        .st-price-display {
            margin-top: 0.75rem;
            gap: 0.625rem;
        }

        .st-price-tag-label {
            font-size: 0.5rem;
        }

        .st-price-tag-value {
            font-size: 0.6875rem;
            padding: 0.4375rem 0.625rem;
            min-width: 0;
            width: 100%;
        }
    }

    @media (max-width: 480px) {
        .st-price-range-panel {
            padding: 0.875rem;
        }

        .st-price-display {
            flex-direction: row;
            gap: 0.5rem;
        }

        .st-price-tag-value {
            font-size: 0.6875rem;
        }

        .st-price-bubble {
            display: none;
        }
    }

    /* ── INFO BAR MOBILE LAYOUT ── */
    @media (max-width: 768px) {
        .st-info-bar {
            padding: 0.875rem 1rem;
        }

        /* Switch top row from horizontal to a clean stacked layout:
           row 1: Title + count badge
           row 2: Description
           row 3: Controls (sort + view toggle) on the right */
        .st-info-bar-top {
            flex-direction: column;
            align-items: stretch;
            gap: 0.75rem;
        }

        .st-info-bar-top > div:first-child {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            min-width: 0;
        }

        .st-info-bar h1 {
            font-size: 1.0625rem;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .st-info-bar h1 > span:first-child {
            font-size: 1.0625rem;
        }

        .st-info-bar h1 .count-badge {
            font-size: 0.6875rem;
            padding: 0.1875rem 0.5rem;
        }

        .st-info-bar p {
            font-size: 0.6875rem;
            line-height: 1.5;
            margin-top: 0;
        }

        /* Controls row: full width, sort grows, view-toggle stays right */
        .st-info-bar-right {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            width: 100%;
            padding-top: 0.625rem;
            border-top: 1px solid var(--text-slate-100);
        }

        .st-info-bar-right .st-sort-wrapper {
            flex: 1;
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 0.375rem;
        }

        .st-info-bar-right .st-sort-select {
            flex: 1;
            min-width: 0;
            width: 100%;
            font-size: 0.6875rem;
            padding: 0.5rem 0.625rem;
            border-radius: 10px;
        }

        .st-info-bar-right .st-view-toggle {
            flex-shrink: 0;
            padding: 0.1875rem;
            border-radius: 10px;
        }

        .st-info-bar-right .st-view-btn {
            padding: 0.3125rem;
        }

        .st-info-bar-right .st-view-btn svg {
            width: 14px;
            height: 14px;
        }

        .st-sort-wrapper label {
            display: none;
        }
    }

    @media (max-width: 480px) {
        .st-info-bar {
            padding: 0.75rem 0.875rem;
            border-radius: 12px;
        }

        .st-info-bar h1 {
            font-size: 0.9375rem;
        }

        .st-info-bar h1 > span:first-child {
            font-size: 0.9375rem;
        }

        .st-info-bar h1 .count-badge {
            font-size: 0.625rem;
            padding: 0.125rem 0.4375rem;
        }

        .st-info-bar p {
            font-size: 0.625rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .st-info-bar-right {
            gap: 0.375rem;
            padding-top: 0.5rem;
        }
    }

    @media (max-width: 640px) {
        .staytics-wrapper{
            margin-top: 85px;
        }
    
        .st-main{
            padding: 0;
            max-width: 90%;
        }
        .st-btn-add-mobile {
            display: flex;
        }
        .st-list-card {
            flex-direction: column;
        }
        .st-list-card-image {
            width: 100%;
            height: 200px;
        }
        .st-list-card-right {
            flex-direction: row;
            border-left: none;
            border-top: 1px solid var(--text-slate-100);
            padding-left: 0;
            padding-top: 1rem;
            justify-content: space-between;
        }
        .st-quickview-inner {
            flex-direction: column;
        }
        .st-quickview-image-col,
        .st-quickview-details-col {
            width: 100%;
            /* Drop the hard max-height: 50vh / 90vh caps on mobile —
               they were truncating the image and the add-to-cart row.
               The flex/min-height: 0 rules above now govern sizing. */
            max-height: none;
        }
        .st-quickview-image-col {
            /* Only contains the main image now — no more hard cap. */
            max-height: none;
        }
        .st-quickview-main-img {
            /* Switch to a slightly flatter ratio on phones so the
               details column below has room to breathe. */
            aspect-ratio: 4 / 3;
        }
        .st-quickview-add-row {
            flex-shrink: 0;
            padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
        }
    }

    /* ── CUSTOM SCROLLBAR ── */
    .st-cart-body::-webkit-scrollbar,
    .st-quickview-details-col::-webkit-scrollbar,
    .st-quickview-image-col::-webkit-scrollbar {
        width: 4px;
    }

    .st-cart-body::-webkit-scrollbar-track,
    .st-quickview-details-col::-webkit-scrollbar-track,
    .st-quickview-image-col::-webkit-scrollbar-track {
        background: transparent;
    }

    .st-cart-body::-webkit-scrollbar-thumb,
    .st-quickview-details-col::-webkit-scrollbar-thumb,
    .st-quickview-image-col::-webkit-scrollbar-thumb {
        background: var(--text-slate-200);
        border-radius: 4px;
    }