/* ==========================================================================
   Sugar & Saffron — festive artisanal luxury for mithai & dessert gifting.

   Ported from the Stitch "Sugar & Saffron" design (the artisanal mithai
   house design system lives at docs/templates/pending/
   stitch_30_sugar_saffron_e_commerce_homepage/…/sugar_saffron/DESIGN.md):
   a rose-cream canvas, deep rose-maroon structure and calls to action, a
   pistachio-green accent for eyebrows/organic labels, thin gold keylines
   evoking gold-leaf packaging foil, Playfair Display headlines over Source
   Sans 3 body/UI (prices tracked +0.05em), a consistent 8px radius, and
   soft rose-tinted diffusion instead of grey shadows.

   This theme OWNS the hero / occasions / featured / new-arrivals / journal /
   newsletter home sections (ss-* 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 `ss-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the rose-cream palette, dressing the
         announce bar / newsletter / footer in maroon, laying the promo
         tiles out as the template's bento (progressive :has() enhancement),
         and inking the product-card price in maroon.

   Everything is scoped under `body.ss-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 (sRGB relative-luminance arithmetic, checked at authoring time):
     - primary rose-maroon #9c2b3f is DARK — 7.1:1 on the cream canvas and
       7.4:1 under white text — safe everywhere it is used as text, an icon
       or a fill carrying white text.
     - accent pistachio #7a9b57 is LIGHT — 3.0:1 on cream, which FAILS WCAG
       AA for the small tracked eyebrows/labels that are this theme's
       signature, and white-on-pistachio is only 3.15:1 (fails for the SALE
       badge's small caps). A darker "-ink" sibling, --ss-pistachio-ink
       (#496729 — the design system's own "secondary" token, not an invented
       value; 6.2:1 on cream, 6.5:1 under white) covers every green TEXT /
       icon / small-fill role. Mirrors karak-bazaar's --kb-amber-ink pattern.
     - gold #d4af37 is reserved for DECORATIVE keylines and borders only
       (per DESIGN.md "Tertiary: Gold — reserved for keylines"). Gold
       text/icon roles (trust-strip icons, star ratings) use --ss-gold-ink
       (#735c00 — the design system's own "tertiary" token; 6.2:1 on cream).
     - --mr-soft (small captions/eyebrows/breadcrumbs) cannot reuse the
       design's own "outline" token (#8a7172): that measures ~3.9:1 on
       cream, under the 4.5:1 normal-text minimum. --ss-soft (#6f5a5c) is a
       deliberately darkened value in the same warm rose-brown family that
       clears 6.1:1 on cream.
   ========================================================================== */

body.ss-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --ss-maroon: var(--bs-primary, #9c2b3f);
    --ss-maroon-rgb: var(--bs-primary-rgb, 156, 43, 63);
    /* 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(--ss-maroon-rgb);
    --ss-pistachio: var(--ll-accent, #7a9b57);
    /* AA-safe TEXT/icon variant of the accent — see the CONTRAST note above. */
    --ss-pistachio-ink: #496729;
    /* Gold keyline (decorative borders only) + its AA-safe text/icon ink. */
    --ss-gold: #d4af37;
    --ss-gold-ink: #735c00;
    --ss-radius: var(--bs-border-radius, 0.5rem);
    --ss-font-head: var(--ll-font-headings, "Playfair Display"), Georgia, serif;
    --ss-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;

    /* Rose-cream confectionery palette (DESIGN.md) */
    --ss-cream: #fff8f5;         /* page canvas + header (surface)            */
    --ss-container-low: #fcf2ee; /* hero panel / featured band / occasion card */
    --ss-container: #f6ece8;     /* categories band                           */
    --ss-container-high: #f0e6e2;/* fills / media wells (container-high)      */
    --ss-white: #ffffff;         /* surface-container-lowest (card wells)     */
    --ss-ink: #1f1b19;           /* on-surface                                */
    --ss-muted: #574143;         /* on-surface-variant                        */
    --ss-soft: #6f5a5c;          /* darkened "outline" — see CONTRAST note    */

    /* Shape + depth — a consistent 8px radius everywhere (DESIGN.md
       "Shapes"), soft low-opacity deep-rose diffusion instead of grey
       shadows (DESIGN.md "Elevation & Depth"). */
    --ss-shadow: 0 14px 32px -10px rgba(var(--ss-maroon-rgb), 0.1);

    /* Re-point the inherited base neutrals at the rose-cream palette so
       every inherited mr-* surface (bands, borders, fills, muted text)
       warms. Borders read a rose-tinted hairline via color-mix, with a
       literal fallback for browsers that don't support it. */
    --mr-ink: var(--ss-ink);
    --mr-muted: var(--ss-muted);
    --mr-soft: var(--ss-soft);
    --mr-surface: var(--ss-cream);
    --mr-band: var(--ss-container);
    --mr-band-alt: var(--ss-container-low);
    --mr-fill: var(--ss-container-high);
    --mr-border: #f3dfdf;
    --mr-border: color-mix(in srgb, var(--ss-maroon) 12%, var(--ss-cream));
    --mr-border-strong: #e1babe;
    --mr-border-strong: color-mix(in srgb, var(--ss-maroon) 30%, var(--ss-cream));
    --mr-radius: var(--ss-radius);
    --mr-gold: var(--ss-gold-ink);
    --mr-shadow: var(--ss-shadow);

    background-color: var(--ss-cream);
    color: var(--ss-ink);
    font-family: var(--ss-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.ss-theme .form-control,
body.ss-theme .form-select,
body.ss-theme .dropdown-menu,
body.ss-theme .offcanvas {
    border-radius: var(--ss-radius);
}

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

/* --------------------------------------------------------------------------
   Typography — Playfair headlines in the dark confectionery ink (the export
   keeps section headings on-surface; only the hero title is maroon), tracked
   pistachio-ink eyebrows, tracked sans prices.
   -------------------------------------------------------------------------- */
body.ss-theme h1, body.ss-theme h2, body.ss-theme h3,
body.ss-theme h4, body.ss-theme h5, body.ss-theme h6 {
    font-family: var(--ss-font-head);
    color: var(--ss-ink);
    font-weight: 700;
    letter-spacing: -0.01em;
}

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

/* --------------------------------------------------------------------------
   Buttons — solid rose-maroon primary (hover deepens toward the design's
   #7c112a primary); a quiet gold-keyline secondary with maroon text so it
   never relies on the decorative gold for legibility.
   -------------------------------------------------------------------------- */
body.ss-theme .mr-btn {
    border-radius: var(--ss-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.ss-theme .mr-btn--primary {
    background-color: var(--ss-maroon);
    border-color: var(--ss-maroon);
    color: #fff;
}

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

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

body.ss-theme .ss-btn-outline:hover {
    background: var(--ss-container);
    border-color: var(--ss-gold);
    color: var(--ss-maroon);
}

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

/* The tracked maroon keyline link — the template's "View All Products" /
   "Read Story" affordance (text-primary over a primary underline). */
body.ss-theme .ss-view-link {
    color: var(--ss-maroon);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--ss-maroon);
}

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

body.ss-theme .mr-ulink:hover { color: var(--ss-maroon); border-color: var(--ss-maroon); }

/* Inputs — thin muted-maroon hairline on cream; focus draws the gold border
   per DESIGN.md ("Focus states highlight the border in Gold"). */
body.ss-theme .form-control,
body.ss-theme .form-select {
    background-color: var(--ss-cream);
    border-color: var(--mr-border-strong);
    color: var(--ss-ink);
}

body.ss-theme .form-control:focus,
body.ss-theme .form-select:focus {
    border-color: var(--ss-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   Trust strip (inherited mr-trust) — the export's gold filled icons; the raw
   gold keyline colour fails even the lenient 3:1 icon threshold on cream, so
   icons ink with --ss-gold-ink instead (6.2:1). Labels are single tracked
   caps lines in the dark ink.
   -------------------------------------------------------------------------- */
body.ss-theme .mr-trust svg { color: var(--ss-gold-ink); }

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

/* --------------------------------------------------------------------------
   Occasions (ss-occasions) — the ss-only "Shop By Occasion" band: gold
   1px-keyline cards on the blush container-low fill (DESIGN.md "Gold
   Keylines … lift premium gift tiles from the background without shadows"),
   a Playfair occasion name over a small tracked tag.
   -------------------------------------------------------------------------- */
body.ss-theme .ss-occasion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 100%;
    padding: 2rem 1.25rem;
    text-align: center;
    text-decoration: none;
    background: var(--ss-container-low);
    border: 1px solid var(--ss-gold);
    border-radius: var(--ss-radius);
    transition: background-color 0.3s ease;
}

body.ss-theme .ss-occasion:hover { background: var(--ss-cream); }

body.ss-theme .ss-occasion__title {
    font-family: var(--ss-font-head);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ss-ink);
    transition: color 0.2s ease;
}

body.ss-theme .ss-occasion:hover .ss-occasion__title { color: var(--ss-maroon); }

body.ss-theme .ss-occasion__label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ss-muted);
}

/* --------------------------------------------------------------------------
   Promo tiles (inherited mr-promo) — the template lays the three tiles out
   as a bento: the Signature Boxes tile spans the left two-thirds full
   height, Classic Mithai + Dry Fruit Baskets 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. The base dark-scrim
   caption already pairs white text with a dark photo backdrop; the hover
   caption re-inks to the gold keyline ON the dark scrim (safe on dark) —
   overriding the base's accent hover, which would wash out.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    body.ss-theme .row:has(> .col > .mr-promo) {
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-auto-rows: 284px;
        gap: 1.5rem;
        margin: 0;
    }

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

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

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

body.ss-theme .mr-promo__title { font-weight: 600; }

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

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

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — white media wells (the export sits its
   product photography on pure white), bold tracked maroon prices (DESIGN.md:
   "Prices should always be rendered in the sans-serif face with slightly
   increased tracking"), pistachio-ink SALE badge.
   -------------------------------------------------------------------------- */
body.ss-theme .mr-card__media { background-color: var(--ss-white); }

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

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

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

body.ss-theme .mr-card__price {
    color: var(--ss-maroon);
    font-weight: 600;
    letter-spacing: 0.05em;
}

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

/* The export's pill SALE chip is the raw pistachio with white caps —
   3.15:1, fails. The -ink sibling keeps the green identity at 6.5:1. */
body.ss-theme .mr-card__sale {
    background-color: var(--ss-pistachio-ink);
    color: #fff;
    border-radius: 9999px;
    letter-spacing: 0.08em;
}

/* The wishlist heart's "saved" state — the base default is the raw accent
   (var(--ll-accent)), i.e. light pistachio on the white overlay circle
   (3.15:1, borderline). Ink it with the text-safe green instead (6.5:1).
   The eye (.mr-card__quickview) and the heart's default/hover states
   already read --bs-primary / --mr-ink + --mr-surface from the base —
   both safe here since primary is the dark maroon. */
body.ss-theme .mr-card__wish.is-active { color: var(--ss-pistachio-ink); }

/* --------------------------------------------------------------------------
   Categories (inherited mr-tile--cat) — the export's 3:4 portrait photo
   tiles with a centered serif name; the base's fixed 360px height becomes
   the template's portrait ratio.
   -------------------------------------------------------------------------- */
body.ss-theme .mr-tile--cat {
    height: auto;
    aspect-ratio: 3 / 4;
}

body.ss-theme .mr-tile__placeholder { background: linear-gradient(135deg, var(--ss-container), var(--ss-container-high)); }

body.ss-theme .mr-tile--cat .mr-tile__cap {
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
}

/* --------------------------------------------------------------------------
   Journal (ss-journal) — centered Playfair heading + quiet intro line,
   pistachio-ink category eyebrows, maroon keyline "Read Story" links.
   -------------------------------------------------------------------------- */
body.ss-theme .ss-journal__intro {
    color: var(--ss-muted);
    max-width: 52ch;
}

body.ss-theme .mr-article__title a { color: var(--ss-ink); }
body.ss-theme .mr-article__title a:hover { color: var(--ss-maroon); }

/* --------------------------------------------------------------------------
   Newsletter (ss-cta) — "The Sweet List": the full-width deep-maroon band
   with a centered white Playfair headline, translucent-white body, frosted
   email input and the white Subscribe button (hover flips to the gold fill
   carrying the dark ink — white-on-gold would fail).
   -------------------------------------------------------------------------- */
body.ss-theme .ss-cta {
    background: var(--ss-maroon);
    padding: clamp(4.5rem, 9vw, 6.5rem) 0;
}

body.ss-theme .ss-cta__eyebrow { color: rgba(255, 255, 255, 0.85); }

body.ss-theme .ss-cta__title {
    color: #fff;
    font-size: clamp(2rem, 4vw, 3rem);
}

body.ss-theme .ss-cta__body {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    max-width: 52ch;
}

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

body.ss-theme .ss-cta__form input {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--ss-radius);
    padding: 0.9rem 1.4rem;
    font-size: 0.95rem;
    color: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.ss-theme .ss-cta__form input::placeholder { color: rgba(255, 255, 255, 0.6); }

body.ss-theme .ss-cta__form input:focus {
    outline: none;
    border-color: var(--ss-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3);
}

body.ss-theme .ss-cta__btn {
    border: 0;
    background: #fff;
    color: var(--ss-maroon);
    border-radius: var(--ss-radius);
    padding: 0.9rem 2.25rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

body.ss-theme .ss-cta__btn:hover {
    background: var(--ss-gold);
    color: var(--ss-ink);
}

body.ss-theme .ss-cta__note { color: rgba(255, 255, 255, 0.6); font-size: 0.78rem; }

/* --------------------------------------------------------------------------
   Inherited chrome finishing — the deep-maroon footer (the export's footer
   sits on the darker #7c112a primary; the shared token keeps it customizer-
   driven, deepened with a color-mix where supported).
   -------------------------------------------------------------------------- */
body.ss-theme .mr-footer {
    background-color: var(--ss-maroon);
    background-color: color-mix(in srgb, var(--ss-maroon) 82%, #000);
    border-top: 0;
    color: rgba(255, 255, 255, 0.78);
}

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

body.ss-theme .mr-footer a { color: rgba(255, 255, 255, 0.78); }
/* Maroon bg: the -ink accents are tuned for a LIGHT backdrop and would sink
   into this dark one, so brighten to white on hover instead — matches the
   karak-bazaar/zaree pattern for a dark footer. */
body.ss-theme .mr-footer a:hover { color: #fff; }

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

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

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

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

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

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

    /* Also neutralise the inherited hover-scale transforms (the base's
       reduced-motion block only kills their transition). */
    body.ss-theme .mr-card:hover .mr-card__media img,
    body.ss-theme .mr-tile:hover .mr-tile__img,
    body.ss-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 cards run two-up (the row-cols grid already does), the
   newsletter form stacks.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.ss-theme .ss-hero { grid-template-columns: 1fr; min-height: 0; }
    body.ss-theme .ss-hero__media { min-height: 320px; }
    body.ss-theme .ss-hero__panel { padding: 2.5rem 1.25rem 3rem; }
}

@media (max-width: 575.98px) {
    body.ss-theme .ss-cta__form { flex-direction: column; }
    body.ss-theme .ss-cta__btn { width: 100%; }
    body.ss-theme .ss-occasion { padding: 1.5rem 1rem; }
    body.ss-theme .ss-occasion__title { font-size: 1.15rem; }
}