/* ==========================================================================
   Qaleen — heritage gallery for hand-knotted rugs & carpets.

   Ported from the Stitch "Qaleen — Heritage Gallery" design (the Heritage
   Gallery Aesthetic design system lives at docs/templates/pending/
   stitch_49_qaleen_heritage_e_commerce_gallery/…/DESIGN.md): an undyed-wool
   paper canvas, madder-red (#8c3226) actions and a striking madder FOOTER,
   indigo-slate (#33465e) eyebrows/accents, Lora serif headlines over Inter UI,
   STRICTLY sharp corners and ZERO shadows — depth comes from tonal layers and
   1px charcoal keylines only.

   This theme OWNS the featured / weave-story ("The Craft") / new-arrivals /
   journal / newsletter home sections (ql-* markup) and INHERITS Modern
   Retail's functional pages plus the header / hero / trust / promo / brands /
   categories / footer partials and the product card. This stylesheet has two
   jobs:

     (a) style the NEW `ql-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the wool palette, flattening every radius and
         shadow, and recolouring the madder footer.

   Everything is scoped under `body.ql-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
   madder surface follows.
   ========================================================================== */

body.ql-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --ql-madder: var(--bs-primary, #8c3226);
    --ql-madder-rgb: var(--bs-primary-rgb, 140, 50, 38);
    --ql-slate: var(--ll-accent, #33465e);
    --ql-font-head: var(--ll-font-headings, "Lora"), Georgia, serif;
    --ql-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Heritage Gallery palette (DESIGN.md + rendered code.html) */
    --ql-wool: #f4efe6;        /* undyed-wool canvas */
    --ql-surface: #fbf8f1;     /* near-white lifted surface (cards/panels) */
    --ql-band: #efe8dc;        /* warm sand band (categories) */
    --ql-band-alt: #f1ebe0;    /* lighter sand band (featured/trust/arrivals) */
    --ql-craft-bg: #ece3d5;    /* parchment band for The Craft */
    --ql-fill: #e5dccc;
    --ql-ink: #1c1b1b;         /* charcoal */
    --ql-muted: #56423f;       /* warm brown (on-surface-variant) */
    --ql-soft: #89726e;        /* outline */
    --ql-line: #dcc0bc;        /* outline-variant keyline */
    --ql-madder-dark: #6d1b12; /* madder hover */

    /* Re-point the inherited base neutrals at the wool palette so every
       inherited mr-* surface (bands, borders, fills, muted text) follows. */
    --mr-ink: var(--ql-ink);
    --mr-muted: var(--ql-muted);
    --mr-soft: var(--ql-soft);
    --mr-surface: var(--ql-surface);
    --mr-band: var(--ql-band);
    --mr-band-alt: var(--ql-band-alt);
    --mr-fill: var(--ql-fill);
    --mr-border: var(--ql-line);
    --mr-border-strong: #c9ada8;
    --mr-radius: 0;
    --mr-gold: #a9803a;
    --mr-shadow: none;

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

/* --------------------------------------------------------------------------
   Shape discipline — strictly sharp corners and zero shadows. The customizer
   button_radius default is 0; hard-flatten everything else. The two round
   overlay controls (wishlist heart + quick-view eye) are EXEMPT — the base
   renders the heart as a <button> for signed-in shoppers and an <a> for
   guests, so a flatten that lists `button` would square it for logged-in users
   only. Keep both circular.
   -------------------------------------------------------------------------- */
body.ql-theme .mr-card,
body.ql-theme .mr-card__media,
body.ql-theme .mr-card__badge,
body.ql-theme .mr-card__quick,
body.ql-theme .mr-promo,
body.ql-theme .mr-promo__img,
body.ql-theme .mr-tile,
body.ql-theme .mr-tile__media,
body.ql-theme .mr-article__media,
body.ql-theme .mr-article__media img,
body.ql-theme .mr-cart-row__media,
body.ql-theme .mr-status,
body.ql-theme .mr-social,
body.ql-theme .mr-rail-btn,
body.ql-theme .form-control,
body.ql-theme .form-select,
body.ql-theme .mr-search input,
body.ql-theme .mr-btn,
body.ql-theme .dropdown-menu,
body.ql-theme .offcanvas {
    border-radius: 0 !important;
    box-shadow: none;
}

body.ql-theme .mr-card__wish,
body.ql-theme .mr-card__quickview {
    border-radius: 9999px !important;
}

/* --------------------------------------------------------------------------
   Typography — Lora serif authority, slate tracked eyebrows. Display headings
   at 600 (the shipped Lora face; there is no 500 face); smaller headings and
   product-card titles at 400.
   -------------------------------------------------------------------------- */
body.ql-theme h1,
body.ql-theme h2,
body.ql-theme .mr-display {
    font-family: var(--ql-font-head);
    color: var(--ql-ink);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

body.ql-theme h3,
body.ql-theme h4,
body.ql-theme h5,
body.ql-theme h6 {
    font-family: var(--ql-font-head);
    color: var(--ql-ink);
    font-weight: 400;
}

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

/* --------------------------------------------------------------------------
   Buttons — sharp, formal, uppercase-tracked. Madder primary; charcoal-keyline
   ghost secondary. Hover darkens toward the deep madder, never rounds or lifts.
   -------------------------------------------------------------------------- */
body.ql-theme .mr-btn {
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

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

body.ql-theme .mr-btn--primary:hover {
    filter: none;
    background: var(--ql-madder-dark);
    border-color: var(--ql-madder-dark);
    color: #fff;
}

body.ql-theme .mr-btn--outline,
body.ql-theme .ql-btn {
    border: 1px solid var(--ql-ink);
    color: var(--ql-ink);
    background: transparent;
}

body.ql-theme .mr-btn--outline:hover,
body.ql-theme .ql-btn:hover {
    background: var(--ql-ink);
    border-color: var(--ql-ink);
    color: var(--ql-wool);
}

/* Shared tracked keyline link (featured "View All Products", journal
   "Read More Stories"). */
body.ql-theme .ql-keyline-link {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ql-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ql-ink);
    padding-bottom: 0.3rem;
    display: inline-block;
}

body.ql-theme .ql-keyline-link:hover { color: var(--ql-madder); border-bottom-color: var(--ql-madder); }

/* Inputs — 1px keyline, sharp, wool-transparent. */
body.ql-theme .form-control,
body.ql-theme .form-select {
    background-color: var(--ql-surface);
    border-color: var(--ql-line);
    color: var(--ql-ink);
}

body.ql-theme .form-control:focus,
body.ql-theme .form-select:focus {
    border-color: var(--ql-madder);
    box-shadow: none;
}

/* Bootstrap reserves padding-right for the caret background-image; a shorthand
   would eat it and run the option text under the arrow. Give it back with a
   logical property (flips for RTL). */
body.ql-theme .form-select { padding-inline-end: 2.25rem; }

/* --------------------------------------------------------------------------
   Announcement + header — madder announce band, wool sticky header over the
   signature charcoal keyline, madder serif wordmark.
   -------------------------------------------------------------------------- */
body.ql-theme .mr-announce {
    background: var(--ql-madder);
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.16em;
    font-size: 0.72rem;
}

body.ql-theme .mr-header {
    background: var(--ql-wool);
    border-bottom: 1px solid var(--ql-ink);
}

body.ql-theme .mr-logo {
    font-family: var(--ql-font-head);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ql-madder);
}

body.ql-theme .mr-nav-link { color: var(--ql-muted); }
body.ql-theme .mr-nav-link:hover { color: var(--ql-madder); }
body.ql-theme .mr-nav-link.is-active {
    color: var(--ql-madder);
    font-weight: 600;
    border-bottom-color: var(--ql-madder);
}

body.ql-theme .mr-icon-btn { color: var(--ql-ink); }
body.ql-theme .mr-icon-btn:hover { color: var(--ql-madder); }
body.ql-theme .mr-badge { background-color: var(--ql-madder); }

body.ql-theme .mr-search input { background: var(--ql-surface); border-color: var(--ql-line); }
body.ql-theme .mr-search input:focus { background: var(--ql-surface); border-color: var(--ql-madder); box-shadow: none; }

/* --------------------------------------------------------------------------
   Inherited hero — full-bleed rug photograph. The Stitch export overlays a
   charcoal headline on a busy red rug with almost no scrim (barely legible);
   we deliberately DEVIATE — centre the copy and ship a strong, uniform dark
   scrim so the white headline stays readable over any merchant's own (busier)
   upload. Primary CTA is solid madder, secondary is a white ghost.
   -------------------------------------------------------------------------- */
body.ql-theme .mr-hero__overlay {
    background: linear-gradient(180deg, rgba(18, 12, 10, 0.5) 0%, rgba(18, 12, 10, 0.46) 48%, rgba(18, 12, 10, 0.66) 100%);
}

body.ql-theme .mr-hero__copy {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
}

body.ql-theme .mr-hero .mr-hero__copy .mr-eyebrow {
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.28em;
}

body.ql-theme .mr-hero__actions { justify-content: center; }

body.ql-theme .mr-btn--on-dark {
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 0;
    color: #fff;
}
body.ql-theme .mr-btn--on-dark:hover { background: #fff; color: var(--ql-ink); }

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — gallery-frame minimalism: keylined
   media, serif titles, slate category eyebrows, madder SALE chip.
   -------------------------------------------------------------------------- */
body.ql-theme .mr-card { background: transparent; }

body.ql-theme .mr-card__media {
    background: var(--ql-band-alt);
    border: 1px solid var(--ql-line);
    transition: border-color 0.3s ease;
}
body.ql-theme .mr-card:hover .mr-card__media { border-color: var(--ql-ink); }

body.ql-theme .mr-card__title,
body.ql-theme .mr-card__title a {
    font-family: var(--ql-font-head);
    font-weight: 400;
    color: var(--ql-ink);
}
body.ql-theme .mr-card__title a:hover { color: var(--ql-madder); }

body.ql-theme .mr-card__eyebrow {
    color: var(--ql-slate);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.66rem;
}

body.ql-theme .mr-card__price { color: var(--ql-ink); font-weight: 500; }

/* SALE / demo chip — the base blade uses .mr-card__badge, which app.css leaves
   unpositioned; place it top-left (matching the export) and ink it madder. */
body.ql-theme .mr-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    background: var(--ql-madder);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.28rem 0.6rem;
}

/* Round overlay controls (heart + quick-view eye) — restyled together, both
   states checked: solid wool circle + madder glyph (~6.9:1), hover deepens. */
body.ql-theme .mr-card__wish,
body.ql-theme .mr-card__quickview {
    background: rgba(252, 249, 244, 0.92);
    color: var(--ql-madder);
}
body.ql-theme .mr-card__wish:hover,
body.ql-theme .mr-card__quickview:hover {
    background: #fff;
    color: var(--ql-madder-dark);
}
body.ql-theme .mr-card__wish.is-active { color: var(--ql-madder); }

body.ql-theme .mr-card__quick {
    background: var(--ql-madder);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.72rem;
}

/* --------------------------------------------------------------------------
   Inherited promo tiles — the export's collection tiles: full-bleed image, a
   solid wool caption chip bottom-left (no scrim wash), sharp charcoal keyline
   on hover.
   -------------------------------------------------------------------------- */
body.ql-theme .mr-promo { border: 1px solid transparent; transition: border-color 0.3s ease; }
body.ql-theme .mr-promo:hover { border-color: var(--ql-ink); }
body.ql-theme .mr-promo__scrim { background: none; }
body.ql-theme .mr-promo:hover .mr-promo__scrim { background: none; }
body.ql-theme .mr-promo__cap {
    left: 1.5rem;
    right: auto;
    bottom: 1.5rem;
    max-width: calc(100% - 3rem);
    background: var(--ql-wool);
    border: 1px solid var(--ql-ink);
    padding: 0.7rem 1.4rem;
}
body.ql-theme .mr-promo__title {
    color: var(--ql-ink);
    font-family: var(--ql-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0;
}
body.ql-theme .mr-promo__cta {
    color: var(--ql-madder);
    border-bottom: 1px solid var(--ql-madder);
    margin-top: 0.5rem;
    display: inline-block;
}
body.ql-theme .mr-promo:hover .mr-promo__cta { color: var(--ql-madder-dark); border-color: var(--ql-madder-dark); }

/* --------------------------------------------------------------------------
   Inherited category tiles — sharp keylined squares with a bordered wool
   label chip, matching the export.
   -------------------------------------------------------------------------- */
body.ql-theme .mr-tile--cat { border: 1px solid var(--ql-ink); }
body.ql-theme .mr-tile--cat .mr-tile__scrim { background: rgba(28, 27, 27, 0.4); }
body.ql-theme .mr-tile--cat:hover .mr-tile__scrim { background: rgba(28, 27, 27, 0.5); }
body.ql-theme .mr-tile--cat .mr-tile__cap {
    font-family: var(--ql-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: 1px solid rgba(244, 239, 230, 0.85);
    padding: 0.55rem 1.5rem;
}

/* --------------------------------------------------------------------------
   Featured / new-arrivals — quiet gallery grids on the wool system.
   -------------------------------------------------------------------------- */
body.ql-theme .ql-arrivals .ql-rule {
    display: inline-block;
    width: 48px;
    height: 2px;
    background: var(--ql-madder);
}

/* --------------------------------------------------------------------------
   The Craft band (ql-craft, weave-story) — a split editorial band: a keylined
   macro rug-pile photograph beside the craft story and stamped hallmarks on a
   parchment surface.
   -------------------------------------------------------------------------- */
body.ql-theme .ql-craft {
    background: var(--ql-craft-bg);
    padding: clamp(4rem, 8vw, 7.5rem) 0;
    overflow: hidden;
}

body.ql-theme .ql-craft__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 6rem);
    align-items: center;
}

body.ql-theme .ql-craft__media { border: 1px solid var(--ql-ink); }
body.ql-theme .ql-craft__media img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
body.ql-theme .ql-craft__placeholder {
    display: block;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, var(--ql-band), var(--ql-fill));
}

body.ql-theme .ql-craft__heading { margin-bottom: 1.25rem; }
body.ql-theme .ql-craft__body {
    color: var(--ql-muted);
    max-width: 46ch;
    line-height: 1.75;
    margin-bottom: 1.75rem;
    font-size: 1.05rem;
}

body.ql-theme .ql-craft__marks {
    list-style: none;
    margin: 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--ql-soft);
    display: grid;
    gap: 1rem;
}
body.ql-theme .ql-craft__mark { display: flex; align-items: center; gap: 1rem; }
body.ql-theme .ql-craft__dot { width: 8px; height: 8px; background: var(--ql-madder); flex-shrink: 0; }
body.ql-theme .ql-craft__mark-text {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ql-ink);
}

/* --------------------------------------------------------------------------
   Journal — story cards with slate eyebrows and madder title hover.
   -------------------------------------------------------------------------- */
body.ql-theme .ql-journal { background: #ece5d9; }
body.ql-theme .ql-journal .mr-article__title a:hover { color: var(--ql-madder); }

/* --------------------------------------------------------------------------
   Newsletter — the centered "Underfoot" band with the italic serif heading and
   the underline email input + madder SUBSCRIBE button.
   -------------------------------------------------------------------------- */
body.ql-theme .ql-cta {
    background: var(--ql-wool);
    padding: clamp(4rem, 8vw, 6.5rem) 0;
}

body.ql-theme .ql-cta__title { color: var(--ql-ink); font-style: italic; }

body.ql-theme .ql-cta__body {
    color: var(--ql-muted);
    max-width: 48ch;
    line-height: 1.7;
}

body.ql-theme .ql-cta__form {
    display: flex;
    gap: 0;
    max-width: 480px;
    border-bottom: 1px solid var(--ql-ink);
}

body.ql-theme .ql-cta__form input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--ql-ink);
    padding: 0.9rem 0;
    font-size: 0.95rem;
}
body.ql-theme .ql-cta__form input::placeholder { color: var(--ql-soft); }
body.ql-theme .ql-cta__form input:focus { outline: none; }

body.ql-theme .ql-cta__btn {
    border: none;
    background: var(--ql-madder);
    color: #fff;
    padding: 0.9rem 2rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
}
body.ql-theme .ql-cta__btn:hover { background: var(--ql-madder-dark); }
body.ql-theme .ql-cta__note { color: var(--ql-soft); font-size: 0.75rem; letter-spacing: 0.06em; }

/* --------------------------------------------------------------------------
   Inherited chrome — the striking MADDER footer. Every text/border/control
   role that rides on it is re-inked to undyed wool; the inherited primary
   "Join" button is inverted (a madder fill on a madder band is invisible) and
   focus rings are re-drawn (slate accent is ~1.2:1 on madder).
   -------------------------------------------------------------------------- */
body.ql-theme .mr-footer {
    background: var(--ql-madder);
    border-top: none;
    color: var(--ql-wool);
}
body.ql-theme .mr-footer h4 {
    font-family: var(--ql-font-body);
    color: #fff;
}
body.ql-theme .mr-footer__brand {
    font-family: var(--ql-font-head);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
}
body.ql-theme .mr-footer a { color: rgba(244, 239, 230, 0.82); }
body.ql-theme .mr-footer a:hover { color: #fff; }
body.ql-theme .mr-footer .mr-muted { color: rgba(244, 239, 230, 0.78); }
body.ql-theme .mr-footer .mr-soft { color: rgba(244, 239, 230, 0.62); }
body.ql-theme .mr-footer .mr-divider { border-color: rgba(244, 239, 230, 0.25); opacity: 1; }

body.ql-theme .mr-footer .form-control {
    background: rgba(244, 239, 230, 0.1);
    border-color: rgba(244, 239, 230, 0.35);
    color: #fff;
}
body.ql-theme .mr-footer .form-control::placeholder { color: rgba(244, 239, 230, 0.6); }

body.ql-theme .mr-footer .mr-social {
    background: rgba(244, 239, 230, 0.12);
    border-color: rgba(244, 239, 230, 0.3);
    color: var(--ql-wool);
}
body.ql-theme .mr-footer .mr-social:hover {
    background: var(--ql-wool);
    border-color: var(--ql-wool);
    color: var(--ql-madder);
}

body.ql-theme .mr-footer .mr-btn--primary {
    background: var(--ql-wool);
    border-color: var(--ql-wool);
    color: var(--ql-madder);
}
body.ql-theme .mr-footer .mr-btn--primary:hover {
    filter: none;
    background: #fff;
    border-color: #fff;
    color: var(--ql-madder-dark);
}

body.ql-theme .mr-footer *:focus-visible {
    outline: 2px solid var(--ql-wool);
    outline-offset: 2px;
}

/* Inherited misc — social (light pages), rail buttons, ulinks, dividers. */
body.ql-theme .mr-social { background: var(--ql-band-alt); border-color: var(--ql-line); color: var(--ql-ink); }
body.ql-theme .mr-social:hover { background: var(--ql-madder); border-color: var(--ql-madder); color: #fff; }
body.ql-theme .mr-rail-btn:hover { background: var(--ql-madder); border-color: var(--ql-madder); color: #fff; }
body.ql-theme .mr-ulink:hover { color: var(--ql-madder); border-color: var(--ql-madder); }
body.ql-theme .mr-article__title a:hover { color: var(--ql-madder); }
body.ql-theme .mr-divider { border-color: var(--ql-line); opacity: 1; }

/* --------------------------------------------------------------------------
   Respect reduced-motion — transitions/reveals here are decorative.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.ql-theme .mr-btn,
    body.ql-theme .mr-promo,
    body.ql-theme .mr-card__media,
    body.ql-theme .mr-reveal {
        transition: none;
    }
    body.ql-theme .mr-reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Mobile (from the Stitch mobile frames): 20px margins, the split Craft band
   stacks to a single column.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.ql-theme .ql-craft__grid { grid-template-columns: 1fr; }
    body.ql-theme .mr-hero__copy { text-align: center; }
}