/* =============================================
   BISO ZANDORA — Design System
   Couleurs : Bleu · Orange · Blanc
   ============================================= */

/* ─── Google Font ─── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

/* ─── CSS Custom Properties (Light Theme) ─── */
:root {
    /* Primary — Deep Royal Blue */
    --sb-blue-50:  #EBF0FF;
    --sb-blue-100: #C3D0FE;
    --sb-blue-200: #8DA3FD;
    --sb-blue-300: #5776FC;
    --sb-blue-400: #3458F5;
    --sb-blue-500: #1B3CB4;
    --sb-blue-600: #0F2D8C;
    --sb-blue-700: #0A1F64;
    --sb-blue-800: #06153E;
    --sb-blue-900: #030C22;

    /* Accent — Vibrant Orange */
    --sb-orange-50:  #FFF5EB;
    --sb-orange-100: #FFE0BF;
    --sb-orange-200: #FFCA93;
    --sb-orange-300: #FFB366;
    --sb-orange-400: #FF9D3A;
    --sb-orange-500: #FF8800;
    --sb-orange-600: #D97300;
    --sb-orange-700: #B35E00;
    --sb-orange-800: #8C4A00;
    --sb-orange-900: #663500;

    /* Neutrals */
    --sb-white:     #FFFFFF;
    --sb-gray-50:   #F8F9FC;
    --sb-gray-100:  #F1F3F8;
    --sb-gray-200:  #E2E5ED;
    --sb-gray-300:  #C7CCD9;
    --sb-gray-400:  #9AA0B3;
    --sb-gray-500:  #6B7280;
    --sb-gray-600:  #4B5563;
    --sb-gray-700:  #374151;
    --sb-gray-800:  #1F2937;
    --sb-gray-900:  #111827;

    /* Semantic tokens */
    --sb-bg:           var(--sb-white);
    --sb-bg-secondary: var(--sb-gray-50);
    --sb-text:         var(--sb-gray-900);
    --sb-text-muted:   var(--sb-gray-500);
    --sb-border:       var(--sb-gray-200);
    --sb-shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --sb-shadow-md:    0 4px 6px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.04);
    --sb-shadow-lg:    0 10px 25px rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.04);
    --sb-shadow-xl:    0 20px 50px rgba(0,0,0,.12);

    /* Topbar */
    --sb-topbar-bg:    var(--sb-blue-800);
    --sb-topbar-text:  rgba(255,255,255,.85);

    /* Header */
    --sb-header-bg:    var(--sb-white);
    --sb-header-text:  var(--sb-gray-800);

    /* Transitions */
    --sb-ease:         cubic-bezier(.4, 0, .2, 1);
    --sb-duration:     .3s;

    /* Typography */
    --sb-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sb-font-display: 'Outfit', 'Inter', sans-serif;

    /* Radius */
    --sb-radius-sm:  6px;
    --sb-radius-md:  10px;
    --sb-radius-lg:  16px;
    --sb-radius-xl:  24px;
    --sb-radius-full:9999px;
}

/* ─── Dark Theme ─── */
html.sb-dark {
    --sb-bg:           #0F1219;
    --sb-bg-secondary: #171C28;
    --sb-text:         #E5E7EB;
    --sb-text-muted:   #9CA3AF;
    --sb-border:       #2A3042;
    --sb-shadow-sm:    0 1px 3px rgba(0,0,0,.3);
    --sb-shadow-md:    0 4px 6px rgba(0,0,0,.3);
    --sb-shadow-lg:    0 10px 25px rgba(0,0,0,.4);
    --sb-shadow-xl:    0 20px 50px rgba(0,0,0,.5);

    --sb-topbar-bg:    #080B12;
    --sb-topbar-text:  rgba(255,255,255,.7);

    --sb-header-bg:    #131722;
    --sb-header-text:  #E5E7EB;
}

/* Base and shared layout */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; max-width: 100vw; }
body { margin: 0; font-family: var(--sb-font-body); color: var(--sb-text); background: var(--sb-bg); -webkit-font-smoothing: antialiased; }
.container { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: 28px; }
.sb-header, .sb-topbar { line-height: 1.5; }
.sb-header button, .sb-topbar button { font: inherit; cursor: pointer; }
.sb-header a, .sb-topbar a { text-decoration: none; }
.sb-header [hidden], .sb-topbar [hidden] { display: none !important; }
.sb-header :is(a, button):focus-visible, .sb-topbar :is(a, button):focus-visible { outline: 3px solid var(--sb-orange-400); outline-offset: 4px; }
.sb-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sb-skip-link { position: fixed; top: 8px; left: 12px; padding: 12px 20px; background: var(--sb-blue-600); color: white; border-radius: 8px; z-index: 1100; transform: translateY(-160%); }
.sb-skip-link:focus { transform: none; color: white; }
.sb-small-arrow { font-size: 9px !important; }

/* Quiet utility strip */
.sb-topbar { position: relative; z-index: 1001; background: var(--sb-topbar-bg); color: #e2e7f3; font-size: 12px; }
.sb-topbar-inner, .sb-topbar-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.sb-topbar-inner { min-height: 42px; }
.sb-topbar-message { display: flex; align-items: center; margin: 0; gap: 7px; font-size: 12px; }
.sb-topbar-extra { margin-left: -7px; }
.sb-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sb-orange-400); margin-right: 4px; }
.sb-topbar-link { display: flex; align-items: center; gap: 7px; color: inherit; }
.sb-topbar-link:hover { color: white; }
.sb-topbar-sep { width: 1px; height: 14px; background: #ffffff30; }
.sb-lang-selector, .sb-profile-dropdown, .sb-has-dropdown { position: relative; }
.sb-lang-btn, .sb-theme-btn { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 36px; padding: 0 4px; border: 0; background: transparent; color: inherit; }
.sb-theme-btn { width: 36px; border-radius: 8px; }
.sb-theme-btn:hover, .sb-lang-btn:hover { background: #ffffff12; color: white; }
.sb-lang-dropdown { position: absolute; top: calc(100% + 4px); right: 0; width: 190px; list-style: none; margin: 0; padding: 6px; border: 1px solid var(--sb-border); border-radius: 12px; background: var(--sb-header-bg); box-shadow: var(--sb-shadow-xl); color: var(--sb-text); }
.sb-lang-option { display: flex; justify-content: space-between; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 7px; color: inherit; background: transparent; text-align: left; }
.sb-lang-option span { font-size: 10px; opacity: .6; }
.sb-lang-option:hover { background: var(--sb-bg-secondary); }
.sb-lang-option.active { background: var(--sb-blue-500); color: white; }

/* Brand, product search and shopping actions */
.sb-header { position: sticky; top: 0; z-index: 1000; background: var(--sb-header-bg); color: var(--sb-header-text); border-bottom: 1px solid var(--sb-border); transition: box-shadow .2s ease; }
.sb-header.scrolled { box-shadow: 0 8px 28px #06153e12; }
.sb-header-inner { display: grid; grid-template-columns: auto minmax(180px, 1fr) auto; align-items: center; gap: 38px; min-height: 104px; padding-block: 22px; }
.sb-logo { display: inline-flex; align-items: center; gap: 11px; color: var(--sb-text); }
.sb-logo-icon { position: relative; display: grid; place-items: center; width: 46px; height: 48px; border-radius: 13px 13px 17px 13px; background: var(--sb-blue-600); color: white; font-size: 23px; }
.sb-logo-icon > span { position: absolute; right: -3px; bottom: 1px; width: 12px; height: 12px; background: var(--sb-orange-500); border: 3px solid var(--sb-header-bg); border-radius: 50%; }
.sb-logo-text { display: flex; flex-direction: column; }
.sb-logo-name, .sb-mobile-logo { font-family: var(--sb-font-display); font-size: 30px; letter-spacing: -1.2px; font-weight: 800; color: var(--sb-blue-700); line-height: 1.05; white-space: nowrap; }
.sb-logo-name > span, .sb-mobile-logo > span { color: var(--sb-orange-500); }
.sb-logo-tagline { font-size: 10px; font-weight: 500; letter-spacing: .2px; color: var(--sb-text-muted); margin-top: 5px; white-space: nowrap; }
.sb-search-form { min-width: 0; display: flex; align-items: center; gap: 12px; border: 1px solid var(--sb-border); border-radius: 12px; background: var(--sb-bg-secondary); padding: 5px 5px 5px 17px; transition: border-color .2s, box-shadow .2s; }
.sb-search-form:focus-within { border-color: var(--sb-blue-400); box-shadow: 0 0 0 3px #3458f520; }
.sb-search-icon { font-size: 16px; color: var(--sb-text-muted); }
.sb-search-input { width: 100%; min-width: 0; height: 40px; padding: 0; border: 0; outline: none; background: transparent; color: var(--sb-text); font: 13px var(--sb-font-body); }
.sb-search-input::placeholder { color: var(--sb-text-muted); opacity: 1; }
.sb-search-submit { display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 42px; flex-shrink: 0; padding: 0 17px; border: 0; border-radius: 8px; background: var(--sb-blue-600); color: white; font-size: 12px !important; font-weight: 600 !important; transition: background .2s; }
.sb-search-submit:hover { background: var(--sb-blue-500); }
.sb-header-actions { display: flex; align-items: center; gap: 13px; }
.sb-action-btn { display: flex; position: relative; align-items: center; justify-content: center; gap: 10px; min-width: 44px; min-height: 48px; padding: 4px; border: 0; border-radius: 9px; background: transparent; color: var(--sb-header-text); text-align: left; }
.sb-action-btn > i, .sb-cart-icon > i { font-size: 21px; }
.sb-action-btn:hover { background: var(--sb-bg-secondary); color: var(--sb-blue-500); }
.sb-action-copy { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.sb-action-copy small { font-size: 10px; color: var(--sb-text-muted); }
.sb-action-copy strong { font-size: 12px; font-weight: 650; }
.sb-actions-divider { width: 1px; height: 28px; background: var(--sb-border); }
.sb-cart-icon { position: relative; display: grid; place-items: center; width: 29px; height: 36px; }
.sb-action-badge { position: absolute; top: -4px; right: -7px; min-width: 19px; height: 19px; padding: 0 4px; border: 2px solid var(--sb-header-bg); border-radius: 20px; background: var(--sb-orange-500); color: var(--sb-blue-900); font: 700 10px/15px var(--sb-font-body); text-align: center; }
.sb-profile-menu { position: absolute; top: calc(100% + 13px); right: 0; width: 270px; padding: 12px; border: 1px solid var(--sb-border); border-radius: 14px; background: var(--sb-header-bg); box-shadow: var(--sb-shadow-xl); z-index: 5; }
.sb-menu-heading { display: flex; flex-direction: column; padding: 6px 8px 14px; gap: 4px; }
.sb-menu-heading strong { font-size: 15px; }
.sb-menu-heading span { font-size: 12px; color: var(--sb-text-muted); }
.sb-profile-menu a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 8px; color: var(--sb-text); font-size: 13px; }
.sb-profile-menu a:hover { background: var(--sb-bg-secondary); }
.sb-profile-menu a > i { width: 18px; color: var(--sb-text-muted); }
.sb-profile-menu .sb-signin-link { justify-content: space-between; margin-bottom: 8px; background: var(--sb-blue-600); color: white; font-weight: 600; }
.sb-profile-menu .sb-signin-link:hover { background: var(--sb-blue-500); }
.sb-profile-menu .sb-signin-link > i { color: inherit; }
.sb-header-logout-form { margin-top: 6px; border-top: 1px solid var(--sb-border); padding-top: 6px; }
.sb-profile-menu .sb-header-logout-form button {
    width: 100%; min-height: 44px; display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border: 0; border-radius: 8px; background: transparent;
    color: #c0392b; font: 600 13px var(--sb-font-body); text-align: left;
}
.sb-profile-menu .sb-header-logout-form button:hover { background: #fff1f0; }
.sb-profile-menu .sb-header-logout-form i { width: 18px; }

/* Department navigation */
.sb-nav-shell { border-top: 1px solid var(--sb-border); }
.sb-nav-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.sb-nav-list { display: flex; align-items: center; gap: 7px; list-style: none; padding: 0; margin: 0; }
.sb-nav-link { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 55px; padding: 0 18px; border: 0; background: transparent; color: var(--sb-header-text); font-size: 13px !important; font-weight: 550 !important; white-space: nowrap; }
.sb-nav-link:hover, .sb-nav-link.active { color: var(--sb-blue-500); }
.sb-nav-item .sb-nav-link.active::after { content: ''; position: absolute; bottom: 0; height: 3px; left: 18px; right: 18px; background: var(--sb-orange-500); border-radius: 3px 3px 0 0; }
.sb-category-btn { gap: 12px; margin-right: 13px; padding: 0 23px 0 0; }
.sb-category-btn::after { content: ''; position: absolute; right: 0; height: 24px; width: 1px; background: var(--sb-border); }
.sb-category-btn > .fa-th-large { font-size: 17px; color: var(--sb-blue-500); }
.sb-nav-arrow { font-size: 9px; margin-left: 10px; transition: transform .2s; }
.sb-category-btn[aria-expanded="true"] .sb-nav-arrow { transform: rotate(180deg); }
.sb-nav-link.sb-promo-link { color: var(--sb-orange-700); }
.sb-promo-link > i { font-size: 12px; }
.sb-order-link { display: flex; align-items: center; gap: 9px; min-height: 44px; color: var(--sb-text-muted); font-size: 12px; white-space: nowrap; }
.sb-order-link:hover { color: var(--sb-blue-500); }
.sb-dropdown-menu { position: absolute; left: 0; top: 100%; width: 340px; padding: 16px 10px 10px; border: 1px solid var(--sb-border); border-top: 3px solid var(--sb-blue-500); border-radius: 0 0 14px 14px; background: var(--sb-header-bg); box-shadow: var(--sb-shadow-xl); z-index: 5; }
.sb-dropdown-label { display: block; margin: 0 10px 10px; color: var(--sb-text-muted); font-size: 9px; font-weight: 600; letter-spacing: 1.1px; }
.sb-dropdown-menu a { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px; border-radius: 9px; color: var(--sb-text); }
.sb-dropdown-menu a:hover { background: var(--sb-bg-secondary); }
.sb-category-icon { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border: 1px solid var(--sb-border); border-radius: 9px; color: var(--sb-blue-500); background: var(--sb-bg-secondary); }
.sb-dropdown-menu strong { display: block; font-size: 13px; font-weight: 600; }
.sb-dropdown-menu small { display: block; margin-top: 3px; font-size: 10px; color: var(--sb-text-muted); }
.sb-category-arrow { margin-left: auto; font-size: 9px; color: var(--sb-text-muted); }
.sb-dropdown-menu .sb-all-categories { justify-content: space-between; min-height: 44px; margin-top: 8px; border-top: 1px solid var(--sb-border); border-radius: 0; color: var(--sb-blue-500); font-size: 12px; font-weight: 600; }
.sb-mobile-panel-header, .sb-mobile-panel-footer, .sb-hamburger, .sb-overlay { display: none; }
html.sb-dark .sb-logo-name, html.sb-dark .sb-mobile-logo { color: #f1f4ff; }
html.sb-dark :is(.sb-action-btn:hover, .sb-nav-link:hover, .sb-nav-link.active, .sb-category-icon, .sb-category-btn > .fa-th-large, .sb-all-categories, .sb-order-link:hover) { color: var(--sb-blue-200); }
html.sb-dark .sb-nav-link.sb-promo-link { color: var(--sb-orange-300); }

@media (max-width: 1199px) {
    .sb-header-inner { gap: 24px; }
    .sb-favorites-btn, .sb-profile-btn > .sb-small-arrow { display: none; }
    .sb-search-submit { padding-inline: 14px; }
    .sb-search-submit > span { display: none; }
    .sb-nav-list { gap: 0; }
    .sb-nav-link { padding-inline: 15px; }
    .sb-category-btn { padding-left: 0; }
}

/* Mobile: a dedicated search row and a left-hand navigation drawer. */
@media (max-width: 991px) {
    .container { padding-inline: 20px; }
    .sb-topbar-inner { min-height: 38px; }
    .sb-topbar-message { font-size: 10px; }
    .sb-topbar-extra, .sb-topbar-link, .sb-topbar-sep { display: none; }
    .sb-topbar-actions { gap: 9px; }
    .sb-lang-btn { font-size: 11px !important; }
    .sb-header-inner { grid-template-columns: 44px 1fr auto; gap: 14px 12px; min-height: 0; padding-block: 16px; }
    .sb-hamburger { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--sb-border); border-radius: 10px; background: transparent; color: var(--sb-header-text); font-size: 18px !important; }
    .sb-logo { gap: 9px; justify-self: start; }
    .sb-logo-icon { width: 36px; height: 39px; font-size: 19px; border-radius: 10px; }
    .sb-logo-name { font-size: 25px; }
    .sb-logo-tagline { font-size: 9px; }
    .sb-header-actions { gap: 12px; }
    .sb-action-copy, .sb-actions-divider { display: none; }
    .sb-action-btn { min-height: 44px; }
    .sb-search-form { grid-column: 1 / -1; grid-row: 2; }
    .sb-search-input { font-size: 16px; }
    .sb-search-submit > span { display: inline; }
    .sb-nav-shell { border-top: 0; }
    .sb-nav-inner { display: block; }
    .sb-order-link { display: none; }
    .sb-nav-list { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 18px; }
    .sb-nav-link { width: 100%; min-height: 49px; padding: 12px 14px; border-radius: 9px; font-size: 14px !important; }
    .sb-nav-item .sb-nav-link.active { background: var(--sb-bg-secondary); }
    .sb-nav-item .sb-nav-link.active::after { top: 15px; bottom: 15px; left: 0; width: 3px; height: auto; border-radius: 3px; }
    .sb-category-btn { margin: 0 0 8px; background: var(--sb-bg-secondary); }
    .sb-category-btn::after { display: none; }
    .sb-nav-arrow { margin-left: auto; }
    .sb-dropdown-menu { position: static; width: 100%; margin-bottom: 10px; padding: 10px 0 0; border: 0; box-shadow: none; }
    .sb-dropdown-menu > .sb-dropdown-label { display: none; }
    .sb-dropdown-menu a { gap: 9px; }
    .sb-dropdown-menu small { font-size: 10px; }
    .sb-category-icon { width: 32px; height: 36px; }
    .sb-mobile-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 22px; border-bottom: 1px solid var(--sb-border); }
    .sb-mobile-logo { font-size: 27px; }
    .sb-mobile-panel-header p { margin: 8px 0 0; color: var(--sb-text-muted); font-size: 12px; }
    .sb-mobile-close { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--sb-border); border-radius: 10px; background: var(--sb-bg-secondary); color: var(--sb-text); }
    .sb-mobile-panel-footer { display: flex; flex-direction: column; gap: 3px; margin-top: auto; padding: 22px 24px max(24px, env(safe-area-inset-bottom)); border-top: 1px solid var(--sb-border); }
    .sb-mobile-panel-footer .sb-dropdown-label { margin-left: 0; }
    .sb-mobile-panel-footer a { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 13px; color: var(--sb-text); }
    .sb-mobile-panel-footer .sb-mobile-cta { justify-content: space-between; padding: 12px 15px; border-radius: 9px; background: var(--sb-blue-600); color: white; margin-top: 14px; font-weight: 600; }
    .sb-mobile-panel-footer .sb-mobile-help { font-size: 11px; color: var(--sb-text-muted); justify-content: center; margin-top: 6px; }
    .sb-mobile-logout-form { margin-top: 14px; }
    .sb-mobile-logout-form button { width: 100%; min-height: 48px; padding: 12px 15px; border: 0; border-radius: 9px; background: var(--sb-blue-600); color: #fff; font: 600 13px var(--sb-font-body); }
    html.sb-menu-ready .sb-nav { position: fixed; top: 0; bottom: 0; left: 0; width: min(360px, calc(100vw - 32px)); height: 100dvh; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background: var(--sb-header-bg); z-index: 3; visibility: hidden; transform: translateX(-100%);  }
    html.sb-menu-ready .sb-nav.open { visibility: visible; transform: translateX(0); animation: sb-drawer-in .25s ease; box-shadow: 12px 0 50px #0003; }
    .sb-overlay:not([hidden]) { display: block; position: fixed; inset: 0; background: #06102180; backdrop-filter: blur(3px); z-index: 2; }
    body.sb-menu-open .sb-topbar { z-index: 999; }
}
@media (max-width: 575px) {
    .container { padding-inline: 16px; }
    .sb-topbar-actions { gap: 3px; }
    .sb-status-dot { display: none; }
    .sb-topbar-message { font-size: 9px; }
    .sb-lang-btn { gap: 5px; font-size: 10px !important; }
    .sb-header-inner { column-gap: 8px; padding-block: 12px; }
    .sb-logo-icon, .sb-logo-tagline { display: none; }
    .sb-logo-name { font-size: 22px; letter-spacing: -.8px; }
    .sb-header-actions { gap: 6px; }
    .sb-search-form { gap: 9px; padding-left: 13px; border-radius: 10px; }
    .sb-search-input { font-size: 16px; }
    .sb-search-input::placeholder { font-size: 12px; }
    .sb-search-submit { min-width: 44px; padding-inline: 13px; }
    .sb-search-submit > span { display: none; }
    .sb-profile-menu { right: -50px; width: min(270px, calc(100vw - 32px)); }
}
@keyframes sb-drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
    .sb-header, .sb-header *, .sb-topbar, .sb-topbar * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* =============================================
   FOOTER — Biso Zandora shopping, navigation and support
   ============================================= */
.sb-footer { --sb-footer-bg: #071633; --sb-footer-ink: #f5f7ff; --sb-footer-muted: #aebbd3; --sb-footer-line: #ffffff16; font-family: var(--sb-font-body); line-height: 1.6; }
.sb-footer a { text-decoration: none; }
.sb-footer a:focus-visible, .sb-footer summary:focus-visible { outline: 3px solid var(--sb-orange-400); outline-offset: 5px; border-radius: 4px; }
.sb-footer-shortcuts { background: var(--sb-bg-secondary); border-block: 1px solid var(--sb-border); }
.sb-footer-shortcut-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 28px 0; }
.sb-footer-shortcut-list li { min-width: 0; padding-inline: 22px; border-right: 1px solid var(--sb-border); }
.sb-footer-shortcut-list li:first-child { padding-left: 0; }
.sb-footer-shortcut-list li:last-child { padding-right: 0; border: 0; }
.sb-footer-shortcut-list a { display: flex; align-items: center; gap: 13px; min-height: 48px; color: var(--sb-text); }
.sb-footer-service-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 44px; color: var(--sb-blue-500); font-size: 22px; }
.sb-footer-shortcut-list strong { display: block; font-size: 12px; font-weight: 650; line-height: 1.5; }
.sb-footer-shortcut-list small { display: block; margin-top: 4px; color: var(--sb-text-muted); font-size: 11px; }
.sb-footer-shortcut-list a > .fa-chevron-right { margin-left: auto; font-size: 9px; color: var(--sb-text-muted); opacity: 0; transition: opacity .2s; }
.sb-footer-shortcut-list a:hover > .fa-chevron-right { opacity: 1; }
.sb-footer-shortcut-list a:hover strong { color: var(--sb-blue-500); }
.sb-footer-body { position: relative; background: radial-gradient(ellipse at 95% 0%, #16346a70 0, transparent 48%), var(--sb-footer-bg); color: var(--sb-footer-ink); }
.sb-footer-invitation { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-block: 52px 44px; border-bottom: 1px solid var(--sb-footer-line); }
.sb-footer-eyebrow { display: flex; align-items: center; gap: 9px; color: #b8c8e8; font-size: 10px; font-weight: 600; letter-spacing: 1.8px; }
.sb-footer-eyebrow > span { width: 6px; height: 6px; border-radius: 50%; background: var(--sb-orange-400); }
.sb-footer-invitation h2 { margin: 17px 0 13px; font-family: var(--sb-font-display); color: var(--sb-footer-ink); font-size: clamp(30px, 3vw, 42px); font-weight: 600; line-height: 1.15; letter-spacing: -1px; }
.sb-footer-invitation h2 > span { color: var(--sb-orange-400); }
.sb-footer-invitation p { margin: 0; color: var(--sb-footer-muted); font-size: 12px; }
.sb-footer-invitation-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; flex-shrink: 0; padding-right: 24px; }
.sb-footer-shop-link { display: flex; align-items: center; justify-content: space-between; gap: 36px; min-height: 54px; padding: 15px 23px; border: 1px solid transparent; border-radius: 10px; background: var(--sb-orange-400); color: #071633; font-size: 13px; font-weight: 700; transition: background .2s, transform .2s; }
.sb-footer-shop-link:hover { background: var(--sb-orange-300); color: #071633; transform: translateY(-2px); }
.sb-footer-offers-link { display: flex; align-items: center; gap: 8px; min-height: 44px; color: #c2cfe6; font-size: 11px; }
.sb-footer-offers-link:hover { color: white; }
.sb-footer-offers-link i { font-size: 10px; color: var(--sb-orange-300); }
.sb-footer-grid { display: grid; grid-template-columns: 1.45fr 1fr .85fr 1fr 1.15fr; gap: 34px; align-items: start; padding-block: 44px 40px; }
.sb-footer-grid > * { min-width: 0; }
.sb-footer-logo { display: inline-block; color: white; font: 800 43px/1.1 var(--sb-font-display); letter-spacing: -2px; }
.sb-footer-logo:hover { color: white; }
.sb-footer-logo > span { color: var(--sb-orange-400); }
.sb-footer-brand > p { max-width: 245px; margin: 17px 0 22px; color: var(--sb-footer-muted); font-size: 12px; line-height: 1.9; }
.sb-footer-brand-caption { display: flex; align-items: center; gap: 8px; color: #d0daec; font-size: 10px; }
.sb-footer-brand-caption > span { width: 16px; height: 2px; background: var(--sb-orange-400); }
.sb-footer-group > summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; }
.sb-footer-group > summary::-webkit-details-marker { display: none; }
.sb-footer-group h3 { margin: 0; color: var(--sb-footer-ink); font-size: 12px; font-weight: 650; line-height: 1.6; }
.sb-footer-group > summary > i { display: none; font-size: 10px; }
.sb-footer-group ul { margin: 15px 0 0; padding: 0; list-style: none; }
.sb-footer-group a { display: inline-flex; align-items: center; gap: 9px; min-height: 34px; color: var(--sb-footer-muted); font-size: 11px; transition: color .2s; }
.sb-footer-group a:hover { color: white; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--sb-orange-400); }
.sb-footer-group a > i { color: var(--sb-orange-300); font-size: 9px; }
.sb-footer-support { padding: 20px; border: 1px solid #ffffff1f; border-radius: 14px; background: #ffffff05; }
.sb-footer-support-icon { display: grid; place-items: center; width: 37px; height: 37px; margin-bottom: 16px; background: #ff9d3a12; border: 1px solid #ff9d3a30; border-radius: 10px; font-size: 19px; color: var(--sb-orange-300); }
.sb-footer-support h3 { color: white; font-size: 13px; line-height: 1.5; font-weight: 600; margin: 0 0 9px; }
.sb-footer-support p { color: var(--sb-footer-muted); font-size: 11px; line-height: 1.8; margin: 0 0 13px; }
.sb-footer-support a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; color: var(--sb-orange-300); font-size: 11px; font-weight: 600; }
.sb-footer-support a:hover { color: white; }
.sb-footer-support a > i { font-size: 10px; }
.sb-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 20px; border-top: 1px solid var(--sb-footer-line); }
.sb-footer-bottom > p { margin: 0; font-size: 10px; color: var(--sb-footer-muted); }
.sb-footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.sb-footer-legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sb-footer-muted); font-size: 10px; }
.sb-footer-legal a:hover { color: white; text-decoration: underline; text-underline-offset: 4px; }
.sb-footer-back-top { display: flex; align-items: center; gap: 12px; min-height: 44px; color: #d0daec; font-size: 10px; white-space: nowrap; }
.sb-footer-back-top > i { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #ffffff24; border-radius: 9px; font-size: 11px; transition: background .2s; }
.sb-footer-back-top:hover { color: white; }
.sb-footer-back-top:hover > i { background: #ffffff10; }
html.sb-dark .sb-footer { --sb-footer-bg: #080f20; }
html.sb-dark .sb-footer-service-icon, html.sb-dark .sb-footer-shortcut-list a:hover strong { color: var(--sb-blue-200); }
@media (min-width: 768px) {
    .sb-footer-ready .sb-footer-group > summary { cursor: default; }
}
@media (max-width: 1199px) {
    .sb-footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 26px; }
    .sb-footer-support { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; gap: 2px 16px; align-items: center; padding: 18px 22px; }
    .sb-footer-support-icon { grid-row: 1 / 3; margin: 0; }
    .sb-footer-support h3 { margin: 0; }
    .sb-footer-support p { grid-column: 2; margin: 0; }
    .sb-footer-support a { grid-column: 3; grid-row: 1 / 3; gap: 24px; }
    .sb-footer-shortcut-list li { padding-inline: 14px; }
    .sb-footer-shortcut-list a { gap: 8px; }
    .sb-footer-shortcut-list strong { font-size: 11px; }
    .sb-footer-shortcut-list a > .fa-chevron-right { display: none; }
    .sb-footer-invitation-actions { padding-right: 0; }
}
@media (max-width: 991px) {
    .sb-footer-shortcut-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .sb-footer-shortcut-list li { padding: 0; border: 0; }
    .sb-footer-shortcut-list strong { font-size: 12px; }
    .sb-footer-bottom { flex-wrap: wrap; gap: 6px 16px; }
    .sb-footer-legal { order: 3; width: 100%; }
}
@media (max-width: 767px) {
    .sb-footer-shortcut-list { padding-block: 22px; gap: 20px 14px; }
    .sb-footer-shortcut-list a { align-items: flex-start; gap: 9px; }
    .sb-footer-service-icon { width: 28px; height: 30px; font-size: 19px; }
    .sb-footer-shortcut-list strong { font-size: 11px; }
    .sb-footer-shortcut-list small { font-size: 10px; line-height: 1.6; }
    .sb-footer-invitation { display: block; padding-block: 34px 30px; }
    .sb-footer-invitation h2 { font-size: 33px; margin-top: 15px; }
    .sb-footer-invitation p { max-width: 320px; line-height: 1.8; }
    .sb-footer-eyebrow { font-size: 9px; letter-spacing: 1.4px; }
    .sb-footer-invitation-actions { align-items: stretch; margin-top: 23px; gap: 5px; }
    .sb-footer-shop-link { justify-content: space-between; }
    .sb-footer-offers-link { justify-content: center; }
    .sb-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 30px; }
    .sb-footer-brand { padding-bottom: 26px; }
    .sb-footer-logo { font-size: 38px; }
    .sb-footer-brand > p { max-width: 350px; margin: 12px 0 16px; }
    .sb-footer-group { border-top: 1px solid var(--sb-footer-line); }
    .sb-footer-group > summary { min-height: 58px; gap: 12px; }
    .sb-footer-group h3 { font-size: 13px; }
    .sb-footer-group > summary > i { display: block; color: var(--sb-footer-muted); transition: transform .2s; }
    .sb-footer-group[open] > summary > i { transform: rotate(45deg); }
    .sb-footer-group ul { margin: 0 0 17px; }
    .sb-footer-group a { min-height: 44px; font-size: 12px; }
    .sb-footer-support { display: block; margin-top: 14px; padding: 20px; }
    .sb-footer-support-icon { float: left; margin-right: 14px; margin-bottom: 12px; }
    .sb-footer-support h3 { margin-bottom: 6px; }
    .sb-footer-support p { font-size: 11px; }
    .sb-footer-support a { clear: both; margin-top: 8px; }
    .sb-footer-bottom { padding-block: 16px max(20px, env(safe-area-inset-bottom)); }
    .sb-footer-bottom > p { font-size: 9px; }
    .sb-footer-back-top { gap: 8px; }
    .sb-footer-back-top > span { display: none; }
    .sb-footer-back-top > i { width: 44px; height: 44px; }
    .sb-footer-legal { gap: 4px 20px; }
    .sb-footer-legal a { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
    .sb-footer *, .sb-footer *::before, .sb-footer *::after { animation: none !important; transition: none !important; }
}

/* =============================================
   HOME — Hero product carousel
   ============================================= */
.sb-home { overflow: hidden; background: var(--sb-bg); }
.sb-hero-section { padding: 34px 0 72px; }
.sb-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(360px, .7fr); min-height: 430px; overflow: hidden; border: 1px solid var(--sb-border); border-radius: 24px; background: var(--sb-header-bg); box-shadow: 0 24px 70px rgba(6, 21, 62, .14); }
.sb-hero-media { position: relative; min-height: 430px; background: #081b3f; }
.sb-hero-slides, .sb-hero-slide { position: absolute; inset: 0; }
.sb-hero-slide { overflow: hidden; opacity: 0; visibility: hidden; transform: scale(1.025); transition: opacity .65s ease, visibility .65s ease, transform 1.2s ease; }
.sb-hero-slide.is-active { opacity: 1; visibility: visible; transform: scale(1); }
.sb-hero-slide > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.sb-hero-image-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,12,34,.08) 15%, rgba(3,12,34,.18) 52%, rgba(3,12,34,.78) 100%), linear-gradient(0deg, rgba(3,12,34,.74), transparent 45%); }
.sb-hero-product-card { position: absolute; right: 46px; bottom: 82px; max-width: 280px; color: #fff; text-align: right; text-shadow: 0 2px 18px #030c2280; }
.sb-hero-product-category { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 10px; border: 1px solid #ffffff50; border-radius: 999px; background: #ffffff1c; backdrop-filter: blur(8px); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.sb-hero-product-card h2 { margin: 14px 0 6px; font-family: var(--sb-font-display); font-size: clamp(25px, 3vw, 38px); font-weight: 600; line-height: 1.08; letter-spacing: -.7px; }
.sb-hero-product-card p { margin: 0; color: #fff; font-size: 12px; }
.sb-hero-media-footer { position: absolute; right: 32px; bottom: 27px; left: 32px; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
.sb-hero-dots { display: flex; align-items: center; gap: 8px; }
.sb-hero-dots button { width: 28px; height: 4px; padding: 0; border: 0; border-radius: 99px; background: #ffffff60; cursor: pointer; transition: width .25s ease, background .25s ease; }
.sb-hero-dots button.is-active { width: 52px; background: var(--sb-orange-400); }
.sb-hero-dots button:focus-visible, .sb-hero-arrow:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.sb-hero-arrows { display: flex; gap: 8px; }
.sb-hero-arrow { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid #ffffff48; border-radius: 10px; background: #ffffff16; color: #fff; cursor: pointer; backdrop-filter: blur(8px); transition: background .2s ease, border-color .2s ease; }
.sb-hero-arrow:hover { border-color: #fff; background: #ffffff2e; }
.sb-hero-welcome { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 44px 48px; background: radial-gradient(circle at 0 100%, #ff9d3a33, transparent 42%), linear-gradient(145deg, #eef3ff 0%, #f8f9fc 60%, #fff5eb 100%); }
.sb-hero-eyebrow { display: block; color: var(--sb-blue-500); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; }
.sb-hero-welcome h1 { position: relative; z-index: 1; margin: 17px 0 13px; color: var(--sb-blue-800); font-family: var(--sb-font-display); font-size: clamp(31px, 3.1vw, 45px); font-weight: 600; line-height: 1.06; letter-spacing: -1.5px; }
.sb-hero-welcome h1 em { color: var(--sb-blue-500); font-style: normal; }
.sb-hero-welcome > p { position: relative; z-index: 1; max-width: 370px; margin: 0; color: var(--sb-gray-600); font-size: 12px; line-height: 1.7; }
.sb-hero-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.sb-hero-buy, .sb-hero-sell { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 44px; padding: 10px 15px; border-radius: 9px; font-size: 11px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.sb-hero-buy { background: var(--sb-blue-600); color: white; box-shadow: 0 8px 18px #0f2d8c2c; }
.sb-hero-buy:hover { background: var(--sb-blue-500); color: white; transform: translateY(-2px); box-shadow: 0 12px 22px #0f2d8c3d; }
.sb-hero-sell { border: 1px solid var(--sb-blue-200); background: #ffffff80; color: var(--sb-blue-600); }
.sb-hero-sell:hover { border-color: var(--sb-blue-500); background: #fff; color: var(--sb-blue-600); transform: translateY(-2px); }
.sb-hero-sell > i { color: var(--sb-orange-600); }
.sb-hero-note { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; margin-top: 31px; padding-top: 14px; border-top: 1px solid #0f2d8c18; }
.sb-hero-note-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; background: var(--sb-orange-100); color: var(--sb-orange-700); font-size: 13px; }
.sb-hero-note strong, .sb-hero-note small { display: block; }
.sb-hero-note strong { color: var(--sb-blue-800); font-size: 11px; }
.sb-hero-note small { margin-top: 3px; color: var(--sb-gray-500); font-size: 10px; }
.sb-hero-welcome-mark { position: absolute; right: 23px; bottom: 23px; color: #0f2d8c0a; font-family: var(--sb-font-display); font-size: 63px; font-weight: 800; letter-spacing: -4px; pointer-events: none; }
.sb-hero-welcome-mark > span { color: var(--sb-orange-500); }
html.sb-dark .sb-hero-welcome { background: radial-gradient(circle at 0 100%, #ff9d3a2a, transparent 42%), linear-gradient(145deg, #172644 0%, #121c31 68%, #2b211b 100%); }
html.sb-dark .sb-hero-welcome h1 { color: #f0f4ff; }
html.sb-dark .sb-hero-welcome h1 em { color: var(--sb-blue-200); }
html.sb-dark .sb-hero-welcome > p { color: #bac7db; }
html.sb-dark .sb-hero-sell { border-color: #6d8cd2; background: #0d1930b8; color: #d4e1ff; }
html.sb-dark .sb-hero-note { border-color: #ffffff1a; }
html.sb-dark .sb-hero-note strong { color: #edf3ff; }
html.sb-dark .sb-hero-welcome-mark { color: #ffffff08; }
@media (max-width: 1199px) {
    .sb-hero { grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr); }
    .sb-hero-welcome { padding-inline: 36px; }
    .sb-hero-product-card { right: 35px; }
}
@media (max-width: 991px) {
    .sb-hero-section { padding-block: 20px 48px; }
    .sb-hero { grid-template-columns: 1fr; min-height: 0; border-radius: 18px; }
    .sb-hero-media { min-height: 360px; }
    .sb-hero-welcome { min-height: 330px; padding: 34px 32px; }
    .sb-hero-product-card { right: 32px; bottom: 73px; max-width: 310px; }
    .sb-hero-product-card h2 { font-size: 34px; }
    .sb-hero-note { margin-top: 27px; }
}
@media (max-width: 575px) {
    .sb-hero-section { padding-top: 14px; }
    .sb-hero-media { min-height: 295px; }
    .sb-hero-media-footer { right: 18px; bottom: 17px; left: 18px; }
    .sb-hero-product-card { right: 20px; bottom: 68px; left: 20px; max-width: none; text-align: left; }
    .sb-hero-product-card h2 { max-width: 280px; margin-top: 10px; font-size: 29px; }
    .sb-hero-product-card p { font-size: 11px; }
    .sb-hero-dots button { width: 17px; }
    .sb-hero-dots button.is-active { width: 36px; }
    .sb-hero-arrow { width: 34px; height: 34px; }
    .sb-hero-welcome { min-height: 340px; padding: 28px 22px 25px; }
    .sb-hero-welcome h1 { margin-top: 14px; font-size: 32px; letter-spacing: -1px; }
    .sb-hero-welcome > p { font-size: 11px; line-height: 1.65; }
    .sb-hero-actions { flex-direction: column; align-items: stretch; margin-top: 18px; }
    .sb-hero-buy, .sb-hero-sell { width: 100%; min-height: 42px; }
    .sb-hero-note { margin-top: 18px; padding-top: 11px; }
    .sb-hero-welcome-mark { right: 14px; bottom: 17px; font-size: 45px; }
}
@media (prefers-reduced-motion: reduce) {
    .sb-hero *, .sb-hero *::before, .sb-hero *::after { transition: none !important; animation: none !important; }
}

/* =============================================
   AUTH — Login and account creation
   ============================================= */
.sb-auth-page { padding: 44px 0 78px; background: linear-gradient(180deg, var(--sb-bg-secondary) 0%, var(--sb-bg) 100%); }
.sb-auth-layout { display: block; max-width: 560px; min-height: 0; margin: 0 auto; overflow: hidden; border: 1px solid var(--sb-border); border-radius: 22px; background: var(--sb-header-bg); box-shadow: 0 22px 65px #06153e16; }

/* Icon badge at top of card */
.sb-auth-icon-badge { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 18px; border-radius: 16px; background: linear-gradient(135deg, var(--sb-blue-500), var(--sb-blue-700)); color: #fff; font-size: 22px; box-shadow: 0 8px 24px #0f2d8c30; }
.sb-auth-icon-badge-signup { background: linear-gradient(135deg, var(--sb-orange-400), var(--sb-orange-600)); box-shadow: 0 8px 24px #d9730030; }

.sb-auth-card-label { display: block; margin-bottom: 2px; color: var(--sb-orange-600); font-size: 10px; font-weight: 700; letter-spacing: 1.6px; }
.sb-auth-card { max-width: none; padding: 50px 56px; }
.sb-auth-card-heading h2 { margin: 10px 0 9px; color: var(--sb-blue-800); font-family: var(--sb-font-display); font-size: 31px; font-weight: 600; letter-spacing: -.8px; }
.sb-auth-card-heading p { margin: 0; color: var(--sb-text-muted); font-size: 12px; line-height: 1.7; }
.sb-auth-notice { display: flex; align-items: flex-start; gap: 9px; margin-top: 22px; padding: 11px 13px; border: 1px solid var(--sb-blue-100); border-radius: 8px; background: var(--sb-blue-50); color: var(--sb-blue-700); font-size: 11px; line-height: 1.55; }
.sb-auth-notice i { margin-top: 2px; color: var(--sb-blue-500); }
.sb-auth-form { display: grid; gap: 18px; margin-top: 0; }

/* Social auth buttons */
.sb-social-auth { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 27px; }
.sb-social-auth-link { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 11px 13px; border: 1px solid var(--sb-border); border-radius: 10px; background: var(--sb-bg); color: var(--sb-gray-700); font-size: 12px; font-weight: 600; transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.sb-social-auth-link:hover { border-color: var(--sb-blue-200); background: var(--sb-bg-secondary); color: var(--sb-blue-700); transform: translateY(-2px); box-shadow: 0 6px 16px #06153e10; }

/* Social icon wraps — circle containers */
.sb-social-icon-wrap { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; }
.sb-social-icon-google { background: #f1f3f8; border: 1px solid #e2e5ed; }
.sb-social-icon-facebook { background: #1877F2; border: 1px solid #1877F2; border-radius: 8px; }

html.sb-dark .sb-social-icon-google { background: #232a3a; border-color: #3a4050; }
html.sb-dark .sb-social-icon-facebook { background: #1877F2; border-color: #1877F2; }

/* Form fields */
.sb-form-fields-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sb-form-field { display: grid; gap: 7px; }
.sb-form-field label, .sb-form-label-row label { color: var(--sb-gray-700); font-size: 12px; font-weight: 600; }
.sb-form-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sb-form-label-row a { color: var(--sb-blue-500); font-size: 11px; font-weight: 500; }
.sb-form-label-row a:hover { color: var(--sb-orange-600); text-decoration: underline; text-underline-offset: 3px; }

/* Input wraps */
.sb-input-wrap { position: relative; display: flex; align-items: center; min-height: 50px; border: 1.5px solid var(--sb-border); border-radius: 10px; background: var(--sb-bg-secondary); transition: border-color .25s, box-shadow .25s, background .25s; }
.sb-input-wrap:focus-within { border-color: var(--sb-blue-400); background: var(--sb-header-bg); box-shadow: 0 0 0 4px #3458f512; }
.sb-input-wrap > i { width: 46px; flex-shrink: 0; color: var(--sb-gray-400); font-size: 15px; text-align: center; transition: color .25s; }
.sb-input-wrap:focus-within > i { color: var(--sb-blue-500); }
.sb-input-wrap input { width: 100%; min-width: 0; height: 47px; padding: 0 14px 0 0; border: 0; outline: 0; background: transparent; color: var(--sb-text); font: 13px/1.4 var(--sb-font-body); }
.sb-input-wrap input::placeholder { color: var(--sb-gray-400); font-size: 12px; }

/* Password toggle */
.sb-password-toggle { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 8px; background: transparent; color: var(--sb-gray-400); cursor: pointer; transition: color .2s, background .2s; }
.sb-password-toggle:hover { color: var(--sb-blue-500); background: var(--sb-blue-50); }
html.sb-dark .sb-password-toggle:hover { background: #3458f518; }

/* Password strength meter */
.sb-password-strength { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.sb-strength-bars { display: flex; gap: 4px; flex: 1; }
.sb-strength-bar { height: 4px; flex: 1; border-radius: 4px; background: var(--sb-border); transition: background .3s ease; }
.sb-strength-label { font-size: 10px; font-weight: 600; color: var(--sb-gray-400); white-space: nowrap; transition: color .3s; }

/* Checkbox */
.sb-check-row { display: flex; align-items: center; gap: 10px; color: var(--sb-gray-600); font-size: 12px; line-height: 1.55; cursor: pointer; }
.sb-check-row input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sb-check-box { position: relative; width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid var(--sb-gray-300); border-radius: 5px; background: var(--sb-bg); transition: border-color .2s, background .2s, box-shadow .2s; }
.sb-check-row input:checked + .sb-check-box { border-color: var(--sb-blue-500); background: var(--sb-blue-500); }
.sb-check-row input:checked + .sb-check-box::after { content: ''; position: absolute; top: 3px; left: 5.5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sb-check-row input:focus-visible + .sb-check-box { outline: 3px solid #3458f54d; outline-offset: 2px; }
.sb-check-row a { color: var(--sb-blue-500); font-weight: 600; }
.sb-check-row a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Submit button */
.sb-auth-submit { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; margin-top: 4px; padding: 14px 20px; border: 0; border-radius: 10px; background: linear-gradient(135deg, var(--sb-blue-500), var(--sb-blue-700)); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 9px 22px #0f2d8c28; transition: background .2s, transform .2s, box-shadow .2s; }
.sb-auth-submit:hover { background: linear-gradient(135deg, var(--sb-blue-400), var(--sb-blue-600)); color: #fff; transform: translateY(-2px); box-shadow: 0 13px 28px #0f2d8c36; }
.sb-auth-submit i { font-size: 13px; }

/* Divider */
.sb-auth-divider { display: flex; align-items: center; gap: 13px; margin: 23px 0; color: var(--sb-gray-400); font-size: 9px; font-weight: 600; letter-spacing: .8px; white-space: nowrap; }
.sb-auth-divider::before, .sb-auth-divider::after { height: 1px; flex: 1; content: ''; background: var(--sb-border); }

/* Switch link */
.sb-auth-switch { margin: 26px 0 0; color: var(--sb-gray-500); font-size: 12px; text-align: center; }
.sb-auth-switch a { color: var(--sb-blue-500); font-weight: 700; }
.sb-auth-switch a:hover { color: var(--sb-orange-600); text-decoration: underline; text-underline-offset: 3px; }

.sb-auth-page-signup .sb-auth-card { padding-block: 43px; }

/* Dark mode auth */
html.sb-dark .sb-auth-page { background: linear-gradient(180deg, #111a2b 0%, var(--sb-bg) 100%); }
html.sb-dark .sb-auth-card-heading h2 { color: #eff3ff; }
html.sb-dark .sb-form-field label, html.sb-dark .sb-form-label-row label { color: #d1daeb; }
html.sb-dark .sb-auth-notice { border-color: #3458f54d; background: #3458f514; color: #cbd9ff; }
html.sb-dark .sb-check-row { color: #b7c4db; }
html.sb-dark .sb-social-auth-link { color: #d2dbea; }
html.sb-dark .sb-social-auth-link:hover { border-color: var(--sb-blue-300); background: #ffffff08; color: #fff; box-shadow: 0 6px 16px #0003; }
html.sb-dark .sb-check-box { border-color: #52617d; }
html.sb-dark .sb-input-wrap:focus-within > i { color: var(--sb-blue-300); }
html.sb-dark .sb-input-wrap:focus-within { box-shadow: 0 0 0 4px #3458f51a; }
html.sb-dark .sb-auth-submit { background: linear-gradient(135deg, var(--sb-blue-400), var(--sb-blue-600)); }

@media (max-width: 900px) {
    .sb-auth-card { padding-inline: 39px; }
}
@media (max-width: 767px) {
    .sb-auth-page { padding-block: 22px 48px; }
    .sb-auth-layout { display: block; min-height: 0; border-radius: 17px; }
    .sb-auth-card, .sb-auth-page-signup .sb-auth-card { max-width: none; padding: 34px 25px 32px; }
    .sb-auth-card-heading h2 { font-size: 28px; }
    .sb-auth-icon-badge { width: 46px; height: 46px; font-size: 19px; border-radius: 13px; }
    .sb-form-fields-two { gap: 9px; }
    .sb-social-auth { grid-template-columns: 1fr; }
}
@media (max-width: 390px) {
    .sb-auth-card, .sb-auth-page-signup .sb-auth-card { padding-inline: 19px; }
}

/* =============================================
   BOUTIQUE & CATEGORY NAVIGATION
   ============================================= */

.sb-boutique-page {
    background: var(--sb-bg);
    min-height: 100vh;
    padding-bottom: 70px;
}

/* ─── Breadcrumbs ─── */
.sb-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--sb-text-muted);
    margin-bottom: 16px;
}
.sb-breadcrumb a {
    color: var(--sb-text-muted);
    transition: color .2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.sb-breadcrumb a:hover {
    color: var(--sb-blue-500);
}
.sb-breadcrumb-sep {
    opacity: 0.5;
}
.sb-breadcrumb span[aria-current="page"] {
    color: var(--sb-blue-500);
    font-weight: 600;
}

/* ─── Shop Hero Banner ─── */
.sb-shop-hero {
    position: relative;
    padding: 44px 0 38px;
    background: linear-gradient(135deg, rgba(27, 60, 180, 0.04) 0%, rgba(255, 136, 0, 0.04) 50%, rgba(27, 60, 180, 0.02) 100%);
    border-bottom: 1px solid var(--sb-border);
    overflow: hidden;
}
.sb-shop-hero-inner {
    display: grid;
    grid-template-columns: 1.35fr 0.85fr;
    align-items: center;
    gap: 40px;
}
.sb-shop-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: var(--sb-radius-full);
    background: var(--sb-orange-50);
    border: 1px solid var(--sb-orange-200);
    color: var(--sb-orange-600);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    margin-bottom: 14px;
}
.sb-shop-hero-badge i {
    font-size: 11px;
}
.sb-shop-hero-title {
    font-family: var(--sb-font-display);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.18;
    color: var(--sb-blue-800);
    letter-spacing: -1px;
    margin: 0 0 14px;
}
.sb-shop-hero-title em {
    font-style: normal;
    background: linear-gradient(135deg, var(--sb-blue-500), var(--sb-orange-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sb-shop-hero-subtitle {
    font-size: 15px;
    line-height: 1.65;
    color: var(--sb-text-muted);
    max-width: 620px;
    margin: 0 0 24px;
}
.sb-shop-stats {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 12px 20px;
    background: var(--sb-header-bg);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-sm);
}
.sb-stat-item {
    display: flex;
    flex-direction: column;
}
.sb-stat-num {
    font-family: var(--sb-font-display);
    font-size: 20px;
    font-weight: 800;
    color: var(--sb-blue-600);
    line-height: 1.1;
}
.sb-stat-label {
    font-size: 11px;
    color: var(--sb-text-muted);
    font-weight: 500;
}
.sb-stat-sep {
    width: 1px;
    height: 28px;
    background: var(--sb-border);
}

/* Floating visual badges in hero */
.sb-shop-hero-visual {
    position: relative;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sb-hero-visual-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    background: var(--sb-header-bg);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-full);
    box-shadow: 0 8px 24px rgba(6, 21, 62, 0.08);
    font-size: 13px;
    font-weight: 600;
    color: var(--sb-text);
    transition: transform .3s ease;
    animation: sbFloat 4s ease-in-out infinite alternate;
}
.sb-hero-visual-card i {
    font-size: 14px;
    color: var(--sb-blue-500);
}
.sb-card-float-1 { top: 12%; left: 8%; animation-delay: 0s; }
.sb-card-float-1 i { color: var(--sb-blue-500); }
.sb-card-float-2 { top: 4%; right: 12%; animation-delay: 0.8s; }
.sb-card-float-2 i { color: var(--sb-orange-500); }
.sb-card-float-3 { top: 48%; left: 24%; animation-delay: 1.4s; }
.sb-card-float-3 i { color: #E056FD; }
.sb-card-float-4 { bottom: 8%; left: 4%; animation-delay: 0.4s; }
.sb-card-float-4 i { color: #0FB9B1; }
.sb-card-float-5 { bottom: 14%; right: 10%; animation-delay: 1.8s; }
.sb-card-float-5 i { color: var(--sb-orange-600); }

@keyframes sbFloat {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-8px); }
}

/* ─── Sticky Category Navigation Bar ─── */
.sb-category-nav-wrapper {
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--sb-border);
    box-shadow: 0 4px 20px rgba(6, 21, 62, 0.05);
    transition: background .3s, border-color .3s;
}
.sb-category-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 64px;
    padding: 8px 0;
}

/* Category Pills (Horizontal Scroller) */
.sb-category-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
}
.sb-category-pills::-webkit-scrollbar {
    display: none;
}
.sb-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--sb-radius-full);
    border: 1px solid var(--sb-border);
    background: var(--sb-bg);
    color: var(--sb-text);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all .25s var(--sb-ease);
    user-select: none;
    flex-shrink: 0;
}
.sb-cat-pill-icon {
    display: grid;
    place-items: center;
    font-size: 12px;
    color: var(--sb-blue-500);
    transition: color .25s;
}
.sb-cat-pill-count {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 99px;
    background: var(--sb-bg-secondary);
    border: 1px solid var(--sb-border);
    color: var(--sb-text-muted);
    font-size: 11px;
    font-weight: 700;
    transition: all .25s;
}
.sb-cat-pill:hover {
    border-color: var(--sb-blue-300);
    background: var(--sb-blue-50);
    color: var(--sb-blue-700);
    transform: translateY(-1px);
}
.sb-cat-pill:hover .sb-cat-pill-icon {
    color: var(--sb-blue-600);
}

/* Active Category Pill */
.sb-cat-pill.is-active {
    background: linear-gradient(135deg, var(--sb-blue-500) 0%, var(--sb-blue-700) 100%);
    border-color: var(--sb-blue-600);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(27, 60, 180, 0.35);
}
.sb-cat-pill.is-active .sb-cat-pill-icon {
    color: #ffffff;
}
.sb-cat-pill.is-active .sb-cat-pill-count {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

/* Category Nav Tools (Search & Sort) */
.sb-category-nav-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.sb-shop-search-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 220px;
    height: 38px;
    background: var(--sb-bg-secondary);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-full);
    padding: 0 12px;
    transition: all .2s;
}
.sb-shop-search-box:focus-within {
    width: 260px;
    border-color: var(--sb-blue-400);
    background: var(--sb-header-bg);
    box-shadow: 0 0 0 3px rgba(52, 88, 245, 0.12);
}
.sb-shop-search-icon {
    font-size: 13px;
    color: var(--sb-text-muted);
    margin-right: 8px;
}
.sb-shop-search-input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--sb-text);
    font-size: 12px;
    font-family: inherit;
}
.sb-shop-search-input::placeholder {
    color: var(--sb-text-muted);
}
.sb-shop-search-clear {
    background: transparent;
    border: 0;
    padding: 4px;
    cursor: pointer;
    color: var(--sb-text-muted);
    font-size: 11px;
    border-radius: 50%;
}
.sb-shop-search-clear:hover {
    color: var(--sb-blue-600);
}

.sb-shop-sort-box {
    position: relative;
    display: flex;
    align-items: center;
    height: 38px;
    background: var(--sb-bg-secondary);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-full);
    padding: 0 12px 0 10px;
}
.sb-sort-icon {
    font-size: 12px;
    color: var(--sb-text-muted);
    margin-right: 6px;
}
.sb-shop-sort-select {
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--sb-text);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
}

/* ─── Filter Status Banner ─── */
.sb-filter-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    margin: 24px 0 10px;
    background: var(--sb-blue-50);
    border: 1px solid var(--sb-blue-100);
    border-radius: var(--sb-radius-md);
    color: var(--sb-blue-700);
    font-size: 13px;
}
.sb-filter-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--sb-blue-300);
    color: var(--sb-blue-700);
    padding: 5px 12px;
    border-radius: var(--sb-radius-full);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.sb-filter-reset-btn:hover {
    background: var(--sb-blue-600);
    color: #fff;
    border-color: var(--sb-blue-600);
}

/* ─── Empty Catalog State ─── */
.sb-empty-catalog {
    padding: 60px 20px;
    text-align: center;
    background: var(--sb-bg-secondary);
    border: 1.5px dashed var(--sb-border);
    border-radius: var(--sb-radius-lg);
    margin: 36px 0;
}
.sb-empty-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--sb-blue-50);
    color: var(--sb-blue-500);
    display: grid;
    place-items: center;
    font-size: 26px;
}
.sb-empty-catalog h3 {
    font-family: var(--sb-font-display);
    font-size: 22px;
    color: var(--sb-text);
    margin: 0 0 8px;
}
.sb-empty-catalog p {
    color: var(--sb-text-muted);
    font-size: 14px;
    max-width: 440px;
    margin: 0 auto 20px;
}
.sb-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--sb-radius-full);
    background: linear-gradient(135deg, var(--sb-blue-500), var(--sb-blue-700));
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(27, 60, 180, 0.25);
    transition: all .2s;
}
.sb-btn-primary:hover {
    background: linear-gradient(135deg, var(--sb-blue-400), var(--sb-blue-600));
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(27, 60, 180, 0.35);
}

/* ─── Category Sections ─── */
.sb-category-section {
    padding: 44px 0 16px;
    border-bottom: 1px solid var(--sb-border);
    scroll-margin-top: 80px;
    transition: opacity .3s ease;
}
.sb-category-section:last-of-type {
    border-bottom: 0;
}

/* Section Header */
.sb-cat-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}
.sb-cat-header-main {
    display: flex;
    align-items: center;
    gap: 16px;
}
.sb-cat-icon-badge {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--cat-accent, var(--sb-blue-500));
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 20px;
    box-shadow: 0 8px 20px rgba(6, 21, 62, 0.12);
    flex-shrink: 0;
}
.sb-cat-header-titles {
    display: flex;
    flex-direction: column;
}
.sb-cat-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--sb-orange-600);
    margin-bottom: 2px;
}
.sb-cat-title {
    font-family: var(--sb-font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--sb-blue-800);
    margin: 0;
    letter-spacing: -0.5px;
}
.sb-cat-subtitle {
    font-size: 13px;
    color: var(--sb-text-muted);
    margin: 4px 0 0;
}

.sb-cat-header-action {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sb-cat-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--sb-radius-full);
    background: var(--sb-bg-secondary);
    border: 1px solid var(--sb-border);
    color: var(--sb-text-muted);
    font-size: 12px;
}
.sb-cat-count-badge strong {
    color: var(--sb-text);
}
.sb-cat-focus-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: transparent;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-full);
    color: var(--sb-blue-500);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.sb-cat-focus-btn:hover {
    background: var(--sb-blue-50);
    border-color: var(--sb-blue-300);
    color: var(--sb-blue-700);
}
.sb-cat-focus-btn i {
    font-size: 11px;
    transition: transform .2s;
}
.sb-cat-focus-btn:hover i {
    transform: translateX(3px);
}

/* ─── Product Card Grid ─── */
.sb-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

/* Single Product Card */
.sb-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--sb-header-bg);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg);
    overflow: hidden;
    transition: transform .3s var(--sb-ease), box-shadow .3s var(--sb-ease), border-color .3s;
}
.sb-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(6, 21, 62, 0.09);
    border-color: var(--sb-blue-200);
}

/* Media area */
.sb-product-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--sb-bg-secondary);
}
.sb-product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.sb-product-card:hover .sb-product-img {
    transform: scale(1.06);
}

/* Badges */
.sb-product-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    border-radius: var(--sb-radius-full);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 2;
}
.sb-badge-discount {
    background: linear-gradient(135deg, #FF4757, #FF6B81);
}
.sb-badge-hot {
    background: linear-gradient(135deg, var(--sb-orange-500), var(--sb-orange-600));
}
.sb-badge-new {
    background: linear-gradient(135deg, var(--sb-blue-400), var(--sb-blue-600));
}
.sb-badge-featured {
    background: linear-gradient(135deg, #2ED573, #10AC84);
}

/* Quick Wishlist Overlay */
.sb-product-actions-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
}
.sb-quick-wishlist {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(0,0,0,0.06);
    color: var(--sb-gray-500);
    display: grid;
    place-items: center;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: all .2s;
}
.sb-quick-wishlist:hover {
    color: #FF4757;
    background: #fff;
    transform: scale(1.1);
}
.sb-quick-wishlist.is-liked {
    color: #FF4757;
    background: #fff;
}
.sb-quick-wishlist.is-liked i {
    animation: sbHeartbeat .35s ease;
}
@keyframes sbHeartbeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* Card Body */
.sb-product-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 18px 18px;
}
.sb-product-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.sb-product-cat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--sb-orange-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sb-product-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #FFA502;
}
.sb-rating-score {
    font-weight: 700;
    color: var(--sb-text);
}
.sb-reviews-count {
    color: var(--sb-text-muted);
}
.sb-product-title {
    font-family: var(--sb-font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--sb-text);
    margin: 0 0 6px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sb-product-desc {
    font-size: 12px;
    line-height: 1.5;
    color: var(--sb-text-muted);
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* Card Footer (Price + Add to Cart) */
.sb-product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--sb-border);
    margin-top: auto;
}
.sb-product-price-block {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.sb-price-current {
    font-family: var(--sb-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--sb-blue-600);
}
.sb-price-old {
    font-size: 12px;
    color: var(--sb-text-muted);
    text-decoration: line-through;
}

/* Add Cart Button */
.sb-add-cart-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--sb-radius-full);
    background: linear-gradient(135deg, var(--sb-blue-500), var(--sb-blue-700));
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(27, 60, 180, 0.2);
    transition: all .2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.sb-add-cart-btn:hover {
    background: linear-gradient(135deg, var(--sb-orange-500), var(--sb-orange-600));
    box-shadow: 0 6px 14px rgba(255, 136, 0, 0.3);
    transform: translateY(-1px);
}
.sb-add-cart-btn.is-added {
    background: #2ED573 !important;
    box-shadow: 0 4px 12px rgba(46, 213, 115, 0.35) !important;
}

/* ─── Cart Bump Animation ─── */
.sb-badge-bump {
    animation: sbBadgeBump .35s ease-out;
}
@keyframes sbBadgeBump {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* ─── Floating Toast Notification ─── */
.sb-toast {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    background: var(--sb-header-bg);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-md);
    box-shadow: 0 16px 40px rgba(6, 21, 62, 0.16);
    color: var(--sb-text);
    font-size: 13px;
    transform: translateY(100px);
    opacity: 0;
    transition: transform .35s var(--sb-ease), opacity .35s var(--sb-ease);
    max-width: 380px;
}
.sb-toast.is-visible {
    transform: translateY(0);
    opacity: 1;
}
.sb-toast-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #2ED573;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 14px;
    flex-shrink: 0;
}
.sb-toast-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sb-toast-content strong {
    font-size: 13px;
    color: var(--sb-text);
}
.sb-toast-content span {
    font-size: 11px;
    color: var(--sb-text-muted);
}
.sb-toast-link {
    margin-left: 6px;
    padding: 6px 12px;
    border-radius: var(--sb-radius-full);
    background: var(--sb-blue-50);
    color: var(--sb-blue-600);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    transition: all .2s;
}
.sb-toast-link:hover {
    background: var(--sb-blue-500);
    color: #fff;
}

/* ─── Dark Mode Specifics ─── */
html.sb-dark .sb-shop-hero {
    background: linear-gradient(135deg, rgba(52, 88, 245, 0.08) 0%, rgba(255, 136, 0, 0.06) 50%, rgba(15, 18, 25, 1) 100%);
}
html.sb-dark .sb-shop-hero-title {
    color: #eff3ff;
}
html.sb-dark .sb-shop-stats {
    background: #171C28;
    border-color: var(--sb-border);
}
html.sb-dark .sb-stat-num {
    color: var(--sb-blue-300);
}
html.sb-dark .sb-hero-visual-card {
    background: #171C28;
    border-color: var(--sb-border);
}
html.sb-dark .sb-category-nav-wrapper {
    background: rgba(19, 23, 34, 0.94);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
html.sb-dark .sb-cat-pill {
    background: #171C28;
    border-color: var(--sb-border);
    color: #cbd5e1;
}
html.sb-dark .sb-cat-pill:hover {
    background: #202738;
    border-color: var(--sb-blue-400);
    color: #fff;
}
html.sb-dark .sb-cat-pill.is-active {
    background: linear-gradient(135deg, var(--sb-blue-400), var(--sb-blue-600));
    color: #fff;
}
html.sb-dark .sb-cat-title {
    color: #eff3ff;
}
html.sb-dark .sb-product-card {
    background: #171C28;
}
html.sb-dark .sb-quick-wishlist {
    background: rgba(23, 28, 40, 0.85);
    border-color: var(--sb-border);
    color: #94a3b8;
}
html.sb-dark .sb-quick-wishlist:hover,
html.sb-dark .sb-quick-wishlist.is-liked {
    background: #1f2738;
}
html.sb-dark .sb-price-current {
    color: var(--sb-blue-300);
}
html.sb-dark .sb-filter-status {
    background: #172340;
    border-color: #243560;
    color: #cbd5e1;
}
html.sb-dark .sb-toast {
    background: #171C28;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
html.sb-dark .sb-toast-link {
    background: #243048;
    color: #93c5fd;
}

/* ─── Responsive Breakpoints ─── */
@media (max-width: 1200px) {
    .sb-products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
}

@media (max-width: 991px) {
    .sb-boutique-page .sb-header {
        position: relative;
    }
    .sb-category-nav-wrapper {
        position: sticky;
        top: 0;
        z-index: 995;
    }
    .sb-shop-hero-inner {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .sb-shop-hero-visual {
        display: none;
    }
    .sb-shop-hero-title {
        font-size: 28px;
    }
    .sb-category-nav-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        min-height: auto;
        padding: 8px 0;
    }
    .sb-category-nav-tools {
        display: flex;
        flex-direction: row;
        gap: 8px;
        width: 100%;
    }
    .sb-shop-search-box {
        flex: 1.2;
        height: 38px;
        width: auto;
    }
    .sb-shop-search-box:focus-within {
        width: auto;
    }
    .sb-shop-sort-box {
        flex: 1;
        height: 38px;
    }
    .sb-shop-sort-select {
        font-size: 11px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .container,
    .sb-boutique-page .container {
        padding-inline: 14px;
    }
    .sb-breadcrumb {
        font-size: 11px;
        white-space: nowrap;
        overflow-x: auto;
        max-width: 100%;
        padding-bottom: 3px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .sb-breadcrumb::-webkit-scrollbar { display: none; }
    .sb-shop-hero {
        padding: 20px 0 16px;
    }
    .sb-shop-hero-badge {
        padding: 4px 10px;
        font-size: 10px;
        margin-bottom: 10px;
    }
    .sb-shop-hero-title {
        font-size: 24px;
        letter-spacing: -0.5px;
        margin-bottom: 8px;
    }
    .sb-shop-hero-subtitle {
        font-size: 12.5px;
        line-height: 1.5;
        margin-bottom: 16px;
    }
    .sb-shop-stats {
        width: 100%;
        justify-content: space-around;
        padding: 8px 12px;
        gap: 10px;
    }
    .sb-stat-num {
        font-size: 17px;
    }
    .sb-stat-label {
        font-size: 9.5px;
    }
    .sb-category-pills {
        gap: 6px;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
    }
    .sb-cat-pill {
        padding: 6px 12px;
        font-size: 12px;
        gap: 6px;
    }
    .sb-cat-pill-count {
        font-size: 10px;
        padding: 1px 5px;
    }
    /* Grille par deux sur mobile */
    .sb-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
    }
    .sb-product-card {
        border-radius: 14px;
    }
    .sb-product-media {
        aspect-ratio: 1 / 1;
    }
    .sb-cat-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 14px;
    }
    .sb-cat-icon-badge {
        width: 38px;
        height: 38px;
        font-size: 16px;
        border-radius: 10px;
    }
    .sb-cat-title {
        font-size: 20px;
    }
    .sb-cat-subtitle {
        font-size: 11.5px;
    }
    .sb-cat-header-action {
        width: 100%;
        justify-content: space-between;
    }
    .sb-cat-count-badge {
        padding: 4px 8px;
        font-size: 11px;
    }
    .sb-cat-focus-btn {
        padding: 5px 10px;
        font-size: 11px;
    }
    .sb-product-body {
        padding: 9px 8px 10px;
    }
    .sb-product-title {
        font-size: 12.5px;
        line-height: 1.25;
        min-height: 2.5em;
        margin-bottom: 3px;
    }
    .sb-product-desc {
        display: none;
    }
    .sb-product-footer {
        padding-top: 6px;
        gap: 4px;
    }
    .sb-price-current {
        font-size: 14px;
    }
    .sb-price-old {
        font-size: 10.5px;
    }
    .sb-add-cart-btn {
        padding: 5px 8px;
        font-size: 10.5px;
        gap: 3px;
    }
    .sb-toast {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
        padding: 12px 14px;
    }
}

@media (max-width: 480px) {
    .container,
    .sb-boutique-page .container {
        padding-inline: 10px;
    }
    .sb-shop-hero-title {
        font-size: 22px;
    }
    .sb-category-nav-tools {
        flex-direction: row;
        gap: 6px;
    }
    .sb-shop-search-input {
        font-size: 12px;
    }
    .sb-shop-sort-select {
        font-size: 10.5px;
    }
    .sb-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px;
    }
    .sb-product-card {
        border-radius: 12px;
    }
    .sb-product-badge {
        top: 5px;
        left: 5px;
        font-size: 9px;
        padding: 2px 5px;
        border-radius: 4px;
    }
    .sb-quick-wishlist {
        top: 5px;
        right: 5px;
        width: 26px;
        height: 26px;
        font-size: 10.5px;
    }
    .sb-product-body {
        padding: 7px 7px 9px;
    }
    .sb-product-cat-label {
        font-size: 8.5px;
    }
    .sb-product-rating {
        font-size: 9px;
        gap: 2px;
    }
    .sb-reviews-count {
        display: none;
    }
    .sb-product-title {
        font-size: 11.5px;
        line-height: 1.25;
        min-height: 2.5em;
        margin-bottom: 3px;
    }
    .sb-price-current {
        font-size: 13px;
    }
    .sb-price-old {
        font-size: 9.5px;
    }
    .sb-add-cart-btn {
        padding: 4px 7px;
        font-size: 10px;
        gap: 2px;
    }
    .sb-add-cart-btn i {
        font-size: 9px;
    }
}

/* =============================================
   ESPACE COMPTE — Mon Profil, Commandes, Favoris
   ============================================= */

.sb-account-page {
    background: var(--sb-bg);
    min-height: 100vh;
    padding: 24px 0 70px;
}

.sb-account-layout {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 32px;
    align-items: start;
    margin-top: 8px;
}

/* ─── Sidebar Account Summary ─── */
.sb-account-sidebar {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sb-user-summary-card {
    background: var(--sb-header-bg);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg);
    padding: 24px 20px;
    text-align: center;
    box-shadow: var(--sb-shadow-sm);
}

.sb-user-avatar-wrap {
    position: relative;
    width: 86px;
    height: 86px;
    margin: 0 auto 14px;
}

.sb-user-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--sb-blue-500);
    box-shadow: 0 4px 14px rgba(27, 60, 180, 0.2);
}

.sb-avatar-edit-btn {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sb-orange-500);
    color: #fff;
    border: 2px solid #fff;
    display: grid;
    place-items: center;
    font-size: 11px;
    cursor: pointer;
    box-shadow: var(--sb-shadow-sm);
    transition: transform .2s, background .2s;
}

.sb-avatar-edit-btn:hover {
    background: var(--sb-orange-600);
    transform: scale(1.1);
}

.sb-user-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: var(--sb-blue-50);
    border: 1px solid var(--sb-blue-200);
    color: var(--sb-blue-600);
    border-radius: var(--sb-radius-full);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.sb-account-logout-form { margin: 0; }
.sb-account-logout-form .sb-account-nav-link { width: 100%; border: 0; font-family: inherit; cursor: pointer; text-align: left; }

.sb-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    padding: 13px 15px;
    border: 1px solid;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.55;
}
.sb-alert-success { border-color: #9be4bc; background: #edfdf4; color: #17633a; }
.sb-alert-error { border-color: #fecaca; background: #fff4f4; color: #a62323; }
.sb-auth-errors { margin-top: 20px; }
.sb-auth-errors ul { margin: 0; padding-left: 18px; }
html.sb-dark .sb-alert-success { border-color: #1f6842; background: #123524; color: #b7f4d1; }
html.sb-dark .sb-alert-error { border-color: #7f3030; background: #3d1d22; color: #fecaca; }

.sb-user-name {
    font-family: var(--sb-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--sb-text);
    margin: 0 0 4px;
}

.sb-user-email {
    display: block;
    font-size: 12px;
    color: var(--sb-text-muted);
    word-break: break-all;
    margin-bottom: 8px;
}

.sb-user-joined {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--sb-text-muted);
}

/* ─── Sidebar Navigation Menu ─── */
.sb-account-nav {
    background: var(--sb-header-bg);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg);
    padding: 10px;
    box-shadow: var(--sb-shadow-sm);
}

.sb-account-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sb-account-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--sb-radius-md);
    color: var(--sb-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s var(--sb-ease);
}

.sb-nav-link-icon {
    width: 20px;
    display: grid;
    place-items: center;
    font-size: 14px;
    color: var(--sb-text-muted);
    transition: color .2s;
}

.sb-nav-link-text {
    flex: 1;
}

.sb-nav-link-arrow {
    font-size: 10px;
    color: var(--sb-text-muted);
    opacity: 0.6;
    transition: transform .2s, opacity .2s;
}

.sb-account-nav-link:hover {
    background: var(--sb-bg-secondary);
    color: var(--sb-blue-600);
}

.sb-account-nav-link:hover .sb-nav-link-icon {
    color: var(--sb-blue-600);
}

.sb-account-nav-link:hover .sb-nav-link-arrow {
    transform: translateX(2px);
    opacity: 1;
}

.sb-account-nav-link.is-active {
    background: linear-gradient(135deg, var(--sb-blue-500), var(--sb-blue-700));
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(27, 60, 180, 0.25);
}

.sb-account-nav-link.is-active .sb-nav-link-icon,
.sb-account-nav-link.is-active .sb-nav-link-arrow {
    color: #ffffff;
    opacity: 1;
}

.sb-account-badge {
    padding: 2px 7px;
    border-radius: var(--sb-radius-full);
    background: var(--sb-blue-50);
    color: var(--sb-blue-700);
    font-size: 11px;
    font-weight: 700;
}

.sb-account-badge.sb-badge-orange {
    background: var(--sb-orange-50);
    color: var(--sb-orange-600);
}

.sb-account-nav-link.is-active .sb-account-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.sb-nav-sep {
    height: 1px;
    background: var(--sb-border);
    margin: 6px 4px;
}

.sb-logout-link {
    color: #e74c3c !important;
}

.sb-logout-link .sb-nav-link-icon {
    color: #e74c3c !important;
}

.sb-logout-link:hover {
    background: rgba(231, 76, 60, 0.08) !important;
}

/* ─── Account Main Content ─── */
.sb-account-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sb-account-page-header {
    margin-bottom: 4px;
}

.sb-account-page-header-flex {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.sb-account-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--sb-orange-600);
    display: block;
    margin-bottom: 2px;
}

.sb-account-title {
    font-family: var(--sb-font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--sb-blue-800);
    margin: 0 0 6px;
    letter-spacing: -0.5px;
}

.sb-account-subtitle {
    font-size: 13.5px;
    color: var(--sb-text-muted);
    margin: 0;
    line-height: 1.55;
}

/* ─── Account Cards (Containers) ─── */
.sb-account-card {
    background: var(--sb-header-bg);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg);
    padding: 26px 28px;
    box-shadow: var(--sb-shadow-sm);
}

.sb-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sb-border);
}

.sb-card-header-flex {
    justify-content: space-between;
}

.sb-card-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sb-card-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--sb-blue-50);
    color: var(--sb-blue-600);
    display: grid;
    place-items: center;
    font-size: 17px;
    flex-shrink: 0;
}

.sb-card-title {
    font-family: var(--sb-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--sb-text);
    margin: 0 0 3px;
}

.sb-card-subtitle {
    font-size: 12px;
    color: var(--sb-text-muted);
    margin: 0;
}

/* ─── Account Forms ─── */
.sb-form-row {
    display: grid;
    gap: 16px;
    margin-bottom: 16px;
}

.sb-form-row-2 {
    grid-template-columns: repeat(2, 1fr);
}

.sb-form-row-3 {
    grid-template-columns: repeat(3, 1fr);
}

.sb-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sb-form-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--sb-text);
}

.sb-account-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 46px;
    background: var(--sb-bg-secondary);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-md);
    padding: 0 14px;
    transition: all .2s;
}

.sb-account-input-wrap:focus-within {
    border-color: var(--sb-blue-400);
    background: var(--sb-header-bg);
    box-shadow: 0 0 0 3px rgba(52, 88, 245, 0.12);
}

.sb-account-input-wrap i {
    font-size: 14px;
    color: var(--sb-text-muted);
    margin-right: 10px;
    transition: color .2s;
}

.sb-account-input-wrap:focus-within i {
    color: var(--sb-blue-500);
}

.sb-account-input-wrap input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--sb-text);
    font-size: 13px;
    font-family: inherit;
}

.sb-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

/* ─── Address Cards Grid ─── */
.sb-addresses-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.sb-address-card {
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-md);
    padding: 18px;
    background: var(--sb-bg-secondary);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    transition: all .2s;
}

.sb-address-card.is-default {
    border-color: var(--sb-blue-400);
    background: var(--sb-header-bg);
    box-shadow: 0 4px 14px rgba(27, 60, 180, 0.08);
}

.sb-address-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sb-address-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--sb-text);
}

.sb-address-title-wrap i {
    color: var(--sb-blue-500);
}

.sb-address-badge-default {
    padding: 3px 8px;
    border-radius: var(--sb-radius-full);
    background: var(--sb-blue-50);
    color: var(--sb-blue-700);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.sb-address-body p {
    margin: 0 0 4px;
    font-size: 12.5px;
    color: var(--sb-text-muted);
    line-height: 1.45;
}

.sb-address-name {
    font-weight: 600;
    color: var(--sb-text) !important;
}

.sb-address-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px !important;
    margin-top: 6px !important;
}

.sb-address-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--sb-border);
}

.sb-addr-action-btn {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--sb-blue-600);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sb-addr-action-btn:hover {
    text-decoration: underline;
}

.sb-addr-action-btn.sb-text-danger {
    color: #e74c3c;
}

.sb-addr-sep {
    color: var(--sb-border);
}

/* ─── MES COMMANDES ─── */
.sb-orders-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.sb-order-filter-btn {
    padding: 8px 16px;
    border-radius: var(--sb-radius-full);
    border: 1px solid var(--sb-border);
    background: var(--sb-header-bg);
    color: var(--sb-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s;
}

.sb-order-filter-btn:hover {
    border-color: var(--sb-blue-300);
    background: var(--sb-blue-50);
}

.sb-order-filter-btn.is-active {
    background: linear-gradient(135deg, var(--sb-blue-500), var(--sb-blue-700));
    border-color: var(--sb-blue-600);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(27, 60, 180, 0.25);
}

.sb-orders-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sb-order-card {
    background: var(--sb-header-bg);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg);
    overflow: hidden;
    box-shadow: var(--sb-shadow-sm);
    transition: box-shadow .2s;
}

.sb-order-card:hover {
    box-shadow: var(--sb-shadow-md);
}

.sb-order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    background: var(--sb-bg-secondary);
    border-bottom: 1px solid var(--sb-border);
}

.sb-order-meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sb-order-id-block {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--sb-text);
}

.sb-order-id-block i {
    color: var(--sb-blue-500);
}

.sb-order-date {
    font-size: 12.5px;
    color: var(--sb-text-muted);
}

.sb-order-status-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sb-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--sb-radius-full);
    font-size: 11.5px;
    font-weight: 700;
}

.sb-status-orange {
    background: var(--sb-orange-50);
    border: 1px solid var(--sb-orange-200);
    color: var(--sb-orange-600);
}

.sb-status-green {
    background: #E8F8F0;
    border: 1px solid #A3E4C6;
    color: #10AC84;
}

.sb-order-total-header {
    font-family: var(--sb-font-display);
    font-size: 17px;
    font-weight: 800;
    color: var(--sb-blue-600);
}

/* Order Live Tracking Timeline */
.sb-order-timeline-wrap {
    padding: 22px 24px 16px;
    border-bottom: 1px solid var(--sb-border);
    background: rgba(27, 60, 180, 0.02);
}

.sb-order-timeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 600px;
    margin: 0 auto 12px;
}

.sb-timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 2;
}

.sb-timeline-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sb-bg-secondary);
    border: 2px solid var(--sb-border);
    color: var(--sb-text-muted);
    display: grid;
    place-items: center;
    font-size: 12px;
    transition: all .3s;
}

.sb-timeline-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--sb-text-muted);
}

.sb-timeline-step.is-done .sb-timeline-dot {
    background: linear-gradient(135deg, var(--sb-blue-500), var(--sb-blue-700));
    border-color: var(--sb-blue-600);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(27, 60, 180, 0.25);
}

.sb-timeline-step.is-done .sb-timeline-label {
    color: var(--sb-text);
}

.sb-timeline-bar {
    flex: 1;
    height: 3px;
    background: var(--sb-border);
    margin: 0 -4px 18px;
    z-index: 1;
    transition: background .3s;
}

.sb-timeline-bar.is-done {
    background: var(--sb-blue-500);
}

.sb-timeline-estimate {
    text-align: center;
    font-size: 12px;
    color: var(--sb-text-muted);
    margin: 0;
}

.sb-timeline-estimate i {
    color: var(--sb-orange-500);
}

/* Order items */
.sb-order-items {
    padding: 16px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sb-order-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
}

.sb-order-item-img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--sb-bg-secondary);
    border: 1px solid var(--sb-border);
}

.sb-order-item-info {
    flex: 1;
}

.sb-order-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--sb-text);
    margin: 0 0 4px;
}

.sb-order-item-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: var(--sb-text-muted);
}

.sb-order-item-price {
    font-weight: 700;
    color: var(--sb-blue-600);
}

.sb-order-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px;
    background: var(--sb-bg-secondary);
    border-top: 1px solid var(--sb-border);
}

.sb-order-footer-note {
    font-size: 12px;
    color: var(--sb-text-muted);
}

.sb-order-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ─── MES FAVORIS (2 COLONNES MOBILE) ─── */
.sb-fav-products-grid {
    margin-top: 10px;
}

.sb-empty-favorites, .sb-empty-orders {
    padding: 60px 20px;
    text-align: center;
    background: var(--sb-bg-secondary);
    border: 1.5px dashed var(--sb-border);
    border-radius: var(--sb-radius-lg);
    margin: 20px 0;
}

.sb-empty-icon-fav {
    color: #FF4757 !important;
    background: rgba(255, 71, 87, 0.1) !important;
}

/* =============================================
   PAGE PANIER — Mon Panier
   ============================================= */
.sb-cart-page {
    background: var(--sb-bg);
    min-height: 100vh;
    padding: 24px 0 70px;
}

.sb-cart-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.sb-cart-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--sb-orange-600);
    display: block;
    margin-bottom: 2px;
}

.sb-cart-title {
    font-family: var(--sb-font-display);
    font-size: 32px;
    font-weight: 700;
    color: var(--sb-blue-800);
    margin: 0;
    letter-spacing: -0.5px;
}

.sb-cart-count-badge {
    font-size: 16px;
    font-weight: 500;
    color: var(--sb-text-muted);
}

.sb-cart-continue-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sb-blue-600);
    text-decoration: none;
    transition: color .2s;
}

.sb-cart-continue-link:hover {
    color: var(--sb-orange-600);
}

/* Shipping Progress Banner */
.sb-shipping-banner {
    background: linear-gradient(135deg, rgba(27, 60, 180, 0.06), rgba(255, 136, 0, 0.06));
    border: 1px solid var(--sb-blue-100);
    border-radius: var(--sb-radius-md);
    padding: 14px 20px;
    margin-bottom: 24px;
}

.sb-shipping-banner-copy {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--sb-blue-800);
    margin-bottom: 8px;
}

.sb-shipping-banner-copy i {
    color: var(--sb-orange-500);
    font-size: 15px;
}

.sb-shipping-progress-track {
    width: 100%;
    height: 6px;
    border-radius: 99px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.sb-shipping-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--sb-orange-500), var(--sb-blue-500));
    border-radius: 99px;
    transition: width .4s ease;
}

/* Cart Layout */
.sb-cart-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 32px;
    align-items: start;
}

/* Cart Items Table List */
.sb-cart-items-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sb-cart-table-header {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1fr 1fr 40px;
    align-items: center;
    padding: 10px 18px;
    background: var(--sb-bg-secondary);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-md);
    font-size: 12px;
    font-weight: 700;
    color: var(--sb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sb-cart-items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sb-cart-item {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1fr 1fr 40px;
    align-items: center;
    padding: 16px 18px;
    background: var(--sb-header-bg);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-sm);
    transition: transform .25s ease, opacity .25s ease, border-color .2s;
}

.sb-cart-item:hover {
    border-color: var(--sb-blue-200);
}

.sb-cart-item-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sb-cart-item-img {
    width: 68px;
    height: 68px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--sb-bg-secondary);
    border: 1px solid var(--sb-border);
    flex-shrink: 0;
}

.sb-cart-item-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sb-cart-item-cat {
    font-size: 10px;
    font-weight: 700;
    color: var(--sb-orange-600);
    text-transform: uppercase;
}

.sb-cart-item-name {
    font-family: var(--sb-font-display);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--sb-text);
    margin: 0;
    line-height: 1.3;
}

.sb-cart-item-badge {
    align-self: flex-start;
    padding: 2px 6px;
    border-radius: 4px;
    background: #FF4757;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
}

.sb-cart-item-stock {
    font-size: 11px;
    color: #2ED573;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sb-cart-item-unit-price {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sb-text);
}

.sb-unit-label, .sb-subtotal-label {
    display: none;
}

/* Stepper */
.sb-qty-stepper {
    display: inline-flex;
    align-items: center;
    background: var(--sb-bg-secondary);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-full);
    padding: 2px;
}

.sb-qty-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--sb-text);
    display: grid;
    place-items: center;
    font-size: 11px;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.sb-qty-btn:hover {
    background: var(--sb-blue-500);
    color: #ffffff;
}

.sb-qty-input {
    width: 32px;
    border: 0;
    outline: 0;
    background: transparent;
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sb-text);
    -moz-appearance: textfield;
}
.sb-qty-input::-webkit-outer-spin-button,
.sb-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sb-line-subtotal {
    font-family: var(--sb-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--sb-blue-600);
}

.sb-cart-remove-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    color: var(--sb-text-muted);
    display: grid;
    place-items: center;
    font-size: 13px;
    cursor: pointer;
    transition: all .2s;
}

.sb-cart-remove-btn:hover {
    color: #FF4757;
    background: rgba(255, 71, 87, 0.1);
}

/* Promo Code Box */
.sb-cart-promo-box {
    background: var(--sb-header-bg);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg);
    padding: 16px 20px;
    box-shadow: var(--sb-shadow-sm);
}

.sb-promo-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.sb-promo-icon {
    position: absolute;
    left: 14px;
    color: var(--sb-text-muted);
    font-size: 13px;
}

.sb-promo-input {
    flex: 1;
    height: 44px;
    padding: 0 14px 0 38px;
    background: var(--sb-bg-secondary);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-full);
    outline: 0;
    color: var(--sb-text);
    font-size: 13px;
    font-family: inherit;
    text-transform: uppercase;
}

.sb-promo-input:focus {
    border-color: var(--sb-blue-400);
    background: var(--sb-header-bg);
}

.sb-promo-message {
    margin-top: 10px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sb-promo-success {
    color: #10AC84;
}

.sb-promo-error {
    color: #FF4757;
}

/* Summary Card */
.sb-cart-summary-sidebar {
    position: sticky;
    top: 24px;
}

.sb-cart-summary-card {
    background: var(--sb-header-bg);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg);
    padding: 24px;
    box-shadow: var(--sb-shadow-md);
}

.sb-summary-title {
    font-family: var(--sb-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--sb-text);
    margin: 0 0 18px;
}

.sb-summary-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 22px;
}

.sb-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
    color: var(--sb-text-muted);
}

.sb-summary-discount {
    color: #10AC84;
    font-weight: 600;
}

.sb-text-free {
    color: #10AC84;
    font-weight: 700;
}

.sb-summary-divider {
    height: 1px;
    background: var(--sb-border);
    margin: 4px 0;
}

.sb-summary-total-row {
    color: var(--sb-text);
    font-size: 15px;
}

.sb-summary-total-row small {
    display: block;
    font-size: 11px;
    color: var(--sb-text-muted);
    font-weight: 400;
}

.sb-summary-total-val {
    font-family: var(--sb-font-display);
    font-size: 24px;
    font-weight: 800;
    color: var(--sb-blue-700);
}

.sb-btn-checkout {
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    box-shadow: 0 8px 22px rgba(27, 60, 180, 0.3);
}

.sb-payment-methods {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--sb-border);
}

.sb-payment-methods-title {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--sb-text-muted);
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 8px;
}

.sb-payment-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sb-pay-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: var(--sb-radius-sm);
    background: var(--sb-bg-secondary);
    border: 1px solid var(--sb-border);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--sb-text-muted);
}

.sb-cart-reassurance {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--sb-border);
}

.sb-reassurance-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--sb-text-muted);
}

.sb-reassurance-item i {
    color: var(--sb-blue-500);
    font-size: 13px;
}

/* Empty cart */
.sb-empty-cart {
    padding: 80px 20px;
    text-align: center;
    background: var(--sb-bg-secondary);
    border: 1.5px dashed var(--sb-border);
    border-radius: var(--sb-radius-lg);
    margin: 30px 0;
}

.sb-empty-cart h2 {
    font-family: var(--sb-font-display);
    font-size: 24px;
    color: var(--sb-text);
    margin: 12px 0 8px;
}

.sb-empty-cart p {
    color: var(--sb-text-muted);
    font-size: 14px;
    margin: 0 auto 24px;
    max-width: 440px;
}

/* ─── DARK MODE SUPPORT ─── */
html.sb-dark .sb-user-summary-card,
html.sb-dark .sb-account-nav,
html.sb-dark .sb-account-card,
html.sb-dark .sb-order-card,
html.sb-dark .sb-cart-summary-card,
html.sb-dark .sb-cart-item,
html.sb-dark .sb-cart-promo-box {
    background: #171C28;
    border-color: var(--sb-border);
}

html.sb-dark .sb-account-title,
html.sb-dark .sb-cart-title {
    color: #eff3ff;
}

html.sb-dark .sb-card-header-icon {
    background: #20283d;
    color: var(--sb-blue-300);
}

html.sb-dark .sb-account-input-wrap,
html.sb-dark .sb-address-card,
html.sb-dark .sb-order-header,
html.sb-dark .sb-order-footer,
html.sb-dark .sb-cart-table-header,
html.sb-dark .sb-qty-stepper,
html.sb-dark .sb-promo-input,
html.sb-dark .sb-pay-badge {
    background: #131722;
    border-color: var(--sb-border);
}

html.sb-dark .sb-order-timeline-wrap {
    background: rgba(52, 88, 245, 0.04);
}

html.sb-dark .sb-shipping-banner {
    background: linear-gradient(135deg, rgba(52, 88, 245, 0.1), rgba(255, 136, 0, 0.08));
    border-color: #2a3556;
}

html.sb-dark .sb-shipping-banner-copy {
    color: #cbd5e1;
}

html.sb-dark .sb-summary-total-val,
html.sb-dark .sb-order-total-header,
html.sb-dark .sb-line-subtotal {
    color: var(--sb-blue-300);
}

/* ─── RESPONSIVE BREAKPOINTS (MOBILE & TABLET) ─── */
@media (max-width: 991px) {
    .sb-account-page,
    .sb-cart-page {
        padding-block: 16px 50px;
    }
    .sb-account-layout {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 4px;
    }
    .sb-account-sidebar {
        position: static;
        gap: 10px;
    }
    /* Compact horizontal user banner */
    .sb-user-summary-card {
        display: flex;
        align-items: center;
        text-align: left;
        padding: 12px 14px;
        gap: 12px;
        border-radius: 14px;
    }
    .sb-user-avatar-wrap {
        width: 48px;
        height: 48px;
        margin: 0;
        flex-shrink: 0;
    }
    .sb-avatar-edit-btn {
        width: 20px;
        height: 20px;
        font-size: 8.5px;
    }
    .sb-user-tier-badge {
        align-self: flex-start;
        font-size: 8.5px;
        padding: 2px 6px;
        margin-bottom: 2px;
    }
    .sb-user-name {
        font-size: 15px;
        margin: 0;
    }
    .sb-user-email {
        font-size: 11px;
        margin: 0;
    }
    .sb-user-joined {
        display: none;
    }
    /* Horizontal scrollable tab pills */
    .sb-account-nav {
        padding: 2px;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .sb-account-nav-list {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 6px;
        padding-bottom: 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .sb-account-nav-list::-webkit-scrollbar {
        display: none;
    }
    .sb-account-nav-link {
        padding: 7px 13px;
        font-size: 12px;
        border-radius: 99px;
        background: var(--sb-header-bg);
        border: 1px solid var(--sb-border);
        white-space: nowrap;
        flex-shrink: 0;
        gap: 7px;
    }
    .sb-nav-link-icon {
        width: 16px;
        font-size: 12px;
    }
    .sb-nav-link-arrow, .sb-nav-sep {
        display: none;
    }
    /* Cart layout stack */
    .sb-cart-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .sb-cart-summary-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .container,
    .sb-account-page .container,
    .sb-cart-page .container {
        padding-inline: 14px;
    }
    .sb-account-title {
        font-size: 22px;
    }
    .sb-account-subtitle {
        font-size: 12.5px;
    }
    .sb-account-page-header-flex {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .sb-fav-header-actions .sb-btn {
        width: 100%;
        justify-content: center;
    }
    .sb-account-card {
        padding: 16px 14px;
        border-radius: 14px;
    }
    .sb-card-header {
        gap: 10px;
        margin-bottom: 14px;
        padding-bottom: 10px;
    }
    .sb-card-header-icon {
        width: 38px;
        height: 38px;
        font-size: 15px;
        border-radius: 10px;
    }
    .sb-card-title {
        font-size: 16px;
    }
    .sb-card-subtitle {
        font-size: 11.5px;
    }
    .sb-form-row-2, .sb-form-row-3 {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 10px;
    }
    .sb-account-input-wrap {
        min-height: 44px;
    }
    .sb-account-input-wrap input {
        font-size: 16px; /* Prevents auto-zoom on iOS */
    }
    .sb-form-actions {
        width: 100%;
        margin-top: 6px;
    }
    .sb-form-actions .sb-btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }
    .sb-addresses-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .sb-card-header-flex {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .sb-card-header-flex .sb-btn {
        width: 100%;
        justify-content: center;
    }

    /* Orders list responsive */
    .sb-orders-filter-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 6px;
        padding-bottom: 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .sb-orders-filter-bar::-webkit-scrollbar {
        display: none;
    }
    .sb-order-filter-btn {
        font-size: 11.5px;
        padding: 6px 12px;
        flex-shrink: 0;
    }
    .sb-order-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px 14px;
    }
    .sb-order-meta,
    .sb-order-status-wrap {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .sb-order-id-block {
        font-size: 13.5px;
    }
    .sb-order-date {
        font-size: 11.5px;
    }
    .sb-status-badge {
        font-size: 10.5px;
        padding: 3px 9px;
    }
    .sb-order-total-header {
        font-size: 15px;
    }
    /* Order Tracking Timeline on Mobile */
    .sb-order-timeline-wrap {
        padding: 12px 10px 8px;
    }
    .sb-order-timeline {
        max-width: 100%;
        margin-bottom: 6px;
    }
    .sb-timeline-step {
        gap: 3px;
    }
    .sb-timeline-dot {
        width: 24px;
        height: 24px;
        font-size: 9.5px;
    }
    .sb-timeline-label {
        font-size: 8.5px;
        white-space: nowrap;
    }
    .sb-timeline-bar {
        margin: 0 -2px 13px;
        height: 2px;
    }
    .sb-timeline-estimate {
        font-size: 10.5px;
    }
    .sb-order-items {
        padding: 10px 14px;
        gap: 8px;
    }
    .sb-order-item {
        gap: 12px;
    }
    .sb-order-item-img {
        width: 48px;
        height: 48px;
        border-radius: 8px;
    }
    .sb-order-item-name {
        font-size: 13px;
    }
    .sb-order-item-meta {
        font-size: 11.5px;
        gap: 8px;
    }
    .sb-order-footer {
        padding: 12px 14px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .sb-order-footer-note {
        font-size: 11px;
    }
    .sb-order-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }
    .sb-order-actions .sb-btn {
        width: 100%;
        justify-content: center;
        min-height: 38px;
        font-size: 11.5px;
        padding: 6px 8px;
    }

    /* Cart page responsive */
    .sb-cart-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 14px;
    }
    .sb-cart-title {
        font-size: 24px;
    }
    .sb-shipping-banner {
        padding: 10px 14px;
        margin-bottom: 16px;
    }
    .sb-shipping-banner-copy {
        font-size: 11.5px;
    }
    .sb-cart-table-header {
        display: none;
    }
    .sb-cart-item {
        display: grid;
        grid-template-columns: 56px 1fr auto;
        grid-template-areas: 
            "img details remove"
            "img qty total";
        gap: 6px 12px;
        padding: 12px 14px;
        align-items: center;
        border-radius: 14px;
    }
    .sb-cart-item-main {
        display: contents;
    }
    .sb-cart-item-img {
        grid-area: img;
        width: 56px;
        height: 56px;
        border-radius: 10px;
    }
    .sb-cart-item-details {
        grid-area: details;
        gap: 2px;
    }
    .sb-cart-item-name {
        font-size: 13px;
        line-height: 1.25;
    }
    .sb-cart-item-stock {
        font-size: 10px;
    }
    .sb-cart-item-remove {
        grid-area: remove;
        align-self: start;
    }
    .sb-cart-item-unit-price {
        display: none;
    }
    .sb-cart-item-qty {
        grid-area: qty;
        margin-top: 4px;
    }
    .sb-qty-stepper {
        padding: 1px;
    }
    .sb-qty-btn {
        width: 26px;
        height: 26px;
        font-size: 10px;
    }
    .sb-qty-input {
        width: 28px;
        font-size: 11.5px;
    }
    .sb-cart-item-subtotal {
        grid-area: total;
        text-align: right;
        align-self: center;
    }
    .sb-line-subtotal {
        font-size: 15px;
    }
    .sb-cart-promo-box {
        padding: 14px 16px;
    }
    .sb-promo-input {
        font-size: 13px;
        height: 40px;
    }
    .sb-cart-summary-card {
        padding: 18px 16px;
        border-radius: 14px;
    }
    .sb-summary-title {
        font-size: 17px;
        margin-bottom: 12px;
    }
    .sb-summary-total-val {
        font-size: 20px;
    }
    .sb-btn-checkout {
        min-height: 46px;
        font-size: 13.5px;
    }
    .sb-payment-badges {
        gap: 4px;
    }
    .sb-pay-badge {
        font-size: 9.5px;
        padding: 3px 6px;
    }
}

@media (max-width: 480px) {
    .container,
    .sb-account-page .container,
    .sb-cart-page .container {
        padding-inline: 10px;
    }
    .sb-account-card {
        padding: 14px 12px;
    }
    .sb-order-actions {
        grid-template-columns: 1fr;
    }
    .sb-promo-input-group {
        flex-direction: row;
        gap: 6px;
    }
    .sb-promo-input {
        font-size: 12px;
        padding-left: 32px;
    }
    .sb-promo-icon {
        left: 10px;
    }
}

/* Shared responsive layout: let grid children shrink instead of clipping the page. */
:root { --sb-header-height: 160px; }
.sb-account-layout { grid-template-columns: 270px minmax(0, 1fr); }
.sb-cart-layout { grid-template-columns: minmax(0, 1fr) 340px; }
:is(.sb-account-layout, .sb-cart-layout) > *,
.sb-user-summary-info, .sb-account-nav, .sb-account-nav-list,
.sb-category-pills, .sb-category-nav-tools, .sb-shop-search-box,
.sb-cart-item-details, .sb-product-body, .sb-promo-input { min-width: 0; }
.sb-user-summary-info { overflow-wrap: anywhere; }
.sb-products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sb-fav-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sb-product-price-block { flex-wrap: wrap; }
.sb-product-footer { flex-wrap: wrap; }
.sb-add-cart-btn { min-height: 44px; justify-content: center; }
.sb-category-nav-wrapper { top: var(--sb-header-height); }
.sb-account-sidebar, .sb-cart-summary-sidebar { top: calc(var(--sb-header-height) + 20px); }
main :is(a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--sb-orange-400);
    outline-offset: 3px;
}
.sb-shop-search-box input { min-width: 0; }
.sb-promo-input { width: 100%; }
.sb-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 380px; }
.sb-hero-media { min-height: 380px; }
.sb-hero-welcome { min-height: 0; padding: clamp(24px, 3vw, 40px); }
.sb-hero-welcome h1 { font-size: clamp(30px, 3vw, 40px); }
.sb-hero-welcome > p { font-size: 14px; }
.sb-hero-buy, .sb-hero-sell { min-height: 48px; font-size: 13px; }
.sb-hero-note { margin-top: 22px; }
.sb-hero-arrow { width: 44px; height: 44px; flex-shrink: 0; }
.sb-hero-dots { gap: 2px; }
.sb-hero-dots button, .sb-hero-dots button.is-active {
    display: grid; place-items: center; width: 28px; height: 44px;
    background: transparent; border-radius: 6px;
}
.sb-hero-dots button::before { content: ''; width: 18px; height: 4px; border-radius: 4px; background: #ffffff80; }
.sb-hero-dots button.is-active::before { background: var(--sb-orange-400); }
.sb-input-wrap input, .sb-form-input, .sb-form-select { font-size: 16px; }
.sb-form-field label, .sb-form-label-row label { font-size: 14px; }
.sb-auth-card-heading p, .sb-auth-switch { font-size: 14px; }
.sb-check-row { min-height: 44px; }

@media (max-width: 1199px) {
    .sb-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sb-fav-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sb-account-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; }
    .sb-cart-layout { gap: 24px; grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 991px) {
    .sb-account-layout, .sb-cart-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .sb-account-sidebar, .sb-cart-summary-sidebar, .sb-category-nav-wrapper { position: static; }
    .sb-account-nav-list { padding: 4px 2px 8px; scrollbar-width: thin; }
    .sb-account-nav-list > li { flex: 0 0 auto; }
    .sb-account-nav-link, .sb-cat-pill { min-height: 44px; font-size: 13px; }
    .sb-user-email { font-size: 12px; }
    .sb-category-nav-inner { gap: 12px; padding-block: 12px; }
    .sb-shop-search-box { height: 46px; }
    .sb-shop-search-box input { font-size: 16px; }
    .sb-shop-search-box:focus-within { width: auto; }
    .sb-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .sb-hero-media { min-height: 360px; }
    .sb-hero-product-card { right: 24px; left: 24px; bottom: 80px; }
    .sb-hero-product-card h2 { font-size: 30px; }
    html.sb-menu-ready .sb-nav > * { flex-shrink: 0; }
}

@media (max-width: 767px) {
    .container, .sb-account-page .container, .sb-cart-page .container {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
    .sb-header-inner { row-gap: 10px; }
    .sb-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: 18px; }
    .sb-hero-section { padding-block: 16px 40px; }
    .sb-hero-media { min-height: clamp(215px, 48vw, 300px); }
    .sb-hero-media-footer { left: 14px; right: 14px; bottom: 10px; gap: 8px; }
    .sb-hero-product-card { left: 20px; right: 20px; bottom: 65px; text-align: left; }
    .sb-hero-product-card h2 { font-size: 26px; margin-block: 8px 4px; }
    .sb-hero-product-card p { font-size: 12px; }
    .sb-hero-welcome { min-height: 0; padding: 24px; }
    .sb-hero-welcome h1 { margin-block: 12px; font-size: clamp(28px, 5vw, 34px); line-height: 1.12; }
    .sb-hero-welcome h1 br { display: none; }
    .sb-hero-welcome > p { font-size: 13px; line-height: 1.65; }
    .sb-hero-note, .sb-hero-welcome-mark { display: none; }
    .sb-hero-actions { margin-top: 18px; }
    .sb-products-grid { gap: 12px; }
    .sb-product-body { padding: 12px; }
    .sb-product-title { font-size: 14px; line-height: 1.4; }
    .sb-product-footer { flex-direction: column; align-items: stretch; gap: 10px; }
    .sb-price-current { font-size: 16px; }
    .sb-price-old { font-size: 11px; }
    .sb-add-cart-btn { width: 100%; padding: 8px; border-radius: 9px; font-size: 12px; }
    .sb-account-card { padding: 20px 16px; }
    .sb-cart-item {
        position: relative; grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "main main" "qty total";
        gap: 16px 10px; padding: 16px;
    }
    .sb-cart-item-main { display: flex; grid-area: main; min-width: 0; gap: 12px; padding-right: 34px; }
    .sb-cart-item-img, .sb-cart-item-details { grid-area: auto; }
    .sb-cart-item-img { flex: 0 0 56px; }
    .sb-cart-item-name { font-size: 14px; overflow-wrap: anywhere; }
    .sb-cart-item-remove { position: absolute; top: 8px; right: 6px; width: 44px; height: 44px; }
    .sb-cart-item-qty { margin: 0; }
    .sb-qty-btn { width: 44px; height: 44px; font-size: 13px; }
    .sb-qty-input { width: 32px; font-size: 16px; }
    .sb-promo-input { font-size: 16px; min-height: 46px; }
    .sb-auth-card, .sb-auth-page-signup .sb-auth-card { padding: 28px 24px; }
    .sb-form-label-row { flex-wrap: wrap; gap: 6px 12px; }
    .sb-form-label-row a { min-height: 28px; display: inline-flex; align-items: center; font-size: 12px; }
    .sb-footer-group a { min-height: 44px; display: inline-flex; align-items: center; font-size: 13px; }
    .sb-footer-legal { font-size: 12px; }
}

@media (max-width: 480px) {
    .sb-form-fields-two { grid-template-columns: minmax(0, 1fr); }
    .sb-category-nav-tools { flex-direction: column; align-items: stretch; gap: 8px; }
    .sb-shop-search-box { flex: auto; width: 100%; }
    .sb-hero-welcome { padding: 22px 20px; }
    .sb-hero-dots button, .sb-hero-dots button.is-active { width: 24px; }
    .sb-hero-arrows { gap: 4px; }
    .sb-product-body { padding: 10px; }
    .sb-product-title { font-size: 13px; }
    .sb-products-grid { gap: 10px; }
    .sb-promo-input-group { flex-direction: column; align-items: stretch; gap: 10px; }
}

@media (max-width: 359px) {
    .container, .sb-account-page .container, .sb-cart-page .container { padding-inline: 12px; }
    .sb-auth-card, .sb-auth-page-signup .sb-auth-card { padding-inline: 18px; }
}

/* A landscape phone needs room to read below the navigation. */
@media (max-height: 600px) {
    .sb-header, .sb-category-nav-wrapper, .sb-account-sidebar, .sb-cart-summary-sidebar { position: static; }
}

/* Product landing page */
.sb-product-media-link { display: block; width: 100%; height: 100%; }
.sb-product-title a { color: inherit; text-decoration: none; }
.sb-product-title a:hover { color: var(--sb-blue-600); }
.sb-product-page { min-height: 70vh; padding: 18px 0 80px; background: var(--sb-bg-secondary); }
.sb-product-page .sb-breadcrumb { margin-bottom: 22px; }
.sb-product-detail { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.sb-product-gallery { min-width: 0; }
.sb-product-gallery-frame { position: relative; display: grid; place-items: center; min-height: clamp(380px, 48vw, 610px); overflow: hidden; border: 1px solid var(--sb-border); border-radius: 24px; background: linear-gradient(145deg, #eef2ff 0%, #ffffff 58%, #f1f5ff 100%); box-shadow: 0 20px 55px #12245f12; }
.sb-product-gallery-frame::after { position: absolute; right: -90px; bottom: -120px; width: 300px; height: 300px; border-radius: 50%; background: #3458f514; content: ""; }
.sb-product-detail-image { position: relative; z-index: 1; width: 100%; height: 100%; max-height: 590px; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s ease; }
.sb-product-gallery-frame:hover .sb-product-detail-image { transform: scale(1.035); }
.sb-product-detail-badge { position: absolute; z-index: 2; top: 22px; left: 22px; display: inline-flex; align-items: center; min-height: 30px; padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .35px; }
.sb-product-gallery-favorite { position: absolute; z-index: 3; top: 18px; right: 18px; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #ffffffb3; border-radius: 50%; background: #ffffffe8; color: var(--sb-gray-500); box-shadow: 0 8px 20px #06153e14; cursor: pointer; transition: color .2s, background .2s, transform .2s; }
.sb-product-gallery-favorite:hover, .sb-product-gallery-favorite.is-liked { background: #fff0f3; color: #e34964; transform: translateY(-2px); }
.sb-product-gallery-caption { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; padding: 14px 8px 0; color: var(--sb-gray-500); font-size: 11px; }
.sb-product-gallery-caption span { display: inline-flex; align-items: center; gap: 7px; }
.sb-product-gallery-caption i { color: var(--sb-blue-500); }
.sb-product-detail-content { min-width: 0; padding: clamp(8px, 2vw, 20px) 0; }
.sb-product-detail-eyebrow { display: inline-flex; align-items: center; min-height: 26px; color: var(--sb-blue-600); font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.sb-product-detail-title { max-width: 680px; margin: 13px 0 14px; color: var(--sb-navy); font-family: var(--sb-font-display); font-size: clamp(30px, 4vw, 52px); font-weight: 700; line-height: 1.08; letter-spacing: -1.3px; }
.sb-product-detail-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: var(--sb-gray-500); font-size: 12px; }
.sb-detail-stars { display: inline-flex; gap: 3px; color: #f3a925; }
.sb-product-detail-rating strong { color: var(--sb-gray-800); font-size: 13px; }
.sb-product-detail-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 11px; margin-top: 26px; }
.sb-product-detail-price strong { color: var(--sb-blue-700); font-family: var(--sb-font-display); font-size: 34px; line-height: 1; }
.sb-product-detail-price del { color: var(--sb-gray-400); font-size: 15px; }
.sb-product-detail-price span { color: #138a62; font-size: 11px; font-weight: 700; }
.sb-product-detail-description { max-width: 600px; margin: 20px 0 24px; color: var(--sb-gray-600); font-size: 14px; line-height: 1.8; }
.sb-product-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding: 16px 0; border-top: 1px solid var(--sb-border); border-bottom: 1px solid var(--sb-border); }
.sb-product-benefit { display: flex; gap: 8px; min-width: 0; }
.sb-product-benefit-icon { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 9px; background: var(--sb-blue-50); color: var(--sb-blue-600); font-size: 11px; }
.sb-product-benefit > span:last-child { display: grid; gap: 3px; min-width: 0; }
.sb-product-benefit strong { color: var(--sb-gray-800); font-size: 10px; line-height: 1.25; }
.sb-product-benefit small { color: var(--sb-gray-500); font-size: 9px; line-height: 1.35; }
.sb-product-detail-stock { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 20px 0; color: var(--sb-gray-500); font-size: 11px; }
.sb-product-detail-stock strong { color: #138a62; font-size: 12px; }
.sb-stock-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a36f; box-shadow: 0 0 0 4px #16a36f1a; }
.sb-product-detail-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; }
.sb-product-quantity { display: grid; gap: 8px; flex: 0 0 auto; }
.sb-product-quantity label { color: var(--sb-gray-600); font-size: 11px; font-weight: 700; }
.sb-product-quantity-control { display: flex; align-items: center; height: 48px; border: 1px solid var(--sb-border); border-radius: 12px; background: var(--sb-bg); }
.sb-product-quantity-control button { display: grid; place-items: center; width: 38px; height: 100%; border: 0; background: transparent; color: var(--sb-gray-500); cursor: pointer; transition: color .2s, background .2s; }
.sb-product-quantity-control button:hover { background: var(--sb-blue-50); color: var(--sb-blue-600); }
.sb-product-quantity-control input { width: 37px; border: 0; outline: 0; background: transparent; color: var(--sb-gray-800); font-size: 15px; font-weight: 700; text-align: center; }
.sb-product-cta-group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); flex: 1 1 330px; gap: 9px; }
.sb-product-cta-group .sb-product-favorite-btn { grid-column: 1 / -1; justify-content: center; min-height: 44px; }
.sb-product-favorite-btn.is-liked { border-color: #f4b7c2; background: #fff5f7; color: #d43b58; }
.sb-product-add-btn, .sb-product-checkout-btn { justify-content: center; min-height: 50px; }
.sb-product-checkout-btn { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--sb-blue-200); border-radius: 10px; background: var(--sb-blue-50); color: var(--sb-blue-700); font-size: 12px; font-weight: 700; cursor: pointer; transition: background .2s, transform .2s; }
.sb-product-checkout-btn:hover { background: var(--sb-blue-100); transform: translateY(-1px); }
.sb-product-action-note { min-height: 20px; margin: 11px 0 0; color: var(--sb-blue-700); font-size: 12px; font-weight: 600; }
.sb-product-related { margin-top: 76px; }
.sb-product-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.sb-product-section-heading h2 { margin: 7px 0 0; color: var(--sb-navy); font-family: var(--sb-font-display); font-size: clamp(23px, 3vw, 32px); letter-spacing: -.6px; }
.sb-product-section-heading > a { display: inline-flex; align-items: center; gap: 8px; color: var(--sb-blue-600); font-size: 12px; font-weight: 700; }
.sb-product-section-heading > a:hover { color: var(--sb-blue-800); }
.sb-product-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sb-product-related-card { position: relative; display: flex; align-items: center; gap: 13px; min-width: 0; padding: 12px; border: 1px solid var(--sb-border); border-radius: 15px; background: var(--sb-bg); box-shadow: 0 8px 25px #12245f08; transition: border-color .2s, transform .2s, box-shadow .2s; }
.sb-product-related-card:hover { border-color: var(--sb-blue-200); box-shadow: 0 13px 30px #12245f12; transform: translateY(-2px); }
.sb-product-related-card img { width: 76px; height: 76px; flex: 0 0 76px; border-radius: 11px; object-fit: cover; background: var(--sb-bg-secondary); }
.sb-product-related-card > span { display: grid; gap: 4px; min-width: 0; padding-right: 15px; }
.sb-product-related-card small { color: var(--sb-gray-500); font-size: 9px; }
.sb-product-related-card strong { overflow: hidden; color: var(--sb-gray-800); font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.sb-product-related-card b { color: var(--sb-blue-700); font-size: 13px; }
.sb-product-related-card > i { position: absolute; top: 13px; right: 12px; color: var(--sb-gray-400); font-size: 11px; }
.sb-product-referral-notice, .sb-product-share-locked { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0; padding: 12px 14px; border-radius: 12px; font-size: 11px; line-height: 1.55; }
.sb-product-referral-notice { border: 1px solid #b8e8d5; background: #effcf6; color: #126c50; }
.sb-product-referral-notice i { margin-top: 2px; color: #138a62; }
.sb-product-share-box { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 18px 0; padding: 14px; border: 1px solid #d9e2ff; border-radius: 14px; background: linear-gradient(135deg, #f7f9ff, #fff); }
.sb-product-share-box > div { display: grid; gap: 4px; min-width: 0; }
.sb-product-share-box strong { color: var(--sb-gray-800); font-size: 12px; }
.sb-product-share-box span { color: var(--sb-gray-500); font-size: 10px; line-height: 1.45; }
.sb-product-share-btn { flex: 0 0 auto; min-height: 40px; white-space: nowrap; }
.sb-product-share-locked { border: 1px dashed var(--sb-border); background: var(--sb-bg-secondary); color: var(--sb-gray-500); }
.sb-product-share-locked i { margin-top: 2px; color: var(--sb-gray-400); }
html.sb-dark .sb-product-gallery-frame { border-color: #ffffff17; background: linear-gradient(145deg, #1f2a4b, #151b2e); }
html.sb-dark .sb-product-gallery-favorite { border-color: #ffffff18; background: #18223be8; }
html.sb-dark .sb-product-benefit-icon { background: #3458f51c; }
html.sb-dark .sb-product-checkout-btn { border-color: #5978ff40; background: #3458f51c; color: #b9c7ff; }
html.sb-dark .sb-product-favorite-btn.is-liked { border-color: #e3496440; background: #e3496415; }
html.sb-dark .sb-product-referral-notice { border-color: #138a624d; background: #138a621a; color: #9be6c8; }
html.sb-dark .sb-product-share-box { border-color: #5978ff40; background: linear-gradient(135deg, #172344, #18223b); }
html.sb-dark .sb-product-share-locked { border-color: #ffffff1f; background: #0f172a66; }

@media (max-width: 900px) {
    .sb-product-detail { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .sb-product-gallery-frame { min-height: min(68vw, 520px); }
    .sb-product-detail-content { padding-top: 0; }
    .sb-product-detail-title { max-width: 760px; }
}

@media (max-width: 600px) {
    .sb-product-page { padding-top: 10px; }
    .sb-product-page .sb-breadcrumb { margin-bottom: 14px; overflow: hidden; white-space: nowrap; }
    .sb-product-page .sb-breadcrumb > :last-child { overflow: hidden; text-overflow: ellipsis; }
    .sb-product-gallery-frame { min-height: 76vw; border-radius: 18px; }
    .sb-product-detail-badge { top: 14px; left: 14px; }
    .sb-product-gallery-favorite { top: 12px; right: 12px; width: 42px; height: 42px; }
    .sb-product-gallery-caption { justify-content: flex-start; padding-top: 11px; font-size: 10px; }
    .sb-product-detail-title { margin-top: 9px; font-size: clamp(27px, 8vw, 38px); letter-spacing: -.8px; }
    .sb-product-detail-price { margin-top: 20px; }
    .sb-product-detail-price strong { font-size: 29px; }
    .sb-product-detail-description { margin-block: 16px 19px; font-size: 13px; line-height: 1.7; }
    .sb-product-benefits { grid-template-columns: 1fr; gap: 10px; }
    .sb-product-benefit small { font-size: 10px; }
    .sb-product-detail-actions { align-items: stretch; }
    .sb-product-quantity { width: 100%; }
    .sb-product-quantity-control { width: 100%; justify-content: space-between; }
    .sb-product-quantity-control input { flex: 1; }
    .sb-product-cta-group { grid-template-columns: 1fr; flex-basis: 100%; }
    .sb-product-cta-group .sb-product-favorite-btn { grid-column: auto; }
    .sb-product-add-btn, .sb-product-checkout-btn { width: 100%; }
    .sb-product-share-box { align-items: stretch; flex-direction: column; }
    .sb-product-share-btn { width: 100%; justify-content: center; }
    .sb-product-related { margin-top: 52px; }
    .sb-product-section-heading { align-items: start; flex-direction: column; gap: 10px; }
    .sb-product-related-grid { grid-template-columns: 1fr; }
    .sb-product-related-card img { width: 66px; height: 66px; flex-basis: 66px; }
}

/* Referral programme */
.sb-label-optional { color: var(--sb-gray-400); font-size: .85em; font-weight: 500; }
.sb-field-hint { display: block; margin-top: 7px; color: var(--sb-gray-500); font-size: 11px; line-height: 1.5; }
.sb-referral-card { overflow: hidden; border-color: #d9e2ff; background: linear-gradient(135deg, #f7f9ff 0%, #ffffff 62%, #f1f5ff 100%); }
.sb-referral-card .sb-card-header { align-items: flex-start; }
.sb-referral-icon { background: linear-gradient(135deg, #3156e8, #738dff); color: #fff; box-shadow: 0 7px 17px #3156e830; }
.sb-referral-eyebrow { display: block; margin-bottom: 5px; color: var(--sb-blue-600); font-size: 10px; font-weight: 800; letter-spacing: 1.2px; }
.sb-referral-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.sb-referral-stats > div { display: grid; gap: 3px; padding: 16px; border: 1px solid #dfe6ff; border-radius: 14px; background: #ffffffb8; }
.sb-referral-stats strong { color: var(--sb-blue-700); font-family: var(--sb-font-display); font-size: 24px; line-height: 1; }
.sb-referral-stats span { color: var(--sb-gray-500); font-size: 11px; }
.sb-referral-share { padding-top: 17px; border-top: 1px solid #dfe6ff; }
.sb-referral-share > label { display: block; margin-bottom: 8px; color: var(--sb-gray-700); font-size: 11px; font-weight: 700; }
.sb-referral-code-control { display: flex; gap: 9px; align-items: center; }
.sb-referral-code-control input { min-width: 0; flex: 1; height: 42px; padding: 0 13px; border: 1px solid #d6defa; border-radius: 10px; background: #fff; color: var(--sb-blue-700); font-size: 13px; font-weight: 800; letter-spacing: 1px; }
.sb-referral-share-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 13px; color: var(--sb-blue-600); font-size: 12px; font-weight: 700; }
.sb-referral-share-link:hover { color: var(--sb-blue-800); }
.sb-referral-links-card { border-color: #d9e2ff; }
.sb-referral-links-list { display: grid; gap: 14px; margin-top: 22px; }
.sb-referral-link-item { padding: 16px; border: 1px solid var(--sb-border); border-radius: 13px; background: var(--sb-bg-secondary); }
.sb-referral-link-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.sb-referral-link-heading label { color: var(--sb-gray-800); font-size: 12px; font-weight: 800; }
.sb-referral-link-position { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--sb-blue-600); color: #fff; font-size: 11px; font-weight: 800; }
.sb-referral-link-control { display: flex; align-items: stretch; gap: 8px; }
.sb-referral-link-control input { min-width: 0; flex: 1; padding: 10px 12px; border: 1px solid var(--sb-border); border-radius: 9px; background: var(--sb-bg); color: var(--sb-gray-700); font-size: 11px; }
.sb-referral-link-control button { flex: 0 0 auto; }
.sb-referral-link-item > a { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; color: var(--sb-blue-600); font-size: 11px; font-weight: 700; }
.sb-referral-links-note { display: flex; align-items: start; gap: 9px; margin: 16px 0 0; color: var(--sb-gray-500); font-size: 11px; line-height: 1.6; }
.sb-referral-links-note i { margin-top: 2px; color: var(--sb-blue-600); }
.sb-summary-referral { color: #138a62; }
.sb-summary-referral > span:last-child { font-weight: 800; }
html.sb-dark .sb-referral-card { border-color: #5978ff40; background: linear-gradient(135deg, #172344, #18223b); }
html.sb-dark .sb-referral-stats > div { border-color: #ffffff17; background: #0f172a66; }
html.sb-dark .sb-referral-share { border-top-color: #ffffff17; }
html.sb-dark .sb-referral-code-control input { border-color: #ffffff1f; background: #0f172a; color: #b9c7ff; }

@media (max-width: 600px) {
    .sb-referral-stats { gap: 8px; }
    .sb-referral-stats > div { padding: 13px; }
    .sb-referral-code-control { align-items: stretch; flex-direction: column; }
    .sb-referral-code-control .sb-btn { width: 100%; justify-content: center; }
    .sb-referral-link-control { flex-direction: column; }
    .sb-referral-link-control button { justify-content: center; }
}

/* Customer testimonials */
.sb-network-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sb-network-stats > div { display: grid; gap: 5px; padding: 17px 18px; border: 1px solid #dfe6ff; border-radius: 14px; background: var(--sb-header-bg); box-shadow: var(--sb-shadow-sm); }
.sb-network-stats strong { color: var(--sb-blue-700); font-family: var(--sb-font-display); font-size: 26px; line-height: 1; }
.sb-network-stats span { color: var(--sb-text-muted); font-size: 11px; }
.sb-network-card { overflow: hidden; border-color: #d9e2ff; }
.sb-network-root, .sb-network-branches, .sb-network-members { list-style: none; margin: 0; padding: 0; }
.sb-network-root > .sb-network-member > .sb-network-node > summary { max-width: 320px; margin: 0 auto; border-color: #9db4ff; background: var(--sb-bg-secondary); }
.sb-network-root > .sb-network-member > .sb-network-node > .sb-network-branch-scroll { padding-top: 33px; position: relative; }
.sb-network-root > .sb-network-member > .sb-network-node > .sb-network-branch-scroll::before { content: ''; position: absolute; top: 0; left: 50%; height: 25px; border-left: 2px solid #c6d2fa; }
.sb-network-branch-scroll { max-width: 100%; overflow-x: auto; padding-bottom: 5px; }
.sb-network-branches.is-first-level { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 14px; min-width: 590px; align-items: start; }
.sb-network-branches.is-first-level:has(> li:nth-child(4)) { grid-template-columns: repeat(4, minmax(170px, 1fr)); min-width: 740px; }
.sb-network-branch { min-width: 0; padding: 12px; border: 1px solid var(--sb-border); border-radius: 13px; background: var(--sb-bg-secondary); }
.sb-network-branch-label { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; color: var(--sb-text); font-size: 12px; font-weight: 800; }
.sb-network-branch-label small { margin-left: auto; padding: 2px 7px; border-radius: 30px; background: var(--sb-header-bg); color: var(--sb-text-muted); }
.sb-network-dot { width: 9px; height: 9px; border-radius: 50%; background: #6d87ee; }
.sb-network-dot.is-middle { background: #f29847; }
.sb-network-dot.is-right { background: #40a980; }
.sb-network-dot.is-other { background: #9b9ea9; }
.sb-network-members { display: grid; gap: 10px; }
.sb-network-person { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 12px; border: 1px solid var(--sb-border); border-radius: 12px; background: var(--sb-header-bg); color: var(--sb-text); box-shadow: var(--sb-shadow-sm); }
summary.sb-network-person { cursor: pointer; list-style: none; }
summary.sb-network-person::-webkit-details-marker { display: none; }
summary.sb-network-person:hover { border-color: var(--sb-blue-500); }
.sb-network-avatar { display: grid; place-items: center; flex: 0 0 33px; height: 33px; border-radius: 50%; background: var(--sb-blue-50); color: var(--sb-blue-700); font-size: 13px; font-weight: 800; }
.sb-network-person-info { display: grid; min-width: 0; gap: 2px; }
.sb-network-person-info strong { overflow-wrap: anywhere; font-size: 12px; line-height: 1.25; }
.sb-network-person-info small { color: var(--sb-text-muted); font-size: 10px; line-height: 1.3; overflow-wrap: anywhere; }
.sb-network-descendant-count { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--sb-blue-600); font-size: 11px; font-weight: 800; }
.sb-network-descendant-count i { font-size: 9px; transition: transform .2s; }
.sb-network-node[open] > summary .sb-network-descendant-count i { transform: rotate(180deg); }
.sb-network-node > .sb-network-branch-scroll { margin-top: 10px; }
.sb-network-node:not(.is-root) .sb-network-branches { display: grid; gap: 9px; }
.sb-network-node:not(.is-root) .sb-network-branch { padding: 9px; border-left: 2px solid #bdcafa; }
.sb-network-node:not(.is-root) .sb-network-members { padding-left: 6px; }
.sb-network-empty, .sb-network-help { margin: 0; color: var(--sb-text-muted); font-size: 11px; line-height: 1.6; }
.sb-network-empty { padding: 8px 0; }
.sb-network-help { margin-top: 20px; }
.sb-network-help a { color: var(--sb-blue-600); font-weight: 700; }
html.sb-dark .sb-network-avatar { background: #263b70; color: #d5e1ff; }
@media (max-width: 600px) { .sb-network-stats { gap: 7px; } .sb-network-stats > div { padding: 12px 9px; } .sb-network-stats strong { font-size: 21px; } .sb-network-stats span { font-size: 10px; } }

/* Customer testimonials */
.sb-testimonials-section { padding: 78px 0 84px; background: linear-gradient(180deg, var(--sb-bg) 0%, var(--sb-bg-secondary) 100%); }
.sb-testimonials-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 30px; }
.sb-testimonial-eyebrow, .sb-admin-eyebrow { display: block; margin-bottom: 9px; color: var(--sb-blue-600); font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }
.sb-testimonials-heading h2 { margin: 0; color: var(--sb-navy); font-family: var(--sb-font-display); font-size: clamp(30px, 4vw, 44px); letter-spacing: -1px; }
.sb-testimonials-heading p { max-width: 620px; margin: 9px 0 0; color: var(--sb-gray-500); font-size: 13px; }
.sb-testimonials-heading-link { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; color: var(--sb-blue-600); font-size: 12px; font-weight: 800; }
.sb-testimonials-heading-link:hover { color: var(--sb-orange-600); }
.sb-testimonials-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sb-testimonial-card { display: flex; flex-direction: column; min-width: 0; min-height: 255px; padding: 25px; border: 1px solid var(--sb-border); border-radius: 20px; background: var(--sb-bg); box-shadow: 0 14px 42px #12245f0a; }
.sb-testimonial-stars { display: flex; gap: 4px; margin-bottom: 19px; color: #f3aa24; font-size: 12px; }
.sb-testimonial-card blockquote { flex: 1; margin: 0 0 25px; color: var(--sb-gray-700); font-family: var(--sb-font-display); font-size: 16px; line-height: 1.65; }
.sb-testimonial-card-footer { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.sb-testimonial-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: linear-gradient(135deg, var(--sb-blue-500), var(--sb-blue-700)); color: #fff; font-size: 13px; font-weight: 800; }
.sb-testimonial-card-footer > div { display: grid; gap: 2px; min-width: 0; }
.sb-testimonial-card-footer strong { overflow: hidden; color: var(--sb-gray-800); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.sb-testimonial-card-footer > div span { color: var(--sb-gray-500); font-size: 10px; }
.sb-testimonial-verified { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: #138a62; font-size: 9px; font-weight: 700; white-space: nowrap; }
.sb-testimonial-screenshot-card { padding: 10px; }
.sb-testimonial-screenshot-media { min-height: 210px; overflow: hidden; border-radius: 14px; background: var(--sb-bg-secondary); }
.sb-testimonial-screenshot-media img { width: 100%; height: 100%; max-height: 340px; object-fit: contain; }
.sb-testimonial-screenshot-card .sb-testimonial-card-footer { padding: 13px 10px 8px; }
.sb-testimonials-empty { display: flex; align-items: center; justify-content: center; gap: 17px; min-height: 180px; padding: 30px; border: 1px dashed var(--sb-border); border-radius: 20px; background: var(--sb-bg); text-align: left; }
.sb-testimonials-empty > span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: var(--sb-blue-50); color: var(--sb-blue-600); font-size: 22px; }
.sb-testimonials-empty div { display: grid; gap: 5px; }
.sb-testimonials-empty strong { color: var(--sb-gray-800); font-size: 15px; }
.sb-testimonials-empty p { margin: 0; color: var(--sb-gray-500); font-size: 12px; }
.sb-testimonial-cta { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; margin-top: 35px; padding: 30px 34px; overflow: hidden; border-radius: 22px; background: linear-gradient(135deg, #102b88, #3458f5 70%, #607cff); color: #fff; box-shadow: 0 20px 48px #2349d42e; }
.sb-testimonial-cta::after { position: absolute; right: -75px; bottom: -95px; width: 245px; height: 245px; border: 38px solid #ffffff0c; border-radius: 50%; content: ''; }
.sb-testimonial-cta-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid #ffffff35; border-radius: 18px; background: #ffffff17; font-size: 20px; }
.sb-testimonial-cta > div:nth-child(2) { position: relative; z-index: 1; }
.sb-testimonial-cta > div > span { display: block; margin-bottom: 5px; color: #cbd7ff; font-size: 9px; font-weight: 800; letter-spacing: 1.3px; }
.sb-testimonial-cta h3 { margin: 0; color: #fff; font-family: var(--sb-font-display); font-size: 24px; }
.sb-testimonial-cta p { max-width: 680px; margin: 7px 0 0; color: #e8edff; font-size: 11px; line-height: 1.6; }
.sb-testimonial-cta-link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 18px; border-radius: 11px; background: #fff; color: var(--sb-blue-700); font-size: 11px; font-weight: 800; white-space: nowrap; }
.sb-testimonial-cta-link:hover { color: var(--sb-orange-600); transform: translateY(-1px); }

/* Public testimonial form */
.sb-testimonial-form-page { min-height: 70vh; background: var(--sb-bg-secondary); }
.sb-testimonial-form-hero { padding: 45px 0 80px; background: linear-gradient(135deg, #0c215f, #2449c7 68%, #5675ee); color: #fff; }
.sb-testimonial-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 35px; color: #d8e1ff; font-size: 11px; font-weight: 700; }
.sb-testimonial-back:hover { color: #fff; }
.sb-testimonial-form-hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); align-items: end; gap: 55px; }
.sb-testimonial-form-hero .sb-testimonial-eyebrow { color: #b9c8ff; }
.sb-testimonial-form-hero h1 { max-width: 700px; margin: 0; color: #fff; font-family: var(--sb-font-display); font-size: clamp(37px, 5vw, 58px); letter-spacing: -1.4px; }
.sb-testimonial-form-hero p { max-width: 680px; margin: 15px 0 0; color: #dce5ff; font-size: 14px; line-height: 1.75; }
.sb-testimonial-form-promise { display: flex; gap: 13px; padding: 18px; border: 1px solid #ffffff2e; border-radius: 16px; background: #ffffff12; backdrop-filter: blur(8px); }
.sb-testimonial-form-promise > span { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; background: #ffffff1c; }
.sb-testimonial-form-promise div { display: grid; gap: 4px; }
.sb-testimonial-form-promise strong { font-size: 11px; }
.sb-testimonial-form-promise small { color: #d6e0ff; font-size: 10px; line-height: 1.5; }
.sb-testimonial-form-section { padding: 0 0 80px; }
.sb-testimonial-form-container { max-width: 850px; transform: translateY(-36px); }
.sb-testimonial-form { padding: clamp(25px, 5vw, 48px); border: 1px solid var(--sb-border); border-radius: 24px; background: var(--sb-bg); box-shadow: 0 24px 65px #12245f17; }
.sb-testimonial-form-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--sb-border); }
.sb-testimonial-form-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; background: var(--sb-blue-50); color: var(--sb-blue-600); font-size: 19px; }
.sb-testimonial-form-heading h2 { margin: 0; color: var(--sb-navy); font-family: var(--sb-font-display); font-size: 23px; }
.sb-testimonial-form-heading p { margin: 4px 0 0; color: var(--sb-gray-500); font-size: 10px; }
.sb-testimonial-form-grid, .sb-admin-upload-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sb-testimonial-form .sb-form-field, .sb-admin-page .sb-form-field { margin-bottom: 19px; }
.sb-form-field-wide { grid-column: 1 / -1; }
.sb-testimonial-form .sb-form-field label span, .sb-admin-page .sb-form-field label span, .sb-testimonial-rating-field legend span { color: #e04a5f; }
.sb-testimonial-form .sb-form-field label em, .sb-admin-page .sb-form-field label em { color: var(--sb-gray-400); font-size: 10px; font-style: normal; font-weight: 500; }
.sb-testimonial-form input:not([type=radio]):not([type=checkbox]), .sb-testimonial-form textarea, .sb-admin-page .sb-form-field input, .sb-admin-page .sb-form-field textarea, .sb-admin-page .sb-form-field select { width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--sb-border); border-radius: 11px; outline: 0; background: var(--sb-bg-secondary); color: var(--sb-text); font: 12px/1.5 var(--sb-font-body); transition: border-color .2s, box-shadow .2s, background .2s; }
.sb-testimonial-form textarea, .sb-admin-page .sb-form-field textarea { resize: vertical; }
.sb-testimonial-form input:focus, .sb-testimonial-form textarea:focus, .sb-admin-page .sb-form-field input:focus, .sb-admin-page .sb-form-field textarea:focus, .sb-admin-page .sb-form-field select:focus { border-color: var(--sb-blue-400); background: var(--sb-bg); box-shadow: 0 0 0 4px #3458f512; }
.sb-testimonial-form .sb-form-field small { color: var(--sb-gray-400); font-size: 9px; }
.sb-testimonial-rating-field { margin: 3px 0 24px; padding: 0; border: 0; }
.sb-testimonial-rating-field legend { margin-bottom: 10px; color: var(--sb-gray-700); font-size: 12px; font-weight: 700; }
.sb-testimonial-rating-options { display: flex; flex-direction: row; gap: 8px; }
.sb-testimonial-rating-options input { position: absolute; opacity: 0; pointer-events: none; }
.sb-testimonial-rating-options label { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 13px; border: 1px solid var(--sb-border); border-radius: 10px; background: var(--sb-bg-secondary); color: var(--sb-gray-400); font-size: 11px; font-weight: 700; cursor: pointer; }
.sb-testimonial-rating-options label i { color: #e1a324; }
.sb-testimonial-rating-options input:checked + label { border-color: #f1c462; background: #fff9e9; color: #7d5a0d; box-shadow: 0 0 0 3px #f1c46222; }
.sb-testimonial-rating-options input:focus-visible + label { outline: 3px solid #3458f54d; }
.sb-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.sb-testimonial-consent { display: flex; align-items: flex-start; gap: 11px; margin: 3px 0 25px; color: var(--sb-gray-600); font-size: 10px; line-height: 1.6; cursor: pointer; }
.sb-testimonial-consent input { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; accent-color: var(--sb-blue-600); }
.sb-testimonial-form-actions { display: flex; align-items: center; gap: 17px; }
.sb-testimonial-form-actions .sb-btn { justify-content: center; min-height: 50px; padding-inline: 22px; }
.sb-testimonial-form-actions > small { color: var(--sb-gray-400); font-size: 9px; line-height: 1.5; }

/* Testimonials administration */
.sb-admin-page { min-height: 78vh; padding: 30px 0 80px; background: var(--sb-bg-secondary); }
.sb-admin-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; align-items: start; }
.sb-admin-sidebar { position: sticky; top: 20px; overflow: hidden; border: 1px solid var(--sb-border); border-radius: 18px; background: var(--sb-bg); box-shadow: 0 12px 35px #12245f0b; }
.sb-admin-brand { display: flex; align-items: center; gap: 11px; padding: 20px; border-bottom: 1px solid var(--sb-border); }
.sb-admin-brand > span { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 12px; background: linear-gradient(135deg, var(--sb-blue-500), var(--sb-blue-700)); color: #fff; }
.sb-admin-brand div, .sb-admin-user div { display: grid; gap: 2px; min-width: 0; }
.sb-admin-brand strong, .sb-admin-user strong { color: var(--sb-gray-800); font-size: 12px; }
.sb-admin-brand small, .sb-admin-user small { color: var(--sb-gray-400); font-size: 9px; }
.sb-admin-sidebar nav { display: grid; gap: 5px; padding: 12px; }
.sb-admin-sidebar nav a { display: flex; align-items: center; gap: 10px; min-height: 43px; padding: 0 11px; border-radius: 10px; color: var(--sb-gray-600); font-size: 11px; font-weight: 700; }
.sb-admin-sidebar nav a > i { width: 17px; color: var(--sb-gray-400); text-align: center; }
.sb-admin-sidebar nav a b { display: grid; place-items: center; min-width: 20px; height: 20px; margin-left: auto; border-radius: 999px; background: #fff0d7; color: #a46400; font-size: 9px; }
.sb-admin-sidebar nav a:hover, .sb-admin-sidebar nav a.is-active { background: var(--sb-blue-50); color: var(--sb-blue-700); }
.sb-admin-sidebar nav a.is-active > i { color: var(--sb-blue-600); }
.sb-admin-user { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-top: 1px solid var(--sb-border); }
.sb-admin-user > span { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: var(--sb-gray-100); color: var(--sb-blue-700); font-size: 11px; font-weight: 800; }
.sb-admin-main { min-width: 0; }
.sb-admin-page-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.sb-admin-page-header h1 { margin: 0; color: var(--sb-navy); font-family: var(--sb-font-display); font-size: clamp(28px, 4vw, 38px); letter-spacing: -.8px; }
.sb-admin-page-header p { margin: 7px 0 0; color: var(--sb-gray-500); font-size: 11px; }
.sb-admin-page-header .sb-btn { flex: 0 0 auto; }
.sb-admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-bottom: 19px; }
.sb-admin-stats > div { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; align-items: center; padding: 15px; border: 1px solid var(--sb-border); border-radius: 14px; background: var(--sb-bg); }
.sb-admin-stats > div > span { display: grid; grid-row: 1 / 3; place-items: center; width: 37px; height: 37px; border-radius: 11px; font-size: 12px; }
.sb-admin-stats .is-neutral { background: var(--sb-gray-100); color: var(--sb-gray-600); }
.sb-admin-stats .is-pending { background: #fff6df; color: #a66b00; }
.sb-admin-stats .is-approved { background: #eafaf2; color: #137653; }
.sb-admin-stats .is-rejected { background: #fff0f1; color: #b23446; }
.sb-admin-stats strong { color: var(--sb-gray-800); font-size: 19px; line-height: 1; }
.sb-admin-stats small { color: var(--sb-gray-400); font-size: 9px; }
.sb-admin-filters { display: flex; gap: 7px; margin-bottom: 17px; overflow-x: auto; }
.sb-admin-filters a { display: inline-flex; align-items: center; gap: 7px; min-height: 37px; padding: 0 12px; border: 1px solid var(--sb-border); border-radius: 9px; background: var(--sb-bg); color: var(--sb-gray-500); font-size: 10px; font-weight: 700; white-space: nowrap; }
.sb-admin-filters a span { display: grid; place-items: center; min-width: 19px; height: 19px; border-radius: 999px; background: var(--sb-gray-100); font-size: 8px; }
.sb-admin-filters a.is-active { border-color: var(--sb-blue-500); background: var(--sb-blue-600); color: #fff; }
.sb-admin-filters a.is-active span { background: #ffffff25; color: #fff; }
.sb-admin-testimonial-list { display: grid; gap: 13px; }
.sb-admin-testimonial-card { padding: 21px; border: 1px solid var(--sb-border); border-radius: 16px; background: var(--sb-bg); box-shadow: 0 8px 26px #12245f08; }
.sb-admin-testimonial-card > header { display: flex; align-items: center; gap: 11px; }
.sb-admin-testimonial-card > header > div { display: grid; gap: 3px; min-width: 0; }
.sb-admin-testimonial-card > header strong { color: var(--sb-gray-800); font-size: 12px; }
.sb-admin-testimonial-card > header div span { overflow: hidden; color: var(--sb-gray-400); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.sb-admin-status { display: inline-flex; align-items: center; min-height: 25px; margin-left: auto; padding: 0 9px; border-radius: 999px; font-size: 8px; font-weight: 800; white-space: nowrap; }
.sb-admin-status.is-pending { background: #fff5dc; color: #9c6500; }
.sb-admin-status.is-approved { background: #e8faf1; color: #116d4e; }
.sb-admin-status.is-rejected { background: #fff0f1; color: #af3042; }
.sb-admin-testimonial-meta { display: flex; align-items: center; gap: 16px; margin: 15px 0 10px; color: var(--sb-gray-400); font-size: 9px; }
.sb-admin-testimonial-meta > span { display: flex; gap: 3px; color: #e4a324; }
.sb-admin-testimonial-card blockquote { margin: 0; padding: 15px; border-radius: 11px; background: var(--sb-bg-secondary); color: var(--sb-gray-700); font-size: 12px; line-height: 1.7; }
.sb-admin-moderation-form { margin-top: 14px; }
.sb-admin-moderation-form > label { display: block; margin-bottom: 6px; color: var(--sb-gray-500); font-size: 9px; font-weight: 700; }
.sb-admin-moderation-form label em { color: var(--sb-gray-400); font-style: normal; font-weight: 500; }
.sb-admin-moderation-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--sb-border); border-radius: 9px; outline: 0; background: var(--sb-bg-secondary); color: var(--sb-text); font: 10px/1.5 var(--sb-font-body); resize: vertical; }
.sb-admin-moderation-form textarea:focus { border-color: var(--sb-blue-400); }
.sb-admin-moderation-form > div, .sb-admin-screenshot-info form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.sb-admin-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid; border-radius: 8px; background: transparent; font-size: 9px; font-weight: 800; cursor: pointer; }
.sb-admin-action.is-approve { border-color: #8dd7b7; color: #116d4e; }
.sb-admin-action.is-approve:hover { background: #e8faf1; }
.sb-admin-action.is-reject { border-color: #f0aeb7; color: #ae3142; }
.sb-admin-action.is-reject:hover { background: #fff0f1; }
.sb-admin-empty { display: grid; place-items: center; min-height: 190px; padding: 30px; border: 1px dashed var(--sb-border); border-radius: 16px; background: var(--sb-bg); color: var(--sb-gray-400); text-align: center; }
.sb-admin-empty i { margin-bottom: 12px; font-size: 27px; }
.sb-admin-empty strong { color: var(--sb-gray-700); font-size: 13px; }
.sb-admin-empty span { margin-top: 5px; font-size: 10px; }
.sb-admin-screenshot-form-card, .sb-admin-screenshot-library { margin-bottom: 22px; padding: 23px; border: 1px solid var(--sb-border); border-radius: 17px; background: var(--sb-bg); box-shadow: 0 9px 28px #12245f08; }
.sb-admin-screenshot-form-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.sb-admin-screenshot-form-heading > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--sb-blue-50); color: var(--sb-blue-600); }
.sb-admin-screenshot-form-heading h2, .sb-admin-screenshot-library h2 { margin: 0; color: var(--sb-navy); font-family: var(--sb-font-display); font-size: 20px; }
.sb-admin-screenshot-form-heading p { margin: 3px 0 0; color: var(--sb-gray-400); font-size: 9px; }
.sb-admin-screenshot-form { display: grid; }
.sb-admin-upload-field { position: relative; display: grid; place-items: center; min-height: 180px; margin-bottom: 20px; overflow: hidden; border: 1.5px dashed var(--sb-blue-300); border-radius: 14px; background: var(--sb-blue-50); }
.sb-admin-upload-field input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sb-admin-upload-field label { position: relative; z-index: 2; display: grid; justify-items: center; gap: 6px; padding: 25px; color: var(--sb-gray-600); text-align: center; cursor: pointer; }
.sb-admin-upload-field label > span { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 3px; border-radius: 14px; background: var(--sb-bg); color: var(--sb-blue-600); font-size: 19px; box-shadow: 0 7px 20px #284ccc16; }
.sb-admin-upload-field label strong { font-size: 11px; }
.sb-admin-upload-field label small { color: var(--sb-gray-400); font-size: 9px; }
.sb-admin-upload-field img { width: 100%; max-height: 330px; object-fit: contain; background: var(--sb-bg); }
.sb-admin-upload-field img:not([hidden]) + * { display: none; }
.sb-admin-screenshot-form > .sb-btn { justify-self: start; }
.sb-admin-screenshot-library > header { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 17px; }
.sb-admin-screenshot-library > header > strong { color: var(--sb-gray-400); font-size: 10px; }
.sb-admin-screenshot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sb-admin-screenshot-card { overflow: hidden; border: 1px solid var(--sb-border); border-radius: 14px; background: var(--sb-bg-secondary); }
.sb-admin-screenshot-image { position: relative; display: grid; place-items: center; min-height: 190px; background: var(--sb-gray-100); }
.sb-admin-screenshot-image img { width: 100%; height: 230px; object-fit: contain; }
.sb-admin-screenshot-image .sb-admin-status { position: absolute; top: 10px; right: 10px; }
.sb-admin-screenshot-info { padding: 14px; }
.sb-admin-screenshot-info > div { display: grid; gap: 3px; }
.sb-admin-screenshot-info strong { color: var(--sb-gray-800); font-size: 11px; }
.sb-admin-screenshot-info span, .sb-admin-screenshot-info p { color: var(--sb-gray-400); font-size: 9px; }
.sb-admin-screenshot-info p { margin: 9px 0 0; color: var(--sb-gray-600); line-height: 1.6; }

html.sb-dark .sb-testimonial-card, html.sb-dark .sb-testimonials-empty, html.sb-dark .sb-testimonial-form, html.sb-dark .sb-admin-sidebar, html.sb-dark .sb-admin-stats > div, html.sb-dark .sb-admin-testimonial-card, html.sb-dark .sb-admin-empty, html.sb-dark .sb-admin-screenshot-form-card, html.sb-dark .sb-admin-screenshot-library { box-shadow: 0 14px 42px #0003; }
html.sb-dark .sb-testimonial-rating-options input:checked + label { border-color: #b98a2f; background: #5c461d55; color: #ffd986; }
html.sb-dark .sb-admin-stats .is-pending, html.sb-dark .sb-admin-status.is-pending { background: #6d4d174d; color: #ffd17a; }
html.sb-dark .sb-admin-stats .is-approved, html.sb-dark .sb-admin-status.is-approved { background: #13684945; color: #8ce0bf; }
html.sb-dark .sb-admin-stats .is-rejected, html.sb-dark .sb-admin-status.is-rejected { background: #7b293944; color: #ffadba; }
html.sb-dark .sb-admin-upload-field { border-color: #5877e766; background: #3458f511; }

@media (max-width: 980px) {
    .sb-testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sb-testimonial-cta { grid-template-columns: auto minmax(0, 1fr); }
    .sb-testimonial-cta-link { grid-column: 2; justify-self: start; }
    .sb-admin-shell { grid-template-columns: 1fr; }
    .sb-admin-sidebar { position: static; }
    .sb-admin-sidebar nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sb-admin-sidebar nav a { justify-content: center; text-align: center; }
    .sb-admin-user { display: none; }
}

@media (max-width: 700px) {
    .sb-testimonials-section { padding: 54px 0 60px; }
    .sb-testimonials-heading, .sb-admin-page-header { align-items: flex-start; flex-direction: column; }
    .sb-testimonials-grid { grid-template-columns: 1fr; }
    .sb-testimonial-card { min-height: 220px; }
    .sb-testimonial-cta { grid-template-columns: 1fr; padding: 25px; }
    .sb-testimonial-cta-link { grid-column: auto; justify-self: stretch; justify-content: center; }
    .sb-testimonial-form-hero { padding: 32px 0 65px; }
    .sb-testimonial-form-hero-grid { grid-template-columns: 1fr; gap: 25px; }
    .sb-testimonial-form-grid, .sb-admin-upload-fields { grid-template-columns: 1fr; gap: 0; }
    .sb-form-field-wide { grid-column: auto; }
    .sb-testimonial-rating-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
    .sb-testimonial-rating-options label { justify-content: center; padding: 0 5px; }
    .sb-testimonial-form-actions { align-items: stretch; flex-direction: column; }
    .sb-admin-page { padding-top: 16px; }
    .sb-admin-sidebar nav { grid-template-columns: 1fr; }
    .sb-admin-sidebar nav a { justify-content: flex-start; text-align: left; }
    .sb-admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sb-admin-screenshot-grid { grid-template-columns: 1fr; }
    .sb-admin-page-header .sb-btn, .sb-admin-screenshot-form > .sb-btn { width: 100%; justify-content: center; }
}