:root {
    --color-topbar-pink: #EC1C77;
    --color-primary: #22C55E;
    --color-primary-dark: #15803D;
    --color-accent-yellow: #FDE68A;
    --color-pastel-blue: #D6EFFF;
    --color-pastel-pink: #FCE4F2;
    --color-surface-dark: #0F172A;
    --color-background: #FFFFFF;
    --color-text: #1E293B;
    --color-muted: #64748B;
    --color-whatsapp: #25D366;
    --color-header-footer-bg: #4A0E2E;
    /* General text/icons on the raw header/footer background use white
       (15.07:1 against this plum). --color-header-footer-ink is kept
       separately for the few elements that sit on a solid WHITE surface
       instead (active pill, active lang toggle) — those need dark text
       regardless of the outer background, since white-on-white would be
       invisible. This token is also reused for page <h1> headings
       (all sit on the white page background, not the pink header/footer
       fill). Verified at 15.07:1 against white in both directions
       (text-on-white and white-on-this-color), clearing AA either way.
       Both this and --color-header-footer-ink independently trace back
       to the same original #4A0E2E plum (one via header/footer background
       recolors, the other via a separate brand-ink recolor) and have now
       been reverted back to that shared value — kept as two tokens since
       they serve different surfaces (raw pink fill vs. text on white),
       not because they're expected to diverge again. */
    --color-header-footer-text: #FFFFFF;
    --color-header-footer-ink: #4A0E2E;
    /* How It Works step badges: pastel fills only. Each badge's icon uses a
       separately-chosen darker shade of the same hue, set directly on the
       one selector that needs it rather than as a 5th/6th/7th/8th token —
       contrast-checked per pair (icon vs. its own pastel), all clear the
       3:1 non-text/graphical-object guideline: green 3.32:1, blue 3.57:1,
       orange 3.11:1, pink 3.91:1. */
    --color-badge-green: #D1FAE5;
    --color-badge-blue: #E0F2FE;
    --color-badge-orange: #FFEDD5;
    --color-badge-pink: #FCE7F3;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    background: var(--color-background);
    color: var(--color-text);
    line-height: 1.5;
}

/* Bubblegum Sans for headings, Poppins everywhere else. Bubblegum Sans
   ships one weight on Google Fonts (no bold/semibold), so font-weight is
   explicitly normal here — leaving the browser's default bold h1-h3
   styling in place would make it fake-bold (synthetic, blurry stroke
   thickening) instead of using the font's actual, single, already-bold-
   looking letterform design. */
h1, h2, h3 {
    font-family: 'Bubblegum Sans', cursive, sans-serif;
    font-weight: normal;
}

/* --color-header-footer-ink reused here rather than a second hardcoded
   hex — contrast-checked against the page's white background: 15.07:1,
   clears AA (the same ratio already verified for this token against a
   solid white surface in the header/footer, since contrast is symmetric). */
h1 {
    color: var(--color-header-footer-ink);
}

a {
    color: var(--color-primary-dark);
    text-decoration: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.site-header {
    /* position+z-index is required, not optional styling: .hero further
       down the page is `position: relative` (no explicit z-index), which
       is enough to paint it in the browser's "positioned elements" layer —
       painted AFTER all non-positioned content regardless of DOM order.
       Without this rule, .site-header (and everything inside it, including
       the nav dropdown) stays non-positioned and gets painted first, so it
       renders behind .hero no matter what z-index the dropdown itself has.
       This only shows up on the homepage because it's the only page with
       a positioned section below the header. */
    position: relative;
    z-index: 50;
    background: var(--color-header-footer-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    /* Reduced from 2rem now that all 7 nav links live inline in the dock —
       the wider, busier nav reads better with a more compact overall
       header height. The dock's own floating margin (.main-nav's
       margin-top/bottom, further down) is untouched by this. */
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.brand {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-header-footer-text);
}

/* logo-full.png/logo-icon.png are opaque RGB PNGs with a light background
   baked in (no alpha channel — confirmed by reading the raw PNG header,
   no Pillow available in this environment). A white rounded "chip" was
   added here in an earlier phase to make that look deliberate, but it
   only made the light box more prominent (bigger, rounded, padded)
   rather than less — removed. mix-blend-mode: multiply was tested by
   manually decoding the PNG and simulating the blend against the header's
   actual magenta (again, no Pillow — done by hand with zlib/struct): it
   does remove the background, but also crushes the logo's own colors
   (the green arm goes nearly black, blue goes much darker, orange dulls)
   since multiply darkens everything that isn't already magenta-like.
   That's a worse regression than the box it was meant to fix, so it was
   not applied. The real fix is re-exporting logo-full.png/logo-icon.png
   with genuine alpha transparency — an image-editing task, not a CSS one. */
.brand img {
    display: block;
    width: auto;
    /* Increased from 40px — checked against the desktop nav pill's own
       computed footprint (~54.8px including its floating margin, from
       its actual padding/font-size/line-height) so the header doesn't
       need to grow taller to fit this; the pill stays the tallest
       element in the row with ~8px to spare. */
    height: 46px;
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--color-header-footer-text);
    cursor: pointer;
    border-radius: 0.5rem;
    order: 2;
}

.nav-toggle:hover {
    background: rgba(0, 0, 0, 0.15);
}

.main-nav {
    display: none;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
    order: 4;
}

.main-nav.is-open {
    display: flex;
}

.nav-link {
    padding: 0.5rem 1rem;
    border-radius: 999px;
    color: var(--color-header-footer-text);
    font-weight: 600;
    text-align: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-link:hover {
    background: rgba(0, 0, 0, 0.12);
}

.nav-link.is-active {
    /* Solid white pill vs. the translucent rest-state background — the
       active link is distinguishable by shape as well as color, not color
       alone. Contrast-checked: ink text on white = 15.07:1. */
    background: #FFFFFF;
    color: var(--color-header-footer-ink);
}

.lang-switcher {
    display: flex;
    gap: 0.5rem;
    order: 3;
}

.lang-switcher a {
    /* Modest reduction, not more — rendered box is still ~26px tall
       (line-height + padding + border), comfortably above the ~24px CSS px
       minimum tap-target guideline despite the smaller header. */
    padding: 0.2rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 0.25rem;
    color: var(--color-header-footer-text);
    font-weight: 600;
    font-size: 0.75rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.lang-switcher a:hover {
    background: rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
}

.lang-switcher a.active {
    background: #FFFFFF;
    color: var(--color-header-footer-ink);
    border-color: #FFFFFF;
}

main.container {
    min-height: 60vh;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Buttons */

.btn {
    display: inline-block;
    padding: 0.6rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-align: center;
    border: 2px solid transparent;
    cursor: pointer;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-background);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
}

.btn-secondary {
    background: transparent;
    border-color: var(--color-primary-dark);
    color: var(--color-primary-dark);
}

.btn-whatsapp {
    background: var(--color-whatsapp);
    color: var(--color-background);
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

.btn-whatsapp:hover {
    filter: brightness(0.95);
}

.btn-large {
    font-size: 1.05rem;
    padding: 0.75rem 1.5rem;
}

.btn-disabled {
    background: #E2E8F0;
    color: var(--color-muted);
    cursor: not-allowed;
}

/* Badges */

.badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    margin: 0 0.3rem 0.3rem 0;
}

.badge-age {
    background: var(--color-accent-yellow);
    color: var(--color-text);
}

.badge-accent {
    background: var(--color-topbar-pink);
    color: var(--color-background);
}

.badge-success {
    background: #DCFCE7;
    color: var(--color-primary-dark);
}

.badge-warning {
    background: #FEF3C7;
    color: #92400E;
}

.badge-danger {
    background: #FEE2E2;
    color: #B91C1C;
}

.badge-info {
    background: var(--color-pastel-blue);
    color: #1E3A8A;
}

.badge-muted {
    background: #E2E8F0;
    color: var(--color-muted);
}

/* Hero */

.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-pastel-blue), var(--color-pastel-pink));
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    /* Pull the homepage banner into the main wrapper's existing top
       padding, leaving a compact 1rem gap below the navigation. */
    margin-top: -1rem;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.55);
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero h1 {
    margin: 0 0 0.5rem;
}

.hero p {
    color: var(--color-text);
    margin: 0.5rem 0 0.75rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

/* Root cause of the visual misalignment: .hero-actions had no align-items,
   so it defaulted to `stretch` — since "Chat on WhatsApp" carries .btn-large
   (larger padding/font-size than plain .btn), it was the tallest sibling,
   and the other two buttons stretched to match its height without their
   own text re-centering in that extra space. align-items: center above
   stops the stretch; this rule also equalizes padding/font-size/line-height
   across all three so they're the same size, not just centered against
   each other at different heights. Scoped to .hero-actions specifically so
   .btn-large/.btn-whatsapp keep their own sizing everywhere else they're
   used (e.g. the toy detail page's standalone "Rent via WhatsApp" button). */
.hero-actions .btn {
    padding: 0.625rem 1.25rem;
    font-size: 1.05rem;
    line-height: 1.5;
}

.hero-address {
    color: var(--color-muted);
    font-size: 0.875rem;
    margin-top: 1rem;
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .hero-video {
        display: none;
    }
}

/* Age quick-nav */

.age-quicknav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin: 0.75rem 0;
}

.age-pill {
    background: var(--color-accent-yellow);
    color: var(--color-text);
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
}

.age-pill:hover {
    filter: brightness(0.95);
}

/* Alternating homepage section bands (existing tokens only) */

.section-band {
    border-radius: 1rem;
    padding: 2rem 0;
    margin: 2rem 0;
}

/* Keep the first homepage band close to the age shortcuts so its heading
   and blue surface enter the initial viewport with the hero. */
.featured-toys {
    margin-top: 0.75rem;
    padding-top: 1.25rem;
}

@media (max-width: 480px) {
    .hero {
        padding: 1rem 0.75rem;
    }

    .hero h1 {
        font-size: 1.75rem;
        line-height: 1.2;
    }

    .hero p {
        font-size: 0.9375rem;
        line-height: 1.4;
    }

    .hero-actions {
        gap: 0.5rem;
    }

    .hero-actions .btn {
        padding: 0.5rem 0.75rem;
        font-size: 1rem;
    }

    .age-quicknav {
        gap: 0.5rem;
    }

    .age-pill {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }
}

.section-band-blue {
    background: var(--color-pastel-blue);
}

.section-band-yellow {
    background: var(--color-accent-yellow);
}

.section-band h2 {
    color: var(--color-primary-dark);
    margin: 0 0 1rem;
}

.section-heading-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.section-heading-row h2 {
    margin: 0;
}

/* Carousels (featured toys, why-ayaven-kids) */

.carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
}

.carousel-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    flex: 1;
    padding: 0.5rem 0.25rem 1rem;
    -webkit-overflow-scrolling: touch;
}

.carousel-track > * {
    scroll-snap-align: start;
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .carousel-track {
        scroll-behavior: auto;
    }
}

.carousel-arrow {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--color-background);
    color: var(--color-primary-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.carousel-arrow:hover {
    background: var(--color-primary);
    color: var(--color-background);
}

/* Compact carousel toy card: image + name at rest, price/CTA on hover/focus */

.toy-card-carousel {
    width: 160px;
}

.toy-card-carousel .toy-card-body {
    padding: 0.6rem;
}

.toy-card-carousel .toy-card-body h3 {
    font-size: 0.9rem;
}

.toy-card-media {
    position: relative;
}

.toy-card-overlay {
    position: absolute;
    inset: 0;
    /* --color-surface-dark (#0F172A) at 75% opacity, as a scrim over the photo */
    background: rgba(15, 23, 42, 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.toy-card-carousel:hover .toy-card-overlay,
.toy-card-carousel:focus-within .toy-card-overlay {
    opacity: 1;
    pointer-events: auto;
}

.toy-card-overlay .price {
    color: var(--color-background);
    margin: 0;
    font-size: 0.85rem;
}

.toy-card-overlay .btn-whatsapp {
    font-size: 0.8rem;
    padding: 0.4rem 0.75rem;
}

@media (min-width: 768px) {
    .toy-card-carousel {
        width: 200px;
    }
}

/* Feature cards ("Why Ayaven Kids?") */

.feature-card {
    width: 220px;
    background: var(--color-background);
    border-radius: 0.75rem;
    padding: 1.25rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.feature-card img {
    width: 100%;
    aspect-ratio: 8 / 5;
    object-fit: cover;
    /* 0.75rem (12px) matches the radius already used by .toy-card,
       .faq-item and .steps-list li elsewhere in the design system. */
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--color-pastel-blue);
}

.feature-card h3 {
    color: var(--color-primary-dark);
    margin: 0 0 0.4rem;
    font-size: 1rem;
}

.feature-card p {
    color: var(--color-muted);
    font-size: 0.9rem;
    margin: 0;
}

/* Toy grid + cards */

.toy-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.toy-card {
    border: 1px solid #E2E8F0;
    border-radius: 0.75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--color-background);
}

.toy-card-media img {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.toy-card-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.toy-card-body h3 {
    margin: 0;
    font-size: 1.05rem;
}

.toy-card-body h3 a {
    color: var(--color-text);
}

.toy-card-desc {
    color: var(--color-muted);
    font-size: 0.9rem;
    margin: 0;
}

.price {
    font-weight: 700;
    color: var(--color-primary-dark);
    margin: 0;
}

/* Catalog filters */

.catalog-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
    margin: 1.5rem 0;
}

.catalog-filters label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--color-muted);
}

.catalog-filters select {
    /* No-JS fallback appearance only — main.js hides this and renders
       .custom-select instead whenever JS is available. */
    padding: 0.4rem 0.6rem;
    border-radius: 0.4rem;
    border: 1px solid #CBD5E1;
}

/* Custom-styled dropdown (progressive enhancement over a real <select>) */

.visually-hidden-select {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Generic screen-reader-only utility — same technique as
   .visually-hidden-select above, under a reusable name for anywhere a
   text equivalent is needed without a visible on-page duplicate (e.g. a
   CSS background-image, which has no native alt attribute). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.custom-select {
    position: relative;
    display: inline-block;
    min-width: 200px;
    max-width: 100%;
}

.custom-select-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 999px;
    /* --color-pastel-blue at low opacity, a subtle tint rather than flat white */
    background: rgba(214, 239, 255, 0.35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--color-text);
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* backdrop-filter has no effect in unsupporting browsers, leaving the solid
   rgba background above as the fallback — legibility never depends on blur. */

.custom-select-trigger:hover {
    border-color: var(--color-primary);
}

.custom-select-trigger:focus-visible {
    outline: none;
    border-color: var(--color-primary-dark);
    /* --color-primary (#22C55E) at low opacity, as a focus ring */
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}

.custom-select.is-open .custom-select-trigger {
    border-color: var(--color-primary-dark);
    background: var(--color-background);
}

.custom-select-trigger svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.custom-select.is-open .custom-select-trigger svg {
    transform: rotate(180deg);
}

.custom-select-listbox {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 20;
    width: 100%;
    max-width: calc(100vw - 2rem);
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    background: var(--color-background);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1rem;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    max-height: 260px;
    overflow-y: auto;
    /* Entrance animation driven by .is-visible (added a frame after removing
       [hidden]) since a [hidden] element is display:none and can't be
       transitioned — see main.js open(). */
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

.custom-select-listbox.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .custom-select-listbox {
        transition: none;
    }
}

.custom-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.6rem;
    color: var(--color-text);
    font-size: 0.9rem;
    cursor: pointer;
}

.custom-select-option.is-active {
    /* --color-primary at low opacity, a tint rather than browser-default blue */
    background: rgba(34, 197, 94, 0.12);
}

.custom-select-option.is-selected {
    color: var(--color-primary-dark);
    font-weight: 600;
}

.custom-select-option.is-selected::after {
    content: '\2713';
    color: var(--color-primary-dark);
    font-weight: 700;
}

/* Toy detail */

.toy-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 1.5rem;
}

.toy-detail-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 0.75rem;
    object-fit: cover;
}

.toy-category {
    color: var(--color-muted);
    font-weight: 600;
}

.duration-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0;
}

.duration-option {
    border: 2px solid var(--color-primary);
    color: var(--color-primary-dark);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.duration-option.active {
    background: var(--color-primary);
    color: var(--color-background);
}

.unavailable-note {
    color: var(--color-muted);
    font-style: italic;
}

/* Content pages: how-it-works, FAQ, delivery, rental terms, privacy */

/* Generic card grid: reused across Why Us, Party Packages, and Events We
   Serve instead of bullet lists — 1 column on mobile, 2 at tablet, 4 at
   desktop, which suits both 4-item grids and the 8-item events grid. */
.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

@media (min-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .card-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.content-card {
    background: var(--color-background);
    border: 1px solid #E2E8F0;
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.content-card h2 {
    color: var(--color-primary-dark);
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.content-card p {
    color: var(--color-muted);
    margin: 0;
}

/* Cards with a top banner image (currently used on Why Us). .content-card's
   own padding would inset the image on all sides, so this variant moves
   padding onto a .content-card-body wrapper around the text instead — the
   image stays full-bleed and gets clipped to the card's own border-radius
   via overflow: hidden, rather than needing a second, separately maintained
   border-radius value that could drift out of sync with the card's. */
.content-card-with-image {
    padding: 0;
    overflow: hidden;
}

.content-card-with-image img {
    display: block;
    width: 100%;
    height: 11rem;
    object-fit: cover;
}

.content-card-with-image .content-card-body {
    padding: 1.5rem;
}

.content-card-compact {
    text-align: center;
}

.content-card-icon {
    color: var(--color-primary-dark);
    margin-bottom: 0.5rem;
}

.content-card-compact h2 {
    font-size: 1rem;
    margin: 0;
}

/* Party Packages — video-header cards */

.package-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Explicit align-items: stretch (grid's own default, made explicit
       here so it can't be silently overridden elsewhere) — this is what
       makes every .package-card in a row match the tallest card's height,
       independent of each card's own description length. */
    align-items: stretch;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

@media (min-width: 768px) {
    .package-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .package-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.package-card {
    display: flex;
    flex-direction: column;
    /* Belt-and-suspenders alongside .package-grid's align-items: stretch
       above — grid stretch already sizes this to the row's tallest card,
       but height: 100% makes that explicit on the item itself too, so
       .package-card-body's flex: 1 below has an unambiguous height to
       distribute into regardless of which layout mechanism is in play. */
    height: 100%;
    background: var(--color-background);
    border: 1px solid #E2E8F0;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.package-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.package-card-media {
    /* Fixed height, not aspect-ratio — aspect-ratio only constrains this
       container; it doesn't reliably constrain the <video> child sized
       via height: 100% below. Reproduced with the Custom Package's
       portrait-shot video: Chrome/Edge let the video's own intrinsic
       (portrait) aspect ratio win and stretch this container tall,
       while Firefox cropped it correctly — a real cross-browser gap in
       how a replaced element's percentage height resolves against an
       aspect-ratio-derived (rather than literal) parent height. A fixed
       height sidesteps that difference entirely: percentage heights
       against a literal value are unambiguous in every engine, so every
       card's media area is now the same height regardless of its
       source video/image's own orientation. Shared by all 4 cards via
       this one class — no per-card override exists or should exist. */
    height: 12rem;
    background: var(--color-pastel-blue);
}

.package-card-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.package-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    padding: 1.5rem;
}

.package-card-body h2 {
    color: var(--color-primary-dark);
    margin: 0;
    font-size: 1.1rem;
}

.package-card-body p {
    color: var(--color-muted);
    margin: 0;
    font-size: 0.9rem;
}

/* Contact page — same label/value arrangement as the footer's Contact
   block (fixed-width labels, address split into left-aligned lines via
   the address_lines filter), but recolored for this page's white content
   background instead of the pink footer. */

.contact-info {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1.5rem 0 0;
    padding-left: 0;
}

/* Icon + value grid, matching the footer's Contact block layout
   (.footer-contact li) rather than the old bold-text-label rows — the
   fixed 1.5rem icon column keeps every value column starting at the same
   x position, same as the label column used to. */
.contact-info li {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: 0.5rem;
    align-items: flex-start;
}

.contact-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    /* Optically centers the icon against the text's cap-height rather
       than the full line-box, matching the footer's icon treatment. */
    margin-top: 0.1rem;
    color: var(--color-text);
}

.contact-info-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* font-size/line-height only here — color is left alone so the tel:/
   WhatsApp/mailto links keep the site's normal link color (inherited
   from the global `a` rule) rather than flattening to plain body text. */
.contact-info a,
.contact-info-value {
    /* Matches the page's own body-text size/line-height rather than the
       footer's smaller 0.875rem, so this reads consistently with the
       "Message us on WhatsApp..." paragraph above it. */
    font-size: 1rem;
    line-height: 1.5;
}

.contact-info-value {
    color: var(--color-text);
}

/* Address is the one value that wraps to multiple lines — stacking its
   line-spans in a flex column keeps them left-aligned under each other
   and under the value column's start, not under the label. Lines are
   aria-hidden with the full address exposed via aria-label instead, so
   a screen reader announces one coherent address, not four fragments —
   same pattern as the footer's address block. */
.contact-address-lines {
    display: flex;
    flex-direction: column;
}

.contact-address-line {
    color: var(--color-text);
    line-height: 1.4;
}

/* Events We Serve — asymmetric bento grid */

.bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}

@media (min-width: 640px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bento-tile-span-2 {
        grid-column: span 2;
    }
}

@media (min-width: 1024px) {
    .bento-grid {
        grid-template-columns: repeat(4, 1fr);
        /* dense packing lets the 5 single-span tiles automatically backfill
           whatever space the 3 larger tiles leave, without hand-placing
           every tile's exact grid-column/grid-row. */
        grid-auto-flow: dense;
    }

    .bento-tile-large {
        grid-row: span 2;
        min-height: unset;
    }
}

.bento-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 1rem;
    padding: 1.25rem;
    min-height: 180px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bento-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.bento-tile-large {
    min-height: 220px;
}

.bento-tile-photo {
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
    overflow: hidden;
}

.bento-tile-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.bento-tile-photo > * {
    position: relative;
}

.bento-tile-photo h2 {
    color: #FFFFFF;
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
    /* Contrast against a photo can't be computed the way a flat color pair
       can — the rgba(0,0,0,0.4) scrim plus this shadow are a standard
       belt-and-suspenders combination for legible text over an arbitrary
       photograph, not a substitute for an exact verified ratio. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.bento-pill {
    display: inline-block;
    align-self: flex-start;
    background: #FFFFFF;
    /* --color-header-footer-ink reused — verified 15.07:1 against white
       elsewhere in the token's own definition. */
    color: var(--color-header-footer-ink);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 0.6rem;
}

.bento-tile-link {
    display: inline-block;
    margin-top: 0.5rem;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: underline;
}

.bento-tile-plain {
    background: var(--color-background);
    border: 1px solid #E2E8F0;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.bento-tile-plain h2 {
    color: var(--color-header-footer-ink);
    margin: 0.75rem 0 0;
    font-size: 1rem;
}

.bento-tile-icon {
    color: var(--color-header-footer-ink);
}

.content-note {
    color: var(--color-muted);
    font-style: italic;
    font-size: 0.9rem;
}

/* How It Works — staggered step flow */

.section-intro {
    text-align: center;
    margin: 1.5rem 0 2.5rem;
}

.section-subtitle {
    color: var(--color-muted);
    margin: 0;
}

.steps-flow {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem 1.5rem;
    margin: 2rem 0;
}

@media (min-width: 640px) {
    .steps-flow {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .steps-flow {
        grid-template-columns: repeat(4, 1fr);
        /* Extra bottom margin makes room for the even cards' visual
           translateY offset below, which (being a transform, not a layout
           property) doesn't grow the grid track itself. */
        margin-bottom: 3rem;
    }

    /* Alternating stagger, desktop only — collapses to a normal aligned
       stack below this breakpoint. nth-of-type (not nth-child) because the
       3 decorative arrow SVGs are earlier siblings of a different tag
       name; nth-of-type counts only among same-tag <article> siblings, so
       it still correctly picks the 2nd and 4th step-card regardless. */
    .step-card:nth-of-type(even) {
        transform: translateY(2rem);
    }

    .steps-arrow {
        display: block;
    }
}

.steps-arrow {
    /* Hidden below desktop — decorative connectors would clutter a
       stacked mobile/tablet layout. */
    display: none;
    position: absolute;
    top: 4.5rem;
    color: var(--color-muted);
    z-index: 1;
}

.steps-arrow-1 {
    left: 23%;
}

.steps-arrow-2 {
    left: 48%;
    top: 6.5rem;
}

.steps-arrow-3 {
    left: 73%;
}

.step-card {
    position: relative;
    background: var(--color-background);
    border: 1px solid #E2E8F0;
    border-radius: 1.5rem;
    padding: 2rem 1.5rem;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 2;
}

.step-card p {
    color: var(--color-muted);
    margin: 0;
    font-size: 0.9rem;
}

.step-badge {
    position: relative;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.step-badge-scallop {
    position: absolute;
    inset: 0;
    fill: currentColor;
}

/* Custom 3D PNG icons replacing the plain-line SVGs that used to be here
   (.step-badge-icon, and the per-color ".step-badge-X .step-badge-icon"
   stroke-color rules that only applied to those SVGs' currentColor
   strokes, removed as dead CSS along with them) — sized to sit inside the
   scallop's ~68px inner circle with a little breathing room (72px badge
   minus the scallop's own petal ring). position: relative layers it above
   the absolutely-positioned scallop background; .step-badge's flexbox
   centering handles the rest, so no extra centering rules are needed. */
.step-badge-image {
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.step-badge-green {
    color: var(--color-badge-green);
}

.step-badge-blue {
    color: var(--color-badge-blue);
}

.step-badge-orange {
    color: var(--color-badge-orange);
}

.step-badge-pink {
    color: var(--color-badge-pink);
}

.step-badge-pink .step-badge-icon {
    color: #DB2777;
}

.step-pill {
    display: inline-block;
    background: var(--color-accent-yellow);
    /* --color-header-footer-ink reused rather than a new hardcoded value —
       12.10:1 against this yellow, verified. */
    color: var(--color-header-footer-ink);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    margin: 0 0 0.9rem;
}

.how-it-works-cta {
    text-align: center;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1.5rem 0;
}

.faq-item {
    background: var(--color-background);
    border: 1px solid #E2E8F0;
    border-radius: 0.75rem;
    padding: 1rem;
    transition: border-color 0.15s ease;
}

.faq-item:hover {
    border-color: var(--color-primary);
}

.faq-item[open] {
    border-color: var(--color-primary-dark);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    list-style: none;
    font-weight: 600;
    color: var(--color-primary-dark);
    cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
    transform: rotate(45deg);
}

.faq-item p {
    margin: 0.75rem 0 0;
    color: var(--color-muted);
}

/* Floating WhatsApp button */

.whatsapp-float {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-whatsapp);
    color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 100;
}

.whatsapp-float:hover {
    filter: brightness(0.95);
}

.site-footer {
    background: var(--color-header-footer-bg);
    color: var(--color-header-footer-text);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 1.5rem;
}

/* Match the homepage's final boundary gap to its 1rem header/hero gap.
   Other pages retain the shared main/footer spacing above. */
main.home-main {
    padding-bottom: 0;
}

.home-main .why-ayaven {
    margin-bottom: 0;
}

.home-main + .site-footer {
    margin-top: 1rem;
}

.footer-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0 1rem;
}

.footer-brand img {
    display: block;
}

.footer-logo {
    height: 8rem;
    width: auto;
}

.footer-contact-block {
    min-width: 0;
}

.footer-col-heading {
    /* Bumped up from 0.8rem/600 — was reading as too small/compressed
       against the rest of the footer. White (--color-header-footer-text)
       against the footer's actual background is 15.07:1, which clears
       AA's 3:1 large-text threshold this now qualifies for (18px bold)
       with room to spare, and already cleared the stricter 4.5:1 normal-
       text threshold before this change too. */
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-header-footer-text);
    margin: 0 0 0.75rem;
}

.footer-contact {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding-left: 0;
    line-height: 1.25;
}

.footer-contact li {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    white-space: nowrap;
}

.footer-contact li > .footer-contact-icon {
    flex: 0 0 1.25rem;
}

.footer-contact a,
.footer-contact-value {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-header-footer-text);
    transition: color 0.15s ease;
}

.footer-contact a {
    display: inline-block;
    padding: 0.15rem 0;
}

.footer-contact a:hover {
    /* Black (the previous hover color) only cleared AA against the
       brighter #D43389 this was tuned for (4.63:1) — against the current,
       much darker #4A0E2E it collapses to 1.39:1, a real AA failure. A
       dark background needs a LIGHT hover accent instead: reusing the
       existing --color-accent-yellow token clears 12.1:1 here, reads as a
       clear "highlight" state, and needs no new hardcoded color. Paired
       with an underline so the hover still isn't color-only. */
    color: var(--color-accent-yellow);
    text-decoration: underline;
}

.footer-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
    color: var(--color-header-footer-text);
}

.footer-contact-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* The visual address lines stay aligned while the wrapper exposes one
   coherent address to assistive technology. */
.footer-address-lines {
    display: flex;
    flex-direction: column;
}

.footer-address-line {
    line-height: 1.35;
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 1rem;
    padding-bottom: 1.25rem;
}

.footer-copyright {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-header-footer-text);
    margin: 0;
}

.footer-utility-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.footer-utility-links a {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-header-footer-text);
    transition: color 0.15s ease;
}

.footer-utility-links a:hover {
    /* Matches the contact-link hover treatment on the same background. */
    color: var(--color-accent-yellow);
    text-decoration: underline;
}

@media (min-width: 768px) {
    .footer-main {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 3rem;
    }

    .footer-contact-block {
        flex: 0 1 28rem;
    }

    .footer-bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@media (min-width: 768px) {
    .header-inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        flex-wrap: nowrap;
    }

    .brand {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    .nav-toggle {
        display: none;
    }

    .main-nav {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        width: auto;
        grid-column: 2;
        /* Explicit grid-row is required here: DOM order is
           brand -> lang-switcher -> main-nav, but their columns are
           1 -> 3 -> 2. Grid's sparse auto-placement bumps an item to the
           next row whenever its target column sits before the previous
           item's column, which is exactly this case — without grid-row:1
           main-nav silently drops to row 2, splitting the header into two
           rows even though grid-template-columns looks correct. */
        grid-row: 1;
        justify-self: center;
        align-self: center;
        /* Trimmed from 0.15rem to reclaim a little width for the 8th link
           (Contact, added alongside FAQ) without touching font-size, which
           was already at its established legibility floor (see .nav-link
           below). */
        gap: 0.1rem;
        /* Airbnb-style floating pill: a darker capsule against this
           header — raw bg already clears white at 15.07:1 now that it's
           back to the deep plum #4A0E2E, and darkening raises it further
           to 16.66:1. The tradeoff at this shade: the black overlay reads
           as less visually distinct from the already-near-black plum
           behind it (flattened pill vs. raw bg contrast: ~1.11, down from
           ~1.43 against the brighter #D43389 this was last tuned for) —
           the hairline border plus blur/shadow below are now doing more
           of the work of separating the pill from the header than the
           fill-color darkening alone. Left as-is since text legibility
           (the AA-relevant number) is unaffected and improved. */
        background: rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 9999px;
        /* Reduced from 0.35rem — the pill's own internal padding, distinct
           from margin-top/bottom below (the floating gap, left untouched). */
        padding: 0.25rem;
        /* Dock spacing: extra breathing room around the pill itself,
           distinct from .header-inner's own padding — this also pushes
           .site-header's border-bottom further from the pill for free,
           since it grows the grid row's height (align-items: center keeps
           the logo and language switcher centered on the same taller row). */
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        /* Floating dock treatment: blur + soft shadow so the pill visually
           lifts off the plum/pink header background. */
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    /* All 8 links (FAQ then Contact last) sit inline in the dock (no
       "More" overflow) — smaller font-size/padding than the mobile-drawer
       .nav-link so every item, including the two long labels ("Party
       Packages", "Events We Serve"), fits on one line without wrapping at
       1024px, the tightest desktop breakpoint. white-space: nowrap is a
       safety net against any single label ever wrapping to two lines.
       font-size (12px, down from 12.8px) is already at the smallest size
       still commonly considered legible for short UI labels and wasn't
       reduced further for the 8th link — horizontal padding was trimmed
       instead (0.5rem -> 0.4rem) to reclaim width. */
    .nav-link {
        padding: 0.4rem 0.4rem;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .lang-switcher {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        align-self: center;
    }

    .toy-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .toy-detail {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 2rem;
    }

    .toy-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .toy-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}