/* General Setup.
   IMPORTANT: do NOT define --primary-color / --text-main / --text-muted here.
   Those are owned by the cfgr theme (theme.js). Redefining them at :root in
   this file overrode the configured colours across the whole shop — which is
   why the accent showed as green regardless of the cfgr setting. We only keep
   glass-geometry tokens local, and provide fallbacks *inline* (var(--x, …))
   where used, so the theme always wins. */
:root {
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border-light: rgba(255, 255, 255, 0.5);
    --glass-border-dark: rgba(255, 255, 255, 0.2);
    --glass-border-side: rgba(255, 255, 255, 0.1);
    /* eshop.css uses --text-main / --text-muted in ~29 places, but the cfgr
       theme exposes --text-color / --body-text-color. Alias them so the shop
       text follows the theme (and never falls back to invisible/dark). */
    --text-main:  var(--body-text-color, #E0E0E0);
    --text-muted: rgba(255, 255, 255, 0.7);
}
:root[data-theme="light"] {
    --text-muted: rgba(0, 0, 0, 0.55);
}

body {
    margin: 0;
    padding: 0; /* gutters come from .tab-content-area; footer must reach the page edges */
    font-family: var(--font-family, 'Avenir', 'Avenir Next', 'Inter', system-ui, sans-serif);
    /* NO background here — the cfgr theme (theme.js) / redesign.css navy owns
       the page background. A solid #0a0a0a here was painting the whole shop
       black and hiding the configured colours. */
    color: var(--text-main);
    box-sizing: border-box;
    min-height: 100vh;
}

* {
    box-sizing: inherit;
}

/* Site font (--font-family) at 13px for all eshop elements */
#tab-catalogue * {
    font-family: var(--font-family, 'Avenir', 'Avenir Next', 'Inter', system-ui, sans-serif);
    font-size: 13px;
}

/* Layout */
.layout-wrapper,
.eshop-layout-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    max-width: 1600px;
    margin: 10px auto 0;
}

/* For integrated catalogue tab */
#tab-catalogue .eshop-layout-wrapper {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

#tab-catalogue .eshop-product-container {
    flex: 1;
    min-width: 0;
}

#eshop-product-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, calc((100% - 16px)/2)));
    gap: 16px;
    align-items: start;
    justify-content: stretch;
    width: 100%;
}
#eshop-product-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, 400px);
    gap: 16px;
    align-items: start;
    justify-content: start;
    width: 100%;
    max-width: 100%;
}
/* Narrow screens: single full-width column */
@media (max-width: 560px) {
    #eshop-product-list { grid-template-columns: 1fr; }
}

/* ============================================================
   PHONES & TABLETS (≤900px) — the 250px sidebar plus a fixed
   310px product card (see the "sized to the sidebar link column"
   rule further down, which normally wins) never fit side by side
   on a phone or tablet screen: that combination alone needs
   ~580px+ just to show ONE card next to the sidebar, so the shop
   overflowed horizontally below that. Stack the sidebar above the
   grid and let cards size to the available width instead of a
   fixed pixel value.
   ============================================================ */
@media (max-width: 900px) {
    #tab-catalogue .eshop-layout-wrapper {
        flex-direction: column;
        /* The desktop rule sets align-items: flex-start for the ROW layout
           (independent sidebar/content heights). In column mode that same
           value governs the CROSS axis instead, i.e. width — so children
           shrink-wrap to their content instead of filling the row. Override
           it back to stretch so the product container actually takes the
           full available width. */
        align-items: stretch;
    }
    #tab-catalogue .eshop-sidebar-vertical {
        width: 100%;
    }
    /* `html body` prefix: a later, unscoped `#eshop-product-list { ... !important }`
       rule further down this file (same ID specificity) would otherwise win this
       tie by source order regardless of this media query. */
    html body #eshop-product-list {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)) !important;
    }
    html body #eshop-product-list .product-card:not(.expanded) {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1; /* same proportions as the desktop 300x300 tile */
    }
}

/* Phones specifically: force a single column (the minmax above already
   collapses to one column around ~540px, this just makes the intent
   explicit and matches the convention already used at 560px above). */
@media (max-width: 480px) {
    html body #eshop-product-list {
        grid-template-columns: 1fr !important;
    }
}

/* Expanded card expands down */

#tab-catalogue .eshop-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    padding: 20px 0;
}

/* Pagination takes the canonical pill from design-system.css. The block
   that used to sit here was ID-scoped, so it outranked the system — which
   is why catalogue paging looked unlike shop paging. */

/* Glassmorphism Navigation - Eshop Sidebar (Navbar-style segments) */
.eshop-sidebar.glass-nav {
    flex: 0 0 auto;
    width: auto;
    min-width: 240px;
    max-width: 100%;
    height: fit-content;
    padding: 0;
    background: var(--glass-container-bg, rgba(0, 0, 0, 0.35));
    border-radius: 45px;
    box-shadow: inset 0 0 2px 2px var(--glass-container-inset, rgba(0, 0, 0, 0.5));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}

/* Left column: unified glass block containing sidebar + filter */
.eshop-left-column {
    width: 400px;
    min-width: 300px;
    max-width: 400px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    background: var(--glass-container-bg, rgba(0, 0, 0, 0.35));
    border-radius: 45px;
    box-shadow: inset 0 0 2px 2px var(--glass-container-inset, rgba(0, 0, 0, 0.5));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

#tab-catalogue .eshop-sidebar {
    width: 100%;
    min-width: unset;
    max-width: 100%;
    flex-shrink: 0;
    height: fit-content;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: visible;
}

.eshop-sidebar ul,
#tab-catalogue .eshop-sidebar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Filter section — lives INSIDE the glass sidebar, so it's a plain
   section (no second glass card), separated by a hairline rule. */
.sidebar-filters {
    position: relative;
    margin: 8px 5px 10px;
    padding: 12px 6px 4px;
    border-top: 1px solid rgba(255,255,255,0.10);
    display: flex;
    flex-direction: column;
    gap: 9px;
    align-items: stretch;
    background: transparent;
}
.sidebar-filters::before {
    content: '';
    display: none;
}
.sidebar-filters > * { position: relative; z-index: 1; }

.filters-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.sidebar-filters h4 {
    margin: 0;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-main);
}
.filter-count {
    font-size: 9.5px;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.filter-count.is-active {
    opacity: 1;
    color: var(--text-main);
}

.sidebar-filters .filter-row { display: flex; flex-direction: column; gap: 4px; }
.sidebar-filters .filter-row label {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-muted);
}

/* Field material from design-system.css; the sidebar only sets width. */
.sidebar-filters .filter-input { width: 100%; }
/* a select with a value chosen reads as "active" */
.sidebar-filters select.filter-input:valid:not([value=""]) { color: var(--text-main); }
.sidebar-filters select.filter-input option { background: #101a2e; color: #fff; }

/* price range: two inputs on one line */
.filter-range { display: flex; align-items: center; gap: 7px; }
.filter-range .filter-input { min-width: 0; flex: 1; }
.range-dash { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }

.filter-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.13), transparent);
    margin: 1px 0;
}

.filter-actions-sidebar { display: flex; gap: 7px; margin-top: 2px; }
/* Pill material from design-system.css; they share the row. */
.filter-actions-sidebar .submit-btn { flex: 1; }

.eshop-sidebar li,
#tab-catalogue .eshop-sidebar li {
    margin: 0;
}

/* Sidebar segment buttons - exact copy from .nav-tab */
.eshop-sidebar a,
#tab-catalogue .eshop-sidebar a,
.eshop-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    width: 100%;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.45);
    -webkit-backdrop-filter: blur(25px) saturate(50%);
    backdrop-filter: blur(25px) saturate(50%);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    text-decoration: none;
    border-top: 0.5px solid rgba(255, 255, 255, 0.5);
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.01);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* First item radius — top of the unified block */
.eshop-sidebar > ul > li:first-child > a,
.eshop-sidebar > ul > li:first-child > .eshop-dropdown-toggle,
#tab-catalogue .eshop-sidebar > ul > li:first-child > a,
#tab-catalogue .eshop-sidebar > ul > li:first-child > .eshop-dropdown-toggle {
    border-top-left-radius: 45px;
    border-top-right-radius: 45px;
}

/* Last item — no radius, filter block follows below */
.eshop-sidebar > ul > li:last-child > a,
.eshop-sidebar > ul > li:last-child > .eshop-dropdown-toggle,
#tab-catalogue .eshop-sidebar > ul > li:last-child > a,
#tab-catalogue .eshop-sidebar > ul > li:last-child > .eshop-dropdown-toggle {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Hover effect - match nav-tab:hover exactly */
.eshop-sidebar a:hover,
#tab-catalogue .eshop-sidebar a:hover,
.eshop-dropdown-toggle:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.12), 0 8px 24px rgba(0, 0, 0, 0.3);
    transform: translateY(-0.5px);
}

.eshop-sidebar a:hover::after,
#tab-catalogue .eshop-sidebar a:hover::after,
.eshop-dropdown-toggle:hover::after {
    opacity: 0.4;
    transform: scaleX(0.8);
}

/* Active/Selected state - exact copy from .nav-tab.active */
.eshop-sidebar a.active,
#tab-catalogue .eshop-sidebar a.active,
.eshop-dropdown-toggle.active {
    background: var(--glass-bg-active, rgba(255, 255, 255, 0.1));
    -webkit-backdrop-filter: blur(25px) saturate(150%);
    backdrop-filter: blur(25px) saturate(150%);
    border-top: none;
    border-bottom: 1px solid var(--glass-border-active, rgba(255, 255, 255, 0.08));
    border-left: 1px solid var(--glass-border-side, rgba(255, 255, 255, 0.05));
    border-right: 1px solid var(--glass-border-side, rgba(255, 255, 255, 0.05));
    box-shadow: inset 0 0 10px 1px var(--glass-inset-shadow, rgba(0, 0, 0, 0.8));
    color: var(--primary-color, #20d21a);
    text-shadow: 0 0 15px rgba(32, 210, 26, 0.5);
}

/* --- ACTIVE SIDEBAR OPTICAL LIGHT REFLECTION - copy from navbar --- */
.eshop-sidebar a,
.eshop-dropdown-toggle {
    position: relative;
}
.eshop-sidebar a::after,
.eshop-dropdown-toggle::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--primary-color, #20d21a) 25%, transparent) 20%,
        color-mix(in srgb, var(--primary-color, #20d21a) 75%, transparent) 50%,
        color-mix(in srgb, var(--primary-color, #20d21a) 25%, transparent) 80%,
        transparent 100%);
    filter: blur(0.5px);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--primary-color, #20d21a) 15%, transparent);
    opacity: 0;
    transform: scaleX(0.5);
    transform-origin: center;
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.eshop-sidebar a.active::after,
.eshop-dropdown-toggle.active::after {
    opacity: 1;
    transform: scaleX(1);
}

/* Eshop Sidebar Dropdown Styles */
.eshop-dropdown {
    display: flex;
    flex-direction: column;
}

.eshop-dropdown-toggle .arrow {
    font-size: 0.8em;
    transition: transform 0.3s ease;
    opacity: 0.7;
    margin-left: 8px;
}

.eshop-dropdown.open .eshop-dropdown-toggle .arrow {
    transform: rotate(180deg);
}

.eshop-dropdown-toggle:hover .arrow {
    opacity: 1;
}

/* Product Container */
.product-container {
    width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.product-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

/* Product Card */
.product-card {
    display: flex;
    flex-direction: column;
    width: 400px;
    max-width: 100%;
    padding: 0;
    background: rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top-color: rgba(255, 255, 255, 0.22);
    border-radius: 5px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Full-width bottom bar to expand/collapse the card */
.card-expand-bar {
    width: 100%;
    height: 14px;
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    color: var(--primary-color, #20d21a);
    cursor: pointer;
    transition: background 0.2s ease;
}
.card-expand-bar:hover {
    background: rgba(255, 255, 255, 0.12);
}
.card-expand-bar .expand-chevron {
    transition: transform 0.3s ease;
}
.product-card.expanded .card-expand-bar .expand-chevron {
    transform: rotate(180deg);
}

/* Tags */
.product-tags {
    position: absolute;
    top: 8px;
    right: 12px;
    display: flex;
    gap: 6px;
    z-index: 2;
}

.product-tag {
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
}

.product-tag.hot {
    background: rgba(255, 80, 40, 0.2);
    color: #ff5028;
    border-color: rgba(255, 80, 40, 0.3);
}

.product-tag.new {
    background: rgba(32, 210, 26, 0.15);
    color: #20d21a;
    border-color: rgba(32, 210, 26, 0.25);
}

/* Availability */
.availability {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 400;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.availability.in-stock {
    color: #20d21a;
}

.availability.on-order {
    color: #ff9f0a; /* on-order status is orange */
}

.availability-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.availability.in-stock .availability-dot {
    background: #20d21a;
    box-shadow: 0 0 6px rgba(32, 210, 26, 0.5);
}

.availability.on-order .availability-dot {
    background: #ff9f0a;
    box-shadow: 0 0 6px rgba(255, 159, 10, 0.5);
}

.card-left {
    width: 100%;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    overflow: hidden;
    padding: 0;
}
.product-card:has(.product-image.img-expanded) { overflow: visible; }
.product-card:has(.product-image.img-expanded) .card-left { overflow: visible; }

.product-image {
    width: 100%;
    height: 170px;
    flex-shrink: 0;
    display: block;
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
    transition: height 0.35s ease;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255,255,255,0.04);
}
.product-image.img-expanded {
    height: auto;
    cursor: zoom-out;
    overflow: visible;
}

.product-image img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    display: block;
}
.product-image.img-expanded img {
    height: auto;
    object-fit: contain;
}

/* ===== PICTURE-FIELD PAGER (flip between image and tech-details) ===== */
/* The unified pager nav replaces the old per-image arrows */
.product-image .img-nav { display: none !important; }

/* Edge < > navigation buttons */
.pg-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
    z-index: 4;
}
.pg-nav.pg-prev { left: 4px; }
.pg-nav.pg-next { right: 4px; }
.product-image:hover .pg-nav { opacity: 1; }
.pg-nav:hover { background: rgba(0, 0, 0, 0.72); color: var(--primary-color, #20d21a); }

/* Tech-details slide — a small "page" overlaid inside the picture field */
.pg-tech-slide {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    padding: 10px 14px;
    box-sizing: border-box;
    background: rgba(10, 16, 30, 0.94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    overflow-y: auto;
    z-index: 2;
}
.product-image.show-tech { cursor: default; }
.product-image.show-tech .pg-tech-slide { display: flex; }
.pg-tech-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-color, #20d21a);
    margin: 0 0 8px 0;
    flex-shrink: 0;
}
.pg-tech-slide .main-data { gap: 5px; }
.pg-tech-slide .data-row { font-size: 11px; line-height: 1.35; }

/* Page dots */
.pg-page-dots {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 4;
    pointer-events: none;
}
.pg-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: background 0.2s ease;
}
.pg-dot.active { background: var(--primary-color, #20d21a); }

.img-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    border-radius: 4px;
    width: 28px;
    height: 40px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
}
.img-nav.img-prev { left: 4px; }
.img-nav.img-next { right: 4px; }
.product-image:hover .img-nav { opacity: 1; }

.img-counter {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 10px;
    color: rgba(255,255,255,0.7);
    background: rgba(0,0,0,0.45);
    border-radius: 3px;
    padding: 1px 4px;
    pointer-events: none;
    z-index: 2;
}

.no-img {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    padding: 8px;
    word-break: break-all;
}

.card-right {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    gap: 4px;
    min-height: 0;
}

/* Title & product codes aligned left (override inline centering) */
.card-header-independent { text-align: left !important; }
.card-header-independent > div {
    justify-content: flex-start !important;
    gap: 12px;
}

/* Remove the middle data section and its expand bar */
.card-middle-section { display: none !important; }
.card-expand-bar { display: none !important; }

/* Card Sections */
.card-section {
    display: flex;
    flex-direction: column;
}

.card-header-section {
    display: none;
}

.card-header-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.product-code {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color, #20d21a);
    letter-spacing: 0.3px;
}

.card-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.price-panel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.card-middle-section {
    flex-grow: 1;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.card-middle-section {
    flex-grow: 1;
    overflow: hidden;
    transition: max-height 0.36s cubic-bezier(0.2,0.8,0.2,1), opacity 0.28s ease;
    max-height: 140px; /* collapsed height */
    opacity: 1;
}

.card-middle-section.expanded {
    max-height: 1000px;
}

.card-footer-section {
    padding: 10px 16px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: auto;
}
.card-footer-section {
    padding: 6px 12px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: auto;
}

.card-footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.card-footer-center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto;
}

.card-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 0 0 auto;
    justify-content: flex-end;
}

/* Data Rows */
.main-data, .extended-data {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.data-row {
    display: flex;
    gap: 8px;
    font-size: 11px;
    line-height: 1.4;
}

.data-label {
    font-weight: 600;
    color: var(--text-muted);
    flex-shrink: 0;
    min-width: 80px;
}

.data-value {
    color: var(--text-main);
    flex-grow: 1;
}

.extended-data {
    animation: fadeIn 0.3s ease-in-out;
}

.card-tech-section {
    margin: 8px -16px 0 -16px;
    padding: 10px 16px 12px 16px;
    background: rgba(0, 0, 0, 0.22);
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.36s cubic-bezier(0.2,0.8,0.2,1), opacity 0.28s ease;
    opacity: 0;
}

.card-tech-section.active {
    max-height: 800px;
    opacity: 1;
}

.product-description {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 6px 0;
    font-style: italic;
}

.product-web-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 8px 0;
    line-height: 1.5;
}

/* Card Content Styling */
.product-title {
    font-size: 12px !important;
    font-weight: 400;
    margin: 0 0 6px 0;
    padding-bottom: 4px;
}

.product-meta, .product-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 8px;
    font-size: 14px;
}

.meta-label {
    font-weight: bold;
    color: var(--text-muted);
}

.meta-price-row {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.meta-price {
    font-size: 17px;
    font-weight: bold;
    color: var(--primary-color, #20d21a);
}

/* Expandable Section */
.expand-toggle {
    color: var(--primary-color, #20d21a);
    font-weight: bold;
    cursor: pointer;
    margin: 8px 0;
    display: inline-block;
    text-decoration: underline;
    font-size: 14px;
}

.hidden-data { display: none; }

/* Footer Section - new layout */
.card-footer-section .card-footer-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Old card-footer - keeping for compatibility */
.card-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 8px;
    gap: 12px;
    flex-wrap: wrap;
}

.card-footer .card-footer-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.price {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color, #20d21a);
}

.price-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 4px;
}

.card-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Favorites Button — icon pill material from design-system.css; the
   heart keeps its own colour. */
.fav-btn { color: rgba(255, 255, 255, 0.4); }
.fav-btn:hover,
.fav-btn.active { color: #ff4060; }

/* Basket Button & Quantity Dialog */
/* Pill material from design-system.css. */
.basket-btn { overflow: hidden; }

/* Pill material from design-system.css. The cart button cross-fades two
   absolutely-positioned states inside itself, so it keeps position and
   overflow, plus a width band of its own.

   The band is driven by the WIDER of the two states — the quantity row, not
   the label. Four 24px controls + three 4px gaps + its 6px/32px padding need
   146px, so the old 110px floor squeezed the steppers together while the
   resting "В корзину" label looked short next to the detail button. */
.glass-cart-btn {
    position: relative;
    overflow: hidden;
    min-width: 156px;
    max-width: 190px;
}
.glass-cart-btn * { color: inherit; }

.btn-state {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.text-state {
    justify-content: center;
    white-space: nowrap;
    padding: 0 8px;
    opacity: 1;
    transform: translateY(0);
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qty-state {
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    padding: 0 4px;
    gap: 4px;
    width: 100%;
}

.btn-state { padding: 0 6px; }
.qty-state { justify-content: center; gap: 4px; padding-right: 32px; padding-left: 6px; }
.qty-action {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    width: 24px;
    min-width: 24px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s ease;
}
.qty-action:hover {
    background: rgba(255,255,255,0.16);
}
.qty-value {
    padding: 0 5px;
    background: rgba(0,0,0,0.24);
    border-radius: 8px;
    min-width: 20px;
    text-align: center;
    font-weight: 400;
    font-size: 12px;
    color: #fff;
}
.qty-confirm { position: absolute; right: 0; top: 0; width: 30px; height: 100%; border-radius: 0 7px 7px 0; background: rgba(255, 255, 255, 0.22); color: #fff; display: flex; align-items: center; justify-content: center; }
.qty-confirm:hover {
    background: rgba(255, 255, 255, 0.34);
}
.glass-cart-btn.is-active .text-state {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
}
.glass-cart-btn.is-active .qty-state {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Keep old dialog styles unused to avoid style conflicts */
.qty-dialog,
.qty-dialog.open {
    display: none !important;
}

.qty-arrow:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.catalog-link {
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 15px;
    font-weight: bold;
    transition: all 0.2s ease;
    border-top: 0.5px solid rgba(255, 255, 255, 0.5);
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.catalog-link:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--primary-color, #20d21a);
    transform: translateY(-2px);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.18);
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    padding: 20px 0;
}



#page-indicator {
    color: var(--text-muted);
    font-weight: 600;
}

.product-web-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
    line-height: 1.5;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Filter Navbar - Left: Categories/Tech | Center: Search | Right: Sort/Price */
.filter-navbar {
    margin: 0 0 16px 0;
    min-height: 44px;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 45px;
    box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    gap: 1px;
}

/* LEFT group - Categories and Tech specs */
.filter-navbar .filter-group {
    display: flex;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
}

.filter-navbar .filter-group.tech-specs {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}

/* CENTER - Search */
.filter-navbar .filter-search-center {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 0 1px;
}

.filter-navbar .filter-search {
    width: 100%;
    max-width: 320px;
    min-width: 200px;
}

/* RIGHT group - Sort and Price */
.filter-navbar .filter-group.right-group {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1px;
}

.filter-navbar .price-inline {
    display: flex;
    align-items: center;
    gap: 0;
}

/* Field material from design-system.css; only the widths are local. */
.filter-navbar .filter-select-nav { min-width: 100px; }
.filter-navbar .filter-input-nav { width: 60px; text-align: center; }
.filter-navbar .search-input {
    width: 100%;
    max-width: 320px;
    min-width: 200px;
}
.filter-navbar .filter-select-nav option {
    background: #1a1a1a;
    color: #E0E0E0;
}

.filter-navbar .price-separator {
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    font-weight: 600;
}

/* Reset button - match icon-btn */
.filter-navbar .filter-actions {
    display: flex;
    align-items: center;
    margin-left: 0;
}

/* Icon pill material from design-system.css; the filter bar sizes it to
   match the fields beside it. */
.filter-navbar .filter-btn-nav {
    width: 44px;
    height: 44px;
    opacity: 1;
}

.filter-navbar .filter-btn-nav:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.12), 0 8px 24px rgba(0, 0, 0, 0.3);
    transform: translateY(-0.5px);
}

/* First and last element radius in filter navbar */
.filter-navbar .nav-section:first-child .filter-select-nav:first-child {
    border-top-left-radius: 45px;
    border-bottom-left-radius: 45px;
}

.filter-navbar .nav-section:last-child .filter-btn-nav:last-child,
.filter-navbar .nav-section:last-child .filter-input-nav:last-child,
.filter-navbar .nav-section:last-child .filter-select-nav:last-child {
    border-top-right-radius: 45px;
    border-bottom-right-radius: 45px;
}

/* Vertical Sidebar — frosted glass card (same language as the filter panel) */
.eshop-sidebar-vertical {
    width: 250px; /* wide enough for category names without wrapping */
    flex-shrink: 0;
    padding: 8px 8px 0;
    border-radius: 14px;
    overflow: hidden;

    background: var(--ux-glass-bg, rgba(255,255,255,0.06));
    -webkit-backdrop-filter: blur(var(--ux-glass-blur, 18px)) saturate(150%);
    backdrop-filter: blur(var(--ux-glass-blur, 18px)) saturate(150%);
    border: 1px solid var(--ux-glass-border, rgba(255,255,255,0.10));
    border-top-color: var(--ux-glass-border-top, rgba(255,255,255,0.22));
    box-shadow: 0 8px 26px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.10);
    border-radius: var(--ux-glass-radius, 14px);
}

/* Category buttons are individual frosted slabs stacked inside the sidebar
   panel: a white wash over the dark surface, a black wash over the light one
   (the light overrides live at the end of this block, the same way .cat-tile
   is themed in catalogue.css). */
.sidebar-nav-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;         /* hover shadows must not be clipped */
}

.sidebar-nav-btn {
    display: flex;
    align-items: center;
    /* style.css centres every <button>; category labels read left-aligned */
    justify-content: flex-start;
    gap: 8px;
    padding: 0 12px;
    height: 38px;
    width: 100%;
    /* The Livematrix preflight resets every <button> to the native control
       (`appearance: button` + transparent background) and beats a plain class
       rule in WebKit — hence the opt-out and the !important longhand. Without
       these the slabs render as grey native bezels with centred labels. */
    -webkit-appearance: none;
    appearance: none;
    background-color: rgba(255, 255, 255, 0.06) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;       /* category names never wrap */
    cursor: pointer;
    transition: background-color 0.22s ease, border-color 0.22s ease,
                color 0.22s ease, box-shadow 0.22s ease, transform 0.16s ease;
    position: relative;
    overflow: hidden;          /* clips the active bar to the rounded corner */
    box-sizing: border-box;
}
.sidebar-nav-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hover: the glass brightens and lifts off the panel */
.sidebar-nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--text-main) !important;
    text-shadow: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 4px 14px rgba(0, 0, 0, 0.16);
}
/* Press: settles back into the panel */
.sidebar-nav-btn:active {
    background-color: rgba(255, 255, 255, 0.09) !important;
    transform: translateY(1px);
    text-shadow: none !important;
    color: var(--text-main) !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.20);
}

.sidebar-nav-btn.active {
    background-color: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.26);
    color: var(--text-main);
    font-weight: 400;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.sidebar-nav-btn.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--primary-color, rgba(255, 255, 255, 0.55));
    border-radius: 0 3px 3px 0;
}

.sidebar-nav-icon {
    width: 15px;
    height: 15px;
    opacity: 0.7;
    flex-shrink: 0;
}

.sidebar-nav-btn.active .sidebar-nav-icon {
    opacity: 1;
}

.sidebar-nav-arrow {
    margin-left: auto;
    width: 14px;
    height: 14px;
    opacity: 0.5;
    transition: transform 0.2s;
}

.sidebar-nav-btn.expanded .sidebar-nav-arrow {
    transform: rotate(90deg);
}

/* Submenu in sidebar — animated height so the container grows/shrinks smoothly.
   Vertical padding is applied only on .show: with max-height:0 it would not
   collapse and would leak a few pixels while the submenu is closed. */
.sidebar-submenu {
    display: flex;
    flex-direction: column;
    padding: 0 0 0 10px;       /* indent under the parent slab */
    gap: 4px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    background: transparent;
}

.sidebar-submenu.show {
    max-height: 1000px;
    opacity: 1;
    padding-top: 6px;
    padding-bottom: 2px;
}

/* Nested glass: same material as the parent, one step quieter */
.sidebar-submenu-btn {
    width: 100%;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;   /* see .sidebar-nav-btn */
    -webkit-appearance: none;
    appearance: none;
    background-color: rgba(255, 255, 255, 0.04) !important;
    -webkit-backdrop-filter: blur(8px) saturate(130%);
    backdrop-filter: blur(8px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 11px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background-color 0.22s ease, border-color 0.22s ease,
                color 0.22s ease, box-shadow 0.22s ease, transform 0.16s ease;
    box-sizing: border-box;
}

.sidebar-submenu-btn:hover {
    background-color: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--text-main) !important;
    text-shadow: none !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
}
.sidebar-submenu-btn:active {
    background-color: rgba(255, 255, 255, 0.07) !important;
    transform: translateY(1px);
    text-shadow: none !important;
    color: var(--text-main) !important;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.18);
}

.sidebar-submenu-btn.active {
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--text-main);
    font-weight: 400;
}

/* Light theme: same slabs, same alphas, inverted wash. The top lip stays
   white — a bright edge over a dark-tinted pane is what sells the glass. */
:root[data-theme="light"] .sidebar-nav-btn {
    background-color: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
:root[data-theme="light"] .sidebar-nav-btn:hover {
    background-color: rgba(0, 0, 0, 0.12) !important;
    border-color: rgba(0, 0, 0, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 4px 14px rgba(0, 0, 0, 0.10);
}
:root[data-theme="light"] .sidebar-nav-btn:active {
    background-color: rgba(0, 0, 0, 0.09) !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.14);
}
:root[data-theme="light"] .sidebar-nav-btn.active {
    background-color: rgba(0, 0, 0, 0.14) !important;
    border-color: rgba(0, 0, 0, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
:root[data-theme="light"] .sidebar-submenu-btn {
    background-color: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.08);
}
:root[data-theme="light"] .sidebar-submenu-btn:hover {
    background-color: rgba(0, 0, 0, 0.10) !important;
    border-color: rgba(0, 0, 0, 0.16);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
}
:root[data-theme="light"] .sidebar-submenu-btn:active {
    background-color: rgba(0, 0, 0, 0.07) !important;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.12);
}
:root[data-theme="light"] .sidebar-submenu-btn.active {
    background-color: rgba(0, 0, 0, 0.12) !important;
    border-color: rgba(0, 0, 0, 0.20);
}

/* Legacy filter block - hide when using new design */
.filter-block {
    display: none;
}

/* Legacy sidebar - hide when using new design */
.eshop-sidebar {
    display: none;
}

/* Legacy styles - keep for backwards compatibility */
.filter-input[type="number"] {
    flex: 1;
}

.filter-select {
    flex: 1;
    cursor: pointer;
}

.filter-select option {
    background: #1a1a1a;
    color: var(--text-main);
}



.filter-toggle {
    text-align: center;
    margin-top: 8px;
}

.filter-link {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
    padding: 4px 8px;
}

.filter-link:hover {
    color: #4af444;
}

.filter-advanced {
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-advanced.hidden {
    display: none !important;
}

/* Submenu Styles */
.eshop-dropdown.has-submenu .eshop-dropdown-toggle {
    position: relative;
}

.eshop-dropdown.has-submenu .eshop-dropdown-toggle::after {
    content: none;
}

.eshop-dropdown.open .eshop-dropdown-toggle::after {
    content: none;
}

.eshop-submenu {
    list-style: none;
    padding: 0;
    margin: 0 0 0 20px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-left: 2px solid rgba(255,255,255,0.08);
}

.eshop-dropdown.open .eshop-submenu {
    max-height: 500px;
    opacity: 1;
    margin-top: 1px;
}

.eshop-subitem {
    margin: 0;
    padding: 0;
}

.eshop-subitem a {
    display: flex;
    align-items: center;
    height: 26px;
    width: 100%;
    padding: 0 12px 0 16px;
    background: rgba(255,255,255,0.03);
    color: rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(15px) saturate(50%);
    backdrop-filter: blur(15px) saturate(50%);
    font-size: 11px;
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
    border-top: 0.5px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-left: none;
    border-right: none;
    border-radius: 0;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.eshop-subitem a:hover {
    color: var(--glass-text-hover, rgba(255, 255, 255, 0.9));
    background: var(--glass-bg-hover, rgba(255, 255, 255, 0.12));
    border-color: var(--glass-border-hover, rgba(255, 255, 255, 0.35));
}

.eshop-subitem.active a {
    background: var(--glass-bg-active, rgba(255, 255, 255, 0.1)) !important;
    -webkit-backdrop-filter: blur(25px) saturate(150%) !important;
    backdrop-filter: blur(25px) saturate(150%) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--glass-border-active, rgba(255, 255, 255, 0.08)) !important;
    border-left: 1px solid var(--glass-border-side, rgba(255, 255, 255, 0.05)) !important;
    border-right: 1px solid var(--glass-border-side, rgba(255, 255, 255, 0.05)) !important;
    box-shadow: inset 0 0 10px 1px var(--glass-inset-shadow, rgba(0, 0, 0, 0.8)) !important;
    color: var(--primary-color, #20d21a) !important;
    text-shadow: 0 0 15px rgba(32, 210, 26, 0.5);
}

/* Parent-active state: when main category is selected, all subcategories show pressed state WITHOUT backlight */
.eshop-dropdown.has-active-parent .eshop-subitem a {
    background: var(--glass-bg-active, rgba(255, 255, 255, 0.1)) !important;
    -webkit-backdrop-filter: blur(25px) saturate(150%) !important;
    backdrop-filter: blur(25px) saturate(150%) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--glass-border-active, rgba(255, 255, 255, 0.08)) !important;
    border-left: 1px solid var(--glass-border-side, rgba(255, 255, 255, 0.05)) !important;
    border-right: 1px solid var(--glass-border-side, rgba(255, 255, 255, 0.05)) !important;
    box-shadow: inset 0 0 10px 1px var(--glass-inset-shadow, rgba(0, 0, 0, 0.8)) !important;
    color: var(--glass-text, rgba(255, 255, 255, 0.7)) !important;
}

/* Ensure no backlight on subitems when parent is active (only pressed style) */
.eshop-dropdown.has-active-parent .eshop-subitem a::after {
    display: none !important;
}

/* Subcategory optical light reflection - ONLY for active selected subcategory */
.eshop-subitem a {
    position: relative;
}
.eshop-subitem a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--primary-color, #20d21a) 25%, transparent) 20%,
        color-mix(in srgb, var(--primary-color, #20d21a) 75%, transparent) 50%,
        color-mix(in srgb, var(--primary-color, #20d21a) 25%, transparent) 80%,
        transparent 100%);
    filter: blur(0.5px);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--primary-color, #20d21a) 15%, transparent);
    opacity: 0;
    transform: scaleX(0.5);
    transform-origin: center;
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

/* Only active subcategory gets backlight */
.eshop-subitem.active a::after {
    display: block !important;
    opacity: 1;
    transform: scaleX(1);
}

/* Details Button & Expand Button */
.details-btn,
/* Pill material from design-system.css; the accent colour is local. */
.expand-btn { color: var(--primary-color, #20d21a); min-width: 100px; }

/* Product Detail Modal */
.product-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    padding: 20px;
}

.product-modal-overlay.open {
    opacity: 1;
}

.product-modal-panel {
    position: relative;
    width: 100%;
    max-width: 860px;
    max-height: 90vh;
    overflow-y: auto;
    background: rgba(18, 18, 18, 0.96);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    border-top: 0.5px solid rgba(255, 255, 255, 0.5);
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    transform: translateY(20px);
    transition: transform 0.25s ease;
}

.product-modal-overlay.open .product-modal-panel {
    transform: translateY(0);
}

.product-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 16px;
    color: #E0E0E0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 2;
}

.product-modal-close:hover {
    background: rgba(255, 80, 80, 0.3);
    color: #fff;
}

.product-modal-inner {
    display: flex;
    gap: 24px;
    padding: 24px;
}

.product-modal-left {
    flex-shrink: 0;
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.product-modal-image {
    width: 100%;
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 12px;
}

.product-modal-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-modal-price {
    font-size: 26px;
    font-weight: bold;
    color: var(--primary-color, #20d21a);
    text-align: center;
}

.product-modal-right {
    flex: 1;
    min-width: 0;
}

.product-modal-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 8px 0;
    padding-right: 36px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    color: #fff;
}

.product-modal-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 16px 0;
    line-height: 1.6;
}

.product-modal-specs {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.modal-spec-group {
    margin-bottom: 14px;
}

.modal-spec-group-title {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255,255,255,0.35);
    padding: 6px 0 4px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 2px;
}

.modal-spec-applications {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
    white-space: pre-wrap;
    padding: 4px 0;
}

.modal-spec-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 12px;
}

.modal-spec-row:last-child {
    border-bottom: none;
}

.modal-spec-label {
    flex-shrink: 0;
    width: 140px;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 11px;
}

.modal-spec-value {
    color: #E0E0E0;
    word-break: break-word;
    font-size: 12px;
}

.modal-spec-value a {
    color: var(--primary-color, #20d21a);
    text-decoration: underline;
}

@media (max-width: 600px) {
    .product-modal-inner {
        flex-direction: column;
    }
    .product-modal-left {
        width: 100%;
        flex-direction: row;
        align-items: flex-start;
    }
    .product-modal-image {
        width: 120px;
        flex-shrink: 0;
    }
    .modal-spec-label {
        width: 130px;
    }
}

/* ============================================================
   PRODUCT TILE (collapsed) — the product image covers the whole
   tile; title / codes / price / actions overlay at the bottom;
   no internal divider lines.
   ============================================================ */
#eshop-product-list .product-card:not(.expanded) {
    width: 300px;
    height: 300px;
}
#eshop-product-list .product-card:not(.expanded) .card-body {
    position: absolute;
    inset: 0;
    display: block;
}
/* Image fills the whole tile */
#eshop-product-list .product-card:not(.expanded) .card-left {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
#eshop-product-list .product-card:not(.expanded) .product-image {
    height: 100% !important;
    border-bottom: none !important;      /* divider removed */
}
#eshop-product-list .product-card:not(.expanded) .product-image img {
    height: 100% !important;
}
/* Overall dark tint over the product image so the title/code/price
   stay readable regardless of the photo's brightness */
#eshop-product-list .product-card:not(.expanded) .product-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    z-index: 1;
    pointer-events: none;
}
/* Right layer fills the tile so header can pin top, actions pin bottom */
#eshop-product-list .product-card:not(.expanded) .card-right {
    position: absolute;
    inset: 0;
    padding: 0;
    background: none;
}
/* Title + code — pinned to the TOP, right-aligned, transparent background */
#eshop-product-list .product-card:not(.expanded) .card-header-independent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 10px 12px 28px;
    text-align: right !important;
    background: transparent;
}
#eshop-product-list .product-card:not(.expanded) .product-title { font-size: 15px !important; }
#eshop-product-list .product-card:not(.expanded) .card-header-independent > div {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px;
    border-bottom: none !important;
    padding: 0 !important;
    margin: 4px 0 0 !important;
}
/* Actions — pinned to the BOTTOM-RIGHT (add-to-cart button only) */
#eshop-product-list .product-card:not(.expanded) .card-footer-section {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    border-top: none !important;
    background: transparent !important;
    padding: 28px 12px 12px;
    justify-content: flex-end;
}
#eshop-product-list .product-card:not(.expanded) .card-actions {
    justify-content: flex-end;
    flex: 0 0 auto;
}
/* Price is integrated into the cart button; hide the rest.
   .card-footer-left (availability) is relocated to the front top-left by the
   pager, so its original bottom copy stays hidden here. */
#eshop-product-list .product-card:not(.expanded) .card-footer-left,
#eshop-product-list .product-card:not(.expanded) .card-footer-center,
#eshop-product-list .product-card:not(.expanded) .detail-btn,
#eshop-product-list .product-card:not(.expanded) .fav-btn {
    display: none !important;
}

/* ============================================================
   PRODUCT TILE v2 — flip card (front / back)
   • Readable text: NO glow / text-shadow anywhere on the card.
   • Title / code / availability sit in frosted chips so they read
     over any photo, black text in light mode, white text in dark.
   • No hover arrows, no page dots — one flip button, one × back.
   ============================================================ */

/* 1 ── Kill every text-shadow on card text ─────────────────── */
#eshop-product-list .product-card .product-title,
#eshop-product-list .product-card .product-title a,
#eshop-product-list .product-card .card-header-independent,
#eshop-product-list .product-card .card-header-independent span,
#eshop-product-list .product-card .availability,
#eshop-product-list .product-card .pg-tech-slide,
#eshop-product-list .product-card .pg-tech-slide * {
    text-shadow: none !important;
}

/* 2 ── Remove the ugly hover arrows / dots from the collapsed tile ── */
#eshop-product-list .product-card:not(.expanded) .img-nav,
#eshop-product-list .product-card:not(.expanded) .img-counter,
#eshop-product-list .product-card:not(.expanded) .pg-nav,
#eshop-product-list .product-card:not(.expanded) .pg-page-dots {
    display: none !important;
}

/* 3 ── Title + code chip (top-right) — frosted, theme-aware text ── */
#eshop-product-list .product-card:not(.expanded) .card-header-independent {
    padding: 8px 8px 0 0 !important;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    left: auto !important;
    max-width: 70%;
}
#eshop-product-list .product-card:not(.expanded) .card-header-independent .product-title {
    display: inline-block;
    padding: 4px 9px !important;
    border-radius: 8px;
    background: rgba(12, 16, 24, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff !important;
    line-height: 1.25;
}
#eshop-product-list .product-card:not(.expanded) .card-header-independent > div {
    margin-top: 4px !important;
    background: rgba(12, 16, 24, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 3px 9px !important;
    border-radius: 8px;
}
:root[data-theme="light"] #eshop-product-list .product-card:not(.expanded) .card-header-independent .product-title,
:root[data-theme="light"] #eshop-product-list .product-card:not(.expanded) .card-header-independent > div {
    background: rgba(255, 255, 255, 0.78);
}
:root[data-theme="light"] #eshop-product-list .product-card:not(.expanded) .card-header-independent .product-title,
:root[data-theme="light"] #eshop-product-list .product-card:not(.expanded) .card-header-independent .product-title a {
    color: #111 !important;
}
/* ID stays muted, code keeps the accent — in both themes */
:root[data-theme="light"] #eshop-product-list .product-card:not(.expanded) .card-header-independent > div span:first-child {
    color: #555 !important;
}

/* 4 ── FRONT availability indicator (top-left) — REMOVED.
   The pager cloned the availability into a top-left pill, duplicating the
   bottom-left corner dot. Hidden so availability shows only once (the
   bottom-left dot, with its hover status tooltip). */
.pg-front-avail { display: none !important; }
.pg-front-avail-legacy {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 4;
    pointer-events: none;
}
.pg-front-avail .availability {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: rgba(12, 16, 24, 0.55);
    border: none;
}
:root[data-theme="light"] .pg-front-avail .availability {
    background: rgba(255, 255, 255, 0.82);
}

/* 5 ── Flip button (front → back), bottom-left ─────────────── */
.pg-flip {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 5;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 16, 24, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    transition: background 0.15s ease, transform 0.15s ease;
}
.pg-flip span {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
}
.pg-flip:hover { background: var(--primary-color, #20d21a); color: #fff; transform: scale(1.08); }
:root[data-theme="light"] .pg-flip { background: rgba(255, 255, 255, 0.82); color: #111; }

/* When flipped to the back, hide all front chrome so the spec page is clean */
#eshop-product-list .product-card.tech-open .card-header-independent,
#eshop-product-list .product-card.tech-open .card-footer-section,
#eshop-product-list .product-card.tech-open .pg-front-avail,
#eshop-product-list .product-card.tech-open .pg-flip {
    opacity: 0 !important;
    pointer-events: none !important;
}
#eshop-product-list .product-card.tech-open .pg-tech-slide { z-index: 6; }

/* 6 ── BACK: technical specification slide, theme-aware ────── */
.pg-tech-slide {
    background: rgba(12, 16, 24, 0.96) !important;
    color: #fff;
    padding: 12px 16px !important;
}
:root[data-theme="light"] .pg-tech-slide {
    background: rgba(248, 250, 252, 0.98) !important;
    color: #111;
}
.pg-tech-slide .data-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.18);
}
.pg-tech-slide .data-label { color: rgba(255, 255, 255, 0.6); }
.pg-tech-slide .data-value { color: #fff; font-weight: 600; text-align: right; }
:root[data-theme="light"] .pg-tech-slide .data-label { color: rgba(0, 0, 0, 0.55); }
:root[data-theme="light"] .pg-tech-slide .data-value { color: #111; }

/* × back button on the tech slide (top-right) */
.pg-flip-back {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: rgba(128, 128, 128, 0.22);
    color: inherit;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.pg-flip-back:hover { background: var(--primary-color, #20d21a); color: #fff; }

/* ============================================================
   BREADCRUMB — menu path between the navbar and the content
   ============================================================ */
.eshop-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 4px 2px;
    margin: 0 0 12px;
    font-size: 12px;
    /* plain text path — no box / glass panel */
    background: none;
    border: none;
}
.eshop-breadcrumb .crumb {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease, text-shadow 0.15s ease;
}
.eshop-breadcrumb a.crumb:hover {
    color: var(--primary-color, #20d21a);
    text-shadow: 0 0 10px currentColor;
}
.eshop-breadcrumb .crumb-current {
    color: var(--text-main);
    font-weight: 600;
}
.eshop-breadcrumb .crumb-sep {
    color: var(--text-muted);
    opacity: 0.5;
    font-size: 12px;
}

/* ============================================================
   PRODUCT CARD — sized to the sidebar link column (250px),
   with a gradient scrim so the overlaid text stays readable
   ============================================================ */
#eshop-product-list {
    grid-template-columns: repeat(auto-fill, 300px) !important;
    gap: 14px !important;
    justify-content: start;
}
#eshop-product-list .product-card:not(.expanded) {
    width: 300px !important;
    height: 300px !important;
    border-radius: 14px !important;
    /* glass rim consistent with the sidebar / filter / pagination */
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-top-color: rgba(255,255,255,0.22) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,0.30) !important;
    overflow: hidden !important;
}

/* Gradient tint over the photo: dark at the bottom only, where the
   price/cart button sits, clear everywhere else so the product itself
   stays visible. (Used to also darken the top for the title, removed —
   the title chip has its own frosted background, doesn't need it.) */
#eshop-product-list .product-card:not(.expanded) .product-image::after {
    background:
        linear-gradient(to top, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0) 40%)
    !important;
}

/* Scale the overlaid text down with the smaller card */
#eshop-product-list .product-card:not(.expanded) .product-title { font-size: 12.5px !important; }
#eshop-product-list .product-card:not(.expanded) .card-header-independent { padding: 8px 10px 20px !important; }
#eshop-product-list .product-card:not(.expanded) .card-footer-section { padding: 20px 10px 9px !important; }

/* ============================================================
   CARD tweaks — UNA badge bottom-left, no flip/info button
   ============================================================ */
/* Remove the flip ("i") button from the collapsed tile — the modal
   replaces the flip-to-specs interaction. */
#eshop-product-list .product-card:not(.expanded) .pg-flip { display: none !important; }

/* UNA code chip pinned to the BOTTOM-LEFT corner of the tile */
#eshop-product-list .product-card:not(.expanded) .card-una-badge {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 4;
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-color, #20d21a);
    background: rgba(12, 16, 24, 0.62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 3px 9px;
    border-radius: 8px;
    pointer-events: none;
}
:root[data-theme="light"] #eshop-product-list .product-card:not(.expanded) .card-una-badge {
    background: rgba(255, 255, 255, 0.82);
}
/* badge only exists on the collapsed tile */
#eshop-product-list .product-card.expanded .card-una-badge { display: none; }
#eshop-product-list .product-card { cursor: pointer; }

/* ============================================================
   PRODUCT DETAIL MODAL — frosted glass
   ============================================================ */
.eshop-modal[hidden] { display: none; }
.eshop-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.eshop-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 6, 12, 0.72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.eshop-modal-card {
    position: relative;
    width: min(860px, 100%);
    max-height: 88vh;
    overflow: auto;
    border-radius: 18px;
    padding: 22px;
    display: flex;
    gap: 22px;
    /* same frosted glass language as the rest of the shop */
    background: linear-gradient(160deg, rgba(20,28,46,0.96) 0%, rgba(14,20,34,0.97) 100%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255,255,255,0.12);
    border-top-color: rgba(255,255,255,0.24);
    box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
.eshop-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.eshop-modal-close:hover { background: rgba(255,255,255,0.14); border-color: var(--primary-color, #20d21a); }
.eshop-modal-body { display: contents; }

.emo-media {
    flex: 0 0 300px;
    align-self: flex-start;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.emo-media img { width: 100%; height: 100%; object-fit: contain; }
.emo-info { flex: 1; min-width: 0; color: var(--text-main, #E0E0E0); }
.emo-avail {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 400; margin-bottom: 8px; color: var(--text-main, #E0E0E0);
}
.emo-avail .emo-dot { width: 8px; height: 8px; border-radius: 50%; }
.emo-avail.in-stock .emo-dot { background: #20d21a; }
.emo-avail.on-order .emo-dot { background: #ff9f0a; }
.emo-title { font-size: 18px; font-weight: 400; margin: 0 0 8px; color: #fff; line-height: 1.3; }
.emo-codes { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.emo-una { font-size: 13px; font-weight: 400; color: #e8eaed; }
.emo-itemcode { font-size: 12px; color: var(--text-muted, rgba(255,255,255,0.6)); }
.emo-specs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 18px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.emo-spec-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 2px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 13px;
}
.emo-spec-label { color: var(--text-muted, rgba(255,255,255,0.6)); }
.emo-spec-val { color: var(--text-main, #E0E0E0); font-weight: 400; text-align: right; }
.emo-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.emo-price { font-size: 19px; font-weight: 500; color: #f0f2f5; }
.emo-price.muted { font-size: 15px; font-weight: 400; color: var(--text-muted, rgba(255,255,255,0.6)); }

/* Modal add-to-cart button — same glass qty-chooser as the cards, sized up */
/* Pill material from design-system.css; the product footer gives it a
   wider band and pins it right of the price. */
.emo-cart.glass-cart-btn {
    height: 40px;
    min-width: 168px;
    max-width: none;
    margin-left: auto;
}
.glass-cart-btn.in-basket {
    background: rgba(255, 255, 255, 0.22) !important;
}
.glass-cart-btn.in-basket .btn-label { color: #ffffff !important; }

/* "На страницу товара" — full-width glass button, below the price/cart row */
.emo-page {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    margin-top: 12px;
    padding: 11px 18px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    text-decoration: none;
    color: #f0f2f5 !important;
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    transition: background 0.18s ease;
}
.emo-page:hover { background: rgba(255, 255, 255, 0.17) !important; }
@media (max-width: 640px) {
    .eshop-modal-card { flex-direction: column; }
    .emo-media { flex-basis: auto; width: 100%; max-width: 260px; margin: 0 auto; }
}

/* ============================================================
   COLLAPSED TILE — bottom-left availability dot + UNA code,
   and hover-reveal of the technical specification
   • At rest the availability shows ONLY a colored dot.
   • Hovering the tile fades in the tech-spec panel and expands
     the availability dot into a labelled status chip.
   ============================================================ */

/* The legacy footer availability stays for the (rare) expanded view;
   on the collapsed tile the corner cluster below replaces it. */
#eshop-product-list .product-card:not(.expanded) .card-footer-left { display: none !important; }

/* Bottom-left corner cluster: availability dot + UNA badge together */
#eshop-product-list .product-card:not(.expanded) .card-corner-badges {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Keep clear of the bottom-right cart button (min-width 110px + 10px inset). */
    max-width: calc(100% - 132px);
    min-width: 0;
}
#eshop-product-list .product-card.expanded .card-corner-badges { display: none; }

/* Availability rendered as JUST a colored dot at rest (no chip / border) */
.card-corner-badges .cc-avail {
    position: relative;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    gap: 0 !important;
    cursor: help;
}
.card-corner-badges .availability-dot {
    width: 11px;
    height: 11px;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.40);   /* dark rim so it reads over the photo */
}
/* Status shown as a tooltip that pops ABOVE the dot on hover — never
   changes the row width, so it can't collide with the cart button. */
.card-corner-badges .availability-label {
    position: absolute;
    bottom: calc(100% + 8px);
    left: -3px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    font-size: 11px;
    font-weight: 400;
    padding: 3px 9px;
    border-radius: 7px;
    background: rgba(12, 16, 24, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 6;
}
.card-corner-badges .cc-avail:hover .availability-label {
    opacity: 1;
    transform: translateY(0);
}
/* neutral status text — the coloured dot alone carries the stock state */
.card-corner-badges .cc-avail .availability-label { color: #f0f2f5; }

/* UNA badge sits statically inside the cluster (reset the absolute rule) */
#eshop-product-list .product-card:not(.expanded) .card-corner-badges .card-una-badge {
    position: static;
    left: auto;
    bottom: auto;
    font-size: 11px;
    font-weight: 400;
    color: #e8eaed;                 /* neutral silver — no bright accent on the glass chip */
    background: rgba(12, 16, 24, 0.62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 3px 9px;
    border-radius: 8px;
    /* long UNA codes (UNA-P0000000-0001) must truncate, not overflow */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
:root[data-theme="light"] #eshop-product-list .product-card:not(.expanded) .card-corner-badges .card-una-badge {
    background: rgba(255, 255, 255, 0.82);
    color: #2a2d33;
}

/* Technical specification is shown in the detail modal only — not on the
   collapsed tile. */

/* ============================================================
   LIQUID-GLASS OPTICAL RIM — modal only.
   A soft edge highlight that reads like light catching the bevel
   of the glass panel. Applied ONLY to the detail modal; on the
   tall sidebar and the photo tiles it read as a harsh outline,
   so they keep their plain hairline border instead.
   ============================================================ */
.eshop-modal-card { position: relative; }
.eshop-modal-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;                         /* rim thickness */
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.10) 22%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(255, 255, 255, 0.12) 78%,
        rgba(255, 255, 255, 0.45) 100%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 5;
}

/* ============================================================
   PUBLISHED PRODUCT PARAMETERS (from website_products)
   Tag chip on the tile, tag + drawing link in the detail modal.
   ============================================================ */
/* Tag now sits inside .card-header-independent, stacked directly under the
   title chip — that container is a column flex box (align-items:flex-end),
   so this just needs to render as a normal-flow chip, not an independent
   absolutely-positioned badge. */
/* "…card-header-independent > div" above forces display:flex/margin/padding
   !important on every div directly inside the header (built for an unrelated
   code/id row) — needs !important here too, not just a tighter selector,
   since !important always wins regardless of specificity. The flex display
   was also breaking the ellipsis truncation below (flex items don't shrink
   past their content width unless min-width:0 is set). */
#eshop-product-list .product-card:not(.expanded) .card-header-independent > .card-tag-badge {
    display: inline-block !important;
    min-width: 0;
    margin: 4px 0 0 !important;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #e8eaed;
    background: rgba(12, 16, 24, 0.62) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 3px 9px !important;
    border-radius: 8px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}
#eshop-product-list .product-card.expanded .card-tag-badge { display: none; }
:root[data-theme="light"] #eshop-product-list .product-card:not(.expanded) .card-header-independent > .card-tag-badge {
    background: rgba(255, 255, 255, 0.82) !important;
    color: #2a2d33;
}
.emo-tag {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted, rgba(255, 255, 255, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 7px;
    padding: 2px 8px;
}
.emo-drawing {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    color: #f0f2f5;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    padding: 9px 14px;
    margin-left: auto;
    transition: background 0.18s ease;
}
.emo-drawing:hover { background: rgba(255, 255, 255, 0.18); }

/* ============================================================
   VIEW TOGGLE — switch #eshop-product-list between the default
   tile grid and a horizontal-row list view. The .list-view class
   below is applied to #eshop-product-list itself (see eshop.js
   initViewToggle()), so it survives renderEshopProducts() rebuilding
   the card markup on every filter/page/sort change.
   ============================================================ */
.eshop-view-toggle {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    margin-bottom: 12px;
}
/* Breadcrumb + view switch share one row, so the switch costs no vertical
   band of its own. The breadcrumb's own bottom margin is moved onto the
   row, otherwise it would offset the vertically-centred buttons. */
.eshop-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 12px;
}
.eshop-topbar .eshop-breadcrumb {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.eshop-topbar .eshop-view-toggle {
    margin: 0;
    flex: 0 0 auto;
}
/* Sort dropdown + view switch travel together at the right of the row */
.eshop-topbar-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 0;
}
/* Field material from design-system.css (including the drawn arrow);
   only the width cap is local. */
.eshop-sort-select { max-width: 210px; }
/* A chosen sort is state worth seeing at a glance */
.eshop-sort-select.is-active {
    color: var(--primary-color, #20d21a);
    border-color: var(--primary-color, #20d21a);
    background-color: rgba(32, 210, 26, 0.10);
}
/* The dropdown list itself is drawn by the OS, so its options need a
   readable colour of their own — inheriting the panel's light-on-dark
   text leaves white-on-white on most platforms. */
.eshop-sort-select option { color: #14171c; background: #fff; }

/* The sort select and the tiles/list switch used to re-declare an opaque
   fill and re-inject the chevron with !important in both themes. That whole
   block existed to survive redesign.css's old `background` SHORTHAND marked
   !important on every <input>/<select>, which wiped the background-image
   along with the colour. That chain is gone — design-system.css draws the
   fill and the arrow from tokens, in both themes — so all that is left here
   is the accent state. */
.eshop-sort-select.is-active { border-color: var(--primary-color, #20d21a); }
:root[data-theme="light"] .eshop-sort-select option { color: #14171c; background: #fff; }

@media (max-width: 560px) {
    .eshop-topbar { flex-wrap: wrap; }
    .eshop-sort-select { max-width: none; flex: 1 1 auto; }
}
/* Icon pill material from design-system.css; only the active state is local.
   An accent wash layered over the canonical fill, so the switch reads as the
   same control in both states. */
.view-toggle-btn.active {
    color: var(--primary-color, #20d21a);
    border-color: var(--primary-color, #20d21a);
    background: linear-gradient(rgba(32, 210, 26, 0.22), rgba(32, 210, 26, 0.22)), var(--btn-bg);
}

/* ============================================================
   LIST VIEW — one full-width row per product.

        ┌──────────┬──────────────────────┬─────────────────┐
        │          │ Title                │ Расход:  80     │
        │  IMAGE   │                      │ Давление: 350   │
        │          │ ●avail [🛒 price][…] │ Материал: GS500 │
        └──────────┴──────────────────────┴─────────────────┘

   The image sits flush against the card's left edge and is rounded
   on its two left corners only — inherited free from .product-card's
   overflow:hidden + border-radius, with no radius of its own.

   The panel is a 2x2 grid: title over the action row on the left, and
   a technical-data column spanning full height on the right. The specs
   column keeps a fixed width even when a product has no specs, so the
   action rows stay vertically aligned down the whole list.

   Every property that fights a tile rule needs !important: the block
   near "sized to the sidebar link column" re-declares the tile
   geometry with !important on nearly everything.
   ============================================================ */
#eshop-product-list.list-view {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}
#eshop-product-list.list-view .product-card:not(.expanded) {
    width: 100% !important;
    /* Tall enough for the full spec column without clipping: 7 rows
       (flow, pressure, sections, pitch, control, material, weight) at 19px
       plus gaps = 145px, over the panel's 13px top/bottom padding. */
    height: 176px !important;
}
#eshop-product-list.list-view .product-card:not(.expanded) .card-body {
    position: static;
    display: flex;
    flex-direction: row;
    height: 100%;
}

/* ---- Image column: full-bleed, fixed width ---- */
#eshop-product-list.list-view .product-card:not(.expanded) .card-left {
    position: static;
    width: 190px;
    flex: 0 0 190px;
    height: 100%;
}
#eshop-product-list.list-view .product-card:not(.expanded) .product-image {
    height: 100% !important;
    border-bottom: none !important;
}
#eshop-product-list.list-view .product-card:not(.expanded) .product-image img {
    height: 100% !important;
    width: 100%;
    object-fit: cover;
}
/* The photo tint only exists so overlaid tile text stays readable —
   in list view no text sits on the photo. */
#eshop-product-list.list-view .product-card:not(.expanded) .product-image::after {
    display: none !important;
}

/* ---- Panel: title / actions on the left, technical data on the right ---- */
#eshop-product-list.list-view .product-card:not(.expanded) .card-right {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    /* The specs column takes a proper share of the row instead of a fixed
       240px. With a fixed track everything left over piled up in the title
       column, leaving a wide dead band between the buttons and the specs on
       big screens. 44% still leaves the title the larger half. */
    grid-template-columns: minmax(0, 1fr) minmax(240px, 44%);
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "title  specs"
        "footer specs";
    gap: 8px 18px;
    padding: 13px 16px !important;
    background: none;
}

/* Title — plain left-aligned heading, not the tile's frosted chip */
#eshop-product-list.list-view .product-card:not(.expanded) .card-header-independent {
    grid-area: title;
    position: static;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    max-width: none !important;
    min-width: 0;
    padding: 0 !important;
    text-align: left !important;
    background: none !important;
}
#eshop-product-list.list-view .product-card:not(.expanded) .card-header-independent .product-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-main, #E0E0E0) !important;
}
#eshop-product-list.list-view .product-card:not(.expanded) .card-header-independent .product-title a {
    color: inherit !important;
}
:root[data-theme="light"] #eshop-product-list.list-view .product-card:not(.expanded) .card-header-independent .product-title,
:root[data-theme="light"] #eshop-product-list.list-view .product-card:not(.expanded) .card-header-independent .product-title a {
    color: #14171c !important;
}
/* Tag badge ("Схема Галичанин" etc.) — small muted chip under the title */
#eshop-product-list.list-view .product-card:not(.expanded) .card-header-independent > div {
    margin: 3px 0 0 !important;
    padding: 2px 8px !important;
    font-size: 10.5px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    justify-content: flex-start !important;
}
:root[data-theme="light"] #eshop-product-list.list-view .product-card:not(.expanded) .card-header-independent > div {
    background: rgba(0, 0, 0, 0.06) !important;
}

/* ---- Action row: availability + cart + detail + favourite ---- */
#eshop-product-list.list-view .product-card:not(.expanded) .card-footer-section {
    grid-area: footer;
    align-self: end;
    position: static;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 !important;
    border-top: none !important;
    background: none !important;
}
#eshop-product-list.list-view .product-card:not(.expanded) .card-footer-left {
    display: flex !important;
    flex: 0 0 auto;
}
/* The cart button already carries the price (eshop-cardpager.js writes it
   into the button label) — this standalone copy would duplicate it. */
#eshop-product-list.list-view .product-card:not(.expanded) .card-footer-center {
    display: none !important;
}
#eshop-product-list.list-view .product-card:not(.expanded) .card-actions {
    display: flex !important;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}
#eshop-product-list.list-view .product-card:not(.expanded) .detail-btn,
#eshop-product-list.list-view .product-card:not(.expanded) .fav-btn {
    display: inline-flex !important;
}

/* ---- Technical data column ----
   Uses .card-spec-data (Расход/Давление/Материал/Вес): the renderer
   already filters that list to non-empty values, unlike .main-data
   which pads missing fields with an em dash. It ships with the
   `hidden` attribute for the tile's flip-side, so it needs an
   explicit display to come back. */
#eshop-product-list.list-view .product-card:not(.expanded) .card-middle-section {
    grid-area: specs;
    align-self: stretch;
    display: block !important;
    max-height: none;
    overflow: hidden;
    min-width: 0;
    padding-left: 18px;
    border-left: 1px solid rgba(255, 255, 255, 0.09);
}
:root[data-theme="light"] #eshop-product-list.list-view .product-card:not(.expanded) .card-middle-section {
    border-left-color: rgba(0, 0, 0, 0.12);
}
#eshop-product-list.list-view .product-card:not(.expanded) .card-middle-section .main-data,
#eshop-product-list.list-view .product-card:not(.expanded) .card-middle-section .card-tech-section {
    display: none !important;
}
/* Specs flow into as many ~250px columns as the (now wider) track allows —
   two on a desktop row, one when it narrows. Without this the list just
   grew a taller single column and the extra width stayed empty. */
#eshop-product-list.list-view .product-card:not(.expanded) .card-spec-data[hidden] {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
    align-content: start;
    gap: 2px 24px;
}
#eshop-product-list.list-view .product-card:not(.expanded) .card-spec-data .data-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    line-height: 1.45;
}
#eshop-product-list.list-view .product-card:not(.expanded) .card-spec-data .data-label {
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    font-weight: 500;
    flex: 0 0 auto;
}
/* Long values (e.g. "Электрогидравлический") ellipsise instead of spilling
   past the column edge; the full text is on the element's title. */
#eshop-product-list.list-view .product-card:not(.expanded) .card-spec-data .data-value {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#eshop-product-list.list-view .product-card:not(.expanded) .card-spec-data .data-value {
    color: var(--text-main, #E0E0E0);
    font-weight: 600;
    text-align: right;
}
/* In light mode the theme flips --text-muted to a dark tone but leaves
   --text-main light, so the value would turn near-white against a light
   card while its label went dark. Pin it, same workaround the tile uses. */
:root[data-theme="light"] #eshop-product-list.list-view .product-card:not(.expanded) .card-spec-data .data-value {
    color: #14171c;
}

/* UNA code stays pinned over the image as a caption; the corner
   availability dot would duplicate the chip now shown in the action row. */
#eshop-product-list.list-view .product-card:not(.expanded) .card-corner-badges {
    max-width: 170px;
}
#eshop-product-list.list-view .product-card:not(.expanded) .card-corner-badges .cc-avail {
    display: none !important;
}

/* ============================================================
   LIST VIEW — narrow screens. Below ~900px there is no room for a
   190px photo, an action row and a specs column side by side, so the
   photo goes on top and the specs drop under the actions. Must
   out-specify the tile grid's own <900px rule (`html body` +
   !important).
   ============================================================ */
@media (max-width: 900px) {
    html body #eshop-product-list.list-view .product-card:not(.expanded) {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
    }
    #eshop-product-list.list-view .product-card:not(.expanded) .card-body {
        flex-direction: column;
    }
    #eshop-product-list.list-view .product-card:not(.expanded) .card-left {
        width: 100%;
        flex: 0 0 auto;
    }
    #eshop-product-list.list-view .product-card:not(.expanded) .product-image {
        height: 170px !important;
    }
    #eshop-product-list.list-view .product-card:not(.expanded) .card-right {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "title"
            "specs"
            "footer";
        gap: 10px;
    }
    #eshop-product-list.list-view .product-card:not(.expanded) .card-middle-section {
        padding-left: 0;
        padding-top: 10px;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.09);
    }
    :root[data-theme="light"] #eshop-product-list.list-view .product-card:not(.expanded) .card-middle-section {
        border-top-color: rgba(0, 0, 0, 0.12);
    }
    #eshop-product-list.list-view .product-card:not(.expanded) .card-spec-data[hidden] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2px 16px;
    }
    #eshop-product-list.list-view .product-card:not(.expanded) .card-spec-data .data-row {
        justify-content: flex-start;
        gap: 5px;
    }
}