/*
|--------------------------------------------------------------------------
| SimpleShop - Frontend Styles
|--------------------------------------------------------------------------
| CSS Custom Properties + Color Palette System
| Bootstrap 5 overrides + Component foundation
|--------------------------------------------------------------------------
*/

/* ============================================
   0. SELF-HOSTED FONTS (Open Sans)
   ============================================ */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/open-sans/open-sans-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/open-sans/open-sans-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/open-sans/open-sans-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/open-sans/open-sans-700.woff2') format('woff2');
}

@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;

    /* ── Layout Colors ── */
    --ss-body-bg: #f8fafc;
    --ss-card-bg: #ffffff;
    --ss-card-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    --ss-card-shadow-hover: 0 12px 20px rgba(0, 0, 0, 0.15);
    --ss-card-radius: 20px;
    --ss-card-radius-sm: 10px;

    /* ── Header / Footer ── */
    --ss-header-bg: #ffffff;
    --ss-topbar-bg: #f8fafc;
    --ss-topbar-text: #4b5563;
    --ss-footer-bg: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    --ss-footer-text: #d1d5db;
    --ss-footer-heading: #ffffff;

    /* ── Typography ── */
    --ss-font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ss-text: #1f2937;
    --ss-text-muted: #6b7280;
    --ss-text-light: #9ca3af;

    /* ── 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);
}
[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;
}

::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 ── */
.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: linear-gradient(135deg, var(--ss-accent-start) 0%, var(--ss-accent-mid) 50%, var(--ss-accent-end) 100%);
    background-color: var(--ss-primary);
    border: none;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: all var(--ss-transition);
    box-shadow: 0 2px 6px rgba(var(--ss-primary-rgb), 0.2);
}
.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, var(--ss-primary-dark) 0%, var(--ss-accent-mid) 50%, var(--ss-accent-end) 100%);
    background-color: var(--ss-primary-hover);
    border: none;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(var(--ss-primary-rgb), 0.35);
}
.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.02em;
}

.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);
}
.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: all var(--ss-transition-smooth);
}

/* ── Forms ── */
.form-control:focus,
.form-select:focus {
    border-color: var(--ss-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--ss-primary-rgb), 0.15);
}

/* ── Pagination ── */
.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: 8px !important;
    padding: 7px 13px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
    min-width: 38px;
    text-align: center;
    transition: all 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 - same height as number 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: 8px !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 ── */
.breadcrumb {
    --bs-breadcrumb-divider: "›";
    padding: 10px 16px;
    margin: 10px 0 10px;
    background: linear-gradient(234deg, #f8fafc, #e2e8f0);
    border-radius: 10px;
    font-size: 0.85rem;
    border: none;
    box-shadow: 0 0 12px rgba(0, 0, 0, .07);
    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: #3a3a3a;
    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: #e67e22;
    color: #fff !important;
    border-radius: 16px;
    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: #cf730c;
    color: #fff !important;
}

/* Breadcrumb full-width breakout (product detail page) */
.ss-breadcrumb-row {
    position: relative;
    left: -25px;
    width: calc(100% + 50px);
    margin-top: -10px;
    border-radius: 10px;
    background: linear-gradient(234deg, #f8fafc, #e2e8f0);
    box-shadow: 0 0 12px rgba(0, 0, 0, .07);
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.ss-breadcrumb-row .breadcrumb {
    background: transparent;
    box-shadow: none;
    margin: 0;
    border-radius: 0;
}
.ss-breadcrumb-row .flex-grow-1 {
    min-width: 0;
}
.ss-breadcrumb-row .breadcrumb-item.active {
}

/* ── 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);
}
.nav-link:hover {
    color: var(--ss-primary);
}
.nav-link.active,
.nav-pills .nav-link.active {
    color: #fff;
    background: var(--ss-primary);
}
.nav-tabs .nav-link.active {
    color: var(--ss-primary);
    background: transparent;
    border-bottom-color: var(--ss-primary);
}

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

/* ── Dropdown ── */
.dropdown-menu {
    border-radius: var(--ss-card-radius-sm);
    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. PRODUCT CARD (Foundation - F4 will expand)
   ============================================ */

/* ── Base Card ── */
.ss-product-card {
    position: relative;
    background: var(--ss-card-bg);
    border-radius: var(--ss-card-radius);
    overflow: hidden;
    transition: all 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.04);
    box-shadow: var(--ss-card-shadow);
}
.ss-product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--ss-card-shadow-hover);
}

/* Carousel variant (compact) */
.ss-product-card-sm {
    min-height: 380px;
    border: 2px solid rgba(0, 0, 0, 0.04);
    box-shadow: none;
}
.ss-product-card-sm:hover {
    transform: none;
    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.6s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
}
.ss-product-card:hover .ss-product-image img {
    transform: scale(1.03);
}
.ss-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
}
.ss-no-image i {
    font-size: 3rem;
    color: #c0c4c8;
}

/* ── Badges ── */
.ss-badges {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 12;
    text-align: center;
}
.ss-badge {
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    font-weight: 600;
}
.ss-badge-new,
.ss-badge-featured {
    min-width: 60px;
    text-align: center;
}
.ss-badge-new {
    background: var(--ss-badge-new);
}
.ss-badge-featured {
    background: var(--ss-badge-featured);
}

.ss-badge-promo {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--ss-badge-promo);
    border-radius: 50%;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    z-index: 12;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    animation: ss-pulse 2s infinite;
}
@keyframes ss-pulse {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.02); }
}

.ss-badge-video {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #dc2626;
    border-radius: 50%;
    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: 67px;
    right: 18px;
}

/* ── 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: 16px;
    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: 50%;
    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 (max-width: 767.98px) {
    /* The column's own padding is the gap under its last box (mb-3 is !important) */
    .ss-buy-panel > .ss-fast-order-panel { margin-bottom: 0 !important; }
}
/* Второто изречение пада само в хоризонталния ред (компютър); на телефон редът е в колона и текстът остава цял. */
@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 #e2e8f0;
    }
    .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 ── */
.ss-wishlist-btn {
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    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;
    transition: all var(--ss-transition);
    color: #6b7280;
    font-size: 14px;
    padding: 0;
    line-height: 1;
}
.ss-wishlist-btn:hover {
    background: #fff;
    transform: scale(1.1);
    color: var(--ss-danger);
}
.ss-wishlist-btn.text-danger {
    color: var(--ss-danger);
}

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

.ss-product-title {
    margin: 0 0 5px;
    font-size: 15px;
    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: #92400e;
}

/* ── 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: 50%;
    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: 50%;
    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: 14px;
    border-top: 2px solid var(--ss-divider);
}

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

.ss-price-eur {
    font-size: 18px;
    font-weight: 600;
    color: var(--ss-price-eur);
    line-height: 1;
    transition: color var(--ss-transition);
}
.ss-price-eur.promo {
    color: var(--ss-price-promo);
}
.ss-product-card:hover .ss-price-eur {
    color: #92400e;
}
.ss-product-card:hover .ss-price-eur.promo {
    color: #b91c1c;
}

.ss-price-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #b45309, 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: 18px;
    font-weight: 700;
    color: var(--ss-price-promo);
    line-height: 1;
}

/* "По запитване" */
.ss-price-inquiry {
    font-size: 14px;
    color: var(--ss-text-muted);
    font-weight: 500;
}

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

/* Variants badge */
.ss-variants-badge {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    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: linear-gradient(135deg, var(--ss-accent-start), var(--ss-accent-end));
    border: none;
    border-radius: 8px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    text-decoration: none;
    position: relative;
    z-index: 10;
}
.ss-action-btn:hover {
    background: linear-gradient(135deg, var(--ss-primary-dark), var(--ss-accent-mid));
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}
/* Call button (red gradient - "Обадете се") */
.ss-action-btn-call {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    border: none;
    border-radius: 8px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    text-decoration: none;
    position: relative;
    z-index: 10;
}
.ss-action-btn-call:hover {
    background: linear-gradient(135deg, #b91c1c, #dc2626);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}

/* ============================================
   6. HEADER & NAVIGATION
   ============================================ */

/* ── 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 ── */
.ss-topbar {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
    padding: 6px 0;
    font-size: 13px;
}
.ss-topbar a {
    color: #6c757d;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ss-topbar a:hover {
    color: #495057;
    transform: translateY(-1px);
}
.ss-topbar-phone {
    color: var(--ss-primary) !important;
    font-weight: 600;
    background: white;
    padding: 5px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.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: 4px;
    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 ── */
.ss-header {
    background: var(--ss-header-bg);
    box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.13);
    padding: 20px 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 (input-group: input left-rounded + button right-rounded) ── */
.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 #e9ecef;
    border-radius: 25px 0 0 25px;
    border-right: none;
    padding: 14px 20px;
    font-size: 14px;
    transition: all 0.3s ease;
    height: 50px;
    flex: 1;
}
.ss-search-box .form-control:focus {
    border-color: var(--ss-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--ss-primary-rgb), 0.15);
    outline: none;
}
.ss-search-box .btn-search {
    background: var(--ss-primary);
    border-radius: 0 25px 25px 0;
    padding: 0 20px;
    transition: all 0.3s ease;
    height: 50px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    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-sm);
    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: 6px;
    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);
}
.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.3s ease;
    min-width: 24px;
    text-align: center;
}
.ss-action-icon:hover {
    color: var(--ss-primary);
}

/* ── Cart Button (gradient, default style) ── */
.ss-cart-btn {
    background: linear-gradient(145deg, var(--ss-primary), var(--ss-primary-dark));
    color: white;
    padding: 14px 24px;
    border-radius: 20px 5px 20px 5px;
    text-decoration: none;
    min-width: 112px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    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.3), transparent);
    transition: left 0.6s;
}
.ss-cart-btn:hover::before {
    left: 100%;
}
.ss-cart-btn:hover {
    color: white;
    text-decoration: none;
    transform: translateY(-1px);
}
.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;
}

/* ── 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 ── */
.ss-navigation {
    background: #fff;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.ss-navigation .container {
    padding-left: 15px;
    padding-right: 15px;
}
.ss-navigation .nav-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
    padding: 4px 0;
    list-style: none;
}
.ss-navigation .nav-list > li {
    position: relative;
}
.ss-navigation .nav-list > li > a {
    color: #333;
    padding: 15px 12px;
    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: all 0.3s ease;
}
/* Underline animation (::after pseudo-element, grows from center) */
.ss-navigation .nav-list > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--ss-primary);
    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: pill bg + green text */
.ss-navigation .nav-list > li > a:hover {
    background: #f8f9fa;
    color: var(--ss-primary);
    border-radius: 10px;
}
/* Active: pill bg + green text + bold */
.ss-navigation .nav-list > li.active > a {
    background: #f8f9fa;
    color: var(--ss-primary);
    border-radius: 10px;
    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 #ddd;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    border-radius: 4px;
    margin: 0;
    padding: 5px 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: all 0.3s ease;
}
.ss-navigation .dropdown-menu .dropdown-item:hover {
    background: #f8f9fa;
    color: var(--ss-primary);
    padding-left: 25px;
}
.ss-navigation .dropdown-menu .dropdown-item.active {
    background: #f8f9fa;
    color: var(--ss-primary);
    font-weight: 600;
    border-left: 5px 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 Нови + Промо to the 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: Промоции */
.ss-navigation .nav-list > li.nav-auto-promo > a {
    color: #dc2626;
    font-weight: 600;
}
.ss-navigation .nav-list > li.nav-auto-promo > a:hover,
.ss-navigation .nav-list > li.nav-auto-promo.active > a {
    background: #fef2f2;
    color: #b91c1c;
}
/* Auto-menu: Нови */
.ss-navigation .nav-list > li.nav-auto-new > a {
    color: #059669;
    font-weight: 600;
}
.ss-navigation .nav-list > li.nav-auto-new > a:hover,
.ss-navigation .nav-list > li.nav-auto-new.active > a {
    background: #f0fdf4;
    color: #047857;
}

/* ── Priority+ Navigation (overflow → "Още ▾") ── */
.nav-priority-hidden { display: none !important; }
.ss-navigation .nav-list > li.nav-more > .nav-more-trigger {
    color: #333;
    padding: 15px 12px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    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 {
    color: var(--ss-primary);
    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: 8px;
    color: white;
    font-size: 18px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ss-hamburger:hover {
    background: var(--ss-primary-dark);
    transform: scale(1.05);
}
.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: #ddd;
}

/* ── 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: all 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-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: all 0.2s;
}
.ss-sidenav-links li a:hover {
    background: #f8f9fa;
    padding-left: 20px;
    color: var(--ss-primary);
}

/* ============================================
   7. FOOTER
   ============================================ */

.ss-footer {
    background: var(--ss-footer-bg);
    color: white;
    padding: 40px 0 0;
    margin-top: 25px;
}
.ss-footer-section {
    margin-bottom: 30px;
}
.ss-footer h5,
.ss-footer h6 {
    color: #fff;
    font-weight: 600;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 8px;
    font-size: 16px;
}
.ss-footer h5::after,
.ss-footer h6::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    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: #bdc3c7;
    text-decoration: none;
    transition: all 0.3s ease;
    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: #bdc3c7;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}
/* Card marks between the slogan and the social icons: the official files on a white tile, never recoloured */
.ss-footer-cards {
    margin-top: 16px;
    text-align: center;
}
.ss-footer-cards-title {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: #bdc3c7;
}
.ss-cardmarks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ss-cardmarks-item {
    width: 66px;
    height: 40px;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
.ss-cardmarks-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* The divider is drawn only when social icons follow */
.ss-footer-cards--ruled::after {
    content: '';
    display: block;
    width: 180px;
    max-width: 100%;
    height: 1px;
    margin: 15px auto 0;
    background: rgba(255, 255, 255, 0.12);
}
.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.1);
    border-radius: 50%;
    color: white;
    transition: all 0.3s ease;
    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.05);
    border-radius: 6px;
    transition: all 0.3s ease;
}
.ss-footer-contact:hover {
    background: rgba(255,255,255,0.08);
}
.ss-footer-contact-icon {
    width: 35px;
    height: 35px;
    background: var(--ss-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    flex-shrink: 0;
}
.ss-footer-contact-text {
    font-size: 13px;
    color: #bdc3c7;
}
.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: #bdc3c7;
    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.3);
    padding: 15px 0;
    margin-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 13px;
    color: #bdc3c7;
}

/* ── 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; }
}

/* ============================================
   8. HOMEPAGE
   ============================================ */

/* ── Hero Carousel ── */
.ss-hero .carousel-item img {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
}
.ss-hero .carousel-caption {
    background: rgba(0, 0, 0, 0.35);
    padding: 25px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
    border-radius: 30px;
}
.ss-hero .carousel-caption h2 {
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.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 but adapts - bottom gradient overlay,
   compact text, subtitle clamped to 2 lines. Replaces Bootstrap's
   d-none d-md-block hide-on-mobile pattern. */
@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.1rem !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 ── */
.ss-section-heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: #808080;
    margin-bottom: 35px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 20px;
}
.ss-section-heading::before,
.ss-section-heading::after {
    content: '';
    /* Базис 24px и без свиване: при заглавие на два реда чертите
       остават видими вместо да се свият до нула. */
    flex: 1 0 24px;
    height: 1px;
    background: #dce1e8;
}
.ss-section-heading > span,
.ss-section-heading > a {
    position: relative;
}
.ss-section-heading > span::after,
.ss-section-heading > a::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 2px;
    background: #b0b0b0;
    border-radius: 1px;
}
/* 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 #e2e8f0;
    border-radius: 20px;
    padding: 6px 16px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.25s ease;
    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, 59,130,246), 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: 10px;
    background-color: #ffffff;
    border: 1px solid #f3f3f3;
    border-bottom: 2px solid var(--ss-primary);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* ── Trust Signals / Highlights ── */
.ss-highlights-inner {
    padding: 20px 10px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #f4f4f5;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.ss-highlight-item {
    text-align: center;
    padding: 20px 10px;
}
.ss-highlight-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    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-sm);
    border: 1px solid var(--ss-border-light);
    transition: all 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;
}

/* ── Category Tile (modernCategory 1:1 from SimpleShop) ── */
.mc-tile {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: all .3s ease;
    position: relative;
    min-height: 335px;
    height: 100%;
}
.mc-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 20px rgba(0,0,0,0.15);
    text-decoration: none;
    color: inherit;
}
.mc-tile__content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.mc-tile__title {
    font-size: 17px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    text-align: center;
    transition: color .3s ease;
    letter-spacing: 0.5px;
}
.mc-tile:hover .mc-tile__title {
    color: var(--ss-primary);
}
.mc-tile__divider {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--ss-primary, #2563eb), transparent);
    margin: 18px 0 16px;
}
.mc-tile__count {
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
    margin-top: 4px;
}

/* SINGLE mode - one big cover image */
.mc-tile__single {
    width: 70%;
    max-width: 220px;
    aspect-ratio: 1;
    border-radius: 6px;
    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: #f8fafc;
    color: #cbd5e1;
    font-size: 3rem;
}
.mc-tile__placeholder-count {
    font-size: 13px;
    color: #94a3b8;
    font-weight: 500;
}

/* GRID mode - 5 product previews + more button */
.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 #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
    background: #fefefe;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mc-tile__item--blank {
    border: 2px dashed #e2e8f0;
    background: #f8fafc;
    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: 10px;
    background: linear-gradient(135deg, var(--ss-primary) 0%, var(--ss-primary-dark) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all .2s ease;
}
.mc-tile:hover .mc-tile__more {
    transform: translateY(-2px);
    background: linear-gradient(135deg, var(--ss-primary-hover) 0%, var(--ss-primary-dark) 100%);
    box-shadow: 0 4px 12px rgba(var(--ss-primary-rgb), .4);
}
.mc-tile__more-count {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 3px;
}
.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) */
/* 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 (≤767px) */
@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;
    }
}

/* ============================================
   9. CATEGORY PAGE
   ============================================ */

/* ── Category Layout Wrapper ── */
.ss-category-layout {
    background: #f8fafc;
    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: 10px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    margin-bottom: 10px;
}
.ss-filter-panel-title {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    padding: 10px 14px;
    margin: 0;
    font-weight: 600;
    font-size: 13px;
    color: #374151;
    border-bottom: 1px solid #e2e8f0;
    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: 6px;
    border: none;
    background: transparent;
    transition: all 0.3s ease;
    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: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 16px 16px 0 0;
}
.ss-active-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    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: 8px;
    margin: 6px;
}
.ss-price-values {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    padding: 0 2px;
}

/* ── Color Filter Swatches (SimpleShop colorzFilter design) ── */
.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: 50%;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
    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 #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    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: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #ccc;
    cursor: pointer;
    transition: all 0.2s ease;
    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 #e2e8f0;
    border-radius: 6px;
    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: #9ca3af;
    background: #f8fafc;
}
.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, e.g. brands) ── */
.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 #e2e8f0;
    background: #f8fafc;
    border-radius: 0 0 10px 10px;
}
.ss-clear-filters a {
    color: #6b7280;
    font-size: 12px;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
}
.ss-clear-filters a:hover {
    background: #e2e8f0;
    color: #374151;
    text-decoration: none;
}

/* ── Main Product Panel ── */
.ss-main-panel {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    margin-bottom: 10px;
}
.ss-category-header {
    background: linear-gradient(135deg, #fff, #f8fafc);
    padding: 30px;
    border-bottom: 2px solid #e2e8f0;
}
.ss-category-title {
    font-size: 32px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 5px 0;
    line-height: 1.2;
}
.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 #e2e8f0;
    border-radius: 12px;
    padding: 8px 16px;
    font-size: 14px;
    transition: all 0.3s ease;
    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: 40px 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: 8px;
}
@media (max-width: 768px) {
    .ss-products-grid { padding: 15px 8px; }
}

/* ── No Results ── */
.ss-no-results {
    text-align: center;
    padding: 60px 30px;
    border-radius: 16px;
    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: 12px;
    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: 8px;
    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: 10px;
    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: 6px;
    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: 18px;
    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;
}
.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;
    /* the button on the price line, also under an old price; center where last baseline is unknown */
    align-items: center;
    align-items: last baseline;
    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: 18px;
    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;
}
.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: 50px;
    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: all 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);
}
.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: 10px; }
    .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: linear-gradient(135deg, #fff, #f8fafc);
    border-radius: 20px;
    padding: 40px;
    margin: 15px 0;
    border: 1px solid #e2e8f0;
}
.ss-category-info h2 {
    color: #1f2937;
    font-weight: 700;
    margin-bottom: 20px;
}

/* ── Mobile Filter Button ── */
.ss-filter-toggle-btn {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    transition: all 0.3s ease;
    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;
}

/* ============================================
   10. PRODUCT DETAIL
   ============================================ */

/* ── Raised Panel (shared by buy panel, tabs, etc.) ── */
.ss-panel-raised {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}

/* ── Product Card Wrapper ── */
.ss-product-card-wrapper {
    border-radius: 10px 10px 0 0;
    background: #fff;
    padding: 10px 10px 20px;
    margin: 20px 0 0 0;
    border-bottom: 3px solid #f3f3f3;
    box-shadow: 0 0 12px rgba(0,0,0,.07);
}
/* ── Product Question Section (standalone below card) ── */
.ss-product-question-section {
    margin-top: 0;
    margin-bottom: 30px;
}
.ss-product-question-section .card {
    border: none;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    background: #fff;
}
.ss-product-question-section .card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    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: 50%;
    background: var(--ss-primary);
    color: #fff;
    font-size: 13px;
}

/* ── Product Title (main h1) ── */
.ss-product-title-main {
    font-size: 24px;
    font-weight: 700;
    color: #141414;
    margin: 0 0 8px;
    line-height: 1.3;
}

/* ── Wishlist Heart Circle ── */
.ss-wishlist-circle {
    position: relative;
    z-index: 16;
    background: none;
    border: 2px dashed #e74c3c;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0;
    outline: none;
}
.ss-wishlist-circle:hover {
    background: #fff;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.ss-wishlist-circle i {
    font-size: 21px;
    color: #e74c3c;
}
.ss-wishlist-circle.active {
    background: #fee2e2;
    border-style: solid;
}

/* ── Gallery ── */
.ss-gallery-main {
    border-radius: 4px;
    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; }
}
.ss-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.ss-gallery-thumb {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}
.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 (default style) ── */
.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 (inside .ss-badges flex container on gallery) ── */
.ss-gallery-wrapper {
    position: relative;
}
.ss-phone-badge {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 20px;
    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: all 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: 16px;
    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: all 0.2s;
}
.ss-subscribe-close:hover {
    background: #f1f5f9;
    color: #334155;
}
.ss-subscribe-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: 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;
}
.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: 10px;
    border: 1.5px solid #e2e8f0;
    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: 10px;
    background: linear-gradient(135deg, var(--ss-primary), var(--ss-primary-dark));
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 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);
}
.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 (no own card - lives inside ss-product-card-wrapper) ── */
.ss-buy-panel {
    background: transparent;
    padding: 0;
    line-height: 1.3;
}

/* ── Short Description (rich text from TinyMCE) ── */
.ss-short-description {
    font-size: 14px !important;
    color: #141414;
    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;
}
.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 - one line */
.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 (gradient CTA) ── */
.ss-buy-btn {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 340px;
    padding: 18px 25px;
    font-weight: 700;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, var(--ss-accent-start) 0%, var(--ss-accent-mid) 60%, var(--ss-accent-end) 100%);
    background-color: var(--ss-primary);
    cursor: pointer;
}
.ss-buy-btn:hover {
    background: linear-gradient(135deg, var(--ss-primary-dark) 0%, var(--ss-accent-mid) 60%, var(--ss-accent-end) 100%);
    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 - always green regardless of palette */
.ss-buy-btn.ss-buy-btn-green {
    background: linear-gradient(135deg, #059669 0%, #10b981 60%, #34d399 100%);
    max-width: 100%;
    border-radius: 12px;
}
.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 switches to a green
   gradient (#059669 family, matches .ss-fast-order-btn) to avoid red-on-CTA.
   The out-of-stock call button (.ss-buy-btn--call) keeps its red urgency
   styling (excluded via :not()). The default theme's .ss-delivery-timer-box
   uses a fixed yellow/amber style and is not palette-aware, so it needs
   no override here. */
.palette-red .ss-buy-btn:not(.ss-buy-btn--call) {
    background: linear-gradient(135deg, #047857 0%, #059669 60%, #10b981 100%);
    background-color: #059669;
}
.palette-red .ss-buy-btn:not(.ss-buy-btn--call):hover {
    background: linear-gradient(135deg, #065f46 0%, #047857 60%, #059669 100%);
    box-shadow: 0 3px 8px rgba(5, 150, 105, 0.22);
}

/* ── Consent Checkboxes (palette-colored border) ── */
.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 variant) ── */
.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: all 0.3s ease;
    border-radius: 12px;
    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 #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.ss-qty-control button {
    background: #f8fafc;
    border: none;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 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 (SimpleShop yellow/gold style + pulse) ── */
.ss-delivery-timer-box {
    background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
    border: 2px dashed #ffc107;
    border-radius: 10px;
    padding: 14px 18px;
    animation: pulse-border 2s ease-in-out infinite;
}
.ss-delivery-timer-inner {
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    color: #856404;
}
.ss-delivery-timer-inner i {
    color: #e67e22;
}
.ss-delivery-countdown {
    display: block;
    font-size: 13px;
}
.ss-delivery-countdown strong {
    color: #dc3545;
    font-size: 15px;
}
@keyframes pulse-border {
    0% { border-color: #ffc107; }
    50% { border-color: #ff9800; }
    100% { border-color: #ffc107; }
}
/* Free delivery line inside delivery timer box */
.ss-delivery-timer-free {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e0c76d;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #166534;
}
.ss-delivery-timer-free i {
    color: #16a34a;
}
/* Standalone: no timer above, remove separator */
.ss-delivery-timer-free--standalone {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    font-size: 14px;
}

/* ── Buy Row Panel (Price | Button | Stock - one row,) ── */
.ss-buy-row-panel {
    padding: 30px 25px;
    margin-top: 15px;
    margin-bottom: 15px;
    border: none;
}
/* ── 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: 6px;
    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 (inline pill,) ── */
.ss-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 20px;
    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 (default style) ── */
.ss-fast-order-panel {
    background: #f9fff8;
    padding: 18px 20px;
    border-radius: 10px;
    border: 1px solid #d1fae5;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.ss-fast-order-title {
    font-weight: 700;
    font-size: 16px;
    color: #f03;
    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: 6px;
    background: #059669;
    border: none;
    color: #fff;
    transition: all 0.2s ease;
    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 #e2e8f0;
}
.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;
}
.ss-fast-order-phone-number:hover {
    color: var(--ss-primary) !important;
}
.ss-fast-order-phone-text {
    font-size: 14px;
    color: #999;
    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 (SimpleShop accordion style) ── */
.ss-product-tabs {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 20px;
}
.ss-tab-title {
    padding: 16px 24px;
    border-bottom: 2px solid var(--ss-primary);
    background: #f8fafc;
}
/* Offset for scroll-to-anchor (sticky header ~80px + breathing room) */
#video, #description, #specifications, #reviews-section {
    scroll-margin-top: 100px;
}
.ss-tab-title h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--ss-primary);
    margin: 0;
}
.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 #e2e8f0;
}

/* ── 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 #f1f5f9;
    transition: background 0.15s;
}
.ss-variant-list-item:last-child { border-bottom: none; }
.ss-variant-list-item:hover { background: #f8fafc; }
.ss-variant-list-img {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #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-old {
    text-decoration: line-through;
    color: #9ca3af;
    font-size: 12px;
    font-weight: 400;
    margin-right: 4px;
}
.ss-variant-list-price-promo {
    color: #dc2626;
    font-weight: 700;
}

.ss-variant-list-action {
    flex-shrink: 0;
}
.ss-variant-list-action {
    width: 130px;
    flex-shrink: 0;
}
.ss-variant-list-btn-add,
.ss-variant-list-btn-notify {
    border: none;
    border-radius: 6px;
    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 {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 14px;
    }
    .ss-variant-list-info { flex-basis: calc(100% - 62px); }
    .ss-variant-list-price { flex-basis: 50%; }
    .ss-variant-list-action { flex-basis: 50%; text-align: right; }
}

@media (max-width: 575.98px) {
    .ss-variant-list-item {
        display: grid;
        grid-template-columns: 50px 1fr;
        grid-template-rows: auto auto;
        gap: 6px 10px;
        padding: 14px 16px;
    }
    .ss-variant-list-item {
        grid-template-columns: 70px 1fr;
    }
    .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: 16px;
    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: 10px;
    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: 8px;
    overflow: hidden;
}
.ss-video-container lite-youtube {
    max-width: 100%;
    border-radius: 8px;
}

/* ── Recently Viewed (Swiper carousel + thumbnail boxes) ── */
.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 (More Products, Connected) ── */
.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 (default style) ── */
/* ── Reviews Container ── */
.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 (grid: rating left, bars right) ── */
.ss-reviews-summary {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    padding: 2.5rem;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    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;
    text-shadow: 0 2px 4px rgba(22, 160, 133, 0.2);
}
.ss-reviews-stars {
    font-size: 1.75rem;
    color: #fbbf24;
    margin-bottom: 0.75rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.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: 8px;
    overflow: hidden;
    position: relative;
}
.ss-reviews-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ss-primary), #1abc9c);
    border-radius: 8px;
    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;
}

/* ── Review Items (card list, ) ── */
.ss-reviews-list {
    margin-top: 1.25rem;
    background: #ffffff;
    border-radius: 12px;
    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: linear-gradient(135deg, var(--ss-primary), #1abc9c);
    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: 20px;
    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: #e2e8f0;
    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: 6px;
    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) */
.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-sm);
    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-weight: 600;
    font-size: 15px;
    color: var(--ss-text);
}
.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-sm);
    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;
}
.ss-review-status-edit:hover {
    border-color: var(--ss-text);
    background: var(--ss-text);
    color: var(--ss-card-bg);
}
.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-sm);
    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: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    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: 6px;
    transition: all 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;
}
.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: all 0.3s ease;
    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 #e2e8f0;
    border-radius: 12px;
    font-size: 15px;
    transition: all 0.3s ease;
    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(22, 160, 133, 0.1);
    transform: translateY(-1px);
}
.ss-review-textarea {
    resize: vertical;
    min-height: 120px;
}
.ss-review-submit-btn {
    background: linear-gradient(135deg, var(--ss-primary), #1abc9c);
    color: white;
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    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: linear-gradient(135deg, #138a73, #17a589);
    box-shadow: 0 4px 12px rgba(22, 160, 133, 0.3);
}
.ss-review-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

/* ── Review Login Notice ── */
.ss-review-login {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-card-radius-sm);
}
.ss-review-login-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--ss-primary-rgb), 0.12);
    color: var(--ss-primary);
    font-size: 19px;
}
.ss-review-login-icon svg { width: 22px; height: 22px; }
.ss-review-login-text { flex: 1; min-width: 0; }
.ss-review-login-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ss-text);
}
.ss-review-login-desc {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ss-text-muted);
}
.ss-review-login-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.ss-review-login-btn {
    display: inline-block;
    padding: 10px 22px;
    background: var(--ss-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--ss-card-radius-sm);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}
.ss-review-login-btn:hover,
.ss-review-login-btn:focus-visible { background: var(--ss-primary-hover); color: #fff; }
.ss-review-login-register { font-size: 13px; color: var(--ss-text-muted); white-space: nowrap; }
.ss-review-login-link { color: var(--ss-primary); font-weight: 600; text-decoration: none; }
.ss-review-login-link:hover { color: var(--ss-primary-dark); text-decoration: none; }
@media (max-width: 575.98px) {
    .ss-review-login { flex-wrap: wrap; gap: 12px; padding: 20px; }
    .ss-review-login-icon { width: 40px; height: 40px; }
    .ss-review-login-icon svg { width: 20px; height: 20px; }
    .ss-review-login-text { flex: 1 1 0; }
    .ss-review-login-actions { flex: 1 1 100%; align-items: stretch; gap: 10px; margin-top: 4px; text-align: center; }
    .ss-review-login-btn { display: block; }
    .ss-review-login-register { white-space: normal; }
}

/* ════════════════════════════════════════════════════════════
   Reviews: toolbar (sort), load-more, list states (ss_default)
   ──────────────────────────────────────────────────────────── */

[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-sm);
}
.ss-reviews-toolbar-label {
    font-size: 11px; font-weight: 600; color: var(--ss-text-muted);
    text-transform: uppercase; letter-spacing: 0.08em;
    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-sm);
    min-height: 40px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 10px;
    transition: border-color 150ms ease, background 150ms ease;
}
.ss-reviews-sort-btn:hover { border-color: var(--ss-text); }
.ss-reviews-sort-btn:focus-visible {
    outline: 2px solid var(--ss-primary);
    outline-offset: 2px;
    border-color: var(--ss-text);
}
.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); }

.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-sm);
    box-shadow: 0 12px 32px -10px rgba(0,0,0,0.14), 0 4px 10px -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: 6px;
    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-border-light);
    outline: none;
}
.ss-reviews-sort-option.is-active {
    background: rgba(var(--ss-primary-rgb), 0.10);
    color: var(--ss-primary-dark);
    font-weight: 600;
}

/* List loading state (during sort change) */
.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; }

/* Newly-appended review entrance (staggered fade-up) */
.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); }
}

/* Load More */
.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-text);
    color: var(--ss-text);
    font: inherit; font-size: 14px; font-weight: 500;
    padding: 12px 28px;
    border-radius: var(--ss-card-radius-sm);
    min-height: 44px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 10px;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.ss-reviews-load-more:hover:not(:disabled) {
    background: var(--ss-text);
    color: var(--ss-card-bg);
    transform: translateY(-1px);
}
.ss-reviews-load-more:hover:not(:disabled) .ss-reviews-load-more-count { color: rgba(255,255,255,0.65); }
.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-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* Inline error */
.ss-reviews-error {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: var(--ss-card-radius-sm);
    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: #f8fafc;
}
.ss-specs-table td {
    padding: 12px 16px;
    font-size: 14px;
    border-bottom: 1px solid #e2e8f0;
}
/* Последният ред няма нужда от черта - картата си има рамка. */
.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 (random tip) ── */
.ss-info-banner {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 16px 20px;
    font-size: 14px;
    color: #1e40af;
}

/* ── Connected Products (variant cards) ── */
.ss-connected-products {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    padding: 20px;
}

/* ============================================
   11. CART & CHECKOUT
   ============================================ */

/* ── Cart/Checkout Layout ── */
.ss-order-layout {
    background: #f8fafc;
    min-height: 60vh;
    padding: 30px 0 55px;
}

/* ── Order Panel (shared by cart/checkout sections) ── */
.ss-order-panel {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
/* 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: linear-gradient(135deg, #f8fafc, #e2e8f0);
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 20px 20px 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: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #6b7280;
    text-decoration: none;
    transition: all 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: 12px;
    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: 10px;
    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: 10px;
    font-size: 0.85rem;
}

/* ── Delivery Method Cards ── */
.ss-delivery-card {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
}
.ss-delivery-card:hover {
    border-color: var(--ss-primary);
    background: #f8fafc;
}
.ss-delivery-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-delivery-card i {
    color: var(--ss-primary);
}

/* ── City Autocomplete ── */
.ss-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
    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 var(--bs-border-color-translucent);
    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;
}

/* ── Combobox Dropdown ── */
.ss-combobox-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}
.ss-combobox-search {
    position: relative;
    padding: 8px 10px;
    border-bottom: 1px solid var(--bs-border-color);
    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: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    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: 10px;
    border: 1px solid #e2e8f0;
    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;
}
.ss-cart-item-remove {
    flex-shrink: 0;
    color: #9ca3af;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    border-radius: 50%;
    transition: all 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: 50%;
    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: 20px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    position: sticky;
    top: 120px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.ss-order-summary .card-header {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
}
.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 (white card style) ── */
.ss-info-box {
    background: #ffffff;
    border: 1px solid var(--ss-border-light);
    border-radius: 10px;
    padding: 16px 20px;
    font-size: 14px;
    color: #374151;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.ss-info-box i {
    color: var(--ss-primary);
}

/* ── Empty Cart ── */
.ss-empty-state {
    text-align: center;
    padding: 80px 20px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.ss-empty-state-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ss-primary-light), #ecfdf5);
    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;
}
/* A cancelled order or a failed payment: the same circle in red, its ring too */
.ss-success-icon-lg.is-failed { background: #fef2f2; border-color: #dc2626; color: #dc2626; }
.ss-order-badge {
    display: inline-block;
    background: var(--ss-primary-light, #e9f3fb);
    color: var(--ss-primary-dark, #1a4a6e);
    padding: 6px 18px;
    border-radius: 20px;
    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: calc(var(--ss-card-radius, 20px) / 2);
    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: hide until JS finishes priority+ calculation.
   Without this, all items briefly render at full width before JS collapses overflow into
   "Още", causing visible reflow that pushes pinned items (Нови/Промо) outside the layout. */
.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, 12px);
    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. AUTH & USER PAGES
   ============================================ */

/* ── Auth Layout ── */
.ss-auth-layout {
    background: #f8fafc;
    min-height: 60vh;
    padding: 40px 0;
}
.ss-auth-card {
    max-width: 440px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}
.ss-auth-card h2 {
    font-weight: 700;
    margin-bottom: 24px;
    text-align: center;
}
.ss-auth-card .btn-primary {
    border-radius: 12px;
}

/* ── User Sidebar ── */
.ss-user-sidebar {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    position: sticky;
    top: 120px;
}
.ss-user-sidebar .ss-sidebar-header {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    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: all 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: all 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: #f8fafc;
    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: linear-gradient(135deg, #fff, #f8fafc);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 24px;
    box-shadow: 0 1px 3px rgba(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(37, 99, 235, .08);
    border-radius: 10px;
    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. BLOG
   ============================================ */

.ss-blog-layout {
    background: #f8fafc;
    min-height: 60vh;
    padding: 0 0 40px;
}
.ss-blog-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    transition: all 0.3s;
}
.ss-blog-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.ss-blog-card .ss-blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 140px;
    border-radius: 12px 0 0 12px;
}
.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: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}
.ss-blog-sidebar-header {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    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 #f1f5f9;
    transition: all 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: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    padding: 40px;
}
.ss-blog-article h1 {
    font-weight: 700;
    font-size: 28px;
    color: #1f2937;
}
.ss-blog-article .blog-content {
    font-size: 15px;
    line-height: 1.8;
}
.ss-blog-article .blog-content img {
    border-radius: 12px;
    margin: 1em 0;
}

/* ============================================
   14. REVIEWS
   ============================================ */

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

/* ============================================
   15. MISC UTILITIES
   ============================================ */

/* ── 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: 4px;
    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-sm);
    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: 8px;
    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: #f8f9fa;
    font-style: italic;
    border-radius: 0 8px 8px 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: #f8f9fa;
    font-weight: 600;
}
.blog-content a {
    color: var(--ss-primary);
}
.blog-content hr {
    margin: 2rem 0;
    border-color: #e9ecef;
}

/* ── Blog Featured Card (homepage) ── */
.ss-blog-card-featured {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    transition: all 0.3s;
}
.ss-blog-card-featured:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

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

/* ── Order Item (user orders list) ── */
.ss-order-item {
    transition: all 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 ── */
/* ── Compare: Card Layout ── */
.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-sm);
    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);
}
.ss-compare-price-promo {
    font-weight: 700;
    font-size: 16px;
    color: var(--ss-price-promo);
}
.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-sm);
    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-sm);
    border: 1px solid var(--ss-border-light);
    transition: all 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 (Homepage) ── */
.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-sm);
    border: 1px solid var(--ss-border-light);
    transition: border-color var(--ss-transition);
    text-decoration: none;
    height: 100px;
    min-height: 80px;
}
/* On hover only the border changes colour: no lift, no shadow, the logo in its own colours */
.ss-brand-slide:hover { border-color: var(--ss-primary); }
.ss-brand-slide img {
    max-height: 60px;
    max-width: 100%;
    object-fit: contain;
}
@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: #f8fafc;
    min-height: 60vh;
}
.ss-error-page .ss-error-inner {
    max-width: 500px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    padding: 60px 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}
.ss-error-code {
    font-size: 120px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--ss-primary), var(--ss-primary-hover));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 10px;
    opacity: 0.3;
}

/* ── Static Page Panel ── */
.ss-page-panel {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    padding: 40px;
}

/* ── FAQ Panel ── */
.ss-faq-panel {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    margin-bottom: 20px;
}
.ss-faq-panel-header {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
}
.ss-faq-panel-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
}
.ss-faq-panel-header i {
    color: var(--ss-primary);
}

/* ============================================
   16. RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 991.98px) {
    .ss-header {
        padding: 10px 0;
    }
    .ss-cart-btn {
        padding: 10px 16px;
        border-radius: 12px 3px 12px 3px;
        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: 10px;
    }
    .ss-breadcrumb-row {
        left: 0;
        width: 100%;
        margin-top: 0;
        border-radius: 10px;
        padding: 0 12px;
    }
    .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: 14px;
    }
    .ss-category-info {
        padding: 20px;
        border-radius: 14px;
    }
    /* Blog article */
    .ss-blog-article {
        padding: 24px;
        border-radius: 14px;
    }
    .ss-blog-article h1 {
        font-size: 22px;
    }
    /* Blog featured card - stack vertically on tablet */
    .ss-blog-card-featured img {
        border-radius: 12px 12px 0 0 !important;
        min-height: 220px !important;
    }
    /* Page panel */
    .ss-page-panel {
        padding: 24px;
        border-radius: 14px;
    }
}

@media (max-width: 575.98px) {
    .ss-product-card {
        min-height: 300px;
        border-radius: 14px;
    }
    .ss-product-card-sm {
        min-height: 280px;
        border-radius: 14px;
    }
    .ss-badges {
        top: 8px;
        left: 8px;
        gap: 4px;
    }
    .ss-badge {
        padding: 4px 8px;
        font-size: 9px;
    }
    .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;
        border-radius: 14px;
    }
    .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;
        border-radius: 14px;
    }
    .ss-error-code {
        font-size: 80px;
    }
    .ss-section-heading {
        font-size: 0.95rem;
        gap: 10px;
    }
    .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;
    }
}

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

/* ── SweetAlert2 palette-themed ── */
.swal2-popup {
    border: 3px solid var(--ss-primary) !important;
    border-radius: 18px !important;
}
.swal2-confirm.swal2-styled {
    background-color: var(--ss-primary) !important;
    border-radius: 10px !important;
}
.swal2-confirm.swal2-styled:hover {
    background-color: var(--ss-primary-hover) !important;
}
.swal2-cancel.swal2-styled {
    border-radius: 10px !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;
}

/* ── Subscribe modal smooth animation (CSS keyframes for x-if) ── */
@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;
}

/* ── 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;
    }
}

/* ============================================
   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;
}
@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)
   Overrides base .ss-sidenav dimensions, adds interior structure.
   Classes use .ss-drawer-* prefix to avoid collision with legacy
   .ss-sidenav-* rules (which stay untouched but unused).
   ============================================ */

/* Override base shell: wider, flex column, clip panes */
.ss-drawer {
    width: min(340px, 88vw);
    left: calc(-1 * min(340px, 88vw));
    /* Use dynamic viewport so the drawer fits the visible area on
       mobile Chrome/Android (where 100vh includes the URL bar area
       and would clip the last rows). 100vh stays as fallback. */
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    /* Respect iOS safe area on notched devices */
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.ss-drawer.open {
    left: 0;
}

/* Hide Alpine-cloaked elements until hydrated (prevents FOUC) */
.ss-drawer [x-cloak] {
    display: none !important;
}

/* ── Top bar: logo + close ── */
.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: 10px;
    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: 14px;
    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: 10px;
    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, stay on one line with 2 items; wrap only as fallback) ── */
.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: 18px;
    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;
    /* Comfort buffer at bottom so the last category row is never
       right up against the drawer edge / system nav overlap */
    padding-bottom: 20px;
}
/* Inactive pane uses [inert] attribute (set by Alpine) - browser handles
   focus blocking, AT hiding, and pointer-events. We add visibility:hidden
   as a progressive-enhancement polish to hide offscreen content entirely. */
.ss-drawer-pane[inert] {
    visibility: hidden;
}

/* ── Child pane header (back + title, sticky) ── */
.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: 10px;
    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;
}

/* ── Category / account rows (50px tap targets - still WCAG comfortable) ── */
.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: 10px;
    background: var(--ss-primary, #3b82f6);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    /* Negative margin counters the flex gap (12px) to sit close to the label text */
    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;
}

/* Logout form: strip default form styling so button row looks identical to link rows */
.ss-drawer-logout-form {
    margin: 0;
    padding: 0;
}
.ss-drawer-logout-form button {
    width: 100%;
}

/* ── Footer (phone left + language right, compact desktop-style) ── */
.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: 8px;
    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: shrink paddings, widen drawer, stack pills full-width ── */
@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;
    }
    /* If pills wrap on very narrow screens, make each full-width so the
       two stacked pills have identical dimensions (no ragged edge). */
    .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: 12px;
    --ss-payment-border: 2px;
}

/* К1 (3.1.5b4): the cart on a phone in order: the picture left; the name, the code and the unit price beside it; the
   quantity and the sum on one line below them; the bin top right, clear of the name */
@media (max-width: 575.98px) {
    .ss-cart-item {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr) auto;
        grid-template-areas:
            "image info info"
            "image qty price";
        align-items: start;
        gap: 12px 14px;
        padding: 16px 14px;
        position: relative;
    }
    .ss-cart-item-image-wrap { grid-area: image; }
    .ss-cart-item-image { width: 72px; height: 72px; }
    .ss-cart-item-info { grid-area: info; padding-right: 34px; }
    .ss-cart-item-title { line-height: 1.35; }
    .ss-cart-item-qty { grid-area: qty; width: auto; justify-content: flex-start; flex-wrap: wrap; align-self: center; }
    .ss-cart-item-qty .ss-qty-control button { width: 40px; height: 40px; padding: 0; font-size: 16px; }
    .ss-cart-item-qty .ss-qty-control input { width: 44px; height: 40px; padding: 0; font-size: 15px; }
    .ss-cart-item-price { grid-area: price; width: auto; min-width: 0; text-align: right; align-self: center; font-size: 16px; }
    .ss-cart-item-remove { position: absolute; top: 10px; right: 8px; }
}