/* ============================================================
   COSME THEME — RESPONSIVE STYLESHEET
   Breakpoints: 360, 414, 768, 1024, 1280, 1440
   ============================================================ */

/* ============================================================
   TABLET — max 1024px
   ============================================================ */
@media (max-width: 1024px) {

    /* Header: hide nav, show hamburger */
    .site-header__nav { display: none; }
    .hamburger        { display: flex; }

    /* Products: auto-fill handles columns — tighten gap on tablet */
    .products-grid { gap: var(--sp-4); }

    /* Footer: stack to 1 column per row on tablet */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
    .footer-col--brand { grid-column: 1 / -1; }
    .footer-newsletter__inner { flex-direction: column; gap: var(--sp-6); text-align: center; }
    .footer-newsletter__form  { width: 100%; max-width: 440px; margin: 0 auto; }

    /* Trust badges: 2×2 */
    .trust-badges__grid { grid-template-columns: repeat(2, 1fr); }
    .trust-badge + .trust-badge:nth-child(3) { border-left: none; border-top: 1px solid var(--clr-border); }
    .trust-badge + .trust-badge:nth-child(odd) { border-left: none; }

    /* Categories: 2 columns, first tile spans both */
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .cat-tile:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16/7; }

    /* UGC / Instagram: 4 columns */
    .ugc-grid       { grid-template-columns: repeat(4, 1fr); }
    .instagram-grid { grid-template-columns: repeat(4, 1fr); }

    /* Blog: 2 columns */
    .blog-grid { grid-template-columns: repeat(2, 1fr); }

    /* About / Contact */
    .about-hero      { grid-template-columns: 1fr; }
    .about-hero__image { max-height: 400px; }
    .about-values    { grid-template-columns: repeat(2, 1fr); }
    .contact-layout  { grid-template-columns: 1fr; }

    /* Testimonials: 2 visible */
    .testimonial-card { width: calc(50% - var(--sp-3)); }

    /* New arrivals: 3 cards */
    .arrivals-track .product-card { width: calc(33.333% - var(--sp-4)); }

    /* Hero */
    .hero-slider { height: 70vh; min-height: 480px; }
    .hero-slide__content { max-width: 480px; }

    /* Posts: 2 columns */
    .posts-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   MOBILE — max 768px
   ============================================================ */
@media (max-width: 768px) {

    /* ── Variables ── */
    :root {
        --header-height: 60px;
        --announcement-height: 36px;
    }

    /* ── Global ── */
    /* Prevent iOS font-size zoom on input focus (must be ≥16px) */
    input, select, textarea, .form-control {
        font-size: 16px !important;
    }

    /* ── Announcement bar ── */
    .announcement-bar__slide { animation: marquee 28s linear infinite; font-size: 11px; }

    /* ── Hero ── */
    .hero-slider { height: 85svh; min-height: 500px; max-height: 700px; }

    .hero-slide__content {
        position: absolute;
        bottom: var(--sp-10);
        left: 0;
        right: 0;
        max-width: 100%;
        padding: var(--sp-6) var(--sp-5);
        margin-left: 0;
    }

    .hero-slide__overlay {
        background: linear-gradient(
            to top,
            rgba(28,16,8,0.72) 0%,
            rgba(28,16,8,0.3) 55%,
            rgba(28,16,8,0.05) 100%
        );
    }

    .hero-slide__title    { font-size: clamp(1.75rem, 8vw, 2.5rem); }
    .hero-slide__subtitle { display: none; }

    .hero-slide__ctas {
        flex-direction: column;
        gap: var(--sp-3);
        align-items: stretch;
    }
    /* Buttons fill width on mobile — no max-width constraint */
    .hero-slide__ctas .btn { width: 100%; max-width: none; }

    .hero-slider__prev { left: var(--sp-3); }
    .hero-slider__next { right: var(--sp-3); }
    .hero-slider__prev,
    .hero-slider__next { width: 40px; height: 40px; }

    /* ── Trust badges: 2×2 compact ── */
    .trust-badges__grid { grid-template-columns: repeat(2, 1fr); gap: 0; }
    .trust-badge {
        padding: var(--sp-4) var(--sp-3);
        flex-direction: row;
        text-align: left;
        gap: var(--sp-3);
    }
    .trust-badge + .trust-badge          { border-left: none; }
    .trust-badge:nth-child(odd)          { border-right: 1px solid var(--clr-border); }
    .trust-badge:nth-child(3),
    .trust-badge:nth-child(4)            { border-top: 1px solid var(--clr-border); }

    /* ── Products grid: tighten gap on mobile (columns handled by auto-fill) ── */
    .products-grid { gap: var(--sp-3); }

    /* ── Section spacing ── */
    .section      { padding-block: var(--sp-12); }
    .section--lg  { padding-block: var(--sp-16); }
    .best-sellers,
    .categories-grid,
    .community-section,
    .testimonials,
    .blog-teaser,
    .instagram-strip,
    .new-arrivals  { padding-block: var(--sp-10); }

    .section-header { margin-bottom: var(--sp-8); }
    .section-header__title { font-size: clamp(1.5rem, 6vw, 2rem); }

    /* ── Categories: 2×N grid (not 1 column) ── */
    .cat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-2);
    }
    .cat-tile:first-child { grid-column: 1 / -1; aspect-ratio: 16/9; }
    .cat-tile             { aspect-ratio: 1 / 1; }
    .cat-tile__name       { font-size: var(--fs-base); }
    .cat-tile__count      { font-size: var(--fs-xs); }

    /* ── UGC: 3 columns ── */
    .ugc-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-1); }

    /* ── Testimonials: 1 card ── */
    .testimonial-card { width: 88vw; }

    /* ── Blog: 1 column ── */
    .blog-grid { grid-template-columns: 1fr; }

    /* ── Instagram: 3 columns ── */
    .instagram-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-1); }

    /* ── Footer ── */
    .footer-grid      { grid-template-columns: 1fr; gap: var(--sp-8); }
    .footer-col--brand { display: flex; flex-direction: column; }
    .footer-newsletter__inner {
        flex-direction: column;
        text-align: center;
        gap: var(--sp-5);
    }
    .footer-newsletter__form { max-width: 100%; }
    .footer-bottom__inner {
        flex-direction: column;
        text-align: center;
        gap: var(--sp-3);
    }
    .footer-bottom__legal { justify-content: center; gap: var(--sp-4); }

    /* ── About ── */
    .about-hero         { gap: var(--sp-8); padding-block: var(--sp-10); }
    .about-hero__image  { max-height: 300px; border-radius: var(--radius-lg); }
    .about-values       { grid-template-columns: repeat(2, 1fr); }
    .about-reasons-grid { grid-template-columns: 1fr; }
    .about-stats        { justify-content: space-around; gap: var(--sp-4); }
    .about-stat__number { font-size: 2rem; }
    .about-cta          { padding: var(--sp-12) 0; }
    .about-cta__actions { flex-direction: column; align-items: stretch; }
    .about-cta__actions .btn { width: 100%; text-align: center; }

    /* ── Contact ── */
    .contact-layout    { padding-block: var(--sp-8); }
    .contact-form-card { padding: var(--sp-5); }

    /* ── Posts ── */
    .posts-grid { grid-template-columns: 1fr; }

    /* ── Quick order modal — slides up from bottom ── */
    .quick-order-modal {
        align-items: flex-end;
        padding: 0;
    }
    .quick-order-modal__panel {
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        width: 100%;
        max-width: 100%;
        max-height: 92dvh;
        transform: translateY(100%);
        overflow-y: auto;
    }
    .quick-order-modal.is-open .quick-order-modal__panel { transform: translateY(0); }
    .quick-order-modal__header,
    .quick-order-modal__body { padding: var(--sp-5); }

    /* ── New arrivals: 2 cards visible ── */
    .arrivals-track { -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
    .arrivals-track .product-card { width: calc(50% - var(--sp-2)); scroll-snap-align: start; }

    /* ── WhatsApp float: icon-only circle ── */
    .whatsapp-float {
        padding: 0;
        border-radius: 50%;
        width: 52px;
        height: 52px;
        justify-content: center;
    }
    .whatsapp-float span { display: none; }

    /* ── Promo banner ── */
    .promo-banner { min-height: 320px; }
    .promo-banner__content {
        margin-left: 0;
        max-width: 100%;
        padding: var(--sp-8) var(--sp-5);
    }
    .promo-banner__overlay { background: rgba(253,250,247,0.88); }

    /* ── Buttons ── */
    .btn--lg { padding: 0.875rem 1.5rem; }

    /* ── Page hero ── */
    .page-hero { padding: var(--sp-10) 0 var(--sp-6); }
    .page-hero__title { font-size: clamp(1.75rem, 6vw, 2.5rem); }

    /* ── Single post ── */
    .single-post__header { padding-top: var(--sp-8); }
    .single-post__title  { font-size: clamp(1.75rem, 6vw, 2.5rem); }

    /* ── Archive layout ── */
    .archive-layout   { grid-template-columns: 1fr; }
    .archive-sidebar  { display: none; }

    /* ── 404 ── */
    .error-404__actions { flex-direction: column; align-items: stretch; }
    .error-404__actions .btn { width: 100%; }
    .error-404__links-grid { grid-template-columns: repeat(2, 1fr); }

    /* ── Account dropdown: wider, full-viewport on small phones ── */
    .header-account__dropdown {
        /* Push it slightly left so it doesn't clip near the right edge */
        right: -8px;
        min-width: clamp(230px, 72vw, 280px);
    }
    .header-account__dropdown::before { right: 22px; }
}

/* ============================================================
   SMALL MOBILE — max 414px
   ============================================================ */
@media (max-width: 480px) {
    /* ── Account dropdown: full-width sheet ── */
    .header-account__dropdown {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        width: 100vw;
        max-width: 100vw;
        max-height: 80dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        border-radius: 0 0 var(--radius-xl) var(--radius-xl);
        border-left: none;
        border-right: none;
        border-top: 2px solid var(--clr-primary);
        box-shadow: 0 16px 48px rgba(0,0,0,.18);
    }
    .header-account__dropdown::before { display: none; }
    .header-account__dropdown a { padding: 13px 20px; font-size: .9375rem; }
    .header-account__user { padding: 14px 20px 16px; }
}

@media (max-width: 414px) {

    :root {
        --container-padding: 1rem;
    }

    /* Products */
    .products-grid      { gap: var(--sp-2); }
    .product-card__body { padding: var(--sp-3); }
    .product-card__name { font-size: 0.9375rem; }

    /* Hero */
    .hero-slide__title { font-size: 1.75rem; }

    /* Trust badges: hide description */
    .trust-badge__title { font-size: var(--fs-xs); }
    .trust-badge__desc  { display: none; }

    /* Category tiles: 2 columns compact */
    .cat-tile__name  { font-size: var(--fs-sm); }
    .cat-tile__count { display: none; }

    /* Section heading */
    .section-header__title { font-size: 1.5rem; }

    /* UGC */
    .ugc-grid { grid-template-columns: repeat(3, 1fr); gap: 3px; }

    /* Footer */
    .footer-main { padding-block: var(--sp-10); }
    .footer-tagline { max-width: 100%; }
    .newsletter-input-group { flex-direction: column; border-radius: var(--radius-lg); }
    .newsletter-btn   { border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: 0.875rem; }
    .newsletter-input { padding: 1rem; }

    /* Announcement bar */
    .announcement-bar__slide { font-size: 10px; }

    /* Error 404 links */
    .error-404__links-grid { grid-template-columns: repeat(2, 1fr); }

    /* About */
    .about-values       { grid-template-columns: 1fr; }
    .about-stats        { justify-content: center; gap: var(--sp-6); }
    .about-stat         { min-width: 120px; }
}

/* ============================================================
   VERY SMALL — max 360px
   ============================================================ */
@media (max-width: 360px) {
    :root { --container-padding: 0.875rem; }

    .products-grid { gap: var(--sp-2); }
    .hero-slide__title { font-size: 1.5rem; }
    .footer-grid { gap: var(--sp-6); }

    /* Stack cat tiles to 1 column on very small screens */
    .cat-grid { grid-template-columns: 1fr; }
    .cat-tile:first-child { grid-column: auto; aspect-ratio: 16/9; }
    .cat-tile { aspect-ratio: 3/2; }
}

/* ============================================================
   DESKTOP WIDE — min 1280px
   ============================================================ */
@media (min-width: 1280px) {
    .cat-grid       { grid-template-columns: repeat(4, 1fr); }
    .ugc-grid       { grid-template-columns: repeat(6, 1fr); }
    .instagram-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ============================================================
   EXTRA WIDE — min 1440px
   ============================================================ */
@media (min-width: 1440px) {
    .hero-slide__content {
        padding-left: 0;
        margin-left: calc((100% - var(--container-max)) / 2 + var(--container-padding));
    }
}

/* ============================================================
   TOUCH DEVICES — remove hover effects
   ============================================================ */
@media (hover: none) {
    .product-card:hover { transform: none; box-shadow: none; }
    .product-card__img--secondary { display: none; }
    .product-card__actions { opacity: 1; transform: none; }
    .cat-tile__cta { opacity: 1; transform: none; }
    .cat-tile__label { opacity: 1; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .hero-slider__track { transition: none; }
    .hero-slide__image  { transition: none; }
    .whatsapp-float     { animation: none; }
    .announcement-bar__slide { animation: none; white-space: normal; }
}