/* ==========================================================================
   halo-mobile — "Clean Tech" phones & accessories brand layer over
   modern-retail.

   Ported from the Google Stitch export
   (docs/templates/pending/stitch_25_halo_mobile_e_commerce_homepage — the
   "Luminous Tech" DESIGN.md is the design-system source). The design system:
   an ultra-light ice-blue canvas that keeps product photography the focal
   point, Cobalt Blue for every primary action / link / announcement bar,
   Fresh Green reserved for availability + promotional chips, pure-white
   cards with soft ambient shadows (0 4px 20px @ 5%), a "Soft-Square" 8px
   radius system (cards 12px, category wells 16px, badges pill), Poppins 600
   headlines over Inter body/price type.

   This stylesheet has two jobs:
     (a) style halo-mobile's OWN sections (hm-* — split hero, promo caption,
         featured header row, spec-highlights, sale-banner, icon categories,
         newsletter);
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the ice-blue palette and softening cards,
         buttons and forms to the 8px shape language. This is the only reason
         shop / PDP / cart / checkout / account / blog follow the palette
         without a single page override.

   Everything is scoped under `body.hm-theme` and reads the 5 customizer
   tokens (--bs-primary, --bs-primary-rgb, --ll-accent, --ll-font-headings,
   --ll-font-body, --ll-btn-radius) with theme.json-default fallbacks, so the
   customizer + live preview keep working: change the primary colour and
   every cobalt surface follows.

   Contrast decisions:
     - primary #1e4fd8 is DARK enough for white-on-fill (6.63:1 — clears
       AA-normal) and for cobalt-as-text on the ice canvas/bands (>= 6:1),
       so no text-safe sibling is needed (cf. the pulse gotcha).
     - accent_color is #007432 (the export's rendered chip TEXT green /
       DESIGN.md on-secondary-container, 5.94:1 on white) — NOT the pale
       #6bff8f chip FILL, which fails as text everywhere. Chip fills are
       derived from the accent via color-mix so they track the customizer.
   ========================================================================== */

body.hm-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --hm-primary: var(--bs-primary, #1e4fd8);
    --hm-primary-rgb: var(--bs-primary-rgb, 30, 79, 216);
    --hm-green: var(--ll-accent, #007432);
    --hm-radius: var(--ll-btn-radius, 0.5rem);
    --hm-font-head: var(--ll-font-headings, "Poppins"), system-ui, -apple-system, sans-serif;
    --hm-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Derived brand tints (track the customizer tokens) */
    --hm-deep: #0038b1; /* fallback for no color-mix */
    --hm-deep: color-mix(in srgb, var(--hm-primary) 72%, #001030); /* announce + sale band */
    --hm-green-fill: #ddf5e5; /* fallback for no color-mix */
    --hm-green-fill: color-mix(in srgb, var(--hm-green) 12%, #ffffff); /* chip / deal-badge fill */

    /* Luminous Tech palette (DESIGN.md YAML surface ramp). Canvas/surfaces/
       ink are literals by design (CLAUDE.md: never bound to a customizer
       token — there is no "ink" or "canvas" slot in the 5-token contract). */
    --hm-canvas: #f8f9ff;      /* surface / background */
    --hm-white: #ffffff;       /* surface-container-lowest — cards, header */
    --hm-band: #eff4ff;        /* surface-container-low — Best Sellers / Journal bands */
    --hm-tint: #e5eeff;        /* surface-container — category wells, footer */
    --hm-tint-high: #dce9ff;   /* surface-container-high — hover fills */
    --hm-ink: #0b1c30;         /* on-surface — primary text */
    --hm-muted: #434655;       /* on-surface-variant — secondary text */
    --hm-soft: #64748b;        /* DESIGN.md slate for tertiary text / placeholders */
    --hm-line: #e2e8f0;        /* DESIGN.md subtle borders/dividers */
    --hm-line-strong: #c4c5d7; /* outline-variant */

    /* Shape + depth — soft-square 8px system, ambient shadows */
    --hm-card-radius: 0.75rem;
    --hm-well-radius: 1rem;
    --hm-shadow-sm: 0 1px 6px rgba(11, 28, 48, 0.05);
    --hm-shadow: 0 4px 20px rgba(11, 28, 48, 0.05);
    --hm-shadow-lg: 0 10px 30px rgba(11, 28, 48, 0.1);

    /* Re-point the inherited base neutrals at the ice-blue palette so every
       inherited mr-* surface (bands, borders, fills, muted text) follows. */
    --mr-ink: var(--hm-ink);
    --mr-muted: var(--hm-muted);
    --mr-soft: var(--hm-soft);
    --mr-surface: var(--hm-white);
    --mr-band: var(--hm-tint);
    --mr-band-alt: var(--hm-band);
    --mr-fill: var(--hm-tint-high);
    --mr-border: var(--hm-line);
    --mr-border-strong: var(--hm-line-strong);
    --mr-radius: var(--hm-card-radius);
    --mr-gold: #f5a623;
    --mr-shadow: var(--hm-shadow);

    background-color: var(--hm-canvas);
    color: var(--hm-ink);
    font-family: var(--hm-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Typography — geometric Poppins headlines, Inter for everything functional.
   -------------------------------------------------------------------------- */
body.hm-theme h1,
body.hm-theme h2,
body.hm-theme h3,
body.hm-theme h4,
body.hm-theme h5,
body.hm-theme h6,
body.hm-theme .mr-display {
    font-family: var(--hm-font-head);
    font-weight: 600;
    color: var(--hm-ink);
    letter-spacing: -0.02em;
}

body.hm-theme .mr-display {
    font-size: clamp(1.6rem, 2.6vw, 2rem); /* DESIGN.md headline-lg 32px */
    line-height: 1.3;
}

/* Eyebrows / journal category labels — cobalt, per the export's blue
   "GUIDE / LIFESTYLE / TECH TIPS" labels (the base points these at
   --ll-accent, which is this theme's green). */
body.hm-theme .mr-eyebrow {
    font-family: var(--hm-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hm-primary);
}

/* Fresh-green pill chip ("JUST LAUNCHED" hero eyebrow; DESIGN.md: badges use
   a fully rounded pill radius to differentiate them from buttons). */
body.hm-theme .hm-chip {
    background: var(--hm-green-fill);
    color: var(--hm-green);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.35rem 0.9rem;
    border-radius: 9999px;
}

/* A quiet cobalt keyline link ("View All Products" / "See Latest Gear") */
body.hm-theme .hm-keyline-link {
    font-family: var(--hm-font-body);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--hm-primary);
    text-decoration: none;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--hm-primary);
    transition: color 0.2s ease, border-color 0.2s ease;
}

body.hm-theme .hm-keyline-link:hover {
    color: var(--hm-deep);
    border-bottom-color: var(--hm-deep);
}

body.hm-theme .hm-subheading {
    color: var(--hm-muted);
    font-size: 0.95rem;
}

/* Stop bare prose links rendering Bootstrap-blue without a bare-`a` rule
   (which would clobber .mr-btn--primary's white label — see gotchas). */
body.hm-theme {
    --bs-link-color-rgb: var(--hm-primary-rgb);
    --bs-link-hover-color-rgb: var(--hm-primary-rgb);
}

/* --------------------------------------------------------------------------
   Buttons & form controls — solid cobalt primaries, 8px soft-square corners.
   -------------------------------------------------------------------------- */
body.hm-theme .mr-btn {
    font-family: var(--hm-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--hm-radius);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

body.hm-theme .mr-btn--primary {
    background-color: var(--hm-primary);
    color: #fff;
    box-shadow: var(--hm-shadow-sm);
}

body.hm-theme .mr-btn--primary:hover,
body.hm-theme .mr-btn--primary:focus {
    filter: brightness(0.92);
    color: #fff;
    box-shadow: var(--hm-shadow);
}

/* Hero secondary ("Compare Models") — quiet slate outline, tint on hover. */
body.hm-theme .hm-btn-outline {
    border: 1px solid var(--hm-line-strong);
    color: var(--hm-muted);
    background: transparent;
}

body.hm-theme .hm-btn-outline:hover {
    background: var(--hm-tint);
    border-color: var(--hm-soft);
    color: var(--hm-ink);
}

body.hm-theme .mr-btn--outline {
    border-color: var(--hm-primary);
    color: var(--hm-primary);
}

body.hm-theme .mr-btn--outline:hover {
    background-color: var(--hm-primary);
    color: #fff;
}

/* DESIGN.md input fields: 1px #E2E8F0 border, 8px radius, cobalt on focus. */
body.hm-theme .form-control,
body.hm-theme .form-select {
    border: 1px solid var(--hm-line);
    border-radius: var(--hm-radius);
    background-color: var(--hm-white);
    color: var(--hm-ink);
}

/* Bootstrap reserves the right padding for the caret background-image; the
   base's shared padding shorthand eats it — give selects the gutter back. */
body.hm-theme .form-select {
    padding-inline-end: 2.25rem;
}

body.hm-theme .form-control::placeholder {
    color: var(--hm-soft);
}

body.hm-theme .form-control:focus,
body.hm-theme .form-select:focus {
    border-color: var(--hm-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--hm-primary-rgb), 0.12);
}

/* --------------------------------------------------------------------------
   Announcement band + header — cobalt alert bar over a clean white sticky
   header with a Poppins cobalt wordmark.
   -------------------------------------------------------------------------- */
body.hm-theme .mr-announce {
    background-color: var(--hm-deep);
    color: #fff;
    letter-spacing: 0.08em;
}

body.hm-theme .mr-header {
    background-color: var(--hm-white);
    border-bottom: 0;
    box-shadow: var(--hm-shadow);
}

body.hm-theme .mr-logo {
    font-family: var(--hm-font-head);
    font-weight: 700;
    letter-spacing: -0.01em;
}

body.hm-theme .mr-nav-link:hover,
body.hm-theme .mr-nav-link.is-active {
    color: var(--hm-primary);
    border-bottom-color: var(--hm-primary);
}

body.hm-theme .mr-icon-btn:hover {
    color: var(--hm-primary);
}

body.hm-theme .mr-search input {
    border-radius: var(--hm-radius);
}

/* --------------------------------------------------------------------------
   Hero — the light ice radial-gradient split panel with the floating
   product photo (export: radial-gradient(circle at top right, #e0e7ff,
   #f8f9ff)).
   -------------------------------------------------------------------------- */
body.hm-theme .hm-hero {
    background: radial-gradient(circle at top right, #e0e7ff 0%, var(--hm-canvas) 100%);
    padding: clamp(3rem, 7vw, 5.5rem) 0;
    overflow: hidden;
}

body.hm-theme .hm-hero__title {
    font-size: clamp(2.2rem, 4.4vw, 3rem); /* DESIGN.md display-lg 48px */
    line-height: 1.2;
    margin-bottom: 1rem;
}

body.hm-theme .hm-hero__lead {
    color: var(--hm-muted);
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 44ch;
    margin-bottom: 1.75rem;
}

body.hm-theme .hm-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

body.hm-theme .hm-hero__figure {
    text-align: center;
}

/* Layout-only wrapper rules; the image keeps its natural aspect (the export
   floats a cut-out product render with a drop shadow, no crop frame). */
body.hm-theme .hm-hero__img {
    width: min(100%, 480px);
    height: auto;
    filter: drop-shadow(0 25px 25px rgba(11, 28, 48, 0.15));
    transition: transform 0.7s ease;
}

body.hm-theme .hm-hero__figure:hover .hm-hero__img {
    transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   Trust strip — white band, thin-stroke COBALT icons (base colors them with
   --ll-accent, this theme's green; the export's are text-primary).
   -------------------------------------------------------------------------- */
body.hm-theme .mr-band--alt.border-bottom {
    background-color: var(--hm-white);
}

body.hm-theme .mr-trust svg {
    color: var(--hm-primary);
}

/* --------------------------------------------------------------------------
   Promo tiles — rounded 12px lifestyle tiles, bottom-up scrim, white caption
   stack. The keyline link stays WHITE in both states (the base hover
   recolors it to --ll-accent — this theme's dark green, invisible on the
   dark scrim; override the base's :hover descendant selector too).
   -------------------------------------------------------------------------- */
body.hm-theme .mr-promo {
    border-radius: var(--hm-card-radius);
    box-shadow: var(--hm-shadow);
}

body.hm-theme .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.8) 100%);
}

body.hm-theme .mr-promo__title {
    font-family: var(--hm-font-head);
    font-weight: 600;
}

body.hm-theme .hm-promo__text {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    margin-bottom: 0.9rem;
    max-width: 34ch;
}

body.hm-theme .mr-promo__cta,
body.hm-theme .mr-promo:hover .mr-promo__cta {
    color: #fff;
    border-color: #fff;
    letter-spacing: 0.04em;
    text-transform: none;
    font-size: 0.82rem;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Product cards (inherited) — pure-white 12px cards with ambient shadows
   and a -4px hover lift (DESIGN.md "Interactive States"). The card gains a
   background + padding, so its text is inset by the card's own padding.
   -------------------------------------------------------------------------- */
body.hm-theme .mr-card {
    background: var(--hm-white);
    border-radius: var(--hm-card-radius);
    padding: 0.75rem 0.9rem 1.15rem;
    box-shadow: var(--hm-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.hm-theme .mr-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--hm-shadow-lg);
}

body.hm-theme .mr-card__media {
    border-radius: var(--hm-radius);
    overflow: hidden;
    background: var(--hm-canvas);
}

body.hm-theme .mr-card__eyebrow {
    color: var(--hm-soft);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body.hm-theme .mr-card__title {
    font-family: var(--hm-font-head);
    font-size: 1rem;
    font-weight: 600;
}

body.hm-theme .mr-card__title a:hover {
    color: var(--hm-primary);
}

/* DESIGN.md price-display: Inter Bold, the most legible element after the
   product name. Cobalt on white = 6.63:1. */
body.hm-theme .mr-card__price,
body.hm-theme .ll-price {
    font-family: var(--hm-font-body);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--hm-primary);
}

body.hm-theme .ll-price-compare {
    color: var(--hm-soft);
}

/* Sale badge — the export's fresh-green "DEAL" chip pair (pale green fill,
   deep green text — 5.94:1+), pill per DESIGN.md badges. */
body.hm-theme .mr-card__badge {
    background: var(--hm-green-fill);
    color: var(--hm-green);
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Slide-up Add to Cart — cobalt fill, rounded to the media's radius. */
body.hm-theme .mr-card__quick {
    background-color: var(--hm-primary);
}

body.hm-theme .mr-card__quick:hover {
    background-color: var(--hm-deep);
    color: #fff;
}

/* The two round overlay controls (heart + eye) inherit the base's
   surface/ink pair — white circle + navy ink on this palette, both states
   clear WCAG comfortably; no override needed. */

/* --------------------------------------------------------------------------
   halo-mobile's own home sections
   -------------------------------------------------------------------------- */

/* Spec highlights — cobalt line icon over Poppins headline + support line,
   on the ice canvas. */
body.hm-theme .hm-specs__item {
    text-align: left;
}

body.hm-theme .hm-specs__icon {
    width: 40px;
    height: 40px;
    color: var(--hm-primary);
    margin-bottom: 0.85rem;
    display: block;
}

body.hm-theme .hm-specs__label {
    font-family: var(--hm-font-head);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--hm-ink);
    margin-bottom: 0.4rem;
}

body.hm-theme .hm-specs__text {
    color: var(--hm-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* Sale banner — rounded deep-cobalt panel, white display heading, pale
   supporting line, white cut-out button, and a faint oversized decorative
   ring bleeding off the right edge (CSS-only; the export uses a 300px
   Material glyph at 10% opacity). White on --hm-deep #0038b1 = 10.9:1;
   the #cbd4ff support line = 7.4:1. */
body.hm-theme .hm-sale__band {
    position: relative;
    background: var(--hm-deep);
    border-radius: var(--hm-well-radius);
    padding: clamp(2.5rem, 5vw, 3.5rem);
    overflow: hidden;
}

body.hm-theme .hm-sale__band::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 300px;
    height: 300px;
    border: 26px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

body.hm-theme .hm-sale__copy {
    position: relative;
    z-index: 1;
    max-width: 44rem;
}

body.hm-theme .hm-sale__title {
    font-family: var(--hm-font-head);
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 1rem;
}

body.hm-theme .hm-sale__body {
    color: #cbd4ff;
    font-size: 1.05rem;
    margin-bottom: 1.75rem;
}

body.hm-theme .hm-sale__btn {
    display: inline-flex;
    align-items: center;
    background: #fff;
    color: var(--hm-primary);
    font-family: var(--hm-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.95rem 2.4rem;
    border-radius: var(--hm-radius);
    transition: background-color 0.2s ease;
}

body.hm-theme .hm-sale__btn:hover {
    background: var(--hm-band);
    color: var(--hm-deep);
}

/* Shop by Category — soft ice wells with a large cobalt line icon; the well
   deepens toward primary-fixed on hover and the name inks cobalt. */
body.hm-theme .hm-cat {
    text-decoration: none;
}

body.hm-theme .hm-cat__well {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    background: var(--hm-tint);
    border-radius: var(--hm-well-radius);
    margin-bottom: 1rem;
    transition: background-color 0.3s ease;
}

body.hm-theme .hm-cat:hover .hm-cat__well {
    background: var(--hm-tint-high);
}

body.hm-theme .hm-cat__icon {
    width: 56px;
    height: 56px;
    color: var(--hm-primary);
    transition: transform 0.3s ease;
}

body.hm-theme .hm-cat:hover .hm-cat__icon {
    transform: scale(1.1);
}

body.hm-theme .hm-cat__name {
    display: block;
    font-family: var(--hm-font-head);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--hm-ink);
    transition: color 0.2s ease;
}

body.hm-theme .hm-cat:hover .hm-cat__name {
    color: var(--hm-primary);
}

/* Newsletter ("First to Know") — centered on the canvas, rounded white
   input + solid cobalt Subscribe button. */
body.hm-theme .hm-cta {
    background: var(--hm-canvas);
    padding: clamp(4rem, 8vw, 6rem) 0;
}

body.hm-theme .hm-cta__title {
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

body.hm-theme .hm-cta__body {
    color: var(--hm-muted);
    max-width: 34rem;
    font-size: 1.02rem;
}

body.hm-theme .hm-cta__form {
    display: flex;
    gap: 0.9rem;
    max-width: 28rem;
}

body.hm-theme .hm-cta__form input {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--hm-white);
    border: 1px solid var(--hm-line-strong);
    border-radius: var(--hm-radius);
    color: var(--hm-ink);
    padding: 0.8rem 1.1rem;
    font-size: 0.92rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.hm-theme .hm-cta__form input::placeholder {
    color: var(--hm-soft);
}

body.hm-theme .hm-cta__form input:focus {
    outline: none;
    border-color: var(--hm-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--hm-primary-rgb), 0.12);
}

body.hm-theme .hm-cta__btn {
    background: var(--hm-primary);
    color: #fff;
    border: 0;
    border-radius: var(--hm-radius);
    padding: 0.8rem 1.9rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

body.hm-theme .hm-cta__btn:disabled {
    opacity: 0.8;
    cursor: not-allowed;
}

body.hm-theme .hm-cta__note {
    color: var(--hm-soft);
    font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   Inherited component finishing — journal, footer, rails, hovers the base
   points at --ll-accent (this theme's green) where the export shows cobalt.
   -------------------------------------------------------------------------- */
body.hm-theme .mr-article__media {
    border-radius: var(--hm-card-radius);
    box-shadow: var(--hm-shadow-sm);
}

body.hm-theme .mr-article__title {
    font-family: var(--hm-font-head);
    font-size: 1.15rem;
}

body.hm-theme .mr-article__title a:hover {
    color: var(--hm-primary);
}

body.hm-theme .mr-ulink:hover,
body.hm-theme .mr-crumbs a:hover,
body.hm-theme .mr-cart-row__title a:hover,
body.hm-theme .mr-footer a:hover {
    color: var(--hm-primary);
    border-color: var(--hm-primary);
}

body.hm-theme .mr-footer {
    background: var(--hm-tint);
    border-top: 1px solid var(--hm-line-strong);
}

body.hm-theme .mr-footer h4 {
    color: var(--hm-primary);
}

body.hm-theme .mr-footer__brand {
    font-family: var(--hm-font-head);
}

body.hm-theme .mr-social {
    background: var(--hm-white);
    border-color: var(--hm-line-strong);
}

body.hm-theme .mr-social:hover {
    background: var(--hm-primary);
    border-color: var(--hm-primary);
    color: #fff;
}

body.hm-theme .mr-rail-btn {
    border-radius: 9999px;
    border-color: var(--hm-line-strong);
}

body.hm-theme .mr-rail-btn:hover {
    background: var(--hm-primary);
    border-color: var(--hm-primary);
    color: #fff;
}

body.hm-theme .mr-tabs .nav-link.active {
    color: var(--hm-primary);
    border-bottom-color: var(--hm-primary);
}

/* Category photo tiles on inherited pages (shop landing etc.) keep the
   rounded shape language. */
body.hm-theme .mr-tile {
    border-radius: var(--hm-card-radius);
}

/* --------------------------------------------------------------------------
   Motion & responsive
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.hm-theme .mr-card,
    body.hm-theme .mr-promo,
    body.hm-theme .mr-tile,
    body.hm-theme .hm-cat__well,
    body.hm-theme .hm-cat__icon,
    body.hm-theme .hm-hero__img,
    body.hm-theme .hm-keyline-link,
    body.hm-theme .hm-sale__btn,
    body.hm-theme .mr-btn {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    body.hm-theme .mr-card:hover .mr-card__media img,
    body.hm-theme .mr-tile:hover .mr-tile__img,
    body.hm-theme .mr-tile--cat .mr-tile__media img,
    body.hm-theme .mr-promo:hover .mr-promo__img,
    body.hm-theme .mr-article__media:hover img,
    body.hm-theme .hm-hero__figure:hover .hm-hero__img {
        transform: none !important;
    }
}

/* Mobile (from the Stitch mobile frames): stacked hero with the photo below
   the copy, tighter display sizes, 2-col grids (the base grids already
   collapse to row-cols-2), stacked newsletter form. */
@media (max-width: 991.98px) {
    body.hm-theme .hm-hero {
        padding: 2.5rem 0 3rem;
        text-align: left;
    }

    body.hm-theme .hm-hero__title {
        font-size: 1.9rem; /* DESIGN.md headline-lg-mobile 24px + hero scale */
    }

    body.hm-theme .hm-hero__img {
        width: min(100%, 360px);
    }

    body.hm-theme .hm-cat__well {
        height: 130px;
    }

    body.hm-theme .hm-cat__icon {
        width: 44px;
        height: 44px;
    }

    body.hm-theme .hm-sale__band {
        padding: 2rem 1.5rem;
    }

    body.hm-theme .hm-cta__form {
        flex-direction: column;
    }

    body.hm-theme .hm-cta__form input,
    body.hm-theme .hm-cta__btn {
        width: 100%;
    }
}