/* ==========================================================================
   Copper & Cast — warm chef's workshop for kitchen & cookware.

   Ported from the Stitch "Copper & Cast" design (the Warm Chef's Workshop
   design system lives at docs/templates/pending/
   stitch_26_copper_cast_e_commerce_design/…/copper_cast_brand_identity/
   DESIGN.md): a linen-cream canvas, cast-iron charcoal structure (announce
   bar, category band, footer), burnished-copper calls to action and labels,
   Playfair Display headlines over Inter body/UI/prices, a "barely-rounded"
   4px radius, and 1px warm hairlines instead of drop shadows ("Tactile
   Minimalism" — material honesty over digital artifice).

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

     (a) style the NEW `cc-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the linen-cream palette, sinking the
         announce bar / category band / footer into charcoal, and squaring
         the product card into the bordered gallery tile the export shows.

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

   CONTRAST (relative-luminance math, double-checked against the export):
     - primary copper #904812 (the export's rendered solid CTA — the
       DESIGN.md prose quotes #B4642D but the shipped Tailwind config and
       every button use `primary` #904812) is DARK — 6.44:1 on the cream
       canvas, 6.73:1 under white text — safe as text, icon, or a fill
       carrying white.
     - accent #af6029 (the export's button HOVER tone, `primary-container`)
       measures only 4.42:1 on cream — marginal for small TEXT, so every
       accent-as-text role the base ships (eyebrows, active nav, ulinks,
       sale badge) is re-pointed at the darker primary copper here; the raw
       accent is reserved for hover FILLS and decorative stars.
     - --mr-soft (small captions/breadcrumbs) cannot reuse the design's own
       "outline" token (#877368 ≈ 4.2:1 on cream, under the 4.5:1 minimum).
       --cc-soft (#6c5a4d) is a deliberately darkened value in the same
       warm-brown family: 6.25:1 on cream. Mirrors karak-bazaar's --kb-soft.
     - footer/announce/category band charcoal is the export's on-surface
       #1d1b16; cream text on it exceeds 15:1.
   ========================================================================== */

body.cc-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --cc-copper: var(--bs-primary, #904812);
    --cc-copper-rgb: var(--bs-primary-rgb, 144, 72, 18);
    /* 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 copper. */
    --bs-link-color-rgb: var(--cc-copper-rgb);
    --cc-copper-soft: var(--ll-accent, #af6029);
    --cc-radius: var(--bs-border-radius, 0.25rem);
    --cc-font-head: var(--ll-font-headings, "Playfair Display"), Georgia, serif;
    --cc-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Linen-cream workshop palette (DESIGN.md) */
    --cc-cream: #fff9ef;           /* surface-bright — page canvas + header  */
    --cc-container-low: #f9f3ea;   /* trust strip band                       */
    --cc-container: #f3ede4;       /* featured band (surface-container)      */
    --cc-container-high: #ede7df;  /* fills / media wells                    */
    --cc-container-highest: #e7e2d9; /* newsletter band                      */
    --cc-ink: #1d1b16;             /* on-surface — text + charcoal bands     */
    --cc-muted: #54433a;           /* on-surface-variant                     */
    --cc-soft: #6c5a4d;            /* darkened "outline" — see CONTRAST note */
    --cc-copper-dim: #ffb68a;      /* primary-fixed-dim — copper on charcoal */

    /* Depth — DESIGN.md avoids heavy shadows: low-contrast outlines and a
       whisper of tonal lift only. */
    --cc-shadow: 0 10px 24px -14px rgba(29, 27, 22, 0.18);

    /* Re-point the inherited base neutrals at the linen-cream palette so
       every inherited mr-* surface (bands, borders, fills, muted text)
       warms. Borders use the design's stated #E8E2D9 hairline; strong
       borders read the outline-variant tone. */
    --mr-ink: var(--cc-ink);
    --mr-muted: var(--cc-muted);
    --mr-soft: var(--cc-soft);
    --mr-surface: var(--cc-cream);
    --mr-band: var(--cc-container);
    --mr-band-alt: var(--cc-container-low);
    --mr-fill: var(--cc-container-high);
    --mr-border: #e8e2d9;
    --mr-border-strong: #dac2b5;
    --mr-radius: var(--cc-radius);
    --mr-gold: var(--cc-copper-soft);
    --mr-shadow: var(--cc-shadow);

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

/* --------------------------------------------------------------------------
   Shape discipline — the "barely-rounded" 4px 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.cc-theme .form-control,
body.cc-theme .form-select,
body.cc-theme .dropdown-menu,
body.cc-theme .offcanvas {
    border-radius: var(--cc-radius);
}

/* --------------------------------------------------------------------------
   Typography — Playfair authority (headline-md/sm are 600 weight; the hero
   display keeps the base's 700), stamped-metal-tag eyebrows in Inter 700
   with wide tracking, coloured the dark copper (the export's `text-primary`
   labels — the raw accent fails 4.5:1 on cream, see CONTRAST note).
   -------------------------------------------------------------------------- */
body.cc-theme h1, body.cc-theme h2, body.cc-theme h3,
body.cc-theme h4, body.cc-theme h5, body.cc-theme h6 {
    font-family: var(--cc-font-head);
    color: var(--cc-ink);
    font-weight: 600;
}

body.cc-theme .mr-display {
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* The section-header size between display and h4 (headline-md, 32px). */
body.cc-theme .cc-headline {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 600;
    line-height: 1.3;
}

body.cc-theme .cc-subheading {
    color: var(--cc-muted);
    font-size: 0.95rem;
}

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

/* --------------------------------------------------------------------------
   Buttons & links — solid burnished-copper primary (hover brightens toward
   the export's primary-container tone via the base's filter); a 1.5px
   charcoal ghost for the recipe CTA; tracked copper keyline links.
   -------------------------------------------------------------------------- */
body.cc-theme .mr-btn {
    border-radius: var(--cc-radius);
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* Hero secondary ("Explore Knives") — the export fills white on hover with
   CHARCOAL text, not the base's primary. */
body.cc-theme .mr-btn--on-dark:hover {
    color: var(--cc-ink);
}

/* Recipe-spotlight ghost CTA — 1.5px charcoal border, charcoal text; hover
   inverts to a solid charcoal fill (per the export). */
body.cc-theme .cc-btn-ghost {
    border: 1.5px solid var(--cc-ink);
    color: var(--cc-ink);
    background: transparent;
    padding: 1rem 2.5rem;
}

body.cc-theme .cc-btn-ghost:hover {
    background: var(--cc-ink);
    border-color: var(--cc-ink);
    color: #fff;
}

/* The tracked copper "View All Essentials" link. */
body.cc-theme .cc-view-link {
    color: var(--cc-copper);
    text-decoration: none;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.2s;
}

body.cc-theme .cc-view-link:hover { color: var(--cc-ink); }

/* Underline links (journal "Read More") — copper, hover charcoal. The base
   inks these with the raw accent (4.42:1 here — marginal), so re-point. */
body.cc-theme .mr-ulink { color: var(--cc-copper); border-color: var(--cc-copper); }
body.cc-theme .mr-ulink:hover { color: var(--cc-ink); border-color: var(--cc-ink); }

/* Inputs — cream fields, warm hairline; focus draws the copper border. */
body.cc-theme .form-control:focus,
body.cc-theme .form-select:focus {
    border-color: var(--cc-copper);
    box-shadow: 0 0 0 3px rgba(var(--cc-copper-rgb), 0.16);
}

/* --------------------------------------------------------------------------
   Announcement + header — the charcoal whisper band ("Forged in Gujranwala ·
   Cash on Delivery nationwide"), then the cream header under a warm
   hairline: Playfair charcoal wordmark, quiet Inter nav, copper active state
   (the export underlines the current section in primary).
   -------------------------------------------------------------------------- */
body.cc-theme .mr-announce {
    background-color: var(--cc-ink);
    color: var(--cc-cream);
    letter-spacing: 0.2em;
    font-size: 0.68rem;
}

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

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

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

/* Header icons — charcoal at rest, copper on hover (per the export). */
body.cc-theme .mr-icon-btn { color: var(--cc-ink); }
body.cc-theme .mr-icon-btn:hover { color: var(--cc-copper); }

/* --------------------------------------------------------------------------
   Hero (inherited mr-hero) — full-bleed searing-pan photograph under the
   base's dark gradient scrim; the eyebrow glows in the light copper the
   export uses over the photo (primary-fixed-dim — 8.9:1 on the scrimmed
   image edge).
   -------------------------------------------------------------------------- */
body.cc-theme .mr-hero .mr-hero__copy .mr-eyebrow {
    color: var(--cc-copper-dim);
    letter-spacing: 0.3em;
}

/* --------------------------------------------------------------------------
   Trust strip (inherited mr-trust, on the re-pointed --mr-band-alt) —
   copper icons beside single uppercase stamped-tag labels.
   -------------------------------------------------------------------------- */
body.cc-theme .mr-trust svg { color: var(--cc-copper); }

body.cc-theme .mr-trust strong {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--cc-muted);
}

/* --------------------------------------------------------------------------
   Promo tiles (cc-promo, base mr-promo chrome) — the Cast Iron / Copper
   Core / Forged Knives campaign tiles: serif title, a soft caption line,
   the underlined keyline link.
   -------------------------------------------------------------------------- */
body.cc-theme .mr-promo__title {
    font-weight: 600;
}

body.cc-theme .cc-promo__subtitle {
    display: block;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem;
    margin-bottom: 0.85rem;
}

/* --------------------------------------------------------------------------
   Featured ("Kitchen Essentials") — sits on the surface-container tone, one
   step deeper than the trust band.
   -------------------------------------------------------------------------- */
body.cc-theme .cc-featured { background: var(--cc-container); }

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — the export's gallery tile: SQUARE
   imagery in a cream well behind a 1px warm hairline (border on the MEDIA
   box only — title/price sit below it, so no card inset is needed), Inter
   titles at body weight, semi-bold "engineered" prices in charcoal, a
   solid-copper SALE stamp.
   -------------------------------------------------------------------------- */
body.cc-theme .mr-card__media {
    aspect-ratio: 1;
    background-color: var(--cc-cream);
    border: 1px solid var(--mr-border);
}

body.cc-theme .mr-card__title,
body.cc-theme .mr-card__title a {
    font-weight: 400;
}

body.cc-theme .mr-card__title a:hover { color: var(--cc-copper); }

body.cc-theme .mr-card__price {
    color: var(--cc-ink);
    font-weight: 600;
    letter-spacing: 0.02em;
}

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

/* The export stamps SALE in solid primary copper (white text: 6.73:1); the
   base's raw-accent fill is only 4.64:1 — use the primary. */
body.cc-theme .mr-card__sale {
    background-color: var(--cc-copper);
    letter-spacing: 0.1em;
    border-radius: 0.125rem;
}

/* --------------------------------------------------------------------------
   Recipe spotlight (cc-spotlight) — the split "One Pan, Sunday Karahi" story
   band: square karahi photograph with the copper corner stamp, copper
   eyebrow, Playfair display headline, checkmark claims, ghost CTA.
   -------------------------------------------------------------------------- */
body.cc-theme .cc-spotlight {
    padding-block: clamp(4rem, 8vw, 6rem);
    overflow: hidden;
}

body.cc-theme .cc-spotlight__media {
    position: relative;
    aspect-ratio: 1;
    margin-bottom: 1.5rem; /* room for the overhanging corner stamp */
    border-radius: var(--cc-radius);
}

body.cc-theme .cc-spotlight__media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--cc-radius);
}

body.cc-theme .cc-spotlight__placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--cc-container), var(--cc-container-high));
    border-radius: var(--cc-radius);
}

body.cc-theme .cc-spotlight__stamp {
    position: absolute;
    bottom: -1.5rem;
    right: -1.5rem;
    width: 8rem;
    height: 8rem;
    background: var(--cc-copper);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.4;
}

body.cc-theme .cc-spotlight__body {
    color: var(--cc-muted);
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 52ch;
}

body.cc-theme .cc-spotlight__claims li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

body.cc-theme .cc-spotlight__check {
    display: inline-flex;
    color: var(--cc-copper);
    flex-shrink: 0;
}

body.cc-theme .cc-spotlight__check svg { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   New in the Workshop (cc-arrivals) — divided from the spotlight above by a
   soft hairline, on the bare cream canvas.
   -------------------------------------------------------------------------- */
body.cc-theme .cc-arrivals { border-top: 1px solid var(--mr-border); }

/* --------------------------------------------------------------------------
   Categories (inherited mr-tile photo tiles) — the export's charcoal band of
   round chips. We keep the base's real-category + representative-photo
   behaviour (scales to any merchant's catalogue) and round the tiles into
   the export's circles on the charcoal field. `.mr-band` is used by the
   categories section alone on the home page, so the charcoal stays scoped.
   -------------------------------------------------------------------------- */
body.cc-theme .mr-section.mr-band { background: var(--cc-ink); }

body.cc-theme .mr-section.mr-band .mr-display { color: var(--cc-cream); }

body.cc-theme .mr-tile--cat {
    height: auto;
    aspect-ratio: 1;
    border-radius: 9999px;
}

body.cc-theme .mr-tile--cat .mr-tile__scrim { background: rgba(29, 27, 22, 0.42); }

body.cc-theme .mr-tile--cat .mr-tile__cap {
    font-family: var(--cc-font-body);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

body.cc-theme .mr-tile__placeholder {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
}

/* --------------------------------------------------------------------------
   Journal (inherited) — centered "THE JOURNAL / Workshop Wisdom" header;
   per-article category labels read muted (the export's CARE GUIDE /
   EDUCATION / TECHNIQUE tags are on-surface-variant, not copper).
   -------------------------------------------------------------------------- */
body.cc-theme article .mr-eyebrow { color: var(--cc-muted); }

body.cc-theme .mr-article__title a:hover { color: var(--cc-copper); }

/* --------------------------------------------------------------------------
   Newsletter (cc-cta) — "The Sunday Simmer": a calm centered band on the
   deepest cream tone; square-cornered cream input beside the solid copper
   Subscribe button, an uppercase whisper of small print beneath.
   -------------------------------------------------------------------------- */
body.cc-theme .cc-cta {
    background: var(--cc-container-highest);
    padding-block: clamp(4rem, 8vw, 6rem);
}

body.cc-theme .cc-cta__inner { max-width: 640px; }

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

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

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

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

body.cc-theme .cc-cta__form input:focus {
    outline: none;
    border-color: var(--cc-copper);
    box-shadow: 0 0 0 3px rgba(var(--cc-copper-rgb), 0.16);
}

body.cc-theme .cc-cta__btn {
    border: 0;
    background: var(--cc-copper);
    color: #fff;
    border-radius: var(--cc-radius);
    padding: 0.95rem 2.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.2s ease;
}

body.cc-theme .cc-cta__btn:hover { filter: brightness(1.18); }

body.cc-theme .cc-cta__note {
    color: var(--cc-soft);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Inherited chrome finishing — the cast-iron charcoal footer with light
   copper column headings (the export's primary-fixed-dim on charcoal).
   -------------------------------------------------------------------------- */
body.cc-theme .mr-footer {
    background-color: var(--cc-ink);
    border-top: 0;
    color: rgba(255, 249, 239, 0.75);
}

body.cc-theme .mr-footer h4 { color: var(--cc-copper-dim); letter-spacing: 0.12em; }

body.cc-theme .mr-footer__brand {
    color: #fff;
    font-family: var(--cc-font-head);
}

body.cc-theme .mr-footer a { color: rgba(255, 249, 239, 0.75); }
/* Charcoal bg: the dark copper primary would sink into it, so warm to the
   light copper on hover instead — matches the export's link hover. */
body.cc-theme .mr-footer a:hover { color: var(--cc-copper-dim); }

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

body.cc-theme .mr-social:hover {
    background-color: var(--cc-copper);
    border-color: var(--cc-copper);
    color: #fff;
}

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

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

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

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

/* --------------------------------------------------------------------------
   Mobile (from the export's mobile frames): the spotlight stacks
   photo-over-copy, the corner stamp shrinks inside the gutter, the
   newsletter form stacks.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    body.cc-theme .cc-spotlight__stamp {
        width: 6.5rem;
        height: 6.5rem;
        bottom: -1rem;
        right: 0;
        font-size: 0.62rem;
    }
}

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