/* =============================================================
   Responsive overrides
   The compiled Vite CSS uses 1024px as the burger/drawer
   breakpoint. These rules push that boundary down to 940px
   (full horizontal nav from ≥940px) and fine-tune contact
   element visibility.
   ============================================================= */

/* ------------------------------------------------------------------
   0. Fix semantic inline formatting suppressed by the global reset
      The compiled CSS has *{font-weight:400!important}; a type
      selector wins on specificity so !important here takes effect.
   ------------------------------------------------------------------ */
/* font-weight override must live inside the same @layer base to beat
   the compiled * { font-weight: 400 !important } via specificity */
@layer base {
    strong, b { font-weight: 700 !important; }
}
em, i { font-style: italic !important; }
u     { text-decoration: underline !important; }

/* Links inside WP/ACF rich-text areas must be inline, not flex */
.single-blog__desc a,
.about__text a,
.support__paragraph a,
.support__container a,
.support__block-info a,
.contacts__warning a {
    display: inline;
}

.single-item__tabs-panel a {
    display: flex;
    margin: 0;
    justify-content: start;
}

/* ------------------------------------------------------------------
   1. Restore full-nav layout for 820–1024px
      The compiled CSS activates the burger drawer at ≤1024px.
      Override: keep the horizontal menu at ≥820px.
   ------------------------------------------------------------------ */
@media (min-width: 820px) and (max-width: 1024px) {
    .header__burger    { display: none; }
    .header__container { justify-content: space-between; }
    .header__menu {
        position:       static;
        z-index:        auto;
        pointer-events: auto;
        background:     transparent;
        flex-direction: row;
        align-items:    center;
        width:          auto;
        height:         auto;
        padding:        0;
        transition:     none;
        overflow-y:     visible;
        transform:      none;
        box-shadow:     none;
        flex-grow:      1;
    }
    .header--dark .header__menu { background: transparent; }
    .header__nav {
        flex-direction: row;
        width:          auto;
        flex-grow:      1;
    }
    .header__list {
        flex-direction:  row;
        justify-content: start;
        align-items:     center;
        gap:             10px;
        width:           auto;
        flex-grow:       1;
    }
    .header__item {
        border-bottom: none;
        width:         auto;
    }
    .header--dark .header__item { border-bottom-color: transparent; }
    .header__link {
        padding:   6px 10px;
        font-size: .9375rem;
        display:   inline-block;
    }
    .header__bottom {
        flex-wrap:   wrap;
        align-items: flex-end;
        gap:         16px;
    }
    .header__bottom > :not(.header__shell-logo) { margin-bottom: 0; }
    .header__call  { display: block; }
    .header__write { display: block; }
    .header__link:hover::after,
    .header__link--active::after { display: block; }
}

/* ------------------------------------------------------------------
   1b. Burger-mode layout fixes at ≤819px (compiled CSS range).
       Compiled: align-items:flex-end + margin-bottom:11px on children.
       Override to center so logo and call-me button sit on one axis.
   ------------------------------------------------------------------ */
@media (max-width: 819px) {
    .header__bottom {
        align-items: center;
    }
    .header__bottom > :not(.header__shell-logo) {
        margin-bottom: 0;
    }
    .header__call-me {
        align-items: inherit;
    }
    .header__link:hover::after,
    .header__link--active::after {
        display: none;
    }
}

/* ==================================================================
   FRONT PAGE — main-intro banner grid for 1200–1439px
   Compiled CSS keeps calc(100vh - 235px) here which collapses on
   short viewports (laptops). Fix: use a fixed height and restore
   the original desktop grid-area assignments.
   ================================================================== */
@media (min-width: 1200px) and (max-width: 1439px) {
    .main-intro__pics {
        height: 580px;
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: 5fr 3fr;
    }
    /* Restore desktop grid areas (overrides @media max-width:1439px) */
    .main-intro__pic--large {
        grid-area: 1 / 1 / 3 / 2;
    }
    .main-intro__pic--medium:first-of-type {
        grid-row: 1 / 2;
    }
    .main-intro__pic--medium:last-of-type {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }
    .main-intro__pic--medium:last-of-type a img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }
}

/* ==================================================================
   FRONT PAGE — Shell-logo banner (main-intro__pic--medium:last-of-type)
   Compiled CSS: <a> is display:grid with implicit columns (auto auto),
   overflow:hidden; font-size:clamp(2.25rem,7vh,4.5rem);
   image max-height:clamp(80px,18vh,190px). Both use vh — when viewport
   height changes (zoom, different screens) the image and text grow/shrink
   independently of the container width → text overflows or image crowds.
   Fix: tie both to vw so they scale together with the container width.
   grid-template-columns: auto minmax(0,1fr) prevents text column from
   widening past available space. overflow:visible removes <a> clipping.
   ================================================================== */
.main-intro__pic--medium:last-of-type a {
    grid-template-columns: auto minmax(0, 1fr);
    overflow: visible;
}
.main-intro__pic--medium:last-of-type a span {
    min-width: 0;
    font-size: clamp(1.5rem, 4.5vw, 2.5rem);
}
.main-intro__pic--medium:last-of-type a img {
    max-height: clamp(60px, 11vw, 160px);
    object-fit: contain;
}

/* ==================================================================
   FRONT PAGE — main-intro banner grid for tablet (768–1199px)
   Desktop: viewport-height grid with 5fr/3fr columns (complex).
   Tablet: fixed-height rows, large banner full-width top,
           two medium banners side-by-side below.
   ================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
    .main-intro__pics {
        height: auto;
        min-height: 0;
        grid-template-rows: 360px 260px;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        padding: 20px var(--side-pad);
    }
    .main-intro__pic--large {
        grid-area: 1 / 1 / 2 / 3;
        min-height: 0;
    }
    .main-intro__pic--medium:first-of-type {
        grid-area: 2 / 1 / 3 / 2;
        min-height: 0;
    }
    .main-intro__pic--medium:last-of-type {
        grid-area: 2 / 2 / 3 / 3;
        min-height: 0;
    }
}

/* ==================================================================
   FRONT PAGE — main-about__dist (image + text)
   Default grid 'auto 1fr' means image takes natural width (604px).
   With adaptive padding, content = 748px across the entire
   768–1199px range → image leaves only ~124px for text → breaks.
   Fix: stack to single column for the whole tablet range (≤1199px).
   At ≥1200px content = 1100px, image 604px, text ~476px — fine.
   ================================================================== */
@media (max-width: 1199px) {
    .main-about__dist {
        grid-template-columns: 1fr;
    }
    .main-about__dist img {
        width: 100%;
        height: auto;
        max-height: 300px;
        object-fit: cover;
    }
}

/* ==================================================================
   CATALOG / ABOUT — bx-component img+txt variants (≤1199px)
   --img-txt: image left, text right (auto 1fr). Image is ~444px on
   catalog cards — at 748px content leaves only ~284px for text.
   --txt-img: text left, image right. Partner images 561px and 447px —
   text gets ~175px which is unreadable.
   Both: stack to single column. --txt-img image moves on top (order:-1)
   since image is second in DOM; --img-txt image is already first.
   ================================================================== */
@media (max-width: 1199px) {
    .bx-component--img-txt,
    .bx-component--txt-img {
        grid-template-columns: 1fr;
    }
    .bx-component--img-txt img {
        width: 100%;
        height: auto;
        max-height: 300px;
        object-fit: cover;
    }
    .bx-component--txt-img img {
        order: -1;
        width: 100%;
        height: auto;
        max-height: 300px;
        object-fit: cover;
    }
}

/* ==================================================================
   INTRODUCTION — логотип семейства рядом с логотипом Shell
   Compiled CSS задаёт размеры только в @media(max-width:1199px):
   Shell 109×54px; у introduction__shell-product нет CSS-размеров.
   На десктопе (≥1200px) Shell рендерится по HTML-атрибуту 215×107.
   На ≤767px оба скрыты (display:none) — правила для мобайла не нужны.
   ================================================================== */
/* .introduction__back and .introduction__shell-product share the same grid area (col 2).
   padding-right pushes text away from the logo; max-width caps the logo width so
   the reserved gap is predictable regardless of image aspect ratio. */
.introduction__shell-product {
    height: 107px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

.introduction__back {
    padding-right: 220px;
}

@media (max-width: 1199px) {
    .introduction__shell-product {
        height: 54px;
        width: auto;
        max-width: 110px;
    }

    .introduction__back {
        padding-right: 130px;
    }
}

@media (max-width: 767px) {
    /* logo is display:none on mobile — no overlap possible */
    .introduction__back {
        padding-right: 0;
    }
}

/* ==================================================================
   CATALOG — логотип семейства рядом с логотипом Shell
   Compiled CSS задаёт размеры только в @media(max-width:1199px):
   Shell 46×41px, семейство height:38px. На десктопе (≥1200px) нет
   ограничений — Shell рендерится по HTML-атрибуту 92×82.
   Выравниваем семейство по высоте Shell: 82px на десктопе, 41px ниже.
   ================================================================== */
.catalog__assortment-logos img:last-child {
    height: 82px;
    width: auto;
}

@media (max-width: 1199px) {
    .catalog__assortment-logos img:last-child {
        height: 41px;
        width: auto;
    }
}

/* ==================================================================
   FRONT PAGE — mobile (≤767px)
   Four fixes bundled:
   1. main-intro: add missing grid-template-columns:1fr — compiled CSS
      has gap/padding only, no column reset → banners stay 2-column
   2. main-about__history img: compiled CSS has display:none on mobile;
      override to show it (the <picture> already has a mobile srcset)
   3. main-bestseller: lock to 2 columns explicitly
   ================================================================== */
@media (max-width: 767px) {

    /* 1. Banner grid — 3 rows, one per row */
    .main-intro__pics {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        height: auto;
        min-height: 0;
    }
    .main-intro__pic--large {
        grid-area: 1 / 1;
        min-height: 220px;
    }
    .main-intro__pic--medium:first-of-type {
        grid-area: 2 / 1;
        min-height: 160px;
    }
    .main-intro__pic--medium:last-of-type {
        grid-area: 3 / 1;
        grid-column: auto;
        min-height: 140px;
    }

    /* 2. About history picture — restore visibility */
    .main-about__history img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* 3. Bestsellers — explicit 2 columns */
    .main-bestseller__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==================================================================
   ABOUT PAGE — about__adv-container Shell logo
   Compiled CSS: flex-direction:row at ≤1439px, column at ≤1024px.
   Desktop (>1024px): logo shows at natural 234px — flex-shrink:0
   keeps it from being squeezed by long text in the adjacent card.
   Tablet (≤1024px): compiled CSS already stacks container to column,
   so the logo goes full-row; cap at 140px so it doesn't dominate.
   Mobile (≤767px): our rule already centres it (see block below).
   ================================================================== */
.about__adv-container > img {
    flex-shrink: 0;
    height: auto;
}

@media (max-width: 1024px) {
    .about__adv-container > img {
        max-width: 140px;
    }
}

/* ==================================================================
   ABOUT PAGE — about__support-container (≤1199px)
   Desktop: compiled flex-row preserved — text left, buttons right.
   Tablet/mobile: stack to column — text on top, buttons below.
   Buttons keep their compiled width (348px), not stretched.
   ================================================================== */
@media (max-width: 1199px) {
    .about__support-container {
        flex-direction: column;
        gap: 30px;
    }
}

/* ==================================================================
   ABOUT PAGE — mobile (≤767px)
   Four fixes (adv-container and support-container handled above):
   1. about__adv-container: flex-row → column; logo centred
   2. about__storage-container: grid 5fr 4fr → single column
   3. news items: bx-component--img-txt → single column (image first
      in DOM so naturally appears on top — no order needed)
   4. about__personnel ul / about__docs ul: 4 cols → 2 cols
   ================================================================== */
@media (max-width: 767px) {
    .about__adv-container {
        flex-direction: column;
    }
    .about__adv-container > img {
        margin: 0 auto;
    }

    .about__storage-container {
        grid-template-columns: 1fr;
    }

    .about__news-post .bx-component--img-txt {
        grid-template-columns: 1fr;
    }
    .about__news-post .bx-component--img-txt img {
        width: 100%;
        max-height: 220px;
        object-fit: cover;
    }

    .about__docs ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==================================================================
   ABOUT PAGE — team carousel
   Desktop ≥1200px : 4 cards | 1200–768px : 3 cards
   ≤767px : 2 cards | ≤480px : 1 card (with right peek)
   ================================================================== */
.about__team-slider {
    display: flex;
    align-items: center;
    gap: 8px;
}

.about__personnel ul {
    display: flex !important;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 20px;
    padding-bottom: 8px;
    scrollbar-width: none;
    align-items: stretch;
}
.about__personnel ul::-webkit-scrollbar {
    display: none;
}

.about__personnel li {
    flex: 0 0 calc((100% - 3 * 20px) / 4);
    scroll-snap-align: start;
    justify-content: flex-start;
}

.about__personnel li img {
    width: 100%;
    height: 219px;
    object-fit: contain;
    flex-shrink: 0;
}
.about__personnel li h4 {
    text-align: center;
}

.about__team-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid currentColor;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s, border-color 0.15s;
}
.about__team-btn:hover:not([disabled]) {
    background-color: #FFD100;
    border-color: #FFD100;
}
.about__team-btn[disabled] {
    opacity: 0.25;
    cursor: default;
}

@media (max-width: 1199px) {
    .about__personnel li {
        flex: 0 0 calc((100% - 2 * 20px) / 3);
    }
}

@media (max-width: 767px) {
    .about__personnel li {
        flex: 0 0 calc((100% - 20px) / 2);
    }
    .about__team-btn {
        width: 34px;
        height: 34px;
    }
}

@media (max-width: 480px) {
    .about__personnel li {
        flex: 0 0 calc(100% - 10px);
    }
    .about__team-btn {
        width: 30px;
        height: 30px;
    }
}

/* ==================================================================
   ABOUT PAGE — news item image widths
   Default grid: auto 1fr — image at natural 441px, text fills rest.
   Range         Content   Image   Text
   1200–1439px   1100px    360px   ~720px
   768–1199px     748px    294px   ~434px
   ≤767px        stacked, full-width, 220px max-height (block above)
   ≤480px        small phones — reduce stacked height to 160px
   ================================================================== */
@media (min-width: 1200px) and (max-width: 1439px) {
    .about__news-post .bx-component--img-txt img {
        width: 360px;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .about__news-post .bx-component--img-txt img {
        width: 294px;
    }
}

@media (max-width: 480px) {
    .about__news-post .bx-component--img-txt img {
        max-height: 160px;
    }
}

/* ==================================================================
   CONTACTS PAGE — interactive map (iframe)
   Yandex widget outputs: div[style] > a*3 + iframe[width=560 height=400]
   Map fills exactly half of contacts__office on desktop and tablet.
   ================================================================== */
.contacts__map--iframe {
    flex: 0 0 50%;
    min-width: 0;
    position: relative;
    min-height: 380px; /* floor when sibling is short */
}

/* Stretch the Yandex wrapper div to fill the container */
.contacts__map--iframe > div {
    position: absolute !important;
    inset: 0;
    overflow: hidden;
}

.contacts__map--iframe iframe {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
    border: 0;
}

/* ==================================================================
   CONTACTS PAGE — tablet (768–1199px)
   Keep side-by-side layout; fix cities grid alignment.
   ================================================================== */
@media (max-width: 1199px) {
    .contacts__cities {
        justify-items: start;
        align-content: start;
    }
    .contacts__city {
        text-align: left;
    }
    /* 3 contact items stacked to 1 column */
    .contacts__list {
        grid-template-columns: 1fr;
    }
}

/* ==================================================================
   CONTACTS PAGE — mobile (≤767px)
   Stack map on top, office info below; both full width.
   ================================================================== */
@media (max-width: 767px) {
    .contacts__office {
        flex-direction: column;
    }
    .contacts__map {
        width: 100%;
        height: auto;
    }
    .contacts__map--iframe {
        flex: none;
        width: 100%;
        min-height: 0;
        height: 280px; /* fixed height on mobile — iframe fills it via absolute */
    }
}

/* ==================================================================
   FOOTER — footer__company-name logo height (≤767px)
   Compiled CSS: width:auto; height:60px (desktop, no media query).
   No mobile override exists in compiled CSS. On narrow screens the
   60px logo is fine visually, but the adjacent text should breathe —
   reduce to 44px on mobile to match the header logo scale.
   ================================================================== */
@media (max-width: 767px) {
    .footer__company-name img {
        height: 44px;
    }
}

/* ==================================================================
   FOOTER — balanced columns (≥768px)
   Compiled desktop rule: 1fr 2fr 1fr — col-2 (Contacts) is double-wide.
   Equal 1fr×3 made col-1 (logo+nav) visually dominant.
   Compromise: 1fr 1.5fr 1fr — Contacts gets moderate priority,
   col-1 and col-3 stay equal and visually subordinate.
   ================================================================== */
@media (min-width: 768px) {
    .footer__wrapper {
        grid-template-columns: 0.7fr 1fr 1fr;
    }
    /* Align col-2 and col-3 to the first nav link in col-1.
       Logo is height:60px + margin-bottom:16px = 76px offset. */
    .footer-col-2,
    .footer-col-3 {
        padding-top: 76px;
    }
}

/* ==================================================================
   FOOTER — legal-row on tablet (768–1199px)
   Desktop: links in a row + disclaimer on the right.
   Tablet: stack the row to a column, then stack footer-links to a
   column too → all 4 items (3 links + disclaimer) in one column.
   ================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
    .footer__legal-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .footer-links {
        flex-direction: column;
        gap: 8px;
    }
}

/* ==================================================================
   FOOTER — social icons row
   ================================================================== */
.footer__social-icons {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0;
}

.footer__social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    transition: opacity 0.15s;
}

.footer__social-icons a:hover {
    opacity: 0.75;
}

.footer__social-icons img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* ==================================================================
   SIDE PADDING — fluid layout
   Single clamp() replaces three discrete breakpoints.
   At narrow screens (≤1040px) padding stays at 10px and content
   fills the viewport; above 1040px padding grows proportionally
   (content widens); caps at 100px — content = vw−200px, which
   reaches 1240px exactly when the compiled formula kicks in at ≥1440px.
   ================================================================== */
@media (max-width: 1439px) {
    :root { --side-pad: clamp(10px, calc(50vw - 520px), 100px); }
}

/* ==================================================================
   SINGLE-OIL — specs-extended table styling
   Tables from the WYSIWYG editor have no .specs-table class and
   carry inline width="" attributes on <table> and <td>. Mirror
   the compiled .specs-table visual rules so both variants
   look identical inside .single-item__specs-extended.
   ================================================================== */
.single-item__specs-extended table {
    border-collapse: collapse;
    width: 100%;
    font-size: .9375rem;
}

.single-item__specs-extended table caption {
    text-align: left;
    margin-bottom: 12px;
    padding-bottom: 8px;
    font-size: 1.125rem;
    font-weight: 700;
}

.single-item__specs-extended table td,
.single-item__specs-extended table th {
    vertical-align: middle;
    border-bottom: 1px solid #e0e0e0;
    padding: 9px 14px;
    width: auto;        /* сбрасываем инлайновые width="" от WYSIWYG */
}

.single-item__specs-extended table th {
    color: #fff;
    text-align: left;
    background-color: #1b232b;
    font-weight: 600;
}

.single-item__specs-extended table tr:nth-child(2n) td {
    background-color: #f7f7f7;
}

/* ==================================================================
   SINGLE-OIL — specs-table overflow on mobile
   Applies to both the .specs-table (demo) and WYSIWYG tables.
   Turning the table into a block element lets it scroll
   independently without causing page-level horizontal scroll.
   ================================================================== */
@media (max-width: 767px) {
    .specs-table,
    .single-item__specs-extended table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==================================================================
   SINGLE-OIL / TAXONOMY — supply__list related products
   Items use flex:0 0 calc(33.33%-33px) with flex-shrink:0, so they
   never compress. On mobile 3×~91px is unreadable.
   Fix: wrap to 2-per-row at ≤767px.
   ================================================================== */
@media (max-width: 767px) {
    .supply__list {
        flex-wrap: wrap;
        gap: 20px;
    }
    .supply__item {
        flex: 1 1 calc(50% - 10px);
    }
}

/* ==================================================================
   BUY-NOW MODAL — fluid columns
   Compiled: fixed 269px 1fr 220px. clamp()+% lets the two outer
   columns scale with the modal container width, removing the need
   for a mid-range tablet breakpoint. At ≤700px stacks to 1 column.
   ================================================================== */
.buy-now-modal__body {
    grid-template-columns: clamp(140px, 30%, 269px) 1fr clamp(120px, 25%, 220px);
}

@media (max-width: 700px) {
    .buy-now-modal__body {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .buy-now-modal__img {
        width: 100%;
        height: auto;
        max-height: 260px;
        object-fit: contain;
    }
}

/* ==================================================================
   SINGLE-FAMILY — form-component overrides
   Compiled CSS limits the form to max-width:480px (kept intentionally).
   The submit button mirrors .form-component p: margin:0 auto absorbs
   free space and overrides the default grid justify-self:stretch,
   so the button centers at content width — same mechanism as the p.
   ================================================================== */
.product-card {
    width: auto;
}

.single-family .form-component button {
    grid-column: 1 / 3;
    margin: 0 auto;
}

/* ==================================================================
   ALL FORMS — form-component (≤767px)
   Desktop: grid repeat(2,1fr) — fields sit in pairs.
   No compiled-CSS override exists for any viewport below desktop.
   Mobile: collapse to single column so every field gets full width.
   ================================================================== */
@media (max-width: 767px) {
    .form-component {
        grid-template-columns: 1fr;
    }
}

/* ==================================================================
   CHECKOUT — form-customer__row and form-payment columns (≤767px)
   form-customer__row: two inputs side-by-side (1fr 1fr) — at ~375px
   each field is ~167px which is tight. Stack to single column.
   form-payment__labels: 3-column order header (2fr 1fr 1fr).
   On mobile the header is meaningless without side-by-side rows —
   hide it; form-payment__item also collapses to single column.
   ================================================================== */
@media (max-width: 767px) {
    .form-customer__row {
        grid-template-columns: 1fr;
    }
    .form-payment__labels {
        display: none;
    }
    .form-payment__item {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* ==================================================================
   SUPPORT PAGE — support__container analytics (768–1024px)
   Desktop: repeat(2,1fr) — two analytics articles side-by-side.
   No compiled-CSS override exists between 1024px and 767px.
   The gap from compiled 1024px breakpoint to 767px mobile-only fix
   leaves the two-column layout active on tablets (748px content).
   Fix: single column from 768px up to the compiled 1024px boundary.
   ================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    .support__container {
        grid-template-columns: 1fr;
    }
}

/* ==================================================================
   TAXONOMY — single-group__grid SEO blocks (768–1024px)
   Desktop: repeat(2,1fr) — three SEO bx-component blocks in 2 cols
   (third block sits alone in a second row). No override at 768–1024px.
   Compiled CSS drops to 1fr only at ≤767px. Stack earlier.
   ================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    .single-group__grid {
        grid-template-columns: 1fr;
    }
}

/* ==================================================================
   CATALOG / TAXONOMY — aside sidebar (fluid)
   Compiled default: width:296px + margin-right:60px.
   clamp() lets the sidebar shrink smoothly with viewport width:
   196px at ≤1090px (vw), 296px at ≥1645px, proportional in between.
   margin-right scales from 16px to 60px across the same range.
   ================================================================== */
.aside {
    width: clamp(196px, 18vw, 296px);
    margin-right: clamp(16px, 2.5vw, 60px);
}

/* ==================================================================
   TAXONOMY — single-group__list product grid (all viewports)
   Compiled default: repeat(auto-fill,minmax(262px,auto)) +
   justify-content:space-between — an orphan card in the last row
   stretches to the full goods-area width (щербина). The compiled
   @media(max-width:767px) already uses 1fr; we extend the fix to
   all breakpoints: 1fr max fills tracks evenly, justify-content:start
   keeps orphans at their natural width.
   minmax uses 262px at ≥1200px (design card width) and 225px below
   to allow more columns at tablet content width.
   ================================================================== */
.single-group__list {
    grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
    justify-content: start;
}

.product-card-wrapper {
    width: 100%;
}

@media (max-width: 1199px) {
    .single-group__list {
        grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
        gap: 36px 20px;
    }
}

/* ==================================================================
   ABOUT PAGE — about__storage-container (≤1199px)
   Desktop: 5fr 4fr — storage photo + text nearly equal columns.
   At 748px content width two unequal columns are cramped.
   Compiled CSS drops to 1fr only at ≤767px. Stack from tablet.
   ================================================================== */
@media (max-width: 1199px) {
    .about__storage-container {
        grid-template-columns: 1fr;
    }
}

/* ==================================================================
   SINGLE-FAMILY — spacing below description before "Может подойти"
   Compiled CSS: margin-bottom:65px on .signle-family__description.
   The supply section has no top margin, so they visually merge.
   Add padding-bottom so the gap feels deliberate.
   ================================================================== */
.signle-family__description {
    padding-bottom: 40px;
}

/* ==================================================================
   SINGLE-FAMILY — article flex layout
   Compiled CSS sets display:flex and font-size via the parent
   selector .signle-family__description article. Declare them
   directly here too so the layout works independently of the
   parent class name (which has a typo in the compiled bundle).
   ================================================================== */
.single-family__txt-img,
.single-family__img-txt {
    display: flex;
    gap: 20px;
    font-size: 1.25rem;
    line-height: 142%;
}

/* Text wrapper: groups all <p> from wp_kses_post into one flex item
   so multiple paragraphs don't each become a separate flex child.
   min-width:0 prevents text from blowing out of the flex column. */
.single-family__text {
    flex: 1;
    min-width: 0;
}

/* Image is a fixed-dimension flex item — don't let it shrink into text. */
.single-family__txt-img > img,
.single-family__img-txt > img {
    flex-shrink: 0;
    align-self: flex-start;
}

/* ==================================================================
   SINGLE-FAMILY — article images on tablet (768–1199px)
   Images stay at compiled-CSS width:50% (≈374px at 748px content).
   Cap height so portrait-ratio images don't dominate the column.
   ================================================================== */
@media (max-width: 1199px) {
    .single-family__txt-img > img,
    .single-family__img-txt > img {
        max-height: 300px;
        object-fit: cover;
    }
}

/* ==================================================================
   SINGLE-FAMILY — stack to column on mobile (≤767px)
   Matches the compiled CSS breakpoint for flex-direction:column.
   Images go full-width with a generous height cap.
   ================================================================== */
@media (max-width: 767px) {
    .single-family__txt-img,
    .single-family__img-txt {
        flex-direction: column;
        font-size: 1rem;
    }
    .single-family__txt-img > img,
    .single-family__img-txt > img {
        flex-shrink: 1; /* allow image to stretch full-width in column direction */
        width: 100%;
        height: auto;
        max-height: 360px;
        object-fit: cover;
    }
}

/* ==================================================================
   SINGLE BLOG — prev/next navigation (≤480px)
   Desktop: flex row with space-between, gap:50px → 12px at ≤1024px.
   On very narrow screens (≤480px) two links with multi-word labels
   and 49px arrow icons can collide. Stack to column.
   ================================================================== */
@media (max-width: 480px) {
    .single-blog__navigation {
        flex-direction: column;
        gap: 20px;
    }
}

/* ==================================================================
   GLOBAL — img max-width safety net
   Compiled CSS sets img{object-fit:cover} but has no max-width:100%.
   Images with fixed HTML width attributes overflow narrow viewports
   on any page without an explicit image override.
   height:auto intentionally NOT set here — logos like header__logo img
   (height:44px) and footer__company-name img (height:60px) rely on
   an explicit height in compiled CSS; overriding to auto breaks them.
   ================================================================== */
img {
    max-width: 100%;
}

/* ==================================================================
   SINGLE-OIL — вкладки товара (≤480px)
   .single-item__tabs-head: display:flex, gap:24px, fit-content.
   На ≤480px три кнопки «Описание / Характеристики / Документы»
   при узком экране могут вылезти за край. flex-wrap переносит
   лишние кнопки на следующую строку, text-align:center выравнивает.
   ================================================================== */
@media (max-width: 480px) {
    .single-item__tabs-head {
        flex-wrap: wrap;
        width: 100%;
    }
    .single-item__tabs-btn {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* ==================================================================
   CHECKOUT — form-upload touch target (≤767px)
   The label has padding:20px but no explicit min-height. On some
   mobile browsers the flex content collapses smaller than 44px.
   Ensure a reliable tap area.
   ================================================================== */
@media (max-width: 767px) {
    .form-upload__label {
        min-height: 80px;
    }
}

/* ==================================================================
   SINGLE-OIL — active tab yellow underline indicator
   .single-item__tabs-head has border-bottom:2px solid #ccc.
   Active button gets a yellow ::after that sits at bottom:-2px,
   visually replacing the gray border just under that button.
   JS (js/tabs.js) toggles the .active class on scroll and click.
   ================================================================== */
.single-item__tabs-btn {
    position: relative;
}

.single-item__tabs-btn.active {
    color: #000;
}

.single-item__tabs-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #fcbe1d;
    border-radius: 1px;
}

/* ==================================================================
   SINGLE-OIL — PDF icon before document link (docs tab)
   compiled CSS: a{display:flex} — ::before becomes a flex item.
   SVG: Font Awesome fa-file-pdf solid (384×512 viewBox), red fill.
   ================================================================== */
.single-item__tabs-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.single-item__tabs-text::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 20px;
    height: 27px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3e%3cpath fill='%23e53935' d='M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zm384 64H256V0L384 128zM64 240h20.4c17 0 30.7 13.7 30.7 30.7c0 17-13.7 30.7-30.7 30.7H80v32H64V240zm16 44h4.4c8.3 0 14.7-6.7 14.7-14.7c0-8-6.4-14.7-14.7-14.7H80v29.4zm48-44h18.4C159.1 240 172 252.9 172 268.8v14.4C172 299.1 159.1 312 143.1 312H128V240zm15.9 56c8 0 12.1-4.3 12.1-12.3v-14.4c0-8-4.1-12.3-12.1-12.3H144V296h15.9zm48-56H256v16H208v12h48v16H208v28H192V240z'/%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* ------------------------------------------------------------------
   Toast variants
   ------------------------------------------------------------------ */
.toast--error {
    border-left-color: #cb0f10;
}

/* ------------------------------------------------------------------
   Thank You page
   ------------------------------------------------------------------ */
.thank-you {
    padding-top: 80px;
    padding-bottom: 100px;
}

.thank-you__content {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

.thank-you__content .slogan {
    margin-bottom: 20px;
}

.thank-you__content > p {
    margin-bottom: 40px;
    line-height: 1.6;
}

.thank-you__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: center;
}

.thank-you__actions .btn-yellow,
.thank-you__actions .btn-grey {
    display: inline-flex;
    width: auto;
    max-width: none;
    margin: 0;
}

@media (max-width: 480px) {
    .thank-you__actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ==================================================================
   COOKIES CONSENT — "Принять" button overrides toast__close icon style
   ================================================================== */
.toast__accept {
    color: #ffc801;
    font-size: .8125rem;
    font-weight: 700;
    white-space: nowrap;
    align-self: center;
}
.toast__accept:hover { color: #e6b300; }

/* ==================================================================
   SUPPORT PAGE — collapsible legal paragraphs
   Default: show ~4 lines. Button toggles is-expanded.
   ================================================================== */
.support__paragraph-body {
    max-height: 7em;
    overflow: hidden;
}
.support__paragraph-body.is-expanded {
    max-height: none;
}

/* ==================================================================
   RICH-TEXT CONTENT — восстановление списочных маркеров
   Compiled CSS + Tailwind reset снимают list-style:none со всех ul/ol.
   Внутри редакторских зон (the_content, wysiwyg ACF) маркеры нужны.
   ================================================================== */
.single-blog__desc ul,
.support__block-info ul,
.support__paragraph-body ul,
.support__consultant-text ul {
    list-style: disc;
    padding-left: 1.4em;
    margin: 0.5em 0;
}
.single-blog__desc ol,
.support__block-info ol,
.support__paragraph-body ol,
.support__consultant-text ol {
    list-style: decimal;
    padding-left: 1.4em;
    margin: 0.5em 0;
}
.single-blog__desc li,
.support__block-info li,
.support__paragraph-body li,
.support__consultant-text li {
    margin-bottom: 0.3em;
}
/* Вложенные списки */
.single-blog__desc ul ul,
.single-blog__desc ol ol,
.single-blog__desc ul ol,
.single-blog__desc ol ul {
    list-style: circle;
    margin: 0.2em 0;
}

/* ==================================================================
   SUPPORT PAGE — банковские реквизиты
   ================================================================== */
.support__req-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 24px;
    margin: 0;
}
.support__req-list dt {
    color: #888;
    white-space: nowrap;
}
.support__req-list dd {
    margin: 0;
    font-weight: 600;
    word-break: break-all;
}
.support__req-note {
    margin-top: 16px;
}
@media (max-width: 480px) {
    .support__req-list {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .support__req-list dd {
        margin-bottom: 10px;
    }
}