/* ============================================================
   responsive.css — cross-device hardening for the storefront.
   Loaded LAST so it reinforces existing page styles without
   duplicating them. Every rule here is conservative and additive.
   ============================================================ */

/* 1) Kill any accidental horizontal scroll site-wide.
   `overflow-x: clip` (not `hidden`) does NOT create a scroll
   container, so the sticky header keeps working. Verified live. */
html,
body {
    overflow-x: clip;
    max-width: 100%;
}

/* 2) Media can never force the page wider than the screen. */
img,
svg,
video,
canvas,
iframe,
embed,
object,
audio {
    max-width: 100%;
}
img,
video,
canvas {
    height: auto;
}
iframe {
    max-width: 100%;
}

/* 3) Long words / URLs / SKUs wrap instead of overflowing.
   `overflow-wrap` only breaks a word when it would otherwise
   spill, so normal text is untouched. */
p,
h1,
h2,
h3,
h4,
h5,
li,
a,
span,
td,
th,
dd,
dt,
blockquote,
figcaption,
.product-card__title,
.rp-name,
.fy-name {
    overflow-wrap: break-word;
    word-wrap: break-word;
}
pre,
code {
    white-space: pre-wrap;
    word-break: break-word;
}

/* 4) Opt-in helper for wide content (tables etc.) to scroll
   horizontally within its own box rather than being clipped. */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 5) Fluid headings so large titles never overflow narrow phones. */
@media (max-width: 480px) {
    h1 {
        font-size: clamp(22px, 7vw, 30px);
        line-height: 1.18;
    }
    .hero-slider__title,
    .page-hero__title,
    .page-title {
        font-size: clamp(20px, 6.6vw, 32px);
        line-height: 1.16;
    }
    .section-header h2,
    .most-loved-header h2 {
        font-size: clamp(18px, 5.6vw, 26px);
    }
}

/* 6) Comfortable side gutters on very small screens. */
@media (max-width: 380px) {
    .container {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* 7) Comfortable tap targets on touch devices (~40px minimum). */
@media (pointer: coarse) {
    .pagination a,
    .pagination button,
    .cur-switcher__toggle,
    .cur-switcher__option,
    .lang-switcher__toggle {
        min-height: 40px;
    }
}

/* ------------------------------------------------------------
   8) Vertical density on short viewports.
   The classic 1366x768 laptop wastes a lot of the screen on the
   60px section rhythm. Trim it further when the viewport is short.
   NOTE: this file is linked BEFORE @stack('styles'), so page CSS
   pushed by a view wins over it — the base rhythm itself is tuned
   in home.css / home-sections.css, and per-page scoped CSS
   (.ab-*, .pr-*, .pd-*) is tuned in those views.
   `!important` is used only here, and only to compress spacing on
   short screens — it never changes layout or content.
   ------------------------------------------------------------ */
@media (min-width: 992px) and (max-height: 820px) {
    .themed-section,
    .best-sellers-section,
    .newly-launched-wrapper {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
        margin-bottom: 22px !important;
    }

    .section-header {
        margin-bottom: 16px !important;
    }
}

/* ------------------------------------------------------------
   9) Phone gutters — several homepage section shells keep their
   desktop 40px side padding on phones, which burns up to 21% of a
   375px screen and squeezes product rails into ~248px. Audited
   live at 375px; these are the measured offenders. Spacing only —
   no layout, colour or content changes. `!important` because page
   CSS is pushed after this file (see note in section 8).
   ------------------------------------------------------------ */
@media (max-width: 640px) {
    .hero-slider,
    .hot-deals-container,
    .top-items-section,
    .themed-section-footer {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .promo-card {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .wp-head,
    .wp-body {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Primary mobile nav button must be comfortably tappable. */
    .header__mobile-toggle {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Nothing on a phone should drop below ~11.5px. */
    .fy-brand,
    .fy-reason {
        font-size: 11.5px !important;
    }
}