/*
** Responsive overrides, consolidated onto Bootstrap's breakpoint scale.
** (Bootstrap 5 breakpoints: sm >=576px, md >=768px, lg >=992px, xl >=1200px, xxl >=1400px)
**
** Every "max-width" query below is the Bootstrap "-down" boundary for the tier
** named in its comment, e.g. max-width: 1199.98px == everything below `xl`.
** The five previously-empty breakpoints (1600/1560/1400) and the many one-off
** in-between values (1380, 1299.99, 1250, 1170, 1070, 876, 676, 600, 400, 350)
** have been merged into whichever tier they were closest to; rule order within
** each tier is unchanged, so cascade behavior is preserved.
*/

/* ============ xxl-down: below 1400px ============ */
@media (max-width: 1399.98px) {

  .contact-wrapper.phone-wrapper,
  .contact-wrapper.email-wrapper {
    display: none !important;
  }

  /* Hide the <li> wrappers too, not just the links inside them — an empty
     li still counts as a flex item and still gets the full navigation-bar
     gap on both sides, so the language flag and Get a Quote end up with
     ~2 extra phantom 50px gaps between them from the two invisible items. */
  .header-actions-item {
    display: none !important;
  }

  .navigation-bar {
    width: auto;
    justify-content: unset !important;
    gap: 50px;
  }

  /* Smaller, deliberate gap between the language flag and Get a Quote —
     they're visually a pair here, unlike the evenly-spaced nav links.
     .menu-links' base gap (app.css, 28px) is what actually spaces the li
     items — .navigation-bar's own 50px gap above is between .navigation-bar's
     direct children (.menu-links and .menu-icon), not between the li's. */
  .header-cta-item {
    margin-left: -14px;
  }

  .header-row {
    justify-content: space-between !important;
  }

  .filter__pod-single h4 {
    font-size: 22px;
  }

  .pod-det-hd-wr p {
    max-width: unset;
  }

  h2 {
    font-size: 38px !important;
  }

  .about-us__homepage,
  .our-offer__homepage {
    padding: 40px 10px;
  }


  .why-whe__row,
  .about-us-row__homepage {
    flex-direction: column !important;
    gap: 40px;
  }

  .why-whe__row {
    flex-direction: column !important;
    gap: 15px;
  }

  .about-us-row__homepage .offer-text,
  .our-offer__homepage .offer-text {
    max-width: 100%;
    width: 100%;
    text-align: center;
    align-items: center;
  }

  .why-we_item,
  .about-us-row__homepage .offer-links,
  .our-offer__homepage .offer-links {
    max-width: 100%;
  }

  .video-about {
    padding: 0 0 35% 0;
  }
}

/* ============ xl-down: below 1200px ============ */
@media (max-width: 1199.98px) {

  /* .section's flat 80px top/bottom margin (app.css) doesn't scale down —
     stepped down across the remaining tiers below so section spacing
     shrinks along with everything else instead of staying fixed. */
  .section {
    margin-top: 70px !important;
    margin-bottom: 70px !important;
  }

  h2 {
    font-size: 38px !important;
  }

  .prod-page .product-gallery-main {
    height: 500px;
  }

  .main-slider__slide .img-wrapper {
    padding: 0 0 55% 0;
  }

  .main-slider__slide .main-slider__text {
    max-width: 450px;
  }

  .main-slider__slide .main-slider__text h2 {
    font-size: 38px !important;
  }

  .main-slider__slide .main-slider__text p {
    font-size: 16px;
  }

  .main-slide-btn-wr {
    display: none !important;
  }

  a.btn-wow {
    height: 50px;
  }

  a.btn-wow::before {
    width: 50px;
  }

  a.btn-wow span.txt {
    font-size: 16px;
    left: 40%;
  }

  a.btn-wow i.arrow {
    left: 13%;
  }

  a.btn-wow:hover i.arrow {
    left: 67%;
    color: var(--primary-white);
  }

  .menu-icon {
    display: block;
  }

  /* Below this width .navigation-bar is the flex-column drawer (see further
     down) — show the drawer's own phone/CTA footer, pinned to the bottom
     via margin-top: auto on the last flex item, and hide the collapsed
     header row's copy so it isn't offered twice. */
  .nav-footer-actions {
    display: flex !important;
    /* !important: the element also carries Bootstrap's .flex-row utility
       class, which is flex-direction: row !important — without matching
       it here the two buttons stayed side by side and overflowed past the
       drawer's edge instead of stacking. */
    flex-direction: column !important;
    align-items: start !important;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    margin-top: auto;
  }

  /* .header-actions-item is also display:none!important at xxl-down (above,
     unscoped) for the collapsed desktop row — re-enable it here too, same
     as .mobile-header-actions's copy needed, or the wrapper stays hidden
     regardless of the link's own display. */
  .nav-footer-actions .header-actions-item,
  .nav-footer-actions .header-cta-item {
    display: flex !important;
  }

  .mobile-header-actions .header-actions-item,
  .mobile-header-actions .header-cta-item {
    display: none !important;
  }

  .menu-links {
    gap: 20px;
  }

  .menu-links li {
    overflow: hidden;
  }

  /* .sub-menu's direct parent <li> must NOT clip it — overflow:hidden here
     (needed for other list items) would crop the full-screen panel down to
     this row's own height, same trap as .navigation-bar's overflow above. */
  .menu-links li.hd-drop-link {
    overflow: visible;
  }

  .main-nv-ln.ds-none {
    display: block !important;
  }

  /* Sub-menus become their own panel that slides in from the left, matching
     .navigation-bar's own size/position exactly (same top offset, same
     width at every breakpoint below — kept in sync via a matching width
     rule next to each ".navigation-bar { width: … }" further down), so it
     reads as a second drawer of the same size rather than a full screen
     takeover.
     !important throughout: .hd-drop-link.products-drop/.shop .sub-menu in
     app.css (desktop dropdown positioning) is 3 classes deep and otherwise
     outranks this 2-class-plus-element selector, letting the desktop
     position:absolute/min-width/border-radius/box-shadow leak in here. */
  .menu-links li .sub-menu {
    position: fixed !important;
    /* Matches .navigation-bar's own top offset exactly — see the comment
       there on why this can't stay a bare 75px. */
    top: var(--mobile-nav-top, 75px) !important;
    left: -100% !important;
    right: auto !important;
    width: 30% !important;
    max-width: 30% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 40px 25px 150px 25px !important;
    background-color: var(--primary-blue) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    text-wrap: wrap !important;
    visibility: hidden;
    opacity: 1 !important;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    /* See --z-drawer-submenu in app.css :root — above the drawer itself,
       below the Header (so the Header's language switcher/dropdown still
       wins over this flyout too). */
    z-index: var(--z-drawer-submenu, 610);
    transition: left 0.4s ease-in-out, visibility 0.4s ease-in-out;
  }

  /* Smaller, deliberate gap between the language flag and Get a Quote —
     they're visually a pair here, unlike the evenly-spaced nav links.
     .menu-links' base gap (app.css, 28px) is what actually spaces the li
     items — .navigation-bar's own 50px gap above is between .navigation-bar's
     direct children (.menu-links and .menu-icon), not between the li's. */
  .header-cta-item {
    margin-left: unset;
  }

  /* Driven by the ._active class (JS) only — a :hover/:focus-within fallback
     was tried here earlier, but since Back is itself inside .hd-drop-link,
     the pointer resting on it kept :hover true and re-forced the panel open
     even after JS correctly removed ._active, making Back a no-op. */
  .menu-links li .sub-menu._active {
    left: 0 !important;
    visibility: visible;
    height: 100% !important;
  }

  .sub-menu-back {
    /* !important: app.css's default display:none is also !important now
       (needed there to beat the element's own Bootstrap .d-flex utility
       class) — this has to match to still win at this breakpoint. */
    display: flex !important;
    align-items: center;
    gap: 10px;
    color: var(--color-white);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    cursor: pointer;
    margin-bottom: 25px;
  }

  .sub-menu-back i {
    font-size: 16px;
  }

  .menu-links li .sub-menu li a {
    padding: 14px 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-white);
  }

  /* Same accent as the desktop dropdown/top-level nav (app.css) — higher
     specificity than the plain rule above (extra .current-page class) so it
     isn't overridden by mobile-width cascade ordering. */
  .menu-links li .sub-menu li a.current-page {
    color: var(--header-active-color);
  }

  .menu-links li .sub-menu li:hover {
    background: transparent;
  }

  .menu-links li .sub-menu li:hover a {
    color: var(--primary-green);
  }

  /* Language switcher rows: left-align (they're centered on desktop) and
     reveal the language name next to the flag. */
  .living-drop li {
    justify-content: flex-start !important;
  }

  .lang-name {
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-white);
  }

  .living-drop li:hover .lang-name {
    color: var(--primary-green);
  }

  .navigation-bar {
    /* See --z-drawer in app.css :root — below the Header's own z-index, so
       the Header (and its language switcher/dropdown) always stays on top
       of the open drawer instead of the previous fixed 1001, which used to
       outrank the Header's old z-index:100 and could paint over it. */
    z-index: var(--z-drawer, 600);
    position: fixed;
    /* Root cause of the "burger broken when logged in as Admin" bug: this
       was a bare 75px, matching the guest header's height only. The header
       itself already shifts down by --frontend-adminbar-height when the
       Admin toolbar is showing (app.css, body.has-frontend-adminbar >
       .site-wrapper > header), but this drawer — fixed to the viewport, not
       to the header — never picked up that same offset, so for an admin the
       drawer opened ~34px too high and its top rows sat behind the header/
       toolbar instead of below them. --mobile-nav-top is 75px normally and
       is bumped by the toolbar height under body.has-frontend-adminbar
       (see app.css). */
    top: var(--mobile-nav-top, 75px);
    padding: 40px 25px 150px 25px;
    left: -100%;
    width: 30%;
    height: 100%;
    color: var(--primary-green);
    flex-direction: column !important;
    align-items: start !important;
    /* Deliberately NOT overflow:hidden, and not even overflow-y:auto alone —
       per the CSS overflow spec, setting one axis non-visible forces the
       other axis to compute as "auto" too, which still clips position:fixed
       descendants (the full-screen .sub-menu panel below). Both axes must
       stay visible. The drawer is fixed-positioned, so this never causes a
       page-level scrollbar. */
    overflow: visible;
    transition: all 0.5s ease-in-out;
  }

  .navigation-bar._active {
    left: 0;
    box-shadow:
      0 6px 20px rgba(0, 0, 0, 0.06),
      0 1px 0 rgba(0, 0, 0, 0.04);
    background: var(--primary-blue);
  }

  .menu-links {
    width: 100%;
  }

  .menu-links,
  .header-contacts {
    flex-direction: column !important;
    align-items: start !important;
  }

  .lang-item {
    margin-left: 0;
    /* Push it after every other item (all default to order: 0) without
       touching DOM order, so desktop's position is unaffected. */
    order: 10;
  }

  /* Phone / email / CTA keep their pill button look (border, background,
     icon) on mobile — only made visible in the drawer here, not restyled.
     The <li> itself (.header-actions-item) is hidden !important at
     xxl-down for the collapsed desktop row — re-enable it here too, or
     the wrapper stays display:none regardless of the link's own display. */
  .header-actions-item {
    display: list-item !important;
  }

  .contact-wrapper.phone-wrapper,
  .contact-wrapper.email-wrapper {
    display: flex !important;
  }

  /* No hover effect on phone / email on mobile (explicit request) —
     overrides app.css's .contact-wrapper:hover span (color),
     .phone-wrapper:hover / .email-wrapper:hover (lift), and
     .phone-wrapper:hover i / .email-wrapper:hover i (icon swap). */
  .contact-wrapper.phone-wrapper:hover,
  .contact-wrapper.email-wrapper:hover {
    margin-bottom: 0;
  }

  .contact-wrapper.phone-wrapper:hover span,
  .contact-wrapper.email-wrapper:hover span {
    color: var(--color-white) !important;
  }

  .contact-wrapper.phone-wrapper:hover i,
  .contact-wrapper.email-wrapper:hover i {
    background: var(--color-white) !important;
    color: var(--primary-green) !important;
  }

  /* Same "no hover on mobile" treatment for the CTA at the bottom of the
     drawer — app.css's .header-cta:hover (margin-bottom: 5px) is a lift
     effect meant for a mouse pointer, not a tap. */
  .nav-footer-actions .header-cta:hover {
    margin-bottom: 0;
  }

  .header-cta {
    display: inline-flex !important;
  }

  .faq-wrapper {
    flex-direction: column !important;
    align-items: center;
    gap: 50px;
  }

  .faq .faq-text {
    max-width: 100%;
    align-items: center;
    text-align: center;
  }

  /* .faq-text's align-items:center above only centers ITS direct children —
     .sc-hd-wr.pod-det-hd-wr and .contact-btn. The heading/paragraph live one
     level deeper, inside .sc-hd-wr.pod-det-hd-wr (also a flex column), which
     had no align-items of its own, so .text-wrapper (a fixed ~600px block)
     just sat at the flex-start default instead of centering — the actual
     "misaligned on mid devices" bug. */
  .faq .sc-hd-wr {
    align-items: center;
  }

  .faq-col {
    max-width: 100%;
  }

  .faq-items .item {
    max-width: 100%;
    /* Clear the fixed .phone-btn, which sits at right/bottom:3rem with a
       44px footprint regardless of viewport width — visible in this same
       <1200px range. Without this, the "+" toggle on whichever item scrolls
       to rest near the bottom of the screen ends up right behind it. */
    padding-right: 30px;
  }

  .about-us__homepage .offer-links,
  .about-us__homepage .offer-text {
    max-width: unset;
  }

  .our-offer-row__homepage {
    flex-direction: column-reverse !important;
  }

  .page-intro.min {
    padding-top: 200px;
  }

  .page-intro.min.error-404-hero {
    padding-top: 220px;
  }

  .error-404-hero .page-intro-txt h3 {
    font-size: 80px;
  }

  .error-404-hero .page-intro-txt h2 {
    font-size: 52px;
  }

  .pod-detail__slide {
    flex-direction: column !important;
    gap: 50px;
  }

  .pod-detail__slide .img-wrapper {
    max-width: 100%;
    padding: 0 0 50% 0;
  }

  .pod-detail__slide .prod-description {
    max-width: 100%;
  }

  .pod-features {
    max-width: 100%;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
  }

  .pod-features li {
    max-width: 16%;
  }

  .explore__btn {
    align-self: center;
  }

  .gallery-slide {
    padding: 0 0 30% 0;
  }

  .footer-nav-row {
    flex-direction: row;
    gap: 40px;
  }

  .footer-nav-row .footer-nav-section:nth-child(2) {
    padding-left: 15px;
  }
}

/* ============ lg-down: below 992px ============ */
@media (max-width: 991.98px) {

  .section {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }

  .about-preview__content {
    max-width: none;
  }

  /* Leftover from before the mobile drawer showed phone/email/CTA (xl-down
     now does, via display:flex/inline-flex !important) — this re-hid all
     three below 992px since both media queries match there simultaneously
     and this one came later in the cascade, silently winning the tie. */

  .wholesale-cta__card {
    height: auto;
    max-height: none;
    flex-direction: column;
    padding: unset;
  }

  .wholesale-cta__card .img-wrapper {
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: 16 / 9;
  }

  .main-slider__slide .img-wrapper {
    padding: 0 0 68% 0;
  }

  /* About-preview gallery ("About NeoFrost" / "Our Process") already stacks
     here — Bootstrap's flex-lg-row reverts to column below lg — but
     .about-preview__row uses align-items-start, and the base
     .about-preview__gallery rule (app.css) has no auto margin, so the
     500px-max image sat flush left with empty space to its right instead of
     centering. The narrower md-down/sm-down tiers already fix this; this
     closes the gap for the 768–991px range in between. */
  .about-preview__gallery {
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
  }

  .our-benefits-card h3 {
    font-size: 14px;
  }

  .filter__pod-single {
    max-width: 30.5%;
    padding: 0 0 25% 0;
  }

  .filter__pod-single h4 {
    font-size: 20px;
  }

  .video-about {
    padding: 0 0 40% 0;
  }

  .video-about .text-wrapper h2 {
    font-size: 26px !important;
  }

  .wholesale-cta__card {
    flex-direction: column;
    height: auto;
    max-height: none;
  }

  .we-are-row .img-wrapper,
  .we-are-row .text-wrapper {
    width: 100%;
  }

  .we-are-row .img-wrapper {
    padding: 0 0 65.25% 0;
  }

  .we-are-row {
    gap: 30px;
  }

  .we-are-row+.we-are-row {
    margin-top: 20px;
  }

  .we-are-row .text-wrapper h2 {
    font-size: 32px;
  }

  .stats-bar__inner {
    padding: 35px 25px;
  }

  .stats-bar__row {
    flex-wrap: wrap;
    row-gap: 40px;
  }

  .stat-item {
    width: calc(50% - 15px);
    min-width: 0;
  }

  .stat-number {
    font-size: 38px;
  }

  .stat-suffix {
    font-size: 28px;
  }

  .navigation-bar {
    width: 40%;
  }

  .menu-links li .sub-menu {
    width: 40% !important;
    max-width: 40% !important;
  }

  .promo-offer {
    padding: 60px 10px;
  }

  .promo-offer__row {
    flex-direction: column !important;
    gap: 50px;
  }

  .pod-detail__slide {
    align-items: center !important;
    justify-content: center !important;
  }

  .pod-features {
    max-width: 100%;
    flex-wrap: wrap !important;
  }

  .pod-features li {
    max-width: 31%;
  }

  .main-slider__slide .img-wrapper {
    padding: 0 0 65% 0;
  }

  .gallery-slide {
    padding: 0 0 40% 0;
  }


  .gallery-slider-single {
    max-width: 867px;
  }

  .gallery-slide-single {
    aspect-ratio: 5 / 3;
  }

  /* Contact CTA card (homepage): was a fixed-width two-column flex-row with
     no responsive handling at all, so it just kept squeezing both columns
     down to near-nothing instead of stacking. */
  .contact-cta__card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 40px;
    padding: 45px 35px;
  }

  .contact-cta__text,
  .contact-cta__links {
    max-width: 100%;
  }

  .contact-cta__card::before {
    width: 260px;
    height: 260px;
    top: -100px;
    right: -60px;
  }

  .contact-cta__card::after {
    width: 200px;
    height: 200px;
    bottom: -100px;
    right: -40px;
  }
}

/* ============ md-down: below 768px ============ */
@media (max-width: 767.98px) {
  .section {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }

  .video-about {
    padding: 0 0 40% 0;
  }

  .video-about .text-wrapper h2 {
    max-width: 600px;
    font-size: 22px !important;
  }

  .gallery-slider-single {
    max-width: 768px;
  }

  .gallery-slide-single {
    aspect-ratio: 10 / 7;
  }

  .contact-pg-wrapper .text-wrapper,
  .contact-pg-wrapper .form-wrapper {
    width: 100%;
  }

  .form-wrapper {
    padding: 28px 22px;
  }

  .footer-nav-row {
    flex-direction: column !important;
  }

  /* flatten table */
  .cart-table,
  .cart-table tbody,
  .cart-table tr {
    display: block;
    width: 100%;
  }

  .cart-table thead {
    display: none;
  }

  /* card */
  .cart-row {
    position: relative;
    padding: 12px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07);
    margin-bottom: 14px;
  }

  .cart-row td {
    display: block;
    padding: 4px 0;
    border: none;
  }

  /* delete – right middle */
  .cart-remove-cell {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* product */
  .cart-product {
    gap: 10px;
    padding-right: 36px;
  }

  .cart-product img {
    width: 56px;
    height: 56px;
  }

  .cart-product-info strong {
    font-size: 14px;
  }

  .cart-code,
  .stock {
    font-size: 12px;
  }

  /* price */
  .cart-price {
    margin-top: 6px;
  }

  .price-new {
    font-size: 15px;
  }

  /* qty + total */
  .cart-qty {
    margin-top: 8px;
  }

  .cart-total {
    margin-top: 4px;
    font-size: 17px;
  }

  /* tighter qty */
  .qty-control button {
    width: 30px;
    height: 30px;
  }

  .qty-control input {
    width: 38px;
    font-size: 14px;
  }

  .navigation-bar {
    width: 50%;
  }

  .menu-links li .sub-menu {
    width: 50% !important;
    max-width: 50% !important;
  }

  .header-row {
    gap: 50px;
    padding: 0px 15px;
    height: 80px;
  }

  .main-slider__slide .img-wrapper {
    padding: 0 0 72% 0;
  }

  .filter__pod-single {
    max-width: 46%;
    padding: 0 0 35% 0;
  }

  .filter-item-track {
    overflow-x: scroll;
  }

  .filter-list {
    flex-wrap: nowrap;
    margin-bottom: 20px;
    justify-content: unset !important;
    gap: 15px !important;
  }

  .filter-item {
    text-align: center;
    white-space: nowrap;
  }

  .about-us-row__homepage .offer-links .offer-link__item,
  .our-offer__homepage .offer-links .offer-link__item {
    max-width: 100%;
  }

  .pod-detail__slide .img-wrapper {
    padding: 0 0 60% 0;
  }

  .blog__row {
    flex-direction: column !important;
  }

  .blog-item {
    max-width: 100%;
    width: 100%;
    gap: 35px;
  }

  .main-slider__slide .main-slider__text h2 {
    font-size: 32px !important;
  }

  .main-slider__slide .main-slider__text p {
    font-size: 14px;
  }

  a.btn-wow span.txt {
    font-size: 14px;
  }

  .gallery-slider-single {
    max-width: 676px;
  }

  .contact-modal-body .img-wrapper {
    display: none;
  }

  .contact-modal-body .text-wrapper {
    justify-content: center;
    width: 100%;
  }

  /* About-preview gallery (homepage "About us" / "Our Process" sections):
     the floating secondary photo overflows outside the main image by 8%,
     which .container has no side padding to absorb once the gallery is
     full viewport width — see sm-down for the guaranteed-safe fix. Sized up
     from 420px so it doesn't look small against the extra room these
     tablet-width columns have. */
  .about-preview__gallery {
    max-width: 480px;
    margin: 0 auto 60px;
  }

  /* Sections whose secondary photo sits on the TOP corner (.secondary.top)
     overflow upward instead of downward. .about-preview__row is
     column-reverse here, so the gallery renders right after the content
     block, and that upward overflow lands on the CTA button above it with
     no gap. Push the gallery down to clear it. */
  .about-preview__gallery:has(.img-wrapper.secondary.top) {
    margin-top: 48px;
  }

  .contact-cta__card {
    padding: 35px 25px;
    gap: 30px;
  }

  .contact-cta__text h2 {
    font-size: 32px;
  }

  /* Product detail modal: was flex-row with a fixed 45% image column and no
     responsive handling, squeezing both the image and the text into narrow
     strips instead of stacking. */

  /* Reserve real space above every modal for .close-modal-window (40px font,
     top:20px — roughly 70px tall). Flex-centering alone only leaves a gap
     when content is shorter than max-height; when content fills max-height
     the card's top edge lands flush with the padding value, which used to
     be 0 here, so the card could grow up under the close button. */
  .modal-overlay {
    padding: 80px 12px 24px;
  }

  .product-modal-body {
    /* !important: the element also carries Bootstrap's .flex-row utility
       class, which sets flex-direction: row !important. */
    flex-direction: column !important;
    /* dvh accounts for mobile browser chrome (address bar) that vh ignores,
       so the card can't extend below the visible viewport; vh stays as the
       fallback for browsers without dvh support. */
    max-height: calc(100vh - 104px);
    max-height: calc(100dvh - 104px);
    overflow-y: auto;
  }

  .product-modal-body .img-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .product-modal-body .text-wrapper {
    padding: 30px 24px;
  }

  .product-modal-body .text-wrapper h2 {
    font-size: 26px;
  }

  .product-detail__lead {
    font-size: 16px;
  }
}

/* ============ sm-down: below 576px ============ */
@media (max-width: 575.98px) {
  .section {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }

  .main-slider__slide .main-slider__text {
    max-width: 400px;
  }

  .main-slider__slide .main-slider__text h2 {
    font-size: 26px !important;
  }

  .main-slider__slide .main-slider__text p {
    font-size: 14px;
  }

  a.btn-wow span.txt {
    font-size: 14px;
  }

  .video-about {
    padding: 0 0 50% 0;
  }

  .video-about .text-wrapper h2 {
    font-size: 20px !important;
  }

  .gallery-slide {
    padding: 0 0 60% 0;
  }

  .gallery-slider-single {
    max-width: 600px;
  }

  .about-us__homepage .offer-link__item {
    max-width: 100%;
  }

  h2 {
    font-size: 26px !important;
  }

  .pod-detail__slide .prod-description {
    text-align: center;
    align-items: center !important;
  }

  .pod-features {
    justify-content: space-between !important;
  }

  .pod-features li {
    max-width: 45%;
    width: 100%;
    align-items: center !important;
    text-align: center;
    /* gap: 8px; */
  }

  .page-intro.min {
    padding: 350px 0 37.5% 0;
  }

  .page-intro.min.error-404-hero {
    padding: 380px 0 44% 0;
  }

  .error-404-hero .page-intro-txt h3 {
    font-size: 60px;
  }

  .error-404-hero .page-intro-txt h2 {
    font-size: 36px;
  }

  .main-slider__slide .img-wrapper {
    padding: 0 0 135% 0;
  }

  .filter__pod-single {
    max-width: 100%;
    padding: 0 0 65% 0;
  }

  .filter__pod-single h4 {
    font-size: 22px;
  }

  .main-slider__slide .main-slider__text {
    padding: 0px 15px;
  }

  a.btn-wow {
    max-width: 200px;
  }

  a.btn-wow::before {
    width: 108%;
    height: 100%;
    border-radius: 100px;
    border-color: var(--primary-green);
    background-color: var(--primary-green);
    animation: unset;
  }

  a.btn-wow i.arrow {
    left: 65%;
    font-size: 20px;
    color: var(--primary-white);
  }

  a.btn-wow span.txt {
    left: 40%;
    color: var(--primary-white);
  }

  a.btn-wow span.txt {
    font-size: 12px;
  }

  .video-about {
    padding: 0 0 70% 0;
  }

  .video-about .text-wrapper h2 {
    font-size: 18px !important;
    padding: 0px 15px;
    margin-bottom: 20px;
  }

  .gallery-slide {
    padding: 0 0 70% 0;
  }

  .gallery-slider-single {
    max-width: 400px;
  }

  .contact-form-popup {
    max-width: 100%;
  }

  .gallery-slide {
    padding: 0 0 80% 0;
  }

  .gallery-slider-single {
    max-width: 350px;
  }

  .navigation-bar {
    width: 100%;
  }

  .menu-links li .sub-menu {
    width: 100% !important;
    max-width: 100% !important;
  }

  .gallery-slide {
    padding: 0 0 80% 0;
  }

  .gallery-slider-single {
    max-width: 320px;
  }

  .contact-cta__card {
    padding: 28px 20px;
    gap: 25px;
  }

  .contact-cta__text h2 {
    font-size: 26px;
  }

  .contact-cta__text p {
    font-size: 15px;
  }

  .contact-cta__card::before,
  .contact-cta__card::after {
    display: none;
  }

  .contact-cta__item {
    padding: 14px 16px;
  }

  .contact-cta__item>div:first-child {
    min-width: 0;
  }

  .contact-cta__item strong {
    font-size: 15px;
    overflow-wrap: anywhere;
  }

  .contact-cta__icon {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  /* At this width the gallery is ~viewport-wide with no side gutter (.container
     has no horizontal padding anywhere on this site), so the secondary photo's
     desktop offset (8% past the main image's edge) was getting clipped by the
     screen edge. Bringing it inside the main image's corner instead of
     overflowing past it fixes that regardless of any container padding. */
  .about-preview__gallery {
    max-width: 100%;
    margin-bottom: 55px;
  }

  /* Same top-corner overflow as md-down, just scaled down for the narrower
     gallery at this width. */
  .about-preview__gallery:has(.img-wrapper.secondary.top) {
    margin-top: 40px;
  }

  .about-preview__gallery .img-wrapper.secondary {
    right: 5%;
    bottom: -8%;
    width: 38%;
    border-width: 4px;
  }

  .about-preview__row.reversed .about-preview__gallery .img-wrapper.secondary {
    right: auto;
    left: 5%;
  }

  /* Give every modal (contact / gallery / product) breathing room from the
     top and bottom of the screen instead of the card touching the edges,
     and enough room at the top specifically to clear .close-modal-window
     (top:12px, 30px font here — roughly 55px tall). */
  .modal-overlay {
    padding: 56px 8px 20px;
  }

  .product-modal-body {
    margin: 8px;
    max-height: calc(100vh - 92px);
    max-height: calc(100dvh - 92px);
  }

  .product-modal-body .text-wrapper {
    padding: 24px 18px;
    gap: 12px;
  }

  .product-modal-body .text-wrapper h2 {
    font-size: 22px;
  }

  .product-modal-body .text-wrapper p {
    font-size: 14px;
  }

  .close-modal-window {
    top: 12px;
    right: 12px;
    font-size: 30px !important;
  }
}