/*
 * Custom style goes here.
 * A template should always ship with an empty custom.css
 */
/* ==========================================================================
   OPTIMIZACIÓN DE ESTILOS: VENTANAS LATERALES (CARRITO Y CUENTA)
   ========================================================================== */

/* 1. CONTENEDOR PRINCIPAL (Fondo Gris Oscuro para ambas ventanas) */


/* ==========================================================================
   DISEÑO HORIZONTAL CON COLORES INVERTIDOS (ANTI-RECUADROS BLANCOS)
   ========================================================================= */

/* 1. Alineación Horizontal del Contenedor Principal */
.product-variants-item ul.type-radio {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important; 
    gap: 6px !important;            
    padding: 0 !important;
    list-style: none !important;
    margin-top: 6px !important;
    width: 100% !important;
}

/* Fuerza a los elementos de la lista a ponerse seguidos */
.product-variants-item ul.type-radio li {
    display: inline-flex !important; 
    width: auto !important;          
    margin: 0 !important;
}

/* 2. El Contenedor del Botón: ESTADO NORMAL (FONDO OSCURO SIN SOMBRAS) */
.product-variants-item ul.type-radio .input-container {
    position: relative !important;  
    display: inline-block !important;
    width: auto !important;         
    max-width: max-content !important; 
    padding: 4px 10px !important;   
    font-size: 12px !important;     
    font-family: "Roboto", sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.2em !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important; 
    color: #ffffff !important;           /* Texto blanco */
    background-color: #313537 !important;/* Fondo carbón */
    background: #313537 !important;       /* Refuerzo para anular otros fondos */
    border: 1px solid #313537 !important; 
    border-radius: 0px !important;  
    transition: all 0.2s ease !important;
    text-align: center !important;
    cursor: pointer !important;
    min-width: 35px !important;     
    box-shadow: none !important;         /* ELIMINA RECUADROS O SOMBRAS OCULTAS */
    outline: none !important;
}

/* 3. La Capa de Vidrio Invisible (Mantiene el clic funcional) */
.product-variants-item ul.type-radio .input-radio {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    opacity: 0 !important;          
    cursor: pointer !important;
    z-index: 2 !important;          
}

/* 4. El Texto del Botón por defecto (COMPLETAMENTE LIMPIO DE FONDOS) */
.product-variants-item ul.type-radio .radio-label,
.product-variants-item ul.type-radio .input-container span {
    position: relative !important;
    z-index: 1 !important;          
    pointer-events: none !important; 
    color: #ffffff !important;           /* Texto blanco obligado */
    background: transparent !important;  /* ELIMINA EL CUADRO BLANCO INTERNO */
    background-color: transparent !important;
    box-shadow: none !important;         /* Elimina cualquier micro-sombra en las letras */
}

/* ==========================================================================
   5. Efecto Hover (Al pasar el ratón por los no seleccionados)
   ========================================================================= */
.product-variants-item ul.type-radio .input-container:hover {
    background-color: #4a4f52 !important; /* Un tono carbón un poco más claro al pasar el cursor */
    background: #4a4f52 !important;
    border-color: #E60026 !important;     /* Previsualiza un borde rojo sutil */
}

/* ==========================================================================
   6. BOTÓN SELECCIONADO (ACTIVO) - CAMBIO A FONDO ROJO / TEXTO BLANCO
   ========================================================================== */
.product-variants-item ul.type-radio .input-container:has(.input-radio:checked),
.product-variants-item ul.type-radio .input-container:has(.input-radio:checked):focus,
.product-variants-item ul.type-radio .input-container:has(.input-radio:checked):active {
    background-color: #E60026 !important; /* Fondo Rojo Vibrante */
    background: #E60026 !important;       
    border-color: #E60026 !important;     /* Borde combinado con el fondo */
    outline: none !important;             
    box-shadow: none !important;          
}

/* Forzamos el texto a quedarse en BLANCO y en negrita sobre el fondo rojo */
.product-variants-item ul.type-radio .input-container:has(.input-radio:checked) .radio-label,
.product-variants-item ul.type-radio .input-container:has(.input-radio:checked) span,
.product-variants-item ul.type-radio .input-container:has(.input-radio:checked) * {
    color: #ffffff !important;            /* Texto Blanco obligatorio para contraste */
    font-weight: 700 !important;          /* Letra más gruesa para resaltar la selección */
    background: transparent !important;   
    background-color: transparent !important;
}

/* ==========================================================================
   SOLUCIÓN ALYSUM: RECUADROS DE COLOR CUADRADOS PERFECTOS (SIN MARGENES OCULTOS)
   ========================================================================= */

/* 1. Forzar al input interno a no empujar ni deformar el contenedor */
.product-variants-item ul li input.input-color {
    margin: 0 !important;       /* ELIMINA el margen de 3px del navegador que lo volvía rectángulo */
    padding: 0 !important;      /* Limpieza absoluta */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    z-index: 2 !important;
    cursor: pointer !important;
}

/* 2. Estado Normal: Borde blanco sutil, cuadrado/círculo simétrico */
.product-variants-item ul li:has(.input-color) {
    position: relative !important;
    box-sizing: border-box !important; /* Evita que el borde sume tamaño extra */
    border: 1px solid #ffffff !important;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) !important;
    transform: none !important;
    transition: none !important;
    overflow: hidden !important;       /* Corta cualquier desborde visual */
}

/* 3. Efecto Hover: Se mantiene quieto y conserva su geometría */
.product-variants-item ul li:has(.input-color):hover {
    border-color: #ffffff !important;
    transform: none !important;
}

/* 4. Estado Seleccionado: Borde grueso uniforme en los 4 lados */
.product-variants-item ul li:has(.input-color:checked) {
    box-sizing: border-box !important;
    border: 2px solid #ffffff !important; /* El anillo blanco grueso ahora cerrará perfecto */
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.4) !important;
    transform: none !important;
}

/* ==========================================================================
   AISLAMIENTO EXCLUSIVO PARA EL BLOQUE DE COLOR (NO TOCAR SU COMPORTAMIENTO)
   ========================================================================== */
.product-variants-item.colors ul,
.product-variants-item .color ul {
    display: flex !important;
}
.product-variants-item.colors input[type="radio"],
.product-variants-item .color input[type="radio"] {
    display: none !important; 
}

/* ==========================================================================
   PERSONALIZACIÓN INTEGRADA: VENTANAS LATERALES (CARRITO Y CUENTA)
   ========================================================================== */

/* 1. Forzar el fondo gris oscuro en el contenedor principal que se desliza */
aside.mi-sidebar-personalizado {
    background-color: #262626 !important;
    border-left: 1px solid #3d3d3d !important;
}

/* 2. Forzar la fuente Roboto Mono y el color blanco en el TÍTULO PRINCIPAL (Evita el tachado de la consola) */
.mi-sidebar-personalizado header h3,
aside.mi-sidebar-personalizado h3 {
    font-family: 'Roboto Mono', monospace !important;
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 600 !important;
}

/* 3. Forzar fuentes y colores en el resto de elementos internos (Precios, Textos, Enlaces) */
.mi-sidebar-personalizado,
.mi-sidebar-personalizado p,
.mi-sidebar-personalizado span,
.mi-sidebar-personalizado a,
.mi-sidebar-personalizado label,
.mi-sidebar-personalizado div,
.mi-sidebar-personalizado .price,
.mi-sidebar-personalizado .product-name {
    font-family: 'Roboto Mono', monospace !important;
    color: #ffffff !important;
}

/* 4. Estilos visuales para los enlaces y nombres de productos al pasar el cursor */
.mi-sidebar-personalizado a:hover,
.mi-sidebar-personalizado .product-name:hover {
    color: #e0e0e0 !important;
    text-decoration: underline !important;
}

/* 5. El botón de cerrar (la "X" superior) */
.mi-sidebar-personalizado header button.close-sidebar,
.mi-sidebar-personalizado header button.close-sidebar svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    opacity: 0.8 !important;
}

/* 6. Campos de entrada de texto (Inputs en el formulario de inicio de sesión de cuenta) */
.mi-sidebar-personalizado input[type="text"], 
.mi-sidebar-personalizado input[type="email"], 
.mi-sidebar-personalizado input[type="password"] {
    background-color: #1f1f1f !important;
    border: 1px solid #4f4f4f !important;
    color: #ffffff !important;
    font-family: 'Roboto Mono', monospace !important;
}

/* Enfoque de los campos de texto al hacer clic en ellos */
.mi-sidebar-personalizado input:focus {
    border-color: #ffffff !important;
    outline: none !important;
}

/* ==========================================================================
   REESTRUCTURACIÓN DE CONTRASTE: PESTAÑAS DE INICIO DE SESIÓN Y REGISTRO
   ========================================================================== */

/* 1. Atacamos los elementos de la lista flotante (li) y sus enlaces (a) cuando están activos */
.mi-sidebar-personalizado .pktabswrap-ul li.active,
.mi-sidebar-personalizado .pktabswrap-ul li.active a,
.mi-sidebar-personalizado .pktabswrap-ul li a.active,
.mi-sidebar-personalizado .pktabswrap-ul li[aria-selected="true"],
.mi-sidebar-personalizado .pktabswrap-ul li[aria-selected="true"] a {
    color: #1f1f1f !important; /* Gris oscuro para el texto */
    background-color: #ffffff !important; /* Fondo blanco para la pestaña activa */
}

/* 2. Por si el tema usa las clases nativas de Bootstrap para las pestañas (.nav-tabs / .nav-link) */
.mi-sidebar-personalizado .nav-tabs .nav-link.active,
.mi-sidebar-personalizado .nav-item.active .nav-link,
.mi-sidebar-personalizado [data-toggle="tab"].active {
    color: #1f1f1f !important;
    background-color: #ffffff !important;
}

/* 3. REGLA INTRUSIVA: Si el texto está envuelto en etiquetas internas (span, fuerte, etc.), lo obligamos a cambiar */
.mi-sidebar-personalizado .pktabswrap-ul li.active a *,
.mi-sidebar-personalizado .pktabswrap-ul li a.active *,
.mi-sidebar-personalizado .nav-tabs .nav-link.active * {
    color: #1f1f1f !important;
}

/* 4. Estilo para las pestañas que NO ESTÁN ACTIVAS (para mantener la armonía oscura de Fenix Print) */
.mi-sidebar-personalizado .pktabswrap-ul li:not(.active) a,
.mi-sidebar-personalizado .nav-tabs .nav-link:not(.active) {
    color: #ffffff !important;
    background-color: #1a1a1a !important; /* Un gris más oscuro de fondo para las inactivas */
    opacity: 0.6;
}

/* ==========================================================================
   OPTIMIZACIÓN DE LEGIBILIDAD GLOBAL (TÍTULOS Y DESCRIPCIONES)
   ========================================================================== */

/* 1. Forzar color claro e清 nítido en TODOS los títulos principales de páginas */
h1, h2, h3, h4, h5, h6,
.page-title, 
.products-section-title, 
.block-title,
.cart-grid-body .card-title {
    color: #ffffff !important; /* Cambia a #ffffff (blanco) o #f5f5f5 si prefieres un tono metal */
    font-family: 'Roboto Mono', monospace !important; /* Manteniendo la línea de diseño limpia */
}

/* 2. Forzar legibilidad en textos generales, párrafos y descripciones cortas/largas */
body, p, 
.product-description, 
.product-short-description, 
description_short,
.page-content,
span.ae-item-desc {
    color: #e0e0e0 !important; /* Un gris muy claro/blanco suave que contrasta perfecto sobre fondo oscuro */
    font-size: 15px !important; /* Tamaño óptimo para lectura en pantallas y móviles */
    line-height: 1.6 !important; /* Espaciado cómodo entre líneas */
}

/* 3. Corrección de enlaces generales en el cuerpo de las páginas */
.page-content a, 
.product-prices .price, 
.product-features dl.data-sheet {
    color: #ffffff !important;
}

/* 4. Enfoque específico para títulos de productos en listas y catálogos */
.product-title a, 
.product-miniature .product-name {
    color: #ffffff !important;
}
.product-title a:hover, 
.product-miniature .product-name:hover {
    color: #e0e0e0 !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   PERSONALIZACIÓN OSCURA: POP-UP DE PRODUCTO AGREGADO AL CARRITO
   ========================================================================== */

/* 1. Fondo del contenedor principal del Pop-up (Modal) */
#blockcart-modal .modal-content,
.pk-modal .modal-content,
div[id^="blockcart-modal"] .modal-content {
    background-color: #262626 !important;
    border: 1px solid #3d3d3d !important;
    color: #ffffff !important;
}

/* 2. Encabezado del Pop-up (Donde suele decir "Producto añadido correctamente") */
#blockcart-modal .modal-header,
.pk-modal .modal-header {
    border-bottom: 1px solid #3d3d3d !important;
    background-color: #1f1f1f !important; /* Un toque más oscuro arriba para dar contraste */
}

#blockcart-modal .modal-header .modal-title,
#blockcart-modal .modal-header .modal-title *,
.pk-modal .modal-header h4 {
    color: #ffffff !important;
    font-family: 'Roboto Mono', monospace !important;
}

/* 3. Cuerpo del Pop-up (Detalles del producto, imagen, cantidad y precio) */
#blockcart-modal .modal-body,
.pk-modal .modal-body,
#blockcart-modal .product-name,
#blockcart-modal .modal-body p,
#blockcart-modal .modal-body span,
#blockcart-modal .cart-content p {
    color: #ffffff !important;
    font-family: 'Roboto Mono', monospace !important;
}

/* 4. El botón de cerrar (la "X" del pop-up en la esquina superior) */
#blockcart-modal .close,
.pk-modal .close {
    color: #ffffff !important;
    opacity: 0.8 !important;
    text-shadow: none !important;
}
#blockcart-modal .close:hover,
.pk-modal .close:hover {
    opacity: 1 !important;
}

/* 5. Ajuste a la sección interna derecha (Resumen del carrito dentro del modal) */
#blockcart-modal .cart-content {
    background-color: #1f1f1f !important;
    border-left: 1px solid #3d3d3d !important;
    padding: 15px;
}

/* 6. Botones de acción del Pop-up ("Continuar comprando" y "Ir a la caja") */
#blockcart-modal .cart-content-btn .btn-secondary,
.pk-modal .btn-secondary {
    background-color: #3d3d3d !important;
    color: #ffffff !important;
    border: 1px solid #4f4f4f !important;
}

#blockcart-modal .cart-content-btn .btn-primary,
.pk-modal .btn-primary {
    background-color: #ffffff !important;
    color: #1f1f1f !important; /* Texto oscuro en el botón principal para máxima acción */
    font-weight: 600 !important;
}

/* ==========================================================================
   OPTIMIZACIÓN DE CONTRASTE Y ACCESIBILIDAD (PAGESPEED)
   ========================================================================== */

/* Asegura el contraste para las etiquetas destacadas de las promociones principales */
.module-body strong,
.pk-ce-widget-wrapper strong,
strong {
    color: #ffffff !important; /* Fuerza color blanco puro en textos destacados sobre fondos oscuros */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8); /* Añade definición adicional al texto */
}

/* Si esos bloques promocionales específicos están en un fondo claro, cámbialo por este (opcional si es necesario): */
/* .tu-contenedor-claro strong { color: #111111 !important; } */

/* ==========================================================================
   REDISEÑO DE CHECKOUT DESDE CERO - PASO 1: TÍTULOS DE LOS PASOS
   ========================================================================== */

#checkout #wrapper h1, 
#checkout .step-title {
    font-size: 1.1em !important; /* Reducimos el tamaño para hacerlo más sutil y elegante */
    font-weight: 500 !important; /* Un poco más de cuerpo para que no pierda jerarquía */
    color: #ffffff !important;   /* Forzamos blanco puro para eliminar ese gris oscuro original (#313537) */
    letter-spacing: .08em !important; /* Ajustamos sutilmente el espaciado entre letras */
    border-bottom: 1px solid #222222 !important; /* Cambiamos la línea gris claro (#f0f0f0) por una oscura muy sutil */
    padding-bottom: 15px !important; /* Reducimos el espacio inferior para compactar el diseño */
    margin: 0 0 20px !important;
    text-transform: uppercase; /* Mantiene los títulos ordenados en mayúsculas */
}

/* Asegurar que los números de cada paso (1, 2, 3, 4) compartan el mismo tamaño y resalten en blanco */
#checkout .step-title .step-number {
    font-size: 1em !important;
    color: #ffffff !important;
    margin-right: 8px;
}

/* ==========================================================================
   REDISEÑO DE CHECKOUT - PASO 2: DESGLOSE DE TOTALES (BARRA LATERAL)
   ========================================================================== */

/* 1. Fondo gris oscuro y espaciados para el contenedor de totales */
.cart-detailed-totals-wrap {
    background-color: #313537 !important; /* Gris oscuro elegante para el fondo */
    padding: 20px !important;              /* Espaciado interno para que el texto no toque los bordes */
    border-radius: 6px !important;         /* Bordes ligeramente suavizados */
    border: 1px solid #2d2d2d !important;  /* Borde sutil para darle estructura */
}

/* 2. Ajustes internos para los bloques de líneas (Subtotal, Envío, Impuestos) */
.cart-detailed-totals-wrap .card-block:first-child {
    padding-bottom: 15px !important;
    margin-bottom: 15px !important;
    border-bottom: 1px solid #2d2d2d !important; /* Línea divisoria interna sutil */
}

.cart-detailed-totals-wrap .card-block {
    padding: 0 !important;
    background: transparent !important; /* Quitamos cualquier fondo blanco residual */
    font-size: 1em !important;          /* Un tamaño un poco más compacto y estilizado */
    display: flex;
    flex-direction: column;
}

/* 3. Contraste de los textos descriptivos (ej: "Subtotal", "Envío") */
.cart-detailed-totals-wrap .cart-summary-line .label,
.cart-detailed-totals-wrap .cart-summary-line {
    color: #b0bec5 !important; /* Gris claro limpio para las etiquetas secundarias */
}

/* 4. Contraste de los valores numéricos (Precios y el Total final) */
.cart-detailed-totals-wrap .cart-summary-line .value,
.cart-detailed-totals-wrap .cart-summary-totals .cart-summary-line .value,
.cart-detailed-totals-wrap .cart-summary-line strong {
    color: #ffffff !important; /* Blanco puro de alto contraste para los montos */
    font-weight: 600 !important;
}

/* ==========================================================================
   REDISEÑO DE CHECKOUT - PASO 3: CORRECCIÓN DE ENLACES OSCUROS (#333)
   ========================================================================== */

/* Forzar contraste claro en todos los enlaces y estados dentro del checkout y el carrito */
#checkout a, 
#checkout a:active, 
#checkout a:visited,
.cart-grid a,
.cart-grid a:active,
.cart-grid a:visited {
    color: #e0e0e0 !important; /* Gris claro elegante y de alta legibilidad */
    text-decoration: none !important; /* Mantiene la estética limpia sin subrayados */
}

/* Efecto al pasar el cursor (Hover) para que el usuario sepa que es cliqueable */
#checkout a:hover,
.cart-grid a:hover {
    color: #ffffff !important; /* Cambia a blanco puro al pasar el mouse */
    text-decoration: underline !important; /* Añade un subrayado sutil solo en el hover si deseas guiar al cliente */
}

/* Corrección específica para los enlaces de "Modificar" o "Editar" de los pasos anteriores */
#checkout .step-edit {
    color: #ffffff !important; /* Blanco para los botones de editar pasos */
}
#checkout .step-edit:hover {
    color: #b0bec5 !important;
}

/* ==========================================================================
   REDISEÑO DE CHECKOUT - PASO 4: TEXTO DE LAS DIRECCIONES DE ENVÍO
   ========================================================================== */

#checkout .address,
.address-item .address,
.address {
    font-size: .875rem !important;
    color: #e0e0e0 !important; /* Pasamos de #414141 a un gris claro nítido y elegante */
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Forzar que cualquier texto en negrita (como el nombre del cliente) resalte en blanco puro */
.address-item .address strong,
.address strong {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   REDISEÑO DE CHECKOUT - PASO 5: MÉTODOS DE ENVÍO (CONTRASTE Y SEPARACIÓN)
   ========================================================================== */

/* 1. Forzar gris claro en las etiquetas y textos del método de envío */
#checkout .delivery-option label,
#checkout .delivery-option,
.delivery-option .carrier-name,
.delivery-option .carrier-delay,
.delivery-option .carrier-price {
    color: #e0e0e0 !important; /* Pasamos de #414141 a un gris claro nítido */
    font-size: 1.01rem !important; /* Ajustamos sutilmente para que se vea más estilizado */
}

/* 2. Separar las opciones de envío y añadir la línea divisoria gris oscura */
#checkout .delivery-option {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid #2d2d2d !important; /* Línea gris oscura elegante entre opciones */
    display: flex;
    align-items: center;
}

/* Eliminar la línea divisoria de la última opción para mantener limpio el diseño */
#checkout .delivery-option:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

/* 3. Darle un toque extra de realce al precio del envío o texto en negrita */
#checkout .delivery-option strong,
.delivery-option .carrier-price {
    color: #ffffff !important; /* Blanco puro para los precios */
    font-weight: 600 !important;
}

/* ==========================================================================
   REDISEÑO DE CHECKOUT - PASO 5.1: ALINEACIÓN VERTICAL DE TRANSPORTISTAS
   ========================================================================== */

/* Fuerza a que el botón de radio y los textos se alineen perfectamente al centro vertical */
#checkout .delivery-option,
#checkout .delivery-option label,
#checkout .delivery-option .row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; /* Centrado vertical absoluto */
    justify-content: flex-start !important;
}

/* Evita que el botón de radio se mueva de su sitio o herede márgenes raros */
#checkout .delivery-option input[type="radio"] {
    margin-right: 12px !important; /* Espacio elegante entre el botón y el nombre */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    flex-shrink: 0; /* Evita que el botón se deforme en móviles */
}

/* Alineación fina para el contenedor del nombre y el retraso de entrega */
#checkout .delivery-option .carrier-name,
#checkout .delivery-option label > span {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
    line-height: 1 !important; /* Elimina alturas de línea excesivas */
}

/* ==========================================================================
   REDISEÑO DE CHECKOUT - PASO 5.2: NIVELACIÓN TOTAL DE TRANSPORTISTAS
   ========================================================================== */

/* 1. Forzamos que la etiqueta contenedora ocupe todo el ancho y alinee sus hijos */
#checkout .delivery-option label {
    display: flex !important;
    width: 100% !important;
    align-items: center !important; /* Centrado vertical de todos los elementos */
    justify-content: space-between !important; /* Separa los textos del precio */
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Agrupamos el logo y el nombre de la transportadora a la izquierda */
#checkout .delivery-option label > .row,
#checkout .delivery-option label .carrier {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important; /* Espacio uniforme entre logo, nombre y descripción */
    flex-grow: 1;
}

/* 3. Aseguramos que los textos internos (Nombre y Retraso) no tengan márgenes heredados */
#checkout .delivery-option .carrier-name,
#checkout .delivery-option .carrier-delay {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: normal !important;
}

/* Opcional: Si quieres que el tiempo de entrega tenga un color sutilmente diferente */
#checkout .delivery-option .carrier-delay {
    color: #a0a0a0 !important; 
    font-size: 0.9rem !important;
}

/* 4. Empujamos el precio de envío firmemente hacia la extrema derecha y lo centramos */
#checkout .delivery-option .carrier-price {
    margin-left: auto !important; /* Truco Flexbox para pegarlo a la derecha */
    padding-left: 20px !important;
    text-align: right !important;
    white-space: nowrap !important; /* Evita que el precio se rompa en dos líneas */
}

/* ==========================================================================
   REDISEÑO DE CHECKOUT - PASO 6: MÉTODOS DE PAGO (CONTRASTE Y SEPARACIÓN)
   ========================================================================= */

/* 1. Forzar texto en blanco puro y alineación vertical para las opciones de pago */
#checkout .payment-options .payment-option,
#checkout .payment-option label,
.payment-option > label > span,
.payment-option label span {
    color: #ffffff !important; /* Pasamos el texto a blanco puro */
    font-size: 1.05rem !important; /* Ajuste sutil de tamaño elegante */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; /* Centrado vertical absoluto de logos y textos */
    justify-content: flex-start !important;
    vertical-align: middle !important; /* Anulamos el vertical-align: top */
}

/* 2. Separación entre métodos de pago y adición de la línea gris oscura */
#checkout .payment-option {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid #2d2d2d !important; /* Línea divisoria gris oscura horizontal */
    width: 100% !important;
}

/* Eliminar la línea divisoria en la última opción de pago */
#checkout .payment-options .payment-option:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

/* 3. Ajuste para los botones de opción (radio) y espaciado con el texto/logos */
#checkout .payment-option input[type="radio"] {
    margin-right: 14px !important; /* Espacio limpio después del selector circular */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    flex-shrink: 0;
}

/* 4. En caso de que haya descripciones o textos adicionales debajo de la opción */
#checkout .payment-option + .js-additional-information {
    padding: 15px 0 15px 35px !important; /* Desplaza el formulario interno para alinearse con el texto */
    background: transparent !important;
}

/* ==========================================================================
   REDISEÑO DE CHECKOUT - PASO 6.1: ELIMINAR COLUMNAS VERTICALES EN LOGOS
   ========================================================================= */

/* Anulamos el ancho del 100% de las columnas de Bootstrap SOLO en los logos de pago */
#checkout .payment-options .payment-option .col-xs-12,
#checkout .payment-options [class*="mercadopago"] .col-xs-12,
#checkout .payment-options [id*="mercadopago"] .col-xs-12,
.mp-payment-methods-container .col-xs-12,
#container-issuers .col-xs-12 {
    width: auto !important;      /* Quitamos el 100% para que midan solo lo que mide el logo */
    float: none !important;      /* Eliminamos el float que desinea */
    display: inline-block !important;
    padding-left: 4px !important;  /* Compactamos el espacio lateral */
    padding-right: 4px !important;
}

/* Aseguramos que el contenedor principal de los logos los organice en una fila flexible */
.mp-payment-methods-container,
#container-issuers,
.mp-frame-payments,
#mercadopago-form-custom {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important; /* Espacio uniforme y estético entre tarjetas */
    width: 100% !important;
}

/* Forzamos tamaño uniforme a las imágenes de las tarjetas para que no se deformen */
#checkout .payment-option img,
.mp-payment-method-logo-container img,
img.mp-img-tarjetas {
    width: 42px !important;  /* Tamaño ideal para pasarelas en web y móvil */
    height: 26px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
}
/* ==========================================================================
   SOLUCIÓN RADICAL: FONDO NEGRO ABSOLUTO ESTRUCTURAL
   ========================================================================= */

/* 1. Pintamos de negro el contenedor principal de la confirmación para matar el fondo claro de la página */
#order-confirmation,
#order-confirmation #content,
#order-confirmation .page-content,
#order-confirmation #order-items,
#order-confirmation #order-details,
#order-confirmation .card,
#order-confirmation .box {
    background-color: #000000 !important;
    background: #000000 !important;
    border: 1px solid #1a1a1a !important; /* Un borde oscuro sutil para separar */
}

/* 2. Forzamos negro absoluto en la tabla de totales y en CADA fila/celda */
#order-confirmation .order-confirmation-table,
#order-confirmation .order-confirmation-table table,
#order-confirmation .order-confirmation-table tr,
#order-confirmation .order-confirmation-table td,
#order-confirmation .order-confirmation-table th,
#order-confirmation .order-confirmation-table tfoot,
#order-confirmation .cart-summary-totals,
#order-confirmation .cart-summary-blocks {
    background-color: #000000 !important;
    background: #000000 !important;
    border: none !important;
}

/* 3. Nos aseguramos de que todos los textos de precios y etiquetas brillen en blanco */
#order-confirmation .cart-summary-totals .label,
#order-confirmation .cart-summary-totals .value,
#order-confirmation .order-confirmation-table td,
#order-confirmation .order-confirmation-table th,
#order-confirmation .cart-summary-totals .cart-total .value,
#order-confirmation .order-confirmation-table strong {
    color: #ffffff !important;
}

/* 4. Ocultar líneas divisorias claras que use la tabla por defecto */
#order-confirmation .order-line, 
#order-confirmation .table-entries tr {
    border-bottom: 1px solid #1a1a1a !important;
}

/* ==========================================================================
   REDISEÑO EXCLUSIVO: DETALLES DEL PEDIDO EN NEGRO ABSOLUTO
   ========================================================================= */

/* 1. Forzar fondo negro puro en el contenedor de detalles del pedido */
#order-confirmation .order-details-space,
#order-confirmation #order-details,
#order-confirmation .order-details-space ul,
#order-confirmation .order-details-space .card-block {
    background-color: #000000 !important;
    background: #000000 !important;
    border: 1px solid #1a1a1a !important; /* Borde oscuro sutil */
}

/* 2. Forzar que todos los textos internos (Método de pago, envío, etc.) pasen a blanco */
#order-confirmation .order-details-space *,
#order-confirmation #order-details li,
#order-confirmation #order-details span {
    color: #ffffff !important;
}

/* 3. Si hay títulos internos dentro de este bloque, asegurar que también sean blancos */
#order-confirmation .order-details-space h3,
#order-confirmation .order-details-space h4 {
    color: #ffffff !important;
    font-weight: bold;
}
/* Sobrescribir las fuentes del módulo pkthemesettings para forzar el swap */
@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 300;
    src: url('/modules/pkthemesettings/views/fonts/roboto-mono/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_Of2_ROW4.woff2') format('woff2');
    font-display: swap !important;
}
@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400;
    src: url('/modules/pkthemesettings/views/fonts/roboto-mono/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_ROW4.woff2') format('woff2');
    font-display: swap !important;
}
@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 500;
    src: url('/modules/pkthemesettings/views/fonts/roboto-mono/L0xoDF4xlVMF-BfR8bXMIjhOsXG-q2oeuFoqFrlnANW6Cpk.woff2') format('woff2');
    font-display: swap !important;
}
@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 700;
    src: url('/modules/pkthemesettings/views/fonts/roboto-mono/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vu_ROW4.woff2') format('woff2');
    font-display: swap !important;
}

/* Cambiar el color de la etiqueta En Oferta */
.product-flags .product-flag.on-sale {
    background-color: #0052FF !important; /* Reemplaza por tu color (ej. var(--red-brand)) */
    color: #FFFFFF !important;            /* Color del texto */
}

/* Ocultar por completo la imagen de métodos de pago en el carrito */
img.payment-methods-img,
.payment-methods-img {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
}

/* ==========================================================================
   SIMETRÍA TOTAL: CLONAR EL ESTILO DEL BOTÓN PAGAR PARA EL BOTÓN ROJO
   ========================================================================= */

.pk-aside .shopping_cart .cart-button > .btn:last-child {
    background-color: #E60026 !important;   /* Rojo Fénix Print */
    background: #E60026 !important;
    border-color: #E60026 !important;
    color: #f7f7f7 !important;              /* Mismo tono de texto claro */
    
    /* Copia exacta de la tipografía del botón de pagar */
    font-family: "Roboto", sans-serif !important;
    font-size: 15px !important;              /* Mismo tamaño */
    font-weight: 400 !important;              /* Mismo grosor exacto */
    font-style: normal !important;
    line-height: 1em !important;
    letter-spacing: 0.1em !important;         /* Mismo espaciado */
    text-transform: uppercase !important;
    
    /* Eliminamos por completo los trucos de grosor extra anteriores */
    -webkit-text-stroke: 0px transparent !important;
    text-shadow: none !important;
}

/* Estado Hover balanceado */
.pk-aside .shopping_cart .cart-button > .btn:last-child:hover {
    background-color: #c2001e !important;   /* Rojo sutilmente más oscuro al pasar el mouse */
    background: #c2001e !important;
    border-color: #c2001e !important;
    color: #ffffff !important;
}

/* ==========================================================================
   SIMETRÍA EN POP-UP: BOTONES SEGUIR COMPRANDO (ROJO) Y PAGAR (AZUL)
   ========================================================================= */

/* 1. Botón "Seguir Comprando" (Secondary) -> ROJO FÉNIX PRINT */
#blockcart-modal .cart-content-btn .btn-secondary, 
.pk-modal .btn-secondary {
    background-color: #E60026 !important;   /* Tu rojo directo */
    background: #E60026 !important;
    border-color: #E60026 !important;
    color: #f7f7f7 !important;               /* Letra clara simétrica */
    
    /* Calco de tipografía */
    font-family: "Roboto", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1em !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

/* Hover para Seguir Comprando */
#blockcart-modal .cart-content-btn .btn-secondary:hover, 
.pk-modal .btn-secondary:hover {
    background-color: #c2001e !important;   /* Rojo un poco más oscuro */
    background: #c2001e !important;
    border-color: #c2001e !important;
    color: #ffffff !important;
}

/* 2. Botón "Pagar" (Primary) -> AZUL REY UNIFICADO */
#blockcart-modal .cart-content-btn .btn-primary,
.pk-modal .btn-primary,
#blockcart-modal .cart-content-btn a.btn:not(.btn-secondary) {
    background-color: #002cff !important;   /* El azul exacto de tu otro botón */
    background: #002cff !important;
    border-color: #002cff !important;
    color: #f7f7f7 !important;
    
    /* Calco de tipografía */
    font-family: "Roboto", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1em !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

/* Hover para Pagar */
#blockcart-modal .cart-content-btn .btn-primary:hover,
.pk-modal .btn-primary:hover,
#blockcart-modal .cart-content-btn a.btn:not(.btn-secondary):hover {
    background-color: #0022cc !important;   /* Azul un poco más oscuro al pasar el mouse */
    background: #0022cc !important;
    border-color: #0022cc !important;
    color: #ffffff !important;
}