/**
 * Layout ficha producto — todos los temas (carga después del preset).
 *
 * Modos móvil (clase en .product-detail-wrapper):
 * - gallery-breadcrumb-title (default): Foto → Inicio/Tienda/Categoría → Título → precio
 * - breadcrumb-title-gallery: Inicio/Tienda/Categoría → Título → Foto → precio
 *
 * Desktop: siempre 2 columnas; título en columna derecha.
 */

/* Sin aire entre header fijo y galería */
body[class*="theme-"] .product-detail-wrapper.section,
body[class*="theme-"] .product-detail-wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

@media (max-width: 768px) {
    body[class*="theme-"] .product-detail-wrapper .product-detail-grid {
        gap: 8px !important;
    }

    body[class*="theme-"] .product-detail-wrapper .product-detail-image-col {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* Breadcrumb: una línea */
body[class*="theme-"] .product-detail-wrapper .product-breadcrumb {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
}

body[class*="theme-"] .product-detail-wrapper .product-breadcrumb a,
body[class*="theme-"] .product-detail-wrapper .product-breadcrumb span {
    display: inline !important;
    white-space: nowrap !important;
}

body[class*="theme-"] .product-detail-wrapper .product-breadcrumb .product-category {
    display: inline !important;
    margin-bottom: 0 !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

body[class*="theme-"] .product-detail-wrapper .product-breadcrumb .breadcrumb-sep {
    flex-shrink: 0 !important;
}

/* Desktop: breadcrumb arriba; título solo en columna derecha */
@media (min-width: 769px) {
    body[class*="theme-"] .product-detail-wrapper .product-breadcrumb--below {
        display: none !important;
    }

    body[class*="theme-"] .product-detail-wrapper .product-breadcrumb--top {
        display: flex !important;
    }

    body[class*="theme-"] .product-detail-wrapper .product-detail-title--prepend {
        display: none !important;
    }

    body[class*="theme-"] .product-detail-wrapper .product-detail-title--in-col {
        display: block !important;
    }
}

@media (max-width: 768px) {
    body[class*="theme-"] .product-detail-layout--gallery-breadcrumb-title .product-detail-grid,
    body[class*="theme-"] .product-detail-layout--breadcrumb-title-gallery .product-detail-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    body[class*="theme-"] .product-detail-layout--gallery-breadcrumb-title .product-detail-image-col,
    body[class*="theme-"] .product-detail-layout--breadcrumb-title-gallery .product-detail-image-col,
    body[class*="theme-"] .product-detail-layout--gallery-breadcrumb-title .product-detail-content-col,
    body[class*="theme-"] .product-detail-layout--breadcrumb-title-gallery .product-detail-content-col {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Modo A (default): Foto → breadcrumb → título */
    body[class*="theme-"] .product-detail-layout--gallery-breadcrumb-title .product-breadcrumb--top {
        display: none !important;
    }

    body[class*="theme-"] .product-detail-layout--gallery-breadcrumb-title .product-breadcrumb--below {
        display: flex !important;
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
        border-bottom: none !important;
    }

    body[class*="theme-"] .product-detail-layout--gallery-breadcrumb-title .product-detail-title--prepend {
        display: none !important;
    }

    body[class*="theme-"] .product-detail-layout--gallery-breadcrumb-title .product-detail-title--in-col {
        display: block !important;
    }

    body[class*="theme-"] .product-detail-layout--gallery-breadcrumb-title .product-detail-image-col {
        order: 1 !important;
    }

    body[class*="theme-"] .product-detail-layout--gallery-breadcrumb-title .product-detail-content-col {
        order: 2 !important;
    }

    /* Modo B: breadcrumb → título → foto */
    body[class*="theme-"] .product-detail-layout--breadcrumb-title-gallery.product-detail-wrapper {
        display: flex !important;
        flex-direction: column !important;
    }

    body[class*="theme-"] .product-detail-layout--breadcrumb-title-gallery .product-breadcrumb--top {
        display: flex !important;
        margin-bottom: 8px !important;
    }

    body[class*="theme-"] .product-detail-layout--breadcrumb-title-gallery .product-breadcrumb--below {
        display: none !important;
    }

    body[class*="theme-"] .product-detail-layout--breadcrumb-title-gallery .product-detail-title--prepend {
        display: block !important;
        font-size: 1.35rem !important;
        line-height: 1.3 !important;
        margin: 0 0 12px 0 !important;
        padding: 0 4px !important;
        font-weight: 700 !important;
    }

    body[class*="theme-"] .product-detail-layout--breadcrumb-title-gallery .product-detail-title--in-col {
        display: none !important;
    }

    body[class*="theme-"] .product-detail-layout--breadcrumb-title-gallery .product-detail-image-col {
        order: 1 !important;
    }

    body[class*="theme-"] .product-detail-layout--breadcrumb-title-gallery .product-detail-content-col {
        order: 2 !important;
    }
}

/* Compatibilidad con clase antigua */
@media (max-width: 768px) {
    body[class*="theme-"] .product-detail-layout--gallery-first .product-detail-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body[class*="theme-"] .product-detail-layout--gallery-first .product-breadcrumb--top {
        display: none !important;
    }

    body[class*="theme-"] .product-detail-layout--gallery-first .product-breadcrumb--below {
        display: flex !important;
    }

    body[class*="theme-"] .product-detail-layout--gallery-first .product-detail-title--prepend {
        display: none !important;
    }

    body[class*="theme-"] .product-detail-layout--gallery-first .product-detail-image-col {
        order: 1 !important;
    }

    body[class*="theme-"] .product-detail-layout--gallery-first .product-detail-content-col {
        order: 2 !important;
    }
}

/* Botón extra (PDF, enlace) — caja de compra + pie de ficha */
body[class*="theme-"] .product-extra-button-wrap,
body .product-extra-button-wrap {
    margin: 1rem 0 1.5rem;
    padding: 0;
}

body[class*="theme-"] .product-extra-button-wrap--buybox,
body .product-extra-button-wrap--buybox {
    margin: 0.5rem 0 0;
    width: 100%;
}

body[class*="theme-"] .product-extra-button-wrap--footer,
body .product-extra-button-wrap--footer {
    margin: 1.25rem 0 1.75rem;
}

/* El botón extra hereda la FORMA/tipografía del tema (usa .btn),
   y solo impone su COLOR propio configurado en Ajustes. Selectores muy específicos
   para ganarle a los overrides de color del tema (boutique, etc.). */
body[class*="theme-"] .product-detail-wrapper .product-detail-buy-box .product-extra-button,
body .product-detail-wrapper .product-detail-buy-box .product-extra-button,
body[class*="theme-"] .product-extra-button,
body .product-extra-button {
    text-decoration: none;
    color: var(--product-extra-button-text, #ffffff) !important;
    background: var(--product-extra-button-bg, var(--primary, #6366f1)) !important;
    background-color: var(--product-extra-button-bg, var(--primary, #6366f1)) !important;
    border-color: var(--product-extra-button-bg, var(--primary, #6366f1)) !important;
}

body[class*="theme-"] .product-extra-button--buybox,
body .product-extra-button--buybox {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

body[class*="theme-"] .product-detail-wrapper .product-detail-buy-box .product-extra-button:hover,
body .product-detail-wrapper .product-detail-buy-box .product-extra-button:hover,
body[class*="theme-"] .product-extra-button:hover,
body .product-extra-button:hover {
    text-decoration: none;
    color: var(--product-extra-button-text, #ffffff) !important;
    background: var(--product-extra-button-bg, var(--primary, #6366f1)) !important;
    background-color: var(--product-extra-button-bg, var(--primary, #6366f1)) !important;
    border-color: var(--product-extra-button-bg, var(--primary, #6366f1)) !important;
    filter: brightness(0.96);
}

body[class*="theme-"] .product-detail-wrapper .product-detail-buy-box .product-extra-button i,
body .product-detail-wrapper .product-detail-buy-box .product-extra-button i,
body[class*="theme-"] .product-extra-button i,
body .product-extra-button i {
    color: var(--product-extra-button-text, #ffffff) !important;
    opacity: 0.95;
}
