/* ==========================================================================
   Trailhead — a rugged, premium outdoor-gear storefront (extends modern-retail).

   Ported from the Stitch "Trailhead | Premium Outdoor Gear" export. This theme
   INHERITS every modern-retail page + partial and ships only its own brand
   layer plus five home partials with `th-*` markup. This stylesheet therefore
   has two jobs:

     (a) RE-POINT the base neutral tokens (--mr-*) at the stone / pine / burnt-
         orange palette so every inherited page (shop / PDP / cart / checkout /
         account / blog) reads on-brand, and finish the inherited chrome
         (buttons, forms, header, hero, trust, promo, journal, footer);

     (b) style the theme's own `th-*` sections — the deep-pine "Pack Right,
         Once" checklist band, the Trail Favourites keyline link, the circular
         category band and the "Basecamp Bulletin" pine newsletter.

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

   Palette (from the export's DESIGN.md + rendered code.html):
     Pine green   #2e4a3b (primary brand, dark bands, outlines)
     Deep pine    #173326 (deepest — checklist band, footer)
     Burnt orange #9a4601 (CTAs, sale badges — the rendered `secondary`)
     Peach        #ffb68c (highlight on dark bands — glyphs, arrow links)
     Stone        #eef0ea (canvas), #f2f4ee (soft band)
   ========================================================================== */

body.th-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --th-green: var(--bs-primary, #2e4a3b);
    --th-green-rgb: var(--bs-primary-rgb, 46, 74, 59);
    --th-orange: var(--ll-accent, #9a4601);
    --th-radius: var(--ll-btn-radius, 0.375rem);
    --th-font-head: var(--ll-font-headings, "Poppins"), system-ui, sans-serif;
    --th-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;

    /* Literal palette */
    --th-green-deep: #173326;
    --th-peach: #ffb68c;
    --th-peach-soft: #ffdbc9;
    --th-stone: #eef0ea;
    --th-stone-2: #f2f4ee;
    --th-stone-3: #e7e9e3;
    --th-white: #ffffff;
    --th-ink: #191c19;
    --th-muted: #424844;
    --th-soft: #727973;
    --th-line: #e1e3dd;
    --th-line-2: #c2c8c2;

    /* Depth — soft, ambient, pine-tinted (DESIGN avoids deep shadows) */
    --th-shadow: 0 8px 20px -14px rgba(23, 51, 38, 0.35);
    --th-shadow-lg: 0 18px 40px -22px rgba(23, 51, 38, 0.45);

    /* Re-point the inherited base neutrals at the stone/pine palette so every
       inherited mr-* surface (bands, borders, fills, muted text, radius) reads
       on-brand across every inherited page. */
    --mr-ink: var(--th-ink);
    --mr-muted: var(--th-muted);
    --mr-soft: var(--th-soft);
    --mr-surface: var(--th-white);
    --mr-band: var(--th-stone);
    --mr-band-alt: var(--th-stone-2);
    --mr-fill: var(--th-stone-3);
    --mr-border: var(--th-line);
    --mr-border-strong: var(--th-line-2);
    --mr-radius: var(--th-radius);
    --mr-gold: var(--th-orange);
    --mr-shadow: var(--th-shadow);

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

/* ===== Typography ======================================================== */
body.th-theme h1, body.th-theme h2, body.th-theme h3,
body.th-theme h4, body.th-theme h5, body.th-theme h6 {
    font-family: var(--th-font-head);
    color: var(--th-ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}
/* DESIGN: headlines are Poppins Semibold (600), not the base 700. */
body.th-theme .mr-display { font-weight: 600; letter-spacing: -0.02em; }
body.th-theme .mr-headline { font-weight: 600; }

body.th-theme .mr-eyebrow {
    font-family: var(--th-font-head);
    color: var(--th-orange);
    letter-spacing: 0.14em;
}

/* ===== Buttons (6px rectangles — DESIGN "Soft yet disciplined") ========== */
/* DESIGN: primary CTAs use Sunrise Orange with white text; secondary buttons
   use pine-green outlines. Mapped to --ll-accent so the customizer drives the
   CTA colour. */
body.th-theme .mr-btn {
    font-family: var(--th-font-head);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: none;
    border-radius: var(--th-radius);
    padding: 0.85rem 1.9rem;
    transition: background-color 0.22s, color 0.22s, border-color 0.22s, filter 0.22s, transform 0.1s;
}
body.th-theme .mr-btn--hero { padding: 1.05rem 2.4rem; }
body.th-theme .mr-btn--primary { background-color: var(--th-orange); color: #fff; }
body.th-theme .mr-btn--primary:hover { filter: brightness(1.1); color: #fff; }
body.th-theme .mr-btn--outline { border-color: var(--th-green); color: var(--th-green); }
body.th-theme .mr-btn--outline:hover { background-color: var(--th-green); color: #fff; }
body.th-theme .mr-btn--light { background-color: #fff; color: var(--th-green); }
body.th-theme .mr-btn--light:hover { background-color: var(--th-orange); color: #fff; }
body.th-theme .mr-btn--on-dark { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
body.th-theme .mr-btn--on-dark:hover { background-color: #fff; color: var(--th-green); }
body.th-theme .mr-btn--ghost { color: var(--th-green); }
body.th-theme .mr-btn--ghost:hover { color: var(--th-orange); }
body.th-theme .mr-ulink:hover { color: var(--th-orange); border-color: var(--th-orange); }
body.th-theme .mr-rail-btn:hover { background: var(--th-green); border-color: var(--th-green); color: #fff; }

/* ===== Forms ============================================================= */
body.th-theme .form-control,
body.th-theme .form-select {
    border-radius: var(--th-radius);
    border-color: var(--th-line-2);
    background-color: #fff;
    color: var(--th-ink);
}
body.th-theme .form-control:focus,
body.th-theme .form-select:focus {
    border-color: var(--th-green);
    box-shadow: 0 0 0 3px rgba(var(--th-green-rgb), 0.16);
}
/* Never a padding shorthand on the select — it eats Bootstrap's caret gutter. */
body.th-theme .form-select { padding-inline-end: 2.25rem; }
body.th-theme .form-check-input:checked { background-color: var(--th-green); border-color: var(--th-green); }
body.th-theme .form-label { color: var(--th-ink); }

/* ===== Announcement bar (pine, matches the export's top ribbon) ========== */
body.th-theme .mr-announce {
    background-color: var(--th-green);
    color: #fff;
    text-transform: none;
    letter-spacing: 0.06em;
}
body.th-theme .mr-announce a { color: var(--th-peach); }

/* ===== Header ============================================================ */
body.th-theme .mr-logo {
    font-family: var(--th-font-head);
    letter-spacing: 0.02em;
    color: var(--th-green);
}
body.th-theme .mr-nav-link:hover { color: var(--th-orange); }
body.th-theme .mr-nav-link.is-active { color: var(--th-green); border-color: var(--th-orange); }
body.th-theme .mr-icon-btn:hover { color: var(--th-orange); }
body.th-theme .mr-badge { background-color: var(--th-orange); }
body.th-theme .mr-badge--wish { background-color: var(--th-orange); }

/* ===== Hero (inherited full-bleed) — pine bottom-up scrim + orange chip === */
body.th-theme .mr-hero__overlay {
    background: linear-gradient(0deg,
        rgba(23, 51, 38, 0.72) 0%,
        rgba(23, 51, 38, 0.3) 46%,
        rgba(23, 51, 38, 0) 100%);
}
body.th-theme .mr-hero .mr-hero__copy .mr-eyebrow {
    display: inline-block;
    background-color: var(--th-orange);
    color: #fff;
    padding: 0.4rem 0.85rem;
    border-radius: var(--th-radius);
    letter-spacing: 0.1em;
    margin-bottom: 1.25rem;
}

/* ===== Trust strip ======================================================= */
body.th-theme .mr-trust svg { color: var(--th-orange); }
body.th-theme .mr-trust strong { color: var(--th-green); }

/* ===== Promo tiles (inherited mr-promo) — pine scrim + peach arrow link === */
body.th-theme .mr-promo { box-shadow: var(--th-shadow); }
body.th-theme .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(23, 51, 38, 0.05) 35%, rgba(23, 51, 38, 0.82) 100%);
}
body.th-theme .mr-promo:hover .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(23, 51, 38, 0.2) 25%, rgba(23, 51, 38, 0.88) 100%);
}
body.th-theme .mr-promo__title { font-family: var(--th-font-head); }
body.th-theme .th-promo__text {
    display: block;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.95rem;
    margin-bottom: 0.65rem;
}
body.th-theme .mr-promo__cta {
    font-family: var(--th-font-head);
    color: var(--th-peach);
    border: 0;
    padding-bottom: 0;
    letter-spacing: 0.06em;
}
body.th-theme .mr-promo:hover .mr-promo__cta { color: var(--th-peach-soft); }

/* ===== Product card (inherited) — white card + 1px border + inset text ==== */
/* DESIGN: solid white cards, 1px border, 6px corners, soft hover shadow. The
   base card is borderless with flush text, so a border/background means the
   text must be inset (recurring gotcha #2). */
body.th-theme .mr-card {
    background-color: var(--th-white);
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius);
    overflow: hidden;
    transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
body.th-theme .mr-card:hover {
    box-shadow: var(--th-shadow-lg);
    border-color: var(--th-line-2);
    transform: translateY(-3px);
}
body.th-theme .mr-card__media { margin-bottom: 0; border-radius: 0; aspect-ratio: 1 / 1; }
body.th-theme .mr-card__eyebrow,
body.th-theme .mr-card__title,
body.th-theme .mr-card__price,
body.th-theme .mr-card [data-testid="card-rating"] { padding-inline: 1rem; }
body.th-theme .mr-card__media + * { padding-top: 0.9rem; }
body.th-theme .mr-card__price { padding-bottom: 1.1rem; font-family: var(--th-font-head); font-weight: 700; color: var(--th-green); }
body.th-theme .mr-card__price del { color: var(--th-soft); font-weight: 400; }
body.th-theme .mr-card__title { font-family: var(--th-font-head); color: var(--th-green); }
body.th-theme .mr-card__title a:hover { color: var(--th-orange); }

/* Sale / demo badge (base defines .mr-card__sale, but the partial emits
   .mr-card__badge — style it here so the SALE tag renders as the orange 6px
   rectangle the export shows; the inline-styled demo badge keeps its grey). */
body.th-theme .mr-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    background-color: var(--th-orange);
    color: #fff;
    font-family: var(--th-font-head);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.55rem;
    border-radius: var(--th-radius);
}

/* Overlay controls — restyled TOGETHER, contrast-checked both states.
   Pine on white ≈ 7.9:1; burnt-orange on white ≈ 6.4:1 — both clear the
   3:1 UI-component minimum. */
body.th-theme .mr-card__wish,
body.th-theme .mr-card__quickview {
    color: var(--th-green);
    background-color: rgba(255, 255, 255, 0.9);
}
body.th-theme .mr-card__wish:hover,
body.th-theme .mr-card__quickview:hover {
    color: var(--th-orange);
    background-color: #fff;
}
body.th-theme .mr-card__wish.is-active { color: var(--th-orange); }
body.th-theme .mr-card__quick { background-color: var(--th-green); }
body.th-theme .mr-card__quick:hover { background-color: var(--th-orange); }

/* ===== Journal (inherited mr-article) ==================================== */
body.th-theme .mr-article__title a { color: var(--th-green); }
body.th-theme .mr-article__title a:hover { color: var(--th-orange); }

/* ===== th-featured — Trail Favourites keyline link + sub-line ============ */
body.th-theme .th-subline { color: var(--th-soft); font-size: 1rem; }
body.th-theme .th-keyline-link {
    font-family: var(--th-font-head);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--th-orange);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: border-color 0.2s, color 0.2s;
}
body.th-theme .th-keyline-link:hover { border-bottom-color: var(--th-orange); }

/* ===== th-checklist — "Pack Right, Once" deep-pine band ================== */
body.th-theme .th-checklist {
    position: relative;
    overflow: hidden;
    background-color: var(--th-green-deep);
    color: #fff;
    padding-block: clamp(56px, 9vw, 88px);
}
body.th-theme .th-checklist__title { color: #fff; }
body.th-theme .th-checklist__rule {
    display: block;
    width: 6rem;
    height: 4px;
    background-color: var(--th-orange);
    border-radius: 2px;
}
body.th-theme .th-checklist__card {
    height: 100%;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--th-radius);
    padding: clamp(1.5rem, 3vw, 2rem);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
body.th-theme .th-checklist__cardtitle {
    font-family: var(--th-font-head);
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 1.25rem;
}
body.th-theme .th-checklist__list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    padding-block: 0.5rem;
}
body.th-theme .th-checklist__list li svg {
    width: 22px;
    height: 22px;
    color: var(--th-peach);
    flex-shrink: 0;
}

/* ===== th-catband — circular category tiles on white =================== */
body.th-theme .th-catband { background-color: var(--th-white); padding-block: clamp(40px, 6vw, 64px); }
body.th-theme .th-catband__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: var(--th-radius);
    text-decoration: none;
    transition: background-color 0.25s ease;
}
body.th-theme .th-catband__tile:hover { background-color: var(--th-stone); }
body.th-theme .th-catband__circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 9999px;
    background-color: rgba(var(--th-green-rgb), 0.14);
    color: var(--th-green);
    transition: background-color 0.25s ease, color 0.25s ease;
}
body.th-theme .th-catband__circle svg { width: 36px; height: 36px; }
body.th-theme .th-catband__tile:hover .th-catband__circle { background-color: var(--th-green); color: #fff; }
body.th-theme .th-catband__label { font-family: var(--th-font-head); font-weight: 600; color: var(--th-green); }

/* ===== th-cta — "Basecamp Bulletin" pine newsletter ==================== */
body.th-theme .th-cta {
    background-color: var(--th-green);
    color: #fff;
    padding-block: clamp(56px, 9vw, 88px);
}
body.th-theme .th-cta__glyph { display: inline-flex; color: var(--th-peach); }
body.th-theme .th-cta__glyph svg { width: 48px; height: 48px; }
body.th-theme .th-cta__eyebrow { color: var(--th-peach); }
body.th-theme .th-cta__title { color: #fff; }
body.th-theme .th-cta__body { max-width: 52ch; color: rgba(255, 255, 255, 0.82); font-size: 1.1rem; }
body.th-theme .th-cta__form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 34rem;
}
body.th-theme .th-cta__form input {
    flex: 1;
    min-width: 12rem;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--th-radius);
    color: #fff;
    padding: 0.9rem 1.25rem;
    font-size: 0.98rem;
}
body.th-theme .th-cta__form input::placeholder { color: rgba(255, 255, 255, 0.5); }
body.th-theme .th-cta__form input:focus {
    outline: none;
    border-color: var(--th-peach);
    box-shadow: 0 0 0 3px rgba(255, 182, 140, 0.3);
}
body.th-theme .th-cta__btn {
    background-color: var(--th-orange);
    color: #fff;
    border: 0;
    border-radius: var(--th-radius);
    font-family: var(--th-font-head);
    font-weight: 700;
    padding: 0.9rem 2rem;
    cursor: pointer;
    transition: filter 0.2s;
}
body.th-theme .th-cta__btn:hover { filter: brightness(1.1); }
body.th-theme .th-cta__note { color: rgba(255, 255, 255, 0.55); font-size: 0.8rem; }

/* ===== Footer (inherited mr-footer) — deep-pine panel ==================== */
/* The base footer is a light band; the export's footer is deep pine with light
   text. Recolour the surface AND every text token that rides on it, or the
   re-pointed dark --mr-muted / --mr-soft render invisible on the dark band. */
body.th-theme .mr-footer {
    background-color: var(--th-green-deep);
    border-top-color: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.72);
}
body.th-theme .mr-footer h4 { color: #fff; }
body.th-theme .mr-footer .mr-footer__brand { color: #fff; }
body.th-theme .mr-footer a { color: rgba(255, 255, 255, 0.72); }
body.th-theme .mr-footer a:hover { color: var(--th-peach); }
body.th-theme .mr-footer .mr-muted { color: rgba(255, 255, 255, 0.75); }
body.th-theme .mr-footer .mr-soft { color: rgba(255, 255, 255, 0.55); }
body.th-theme .mr-footer .mr-divider { background-color: rgba(255, 255, 255, 0.12); }
body.th-theme .mr-footer .form-control {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}
body.th-theme .mr-footer .form-control::placeholder { color: rgba(255, 255, 255, 0.45); }
body.th-theme .mr-social { border-color: rgba(255, 255, 255, 0.2); color: #fff; }
body.th-theme .mr-social:hover { background-color: var(--th-orange); border-color: var(--th-orange); color: #fff; }

/* ===== PDP / cart / checkout / account finishing (inherited pages) ======= */
body.th-theme .mr-stars { color: var(--th-orange); }
body.th-theme .mr-sale { background-color: var(--th-orange); color: #fff; }
body.th-theme .mr-tabs .nav-link.active { color: var(--th-green); border-bottom-color: var(--th-orange); }
body.th-theme .mr-page.is-active { background-color: var(--th-green); border-color: var(--th-green); color: #fff; }
body.th-theme .mr-page:hover { border-color: var(--th-green); color: var(--th-green); }
body.th-theme .mr-acct-link.is-active { background-color: var(--th-green); color: #fff; }
body.th-theme .mr-step.is-done .mr-step__dot,
body.th-theme .mr-step.is-current .mr-step__dot { border-color: var(--th-green); }
body.th-theme .mr-step.is-done .mr-step__dot { background-color: var(--th-green); color: #fff; }

/* ===== Accessibility — recolour focus outlines, never remove them ======== */
body.th-theme a:focus-visible,
body.th-theme button:focus-visible,
body.th-theme input:focus-visible,
body.th-theme select:focus-visible,
body.th-theme textarea:focus-visible {
    outline: 2px solid var(--th-green);
    outline-offset: 2px;
}

/* ===== Motion preferences ================================================ */
@media (prefers-reduced-motion: reduce) {
    body.th-theme .mr-card:hover { transform: none; }
    body.th-theme .mr-card,
    body.th-theme .mr-card__media img,
    body.th-theme .mr-promo__img,
    body.th-theme .mr-article__media img { transition: none; }
}

/* ===== Mobile ============================================================ */
@media (max-width: 991.98px) {
    body.th-theme { font-size: 15.5px; }
    body.th-theme .th-checklist,
    body.th-theme .th-cta { padding-block: clamp(40px, 10vw, 60px); }
    body.th-theme .th-catband__circle { width: 64px; height: 64px; }
    body.th-theme .th-catband__circle svg { width: 30px; height: 30px; }
    body.th-theme .th-cta__form { flex-direction: column; }
    body.th-theme .th-cta__btn { width: 100%; }
}