/* ==========================================================================
   Karak Bazaar — warm modern spice house for heritage teas & pantry staples.

   Ported from the Stitch "Karak Bazaar" design (the Warm Modern Spice House
   design system lives at docs/templates/pending/
   stitch_19_karak_bazaar_e_commerce_store/…/warm_modern_spice_house/DESIGN.md):
   a chai-cream "pantry" canvas, deep-maroon structure and calls to action, a
   sparing saffron-gold accent for prices/labels/interactive states, Playfair
   Display headlines over Source Sans 3 body/UI, an 8px radius applied
   consistently to buttons/inputs/imagery, and soft maroon-tinted hairlines
   instead of hard shadows.

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

     (a) style the NEW `kb-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the chai-cream palette, dressing the promo
         tiles and footer in maroon, and inking the product card price in
         the text-safe amber.

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

   CONTRAST (measured with App\Support\Theming\ContrastChecker):
     - primary maroon #6e1f26 is DARK — 10.60:1 on cream, 11.13:1 on white —
       safe everywhere it is used as text, an icon or a fill carrying white
       text.
     - accent saffron #e0a13a is LIGHT — 2.14:1 on cream, 2.25:1 on white,
       and white-on-amber is 2.25:1. It FAILS both WCAG AA text (4.5:1) and
       the lenient 3:1 non-text/icon threshold on this cream canvas, so the
       raw accent is used ONLY for FILLS carrying dark text (maroon/charcoal
       on amber clears 4.5:1 — see below) or for large/decorative roles on a
       DARK backdrop (e.g. the origin-story pin icon on the maroon band
       measures 4.94:1). A darker "-ink" sibling, --kb-amber-ink (#815600 —
       the design system's own "secondary" token, not an invented value),
       covers every amber TEXT/link/icon role: 6.13:1 on cream, 6.43:1 on
       white, 6.43:1 as the product-card wishlist active-heart icon on the
       white overlay circle. Mirrors inkwell's --iw-orange-ink pattern.
     - --mr-soft (small captions/eyebrows/breadcrumbs — see app.css) cannot
       reuse the design's own "outline" token (#887272): that measures only
       4.26:1 on cream, under the 4.5:1 normal-text minimum. --kb-soft
       (#6f5c5c) is a deliberately darkened value in the same warm-brown
       family that clears 5.95:1 on cream and 5.37:1 on the card surface
       tint.
   ========================================================================== */

body.kb-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --kb-maroon: var(--bs-primary, #6e1f26);
    --kb-maroon-rgb: var(--bs-primary-rgb, 110, 31, 38);
    /* 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 maroon. */
    --bs-link-color-rgb: var(--kb-maroon-rgb);
    --kb-amber: var(--ll-accent, #e0a13a);
    /* AA-safe TEXT/link/icon variant of the accent — see the CONTRAST note
       above. Decorative roles on a DARK backdrop (origin-story pin) may keep
       --kb-amber; every small-text or icon-on-cream role uses this instead. */
    --kb-amber-ink: #815600;
    --kb-radius: var(--bs-border-radius, 0.5rem);
    --kb-font-head: var(--ll-font-headings, "Playfair Display"), Georgia, serif;
    --kb-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;

    /* Chai-cream pantry palette (DESIGN.md) */
    --kb-cream: #fff8f5;         /* page canvas + header + inherited surface  */
    --kb-container-low: #fbf2ed; /* hero panel / newsletter card (low)        */
    --kb-container: #f5ece7;     /* card media well / band                    */
    --kb-container-high: #efe6e2;/* new-arrivals media well (container-high)  */
    --kb-white: #ffffff;         /* surface-container-lowest                  */
    --kb-ink: #1e1b18;           /* on-surface                                */
    --kb-muted: #554242;         /* on-surface-variant                        */
    --kb-soft: #6f5c5c;          /* darkened "outline" — see CONTRAST note    */

    /* Shape + depth — a consistent 8px radius everywhere (DESIGN.md
       "Shapes"), soft long maroon-tinted shadows instead of hard elevation. */
    --kb-shadow: 0 14px 32px -10px rgba(var(--kb-maroon-rgb), 0.12);

    /* Re-point the inherited base neutrals at the chai-cream palette so
       every inherited mr-* surface (bands, borders, fills, muted text)
       warms. Borders read a maroon-tinted hairline (DESIGN.md "Outlines":
       "very thin (1px) borders in a muted version of the primary maroon,
       approx. 15% opacity") via color-mix, with a literal fallback for
       browsers that don't support it. */
    --mr-ink: var(--kb-ink);
    --mr-muted: var(--kb-muted);
    --mr-soft: var(--kb-soft);
    --mr-surface: var(--kb-cream);
    --mr-band: var(--kb-container-low);
    --mr-band-alt: var(--kb-container);
    --mr-fill: var(--kb-container-high);
    --mr-border: #ecdbda;
    --mr-border: color-mix(in srgb, var(--kb-maroon) 15%, var(--kb-cream));
    --mr-border-strong: #d7b6b5;
    --mr-border-strong: color-mix(in srgb, var(--kb-maroon) 32%, var(--kb-cream));
    --mr-radius: var(--kb-radius);
    --mr-gold: var(--kb-amber-ink);
    --mr-shadow: var(--kb-shadow);

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

/* --------------------------------------------------------------------------
   Shape discipline — a consistent 8px radius on interactive elements and
   imagery; never a padding shorthand on .form-select (it would collapse
   Bootstrap's reserved 2.25rem caret gutter — the base app.css already
   restores it with padding-inline-end, untouched here).
   -------------------------------------------------------------------------- */
body.kb-theme .form-control,
body.kb-theme .form-select,
body.kb-theme .dropdown-menu,
body.kb-theme .offcanvas {
    border-radius: var(--kb-radius);
}

body.kb-theme .mr-promo,
body.kb-theme .mr-promo__img,
body.kb-theme .kb-hero__media,
body.kb-theme .kb-origin__card {
    border-radius: var(--kb-radius);
}

/* --------------------------------------------------------------------------
   Typography — Playfair authority at 600 weight (the design's headline-md /
   headline-sm), saffron-ink tracked eyebrows. `.mr-display` keeps the base's
   700 weight for the hero (display-lg is 700 per DESIGN.md).
   -------------------------------------------------------------------------- */
body.kb-theme h1, body.kb-theme h2, body.kb-theme h3,
body.kb-theme h4, body.kb-theme h5, body.kb-theme h6 {
    font-family: var(--kb-font-head);
    color: var(--kb-maroon);
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.kb-theme .mr-display {
    font-weight: 700;
}

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

/* --------------------------------------------------------------------------
   Buttons — solid maroon primary; a quiet gold-outline secondary (the
   template's "Build a Gift Box" ghost button) with maroon text so it never
   relies on the accent for legibility.
   -------------------------------------------------------------------------- */
body.kb-theme .mr-btn {
    border-radius: var(--kb-radius);
    font-weight: 600;
    letter-spacing: 0.1em;
    transition: filter 0.25s ease, background-color 0.25s ease, color 0.25s ease, transform 0.1s ease;
}

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

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

body.kb-theme .kb-btn-outline {
    border: 1px solid var(--kb-amber);
    color: var(--kb-maroon);
    background: transparent;
}

body.kb-theme .kb-btn-outline:hover {
    background: color-mix(in srgb, var(--kb-amber) 8%, transparent);
    border-color: var(--kb-amber);
    color: var(--kb-maroon);
}

/* The saffron "View All Stories →" / "Read More →" link. */
body.kb-theme .kb-view-link {
    color: var(--kb-amber-ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--kb-amber);
}

body.kb-theme .kb-view-link:hover { color: var(--kb-maroon); border-color: var(--kb-maroon); }

/* Inputs — cream fields, a muted-maroon hairline; focus draws the saffron
   border per DESIGN.md ("The focus state transitions the border to Saffron
   Gold"). */
body.kb-theme .form-control,
body.kb-theme .form-select {
    background-color: var(--kb-cream);
    border-color: var(--mr-border);
    color: var(--kb-ink);
}

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

/* --------------------------------------------------------------------------
   Announcement + header — maroon whisper band, then the bright cream header
   under a maroon-tinted hairline: Playfair wordmark, quiet Source Sans nav.
   -------------------------------------------------------------------------- */
body.kb-theme .mr-announce {
    background-color: var(--kb-maroon);
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.16em;
    font-size: 0.68rem;
}

body.kb-theme .mr-header {
    background-color: var(--kb-cream);
    border-bottom-color: var(--mr-border);
}

body.kb-theme .mr-logo {
    font-family: var(--kb-font-head);
    font-weight: 700;
    color: var(--kb-maroon);
}

body.kb-theme .mr-nav-link {
    font-family: var(--kb-font-body);
    color: var(--kb-muted);
}

body.kb-theme .mr-nav-link:hover { color: var(--kb-amber-ink); }

body.kb-theme .mr-nav-link.is-active {
    color: var(--kb-maroon);
    font-weight: 700;
    border-bottom-color: var(--kb-amber);
}

body.kb-theme .mr-search input {
    background: var(--kb-container-low);
    border-color: var(--mr-border);
}

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

body.kb-theme .mr-icon-btn { color: var(--kb-maroon); }
body.kb-theme .mr-icon-btn:hover { color: var(--kb-amber-ink); }

/* --------------------------------------------------------------------------
   Hero (kb-hero) — the split still-life: photograph edge-to-edge on the
   left, copy on the cream panel to the right. Stacks image-over-copy on
   mobile (per the export's mobile frame).
   -------------------------------------------------------------------------- */
body.kb-theme .kb-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 600px;
}

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

body.kb-theme .kb-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}

body.kb-theme .kb-hero:hover .kb-hero__img { transform: scale(1.05); }

body.kb-theme .kb-hero__panel {
    display: flex;
    align-items: center;
    background: var(--kb-cream);
    padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
}

body.kb-theme .kb-hero__title {
    font-size: clamp(2.25rem, 4.5vw, 3rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

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

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

body.kb-theme .kb-btn-hero { padding: 1rem 2rem; }

/* --------------------------------------------------------------------------
   Trust strip (inherited mr-trust) — the raw accent fails even the lenient
   3:1 icon threshold on cream (2.14:1 measured), so icons ink with
   --kb-amber-ink instead (6.13:1).
   -------------------------------------------------------------------------- */
body.kb-theme .mr-trust svg { color: var(--kb-amber-ink); }

body.kb-theme .mr-trust strong {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kb-maroon);
}

/* --------------------------------------------------------------------------
   Promo tiles (inherited mr-promo) — the template's Teas / Spices / Gift
   Boxes tiles; the base's dark-scrim caption already pairs light amber text
   with a dark photo backdrop (safe — see CONTRAST note), so only shape and
   the resting caption weight need a touch here.
   -------------------------------------------------------------------------- */
body.kb-theme .mr-promo__title { font-weight: 600; }

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — Playfair titles, bold saffron-ink
   prices (DESIGN.md: "Prices are rendered in a bold weight … to ensure they
   are immediately scannable"), maroon sale/demo badge.
   -------------------------------------------------------------------------- */
body.kb-theme .mr-card__media { background-color: var(--kb-container); }

body.kb-theme .mr-card__title,
body.kb-theme .mr-card__title a {
    font-family: var(--kb-font-head);
    font-weight: 600;
    color: var(--kb-maroon);
}

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

body.kb-theme .mr-card__eyebrow { color: var(--kb-soft); }

body.kb-theme .mr-card__price {
    color: var(--kb-amber-ink);
    font-weight: 700;
}

body.kb-theme .mr-card__price del { color: var(--kb-soft); }

body.kb-theme .mr-card__badge {
    background: var(--kb-maroon);
    color: #fff;
    letter-spacing: 0.04em;
}

/* The wishlist heart's "saved" state — the base's default is the raw accent
   (var(--ll-accent)), which measures 2.25:1 on the white overlay circle and
   fails. Ink it with the text-safe amber instead (6.43:1). The eye
   (.mr-card__quickview) and the heart's default/hover states already read
   --bs-primary / --mr-ink+--mr-surface from the base fix — both safe here
   since primary is the dark maroon. */
body.kb-theme .mr-card__wish.is-active { color: var(--kb-amber-ink); }

/* --------------------------------------------------------------------------
   Featured ("Pantry Bestsellers") + new-arrivals ("New in the Pantry") —
   both are centered-heading grids on the cream canvas; no extra chrome
   needed beyond the shared typography above.
   -------------------------------------------------------------------------- */
body.kb-theme .kb-featured { background: transparent; }

/* --------------------------------------------------------------------------
   Origin story (kb-origin) — the deep-maroon "From the Source" band: glass
   panels over the maroon fill, a saffron pin (decorative — 4.94:1 on maroon,
   clears the 3:1 non-text minimum), white heading, translucent-white body.
   -------------------------------------------------------------------------- */
body.kb-theme .kb-origin {
    background: var(--kb-maroon);
    padding: clamp(4rem, 8vw, 6rem) 0;
}

body.kb-theme .kb-origin__heading {
    color: #fff;
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

body.kb-theme .kb-origin__card {
    height: 100%;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    text-align: center;
}

body.kb-theme .kb-origin__pin {
    display: inline-flex;
    color: var(--kb-amber);
    margin-bottom: 1rem;
}

body.kb-theme .kb-origin__pin svg { width: 28px; height: 28px; }

body.kb-theme .kb-origin__title { color: #fff; font-size: 1.15rem; margin-bottom: 0.5rem; }

body.kb-theme .kb-origin__text { color: rgba(255, 255, 255, 0.82); font-size: 0.92rem; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Categories ("Shop by Category") — inherited mr-tile photo tiles. The
   export shows plain icon chips instead of photography; we keep the base's
   real-category + representative-photo behaviour (scales to any merchant's
   categories) and simply warm its resting placeholder + caption.
   -------------------------------------------------------------------------- */
body.kb-theme .mr-tile__placeholder { background: linear-gradient(135deg, var(--kb-container), var(--kb-container-high)); }

body.kb-theme .mr-tile--cat .mr-tile__cap { font-weight: 600; }

/* --------------------------------------------------------------------------
   Journal (kb-journal) — left heading + saffron "View All Stories" link,
   Playfair article titles, per-article category eyebrow from the live post.
   -------------------------------------------------------------------------- */
body.kb-theme .mr-article__title a { color: var(--kb-maroon); }
body.kb-theme .mr-article__title a:hover { color: var(--kb-amber-ink); }

/* --------------------------------------------------------------------------
   Newsletter (kb-cta) — "The Weekly Steep": a calm centered card on the
   container-low surface, maroon-outline input + solid maroon button.
   -------------------------------------------------------------------------- */
body.kb-theme .kb-cta { padding: clamp(4rem, 8vw, 6rem) 0; }

body.kb-theme .kb-cta__inner {
    max-width: 640px;
    background: var(--kb-container-high);
    border: 1px solid var(--mr-border);
    border-radius: calc(var(--kb-radius) * 1.5);
    padding: clamp(2.5rem, 5vw, 3.5rem);
}

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

body.kb-theme .kb-cta__form {
    display: flex;
    gap: 1rem;
    max-width: 480px;
}

body.kb-theme .kb-cta__form input {
    flex: 1;
    min-width: 0;
    background: var(--kb-cream);
    border: 1px solid var(--mr-border);
    border-radius: var(--kb-radius);
    padding: 0.85rem 1.1rem;
    font-size: 0.95rem;
    color: var(--kb-ink);
    transition: border-color 0.2s ease;
}

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

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

body.kb-theme .kb-cta__btn {
    border: 0;
    background: var(--kb-maroon);
    color: #fff;
    border-radius: var(--kb-radius);
    padding: 0.85rem 2rem;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.2s ease;
}

body.kb-theme .kb-cta__btn:hover { filter: brightness(1.12); }

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

/* --------------------------------------------------------------------------
   Inherited chrome finishing — the maroon footer (the export's footer sits
   on the same primary-container maroon as the origin-story band).
   -------------------------------------------------------------------------- */
body.kb-theme .mr-footer {
    background-color: var(--kb-maroon);
    border-top: 0;
    color: rgba(255, 255, 255, 0.75);
}

body.kb-theme .mr-footer h4,
body.kb-theme .mr-footer__brand {
    color: #fff;
    font-family: var(--kb-font-head);
}

body.kb-theme .mr-footer a { color: rgba(255, 255, 255, 0.75); }
/* Maroon bg: --kb-amber-ink (#815600) is tuned for a LIGHT backdrop and
   would sink into this dark one, so brighten to white on hover instead —
   matches the inkwell/zaree pattern for a dark footer. */
body.kb-theme .mr-footer a:hover { color: #fff; }

body.kb-theme .mr-social {
    border-color: rgba(255, 255, 255, 0.25);
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
}

body.kb-theme .mr-social:hover {
    background-color: var(--kb-amber);
    border-color: var(--kb-amber);
    color: var(--kb-maroon);
}

body.kb-theme .mr-ulink { color: var(--kb-amber-ink); }
body.kb-theme .mr-ulink:hover { color: var(--kb-maroon); }

body.kb-theme .mr-divider { border-color: var(--mr-border); opacity: 1; }

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

/* --------------------------------------------------------------------------
   Reduced motion — the hero zoom, tile lifts and card scales are decorative.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.kb-theme .mr-btn,
    body.kb-theme .kb-hero__img,
    body.kb-theme .kb-cta__btn,
    body.kb-theme .mr-card__media img,
    body.kb-theme .mr-tile__img,
    body.kb-theme .mr-promo__img {
        transition: none;
    }

    body.kb-theme .kb-hero:hover .kb-hero__img { transform: none; }

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

/* --------------------------------------------------------------------------
   Mobile (from the export's mobile frames): the hero stacks photo-over-copy,
   the origin-story cards stack, the newsletter form stacks.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.kb-theme .kb-hero { grid-template-columns: 1fr; min-height: 0; }
    body.kb-theme .kb-hero__media { min-height: 320px; }
    body.kb-theme .kb-hero__panel { padding: 2.5rem 1.25rem 3rem; }
}

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