/* ==========================================================================
   Andaaz — modern-heritage tailoring for men's eastern wear.

   Ported from the Stitch "Andaaz" design (the Dignified Heritage design system
   lives at docs/templates/pending/
   stitch_33_andaaz_e_commerce_homepage_storefront/…/dignified_heritage/
   DESIGN.md): a bone canvas softer than pure white, midnight-navy structure and
   calls to action, a sparing brass accent for eyebrows / keyline links / trust
   marks, Lora headlines over Inter body & UI, a "barely rounded" 4px radius on
   buttons/cards/inputs with product imagery kept perfectly sharp (0px), and
   flat 1px navy-tinted hairlines instead of any shadow.

   This theme OWNS the hero / featured / fabric-guide / new-arrivals /
   categories / journal / newsletter home sections (az-* markup) and INHERITS
   Modern Retail's header, footer, trust strip, promo tiles, product card and
   every functional page. This stylesheet therefore has two jobs:

     (a) style the NEW `az-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the base
         neutral tokens at the bone palette, dressing the announce bar and
         footer in midnight navy, and moving every brass TEXT role onto the
         text-safe brass ink.

   Everything is scoped under `body.az-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
   navy surface follows.

   CONTRAST (ratios measured with App\Support\Theming\ContrastChecker):
     - primary midnight navy #06122a is very DARK — 16.25:1 on the bone canvas,
       17.74:1 on the page surface and 18.62:1 on white — safe as text, as an
       icon, and as a fill carrying white text anywhere it appears.
     - accent brass #b08d3f is LIGHT — only 2.72:1 on bone and 3.12:1 under a
       white label. It therefore NEVER carries small text on a light surface and
       is never given a white label. Its safe roles are: fills carrying NAVY
       text (navy-on-brass is 5.97:1 — the sale chip, the cart bubble),
       hairlines and borders, and text/icons on the DARK navy band
       (brass-on-navy is 5.97:1).
     - --az-brass-ink #775a0e is the design system's OWN `secondary` /
       `on-secondary-container` token (not an invented value) and covers every
       brass TEXT / link / icon role on a light surface: 5.63:1 on bone, 6.46:1
       on white (so also safe as the product card's active wishlist heart, which
       sits on the white overlay circle) and 5.29:1 on the card media well.
     - --az-soft (small captions / card eyebrows / breadcrumbs) cannot reuse the
       design's own `outline` token #76777e — that measures 3.89:1 on bone,
       under the 4.5:1 normal-text minimum. #5f6068 is a deliberately darkened
       value in the same slate family and clears 5.45:1 on bone / 5.12:1 on the
       media well.
   ========================================================================== */

body.az-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --az-navy: var(--bs-primary, #06122a);
    --az-navy-rgb: var(--bs-primary-rgb, 6, 18, 42);
    /* Bootstrap 5.3 paints bare <a> as rgba(var(--bs-link-color-rgb),…);
       theme-vars sets --bs-link-color but never the -rgb triplet, so without
       this a plain content link (CMS/blog body, quick-view "Category") falls
       back to factory blue. Point it at the navy. NOTE: deliberately done with
       the Bootstrap variable rather than a bare `body.az-theme a { color: … }`
       rule — that catch-all out-specifies `.mr-btn--primary { color: #fff }`
       and would repaint the hero CTA's label navy-on-navy, i.e. invisible. */
    --bs-link-color-rgb: var(--az-navy-rgb);
    --az-brass: var(--ll-accent, #b08d3f);
    /* AA-safe TEXT/link/icon variant of the accent — see the CONTRAST note
       above. Decorative roles on the DARK navy band keep --az-brass. */
    --az-brass-ink: #775a0e;
    --az-radius: var(--bs-border-radius, 0.25rem);
    --az-font-head: var(--ll-font-headings, "Lora"), Georgia, "Times New Roman", serif;
    --az-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Dignified Heritage palette (DESIGN.md) */
    --az-surface: #fdf9f2;        /* page canvas                              */
    --az-bone: #f3efe8;           /* header, hero panel, tiles, newsletter     */
    --az-container-low: #f7f3ec;  /* the "Most Worn" band                     */
    --az-container-high: #ece8e1; /* card media wells                          */
    --az-white: #ffffff;          /* surface-container-lowest (inputs)         */
    --az-ink: #1c1c18;            /* on-surface                                */
    --az-muted: #45464d;          /* on-surface-variant                        */
    --az-soft: #5f6068;           /* darkened "outline" — see CONTRAST note    */

    /* Re-point the inherited base neutrals at the bone palette so every
       inherited mr-* surface (bands, borders, fills, muted text) warms — this
       one block restyles shop / PDP / cart / checkout / account / blog. Borders
       read a 12% navy hairline over bone (DESIGN.md "Borders": thin 1px in
       Midnight Navy at 10–15% opacity) via color-mix, with a literal fallback
       for browsers without it. DESIGN.md forbids ambient shadows outright, so
       --mr-shadow is neutralised rather than re-tinted. */
    --mr-ink: var(--az-ink);
    --mr-muted: var(--az-muted);
    --mr-soft: var(--az-soft);
    --mr-surface: var(--az-surface);
    --mr-band: var(--az-bone);
    --mr-band-alt: var(--az-container-low);
    --mr-fill: var(--az-container-high);
    --mr-border: #dfddda;
    --mr-border: color-mix(in srgb, var(--az-navy) 12%, var(--az-surface));
    --mr-border-strong: #b3b4b7;
    --mr-border-strong: color-mix(in srgb, var(--az-navy) 30%, var(--az-surface));
    --mr-radius: var(--az-radius);
    --mr-gold: var(--az-brass-ink);
    --mr-shadow: none;

    background-color: var(--az-surface);
    color: var(--az-ink);
    font-family: var(--az-font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Shape discipline — "barely rounded": a universal 4px radius on buttons,
   cards, inputs and panels, but product/editorial IMAGERY stays at 0px so it
   reads like a high-end photographic print (DESIGN.md "Shapes"). Note the
   round overlay controls on the product card are exempt further down.
   -------------------------------------------------------------------------- */
body.az-theme .form-control,
body.az-theme .form-select,
body.az-theme .dropdown-menu,
body.az-theme .offcanvas,
body.az-theme .mr-panel {
    border-radius: var(--az-radius);
}

body.az-theme .mr-card__media,
body.az-theme .mr-promo,
body.az-theme .mr-promo__img,
body.az-theme .mr-tile,
body.az-theme .mr-article__media,
body.az-theme .az-hero__frame,
body.az-theme .mr-gallery__main,
body.az-theme .mr-gallery__thumb {
    border-radius: 0;
}

/* Never a `padding` SHORTHAND on .form-select — it would collapse Bootstrap's
   reserved 2.25rem caret gutter and run the option text under the arrow. The
   base app.css restores that gutter with padding-inline-end; re-assert it here
   so a future edit to this file can't silently drop it. */
body.az-theme .form-select {
    padding-inline-end: 2.25rem;
}

/* --------------------------------------------------------------------------
   Typography — Lora for storytelling / product names (the design's 500 display
   weight maps to the 600 static file we ship), Inter for everything utility.
   Eyebrows are Inter, uppercase, generously tracked, in the text-safe brass.
   -------------------------------------------------------------------------- */
body.az-theme h1, body.az-theme h2, body.az-theme h3,
body.az-theme h4, body.az-theme h5, body.az-theme h6 {
    font-family: var(--az-font-head);
    color: var(--az-navy);
    font-weight: 600;
    letter-spacing: -0.02em;
}

body.az-theme .mr-display,
body.az-theme .az-headline {
    font-family: var(--az-font-head);
    color: var(--az-navy);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

body.az-theme .az-headline {
    font-size: clamp(1.6rem, 2.8vw, 2rem);
}

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

/* Section header row — heading left, brass keyline link right (Most Worn /
   New This Friday / The Journal all share this rhythm in the export). */
body.az-theme .az-rowhead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

body.az-theme .az-keyline-link {
    color: var(--az-brass-ink);
    text-decoration: none;
    font-family: var(--az-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--az-brass);
    transition: color 0.2s ease, border-color 0.2s ease;
}

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

/* --------------------------------------------------------------------------
   Buttons — solid midnight-navy primary with a bone label; a 1px navy ghost
   with navy text (DESIGN.md "Buttons"). No shadow, ever.
   -------------------------------------------------------------------------- */
body.az-theme .mr-btn {
    border-radius: var(--az-radius);
    font-weight: 600;
    letter-spacing: 0.14em;
    box-shadow: none;
}

body.az-theme .mr-btn--primary {
    background-color: var(--az-navy);
    border-color: var(--az-navy);
    color: #fff;
}

body.az-theme .mr-btn--primary:hover,
body.az-theme .mr-btn--primary:focus {
    filter: brightness(1.35);
    color: #fff;
}

body.az-theme .az-btn-ghost {
    border: 1px solid var(--az-navy);
    color: var(--az-navy);
    background: transparent;
}

body.az-theme .az-btn-ghost:hover {
    background: rgba(var(--az-navy-rgb), 0.06);
    color: var(--az-navy);
}

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

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

/* `.mr-btn--light` sits on dark bands and the base hover paints the accent
   behind a white label (2.90:1). Ink it navy-on-brass instead (6.43:1). */
body.az-theme .mr-btn--light:hover {
    background-color: var(--az-brass);
    color: var(--az-navy);
}

body.az-theme .az-btn-hero {
    padding: 1rem 2.15rem;
}

/* Inputs — bone-tinted fields under a 1px navy hairline; focus draws brass. */
body.az-theme .form-control,
body.az-theme .form-select {
    background-color: var(--az-white);
    border-color: var(--mr-border);
    color: var(--az-ink);
}

body.az-theme .form-control:focus,
body.az-theme .form-select:focus {
    border-color: var(--az-brass);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--az-brass) 24%, transparent);
}

/* Focus ring — the raw brass is only 2.53:1 against bone; use the brass ink. */
body.az-theme a:focus-visible,
body.az-theme button:focus-visible,
body.az-theme input:focus-visible {
    outline: 2px solid var(--az-brass-ink);
}

/* --------------------------------------------------------------------------
   Announcement + header — a midnight-navy whisper band over the bone header,
   separated by a single navy hairline (DESIGN.md: "use a solid 1px bottom
   border rather than a blur"). Lora wordmark, quiet Inter nav; the ACTIVE nav
   link is navy with a navy underline, exactly as the export draws it (the base
   uses the accent, which would be a 2.53:1 label here).
   -------------------------------------------------------------------------- */
body.az-theme .mr-announce {
    background-color: var(--az-navy);
    color: #fff;
    font-family: var(--az-font-body);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.2em;
}

body.az-theme .mr-header {
    background-color: var(--az-bone);
    /* Literal first for browsers without color-mix (Chrome < 111). */
    border-bottom: 1px solid #dbd9d5;
    border-bottom-color: color-mix(in srgb, var(--az-navy) 10%, var(--az-bone));
    box-shadow: none;
}

body.az-theme .mr-logo {
    font-family: var(--az-font-head);
    font-weight: 600;
    font-size: clamp(1.4rem, 2.1vw, 1.75rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--az-navy);
}

body.az-theme .mr-nav-link {
    font-family: var(--az-font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--az-muted);
}

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

body.az-theme .mr-nav-link.is-active {
    color: var(--az-navy);
    font-weight: 600;
    border-bottom-width: 1px;
    border-bottom-color: var(--az-navy);
}

body.az-theme .mr-icon-btn {
    color: var(--az-navy);
}

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

/* Cart / wishlist count bubbles — the export draws the cart bubble in brass;
   a white numeral on brass is 2.90:1, so the numeral inks navy (6.43:1). */
body.az-theme .mr-badge {
    background-color: var(--az-navy);
    color: #fff;
}

body.az-theme .mr-badge--wish {
    background-color: var(--az-brass);
    color: var(--az-navy);
}

body.az-theme .mr-search input {
    background: var(--az-white);
    border-color: var(--mr-border);
}

body.az-theme .mr-search input:focus {
    background: var(--az-white);
    border-color: var(--az-brass);
    box-shadow: none;
}

body.az-theme .mr-crumbs a:hover,
body.az-theme .mr-ulink,
body.az-theme .mr-cart-row__title a:hover {
    color: var(--az-brass-ink);
}

body.az-theme .mr-ulink:hover {
    color: var(--az-navy);
    border-color: var(--az-navy);
}

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

/* --------------------------------------------------------------------------
   Hero (az-hero) — the split: a two-frame studio collage filling the LEFT half
   edge-to-edge, the bone copy panel on the RIGHT. With only one frame supplied
   the single photo spans the whole half. Stacks collage-over-copy on mobile,
   per the export's mobile frame.
   -------------------------------------------------------------------------- */
body.az-theme .az-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 660px;
    background: var(--az-bone);
}

body.az-theme .az-hero__collage {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
}

body.az-theme .az-hero__collage--pair {
    grid-template-columns: 0.85fr 1fr;
}

body.az-theme .az-hero__frame {
    position: relative;
    overflow: hidden;
    background: var(--az-container-high);
}

body.az-theme .az-hero__frame--second {
    border-left: 1px solid var(--az-bone);
}

body.az-theme .az-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.az-theme .az-hero__panel {
    display: flex;
    align-items: center;
    background: var(--az-bone);
    padding: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 4.5rem);
}

body.az-theme .az-hero__copy {
    max-width: 30rem;
}

body.az-theme .az-hero__title {
    font-family: var(--az-font-head);
    font-size: clamp(2.25rem, 4.2vw, 3rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--az-navy);
    margin-bottom: 1.5rem;
}

body.az-theme .az-hero__lead {
    color: var(--az-muted);
    font-size: 1.075rem;
    line-height: 1.65;
    max-width: 44ch;
    margin-bottom: 2.5rem;
}

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

/* --------------------------------------------------------------------------
   Trust strip (inherited mr-trust) — the export centres four brass marks with
   navy labels under a hairline. The raw brass fails even the lenient 3:1
   non-text threshold on bone (2.53:1), so the marks ink with --az-brass-ink.
   -------------------------------------------------------------------------- */
body.az-theme .mr-trust {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}

body.az-theme .mr-trust svg {
    width: 26px;
    height: 26px;
    color: var(--az-brass-ink);
}

body.az-theme .mr-trust strong {
    font-family: var(--az-font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--az-navy);
}

body.az-theme .mr-trust span {
    font-size: 0.82rem;
    color: var(--az-soft);
}

/* --------------------------------------------------------------------------
   Promo tiles (inherited mr-promo) — the export's Everyday Kurtas / Occasion
   Wear / Waistcoats tiles: sharp-cornered 3:4 photographs under a navy scrim
   that lifts a Lora caption off the bottom-left.
   -------------------------------------------------------------------------- */
body.az-theme .mr-promo {
    aspect-ratio: 3 / 4;
    background: var(--az-container-high);
}

body.az-theme .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(var(--az-navy-rgb), 0) 45%, rgba(var(--az-navy-rgb), 0.62) 100%);
}

body.az-theme .mr-promo:hover .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(var(--az-navy-rgb), 0.1) 30%, rgba(var(--az-navy-rgb), 0.72) 100%);
}

body.az-theme .mr-promo__title {
    font-family: var(--az-font-head);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* The base styles the caption link on `.mr-promo:hover .mr-promo__cta`
   (specificity 0,0,3,0) — a child rule on `.mr-promo__cta` alone would LOSE,
   so the hover descendant is overridden here too. Brass on the darkened photo
   scrim is a decorative label and reads clearly. */
body.az-theme .mr-promo:hover .mr-promo__cta {
    color: var(--az-brass);
    border-color: var(--az-brass);
}

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — sharp 3:4 photographic prints over a
   bone well, then CENTERED details in the export's order: a quiet slate meta
   line, the Lora product name, the Inter price. The card itself stays
   borderless and unfilled (as the base draws it), so no text inset is needed.
   -------------------------------------------------------------------------- */
body.az-theme .mr-card__media {
    background-color: var(--az-container-high);
}

body.az-theme .mr-card__eyebrow,
body.az-theme .mr-card__title,
body.az-theme .mr-card__price {
    text-align: center;
}

body.az-theme .mr-card__eyebrow {
    font-family: var(--az-font-body);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--az-soft);
}

body.az-theme .mr-card__title,
body.az-theme .mr-card__title a {
    font-family: var(--az-font-head);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--az-navy);
}

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

body.az-theme .mr-card__price {
    font-family: var(--az-font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--az-navy);
}

body.az-theme .mr-card__price del {
    color: var(--az-soft);
    font-weight: 400;
}

/* Sale / demo chip — the export's brass square chip. A white label on brass is
   2.90:1, so the label inks navy (6.43:1). */
body.az-theme .mr-card__badge {
    background: var(--az-brass);
    color: var(--az-navy);
    border-radius: var(--az-radius);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* The two ROUND overlay controls — the heart (.mr-card__wish, a <button> for
   signed-in shoppers and an <a> for guests) and the eye (.mr-card__quickview).
   Their resting/hover inks come from the base (--bs-primary on white, then
   --mr-ink on --mr-surface) and both are safe here because primary is the dark
   navy: 15.6:1 and 14.5:1. Only the "saved" heart needs work — the base paints
   it with the raw accent (2.90:1 on the white circle); ink it with the
   text-safe brass instead (6.45:1). They also keep their pill shape explicitly
   so no future flatten rule can square them. */
body.az-theme .mr-card__wish,
body.az-theme .mr-card__quickview {
    border-radius: 9999px;
}

body.az-theme .mr-card__wish.is-active {
    color: var(--az-brass-ink);
}

/* --------------------------------------------------------------------------
   Fabric guide (az-fabric) — the andaaz-only "Know Your Fabric" band: a
   full-bleed midnight-navy slab, centred Lora heading, three brass-ringed
   marks. Brass on navy is 6.43:1; the body copy is white at 78%.
   -------------------------------------------------------------------------- */
body.az-theme .az-fabric {
    background: var(--az-navy);
    padding: clamp(3.5rem, 7vw, 5rem) 0;
}

body.az-theme .az-fabric__heading {
    color: #fff;
    text-align: center;
    font-family: var(--az-font-head);
    font-size: clamp(1.6rem, 2.8vw, 2rem);
    font-weight: 600;
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

body.az-theme .az-fabric__col {
    text-align: center;
}

body.az-theme .az-fabric__ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    border: 1px solid rgba(176, 141, 63, 0.42);
    color: var(--az-brass);
    margin-bottom: 1.5rem;
    transition: background-color 0.25s ease;
}

body.az-theme .az-fabric__col:hover .az-fabric__ring {
    background-color: rgba(176, 141, 63, 0.12);
}

body.az-theme .az-fabric__ring svg {
    width: 26px;
    height: 26px;
}

body.az-theme .az-fabric__title {
    color: #fff;
    font-family: var(--az-font-head);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
}

body.az-theme .az-fabric__text {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 32ch;
    margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Shop-by-category band (az-cats) — deliberately photo-less: square bone
   panels with a Lora name and a tracked hover label, ruled top and bottom by a
   navy hairline.
   -------------------------------------------------------------------------- */
body.az-theme .az-cats {
    padding: clamp(2.5rem, 5vw, 3.5rem) 0;
    /* Literal first for browsers without color-mix (Chrome < 111). */
    border-block: 1px solid #e9e6e2;
    border-block-color: color-mix(in srgb, var(--az-navy) 8%, var(--az-surface));
}

body.az-theme .az-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    aspect-ratio: 1 / 1;
    background: var(--az-bone);
    border: 1px solid transparent;
    text-decoration: none;
    transition: border-color 0.25s ease;
}

body.az-theme .az-cat:hover {
    border-color: var(--az-brass);
}

body.az-theme .az-cat__name {
    font-family: var(--az-font-head);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-weight: 600;
    color: var(--az-navy);
    text-align: center;
    padding-inline: 1rem;
}

body.az-theme .az-cat__hint {
    font-family: var(--az-font-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--az-soft);
    opacity: 0;
    transition: opacity 0.25s ease;
}

body.az-theme .az-cat:hover .az-cat__hint,
body.az-theme .az-cat:focus-visible .az-cat__hint {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Journal (az-journal) — 16:9 sharp covers, brass label, Lora title.
   -------------------------------------------------------------------------- */
body.az-theme .az-article__media {
    aspect-ratio: 16 / 9;
    background: var(--az-container-high);
}

body.az-theme .az-article__title {
    font-family: var(--az-font-head);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.35;
}

body.az-theme .az-article__title a {
    color: var(--az-navy);
    text-decoration: none;
    transition: color 0.2s ease;
}

body.az-theme .az-article__title a:hover,
body.az-theme .mr-article__title a:hover {
    color: var(--az-brass-ink);
}

/* --------------------------------------------------------------------------
   Newsletter (az-cta) — "The Friday Fit": a calm centred block on the bone
   band, white hairline field beside a solid navy button.
   -------------------------------------------------------------------------- */
body.az-theme .az-cta {
    background: var(--az-bone);
    padding: clamp(3.5rem, 7vw, 5rem) 0;
}

body.az-theme .az-cta__inner {
    max-width: 42rem;
    margin-inline: auto;
}

body.az-theme .az-cta__body {
    color: var(--az-muted);
    font-size: 1.05rem;
    max-width: 46ch;
}

body.az-theme .az-cta__form {
    display: flex;
    gap: 1rem;
    max-width: 30rem;
}

body.az-theme .az-cta__form input {
    flex: 1;
    min-width: 0;
    background: var(--az-white);
    border: 1px solid #c4c3c2;
    border-color: rgba(var(--az-navy-rgb), 0.2);
    border-radius: var(--az-radius);
    padding: 0.9rem 1.15rem;
    font-size: 0.95rem;
    color: var(--az-ink);
    transition: border-color 0.2s ease;
}

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

body.az-theme .az-cta__form input:focus {
    outline: none;
    border-color: var(--az-brass);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--az-brass) 24%, transparent);
}

body.az-theme .az-cta__btn {
    padding: 0.9rem 2rem;
    white-space: nowrap;
}

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

/* --------------------------------------------------------------------------
   Inherited chrome finishing — the midnight-navy footer (the export's footer
   sits on the same navy as the fabric band), plus the quiet brand strip.
   -------------------------------------------------------------------------- */
body.az-theme .mr-footer {
    background-color: var(--az-navy);
    border-top: 0;
    color: rgba(255, 255, 255, 0.7);
}

body.az-theme .mr-footer h4 {
    color: #fff;
    letter-spacing: 0.18em;
}

body.az-theme .mr-footer__brand {
    color: #fff;
    font-family: var(--az-font-head);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

body.az-theme .mr-footer a {
    color: rgba(255, 255, 255, 0.7);
}

/* On the navy footer the text-safe --az-brass-ink (tuned for a LIGHT backdrop)
   would sink; the raw brass is the readable hover here (6.43:1). */
body.az-theme .mr-footer a:hover {
    color: var(--az-brass);
}

body.az-theme .mr-social {
    border-radius: var(--az-radius);
    border-color: rgba(255, 255, 255, 0.22);
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
}

body.az-theme .mr-social:hover {
    background-color: var(--az-brass);
    border-color: var(--az-brass);
    color: var(--az-navy);
}

body.az-theme .mr-brandstrip span {
    font-family: var(--az-font-head);
    font-weight: 600;
    color: var(--az-soft);
}

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

/* --------------------------------------------------------------------------
   Reduced motion — every transform/zoom in this theme is decorative.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.az-theme .mr-btn,
    body.az-theme .az-keyline-link,
    body.az-theme .az-cat,
    body.az-theme .az-cat__hint,
    body.az-theme .az-fabric__ring,
    body.az-theme .mr-card__media img,
    body.az-theme .mr-tile__img,
    body.az-theme .mr-promo__img {
        transition: none;
    }

    /* The base's reduced-motion block only kills these transitions, not the
       hover transforms themselves. */
    body.az-theme .mr-card:hover .mr-card__media img,
    body.az-theme .mr-tile:hover .mr-tile__img,
    body.az-theme .mr-promo:hover .mr-promo__img {
        transform: none !important;
    }

    body.az-theme .az-cat__hint {
        opacity: 1;
    }
}

/* --------------------------------------------------------------------------
   Mobile (from the export's mobile frame): the hero stacks collage-over-copy
   with the two frames still side by side, and the newsletter form stacks.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.az-theme .az-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    body.az-theme .az-hero__collage {
        min-height: 340px;
    }

    body.az-theme .az-hero__panel {
        padding: 2.5rem 1.25rem 3rem;
    }

    body.az-theme .az-hero__copy {
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    body.az-theme .az-cta__form {
        flex-direction: column;
    }

    body.az-theme .az-cta__btn {
        width: 100%;
    }

    body.az-theme .mr-trust {
        gap: 0.5rem;
    }
}