/* ==========================================================================
   Transit — bright departure-lounge optimism for luggage & travel gear.

   Ported from the Stitch "Transit — Luggage & Travel Essentials" design (the
   "Bright Departure-Lounge Optimism" design system lives at
   docs/templates/.../stitch_55_transit_e_commerce_storefront/transit/DESIGN.md):
   a cloud-grey (#f4f4f2) canvas with content lifting onto white surfaces, deep
   petrol (#175366) authority for type / nav / actions, sunset-coral (#ef7855)
   accents for energy, soft 12px (0.75rem) corners echoing hardshell silhouettes,
   Albert Sans headlines over Source Sans 3 body/UI, and depth from tonal layers
   + 1px low-contrast outlines rather than heavy shadows.

   This theme OWNS its hero (split), packing-guide band and newsletter home
   sections (tr-* markup) and INHERITS Modern Retail's functional pages plus the
   header / trust / promo / featured / new-arrivals / categories / journal /
   footer partials. This stylesheet therefore has two jobs:

     (a) style the NEW `tr-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the base
         neutral tokens at the cloud-grey/petrol palette, setting the 0.75rem
         radius system, and drawing the petrol footer + petrol band.

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

   Contrast notes (WCAG): petrol #175366 = 8.5:1 on white / cloud-grey (safe for
   text + fills). Sunset coral #ef7855 = 2.81:1 on white — used ONLY as a large
   FILL, never as small text; every coral TEXT role (eyebrows, links, sale
   badge) routes to the darker sibling coral-ink #a23f20 (6.43:1 on white), which
   is the export's own `secondary` hue.
   ========================================================================== */

body.tr-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --tr-petrol: var(--bs-primary, #175366);
    --tr-petrol-rgb: var(--bs-primary-rgb, 23, 83, 102);
    --tr-coral: var(--ll-accent, #ef7855);
    --tr-font-head: var(--ll-font-headings, "Albert Sans"), system-ui, -apple-system, sans-serif;
    --tr-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;

    /* Departure-lounge palette (DESIGN.md) */
    --tr-cloud: #f4f4f2;      /* surface-container-low — the base canvas */
    --tr-white: #ffffff;      /* content cards lift onto white */
    --tr-container: #eeeeec;  /* surface-container — media wells / placeholders */
    --tr-ink: #1a1c1b;        /* on-surface */
    --tr-muted: #40484c;      /* on-surface-variant */
    --tr-soft: #70787c;       /* outline */
    --tr-line: #e2e3e1;       /* surface-variant / hairline */
    --tr-line-strong: #c0c8cc;/* outline-variant */
    --tr-coral-ink: #a23f20;  /* secondary — coral TEXT roles (6.43:1 on white) */

    /* Re-point the inherited base neutrals at the cloud-grey palette so every
       inherited mr-* surface (bands, borders, fills, muted text) follows. */
    --mr-ink: var(--tr-ink);
    --mr-muted: var(--tr-muted);
    --mr-soft: var(--tr-soft);
    --mr-surface: var(--tr-white);
    --mr-band: var(--tr-white);
    --mr-band-alt: var(--tr-white);
    --mr-fill: var(--tr-container);
    --mr-border: var(--tr-line);
    --mr-border-strong: var(--tr-line-strong);
    --mr-radius: 0.75rem;
    --mr-gold: var(--tr-coral);
    --mr-shadow: 0 4px 20px rgba(var(--tr-petrol-rgb), 0.06);

    /* Bare prose links render petrol, not Bootstrap blue; hover deepens. */
    --bs-link-color-rgb: var(--tr-petrol-rgb);
    --bs-link-hover-color-rgb: var(--tr-petrol-rgb);

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

/* --------------------------------------------------------------------------
   Shape — soft 12px hardshell radius on cards, inputs, tiles, buttons.
   -------------------------------------------------------------------------- */
body.tr-theme .mr-card,
body.tr-theme .mr-card__media,
body.tr-theme .mr-promo,
body.tr-theme .mr-promo__img,
body.tr-theme .mr-tile,
body.tr-theme .mr-tile--cat,
body.tr-theme .mr-article__media,
body.tr-theme .mr-article__media img,
body.tr-theme .form-control,
body.tr-theme .form-select {
    border-radius: 0.75rem;
}

/* --------------------------------------------------------------------------
   Typography — Albert Sans architectural headlines, coral-ink signage eyebrows.
   -------------------------------------------------------------------------- */
body.tr-theme h1, body.tr-theme h2, body.tr-theme h3,
body.tr-theme h4, body.tr-theme h5, body.tr-theme h6,
body.tr-theme .mr-display {
    font-family: var(--tr-font-head);
    color: var(--tr-petrol);
    font-weight: 600;
    letter-spacing: -0.02em;
}

body.tr-theme .mr-eyebrow,
body.tr-theme .tr-eyebrow,
body.tr-theme .mr-card__eyebrow {
    font-family: var(--tr-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tr-coral-ink);
}

/* --------------------------------------------------------------------------
   Buttons — solid petrol primary, petrol-outline secondary, signage labels.
   -------------------------------------------------------------------------- */
body.tr-theme .mr-btn {
    border-radius: 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: none;
}

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

body.tr-theme .mr-btn--primary:hover { filter: brightness(1.12); color: #fff; }

body.tr-theme .mr-btn--outline {
    border-width: 1.5px;
    border-color: var(--tr-petrol);
    color: var(--tr-petrol);
    background: transparent;
}

body.tr-theme .mr-btn--outline:hover {
    background-color: var(--tr-petrol);
    border-color: var(--tr-petrol);
    color: #fff;
}

/* Inputs — white / cloud fields, 1px petrol-tint border, petrol focus. */
body.tr-theme .form-control,
body.tr-theme .form-select {
    background-color: var(--tr-white);
    border-color: var(--tr-line-strong);
    color: var(--tr-ink);
}

body.tr-theme .form-control:focus,
body.tr-theme .form-select:focus {
    border-color: var(--tr-petrol);
    box-shadow: 0 0 0 0.15rem rgba(var(--tr-petrol-rgb), 0.15);
}

/* Bootstrap reserves the right gutter for the caret background-image; the base
   app.css sets a padding SHORTHAND on .form-control/.form-select together,
   which eats it. Give selects the gutter back (logical prop → RTL-safe). */
body.tr-theme .form-select { padding-inline-end: 2.25rem; }

/* --------------------------------------------------------------------------
   Announcement + header — petrol signage band, white glass header, petrol nav.
   -------------------------------------------------------------------------- */
body.tr-theme .mr-announce {
    background-color: var(--tr-petrol);
    color: #fff;
    letter-spacing: 0.12em;
}

body.tr-theme .mr-header {
    background-color: rgba(249, 249, 247, 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--tr-line);
}

body.tr-theme .mr-logo {
    font-family: var(--tr-font-head);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--tr-petrol);
}

body.tr-theme .mr-nav-link { color: var(--tr-muted); font-weight: 500; }
body.tr-theme .mr-nav-link:hover,
body.tr-theme .mr-nav-link.is-active { color: var(--tr-petrol); }

body.tr-theme .mr-icon-btn { color: var(--tr-petrol); }
body.tr-theme .mr-icon-btn:hover { color: var(--tr-coral-ink); }

body.tr-theme .mr-cart-count { background-color: var(--tr-coral-ink); }

/* --------------------------------------------------------------------------
   Split hero (tr-hero) — hardshell photo left inside an angled clip, copy
   right on the cloud-grey surface. On mobile the halves stack and the clip
   flattens.
   -------------------------------------------------------------------------- */
body.tr-theme .tr-hero {
    display: flex;
    flex-direction: row;
    min-height: clamp(520px, 78vh, 760px);
    background-color: var(--tr-cloud);
    overflow: hidden;
}

body.tr-theme .tr-hero__media {
    width: 50%;
    overflow: hidden;
    -webkit-clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
    background-color: var(--tr-container);
}

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

body.tr-theme .tr-hero__copy {
    width: 50%;
    display: flex;
    align-items: center;
    padding: clamp(2rem, 5vw, 5rem) clamp(1.5rem, 5vw, 6rem);
}

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

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

body.tr-theme .tr-hero__lead {
    color: var(--tr-muted);
    font-size: 1.125rem;
    line-height: 1.6;
    max-width: 28rem;
    margin-bottom: 2.5rem;
}

body.tr-theme .tr-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* --------------------------------------------------------------------------
   Packing-guide band (tr-guide) — full-bleed petrol band, centered display
   headline, three ringed line-icon scenarios in white.
   -------------------------------------------------------------------------- */
body.tr-theme .tr-guide {
    background-color: var(--tr-petrol);
    color: #fff;
    padding-block: clamp(4rem, 8vw, 6rem);
    text-align: center;
}

body.tr-theme .tr-guide__title {
    color: #fff;
    font-size: clamp(1.9rem, 3.4vw, 2.75rem);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

body.tr-theme .tr-guide__item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.tr-theme .tr-guide__icon {
    width: 5rem;
    height: 5rem;
    border-radius: 9999px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: #fff;
}

body.tr-theme .tr-guide__icon svg { width: 2rem; height: 2rem; }

body.tr-theme .tr-guide__item-title {
    color: #fff;
    font-size: 1.375rem;
    margin-bottom: 0.5rem;
}

body.tr-theme .tr-guide__item-text {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   Newsletter (tr-newsletter) — centered light "Boarding Pass" band with an
   inline email + petrol Subscribe stub form.
   -------------------------------------------------------------------------- */
body.tr-theme .tr-newsletter {
    background-color: rgba(var(--tr-petrol-rgb), 0.04);
    padding-block: clamp(4rem, 8vw, 5.5rem);
}

body.tr-theme .tr-newsletter__inner {
    max-width: 40rem;
    margin-inline: auto;
    padding-inline: 1.5rem;
    text-align: center;
}

body.tr-theme .tr-newsletter__title {
    color: var(--tr-petrol);
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    margin-bottom: 1rem;
}

body.tr-theme .tr-newsletter__body {
    color: var(--tr-muted);
    font-size: 1.125rem;
    margin-bottom: 2.5rem;
}

body.tr-theme .tr-newsletter__form {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    max-width: 34rem;
    margin-inline: auto;
}

body.tr-theme .tr-newsletter__form input {
    flex: 1 1 auto;
    background-color: var(--tr-white);
    border: 1px solid var(--tr-line-strong);
    border-radius: 0.75rem;
    padding: 0.9rem 1.25rem;
    font-size: 0.95rem;
    color: var(--tr-ink);
}

body.tr-theme .tr-newsletter__form input:focus {
    outline: none;
    border-color: var(--tr-petrol);
    box-shadow: 0 0 0 0.15rem rgba(var(--tr-petrol-rgb), 0.15);
}

body.tr-theme .tr-newsletter__form .mr-btn { flex: 0 0 auto; }

body.tr-theme .tr-newsletter__note {
    color: var(--tr-soft);
    font-size: 0.8rem;
    margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — white lift, subtle petrol-tint border,
   soft ambient shadow on hover. Text is inset because the card now has a
   border (base cards are borderless + flush).
   -------------------------------------------------------------------------- */
body.tr-theme .mr-card {
    background: var(--tr-white);
    border: 1px solid rgba(var(--tr-petrol-rgb), 0.1);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

body.tr-theme .mr-card:hover {
    box-shadow: 0 10px 28px rgba(var(--tr-petrol-rgb), 0.1);
}

body.tr-theme .mr-card > p,
body.tr-theme .mr-card > h3 { padding-inline: 1.15rem; }
body.tr-theme .mr-card > *:last-child { padding-bottom: 1.15rem; }
body.tr-theme .mr-card__media { border-radius: 0; margin-bottom: 0; }
body.tr-theme .mr-card__media + * { padding-top: 1.15rem; }

body.tr-theme .mr-card__title,
body.tr-theme .mr-card__title a {
    font-family: var(--tr-font-head);
    font-weight: 600;
    color: var(--tr-petrol);
}
body.tr-theme .mr-card__title a:hover { color: var(--tr-coral-ink); }
body.tr-theme .mr-card__price { color: var(--tr-petrol); font-weight: 600; }

/* Sale badge / tags — coral-ink fill (export's `secondary`), white text 6.43:1
   (the bright coral #ef7855 washes white text out at 2.81:1). */
body.tr-theme .mr-card__badge,
body.tr-theme .mr-sale-tag { background: var(--tr-coral-ink); color: #fff; }

/* The two round overlay controls (heart + eye). The base inks them with the
   theme's OWN text pair; petrol-on-white gives 8.5:1 in both states. Restyle
   both together and keep them pill-round. */
body.tr-theme .mr-card__wish,
body.tr-theme .mr-card__quickview {
    background: var(--tr-white);
    color: var(--tr-petrol);
    border-radius: 9999px;
}
body.tr-theme .mr-card__wish:hover,
body.tr-theme .mr-card__quickview:hover {
    background: var(--tr-petrol);
    color: #fff;
}
body.tr-theme .mr-card__wish.is-active { color: var(--tr-coral-ink); }

/* Slide-up Add-to-Cart — petrol fill. */
body.tr-theme .mr-card__quick {
    background: var(--tr-petrol);
    color: #fff;
    border-radius: 0.5rem;
}

/* --------------------------------------------------------------------------
   Inherited promo tiles — collection tiles with the coral keyline on hover.
   -------------------------------------------------------------------------- */
body.tr-theme .mr-promo { border-radius: 0.75rem; }
body.tr-theme .mr-promo:hover .mr-promo__cta {
    color: var(--tr-coral);
    border-color: var(--tr-coral);
}

/* Category circle tiles carry a representative product image; keep the soft
   radius + petrol hover keyline. */
body.tr-theme .mr-tile--cat { border: 1px solid var(--tr-line); }
body.tr-theme .mr-tile--cat:hover { border-color: var(--tr-petrol); }

/* --------------------------------------------------------------------------
   Trust strip — petrol line icons (export uses text-primary, not the accent),
   readable on the white band.
   -------------------------------------------------------------------------- */
body.tr-theme .mr-trust svg { color: var(--tr-petrol); }
body.tr-theme .mr-trust strong { color: var(--tr-ink); }

/* --------------------------------------------------------------------------
   Footer — full-bleed deep petrol with white text (DESIGN.md). Recolour every
   inherited text token + invert the social chips; the accent hover would fall
   under 4.5:1 on petrol, so links hover to white.
   -------------------------------------------------------------------------- */
body.tr-theme .mr-footer {
    background-color: var(--tr-petrol);
    border-top: 0;
    color: #fff;
}
body.tr-theme .mr-footer h4 { color: #fff; }
body.tr-theme .mr-footer__brand { color: #fff; font-family: var(--tr-font-head); }
body.tr-theme .mr-footer a { color: rgba(255, 255, 255, 0.75); }
body.tr-theme .mr-footer a:hover { color: #fff; }
body.tr-theme .mr-footer p { color: rgba(255, 255, 255, 0.75); }
body.tr-theme .mr-footer .mr-social {
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}
body.tr-theme .mr-footer .mr-social:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--tr-petrol);
}

/* Underline links (editorial "View All Stories" etc.) hover to coral-ink. */
body.tr-theme .mr-ulink { color: var(--tr-petrol); }
body.tr-theme .mr-ulink:hover { color: var(--tr-coral-ink); border-color: var(--tr-coral-ink); }
body.tr-theme .mr-divider { border-color: var(--tr-line); opacity: 1; }

/* The base primary button label is only specificity (0,1,0); re-assert white
   so nothing (e.g. a link-colour cascade) can repaint it. */
body.tr-theme .mr-btn--primary { color: #fff; }

/* Focus ring — petrol on light surfaces (8.5:1); the accent coral is only
   2.81:1 on white, so it can't be the focus indicator. On the petrol footer,
   flip to coral so the ring stays visible. */
body.tr-theme a:focus-visible,
body.tr-theme button:focus-visible,
body.tr-theme input:focus-visible,
body.tr-theme select:focus-visible {
    outline-color: var(--tr-petrol);
}
body.tr-theme .mr-footer a:focus-visible,
body.tr-theme .mr-footer button:focus-visible {
    outline-color: var(--tr-coral);
}

/* --------------------------------------------------------------------------
   Reduced motion — the reveal + hover transforms are decorative.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.tr-theme .mr-btn,
    body.tr-theme .mr-card,
    body.tr-theme .mr-promo,
    body.tr-theme .mr-promo__img { transition: none; }
}

/* --------------------------------------------------------------------------
   Mobile (from the Stitch mobile frames): the split hero stacks and the photo
   clip flattens; bands tighten.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.tr-theme .tr-hero {
        flex-direction: column;
        min-height: 0;
    }
    body.tr-theme .tr-hero__media {
        width: 100%;
        height: 320px;
        -webkit-clip-path: none;
        clip-path: none;
    }
    body.tr-theme .tr-hero__copy {
        width: 100%;
        padding: 2.5rem 1.5rem 3rem;
    }
    body.tr-theme .tr-newsletter__form { flex-direction: column; }
    body.tr-theme .tr-newsletter__form .mr-btn { width: 100%; }
}