/* ============================================
   Modern Flat Design — Light Theme
   Accent: Blue (#005CBE)
   Style: Material / Industrial / Hi-Tech / Flat
   ============================================ */

:root {
    --accent: #005CBE;
    --accent-dark: #004A99;
    --accent-light: #D7E3FF;
    --accent-hover: #004A99;
    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --text: #1A1A2E;
    --text-secondary: #5A6B7A;
    --text-light: #95A5A6;
    --border: #E1E8ED;
    --border-dark: #CBD5D8;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-lg: 0 4px 20px rgba(0,0,0,0.10);
    --radius: 6px;
    --radius-sm: 4px;
    --radius-lg: 10px;
    --success: #4CAF50;
    --warning: #FF9800;
    --danger: #FF6B00;
    --info: #005CBE;
    /* explicit list instead of `all`: `all` also animates width/height/padding etc.,
       which forces layout on every frame */
    --transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
}

/* ===== Base ===== */
body {
    font-family: 'Roboto', 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-weight: 400;
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
    /* white page with a faint shop pattern: a 2×2 grid of cart / $ / bag icons */
    background-color: var(--bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23005CBE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='.08'%3E%3Cpath d='M17 20h4l3.5 14h13l3-10H22.5'/%3E%3Ccircle cx='26' cy='38.5' r='1.6'/%3E%3Ccircle cx='36' cy='38.5' r='1.6'/%3E%3Cpath d='M76 83h18l-1.6 17H77.6z'/%3E%3Cpath d='M80.5 83v-3a4.5 4.5 0 0 1 9 0v3'/%3E%3Ccircle cx='90' cy='30' r='11'/%3E%3Ccircle cx='30' cy='90' r='11'/%3E%3C/g%3E%3Cg fill='%23005CBE' opacity='.08' font-family='Arial,sans-serif' font-size='14' font-weight='700' text-anchor='middle'%3E%3Ctext x='90' y='35'%3E$%3C/text%3E%3Ctext x='30' y='95'%3E$%3C/text%3E%3Ccircle cx='0' cy='0' r='1.2'/%3E%3Ccircle cx='60' cy='60' r='1.2'/%3E%3Ccircle cx='0' cy='120' r='1.2'/%3E%3Ccircle cx='120' cy='0' r='1.2'/%3E%3Ccircle cx='120' cy='120' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 120px 120px;
    width: 100%;
}
/* Text is upright everywhere; only the logo wordmark stays italic */
.brand-name, .footer-powered-brand { font-style: italic; }
h1, h2, h3, h4, h5, h6 { color: var(--text); margin: 0 0 10px 0; }
h1 { font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: -.2px; }
h2 { font-size: 22px; font-weight: 700; line-height: 1.3; }
h3 { font-size: 18px; font-weight: 600; line-height: 1.35; }
h4 { font-size: 16px; font-weight: 600; line-height: 1.35; }
h5 { font-size: 15px; font-weight: 700; line-height: 1.4; }
h6 { font-size: 13px; font-weight: 700; line-height: 1.4; }
a { color: var(--accent); transition: var(--transition); }
a:hover { color: var(--accent-dark); text-decoration: none; }
p { margin-bottom: 15px; }
.fa { font-size: 14px; }

/* ===== Bootstrap Overrides ===== */
legend { font-size: 18px; padding: 10px 0; border-bottom: 1px solid var(--border); }
label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
select.form-control, textarea.form-control,
input[type="text"].form-control, input[type="password"].form-control,
input[type="datetime"].form-control, input[type="datetime-local"].form-control,
input[type="date"].form-control, input[type="month"].form-control,
input[type="time"].form-control, input[type="week"].form-control,
input[type="number"].form-control, input[type="email"].form-control,
input[type="url"].form-control, input[type="search"].form-control,
input[type="tel"].form-control, input[type="color"].form-control {
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: none;
    transition: var(--transition);
}
.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0,92,190,0.12);
}
.input-group input, .input-group select, .input-group .dropdown-menu, .input-group .popover { font-size: 13px; }
.input-group .input-group-addon { font-size: 13px; height: 36px; border: 1px solid var(--border); }
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg { display: inline; }
.nav-tabs { margin-bottom: 20px; border-bottom: 2px solid var(--border); }
.nav-tabs > li > a { border: none; border-bottom: 2px solid transparent; color: var(--text-secondary); font-weight: 500; transition: var(--transition); }
.nav-tabs > li > a:hover { border: none; border-bottom: 2px solid var(--accent); color: var(--accent); background: transparent; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    border: none; border-bottom: 2px solid var(--accent); color: var(--accent); background: transparent; font-weight: 600;
}
div.required .control-label:before { content: '* '; color: var(--danger); font-weight: bold; }
.dropdown-menu { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 0; }
.dropdown-menu li > a { padding: 10px 20px; color: var(--text); transition: var(--transition); }
.dropdown-menu li > a:hover { color: var(--accent); background: var(--accent-light); }

/* ===== Header ===== */
#header-main {
    background: linear-gradient(120deg, var(--accent), var(--accent-dark));
    padding: 14px 0;
    margin: 12px 12px 0;
    border-radius: 22px;
    border-bottom: none;
    box-shadow: 0 10px 26px -12px rgba(0, 50, 130, 0.55);
    position: relative;
}
#header-main::after {
    content: ''; position: absolute; bottom: 0; left: 22px; right: 22px; height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-light), var(--accent), var(--accent-light), transparent);
    border-radius: 3px;
    pointer-events: none;
}
.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}
.header-left { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.header-center { flex: 1 1 380px; max-width: 640px; }
.header-right { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }

/* The theme button and the bell sit in one wrapper (phones turn it into a split chip).
   Desktop collapses the wrapper and these orders keep the old visual row */
.m-duo { display: contents; }
@media (min-width: 768px) {
    .header-right .theme-toggle { order: 1; }
    .header-right #compare-total { order: 2; }
    .header-right #wishlist-total { order: 3; }
    .header-right #notify-btn { order: 4; }
    .header-right .m-user { order: 5; }
    .header-right .m-logout-btn { order: 6; }
    .header-right .login-pill { order: 7; }
    .header-right #cart { order: 8; }
}

/* Brand Logo — the same bag as the phones: white disc with the accent bag inside a multi-colour ring */
.brand-logo {
    display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff;
    position: relative;
}
.brand-logo::before {
    content: ''; position: absolute; left: 0; top: 50%; width: 40px; height: 40px; margin-top: -20px;
    border-radius: 50%; padding: 2.5px; box-sizing: border-box; pointer-events: none;
    background: conic-gradient(#f5c400, #e53935, #2e9e57, #ff8a00, #1e6fe0, #f5c400);
    /* only the ring: the inside is cut out, the bag icon shows through */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
.brand-logo > i {
    font-size: 16px; color: var(--accent);
    width: 32px; height: 32px; line-height: 32px; text-align: center; margin: 4px;
    background: #fff; border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
/* the wordmark sits in a glass pill with room to breathe */
.brand-text {
    display: flex; flex-direction: column; line-height: 1.2;
    padding: 7px 16px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50px;
}
.brand-name { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -0.5px; }
.brand-sub { font-size: 11px; color: rgba(255,255,255,0.7); text-transform: lowercase; }
/* Catalog Pill (glass) */
.catalog-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; background: rgba(255,255,255,0.16); color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50px; font-size: 14px; font-weight: 600;
    text-decoration: none; transition: var(--transition); white-space: nowrap;
}
.catalog-pill:hover { background: #fff; color: var(--accent); }
.catalog-pill i { font-size: 16px; }

/* Header Icon Buttons (Wishlist, Notifications) */
.header-icon-btn {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: transparent; border: none; color: rgba(255,255,255,0.85);
    text-decoration: none; transition: var(--transition); cursor: pointer;
}
.header-icon-btn:hover { background: rgba(255,255,255,0.16); color: #fff; }
.header-icon-btn i { font-size: 18px; }
.icon-badge {
    position: absolute; top: -2px; right: -2px;
    min-width: 18px; height: 18px; line-height: 18px;
    background: #fff; color: var(--accent); font-size: 10px; font-weight: 700;
    border-radius: 50%; text-align: center; padding: 0 4px;
    border: 2px solid var(--accent);
}

/* Login Pill (glass) */
.login-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; background: rgba(255,255,255,0.16); color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50px; font-size: 13px; font-weight: 600;
    text-decoration: none; transition: var(--transition); white-space: nowrap;
}
.login-pill:hover { background: #fff; color: var(--accent); text-decoration: none; }
.login-pill i { font-size: 14px; }

/* ===== Search Panel (glass) ===== */
#search {
    display: flex; align-items: center; width: 100%;
    background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50px; overflow: hidden;
}
#search .input-group-btn { width: auto; flex-shrink: 0; }
#search .search-filter { flex-shrink: 0; }
#search .form-control { min-width: 0; }
#search .form-control {
    flex: 1; height: 44px; border: none; background: transparent; color: #fff;
    border-radius: 0;
    font-size: 14px; box-shadow: none; transition: var(--transition);
}
#search .form-control:focus { border-color: transparent; box-shadow: none; }
#search .form-control::placeholder { color: rgba(255,255,255,0.65); }

.search-filter { display: inline-flex; }
.search-filter-btn {
    display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px;
    border: none; border-right: 1px solid rgba(255,255,255,0.2); border-radius: 0;
    background: transparent; color: rgba(255,255,255,0.85); font-size: 13px;
    cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.search-filter-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }
.search-filter-menu { min-width: 180px; }

.search-pill-btn {
    display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px;
    background: #fff; color: var(--accent); border: none;
    border-radius: 0; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.search-pill-btn:hover { background: rgba(255,255,255,0.85); }
.search-pill-btn i { font-size: 16px; }

/* ===== Search suggestions: live product dropdown under the bar (same results as the phones' sheet) ===== */
.search-suggest-wrap { position: relative; width: 100%; }
.search-suggest {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1200;
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: 0 24px 50px -18px rgba(0, 30, 80, 0.5);
    max-height: min(70vh, 480px); overflow-y: auto; padding: 8px;
}
.search-suggest.open { display: block; }
.ss-hint { display: flex; align-items: center; gap: 10px; padding: 14px 12px; font-size: 13px; color: var(--text-secondary); }
.ss-hint i { color: var(--accent); width: 18px; text-align: center; }
.ss-item {
    display: flex; align-items: center; gap: 12px; padding: 8px 10px;
    border-radius: 12px; text-decoration: none; transition: var(--transition);
}
.ss-item:hover { background: var(--accent-light); text-decoration: none; }
.ss-item > i { margin-left: auto; color: var(--text-light); font-size: 15px; }
.ss-item-img {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px;
    background: var(--bg); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ss-item-img img { max-width: 100%; max-height: 100%; }
.ss-item-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ss-item-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-item-price { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.ss-all {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 6px; padding: 11px; border-top: 1px solid var(--border);
    font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none;
}
.ss-all:hover { background: var(--accent-light); text-decoration: none; border-radius: 0 0 16px 16px; }

/* ===== Cart Pill (glass) ===== */
#cart { margin: 0; }
.cart-pill {
    display: flex; align-items: center; gap: 8px; padding: 8px 16px;
    background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50px; color: #fff; cursor: pointer;
    transition: var(--transition); font-size: 13px;
}
.cart-pill:hover, #cart.open .cart-pill {
    background: #fff; color: var(--accent); border-color: #fff;
}
.cart-pill i { font-size: 18px; }
.cart-label { font-weight: 600; }
.cart-qty {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; line-height: 22px;
    background: #fff; color: var(--accent); font-size: 11px; font-weight: 700;
    border-radius: 50%; padding: 0 5px; transition: var(--transition);
}
#cart.open .cart-qty { background: var(--accent); color: #fff; }
.cart-total {
    font-weight: 700; font-size: 14px;
    min-width: 96px; text-align: right; white-space: nowrap;
}

/* ===== Header, light theme: the phones keep the frosted glass card;
   on the PC the header is a footer-style strip — full width, square, solid ===== */
html[data-theme="light"] #header-main {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
html.perf-lite[data-theme="light"] #header-main, html.perf-low[data-theme="light"] #header-main {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: rgba(255, 255, 255, 0.92);
}
html[data-theme="light"] #header-main::after { display: none; }
/* PC: the footer's design — solid full-width strip, no rounded corners, accent line below */
@media (min-width: 768px) {
    html[data-theme="light"] #header-main {
        margin: 0; border-radius: 0; box-shadow: none;
        background: var(--surface);
        -webkit-backdrop-filter: none; backdrop-filter: none;
        border: none; border-bottom: 1px solid var(--border);
        padding: 16px 0;
    }
    html[data-theme="light"] #header-main::after {
        display: block; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 0;
        background: linear-gradient(90deg, transparent, var(--accent-light), var(--accent), var(--accent-light), transparent);
        pointer-events: none;
    }
}
html[data-theme="light"] .brand-logo > i { background: transparent; box-shadow: none; }
html[data-theme="light"] .brand-text { padding: 0; background: transparent; border-color: transparent; }
html[data-theme="light"] .brand-name { color: var(--accent); }
html[data-theme="light"] .brand-sub { color: var(--text-secondary); }
html[data-theme="light"] .header-icon-btn { background: var(--accent-light); color: var(--accent); }
html[data-theme="light"] .header-icon-btn:hover { background: var(--accent); color: #fff; }
html[data-theme="light"] .catalog-pill { background: var(--accent-light); color: var(--accent); border-color: transparent; }
html[data-theme="light"] .catalog-pill:hover { background: var(--accent); color: #fff; }
html[data-theme="light"] .login-pill { background: var(--accent-light); color: var(--accent); border-color: transparent; }
html[data-theme="light"] .login-pill:hover { background: var(--accent); color: #fff; }
html[data-theme="light"] #search { background: var(--surface); border-color: var(--border); }
html[data-theme="light"] #search .form-control { color: var(--text); }
html[data-theme="light"] #search .form-control::placeholder { color: var(--text-light); }
html[data-theme="light"] .search-filter-btn { color: var(--text-secondary); border-right-color: var(--border); }
html[data-theme="light"] .search-filter-btn:hover { color: var(--accent); background: var(--accent-light); }
html[data-theme="light"] .search-pill-btn { background: var(--accent); color: #fff; }
html[data-theme="light"] .search-pill-btn:hover { background: var(--accent-dark); }
html[data-theme="light"] .cart-pill { background: var(--accent-light); color: var(--accent); border-color: transparent; }
html[data-theme="light"] .cart-pill:hover, html[data-theme="light"] #cart.open .cart-pill { background: var(--accent); color: #fff; border-color: transparent; }
html[data-theme="light"] #cart.open .cart-qty { background: #fff; color: var(--accent); }
/* PC: header buttons in solid accent (like "Пошук"), darker on hover */
@media (min-width: 768px) {
    html[data-theme="light"] .header-icon-btn,
    html[data-theme="light"] .catalog-pill,
    html[data-theme="light"] .login-pill,
    html[data-theme="light"] .cart-pill {
        background: var(--accent); color: #fff; border-color: transparent;
        box-shadow: 0 4px 12px -4px rgba(0, 92, 190, 0.55);
    }
    html[data-theme="light"] .header-icon-btn:hover,
    html[data-theme="light"] .catalog-pill:hover, html[data-theme="light"] .catalog-pill.active,
    html[data-theme="light"] .login-pill:hover,
    html[data-theme="light"] .cart-pill:hover, html[data-theme="light"] #cart.open .cart-pill {
        background: var(--accent-dark); color: #fff;
    }
    html[data-theme="light"] .cart-pill .cart-total { color: #fff; }
}

#cart .dropdown-menu { background: var(--surface); z-index: 1001; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
#cart .dropdown-menu { min-width: 380px; overflow-y: auto; max-height: 600px; scrollbar-width: thin; overflow-x: hidden; }
#cart .dropdown-menu table { margin-bottom: 0; }
#cart .dropdown-menu li > div { min-width: 360px; padding: 10px 15px; }
#cart .dropdown-menu li p { margin: 20px 0; text-align: center; color: var(--text-secondary); }
#cart .table > tbody > tr > td { vertical-align: middle; border-top: 1px solid var(--border); }
#cart .img-thumbnail { border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* ===== Menu (Navbar) ===== */
#menu {
    background: transparent; border: none; border-radius: 0;
    min-height: 48px; box-shadow: none;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0; padding: 0 24px; width: 100%;
}
#menu .navbar { margin-bottom: 0; min-height: 48px; border: none; }
#menu .nav > li > a {
    color: var(--text-secondary); padding: 14px 22px; min-height: 20px;
    background: transparent; transition: var(--transition); font-weight: 500;
    font-size: 14px; display: flex; align-items: center; gap: 8px;
    border-radius: var(--radius-sm);
}
#menu .nav > li > a:hover { color: var(--accent); background: var(--accent-light); }
#menu .nav > li.active > a {
    color: #fff; background: var(--accent); font-weight: 600;
}
#menu .nav > li > a i { font-size: 15px; }
#menu .navbar-collapse { padding: 0; }
@media (min-width: 768px) {
    #menu .nav.navbar-nav {
        float: none;
        display: flex;
        justify-content: center;
        width: 100%;
    }
}
#menu #category { float: left; padding-left: 20px; font-size: 16px; font-weight: 700; line-height: 48px; color: var(--text); }
#menu .btn-navbar {
    font-size: 18px; color: var(--text-secondary); padding: 4px 16px; float: right;
    background: var(--bg); border: none; border-radius: var(--radius-sm);
}
#menu .btn-navbar:hover, #menu .btn-navbar:focus, #menu .btn-navbar:active {
    color: var(--accent); background: var(--accent-light);
}

/* ===== Site Sidebar (persistent, admin-style) ===== */
.site-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 180px; z-index: 1000;
    background: rgba(255,255,255,0.97); /* was 0.65 + backdrop blur(20px): repainted on every scroll frame */
    border-right: 1px solid rgba(255,255,255,0.5);
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; overflow: hidden;
    transform: translateX(-100%); transition: transform 0.3s ease;
}
.site-sidebar::-webkit-scrollbar { width: 4px; }
.site-sidebar::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 2px; }
.site-sidebar-header {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    background: linear-gradient(120deg, var(--accent), var(--accent-dark));
    color: #fff; font-size: 15px; font-weight: 700; font-style: normal;
    border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 8px;
}
.site-sidebar-header i:first-child { font-size: 16px; color: #fff; }
.site-sidebar-header span { flex: 1; }
.sidebar-close-btn {
    display: none; border: none; background: transparent; color: var(--text-secondary);
    font-size: 16px; cursor: pointer; padding: 4px;
}
/* flex 0 1 auto: the promo below sits right after the pills (higher up),
   not glued to the screen bottom; the list itself still scrolls when long */
.site-sidebar-body {
    display: flex; flex-direction: column; gap: 2px; padding: 0 10px;
    flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin;
}
.site-sidebar-body::-webkit-scrollbar { width: 4px; }
.site-sidebar-body::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 2px; }
.site-sidebar-pill {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: 50px; color: var(--text-secondary); text-decoration: none;
    font-size: 12.5px; font-weight: 500; font-style: normal; transition: var(--transition);
}
.site-sidebar-pill i { width: 24px; height: 24px; line-height: 24px; text-align: center; font-size: 12px; flex-shrink: 0;
    background: var(--accent-light); color: var(--accent); border-radius: 50%; transition: var(--transition); }
.site-sidebar-pill:hover { background: var(--accent-light); color: var(--accent); }
.site-sidebar-pill:hover i { background: var(--accent); color: #fff; }
.site-sidebar-pill.active { background: var(--accent); color: #fff; font-weight: 600; }
.site-sidebar-pill.active i { background: #fff; color: var(--accent); }
.site-sidebar-divider { height: 1px; background: var(--border); margin: 10px 12px; }

/* Sidebar sections: title → underline → pills (compact) */
.site-sidebar-section { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.site-sidebar-section-title {
    padding: 0 6px 4px; margin: 0 0 4px; border-bottom: 1px solid var(--border);
    font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    color: var(--text-light); font-style: normal;
}
@media (min-width: 992px) {
    .site-sidebar-header { padding: 11px 12px; font-size: 14px; }
    .site-sidebar-body { padding: 0 8px; }
    /* PC: taller pills, easier to hit */
    .site-sidebar-section { gap: 4px; margin-bottom: 10px; }
    .site-sidebar-pill { gap: 10px; min-height: 42px; padding: 8px 12px 8px 8px; font-size: 13px; }
    .site-sidebar-pill i { width: 28px; height: 28px; line-height: 28px; font-size: 13px; }
    .sidebar-promo { margin: 12px 8px 14px; }
    .sidebar-promo-track { height: 190px; }
    .sidebar-promo-slide { padding: 14px 30px 14px 14px; }
}

/* Sidebar Promo (auto-rotating ad slider) */
.sidebar-promo {
    flex-shrink: 0; margin: 12px 10px 14px; border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: var(--shadow); position: relative;
}
.sidebar-promo-track { position: relative; height: 150px; overflow: hidden; }
/* vertical slider: the active slide in place, the others parked below/above (menu.twig spGo) */
.sidebar-promo-slide {
    position: absolute; inset: 0; padding: 13px 30px 13px 13px; color: #fff;
    transform: translateY(100%); transition: transform 0.5s cubic-bezier(.22,1,.36,1);
    display: flex; flex-direction: column; justify-content: center;
}
.sidebar-promo-slide.active { transform: translateY(0); }
.sidebar-promo-slide.no-anim { transition: none; }
.sidebar-promo-icon {
    position: absolute; top: 11px; right: 11px; font-size: 18px; color: rgba(255,255,255,0.4);
}
.sidebar-promo-title { font-size: 14px; font-weight: 700; line-height: 1.3; margin-bottom: 4px; }
.sidebar-promo-text { font-size: 11px; color: rgba(255,255,255,0.85); line-height: 1.4; }
.sidebar-promo-dots {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 5px; z-index: 2;
}
.sidebar-promo-dots span {
    width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.4); transition: var(--transition);
    cursor: pointer;
}
.sidebar-promo-dots span.active { background: #fff; height: 14px; border-radius: 3px; }
/* ▲ / ▼ at the top and bottom centre of the slider */
.sp-nav {
    position: absolute; left: 50%; z-index: 3; width: 30px; height: 20px; margin-left: -15px; padding: 0;
    border: none; background: rgba(255,255,255,0.22); color: #fff; font-size: 15px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: var(--transition);
}
.sp-nav:hover { background: rgba(255,255,255,0.4); }
.sp-up { top: 0; border-radius: 0 0 10px 10px; }
.sp-down { bottom: 0; border-radius: 10px 10px 0 0; }

.sidebar-toggle-btn { display: none; }
.sidebar-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 999;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.sidebar-overlay.active { opacity: 1; pointer-events: auto; }

@media (min-width: 992px) {
    body { padding-left: 180px; }
    /* rounded corners on the side facing the content; the left ones sit flush against the screen edge */
    .site-sidebar { transform: translateX(0); border-radius: 0 20px 20px 0; }
    .container { width: auto; max-width: 1740px; }
    /* category page: same 1240px content width as the product page, centred (not full-width) */
    #product-category.container { max-width: 1270px; }   /* 1240 + the 15px column gutters */
}

/* ===== Cart right sidebar (slide-out drawer, styled like the left menu) ===== */
.cart-sidebar-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1199;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.cart-sidebar-overlay.active { opacity: 1; pointer-events: auto; }
.cart-sidebar {
    position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 92vw; z-index: 1200;
    background: rgba(255,255,255,0.97); /* was 0.72 + backdrop blur(20px) */
    border-left: 1px solid rgba(255,255,255,0.5);
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; overflow: hidden;
    transform: translateX(100%); transition: transform 0.3s ease;
}
.cart-sidebar.active { transform: translateX(0); }
.cart-sidebar-header {
    display: flex; align-items: center; gap: 10px; padding: 16px 20px;
    background: linear-gradient(120deg, var(--accent), var(--accent-dark));
    color: #fff; font-size: 15px; font-weight: 700; font-style: normal;
    border-bottom: 1px solid rgba(255,255,255,0.12); flex-shrink: 0;
}
.cart-sidebar-header i:first-child { font-size: 16px; color: #fff; }
.cart-sidebar-header span { flex: 1; }
.cart-sidebar-close {
    border: none; background: rgba(255,255,255,0.18); color: #fff;
    width: 30px; height: 30px; border-radius: 50%; font-size: 15px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: var(--transition);
}
.cart-sidebar-close:hover { background: rgba(255,255,255,0.32); }
.cart-sidebar-body {
    flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 14px;
}
.cart-sidebar-body::-webkit-scrollbar { width: 4px; }
.cart-sidebar-body::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 2px; }
.cart-sidebar-list { list-style: none; margin: 0; padding: 0; }
.cart-sidebar-list > li { padding: 0; margin: 0; }

/* Product row = compact card, never overflows the drawer */
.cart-item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 12px 0; border-bottom: 1px solid var(--border);
}
.cart-item:last-child { border-bottom: none; }
.cart-item-img {
    flex: 0 0 56px; width: 56px; height: 56px; border-radius: var(--radius);
    overflow: hidden; background: var(--bg); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; color: var(--text-light);
}
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name {
    display: block; font-size: 13px; font-weight: 600; line-height: 1.35;
    color: var(--text); text-decoration: none; font-style: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cart-item-name:hover { color: var(--accent); }
.cart-item-opt { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.cart-item-meta { display: flex; align-items: baseline; gap: 8px; margin-top: 5px; }
.cart-item-qty { font-size: 12px; color: var(--text-secondary); }
.cart-item-total { font-size: 14px; font-weight: 700; color: var(--accent); }
.cart-item-remove {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    border: none; background: var(--bg); color: var(--text-secondary);
    cursor: pointer; font-size: 12px; transition: var(--transition);
    display: flex; align-items: center; justify-content: center;
}
.cart-item-remove:hover { background: #FFF0E6; color: #FF6B00; }

.cart-totals {
    margin-top: 14px; padding: 12px 14px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
}
.cart-total-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; color: var(--text-secondary); padding: 3px 0;
}
.cart-total-row:last-child { font-size: 16px; font-weight: 800; color: var(--text); padding-top: 8px; }
.cart-total-row:last-child span:last-child { color: var(--accent); }

.cart-actions { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.cart-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 14px; border-radius: var(--radius); text-decoration: none;
    font-size: 14px; font-weight: 700; font-style: normal; transition: var(--transition);
}
.cart-btn-light { background: var(--accent-light); color: var(--accent); }
.cart-btn-light:hover { background: var(--accent); color: #fff; }
.cart-btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff;
    box-shadow: 0 6px 16px rgba(0,92,190,0.28);
}
.cart-btn-primary:hover { transform: translateY(-1px); color: #fff; }

.cart-sidebar-empty { text-align: center; color: var(--text-light); padding: 60px 20px; }
.cart-sidebar-empty i { font-size: 46px; opacity: 0.35; display: block; margin-bottom: 14px; }
.cart-sidebar-empty p { font-size: 15px; margin: 0; }

/* ===== Multi Section (sidebar + slider) ===== */
.multi-section { background: var(--bg); padding: 24px 0; }
.ms-layout { display: flex; gap: 20px; height: 340px; }

/* Sidebar */
.ms-sidebar {
    flex: 0 0 240px; display: flex; flex-direction: column;
    background: linear-gradient(160deg, var(--accent), var(--accent-dark));
    border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden;
}
.ms-sidebar-header {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px;
    background: rgba(255,255,255,0.1); color: #fff; font-size: 14px; font-weight: 700; font-style: normal;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.ms-sidebar-header i { font-size: 16px; }
.ms-sidebar-body {
    flex: 1; overflow-y: auto; scrollbar-width: thin; padding: 8px;
    display: flex; flex-direction: column; gap: 4px;
}
.ms-sidebar-body::-webkit-scrollbar { width: 4px; }
.ms-sidebar-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 2px; }
.ms-sidebar-pill {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    border-radius: 50px; font-size: 13px; font-weight: 500; font-style: normal;
    color: rgba(255,255,255,0.85); text-decoration: none; transition: var(--transition);
    white-space: nowrap; overflow: hidden;
}
.ms-sidebar-pill > i:first-child {
    flex-shrink: 0; width: 28px; height: 28px; line-height: 28px; text-align: center;
    background: rgba(255,255,255,0.15); color: #fff; border-radius: 50%; font-size: 13px;
    transition: var(--transition);
}
.ms-sidebar-pill span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ms-pill-arrow { flex-shrink: 0; font-size: 12px; color: rgba(255,255,255,0.4); opacity: 0; transform: translateX(-4px); transition: var(--transition); }
.ms-sidebar-pill:hover { background: rgba(255,255,255,0.15); color: #fff; }
.ms-sidebar-pill:hover .ms-pill-arrow { opacity: 1; transform: translateX(0); }
.ms-sidebar-pill.active { background: rgba(255,255,255,0.2); color: #fff; font-weight: 700; }
.ms-sidebar-pill.active > i:first-child { background: #fff; color: var(--accent); }
.ms-sidebar-pill.active .ms-pill-arrow { opacity: 1; transform: translateX(0); color: #fff; }
.ms-sidebar-divider {
    height: 1px; background: rgba(255,255,255,0.15); margin: 8px 4px;
}

/* Slider */
.ms-slider {
    flex: 1; min-width: 0; position: relative; height: 100%;
    border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
}
.ms-track {
    display: flex; height: 100%; transition: transform 0.5s cubic-bezier(0.2, 0, 0, 1);
}
.ms-slide {
    min-width: 100%; height: 100%; display: flex; align-items: center;
    position: relative; overflow: hidden;
}
.ms-slide:before, .ms-slide:after {
    content: ''; position: absolute; border-radius: 50%;
    background: rgba(255,255,255,0.07); pointer-events: none;
}
.ms-slide:before { width: 420px; height: 420px; right: -140px; top: -160px; }
.ms-slide:after { width: 260px; height: 260px; right: 60px; bottom: -140px; background: rgba(255,255,255,0.05); }
.ms-slide-decor {
    position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
    font-size: 130px; color: rgba(255,255,255,0.14); z-index: 1;
}
.ms-slide-inner {
    text-align: left; color: #fff; padding: 0 48px; max-width: 480px; position: relative; z-index: 2;
}
.ms-slide-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px;
    background: rgba(255,255,255,0.18); border-radius: 50px; font-size: 11px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 14px;
}
.ms-slide-title { font-size: 32px; font-weight: 800; margin-bottom: 10px; font-style: normal; letter-spacing: -0.5px; line-height: 1.15; }
.ms-slide-text { font-size: 15px; opacity: 0.88; margin-bottom: 24px; max-width: 380px; line-height: 1.5; }
.ms-slide-btns { display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap; }
.ms-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px;
    border-radius: 50px; font-size: 13px; font-weight: 600; font-style: normal;
    text-decoration: none; transition: var(--transition); white-space: nowrap;
}
.ms-btn-primary { background: #fff; color: var(--accent); }
.ms-btn-primary:hover { background: rgba(255,255,255,0.9); color: var(--accent-dark); transform: translateY(-2px); }
.ms-btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.5); }
.ms-btn-ghost:hover { background: rgba(255,255,255,0.15); color: #fff; transform: translateY(-2px); }

.ms-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%; border: none;
    background: rgba(255,255,255,0.2); backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff; font-size: 16px; cursor: pointer; transition: var(--transition);
    z-index: 10; display: flex; align-items: center; justify-content: center;
}
.ms-arrow:hover { background: rgba(255,255,255,0.35); }
.ms-arrow-prev { left: 16px; }
.ms-arrow-next { right: 16px; }

.ms-progress {
    position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    background: rgba(255,255,255,0.2); z-index: 10;
}
.ms-progress-bar {
    height: 100%; background: #fff; width: 0%; border-radius: 0 2px 2px 0;
}

/* ===== Content ===== */
#content { min-height: 500px; padding-top: 20px; }

/* ===== Catalog Page (accordion categories) ===== */
.catalog-page-search {
    display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 48px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 50px;
    box-shadow: var(--shadow-sm); margin-bottom: 16px; transition: var(--transition);
}
.catalog-page-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.catalog-page-search > i { color: var(--accent); font-size: 16px; }
.catalog-page-search input {
    flex: 1; border: none; outline: none; background: transparent; font-size: 14px;
    font-style: normal; color: var(--text); min-width: 0;
}
.catalog-page-search-clear {
    display: none; width: 28px; height: 28px; border: none; border-radius: 50%;
    background: var(--bg); color: var(--text-secondary); cursor: pointer; transition: var(--transition);
}
.catalog-page-search-clear:hover { background: var(--accent); color: #fff; }

.catalog-page-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.catalog-acc {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); overflow: hidden; transition: var(--transition);
}
.catalog-acc.open { border-color: var(--accent); box-shadow: var(--shadow); }
.catalog-acc-btn {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px;
    background: transparent; border: none; text-align: left; cursor: pointer;
    color: var(--text); font-weight: 600; font-style: normal; font-size: 15px; transition: var(--transition);
}
.catalog-acc-btn:hover { background: var(--accent-light); color: var(--accent); }
.catalog-acc.open .catalog-acc-btn {
    background: linear-gradient(120deg, var(--accent), var(--accent-dark)); color: #fff;
}
.catalog-acc-icon {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: var(--accent-light); color: var(--accent); font-size: 17px;
    display: flex; align-items: center; justify-content: center; transition: var(--transition);
}
.catalog-acc.open .catalog-acc-icon { background: rgba(255,255,255,0.2); color: #fff; }
.catalog-acc-icon img { width: 100%; height: 100%; object-fit: cover; }
.catalog-acc-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-acc-count {
    font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 50px;
    background: var(--accent); color: #fff; flex-shrink: 0;
}
.catalog-acc.open .catalog-acc-count { background: #fff; color: var(--accent); }
.catalog-acc-caret { color: var(--text-light); transition: transform 0.2s ease; flex-shrink: 0; }
.catalog-acc.open .catalog-acc-caret { transform: rotate(180deg); color: #fff; }
.catalog-acc-body { display: none; padding: 12px 16px 14px; border-top: 1px solid var(--border); }
.catalog-acc-all {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; margin-bottom: 10px;
    border-radius: 50px; font-size: 13px; font-weight: 600; font-style: normal;
    background: var(--accent); color: #fff; text-decoration: none; transition: var(--transition);
}
.catalog-acc-all:hover { background: var(--accent-dark); color: #fff; text-decoration: none; }
.catalog-acc-children { display: flex; flex-wrap: wrap; gap: 6px; }
.catalog-page-child-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; padding: 6px 12px; border-radius: 50px; text-decoration: none;
    background: var(--bg); color: var(--text-secondary); border: 1px solid var(--border); transition: var(--transition);
}
.catalog-page-child-pill i { font-size: 11px; color: var(--accent); }
.catalog-page-child-pill:hover { background: var(--accent); color: #fff; border-color: var(--accent); text-decoration: none; }
.catalog-page-child-pill:hover i { color: #fff; }
.catalog-page-empty {
    display: none; align-items: center; justify-content: center; gap: 10px; padding: 30px;
    color: var(--text-light); font-style: normal;
}
.catalog-page-empty[style*="block"] { display: flex !important; }

/* ===== Category page extras ===== */
.special-toolbar-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.category-description { margin-bottom: 16px; color: var(--text-secondary); font-size: 14px; }
.category-subcats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
#product-category .special-toolbar { margin-top: 0; }

/* ===== Special Page Toolbar ===== */
.special-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 24px; padding: 18px 24px;
    background: linear-gradient(120deg, var(--accent), var(--accent-dark));
    border-radius: var(--radius-lg); box-shadow: var(--shadow);
    color: #fff;
}
.special-toolbar-left { display: flex; align-items: center; gap: 14px; }
.special-toolbar-icon {
    width: 48px; height: 48px; line-height: 48px; text-align: center;
    background: rgba(255,255,255,0.18); color: #fff; border-radius: 50%; font-size: 22px; flex-shrink: 0;
}
.special-toolbar-title h1 { font-size: 22px; font-weight: 700; margin: 0; line-height: 1.2; color: #fff; }
.special-toolbar-count { font-size: 12px; color: rgba(255,255,255,0.7); font-style: normal; }
.special-toolbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.special-toolbar-views { display: flex; gap: 4px; }
.special-toolbar-views .btn {
    padding: 8px 12px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);
    color: #fff; border-radius: 50px;
}
.special-toolbar-views .btn:hover { background: rgba(255,255,255,0.3); color: #fff; }
.special-toolbar-filter .input-group { flex-wrap: nowrap; }
.special-toolbar-filter .input-group-addon {
    background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); color: #fff;
    border-radius: 50px 0 0 50px;
}
.special-toolbar-filter .form-control {
    min-width: 120px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
    border-left: none; border-radius: 0 50px 50px 0; color: #fff;
}
.special-toolbar-filter .form-control:focus { border-color: rgba(255,255,255,0.5); box-shadow: none; }
.special-toolbar-filter .form-control option { color: var(--text); background: var(--surface); }
.special-toolbar-compare {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
    border-radius: 50px; font-size: 12px; font-weight: 600; font-style: normal;
    color: #fff; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);
    text-decoration: none; transition: var(--transition);
}
.special-toolbar-compare:hover { background: #fff; color: var(--accent); }

/* ===== Special Product Slider ===== */
.special-slider-wrap {
    display: flex; align-items: center; gap: 12px; margin-bottom: 24px; position: relative;
}
.special-slider-viewport {
    flex: 1; min-width: 0; overflow: hidden;
}
.special-slider-track {
    display: flex; gap: 16px; transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1);
}
.special-slider-item {
    min-width: 250px; flex: 0 0 250px;
}
.special-slider-item .product-thumb { margin-bottom: 0; height: 100%; }
.special-slider-item .product-thumb .caption { min-height: 120px; }

.special-slider-arrow {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: none;
    background: var(--surface); border: 1px solid var(--border); color: var(--accent);
    font-size: 18px; cursor: pointer; transition: var(--transition);
    display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
}
.special-slider-arrow:hover:not(:disabled) {
    background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: var(--shadow);
}
.special-slider-arrow:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===== Footer ===== */
footer {
    margin-top: 40px; padding: 40px 0;
    background: #F6F8FB;
    border-top: 1px solid var(--border); color: var(--text-secondary);
    position: relative;
}
footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-light), var(--accent), var(--accent-light), transparent);
    pointer-events: none;
}
footer hr { border-top: none; border-bottom: 1px solid var(--border); }
footer a { color: var(--text); transition: var(--transition); }
footer a:hover { color: var(--accent); }
footer h5 {
    font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 700;
    color: var(--text); margin-bottom: 14px;
}
footer .footer-powered { margin-bottom: 0; white-space: nowrap; display: flex; flex-direction: column; gap: 2px; }
.footer-powered-brand { font-size: 16px; font-weight: 700; color: var(--accent); font-style: italic; }
.footer-powered-sub { font-size: 11px; color: var(--text-secondary); font-style: normal; }

/* Footer Bottom Row — powered left, pay/delivery right */
.footer-bottom-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
}
.footer-bottom-row .footer-pay-delivery { padding: 0; }

/* Footer Payment & Delivery */
.footer-pay-delivery {
    display: flex; justify-content: center; align-items: flex-start;
    gap: 60px; padding: 24px 0; flex-wrap: wrap;
}
.footer-pay-block { text-align: center; }
.footer-pay-block h5 {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-bottom: 14px;
}
.footer-pay-block h5 i { color: var(--accent); font-size: 16px; }
.footer-pay-icons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.footer-pay-icon {
    width: 48px; height: 36px; display: flex; align-items: center; justify-content: center;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text); font-size: 22px; transition: var(--transition); cursor: default;
}
.footer-pay-icon:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }

/* ===== Footer Grid ===== */
.footer-grid {
    display: flex; flex-wrap: wrap; gap: 44px; padding-bottom: 10px;
}
.footer-col { flex: 1 1 220px; min-width: 220px; }

/* Center all footer content and keep it off the far edges */
#footer .container { max-width: 1120px; margin-left: auto; margin-right: auto; }
.footer-grid { justify-content: center; }
.footer-col { text-align: center; }
.footer-brand { display: flex; flex-direction: column; align-items: center; }
.footer-brand-logo { justify-content: center; }
.footer-social { justify-content: center; }
.footer-contact-row { justify-content: center; }
.footer-subscribe-col { text-align: center; }
.footer-subscribe-form { justify-content: center; }
.footer-tabs { justify-content: center; }
.footer-bottom-row { justify-content: center; }
.footer-pay-delivery { justify-content: center; }
.footer-powered { align-items: center; }

/* Footer Brand */
.footer-brand-logo {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--accent); font-size: 18px; font-weight: 700; margin-bottom: 12px;
}
.footer-brand-logo i {
    font-size: 20px; color: var(--accent); width: 38px; height: 38px; line-height: 38px;
    text-align: center; background: var(--accent-light); border-radius: 50%;
}
.footer-brand-logo:hover { color: var(--accent); }
.footer-tagline { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.footer-social-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--accent-light); border: 1px solid var(--border);
    color: var(--accent); transition: var(--transition);
}
.footer-social-btn:hover { background: var(--accent); color: #fff; }
.footer-contact-row {
    display: flex; align-items: center; gap: 10px; font-size: 13px;
    color: var(--text); margin-bottom: 8px;
}
.footer-contact-row i {
    width: 28px; height: 28px; line-height: 28px; text-align: center;
    background: var(--accent-light); color: var(--accent); border-radius: 50%; font-size: 12px;
}
.footer-contact-row:hover { color: var(--accent); }

/* Footer Working Hours (right column inside the tabs block) */
.footer-tabs-hours { flex: 0 0 180px; align-self: flex-start; }
.footer-hours-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600; font-style: normal; color: var(--accent); margin-bottom: 10px;
}
.footer-hours-title i {
    width: 28px; height: 28px; line-height: 28px; text-align: center;
    background: var(--accent-light); color: var(--accent); border-radius: 50%; font-size: 13px;
}
.footer-hours-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 0; font-size: 13px; color: var(--text);
    border-bottom: 1px dashed var(--border);
}
.footer-hours-row:last-child { border-bottom: none; }
.footer-hours-row span:last-child { font-weight: 600; color: var(--accent); }
.footer-hours-off { color: var(--text-secondary) !important; font-weight: 600; }

/* Footer Tabs (sidebar pills + content) */
.footer-tabs-col { flex: 3 1 560px; }
.footer-tabs { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-tabs-sidebar { display: flex; flex-direction: column; gap: 8px; flex: 0 0 190px; }
.footer-tab-btn {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px; width: 100%;
    border: none; background: transparent; border-radius: 50px; font-size: 13px;
    color: var(--text); cursor: pointer; text-align: left; transition: var(--transition);
}
.footer-tab-btn i { width: 16px; text-align: center; }
.footer-tab-btn:hover { background: var(--accent-light); color: var(--accent); }
.footer-tab-btn.active { background: var(--accent); color: #fff; font-weight: 600; }
/* "Графік роботи" — the primary, centered button in the block */
.footer-tab-main { justify-content: center; font-weight: 700; }
.footer-tab-main:not(.active) {
    background: var(--accent-light); color: var(--accent);
    border: 1.5px solid var(--accent);
}
.footer-tabs-content {
    flex: 1; min-width: 0; max-height: none; overflow: visible;
    padding-right: 0;
}
.footer-tab-pane { display: none; }
.footer-tab-pane.active { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
/* Working-hours tab: a single card instead of the 2-column link grid */
.footer-tab-pane.footer-pane-hours.active { display: block; }
.footer-hours-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 20px; max-width: 360px;
}

.footer-icon-btn {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    color: var(--text); font-size: 13px; transition: var(--transition);
}
.footer-icon-btn i {
    width: 26px; height: 26px; line-height: 26px; text-align: center;
    background: var(--accent-light); color: var(--accent); border-radius: 50%; font-size: 12px; flex-shrink: 0;
}
.footer-icon-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }

/* Footer Subscribe */
.footer-subscribe-col { text-align: left; }
.footer-subscribe-icon {
    width: 44px; height: 44px; line-height: 44px; text-align: center;
    background: var(--accent-light); color: var(--accent); border-radius: 50%;
    font-size: 18px; margin-bottom: 12px;
}
.footer-subscribe-form { display: flex; }
.footer-subscribe-input {
    flex: 1; min-width: 0; height: 44px; padding: 0 16px; font-size: 13px;
    border: 1px solid var(--border); border-right: none; border-radius: 50px 0 0 50px;
    background: var(--surface); color: var(--accent);
}
.footer-subscribe-input::placeholder { color: var(--text-secondary); }
.footer-subscribe-input:focus { outline: none; border-color: var(--accent); }
.footer-subscribe-btn {
    width: 48px; height: 44px; border: none; border-radius: 0 50px 50px 0;
    background: var(--accent); color: #fff; cursor: pointer; transition: var(--transition); flex-shrink: 0;
}
.footer-subscribe-btn:hover { background: var(--accent-dark); }

/* ===== Alert ===== */
.alert { padding: 12px 16px; border-radius: var(--radius); border: none; box-shadow: var(--shadow-sm); }
.alert-success { background: #E8F5E9; color: var(--success); }
.alert-warning { background: #FFF3E0; color: var(--warning); }
.alert-danger { background: #FFF0E6; color: var(--danger); }
.alert-info { background: var(--accent-light); color: var(--accent); }

/* ===== Pagination ===== */
.pagination { margin: 20px 0; }
.pagination > li > a, .pagination > li > span {
    color: var(--text-secondary); border: 1px solid var(--border); padding: 8px 14px;
    border-radius: var(--radius-sm); margin: 0 2px; transition: var(--transition);
}
.pagination > li > a:hover, .pagination > li > span:hover {
    color: var(--accent); border-color: var(--accent); background: var(--accent-light);
}
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover {
    background: var(--accent); border-color: var(--accent); color: #fff; border-radius: var(--radius-sm);
}

/* ===== Buttons ===== */
.buttons { margin: 20px 0; }
.btn {
    padding: 10px 16px; font-size: 13px; font-weight: 500;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    box-shadow: none; transition: var(--transition);
}
.btn-xs { font-size: 10px; padding: 4px 8px; }
.btn-sm { font-size: 11px; padding: 6px 12px; }
.btn-lg { padding: 12px 20px; font-size: 15px; }
.btn-group > .btn, .btn-group > .dropdown-menu, .btn-group > .popover { font-size: 13px; }
.btn-group > .btn-xs { font-size: 10px; }
.btn-group > .btn-sm { font-size: 11px; }
.btn-group > .btn-lg { font-size: 15px; }
.btn-default {
    color: var(--text-secondary); background: var(--surface);
    border: 1px solid var(--border);
}
.btn-default:hover, .btn-default:active, .btn-default.active {
    color: var(--text); background: var(--bg); border-color: var(--border-dark);
}
.btn-primary {
    color: #fff; background: var(--accent); border: 1px solid var(--accent);
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active {
    color: #fff; background: var(--accent-dark); border-color: var(--accent-dark);
}
.btn-warning {
    color: #fff; background: var(--warning); border: 1px solid var(--warning);
}
.btn-warning:hover, .btn-warning:active { color: #fff; background: #F57C00; border-color: #F57C00; }
.btn-danger {
    color: #fff; background: var(--danger); border: 1px solid var(--danger);
}
.btn-danger:hover, .btn-danger:active { color: #fff; background: #E55100; border-color: #E55100; }
.btn-success {
    color: #fff; background: var(--success); border: 1px solid var(--success);
}
.btn-success:hover, .btn-success:active { color: #fff; background: #43A047; border-color: #43A047; }
.btn-info {
    color: #fff; background: var(--info); border: 1px solid var(--info);
}
.btn-info:hover, .btn-info:active { color: #fff; background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-link { border: none; cursor: pointer; color: var(--accent); border-radius: 0; }
.btn-link, .btn-link:active, .btn-link[disabled] { background: transparent; box-shadow: none; }
.btn-link:hover { color: var(--accent-dark); text-decoration: none; }
.btn-inverse {
    color: #fff; background: var(--text); border: 1px solid var(--text);
}
.btn-inverse:hover, .btn-inverse:active { color: #fff; background: #0D0D1A; border-color: #0D0D1A; }

/* ===== List Group ===== */
.list-group a {
    border: 1px solid var(--border); color: var(--text-secondary);
    padding: 10px 16px; border-radius: var(--radius-sm); transition: var(--transition);
    margin-bottom: 6px;
}
.list-group a:last-child { margin-bottom: 0; }
.list-group-item:first-child, .list-group-item:last-child { border-radius: var(--radius-sm); }
.list-group a.active, .list-group a.active:hover, .list-group a:hover {
    color: var(--accent); background: var(--accent-light); border-color: var(--accent);
}
.list-group a.list-group-item-child {
    padding-left: 32px; font-size: 13px; position: relative;
}
.list-group a.list-group-item-child::before {
    content: ''; position: absolute; left: 16px; top: 50%; width: 6px; height: 6px;
    margin-top: -3px; border-radius: 50%; background: var(--border-dark);
}
.list-group a.list-group-item-child.active::before, .list-group a.list-group-item-child:hover::before {
    background: var(--accent);
}

/* ===== Carousel ===== */
.carousel-caption { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.carousel-control .icon-prev:before { content: '\f053'; font-family: FontAwesome; }
.carousel-control .icon-next:before { content: '\f054'; font-family: FontAwesome; }

/* ===== Product Cards ===== */
.product-thumb {
    border: 1px solid var(--border); margin-bottom: 20px;
    border-radius: var(--radius-lg); background: var(--surface);
    box-shadow: var(--shadow-sm); overflow: hidden;
    /* only the cheap properties move; the shadow swaps without a per-frame repaint */
    transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .2s ease;
    contain: layout style;   /* a change inside one card doesn't re-layout the whole grid */
}
/* Lift on hover only where there is a mouse — on phones a tap left a "stuck"
   hover that lifted and re-shadowed the card */
@media (hover: hover) {
    .product-thumb:hover { box-shadow: var(--shadow-lg); border-color: var(--accent); transform: translateY(-4px); }
}
.product-thumb .image { text-align: center; padding: 20px; height: 220px; box-sizing: border-box; overflow: hidden; }
.product-thumb .image a { display: flex; align-items: center; justify-content: center; height: 100%; }
.product-thumb .image a:hover { opacity: 0.85; }
.product-thumb .image img { margin-left: auto; margin-right: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.product-grid .product-thumb .image { float: none; }
@media (min-width: 767px) {
    .product-list .product-thumb .image { float: left; padding: 0 20px; max-width: 220px; }
}
.product-thumb h4 { font-weight: 600; font-size: 15px; }
.product-thumb h4 a { color: var(--text); transition: var(--transition); }
.product-thumb h4 a:hover { color: var(--accent); }
.product-thumb .caption { padding: 0 20px 15px 20px; min-height: 160px; }
.product-list .product-thumb .caption { margin-left: 240px; }
@media (max-width: 1200px) {
    .product-grid .product-thumb .caption { min-height: 200px; padding: 0 15px; }
}
.product-thumb .rating { padding-bottom: 10px; }
.rating .fa-stack { font-size: 8px; }
.rating .fa-star-o { color: var(--border-dark); font-size: 15px; }
.rating .fa-star { color: #FFB300; font-size: 15px; }
.rating .fa-star + .fa-star-o { color: #E0A800; }
h2.price { margin: 0; font-weight: 700; color: var(--text); }
.product-thumb .price { color: var(--text); font-size: 18px; }
.product-thumb .price-new { font-weight: 700; color: var(--accent); font-size: 20px; }
.product-thumb .price-old { color: var(--text-light); text-decoration: line-through; margin-left: 10px; font-size: 14px; }
.product-thumb .price-tax { color: var(--text-light); font-size: 12px; display: block; }
.product-thumb .button-group {
    border-top: 1px solid var(--border); background: #F8FAFC;
    overflow: auto; display: flex;
}
.product-list .product-thumb .button-group { border-left: none; }
.product-thumb .button-group button {
    width: 60%; border: none; float: left;
    background: transparent; color: var(--text-secondary); line-height: 44px;
    font-weight: 600; text-align: center; font-size: 13px;
    letter-spacing: 0.5px; transition: var(--transition); cursor: pointer;
}
.product-thumb .button-group button + button { width: 20%; border-left: 1px solid var(--border); }
.product-thumb .button-group button:hover { color: var(--accent); background: var(--accent-light); }
@media (max-width: 1200px) {
    .product-thumb .button-group button, .product-thumb .button-group button + button { width: 33.33%; }
}

/* ===== Enhanced Product Card (liquid hover, outline, actions overlay, buy -> stepper) ===== */
.product-thumb.pt-enhanced {
    position: relative; border: 1.5px solid var(--border); background: var(--surface);
    border-radius: var(--radius-lg); overflow: hidden;
    /* the lift moves on the GPU; the shadow swaps in one step instead of repainting a big blur every frame */
    transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .2s ease;
}
.product-thumb.pt-enhanced::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0;
    background: radial-gradient(120% 80% at 50% 0%, var(--accent-light) 0%, transparent 60%);
    transition: opacity .22s ease;
}
/* hover only with a mouse: on phones a tap left the card "stuck" lifted.
   No scale() — it re-rasterized the text and made it blurry for a moment. */
@media (hover: hover) {
    .product-thumb.pt-enhanced:hover {
        transform: translateY(-4px);
        border-color: var(--accent);
        box-shadow: 0 14px 30px -14px rgba(0,92,190,0.35), 0 0 0 3px var(--accent-light);
    }
    .product-thumb.pt-enhanced:hover::before { opacity: 1; }
}
.product-thumb.pt-enhanced .image { position: relative; z-index: 1; padding: 18px; overflow: hidden; }
.product-thumb.pt-enhanced .image a:hover { opacity: 1; }
.product-thumb.pt-enhanced .image img {
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
@media (hover: hover) { .product-thumb.pt-enhanced:hover .image img { transform: scale(1.04); } }
.product-thumb.pt-enhanced .caption { position: relative; z-index: 1; padding: 0 16px 12px; min-height: 0; }
.product-thumb.pt-enhanced h4 { margin: 6px 0 6px; font-size: 14px; line-height: 1.35; }
.product-thumb.pt-enhanced h4 a {
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1.5px;
    transition: color 0.25s ease, background-size 0.35s ease;
}
.product-thumb.pt-enhanced h4 a:hover { background-size: 100% 1.5px; }
.product-thumb.pt-enhanced .caption > p:not(.price) { display: none; }
.product-thumb.pt-enhanced .price { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.product-thumb.pt-enhanced .price-tax { font-size: 11px; }
.product-thumb.pt-enhanced .rating { padding-bottom: 6px; }

/* Actions overlay (wishlist / compare) — appear on hover */
.pt-actions {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    display: flex; flex-direction: column; gap: 6px;
}
.pt-action {
    width: 36px !important; height: 36px; line-height: 36px !important; float: none !important;
    border-radius: 50% !important; border: 1.5px solid var(--border) !important;
    background: rgba(255,255,255,0.92) !important; color: var(--text-secondary) !important;
    box-shadow: var(--shadow-sm); cursor: pointer; padding: 0; font-size: 14px;
    opacity: 0; transform: translateX(12px) scale(0.8);
    transition: opacity 0.3s cubic-bezier(.22,1,.36,1), transform 0.35s cubic-bezier(.22,1,.36,1), background 0.25s, color 0.25s, border-color 0.25s;
}
.pt-action.pt-compare { transition-delay: 0.05s; }
.product-thumb.pt-enhanced:hover .pt-action { opacity: 1; transform: translateX(0) scale(1); }
.pt-action:hover { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; transform: scale(1.1) !important; }
.pt-action.pt-wish.active { background: #FF6B00 !important; color: #fff !important; border-color: #FF6B00 !important; opacity: 1; transform: none; }
.pt-action.pt-compare.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; opacity: 1; transform: none; }
.pt-action i { animation: none; }
.pt-action.active i { animation: ptPop 0.4s cubic-bezier(.22,1,.36,1); }
@keyframes ptPop { 0% { transform: scale(0.6); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* Buy button -> stepper */
.product-thumb.pt-enhanced .button-group {
    border-top: none; background: transparent; overflow: visible; padding: 0 14px 14px; display: block;
}
.pt-buy { position: relative; height: 46px; }
/* Specific enough to beat the generic `.product-thumb .button-group button { position: relative }`
   motion rule, which otherwise shrinks the button to its text height */
.product-thumb .button-group .pt-buy-btn,
.pt-buy-btn {
    position: absolute; inset: 0; width: 100% !important; height: 100%; float: none !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1.5px solid var(--accent) !important; border-radius: 50px !important;
    background: transparent !important; color: var(--accent) !important;
    font-size: 14px !important; font-weight: 700; letter-spacing: 0.3px; text-transform: none !important;
    line-height: 1 !important; cursor: pointer; overflow: hidden; isolation: isolate;
    transition: color .18s ease, border-color .18s ease, transform .15s cubic-bezier(.2,.8,.2,1);
}
/* Fill: a solid layer scaled from the bottom — transform only, so hovering or
   tapping a card never repaints it (the old rising "liquid" animated `top`) */
.pt-buy-btn::before {
    content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    transform: scaleY(0); transform-origin: 50% 100%;
    transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
@media (hover: hover) {
    .pt-buy-btn:hover::before { transform: scaleY(1); }
    .pt-buy-btn:hover { color: #fff !important; }
}
.pt-buy-btn:active::before, .pt-buy-btn:focus-visible::before { transform: scaleY(1); }
.pt-buy-btn:active, .pt-buy-btn:focus-visible { color: #fff !important; }

/* The three faces of the button: label → spinner → "Додано ✓", swapped with
   transform/opacity only. .pt-buy gets is-loading / is-done / is-error / is-in-cart. */
.pt-buy-btn .pt-bf {
    position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .16s ease;
}
.pt-buy-btn .pt-bf-load, .pt-buy-btn .pt-bf-done { opacity: 0; transform: translateY(70%); }
.pt-buy.is-loading .pt-bf-main, .pt-buy.is-done .pt-bf-main { opacity: 0; transform: translateY(-70%); }
.pt-buy.is-loading .pt-bf-load { opacity: 1; transform: none; }
.pt-buy.is-done .pt-bf-done { opacity: 1; transform: none; }
.pt-buy.is-loading .pt-buy-btn, .pt-buy.is-done .pt-buy-btn { color: #fff !important; }
.pt-buy.is-loading .pt-buy-btn::before { transform: scaleY(1); }
.pt-buy.is-done .pt-buy-btn { border-color: #16a34a !important; }
.pt-buy.is-done .pt-buy-btn::before { transform: scaleY(1); background: #16a34a; }
.pt-bf-spin {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
    animation: ptSpin .6s linear infinite;
}
.pt-buy:not(.is-loading) .pt-bf-spin { animation: none; }   /* hidden spinners don't tick */
@keyframes ptSpin { to { transform: rotate(360deg); } }
.pt-bf-done .fa { animation: none; }
.pt-buy.is-done .pt-bf-done .fa { animation: ptCheck .35s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes ptCheck { from { transform: scale(0) rotate(-45deg); } to { transform: none; } }
.pt-buy.is-error .pt-buy-btn { animation: ptShake .35s ease; border-color: #dc2626 !important; color: #dc2626 !important; }
@keyframes ptShake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
/* after "Додано" the button goes back to the blue "Купити" (no permanent in-cart look) */
@media (prefers-reduced-motion: reduce) {
    .pt-buy-btn .pt-bf { transition: opacity .12s; transform: none !important; }
    .pt-bf-spin { animation-duration: 1.2s; }
}

/* Stock quantity / units sold on cards (filled in by loadCardViews) */
.pc-stock-qty { font-weight: 700; }
.pt-sold { display: flex; align-items: center; gap: 5px; margin: 4px 0 2px; font-size: 12px; color: var(--text-muted, #6b7280); }
.pt-sold .fa { color: var(--accent); font-size: 11px; }

/* Double-tap like on touch screens */
.product-thumb.pt-enhanced .image > a { touch-action: manipulation; }
.pt-like-burst {
    position: absolute; left: 50%; top: 50%; z-index: 5; pointer-events: none;
    font-size: 64px; color: #fff; filter: drop-shadow(0 4px 12px rgba(0,0,0,.35));
    transform: translate(-50%, -50%) scale(0); animation: ptLikeBurst 0.9s cubic-bezier(.22,1,.36,1) forwards;
}
.pt-like-burst .fa { color: #ff3b5c; }
@keyframes ptLikeBurst {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    25% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    45% { transform: translate(-50%, -50%) scale(0.95); }
    75% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -80%) scale(0.8); opacity: 0; }
}
.pt-buy-btn:active { transform: scale(0.96); }
.pt-buy-btn i { font-size: 15px; transition: transform .2s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) { .pt-buy-btn:hover .pt-bf-main i { transform: translateX(-2px) rotate(-8deg); } }

.pt-buy.is-loading { pointer-events: none; }

/* ===== Uniform product cards — the "Купити" button never jumps =====
   Cards in a row share one height (grid/flex stretch does this — NOT an
   explicit height:100%, which collapses to ~0 inside an auto grid row) and
   the buy button is pinned to the bottom, so titles of different length or a
   missing rating/price no longer push the button up and down between cards. */
.product-thumb.pt-enhanced { display: flex; flex-direction: column; }
.product-thumb.pt-enhanced .image { flex-shrink: 0; }        /* never let the photo collapse */
.product-thumb.pt-enhanced .caption { flex: 1 1 auto; display: flex; flex-direction: column; }
.product-thumb.pt-enhanced h4 { min-height: 2.7em; }         /* always reserve 2 title lines */
.product-thumb.pt-enhanced .price { margin-top: auto; }      /* price + button hug the bottom */
.product-thumb.pt-enhanced .button-group { margin-top: 0; flex-shrink: 0; }

/* Equalise card heights across a row: the grid stretches items to the row
   track by default; the module rows become flex so their columns match too. */
.row:has(> .product-layout) { display: flex; flex-wrap: wrap; }
.row:has(> .product-layout) > .product-layout { display: flex; }
.row:has(> .product-layout) > .product-layout > .product-thumb { width: 100%; }

/* List view keeps its horizontal layout (no bottom-pinning) */
.product-list .product-thumb.pt-enhanced { display: block; }
.product-list .product-thumb.pt-enhanced .caption { display: block; }
.product-list .product-thumb.pt-enhanced .price { margin-top: 0; }

/* list view */
.product-list .product-thumb.pt-enhanced .caption { margin-left: 240px; }
.product-list .product-thumb.pt-enhanced .button-group { margin-left: 240px; max-width: 260px; }

/* Card clips nothing itself (the photo box has its own overflow), so the
   hover description footer can hang below it */
.product-thumb.pt-enhanced { overflow: visible; }
.product-thumb.pt-enhanced::before { border-radius: inherit; }

/* Rating pills (replace stars): 5 short bars, filled = rating */
.pt-rating { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; line-height: 1; }
.rpills { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.rpill { display: block; width: 14px; height: 6px; border-radius: 3px; background: var(--border-dark); font-style: normal; }
.rpill.on { background: var(--accent); }

/* Review form: pick the rating by clicking a pill; pills up to the hovered/checked one light up */
.rpill-input { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; vertical-align: middle; }
.rpill-input-label { font-size: 12px; color: var(--text-muted, #888); }
.rpill-choice { margin: 0; padding: 4px 0; cursor: pointer; font-weight: normal; }
.rpill-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.rpill-choice .rpill { width: 22px; height: 8px; border-radius: 4px; transition: background .15s, transform .15s; }
.rpill-choice:hover .rpill { transform: scaleY(1.25); }
.rpill-choice input:focus-visible + .rpill { outline: 2px solid var(--accent); outline-offset: 2px; }
/* :has() lights every pill up to the checked / hovered one */
.rpill-input:has(.rpill-choice input:checked) .rpill-choice .rpill { background: var(--accent); }
.rpill-input .rpill-choice:has(input:checked) ~ .rpill-choice .rpill { background: var(--border-dark); }
.rpill-input:hover .rpill-choice .rpill { background: var(--accent); }
.rpill-input .rpill-choice:hover ~ .rpill-choice .rpill { background: var(--border-dark); }
.pt-reviews { font-size: 12px; color: var(--text-light); font-style: normal; }
/* View counter on product cards, pushed to the right of the stars */
.pt-views {
    margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--text-light); font-style: normal; white-space: nowrap;
}
.pt-views i { font-size: 12px; }
.product-thumb.pt-enhanced .price { margin-bottom: 4px; }

/* Discount price: the old price sits in a small line ABOVE the new one instead of
   wrapping beside it. Every card reserves that line, so a single discounted product
   no longer makes its whole row taller (which left a gap above the price in all cards). */
.product-thumb.pt-enhanced .price { position: relative; padding-top: 15px; line-height: 24px; }
.product-thumb.pt-enhanced .price-new { line-height: inherit; }
.product-thumb.pt-enhanced .price-old {
    position: absolute; top: 0; left: 0; margin: 0;
    font-size: 12px; line-height: 15px; font-weight: 500; white-space: nowrap;
}
.product-thumb.pt-enhanced .pc-stock { margin-bottom: 2px; }
.product-list .product-thumb.pt-enhanced .price { padding-top: 0; }
.product-list .product-thumb.pt-enhanced .price-old { position: static; margin-left: 10px; }

/* "Обрати" quick-view pill — bottom-right of the photo, on hover */
.product-thumb .image .pt-choose {
    position: absolute; right: 10px; bottom: 10px; z-index: 3;
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 14px; border: 1.5px solid var(--text); border-radius: 50px;
    background: var(--surface); color: var(--text); font-size: 12px; font-weight: 700; font-style: normal;
    box-shadow: var(--shadow-sm); cursor: pointer;
    opacity: 0; transform: translateY(8px);
    transition: opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1), background .2s, color .2s;
}
.product-thumb .image .pt-choose:hover { background: var(--text); color: var(--surface); }
.product-thumb:hover .image .pt-choose,
.product-thumb .image .pt-choose:focus-visible { opacity: 1; transform: none; }

/* Hover footer with the short description (Rozetka-style) */
.pt-hover-desc { display: none; }
@media (hover: hover) and (min-width: 768px) {
    .pt-hover-desc {
        display: block; position: absolute; left: -1.5px; right: -1.5px; top: 100%; z-index: 4;
        margin-top: -1px; padding: 10px 16px 14px;
        background: var(--surface); border: 1.5px solid var(--accent); border-top: 1px dashed var(--border);
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        box-shadow: 0 22px 36px -18px rgba(0,92,190,0.4);
        opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
        transition: opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1), visibility .25s;
    }
    .pt-hover-desc p {
        margin: 0 0 8px; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); font-style: normal;
        display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
    }
    .pt-hover-more { font-size: 12px; font-weight: 700; color: var(--accent); }
    .pt-hover-more:hover { text-decoration: none; color: var(--accent-dark); }
    .product-thumb.pt-has-desc:hover { z-index: 6; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    .product-thumb.pt-has-desc:hover .pt-hover-desc { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
    .product-list .pt-hover-desc { display: none; }
}

/* ===== Quick view modal ===== */
body.qv-lock { overflow: hidden; }
.qv-overlay {
    position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(10,20,40,0.55); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
}
.qv-overlay.open { opacity: 1; visibility: visible; }
.qv-dialog {
    position: relative; width: 100%; max-width: 940px; max-height: calc(100vh - 40px); overflow-y: auto;
    background: var(--surface); border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.45);
    transform: translateY(16px) scale(.98); transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.qv-overlay.open .qv-dialog { transform: none; }
.qv-close {
    position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px;
    border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text);
    cursor: pointer; font-size: 16px;
}
.qv-close:hover { background: var(--text); color: var(--surface); }
.qv-content { display: grid; grid-template-columns: 1.05fr 1fr; gap: 28px; padding: 28px; font-style: normal; }
.qv-loading { grid-column: 1 / -1; min-height: 320px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--text-secondary); }
.qv-loading .fa { font-size: 32px; color: var(--accent); }

.qv-gallery { min-width: 0; }
.qv-main {
    position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
    background: var(--bg); border-radius: 14px; overflow: hidden;
}
.qv-main-img { max-width: 92%; max-height: 92%; object-fit: contain; }
.qv-noimage { padding: 20px; text-align: center; font-weight: 600; color: var(--text-secondary); }
.qv-nav {
    position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px;
    border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text);
    font-size: 18px; cursor: pointer; box-shadow: var(--shadow-sm);
}
.qv-nav:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.qv-nav-prev { left: 10px; }
.qv-nav-next { right: 10px; }
.qv-counter {
    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
    padding: 3px 10px; border-radius: 50px; background: rgba(0,0,0,0.55); color: #fff; font-size: 12px;
}
.qv-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.qv-thumbs::-webkit-scrollbar { display: none; }
.qv-thumb {
    flex: 0 0 64px; height: 64px; padding: 4px; border: 1.5px solid var(--border); border-radius: 10px;
    background: var(--surface); cursor: pointer;
}
.qv-thumb img { width: 100%; height: 100%; object-fit: contain; }
.qv-thumb.active, .qv-thumb:hover { border-color: var(--accent); }

.qv-info { min-width: 0; display: flex; flex-direction: column; }
.qv-title { margin: 0 44px 8px 0; font-size: 20px; font-weight: 700; line-height: 1.3; }
.qv-title a { color: var(--text); }
.qv-title a:hover { color: var(--accent); text-decoration: none; }
.qv-rating { margin-bottom: 10px; }
.qv-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--text-secondary); margin-bottom: 12px; }
.qv-meta b { color: var(--text); font-weight: 600; }
.qv-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.qv-price-new { font-size: 26px; font-weight: 800; color: var(--text); }
.qv-price-old { font-size: 15px; color: var(--text-light); text-decoration: line-through; }
.qv-info .pc-stock { align-self: flex-start; }
.qv-desc { margin: 8px 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }

.qv-option { margin-bottom: 14px; }
.qv-option-label { font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.qv-option-current { font-weight: 500; color: var(--text-secondary); }
.qv-req { color: var(--danger); }
.qv-variants { display: flex; flex-wrap: wrap; gap: 8px; }
.qv-variant { position: relative; margin: 0; cursor: pointer; }
.qv-variant input { position: absolute; opacity: 0; pointer-events: none; }
.qv-variant span {
    display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 16px;
    border: 1.5px solid var(--border); border-radius: 50px; font-size: 13px; font-weight: 600;
    color: var(--text); background: var(--surface); transition: border-color .2s, background .2s, color .2s;
}
.qv-variant span small { font-weight: 500; color: var(--text-secondary); }
.qv-variant:hover span { border-color: var(--text); }
.qv-variant input:checked + span { border-color: var(--text); background: var(--text); color: var(--surface); }
.qv-variant input:checked + span small { color: inherit; opacity: .8; }
.qv-variant input:focus-visible + span, .qv-variant input:focus-visible + img { outline: 2px solid var(--accent); outline-offset: 2px; }
.qv-swatch img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); padding: 2px; background: var(--surface); }
.qv-swatch input:checked + img { border-color: var(--text); }
.qv-option-error { margin-top: 6px; font-size: 12px; color: var(--danger); }
.qv-option-link { font-size: 13px; font-weight: 600; }

.qv-buy-row { display: flex; gap: 10px; margin-top: 6px; }
.qv-qty { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: 50px; overflow: hidden; flex-shrink: 0; }
.qv-qty button { width: 38px; height: 46px; border: none; background: transparent; color: var(--text); cursor: pointer; }
.qv-qty button:hover { color: var(--accent); }
.qv-qty input { width: 42px; height: 46px; border: none; text-align: center; font-weight: 700; -moz-appearance: textfield; background: transparent; }
.qv-qty input::-webkit-outer-spin-button, .qv-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qv-add, .qv-buy-now {
    height: 46px; border-radius: 50px; font-size: 14px; font-weight: 700; cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.qv-add { flex: 1; border: 1.5px solid var(--accent); background: var(--surface); color: var(--accent); }
.qv-add:hover { background: var(--accent-light); }
.qv-buy-now { width: 100%; margin-top: 10px; border: 1.5px solid var(--accent); background: var(--accent); color: #fff; }
.qv-buy-now:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.qv-add:disabled, .qv-buy-now:disabled { opacity: .5; cursor: not-allowed; }
.qv-more { margin-top: 14px; align-self: center; font-size: 13px; font-weight: 600; color: var(--accent); }
.qv-more:hover { text-decoration: none; color: var(--accent-dark); }

/* ===== Thumbnails ===== */
.thumbnails { overflow: auto; clear: both; list-style: none; padding: 0; margin: 0; }
.thumbnails > li { margin-left: 20px; }
.thumbnails { margin-left: -20px; }
.thumbnails > img { width: 100%; }
.image-additional a {
    margin-bottom: 10px; padding: 5px; display: block;
    border: 1px solid var(--border); border-radius: var(--radius-sm); transition: var(--transition);
}
.image-additional a:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.image-additional { max-width: 78px; }
.thumbnails .image-additional { float: left; margin-left: 20px; }

/* ===== Responsive Grid ===== */
@media (min-width: 1200px) {
    #content .col-lg-2:nth-child(6n+1), #content .col-lg-3:nth-child(4n+1),
    #content .col-lg-4:nth-child(3n+1), #content .col-lg-6:nth-child(2n+1) { clear: left; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    #content .col-md-2:nth-child(6n+1), #content .col-md-3:nth-child(4n+1),
    #content .col-md-4:nth-child(3n+1), #content .col-md-6:nth-child(2n+1) { clear: left; }
}

/* ===== Fixed Columns ===== */
@media (min-width: 768px) {
    #column-left .product-layout .col-md-3 { width: 100%; }
    #column-left + #content .product-layout .col-md-3 { width: 50%; }
    #column-left + #content + #column-right .product-layout .col-md-3 { width: 100%; }
    #content + #column-right .product-layout .col-md-3 { width: 100%; }
}
#column-left .product-layout, #column-right .product-layout { width: 100%; }

/* ===== Misc ===== */
.input-group .form-control[name^=quantity] { min-width: 50px; }
.alert-dismissable .close, .alert-dismissible .close { right: -1px; }
.table > thead > tr > th, .table > tbody > tr > td { border-color: var(--border); }
.table-striped > tbody > tr:nth-of-type(odd) { background: #F8FAFC; }
.well { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.panel { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.panel-heading { border-bottom: 1px solid var(--border); background: #F8FAFC; border-radius: var(--radius) var(--radius) 0 0; }
.panel-title { font-weight: 600; color: var(--text); }

/* ===== Live Micro-interactions ===== */
:root { --transition-fast: all 0.15s cubic-bezier(.4,0,.2,1); }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popIn { 0% { transform: scale(0.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* Snappy press feedback on anything clickable */
.btn, .catalog-pill, .cart-pill, .search-pill-btn, .search-voice-btn, .search-filter-btn,
.header-icon-btn, .footer-social-btn, .footer-icon-btn, .footer-tab-btn, .footer-subscribe-btn,
.footer-contact-row, .brand-logo, .footer-brand-logo, .product-thumb .button-group button {
    transition: var(--transition-fast);
}
.btn:active, .catalog-pill:active, .cart-pill:active, .search-pill-btn:active,
.header-icon-btn:active, .footer-social-btn:active, .footer-icon-btn:active,
.footer-tab-btn:active, .footer-subscribe-btn:active {
    transform: scale(0.94);
}

/* Lively hovers */
.header-icon-btn:hover, .footer-social-btn:hover { transform: translateY(-2px) scale(1.06); }
.catalog-pill:hover, .cart-pill:hover, .search-pill-btn:hover { transform: translateY(-1px); }
.footer-icon-btn:hover { transform: translateY(-2px); }
.footer-tab-btn:hover:not(.active) { transform: translateX(2px); }

/* Product card: quick lift + image zoom */
.product-thumb:not(.pt-enhanced) { transition: var(--transition-fast), box-shadow 0.2s ease; }
.product-thumb:not(.pt-enhanced):hover { transform: translateY(-4px); }
.product-thumb .image { overflow: hidden; }
.product-thumb:not(.pt-enhanced) .image img { transition: transform 0.3s cubic-bezier(.4,0,.2,1); }
.product-thumb:not(.pt-enhanced):hover .image img { transform: scale(1.06); }

/* Badges pop when they render */
.icon-badge, .cart-qty { animation: popIn 0.25s cubic-bezier(.34,1.56,.64,1); }

/* Content entrance */
/* (the wrapper's own fadeInUp is gone: together with the card's entrance every card animated twice) */

/* Cart dropdown + all dropdown menus open with a quick pop */
.dropdown-menu { animation: fadeInUp 0.18s cubic-bezier(.4,0,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ===== Auth Modal (login / register) ===== */
.auth-modal-overlay {
    position: fixed; inset: 0; background: rgba(13,13,26,0.55); z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.25s ease; padding: 20px;
}
.auth-modal-overlay.active { opacity: 1; pointer-events: auto; }
.auth-modal {
    background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    width: 100%; max-width: 380px; padding: 28px 24px 24px; position: relative;
    max-height: 90vh; overflow-y: auto;
    transform: translateY(10px); transition: transform 0.25s ease;
}
.auth-modal-overlay.active .auth-modal { transform: translateY(0); }
.auth-modal-close {
    position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
    border: none; background: var(--bg); color: var(--text-secondary); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: var(--transition);
}
.auth-modal-close:hover { background: var(--accent-light); color: var(--accent); }
.auth-modal-tabs {
    display: flex; gap: 4px; background: var(--bg); border-radius: 50px; padding: 4px; margin-bottom: 20px;
}
.auth-modal-tab {
    flex: 1; border: none; background: transparent; padding: 9px 0; border-radius: 50px;
    font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: var(--transition);
}
.auth-modal-tab:hover { color: var(--text); }
.auth-modal-tab.active { background: var(--accent); color: #fff; }
.auth-modal-pane { display: none; }
.auth-modal-pane.active { display: block; }
.auth-form-row { display: flex; gap: 10px; }
.auth-form-row .auth-form-group { flex: 1; min-width: 0; }
.auth-form-group { margin-bottom: 14px; }
.auth-form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; }
.auth-form-control {
    width: 100%; height: 40px; padding: 0 14px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: 13px; color: var(--text); background: var(--surface);
    transition: var(--transition);
}
.auth-form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.auth-forgot-link { display: block; text-align: right; font-size: 12px; color: var(--accent); margin: -6px 0 16px; }
.auth-agree-label {
    display: flex; align-items: flex-start; gap: 8px; font-size: 11px; color: var(--text-secondary);
    margin-bottom: 16px; cursor: pointer; line-height: 1.4;
}
.auth-agree-label input { margin-top: 2px; }
.auth-submit-btn {
    width: 100%; height: 44px; border: none; border-radius: 50px;
    background: var(--accent); color: #fff; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: var(--transition);
}
.auth-submit-btn:hover { background: var(--accent-dark); }

/* ===== Account Hub (toolbar + sidebar + ajax content) ===== */
.acc-hub-toolbar {
    display: flex; align-items: center; gap: 14px; padding: 20px 24px;
    border-radius: var(--radius-lg); box-shadow: var(--shadow);
    background: linear-gradient(120deg, var(--accent), var(--accent-dark));
    color: #fff; margin: 20px 0;
}
.acc-hub-toolbar-icon {
    width: 44px; height: 44px; line-height: 44px; text-align: center; font-size: 20px;
    background: rgba(255,255,255,0.16); border-radius: 50%; flex-shrink: 0;
}
.acc-hub-toolbar-title { flex: 1; font-size: 19px; font-weight: 700; margin: 0; font-style: normal; color: #fff; }
.acc-hub-toolbar-pill {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
    background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50px; font-size: 13px; font-weight: 600; white-space: nowrap;
}

.acc-hub-body { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 40px; }
.acc-hub-sidebar {
    flex: 0 0 270px; display: flex; flex-direction: column; gap: 2px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); padding: 10px;
}
.acc-hub-group-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-light); padding: 12px 12px 4px; font-style: normal;
}
.acc-hub-link {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border-radius: var(--radius); color: var(--text-secondary); text-decoration: none;
    font-size: 13px; font-weight: 500; transition: var(--transition);
}
.acc-hub-link i { width: 18px; text-align: center; flex-shrink: 0; }
.acc-hub-link:hover { background: var(--accent-light); color: var(--accent); text-decoration: none; }
.acc-hub-link.active { background: var(--accent); color: #fff; font-weight: 600; }

.acc-hub-content {
    flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 24px;
}
.acc-hub-content #content { padding: 0; min-height: 0; }
.acc-hub-loading { text-align: center; padding: 60px 0; color: var(--accent); font-size: 30px; }

/* Mobile: horizontal slider with arrows */
.acc-hub-nav-wrap { display: none; }
@media (min-width: 768px) {
    .acc-hub-nav-wrap { display: contents; }
}

/* ===== Standalone account pages (edit/password/address/...): one merged
   blue toolbar with a centered, always-on pill nav + arrows — used instead
   of a left sidebar, and always visible (not just on mobile like acc-hub). ===== */
.acc-page-toolbar {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    border-radius: var(--radius-lg); box-shadow: var(--shadow);
    background: linear-gradient(120deg, var(--accent), var(--accent-dark));
    color: #fff; margin: 20px 0;
}
.acc-page-back {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.16); color: #fff; font-size: 16px;
}
.acc-page-back:hover { background: rgba(255,255,255,0.28); color: #fff; text-decoration: none; }
.acc-page-nav-wrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; }
.acc-page-nav {
    flex: 1; min-width: 0; display: flex; justify-content: center; gap: 6px;
    overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
}
.acc-page-nav::-webkit-scrollbar { display: none; }
.acc-page-link {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 50px; white-space: nowrap;
    font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18);
    transition: var(--transition);
}
.acc-page-link:hover { background: rgba(255,255,255,0.22); color: #fff; text-decoration: none; }
.acc-page-link.active { background: #fff; color: var(--accent); border-color: #fff; }
.acc-page-arrow {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: none;
    background: rgba(255,255,255,0.16); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
    transition: var(--transition);
}
.acc-page-arrow:hover:not(.disabled) { background: rgba(255,255,255,0.3); }
.acc-page-arrow.disabled { opacity: 0.3; pointer-events: none; }

/* ===== Toast notifications ===== */
/* PC like the phones: bottom centre of the screen, the stack grows upward */
.toast-container {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 3000;
    width: 380px; max-width: calc(100vw - 24px); pointer-events: none;
    /* no height transition: animating height re-lays out the page on every frame */
}
/* ("is-on", not "show": Bootstrap 3 has .show { display: block !important }) */
/* Stack: every card is absolutely placed; toastLayout() (common.js) sets
   --toast-y / --toast-s so older cards peek out behind the newest one. */
.toast {
    position: absolute; bottom: 0; left: 0; right: 0; overflow: hidden;
    display: flex; align-items: center; gap: 12px; padding: 14px 14px 16px 16px;
    background: var(--accent); color: #fff; border-radius: var(--radius-lg);
    box-shadow: 0 14px 34px -10px rgba(0,92,190,0.55); pointer-events: auto;
    opacity: 0; transform-origin: bottom center;
    transform: translateY(calc(var(--toast-y, 0px) + 14px)) scale(calc(var(--toast-s, 1) * .96));
    transition: opacity .16s ease, transform .22s cubic-bezier(.2,.8,.2,1);
    cursor: pointer;
}
.toast.is-on { transform: translateY(var(--toast-y, 0px)) scale(var(--toast-s, 1)); }
.toast.leaving { opacity: 0 !important; pointer-events: none; }
.toast-error { background: var(--danger); box-shadow: 0 14px 34px -10px rgba(220,53,69,0.5); }
.toast-icon { font-size: 20px; color: #fff; flex-shrink: 0; }
.toast-text { flex: 1; font-size: 13px; font-weight: 500; color: #fff; line-height: 1.4; }
.toast-count {
    display: none; flex-shrink: 0; padding: 1px 8px; border-radius: 50px;
    background: #fff; color: var(--accent); font-size: 11px; font-weight: 800;
}
.toast-error .toast-count { color: var(--danger); }
.toast-count.is-on { display: inline-block; animation: toastPop .3s cubic-bezier(.22,1,.36,1); }
@keyframes toastPop { 0% { transform: scale(.6); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
.toast-close {
    width: 26px; height: 26px; border: none; border-radius: 50%; flex-shrink: 0;
    background: rgba(255,255,255,0.18); color: #fff; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center; transition: var(--transition);
}
.toast-close:hover { background: rgba(255,255,255,0.32); color: #fff; }
/* Countdown bar along the bottom edge */
.toast-progress {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: rgba(255,255,255,0.7); transform-origin: left center; transform: scaleX(1);
}

/* ===== Catalog Mega Menu ===== */
.catalog-pill { cursor: pointer; }
.catalog-pill-caret { font-size: 11px; margin-left: -2px; transition: var(--transition); }
.catalog-pill.active .catalog-pill-caret { transform: rotate(180deg); }
.catalog-pill.active { background: #fff; color: var(--accent); }

.catalog-mega-overlay {
    position: fixed; inset: 0; background: rgba(13,13,26,0.55); z-index: 1400;
    opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s;
}
.catalog-mega-overlay.active { opacity: 1; visibility: visible; }

/* Left slide-out catalog drawer (was a centered mega-menu) */
.catalog-mega {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1500;
    width: 340px; max-width: 88vw; height: 100vh; max-height: 100vh;
    background: var(--surface); box-shadow: var(--shadow-lg);
    border-radius: 0; overflow: hidden;
    opacity: 1; visibility: hidden; transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), visibility 0.3s;
    display: flex; flex-direction: column;
}
.catalog-mega.active { visibility: visible; transform: translateX(0); }
.cmm-hide-bar { display: none; }

.catalog-mega-close {
    position: absolute; top: 14px; right: 14px; z-index: 5;
    width: 34px; height: 34px; border-radius: 50%; border: none;
    background: var(--bg); color: var(--text-secondary); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: var(--transition);
}
.catalog-mega-close:hover { background: var(--accent-light); color: var(--accent); }

/* Drawer header — always visible now */
.cmm-mobile-header {
    display: flex; align-items: center; gap: 12px; padding: 16px 20px;
    background: linear-gradient(120deg, var(--accent), var(--accent-dark));
    color: #fff; flex-shrink: 0;
}
.cmm-mobile-header-icon { font-size: 22px; color: #fff; }
.cmm-mobile-header-title { flex: 1; font-size: 18px; font-weight: 700; font-style: normal; color: #fff; }
.cmm-mobile-header-close {
    width: 36px; height: 36px; border: none; border-radius: 50%;
    background: rgba(255,255,255,0.18); color: #fff; font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: var(--transition);
}
.cmm-mobile-header-close:hover { background: rgba(255,255,255,0.3); }
.catalog-mega-close { display: none; }

/* Drawer base (phones): the sheet scrolls as one; only the phone card list shows —
   the desktop panel below restores the products + banner columns */
.catalog-mega-inner { display: block; flex: 1; min-height: 0; overflow-y: auto; }
.cmm-mcards { display: none; }
@media (max-width: 767px) {
    .catalog-mega .cmm-products,
    .catalog-mega .cmm-banner { display: none !important; }
}

/* Desktop: the catalog opens as a dropdown under the "Каталог" pill, styled like the bell's panel.
   Its position is set from the pill's rect in menu.twig. Phones keep the sheet from mobile.css. */
@media (min-width: 768px) {
    .catalog-mega-overlay { display: none; }
    .catalog-mega {
        z-index: 10060; bottom: auto;
        width: min(1080px, calc(100vw - 24px)); max-width: calc(100vw - 24px);
        height: auto; max-height: min(620px, calc(100vh - 90px));
        border: 1px solid var(--border); border-radius: 20px;
        box-shadow: 0 24px 60px -16px rgba(0,30,80,0.45);
        opacity: 0; transform: translateY(-8px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }
    .catalog-mega.active { opacity: 1; transform: none; }
    .cmm-mobile-header { gap: 8px; padding: 12px 14px 12px 16px; }
    .cmm-mobile-header-icon { font-size: 15px; }
    .cmm-mobile-header-title { font-size: 15px; }
    .cmm-mobile-header-close { width: 30px; height: 30px; font-size: 14px; }
    /* the panel body: accordion | bento products | promo slider — every column scrolls on its own */
    .catalog-mega-inner {
        display: grid; flex: 1; min-height: 0; overflow: hidden;
        grid-template-columns: 250px minmax(0, 1fr) 200px;
        grid-template-rows: minmax(0, 1fr);
    }
    .catalog-mega .cmm-cats { overflow-y: auto; border-right: 1px solid var(--border); padding: 8px; }
    .catalog-mega .cmm-products { display: block !important; overflow-y: auto; min-height: 0; padding: 16px 20px; }
    .catalog-mega .cmm-banner { display: block !important; min-height: 0; }
}

.cmm-cats {
    flex: none; align-self: stretch; max-height: none; overflow-y: visible; scrollbar-width: thin;
    padding: 12px 10px; border-right: none;
}
.cmm-cats::-webkit-scrollbar { width: 5px; }
.cmm-cats::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 3px; }

/* Desktop accordion tree (3 levels) in the mega-menu's left column */
.cmm-acc { border-bottom: 1px solid var(--border); }
.cmm-acc:last-child { border-bottom: none; }
.cmm-acc-btn {
    display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px;
    border: none; background: transparent; border-radius: var(--radius);
    text-align: left; color: var(--text); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: var(--transition);
}
.cmm-acc-btn i:first-child { width: 18px; text-align: center; flex-shrink: 0; color: var(--accent); }
.cmm-acc-btn span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmm-acc-caret { font-size: 12px; color: var(--text-secondary); transition: transform 0.25s ease; flex-shrink: 0; }
.cmm-acc-btn:hover, .cmm-acc.open > .cmm-acc-btn { background: var(--accent-light); color: var(--accent); }
.cmm-acc-btn.active { background: var(--accent); color: #fff; }
.cmm-acc.open > .cmm-acc-btn .cmm-acc-caret { transform: rotate(180deg); }
.cmm-acc-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.cmm-acc.open > .cmm-acc-body { max-height: 640px; overflow-y: auto; }

.cmm-sub-btn {
    display: flex; align-items: center; gap: 7px; width: 100%; padding: 8px 10px 8px 18px;
    border: none; background: transparent; border-radius: 8px; text-align: left;
    color: var(--text-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: var(--transition);
}
.cmm-sub-btn span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmm-sub-btn:hover { color: var(--accent); background: var(--accent-light); }
.cmm-sub-caret { font-size: 11px; transition: transform 0.25s ease; flex-shrink: 0; }
.cmm-sub.open > .cmm-sub-btn .cmm-sub-caret { transform: rotate(180deg); }
.cmm-sub-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.cmm-sub.open > .cmm-sub-body { max-height: 420px; }

.cmm-cnt {
    font-size: 10px; font-weight: 700; color: var(--text-secondary);
    background: var(--border); border-radius: 50px; padding: 1px 6px; flex-shrink: 0;
}
.cmm-leaf {
    display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 30px;
    border-radius: 8px; text-decoration: none; color: var(--text-secondary);
    font-size: 12px; transition: var(--transition);
}
.cmm-leaf i { font-size: 10px; opacity: 0.5; flex-shrink: 0; }
.cmm-leaf span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmm-leaf:hover, .cmm-leaf.active { color: var(--accent); background: var(--accent-light); text-decoration: none; }
.cmm-acc-all {
    display: flex; align-items: center; gap: 7px; margin: 8px 0 6px; padding: 7px 10px;
    border-radius: 8px; text-decoration: none; color: var(--accent);
    font-size: 12px; font-weight: 600; transition: var(--transition);
}
.cmm-acc-all:hover { background: var(--accent-light); text-decoration: none; }

.cmm-products { flex: 1; min-width: 0; padding: 20px 24px; }
.cmm-products-panel { display: none; }
.cmm-products-panel.active { display: block; animation: fadeInUp 0.25s ease both; }

.cmm-products-head .cmm-view-all {
    margin-left: auto; font-size: 11.5px; font-weight: 600; text-transform: none;
    letter-spacing: 0; color: var(--accent); display: inline-flex; align-items: center; gap: 5px;
}
.cmm-products-head .cmm-view-all:hover { color: var(--accent-dark); }

.cmm-empty-hint { font-size: 13px; color: var(--text-secondary); }
.cmm-empty-hint a { font-weight: 600; }

/* Vertical promo banner — right-hand column, runs the full height of the panel */
.cmm-banner {
    position: relative; flex: 0 0 190px; overflow: hidden;
    border-left: 1px solid var(--border);
}
.cmm-banner-track { position: relative; height: 100%; min-height: 260px; }
.cmm-banner-slide {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center; gap: 8px; padding: 24px 18px;
    opacity: 0; transition: opacity 0.5s ease;
}
.cmm-banner-slide.active { opacity: 1; }
.cmm-banner-icon {
    font-size: 22px; color: #fff; width: 44px; height: 44px; line-height: 44px;
    background: rgba(255,255,255,0.16); border-radius: 50%; margin-bottom: 4px;
}
.cmm-banner-title { font-size: 14px; font-weight: 700; line-height: 1.3; color: #fff; }
.cmm-banner-sub { font-size: 11.5px; color: rgba(255,255,255,0.85); line-height: 1.4; }
.cmm-banner-btn {
    margin-top: 6px; padding: 7px 18px; background: rgba(255,255,255,0.2); color: #fff;
    border: 1px solid rgba(255,255,255,0.3); border-radius: 50px; font-size: 12px; font-weight: 600;
    text-decoration: none; transition: var(--transition); white-space: nowrap;
}
.cmm-banner-btn:hover { background: #fff; color: var(--accent); text-decoration: none; }
.cmm-banner-dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; z-index: 2; }
.cmm-banner-dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.4); transition: var(--transition); }
.cmm-banner-dots span.active { background: #fff; width: 14px; border-radius: 3px; }

.cmm-products-head {
    display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
    color: var(--text); margin-bottom: 16px; font-style: normal;
}
.cmm-products-head i { color: var(--warning); }
.cmm-products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cmm-product-card {
    display: flex; flex-direction: column; padding: 12px; background: var(--bg);
    border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none;
    color: var(--text); transition: var(--transition);
}
.cmm-product-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; }
.cmm-product-img { text-align: center; margin-bottom: 8px; }
.cmm-product-img img { max-width: 100%; height: 70px; object-fit: contain; }
.cmm-product-name {
    font-size: 12px; font-weight: 500; line-height: 1.35; margin-bottom: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cmm-product-price { font-size: 13px; font-weight: 700; color: var(--accent); }

/* ===== Hero Slider ===== */
.hero-cat-wrap {
    width: 100%; margin: 0; padding: 16px 20px 0;
}
/* PC: aligned with the floating header card above it (12px offsets, same rounded look) */
@media (min-width: 768px) {
    .hero-cat-wrap { padding: 12px 12px 0; }
    .hero-slider { border-radius: 22px; }
}
.hero-slider {
    display: block; position: relative; overflow: hidden;
    margin: 0; padding: 0; background: transparent;
    border-radius: var(--radius-lg);
}
.hero-slider-track {
    display: flex; transition: transform 0.4s cubic-bezier(.22,1,.36,1);
    will-change: transform;
}
.hero-slide {
    flex: 0 0 100%; min-width: 100%; box-sizing: border-box;
    display: flex; align-items: center; gap: 24px;
    padding: 32px 48px; min-height: 200px; max-height: 240px;
    color: #fff; position: relative;
}
.hero-slide-icon {
    font-size: 48px; flex-shrink: 0; width: 80px; height: 80px;
    line-height: 80px; text-align: center; border-radius: 50%;
    background: rgba(255,255,255,0.18);
}
.hero-slide-body { flex: 1; min-width: 0; text-align: center; }
.hero-slide-title {
    font-size: 24px; font-weight: 700; margin-bottom: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-slide-desc {
    font-size: 15px; opacity: 0.85; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.hero-slide-btn {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px; border-radius: 50px; font-size: 14px; font-weight: 600;
    background: rgba(255,255,255,0.22); color: #fff; text-decoration: none;
    white-space: nowrap; transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
}
.hero-slide-btn:hover { background: rgba(255,255,255,0.35); }
.hero-slide-btn:active { transform: scale(0.93); }

.hero-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,0.85); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: var(--accent); z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
}
.hero-arrow:hover { background: #fff; }
.hero-arrow:active { transform: translateY(-50%) scale(0.88); }
.hero-arrow-prev { left: 12px; }
.hero-arrow-next { right: 12px; }

.hero-dots {
    position: absolute; bottom: 10px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 6px;
    z-index: 5;
}
.hero-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,0.4); transition: var(--transition);
    cursor: pointer;
}
.hero-dot.active { background: #fff; width: 24px; border-radius: 4px; }

/* ===== Product module heading: count badge + empty state ===== */
.module-heading {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.module-count {
    font-size: 12px; font-weight: 700; line-height: 1;
    background: var(--accent-light); color: var(--accent);
    padding: 4px 10px; border-radius: 50px; white-space: nowrap;
}
.module-empty {
    padding: 18px; margin-bottom: 18px;
    background: var(--surface); border: 1px dashed var(--border);
    border-radius: var(--radius-lg, 10px);
    color: var(--text-secondary); font-size: 14px; text-align: center;
}

/* ===== Category Slider (homepage hero widget, header.twig) ===== */
.cat-slider {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; position: relative;
}
.cat-slider-track {
    display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none;
    flex: 1; padding: 4px 2px;
}
.cat-slider-track::-webkit-scrollbar { display: none; }
.cat-pill {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 18px; border-radius: 50px; text-decoration: none;
    background: var(--surface); border: 1.5px solid var(--border);
    color: var(--text); white-space: nowrap; transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
    min-height: 42px;
}
.cat-pill:hover { border-color: var(--accent); background: var(--accent-light); }
.cat-pill:active { transform: scale(0.93); border-color: var(--accent); }
.cat-pill.active { border-color: var(--accent); background: var(--accent); }
.cat-pill.active .cat-pill-icon, .cat-pill.active .cat-pill-name { color: #fff; }
.cat-pill.active .cat-pill-count { background: rgba(255,255,255,0.25); color: #fff; }
.cat-pill-icon { font-size: 16px; color: var(--accent); }
.cat-pill-name { font-size: 13px; font-weight: 600; color: var(--text); }
.cat-pill-count {
    font-size: 11px; font-weight: 700; background: var(--accent-light);
    color: var(--accent); padding: 2px 8px; border-radius: 50px;
    min-width: 22px; text-align: center;
}
.cat-arrow {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
    background: var(--surface); border: 1px solid var(--border); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: var(--accent); transition: var(--transition);
    box-shadow: var(--shadow-sm); z-index: 5;
    -webkit-tap-highlight-color: transparent;
}
.cat-arrow:hover { background: var(--accent-light); }
.cat-arrow:active { transform: scale(0.88); }
.cat-arrow.disabled { opacity: 0.3; pointer-events: none; }

/* ===== Category Bento (2-level accordion cards) ===== */
.category-bento {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-bottom: 18px;
}
.bento-item { flex: 1 1 180px; max-width: 260px; }
.bento-card {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; padding: 12px 16px; border-radius: var(--radius-lg, 10px);
    background: var(--surface); border: 1.5px solid var(--border);
    color: var(--text); text-decoration: none; transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
    /* .bento-card is a <button> for categories with children (see category.twig) and
       an <a> for leaf categories — reset the button chrome so both look identical. */
    font: inherit; cursor: pointer; outline: none; text-align: left;
}
.bento-card:hover, .bento-card:focus {
    border-color: var(--accent); background: var(--accent-light);
    color: var(--text); text-decoration: none;
}
.bento-card-name { font-size: 13px; font-weight: 600; }
.bento-card-caret { font-size: 12px; color: var(--accent); transition: transform 0.2s ease; }
.bento-card[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-light); }
.bento-card[aria-expanded="true"] .bento-card-caret { transform: rotate(180deg); }
.bento-item:has(.bento-accordion.in),
.bento-item:has(.bento-accordion.collapsing) { flex-basis: 100%; max-width: 100%; }
.bento-accordion-inner {
    max-height: 240px; overflow-y: auto;
    margin-top: 6px; padding: 8px;
    border: 1.5px solid var(--border); border-radius: var(--radius-lg, 10px);
    background: var(--surface);
    display: flex; flex-direction: column; gap: 2px;
}
.bento-accordion-link {
    padding: 8px 10px; border-radius: 6px; font-size: 13px;
    color: var(--text); text-decoration: none;
}
.bento-accordion-link:hover { background: var(--accent-light); color: var(--text); text-decoration: none; }
.bento-accordion-all { font-weight: 700; color: var(--accent); }
.bento-accordion-all i { margin-right: 6px; }

/* ===== Category browser: one card — blue toolbar across the top, then the
   level-1 sidebar and the level-2/3 accordion (or products) side by side ===== */
.cat-browser {
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: var(--radius-lg, 10px); box-shadow: var(--shadow-sm);
    overflow: clip;   /* rounds the toolbar's top corners; clip (not hidden) keeps the sidebar sticky */
    margin-bottom: 24px;
}
#product-category .cat-browser > .special-toolbar { margin: 0; border-radius: 0; box-shadow: none; }
.cat-browser-body { display: flex; gap: 18px; align-items: flex-start; padding: 18px; }
.cat-browser-side {
    flex: 0 0 240px; max-width: 240px;
    position: sticky; top: 16px;
    background: var(--bg, #f7f8fa); border-radius: var(--radius, 8px); padding: 12px;
}
.cat-side-title {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: var(--accent); margin: 2px 4px 10px;
}
.cat-side-title i { margin-right: 6px; }
.cat-side-list { display: flex; flex-direction: column; gap: 4px; }
.cat-side-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 10px; border-radius: 8px;
    background: transparent; border: 1.5px solid transparent;
    color: var(--text); text-decoration: none; transition: var(--transition);
    font-size: 13px; font-weight: 600;
}
.cat-side-btn:hover { background: var(--accent-light); color: var(--text); text-decoration: none; }
.cat-side-plus {
    flex: 0 0 20px; width: 20px; height: 20px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-light); color: var(--accent); font-size: 10px;
}
.cat-side-name { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.cat-side-count { flex: 0 0 auto; font-size: 11px; color: #8a8f98; font-weight: 500; }
.cat-side-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.cat-side-btn.active .cat-side-plus { background: rgba(255,255,255,0.25); color: #fff; }
.cat-side-btn.active .cat-side-count { color: rgba(255,255,255,0.8); }

.cat-browser-main { flex: 1 1 auto; min-width: 0; }

.cat-acc { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.cat-acc-item {
    border: 1.5px solid var(--border); border-radius: var(--radius-lg, 10px);
    background: var(--surface); overflow: hidden;
}
.cat-acc-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; padding: 12px 16px; background: transparent; border: 0;
    font: inherit; font-weight: 700; font-size: 14px; color: var(--text);
    cursor: pointer; text-align: left; outline: none;
}
.cat-acc-head:hover { background: var(--accent-light); }
.cat-acc-caret { font-size: 13px; color: var(--accent); transition: transform .2s ease; }
.cat-acc-head[aria-expanded="true"] .cat-acc-caret { transform: rotate(180deg); }
.cat-acc-panel { border-top: 1.5px solid var(--border); }
.cat-acc-scroll {
    max-height: 260px; overflow-y: auto;
    padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.cat-acc-link {
    padding: 9px 12px; border-radius: 6px; font-size: 13px;
    color: var(--text); text-decoration: none;
}
.cat-acc-link:hover { background: var(--accent-light); color: var(--text); text-decoration: none; }
.cat-acc-all { font-weight: 700; color: var(--accent); }
.cat-acc-all i { margin-right: 6px; }
.cat-acc-leaf {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; font-weight: 700; font-size: 14px;
    color: var(--text); text-decoration: none;
}
.cat-acc-leaf:hover { background: var(--accent-light); color: var(--text); text-decoration: none; }

/* Product filter panel (left sidebar on product-listing category pages) */
.filter-panel { display: flex; flex-direction: column; gap: 14px; }
.filter-group { display: flex; flex-direction: column; gap: 6px; }
.filter-label { font-size: 12px; font-weight: 700; color: var(--text); }
.filter-views { display: flex; gap: 6px; }
.filter-views .btn {
    flex: 1 1 0; border-radius: 8px; height: 38px;
    border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
}
.filter-views .btn:hover, .filter-views .btn.active {
    background: var(--accent-light); border-color: var(--accent); color: var(--accent);
}
.filter-panel .form-control {
    border-radius: 8px; border: 1.5px solid var(--border);
    height: 38px; font-size: 13px; background: var(--surface); color: var(--text);
}
.filter-compare {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 12px; border-radius: 8px;
    background: var(--accent-light); color: var(--accent);
    font-weight: 600; font-size: 13px; text-decoration: none;
}
.filter-compare:hover { background: var(--accent); color: #fff; text-decoration: none; }

/* ===== Auto-adaptation for different mobile screens ===== */

/* Ripple effect */
.app-ripple {
    position: absolute; border-radius: 50%; pointer-events: none;
    background: rgba(255,255,255,0.45);
    transform: scale(0); animation: appRipple 0.6s ease-out;
    z-index: 10;
}
@keyframes appRipple {
    to { transform: scale(2.5); opacity: 0; }
}

/* Page entrance transition */
.app-page-in #content {
    animation: appPageIn 0.35s cubic-bezier(.22,1,.36,1) both;
}
@keyframes appPageIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* No text selection on app-like controls */
.header-icon-btn, .pt-buy-btn, .pt-action, .catalog-acc-btn {
    -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}

/* ===== Product Tabs (horizontal bar under toolbar) ===== */
.product-tabs-bar {
    background: var(--bg); border-bottom: 1px solid var(--border);
    padding: 10px 20px; position: sticky; top: 64px; z-index: 999;
}
.product-tabs-track {
    display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none;
    max-width: 1200px; margin: 0 auto; padding: 2px;
}
.product-tabs-track::-webkit-scrollbar { display: none; }
.ptab-pill {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 50px; text-decoration: none;
    font-size: 14px; font-weight: 600; color: var(--accent);
    background: transparent; border: 1.5px solid var(--accent);
    transition: var(--transition); -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.ptab-pill:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.ptab-pill.active { border-color: var(--accent); color: #fff; background: var(--accent); }
.ptab-pill i { font-size: 14px; }

/* Horizontal sub-navbar inside the "Про товар" tab */
/* Tab bar: plain tabs over a hairline, the active one underlined by .psub-ink,
   which slides between tabs (position set from JS, animated via transform). */
/* "←" + tabs in one row over a shared hairline (the blue product toolbar is gone) */
.psub-bar {
    display: flex; align-items: stretch; gap: 8px; margin: 0 0 18px;
    border-bottom: 2px solid var(--border);
}
.psub-back {
    flex: 0 0 38px; width: 38px; height: 38px; align-self: center; margin: 4px 0;
    border: none; border-radius: 50%; cursor: pointer;
    background: var(--accent-light); color: var(--accent); font-size: 22px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.psub-back:hover { background: var(--accent); color: #fff; }
.psub-back:active { transform: scale(.9); }
.product-subnav {
    position: relative; flex: 1 1 auto; min-width: 0; display: flex; gap: 4px;
    margin-bottom: -2px;   /* the active tab's underline sits on the shared hairline */
}
.product-subnav-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 16px; text-decoration: none;
    font-size: 14px; font-weight: 600; color: var(--text-secondary);
    background: transparent; border: none; border-radius: 8px 8px 0 0;
    transition: color .2s ease, background-color .2s ease; white-space: nowrap; cursor: pointer;
}
.product-subnav-pill i { color: inherit; opacity: .8; }
.product-subnav-pill:hover { color: var(--accent); background: var(--accent-light); text-decoration: none; }
.product-subnav-pill:focus { text-decoration: none; }
.product-subnav-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.product-subnav-pill.active { color: var(--accent); background: transparent; }
.psub-ink {
    position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
    border-radius: 3px 3px 0 0; background: var(--accent); pointer-events: none;
    transition: transform .35s cubic-bezier(.22,1,.36,1), width .35s cubic-bezier(.22,1,.36,1);
}
.psub-ink.no-anim { transition: none; }
.psub-pane { display: none; }
.psub-pane.active { display: block; animation: psubIn .3s ease both; }
@keyframes psubIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .psub-ink { transition: none; }
    .psub-pane.active { animation: none; }
}

.product-tabs-content-wrap {
    max-width: 1200px; margin: 0 auto; padding: 20px;
}
.product-tabs-content-wrap .tab-content > .tab-pane { display: none !important; }
.product-tabs-content-wrap .tab-content > .tab-pane.active { display: block !important; }

/* Desktop: tabs become a left sidebar instead of a bar under the toolbar */
@media (min-width: 992px) {
    .product-tabs-row {
        display: flex; align-items: stretch; gap: 24px;
        width: auto; max-width: 1280px; margin: 0 auto; padding: 20px;   /* not full-width on big screens: 1240px of content, centred */
    }
    .product-tabs-bar {
        flex: 0 0 220px; position: static;
        background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
        border-bottom: 1px solid var(--border); padding: 16px; z-index: auto;
    }
    .product-tabs-track {
        flex-direction: column; max-width: none; margin: 0; padding: 0; overflow: visible;
    }
    .ptab-pill { width: 100%; justify-content: flex-start; }
    .product-tabs-content-wrap {
        flex: 1; min-width: 0; max-width: none; margin: 0; padding: 0;
    }
}

/* ===== Product Page (sliders layout) ===== */
.product-page-wrap {
    max-width: 1200px; margin: 0 auto; padding: 20px;
}
.product-tabs-content-wrap .product-page-wrap {
    padding: 0; max-width: none; margin: 0;
}
.product-main-row {
    display: block;
}
.product-photo-section { max-width: 460px; margin: 0 0 20px; }
/* Product summary: outline card (no accent fill), regular text colours from the base rules */
.product-short-info {
    background: var(--surface); border: 1.5px solid var(--accent); color: var(--text);
    border-radius: var(--radius-lg); padding: 20px; margin-bottom: 20px;
}
.product-right-sidebar { margin-bottom: 16px; }
/* "Характеристика" tab: the product description sits above the attributes table */
.product-spec-desc {
    margin-bottom: 18px; padding: 16px 18px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.product-spec-title {
    display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
    font-size: 16px; font-weight: 700; color: var(--text); font-style: normal;
}
.product-spec-title i { color: var(--accent); }
.product-spec-desc .product-description-full { font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.product-right-sidebar .product-variants-accordion:last-child { margin-bottom: 0; }

/* Laptops (992–1299px): photo and info side by side too, the photo a bit narrower */
@media (min-width: 992px) and (max-width: 1299px) {
    .product-main-row { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 20px; }
    .product-photo-section { flex: 0 0 42%; max-width: 440px; margin: 0; }
    .product-short-info { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
}
/* Photo + info + variants sit side by side once there's genuinely enough room next to the fixed left sidebar */
@media (min-width: 1300px) {
    .product-main-row { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 24px; }
    .product-photo-section { flex: 0 0 430px; max-width: 430px; margin: 0; }   /* 356px photo + 74px thumbnail column */
    .product-short-info { flex: 1 1 0; min-width: 0; margin-bottom: 0; }   /* shares the rest of the row equally with the reviews column */
    .product-right-sidebar {
        flex: 0 0 260px; min-width: 0; margin-bottom: 0;
        background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
        padding: 16px;
    }
}
.pps-slider {
    position: relative; overflow: hidden; border-radius: var(--radius-lg);
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
    width: 100%; aspect-ratio: 1;
}
.pps-track {
    display: flex; transition: transform 0.35s cubic-bezier(.22,1,.36,1); will-change: transform;
    height: 100%;
}
.pps-slide {
    flex: 0 0 100%; min-width: 100%; display: flex; align-items: center; justify-content: center;
    height: 100%; background: var(--bg);
}
.pps-slide { padding: 14px; box-sizing: border-box; }
.pps-slide img { width: 100%; height: 100%; object-fit: contain; }
.pps-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,0.85); color: var(--accent); font-size: 20px;
    display: flex; align-items: center; justify-content: center; z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: var(--transition);
}
.pps-arrow:hover { background: #fff; }
.pps-prev { left: 10px; }
.pps-next { right: 10px; }
.pps-dots {
    position: absolute; bottom: 10px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 6px; z-index: 5;
}
.pps-dot {
    width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.2);
    cursor: pointer; transition: var(--transition);
}
.pps-dot.active { background: var(--accent); width: 24px; border-radius: 4px; }
.pps-actions {
    position: absolute; top: 12px; right: 12px; z-index: 6;
    display: flex; flex-direction: column; gap: 8px;
}
.pps-action-btn {
    width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border);
    background: rgba(255,255,255,0.92); color: var(--text-secondary);
    box-shadow: var(--shadow-sm); cursor: pointer; font-size: 15px;
    display: flex; align-items: center; justify-content: center; transition: var(--transition);
}
.pps-action-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: scale(1.08); }
.pps-action-btn:active { transform: scale(0.92); }
.pps-action-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.pps-thumbs {
    position: absolute; bottom: 0; left: 0; right: 0;
    display: flex; gap: 6px; padding: 8px 10px; overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
    background: linear-gradient(transparent, rgba(0,0,0,0.45));
    z-index: 6;
}
.pps-thumbs::-webkit-scrollbar { display: none; }
.pps-thumb {
    flex-shrink: 0; width: 52px; height: 52px; border-radius: var(--radius); overflow: hidden;
    border: 2px solid rgba(255,255,255,0.5); cursor: pointer; transition: var(--transition);
    background: rgba(255,255,255,0.9);
}
.pps-thumb:hover { border-color: #fff; }
.pps-thumb.active { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.pps-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Gallery layout: vertical thumbnail column on the left of the main photo.
   The column stretches to the slider's height (square), the list inside scrolls. */
.pps-gallery { display: flex; gap: 10px; align-items: stretch; }
.pps-gallery .pps-slider { flex: 1 1 auto; min-width: 0; }
.pps-thumbs-col { flex: 0 0 64px; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.pps-thumbs-col .pps-thumbs {
    position: static; flex: 1 1 0; min-height: 0;
    flex-direction: column; align-items: center; gap: 8px; padding: 2px 0;
    overflow-x: hidden; overflow-y: auto; background: none; overscroll-behavior: contain;
}
.pps-thumbs-col .pps-thumb {
    width: 60px; height: 60px; border: 2px solid var(--border); background: var(--surface);
}
.pps-thumbs-col .pps-thumb:hover { border-color: var(--accent); }
.pps-thumbs-col .pps-thumb.active { border-color: var(--accent); box-shadow: none; }
.pps-tnav {
    flex: 0 0 26px; width: 100%; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface); color: var(--accent); font-size: 16px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: var(--transition);
}
.pps-tnav:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
.pps-tnav:disabled { opacity: .35; cursor: default; }

/* Product stats as pills (article, stock, views, brand, unit) */
.psi-grip { display: none; }
.product-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.ps-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 50px;
    background: var(--accent-light); border: 1px solid transparent;
    font-size: 12.5px; color: var(--text-secondary); text-decoration: none; line-height: 1.2;
}
.ps-pill i { color: var(--accent); font-size: 12px; }
.ps-pill b { color: var(--text); font-weight: 700; }
a.ps-pill:hover { border-color: var(--accent); text-decoration: none; }
.ps-stock.is-in { background: #e8f7ee; color: #1e7e44; }
.ps-stock.is-in i, .ps-stock.is-in b { color: #1e7e44; }
.ps-stock.is-out { background: #fdecec; color: #b42318; }
.ps-stock.is-out i { color: #b42318; }

/* Price row: price block + short description pill; sale details */
.product-price-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-bottom: 14px; }
.product-price-row .product-price-block { flex: 0 0 auto; margin-bottom: 0; display: flex; flex-direction: column; justify-content: center; }
.pp-short {
    flex: 1 1 130px; min-width: 130px; align-self: center;   /* too little room beside a sale price → own line */
    padding: 8px 14px; border-radius: 16px; background: var(--accent-light);
    font-size: 12.5px; line-height: 1.35; color: var(--text-secondary);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pp-short i { color: var(--accent); margin-right: 3px; }
.pp-sale-line { display: flex; align-items: center; gap: 8px; }
.pp-sale-badge {
    padding: 2px 8px; border-radius: 50px; background: #e53935; color: #fff;
    font-size: 12px; font-weight: 800; line-height: 1.4;
}
.product-price-block.is-sale .pp-price { color: #e53935; }
.pp-sale-meta { font-size: 12px; font-weight: 600; color: #1e7e44; margin-top: 2px; }
.pp-discounts { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }
.pp-disc-chip {
    padding: 5px 10px; border-radius: 50px; border: 1px dashed var(--accent);
    font-size: 12px; color: var(--text-secondary);
}
.pp-disc-chip b { color: var(--accent); }

/* Installments / credit mini-module (above the buy row) */
.pinst { margin: 0 0 14px; padding: 12px; border: 1.5px dashed var(--border); border-radius: var(--radius-lg); }
.pinst-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.pinst-title i { color: var(--accent); margin-right: 4px; }
.pinst-plans { display: flex; flex-wrap: wrap; gap: 6px; }
.pinst-plan {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 50px;
    border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
    font-size: 12.5px; font-weight: 600; cursor: pointer; transition: var(--transition);
}
.pinst-plan:hover { border-color: var(--accent); }
.pinst-plan.active { border-color: var(--accent); background: var(--accent-light); }
.pinst-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.pinst-max { font-weight: 500; font-size: 11px; color: var(--text-secondary); }
.pinst-detail { display: none; margin-top: 10px; }
.pinst-detail.active { display: block; }
.pinst-terms { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pinst-term {
    min-width: 34px; height: 28px; padding: 0 8px; border-radius: 50px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text-secondary); font-size: 12px; font-weight: 700; cursor: pointer;
    transition: var(--transition);
}
.pinst-term.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.pinst-terms-label { font-size: 12px; color: var(--text-secondary); margin-left: 4px; }
.pinst-sum { margin-top: 8px; font-size: 13px; color: var(--text-secondary); }
.pinst-monthly { font-size: 18px; color: var(--text); }
.pinst-x { font-weight: 600; margin-right: 6px; }
.pinst-note { display: block; font-size: 11.5px; margin-top: 2px; }

/* "Характеристика" accordion (open by default, scrolls inside): under the photo on
   desktops (.pspec-desktop), under the product info block on phones (.pspec-mobile) */
.pspec-acc {
    margin-top: 14px; overflow: hidden;
    border: 1.5px solid var(--border); border-radius: var(--radius-lg, 10px); background: var(--surface);
}
.pspec-mobile { display: none; }
@media (max-width: 991px) {
    .pspec-desktop { display: none; }
    .pspec-mobile { display: block; }
}
.pspec-head {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 12px 16px; border: none; background: transparent; cursor: pointer;
    font-size: 14px; font-weight: 700; color: var(--text); transition: color .2s ease, background-color .2s ease;
}
.pspec-head:hover { background: var(--accent-light); color: var(--accent); }
.pspec-head i.fa-list-alt { color: var(--accent); margin-right: 6px; }
.pspec-caret { transition: transform .25s ease; }
.pspec-acc.open .pspec-caret { transform: rotate(180deg); }
.pspec-acc.open .pspec-head { border-bottom: 1px solid var(--border); color: var(--accent); }
.pspec-body {
    display: none; max-height: 320px; overflow-y: auto; overscroll-behavior: contain;
    padding: 12px 16px; scrollbar-width: thin;
}
.pspec-acc.open .pspec-body { display: block; }
.pspec-body .product-spec-desc { margin-bottom: 12px; padding: 0; border: none; background: none; }
.pspec-body .product-spec-title { font-size: 14px; }
.pspec-body .table { margin-bottom: 0; font-size: 13px; }
.pspec-body .table td:first-child { color: var(--text-secondary); width: 45%; }

/* "Доступні варіанти" accordion under the buy row */
.pvar { margin-top: 12px; }
.pvar-head {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 16px; border-radius: 50px; border: 1.5px solid var(--border); background: var(--surface);
    color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; transition: var(--transition);
}
.pvar-head:hover, .pvar.open .pvar-head { border-color: var(--accent); color: var(--accent); }
.pvar-head i.fa-cubes { color: var(--accent); margin-right: 4px; }
.pvar-count {
    display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 50px;
    background: var(--accent-light); color: var(--accent); font-size: 12px; line-height: 20px; text-align: center;
}
.pvar-caret { transition: transform .25s ease; }
.pvar.open .pvar-caret { transform: rotate(180deg); }
.pvar-body { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 2px 2px; }
.pvar-body[hidden] { display: none; }
.pvar-pill {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 7px 12px; border-radius: 50px;
    border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
    font-size: 12.5px; font-weight: 600; text-decoration: none; transition: var(--transition);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pvar-pill b { color: var(--accent); font-weight: 700; }
a.pvar-pill:hover { border-color: var(--accent); background: var(--accent-light); color: var(--text); text-decoration: none; }
.pvar-pill.active { border-color: var(--accent); background: var(--accent); color: #fff; }
.pvar-sub {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin: 6px 0 6px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary);
}
.product-short-info .pvar-sub { color: rgba(255,255,255,0.75); }

/* "Схожі товари": mini cards in a horizontal slider (scroll / swipe / arrows) */
.pvar-similar { flex-basis: 100%; min-width: 0; }
.pvar-sim-nav { display: inline-flex; gap: 4px; }
.pvar-sim-arrow {
    width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border);
    background: var(--surface); color: var(--text); font-size: 14px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; transition: var(--transition);
}
.pvar-sim-arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pvar-sim-arrow:disabled { opacity: .35; cursor: default; }
.pvar-sim-track {
    display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; padding: 2px 1px 4px;
}
.pvar-sim-track::-webkit-scrollbar { display: none; }
.pvar-sim-card {
    flex: 0 0 132px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px;
    padding: 8px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface);
    color: var(--text); text-decoration: none; transition: var(--transition);
}
.pvar-sim-card:hover { border-color: var(--accent); color: var(--text); text-decoration: none; }
.pvar-sim-img {
    height: 84px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center;
    overflow: hidden; color: var(--border-dark); font-size: 26px;
}
.pvar-sim-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pvar-sim-name {
    font-size: 11.5px; font-weight: 600; line-height: 1.3; min-height: 2.6em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pvar-sim-price { margin-top: auto; font-size: 13px; color: var(--accent); }
.product-short-info .pvar-sim-card { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); color: #fff; }
.product-short-info .pvar-sim-price { color: #fff; }
.product-short-info .pvar-sim-arrow { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); color: #fff; }

/* Quantity stepper: − [n] + */
.qty-stepper {
    display: inline-flex; align-items: center; height: 44px;
    border: 1.5px solid var(--border); border-radius: 50px; background: var(--surface); overflow: hidden;
}
.qty-stepper .qty-btn {
    width: 38px; height: 100%; border: none; background: transparent; color: var(--accent);
    font-size: 12px; cursor: pointer; transition: var(--transition);
}
.qty-stepper .qty-btn:hover { background: var(--accent-light); }
.product-qty .qty-stepper input {
    width: 44px; height: 100%; padding: 0; border: none; box-shadow: none; background: transparent;
    text-align: center; font-size: 15px; font-weight: 700; color: var(--text);
}

/* Short info */
.product-title { font-size: 22px; font-weight: 700; margin: 0 0 8px; color: var(--text); }
/* In the info block the title sits on a translucent pill */
.product-short-info .product-title {
    padding: 10px 16px; margin-bottom: 12px; border-radius: 18px; line-height: 1.3;
    background: rgba(0, 92, 190, 0.07); border: 1px solid rgba(0, 92, 190, 0.14);
}
.product-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.product-rating .rpill { width: 18px; height: 7px; border-radius: 4px; }
.product-reviews-link { font-size: 13px; color: var(--accent); text-decoration: none; }
.product-reviews-link:hover { text-decoration: underline; }
.product-meta {
    list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px;
}
.product-meta li { font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.product-meta li i { color: var(--accent); font-size: 12px; }
.product-price-block {
    background: var(--surface); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px;
}
.pp-price { font-size: 28px; font-weight: 700; color: var(--accent); }
.pp-price-old { font-size: 16px; color: var(--text-light); text-decoration: line-through; margin-right: 10px; }
.pp-tax { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.pp-points { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.pp-discounts { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.pp-discounts span { font-size: 12px; color: var(--text-secondary); }

/* Variants accordion (pill-style header, matching the sidebar tab pills) */
.product-variants-accordion { margin-bottom: 16px; }
.pva-header {
    width: 100%; padding: 10px 18px 10px 10px; border: 1.5px solid var(--border); border-radius: 50px;
    cursor: pointer; background: var(--surface); display: flex; align-items: center; justify-content: space-between;
    font-size: 14px; font-weight: 600; color: var(--text-secondary); transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
}
.pva-header:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.pva-header.open { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.pva-header span { display: flex; align-items: center; gap: 10px; }
.pva-header span i {
    width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 50%;
    background: var(--accent-light); color: var(--accent); font-size: 13px; flex-shrink: 0; transition: var(--transition);
}
.pva-header.open span i, .pva-header:hover span i { background: var(--accent); color: #fff; }
.pva-arrow { font-size: 16px; color: var(--text-secondary); transition: transform 0.25s; }
.pva-header.open .pva-arrow { transform: rotate(180deg); color: var(--accent); }
.pva-body {
    display: none; padding: 16px 18px; margin-top: 8px;
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
}

.product-options { margin-bottom: 16px; }
.product-options h3 { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.product-buy-block {
    background: var(--surface); border: 1px solid var(--accent);
    border-radius: var(--radius-lg); padding: 16px; margin-bottom: 0;
}
.product-buy-block .alert { margin: 12px 0 0; }
.product-buy-row {
    display: flex; align-items: flex-end; gap: 12px;
}
.product-qty { display: flex; flex-direction: column; gap: 4px; }
.product-qty label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.product-qty input { width: 70px; }
.product-cart-btn {
    flex: 1; padding: 12px 24px; border: none; border-radius: var(--radius);
    background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: var(--transition);
}
.product-cart-btn:hover { background: var(--accent-dark); }

/* Related products slider */
/* Rounded card right under the product block; its header is a blue toolbar strip
   with the icon + title centred, the cards scroll underneath */
.product-related-section {
    margin: 20px 0 0; clear: both; overflow: hidden;
    background: var(--surface); border: 1.5px solid var(--border); border-radius: 24px;
    box-shadow: var(--shadow-sm);
}
.prs-head {
    display: flex; align-items: center; justify-content: center; padding: 14px 20px;
    background: linear-gradient(120deg, var(--accent), var(--accent-dark));
}
.product-related-section h3.prs-title {
    display: flex; align-items: center; gap: 10px; margin: 0;
    font-size: 17px; font-weight: 700; color: #fff; text-align: center;
}
.prs-title-icon {
    width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.18); color: #fff; font-size: 16px;
}
/* Tabs in the toolbar instead of the title: "Рекомендуємо" / "Схожі товари" / "Ви переглядали" */
.prs-head-tabs { gap: 8px; padding: 10px 14px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.prs-head-tabs::-webkit-scrollbar { display: none; }
/* centred, but when the tabs overflow (phones) they scroll from the first one */
.prs-head-tabs { justify-content: flex-start; }
.prs-head-tabs .prs-tab:first-child { margin-left: auto; }
.prs-head-tabs .prs-tab:last-child { margin-right: auto; }
.prs-tab {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
    padding: 8px 16px; border: 1.5px solid rgba(255,255,255,0.35); border-radius: 50px;
    background: rgba(255,255,255,0.12); color: #fff; font-size: 14px; font-weight: 700; font-style: normal;
    cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.prs-tab:hover { background: rgba(255,255,255,0.22); }
.prs-tab.active { background: #fff; border-color: #fff; color: var(--accent); }
.prs-tab b {
    min-width: 22px; padding: 1px 7px; border-radius: 50px; font-size: 11.5px; font-style: normal;
    background: rgba(255,255,255,0.22); color: #fff; text-align: center;
}
.prs-tab.active b { background: var(--accent); color: #fff; }
.prs-track[hidden] { display: none; }
.product-related-section .prs-slider { padding: 16px 22px 18px; }
.prs-slider { position: relative; }
.prs-track {
    display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none; padding: 4px 2px;
}
.prs-track::-webkit-scrollbar { display: none; }
/* compact cards: smaller photo and title, no slide-out description (the track clips it) */
.prs-card { flex-shrink: 0; width: 200px; scroll-snap-align: start; }
.prs-track { scroll-snap-type: x mandatory; }
.prs-card .product-thumb { margin-bottom: 0; height: 100%; }
.prs-card .product-thumb .image { height: 160px; padding: 12px; }
.prs-card .product-thumb .caption { min-height: 0; padding: 0 12px; }
.prs-card .product-thumb h4 { font-size: 13px; line-height: 1.3; }
.prs-card .product-thumb .price { font-size: 16px; }
.prs-card .pt-hover-desc { display: none; }
.prs-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--surface); color: var(--accent); cursor: pointer; font-size: 16px;
    display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.prs-arrow:hover { background: var(--accent-light); }
.prs-arrow.disabled { display: none; }
.prs-prev { left: 4px; }
.prs-next { right: 4px; }
/* PC: the tabs become a vertical column on the left (divider lines between them), the slider fills the right */
@media (min-width: 992px) {
    .product-related-section { display: flex; align-items: stretch; }
    .prs-head.prs-head-tabs {
        flex: 0 0 230px; flex-direction: column; align-items: stretch; justify-content: flex-start;
        gap: 0; padding: 14px; overflow: visible;
    }
    .prs-head-tabs .prs-tab:first-child, .prs-head-tabs .prs-tab:last-child { margin: 0; }
    .prs-head-tabs .prs-tab { width: 100%; justify-content: flex-start; border-radius: 14px; padding: 11px 14px; position: relative; }
    .prs-head-tabs .prs-tab + .prs-tab { margin-top: 17px; }
    .prs-head-tabs .prs-tab + .prs-tab::before {
        content: ""; position: absolute; left: 6px; right: 6px; top: -10px; height: 1px;
        background: rgba(255,255,255,0.3); pointer-events: none;
    }
    .prs-head-tabs .prs-tab span { flex: 1 1 auto; text-align: left; }
    .product-related-section .prs-slider { flex: 1 1 0; min-width: 0; align-self: center; }
}

/* "Відгуки покупців": same card/header as the recommendations, brand-card style reviews */
.prv-count {
    display: inline-block; min-width: 24px; padding: 0 8px; border-radius: 50px;
    background: #fff; color: var(--accent); font-size: 13px; line-height: 24px; text-align: center;
}
.prv-track {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; padding: 2px; overscroll-behavior-x: contain;
}
.prv-track::-webkit-scrollbar { display: none; }
.prv-card {
    flex: 0 0 300px; scroll-snap-align: start;
    display: flex; align-items: flex-start; gap: 12px; padding: 14px;
    border: 1.5px solid var(--accent); border-radius: 16px; background: var(--surface);
    transition: box-shadow .2s ease, transform .2s ease;
}
.prv-card:hover { box-shadow: 0 10px 24px -12px rgba(0,92,190,0.45); }
.prv-avatar {
    flex: 0 0 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff;
    font-size: 19px; font-weight: 800;
}
.prv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.prv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.prv-name { font-size: 14px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prv-date { flex-shrink: 0; font-size: 11.5px; color: var(--text-secondary); }
.prv-text {
    margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-secondary);
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.prv-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 22px 18px; }
.prv-link { font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; }
.prv-link:hover { text-decoration: underline; }
.prv-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 50px;
    background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none;
    transition: background-color .2s ease, transform .2s ease;
}
.prv-btn:hover, .prv-btn:focus { background: var(--accent-dark); color: #fff; text-decoration: none; }
.prv-btn:active { transform: scale(.97); }
.prv-empty { display: flex; align-items: center; gap: 14px; padding: 20px 22px; flex-wrap: wrap; }
.prv-empty-icon {
    flex: 0 0 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--accent-light); color: var(--accent); font-size: 24px;
}
.prv-empty-text { flex: 1 1 220px; display: flex; flex-direction: column; gap: 3px; }
.prv-empty-text b { font-size: 15px; color: var(--text); }
.prv-empty-text span { font-size: 13px; color: var(--text-secondary); }

/* ===== Reviews tab: header + vertically scrolling list of review cards ===== */
.rvp { border: 1.5px solid var(--border); border-radius: 24px; background: var(--surface); overflow: hidden; }
.rvp-head {
    display: flex; align-items: center; gap: 12px; padding: 14px 18px;
    background: linear-gradient(120deg, var(--accent), var(--accent-dark)); color: #fff;
}
.rvp-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rvp-title b { font-size: 17px; }
.rvp-sub { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,0.85); }
.rvp-sub .rpill { background: rgba(255,255,255,0.3); }
.rvp-sub .rpill.on { background: #fff; }
.rvp-head .rvp-write { background: #fff; color: var(--accent); }
.rvp-head .rvp-write:hover, .rvp-head .rvp-write:focus { background: var(--accent-light); color: var(--accent-dark); }
.rvp-body { max-height: 560px; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px; scrollbar-width: thin; }
.rvl-list { display: flex; flex-direction: column; gap: 10px; }
.rvl-card { flex: none; scroll-snap-align: none; }
.rvl-card .prv-text { display: block; -webkit-line-clamp: unset; overflow: visible; }
.rvl-pages { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.rvl-pages .pagination { margin: 0; }
.rvl-results { font-size: 12px; color: var(--text-secondary); }
.rvl-empty { display: flex; align-items: center; gap: 14px; padding: 8px 2px; }

/* "Написати відгук" modal */
body.rv-lock { overflow: hidden; }
.rv-modal { position: fixed; inset: 0; z-index: 10060; display: flex; align-items: center; justify-content: center; padding: 20px; }
.rv-modal[hidden] { display: none; }
.rv-modal-backdrop { position: absolute; inset: 0; background: rgba(10,20,40,0.55); opacity: 0; transition: opacity .2s ease; }
.rv-modal-dialog {
    position: relative; width: 100%; max-width: 520px; max-height: 100%; overflow-y: auto;
    background: var(--surface); border-radius: 22px; box-shadow: 0 24px 60px -12px rgba(0,30,80,0.45);
    opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .2s ease, transform .25s cubic-bezier(.22,1,.36,1);
}
.rv-modal.open .rv-modal-backdrop { opacity: 1; }
.rv-modal.open .rv-modal-dialog { opacity: 1; transform: none; }
.rv-modal-head {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px 14px 18px;
    background: linear-gradient(120deg, var(--accent), var(--accent-dark)); color: #fff;
}
.rv-modal-head b { flex: 1; font-size: 16px; }
.rv-modal-close {
    width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,0.18); color: #fff; font-size: 15px;
}
.rv-modal-close:hover { background: rgba(255,255,255,0.32); }
.rv-modal-body { padding: 16px 18px 18px; }
.rv-modal-product {
    margin-bottom: 12px; padding: 0 12px; border: 8px solid var(--accent-light); border-left-width: 0; border-right-width: 0;   /* border, not padding: a clamped 3rd line would peek through bottom padding */
    border-radius: 12px; background: var(--accent-light);
    font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rv-modal-body .form-group { margin-left: 0; margin-right: 0; }
.rv-modal-body .form-group > [class*="col-"] { padding: 0; }
.rv-modal-body .form-control { border-radius: 12px; }
.rv-modal-body .rpill-input { margin-left: 0; margin-top: 4px; display: flex; }
.rv-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.rv-cancel {
    padding: 10px 18px; border-radius: 50px; border: 1.5px solid var(--border); background: var(--surface);
    color: var(--text-secondary); font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.rv-cancel:hover { border-color: var(--accent); color: var(--accent); }
.rv-modal-actions .prv-btn { border: none; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .rv-modal-backdrop, .rv-modal-dialog { transition: none; } }

.product-tags { margin-top: 20px; font-size: 13px; color: var(--text-secondary); clear: both; }
.product-tags a { color: var(--accent); text-decoration: none; }
.product-tags a:hover { text-decoration: underline; }

/* Reviews section (moved next to Related products) */
.product-reviews-section {
    margin-top: 24px; clear: both;
    border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px;
}
.product-reviews-section h3 {
    font-size: 18px; font-weight: 700; margin: 0 0 14px;
}
.review-slider { position: relative; margin-bottom: 16px; }
.review-slider .review-slider-track {
    display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none; padding: 4px 2px;
}
.review-slider .review-slider-track::-webkit-scrollbar { display: none; }
.review-slider-prev { left: -18px; }
.review-slider-next { right: -18px; }
.review-item {
    flex: 0 0 320px; width: 320px;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface); padding: 16px 18px;
}
.review-item-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px;
}
.review-item-author { font-weight: 600; color: var(--text); font-size: 14px; }
.review-item-author i { color: var(--accent); margin-right: 4px; }
.review-item-date { font-size: 12px; color: var(--text-light); }
.review-item-rating { margin-bottom: 8px; }
.review-item-rating .rpill { width: 12px; height: 5px; }
.review-item-text {
    margin: 0; font-size: 14px; color: var(--text-secondary); line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.review-empty {
    color: var(--text-secondary); background: var(--surface); border: 1px dashed var(--border);
    border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 16px;
}
.review-form-wrap { padding: 0; }
.review-form-wrap .form-group { margin-bottom: 16px; }
.review-form-wrap .control-label { font-weight: 600; font-size: 13px; color: var(--text); margin-bottom: 6px; display: block; }
.review-form-wrap .form-control {
    border: 1.5px solid var(--border); border-radius: var(--radius); box-shadow: none;
}
.review-form-wrap .form-control:focus { border-color: var(--accent); box-shadow: none; }
.review-form-wrap .help-block { font-size: 12px; color: var(--text-light); margin-top: 4px; }
.review-rating-picker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-secondary); }
.review-rating-picker input { margin: 0 2px; }
.review-form-wrap .product-cart-btn { padding: 10px 28px; }

/* ===== Product Toolbar ===== */
.product-toolbar {
    display: flex; align-items: center; gap: 14px;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    padding: 12px 20px; color: #fff;
    position: sticky; top: 8px; z-index: 1000;
    /* gap from the main header; centred and capped at the content width (1240px) on big screens */
    width: calc(100% - 40px); max-width: 1240px; margin: 16px auto 0; box-sizing: border-box;
    border-radius: var(--radius-lg, 10px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.ptb-back-btn {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.2); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 22px; transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
}
.ptb-back-btn:hover { background: rgba(255,255,255,0.35); }
.ptb-back-btn:active { transform: scale(0.88); }
.ptb-title { flex: 1; min-width: 0; display: flex; align-items: center; }
/* Long product names: up to two lines, then "…" (full name in the tooltip) */
.ptb-name {
    font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere; max-width: 100%; text-align: left;
}
.ptb-code {
    font-size: 12px; color: rgba(255,255,255,0.7); font-weight: 500;
}

/* ===== Catalog Section (homepage) ===== */
.catalog-section {
    width: 100%; margin: 0; padding: 24px 20px;
}
.catalog-section-toolbar {
    display: flex; align-items: center; gap: 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    padding: 14px 18px; margin-bottom: 16px;
}
.catalog-section-icon {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px;
}
.catalog-section-title { flex: 1; min-width: 0; }
.catalog-section-title h3 {
    font-size: 18px; font-weight: 700; margin: 0 0 2px; color: var(--text);
}
.catalog-section-meta {
    display: flex; gap: 14px; font-size: 12px; color: var(--text-secondary);
}
.cs-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.cs-meta-item i { font-size: 11px; color: var(--accent); }
.catalog-section-switcher {
    display: flex; gap: 4px; flex-shrink: 0;
    background: var(--bg); border: 1px solid var(--border); border-radius: 50px; padding: 3px;
}
.cs-view-btn {
    width: 34px; height: 34px; border: none; border-radius: 50%;
    background: transparent; color: var(--text-secondary); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; transition: var(--transition);
}
.cs-view-btn:hover { color: var(--accent); background: var(--accent-light); }
.cs-view-btn.active { background: var(--accent); color: #fff; }

.catalog-section-body {
    display: flex; gap: 16px; align-items: flex-start;
}
.catalog-section-left {
    flex: 0 0 180px; flex-shrink: 0;
    position: relative;
    transition: flex-basis 0.3s ease;
}
.catalog-section-right {
    flex: 1; min-width: 0;
}
.catalog-section-filters {
    flex: 0 0 220px; width: 220px; flex-shrink: 0;
    position: relative;
    transition: flex-basis 0.3s ease;
}
/* Collapsed sidebar shrinks to a thin strip that only holds its toggle arrow */
.catalog-section-left.collapsed,
.catalog-section-filters.collapsed { flex-basis: 24px; width: 24px; align-self: stretch; min-height: 540px; }
.catalog-section-left.collapsed .cs-cat-list,
.catalog-section-filters.collapsed .cs-filters-panel { display: none; }

/* Sidebar toggle buttons — stick out vertically centered from the inner edge */
.cs-sidebar-toggle {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 20; width: 24px; height: 48px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text-secondary); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
    box-shadow: var(--shadow-sm); transition: var(--transition);
    padding: 0; line-height: 1;
}
.cs-sidebar-toggle:hover { color: var(--accent); background: var(--accent-light); }
.cs-toggle-left { right: -12px; border-radius: 0 8px 8px 0; border-left: none; }
.cs-toggle-right { left: -12px; border-radius: 8px 0 0 8px; border-right: none; }
/* When collapsed, the arrow fills the strip and points the other way */
.catalog-section-left.collapsed .cs-sidebar-toggle,
.catalog-section-filters.collapsed .cs-sidebar-toggle {
    left: 0; right: auto; border: 1px solid var(--border); border-radius: 8px;
    color: var(--accent);
}
.catalog-section-left.collapsed .cs-toggle-left i,
.catalog-section-filters.collapsed .cs-toggle-right i { transform: rotate(180deg); }
.cs-filters-panel {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    padding: 16px; position: sticky; top: 12px;
}
.cs-filters-title {
    font-size: 14px; font-weight: 700; color: var(--text);
    margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.cs-filters-title i { color: var(--accent); }
.cs-filter-group { margin-bottom: 14px; }
.cs-filter-label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.cs-price-inputs { display: flex; align-items: center; gap: 6px; }
.cs-price-inputs input { width: 0; flex: 1; text-align: center; }
.cs-price-sep { color: var(--text-secondary); flex-shrink: 0; }
.cs-filter-apply, .cs-filter-reset { width: 100%; margin-bottom: 8px; }
.cs-filter-count { font-size: 12px; color: var(--text-secondary); text-align: center; min-height: 16px; }
.cs-filter-divider { height: 1px; background: var(--border); margin: 14px 0; }
.cs-filter-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.cs-filter-checkbox input { margin: 0; }

/* Accordion categories */
.cs-cat-list {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    height: 540px; overflow-y: auto; overflow-x: hidden;
}
.cs-cat-item { border-bottom: 1px solid var(--border); }
.cs-cat-item:last-child { border-bottom: none; }
.cs-cat-btn {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 9px 12px; background: transparent; border: none; cursor: pointer;
    text-align: left; color: var(--text); font-size: 13px; font-weight: 600;
    transition: var(--transition);
}
.cs-cat-btn:hover { background: var(--accent-light); color: var(--accent); }
.cs-cat-icon { font-size: 15px; color: var(--accent); flex-shrink: 0; }
.cs-cat-name { flex: 1; min-width: 0; }
.cs-cat-caret { font-size: 14px; color: var(--text-secondary); transition: transform 0.25s ease; }
.cs-cat-item.open .cs-cat-btn { background: var(--accent-light); color: var(--accent); }
.cs-cat-item.open .cs-cat-caret { transform: rotate(180deg); }
.cs-all-link { text-decoration: none; }
.cs-all-link:hover { text-decoration: none; }
.cs-all-link.active { background: var(--accent-light); color: var(--accent); }
.cs-all-link .cs-subcat-count { background: var(--border); color: var(--text-secondary); }
.cs-all-link.active .cs-subcat-count { background: var(--accent); color: #fff; }

.cs-subcat-list {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
    background: var(--bg);
}
.cs-cat-item.open .cs-subcat-list { max-height: 500px; }
.cs-subcat-link {
    display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 30px;
    text-decoration: none; color: var(--text-secondary); font-size: 12.5px;
    transition: var(--transition); border-left: 2px solid transparent;
}
.cs-subcat-link:hover { color: var(--accent); background: var(--accent-light); border-left-color: var(--accent); }
.cs-subcat-link.active { color: var(--accent); background: var(--accent-light); border-left-color: var(--accent); font-weight: 600; }
.cs-subcat-link i { font-size: 10px; opacity: 0.5; }
.cs-subcat-link span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-subcat-count {
    font-size: 11px; font-weight: 600; background: var(--border); color: var(--text-secondary);
    padding: 1px 7px; border-radius: 50px; min-width: 20px; text-align: center; flex-shrink: 0;
}
.cs-subcat-link.active .cs-subcat-count { background: var(--accent); color: #fff; }

/* Product grid: the section's inner scroll box — capped at the sidebar's height (540px) so
   the cards never grow past the section, and they scroll inside; min() keeps a column from
   exceeding a narrow center on medium windows (no horizontal blow-out either) */
.cs-products-grid {
    display: grid; gap: 14px; align-content: start;
    grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
    grid-auto-rows: max-content;
    max-height: 540px; overflow-y: auto; padding-right: 4px;
}
.cs-products-grid .product-thumb.cs-more-hidden { display: none; }
.cs-more-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 16px auto 0; padding: 11px 26px; border: 1px solid var(--accent); border-radius: 50px;
    background: var(--surface); color: var(--accent); font-size: 14px; font-weight: 700; cursor: pointer;
    transition: var(--transition);
}
.cs-more-btn:hover { background: var(--accent); color: #fff; }
.cs-more-btn small { font-weight: 500; opacity: .8; }
.cs-cat-list { position: sticky; top: 12px; }
.cs-sidebar-toggle { top: 270px; }
.cs-products-grid.cs-view-tile {
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}
.cs-products-grid.cs-view-list {
    grid-template-columns: 1fr; gap: 10px;
}
.cs-products-grid .product-thumb { margin-bottom: 0; }
/* PC: no inner scroll boxes — the grid flows with the page ("Показати ще" loads more),
   the category column keeps its width (long sub-category names ellipsize instead of widening it) */
@media (min-width: 992px) {
    .catalog-section-left { flex: 0 0 240px; min-width: 0; }
    .catalog-section-left.collapsed { min-height: 0; }
    .cs-cat-list { height: auto; max-height: none; position: static; }
    .cs-filters-panel { top: 90px; }
    .cs-products-grid { max-height: none; overflow: visible; padding-right: 0; gap: 16px; }
    .cs-sidebar-toggle { top: 40px; transform: none; }
    /* every section is open now: "open" no longer paints the row, the chosen one does */
    .cs-cat-item.open .cs-cat-btn { background: transparent; color: var(--text); }
    .cs-cat-item .cs-cat-btn:hover { background: var(--accent-light); color: var(--accent); }
    .cs-cat-item .cs-cat-btn.is-sel { background: var(--accent-light); color: var(--accent); }
    .cs-cat-item .cs-cat-btn.is-sel .cs-subcat-count { background: var(--accent); color: #fff; }
    .cs-cat-btn { padding: 11px 12px; }
    .cs-subcat-link { padding: 8px 12px 8px 30px; }
    .cs-subcat-link.is-l3 { padding-left: 46px; font-size: 12px; }
    .cs-cat-item.open .cs-subcat-list { max-height: 1200px; }
    .catalog-section-left.collapsed .cs-sale { display: none; }
}

/* ===== Home catalog (PC): sale slider under the categories ===== */
.cs-sale { display: none; }
@media (min-width: 992px) {
    .cs-sale {
        display: block; margin-top: 14px; position: sticky; top: 90px; overflow: hidden;
        background: var(--surface); border: 1.5px solid var(--accent); border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
    }
    .cs-sale-head {
        display: flex; align-items: center; gap: 10px; padding: 10px 12px;
        background: linear-gradient(120deg, var(--accent), var(--accent-dark)); color: #fff; font-size: 14px;
    }
    .cs-sale-icon {
        width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px;
        display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.2);
    }
    .cs-sale-head b { flex: 1; }
    .cs-sale-all {
        padding: 3px 10px; border-radius: 50px; background: #fff; color: var(--accent);
        font-size: 12px; font-weight: 700; text-decoration: none;
    }
    .cs-sale-all:hover { text-decoration: none; background: var(--accent-light); }
    .cs-sale-body { position: relative; }
    .cs-sale-viewport { height: 330px; overflow: hidden; }
    .cs-sale-track { height: 100%; transition: transform .55s cubic-bezier(.22,1,.36,1); }
    .cs-sale-card {
        height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 28px 14px 30px;
        text-decoration: none; color: var(--text); box-sizing: border-box;
    }
    .cs-sale-card:hover { text-decoration: none; color: var(--text); }
    .cs-sale-img {
        position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center;
        background: var(--bg); border-radius: 14px; padding: 10px;
    }
    .cs-sale-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
    .cs-sale-pct {
        position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 50px;
        background: var(--danger); color: #fff; font-size: 12px; font-weight: 800;
    }
    .cs-sale-name {
        font-size: 13px; font-weight: 600; line-height: 1.3;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .cs-sale-card:hover .cs-sale-name { color: var(--accent); }
    .cs-sale-name, .cs-sale-price, .cs-sale-timer { flex-shrink: 0; }
    .cs-sale-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
    .cs-sale-price b { font-size: 17px; color: var(--danger); }
    .cs-sale-price s { font-size: 12px; color: var(--text-light); }
    .cs-sale-timer {
        display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px;
        border-radius: 50px; background: rgba(220, 53, 69, 0.1); color: var(--danger);
        font-size: 12.5px; font-weight: 700;
    }
    .cs-sale-timer em { font-style: normal; font-variant-numeric: tabular-nums; }
    .cs-sale-timer.is-static { background: var(--accent-light); color: var(--accent); }
    .cs-sale-nav {
        position: absolute; left: 50%; z-index: 2; width: 44px; height: 22px; margin-left: -22px; padding: 0;
        border: 1px solid var(--border); background: var(--surface); color: var(--accent);
        font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
        transition: var(--transition);
    }
    .cs-sale-nav:hover:not(:disabled) { background: var(--accent); color: #fff; border-color: var(--accent); }
    .cs-sale-nav:disabled { opacity: .35; cursor: default; }
    .cs-sale-nav.is-up { top: 0; border-top: none; border-radius: 0 0 12px 12px; }
    .cs-sale-nav.is-down { bottom: 0; border-bottom: none; border-radius: 12px 12px 0 0; }
}

/* Placeholder */
.cs-products-placeholder {
    grid-column: 1 / -1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; min-height: 300px;
    color: var(--text-light); gap: 12px;
}
.cs-products-placeholder i { font-size: 48px; opacity: 0.4; }
.cs-products-placeholder p { font-size: 15px; margin: 0; }

/* Top-category chips below the popular-categories carousel */
.popcat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.popcat-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 50px;
    background: var(--surface); border: 1.5px solid var(--border);
    color: var(--text); text-decoration: none; font-size: 13px; font-weight: 600;
    transition: var(--transition);
}
.popcat-chip:hover {
    background: var(--accent); border-color: var(--accent); color: #fff;
    text-decoration: none; transform: translateY(-1px);
}
.popcat-chip-count {
    font-size: 11px; font-weight: 700; line-height: 1;
    padding: 3px 8px; border-radius: 50px;
    background: var(--accent-light); color: var(--accent);
}
.popcat-chip:hover .popcat-chip-count { background: rgba(255,255,255,0.25); color: #fff; }

/* Category groups: a 1st-level category as a heading with its
   sub-categories shown as chips underneath it. */
.popcat-groups { margin-top: 22px; display: flex; flex-direction: column; gap: 20px; }
.popcat-group-title {
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none; color: var(--text); font-size: 16px; font-weight: 700;
}
.popcat-group-title:hover { color: var(--accent); text-decoration: none; }
.popcat-group-name { position: relative; padding-left: 14px; }
.popcat-group-name::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 16px; border-radius: 3px; background: var(--accent);
}
.popcat-group-count {
    font-size: 11px; font-weight: 700; line-height: 1;
    padding: 3px 8px; border-radius: 50px; background: var(--accent-light); color: var(--accent);
}
.popcat-group .popcat-chips { margin-top: 10px; }

/* Home top navigation — pill buttons under the header */
.home-topnav { width: 100%; margin: 0; padding: 16px 20px 0; }
.home-topnav-inner {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 10px 12px;
}
.home-topnav-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 50px;
    color: var(--text); text-decoration: none; font-size: 13px; font-weight: 600;
    border: 1.5px solid var(--border); background: var(--bg, #fff); transition: var(--transition);
}
.home-topnav-pill i { color: var(--accent); }
.home-topnav-pill:hover {
    background: var(--accent); border-color: var(--accent); color: #fff;
    text-decoration: none; transform: translateY(-1px);
}
.home-topnav-pill:hover i { color: #fff; }
/* these pills moved into the left sidebar (Розділи) on the PC: the row under the header stays phone-only */
@media (min-width: 768px) {
    .home-topnav { display: none; }
}

/* ===== Product card: badges, stock status, no-photo fallback ===== */
.product-thumb .image { position: relative; }
.pc-badges {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    display: flex; flex-direction: column; gap: 4px; pointer-events: none;
}
.pc-badge {
    padding: 3px 9px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 700;
    color: #fff; text-transform: uppercase; letter-spacing: .3px;
    background: var(--pc-badge-color); box-shadow: inset 0 0 0 1.5px var(--pc-badge-color);
    transition: background .2s ease, color .2s ease;
}
.pc-badge-new   { --pc-badge-color: var(--success); }  /* Новинка */
.pc-badge-sale  { --pc-badge-color: #F57C00; }         /* Акція (звичайна) — оранжевий */
.pc-badge-super { --pc-badge-color: var(--danger); }   /* Супер акція — червоний */

/* The same badges on the product page's main photo (top-left, above the slides) */
.pps-badges { top: 12px; left: 12px; z-index: 6; align-items: flex-start; }
.pps-badges .pc-badge { font-size: 12px; padding: 4px 11px; box-shadow: inset 0 0 0 1.5px var(--pc-badge-color), 0 2px 6px rgba(0,0,0,.12); }
.pps-badges .pps-badge-pct { --pc-badge-color: #e53935; }   /* same red as the "−N%" next to the price */

/* Sale timer pill: top centre of the main photo. Running sale = red, upcoming = orange,
   finished (00:00:00) = grey. The badges move down a row so they don't collide with it. */
.pps-timer {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 7;
    display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 110px);
    padding: 6px 12px; border-radius: 50px; white-space: nowrap; pointer-events: none;
    color: #fff; font-size: 12px; line-height: 1.2;
    box-shadow: 0 4px 14px -4px rgba(0,0,0,0.35);
    transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
.pps-timer.is-end { background: linear-gradient(120deg, #ff4d4f, #e53935); }
.pps-timer.is-start { background: linear-gradient(120deg, #ffa726, #f57c00); }
.pps-timer.is-off { background: #e3e7ec; color: #7b8794; box-shadow: none; }
.pps-timer-label { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.pps-timer-val { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.pps-timer:not(.is-off) i { animation: ppsTick 1s steps(2, jump-none) infinite; }
@keyframes ppsTick { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .pps-timer i { animation: none !important; } }
.pps-slider.has-timer .pps-badges { top: 50px; }

/* Sale timer on product cards: a strip across the top of the photo (a centred pill
   would collide with the badges and the heart/compare buttons on narrow cards).
   Same colours as the product page: running = red, upcoming = orange, 00:00:00 = grey. */
.pc-timer {
    position: absolute; top: 0; left: 0; right: 0; z-index: 4;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    height: 26px; padding: 0 8px; white-space: nowrap; overflow: hidden; pointer-events: none;
    color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1;
    transition: background .3s ease, color .3s ease;
}
.pc-timer.is-end { background: linear-gradient(120deg, #ff4d4f, #e53935); }
.pc-timer.is-start { background: linear-gradient(120deg, #ffa726, #f57c00); }
.pc-timer.is-off { background: #e3e7ec; color: #7b8794; }
.pc-timer-label { overflow: hidden; text-overflow: ellipsis; }
.pc-timer-val { flex-shrink: 0; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pc-timer:not(.is-off) i { animation: ppsTick 1s steps(2, jump-none) infinite; }
.product-thumb .image.has-timer .pc-badges,
.product-thumb .image.has-timer .pt-actions { top: 34px; }

/* Hover the card → badges switch to their outline style */
.product-thumb:hover .pc-badge { background: var(--surface); color: var(--pc-badge-color); }
/* …and the card's hover outline takes the colour of its badge (sale beats "new") */
.product-thumb:has(.pc-badge-new):hover { border-color: var(--success) !important; }
.product-thumb:has(.pc-badge-sale):hover { border-color: #F57C00 !important; }
.product-thumb:has(.pc-badge-super):hover { border-color: var(--danger) !important; }

.pc-stock {
    display: inline-block; padding: 2px 9px; border-radius: 20px;
    font-size: 11px; font-weight: 600; margin: 4px 0 6px;
}
.pc-stock-in { background: rgba(76,175,80,0.12); color: #2e7d32; }
.pc-stock-order { background: rgba(255,152,0,0.14); color: #b06a00; }
.pc-stock-out { background: rgba(255,107,0,0.12); color: #E55100; }

/* Out-of-stock products stay visible but read as unavailable at a glance. */
.product-layout.pc-out-of-stock .product-thumb,
.product-thumb.pc-out-of-stock { filter: grayscale(0.9); opacity: .6; }
.product-layout.pc-out-of-stock .product-thumb:hover,
.product-thumb.pc-out-of-stock:hover { opacity: .8; }

/* Product without a photo: a quiet "Немає фото" placeholder. The name stays in the
   markup (font-size 0) for screen readers — shown as text it overflowed under the
   card's ♥ / ⇄ / "Обрати" buttons. */
.pc-noimage {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 150px; height: 100%; padding: 12px; background: var(--bg);
    border-radius: var(--radius); font-size: 0; line-height: 1; text-align: center;
}
.pc-noimage::before { content: '\f03e'; font-family: FontAwesome; font-size: 40px; color: var(--border-dark); }
.pc-noimage::after { content: 'Немає фото'; font-size: 12px; font-weight: 600; color: var(--text-light); }

/* ============================================================
   MOTION POLISH — tasteful storefront animations (v82)
   All additive; ends at the visible state; respects reduced-motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

    @keyframes sf-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    @keyframes sf-fade-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes sf-pop { 0% { transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
    @keyframes sf-shine { to { transform: translateX(160%); } }

    /* Product cards: gentle staggered entrance */
    .product-thumb { animation: sf-fade-up .3s cubic-bezier(.2,.8,.2,1) both; }
    .product-layout:nth-child(1) .product-thumb { animation-delay: .02s; }
    .product-layout:nth-child(2) .product-thumb { animation-delay: .07s; }
    .product-layout:nth-child(3) .product-thumb { animation-delay: .12s; }
    .product-layout:nth-child(4) .product-thumb { animation-delay: .17s; }
    .product-layout:nth-child(5) .product-thumb { animation-delay: .22s; }
    .product-layout:nth-child(6) .product-thumb { animation-delay: .27s; }
    .product-layout:nth-child(7) .product-thumb { animation-delay: .32s; }
    .product-layout:nth-child(8) .product-thumb { animation-delay: .37s; }
    /* Only the first screenful animates in — with 24+ cards animating at once
       (home grid, category pages) the entrance itself was what stuttered.
       Home grid cards are direct children of the grid, so stagger those too. */
    .product-layout:nth-child(n+13) .product-thumb,
    .product-grid > .product-thumb:nth-child(n+13) { animation: none; }
    .product-grid > .product-thumb:nth-child(2) { animation-delay: .03s; }
    .product-grid > .product-thumb:nth-child(3) { animation-delay: .06s; }
    .product-grid > .product-thumb:nth-child(4) { animation-delay: .09s; }
    .product-grid > .product-thumb:nth-child(n+5) { animation-delay: .12s; }

    /* Image zoom on card hover */
    .product-thumb .image img { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
    @media (hover: hover) { .product-thumb:hover .image img { transform: scale(1.04); } }

    /* Price gets a tiny pop when its card is hovered */
    @media (hover: hover) {
        .product-thumb:hover .price-new,
        .product-thumb:hover .price { animation: sf-pop .4s ease; }
    }

    /* Add-to-cart / buttons: sheen sweep + press feedback */
    .product-thumb .button-group button,
    .btn-primary { position: relative; overflow: hidden; }
    .product-thumb .button-group button::after,
    .btn-primary::after {
        content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
        background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
        transform: translateX(-160%); pointer-events: none;
    }
    @media (hover: hover) {
        .product-thumb .button-group button:hover::after,
        .btn-primary:hover::after { animation: sf-shine .6s ease; }
    }
    .btn:active { transform: scale(.97); }

    /* Category / nav items: smooth slide on hover */
    #menu .nav > li > a { transition: color .22s cubic-bezier(.4,0,.2,1), background-color .22s cubic-bezier(.4,0,.2,1), border-color .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1); }
    .list-group a { transition: color .2s cubic-bezier(.4,0,.2,1), background-color .2s cubic-bezier(.4,0,.2,1), border-color .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1), transform .2s cubic-bezier(.4,0,.2,1); }
    .list-group a:hover { transform: translateX(6px); }

    /* Footer links: nudge on hover */
    .footer-icon-btn { transition: color .22s cubic-bezier(.4,0,.2,1), background-color .22s cubic-bezier(.4,0,.2,1), border-color .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1); }
    .footer-icon-btn:hover { transform: translateX(4px); }
    .footer-social-btn { transition: color .25s cubic-bezier(.4,0,.2,1), background-color .25s cubic-bezier(.4,0,.2,1), border-color .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1); }
    .footer-social-btn:hover { transform: translateY(-3px) scale(1.08); }

    /* Section reveal for main modules on the home page */
    #common-home .panel,
    #common-home .swiper,
    #common-home .owl-carousel { animation: sf-fade-in .3s ease both; }

    /* Header cart / search pills already transition; add a soft press */
    .cart-pill:active, .catalog-pill:active, .login-pill:active { transform: scale(.97); }
}

/* ===== Checkout Page Redesign ===== */
.checkout-page {
    width: 100%; margin: 0; padding: 0 0 32px;
}

/* Checkout navbar bar (like product-tabs-bar, inside toolbar) */
.checkout-navbar-bar {
    background: var(--bg); border-bottom: 1px solid var(--border);
    padding: 10px 20px; position: sticky; top: 64px; z-index: 999;
}
.checkout-navbar-track {
    display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none;
    max-width: 1200px; margin: 0 auto; padding: 2px;
}
.checkout-navbar-track::-webkit-scrollbar { display: none; }
.checkout-navbar-track .ptab-pill {
    cursor: pointer; border: none; font-family: inherit;
    width: auto; flex: 0 0 auto;   /* the product page's desktop rule `.ptab-pill { width: 100% }` made each step pill full-width */
}

/* Content wrapper */
.checkout-content-wrap {
    padding: 16px 12px;
    max-width: 100%; margin: 0;
}

/* Step cards */
.checkout-step-card {
    border: none; border-radius: 0; margin-bottom: 0; overflow: visible; background: transparent;
    min-width: 0;
}
.checkout-step-card .panel-heading { display: none !important; }
.checkout-step-card .panel-body { padding: 0; }

/* Login section */
.checkout-login { display: flex; flex-direction: column; gap: 20px; }
.checkout-login-section {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
}
.checkout-login-section h3 {
    font-size: 16px; font-weight: 700; margin: 0 0 10px;
    display: flex; align-items: center; gap: 8px; color: var(--text);
}
.checkout-login-section h3 i { color: var(--accent); font-size: 18px; }
.checkout-login-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; }
.checkout-login-note { font-size: 12px; color: var(--text-secondary); margin: 10px 0 14px; line-height: 1.5; }
.checkout-login-divider {
    display: flex; align-items: center; gap: 12px; color: var(--text-secondary);
    font-size: 13px; font-weight: 600;
}
.checkout-login-divider::before,
.checkout-login-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}
.checkout-forgot-link { font-size: 12px; display: inline-block; margin-top: 4px; }

/* Radio pill group */
.checkout-radio-group { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.checkout-radio-pill {
    display: flex; align-items: center; gap: 8px; padding: 10px 18px;
    border-radius: var(--radius); border: 2px solid var(--border);
    cursor: pointer; transition: var(--transition); font-weight: 600;
    font-size: 14px; color: var(--text-secondary); flex: 1; justify-content: center;
}
.checkout-radio-pill input[type="radio"] { display: none; }
.checkout-radio-pill i { font-size: 16px; }
.checkout-radio-pill:hover { border-color: var(--accent); color: var(--accent); }
.checkout-radio-pill.active {
    border-color: var(--accent); background: var(--accent-light);
    color: var(--accent);
}

/* Checkout form */
.checkout-form fieldset { border: none; padding: 0; margin: 0 0 20px; }
.checkout-form legend {
    font-size: 15px; font-weight: 700; color: var(--text);
    margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid var(--border);
    width: 100%;
}
.checkout-form .form-group { margin-bottom: 14px; }
.checkout-form .control-label {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--text); margin-bottom: 5px;
}
.checkout-form .form-control {
    border-radius: var(--radius-sm); border: 1px solid var(--border);
    padding: 10px 14px; font-size: 14px; transition: var(--transition);
}
.checkout-form .form-control:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}
.checkout-form .required .control-label::after {
    content: ' *'; color: var(--danger);
}
.checkout-page div.required .control-label::before { content: none; }   /* one asterisk, not "* Ім'я *" */

/* Step bar pieces used only on phones (desktop keeps the icon + label pills) */
.cs-n, .cs-done, .cs-link, .cs-caption, .cs-sec-head { display: none; }
.cs-dot { display: contents; }
.checkout-shipping-checkbox { margin: 8px 0 16px; }
.checkout-shipping-checkbox label { font-size: 13px; cursor: pointer; }

/* Option cards (shipping/payment methods) */
.checkout-method-desc { font-size: 14px; color: var(--text-secondary); margin-bottom: 14px; }
.checkout-method-title { font-size: 14px; margin: 12px 0 8px; color: var(--text); }
.checkout-option-card {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    border: 2px solid var(--border); border-radius: var(--radius);
    cursor: pointer; transition: var(--transition); margin-bottom: 10px;
    background: var(--surface);
}
.checkout-option-card input[type="radio"] { display: none; }
.checkout-option-card:hover { border-color: var(--accent); }
.checkout-option-card.active {
    border-color: var(--accent); background: var(--accent-light);
}
.checkout-option-icon {
    width: 42px; height: 42px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
    background: var(--border); color: var(--text-secondary); font-size: 18px;
    transition: var(--transition);
}
.checkout-option-card.active .checkout-option-icon {
    background: var(--accent); color: #fff;
}
.checkout-option-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); }
.checkout-option-price { font-size: 15px; font-weight: 700; color: var(--accent); }

/* Comments */
.checkout-comments { margin: 16px 0; }
.checkout-comments label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.checkout-comments textarea { border-radius: var(--radius-sm); }

/* Agree row */
.checkout-agree-row { margin: 14px 0; }
.checkout-agree-label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }

/* Confirm table */
.checkout-confirm-table { margin-bottom: 16px; }
.checkout-confirm-table .table { margin: 0; font-size: 13px; }
.checkout-confirm-table .table > thead > tr > td {
    font-weight: 700; background: var(--surface);
    border-bottom: 2px solid var(--border);
}
.checkout-confirm-table .table tfoot td { font-size: 14px; }

/* Buttons */
.checkout-page .btn-primary.btn-block {
    padding: 12px 20px; font-size: 15px; font-weight: 700;
    border-radius: var(--radius); border: none; width: 100%;
}
.checkout-page .btn-primary {
    background: var(--accent); color: #fff;
}
.checkout-page .btn-primary:hover {
    background: var(--accent-dark, #0056b3); color: #fff;
}
.checkout-page .buttons { margin-top: 16px; }
.checkout-page .pull-right { float: none; width: 100%; }

/* Alerts */
.checkout-page .alert { border-radius: var(--radius); font-size: 13px; margin: 12px 12px 0; }

@media (min-width: 768px) {
    .checkout-page .checkout-form .form-group {
        display: flex; align-items: flex-start; gap: 16px;
    }
    .checkout-page .checkout-form .control-label {
        width: 180px; flex-shrink: 0; padding-top: 10px; margin-bottom: 0;
    }
    .checkout-page .checkout-form .form-control { flex: 1; }
    .checkout-page .checkout-form .checkbox { margin-left: 196px; }
}

/* ===== Checkout Success Page ===== */
.checkout-success-page {
    width: 100%; min-height: calc(100vh - 56px);
    display: flex; flex-direction: column;
}
.checkout-success-page .checkout-content-wrap {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 32px 16px; max-width: 100%; margin: 0;
}
.checkout-success-card {
    text-align: center;
    padding: 48px 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    max-width: 560px; width: 100%;
}
.checkout-success-icon {
    width: 80px; height: 80px; border-radius: 50%;
    margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #43a047, #66bb6a);
    color: #fff; font-size: 40px;
    box-shadow: 0 4px 20px rgba(67, 160, 71, 0.3);
}
.checkout-success-title {
    font-size: 20px; font-weight: 700; color: var(--text);
    margin: 0 0 16px;
}
.checkout-success-message {
    font-size: 14px; color: var(--text-secondary);
    line-height: 1.7; margin-bottom: 28px;
    max-width: 480px; margin-left: auto; margin-right: auto;
}
.checkout-success-message a { color: var(--accent); text-decoration: underline; }
.checkout-success-btn {
    max-width: 320px; margin: 0 auto;
    padding: 14px 24px; font-size: 15px; font-weight: 600;
    border-radius: var(--radius); border: none;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: var(--transition); -webkit-tap-highlight-color: transparent;
}
.checkout-success-btn:hover { opacity: 0.9; color: #fff; }
.checkout-success-btn:active { transform: scale(0.98); }

/* ===== Cart Page Redesign ===== */
.cart-items-list { display: flex; flex-direction: column; gap: 12px; }
.cart-item-card {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px;
    transition: var(--transition);
}
.cart-item-card:hover { box-shadow: var(--shadow-sm); }
.cart-item-image { flex-shrink: 0; width: 72px; height: 72px; border-radius: var(--radius); overflow: hidden; }
.cart-item-image img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cart-item-name {
    font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-clamp: 2;
}
.cart-item-name:hover { color: var(--accent); }
.cart-item-options { font-size: 12px; color: var(--text-secondary); }
.cart-item-reward, .cart-item-recurring { font-size: 12px; color: var(--text-secondary); }
.cart-item-price { font-size: 14px; font-weight: 600; color: var(--accent); }
.cart-item-actions {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.cart-qty-control { display: flex; align-items: center; gap: 4px; }
.cart-qty-input { width: 48px; text-align: center; padding: 6px 4px; font-size: 14px; }
.cart-qty-btn {
    width: 34px; height: 34px; padding: 0; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.cart-item-total { font-size: 16px; font-weight: 700; color: var(--text); white-space: nowrap; }

.cart-modules { margin: 20px 0; }
.cart-modules h2 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.cart-modules p { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; }

.cart-totals-wrap {
    margin: 20px 0; display: flex; justify-content: flex-end;
}
.cart-totals-table {
    width: 100%; max-width: 340px; border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; margin: 0;
}
.cart-totals-table td { padding: 10px 16px; border: none; font-size: 14px; }
.cart-totals-table tr:last-child td { border-top: 2px solid var(--border); font-size: 16px; }

.cart-buttons {
    display: flex; justify-content: space-between; gap: 12px; margin-top: 16px;
}
.cart-btn-continue, .cart-btn-checkout {
    padding: 14px 24px; font-size: 15px; font-weight: 600; border-radius: var(--radius);
    display: inline-flex; align-items: center; gap: 8px; transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
}
.cart-btn-continue { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.cart-btn-continue:hover { border-color: var(--accent); color: var(--accent); }
.cart-btn-checkout {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    border: none; color: #fff;
}
.cart-btn-checkout:hover { opacity: 0.9; color: #fff; }
.cart-btn-checkout:active, .cart-btn-continue:active { transform: scale(0.98); }

.cart-empty-state {
    text-align: center; padding: 60px 20px; display: flex; flex-direction: column;
    align-items: center; gap: 16px;
}
.cart-empty-icon { font-size: 64px; color: var(--text-secondary); opacity: 0.4; }
.cart-empty-state h3 { font-size: 20px; font-weight: 700; color: var(--text); margin: 0; }
.cart-empty-state p { font-size: 14px; color: var(--text-secondary); margin: 0; }
.cart-empty-state .cart-btn-continue { margin-top: 8px; }

/* ===== Home categories slider (under the catalog section) =====
   One open accordion card per top category: level 2 as rows, level 3 as pills.
   Desktop shows three cards per view, phones one (mobile.css). */
.home-cat-cards { padding: 0 20px 24px; }
.hcc-track {
    display: flex; gap: 16px; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.hcc-track::-webkit-scrollbar { display: none; }
.hcc-card {
    flex: 0 0 calc((100% - 32px) / 3); min-width: 0; scroll-snap-align: start;   /* always a third of the row — never stretched */
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
}
/* fewer than 3 cards: centred in the row (auto margins, so a scrolling row still starts at the first card) */
.hcc-track > .hcc-card:first-child { margin-left: auto; }
.hcc-track > .hcc-card:last-child { margin-right: auto; }
.hcc-card-head {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 14px;
    border: none; background: var(--surface); text-align: left; cursor: pointer;
}
.hcc-icon {
    flex: 0 0 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff; font-size: 18px;
}
.hcc-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 15px; font-weight: 800; color: var(--text); font-style: normal; }
.hcc-name small { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.hcc-caret { color: var(--text-secondary); font-size: 18px; transition: transform .25s ease; }
.hcc-card.open .hcc-caret { transform: rotate(180deg); }
.hcc-body { display: none; padding: 0 14px 14px; border-top: 1px solid var(--border); }
.hcc-card.open .hcc-body { display: block; }
.hcc-group { padding: 12px 0 4px; }
.hcc-group + .hcc-group { border-top: 1px dashed var(--border); }
.hcc-l2 {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 10px;
    border-radius: 12px; background: var(--accent-light); color: var(--accent); font-size: 14px; font-weight: 700; font-style: normal;
}
.hcc-l2:hover, .hcc-l2:active { text-decoration: none; color: var(--accent-dark); }
.hcc-l2 span { flex: 1; min-width: 0; }
.hcc-l2 b, .hcc-pill b {
    font-size: 11px; padding: 1px 8px; border-radius: 50px; background: var(--accent); color: #fff; font-weight: 700;
}
.hcc-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.hcc-pill {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
    border: 1.5px solid var(--border); border-radius: 50px; background: var(--surface);
    color: var(--text); font-size: 12.5px; font-weight: 600; font-style: normal;
}
.hcc-pill b { background: var(--accent-light); color: var(--accent); }
.hcc-pill:hover, .hcc-pill:active { text-decoration: none; border-color: var(--accent); color: var(--accent); }
.hcc-all {
    display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; margin-top: 14px;
    border-radius: 50px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; font-style: normal;
}
.hcc-all:hover, .hcc-all:active { color: #fff; text-decoration: none; background: var(--accent-dark); }
.hcc-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.hcc-dots:empty { display: none; }
.hcc-dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 4px; background: var(--border-dark); transition: width .25s, background .25s; }
.hcc-dot.active { width: 18px; background: var(--accent); }

/* ===== Home brands slider (under the categories slider) =====
   Cards (slightly rounded squares): photo left; name, short description and "Дивитись" right.
   Outline by default, accent fill on hover / tap. */
.home-brands { position: relative; padding: 0 20px 28px; }
.hb-track {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; padding: 2px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.hb-track::-webkit-scrollbar { display: none; }
.hb-card {
    flex: 0 0 280px; scroll-snap-align: start;
    display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px;
    border: 1.5px solid var(--accent); border-radius: 14px; background: var(--surface);
    color: var(--text); text-decoration: none; font-style: normal;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.hb-img {
    flex: 0 0 64px; height: 64px; border-radius: 10px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg); border: 1px solid var(--border); transition: border-color .2s ease;
}
.hb-img img { width: 84%; height: 84%; object-fit: contain; }
.hb-img b { font-size: 24px; font-weight: 800; color: var(--accent); }
.hb-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hb-name { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-desc {
    font-size: 12px; line-height: 1.35; color: var(--text-secondary);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hb-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 12.5px; font-weight: 700; color: var(--accent); }
.hb-card:hover, .hb-card:focus-visible, .hb-card:active {
    background: var(--accent); color: #fff; text-decoration: none;
    box-shadow: 0 10px 24px -10px rgba(0,92,190,0.55);
}
.hb-card:hover .hb-desc, .hb-card:active .hb-desc, .hb-card:focus-visible .hb-desc { color: rgba(255,255,255,0.85); }
.hb-card:hover .hb-more, .hb-card:active .hb-more, .hb-card:focus-visible .hb-more { color: #fff; }
.hb-card:hover .hb-img, .hb-card:active .hb-img { border-color: #fff; background: #fff; }
.hb-card:active { transform: scale(.98); }

.hb-arrow {
    position: absolute; top: calc(50% - 14px); transform: translateY(-50%); z-index: 2;
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--surface); color: var(--accent); font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
    transition: opacity .2s ease, background .2s ease, color .2s ease;
}
.hb-arrow:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.hb-arrow-prev { left: 4px; }
.hb-arrow-next { right: 4px; }
.hb-arrow.hidden-arrow { opacity: 0; pointer-events: none; }

/* ===== Floating scroll buttons (up / down), bottom-right ===== */
.scroll-fab {
    position: fixed; right: 20px; bottom: 24px; z-index: 1050;
    display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.scroll-fab-btn {
    width: 46px; height: 46px; border: none; border-radius: 50%; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface); color: var(--accent); font-size: 17px; cursor: pointer;
    border: 2px solid var(--accent);   /* outline style */
    box-shadow: 0 8px 20px -10px rgba(0,60,140,0.45);
    opacity: 0; visibility: hidden; transform: scale(.7) translateY(10px);
    transition: opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1), visibility .25s, background .2s;
    -webkit-tap-highlight-color: transparent;
}
.scroll-fab-btn.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.scroll-fab-btn:hover, .scroll-fab-btn:active { background: var(--accent); color: #fff; }
.scroll-fab-btn:active { transform: scale(.92); }

/* ===== "Купити" fly-to-cart: the photo copy and the cart button's landing bump ===== */
/* Two nested layers: the outer one moves along X, the inner one along Y with a
   different easing — together a real curved arc, still transform-only. */
.fly-to-cart {
    position: fixed; left: 0; top: 0; z-index: 10200; pointer-events: none; will-change: transform;
}
.fly-to-cart-y { display: block; will-change: transform; }
.fly-to-cart-dot {
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    width: 44px; height: 44px; border-radius: 50%; will-change: transform, opacity;
    background: var(--surface); border: 2px solid var(--accent);
}
.fly-to-cart-dot img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.fly-to-cart-dot.is-icon { width: 34px; height: 34px; background: var(--accent); border: 0; color: #fff; font-size: 15px; }
/* "+1" that pops out of the cart button when the item lands */
.cart-plus {
    position: fixed; z-index: 10201; pointer-events: none;
    padding: 2px 7px; border-radius: 20px; background: #16a34a; color: #fff;
    font: 700 12px/1.4 inherit;
}
@keyframes cartBump {
    0% { transform: scale(1); }
    35% { transform: scale(1.22); }
    65% { transform: scale(0.94); }
    100% { transform: scale(1); }
}
.cart-bump { animation: cartBump .45s cubic-bezier(.22,1,.36,1); }

/* ===== Notifications: bell dropdown + permission prompt ===== */
#notify-btn { font: inherit; }
#notify-count.is-hot { background: #ff4d4f; color: #fff; animation: ntfPop .4s ease; }
@keyframes ntfPop { 50% { transform: scale(1.3); } }
.ntf-panel {
    position: fixed; z-index: 10070; width: 360px; max-width: calc(100vw - 16px); max-height: min(560px, calc(100vh - 90px));
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
    box-shadow: 0 24px 60px -16px rgba(0,30,80,0.45);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.ntf-panel.open { opacity: 1; visibility: visible; transform: none; }
.ntf-head {
    display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 12px 16px;
    background: linear-gradient(120deg, var(--accent), var(--accent-dark)); color: #fff;
}
.ntf-head b { font-size: 15px; }
.ntf-head b i { margin-right: 6px; }
.ntf-close { width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,0.18); color: #fff; cursor: pointer; }
.ntf-toggle { padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: center; font-size: 12.5px; }
.ntf-enable, .ntf-allow {
    border: none; border-radius: 50px; padding: 9px 16px; cursor: pointer;
    background: var(--accent); color: #fff; font-size: 13px; font-weight: 700;
}
.ntf-enable:hover, .ntf-allow:hover { background: var(--accent-dark); }
.ntf-state.on { color: #1e7e44; font-weight: 700; }
.ntf-state.off { color: var(--text-secondary); }
.ntf-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.ntf-backdrop { display: none; }
.ntf-actions { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--border); flex-shrink: 0; }
.ntf-act {
    flex: 1; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: none; border-radius: 50px; cursor: pointer; font-size: 13px; font-weight: 700;
    transition: background-color .15s ease, opacity .15s ease;
}
.ntf-act.is-read { background: var(--accent-light); color: var(--accent); }
.ntf-act.is-read:hover { background: var(--accent); color: #fff; }
.ntf-act.is-clear { background: rgba(221,51,51,.1); color: #d33; }
.ntf-act.is-clear:hover { background: #d33; color: #fff; }
.ntf-act:disabled { opacity: .45; cursor: default; pointer-events: none; }
.ntf-item {
    display: flex; gap: 10px; padding: 10px; border-radius: 14px; text-decoration: none; color: var(--text);
    transition: background-color .15s ease;
}
.ntf-item:hover { background: var(--accent-light); text-decoration: none; color: var(--text); }
.ntf-item.unread { background: rgba(0,92,190,0.06); }
.ntf-thumb {
    position: relative; flex: 0 0 48px; height: 48px; border-radius: 12px; overflow: visible;
    background: var(--bg); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
}
.ntf-thumb img { width: 100%; height: 100%; object-fit: contain; border-radius: 11px; }
.ntf-thumb i {
    position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff;
    background: var(--accent); border: 2px solid var(--surface);
}
.ntf-item.is-sale .ntf-thumb i { background: #e53935; }
.ntf-item.is-soon .ntf-thumb i { background: #f57c00; }
.ntf-item.is-new .ntf-thumb i { background: #2e9e57; }
.ntf-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ntf-body b { font-size: 13px; }
.ntf-body span { font-size: 12.5px; line-height: 1.35; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ntf-body small { font-size: 11px; color: var(--text-secondary); opacity: .8; }
.ntf-item.unread .ntf-body b::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.ntf-empty { padding: 28px 12px; text-align: center; color: var(--text-secondary); font-size: 13px; }

.ntf-ask {
    position: fixed; z-index: 10065; left: 50%; bottom: 20px; width: 420px; max-width: calc(100vw - 24px);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
    box-shadow: 0 24px 60px -16px rgba(0,30,80,0.45);
    opacity: 0; transform: translate(-50%, 20px); transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.ntf-ask.open { opacity: 1; transform: translate(-50%, 0); }
.ntf-ask-icon {
    flex: 0 0 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--accent-light); color: var(--accent); font-size: 18px;
}
.ntf-ask-text { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; }
.ntf-ask-text b { font-size: 14px; color: var(--text); }
.ntf-ask-text span { font-size: 12.5px; color: var(--text-secondary); }
.ntf-ask-actions { display: flex; gap: 8px; margin-left: auto; }
.ntf-later {
    border: 1.5px solid var(--border); border-radius: 50px; padding: 8px 14px; background: var(--surface);
    color: var(--text-secondary); font-size: 13px; font-weight: 700; cursor: pointer;
}
@media (max-width: 767px) {
    .ntf-panel { left: 8px; right: 8px !important; width: auto; max-width: none; max-height: calc(100vh - var(--m-tb, 66px) - 90px); }
    .ntf-ask { bottom: calc(var(--m-tb, 66px) + 10px); }
    .ntf-ask-actions { width: 100%; }
    .ntf-ask-actions button { flex: 1; }
}

/* ===== Category: results in toolbar + round pagination ===== */
.special-toolbar-results {
    margin-left: auto; padding: 6px 14px; font-size: 13px; line-height: 1.3;
    background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50px; color: #fff;
}
.cat-pager { margin: 24px 0 8px; }
.cat-pager .pagination {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0;
}
.cat-pager .pagination > li { display: block; flex-shrink: 0; }
.cat-pager .pagination > li > a, .cat-pager .pagination > li > span,
.cat-pager .pagination > .active > a, .cat-pager .pagination > .active > span {
    float: none; display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; min-width: 40px; padding: 0; margin: 0;
    border-radius: 50% !important; font-style: normal; font-weight: 600; font-size: 14px;
}
.cat-pager .pagination > .active > span { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
@media (max-width: 767px) {
    .special-toolbar-results { margin-left: 0; width: 100%; text-align: center; }
    .cat-pager .pagination { gap: 4px; }
    .cat-pager .pagination > li > a, .cat-pager .pagination > li > span,
    .cat-pager .pagination > .active > a, .cat-pager .pagination > .active > span {
        width: 34px; height: 34px; min-width: 34px; font-size: 13px;
    }
}


/* Touch screens: every tap answers at once — the control sinks under the finger (80ms, transform only) */
@media (hover: none) {
    .btn:active, button:active, .pt-buy-btn:active, .ptab-pill:active, .cs-mnav-pill:active, .m-tab:active,
    .hcc-card-head:active, .cart-pill:active, .login-pill:active, .pvar-pill:active, .prs-tab:active, .dash-tab:active {
        transform: scale(.96); transition: transform .08s ease-out !important;
    }
}

/* ===== Product grid: fixed-size cards =====
   Category / search / brand pages: the columns come from the space available, not from
   bootstrap's col-md-3 — with the filter sidebar on a laptop that squeezed 4 cards
   into 98px each. Every card is at least 190px wide and all cards in a row are equal. */
@media (min-width: 768px) {
    .row:has(> .product-layout.product-grid) {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 16px; margin-left: 0; margin-right: 0;
    }
    .row:has(> .product-layout.product-grid)::before,
    .row:has(> .product-layout.product-grid)::after { display: none; }   /* bootstrap clearfix would become grid cells */
    .row > .product-layout.product-grid { width: auto; float: none; padding: 0; min-width: 0; }
    .row > .product-layout.product-grid > .product-thumb { margin-bottom: 0; }
}
.product-thumb .caption h4 { min-width: 0; }
.product-thumb .caption h4 a { overflow-wrap: anywhere; }

/* ===== Loading like Rozetka: a grey placeholder until the photo is there =====
   common.js marks the photo box .pt-img-wait while its image loads; the photo then
   fades in over the placeholder instead of popping in (or leaving an empty hole). */
.product-thumb .image.pt-img-wait { background: #F1F4F8; }
.product-thumb .image.pt-img-wait img { opacity: 0; }
.product-thumb .image img { transition: opacity .2s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: no-preference) {
    .product-thumb .image.pt-img-wait::after {
        content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
        background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%);
        transform: translateX(-100%); animation: ptSkel 1.1s ease-in-out infinite;
    }
}
@keyframes ptSkel { to { transform: translateX(100%); } }

/* Light footer: the tab icons follow the accent too */
.footer-tab-btn i { color: var(--accent); }
.footer-tab-btn.active i { color: #fff; }

/* Footer "Методи оплати / доставки": pills with an icon and the name, not bare icons */
.footer-pay-icons { gap: 8px; }
.footer-pay-icon {
    width: auto; height: 38px; padding: 0 14px 0 5px; gap: 8px;
    border-radius: 50px; font-size: 13px; font-weight: 600; white-space: nowrap;
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
.footer-pay-icon i {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-light); color: var(--accent); font-size: 14px;
}
.footer-pay-icon:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }

/* ===== Typography: one calm system =====
   Titles bold and upright, names medium, secondary text muted — nothing italic or all-caps
   except the tiny badges and group labels, where caps work as a marker. */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.product-thumb h4, .product-thumb.pt-enhanced h4 { font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0; }
.product-thumb.pt-enhanced h4 { min-height: 2.8em; }
.product-thumb h4 a { color: var(--text); }
.product-thumb .price, .product-thumb .price-new { font-weight: 700; letter-spacing: -.2px; font-variant-numeric: tabular-nums; }
.product-thumb .price-old { font-weight: 400; }
.btn, .pt-buy-btn, .login-pill, .cart-pill, .catalog-pill { letter-spacing: 0 !important; text-transform: none; }
footer h5 { font-size: 15px; letter-spacing: 0; }
.footer-pay-block h5 { justify-content: center; }

/* ===== Home category cards: compact =====
   First 3 subcategories only (the rest behind "Показати всі"), no level-3 pills,
   tighter rows; footer = "Показати всі" + "Всі товари" side by side. */
#home-cat-cards .hcc-card-head { padding: 10px 12px; gap: 10px; }
#home-cat-cards .hcc-icon { flex-basis: 34px; height: 34px; border-radius: 10px; font-size: 15px; }
#home-cat-cards .hcc-name { font-size: 14px; font-weight: 700; }
#home-cat-cards .hcc-name small { font-size: 11.5px; font-weight: 500; }
#home-cat-cards .hcc-body { padding: 0 12px 12px; }
#home-cat-cards .hcc-group { padding: 6px 0 0; }
#home-cat-cards .hcc-group + .hcc-group { border-top: none; }
#home-cat-cards .hcc-l2 { padding: 7px 10px; margin: 0; border-radius: 10px; font-size: 13px; font-weight: 600; gap: 8px; }
#home-cat-cards .hcc-pills { display: none; }
#home-cat-cards .hcc-card:not(.show-all) .hcc-extra { display: none; }
#home-cat-cards .hcc-foot { display: flex; gap: 8px; margin-top: 10px; }
#home-cat-cards .hcc-all { flex: 1; height: 36px; margin: 0; font-size: 13px; }
#home-cat-cards .hcc-more {
    flex: 1; height: 36px; padding: 0 10px; border: 1.5px solid var(--accent); border-radius: 50px;
    background: var(--surface); color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
#home-cat-cards .hcc-more:active { background: var(--accent-light); }

/* ===== Side cart: the product list scrolls on its own, totals + buttons stay pinned =====
   (phones and desktop; loadCartInfo() refills the same two <li>) */
.cart-sidebar .cart-sidebar-body { display: flex; flex-direction: column; overflow: hidden !important; padding: 0; }
.cart-sidebar-list { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.cart-sidebar-list > li.cart-sidebar-items {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 14px;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.cart-sidebar-list > li.cart-sidebar-items::-webkit-scrollbar { width: 4px; }
.cart-sidebar-list > li.cart-sidebar-items::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 2px; }
.cart-sidebar-list > li.cart-sidebar-foot {
    flex-shrink: 0; padding: 10px 14px 14px; border-top: 1px solid var(--border); background: var(--surface);
}
.cart-sidebar-foot .cart-totals { margin-top: 8px; padding: 8px 12px; }
.cart-sidebar-foot .cart-actions { margin-top: 10px; flex-direction: row; }
.cart-sidebar-foot .cart-btn { flex: 1; padding: 11px 10px; font-size: 13px; }
.cart-clear-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; border: none; background: none;
    color: var(--text-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.cart-clear-btn:hover { color: #dc2626; }
.cart-clear-btn.is-confirm { color: #fff; background: #dc2626; padding: 4px 12px; border-radius: 50px; }
.cart-clear-btn:disabled { opacity: .5; }

/* ===== Cart page (checkout/cart): only what the order needs ===== */
.cart-page-v2 #cart-toolbar { display: flex; align-items: center; gap: 12px; }
.cart-page-v2 #cart-toolbar .ptb-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cart-page-v2 #cart-toolbar .ptb-code { font-size: 12px; opacity: .85; }
.cart-page-v2 .cart-clear-top { color: #fff; background: rgba(255,255,255,.16); padding: 7px 12px; border-radius: 50px; }
.cart-page-v2 .cart-clear-top:hover { color: #fff; background: rgba(255,255,255,.28); }
.cart-page-v2 .cart-clear-top.is-confirm { background: #dc2626; }
.cart-page-v2 .checkout-content-wrap { max-width: 860px; margin: 0 auto; }
.cart-page-v2 .cart-items-list { display: flex; flex-direction: column; gap: 10px; }
.cart-page-v2 .cart-item-card {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px; margin: 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
}
.cart-page-v2 .cart-item-image {
    flex: 0 0 76px; width: 76px; height: 76px; border-radius: 10px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg); border: 1px solid var(--border); color: var(--text-light); font-size: 22px;
}
.cart-page-v2 .cart-item-image img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.cart-page-v2 .cart-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cart-page-v2 .cart-item-name {
    font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cart-page-v2 .cart-item-name:hover { color: var(--accent); text-decoration: none; }
.cart-page-v2 .cart-item-stock { font-size: 12px; font-weight: 600; color: #dc2626; }
.cart-page-v2 .cart-item-options small { display: block; font-size: 12px; color: var(--text-secondary); }
.cart-page-v2 .cart-item-price { font-size: 12.5px; color: var(--text-secondary); }
.cart-page-v2 .cart-item-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.cart-page-v2 .cart-item-total { font-size: 16px; font-weight: 700; color: var(--text); white-space: nowrap; }
.cart-stepper {
    display: inline-flex; align-items: center; height: 36px;
    border: 1px solid var(--border); border-radius: 50px; background: var(--surface); overflow: hidden;
}
.cart-step {
    width: 36px; height: 100%; border: none; background: none; color: var(--accent); font-size: 12px; cursor: pointer;
}
.cart-step:active { background: var(--accent-light); }
.cart-page-v2 .cart-qty-input {
    width: 40px; height: 100%; border: none; padding: 0; text-align: center;
    font-size: 15px; font-weight: 700; color: var(--text); background: none; box-shadow: none;
}
.cart-page-v2 .cart-qty-input:focus { outline: none; }
.cart-item-del {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: none;
    background: var(--bg); color: var(--text-secondary); font-size: 15px; cursor: pointer;
}
.cart-item-del:hover, .cart-item-del:active { background: #FEE2E2; color: #dc2626; }
.cart-summary {
    margin-top: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
}
.cart-summary-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 15px; color: var(--text-secondary); }
.cart-summary-row b { font-size: 22px; font-weight: 800; color: var(--text); }
.cart-page-v2 .cart-btn-checkout {
    display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px;
    border-radius: 50px; font-size: 15px; font-weight: 700;
}
.cart-page-v2 .cart-summary .cart-btn-continue { display: block; border: none; background: none; box-shadow: none; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--accent); padding: 4px; }
@media (max-width: 767px) {
    .cart-page-v2 .cart-item-image { flex-basis: 64px; width: 64px; height: 64px; }
    .cart-page-v2 .cart-clear-top span { display: none; }                /* icon only in the narrow toolbar */
    .cart-page-v2 .cart-clear-top.is-confirm span { display: inline; }
    /* the checkout button stays in reach above the tab bar */
    .cart-summary {
        position: fixed; left: 8px; right: 8px; bottom: calc(var(--m-tb, 64px) + 8px); z-index: 900; margin: 0;
        padding: 10px 12px; gap: 8px; flex-direction: row; align-items: center;
        box-shadow: 0 10px 30px -10px rgba(0,40,110,.35);
    }
    .cart-summary-row { flex-direction: column; align-items: flex-start; gap: 0; font-size: 11.5px; }
    .cart-summary-row b { font-size: 18px; }
    .cart-page-v2 .cart-btn-checkout { flex: 1; height: 44px; font-size: 14px; }
    .cart-page-v2 .cart-summary .cart-btn-continue { display: none; }
    .cart-page-v2 .checkout-content-wrap { padding-bottom: 84px; }   /* room for the fixed bar */
}
.cart-sidebar-foot .cart-total-row:not(:last-child) { display: none; }   /* sub-total repeats the total — keep the final line */
.cart-sidebar-foot .cart-total-row:last-child { padding-top: 0; }
.cart-sidebar-foot .cart-btn { white-space: nowrap; }
@media (max-width: 767px) { .cart-sidebar-foot .cart-btn i { display: none; } }
.cs-more-btn.is-loading { pointer-events: none; opacity: .7; }
.cs-more-btn.is-loading i { animation: ptSpin .6s linear infinite; }
.cmm-panel-loading { display: flex; justify-content: center; padding: 40px 0; color: var(--text-secondary); font-size: 22px; }

/* brands: dots under the slider (filled by home.twig) */
.hb-dots { display: flex; justify-content: center; gap: 6px; padding-top: 10px; }
.hb-dots:empty { display: none; }
.hb-dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 4px; background: var(--border-dark); cursor: pointer; transition: width .25s, background .25s; }
.hb-dot.active { width: 18px; background: var(--accent); }

/* ===== Home categories: one card, a slider (slide 0 = all level-1 categories as pills) ===== */
.hcx-card {
    max-width: 760px; margin: 0 auto; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border); border-radius: 22px;
    box-shadow: 0 12px 28px -18px rgba(0,40,110,.35);
}
.hcx-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.hcx-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.25; }
.hcx-name { max-width: 100%; font-size: 16px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcx-sub { font-size: 12px; color: var(--text-secondary); }
.hcx-arrow, .hw-arrow {
    width: 36px; height: 36px; flex-shrink: 0; border: none; border-radius: 50%;
    background: var(--accent); color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background .15s, opacity .15s, transform .15s;
}
.hcx-arrow:hover, .hw-arrow:hover:not(:disabled) { background: var(--accent-dark); }
.hcx-arrow:active, .hw-arrow:active { transform: scale(.92); }
.hw-arrow:disabled { opacity: .35; cursor: default; }
.hcx-viewport { overflow: hidden; }
.hcx-track { display: flex; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.hcx-slide { flex: 0 0 100%; min-width: 0; height: 330px; display: flex; flex-direction: column; }
.hcx-pills {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; padding: 14px;
}
.hcx-pill {
    display: inline-flex; align-items: center; gap: 7px; max-width: 100%; height: 38px; padding: 0 6px 0 12px;
    border: 1.5px solid var(--border); border-radius: 50px; background: var(--surface);
    color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.hcx-pill > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcx-pill .fa { color: var(--accent); }
.hcx-pill b { flex-shrink: 0; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 50px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-light); color: var(--accent); font-size: 11.5px; }
.hcx-pill:hover, .hcx-pill:active { border-color: var(--accent); color: var(--accent); text-decoration: none; background: var(--surface); }
.hcx-pill.is-l3 { height: 32px; padding-left: 10px; border-style: dashed; font-size: 12px; font-weight: 500; }
.hcx-pill.is-l3 b { min-width: 22px; height: 22px; font-size: 10.5px; }
.hcx-empty { flex: 1; margin: 0; padding: 30px 16px; text-align: center; color: var(--text-secondary); }
.hcx-empty .fa { display: block; margin-bottom: 8px; font-size: 26px; color: var(--accent); }
.hcx-foot { display: flex; gap: 8px; padding: 10px 14px 14px; border-top: 1px solid var(--border); }
.hcx-back, .hcx-all {
    flex: 1; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border-radius: 50px; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.hcx-back { border: 1.5px solid var(--accent); background: var(--surface); color: var(--accent); }
.hcx-all { border: none; background: var(--accent); color: #fff; }
.hcx-all:hover, .hcx-all:active { color: #fff; text-decoration: none; background: var(--accent-dark); }
.hcx-dots, .hw-dots { display: flex; justify-content: center; gap: 6px; padding-top: 12px; }
.hcx-dots:empty, .hw-dots:empty { display: none; }
.hcx-dot, .hw-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 4px; background: var(--border-dark); cursor: pointer; transition: width .25s, background .25s; }
.hcx-dot.active, .hw-dot.active { width: 22px; background: var(--accent); }

/* ===== "Чому саме ми": pill cards slider ===== */
.home-why { padding: 0 20px 26px; }
.hw-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 12px; }
.hw-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.hw-track {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding: 2px;
}
.hw-track::-webkit-scrollbar { display: none; }
.hw-card {
    flex: 0 0 calc((100% - 24px) / 3); min-width: 0; scroll-snap-align: start;
    display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px;
    background: var(--surface); border: 1.5px solid var(--border); border-radius: 50px;
}
.hw-icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-size: 18px; }
.hw-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.hw-text b { font-size: 14px; color: var(--text); }
.hw-text small { font-size: 12px; color: var(--text-secondary); }
/* "Чому саме ми": title centred on top, ◀ ▶ at the sides of the centred card */
.home-why .hw-title { text-align: center; margin: 0 0 12px; }
.hw-body { display: flex; align-items: center; gap: 10px; }
.hw-body .hw-track { flex: 1; min-width: 0; }
/* category card: height follows the slide in view (JS sets the viewport height), long lists scroll */
.hcx-viewport { transition: height .3s cubic-bezier(.2,.8,.2,1); }
.hcx-track { align-items: flex-start; }
.hcx-slide { height: auto !important; }
.hcx-pills { flex: none; max-height: 250px; }

/* ===== Category card: ◀ card ▶ (arrows at its sides, centred), icon in the title ===== */
.hcx-wrap { display: flex; align-items: center; justify-content: center; gap: 12px; }
.hcx-wrap > .hcx-card { flex: 1; min-width: 0; margin: 0; }
.hcx-bar { justify-content: center; }
.hcx-icon {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff; font-size: 16px;
}
.hcx-bar .hcx-title { flex: 0 1 auto; align-items: flex-start; text-align: left; }
.hcx-wrap .hcx-arrow { box-shadow: 0 8px 18px -10px rgba(0,60,140,.6); }


/* ===== Акції (/specials/): pill toolbar + per-category product sliders ===== */
.sps-page { padding-top: 16px; padding-bottom: 30px; }
.sps-toolbar {
    display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%;
    margin: 0 auto 16px; padding: 8px 22px 8px 8px; border-radius: 50px;
    background: var(--accent); color: #fff; box-shadow: 0 10px 24px -14px rgba(0,60,160,.55);
}
.sps-toolbar-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.sps-toolbar-title { min-width: 0; line-height: 1.2; }
.sps-toolbar-title h1 { margin: 0; font-size: 19px; font-weight: 700; color: #fff; }
.sps-toolbar-title small { font-size: 12px; color: rgba(255,255,255,.8); }
.sps-note {
    max-width: 760px; margin: 0 auto 18px; padding: 10px 16px; border-radius: 16px;
    background: var(--accent-light); color: var(--text); font-size: 13px; text-align: center;
}
.sps-note .fa { color: var(--accent); margin-right: 4px; }
.sps-section { margin-bottom: 26px; }
.sps-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sps-head-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.sps-head b { min-width: 0; font-size: 17px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sps-head small { flex-shrink: 0; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 50px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-light); color: var(--accent); font-size: 11.5px; font-weight: 700; }
.sps-head-all { margin-left: auto; flex-shrink: 0; height: 32px; padding: 0 14px; border-radius: 50px; border: 1.5px solid var(--accent); color: var(--accent); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.sps-head-all:hover, .sps-head-all:active { background: var(--accent); color: #fff; text-decoration: none; }
.sps-body { display: flex; align-items: center; gap: 10px; }
.sps-track {
    flex: 1; min-width: 0; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; overscroll-behavior-x: contain; padding: 4px 2px 8px;
}
.sps-track::-webkit-scrollbar { display: none; }
.sps-item { flex: 0 0 calc((100% - 42px) / 4); min-width: 0; scroll-snap-align: start; display: flex; }
.sps-item .product-thumb { width: 100%; margin: 0; }
.sps-arrow {
    width: 38px; height: 38px; flex-shrink: 0; border: none; border-radius: 50%;
    background: var(--accent); color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background .15s, opacity .15s, transform .15s;
}
.sps-arrow:hover:not(:disabled) { background: var(--accent-dark); }
.sps-arrow:active { transform: scale(.92); }
.sps-arrow:disabled { opacity: .35; cursor: default; }
.sps-dots { display: flex; justify-content: center; gap: 6px; padding-top: 8px; }
.sps-dots:empty { display: none; }
.sps-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 4px; background: var(--border-dark); cursor: pointer; transition: width .25s, background .25s; }
.sps-dot.active { width: 22px; background: var(--accent); }
.sps-empty { text-align: center; color: var(--text-secondary); padding: 30px 0; }
@media (max-width: 991px) { .sps-item { flex-basis: calc((100% - 28px) / 3); } }
/* Акції: no specials yet — text + countdown to the next start */
.sps-soon {
    max-width: 560px; margin: 10px auto 30px; padding: 26px 22px 24px; text-align: center;
    background: var(--surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 14px 30px -22px rgba(0,40,110,.4);
}
.sps-soon-icon { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 50%; background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.sps-soon h2 { margin: 0 0 6px; font-size: 21px; font-weight: 700; color: var(--text); }
.sps-soon p { margin: 0 0 16px; font-size: 14px; color: var(--text-secondary); }
.sps-timer { display: flex; justify-content: center; gap: 10px; margin-bottom: 18px; }
.sps-timer > div { width: 72px; padding: 10px 0 8px; border-radius: 16px; background: var(--accent); color: #fff; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.sps-timer b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sps-timer small { font-size: 11px; opacity: .85; margin-top: 3px; }
.sps-soon-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 22px; border-radius: 50px; border: 1.5px solid var(--accent); color: var(--accent); font-size: 14px; font-weight: 700; text-decoration: none; }
.sps-soon-btn:hover, .sps-soon-btn:active { background: var(--accent); color: #fff; text-decoration: none; }
/* Home: brands slider title — icon + title + note, centred */
.hb-head { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 4px 16px 12px; }
.hb-head-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.hb-head-text { line-height: 1.2; }
.hb-head-text h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.hb-head-text small { font-size: 12px; color: var(--text-secondary); }
/* Auth modal: toolbar head (logo · store name + note · close), pill tabs, forms as slides */
.auth-modal { padding: 0 0 22px; overflow-x: hidden; }
.auth-modal-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.auth-modal-logo { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.auth-modal-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.auth-modal-title b { font-size: 18px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auth-modal-title small { font-size: 12px; color: var(--text-secondary); }
.auth-modal-head .auth-modal-close { position: static; flex-shrink: 0; width: 38px; height: 38px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 16px; }
.auth-modal-tabs { margin: 0 16px 16px; }
.auth-modal-slides { overflow: hidden; transition: height .3s cubic-bezier(.22,1,.36,1); }
.auth-modal-track { display: flex; align-items: flex-start; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.auth-modal-track > .auth-modal-pane { display: block; flex: 0 0 100%; min-width: 0; padding: 0 16px; opacity: .35; transition: opacity .3s; }
.auth-modal-track > .auth-modal-pane.active { opacity: 1; }
/* Catalog header: title + counts under it; the category search is for the phone sheet only */
.cmm-mobile-header-title { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.cmm-mh-sub { font-size: 11.5px; font-weight: 500; opacity: .8; }
.cmm-search { display: none; }
/* Home picks slider (tabs + cards) is a phone block */
.home-show { display: none; }
/* Phone user menu (header) — desktop keeps its own heart / compare icons and the login pill */
.m-user { display: none; }
/* cart sheet: "Продовжити покупки" is a phone button (desktop keeps "Кошик") */
.cart-btn-continue-m { display: none; }
/* Home catalog, phone-only pieces: the category pill navbars, the round filter button, the
   pager dots and the filter sheet's close / backdrop — the desktop has its own category
   sidebar, side filter panel and the "Показати ще" button instead */
.cs-mnav, .cs-mfilter-btn, .cs-pages, .cs-filters-close, .cs-filters-backdrop { display: none; }

/* ===== One-page checkout (checkout.twig): 1 contacts, 2 delivery, 3 payment, then the summary ===== */
.op-form, #op-confirm { max-width: 760px; margin: 0 auto; }
#op-confirm { margin-top: 16px; }
.op-login { max-width: 760px; margin: 0 auto 12px; font-size: 13px; color: var(--text-secondary); text-align: center; }
.op-sec {
    background: var(--surface); border: 1.5px solid var(--border); border-radius: 20px;
    overflow: hidden; margin-bottom: 16px;
}
.op-sec-head {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    background: linear-gradient(120deg, var(--accent), var(--accent-dark, #0056b3)); color: #fff; font-size: 15.5px;
}
.op-sec-num {
    width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.2); font-weight: 800; font-size: 14px;
}
.op-body { padding: 16px; }
.op-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.checkout-page .op-grid .form-group { display: block; margin-bottom: 12px; }
.checkout-page .op-grid .control-label { width: auto; padding-top: 0; margin-bottom: 5px; }
.checkout-page .op-grid .form-control { width: 100%; }
.op-grid .form-control[readonly] { background: var(--bg); }
.op-options { margin-bottom: 12px; }
.op-options.has-error .checkout-option-card { border-color: var(--danger); }
.checkout-option-name small { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-top: 2px; }
.op-option-note { font-size: 12px; color: var(--text-secondary); text-align: right; }
.op-carrier-novaposhta.active .checkout-option-icon { background: #da291c; }
.op-carrier-ukrposhta.active .checkout-option-icon { background: #f3b200; color: #1c1c1c; }
.op-pay-wayforpay.active .checkout-option-icon { background: #1b1b1b; }
.op-pay-novapay_payment.active .checkout-option-icon { background: #e30613; }
.op-pay-liqpay.active .checkout-option-icon { background: #7ab72b; }
.op-pay-cod.active .checkout-option-icon { background: #2e9e57; }
.op-submit { min-height: 50px; border-radius: 50px !important; margin-top: 4px; }
.op-hint { font-size: 13px; color: var(--text-secondary); margin: 0 0 12px; }
#op-warning .alert { margin: 0 0 12px; }
#op-confirm-body .buttons { margin-top: 12px; }
#op-confirm-body .btn-primary { width: 100%; min-height: 50px; border-radius: 50px; font-weight: 700; }
@media (max-width: 767px) {
    .op-grid { grid-template-columns: 1fr; }
    .op-sec-head { justify-content: center; }
    .op-body { padding: 14px 12px; }
    .op-option-note { display: none; }
    #op-confirm-body .pull-right { float: none !important; width: 100%; }
}
/* phones: the summary table fits the screen — name | qty | sum, the unit price column is dropped */
@media (max-width: 767px) {
    #op-confirm .table-responsive { border: none; margin: 0; overflow: visible; }
    #op-confirm .checkout-confirm-table .table { table-layout: auto; width: 100%; }
    #op-confirm .checkout-confirm-table td { white-space: normal !important; padding: 8px 6px; vertical-align: middle; }
    #op-confirm .checkout-confirm-table thead td:nth-child(4),
    #op-confirm .checkout-confirm-table tbody td:nth-child(4) { display: none; }
    #op-confirm .checkout-confirm-table tfoot td[colspan] { text-align: left; }
}
/* one-page checkout: carrier price on the card + city / branch autocomplete */
.op-price-box { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex-shrink: 0; }
.op-price-box small { font-size: 11px; color: var(--text-secondary); font-weight: 500; }
.op-price.is-free { color: #1f9d55; }   /* free delivery (the order reaches FREE_DELIVERY_FROM) */
.op-ac-wrap { position: relative; }
.op-ac {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 50; margin-top: 4px;
    background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.14); max-height: 280px; overflow-y: auto; text-align: left;
}
.op-ac-item { padding: 10px 14px; font-size: 13.5px; line-height: 1.35; cursor: pointer; color: var(--text); border-bottom: 1px solid var(--border); }
.op-ac-item:last-child { border-bottom: none; }
.op-ac-item:hover { background: var(--accent-light); }
.op-ac-item b { font-weight: 700; }
.op-ac-item small { display: block; font-size: 12px; color: var(--text-secondary); }
.op-ac-note { padding: 10px 14px; font-size: 13px; color: var(--text-secondary); }
.op-ac-tag {
    display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 20px; font-size: 11px; font-weight: 700;
    background: #da291c; color: #fff; vertical-align: 1px;
}
@media (max-width: 767px) {
    .op-price-box small { display: none; }
    .op-ac-item { padding: 12px 14px; }
}
/* the autocomplete list may hang out of its section: no clipping, the header keeps the rounded top */
.op-sec { overflow: visible; }
.op-sec-head { border-radius: 18px 18px 0 0; }

/* ===== Checkout steps: numbered circles joined by arrow links, the step's name underneath.
   Phones: over the step slider (checkout.twig). Step 4 is the success page (common/success.twig),
   where the bar shows on every screen. */
.op-steps {
    max-width: 760px; margin: 0 auto 14px; padding: 14px 12px 12px;
    background: var(--surface); border: 1.5px solid var(--border); border-radius: 20px;
}
.op-steps-track { display: flex; align-items: center; justify-content: center; }
.op-step { flex: 0 0 auto; padding: 0; margin: 0; border: none; background: none; cursor: pointer; font-family: inherit; }
span.op-step { cursor: default; }
.op-step-dot {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    border: 2px solid var(--border); background: var(--surface); color: var(--text-secondary); font-size: 15px;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.op-step-dot b { font-weight: 800; }
.op-step-dot i { display: none; }
.op-step.active .op-step-dot {
    background: var(--accent); border-color: var(--accent); color: #fff;
    box-shadow: 0 0 0 5px rgba(0, 92, 190, 0.15);
}
.op-step.done .op-step-dot { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
.op-step.done .op-step-dot b { display: none; }
.op-step.done .op-step-dot i { display: block; }
.op-step-link {
    display: flex; align-items: center; justify-content: center; position: relative;
    flex: 1 1 auto; min-width: 12px; max-width: 72px; height: 2px; margin: 0 4px; background: var(--border);
    transition: background-color .25s ease;
}
.op-step-link i { position: absolute; font-size: 14px; line-height: 1; color: var(--border); background: var(--surface); padding: 0 1px; transition: color .25s ease; }
.op-step-link.done { background: var(--accent); }
.op-step-link.done i { color: var(--accent); }
.op-steps-caption { margin-top: 10px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--text-secondary); }
.op-steps-caption span, .op-steps-caption b { color: var(--accent); font-weight: 800; }
.op-steps-caption b { color: var(--text); }

/* the step buttons: "Оформити" alone on the desktop page; "Назад" / "Далі" join it on phones */
.op-nav { display: flex; gap: 10px; }
.op-nav .op-submit { flex: 1 1 auto; width: auto; }
.op-next, .op-back { display: none; }
@media (min-width: 768px) {
    .checkout-page .op-steps { display: none; }
}
@media (max-width: 767px) {
    .op-next { display: block; margin-top: 4px; }
    .op-back {
        display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; min-height: 50px; margin-top: 4px;
        padding: 0 18px; border: none; border-radius: 50px !important; font-weight: 700;
        background: var(--accent-light); color: var(--accent);
    }
    .op-back:hover, .op-back:focus { color: var(--accent); }
    .op-steps { scroll-margin-top: 72px; }   /* clear of the sticky "Оформлення замовлення" bar */

    /* the slider: every step card in one row, the viewport shows one and takes its height (JS) */
    .op-viewport.is-slider {
        overflow-x: clip; overflow-y: visible;          /* the city / branch list may hang below the card */
        transition: height .35s cubic-bezier(.22,1,.36,1);
    }
    .is-slider .op-track { display: flex; align-items: flex-start; transition: transform .4s cubic-bezier(.22,1,.36,1); }
    .is-slider .op-form { display: contents; }
    .is-slider .op-sec { flex: 0 0 100%; min-width: 0; max-width: none; margin: 0; }
    .is-slider #op-confirm { margin: 0; }
    .is-slider .op-away { visibility: hidden; transition: visibility 0s .4s; }   /* no tabbing into cards off screen */

    /* ‹ 1 → 2 → 3 → 4 › */
    .op-steps-row { display: flex; align-items: center; gap: 8px; }
    .op-steps-row .op-steps-track { flex: 1 1 auto; min-width: 0; }
    .op-arrow {
        flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; border: none; padding: 0;
        display: flex; align-items: center; justify-content: center;
        background: var(--accent); color: #fff; font-size: 20px; line-height: 1;
        box-shadow: 0 6px 14px -6px rgba(0, 92, 190, 0.6);
        transition: opacity .2s ease, transform .15s ease, background-color .2s ease;
    }
    .op-arrow:active { transform: scale(.92); }
    .op-arrow:disabled { background: var(--accent-light); color: var(--accent); box-shadow: none; opacity: .5; }
    .op-steps .op-step-dot { width: 34px; height: 34px; font-size: 14px; }
    .op-steps .op-step-link { margin: 0 3px; }
}
@media (prefers-reduced-motion: reduce) {
    .op-viewport.is-slider, .is-slider .op-track { transition: none; }
}
/* the arrows belong to the phone slider only */
.op-arrow { display: none; }
@media (max-width: 767px) {
    .op-arrow { display: flex; }
}

/* ===== Order summary before confirming (checkout/confirm.twig): product cards + totals ===== */
.oc-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.oc-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    background: var(--surface); border: 1.5px solid var(--border); border-radius: 16px;
}
.oc-thumb {
    flex: 0 0 56px; width: 56px; height: 56px; border-radius: 12px; overflow: hidden;
    background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
}
.oc-thumb img { width: 100%; height: 100%; object-fit: contain; }
.oc-thumb-ico { background: var(--accent-light); color: var(--accent); font-size: 20px; }
.oc-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oc-name {
    font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
a.oc-name:hover { color: var(--accent); }
.oc-opt { font-size: 12px; color: var(--text-secondary); }
.oc-qty { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }
.oc-sum { flex: 0 0 auto; font-size: 14.5px; font-weight: 800; color: var(--text); white-space: nowrap; }
.oc-totals { padding: 4px 14px; border-radius: 16px; background: var(--bg); border: 1px solid var(--border); }
.oc-total-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0;
    font-size: 13.5px; color: var(--text-secondary); border-bottom: 1px dashed var(--border);
}
.oc-total-row:last-child { border-bottom: none; }
.oc-total-row b { color: var(--text); white-space: nowrap; }
.oc-total-row.is-grand { font-size: 16px; font-weight: 800; color: var(--text); }
.oc-total-row.is-grand b { color: var(--accent); font-size: 18px; }

/* ===== Step 4: the success page — order number, sum, how it is paid ===== */
.checkout-success-page .checkout-content-wrap { flex-direction: column; }
.checkout-success-icon i { font-size: 42px; }   /* a global .fa size shrank the tick to 14px */
.checkout-success-page .op-steps { width: 100%; max-width: 560px; margin: 0 0 16px; }
.cs-order {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
    margin: 4px 0 18px; text-align: left;
}
.cs-order > div { padding: 10px 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); min-width: 0; }
.cs-order small { display: block; font-size: 11.5px; color: var(--text-secondary); font-weight: 600; }
.cs-order b { display: block; font-size: 15px; color: var(--text); overflow-wrap: anywhere; }
.cs-paid {
    display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 5px 12px; border-radius: 50px;
    font-size: 13px; font-weight: 700; background: #e7f6ec; color: #1f7a3f;
}
.cs-paid.is-wait { background: #fff4dc; color: #8a5a00; }
.cs-paid.is-cod { background: var(--accent-light); color: var(--accent); }
.checkout-success-actions { display: flex; gap: 10px; }
.checkout-success-actions .btn { flex: 1 1 0; width: 100%; max-width: none; min-height: 50px; margin: 0; border-radius: 50px; }
.checkout-success-actions .btn-default { min-height: 50px; border-radius: 50px; font-weight: 700; background: var(--accent-light); color: var(--accent); border: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
@media (max-width: 767px) {
    .cs-order { grid-template-columns: 1fr 1fr; }
    .cs-order > div:last-child { grid-column: 1 / -1; }
    .checkout-success-actions { flex-direction: column; }
}

/* ===== Toasts = the bell's notification cards (.ntf-item): light card, icon tile, title, text, time.
   Before, a toast was a solid blue bar and Bootstrap alerts a third look; now one style everywhere. */
.toast {
    align-items: center; gap: 12px; padding: 12px 12px 14px;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: 18px;
    box-shadow: 0 16px 36px -14px rgba(0, 40, 110, 0.38);
}
.toast-error { background: var(--surface); box-shadow: 0 16px 36px -14px rgba(220, 53, 69, 0.35); }
.toast-thumb {
    position: relative; flex: 0 0 44px; height: 44px; border-radius: 12px;
    background: var(--accent-light); display: flex; align-items: center; justify-content: center;
}
.toast-icon { font-size: 19px; color: var(--accent); }
.toast-error .toast-thumb { background: rgba(220, 53, 69, 0.1); }
.toast-error .toast-icon { color: var(--danger); }
.toast-thumb:has(.fa-heart) { background: rgba(229, 57, 53, 0.1); }
.toast-thumb .fa-heart { color: #e53935; }
.toast-thumb:has(.fa-exchange) { background: rgba(46, 158, 87, 0.12); }
.toast-thumb .fa-exchange { color: #2e9e57; }
.toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.toast-title { font-size: 13.5px; font-weight: 700; color: var(--text); }
.toast-text {
    font-size: 12.5px; font-weight: 500; color: var(--text-secondary); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.toast-body small { font-size: 11px; color: var(--text-secondary); opacity: .8; }
.toast-count { background: var(--accent); color: #fff; }
.toast-error .toast-count { background: var(--danger); color: #fff; }
.toast-close { background: var(--bg); color: var(--text-secondary); }
.toast-close:hover { background: var(--accent-light); color: var(--accent); }
.toast-progress { height: 3px; background: var(--accent); opacity: .55; }
.toast-error .toast-progress { background: var(--danger); }

/* the bell's list: the site's own toasts kept there (type "local") */
.ntf-item.is-local .ntf-thumb { background: var(--accent-light); border-color: transparent; }
.ntf-item.is-local .ntf-thumb i { position: static; width: auto; height: auto; border: none; background: none; color: var(--accent); font-size: 18px; }
.ntf-item.is-local.is-error .ntf-thumb { background: rgba(220, 53, 69, 0.1); }
.ntf-item.is-local.is-error .ntf-thumb i { color: var(--danger); }
.ntf-item.is-local .ntf-thumb .fa-heart { color: #e53935; }
.ntf-item.is-local .ntf-thumb .fa-exchange { color: #2e9e57; }
div.ntf-item { cursor: default; }

/* ===== Product page (PC): "Відгуки покупців" as a vertical scroller right of the info block ===== */
.prv-side { display: none; }
@media (min-width: 1300px) {
    .prv-side {
        display: flex; flex-direction: column; flex: 1 1 0; min-width: 320px; min-height: 420px;
        background: var(--surface); border: 1.5px solid var(--accent); border-radius: var(--radius-lg); overflow: hidden;
    }
    .product-feedback-section.has-side { display: none; }
    .prv-side-head {
        display: flex; align-items: center; gap: 10px; padding: 12px 16px;
        background: linear-gradient(120deg, var(--accent), var(--accent-dark)); color: #fff; font-size: 15px;
    }
    .prv-side-head b { flex: 1; min-width: 0; }
    .prv-side-body { position: relative; flex: 1 1 0; min-height: 0; }
    /* absolute track: the column never makes the row taller, it scrolls inside the photo/info height */
    .prv-vtrack {
        position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px;
        overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain;
    }
    .prv-vtrack::-webkit-scrollbar { display: none; }
    .prv-vtrack .prv-card { flex: 0 0 auto; }
    .prv-varrow {
        position: absolute; left: 50%; transform: translateX(-50%); z-index: 5;
        width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
        background: var(--surface); color: var(--accent); cursor: pointer; font-size: 18px;
        display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
        transition: var(--transition);
    }
    .prv-varrow:hover { background: var(--accent-light); }
    .prv-varrow.disabled { display: none; }
    .prv-up { top: 6px; }
    .prv-vdown { bottom: 6px; }
    .prv-side .prv-foot { padding: 12px 14px; border-top: 1px solid var(--border); flex-wrap: wrap; }
    .prv-side-empty {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 10px; padding: 20px; text-align: center;
    }
    .prv-side-empty b { font-size: 15px; color: var(--text); }
    .prv-side-empty > span:not(.prv-empty-icon) { font-size: 13px; color: var(--text-secondary); }
}

/* ===== Search page: one toolbar card (the PC header's look — white strip, accent line under it)
   holding the title, the search form and the list controls; products below as a bento grid ===== */
.srch-bar {
    position: relative; overflow: hidden; margin: 20px 0 18px; padding: 16px 20px 18px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 14px;
}
.srch-bar::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--accent-light), var(--accent), var(--accent-light), transparent);
}
.srch-bar-top { display: flex; align-items: center; gap: 12px; }
.srch-bar-icon {
    width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; font-size: 18px;
}
.srch-bar .srch-title { flex: 1; min-width: 0; margin: 0; font-size: 20px; font-weight: 700; color: var(--text); }
.srch-views.btn-group {
    display: flex; gap: 4px; flex-shrink: 0; padding: 3px;
    background: var(--bg); border: 1px solid var(--border); border-radius: 50px;
}
.srch-views .btn {
    float: none; width: 34px; height: 34px; padding: 0; margin: 0 !important; border: none; border-radius: 50% !important;
    background: transparent; color: var(--text-secondary); box-shadow: none;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.srch-views .btn:hover { color: var(--accent); background: var(--accent-light); }
.srch-views .btn.active { background: var(--accent); color: #fff; }

.srch-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.srch-field { position: relative; flex: 1 1 280px; min-width: 0; }
.srch-field > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--accent); pointer-events: none; }
.srch-bar .form-control {
    height: 44px; border-radius: 50px; border: 1px solid var(--border); background: var(--bg);
    color: var(--text); font-size: 14px; box-shadow: none;
}
.srch-bar .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); background: var(--surface); }
.srch-field .form-control { padding-left: 42px; }
.srch-bar .srch-select { width: auto; max-width: 240px; padding: 0 14px; cursor: pointer; }
.srch-chk {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; margin: 0; padding: 0 16px;
    border: 1px solid var(--border); border-radius: 50px; background: var(--bg);
    font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; white-space: nowrap;
    transition: var(--transition);
}
.srch-chk input { margin: 0; accent-color: var(--accent); }
.srch-chk:hover { border-color: var(--accent); color: var(--accent); }
.srch-chk:has(input:checked) { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
.srch-chk:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.srch-bar .srch-go {
    height: 44px; padding: 0 26px; border: none; border-radius: 50px;
    background: var(--accent); color: #fff; font-size: 14px; font-weight: 700;
    box-shadow: 0 4px 12px -4px rgba(0, 92, 190, 0.55);
}
.srch-bar .srch-go:hover { background: var(--accent-dark); }
.srch-go i { margin-right: 4px; }

.srch-controls {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    padding-top: 14px; border-top: 1px dashed var(--border);
}
.srch-subtitle { flex: 1 1 auto; font-size: 15px; font-weight: 700; color: var(--text); }
.srch-compare {
    display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 50px;
    background: var(--accent-light); color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: none;
}
.srch-compare:hover { background: var(--accent); color: #fff; text-decoration: none; }
.srch-ctl { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.srch-ctl .form-control { height: 38px; }
.srch-bar .srch-select-sm { min-width: 76px; }

/* Bento: 5 columns (4 on laptops); every 10 cards two are big 2×2 tiles, one on each side */
@media (min-width: 992px) {
    #product-search .srch-grid:has(> .product-grid) {
        grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense;
    }
    #product-search .srch-grid > .product-grid:nth-child(10n+1) { grid-column: span 2; grid-row: span 2; }
    #product-search .srch-grid > .product-grid:nth-child(10n+6) { grid-column: -3 / -1; grid-row: span 2; }
    #product-search .srch-grid > .product-grid:is(:nth-child(10n+1), :nth-child(10n+6)) > .product-thumb {
        height: 100%; display: flex; flex-direction: column;
    }
    #product-search .srch-grid > .product-grid:is(:nth-child(10n+1), :nth-child(10n+6)) .image {
        flex: 1 1 auto; height: auto; min-height: 300px; padding: 28px;
    }
    #product-search .srch-grid > .product-grid:is(:nth-child(10n+1), :nth-child(10n+6)) .caption h4 { font-size: 17px; }
    #product-search .srch-grid > .product-grid:is(:nth-child(10n+1), :nth-child(10n+6)) .price { font-size: 24px; }
}
@media (min-width: 1300px) {
    #product-search .srch-grid:has(> .product-grid) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ===== Product cards: rating as accent stars (was 5 pills) ===== */
.rstars { display: inline-flex; align-items: center; gap: 2px; line-height: 1; vertical-align: middle; }
.rstars i { font-size: 13px; color: var(--border-dark); font-style: normal; }
.rstars i.on { color: var(--accent); }
.pt-rating .pt-reviews { font-size: 11.5px; color: var(--text-secondary); }

/* PC cards: "В закладки" / "Порівняння" / "Обрати" always shown (before: only on hover, looked missing) */
@media (min-width: 768px) {
    .pt-action { opacity: 1; transform: none; }
    .product-thumb .image .pt-choose { opacity: 1; transform: none; }
}

/* ===== Hero (PC): lined up with the catalog section, taller, arrows clear of the content ===== */
@media (min-width: 992px) {
    .hero-cat-wrap { padding: 20px 20px 0; }
    .hero-slider { border-radius: 24px; box-shadow: 0 18px 40px -22px rgba(0, 60, 140, 0.55); }
    .hero-slide {
        min-height: 250px; max-height: none; padding: 40px 96px; gap: 32px; overflow: hidden;
    }
    /* big faded copy of the icon as a backdrop on the right */
    .hero-slide::after {
        content: ''; position: absolute; right: -60px; top: -60px; width: 320px; height: 320px; border-radius: 50%;
        background: rgba(255,255,255,0.08); pointer-events: none;
    }
    .hero-slide::before {
        content: ''; position: absolute; left: 30%; bottom: -120px; width: 260px; height: 260px; border-radius: 50%;
        background: rgba(255,255,255,0.06); pointer-events: none;
    }
    .hero-slide-icon {
        width: 110px; height: 110px; line-height: 110px; font-size: 50px; position: relative; z-index: 1;
        background: rgba(255,255,255,0.16); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25);
    }
    .hero-slide-body { text-align: left; position: relative; z-index: 1; }
    .hero-slide-title { font-size: 32px; letter-spacing: -0.5px; margin-bottom: 8px; }
    .hero-slide-desc { font-size: 16px; }
    .hero-slide-btn {
        position: relative; z-index: 1; padding: 14px 28px; font-size: 15px; font-weight: 700;
        background: #fff; color: var(--accent); box-shadow: 0 8px 20px -8px rgba(0,0,0,0.35);
    }
    .hero-slide-btn:hover { background: #fff; color: var(--accent-dark); transform: translateY(-2px); }
    .hero-arrow {
        width: 46px; height: 46px; background: rgba(255,255,255,0.18); color: #fff;
        box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.35);
    }
    .hero-arrow:hover { background: #fff; color: var(--accent); }
    .hero-arrow-prev { left: 24px; }
    .hero-arrow-next { right: 24px; }
    .hero-dots { bottom: 16px; }
}

/* ===== Home catalog toolbar (PC): quick-set pills in the centre ===== */
.cs-tags { display: none; }
@media (min-width: 992px) {
    .catalog-section-toolbar {
        display: grid; grid-template-columns: 44px minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
    }
    .catalog-section-toolbar .cs-pages, .catalog-section-toolbar .cs-mfilter-btn { display: none; }
    .catalog-section-toolbar .catalog-section-switcher { justify-self: end; }
    .cs-tags {
        display: flex; gap: 6px; padding: 4px;
        background: var(--bg); border: 1px solid var(--border); border-radius: 50px;
    }
    .cs-tag {
        display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px;
        border: none; border-radius: 50px; background: transparent; color: var(--text-secondary);
        font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: var(--transition);
    }
    .cs-tag i { color: var(--accent); font-size: 13px; }
    .cs-tag b {
        min-width: 22px; padding: 2px 7px; border-radius: 50px; text-align: center;
        background: var(--surface); color: var(--text-secondary); font-size: 11px; font-weight: 700;
    }
    .cs-tag b:empty { display: none; }
    .cs-tag:hover { background: var(--accent-light); color: var(--accent); }
    .cs-tag.active { background: var(--accent); color: #fff; box-shadow: 0 4px 12px -4px rgba(0, 92, 190, 0.55); }
    .cs-tag.active i { color: #fff; }
    .cs-tag.active b { background: rgba(255,255,255,0.25); color: #fff; }
    .cs-tag.is-empty { opacity: .45; }
}
@media (min-width: 992px) and (max-width: 1299px) {
    .cs-tag span { display: none; }   /* laptops: icon + count only */
}

/* ===== Home catalog (PC): "Популярні категорії" — accent card under the filters, 3 glass tiles in view ===== */
.cs-pcat { display: none; }
@media (min-width: 992px) {
    /* the filters card with the slider at its bottom stays on screen as one block */
    .cs-filters-panel { position: sticky; top: 90px; overflow: hidden; }
    .cs-pcat {
        display: block; margin: 14px -16px -16px; padding-bottom: 4px;
        background: linear-gradient(160deg, var(--accent), var(--accent-dark)); color: #fff;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }
    .cs-pcat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; font-size: 14px; }
    .cs-pcat-icon {
        width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px;
        display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.2); font-size: 13px;
    }
    .cs-pcat-body { position: relative; padding: 24px 10px; }
    .cs-pcat-viewport { height: 268px; overflow: hidden; }   /* 3 × 84px tiles + 2 × 8px gaps */
    .cs-pcat-track { display: flex; flex-direction: column; gap: 8px; transition: transform .5s cubic-bezier(.22,1,.36,1); }
    .cs-pcat-tile {
        position: relative; flex: 0 0 84px; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px;
        border-radius: 16px; background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.22);
        color: #fff; text-decoration: none; transition: var(--transition); box-sizing: border-box;
    }
    .cs-pcat-tile:hover { background: #fff; color: var(--accent); text-decoration: none; }
    .cs-pcat-img {
        width: 58px; height: 58px; flex: 0 0 58px; border-radius: 12px; overflow: hidden;
        display: flex; align-items: center; justify-content: center; background: #fff; color: var(--accent); font-size: 22px;
    }
    .cs-pcat-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
    .cs-pcat-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .cs-pcat-name {
        font-size: 12.5px; font-weight: 700; line-height: 1.25;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .cs-pcat-parent { font-size: 10.5px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cs-pcat-meta { display: flex; gap: 10px; font-size: 11px; font-weight: 600; opacity: .9; }
    .cs-pcat-meta i { margin-right: 2px; }
    .cs-pcat-rank {
        position: absolute; top: -1px; right: -1px; min-width: 22px; height: 20px; padding: 0 6px;
        border-radius: 0 16px 0 10px; background: #fff; color: var(--accent);
        font-size: 11px; line-height: 20px; text-align: center;
    }
    .cs-pcat-tile:hover .cs-pcat-rank { background: var(--accent); color: #fff; }
    .cs-pcat-nav {
        position: absolute; left: 50%; z-index: 2; width: 44px; height: 20px; margin-left: -22px; padding: 0;
        border: none; border-radius: 10px; background: rgba(255,255,255,0.2); color: #fff;
        font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
        transition: var(--transition);
    }
    .cs-pcat-nav:hover:not(:disabled) { background: #fff; color: var(--accent); }
    .cs-pcat-nav:disabled { opacity: .35; cursor: default; }
    .cs-pcat-nav.is-up { top: 2px; }
    .cs-pcat-nav.is-down { bottom: 2px; }
}

/* category page: views next to the product count */
.cat-views { white-space: nowrap; }
.cat-views i { margin-right: 2px; }

/* ===== Home catalog (PC): the centre scrolls inside itself, the section keeps one screen of height;
   "Показати ще" / "Сховати" float at the bottom centre of that box ===== */
.cs-more-bar { display: flex; justify-content: center; gap: 10px; }
@media (min-width: 992px) {
    /* the row is as tall as the side columns; the centre takes that height (contain: size keeps its
       cards from stretching the row) and scrolls inside it */
    .catalog-section-body { align-items: stretch; }
    .catalog-section-right {
        contain: size; min-height: max(560px, calc(100vh - 120px)); overflow-y: auto; overscroll-behavior: contain;
        padding: 2px 6px 0 2px; scrollbar-width: thin; scrollbar-color: var(--border-dark) transparent;
    }
    .catalog-section-right::-webkit-scrollbar { width: 6px; }
    .catalog-section-right::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 3px; }
    .cs-more-bar {
        position: sticky; bottom: 0; z-index: 4; margin-top: 12px; padding: 14px 0 12px;
        background: linear-gradient(to bottom, transparent, var(--bg) 45%);
        pointer-events: none;
    }
    .cs-more-bar:not(:has(.cs-more-btn:not([style*="none"]))) { display: none; }
    .cs-more-bar .cs-more-btn { margin: 0; pointer-events: auto; box-shadow: 0 8px 20px -10px rgba(0, 60, 140, 0.5); }
    .cs-more-bar .cs-more-btn:not(.cs-less-btn) { background: var(--accent); color: #fff; }
    .cs-more-bar .cs-more-btn:not(.cs-less-btn):hover { background: var(--accent-dark); }
    .cs-products-grid .product-thumb:hover { transform: translateY(-2px); }   /* the lift must not be clipped by the box */
}

/* ===== Home catalog, PC "Сітка": a slider of pages (3 rows × up to 5 cards). The strip of pages
   (#cs-products-grid.cs-slider) moves inside .cs-slide-viewport; ‹ › sit on the sides at mid-height,
   dots + "3 / 25" under it in the centre (instead of "Показати ще"). home.twig drives it. ===== */
.cs-slide-nav, .cs-slide-bar { display: none; }
@media (min-width: 768px) {
    /* the centre is no scroll box now: it is as tall as one page, the section follows it */
    .catalog-section-right.has-slider {
        contain: none; min-height: 0; overflow: visible; position: relative; padding: 2px 30px 0;
    }
    .has-slider .cs-slide-viewport { overflow-x: clip; overflow-clip-margin: 8px; padding: 4px 0 6px; }
    .cs-products-grid.cs-slider {
        display: flex; align-items: flex-start; gap: 0; max-height: none; overflow: visible; padding: 0;
        transition: transform .6s cubic-bezier(.22,1,.36,1), height .35s ease;
        will-change: transform;
    }
    .cs-slide {
        flex: 0 0 100%; min-width: 0; padding: 0 1px;
        display: grid; gap: 16px; align-content: start;
        grid-template-columns: repeat(var(--slide-cols, 5), minmax(0, 1fr));
    }
    .cs-slide .product-thumb { margin: 0; }

    .has-slider .cs-slide-nav {
        position: absolute; top: calc(50% - 32px); z-index: 5; transform: translateY(-50%);
        width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); padding: 0;
        display: flex; align-items: center; justify-content: center;
        background: var(--surface); color: var(--accent); font-size: 24px; line-height: 1; cursor: pointer;
        box-shadow: 0 10px 24px -12px rgba(0, 50, 130, 0.55);
        transition: background-color .2s ease, color .2s ease, transform .15s ease;
    }
    .has-slider .cs-slide-nav.is-prev { left: -8px; }
    .has-slider .cs-slide-nav.is-next { right: -8px; }
    .has-slider .cs-slide-nav:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
    .has-slider .cs-slide-nav:active { transform: translateY(-50%) scale(.92); }

    .has-slider .cs-slide-bar {
        display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 0 10px;
    }
    .cs-slide-dots { display: flex; align-items: center; gap: 7px; }
    .cs-slide-dot {
        width: 9px; height: 9px; padding: 0; border: none; border-radius: 50px; cursor: pointer;
        background: var(--border-dark, #c5cfdc); transition: width .3s ease, background-color .3s ease;
    }
    .cs-slide-dot:hover { background: var(--accent); }
    .cs-slide-dot.active { width: 26px; background: var(--accent); }
    .cs-slide-count { font-size: 13px; font-weight: 600; color: var(--text-secondary); min-width: 44px; }
    .cs-slide-count b { color: var(--accent); font-weight: 800; }
    .has-slider .cs-more-bar { display: none; }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
    .cs-products-grid.cs-slider { transition: none; }
}