/* ════════════════════════════════════════════════════════════
   SimpleShop ss_latte theme - foundation
   Editorial premium: Fraunces + Inter + JetBrains Mono
   Palette-aware (14 palettes), mobile-first, self-hosted fonts
   ════════════════════════════════════════════════════════════ */

/* ── @font-face: Fraunces (display serif, latin only - cyrillic falls back to Georgia) ── */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/fraunces/fraunces-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/fraunces/fraunces-latin-italic.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: 'Fraunces';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/fraunces/fraunces-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/fraunces/fraunces-latin-ext-italic.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

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

/* ════════════════════════════════════════════════════════════
   Design tokens (theme-wide constants - neutrals, type, radii)
   ──────────────────────────────────────────────────────────── */
:root {
    /* Brand primary defaults to coral palette. Body class .palette-{name} overrides these. */
    --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;

    /* Neutrals: warm off-white instead of pure white (ss_latte signature) */
    --ss-bg:        #FBF8F4;
    --ss-bg-alt:    #F4EFE8;
    --ss-surface:   #FFFFFF;
    --ss-line:      #E7E0D5;
    --ss-line-soft: #F0EAE0;
    --ss-ink:       #303030;
    --ss-ink-soft:  #4A4640;
    --ss-muted:     #8A847A;

    /* Status (independent of palette) */
    --ss-success:       #2F6B47;
    --ss-success-light: #d1fae5;
    --ss-warning:       #C77D2E;
    --ss-warning-light: #fef3c7;
    --ss-danger:        #B83A2A;
    --ss-danger-light:  #fee2e2;
    --ss-info:          #2A3F5A;
    --ss-info-light:    #e0f2fe;

    /* Typography */
    --ss-serif: 'Fraunces', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
    --ss-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ss-mono:  'JetBrains Mono', ui-monospace, Menlo, Monaco, monospace;

    /* Radii */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 18px;
    --r-xl: 28px;

    /* Card styling (referenced by SS components) */
    --ss-card-bg:           var(--ss-surface);
    --ss-card-shadow:       0 1px 2px rgba(40, 30, 20, 0.04), 0 1px 1px rgba(40, 30, 20, 0.03);
    --ss-card-shadow-hover: 0 12px 32px -12px rgba(40, 25, 15, 0.18), 0 4px 12px -4px rgba(40, 25, 15, 0.08);
    --ss-card-radius:       var(--r-md);
    --ss-card-radius-sm:    var(--r-sm);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(40, 30, 20, 0.04), 0 1px 1px rgba(40, 30, 20, 0.03);
    --shadow-md: 0 4px 12px rgba(40, 30, 20, 0.06), 0 2px 4px rgba(40, 30, 20, 0.04);
    --shadow-lg: 0 18px 48px rgba(40, 30, 20, 0.10), 0 6px 18px rgba(40, 30, 20, 0.06);

    /* Layout */
    --container-max: 1320px;
    --gutter:        14px;

    /* ── Fluid type scale (clamp: min, fluid, max) - mobile-first ── */
    --fs-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);   /* 11.5 → 12.5 */
    --fs-sm:   clamp(0.81rem, 0.78rem + 0.15vw, 0.88rem);   /* 13 → 14 */
    --fs-base: clamp(0.94rem, 0.90rem + 0.20vw, 1.00rem);   /* 15 → 16 */
    --fs-lg:   clamp(1.06rem, 1.00rem + 0.30vw, 1.19rem);   /* 17 → 19 */
    --fs-xl:   clamp(1.25rem, 1.10rem + 0.75vw, 1.50rem);   /* 20 → 24 */
    --fs-2xl:  clamp(1.50rem, 1.30rem + 1.00vw, 2.00rem);   /* 24 → 32 */
    --fs-3xl:  clamp(1.88rem, 1.50rem + 1.88vw, 2.75rem);   /* 30 → 44 */
    --fs-4xl:  clamp(2.25rem, 1.75rem + 2.50vw, 3.75rem);   /* 36 → 60 */

    /* ── Fluid spacing scale ── */
    --sp-xs:  clamp(0.25rem, 0.20rem + 0.25vw, 0.50rem);    /* 4 → 8 */
    --sp-sm:  clamp(0.50rem, 0.40rem + 0.50vw, 0.75rem);    /* 8 → 12 */
    --sp-md:  clamp(0.875rem, 0.70rem + 0.75vw, 1.25rem);   /* 14 → 20 */
    --sp-lg:  clamp(1.25rem, 1.00rem + 1.25vw, 2.00rem);    /* 20 → 32 */
    --sp-xl:  clamp(2.00rem, 1.50rem + 2.50vw, 3.50rem);    /* 32 → 56 */
    --sp-2xl: clamp(3.00rem, 2.00rem + 5.00vw, 5.00rem);    /* 48 → 80 */

    /* Common */
    --ss-text:        var(--ss-ink);
    --ss-text-muted:  var(--ss-muted);
    --ss-text-light:  var(--ss-muted);
    --ss-border:      var(--ss-line);
    --ss-border-light:var(--ss-line-soft);
    --ss-divider:     var(--ss-line-soft);
    --ss-body-bg:     var(--ss-bg);
    --ss-header-bg:   var(--ss-surface);
    --ss-topbar-bg:   #59544e;
    --ss-topbar-text: rgba(255,255,255,0.75);
    --ss-footer-bg:      var(--ss-ink);
    --ss-footer-text:    rgba(255,255,255,0.7);
    --ss-footer-heading: #ffffff;

    /* Pricing */
    --ss-price-normal: var(--ss-ink);
    --ss-price-promo:  var(--ss-primary);
    --ss-price-old:    var(--ss-muted);
    --ss-price-eur:    var(--ss-primary);

    /* Font aliases for SS-wide expectation */
    --ss-font:         var(--ss-sans);
    --ss-font-display: var(--ss-serif);
}

/* ════════════════════════════════════════════════════════════
   14 palettes - body class overrides --ss-primary-* only
   Same names + hex values as ss_default/ss_mosaic for cross-theme compat
   ──────────────────────────────────────────────────────────── */
.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; }
.palette-green  { --ss-primary:#087d5f; --ss-primary-hover:#0a9c75; --ss-primary-dark:#055f48; --ss-primary-light:#cffdf6; --ss-primary-rgb:8,125,95;   --ss-accent-start:#055f48; --ss-accent-mid:#087d5f; --ss-accent-end:#34d399; }
.palette-navy   { --ss-primary:#1e3a5f; --ss-primary-hover:#2c5183; --ss-primary-dark:#142841; --ss-primary-light:#dce4ee; --ss-primary-rgb:30,58,95;   --ss-accent-start:#142841; --ss-accent-mid:#1e3a5f; --ss-accent-end:#4f6e94; }
.palette-red    { --ss-primary:#fb5950; --ss-primary-hover:#ff7a72; --ss-primary-dark:#d33d35; --ss-primary-light:#ffe2df; --ss-primary-rgb:251,89,80;  --ss-accent-start:#d33d35; --ss-accent-mid:#fb5950; --ss-accent-end:#ff8b85; }
.palette-purple { --ss-primary:#a956a9; --ss-primary-hover:#c272c2; --ss-primary-dark:#874487; --ss-primary-light:#f3e2f3; --ss-primary-rgb:169,86,169; --ss-accent-start:#874487; --ss-accent-mid:#a956a9; --ss-accent-end:#cd84cd; }
.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:#5eead4; }
.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; }
.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; }
.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; }
.palette-plum   { --ss-primary:#7c3aed; --ss-primary-hover:#9333ea; --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; }
.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; }
.palette-wine   { --ss-primary:#351E28; --ss-primary-hover:#4a2a39; --ss-primary-dark:#26161e; --ss-primary-light:#e7d8df; --ss-primary-rgb:53,30,40;   --ss-accent-start:#26161e; --ss-accent-mid:#351E28; --ss-accent-end:#6b3d50; }
.palette-orange { --ss-primary:#f59414; --ss-primary-hover:#f8a93a; --ss-primary-dark:#c47010; --ss-primary-light:#fde9cc; --ss-primary-rgb:245,148,20; --ss-accent-start:#c47010; --ss-accent-mid:#f59414; --ss-accent-end:#fbbf75; }
.palette-brown  { --ss-primary:#795740; --ss-primary-hover:#8f6c52; --ss-primary-dark:#5d4131; --ss-primary-light:#e8ddd2; --ss-primary-rgb:121,87,64;  --ss-accent-start:#5d4131; --ss-accent-mid:#795740; --ss-accent-end:#a48168; }

/* ════════════════════════════════════════════════════════════
   Reset
   ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--ss-sans);
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--ss-ink);
    background: var(--ss-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100dvh;
    min-height: 100vh; /* fallback for older browsers */
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* prevent horizontal scroll on mobile */
}
img, picture, video, canvas, svg { max-width: 100%; display: block; }

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

a { color: inherit; text-decoration: none; transition: color 150ms; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
    outline: 2px solid var(--ss-primary);
    outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ss-serif);
    font-weight: 500;
    font-variation-settings: "opsz" 144, "SOFT" 50;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0;
    color: var(--ss-ink);
    text-wrap: balance;
}
p { margin: 0 0 1em 0; text-wrap: pretty; }

/* Skip-to-content for keyboard users */
.skip-to-content {
    position: absolute; top: -40px; left: 0;
    background: var(--ss-ink); color: #fff;
    padding: 8px 16px; z-index: 100;
    transition: top 150ms;
}
.skip-to-content:focus { top: 0; }

/* ════════════════════════════════════════════════════════════
   Layout: container, page wrapper
   ──────────────────────────────────────────────────────────── */
.ss-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
    width: 100%;
}
main { flex: 1; min-width: 0; }

/* Fluid gutter scales smoothly: 14px @ 320px → 24px @ 1280px+ */
@media (min-width: 480px)  { :root { --gutter: 16px; } }
@media (min-width: 768px)  { :root { --gutter: 20px; } }
@media (min-width: 1024px) { :root { --gutter: 24px; } }

/* Touch-friendly tap targets baseline (mobile-first) */
@media (max-width: 767px) {
    a, button, input[type="submit"], input[type="button"], .ss-btn {
        touch-action: manipulation; /* avoid 300ms tap delay on legacy mobile */
    }
}

/* ════════════════════════════════════════════════════════════
   Top utility bar
   ──────────────────────────────────────────────────────────── */
.ss-utility {
    background: var(--ss-topbar-bg);
    color: var(--ss-topbar-text);
    font-size: 12.5px;
    letter-spacing: 0.02em;
    position: relative;
    overflow: hidden;
}
/* Diagonal stripe texture (test) - mirrors footer pattern */
.ss-utility::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        rgba(255, 255, 255, 0.03) 10px,
        rgba(255, 255, 255, 0.03) 11px
    );
    pointer-events: none;
    z-index: 0;
}
.ss-utility > * { position: relative; z-index: 1; }
.ss-utility-row {
    display: flex;
    gap: 24px;
    padding: 9px 0;
    align-items: center;
}
/* The links and the language on the left, the phone and the profile on the right: what ss_default shows, where it shows it */
.ss-utility-left,
.ss-utility-right {
    display: flex; flex-wrap: wrap;
    gap: 8px 22px;
    align-items: center;
}
.ss-utility-right { margin-left: auto; }
.ss-utility a { color: inherit; transition: color 150ms; }
.ss-utility a:hover { color: #fff; }
.ss-utility a:hover i { color: var(--ss-primary); }
.ss-utility i { color: rgba(255,255,255,0.5); font-size: 11px; transition: color 150ms; }

/* ════════════════════════════════════════════════════════════
   Header - sticky main row + nav
   ──────────────────────────────────────────────────────────── */
.ss-header {
    background: var(--ss-header-bg);
    border-bottom: 1px solid var(--ss-line);
    position: sticky; top: 0; z-index: 1030;
}
.ss-header-row {
    /* Mobile: hamburger | logo (centered) | actions (3-col like ss_default) */
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 10px 0;
    min-height: 60px;
}
@media (min-width: 1100px) {
    .ss-header-row {
        grid-template-columns: auto 1fr auto;
        gap: 32px;
        padding: 18px 0;
        min-height: 0;
    }
}

.ss-logo {
    display: flex; align-items: center; gap: 4px;
    font-family: var(--ss-serif);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ss-ink);
    /* Mobile: centered between hamburger and actions */
    justify-self: center;
    min-width: 0;
    overflow: hidden;
}
@media (min-width: 1100px) {
    .ss-logo { font-size: 28px; justify-self: start; overflow: visible; }
}

.ss-logo img { max-height: 34px; width: auto; }
@media (min-width: 1100px) { .ss-logo img { max-height: 38px; } }
.ss-logo-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: var(--ss-primary);
    color: #fff;
    border-radius: 50%;
    font-family: var(--ss-serif);
    font-style: italic;
    font-size: 17px;
    font-weight: 600;
    margin-right: 6px;
}
@media (min-width: 1100px) {
    .ss-logo-mark { width: 36px; height: 36px; font-size: 20px; margin-right: 8px; }
}
.ss-logo small {
    font-family: var(--ss-sans);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--ss-muted);
    text-transform: uppercase;
    margin-left: 6px;
    display: none;
}
@media (min-width: 1100px) { .ss-logo small { display: inline; } }

/* Search bar - hidden on mobile (use search icon → drawer instead, like ss_default) */
.ss-search {
    position: relative;
    width: 100%;
    display: none;
}
@media (min-width: 1100px) {
    .ss-search { max-width: 560px; margin: 0 auto; display: block; }
}

/* Mobile-only search icon button (visible on mobile, hidden on desktop) */
.ss-icon-btn--mobile-only { display: inline-flex; }
@media (min-width: 1100px) {
    .ss-icon-btn--mobile-only { display: none; }
}
.ss-search input {
    width: 100%;
    background: var(--ss-bg);
    border: 1px solid var(--ss-line);
    border-radius: 999px;
    /* 16px font on mobile prevents iOS zoom-on-focus; downsize on desktop */
    padding: 12px 16px 12px 44px;
    font-size: 16px;
    min-height: 44px;
    outline: none;
    transition: border 150ms, background 150ms;
}
@media (min-width: 768px) {
    .ss-search input { font-size: 14px; padding: 11px 16px 11px 44px; }
}
.ss-search input:focus {
    border-color: var(--ss-ink);
    background: #fff;
}
.ss-search > i {
    position: absolute;
    left: 18px; top: 50%; transform: translateY(-50%);
    color: var(--ss-muted);
    font-size: 13px;
    pointer-events: none;
}
.ss-search-shortcut {
    position: absolute;
    right: 10px; top: 50%; transform: translateY(-50%);
    font-family: var(--ss-mono);
    font-size: 11px;
    color: var(--ss-muted);
    background: #fff;
    border: 1px solid var(--ss-line);
    border-radius: 4px;
    padding: 2px 6px;
    display: none;
}
@media (min-width: 1100px) { .ss-search-shortcut { display: block; } }

/* Header actions (icon buttons) */
.ss-header-actions {
    display: flex; align-items: center; gap: 8px;
    justify-self: end;
}
@media (min-width: 1100px) { .ss-header-actions { gap: 8px; } }

/* Vertical dividers between mobile actions (like ss_default) */
@media (max-width: 1099px) {
    .ss-header-actions > .ss-icon-btn + .ss-icon-btn {
        position: relative;
    }
    .ss-header-actions > .ss-icon-btn + .ss-icon-btn::before {
        content: "";
        position: absolute;
        left: -4px;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 18px;
        background: var(--ss-line);
    }
}

.ss-icon-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    /* Mobile: bare icon (no circle bg), 44px tap area still preserved via padding */
    width: auto; height: 44px;
    min-width: 24px;
    padding: 0 4px;
    border-radius: 0;
    color: var(--ss-ink);
    font-size: 16px;
    transition: color 150ms;
    background: none;
}
.ss-icon-btn:hover { background: none; color: var(--ss-primary); }
@media (min-width: 1100px) {
    /* Desktop: revert to round chip style with hover bg */
    .ss-icon-btn {
        width: 42px; height: 42px;
        min-width: 0; padding: 0;
        border-radius: 50%;
        font-size: 15px;
        transition: background 150ms, color 150ms;
    }
    .ss-icon-btn:hover { background: var(--ss-bg-alt); color: var(--ss-ink); }
}
.ss-icon-btn:hover { background: var(--ss-bg-alt); }
.ss-icon-btn .badge {
    position: absolute; top: 4px; right: 4px;
    background: var(--ss-primary);
    color: #fff;
    font-size: 10px; font-weight: 600;
    min-width: 18px; height: 18px;
    border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 5px;
    font-family: var(--ss-sans);
    border: 2px solid #fff;
    line-height: 1;
}
.ss-icon-btn-label {
    display: none;
    flex-direction: column; align-items: flex-start;
    padding: 6px 14px;
    border-radius: var(--r-md);
    text-align: left;
    line-height: 1.2;
    transition: background 150ms;
}
.ss-icon-btn-label:hover { background: var(--ss-bg-alt); }
.ss-icon-btn-label small { font-size: 11px; color: var(--ss-muted); letter-spacing: 0.04em; }
.ss-icon-btn-label strong { font-size: 13.5px; font-weight: 500; color: var(--ss-ink); }
@media (min-width: 1100px) { .ss-icon-btn-label { display: flex; } }

/* Mobile hamburger */
.ss-hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    color: var(--ss-ink);
    font-size: 17px;
    border-radius: 50%;
    transition: background 150ms;
}
.ss-hamburger:hover { background: var(--ss-bg-alt); }
@media (min-width: 1100px) { .ss-hamburger { display: none; } }

/* ── Category nav (priority-nav.js compatible structure) ── */
.ss-nav, .ss-navigation {
    border-top: 1px solid var(--ss-line-soft);
    background: var(--ss-surface);
    display: none;
}
@media (min-width: 1100px) { .ss-nav, .ss-navigation { display: block; } }
.ss-navigation .nav-list {
    display: flex; align-items: center;
    margin: 0; padding: 0;
    list-style: none;
    position: relative;
    flex-wrap: nowrap;
    gap: 0;
}
.ss-navigation .nav-list > li {
    position: relative;
    list-style: none;
}
.ss-navigation .nav-list > li > a {
    display: block;
    position: relative;
    padding: 17px 12px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--ss-ink);
    white-space: nowrap;
    text-decoration: none;
    transition: color 150ms;
}
.ss-navigation .nav-list > li > a:hover { color: var(--ss-primary); }
.ss-navigation .nav-list > li.active > a { color: var(--ss-primary); }
.ss-navigation .nav-list > li.active > a::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 0;
    height: 2px; background: var(--ss-primary);
}

/* Priority+ Navigation: priority-nav.js helper classes */
.nav-priority-hidden { display: none !important; }
.ss-navigation .nav-list:not(.nav-ready) { visibility: hidden; }
.ss-navigation .nav-list > li.nav-more { margin-left: 0; }
.ss-navigation .nav-list > li.nav-more > .nav-more-trigger {
    background: none; border: 0;
    padding: 17px 12px;
    font-family: var(--ss-sans);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ss-ink);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: color 150ms;
}
.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 > .nav-more-trigger .caret {
    width: 0; height: 0;
    border-top: 4px solid currentColor;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    opacity: 0.5;
}
.ss-navigation .nav-list > li.nav-more > .nav-more-dropdown {
    position: absolute;
    top: 100%; right: 0;
    min-width: 220px;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 8px 0; margin: 0;
    list-style: none;
    z-index: 1050;
}
.ss-navigation .nav-list > li > a .caret {
    display: inline-block;
    width: 0; height: 0;
    margin-left: 6px;
    vertical-align: 2px;
    border-top: 4px solid currentColor;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    opacity: 0.5;
}
.ss-navigation .nav-list > li.dropdown:hover > a .caret { opacity: 1; }

/* Auto items (Промо, Нови) pushed to right - both get margin-left: auto, but the second one resets to 0 so they sit close together (when both are present).
   Note: priority-nav.js inserts a .nav-more element right BEFORE the first nav-auto. Do NOT add a `.nav-more + .nav-auto` margin override - it would beat margin-left:auto and break the right alignment. The auto push provides natural separation from nav-more. */
.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; }
.ss-navigation .nav-list > li.nav-auto > a i { margin-right: 4px; opacity: 0.6; }
/* Promo (red) + New (green) auto items - 1:1 with ss_default */
.ss-navigation .nav-list > li.nav-auto-promo > a {
    color: #dc2626;
    font-weight: 600;
    transition: color 150ms, background 150ms;
}
.ss-navigation .nav-list > li.nav-auto-promo > a i {
    color: #dc2626; opacity: 1;
    transition: color 150ms;
}
.ss-navigation .nav-list > li.nav-auto-promo > a:hover,
.ss-navigation .nav-list > li.nav-auto-promo.active > a {
    background: #fef2f2;
    color: #b91c1c;
    border-radius: var(--r-sm);
}
.ss-navigation .nav-list > li.nav-auto-promo.active > a::after { display: none; }

.ss-navigation .nav-list > li.nav-auto-new > a {
    color: #059669;
    font-weight: 600;
    transition: color 150ms, background 150ms;
}
.ss-navigation .nav-list > li.nav-auto-new > a i {
    color: #059669; opacity: 1;
    transition: color 150ms;
}
.ss-navigation .nav-list > li.nav-auto-new > a:hover,
.ss-navigation .nav-list > li.nav-auto-new.active > a {
    background: #f0fdf4;
    color: #047857;
    border-radius: var(--r-sm);
}
.ss-navigation .nav-list > li.nav-auto-new.active > a::after { display: none; }

/* Dropdown menu (sub-categories) */
.ss-navigation .nav-list > li.dropdown > .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    min-width: 220px;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    margin: 0; padding: 8px 0;
    list-style: none;
    z-index: 1050;
}
.ss-navigation .nav-list > li.dropdown:hover > .dropdown-menu,
.ss-navigation .nav-list > li.dropdown:focus-within > .dropdown-menu {
    display: block;
}
/* Hover bridge: invisible 12px area between trigger and dropdown so cursor doesn't fall into a gap */
.ss-navigation .nav-list > li.dropdown > .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -12px; left: 0; right: 0;
    height: 12px;
    pointer-events: auto;
}
.ss-navigation .dropdown-menu li { list-style: none; }
.ss-navigation .dropdown-menu .dropdown-item {
    display: block;
    padding: 9px 18px;
    font-size: 14px;
    color: var(--ss-ink-soft);
    text-decoration: none;
    white-space: nowrap;
    transition: color 150ms, background 150ms, padding-left 150ms;
}
.ss-navigation .dropdown-menu .dropdown-item:hover {
    color: var(--ss-primary);
    background: var(--ss-bg-alt);
    padding-left: 22px;
}
.ss-navigation .dropdown-menu .dropdown-item.active {
    color: var(--ss-primary);
    background: var(--ss-bg-alt);
    font-weight: 500;
}

/* Mobile menu drawer */
.ss-mobile-menu {
    position: fixed;
    top: 0; right: -100%;
    width: 100%; max-width: 360px;
    height: 100dvh;
    background: var(--ss-surface);
    z-index: 100;
    overflow-y: auto;
    transition: right 280ms cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -8px 0 32px rgba(0,0,0,0.2);
}
.ss-mobile-menu.is-open { right: 0; }
.ss-mobile-menu-backdrop {
    position: fixed; inset: 0;
    background: rgba(26,24,21,0.5);
    z-index: 99;
    opacity: 0; pointer-events: none;
    transition: opacity 200ms;
}
.ss-mobile-menu-backdrop.is-open { opacity: 1; pointer-events: auto; }
.ss-mobile-menu-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ss-line);
}
.ss-mobile-menu-list {
    list-style: none; padding: 12px 0; margin: 0;
}
.ss-mobile-menu-list li a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px;
    font-size: 15px;
    color: var(--ss-ink);
    transition: background 120ms;
    min-height: 44px;
}
.ss-mobile-menu-list li a:hover { background: var(--ss-bg-alt); }
.ss-mobile-menu-list li a i { color: var(--ss-muted); font-size: 11px; }

/* ════════════════════════════════════════════════════════════
   Buttons
   ──────────────────────────────────────────────────────────── */
.ss-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px;
    border-radius: var(--r-sm);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: background 150ms, transform 150ms, box-shadow 150ms, color 150ms, border-color 150ms;
    white-space: nowrap;
    min-height: 44px;
    cursor: pointer;
    text-align: center;
    border: 1px solid transparent;
}
.ss-btn:disabled, .ss-btn.is-disabled { opacity: 0.5; cursor: not-allowed; }

.ss-btn-primary { background: var(--ss-ink); color: #fff; border-color: var(--ss-ink); }
.ss-btn-primary:hover:not(:disabled) { background: var(--ss-primary); border-color: var(--ss-primary); }

.ss-btn-accent { background: var(--ss-primary); color: #fff; border-color: var(--ss-primary); }
.ss-btn-accent:hover:not(:disabled) { background: var(--ss-primary-dark); border-color: var(--ss-primary-dark); }

.ss-btn-outline {
    background: transparent;
    color: var(--ss-ink);
    border-color: var(--ss-ink);
}
.ss-btn-outline:hover:not(:disabled) { background: var(--ss-ink); color: #fff; }

.ss-btn-ghost {
    background: var(--ss-bg-alt);
    color: var(--ss-ink);
    border-color: transparent;
}
.ss-btn-ghost:hover:not(:disabled) { background: var(--ss-line); }

.ss-btn-lg { padding: 16px 28px; font-size: 15px; }
.ss-btn-block { display: flex; width: 100%; }

/* ════════════════════════════════════════════════════════════
   Tags / Badges
   ──────────────────────────────────────────────────────────── */
.ss-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 3px;
    background: var(--ss-ink);
    color: #fff;
    font-family: var(--ss-sans);
    line-height: 1.2;
}
.ss-tag-promo { background: var(--ss-primary); color: #fff; }
.ss-tag-new   { background: var(--ss-info); color: #fff; }
.ss-tag-soft  { background: var(--ss-primary-light); color: var(--ss-primary-dark); }
.ss-tag-muted { background: var(--ss-line); color: var(--ss-ink-soft); }

/* ════════════════════════════════════════════════════════════
   Section headings
   ──────────────────────────────────────────────────────────── */
.ss-section { margin: 48px 0; }
@media (min-width: 1100px) { .ss-section { margin: 80px 0; } }

.ss-section-head {
    display: flex; flex-direction: column; align-items: flex-start;
    margin-bottom: 24px;
    gap: 12px;
}
@media (min-width: 1100px) {
    .ss-section-head {
        flex-direction: row; align-items: end; justify-content: space-between;
        margin-bottom: 36px; gap: 24px;
    }
}
.ss-section-head .eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ss-primary);
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}
.ss-section-head h2 {
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.02em;
}
@media (min-width: 1100px) { .ss-section-head h2 { font-size: 40px; } }
.ss-section-head h2 em { font-style: italic; color: var(--ss-primary); }
.ss-section-head p { color: var(--ss-ink-soft); margin-top: 8px; max-width: 540px; }
.ss-section-head .link {
    font-size: 14px;
    color: var(--ss-ink);
    font-weight: 500;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    white-space: nowrap;
}
.ss-section-head .link:hover { color: var(--ss-primary); }

/* ════════════════════════════════════════════════════════════
   Breadcrumbs
   ──────────────────────────────────────────────────────────── */
.ss-crumbs-bar {
    background: var(--ss-bg-alt);
    margin-bottom: 24px;
}
@media (min-width: 1100px) { .ss-crumbs-bar { margin-bottom: 32px; } }
/* Parent category variant: transparent bg, no margin (mockup) */
.ss-crumbs-bar.ss-crumbs-bar--transparent {
    background: transparent;
    margin-bottom: 0;
}
.ss-crumbs {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    /* Left padding 12px → aligns first text with first nav link's text (which has padding-left: 12px) */
    padding: 18px 0 18px 12px;
    font-size: 12.5px;
    color: var(--ss-muted);
}
.ss-crumbs a,
.ss-crumbs .current {
    padding: 5px 0;
    transition: color 150ms;
    line-height: 1;
}
.ss-crumbs a:hover { color: var(--ss-ink); }
.ss-crumbs .sep { opacity: 0.4; font-size: 9px; padding: 5px 0; }
.ss-crumbs .current { color: var(--ss-ink); font-weight: 500; }
.ss-crumbs-home {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ss-muted);
    font-size: 13px;
    padding: 5px 0;
    transition: color 150ms;
}
.ss-crumbs-home:hover { color: var(--ss-primary); }

/* ════════════════════════════════════════════════════════════
   Tabs (product page)
   ──────────────────────────────────────────────────────────── */
.ss-tabs {
    display: flex; gap: 18px;
    border-bottom: 1px solid var(--ss-line);
    margin-bottom: 24px;
    overflow-x: auto;
    -ms-overflow-style: none; scrollbar-width: none;
}
.ss-tabs::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .ss-tabs { gap: 32px; margin-bottom: 32px; } }

.ss-tab {
    padding: 16px 0;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--ss-muted);
    position: relative;
    cursor: pointer;
    transition: color 150ms;
    white-space: nowrap;
    background: none; border: 0;
}
.ss-tab:hover { color: var(--ss-ink); }
.ss-tab.is-active { color: var(--ss-ink); }
.ss-tab.is-active::after {
    content: ""; position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--ss-ink);
}
.ss-tab .count {
    display: inline-block; margin-left: 6px;
    font-size: 12px; color: var(--ss-muted);
}

/* ════════════════════════════════════════════════════════════
   Footer
   ──────────────────────────────────────────────────────────── */
.ss-footer {
    background: var(--ss-footer-bg);
    color: var(--ss-footer-text);
    padding: 48px 0 0 0;
    /* Single source of truth for spacing between page content and footer.
       Per-page padding-bottom / pager margin-bottom hacks should be avoided. */
    margin-top: 32px;
    position: relative;
    overflow: hidden;
}
@media (min-width: 1100px) { .ss-footer { margin-top: 64px; } }
/* Neutralize the last child's bottom margin so it doesn't add to footer's margin-top */
main > .ss-page > *:last-child,
.ss-page > .ss-container > *:last-child,
.ss-page > *:last-child,
.ss-section:last-of-type { margin-bottom: 0; }
/* Diagonal stripe texture overlay (1:1 from ss_mosaic) - subtle white lines on dark bg */
.ss-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        rgba(255, 255, 255, 0.03) 10px,
        rgba(255, 255, 255, 0.03) 11px
    );
    pointer-events: none;
    z-index: 0;
}
.ss-footer > * { position: relative; z-index: 1; }
@media (min-width: 1100px) {
    .ss-footer { padding: 64px 0 0 0; }
}
.ss-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 32px;
}
@media (min-width: 768px)  { .ss-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (min-width: 1100px) {
    .ss-footer-grid {
        grid-template-columns: 1.6fr 0.9fr 0.9fr 1.2fr 1.6fr;
        gap: 24px;
        margin-bottom: 56px;
    }
}
.ss-footer-contact {
    display: flex; gap: 12px; align-items: flex-start;
    margin-bottom: 14px; font-size: 13.5px;
    line-height: 1.5;
}
.ss-footer-contact > i {
    color: var(--ss-primary);
    font-size: 14px;
    margin-top: 3px; flex-shrink: 0;
}
.ss-footer-contact strong {
    display: block;
    color: var(--ss-footer-heading);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.ss-footer-contact a { transition: color 150ms; }
.ss-footer-contact a:hover { color: #fff; }
.ss-footer-powered a {
    color: inherit;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}
.ss-footer-powered a:hover { color: #fff; }

.ss-footer-brand h3 {
    color: var(--ss-footer-heading);
    font-size: 22px;
    margin-bottom: 14px;
}
@media (min-width: 1100px) { .ss-footer-brand h3 { font-size: 26px; } }
.ss-footer-brand p { font-size: 14px; line-height: 1.6; max-width: 320px; margin-bottom: 20px; }
/* Card marks between the slogan and the social icons: the official files on a white tile, never recoloured */
.ss-footer-cards { max-width: 320px; margin-bottom: 20px; }
.ss-footer-cards--ruled { padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.ss-footer-cards-title { display: block; margin-bottom: 10px; font-size: 13px; }
.ss-cardmarks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ss-cardmarks-item { width: 66px; height: 40px; border-radius: 8px; background: #fff; overflow: hidden; }
.ss-cardmarks-item img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ss-footer-social { display: flex; gap: 8px; }
.ss-footer-social a {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    transition: background 150ms, color 150ms, border-color 150ms;
}
.ss-footer-social a:hover {
    background: var(--ss-primary);
    border-color: var(--ss-primary);
    color: #fff;
}

.ss-footer-col h6 {
    font-family: var(--ss-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ss-footer-heading);
    margin-bottom: 18px;
    font-weight: 600;
}
.ss-footer-col ul { list-style: none; padding: 0; margin: 0; }
.ss-footer-col li { margin-bottom: 9px; }
.ss-footer-col a,
.ss-footer-col .ss-footer-btn {
    font-size: 14px;
    color: var(--ss-footer-text);
    transition: color 150ms;
    background: none; border: 0; padding: 0;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}
.ss-footer-col a:hover,
.ss-footer-col .ss-footer-btn:hover { color: #fff; }

.ss-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 20px 0 24px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    flex-wrap: wrap;
    gap: 12px;
    text-align: center;
}
@media (min-width: 1100px) {
    .ss-footer-bottom {
        flex-direction: row; padding: 24px 0 28px 0;
        font-size: 12.5px; text-align: left;
    }
}
.ss-footer-payments { display: flex; gap: 6px; align-items: center; opacity: 0.6; flex-wrap: wrap; justify-content: center; }
.ss-footer-payments span {
    background: rgba(255,255,255,0.1);
    padding: 4px 9px;
    border-radius: 3px;
    font-size: 11px;
    letter-spacing: 0.04em;
    font-weight: 500;
    color: #fff;
}

/* ════════════════════════════════════════════════════════════
   Utility
   ──────────────────────────────────────────────────────────── */
.ss-muted { color: var(--ss-muted); }
.ss-divider {
    height: 1px;
    background: var(--ss-line);
    margin: 24px 0;
    border: 0;
}
@media (min-width: 1100px) { .ss-divider { margin: 32px 0; } }

.ss-visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Notification bar (palette-driven via inline style; component covers contrast) */
.ss-notification-bar {
    text-align: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
}
.ss-notification-bar a { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════
   Header dropdown navigation (replaces mega menu, simpler dropdown)
   ──────────────────────────────────────────────────────────── */
.ss-nav-item {
    position: relative;
}
.ss-nav-item .ss-nav-link { padding-right: 14px; }
.ss-nav-dropdown {
    position: absolute;
    top: 100%; left: 0;
    min-width: 220px;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 8px 0;
    z-index: 1050;
    opacity: 0; visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 180ms, transform 180ms, visibility 180ms;
}
.ss-nav-item:hover .ss-nav-dropdown,
.ss-nav-item:focus-within .ss-nav-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.ss-nav-dropdown a {
    display: block;
    padding: 9px 18px;
    font-size: 14px;
    color: var(--ss-ink-soft);
    transition: color 150ms, background 150ms;
}
.ss-nav-dropdown a:hover { color: var(--ss-primary); background: var(--ss-bg-alt); }
.ss-nav-dropdown a.is-active { color: var(--ss-primary); font-weight: 500; }

/* ════════════════════════════════════════════════════════════
   Live search dropdown (header)
   ──────────────────────────────────────────────────────────── */
.ss-live-search-dropdown {
    position: absolute;
    top: calc(100% + 8px); left: 0; right: 0;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    z-index: 1050;
    overflow: hidden;
    max-height: 70vh;
    overflow-y: auto;
}
.ss-live-search-item {
    display: flex; gap: 12px; align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ss-line-soft);
    transition: background 150ms;
}
.ss-live-search-item:hover { background: var(--ss-bg-alt); }
.ss-live-search-item:last-of-type { border-bottom: 0; }
.ss-live-search-img {
    width: 56px; height: 56px;
    object-fit: cover;
    border-radius: var(--r-sm);
    flex-shrink: 0;
    background: var(--ss-bg-alt);
}
.ss-live-search-info { flex: 1; min-width: 0; }
.ss-live-search-title {
    font-size: 14px; font-weight: 500;
    color: var(--ss-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ss-live-search-meta {
    font-size: 11px; color: var(--ss-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-top: 2px;
}
.ss-live-search-price {
    font-size: 13px; color: var(--ss-ink);
    margin-top: 4px; font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.ss-live-search-old {
    text-decoration: line-through;
    color: var(--ss-muted);
    margin-right: 8px;
    font-weight: 400;
}
.ss-live-search-all {
    display: block;
    padding: 14px 16px;
    text-align: center;
    background: var(--ss-bg-alt);
    color: var(--ss-primary);
    font-size: 13px; font-weight: 500;
    border-top: 1px solid var(--ss-line);
}
.ss-live-search-all:hover { background: var(--ss-primary-light); }

/* ════════════════════════════════════════════════════════════
   Mobile drill-down sidenav (preserved UX from ss_mosaic)
   ──────────────────────────────────────────────────────────── */
.ss-sidenav-overlay {
    position: fixed; inset: 0;
    background: rgba(26,24,21,0.5);
    z-index: 1090; /* above sticky header (1030) */
    opacity: 0; pointer-events: none;
    transition: opacity 200ms;
}
.ss-sidenav-overlay.open { opacity: 1; pointer-events: auto; }

.ss-sidenav {
    position: fixed;
    top: 0; left: -100%;
    width: 100%; max-width: 380px;
    height: 100dvh;
    background: var(--ss-surface);
    z-index: 1100; /* above overlay (1090) and sticky header (1030) */
    overflow: hidden;
    transition: left 280ms cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 8px 0 32px rgba(0,0,0,0.18);
    display: flex; flex-direction: column;
}
.ss-sidenav.open { left: 0; }

.ss-drawer-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ss-line);
    flex-shrink: 0;
}
.ss-drawer-logo {
    display: flex; align-items: center; gap: 6px;
    font-size: 22px; font-family: var(--ss-serif);
    color: var(--ss-ink);
}
.ss-drawer-logo img { max-height: 36px; width: auto; }
.ss-drawer-close {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--ss-bg-alt);
    color: var(--ss-ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    transition: background 150ms;
}
.ss-drawer-close:hover { background: var(--ss-line); }

.ss-drawer-search {
    position: relative;
    margin: 14px 18px 0;
    flex-shrink: 0;
}
.ss-drawer-search-icon {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--ss-muted); font-size: 13px;
    pointer-events: none;
}
.ss-drawer-search-input {
    width: 100%;
    background: var(--ss-bg);
    border: 1px solid var(--ss-line);
    border-radius: 999px;
    padding: 12px 50px 12px 42px;
    font-size: 16px; /* mobile-first: prevent iOS zoom-on-focus */
    min-height: 44px;
    outline: none;
    transition: border 150ms;
}
.ss-drawer-search-input:focus { border-color: var(--ss-ink); background: #fff; }
.ss-drawer-search-submit {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--ss-primary);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    transition: background 150ms;
}
.ss-drawer-search-submit:hover { background: var(--ss-primary-dark); }

.ss-drawer-pills {
    display: flex; gap: 8px;
    padding: 14px 18px 0;
    flex-shrink: 0;
}
.ss-drawer-pill {
    flex: 1 1 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    background: var(--ss-bg-alt);
    color: var(--ss-ink);
    min-height: 44px;
    text-align: center;
}
.ss-drawer-pill {
    transition: background 150ms, color 150ms, transform 100ms;
    cursor: pointer;
    border: 0;
}
.ss-drawer-pill:hover { background: var(--ss-line); color: var(--ss-ink); }
.ss-drawer-pill:active { transform: scale(0.97); }

.ss-drawer-pill--promo { background: #dc2626; color: #fff; }
.ss-drawer-pill--promo:hover { background: #b91c1c; color: #fff; }
.ss-drawer-pill--promo:active { transform: scale(0.97); }

.ss-drawer-pill--new { background: #059669; color: #fff; }
.ss-drawer-pill--new:hover { background: #047857; color: #fff; }
.ss-drawer-pill--new:active { transform: scale(0.97); }

.ss-drawer-panes {
    position: relative;
    flex: 1;
    overflow: hidden;
}
.ss-drawer-pane {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
    padding: 14px 0 24px;
}
.ss-drawer-pane--root { transform: translateX(0); }
.ss-drawer-pane--child { transform: translateX(100%); }
.ss-drawer-panes--child-open .ss-drawer-pane--root { transform: translateX(-100%); }
.ss-drawer-panes--child-open .ss-drawer-pane--child { transform: translateX(0); }

.ss-drawer-section-label {
    padding: 12px 18px 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ss-muted);
    font-weight: 600;
}

.ss-drawer-list {
    list-style: none;
    padding: 0; margin: 0;
}
.ss-drawer-row {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    padding: 14px 18px;
    background: none; border: 0;
    color: var(--ss-ink);
    font-size: 15px;
    text-align: left;
    transition: background 120ms;
    min-height: 48px;
}
.ss-drawer-row:hover, .ss-drawer-row:focus-visible { background: var(--ss-bg-alt); outline: none; }
.ss-drawer-row-label {
    display: inline-flex; align-items: center; gap: 12px;
    flex: 1;
    font-weight: 500;
}
.ss-drawer-row-icon { color: var(--ss-muted); font-size: 14px; width: 18px; text-align: center; }
.ss-drawer-row-chev { color: var(--ss-muted); font-size: 11px; flex-shrink: 0; }
.ss-drawer-row-badge {
    background: var(--ss-primary); color: #fff;
    font-size: 11px; font-weight: 600;
    padding: 1px 7px; border-radius: 9px;
    margin-left: 8px;
}
.ss-drawer-row--admin .ss-drawer-row-icon { color: var(--ss-primary); }
.ss-drawer-row--muted { color: var(--ss-muted); }
.ss-drawer-row--parent-link { color: var(--ss-primary); font-weight: 500; }

.ss-drawer-child-header {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px 8px 8px;
    border-bottom: 1px solid var(--ss-line);
    margin-bottom: 6px;
    position: sticky; top: 0;
    background: var(--ss-surface);
    z-index: 1;
}
.ss-drawer-back {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--ss-bg-alt);
    color: var(--ss-ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
}
.ss-drawer-back:hover { background: var(--ss-line); }
.ss-drawer-child-title {
    font-family: var(--ss-serif);
    font-size: 19px;
    font-weight: 500;
    color: var(--ss-ink);
}
.ss-drawer-logout-form { width: 100%; }

.ss-drawer-footer {
    flex-shrink: 0;
    padding: 14px 18px;
    border-top: 1px solid var(--ss-line);
    display: flex; justify-content: space-between; align-items: center;
    background: var(--ss-bg-alt);
    font-size: 13px;
}
.ss-drawer-footer-phone { color: var(--ss-ink); font-weight: 500; }
.ss-drawer-footer-phone i { color: var(--ss-primary); margin-right: 4px; }
.ss-drawer-footer-lang a { color: var(--ss-muted); padding: 0 4px; }
.ss-drawer-footer-lang a.active { color: var(--ss-ink); font-weight: 600; }

/* ════════════════════════════════════════════════════════════
   Back to top button
   ──────────────────────────────────────────────────────────── */
/* Кръг 45 x 45 с пръстен, който се пълни с превъртането (както на сайта за ремонт); цветът е от избраната палитра. */
.ss-back-to-top {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 10001;
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    padding: 0;
    border: 1px solid var(--ss-line);
    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: #fbf8f4;
    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: 24px;
        bottom: 24px;
    }
}
@media print {
    .ss-back-to-top { display: none !important; }
}
/* When cookie consent banner is visible, lift back-to-top above it */
body:has(.ss-consent.show) .ss-back-to-top { bottom: 180px; }
@media (min-width: 768px) {
    body:has(.ss-consent.show) .ss-back-to-top { bottom: 130px; }
}

/* ════════════════════════════════════════════════════════════
   No-image fallback
   ──────────────────────────────────────────────────────────── */
.ss-no-image {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    background: var(--ss-bg-alt);
    color: var(--ss-muted);
    font-size: 24px;
}

/* ════════════════════════════════════════════════════════════
   Product Card (used on home, category, search, related, wishlist)
   ──────────────────────────────────────────────────────────── */
.ss-card {
    background: var(--ss-surface);
    position: relative;
    display: flex; flex-direction: column;
    cursor: pointer;
    border: 1px solid var(--ss-line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 250ms ease,
                border-color 200ms ease;
    text-decoration: none;
    color: inherit;
}
.ss-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ss-card-shadow-hover);
    border-color: transparent;
}
.ss-card-image {
    aspect-ratio: 1 / 1;
    background: var(--ss-bg-alt);
    position: relative;
    overflow: hidden;
}
.ss-card-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ss-card:hover .ss-card-image img { transform: scale(1.04); }

.ss-card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
@media (min-width: 768px) { .ss-card-body { padding: 16px 18px 18px; } }

.ss-card-badges {
    position: absolute; top: 10px; left: 10px;
    display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
    z-index: 2;
}
.ss-card-wishlist {
    position: absolute; top: 10px; right: 10px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(6px);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ss-ink-soft);
    transition: opacity 200ms, transform 200ms, color 150ms, background 150ms;
    z-index: 3;
    border: 0;
    cursor: pointer;
    /* On mobile, always visible. On desktop, fade-in on hover. */
    opacity: 1;
    transform: translateY(0);
}
@media (hover: hover) and (pointer: fine) {
    .ss-card-wishlist { opacity: 0; transform: translateY(-4px); }
    .ss-card:hover .ss-card-wishlist { opacity: 1; transform: translateY(0); }
}
.ss-card-wishlist:hover { color: #dc2626; }
.ss-card-wishlist.is-active { color: #dc2626; opacity: 1; transform: translateY(0); }
.ss-card-wishlist.is-active i.fas { color: #dc2626; }
/* Heart filled = red, regardless of context (product show, cart, wishlist card) */
.ss-pp-buy-secondary .ss-btn-outline.is-active i.fa-heart,
.ss-cart-wishlist-btn.is-active i.fa-heart,
.ss-wishlist-btn.is-active i.fa-heart,
i.fas.fa-heart.ss-heart-filled { color: #dc2626; }

.ss-card-video {
    position: absolute; top: 10px; right: 56px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    color: #c4302b;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    backdrop-filter: blur(6px);
    z-index: 3;
}
.ss-card-video:hover { background: #c4302b; color: #fff; }

.ss-card-brand {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ss-muted);
    margin-bottom: 6px;
    font-weight: 500;
}
.ss-card-title {
    font-family: var(--ss-serif);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--ss-ink);
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}
@media (min-width: 768px) { .ss-card-title { font-size: 16px; } }
.ss-card-title a { color: inherit; }
.ss-card-title a:hover { color: var(--ss-primary); }

.ss-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ss-card-rating { display: inline-flex; gap: 2px; color: var(--ss-warning); font-size: 12px; }
.ss-card-rating-count { font-size: 12px; color: var(--ss-muted); }

.ss-card-swatches { display: flex; align-items: center; gap: 6px; margin-top: auto; margin-bottom: 12px; min-height: 18px; flex-wrap: wrap; }
.ss-card-swatch {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
    display: inline-block;
}
.ss-card-swatch-more {
    font-size: 11px; color: var(--ss-muted);
    margin-left: 2px; font-weight: 500;
}

.ss-card-pricing {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--ss-line);
}
/* If swatches are absent, push pricing itself to the bottom of the card body. */
.ss-card-body:not(:has(.ss-card-swatches)) .ss-card-pricing { margin-top: auto; }
.ss-card-price-stack {
    display: flex; flex-direction: column;
    gap: 3px; min-width: 0; flex: 1;
}
.ss-card-price-old {
    font-size: 11.5px;
    color: var(--ss-muted);
    text-decoration: line-through;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    letter-spacing: 0.01em;
}
.ss-card-price-eur {
    font-family: var(--ss-sans);
    font-size: 18px;
    font-weight: 600;
    color: var(--ss-ink);
    line-height: 1.05;
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
    transition: color 0.18s ease;
    white-space: nowrap;
}
@media (min-width: 768px) { .ss-card-price-eur { font-size: 19px; } }
.ss-card-price-eur.is-promo { color: var(--ss-primary); }
.ss-card:hover .ss-card-price-eur { color: var(--ss-primary-dark); }

.ss-card-price-callus {
    font-family: var(--ss-serif);
    font-size: 15px;
    font-style: italic;
    color: var(--ss-primary);
}

.ss-card-action {
    flex-shrink: 0;
    display: flex; align-items: flex-end;
    position: relative;
}
.ss-card-action-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--ss-ink);
    color: #fff;
    border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.18s ease;
}
.ss-card-action-btn:hover { background: var(--ss-primary); }
.ss-card-action-btn.is-call { background: var(--ss-muted); }
.ss-card-action-btn.is-call:hover { background: var(--ss-primary); }

/* ════════════════════════════════════════════════════════════
   Home page: Hero carousel
   ──────────────────────────────────────────────────────────── */
.ss-hero {
    position: relative;
    display: grid;
    min-height: 360px;
    overflow: hidden;
    background: var(--ss-bg-alt);
}
@media (min-width: 768px)  { .ss-hero { min-height: 420px; } }
@media (min-width: 1100px) { .ss-hero { min-height: 480px; } }

/* The slides share one grid cell: the banner is as tall as its longest slide, nothing is cut */
.ss-hero-slide {
    position: relative;
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    opacity: 0;
    transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.ss-hero-slide.is-active { opacity: 1; pointer-events: auto; }
@media (min-width: 1100px) {
    .ss-hero-slide {
        grid-template-columns: 54fr 46fr; /* a little more of the width for the text */
        /* The sides are those of the page column; the photo keeps 24 px from the top and the bottom */
        padding: 24px max(var(--gutter), calc((100% - var(--container-max)) / 2 + var(--gutter)));
    }
}

.ss-hero-content {
    padding: 0 var(--gutter);
    max-width: 100%;
    z-index: 2; position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
@media (min-width: 1100px) {
    .ss-hero-content { padding: 16px 32px 16px 0; }
    /* Room under the text only when the counter and the dots are drawn: they sit in it */
    .ss-hero--controls .ss-hero-content { padding-bottom: 72px; }
}

.ss-hero-title {
    font-size: 40px;
    line-height: 1.05;
    font-weight: 400;
    letter-spacing: -0.025em;
    margin-bottom: 16px;
    color: var(--ss-ink);
}
@media (min-width: 768px)  { .ss-hero-title { font-size: 56px; margin-bottom: 20px; } }
@media (min-width: 1100px) { .ss-hero-title { font-size: 78px; margin-bottom: 24px; } }
.ss-hero-title em {
    font-style: italic;
    color: var(--ss-primary);
}

.ss-hero-sub {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ss-ink-soft);
    max-width: 460px;
    margin-bottom: 24px;
}
@media (min-width: 1100px) { .ss-hero-sub { font-size: 17px; margin-bottom: 32px; } }

.ss-hero-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.ss-hero-image {
    position: relative;
    overflow: hidden;
    display: none;
}
@media (min-width: 1100px) {
    .ss-hero-image { display: block; align-self: stretch; }
}
.ss-hero-img-content {
    position: absolute;
    inset: 0;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--ss-bg-alt);
}
.ss-hero-img-content picture { display: contents; } /* the image sizes against its box, not the inline picture */
.ss-hero-img-content img {
    width: 100%; height: 100%;
    object-fit: cover; /* the photo fills its box; the box is rounded on every side */
    object-position: center center;
    display: block;
}

.ss-hero-controls {
    position: absolute;
    bottom: 16px;
    left: var(--gutter);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 3;
}
@media (min-width: 1100px) {
    .ss-hero-controls {
        bottom: 36px;
        left: max(var(--gutter), calc((100% - var(--container-max)) / 2 + var(--gutter)));
        gap: 16px;
    }
}
.ss-hero-dots { display: flex; gap: 6px; }
.ss-hero-dot {
    width: 22px; height: 2px;
    background: rgba(26,24,21,0.2);
    cursor: pointer;
    transition: background 200ms;
    border: 0;
    padding: 0;
}
@media (min-width: 1100px) { .ss-hero-dot { width: 28px; } }
.ss-hero-dot.is-active { background: var(--ss-ink); }
.ss-hero-counter {
    font-family: var(--ss-mono);
    font-size: 11px;
    color: var(--ss-muted);
    letter-spacing: 0.04em;
}
@media (min-width: 1100px) { .ss-hero-counter { font-size: 12px; } }

/* Mobile/tablet: stacked layout - image at top (fixed height),
   clean white text card below. Subtitle clamped to 4 lines so the
   button always fits. Uses mobile_image_url via <picture>. */
@media (max-width: 1099px) {
    .ss-hero {
        height: auto !important;
        min-height: 480px;
    }
    .ss-hero-image {
        display: block !important;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 240px;
        z-index: 0;
    }
    .ss-hero-img-content {
        position: absolute !important;
        inset: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
    }
    .ss-hero-img-content img {
        object-fit: cover !important;
    }
    .ss-hero-content {
        position: relative;
        margin-top: 240px;
        min-height: 240px;
        height: auto;
        align-self: start;
        z-index: 2;
        padding: 18px var(--gutter);
        background: var(--ss-surface);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .ss-hero--controls .ss-hero-content { padding-bottom: 44px; } /* the counter and the dots sit in it */
    .ss-hero-title { font-size: 30px; margin-bottom: 10px; }
    .ss-hero-sub {
        max-width: none;
        margin-bottom: 16px;
        font-size: 14px;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .ss-hero-controls { z-index: 3; bottom: 12px; }
    .ss-hero-actions { margin-bottom: 16px; }
}

/* ════════════════════════════════════════════════════════════
   Home page: Categories grid (8 tiles, themed mini-tiles)
   ──────────────────────────────────────────────────────────── */
.ss-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (min-width: 480px)  { .ss-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px)  { .ss-cat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .ss-cat-grid { grid-template-columns: repeat(8, 1fr); gap: 12px; } }

.ss-cat-tile {
    background: var(--ss-surface);
    border: 1px solid var(--ss-line-soft);
    border-radius: var(--r-md);
    overflow: hidden;
    cursor: pointer;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms, border-color 220ms;
    display: flex; flex-direction: column;
    text-decoration: none; color: inherit;
}
.ss-cat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--ss-line); }
.ss-cat-tile-image {
    aspect-ratio: 1 / 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 4px;
    padding: 4px;
    background: var(--ss-bg-alt);
}
.ss-cat-tile-mini {
    border-radius: 3px;
    background: var(--ss-surface);
    position: relative;
    overflow: hidden;
    transition: filter 220ms ease, transform 220ms ease;
}
/* Colored placeholder when no product image */
.ss-cat-tile-mini:not(:has(img)) {
    background: linear-gradient(135deg, hsl(var(--th, 28) 24% 78%), hsl(calc(var(--th, 28) + 10) 18% 66%));
}
.ss-cat-tile-mini:not(:has(img))::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 55%);
}
.ss-cat-tile-mini img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.ss-cat-tile:hover .ss-cat-tile-mini { filter: brightness(1.08) saturate(1.1); }
.ss-cat-tile-foot {
    padding: 12px 10px 14px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-align: center;
}
.ss-cat-title {
    font-family: var(--ss-serif);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--ss-ink);
    line-height: 1.15;
}
@media (min-width: 1100px) { .ss-cat-title { font-size: 14px; } }
.ss-cat-count { font-size: 10px; color: var(--ss-muted); letter-spacing: 0.04em; }

/* ════════════════════════════════════════════════════════════
   Home page: USPs grid (4 columns)
   ──────────────────────────────────────────────────────────── */
.ss-usp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border: 1px solid var(--ss-line);
    border-radius: var(--r-md);
    background: var(--ss-bg-alt);
    overflow: hidden;
}
@media (min-width: 768px)  { .ss-usp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ss-usp-grid { grid-template-columns: repeat(4, 1fr); } }

.ss-usp {
    padding: 28px 22px 24px;
    border-bottom: 1px solid var(--ss-line);
    display: flex; flex-direction: column; gap: 12px;
    position: relative;
    background: var(--ss-bg-alt);
    transition: background 220ms ease;
}
.ss-usp:hover { background: var(--ss-surface); }
.ss-usp:last-child { border-bottom: 0; }
@media (min-width: 768px) {
    .ss-usp { border-right: 1px solid var(--ss-line); border-bottom: 0; }
    .ss-usp:nth-child(2n) { border-right: 0; }
}
@media (min-width: 1100px) {
    .ss-usp { padding: 40px 32px 36px; gap: 14px; border-right: 1px solid var(--ss-line); }
    .ss-usp:nth-child(2n) { border-right: 1px solid var(--ss-line); }
    .ss-usp:last-child { border-right: 0; }
}
.ss-usp-num {
    font-family: var(--ss-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--ss-muted);
    text-transform: uppercase;
}
.ss-usp h6 {
    font-family: var(--ss-serif);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ss-ink);
    margin: 0;
}
@media (min-width: 1100px) { .ss-usp h6 { font-size: 22px; } }
.ss-usp h6 em { font-style: italic; color: var(--ss-primary); }
.ss-usp p { font-size: 13px; color: var(--ss-ink-soft); margin: 0; line-height: 1.5; max-width: 240px; }

/* ════════════════════════════════════════════════════════════
   Home page: Editorial split section
   ──────────────────────────────────────────────────────────── */
.ss-editorial {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    background: var(--ss-bg-alt);
    border-radius: var(--r-md);
    overflow: hidden;
    min-height: auto;
}
@media (min-width: 1100px) {
    .ss-editorial { grid-template-columns: 1fr 1fr; gap: 8px; min-height: 460px; }
}
.ss-editorial-text {
    padding: 32px 24px;
    display: flex; flex-direction: column; justify-content: center;
}
@media (min-width: 768px)  { .ss-editorial-text { padding: 48px 40px; } }
@media (min-width: 1100px) { .ss-editorial-text { padding: 64px; } }
.ss-editorial-text .eyebrow {
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ss-primary); font-weight: 600; margin-bottom: 14px;
    display: block;
}
.ss-editorial-text h2 {
    font-size: 32px; line-height: 1.05; margin-bottom: 16px; font-weight: 400;
}
@media (min-width: 768px)  { .ss-editorial-text h2 { font-size: 38px; margin-bottom: 18px; } }
@media (min-width: 1100px) { .ss-editorial-text h2 { font-size: 46px; margin-bottom: 20px; } }
.ss-editorial-text h2 em { font-style: italic; }
.ss-editorial-text p {
    font-size: 15px; line-height: 1.6;
    color: var(--ss-ink-soft);
    max-width: 440px;
    margin-bottom: 20px;
}
@media (min-width: 1100px) {
    .ss-editorial-text p { font-size: 16px; margin-bottom: 24px; }
}
.ss-editorial-img {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, hsl(28 22% 78%), hsl(18 28% 72%));
    position: relative;
    min-height: 240px;
    /* Mobile: show image FIRST (above text) - it's a blog article preview */
    order: 0;
}
.ss-editorial-text {
    order: 1;
}
@media (min-width: 1100px) {
    .ss-editorial-img { aspect-ratio: auto; min-height: auto; order: initial; }
    .ss-editorial-text { order: initial; }
}
.ss-editorial-img img { width: 100%; height: 100%; object-fit: cover; }

/* Generic 4-column product grid (used on home featured + new + related) */
.ss-prod-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
@media (min-width: 768px)  { .ss-prod-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1100px) { .ss-prod-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.ss-prod-grid.is-3col {
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 1100px) { .ss-prod-grid.is-3col { grid-template-columns: repeat(3, 1fr); } }

/* ════════════════════════════════════════════════════════════
   Product carousels (home: featured / new / promo)
   ──────────────────────────────────────────────────────────── */
.ss-carousel-container { position: relative; }
.ss-products-swiper { padding: 4px 4px 8px; overflow: hidden; }
.ss-products-swiper .swiper-slide { height: auto; display: flex; }
.ss-products-swiper .swiper-slide > * { width: 100%; }
.ss-products-swiper .swiper-button-prev,
.ss-products-swiper .swiper-button-next {
    width: 40px;
    height: 40px;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    color: var(--ss-ink);
    top: 42%;
    transition: background 180ms, color 180ms, border-color 180ms;
}
.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: 8px; }
.ss-products-swiper .swiper-button-next { right: 8px; }
.ss-products-swiper .swiper-button-prev:hover,
.ss-products-swiper .swiper-button-next:hover {
    background: var(--ss-primary);
    border-color: var(--ss-primary);
    color: #fff;
}
@media (max-width: 599px) {
    .ss-products-swiper .swiper-button-prev,
    .ss-products-swiper .swiper-button-next { display: none; }
}

/* ════════════════════════════════════════════════════════════
   Category Parent page: hero + subcategories grid + brands strip
   ──────────────────────────────────────────────────────────── */
.ss-parent-hero {
    background: var(--ss-bg-alt);
    padding: 28px 0;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}
@media (min-width: 768px)  { .ss-parent-hero { padding: 36px 0; margin-bottom: 40px; } }
@media (min-width: 1100px) { .ss-parent-hero { padding: 48px 0; margin-bottom: 56px; } }

/* When breadcrumbs are hidden on a top-level leaf category, the leaf head sticks to the navbar.
   Add a top margin to the leaf container only (parent hero already has its own internal padding). */
.ss-page > .ss-leaf-container:first-child { margin-top: 24px; }
@media (min-width: 1100px) {
    .ss-page > .ss-leaf-container:first-child { margin-top: 36px; }
}

.ss-parent-hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
    position: relative;
    z-index: 2;
}
@media (min-width: 1100px) {
    .ss-parent-hero-inner { grid-template-columns: 1.2fr 0.8fr; gap: 64px; }
}

.ss-parent-hero h1 {
    font-size: 34px;
    line-height: 1.0;
    font-weight: 400;
    letter-spacing: -0.025em;
    margin-bottom: 14px;
}
@media (min-width: 768px)  { .ss-parent-hero h1 { font-size: 48px; margin-bottom: 18px; } }
@media (min-width: 1100px) { .ss-parent-hero h1 { font-size: 72px; line-height: 0.98; margin-bottom: 20px; } }
.ss-parent-hero h1 em { font-style: italic; color: var(--ss-primary); }
.ss-parent-hero p {
    font-size: 14.5px;
    color: var(--ss-ink-soft);
    max-width: 480px;
    line-height: 1.6;
}
@media (min-width: 1100px) { .ss-parent-hero p { font-size: 17px; } }

.ss-parent-hero-meta {
    display: flex; gap: 20px; margin-top: 20px;
    flex-wrap: wrap;
}
@media (min-width: 1100px) { .ss-parent-hero-meta { gap: 32px; margin-top: 28px; } }
.ss-parent-hero-meta div { display: flex; flex-direction: column; }
.ss-parent-hero-meta strong {
    font-family: var(--ss-serif);
    font-size: 24px; font-weight: 500;
    color: var(--ss-ink);
}
@media (min-width: 1100px) { .ss-parent-hero-meta strong { font-size: 32px; } }
.ss-parent-hero-meta small {
    font-size: 11px; color: var(--ss-muted);
    letter-spacing: 0.06em; text-transform: uppercase;
}
@media (min-width: 1100px) { .ss-parent-hero-meta small { font-size: 12px; } }

.ss-parent-hero-decor {
    position: absolute;
    font-family: var(--ss-serif);
    font-style: italic;
    font-size: 200px;
    color: rgba(var(--ss-primary-rgb), 0.05);
    letter-spacing: -0.04em;
    font-weight: 300;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    line-height: 0.8;
    user-select: none;
    display: none;
}
@media (min-width: 1100px) { .ss-parent-hero-decor { display: block; font-size: 320px; right: -30px; } }

.ss-parent-hero-img {
    aspect-ratio: 1 / 1;
    max-width: 280px;
    margin-left: auto;
    width: 100%;
    border-radius: var(--r-md);
    background: linear-gradient(135deg, hsl(28 22% 78%), hsl(38 28% 70%));
    position: relative;
    z-index: 2;
    overflow: hidden;
}
@media (min-width: 1100px) { .ss-parent-hero-img { max-width: 380px; } }
.ss-parent-hero-img img { width: 100%; height: 100%; object-fit: cover; }

.ss-subcat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 600px)  { .ss-subcat-grid { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (min-width: 1100px) { .ss-subcat-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.ss-subcat-card {
    position: relative;
    display: block;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line-soft);
    border-radius: var(--r-md);
    overflow: hidden;
    cursor: pointer;
    transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 250ms;
    text-decoration: none; color: inherit;
}
.ss-subcat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ss-subcat-image {
    aspect-ratio: 16 / 11;
    position: relative; overflow: hidden;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 4px; padding: 4px;
    background: var(--ss-surface);
}
/* Single big cover (parent subcategory or leaf with cover) - fills entire image area */
.ss-subcat-image .ss-subcat-cover {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}
/* Folder icon fallback when parent subcat has no cover image */
.ss-subcat-image .ss-subcat-cover-fallback {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    border-radius: 4px;
    background: linear-gradient(135deg, hsl(var(--th, 28) 22% 78%), hsl(calc(var(--th, 28) + 12) 18% 66%));
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, 0.92);
    font-size: 64px;
}
.ss-subcat-tile {
    border-radius: 4px;
    background: var(--ss-surface);
    position: relative;
    overflow: hidden;
    transition: filter 250ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ss-subcat-tile:not(:has(img)) {
    background: linear-gradient(135deg, hsl(var(--th, 28) 22% 78%), hsl(calc(var(--th, 28) + 10) 18% 68%));
}
.ss-subcat-tile:not(:has(img))::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
}
.ss-subcat-tile img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.ss-subcat-card:hover .ss-subcat-tile { filter: brightness(1.08) saturate(1.1); }
.ss-subcat-content {
    padding: 18px 20px;
    display: flex; justify-content: space-between; align-items: center;
}
@media (min-width: 1100px) { .ss-subcat-content { padding: 22px 24px 24px; } }
.ss-subcat-content h3 { font-size: 18px; font-weight: 500; margin: 0; }
@media (min-width: 1100px) { .ss-subcat-content h3 { font-size: 22px; } }
.ss-subcat-content small { font-size: 11px; color: var(--ss-muted); letter-spacing: 0.05em; }
@media (min-width: 1100px) { .ss-subcat-content small { font-size: 12px; } }
.ss-subcat-arrow {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--ss-bg-alt);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
    color: var(--ss-ink);
    transition: background 200ms, color 200ms, transform 200ms;
    flex-shrink: 0;
}
.ss-subcat-card:hover .ss-subcat-arrow { background: var(--ss-primary); color: #fff; transform: translateX(2px); }

/* Brands strip */
.ss-brands-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--ss-line);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--ss-surface);
}
@media (min-width: 600px)  { .ss-brands-strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .ss-brands-strip { grid-template-columns: repeat(6, 1fr); } }
.ss-brands-strip > * {
    padding: 24px 12px;
    text-align: center;
    border-right: 1px solid var(--ss-line);
    border-bottom: 1px solid var(--ss-line);
    font-family: var(--ss-serif);
    font-size: 17px;
    color: var(--ss-ink-soft);
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: color 200ms, background 200ms;
    display: flex; align-items: center; justify-content: center;
}
@media (min-width: 1100px) {
    .ss-brands-strip > * { padding: 36px 16px; font-size: 22px; }
}
.ss-brands-strip > *:hover { color: var(--ss-primary); background: var(--ss-bg); }
.ss-brands-strip > *:nth-child(odd) { font-style: italic; }
.ss-brands-strip > *:last-child { border-right: 0; }

.ss-brand-slide {
    display: flex; align-items: center; justify-content: center;
    height: 96px;
    padding: 16px;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: var(--r-md);
    transition: border-color 200ms;
}
.ss-brand-slide:hover { border-color: var(--ss-primary); }
.ss-brand-slide img { max-width: 100%; max-height: 56px; width: auto; height: auto; object-fit: contain; }

/* ════════════════════════════════════════════════════════════
   Category Leaf page: head, toolbar, filter sidebar, pagination
   ──────────────────────────────────────────────────────────── */
.ss-leaf-head {
    padding: 0 0 18px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--ss-line);
    display: flex; justify-content: space-between; align-items: end;
    gap: 16px; flex-wrap: wrap;
}
@media (min-width: 1100px) { .ss-leaf-head { padding: 0 0 22px; margin-bottom: 32px; gap: 24px; } }
.ss-leaf-head h1 {
    font-size: 32px; font-weight: 400;
    letter-spacing: -0.02em; line-height: 1;
    /* Inline-flex: em + count stay on same line when space allows;
       wrap (count below) only if container is too narrow */
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 8px;
}
@media (min-width: 768px)  { .ss-leaf-head h1 { font-size: 42px; } }
@media (min-width: 1100px) { .ss-leaf-head h1 { font-size: 52px; } }
.ss-leaf-head h1 em { font-style: italic; }
.ss-leaf-head .count {
    font-size: 12px; color: var(--ss-muted);
    margin-left: 0;
    font-family: var(--ss-mono); letter-spacing: 0.04em;
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
}
@media (min-width: 1100px) { .ss-leaf-head .count { font-size: 13px; } }
.ss-leaf-desc {
    color: var(--ss-ink-soft);
    font-size: 14.5px;
    margin-top: 10px; line-height: 1.55;
}
@media (min-width: 1100px) { .ss-leaf-desc { font-size: 15px; margin-top: 12px; } }

.ss-toolbar {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 0;
    border-top: 1px solid var(--ss-line);
    border-bottom: 1px solid var(--ss-line);
    margin-bottom: 24px;
    flex-wrap: wrap;
}
@media (min-width: 1100px) { .ss-toolbar { gap: 12px; padding: 16px 0; margin-bottom: 32px; } }
.ss-toolbar-pills { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; align-items: center; }

.ss-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 11px;
    background: var(--ss-bg-alt);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--ss-ink);
    border: 1px solid transparent;
    text-decoration: none;
    min-height: 30px;
    line-height: 1;
}
.ss-pill button {
    color: var(--ss-muted); font-size: 11px;
    background: none; border: 0; padding: 0;
    cursor: pointer; line-height: 1;
}
.ss-pill button:hover { color: var(--ss-danger); }
.ss-pill-clear {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ss-danger);
    background: rgba(184, 58, 42, 0.08);
    font-size: 12.5px;
    font-weight: 500;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(184, 58, 42, 0.2);
    cursor: pointer;
    transition: background 150ms, border-color 150ms;
    line-height: 1;
    min-height: 30px;
}
.ss-pill-clear i { font-size: 10px; }
.ss-pill-clear:hover {
    background: rgba(184, 58, 42, 0.15);
    border-color: rgba(184, 58, 42, 0.35);
}
@media (max-width: 767px) {
    .ss-pill { min-height: 36px; font-size: 13px; padding: 0 13px; }
    .ss-pill-clear { min-height: 36px; font-size: 13px; padding: 0 14px; }
}

.ss-toolbar-sort {
    position: relative;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 0 14px 0 16px;
    border: 1px solid var(--ss-line);
    border-radius: 999px;
    background: var(--ss-surface);
    font-size: 13px;
    cursor: pointer;
    height: 38px;
    transition: border-color 150ms;
}
.ss-toolbar-sort:hover { border-color: var(--ss-ink-soft); }
.ss-toolbar-sort .ss-toolbar-sort-label {
    color: var(--ss-muted);
    font-size: 12.5px;
    display: none;
}
@media (min-width: 480px) { .ss-toolbar-sort .ss-toolbar-sort-label { display: inline; } }
/* Custom dropdown trigger button (replaces native <select> chrome) */
.ss-toolbar-sort-trigger {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 0; padding: 0;
    font: inherit;
    font-weight: 500;
    color: var(--ss-ink);
    cursor: pointer;
    line-height: 1.4;
}
.ss-toolbar-sort-trigger i {
    font-size: 10px;
    color: var(--ss-muted);
    transition: transform 200ms;
}
.ss-toolbar-sort-trigger:hover { color: var(--ss-primary); }

/* Custom dropdown menu (Alpine x-show) - 1:1 mockup styling */
.ss-toolbar-sort-menu {
    position: absolute;
    top: calc(100% + 6px); right: 0;
    min-width: 220px;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 1050;
    display: flex; flex-direction: column;
    gap: 2px;
}
.ss-toolbar-sort-menu button {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    border-radius: var(--r-sm);
    font-family: var(--ss-sans);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ss-ink-soft);
    cursor: pointer;
    text-align: left;
    transition: background 120ms, color 120ms;
    min-height: 40px;
}
.ss-toolbar-sort-menu button:hover {
    background: var(--ss-bg-alt);
    color: var(--ss-ink);
}
.ss-toolbar-sort-menu button.is-active {
    background: var(--ss-bg-alt);
    color: var(--ss-primary);
    font-weight: 600;
}
.ss-toolbar-sort-menu button i.fa-check {
    color: var(--ss-primary);
    font-size: 11px;
}

/* x-transition fade for dropdown */
.ss-fade-in {
    transition: opacity 150ms ease, transform 150ms ease;
}
.ss-fade-in-start {
    opacity: 0;
    transform: translateY(-4px);
}
.ss-fade-in-end {
    opacity: 1;
    transform: translateY(0);
}
.ss-toolbar-view {
    display: none;
    gap: 0; border: 1px solid var(--ss-line); border-radius: 999px;
    padding: 3px; background: var(--ss-surface);
    height: 38px; align-items: center;
}
@media (min-width: 1100px) { .ss-toolbar-view { display: inline-flex; } }
.ss-view-btn {
    width: 32px; height: 32px;
    border: none;
    background: transparent;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ss-muted);
    font-size: 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 150ms, color 150ms;
}
.ss-view-btn:hover { color: var(--ss-ink); }
.ss-view-btn.is-active { background: var(--ss-ink); color: #fff; }

.ss-leaf-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 1100px) { .ss-leaf-layout { grid-template-columns: 260px 1fr; gap: 40px; } }

.ss-filter-mobile-toggle {
    display: flex;
    align-items: center; gap: 8px;
    padding: 10px 16px;
    background: var(--ss-bg-alt);
    border: 1px solid var(--ss-line);
    border-radius: var(--r-sm);
    font-weight: 500;
    cursor: pointer;
    width: fit-content;
    margin-bottom: 16px;
}
@media (min-width: 1100px) { .ss-filter-mobile-toggle { display: none; } }

/* Mobile-first: off-canvas drawer from the right */
.ss-filter-side {
    position: fixed;
    top: 0; right: 0;
    width: 88vw; max-width: 380px;
    height: 100dvh;
    background: var(--ss-surface);
    z-index: 1100;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -8px 0 32px rgba(0,0,0,0.18);
    display: flex; flex-direction: column;
    padding: 0 18px 12px;
    -webkit-overflow-scrolling: touch;
}
.ss-filter-side.is-open { transform: translateX(0); }

.ss-filter-side-head {
    position: sticky; top: 0;
    background: var(--ss-surface);
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--ss-line);
    margin: 0 0 4px;
    z-index: 2;
    font-family: var(--ss-serif);
    font-size: 17px;
    color: var(--ss-ink);
}
.ss-filter-side-close {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--ss-bg-alt);
    color: var(--ss-ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    transition: background 150ms;
}
.ss-filter-side-close:hover { background: var(--ss-line); }

.ss-filter-side-foot {
    position: sticky; bottom: 0;
    background: var(--ss-surface);
    padding: 12px 0;
    border-top: 1px solid var(--ss-line);
    margin-top: auto;
    z-index: 2;
}

.ss-filter-overlay {
    position: fixed; inset: 0;
    background: rgba(26,24,21,0.5);
    z-index: 1090;
    transition: opacity 200ms;
}

/* Desktop: revert to in-flow sidebar */
@media (min-width: 1100px) {
    .ss-filter-side, .ss-filter-side.is-open {
        position: static;
        width: auto; max-width: none;
        height: auto;
        background: transparent;
        z-index: auto;
        overflow: visible;
        transform: none;
        transition: none;
        box-shadow: none;
        padding: 0;
        border-top: 1px solid var(--ss-line);
    }
    .ss-filter-side-head, .ss-filter-side-close, .ss-filter-side-foot, .ss-filter-overlay { display: none; }
}

.ss-filter-group {
    padding: 22px 0;
    border-bottom: 1px solid var(--ss-line);
}
/* First group has same padding-top as others (top border on .ss-filter-side serves as divider). */
.ss-filter-title {
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--ss-serif);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 14px;
    cursor: pointer;
}
.ss-filter-title i { color: var(--ss-muted); font-size: 11px; transition: transform 200ms; }
.ss-filter-group.is-collapsed .ss-filter-title i { transform: rotate(-90deg); }
.ss-filter-group.is-collapsed .ss-filter-list,
.ss-filter-group.is-collapsed .ss-filter-checks,
.ss-filter-group.is-collapsed .ss-filter-swatches { display: none; }

/* ── Pill grid (group.type === 'checkbox') - short-label attributes ── */
.ss-filter-checks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 6px 0;
}
@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 {
    position: relative;
    padding: 8px 10px;
    border: 1px solid var(--ss-line);
    border-radius: var(--r-sm);
    font-size: 12.5px;
    color: var(--ss-ink);
    background: var(--ss-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 36px;
    user-select: none;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.ss-filter-check:hover {
    border-color: var(--ss-ink-soft);
    background: var(--ss-bg-alt);
}
.ss-filter-check:has(input:checked) {
    border-color: var(--ss-primary);
    background: var(--ss-primary);
    color: #ffffff;
}
.ss-filter-check.ss-filter-check-wide {
    grid-column: 1 / -1;
    white-space: normal;
    word-break: break-word;
}
.ss-filter-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
    pointer-events: none;
}

/* ── Scrollable list (group.type === 'list') - radio attrs / many-option groups ── */
.ss-filter-list {
    display: flex; flex-direction: column; gap: 0;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--ss-muted) transparent;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 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-line); border-radius: 3px; }
.ss-filter-list::-webkit-scrollbar-thumb:hover { background: var(--ss-muted); }
.ss-filter-list label {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer;
    padding: 4px 8px;
    margin: 0 -8px;
    border-radius: 6px;
    font-size: 13.5px;
    color: var(--ss-ink-soft);
    transition: color 150ms, background 150ms;
    user-select: none;
    line-height: 1.4;
}
.ss-filter-list label:hover {
    color: var(--ss-ink);
    background: rgba(var(--ss-primary-rgb), 0.04);
}
.ss-filter-list input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px; height: 18px;
    flex-shrink: 0;
    border: 1.5px solid var(--ss-line);
    border-radius: 5px;
    background: var(--ss-surface);
    cursor: pointer;
    position: relative;
    transition: border-color 150ms, background 150ms;
    margin: 0;
}
.ss-filter-list label:hover input[type="checkbox"] { border-color: var(--ss-ink-soft); }
.ss-filter-list input[type="checkbox"]:checked {
    background: var(--ss-ink);
    border-color: var(--ss-ink);
}
.ss-filter-list input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px; top: 1.5px;
    width: 5px; height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.ss-filter-list label:has(input:checked) { color: var(--ss-ink); font-weight: 500; }
.ss-filter-list .count {
    color: var(--ss-muted); font-size: 12px;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}
.ss-filter-list .swatch {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.5);
    flex-shrink: 0;
}

/* ── Color filter swatches (clickable squares) ── */
.ss-filter-swatches {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 4px 0;
}
.ss-filter-swatch {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--ss-line);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.6);
    cursor: pointer;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 11px;
    text-shadow: 0 0 2px rgba(0,0,0,0.6);
    transition: transform 150ms, border-color 150ms, box-shadow 150ms;
    position: relative;
}
.ss-filter-swatch:hover {
    transform: scale(1.08);
    border-color: var(--ss-ink-soft);
}
.ss-filter-swatch.is-active {
    border-color: var(--ss-ink);
    border-width: 2px;
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--ss-ink);
}

/* Loading overlay during AJAX filter fetch */
.ss-grid-loading {
    position: absolute; inset: 0;
    background: rgba(251, 248, 244, 0.55);
    backdrop-filter: blur(1px);
    z-index: 5;
    pointer-events: none;
}

/* Mobile filter toggle badge for active filter count */
.ss-filter-mobile-count {
    background: var(--ss-primary); color: #fff;
    font-size: 10px; font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 4px;
}

/* Pill swatch dot */
.ss-pill-swatch {
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    display: inline-block;
}

.ss-latte-empty {
    padding: 64px 24px;
    text-align: center;
    color: var(--ss-muted);
}
.ss-latte-empty i {
    font-size: 32px; margin-bottom: 16px; opacity: 0.4; display: block;
}
.ss-latte-empty p { margin-bottom: 16px; }

.ss-price-range { padding-top: 4px; }
.ss-price-track {
    position: relative;
    height: 4px;
    background: var(--ss-line);
    border-radius: 2px;
    margin: 18px 6px 14px;
}
.ss-price-fill { position: absolute; top: 0; bottom: 0; background: var(--ss-ink); border-radius: 2px; }
.ss-price-handle {
    position: absolute; top: 50%;
    width: 16px; height: 16px;
    background: #fff;
    border: 2px solid var(--ss-ink);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
}

/* ── noUiSlider override (ss_latte theme styling, mockup-matched) ── */
.ss-latte-slider {
    height: 4px;
    background: var(--ss-line);
    border: 0;
    border-radius: 2px;
    box-shadow: none;
    margin: 22px 8px 18px;
}
.ss-latte-slider .noUi-connect {
    background: var(--ss-ink);
    box-shadow: none;
}
.ss-latte-slider .noUi-handle {
    width: 18px !important; height: 18px !important;
    top: -8px !important; right: -9px !important;
    background: #fff;
    border: 2px solid var(--ss-ink);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(40, 30, 20, 0.18);
    cursor: grab;
    transition: transform 120ms, box-shadow 120ms;
}
.ss-latte-slider .noUi-handle::before,
.ss-latte-slider .noUi-handle::after { display: none; }
.ss-latte-slider .noUi-handle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(40, 30, 20, 0.25);
}
.ss-latte-slider .noUi-handle.noUi-active,
.ss-latte-slider .noUi-handle:active {
    cursor: grabbing;
    transform: scale(1.15);
    border-color: var(--ss-primary);
}
.ss-latte-slider.noUi-horizontal { height: 4px; }
.ss-price-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ss-price-inputs input {
    width: 100%;
    border: 1px solid var(--ss-line);
    background: #fff;
    padding: 7px 10px;
    font-size: 13px;
    border-radius: var(--r-xs);
}
.ss-price-inputs input:focus { outline: none; border-color: var(--ss-ink); }

/* Pagination - 1:1 mockup. Bottom spacing handled globally via .ss-footer margin-top. */
.ss-pager {
    display: flex; justify-content: center;
    gap: 4px; flex-wrap: wrap;
    align-items: center;
    margin-top: 40px;
}
@media (min-width: 1100px) { .ss-pager { margin-top: 56px; } }
.ss-pager a,
.ss-pager > span:not(.ss-pager-dots),
.ss-pager button {
    min-width: 40px; height: 40px;
    border: 1px solid var(--ss-line);
    background: var(--ss-surface);
    font-size: 13.5px;
    font-weight: 500;
    border-radius: var(--r-xs);
    color: var(--ss-ink);
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 12px;
    text-decoration: none;
    transition: background 150ms, border-color 150ms, color 150ms;
    gap: 6px;
}
.ss-pager a:hover { background: var(--ss-bg-alt); border-color: var(--ss-ink-soft); }
.ss-pager > .is-active,
.ss-pager > span.is-active {
    background: var(--ss-ink) !important;
    color: #fff !important;
    border-color: var(--ss-ink) !important;
    pointer-events: none;
    cursor: default;
    font-weight: 600;
}
.ss-pager > .is-disabled,
.ss-pager > span.is-disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: not-allowed;
    background: var(--ss-bg-alt);
}
.ss-pager .ss-pager-arrow { padding: 0 16px; }
.ss-pager-dots {
    color: var(--ss-muted);
    padding: 0 8px;
    background: none !important;
    border: none !important;
    min-width: auto !important;
    height: auto !important;
}

/* ════════════════════════════════════════════════════════════
   Product Detail Classic
   ──────────────────────────────────────────────────────────── */
.ss-pp-classic-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 8px;
}
@media (min-width: 1100px) { .ss-pp-classic-grid { grid-template-columns: 1.15fr 1fr; gap: 56px; padding-top: 12px; } }

.ss-pp-gallery { position: relative; }
@media (min-width: 1100px) { .ss-pp-gallery { position: sticky; top: 110px; align-self: start; } }

.ss-pp-gallery-main {
    aspect-ratio: 1 / 1;
    background: var(--ss-bg-alt);
    border-radius: var(--r-md);
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
}
.ss-pp-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.ss-pp-gallery-badges {
    position: absolute; top: 16px; left: 16px;
    display: flex; flex-direction: column; gap: 6px;
    z-index: 2;
}
/* Phone-on-image badge (admin opt-in: product_phone_badge=1).
   Top-right (top-left is occupied by ss-pp-gallery-badges: new/promo/top tags).
   Compact pill on desktop; icon-only circle on mobile to avoid overlap. */
.ss-pp-gallery-phone {
    position: absolute; top: 12px; right: 12px;
    z-index: 2;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid var(--ss-line);
    border-radius: 999px;
    color: var(--ss-ink);
    font-family: var(--ss-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(40, 30, 20, 0.06);
    transition: background 150ms, color 150ms, border-color 150ms;
    line-height: 1.2;
}
.ss-pp-gallery-phone i { color: var(--ss-primary); font-size: 11px; }
.ss-pp-gallery-phone:hover {
    background: var(--ss-primary);
    color: #fff;
    border-color: var(--ss-primary);
}
.ss-pp-gallery-phone:hover i { color: #fff; }

/* Mobile: icon-only circle (44px tap target) - prevents overlap with new/promo tags top-left */
@media (max-width: 599px) {
    .ss-pp-gallery-phone {
        width: 40px; height: 40px;
        padding: 0;
        gap: 0;
        justify-content: center;
        font-size: 0; /* hides number text */
    }
    .ss-pp-gallery-phone i { font-size: 14px; }
}
.ss-pp-gallery-thumbs {
    display: grid;
    /* Mobile: 4 thumbs per row (each ~44-50px → still tappable). Tablet+: 5. */
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
@media (min-width: 480px) { .ss-pp-gallery-thumbs { grid-template-columns: repeat(5, 1fr); } }
.ss-pp-thumb {
    aspect-ratio: 1 / 1;
    border-radius: var(--r-sm);
    border: 1px solid var(--ss-line-soft);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 150ms;
    background: none;
    padding: 0;
}
.ss-pp-thumb.is-active { border-color: var(--ss-ink); }
.ss-pp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ss-pp-info-eyebrow {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ss-muted);
    margin-bottom: 14px; font-weight: 600;
}
.ss-pp-info-eyebrow strong { color: var(--ss-primary); }
.ss-pp-info-eyebrow a { color: inherit; text-decoration: none; }
.ss-pp-info-eyebrow a:hover strong { text-decoration: underline; }

/* Brand: toolbar follows header directly - drop duplicate divider. */
.ss-page--brand .ss-leaf-head { border-bottom: none; }

.ss-pp-title {
    font-size: 30px; font-weight: 400;
    letter-spacing: -0.02em; line-height: 1.1;
    margin-bottom: 14px;
}
@media (min-width: 768px)  { .ss-pp-title { font-size: 36px; } }
@media (min-width: 1100px) { .ss-pp-title { font-size: 44px; line-height: 1.05; margin-bottom: 16px; } }
.ss-pp-title em { font-style: italic; }

.ss-pp-meta {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 18px; font-size: 13px; color: var(--ss-ink-soft);
    flex-wrap: wrap;
}
@media (min-width: 1100px) { .ss-pp-meta { gap: 14px; margin-bottom: 22px; } }
.ss-pp-meta .sep { color: var(--ss-muted); opacity: 0.5; }
.ss-pp-rating { display: inline-flex; gap: 3px; color: var(--ss-warning); font-size: 13px; }
.ss-pp-rating-cluster { display: inline-flex; align-items: center; gap: 7px; }
.ss-pp-rating-summary { white-space: nowrap; font-weight: 500; color: var(--ss-ink); }
.ss-pp-meta a { border-bottom: 1px solid var(--ss-line); padding-bottom: 1px; }
.ss-pp-meta .ss-pp-rating-link {
    border-bottom: 0;
    padding-bottom: 0;
    color: var(--ss-muted);
    font-weight: 400;
    transition: color 150ms ease;
}
.ss-pp-meta .ss-pp-rating-link:hover { color: var(--ss-ink); }

.ss-pp-short {
    font-size: 15px; color: var(--ss-ink-soft);
    line-height: 1.6; margin-bottom: 24px;
}
@media (min-width: 1100px) { .ss-pp-short { font-size: 16px; margin-bottom: 28px; } }

.ss-pp-section {
    padding: 18px 0;
    border-top: 1px solid var(--ss-line);
}
@media (min-width: 1100px) { .ss-pp-section { padding: 22px 0; } }
.ss-pp-section:first-of-type { border-top: 0; padding-top: 0; }
/* Секцията точно над панела с цената няма разделител отдолу: долният ѝ отстъп само удвояваше празното място. */
.ss-pp-section:has(+ .ss-pp-buy) { padding-bottom: 0; }
.ss-pp-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ss-muted);
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ss-pp-section-label .selected {
    color: var(--ss-ink); text-transform: none;
    letter-spacing: 0; font-weight: 500; font-size: 13.5px;
}

.ss-pp-variants {
    display: flex; gap: 8px; flex-wrap: wrap;
}
@media (min-width: 1100px) { .ss-pp-variants { gap: 10px; } }
.ss-pp-variant {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px 8px 8px;
    background: #fff;
    border: 1px solid var(--ss-line);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 150ms;
    font-size: 13px;
    color: var(--ss-ink);
    text-decoration: none;
    min-height: 44px;
}
.ss-pp-variant:hover { border-color: var(--ss-ink); }
.ss-pp-variant.is-active { border-color: var(--ss-ink); border-width: 2px; padding: 7px 13px 7px 7px; }
.ss-pp-variant.is-disabled { opacity: 0.45; text-decoration: line-through; cursor: not-allowed; }
.ss-pp-variant-swatch {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.ss-pp-sizes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
    gap: 8px;
}

.ss-pp-size {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    padding: 10px 8px;
    background: #fff;
    border: 1px solid var(--ss-line);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: border-color 150ms;
    font-size: 14px;
    text-align: center;
    min-height: 56px;
}
.ss-pp-size:hover { border-color: var(--ss-ink); }
.ss-pp-size.is-active { border-color: var(--ss-ink); border-width: 2px; padding: 9px 7px; }
.ss-pp-size strong { font-weight: 600; line-height: 1; }
.ss-pp-size small { color: var(--ss-muted); font-size: 11px; line-height: 1; font-feature-settings: "tnum"; }

.ss-pp-buy {
    background: var(--ss-bg-alt);
    border-radius: var(--r-md);
    padding: 20px;
    margin-top: 20px;
}
@media (min-width: 1100px) { .ss-pp-buy { padding: 24px; margin-top: 24px; } }
.ss-pp-buy-prices {
    display: flex; align-items: baseline; gap: 12px;
    margin-bottom: 14px; flex-wrap: wrap;
}
@media (min-width: 1100px) { .ss-pp-buy-prices { gap: 14px; margin-bottom: 18px; } }
.ss-pp-price-eur {
    font-family: var(--ss-serif);
    font-size: 36px; font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ss-ink);
    line-height: 1;
}
@media (min-width: 1100px) { .ss-pp-price-eur { font-size: 44px; } }
.ss-pp-price-eur.is-promo { color: var(--ss-primary); }
.ss-pp-price-old { font-size: 16px; color: var(--ss-muted); text-decoration: line-through; }
@media (min-width: 1100px) { .ss-pp-price-old { font-size: 18px; } }

@media (min-width: 1100px) { }
.ss-pp-promo-row {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ss-primary-light);
    color: var(--ss-primary-dark);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 14px;
}

.ss-pp-stock {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; margin-bottom: 18px;
    flex-wrap: wrap;
}
.ss-pp-stock-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ss-success);
    box-shadow: 0 0 0 4px rgba(47, 107, 71, 0.15);
    flex-shrink: 0;
}
.ss-pp-stock-dot.is-low {
    background: var(--ss-warning);
    box-shadow: 0 0 0 4px rgba(199, 125, 46, 0.15);
}
.ss-pp-stock-dot.is-out {
    background: var(--ss-danger);
    box-shadow: 0 0 0 4px rgba(184, 58, 42, 0.15);
}

/* Standalone block buttons inside buy panel (e.g. call-us when out of stock) need bottom margin */
.ss-pp-buy > .ss-btn-block {
    margin-bottom: 14px;
}

/* Delivery timer countdown text inside the perk renders <strong> for the timeframe digits */
.ss-pp-perk strong {
    color: var(--ss-ink);
    font-weight: 600;
}

.ss-pp-buy-row {
    display: flex; gap: 10px; align-items: stretch;
    margin-bottom: 14px; flex-wrap: wrap;
}
.ss-pp-qty {
    display: flex; align-items: center;
    background: #fff;
    border: 1px solid var(--ss-line);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.ss-pp-qty button {
    width: 44px; height: 100%; min-height: 48px;
    font-size: 14px; color: var(--ss-ink);
    transition: background 150ms;
    background: none; border: 0;
    cursor: pointer;
}
.ss-pp-qty button:hover { background: var(--ss-bg-alt); }
.ss-pp-qty input {
    width: 56px; text-align: center; height: 48px;
    border: none; background: none;
    font-weight: 500;
    /* 16px on mobile prevents iOS zoom */
    font-size: 16px;
    -moz-appearance: textfield;
}
@media (min-width: 768px) { .ss-pp-qty input { font-size: 15px; } }
.ss-pp-qty input::-webkit-outer-spin-button,
.ss-pp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Buy row: stack qty + add-to-cart on narrow widths so button stays full-width */
.ss-pp-buy-row .ss-btn { flex: 1; padding: 14px 22px; min-width: 0; min-height: 48px; }
@media (min-width: 480px) { .ss-pp-buy-row .ss-btn { min-width: 180px; } }
/* Тесен телефон: количеството се свива, а „Добави в количката" може да мине на два реда, вместо да излиза навън. */
@media (max-width: 479.98px) {
    .ss-pp-qty button { width: 36px; }
    .ss-pp-qty input { width: 42px; }
    .ss-pp-buy-row .ss-btn { padding: 8px 12px; white-space: normal; line-height: 1.2; }
}

.ss-pp-buy-secondary {
    /* Mobile + desktop: auto-fit equal columns on a single row.
       When TBI is hidden, remaining buttons stretch to fill (no gap). */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}
.ss-pp-buy-secondary .ss-btn { font-size: 13px; padding: 10px 14px; min-height: 44px; }
.ss-pp-buy-secondary .ss-btn i { font-size: 12px; }

/* ════════════════════════════════════════════════════════════
   Quick Order accordion (1:1 from Detailed_Mockup, editorial)
   Collapsed by default, expands to 3-input form. Submit = always 1 piece.
   ──────────────────────────────────────────────────────────── */
.ss-qo-acc {
    border: 1px solid var(--ss-line);
    border-radius: var(--r-md);
    background: var(--ss-bg-alt);
    overflow: hidden;
    transition: border-color 200ms, background 200ms;
    margin-top: 14px;
}
.ss-qo-acc.is-open {
    border-color: var(--ss-ink);
    background: var(--ss-surface);
}
.ss-qo-acc-head {
    width: 100%;
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--ss-ink);
    min-height: 60px;
}
.ss-qo-acc-head:hover { background: rgba(var(--ss-primary-rgb), 0.04); }
.ss-qo-acc-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--ss-primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.ss-qo-acc-label {
    flex: 1;
    display: flex; flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}
.ss-qo-acc-label strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--ss-ink);
}
.ss-qo-acc-label small {
    font-size: 12px;
    color: var(--ss-muted);
    margin-top: 2px;
}
.ss-qo-acc-chev {
    font-size: 11px;
    color: var(--ss-muted);
    transition: color 200ms;
    flex-shrink: 0;
}
.ss-qo-acc.is-open .ss-qo-acc-chev { color: var(--ss-ink); }

.ss-qo-acc-body {
    padding: 4px 16px 18px;
    border-top: 1px solid var(--ss-line-soft);
    margin-top: 4px;
}
.ss-qo-acc-form {
    display: flex; flex-direction: column;
    gap: 12px;
    padding-top: 14px;
}
.ss-qo-acc-field { display: flex; flex-direction: column; }
.ss-qo-acc-field label {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ss-muted);
    margin-bottom: 5px;
    font-weight: 500;
}
.ss-qo-acc-field label .req { color: var(--ss-primary); margin-left: 2px; }
.ss-qo-acc-field input {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--ss-line);
    background: #fff;
    border-radius: var(--r-sm);
    font-family: inherit;
    /* 16px on mobile to prevent iOS zoom; downsize on tablet+ */
    font-size: 16px;
    color: var(--ss-ink);
    min-height: 44px;
    transition: border-color 150ms, box-shadow 150ms;
}
@media (min-width: 768px) { .ss-qo-acc-field input { font-size: 14px; } }
.ss-qo-acc-field input:focus {
    outline: none;
    border-color: var(--ss-ink);
    box-shadow: 0 0 0 3px rgba(var(--ss-primary-rgb), 0.08);
}
.ss-qo-acc-submit {
    width: 100%;
    padding: 13px 16px;
    margin-top: 4px;
    font-size: 14px;
    letter-spacing: 0.02em;
    min-height: 48px;
}
.ss-qo-acc-fineprint {
    font-size: 11.5px;
    color: var(--ss-muted);
    line-height: 1.5;
    text-align: center;
    margin: 4px 0 0;
}

/* Бутонът на TBI: на компютър мини в реда „Любими | TBI | Сподели", на телефон на свой ред под него. */
.ss-pp-buy-secondary .ss-tbi-cta,
.ss-pp-tbi-mobile .ss-tbi-cta {
    border-radius: var(--r-sm);
}
.ss-tbi-cta-wrap.ss-pp-tbi-mobile {
    display: none;
}
@media (max-width: 767.98px) {
    .ss-tbi-cta-wrap.ss-pp-tbi-desk {
        display: none;
    }
    .ss-tbi-cta-wrap.ss-pp-tbi-mobile {
        display: flex;
        margin-top: 8px;
    }
    .ss-pp-tbi-mobile .ss-tbi-cta {
        width: 100%;
        height: 52px;
    }
}
.ss-pp-perks {
    margin-top: 22px;
    display: flex; flex-direction: column; gap: 10px;
    padding-top: 22px;
    border-top: 1px solid var(--ss-line);
}
.ss-pp-perk {
    display: flex; align-items: center; gap: 12px;
    font-size: 13px; color: var(--ss-ink-soft);
    line-height: 1.45;
}
.ss-pp-perk i { color: var(--ss-success); width: 16px; font-size: 12px; flex-shrink: 0; }
.ss-pp-perk a { color: var(--ss-primary); text-decoration: underline; }
.ss-pp-perk a:hover { color: var(--ss-primary-dark); }

/* Tabs (already in foundation) -- product-tab content styles */
.ss-pp-tab-content {
    padding: 24px 0 16px;
    max-width: 800px;
}
@media (min-width: 1100px) { .ss-pp-tab-content { padding: 32px 0 16px; } }
.ss-pp-tab-content p {
    font-size: 15px; line-height: 1.75;
    color: var(--ss-ink-soft);
    margin-bottom: 14px;
}
@media (min-width: 1100px) { .ss-pp-tab-content p { font-size: 16px; margin-bottom: 16px; } }

.ss-pp-specs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 0;
    max-width: 900px;
}
@media (min-width: 768px)  { .ss-pp-specs { grid-template-columns: 1fr 1fr; gap: 0 40px; } }
@media (min-width: 1100px) { .ss-pp-specs { gap: 0 56px; } }
.ss-pp-spec-row {
    display: flex; justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--ss-line-soft);
    font-size: 14px;
}
/* Последният ред няма нужда от черта. В двуколонния изглед долният ред са
   последните ДВА елемента, когато броят им е четен. */
.ss-pp-spec-row:last-child { border-bottom: none; }
@media (min-width: 768px) {
    .ss-pp-spec-row:nth-last-child(2):nth-child(odd) { border-bottom: none; }
}
.ss-pp-spec-row strong { font-weight: 500; color: var(--ss-ink); }
.ss-pp-spec-row span { color: var(--ss-ink-soft); text-align: right; }

.ss-pp-reviews {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}
@media (min-width: 1100px) { .ss-pp-reviews { grid-template-columns: 320px 1fr; gap: 56px; } }
.ss-pp-reviews-summary { padding-top: 8px; }
.ss-pp-reviews-score {
    font-family: var(--ss-serif);
    font-size: 64px; line-height: 1;
    font-weight: 500; letter-spacing: -0.03em;
}
@media (min-width: 1100px) { .ss-pp-reviews-score { font-size: 84px; } }
.ss-pp-reviews-score-meta {
    color: var(--ss-muted); font-size: 13px; margin-top: 6px;
}
.ss-pp-reviews-bars {
    margin-top: 22px;
    display: flex; flex-direction: column; gap: 6px;
}
.ss-pp-bar-row {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; color: var(--ss-muted);
}
.ss-pp-bar-row strong { color: var(--ss-ink); width: 16px; font-weight: 500; }
.ss-pp-bar { flex: 1; height: 4px; background: var(--ss-line); border-radius: 2px; overflow: hidden; }
.ss-pp-bar-fill { height: 100%; background: var(--ss-warning); }

.ss-pp-review {
    padding: 22px 0;
    border-top: 1px solid var(--ss-line);
}
.ss-pp-review:first-child { border-top: 0; padding-top: 0; }
.ss-pp-review-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px; flex-wrap: wrap; gap: 8px;
}
.ss-pp-review-head strong { font-weight: 500; }
.ss-pp-review-head small { color: var(--ss-muted); font-size: 12px; }
.ss-pp-review h5 { font-size: 16px; margin-bottom: 8px; }
@media (min-width: 1100px) { .ss-pp-review h5 { font-size: 17px; } }
.ss-pp-review p { font-size: 14px; line-height: 1.65; color: var(--ss-ink-soft); margin: 0; }
@media (min-width: 1100px) { .ss-pp-review p { font-size: 14.5px; } }

/* Reset Bootstrap interference: container - use our ss-container */
.container { padding-left: var(--gutter); padding-right: var(--gutter); }
@media (min-width: 1320px) {
    .container, .container-md, .container-sm, .container-lg, .container-xl, .container-xxl {
        max-width: var(--container-max);
    }
}

/* ════════════════════════════════════════════════════════════
   SweetAlert2 - ss_latte theme (cart confirmations, alerts, toasts)
   ──────────────────────────────────────────────────────────── */
.swal2-container { z-index: 10080 !important; }

.swal2-popup {
    background: var(--ss-surface) !important;
    border: 1px solid var(--ss-line) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 28px 24px 20px !important;
    font-family: var(--ss-sans) !important;
    color: var(--ss-ink) !important;
}

.swal2-title {
    font-family: var(--ss-serif) !important;
    font-weight: 500 !important;
    font-size: 22px !important;
    letter-spacing: -0.01em !important;
    color: var(--ss-ink) !important;
    padding: 8px 0 !important;
    line-height: 1.25 !important;
}
.swal2-html-container,
.swal2-content {
    font-family: var(--ss-sans) !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    color: var(--ss-ink-soft) !important;
    padding: 4px 0 0 !important;
}

/* Buttons - match .ss-btn / .ss-btn-primary / .ss-btn-outline */
.swal2-actions {
    gap: 10px !important;
    margin: 22px auto 4px !important;
}
.swal2-styled.swal2-confirm {
    background: var(--ss-ink) !important;
    color: #fff !important;
    border: 1px solid var(--ss-ink) !important;
    border-radius: var(--r-sm) !important;
    padding: 12px 22px !important;
    min-height: 44px !important;
    font-family: var(--ss-sans) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    box-shadow: none !important;
    transition: background 150ms, border-color 150ms, color 150ms !important;
}
.swal2-styled.swal2-confirm:hover {
    background: var(--ss-primary) !important;
    border-color: var(--ss-primary) !important;
}
.swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(var(--ss-primary-rgb), 0.18) !important;
}
.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
    background: transparent !important;
    color: var(--ss-ink) !important;
    border: 1px solid var(--ss-ink) !important;
    border-radius: var(--r-sm) !important;
    padding: 12px 22px !important;
    min-height: 44px !important;
    font-family: var(--ss-sans) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: background 150ms, color 150ms !important;
}
.swal2-styled.swal2-cancel:hover,
.swal2-styled.swal2-deny:hover {
    background: var(--ss-ink) !important;
    color: #fff !important;
}

/* Close button */
.swal2-close {
    color: var(--ss-muted) !important;
    font-size: 28px !important;
    width: 36px !important; height: 36px !important;
    border-radius: 50% !important;
    transition: background 150ms, color 150ms !important;
}
.swal2-close:hover {
    color: var(--ss-ink) !important;
    background: var(--ss-bg-alt) !important;
}

/* Icons (success, error, warning, info, question) - use ss_latte palette */
.swal2-icon.swal2-success { border-color: var(--ss-success) !important; color: var(--ss-success) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'],
.swal2-icon.swal2-success .swal2-success-ring { border-color: var(--ss-success) !important; }
.swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-icon.swal2-success .swal2-success-line-long { background: var(--ss-success) !important; }
.swal2-icon.swal2-error { border-color: var(--ss-danger) !important; color: var(--ss-danger) !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background: var(--ss-danger) !important; }
.swal2-icon.swal2-warning { border-color: var(--ss-warning) !important; color: var(--ss-warning) !important; }
.swal2-icon.swal2-info { border-color: var(--ss-info) !important; color: var(--ss-info) !important; }
.swal2-icon.swal2-question { border-color: var(--ss-primary) !important; color: var(--ss-primary) !important; }

/* Inputs (when Swal asks for text input) */
.swal2-input,
.swal2-textarea,
.swal2-select,
.swal2-file {
    border: 1px solid var(--ss-line) !important;
    border-radius: var(--r-sm) !important;
    background: var(--ss-surface) !important;
    color: var(--ss-ink) !important;
    font-family: var(--ss-sans) !important;
    font-size: 14px !important;
    padding: 11px 14px !important;
    box-shadow: none !important;
    transition: border-color 150ms !important;
}
.swal2-input:focus,
.swal2-textarea:focus { border-color: var(--ss-ink) !important; }

/* Toast (compact top-right notification used for cart-add confirmations) */
.swal2-toast {
    background: var(--ss-surface) !important;
    border: 1px solid var(--ss-line) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-md) !important;
    padding: 12px 16px !important;
    font-family: var(--ss-sans) !important;
}
.swal2-toast .swal2-title {
    font-family: var(--ss-sans) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    color: var(--ss-ink) !important;
}
.swal2-toast .swal2-html-container { font-size: 13px !important; }
.swal2-toast .swal2-icon { width: 24px !important; height: 24px !important; margin: 0 10px 0 0 !important; }

/* Timer progress bar (auto-dismiss) */
.swal2-timer-progress-bar {
    background: var(--ss-primary) !important;
    height: 3px !important;
}

/* Backdrop */
.swal2-backdrop-show { background: rgba(26, 24, 21, 0.5) !important; }

/* End of foundation. Page-specific styles will be appended per phase. */

/* ── Auth Pages ── */
.ss-auth-wrap {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px var(--gutter);
}
.ss-auth-center {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}
.ss-auth-card {
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: var(--r-xl);
    padding: 36px 28px;
    box-shadow: var(--shadow-md);
}
@media (min-width: 768px) {
    .ss-auth-card { padding: 48px 40px; }
}
.ss-auth-head {
    text-align: center;
    margin-bottom: 32px;
}
.ss-auth-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--ss-primary-light);
    color: var(--ss-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 16px;
}
.ss-auth-title {
    font-family: var(--ss-serif);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ss-ink);
    margin-bottom: 0;
}
@media (min-width: 768px) { .ss-auth-title { font-size: 30px; } }
.ss-auth-sub {
    color: var(--ss-muted);
    font-size: 14px;
    margin-top: 8px;
    line-height: 1.6;
}

/* Form fields */
.ss-field { margin-bottom: 20px; }
.ss-field-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 540px) {
    .ss-field-row { grid-template-columns: 1fr 1fr; }
}
.ss-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ss-ink-soft);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
.ss-required { color: var(--ss-danger); }
.ss-input {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 14px;
    background: var(--ss-surface);
    border: 1.5px solid var(--ss-line);
    border-radius: var(--r-sm);
    font-family: var(--ss-sans);
    font-size: 14.5px;
    color: var(--ss-ink);
    transition: border-color 150ms, box-shadow 150ms;
    -webkit-appearance: none;
    appearance: none;
}
.ss-input:focus {
    outline: none;
    border-color: var(--ss-primary);
    box-shadow: 0 0 0 3px rgba(var(--ss-primary-rgb), 0.12);
}
.ss-input.is-invalid { border-color: var(--ss-danger); }
.ss-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(184,58,42,0.12); }
.ss-input::placeholder { color: var(--ss-muted); }
.ss-textarea {
    display: block;
    width: 100%;
    padding: 12px 14px;
    background: var(--ss-surface);
    border: 1.5px solid var(--ss-line);
    border-radius: var(--r-sm);
    font-family: var(--ss-sans);
    font-size: 14.5px;
    color: var(--ss-ink);
    transition: border-color 150ms, box-shadow 150ms;
    resize: vertical;
    min-height: 120px;
    -webkit-appearance: none;
    appearance: none;
}
.ss-textarea:focus {
    outline: none;
    border-color: var(--ss-primary);
    box-shadow: 0 0 0 3px rgba(var(--ss-primary-rgb), 0.12);
}
.ss-textarea.is-invalid { border-color: var(--ss-danger); }
.ss-field-error {
    margin-top: 5px;
    font-size: 12.5px;
    color: var(--ss-danger);
}

/* Input with icon */
.ss-input-wrap { position: relative; }
.ss-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ss-muted);
    font-size: 13px;
    pointer-events: none;
}
.ss-input-icon-left { padding-left: 40px; }
.ss-input-icon-right { padding-right: 48px; }
.ss-input-toggle {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ss-muted);
    font-size: 13px;
    transition: color 150ms;
    background: none;
    border: 0;
    cursor: pointer;
}
.ss-input-toggle:hover { color: var(--ss-ink); }

/* Checkbox */
.ss-check-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    line-height: 1.5;
}
.ss-check {
    width: 18px; height: 18px;
    border: 1.5px solid var(--ss-line);
    border-radius: var(--r-xs);
    accent-color: var(--ss-primary);
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
}

/* Auth extras row */
.ss-auth-extras {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.ss-auth-link {
    color: var(--ss-primary);
    font-size: 13.5px;
    transition: opacity 150ms;
}
.ss-auth-link:hover { opacity: 0.75; }
.ss-auth-divider {
    position: relative;
    text-align: center;
    margin: 24px 0;
}
.ss-auth-divider::before {
    content: '';
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 1px;
    background: var(--ss-line);
}
.ss-auth-divider span {
    position: relative;
    background: var(--ss-surface);
    padding: 0 12px;
    font-size: 12px;
    color: var(--ss-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ss-auth-switch {
    text-align: center;
    font-size: 13.5px;
    color: var(--ss-muted);
    margin: 0;
}

/* Alerts */
.ss-alert {
    padding: 12px 16px;
    border-radius: var(--r-sm);
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.5;
}
.ss-alert-success {
    background: var(--ss-success-light);
    color: var(--ss-success);
    border: 1px solid rgba(47,107,71,0.2);
}
.ss-alert-danger {
    background: var(--ss-danger-light);
    color: var(--ss-danger);
    border: 1px solid rgba(184,58,42,0.2);
}

/* ── Error Pages ── */
.ss-error-wrap {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px var(--gutter);
}
.ss-error-inner {
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
}
.ss-error-num {
    font-family: var(--ss-serif);
    font-size: clamp(96px, 18vw, 180px);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--ss-primary-light), var(--ss-bg-alt));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: var(--err-color, rgba(194,65,12,0.15));
    color: transparent;
    margin-bottom: 24px;
    display: block;
    user-select: none;
}
.ss-error-heading {
    font-family: var(--ss-serif);
    font-size: clamp(22px, 3.5vw, 32px);
    font-weight: 500;
    color: var(--ss-ink);
    margin-bottom: 14px;
    letter-spacing: -0.01em;
}
.ss-error-text {
    color: var(--ss-muted);
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 28px;
}
.ss-error-help {
    color: var(--ss-muted);
    font-size: 13.5px;
    margin-bottom: 14px;
}

/* ── Contacts Page ── */
.ss-contacts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 56px;
}
@media (min-width: 768px) {
    .ss-contacts-grid { grid-template-columns: 300px 1fr; gap: 56px; }
}
@media (min-width: 1100px) {
    .ss-contacts-grid { grid-template-columns: 340px 1fr; gap: 72px; }
}
.ss-contacts-info {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.ss-contact-row {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14.5px;
    color: var(--ss-ink-soft);
}
.ss-contact-dot {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.ss-contact-dot--primary { background: var(--ss-primary-light); color: var(--ss-primary); }
.ss-contact-dot--success { background: var(--ss-success-light); color: var(--ss-success); }
.ss-contact-dot--danger  { background: var(--ss-danger-light);  color: var(--ss-danger); }
.ss-contact-socials {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.ss-contact-social-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--ss-bg-alt);
    color: var(--ss-ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 150ms, color 150ms;
}
.ss-contact-social-btn:hover {
    background: var(--ss-primary-light);
    color: var(--ss-primary);
}
.ss-contacts-form-head {
    margin-bottom: 20px;
}
.ss-contacts-map {
    width: 100%;
    height: 340px;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) { .ss-contacts-map { height: 420px; } }

/* ── FAQ Page ── */
.ss-faq-list {
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.ss-faq-group-title {
    font-family: var(--ss-serif);
    font-size: 20px;
    font-weight: 500;
    color: var(--ss-ink);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}
@media (min-width: 768px) { .ss-faq-group-title { font-size: 22px; } }
.ss-faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--ss-line);
    border-radius: var(--r-md);
    overflow: hidden;
}
.ss-faq-item { border-bottom: 1px solid var(--ss-line); }
.ss-faq-item:last-child { border-bottom: none; }
.ss-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    text-align: left;
    font-family: var(--ss-sans);
    font-size: 15px;
    font-weight: 500;
    color: var(--ss-ink);
    background: var(--ss-surface);
    border: 0;
    cursor: pointer;
    transition: background 150ms;
    min-height: 56px;
}
.ss-faq-q:hover { background: var(--ss-bg); }
.ss-faq-q.is-open { background: var(--ss-bg-alt); }
.ss-faq-chev {
    font-size: 11px;
    color: var(--ss-muted);
    flex-shrink: 0;
    transition: transform 250ms;
}
.ss-faq-q.is-open .ss-faq-chev { transform: rotate(180deg); }
.ss-faq-a { background: var(--ss-bg); }
.ss-faq-a-inner {
    padding: 16px 20px 20px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--ss-ink-soft);
}
@media (min-width: 768px) {
    .ss-faq-q { padding: 20px 24px; font-size: 15.5px; }
    .ss-faq-a-inner { padding: 18px 24px 24px; }
}
.ss-empty-state-revo {
    text-align: center;
    padding: 64px 0;
}
.ss-empty-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--ss-bg-alt);
    color: var(--ss-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
}

/* ── Static Page (pages/show) ── */
.ss-static-page-wrap {
    max-width: 760px;
    margin: 0 auto;
}
.ss-static-page-title {
    font-family: var(--ss-serif);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ss-ink);
    margin-bottom: 32px;
    line-height: 1.1;
}
.ss-page-content {
    font-size: 16px;
    line-height: 1.75;
    color: var(--ss-ink-soft);
}
.ss-page-content p { margin-bottom: 1.2em; }
.ss-page-content h2, .ss-page-content h3, .ss-page-content h4 {
    font-family: var(--ss-serif);
    color: var(--ss-ink);
    margin: 1.8em 0 0.6em;
}
.ss-page-content ul, .ss-page-content ol {
    padding-left: 1.5em;
    margin-bottom: 1.2em;
}
.ss-page-content li { margin-bottom: 0.4em; }
.ss-page-content a { color: var(--ss-primary); text-decoration: underline; }
.ss-page-content a:hover { opacity: 0.75; }
.ss-consent-info-panel {
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: var(--r-md);
    margin-bottom: 32px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.ss-consent-info-body { padding: 22px 26px; }
.ss-consent-info-title {
    font-family: var(--ss-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--ss-ink);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ss-line-soft);
    display: flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ss-consent-info-body #consent-data table {
    width: 100%;
    max-width: 480px;
    border-collapse: collapse;
    margin: 0;
}
.ss-consent-info-body #consent-data td {
    padding: 8px 0;
    font-size: 14px;
    border: 0;
    vertical-align: middle;
}
.ss-consent-info-body #consent-data td:first-child {
    color: var(--ss-muted);
    width: 38%;
    padding-right: 16px;
    font-weight: 400;
}
.ss-consent-info-body #consent-data td:last-child {
    color: var(--ss-ink);
    font-weight: 500;
}
.ss-consent-info-body #consent-data .text-success { color: var(--ss-success, #15803d) !important; font-weight: 600; }
.ss-consent-info-body #consent-data .text-danger { color: var(--ss-danger, #b91c1c) !important; font-weight: 600; }
.ss-consent-info-body #consent-data .text-muted { color: var(--ss-muted) !important; }
.ss-consent-info-body #consent-data p { margin: 0; color: var(--ss-muted); font-size: 14px; }

/* ── Unsubscribed Page ── */
.ss-unsubscribe-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--ss-info-light);
    color: var(--ss-info);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 20px;
}

/* ════════════════════════════════════════════════════════════
   ── Empty state (search/filter results, no posts, etc.) ──
   ──────────────────────────────────────────────────────────── */
.ss-empty {
    text-align: center;
    padding: 56px 24px;
    color: var(--ss-muted);
    background: var(--ss-surface);
    border: 1px solid var(--ss-line-soft);
    border-radius: var(--r-md);
}
@media (min-width: 1100px) { .ss-empty { padding: 80px 32px; } }
.ss-empty-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ss-bg-alt);
    color: var(--ss-ink-soft);
    font-size: 28px;
    margin-bottom: 16px;
}
.ss-empty-icon--warn { background: var(--ss-warning-light); color: var(--ss-warning); }
.ss-empty-icon--info { background: var(--ss-info-light); color: var(--ss-info); }
.ss-empty h5 {
    font-family: var(--ss-serif);
    font-weight: 500;
    font-size: 22px;
    color: var(--ss-ink);
    margin: 0 0 8px;
}
@media (min-width: 1100px) { .ss-empty h5 { font-size: 26px; } }
.ss-empty p {
    font-size: 14.5px;
    color: var(--ss-muted);
    max-width: 500px;
    margin: 0 auto 8px;
}
.ss-empty .ss-empty-hint { font-size: 13px; opacity: 0.85; }
.ss-empty .ss-btn { margin-top: 16px; }

/* ════════════════════════════════════════════════════════════
   ── Categories grid (categories.blade.php) ──
   ──────────────────────────────────────────────────────────── */
.ss-cat-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 600px)  { .ss-cat-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .ss-cat-card-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 1100px) { .ss-cat-card-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

.ss-cat-card {
    display: flex; flex-direction: column;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line-soft);
    border-radius: var(--r-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ss-cat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--ss-line);
}
.ss-cat-card-image {
    aspect-ratio: 1.2 / 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2px;
    background: var(--ss-bg-alt);
    overflow: hidden;
}
.ss-cat-card-foot {
    padding: 14px 16px 16px;
    display: flex; flex-direction: column; gap: 2px;
}
.ss-cat-card-title {
    font-family: var(--ss-serif);
    font-weight: 500;
    font-size: 17px;
    color: var(--ss-ink);
}
.ss-cat-card-count {
    font-size: 12px;
    color: var(--ss-muted);
    font-feature-settings: "tnum";
}

/* ════════════════════════════════════════════════════════════
   ── Brands grid (brands.blade.php) + Brand head (brand.blade.php) ──
   ──────────────────────────────────────────────────────────── */
.ss-brand-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 600px)  { .ss-brand-card-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 900px)  { .ss-brand-card-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .ss-brand-card-grid { grid-template-columns: repeat(5, 1fr); gap: 20px; } }
@media (min-width: 1300px) { .ss-brand-card-grid { grid-template-columns: repeat(6, 1fr); } }

.ss-brand-card {
    display: flex; flex-direction: column;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line-soft);
    border-radius: var(--r-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ss-brand-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--ss-line);
}
.ss-brand-card-logo {
    aspect-ratio: 16 / 10;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: var(--ss-surface);
    border-bottom: 1px solid var(--ss-line-soft);
}
.ss-brand-card-logo img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    filter: grayscale(0.2);
    transition: filter 0.2s ease;
}
.ss-brand-card:hover .ss-brand-card-logo img { filter: grayscale(0); }
.ss-brand-card-logo i {
    font-size: 28px;
    color: var(--ss-muted);
    opacity: 0.5;
}
.ss-brand-card-foot {
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 2px;
    background: var(--ss-bg);
}
.ss-brand-card-title {
    font-family: var(--ss-serif);
    font-weight: 500;
    font-size: 15px;
    color: var(--ss-ink);
}
.ss-brand-card-count {
    font-size: 11px;
    color: var(--ss-muted);
    font-feature-settings: "tnum";
}

.ss-brand-head {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.ss-brand-head-logo {
    flex-shrink: 0;
    width: 80px; height: 80px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: var(--r-md);
    padding: 8px;
}
.ss-brand-head-logo img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
}
@media (min-width: 768px) { .ss-brand-head-logo { width: 100px; height: 100px; } }

/* ════════════════════════════════════════════════════════════
   ── Compare (compare.blade.php) ──
   ──────────────────────────────────────────────────────────── */
.ss-compare-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}
@media (min-width: 600px)  { .ss-compare-cards { grid-template-columns: repeat(var(--cols, 2), minmax(220px, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .ss-compare-cards { grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 20px; } }

.ss-compare-card {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line-soft);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.ss-compare-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--ss-line);
}
.ss-compare-remove {
    position: absolute;
    top: 8px; right: 8px;
    z-index: 2;
    width: 32px; height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    color: var(--ss-ink-soft);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.ss-compare-remove:hover { background: var(--ss-danger); color: #fff; }

.ss-compare-card-image {
    aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: var(--ss-surface);
    border-bottom: 1px solid var(--ss-line-soft);
    text-decoration: none;
}
.ss-compare-card-image img { max-width: 100%; max-height: 100%; object-fit: contain; }

.ss-compare-card-body {
    padding: 14px 14px 8px;
    display: flex; flex-direction: column;
    gap: 8px;
    flex: 1;
}
.ss-compare-card-title {
    font-family: var(--ss-serif);
    font-weight: 500;
    font-size: 15px;
    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-compare-card-title:hover { color: var(--ss-primary); }
.ss-compare-card-price {
    display: flex; flex-wrap: wrap;
    gap: 6px; align-items: baseline;
}
.ss-compare-price-main, .ss-compare-price-promo {
    font-family: var(--ss-mono);
    font-weight: 600;
    font-size: 16px;
    color: var(--ss-primary);
    font-feature-settings: "tnum";
}
.ss-compare-price-old {
    font-size: 13px;
    color: var(--ss-muted);
    text-decoration: line-through;
    font-feature-settings: "tnum";
}
.ss-compare-card-callus {
    font-style: italic;
    font-size: 13px;
    color: var(--ss-muted);
}
.ss-compare-card-rating {
    color: var(--ss-warning);
    font-size: 12px;
    display: flex; gap: 2px; align-items: center;
}
.ss-compare-card-rating span { color: var(--ss-muted); margin-left: 4px; font-size: 11px; }
.ss-compare-card-stock { margin-top: auto; font-size: 12px; }
.ss-compare-stock { display: inline-flex; gap: 4px; align-items: center; font-weight: 500; }
.ss-compare-stock.is-in { color: var(--ss-success); }
.ss-compare-stock.is-out { color: var(--ss-warning); }
.ss-compare-card-action {
    display: flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 12px;
    background: var(--ss-bg);
    color: var(--ss-ink);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-top: 1px solid var(--ss-line-soft);
    transition: background 0.15s ease, color 0.15s ease;
    min-height: 44px;
}
.ss-compare-card-action:hover { background: var(--ss-primary); color: #fff; }

.ss-compare-specs { margin-top: 32px; }
.ss-compare-specs-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--ss-line-soft);
    border-radius: var(--r-md);
    background: var(--ss-surface);
}
.ss-compare-spec-row {
    display: grid;
    grid-template-columns: 140px repeat(var(--cols, 2), minmax(180px, 1fr));
    border-bottom: 1px solid var(--ss-line-soft);
    min-width: max-content;
}
@media (min-width: 768px) { .ss-compare-spec-row { grid-template-columns: 200px repeat(var(--cols, 2), minmax(200px, 1fr)); } }
.ss-compare-spec-row:last-child { border-bottom: 0; }
.ss-compare-spec-row:nth-child(even) { background: var(--ss-bg); }
.ss-compare-spec-label {
    padding: 14px 16px;
    font-weight: 500;
    color: var(--ss-ink-soft);
    font-size: 13px;
    border-right: 1px solid var(--ss-line-soft);
    background: var(--ss-bg-alt);
    position: sticky;
    left: 0;
    z-index: 1;
}
.ss-compare-spec-value {
    padding: 14px 16px;
    font-size: 14px;
    color: var(--ss-ink);
    border-right: 1px solid var(--ss-line-soft);
}
.ss-compare-spec-value:last-child { border-right: 0; }
.ss-compare-spec-value a { color: var(--ss-primary); text-decoration: none; }
.ss-compare-spec-value a:hover { text-decoration: underline; }
.ss-compare-spec-value .ss-muted { color: var(--ss-muted); }

/* ════════════════════════════════════════════════════════════
   ── Blog ──
   ──────────────────────────────────────────────────────────── */
.ss-blog-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 1100px) {
    .ss-blog-layout {
        grid-template-columns: 1fr 320px;
        gap: 48px;
    }
}
.ss-blog-main { min-width: 0; }
.ss-blog-side {
    display: flex; flex-direction: column; gap: 24px;
    min-width: 0;
}

/* ── Blog grid (standard cards) ── */
.ss-blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 24px;
}
@media (min-width: 600px)  { .ss-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1100px) { .ss-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (min-width: 1400px) { .ss-blog-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Blog card (standard) ── */
.ss-blog-card {
    display: flex; flex-direction: column;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line-soft);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ss-blog-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--ss-line);
}
.ss-blog-card-img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ss-bg-alt);
    display: block;
}
.ss-blog-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.ss-blog-card:hover .ss-blog-card-img img { transform: scale(1.04); }
.ss-blog-card-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--ss-muted);
    font-size: 32px;
    opacity: 0.5;
}
.ss-blog-card-body {
    padding: 16px 18px 18px;
    display: flex; flex-direction: column; gap: 8px;
    flex: 1;
}
.ss-blog-card-cat {
    align-self: flex-start;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--ss-primary);
    text-decoration: none;
}
.ss-blog-card-cat:hover { text-decoration: underline; }
.ss-blog-card-title {
    font-family: var(--ss-serif);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.35;
    margin: 0;
}
.ss-blog-card-title a {
    color: var(--ss-ink);
    text-decoration: none;
}
.ss-blog-card-title a:hover { color: var(--ss-primary); }
.ss-blog-card-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ss-ink-soft);
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ss-blog-card-meta {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--ss-line-soft);
    font-size: 12px;
    color: var(--ss-muted);
}
.ss-blog-card-meta time { font-feature-settings: "tnum"; }
.ss-blog-card-meta i { margin-right: 4px; }
.ss-blog-card-readmore {
    color: var(--ss-primary);
    font-weight: 500;
    text-decoration: none;
    font-size: 12px;
    display: inline-flex; align-items: center; gap: 4px;
}
.ss-blog-card-readmore i { transition: transform 0.2s ease; font-size: 10px; }
.ss-blog-card-readmore:hover i { transform: translateX(2px); }

/* ── Featured blog card (large hero) ── */
.ss-blog-featured {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line-soft);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: 24px;
}
@media (min-width: 768px) {
    .ss-blog-featured {
        grid-template-columns: 1.2fr 1fr;
        margin-bottom: 32px;
    }
}
.ss-blog-featured-img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--ss-bg-alt);
    display: block;
}
@media (min-width: 768px) { .ss-blog-featured-img { aspect-ratio: auto; min-height: 320px; } }
.ss-blog-featured-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.ss-blog-featured:hover .ss-blog-featured-img img { transform: scale(1.03); }
.ss-blog-featured-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--ss-muted);
    font-size: 48px;
    opacity: 0.5;
}
.ss-blog-featured-body {
    padding: 24px 24px 28px;
    display: flex; flex-direction: column; gap: 14px;
    justify-content: center;
}
@media (min-width: 1100px) { .ss-blog-featured-body { padding: 36px 40px 40px; } }
.ss-blog-featured-cat {
    align-self: flex-start;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: var(--ss-primary);
    text-decoration: none;
}
.ss-blog-featured-cat:hover { text-decoration: underline; }
.ss-blog-featured-title {
    font-family: var(--ss-serif);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.2;
    margin: 0;
}
@media (min-width: 768px)  { .ss-blog-featured-title { font-size: 32px; } }
@media (min-width: 1100px) { .ss-blog-featured-title { font-size: 38px; } }
.ss-blog-featured-title a {
    color: var(--ss-ink);
    text-decoration: none;
}
.ss-blog-featured-title a:hover { color: var(--ss-primary); }
.ss-blog-featured-excerpt {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ss-ink-soft);
    margin: 0;
}
.ss-blog-featured-meta {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap;
    margin-top: 8px;
}
.ss-blog-featured-meta small {
    color: var(--ss-muted);
    font-size: 12px;
    font-feature-settings: "tnum";
}
.ss-blog-featured-meta small i { margin-right: 4px; }
.ss-blog-featured-meta small span { margin-left: 12px; }

/* ── Blog sidebar widgets ── */
.ss-blog-sidebar {
    background: var(--ss-surface);
    border: 1px solid var(--ss-line-soft);
    border-radius: var(--r-md);
    overflow: hidden;
}
.ss-blog-sidebar-head {
    padding: 14px 18px;
    background: var(--ss-bg-alt);
    border-bottom: 1px solid var(--ss-line-soft);
    font-family: var(--ss-serif);
    font-weight: 500;
    font-size: 15px;
    color: var(--ss-ink);
}
.ss-blog-sidebar-head i {
    color: var(--ss-primary);
    margin-right: 6px;
}
.ss-blog-sidebar-list {
    list-style: none;
    margin: 0; padding: 0;
}
.ss-blog-sidebar-list li { border-bottom: 1px solid var(--ss-line-soft); }
.ss-blog-sidebar-list li:last-child { border-bottom: 0; }
.ss-blog-sidebar-list a {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px;
    padding: 12px 18px;
    color: var(--ss-ink-soft);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s ease, color 0.15s ease;
    min-height: 44px;
}
.ss-blog-sidebar-list a:hover {
    background: var(--ss-bg);
    color: var(--ss-primary);
}
.ss-blog-sidebar-list a.is-active {
    color: var(--ss-primary);
    font-weight: 600;
    background: var(--ss-primary-light);
}
.ss-blog-sidebar-badge {
    display: inline-flex;
    align-items: center; justify-content: center;
    min-width: 24px;
    padding: 2px 8px;
    background: var(--ss-bg-alt);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ss-ink-soft);
    font-feature-settings: "tnum";
}
.ss-blog-sidebar-list a.is-active .ss-blog-sidebar-badge {
    background: var(--ss-primary);
    color: #fff;
}

/* ── Blog article (single post) ── */
.ss-blog-article {
    max-width: 760px;
    margin: 0 auto;
}
.ss-blog-layout--post { padding-top: 8px; }
@media (min-width: 1100px) { .ss-blog-layout--post { padding-top: 12px; } }
@media (max-width: 599px) { .ss-blog-layout--post { padding-top: 4px; } }
.ss-blog-article-eyebrow {
    margin-bottom: 12px;
}
.ss-blog-article-eyebrow a {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--ss-primary);
    text-decoration: none;
}
.ss-blog-article-eyebrow a:hover { text-decoration: underline; }
.ss-blog-article-title {
    font-family: var(--ss-serif);
    font-weight: 500;
    font-size: 32px;
    line-height: 1.15;
    color: var(--ss-ink);
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}
@media (min-width: 768px)  { .ss-blog-article-title { font-size: 42px; } }
@media (min-width: 1100px) { .ss-blog-article-title { font-size: 52px; } }
.ss-blog-article-meta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px;
    padding-bottom: 18px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--ss-line);
    font-size: 13px;
    color: var(--ss-muted);
    font-feature-settings: "tnum";
}
.ss-blog-article-meta i { margin-right: 4px; }
.ss-blog-article-meta-sep { opacity: 0.5; }
.ss-blog-article-hero {
    margin: 0 0 32px;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--ss-bg-alt);
}
.ss-blog-article-hero img {
    width: 100%; height: auto;
    display: block;
    max-height: 540px;
    object-fit: cover;
}

/* Editorial body typography */
.ss-blog-article-body {
    font-family: var(--ss-sans);
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--ss-ink-soft);
}
@media (min-width: 1100px) { .ss-blog-article-body { font-size: 17px; line-height: 1.8; } }
.ss-blog-article-body > * + * { margin-top: 1em; }
.ss-blog-article-body p { margin: 0 0 1em; }
.ss-blog-article-body h2 {
    font-family: var(--ss-serif);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.25;
    color: var(--ss-ink);
    margin: 1.6em 0 0.6em;
    letter-spacing: -0.01em;
}
@media (min-width: 1100px) { .ss-blog-article-body h2 { font-size: 30px; } }
.ss-blog-article-body h3 {
    font-family: var(--ss-serif);
    font-weight: 500;
    font-size: 21px;
    line-height: 1.3;
    color: var(--ss-ink);
    margin: 1.4em 0 0.5em;
}
@media (min-width: 1100px) { .ss-blog-article-body h3 { font-size: 24px; } }
.ss-blog-article-body h4 {
    font-family: var(--ss-serif);
    font-weight: 500;
    font-size: 18px;
    color: var(--ss-ink);
    margin: 1.2em 0 0.5em;
}
.ss-blog-article-body em { font-style: italic; }
.ss-blog-article-body strong { font-weight: 600; color: var(--ss-ink); }
.ss-blog-article-body a {
    color: var(--ss-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.ss-blog-article-body a:hover { color: var(--ss-primary-dark); }
.ss-blog-article-body ul,
.ss-blog-article-body ol { margin: 0 0 1em; padding-left: 1.4em; }
.ss-blog-article-body li { margin-bottom: 0.4em; }
.ss-blog-article-body blockquote {
    margin: 1.6em 0;
    padding: 4px 0 4px 24px;
    border-left: 3px solid var(--ss-primary);
    font-family: var(--ss-serif);
    font-style: italic;
    font-size: 19px;
    line-height: 1.55;
    color: var(--ss-ink);
}
@media (min-width: 1100px) { .ss-blog-article-body blockquote { font-size: 22px; padding-left: 28px; } }
.ss-blog-article-body img {
    max-width: 100%; height: auto;
    border-radius: var(--r-sm);
    margin: 1.4em 0;
    display: block;
}
.ss-blog-article-body figure { margin: 1.4em 0; }
.ss-blog-article-body figcaption {
    font-size: 13px;
    color: var(--ss-muted);
    text-align: center;
    margin-top: 8px;
    font-style: italic;
}
.ss-blog-article-body code {
    font-family: var(--ss-mono);
    font-size: 0.9em;
    background: var(--ss-bg-alt);
    padding: 2px 6px;
    border-radius: var(--r-xs);
    color: var(--ss-ink);
}
.ss-blog-article-body pre {
    background: var(--ss-bg-alt);
    border: 1px solid var(--ss-line-soft);
    border-radius: var(--r-sm);
    padding: 16px;
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.6;
    margin: 1.4em 0;
}
.ss-blog-article-body pre code {
    background: none;
    padding: 0;
}
.ss-blog-article-body hr {
    border: 0;
    border-top: 1px solid var(--ss-line);
    margin: 2em 0;
}

/* ════════════════════════════════════════════════════════════
   COMPONENT STYLES (porting batch - 15 components phase)
   ════════════════════════════════════════════════════════════ */

/* ── Newsletter (footer inline form) ── */
.ss-newsletter { display: flex; flex-direction: column; gap: 10px; }
.ss-newsletter-text {
    font-size: 13px; line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 4px;
}
.ss-newsletter-form { display: flex; flex-direction: column; gap: 6px; }
.ss-newsletter-row {
    display: flex; align-items: stretch;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-sm);
    overflow: hidden;
    transition: border-color 150ms;
}
.ss-newsletter-row:focus-within { border-color: var(--ss-primary); }
.ss-newsletter-input {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 12px 14px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    min-height: 44px;
    outline: none;
}
.ss-newsletter-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.ss-newsletter-btn {
    background: var(--ss-primary);
    color: #fff;
    border: 0;
    padding: 0 18px;
    cursor: pointer;
    transition: background 150ms;
    min-width: 52px;
    min-height: 44px;
}
.ss-newsletter-btn:hover:not(:disabled) { background: var(--ss-primary-dark); }
.ss-newsletter-btn:disabled { opacity: 0.6; cursor: wait; }
.ss-newsletter-msg { font-size: 12px; padding-top: 4px; }
.ss-newsletter-msg.is-ok  { color: #6ee7a4; }
.ss-newsletter-msg.is-err { color: #ffb4b4; }

/* ── Cookie Consent Banner (bottom-fixed) ── */
.ss-consent {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 10000;
    padding: 12px;
    display: none;
}
.ss-consent.show { display: block; animation: ssConsentSlide 320ms cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes ssConsentSlide { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.ss-consent-card {
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 18px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ss-consent-icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--ss-primary-light);
    color: var(--ss-primary-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.ss-consent-body { flex: 1; min-width: 0; }
.ss-consent-title {
    font-family: var(--ss-serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--ss-ink);
    margin: 0 0 6px;
}
.ss-consent-text {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ss-ink-soft);
    margin: 0 0 8px;
}
.ss-consent-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ss-primary);
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}
.ss-consent-link:hover { color: var(--ss-primary-dark); }
.ss-consent-actions {
    display: flex;
    gap: 8px;
    flex-direction: column;
}
.ss-consent-actions .ss-btn { width: 100%; }
@media (min-width: 768px) {
    .ss-consent-card { flex-direction: row; align-items: center; padding: 18px 22px; }
    .ss-consent-actions { flex-direction: row; flex-shrink: 0; }
    .ss-consent-actions .ss-btn { width: auto; min-width: 140px; }
}

/* ── Subscribe Modal ── */
.ss-subscribe-backdrop {
    position: fixed; inset: 0;
    background: rgba(26, 24, 21, 0.55);
    z-index: 10010;
}
.ss-subscribe-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
    max-width: 460px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--ss-surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    z-index: 10020;
    padding: 28px 24px 24px;
}
@media (min-width: 768px) { .ss-subscribe-modal { padding: 36px 36px 32px; } }
/* Alpine x-transition classes */
.ss-subscribe-enter { transition: opacity 220ms ease-out, transform 220ms ease-out; }
.ss-subscribe-enter-start { opacity: 0; transform: translate(-50%, -45%) scale(0.96); }
.ss-subscribe-enter-end   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ss-subscribe-leave { transition: opacity 160ms ease-in, transform 160ms ease-in; }
.ss-subscribe-leave-start { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ss-subscribe-leave-end   { opacity: 0; transform: translate(-50%, -45%) scale(0.96); }

.ss-subscribe-close {
    position: absolute; top: 12px; right: 12px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--ss-bg-alt);
    border: 0;
    color: var(--ss-ink-soft);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    transition: background 150ms, color 150ms;
}
.ss-subscribe-close:hover { background: var(--ss-line); color: var(--ss-ink); }

.ss-subscribe-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--ss-primary-light);
    color: var(--ss-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    margin: 0 auto 18px;
}
.ss-subscribe-title {
    font-family: var(--ss-serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--ss-ink);
    margin: 0 0 8px;
    text-align: center;
    letter-spacing: -0.01em;
}
.ss-subscribe-text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ss-ink-soft);
    margin: 0 0 18px;
    text-align: center;
}
.ss-subscribe-form { display: flex; flex-direction: column; gap: 12px; }
.ss-subscribe-field { display: flex; flex-direction: column; gap: 6px; }
.ss-subscribe-field label {
    font-size: 12px;
    color: var(--ss-ink-soft);
    font-weight: 500;
    display: flex; gap: 6px; align-items: center;
}
.ss-subscribe-optional { color: var(--ss-muted); font-weight: 400; font-size: 11px; }
.ss-subscribe-required { color: var(--ss-danger); }
.ss-subscribe-field input {
    width: 100%;
    border: 1px solid var(--ss-line);
    background: #fff;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    font: inherit;
    font-size: 14px;
    min-height: 44px;
    color: var(--ss-ink);
    transition: border-color 150ms;
}
.ss-subscribe-field input:focus { outline: none; border-color: var(--ss-ink); }
.ss-subscribe-privacy {
    font-size: 11px;
    color: var(--ss-muted);
    margin: 14px 0 0;
    text-align: center;
}
.ss-subscribe-success { text-align: center; }
.ss-subscribe-success-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(47, 107, 71, 0.1);
    color: var(--ss-success);
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
    margin: 0 auto 16px;
}

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

/* ── Subcategory Card "+N" badge tile (used in category-card.blade.php grid mode) ── */
.ss-subcat-more {
    background: var(--ss-ink) !important;
    color: #fff;
    display: flex !important;
    flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
    padding: 8px;
}
.ss-subcat-more::after { display: none !important; }
.ss-subcat-more-count {
    font-family: var(--ss-serif);
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    line-height: 1;
}
.ss-subcat-more-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.7);
    text-align: center;
}

/* ── Product Question (inline collapsible) ── */
/* Product Question form - inline inside tab (no wrapper bg/border) */
.ss-pq { margin: 0; }
.ss-pq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 18px;
}
@media (min-width: 600px) { .ss-pq-grid { grid-template-columns: 1fr 1fr; gap: 18px; } }
.ss-pq-field { display: flex; flex-direction: column; gap: 6px; }
.ss-pq-field-full { grid-column: 1 / -1; }
.ss-pq-field label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ss-muted);
}
.ss-pq-req { color: var(--ss-primary); margin-left: 2px; }
.ss-pq-field input,
.ss-pq-field textarea {
    width: 100%;
    border: 1px solid var(--ss-line);
    background: var(--ss-surface);
    padding: 11px 14px;
    border-radius: var(--r-sm);
    font: inherit;
    font-size: 14px;
    color: var(--ss-ink);
    min-height: 44px;
    transition: border-color 150ms, background 150ms, box-shadow 150ms;
}
.ss-pq-field textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.ss-pq-field input::placeholder,
.ss-pq-field textarea::placeholder { color: var(--ss-muted); opacity: 0.7; }
.ss-pq-field input:hover,
.ss-pq-field textarea:hover { border-color: var(--ss-ink-soft); }
.ss-pq-field input:focus,
.ss-pq-field textarea:focus {
    outline: none;
    border-color: var(--ss-ink);
    box-shadow: 0 0 0 3px rgba(var(--ss-primary-rgb), 0.08);
}
.ss-pq-error {
    background: rgba(184, 58, 42, 0.08);
    color: var(--ss-danger);
    padding: 10px 14px;
    border-radius: var(--r-sm);
    font-size: 13px;
    margin-bottom: 14px;
}
.ss-pq-success {
    background: rgba(47, 107, 71, 0.08);
    color: var(--ss-success);
    padding: 18px 20px;
    border-radius: var(--r-md);
    font-size: 14.5px;
    display: flex; align-items: center; gap: 12px;
}
.ss-pq-success i { font-size: 18px; }
.ss-pq-actions {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
}
.ss-pq-actions .ss-btn { min-width: 180px; }

/* ── Product Reviews extras (form notice, login prompt, list head) ── */
.ss-pp-reviews-main { display: flex; flex-direction: column; gap: 24px; }
.ss-pp-reviews-stars {
    color: var(--ss-warning);
    margin: 6px 0;
    font-size: 13px;
}
.ss-pp-review-msg {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    background: var(--ss-bg-alt);
    color: var(--ss-ink-soft);
    font-size: 13px;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: ss-pp-review-msg-in 220ms ease-out;
}
.ss-pp-review-msg i { flex-shrink: 0; margin-top: 2px; font-size: 13px; opacity: 0.85; }
.ss-pp-review-msg.is-success {
    background: rgba(47, 107, 71, 0.10);
    color: #1f4830;
}
.ss-pp-review-msg.is-success i { color: var(--ss-success); opacity: 1; }
.ss-pp-review-msg.is-error {
    background: rgba(184, 58, 42, 0.10);
    color: #7a2a20;
}
.ss-pp-review-msg.is-error i { color: var(--ss-danger); opacity: 1; }
@keyframes ss-pp-review-msg-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Persistent status notice for existing user review (pending / approved) */
.ss-pp-review-status {
    display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: var(--r-md);
    background: rgba(47, 107, 71, 0.07);
    color: var(--ss-ink);
}
.ss-pp-review-status > i {
    flex-shrink: 0;
    font-size: 20px;
    margin-top: 2px;
    color: var(--ss-success);
}
.ss-pp-review-status.is-pending {
    background: rgba(199, 125, 46, 0.10);
}
.ss-pp-review-status.is-pending > i { color: var(--ss-warning); }
.ss-pp-review-status-text {
    flex: 1 1 220px;
    display: flex; flex-direction: column; gap: 2px;
}
.ss-pp-review-status-text strong {
    font-family: var(--ss-serif);
    font-weight: 500;
    font-size: 15px;
    color: var(--ss-ink);
}
.ss-pp-review-status-text span {
    font-size: 13px;
    color: var(--ss-ink-soft);
    line-height: 1.5;
}
.ss-pp-review-status-edit {
    align-self: center;
    appearance: none;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    color: var(--ss-ink);
    padding: 9px 16px;
    border-radius: var(--r-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-pp-review-status-edit:hover {
    border-color: var(--ss-ink);
    background: var(--ss-ink);
    color: var(--ss-surface);
}
.ss-pp-review-status-edit i { font-size: 11px; }
.ss-pp-review-form {
    position: relative;
    background: var(--ss-bg-alt);
    border: 1px solid var(--ss-line);
    border-radius: var(--r-md);
    padding: 20px;
}
.ss-pp-review-form-close {
    position: absolute; top: 10px; right: 10px;
    width: 32px; height: 32px;
    background: transparent; border: 0;
    color: var(--ss-muted);
    cursor: pointer;
    border-radius: 50%;
    transition: background 150ms, color 150ms;
}
.ss-pp-review-form-close:hover { background: var(--ss-line); color: var(--ss-ink); }
.ss-pp-review-form-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.ss-pp-review-form-title {
    font-family: var(--ss-serif);
    font-size: 18px; font-weight: 500;
    color: var(--ss-ink);
    margin: 0;
    display: inline-flex; gap: 8px; align-items: center;
}
.ss-pp-review-form-title i { color: var(--ss-primary); font-size: 14px; }
.ss-pp-review-verified,
.ss-pp-review-verified-badge {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--ss-success);
    font-size: 11.5px;
    font-weight: 500;
}
.ss-pp-review-verified-badge { font-size: 12px; margin-left: 4px; }
.ss-pp-review-login {
    background: var(--ss-bg-alt);
    border: 1px solid var(--ss-line);
    border-radius: var(--r-md);
    padding: 16px 20px;
    font-size: 13.5px;
    color: var(--ss-ink-soft);
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.ss-pp-review-login i { color: var(--ss-primary); }
.ss-pp-review-login-link {
    color: var(--ss-primary);
    font-weight: 500;
    border-bottom: 1px solid currentColor;
}
.ss-pp-review-login-link:hover { color: var(--ss-primary-dark); }
.ss-pp-review-actions {
    display: inline-flex; gap: 6px; margin-left: 10px;
}
.ss-pp-review-actions button {
    background: transparent; border: 0;
    width: 28px; height: 28px;
    color: var(--ss-muted);
    cursor: pointer;
    border-radius: 50%;
    transition: background 150ms, color 150ms;
}
.ss-pp-review-actions button:hover { background: var(--ss-line); color: var(--ss-ink); }
.ss-pp-reviews-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--ss-muted);
}
.ss-pp-reviews-empty > i {
    font-size: 36px;
    color: var(--ss-line);
    margin-bottom: 12px;
}
.ss-pp-reviews-empty-title {
    font-family: var(--ss-serif);
    font-size: 18px;
    color: var(--ss-ink);
    margin: 0 0 6px;
}
.ss-pp-reviews-empty p { font-size: 13.5px; margin: 0; }

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

/* Alpine x-cloak: hide before init (prevents flash of unstyled state) */
[x-cloak] { display: none !important; }

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

.ss-pp-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-bg-alt);
    border: 1px solid var(--ss-line-soft);
    border-radius: var(--r-md);
}
.ss-pp-reviews-toolbar-label {
    font-family: var(--ss-mono);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--ss-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1;
}
@media (max-width: 480px) {
    .ss-pp-reviews-toolbar { padding: 10px 12px; gap: 10px; margin-top: 0; }
    .ss-pp-reviews-toolbar-label { font-size: 10px; }
}

/* Custom sort dropdown - replaces native select for editorial polish */
.ss-pp-reviews-sort { position: relative; margin-left: auto; }
.ss-pp-reviews-sort-btn {
    appearance: none;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    color: var(--ss-ink);
    font: inherit; font-size: 13.5px; font-weight: 500;
    padding: 9px 14px;
    border-radius: var(--r-sm);
    min-height: 40px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 10px;
    transition: border-color 150ms ease, background 150ms ease;
}
.ss-pp-reviews-sort-btn:hover { border-color: var(--ss-ink); }
.ss-pp-reviews-sort-btn:focus-visible {
    outline: 2px solid var(--ss-primary);
    outline-offset: 2px;
    border-color: var(--ss-ink);
}
.ss-pp-reviews-sort-current { font-family: var(--ss-sans); }
.ss-pp-reviews-sort-chevron {
    font-size: 10px; color: var(--ss-muted);
    transition: transform 200ms ease;
}
.ss-pp-reviews-sort-chevron.is-open { transform: rotate(180deg); }

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

/* List loading state (during sort change) */
.ss-pp-reviews-list { transition: opacity 200ms ease; }
.ss-pp-reviews-list.is-loading { opacity: 0.5; pointer-events: none; }

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

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

/* Inline review variant note (was inline-styled before) */
.ss-pp-review-variant {
    display: inline-block;
    color: var(--ss-muted);
    font-size: 11px;
    margin-top: 6px;
}

/* Load More button */
.ss-pp-load-more-wrap {
    display: flex; justify-content: flex-end;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--ss-line-soft);
}
.ss-pp-load-more {
    appearance: none;
    background: var(--ss-surface);
    border: 1px solid var(--ss-ink);
    color: var(--ss-ink);
    font: inherit; font-size: 14px; font-weight: 500;
    padding: 12px 28px;
    border-radius: var(--r-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-pp-load-more:hover:not(:disabled) {
    background: var(--ss-ink);
    color: var(--ss-surface);
    transform: translateY(-1px);
}
.ss-pp-load-more:hover:not(:disabled) .ss-pp-load-more-count { color: rgba(255,255,255,0.65); }
.ss-pp-load-more:active:not(:disabled) { transform: translateY(0); }
.ss-pp-load-more:focus-visible {
    outline: 2px solid var(--ss-primary);
    outline-offset: 3px;
}
.ss-pp-load-more:disabled { opacity: 0.55; cursor: not-allowed; }
.ss-pp-load-more i { font-size: 12px; }
.ss-pp-load-more-count {
    color: var(--ss-muted);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* Inline error (network/server failure) */
.ss-pp-reviews-error {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: var(--r-sm);
    border-left: 3px solid var(--ss-danger);
    background: rgba(184, 58, 42, 0.06);
    color: #7a2a20;
    font-size: 13px;
    text-align: center;
}

/* Review form fields (used by partials/review-form-fields.blade.php) */
.ss-review-form-group { margin-bottom: 14px; }
.ss-review-form-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--ss-ink-soft);
    margin-bottom: 6px;
}
.ss-review-star-rating {
    display: flex; gap: 4px;
    font-size: 22px;
    color: var(--ss-warning);
}
.ss-review-input,
.ss-review-textarea {
    width: 100%;
    border: 1px solid var(--ss-line);
    background: #fff;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    font: inherit;
    font-size: 14px;
    min-height: 44px;
    transition: border-color 150ms;
}
.ss-review-textarea { min-height: 100px; resize: vertical; }
.ss-review-input:focus,
.ss-review-textarea:focus { outline: none; border-color: var(--ss-ink); }
.ss-review-submit-btn {
    background: var(--ss-primary);
    color: #fff;
    border: 0;
    padding: 11px 22px;
    border-radius: var(--r-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    min-height: 44px;
    transition: background 150ms;
}
.ss-review-submit-btn:hover:not(:disabled) { background: var(--ss-primary-dark); }
.ss-review-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Variant List (back-in-stock rows) ── */
.ss-vlist {
    background: var(--ss-bg-alt);
    border-radius: var(--r-md);
    padding: 18px;
    margin: 24px 0;
}
.ss-vlist-heading {
    font-family: var(--ss-serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--ss-ink);
    margin: 0 0 14px;
    display: inline-flex; align-items: center; gap: 8px;
}
.ss-vlist-heading i { color: var(--ss-primary); font-size: 14px; }
.ss-vlist-rows { display: flex; flex-direction: column; gap: 8px; }
.ss-vlist-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    grid-template-areas:
        "img info action"
        "img price action";
    gap: 6px 12px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--ss-line);
    border-radius: var(--r-sm);
    padding: 10px 14px;
}
@media (min-width: 600px) {
    .ss-vlist-row {
        grid-template-columns: 60px 1fr auto auto;
        grid-template-areas: "img info price action";
        gap: 16px;
    }
}
.ss-vlist-img { grid-area: img; }
.ss-vlist-img img {
    width: 56px; height: 56px;
    object-fit: cover;
    border-radius: var(--r-xs);
    background: var(--ss-bg);
}
.ss-vlist-info { grid-area: info; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ss-vlist-name { font-size: 14px; font-weight: 500; color: var(--ss-ink); }
.ss-vlist-code { font-family: var(--ss-mono); font-size: 11px; color: var(--ss-muted); }
.ss-vlist-price { grid-area: price; display: flex; flex-direction: column; gap: 2px; }
.ss-vlist-price > span { font-family: var(--ss-serif); font-size: 16px; font-weight: 500; color: var(--ss-ink); }
.ss-vlist-price > span.is-promo { color: var(--ss-primary); }
.ss-vlist-price > small { font-family: var(--ss-mono); font-size: 11px; color: var(--ss-muted); }
.ss-vlist-action { grid-area: action; }
.ss-vlist-action .ss-btn { min-width: 110px; }

/* Small button variant (used in vlist) */
.ss-btn-sm { padding: 8px 14px; font-size: 12.5px; min-height: 36px; }

/* ── Wishlist Card wrapper (for animated removal in toggleWishlist JS) ── */
.ss-wishlist-card-wrap { display: block; }

/* ── Card Sm variant (carousel) ── */
.ss-card-sm { box-shadow: none; border: 1px solid var(--ss-line-soft); }
.ss-card-sm:hover { transform: none; box-shadow: var(--shadow-sm); }

/* ── Variant Select dropdown (when displayMode = 'select') ── */
.ss-pp-select {
    width: 100%;
    border: 1px solid var(--ss-line);
    background: #fff;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    font: inherit;
    font-size: 14px;
    min-height: 48px;
    color: var(--ss-ink);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%231A1815' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}
.ss-pp-select:focus { outline: none; border-color: var(--ss-ink); }

/* ════════════════════════════════════════════════════════════
   SS_REVO PORTED TEMPLATES - Cart, Checkout, User Pages
   ════════════════════════════════════════════════════════════ */

/* ── Cart Layout ── */
.ss-cart-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}
@media (min-width: 1100px) {
    .ss-cart-layout {
        grid-template-columns: 1fr 340px;
    }
    .ss-cart-aside {
        position: sticky;
        top: 110px;
    }
}

/* Cart items table */
.ss-cart-items { display: flex; flex-direction: column; }
.ss-cart-items-head {
    display: none;
    grid-template-columns: 90px 1fr 140px 120px 44px;
    gap: 12px;
    padding: 10px 22px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ss-muted);
    border-bottom: 1px solid var(--ss-line);
}
@media (min-width: 768px) { .ss-cart-items-head { display: grid; } }

.ss-cart-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-areas:
        "img info"
        "img qty"
        "img total";
    gap: 6px 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--ss-line);
    align-items: start;
    position: relative;
}
.ss-cart-row:last-child { border-bottom: 0; }
@media (min-width: 768px) {
    .ss-cart-row {
        grid-template-columns: 90px 1fr 140px 120px 44px;
        grid-template-areas: "img info qty total remove";
        align-items: center;
        gap: 12px;
    }
}
.ss-cart-img { grid-area: img; position: relative; }
.ss-cart-img a { display: block; border-radius: var(--r-sm); overflow: hidden; background: var(--ss-bg); }
.ss-cart-img img { width: 80px; height: 80px; object-fit: cover; display: block; }
@media (min-width: 768px) { .ss-cart-img img { width: 90px; height: 90px; } }
.ss-cart-info { grid-area: info; min-width: 0; }
.ss-cart-info a {
    font-weight: 500;
    font-size: 14px;
    color: var(--ss-ink);
    text-decoration: none;
    line-height: 1.35;
    display: block;
}
.ss-cart-info a:hover { color: var(--ss-primary); }
.ss-cart-variant { font-size: 12px; color: var(--ss-muted); margin-top: 4px; }
.ss-cart-unit { font-size: 12px; color: var(--ss-muted); margin-top: 2px; }
.ss-cart-qty   { grid-area: qty; display: flex; align-items: center; }
.ss-cart-total { grid-area: total; font-weight: 600; font-size: 15px; color: var(--ss-ink); }
.ss-cart-remove { grid-area: remove; }
.ss-cart-remove-btn {
    background: transparent;
    border: 0;
    color: var(--ss-muted);
    cursor: pointer;
    width: 44px; height: 44px; /* WCAG min touch target */
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background 150ms, color 150ms;
    font-size: 14px;
}
.ss-cart-remove-btn:hover { background: rgba(184, 58, 42, 0.08); color: var(--ss-danger); }
/* Mobile remove button - absolute top-right */
@media (max-width: 767px) {
    .ss-cart-remove { position: absolute; top: 14px; right: 14px; grid-area: unset; }
}

/* Qty stepper */
.ss-latte-qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--ss-line);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: #fff;
}
.ss-latte-qty button {
    background: var(--ss-bg-alt);
    border: 0;
    width: 36px;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    color: var(--ss-ink-soft);
    font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    transition: background 150ms, color 150ms;
}
.ss-latte-qty button:hover:not(:disabled) { background: var(--ss-line); color: var(--ss-ink); }
.ss-latte-qty button:disabled { opacity: 0.35; cursor: not-allowed; }
.ss-latte-qty input {
    width: 48px;
    border: 0;
    border-left: 1px solid var(--ss-line);
    border-right: 1px solid var(--ss-line);
    text-align: center;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--ss-ink);
    background: #fff;
    min-height: 44px;
}
.ss-latte-qty input:focus { outline: none; }
/* Hide spinner arrows */
.ss-latte-qty input[type=number]::-webkit-inner-spin-button,
.ss-latte-qty input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; }
.ss-latte-qty input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* Cart summary aside */
.ss-cart-summary { display: flex; flex-direction: column; gap: 0; }
.ss-cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    font-size: 14px;
    color: var(--ss-ink-soft);
    border-bottom: 1px solid var(--ss-line);
}
.ss-cart-summary-row:last-child { border-bottom: 0; }
.ss-cart-summary-row.is-total {
    font-weight: 700;
    font-size: 17px;
    color: var(--ss-ink);
}
.ss-cart-summary-row.is-total .ss-cart-summary-val {
    font-family: var(--ss-serif);
    font-size: 22px;
}
.ss-cart-summary-action {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--ss-line);
}
.ss-cart-wishlist-btn {
    position: absolute;
    top: 4px; right: 4px;
    width: 28px; height: 28px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--ss-line);
    border-radius: 50%;
    cursor: pointer;
    color: var(--ss-ink-soft);
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    z-index: 2;
    transition: color 150ms, background 150ms, transform 150ms;
}
.ss-cart-wishlist-btn:hover { color: var(--ss-primary); transform: scale(1.08); }
.ss-cart-wishlist-btn.is-active i { font-weight: 900; color: var(--ss-primary); }

/* ── Checkout Layout ── */
.ss-checkout-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}
@media (min-width: 1100px) {
    .ss-checkout-layout {
        grid-template-columns: 1fr 400px;
    }
    .ss-checkout-aside {
        position: sticky;
        top: 110px;
    }
}

/* Form elements */
.ss-form-field { display: flex; flex-direction: column; gap: 5px; }
.ss-form-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ss-ink-soft);
}
.ss-form-req { color: var(--ss-danger); }
.ss-form-input,
.ss-form-select,
.ss-form-textarea {
    width: 100%;
    border: 1px solid var(--ss-line);
    background: #fff;
    padding: 11px 14px;
    border-radius: var(--r-sm);
    font: inherit;
    /* 16px on mobile prevents iOS zoom-on-focus; downsize on tablet+ */
    font-size: 16px;
    color: var(--ss-ink);
    min-height: 44px;
    transition: border-color 150ms, box-shadow 150ms;
}
@media (min-width: 768px) {
    .ss-form-input,
    .ss-form-select,
    .ss-form-textarea { font-size: 14px; }
}
.ss-form-input:focus,
.ss-form-select:focus,
.ss-form-textarea:focus { outline: none; border-color: var(--ss-ink); box-shadow: 0 0 0 3px rgba(var(--ss-primary-rgb), 0.08); }
.ss-form-input.is-error,
.ss-form-select.is-error { border-color: var(--ss-danger); }
.ss-form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%231A1815' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}
.ss-form-textarea { min-height: 88px; resize: vertical; }
.ss-form-error { font-size: 12px; color: var(--ss-danger); margin-top: 2px; }
.ss-form-hint  { font-size: 11.5px; color: var(--ss-muted); margin-top: 2px; }

/* Form grids */
.ss-form-grid--2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 600px) {
    .ss-form-grid--2 { grid-template-columns: 1fr 1fr; }
}
.ss-form-grid--3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 600px) {
    .ss-form-grid--3 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
    .ss-form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
}
.ss-form-full { grid-column: 1 / -1; }
.ss-form-row  { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 600px) { .ss-form-row { flex-direction: row; align-items: flex-end; } }

/* Checkout items (aside summary list) */
.ss-checkout-items { display: flex; flex-direction: column; }
.ss-checkout-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 14px 22px;
    border-bottom: 1px solid var(--ss-line);
}
.ss-checkout-item:last-child { border-bottom: 0; }
.ss-checkout-item-img {
    border-radius: var(--r-xs);
    overflow: hidden;
    background: var(--ss-bg);
    width: 64px; height: 64px;
    flex-shrink: 0;
}
.ss-checkout-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-checkout-item-info { min-width: 0; }
.ss-checkout-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--ss-ink);
    line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-checkout-item-meta { font-size: 11px; color: var(--ss-muted); margin-top: 2px; }
.ss-checkout-item-price {
    font-family: var(--ss-serif);
    font-size: 15px;
    font-weight: 500;
    color: var(--ss-ink);
    white-space: nowrap;
}

/* Checkout totals */
.ss-checkout-totals { display: flex; flex-direction: column; }
.ss-checkout-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    font-size: 13.5px;
    color: var(--ss-ink-soft);
    border-bottom: 1px solid var(--ss-line);
}
.ss-checkout-totals-row:last-child { border-bottom: 0; }
.ss-checkout-grand-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    font-weight: 700;
    font-size: 15px;
    color: var(--ss-ink);
    border-top: 2px solid var(--ss-line);
}
.ss-checkout-grand-total-val {
    font-family: var(--ss-serif);
    font-size: 22px;
    color: var(--ss-ink);
}

/* ── Autocomplete dropdown (city/office search) ── */
.ss-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-top: 0;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    box-shadow: var(--shadow-md);
    z-index: 200;
    max-height: 240px;
    overflow-y: auto;
}
.ss-autocomplete-item {
    padding: 10px 14px;
    font-size: 13.5px;
    color: var(--ss-ink);
    cursor: pointer;
    border-bottom: 1px solid var(--ss-line);
    transition: background 100ms;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.ss-autocomplete-item:last-child { border-bottom: 0; }
.ss-autocomplete-item:hover,
.ss-autocomplete-item.is-active,
.ss-autocomplete-item.active { background: var(--ss-primary-light); color: var(--ss-primary-dark); }
.ss-autocomplete-empty {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--ss-muted);
    font-style: italic;
}

/* ── Combobox dropdown (shared <x-combobox-select> component) ── */
.ss-combobox-dropdown {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-top: 0;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    box-shadow: var(--shadow-md);
    z-index: 1050;
    margin-top: -1px;
}
.ss-combobox-search {
    position: relative;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ss-line);
    background: var(--ss-bg-alt);
}
.ss-combobox-search input {
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: var(--r-sm);
    padding: 8px 12px 8px 32px;
    width: 100%;
    font-size: 13.5px;
    color: var(--ss-ink);
    transition: border-color 150ms;
}
.ss-combobox-search input:focus {
    outline: none;
    border-color: var(--ss-primary);
    box-shadow: 0 0 0 3px var(--ss-primary-light);
}
.ss-combobox-search-icon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ss-muted);
    font-size: 12px;
    pointer-events: none;
    z-index: 2;
}
.ss-combobox-list {
    max-height: 280px;
    overflow-y: auto;
}

/* ════════════════════════════════════════════════════════════
   User profile pages (/profile, /profile/orders, /addresses,
   /wishlist, /reviews, /recommendations, /profile/orders/{id})
   Mobile-first. Sidebar collapses to horizontal scroll <768px.
   ──────────────────────────────────────────────────────────── */

.ss-profile-shell { padding-top: 24px; }
@media (min-width: 768px)  { .ss-profile-shell { padding-top: 32px; } }

.ss-profile-leaf-head { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--ss-line); }
@media (min-width: 768px) { .ss-profile-leaf-head { margin-bottom: 32px; padding-bottom: 24px; } }
.ss-profile-leaf-head h1 { font-size: 28px; }
@media (min-width: 768px)  { .ss-profile-leaf-head h1 { font-size: 36px; } }
@media (min-width: 1100px) { .ss-profile-leaf-head h1 { font-size: 44px; } }

/* ── Layout shell (sidebar + content) ── */
.ss-profile-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}
@media (min-width: 768px)  { .ss-profile-layout { grid-template-columns: 240px 1fr; gap: 32px; } }
@media (min-width: 1100px) { .ss-profile-layout { gap: 40px; } }

.ss-profile-content { min-width: 0; }

/* ── Sidebar ── */
.ss-profile-sidebar {
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: var(--r-md);
    overflow: hidden;
    min-width: 0;
}
@media (min-width: 768px) {
    .ss-profile-sidebar { position: sticky; top: 110px; }
}

.ss-profile-sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px;
    border-bottom: 1px solid var(--ss-line);
    background: var(--ss-bg-alt);
}
.ss-profile-sidebar-avatar {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--ss-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--ss-serif);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.04em;
}
.ss-profile-sidebar-user-info { min-width: 0; flex: 1; }
.ss-profile-sidebar-user-name {
    font-family: var(--ss-serif);
    font-size: 15px;
    font-weight: 500;
    color: var(--ss-ink);
    line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-profile-sidebar-user-email {
    font-size: 12px;
    color: var(--ss-muted);
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Sidebar nav: vertical stack on all viewports (1:1 with ss_default UX) */
.ss-profile-sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 6px;
    gap: 2px;
}
@media (min-width: 768px) {
    .ss-profile-sidebar-nav { padding: 8px; }
}

.ss-profile-sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ss-ink-soft);
    text-decoration: none;
    border-radius: var(--r-sm);
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    min-height: 44px;
    width: 100%;
    transition: background 150ms, color 150ms;
}
.ss-profile-sidebar-link i { font-size: 13px; width: 16px; text-align: center; color: var(--ss-muted); }
.ss-profile-sidebar-link:hover {
    background: var(--ss-bg-alt);
    color: var(--ss-ink);
    text-decoration: none;
}
.ss-profile-sidebar-link.is-active {
    background: var(--ss-primary);
    color: #fff;
}
.ss-profile-sidebar-link.is-active i { color: #fff; }
@media (min-width: 768px) {
    .ss-profile-sidebar-link { width: 100%; }
}

.ss-profile-sidebar-link--logout { color: var(--ss-danger); width: 100%; text-align: left; }
.ss-profile-sidebar-link--logout i { color: var(--ss-danger); }
.ss-profile-sidebar-link--logout:hover {
    background: rgba(184, 58, 42, 0.06);
    color: var(--ss-danger);
}
.ss-profile-sidebar-logout-form { margin: 0; flex-shrink: 0; }
@media (min-width: 768px) {
    .ss-profile-sidebar-logout-form { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ss-line); }
}

/* ── Section card (one per topic on a page) ── */
.ss-profile-section {
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: var(--r-md);
    padding: 22px 20px;
    margin-bottom: 20px;
}
@media (min-width: 768px) { .ss-profile-section { padding: 28px; } }
.ss-profile-section--danger { border-color: rgba(184, 58, 42, 0.3); }

.ss-profile-section-head {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(74, 70, 64, 0.16) !important;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.ss-profile-section-head h2 {
    font-family: var(--ss-serif);
    font-size: 20px;
    font-weight: 500;
    color: var(--ss-ink);
    margin: 0;
    letter-spacing: -0.005em;
}
@media (min-width: 768px) { .ss-profile-section-head h2 { font-size: 22px; } }
.ss-profile-section-head--danger { color: var(--ss-danger); }
.ss-profile-section-desc { color: var(--ss-muted); font-size: 14px; margin: 0 0 16px; }
.ss-profile-section-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ss-profile-section-actions--center { justify-content: center; }

.ss-profile-mb { margin-bottom: 20px; }
.ss-profile-mt { margin-top: 16px; }

.ss-profile-group-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ss-profile-group-note { color: var(--ss-success); font-weight: 600; font-size: 13px; }

.ss-form-input.is-readonly { background: var(--ss-bg-alt); cursor: not-allowed; opacity: 0.75; }

/* Newsletter toggle */
.ss-profile-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.ss-profile-toggle-label { font-size: 14px; color: var(--ss-ink-soft); flex: 1; min-width: 200px; }
.ss-profile-toggle-form { margin: 0; }
.ss-profile-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; min-height: 44px; }
.ss-profile-switch input { position: absolute; width: 0; height: 0; opacity: 0; }
.ss-profile-switch-track {
    position: relative; display: inline-block;
    width: 44px; height: 24px;
    background: var(--ss-line);
    border-radius: 24px;
    transition: background 200ms;
    flex-shrink: 0;
}
.ss-profile-switch-track::after {
    content: ''; position: absolute;
    top: 3px; left: 3px;
    width: 18px; height: 18px;
    background: #fff; border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    transition: transform 200ms;
}
.ss-profile-switch input:checked + .ss-profile-switch-track { background: var(--ss-primary); }
.ss-profile-switch input:checked + .ss-profile-switch-track::after { transform: translateX(20px); }
.ss-profile-switch input:focus-visible + .ss-profile-switch-track { box-shadow: 0 0 0 3px rgba(var(--ss-primary-rgb), 0.18); }
.ss-profile-switch-text { font-size: 13.5px; color: var(--ss-ink); }

/* Inline check row for modal forms */
.ss-profile-check-row {
    display: flex; align-items: flex-start; gap: 10px;
    cursor: pointer; font-size: 13.5px; color: var(--ss-ink);
    line-height: 1.4; min-height: 44px; padding: 6px 0;
}
.ss-profile-check-row input[type=checkbox] {
    margin-top: 2px; flex-shrink: 0;
    accent-color: var(--ss-primary);
    width: 18px; height: 18px;
}

/* Alerts inside profile sections */
.ss-profile-alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: var(--r-sm);
    font-size: 13.5px; line-height: 1.5;
    margin-bottom: 16px;
}
.ss-profile-alert i { margin-top: 2px; flex-shrink: 0; }
.ss-profile-alert--warning { background: rgba(199, 125, 46, 0.08); color: #7a5100; border-left: 3px solid var(--ss-warning); }
.ss-profile-alert--danger  { background: rgba(184, 58, 42, 0.07); color: var(--ss-danger); border-left: 3px solid var(--ss-danger); }
.ss-profile-alert-list { margin: 6px 0 0; padding-left: 18px; }

/* Stock-block per-item warning (v2.5.0) - amber, sits under qty stepper */
.ss-cart-stock-blocked {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 6px;
    font-size: 12.5px; line-height: 1.35;
    color: #7a5100;
}
.ss-cart-stock-blocked i { color: var(--ss-warning); }
.ss-latte-qty.is-stock-blocked input { border-color: var(--ss-warning); }

/* Modal danger header */
.ss-profile-modal-header--danger { background: rgba(184, 58, 42, 0.06); }
.ss-profile-modal-header--danger .modal-title { color: var(--ss-danger); display: inline-flex; align-items: center; gap: 8px; }

/* Danger button variants */
.ss-btn-danger-outline { border-color: var(--ss-danger) !important; color: var(--ss-danger) !important; }
.ss-btn-danger-outline:hover { background: var(--ss-danger) !important; color: #fff !important; }
.ss-btn-danger-solid { background: var(--ss-danger) !important; border-color: var(--ss-danger) !important; }
.ss-btn-danger-solid:hover { background: #9b3022 !important; }
.ss-btn-danger-ghost { color: var(--ss-danger) !important; }
.ss-btn-danger-ghost:hover { background: rgba(184, 58, 42, 0.06) !important; }

/* Compact button sizes */
.ss-btn-sm { padding: 6px 12px; font-size: 12.5px; min-height: 36px; }
.ss-btn-icon { padding: 8px 12px; min-width: 40px; min-height: 40px; }

.ss-pager-wrap { margin-top: 32px; }

/* ── Status badges ── */
.ss-status-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    white-space: nowrap;
}
.ss-status-badge--lg { font-size: 12px; padding: 6px 14px; }
.ss-status-badge--new        { background: rgba(37, 99, 235, 0.10);  color: #1e40af; }
.ss-status-badge--processing { background: rgba(199, 125, 46, 0.12); color: #7a5100; }
.ss-status-badge--prepared   { background: rgba(234, 88, 12, 0.10);  color: #9a3412; }
.ss-status-badge--shipped    { background: rgba(47, 107, 71, 0.10);  color: var(--ss-success); }
.ss-status-badge--cancelled  { background: rgba(184, 58, 42, 0.10);  color: var(--ss-danger); }
.ss-status-badge--muted      { background: var(--ss-bg-alt);         color: var(--ss-muted); }

/* ── Order card list (orders index) ── */
.ss-order-card-list { display: flex; flex-direction: column; gap: 14px; }
.ss-order-card {
    display: block;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: var(--r-md);
    padding: 18px 20px;
    text-decoration: none;
    color: inherit;
    transition: border-color 180ms, box-shadow 180ms, transform 180ms;
}
.ss-order-card:hover {
    border-color: var(--ss-primary);
    box-shadow: var(--shadow-sm, 0 2px 6px rgba(40, 30, 20, 0.06));
    text-decoration: none; color: inherit;
    transform: translateY(-1px);
}
.ss-order-card-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.ss-order-card-id { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ss-order-card-bolt { color: var(--ss-warning); font-size: 14px; }
.ss-order-card-num {
    font-family: var(--ss-serif);
    font-size: 18px; font-weight: 500;
    color: var(--ss-ink); letter-spacing: -0.005em;
}
.ss-order-card-meta {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    color: var(--ss-muted); font-size: 12.5px;
    font-family: var(--ss-mono); letter-spacing: 0.02em;
    margin-bottom: 12px;
}
.ss-order-card-date i { font-size: 11px; margin-right: 4px; }
.ss-order-card-dot { opacity: 0.5; padding: 0 4px; }
.ss-order-card-pay-tag { font-size: 10px !important; font-family: var(--ss-sans); letter-spacing: 0.04em; }
.ss-order-card-bottom {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding-top: 12px;
    border-top: 1px solid var(--ss-line-soft, var(--ss-line));
    flex-wrap: wrap;
}
.ss-order-card-total {
    font-family: var(--ss-serif);
    font-size: 20px; font-weight: 500;
    color: var(--ss-ink);
}
.ss-order-card-courier { display: inline-flex; align-items: center; }

/* ── Address cards ── */
.ss-address-card {
    display: flex; align-items: flex-start; gap: 16px;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: var(--r-md);
    padding: 20px; margin-bottom: 14px;
    flex-wrap: wrap;
    transition: border-color 150ms, box-shadow 150ms;
}
.ss-address-card:hover { border-color: var(--ss-primary); }
.ss-address-card.is-default {
    border-color: var(--ss-primary);
    background: linear-gradient(0deg, rgba(var(--ss-primary-rgb), 0.04), rgba(var(--ss-primary-rgb), 0.04)), var(--ss-surface);
}
.ss-address-card-body { flex: 1; min-width: 220px; }
.ss-address-card-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px; flex-wrap: wrap;
}
.ss-address-card-name {
    font-family: var(--ss-serif);
    font-size: 17px; font-weight: 500;
    color: var(--ss-ink); margin: 0;
    letter-spacing: -0.005em;
}
.ss-address-card-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ss-address-card-line {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 13.5px; color: var(--ss-ink-soft);
    line-height: 1.55; margin-top: 4px;
}
.ss-address-card-line i { font-size: 12px; color: var(--ss-muted); margin-top: 4px; flex-shrink: 0; width: 14px; text-align: center; }
.ss-address-card-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: flex-start; }

/* ── Empty states ── */
.ss-empty-state {
    text-align: center;
    padding: 48px 24px;
    background: var(--ss-surface);
    border: 1px dashed var(--ss-line);
    border-radius: var(--r-md);
}
@media (min-width: 768px) { .ss-empty-state { padding: 64px 32px; } }
.ss-empty-state-icon {
    width: 72px; height: 72px;
    margin: 0 auto 20px;
    background: var(--ss-bg-alt);
    color: var(--ss-muted);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 30px;
}
.ss-empty-state-icon--accent { background: var(--ss-primary-light); color: var(--ss-primary); }
.ss-empty-state h3 {
    font-family: var(--ss-serif);
    font-size: 22px; font-weight: 500;
    color: var(--ss-ink);
    margin: 0 0 8px;
}
.ss-empty-state p {
    color: var(--ss-muted);
    margin: 0 auto 20px;
    font-size: 14px;
    max-width: 420px;
}

/* ── Order detail: hero summary card (editorial accent) ── */
.ss-profile-section.ss-order-summary {
    position: relative;
    background:
        linear-gradient(180deg, var(--ss-bg-alt) 0%, var(--ss-surface) 100%),
        radial-gradient(circle at 100% 0%, var(--ss-primary-light) 0%, transparent 60%);
    background-blend-mode: multiply;
    border: 1px solid var(--ss-line);
    overflow: hidden;
}
.ss-profile-section.ss-order-summary::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--ss-primary), var(--ss-primary-dark));
}
.ss-order-summary-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    padding-left: 6px;
}
.ss-order-summary-row > div { min-width: 0; }
.ss-order-summary-row .ss-form-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ss-muted);
    margin: 0 0 10px;
    font-weight: 500;
}
.ss-order-summary-total {
    text-align: right;
    padding-left: 24px;
    border-left: 1px solid var(--ss-line);
    align-self: stretch;
    display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 599px) {
    .ss-order-summary-total { border-left: 0; padding-left: 0; padding-top: 16px; border-top: 1px solid var(--ss-line); width: 100%; text-align: left; }
    .ss-order-summary-total .ss-form-label { text-align: left; }
}
.ss-order-summary-total-val {
    font-family: var(--ss-serif);
    font-size: 30px;
    font-weight: 500;
    color: var(--ss-primary);
    letter-spacing: -0.015em;
    line-height: 1;
    font-feature-settings: "tnum";
}
@media (min-width: 768px) { .ss-order-summary-total-val { font-size: 38px; } }

.ss-order-twocol {
    display: grid; grid-template-columns: 1fr;
    gap: 20px; margin-bottom: 20px;
    align-items: stretch;
}
@media (min-width: 768px) { .ss-order-twocol { grid-template-columns: 1fr 1fr; } }
.ss-order-twocol > .ss-profile-section { height: 100%; margin-bottom: 0; display: flex; flex-direction: column; }

.ss-info-list { margin: 0; }
.ss-info-list-row {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ss-line-soft, var(--ss-line));
    font-size: 13.5px;
}
.ss-info-list-row:last-child { border-bottom: 0; }
.ss-info-list-row dt {
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--ss-muted);
    font-weight: 600; margin: 0; flex-shrink: 0;
}
.ss-info-list-row dd { margin: 0; color: var(--ss-ink); text-align: right; min-width: 0; word-break: break-word; }
.ss-info-list-row dd a { color: var(--ss-primary); }

.ss-info-block { font-size: 14px; color: var(--ss-ink-soft); line-height: 1.6; }
.ss-info-block p { margin: 0 0 4px; }
.ss-info-block-name { font-weight: 600; color: var(--ss-ink); font-size: 15px; margin-bottom: 6px !important; }
.ss-info-block i { color: var(--ss-muted); margin-right: 4px; width: 14px; text-align: center; }

.ss-link { color: var(--ss-primary); font-weight: 500; text-decoration: none; }
.ss-link:hover { text-decoration: underline; }
.ss-link--strong { font-weight: 600; }
.ss-italic { font-style: italic; }

/* Order pay action mini card */
.ss-pay-action {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 10px 14px;
    border-radius: var(--r-sm); margin-top: 10px;
    font-size: 13px; flex-wrap: wrap;
}
.ss-pay-action img { border-radius: 4px; flex-shrink: 0; }
.ss-pay-action-info { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ss-pay-action-btn { white-space: nowrap; }
.ss-pay-action--dark    { background: #1a1f36; color: #fff; border: 1px solid #1a1f36; }
.ss-pay-action--dark .ss-pay-action-btn { color: #fff !important; border-color: rgba(255,255,255,0.3); }
.ss-pay-action--info    { background: rgba(var(--ss-primary-rgb), 0.06); color: var(--ss-primary-dark); border: 1px solid rgba(var(--ss-primary-rgb), 0.18); }
.ss-pay-action--success { background: rgba(47, 107, 71, 0.08); color: var(--ss-success); border: 1px solid rgba(47, 107, 71, 0.2); }
.ss-pay-action--warning { background: rgba(199, 125, 46, 0.08); color: #7a5100; border: 1px solid rgba(199, 125, 46, 0.22); }
.ss-pay-action--danger  { background: rgba(184, 58, 42, 0.07); color: var(--ss-danger); border: 1px solid rgba(184, 58, 42, 0.22); }

/* ── Tracking timeline ── */
.ss-tracking-list {
    list-style: none; margin: 0;
    padding: 0 0 0 20px; position: relative;
}
.ss-tracking-list::before {
    content: ''; position: absolute;
    left: 4px; top: 8px; bottom: 8px;
    width: 2px; background: var(--ss-line);
}
.ss-tracking-list-item {
    position: relative; padding: 0 0 16px 18px;
    font-size: 13.5px;
}
.ss-tracking-list-item:last-child { padding-bottom: 0; }
.ss-tracking-list-dot {
    position: absolute; left: -20px; top: 5px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--ss-line);
    border: 2px solid var(--ss-surface);
}
.ss-tracking-list-item.is-current .ss-tracking-list-dot {
    background: var(--ss-primary);
    width: 12px; height: 12px;
    left: -21px; top: 4px;
    box-shadow: 0 0 0 4px rgba(var(--ss-primary-rgb), 0.12);
}
.ss-tracking-list-content { display: flex; flex-direction: column; gap: 2px; }
.ss-tracking-list-label { color: var(--ss-ink-soft); }
.ss-tracking-list-item.is-current .ss-tracking-list-label { color: var(--ss-ink); font-weight: 600; }
.ss-tracking-list-time { font-family: var(--ss-mono); font-size: 11.5px; color: var(--ss-muted); letter-spacing: 0.02em; }

/* ── Order items table ── */
.ss-order-items-wrap { overflow-x: auto; margin: 0 -20px 20px; }
@media (min-width: 768px) { .ss-order-items-wrap { margin: 0 -28px 20px; } }
.ss-order-items {
    width: 100%; border-collapse: collapse; font-size: 13.5px;
}
.ss-order-items thead { background: var(--ss-bg-alt); }
.ss-order-items th {
    padding: 10px 14px; text-align: left;
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--ss-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--ss-line);
}
.ss-order-items td {
    padding: 14px;
    border-bottom: 1px solid var(--ss-line-soft, var(--ss-line));
    color: var(--ss-ink); vertical-align: middle;
}
.ss-order-items tbody tr:last-child td { border-bottom: 0; }
.ss-order-item-product { display: flex; align-items: center; gap: 12px; }
.ss-order-item-thumb {
    width: 60px; height: 60px;
    object-fit: cover;
    border-radius: var(--r-sm);
    background: var(--ss-bg-alt);
    flex-shrink: 0;
}
.ss-order-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-order-item-title { font-weight: 600; color: var(--ss-ink); text-decoration: none; }
.ss-order-item-title:hover { color: var(--ss-primary); }
.ss-order-item-sub { font-size: 12px; color: var(--ss-muted); }
.ss-order-item-sub--mono { font-family: var(--ss-mono); letter-spacing: 0.02em; }
.ss-order-item-price-old { display: inline; text-decoration: line-through; color: var(--ss-muted); margin-right: 4px; font-size: 12px; }
.ss-order-item-line-total { font-weight: 600; color: var(--ss-ink); white-space: nowrap; }

@media (max-width: 599px) {
    .ss-order-items thead { display: none; }
    .ss-order-items tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--ss-line); }
    .ss-order-items tr:last-child { border-bottom: 0; }
    .ss-order-items td { display: flex; justify-content: space-between; padding: 4px 0; border: 0; gap: 12px; }
    .ss-order-items td::before {
        content: attr(data-label);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--ss-muted);
        font-weight: 600;
        flex-shrink: 0;
    }
    .ss-order-items td:has(.ss-order-item-product) { display: block; padding-bottom: 8px; }
    .ss-order-items td:has(.ss-order-item-product)::before { display: none; }
}

/* Order totals */
.ss-order-totals {
    display: flex; flex-direction: column; gap: 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--ss-line);
    max-width: 420px; margin-left: auto;
}
.ss-order-totals-row {
    display: flex; justify-content: space-between;
    padding: 8px 0;
    font-size: 14px; color: var(--ss-ink-soft);
}
.ss-order-totals-row strong { color: var(--ss-ink); font-weight: 600; }
.ss-order-totals-row--discount { color: var(--ss-success); }
.ss-order-totals-row--grand {
    border-top: 1px solid var(--ss-line);
    padding-top: 14px; margin-top: 6px;
    font-family: var(--ss-serif);
    font-size: 18px; font-weight: 500;
    color: var(--ss-ink);
}
.ss-order-totals-row--grand span:last-child {
    font-size: 22px; color: var(--ss-primary);
}

/* ── Profile callouts ── */
.ss-profile-callout {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    border-radius: var(--r-sm);
    background: var(--ss-bg-alt);
    border-left: 4px solid var(--ss-primary);
    margin-top: 16px;
    font-size: 14px; color: var(--ss-ink);
}
.ss-profile-callout i { color: var(--ss-primary); font-size: 16px; margin-top: 2px; flex-shrink: 0; }
.ss-profile-callout--warning {
    background: rgba(199, 125, 46, 0.06);
    border-left-color: var(--ss-warning);
}
.ss-profile-callout--warning i { color: var(--ss-warning); }

/* ── Reviews list ── */
.ss-review-list { display: flex; flex-direction: column; gap: 16px; }
.ss-review-card {
    display: flex; gap: 16px;
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: var(--r-md);
    padding: 20px;
    align-items: flex-start;
    transition: border-color 150ms;
}
.ss-review-card:hover { border-color: var(--ss-primary); }
@media (max-width: 599px) {
    .ss-review-card { flex-direction: column; padding: 16px; }
}
.ss-review-card-thumb-link { display: block; flex-shrink: 0; }
.ss-review-card-thumb {
    width: 72px; height: 72px;
    object-fit: cover;
    border-radius: var(--r-sm);
    background: var(--ss-bg-alt);
    display: block;
}
.ss-review-card-thumb-placeholder {
    width: 72px; height: 72px;
    border-radius: var(--r-sm);
    background: var(--ss-bg-alt);
    display: flex; align-items: center; justify-content: center;
    color: var(--ss-muted);
    font-size: 22px;
    flex-shrink: 0;
}
.ss-review-card-body { flex: 1; min-width: 0; }
.ss-review-card-head {
    display: flex; justify-content: space-between;
    align-items: flex-start; gap: 12px;
    flex-wrap: wrap; margin-bottom: 8px;
}
.ss-review-card-product { min-width: 0; }
.ss-review-card-product-link {
    font-family: var(--ss-serif);
    font-size: 16px; font-weight: 500;
    color: var(--ss-ink);
    text-decoration: none;
    letter-spacing: -0.005em;
    transition: color 150ms;
}
.ss-review-card-product-link:hover { color: var(--ss-primary); }
.ss-review-card-product-link.is-deleted { color: var(--ss-muted); font-style: italic; cursor: default; }
.ss-review-card-stars { margin-top: 4px; color: var(--ss-warning); font-size: 13px; }
.ss-review-card-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.ss-review-card-date { font-size: 11.5px; font-family: var(--ss-mono); letter-spacing: 0.02em; color: var(--ss-muted); }
.ss-review-card-title {
    font-family: var(--ss-serif);
    font-size: 15px; font-weight: 500;
    margin: 8px 0 4px;
    color: var(--ss-ink);
}
.ss-review-card-content { font-size: 13.5px; color: var(--ss-ink-soft); line-height: 1.55; margin: 0 0 12px; }
.ss-review-card-actions {
    display: flex; gap: 8px; justify-content: flex-end;
    flex-wrap: wrap; padding-top: 10px;
    border-top: 1px solid var(--ss-line-soft, var(--ss-line));
}

/* ════════════════════════════════════════════════════════════
   Cart + Checkout pages (rebuilt with ss_latte profile polish)
   ──────────────────────────────────────────────────────────── */

/* ── Cart additions ── */
.ss-cart-items-section .ss-profile-section-head,
.ss-cart-summary-section .ss-profile-section-head { margin-bottom: 0; padding-bottom: 14px; }
.ss-cart-items-section { padding: 22px 0 0 !important; }
@media (min-width: 768px) { .ss-cart-items-section { padding: 28px 0 0 !important; } }
.ss-cart-items-section .ss-profile-section-head { padding: 0 22px 14px; }
@media (min-width: 768px) { .ss-cart-items-section .ss-profile-section-head { padding: 0 28px 14px; } }
.ss-cart-row.is-unavailable { opacity: 0.55; }
.ss-cart-unavailable {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; color: var(--ss-danger);
    margin-top: 4px;
}

.ss-cart-summary-val-wrap { text-align: right; }
.ss-cart-summary-val {
    font-family: var(--ss-serif);
    font-size: 17px;
    font-weight: 500;
    color: var(--ss-ink);
}

.ss-cart-summary-section .ss-cart-summary,
.ss-cart-summary-section .ss-cart-summary-action { margin: 0 -22px; }
@media (min-width: 768px) {
    .ss-cart-summary-section .ss-cart-summary,
    .ss-cart-summary-section .ss-cart-summary-action { margin: 0 -28px; }
}
.ss-cart-perks {
    display: flex; flex-direction: column; gap: 8px;
    padding-top: 16px; margin-top: 4px;
    border-top: 1px solid var(--ss-line-soft, var(--ss-line));
}
.ss-cart-perk {
    display: flex; align-items: center; gap: 10px;
    font-size: 12.5px; color: var(--ss-ink-soft);
    line-height: 1.4;
}
.ss-cart-perk i { color: var(--ss-primary); font-size: 13px; width: 16px; text-align: center; flex-shrink: 0; }

/* ── Checkout step number eyebrow ── */
.ss-checkout-step {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--ss-primary-light);
    color: var(--ss-primary-dark);
    font-family: var(--ss-mono);
    font-size: 12px;
    font-weight: 600;
    margin-right: 6px;
    letter-spacing: 0;
    line-height: 1;
}

/* ── Checkout cards (delivery method, courier, invoice toggle) ── */
.ss-checkout-cards {
    display: grid;
    /* Всички карти на ЕДИН ред с равна ширина - броят им е 2 (куриери) или
       3 (офис/автомат/адрес); фиксираните 1fr 1fr чупеха третата на нов ред. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 10px;
}
@media (min-width: 600px) { .ss-checkout-cards { gap: 14px; } }
.ss-checkout-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    border: 1px solid var(--ss-line);
    border-radius: var(--r-md);
    background: var(--ss-surface);
    cursor: pointer;
    text-align: center;
    color: var(--ss-ink-soft);
    transition: border-color 150ms, color 150ms, background 150ms, transform 150ms;
    min-height: 88px;
    user-select: none;
    position: relative;
}
.ss-checkout-card:hover {
    border-color: var(--ss-primary);
    color: var(--ss-ink);
    transform: translateY(-1px);
}
.ss-checkout-card.is-active {
    border-color: var(--ss-primary);
    background: var(--ss-primary-light);
    color: var(--ss-primary-dark);
}
.ss-checkout-card-logo { display: flex; align-items: center; justify-content: center; min-height: 36px; }
.ss-checkout-card-icon {
    font-size: 20px;
    color: var(--ss-primary);
}
.ss-checkout-card-name {
    font-family: var(--ss-sans);
    font-size: 13.5px; font-weight: 600;
    color: var(--ss-ink);
}
.ss-checkout-card.is-active .ss-checkout-card-name { color: var(--ss-primary-dark); }
.ss-checkout-card-sub {
    font-size: 11.5px;
    color: var(--ss-muted);
    line-height: 1.35;
}
.ss-checkout-card .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* Courier hint (when "select courier first" is shown) */
.ss-checkout-courier-hint {
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 16px;
    color: var(--ss-muted);
    font-size: 14px;
    background: var(--ss-bg-alt);
    border: 1px dashed var(--ss-line);
    border-radius: var(--r-sm);
    margin-bottom: 12px;
}
.ss-checkout-courier-hint.is-error {
    color: var(--ss-danger);
    background: rgba(184, 58, 42, 0.05);
    border-color: rgba(184, 58, 42, 0.3);
    font-weight: 600;
    animation: ssRevoShake 380ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes ssRevoShake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
    40%, 60% { transform: translate3d(3px, 0, 0); }
}

/* Office info card (after office selection) */
.ss-checkout-office-info {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 14px;
    background: var(--ss-bg-alt);
    border: 1px solid var(--ss-line);
    border-radius: var(--r-sm);
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ss-ink-soft);
}
.ss-checkout-office-info > i {
    color: var(--ss-danger);
    margin-top: 2px;
    flex-shrink: 0;
}
.ss-checkout-office-info strong {
    display: block;
    color: var(--ss-ink);
    font-size: 14px;
    margin-bottom: 4px;
}
.ss-checkout-office-info i { color: var(--ss-muted); width: 14px; text-align: center; }

/* ── Payment method cards ── */
.ss-payment-list { display: flex; flex-direction: column; gap: 10px; }
.ss-payment-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--ss-line);
    border-radius: var(--r-md);
    background: var(--ss-surface);
    cursor: pointer;
    transition: border-color 150ms, background 150ms, transform 150ms;
    user-select: none;
    min-height: 64px;
}
.ss-payment-card:hover {
    border-color: var(--ss-primary);
    transform: translateY(-1px);
}
.ss-payment-card.is-active {
    border-color: var(--ss-primary);
    background: var(--ss-primary-light);
}
.ss-payment-card input[type=radio] {
    accent-color: var(--ss-primary);
    flex-shrink: 0;
    width: 18px; height: 18px;
    cursor: pointer;
}
.ss-payment-card-icon {
    width: 44px; height: 44px;
    border-radius: var(--r-sm);
    background: var(--ss-bg-alt);
    color: var(--ss-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    overflow: hidden;
}
.ss-payment-card-icon--img { padding: 0; background: #fff; border: 1px solid var(--ss-line); }
.ss-payment-card-icon--img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.ss-payment-card-body { flex: 1; min-width: 0; }
.ss-payment-card-title {
    font-family: var(--ss-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--ss-ink);
    line-height: 1.3;
}
.ss-payment-card.is-active .ss-payment-card-title { color: var(--ss-primary-dark); }
.ss-payment-card-desc {
    font-size: 12px;
    color: var(--ss-muted);
    margin-top: 3px;
    line-height: 1.4;
}

/* ── Bank details (callout-style box) ── */
.ss-bank-details {
    margin: 10px 0 0;
    padding: 14px 16px;
    background: var(--ss-bg-alt);
    border: 1px solid var(--ss-line);
    border-left: 3px solid var(--ss-primary);
    border-radius: var(--r-sm);
    font-size: 13px;
    line-height: 1.6;
    color: var(--ss-ink-soft);
}
.ss-bank-details p { margin: 0 0 4px; }
.ss-bank-details p:last-child { margin-bottom: 0; }
.ss-bank-details strong {
    color: var(--ss-ink);
    font-family: var(--ss-mono);
    letter-spacing: 0.02em;
}

/* ── Checkout summary (right aside) ── */
.ss-checkout-summary-section { padding: 22px 0 22px !important; }
@media (min-width: 768px) { .ss-checkout-summary-section { padding: 28px 0 28px !important; } }
/* Submit button: gap from card walls + bottom margin so it doesn't sit at section edge */
.ss-checkout-summary-section .ss-checkout-submit {
    width: calc(100% - 44px) !important;
    margin: 16px 22px 0 !important;
}
@media (min-width: 768px) {
    .ss-checkout-summary-section .ss-checkout-submit {
        width: calc(100% - 56px) !important;
        margin: 16px 28px 0 !important;
    }
}
.ss-checkout-summary-section .ss-profile-section-head { padding: 0 22px 14px; margin-bottom: 0; }
@media (min-width: 768px) { .ss-checkout-summary-section .ss-profile-section-head { padding: 0 28px 14px; } }
.ss-checkout-summary-section .ss-checkout-items,
.ss-checkout-summary-section .ss-checkout-voucher,
.ss-checkout-summary-section .ss-checkout-totals,
.ss-checkout-summary-section .ss-checkout-consent,
.ss-checkout-summary-section .ss-checkout-submit { padding-left: 22px; padding-right: 22px; }
@media (min-width: 768px) {
    .ss-checkout-summary-section .ss-checkout-items,
    .ss-checkout-summary-section .ss-checkout-voucher,
    .ss-checkout-summary-section .ss-checkout-totals,
    .ss-checkout-summary-section .ss-checkout-consent,
    .ss-checkout-summary-section .ss-checkout-submit { padding-left: 28px; padding-right: 28px; }
}

/* Checkout items (compact mini-rows in summary aside) */
.ss-checkout-items { display: flex; flex-direction: column; padding: 0; }
.ss-checkout-item {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--ss-line-soft, var(--ss-line));
}
.ss-checkout-item:last-child { border-bottom: 0; }
.ss-checkout-item-img {
    width: 48px; height: 48px;
    border-radius: var(--r-xs);
    object-fit: cover;
    background: var(--ss-bg);
    border: 1px solid var(--ss-line-soft, var(--ss-line));
}
.ss-checkout-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-checkout-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--ss-ink);
    line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ss-checkout-item-meta {
    font-size: 11px;
    color: var(--ss-muted);
    font-family: var(--ss-mono);
    letter-spacing: 0.02em;
}
.ss-checkout-item-price {
    font-family: var(--ss-serif);
    font-size: 14px;
    font-weight: 500;
    color: var(--ss-ink);
    white-space: nowrap;
}

/* Voucher input row */
.ss-checkout-voucher {
    display: flex; flex-direction: column; gap: 8px;
    padding-top: 16px; padding-bottom: 16px;
    margin-top: 8px;
    border-top: 1px solid var(--ss-line-soft, var(--ss-line));
}
.ss-checkout-voucher .ss-form-label { margin-bottom: 0; }
.ss-checkout-voucher-row {
    display: flex; gap: 8px; align-items: stretch;
}
.ss-checkout-voucher-row .ss-form-input { flex: 1; }
.ss-checkout-voucher-row .ss-btn { white-space: nowrap; }
.ss-checkout-voucher-msg {
    font-size: 12px;
    margin-top: 2px;
}
.ss-checkout-voucher-msg.is-success { color: var(--ss-success); }
.ss-checkout-voucher-msg.is-error   { color: var(--ss-danger); }

/* Checkout totals */
.ss-checkout-totals {
    display: flex; flex-direction: column;
    padding-top: 8px; padding-bottom: 8px;
    border-top: 1px solid var(--ss-line-soft, var(--ss-line));
}
.ss-checkout-totals-row {
    display: flex; justify-content: space-between;
    align-items: center; gap: 8px;
    padding: 8px 0;
    font-size: 13.5px;
    color: var(--ss-ink-soft);
    border-bottom: 0;
}
.ss-checkout-totals-row.is-discount { color: var(--ss-success); }
.ss-checkout-grand-total {
    display: flex; justify-content: space-between;
    align-items: baseline; gap: 8px;
    padding: 14px 0 4px;
    margin-top: 6px;
    border-top: 1px solid var(--ss-line);
    font-family: var(--ss-serif);
    font-size: 18px; font-weight: 500;
    color: var(--ss-ink);
}
.ss-checkout-grand-total-val {
    font-family: var(--ss-serif);
    font-size: 24px; font-weight: 500;
    color: var(--ss-primary);
    letter-spacing: -0.005em;
}
@media (min-width: 768px) { .ss-checkout-grand-total-val { font-size: 28px; } }

/* Consent check rows */
.ss-checkout-consent {
    display: flex; flex-direction: column; gap: 10px;
    padding-top: 16px; padding-bottom: 8px;
    border-top: 1px solid var(--ss-line-soft, var(--ss-line));
}
.ss-checkout-check-row {
    display: flex; align-items: flex-start; gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--ss-ink-soft);
    line-height: 1.5;
    min-height: 44px;
    padding: 4px 0;
}
.ss-checkout-checkbox {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--ss-primary);
    width: 18px; height: 18px;
    cursor: pointer;
}
.ss-checkout-check-row a {
    color: var(--ss-primary);
    border-bottom: 1px solid currentColor;
    text-decoration: none;
}
.ss-checkout-check-row a:hover { color: var(--ss-primary-dark); }

.ss-checkout-submit {
    margin-top: 6px;
    margin-bottom: 22px;
}
@media (min-width: 768px) { .ss-checkout-submit { margin-bottom: 28px; } }

/* ── Checkout summary stays sticky on desktop (already defined in .ss-checkout-aside) ── */

/* ════════════════════════════════════════════════════════════
   Checkout Success page
   ──────────────────────────────────────────────────────────── */
.ss-success-shell {
    max-width: 760px;
    margin-left: auto; margin-right: auto;
}

.ss-success-hero {
    text-align: center;
    padding: 36px 20px 28px;
    margin-bottom: 24px;
}
@media (min-width: 768px) { .ss-success-hero { padding: 48px 24px 36px; } }
.ss-success-icon {
    width: 80px; height: 80px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 34px;
    margin-bottom: 18px;
}
.ss-success-icon--success { background: rgba(47, 107, 71, 0.1);  color: var(--ss-success); }
.ss-success-icon--danger  { background: rgba(184, 58, 42, 0.1);  color: var(--ss-danger); }
.ss-success-icon--info    { background: var(--ss-primary-light); color: var(--ss-primary); }

.ss-success-title {
    font-family: var(--ss-serif);
    font-size: 28px; font-weight: 400;
    color: var(--ss-ink);
    margin: 0 0 14px;
    letter-spacing: -0.01em;
    line-height: 1.15;
}
@media (min-width: 768px) { .ss-success-title { font-size: 38px; } }
.ss-success-title em { font-style: italic; }

.ss-success-order-num {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--ss-bg-alt);
    border: 1px solid var(--ss-line);
    border-radius: var(--r-sm);
    padding: 8px 16px;
    font-size: 13px;
    color: var(--ss-ink-soft);
    margin-bottom: 16px;
}
.ss-success-order-num strong {
    font-family: var(--ss-mono);
    font-size: 14px;
    color: var(--ss-ink);
    letter-spacing: 0.02em;
    font-weight: 600;
}

.ss-success-sub {
    font-size: 15px;
    color: var(--ss-ink-soft);
    line-height: 1.6;
    margin: 0;
    max-width: 540px;
    margin-left: auto; margin-right: auto;
}

.ss-success-twocol {
    display: grid; grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 768px) { .ss-success-twocol { grid-template-columns: 1fr 1fr; } }
.ss-success-twocol .ss-profile-section { margin-bottom: 0; }
.ss-success-twocol + .ss-profile-section { margin-top: 20px; }

/* Pay action panels (DSK / Borica / TBI awaiting) */
.ss-pay-action-head {
    display: flex; align-items: center; gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--ss-line-soft, var(--ss-line));
    flex-wrap: wrap;
}
.ss-pay-action-logo {
    width: 44px; height: 44px;
    border-radius: var(--r-sm);
    object-fit: cover;
    background: #fff;
    border: 1px solid var(--ss-line);
    flex-shrink: 0;
}
.ss-pay-action-amount {
    font-family: var(--ss-serif);
    font-size: 22px; font-weight: 500;
    color: var(--ss-primary);
    margin-left: auto;
    letter-spacing: -0.005em;
}
.ss-pay-action-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--r-md);
    flex-wrap: wrap;
}
.ss-pay-action-row > div { flex: 1; min-width: 0; }
.ss-pay-action-row > div > i { margin-right: 6px; font-size: 16px; }
.ss-pay-action-row strong {
    display: block;
    font-size: 14px;
    color: var(--ss-ink);
    margin-bottom: 2px;
}
.ss-pay-action-row small {
    display: block;
    font-size: 12.5px;
    color: var(--ss-muted);
    line-height: 1.4;
}
.ss-pay-action-row--info {
    background: rgba(var(--ss-primary-rgb), 0.06);
    border: 1px solid rgba(var(--ss-primary-rgb), 0.18);
}
.ss-pay-action-row--info strong { color: var(--ss-primary-dark); }
.ss-pay-action-row--info > div > i { color: var(--ss-primary); }
.ss-pay-action-row--danger {
    background: rgba(184, 58, 42, 0.06);
    border: 1px solid rgba(184, 58, 42, 0.22);
}
.ss-pay-action-row--danger strong { color: var(--ss-danger); }
.ss-pay-action-row--danger > div > i { color: var(--ss-danger); }
.ss-pay-action-row--block { display: block; }

/* Payment method summary block */
.ss-payment-summary {
    display: flex; align-items: center; gap: 14px;
}
.ss-payment-summary-logo {
    height: 36px; width: 36px;
    object-fit: cover;
    border-radius: var(--r-sm);
    background: #fff;
    border: 1px solid var(--ss-line);
    flex-shrink: 0;
}
.ss-payment-summary-icon {
    font-size: 24px;
    color: var(--ss-primary);
    width: 36px; text-align: center;
    flex-shrink: 0;
}
.ss-payment-summary strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ss-ink);
}
.ss-payment-summary small {
    display: block;
    font-size: 12.5px;
    color: var(--ss-muted);
    margin-top: 2px;
    line-height: 1.4;
}

/* CTA at bottom of success page */
.ss-success-cta {
    text-align: center;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--ss-line);
}
.ss-success-thanks {
    font-family: var(--ss-serif);
    font-size: 17px;
    color: var(--ss-ink);
    margin: 0 0 18px;
    font-weight: 500;
    font-style: italic;
}
.ss-success-thanks i {
    color: var(--ss-danger);
    margin-right: 6px;
}
.ss-success-cta-btns {
    display: flex; flex-direction: column; gap: 10px;
    justify-content: center;
    align-items: stretch;
}
@media (min-width: 600px) {
    .ss-success-cta-btns { flex-direction: row; align-items: center; }
}

/* ════════════════════════════════════════════════════════════
   Blog + FAQ + Pages + Contacts (ss_latte polish refresh)
   ──────────────────────────────────────────────────────────── */

/* ── Page article (CMS pages/show typography wrapper) ── */
.ss-page-article {
    max-width: 760px;
    margin: 0 auto;
}
.ss-page-article .ss-leaf-head {
    padding-bottom: 8px;
}

/* ── FAQ shell ── */
.ss-faq-shell {
    max-width: 820px;
    margin: 0 auto;
}
.ss-faq-shell .ss-leaf-head {
    margin-bottom: 32px;
}

/* ── Contacts: 2-col layout (info card + form card) ── */
.ss-contacts-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 32px;
}
@media (min-width: 1024px) {
    .ss-contacts-layout { grid-template-columns: 360px 1fr; gap: 24px; align-items: start; }
}
.ss-contacts-info-card,
.ss-contacts-form-card {
    margin-bottom: 0;
}
.ss-contacts-info-card .ss-contacts-info {
    margin-top: 4px;
}

/* ── Blog sidebar widget wrapper ── */
.ss-blog-sidebar-widget {
    background: var(--ss-surface);
    border: 1px solid var(--ss-line-soft);
    border-radius: var(--r-md);
    overflow: hidden;
}
.ss-blog-sidebar-widget .ss-blog-sidebar-promo {
    padding: 0;
}
/* Sidebar category widget: enforce square 2x2 tile grid (4 equal tiles) */
.ss-blog-sidebar-widget .ss-cat-card { border: 0; border-radius: 0; }
.ss-blog-sidebar-widget .ss-cat-card-image {
    aspect-ratio: 1 / 1;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
}
.ss-blog-sidebar-widget .ss-cat-card-image > * {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
    display: block;
}

/* ── Blog hero/featured: ensure mobile-first stack ── */
@media (max-width: 599px) {
    .ss-blog-grid { gap: 18px; }
    .ss-blog-card-body { padding: 14px 16px 16px; }
}

/* ════════════════════════════════════════════════════════════
   MOBILE-FIRST POLISH PASS (≤480px - 90% of traffic)
   - Caps oversized hero/section headings
   - Reduces section vertical paddings on small screens
   - Toolbar wrap, sort dropdown placement, filter pills
   - Cart/checkout/profile/blog stacking + touch targets
   ──────────────────────────────────────────────────────────── */

/* === Headings: cap mobile h1 sizes (use clamp for fluid scale) === */
@media (max-width: 599px) {
    /* Hero (home) - very large desktop, must shrink for narrow screens */
    .ss-hero { height: 380px; }
    .ss-hero-title { font-size: clamp(28px, 8.5vw, 36px); margin-bottom: 12px; }
    .ss-hero-sub { font-size: 14px; margin-bottom: 18px; max-width: 100%; }
    .ss-hero-actions .ss-btn { min-height: 48px; }

    /* Section heads */
    .ss-section { margin: 36px 0; }
    .ss-section-head { margin-bottom: 18px; gap: 8px; }
    .ss-section-head h2 { font-size: clamp(22px, 6.4vw, 28px); }
    .ss-section-head p { font-size: 13.5px; line-height: 1.5; }
    .ss-section-head .link { font-size: 13px; }

    /* Parent category hero */
    .ss-parent-hero { padding: 24px 0; margin-bottom: 24px; }
    .ss-parent-hero h1 { font-size: clamp(26px, 8vw, 34px); margin-bottom: 10px; }
    .ss-parent-hero p { font-size: 13.5px; line-height: 1.55; }
    .ss-parent-hero-img { display: none; }
    .ss-parent-hero-meta { gap: 14px; margin-top: 16px; }
    .ss-parent-hero-meta strong { font-size: 20px; }
    .ss-parent-hero-meta small { font-size: 10.5px; }

    /* Leaf head */
    .ss-leaf-head { padding: 0 0 14px; margin-bottom: 18px; gap: 8px; }
    .ss-leaf-head h1 { font-size: clamp(24px, 7.4vw, 32px); }
    .ss-leaf-head .count { display: block; margin-left: 0; margin-top: 4px; font-size: 11.5px; }
    .ss-leaf-desc { font-size: 13.5px; line-height: 1.5; margin-top: 8px; }

    /* Blog */
    .ss-blog-article-title { font-size: clamp(24px, 7.4vw, 32px); }
    .ss-blog-featured-title { font-size: clamp(20px, 6vw, 26px); }
    .ss-blog-featured-body { padding: 18px 18px 22px; gap: 10px; }
    .ss-blog-card-title { font-size: 16px; }
    .ss-blog-article-body { font-size: 15.5px; line-height: 1.7; }
    .ss-blog-article-body h2 { font-size: 21px; margin: 1.4em 0 0.5em; }
    .ss-blog-article-body h3 { font-size: 18px; }
    .ss-blog-article-body blockquote { font-size: 16px; padding-left: 16px; }

    /* Static page (CMS) - smaller margin and font on small screens */
    .ss-static-page-title { margin-bottom: 22px; }
    .ss-page-content { font-size: 15px; line-height: 1.7; }

    /* Profile shell (less padding) */
    .ss-profile-shell { padding-top: 16px; padding-bottom: 36px; }
    .ss-profile-leaf-head { margin-bottom: 18px; padding-bottom: 14px; }
    .ss-profile-leaf-head h1 { font-size: clamp(24px, 7.4vw, 28px); }
    .ss-profile-section { padding: 18px 16px; margin-bottom: 14px; }
    .ss-profile-section-head { margin-bottom: 14px; padding-bottom: 12px; }
    .ss-profile-section-head h2 { font-size: 18px; }

    /* Product detail */
    .ss-pp-classic-grid { gap: 22px; padding-top: 4px; }
    .ss-pp-title { font-size: clamp(24px, 7.4vw, 30px); margin-bottom: 12px; }
    .ss-pp-buy { padding: 16px; margin-top: 16px; }
    .ss-pp-price-eur { font-size: clamp(28px, 8.5vw, 34px); }
    .ss-pp-buy-prices { gap: 10px; margin-bottom: 12px; }
    .ss-pp-section { padding: 14px 0; }
    .ss-pp-tab-content { padding: 18px 0 14px; }

    /* Cart head + cart row container shouldn't pad too much */
    .ss-cart-row { padding: 16px 16px; }
    .ss-cart-info a { font-size: 14px; }

    /* Checkout summary headings */
    .ss-checkout-grand-total { font-size: 17px; }
    .ss-checkout-grand-total-val { font-size: 22px; }

    /* Success page */
    .ss-success-hero { padding: 28px 16px 22px; margin-bottom: 18px; }
    .ss-success-title { font-size: clamp(22px, 6.6vw, 28px); }
    .ss-success-icon { width: 64px; height: 64px; font-size: 26px; margin-bottom: 12px; }

    /* USP grid - tighter on mobile */
    .ss-usp { padding: 22px 18px 18px; }
    .ss-usp h6 { font-size: 17px; }
    .ss-usp p { font-size: 12.5px; }

    /* Editorial section */
    .ss-editorial-text { padding: 24px 18px; }
    .ss-editorial-text h2 { font-size: clamp(22px, 6.6vw, 28px); margin-bottom: 12px; }
    .ss-editorial-text p { font-size: 14px; margin-bottom: 16px; }
    .ss-editorial-img { aspect-ratio: 16/10; min-height: 200px; }

    /* Subcategory cards: smaller content */
    .ss-subcat-content { padding: 14px 16px; }
    .ss-subcat-content h3 { font-size: 16px; }
    .ss-subcat-arrow { width: 32px; height: 32px; }

    /* Brands strip: 2 cols on very small */
    .ss-brands-strip { grid-template-columns: 1fr 1fr; }
    .ss-brands-strip > * { padding: 18px 8px; font-size: 14px; }

    /* Categories grid (home) - bigger touch area */
    .ss-cat-tile-foot { padding: 10px 8px 12px; }
    .ss-cat-title { font-size: 12px; }

    /* Category banner (Product on Focus) */
    .ss-category-banner { padding: 18px; margin: 24px 0; }
    .ss-category-banner-title { font-size: 20px; }
    .ss-category-banner-text { font-size: 13.5px; }
    .ss-category-banner-price { font-size: 24px; }
    .ss-category-banner-imglink { max-width: 240px; }

    /* Pagination - smaller min-height */
    .ss-pager { gap: 3px; margin-top: 24px; margin-bottom: 32px; }
    .ss-pager a, .ss-pager > span:not(.ss-pager-dots), .ss-pager button {
        min-width: 38px; height: 40px; padding: 0 9px; font-size: 13px;
    }
    .ss-pager .ss-pager-arrow { padding: 0 12px; }
}

/* === Toolbar: stack on mobile so pills + sort don't crowd === */
@media (max-width: 767px) {
    .ss-toolbar {
        align-items: stretch;
        gap: 12px;
    }
    .ss-toolbar-pills { width: 100%; }
    .ss-toolbar-sort {
        width: 100%;
        height: 44px;
        justify-content: space-between;
        padding: 0 16px;
    }
    .ss-toolbar-sort .ss-toolbar-sort-label { display: inline; }
    .ss-toolbar-sort-trigger { flex: 1; justify-content: space-between; }
    .ss-toolbar-sort-menu { left: 0; right: 0; min-width: 0; }
    /* Filter mobile toggle full-width */
    .ss-filter-mobile-toggle {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        font-size: 14px;
    }
}

/* === Filter side drawer: better width and scroll on mobile === */
@media (max-width: 767px) {
    .ss-filter-side { width: 92vw; max-width: 380px; padding: 0 16px 12px; }
    .ss-filter-side-head { padding: 14px 0; font-size: 16px; }
    .ss-filter-group { padding: 18px 0; }
    .ss-filter-title { font-size: 15px; }
    .ss-filter-list label { padding: 8px 8px; min-height: 40px; line-height: 1.3; }
    .ss-filter-list label input[type="checkbox"] { width: 20px; height: 20px; }
    .ss-filter-swatch { width: 34px; height: 34px; }
}

/* === Header search wrap: more compact on small screens === */
@media (max-width: 599px) {
    .ss-header-row { gap: 10px; padding: 10px 0; }
    .ss-search input { padding: 11px 14px 11px 40px; min-height: 44px; }
    .ss-search > i { left: 14px; font-size: 12.5px; }
    .ss-icon-btn, .ss-hamburger { width: 40px; height: 40px; }
}

/* === Product gallery: enable side-swipe affordance on mobile === */
@media (max-width: 767px) {
    .ss-pp-gallery-thumbs { gap: 6px; }
    .ss-pp-gallery-main { margin-bottom: 10px; }
    /* Variant pills more tappable */
    .ss-pp-variant { min-height: 44px; padding: 8px 14px 8px 8px; }
    .ss-pp-size { min-height: 56px; }
    /* Buy row stays stacked: qty full width? Keep qty fixed, button grows */
    .ss-pp-buy-row .ss-btn { min-height: 52px; font-size: 15px; }
    /* Tabs scroll smoothly */
    .ss-tabs { gap: 14px; padding-bottom: 0; }
    .ss-tab { padding: 14px 0; font-size: 13.5px; }
    /* Reviews summary on mobile - smaller score */
    .ss-pp-reviews-score { font-size: 48px; }
    .ss-pp-review { padding: 18px 0; }
}

/* === Cart row: prevent overflow + better spacing for unit price === */
@media (max-width: 767px) {
    .ss-cart-row { gap: 4px 12px; }
    .ss-cart-info { padding-right: 36px; /* leave room for absolute remove */ }
    .ss-cart-qty { margin-top: 6px; }
    .ss-cart-total { margin-top: 4px; font-size: 14px; }

    .ss-latte-qty button { width: 40px; min-width: 40px; min-height: 40px; }
    .ss-latte-qty input { width: 44px; min-height: 40px; }
}

/* === Checkout cards: 2 cols stays usable, name doesn't truncate badly === */
@media (max-width: 599px) {
    .ss-checkout-card { padding: 14px 8px; min-height: 80px; gap: 5px; }
    .ss-checkout-card-name { font-size: 12.5px; line-height: 1.25; }
    .ss-checkout-card-sub { font-size: 11px; }
    .ss-checkout-card-logo { min-height: 30px; }
    /* Payment cards stack content tighter */
    .ss-payment-card { padding: 12px 14px; gap: 10px; min-height: 60px; }
    .ss-payment-card-icon { width: 40px; height: 40px; font-size: 16px; }
    .ss-payment-card-title { font-size: 13.5px; }
    .ss-payment-card-desc { font-size: 11.5px; }
    /* Voucher row stacks (input + button) */
    .ss-checkout-voucher-row { flex-direction: column; gap: 8px; }
    .ss-checkout-voucher-row .ss-btn { width: 100%; min-height: 44px; }
    /* Step circle smaller */
    .ss-checkout-step { width: 24px; height: 24px; font-size: 11px; }
}

/* === Profile: order card spacing + total stack === */
@media (max-width: 599px) {
    .ss-order-card { padding: 14px 16px; }
    .ss-order-card-num { font-size: 16px; }
    .ss-order-card-total { font-size: 18px; }
    /* Order summary: total stacks, removes left border */
    .ss-order-summary-row { gap: 14px; }
    .ss-order-summary-total-val { font-size: 26px; }
    /* Address card: stack body + actions */
    .ss-address-card { padding: 16px; flex-direction: column; gap: 12px; }
    .ss-address-card-body { min-width: 0; width: 100%; }
    .ss-address-card-actions { width: 100%; justify-content: flex-start; }
    .ss-address-card-actions .ss-btn { flex: 1; }
    /* Sidebar nav: tighter horizontal pills */
    .ss-profile-sidebar-user { padding: 14px; gap: 10px; }
    .ss-profile-sidebar-link { padding: 10px 12px; font-size: 13px; }
    /* Order items wrap: edge-to-edge on mobile */
    .ss-order-items-wrap { margin: 0 -16px 18px; }
    .ss-order-items tr { padding: 12px 16px; }
    /* Order totals: full width on small */
    .ss-order-totals { max-width: 100%; }
    .ss-order-totals-row--grand { font-size: 16px; }
    .ss-order-totals-row--grand span:last-child { font-size: 19px; }
}

/* === Blog: stack featured + sidebar widgets, full-width === */
@media (max-width: 767px) {
    .ss-blog-featured { grid-template-columns: 1fr; }
    .ss-blog-featured-img { aspect-ratio: 16/10; min-height: auto; }
    .ss-blog-side { gap: 18px; }
    .ss-blog-sidebar-list a { padding: 12px 16px; min-height: 44px; }
    .ss-blog-article-meta { gap: 6px; padding-bottom: 14px; margin-bottom: 22px; font-size: 12.5px; }
    .ss-blog-article-hero { margin-bottom: 22px; }
}

/* === Contacts: stack info + form, smaller map === */
@media (max-width: 767px) {
    .ss-contacts-layout { gap: 16px; margin-bottom: 24px; }
    .ss-contact-row { gap: 12px; font-size: 14px; }
    .ss-contact-dot { width: 36px; height: 36px; font-size: 13px; }
    .ss-contact-social-btn { width: 44px; height: 44px; }
    .ss-contacts-map { height: 280px; }
}

/* === FAQ: roomier accordion buttons === */
@media (max-width: 599px) {
    .ss-faq-list { gap: 32px; }
    .ss-faq-group-title { font-size: 18px; margin-bottom: 14px; }
    .ss-faq-q { padding: 16px 18px; font-size: 14.5px; min-height: 56px; gap: 12px; }
    .ss-faq-a-inner { padding: 14px 18px 18px; font-size: 14px; line-height: 1.65; }
}

/* === Forms: ensure all inputs/selects/textareas don't trigger iOS zoom === */
@media (max-width: 767px) {
    .ss-input, .ss-textarea, .ss-pp-select, .ss-review-input, .ss-review-textarea, .ss-pq-field input, .ss-pq-field textarea, .ss-newsletter-input, .ss-subscribe-field input, .ss-combobox-search input, .ss-price-inputs input, .ss-latte-qty input {
        font-size: 16px;
    }
}
@media (min-width: 768px) {
    .ss-input { font-size: 14.5px; }
    .ss-textarea { font-size: 14.5px; }
    .ss-pp-select { font-size: 14px; }
    .ss-review-input, .ss-review-textarea { font-size: 14px; }
    .ss-pq-field input, .ss-pq-field textarea { font-size: 14px; }
    .ss-newsletter-input { font-size: 14px; }
    .ss-subscribe-field input { font-size: 14px; }
    .ss-combobox-search input { font-size: 13.5px; }
    .ss-price-inputs input { font-size: 13px; }
    .ss-latte-qty input { font-size: 14px; }
}

/* === Crumbs bar: tighter padding on mobile === */
@media (max-width: 599px) {
    .ss-crumbs { padding: 12px 0 12px 8px; font-size: 12px; gap: 6px; }
    .ss-crumbs-bar { margin-bottom: 14px; }
}

/* === Compare cards: 1 col on tiny screens for legibility === */
@media (max-width: 419px) {
    .ss-compare-cards { grid-template-columns: 1fr; }
}

/* === Sticky profile sidebar shouldn't stick on mobile (it's horizontal there) === */
@media (max-width: 767px) {
    .ss-profile-sidebar { position: static !important; top: auto !important; }
    .ss-profile-sidebar-user { display: none; /* Hide user card on mobile - just nav pills */ }
    .ss-profile-sidebar { border-radius: var(--r-md); }
}

/* === Carousel buttons: tighter top alignment for short cards on mobile === */
@media (min-width: 600px) and (max-width: 1023px) {
    .ss-products-swiper .swiper-button-prev,
    .ss-products-swiper .swiper-button-next {
        width: 36px; height: 36px;
    }
}

/* === Eliminate horizontal overflow guarantees on grids === */
.ss-cart-main, .ss-cart-aside,
.ss-checkout-main, .ss-checkout-aside,
.ss-blog-main, .ss-blog-side,
.ss-profile-content,
.ss-leaf-layout > * { min-width: 0; }

/* === Subscribe modal: better mobile padding === */
@media (max-width: 599px) {
    .ss-subscribe-modal { padding: 22px 18px 20px; }
    .ss-subscribe-icon { width: 56px; height: 56px; font-size: 24px; margin-bottom: 14px; }
    .ss-subscribe-title { font-size: 19px; }
    .ss-subscribe-text { font-size: 13.5px; margin-bottom: 14px; }
}

/* === Consent banner mobile: don't take whole screen === */
@media (max-width: 599px) {
    .ss-consent { padding: 8px; }
    .ss-consent-card { padding: 14px; }
    .ss-consent-title { font-size: 16px; }
    .ss-consent-text { font-size: 13px; }
    .ss-consent-actions .ss-btn { min-height: 44px; }
}

/* === Empty states: smaller hero icon on mobile === */
@media (max-width: 599px) {
    .ss-empty-state { padding: 36px 18px; }
    .ss-empty-state-icon { width: 60px; height: 60px; font-size: 24px; margin-bottom: 14px; }
    .ss-empty-state h3 { font-size: 19px; }
    .ss-empty-state p { font-size: 13.5px; }
    .ss-empty { padding: 36px 18px; }
    .ss-empty h5 { font-size: 19px; }
}

/* === Variant list (back-in-stock): action button full-width on mobile === */
@media (max-width: 599px) {
    .ss-vlist { padding: 14px; }
    .ss-vlist-row { padding: 10px 12px; }
    .ss-vlist-action .ss-btn { min-width: 0; width: 100%; }
}

/* === Auth pages: tighter card padding on small screens === */
@media (max-width: 419px) {
    .ss-auth-wrap { padding: 24px 12px; }
    .ss-auth-card { padding: 28px 22px; border-radius: var(--r-lg); }
    .ss-auth-title { font-size: 22px; }
}

/* === Inline-style overrides for blade containers (replace inline padding) ===
   Many blades use style="padding-top: 32px; padding-bottom: 64px" on .ss-container.
   Provide a tighter mobile equivalent via class for any future cleanup. Inline wins,
   but we still tighten universal section margins above to compensate. */

/* ════════════════════════════════════════════════════════════
   AUDIT FIXES (responsive-design + ui-ux-pro-max skills, 2026-04-26)
   - Bootstrap form-control 16px mobile (notify-modal, etc.)
   - Hover-only state guard (touch devices don't have hover)
   - Image CLS protection (width/height fallback via aspect-ratio)
   - Sticky bottom CTA utility for mobile cart/checkout
   ──────────────────────────────────────────────────────────── */

/* ── Bootstrap .form-control mobile override (notify-modal, login modal, etc.) ── */
@media (max-width: 767px) {
    .form-control,
    .form-select,
    select.form-control {
        font-size: 16px !important;
        min-height: 44px;
    }
}

/* ── Touch-device :hover safety net (some browsers fire :hover on tap-then-tap) ── */
@media (hover: none) and (pointer: coarse) {
    /* Disable card lift on touch devices (caused unwanted state on tap) */
    .ss-card:hover { transform: none; }
    .ss-cat-card:hover { transform: none; }
    .ss-subcat-card:hover { transform: none; }
}

/* ── Image CLS protection: any <img> without explicit dimensions ── */
.ss-card-image img,
.ss-subcat-image img,
.ss-cat-card-image img {
    aspect-ratio: 1 / 1; /* ensures slot is reserved even if w/h attrs missing */
}

/* ── Sticky bottom CTA bar (utility for mobile cart/checkout/product) ── */
.ss-sticky-mobile-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1020; /* above main content, below modals/drawers (1090+) */
    background: var(--ss-surface);
    border-top: 1px solid var(--ss-line);
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px rgba(40, 30, 20, 0.08);
    display: none;
}
@media (max-width: 1099px) {
    .ss-sticky-mobile-cta { display: block; }
    /* Ensure body content has room for the sticky bar */
    body:has(.ss-sticky-mobile-cta) main {
        padding-bottom: 84px;
    }
}

/* ── Better focus contrast on dark backgrounds (WCAG 2.4.7) ── */
.ss-utility a:focus-visible,
.ss-footer a:focus-visible,
.ss-topbar a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Skip-link prominent on focus (a11y) ── */
.skip-to-content:focus,
.skip-to-content:focus-visible {
    background: var(--ss-primary);
    color: #fff;
    font-weight: 600;
    padding: 12px 18px;
    border-radius: 0 0 var(--r-sm) 0;
}

/* ── Empty cart state heading bump (was h3 inside cart, should look like h1) ── */
.ss-empty-state h3 {
    font-family: var(--ss-serif);
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.875rem);
    font-weight: 500;
    color: var(--ss-ink);
    margin-bottom: 8px;
}

/* ════════════════════════════════════════════════════════════
   Notify-modal (Back-in-Stock) - mirrors .ss-subscribe-modal styling.
   Markup uses .ss-notify-* classes, so we mirror the subscribe tokens here.
   ──────────────────────────────────────────────────────────── */
@keyframes ss-notify-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ss-notify-scale-in {
    from { opacity: 0; transform: translate(-50%, -45%) scale(0.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.ss-animate-fade-in  { animation: ss-notify-fade-in 220ms ease-out forwards; }
.ss-animate-scale-in { animation: ss-notify-scale-in 220ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }

.ss-notify-overlay {
    position: fixed; inset: 0;
    background: rgba(26, 24, 21, 0.55);
    z-index: 10010;
}
.ss-notify-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
    max-width: 460px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--ss-surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    z-index: 10020;
    padding: 28px 24px 24px;
    text-align: center;
}
@media (min-width: 768px) { .ss-notify-modal { padding: 36px 36px 32px; } }

.ss-notify-close {
    position: absolute; top: 12px; right: 12px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--ss-bg-alt);
    border: 0;
    color: var(--ss-ink-soft);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    transition: background 150ms, color 150ms;
}
.ss-notify-close:hover { background: var(--ss-line); color: var(--ss-ink); }

.ss-notify-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--ss-primary-light);
    color: var(--ss-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    margin: 0 auto 18px;
}

.ss-notify-modal h4 {
    font-family: var(--ss-serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--ss-ink);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.ss-notify-modal p { margin: 0 0 8px; }
.ss-notify-modal p.fw-semibold { color: var(--ss-ink); font-weight: 500; }
.ss-notify-modal p.text-muted { color: var(--ss-muted); }
.ss-notify-modal p.small {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ss-ink-soft);
    margin: 0 0 18px;
}

.ss-notify-modal form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.ss-notify-modal .form-control {
    width: 100%;
    border: 1px solid var(--ss-line);
    background: var(--ss-surface);
    padding: 10px 14px;
    font: inherit; font-size: 14px;
    border-radius: var(--r-sm);
    min-height: 44px;
    transition: border-color 150ms, box-shadow 150ms;
}
.ss-notify-modal .form-control:focus {
    outline: none;
    border-color: var(--ss-ink);
    box-shadow: 0 0 0 3px rgba(var(--ss-primary-rgb), 0.12);
}

.ss-notify-modal .btn.ss-variant-list-btn-notify {
    appearance: none;
    background: var(--ss-primary);
    color: #fff;
    border: 1px solid var(--ss-primary);
    border-radius: var(--r-sm);
    padding: 12px 18px;
    font: inherit; font-size: 14px; font-weight: 500;
    width: 100%;
    min-height: 46px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: background 150ms, border-color 150ms, transform 150ms;
}
.ss-notify-modal .btn.ss-variant-list-btn-notify:hover:not(:disabled) {
    background: var(--ss-primary-dark);
    border-color: var(--ss-primary-dark);
    transform: translateY(-1px);
}
.ss-notify-modal .btn.ss-variant-list-btn-notify:disabled { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 575.98px) {
    .ss-notify-modal { padding: 22px 18px 20px; }
    .ss-notify-icon { width: 56px; height: 56px; font-size: 24px; margin-bottom: 14px; }
    .ss-notify-modal h4 { font-size: 19px; }
}
/* ── Cart aside sticky position safety: don't overlap sticky CTA ── */
@media (max-width: 1099px) {
    .ss-cart-aside { position: static; top: auto; }
}

/* ── Hide "no active filters" idle text on mobile (saves space in toolbar) ── */
.ss-toolbar-no-filters {
    color: var(--ss-muted);
    font-size: 13px;
}
@media (max-width: 767px) {
    .ss-toolbar-no-filters { display: none; }
}

/* Leaf category (with products) header: no bottom border (toolbar below provides separation). */
.ss-leaf-container .ss-leaf-head {
    border-bottom: 0;
    padding-bottom: 0;
}

/* ════════════════════════════════════════════════════════════
   Connected Products / "Клиентите купуват и" - ss_latte
   3.0.5: a list of rows like the other themes, in the latte look (it was a grid of large cards).
   ──────────────────────────────────────────────────────────── */
.ss-connected {
    margin: 48px 0;
}
@media (min-width: 1100px) {
    .ss-connected { margin: 64px 0; }
}
.ss-connected-title {
    font-family: var(--ss-serif);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
    color: var(--ss-ink);
}
@media (min-width: 768px) { .ss-connected-title { font-size: 28px; margin-bottom: 24px; } }
.ss-connected-title em { font-style: italic; color: var(--ss-primary); font-weight: 400; }

.ss-connected-list {
    background: var(--ss-bg-alt);
    border-radius: var(--r-md);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
@media (min-width: 600px) { .ss-connected-list { padding: 16px; } }

/* One row: picture | name, code, colours | price | button. On a phone the price sits under the name. */
.ss-connected-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 44px;
    grid-template-areas:
        "thumb body  action"
        "thumb price action";
    gap: 4px 12px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--ss-line);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    transition: border-color 150ms;
}
.ss-connected-row:hover { border-color: var(--ss-ink); }
@media (min-width: 600px) {
    .ss-connected-row {
        grid-template-columns: 64px minmax(0, 1fr) auto 44px;
        grid-template-areas: "thumb body price action";
        gap: 16px;
        padding: 12px 16px;
    }
}
.ss-connected-thumb { grid-area: thumb; display: block; line-height: 0; }
.ss-connected-thumb img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: var(--r-xs);
    background: var(--ss-bg);
}
@media (min-width: 600px) { .ss-connected-thumb img { width: 64px; height: 64px; } }

.ss-connected-body { grid-area: body; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ss-connected-name {
    font-family: var(--ss-serif);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ss-ink);
    text-decoration: none;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ss-connected-name:hover { color: var(--ss-primary); }
.ss-connected-swatches { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; }
.ss-connected-swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--ss-line);
    display: inline-block;
}
.ss-connected-swatch-more { font-family: var(--ss-mono); font-size: 10px; color: var(--ss-muted); margin-left: 2px; }

/* The wrapper of price + button dissolves: both are cells of the row's own grid */
.ss-connected-foot { display: contents; }
.ss-connected-price {
    grid-area: price;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    line-height: 1.2;
}
@media (min-width: 600px) {
    .ss-connected-price { flex-direction: column; align-items: flex-end; gap: 2px; }
}
.ss-connected-price-old { font-family: var(--ss-mono); font-size: 11px; color: var(--ss-muted); text-decoration: line-through; white-space: nowrap; }
.ss-connected-price-eur { font-family: var(--ss-serif); font-size: 16px; font-weight: 500; color: var(--ss-ink); letter-spacing: -0.01em; white-space: nowrap; }
@media (min-width: 600px) { .ss-connected-price-eur { font-size: 17px; } }
.ss-connected-price-eur.is-promo { color: var(--ss-primary); }
.ss-connected-inquiry { font-family: var(--ss-serif); font-style: italic; font-size: 14px; color: var(--ss-muted); }

/* Icon-only square buttons: the same on a phone and on a desktop; the title / aria-label carries the words */
.ss-connected-action { grid-area: action; }
.ss-connected-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--ss-line);
    border-radius: var(--r-sm);
    background: #fff;
    color: var(--ss-ink);
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms, border-color 150ms, color 150ms;
}
.ss-connected-cta i { font-size: 15px; }
.ss-connected-cta:hover,
.ss-connected-row:hover .ss-connected-cta {
    background: var(--ss-ink);
    border-color: var(--ss-ink);
    color: #fff;
}
.ss-connected-cta[disabled] { opacity: .6; cursor: progress; }
.ss-connected-cta-call,
.ss-connected-cta-call:hover,
.ss-connected-row:hover .ss-connected-cta-call {
    background: var(--ss-success);
    border-color: var(--ss-success);
    color: #fff;
}

/* ════════════════════════════════════════════════════════════
   Video tab (lite-youtube-embed inside .ss-pp-tab-content)
   16:9 aspect ratio, --r-md radius, soft shadow
   ──────────────────────────────────────────────────────────── */
.ss-latte-video {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: var(--ss-ink);
}
.ss-latte-video lite-youtube {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-md);
    overflow: hidden;
}
/* lite-youtube has its own internal aspect-ratio fallback (padding-bottom 56.25%);
   the wrapper aspect-ratio above is for browsers honoring the CSS aspect-ratio property. */

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

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

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