/*
Theme Name: Storefront Child
Template: storefront
Description: Estilos personalizados para la tienda (Home, Categorías y Single Product)
*/

/* ==========================================================================
   1. CONFIGURACIÓN GLOBAL Y MENÚS
   ========================================================================== */

/* Limpieza radical para forzar el 100% de ancho */
.storefront-full-width-content .col-full {
    max-width: 100% !important;
    padding: 0 !important;
}

.storefront-full-width-content #primary {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* Ocultar barra lateral por defecto */
#secondary {
    display: none !important;
}

/* Asegurar que el contenedor principal no se limite */
.content-area {
    width: 100% !important;
    margin: 0 !important;
}

/* Menús fijos y animación */
#main-nav-menu, #mov-nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    transition: transform 0.4s cubic-bezier(0.3, 0, 0.2, 1);
    animation: entradaMenu 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-hidden { 
    transform: translateY(-100%); 
}

@keyframes entradaMenu {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(0); }
}

/* Espaciado para compensar el menú fijo */
#content { padding-top: 100px; }

@media (max-width: 768px) {
    #content { padding-top: 90px; }
}


/* ==========================================================================
   2. BREADCRUMBS (MIGAS DE PAN) GLOBALES
   ========================================================================== */

/* Ocultamos breadcrumbs por defecto de Storefront, los activaremos donde se necesiten */
.storefront-breadcrumb { display: none; }
.header-widget-region { display: none; }

/* Estilo elegante base para los breadcrumbs de WooCommerce */
.woocommerce-breadcrumb {
    font-family: var(--e-global-typography-text-font-family);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--e-global-color-secondary);
    margin-bottom: 20px;
    display: block;
}

.woocommerce-breadcrumb a {
    color: var(--e-global-color-secondary);
    text-decoration: none;
}


/* ==========================================================================
   3. PÁGINA DE INICIO (HOME SECTIONS)
   ========================================================================== */

/* --- ONBOARDING HOME --- */
#onboardinghome {
    position: relative;
    overflow: hidden;
}

#withlove, #handmade {
    position: absolute !important;
    z-index: 0;
    opacity: 0;
    animation: fadeMarcaDeAgua 1.5s ease-in-out forwards;
}

#withlove {
    left: 40%;
    top: 28%;
    transform: rotate(11deg);
    animation-delay: 1.2s;
}

#handmade {
    right: 40%;
    top: 10%;
    transform: rotate(-12deg);
    animation-delay: 0.4s;
}

@keyframes fadeMarcaDeAgua {
    0% { opacity: 0; }
    100% { opacity: 0.7; }
}

/* --- SECCIÓN PUERTAS (DOORS) --- */
.doors {
    padding: 40px 0; 
    background-color: var(--e-global-color-d95f9e6);
}

.doors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.door {
    aspect-ratio: 3/4;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.door:hover { 
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

.door-image {
    width: 100%;
    height: 70%;
    position: relative;
    background: var(--e-global-color-3800861);
    overflow: hidden;
}

.door-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.door:hover .door-image img {
    transform: scale(1.05);
}

.door-image::after {
    content: '';
    position: absolute;
    inset: 24px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    pointer-events: none;
}

.door-content {
    padding: 24px;
    background: var(--e-global-color-15c3dce);
    height: 30%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.door-number {
    font-family: var(--e-global-typography-primary-font-family);
    font-style: italic;
    font-size: 14px;
    color: var(--e-global-color-402bab6);
}

.door-title {
    font-family: var(--e-global-typography-primary-font-family);
    font-size: 30px;
    font-weight: var(--e-global-typography-primary-font-weight);
    margin: 4px 0;
    color: var(--e-global-color-primary);
    line-height: 1.1;
}

.door-desc {
    font-family: var(--e-global-typography-text-font-family);
    font-size: 11px;
    color: var(--e-global-color-secondary);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.door-arrow {
    position: absolute;
    bottom: 10px;
    right: 24px;
    font-size: 24px;
    color: var(--e-global-color-402bab6);
    transition: transform 0.3s ease;
}

.door:hover .door-arrow {
    transform: translateX(6px);
}

/* --- BARRA DE CONFIANZA (TRUST STRIP) --- */
.trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 40px 20px;
    background-color: var(--e-global-color-primary);
}

.trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.trust-icon {
    font-size: 28px;
    color: var(--e-global-color-accent);
    margin-bottom: 12px;
}

.trust-title {
    font-family: var(--e-global-typography-primary-font-family);
    font-weight: var(--e-global-typography-primary-font-weight);
    color: var(--e-global-color-089b0a6);
    font-size: 18px;
    margin-bottom: 4px;
}

.trust-desc {
    font-family: var(--e-global-typography-text-font-family);
    font-size: 10px;
    color: var(--e-global-color-d95f9e6);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- CÓMO FUNCIONA (HOW IT WORKS) --- */
.how-it-works {
    padding: 80px 20px;
    background-color: var(--e-global-color-15c3dce);
    text-align: center;
}

.section-eyebrow {
    font-family: var(--e-global-typography-accent-font-family);
    font-weight: var(--e-global-typography-accent-font-weight);
    color: var(--e-global-color-402bab6);
    font-size: 24px;
    margin-bottom: 12px;
}

.section-title {
    font-family: var(--e-global-typography-primary-font-family);
    font-weight: var(--e-global-typography-primary-font-weight);
    color: var(--e-global-color-primary);
    font-size: 48px;
    margin-bottom: 12px;
}

.section-title em { 
    font-style: italic; 
    color: var(--e-global-color-402bab6); 
}

.section-sub {
    color: var(--e-global-color-secondary);
    font-size: 15px;
    max-width: 500px;
    margin: 50px auto 60px auto;
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.step {
    text-align: left;
    padding: 32px;
    background-color: var(--e-global-color-d95f9e6);
    border-radius: 8px;
    border: 1px solid var(--e-global-color-3fd3b94);
    position: relative;
}

.step-num {
    font-family: var(--e-global-typography-primary-font-family);
    font-size: 40px;
    font-style: italic;
    color: var(--e-global-color-402bab6);
    line-height: .8;
    margin-bottom: 16px;
    background: var(--e-global-color-3800861);
    border-radius: 80px;
    padding: 5px 8px 10px 8px;
    display: inline-block;
}

.step-title {
    font-family: var(--e-global-typography-primary-font-family);
    font-weight: var(--e-global-typography-primary-font-weight);
    color: var(--e-global-color-primary);
    font-size: 22px;
    margin-bottom: 8px;
}

.step-desc {
    font-family: var(--e-global-typography-text-font-family);
    font-size: 14px;
    color: var(--e-global-color-secondary);
    line-height: 1.6;
}

/* RESPONSIVE: SECCIONES DE HOME */
@media (max-width: 992px) {
    .doors-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-strip { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

@media (max-width: 768px) {
    #handmade { left: -40%; top: 6%; transform: scale(0.7) rotate(-15deg); }
    #withlove { right: 0%; top: 10%; transform: scale(0.7) rotate(-12deg); }
    
    .doors-grid { grid-template-columns: 1fr; gap: 20px; }
    .door { aspect-ratio: 4/5; }
    .door-title { font-size: 28px; }
    .door-image::after { inset: 16px; }
    
    .how-it-works { padding: 60px 20px; }
    .section-title { font-size: 36px; }
    .steps { grid-template-columns: 1fr; gap: 20px; }
    .step { padding: 24px; text-align: center; }
    .step-num { font-size: 48px; }
}

@media (max-width: 600px) {
    .trust-strip { grid-template-columns: 1fr; padding: 30px 20px; }
    .trust-item { flex-direction: row; justify-content: flex-start; text-align: left; gap: 16px; }
    .trust-icon { margin-bottom: 0; }
}


/* ==========================================================================
   4. PÁGINA DE CATEGORÍAS (TAXONOMY-PRODUCT_CAT)
   ========================================================================== */

.tax-product_cat #content { padding-top: 0; }

.tax-product_cat .kikha-top-row .storefront-breadcrumb {
    display: block;
    padding: 0;
    margin: 0;
}

.kikha-hero-header {    
    background: var(--e-global-color-3800861);
    padding: 40px 20px;
    margin: 75px 0px 10px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
    
.kikha-hero-header .woocommerce-breadcrumb a:first-of-type::before {
    content: none;
}
    
.kikha-top-row { 
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    margin:0 auto;
}

.kikha-product-count { text-align: right; color: var(--e-global-color-primary); }
.kikha-product-count span { font-size: 32px; font-weight: bold; display: block; }

.kikha-title { font-size: 46px; margin: 12px 0; color: var(--e-global-color-primary); }
.kikha-description { color: var(--e-global-color-secondary); max-width: 600px; }

.kikha-control-bar { 
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--e-global-color-3fd3b94);
}

.kikha-control-bar .tabwrap {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kikha-tabs-area { display: flex; align-items: center; gap: 20px; }

.kikha-tabs-area .label { 
    font-size: 14px;
    font-weight: 400;
    color: var(--e-global-color-text);
}

.kikha-cat-tabs  {
    list-style: none;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
}

.kikha-cat-tabs li {
    padding: 5px 15px;
    border: 1px solid var(--e-global-color-3fd3b94);
    border-radius: 40px;
    transition: background-color 0.5s;
}

 .kikha-cat-tabs li a {
    font-weight: 400;
    font-size: 14px;
    text-transform: capitalize;
    transition: color 0.5s;
}

.kikha-cat-tabs li.active, .kikha-cat-tabs li:hover {
    background-color: var(--e-global-color-primary);
}

.kikha-cat-tabs li.active a, .kikha-cat-tabs li:hover a {
   color: var(--e-global-color-089b0a6);
}

.kikha-ordering-area .orderby {
    background: var(--e-global-color-d95f9e6);
    border: none;
}

/* --- GRILLA DE PRODUCTOS GLOBAL E INDIVIDUAL --- */
.woocommerce ul.products  {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    width: 80%;
    margin: 40px auto;
}

ul.products::before, ul.products::after { content: none; }

.products.columns-3 .product {
    width: 100% !important;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.products img { border-radius: 10px; }

.kikha-badge {
    background: var(--e-global-color-primary);
    color: var(--e-global-color-3fd3b94);
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
}

.kikha-badge-wrapper  {
    position: absolute;
    top: 4%;
    left: 20%;
}

.product .woocommerce-loop-product__title  {
    font-size: 18px !important;
    text-align: left;
    font-weight: 700 !important;
    margin-bottom: 0 !important;
}

.kikha-product-cat {
    text-align: left;
    display: block;
    font-weight: 300;
    text-transform: capitalize;
    color: var(--e-global-color-text);
    margin: 0;
    width:324px;
}

.product .price {
    width: 100%;
    text-align: left;
    font-weight: 600 !important;
    margin-top: 5px;
    color: var(--e-global-color-primary) !important;
}

/* Efectos Hover Tarjetas de Producto */
ul.products li.product {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    box-shadow: none !important;
}

ul.products li.product:hover {
    transform: translateY(-10px) !important;
}

ul.products li.product a img {
    transition: box-shadow 0.4s ease !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

ul.products li.product:hover a img {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}

/* RESPONSIVE: CATEGORÍAS Y PRODUCTOS */
@media (max-width: 992px) {
    .kikha-top-row, .kikha-control-bar .tabwrap, .woocommerce ul.products {
        width: 95% !important; 
    }
}

@media (max-width: 768px) {
    .kikha-hero-header { padding: 20px 15px; margin-top: 100px; }
    .kikha-top-row { width: 100% !important; flex-direction: column; gap: 15px; }
    .kikha-control-bar { flex-direction: column; gap: 20px; }
    .kikha-control-bar .tabwrap { width: 100% !important; flex-direction: column; gap: 10px; }
    .kikha-cat-tabs { justify-content: center; gap: 10px; }
    .kikha-cat-tabs li { padding: 4px 12px; font-size: 12px; }
    .kikha-product-count { text-align: center; }
    .kikha-tabs-area { flex-direction: column; gap: 10px; justify-content: center; }
    
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; margin: 20px auto; }
    .product .woocommerce-loop-product__title { font-size: 14px !important; }
    .kikha-badge-wrapper { left: 10px; top: 10px; }
}

@media (max-width: 480px) {
    .woocommerce ul.products { grid-template-columns: 1fr !important; }
    .kikha-title { font-size: 28px !important; }
    .kikha-badge-wrapper { top: 15px !important; left: 15px !important; }
}


/* ==========================================================================
   5. PÁGINA INDIVIDUAL DEL PRODUCTO (SINGLE PRODUCT)
   ========================================================================== */

.custom-product-layout .product-summary-col { display: grid; }
.custom-product-layout .woocommerce-breadcrumb { margin-bottom: 0; }
.custom-product-layout h1.entry-title { font-size: 55px; margin: 20px 0; }

/* Breadcrumbs del Single Product */
.product-summary-col .storefront-breadcrumb {
    display: block;
    padding: 0;
    margin: 0;
    text-align: left;
}
.storefront-breadcrumb .woocommerce-breadcrumb a:first-of-type::before { content: none; }
.storefront-breadcrumb .col-full {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Ocultar elementos intermedios del breadcrumb en la página de producto */
.custom-product-layout .woocommerce-breadcrumb a:nth-child(5),
.custom-product-layout .woocommerce-breadcrumb span:nth-child(5),
.custom-product-layout .woocommerce-breadcrumb .breadcrumb-separator:nth-of-type(5) {
    display: none !important;
}

/* Formularios de WooCommerce y Plugins (WCPA) */
.wcpa_form_outer { display: flex; flex-direction: column; margin: 0; }
.variations_form { order: 1; }
.wcpa_section { order: 2; margin-top: -25px; }

.ingresanombre { margin: 0 !important; }
.ingresanombre h1 {
    margin: 0;
    font-size: 1.618em;
    font-weight: 600;
}

.ingresanombre .wcpa_field {
    display: block !important;
    position: relative;
    padding-left: 60px !important;
    font-weight: 600 !important;
    color: var(--e-global-color-primary);
    margin-bottom: 20px;
}

.ingresanombre .wcpa_field::before {
    content: "02";
    position: absolute;
    left: 0;
    top: -16px;
    font-family: var(--e-global-typography-primary-font-family);
    font-size: 40px;
    font-style: italic;
    color: var(--e-global-color-402bab6);
    line-height: .8;
    background: var(--e-global-color-3800861);
    border-radius: 80px;
    padding: 5px 8px 10px 8px;
    display: inline-block;
}

/* Swatches (Variaciones visuales) */
.woo-variation-swatches .wvs-style-squared.variable-items-wrapper .variable-item:not(.radio-variable-item).button-variable-item {
    background: transparent;
    box-shadow: none;
    border: 1px solid var(--e-global-color-primary);
    border-radius: 10px;
    height: auto;
    padding: 5px 10px;
}

.variable-item-contents { background: transparent; }

.woo-variation-swatches .wvs-style-squared.variable-items-wrapper .variable-item:not(.radio-variable-item).button-variable-item:hover, 
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).button-variable-item.selected:not(.no-stock) {
    background: var(--e-global-color-primary);
    color: var(--e-global-color-15c3dce);
}

.woo-variation-swatches .wvs-style-squared.variable-items-wrapper .variable-item:not(.radio-variable-item).button-variable-item .variable-item-span {
    padding: 0 5px;
    font-size: 15px;
}

a.reset_variations {
    display: inline-block;
    font-size: 12px;
    margin: 10px;
    color: var(--e-global-color-text);
}

/* Footer Adherido y Precio Dinámico */
.single-product div.product form.cart { margin-bottom: 0; padding: 0; }

.woocommerce-variation-price, 
.product-summary-col form.cart .price {
    display: block;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

.variations_form .price { display: none !important; }

#kikha-price-live { display: block !important; }

#kikha-price-live .amount {
    font-size: 40px !important;
    font-weight: 700 !important;
    color: var(--e-global-color-primary) !important;
    margin: 10px !important;
    font-family: var(--e-global-typography-primary-font-family);
}

.sticky-footer-cart {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    gap: 20px;
    align-items: center;
    justify-items: center;
}


/* ==========================================================================
   6. RATING, ESTRELLAS Y RESEÑAS (REVIEWS)
   ========================================================================== */

.single-product div.product .woocommerce-product-rating a {
    font-weight: 400;
    text-decoration: none;
    font-size: 12px;
}

.single-product div.product .woocommerce-product-rating .star-rating {
    float: left;
    margin-right: 0px;
}

.star-rating {
    overflow: hidden;
    position: relative;
    height: 1.618em;
    line-height: 1.618;
    font-size: 1em;
    width: 4.55em;
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
}

/* Estrellas doradas sólidas (Unicode) */
.woocommerce .star-rating::before,
.woocommerce .star-rating span::before {
    content: "\2605\2605\2605\2605\2605" !important;
    color: var(--e-global-color-accent) !important;
}

/* Estrellas interactivas en el formulario de reseñas */
p.stars span a {
    display: inline-block;
    width: 25px;
    height: 25px;
    text-indent: -9999px;
    position: relative;
    color: #a59170;
}

p.stars span a::before {
    content: "\2605";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    text-indent: 0;
    font-size: 25px;
    color: #a59170;
}

p.stars span a:hover::before,
p.stars span a:focus::before,
p.stars span a.active::before,
p.stars:hover span a::before,
p.stars.selected a.active:before, 
p.stars:hover a:before, 
p.stars.selected a:not(.active):before {
    color: var(--e-global-color-accent) !important;
}

p.stars span a:hover ~ a::before,
p.stars span a.active ~ a::before {
    color: #a59170;
}

/* Estilos de la caja de reseñas */
.woocommerce-Reviews-title {
    font-size: 35px !important;
    width: 100%;
    border-top: 1px solid #e7dbca;
    border-bottom: 1px solid #e7dbca;
    padding: 15px 5px;
    font-weight: 700;
    margin-top:20px;
}

.commentlist li {
    border-bottom: 1px solid #e7dbca;
}

/* Ocultar elementos duplicados o innecesarios que causan el amontonamiento */
    .custom-product-layout .product-summary-col .quantity, .custom-product-layout .single_add_to_cart_button  {
        /* Si hay varios precios o carros, ocultamos los extras */
        display: none !important;
    }

/* =========================================
   FIX PARA DESBORDAMIENTO EN MÓVIL
   ========================================= */

html, body {
    overflow-x: hidden; /* Corta cualquier cosa que intente salirse por la derecha */
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Corrección específica para el layout de producto en móviles */
@media (max-width: 768px) {
    .custom-product-layout .product-summary-col {
        display: block !important;
        width: 100% !important;
        padding: 0 15px !important; /* Mantiene un margen lateral limpio */
    }
    .sticky-footer-cart {
    display: flex;
    justify-items: center;
    grid-auto-flow: row;
    flex-direction: column;
    align-content: center;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.product .price {
    width: 100%;
    text-align: center;}
}

.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments {
        background-color: var(--e-global-color-3800861);
        color:var(--e-global-color-text);
}

.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before, .woocommerce-noreviews::before, p.no-comments::before{
     color:var(--e-global-color-text);
}
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button, .woocommerce-noreviews .button, p.no-comments .button{
     color:var(--e-global-color-text);
}

.woocommerce-message a, .woocommerce-info a, .woocommerce-error a, .woocommerce-noreviews a, p.no-comments a {
    color: var(--e-global-color-3800861);
}

/* Ocultar el contador de reseñas en la grilla de productos */
.products .woocommerce-product-rating .star-rating + .review-count,
.products .woocommerce-product-rating .star-rating + a {
    display: none !important;
}

/* Ajustar el espaciado para que no choque con el título o la categoría */
.products .star-rating {
    margin: 5px 0 10px 0 !important;
}