/* Desktop refinements */
@media (min-width: 1024px) {
    .container { padding: 0 40px; }
    .main-nav-list { gap: 34px; }
    .hero-content { padding: 48px 64px; max-width: 620px; }
    .section-heading h2 { font-size: 28px; }

    /* Wider (shorter) ratio at desktop so the card stays full-width without growing too tall —
       NOT combined with max-height, which fights aspect-ratio and shrinks width instead of height. */
    .hero-card { aspect-ratio: 2.4 / 1; }

    /* Hover-reveal arrows on desktop (mouse users) — always visible below this, for touch/tablet */
    .hero-arrow { opacity: 0; }
    .hero-card:hover .hero-arrow, .hero-arrow:focus-visible { opacity: 1; }
}

@media (max-width: 600px) {
    /* Hero text is vertically centered on mobile too — keep arrows near the top,
       clear of the text block, instead of the true vertical center. */
    .hero-arrow { width: 34px; height: 34px; top: 20px; transform: none; }
    .hero-arrow svg { width: 15px; height: 15px; }
    .hero-arrow-prev { left: 10px; }
    .hero-arrow-next { right: 10px; }
}

@media (min-width: 1440px) {
    .container { padding: 0 24px; }
}

/* Tablet / reference viewport (~724-1023px): keep desktop column counts, tighten spacing */
@media (max-width: 1023px) {
    .main-header-inner { gap: 16px; }
    .header-action-label { display: none; }
    .header-action { padding: 8px; }
}

/* Below ~700px: category/occasion still 6-wide feels too cramped once cards get small — drop to 3 */
@media (max-width: 700px) {
    .topbar-item--hide-sm { display: none; }
    .category-grid { grid-template-columns: repeat(3, 1fr); }
    .occasion-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .footer-columns { grid-template-columns: 1fr 1fr; }
    .footer-col-brand { grid-column: 1 / -1; }

    .inspiration-card { grid-template-columns: 1fr; min-height: 0; }
    .inspiration-media { aspect-ratio: 16 / 9; }
    .inspiration-text { padding: 28px; }
}

/* True mobile only — the reference keeps search/nav/newsletter/stats inline down through ~724px */
@media (max-width: 639px) {
    .site-search { order: 3; max-width: 100%; flex-basis: 100%; margin-top: 10px; }
    .main-header-inner { flex-wrap: wrap; height: auto; padding: 12px 0; }
    .main-header { padding-bottom: 4px; }

    .newsletter-card { grid-template-columns: 1fr; text-align: left; }
    .newsletter-promise { text-align: left; }

    .stats-panel { grid-template-columns: repeat(2, 1fr); }
    .stat:nth-child(2) { border-right: none; }
    .stat { border-bottom: 1px solid var(--border); }
    .stat:nth-child(3), .stat:nth-child(4) { border-bottom: none; }

    .mobile-menu-toggle { display: flex; }
}

/* Mobile */
@media (max-width: 600px) {
    .container { padding: 0 16px; }
    .hero { padding-top: 12px; }
    .hero-card { aspect-ratio: 4 / 5; max-height: none; }
    .hero-content { padding: 24px 22px; max-width: 100%; }
    .hero-title { font-size: 26px; }
    .hero-ctas { flex-direction: column; align-items: flex-start; }
    .hero-ctas .btn { width: 100%; }

    .category-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .category-card { padding: 12px 6px; }
    .category-card-media { width: 44px; height: 44px; font-size: 20px; }

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

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

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

    .footer-columns { grid-template-columns: 1fr; }

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

@media (max-width: 430px) {
    .main-nav-list { gap: 20px; }
    .section-heading { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Main nav becomes the mobile drawer content when toggled open (true mobile only) */
@media (max-width: 639px) {
    .main-nav { display: none; }
    .mobile-nav-close { display: none; }
    body.mobile-nav-open .main-nav {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 100;
        background: var(--bg);
        padding-top: 76px;
        overflow-y: auto;
    }
    /* The overlay covers the header (including the hamburger toggle), so it needs its own
       close affordance — without this there was no way to close the menu once opened. */
    body.mobile-nav-open .mobile-nav-close {
        display: flex;
        position: fixed;
        top: 16px;
        right: 16px;
        z-index: 101;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border-strong);
        border-radius: 999px;
        background: var(--card);
        color: var(--text);
    }
    .mobile-nav-close svg { width: 18px; height: 18px; }
    body.mobile-nav-open .main-nav-inner { height: auto; }
    body.mobile-nav-open .main-nav-list { flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 0; }
    body.mobile-nav-open .main-nav-list a { display: block; width: 100%; padding: 12px 4px; font-size: 16px; }
}