/* ============================================================
   Chadmama — Responsive auto-scale layer  (added by upgrade)
   Loaded LAST so it can fine-tune the legacy theme without
   touching it. Uses clamp() so fonts/buttons/spacing scale
   fluidly with the viewport — one rule covers every screen,
   from 320px budget phones up to desktop, no media-query jungle.
   ============================================================ */

:root {
    /* Fluid type scale in px (min , viewport-preferred , max).
       px is used deliberately: the legacy theme pins html font-size
       to ~10px, which would shrink any rem-based scale by ~1.6x. */
    --fs-xxs: clamp(10px, 9px + 0.30vw, 12px);
    --fs-xs:  clamp(11px, 10px + 0.40vw, 13px);
    --fs-sm:  clamp(12px, 11px + 0.55vw, 15px);
    --fs-base:clamp(14px, 13px + 0.50vw, 16px);
    --fs-md:  clamp(15px, 13px + 0.70vw, 18px);
    --fs-lg:  clamp(18px, 15px + 1.20vw, 24px);
    --fs-xl:  clamp(22px, 17px + 2.00vw, 34px);
    --fs-2xl: clamp(26px, 19px + 3.00vw, 46px);

    /* Fluid spacing */
    --sp-1: clamp(4px, 3px + 0.3vw, 8px);
    --sp-2: clamp(8px, 6px + 0.6vw, 16px);
    --sp-3: clamp(12px, 9px + 1vw, 24px);
    --sp-4: clamp(16px, 12px + 1.5vw, 40px);

    --tap: 44px; /* min touch target (WCAG / iOS HIG) */
    --brand-navy: #1B2A5B;
    --brand-gold: #E8B923;
}

/* Smooth, sane base scaling for anything that uses rem */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-size: var(--fs-base); }

/* Never let an image break the layout / cause CLS */
img { max-width: 100%; height: auto; }

/* ---- Storefront element scaling (scoped to known classes) ----
   !important is used here on purpose: the legacy theme pins product
   titles to ~8px on phones (unreadable). These fluid sizes guarantee
   legible text on every screen without editing the theme CSS. */
.axil-product .title,
.axil-product .title a        { font-size: var(--fs-sm) !important; line-height: 1.35 !important; }
.axil-product .current-price  { font-size: var(--fs-md) !important; font-weight: 700; }
.axil-product .old-price      { font-size: var(--fs-xs) !important; }
.product-badget               { font-size: var(--fs-xxs) !important; }

.section_title h4,
.prodCatcus                   { font-size: var(--fs-lg) !important; }
.popular_product span         { font-size: var(--fs-lg); }

/* ---- Touch-friendly controls on phones ---- */
@media (max-width: 768px) {
    .axil-product .button,
    .axil-product .reg a,
    .product-add-to-cart .btn,
    .footer-nav .button-shop a,
    .btn,
    .carousel-control-prev,
    .carousel-control-next {
        min-height: var(--tap);
    }
    .footer-nav .button-shop a { padding-block: 8px; }
    .footer-nav .button-shop a span { font-size: var(--fs-xxs); }
    .footer-nav .button-shop a i,
    .footer-nav .button-shop a .fab,
    .footer-nav .button-shop a .fa { font-size: 1.25rem; }

    /* tighter gutters reclaim space on small screens */
    .container-fluid { padding-left: var(--sp-2); padding-right: var(--sp-2); }
    .row--15 > [class*="col"] { padding-left: 6px; padding-right: 6px; }
}

/* Extra-small budget phones (≤360px): pack 2 cols cleanly */
@media (max-width: 360px) {
    .axil-product .title a { font-size: var(--fs-xs); }
}

/* Bigger, easier-to-hit search + cart on mobile */
@media (max-width: 768px) {
    .header-top-cart a,
    .menu-toggle,
    .mobile-nav-toggler { min-width: var(--tap); min-height: var(--tap); }
}

/* Respect users who prefer less motion (perf + accessibility) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Content-visibility: let the browser skip rendering off-screen
   product rows until needed — big paint win on long pages. */
.slick-single-layout { content-visibility: auto; contain-intrinsic-size: 1px 480px; }