/*
Theme Name: Storefront Child
Theme URI: https://woocommerce.com/products/storefront/
Template: storefront
Author: Automattic
Author URI: https://woocommerce.com/
Description: Storefront is the perfect theme for your next WooCommerce project. Designed and developed by WooCommerce Core developers, it features a bespoke integration with WooCommerce itself plus many of the most popular customer facing WooCommerce extensions. There are several layout & color options to personalise your shop, multiple widget regions, a responsive design and much more. Developers will love its lean and extensible codebase making it a joy to customize and extend. Looking for a WooCommerce theme? Look no further!
Tags: e-commerce,two-columns,left-sidebar,right-sidebar,custom-background,custom-colors,custom-header,custom-menu,featured-images,full-width-template,threaded-comments,accessibility-ready,rtl-language-support,footer-widgets,sticky-post,theme-options,editor-style
Version: 4.6.1.1763654739
Updated: 2025-11-20 16:05:39

*/

/* TEXTO NEGRO EN TARJETAS DEL BLOG */
body.page-id-20 main#primary h2,
body.page-id-20 main#primary h2 a,
body.page-id-20 main#primary h3,
body.page-id-20 main#primary h3 a,
body.page-id-20 main#primary p,
body.page-id-20 main#primary div,
body.page-id-20 main#primary span {
    color: #000000 !important;
    text-shadow: none !important;
}

/* ========================================
   TEXTO NEGRO SOLO EN TARJETAS DEL BLOG
   ======================================== */

/* Solo afecta a la página principal del blog (listado de tarjetas) */
body.page-id-20.blog main#primary article h2,
body.page-id-20.blog main#primary article h2 a,
body.page-id-20.blog main#primary article h3,
body.page-id-20.blog main#primary article h3 a,
body.page-id-20.blog main#primary article p,
body.page-id-20.blog main#primary article .entry-summary,
body.page-id-20.blog main#primary article .wp-block-post-excerpt__excerpt,
body.page-id-20.blog main#primary article span:not(time) {
    color: #000000 !important;
    text-shadow: none !important;
}

/* Fecha en gris */
body.page-id-20.blog main#primary article time,
body.page-id-20.blog main#primary article .posted-on {
    color: #666666 !important;
}

/* ESTILOS CARRITO - TEXTO EN BLANCO */

.woocommerce-cart-form__contents { background: rgba(0,0,0,0.6); border-radius: 10px; padding: 20px; backdrop-filter: blur(10px); }

.woocommerce table.shop_table th { color: #ffffff !important; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 2px solid #d4a843; }

.woocommerce-cart-form__contents .product-name a { color: #ffffff !important; font-size: 18px; font-weight: 600; text-decoration: none; transition: color 0.3s ease; }

.woocommerce-cart-form__contents .product-name a:hover { color: #d4a843 !important; text-shadow: 0 0 10px rgba(212,168,67,0.5); }

.woocommerce-cart-form__contents .product-price, .woocommerce-cart-form__contents .product-subtotal { color: #ffffff !important; font-size: 20px; font-weight: 700; }

.woocommerce-cart-form__contents .product-remove a { color: #ff6b6b !important; background: rgba(255,107,107,0.2); border-radius: 5px; padding: 5px 10px; transition: all 0.3s ease; }

.cart_totals { background: rgba(0,0,0,0.7); border-radius: 10px; padding: 30px; backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0,0,0,0.3); }

.cart_totals h2 { color: #d4a843 !important; font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 2px; }

.cart_totals table tr th, .cart_totals table tr td { color: #ffffff !important; font-size: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.2); }

.cart_totals .order-total th, .cart_totals .order-total td { color: #d4a843 !important; font-size: 22px; font-weight: 700; border-top: 2px solid #d4a843; padding-top: 15px; }

.wc-proceed-to-checkout .checkout-button { background: linear-gradient(135deg, #d4a843 0%, #b88a2f 100%); color: #000000 !important; font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; padding: 15px 40px; border-radius: 8px; border: none; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(212,168,67,0.4); width: 100%; text-align: center; }

.wc-proceed-to-checkout .checkout-button:hover { background: linear-gradient(135deg, #b88a2f 0%, #d4a843 100%); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212,168,67,0.6); }

.woocommerce table.shop_table td { color: #ffffff !important; border-top: 1px solid rgba(255,255,255,0.1); }

.cart_totals .woocommerce-shipping-destination, .cart_totals .shipping-calculator-button { color: #ffffff !important; }

.cart_totals small { color: #e0e0e0 !important; font-size: 12px; }


/* ===================================


/* ==========================================================================
   PERSONALIZACIONES ZENIT NAZARÍ
   ========================================================================== */

/* Ocultar encabezado sticky duplicado */
.site-header.storefront-primary-navigation {
    position: static !important;
}

.storefront-primary-navigation {
    position: relative !important;
}

/* Si hay un segundo header sticky, ocultarlo */
.site-header + .site-header {
    display: none !important;
}

/* Centrar frases del hero */
.wp-block-cover__inner-container h2,
.wp-block-cover__inner-container p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 800px !important;
}

/* Ajustar posición del icono de lupa del buscador */
.site-search button.search-submit {
    left: auto !important;
    right: 5px !important;
}

.site-header .site-search {
    position: relative;
}

.site-search .search-field {
    padding-right: 45px !important;
}

/* Mejorar visibilidad del contenido en Términos y Condiciones */
.page-template-default .entry-content,
.page .entry-content {
    color: #333 !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
}

.page .entry-content h1,
.page .entry-content h2,
.page .entry-content h3,
.page .entry-content h4 {
    color: #D4AF37 !important;
    font-weight: 600 !important;
    margin-top: 1.5em !important;
    margin-bottom: 0.5em !important;
}

/* Mejorar carrito */
.woocommerce-cart table.cart td {
    padding: 15px !important;
}

.woocommerce-cart .cart-collaterals {
    margin-top: 30px !important;
}

.woocommerce .cart-collaterals .cart_totals {
    width: 100% !important;
    max-width: 500px !important;
    float: none !important;
    margin: 0 auto !important;
}

/* Valoraciones de productos - mostrar todas las estrellas */
.woocommerce-product-rating {
    margin-bottom: 20px !important;
}

.woocommerce .star-rating {
    overflow: visible !important;
    position: relative !important;
    display: inline-block !important;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
    border: 1px solid #e0e0e0 !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    background: #f9f9f9 !important;
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
    border: 2px solid #d67920 !important;
}



/* FORZAR VISUALIZACIÓN DE ESTRELLAS EN CADA VALORACIÓN INDIVIDUAL */
.woocommerce #reviews #comments ol.commentlist li .comment-text .star-rating {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    float: right !important;
    margin: 0 0 10px 10px !important;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text .star-rating span {
    overflow: visible !important;
    display: inline-block !important;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
    position: relative !important;
}

/* Asegurar que el rating sea visible en cada comentario */
#reviews .comment-text .star-rating::before,
#reviews .comment-text .star-rating span::before {
    display: inline-block !important;
    font-family: "star" !important;
}

/* Mostrar meta info con rating */
.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta {
    margin-bottom: 15px !important;
    display: block !important;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta strong {
    display: inline-block !important;
    margin-right: 10px !important;
}

/* ==== FORZAR VISUALIZACIÓN DE ESTRELLAS EN REVIEWS INDIVIDUALES ==== */
.woocommerce #reviews #comments ol.commentlist li .comment_container::before {
    content: '★★★★★'; /* 5 estrellas unicode */
    color: #f90;
    font-size: 16px;
    display: block !important;
    margin-bottom: 10px !important;
    letter-spacing: 2px;
}

/* Mostrar estrella rating si existe */
.woocommerce #reviews #comments ol.commentlist li .star-rating {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    margin-bottom: 10px !important;
    font-size: 1.2em !important;
}

/* SOLUCIÓN FINAL: Texto negro en tarjetas del blog */
.page-id-20 article * {
    color: #000000 !important;
    text-shadow: none !important;
}

.page-id-20 article h2, 
.page-id-20 article h3,
.page-id-20 article p,
.page-id-20 article a,
.page-id-20 article span {
    color: #000000 !important;
    text-shadow: none !important;
}

/* FORZAR texto negro - SUPER IMPORTANTE */
.page-id-20 article *,
.page-id-20 .entry-title *,
.page-id-20 .entry-content *,
.page-id-20 .entry-summary *,
.page-id-20 .posted-on *,
.page-id-20 .wp-block-post-title,
.page-id-20 .wp-block-post-excerpt,
.page-id-20 .wp-block-post-date {
    color: #000000 !important;
    text-shadow: 0px 0px 0px rgba(0,0,0,0) !important;
    -webkit-text-fill-color: #000000 !important;
    -webkit-text-stroke-color: #000000 !important;
}

/* SOLUCIÓN FINAL: Fondo negro en tarjetas */
.page-id-20 article {
    background-color: #000000 !important;
    background: #000000 !important;
}

.page-id-20 article *,
.page-id-20 article h2,
.page-id-20 article h3,
.page-id-20 article p,
.page-id-20 article a,
.page-id-20 article span,
.page-id-20 article time {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* NUCLEAR - FORZAR texto legible con drop-shadow */
.page-id-20 article h2,
.page-id-20 article h3,
.page-id-20 article p,
.page-id-20 article a,
.page-id-20 article span,
.page-id-20 article time {
    filter: drop-shadow(0px 0px 0px #000000) drop-shadow(0px 0px 0px #000000) drop-shadow(0px 0px 0px #000000) !important;
    -webkit-filter: drop-shadow(0px 0px 0px #000000) drop-shadow(0px 0px 0px #000000) !important;
    color: #000000 !important;
    opacity: 1 !important;
}

/* ====================================================================
   SOLUCIÓN FINAL: TEXTO NEGRO EN TARJETAS DEL BLOG - MÁXIMA FUERZA
   ==================================================================== */

/* Forzar color negro en TODOS los elementos de las tarjetas */
body.page-id-20.blog #primary article *,
body.page-id-20.blog #primary article,
body.page-id-20.blog main#primary *,
body.page-id-20.blog main#primary article h1,
body.page-id-20.blog main#primary article h2,
body.page-id-20.blog main#primary article h3,
body.page-id-20.blog main#primary article h1 a,
body.page-id-20.blog main#primary article h2 a,
body.page-id-20.blog main#primary article h3 a,
body.page-id-20.blog main#primary article p,
body.page-id-20.blog main#primary article div,
body.page-id-20.blog main#primary article span {
    color: #000000 !important;
    text-shadow: none !important;
}

/*

/* Títulos en dorado para página de política de privacidad */
.page-id-66 h2,
.page-id-66 h3 {
    color: #D4AF37 !important;
}


/* ========================================
   ENLACES CONTACTO Y MI CUENTA EN HEADER
   ======================================== */

/* Contenedor de los enlaces en el header */
.zn-header-links {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    margin-right: 1.5rem;
    font-size: 0.95rem;
}

.zn-header-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #333333;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

.zn-header-link i {
    font-size: 1rem;
}

.zn-header-link:hover {
    color: #d4a843;
}

/* Posicionar los enlaces antes del buscador */
/* Posicionar contenedor del header con flex */
.site-header .site-header-cart {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Posicionar los enlaces antes del buscador */
.zn-header-links {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    margin-right: 1rem;
    order: -1;
}
/* ========================================
   ARREGLAR LUPA DEL BUSCADOR
   ======================================== */

/* Contenedor del buscador */
.site-header .widget_product_search form,
.site-header .woocommerce-product-search {
    position: relative;
}

/* Input del buscador - dar más espacio a la izquierda */
.site-header .woocommerce-product-search .search-field,
.site-header input[type="search"] {
    padding-left: 2.8rem !important;
}

/* Botón de búsqueda (lupa) - mover más a la izquierda */
.site-header .woocommerce-product-search button[type="submit"],
.site-header .widget_product_search button[type="submit"] {
    position: absolute;
    left: 0.75rem !important;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 0;
    z-index: 1;
}


/* SOLUCIÓN DEFINITIVA - Blog titles color fix */
.home #primary article .entry-title,
.home #primary article .entry-title a,
.blog #primary article .entry-title,
.blog #primary article .entry-title a,
.archive #primary article .entry-title,
.archive #primary article .entry-title a,
.home #primary article .entry-summary,
.home #primary article .entry-summary *,
.blog #primary article .entry-summary,
.blog #primary article .entry-summary *,
.archive #primary article .entry-summary,
.archive #primary article .entry-summary * {
    color: #000000 !important;
}
/* Forzar color negro en el listado del blog */
.blog #content,
.blog #content * {
    color: #000000 !important;
}


/* Títulos del footer en BLANCO */
#custom-footer h3,
#custom-footer h2,
#custom-footer heading {
    color: #FFFFFF !important;
}

/* Títulos de las cajas "Por Qué Elegir Zenit Nazarí" en BLANCO */
.home #primary article h3,
.home #primary article h2 {
    color: #FFFFFF !important;
}

/* Título del menú rápido lateral en BLANCO */
.quick-menu h3,
.quick-menu h2,
body > h3:not(#custom-footer h3) {
    color: #FFFFFF !important;
}

/* ========================================
   ELIMINAR RESALTADO DEL MENÚ ACTIVO
   ======================================== */

/* Fuerza el color blanco en el elemento del menú activo */
.main-navigation a[aria-current]:not([aria-current="false"]) {
    color: #ffffff !important;
}

/* También con las clases de WordPress */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
    color: #ffffff !important;
}

/* SOBRESCRIBIR EL COLOR DORADO DEL MENÚ ACTIVO */
.main-navigation a[aria-current]:not([aria-current="false"]) {
    color: #ffffff !important;
}
/* ========================================
   ELIMINAR RESALTADO DEL MENÚ ACTIVO
   ======================================== */

/* Sobrescribe el color dorado del tema padre */
.main-navigation a[aria-current]:not([aria-current="false"]) {
    color: #ffffff !important;
}

/* También aplica para las clases WordPress */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
    color: #ffffff !important;
}
/* Productos relacionados margen superior */
.related.products {
    margin-top: 150px !important;
    clear: both !important;
}

.storefront-sticky-add-to-cart {
    z-index: 999999 !important;
}
/* Eliminar el pseudo-elemento ::before de ul.products que causa el hueco */
ul.products::before,
ul.products::after {
    display: none !important;
    content: "" !important;
}

/* También elimina si está con esta estructura */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important;
}

/* ========================================
   ESTILOS DEL INPUT DE COUPON - OSCURO
   ======================================== */

/* El label "Introduce el código" en gris */
article#post-13 label {
    color: #999999 !important;
    font-size: 13px !important;
}

/* INPUT - Fondo oscuro SIEMPRE (estado inicial + focus) */
article#post-13 input[type="text"],
article#post-13 #wc-block-components-totals-coupon_input-coupon {
    background-color: rgba(0, 0, 0, 0.5) !important;
    color: #ffffff !important;
    border: 2px solid rgba(212, 175, 55, 0.3) !important;
    border-style: solid !important;
    padding: 12px 15px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* Placeholder del input en gris claro */
article#post-13 input[type="text"]::placeholder,
article#post-13 #wc-block-components-totals-coupon_input-coupon::placeholder {
    color: #999999 !important;
    opacity: 0.8 !important;
}

/* Focus: más brillo */
article#post-13 input[type="text"]:focus,
article#post-13 #wc-block-components-totals-coupon_input-coupon:focus {
    background-color: rgba(0, 0, 0, 0.7) !important;
    border-color: #d4a843 !important;
    outline: none !important;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5) !important;
}

/* Botón en dorado */
article#post-13 button {
    background-color: #d4a843 !important;
    color: #000000 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

article#post-13 button:hover {
    background-color: #b88a2f !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 15px rgba(212, 168, 67, 0.5) !important;
}

/* Resto de texto en blanco */
article#post-13 h2,
article#post-13 h3,
article#post-13 p,
article#post-13 a,
article#post-13 span {
    color: #ffffff !important;
}

.woocommerce-order-details,
.woocommerce-order-details.order_details,
.order_details {
    background-color: rgba(26, 26, 26, 0.9) !important;
    background: rgba(26, 26, 26, 0.9) !important;
    border: 2px solid #d4a843 !important;
    border-radius: 15px !important;
    padding: 30px !important;
    margin: 20px 0 !important;
}

/* Eliminar fondos blancos de cualquier elemento dentro */
.woocommerce-order-details *,
.order_details * {
    background-color: transparent !important;
}

/* Excepto inputs y selects que necesitan fondo */
.woocommerce-order-details input,
.woocommerce-order-details select,
.order_details input,
.order_details select {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

/* Tablas con fondo oscuro */
.woocommerce-order-details table,
.order_details table {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(212, 175, 55, 0.2) !important;
}

.woocommerce-order-details table th,
.order_details table th {
    background-color: rgba(212, 175, 55, 0.25) !important;
    color: #d4a843 !important;
    border-bottom: 2px solid #d4a843 !important;
    padding: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.woocommerce-order-details table td,
.order_details table td {
    background-color: rgba(0, 0, 0, 0.15) !important;
    color: #ffffff !important;
    border-color: rgba(212, 175, 55, 0.1) !important;
    padding: 12px 15px !important;
}

/* Texto todo blanco */
.woocommerce-order-details,
.order_details {
    color: #ffffff !important;
}

.woocommerce-order-details h2,
.order_details h2,
.woocommerce-order-details h3,
.order_details h3 {
    color: #d4a843 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-bottom: 2px solid #d4a843 !important;
    padding-bottom: 15px !important;
}

.woocommerce-order-details p,
.order_details p,
.woocommerce-order-details strong,
.order_details strong,
.woocommerce-order-details a,
.order_details a {
    color: #ffffff !important;
}

.woocommerce-order-details strong,
.order_details strong {
    color: #d4a843 !important;
    font-weight: 700 !important;
}

/* Links en dorado */
.woocommerce-order-details a,
.order_details a {
    color: #d4a843 !important;
    text-decoration: underline !important;
}

.woocommerce-order-details a:hover,
.order_details a:hover {
    color: #FFE500 !important;
}