/* ==========================================================================
   Gilt & Glass — "Affordable Sparkle" editorial luxury for fashion jewelry.

   Ported from the Stitch "Gilt & Glass" design (docs/templates/pending/
   stitch_48_gilt_glass_e_commerce_store/…/gilt_glass/DESIGN.md): a warm "Pearl"
   canvas, a deep "Noir" for structure / typography / high-emphasis buttons,
   thin "Soft Gold" keylines used only as delicate jewelry-like lines, Playfair
   Display headlines over Inter body / UI / pricing, a consistent 8px (0.5rem)
   radius, and soft ambient diffusion instead of grey shadows.

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

     (a) style the NEW `gg-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the base
         neutral tokens at the pearl palette, dressing the announce bar and
         footer in noir, laying the promo tiles out as the template's bento
         (progressive :has() enhancement), and inking the product-card price in
         readable bronze.

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

   CONTRAST (sRGB relative-luminance arithmetic, checked at authoring time):
     - primary noir #26221d is DARK — ~15:1 on the pearl canvas and ~16:1 under
       white text — safe everywhere it is used as text, an icon or a fill
       carrying white text.
     - accent soft-gold #cfa14e is LIGHT — only ~2.27:1 on pearl, which FAILS
       WCAG for ANY text/icon role on the canvas. It is therefore reserved for
       DECORATIVE keylines, borders and small fills only (per DESIGN.md "It
       should never be used for large surfaces, only for structural lines and
       delicate highlights"). On the NOIR footer it clears ~6.66:1, so gold
       links/hovers/focus rings are used there.
     - every gold TEXT / icon role on the canvas (the "Crowd Favorites" /
       "Beyond the Sparkle" eyebrows the export sets in soft-gold, the trust
       icons, product prices, the saved-wishlist heart) is routed to
       --gg-gold-ink #7c5805 — the design system's own "secondary" token, ~6.1:1
       on pearl. Mirrors sugar-saffron's --ss-gold-ink pattern.
     - --gg-soft (small captions / breadcrumbs) uses the design's own "Neutral"
       taupe #706b63 (~9.8:1 on pearl) and --gg-muted the "on-surface-variant"
       #4c463f (~12:1) — both safe for normal text.
   ========================================================================== */

body.gg-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --gg-noir: var(--bs-primary, #26221d);
    --gg-noir-rgb: var(--bs-primary-rgb, 38, 34, 29);
    --gg-gold: var(--ll-accent, #cfa14e);
    /* AA-safe TEXT/icon variant of the gold — see the CONTRAST note above. */
    --gg-gold-ink: #7c5805;
    --gg-radius: var(--bs-border-radius, 0.5rem);
    --gg-font-head: var(--ll-font-headings, "Playfair Display"), Georgia, serif;
    --gg-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* 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 readable noir ink (never the light
       gold, which fails on the pearl canvas). */
    --bs-link-color-rgb: 30, 27, 21;

    /* Warm pearl palette (DESIGN.md surface tokens) */
    --gg-pearl: #fff8f1;          /* page canvas + header (surface)            */
    --gg-container-low: #faf2e8;  /* hero panel / featured band / note card    */
    --gg-container: #f5ede3;      /* bands / occasion placeholder              */
    --gg-container-high: #efe7dd; /* fills / media wells                       */
    --gg-white: #ffffff;          /* card media wells (products on white)      */
    --gg-ink: #1e1b15;            /* on-surface                                */
    --gg-muted: #4c463f;          /* on-surface-variant                        */
    --gg-soft: #706b63;           /* design "Neutral" taupe — see CONTRAST     */

    /* Shape + depth — a consistent 8px radius (DESIGN.md "Shapes"), soft
       highly-diffused noir ambient shadow instead of grey (DESIGN.md
       "Elevation & Depth" — 15% Noir, 30px blur, no offset). */
    --gg-shadow: 0 0 30px rgba(var(--gg-noir-rgb), 0.15);

    /* Re-point the inherited base neutrals at the pearl palette so every
       inherited mr-* surface (bands, borders, fills, muted text) warms.
       Borders read a soft-gold hairline via color-mix (DESIGN.md keylines),
       with a literal fallback for browsers without color-mix. */
    --mr-ink: var(--gg-ink);
    --mr-muted: var(--gg-muted);
    --mr-soft: var(--gg-soft);
    --mr-surface: var(--gg-pearl);
    --mr-band: var(--gg-container);
    --mr-band-alt: var(--gg-container-low);
    --mr-fill: var(--gg-container-high);
    --mr-border: #ecdfca;
    --mr-border: color-mix(in srgb, var(--gg-gold) 30%, var(--gg-pearl));
    --mr-border-strong: #ddc593;
    --mr-border-strong: color-mix(in srgb, var(--gg-gold) 55%, var(--gg-pearl));
    --mr-radius: var(--gg-radius);
    --mr-gold: var(--gg-gold-ink);
    --mr-shadow: var(--gg-shadow);

    background-color: var(--gg-pearl);
    color: var(--gg-ink);
    font-family: var(--gg-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, re-asserted below).
   -------------------------------------------------------------------------- */
body.gg-theme .form-control,
body.gg-theme .form-select,
body.gg-theme .dropdown-menu,
body.gg-theme .offcanvas,
body.gg-theme .mr-promo,
body.gg-theme .mr-promo__img,
body.gg-theme .gg-hero__media {
    border-radius: var(--gg-radius);
}

/* --------------------------------------------------------------------------
   Typography — Playfair Display headlines in the noir ink; the export keeps
   the italic wordmark and hero on the same face. Tracked bronze eyebrows,
   tracked Inter prices.
   -------------------------------------------------------------------------- */
body.gg-theme h1, body.gg-theme h2, body.gg-theme h3,
body.gg-theme h4, body.gg-theme h5, body.gg-theme h6 {
    font-family: var(--gg-font-head);
    color: var(--gg-ink);
    font-weight: 700;
    letter-spacing: -0.01em;
}

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

/* The 64px gold hairline the export centres under section headings. */
body.gg-theme .gg-rule {
    display: block;
    width: 64px;
    height: 1px;
    margin: 1rem auto 0;
    background: var(--gg-gold);
}

/* --------------------------------------------------------------------------
   Buttons — solid noir primary with pearl text (DESIGN.md "Primary: Noir
   background with Pearl text"); a transparent gold-keyline secondary with noir
   text (DESIGN.md "Secondary: Transparent background with a 1px Soft Gold
   keyline, Noir text").
   -------------------------------------------------------------------------- */
body.gg-theme .mr-btn {
    border-radius: var(--gg-radius);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.78rem;
    transition: filter 0.25s ease, background-color 0.25s ease, color 0.25s ease, transform 0.1s ease;
}

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

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

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

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

/* The base --outline hover fills with primary + white — keep, but ensure the
   idle keyline reads as noir on the pearl canvas. */
body.gg-theme .mr-btn--outline { color: var(--gg-ink); border-color: var(--gg-ink); }
body.gg-theme .mr-btn--outline:hover { background-color: var(--gg-noir); border-color: var(--gg-noir); color: #fff; }

/* The base --light button hovers into the raw accent (white-on-gold ~2.3:1 —
   fails); deepen into the noir instead. */
body.gg-theme .mr-btn--light:hover {
    background-color: var(--gg-noir);
    color: #fff;
}

/* The tracked keyline link — the export's "View All" affordance (noir text
   over a noir underline, hover to bronze). */
body.gg-theme .gg-view-link {
    color: var(--gg-ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--gg-ink);
    transition: color 0.2s ease, border-color 0.2s ease;
}

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

/* The base underline-link hover reaches for the raw accent — route to bronze. */
body.gg-theme .mr-ulink:hover { color: var(--gg-gold-ink); border-color: var(--gg-gold-ink); }

/* --------------------------------------------------------------------------
   Inputs — pearl field under a soft-gold hairline; focus draws the full gold
   border with a faint gold ring (DESIGN.md "Focus states highlight the border
   in Gold"). Never a padding shorthand on .form-select.
   -------------------------------------------------------------------------- */
body.gg-theme .form-control,
body.gg-theme .form-select {
    background-color: var(--gg-pearl);
    border-color: var(--mr-border-strong);
    color: var(--gg-ink);
}

body.gg-theme .form-select {
    padding-inline-end: 2.25rem;
}

body.gg-theme .form-control:focus,
body.gg-theme .form-select:focus {
    border-color: var(--gg-gold);
    box-shadow: 0 0 0 3px rgba(207, 161, 78, 0.25);
}

/* --------------------------------------------------------------------------
   Announcement + header — the noir whisper band, then the pearl header under a
   gold hairline: italic Playfair wordmark, quiet Inter nav.
   -------------------------------------------------------------------------- */
body.gg-theme .mr-announce {
    background-color: var(--gg-noir);
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.18em;
    font-size: 0.68rem;
    text-transform: uppercase;
}

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

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

body.gg-theme .mr-nav-link {
    font-family: var(--gg-font-body);
    color: var(--gg-muted);
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

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

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

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

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

body.gg-theme .mr-icon-btn { color: var(--gg-ink); }
body.gg-theme .mr-icon-btn:hover { color: var(--gg-gold-ink); }

/* --------------------------------------------------------------------------
   Hero (gg-hero) — the split statement: model photograph edge-to-edge on the
   left, copy on the pearl container-low panel to the right (noir Playfair
   headline). Stacks image-over-copy on mobile (per the export's mobile frame).
   -------------------------------------------------------------------------- */
body.gg-theme .gg-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 620px;
}

body.gg-theme .gg-hero__media {
    position: relative;
    overflow: hidden;
    background: var(--gg-container-high);
    border-radius: 0;
}

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

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

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

body.gg-theme .gg-hero__title {
    color: var(--gg-ink);
    font-size: clamp(2.25rem, 4.5vw, 3rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

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

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

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

/* --------------------------------------------------------------------------
   Trust strip (inherited mr-trust) — the export's soft-gold icons; the raw
   gold fails even the lenient 3:1 icon threshold on pearl, so icons ink with
   --gg-gold-ink instead (~6.1:1). Labels are single tracked caps lines in the
   noir ink (the demo puts each item's copy in the title; the base span
   collapses when text is blank).
   -------------------------------------------------------------------------- */
body.gg-theme .mr-trust svg { color: var(--gg-gold-ink); }

body.gg-theme .mr-trust strong {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gg-ink);
}

/* --------------------------------------------------------------------------
   Occasions (gg-occasions) — the gg-only "Shop by Occasion" band: four
   photographic 4:5 tiles inside soft-gold 1px keylines on the pearl canvas,
   each a tracked uppercase name under the photo (hover to bronze).
   -------------------------------------------------------------------------- */
body.gg-theme .gg-occasion {
    display: block;
    text-decoration: none;
    text-align: center;
}

body.gg-theme .gg-occasion__media {
    display: block;
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--gg-gold);
    border-radius: var(--gg-radius);
    background: var(--gg-container);
}

body.gg-theme .gg-occasion__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

body.gg-theme .gg-occasion:hover .gg-occasion__img { transform: scale(1.08); }

body.gg-theme .gg-occasion__placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--gg-container), var(--gg-container-high));
}

body.gg-theme .gg-occasion__title {
    display: block;
    margin-top: 1rem;
    font-family: var(--gg-font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gg-ink);
    transition: color 0.2s ease;
}

body.gg-theme .gg-occasion:hover .gg-occasion__title { color: var(--gg-gold-ink); }

body.gg-theme .gg-occasion__label {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: var(--gg-soft);
}

/* --------------------------------------------------------------------------
   Promo tiles (inherited mr-promo) — the export lays the three tiles out as an
   asymmetric bento: the Layered Necklaces tile spans the left two-thirds full
   height, Statement Earrings + Ring Stacks stack on the right. Applied as a
   progressive :has() enhancement on the promo row only — browsers without
   :has() (and mobile) keep the base's equal 4:5 tiles. Each tile carries a
   soft-gold keyline (DESIGN.md); the base dark-scrim caption already pairs
   white text with the photo, and the hover caption re-inks to the gold keyline
   ON the dark scrim (safe on dark) — overriding the base's accent hover.
   -------------------------------------------------------------------------- */
body.gg-theme .mr-promo { border: 1px solid var(--gg-gold); }

@media (min-width: 768px) {
    body.gg-theme .row:has(> .col > .mr-promo) {
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-auto-rows: 288px;
        gap: 1.5rem;
        margin: 0;
    }

    body.gg-theme .row:has(> .col > .mr-promo) > .col {
        padding: 0;
        width: auto;
        max-width: none;
    }

    body.gg-theme .row:has(> .col > .mr-promo) > .col:first-child { grid-row: span 2; }

    body.gg-theme .row:has(> .col > .mr-promo) .mr-promo {
        height: 100%;
        aspect-ratio: auto;
    }
}

body.gg-theme .mr-promo__title { font-weight: 700; }

body.gg-theme .mr-promo__cta { letter-spacing: 0.16em; }

body.gg-theme .mr-promo:hover .mr-promo__cta {
    color: var(--gg-gold);
    border-color: var(--gg-gold);
}

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — white media wells (the export sits its
   product photography on pure white), bronze tracked prices (DESIGN.md: all
   pricing in the sans face; the export tints prices soft-gold, but that fails
   on white — the readable bronze keeps the identity).
   -------------------------------------------------------------------------- */
body.gg-theme .mr-card__media { background-color: var(--gg-white); }

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

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

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

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

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

/* The saved-wishlist heart's active state — the base default is the raw accent
   (light gold on the white overlay circle, ~2.3:1). Ink it with the readable
   bronze (~6.1:1). The heart's default/hover + the eye already read
   --bs-primary / --mr-ink + --mr-surface from the base — all safe here since
   primary is the dark noir. */
body.gg-theme .mr-card__wish.is-active { color: var(--gg-gold-ink); }

/* --------------------------------------------------------------------------
   Categories (inherited mr-tile--cat) — kept token-driven for any merchant who
   enables the band (the demo disables it — the export has no separate
   categories row; the occasions band does that job).
   -------------------------------------------------------------------------- */
body.gg-theme .mr-tile__placeholder {
    background: linear-gradient(135deg, var(--gg-container), var(--gg-container-high));
}

/* --------------------------------------------------------------------------
   Journal (gg-journal) — centered Playfair heading, bronze category eyebrows,
   16:9 gold-keyline covers, Playfair titles (hover to bronze).
   -------------------------------------------------------------------------- */
body.gg-theme .gg-article__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--gg-gold);
    border-radius: var(--gg-radius);
    background: var(--gg-container);
}

body.gg-theme .gg-article__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

body.gg-theme .gg-article:hover .gg-article__media img { transform: scale(1.05); }

body.gg-theme .gg-article__title {
    font-family: var(--gg-font-head);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

body.gg-theme .gg-article__title a {
    color: var(--gg-ink);
    text-decoration: none;
    transition: color 0.2s ease;
}

body.gg-theme .gg-article__title a:hover { color: var(--gg-gold-ink); }

/* --------------------------------------------------------------------------
   Newsletter (gg-note) — "The Sparkle Note": a centered gold-keyline card
   floating on the pearl canvas (NOT a dark band), a Playfair heading, calm
   body, and a welded pill: transparent email input beside the noir Subscribe
   button.
   -------------------------------------------------------------------------- */
body.gg-theme .gg-note {
    max-width: 56rem;
    border: 1px solid var(--gg-gold);
    border-radius: var(--gg-radius);
    background: var(--gg-container-low);
    padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem);
}

body.gg-theme .gg-note__title {
    color: var(--gg-ink);
    font-size: clamp(2rem, 4vw, 2.6rem);
}

body.gg-theme .gg-note__body {
    color: var(--gg-muted);
    font-size: 1.05rem;
    max-width: 46ch;
}

body.gg-theme .gg-note__form {
    display: flex;
    max-width: 460px;
    border: 1px solid var(--gg-gold);
    border-radius: var(--gg-radius);
    overflow: hidden;
    background: var(--gg-pearl);
}

body.gg-theme .gg-note__form input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    padding: 0.9rem 1.4rem;
    font-size: 0.95rem;
    color: var(--gg-ink);
}

body.gg-theme .gg-note__form input:focus { outline: none; }
body.gg-theme .gg-note__form input::placeholder { color: var(--gg-soft); }

body.gg-theme .gg-note__btn {
    border: 0;
    background: var(--gg-noir);
    color: #fff;
    padding: 0.9rem 2rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.25s ease;
}

body.gg-theme .gg-note__btn:hover { filter: brightness(1.35); }

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

/* --------------------------------------------------------------------------
   Inherited chrome finishing — the NOIR footer (the export's footer sits on
   the deep noir; the shared token keeps it customizer-driven). Gold clears
   ~6.66:1 on this dark band, so links/hovers/social use the raw gold here.
   The inherited newsletter "Join" button is .mr-btn--primary — a noir fill on
   this noir band would be an invisible block, so it inverts to a gold fill
   carrying noir text.
   -------------------------------------------------------------------------- */
body.gg-theme .mr-footer {
    background-color: var(--gg-noir);
    background-color: color-mix(in srgb, var(--gg-noir) 90%, #000);
    border-top: 0;
    color: rgba(255, 255, 255, 0.7);
}

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

body.gg-theme .mr-footer__brand { font-style: italic; }

body.gg-theme .mr-footer a { color: rgba(255, 255, 255, 0.7); }
body.gg-theme .mr-footer a:hover { color: var(--gg-gold); }

body.gg-theme .mr-footer .mr-muted,
body.gg-theme .mr-footer .mr-soft { color: rgba(255, 255, 255, 0.55) !important; }

/* Invert the inherited primary CTA on the dark band (ink-on-ink otherwise). */
body.gg-theme .mr-footer .mr-btn--primary {
    background-color: var(--gg-gold);
    border-color: var(--gg-gold);
    color: var(--gg-ink);
}

body.gg-theme .mr-footer .mr-btn--primary:hover { filter: brightness(1.08); color: var(--gg-ink); }

body.gg-theme .mr-footer .form-control {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

body.gg-theme .mr-footer .form-control::placeholder { color: rgba(255, 255, 255, 0.5); }

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

body.gg-theme .mr-social:hover {
    background-color: var(--gg-gold);
    border-color: var(--gg-gold);
    color: var(--gg-ink);
}

body.gg-theme .mr-footer .mr-divider { border-color: rgba(255, 255, 255, 0.12); opacity: 1; }

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

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

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

    body.gg-theme .gg-hero:hover .gg-hero__img,
    body.gg-theme .gg-occasion:hover .gg-occasion__img,
    body.gg-theme .gg-article:hover .gg-article__media img { transform: none; }

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

/* --------------------------------------------------------------------------
   Mobile (from the export's mobile frames): the hero stacks photo-over-copy,
   the occasion tiles run two-up (the row-cols grid already does), the
   newsletter form stacks.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.gg-theme .gg-hero { grid-template-columns: 1fr; min-height: 0; }
    body.gg-theme .gg-hero__media { min-height: 340px; }
    body.gg-theme .gg-hero__panel { padding: 2.5rem 1.25rem 3rem; }
}

@media (max-width: 575.98px) {
    body.gg-theme .gg-note__form { flex-direction: column; }
    body.gg-theme .gg-note__btn { width: 100%; }
}