/* =========================================================
   CANARYMX · RESPONSIVE GLOBAL
   Solo reglas que afectan a varias áreas del sitio.
   El responsive específico permanece junto a cada componente.
   ========================================================= */

/* =========================================================
   9. RESPONSIVE
   ========================================================= */

@media (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }
}

@media (max-width: 768px) {

    :root {
        --canarymx-header-height: 64px;
        --canarymx-header-height-scrolled: 56px;
    }

    /* Mobile: scroll normal, sin snap entre secciones. */
    html,
    body {
        scroll-snap-type: none !important;
    }

    html {
        scroll-padding-top: var(--canarymx-header-height-scrolled);
    }

    .canarymx-section {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;

        scroll-snap-align: none !important;
        scroll-snap-stop: normal !important;
        scroll-margin-top: var(--canarymx-header-height-scrolled);
    }

    /* Los backgrounds fijos pueden dar problemas en móvil. */
    body.woocommerce-page,
    body.tax-product_cat,
    body.post-type-archive-product,
    body.single-product {
        background-attachment: scroll !important;
    }

    /* Catálogo y tienda. */
    .woocommerce-page .site-content,
    body.single-product .site-content {
        padding-top: calc(var(--canarymx-header-height-scrolled) + 20px);
        padding-bottom: 40px;
    }

    .woocommerce-page .site-main,
    body.single-product .site-main {
        padding: 20px 16px 28px !important;
        border-radius: 0;
    }

    .woocommerce-page .widget {
        border-radius: 7px;
    }

    .woocommerce-page .woocommerce-products-header__title,
    .woocommerce-page h1.page-title {
        font-size: 42px !important;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 13px !important;
    }

    /* Ficha individual. */
    .single-product .product_title {
        font-size: 38px !important;
    }

    .single-product .woocommerce-tabs ul.tabs li {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}