/* ==================================================================
 * Responsive overrides (mobile breakpoints, mockup 375)
 * Loaded after styles.css — desktop rules live in styles.css.
 * ================================================================== */

/* ==================================================================
 * Intermediate — between the 1440 and 375 mockups.
 * Nothing here is drawn in Figma; it is the ground the two mockups have to
 * meet over. The rule is that no box may grow past its container and no
 * fixed desktop measurement may survive into a width it was not measured at.
 * ================================================================== */
/* About — Mission and Standards. The mockup's three equal columns are measured
   against a 1320 row: below 1350 the two card columns fall under the 420 the
   card was drawn at, and by 1100 a fixed 3:2 box is cutting five lines of copy
   down to three behind `overflow: hidden`. The intro takes a row of its own
   from here down and the cards get the full width. Their own horizontal
   scroller is a 768-and-below thing and stays there. */
/* The container stops being 1320 below 1350, and with it the tab column: the
   mockup's 30px of side padding no longer fits inside a third of it. */
@media (max-width: 1349px) {
    .supply__tab {
        padding: 0 10px;
    }
}

@media (max-width: 1200px) {
    .about-mission__row,
    .about-standards__row {
        grid-template-columns: 1fr;
    }
    .about-mission__grid,
    .about-standards__grid {
        grid-column: 1;
    }
    /* Full width is too long a line for the intro; 745 is the measure the CSR
       intro already holds itself to. */
    .about-mission__lead,
    .about-standards__lead {
        max-width: 745px;
    }
}

@media (max-width: 1080px) {
    .have-question__text {
        flex: 1 1 45%;
        width: 45%;
    }
    .have-question__form {
        flex: 1 1 55%;
        width: 55%;
    }
}

@media (max-width: 992px) {
    /* Home — Hero banner: the copy is no longer half the photograph's width,
       so it takes the box and the desktop's 60px inset comes down with it. */
    .banner__box {
        max-width: 100%;
        padding: 45px;
    }
    .banner__desc {
        padding-right: 0;
    }
    .banner .swiper-button-area {
        padding-bottom: 45px;
        padding-right: 45px;
    }

    /* Home — Have a question: the card is still 532, the section's 60px of
       side padding is what stops fitting around it. */
    .have-question {
        padding: 90px 30px;
    }

    /* About — Global Supply Network: the same squeeze, on the region tabs. The
       left column is capped at 420 and shrinks with the row, so by 992 three
       tabs share 231px and none of them can hold the word inside it. Stacked,
       the map gets the full width and the controls above it get room — the
       order the 375 mockup uses, so the two agree. */
    .supply__body {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    .supply__left {
        display: contents; /* flatten so the map can sit between select and panel */
    }
    .supply__panel {
        order: 1; /* after the map (order 0): tabs → select → map → panel */
    }
}

@media (max-width: 768px) {
    /* ==================
     * Section rhythm
     * The 375 mockups run 120px between every section, top to bottom, where the
     * 1440 ones run 180. Listed per template rather than written on `.block`,
     * which every page uses: each page is added here once its own mobile
     * mockup has been measured (Services already carries its own 120 further
     * down `styles.css`).
     * ================== */
    body.page-template-home-page .block,
    body.page-template-about-page .block,
    body.page-template-services-page .block {
        margin-bottom: 120px;
    }
    body.page-template-about-page .about-history.block {
        margin-bottom: 140px;
    }

    /* ==================
     * Breadcrumbs — a swipeable trail
     * The item page's crumb is the whole category chain (Home > Product catalog
     * > Rail Transport > High-Speed Trains > Rubber-metal parts > Steering
     * rods), which wrapped onto three lines on a phone while the last name was
     * cut to 200px with an ellipsis — the one crumb telling you where you are.
     * It scrolls sideways instead, full-bleed so a crumb is cut by the screen
     * rather than by the gutter, and the last one is shown in full.
     * ================== */
    .breadcrumbs {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-inline: -15px;
        padding-inline: 15px;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .breadcrumbs::-webkit-scrollbar {
        display: none;
    }
    .breadcrumbs > * {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .breadcrumbs__current {
        max-width: none;
    }

    /* ==================
     * Slider bullets — every pager on the site
     * The 375 mockups' own two sizes, and a **maximum** rather than a target:
     * 80 for the slide being shown, 48 for the rest, left-ranged, 5 apart.
     * They were written as a 5:3 ratio against a filled row until 2026-09-05,
     * on the reasoning that those two numbers are what the ratio comes to when
     * six bars are laid across 345 — true, and it also meant a slider with four
     * slides drew four *different* bars, none of them a size the mockup draws.
     * A row with fewer slides simply ends earlier, on the left, where it
     * starts; it is not stretched to the width.
     * `flex-basis` is doing the sizing, which is the only thing that can:
     * swiper's own
     * `.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet…`
     * is a four-class selector setting `width: 150px`, and nothing scoped to a
     * component out-specifies it — but in a flex row a definite basis decides
     * the main size whatever `width` says.
     * Shrinking is left on (`0 1`, not `0 0`) for the widths the mockup does
     * not draw: six bars come to 335 of the 345 row at 375, but on a 320 screen
     * they would wrap onto a second row, and a squeezed row reads better than a
     * pager two rows tall.
     * Every pager on the site is here — the home banner, "Recent News" (which
     * is also an article's "Other News"), CSR, the reviews and the item page's
     * "Other products". They are named rather than reached by a bare
     * `.swiper-pagination-bullet`, because that class alone loses to swiper's
     * own four-class `width: 150px` and only the basis would land.
     * Only the four full-width rows are stretched and left-ranged below; the
     * item page's pager shrink-wraps its content and stays centred in its nav
     * row, as its mockup draws it.
     * ================== */
    .banner .swiper-pagination > .swiper-pagination-bullet,
    .news__pagination > .swiper-pagination-bullet,
    .csr__pagination > .swiper-pagination-bullet,
    .reviews__pagination > .swiper-pagination-bullet,
    .related__pagination > .swiper-pagination-bullet {
        flex: 0 1 48px;
        width: 48px;
    }
    .banner .swiper-pagination > .swiper-pagination-bullet.swiper-pagination-bullet-active,
    .news__pagination > .swiper-pagination-bullet.swiper-pagination-bullet-active,
    .csr__pagination > .swiper-pagination-bullet.swiper-pagination-bullet-active,
    .reviews__pagination > .swiper-pagination-bullet.swiper-pagination-bullet-active,
    .related__pagination > .swiper-pagination-bullet.swiper-pagination-bullet-active {
        flex: 0 1 80px;
        width: 80px;
    }
    /* Left-ranged, which the CSR pager has to be told: it centres itself on the
       desktop, where the row is as wide as its bars. `nowrap` is what lets the
       shrink above happen at all — the pagers wrap by default, and a flex line
       breaks before its items are squeezed, so eight bars (a gallery the mockup
       does not draw, but an editor can fill) came out as a pager two rows tall
       instead of one tighter row. */
    .banner .swiper-pagination,
    .news__pagination.swiper-pagination,
    .csr__pagination.swiper-pagination,
    .reviews__pagination.swiper-pagination {
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: 100%;
        gap: 5px;
    }

    /* ==================
     * Home — Hero banner (carousel)
     * ================== */
    /* The 375 mockup's hero is a 345x670 portrait. Held at 768 that ratio makes
       a 738-wide photograph 1433px tall — a whole screen of picture before a
       word of it is read — so the portrait waits until 575 and the tablet gets
       4:3, which fits the copy without towering over it. */
    .banner__item {
        aspect-ratio: 4 / 3;
        border-radius: var(--radius-30);
    }
    .banner__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* The mockup darkens the lower half of the photo so the white copy holds
       (979:4566). The desktop frame has the same overlay and does not draw it
       yet, so this stays inside the mobile query rather than becoming a base
       rule that would change 1440 as a side effect. */
    .banner__item::after {
        content: "";
        position: absolute;
        z-index: 2;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(0, 20, 41, 0) 0%, rgba(0, 20, 41, 0.8) 100%);
    }
    .banner__box {
        max-width: 100%;
        /* 15 from the photo's edges, 45 above its bottom — the progress bars
           take the last 20 and the mockup leaves 25 between the two. */
        padding: 15px 15px 45px;
    }
    /* Size comes from the clamp on `.main-title`; the mockup only changes the
       cut, the leading and the case — Geologica Regular over 125%, written as
       it is typed, where 1440 sets Medium over 100% and capitalises (5:381). */
    .banner .main-title {
        font-weight: 400;
        line-height: 125%;
        text-transform: none;
    }
    .banner__desc {
        padding-right: 0;
        font-size: 16px;
    }
    /* nav: hide the arrows, keep full-width progress bullets at the bottom */
    .banner .swiper-buttons-area {
        display: none;
    }
    .banner .swiper-button-area {
        left: 0;
        right: 0;
        align-items: stretch;
        padding: 0 30px 15px;
    }
    .banner .swiper-pagination {
        width: 100%;
    }

    /* ==================
     * Home — About Us + numbers
     * ================== */
    .about-us__row {
        flex-direction: column;
        align-items: stretch;
        gap: 30px;
        margin-bottom: 67px; /* mockup: copy ends, the numbers start 60 below */
    }
    .about-us__image {
        flex: none;
        width: 100%;
    }
    .about-us__image-img {
        width: 100%;
        aspect-ratio: 345 / 259;
        object-fit: cover;
    }
    .about-us__image-img.radius-45 {
        border-radius: var(--radius-30);
    }
    .about-us__numbers {
        flex-direction: column;
        gap: 60px; /* room for the centered divider between cards */
    }
    .about-us__number-card {
        flex: none;
        width: 100%;
    }
    .about-us__number-card::after {
        top: auto;
        bottom: -30px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 150px;
        height: 1px;
    }
    .plain-text {
        padding-bottom: 0;
        font-size: 16px;
    }
    .our-services .plain-text {
        padding-bottom: 10px;
    }
    /* The numbers keep the desktop H1 on the phone — 69/100% over 20px — which
       is what the mockup's 109px card measures out to. */
    .about-us__number-value {
        font-size: 69px;
    }

    /* ==================
     * Home — Product catalog (single-column stack)
     * ================== */
    .product-catalog__header {
        padding-bottom: 5px; /* the rule sits just under the two-line heading */
    }
    .product-catalog__grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .product-catalog__card,
    .product-catalog__card--full,
    .product-catalog__card--large,
    .product-catalog__card--medium {
        grid-column: 1 / -1;
        height: auto;
        aspect-ratio: 345 / 228;
    }
    .product-catalog__card.radius-45 {
        border-radius: var(--radius-30);
    }
    /* There is no hover here, so the caption is simply on the card and the
       gradient behind it is always drawn — at the mockup's 0.8, not the 0.3 the
       desktop card fades in. The arrow that slides in with the desktop caption
       is not in the mobile mockup. */
    .product-catalog__card::before {
        opacity: 1;
        background: linear-gradient(180deg, rgba(0, 13, 26, 0) 0%, rgba(0, 13, 26, 0.8) 100%);
    }
    .product-catalog__card-title,
    .product-catalog__card-title.bottom,
    .product-catalog__card:hover .product-catalog__card-title {
        right: 0; /* 15 from both edges, as the mockup's caption row is */
        bottom: 0;
    }
    .product-catalog__card-text {
        padding: 15px;
    }
    .product-catalog__card-text svg {
        display: none;
    }
    .catalog {
        margin-top: 15px;
    }

    /* ==================
     * Home — Our services (stacked)
     * The photograph goes full width and the three plates stay on it, scaling
     * with it (see `.our-services__bullet` in styles.css). They only leave at
     * 575, where the mockup shows the photograph alone.
     * ================== */
    .our-services__row {
        flex-direction: column;
        align-items: stretch;
        gap: 30px;
    }
    .our-services__content,
    .our-services__image {
        flex: none;
        width: 100%;
        max-width: 100%;
    }

    /* ==================
     * Home — Have a question (form)
     * Between 575 and 768 the photograph is still the ground the card stands
     * on; the card just stops being 532 wide and centres.
     * ================== */
    .have-question {
        padding: 60px 15px;
    }
    .have-question__row {
        justify-content: center;
    }
    .have-question__form {
        width: 100%;
        padding: 30px;
    }
    /* The card stops being 532 wide and centres — but only in this variant. The
       Services one runs its card out to the section edges here, with a backdrop
       drawn 15 past it on either side. */
    .have-question:not(:has(.have-question__text)) .have-question__form {
        max-width: 532px;
    }
    /* 986:5461 — the card's own heading block: 29px accent over 16px copy, both
       ranged left, where the desktop card centres a 44px title. Scoped to the
       variant, because `.form-*` is shared with the footer form, the Contacts
       page and the two Career forms, each measured against its own mockup. */
    .have-question:not(:has(.have-question__text)) .form-title {
        font-size: 29px;
        text-align: left;
    }
    .form-subtitle {
        margin-bottom: 42px;
        font-size: 16px;
    }
    .form-row {
        flex-direction: column;
        gap: 24px;
        margin-bottom: 24px;
    }
    .form-row.form-row-phone-company {
        margin-bottom: 30px;
    }
    /* `.form-phone` is the phone widget's wrapper: the flag button and the
       country rows inherit their size from it, so it is sized beside the field
       it wraps and the two never disagree. */
    .form-field,
    .form-phone {
        font-size: 16px;
    }
    .form-field-cell,
    .form-field-cell.form-field-cell-message {
        flex: 1 1 100%;
        width: 100%;
    }

    .form-field.wpcf7-textarea {
        height: 70px;
    }

    .filepond--drop-label.filepond--drop-label label {
        text-align: left;
        padding-left: 15px;
        padding-right: 16px;
    }
    .filepond--root .filepond--drop-label {
        min-height: 68px;
    }

    .news__title.block-title {
        width: 120px;
    }
    .news__header {
        margin-bottom: 40px;
    }
    .news__nav {
        margin-top: 42px;
    }

    .footer-form {
        padding-top: 30px;
    }
    .footer-form .form-title {
        font-size: 29px;
    }
    .footer-form .form-subtitle {
        margin-bottom: 28px;
    }
    .main-footer .form-field,
    .main-footer .form-phone {
        font-size: 18px;
    }
    .main-footer .footer-form .form-row {
        gap: 25px;
    }
    .main-footer .footer-form .form-field-cell-file {
        margin-top: -17px;
    }
    .footer-form .form-privacy-policy {
        text-align: center;
    }
    .footer-main {
        padding-top: 0;
        padding-bottom: 5px;
    }
    .footer-brand__logo-img {
        width: 152px;
    }
    .footer-main__grid {
        gap: 30px;
    }
    .footer-col__title {
        font-size: 20px;
    }
    .footer-col[aria-label="Other pages"] .footer-col__title,
    .footer-col[aria-label="Other pages"] ul li {
        text-align: right;
    }
    .footer-col ul a {
        font-size: 14px;
    }
    .footer-col__widget {
        gap: 5px;
    }
    .footer-col ul {
        gap: 3px;
    }
    .footer-cols {
        gap: 15px;
    }
    .footer-contacts__address,
    .footer-contacts__row {
        font-size: 16px;
    }
    .footer-contacts__row-tel .footer-contacts__icon {
        width: 16px;
        height: 20px;
    }
    .footer-contacts__icon {
        width: 22px;
        height: 21px;
    }
    .footer-brand__social-link img {
        width: 34px;
        height: 34px;
    }
    .footer-brand__social {
        gap: 22px;
    }
    .footer-copy {
        padding-top: 20px;
    }
    .footer-contacts__address {
        margin-top: -8px;
    }
    .footer-legal {
        align-self: self-start;
        padding-left: 30px;
        margin-top: -6px;
        margin-bottom: 7px;
    }
    .footer-legal ul {
        flex-direction: column;
        text-align: left;
        align-items: flex-start;
        gap: 7px;
    }

    /* ==================
     * About — Hero banner
     * ================== */
    /* Same story as the home hero: the mockup's 345x670 portrait becomes a
       738x1433 wall if it is held at 768, so it waits until 575 (below) and the
       tablet gets 4:3. */
    .about-hero__frame {
        aspect-ratio: 4 / 3;
        border-radius: var(--radius-30);
    }
    /* 348:292 / 995:6486 is a plain 0 -> 0.8 fade in both mockups. The extra
       `opacity: 0.2` on the base rule left an effective 0.16 at the darkest
       point, which is not enough to carry white copy over a 345-wide photo. */
    .about-hero__gradient {
        opacity: 1;
    }
    .about-hero__box {
        max-width: 100%;
        padding: 15px;
    }
    /* 995:6496 — where 1440 sets the title in Medium, capitalised and solid,
       the phone sets it in Regular, as written, over 125%. */
    .about-hero__title {
        font-size: 32px;
        font-weight: 400;
        line-height: 125%;
        text-transform: none;
    }
    .about-hero__desc {
        max-width: 100%;
        font-size: 20px;
        line-height: 125%;
    }

    /* ==================
     * About — History and experience
     * ================== */
    .about-history__row {
        flex-direction: column;
        gap: 30px;
    }
    .about-history__aside {
        flex: none;
        width: 100%;
        max-width: 100%;
    }
    .about-history__media {
        width: 100%;
        aspect-ratio: 345 / 259; /* same 4:3 */
        border-radius: var(--radius-30);
    }
    .about-history__body h2,
    .about-history__body h3,
    .about-history__body h4 {
        font-size: 20px;
    }
    .about-history__body p {
        margin-bottom: 11px;
        font-size: 16px;
    }

    /* ==================
     * About — Our Mission and Values
     * ================== */
    .about-mission__row {
        grid-template-columns: 1fr; /* stack: intro, then cards row */
        gap: 30px;
    }
    .about-mission__intro {
        grid-column: 1;
    }
    .about-mission__lead {
        font-size: 16px;
    }
    .about-mission__grid {
        grid-column: 1;
        display: flex;
        grid-template-columns: none;
        gap: 15px;
        /* Full-bleed horizontal scroll to the viewport edges: a card leaves the
           screen at the glass, not at the container's gutter.
           `scroll-padding-inline` is what makes the gutter survive the snap.
           Without it a mandatory snap aligns the card to the scrollport's own
           start — x=0, the screen edge — so the browser pulls `scrollLeft` to
           15 on load and the first card sits flush instead of inset. With it,
           every card comes to rest on the same 15px the heading above it uses,
           while still travelling all the way off-screen in between. */
        margin-inline: -15px;
        padding-inline: 15px;
        scroll-padding-inline: 15px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
    .value-card {
        flex: 0 0 310px;
        aspect-ratio: 310 / 280;
        scroll-snap-align: start;
        padding-left: 29px;
        padding-right: 29px;
    }
    /* Type comes from the card's own width now (see `.value-card` in
       styles.css): 310 wide here resolves to the mockup's 23 / 16 / 55. */

    /* ==================
     * About — Standards & certifications
     * ================== */
    .about-standards__row {
        grid-template-columns: 1fr; /* stack: intro, then cards row */
        gap: 30px;
    }
    .about-standards__intro {
        grid-column: 1;
    }
    .about-standards__lead {
        font-size: 16px;
    }
    .about-standards__grid {
        grid-column: 1;
        display: flex;
        grid-template-columns: none;
        gap: 15px;
        /* Full-bleed horizontal scroll to the viewport edges: a card leaves the
           screen at the glass, not at the container's gutter.
           `scroll-padding-inline` is what makes the gutter survive the snap.
           Without it a mandatory snap aligns the card to the scrollport's own
           start — x=0, the screen edge — so the browser pulls `scrollLeft` to
           15 on load and the first card sits flush instead of inset. With it,
           every card comes to rest on the same 15px the heading above it uses,
           while still travelling all the way off-screen in between. */
        margin-inline: -15px;
        padding-inline: 15px;
        scroll-padding-inline: 15px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
    .about-standards__grid .value-card {
        flex: 0 0 310px;
        aspect-ratio: 310 / 280;
        scroll-snap-align: start;
    }
    /* 995:7075 — the card tightens to a 15px inset at `--radius-15` and sits 15
       under the copy rather than 30. Its links keep the desktop's 18px: the
       mockup does not shrink them, and they are the one thing on the card. */
    .about-standards__docs {
        margin-top: 15px;
        padding: 15px;
    }
    .about-standards__docs.radius-30 {
        border-radius: var(--radius-15);
    }

    /* ==================
     * About — Global Supply Network
     * ================== */
    /* The heading rule sits 5 under a three-line title and the body starts 30
       below it — the same header shape the catalog and the news use. */
    .supply__head {
        margin-bottom: 30px;
        padding-bottom: 5px;
    }
    /* The column stack itself is set at 992 — see the intermediate block at the
       top of this file. What is left here is what the 375 mockup measures. */
    /* 995:6580 — three tabs across 345 instead of 420: the gap closes to 5 and
       the button loses height, but the type stays at the component's 18px, as
       does the dropdown's and the panel's. The mockup's own tab row is drawn
       420 wide and runs off the screen; 15px of side padding is what actually
       fits three of them, and `min-width: 0` keeps the longest from pushing. */
    /* The tabs hold their own width here (`flex: 1 0 auto` below), so three of
       them are wider than a 345 column. The row scrolls rather than squeezing
       the labels: `1 0 auto` still fills the width while they fit, and the
       moment they do not it becomes a strip the visitor can push with a thumb.
       `contain` keeps that push from chaining into the page — a horizontal
       swipe at the edge of a strip is how you trigger the browser's back
       gesture by accident. */
    .supply__tabs {
        gap: 5px;
        overflow-x: auto;
        /* Full-bleed: the strip runs to the screen edges so what does not fit is
           cut by the screen, not by the container's 15px gutter — a strip that
           ends short of the edge reads as finished rather than as continuing.
           The padding puts that gutter back inside the scroller, so the first
           tab still lines up with the heading above it, and
           `scroll-padding-inline` makes a snap land on the gutter rather than
           flush against the glass. Same pattern as the About card rows. */
        margin-inline: -15px;
        padding-inline: 15px;
        scroll-padding-inline: 15px;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
    }
    /* No scrollbar on any of the sideways strips — the phone's is an overlay
       that sits on the tabs' own 44px and crosses their labels, and a narrow
       desktop window gets a classic one that eats the same height. What tells
       the visitor there is more is the content itself: full-bleed, so a card or
       a tab is visibly cut by the screen edge rather than ending inside a
       gutter. Wheel, trackpad, touch and keyboard all still scroll it.
       SimpleBar — the theme's custom scrollbar elsewhere — is not the answer
       here: it wraps its element in two divs, and these are flex rows whose
       children have to stay their own. */
    .supply__tabs,
    .about-mission__grid,
    .about-standards__grid {
        scrollbar-width: none;
    }
    .supply__tabs::-webkit-scrollbar,
    .about-mission__grid::-webkit-scrollbar,
    .about-standards__grid::-webkit-scrollbar {
        display: none;
    }

    .supply__tab {
        height: 44px;
        padding: 0 37px;
        flex: 1 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
    }
    .supply__desc p,
    .supply__desc p:has(strong) {
        margin: 0;
    }
    .supply__scroll {
        /* 995:6573 — the panel is 270 tall: country (36) + its 15px gap + this */
        height: 219px;
    }
    /* The 375 mockup does not draw the line under the map. */
    .supply__maps .supply__hint {
        display: none;
    }

    /* ==================
     * About — Corporate Social Responsibility
     * ================== */б
    .csr__head {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 30px;
    }
    .csr__intro {
        max-width: 100%;
    }
    .csr__lead {
        font-size: 16px;
    }

    /* ==================
     * About — Clients reviews
     * ================== */
    .reviews__head {
        margin-bottom: 30px;
        padding-bottom: 5px;
    }
    .review-card__text {
        padding-bottom: 15px;
        font-size: 16px;
    }

    .woocommerce .site-main.catalog-page,
    .woocommerce-page .site-main.catalog-page {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    .site-main.catalog-page .have-question__desc {
        font-size: 14px;
        line-height: 135%;
    }
    body.page-template-services-page .have-question__desc {
        font-size: 14px;
        line-height: 135%;
    }

    .have-question:has(.have-question__text) {
        background: transparent;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
    }

    .category-hero__media {
        height: auto;
    }
    .category-hero__image {
        height: auto;
        object-fit: initial;
    }

    body.single-product.woocommerce .site-main, .woocommerce-page .site-main {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }
    .entry-content h3 {
        font-size: 26px;
    }
    body.single-post .entry-content h3 {
        font-size: 29px;
    }

    .error-404__code {
        height: auto;
        margin-bottom: 11px;
    }
    .error-404 {
        margin-bottom: 0;
    }

    .have-question__text,
    .have-question__form {
        flex: 0 0 auto;
        width: 100%;
    }
    .form-field {
        width: 100%;
    }

    .news-archive.block,
    body.archive .have-question.block {
        margin-bottom: 120px;
    }

    .apply-modal .form-field-cell.form-field-cell-name p {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }
    .apply-modal[data-request-modal] .apply-modal__title {
        margin-bottom: 19px;
    }
    .apply-modal[data-request-modal] .filepond--drop-label.filepond--drop-label label {
        font-size: 16px;
    }

    .apply-modal .filepond--drop-label.filepond--drop-label label {
        font-size: 16px;
    }
    body.page-template-vacancies-page .apply-modal .form-field,
    body.page-template-vacancies-page .apply-modal .form-phone {
        font-size: 18px;
    }
    .apply-modal__close {
        top: 6px;
        right: 6px;
    }
    .apply-modal__card {
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }

    .thank-you.block {
        margin-bottom: 30px;
    }

    .form-field-cell span,
    .apply-modal__form .form-field-cell {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* Mobile — matches 375 mockup: swipe only, full-width progress bars */
@media (max-width: 575px) {
    /* ==================
     * Hero banners: the 375 mockups' own portrait frames
     * ================== */
    /* The 375 mockups' portrait frame. Capped, because the ratio alone keeps
       growing with the viewport — 545 wide at 575 makes a 1058px wall of
       photograph before a word of the copy is read. The image is `object-fit:
       cover` in all three, so the cap crops rather than distorts. */
    .banner__item,
    .about-hero__frame {
        aspect-ratio: 345 / 670;
        max-height: 670px;
    }

    /* ==================
     * Home / news — Recent News header
     * The rule sits just under the two-line heading. Written with the block
     * prefix so it outweighs `.other-news .news__header`, which the home page's
     * own section also matches.
     * ================== */
    .news .news__header {
        padding-bottom: 5px;
    }

    /* ==================
     * Home — Our services
     * The 375 mockup (986:5433) holds the photograph and nothing else: the
     * three glass plates are not drawn at this width. They come back at 576,
     * where the stacked photograph is wide enough to carry them.
     * ================== */
    .our-services__image-container {
        display: none;
    }

    /* ==================
     * Home / news — Have a question
     * 986:5458 + 986:5460: the photograph stops being the ground the section
     * stands on and becomes a full-bleed 375x500 band with all four corners
     * rounded; the card, 345 wide inside the page gutter, overlaps its lower
     * edge by 100px and carries on past it on the page colour.
     * The Services variant of this component has its own mockup and its own
     * rules further up, hence the `:not()`.
     * ================== */
    .have-question:not(:has(.have-question__text)) {
        padding: 0;
        overflow: visible; /* the card runs past the band */
    }
    .have-question:not(:has(.have-question__text)) .have-question__bg {
        position: static; /* leaves the absolute layer: it is the first row now */
        width: 100%;
        aspect-ratio: 375 / 500;
        max-height: 500px; /* the mockup's band; the ratio would outgrow it past 375 */
        border-radius: var(--radius-30);
    }
    .have-question:not(:has(.have-question__text)) .have-question__row {
        margin-top: -100px;
    }
    .have-question:not(:has(.have-question__text)) .have-question__form {
        position: relative; /* paints over the band it overlaps */
        padding: 30px 15px;
        /* Below the band the card no longer stands on a photograph but on the
           page, and `--white` is the page's own colour — the card would end at
           the band and the rest of it would be nothing at all. 986:5460 fills
           it with true white, which is what `--white-true` is there for. */
        background: var(--white-true);
        border-radius: var(--radius-30);
    }

    .csr__arrows,
    .reviews__arrows {
        display: none; /* mobile mockup shows progress bars only */
    }
    .csr-slide__image {
        aspect-ratio: 310 / 174;
    }
    .csr__pagination.swiper-pagination,
    .reviews__pagination.swiper-pagination {
        width: 100%;
    }
    .csr__pagination.swiper-pagination {
        margin-top: 15px;
    }
    .reviews__nav {
        margin-top: 15px;
    }
    /* 995:7175 — the card tightens to a 15px inset at `--radius-15` */
    .review-card {
        padding: 15px;
    }
    .review-card.radius-30 {
        border-radius: var(--radius-15);
    }
    .review-card__name {
        font-size: 23px;
    }
    /* Mobile: card sits within the 15px page gutter (not flush to the screen
     * edge like desktop); nav bullets align to the same gutter. */
    .reviews__swiper {
        margin: 0 15px;
    }
    .reviews__nav {
        padding: 0 15px;
    }

    .catalog {
        margin-top: 15px;
    }
    .error-404 {
        margin-bottom: 0;
    }

    .vacancies-hero__image {
        object-position: 60% top;
    }

    .article-hero__back {
        padding: 0;
    }

    .apply-modal__close {
        top: 6px;
        right: 6px;
        width: auto;
        height: auto;
    }
}