/*
|--------------------------------------------------------------------------
| SimpleShop - Frontend Styles
|--------------------------------------------------------------------------
| CSS Custom Properties + Color Palette System
| Bootstrap 5 overrides + Component foundation
|--------------------------------------------------------------------------
*/
/* ============================================
0. SELF-HOSTED FONTS (Golos Text, OFL; latin and cyrillic)
============================================ */
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/golos-text/golos-text-cyrillic-400-normal.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/golos-text/golos-text-latin-400-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/golos-text/golos-text-cyrillic-500-normal.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/golos-text/golos-text-latin-500-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/golos-text/golos-text-cyrillic-600-normal.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/golos-text/golos-text-latin-600-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/golos-text/golos-text-cyrillic-700-normal.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/golos-text/golos-text-latin-700-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Font Awesome 6 Brands';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../../../../assets/vendor/fontawesome/webfonts/fa-brands-400-subset.woff2') format('woff2'),
url('../../../../assets/vendor/fontawesome/webfonts/fa-brands-400-subset.ttf') format('truetype');
}
@font-face {
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../../../../assets/vendor/fontawesome/webfonts/fa-regular-400.woff2') format('woff2'),
url('../../../../assets/vendor/fontawesome/webfonts/fa-regular-400.ttf') format('truetype');
}
@font-face {
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url('../../../../assets/vendor/fontawesome/webfonts/fa-solid-900-subset.woff2') format('woff2'),
url('../../../../assets/vendor/fontawesome/webfonts/fa-solid-900-subset.ttf') format('truetype');
}
/* ============================================
1. CSS CUSTOM PROPERTIES (Default: Blue)
============================================ */
:root {
/* ── ss_tech tokens (the guide, part 2): the palette overrides --ss-primary through body.palette-* ── */
--ss-primary: #5980a6;
--ss-primary-hover: color-mix(in srgb, var(--ss-primary) 88%, #000);
--ss-primary-dark: color-mix(in oklab, var(--ss-primary) 62%, #000);
--ss-primary-light: color-mix(in srgb, var(--ss-primary) 8%, #fff);
--ss-primary-rgb: 89, 128, 166;
--ss-primary-ink: color-mix(in oklab, var(--ss-primary) 62%, #000);
--ss-primary-tint: color-mix(in srgb, var(--ss-primary) 8%, #fff);
--ss-primary-ring: color-mix(in srgb, var(--ss-primary) 18%, transparent);
--ss-accent-start: var(--ss-primary);
--ss-accent-mid: var(--ss-primary);
--ss-accent-end: var(--ss-primary);
--ss-bg: #f2f2f3;
--ss-surface: #ffffff;
--ss-surface-2: #f5f5f8;
--ss-chip: #f2f2f3;
--ss-ink: #1d1f20;
--ss-ink-2: #424244;
--ss-muted: #5d5d60;
--ss-faint: #7a7a7d;
--ss-dark: #2b2b2d;
--ss-dark-nav: #38383b;
--ss-line: #ececee;
--ss-border: #d4d4d7;
--ss-border-strong: #98989b;
--ss-ok: #22603c;
--ss-ok-dot: #2f7d4f;
--ss-ok-bg: color-mix(in srgb, #2f7d4f 10%, #fff);
--ss-bad: #b23a3a;
--ss-bad-ink: #8f2424;
--ss-bad-bg: #fbeaea;
--ss-fav-badge-bg: #f7cfcf;
--ss-fav-badge-ink: #8f2424;
--ss-promo: #d9480f;
--ss-r-sm: 2px;
--ss-r-md: 4px;
--ss-r-lg: 7px;
--ss-shadow-hover: 0 22px 44px -24px rgba(29, 31, 32, .4), 0 0 0 1px rgba(29, 31, 32, .08);
--ss-shadow-pop: 0 24px 48px -20px rgba(29, 31, 32, .35);
--ss-glass: rgba(255, 255, 255, .78);
--ss-font: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--ss-container: 1440px;
/* ── The names of ss_default, pointed at the tokens above (the inherited sheet reads these) ── */
--ss-body-bg: var(--ss-bg);
--ss-card-bg: var(--ss-surface);
--ss-card-shadow: none;
--ss-card-shadow-hover: var(--ss-shadow-hover);
--ss-card-radius: var(--ss-r-md);
--ss-card-radius-sm: var(--ss-r-sm);
--ss-header-bg: var(--ss-glass);
--ss-topbar-bg: transparent;
--ss-topbar-text: var(--ss-muted);
--ss-footer-bg: var(--ss-dark);
--ss-footer-text: #c4c4c8;
--ss-footer-heading: #ffffff;
--ss-text: var(--ss-ink);
--ss-text-muted: var(--ss-muted);
--ss-text-light: var(--ss-faint);
--ss-border-light: var(--ss-line);
--ss-divider: var(--ss-line);
--ss-success: var(--ss-ok);
--ss-success-light: var(--ss-ok-bg);
--ss-danger: var(--ss-bad);
--ss-danger-light: var(--ss-bad-bg);
--ss-warning: #a15c07;
--ss-warning-light: #fdf3e2;
--ss-info: var(--ss-ink-2);
--ss-info-light: var(--ss-surface-2);
--ss-price-normal: var(--ss-ink);
--ss-price-promo: var(--ss-promo);
--ss-price-old: var(--ss-faint);
--ss-price-eur: var(--ss-ink);
--ss-badge-new: #ffffff;
--ss-badge-featured: var(--ss-primary);
--ss-badge-promo: var(--ss-dark);
--ss-transition: .2s ease;
--ss-transition-fast: .15s ease;
--ss-transition-smooth: .3s cubic-bezier(.4, 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: var(--ss-on-primary);
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: var(--ss-on-primary);
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: 4px !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: var(--ss-on-primary);
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: 4px !important;
}
.ss-page-arrow:hover {
background: var(--ss-primary) !important;
border-color: var(--ss-primary) !important;
color: var(--ss-on-primary) !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, #f5f5f8, #ececee);
border-radius: 4px;
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: #5d5d60;
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: 4px;
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: 4px;
background: linear-gradient(234deg, #f5f5f8, #ececee);
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: var(--ss-on-primary);
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: #f5f5f8;
}
.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: 4px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #fff;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
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: var(--ss-bad);
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: var(--ss-bad-ink);
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: 4px;
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 (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 #ececee;
}
.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: #5d5d60;
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: var(--ss-primary-ink);
}
/* ── 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: #f2f2f3;
border: 1px solid #ececee;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 8px;
font-weight: 600;
color: #5d5d60;
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: var(--ss-primary-ink);
}
.ss-product-card:hover .ss-price-eur.promo {
color: var(--ss-bad-ink);
}
.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: #f5f5f8;
border: 1px solid #ececee;
border-radius: 4px;
padding: 6px 10px;
font-size: 9px;
font-weight: 600;
color: #5d5d60;
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: 4px;
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, var(--ss-bad), var(--ss-bad));
border: none;
border-radius: 4px;
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, var(--ss-bad-ink), var(--ss-bad));
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, #f5f5f8 0%, #f2f2f3 100%);
border-bottom: 1px solid #d4d4d7;
padding: 6px 0;
font-size: 13px;
}
.ss-topbar a {
color: #5d5d60;
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 5px;
}
.ss-topbar a:hover {
color: #424244;
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: var(--ss-on-primary) !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 #f2f2f3;
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: var(--ss-on-primary);
}
.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: 4px;
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 4px 20px 4px;
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: 4px;
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: #f5f5f8;
color: var(--ss-primary);
border-radius: 4px;
}
/* Active: pill bg + green text + bold */
.ss-navigation .nav-list > li.active > a {
background: #f5f5f8;
color: var(--ss-primary);
border-radius: 4px;
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: #f5f5f8;
color: var(--ss-primary);
padding-left: 25px;
}
.ss-navigation .dropdown-menu .dropdown-item.active {
background: #f5f5f8;
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: var(--ss-bad);
font-weight: 600;
}
.ss-navigation .nav-list > li.nav-auto-promo > a:hover,
.ss-navigation .nav-list > li.nav-auto-promo.active > a {
background: var(--ss-bad-bg);
color: var(--ss-bad-ink);
}
/* Auto-menu: Нови */
.ss-navigation .nav-list > li.nav-auto-new > a {
color: var(--ss-ok);
font-weight: 600;
}
.ss-navigation .nav-list > li.nav-auto-new > a:hover,
.ss-navigation .nav-list > li.nav-auto-new.active > a {
background: var(--ss-ok-bg);
color: var(--ss-ok);
}
/* ── 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: 4px;
color: var(--ss-on-primary);
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: #f5f5f8;
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: #98989b;
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: #98989b;
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: #98989b;
}
.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: 4px;
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: var(--ss-on-primary);
}
.ss-footer-contact {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
padding: 8px;
background: rgba(255,255,255,0.05);
border-radius: 4px;
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: var(--ss-on-primary);
font-size: 14px;
flex-shrink: 0;
}
.ss-footer-contact-text {
font-size: 13px;
color: #98989b;
}
.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: #98989b;
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: #98989b;
}
/* ── 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: #f5f5f8;
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 #ececee;
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: var(--ss-on-primary);
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: var(--ss-bad);
border-color: #fecaca;
}
.ss-section-link--danger:hover {
color: #fff;
background: var(--ss-bad);
border-color: var(--ss-bad);
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: 4px;
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: 4px;
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 #ececee;
border-radius: 4px;
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: #1d1f20;
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: #98989b;
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: 4px;
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: #f5f5f8;
color: #d4d4d7;
font-size: 3rem;
}
.mc-tile__placeholder-count {
font-size: 13px;
color: #98989b;
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 #f2f2f3;
border-radius: 4px;
overflow: hidden;
background: #fefefe;
display: flex;
align-items: center;
justify-content: center;
}
.mc-tile__item--blank {
border: 2px dashed #ececee;
background: #f5f5f8;
opacity: .5;
}
.mc-tile__item-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
.mc-tile__item-empty {
color: #d4d4d7;
font-size: 1.2rem;
}
.mc-tile__more {
flex: 1;
aspect-ratio: 1;
border-radius: 4px;
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: #f5f5f8;
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: #d4d4d7 transparent;
}
.ss-filter-sidebar-inner::-webkit-scrollbar { width: 4px; }
.ss-filter-sidebar-inner::-webkit-scrollbar-thumb { background: #d4d4d7; 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: 4px;
border: 1px solid #ececee;
overflow: hidden;
margin-bottom: 10px;
}
.ss-filter-panel-title {
background: linear-gradient(135deg, #f5f5f8, #ececee);
padding: 10px 14px;
margin: 0;
font-weight: 600;
font-size: 13px;
color: #424244;
border-bottom: 1px solid #ececee;
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: #98989b;
font-size: 11px;
text-decoration: none;
padding: 0;
width: 24px;
height: 24px;
border-radius: 4px;
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: var(--ss-bad);
}
.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: #f5f5f8;
border-bottom: 1px solid #ececee;
border-radius: 4px 4px 0 0;
}
.ss-active-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 20px;
background: var(--ss-primary);
color: var(--ss-on-primary);
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: 4px;
margin: 6px;
}
.ss-price-values {
display: flex;
justify-content: space-between;
font-size: 12px;
font-weight: 600;
color: #424244;
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 #ececee;
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: #98989b;
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 #ececee;
border-radius: 4px;
background: #f5f5f8;
color: #424244;
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: #424244;
background: #f2f2f3;
color: #1d1f20;
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: var(--ss-on-primary);
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 #ececee;
border-radius: 4px;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
cursor: pointer;
transition: all 0.2s;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ss-filter-check:hover {
border-color: #98989b;
background: #f5f5f8;
}
.ss-filter-check:has(input:checked) {
border-color: var(--ss-primary);
background: var(--ss-primary);
color: var(--ss-on-primary);
}
.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: 4px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
font-size: 13px;
color: #424244;
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 #ececee;
background: #f5f5f8;
border-radius: 0 0 4px 4px;
}
.ss-clear-filters a {
color: #5d5d60;
font-size: 12px;
text-decoration: none;
padding: 8px 16px;
border-radius: 4px;
transition: all 0.3s ease;
}
.ss-clear-filters a:hover {
background: #ececee;
color: #424244;
text-decoration: none;
}
/* ── Main Product Panel ── */
.ss-main-panel {
background: #fff;
border-radius: 20px;
border: 1px solid #ececee;
overflow: hidden;
margin-bottom: 10px;
}
.ss-category-header {
background: linear-gradient(135deg, #fff, #f5f5f8);
padding: 30px;
border-bottom: 2px solid #ececee;
}
.ss-category-title {
font-size: 32px;
font-weight: 700;
color: #1d1f20;
margin: 0 0 5px 0;
line-height: 1.2;
}
.ss-category-count {
font-size: 14px;
font-weight: 400;
color: #98989b;
vertical-align: middle;
margin-left: 6px;
}
.ss-category-desc {
margin-top: 10px;
color: #5d5d60;
line-height: 1.6;
font-size: 14px;
}
.ss-category-desc p { margin-bottom: 0.5em; }
.ss-category-desc strong, .ss-category-desc b { color: #424244; }
.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 #ececee;
border-radius: 4px;
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: 4px;
}
@media (max-width: 768px) {
.ss-products-grid { padding: 15px 8px; }
}
/* ── No Results ── */
.ss-no-results {
text-align: center;
padding: 60px 30px;
border-radius: 4px;
margin: 20px 0;
}
.ss-no-results h3 {
color: #424244;
font-weight: 600;
margin-bottom: 15px;
}
.ss-no-results p {
color: #5d5d60;
margin-bottom: 30px;
}
/* ── Category Banner ── */
.ss-category-banner {
border-radius: 4px;
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: 4px;
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: 4px;
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: 4px;
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: var(--ss-bad);
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: 4px; }
.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, #f5f5f8);
border-radius: 20px;
padding: 40px;
margin: 15px 0;
border: 1px solid #ececee;
}
.ss-category-info h2 {
color: #1d1f20;
font-weight: 700;
margin-bottom: 20px;
}
/* ── Mobile Filter Button ── */
.ss-filter-toggle-btn {
background: #fff;
border: 1px solid #ececee;
border-radius: 4px;
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
color: #424244;
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: 4px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
border: 1px solid #ececee;
}
/* ── Product Card Wrapper ── */
.ss-product-card-wrapper {
border-radius: 4px 4px 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 4px 4px;
box-shadow: 0 2px 8px rgba(0,0,0,.05);
background: #fff;
}
.ss-product-question-section .card-header {
background: #f5f5f8;
border-bottom: 1px solid #f2f2f3;
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: var(--ss-on-primary);
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: var(--ss-bad-bg);
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: 4px;
border: 2px solid #ececee;
overflow: hidden;
cursor: pointer;
transition: all 0.2s ease;
}
.ss-gallery-thumb:hover {
border-color: #98989b;
}
.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 #ececee;
border-radius: 20px;
padding: 6px 14px;
font-size: 13px;
font-weight: 600;
color: #424244;
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: var(--ss-on-primary);
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);
z-index: 9998;
}
.ss-subscribe-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
background: #fff;
border-radius: 4px;
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: #98989b;
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: #f2f2f3;
color: #2b2b2d;
}
.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: #1d1f20;
margin-bottom: 8px;
}
.ss-subscribe-text {
color: #5d5d60;
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: #424244;
margin-bottom: 5px;
display: block;
}
.ss-subscribe-field .form-control {
border-radius: 4px;
border: 1.5px solid #ececee;
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: 4px;
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: #98989b;
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: #424244;
}
.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: #5d5d60;
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: var(--ss-on-primary);
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: 4px;
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, var(--ss-ok) 0%, var(--ss-ok-dot) 60%, #34d399 100%);
max-width: 100%;
border-radius: 4px;
}
.ss-buy-btn.ss-buy-btn-green:hover {
background: linear-gradient(135deg, var(--ss-ok) 0%, var(--ss-ok) 60%, var(--ss-ok-dot) 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 (var(--ss-ok) 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, var(--ss-ok) 0%, var(--ss-ok) 60%, var(--ss-ok-dot) 100%);
background-color: var(--ss-ok);
}
.palette-red .ss-buy-btn:not(.ss-buy-btn--call):hover {
background: linear-gradient(135deg, #065f46 0%, var(--ss-ok) 60%, var(--ss-ok) 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: 4px;
border: none;
background: linear-gradient(135deg, var(--ss-bad), var(--ss-bad));
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 #ececee;
border-radius: 4px;
overflow: hidden;
background: #fff;
}
.ss-qty-control button {
background: #f5f5f8;
border: none;
padding: 5px 10px;
font-size: 14px;
font-weight: 600;
color: #424244;
cursor: pointer;
transition: all 0.2s;
line-height: 1;
}
.ss-qty-control button:hover {
background: var(--ss-primary);
color: var(--ss-on-primary);
}
.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: 4px;
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: var(--ss-bad);
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: var(--ss-ok);
}
/* 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: 4px;
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: var(--ss-primary-ink);
background: #fef3c7;
border: 1px solid #fde68a;
}
.ss-stock-badge.low-stock {
color: #9a3412;
background: #fff7ed;
border: 1px solid #fed7aa;
}
.ss-stock-badge.inquiry {
color: #424244;
background: #f2f2f3;
border: 1px solid #d4d4d7;
}
.ss-stock-badge i {
font-size: 12px;
}
/* ── Fast Order Panel (default style) ── */
.ss-fast-order-panel {
background: #f9fff8;
padding: 18px 20px;
border-radius: 4px;
border: 1px solid var(--ss-ok-bg);
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: 4px;
background: var(--ss-ok);
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: var(--ss-ok);
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 #ececee;
}
.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, var(--ss-bad) 0%, var(--ss-bad) 100%);
text-decoration: none !important;
flex: 1;
}
.ss-buy-btn--call:hover {
background: linear-gradient(135deg, var(--ss-bad-ink) 0%, var(--ss-bad) 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: 4px;
border: 1px solid #ececee;
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: #f5f5f8;
}
/* 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: #424244;
}
.ss-tab-body * {
font-size: inherit !important;
}
.ss-tab-body + .ss-tab-title {
border-top: 1px solid #ececee;
}
/* ── 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 #f2f2f3;
transition: background 0.15s;
}
.ss-variant-list-item:last-child { border-bottom: none; }
.ss-variant-list-item:hover { background: #f5f5f8; }
.ss-variant-list-img {
flex-shrink: 0;
width: 60px;
height: 60px;
border-radius: 4px;
overflow: hidden;
border: 1px solid #ececee;
}
.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: #424244;
}
.ss-variant-list-code {
font-size: 11px;
color: #98989b;
}
.ss-variant-list-price {
font-weight: 600;
font-size: 14px;
color: #424244;
white-space: nowrap;
text-align: right;
min-width: 80px;
}
.ss-variant-list-price-old {
text-decoration: line-through;
color: #98989b;
font-size: 12px;
font-weight: 400;
margin-right: 4px;
}
.ss-variant-list-price-promo {
color: var(--ss-bad);
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: 4px;
font-size: 12px;
font-weight: 600;
padding: 6px 0;
width: 130px;
display: inline-block;
text-align: center;
transition: all 0.2s;
color: #fff !important;
}
.ss-variant-list-btn-add {
background: var(--ss-primary);
}
.ss-variant-list-btn-add:hover,
.ss-variant-list-btn-add:focus,
.ss-variant-list-btn-add:active {
background: var(--ss-primary) !important;
filter: brightness(1.1);
color: var(--ss-on-primary) !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: #d4d4d7;
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);
z-index: 9998;
}
.ss-notify-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
background: #fff;
border-radius: 4px;
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: #98989b;
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: #f2f2f3;
color: #2b2b2d;
}
.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: #424244;
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: 4px;
padding: 12px;
font-size: 14px;
}
.ss-notify-modal .btn.ss-variant-list-btn-notify:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(var(--ss-primary-rgb), 0.4);
}
@media (max-width: 575.98px) {
.ss-notify-modal { padding: 30px 22px 24px; }
.ss-notify-icon { width: 52px; height: 52px; font-size: 22px; }
}
/* ── YouTube Video Container ── */
.ss-video-container {
max-width: 800px;
margin: 0 auto;
border-radius: 4px;
overflow: hidden;
}
.ss-video-container lite-youtube {
max-width: 100%;
border-radius: 4px;
}
/* ── 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: #424244;
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: var(--ss-on-primary);
}
.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%, #f5f5f8 100%);
padding: 2.5rem;
border-radius: 4px;
border: 1px solid #ececee;
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: #5d5d60;
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: #424244;
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: #ececee;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.ss-reviews-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--ss-primary), #1abc9c);
border-radius: 4px;
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: #424244;
}
/* ── Review Items (card list, ) ── */
.ss-reviews-list {
margin-top: 1.25rem;
background: #ffffff;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.ss-review {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid #f2f2f3;
}
.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: #1d1f20;
font-size: 14px;
}
.ss-review-date {
font-size: 12px;
color: #5d5d60;
}
.ss-review-meta-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.35rem;
}
.ss-review-verified {
background: linear-gradient(135deg, var(--ss-ok-dot), var(--ss-ok));
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: #5d5d60;
font-weight: 500;
}
.ss-review-stars {
color: #fbbf24;
font-size: 1.1rem;
}
.ss-review-title {
font-size: 1.05rem;
font-weight: 700;
color: #1d1f20;
margin-bottom: 0.5rem;
line-height: 1.4;
}
.ss-review-divider {
border: none;
height: 1px;
background: #ececee;
margin: 0.5rem 0;
}
.ss-review-content {
color: #424244;
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: 4px;
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, var(--ss-primary), var(--ss-primary));
}
.ss-review-actions .btn-edit:hover {
background: linear-gradient(135deg, var(--ss-primary), var(--ss-primary-ink));
transform: translateY(-1px);
}
.ss-review-actions .btn-delete {
background: linear-gradient(135deg, #f87171, var(--ss-bad));
}
.ss-review-actions .btn-delete:hover {
background: linear-gradient(135deg, var(--ss-bad), var(--ss-bad-ink));
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%, #f5f5f8 100%);
border: 2px solid #ececee;
border-radius: 4px;
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: #98989b;
font-size: 16px;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: all 0.2s;
}
.ss-review-form-close:hover {
color: #424244;
background: #f2f2f3;
}
.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: #1d1f20;
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: #1d1f20;
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: #d4d4d7;
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 #ececee;
border-radius: 4px;
font-size: 15px;
transition: all 0.3s ease;
font-family: inherit;
background: #ffffff;
color: #424244;
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: 4px;
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 {
padding: 1.25rem 1.75rem;
border-radius: 4px;
margin-bottom: 2.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
font-size: 15px;
color: var(--ss-primary-ink);
border: 2px solid var(--ss-primary);
}
.ss-review-login-link {
color: var(--ss-primary);
font-weight: 700;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: border-color 0.2s ease;
}
.ss-review-login-link:hover {
border-bottom-color: var(--ss-primary);
text-decoration: none;
}
/* ════════════════════════════════════════════════════════════
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: 4px;
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: #5d5d60;
}
.ss-reviews-empty-icon {
font-size: 3rem;
color: #d4d4d7;
margin-bottom: 0.75rem;
}
.ss-reviews-empty h4 {
color: #424244;
margin-bottom: 0.5rem;
font-size: 1.1rem;
font-weight: 700;
}
.ss-reviews-empty p {
font-size: 14px;
color: #5d5d60;
}
/* ── Specs Table ── */
.ss-specs-table {
width: 100%;
border-collapse: collapse;
}
.ss-specs-table tr:nth-child(even) {
background: #f5f5f8;
}
.ss-specs-table td {
padding: 12px 16px;
font-size: 14px;
border-bottom: 1px solid #ececee;
}
/* Последният ред няма нужда от черта - картата си има рамка. */
.ss-specs-table tr:last-child td {
border-bottom: none;
}
.ss-specs-table td:first-child {
font-weight: 600;
color: #424244;
width: 40%;
}
.ss-specs-table td:last-child {
color: #5d5d60;
}
/* ── Info Promo Banner (random tip) ── */
.ss-info-banner {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
border: 1px solid #bfdbfe;
border-radius: 4px;
padding: 16px 20px;
font-size: 14px;
color: #1e40af;
}
/* ── Connected Products (variant cards) ── */
.ss-connected-products {
background: #fff;
border-radius: 4px;
border: 1px solid #ececee;
padding: 20px;
}
/* ============================================
11. CART & CHECKOUT
============================================ */
/* ── Cart/Checkout Layout ── */
.ss-order-layout {
background: #f5f5f8;
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 #ececee;
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, #f5f5f8, #ececee);
padding: 20px 24px;
border-bottom: 1px solid #ececee;
border-radius: 20px 20px 0 0;
display: flex;
align-items: center;
gap: 10px;
}
.ss-order-panel-header h5 {
margin: 0;
font-weight: 700;
color: #1d1f20;
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: 4px;
background: #fff;
border: 1px solid #ececee;
color: #5d5d60;
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: var(--ss-on-primary);
}
.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 #ececee;
border-radius: 4px;
padding: 14px 16px;
cursor: pointer;
transition: all 0.2s ease;
background: #fff;
margin: 0;
}
.ss-payment-card:hover {
border-color: var(--ss-primary);
background: #f5f5f8;
}
.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: 4px;
background: #f2f2f3;
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: #1d1f20;
}
.ss-payment-desc {
font-size: 0.8rem;
color: #5d5d60;
margin-top: 2px;
}
.ss-bank-details {
padding: 24px 16px 14px;
background: #f5f5f8;
border: 1px solid #ececee;
border-radius: 4px;
font-size: 0.85rem;
}
/* ── Delivery Method Cards ── */
.ss-delivery-card {
border: 2px solid #ececee;
border-radius: 4px;
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: #f5f5f8;
}
.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 4px 4px;
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 4px 4px;
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: #98989b;
font-size: 0.75rem;
pointer-events: none;
}
.ss-combobox-list {
max-height: 280px;
overflow-y: auto;
}
/* ── Office Info Card ── */
.ss-office-info {
background: #f5f5f8;
border: 1px solid #ececee;
border-radius: 4px;
padding: 12px 14px;
}
/* ── Cart Item ── */
.ss-cart-item {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 24px;
border-bottom: 1px solid #f2f2f3;
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: 4px;
border: 1px solid #ececee;
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: #1d1f20;
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: #5d5d60;
}
.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: #1d1f20;
}
.ss-cart-item-remove {
flex-shrink: 0;
color: #98989b;
background: none;
border: none;
padding: 8px;
cursor: pointer;
border-radius: 50%;
transition: all 0.2s;
}
.ss-cart-item-remove:hover {
color: var(--ss-bad);
background: var(--ss-bad-bg);
}
/* ── 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: #98989b;
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: var(--ss-bad-bg);
}
@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 #ececee;
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, #f5f5f8, #ececee);
padding: 20px 24px;
border-bottom: 1px solid #ececee;
}
.ss-order-summary .card-header h5 {
margin: 0;
font-weight: 700;
color: #1d1f20;
}
.ss-order-summary .card-body {
padding: 24px;
}
.ss-summary-divider {
height: 1px;
background: linear-gradient(90deg, transparent 0%, #d4d4d7 20%, #d4d4d7 80%, transparent 100%);
}
/* ── Info Box (white card style) ── */
.ss-info-box {
background: #ffffff;
border: 1px solid var(--ss-border-light);
border-radius: 4px;
padding: 16px 20px;
font-size: 14px;
color: #424244;
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), var(--ss-ok-bg));
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 var(--ss-ok);
color: var(--ss-ok);
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: var(--ss-ok-bg);
border: 3px solid var(--ss-ok);
color: var(--ss-ok);
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: var(--ss-bad-bg); border-color: var(--ss-bad); color: var(--ss-bad); }
.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: #5d5d60;
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: #424244;
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, 4px);
display: flex;
align-items: center;
gap: 12px;
background: #f5f5f8;
}
.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: #f5f5f8;
border-bottom: 1px solid var(--ss-border, #e2e8f0);
font-size: 0.8125rem;
font-weight: 600;
color: #5d5d60;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 8px 12px;
}
.ss-items-table tbody td {
padding: 10px 12px;
border-bottom: 1px solid #f2f2f3;
}
/* ============================================
12. AUTH & USER PAGES
============================================ */
/* ── Auth Layout ── */
.ss-auth-layout {
background: #f5f5f8;
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 #ececee;
}
.ss-auth-card h2 {
font-weight: 700;
margin-bottom: 24px;
text-align: center;
}
.ss-auth-card .btn-primary {
border-radius: 4px;
}
/* ── User Sidebar ── */
.ss-user-sidebar {
background: #fff;
border-radius: 4px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
border: 1px solid #ececee;
overflow: hidden;
position: sticky;
top: 120px;
}
.ss-user-sidebar .ss-sidebar-header {
background: linear-gradient(135deg, #f5f5f8, #ececee);
padding: 16px 20px;
border-bottom: 1px solid #ececee;
font-weight: 700;
font-size: 14px;
color: #424244;
}
.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: #424244;
text-decoration: none;
border-bottom: 1px solid #f2f2f3;
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 #f2f2f3;
background: none;
color: #5d5d60;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
text-align: left;
}
.ss-sidebar-logout:hover {
background: var(--ss-bad-bg);
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: #f5f5f8;
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, #f5f5f8);
border: 1px solid #ececee;
border-radius: 4px;
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: #1d1f20;
}
.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: 4px;
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: var(--ss-bad-bg);
color: var(--ss-bad);
}
.ss-contact-icon.icon-success {
background: var(--ss-ok-bg);
color: var(--ss-ok);
}
/* ============================================
13. BLOG
============================================ */
.ss-blog-layout {
background: #f5f5f8;
min-height: 60vh;
padding: 0 0 40px;
}
.ss-blog-card {
background: #fff;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
border: 1px solid #ececee;
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: 4px 0 0 4px;
}
.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: 4px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
border: 1px solid #ececee;
overflow: hidden;
}
.ss-blog-sidebar-header {
background: linear-gradient(135deg, #f5f5f8, #ececee);
padding: 16px 20px;
border-bottom: 1px solid #ececee;
font-weight: 700;
font-size: 14px;
color: #424244;
}
.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: #424244;
text-decoration: none;
border-bottom: 1px solid #f2f2f3;
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 #ececee;
overflow: hidden;
padding: 40px;
}
.ss-blog-article h1 {
font-weight: 700;
font-size: 28px;
color: #1d1f20;
}
.ss-blog-article .blog-content {
font-size: 15px;
line-height: 1.8;
}
.ss-blog-article .blog-content img {
border-radius: 4px;
margin: 1em 0;
}
/* ============================================
14. REVIEWS
============================================ */
.ss-star {
color: #fbbf24;
font-size: 16px;
}
.ss-star-empty {
color: #d4d4d7;
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: var(--ss-primary); }
.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: #1d1f20;
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: #424244;
}
.blog-content h2,
.blog-content h3,
.blog-content h4 {
margin-top: 2rem;
margin-bottom: 1rem;
font-weight: 700;
color: #1d1f20;
}
.blog-content p {
margin-bottom: 1.2rem;
}
.blog-content img {
max-width: 100%;
height: auto;
border-radius: 4px;
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: #f5f5f8;
font-style: italic;
border-radius: 0 4px 4px 0;
}
.blog-content table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
}
.blog-content th,
.blog-content td {
border: 1px solid #d4d4d7;
padding: 0.75rem;
}
.blog-content th {
background: #f5f5f8;
font-weight: 600;
}
.blog-content a {
color: var(--ss-primary);
}
.blog-content hr {
margin: 2rem 0;
border-color: #f2f2f3;
}
/* ── Blog Featured Card (homepage) ── */
.ss-blog-card-featured {
background: #fff;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
border: 1px solid #ececee;
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: var(--ss-on-primary);
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: #f5f5f8;
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 #ececee;
}
.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 #ececee;
overflow: hidden;
padding: 40px;
}
/* ── FAQ Panel ── */
.ss-faq-panel {
background: #fff;
border-radius: 4px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
border: 1px solid #ececee;
overflow: hidden;
margin-bottom: 20px;
}
.ss-faq-panel-header {
background: linear-gradient(135deg, #f5f5f8, #ececee);
padding: 16px 20px;
border-bottom: 1px solid #ececee;
}
.ss-faq-panel-header h2 {
margin: 0;
font-size: 18px;
font-weight: 700;
color: #1d1f20;
}
.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: 4px 3px 4px 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: 4px;
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: 4px;
}
.ss-category-info {
padding: 20px;
border-radius: 4px;
}
/* Blog article */
.ss-blog-article {
padding: 24px;
border-radius: 4px;
}
.ss-blog-article h1 {
font-size: 22px;
}
/* Blog featured card - stack vertically on tablet */
.ss-blog-card-featured img {
border-radius: 4px 4px 0 0 !important;
min-height: 220px !important;
}
/* Page panel */
.ss-page-panel {
padding: 24px;
border-radius: 4px;
}
}
@media (max-width: 575.98px) {
.ss-product-card {
min-height: 300px;
border-radius: 4px;
}
.ss-product-card-sm {
min-height: 280px;
border-radius: 4px;
}
.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: 4px;
}
.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: 4px;
}
.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: 4px !important;
}
.swal2-confirm.swal2-styled:hover {
background-color: var(--ss-primary-hover) !important;
}
.swal2-cancel.swal2-styled {
border-radius: 4px !important;
}
/* Cart-added modal: always green confirm button */
.swal2-popup.swal-cart-added .swal2-confirm.swal2-styled {
background-color: var(--ss-ok) !important;
}
.swal2-popup.swal-cart-added .swal2-confirm.swal2-styled:hover {
background-color: #157347 !important;
}
.swal2-popup.swal-delete {
border-color: var(--ss-bad) !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: 4px;
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: var(--ss-bad);
}
.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: 4px;
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: #f2f2f3;
outline: none;
}
.ss-drawer-close:active {
background: #ececee;
}
/* ── Hero search ── */
.ss-drawer-search {
position: relative;
display: flex;
align-items: center;
margin: 14px 16px 10px;
background: #f5f6f8;
border-radius: 4px;
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: #5d5d60;
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: #98989b;
}
.ss-drawer-search-submit {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 4px;
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: #f2f2f3;
color: #1d1f20;
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: var(--ss-bad-bg);
color: var(--ss-bad-ink);
}
.ss-drawer-pill--promo:hover { background: var(--ss-bad-bg); color: var(--ss-bad-ink); }
.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: 4px;
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: #f2f2f3;
outline: none;
}
.ss-drawer-back:active {
background: #ececee;
}
.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 #f2f2f3;
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: #f5f5f8;
outline: none;
}
.ss-drawer-row:active {
background: #f2f2f3;
}
.ss-drawer-row-label {
display: inline-flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
}
.ss-drawer-row-icon {
color: #5d5d60;
width: 20px;
text-align: center;
font-size: 0.95rem;
flex-shrink: 0;
}
.ss-drawer-row-chev {
color: #98989b;
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: 4px;
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: #f5f5f8;
}
.ss-drawer-row--admin {
color: var(--ss-primary, #3b82f6);
}
.ss-drawer-row--muted {
color: #5d5d60;
}
/* 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: 4px;
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: #f2f2f3;
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 ![]()
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; }
}
/* ==== ss_tech layer: start ==== */
/* ss_tech: the theme's own layer over the inherited sheet (ss_progress GUIDE.md). Flat grey field, white panels, one accent
from the palette, graphite instead of black, the "progress" motif. Deviations by the owner's word (19.10): the glass of the
header, panels and bars, the card lift and its hover shadow, brightness on hover of the main button. */
/* ── Base ── */
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--ss-font);
background: var(--ss-bg);
color: var(--ss-ink);
font-size: 14.5px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--ss-font); color: var(--ss-ink); font-weight: 600; }
h1, .h1 { letter-spacing: -0.03em; }
h2, .h2, h3, .h3 { letter-spacing: -0.028em; }
a { color: var(--ss-ink); }
a:hover { color: var(--ss-primary-ink); }
.text-primary { color: var(--ss-primary-ink) !important; }
.text-muted { color: var(--ss-muted) !important; }
.container { max-width: var(--ss-container); padding-left: 16px; padding-right: 16px; }
@media (min-width: 768px) { .container { padding-left: 24px; padding-right: 24px; } }
.ss-price-eur, .ss-price-old, [class*="price"], .tabular { font-variant-numeric: tabular-nums; }
::selection { background: var(--ss-primary-tint); color: var(--ss-ink); }
:focus-visible { outline: 2px solid var(--ss-primary); outline-offset: 2px; }
/* ── Icons (Lucide through the theme's component) ── */
.ss-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.ss-icon.is-filled { fill: currentColor; }
.ss-icon.is-spin { animation: ss-spin 1s linear infinite; }
.ss-icon--lg { width: 1.5em; height: 1.5em; }
.ss-icon--2x { width: 2em; height: 2em; }
.ss-icon--3x { width: 3em; height: 3em; }
.ss-icon--4x { width: 4em; height: 4em; }
.ss-icon--5x { width: 5em; height: 5em; }
@keyframes ss-spin { to { transform: rotate(360deg); } }
/* The heart keeps an as the holder its scripts swap: no Font Awesome glyph there, the drawing fills on "fas" */
i:has(> .ss-icon)::before { content: none !important; display: none !important; }
i:has(> .ss-icon) { font-style: normal; display: inline-flex; line-height: 1; }
i.fas.fa-heart > .ss-icon { fill: currentColor; }
/* ── Buttons (guide 3.5): one class with local values, the variants only point them elsewhere ── */
.btn {
--b-bg: var(--ss-surface); --b-fg: var(--ss-ink); --b-bd: var(--ss-dark);
font-family: var(--ss-font); font-weight: 600; font-size: 14px; border-radius: var(--ss-r-md);
background: var(--b-bg); color: var(--b-fg); border: 1px solid var(--b-bd); box-shadow: none;
min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 0 18px; white-space: nowrap; transition: background-color var(--ss-transition-fast), color var(--ss-transition-fast), border-color var(--ss-transition-fast), filter var(--ss-transition-fast);
}
.btn:hover, .btn:focus { background: var(--b-bg); color: var(--b-fg); border-color: var(--b-bd); }
.btn-primary, .ss-btn-primary, .btn-checkout {
--b-bg: var(--ss-primary); --b-fg: #fff; --b-bd: var(--ss-primary);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-primary:hover, .ss-btn-primary:hover, .btn-checkout:hover,
.btn-primary:focus, .ss-btn-primary:focus { filter: brightness(.92); background: var(--b-bg); color: #fff; }
.btn-dark, .btn-secondary { --b-bg: var(--ss-dark); --b-fg: #fff; --b-bd: var(--ss-dark); }
.btn-dark:hover, .btn-secondary:hover { --b-bg: var(--ss-primary-ink); --b-bd: var(--ss-primary-ink); color: #fff; }
.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-light { --b-bg: var(--ss-surface); --b-fg: var(--ss-ink); --b-bd: var(--ss-dark); }
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover, .btn-light:hover { --b-bg: var(--ss-dark); --b-fg: #fff; --b-bd: var(--ss-dark); color: #fff; }
.btn-outline-danger, .btn-danger { --b-bg: var(--ss-surface); --b-fg: var(--ss-bad-ink); --b-bd: #d9a3a3; }
.btn-outline-danger:hover, .btn-danger:hover { --b-bg: var(--ss-bad); --b-fg: #fff; --b-bd: var(--ss-bad); color: #fff; }
.btn-success { --b-bg: var(--ss-ok); --b-fg: #fff; --b-bd: var(--ss-ok); }
.btn-link { --b-bg: transparent; --b-bd: transparent; --b-fg: var(--ss-primary-ink); min-height: 0; padding: 0; }
.btn-sm { min-height: 36px; font-size: 13px; padding: 0 12px; }
.btn-lg { min-height: 52px; font-size: 15px; padding: 0 24px; }
.btn:disabled, .btn.disabled { --b-bg: #98989b; --b-bd: #98989b; --b-fg: #fff; opacity: 1; filter: none; }
/* ── Fields (guide 3.6) ── */
.form-control, .form-select {
font-family: var(--ss-font); font-size: 16px; min-height: 46px; border: 1px solid var(--ss-border);
border-radius: var(--ss-r-sm); background-color: var(--ss-surface); color: var(--ss-ink); box-shadow: none;
}
@media (min-width: 768px) { .form-control, .form-select { font-size: 14.5px; } }
textarea.form-control { min-height: 96px; }
.form-control:focus, .form-select:focus { border-color: var(--ss-primary); box-shadow: 0 0 0 3px var(--ss-primary-ring); }
.form-label, label.form-label { font-size: 12.5px; font-weight: 500; color: var(--ss-ink-2); margin-bottom: 6px; }
.form-check-input { width: 17px; height: 17px; border-radius: var(--ss-r-sm); border-color: var(--ss-border-strong); }
.form-check-input:checked { background-color: var(--ss-primary); border-color: var(--ss-primary); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--ss-primary-ring); border-color: var(--ss-primary); }
.form-check-input[type="radio"] { border-radius: 50%; }
.invalid-feedback, .text-danger { color: var(--ss-bad) !important; }
.is-invalid { border-color: var(--ss-bad) !important; }
/* ── Panels and the section title (guide 1.1, 3.1) ── */
.ss-panel, .card { background: var(--ss-surface); border: 0; border-radius: var(--ss-r-md); box-shadow: none; }
/* The square in the accent, the heading, a thin line to the end with a plus on its end, then the actions */
.ss-sect-title { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; min-width: 0; }
.ss-sect-title::before { content: ""; width: 9px; height: 9px; background: var(--ss-primary); flex: none; }
.ss-sect-heading {
margin: 0; min-width: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.028em; line-height: 1.15; color: var(--ss-ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-sect-line { position: relative; flex: 1 1 auto; min-width: 24px; height: 1px; margin: 0 8px 0 6px; background: #c4c4c8; }
.ss-sect-line::before, .ss-sect-line::after { content: ""; position: absolute; background: var(--ss-ink); }
.ss-sect-line::before { right: -5px; top: 0; width: 11px; height: 1px; }
.ss-sect-line::after { right: 0; top: -5px; width: 1px; height: 11px; }
.ss-sect-actions { display: flex; align-items: center; gap: 20px; flex: none; }
.ss-sect-link { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13.5px; font-weight: 500; color: var(--ss-primary-ink); text-decoration: none; }
.ss-sect-link:hover { color: var(--ss-ink); }
.ss-sect-link .ss-icon { width: 15px; height: 15px; }
.ss-sect-title--dark .ss-sect-heading { color: #fff; }
.ss-sect-title--dark .ss-sect-line { background: #5d5d60; }
.ss-sect-title--dark .ss-sect-line::before, .ss-sect-title--dark .ss-sect-line::after { background: #fff; }
.ss-sect-title--dark .ss-sect-link { color: #d4d4d7; }
.ss-sect-title--dark .ss-sect-link:hover { color: #fff; }
@media (min-width: 768px) { .ss-sect-heading { font-size: 24px; } }
/* A phone: the heading and the actions only (the line would leave no room for the words) */
@media (max-width: 575.98px) {
.ss-sect-line { display: none; }
.ss-sect-actions { margin-left: auto; gap: 14px; }
}
/* ── Header: the notice (guide 3.3, row 1) ── */
.ss-notification-bar { background: var(--ss-dark) !important; color: #e7e7ea !important; font-size: 13px; line-height: 1.4; }
.ss-notification-bar .container { min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; padding-top: 6px; padding-bottom: 6px; }
.ss-notification-bar .container::before { content: ""; width: 6px; height: 6px; background: var(--ss-primary); flex: none; }
.ss-notification-bar a { color: #fff; font-weight: 600; }
/* ── Row 2: the top bar ── */
.ss-topbar { background: transparent; color: var(--ss-muted); font-size: 12.5px; border: 0; white-space: nowrap; }
.ss-topbar .container > .d-flex { min-height: 36px; gap: 24px; }
.ss-topbar .container > .d-flex > div { display: flex; align-items: center; gap: 20px; }
.ss-topbar a { color: var(--ss-ink-2); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin: 0 !important; }
.ss-topbar a:hover { color: var(--ss-ink); }
.ss-topbar .ss-icon { width: 13px; height: 13px; }
.ss-topbar-phone { color: var(--ss-ink) !important; font-weight: 600; background: none; padding: 0; }
.ss-topbar-lang-switch { display: inline-flex; border: 1px solid var(--ss-border); border-radius: var(--ss-r-sm); overflow: hidden; }
.ss-topbar-lang-switch > span { display: none; }
.ss-topbar-lang-switch a { padding: 1px 7px; color: var(--ss-ink-2); }
.ss-topbar-lang-switch a.active { background: var(--ss-dark); color: #fff; font-weight: 600; }
/* ── Row 3: the main header, glass and sticky ── */
.ss-header {
position: sticky; top: 0; z-index: 50; background: var(--ss-glass);
border-bottom: 1px solid rgba(29, 31, 32, .06); box-shadow: none; padding: 0;
}
.ss-header > .container > .d-md-flex { min-height: 72px; gap: 32px !important; }
.ss-logo img { max-height: 44px; width: auto; }
.ss-logo .fw-bold { font-size: 23px !important; font-weight: 700 !important; letter-spacing: -0.04em; color: var(--ss-ink) !important; }
.ss-search-box { flex: 1 1 auto; position: relative; }
.ss-search-box .input-group {
height: 46px; background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-r-md);
overflow: hidden; flex-wrap: nowrap;
}
.ss-search-box .input-group:hover { border-color: var(--ss-border-strong); }
.ss-search-box .input-group:focus-within { border-color: var(--ss-primary); box-shadow: 0 0 0 3px var(--ss-primary-ring); }
.ss-search-box .form-control { border: 0; min-height: 44px; height: 44px; box-shadow: none !important; padding: 0 14px; font-size: 14.5px; background: transparent; border-radius: 0; }
.ss-search-box .btn-search {
width: 52px; flex: none; border: 0; background: var(--ss-primary); color: var(--ss-on-primary); display: grid; place-items: center; border-radius: 0;
}
.ss-search-box .btn-search:hover { filter: brightness(.92); }
.ss-search-box .btn-search .ss-icon { width: 18px; height: 18px; stroke-width: 1.75; }
.ss-live-search-dropdown { border: 0; border-radius: var(--ss-r-md); box-shadow: var(--ss-shadow-pop); background: var(--ss-surface); overflow: hidden; }
.ss-live-search-item { border-bottom: 1px solid var(--ss-line); }
.ss-live-search-item:hover { background: var(--ss-surface-2); }
.ss-live-search-all { color: var(--ss-primary-ink); font-weight: 600; }
.ss-desktop-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.ss-action-icon {
position: relative; width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--ss-r-md); color: var(--ss-ink);
background: transparent; border: 0;
}
.ss-action-icon:hover { background: var(--ss-chip); color: var(--ss-ink); }
.ss-action-icon .ss-icon, .ss-action-icon i > .ss-icon { width: 22px; height: 22px; }
.ss-wishlist-badge {
position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
background: var(--ss-fav-badge-bg) !important; color: var(--ss-fav-badge-ink); font-size: 11px; font-weight: 600; line-height: 18px;
}
.ss-badge-hidden { display: none !important; }
/* The cart button: a dark square with the icon, a light part with the word and the count, no move, no shadow */
.ss-cart-btn {
display: flex; align-items: stretch; height: 46px; margin-left: 8px; border: 1px solid var(--ss-border); border-radius: var(--ss-r-md);
overflow: hidden; background: var(--ss-surface); color: var(--ss-ink); text-decoration: none; box-shadow: none; padding: 0;
}
.ss-cart-btn > .ss-icon { width: 46px; height: 44px; padding: 12px; background: var(--ss-dark); color: #fff; transition: background-color var(--ss-transition-fast); }
.ss-cart-btn:hover { border-color: var(--ss-border-strong); color: var(--ss-ink); }
.ss-cart-btn:hover > .ss-icon { background: var(--ss-primary-ink); }
.ss-cart-btn-text { display: flex; flex-direction: column; justify-content: center; padding: 0 14px; line-height: 1.2; }
.ss-cart-btn-label { font-size: 13.5px; font-weight: 600; color: var(--ss-ink); }
.ss-cart-btn-count { font-size: 12px; color: var(--ss-muted); font-variant-numeric: tabular-nums; }
/* ── Phone header: the burger always on the left, the logo after it, the rest on the right (WORKFLOW 9.1) ── */
.ss-mobile-header { min-height: 60px; display: flex; align-items: center; gap: 8px; }
.ss-hamburger { width: 42px; height: 42px; border: 0; border-radius: var(--ss-r-md); background: var(--ss-dark); color: #fff; display: grid; place-items: center; flex: none; }
.ss-hamburger .ss-icon { width: 20px; height: 20px; }
.ss-mobile-header a, .ss-mobile-header button { color: var(--ss-ink); }
.ss-mobile-header .ss-hamburger, .ss-mobile-header .ss-hamburger:hover { color: #fff; background: var(--ss-dark); transform: none; }
.ss-mobile-header .ss-hamburger:hover { background: var(--ss-primary-ink); }
/* The closed drawer keeps no shadow: from behind the left edge it threw a grey band onto every page */
.ss-sidenav { box-shadow: none; }
.ss-sidenav.open { box-shadow: var(--ss-shadow-pop); }
/* ── Row 4: the bar of categories (graphite, 44 px; the active one has a 2 px accent line) ── */
.ss-navigation { background: var(--ss-dark-nav); border: 0; box-shadow: none; position: relative; z-index: 40; }
.ss-navigation .nav-list { display: flex; align-items: stretch; gap: 0; margin: 0; padding: 0; list-style: none; min-height: 44px; }
.ss-navigation .nav-list > li { position: relative; display: flex; }
.ss-navigation .nav-list > li > a {
display: flex; align-items: center; gap: 6px; padding: 0 14px; color: #e7e7ea; font-size: 13.5px; font-weight: 500;
text-decoration: none; position: relative; white-space: nowrap; background: transparent; border-radius: 0;
}
.ss-navigation .nav-list > li > a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.ss-navigation .nav-list > li.active > a { color: #fff; }
.ss-navigation .nav-list > li.active > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--ss-primary); }
.ss-navigation .caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; opacity: .7; }
/* "Нови продукти" plain white on the right, "Промо продукти" a small button in the accent (not the green and red of the base) */
.ss-navigation .nav-list > li.nav-auto-new, .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: 6px; }
.ss-navigation .nav-list > li.nav-auto-new > a,
.ss-navigation .nav-list > li.nav-auto-new > a:hover,
.ss-navigation .nav-list > li.nav-auto-new.active > a { color: #fff; background: transparent; font-weight: 600; }
.ss-navigation .nav-list > li.nav-auto-new > a:hover { background: rgba(255, 255, 255, .06); }
.ss-navigation .nav-list > li.nav-auto-promo > a {
margin: 7px 0; height: 30px; padding: 0 12px; border-radius: var(--ss-r-sm); background: var(--ss-primary); color: var(--ss-on-primary);
font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.ss-navigation .nav-list > li.nav-auto-promo > a:hover,
.ss-navigation .nav-list > li.nav-auto-promo.active > a { background: var(--ss-primary); color: var(--ss-on-primary); filter: brightness(.92); }
.ss-navigation .nav-list > li.nav-auto > a::after { display: none; }
.ss-navigation .dropdown-menu {
border: 0; border-radius: 0 0 var(--ss-r-md) var(--ss-r-md); padding: 8px; min-width: 240px; margin: 0;
background: var(--ss-surface); box-shadow: var(--ss-shadow-pop);
}
.ss-navigation .dropdown-item { border-radius: var(--ss-r-sm); padding: 8px 12px; font-size: 13.5px; color: var(--ss-ink); }
.ss-navigation .dropdown-item:hover, .ss-navigation .dropdown-item.active { background: var(--ss-primary-tint); color: var(--ss-primary-ink); }
/* ── Breadcrumbs (guide 3.2) ── */
.breadcrumb { min-height: 36px; align-items: center; margin: 0; padding: 0; font-size: 13px; background: none; border-radius: 0; box-shadow: none; flex-wrap: wrap; row-gap: 4px; }
.breadcrumb-item, .breadcrumb-item a { color: var(--ss-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb-item + .breadcrumb-item::before { content: "›"; color: var(--ss-faint); padding: 0 8px; }
.breadcrumb-item:first-child a { width: 26px; height: 26px; justify-content: center; color: var(--ss-primary); border-radius: var(--ss-r-sm); }
.breadcrumb-item:first-child a:hover { background: var(--ss-primary); color: var(--ss-on-primary); }
.breadcrumb-item a:hover { color: var(--ss-ink); }
.breadcrumb-item.active { color: var(--ss-ink); font-weight: 600 !important; }
.ss-breadcrumb-badge { height: 26px; padding: 0 10px; border-radius: var(--ss-r-sm); background: var(--ss-primary); color: var(--ss-on-primary) !important; font-weight: 500; box-shadow: none !important; }
.ss-breadcrumb-badge:hover { filter: brightness(.9); }
.ss-breadcrumb-badge .ss-icon { width: 13px; height: 13px; }
/* ── The product card (guide 3.4, ProgressCardB; its own class names inside, the base's card rules do not reach them) ── */
.ss-product-card {
position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; margin: 0; padding: 10px; border: 0;
border-radius: var(--ss-r-md); background: var(--ss-surface); box-shadow: 0 0 0 1px rgba(29, 31, 32, .05); overflow: visible;
transition: box-shadow .3s ease, transform .3s ease;
}
.ss-product-card:hover { z-index: 2; transform: translateY(-2px); box-shadow: 0 20px 40px -22px rgba(29, 31, 32, .38), 0 0 0 1px rgba(29, 31, 32, .08); border-color: transparent; }
.ss-product-card .ss-product-image {
position: relative; aspect-ratio: 1 / 1; margin: 0; overflow: hidden; border-radius: var(--ss-r-sm);
background: linear-gradient(180deg, #f7f7f9 0%, #ececef 100%);
}
.ss-product-media { display: block; width: 100%; height: 100%; }
.ss-product-card .ss-product-image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; border-radius: 0 !important; transition: transform .5s ease; }
.ss-product-card:hover .ss-product-image img { transform: scale(1.04); }
/* The glint: a white diagonal band across the photo, only when the pointer comes in (back without a move) */
.ss-product-card .ss-product-image::after {
content: ""; position: absolute; inset: -10% -40%; z-index: 2; pointer-events: none;
background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, 0) 62%);
transform: translateX(-70%);
}
.ss-product-card:hover .ss-product-image::after { transform: translateX(70%); transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.ss-no-image { width: 100%; height: 100%; display: grid; place-items: center; background: none; color: var(--ss-faint); }
.ss-no-image .ss-icon { width: 40px; height: 40px; stroke-width: 1.25; }
.ss-pcard-badges { position: absolute; top: 8px; left: 8px; z-index: 3; display: flex; gap: 4px; pointer-events: none; }
.ss-pcard-badge { padding: 5px 6px; border-radius: var(--ss-r-sm); font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; background: var(--ss-surface); color: var(--ss-ink); }
.ss-pcard-badge.is-sale { background: var(--ss-dark); color: #fff; font-variant-numeric: tabular-nums; }
.ss-pcard-badge.is-top { background: var(--ss-primary); color: var(--ss-on-primary); }
.ss-pcard-video { position: absolute; left: 8px; bottom: 8px; z-index: 3; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--ss-r-sm); background: var(--ss-dark); color: #fff; }
.ss-pcard-video .ss-icon { width: 16px; height: 16px; }
.ss-product-card .ss-wishlist-btn {
position: absolute; top: 6px; right: 6px; z-index: 3; width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
border: 0; border-radius: var(--ss-r-sm); background: rgba(255, 255, 255, .7); color: var(--ss-ink); box-shadow: none;
}
.ss-product-card .ss-wishlist-btn:hover { background: #fff; color: var(--ss-primary); }
.ss-product-card .ss-wishlist-btn .fas.fa-heart, .ss-product-card .ss-wishlist-btn.text-danger { color: var(--ss-bad); }
.ss-product-card .ss-wishlist-btn .ss-icon { width: 16px; height: 16px; }
.ss-pcard-body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 4px; padding: 10px 4px 2px; }
.ss-pcard-title { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.35; letter-spacing: 0; }
.ss-pcard-title a { color: var(--ss-ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }
.ss-product-card:hover .ss-pcard-title a { color: var(--ss-primary-ink); }
.ss-card-rating { display: flex; align-items: center; gap: 1px; color: #e0a106; }
.ss-card-rating .ss-icon { width: 13px; height: 13px; }
.ss-card-rating .ss-icon:not(.is-filled) { color: #c4c4c8; }
.ss-card-rating-count { margin-left: 5px; font-size: 12px; color: var(--ss-muted); font-variant-numeric: tabular-nums; }
/* The owner (23.10): the stars right under a short title; a light line over the price and the button */
.ss-pcard-old {
position: relative; z-index: 1; margin: auto 0 -7px; padding-top: 8px; min-height: 27px; font-size: 12.5px; line-height: 18px;
color: var(--ss-faint); text-decoration: line-through; font-variant-numeric: tabular-nums;
}
.ss-pcard-old::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, var(--ss-line), #e1e1e4 50%, var(--ss-line));
}
.ss-pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; margin-top: auto; }
.ss-pcard-old + .ss-pcard-foot { margin-top: 0; }
.ss-pcard-price { display: flex; align-items: flex-start; line-height: 1; white-space: nowrap; color: var(--ss-ink); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.ss-pcard-price.is-promo { color: var(--ss-promo); }
.ss-pcard-cents { margin-left: 1px; padding-top: 2px; font-size: 11.5px; letter-spacing: 0; vertical-align: top; }
.ss-pcard-inquiry { font-size: 13.5px; font-weight: 600; color: var(--ss-ink-2); white-space: nowrap; }
.ss-pcard-buy {
flex: none; height: 34px; display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; border: 0; border-radius: var(--ss-r-sm);
background: var(--ss-primary); color: var(--ss-on-primary); font-size: 13px; font-weight: 500; text-decoration: none; transition: filter .2s;
}
.ss-pcard-buy:hover { filter: brightness(.9); color: #fff; }
.ss-pcard-buy:disabled { filter: none; opacity: .75; }
.ss-pcard-buy .ss-icon { width: 16px; height: 16px; }
.ss-pcard-call { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--ss-r-sm); background: var(--ss-dark); color: #fff; text-decoration: none; }
.ss-pcard-call:hover { background: var(--ss-primary-ink); color: #fff; }
.ss-pcard-call .ss-icon { width: 16px; height: 16px; }
.ss-pcard-swatches { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ss-muted); text-decoration: none; }
.ss-pcard-swatch { width: 10px; height: 10px; border-radius: 1px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.ss-pcard-chip { padding: 4px 6px; border-radius: var(--ss-r-sm); background: var(--ss-chip); color: var(--ss-ink-2); font-size: 11.5px; line-height: 1; white-space: nowrap; text-decoration: none; }
.ss-pcard-chip:hover { background: var(--ss-dark); color: #fff; }
/* Two cards in a row on a phone: the same card, a little tighter */
@media (max-width: 575.98px) {
.ss-product-card { padding: 8px; }
.ss-pcard-body { padding: 8px 2px 0; }
.ss-pcard-title { font-size: 13px; }
.ss-pcard-price { font-size: 17px; }
.ss-pcard-cents { font-size: 10.5px; }
.ss-pcard-buy { padding: 0 8px; }
.ss-pcard-buy > span { display: none; }
.ss-pcard-foot { gap: 6px; }
}
/* ── A grid of cards (guide 3.4: minmax 240-250 px) and a row of cards that scrolls (Home B) ── */
.ss-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.ss-rail { padding-top: 12px; }
.ss-rail .ss-sect-title { margin-bottom: 14px; }
.ss-rail-bar { position: relative; display: block; width: 120px; height: 3px; border-radius: 2px; background: var(--ss-border); }
.ss-rail-thumb { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; border-radius: 2px; background: var(--ss-dark); transition: left .25s ease; }
.ss-rail-arrows { display: flex; gap: 4px; margin-left: -6px; }
.ss-rail-btn { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--ss-r-md); background: var(--ss-surface); color: var(--ss-ink); }
.ss-rail-btn:hover { background: var(--ss-dark); color: #fff; }
.ss-rail-btn .ss-icon { width: 17px; height: 17px; }
.ss-rail.is-static .ss-rail-bar, .ss-rail.is-static .ss-rail-arrows { display: none; }
.ss-rail-track {
display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
padding: 4px 0 24px; margin: -4px 0 -24px;
}
.ss-rail-track::-webkit-scrollbar { display: none; }
.ss-rail-item { flex: 0 0 calc((100% - 40px) / 5); min-width: 240px; scroll-snap-align: start; display: flex; }
.ss-rail-item > .ss-product-card { width: 100%; }
.ss-rail--dark { margin-top: 12px; padding: 24px 22px 22px; border-radius: var(--ss-r-md); background: var(--ss-dark); color: #fff; }
.ss-rail--dark .ss-rail-track { padding-bottom: 20px; margin-bottom: -20px; }
.ss-rail--dark .ss-rail-item { color: var(--ss-ink); }
.ss-rail--dark .ss-rail-bar { background: #5d5d60; }
.ss-rail--dark .ss-rail-thumb { background: #fff; }
.ss-rail--dark .ss-rail-btn { background: rgba(255, 255, 255, .1); color: #fff; }
.ss-rail--dark .ss-rail-btn:hover { background: rgba(255, 255, 255, .2); }
@media (max-width: 575.98px) {
.ss-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ss-rail-item { flex-basis: 62%; min-width: 0; }
.ss-rail-bar, .ss-rail-arrows { display: none; }
/* the row runs to the edges of the screen, so the next card shows it goes on */
.ss-rail-track { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; scroll-padding-inline: 16px; }
.ss-rail--dark .ss-rail-track { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; scroll-padding-inline: 14px; }
.ss-rail--dark { padding: 18px 14px 16px; }
}
/* ── The home page (Home B) ── */
.ss-home { display: flex; flex-direction: column; gap: 16px; padding-top: 16px; padding-bottom: 24px; }
.ss-home > .ss-home-blog { margin-top: 12px; }
.ss-home > .ss-home-brands, .ss-home > .ss-home-random { padding-top: 12px; }
/* The hero (variant A of the canvas the owner chose, 23.10): the picture fills the stage, the words stand on a solid
graphite card at its foot with the count and the arrows; the slides listed on the right with the bar of the time */
.ss-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ss-hero-stage { position: relative; min-width: 0; display: grid; border-radius: var(--ss-r-md); overflow: hidden; background: var(--ss-dark); }
.ss-hero-slide { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.ss-hero-slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease; }
.ss-hero-media { position: relative; order: -1; aspect-ratio: 16 / 10; background: linear-gradient(160deg, #3a3a3d 0%, #2b2b2d 100%); }
.ss-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ss-hero-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; padding: 20px 18px 20px; background: var(--ss-dark); color: #fff; }
.ss-hero-count { font-size: 13px; color: #b7b7ba; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.ss-hero-title { margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.08; font-weight: 600; letter-spacing: -0.035em; color: #fff; text-wrap: balance; }
.ss-hero-sub { margin: 0; font-size: 16px; line-height: 1.55; color: #d4d4d7; text-wrap: pretty; }
.ss-hero-actions { display: flex; align-items: center; gap: 8px; padding-top: 6px; }
.ss-hero-btn { min-height: 48px; padding: 0 22px; gap: 10px; font-size: 15px; font-weight: 500; }
.ss-hero-btn .ss-icon { width: 18px; height: 18px; }
.ss-hero-arrows { display: flex; gap: 8px; margin-left: auto; }
.ss-hero-arrow {
width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid #5d5d60; border-radius: var(--ss-r-md);
background: transparent; color: #fff; transition: border-color .15s ease, background-color .15s ease;
}
.ss-hero-arrow:hover { border-color: #fff; background: rgba(255, 255, 255, .06); color: #fff; }
.ss-hero-arrow .ss-icon { width: 18px; height: 18px; }
.ss-hero-nav { position: relative; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ss-hero-thumb {
position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px;
border: 0; border-radius: var(--ss-r-md); background: #fff; color: var(--ss-ink); text-align: left; overflow: hidden;
}
.ss-hero-thumb-img { position: relative; aspect-ratio: 1 / 1; border-radius: var(--ss-r-sm); overflow: hidden; background: #ececef; }
.ss-hero-thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; transition: opacity .2s ease; }
.ss-hero-thumb.is-active .ss-hero-thumb-img img, .ss-hero-thumb:hover .ss-hero-thumb-img img { opacity: 1; }
.ss-hero-thumb-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ss-hero-thumb-num { font-size: 12px; font-weight: 500; color: var(--ss-muted); font-variant-numeric: tabular-nums; }
.ss-hero-thumb-title { font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--ss-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-hero-thumb.is-active .ss-hero-thumb-title, .ss-hero-thumb:hover .ss-hero-thumb-title { color: var(--ss-ink); }
.ss-hero-thumb-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden; background: var(--ss-line); }
.ss-hero-thumb-fill { position: absolute; inset: 0; background: var(--ss-primary); transform: scaleX(0); transform-origin: left center; }
.ss-hero-thumb.is-active .ss-hero-thumb-fill { animation: ss-hero-fill 6.5s linear forwards; }
@keyframes ss-hero-fill { to { transform: scaleX(1); } }
/* A phone: the picture over the card, the slides one strip that slides */
@media (max-width: 767.98px) {
.ss-hero-nav { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ss-hero-nav::-webkit-scrollbar { display: none; }
.ss-hero-thumb { flex: 0 0 78%; scroll-snap-align: start; }
}
/* From a tablet on: the card stands on the picture, at its foot on the left */
@media (min-width: 768px) {
.ss-hero-slide { min-height: 460px; }
.ss-hero-media { position: absolute; inset: 0; aspect-ratio: auto; }
.ss-hero-text {
position: absolute; left: 32px; bottom: 32px; width: 470px; max-width: calc(100% - 64px); box-sizing: border-box;
gap: 14px; padding: 28px 30px 26px; border-radius: var(--ss-r-md);
}
.ss-hero-sub { font-size: 15px; }
}
/* A desktop: the slides as four rows on the right of the stage */
@media (min-width: 992px) {
.ss-hero.ss-hero--thumbs { grid-template-columns: minmax(0, 1fr) 320px; }
.ss-hero-slide { min-height: 560px; }
.ss-hero--thumbs .ss-hero-nav { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(var(--ss-hero-rows, 4), minmax(0, 1fr)); }
.ss-hero-thumb { grid-template-columns: 96px minmax(0, 1fr); }
}
/* What the shop promises: four panels in one white row */
.ss-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-radius: var(--ss-r-md); overflow: hidden; background: var(--ss-surface); }
.ss-trust-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: -1px 0 0 -1px; border-left: 1px solid var(--ss-line); border-top: 1px solid var(--ss-line); }
@media (min-width: 768px) { .ss-trust-item { padding: 18px 22px; } }
.ss-trust-icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--ss-r-md); background: var(--ss-chip); color: var(--ss-ink); }
.ss-trust-icon .ss-icon { width: 22px; height: 22px; }
.ss-trust-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.ss-trust-title { font-size: 14px; font-weight: 600; }
.ss-trust-sub { font-size: 13px; color: var(--ss-muted); }
/* The top categories as rows in a white panel */
.ss-panel.ss-home-cats { padding: 18px 16px 6px; }
@media (min-width: 768px) { .ss-panel.ss-home-cats { padding: 22px 22px 8px; } }
.ss-cat-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); column-gap: 24px; }
.ss-cat-row {
display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 10px; margin: 0 -10px;
border-top: 1px solid var(--ss-line); border-radius: var(--ss-r-md); color: var(--ss-ink); text-decoration: none;
transition: background-color .25s ease, color .25s ease;
}
.ss-cat-row:hover { background: var(--ss-surface-2); color: var(--ss-primary-ink); }
.ss-cat-row-img { position: relative; width: 64px; height: 64px; border-radius: var(--ss-r-sm); overflow: hidden; background: linear-gradient(180deg, #f7f7f9, #ececef); transition: box-shadow .3s ease; }
.ss-cat-row-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.ss-cat-row:hover .ss-cat-row-img { box-shadow: 0 8px 18px -10px rgba(29, 31, 32, .35); }
.ss-cat-row:hover .ss-cat-row-img img { transform: scale(1.08); }
.ss-cat-row-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ss-cat-row-name { font-size: 14.5px; font-weight: 500; }
.ss-cat-row-count { font-size: 12.5px; color: var(--ss-muted); font-variant-numeric: tabular-nums; }
.ss-cat-row-go {
width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--ss-r-sm); color: #98989b; transform: translateX(-4px);
transition: background-color .25s ease, color .25s ease, transform .3s cubic-bezier(.2, .7, .2, 1);
}
.ss-cat-row:hover .ss-cat-row-go { background: var(--ss-primary); color: var(--ss-on-primary); transform: none; }
.ss-cat-row-go .ss-icon { width: 16px; height: 16px; }
/* The blog: three posts with a picture 16:9, the category and the date, the title */
.ss-panel.ss-home-blog { padding: 18px 16px; }
@media (min-width: 768px) { .ss-panel.ss-home-blog { padding: 22px; } }
.ss-home-blog .ss-sect-title { margin-bottom: 18px; }
.ss-home-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.ss-home-post { display: flex; flex-direction: column; gap: 12px; color: var(--ss-ink); text-decoration: none; }
.ss-home-post:hover { color: var(--ss-primary-ink); }
.ss-home-post-img { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--ss-r-sm); overflow: hidden; background: #ececef; color: var(--ss-faint); }
.ss-home-post-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ss-home-post:hover .ss-home-post-img img { transform: scale(1.04); }
.ss-home-post-img .ss-icon { width: 32px; height: 32px; stroke-width: 1.25; }
.ss-home-post-body { display: flex; flex-direction: column; gap: 6px; }
.ss-home-post-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ss-muted); }
.ss-dot { width: 3px; height: 3px; border-radius: 50%; background: #b7b7ba; flex: none; }
.ss-home-post-date { font-weight: 600; color: var(--ss-primary-ink); font-variant-numeric: tabular-nums; }
.ss-home-post-title { font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; text-wrap: pretty; }
/* The brands: a white strip of logos that runs by itself and stops under the pointer */
.ss-brand-strip { overflow: hidden; border-radius: var(--ss-r-md); background: var(--ss-surface); }
.ss-brand-run { display: flex; width: max-content; min-width: 100%; }
.ss-brand-strip.is-running .ss-brand-run { animation: ss-brand-run var(--ss-brand-time, 60s) linear infinite; }
.ss-brand-strip.is-running:hover .ss-brand-run { animation-play-state: paused; }
@keyframes ss-brand-run { to { transform: translateX(-50%); } }
.ss-brand-cell { flex: none; width: max(150px, calc((100vw - 48px) / 8)); max-width: 174px; height: 84px; display: grid; place-items: center; padding: 14px 22px; border-left: 1px solid var(--ss-line); }
.ss-brand-cell img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .55; transition: opacity .2s ease, filter .2s ease; }
.ss-brand-cell:hover img { filter: none; opacity: 1; }
/* ── Footer (graphite; the links and the contacts in columns; the bottom row under a line) ── */
.ss-footer { background: var(--ss-dark); color: #b7b7ba; margin-top: 32px; padding: 56px 0 0; font-size: 13.5px; }
.ss-footer::before, .ss-footer::after { display: none; }
.ss-footer h6, .ss-footer .h6 { color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; margin-bottom: 14px; }
.ss-footer a { color: #b7b7ba; text-decoration: none; }
.ss-footer a:hover { color: #fff; }
.ss-footer-section { margin-bottom: 36px; }
.ss-footer-logo img { max-height: 40px; width: auto; }
.ss-footer-about { color: #b7b7ba; max-width: 300px; }
.ss-footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.ss-footer-links li { margin: 0; }
.ss-footer-social { display: flex; gap: 8px; margin-top: 14px; }
.ss-footer-social a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--ss-r-sm); background: rgba(255, 255, 255, .06); color: #fff; }
.ss-footer-social a:hover { background: var(--ss-primary); color: var(--ss-on-primary); }
.ss-footer-contact { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; color: #e7e7ea; }
.ss-footer-contact-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--ss-r-sm); background: rgba(255, 255, 255, .06); color: #fff; flex: none; }
.ss-footer-contact-text { line-height: 1.45; }
.ss-footer-cards-title { font-size: 12.5px; color: #b7b7ba; }
.ss-footer-bottom { border-top: 1px solid #3d3d40; padding: 16px 0; margin-top: 8px; font-size: 12.5px; color: #98989b; background: transparent; }
.ss-footer-bottom a { color: #98989b; }
.ss-footer-btn { background: var(--ss-primary); color: var(--ss-on-primary) !important; border-radius: var(--ss-r-md); padding: 8px 14px; display: inline-flex; align-items: center; gap: 6px; }
/* ── The head of a catalog page (Categories, Category): a white panel with the title, the count chip and the line; the
description; the chips of the subcategories ── */
.ss-category-layout { padding-bottom: 24px; background: transparent; min-height: 0; }
.ss-panel.ss-page-head { padding: 18px 16px; margin-bottom: 10px; }
.ss-sect-title--page { margin-bottom: 0; }
.ss-sect-title--page .ss-sect-heading { font-size: 24px; letter-spacing: -0.03em; }
.ss-count-chip { flex: none; padding: 4px 8px; border-radius: var(--ss-r-sm); background: var(--ss-chip); color: var(--ss-ink-2); font-size: 12.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ss-page-desc { max-width: 760px; margin-top: 14px; font-size: 14.5px; line-height: 1.6; color: var(--ss-muted); }
.ss-page-desc > :last-child { margin-bottom: 0; }
.ss-page-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ss-line); }
.ss-page-chip {
display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--ss-border);
border-radius: var(--ss-r-sm); background: var(--ss-surface); color: var(--ss-ink); font-size: 13.5px; text-decoration: none; white-space: nowrap;
}
.ss-page-chip > span { font-size: 12.5px; color: var(--ss-faint); font-variant-numeric: tabular-nums; }
.ss-page-chip:hover { border-color: var(--ss-dark); color: var(--ss-ink); }
@media (min-width: 768px) {
.ss-panel.ss-page-head { padding: 22px; }
.ss-sect-title--page .ss-sect-heading { font-size: 30px; }
}
/* ── The tiles of the categories (Categories): a white panel, the name and the counts with an arrow; five products and
"+N", or one cover with the number of subcategories and their names ── */
.ss-ctile-grid-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 10px; }
.ss-ctile {
display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--ss-r-md); background: var(--ss-surface);
transition: box-shadow .3s ease;
}
.ss-ctile:hover { box-shadow: var(--ss-shadow-hover); }
.ss-ctile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; color: var(--ss-ink); text-decoration: none; }
.ss-ctile-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ss-ctile-title { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--ss-ink); transition: color .25s ease; }
.ss-ctile:hover .ss-ctile-title { color: var(--ss-primary-ink); }
.ss-ctile-meta { font-size: 12.5px; color: var(--ss-muted); font-variant-numeric: tabular-nums; }
.ss-ctile-go {
flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--ss-r-sm); background: var(--ss-chip);
color: var(--ss-muted); transition: background-color .25s ease, color .25s ease;
}
.ss-ctile:hover .ss-ctile-go { background: var(--ss-primary); color: var(--ss-on-primary); }
.ss-ctile-go .ss-icon { width: 16px; height: 16px; }
.ss-ctile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; text-decoration: none; }
.ss-ctile-cell {
position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; border-radius: var(--ss-r-sm);
background: linear-gradient(180deg, #f7f7f9 0%, #ececef 100%);
}
.ss-ctile-cell img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.ss-ctile:hover .ss-ctile-cell img { transform: scale(1.06); }
.ss-ctile-more { align-content: center; gap: 2px; color: var(--ss-ink); text-align: center; }
.ss-ctile-more strong { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.ss-ctile-more span { font-size: 12px; color: var(--ss-muted); }
.ss-ctile-cover {
position: relative; display: grid; place-items: center; aspect-ratio: 7 / 4; overflow: hidden; border-radius: var(--ss-r-sm);
background: radial-gradient(ellipse at 60% 20%, #fff 0%, #f1f1f3 45%, #e6e6e9 100%); color: var(--ss-faint); text-decoration: none;
}
.ss-ctile-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ss-ctile:hover .ss-ctile-cover img { transform: scale(1.04); }
.ss-ctile-empty .ss-icon { width: 36px; height: 36px; stroke-width: 1.25; }
.ss-ctile-badge {
position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px;
border-radius: var(--ss-r-sm); background: var(--ss-surface); color: var(--ss-ink); font-size: 12.5px; font-weight: 600;
}
.ss-ctile-badge .ss-icon { width: 14px; height: 14px; }
.ss-ctile-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: -6px; }
.ss-ctile-chip { padding: 5px 8px; border-radius: var(--ss-r-sm); background: var(--ss-chip); color: var(--ss-ink-2); font-size: 12.5px; font-weight: 500; line-height: 1.2; text-decoration: none; }
.ss-ctile-chip:hover { background: var(--ss-dark); color: #fff; }
@media (min-width: 768px) { .ss-ctile { padding: 18px; } }
/* ── An empty state (guide 3.11): an icon in a grey square, a line, one action ── */
.ss-panel.ss-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 20px; text-align: center; }
.ss-empty-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: var(--ss-r-md); background: var(--ss-chip); color: var(--ss-ink-2); }
.ss-empty-icon .ss-icon { width: 28px; height: 28px; }
.ss-empty-title { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.ss-empty-text { margin: 0; max-width: 460px; color: var(--ss-muted); }
/* ── A list with filters (Category): the filters in a panel of 280 px on the left, not sticky; the rest on the right ── */
.ss-list-layout { display: flex; flex-direction: column; gap: 10px; }
.ss-list-main { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ss-list-main > .ss-page-head { margin-bottom: 0; }
.ss-list-side { flex: none; }
@media (min-width: 992px) {
.ss-list-layout.has-sidebar { flex-direction: row; align-items: flex-start; gap: 16px; }
.ss-list-side { width: 280px; }
}
.ss-list-main .ss-card-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ss-grid-full { grid-column: 1 / -1; }
.ss-products-grid { position: relative; }
.ss-products-grid-overlay { position: absolute; inset: 0; z-index: 5; background: rgba(242, 242, 243, .6); }
/* The glass panel of the filters (guide 3.7) */
.ss-filter-sidebar { position: static; top: auto; max-height: none; overflow: visible; }
.ss-filter-sidebar-inner { padding: 0; background: none; border: 0; box-shadow: none; }
.ss-filters {
border-radius: var(--ss-r-md); border: 1px solid #fff; overflow: hidden;
background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .7));
box-shadow: inset 0 1px 0 #fff, 0 30px 60px -40px rgba(29, 31, 32, .35);
}
.ss-filters-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--ss-line); }
.ss-filters-head > span { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.ss-filters-head .ss-icon { width: 18px; height: 18px; }
.ss-filters-clear { border: 0; background: none; padding: 0; color: var(--ss-primary-ink); font-size: 13px; font-weight: 600; }
.ss-filters-clear:hover { color: var(--ss-ink); }
.ss-filter-group { padding: 16px 20px 18px; border-bottom: 1px solid var(--ss-line); }
.ss-filter-group:last-child { border-bottom: 0; }
.ss-filter-group-title {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0; border: 0; background: none;
color: var(--ss-ink); font-size: 14.5px; font-weight: 600; text-align: left;
}
.ss-filter-group-clear { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--ss-r-sm); background: var(--ss-chip); color: var(--ss-ink-2); }
.ss-filter-group-clear .ss-icon { width: 14px; height: 14px; }
.ss-filter-fold { color: var(--ss-faint); transition: transform .2s ease; display: inline-flex; }
.ss-filter-fold.is-folded { transform: rotate(-90deg); }
.ss-filter-fold .ss-icon { width: 16px; height: 16px; }
.ss-filter-group-body { padding-top: 14px; }
.ss-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-filter-chip {
display: inline-flex; align-items: center; min-height: 32px; padding: 4px 11px; border: 1px solid var(--ss-border); border-radius: var(--ss-r-sm);
background: var(--ss-surface); color: var(--ss-ink); font-size: 13.5px; line-height: 1.25; cursor: pointer; margin: 0;
}
.ss-filter-chip:hover { border-color: var(--ss-dark); }
.ss-filter-chip.is-on { background: var(--ss-dark); border-color: var(--ss-dark); color: #fff; }
.ss-filter-chip:focus-within { outline: 2px solid var(--ss-primary); outline-offset: 2px; }
.ss-filter-ticks { display: flex; flex-direction: column; gap: 10px; max-height: 260px; overflow-y: auto; }
.ss-filter-tick { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--ss-ink); cursor: pointer; }
.ss-filter-tick .form-check-input { margin: 0; flex: none; }
.ss-filter-tick-count { margin-left: auto; font-size: 12.5px; color: var(--ss-faint); font-variant-numeric: tabular-nums; }
.ss-filter-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-filter-color { width: 32px; height: 32px; border-radius: var(--ss-r-sm); box-shadow: inset 0 0 0 1px rgba(29, 31, 32, .14); cursor: pointer; }
.ss-filter-color.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ss-ink); }
/* The price: a thin line with square handles and the two ends under it */
.ss-price-slider-el { margin: 8px 8px 18px; }
.ss-filters .noUi-target { height: 2px; border: 0; border-radius: 0; background: var(--ss-border); box-shadow: none; }
.ss-filters .noUi-connect { background: var(--ss-primary); }
.ss-filters .noUi-handle {
width: 16px !important; height: 16px !important; right: -8px !important; top: -7px !important; border-radius: var(--ss-r-sm);
border: 1px solid var(--ss-primary); background: #fff; box-shadow: none; cursor: grab;
}
.ss-filters .noUi-handle::before, .ss-filters .noUi-handle::after { display: none; }
.ss-filters .noUi-handle:active { cursor: grabbing; background: var(--ss-primary-tint); }
.ss-price-ends { display: flex; align-items: center; gap: 8px; }
.ss-price-end {
flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 36px; padding: 0 10px;
border: 1px solid var(--ss-border); border-radius: var(--ss-r-sm); background: var(--ss-surface); font-size: 13.5px; font-weight: 500;
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ss-price-end small { font-size: 12px; font-weight: 400; color: var(--ss-faint); }
.ss-price-dash { width: 8px; height: 1px; background: var(--ss-border-strong); flex: none; }
/* The phone: the filters slide in from the left */
.ss-filter-toggle-btn {
display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--ss-border);
border-radius: var(--ss-r-sm); background: var(--ss-surface); color: var(--ss-ink); font-size: 13.5px; font-weight: 600;
}
.ss-filter-toggle-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ss-primary); color: var(--ss-on-primary); font-size: 11.5px; line-height: 20px; text-align: center; }
.ss-filter-offcanvas { width: min(340px, 88vw) !important; border: 0 !important; background: var(--ss-bg); }
.ss-filter-offcanvas .offcanvas-header { background: var(--ss-surface); border-bottom: 1px solid var(--ss-line); }
.ss-filter-offcanvas .offcanvas-body { padding: 10px; }
.offcanvas-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1040; background-color: rgba(29, 31, 32, .5); }
/* The sort: a white box with the chosen order */
.ss-modern-sort {
height: 40px; padding: 0 34px 0 12px; border: 1px solid var(--ss-border); border-radius: var(--ss-r-sm); background-color: var(--ss-surface);
color: var(--ss-ink); font-family: var(--ss-font); font-size: 13.5px; font-weight: 500; box-shadow: none; max-width: 100%;
}
.ss-modern-sort:hover { border-color: var(--ss-border-strong); }
.ss-modern-sort:focus { border-color: var(--ss-primary); box-shadow: 0 0 0 3px var(--ss-primary-ring); outline: 0; }
/* The pages (guide 3.10) */
.ss-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 12px 16px; border-radius: var(--ss-r-md); background: var(--ss-surface); }
.ss-pager-info { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ss-muted); font-variant-numeric: tabular-nums; }
.ss-pager-bar { position: relative; width: 120px; height: 3px; border-radius: 2px; background: #e1e1e4; overflow: hidden; }
.ss-pager-bar > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ss-primary); border-radius: 2px; }
.ss-pager-pages { display: flex; align-items: center; gap: 4px; }
.ss-pager-num, .ss-pager-arrow, .ss-pager-gap {
min-width: 38px; height: 38px; display: grid; place-items: center; padding: 0 6px; border-radius: var(--ss-r-md);
color: var(--ss-ink); font-size: 14px; font-weight: 500; text-decoration: none; font-variant-numeric: tabular-nums;
}
.ss-pager-num:hover { background: var(--ss-primary-tint); color: var(--ss-primary-ink); }
.ss-pager-num.is-current { background: var(--ss-primary); color: var(--ss-on-primary); font-weight: 600; }
.ss-pager-arrow:hover { background: var(--ss-primary); color: var(--ss-on-primary); }
.ss-pager-arrow.is-off { color: #c4c4c8; }
.ss-pager-arrow .ss-icon { width: 17px; height: 17px; }
.ss-pager-gap { min-width: 20px; color: var(--ss-faint); }
@media (max-width: 575.98px) {
.ss-pager { justify-content: center; }
.ss-pager-num, .ss-pager-arrow { min-width: 34px; height: 34px; }
}
/* ── The list, round 2: the cards stand on the field (no white box under them); the sort with a word and a chevron ── */
.ss-list-main .ss-products-grid { padding: 0; background: none; box-shadow: none; border: 0; }
.ss-sort { display: inline-flex; align-items: center; height: 40px; border: 1px solid var(--ss-border); border-radius: var(--ss-r-sm); background: var(--ss-surface); }
.ss-sort:hover { border-color: var(--ss-border-strong); }
.ss-sort:focus-within { border-color: var(--ss-primary); box-shadow: 0 0 0 3px var(--ss-primary-ring); }
.ss-sort-label { padding-left: 12px; font-size: 13px; color: var(--ss-muted); white-space: nowrap; }
.ss-sort .ss-modern-sort {
height: 38px; border: 0; padding: 0 32px 0 8px; background: transparent; appearance: none; -webkit-appearance: none; box-shadow: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7a7d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 10px center; background-size: 15px;
}
.ss-sort .ss-modern-sort:focus { box-shadow: none; }
@media (max-width: 575.98px) { .ss-sort-label { display: none; } }
/* ── The list, round 3: the phone (the page title wraps, the filter button and the sort share their own row; two cards a row)
and the last group of the filters without a line under it ── */
.ss-filter-group:last-of-type { border-bottom: 0; }
@media (max-width: 767.98px) {
.ss-sect-title--page { flex-wrap: wrap; row-gap: 12px; }
.ss-sect-title--page .ss-sect-heading { flex: 1 1 auto; white-space: normal; overflow: visible; }
.ss-sect-title--page .ss-sect-actions { flex: 1 1 100%; margin-left: 0; gap: 8px; }
.ss-sect-title--page .ss-sort { flex: 1 1 auto; min-width: 0; }
.ss-sect-title--page .ss-sort .ss-modern-sort { flex: 1 1 auto; min-width: 0; width: 100%; }
}
@media (max-width: 575.98px) {
.ss-list-main .ss-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
/* ── The card, round 2: on a phone the chip of the variants goes under the price when the row is too narrow ── */
@media (max-width: 575.98px) {
.ss-pcard-foot { flex-wrap: wrap; row-gap: 6px; }
.ss-pcard-chip { white-space: normal; }
}
/* ── The product page (the mockup Product) ── */
.breadcrumb-item a.ss-breadcrumb-badge { background: var(--ss-primary); color: var(--ss-on-primary) !important; border: 0; box-shadow: none; border-radius: var(--ss-r-sm); height: 26px; padding: 0 10px; font-weight: 600; }
.breadcrumb-item a.ss-breadcrumb-badge:hover { filter: brightness(.9); background: var(--ss-primary); color: var(--ss-on-primary); }
.ss-breadcrumb-row { display: flex; align-items: center; min-height: 52px; padding: 0; margin: 0; background: none; box-shadow: none; border: 0; }
.ss-product-card-wrapper { margin: 0 0 10px; padding: 16px; border: 0; border-radius: var(--ss-r-md); background: var(--ss-surface); box-shadow: none; }
.ss-pp { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 992px) {
.ss-pp { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: 34px; }
}
/* The gallery: thumbnails in a column on the left, the photo on a soft gradient, the counter and the arrows on it */
.ss-gallery-wrapper { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; }
.ss-gallery-main {
position: relative; aspect-ratio: 1 / 1; margin: 0 !important; border-radius: var(--ss-r-sm); overflow: hidden; animation: none;
background: linear-gradient(180deg, #f7f7f9 0%, #ececef 100%);
}
.ss-gallery-main img.ss-gallery-slide { mix-blend-mode: multiply; cursor: zoom-in; transition: opacity .3s ease; }
.ss-gallery-empty { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ss-faint); }
.ss-gallery-empty .ss-icon { width: 56px; height: 56px; stroke-width: 1.25; }
.ss-gallery-thumbs { display: flex; gap: 8px; margin: 0; overflow-x: auto; scrollbar-width: none; }
.ss-gallery-thumb {
flex: none; width: 64px; height: 64px; border-radius: var(--ss-r-sm); border: 1px solid var(--ss-line); box-shadow: none; overflow: hidden;
background: linear-gradient(180deg, #f7f7f9, #ececef);
}
.ss-gallery-thumb:hover { border-color: var(--ss-border-strong); }
.ss-gallery-thumb.active { border: 1.5px solid var(--ss-ink); box-shadow: none; }
.ss-gallery-thumb img { mix-blend-mode: multiply; }
.ss-gallery-count {
position: absolute; left: 14px; bottom: 14px; z-index: 3; padding: 5px 9px; border-radius: var(--ss-r-sm); background: var(--ss-surface);
font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.ss-gallery-nav { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: flex; gap: 4px; }
.ss-gallery-nav button { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--ss-r-sm); background: var(--ss-surface); color: var(--ss-ink); }
.ss-gallery-nav button:hover { background: var(--ss-primary); color: var(--ss-on-primary); }
.ss-gallery-nav .ss-icon { width: 17px; height: 17px; }
.ss-gallery-wrapper .ss-badges-detail { position: absolute; top: 14px; left: 14px; z-index: 4; display: flex; flex-direction: row; gap: 4px; }
.ss-gallery-wrapper .ss-badge { padding: 5px 7px; border-radius: var(--ss-r-sm); font-size: 12px; font-weight: 600; line-height: 1; text-transform: none; letter-spacing: 0; box-shadow: none; min-width: 0;}
.ss-gallery-wrapper .ss-badge-new { background: var(--ss-surface); color: var(--ss-ink); }
.ss-gallery-wrapper .ss-badge-featured { background: var(--ss-primary); color: var(--ss-on-primary); }
.ss-gallery-wrapper .ss-badge-video-detail { position: absolute; z-index: 4; top: 14px; right: 14px; left: auto; bottom: auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--ss-r-sm); background: var(--ss-dark); color: #fff; }
@media (min-width: 768px) {
.ss-gallery-wrapper:has(.ss-gallery-thumbs) { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
.ss-gallery-wrapper:has(.ss-gallery-thumbs) .ss-gallery-thumbs { grid-column: 1; grid-row: 1; flex-direction: column; overflow: visible; }
.ss-gallery-wrapper:has(.ss-gallery-thumbs) .ss-gallery-main { grid-column: 2; grid-row: 1; }
.ss-gallery-wrapper:has(.ss-gallery-thumbs) .ss-badges-detail { left: 98px; }
.ss-gallery-thumb { width: 72px; height: 72px; }
}
/* The information: the meta above the title, the title, the short text, the key specs */
.ss-pp-info { min-width: 0; padding: 0; }
.ss-buy-panel { padding: 0; background: none; border: 0; box-shadow: none; }
.ss-pp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 4px 0 10px; font-size: 13px; color: var(--ss-muted); }
.ss-pp-meta > * + * { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--ss-border); }
.ss-pp-brand { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ss-primary-ink); text-decoration: none; }
.ss-pp-brand:hover { color: var(--ss-ink); }
.ss-pp-rating { display: inline-flex; align-items: center; gap: 1px; cursor: pointer; color: var(--ss-ink); }
.ss-pp-rating .ss-icon { width: 14px; height: 14px; }
.ss-pp-rating .ss-icon.is-empty { color: #c4c4c8; }
.ss-pp-rating strong { margin-left: 6px; font-weight: 600; color: var(--ss-ink); }
.ss-pp-rating-count { margin-left: 4px; color: var(--ss-muted); }
.ss-pp-meta .ss-share-inline { color: var(--ss-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.ss-product-title-main { margin: 0 0 12px; font-size: clamp(24px, 2.3vw, 32px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; color: var(--ss-ink); }
.ss-short-description { margin: 0 0 18px !important; font-size: 15px; line-height: 1.6; color: var(--ss-muted); }
.ss-short-description > :last-child { margin-bottom: 0; }
.ss-pp-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; margin: 0 0 20px; }
.ss-pp-spec { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px; border-radius: var(--ss-r-sm); background: var(--ss-surface-2); }
.ss-pp-spec span { font-size: 12px; color: var(--ss-muted); }
.ss-pp-spec strong { font-size: 14px; font-weight: 600; color: var(--ss-ink); overflow-wrap: anywhere; }
/* The buy box: the promo line, the price and the stock, then the quantity, the button, the heart and compare */
.ss-pp-buybox { display: flex; flex-direction: column; gap: 14px; margin: 0 0 12px; padding: 16px 18px 18px; border: 1px solid var(--ss-line); border-radius: var(--ss-r-md); background: var(--ss-surface); }
.ss-promo-above { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 !important; font-size: 13px; color: var(--ss-muted); }
.ss-promo-above .text-muted { color: var(--ss-muted) !important; font-size: 13px; }
.ss-promo-above .ss-price-old { font-size: 13px; color: var(--ss-faint); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.ss-price-discount { display: inline-flex; align-items: center; margin: 0 !important; padding: 3px 6px; border-radius: var(--ss-r-sm); background: var(--ss-promo); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.1; box-shadow: none; }
.ss-promo-above-sep { color: #b7b7ba; }
.ss-pp-pricerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ss-buy-prices { display: flex; align-items: center; min-width: 0; }
.ss-pp-buybox .ss-price-main {
display: flex; align-items: flex-start; font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--ss-ink);
font-variant-numeric: tabular-nums; white-space: nowrap; background: none; -webkit-text-fill-color: currentColor;
}
.ss-pp-buybox .ss-price-main.promo { color: var(--ss-promo); }
.ss-pp-cents { margin-left: 2px; padding-top: 4px; font-size: 16px; letter-spacing: 0; }
.ss-pp-buybox .ss-price-main.secondary { font-size: 22px; color: var(--ss-ink-2); }
.ss-price-separator { display: none; }
#ss-price-inquiry { display: flex; align-items: baseline; gap: 8px; }
#ss-price-inquiry .ss-price-main { font-size: 26px; }
.ss-stock-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 0; border-radius: var(--ss-r-sm); font-size: 13px; font-weight: 600; box-shadow: none; }
.ss-stock-badge .ss-icon { display: none; }
.ss-stock-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.ss-stock-badge.in-stock { background: var(--ss-ok-bg); color: var(--ss-ok); }
.ss-stock-badge.in-stock::before { background: var(--ss-ok-dot); }
.ss-stock-badge.low-stock { background: #fdf3e2; color: #8a4f06; }
.ss-stock-badge.out-of-stock { background: var(--ss-chip); color: var(--ss-ink-2); }
.ss-stock-badge.inquiry { background: var(--ss-bad-bg); color: var(--ss-bad-ink); }
.ss-pp-actions { display: flex; align-items: stretch; gap: 8px; }
.ss-pp-buy { display: flex; flex: 1 1 auto; gap: 8px; min-width: 0; }
.ss-pp-qty { display: flex; align-items: stretch; flex: none; height: 52px; border: 1px solid var(--ss-border); border-radius: var(--ss-r-md); background: var(--ss-surface); }
.ss-pp-qty button { width: 38px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ss-ink); }
.ss-pp-qty button:hover { background: var(--ss-chip); }
.ss-pp-qty .ss-icon { width: 15px; height: 15px; }
.ss-pp-qty input { width: 40px; border: 0; padding: 0; text-align: center; font-size: 16px; font-weight: 600; color: var(--ss-ink); background: none; -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
.ss-pp-qty input::-webkit-outer-spin-button, .ss-pp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ss-pp-qty input:focus { outline: 0; }
.ss-pp-buybox .ss-buy-btn {
flex: 1 1 auto; min-width: 0; height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 18px;
border: 0; border-radius: var(--ss-r-md); background: var(--ss-primary); color: var(--ss-on-primary); font-size: 16px; font-weight: 600; text-decoration: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); transform: none; animation: none; white-space: nowrap;
}
.ss-pp-buybox .ss-buy-btn:hover { filter: brightness(.92); color: var(--ss-on-primary); transform: none; background: var(--ss-primary); }
.ss-pp-buybox .ss-buy-btn > span { display: inline-flex; align-items: center; gap: 10px; }
.ss-pp-buybox .ss-buy-btn .ss-icon { width: 20px; height: 20px; }
.ss-pp-buybox .ss-buy-btn--call { background: var(--ss-dark); }
.ss-pp-buybox .ss-buy-btn--call:hover { background: var(--ss-primary-ink); filter: none; }
.palette-red .ss-pp-buybox .ss-buy-btn:not(.ss-buy-btn--call) { background: var(--ss-primary); }
.ss-pp-icon-btn {
flex: none; width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 1px solid var(--ss-border);
border-radius: var(--ss-r-md); background: var(--ss-surface); color: var(--ss-ink); box-shadow: none; position: static;
}
.ss-pp-icon-btn:hover { border-color: var(--ss-dark); color: var(--ss-ink); background: var(--ss-surface); }
.ss-pp-icon-btn .ss-icon { width: 20px; height: 20px; }
.ss-pp-icon-btn.active, .ss-pp-icon-btn.active:hover { color: var(--ss-bad); border-color: #e4b3b3; }
.ss-pp-icon-btn.active .ss-icon { fill: currentColor; }
@media (max-width: 575.98px) {
.ss-pp-actions { flex-wrap: wrap; }
.ss-pp-buy { flex: 1 1 100%; }
.ss-pp-icon-btn { flex: 1 1 0; }
.ss-pp-buybox .ss-price-main { font-size: 34px; }
}
/* Delivery: a list box under the buy box (the timer, free delivery as a dark chip) */
.ss-delivery-timer-box {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px !important; padding: 13px 16px;
border: 1px solid var(--ss-line); border-radius: var(--ss-r-md); background: var(--ss-surface); color: var(--ss-ink-2); font-size: 14px; animation: none; box-shadow: none;
}
.ss-delivery-timer-inner { display: flex; align-items: center; gap: 10px; color: var(--ss-ink-2); font-weight: 400; }
.ss-delivery-timer-inner .ss-icon { width: 18px; height: 18px; color: var(--ss-ink); }
.ss-delivery-timer-inner strong, .ss-delivery-timer-inner b { color: var(--ss-ink); font-weight: 600; }
.ss-delivery-timer-free { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: var(--ss-r-sm); background: var(--ss-dark); color: #fff; font-size: 12.5px; font-weight: 600; border: 0; }
.ss-delivery-timer-free .ss-icon { width: 14px; height: 14px; }
.ss-delivery-timer-free--standalone { background: var(--ss-dark); }
/* The fast order: a grey panel, three fields and a dark button, the phone and the instalments under them */
.ss-fast-order-panel { margin: 0 0 12px !important; padding: 16px 18px; border: 0; border-radius: var(--ss-r-md); background: var(--ss-surface-2); box-shadow: none; }
.ss-fast-order-title { margin: 0 0 12px; font-size: 14.5px; font-weight: 600; color: var(--ss-ink); }
.ss-fast-order-title::before, .ss-fast-order-title i { display: none; }
.ss-fast-order-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; }
.ss-fast-order-col { min-width: 0; }
.ss-fast-order-form .form-control { height: 44px; min-height: 44px; }
.ss-fast-order-btn { height: 44px; min-height: 44px; padding: 0 22px; border: 0; border-radius: var(--ss-r-md); background: var(--ss-dark); color: #fff; font-weight: 600; }
.ss-fast-order-btn:hover { background: var(--ss-primary-ink); color: #fff; }
.ss-fast-order-phone { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding-top: 0; border: 0; }
.ss-fast-order-phone-number { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--ss-ink); text-decoration: none; }
.ss-fast-order-phone-number > span { font-size: 15px; }
.ss-fast-order-phone-text { font-size: 13px; line-height: 1.4; color: var(--ss-muted); }
.ss-fast-order-phone-text .text-danger { color: var(--ss-ink) !important; }
.ss-fast-order-phone-extra { display: none; }
@media (max-width: 767.98px) {
.ss-fast-order-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ss-fast-order-col--btn { grid-column: 1 / -1; }
.ss-fast-order-btn { width: 100%; }
}
/* The anchors of the page, the description and the specs side by side, the video */
/* The tabs (the canvas the owner approved, 23.10): a white bar with icons, the part in view dark over a line in the
palette; stuck under the header it spans the width and carries the price and the cart button of the buy box */
.ss-pp-tabs-mark { display: block; height: 0; }
/* a tab's part comes out under the header and the stuck bar, with the tab already marked */
#description, #specifications, #video, #reviews-section { scroll-margin-top: 130px; }
@media (min-width: 768px) { #description, #specifications, #video, #reviews-section { scroll-margin-top: 150px; } }
.ss-pp-tabs {
position: sticky; top: var(--ss-pp-tabs-top, 0px); z-index: 30; display: flex; align-items: stretch; gap: 16px; min-height: 56px; margin: 0 0 10px;
padding: 0 8px; border: 0; border-radius: var(--ss-r-md); background: #fff; box-shadow: 0 0 0 1px rgba(29, 31, 32, .05);
}
.ss-pp-tabs.is-stuck { border-radius: 0; box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax -1px); }
.ss-pp-tabs.is-stuck::after { content: ""; position: absolute; left: -100vmax; right: -100vmax; bottom: -1px; height: 1px; background: var(--ss-line); }
.ss-pp-tabs-links { display: flex; align-items: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ss-pp-tabs a {
position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border: 0; font-size: 14.5px; font-weight: 500;
color: var(--ss-muted); text-decoration: none; white-space: nowrap; transition: color .15s ease;
}
.ss-pp-tabs a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; background: var(--ss-primary); transform: scaleX(0); transition: transform .2s ease; }
.ss-pp-tabs a:hover { color: var(--ss-ink); }
.ss-pp-tabs a.is-active { color: var(--ss-ink); }
.ss-pp-tabs a.is-active::after { transform: scaleX(1); }
.ss-pp-tabs a .ss-icon { flex: none; width: 17px; height: 17px; }
.ss-pp-tabs-count {
min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0 6px; box-sizing: border-box; border-radius: var(--ss-r-sm);
background: var(--ss-bg); color: var(--ss-ink-2); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.ss-pp-tabs-buy { display: flex; align-items: center; gap: 14px; margin-left: auto; padding: 8px 0; min-width: 0; }
.ss-pp-tabs-buy img { width: 40px; height: 40px; flex: none; object-fit: contain; border-radius: var(--ss-r-sm); background: linear-gradient(180deg, #f7f7f9, #ececef); mix-blend-mode: multiply; }
.ss-pp-tabs-buy-text { display: flex; flex-direction: column; min-width: 0; max-width: 260px; line-height: 1.2; }
.ss-pp-tabs-buy-title { font-size: 13px; font-weight: 500; color: var(--ss-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-pp-tabs-buy-prices { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.ss-pp-tabs-buy-prices strong { font-size: 16px; font-weight: 600; color: var(--ss-ink); }
.ss-pp-tabs-buy-prices strong.is-promo { color: var(--ss-price-promo); }
.ss-pp-tabs-buy-prices span { font-size: 12.5px; color: var(--ss-faint); text-decoration: line-through; }
.ss-pp-tabs-buy-btn {
flex: none; height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border: 0; border-radius: var(--ss-r-md);
background: var(--ss-primary); color: var(--ss-on-primary); font-size: 14px; font-weight: 500; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.ss-pp-tabs-buy-btn:hover { background: var(--ss-primary-hover); color: var(--ss-on-primary); }
.ss-pp-tabs-buy-btn .ss-icon { width: 17px; height: 17px; }
@media (max-width: 991.98px) { .ss-pp-tabs-buy { display: none !important; } }
@media (max-width: 767.98px) {
/* the phone: no icons, 15 px, the row slides */
.ss-pp-tabs { min-height: 52px; padding: 0 4px; }
.ss-pp-tabs a { padding: 0 12px; font-size: 15px; }
.ss-pp-tabs a::after { left: 12px; right: 12px; }
.ss-pp-tabs a > .ss-icon { display: none; }
}
.ss-pp-docs { display: grid; gap: 10px; margin-bottom: 10px; }
@media (min-width: 992px) { .ss-pp-docs.is-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.ss-panel.ss-pp-doc { padding: 18px 16px; margin: 0 0 10px; }
.ss-pp-docs > .ss-pp-doc { margin: 0; }
@media (min-width: 768px) { .ss-panel.ss-pp-doc { padding: 22px 24px 24px; } }
.ss-pp-doc-sub { margin: 0 0 12px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.ss-pp-doc-body { font-size: 15px; line-height: 1.65; color: var(--ss-ink-2); overflow-wrap: anywhere; }
.ss-pp-doc-body img { max-width: 100%; height: auto; border-radius: var(--ss-r-sm); }
.ss-pp-doc-body > :last-child { margin-bottom: 0; }
.ss-specs-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ss-specs-table tr { background: none !important; }
.ss-specs-table td { padding: 11px 2px; border-top: 1px solid var(--ss-line); vertical-align: top; background: none; }
.ss-specs-table td:first-child { width: 40%; padding-right: 16px; color: var(--ss-muted); font-weight: 400; }
.ss-specs-table td:last-child { color: var(--ss-ink); }
.ss-video-container lite-youtube { border-radius: var(--ss-r-sm); overflow: hidden; max-width: 100%; }
/* Reviews, the question, recently viewed */
.ss-panel.ss-pp-reviews { padding: 18px 16px; margin: 12px 0 10px; }
@media (min-width: 768px) { .ss-panel.ss-pp-reviews { padding: 22px 24px 24px; } }
.ss-product-question-section { margin: 0 0 10px; }
.ss-panel.ss-pp-recent { padding: 18px 16px; margin: 12px 0 10px; }
@media (min-width: 768px) { .ss-panel.ss-pp-recent { padding: 22px 24px; } }
.ss-pp-recent-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 20px; }
.ss-pp-recent-item { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ss-ink); text-decoration: none; }
.ss-pp-recent-item:hover { color: var(--ss-primary-ink); }
.ss-pp-recent-img { flex: none; width: 56px; height: 56px; border-radius: var(--ss-r-sm); overflow: hidden; background: linear-gradient(180deg, #f7f7f9, #ececef); }
.ss-pp-recent-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ss-pp-recent-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-pp-recent-title { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-pp-recent-text strong { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ss-ink); }
/* The connected products (and the bought together): a row of small cards; the cart button stays where the block had it */
.ss-connected { margin: 12px 0 10px; padding-top: 0; }
.ss-connected .ss-sect-title { margin-bottom: 14px; }
.ss-connected-list {
display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 0 24px; margin: -4px 0 -24px;
background: none; border: 0; box-shadow: none; border-radius: 0;
}
.ss-connected-list::-webkit-scrollbar { display: none; }
.ss-connected-item {
position: relative; flex: 0 0 calc((100% - 40px) / 5); min-width: 200px; scroll-snap-align: start; display: flex; flex-direction: column;
padding: 10px; border: 0 !important; border-radius: var(--ss-r-md); background: var(--ss-surface); box-shadow: 0 0 0 1px rgba(29, 31, 32, .05);
transition: box-shadow .3s ease, transform .3s ease;
}
.ss-connected-item:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -22px rgba(29, 31, 32, .38), 0 0 0 1px rgba(29, 31, 32, .08); background: var(--ss-surface); }
.ss-connected-content { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; color: var(--ss-ink); text-decoration: none; }
.ss-connected-thumb { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: contain; border-radius: var(--ss-r-sm); border: 0; background: linear-gradient(180deg, #f7f7f9, #ececef); mix-blend-mode: multiply; }
.ss-connected-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 4px 2px 0; }
.ss-connected-title-row { display: flex; align-items: flex-start; gap: 6px; }
.ss-connected-title { font-size: 13.5px; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-connected-code { font-size: 12px; color: var(--ss-faint); }
.ss-connected-price { display: flex; flex-direction: column; margin-top: auto; padding: 6px 2px 0; padding-right: 44px; min-height: 40px; justify-content: flex-end; text-align: left; }
.ss-connected-price .ss-price-old { font-size: 12px; color: var(--ss-faint); text-decoration: line-through; }
.ss-connected-price .ss-price-eur { font-size: 17px; font-weight: 600; color: var(--ss-ink); }
.ss-connected-price .ss-price-eur.promo { color: var(--ss-promo); }
.ss-connected-action { position: absolute; right: 12px; bottom: 12px; }
.ss-connected-action .ss-action-btn, .ss-connected-action .ss-action-btn-call {
width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: var(--ss-r-sm); background: var(--ss-primary); color: var(--ss-on-primary); box-shadow: none;
}
.ss-connected-action .ss-action-btn-call { background: var(--ss-dark); }
.ss-connected-action .ss-action-btn:hover { filter: brightness(.9); color: #fff; }
.ss-connected-action .ss-icon { width: 16px; height: 16px; }
@media (max-width: 575.98px) { .ss-connected-item { flex-basis: 62%; min-width: 0; } }
/* ── The product page, round 2: the price in its full size (the base's single-price rule is stronger), the variants ── */
body .ss-pp-buybox .ss-price-main { font-size: 40px; margin: 0; }
body .ss-connected-price .ss-price-eur { font-size: 17px; }
@media (max-width: 575.98px) { body .ss-pp-buybox .ss-price-main { font-size: 34px; } }
.product-variants { margin: 0 0 18px !important; }
.product-variants > .mb-3 { margin-bottom: 16px !important; }
.product-variants > .mb-3:last-child { margin-bottom: 0 !important; }
.ss-variant-label { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 500; color: var(--ss-muted); }
.ss-variant-options { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-variant-swatch {
width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--ss-r-sm); cursor: pointer;
box-shadow: inset 0 0 0 1px rgba(29, 31, 32, .14); transition: box-shadow .15s ease;
}
.ss-variant-swatch.is-selected { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ss-ink); }
.ss-variant-pill {
display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-width: 120px; min-height: 52px;
padding: 8px 14px; border: 1px solid var(--ss-border); border-radius: var(--ss-r-sm); background: var(--ss-surface); color: var(--ss-ink);
text-align: left; box-shadow: none; transform: none; font-weight: 400;
}
.ss-variant-pill:hover:not(.disabled) { border-color: var(--ss-dark); background: var(--ss-surface); color: var(--ss-ink); transform: none; }
.ss-variant-pill.active, .ss-variant-pill.active:hover { border-color: var(--ss-ink); box-shadow: inset 0 0 0 0.5px var(--ss-ink); background: var(--ss-surface); color: var(--ss-ink); }
.ss-variant-pill-name { font-size: 14px; font-weight: 600; line-height: 1.25; }
.ss-variant-pill-price { font-size: 12.5px; color: var(--ss-muted); font-variant-numeric: tabular-nums; }
.ss-variant-pill.oos .ss-variant-pill-name { color: var(--ss-faint); }
.ss-variant-pill.disabled { opacity: .5; cursor: not-allowed; }
.ss-breadcrumb-row { min-height: 52px; }
/* ── The product page, round 3: the reviews (summary left, the list right), the question box, the connected cards ── */
.ss-reviews { display: grid; gap: 20px; }
.ss-reviews-summary { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ss-reviews-summary-left { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; justify-items: start; text-align: left; padding: 0; border: 0; background: none; }
.ss-reviews-avg { grid-row: 1 / span 2; font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: var(--ss-ink); background: none; -webkit-text-fill-color: currentColor; }
.ss-reviews-stars { display: flex; gap: 1px; color: var(--ss-ink); }
.ss-reviews-stars .ss-icon { width: 15px; height: 15px; }
.ss-reviews-stars .ss-icon:not(.is-filled) { color: #c4c4c8; }
.ss-reviews-count { font-size: 12.5px; color: var(--ss-muted); text-transform: none; letter-spacing: 0; font-weight: 400; }
.ss-reviews-summary-right { display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; }
.ss-reviews-bar-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) 28px; align-items: center; gap: 12px; }
.ss-reviews-bar-label { font-size: 12.5px; font-weight: 600; color: var(--ss-ink); }
.ss-reviews-bar-label .ss-icon { display: none; }
.ss-reviews-bar { height: 4px; border-radius: 2px; background: var(--ss-line); overflow: hidden; }
.ss-reviews-bar-fill { height: 100%; border-radius: 2px; background: var(--ss-dark) !important; }
.ss-reviews-bar-count { font-size: 12.5px; color: var(--ss-muted); text-align: right; font-variant-numeric: tabular-nums; }
.ss-reviews-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 0 0 4px; padding: 0; border: 0; background: none; }
.ss-reviews-toolbar-label { font-size: 12.5px; color: var(--ss-muted); text-transform: none; letter-spacing: 0; font-weight: 400; }
.ss-reviews-list { display: flex; flex-direction: column; gap: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.ss-review { padding: 16px 0; margin: 0; border: 0; border-top: 1px solid var(--ss-line); border-radius: 0; background: none; box-shadow: none; }
.ss-review:hover { background: none; box-shadow: none; transform: none; }
.ss-review-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ss-review-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--ss-r-sm); background: var(--ss-chip); color: var(--ss-ink); font-size: 11.5px; font-weight: 600; box-shadow: none; }
.ss-review-author-details { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ss-review-author { font-size: 14px; font-weight: 600; color: var(--ss-ink); }
.ss-review-date { font-size: 12.5px; color: var(--ss-muted); }
.ss-review-meta-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ss-review-stars { font-size: 12.5px; font-weight: 600; color: var(--ss-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ss-review-verified { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: var(--ss-r-sm); background: var(--ss-ok-bg); color: var(--ss-ok); font-size: 11.5px; font-weight: 600; border: 0; }
.ss-review-verified .ss-icon { width: 12px; height: 12px; }
.ss-review-variant { padding: 3px 7px; border-radius: var(--ss-r-sm); background: var(--ss-chip); font-size: 11.5px; color: var(--ss-ink-2); }
.ss-review-title { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--ss-ink); }
.ss-review-content { font-size: 14px; line-height: 1.6; color: var(--ss-ink-2); }
.ss-reviews-load-more { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border: 1px solid var(--ss-dark); border-radius: var(--ss-r-md); background: var(--ss-surface); color: var(--ss-ink); font-weight: 600; }
.ss-reviews-load-more:hover { background: var(--ss-dark); color: #fff; }
.ss-reviews-load-more-wrap { text-align: left; margin-top: 8px; }
.ss-review-login { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 16px; border: 0; border-radius: var(--ss-r-md); background: var(--ss-surface-2); color: var(--ss-ink-2); font-size: 14px; box-shadow: none; }
.ss-review-login .ss-icon { width: 18px; height: 18px; }
.ss-review-login-link { color: var(--ss-primary-ink); font-weight: 600; }
.ss-review-form, .ss-review-status { margin: 0; padding: 18px; border: 0; border-radius: var(--ss-r-md); background: var(--ss-surface-2); box-shadow: none; }
.ss-review-form-title { font-size: 16px; font-weight: 600; }
.ss-reviews-empty { padding: 28px 16px; text-align: center; color: var(--ss-muted); background: none; border: 0; }
.ss-reviews-empty-icon { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: var(--ss-r-md); background: var(--ss-chip); color: var(--ss-ink-2); }
.ss-reviews-empty .h4 { font-size: 18px; font-weight: 600; color: var(--ss-ink); }
/* The question: an icon in a grey square, the question and its line, a button that opens the form */
.ss-question { border: 0 !important; border-radius: var(--ss-r-md) !important; background: var(--ss-surface); box-shadow: none !important; overflow: hidden; }
.ss-question-head { display: flex; align-items: center; gap: 14px; padding: 18px 16px; }
.ss-question-icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--ss-r-md); background: var(--ss-chip); color: var(--ss-ink); }
.ss-question-icon .ss-icon { width: 22px; height: 22px; }
.ss-question-text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.ss-question-text strong { font-size: 15px; font-weight: 600; color: var(--ss-ink); }
.ss-question-text > span { font-size: 13px; color: var(--ss-muted); }
.ss-question-btn { flex: none; min-height: 42px; }
.ss-question-chevron { width: 15px; height: 15px; transition: transform .2s; }
.ss-question-chevron.is-open { transform: rotate(180deg); }
.ss-question .card-body { padding: 0 16px 18px; }
@media (min-width: 768px) { .ss-question-head { padding: 18px 24px; } .ss-question .card-body { padding: 0 24px 22px; } }
@media (max-width: 575.98px) { .ss-question-head { flex-wrap: wrap; } .ss-question-btn { flex: 1 1 100%; } }
/* The connected cards, round 2: the photo fills the card, the price on the left */
.ss-connected-thumb { max-width: none !important; max-height: none !important; display: block; }
.ss-connected-price { align-items: flex-start; text-align: left !important; }
/* ── The product page, round 4: the row of the breadcrumbs in the container (the base pulled it 25 px out on both sides) ── */
.ss-breadcrumb-row { position: static; left: auto; width: auto; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
/* ── The product page, round 5: the cards of the connected stretch their parts; the bars of the reviews; the phone ── */
.ss-connected-content { align-items: stretch; gap: 6px; }
.ss-connected-price { min-width: 0; align-items: flex-start; }
.ss-reviews-bar-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) 28px; gap: 12px; }
.ss-reviews-bar-label { min-width: 0; width: auto; justify-content: flex-start; font-size: 12.5px; color: var(--ss-ink); }
.ss-reviews-bar { flex: none; width: 100%; }
@media (max-width: 767.98px) {
.ss-product-card-wrapper { padding: 12px; }
.ss-pp-meta { gap: 6px 12px; }
.ss-pp-meta > * + * { margin-left: 0; padding-left: 0; border-left: 0; }
.ss-pp-pricerow { flex-direction: row; align-items: center; }
.ss-pp-pricerow .ss-buy-prices { width: auto; text-align: left; align-items: flex-start; }
.ss-pp-buybox { padding: 14px; }
.ss-pp-buybox #ss-buy-btn-wrap, .ss-pp-buybox #ss-call-btn-wrap { width: auto; justify-content: flex-start; }
.ss-pp-qty button { width: 34px; }
.ss-pp-qty input { width: 34px; }
.ss-pp-buybox .ss-buy-btn { padding: 0 12px; font-size: 15px; }
.ss-pp-buybox .ss-buy-btn #ss-buy-btn-wrap .ss-icon, .ss-pp-buybox .ss-buy-btn > span > .ss-icon { display: none; }
.ss-delivery-timer-box, .ss-delivery-timer-inner { text-align: left; justify-content: flex-start; }
}
@media (max-width: 575.98px) {
.ss-pp-icon-btn { flex: none; }
}
/* ── The product page, round 6: the stock stays on the right of the price on a phone too ── */
.ss-pp-pricerow .ss-buy-stock { width: auto; margin-left: auto; text-align: right; display: flex; justify-content: flex-end; }
/* ── The cart (the mockup Cart): the head with the steps, the nudge, the lines as a table, the summary on the right ── */
.ss-order-layout { background: transparent; padding: 16px 0 32px; min-height: 0; }
.ss-cart { display: flex; flex-direction: column; gap: 12px; }
.ss-cart .ss-page-head { margin: 0; }
.ss-cart-grid { display: grid; gap: 16px; align-items: start; }
@media (min-width: 992px) { .ss-cart-grid { grid-template-columns: minmax(0, 1fr) 380px; } .ss-cart-side { position: sticky; top: 132px; } }
/* The steps (guide 3.9) */
.ss-steps { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.ss-step { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ss-muted); white-space: nowrap; }
.ss-step + .ss-step::before { content: ""; width: 32px; height: 1px; margin: 0 10px; background: var(--ss-border); }
.ss-step-mark { width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--ss-r-sm); background: var(--ss-chip); color: var(--ss-muted); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ss-step.is-current { color: var(--ss-ink); font-weight: 600; }
.ss-step.is-current .ss-step-mark { background: var(--ss-dark); color: #fff; }
.ss-step.is-done { color: var(--ss-ink); }
.ss-step.is-done .ss-step-mark { background: var(--ss-primary); color: var(--ss-on-primary); }
.ss-step-mark .ss-icon { width: 14px; height: 14px; stroke-width: 2; }
@media (max-width: 767.98px) { .ss-step-label { display: none; } .ss-step.is-current .ss-step-label { display: inline; } .ss-step + .ss-step::before { width: 16px; margin: 0 6px; } }
/* The nudge to register: a light panel in the accent, the three reasons in a row, two buttons */
.ss-reg-nudge { margin: 0; padding: 16px 20px; border: 1px solid color-mix(in srgb, var(--ss-primary) 18%, var(--ss-line)); border-radius: var(--ss-r-md); background: var(--ss-primary-tint); }
.ss-reg-nudge-content { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.ss-reg-nudge-title { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 15px; font-weight: 600; color: var(--ss-primary-ink); }
.ss-reg-nudge-title .ss-icon { width: 18px; height: 18px; }
.ss-reg-nudge-list { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--ss-ink-2); }
.ss-reg-nudge-actions { display: flex; gap: 8px; }
.ss-reg-nudge-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: var(--ss-r-md); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ss-reg-nudge-btn-primary { background: var(--ss-primary); color: var(--ss-on-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
.ss-reg-nudge-btn-primary:hover { filter: brightness(.92); color: #fff; }
.ss-reg-nudge-btn-outline { border: 1px solid var(--ss-border); background: var(--ss-surface); color: var(--ss-ink); }
.ss-reg-nudge-btn-outline:hover { border-color: var(--ss-dark); color: var(--ss-ink); }
/* The lines */
.ss-cart-alert { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--ss-r-md); background: #fdf3e2; color: #8a4f06; font-size: 14px; }
.ss-panel.ss-cart-lines { padding: 0; overflow: hidden; }
.ss-cart-thead, .ss-cart-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) 140px 110px 36px; align-items: center; column-gap: 16px; padding: 0 22px; }
.ss-cart-thead { min-height: 44px; border-bottom: 1px solid var(--ss-line); font-size: 12.5px; color: var(--ss-muted); }
.ss-cart-thead > span:first-child { grid-column: 1 / span 2; }
.ss-cart-thead > span:nth-child(3) { text-align: center; }
.ss-cart-thead > span:nth-child(4) { text-align: right; }
.ss-cart-item { padding-top: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--ss-line); background: none; border-radius: 0; box-shadow: none; margin: 0; }
.ss-cart-item.is-unavailable { opacity: .55; }
.ss-cart-item-image { width: 96px; height: 96px; display: block; border-radius: var(--ss-r-sm); overflow: hidden; background: linear-gradient(180deg, #f7f7f9, #ececef); }
.ss-cart-item-image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ss-cart-item-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ss-cart-item-title { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ss-ink); text-decoration: none; }
.ss-cart-item-title:hover { color: var(--ss-primary-ink); }
.ss-cart-item-meta { display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 12.5px; color: var(--ss-muted); }
.ss-cart-item-meta > span + span::before { content: "·"; margin: 0 6px; color: var(--ss-faint); }
.ss-cart-item-meta > span[style*="display: none"] + span::before { content: none; }
.ss-cart-item-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 4px; font-size: 13px; }
.ss-cart-unavailable { display: inline-flex; align-items: center; gap: 6px; color: var(--ss-bad-ink); }
.ss-cart-unavailable .ss-icon { width: 14px; height: 14px; }
.ss-cart-wishlist-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ss-ink-2); font-size: 13px; position: static; width: auto; height: auto; box-shadow: none; }
.ss-cart-wishlist-btn:hover { color: var(--ss-bad); }
.ss-cart-wishlist-btn .ss-icon { width: 15px; height: 15px; }
.ss-cart-item-qty { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ss-qty-control { display: flex; align-items: stretch; height: 42px; border: 1px solid var(--ss-border); border-radius: var(--ss-r-sm); background: var(--ss-surface); overflow: hidden; }
.ss-qty-control button { width: 38px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ss-ink); }
.ss-qty-control button:hover { background: var(--ss-chip); }
.ss-qty-control .ss-icon { width: 14px; height: 14px; }
.ss-qty-control input { width: 44px; border: 0; padding: 0; text-align: center; font-size: 15px; font-weight: 600; background: none; -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; }
.ss-qty-control input.is-invalid { color: var(--ss-bad); }
.ss-cart-item-warn { display: inline-flex; gap: 5px; font-size: 12px; line-height: 1.3; color: #8a4f06; text-align: center; }
.ss-cart-item-price { text-align: right; }
.ss-cart-item-price .ss-price-eur { font-size: 17px; font-weight: 600; color: var(--ss-ink); white-space: nowrap; }
.ss-cart-item-remove { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--ss-r-sm); background: none; color: var(--ss-faint); }
.ss-cart-item-remove:hover { background: var(--ss-bad-bg); color: var(--ss-bad); }
.ss-cart-item-remove .ss-icon { width: 16px; height: 16px; }
.ss-cart-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; background: var(--ss-surface-2); }
.ss-cart-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ss-ink); text-decoration: none; }
.ss-cart-back:hover { color: var(--ss-primary-ink); }
.ss-cart-back .ss-icon { width: 16px; height: 16px; }
.ss-cart-clear { padding: 0; border: 0; background: none; color: var(--ss-muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.ss-cart-clear:hover { color: var(--ss-bad); }
@media (max-width: 767.98px) {
.ss-cart-thead { display: none; }
.ss-cart-item { grid-template-columns: 72px minmax(0, 1fr) 32px; grid-template-areas: "img info remove" "img qty price"; row-gap: 10px; column-gap: 12px; padding: 14px; }
.ss-cart-item-image { grid-area: img; width: 72px; height: 72px; align-self: start; }
.ss-cart-item-info { grid-area: info; }
.ss-cart-item-qty { grid-area: qty; align-items: flex-start; }
.ss-cart-item-price { grid-area: price; align-self: center; }
.ss-cart-item-remove { grid-area: remove; align-self: start; }
.ss-cart-foot { padding: 12px 14px; }
}
/* The summary */
.ss-panel.ss-order-summary { padding: 20px; border: 0; box-shadow: none; }
.ss-summary-title { margin: 0 0 14px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.ss-summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; color: var(--ss-muted); font-variant-numeric: tabular-nums; }
.ss-summary-row > :last-child { color: var(--ss-ink); }
.ss-summary-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 14px 0 18px; padding-top: 16px; border-top: 1px solid var(--ss-line); }
.ss-summary-total > span { font-size: 14px; font-weight: 600; color: var(--ss-ink); }
.ss-summary-total .ss-price-eur { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; color: var(--ss-ink); }
.ss-summary-cta { width: 100%; min-height: 56px; font-size: 16px; gap: 10px; }
.ss-summary-cta .ss-icon { width: 18px; height: 18px; }
.ss-cart-empty { max-width: 640px; margin: 24px auto; }
/* ── The cart, round 2: on a phone the last column takes the width of the price ── */
@media (max-width: 767.98px) {
.ss-cart-item { grid-template-columns: 72px minmax(0, 1fr) auto; }
.ss-cart-item-remove { justify-self: end; }
}
/* ── The checkout (the mockup Checkout) and the short head of the order pages (guide 4) ── */
.ss-co-header { position: relative; background: var(--ss-surface); border-bottom: 1px solid var(--ss-line); }
.ss-co-header-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; max-width: 1280px; }
.ss-co-header .ss-logo img { max-height: 40px; width: auto; }
.ss-co-header .ss-logo .fw-bold { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.04em; color: var(--ss-ink); }
.ss-co-header-phone { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--ss-ink); text-decoration: none; white-space: nowrap; }
.ss-co-header-phone .ss-icon { width: 16px; height: 16px; }
.ss-co-header-bar { position: absolute; left: 0; bottom: -1px; height: 3px; width: 33%; background: var(--ss-primary); }
.ss-co-header-bar.is-step-2 { width: 60%; }
.ss-co-header-bar.is-step-3 { width: 100%; }
@media (max-width: 767.98px) { .ss-co-header-phone { font-size: 0; gap: 0; } .ss-co-header-phone .ss-icon { width: 20px; height: 20px; } }
.ss-footer--bottom-only { margin-top: 32px; padding-top: 0; }
.ss-footer--bottom-only .ss-footer-bottom { margin-top: 0; border-top: 0; }
.ss-co > .container { max-width: 1280px; }
.ss-co-head { margin-bottom: 12px; }
.ss-co-head-sub { flex: none; font-size: 14px; color: var(--ss-muted); }
@media (max-width: 767.98px) { .ss-co-head-sub { flex: 1 1 100%; } }
.ss-co-grid { display: grid; gap: 16px; align-items: start; }
@media (min-width: 992px) { .ss-co-grid { grid-template-columns: minmax(0, 1fr) 400px; } .ss-co-side { position: sticky; top: 24px; } }
/* The sections: a white panel, a grey square with the icon, the title, the line with the plus */
.ss-co .ss-order-panel { margin: 0 0 12px; border: 0; border-radius: var(--ss-r-md); background: var(--ss-surface); box-shadow: none; overflow: visible; }
.ss-co .ss-order-panel-header { display: flex; align-items: center; gap: 14px; padding: 22px 24px 4px; border: 0; background: none; }
.ss-co .ss-order-panel-header > .ss-icon { width: 34px; height: 34px; padding: 8px; border-radius: var(--ss-r-sm); background: var(--ss-chip); color: var(--ss-ink); flex: none; }
.ss-co .ss-order-panel-header h5 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.ss-co .ss-order-panel-header::after {
content: ""; flex: 1 1 auto; min-width: 24px; height: 11px; margin-left: 6px;
background: linear-gradient(#c4c4c8, #c4c4c8) left center / 100% 1px no-repeat,
linear-gradient(var(--ss-ink), var(--ss-ink)) right center / 11px 1px no-repeat,
linear-gradient(var(--ss-ink), var(--ss-ink)) right 5px center / 1px 11px no-repeat;
}
.ss-co .ss-order-panel-body { padding: 18px 24px 24px; }
@media (max-width: 575.98px) { .ss-co .ss-order-panel-header { padding: 18px 16px 2px; } .ss-co .ss-order-panel-body { padding: 14px 16px 18px; } .ss-co .ss-order-panel-header h5 { font-size: 18px; } }
/* The choice cards: the couriers as one row of tabs, the ways of delivery as rows, the invoice as two radio cards */
.ss-co .ss-delivery-card {
position: relative; height: 100%; border: 1px solid var(--ss-border); border-radius: var(--ss-r-sm); background: var(--ss-surface);
box-shadow: none; transform: none; cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease;
}
.ss-co .ss-delivery-card:hover { border-color: var(--ss-border-strong); transform: none; box-shadow: none; }
.ss-co .ss-delivery-card.active { background: var(--ss-primary-tint); border-color: var(--ss-primary); box-shadow: inset 0 0 0 0.5px var(--ss-primary); }
.ss-co-couriers { --bs-gutter-x: 0; --bs-gutter-y: 0; margin: 0 0 16px; border: 1px solid var(--ss-border); border-radius: var(--ss-r-md); overflow: hidden; }
.ss-co-couriers > .col + .col { border-left: 1px solid var(--ss-line); }
.ss-co-couriers .ss-delivery-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 68px; padding: 10px; border: 0; border-radius: 0; }
.ss-co-couriers .ss-delivery-card.active { border: 0; box-shadow: inset 0 -3px 0 var(--ss-primary); }
.ss-co-couriers .ss-delivery-card strong { display: none !important; }
.ss-co-methods { --bs-gutter-x: 0; --bs-gutter-y: 0; display: block; margin: 0 0 16px; border: 1px solid var(--ss-border); border-radius: var(--ss-r-md); overflow: hidden; }
.ss-co-methods > .col-4 { width: 100%; }
.ss-co-methods > .col-4 + .col-4 { border-top: 1px solid var(--ss-line); }
.ss-co-methods .ss-delivery-card {
display: grid; grid-template-columns: 18px 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: center;
padding: 14px 16px; border: 0; border-radius: 0; text-align: left;
}
.ss-co-methods .ss-delivery-card::before { content: ""; grid-row: 1 / span 2; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ss-border-strong); background: #fff; }
.ss-co-methods .ss-delivery-card.active::before { border: 5px solid var(--ss-primary); }
.ss-co-methods .ss-delivery-card > .ss-icon { grid-row: 1 / span 2; width: 40px; height: 40px; margin: 0 !important; padding: 10px; border-radius: var(--ss-r-sm); background: var(--ss-chip); color: var(--ss-ink); }
.ss-co-methods .ss-delivery-card.active > .ss-icon { background: var(--ss-primary); color: var(--ss-on-primary); }
.ss-co-methods .ss-delivery-card strong { grid-column: 3; font-size: 14.5px !important; font-weight: 600; }
.ss-co-methods .ss-delivery-card small { grid-column: 3; font-size: 12.5px; color: var(--ss-muted) !important; text-transform: none !important; }
.ss-co-methods .ss-delivery-card.active { border: 0; box-shadow: none; }
.ss-co-methods .ss-delivery-card.ss-card-disabled { opacity: .55; }
.ss-co-invoice .ss-delivery-card { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 14px 16px; text-align: left; }
.ss-co-invoice .ss-delivery-card::before { content: ""; grid-row: 1 / span 2; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ss-border-strong); background: #fff; }
.ss-co-invoice .ss-delivery-card.active::before { border: 5px solid var(--ss-primary); }
.ss-co-invoice .ss-delivery-card > .ss-icon { display: none; }
.ss-co-invoice .ss-delivery-card strong { grid-column: 2; font-size: 14.5px !important; font-weight: 600; }
.ss-co-invoice .ss-delivery-card small { grid-column: 2; font-size: 12.5px; }
/* The payment: radio cards (guide 3.6) */
.ss-payment-options { display: flex; flex-direction: column; gap: 8px; }
.ss-co .ss-payment-card {
display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 16px; border: 1px solid var(--ss-border); border-radius: var(--ss-r-sm);
background: var(--ss-surface); box-shadow: none; transform: none; cursor: pointer;
}
.ss-co .ss-payment-card:hover { border-color: var(--ss-border-strong); transform: none; box-shadow: none; }
.ss-co .ss-payment-card.active { background: var(--ss-primary-tint); border-color: var(--ss-primary); box-shadow: inset 0 0 0 0.5px var(--ss-primary); }
.ss-co .ss-payment-card input[type="radio"] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--ss-primary); }
.ss-co .ss-payment-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: none; border-radius: var(--ss-r-sm); background: var(--ss-chip); color: var(--ss-ink); font-size: 0; }
.ss-co .ss-payment-card.active .ss-payment-icon { background: var(--ss-primary); color: var(--ss-on-primary); }
.ss-co .ss-payment-icon .ss-icon { width: 20px; height: 20px; }
.ss-co .ss-payment-icon img { max-width: 28px; max-height: 28px; }
.ss-payment-title { font-size: 14.5px; font-weight: 600; color: var(--ss-ink); }
.ss-payment-desc { font-size: 12.5px; color: var(--ss-muted); }
/* The summary of the checkout */
.ss-co-summary { padding: 0 !important; overflow: hidden; }
.ss-co-summary-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 14px; border-bottom: 1px solid var(--ss-line); }
.ss-co-summary-head .ss-summary-title { margin: 0; }
.ss-co-summary-body { padding: 16px 20px 20px; }
.ss-co-summary-body > hr { margin: 14px 0; border: 0; border-top: 1px solid var(--ss-line); opacity: 1; }
.ss-co-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ss-line); }
.ss-co-item:first-child { padding-top: 0; }
.ss-co-item-img { position: relative; width: 56px; height: 56px; border-radius: var(--ss-r-sm); background: linear-gradient(180deg, #f7f7f9, #ececef); }
.ss-co-item-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; border-radius: var(--ss-r-sm); }
.ss-co-item-qty { position: absolute; top: -6px; left: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ss-dark); color: #fff; font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.ss-co-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-co-item-title { font-size: 13.5px; line-height: 1.35; color: var(--ss-ink); }
.ss-co-item-meta { font-size: 12px; color: var(--ss-faint); }
.ss-co-item-price { font-size: 13.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ss-co-summary-body .form-label { font-size: 12.5px; font-weight: 600; color: var(--ss-ink); }
.ss-co-summary-body .input-group { gap: 6px; flex-wrap: nowrap; }
.ss-co-summary-body .input-group > .form-control { min-height: 42px; height: 42px; border-radius: var(--ss-r-sm) !important; }
.ss-co-summary-body .input-group > .btn { min-height: 42px; border-radius: var(--ss-r-sm) !important; border: 1px solid var(--ss-dark); background: var(--ss-surface); color: var(--ss-ink); }
.ss-co-summary-body .input-group > .btn:hover:not(:disabled) { background: var(--ss-dark); color: #fff; }
.ss-co-summary-body .d-flex.justify-content-between { font-size: 14px; color: var(--ss-muted); }
.ss-co-summary-body .d-flex.justify-content-between > :last-child { color: var(--ss-ink); }
.ss-co-summary-body .text-success { color: var(--ss-ok) !important; }
.ss-co-summary .ss-summary-total { margin: 8px 0 16px; }
.ss-consent-checks { font-size: 13px; color: var(--ss-ink-2); }
.ss-consent-checks .form-check-label a { color: var(--ss-ink); text-decoration: underline; text-underline-offset: 2px; }
.ss-co .ss-summary-cta:disabled { background: #98989b; border-color: #98989b; filter: none; }
/* ── The checkout, round 2: the invoice cards read from the left, the radio of a payment card shows, the consent ticks ── */
.ss-co-invoice .ss-delivery-card { text-align: left !important; }
.ss-co .ss-payment-card input[type="radio"] { display: block !important; position: static !important; opacity: 1 !important; pointer-events: auto; }
.ss-consent-checks .form-check { display: flex; align-items: flex-start; gap: 10px; min-height: 0; padding-left: 0; }
.ss-consent-checks .form-check-input { float: none; flex: none; margin: 1px 0 0; }
.ss-consent-checks .form-check-label { line-height: 1.45; }
/* ── The short head on a phone: the logo and the phone in a row, the steps under them ── */
@media (max-width: 767.98px) {
.ss-co-header-row { flex-wrap: wrap; row-gap: 6px; min-height: 0; padding-top: 10px; padding-bottom: 10px; }
.ss-co-header .ss-logo img { max-height: 34px; }
.ss-co-header-steps { order: 3; flex: 1 1 100%; justify-content: center; }
}
/* ── The thank-you page (the mockup Confirmation) ── */
.ss-suc { max-width: 1132px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.ss-panel.ss-suc-hero { padding: 26px 22px; }
@media (min-width: 768px) { .ss-panel.ss-suc-hero { padding: 32px; } }
.ss-success-header { text-align: left; padding: 0; }
.ss-success-icon-lg {
width: 56px; height: 56px; display: grid; place-items: center; margin: 0 0 20px !important; border: 0; border-radius: var(--ss-r-md);
background: var(--ss-primary); color: var(--ss-on-primary); box-shadow: none;
}
.ss-success-icon-lg .ss-icon { width: 26px; height: 26px; stroke-width: 2; }
.ss-success-icon-lg.is-failed { background: var(--ss-bad); color: #fff; border: 0; }
.ss-success-icon-lg.is-pending { background: var(--ss-dark); color: #fff; }
.ss-success-header h1 { margin: 0 0 14px !important; font-size: clamp(24px, 3vw, 32px) !important; font-weight: 600 !important; letter-spacing: -0.03em; }
.ss-order-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px !important; padding: 7px 12px; border: 1px solid var(--ss-border); border-radius: var(--ss-r-sm); background: var(--ss-surface-2); color: var(--ss-ink); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: none; }
.ss-success-header > p { font-size: 15px !important; color: var(--ss-ink-2) !important; }
.ss-suc-grid { display: grid; gap: 12px; align-items: start; }
@media (min-width: 992px) { .ss-suc-grid { grid-template-columns: minmax(0, 1fr) 360px; } }
.ss-panel.ss-suc-items { padding: 20px 0 0; overflow: hidden; }
.ss-suc-items > .ss-sect-title { padding: 0 22px; margin-bottom: 12px; }
.ss-order-items-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ss-order-items-table thead th { padding: 10px 22px; border-bottom: 1px solid var(--ss-line); background: var(--ss-surface-2); font-size: 12.5px; font-weight: 500; color: var(--ss-muted); text-transform: none; letter-spacing: 0; }
.ss-order-items-table thead th:not(:first-child), .ss-order-items-table td:not(:first-child) { text-align: right; white-space: nowrap; }
.ss-order-items-table td { padding: 14px 22px; border-bottom: 1px solid var(--ss-line); vertical-align: middle; font-variant-numeric: tabular-nums; }
.ss-item-product { display: flex; align-items: center; gap: 14px; }
.ss-item-thumb { width: 56px; height: 56px; object-fit: contain; border-radius: var(--ss-r-sm); background: linear-gradient(180deg, #f7f7f9, #ececef); mix-blend-mode: multiply; border: 0; }
.ss-item-product strong { font-size: 14.5px; font-weight: 600; color: var(--ss-ink); }
.ss-item-product small { font-size: 12.5px; color: var(--ss-muted) !important; }
.ss-suc-items > .pt-3 { padding: 16px 22px 22px !important; border: 0 !important; }
.ss-suc-items .row.justify-content-end > .col-md-6 { width: 100%; max-width: 340px; margin-left: auto; padding: 0; }
.ss-suc-items .d-flex.justify-content-between { font-size: 14px; color: var(--ss-muted); }
.ss-suc-items .d-flex.justify-content-between > :last-child { color: var(--ss-ink); }
.ss-suc-items .d-flex.justify-content-between.fs-5 { align-items: baseline; margin-top: 10px; font-size: 14px !important; color: var(--ss-ink); }
.ss-suc-items .d-flex.justify-content-between.fs-5 > :last-child { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; }
.ss-suc-items hr { border: 0; border-top: 1px solid var(--ss-line); opacity: 1; }
.ss-suc-items .text-success, .ss-suc-items .text-success > * { color: var(--ss-ok) !important; }
@media (max-width: 767.98px) {
.ss-order-items-table thead { display: none; }
.ss-order-items-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--ss-line); }
.ss-order-items-table td { padding: 0; border: 0; }
.ss-order-items-table td:first-child { grid-column: 1 / -1; }
.ss-order-items-table td:not(:first-child) { text-align: left; font-size: 13px; color: var(--ss-muted); }
.ss-order-items-table td:last-child { grid-column: 2; grid-row: 2; text-align: right; color: var(--ss-ink); }
}
/* The cards on the right: the client, the delivery, the invoice, the payment, the bank, the receipt */
.ss-suc-side { display: flex; flex-direction: column; gap: 12px; }
.ss-panel.ss-suc-card { padding: 18px 20px; margin: 0 !important; border: 0; box-shadow: none; font-size: 14px; color: var(--ss-ink-2); }
.ss-suc-card p { margin: 0 0 3px; }
.ss-suc-card-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-muted); }
.ss-suc-card-title .ss-icon { width: 15px; height: 15px; }
.ss-suc-strong { font-size: 15px; font-weight: 600; color: var(--ss-ink); }
.ss-suc-muted { color: var(--ss-muted); }
.ss-suc-pay { display: flex; align-items: flex-start; gap: 14px; }
.ss-suc-pay-logo { height: 24px; width: auto; }
.ss-suc-pay-icon { width: 22px; height: 22px; flex: none; color: var(--ss-ink); }
.ss-suc-pay-text { display: block; font-size: 15px; font-weight: 600; color: var(--ss-ink); }
.ss-suc-bank h6 { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-muted); }
.ss-suc-nra { display: flex; align-items: center; gap: 14px; }
.ss-suc-nra .flex-grow-1 { font-size: 14px; }
/* The thanks: a dark bar with two buttons */
.ss-suc-thanks { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding: 20px 22px; border-radius: var(--ss-r-md); background: var(--ss-dark); color: #fff; }
.ss-suc-thanks-text { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 16px; font-weight: 600; }
.ss-suc-thanks-text .ss-icon { width: 20px; height: 20px; }
.ss-suc-thanks-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-suc-thanks .btn-dark { --b-bg: var(--ss-dark-nav); --b-bd: var(--ss-dark-nav); }
.ss-suc-thanks .btn-dark:hover { --b-bg: #48484b; --b-bd: #48484b; }
/* ── The thank-you page, round 2: no line under the head ── */
.ss-success-header { border: 0 !important; margin: 0; }
.ss-success-header > p:last-child { margin-bottom: 0 !important; }
/* ── The profile pages (the mockup Profile): the glass menu of 280 px on the left (sticky), the panels on the right ── */
.ss-user-layout { padding: 16px 0 32px; background: transparent; min-height: 0; }
.ss-user-layout > .container > .row { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; --bs-gutter-x: 0; }
.ss-user-layout > .container > .row > .col-md-3, .ss-user-layout > .container > .row > .col-md-9 { width: 100%; max-width: 100%; padding: 0; margin: 0 !important; }
@media (min-width: 992px) {
.ss-user-layout > .container > .row { flex-wrap: nowrap; align-items: flex-start; }
.ss-user-layout > .container > .row > .col-md-3 { flex: 0 0 280px; width: 280px; position: sticky; top: 132px; }
.ss-user-layout > .container > .row > .col-md-9 { flex: 1 1 auto; min-width: 0; }
}
.ss-user-sidebar {
padding: 0 0 8px; border: 1px solid #fff; border-radius: var(--ss-r-md); overflow: hidden;
background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .7));
box-shadow: inset 0 1px 0 #fff, 0 30px 60px -40px rgba(29, 31, 32, .35);
}
.ss-sidebar-header { display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px; margin: 0; border: 0; background: none; color: var(--ss-ink); font-size: 14px; }
.ss-sidebar-avatar { width: 48px; height: 48px; display: grid; place-items: center; flex: none; border-radius: var(--ss-r-sm); background: var(--ss-dark); color: #fff; font-size: 16px; font-weight: 600; }
.ss-sidebar-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.ss-sidebar-who strong { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-sidebar-who span { font-size: 13px; color: var(--ss-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-sidebar-group { display: flex; justify-content: space-between; gap: 8px; margin: 0 18px 12px; padding: 8px 10px; border-radius: var(--ss-r-sm); background: var(--ss-primary-tint); font-size: 12.5px; font-weight: 600; color: var(--ss-primary-ink); }
.ss-sidebar-group strong { color: var(--ss-ok); font-weight: 600; }
.ss-sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px 8px; }
.ss-user-sidebar .ss-sidebar-nav a {
display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--ss-r-sm);
color: var(--ss-ink); font-size: 14.5px; font-weight: 500; text-decoration: none; background: none;
}
.ss-user-sidebar .ss-sidebar-nav a .ss-icon { width: 18px; height: 18px; color: var(--ss-ink-2); }
.ss-user-sidebar .ss-sidebar-nav a:hover { background: var(--ss-chip); color: var(--ss-ink); }
.ss-user-sidebar .ss-sidebar-nav a.active { background: var(--ss-dark); color: #fff; font-weight: 600; }
.ss-user-sidebar .ss-sidebar-nav a.active .ss-icon { color: #fff; }
.ss-sidebar-out { margin: 0; padding: 8px 8px 0; border-top: 1px solid var(--ss-line); }
.ss-sidebar-logout { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--ss-r-sm); background: none; color: var(--ss-muted); font-size: 14.5px; text-align: left; }
.ss-sidebar-logout:hover { background: var(--ss-bad-bg); color: var(--ss-bad-ink); }
.ss-sidebar-logout .ss-icon { width: 18px; height: 18px; }
/* The head of a profile page: the square, the title, the line with the plus, in a white panel */
.ss-user-content-header { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 20px 22px; border: 0; border-radius: var(--ss-r-md); background: var(--ss-surface); box-shadow: none; }
.ss-user-content-header > .ss-icon { display: none; }
.ss-user-content-header::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--ss-primary); }
.ss-user-content-header h4 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; }
.ss-user-content-header::after {
content: ""; flex: 1 1 auto; min-width: 24px; height: 11px; margin-left: 6px;
background: linear-gradient(#c4c4c8, #c4c4c8) left center / 100% 1px no-repeat,
linear-gradient(var(--ss-ink), var(--ss-ink)) right center / 11px 1px no-repeat,
linear-gradient(var(--ss-ink), var(--ss-ink)) right 5px center / 1px 11px no-repeat;
}
@media (min-width: 768px) { .ss-user-content-header h4 { font-size: 30px; } }
/* The panels of the profile pages: the same as the checkout's */
.ss-user-layout .ss-order-panel { margin: 0 0 12px !important; border: 0; border-radius: var(--ss-r-md); background: var(--ss-surface); box-shadow: none; overflow: visible; }
.ss-user-layout .ss-order-panel-header { display: flex; align-items: center; gap: 12px; padding: 22px 24px 4px; border: 0; background: none; }
.ss-user-layout .ss-order-panel-header > .ss-icon { display: none; }
.ss-user-layout .ss-order-panel-header::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--ss-primary); }
.ss-user-layout .ss-order-panel-header h5 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.ss-user-layout .ss-order-panel-header::after {
content: ""; flex: 1 1 auto; min-width: 24px; height: 11px; margin-left: 6px;
background: linear-gradient(#c4c4c8, #c4c4c8) left center / 100% 1px no-repeat,
linear-gradient(var(--ss-ink), var(--ss-ink)) right center / 11px 1px no-repeat,
linear-gradient(var(--ss-ink), var(--ss-ink)) right 5px center / 1px 11px no-repeat;
}
.ss-user-layout .ss-order-panel-body { padding: 18px 24px 24px; }
.ss-user-layout .form-control:disabled, .ss-user-layout .form-control.bg-light { background: var(--ss-surface-2) !important; color: var(--ss-muted); }
.ss-user-layout .form-text { font-size: 12.5px; color: var(--ss-muted); }
.ss-user-layout .form-switch .form-check-input { width: 44px; height: 24px; border-radius: 12px; }
@media (max-width: 575.98px) { .ss-user-layout .ss-order-panel-header { padding: 18px 16px 2px; } .ss-user-layout .ss-order-panel-body { padding: 14px 16px 18px; } }
/* ── The profile, round 2: the menu head on white, the danger panel (a light red frame), the switch (guide 3.6) ── */
.ss-user-sidebar .ss-sidebar-header { background: none !important; border: 0 !important; }
.ss-user-layout .ss-order-panel.border-danger { border: 1px solid #f1d0d0 !important; }
.ss-user-layout .ss-order-panel.border-danger .ss-order-panel-header { background: none !important; }
.ss-user-layout .ss-order-panel.border-danger .ss-order-panel-header::before { background: var(--ss-bad); }
.ss-user-layout .ss-order-panel.border-danger .ss-order-panel-header h5 { color: var(--ss-bad-ink) !important; }
.form-switch .form-check-input { width: 44px; height: 24px; margin-top: 0; border-radius: 12px; border-color: var(--ss-border-strong); background-color: #e1e1e4; cursor: pointer; }
.form-switch .form-check-input:checked { background-color: var(--ss-primary); border-color: var(--ss-primary); }
.form-switch { display: flex; align-items: center; gap: 10px; padding-left: 0; }
.form-switch .form-check-input { float: none; margin-left: 0; }
.form-switch .form-check-label { font-size: 13.5px; font-weight: 600; color: var(--ss-ink); }
/* ── Labels everywhere: small squares of the theme in place of the round Bootstrap colours; the status of an order ── */
.badge { border-radius: var(--ss-r-sm); padding: 4px 7px; font-size: 11.5px; font-weight: 600; letter-spacing: 0; line-height: 1.1; }
.badge.rounded-pill { border-radius: 10px; }
.badge.bg-primary { background: var(--ss-primary) !important; color: var(--ss-on-primary) !important; }
.badge.bg-secondary { background: var(--ss-chip) !important; color: var(--ss-ink-2) !important; }
.badge.bg-success { background: var(--ss-ok-bg) !important; color: var(--ss-ok) !important; }
.badge.bg-success-subtle { background: var(--ss-ok-bg) !important; }
.badge.bg-warning { background: #fdf3e2 !important; color: #8a4f06 !important; }
.badge.bg-info { background: var(--ss-primary-tint) !important; color: var(--ss-primary-ink) !important; }
.badge.bg-danger:not(.ss-wishlist-badge):not(.ss-cart-badge) { background: var(--ss-bad-bg) !important; color: var(--ss-bad-ink) !important; }
.ss-status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--ss-r-sm); background: var(--ss-chip); color: var(--ss-ink); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ss-status-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ss-status-chip.is-new { background: var(--ss-primary-tint); color: var(--ss-primary-ink); }
.ss-status-chip.is-processing { background: #fdf3e2; color: #8a4f06; }
.ss-status-chip.is-prepared { background: var(--ss-chip); color: var(--ss-ink); }
.ss-status-chip.is-shipped, .ss-status-chip.is-delivered, .ss-status-chip.is-completed { background: var(--ss-ok-bg); color: var(--ss-ok); }
.ss-status-chip.is-cancelled, .ss-status-chip.is-returned { background: var(--ss-bad-bg); color: var(--ss-bad-ink); }
.ss-user-layout .ss-order-item { border: 0; border-radius: var(--ss-r-md); background: var(--ss-surface); box-shadow: none; transition: box-shadow .3s ease; }
.ss-user-layout .ss-order-item:hover { box-shadow: var(--ss-shadow-hover); transform: none; }
.ss-user-layout .ss-order-item h6 { font-size: 16px; }
/* ── The page of an order (the mockup Order): the head with the status and the steps of the statuses ── */
.ss-user-layout .ss-os-head { padding: 20px 22px; }
.ss-os-head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ss-os-back { width: 38px; height: 38px; display: grid; place-items: center; flex: none; border: 1px solid var(--ss-border); border-radius: var(--ss-r-md); color: var(--ss-ink); text-decoration: none; }
.ss-os-back:hover { border-color: var(--ss-dark); color: var(--ss-ink); }
.ss-os-back .ss-icon { width: 17px; height: 17px; }
.ss-os-title { margin: 0; font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.03em; }
.ss-os-meta { font-size: 13.5px; color: var(--ss-muted); }
.ss-os-total { margin-left: auto; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ss-os-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 18px 0 0; padding: 20px 12px 16px; border-radius: var(--ss-r-sm); background: var(--ss-surface-2); list-style: none; }
.ss-os-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 13.5px; color: var(--ss-muted); }
.ss-os-step + .ss-os-step::before { content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: #d9d9dc; z-index: 0; }
.ss-os-step.is-done + .ss-os-step::before, .ss-os-step.is-current::before { background: var(--ss-primary); }
.ss-os-step-mark { position: relative; z-index: 1; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--ss-r-sm); border: 1px solid var(--ss-border); background: var(--ss-surface); font-size: 11.5px; font-weight: 600; color: var(--ss-muted); font-variant-numeric: tabular-nums; }
.ss-os-step.is-done .ss-os-step-mark { border-color: var(--ss-primary); background: var(--ss-primary); color: var(--ss-on-primary); }
.ss-os-step.is-current .ss-os-step-mark { border-color: var(--ss-dark); background: var(--ss-dark); color: #fff; }
.ss-os-step-mark .ss-icon { width: 15px; height: 15px; stroke-width: 2; }
.ss-os-step.is-done, .ss-os-step.is-current { color: var(--ss-ink); }
.ss-os-step.is-current .ss-os-step-label { font-weight: 600; }
.ss-os-step small { font-size: 12px; color: var(--ss-faint); font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) { .ss-os-step { font-size: 12px; } .ss-os-total { margin-left: 0; flex: 1 1 100%; } }
.ss-user-layout .ss-order-panel .row > [class*="col-"] > .ss-order-panel { margin-bottom: 12px !important; }
.ss-track-dot { width: 10px; height: 10px; flex: none; border-radius: 2px; background: #c4c4c8; }
.ss-track-dot.is-current { background: var(--ss-primary); box-shadow: 0 0 0 3px var(--ss-primary-ring); }
/* ── The page of an order, round 2: the space under a row of two panels ── */
.ss-user-layout > .container > .row > .col-md-9 > .row { --bs-gutter-x: 12px; --bs-gutter-y: 12px; margin-bottom: 12px; }
.ss-user-layout > .container > .row > .col-md-9 > .row > [class*="col-"] > .ss-order-panel { margin-bottom: 0 !important; }
/* ── The page of an order, round 3: the same 12 px above and under a row of two panels ── */
.ss-user-layout > .container > .row > .col-md-9 > .row { --bs-gutter-y: 0; row-gap: 12px; margin-top: 0; }
.ss-user-layout > .container > .row > .col-md-9 > .row > [class*="col-"] { margin-top: 0 !important; }
/* ── Login, registration, the password pages (the mockup Auth): a white card of 520 px, the tabs, the section title ── */
.ss-auth-layout { padding: 40px 0 48px; background: transparent; min-height: 0; }
.ss-auth-card { max-width: 520px; margin: 0 auto; padding: 28px 22px 30px; border: 0; border-radius: var(--ss-r-md); background: var(--ss-surface); box-shadow: 0 30px 60px -40px rgba(29, 31, 32, .35); }
@media (min-width: 576px) { .ss-auth-card { padding: 36px 40px 38px; } }
.ss-auth-tabs { display: flex; gap: 4px; margin-bottom: 26px; padding: 4px; border-radius: var(--ss-r-sm); background: var(--ss-chip); }
.ss-auth-tabs a { flex: 1 1 0; display: grid; place-items: center; height: 44px; border-radius: var(--ss-r-sm); color: var(--ss-ink-2); font-size: 14.5px; font-weight: 500; text-decoration: none; }
.ss-auth-tabs a:hover { color: var(--ss-ink); }
.ss-auth-tabs a.is-on { background: var(--ss-surface); color: var(--ss-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(29, 31, 32, .08); }
.ss-auth-title { margin-bottom: 20px; }
.ss-auth-title .ss-sect-heading { font-size: 24px; }
@media (min-width: 576px) { .ss-auth-title .ss-sect-heading { font-size: 28px; } }
.ss-auth-sub { margin: -8px 0 20px; font-size: 14px; color: var(--ss-muted); }
.ss-auth-card .form-label { font-size: 13px; font-weight: 500; color: var(--ss-ink); }
.ss-auth-card .input-group > .form-control { border-radius: var(--ss-r-sm) !important; }
.ss-pw-field { position: relative; }
.ss-pw-field > .form-control { padding-right: 48px; }
.ss-pw-field > .ss-pw-toggle { position: absolute; top: 3px; right: 3px; bottom: 3px; z-index: 5; width: 42px; min-height: 0; padding: 0; border: 0 !important; border-radius: var(--ss-r-sm) !important; background: none; color: var(--ss-muted); }
.ss-pw-field > .ss-pw-toggle:hover { background: var(--ss-chip); color: var(--ss-ink); }
.ss-auth-card .btn-primary { min-height: 52px; font-size: 15.5px; }
.ss-auth-card a:not(.btn) { color: var(--ss-ink); }
.ss-auth-card a.small, .ss-auth-card p a { text-decoration: underline; text-underline-offset: 3px; }
.ss-auth-card .form-check { display: flex; align-items: center; gap: 8px; padding-left: 0; }
.ss-auth-card .form-check-input { float: none; margin: 0; }
.ss-auth-card > p:last-child, .ss-auth-card form + p { margin-top: 22px !important; }
/* ── Auth, round 2: the button of the card with the corners of the theme ── */
.ss-auth-card .btn { border-radius: var(--ss-r-md) !important; }
/* ── The blog (the mockup Blog): the glass list of the categories, the posts as horizontal cards, the newest one large ── */
.ss-blog-side { display: flex; flex-direction: column; gap: 12px; }
.ss-blog-side > .mt-4 { margin-top: 0 !important; }
@media (min-width: 992px) { .ss-blog-side .ss-sidebar-promo-widget { position: sticky; top: 132px; } }
.ss-blog-sidebar {
display: flex; flex-direction: column; gap: 2px; margin: 0 !important; padding: 0 8px 10px; border: 1px solid #fff; border-radius: var(--ss-r-md);
background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .7));
box-shadow: inset 0 1px 0 #fff, 0 30px 60px -40px rgba(29, 31, 32, .35);
}
.ss-blog-sidebar-header { padding: 16px 10px 10px; margin: 0; border: 0; background: none; font-size: 15px; font-weight: 600; color: var(--ss-ink); }
.ss-blog-sidebar a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--ss-r-sm); color: var(--ss-ink); font-size: 14px; text-decoration: none; background: none; }
.ss-blog-sidebar a:hover { background: var(--ss-chip); color: var(--ss-ink); }
.ss-blog-sidebar a.active { background: var(--ss-dark); color: #fff; font-weight: 600; }
.ss-blog-count { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ss-chip); color: var(--ss-ink-2); font-size: 11.5px; font-weight: 600; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.ss-blog-sidebar a.active .ss-blog-count { background: #fff; color: var(--ss-ink); }
.ss-blog-list { display: flex; flex-direction: column; gap: 10px; }
.ss-blog-card { display: grid; grid-template-columns: 1fr; overflow: hidden; border-radius: var(--ss-r-md); background: var(--ss-surface); transition: box-shadow .3s ease; }
.ss-blog-card:hover { box-shadow: var(--ss-shadow-hover); }
@media (min-width: 768px) { .ss-blog-card { grid-template-columns: 260px minmax(0, 1fr); } .ss-blog-card--featured { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ss-blog-card-img { position: relative; display: grid; place-items: center; min-height: 190px; overflow: hidden; background: #ececef; color: var(--ss-faint); }
.ss-blog-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ss-blog-card:hover .ss-blog-card-img img { transform: scale(1.05); }
.ss-blog-card-img .ss-icon { width: 36px; height: 36px; stroke-width: 1.25; }
.ss-blog-card--featured .ss-blog-card-img { min-height: 300px; }
.ss-blog-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 22px 18px; min-width: 0; }
.ss-blog-card--featured .ss-blog-card-body { justify-content: center; gap: 12px; padding: 28px 32px; }
.ss-blog-chip { padding: 4px 8px; border-radius: var(--ss-r-sm); background: var(--ss-chip); color: var(--ss-ink-2); font-size: 12px; font-weight: 600; line-height: 1.2; text-decoration: none; }
.ss-blog-chip:hover { background: var(--ss-dark); color: #fff; }
.ss-blog-chip.is-accent { background: var(--ss-primary); color: var(--ss-on-primary); }
.ss-blog-card-title { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.ss-blog-card--featured .ss-blog-card-title { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.03em; line-height: 1.15; }
.ss-blog-card-title a { color: var(--ss-ink); text-decoration: none; }
.ss-blog-card:hover .ss-blog-card-title a { color: var(--ss-primary-ink); }
.ss-blog-card-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ss-muted); }
.ss-blog-card--featured .ss-blog-card-text { font-size: 15px; }
.ss-blog-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; width: 100%; margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--ss-muted); }
.ss-blog-date { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ss-primary-ink); font-variant-numeric: tabular-nums; }
.ss-blog-views { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.ss-blog-card-foot .ss-icon { width: 15px; height: 15px; }
.ss-blog-more { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--ss-ink); text-decoration: none; }
.ss-blog-more:hover { color: var(--ss-primary-ink); }
.ss-blog-more-btn { margin-left: auto; min-height: 42px; }
/* ── The other lists (new, promo, a brand, all brands, the search, compare): the layout of Category from their own markup:
the head as the white panel with the square, the count chip and the line; the cards on the field in the grid ── */
.ss-sidebar-promo-widget { padding: 0; border: 0; background: none; box-shadow: none; }
.ss-main-panel { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ss-main-panel > .ss-category-header { margin: 0 0 10px; padding: 20px 22px; border: 0 !important; border-radius: var(--ss-r-md); background: var(--ss-surface); }
.ss-category-header > .d-flex { flex-wrap: wrap; align-items: center !important; }
.ss-category-header > .d-flex > div:first-child { flex: 1 1 320px; min-width: 0; }
.ss-category-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; color: var(--ss-ink); }
.ss-category-title > .ss-icon { display: none; }
.ss-category-title::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--ss-primary); }
.ss-category-title::after {
content: ""; flex: 1 1 60px; min-width: 24px; height: 11px; margin-left: 6px;
background: linear-gradient(#c4c4c8, #c4c4c8) left center / 100% 1px no-repeat,
linear-gradient(var(--ss-ink), var(--ss-ink)) right center / 11px 1px no-repeat,
linear-gradient(var(--ss-ink), var(--ss-ink)) right 5px center / 1px 11px no-repeat;
}
@media (min-width: 768px) { .ss-category-title { font-size: 30px; } }
.ss-category-count { order: 0; padding: 4px 8px; border-radius: var(--ss-r-sm); background: var(--ss-chip); color: var(--ss-ink-2); font-size: 12.5px; font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.ss-category-desc, .ss-category-description { max-width: 760px; margin-top: 14px; font-size: 14.5px; line-height: 1.6; color: var(--ss-muted); }
.ss-main-panel > .ss-products-grid { padding: 0; background: none; }
.ss-main-panel > .ss-products-grid > .row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; }
.ss-main-panel > .ss-products-grid > .row > [class*="col-"] { width: auto; max-width: none; padding: 0; margin: 0; }
@media (max-width: 575.98px) { .ss-main-panel > .ss-products-grid > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.ss-main-panel > .ss-pager, .ss-main-panel > nav.ss-pager { margin-top: 10px; }
.ss-empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px; border: 0; border-radius: var(--ss-r-md); background: var(--ss-surface); box-shadow: none !important; text-align: center; }
.ss-empty-state-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: var(--ss-r-md) !important; background: var(--ss-chip) !important; color: var(--ss-ink-2) !important; }
.ss-empty-state-icon .ss-icon { width: 28px; height: 28px; }
.ss-empty-state h4, .ss-empty-state h5 { margin: 0; font-size: 20px; font-weight: 600; }
/* ── A post of the blog: a white panel with a narrow column (720 px), the meta line, a large title, the picture 16:9 ── */
.ss-panel.ss-blog-article { padding: 24px 18px 30px; }
@media (min-width: 768px) { .ss-panel.ss-blog-article { padding: 40px 32px 44px; } }
.ss-blog-article-inner { max-width: 720px; margin: 0 auto; }
.ss-blog-article-meta { margin: 0 0 14px; padding: 0; }
.ss-blog-article-title { margin: 0 0 22px; font-size: clamp(26px, 3vw, 34px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.ss-blog-article-cover { margin: 0 0 26px; aspect-ratio: 16 / 9; border-radius: var(--ss-r-sm); overflow: hidden; background: #ececef; }
.ss-blog-article-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-content { font-size: 16px; line-height: 1.75; color: var(--ss-ink-2); overflow-wrap: anywhere; }
.blog-content h2, .blog-content h3 { margin: 1.6em 0 .6em; font-weight: 600; letter-spacing: -0.02em; color: var(--ss-ink); }
.blog-content h2 { font-size: 24px; }
.blog-content h3 { font-size: 19px; }
.blog-content img { max-width: 100%; height: auto; border-radius: var(--ss-r-sm); }
.blog-content a { color: var(--ss-primary-ink); text-decoration: underline; text-underline-offset: 3px; }
.blog-content blockquote { margin: 1.4em 0; padding: 14px 18px; border-left: 0; border-radius: var(--ss-r-sm); background: var(--ss-surface-2); color: var(--ss-ink); }
.blog-content > :last-child { margin-bottom: 0; }
.ss-blog-products { padding-top: 0; }
/* ── The rest of the pages: every panel of the base (contacts, FAQ, static pages) as the theme's panel; the contact icons;
the error pages (guide 5: a large code, the search, the way home); the heads that wrapped ── */
.ss-order-panel { margin: 0 0 12px; border: 0; border-radius: var(--ss-r-md); background: var(--ss-surface); box-shadow: none; overflow: visible; }
.ss-order-panel-header { display: flex; align-items: center; gap: 12px; padding: 22px 24px 4px; border: 0; background: none; }
.ss-order-panel-header > .ss-icon { display: none; }
.ss-order-panel-header::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--ss-primary); }
.ss-order-panel-header h5 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.ss-order-panel-body { padding: 18px 24px 24px; }
.ss-contact-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: none; border-radius: var(--ss-r-sm) !important; background: var(--ss-chip) !important; color: var(--ss-ink) !important; }
.ss-contact-icon .ss-icon { width: 18px; height: 18px; }
a.ss-contact-icon:hover { background: var(--ss-dark) !important; color: #fff !important; }
.ss-user-content-header > i { display: none; }
.ss-category-header .ss-category-title { flex: 1 1 auto; }
@media (min-width: 576px) { .ss-category-title { flex-wrap: nowrap; } }
.ss-error-page { display: grid; place-items: center; padding: 48px 16px 56px; background: transparent; min-height: 0; }
.ss-error-inner { max-width: 560px; width: 100%; padding: 36px 28px; border-radius: var(--ss-r-md); background: var(--ss-surface); box-shadow: none; text-align: center; }
.ss-error-code { font-size: 56px !important; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--ss-ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important; margin-bottom: 14px; }
.ss-error-inner h1 { font-size: 24px !important; font-weight: 600; letter-spacing: -0.02em; }
.ss-error-search { display: flex; gap: 6px; max-width: 420px; margin: 0 auto 18px; }
.ss-error-search .form-control { min-height: 46px; }
.ss-error-search .btn { width: 52px; padding: 0; }
/* ── The consent to cookies (from its own view to the sheet): a white panel over a dark veil, the shield in a grey square,
"decline" as an outline, "accept" in the accent ── */
.cookie-consent-modal { position: fixed; inset: 0; z-index: 10000; display: none; justify-content: center; align-items: center; padding: 16px; overflow-y: auto; background: rgba(29, 31, 32, .5); }
.cookie-consent-modal.show { display: flex; }
.cookie-content { width: 100%; max-width: 640px; padding: 24px; border-radius: var(--ss-r-md); background: var(--ss-surface); box-shadow: var(--ss-shadow-pop); font-size: 14px; line-height: 1.6; color: var(--ss-ink-2); text-align: left; }
.cookie-content .gdpr-heading { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--ss-ink); }
.cookie-content .gdpr-icon { width: 44px; height: 44px; flex: none; padding: 11px; margin: 0; border-radius: var(--ss-r-md); background: var(--ss-chip); color: var(--ss-ink); }
.cookie-content p { margin: 12px 0; color: var(--ss-muted); }
.cookie-content a { color: var(--ss-ink); text-decoration: underline; text-underline-offset: 3px; }
.cookie-content hr { margin: 16px 0; border: 0; border-top: 1px solid var(--ss-line); opacity: 1; }
.cookie-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.cookie-buttons .btn-accept, .cookie-buttons .btn-decline { min-height: 44px; padding: 0 20px; border-radius: var(--ss-r-md); font-size: 14px; font-weight: 600; cursor: pointer; }
.cookie-buttons .btn-accept { border: 0; background: var(--ss-primary); color: var(--ss-on-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
.cookie-buttons .btn-accept:hover { filter: brightness(.92); }
.cookie-buttons .btn-decline { border: 1px solid var(--ss-border); background: var(--ss-surface); color: var(--ss-ink); }
.cookie-buttons .btn-decline:hover { border-color: var(--ss-dark); }
@media (max-width: 575.98px) { .cookie-content { padding: 18px; } .cookie-content .gdpr-heading { font-size: 17px; } .cookie-buttons > * { flex: 1 1 0; } }
/* ── 768 px: the long e-mail of the footer wraps; the short head of the checkout puts its steps on their own row ── */
.ss-footer-contact, .ss-footer-contact-text { min-width: 0; }
.ss-footer-contact-text, .ss-footer-contact-text a { overflow-wrap: anywhere; }
@media (max-width: 991.98px) {
.ss-co-header-row { flex-wrap: wrap; row-gap: 6px; min-height: 0; padding-top: 10px; padding-bottom: 10px; }
.ss-co-header-steps { order: 3; flex: 1 1 100%; justify-content: center; }
}
/* ── The dialogs (SweetAlert and the Bootstrap windows): the theme's font, corners and colours; success in the accent ── */
.swal2-popup { padding: 24px !important; border-radius: var(--ss-r-md) !important; font-family: var(--ss-font) !important; }
.swal2-title { font-size: 20px !important; font-weight: 600 !important; letter-spacing: -0.02em; color: var(--ss-ink) !important; }
.swal2-html-container { font-size: 14.5px !important; color: var(--ss-muted) !important; }
.swal2-styled { min-height: 44px; padding: 0 20px !important; border-radius: var(--ss-r-md) !important; font-size: 14px !important; font-weight: 600 !important; box-shadow: none !important; }
.swal2-styled:focus { box-shadow: 0 0 0 3px var(--ss-primary-ring) !important; }
.swal2-icon.swal2-success { border-color: var(--ss-primary) !important; color: var(--ss-primary) !important; }
.swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--ss-primary) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: var(--ss-primary-ring) !important; }
.modal-content { border: 0; border-radius: var(--ss-r-md); box-shadow: var(--ss-shadow-pop); font-family: var(--ss-font); }
.modal-header { padding: 18px 22px; border-bottom: 1px solid var(--ss-line); }
.modal-title { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.modal-body { padding: 20px 22px; }
.modal-footer { padding: 14px 22px; border-top: 1px solid var(--ss-line); }
.modal-backdrop.show { opacity: .5; }
.modal-backdrop { background-color: var(--ss-dark); }
.alert { border: 0; border-radius: var(--ss-r-md); font-size: 14px; }
.alert-success { background: var(--ss-ok-bg); color: var(--ss-ok); }
.alert-danger { background: var(--ss-bad-bg); color: var(--ss-bad-ink); }
.alert-warning { background: #fdf3e2; color: #8a4f06; }
.alert-info { background: var(--ss-primary-tint); color: var(--ss-primary-ink); }
/* ── Guide 1.5 and the check before release: the buttons do not move under the pointer (the base lifted 21 of them);
the dark of the tooltips is graphite, not black ── */
.btn:hover, .btn:focus, .page-link:hover, .ss-action-btn:hover, .ss-action-btn-call:hover, .ss-topbar a:hover, .ss-cart-btn:hover,
.ss-footer-social a:hover, .ss-section-link:hover, .ss-subscribe-btn:hover, .ss-buy-btn:hover, .ss-call-btn:hover,
.ss-review-actions .btn-edit:hover, .ss-review-actions .btn-delete:hover, .ss-review-submit-btn:hover, .ss-cart-wishlist-btn:hover,
.ss-wishlist-btn:hover, .banner-option-link:hover, .banner-option-link-mobile:hover, .ss-fb-share-btn.ss-tbi-btn:hover img,
.ss-notify-modal .btn:hover, .ss-filter-panel-title .clear-btn:hover i { transform: none !important; }
[data-tooltip]::after { background: var(--ss-dark) !important; }
/* ── The middle widths: the promises two by two on a tablet ── */
@media (min-width: 576px) and (max-width: 991.98px) { .ss-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ── The middle widths, round 2: the active category of the bar keeps the graphite (the base gave it white below 1200 px);
the delivery line reads from the left at every width ── */
.ss-navigation .nav-list > li.active > a { background: transparent !important; color: #fff !important; }
.ss-navigation .nav-list > li.active > a:hover { background: rgba(255, 255, 255, .06) !important; }
.ss-delivery-timer-box { justify-content: space-between !important; text-align: left !important; }
.ss-delivery-timer-inner { justify-content: flex-start !important; text-align: left !important; }
/* ── A button with only an icon is a square (house rule): the phone header keeps its icons where they were, each in a
32 px square; the card button on a phone, the search of the error pages; the search of the header fills its field ── */
.ss-mobile-actions { gap: 7px; margin-right: 3px; }
.ss-mobile-actions a, .ss-mobile-search-trigger { width: 32px; height: 32px; flex: none; display: grid; place-items: center; }
.ss-search-box .btn-search { height: auto; align-self: stretch; padding: 0; }
.ss-error-search .btn { flex: none; width: 46px; height: 46px; padding: 0; display: grid; place-items: center; }
@media (max-width: 575.98px) {
.ss-pcard-buy { width: 34px; padding: 0; justify-content: center; }
}
/* The steps of the quantity in the product, as the mockup (42 x 50) */
@media (min-width: 576px) { .ss-pp-qty button { width: 42px; } }
/* ── The featured product of a category (no mockup: the language of the dark panels): graphite, flat, no circles and no
shadows, the badge as wide as its words, the button a white block with corners 4 px ── */
.ss-category-banner { margin: 0; background: var(--ss-dark); border-radius: var(--ss-r-md); }
.banner-bg-circle { display: none; }
.banner-row { padding: 24px; }
.banner-badge { align-self: flex-start; width: auto; padding: 5px 9px; border-radius: var(--ss-r-sm); background: rgba(255, 255, 255, .1); font-size: 11px; letter-spacing: .08em; }
.banner-badge .ss-icon { width: 12px; height: 12px; margin-right: 3px; vertical-align: -2px; }
.banner-main-link, .banner-main-link:hover { box-shadow: none; transform: none; border-radius: var(--ss-r-sm); }
.banner-option-img, .banner-option-img-mobile { box-shadow: none; border-radius: var(--ss-r-sm); }
.banner-option-color { box-shadow: none; border-radius: 2px; }
.banner-option-link:hover, .banner-option-link-mobile:hover { transform: none; }
.banner-title { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.banner-description { color: #c4c4c8; opacity: 1; }
.banner-price { font-weight: 600; font-variant-numeric: tabular-nums; }
.banner-discount-badge { border-radius: var(--ss-r-sm); font-weight: 600; }
.banner-btn { min-height: 44px; padding: 0 18px; border-radius: var(--ss-r-md); background: #fff; color: var(--ss-ink); font-size: 14.5px; font-weight: 600; box-shadow: none; transition: background .2s, color .2s; }
.banner-btn:hover { background: var(--ss-chip); color: var(--ss-ink); box-shadow: none; }
.banner-btn .ss-icon { width: 16px; height: 16px; }
.banner-icons { color: #c4c4c8; opacity: 1; }
@media (max-width: 767px) {
.banner-row { padding: 16px; }
.banner-title { font-size: 18px; }
.banner-btn { min-height: 40px; padding: 0 14px; font-size: 13.5px; }
}
/* The shadows the base sheet left at rest: the phone of the top bar, the panel of the error pages, the blog cards */
.ss-topbar-phone { box-shadow: none; border-radius: 0; }
.ss-topbar-phone:hover { background: none !important; color: var(--ss-primary-ink) !important; }
.ss-error-page .ss-error-inner { border-radius: var(--ss-r-md); box-shadow: none; border-color: var(--ss-line); }
.ss-blog-card { box-shadow: none; }
/* ── The check before release: short labels stay on one line (the foot of the cart and its favourites on a phone) ── */
.ss-cart-foot { flex-wrap: wrap; row-gap: 8px; }
.ss-cart-back, .ss-cart-clear, .ss-cart-wishlist-btn { white-space: nowrap; }
.ss-cart-clear { font-size: 12.5px; }
@media (max-width: 575.98px) { .ss-cart-back { font-size: 13px; gap: 6px; } }
/* One row as the mockup, also on a narrow phone; if it ever wraps, the clearing stays on the right */
.ss-cart-clear { margin-left: auto; }
@media (max-width: 379.98px) { .ss-cart-foot { padding: 12px; gap: 10px; } .ss-cart-back .ss-icon { display: none; } }
/* ── The cart line on a phone (the owner, 23.10: the stock and the favourites were packed beside the photo): the photo
beside the title and the code, then the stock and the favourites on one line across the full width, then quantity and sum ── */
@media (max-width: 767.98px) {
.ss-cart-item { grid-template-areas: "img title remove" "img meta meta" "flags flags flags" "qty qty price"; grid-template-rows: auto 1fr auto auto; row-gap: 4px; align-items: start; }
.ss-cart-item-info { display: contents; }
.ss-cart-item-title { grid-area: title; align-self: start; }
.ss-cart-item-meta { grid-area: meta; }
.ss-cart-item-flags { grid-area: flags; justify-content: space-between; margin-top: 10px; }
.ss-cart-item-qty { grid-area: qty; margin-top: 6px; }
.ss-cart-item-price { grid-area: price; margin-top: 6px; align-self: center; }
}
/* ── A heading is never cut with "...": its words wrap; on a page head the actions (steps, sort) take a row of their own
when the heading, the count and the actions do not fit on one (the cart at 768 px showed "К...") ── */
.ss-sect-heading { white-space: normal; overflow: visible; text-overflow: clip; }
.ss-sect-title--page { flex-wrap: wrap; row-gap: 12px; }
@media (min-width: 768px) { .ss-sect-title--page .ss-sect-heading { flex: 0 0 auto; max-width: 100%; } }
/* ── "Още" of the shared priority-nav.js: the same light text as the links of the graphite bar (the base gave it #333) ── */
.ss-navigation .nav-list > li.nav-more > .nav-more-trigger {
display: flex; align-items: center; gap: 6px; padding: 0 14px; color: #e7e7ea; font-size: 13.5px; font-weight: 500; white-space: nowrap;
}
.ss-navigation .nav-list > li.nav-more > .nav-more-trigger:hover,
.ss-navigation .nav-list > li.nav-more > .nav-more-trigger:focus-visible,
.ss-navigation .nav-list > li.nav-more > .nav-more-trigger[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, .06); }
/* ── The check before release, the accent only where the guide allows it: the consents of the checkout are grey until
ticked (the mockup: #b7b7ba, 1.5 px), the section labels of the phone menu are grey ── */
.ss-consent-checks .form-check-input { border: 1.5px solid #b7b7ba; }
.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 3px var(--ss-primary-ring); }
.ss-drawer-section-label { color: var(--ss-faint); }
/* The info boxes of the order page: flat, as every panel of the theme */
.ss-info-box { box-shadow: none; border-color: var(--ss-line); }
/* ==== Stage 6, the polish of the mockup's effects (the owner, 23.10: they stay as in the mockup) ==== */
/* A touch screen has no pointer that rests: a tap must not leave a card lifted, a photo zoomed, a glint or a darker button */
@media (hover: none) {
.ss-product-card:hover, .ss-connected-item:hover { transform: none; box-shadow: 0 0 0 1px rgba(29, 31, 32, .05); z-index: auto; }
.ss-product-card:hover .ss-product-image img, .ss-cat-row:hover .ss-cat-row-img img, .ss-home-post:hover .ss-home-post-img img,
.ss-ctile:hover .ss-ctile-cell img, .ss-ctile:hover .ss-ctile-cover img, .ss-blog-card:hover .ss-blog-card-img img { transform: none; }
.ss-product-card:hover .ss-product-image::after { transform: translateX(-70%); transition: none; }
.ss-ctile:hover, .ss-blog-card:hover, .ss-user-layout .ss-order-item:hover { box-shadow: none; }
.ss-search-box .btn-search:hover, .ss-breadcrumb-badge:hover, .breadcrumb-item a.ss-breadcrumb-badge:hover, .ss-pcard-buy:hover,
.ss-pp-buybox .ss-buy-btn:hover, .ss-connected-action .ss-action-btn:hover, .ss-reg-nudge-btn-primary:hover,
.cookie-buttons .btn-accept:hover { filter: none; }
}
/* No blur anywhere (the owner, 23.10: with the site open the whole computer slowed down; tech_css_base.py takes every
backdrop-filter out): the glass is solid */
.ss-header { background: #fff; }
.ss-product-card .ss-wishlist-btn { background: rgba(255, 255, 255, .92); }
.ss-filters, .ss-user-sidebar, .ss-blog-sidebar { background: var(--ss-surface); }
/* ── The filters, compact as in ss_parts (the owner, 23.10, on the tech demo: "неудобни... по компактни"): tighter groups,
smaller chips, a long group as a dropdown with a search and ticks; the button reads the chosen values ── */
.ss-filter-group { padding: 12px 16px; }
.ss-filter-group-title { font-size: 13px; }
.ss-filter-group-body { padding-top: 10px; }
.ss-filter-chips { gap: 5px; }
.ss-filter-chip { min-height: 28px; padding: 3px 9px; font-size: 12.5px; line-height: 1.3; }
.ss-filter-dd { position: relative; }
.ss-filter-dd-btn {
width: 100%; min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--ss-border);
border-radius: var(--ss-r-sm); background: var(--ss-surface); color: var(--ss-ink); font-size: 13px; text-align: left; transition: border-color .15s;
}
.ss-filter-dd-btn:hover, .ss-filter-dd-btn.is-open { border-color: var(--ss-dark); }
.ss-filter-dd-btn .ss-icon { flex: none; width: 14px; height: 14px; color: var(--ss-muted); transition: transform .2s; }
.ss-filter-dd-btn.is-open .ss-icon { transform: rotate(180deg); }
.ss-filter-dd-val { flex: 1; min-width: 0; color: var(--ss-muted); line-height: 1.35; }
.ss-filter-dd-val.has-value { color: var(--ss-ink); font-weight: 600; }
.ss-filter-dd-menu { margin-top: 6px; padding: 8px; border: 1px solid var(--ss-line); border-radius: var(--ss-r-sm); background: var(--ss-surface); }
.ss-filter-dd-search { min-height: 34px; height: 34px; margin-bottom: 8px; padding: 0 10px; font-size: 13px; }
.ss-filter-dd-menu .ss-filter-ticks { gap: 8px; max-height: 220px; padding-right: 4px; }
.ss-filter-dd-menu .ss-filter-tick { font-size: 13px; }
/* The category bar keeps the header's side room (the mockup: 24 px), so its last button ends where the cart does */
.ss-navigation .container { padding-left: 24px; padding-right: 24px; }
/* ── demo3, the owner's round of 23.10 evening ── */
/* The filters never scroll inside themselves (the base limited the panel to the screen's height): the page scrolls */
.ss-filter-sidebar-inner { max-height: none; overflow: visible; }
/* The crumbs on a white card, as the other themes; every part on one middle line */
.ss-crumbs { display: flex; align-items: center; min-height: 46px; padding: 6px 14px; border-radius: var(--ss-r-md); background: var(--ss-surface); }
.ss-crumbs .breadcrumb { min-height: 0; align-items: center; line-height: 1.2; }
.ss-crumbs .breadcrumb-item { align-items: center; }
.ss-crumbs .breadcrumb-item + .breadcrumb-item::before { display: inline-flex; align-items: center; float: none; line-height: 1; }
/* The main button and the variants' buttons: the words follow the palette's rule (is_light_color), the background is the
accent (.btn had set the variants' background back to white, under their white words) */
.btn-primary, .ss-btn-primary, .btn-checkout { --b-fg: var(--ss-on-primary); }
.btn-primary:hover, .ss-btn-primary:hover, .btn-checkout:hover, .btn-primary:focus, .ss-btn-primary:focus { color: var(--ss-on-primary); }
.ss-variant-list-btn-add { --b-bg: var(--ss-primary); --b-fg: var(--ss-on-primary); --b-bd: var(--ss-primary); color: var(--ss-on-primary) !important; }
.ss-variant-list-btn-add:hover, .ss-variant-list-btn-add:focus { background: var(--ss-primary) !important; filter: brightness(.92); }
.ss-variant-list-btn-notify { --b-bg: var(--ss-dark); --b-fg: #fff; --b-bd: var(--ss-dark); }
.ss-variant-list-btn-notify:hover { --b-bg: var(--ss-primary-ink); --b-bd: var(--ss-primary-ink); background: var(--ss-primary-ink); color: #fff; }
.ss-variant-list-btn-notify:disabled { --b-bg: #98989b; --b-bd: #98989b; background: #98989b; }
/* The photo of the featured product in a white frame, so a dark photo keeps its edge on the graphite */
.banner-main-link, .banner-main-link:hover { padding: 6px; background: #fff; }
.banner-main-img { border-radius: 0; }
/* ── demo3, round 2 of 23.10 evening ── */
/* Recently viewed: a hover that shows (a light ground, the photo a little closer), as the cards */
.ss-pp-recent-list { gap: 6px 14px; }
.ss-pp-recent-item { padding: 6px; border-radius: var(--ss-r-sm); transition: background-color .15s ease, color .15s ease; }
.ss-pp-recent-item:hover { background: var(--ss-surface-2); color: var(--ss-primary-ink); }
.ss-pp-recent-img img { transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.ss-pp-recent-item:hover .ss-pp-recent-img img { transform: scale(1.06); }
@media (hover: none) { .ss-pp-recent-item:hover .ss-pp-recent-img img { transform: none; } }
/* The two square buttons beside the cart: one calm hover, no zoom (the base made the heart 10 % larger) */
.ss-pp-icon-btn:hover, .ss-wishlist-circle.ss-pp-icon-btn:hover { transform: none; box-shadow: none; background: var(--ss-surface-2); border-color: var(--ss-dark); color: var(--ss-primary-ink); }
.ss-pp-icon-btn.active:hover, .ss-wishlist-circle.ss-pp-icon-btn.active:hover { background: var(--ss-bad-bg); color: var(--ss-bad); }
/* The compare dock of the mockup (bottom, in the middle): what is chosen, the empty places to four, "Сравни"; solid, no blur */
.ss-compare-dock {
position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 14px;
padding: 7px 7px 7px 16px; border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--ss-r-lg); background: var(--ss-dark); color: #fff;
box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .5);
}
.ss-compare-dock > .ss-icon { flex: none; width: 18px; height: 18px; }
.ss-compare-dock-text { display: flex; flex-direction: column; line-height: 1.2; padding-right: 4px; white-space: nowrap; }
.ss-compare-dock-text strong { font-size: 13.5px; font-weight: 600; }
.ss-compare-dock-text span { font-size: 12px; color: #b7b7ba; }
.ss-compare-dock-slots { display: flex; gap: 4px; }
.ss-compare-dock-thumb, .ss-compare-dock-empty { flex: none; width: 42px; height: 42px; border-radius: var(--ss-r-sm); }
.ss-compare-dock-thumb { overflow: hidden; background: radial-gradient(100% 90% at 50% 20%, #fff, #d4d4d7); }
.ss-compare-dock-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ss-compare-dock-empty { display: grid; place-items: center; border: 1px dashed #5d5d60; color: #98989b; }
.ss-compare-dock-empty .ss-icon { width: 15px; height: 15px; }
.ss-compare-dock-go {
height: 42px; display: flex; align-items: center; padding: 0 18px; border-radius: var(--ss-r-md); background: var(--ss-primary); color: var(--ss-on-primary);
font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.ss-compare-dock-go:hover { filter: brightness(1.08); color: var(--ss-on-primary); }
.ss-compare-dock-close { flex: none; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--ss-r-sm); background: none; color: #98989b; }
.ss-compare-dock-close:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.ss-compare-dock-close .ss-icon { width: 16px; height: 16px; }
@media (max-width: 575.98px) {
.ss-compare-dock { left: 12px; right: 12px; bottom: 12px; transform: none; gap: 10px; padding-left: 12px; }
.ss-compare-dock-slots { display: none; }
.ss-compare-dock-go { margin-left: auto; }
}
/* The filter chips and the long-group button: the line takes the palette under the pointer (the owner, 23.10) */
.ss-filter-chip:hover, .ss-filter-dd-btn:hover, .ss-filter-dd-btn.is-open { border-color: var(--ss-primary); }
.ss-filter-chip.is-on:hover { border-color: var(--ss-dark); }
/* The heart on the card: top right (the base left/bottom pinned it over the badges), solid white with a thin line, the
palette under the pointer, red when chosen; no blur, no zoom */
.ss-product-card .ss-wishlist-btn {
left: auto; bottom: auto; background: #fff; border: 1px solid var(--ss-line); color: var(--ss-ink-2);
transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.ss-product-card .ss-wishlist-btn:hover { background: #fff; border-color: var(--ss-primary); color: var(--ss-primary); }
.ss-product-card .ss-wishlist-btn.text-danger { background: var(--ss-bad-bg); border-color: var(--ss-bad-bg); color: var(--ss-bad); }
/* The cookie settings button in the footer: the base hover took its left padding away and moved it */
.ss-footer-btn:hover { padding: 8px 14px; color: var(--ss-on-primary) !important; filter: brightness(1.08); }
/* On a phone the "to top" button sat over the dock's close button: it rises above the dock while the dock shows */
@media (max-width: 767.98px) {
body:has(.ss-compare-dock:not([x-cloak]):not([style*="none"])) .ss-back-to-top { bottom: calc(82px + env(safe-area-inset-bottom)); }
}
/* The dock rises from the bottom in the middle (the owner, 23.10: "от долу нагоре, а не от дясно на ляво"); "translate"
moves it on its own, so the centring transform stays */
.ss-dock-move { transition: translate .28s cubic-bezier(.2, .7, .2, 1), opacity .2s ease; }
.ss-dock-down { translate: 0 28px; opacity: 0; }
.ss-dock-up { translate: 0 0; opacity: 1; }
/* A product leaves the comparison from its own picture in the dock ("нямам х да го махна") */
.ss-compare-dock-thumb { position: relative; }
.ss-compare-dock-remove {
position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; display: grid; place-items: center; padding: 0;
border: 0; border-radius: 3px; background: var(--ss-dark); color: #fff; opacity: 0; transition: opacity .15s ease, background-color .15s ease;
}
.ss-compare-dock-remove .ss-icon { width: 11px; height: 11px; }
.ss-compare-dock-thumb:hover .ss-compare-dock-remove, .ss-compare-dock-remove:focus-visible { opacity: 1; }
.ss-compare-dock-remove:hover { background: var(--ss-bad); }
@media (hover: none) { .ss-compare-dock-remove { opacity: 1; } }
/* The dark place of the cart fills the button to its edges at every screen scale (a fixed 44 px left a white line
under it at 125 %: "има бяло под нея, не стига плътно") */
.ss-cart-btn > .ss-icon { height: auto; align-self: stretch; flex: none; }
/* ── The mini cart under the cart button (only this theme has one; the owner, 23.10: "в мокъпа имаше модел на отваряне
на количката при посочване"): solid white, a small shadow, the lines, the sum, two buttons ── */
.ss-cart-wrap { position: relative; margin-left: 8px; }
.ss-cart-wrap > .ss-cart-btn { margin-left: 0; }
.ss-cart-wrap:has(.ss-minicart:not([x-cloak]):not([style*="none"])) .ss-cart-btn { border-color: var(--ss-dark); }
.ss-cart-wrap:has(.ss-minicart:not([x-cloak]):not([style*="none"])) .ss-cart-btn > .ss-icon { background: var(--ss-primary-ink); }
.ss-minicart { position: absolute; right: 0; top: 100%; z-index: 1050; padding-top: 8px; }
.ss-minicart-panel {
width: 400px; max-width: calc(100vw - 32px); overflow: hidden; border-radius: var(--ss-r-md); background: #fff; color: var(--ss-ink);
box-shadow: 0 0 0 1px rgba(29, 31, 32, .08), 0 16px 32px -18px rgba(29, 31, 32, .3);
}
.ss-minicart-head { display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 18px; border-bottom: 1px solid var(--ss-line); }
.ss-minicart-title { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.ss-minicart-count {
height: 22px; display: flex; align-items: center; padding: 0 7px; border-radius: var(--ss-r-sm); background: var(--ss-bg);
font-size: 12px; font-weight: 500; color: var(--ss-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ss-minicart-close { margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--ss-r-sm); background: none; color: var(--ss-muted); }
.ss-minicart-close:hover { background: var(--ss-bg); color: var(--ss-ink); }
.ss-minicart-close .ss-icon { width: 18px; height: 18px; }
.ss-minicart-lines { max-height: 300px; overflow-x: hidden; overflow-y: auto; padding: 0 18px; scrollbar-width: thin; }
.ss-minicart-line { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px 0; }
.ss-minicart-line + .ss-minicart-line { border-top: 1px solid var(--ss-line); }
.ss-minicart-img { display: block; width: 60px; height: 60px; overflow: hidden; border-radius: var(--ss-r-sm); background: linear-gradient(180deg, #f7f7f9, #ececef); }
.ss-minicart-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ss-minicart-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ss-minicart-name {
font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--ss-ink); text-decoration: none;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ss-minicart-name:hover { color: var(--ss-primary-ink); }
.ss-minicart-qty { font-size: 12.5px; color: var(--ss-muted); font-variant-numeric: tabular-nums; }
.ss-minicart-end { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; align-self: stretch; gap: 8px; }
.ss-minicart-remove { width: 26px; height: 26px; display: grid; place-items: center; margin: -4px -6px 0 0; padding: 0; border: 0; border-radius: var(--ss-r-sm); background: none; color: #7a7a7d; }
.ss-minicart-remove:hover { background: var(--ss-bad-bg); color: var(--ss-bad); }
.ss-minicart-remove .ss-icon { width: 15px; height: 15px; }
.ss-minicart-sum { font-size: 14px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ss-minicart-total {
display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 14px 18px 0; padding-top: 12px;
border-top: 1px solid var(--ss-line); font-size: 13.5px; color: var(--ss-muted);
}
.ss-minicart-total strong { font-size: 16px; font-weight: 600; color: var(--ss-ink); font-variant-numeric: tabular-nums; }
.ss-minicart-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 18px 18px; }
.ss-minicart-btn {
height: 44px; display: flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--ss-dark);
border-radius: var(--ss-r-md); background: #fff; color: var(--ss-ink); font-size: 13.5px; font-weight: 500; text-decoration: none;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ss-minicart-btn:hover { background: var(--ss-dark); color: #fff; }
.ss-minicart-btn.is-primary { border-color: var(--ss-primary); background: var(--ss-primary); color: var(--ss-on-primary); }
.ss-minicart-btn.is-primary:hover { border-color: var(--ss-primary-hover); background: var(--ss-primary-hover); color: var(--ss-on-primary); }
.ss-minicart-empty { padding: 28px 18px; text-align: center; font-size: 14px; color: var(--ss-muted); }
.ss-mc-move { transition: opacity .16s ease, translate .2s cubic-bezier(.2, .7, .2, 1); }
.ss-mc-from { opacity: 0; translate: 0 6px; }
.ss-mc-to { opacity: 1; translate: 0 0; }
/* The breadcrumbs of the product stand as on every other page: the same air above and under them (the product row had
none: 4 px to the product against 20 px elsewhere; "трябва да си е консистентно") */
.ss-breadcrumb-row { padding: 8px 0 18px; }
@media (min-width: 768px) { .ss-breadcrumb-row { padding: 16px 0; } }
/* The count over the heart and the phone's cart is a round dot with the number in its middle (the shared .badge, later in
the sheet, gave it 4/7 px and a short line: 21 x 18, the "1" low; "кръгчето не е кръгче и текста не е центриран") */
.badge.ss-wishlist-badge, .badge.ss-cart-badge {
display: grid; place-items: center; box-sizing: border-box; width: 20px; min-width: 20px; height: 20px; padding: 0; border-radius: 50%;
font-size: 10.5px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
/* ── The reviews of a product (the owner approved the canvas, 23.10: "дизайна за секцията - одобрявам"): the rating card
and the way to write on the left, the list on the right; the order as three buttons; stars on every review; lines, no boxes ── */
.ss-reviews { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 992px) { .ss-reviews { grid-template-columns: 400px minmax(0, 1fr); column-gap: 40px; align-items: start; } }
.ss-reviews-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ss-reviews-main { min-width: 0; }
.ss-reviews-main > .ss-reviews-list { margin-top: 0; } /* the two cards start on one line (the inherited list stood 20 px lower) */
.ss-reviews-summary { gap: 22px; padding: 24px; border-radius: var(--ss-r-md); background: var(--ss-surface-2); }
.ss-reviews-summary-left { column-gap: 16px; row-gap: 6px; }
.ss-reviews-avg { font-size: 52px; font-variant-numeric: tabular-nums; }
.ss-reviews-stars { gap: 2px; color: #e0a106; }
.ss-reviews-stars .ss-icon { width: 18px; height: 18px; }
.ss-reviews-count { font-size: 13px; }
.ss-reviews-summary-right { gap: 9px; }
.ss-reviews-bar-row { grid-template-columns: 34px minmax(0, 1fr) 22px; gap: 10px; }
.ss-reviews-bar-label { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 400; color: var(--ss-ink-2); font-variant-numeric: tabular-nums; }
.ss-reviews-bar-label .ss-icon { display: block; flex: none; width: 12px; height: 12px; color: #e0a106; }
.ss-reviews-bar { height: 6px; border-radius: 3px; background: #e1e1e4; }
.ss-reviews-bar-fill { border-radius: 3px; background: var(--ss-primary) !important; }
.ss-reviews-bar-count { font-size: 13px; }
.ss-review-login { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 20px; border: 1px solid var(--ss-line); border-radius: var(--ss-r-md); background: #fff; }
.ss-review-login-text { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--ss-ink-2); }
.ss-review-login-icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--ss-r-sm); background: var(--ss-bg); color: var(--ss-dark); }
.ss-review-login-icon .ss-icon { width: 18px; height: 18px; }
.ss-review-login-link { color: var(--ss-ink); font-weight: 500; }
.ss-review-login-btn {
height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ss-dark); border-radius: var(--ss-r-md);
color: var(--ss-ink); font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color .15s ease, color .15s ease;
}
.ss-review-login-btn:hover { background: var(--ss-dark); color: #fff; }
.ss-review-form, .ss-review-status { position: relative; margin: 0; padding: 20px; border: 1px solid var(--ss-line); border-radius: var(--ss-r-md); background: #fff; box-shadow: none; }
.ss-review-form { display: flex; flex-direction: column; gap: 16px; }
.ss-review-form-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; }
.ss-review-form-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--ss-ink); }
.ss-review-form-title .ss-icon { width: 17px; height: 17px; }
.ss-review-form-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--ss-r-sm); background: none; color: var(--ss-muted); }
.ss-review-form-close:hover { background: var(--ss-bg); color: var(--ss-ink); }
.ss-review-form-group { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ss-review-form-label { margin: 0; font-size: 13px; font-weight: 500; color: var(--ss-ink-2); }
.ss-review-star-rating { display: flex; gap: 4px; }
.ss-rate-star {
width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--ss-line); border-radius: var(--ss-r-sm);
background: #fff; color: #c4c4c8; cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.ss-rate-star .ss-icon { width: 22px; height: 22px; }
.ss-rate-star.is-on { color: #e0a106; }
.ss-rate-star.is-on .ss-icon { fill: currentColor; }
.ss-rate-star:hover, .ss-rate-star:focus-visible { border-color: var(--ss-dark); outline: none; }
.ss-review-input, .ss-review-textarea {
width: 100%; box-sizing: border-box; border: 1px solid var(--ss-border); border-radius: var(--ss-r-md); background: #fff;
font: inherit; font-size: 14px; color: var(--ss-ink); box-shadow: none;
}
.ss-review-input { height: 44px; padding: 0 12px; }
.ss-review-textarea { min-height: 120px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.ss-review-input:focus, .ss-review-textarea:focus { border-color: var(--ss-primary); outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--ss-primary) 18%, transparent); }
.ss-review-submit-btn {
width: 100%; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--ss-r-md);
background: var(--ss-primary); color: var(--ss-on-primary); font-size: 14.5px; font-weight: 500; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.ss-review-submit-btn > span { display: inline-flex; align-items: center; gap: 8px; }
.ss-review-submit-btn .ss-icon { width: 16px; height: 16px; }
.ss-review-submit-btn:hover:not(:disabled) { background: var(--ss-primary-hover); color: var(--ss-on-primary); }
.ss-review-submit-btn:disabled { opacity: .55; cursor: not-allowed; }
.ss-review-msg { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--ss-r-sm); font-size: 13.5px; line-height: 1.45; }
.ss-review-msg .ss-icon { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.ss-review-msg.is-success { background: var(--ss-ok-bg); color: var(--ss-ok); }
.ss-review-msg.is-error { background: var(--ss-bad-bg); color: var(--ss-bad); }
.ss-review-status { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px 12px; }
.ss-review-status > .ss-icon { width: 20px; height: 20px; margin-top: 1px; }
.ss-review-status.is-pending > .ss-icon { color: #b45309; }
.ss-review-status.is-approved > .ss-icon { color: var(--ss-ok); }
.ss-review-status-text { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; line-height: 1.45; color: var(--ss-ink-2); }
.ss-review-status-text strong { font-size: 14.5px; font-weight: 600; color: var(--ss-ink); }
.ss-review-status-edit {
grid-column: 1 / -1; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--ss-dark);
border-radius: var(--ss-r-md); background: #fff; color: var(--ss-ink); font-size: 13.5px; font-weight: 500;
}
.ss-review-status-edit:hover { background: var(--ss-dark); color: #fff; }
.ss-review-status-edit .ss-icon { width: 15px; height: 15px; }
.ss-reviews-toolbar {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin: 0; padding: 0 0 16px;
border: 0; border-bottom: 1px solid var(--ss-line); border-radius: 0; background: none;
}
.ss-reviews-total { font-size: 15px; font-weight: 600; color: var(--ss-ink); font-variant-numeric: tabular-nums; }
.ss-reviews-sortbar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ss-reviews-toolbar-label { font-size: 13px; color: var(--ss-muted); }
.ss-reviews-seg { display: flex; overflow: hidden; border: 1px solid var(--ss-border); border-radius: var(--ss-r-md); }
.ss-reviews-seg-btn {
height: 36px; padding: 0 14px; border: 0; border-left: 1px solid var(--ss-border); background: #fff; color: var(--ss-ink-2);
font-size: 13px; font-weight: 500; white-space: nowrap; transition: background-color .15s ease, color .15s ease;
}
.ss-reviews-seg-btn:first-child { border-left: 0; }
.ss-reviews-seg-btn:hover { background: var(--ss-bg); color: var(--ss-ink); }
.ss-reviews-seg-btn.is-active, .ss-reviews-seg-btn.is-active:hover { background: var(--ss-dark); color: #fff; }
.ss-reviews-seg-btn:disabled { cursor: progress; }
.ss-review { padding: 22px 0; border-top: 0; border-bottom: 1px solid var(--ss-line); }
.ss-review-header { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; margin: 0; }
.ss-review-avatar { width: 44px; height: 44px; flex: none; border-radius: var(--ss-r-sm); background: var(--ss-bg); color: var(--ss-ink-2); font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.ss-review-author-details { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.ss-review-author { font-size: 15px; font-weight: 600; }
.ss-review-date { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ss-review-meta-right { display: flex; flex-direction: row; align-items: center; gap: 10px; width: auto; margin-left: auto; }
.ss-review-stars { display: flex; gap: 2px; color: #e0a106; }
.ss-review-stars .ss-icon { width: 15px; height: 15px; }
.ss-review-stars .ss-icon:not(.is-filled) { color: #c4c4c8; }
.ss-review-actions { display: flex; gap: 4px; }
.ss-review-actions .btn { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid var(--ss-line); border-radius: var(--ss-r-sm); background: #fff; color: var(--ss-ink-2); }
.ss-review-actions .btn-delete { color: var(--ss-bad); }
.ss-review-actions .btn:hover { border-color: var(--ss-dark); background: #fff; }
.ss-review-actions .btn .ss-icon { width: 15px; height: 15px; }
.ss-review-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ss-review-verified { height: 24px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border-radius: var(--ss-r-sm); background: var(--ss-ok-bg); color: var(--ss-ok); font-size: 12px; font-weight: 500; }
.ss-review-verified .ss-icon { width: 13px; height: 13px; }
.ss-review-variant { height: 24px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: var(--ss-r-sm); background: var(--ss-bg); color: var(--ss-ink-2); font-size: 12px; font-weight: 500; }
.ss-review-title { margin: 12px 0 0; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ss-ink); }
.ss-review-content { margin-top: 8px; max-width: 72ch; font-size: 14.5px; line-height: 1.65; color: var(--ss-ink-2); }
@media (min-width: 576px) { .ss-review-chips, .ss-review-body { margin-left: 58px; } }
.ss-reviews-load-more-wrap { display: flex; justify-content: center; margin-top: 24px; text-align: center; }
.ss-reviews-load-more { height: 44px; padding: 0 22px; border-radius: var(--ss-r-md); font-size: 14px; font-weight: 500; }
.ss-reviews-load-more > span { display: inline-flex; align-items: center; gap: 8px; }
.ss-reviews-load-more .ss-icon { width: 16px; height: 16px; }
.ss-reviews-load-more-count { color: var(--ss-muted); }
.ss-reviews-load-more:hover .ss-reviews-load-more-count { color: #d4d4d7; }
.ss-reviews-main .ss-reviews-empty { padding: 36px 16px; border: 1px dashed var(--ss-border); border-radius: var(--ss-r-md); }
@media (max-width: 575.98px) {
/* the phone: the order as a row that slides, the words at 16 px, the button over the whole width */
.ss-reviews-toolbar { flex-direction: column; align-items: stretch; }
.ss-reviews-sortbar .ss-reviews-toolbar-label { display: none; }
.ss-reviews-seg { gap: 6px; margin: 0 -16px; padding: 0 16px; overflow-x: auto; border: 0; border-radius: 0; scrollbar-width: none; }
.ss-reviews-seg-btn, .ss-reviews-seg-btn:first-child { flex: none; border: 1px solid var(--ss-border); border-radius: var(--ss-r-md); font-size: 14px; }
.ss-reviews-seg-btn.is-active { border-color: var(--ss-dark); }
.ss-review { padding: 18px 0; }
.ss-review-avatar { width: 40px; height: 40px; font-size: 13.5px; }
.ss-review-stars .ss-icon { width: 13px; height: 13px; }
.ss-review-title { font-size: 16px; }
.ss-review-content { font-size: 16px; line-height: 1.6; }
.ss-reviews-load-more { width: 100%; justify-content: center; }
}
/* The line under a category of the menu stands under its own name (the inherited one kept width 80% and translateX(-50%),
so beside left/right 14 px it slid 40% to the left: "Индикатора е в нищото"); it grows from the middle under the pointer */
.ss-navigation .nav-list > li > a::after {
left: 14px; right: 14px; width: auto; height: 2px; transform: scaleX(0); transform-origin: center; transition: transform .25s ease;
}
.ss-navigation .nav-list > li:hover > a::after, .ss-navigation .nav-list > li.active > a::after { width: auto; transform: scaleX(1); }
/* The home page starts as low under the menu as every other page (16 px against 30); the footer comes a little closer
to the last section (72 px down to 56, in the footer rule above) */
.ss-hero { margin-top: 6px; }
@media (min-width: 768px) { .ss-hero { margin-top: 14px; } }
/* All categories, new and promo products have no breadcrumbs (the owner, 23.10): their first panel stands where the
home page starts under the menu */
.ss-category-layout > .container > .ss-page-head:first-child, .ss-category-layout > .container > .ss-main-panel:first-child { margin-top: 22px; }
@media (min-width: 768px) {
.ss-category-layout > .container > .ss-page-head:first-child, .ss-category-layout > .container > .ss-main-panel:first-child { margin-top: 30px; }
}
/* The order's summary: one line between two products and none under the last, the separator after them is the only
one there ("Има по 2 хоризонтални линии") */
.ss-co-item { border-bottom: 0; }
.ss-co-item + .ss-co-item { border-top: 1px solid var(--ss-line); }
/* The links of the top bar answer the pointer as in ss_latte: a light chip in the palette under them (the padding is given
back by the margin, nothing moves), words and icon in its dark tone ("Много слаб Hover в topbar") */
.ss-topbar a, .ss-topbar a.ss-topbar-phone {
padding: 4px 8px; margin: -4px -8px !important; border-radius: var(--ss-r-sm); transition: color .15s ease, background-color .15s ease;
}
.ss-topbar a:hover { color: var(--ss-primary-ink); background: color-mix(in oklab, var(--ss-primary) 20%, #fff); }
.ss-topbar a:hover .ss-icon { color: var(--ss-primary-ink); }
.ss-topbar .ss-topbar-lang-switch a { margin: 0 !important; padding: 1px 7px; border-radius: 0; }
/* The product rows and the strip of brands move under the hand ("drag/swipe ... както другите теми"): a grabbing hand
while dragged, no snapping and no picked text then; the strip leaves the side moves to the finger */
@media (hover: hover) { .ss-rail-track, .ss-connected-list, .ss-brand-strip.is-running { cursor: grab; } }
.ss-rail-track.is-dragging, .ss-connected-list.is-dragging { scroll-snap-type: none; scroll-behavior: auto; }
.is-dragging, .is-dragging * { cursor: grabbing !important; user-select: none; }
.ss-brand-strip.is-running { touch-action: pan-y; }
/* New and Promo with their page open (the rule clearing an open item's ground took Promo's fill and left a frame; New
showed nothing): Promo keeps its fill a shade deeper, New gets the line of an open category */
.ss-navigation .nav-list > li.nav-auto-promo.active > a { background: var(--ss-primary-hover) !important; color: var(--ss-on-primary) !important; }
.ss-navigation .nav-list > li.nav-auto-new > a::after { display: block; }
/* The head of a brand: with a logo the logo stands as the heading in a white frame, the count beside it; without one the
name as before ("да няма и текст и лого еднакви") */
.ss-brand-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; min-width: 0; }
.ss-brand-logo-title { margin: 0; line-height: 0; }
.ss-brand-logo-title img {
display: block; width: auto; height: 64px; max-width: 240px; object-fit: contain; padding: 8px 14px; box-sizing: border-box;
border: 1px solid var(--ss-line); border-radius: var(--ss-r-md); background: #fff;
}
/* ── The inline styles the views inherited, now in the sheet with the same values (WORKFLOW 3.6; the critical ones stay
inline: a display a script switches, the vendor's noscript frame). A class beside a base class is written double ── */
.ss-pay-panel { padding: 20px 18px; background: var(--ss-surface-2); border-bottom: 1px solid var(--ss-line); }
.ss-pay-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ss-pay-logo { height: 36px; width: 36px; border-radius: var(--ss-r-sm); border: 1px solid var(--ss-line); }
.ss-pay-logo.ss-pay-logo--white { background: #fff; }
.ss-pay-logo-tbi { height: 36px; width: 36px; border-radius: 6px; }
.ss-pay-title { font-weight: 600; font-size: 1rem; }
.ss-pay-meta { font-size: 0.78rem; }
.ss-pay-sum { font-size: 1.1rem; }
.ss-pay-box { background: var(--ss-surface); border: 1px solid var(--ss-line); border-radius: var(--ss-r-sm); }
.ss-pay-failed { background: var(--ss-bad-bg); border-radius: var(--ss-r-sm); }
.ss-pay-failed-text { color: var(--ss-bad); }
.ss-icon.ss-pay-failed-icon { color: var(--ss-bad); font-size: 1.3rem; }
.ss-icon.ss-pay-wait-icon { color: var(--ss-dark); font-size: 1.2rem; }
.ss-tbi-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, .6); align-items: center; justify-content: center; }
.ss-tbi-box { width: 90%; max-width: 600px; height: 85vh; background: #fff; border-radius: var(--ss-r-md); overflow: hidden; position: relative; }
.ss-tbi-frame { width: 100%; height: 100%; border: none; }
.ss-pay-chip { background: var(--ss-dark); border-radius: var(--ss-r-sm); }
.ss-pay-chip-logo { height: 28px; width: 28px; border-radius: 4px; }
.ss-pay-chip-text { color: #fff; font-weight: 600; }
.ss-pay-thumb { border-radius: 4px; flex-shrink: 0; }
.ss-pay-state { background: var(--ss-surface-2); border: 1px solid var(--ss-line); border-radius: var(--ss-r-sm); }
.ss-pay-state-text { color: var(--ss-ink); font-weight: 600; }
.ss-pay-state--ok { background: var(--ss-ok-bg); border: 1px solid color-mix(in srgb, var(--ss-ok) 20%, #fff); border-radius: var(--ss-r-sm); }
.ss-pay-state-text--ok { color: var(--ss-ok); font-weight: 600; }
.ss-pay-state--bad { background: var(--ss-bad-bg); border: 1px solid var(--ss-fav-badge-bg); border-radius: var(--ss-r-sm); }
.ss-pay-state-text--bad { color: var(--ss-bad-ink); font-weight: 600; }
.ss-pay-state--warn { background: var(--ss-warning-light); border: 1px solid color-mix(in srgb, var(--ss-warning) 25%, #fff); border-radius: var(--ss-r-sm); }
.ss-pay-state-text--warn { color: var(--ss-warning); font-weight: 600; }
.ss-payment-icon.ss-payment-icon--logo { padding: 0; overflow: hidden; }
.ss-payment-icon .ss-payment-icon-img { width: 100%; height: 100%; object-fit: cover; }
.ss-order-timeline { border-left: 2px solid var(--ss-line); }
.ss-order-event-time { font-size: 0.75rem; }
.ss-icon.ss-icon-tiny { font-size: 0.7rem; }
.badge.ss-badge-tiny { font-size: 0.65rem; }
.ss-orders-sep { opacity: .15; }
.ss-review-hr { border-color: var(--ss-line); }
.ss-link-ink { color: var(--ss-primary-ink); }
.ss-empty-state.ss-empty-state--flat { box-shadow: none; }
.ss-empty-state-icon.ss-empty-state-icon--info { background: var(--ss-info-light); color: var(--ss-info); }
.ss-empty-state-icon.ss-empty-state-icon--warning { background: var(--ss-warning-light); color: var(--ss-warning); }
.ss-empty-state-icon.ss-empty-state-icon--danger { background: var(--ss-danger-light); color: var(--ss-danger); }
.ss-empty-state-icon.ss-empty-state-icon--success { background: var(--ss-success-light); color: var(--ss-success); }
.ss-empty-state-icon.ss-empty-state-icon--muted { background: var(--ss-chip); color: var(--ss-muted); }
.ss-buy-btn.ss-empty-state-btn { width: auto; border-radius: 10px; padding: 14px 30px; font-size: 16px; }
.ss-category-header.ss-category-header--flush { border-bottom: none; }
.ss-badge.ss-badge--oos { background: var(--ss-muted); }
.ss-brand-card-logo { height: 60px; display: flex; align-items: center; justify-content: center; }
.ss-icon.ss-icon-new { color: var(--ss-success); }
.ss-header-sitename { color: var(--ss-ink); }
.ss-header-desktop { gap: 20px; }
.ss-newsletter-input-group { position: relative; }
.ss-subscribe-btn.ss-subscribe-done-btn { margin-top: 16px; }
.ss-map-frame { border: 0; }
.ss-consent-table { max-width: 400px; }
.ss-consent-code { font-family: monospace; font-size: .85rem; }
.ss-footer .ss-footer-credit { color: var(--ss-footer-text); font-size: 12px; }
.ss-footer .ss-footer-credit-link, .ss-footer .ss-footer-credit-link:hover { color: var(--ss-footer-text); text-decoration: none; }
.ss-gallery-main { touch-action: pan-y; }
.btn.ss-btn-tiny { font-size: 0.75rem; }
.ss-review-product-thumb { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; }
.ss-cover-video-src { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
/* The shop's answer in the compare dock when a product does not join (four chosen, already there), for a few seconds */
.ss-compare-dock-text .ss-compare-dock-note { color: #f5c26b; }
/* The cart's heart says where the product stands: "Добави в любими", then "В любими" */
.ss-cart-wishlist-btn .ss-fav-on, .ss-cart-wishlist-btn.text-danger .ss-fav-off { display: none; }
.ss-cart-wishlist-btn.text-danger .ss-fav-on { display: inline; }
/* A line of the mini cart: its variant, and a line the shop will not take marked as on the cart page */
.ss-minicart-variant { font-size: 12.5px; color: var(--ss-muted); }
.ss-minicart-unavailable { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--ss-bad); }
.ss-minicart-unavailable .ss-icon { width: 14px; height: 14px; }
.ss-minicart-line.is-unavailable .ss-minicart-img, .ss-minicart-line.is-unavailable .ss-minicart-name { opacity: .55; }
/* The short footer of the order pages: the cookie choice as a quiet link beside the copyright */
.ss-footer-cookie-link { margin-left: 14px; padding: 0; border: 0; background: none; color: #b7b7ba; font-size: inherit; }
.ss-footer-cookie-link:hover { color: #fff; }
/* The hero held by the pointer or the focus: the bar of the time holds with it */
.ss-hero:hover .ss-hero-thumb.is-active .ss-hero-thumb-fill, .ss-hero:focus-within .ss-hero-thumb.is-active .ss-hero-thumb-fill { animation-play-state: paused; }
/* A blog post: the sidebar comes after the article in the page and stands where it stood */
.ss-list-side--after { order: -1; }
/* The colour swatches of a product: no shadow at rest or on hover (the inherited rule is stronger than .ss-variant-swatch);
the chosen one keeps its ring */
.product-variants .ss-variant-swatch, .product-variants .ss-variant-swatch:hover { box-shadow: none; }
.product-variants .ss-variant-swatch.is-selected { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ss-ink); }
/* The side panels (filters, profile, blog) carry the thin outline of the product cards, not a big shadow
("Тази сянка на филтрите трябва да се намали, продуктите нямат такава сянка") */
.ss-filters, .ss-user-sidebar, .ss-blog-sidebar { box-shadow: 0 0 0 1px rgba(29, 31, 32, .05); }
/* ── The compare page ("се слива половината с background-а. Модернизирай я"): one white table, the products as its head
over the same columns as the specifications; the photos on their own ground inside white, the rows striped ── */
.ss-compare-cards {
grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-bottom: 12px; overflow: hidden;
border-radius: var(--ss-r-md); background: var(--ss-surface); box-shadow: 0 0 0 1px var(--ss-line);
}
.ss-compare-card {
border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 14px; gap: 0;
border-left: 1px solid var(--ss-line); border-top: 1px solid var(--ss-line); margin: 0 0 -1px -1px;
}
.ss-compare-card:hover { box-shadow: none; }
.ss-compare-card-image {
min-height: 0; height: 190px; padding: 14px; border-radius: var(--ss-r-sm);
background: linear-gradient(180deg, #f7f7f9 0%, #ececef 100%);
}
.ss-compare-card-image img { max-height: 100%; mix-blend-mode: multiply; }
.ss-compare-card:hover .ss-compare-card-image img { transform: scale(1.04); }
.ss-compare-remove {
top: 20px; right: 20px; width: 30px; height: 30px; border-radius: var(--ss-r-sm); border: 1px solid var(--ss-line);
background: #fff; color: var(--ss-muted); box-shadow: none; transition: border-color .15s ease, color .15s ease;
}
.ss-compare-remove:hover { transform: none; background: #fff; border-color: var(--ss-bad); color: var(--ss-bad); }
.ss-compare-remove .ss-icon { width: 15px; height: 15px; }
.ss-compare-card-body { padding: 12px 2px 12px; }
.ss-compare-card-title { font-weight: 500; font-size: 14.5px; line-height: 1.35; color: var(--ss-ink); }
.ss-compare-card-title:hover { color: var(--ss-primary-ink); }
.ss-compare-price-main, .ss-compare-price-promo { font-size: 18px; letter-spacing: -.01em; }
.ss-compare-card-action {
display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 14px;
border-radius: var(--ss-r-md); font-weight: 500;
}
.ss-compare-card-action:hover { color: var(--ss-on-primary); }
.ss-compare-specs { border: 0; border-radius: var(--ss-r-md); background: var(--ss-surface); box-shadow: 0 0 0 1px var(--ss-line); }
.ss-compare-specs-title { display: flex; align-items: center; padding: 14px 18px; font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--ss-line); background: #fff; }
.ss-compare-spec-row { --row: #fff; background: var(--row); border-bottom: 0; }
.ss-compare-spec-row:nth-child(even) { --row: color-mix(in oklab, var(--ss-primary) 3%, #fafafb); }
.ss-compare-spec-row:hover { --row: color-mix(in oklab, var(--ss-primary) 7%, #fff); }
.ss-compare-spec-label { background: var(--row); border-right: 1px solid var(--ss-line); color: var(--ss-muted); font-weight: 500; }
.ss-compare-spec-value { border-right: 0; font-size: 13.5px; color: var(--ss-ink); }
@media (min-width: 769px) {
/* the first column stays free over the names of the specifications, so every product stands over its own column */
.ss-compare-cards { grid-template-columns: 180px repeat(var(--cols, 2), minmax(0, 1fr)); }
.ss-compare-cards::before { content: ''; border-top: 1px solid var(--ss-line); margin-top: -1px; }
}
@media (max-width: 768px) {
.ss-compare-card { padding: 10px; }
.ss-compare-card-image { height: 140px; padding: 10px; }
.ss-compare-remove { top: 14px; right: 14px; }
.ss-compare-spec-label { position: sticky; left: 0; z-index: 1; }
}
/* ==== THE OWNER'S RULES (23.10): they stay last in the layer, so nothing before them takes them back ==== */
/* A blue button does not jump under the pointer or when pressed (the inherited sheet took its border away on hover, 2 px
less); only its colour changes, no brightness filter, the words keep their colour; a button casts a small shadow at most
("Hover ефекта на този бутон подскача", "намали dropshadow при Hover на всички бутони", "само цвета на бутона при ховър
(на сините) трябва да се сменя, а текста да си остава") */
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.ss-btn-primary:hover, .ss-btn-primary:focus, .ss-btn-primary:active,
.btn-checkout:hover, .btn-checkout:focus, .btn-checkout:active {
--b-bg: var(--ss-primary-hover); --b-bd: var(--ss-primary-hover);
background: var(--b-bg); border: 1px solid var(--b-bd); color: var(--ss-on-primary); filter: none; transform: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 3px rgba(var(--ss-primary-rgb), .18);
}
.ss-search-box .btn-search:hover, .ss-pcard-buy:hover, .ss-pp-buybox .ss-buy-btn:hover, .ss-connected-action .ss-action-btn:hover,
.ss-reg-nudge-btn-primary:hover, .cookie-buttons .btn-accept:hover, .ss-breadcrumb-badge:hover, .breadcrumb-item a.ss-breadcrumb-badge:hover,
.ss-navigation .nav-list > li.nav-auto-promo > a:hover, .ss-navigation .nav-list > li.nav-auto-promo.active > a {
background: var(--ss-primary-hover); color: var(--ss-on-primary); filter: none;
}
.ss-variant-list-btn-add:hover, .ss-variant-list-btn-add:focus { background: var(--ss-primary-hover) !important; filter: none; }
.btn-outline-primary:hover, .ss-subscribe-btn:hover:not(:disabled), .ss-buy-btn:hover, .ss-buy-btn.ss-buy-btn-green:hover,
.palette-red .ss-buy-btn:not(.ss-buy-btn--call):hover, .ss-call-btn:hover, .ss-fast-order-btn:hover, .ss-buy-btn--call:hover,
.ss-notify-modal .btn.ss-variant-list-btn-notify:hover:not(:disabled), .ss-review-submit-btn:hover, .ss-cart-wishlist-btn:hover {
box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
/* The pictures of a category tile keep their size under the pointer ("не трябва да се уголемяват снимките") */
.ss-ctile:hover .ss-ctile-cell img, .ss-ctile:hover .ss-ctile-cover img { transform: none; }
/* The gallery: the photo that goes hides at once, only the one that comes fades in ("задната се вижда") */
.ss-gallery-main img.ss-gallery-slide { transition: none; }
.ss-gallery-main img.ss-gallery-slide.active { transition: opacity .3s ease; }
/* The breadcrumbs have air above them; the category badge has its icon and words centred, not bold
("breadcrumbs нямат въздух над тях", "текста в бутончето не е правилно центриран и е прекалено дебел") */
.ss-crumbs { margin: 14px 0 4px; }
.ss-crumbs a.ss-breadcrumb-badge, .breadcrumb-item a.ss-breadcrumb-badge {
display: inline-flex; align-items: center; gap: 6px; line-height: 1; font-weight: 500;
}
.ss-crumbs a.ss-breadcrumb-badge .ss-icon { flex: none; display: block; }
/* The product page: 10 px more between its sections ("увеличи разстоянието м/у секции поне с 10px") */
.ss-product-card-wrapper { margin-bottom: 20px; }
.ss-pp-tabs, .ss-pp-docs, .ss-panel.ss-pp-doc, .ss-product-question-section { margin-bottom: 20px; }
.ss-pp-docs { gap: 20px; }
.ss-pp-docs > .ss-pp-doc { margin: 0; }
.ss-panel.ss-pp-reviews, .ss-panel.ss-pp-recent, .ss-connected { margin-top: 22px; margin-bottom: 20px; }
/* A product shows no glint under the pointer ("Има един ефект на проблясък когато посоча продукт. Искам да го махнем"):
no glint on a product card */
.ss-product-card .ss-product-image::after { content: none; display: none; }
/* ==== ss_tech layer: end ==== */