/* --- CATALOGUE COMPONENT SETTINGS --- */
:root {
    --fs-title: 28px;
    --fs-category: 14px;
    --fs-product-title: 18px;
    --fs-details: 14px;
    --fs-tags: 12px;
    --radius-item: 8px;
    --radius-card: 16px;
    --pad-nav-x: 6px;
    --indent-step: 12px;
    --dot-color: rgba(224, 224, 224, 0.2);
    --tag-bg: rgba(255, 255, 255, 0.1);
}

/* --- 2. LAYOUT STYLES --- */
* { box-sizing: border-box; }

.catalog-wrapper {
    width: 100%;
    box-sizing: border-box;
    padding: var(--block-padding, 30px);
    position: relative;
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    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: 15px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4);
}

.catalog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid transparent;
    padding-left: 15px;
    padding-right: 15px;
}

.catalog-header h2 {
    margin: 0;
    font-size: var(--fs-title);
    font-weight: 700;
}

.catalog-search-box {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 6px 14px;
    width: 300px;
    transition: border-color 0.2s;
}
.catalog-search-box:focus-within { border-color: var(--primary-color); }
.catalog-search-box input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: var(--text-color) !important;
    font-size: 14px; font-family: inherit; outline: none; width: 100%; padding: 4px 0;
}
.catalog-search-box input::placeholder { color: rgba(224, 224, 224, 0.5); }
.catalog-search-box svg { color: var(--secondary-color); margin-left: 8px; flex-shrink: 0; }

.catalog-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- 2b. CATEGORIES MINI TILES GRID --- */
.catalog-levels-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.catalog-level {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

/* Tile material and geometry come from design-system.css.
   `.sub-level` below is NOT a tile — it is a breadcrumb chip, and is
   excluded from the tile chain there. */

.catalog-cat-tile.sub-level {
    height: 35px;
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px 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 0px 0px rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    padding: 6px 12px;
}
.catalog-cat-tile.sub-level span {
    font-size: 12px;
    text-shadow: none;
    color: var(--body-text-color, #E0E0E0);
}




/* --- 3. BREADCRUMB NAVIGATION STYLES --- */
.catalog-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    border-radius: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px 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 0px 0px rgba(0, 0, 0, 0.4);
    gap: 2px;
    min-height: 0;
}

.menu-item-row {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    -webkit-user-select: none;
    user-select: none;
    font-size: 12px;
    color: var(--text-color, #E0E0E0);
}

/* Fluid Glass Hover Effect */
.menu-item-row:hover, .menu-item-row.active {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--primary-color);
}

.menu-item-row.active .menu-title { font-weight: 700; color: var(--primary-color); }
.menu-item-row:hover .menu-title { color: var(--primary-color); }

.menu-title {
    font-size: 12px;
    transition: color 0.2s ease;
}

.menu-arrow {
    font-size: 12px;
    color: var(--secondary-color);
    margin: 0 6px;
    opacity: 0.5;
}

.menu-up-button {
    padding: 2px 8px;
    font-size: 13px;
    font-weight: bold;
}

.menu-children { display: none; }

/* --- 4. RIGHT PRODUCTS STYLES --- */
.catalog-products {
    flex: 1;
    min-width: 0;
    padding: 0;
}

.section-title { display: none; }

.products-list { display: flex; flex-direction: column; gap: 16px; }

.product-card {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.04);
    animation: fadeIn 0.35s ease;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.product-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: color-mix(in srgb, var(--primary-color, #20d21a) 35%, transparent);
    border-top-color: color-mix(in srgb, var(--primary-color, #20d21a) 50%, transparent);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

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

.product-image-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 160px;
    flex-shrink: 0;
}

.product-image {
    width: 100%;
    height: 140px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(224, 224, 224, 0.1);
    object-fit: contain;
    flex-shrink: 0;
}

.product-availability {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.2px;
}
.product-availability.in-stock {
    background: rgba(32, 210, 26, 0.12);
    border: 1px solid rgba(32, 210, 26, 0.3);
    color: var(--primary-color, #20d21a);
    box-shadow: 0 0 8px rgba(32, 210, 26, 0.15);
}
.product-availability.to-order {
    background: rgba(255, 159, 10, 0.10);
    border: 1px solid rgba(255, 159, 10, 0.3);
    color: #ff9f0a; /* on-order status is orange */
}

.product-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--body-text-color, #E0E0E0);
    text-align: center;
}

.product-basket-area {
    display: flex;
    flex-direction: column;
}

.qty-inline {
    display: none;
    align-items: center;
    gap: 4px;
    width: 100%;
}
.qty-inline.open {
    display: flex;
}

/* Stepper buttons and the value between them: material (glass, radius,
   focus) comes from design-system.css; only the row layout is local. */
.qty-input {
    flex: 1;
    min-width: 0;
}

.qty-confirm { color: var(--primary-color, #20d21a); }

.product-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 6px;
}

.product-footer-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: auto;
    padding-top: 10px;
}

.product-footer-row > * {
    min-width: 0;
}

/* Pill material from design-system.css. Only the accent colour differs. */
.product-btn.catalogue-btn,
.product-btn.catalogue-btn:hover {
    color: var(--primary-color, #20d21a);
}

.product-name {
    font-size: var(--fs-product-title);
    font-weight: 700;
    margin: 0;
}

.product-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.product-code {
    font-family: monospace;
    font-size: 13px;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--primary-color);
    white-space: nowrap;
    flex-shrink: 0;
}

.product-desc {
    font-size: 13px;
    color: var(--secondary-color);
    margin: 0 0 8px;
    line-height: 1.4;
}

.product-app {
    font-size: 13px;
    color: var(--secondary-color);
    margin: 0 0 10px;
    line-height: 1.4;
}

.product-specs {
    margin-top: 8px;
    margin-bottom: 4px;
}

/* Dotted Grid Layout */
.param-row {
    display: flex;
    align-items: baseline;
    width: 100%;
    margin-bottom: 6px;
    font-size: var(--fs-details);
}

.param-name { font-weight: 700; padding-right: 8px; flex-shrink: 0; }
.param-dot-line {
    flex-grow: 1;
    border-bottom: 2px dotted var(--dot-color);
    position: relative;
    top: -4px;
}
.param-value { color: var(--secondary-color); padding-left: 8px; text-align: right; }

.product-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.tag {
    font-size: var(--fs-tags);
    background: var(--tag-bg);
    color: var(--secondary-color);
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
}
.flex-spacer { flex-grow: 1; }

/* Drawing Link */
.drawing-link {
    margin-top: 12px;
}


/* Product Footer with Stock, Price, and Basket Button */
.product-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.stock-info {
    font-size: 13px;
    color: var(--secondary-color);
}
.stock-value {
    color: var(--primary-color, #20d21a);
    font-weight: 600;
}
.price-info {
    font-size: 13px;
    color: var(--secondary-color);
}
.price-value {
    color: var(--text-color, #E0E0E0);
    font-weight: 600;
    font-size: 16px;
}
/* Pill material from design-system.css; this only pins it to the right
   edge of the product footer. */
.add-to-basket-btn {
    margin-left: auto;
}

.basket-actions {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.price-display {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color, #E0E0E0);
    text-align: right;
}

.basket-status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: column;
}

.basket-status-text {
    font-size: 13px;
    color: var(--secondary-color);
}

.basket-status-count {
    color: var(--primary-color, #20d21a);
    font-weight: 700;
    font-size: 14px;
}



/* Quantity Dialog */
.quantity-dialog {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    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: 16px;
    padding: 20px;
    min-width: 280px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
}

.quantity-dialog.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.quantity-dialog-title {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color, #E0E0E0);
}

.quantity-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

/* Stepper material from design-system.css; the dialog only fixes width. */
.quantity-input {
    width: 60px;
}

.quantity-dialog-actions {
    display: flex;
    gap: 8px;
}

/* Pill material from design-system.css; the two share the dialog row. */
.quantity-dialog-btn { flex: 1; }
.quantity-dialog-btn.confirm { color: var(--primary-color, #20d21a); }

/* --- CATEGORY GRID CARDS ---
   Tile material and geometry come from design-system.css. */
.category-card h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color, #E0E0E0);
}
.category-card .card-type {
    font-size: 12px;
    color: var(--primary-color, #20d21a);
    font-weight: 500;
    opacity: 0.85;
}
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .catalog-header { flex-direction: column; align-items: stretch; gap: 16px; }
    .catalog-search-box { width: 100%; }
    .catalog-menu { padding: 8px 12px; gap: 4px; }
    .menu-item-row { padding: 4px 8px; font-size: 12px; }
    .menu-arrow { margin: 0 4px; }
    .product-card { flex-direction: column; align-items: stretch; }
    .card-left { width: 100%; height: 200px; }
    .product-image { width: 100%; height: 200px; border-radius: 15px 15px 0 0; }
    .card-right { padding: 12px; }
}
/* ============================================================
   HOME CATALOGUE — sidebar + carousel/subcategory stage
   ============================================================ */
.home-catalogue-row {
    display: flex;
    gap: 20px;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    align-items: flex-start;
}

/* Category sidebar (copy of eshop sidebar, no filters) */
.cat-sidebar {
    width: 220px;
    flex-shrink: 0;
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top-color: rgba(255, 255, 255, 0.18);
    border-radius: 15px;
    overflow: hidden;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}
.cat-sidebar-title {
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted, rgba(224, 224, 224, 0.55));
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cat-sidebar .sidebar-nav-buttons { padding: 6px; gap: 2px; }
.cat-sidebar .sidebar-nav-btn {
    height: 38px;
    border-radius: 8px;
    border-bottom: none;
}
.cat-sidebar-loading,
.cat-sidebar-empty {
    padding: 18px 14px;
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

/* Stage: carousel (default) → subcategory tiles on category click */
.home-stage {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}
.home-stage #carousel-section {
    width: 100%;
    overflow: hidden;
    max-height: var(--block-height, 600px);
    opacity: 1;
    transform: translateY(0);
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s ease;
}
/* Category selected → carousel slides up and disappears */
.home-stage.cat-open #carousel-section {
    max-height: 0;
    transform: translateY(-48px);
    opacity: 0;
    pointer-events: none;
}

/* Zero-height helper blocks still receive the parent flex column's 20px
   gap; pull them up so unused helpers don't inflate section spacing */
.subcat-panel:not(.panel-open),
#catalogue-block:empty {
    margin-top: -20px !important;
}

.subcat-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-30px);
    transition: max-height 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.5s ease-out,
                transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Full viewport breakout with infinite edges */
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    background: linear-gradient(rgba(6, 10, 16, 0.24), rgba(6, 10, 16, 0.24)), var(--underground-texture, url('images/canvas-dark-blue-200.png')) top center / 200px 200px repeat, rgba(var(--footer-bg-rgb, 16, 21, 31), var(--footer-bg-opacity, 1)) !important;
    /* The texture is opaque — blend it, or it fully hides the configured colour beneath it. */
    background-blend-mode: normal, soft-light, normal !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}
.subcat-panel.panel-open {
    max-height: 5000px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 0px !important; /* No gap! */
    padding-bottom: 24px;
}

.subcat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.subcat-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}
.subcat-close {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top-color: rgba(255, 255, 255, 0.22);
    color: var(--text-muted, rgba(224, 224, 224, 0.7));
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.subcat-close:hover {
    color: var(--primary-color, #20d21a);
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.14);
}

/* Subcategory tiles — 200×200 with picture inside */
.subcat-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 240px)) !important;
    justify-content: center !important;
    gap: 16px !important;
}
/* Subcategory tiles are .cat-tile with a different caption block;
   see design-system.css. */
.subcat-crumb-sep { color: var(--text-muted, rgba(224, 224, 224, 0.45)); margin: 0 2px; font-weight: 400; }

@media (max-width: 768px) {
    .home-catalogue-row { flex-direction: column; }
    .cat-sidebar { width: 100%; }
    .subcat-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* Subcategories aligned to the right in the home catalogue sidebar */
.cat-sidebar .sidebar-submenu-btn {
    text-align: right;
    padding-left: 14px;
    padding-right: 14px;
}

/* ============================================================
   CAROUSEL — full-width overrides for home page
   ============================================================ */
#tab-overview .carousel-control {
    display: none !important;
}

#tab-overview .home-stage {
    width: 100%;
    max-width: 100%;
}

#tab-overview #carousel-section {
    width: 100%;
    overflow: hidden;
    /* No more +56px reserve here — that was clip headroom for the
       carousel's drop shadow/reflection, both removed. */
    max-height: 420px;
    opacity: 1;
    transform: translateY(0);
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s ease;
}
/* Category selected → carousel slides up and disappears. Needs the
   #tab-overview prefix to actually outrank the rule above (both are
   2-ID selectors; source order alone wouldn't be reliable here). */
#tab-overview .home-stage.cat-open #carousel-section {
    max-height: 0;
    transform: translateY(-48px);
    opacity: 0;
    pointer-events: none;
}

/* Shrink carousel container itself to 70% of original 600px and strip glass styles */
#tab-overview .carousel-container {
    height: 420px !important;
    min-height: 420px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
#tab-overview .home-stage {
    margin-bottom: 0;
}

/* ============================================================
   CATALOGUE TILES BLOCK — category & subcategory tile grid
   ============================================================ */
#catalogue-tiles-block {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Keep #tab-overview's 20px flex gap (this used to be -20px, which
       pulled the tiles flush against the carousel) and add the same 4px
       the Решения/Техника sections carry, so all three tile rows sit at
       the same 24px rhythm below whatever precedes them. */
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    position: static !important;
    overflow: visible !important;
}
.subcat-panels-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    overflow: visible !important;
}

.cat-tiles-title {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-muted, rgba(224, 224, 224, 0.55));
    margin: 0 0 10px 4px;
    text-shadow: var(--panel-title-shadow);
}

.cat-tile-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}
/* Rows are always 6-up or 3+3 — never a lone tile on its own line. Below
   1024px six tiles get too narrow for their labels, so the grid halves. The
   tools row (3 tools + 3 fillers) is then exactly one row, so its fillers go. */
/* «Гидрораспределители» alone needs a ~210px tile, more than a 6-up row gives
   below ~1360px; without this it snaps at an arbitrary letter. Hyphenation
   follows <html lang>, which navbar.js keeps in step with the language. */
.cat-tile-grid .cat-tile-label { hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 1024px) {
    .cat-tile-grid { grid-template-columns: repeat(3, 1fr); }
    html body .tools-grid .cat-tile.blank-tile { display: none; }
}

/* Tile material, geometry, gloss, sweep, hover hop, caption block and
   light-theme flip all come from design-system.css — .cat-tile is the
   reference the rest of the tile family is built from. */

/* Expand panel spans the whole row; hidden until its tile is opened */
/* Ground-shift opening: the page splits and the lower part slides down,
   revealing the underground layer. Panel content is anchored to the top
   (static relative to the page above, as if it was always lying beneath),
   and both split edges cast inset shadows onto the underground — a strong
   top lip (the standing upper plate) and a softer bottom lip (the
   receding lower plate). */
.subcat-expand-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s ease-out,
                margin 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 0;
    margin-bottom: 0;

    /* Full viewport breakout with infinite edges */
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    background: linear-gradient(rgba(6, 10, 16, 0.24), rgba(6, 10, 16, 0.24)), var(--underground-texture, url('images/canvas-dark-blue-200.png')) top center / 200px 200px repeat, rgba(var(--footer-bg-rgb, 16, 21, 31), var(--footer-bg-opacity, 1)) !important;
    /* The texture is opaque — blend it, or it fully hides the configured colour beneath it. */
    background-blend-mode: normal, soft-light, normal !important;
    box-sizing: border-box !important;
    /* Top lip only — marks where the panel drops down from the tile row
       above; the bottom lip was removed, it read as a harsh dark bar
       before the next section. */
    box-shadow: inset 0 12px 24px -5px rgba(0, 0, 0, 0.95) !important;
}
.subcat-expand-panel.open {
    max-height: 500px;
    opacity: 1;
    /* Equal breathing room above and below — matches the 12px tile gap */
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}
.subcat-expand-panel.open.has-comparison,
/* A components menu is columns, not a chip row — well past the 500px cap. */
.subcat-expand-panel.open.has-components {
    max-height: 5000px; /* Seamless vertical expansion for the same layer */
}

/* Centered content block inside the infinite layer */
.subcat-expand-inner {
    padding: 18px 24px;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: var(--max-width, 1200px);
    margin: 0 auto !important;
    box-sizing: border-box;
}

.subcat-expand-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary-color, #20d21a);
    margin: 0 0 14px 2px;
}

.subcat-tile-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 12px !important;              /* same gap as the category tile grid */
    padding: 12px 4px !important;      /* equal spacing above and below the row */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: safe center !important;
}
.subcat-tile-grid::-webkit-scrollbar {
    display: none !important;
}

.subcat-tile-item:hover .subcat-tile-label {
    color: var(--primary-color, #20d21a);
    text-shadow: 0 0 14px currentColor;
}

.subcat-tile-label {
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

/* ============================================================
   SOLUTION COMPONENTS — the menu under an application tile in «Решения»

   One column per component: picture, product name, the general function it
   is responsible for, its parameters, and a search pill pinned to the foot
   of the column. Content comes from the CRM (solutions.js renders it); the
   card material and gloss come from design-system.css, so only footprint
   and stacking are here.

   Same row mechanics as .subcat-tile-grid directly above it: one line, no
   wrap, scrolled sideways when it overflows and centred when it does not.
   ============================================================ */
.sol-comp-host:empty { display: none; }

/* The row it labels is centred, so the label is too — left-aligned it reads
   as belonging to the panel's edge rather than to the columns. */
.sol-comp-host .subcat-expand-title {
    text-align: center;
    margin-left: 0;
}

.sol-comp-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    padding: 12px 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* `safe` so a row wider than the panel still starts at its left edge
       instead of overflowing past it on both sides. */
    justify-content: safe center;
    align-items: stretch;
}
.sol-comp-grid::-webkit-scrollbar { display: none; }

/* 276px is the ceiling for four columns: .subcat-expand-inner is capped at
   1200px and spends 24px a side on padding, the grid another 4px, leaving
   1144px — 4×276 + 3×12 = 1140. Anything wider turns the row into a
   sideways scroller at the width most people read the page at, so the extra
   presence past this point comes from padding, not from more width. */
.sol-comp-card {
    flex: 0 0 276px;
    max-width: 276px;
    box-sizing: border-box;
    /* padding is in design-system.css with the rest of this variant's
       geometry — the shared tile rule's `padding: 0` outranks this file. */
}

/* The picture gets its own frame and sits inside it with room to spare —
   product shots are cut-outs on white, and letting one run to the edges of
   the card made it read as a background rather than as an object. */
.sol-comp-media {
    position: relative;
    z-index: 1;
    height: 168px;
    margin-bottom: 14px;
    padding: 10px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.22);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
    box-sizing: border-box;
}
.sol-comp-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Above the card's gloss layer, which is z-index 2 and covers the top half */
.sol-comp-body {
    position: relative;
    z-index: 3;
    /* Takes the slack, so the search pill below is pushed to the foot of
       every column no matter how many parameters each one carries. */
    flex: 1 1 auto;
}

.sol-comp-name {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
    overflow-wrap: break-word;
    /* Two lines' worth whether the name needs them or not, so the function
       line and the параметры start at the same height in every column. */
    min-height: 2.5em;
}
.sol-comp-function {
    margin-bottom: 14px;
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--primary-color, #20d21a);
}

.sol-comp-params {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
}
.sol-comp-param {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.sol-comp-param dt {
    color: rgba(255, 255, 255, 0.55);
    flex: 0 1 auto;
}
.sol-comp-param dd {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    text-align: right;
    flex: 0 1 auto;
}

/* A параметр row comes in two kinds, and they must not look alike:

   — a SPEC is one fixed fact about the product, and reads as a right-aligned
     value against its label, like a datasheet line;
   — an OPTION is a set the customer picks from, and reads as chips under the
     label. Boxed, evenly weighted, wrapping onto as many lines as it needs —
     the shape says "choose one of these" before a word is read.

   Chips are deliberately inert: nothing on this card is clickable except the
   search pill at its foot, so they carry no hover or cursor change. */
.sol-comp-param.is-option {
    display: block;
}
.sol-comp-param.is-option dt {
    display: block;
    margin-bottom: 5px;
}
.sol-comp-param.is-option dd {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    text-align: left;
}
.sol-comp-chip {
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    white-space: nowrap;
}

/* --- "Подробнее": the caption, the opener, and the band it opens --------

   Two elements, not one. The caption sits in the flow so it takes up space
   like any other line in the column; the opener is a transparent overlay
   stretched over the card on top of it. Merging them put an absolutely
   positioned caption over the last параметр row on the taller cards.

   The overlay is also a SIBLING of the search pill rather than a wrapper
   around it: a link inside a button is invalid and unreachable by keyboard.
   Two siblings, two jobs, and the overlay stops short of the pill so both
   stay clickable.

   The scoped reset is the one style.css's bare `button` rule forces on every
   non-pill button (44px, nowrap, glass fill); `html body` outranks both that
   and the Livematrix preflight without !important. */
.sol-comp-more {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
    /* The overlay above it takes every click. */
    pointer-events: none;
    transition: color 0.2s ease;
}
.sol-comp-more svg { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.sol-comp-card:has(.sol-comp-open:hover) .sol-comp-more,
.sol-comp-card.active .sol-comp-more { color: var(--primary-color, #20d21a); }
.sol-comp-card.active .sol-comp-more svg { transform: rotate(180deg); }

html body .sol-comp-open {
    position: absolute;
    /* Covers the whole card. It does not need to dodge the search pill: the
       pill is positioned at z-index 5, paints above this, and so takes its
       own clicks. Carving a gap by height instead would have to be re-tuned
       every time the column's foot changes. */
    inset: 0;
    z-index: 4;
    height: auto;
    min-height: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--tile-radius);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    cursor: pointer;
}
html body .sol-comp-open:hover,
html body .sol-comp-open:active {
    background: none;
    box-shadow: none;
    transform: none;
}
.sol-comp-search { z-index: 5; }

/* --- Expanded state -----------------------------------------------------

   The card grows to the full width of the row and the row wraps around it,
   so the other components stay on screen and the one being read keeps its
   place in the set. The grid only switches to wrap while something is open;
   closed, it is the same single-line scroller as the chips row above it. */
.sol-comp-grid.has-expanded {
    flex-wrap: wrap;
    overflow-x: visible;
}
/* While the cards are playing back from their old positions they are
   translated outside the grid's box; the scroller would clip them. Set for
   the length of the animation only — the closed grid keeps its overflow so
   a long row still scrolls. */
.sol-comp-grid.is-animating {
    overflow: visible;
}

html body .sol-comp-card.is-expanded {
    flex: 1 1 100%;
    max-width: 100%;
    /* Above the neighbours for the length of the FLIP: they start out
       translated over the space this card is taking, and sliding them out
       from BEHIND it reads as the card growing. On top, they cross over its
       description for a few frames and the whole thing looks like a
       collision. */
    z-index: 2;
    /* A little more room than the column: the card is now the width of the
       row and 18px reads tight against that much content. The edge needs no
       rule here — the card also carries .active, and the shared tile rule
       already swaps the resting stroke for the accent one. */
    padding: 22px;
}

.sol-comp-expanded {
    display: flex;
    gap: 24px;
    width: 100%;
}
.sol-comp-expanded .sol-comp-body {
    flex: 1 1 auto;
    min-width: 0;
    /* Clear of the × in the corner. */
    padding-right: 44px;
}
/* The two-line reserve exists to line up four columns; alone on a row it
   just adds a gap under a one-line name. */
.sol-comp-expanded .sol-comp-name {
    min-height: 0;
    font-size: 21px;
}
.sol-comp-media.is-large {
    flex: 0 0 340px;
    height: 280px;
    margin-bottom: 0;
}

.sol-comp-text {
    margin: 14px 0 18px;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    /* The one place in this section with room for prose — hold it to a
       readable measure instead of letting it run the full 1100px. */
    max-width: 68ch;
}
.sol-comp-text p { margin: 0 0 10px; }
.sol-comp-text p:last-child { margin-bottom: 0; }

/* Two columns of параметр rows: the expanded card has four times the width
   of a compact one, and one column of them would leave the right half bare. */
.sol-comp-params.is-wide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0 28px;
    max-width: 820px;
}

.sol-comp-expanded-foot {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.sol-comp-expanded-foot .sol-comp-search { width: auto; min-width: 230px; margin-top: 0; }
.sol-comp-collapse { position: absolute; top: 16px; right: 16px; z-index: 3; }


@media (max-width: 860px) {
    .sol-comp-expanded { flex-direction: column; gap: 16px; }
    .sol-comp-media.is-large { flex: 0 0 auto; height: 220px; }
    .sol-comp-expanded .sol-comp-body { padding-right: 0; }
}

/* The pill itself is design-system.css's .btn.btn-sm; only its footprint
   in the column is set here. */
.sol-comp-search {
    position: relative;
    z-index: 3;
    width: 100%;
    margin-top: 14px;
}

@media (max-width: 768px) {
    .sol-comp-card { flex-basis: 240px; max-width: 240px; }
    .sol-comp-media { height: 140px; }
}

/* Next sublevel (comparison / models panel) underground look */
.subcat-panel .comparison-wrapper,
.subcat-panel .subcat-grid {
    background: linear-gradient(rgba(6, 10, 16, 0.24), rgba(6, 10, 16, 0.24)), var(--underground-texture, url('images/canvas-dark-blue-200.png')) top center / 200px 200px repeat, rgba(var(--footer-bg-rgb, 16, 21, 31), var(--footer-bg-opacity, 1)) !important;
    /* The texture is opaque — blend it, or it fully hides the configured colour beneath it. */
    background-blend-mode: normal, soft-light, normal !important;
    border: none !important;
    border-radius: 14px !important;
    /* Top lip only, same reasoning as .subcat-expand-panel above */
    box-shadow: inset 0 6px 18px rgba(0, 0, 0, 0.6) !important;
}

/* The underground layer (expand panels, subcat tiles, deeper panels)
   keeps its DARK style in every theme — no light overrides. */
:root[data-theme="light"] .cat-tiles-title {
    color: rgba(0, 0, 0, 0.45);
}

@media (max-width: 768px) {
    .cat-tile-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .subcat-tile-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
    #tab-overview .carousel-container {
        height: 300px !important;
        min-height: 300px !important;
    }
    #tab-overview #carousel-section {
        max-height: 300px;
    }
}


/* ============================================================
   ABOUT TAB — content rows (populated by about.js).
   Text colours follow the theme (cfgr text controls apply).
   ============================================================ */
#about-block { padding: 26px 30px; }
.about-rows { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.about-row { max-width: 820px; text-align: center; }
.about-row-title {
    font-size: 17px;
    font-weight: 400;
    margin: 0 0 8px;
    color: var(--body-text-color, #E0E0E0);
}
.about-row-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--text-color, rgba(224, 224, 224, 0.85));
}

/* ============================================================
   КОНФИГУРАТОР tab.
   The tab shows the product configurator (configurator.css/.js).
   The four calculator blocks are parked in this tab's markup but
   stay hidden here — the home "Расчет параметров" tile moves them
   into #converter-panel-host when it is opened.
   ============================================================ */
#tab-converter > .calc-section { display: none; }

/* КАТАЛОГ tab (2026-10-26): the tab keeps converter.css's flex row, so every
   block except the calculators takes a full row. Order: toolbar, the
   calculators when «Расчет параметров» is on, then the catalogue tiles,
   comparison sheet and the configurator. */
#tab-converter > .catalogue-toolbar,
#tab-converter > #catalogue-tiles-block,
#tab-converter > #subcat-panel,
#tab-converter > #catalogue-block,
#tab-converter > #configuratorContainer {
    flex: 1 1 100%;
    min-width: 0;
}
#tab-converter > .catalogue-toolbar {
    order: -3;
    display: flex;
    justify-content: flex-end;
    margin-bottom: -40px;   /* sits on the «Каталог» title row below it */
    position: relative;
    z-index: 2;
    pointer-events: none;
}
#tab-converter > .catalogue-toolbar > * { pointer-events: auto; }
.catalogue-calc-btn { display: inline-flex; align-items: center; gap: 8px; }
#tab-converter.show-calc > .catalogue-toolbar { margin-bottom: 0; }
#tab-converter.show-calc > .calc-section { display: flex; order: -2; }
#tab-converter > #configuratorContainer:empty { display: none; }

/* Home page: the shop sits under the category tiles. */
#tab-overview > #tab-catalogue.home-shop {
    display: flex;
    flex-direction: column;
    gap: 20px;      /* what it had as a .tab-panel */
    width: 100%;
    scroll-margin-top: 80px;   /* #eshop links land below the fixed navbar */
}
.dev-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    min-height: 340px;
    padding: 60px 24px;
    color: var(--body-text-color, #E0E0E0);
}
.dev-placeholder svg { color: var(--text-muted, rgba(255, 255, 255, 0.45)); }
.dev-placeholder-title { font-size: 20px; font-weight: 400; margin: 0; }
.dev-placeholder-text {
    font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0;
    max-width: 460px; color: var(--text-muted, rgba(255, 255, 255, 0.6));
}