/* ==========================================================================
   FLYERSHOP PRO — RESPONSIVE
   Desktop grande → Desktop → Tablet → Móvil
   Mobile-first para las utilidades del núcleo; el resto se sobrescribe
   de mayor a menor breakpoint para heredar bien las reglas de components.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESKTOP GRANDE (>1440px) — respiración extra
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
    .fs-container { max-width: var(--fs-container-wide); }
    .fs-hero__inner { gap: var(--fs-sp-24); }
}

/* --------------------------------------------------------------------------
   2. DESKTOP ESTÁNDAR (1200px) — límite de columnas anchas
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .fs-grid--5 { grid-template-columns: repeat(4, 1fr); }
    .fs-footer__top { grid-template-columns: 1.4fr repeat(2, 1fr); }
    .fs-footer__brand { grid-column: 1 / -1; max-width: none; }
}

/* --------------------------------------------------------------------------
   3. TABLET (≤1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

    :root { --fs-header-h: 68px; }

    /* Header: se oculta el menú central, aparece la hamburguesa */
    .fs-header__inner { grid-template-columns: auto 1fr auto; }
    .fs-burger { display: flex; }
    .fs-nav { display: none; }
    .fs-account__menu { right: -10px; }

    /* Hero: una sola columna, mosaico debajo del texto */
    .fs-hero__inner { grid-template-columns: 1fr; text-align: left; }
    .fs-hero__showcase { height: 380px; margin-top: var(--fs-sp-10); }
    .fs-hero__content { max-width: 100%; }

    /* Rejillas: bajan de 4/5 a 3 columnas */
    .fs-grid--4,
    .fs-grid--5,
    .fs-el-products,
    ul.products { grid-template-columns: repeat(3, 1fr) !important; }

    .fs-categories__grid,
    .fs-el-categories { grid-template-columns: repeat(2, 1fr) !important; }

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

    /* Blog: la sidebar pasa a estar debajo del contenido */
    .fs-blog-layout { grid-template-columns: 1fr; }
    .fs-blog-sidebar { position: static; }

    /* Producto: la galería y el resumen se apilan */
    .fs-product__layout { grid-template-columns: 1fr; }
    .fs-product__summary { position: static; }

    /* Checkout: una columna, el resumen queda arriba */
    .woocommerce-checkout .fs-woo > .fs-container { grid-template-columns: 1fr; }
    #order_review { position: static; order: -1; }

    /* Mi cuenta: navegación arriba en horizontal */
    .woocommerce-account .woocommerce { grid-template-columns: 1fr; }
    .fs-account-nav { position: static; }
    .fs-account-nav__list { flex-direction: row; flex-wrap: wrap; }
    .fs-account-nav__list li a { padding: 9px 14px; }

    /* Contacto y «sobre nosotros» */
    .fs-contact-layout,
    .fs-about-split { grid-template-columns: 1fr; }
    .fs-about-split__media { order: -1 !important; }

    /* Footer: 3 columnas */
    .fs-footer__top { grid-template-columns: repeat(2, 1fr); gap: var(--fs-sp-8); }
    .fs-footer__brand { grid-column: 1 / -1; }

    .fs-post-featured { grid-template-columns: 1fr; }
    .fs-post-nav { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   4. TABLET PEQUEÑA / MÓVIL GRANDE (≤768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    :root { --fs-gutter: 20px; --fs-header-h: 64px; }

    body { font-size: 14.5px; }

    .fs-topbar__inner span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

    /* Header derecho: prioriza carrito y usuario, buscador colapsa a icono */
    .fs-action__kbd { display: none; }
    .fs-header__col--right { gap: 2px; }

    /* Grids a 2 columnas */
    .fs-grid--3,
    .fs-grid--4,
    .fs-grid--5,
    .fs-el-products,
    ul.products { grid-template-columns: repeat(2, 1fr) !important; }

    .fs-values-grid { grid-template-columns: 1fr; }

    /* Hero */
    .fs-hero { padding-block: var(--fs-sp-16) var(--fs-sp-10); min-height: auto; }
    .fs-hero__actions { flex-direction: column; align-items: stretch; }
    .fs-hero__actions .fs-btn { width: 100%; }
    .fs-hero__stats { gap: var(--fs-sp-6); flex-wrap: wrap; }
    .fs-hero__showcase { height: 320px; }
    .fs-hero__card--3 { display: none; }

    /* Cabeceras de sección: se apilan y centran */
    .fs-section-head { flex-direction: column; align-items: flex-start; gap: var(--fs-sp-4); }
    .fs-section-head--center { align-items: center; }

    /* Testimonios y stats */
    .fs-el-testimonials,
    .fs-testimonials .fs-grid--3 { grid-template-columns: 1fr !important; }
    .fs-stats { grid-template-columns: repeat(2, 1fr); }
    .fs-stat + .fs-stat::before { display: none; }

    /* Newsletter */
    .fs-newsletter__form { flex-direction: column; }
    .fs-newsletter__form .fs-btn { width: 100%; }

    /* Promo banner */
    .fs-promo__content { max-width: 100%; }
    .fs-promo__title { font-size: var(--fs-text-xl); }

    /* Footer: 2 columnas */
    .fs-footer__top { grid-template-columns: 1fr 1fr; gap: var(--fs-sp-6); }
    .fs-footer__bottom { flex-direction: column; align-items: flex-start; }

    /* Producto: precio y botón en fila completa */
    .fs-product__summary form.cart { flex-direction: column; align-items: stretch; }
    .fs-product__summary .quantity { justify-content: center; }
    .fs-specs { grid-template-columns: 1fr; }

    /* Checkout */
    .woocommerce-billing-fields__field-wrapper,
    .woocommerce-additional-fields__field-wrapper,
    .fs-form-grid { grid-template-columns: 1fr; }

    /* Blog */
    .fs-blog-grid { grid-template-columns: 1fr; }
    .fs-single__title { font-size: var(--fs-text-2xl); }

    .fs-contact-form { padding: var(--fs-sp-6); }

    .fs-page-header__title { font-size: var(--fs-text-2xl); }
}

/* --------------------------------------------------------------------------
   5. MÓVIL (≤480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {

    :root { --fs-gutter: 16px; }

    .fs-hero__title { font-size: clamp(2.25rem, 11vw, 3rem); }
    .fs-hero__stats { grid-template-columns: repeat(3, 1fr); display: grid; gap: var(--fs-sp-3); }
    .fs-hero__stat { text-align: left; }

    .fs-grid--2,
    .fs-grid--3,
    .fs-grid--4,
    .fs-grid--5,
    .fs-el-products,
    .fs-el-categories,
    .fs-categories__grid,
    ul.products { grid-template-columns: 1fr !important; }

    .fs-carousel__item { width: 78vw; }

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

    .fs-footer__top { grid-template-columns: 1fr; }
    .fs-footer__legal { gap: var(--fs-sp-3); }

    .fs-404__code { font-size: 96px; }
    .fs-404__actions { flex-direction: column; }
    .fs-404__actions .fs-btn { width: 100%; }

    .fs-account-nav__list { flex-direction: column; }

    .fs-drawer__panel { width: 100%; }

    .fs-spotlight { padding-inline: var(--fs-sp-3); }
    .fs-spotlight__panel { max-height: 82vh; }
    .fs-spotlight__footer { flex-wrap: wrap; row-gap: 6px; }
    .fs-spotlight__brand { margin-left: 0; width: 100%; text-align: center; }
}

/* --------------------------------------------------------------------------
   6. PANTALLAS MUY PEQUEÑAS (≤360px)
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
    .fs-logo__img, .custom-logo { height: 32px; }
    .fs-hero__badge { font-size: 11px; padding: 6px 12px; }
    .fs-btn--lg { --btn-py: 14px; --btn-px: 24px; --btn-fz: var(--fs-text-base); }
}

/* --------------------------------------------------------------------------
   7. IMPRESIÓN
   -------------------------------------------------------------------------- */
@media print {
    .fs-header, .fs-footer, .fs-topbar, .fs-spotlight, .fs-drawer, .fs-toast-wrap { display: none !important; }
    body { background: #fff; color: #000; }
}