/*
|--------------------------------------------------------------------------
| SimpleShop - Mosaic Theme (ss_mosaic)
|--------------------------------------------------------------------------
| Industrial-geometric meets marketplace energy
| Unbounded (display) + Commissioner (body)
| 6px micro-round, warm neutral bg, dark textured footer
| Staggered hover buttons, circle badges, accent section headings
|--------------------------------------------------------------------------
*/

/* ============================================
   0. SELF-HOSTED FONTS (Unbounded + Commissioner)
   ============================================ */

/* Unbounded - Geometric display font */
@font-face {
    font-family: 'Unbounded';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('../fonts/unbounded/unbounded-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Unbounded';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('../fonts/unbounded/unbounded-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Commissioner - Variable-weight body font */
@font-face {
    font-family: 'Commissioner';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/commissioner/commissioner-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Commissioner';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/commissioner/commissioner-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../../../assets/vendor/fontawesome/webfonts/fa-brands-400-subset.woff2') format('woff2'),
         url('../../../../assets/vendor/fontawesome/webfonts/fa-brands-400-subset.ttf') format('truetype');
}
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../../../assets/vendor/fontawesome/webfonts/fa-regular-400.woff2') format('woff2'),
         url('../../../../assets/vendor/fontawesome/webfonts/fa-regular-400.ttf') format('truetype');
}
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../../../../assets/vendor/fontawesome/webfonts/fa-solid-900-subset.woff2') format('woff2'),
         url('../../../../assets/vendor/fontawesome/webfonts/fa-solid-900-subset.ttf') format('truetype');
}

/* ============================================
   1. CSS CUSTOM PROPERTIES (Default: Blue)
   ============================================ */
:root {
    /* -- Brand Colors (overridden by palette classes) -- */
    --ss-primary: #2a89d4;
    --ss-primary-hover: #519fdd;
    --ss-primary-dark: #226da9;
    --ss-primary-light: #e9f3fb;
    --ss-primary-rgb: 42, 137, 212;

    /* -- Accent (CTA gradient endpoints) -- */
    --ss-accent-start: #226da9;
    --ss-accent-mid: #2a89d4;
    --ss-accent-end: #7fb9e6;

    /* -- Mosaic Layout -- */
    --ss-body-bg: #f8fafc;
    --ss-card-bg: #ffffff;
    --ss-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    --ss-card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
    --ss-card-radius: 6px;
    --ss-card-radius-sm: 4px;

    /* -- Mosaic Typography -- */
    --ss-font: 'Commissioner', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ss-font-display: 'Unbounded', sans-serif;
    --ss-text: #1f2937;
    --ss-text-muted: #6b7280;
    --ss-text-light: #9ca3af;

    /* -- Header / Footer -- */
    --ss-header-bg: #ffffff;
    --ss-topbar-bg: #eeedeb;
    --ss-topbar-text: #4b5563;
    --ss-footer-bg: #1e1e1e;
    --ss-footer-text: #a0a0a0;
    --ss-footer-heading: #ffffff;

    /* -- Borders & Dividers -- */
    --ss-border: #e5e7eb;
    --ss-border-light: #f3f4f6;
    --ss-divider: #f1f5f9;

    /* -- Status Colors -- */
    --ss-success: #059669;
    --ss-success-light: #d1fae5;
    --ss-danger: #dc2626;
    --ss-danger-light: #fee2e2;
    --ss-warning: #d97706;
    --ss-warning-light: #fef3c7;
    --ss-info: #0284c7;
    --ss-info-light: #e0f2fe;

    /* -- Price Colors -- */
    --ss-price-normal: #1f2937;
    --ss-price-promo: #dc2626;
    --ss-price-old: #9ca3af;
    --ss-price-eur: var(--ss-primary);

    /* -- Badge Colors -- */
    --ss-badge-new: linear-gradient(135deg, #059669, #10b981);
    --ss-badge-featured: linear-gradient(135deg, #7c3aed, #8b5cf6);
    --ss-badge-promo: linear-gradient(135deg, #dc2626, #ef4444);

    /* -- Transitions -- */
    --ss-transition: 0.3s ease;
    --ss-transition-fast: 0.15s ease;
    --ss-transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* -- Mosaic-specific Custom Properties -- */
    --mz-nav-text: #ffffff;
    --mz-stagger-delay: 0.08s;
    --mz-badge-size: 42px;
    --mz-step-size: 38px;
    --mz-pattern-opacity: 0.04;
    --mz-stripe-color: rgba(255, 255, 255, 0.03);
}
[x-cloak] { display: none !important; }

/* ============================================
   2. COLOR PALETTE CLASSES
   ============================================ */

/* -- Blue (Default) -- */
.palette-blue {
    --ss-primary: #2a89d4;
    --ss-primary-hover: #519fdd;
    --ss-primary-dark: #226da9;
    --ss-primary-light: #e9f3fb;
    --ss-primary-rgb: 42, 137, 212;
    --ss-accent-start: #226da9;
    --ss-accent-mid: #2a89d4;
    --ss-accent-end: #7fb9e6;
    --ss-price-eur: #2a89d4;
}

/* -- Green (Classic) -- */
.palette-green {
    --ss-primary: #087d5f;
    --ss-primary-hover: #09a372;
    --ss-primary-dark: #157c56;
    --ss-primary-light: #d1fae5;
    --ss-primary-rgb: 8, 125, 95;
    --ss-accent-start: #067852;
    --ss-accent-mid: #09a372;
    --ss-accent-end: #19d389;
    --ss-price-eur: #09a372;
}

/* -- Navy -- */
.palette-navy {
    --ss-primary: #1e3a5f;
    --ss-primary-hover: #2c5282;
    --ss-primary-dark: #1a365d;
    --ss-primary-light: #bee3f8;
    --ss-primary-rgb: 30, 58, 95;
    --ss-accent-start: #1a365d;
    --ss-accent-mid: #2c5282;
    --ss-accent-end: #4299e1;
    --ss-price-eur: #2c5282;
}

/* -- Red -- */
.palette-red {
    --ss-primary: #fb5950;
    --ss-primary-hover: #fc7a73;
    --ss-primary-dark: #dc3d35;
    --ss-primary-light: #fee2e2;
    --ss-primary-rgb: 251, 89, 80;
    --ss-accent-start: #dc3d35;
    --ss-accent-mid: #fb5950;
    --ss-accent-end: #fd9b96;
    --ss-price-eur: #fb5950;
    --ss-footer-bg: linear-gradient(135deg, #0c2340 0%, #162d50 100%);
}

/* -- Purple -- */
.palette-purple {
    --ss-primary: #a956a9;
    --ss-primary-hover: #bf6dbf;
    --ss-primary-dark: #7e3d7e;
    --ss-primary-light: #f3e5f5;
    --ss-primary-rgb: 169, 86, 169;
    --ss-accent-start: #7e3d7e;
    --ss-accent-mid: #a956a9;
    --ss-accent-end: #ce93d8;
    --ss-price-eur: #a956a9;
}

/* -- Teal -- */
.palette-teal {
    --ss-primary: #0d9488;
    --ss-primary-hover: #14b8a6;
    --ss-primary-dark: #0f766e;
    --ss-primary-light: #ccfbf1;
    --ss-primary-rgb: 13, 148, 136;
    --ss-accent-start: #0f766e;
    --ss-accent-mid: #0d9488;
    --ss-accent-end: #2dd4bf;
    --ss-price-eur: #0d9488;
}

/* -- Indigo -- */
.palette-indigo {
    --ss-primary: #4f46e5;
    --ss-primary-hover: #6366f1;
    --ss-primary-dark: #3730a3;
    --ss-primary-light: #e0e7ff;
    --ss-primary-rgb: 79, 70, 229;
    --ss-accent-start: #3730a3;
    --ss-accent-mid: #4f46e5;
    --ss-accent-end: #818cf8;
    --ss-price-eur: #4f46e5;
}

/* -- Amber -- */
.palette-amber {
    --ss-primary: #b45309;
    --ss-primary-hover: #d97706;
    --ss-primary-dark: #92400e;
    --ss-primary-light: #fef3c7;
    --ss-primary-rgb: 180, 83, 9;
    --ss-accent-start: #92400e;
    --ss-accent-mid: #b45309;
    --ss-accent-end: #f59e0b;
    --ss-price-eur: #b45309;
}

/* -- Slate -- */
.palette-slate {
    --ss-primary: #475569;
    --ss-primary-hover: #64748b;
    --ss-primary-dark: #334155;
    --ss-primary-light: #e2e8f0;
    --ss-primary-rgb: 71, 85, 105;
    --ss-accent-start: #334155;
    --ss-accent-mid: #475569;
    --ss-accent-end: #94a3b8;
    --ss-price-eur: #475569;
}

/* -- Plum -- */
.palette-plum {
    --ss-primary: #7c3aed;
    --ss-primary-hover: #8b5cf6;
    --ss-primary-dark: #5b21b6;
    --ss-primary-light: #ede9fe;
    --ss-primary-rgb: 124, 58, 237;
    --ss-accent-start: #5b21b6;
    --ss-accent-mid: #7c3aed;
    --ss-accent-end: #a78bfa;
    --ss-price-eur: #7c3aed;
}

/* -- Coral -- */
.palette-coral {
    --ss-primary: #c2410c;
    --ss-primary-hover: #ea580c;
    --ss-primary-dark: #9a3412;
    --ss-primary-light: #ffedd5;
    --ss-primary-rgb: 194, 65, 12;
    --ss-accent-start: #9a3412;
    --ss-accent-mid: #c2410c;
    --ss-accent-end: #fb923c;
    --ss-price-eur: #c2410c;
}

/* -- Wine -- */
.palette-wine {
    --ss-primary: #351E28;
    --ss-primary-hover: #4d2d3d;
    --ss-primary-dark: #231318;
    --ss-primary-light: #f0e4e9;
    --ss-primary-rgb: 53, 30, 40;
    --ss-accent-start: #231318;
    --ss-accent-mid: #351E28;
    --ss-accent-end: #6b4558;
    --ss-price-eur: #351E28;
}

/* -- Orange -- */
.palette-orange {
    --ss-primary: #f59414;
    --ss-primary-hover: #d97f0d;
    --ss-primary-dark: #b5690a;
    --ss-primary-light: #fef3e2;
    --ss-primary-rgb: 245, 148, 20;
    --ss-accent-start: #b5690a;
    --ss-accent-mid: #f59414;
    --ss-accent-end: #f9b84e;
    --ss-price-eur: #d97f0d;
}
.palette-brown {
    --ss-primary: #795740;
    --ss-primary-hover: #8d6a52;
    --ss-primary-dark: #5e4332;
    --ss-primary-light: #f3ece7;
    --ss-primary-rgb: 121, 87, 64;
    --ss-accent-start: #5e4332;
    --ss-accent-mid: #795740;
    --ss-accent-end: #a07d66;
    --ss-price-eur: #795740;
}

/* ============================================
   3. GLOBAL RESETS & TYPOGRAPHY
   ============================================ */

html, body {
    font-family: var(--ss-font);
}

body {
    background: var(--ss-body-bg);
    color: var(--ss-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main {
    flex: 1;
}

/* Geometric display headings */
h1, h2, h3 {
    font-family: var(--ss-font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

h4, h5, h6 {
    font-family: var(--ss-font);
    font-weight: 600;
    text-wrap: balance;
}

::selection {
    background: var(--ss-primary-light);
    color: var(--ss-primary-dark);
}

a {
    color: var(--ss-primary);
    text-decoration: none;
    transition: color var(--ss-transition-fast);
}
a:hover {
    color: var(--ss-primary-hover);
}

img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   4. BOOTSTRAP 5 OVERRIDES
   ============================================ */

/* -- Buttons (solid, micro-round, geometric feel) -- */
.btn-primary {
    --bs-btn-bg: var(--ss-primary);
    --bs-btn-border-color: var(--ss-primary);
    --bs-btn-hover-bg: var(--ss-primary-hover);
    --bs-btn-hover-border-color: var(--ss-primary-hover);
    --bs-btn-active-bg: var(--ss-primary-dark);
    --bs-btn-active-border-color: var(--ss-primary-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-color: #fff;
    background: var(--ss-primary);
    background-color: var(--ss-primary);
    border: none;
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    transition: background-color var(--ss-transition), transform var(--ss-transition), box-shadow var(--ss-transition);
    box-shadow: 0 2px 6px rgba(var(--ss-primary-rgb), 0.2);
    border-radius: var(--ss-card-radius);
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--ss-primary-hover);
    background-color: var(--ss-primary-hover);
    border: none;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(var(--ss-primary-rgb), 0.3);
}
.btn-primary:active {
    background: var(--ss-primary-dark);
    border: none;
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(var(--ss-primary-rgb), 0.2);
}
.btn-primary.btn-sm {
    font-weight: 600;
    padding: 6px 16px;
    font-size: 0.8rem;
}
.btn-primary.btn-lg {
    font-weight: 700;
    padding: 14px 32px;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
}

.btn-outline-primary {
    --bs-btn-color: var(--ss-primary);
    --bs-btn-border-color: var(--ss-primary);
    --bs-btn-hover-bg: var(--ss-primary);
    --bs-btn-hover-border-color: var(--ss-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ss-primary-dark);
    --bs-btn-active-border-color: var(--ss-primary-dark);
    --bs-btn-active-color: #fff;
    color: var(--ss-primary);
    border-color: var(--ss-primary);
    border-radius: var(--ss-card-radius);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--ss-primary);
    border-color: var(--ss-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--ss-primary-rgb), 0.25);
}

/* -- Cards -- */
.card {
    border-radius: var(--ss-card-radius-sm);
    border-color: var(--ss-border-light);
    box-shadow: var(--ss-card-shadow);
    transition: box-shadow var(--ss-transition-smooth), transform var(--ss-transition-smooth);
}

/* -- Forms -- */
.form-control,
.form-select {
    border-radius: var(--ss-card-radius);
    border: 1.5px solid var(--ss-border);
    transition: border-color var(--ss-transition-fast), box-shadow var(--ss-transition-fast);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--ss-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--ss-primary-rgb), 0.12);
}

/* -- Pagination (pill-style, micro-round) -- */
.pagination {
    gap: 4px;
    flex-wrap: wrap;
}
.page-link {
    color: var(--ss-text);
    background: var(--ss-card-bg);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-card-radius) !important;
    padding: 7px 13px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
    min-width: 38px;
    text-align: center;
    transition: color var(--ss-transition-fast), background var(--ss-transition-fast), border-color var(--ss-transition-fast), transform var(--ss-transition-fast), box-shadow var(--ss-transition-fast);
}
.page-link:hover {
    color: var(--ss-primary-dark);
    background: var(--ss-primary-light);
    border-color: var(--ss-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(var(--ss-primary-rgb), 0.15);
}
.page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--ss-primary-rgb), 0.15);
    z-index: 3;
}
.page-item.active .page-link {
    background: var(--ss-primary);
    border-color: var(--ss-primary);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(var(--ss-primary-rgb), 0.3);
}
.page-item.disabled .page-link {
    color: var(--ss-text-light);
    background: var(--ss-body-bg);
    border-color: var(--ss-border-light);
    opacity: 0.6;
    pointer-events: none;
}
/* Override Bootstrap connected borders - we use gap instead */
.page-item:not(:first-child) .page-link {
    margin-left: 0;
}
/* Prev/Next arrow buttons */
.ss-page-arrow {
    color: var(--ss-primary) !important;
    background: var(--ss-primary-light) !important;
    border-color: rgba(var(--ss-primary-rgb), 0.2) !important;
    padding: 7px 13px;
    min-width: 38px;
    font-size: 0.85rem;
    border-radius: var(--ss-card-radius) !important;
}
.ss-page-arrow:hover {
    background: var(--ss-primary) !important;
    border-color: var(--ss-primary) !important;
    color: #fff !important;
}
.page-item.disabled .ss-page-arrow {
    background: var(--ss-body-bg) !important;
    border-color: var(--ss-border-light) !important;
    color: var(--ss-text-light) !important;
    opacity: 0.5;
}
/* Pagination divider */
.ss-pagination-divider {
    border-top: 2px solid var(--ss-border);
    margin: 10px 25px 0;
}
/* Responsive: smaller on mobile */
@media (max-width: 575.98px) {
    .page-link {
        padding: 5px 10px;
        font-size: 0.8rem;
        min-width: 34px;
    }
    .ss-page-arrow {
        padding: 5px 12px;
    }
    .ss-pagination-divider {
        margin: 5px 15px 0;
    }
}

/* -- Breadcrumbs (geometric bar with accent divider) -- */
.breadcrumb {
    --bs-breadcrumb-divider: "›";
    padding: 10px 16px;
    margin: 10px 0 10px;
    background: var(--ss-card-bg);
    border-radius: var(--ss-card-radius);
    font-size: 0.85rem;
    border: 1px solid var(--ss-border-light);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    align-items: center;
}
.breadcrumb-item {
    display: inline-flex;
    align-items: center;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: #bdbdbd;
    font-size: 0.9rem;
    float: none;
}
.breadcrumb-item a {
    color: #6b7280;
    text-decoration: none;
    transition: color 0.15s;
}
.breadcrumb-item a:hover {
    color: var(--ss-primary);
    text-decoration: none;
}
.breadcrumb-item.active {
    color: var(--ss-text-muted);
}

/* Badge-link: highlighted category in product breadcrumbs */
.breadcrumb-item a.ss-breadcrumb-badge {
    background: var(--ss-primary);
    color: #fff !important;
    border-radius: var(--ss-card-radius);
    padding: 3px 14px;
    font-size: 0.85rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    text-decoration: none !important;
    display: inline-block;
    transition: background 0.2s;
}
.breadcrumb-item a.ss-breadcrumb-badge:hover {
    background: var(--ss-primary-dark);
    color: #fff !important;
}

/* -- Badges -- */
.badge.bg-primary {
    background: var(--ss-primary) !important;
}

/* -- Alerts -- */
.alert {
    border-radius: var(--ss-card-radius-sm);
}

/* -- Nav Tabs / Pills -- */
.nav-link {
    color: var(--ss-text-muted);
    transition: color var(--ss-transition-fast);
    border-radius: var(--ss-card-radius);
}
.nav-link:hover {
    color: var(--ss-primary);
}
.nav-link.active,
.nav-pills .nav-link.active {
    color: #fff;
    background: var(--ss-primary);
    border-radius: var(--ss-card-radius);
}
.nav-tabs .nav-link.active {
    color: var(--ss-primary);
    background: transparent;
    border-bottom-color: var(--ss-primary);
}

/* -- Modal (micro-round, clean shadow) -- */
.modal-content {
    border-radius: var(--ss-card-radius);
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

/* -- Dropdown -- */
.dropdown-menu {
    border-radius: var(--ss-card-radius);
    border: 1px solid var(--ss-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--ss-primary-light);
    color: var(--ss-primary-dark);
}

/* -- Progress -- */
.progress-bar {
    background: var(--ss-primary);
}

/* -- Accordion -- */
.accordion-button:not(.collapsed) {
    background: var(--ss-primary-light);
    color: var(--ss-primary-dark);
    box-shadow: none;
}
.accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--ss-primary-rgb), 0.15);
    border-color: var(--ss-primary);
}

/* ============================================
   5. HEADER & NAVIGATION (3-row: topbar, main, colored nav)
   ============================================ */

/* -- Notification Bar -- */
.ss-notification-bar {
    font-size: 13px;
    padding: 6px 0;
    text-align: center;
}
.ss-notification-bar p { margin: 0; }
.ss-notification-bar a { color: inherit; text-decoration: underline; }

/* -- Top Bar (warm neutral) -- */
.ss-topbar {
    background: var(--ss-topbar-bg);
    border-bottom: 1px solid var(--ss-border);
    padding: 6px 0;
    font-size: 13px;
}
.ss-topbar .row > [class*="col-"] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ss-topbar a {
    color: #6c757d;
    text-decoration: none;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ss-topbar a:hover {
    color: var(--ss-primary);
}
.ss-topbar-phone {
    color: var(--ss-primary) !important;
    font-weight: 600;
    background: var(--ss-card-bg);
    padding: 5px 12px;
    border-radius: var(--ss-card-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.ss-topbar-phone:hover {
    background: var(--ss-primary) !important;
    color: white !important;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .ss-topbar { font-size: 12px; }
    .ss-topbar .me-3 { margin-right: 0.5rem !important; }
    .ss-topbar-phone { padding: 4px 8px; font-size: 12px; }
}
.ss-topbar-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 13px;
}
.ss-topbar-lang-switch a {
    padding: 2px 6px;
    border-radius: var(--ss-card-radius-sm);
    font-size: 13px;
    letter-spacing: 0.3px;
}
.ss-topbar-lang-switch a.active {
    color: var(--ss-primary) !important;
    background: rgba(var(--ss-primary-rgb, 37, 99, 235), 0.1);
    pointer-events: none;
}

/* -- Main Header (sticky, clean) -- */
.ss-header {
    background: var(--ss-header-bg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 16px 0;
    position: sticky;
    top: -2px;
    z-index: 1030;
    contain: layout style;
}
.ss-logo img {
    max-height: 55px;
    transition: transform 0.3s ease;
}
.ss-logo:hover img {
    transform: scale(1.02);
}

/* -- Search Box -- */
.ss-search-box {
    position: relative;
    flex: 1;
    max-width: 65%;
    min-width: 0;
    margin: 0 auto;
}
.ss-search-box .input-group {
    display: flex;
    align-items: stretch;
    width: 85%;
    margin: 0 auto;
}
.ss-search-box .form-control {
    border: 2px solid var(--ss-border);
    border-radius: var(--ss-card-radius) 0 0 var(--ss-card-radius);
    border-right: none;
    padding: 14px 20px;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
    height: 48px;
    flex: 1;
}
.ss-search-box .form-control:focus {
    border-color: var(--ss-primary);
    box-shadow: 0 0 0 0.15rem rgba(var(--ss-primary-rgb), 0.1);
    outline: none;
}
.ss-search-box .btn-search {
    background: var(--ss-primary);
    border-radius: 0 var(--ss-card-radius) var(--ss-card-radius) 0;
    padding: 0 20px;
    transition: background 0.2s;
    height: 48px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    color: #fff;
}
.ss-search-box .btn-search:hover {
    background: var(--ss-primary-dark);
}
.ss-search-box .btn-search i {
    color: white;
    font-size: 16px;
}

/* -- Live Search Dropdown -- */
.ss-live-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-card-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1050;
    margin-top: 4px;
    max-height: 480px;
    overflow-y: auto;
}
.ss-live-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--ss-text);
    border-bottom: 1px solid var(--ss-border-light);
    transition: background 0.15s;
}
.ss-live-search-item:hover {
    background: rgba(var(--ss-primary-rgb), 0.04);
    color: var(--ss-text);
}
.ss-live-search-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: var(--ss-card-radius-sm);
    flex-shrink: 0;
    background: #f8f8f8;
}
.ss-live-search-info {
    flex: 1;
    min-width: 0;
}
.ss-live-search-title {
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ss-live-search-meta {
    font-size: 0.75rem;
    color: var(--ss-text-muted);
}
.ss-live-search-price {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ss-primary);
    font-variant-numeric: tabular-nums;
}
.ss-live-search-old {
    text-decoration: line-through;
    color: var(--ss-text-muted);
    font-weight: 400;
    font-size: 0.75rem;
    margin-right: 4px;
}
.ss-live-search-all {
    display: block;
    text-align: center;
    padding: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ss-primary);
    text-decoration: none;
    border-top: 1px solid var(--ss-border-light);
}
.ss-live-search-all:hover {
    background: rgba(var(--ss-primary-rgb), 0.04);
}

/* -- Desktop Actions (wishlist, cart, user) -- */
.ss-desktop-actions {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-shrink: 0;
    min-width: fit-content;
}
.ss-action-icon {
    color: var(--ss-text);
    text-decoration: none;
    position: relative;
    font-size: 20px;
    transition: color 0.2s;
    min-width: 24px;
    text-align: center;
}
.ss-action-icon:hover {
    color: var(--ss-primary);
}

/* -- Cart Button (solid, geometric shape) -- */
.ss-cart-btn {
    background: var(--ss-primary);
    color: white;
    padding: 12px 22px;
    border-radius: var(--ss-card-radius);
    text-decoration: none;
    min-width: 112px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
    position: relative;
    overflow: hidden;
    font-weight: 500;
}
.ss-cart-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s;
}
.ss-cart-btn:hover::before {
    left: 100%;
}
.ss-cart-btn:hover {
    color: white;
    text-decoration: none;
    transform: translateY(-1px);
    background: var(--ss-primary-dark);
    box-shadow: 0 4px 14px rgba(var(--ss-primary-rgb), 0.3);
}
.ss-cart-btn i {
    font-size: 20px;
}
.ss-cart-btn-text {
    line-height: 1;
}
.ss-cart-btn-label {
    font-size: 12px;
    opacity: 0.9;
    margin-bottom: 2px;
}
.ss-cart-btn-count {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    min-width: 78px;
    font-variant-numeric: tabular-nums;
}

/* -- Wishlist / Cart Badges (icon variant) -- */
.ss-cart-badge,
.ss-wishlist-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    font-size: 0.6rem;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    padding: 0 4px;
    transition: opacity 0.15s ease;
}
.ss-badge-hidden {
    opacity: 0;
    pointer-events: none;
}

/* -- Category Navigation (COLORED BAR - Mosaic signature) -- */
.ss-navigation,
.ss-navigation.mz-nav-colored {
    background: var(--ss-primary);
    border-top: none;
    border-bottom: none;
}
.ss-navigation .container {
    padding-left: 15px;
    padding-right: 15px;
}
.ss-navigation .nav-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ss-navigation .nav-list > li {
    position: relative;
}
.ss-navigation .nav-list > li > a {
    color: var(--mz-nav-text);
    padding: 14px 14px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.01em;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    position: relative;
    border-radius: 0;
    transition: background 0.2s, color 0.2s;
}
/* Underline animation (bottom bar) */
.ss-navigation .nav-list > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: #fff;
    transform: translateX(-50%);
    transition: width 0.3s ease;
}
.ss-navigation .nav-list > li:hover > a::after,
.ss-navigation .nav-list > li.active > a::after {
    width: 80%;
}
/* Hover: lighter bg on colored bar */
.ss-navigation .nav-list > li > a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: var(--ss-card-radius-sm);
}
/* Active */
.ss-navigation .nav-list > li.active > a {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: var(--ss-card-radius-sm);
    font-weight: 600;
}
/* Dropdown - hover-based */
.ss-navigation .nav-list > li.dropdown {
    position: relative;
}
.ss-navigation .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    background: #fff;
    border: 1px solid var(--ss-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-radius: var(--ss-card-radius);
    margin: 0;
    padding: 6px 0;
    min-width: 220px;
    list-style: none;
}
.ss-navigation .nav-list > li.dropdown:hover > .dropdown-menu {
    display: block;
}
.ss-navigation .nav-list > li.dropdown > .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    width: 100%;
    height: 12px;
    pointer-events: none; /* Hover bridge - must not steal clicks from the button it overlaps */
}
.ss-navigation .dropdown-menu .dropdown-item {
    display: block;
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, padding-left 0.2s;
}
.ss-navigation .dropdown-menu .dropdown-item:hover {
    background: var(--ss-primary-light);
    color: var(--ss-primary);
    padding-left: 25px;
}
.ss-navigation .dropdown-menu .dropdown-item.active {
    background: var(--ss-primary-light);
    color: var(--ss-primary);
    font-weight: 600;
    border-left: 3px solid var(--ss-primary);
}
.ss-navigation .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 4px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
/* Auto-menu: push items to right */
.ss-navigation .nav-list > li.nav-auto-new {
    margin-left: auto;
}
.ss-navigation .nav-list > li.nav-auto-promo {
    margin-left: auto;
}
.ss-navigation .nav-list > li.nav-auto-new ~ li.nav-auto-promo {
    margin-left: 0;
}
/* Auto-menu: Promo + New - same white as other nav items on colored bar */

/* -- Priority+ Navigation (overflow -> "More") -- */
.nav-priority-hidden { display: none !important; }
.ss-navigation .nav-list > li.nav-more > .nav-more-trigger {
    color: var(--mz-nav-text);
    padding: 14px 12px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
    background: none;
    border: none;
    font-family: inherit;
    line-height: inherit;
}
.ss-navigation .nav-list > li.nav-more > .nav-more-trigger:hover,
.ss-navigation .nav-list > li.nav-more > .nav-more-trigger:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}
.ss-navigation .nav-list > li.nav-more {
    margin-left: 0;
}

/* -- Mobile Header -- */
.ss-mobile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}
.ss-hamburger {
    background: var(--ss-primary);
    border: none;
    padding: 12px;
    border-radius: var(--ss-card-radius);
    color: white;
    font-size: 18px;
    transition: background 0.2s;
    flex-shrink: 0;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ss-hamburger:hover {
    background: var(--ss-primary-dark);
}
.ss-logo-mobile {
    flex: 1;
    min-width: 0;
}
.ss-logo-mobile img {
    max-height: 36px;
}
.ss-mobile-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-right: 10px;
}
.ss-mobile-actions a,
.ss-mobile-search-trigger {
    color: #333;
    text-decoration: none;
    position: relative;
    font-size: 16px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 1;
}
.ss-mobile-divider {
    width: 1px;
    height: 20px;
    background: var(--ss-border);
}

/* -- Mobile Side Nav -- */
.ss-sidenav {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100vh;
    background: #fff;
    z-index: 1050;
    transition: left var(--ss-transition);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
}
.ss-sidenav.open {
    left: 0;
}
.ss-sidenav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1049;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ss-transition), visibility var(--ss-transition);
}
.ss-sidenav-overlay.open {
    opacity: 1;
    visibility: visible;
}
.ss-sidenav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid var(--ss-border);
}
.ss-sidenav-header .btn-close {
    filter: brightness(0) invert(1);
}
.ss-sidenav-links li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid var(--ss-border-light);
    font-size: 14px;
    transition: background 0.2s, padding-left 0.2s, color 0.2s;
}
.ss-sidenav-links li a:hover {
    background: var(--ss-primary-light);
    padding-left: 20px;
    color: var(--ss-primary);
}

/* ============================================
   6. PRODUCT CARDS + STAGGERED HOVER (Mosaic Signature)
   ============================================ */

/* -- Base Card -- */
.ss-product-card {
    position: relative;
    background: var(--ss-card-bg);
    border-radius: var(--ss-card-radius);
    overflow: hidden;
    transition: transform var(--ss-transition-smooth), box-shadow var(--ss-transition-smooth);
    margin-bottom: 20px;
    min-height: 440px;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: var(--ss-card-shadow);
}
.ss-product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ss-card-shadow-hover);
}

/* Carousel variant (compact) */
.ss-product-card-sm {
    min-height: 380px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: none;
}
.ss-product-card-sm:hover {
    transform: translateY(-2px);
    box-shadow: var(--ss-card-shadow);
    border-color: rgba(var(--ss-primary-rgb), 0.2);
}

/* -- Image Container -- */
.ss-product-image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: #fff;
}
.ss-product-image > a.d-block {
    height: 100%;
}
.ss-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 10px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
}
.ss-product-card:hover .ss-product-image img {
    transform: scale(1.04);
}
.ss-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ss-body-bg);
}
.ss-no-image i {
    font-size: 3rem;
    color: #c0c4c8;
}

/* -- Badges (CIRCLE badges - Mosaic signature) -- */
.ss-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 12;
    text-align: center;
}
.ss-badge {
    padding: 0;
    border-radius: 20%;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    font-weight: 700;
    width: var(--mz-badge-size);
    height: var(--mz-badge-size);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}
.ss-badge-new,
.ss-badge-featured {
    min-width: var(--mz-badge-size);
    text-align: center;
    width: var(--mz-badge-size);
    height: var(--mz-badge-size);
    border-radius: 20%;
}
.ss-badge-new {
    background: var(--ss-badge-new);
}
.ss-badge-featured {
    background: var(--ss-badge-featured);
}

/* Promo badge - circle, top-right (same size as new/featured) */
.ss-badge-promo {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--ss-badge-promo);
    border-radius: 20%;
    width: var(--mz-badge-size);
    height: var(--mz-badge-size);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    z-index: 12;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    line-height: 1;
    animation: ss-pulse 2s infinite;
}
@keyframes ss-pulse {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.02); }
}

/* Video badge */
.ss-badge-video {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #dc2626;
    border-radius: 20%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 12;
    transition: background var(--ss-transition);
    cursor: pointer;
}
.ss-badge-video:hover {
    background: #b91c1c;
    color: #fff;
}
.ss-badge-video,
.ss-badge-video:hover,
.ss-badge-video i {
    color: #fff !important;
}
/* Shift video badge down when promo badge exists */
.ss-badge-video.with-promo {
    top: 64px;
    right: 14px;
}

/* -- Detail Page Badge Overrides -- */
.ss-badges-detail {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 14;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.ss-badge-promo-detail {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 14;
}
.ss-badge-video-detail {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 14;
}
.ss-badge-video-detail.with-promo {
    bottom: 16px;
    right: 16px;
}

/* -- Free Delivery Badge -- */
.ss-free-delivery-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: var(--ss-card-radius);
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

/* -- Facebook Share Button -- */
.ss-fb-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 20%;
    background: #1877f2;
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
    transition: background 0.2s;
}
.ss-fb-share-btn:hover {
    background: #166fe5;
    color: #fff;
}
.ss-fb-share-btn.ss-notify-btn {
    background: #f59e0b;
}
.ss-fb-share-btn.ss-notify-btn:hover {
    background: #d97706;
}
.ss-fb-share-btn.ss-tbi-btn {
    background: #fff;
    padding: 0;
    overflow: hidden;
    border: 0;
}
.ss-fb-share-btn.ss-tbi-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}
.ss-fb-share-btn.ss-tbi-btn:hover {
    background: #fff;
}
.ss-fb-share-btn.ss-tbi-btn:hover img {
    transform: scale(1.1);
}
/* ── Споделяне във Facebook: скромна връзка в реда под заглавието ── */
.ss-share-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}
.ss-share-inline .fa-facebook-f {
    font-size: 12px;
}
.ss-share-inline:hover,
.ss-share-inline:focus-visible {
    color: #1877f2;
}
/* Редът с телефона и новия бутон на TBI се нарежда по ширината на панела, не на екрана
   (колоната на продукта е тясна и на широк екран). Старият бутон (режим „Статичен") не се пипа. */
.ss-fast-order-panel {
    container-type: inline-size;
}
/* Второто изречение пада само в хоризонталния ред (компютър); на телефон редът е в колона и текстът остава цял. */
@media (min-width: 992px) {
    @container (max-width: 640px) {
        .ss-fast-order-phone:has(.ss-tbi-cta-wrap) .ss-fast-order-phone-extra {
            display: none;
        }
    }
}
@container (max-width: 540px) {
    .ss-fast-order-phone:has(.ss-tbi-cta-wrap) {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
    .ss-product-social-icons:has(.ss-tbi-cta-wrap) {
        width: 100%;
        justify-content: center;
        margin-left: 0 !important;
    }
}
/* Телефон и таблет: бутонът е своя секция на цял ред, със същия разделител като над телефона. */
@media (max-width: 991.98px) {
    .ss-product-social-icons:has(.ss-tbi-cta-wrap) {
        margin-top: 6px;
        padding-top: 14px;
        border-top: 1px solid color-mix(in srgb, var(--ss-primary) 12%, transparent);
    }
    .ss-tbi-cta-wrap {
        flex: 1;
    }
    .ss-tbi-cta {
        width: 100%;
    }
}
.ss-fast-order-phone:has(.ss-tbi-cta-wrap) .ss-fast-order-phone-number {
    font-size: 27px;
}
@media (max-width: 991.98px) {
    .ss-fast-order-phone:has(.ss-tbi-cta-wrap) .ss-fast-order-phone-number {
        font-size: 26px;
    }
}
.ss-product-social-icons {
    gap: 6px;
}

/* -- TBI Modal: theme-aware (matches Swal style) -- */
#ss-tbi-modal .modal-content {
    border: 3px solid var(--ss-primary, #2a89d4) !important;
    border-radius: 18px !important;
    overflow: hidden;
}
#ss-tbi-modal .modal-header {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02), transparent);
    border-bottom: 1px solid var(--ss-border, #e2e8f0);
}
#ss-tbi-modal .modal-title {
    color: var(--ss-primary, #2a89d4);
    font-weight: 700;
}
#ss-tbi-modal .modal-body ol li::marker {
    color: var(--ss-primary, #2a89d4);
    font-weight: 700;
}
#ss-tbi-modal .modal-footer {
    border-top: 1px solid var(--ss-border, #e2e8f0);
}
#ss-tbi-modal .modal-footer .btn-success {
    background: var(--ss-primary, #2a89d4);
    border-color: var(--ss-primary, #2a89d4);
}
#ss-tbi-modal .modal-footer .btn-success:hover {
    filter: brightness(0.92);
}

/* -- Wishlist Button (staggered hover participant) -- */
.ss-wishlist-btn {
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 34px;
    height: 34px;
    border-radius: 20%;
    background: rgba(255, 255, 255, 0.92);
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 13;
    cursor: pointer;
    color: #6b7280;
    font-size: 14px;
    padding: 0;
    line-height: 1;
    /* Staggered hover: start hidden */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s, color 0.2s;
    transition-delay: 0s;
}
.ss-product-card:hover .ss-wishlist-btn {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}
.ss-wishlist-btn:hover {
    background: #fff;
    transform: scale(1.1) translateY(0) !important;
    color: var(--ss-danger);
}
.ss-wishlist-btn.text-danger {
    color: var(--ss-danger);
    opacity: 1;
    transform: translateY(0);
}

/* -- Product Content -- */
.ss-product-content {
    padding: 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 170px;
}

.ss-product-title {
    margin: 0 0 5px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ss-text);
    line-height: 1.4;
    flex: 1;
    transition: color var(--ss-transition);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ss-product-title a {
    color: inherit;
    text-decoration: none;
}
.ss-product-card:hover .ss-product-title,
.ss-product-card:hover .ss-product-title a {
    color: var(--ss-primary);
}

/* -- Color Swatches (in card) -- */
.ss-color-swatches {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.ss-color-swatch {
    width: 16px;
    height: 16px;
    border-radius: 20%;
    border: 2px solid #fff;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.ss-color-swatch-more {
    width: 18px;
    height: 18px;
    border-radius: 20%;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 600;
    color: #6b7280;
    pointer-events: none;
}

/* -- Product Pricing -- */
.ss-product-pricing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--ss-divider);
}

.ss-price-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ss-price-eur {
    font-size: 17px;
    font-weight: 600;
    color: var(--ss-price-eur);
    line-height: 1;
    transition: color var(--ss-transition);
    font-variant-numeric: tabular-nums;
}
.ss-price-eur.promo {
    color: var(--ss-price-promo);
}
.ss-product-card:hover .ss-price-eur {
    color: var(--ss-primary-dark);
}
.ss-product-card:hover .ss-price-eur.promo {
    color: #b91c1c;
}

.ss-price-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, var(--ss-primary), transparent);
    margin: 3px 0;
}

/* Promo price display */
.ss-price-old {
    font-size: 13px;
    color: var(--ss-price-old);
    text-decoration: line-through;
    line-height: 1;
}
.ss-price-from {
    font-size: 0.65em;
    font-weight: 400;
    opacity: 0.55;
    margin-right: 1px;
}
.ss-badge-promo.ss-badge-promo-upto {
    flex-direction: column;
    gap: 2px;
    line-height: 1.1;
}
.ss-badge-promo-upto span {
    font-size: 9px;
    font-weight: 600;
    opacity: 0.85;
}
.ss-price-promo {
    font-size: 17px;
    font-weight: 700;
    color: var(--ss-price-promo);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* "By inquiry" */
.ss-price-inquiry {
    font-size: 14px;
    color: var(--ss-text-muted);
    font-weight: 500;
}

/* -- Action Buttons (card footer - staggered reveal) -- */
.ss-product-actions {
    flex-shrink: 0;
    margin-left: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Variants badge */
.ss-variants-badge {
    background: var(--ss-body-bg);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-card-radius);
    padding: 6px 10px;
    font-size: 9px;
    font-weight: 600;
    color: #64748b;
    text-align: center;
    line-height: 1.3;
    letter-spacing: 0.3px;
    flex-shrink: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 44px;
    text-transform: uppercase;
}
.ss-variants-badge::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 60%;
    height: 1px;
    background: var(--ss-primary);
    opacity: 0.6;
}

/* View button - palette-aware */
/* Глифите на FontAwesome седят 1px над центъра на своята кутия: .fas е
   inline-block с line-height:1, а flex центрира кутията, не мастилото.
   Измерено при бутон 44px: 12px отгоре, 14px отдолу. */
.ss-action-btn > i,
.ss-action-btn-call > i {
    transform: translateY(1px);
}
.ss-action-btn {
    background: var(--ss-primary);
    border: none;
    border-radius: var(--ss-card-radius);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none;
    position: relative;
    z-index: 10;
    /* Staggered hover animation */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s;
    transition-delay: 0s;
}
.ss-action-btn:hover {
    background: var(--ss-primary-dark);
    transform: translateY(-1px) !important;
    color: #fff;
    text-decoration: none;
}

.ss-product-card:hover .ss-action-btn {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(1 * var(--mz-stagger-delay));
}
.ss-product-card:hover .ss-action-btn:nth-child(2) {
    transition-delay: calc(2 * var(--mz-stagger-delay));
}
.ss-product-card:hover .ss-action-btn:nth-child(3) {
    transition-delay: calc(3 * var(--mz-stagger-delay));
}
.ss-product-card:hover .ss-action-btn-call {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(2 * var(--mz-stagger-delay));
}

/* Call button (red) */
.ss-action-btn-call {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    border: none;
    border-radius: var(--ss-card-radius);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none;
    position: relative;
    z-index: 10;
    /* Staggered hover animation */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s;
    transition-delay: 0s;
}
.ss-action-btn-call:hover {
    background: linear-gradient(135deg, #b91c1c, #dc2626);
    transform: translateY(-1px) !important;
    color: #fff;
    text-decoration: none;
}

/* ============================================
   7. PRODUCT LISTING (Category Grid, Sort, Filter)
   ============================================ */

/* -- Category Layout Wrapper -- */
.ss-category-layout {
    background: var(--ss-body-bg);
    min-height: 60vh;
    padding: 0 0 30px;
}

/* -- Filter Sidebar -- */
.ss-filter-sidebar {
    position: sticky;
    top: 120px;
}
.ss-filter-sidebar-inner {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.ss-filter-sidebar-inner::-webkit-scrollbar { width: 4px; }
.ss-filter-sidebar-inner::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.ss-filter-sidebar-inner::-webkit-scrollbar-track { background: transparent; }
.ss-filter-offcanvas {
    visibility: visible !important;
    transition: transform 0.3s ease-in-out !important;
}
.ss-filter-offcanvas:not(.show) {
    pointer-events: none;
}
.ss-filter-panel {
    background: #fff;
    border-radius: var(--ss-card-radius);
    border: 1px solid var(--ss-border);
    overflow: hidden;
    margin-bottom: 10px;
}
.ss-filter-panel-title {
    background: var(--ss-body-bg);
    padding: 10px 14px;
    margin: 0;
    font-weight: 600;
    font-size: 13px;
    color: #374151;
    border-bottom: 1px solid var(--ss-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ss-filter-panel-title i {
    margin-right: 6px;
    color: var(--ss-primary);
}
.ss-filter-panel-title .clear-btn {
    color: #9ca3af;
    font-size: 11px;
    text-decoration: none;
    padding: 0;
    width: 24px;
    height: 24px;
    border-radius: var(--ss-card-radius-sm);
    border: none;
    background: transparent;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ss-filter-panel-title .clear-btn i {
    margin: 0;
    transition: transform 0.2s;
}
.ss-filter-panel-title .clear-btn:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}
.ss-filter-panel-title .clear-btn:hover i {
    transform: rotate(90deg);
}
.ss-filter-panel-body {
    padding: 4px;
}

/* -- Active Filters Summary -- */
.ss-active-filters {
    padding: 12px 16px;
    background: var(--ss-body-bg);
    border-bottom: 1px solid var(--ss-border);
    border-radius: var(--ss-card-radius) var(--ss-card-radius) 0 0;
}
.ss-active-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--ss-card-radius);
    background: var(--ss-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
}
.ss-active-tag .btn-close {
    filter: brightness(0) invert(1);
    font-size: 0.5rem;
    padding: 2px;
}

/* -- Price Slider -- */
.ss-price-slider {
    background: #fff;
    padding: 6px 10px;
    border-radius: var(--ss-card-radius-sm);
    margin: 6px;
}
.ss-price-values {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    padding: 0 2px;
    font-variant-numeric: tabular-nums;
}

/* -- Color Filter Swatches -- */
.ss-color-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    justify-content: center;
    align-items: center;
}
.ss-color-filter-swatch {
    width: 32px;
    height: 32px;
    border-radius: 20%;
    border: 2px solid var(--ss-border);
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.ss-color-filter-swatch:hover {
    border-color: #9ca3af;
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.ss-color-filter-swatch.active {
    border-color: var(--ss-primary);
    border-width: 3px;
    box-shadow: 0 0 0 2px rgba(var(--ss-primary-rgb), 0.3), 0 4px 14px rgba(var(--ss-primary-rgb), 0.5);
}
.ss-color-filter-swatch .fa-check {
    color: #fff;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 1px 1px 2px rgba(0, 0, 0, 0.8);
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.7));
    z-index: 2;
}
@media (max-width: 768px) {
    .ss-color-filter { gap: 8px; }
    .ss-color-filter-swatch { width: 34px; height: 34px; }
}
@media (max-width: 480px) {
    .ss-color-filter { gap: 6px; }
    .ss-color-filter-swatch { width: 30px; height: 30px; }
}

/* -- Product Page Variant Labels & Options -- */
.ss-variant-label {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}
.ss-variant-label i {
    color: var(--ss-primary);
    margin-right: 4px;
}
.ss-variant-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.ss-variant-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 2px solid var(--ss-border);
    border-radius: var(--ss-card-radius);
    background: var(--ss-body-bg);
    color: #374151;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.ss-variant-pill:hover:not(.disabled) {
    border-color: #374151;
    background: #f1f5f9;
    color: #1f2937;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.ss-variant-pill.active {
    background: var(--ss-primary);
    border-color: var(--ss-primary-dark);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.ss-variant-pill.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: line-through;
    background: #d5d5d5;
    border-color: #000000;
    color: #000000 !important;
}
.ss-variant-pill.oos {
    opacity: 0.55;
    text-decoration: line-through;
}

/* -- Product Page Variant Swatches -- */
.product-variants .variant-swatch {
    width: 34px;
    height: 34px;
    border-radius: 20%;
    border: 2px solid #ccc;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}
.product-variants .variant-swatch:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.product-variants .variant-swatch.border-dark {
    border-color: #333 !important;
    border-width: 3px !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.2);
}
.product-variants .variant-swatch.is-selected {
    position: relative;
}
.product-variants .variant-swatch.is-selected::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 14px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* -- Checkbox Filters -- */
/* ── Filter Checkbox → Pill Grid ── */
.ss-filter-checks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 6px;
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .ss-filter-checks {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 1200px) {
    .ss-filter-checks {
        grid-template-columns: repeat(2, 1fr);
    }
}
.ss-filter-check {
    padding: 5px 8px;
    border: 1.5px solid var(--ss-border-light, #e2e8f0);
    border-radius: var(--ss-card-radius-sm, 4px);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ss-filter-check:hover {
    border-color: var(--ss-primary);
    background: var(--ss-body-bg);
}
.ss-filter-check:has(input:checked) {
    border-color: var(--ss-primary);
    background: var(--ss-primary);
    color: #fff;
}
.ss-filter-check.ss-filter-check-wide {
    grid-column: 1 / -1;
    white-space: normal;
    word-break: break-word;
}
.ss-filter-check .form-check-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* -- Scrollable filter list (for attributes with many options) -- */
.ss-filter-list {
    max-height: 260px;
    overflow-y: auto;
    padding: 4px 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--ss-primary, #2a89d4) transparent;
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0,
        black 8px,
        black calc(100% - 8px),
        transparent 100%);
    mask-image: linear-gradient(to bottom,
        transparent 0,
        black 8px,
        black calc(100% - 8px),
        transparent 100%);
}
.ss-filter-list::-webkit-scrollbar {
    width: 5px;
}
.ss-filter-list::-webkit-scrollbar-track {
    background: transparent;
}
.ss-filter-list::-webkit-scrollbar-thumb {
    background: var(--ss-primary, #2a89d4);
    border-radius: 3px;
    opacity: 0.6;
}
.ss-filter-list::-webkit-scrollbar-thumb:hover {
    opacity: 0.9;
}
.ss-filter-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-size: 13px;
    color: #374151;
    line-height: 1.3;
}
.ss-filter-list-item:hover {
    background: rgba(15, 23, 42, 0.04);
}
.ss-filter-list-item:has(input:checked) {
    color: var(--ss-primary, #2a89d4);
    font-weight: 500;
}
.ss-filter-list-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid #cbd5e0;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: all 0.15s;
    flex-shrink: 0;
    margin: 0;
}
.ss-filter-list-item input[type="checkbox"]:checked {
    background: var(--ss-primary, #2a89d4);
    border-color: var(--ss-primary, #2a89d4);
}
.ss-filter-list-item input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.ss-filter-list-item span {
    flex: 1;
    word-break: break-word;
}
/* Mobile: larger tap target */
@media (max-width: 767.98px) {
    .ss-filter-list-item {
        padding: 7px 10px;
    }
}

/* -- Clear All Filters -- */
.ss-clear-filters {
    text-align: center;
    padding: 10px;
    border-top: 1px solid var(--ss-border);
    background: var(--ss-body-bg);
    border-radius: 0 0 var(--ss-card-radius) var(--ss-card-radius);
}
.ss-clear-filters a {
    color: #6b7280;
    font-size: 12px;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: var(--ss-card-radius);
    transition: background 0.2s, color 0.2s;
}
.ss-clear-filters a:hover {
    background: var(--ss-border);
    color: #374151;
    text-decoration: none;
}

/* -- Main Product Panel -- */
.ss-main-panel {
    background: #fff;
    border-radius: var(--ss-card-radius);
    border: 1px solid var(--ss-border);
    overflow: hidden;
    margin-bottom: 10px;
}
.ss-category-header {
    background: var(--ss-card-bg);
    padding: 30px;
    border-bottom: 2px solid var(--ss-border);
}
.ss-category-title {
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 5px 0;
    line-height: 1.2;
    font-family: var(--ss-font-display);
}
.ss-category-count {
    font-size: 14px;
    font-weight: 400;
    color: #9ca3af;
    vertical-align: middle;
    margin-left: 6px;
}
.ss-category-desc {
    margin-top: 10px;
    color: #6b7280;
    line-height: 1.6;
    font-size: 14px;
}
.ss-category-desc p { margin-bottom: 0.5em; }
.ss-category-desc strong, .ss-category-desc b { color: #374151; }
.ss-category-desc ul, .ss-category-desc ol { margin: 0.5em 0; padding-left: 1.5em; }
.ss-category-desc a { color: var(--ss-primary); text-decoration: underline; }
.ss-modern-sort {
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-card-radius);
    padding: 8px 16px;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
    min-width: 180px;
}
.ss-modern-sort:focus {
    box-shadow: 0 0 0 3px rgba(var(--ss-primary-rgb), 0.1);
    border-color: var(--ss-primary);
    outline: none;
}
.ss-products-grid {
    position: relative;
    padding: 30px 10px 25px 10px;
    background: #fff;
}

.ss-products-grid-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.55);
    z-index: 5;
    border-radius: var(--ss-card-radius-sm);
}
@media (max-width: 768px) {
    .ss-products-grid { padding: 15px 8px; }
}

/* -- No Results -- */
.ss-no-results {
    text-align: center;
    padding: 60px 30px;
    border-radius: var(--ss-card-radius);
    margin: 20px 0;
}
.ss-no-results h3 {
    color: #374151;
    font-weight: 600;
    margin-bottom: 15px;
}
.ss-no-results p {
    color: #6b7280;
    margin-bottom: 30px;
}

/* -- Category Banner -- */
.ss-category-banner {
    border-radius: var(--ss-card-radius);
    padding: 0 10px;
    margin: 12px -8px 12px -8px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--ss-primary) 0%, var(--ss-primary-dark) 100%);
}
.banner-bg-circle {
    position: absolute;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}
.banner-bg-circle-top {
    width: 200px;
    height: 200px;
    top: -100px;
    right: -60px;
}
.banner-bg-circle-bottom {
    width: 150px;
    height: 150px;
    bottom: -75px;
    left: 5%;
}
.banner-row {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: stretch;
    padding: 20px;
}
.banner-left {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.banner-images-wrapper {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
}
.banner-opts-vertical {
    flex-direction: column;
    gap: 10px;
    display: flex;
}
.banner-option-link {
    display: block;
    position: relative;
    transition: transform 0.2s;
}
.banner-option-link:hover {
    transform: translateX(-3px);
}
.banner-option-img {
    width: 65px;
    height: 65px;
    object-fit: cover;
    border-radius: var(--ss-card-radius);
    background: white;
    padding: 4px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.banner-option-color {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.banner-main-image-wrap {
    flex-shrink: 0;
}
.banner-main-link {
    display: block;
    transition: transform 0.3s;
    border-radius: var(--ss-card-radius);
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.banner-main-link:hover {
    transform: scale(1.03);
}
.banner-main-img {
    width: 280px;
    height: 280px;
    object-fit: cover;
    display: block;
    background: white;
}
.banner-no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
}
.banner-opts-mobile {
    display: none;
    gap: 6px;
    justify-content: center;
    margin-top: 8px;
}
.banner-option-link-mobile {
    display: block;
    transition: transform 0.2s;
}
.banner-option-link-mobile:hover {
    transform: translateY(-2px);
}
.banner-option-img-mobile {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: var(--ss-card-radius-sm);
    background: white;
    padding: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.banner-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 5px 14px;
    border-radius: var(--ss-card-radius);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    font-weight: 600;
    margin-bottom: 15px;
    color: white;
}
.banner-badge-mobile {
    display: none;
}
.banner-badge-desktop {
    display: inline-block;
    margin-bottom: 12px;
}
.banner-right {
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
}
.banner-title {
    font-size: 28px;
    font-weight: bold;
    margin: 0 0 12px 0;
    line-height: 1.2;
    font-family: var(--ss-font-display);
}
.banner-title-link {
    color: white;
    text-decoration: none;
    transition: opacity 0.2s;
}
.banner-title-link:hover {
    opacity: 0.9;
    color: white;
}
.banner-description {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.95;
    margin-bottom: 15px;
    max-width: 90%;
}
.banner-action-row {
    display: flex;
    align-items: flex-end;
    gap: 50px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.banner-prices {
    flex-shrink: 0;
}
.banner-old-price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.banner-old-price {
    font-size: 15px;
    text-decoration: line-through;
    opacity: 0.75;
}
.banner-discount-badge {
    display: inline-block;
    background: #dc3545;
    color: white;
    padding: 4px 8px;
    margin-bottom: 3px;
    border-radius: var(--ss-card-radius);
    font-size: 13px;
    font-weight: bold;
}
.banner-price-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.banner-price {
    font-size: 26px;
    font-weight: bold;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.banner-price-divider {
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.35);
}
.banner-btn {
    background: white;
    color: var(--ss-primary-dark);
    padding: 10px 32px;
    border-radius: var(--ss-card-radius);
    font-weight: bold;
    text-decoration: none;
    font-size: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: box-shadow 0.3s, transform 0.3s;
    flex-shrink: 0;
}
.banner-btn:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    text-decoration: none;
    color: var(--ss-primary-dark);
    transform: translateY(-2px);
}
.banner-icons {
    display: flex;
    gap: 20px;
    font-size: 13px;
    opacity: 0.95;
    flex-wrap: wrap;
}
.banner-icon-item i {
    margin-right: 6px;
}
@media (min-width: 768px) {
    .banner-opts-vertical { display: flex !important; }
    .banner-badge-mobile { display: none !important; }
    .banner-badge-desktop { display: inline-block !important; }
    .banner-row { display: flex !important; align-items: stretch !important; }
    .banner-left, .banner-right { display: flex !important; }
}
@media (max-width: 767px) {
    .ss-category-banner { margin-bottom: 15px; margin-left: 0; margin-right: 0; border-radius: var(--ss-card-radius); }
    .banner-row { padding: 15px 15px 15px 18px; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px; }
    .banner-opts-vertical { display: none !important; }
    .banner-badge-mobile { display: inline-block !important; margin-bottom: 8px; }
    .banner-badge-desktop { display: none !important; }
    .banner-opts-mobile { display: flex !important; }
    .banner-left { flex: 0 0 110px; display: block !important; padding: 0 !important; text-align: center; }
    .banner-images-wrapper { justify-content: center; }
    .banner-opts-mobile { justify-content: center !important; }
    .banner-main-img { width: 110px !important; height: 110px !important; }
    .banner-main-link { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
    .banner-right { flex: 1; display: block !important; padding: 0 !important; text-align: center !important; margin-top: 0 !important; }
    .banner-title { font-size: 16px; margin: 0 0 6px 0; text-align: center; }
    .banner-description { font-size: 12px; line-height: 1.4; margin-bottom: 8px; max-width: 100% !important; text-align: center;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .banner-action-row { flex-direction: column; align-items: center; justify-content: center !important; gap: 10px; margin-bottom: 8px; }
    .banner-prices { text-align: center; width: auto; }
    .banner-old-price-row { justify-content: center !important; margin-bottom: 4px; }
    .banner-old-price { font-size: 12px; }
    .banner-discount-badge { font-size: 11px; padding: 2px 6px; }
    .banner-price-row { justify-content: center !important; gap: 8px; }
    .banner-price { font-size: 20px; }
    .banner-price-divider { height: 28px; }
    .banner-btn { padding: 8px 16px; font-size: 13px; gap: 6px; white-space: nowrap; }
    .banner-icons { justify-content: center !important; gap: 12px; font-size: 11px; }
    .banner-icon-item i { margin-right: 4px; }
}

/* -- Category Full Description (SEO) -- */
.ss-category-info {
    background: var(--ss-card-bg);
    border-radius: var(--ss-card-radius);
    padding: 40px;
    margin: 15px 0;
    border: 1px solid var(--ss-border);
}
.ss-category-info h2 {
    color: #1f2937;
    font-weight: 700;
    margin-bottom: 20px;
}

/* -- Mobile Filter Button -- */
.ss-filter-toggle-btn {
    background: #fff;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-card-radius);
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    transition: border-color 0.2s, color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ss-filter-toggle-btn:hover {
    border-color: var(--ss-primary);
    color: var(--ss-primary);
}
.ss-filter-toggle-btn .badge {
    font-size: 10px;
    padding: 3px 6px;
}

/* ============================================
   8. PRODUCT DETAIL (Side Thumbnails, Sticky Buy Panel)
   ============================================ */

/* -- Raised Panel (shared) -- */
.ss-panel-raised {
    background: #fff;
    border-radius: var(--ss-card-radius);
    box-shadow: var(--ss-card-shadow);
    border: 1px solid var(--ss-border);
}

/* -- Product Card Wrapper -- */
.ss-product-card-wrapper {
    border-radius: var(--ss-card-radius) var(--ss-card-radius) 0 0;
    background: #fff;
    padding: 10px 10px 20px;
    margin: 0;
    border-bottom: 3px solid var(--ss-primary);
    box-shadow: var(--ss-card-shadow);
}
/* -- Product Question Section -- */
.ss-product-question-section {
    margin-top: 0;
    margin-bottom: 30px;
}
.ss-product-question-section .card {
    border: none;
    border-radius: 0 0 var(--ss-card-radius) var(--ss-card-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    background: #fff;
}
.ss-product-question-section .card-header {
    background: var(--ss-body-bg);
    border-bottom: 1px solid var(--ss-border);
    padding: 12px 20px;
}
.ss-product-question-section .card-body {
    padding: 20px;
}
.ss-question-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 20%;
    background: var(--ss-primary);
    color: #fff;
    font-size: 13px;
}

/* -- Product Title (main h1) -- */
.ss-product-title-main {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 8px;
    line-height: 1.3;
    font-family: var(--ss-font-display);
    padding-right: 50px;
}

/* -- Diamond accent under product title (mosaic) -- */
/* -- Wishlist Heart (product detail page, top-right corner) -- */
.ss-wishlist-btn-mg {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 16;
    background: #fff;
    border: 1px solid var(--ss-border-light);
    border-radius: 20%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    padding: 0;
    outline: none;
}
.ss-wishlist-btn-mg:hover {
    border-color: var(--ss-primary);
    color: var(--ss-primary);
}
.ss-wishlist-btn-mg i {
    font-size: 16px;
    color: var(--ss-text-muted);
    transition: color 0.2s ease;
}
.ss-wishlist-btn-mg:hover i {
    color: var(--ss-primary);
}
.ss-wishlist-btn-mg.active {
    background: #fff;
    border-color: #e53e3e;
}
.ss-wishlist-btn-mg.active i {
    color: #e53e3e;
}

/* -- Wishlist Heart Circle -- */
/* -- Gallery -- */
.ss-gallery-main {
    border-radius: var(--ss-card-radius);
    overflow: hidden;
    background: #fff;
    border: none;
    position: relative;
    aspect-ratio: 1;
    animation: ssGalleryFadeIn 0.2s ease;
}
.ss-gallery-main img.ss-gallery-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
}
.ss-gallery-main img.ss-gallery-slide.active {
    opacity: 1;
    pointer-events: auto;
}
@keyframes ssGalleryFadeIn {
    from { opacity: 0.15; }
    to { opacity: 1; }
}
/* Side thumbnails (vertical strip - Mosaic style) */
.ss-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.ss-gallery-thumb {
    width: 70px;
    height: 70px;
    border-radius: var(--ss-card-radius);
    border: 2px solid var(--ss-border);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ss-gallery-thumb:hover {
    border-color: #9ca3af;
}
.ss-gallery-thumb.active {
    border-color: var(--ss-primary);
    box-shadow: 0 0 0 2px rgba(var(--ss-primary-rgb), 0.2);
}
.ss-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* -- Product Rating Inline -- */
.product-rating-inline {
    display: inline-block;
    transition: opacity 0.2s ease;
}
.product-rating-inline:hover {
    opacity: 0.8;
}
.product-rating-inline i {
    margin-right: 1px;
}

/* -- Phone Badge -- */
.ss-gallery-wrapper {
    position: relative;
}
.ss-phone-badge {
    background: #fff;
    border: 2px solid var(--ss-border);
    border-radius: var(--ss-card-radius);
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ss-phone-badge i {
    color: var(--ss-primary);
}
.ss-phone-badge:hover {
    background: var(--ss-primary);
    color: #fff;
    border-color: var(--ss-primary);
    box-shadow: 0 4px 12px rgba(var(--ss-primary-rgb), 0.3);
}
.ss-phone-badge:hover i {
    color: #fff;
}

/* -- Subscribe Modal -- */
.ss-subscribe-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9998;
}
.ss-subscribe-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: #fff;
    border-radius: var(--ss-card-radius);
    padding: 40px 36px 32px;
    width: 92%;
    max-width: 440px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    text-align: center;
}
.ss-subscribe-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 18px;
    color: #94a3b8;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.ss-subscribe-close:hover {
    background: #f1f5f9;
    color: #334155;
}
.ss-subscribe-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--ss-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 20px;
    box-shadow: 0 8px 24px rgba(var(--ss-primary-rgb), 0.3);
}
.ss-subscribe-title {
    font-weight: 700;
    font-size: 1.25rem;
    color: #1e293b;
    margin-bottom: 8px;
    font-family: var(--ss-font-display);
}
.ss-subscribe-text {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
}
.ss-subscribe-form {
    text-align: left;
}
.ss-subscribe-field {
    margin-bottom: 14px;
}
.ss-subscribe-field label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 5px;
    display: block;
}
.ss-subscribe-field .form-control {
    border-radius: var(--ss-card-radius);
    border: 1.5px solid var(--ss-border);
    padding: 10px 14px;
    font-size: 0.92rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ss-subscribe-field .form-control:focus {
    border-color: var(--ss-primary);
    box-shadow: 0 0 0 3px rgba(var(--ss-primary-rgb), 0.12);
}
.ss-subscribe-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: var(--ss-card-radius);
    background: var(--ss-primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
    box-shadow: 0 4px 14px rgba(var(--ss-primary-rgb), 0.3);
}
.ss-subscribe-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--ss-primary-rgb), 0.4);
    background: var(--ss-primary-dark);
}
.ss-subscribe-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.ss-subscribe-privacy {
    margin-top: 14px;
    font-size: 0.75rem;
    color: #94a3b8;
    text-align: center;
}
.ss-subscribe-success-icon {
    font-size: 56px;
    color: #22c55e;
    margin-bottom: 16px;
}
.ss-subscribe-success-icon i {
    filter: drop-shadow(0 4px 8px rgba(34, 197, 94, 0.3));
}
@media (max-width: 480px) {
    .ss-subscribe-modal {
        padding: 30px 22px 24px;
    }
    .ss-subscribe-icon {
        width: 52px;
        height: 52px;
        font-size: 22px;
    }
}

/* -- Buy Panel -- */
.ss-buy-panel {
    background: transparent;
    padding: 0;
    line-height: 1.3;
}

/* -- Short Description -- */
.ss-short-description {
    font-size: 14px !important;
    color: #4d4f54;
    line-height: 1.6;
}
.ss-short-description * { font-size: inherit !important; }
.ss-short-description p { margin-bottom: 6px; }
.ss-short-description p:last-child { margin-bottom: 0; }
.ss-short-description ul,
.ss-short-description ol { margin: 4px 0; padding-left: 20px; }
.ss-short-description strong { color: #374151; }
.ss-short-description a { color: var(--ss-primary); }

/* -- Price Display -- */
.ss-price-main {
    font-size: 28px;
    font-weight: 600;
    color: #3e3e3e;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.ss-price-main.promo {
    color: var(--ss-price-promo);
}
.ss-price-main.secondary {
    color: #6b7280;
    white-space: nowrap;
}
/* Buy row: prices left | button center | stock right */
.ss-buy-row {
    display: flex;
    /* Пренасяне вместо смачкване: цената и баджът са flex-shrink: 0, значи целият
       натиск падаше върху бутона и етикетът се чупеше на 2-3 реда между 992 и 1400px. */
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    gap: 20px;
}
.ss-buy-row .ss-buy-btn {
    white-space: nowrap;
}
/* Измерено: между 992 и 1400px панелът дава 476-581px, а цената, бутонът и баджът
   искат 575-610px според дължината на сумата. Затова тук редът става колона:
   или трите на един ред, или всеки на свой - никога 2+1. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .ss-buy-row {
        flex-direction: column;
        gap: 14px;
    }
}
.ss-buy-prices {
    flex-shrink: 0;
    text-align: center;
}
.ss-buy-prices .ss-price-separator {
    width: 80%;
    margin: 4px auto;
    border: none;
    border-top: 1px solid #b0b0b0;
}
/* Promo info above panel */
.ss-promo-above {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ss-promo-above-sep {
    color: #ccc;
    font-size: 14px;
    margin: 0 2px;
}

/* -- Buy Button (solid, geometric) -- */
.ss-buy-btn {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    padding: 18px 25px;
    height: 56px;
    font-weight: 700;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
    border-radius: var(--ss-card-radius);
    border: none;
    background: var(--ss-primary);
    background-color: var(--ss-primary);
    cursor: pointer;
}
.ss-buy-btn:hover {
    background: var(--ss-primary-dark);
    transform: translateY(-2px);
    /* По-сдържана сянка от оригиналните 0 8px 20px / 0.4. */
    box-shadow: 0 3px 8px rgba(var(--ss-primary-rgb), 0.22);
    color: #fff;
}
.ss-buy-btn:active {
    transform: translateY(0);
    box-shadow: none;
}
.ss-buy-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}
/* Green checkout variant */
.ss-buy-btn.ss-buy-btn-green {
    background: linear-gradient(135deg, #059669 0%, #10b981 60%, #34d399 100%);
    max-width: 100%;
    border-radius: var(--ss-card-radius);
}
.ss-buy-btn.ss-buy-btn-green:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 60%, #10b981 100%);
    box-shadow: 0 3px 8px rgba(5, 150, 105, 0.22);
}

/* -- Red palette override: never use red for the in-stock purchase CTA --
   When .palette-red is active, the in-stock buy button and delivery timer
   switch to green (#059669, same as .ss-fast-order-btn) to avoid the
   psychologically off-putting red-on-CTA. The out-of-stock call button
   (.ss-buy-btn--call) keeps its red urgency styling (excluded via :not()).
   Only .palette-red is affected - other palettes keep their primary color. */
.palette-red .ss-buy-btn:not(.ss-buy-btn--call) {
    background: #059669;
    background-color: #059669;
}
.palette-red .ss-buy-btn:not(.ss-buy-btn--call):hover {
    background: #047857;
    box-shadow: 0 3px 8px rgba(5, 150, 105, 0.22);
}
.palette-red .ss-delivery-timer-box {
    background: color-mix(in srgb, #059669 6%, #fff) !important;
    border: 1px solid color-mix(in srgb, #059669 22%, transparent) !important;
}
.palette-red .ss-delivery-timer-inner i {
    color: #059669;
}

/* -- Consent Checkboxes -- */
.ss-consent-checks .form-check-input {
    border: 2px solid var(--ss-primary);
}
.ss-consent-checks .form-check-input:checked {
    background-color: var(--ss-primary);
    border-color: var(--ss-primary);
}
.ss-consent-checks .form-check-input:focus {
    border-color: var(--ss-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--ss-primary-rgb), 0.25);
}

/* -- Call Button (red) -- */
.ss-call-btn {
    padding: 14px 20px;
    font-weight: 600;
    color: #fff;
    font-size: 16px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: var(--ss-card-radius);
    border: none;
    background: linear-gradient(135deg, #dc2626, #ef4444);
    width: 100%;
    cursor: pointer;
    text-decoration: none;
}
.ss-call-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.22);
    color: #fff;
}

/* -- Quantity Control -- */
.ss-qty-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-card-radius);
    overflow: hidden;
    background: #fff;
}
.ss-qty-control button {
    background: var(--ss-body-bg);
    border: none;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    line-height: 1;
}
.ss-qty-control button:hover {
    background: var(--ss-primary);
    color: #fff;
}
.ss-qty-control input {
    width: 44px;
    text-align: center;
    border: none;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 0;
    -moz-appearance: textfield;
    font-variant-numeric: tabular-nums;
}
.ss-qty-control input::-webkit-outer-spin-button,
.ss-qty-control input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* -- Delivery Timer Box (palette-aware, gentle) -- */
.ss-delivery-timer-box {
    background: color-mix(in srgb, var(--ss-primary) 6%, #fff);
    border: 1px solid color-mix(in srgb, var(--ss-primary) 22%, transparent);
    border-radius: var(--ss-card-radius);
    padding: 14px 18px;
    animation: mz-pulse-border 3s ease-in-out infinite;
}
.ss-delivery-timer-inner {
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    color: var(--ss-text);
}
.ss-delivery-timer-inner i { color: var(--ss-primary); }
.ss-delivery-countdown {
    display: block;
    font-size: 13px;
}
.ss-delivery-countdown strong {
    color: var(--ss-primary-dark);
    font-size: 15px;
}
@keyframes mz-pulse-border {
    0%, 100% { border-color: color-mix(in srgb, var(--ss-primary) 18%, transparent); }
    50% { border-color: color-mix(in srgb, var(--ss-primary) 45%, transparent); }
}
/* Free delivery line */
.ss-delivery-timer-free {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed color-mix(in srgb, var(--ss-primary) 20%, transparent);
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--ss-primary-dark);
}
.ss-delivery-timer-free i { color: var(--ss-primary); }
.ss-delivery-timer-free--standalone {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    font-size: 14px;
}

/* -- Buy Row Panel -- */
.ss-buy-row-panel {
    padding: 30px 25px;
    margin-top: 15px;
    margin-bottom: 15px;
}
/* -- Promo info above panel -- */
.ss-promo-above .ss-price-old,
.ss-buy-price .ss-price-old {
    font-size: 15px;
    color: var(--ss-price-old);
    text-decoration: line-through;
    line-height: 1;
}
.ss-promo-above .ss-price-old-sep,
.ss-buy-price .ss-price-old-sep {
    color: #ccc;
    font-size: 16px;
}
.ss-promo-above .ss-price-discount,
.ss-buy-price .ss-price-discount {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: var(--ss-price-promo);
    padding: 4px 10px;
    border-radius: var(--ss-card-radius);
    line-height: 1.2;
}
.ss-promo-above .ss-price-old-row,
.ss-buy-price .ss-price-old-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ss-buy-stock {
    flex-shrink: 0;
    white-space: nowrap;
}

/* -- Stock Badge -- */
.ss-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: var(--ss-card-radius);
    line-height: 1;
}
.ss-stock-badge.in-stock {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}
.ss-stock-badge.out-of-stock {
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
}
.ss-stock-badge.low-stock {
    color: #9a3412;
    background: #fff7ed;
    border: 1px solid #fed7aa;
}
.ss-stock-badge.inquiry {
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
}
.ss-stock-badge i {
    font-size: 12px;
}

/* -- Fast Order Panel (palette-aware, gentle) -- */
.ss-fast-order-panel {
    background: color-mix(in srgb, var(--ss-primary) 4%, #fff);
    padding: 18px 20px;
    border-radius: var(--ss-card-radius);
    border: 1px solid color-mix(in srgb, var(--ss-primary) 15%, transparent);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03);
}
.ss-fast-order-title {
    font-weight: 700;
    font-size: 16px;
    color: var(--ss-primary-dark);
    margin-bottom: 12px;
    margin-top: 5px;
}
.ss-fast-order-title::before {
    content: '\f063';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #ff0033;
    font-size: 14px;
    margin-right: 2px;
}
.ss-fast-order-form {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.ss-fast-order-col { flex: 1; }
.ss-fast-order-col--btn { flex: 0 0 auto; }
.ss-fast-order-btn {
    height: 100%;
    white-space: nowrap;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: var(--ss-card-radius);
    background: #059669;
    border: none;
    color: #fff;
    transition: background 0.2s, box-shadow 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ss-fast-order-btn:hover,
.ss-fast-order-btn:focus {
    background: #047857;
    color: #fff;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.25);
}
.ss-fast-order-btn:active {
    background: #065f46;
    color: #fff;
}
.ss-fast-order-phone {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--ss-primary) 12%, transparent);
}
.ss-fast-order-phone-number {
    font-size: 32px;
    font-weight: 800;
    color: #545454 !important;
    text-decoration: none !important;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.ss-fast-order-phone-number:hover {
    color: var(--ss-primary) !important;
}
.ss-fast-order-phone-text {
    font-size: 14px;
    color: var(--ss-text-muted);
    line-height: 1.17em;
}

/* -- Call Button (red, for out-of-stock) -- */
.ss-buy-btn--call {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    text-decoration: none !important;
    flex: 1;
}
.ss-buy-btn--call:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.22);
    color: #fff;
}

/* -- Product Tabs (horizontal tabs, Mosaic style) -- */
.ss-product-tabs {
    background: #fff;
    border-radius: var(--ss-card-radius);
    border: 1px solid var(--ss-border);
    box-shadow: var(--ss-card-shadow);
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 20px;
}
.ss-tab-title {
    padding: 16px 24px;
    border-bottom: 2px solid var(--ss-primary);
    background: var(--ss-body-bg);
}
/* Offset for scroll-to-anchor */
#video, #description, #specifications, #reviews-section {
    scroll-margin-top: 100px;
}
.ss-tab-title h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--ss-primary);
    margin: 0;
    font-family: var(--ss-font-display);
    letter-spacing: -0.01em;
}
.ss-tab-body {
    padding: 24px;
    font-size: 14px !important;
    line-height: 1.7;
    color: #374151;
}
.ss-tab-body * { font-size: inherit !important; }
.ss-tab-body + .ss-tab-title {
    border-top: 1px solid var(--ss-border);
}

/* -- Available Variants (Back in Stock) -- */
.ss-variant-list { display: flex; flex-direction: column; }
.ss-variant-list-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--ss-border-light, #f1f5f9); transition: background 0.15s; }
.ss-variant-list-item:last-child { border-bottom: none; }
.ss-variant-list-item:hover { background: var(--ss-body-bg, #f8fafc); }
.ss-variant-list-img { flex-shrink: 0; width: 60px; height: 60px; border-radius: var(--ss-card-radius-sm, 4px); overflow: hidden; border: 1px solid var(--ss-border, #e2e8f0); }
.ss-variant-list-img img { width: 100%; height: 100%; object-fit: contain; }
.ss-variant-list-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ss-variant-list-name { font-weight: 600; font-size: 13px; color: #374151; }
.ss-variant-list-code { font-size: 11px; color: #9ca3af; }
.ss-variant-list-price { font-weight: 600; font-size: 14px; color: #374151; white-space: nowrap; text-align: right; min-width: 80px; }
.ss-variant-list-price-promo { color: #dc2626; font-weight: 700; }

.ss-variant-list-action { width: 130px; flex-shrink: 0; }
.ss-variant-list-btn-add, .ss-variant-list-btn-notify { border: none; border-radius: var(--ss-card-radius-sm, 4px); font-size: 12px; font-weight: 600; padding: 6px 0; width: 130px; display: inline-block; text-align: center; transition: all 0.2s; color: #fff !important; }
.ss-variant-list-btn-add { background: var(--ss-primary); }
.ss-variant-list-btn-add:hover, .ss-variant-list-btn-add:focus, .ss-variant-list-btn-add:active { background: var(--ss-primary) !important; filter: brightness(1.1); color: #fff !important; }
.ss-variant-list-btn-notify { background: #f59e0b; }
.ss-variant-list-btn-notify:hover { background: #d97706; color: #fff; }
.ss-variant-list-btn-notify:disabled { background: #d1d5db; cursor: default; }
@media (max-width: 575.98px) {
    .ss-variant-list-item { display: grid; grid-template-columns: 70px 1fr; grid-template-rows: auto auto; gap: 6px 10px; padding: 14px 16px; }
    .ss-variant-list-img { grid-row: 1 / 3; align-self: center; width: 70px; height: 70px; }
    .ss-variant-list-info { grid-column: 2; grid-row: 1; }
    .ss-variant-list-price { grid-column: 2; grid-row: 2; text-align: left; min-width: unset; display: flex; align-items: center; gap: 8px; }
    .ss-variant-list-price br { display: none; }
    .ss-variant-list-action { grid-column: 1 / -1; width: 100%; }
    .ss-variant-list-btn-add, .ss-variant-list-btn-notify { width: 100%; }
}
/* -- Notify Modal (Back in Stock) -- */
.ss-notify-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 9998; }
.ss-notify-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 9999; background: #fff; border-radius: var(--ss-card-radius, 12px); padding: 36px 28px 28px; max-width: 380px; width: calc(100% - 40px); box-shadow: 0 20px 60px rgba(0,0,0,0.15); text-align: center; }
.ss-notify-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 18px; color: #94a3b8; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
.ss-notify-close:hover { background: #f1f5f9; color: #334155; }
.ss-notify-icon { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--ss-primary), var(--ss-primary-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto 16px; }
.ss-notify-modal h4 { font-size: 17px; font-weight: 700; color: #374151; margin-bottom: 4px; }
.ss-notify-modal .btn.ss-variant-list-btn-notify { background: linear-gradient(135deg, var(--ss-primary), var(--ss-primary-dark)); border-radius: var(--ss-card-radius-sm, 4px); padding: 12px; font-size: 14px; }
.ss-notify-modal .btn.ss-variant-list-btn-notify:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--ss-primary-rgb),0.4); }
@media (max-width: 575.98px) { .ss-notify-modal { padding: 30px 22px 24px; } .ss-notify-icon { width: 52px; height: 52px; font-size: 22px; } }

/* -- YouTube Video Container -- */
.ss-video-container {
    max-width: 800px;
    margin: 0 auto;
    border-radius: var(--ss-card-radius);
    overflow: hidden;
}
.ss-video-container lite-youtube {
    max-width: 100%;
    border-radius: var(--ss-card-radius);
}

/* -- Recently Viewed -- */
.ss-recently-viewed-swiper {
    padding: 6px 0;
}
.ss-recently-viewed-item {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--ss-card-radius-sm);
    border: 1px solid var(--ss-border);
    overflow: hidden;
    transition: box-shadow 0.3s;
    background: #fff;
    box-sizing: border-box;
}
.ss-recently-viewed-item:hover {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.ss-recently-viewed-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    border-radius: var(--ss-card-radius-sm);
}

/* -- Product Swiper Carousels -- */
.ss-carousel-container {
    position: relative;
}
.ss-products-swiper {
    padding: 4px 0;
}
.ss-products-swiper .swiper-button-prev,
.ss-products-swiper .swiper-button-next {
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    color: #374151;
    top: 40%;
}
.ss-products-swiper .swiper-button-prev::after,
.ss-products-swiper .swiper-button-next::after {
    font-size: 14px;
    font-weight: 700;
}
.ss-products-swiper .swiper-button-prev { left: 20px; }
.ss-products-swiper .swiper-button-next { right: 20px; }
.ss-products-swiper .swiper-button-prev:hover,
.ss-products-swiper .swiper-button-next:hover {
    background: var(--ss-primary);
    color: #fff;
}
.ss-products-swiper .swiper-slide { height: auto; }
.ss-products-swiper .ss-product-card { height: 100%; }

/* -- Reviews Section -- */
.ss-reviews {
    margin: 2rem 0;
    line-height: 1.6;
}
.ss-reviews * {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* -- Reviews Summary -- */
.ss-reviews-summary {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    background: var(--ss-card-bg);
    padding: 2.5rem;
    border-radius: var(--ss-card-radius);
    border: 1px solid var(--ss-border);
    box-shadow: var(--ss-card-shadow);
    margin-bottom: 1.25rem;
}
.ss-reviews-summary-left {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
}
.ss-reviews-avg {
    font-size: 4rem;
    font-weight: 800;
    color: var(--ss-primary);
    line-height: 1;
    margin-bottom: 0.75rem;
    font-family: var(--ss-font-display);
}
.ss-reviews-stars {
    font-size: 1.75rem;
    color: #fbbf24;
    margin-bottom: 0.75rem;
}
.ss-reviews-count {
    color: #64748b;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
.ss-reviews-summary-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ss-reviews-bar-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.ss-reviews-bar-label {
    min-width: 65px;
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}
.ss-reviews-bar-label i { color: #fbbf24; font-size: 14px; }
.ss-reviews-bar {
    flex: 1;
    height: 10px;
    background: #e5e7eb;
    border-radius: var(--ss-card-radius);
    overflow: hidden;
    position: relative;
}
.ss-reviews-bar-fill {
    height: 100%;
    background: var(--ss-primary);
    border-radius: var(--ss-card-radius);
    transition: width 0.5s ease;
    position: relative;
}
.ss-reviews-bar-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: reviewShimmer 2s infinite;
}
@keyframes reviewShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.ss-reviews-bar-count {
    min-width: 35px;
    text-align: right;
    font-size: 15px;
    font-weight: 700;
    color: #374151;
    font-variant-numeric: tabular-nums;
}

/* -- Review Items -- */
.ss-reviews-list {
    margin-top: 1.25rem;
    background: #ffffff;
    border-radius: var(--ss-card-radius);
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.ss-review {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
}
.ss-review:last-child { border-bottom: none; }
.ss-review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}
.ss-review-author-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.ss-review-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ss-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
}
.ss-review-author-details {
    display: flex;
    flex-direction: column;
}
.ss-review-author {
    font-weight: 700;
    color: #1a202c;
    font-size: 14px;
}
.ss-review-date {
    font-size: 12px;
    color: #64748b;
}
.ss-review-meta-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}
.ss-review-verified {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    padding: 0.25rem 0.625rem;
    border-radius: var(--ss-card-radius);
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.ss-review-variant {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}
.ss-review-stars { color: #fbbf24; font-size: 1.1rem; }
.ss-review-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}
.ss-review-divider {
    border: none;
    height: 1px;
    background: var(--ss-border);
    margin: 0.5rem 0;
}
.ss-review-content {
    color: #4b5563;
    line-height: 1.6;
    font-size: 14px;
}
.ss-review-actions {
    display: flex;
    gap: 0.36rem;
}
.ss-review-actions .btn {
    height: 28px;
    width: 28px;
    padding: 0;
    border: none;
    border-radius: var(--ss-card-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.ss-review-actions .btn-edit {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}
.ss-review-actions .btn-edit:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-1px);
}
.ss-review-actions .btn-delete {
    background: linear-gradient(135deg, #f87171, #dc2626);
}
.ss-review-actions .btn-delete:hover {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    transform: translateY(-1px);
}

/* -- Review Form -- */

/* Persistent status notice for existing user review (pending / approved) - geometric */
.ss-review-status {
    display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: var(--ss-card-radius);
    background: rgba(5, 150, 105, 0.08);
    color: var(--ss-text);
}
.ss-review-status > i {
    flex-shrink: 0;
    font-size: 20px;
    margin-top: 2px;
    color: var(--ss-success);
}
.ss-review-status.is-pending {
    background: rgba(217, 119, 6, 0.10);
}
.ss-review-status.is-pending > i { color: var(--ss-warning); }
.ss-review-status-text {
    flex: 1 1 220px;
    display: flex; flex-direction: column; gap: 2px;
}
.ss-review-status-text strong {
    font-family: var(--ss-font-display);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--ss-text);
    letter-spacing: -0.005em;
}
.ss-review-status-text span {
    font-size: 13px;
    color: var(--ss-text-muted);
    line-height: 1.5;
}
.ss-review-status-edit {
    align-self: center;
    appearance: none;
    background: var(--ss-card-bg);
    border: 1px solid var(--ss-border);
    color: var(--ss-text);
    padding: 9px 16px;
    border-radius: var(--ss-card-radius);
    cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 38px;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.ss-review-status-edit:hover {
    border-color: var(--ss-primary);
    background: var(--ss-primary);
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(var(--ss-primary-rgb), 0.30);
}
.ss-review-status-edit i { font-size: 11px; }

/* Submit feedback message (replaces Bootstrap alert) */
.ss-review-msg {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: var(--ss-card-radius);
    background: var(--ss-body-bg);
    color: var(--ss-text);
    font-size: 13px;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: ss-review-msg-in 220ms ease-out;
}
.ss-review-msg i { flex-shrink: 0; margin-top: 2px; font-size: 13px; }
.ss-review-msg.is-success {
    background: rgba(5, 150, 105, 0.10);
    color: #064e3b;
}
.ss-review-msg.is-success i { color: var(--ss-success); }
.ss-review-msg.is-error {
    background: rgba(220, 38, 38, 0.10);
    color: #7f1d1d;
}
.ss-review-msg.is-error i { color: var(--ss-danger); }
@keyframes ss-review-msg-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.ss-review-form {
    background: var(--ss-card-bg);
    border: 2px solid var(--ss-border);
    border-radius: var(--ss-card-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--ss-card-shadow);
    position: relative;
}
.ss-review-form-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--ss-card-radius-sm);
    transition: color 0.2s, background 0.2s;
}
.ss-review-form-close:hover {
    color: #475569;
    background: #f1f5f9;
}
.ss-review-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.ss-review-form-header .ss-review-form-title { margin: 0; }
.ss-review-form-title {
    margin: 0 0 1rem;
    color: #1a202c;
    font-weight: 700;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--ss-font-display);
}
.ss-review-form-title i { color: var(--ss-primary); font-size: 1.125rem; }
.ss-review-form-group { margin-bottom: 1rem; }
.ss-review-form-label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 700;
    color: #1a202c;
    font-size: 15px;
    letter-spacing: 0.025em;
}
.ss-review-star-rating {
    display: flex;
    gap: 0.5rem;
    margin: 0.5rem 0;
}
.ss-review-star-rating .fa-star {
    font-size: 1.6rem;
    color: #d1d5db;
    cursor: pointer;
    transition: color 0.3s, transform 0.2s;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ss-review-star-rating .fa-star.fas { color: #fbbf24; }
.ss-review-star-rating .fa-star:hover {
    transform: scale(1.1);
    text-shadow: 0 2px 4px rgba(251, 191, 36, 0.3);
}
.ss-review-input,
.ss-review-textarea {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 2px solid var(--ss-border);
    border-radius: var(--ss-card-radius);
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    font-family: inherit;
    background: #ffffff;
    color: #374151;
    line-height: 1.5;
}
.ss-review-input:focus,
.ss-review-textarea:focus {
    outline: none;
    border-color: var(--ss-primary);
    box-shadow: 0 0 0 4px rgba(var(--ss-primary-rgb), 0.1);
    transform: translateY(-1px);
}
.ss-review-textarea {
    resize: vertical;
    min-height: 120px;
}
.ss-review-submit-btn {
    background: var(--ss-primary);
    color: white;
    padding: 1rem 2.5rem;
    border: none;
    border-radius: var(--ss-card-radius);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-left: auto;
    width: fit-content;
}
.ss-review-submit-btn:hover {
    transform: translateY(-2px);
    background: var(--ss-primary-dark);
    box-shadow: 0 4px 12px rgba(var(--ss-primary-rgb), 0.3);
}
.ss-review-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

/* -- Review Login Notice -- */
.ss-review-login {
    padding: 1.25rem 1.75rem;
    border-radius: var(--ss-card-radius);
    margin-bottom: 2.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 15px;
    color: #92400e;
    border: 2px solid var(--ss-primary);
}
.ss-review-login-link {
    color: var(--ss-primary);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s;
}
.ss-review-login-link:hover {
    border-bottom-color: var(--ss-primary);
    text-decoration: none;
}

/* ════════════════════════════════════════════════════════════
   Reviews: toolbar (sort), load-more, list states (ss_mosaic)
   Geometric / bento aesthetic - 6px micro-round, Unbounded display
   ──────────────────────────────────────────────────────────── */

[x-cloak] { display: none !important; }

.ss-reviews-wrap { display: flex; flex-direction: column; }

.ss-reviews-toolbar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 4px;
    margin-bottom: 18px;
    padding: 11px 14px 11px 18px;
    background: var(--ss-body-bg);
    border: 1px solid var(--ss-border-light);
    border-radius: var(--ss-card-radius);
}
.ss-reviews-toolbar-label {
    font-family: var(--ss-font-display);
    font-size: 11px; font-weight: 600; color: var(--ss-text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    line-height: 1;
}
@media (max-width: 480px) {
    .ss-reviews-toolbar { padding: 10px 12px; gap: 10px; }
    .ss-reviews-toolbar-label { font-size: 10px; }
}

.ss-reviews-sort { position: relative; margin-left: auto; }
.ss-reviews-sort-btn {
    appearance: none;
    background: var(--ss-card-bg);
    border: 1px solid var(--ss-border);
    color: var(--ss-text);
    font: inherit; font-size: 13.5px; font-weight: 500;
    padding: 9px 14px;
    border-radius: var(--ss-card-radius);
    min-height: 40px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 10px;
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.ss-reviews-sort-btn:hover {
    border-color: var(--ss-primary);
    box-shadow: 0 0 0 3px rgba(var(--ss-primary-rgb), 0.10);
}
.ss-reviews-sort-btn:focus-visible {
    outline: 2px solid var(--ss-primary);
    outline-offset: 2px;
}
.ss-reviews-sort-chevron {
    font-size: 10px; color: var(--ss-text-muted);
    transition: transform 200ms ease;
}
.ss-reviews-sort-chevron.is-open { transform: rotate(180deg); color: var(--ss-primary); }

.ss-reviews-sort-panel {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
    min-width: 220px;
    background: var(--ss-card-bg);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-card-radius);
    box-shadow: 0 16px 40px -12px rgba(0,0,0,0.15), 0 4px 12px -4px rgba(0,0,0,0.08);
    padding: 6px;
    margin: 0;
    list-style: none;
}
.ss-reviews-sort-option {
    width: 100%;
    appearance: none; background: transparent; border: 0;
    font: inherit; font-size: 13.5px;
    color: var(--ss-text);
    text-align: left;
    padding: 10px 12px;
    border-radius: var(--ss-card-radius-sm);
    cursor: pointer;
    min-height: 40px;
    transition: background 120ms ease, color 120ms ease;
}
.ss-reviews-sort-option:hover,
.ss-reviews-sort-option:focus-visible {
    background: var(--ss-body-bg);
    outline: none;
}
.ss-reviews-sort-option.is-active {
    background: var(--ss-primary);
    color: #ffffff;
    font-weight: 600;
}

.ss-reviews-list { transition: opacity 200ms ease; }
.ss-reviews-list.is-loading { opacity: 0.5; pointer-events: none; }
/* Inside Alpine wrap (with toolbar): drop the legacy 1.25rem margin-top - toolbar's margin-bottom already separates */
.ss-reviews-wrap .ss-reviews-list { margin-top: 0; }

.ss-review.is-new { animation: ss-review-in 320ms ease-out both; }
.ss-review.is-new:nth-child(10n+2) { animation-delay: 40ms; }
.ss-review.is-new:nth-child(10n+3) { animation-delay: 80ms; }
.ss-review.is-new:nth-child(10n+4) { animation-delay: 120ms; }
.ss-review.is-new:nth-child(10n+5) { animation-delay: 160ms; }
.ss-review.is-new:nth-child(10n+6) { animation-delay: 200ms; }
.ss-review.is-new:nth-child(10n+7) { animation-delay: 240ms; }
.ss-review.is-new:nth-child(10n+8) { animation-delay: 280ms; }
.ss-review.is-new:nth-child(10n+9) { animation-delay: 320ms; }
.ss-review.is-new:nth-child(10n+10) { animation-delay: 360ms; }

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

.ss-reviews-load-more-wrap {
    display: flex; justify-content: flex-end;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--ss-border-light);
}
.ss-reviews-load-more {
    appearance: none;
    background: var(--ss-card-bg);
    border: 1px solid var(--ss-primary);
    color: var(--ss-primary-dark);
    font-family: var(--ss-font-display);
    font-size: 13px; font-weight: 600;
    padding: 12px 28px;
    border-radius: var(--ss-card-radius);
    min-height: 46px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 10px;
    transition: background 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.ss-reviews-load-more:hover:not(:disabled) {
    background: var(--ss-primary);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -4px rgba(var(--ss-primary-rgb), 0.30);
}
.ss-reviews-load-more:hover:not(:disabled) .ss-reviews-load-more-count { color: rgba(255,255,255,0.75); }
.ss-reviews-load-more:active:not(:disabled) { transform: translateY(0); }
.ss-reviews-load-more:focus-visible {
    outline: 2px solid var(--ss-primary);
    outline-offset: 3px;
}
.ss-reviews-load-more:disabled { opacity: 0.55; cursor: not-allowed; }
.ss-reviews-load-more i { font-size: 12px; }
.ss-reviews-load-more-count {
    color: var(--ss-text-muted);
    font-family: var(--ss-font);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.ss-reviews-error {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: var(--ss-card-radius);
    border-left: 3px solid var(--ss-danger);
    background: var(--ss-danger-light);
    color: var(--ss-danger);
    font-size: 13px;
    text-align: center;
}

/* -- Reviews Empty State -- */
.ss-reviews-empty {
    text-align: center;
    padding: 2rem 1.5rem;
    color: #64748b;
}
.ss-reviews-empty-icon { font-size: 3rem; color: #d1d5db; margin-bottom: 0.75rem; }
.ss-reviews-empty h4 { color: #374151; margin-bottom: 0.5rem; font-size: 1.1rem; font-weight: 700; }
.ss-reviews-empty p { font-size: 14px; color: #6b7280; }

/* -- Specs Table -- */
.ss-specs-table {
    width: 100%;
    border-collapse: collapse;
}
.ss-specs-table tr:nth-child(even) {
    background: var(--ss-body-bg);
}
.ss-specs-table td {
    padding: 12px 16px;
    font-size: 14px;
    border-bottom: 1px solid var(--ss-border);
}
/* Последният ред няма нужда от черта - картата си има рамка. */
.ss-specs-table tr:last-child td {
    border-bottom: none;
}
.ss-specs-table td:first-child {
    font-weight: 600;
    color: #374151;
    width: 40%;
}
.ss-specs-table td:last-child {
    color: #6b7280;
}

/* -- Info Promo Banner -- */
.ss-info-banner {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-radius: var(--ss-card-radius);
    padding: 16px 20px;
    font-size: 14px;
    color: #1e40af;
}

/* -- Connected Products -- */
.ss-connected-products {
    background: #fff;
    border-radius: var(--ss-card-radius);
    border: 1px solid var(--ss-border);
    padding: 20px;
}

/* ============================================
   9. HOMEPAGE SECTIONS (Bento, Carousels, Trust, Headings)
   ============================================ */

/* -- Hero Carousel (1:1 sizing with ss_magazine) -- */
.ss-hero-img {
    max-height: 460px;
    object-fit: cover;
}
.ss-hero-placeholder {
    height: 400px;
}
.ss-hero .carousel-item img {
    width: 100%;
    max-height: 560px;
    object-fit: cover;
}
/* Централна кутия като в ss_default, но с радиуса на mosaic:
   var(--ss-card-radius) е 6px тук, срещу 20px в ss_default. */
.ss-hero .carousel-caption {
    background: rgba(0, 0, 0, 0.35);
    padding: 25px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
    border-radius: var(--ss-card-radius);
    text-align: center;
}
.ss-hero .carousel-caption h2 {
    font-family: var(--ss-font-display);
    font-weight: 700;
    font-size: 2.5rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}
.ss-hero .carousel-caption p {
    font-family: var(--ss-font);
    font-size: 15px;
    opacity: 0.92;
}
.ss-hero-no-controls .carousel-indicators,
.ss-hero-no-controls .carousel-control-prev,
.ss-hero-no-controls .carousel-control-next { display: none; }

/* Mobile: caption stays visible (replaces d-none d-md-block hide-on-mobile).
   Compact text + clamped subtitle so caption doesn't overpower the image. */
@media (max-width: 767px) {
    .ss-hero .carousel-caption {
        position: absolute !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        background: linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0) 100%) !important;
        padding: 30px 14px 14px !important;
        border-radius: 0 !important;
        text-align: center;
    }
    .ss-hero .carousel-caption h2 {
        font-size: 1.15rem !important;
        margin-bottom: 4px !important;
        line-height: 1.25;
    }
    .ss-hero .carousel-caption p {
        font-size: 0.8rem !important;
        margin-bottom: 8px !important;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .ss-hero .carousel-caption .btn {
        font-size: 0.82rem !important;
        padding: 5px 14px !important;
    }
    /* Hide indicator dots on mobile (avoid overlap with caption button - swipe instead) */
    .ss-hero .carousel-indicators { display: none !important; }
}

/* -- Home Content Wrapper -- */
.ss-home-content {
    padding-top: 30px;
    padding-bottom: 10px;
}
.ss-home-section {
    padding-bottom: 30px;
    margin-bottom: 30px;
}
.ss-home-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* -- Section Headings (Unbounded + Diamond accent) -- */
.ss-section-heading {
    font-family: var(--ss-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ss-text);
    margin-bottom: 35px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    padding-bottom: 16px;
}
.ss-section-heading::before,
.ss-section-heading::after {
    content: '';
    /* Базис 24px и без свиване: при заглавие на два реда чертите
       остават видими вместо да се свият до нула. */
    flex: 1 0 24px;
    height: 1px;
    background: var(--ss-border);
}
.ss-section-heading > span,
.ss-section-heading > a {
    position: relative;
}
/* Accent bar below heading text */
.ss-section-heading > span::after,
.ss-section-heading > a::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: var(--ss-primary);
    border-radius: 2px;
}
/* Section header row (heading + optional "view all" link) */
.ss-home-section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 35px;
}
.ss-home-section-header .ss-section-heading {
    flex: 1;
    margin-bottom: 0;
}
.ss-section-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ss-primary);
    background: #fff;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-card-radius);
    padding: 6px 16px;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s, background 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.ss-section-link:hover {
    color: #fff;
    background: var(--ss-primary);
    border-color: var(--ss-primary);
    box-shadow: 0 2px 8px rgba(var(--ss-primary-rgb), 0.3);
    transform: translateY(-1px);
}
.ss-section-link--danger {
    color: #dc2626;
    border-color: #fecaca;
}
.ss-section-link--danger:hover {
    color: #fff;
    background: #dc2626;
    border-color: #dc2626;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}
/* Inner spans/links inherit cleanly */
.ss-section-heading span:not(.badge),
.ss-section-heading a {
    /* Дълго име на категория трябва да се пренася, а не да разширява
       контейнера и да изкарва цялата страница хоризонтално. */
    min-width: 0;
    overflow-wrap: anywhere;
}
.ss-section-heading .badge {
    font-size: 0.75rem;
    vertical-align: middle;
    margin-right: 6px;
}

/* -- Panel Raised (homepage product sections) -- */
.ss-home-section .ss-panel-raised {
    padding: 5px;
    border-radius: var(--ss-card-radius);
    background-color: #ffffff;
    border: 1px solid var(--ss-border-light);
    border-bottom: 2px solid var(--ss-primary);
    box-shadow: var(--ss-card-shadow);
}

/* -- Trust Signals / Highlights -- */
.ss-highlights-inner {
    padding: 20px 10px;
    border-radius: var(--ss-card-radius);
    background: #fff;
    border: 1px solid var(--ss-border-light);
    box-shadow: var(--ss-card-shadow);
}
.ss-highlight-item {
    text-align: center;
    padding: 20px 10px;
}
.ss-highlight-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--ss-card-radius);
    background: var(--ss-primary-light);
    color: var(--ss-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 12px;
}
.ss-highlight-item h6 {
    font-weight: 600;
    margin-bottom: 4px;
}
.ss-highlight-item p {
    font-size: 13px;
    color: var(--ss-text-muted);
    margin: 0;
}

/* -- Category Grid -- */
.ss-category-card {
    text-align: center;
    padding: 20px 10px;
    background: var(--ss-card-bg);
    border-radius: var(--ss-card-radius);
    border: 1px solid var(--ss-border-light);
    transition: transform var(--ss-transition), box-shadow var(--ss-transition), border-color var(--ss-transition);
    text-decoration: none;
    color: var(--ss-text);
    display: block;
}
.ss-category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ss-card-shadow);
    border-color: rgba(var(--ss-primary-rgb), 0.2);
    color: var(--ss-primary);
}
.ss-category-card img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 10px;
}

/* ============================================
   10. BLOG (Masonry Layout, Horizontal Cards)
   ============================================ */

.ss-blog-layout {
    background: var(--ss-body-bg);
    min-height: 60vh;
    padding: 0 0 40px;
}
.ss-blog-card {
    background: #fff;
    border-radius: var(--ss-card-radius);
    overflow: hidden;
    box-shadow: var(--ss-card-shadow);
    border: 1px solid var(--ss-border);
    transition: box-shadow 0.3s, transform 0.3s;
}
.ss-blog-card:hover {
    box-shadow: var(--ss-card-shadow-hover);
    transform: translateY(-2px);
}
.ss-blog-card .ss-blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 140px;
    border-radius: var(--ss-card-radius) 0 0 var(--ss-card-radius);
}
.ss-blog-card .ss-blog-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 140px;
    background: var(--ss-body-bg);
}
.ss-blog-card .card-body {
    padding: 16px 20px;
}
.ss-blog-card .card-title a:hover {
    color: var(--ss-primary) !important;
}

/* -- Blog Sidebar -- */
.ss-blog-sidebar {
    background: #fff;
    border-radius: var(--ss-card-radius);
    box-shadow: var(--ss-card-shadow);
    border: 1px solid var(--ss-border);
    overflow: hidden;
}
.ss-blog-sidebar-header {
    background: var(--ss-body-bg);
    padding: 16px 20px;
    border-bottom: 1px solid var(--ss-border);
    font-weight: 700;
    font-size: 14px;
    color: #374151;
}
.ss-blog-sidebar-header i {
    color: var(--ss-primary);
    margin-right: 8px;
}
.ss-blog-sidebar a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    color: #374151;
    text-decoration: none;
    border-bottom: 1px solid var(--ss-border-light);
    transition: background 0.2s, color 0.2s;
    font-size: 14px;
}
.ss-blog-sidebar a:last-child { border-bottom: none; }
.ss-blog-sidebar a:hover,
.ss-blog-sidebar a.active {
    background: var(--ss-primary-light);
    color: var(--ss-primary);
}

/* -- Blog Article -- */
.ss-blog-article {
    background: #fff;
    border-radius: var(--ss-card-radius);
    box-shadow: var(--ss-card-shadow);
    border: 1px solid var(--ss-border);
    overflow: hidden;
    padding: 40px;
}
.ss-blog-article h1 {
    font-weight: 700;
    font-size: 28px;
    color: #1f2937;
    font-family: var(--ss-font-display);
}
.ss-blog-article .blog-content {
    font-size: 15px;
    line-height: 1.8;
}
.ss-blog-article .blog-content img {
    border-radius: var(--ss-card-radius);
    margin: 1em 0;
}

/* -- Blog Homepage Section -- */
.ss-home-blog {}

/* -- Blog Featured Card -- */
.ss-blog-card-featured {
    background: #fff;
    border-radius: var(--ss-card-radius);
    overflow: hidden;
    box-shadow: var(--ss-card-shadow);
    border: 1px solid var(--ss-border);
    transition: box-shadow 0.3s;
}
.ss-blog-card-featured:hover {
    box-shadow: var(--ss-card-shadow-hover);
}

/* ============================================
   11. CART & CHECKOUT (Step Indicator, Accent Borders)
   ============================================ */

/* -- Cart/Checkout Layout -- */
.ss-order-layout {
    background: var(--ss-body-bg);
    min-height: 60vh;
    padding: 30px 0 55px;
}

/* -- Step Indicator (Mosaic signature - circles + lines) -- */
.mz-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 30px;
}
.mz-step {
    display: flex;
    align-items: center;
}
.mz-step-circle {
    width: var(--mz-step-size);
    height: var(--mz-step-size);
    border-radius: 20%;
    border: 2px solid var(--ss-border);
    background: var(--ss-card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--ss-text-muted);
    transition: background 0.3s, border-color 0.3s, color 0.3s;
    flex-shrink: 0;
}
.mz-step.active .mz-step-circle {
    background: var(--ss-primary);
    border-color: var(--ss-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--ss-primary-rgb), 0.3);
}
.mz-step.completed .mz-step-circle {
    background: var(--ss-primary);
    border-color: var(--ss-primary);
    color: #fff;
}
.mz-step-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ss-text-muted);
    margin-left: 8px;
    margin-right: 8px;
    white-space: nowrap;
}
.mz-step.active .mz-step-label {
    color: var(--ss-primary);
}
.mz-step.completed .mz-step-label {
    color: var(--ss-primary);
}
.mz-step-line {
    width: 60px;
    height: 2px;
    background: var(--ss-border);
    transition: background 0.3s;
}
.mz-step.completed .mz-step-line {
    background: var(--ss-primary);
}
.mz-step-line.completed {
    background: var(--ss-primary);
}

/* -- Order Panel -- */
.ss-order-panel {
    background: #fff;
    border-radius: var(--ss-card-radius);
    border: 1px solid var(--ss-border);
    margin-bottom: 20px;
    box-shadow: var(--ss-card-shadow);
}
/* Whole profile module: equal 25px gaps between direct children of main column.
   Normal block flow (not flex) preserves Bootstrap .row negative gutter margins.
   Adjacent-sibling selector works with conditional @if sections. */
.ss-user-layout .col-md-9 > * + * {
    margin-top: 25px;
}
.ss-order-panel-header {
    background: var(--ss-body-bg);
    padding: 20px 24px;
    border-bottom: 1px solid var(--ss-border);
    border-radius: var(--ss-card-radius) var(--ss-card-radius) 0 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ss-order-panel-header h5 {
    margin: 0;
    font-weight: 700;
    color: #1f2937;
    font-size: 16px;
}
.ss-order-panel-header i {
    color: var(--ss-primary);
    font-size: 18px;
}
.ss-back-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ss-card-radius);
    background: #fff;
    border: 1px solid var(--ss-border);
    color: #6b7280;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    margin-left: auto;
    flex-shrink: 0;
}
.ss-back-link:hover {
    background: var(--ss-primary);
    border-color: var(--ss-primary);
    color: #fff;
}
.ss-back-link i { color: inherit; font-size: 13px; }
.ss-order-panel-body {
    padding: 24px;
}

/* -- Payment Method Cards -- */
.ss-payment-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ss-payment-card {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
    margin: 0;
}
.ss-payment-card:hover {
    border-color: var(--ss-primary);
    background: #f8fafc;
}
.ss-payment-card.active {
    border-color: var(--ss-primary);
    background: rgba(var(--ss-primary-rgb, 42,137,212), 0.06);
    box-shadow: 0 0 0 1px var(--ss-primary);
}
.ss-payment-card input[type="radio"] {
    display: none;
}
.ss-payment-icon {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ss-payment-icon i {
    font-size: 18px;
    color: var(--ss-primary);
}
.ss-payment-card.active .ss-payment-icon {
    background: var(--ss-primary);
}
.ss-payment-card.active .ss-payment-icon i {
    color: #fff;
}
.ss-payment-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1f2937;
}
.ss-payment-desc {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 2px;
}
.ss-bank-details {
    padding: 24px 16px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.85rem;
}

/* -- Delivery Method Cards -- */
.ss-delivery-card {
    border: 2px solid var(--ss-border);
    border-radius: var(--ss-card-radius);
    padding: 14px 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    background: #fff;
}
.ss-delivery-card:hover {
    border-color: var(--ss-primary);
    background: rgba(var(--ss-primary-rgb), 0.02);
}
.ss-delivery-card.active {
    border-color: var(--ss-primary);
    background: rgba(var(--ss-primary-rgb), 0.06);
    box-shadow: 0 0 0 1px var(--ss-primary);
}
.ss-delivery-card i { color: var(--ss-primary); }

/* -- City Autocomplete -- */
.ss-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: #fff;
    border: 1px solid var(--ss-border);
    border-top: none;
    border-radius: 0 0 var(--ss-card-radius) var(--ss-card-radius);
    max-height: 250px;
    overflow-y: auto;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}
.ss-autocomplete-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;
}
.ss-autocomplete-item:last-child { border-bottom: none; }
.ss-autocomplete-item:hover { background: var(--ss-primary-light); }
.ss-autocomplete-item.active { background: var(--ss-primary-light); font-weight: 600; }
.ss-combobox-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1050;
    background: var(--ss-card-bg, #fff);
    border: 1px solid var(--ss-border); border-top: none;
    border-radius: 0 0 var(--ss-card-radius) var(--ss-card-radius);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}
.ss-combobox-search {
    position: relative; padding: 8px 10px;
    border-bottom: 1px solid var(--ss-border);
    background: var(--ss-primary-light);
}
.ss-combobox-search-icon {
    position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
    color: #94a3b8; font-size: 0.75rem; pointer-events: none;
}
.ss-combobox-list { max-height: 280px; overflow-y: auto; }

/* -- Office Info Card -- */
.ss-office-info {
    background: var(--ss-body-bg);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-card-radius);
    padding: 12px 14px;
}

/* -- Cart Item -- */
.ss-cart-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.2s;
}
.ss-cart-item:hover { background: #fafbfc; }
.ss-cart-item:last-child { border-bottom: none; }
.ss-cart-item-image {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: var(--ss-card-radius);
    border: 1px solid var(--ss-border);
    overflow: hidden;
    flex-shrink: 0;
}
.ss-cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.ss-cart-item-info {
    flex: 1;
    min-width: 0;
}
.ss-cart-item-title {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
}
.ss-cart-item-title:hover { color: var(--ss-primary); }
.ss-cart-item-meta {
    font-size: 13px;
    color: #6b7280;
}
.ss-cart-item-qty {
    flex-shrink: 0;
    width: 90px;
    display: flex;
    justify-content: center;
}
.ss-cart-item-price {
    text-align: right;
    width: 110px;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 15px;
    color: #1f2937;
    font-variant-numeric: tabular-nums;
}
.ss-cart-item-remove {
    flex-shrink: 0;
    color: #9ca3af;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    border-radius: 50%;
    transition: color 0.2s, background 0.2s;
}
.ss-cart-item-remove:hover {
    color: #ef4444;
    background: #fef2f2;
}

/* -- Cart Wishlist Badge -- */
.ss-cart-item-image-wrap {
    position: relative;
    flex-shrink: 0;
}
.ss-cart-wishlist-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 28px;
    height: 28px;
    border-radius: 20%;
    border: none;
    background: rgba(255,255,255,0.92);
    color: #9ca3af;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--ss-transition-fast);
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    z-index: 2;
    padding: 0;
    line-height: 1;
}
.ss-cart-wishlist-btn:hover {
    color: var(--ss-danger);
    transform: scale(1.15);
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.ss-cart-wishlist-btn.text-danger {
    color: var(--ss-danger);
    background: #fee2e2;
}
@keyframes ss-heart-pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.4); }
    60%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}
@keyframes ss-heart-unpop {
    0%   { transform: scale(1); }
    50%  { transform: scale(0.7); }
    100% { transform: scale(1); }
}
.ss-cart-wishlist-btn.ss-heart-added {
    animation: ss-heart-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.ss-cart-wishlist-btn.ss-heart-removed {
    animation: ss-heart-unpop 0.3s ease;
}

.ss-price-stacked .ss-price-eur { white-space: nowrap; }

/* -- Order Summary Sidebar -- */
.ss-order-summary {
    background: #fff;
    border-radius: var(--ss-card-radius);
    border: 1px solid var(--ss-border);
    overflow: hidden;
    position: sticky;
    top: 120px;
    box-shadow: var(--ss-card-shadow);
}
.ss-order-summary .card-header {
    background: var(--ss-body-bg);
    padding: 20px 24px;
    border-bottom: 1px solid var(--ss-border);
}
.ss-order-summary .card-header h5 {
    margin: 0;
    font-weight: 700;
    color: #1f2937;
}
.ss-order-summary .card-body { padding: 24px; }
.ss-summary-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #d1d5db 20%, #d1d5db 80%, transparent 100%);
}

/* -- Info Box -- */
.ss-info-box {
    background: #ffffff;
    border: 1px solid var(--ss-border-light);
    border-radius: var(--ss-card-radius);
    padding: 16px 20px;
    font-size: 14px;
    color: #374151;
    margin-bottom: 20px;
    box-shadow: var(--ss-card-shadow);
}
.ss-info-box i { color: var(--ss-primary); }

/* -- Empty Cart -- */
.ss-empty-state {
    text-align: center;
    padding: 80px 20px;
    background: #fff;
    border-radius: var(--ss-card-radius);
    box-shadow: var(--ss-card-shadow);
}
.ss-empty-state-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--ss-primary-light);
    color: var(--ss-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin-bottom: 24px;
}

/* -- Order Success -- */
.ss-success-header {
    background: #fff;
    border-bottom: 1px solid var(--ss-border, #e2e8f0);
}
.ss-success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #059669;
    color: #059669;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    animation: ss-success-in 0.3s ease-out;
}
@keyframes ss-success-in {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.ss-success-icon-lg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #ecfdf5;
    border: 3px solid #059669;
    color: #059669;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    animation: ss-success-in 0.5s ease-out;
}
.ss-order-badge {
    display: inline-block;
    background: var(--ss-primary-light, #e0e8ef);
    color: var(--ss-primary-dark, #1a4a6e);
    padding: 6px 18px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
}
/* ── Order Items Table (success + order-show) ── */
.ss-order-items-table {
    width: 100%;
    border-collapse: collapse;
}
.ss-order-items-table thead th {
    padding: 10px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid var(--ss-border, #e2e8f0);
    text-align: left;
}
.ss-order-items-table thead th:nth-child(2),
.ss-order-items-table thead th:nth-child(4) { text-align: right; }
.ss-order-items-table thead th:nth-child(3) { text-align: center; }
.ss-order-items-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--ss-border-light, #f3f4f6);
    vertical-align: middle;
    font-size: 0.875rem;
}
.ss-order-items-table tbody td:nth-child(2),
.ss-order-items-table tbody td:nth-child(4) { text-align: right; white-space: nowrap; }
.ss-order-items-table tbody td:nth-child(3) { text-align: center; }
.ss-order-items-table tbody tr:last-child td { border-bottom: none; }
.ss-item-product {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ss-item-thumb {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid var(--ss-border-light, #f3f4f6);
    aspect-ratio: 1;
}
@media (max-width: 767.98px) {
    .ss-order-items-table thead { display: none; }
    .ss-order-items-table tbody tr {
        display: block;
        padding: 14px 16px;
        border-bottom: 1px solid var(--ss-border-light, #f3f4f6);
    }
    .ss-order-items-table tbody tr:last-child { border-bottom: none; }
    .ss-order-items-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 4px 0;
        border-bottom: none;
    }
    .ss-order-items-table tbody td:before {
        content: attr(data-label);
        font-weight: 600;
        color: #374151;
        font-size: 0.8rem;
        flex-shrink: 0;
        margin-right: 12px;
    }
    .ss-order-items-table tbody td:first-child {
        display: block;
        padding-bottom: 8px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--ss-border-light, #f3f4f6);
    }
    .ss-order-items-table tbody td:first-child:before { display: none; }
    .ss-item-thumb { width: 40px; height: 40px; min-width: 40px; }
    .ss-mobile-separator { border-bottom: 1px solid var(--ss-border-light, #f3f4f6); }
}
@media (min-width: 768px) {
    .ss-mobile-separator { border-bottom: none !important; }
}

/* Shake animation for validation hints */
.ss-shake { animation: ss-shake 0.4s ease-out; }
@keyframes ss-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
/* Priority nav: prevent flash before JS collapses items */
.ss-navigation .nav-list:not(.nav-ready) { visibility: hidden; }

.ss-info-card {
    padding: 12px 16px;
    border: 1px solid var(--ss-border, #e2e8f0);
    border-radius: var(--ss-card-radius-sm, 6px);
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
}
.ss-info-card--accent {
    border-left: 3px solid var(--ss-primary);
    display: block;
}
.ss-info-card--warning {
    border-left: 3px solid #d97706;
    background: #fffbeb;
    display: block;
}
.ss-info-card--info {
    border-left: 3px solid var(--ss-primary);
    background: #f0f9ff;
}
.ss-items-table {
    font-variant-numeric: tabular-nums;
}
.ss-items-table thead th {
    background: #f8fafc;
    border-bottom: 1px solid var(--ss-border, #e2e8f0);
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 8px 12px;
}
.ss-items-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
}

/* ============================================
   12. USER PAGES (Pill Tabs, Accent Cards, Order Status)
   ============================================ */

/* -- Auth Layout (base + mosaic pattern -- see also section 13) -- */
.ss-auth-layout {
    background: var(--ss-body-bg);
    min-height: 60vh;
    padding: 40px 0;
    position: relative;
    overflow: hidden;
}
.ss-auth-card {
    max-width: 440px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--ss-card-radius);
    padding: 40px;
    box-shadow: var(--ss-card-shadow);
    border: 1px solid var(--ss-border);
    position: relative;
    z-index: 2;
}
.ss-auth-card h2 {
    font-weight: 700;
    margin-bottom: 24px;
    text-align: center;
    font-family: var(--ss-font-display);
}
.ss-auth-card .btn-primary {
    border-radius: var(--ss-card-radius);
}

/* -- User Sidebar -- */
.ss-user-sidebar {
    background: #fff;
    border-radius: var(--ss-card-radius);
    box-shadow: var(--ss-card-shadow);
    border: 1px solid var(--ss-border);
    overflow: hidden;
    position: sticky;
    top: 120px;
}
.ss-user-sidebar .ss-sidebar-header {
    background: var(--ss-body-bg);
    padding: 16px 20px;
    border-bottom: 1px solid var(--ss-border);
    font-weight: 700;
    font-size: 14px;
    color: #374151;
}
.ss-user-sidebar .ss-sidebar-header i {
    color: var(--ss-primary);
    margin-right: 8px;
}
.ss-user-sidebar a {
    display: flex;
    align-items: center;
    padding: 13px 20px;
    color: #374151;
    text-decoration: none;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s, color 0.2s;
    font-size: 14px;
    font-weight: 500;
}
.ss-user-sidebar a:last-child { border-bottom: none; }
.ss-user-sidebar a:hover,
.ss-user-sidebar a.active {
    background: var(--ss-primary-light);
    color: var(--ss-primary);
}
.ss-user-sidebar a i {
    width: 20px;
    text-align: center;
    margin-right: 10px;
    font-size: 13px;
}
.ss-sidebar-logout {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 13px 20px;
    border: none;
    border-top: 1px solid #f1f5f9;
    background: none;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    text-align: left;
}
.ss-sidebar-logout:hover {
    background: #fef2f2;
    color: var(--ss-danger);
}
.ss-sidebar-logout i {
    width: 20px;
    text-align: center;
    margin-right: 10px;
    font-size: 13px;
}

/* -- User Layout -- */
.ss-user-layout {
    background: var(--ss-body-bg);
    min-height: 60vh;
    padding: 25px 0 40px;
}
.ss-user-content-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
    background: var(--ss-card-bg);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-card-radius);
    padding: 18px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.ss-user-content-header + .row {
    margin-top: -6px;
}
.ss-user-content-header h4 {
    margin: 0;
    font-weight: 700;
    font-size: 20px;
    color: #1f2937;
}
.ss-user-content-header > i {
    color: var(--ss-primary);
    font-size: 18px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--ss-primary-rgb), 0.08);
    border-radius: var(--ss-card-radius);
    flex-shrink: 0;
}

/* -- Contact Page Icons -- */
.ss-contact-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.ss-contact-icon.icon-primary {
    background: var(--ss-primary-light);
    color: var(--ss-primary);
}
.ss-contact-icon.icon-danger {
    background: #fef2f2;
    color: #dc2626;
}
.ss-contact-icon.icon-success {
    background: #f0fdf4;
    color: #16a34a;
}

/* ============================================
   13. AUTH PAGES (Split Layout, Pattern Background)
   ============================================ */

/* Split layout pattern background for auth */
.ss-auth-layout::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(var(--ss-primary-rgb), var(--mz-pattern-opacity)) 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, rgba(var(--ss-primary-rgb), var(--mz-pattern-opacity)) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}
.ss-auth-layout > * {
    position: relative;
    z-index: 1;
}

/* ============================================
   14. FOOTER (Dark Textured with Diagonal Stripe)
   ============================================ */

.ss-footer {
    background: var(--ss-footer-bg);
    color: var(--ss-footer-text);
    padding: 40px 0 0;
    margin-top: 25px;
    position: relative;
}
/* Diagonal stripe texture overlay */
.ss-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        var(--mz-stripe-color) 10px,
        var(--mz-stripe-color) 11px
    );
    pointer-events: none;
    z-index: 0;
}
.ss-footer > * {
    position: relative;
    z-index: 1;
}
.ss-footer-section {
    margin-bottom: 30px;
}
.ss-footer h5,
.ss-footer h6 {
    color: var(--ss-footer-heading);
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 8px;
    font-size: 15px;
    font-family: var(--ss-font-display);
    letter-spacing: -0.01em;
}
.ss-footer h5::after,
.ss-footer h6::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--ss-primary);
}
.ss-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ss-footer-links li {
    margin-bottom: 8px;
}
.ss-footer-links a {
    color: var(--ss-footer-text);
    text-decoration: none;
    transition: color 0.2s, padding-left 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.ss-footer-links a:hover,
.ss-footer-btn:hover {
    color: #ffffff;
    padding-left: 3px;
}
.ss-footer-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--ss-footer-text);
    text-decoration: none;
    transition: color 0.2s, padding-left 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}
.ss-footer-social {
    display: flex;
    gap: 12px;
    margin-top: 15px;
    justify-content: center;
}
.ss-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--ss-card-radius);
    color: white;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
}
.ss-footer-social a:hover {
    background: var(--ss-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--ss-primary-rgb), 0.4);
    color: white;
}
.ss-footer-contact {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--ss-card-radius);
    transition: background 0.2s;
}
.ss-footer-contact:hover {
    background: rgba(255, 255, 255, 0.07);
}
.ss-footer-contact-icon {
    width: 35px;
    height: 35px;
    background: var(--ss-primary);
    border-radius: var(--ss-card-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    flex-shrink: 0;
}
.ss-footer-contact-text {
    font-size: 13px;
    color: var(--ss-footer-text);
}
.ss-footer-contact-text strong {
    color: #fff;
    display: block;
    margin-bottom: 2px;
}
.ss-footer-contact-text a {
    color: #fff;
    text-decoration: none;
}
.ss-footer-about {
    color: var(--ss-footer-text);
    line-height: 1.5;
    font-size: 13px;
    text-align: center;
}
.ss-footer-logo {
    max-height: 50px;
    margin-bottom: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.ss-footer-bottom {
    background: rgba(0, 0, 0, 0.4);
    padding: 15px 0;
    margin-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 13px;
    color: var(--ss-footer-text);
}

/* -- Back to Top Button -- */
/* Кръг 45 x 45 с пръстен, който се пълни с превъртането (както на сайта за ремонт); цветът е от избраната палитра. */
.ss-back-to-top {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 1040;
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    padding: 0;
    border: 1px solid var(--ss-border);
    border-radius: 50%;
    background: #fff;
    color: var(--ss-primary);
    font-size: 16px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease, bottom 0.2s ease;
}
.ss-back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
}
.ss-back-to-top:hover {
    background: #f8fafc;
    color: var(--ss-primary-hover);
}
.ss-back-to-top i {
    position: relative;
    z-index: 1;
}
.ss-back-to-top__ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(var(--ss-primary) var(--p, 0%), rgba(15, 23, 42, 0.1) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    pointer-events: none;
}
@media (min-width: 768px) {
    .ss-back-to-top {
        right: 30px;
        bottom: 30px;
    }
}
@media print {
    .ss-back-to-top { display: none !important; }
}

/* ============================================
   15. UTILITY PAGES (Errors, Contacts, FAQ, Empty States)
   ============================================ */

/* -- Stars -- */
.ss-star {
    color: #fbbf24;
    font-size: 16px;
}
.ss-star-empty {
    color: #d1d5db;
    font-size: 16px;
}

/* -- Loading Spinner -- */
.ss-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--ss-border);
    border-top-color: var(--ss-primary);
    border-radius: 50%;
    animation: ss-spin 0.6s linear infinite;
}
@keyframes ss-spin {
    to { transform: rotate(360deg); }
}

/* -- Compare bar (floating) -- */
.ss-compare-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--ss-card-bg);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1040;
    padding: 10px 0;
    transform: translateY(100%);
    transition: transform var(--ss-transition);
}
.ss-compare-bar.visible {
    transform: translateY(0);
}

/* -- Status Colors -- */
.ss-status-new { color: var(--ss-info); }
.ss-status-processing { color: var(--ss-warning); }
.ss-status-prepared { color: #7c3aed; }
.ss-status-shipped { color: var(--ss-primary); }
.ss-status-completed { color: var(--ss-success); }
.ss-status-cancelled { color: var(--ss-danger); }

/* -- Tooltips (text-based) -- */
[data-tooltip] {
    position: relative;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 10px;
    background: #1f2937;
    color: #fff;
    font-size: 11px;
    border-radius: var(--ss-card-radius-sm);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ss-transition-fast);
    margin-bottom: 4px;
}
[data-tooltip]:hover::after {
    opacity: 1;
}

/* -- Page Content (static pages, FAQ answers) -- */
.ss-page-content {
    font-size: 15px;
    line-height: 1.8;
    color: var(--ss-text);
}
.ss-page-content h2,
.ss-page-content h3,
.ss-page-content h4 {
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    font-weight: 600;
}
.ss-page-content p { margin-bottom: 1em; }
.ss-page-content img {
    border-radius: var(--ss-card-radius);
    margin: 1em 0;
}
.ss-page-content ul,
.ss-page-content ol {
    padding-left: 1.5em;
    margin-bottom: 1em;
}

/* -- Blog Content (TinyMCE output) -- */
.blog-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #374151;
}
.blog-content h2,
.blog-content h3,
.blog-content h4 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #1f2937;
}
.blog-content p { margin-bottom: 1.2rem; }
.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ss-card-radius);
    margin: 1.5rem 0;
}
.blog-content ul,
.blog-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1.2rem;
}
.blog-content li { margin-bottom: 0.4rem; }
.blog-content blockquote {
    border-left: 4px solid var(--ss-primary);
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    background: var(--ss-body-bg);
    font-style: italic;
    border-radius: 0 var(--ss-card-radius) var(--ss-card-radius) 0;
}
.blog-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}
.blog-content th,
.blog-content td {
    border: 1px solid #dee2e6;
    padding: 0.75rem;
}
.blog-content th {
    background: var(--ss-body-bg);
    font-weight: 600;
}
.blog-content a { color: var(--ss-primary); }
.blog-content hr {
    margin: 2rem 0;
    border-color: var(--ss-border);
}

/* -- Order Item (user orders list) -- */
.ss-order-item {
    transition: border-color var(--ss-transition), box-shadow var(--ss-transition), transform var(--ss-transition);
    border: 1px solid var(--ss-border-light) !important;
}
.ss-order-item:hover {
    border-color: rgba(var(--ss-primary-rgb), 0.3) !important;
    box-shadow: var(--ss-card-shadow);
    transform: translateY(-2px);
}

/* -- Compare Table -- */
.ss-compare-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.ss-compare-card {
    position: relative;
    background: var(--ss-card-bg);
    border-radius: var(--ss-card-radius);
    border: 1px solid var(--ss-border-light);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow var(--ss-transition);
}
.ss-compare-card:hover {
    box-shadow: var(--ss-card-shadow-hover);
}
.ss-compare-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: var(--ss-danger);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--ss-transition-fast), transform var(--ss-transition-fast);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.ss-compare-remove:hover {
    background: var(--ss-danger);
    color: #fff;
    transform: scale(1.1);
}
.ss-compare-card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px 12px;
    background: var(--ss-body-bg);
    min-height: 180px;
}
.ss-compare-card-image img {
    max-height: 160px;
    max-width: 100%;
    object-fit: contain;
    transition: transform var(--ss-transition);
}
.ss-compare-card:hover .ss-compare-card-image img {
    transform: scale(1.05);
}
.ss-compare-no-image {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ss-text-light);
    font-size: 2rem;
}
.ss-compare-card-body {
    padding: 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ss-compare-card-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--ss-text);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    margin-bottom: 8px;
}
.ss-compare-card-title:hover { color: var(--ss-primary); }
.ss-compare-card-price {
    margin-bottom: 6px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.ss-compare-price-main {
    font-weight: 700;
    font-size: 16px;
    color: var(--ss-price-eur);
    font-variant-numeric: tabular-nums;
}
.ss-compare-price-promo {
    font-weight: 700;
    font-size: 16px;
    color: var(--ss-price-promo);
    font-variant-numeric: tabular-nums;
}
.ss-compare-price-old {
    font-size: 13px;
    color: var(--ss-price-old);
    text-decoration: line-through;
}
.ss-compare-card-rating {
    font-size: 12px;
    color: #ffa500;
    margin-bottom: 4px;
}
.ss-compare-card-rating span { color: var(--ss-text-muted); }
.ss-compare-stock {
    font-size: 12px;
    font-weight: 500;
}
.ss-compare-stock.in-stock { color: var(--ss-success); }
.ss-compare-stock.out-of-stock { color: var(--ss-text-muted); }
.ss-compare-card-action {
    display: block;
    text-align: center;
    padding: 10px 16px;
    background: var(--ss-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--ss-transition-fast);
}
.ss-compare-card-action:hover {
    background: var(--ss-primary-hover);
    color: #fff;
}

/* -- Compare: Specs Grid -- */
.ss-compare-specs {
    background: var(--ss-card-bg);
    border-radius: var(--ss-card-radius);
    border: 1px solid var(--ss-border-light);
    overflow: hidden;
}
.ss-compare-specs-title {
    padding: 14px 20px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--ss-text);
    background: var(--ss-body-bg);
    border-bottom: 1px solid var(--ss-border-light);
}
.ss-compare-specs-grid {
    display: flex;
    flex-direction: column;
}
.ss-compare-spec-row {
    display: grid;
    grid-template-columns: 180px repeat(var(--cols), 1fr);
    border-bottom: 1px solid var(--ss-border-light);
    transition: background var(--ss-transition-fast);
}
.ss-compare-spec-row:last-child { border-bottom: none; }
.ss-compare-spec-row:hover { background: rgba(var(--ss-primary-rgb), 0.03); }
.ss-compare-spec-label {
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ss-text);
    background: var(--ss-body-bg);
    border-right: 1px solid var(--ss-border-light);
    display: flex;
    align-items: center;
}
.ss-compare-spec-value {
    padding: 12px 16px;
    font-size: 13px;
    color: var(--ss-text);
    border-right: 1px solid var(--ss-border-light);
    display: flex;
    align-items: center;
}
.ss-compare-spec-value:last-child { border-right: none; }

@media (max-width: 768px) {
    .ss-compare-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ss-compare-card-image { min-height: 130px; padding: 12px 8px 8px; }
    .ss-compare-card-image img { max-height: 120px; }
    .ss-compare-card-body { padding: 10px 12px; }
    .ss-compare-card-title { font-size: 13px; }
    .ss-compare-specs { overflow-x: auto; }
    .ss-compare-spec-row { min-width: 600px; }
    .ss-compare-spec-label { min-width: 130px; padding: 10px 12px; }
}

/* -- Manufacturer Card -- */
.ss-brand-card {
    text-align: center;
    padding: 24px 16px;
    background: var(--ss-card-bg);
    border-radius: var(--ss-card-radius);
    border: 1px solid var(--ss-border-light);
    transition: transform var(--ss-transition), box-shadow var(--ss-transition), border-color var(--ss-transition);
    text-decoration: none;
    color: var(--ss-text);
    display: block;
    height: 100%;
}
.ss-brand-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ss-card-shadow);
    border-color: rgba(var(--ss-primary-rgb), 0.2);
    color: var(--ss-primary);
}
.ss-brand-card img {
    max-height: 60px;
    object-fit: contain;
    margin-bottom: 10px;
}

/* -- Brands Carousel -- */
.ss-brands-section {
    padding: 16px 0 8px;
}
.ss-brands-swiper {
    padding: 8px 0;
}
.ss-brand-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    background: var(--ss-card-bg);
    border-radius: var(--ss-card-radius);
    border: 1px solid var(--ss-border-light);
    transition: box-shadow var(--ss-transition), border-color var(--ss-transition), transform var(--ss-transition);
    text-decoration: none;
    height: 100px;
    min-height: 80px;
}
.ss-brand-slide:hover {
    box-shadow: var(--ss-card-shadow);
    border-color: rgba(var(--ss-primary-rgb), 0.25);
    transform: translateY(-2px);
}
.ss-brand-slide img {
    max-height: 60px;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(30%);
    opacity: 0.85;
    transition: filter var(--ss-transition), opacity var(--ss-transition);
}
.ss-brand-slide:hover img {
    filter: grayscale(0%);
    opacity: 1;
}
.ss-brands-swiper .swiper-button-prev,
.ss-brands-swiper .swiper-button-next {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.ss-brands-swiper .swiper-button-prev::after,
.ss-brands-swiper .swiper-button-next::after {
    font-size: 14px;
    color: var(--ss-text-muted);
}
@media (max-width: 767.98px) {
    /* Breadcrumb mobile */
    .breadcrumb {
        margin: 8px 0 8px;
    }
    .ss-brand-slide {
        height: 70px;
        padding: 10px 8px;
    }
    .ss-brand-slide img {
        max-height: 40px;
    }
}

/* -- Error Pages -- */
.ss-error-page {
    text-align: center;
    padding: 80px 20px;
    background: var(--ss-body-bg);
    min-height: 60vh;
}
.ss-error-page .ss-error-inner {
    max-width: 500px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--ss-card-radius);
    padding: 60px 40px;
    box-shadow: var(--ss-card-shadow);
    border: 1px solid var(--ss-border);
}
.ss-error-code {
    font-size: 120px;
    font-weight: 800;
    background: var(--ss-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 10px;
    opacity: 0.3;
    font-family: var(--ss-font-display);
}

/* -- Static Page Panel -- */
.ss-page-panel {
    background: #fff;
    border-radius: var(--ss-card-radius);
    box-shadow: var(--ss-card-shadow);
    border: 1px solid var(--ss-border);
    overflow: hidden;
    padding: 40px;
}

/* -- FAQ Panel -- */
.ss-faq-panel {
    background: #fff;
    border-radius: var(--ss-card-radius);
    box-shadow: var(--ss-card-shadow);
    border: 1px solid var(--ss-border);
    overflow: hidden;
    margin-bottom: 20px;
}
.ss-faq-panel-header {
    background: var(--ss-body-bg);
    padding: 16px 20px;
    border-bottom: 1px solid var(--ss-border);
}
.ss-faq-panel-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    font-family: var(--ss-font-display);
}
.ss-faq-panel-header i {
    color: var(--ss-primary);
}

/* ============================================
   16. CATEGORY TILES (.mc-tile Bento Overrides)
   ============================================ */

.mc-tile {
    background: #fff;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-card-radius);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    min-height: 335px;
    height: 100%;
}
.mc-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--ss-card-shadow-hover);
    text-decoration: none;
    color: inherit;
}
.mc-tile__content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.mc-tile__title {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    text-align: center;
    transition: color 0.3s;
    letter-spacing: 0.3px;
    font-family: var(--ss-font-display);
}
.mc-tile:hover .mc-tile__title {
    color: var(--ss-primary);
}
.mc-tile__divider {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--ss-primary), transparent);
    margin: 18px 0 16px;
}
.mc-tile__count {
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
    margin-top: 4px;
}

/* SINGLE mode */
.mc-tile__single {
    width: 70%;
    max-width: 220px;
    aspect-ratio: 1;
    border-radius: var(--ss-card-radius);
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fefefe;
    overflow: hidden;
}
.mc-tile__single-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.mc-tile__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--ss-body-bg);
    color: #cbd5e1;
    font-size: 3rem;
}
.mc-tile__placeholder-count {
    font-size: 13px;
    color: #94a3b8;
    font-weight: 500;
}

/* GRID mode */
.mc-tile__grid {
    margin-bottom: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mc-tile__row {
    display: flex;
    gap: 5px;
    margin-bottom: 5px;
}
.mc-tile__row:last-child { margin-bottom: 0; }
.mc-tile__item {
    flex: 1;
    aspect-ratio: 1;
    border: 2px solid var(--ss-border-light);
    border-radius: var(--ss-card-radius);
    overflow: hidden;
    background: #fefefe;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mc-tile__item--blank {
    border: 2px dashed var(--ss-border);
    background: var(--ss-body-bg);
    opacity: .5;
}
.mc-tile__item-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.mc-tile__item-empty {
    color: #cbd5e1;
    font-size: 1.2rem;
}
.mc-tile__more {
    flex: 1;
    aspect-ratio: 1;
    border-radius: var(--ss-card-radius);
    background: var(--ss-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}
.mc-tile:hover .mc-tile__more {
    transform: translateY(-2px);
    background: var(--ss-primary-hover);
    box-shadow: 0 4px 12px rgba(var(--ss-primary-rgb), 0.4);
}
.mc-tile__more-count {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 3px;
    font-family: var(--ss-font-display);
}
.mc-tile__more-text {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: .95;
    line-height: 1.1;
}

/* Responsive: tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .mc-tile { min-height: 260px; margin-bottom: 8px; }
    .mc-tile__content { padding: 13px; }
    .mc-tile__row { gap: 4px; margin-bottom: 8px; }
    .mc-tile__more-count { font-size: 20px; }
    .mc-tile__more-text { font-size: 12px; line-height: 1; }
    .mc-tile__divider { margin: 14px 0 12px; }
}
/* Responsive: mobile */
@media (max-width: 767px) {
    .mc-tile { min-height: 260px; margin-bottom: 6px; }
    .mc-tile__content { padding: 12px; }
    .mc-tile__row { gap: 4px; margin-bottom: 6px; }
    .mc-tile__more-count { font-size: 20px; }
    .mc-tile__more-text { font-size: 10px; line-height: 1; }
    .mc-tile__title { font-size: 13px; }
    .mc-tile__divider { margin: 10px 0 8px; }
}

/* ============================================
   17. ANIMATIONS (@keyframes + Cascade Stagger)
   ============================================ */

/* -- Cascade stagger on load -- */
@keyframes mz-cascade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.mz-cascade > * {
    opacity: 0;
    animation: mz-cascade-in 0.4s ease forwards;
}
.mz-cascade > *:nth-child(1) { animation-delay: 0s; }
.mz-cascade > *:nth-child(2) { animation-delay: 0.08s; }
.mz-cascade > *:nth-child(3) { animation-delay: 0.16s; }
.mz-cascade > *:nth-child(4) { animation-delay: 0.24s; }
.mz-cascade > *:nth-child(5) { animation-delay: 0.32s; }
.mz-cascade > *:nth-child(6) { animation-delay: 0.40s; }
.mz-cascade > *:nth-child(7) { animation-delay: 0.48s; }
.mz-cascade > *:nth-child(8) { animation-delay: 0.56s; }

/* -- Scroll-triggered cascade items (IntersectionObserver adds .mz-visible) -- */
/* Only hide items inside a .mz-cascade container; standalone items stay visible */
.mz-cascade .mz-cascade-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.mz-cascade .mz-cascade-item.mz-visible {
    opacity: 1;
    transform: translateY(0);
}

/* -- Scroll reveal -- */
@keyframes mz-reveal {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.mz-reveal {
    opacity: 0;
}
.mz-reveal.visible {
    animation: mz-reveal 0.5s ease forwards;
}

/* -- Fade in -- */
@keyframes ss-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes ss-scale-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.92) translateY(10px); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1) translateY(0); }
}
.ss-animate-fade-in {
    animation: ss-fade-in 0.3s ease forwards;
}
.ss-animate-scale-in {
    animation: ss-scale-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* -- Badge pulse (used by promo badge) -- */
/* Already defined above as ss-pulse */

/* -- Shimmer (used by review bars) -- */
/* Already defined above as reviewShimmer */

/* ============================================
   18. EMAILS (Print-safe)
   ============================================ */

@media print {
    body {
        background: #fff !important;
        color: #000 !important;
    }
    .ss-header,
    .ss-topbar,
    .ss-navigation,
    .ss-footer,
    .ss-back-to-top,
    .ss-compare-bar,
    .ss-sidenav,
    .ss-sidenav-overlay {
        display: none !important;
    }
    .ss-product-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        break-inside: avoid;
    }
    a {
        color: #000 !important;
        text-decoration: underline !important;
    }
    .btn-primary {
        background: #ddd !important;
        color: #000 !important;
        box-shadow: none !important;
    }
}

/* ============================================
   19. RESPONSIVE OVERRIDES
   ============================================ */

@media (max-width: 991.98px) {
    .ss-header {
        padding: 10px 0;
    }
    .ss-cart-btn {
        padding: 10px 16px;
        border-radius: var(--ss-card-radius);
        min-width: 100px;
    }
    .ss-cart-btn-label { display: none; }
    .ss-navigation {
        display: none;
    }
    .ss-home-content {
        padding-top: 20px;
    }
    .ss-home-section {
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    .ss-product-card {
        min-height: 360px;
    }
    .ss-product-card-sm {
        min-height: 320px;
    }
    .ss-product-content {
        padding: 10px;
        min-height: 150px;
    }
    .ss-product-title {
        font-size: 13px;
    }
    .ss-price-eur {
        font-size: 15px;
    }

    .ss-product-card-wrapper {
        padding: 8px;
        margin-top: 0;
    }
    .ss-buy-row-panel {
        padding: 15px 18px;
    }
    .ss-buy-row {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .ss-buy-prices {
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #ss-buy-btn-wrap,
    #ss-call-btn-wrap {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .ss-price-main {
        font-size: 24px;
    }
    .ss-buy-btn {
        padding: 14px 20px;
        font-size: 16px;
        max-width: none;
        flex: 1;
    }
    .ss-fast-order-form {
        flex-direction: column;
    }
    .ss-fast-order-col--btn {
        flex: 1;
    }
    .ss-fast-order-btn {
        width: 100%;
    }
    .ss-fast-order-phone {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
    .ss-fast-order-phone-number {
        font-size: 26px;
    }
    .ss-products-swiper .swiper-button-prev,
    .ss-products-swiper .swiper-button-next {
        display: none;
    }
    .ss-reviews-summary {
        grid-template-columns: 1fr;
        padding: 2rem;
        gap: 2rem;
    }
    .ss-review-header {
        flex-direction: column;
        gap: 0.75rem;
    }
    .ss-review-meta-right {
        align-items: flex-start;
        width: 100%;
    }
    .ss-review {
        padding: 1rem 1.25rem;
    }
    .ss-review-form {
        padding: 1.25rem;
    }
    .ss-review-avatar {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }
    .ss-reviews-avg {
        font-size: 3rem;
    }
    .ss-review-form .fa-star {
        font-size: 2rem !important;
    }
    .ss-tab-body {
        padding: 16px;
    }
    /* Cart mobile */
    .ss-cart-item {
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px 16px;
    }
    .ss-cart-item-image {
        width: 64px;
        height: 64px;
    }
    .ss-cart-item-info {
        flex: 1;
        min-width: 0;
    }
    .ss-cart-item-qty {
        width: auto;
    }
    .ss-cart-item-price {
        width: auto;
        min-width: auto;
        font-size: 14px;
    }
    .ss-qty-control button {
        padding: 4px 8px;
        font-size: 13px;
    }
    .ss-qty-control input {
        width: 32px;
        font-size: 12px;
    }
    /* Category page mobile */
    .ss-category-title {
        font-size: 22px;
    }
    .ss-category-header {
        padding: 20px;
    }
    .ss-main-panel {
        border-radius: var(--ss-card-radius);
    }
    .ss-category-info {
        padding: 20px;
        border-radius: var(--ss-card-radius);
    }
    /* Blog article */
    .ss-blog-article {
        padding: 24px;
        border-radius: var(--ss-card-radius);
    }
    .ss-blog-article h1 {
        font-size: 22px;
    }
    /* Blog featured card - stack vertically on tablet */
    .ss-blog-card-featured img {
        border-radius: var(--ss-card-radius) var(--ss-card-radius) 0 0 !important;
        min-height: 220px !important;
    }
    /* Page panel */
    .ss-page-panel {
        padding: 24px;
        border-radius: var(--ss-card-radius);
    }
    /* Gallery: horizontal thumbs on tablet/mobile */
    .ss-gallery-thumbs {
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 12px;
    }
    /* Step indicator: compact on mobile */
    .mz-step-label {
        font-size: 11px;
    }
    .mz-step-line {
        width: 30px;
    }
}

@media (max-width: 575.98px) {
    .ss-product-card {
        min-height: 300px;
    }
    .ss-product-card-sm {
        min-height: 280px;
    }
    .ss-badges {
        top: 8px;
        left: 8px;
        gap: 4px;
    }
    .ss-badge {
        width: 36px;
        height: 36px;
        font-size: 8px;
    }
    .ss-badge-promo {
        width: 38px;
        height: 38px;
        font-size: 11px;
        top: 8px;
        right: 8px;
    }
    .ss-badge-video {
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
    }
    .ss-badge-video.with-promo {
        top: 51px;
        right: 10px;
    }
    .ss-product-content {
        padding: 8px;
        min-height: 130px;
    }
    .ss-product-title {
        font-size: 12px;
        margin-bottom: 3px;
    }
    .ss-product-pricing {
        padding-top: 8px;
    }
    .ss-price-eur {
        font-size: 14px;
    }
    .ss-auth-layout {
        padding: 20px 0;
    }
    .ss-auth-card {
        margin: 0 10px;
        padding: 24px;
    }
    .ss-blog-article {
        padding: 20px;
    }
    .ss-blog-card-featured .col-lg-5 {
        padding: 20px !important;
    }
    .ss-page-panel {
        padding: 20px;
    }
    .ss-error-page .ss-error-inner {
        padding: 40px 20px;
    }
    .ss-error-code {
        font-size: 80px;
    }
    .ss-section-heading {
        font-size: 0.85rem;
        gap: 10px;
        padding-bottom: 12px;
    }
    .ss-buy-row-panel {
        padding: 15px;
    }
    .ss-buy-row {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .ss-buy-prices {
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .ss-price-main {
        font-size: 22px;
    }
    #ss-buy-btn-wrap,
    #ss-call-btn-wrap {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .ss-buy-btn {
        max-width: none;
        width: 100%;
        flex: none;
        justify-content: center;
    }
    .ss-buy-stock {
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
    }
    /* Cart small mobile - stack vertically */
    .ss-cart-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px;
    }
    .ss-cart-item-image {
        width: 80px;
        height: 80px;
    }
    .ss-cart-item-qty {
        width: auto;
    }
    .ss-cart-item-price {
        width: 100%;
        text-align: left;
        min-width: auto;
    }
    .ss-cart-item-remove {
        position: absolute;
        top: 10px;
        right: 10px;
    }
    .ss-cart-item {
        position: relative;
    }
    .ss-empty-state {
        padding: 50px 15px;
    }
    /* Category page small mobile */
    .ss-category-title {
        font-size: 20px;
    }
    .ss-category-header {
        padding: 15px;
    }
    .ss-modern-sort {
        font-size: 12px;
        padding: 6px 10px;
        min-width: 140px;
    }
    .ss-filter-toggle-btn {
        font-size: 12px;
        padding: 6px 12px;
    }
    /* Step indicator: stacked on very small */
    .mz-step-label {
        display: none;
    }
    .mz-step-line {
        width: 20px;
    }
    .mz-step-circle {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }
    /* Staggered hover: always show buttons on mobile (no hover) */
    .ss-action-btn,
    .ss-action-btn-call,
    .ss-wishlist-btn:not(.text-danger) {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0s !important;
    }
}

/* ============================================
   ADDITIONAL FIXES
   ============================================ */

/* -- SweetAlert2 palette-themed -- */
.swal2-popup {
    border: 3px solid var(--ss-primary) !important;
    border-radius: var(--ss-card-radius) !important;
}
.swal2-confirm.swal2-styled {
    background-color: var(--ss-primary) !important;
    border-radius: var(--ss-card-radius) !important;
}
.swal2-confirm.swal2-styled:hover {
    background-color: var(--ss-primary-hover) !important;
}
.swal2-cancel.swal2-styled {
    border-radius: var(--ss-card-radius) !important;
}
/* Cart-added modal: always green confirm button */
.swal2-popup.swal-cart-added .swal2-confirm.swal2-styled {
    background-color: #198754 !important;
}
.swal2-popup.swal-cart-added .swal2-confirm.swal2-styled:hover {
    background-color: #157347 !important;
}
.swal2-popup.swal-delete {
    border-color: #dc2626 !important;
}

/* -- Cover video protection -- */
.protected-video {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
@media (max-width: 768px) {
    .ss-gallery-main .protected-video {
        width: 100% !important;
        height: auto !important;
        max-height: 400px;
    }
}

/* -- Mobile: always show staggered buttons (no hover on touch) -- */
@media (hover: none), (max-width: 767.98px) {
    .ss-action-btn,
    .ss-action-btn-call,
    .ss-wishlist-btn {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ============================================
   12. CONNECTED PRODUCTS (accessories list)
   ============================================ */
.ss-connected {
    margin: 3rem 0;
}
.ss-connected-list {
    /* .ss-panel-raised provides theme-native bg/border/radius/shadow */
    overflow: hidden;
}
.ss-connected-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    transition: background 0.2s ease;
}
.ss-connected-item:not(:last-child) {
    border-bottom: 1px solid var(--ss-border);
}
.ss-connected-item:hover {
    background: color-mix(in srgb, var(--ss-primary) 4%, transparent);
}
.ss-connected-content {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.ss-connected-content:hover {
    text-decoration: none;
    color: inherit;
}
.ss-connected-thumb {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    object-fit: contain;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-card-radius-sm);
    background: #fff;
}
.ss-connected-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ss-connected-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.ss-connected-title {
    flex: 0 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--ss-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s ease;
}
.ss-connected-content:hover .ss-connected-title {
    color: var(--ss-primary);
}
/* Promo discount badge next to title (reuses look from .ss-buy-price .ss-price-discount) */
.ss-connected-title-row .ss-price-discount {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    background: var(--ss-price-promo);
    padding: 2px 7px;
    border-radius: 6px;
    line-height: 1.3;
    white-space: nowrap;
}
.ss-connected-code {
    font-size: 0.72rem;
    color: var(--ss-text-muted);
    letter-spacing: 0.02em;
}
.ss-connected-body .ss-color-swatches {
    margin-top: 4px;
}
.ss-connected-price {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
    min-width: 96px;
    gap: 2px;
    position: relative;
}
.ss-connected-price .ss-price-old {
    font-size: 0.72rem;
    color: var(--ss-text-muted);
    text-decoration: line-through;
}
.ss-connected-price .ss-price-eur {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ss-text);
}
.ss-connected-price .ss-price-eur.promo {
    color: #dc3545;
}

.ss-connected-price-inquiry {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ss-text-muted);
    font-style: italic;
}
.ss-connected-action {
    flex-shrink: 0;
}

/* Собствен бутон за списъка със свързани продукти. Общият .ss-action-btn в тази
   тема е overlay върху продуктова карта - скрит, докато не посочиш картата - и
   затова не става тук. Правилата долу са 1:1 с ss_default, само заоблянето е
   на mosaic. */
.ss-connected-btn,
.ss-connected-btn-call {
    border: none;
    border-radius: var(--ss-card-radius);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    text-decoration: none;
    position: relative;
    z-index: 10;
}
.ss-connected-btn {
    background: linear-gradient(135deg, var(--ss-accent-start), var(--ss-accent-end));
    font-size: 18px;
}
.ss-connected-btn:hover {
    background: linear-gradient(135deg, var(--ss-primary-dark), var(--ss-accent-mid));
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}
.ss-connected-btn-call {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    font-size: 14px;
}
.ss-connected-btn-call:hover {
    background: linear-gradient(135deg, #b91c1c, #dc2626);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}
.ss-connected-btn > i,
.ss-connected-btn-call > i {
    transform: translateY(1px);
}
@media (max-width: 575.98px) {
    .ss-connected-item {
        gap: 10px;
        padding: 10px 12px;
    }
    .ss-connected-thumb {
        width: 52px;
        height: 52px;
    }
    .ss-connected-title {
        font-size: 0.88rem;
    }
    .ss-connected-price {
        min-width: 0;
    }
    .ss-connected-price .ss-price-eur {
        font-size: 0.88rem;
    }
}

/* ============================================
   MOBILE DRAWER V2 (drill-down, comfort-first)
   Theme: ss_mosaic - 6px micro-round bento.
   Identical to ss_default except border-radius: 6px throughout.
   ============================================ */

.ss-drawer {
    width: min(340px, 88vw);
    left: calc(-1 * min(340px, 88vw));
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.ss-drawer.open {
    left: 0;
}
.ss-drawer [x-cloak] {
    display: none !important;
}

/* Top bar */
.ss-drawer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px 0 16px;
    height: 56px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--ss-border-light, #eee);
}
.ss-drawer-logo {
    display: flex;
    align-items: center;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.ss-drawer-logo img {
    max-height: 32px;
    width: auto;
    display: block;
}
.ss-drawer-close {
    background: transparent;
    border: none;
    color: #555;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}
.ss-drawer-close:hover,
.ss-drawer-close:focus-visible {
    background: #f3f4f6;
    outline: none;
}
.ss-drawer-close:active {
    background: #e5e7eb;
}

/* Hero search */
.ss-drawer-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: 14px 16px 10px;
    background: #f5f6f8;
    border-radius: 6px;
    height: 52px;
    flex-shrink: 0;
    transition: box-shadow 0.15s ease, background 0.15s ease;
}
.ss-drawer-search:focus-within {
    background: #fff;
    box-shadow: 0 0 0 2px var(--ss-primary, #3b82f6);
}
.ss-drawer-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 0.95rem;
    pointer-events: none;
}
.ss-drawer-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0 52px 0 44px;
    height: 100%;
    font-size: 0.95rem;
    color: #111;
    outline: none;
    min-width: 0;
}
.ss-drawer-search-input::placeholder {
    color: #9ca3af;
}
.ss-drawer-search-submit {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 6px;
    border: none;
    background: var(--ss-primary, #3b82f6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}
.ss-drawer-search-submit:active {
    transform: translateY(-50%) scale(0.94);
}

/* Quick pills (centered, one line with 2 items) */
.ss-drawer-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 4px 12px 10px;
    flex-shrink: 0;
}
.ss-drawer-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border-radius: 6px;
    background: #f3f4f6;
    color: #1f2937;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.15s ease;
}
.ss-drawer-pill:active {
    transform: scale(0.96);
}
.ss-drawer-pill i {
    font-size: 0.8rem;
}
.ss-drawer-pill--promo {
    background: #fef2f2;
    color: #b91c1c;
}
.ss-drawer-pill--promo:hover { background: #fee2e2; color: #b91c1c; }
.ss-drawer-pill--new {
    background: #fffbeb;
    color: #b45309;
}
.ss-drawer-pill--new:hover { background: #fef3c7; color: #b45309; }

/* Panes container (drill-down horizontal slide) */
.ss-drawer-panes {
    position: relative;
    flex: 1;
    display: flex;
    width: 200%;
    overflow: hidden;
    transform: translateX(0);
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}
.ss-drawer-panes--child-open {
    transform: translateX(-50%);
}
.ss-drawer-pane {
    flex: 0 0 50%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 20px;
}
.ss-drawer-pane[inert] {
    visibility: hidden;
}

/* Child pane header */
.ss-drawer-child-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    height: 52px;
    border-bottom: 1px solid var(--ss-border-light, #eee);
}
.ss-drawer-back {
    background: transparent;
    border: none;
    color: var(--ss-primary, #3b82f6);
    width: 44px;
    height: 44px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}
.ss-drawer-back:hover,
.ss-drawer-back:focus-visible {
    background: #f3f4f6;
    outline: none;
}
.ss-drawer-back:active {
    background: #e5e7eb;
}
.ss-drawer-child-title {
    font-size: 1rem;
    font-weight: 600;
    color: #111;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Section labels (primary color for brand coherence) */
.ss-drawer-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ss-primary, #3b82f6);
    padding: 20px 20px 8px;
}
.ss-drawer-pane--root .ss-drawer-section-label:first-child {
    padding-top: 14px;
}

/* Rows */
.ss-drawer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ss-drawer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 50px;
    padding: 8px 18px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #f3f4f6;
    color: #111;
    font-size: 0.92rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease, padding-left 0.15s ease;
}
.ss-drawer-row:hover,
.ss-drawer-row:focus-visible {
    background: #f9fafb;
    outline: none;
}
.ss-drawer-row:active {
    background: #f3f4f6;
}
.ss-drawer-row-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.ss-drawer-row-icon {
    color: #6b7280;
    width: 20px;
    text-align: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.ss-drawer-row-chev {
    color: #9ca3af;
    font-size: 0.7rem;
    flex-shrink: 0;
}
.ss-drawer-row-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--ss-primary, #3b82f6);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    margin-left: -6px;
}
.ss-drawer-row--parent-link {
    color: var(--ss-primary, #3b82f6);
    font-weight: 500;
    background: #f9fafb;
}
.ss-drawer-row--admin {
    color: var(--ss-primary, #3b82f6);
}
.ss-drawer-row--muted {
    color: #6b7280;
}
.ss-drawer-logout-form {
    margin: 0;
    padding: 0;
}
.ss-drawer-logout-form button {
    width: 100%;
}

/* Footer */
.ss-drawer-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--ss-border-light, #eee);
    background: #fafafa;
    min-height: 52px;
}
.ss-drawer-footer-lang {
    flex-shrink: 0;
}
.ss-drawer-footer-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #111;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.12s ease;
}
.ss-drawer-footer-phone i {
    color: var(--ss-primary, #3b82f6);
    font-size: 0.8rem;
}
.ss-drawer-footer-phone:hover {
    background: #f3f4f6;
    color: #111;
}

/* Small phones */
@media (max-width: 360px) {
    .ss-drawer {
        width: 92vw;
        left: -92vw;
    }
    .ss-drawer-row {
        padding-left: 16px;
        padding-right: 16px;
    }
    .ss-drawer-section-label {
        padding-left: 16px;
        padding-right: 16px;
    }
    .ss-drawer-search {
        margin-left: 12px;
        margin-right: 12px;
    }
    .ss-drawer-pills {
        padding-left: 12px;
        padding-right: 12px;
    }
    /* Stacked pills: equal full-width when wrapping on narrow screens */
    .ss-drawer-pill {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ── PhotoSwipe lightbox: permanent white canvas for transparent PNGs ──
   Backdrop stays the PhotoSwipe default dark (don't override --pswp-bg).
   Target .pswp__img directly (the <img> tag itself) so the white canvas
   stays AFTER the image fully loads — earlier we only set background on
   the helper classes (.pswp__img--placeholder, .pswp__img--with-bg) which
   PhotoSwipe removes once the high-res image is loaded, making the canvas
   flicker back to "transparent against dark backdrop". */
.pswp__img,
.pswp__img--placeholder,
.pswp__img--with-bg {
    background: #ffffff !important;
}

so it
   carries more weight at every width. Mobile-first: these rules own the size on
   all steps,
    so they never fight the dual-currency ones above. */
body.single-price .ss-price-main {
    font-size: 28px;
    /* Само тук: без реда с лева отдолу цената е сама в блока и
       иска малко въздух над и под себе си. */
    margin: 5px 0;
}
body.single-price .ss-price-eur {
    font-size: 16px;
}
@media (min-width: 576px) {
    body.single-price .ss-price-main {
        font-size: 28px;
    }
    body.single-price .ss-price-eur {
        font-size: 17px;
    }
}
@media (min-width: 992px) {
    body.single-price .ss-price-main {
        font-size: 32px;
    }
    body.single-price .ss-price-eur {
        font-size: 20px;
    }
}

/* ── v2.9.6: Карта "Автомат" без налични автомати - вижда се, не се избира ("СКОРО") ── */
.ss-delivery-card.ss-card-disabled,
.ss-checkout-card.ss-card-disabled { opacity: 0.55; cursor: not-allowed; }

/* ── v2.9.6: Метод/куриер картите - еднаква височина в реда.
   Bootstrap колоната се разтяга, но картата вътре не я следваше, затова
   "До адрес" (по-къс текст) излизаше по-ниска от съседките. ── */
.ss-delivery-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Празна количка: картата в средата между менюто и футъра (долният отстъп + горният на футъра = горният). */
main:has(> .ss-order-layout--empty) {
    display: flex;
    flex-direction: column;
}
.ss-order-layout--empty {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 55px;
    padding-bottom: 30px;
}

/* v2.9.18: TBI калкулатор - радиусът и рамката на картите за плащане */
:root {
    --ss-payment-radius: 6px;
    --ss-payment-border: 2px;
}