/**
 * Temas de interfaz aplicados a la tienda (recursosworship.com).
 *
 * Regla: solo colores y acentos. "Recursos Worship" (original) conserva el aspecto
 * actual de la tienda (salvo el logo legible en modo claro). Los temas VIP remapean las
 * variables de Woodmart y del sidebar a los tokens globales (rw-themes.css).
 * Los colores funcionales (etiqueta Gratis, estados, banderas, avisos) no cambian.
 */


html[data-rw-theme]:not([data-rw-theme="original"]) body {
    --wd-primary-color: var(--rw-accent);
    --btn-accented-bgcolor: var(--rw-accent);
    --btn-accented-bgcolor-hover: var(--rw-accent-hover);
    --btn-accented-color: var(--rw-accent-ink);
    --btn-accented-color-hover: var(--rw-accent-ink);

    --rw-sidebar-bg-surface: var(--rw-bg);
    --rw-sidebar-border: var(--rw-border);
    --rw-sidebar-text: var(--rw-text-3);
    --rw-sidebar-text-hover: var(--rw-text);
    --rw-sidebar-icon: var(--rw-text-2);
    --rw-sidebar-icon-hover: var(--rw-text);
    --rw-sidebar-active-bg: var(--rw-active);
    --rw-sidebar-site-name: var(--rw-text);
    --rw-sidebar-toggle-border: var(--rw-border);
    --rw-sidebar-user-bg-hover: var(--rw-hover);
    --rw-sidebar-popover-bg: var(--rw-surface-3);
    --rw-sidebar-popover-border: var(--rw-border);
    --rw-sidebar-popover-text: var(--rw-text-2);
    --rw-sidebar-popover-text-muted: var(--rw-text-3);
    --rw-sidebar-popover-hover: var(--rw-hover);
    --rw-sidebar-popover-divider: var(--rw-border);
}

html[data-rw-theme]:not([data-rw-theme="original"])[data-rw-mode="dark"] body {
    --wd-main-bgcolor: var(--rw-bg);
    --wd-form-bg: var(--rw-surface-2);
    background-color: var(--rw-bg);
}

html[data-rw-theme]:not([data-rw-theme="original"])[data-rw-mode="dark"] body .whb-general-header,
html[data-rw-theme]:not([data-rw-theme="original"])[data-rw-mode="dark"] body .whb-main-header {
    background-color: var(--rw-bg);
}

html[data-rw-theme]:not([data-rw-theme="original"])[data-rw-mode="light"] body {
    --rw-sidebar-page-bg: var(--rw-bg);
}

/* ==========================================================================
   Modo claro de la tienda = mismo sistema que la Cuenta (todos los temas).
   Solo colores: fondo cálido, superficies blancas, texto casi negro, bordes
   de 1 px y el acento del tema en botones y enlaces activos. El modo oscuro
   no cambia.
   ========================================================================== */

html[data-rw-mode="light"] body {
    --wd-main-bgcolor: var(--rw-bg);
    --wd-text-color: var(--rw-text-2);
    --wd-title-color: var(--rw-text);
    --wd-widget-title-color: var(--rw-text);
    --wd-entities-title-color: var(--rw-text);
    --wd-entities-title-color-hover: var(--rw-text-2);
    --wd-link-color: var(--rw-text);
    --wd-link-color-hover: var(--rw-accent);
    --wd-primary-color: var(--rw-accent);
    --wd-form-bg: var(--rw-surface);
    --wd-form-color: var(--rw-text);
    --wd-form-brd-color: var(--rw-border-strong);
    --wd-form-brd-color-focus: var(--rw-accent);
    --wd-form-placeholder-color: var(--rw-text-3);
    --btn-accented-bgcolor: var(--rw-accent);
    --btn-accented-bgcolor-hover: var(--rw-accent-hover);
    --btn-accented-color: var(--rw-accent-ink);
    --btn-accented-color-hover: var(--rw-accent-ink);
    --btn-default-bgcolor: var(--rw-surface-2);
    --btn-default-bgcolor-hover: var(--rw-hover);
    --btn-default-color: var(--rw-text);
    --btn-default-color-hover: var(--rw-text);

    --rw-sidebar-bg-surface: var(--rw-bg);
    --rw-sidebar-border: var(--rw-border);
    --rw-sidebar-text: var(--rw-text-3);
    --rw-sidebar-text-hover: var(--rw-text);
    --rw-sidebar-icon: var(--rw-text-2);
    --rw-sidebar-icon-hover: var(--rw-text);
    --rw-sidebar-active-bg: var(--rw-active);
    --rw-sidebar-shadow: none;
    --rw-sidebar-page-bg: var(--rw-bg);
    --rw-sidebar-user-bg: transparent;
    --rw-sidebar-user-border: transparent;
    --rw-sidebar-user-bg-hover: var(--rw-hover);
    --rw-sidebar-popover-bg: var(--rw-surface);
    --rw-sidebar-popover-border: var(--rw-border);
    --rw-sidebar-popover-shadow: none;
    --rw-sidebar-popover-text: var(--rw-text-2);
    --rw-sidebar-popover-text-muted: var(--rw-text-3);
    --rw-sidebar-popover-hover: var(--rw-hover);
    --rw-sidebar-popover-divider: var(--rw-border);
    background-color: var(--rw-bg);
    color: var(--rw-text-2);
}

html[data-rw-mode="light"] .rw-sidebar {
    border-right: 1px solid var(--rw-border);
}

html[data-rw-mode="light"] body.rw-has-sidebar::before {
    background: var(--rw-bg);
    border-right-color: var(--rw-border);
}

/* Cabecera: mismo fondo que la página, separada por una línea fina. */
html[data-rw-mode="light"] body .whb-general-header,
html[data-rw-mode="light"] body .whb-main-header,
html[data-rw-mode="light"] body .whb-header-bottom {
    background-color: var(--rw-bg) !important;
    box-shadow: none !important;
}

html[data-rw-mode="light"] body .whb-main-header {
    border-bottom: 1px solid var(--rw-border);
}

html[data-rw-mode="light"] body .main-page-wrapper,
html[data-rw-mode="light"] body .website-wrapper {
    background-color: var(--rw-bg);
}

html[data-rw-mode="light"] body .footer-container {
    background-color: var(--rw-bg) !important;
    border-top: 1px solid var(--rw-border);
    color: var(--rw-text-2);
}

/* Ficha de producto */
html[data-rw-mode="light"] body .product_title,
html[data-rw-mode="light"] body .wd-entities-title {
    color: var(--rw-text);
}

html[data-rw-mode="light"] body .woocommerce-breadcrumb,
html[data-rw-mode="light"] body .woocommerce-breadcrumb a,
html[data-rw-mode="light"] body .product_meta,
html[data-rw-mode="light"] body .product_meta a {
    color: var(--rw-text-3);
}

html[data-rw-mode="light"] body .woocommerce-breadcrumb .breadcrumb-last,
html[data-rw-mode="light"] body .product_meta > span > span:first-child,
html[data-rw-mode="light"] body .product_meta .meta-label {
    color: var(--rw-text);
}

/* Chips de formato, resolución y peso */
html[data-rw-mode="light"] body .product-status-bar .status-bar-item {
    border: 1px solid var(--rw-border);
    background: var(--rw-surface-2) !important;
    color: var(--rw-text-2) !important;
}

html[data-rw-mode="light"] body .product-status-bar .status-bar-item * {
    color: inherit !important;
}

/* Icono pintado con el acento del tema: la imagen original sirve de máscara. */
html[data-rw-mode="light"] body .product-status-bar .status-bar-item {
    display: inline-flex;
    align-items: center;
}

html[data-rw-mode="light"] body .product-status-bar .status-bar-item img.icon {
    display: none !important;
}

html[data-rw-mode="light"] body .product-status-bar .status-bar-item::before {
    flex: 0 0 auto;
    width: 15px;
    height: 18px;
    margin-right: 8px;
    background: var(--rw-accent);
    -webkit-mask: var(--rw-status-icon) center / contain no-repeat;
    mask: var(--rw-status-icon) center / contain no-repeat;
    content: "";
}

html[data-rw-mode="light"] body .product-status-bar .status-bar-item:has(img[src*="FILE-FORMAT"]) {
    --rw-status-icon: url("https://recursosworship.com/wp-content/uploads/2024/07/FILE-FORMAT-BLACK.svg");
}

html[data-rw-mode="light"] body .product-status-bar .status-bar-item:has(img[src*="SIZE-BLACK"]) {
    --rw-status-icon: url("https://recursosworship.com/wp-content/uploads/2024/07/SIZE-BLACK.svg");
}

html[data-rw-mode="light"] body .product-status-bar .status-bar-item:has(img[src*="SIZE-MB"]) {
    --rw-status-icon: url("https://recursosworship.com/wp-content/uploads/2024/07/SIZE-MB-BLACK2.svg");
}

html[data-rw-mode="light"] body .product-status-bar .status-bar-item:not(:has(img))::before {
    display: none;
}

/* Botones de descarga (S/M/L/XL): acento del tema, como el botón principal de la Cuenta. */
html[data-rw-mode="light"] body .yith-wcmbs-download-button {
    border-color: transparent !important;
    background: var(--rw-accent) !important;
    color: var(--rw-accent-ink) !important;
    box-shadow: none !important;
}

html[data-rw-mode="light"] body .yith-wcmbs-download-button:hover {
    background: var(--rw-accent-hover) !important;
}

html[data-rw-mode="light"] body .yith-wcmbs-download-button * {
    color: inherit !important;
}

/* Botones secundarios (reportar recurso, etc.) */
html[data-rw-mode="light"] body .rw-resource-report-button,
html[data-rw-mode="light"] body .single-product-page .button:not(.alt):not(.single_add_to_cart_button) {
    border: 1px solid var(--rw-border) !important;
    background: var(--rw-surface-2) !important;
    color: var(--rw-text) !important;
    box-shadow: none !important;
}

html[data-rw-mode="light"] body .rw-resource-report-button:hover {
    background: var(--rw-hover) !important;
}

html[data-rw-mode="light"] body .rw-resource-report-button:disabled,
html[data-rw-mode="light"] body .rw-resource-report-button[disabled] {
    color: var(--rw-text-3) !important;
}

/* Tarjetas de producto y separadores */
html[data-rw-mode="light"] body .single-product-page hr,
html[data-rw-mode="light"] body .product_meta {
    border-color: var(--rw-border);
}

/* ==========================================================================
   Descripción junto a la vista previa de vídeo: tarjeta plana (claro y oscuro).
   Sin degradado, sin sombra, sin barra lateral ni comillas decorativas.
   ========================================================================== */

html[data-rw-mode] body #product-description-container {
    position: relative;
    padding: 20px 22px !important;
    border: 1px solid var(--rw-border) !important;
    border-radius: 14px !important;
    background: var(--rw-surface) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-rw-mode] body #product-description-container::before,
html[data-rw-mode] body #product-description-container::after {
    display: none !important;
    content: none !important;
}

html[data-rw-mode] body #product-description-container .short-description,
html[data-rw-mode] body #product-description-container .full-description {
    color: var(--rw-text-2) !important;
    font-size: 15px;
    line-height: 1.65;
}

html[data-rw-mode] body #product-description-container .short-description p,
html[data-rw-mode] body #product-description-container .full-description p {
    margin: 0 0 12px;
    color: inherit !important;
}

html[data-rw-mode] body #product-description-container .short-description p:last-child,
html[data-rw-mode] body #product-description-container .full-description p:last-child {
    margin-bottom: 0;
}

html[data-rw-mode] body #product-description-container .full-description strong,
html[data-rw-mode] body #product-description-container .full-description h2,
html[data-rw-mode] body #product-description-container .full-description h3 {
    color: var(--rw-text) !important;
}

/* «Ver más / Ver menos»: botón secundario pequeño, como en la Cuenta. */
html[data-rw-mode] body #product-description-container .toggle-description {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    margin-top: 16px !important;
    padding: 0 14px !important;
    border: 1px solid var(--rw-border) !important;
    border-radius: 999px !important;
    background: var(--rw-surface-2) !important;
    box-shadow: none !important;
    color: var(--rw-text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: background-color .15s ease, border-color .15s ease;
}

html[data-rw-mode] body #product-description-container .toggle-description:hover {
    border-color: var(--rw-border-strong) !important;
    background: var(--rw-hover) !important;
    transform: none !important;
}

html[data-rw-mode] body #product-description-container .toggle-description::after {
    width: 7px;
    height: 7px;
    margin: -3px 0 0 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    background: none !important;
    color: var(--rw-text-3);
    transform: rotate(45deg);
    content: "" !important;
}

/* Vista previa + descripción: menos separación, arriba alineadas y vídeo fijo al hacer scroll. */
html[data-rw-mode] body #product-description-container .full-description,
html[data-rw-mode] body #product-description-container .short-description {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

@media (min-width: 900px) {
    html[data-rw-mode] body .video-lp-container.video-lp-block-1 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 32px !important;
        overflow: visible !important; /* overflow:hidden impedía el sticky */
    }

    html[data-rw-mode] body .video-lp-block-1 > .video-lp-column {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    html[data-rw-mode] body .video-lp-block-1 #product-description-container {
        margin-top: 0 !important;
    }

    html[data-rw-mode] body .video-lp-block-1 > .video-lp-column:first-child {
        position: sticky;
        top: calc(var(--wd-admin-bar-h, 0px) + 96px);
        align-self: start;
    }
}

/* Sin desplegar «Ver más»: vídeo y descripción centrados en vertical; desplegado: alineados arriba (vídeo fijo). */
@media (min-width: 900px) {
    html[data-rw-mode] body .video-lp-container.video-lp-block-1:has(.full-description[style*="none"]) {
        align-items: center !important;
    }

    html[data-rw-mode] body .video-lp-block-1:has(.full-description[style*="none"]) > .video-lp-column:first-child {
        align-self: center;
    }
}

/* ==========================================================================
   Lista Formato / Resolución / Tamaño (plantilla de vídeo): mismos iconos que
   los chips de la ficha, en el acento del tema, sobre una tarjeta plana.
   ========================================================================== */

html[data-rw-mode] body .bl7-box-info {
    padding: 8px 18px !important;
    border: 1px solid var(--rw-border) !important;
    border-radius: 14px !important;
    background: var(--rw-surface) !important;
    box-shadow: none !important;
}

html[data-rw-mode] body .bl7-box-info ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

html[data-rw-mode] body .bl7-box-info li {
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin: 0 !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--rw-border);
    color: var(--rw-text-2) !important;
    font-size: 14px;
}

html[data-rw-mode] body .bl7-box-info li:last-child {
    border-bottom: 0;
}

html[data-rw-mode] body .bl7-box-info li span {
    color: inherit !important;
}

html[data-rw-mode] body .bl7-box-info li img {
    display: none !important;
}

html[data-rw-mode] body .bl7-box-info li::before {
    flex: 0 0 auto;
    width: 16px;
    height: 18px;
    background: var(--rw-accent);
    -webkit-mask: var(--rw-status-icon) center / contain no-repeat;
    mask: var(--rw-status-icon) center / contain no-repeat;
    content: "";
}

/* Formato → archivo · Resolución → expandir · Tamaño → peso (igual que los chips). */
html[data-rw-mode] body .bl7-box-info li:nth-child(1) {
    --rw-status-icon: url("https://recursosworship.com/wp-content/uploads/2024/07/FILE-FORMAT-BLACK.svg");
}

html[data-rw-mode] body .bl7-box-info li:nth-child(2) {
    --rw-status-icon: url("https://recursosworship.com/wp-content/uploads/2024/07/SIZE-BLACK.svg");
}

html[data-rw-mode] body .bl7-box-info li:nth-child(3) {
    --rw-status-icon: url("https://recursosworship.com/wp-content/uploads/2024/07/SIZE-MB-BLACK2.svg");
}

/* Los chips también en oscuro: mismo icono en acento sobre píldora plana. */
html[data-rw-mode="dark"] body .product-status-bar .status-bar-item {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--rw-border);
    background: var(--rw-surface-2) !important;
    color: var(--rw-text-2) !important;
}

html[data-rw-mode="dark"] body .product-status-bar .status-bar-item img.icon {
    display: none !important;
}

html[data-rw-mode="dark"] body .product-status-bar .status-bar-item::before {
    flex: 0 0 auto;
    width: 15px;
    height: 18px;
    margin-right: 8px;
    background: var(--rw-accent-light);
    -webkit-mask: var(--rw-status-icon) center / contain no-repeat;
    mask: var(--rw-status-icon) center / contain no-repeat;
    content: "";
}

html[data-rw-mode="dark"] body .product-status-bar .status-bar-item:has(img[src*="FILE-FORMAT"]) {
    --rw-status-icon: url("https://recursosworship.com/wp-content/uploads/2024/07/FILE-FORMAT-BLACK.svg");
}

html[data-rw-mode="dark"] body .product-status-bar .status-bar-item:has(img[src*="SIZE-BLACK"]) {
    --rw-status-icon: url("https://recursosworship.com/wp-content/uploads/2024/07/SIZE-BLACK.svg");
}

html[data-rw-mode="dark"] body .product-status-bar .status-bar-item:has(img[src*="SIZE-MB"]) {
    --rw-status-icon: url("https://recursosworship.com/wp-content/uploads/2024/07/SIZE-MB-BLACK2.svg");
}

html[data-rw-mode="dark"] body .product-status-bar .status-bar-item:not(:has(img))::before {
    display: none;
}

/* Lista de especificaciones: sin efecto hover; icono blanco en oscuro y negro en claro. */
html[data-rw-mode] body .bl7-box-info li,
html[data-rw-mode] body .bl7-box-info li:hover {
    transform: none !important;
    transition: none !important;
    color: var(--rw-text-2) !important;
}

html[data-rw-mode="dark"] body .bl7-box-info li::before {
    background: #fff;
}

html[data-rw-mode="light"] body .bl7-box-info li::before {
    background: #000;
}

/* Chips de la ficha: icono negro en claro y blanco en oscuro (como la lista de especificaciones). */
html[data-rw-mode="light"] body .product-status-bar .status-bar-item::before {
    background: #000;
}

html[data-rw-mode="dark"] body .product-status-bar .status-bar-item::before {
    background: #fff;
}

/* Quick view (popup de Woodmart): columna estrecha → chips compactos en una sola línea
   cada uno, que bajan enteros a la siguiente fila si no caben. */
html body .popup-quick-view .product-status-bar {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
    margin: 16px 0 !important;
}

html body .popup-quick-view .product-status-bar .status-bar-item {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 7px 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}

html body .popup-quick-view .product-status-bar .status-bar-item .text {
    white-space: nowrap;
}

html body .popup-quick-view .product-status-bar .status-bar-item::before {
    width: 13px !important;
    height: 15px !important;
    margin-right: 7px !important;
}