/*
Theme Name: ExS Child
Theme URI: https://exsthemewp.com/demo/
Template: exs
Author: the ExS team
Author URI: https://exsthemewp.com/about/
Description: ExS theme is a fastest and smallest multipurpose Gutenberg compatible highly customizable theme without 3rd party dependencies. It is designed to have 100% Google Page and LightHouse speed. It has an extra small size of CSS (70kB) and JS (3kB) assets, 100% SEO optimised and valid code and it is 100% mobile friendly. It also has a WooCommerce and Easy Digital Downloads (EDD) plugin support so it will be perfect solution for your online store and e-commerce business. bbPress extended support makes ExS theme perfect for your forum. BuddyPress and Ultimate member support will help to create your social network with ExS theme. WP Job manager and Simple Job Board support will help you to create your job board. The Events Calendar advanced support will help you to create your events site. LearnPress plugin advanced support will help you to create a online courses and online school site. It has unlimited color options, headers and footers layouts, 15+ blog layouts, separate layouts for each category and many more super useful features that you can set up directly in your Customizer with live preview. ExS theme has builtin multiple page templates to perfectly work with any page builder such as Elementor, Beaver Builder, WPBackery, Brizy etc. ExS uses WordPress starter content feature so you can setup your pages immediately after WordPress and theme installation by simply going to Customizer and publish your changes. Theme Demo: https://exsthemewp.com/demo/.
Tags: blog,e-commerce,news,buddypress,custom-background,custom-colors,custom-logo,custom-menu,custom-header,editor-style,featured-images,footer-widgets,full-width-template,sticky-post,theme-options,threaded-comments,block-patterns,block-styles,wide-blocks,left-sidebar,right-sidebar,one-column,two-columns,grid-layout,microformats,post-formats,translation-ready
Version: 2.5.8.1759958601
Updated: 2025-10-08 21:23:21

*/

/* ========================================================= */
/* --- WOOCOMMERCE CSS V9.3: CORRECCIÓN DE VISIBILIDAD --- */
/* ========================================================= */

/* 1. IMPORTACIÓN DE LA FUENTE QUICKSAND */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap');

body, .woocommerce {
    font-family: 'Quicksand', sans-serif !important;
}

:root {
    --wc-accent-blue: #2563EB;
    --wc-accent-dark: #1E40AF; 
    --wc-shadow-color: rgba(37, 99, 235, 0.4);
    --wc-text-dark: #1F2937;
    --wc-subtitle-color: #93C5FD;
    --wc-header-bg: #EFF6FF;
    --wc-total-color: #000000;
    --wc-old-price-color: #6B7280;
    --wc-sale-color: #EF4444;
}

/* --- ESTRUCTURA BASE (GLOBAL PARA TODOS LOS PRODUCTOS) --- */

/* A. OCULTAR LA GALERÍA ORIGINAL */
.woocommerce div.product div.images {
    display: none !important;
}

/* B. PREPARAR EL CONTENEDOR PRINCIPAL */
.woocommerce div.product {
    position: relative !important;
    display: flex !important; /* Usamos Flexbox para mayor control */
    flex-wrap: wrap !important;
    min-height: 500px !important; /* Altura mínima para que quepa la imagen */
}

/* C. EMPUJAR EL RESUMEN (TEXTO) A LA DERECHA */
.woocommerce div.product .summary {
    width: 50% !important;
    margin-left: 50% !important; /* Deja libre el 50% izquierdo */
    padding-left: 30px !important;
    box-sizing: border-box !important;
    z-index: 20; /* El texto va encima de todo */
}

/* D. CREAR EL HUECO PARA LA IMAGEN EN EL LADO IZQUIERDO
   (Esto crea el espacio, la imagen específica se carga abajo por ID) */
.woocommerce div.product::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 45%; /* Ocupa casi la mitad izquierda */
    height: 100%;
    z-index: 10; /* Asegura que se vea */
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
}

/* --- ASIGNACIÓN DE IMÁGENES POR ID (ESPECÍFICO) --- */

/* 1. PLAN LIGHT (ID: 5574) -> Muestra imagen 2.png */
.post-5574.product::before {
    background-image: url('https://dokter.com.mx/wp-content/uploads/2025/12/2.png') !important;
}

/* 2. PLAN PRO (CAMBIAR ID) -> Muestra imagen 3.png 
   Busca el ID en la URL de editar producto (post=XXXX) y ponlo abajo en lugar de 99999 */
.post-5591.product::before {
    background-image: url('https://dokter.com.mx/wp-content/uploads/2025/12/3.png') !important;
}

/* 3. PLAN PLUS (CAMBIAR ID) -> Muestra imagen 4.png 
   Busca el ID en la URL de editar producto (post=XXXX) y ponlo abajo en lugar de 88888 */
.post-5593.product::before {
    background-image: url('https://dokter.com.mx/wp-content/uploads/2025/12/4.png') !important;
}


/* --- RESTO DE ESTILOS (PRECIOS, OFERTAS, NOTICES) --- */

/* Metadatos ocultos */
.woocommerce div.product .product_meta {
    display: none !important;
}

/* Precios */
.woocommerce div.product p.price del, .woocommerce div.product span.price del {
    color: var(--wc-old-price-color) !important; 
    font-size: 1.1em !important; 
}
.woocommerce div.product p.price ins, .woocommerce div.product span.price ins {
    font-size: 1.8em !important; 
    font-weight: 700 !important;
    color: var(--wc-total-color) !important; 
}

/* Etiqueta Oferta */
.woocommerce span.onsale {
    background-color: var(--wc-sale-color) !important;
    color: #FFFFFF !important; 
    border-radius: 8px !important; 
    padding: 8px 15px !important; 
    font-weight: 700 !important;
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4); 
    z-index: 30; /* Encima de la imagen */
}

/* Notificaciones y Cupón */
.woocommerce-info:contains("cupón") {
    background-color: var(--wc-accent-blue) !important; 
    color: #FFFFFF !important; 
    border-left-color: #FFFFFF !important; 
    font-weight: 400 !important; 
}
.woocommerce-info:contains("cupón") strong:first-child,
.woocommerce-info:contains("cupón") b:first-child {
    font-weight: 700 !important; 
    color: #FFFFFF !important;
}
.woocommerce-info:contains("cupón") a {
    color: #93C5FD !important; 
    font-weight: 500 !important; 
    text-decoration: underline;
}
.woocommerce-message, 
.woocommerce-error, 
.woocommerce-info {
    padding: 15px 20px 15px 55px !important; 
    border-radius: 8px; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Botones y Tablas */
.woocommerce a.button.alt, .woocommerce button.button.alt {
    background-color: var(--wc-accent-blue) !important; 
    border-radius: 10px !important; 
    padding: 14px 30px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
}
#order_review table.shop_table tr.order-total th, 
#order_review table.shop_table tr.order-total td {
    color: var(--wc-text-dark) !important; 
}
.woocommerce table.shop_table th {
    background-color: var(--wc-header-bg) !important; 
    color: var(--wc-text-dark) !important; 
}