/* Catalogue / item page styling — clean product-grid look, independent of
   the homepage's dark theme (see .content-page overrides in header.php). */

/* Brand color variables used to live here, but this file is only loaded on
   public pages — admin/includes/header.php never linked it, so anything in
   the Tailwind shim (assets/css/tailwind-src.css) referencing var(--brand-*)
   silently resolved to nothing (transparent) on every admin page. Moved to
   tailwind-src.css's own `@layer base`, which both public and admin pages
   load, so there's exactly one definition again instead of two that could
   drift apart. */

/* Nav utility bar (prst.ru-style): a slim contact-info strip above the main
   nav row. No independent background — it inherits whatever .navbar-custom
   is doing (transparent over the hero / solid black elsewhere), see
   header.php's $transparentNav logic, so it stays correct on every page. */
.navbar-topbar { border-bottom: 1px solid rgba(255,255,255,.12); padding: 6px 0; }
.navbar-topbar-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.navbar-topbar-tagline { font-size: 11px; color: #bbb; text-transform: none; letter-spacing: normal; }
.navbar-topbar-contacts a { font-size: 11px; color: #bbb !important; text-decoration: none; margin-left: 16px; text-transform: none; }
.navbar-topbar-contacts a:first-child { margin-left: 0; }
.navbar-topbar-contacts a:hover { color: var(--brand-gold) !important; }
.navbar-topbar .fa { color: var(--brand-gold); margin-right: 4px; }
@media (max-width: 767px) { .navbar-topbar-tagline { display: none; } }

/* Catalog mega-menu (prst.ru/kipservis.ru/smart-shop.pro-style): the
   "КАТАЛОГ" nav item opens a wide multi-column panel of grouped categories
   instead of linking straight to the overview page. Bootstrap's dropdown.js
   (already loaded, same click-toggle pattern as admin/includes/header.php)
   handles it on mobile inside the collapsed hamburger menu; on desktop
   widths a plain :hover rule opens it instantly, which is what visitors
   actually expect from a mega-menu (Bootstrap's own toggle only fires on
   click, which reads as sluggish for this). Both can be open at once
   harmlessly — either condition just sets the same display:block. */
/* Qualified with .navbar-nav > li (0,2,1) instead of the bare class (0,1,0)
   because Bootstrap's own ".nav > li { position: relative }" (0,1,1) would
   otherwise win and re-anchor .mega-menu's left:0/right:0 to this ~100px-wide
   <li> instead of the full-width positioned ancestor — see the identical
   .navbar-custom a specificity gotcha already hit elsewhere in this project. */
.navbar-nav > li.mega-dropdown { position: static; }
.mega-menu {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--brand-dark);
    border: 0;
    border-top: 2px solid var(--brand-gold);
    border-radius: 0;
    box-shadow: 0 12px 24px rgba(0,0,0,.3);
}
@media (min-width: 768px) {
    /* display can't be transitioned, so at desktop widths the panel stays
       display:block permanently (position:absolute already takes it out of
       flow, so this doesn't add page height) and open/closed state lives in
       opacity/transform instead, giving the close a fade+slide-up instead
       of an instant snap. visibility+pointer-events keep it out of the tab
       order and unclickable while faded out; visibility's own transition is
       delayed so it only flips to hidden *after* the fade finishes, but
       flips to visible instantly on open. Mobile (<768px) is untouched —
       still the plain display:none/Bootstrap's .open > .dropdown-menu
       toggle for the collapsed hamburger menu, no animation needed there. */
    .mega-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px);
        transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    }
    /* .mega-dropdown:hover: instant open the moment the cursor enters the
       trigger <li>. .mega-menu--open: JS-toggled with a short close-delay
       (see includes/header.php) so the fade-out doesn't start until the
       cursor has actually left both the <li> and the panel — without it,
       plain :hover would begin closing the instant the cursor crosses the
       gap between the <li>'s small box and the panel's own (see the
       position:static comment above for why that gap exists). */
    .mega-dropdown:hover .mega-menu,
    .mega-menu.mega-menu--open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
    }
}
/* Compactness: previously flex:1 1 180px + 24px gaps fit ~5 columns per
   1170px row, so 8 category groups wrapped to 2 rows, and the tallest
   single column (11 items at 13px/8px-margin-per-line) alone ran to
   roughly 300px — combined with the second row's own tallest column, the
   panel could approach 700px+, reading as "takes over the whole page".
   Narrower columns (160px) fit 6-7 per row instead of ~5, and a capped
   max-height + scroll on just the column grid (not the "Весь каталог"
   footer, which stays pinned below it, always reachable without
   scrolling) is a hard ceiling that holds regardless of how many
   categories/items get added later — tightened spacing alone can't
   guarantee that the way an explicit cap does. */
.mega-menu-inner {
    max-width: 1170px;
    margin: 0 auto;
    padding: 20px 15px 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 20px;
    max-height: min(75vh, 700px);
    overflow-y: auto;
}
.mega-menu-col { flex: 1 1 160px; min-width: 160px; }
.mega-menu-col h4 {
    color: var(--brand-gold);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,.15);
}
.mega-menu-col ul { list-style: none; margin: 0; padding: 0; }
.mega-menu-col li { margin-bottom: 4px; }
.mega-menu-col a { color: #ccc; font-size: 12.5px; line-height: 1.5; text-decoration: none; transition: color .15s ease; }
.mega-menu-col a:hover { color: var(--brand-gold); }
.mega-menu-footer {
    max-width: 1170px;
    margin: 0 auto;
    padding: 16px 15px 22px;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,.1);
}
/* Inside the collapsed mobile menu the panel is a normal in-flow block
   (Bootstrap's .navbar-collapse), not an absolutely-positioned overlay —
   and columns stack single-file rather than wrapping side by side. */
@media (max-width: 767px) {
    .mega-menu { position: static; box-shadow: none; }
    /* max-height/overflow-y from the base rule are desktop-panel-only
       concerns (this dropdown is absolutely positioned there, overlaying
       the page) — here the menu is a normal in-flow block inside the
       already-scrollable mobile nav collapse, so a nested inner scrollbar
       would just be an awkward extra scroll surface. */
    .mega-menu-inner { flex-direction: column; gap: 18px; padding: 16px 0 4px; max-height: none; overflow-y: visible; }
}

.content-page h1 { font-size: 26px; margin-bottom: 20px; }
.content-page h2 { font-size: 20px; }

/* Breadcrumbs */
.content-page .breadcrumb {
    background: none;
    padding: 0;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--catalog-muted);
}

/* Catalogue page header: full-width, no sidebar (matches prst.ru/catalog/'s
   layout) — a title, then category sections stacked full-width below
   (grouped category tiles on the overview, replacing the old category-pill
   quick-jump row now that the tile grid itself covers that navigation). */
.catalogue-title { font-size: 30px !important; font-weight: 700; margin-bottom: 20px !important; }
/* Category/series page title rendered inside .category-banner (see
   catalogue.php's $bannerHasContent branch) instead of above it —
   prst.ru/catalog/{category}/-style, where the heading sits inside the
   shaded hero panel next to the logo rather than as a separate block. */
.category-banner-title { margin-bottom: 14px !important; }
.category-banner--compact .category-banner-title { margin-bottom: 10px !important; }
.catalogue-section-title {
    font-size: 22px !important;
    font-weight: 700;
    margin: 40px 0 20px !important;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--brand-gold);
    display: inline-block;
}
.catalogue-section-title a { color: var(--brand-dark) !important; text-decoration: none !important; }

/* Supergroup heading (see category_groups / categories.group_id) — clusters
   related categories on the catalogue overview under one banner, a level
   above .catalogue-section-title's per-category headings. */
.catalogue-group-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--brand-dark);
    margin: 56px 0 8px;
    padding: 10px 16px;
    background: #f5f6f7;
    border-left: 4px solid var(--brand-gold);
}
.catalogue-group-title:first-child { margin-top: 20px; }

/* Catalog overview (prst.ru/catalog/-style): plain image+label tiles per
   category, not full priced product cards — that level of detail belongs
   on the filtered category page (with its price/specs/tags), this page is
   just for browsing into a category. */
/* Grid, not flex: a flex last row with flex-grow:1 stretches leftover tiles
   to fill the row (e.g. 5 tiles + 2 leftover tiles blown up to ~2x size) —
   every tile must render at the same fixed size regardless of item count. */
.catalog-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.catalog-tile {
    display: block;
    background: #fff;
    border: 1px solid var(--catalog-border);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.catalog-tile:hover { box-shadow: 0 16px 32px rgba(0,0,0,.12); transform: translateY(-4px); border-color: var(--brand-gold); }
.catalog-tile-image {
    height: 200px;
    background: #f5f6f7 center/68% no-repeat;
    position: relative;
    transition: background-color .2s ease;
}
.catalog-tile:hover .catalog-tile-image { background-color: #fbf3d9; }
.catalog-tile-label {
    padding: 16px 18px 20px;
    font-size: 16px;
    font-weight: 700;
    color: var(--catalog-text);
    line-height: 1.35;
}
/* Item-count badge on category tiles in the catalogue overview (see
   catalogue.php) — not used on product tiles, which don't have a count. */
.catalog-tile-count {
    position: absolute; top: 12px; right: 12px;
    background: var(--brand-dark); color: var(--brand-gold);
    font-size: 12px; font-weight: 700; letter-spacing: .02em;
    padding: 5px 11px; border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
@media (max-width: 600px) {
    .catalog-tile-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
    .catalog-tile-image { height: 140px; }
    .catalog-tile-label { padding: 12px 14px 16px; font-size: 14px; }
}

/* Brand carousel (homepage "Бренды" section, smart-shop.pro-style): big
   logo-forward cards in a single-row Slick carousel with arrow nav (same
   Slick instance already used for .hero-carousel), instead of a dense grid
   of small chips. Most of our brands do have a real logo on file — for the
   few that don't, a styled wordmark fills the card instead of empty space,
   since a blank white box would look broken next to the real logos either
   way (unlike the reference site, we can't just omit the ones without one:
   this section replaced the old standalone brands.php and is now the only
   place to browse the full brand list). */
.brand-carousel { position: relative; margin: 0 46px; }
.brand-carousel .slick-track { display: flex; }
.brand-carousel .slick-slide { height: auto; }
.brand-carousel-slide { padding: 0 8px; }
.brand-carousel-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 150px;
    background: #fff;
    border: 1px solid var(--catalog-border);
    border-radius: 14px;
    padding: 20px;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.brand-carousel-card:hover { box-shadow: 0 10px 24px rgba(0,0,0,.12); transform: translateY(-3px); border-color: var(--brand-gold); }
.brand-carousel-card img { max-width: 100%; max-height: 60px; object-fit: contain; }
.brand-carousel-name { font-size: 16px; font-weight: 700; color: var(--catalog-text); text-align: center; text-transform: uppercase; letter-spacing: .3px; }
.brand-carousel-count { font-size: 11px; color: var(--catalog-muted); }
.brand-carousel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px;
    border: 0; border-radius: 50%;
    background: var(--brand-dark); color: var(--brand-gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    cursor: pointer;
    z-index: 2;
    transition: background .15s ease;
}
.brand-carousel-arrow:hover { background: var(--brand-dark-hover); }
.brand-carousel-arrow--prev { left: -46px; }
.brand-carousel-arrow--next { right: -46px; }
.brand-carousel .slick-disabled { opacity: .35; cursor: default; pointer-events: none; }
@media (max-width: 767px) {
    .brand-carousel { margin: 0 8px; }
    /* !important: Slick sets its own inline display style on these buttons,
       which plain CSS (even later in source) can't override otherwise. */
    .brand-carousel-arrow { display: none !important; }
}

/* Static full grid of the same .brand-carousel-card, used on the standalone
   /brands.php page (linked from the homepage carousel's "Все бренды"
   button) — no need to paginate/carousel here, there's a whole page to fill. */
.brand-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.brand-grid .brand-carousel-card { flex: 1 1 calc(20% - 13px); min-width: 180px; }
@media (max-width: 992px) { .brand-grid .brand-carousel-card { flex: 1 1 calc(25% - 12px); } }
@media (max-width: 700px) { .brand-grid .brand-carousel-card { flex: 1 1 calc(33.333% - 11px); } }
@media (max-width: 480px) { .brand-grid .brand-carousel-card { flex: 1 1 calc(50% - 8px); } }

/* Per-category filter sidebar (price range + spec checkboxes generated
   from that category's real item_specs, plus sort) — only shown once a
   category is selected, matching prst.ru's per-category filter panel. */
.catalogue-filters { margin-bottom: 30px; }
.filter-group { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--catalog-border); }
.filter-group:last-of-type { border-bottom: 0; }
/* style.css has a global `label{float:left}` rule (for an old horizontal
   contact form elsewhere) that also matches every label here and floats
   it out of normal flow — override with float:none or these stack
   sideways into the fields instead of sitting above/inline with them. */
.filter-group > label:first-child { display: block; float: none; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; color: var(--brand-dark); }
/* Previously `width:50%` on flex children whose content differs a lot in
   length ("11590" vs "2203715") — flex's default min-content floor still
   let the longer placeholder force its input wider under shrink, so the two
   boxes rendered visibly mismatched sizes instead of a symmetric pair.
   flex:1 1 0 + min-width:0 ignores each input's own content and splits the
   row exactly evenly. Also strips the native number-input spin buttons
   (visually inconsistent between browsers and the ugliest part of the
   pair) since neither field needs stepper arrows. */
.filter-price-inputs { display: flex; align-items: center; gap: 10px; }
.filter-price-inputs input {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    -moz-appearance: textfield;
}
.filter-price-inputs input::-webkit-outer-spin-button,
.filter-price-inputs input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.filter-price-inputs span { color: var(--catalog-muted); flex-shrink: 0; }
.filter-checkbox { display: flex; float: none; align-items: center; gap: 8px; font-weight: 400; font-size: 13px; color: var(--catalog-text); margin-bottom: 8px; cursor: pointer; }
.filter-checkbox input { margin: 0; }
.filter-apply { display: block; width: 100%; text-align: center; margin-bottom: 10px; }
.filter-reset { display: block; text-align: center; font-size: 12px; color: var(--catalog-muted); text-decoration: underline; }

/* Search results category facet (search.php) — narrows a text search by
   category, since one query can span many categories at once. */
.search-category-facet { list-style: none; margin: 0; padding: 0; }
.search-category-facet li { margin-bottom: 4px; }
.search-category-facet a {
    display: flex; justify-content: space-between; gap: 8px;
    padding: 7px 10px; border-radius: 4px;
    font-size: 13px; color: var(--catalog-text); text-decoration: none;
}
.search-category-facet a span { color: var(--catalog-muted); font-size: 12px; }
.search-category-facet a:hover { background: #f5f6f7; }
.search-category-facet a.active { background: var(--brand-dark); color: #fff; font-weight: 600; }
.search-category-facet a.active span { color: var(--brand-gold); }

/* Tags + every spec facet live in one bounded, scrollable accordion instead
   of a flat list — a category with many spec keys (e.g. an imported feed)
   would otherwise turn the sidebar into a wall of checkboxes taller than
   the page. Each facet collapses to just its label until opened, and
   auto-opens if it already has an active filter so state stays visible. */
.filter-groups-scroll {
    max-height: 420px;
    overflow-y: auto;
    margin-bottom: 20px;
    padding-right: 8px;
    border-bottom: 1px solid var(--catalog-border);
}
.filter-spec-group { border-bottom: 1px solid var(--catalog-border); padding: 14px 0; }
.filter-spec-group:last-child { border-bottom: 0; }
.filter-spec-group summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--brand-dark);
    list-style: none;
}
.filter-spec-group summary::-webkit-details-marker { display: none; }
.filter-spec-group summary::before { content: '+ '; color: var(--catalog-muted); }
.filter-spec-group[open] summary::before { content: '\2212 '; }
.filter-spec-group .filter-checkbox { margin-top: 12px; }
.filter-spec-group .filter-checkbox:first-of-type { margin-top: 14px; }
/* A single facet (e.g. "Теги" on an imported feed) can have dozens of
   values — cap its own list so one open group doesn't push every other
   facet out of view; the outer .filter-groups-scroll still handles
   scrolling across groups. */
.filter-spec-group-values { max-height: 180px; overflow-y: auto; padding-right: 4px; }

/* Brand-style category banner (prst.ru/catalog/{category}/-style): an
   optional dark hero block above a single category's product grid — logo,
   tagline, an animated install-count stat (see .category-banner-counter,
   driven by jquery.counterup.js already loaded site-wide), description,
   PDF leaflet link and an advantages list. Admin-editable per category
   (admin/categories.php); categories with none of these fields set render
   the plain title-only header exactly as before this existed. */
.category-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    background: linear-gradient(135deg, #fafafa, #f2f2f2);
    color: var(--brand-dark);
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 36px 40px;
    margin-bottom: 26px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.category-banner-text { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; flex: 1 1 320px; }
.category-banner-main { flex: 1 1 320px; min-width: 260px; }
.category-banner-logo { margin-bottom: 14px; }
.category-banner-logo img { max-width: 200px; max-height: 60px; }
.category-banner-tagline { color: #555; font-size: 15px; margin: 0; line-height: 1.5; }

/* Just a logo, nothing to sit beside it (see catalogue.php's $bannerIsCompact) —
   hug the content and center it instead of stretching a mostly-empty flex
   row full-width. */
.category-banner--compact { justify-content: center; padding: 26px 40px; }
.category-banner--compact .category-banner-text { flex: 0 1 auto; }
.category-banner--compact .category-banner-main { flex: 0 1 auto; text-align: center; }
.category-banner--compact .category-banner-logo { margin-bottom: 0; }
.category-banner--compact .category-banner-logo img { max-width: 240px; max-height: 80px; }

/* A selected series' own product photo (see category_series.image) sitting
   beside the title/logo — prst.ru/series/.../-style two-column hero. */
.category-banner--with-image { align-items: stretch; }
.category-banner-hero-image { flex: 0 1 300px; display: flex; align-items: center; justify-content: center; }
.category-banner-hero-image img { max-width: 100%; max-height: 220px; object-fit: contain; }
@media (max-width: 767px) {
    .category-banner--with-image { flex-direction: column; }
    .category-banner-hero-image { order: -1; flex-basis: auto; }
}

.category-banner-stat {
    flex: 0 0 auto;
    text-align: center;
    padding: 10px 0 10px 30px;
    border-left: 1px solid rgba(0,0,0,.1);
}
.category-banner-stat-label-top { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.category-banner-counter { font-size: 44px; font-weight: 800; color: #B8860B; line-height: 1; font-variant-numeric: tabular-nums; }
.category-banner-stat-label { font-size: 13px; color: #666; margin-top: 8px; max-width: 180px; }
@media (max-width: 767px) {
    .category-banner-stat { border-left: 0; border-top: 1px solid rgba(0,0,0,.1); padding: 16px 0 0; margin-top: 6px; width: 100%; }
}

/* Description/PDF/video panel (prst.ru/catalog/{category}/-style: these sit
   together inside one shaded panel rather than a bare white column). */
.category-banner-panel {
    background: #f7f7f8;
    border-radius: 8px;
    padding: 28px 32px;
    margin-bottom: 24px;
}
.category-banner-panel h3 { font-size: 18px; font-weight: 700; margin: 0 0 14px; color: var(--brand-dark); }
.category-banner-description { font-size: 14px; line-height: 1.7; color: var(--catalog-text); margin-bottom: 16px; }
.category-banner-pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-dark) !important;
    text-decoration: none !important;
    border-bottom: 2px solid var(--brand-gold);
    padding-bottom: 2px;
}
.category-banner-pdf-link .fa { color: var(--brand-gold); font-size: 16px; }

/* Advantages as its own section below the panel (prst.ru/catalog/{category}/-
   style: a card grid, not a checklist) rather than a narrow side column. */
.category-banner-advantages-section { margin-bottom: 30px; }
.category-banner-advantages-section h3 { font-size: 18px; font-weight: 700; margin: 0 0 16px; color: var(--brand-dark); }
.category-banner-advantages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}
.category-banner-advantage-card {
    position: relative;
    background: #f7f7f8;
    border-radius: 6px;
    padding: 20px 18px 18px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--catalog-text);
}
.category-banner-advantage-card::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--brand-gold);
    margin-bottom: 12px;
}

/* Selected-series tabbed content (Описание / Отличительные особенности /
   Применение / Краткие характеристики / Документация — see catalogue.php's
   $seriesTabs), prst.ru/series/.../-style: only the tabs with real content
   render, each showing/hiding its own panel on click. */
.series-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    border-bottom: 1px solid var(--catalog-border);
    margin-bottom: 20px;
}
.series-tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--catalog-muted);
    cursor: pointer;
}
.series-tab-btn:hover { color: var(--brand-dark); }
.series-tab-btn.active { color: var(--brand-dark); border-bottom-color: var(--brand-gold); }
.series-tab-panel { display: none; }
.series-tab-panel.active { display: block; }
.series-tab-list { list-style: none; margin: 0; padding: 0; }
.series-tab-list li { position: relative; padding-left: 20px; margin-bottom: 10px; font-size: 14px; color: var(--catalog-text); }
.series-tab-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--brand-gold);
}
.series-tab-specs table { width: 100%; border-collapse: collapse; font-size: 13px; }
.series-tab-specs th, .series-tab-specs td { border: 1px solid var(--catalog-border); padding: 8px 10px; text-align: left; }
.series-tab-specs th { background: #f0f0f0; font-weight: 700; }
.series-tab-specs { overflow-x: auto; }
.series-tab-specs h3 { font-size: 15px; margin: 0 0 12px; }
.series-tab-specs a { color: var(--brand-dark); text-decoration: underline; }

/* Category/series banner video (see categories.banner_video_url /
   category_series.banner_video_url) — same aspect-ratio iframe technique as
   item.php's .item-video-wrap, styled to sit inside the shaded panel above
   rather than as a stray full-width block. */
.category-banner-video-heading { margin-top: 22px; }
.category-banner-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.category-banner-video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Build-to-order landing category (see category_has_landing_content()):
   replaces the filter sidebar/product grid when a category has curated
   banner/series content but no stocked items at all. */
.category-landing-cta {
    background: #f7f7f7;
    border-left: 3px solid var(--brand-gold);
    border-radius: 4px;
    padding: 24px 28px;
    margin-bottom: 30px;
    font-size: 15px;
    color: var(--catalog-text);
}

/* Series picker (see category_series / admin/categories.php): curated cards
   above a category's product grid — clicking one filters the grid below by
   that series' tag, reusing the same ?tag[]= mechanism the brand/tag
   sidebar facets already use, prst.ru-style. */
.category-series-section { margin-bottom: 34px; }
.category-series-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 20px;
    padding-bottom: 10px;
    color: var(--brand-dark);
    border-bottom: 2px solid var(--brand-gold);
    display: inline-block;
}
/* Grid, not flex: a flex last row with flex-grow:1 stretches leftover cards
   to fill the row — and since .category-series-card-image is aspect-ratio:1,
   a wider stretched card also grows taller, producing visibly oversized
   tiles whenever the series count doesn't divide evenly into a full row. */
.category-series-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 24px; }
.category-series-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    transition: box-shadow .18s ease, transform .18s ease;
}
.category-series-card:hover { box-shadow: 0 12px 24px rgba(0,0,0,.12); transform: translateY(-3px); }
.category-series-card--active { box-shadow: 0 0 0 2px var(--brand-gold), 0 12px 24px rgba(0,0,0,.1); }
.category-series-card-image {
    aspect-ratio: 1;
    background: #f5f6f7 center/72% no-repeat;
    box-sizing: border-box;
    transition: background-color .18s ease;
}
.category-series-card:hover .category-series-card-image { background-color: #fbf3d9; }
.category-series-card-image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f6f7;
}
.category-series-card:hover .category-series-card-image--placeholder { background-color: #fbf3d9; }
.category-series-card-image--placeholder .fa { font-size: 34px; color: #B8860B; }
/* min-height (not a fixed height/line-clamp — that combo clipped long labels
   mid-line in testing) pads short labels up so every card in a short-label
   row still matches the height of a long-label row elsewhere in the grid. */
.category-series-card-label {
    padding: 14px 12px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .3px;
    text-align: center;
    color: var(--catalog-text);
    border-top: 1px solid var(--catalog-border);
    min-height: calc(28px + 3 * 14px * 1.3);
}
.category-series-card--active .category-series-card-label { color: var(--brand-dark); }
@media (max-width: 600px) { .category-series-grid { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }

/* Pagination for a category's product grid (hundreds of imported items
   would otherwise render as one endless page). */
.catalogue-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--catalog-border);
}
.catalogue-pagination a { font-weight: 700; color: var(--brand-dark); text-decoration: none; }
.catalogue-pagination a:hover { color: var(--brand-gold); text-shadow: 0 0 1px var(--brand-dark); }
.catalogue-pagination-status { font-size: 13px; color: var(--catalog-muted); }

/* Cards get more breathing room next to the filter sidebar (col-md-9)
   than the full-width overview grid, so 2-up instead of 3-up. */
.product-grid--sidebar .product-card-col { width: 50%; }
@media (max-width: 600px) { .product-grid--sidebar .product-card-col { width: 100%; } }

/* Bottom lead-in CTA (mirrors prst's "Остались вопросы?" block, but links
   to real contacts instead of a form we don't have a backend for). */
.catalogue-cta {
    background: #f7f7f7;
    border-radius: 8px;
    padding: 40px;
    margin-top: 50px;
    text-align: center;
}
.catalogue-cta h2 { margin-top: 0; font-size: 22px; font-weight: 700; }
.catalogue-cta p { color: var(--catalog-muted); margin-bottom: 22px; }
.catalogue-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; }
.catalogue-cta-link { color: var(--catalog-text); font-weight: 600; font-size: 13px; text-decoration: underline; }

/* Product grid cards: clean flat tiles (prst.ru-style — light background,
   no border) instead of white bordered cards, while keeping the real
   price/specs/CTA our catalogue actually has (their reference tiles link
   to sub-category listings, not priced products, so that part stays ours). */
.product-grid { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.product-card-col { width: 33.333%; padding: 0 10px; margin-bottom: 20px; box-sizing: border-box; }
@media (max-width: 991px) { .product-card-col { width: 50%; } }
@media (max-width: 600px) { .product-card-col { width: 100%; } }

.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #f5f6f7;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    transition: box-shadow .15s ease, transform .15s ease;
}
.product-card:hover { box-shadow: 0 10px 24px rgba(0,0,0,.12); transform: translateY(-3px); }
.product-card-image {
    height: 180px;
    background: #fff center/contain no-repeat;
    position: relative;
}
.product-card-variants {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--brand-dark);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
}
.product-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.product-card-title { font-size: 15px; font-weight: 600; color: var(--catalog-text); margin: 0 0 8px; line-height: 1.3; }
.product-card-specs { font-size: 12px; color: var(--catalog-muted); margin-bottom: 10px; flex: 1; }
.product-card-specs span { display: block; }
.product-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.product-card-price { font-size: 16px; font-weight: 700; color: var(--catalog-text); }
.product-card-price--on-order {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-dark);
    background: rgba(244, 208, 63, .18);
    border: 1.5px solid var(--brand-gold);
    padding: 4px 10px;
    border-radius: 999px;
}

/* Buttons / links
   Modernized 2026-08 alongside the shared .btn system in tailwind-src.css:
   softer rounding (was 4px), a resting shadow so the hover lift reads as
   elevation instead of appearing from nothing, and a pressed :active state +
   :focus-visible ring to match. */
.btn-catalog {
    display: inline-block;
    background: var(--brand-dark);
    color: var(--brand-gold) !important;
    border: 0;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.btn-catalog { transition: background .15s ease, transform .15s ease, box-shadow .15s ease; }
.btn-catalog:hover { background: var(--brand-dark-hover); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.2); }
.btn-catalog:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,.14); }
.btn-catalog:focus-visible { outline: none; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 0 0 3px rgba(212, 167, 44, .4); }

/* Item page */
.item-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.item-title { font-size: 26px !important; font-weight: 700; line-height: 1.3; margin-bottom: 12px !important; flex: 1; min-width: 0; }
.item-brand-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--catalog-border);
    border-radius: 6px;
    padding: 10px 18px;
    background: #fff;
}
.item-brand-badge img { max-width: 130px; max-height: 40px; width: auto; height: auto; display: block; }
@media (max-width: 600px) { .item-title-row { flex-direction: column; } }

.item-sku { font-size: 14px; color: var(--catalog-muted); margin: -6px 0 12px; }
.item-sku strong { color: var(--catalog-text); }
.item-sku-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: inherit;
}
.item-sku-copy i { font-size: 13px; color: var(--catalog-muted); transition: color .15s ease; }
.item-sku-copy:hover i { color: var(--brand-dark); }
.item-sku-copy.is-copied i { color: #2e7d32; }

/* Tags: shared between item.php (clickable <a>, filters the catalogue)
   and product cards (plain <span>, just a scannable label). */
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.tag-chip {
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    background: #f0f0f0;
    color: var(--catalog-muted) !important;
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease;
}
a.tag-chip:hover { background: var(--brand-dark); color: var(--brand-gold) !important; }
.item-tag-list { margin-bottom: 24px; }
.item-tag-list .tag-chip { font-size: 12px; padding: 4px 12px; }

/* Gallery + quick-specs sit side by side (prst.ru-style) rather than
   quick-specs stacked full-width below the image. */
.item-gallery-specs-row { display: flex; gap: 30px; align-items: flex-start; }
.item-gallery-specs-row .item-gallery { flex: 1 1 55%; min-width: 0; }
.item-gallery-specs-row .item-quick-specs { flex: 1 1 40%; margin: 0; padding-top: 6px; }
@media (max-width: 767px) {
    /* Percentage flex-basis (55%/40%) means height, not width, once the row
       switches to a column direction — with no definite container height
       that collapses both children to near-zero. Drop back to natural
       (content-based) sizing once stacked. */
    .item-gallery-specs-row { flex-direction: column; }
    .item-gallery-specs-row .item-gallery,
    .item-gallery-specs-row .item-quick-specs { flex: none; width: 100%; }
}

/* Gallery: a narrow vertical thumbnail strip beside the main image
   (prst.ru-style) instead of a row of thumbnails underneath. */
.item-gallery { display: flex; gap: 10px; }
.item-thumb-col { display: flex; flex-direction: column; gap: 8px; width: 70px; flex-shrink: 0; max-height: 380px; overflow-y: auto; padding-right: 2px; }
.item-gallery-main {
    display: block; /* it's an <a> now (click opens the lightbox), not a <div> */
    flex: 1;
    height: 380px;
    background: #fafafa center/contain no-repeat;
    border: 1px solid var(--catalog-border);
    border-radius: 6px;
    overflow: hidden;
    cursor: zoom-in;
    transition: box-shadow .2s ease, background-size .3s ease;
}
.item-gallery-main:hover { box-shadow: 0 6px 20px rgba(0,0,0,.12); }
/* Extra prettyPhoto-group links beyond the currently-shown image — pure
   metadata so the lightbox can prev/next through the full set (see
   item.php), never meant to be seen or reached by keyboard/AT. */
.item-gallery-hidden-link { display: none; }
.item-thumb {
    height: 70px;
    flex-shrink: 0;
    background: #fafafa center/cover no-repeat;
    border: 1px solid var(--catalog-border);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}
.item-thumb:hover { transform: translateY(-2px); }
.item-thumb.active { border-color: var(--brand-gold); border-width: 2px; }
@media (max-width: 600px) {
    /* .item-gallery-main's flex:1 assumes a definite cross size from the row
       layout (thumb-col's fixed width sets the main image's available
       height indirectly via its own explicit height); once the container
       flips to column-reverse with no definite height, flex-basis:0% has
       nothing to grow into and collapses the image to ~0 — pin it back to
       its own explicit height instead of the flex algorithm. */
    .item-gallery { flex-direction: column-reverse; }
    .item-thumb-col { flex-direction: row; width: auto; }
    .item-thumb { flex: 1; }
    .item-gallery-main { flex: none; width: 100%; }
}

.item-series-picker { margin-top: 16px; }
.item-series-picker-title { font-size: 14px; font-weight: 700; color: var(--brand-dark); margin: 0 0 8px; }
.item-series-picker-label { font-size: 12px; color: var(--catalog-muted); margin: 0 0 8px; }
.item-series-picker-options { display: flex; flex-wrap: wrap; gap: 6px; }
.item-series-option {
    display: inline-block;
    min-width: 44px;
    padding: 7px 16px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid var(--brand-dark);
    border-radius: 999px;
    color: var(--brand-dark) !important;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.item-series-option:hover { background: var(--brand-dark); color: var(--brand-gold) !important; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.item-series-option--current { background: var(--brand-dark); color: #fff !important; cursor: default; }
.item-series-option--current:hover { color: #fff !important; transform: none; box-shadow: none; }

.item-main-col { padding-right: 30px; }
@media (max-width: 991px) { .item-main-col { padding-right: 15px; } }

.item-short-desc { color: var(--catalog-muted); font-size: 14px; }

/* Quick-facts strip: the first few specs, beside the gallery image
   (see .item-gallery-specs-row) — full spec table still lives in the
   "Характеристики" tab below. */
.item-quick-specs { margin: 14px 0; }
.item-quick-specs > div { font-size: 13px; margin-bottom: 6px; }
.item-quick-specs span { color: var(--catalog-muted); }
.item-quick-specs strong { color: var(--catalog-text); }

.item-price-box {
    border: 1px solid var(--catalog-border);
    border-radius: 8px;
    background: #f5f6f7;
    padding: 20px;
    margin: 0 0 20px;
    position: sticky;
    top: 100px;
    transition: box-shadow .2s ease;
}
.item-price-box:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.item-price-box .price { font-size: 30px; font-weight: 700; color: var(--catalog-text); margin-bottom: 14px; }
/* Matches the .item-stock pill shape/weight below rather than inheriting
   .price's 30px size — a "Под заказ" badge that size read as an oversized
   yellow headline instead of a price-shaped label. */
.item-price-box .price--on-order {
    display: table;
    margin: 0 auto 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-dark);
    background: rgba(244, 208, 63, .18);
    border: 1.5px solid var(--brand-gold);
    padding: 6px 16px;
    border-radius: 999px;
}
.item-stock {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 16px;
    padding: 5px 14px;
    border-radius: 999px;
    border: 1.5px solid;
}
.item-stock--in { color: #2e7d32; border-color: #2e7d32; background: rgba(46,125,50,.06); }
.item-stock--out { color: var(--catalog-muted); border-color: var(--catalog-border); }
.item-price-box .btn-catalog--block { display: block; width: 100%; text-align: center; margin-bottom: 10px; }
/* .btn-catalog--outline: a secondary/lower-emphasis variant of .btn-catalog,
   used anywhere alongside a primary contact CTA (item sidebar, bottom
   "Остались вопросы?" CTAs) — not scoped to one container. */
.btn-catalog--outline {
    background: none;
    color: var(--brand-dark) !important;
    border: 1.5px solid var(--brand-dark);
    box-shadow: none;
}
.btn-catalog--outline:hover { background: var(--brand-dark); color: var(--brand-gold) !important; box-shadow: 0 6px 14px rgba(0,0,0,.14); }
.btn-catalog--outline:active { box-shadow: none; }
.item-price-box-link { display: block; text-align: center; font-size: 13px; color: var(--catalog-muted) !important; text-decoration: underline; transition: color .15s ease; }
.item-price-box-link:hover { color: var(--brand-dark) !important; }
@media (max-width: 991px) {
    .item-price-box { position: static; top: auto; margin: 20px 0; }
}

.item-documents { margin: 30px 0; padding-top: 20px; border-top: 1px solid var(--catalog-border); }
.item-tabs .item-documents { margin: 0; padding-top: 0; border-top: none; }
.item-related-section { margin: 40px 0; padding-top: 30px; border-top: 1px solid var(--catalog-border); }
.item-documents-title { font-size: 18px; font-weight: 700; color: var(--brand-dark); margin-bottom: 14px; }
.item-documents-list { list-style: none; margin: 0; padding: 0; }
.item-documents-list li { margin-bottom: 8px; }
.item-documents-list a { color: var(--catalog-text) !important; text-decoration: none; }
.item-documents-list a:hover { color: var(--brand-dark) !important; text-decoration: underline; }
.item-documents-list .fa { color: var(--catalog-muted); margin-right: 6px; }

/* .item-tabs sits full-width below the two-column layout (see item.php), so
   without a cap a 16:9 box would balloon to ~660px tall on a wide screen —
   dwarfing the other tabs. Capped to a reasonable embedded-video size instead.
   Uses aspect-ratio rather than the old padding-top-percent hack: that
   percentage resolves against the *containing block's* width, not this
   element's own (narrower, max-width-capped) width, so it kept computing
   56.25% of the full ~1170px tab-content instead of the 800px cap. */
.item-videos .item-video-wrap { position: relative; width: 100%; max-width: 800px; aspect-ratio: 16 / 9; margin-bottom: 8px; background: #000; }
.item-videos .item-video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.item-videos .item-video-caption { color: var(--catalog-muted); font-size: 14px; margin: 0 0 24px; }
.item-videos > div:last-child .item-video-caption { margin-bottom: 0; }

/* Описание / Характеристики tabs — real Bootstrap tab markup (already
   loaded via bootstrap.js), just re-skinned off the default Bootstrap blue
   to the site's black/gold identity. */
.item-tabs { margin-top: 10px; }
.item-tabs .nav-tabs { border-bottom: 2px solid var(--catalog-border); }
.item-tabs .nav-tabs > li > a { color: var(--catalog-muted); border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px; background: none !important; }
.item-tabs .nav-tabs > li > a:hover { color: var(--brand-dark); border-color: transparent; }
.item-tabs .nav-tabs > li.active > a { color: var(--brand-dark); border-bottom-color: var(--brand-gold); font-weight: 700; }
.item-tabs .tab-content { padding: 24px 0; color: var(--catalog-text); }

.item-description { font-size: 15px; line-height: 1.7; }
.item-description p { margin: 0 0 16px; }
.item-description p:last-child { margin-bottom: 0; }
.item-description h3, .item-description h4 { color: var(--brand-dark); font-weight: 700; margin: 24px 0 12px; }
.item-description h3:first-child, .item-description h4:first-child { margin-top: 0; }
.item-description ul, .item-description ol { margin: 0 0 16px; padding-left: 0; list-style: none; }
.item-description li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.item-description li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-gold); }
.item-description ol { counter-reset: item-desc-ol; }
.item-description ol > li { counter-increment: item-desc-ol; }
.item-description ol > li::before { content: counter(item-desc-ol) '.'; width: auto; height: auto; border-radius: 0; background: none; color: var(--brand-gold); font-weight: 700; top: 0; }
.item-description strong, .item-description b { color: var(--brand-dark); }
.item-description table { border-collapse: collapse; margin: 0 0 16px; font-size: 14px; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.item-description table tbody, .item-description table thead { display: table; width: 100%; }
.item-description table p { margin: 0; }
.item-description th, .item-description td { padding: 10px 12px; border: 1px solid var(--catalog-border); text-align: left; }
.item-description th { background: #f5f6f7; color: var(--brand-dark); font-weight: 700; }
.item-description a { color: var(--brand-dark); font-weight: 600; text-decoration: underline; }
.item-description a:hover { color: var(--brand-gold); }
.item-description hr { border: 0; border-top: 1px solid var(--catalog-border); margin: 20px 0; }

.spec-table { width: 100%; border-collapse: collapse; margin: 0; }
.spec-table tr { border-bottom: 1px solid var(--catalog-border); }
.spec-table td { padding: 8px 6px; font-size: 14px; }
.spec-table td:first-child { color: var(--catalog-muted); width: 45%; }
.spec-table td:last-child { color: var(--catalog-text); font-weight: 600; }

/* Homepage hero container: the header tag itself just needs to stop being
   a full-viewport block; the actual visual design lives in .hero-carousel
   below (prst.ru-style rotating banner replacing the old fixed 2-panel
   hero — see hero_slides table). */
/* Nav is position:fixed and always solid black now (index.php no longer
   sets $transparentNav), so the hero needs top clearance or its own
   heading sits underneath the nav bar instead of below it (measured nav
   height ~133px, see catalogue.php's identical clearance fix). */
.intro {
    /* style.css's legacy theme rule sets .intro to display:table (for the
       old vertically-centered .intro-body table-cell layout, unused here).
       In auto table-layout, a specified width is only a *minimum* — content
       that can't shrink still grows the table past it. Slick.js sets its
       slide track's width via inline style (meant to be clipped by
       .hero-carousel's overflow:hidden); under table layout that wide,
       unshrinkable track grew .intro itself out to several multiples of the
       viewport width instead of respecting width:100%. Plain block display
       removes the table auto-sizing behavior entirely. */
    display: block !important;
    min-height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
    background: #000 !important;
    width: 100%;
}
/* Full-bleed hero: the banner now spans the full browser width instead of
   sitting inset inside the page's centered .container (rounded corners,
   visible black gutter on both sides) — nav clearance and left/right
   breathing room for the slide's own text move onto .hero-slide instead. */
.intro > .container { width: 100%; max-width: none; padding: 0; margin: 0; }

/* Theme's #info rule (style.css) is a dark 35%-viewport-height gradient
   panel meant for the old text info-boxes; the image tiles need a plain
   white section instead, sized to their own content. */
#info { background: #fff !important; color: var(--catalog-text) !important; min-height: auto !important; padding: 50px 0 30px; }
#info a { text-decoration: none; }

/* ==========================================================================
   Homepage full section overhaul — consistent card/grid language and
   alternating section backgrounds across every section, matching a modern
   layout (prst.ru-style structure) while keeping the black/white/gold
   brand palette. Targets the existing theme classes directly so the real
   content (testimonials, partner lists, certificates) doesn't need to be
   rewritten, just re-skinned.
   ========================================================================== */

.section-title.center h2, .section-title.center h1 {
    letter-spacing: -.5px;
}
.section-title.center h1 { font-size: 30px; font-weight: 700; text-transform: none; }

/* Section background rhythm: alternate white / light gray between the
   plain (non-photo, non-gradient) sections for visual separation. */
#clients, #blanks { background: #f7f7f7; }
#solutions, #services { background: #fff; }
#clients, #solutions, #services, #blanks, #equipment {
    padding: 60px 0;
}

/* "Почему выбирают нас" / benefit columns -> cards */
.solutions-text {
    background: #fff;
    border: 1px solid var(--catalog-border);
    border-radius: 14px;
    padding: 24px 22px;
    height: 100%;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
#solutions .row { display: flex; flex-wrap: wrap; }
#solutions .row > div { margin-bottom: 20px; display: flex; }
.solutions-text h4 { font-size: 15px; font-weight: 700; margin-bottom: 16px; color: var(--brand-dark); }
/* #solutions i.fa sets white icons (color:#fff) — meant for a dark section
   that #solutions no longer has, so the checkmarks were invisible on white.
   Needs #solutions in the selector to out-specify the ID-based original rule. */
#solutions .solutions-text .fa-check { color: var(--brand-gold) !important; }
.solutions-text p { color: var(--catalog-text); font-size: 13px; }

/* Engineering solutions / pump equipment "service" cards */
.service {
    background: #fff;
    border: 1px solid var(--catalog-border);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.service:hover { box-shadow: 0 10px 24px rgba(0,0,0,.1); border-color: #d5d5d5; transform: translateY(-3px); }
.service .service-img {
    height: 140px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    margin-bottom: 14px;
}
.service h4 { font-size: 14px; margin: 0 0 10px; color: var(--brand-dark); }
.service p { font-size: 13px; color: var(--catalog-muted); min-height: 80px; }
.service > a:last-child {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--brand-dark) !important;
    text-decoration: none;
    border-bottom: 2px solid var(--brand-gold);
}

/* Client industries / partner "thumbnail" cards */
#clients .thumbnail, #equipment .thumbnail {
    background: #fff;
    border: 1px solid var(--catalog-border);
    border-radius: 14px;
    padding: 20px 14px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    transition: box-shadow .15s ease, transform .15s ease;
}
#clients .thumbnail:hover, #equipment .thumbnail:hover { box-shadow: 0 10px 24px rgba(0,0,0,.1); transform: translateY(-3px); }
#clients .thumbnail h3, #equipment .thumbnail h3 { font-size: 14px; margin: 12px 0 8px; }
#clients .thumbnail h3, #equipment .thumbnail h3 a { color: var(--brand-dark); }
#equipment .caption ul { text-align: left; font-size: 12px; color: var(--catalog-muted); max-height: 160px; overflow: auto; }

/* Circular logo badges (.img-circle) are a dated-template cue — rectangular
   partner/certificate logos squeezed into circles clip awkwardly at the
   corners. Clean square tiles read as a much more modern, premium grid. */
.equipment-img, .clients-img {
    border-radius: 10px !important;
    background-color: #fff;
    border: 1px solid var(--catalog-border);
}

/* Certificate gallery (about.php's #blanks): fixed-height/overflow:hidden
   tiles that used to rely on Bootstrap's `.img-responsive` (max-width:100%;
   height:auto) to scale the image down first. That class was never
   reimplemented in the Tailwind shim (tailwind-src.css's @layer components
   only covers grid/buttons/forms/nav/modal/etc — img-responsive was missed)
   and bootstrap.css itself is no longer loaded, so these <img> tags render
   at native pixel size with no scaling at all, then get hard-cropped by
   the tile's overflow:hidden — cutting certificate text off mid-word
   (confirmed by screenshot: "CE", "ЦС ЛИЦ" truncated). Restoring the scale
   behavior AND switching cover-style cropping for contain-with-white-matting
   (same treatment as .category-tile/.item-brand-badge elsewhere) means a
   certificate's own aspect ratio no longer matters — nothing gets clipped. */
#blanks .hover-bg { background: #fff; }
#blanks .hover-bg img.img-responsive {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 18px;
    box-sizing: border-box;
}

/* contacts.php's team section — the original markup nested Bootstrap grid
   classes incorrectly (col-md-offset-2 wrapping col-md-5, with no .row
   ancestor at all) so every member rendered as its own full-width block
   instead of side-by-side columns — a plain vertical stack with no visible
   card boundaries, reported as "looks like a vertical line, no apparent
   order". Replaced with a real flex grid; .team-img/.caption keep their
   existing look (style.css), this just adds a proper card frame + grid. */
#team { background: #f7f7f7; padding: 60px 0; }
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 30px; }
.team-card {
    width: 280px;
    background: #fff;
    border: 1px solid var(--catalog-border);
    border-radius: 14px;
    padding: 28px 22px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    transition: box-shadow .2s ease, transform .2s ease;
}
.team-card:hover { box-shadow: 0 10px 24px rgba(0,0,0,.1); transform: translateY(-3px); }
.team-card .caption { padding: 0; }
.team-card h3 { margin: 4px 0 8px; }
/* Site-wide `a{color:#fff}` (style.css) is meant for the dark hero/nav —
   .team-card is a white card, same class of bug as .content-page's own
   override further up this file (phone/email links rendered invisible,
   white text on the white card background). */
.team-card p { color: var(--catalog-text); font-size: 13px; }
.team-card a { color: var(--brand-dark); text-decoration: underline; }
.team-card a:hover, .team-card a:focus { color: var(--brand-gold); }

/* Nav: the logo/wordmark group (.navbar-header) and the nav-links+search
   row (.navbar-collapse) are separate block/float siblings inside the same
   .container, each internally flex-centered on its own — but with no shared
   cross-axis between the two boxes, they only line up by coincidence of
   matching box heights. .navbar-collapse was taller (driven by the search
   form's own padding, previously inflated further by an since-removed
   margin-top), so the logo sat measurably higher than the nav links/search
   box (confirmed via bounding-box diff: logo group centered ~17px above the
   nav row). Making their shared parent a flex row with align-items:center
   gives both a real common center regardless of either box's own height.
   Desktop-only (@screen md) to match .navbar-collapse.collapse's own
   desktop-only flex rule — at mobile widths the collapse becomes a dropdown
   stacked below the header row instead, which needs the parent to stay a
   normal block, not a single flex row. */
@screen md {
  .navbar-custom > .container { display: flex; align-items: center; }
}

/* Nav: drop the shouty all-caps 2014-template look for a cleaner one. */
.navbar-custom { text-transform: none !important; letter-spacing: normal !important; }
.navbar-custom .nav li a { font-size: 13px; font-weight: 600; }
.navbar-link-out { font-weight: 400 !important; font-size: 13px; }

/* /reviews.php's full list now reuses the homepage's .reviews-preview-card
   grid (see below) instead of the old single-item owl-carousel over a fixed
   parallax photo (style.css's legacy #testimonials rule) — that background
   image + rgba(0,0,0,.55) card combo doesn't suit plain white cards, so it's
   overridden to the same plain light section every other card grid uses. */
#testimonials {
    background: #fff;
    background-image: none;
    background-attachment: scroll;
    color: inherit;
    padding: 60px 0;
}

/* Shared dark page-header banner (about/contacts/partners/brands/reviews —
   every content page that isn't the light-header catalogue.php). Previously
   a flat inline `background:#000` rule repeated across all 5 files — a
   plain black bar with a plain white heading was the single most dated-
   looking element on each of these pages. Same gradient/glow/dot-grid
   language as the homepage's other dark surfaces (.hero-slide, .stats-strip)
   so it reads as one system instead of a leftover template block. */
.page-header-banner {
    position: relative;
    overflow: hidden;
    /* body is `display:flex;flex-direction:column` (sticky-footer trick) —
       any flex child with overflow other than visible gets its automatic
       min-height forced to 0 instead of its content's natural size (a
       flexbox spec quirk already documented/worked around elsewhere in this
       file for #info/.brand-strip/etc.). Without this, contacts.php's
       phone/email <p> — tall enough to push this banner past a single
       line of text — got clipped out of the box entirely: the banner
       rendered only as tall as its own padding, with the paragraph flowing
       out below it onto the page's light background, white-text-on-white.
       flex-shrink:0 restores normal content-based sizing. */
    flex-shrink: 0;
    padding: 168px 0 46px;
    background: linear-gradient(160deg, #1c1e22 0%, var(--brand-dark) 60%, #0e0f11 100%);
    color: #fff;
    text-align: center;
}
.page-header-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}
.page-header-banner::after {
    content: "";
    position: absolute;
    top: -140px;
    right: -100px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,167,44,.22) 0%, rgba(212,167,44,0) 70%);
    pointer-events: none;
}
.page-header-banner > .container { position: relative; }
.page-header-banner h1 {
    font-size: 40px;
    letter-spacing: -.8px;
    margin: 0;
}
@media (max-width: 600px) { .page-header-banner h1 { font-size: 30px; } }

/* Footer — previously a single flat #000/dark-brand block straight from the
   old template with no CTA, no depth cue between its own sub-sections; the
   plainest surface on the whole site. A CTA strip up top gives it a reason
   to exist beyond a sitemap, and a top edge glow ties it back to the same
   gold-accent language used on hero/page-header banners instead of just
   stopping dead at a hard line. */
#footer { background: var(--brand-dark); color: #bbb; padding: 0; position: relative; }
#footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(212,167,44,0) 0%, var(--brand-gold) 50%, rgba(212,167,44,0) 100%);
}
.footer-cta { background: var(--brand-dark-hover); border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-cta-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 34px 0; }
.footer-cta h3 { color: #fff; font-size: 20px; margin: 0 0 6px; }
.footer-cta p { margin: 0; font-size: 13.5px; color: #bbb; max-width: 480px; }
.footer-cta-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#footer > .container { padding-top: 40px; }
#footer .footer-col { margin-bottom: 30px; }
#footer h5 { color: var(--brand-gold); text-transform: uppercase; font-size: 13px; margin-bottom: 15px; }
#footer p { font-size: 13px; line-height: 1.6; }
#footer ul { list-style: none; padding: 0; margin: 0; }
#footer ul li { margin-bottom: 8px; }
#footer a { color: #bbb; text-decoration: none; font-size: 13px; }
#footer a:hover { color: var(--brand-gold); }
#footer .footer-bottom {
    border-top: 1px solid #333;
    padding: 15px 0;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

/* ==========================================================================
   Homepage v2 — banner carousel, stats strip, image-led category tiles,
   brand strip, a company teaser and a reviews preview (prst.ru-style
   rhythm: banner -> stats -> catalog -> brands -> about -> reviews),
   replacing the old fixed 2-panel hero / text-only info boxes.
   ========================================================================== */
.hero-carousel { overflow: hidden; }
/* Until slick initialises, every slide sits in normal flow, so the carousel
   is N x 680px tall; slick then collapses it to one slide and the whole page
   below jumps upward. Measured as a 0.12 layout shift on .stats-strip -- on
   its own more than Google's entire 0.1 "good CLS" budget, and by far the
   biggest shift on the page. Showing only the first slide until
   .slick-initialized appears reserves exactly the right height from the
   first paint. The !important is needed because .hero-slide itself sets
   display:flex !important. */
.hero-carousel:not(.slick-initialized) .hero-slide:not(:first-child) { display: none !important; }
.hero-carousel .slick-slide { outline: none; }
.hero-carousel .slick-dots { bottom: 130px; }
.hero-carousel .slick-dots li button:before { color: #fff; opacity: .5; font-size: 10px; }
.hero-carousel .slick-dots li.slick-active button:before { opacity: 1; color: var(--brand-gold); }
.hero-slide {
    min-height: 680px;
    background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)) center/cover no-repeat, #000 center/cover no-repeat;
    background-blend-mode: normal;
    /* Extra top/bottom room vs. the old inset card: top clears the fixed
       nav (~133px) now that .intro itself has no top padding to do that
       job; bottom leaves the stats overlay (see .stats-strip below) its
       own space instead of colliding with the slide's text. */
    padding: 170px 40px 180px;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    box-sizing: border-box;
}
/* Now that the slide itself is full-bleed (see .intro above), the text
   needs its own narrower column instead of stretching edge-to-edge across
   the whole banner — a single centered block matches how the rest of the
   site's centered content reads, and keeps line lengths sane on a wide
   banner instead of one-word-per-line-feeling-lost stretch. */
.hero-slide-content { max-width: 760px; width: 100%; margin: 0 auto; text-align: center; }
/* Headline scaled way up (was 34px) and switched to the Manrope display
   font — at the old size, on a full-viewport-width banner, the text read
   small and lost against the huge dark image behind it, which was a big
   part of the "flat/dated" first impression. */
.hero-slide h1, .hero-slide h2 {
    margin: 0 0 10px;
    font-size: 56px;
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -1px;
    text-shadow: 0 2px 24px rgba(0,0,0,.25);
}
.hero-slide .hero-subtitle {
    display: inline-block;
    font-family: 'Manrope', 'Open Sans', sans-serif;
    font-size: 18px;
    color: var(--brand-gold);
    margin: 0 0 20px;
    font-weight: 700;
}
.hero-slide p { font-size: 16px; line-height: 1.65; color: #ddd; margin: 0 auto 30px; max-width: 620px; }
/* Hero CTA row: the slide's own admin-configured button (hero_slides.
   button_label/button_url) plus a constant secondary action so the banner
   always offers a lower-commitment path too, not just one small link lost
   in a huge image. */
.hero-cta-row { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.hero-slide .btn-catalog { padding: 15px 30px; font-size: 14.5px; border-radius: 12px; }
.btn-catalog--ghost-light {
    display: inline-block;
    background: rgba(255,255,255,.08);
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,.5);
    border-radius: 12px;
    padding: 14px 28px;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .2px;
    text-decoration: none !important;
    backdrop-filter: blur(2px);
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-catalog--ghost-light:hover { background: rgba(255,255,255,.16); border-color: #fff; transform: translateY(-2px); }
/* Soft depth behind the text: a wide radial gold glow plus a vignette so
   the headline sits on a naturally darker patch of the photo regardless of
   what image an admin uploads, instead of relying on the flat 60%-black
   overlay alone to guarantee contrast. */
.hero-slide { position: relative; }
.hero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 900px 500px at 50% 55%, rgba(0,0,0,.35), rgba(0,0,0,0) 70%),
        radial-gradient(circle 380px at 82% 18%, rgba(212,167,44,.20), rgba(212,167,44,0) 70%);
    pointer-events: none;
}
.hero-slide-content { position: relative; z-index: 1; }
@media (max-width: 767px) {
    .hero-slide { min-height: 700px; padding: 140px 24px 200px; }
    .hero-slide h1, .hero-slide h2 { font-size: 34px; letter-spacing: -.5px; }
    .hero-carousel .slick-dots { bottom: 165px; }
}

/* Stats strip: real computed catalog/brand/partner counts (see index.php),
   not invented marketing numbers — pulled up to overlay the bottom of the
   full-bleed hero image (matching prst.ru's "24 years / 5 brands / ..."
   rhythm) instead of sitting in its own separate black band below it. The
   top-to-bottom gradient (not a flat color) fades the overlay in gradually
   so the numbers stay readable over whatever photo is behind them without
   a hard edge where the overlay begins. */
.stats-strip {
    position: relative;
    z-index: 2;
    margin-top: -160px;
    padding: 90px 0 30px;
    /* The old 3-stop gradient (0% -> .75 at 45% -> .92 at 100%) left too
       wide a mid-zone under .75 opacity — bright content in whatever photo
       an admin uploads (this one has light-colored machinery right around
       that height) could still show through as a pale streak behind the
       stat numbers/labels, reported as a stray "white line" under the
       text. Ramping to near-full opacity by the 35% mark instead — well
       above where the numbers/labels actually sit — makes the overlay
       readable regardless of the underlying photo's brightness, not just
       for this specific image. */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 20%, rgba(0,0,0,.93) 35%, rgba(0,0,0,.95) 100%);
}
.stats-strip-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 64px; text-align: center; }
.stats-strip-item { display: flex; flex-direction: column; align-items: center; }
.stats-strip-item .stats-icon { font-size: 20px; color: var(--brand-gold); opacity: .8; margin-bottom: 10px; }
.stats-strip-item .stats-value { display: block; font-family: 'Manrope', 'Open Sans', sans-serif; font-size: 36px; font-weight: 800; color: #fff; line-height: 1.1; letter-spacing: -.5px; }
.stats-strip-item .stats-label { display: block; font-size: 13px; color: #bbb; margin-top: 6px; }
@media (max-width: 767px) {
    .stats-strip { margin-top: -190px; padding: 110px 0 26px; }
}

/* Catalog category tiles: home_image can be either a real product/warehouse
   photo or a brand logo (see admin/categories.php) — object-fit:contain (not
   cover) so a wide logo shows in full instead of getting its edges cropped
   off to fill the tile; the white background keeps that letterboxing from
   reading as empty space regardless of which kind of image is set. */
.category-tile-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px; }
.category-tile {
    flex: 1 1 calc(33.333% - 14px);
    min-width: 260px;
    height: 220px;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    display: block;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    transition: box-shadow .2s ease, transform .2s ease;
}
.category-tile:hover { box-shadow: 0 14px 28px rgba(0,0,0,.16); transform: translateY(-3px); }
.category-tile img { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 20px; box-sizing: border-box; display: block; transition: transform .25s ease; }
.category-tile:hover img { transform: scale(1.05); }
.category-tile-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.05) 60%);
}
.category-tile-label {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 18px 20px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}
.category-tile-label span {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--brand-gold);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
@media (max-width: 600px) { .category-tile { flex: 1 1 100%; } }

/* Reviews preview: a compact taste of /reviews.php's real testimonials
   (reviews table) shown on the homepage, prst.ru "5 из 5 / N отзывов"-style. */
.reviews-preview { background: #fff; padding: 60px 0; }
.reviews-preview-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px; }
.reviews-preview-card {
    flex: 1 1 calc(33.333% - 14px);
    min-width: 260px;
    background: #fff;
    border: 1px solid var(--catalog-border);
    border-radius: 14px;
    padding: 22px 24px;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    transition: box-shadow .2s ease, transform .2s ease;
}
.reviews-preview-card:hover { box-shadow: 0 10px 24px rgba(0,0,0,.1); transform: translateY(-3px); }
.reviews-preview-quote-icon { display: block; font-size: 20px; color: rgba(212,167,44,.35); margin-bottom: 10px; }
.reviews-preview-card p { font-size: 13px; line-height: 1.6; color: var(--catalog-text); margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.reviews-preview-footer { display: flex; align-items: center; gap: 10px; }
.reviews-preview-avatar {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--brand-dark);
    color: var(--brand-gold);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reviews-preview-card .reviews-preview-author { font-size: 12px; font-weight: 700; color: var(--catalog-muted); }
@media (max-width: 900px) { .reviews-preview-card { flex: 1 1 calc(50% - 10px); } }
@media (max-width: 600px) { .reviews-preview-card { flex: 1 1 100%; } }

/* Official-brand / distributor logo strip. Previously bare grayscale logos
   floating directly on the section background — the flattest block on the
   page, especially right above .brand-carousel-card below it which already
   uses a card treatment. Wrapping each logo the same way (white card,
   resting shadow) makes the two sections read as one consistent system. */
.brand-strip { background: #f7f7f7; padding: 50px 0; }
.brand-strip-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 20px; margin-top: 24px; }
.brand-strip-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 12px;
    padding: 16px 26px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    transition: box-shadow .15s ease, transform .15s ease;
}
.brand-strip-grid a:hover { box-shadow: 0 10px 22px rgba(0,0,0,.1); transform: translateY(-2px); }
.brand-strip-grid img { max-height: 40px; max-width: 130px; filter: grayscale(100%); opacity: .6; transition: opacity .15s ease, filter .15s ease; }
.brand-strip-grid a:hover img { filter: grayscale(0%); opacity: 1; }

/* #brands-catalog had no padding rule at all (0px top/bottom) unlike every
   other homepage section — the "Все бренды" button sat flush against the
   section's bottom edge with the next section starting immediately after
   it, no breathing room. */
#brands-catalog { padding: 60px 0; }

/* Company teaser: real photo + genuine "why us" copy (full detail on
   /about.php), replacing the old bullet-only #home-teaser section. */
/* Background alternates white/gray with the sections around it (.brand-strip,
   .reviews-preview) for visual rhythm down the page instead of three
   same-toned sections running together. */
#company-teaser { padding: 60px 0; background: #f7f7f7; }
/* Bootstrap's .row is float-based, so the text column (short: heading + 3
   bullets + button) just sat at the top of the tall image's height with a
   lot of dead space below it. Flexing the row and centering vertically
   makes the two columns read as one balanced block regardless of length. */
#company-teaser .row { display: flex; flex-wrap: wrap; align-items: center; }
#company-teaser .company-teaser-img { border-radius: 8px; overflow: hidden; min-height: 260px; height: 100%; box-shadow: 0 16px 32px rgba(0,0,0,.12); }
#company-teaser .company-teaser-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
#company-teaser h2 { font-size: 26px; margin: 0 0 16px; font-weight: 700; }
#company-teaser ul { list-style: none; padding: 0; margin: 0 0 24px; }
#company-teaser ul li { padding-left: 26px; position: relative; margin-bottom: 12px; font-size: 14px; color: var(--catalog-text); }
#company-teaser ul li .fa { position: absolute; left: 0; top: 3px; color: var(--brand-gold); }
@media (max-width: 991px) { #company-teaser .company-teaser-img { margin-bottom: 24px; } }

/* Scroll-reveal: fade/slide elements in as they enter the viewport (see
   /assets/js/reveal.js). Visible by default — only hidden pre-reveal when
   html.has-reveal-js is present, which header.php sets synchronously in
   <head>. That way a slow/blocked/erroring script just skips the
   animation instead of ever leaving content stuck invisible. */
.reveal { transition: opacity .6s ease, transform .6s ease; }
html.has-reveal-js .reveal { opacity: 0; transform: translateY(24px); }
html.has-reveal-js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-1 { transition-delay: .12s; }
.reveal-2 { transition-delay: .24s; }

/* Plain white/gray sections read as empty on a catalogue site with no
   photography of their own — a faint blueprint-style dot grid plus a soft
   brand-gold glow gives them depth without adding more boxes/copy. */
/* flex-shrink:0 matters here: body is a flex column with a *definite*
   height (html,body{height:100%} stacked with min-height:100vh for the
   sticky footer). overflow:hidden zeroes a flex item's automatic minimum
   size, so without this these sections got crushed down to ~100px to fit
   everything inside one viewport height instead of overflowing normally. */
#info, .brand-strip, #brands-catalog, #company-teaser, .reviews-preview, #testimonials {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    background-image: radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px);
    background-size: 22px 22px;
}
/* #info deliberately excluded from this glow (unlike the other sections
   below it on the page) — it sits directly beneath the dark .stats-strip,
   and this same top-right glow there read as a stray warm/beige stain right
   on the hard dark-to-white seam rather than added depth (reported twice as
   a "white line" artifact at that exact corner) — confirmed via a zoomed
   crop of the seam. The other sections transition from white/light-gray to
   white/light-gray, a soft enough boundary that the glow doesn't produce
   the same effect. */
.brand-strip::before, #brands-catalog::before, #company-teaser::before, .reviews-preview::before, #testimonials::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244,208,63,.16) 0%, rgba(244,208,63,0) 70%);
    pointer-events: none;
}
#info > .container, .brand-strip > .container, #brands-catalog > .container, #company-teaser > .container, .reviews-preview > .container, #testimonials > .container {
    position: relative;
}