/* ==========================================================================
   Stride & Hide — Modern Tactile heritage leathercraft.

   Ported from the Stitch "Heritage Workshop" design (the Modern Tactile
   design system lives at docs/templates/pending/
   stitch_18_stride_hide_e_commerce_store/…/heritage_workshop/DESIGN.md): a
   warm bone canvas, deep espresso ink/actions, a cognac-tan accent reserved
   for fills/borders/dividers, Albert Sans Bold (700) headlines over Inter
   body/UI/price copy, and a soft-geometric 4px radius on almost everything.

   This theme OWNS the promo / featured / new-arrivals / newsletter home
   sections (sh-* markup) + the child-only "lookbook" (Field Notes) band, and
   INHERITS Modern Retail's header, footer, hero, trust, categories, brands,
   journal and every functional page. This stylesheet therefore has three jobs:

     (a) style the NEW `sh-*` markup into the Stitch design;
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the bone palette and applying the 4px radius;
         and
     (c) carve out the template's recurring DARK "plank" band (announcement +
         Field Notes + footer all share the same on-surface-variant brown)
         inside an otherwise light theme — the opposite problem to a
         dark-canvas theme, so only these three components get literal
         light-on-dark overrides; the shared tokens stay light-canvas-safe.

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

   -------------------------------------------------------------------------
   CONTRAST (measured with App\Support\Theming\ContrastChecker via a
   scratchpad script against the FIXED tokens — primary #3b2a1f / accent
   #b06f3d / canvas #fef9f0 — never simplify these back to raw --ll-accent):

     - Espresso (primary) is very dark → safe as text AND as a white-text
       fill everywhere the base already uses it (13.03:1 on bone, 13.66:1
       white-on-fill). Verified, not overridden: .mr-btn--primary/--outline,
       .mr-filter__link, .mr-page, .mr-step__dot, .mr-acct-*, Bootstrap
       .btn-primary/.btn-link. --bs-link-color-rgb is set explicitly below —
       theme-vars.blade.php never emits it, so bare anchors (CMS pages,
       blog-post body, quick-view "Category" link) would otherwise fall
       through to Bootstrap's factory blue.
     - Cognac tan (accent) FAILS 4.5:1 as text: 3.86:1 on bone, 4.05:1 on
       white. A darker sibling, --sh-tan-ink (color-mix 65% tan / 35% black
       = #724828, 7.49:1 on bone / 7.86:1 on white), carries every foreground
       role that would otherwise read --ll-accent: .mr-eyebrow, .mr-nav-link
       .is-active, .mr-icon-btn:hover, .mr-card__wish.is-active,
       .mr-card__title/.mr-article__title/.mr-crumbs/.mr-cart-row__title
       a:hover, --mr-gold (star ratings), .sh-keyline-link, .sh-promo__cta.
       Raw --sh-tan stays for the focus ring (3.86:1 clears the 3:1 non-text
       floor), the nav active-state underline, borders/dividers and the
       hero eyebrow-on-photo (a different, unrelated contrast pair).
     - The dark "plank" (announcement/Field-Notes/footer, #52443a) is a
       THIRD surface: espresso text measures 1.46:1 on it and --sh-tan-ink
       1.19:1 — both effectively invisible (dark-on-dark) and NEVER used
       there. Plank text uses --sh-plank-text (#f5f0e8, 8.24:1) or bone
       (8.91:1); muted/copyright text uses rgba(245,240,232,.72) (5.19:1 —
       .65 alpha measured 4.56, .60 measured 4.13 and fails, so .72 is the
       floor with real margin). Raw tan on the plank measures 2.31:1 (fails
       even 3:1) — the base's `.mr-footer a:hover` would otherwise use it.
     - Hairline borders (--sh-border, 1.63:1 on bone) are intentionally
       subtle per DESIGN.md ("1px at 10-15% opacity") — decorative dividers,
       not text or a state's sole indicator, so the low ratio is by design.
   ------------------------------------------------------------------------- */

body.sh-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --sh-espresso: var(--bs-primary, #3b2a1f);
    --sh-espresso-rgb: var(--bs-primary-rgb, 59, 42, 31);
    --sh-tan: var(--ll-accent, #b06f3d);
    --sh-font-head: var(--ll-font-headings, "Albert Sans"), system-ui, -apple-system, sans-serif;
    --sh-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Text-safe darker sibling of the tan accent — see the CONTRAST note
       above. Recomputed from whatever accent the merchant picks so it never
       goes stale, with a static fallback for browsers without color-mix. */
    --sh-tan-ink: #724828;
    --sh-tan-ink: color-mix(in srgb, var(--ll-accent, #b06f3d) 65%, #000 35%);

    /* Modern Tactile palette (DESIGN.md YAML + code.html's rendered Tailwind
       config — the canvas is the YAML "background"/"surface" #fef9f0;
       DESIGN.md's prose Bone #EFEAE2 and the auto-generated Material
       "primary" #874e1e never made it into a real rendered surface, so
       neither is used here — see the report's deviations). */
    --sh-bone: #fef9f0;
    --sh-band: #f8f3eb;
    --sh-band-alt: #f2ede5;
    --sh-fill: #e7e2da;
    --sh-border: #d7c2b6;
    --sh-border-strong: #857469;
    --sh-ink: #1d1c17;
    --sh-muted: #52443a;
    --sh-soft: #857469;

    /* The recurring dark "plank" — announcement + Field Notes + footer all
       share this on-surface-variant brown in the template. */
    --sh-plank: #52443a;
    --sh-plank-text: #f5f0e8;
    --sh-plank-muted: rgba(245, 240, 232, 0.72);
    --sh-plank-border: rgba(245, 240, 232, 0.14);

    /* Re-point the inherited base neutrals at the bone palette so every
       inherited mr-* surface (bands, borders, fills, muted text) follows. */
    --mr-ink: var(--sh-ink);
    --mr-muted: var(--sh-muted);
    --mr-soft: var(--sh-soft);
    --mr-surface: var(--sh-bone);
    --mr-band: var(--sh-band);
    --mr-band-alt: var(--sh-band-alt);
    --mr-fill: var(--sh-fill);
    --mr-border: var(--sh-border);
    --mr-border-strong: var(--sh-border-strong);
    --mr-radius: 0.25rem;
    --mr-gold: var(--sh-tan-ink);
    --mr-shadow: 0 10px 20px -6px rgba(59, 42, 31, 0.18);

    /* Bare anchors (CMS pages, blog-post body copy, the quick-view
       "Category" link) fall through to --bs-link-color, but Bootstrap 5.3's
       own hover/opacity mixing reads --bs-link-color-RGB — theme-vars never
       emits it, so without this line those anchors would hover toward
       Bootstrap's factory blue instead of espresso. */
    --bs-link-color-rgb: var(--sh-espresso-rgb);

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

/* --------------------------------------------------------------------------
   Shape discipline — Soft-Geometric: a 4px radius almost everywhere (the
   customizer button_radius default IS 0.25rem, so .mr-btn already inherits
   it via --bs-border-radius; this block just extends the same radius to the
   surfaces the base leaves square) and tight, tinted, low-blur shadows
   instead of soft blurred ones.
   -------------------------------------------------------------------------- */
body.sh-theme .mr-card,
body.sh-theme .mr-card__media,
body.sh-theme .sh-promo__media,
body.sh-theme .mr-article__media,
body.sh-theme .mr-article__media img,
body.sh-theme .mr-tile,
body.sh-theme .form-control,
body.sh-theme .form-select,
body.sh-theme .dropdown-menu,
body.sh-theme .offcanvas {
    border-radius: var(--mr-radius);
}

body.sh-theme .mr-card {
    border: 1px solid var(--sh-border);
    box-shadow: none;
}

/* Borderless-by-default cards (base) gain a hairline edge, so their own text
   needs insetting or the title/price collide with the new border. */
body.sh-theme .mr-card > p,
body.sh-theme .mr-card > h3 {
    padding-inline: 1rem;
}

body.sh-theme .mr-card > *:last-child {
    padding-bottom: 1.15rem;
}

/* --------------------------------------------------------------------------
   Typography — Albert Sans 700 authority with tight tracking, Inter body,
   tan-ink tracked eyebrows/labels.
   -------------------------------------------------------------------------- */
body.sh-theme h1, body.sh-theme h2, body.sh-theme h3,
body.sh-theme h4, body.sh-theme h5, body.sh-theme h6,
body.sh-theme .mr-display,
body.sh-theme .mr-headline {
    font-family: var(--sh-font-head);
    color: var(--sh-ink);
    font-weight: 700;
    letter-spacing: -0.02em;
}

body.sh-theme .mr-eyebrow {
    font-family: var(--sh-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sh-tan-ink);
}

/* The hero eyebrow sits on the dark photo overlay, not the bone canvas — a
   warm peach (the export's own primary-fixed-dim) reads clearly there and
   must NOT be swapped for --sh-tan-ink (that pair is for bone/white only). */
body.sh-theme .mr-hero__copy .mr-eyebrow {
    color: #ffb783;
}

/* --------------------------------------------------------------------------
   Buttons — .mr-btn already inherits the 4px radius via --bs-border-radius.
   Primary/outline/on-dark are already text-safe with espresso (verified in
   the CONTRAST note); this block only adds the DESIGN.md "2px" outline
   weight and the tracked keyline-link pattern used by featured/promo.
   -------------------------------------------------------------------------- */
body.sh-theme .mr-btn {
    font-weight: 700;
}

body.sh-theme .mr-btn--outline {
    border-width: 2px;
}

/* Hero primary CTA — inverted to a light bone fill instead of the (very
   dark) espresso default. On an arbitrary merchant photo a near-black
   button can visually merge with the image's own shadows; a light fill
   guarantees separation from any backdrop while staying just as text-safe
   (espresso-on-bone is 13.03:1). The secondary CTA keeps the inherited
   .mr-btn--on-dark (white outline/text, already safe). */
body.sh-theme .mr-hero .mr-btn--primary {
    background: var(--sh-bone);
    border-color: var(--sh-bone);
    color: var(--sh-espresso);
}

body.sh-theme .mr-hero .mr-btn--primary:hover {
    filter: none;
    background: #fff;
}

body.sh-theme .sh-keyline-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--sh-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sh-tan-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--sh-tan-ink);
    padding-bottom: 0.3rem;
    transition: color 0.2s ease, border-color 0.2s ease;
}

body.sh-theme .sh-keyline-link:hover {
    color: var(--sh-espresso);
    border-color: var(--sh-espresso);
}

body.sh-theme .sh-keyline-link__arrow {
    transition: transform 0.2s ease;
}

body.sh-theme .sh-keyline-link:hover .sh-keyline-link__arrow {
    transform: translateX(3px);
}

/* Inputs — hairline espresso border at rest, solid on focus (DESIGN.md). */
body.sh-theme .form-control,
body.sh-theme .form-select {
    border-color: rgba(var(--sh-espresso-rgb), 0.3);
    background-color: var(--sh-bone);
}

body.sh-theme .form-control:focus,
body.sh-theme .form-select:focus {
    border-color: var(--sh-espresso);
    box-shadow: 0 0 0 3px rgba(var(--sh-espresso-rgb), 0.12);
}

/* --------------------------------------------------------------------------
   Announcement + header — the announcement is the template's dark "plank"
   (NOT the auto-darkened accent the base defaults to, which renders as a
   burnt-orange band here instead of the template's neutral brown). The
   header stays light/inherited (logo-left single row already matches).
   -------------------------------------------------------------------------- */
body.sh-theme .mr-announce {
    background-color: var(--sh-plank);
    color: var(--sh-plank-text);
}

body.sh-theme .mr-announce a {
    color: var(--sh-plank-text);
}

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

body.sh-theme .mr-nav-link:hover {
    color: var(--sh-espresso);
}

body.sh-theme .mr-nav-link.is-active {
    color: var(--sh-tan-ink);
    border-bottom-color: var(--sh-tan-ink);
}

body.sh-theme .mr-icon-btn:hover {
    color: var(--sh-tan-ink);
}

/* --------------------------------------------------------------------------
   Hero — inherited mr-hero; only the eyebrow (above) and button treatment
   (above) change. The base overlay (62% black, left-weighted) already
   protects the white h1 over an arbitrary photo, so it is left alone.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Trust strip (inherited, data-driven) — tan-ink icons + hairline dividers
   between items, matching the template's `border-l` columns.
   -------------------------------------------------------------------------- */
body.sh-theme .mr-trust svg {
    color: var(--sh-tan-ink);
}

/* `.mr-band--alt.border-bottom` is the trust strip's OWN combination (the
   base's other two `.mr-band--alt` consumers — home/featured.blade.php,
   unused by this theme, and the blog-post "More Stories" grid — never pair
   it with `.border-bottom`), so the divider rule can't leak onto an
   unrelated card grid. */
body.sh-theme .mr-band--alt.border-bottom .row > [class*="col-"] {
    border-inline-start: 1px solid var(--sh-border);
}

body.sh-theme .mr-band--alt.border-bottom .row > [class*="col-"]:first-child,
body.sh-theme .mr-band--alt.border-bottom .row > [class*="col-"]:nth-child(2) {
    border-inline-start: 0;
}

@media (min-width: 768px) {
    body.sh-theme .mr-band--alt.border-bottom .row > [class*="col-"]:nth-child(2) {
        border-inline-start: 1px solid var(--sh-border);
    }
}

/* --------------------------------------------------------------------------
   Collection tiles (sh-promo) — image on top, caption BELOW (no overlay
   scrim — the template never darkens these photos, unlike the inherited
   .mr-promo it replaces).
   -------------------------------------------------------------------------- */
body.sh-theme .sh-promo {
    display: block;
    text-decoration: none;
    color: inherit;
}

body.sh-theme .sh-promo__media {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--sh-fill);
    margin-bottom: 1.25rem;
}

body.sh-theme .sh-promo__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}

body.sh-theme .sh-promo__img--placeholder {
    background: linear-gradient(135deg, var(--sh-band-alt), var(--sh-fill));
}

body.sh-theme .sh-promo:hover .sh-promo__img {
    transform: scale(1.05);
}

body.sh-theme .sh-promo__title {
    display: block;
    font-family: var(--sh-font-head);
    font-weight: 700;
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    color: var(--sh-ink);
    margin-bottom: 0.6rem;
}

body.sh-theme .sh-promo__cta {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sh-tan-ink);
    border-bottom: 1px solid rgba(var(--sh-espresso-rgb), 0.2);
    padding-bottom: 0.25rem;
    transition: color 0.2s ease, border-color 0.2s ease;
}

body.sh-theme .sh-promo:hover .sh-promo__cta {
    color: var(--sh-espresso);
    border-color: var(--sh-espresso);
}

/* --------------------------------------------------------------------------
   Workshop Favourites (sh-featured) + New In (sh-arrivals) — plain grids,
   no extra chrome beyond the shared heading/card/keyline-link/outline-button
   treatment above.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Field Notes band (sh-lookbook, child-only) — the template's dark plank:
   tracked eyebrow + editorial caption on the left, then a gapless 3-photo
   grid where the middle photo sits offset downward, each photo desaturating
   to full colour on hover.
   -------------------------------------------------------------------------- */
body.sh-theme .sh-lookbook {
    background: var(--sh-plank);
    color: var(--sh-plank-text);
    padding-block: clamp(4rem, 8vw, 6rem);
}

body.sh-theme .sh-lookbook__intro {
    margin-bottom: 3rem;
    max-width: 44ch;
}

body.sh-theme .sh-lookbook__eyebrow {
    display: block;
    font-family: var(--sh-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #ffb783;
    margin-bottom: 1rem;
}

body.sh-theme .sh-lookbook__quote {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--sh-plank-muted);
    border-inline-start: 2px solid var(--sh-tan);
    padding-inline-start: 1.25rem;
    margin: 0;
}

body.sh-theme .sh-lookbook__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

body.sh-theme .sh-lookbook__cell {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--mr-radius);
    filter: grayscale(1);
    transition: filter 0.7s ease;
}

body.sh-theme .sh-lookbook__cell:hover {
    filter: grayscale(0);
}

body.sh-theme .sh-lookbook__cell--offset {
    transform: translateY(3rem);
}

body.sh-theme .sh-lookbook__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --------------------------------------------------------------------------
   Categories (inherited mr-tile--cat, data-driven) — 4px radius via the
   shape block above is enough; the overlay scrim/caption already work on
   any photo.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Journal (inherited, data-driven from live posts).
   -------------------------------------------------------------------------- */
body.sh-theme .mr-article__title a:hover {
    color: var(--sh-tan-ink);
}

/* --------------------------------------------------------------------------
   Newsletter (sh-newsletter) — the template keeps this band on the light
   bone canvas (NOT the base's dark .mr-cta panel): a mail glyph, centered
   heading, an inline email field + solid Subscribe button between
   top/bottom hairline rules.
   -------------------------------------------------------------------------- */
body.sh-theme .sh-newsletter {
    padding-block: clamp(4rem, 8vw, 6rem);
    border-block: 1px solid var(--sh-border);
}

body.sh-theme .sh-newsletter__inner {
    max-width: 34rem;
}

body.sh-theme .sh-newsletter__icon {
    display: inline-flex;
    color: var(--sh-tan-ink);
    margin-bottom: 1rem;
}

body.sh-theme .sh-newsletter__icon svg {
    width: 34px;
    height: 34px;
}

body.sh-theme .sh-newsletter__body {
    color: var(--sh-muted);
    max-width: 40ch;
}

body.sh-theme .sh-newsletter__form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 30rem;
}

body.sh-theme .sh-newsletter__form input {
    flex: 1 1 14rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(var(--sh-espresso-rgb), 0.3);
    border-radius: var(--mr-radius);
    background: var(--sh-bone);
    color: var(--sh-ink);
    font-family: var(--sh-font-body);
}

body.sh-theme .sh-newsletter__form input::placeholder {
    color: var(--sh-soft);
}

body.sh-theme .sh-newsletter__form input:focus {
    outline: none;
    border-color: var(--sh-espresso);
}

body.sh-theme .sh-newsletter__btn {
    padding: 1rem 2rem;
    border: 0;
    border-radius: var(--mr-radius);
    background: var(--sh-espresso);
    color: #fff;
    font-family: var(--sh-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 0.2s ease;
}

body.sh-theme .sh-newsletter__btn:hover {
    filter: brightness(1.18);
}

body.sh-theme .sh-newsletter__note {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sh-soft);
}

/* --------------------------------------------------------------------------
   Footer (inherited mr-footer) — the template's THIRD dark-plank surface.
   The base assumes a LIGHT footer (--mr-band-alt bg, --mr-ink brand name,
   --mr-muted links, --ll-accent hover), so every one of those needs a
   literal light-on-dark override here — see the CONTRAST note above.
   -------------------------------------------------------------------------- */
body.sh-theme .mr-footer {
    background-color: var(--sh-plank);
    border-top: 0;
    color: var(--sh-plank-muted);
}

body.sh-theme .mr-footer h4 {
    color: var(--sh-plank-text);
}

body.sh-theme .mr-footer a {
    color: var(--sh-plank-muted);
}

body.sh-theme .mr-footer a:hover {
    color: var(--sh-plank-text);
}

body.sh-theme .mr-footer__brand {
    font-family: var(--sh-font-head);
    color: var(--sh-plank-text);
}

body.sh-theme .mr-footer .mr-muted,
body.sh-theme .mr-footer .mr-soft {
    color: var(--sh-plank-muted);
}

body.sh-theme .mr-footer .mr-divider {
    background-color: var(--sh-plank-border);
}

body.sh-theme .mr-footer .form-control {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--sh-plank-border);
    color: var(--sh-plank-text);
}

body.sh-theme .mr-footer .form-control::placeholder {
    color: var(--sh-plank-muted);
}

/* Light fill (not tan-ink) — tan-ink is too close in value to the plank
   itself for a clean button edge; bone/espresso is the same guaranteed-safe
   pair used by .mr-social's hover below. */
body.sh-theme .mr-footer .mr-btn--primary {
    background: var(--sh-bone);
    border-color: var(--sh-bone);
    color: var(--sh-espresso);
}

/* Social icons — light outline on the plank; hover fills bone rather than
   raw tan (ink-on-raw-tan measures 4.21:1, just short of 4.5:1 — a light
   fill with ink icon clears 16.27:1 instead, same pair as the body text). */
body.sh-theme .mr-social {
    border-color: var(--sh-plank-border);
    color: var(--sh-plank-text);
    background: transparent;
}

body.sh-theme .mr-social:hover {
    background-color: var(--sh-bone);
    border-color: var(--sh-bone);
    color: var(--sh-ink);
}

/* --------------------------------------------------------------------------
   Product card — wishlist "is-active" state is the one inherited rule that
   still reads raw --ll-accent (the base's 2026-07-09 fix only covers the
   hover state); the price is deliberately colour-accented per DESIGN.md's
   price-display role, using the text-safe tan-ink rather than raw accent.
   -------------------------------------------------------------------------- */
body.sh-theme .mr-card__wish.is-active {
    color: var(--sh-tan-ink);
}

body.sh-theme .mr-card__price {
    color: var(--sh-tan-ink);
    font-weight: 600;
}

body.sh-theme .mr-card__title a:hover {
    color: var(--sh-tan-ink);
}

/* --------------------------------------------------------------------------
   prefers-reduced-motion — kill every decorative hover transform/transition
   this stylesheet adds (the base's own .mr-reveal block already covers its
   own animations).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.sh-theme .sh-promo__img,
    body.sh-theme .sh-keyline-link__arrow,
    body.sh-theme .sh-lookbook__cell,
    body.sh-theme .mr-hero .mr-btn--primary {
        transition: none;
    }

    body.sh-theme .sh-lookbook__cell {
        filter: grayscale(0);
    }

    /* Also neutralise the inherited hover-scale transforms (the base's
       reduced-motion block only kills their transition). */
    body.sh-theme .mr-card:hover .mr-card__media img,
    body.sh-theme .mr-tile:hover .mr-tile__img,
    body.sh-theme .mr-promo:hover .mr-promo__img {
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   Mobile (from the Stitch mobile frames): margins tighten (handled by the
   inherited .mr-shell clamp), the Field Notes grid stacks to one column and
   drops the offset, and the collection tiles/new-in grid go single column.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    body.sh-theme .sh-lookbook__grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    body.sh-theme .sh-lookbook__cell--offset {
        transform: none;
    }

    body.sh-theme .mr-band--alt.border-bottom .row > [class*="col-"] {
        border-inline-start: 0;
    }
}