/*
 Theme Name:   Craftify Child
 Template:     craftify
 Version:      1.2.0
*/

/* 1. VARIABLES DE LUJO */
:root {
    --luxury-color: #ffffff; /* Blanco al inicio */
    --lux-icon-size: 26px;
    --lux-icon-stroke: 2px;
    --lux-svg-scale: 1.06;
}

.header-luxury.is-scrolled,
.header-luxury:hover {
    --luxury-color: #000000; /* Negro al bajar o pasar el mouse */
}

/* 2. ALINEACIÓN Y ARMONÍA DEL HEADER */
.header-luxury {
    background-color: transparent !important;
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 9999;
    display: flex !important;
    align-items: center !important; /* Centrado vertical de todo */
    justify-content: space-between !important;
    padding: 15px 5% !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Fondo blanco suave al bajar */
.header-luxury.is-scrolled,
.header-luxury:hover {
    background-color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* 3. ARREGLO DE COLORES DEL MENÚ DE TEXTO */
.header-luxury .wp-block-navigation-item__label,
.header-luxury a,
.header-luxury span {
    color: var(--luxury-color) !important;
    transition: color 0.3s ease;
}

/* 4. TAMANO Y COLOR DE ICONOS */
.lux-wishlist svg,
.lux-cart svg,
.lux-user svg,
.lux-search-icon svg {
    width: var(--lux-icon-size) !important;
    height: var(--lux-icon-size) !important;
    display: block !important;
}

.header-luxury .wp-block-group.is-layout-flex {
    gap: 25px !important;
}

.lux-wishlist,
.lux-cart,
.lux-user,
.lux-search,
[id*="wc-booster-search-block"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    line-height: 1 !important;
    transition: transform 0.2s ease;
}

.lux-wishlist:hover,
.lux-cart:hover,
.lux-user:hover,
.lux-search:hover,
[id*="wc-booster-search-block"]:hover {
    transform: scale(1.08);
}

.lux-wishlist .wc-booster-wishlist-menu,
.lux-wishlist .wc-booster-wishlist-menu i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--lux-icon-size) !important;
    line-height: 1 !important;
}

.header-luxury .lux-cart svg path,
.header-luxury .lux-cart svg circle,
.header-luxury .lux-cart svg rect,
.header-luxury .lux-user svg path,
.header-luxury .lux-user svg circle,
.header-luxury .lux-user svg rect {
    fill: var(--luxury-color) !important;
    stroke: none !important;
    transition: all 0.3s ease;
}

.lux-cart svg,
.lux-user svg {
    transform: scale(var(--lux-svg-scale));
    transform-origin: center;
}

.lux-wishlist,
.lux-cart,
.lux-user,
.lux-logo,
.lux-search,
[id*="wc-booster-search-block"],
.lux-user *,
.lux-wishlist *,
.lux-cart *,
.lux-search * {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.lux-cart { position: relative !important; }
.lux-wishlist { position: relative !important; }

.header-luxury .wc-block-mini-cart__badge,
.header-luxury .wishlist-count {
    background-color: #ffffff !important;
    color: #000000 !important;
    position: absolute !important;
    top: -4px;
    right: -6px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    z-index: 10;
    transition: all 0.4s ease;
    border: 1px solid rgba(0,0,0,0.1);
}

.header-luxury.is-scrolled .wc-block-mini-cart__badge,
.header-luxury:hover .wc-block-mini-cart__badge,
.header-luxury.is-scrolled .wishlist-count,
.header-luxury:hover .wishlist-count {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.1);
}

.wc-block-mini-cart__badge {
    opacity: 1 !important;
    visibility: visible !important;
}

.header-luxury .wc-booster-wishlist-menu,
.header-luxury .wc-booster-wishlist-menu i,
.header-luxury .wc-booster-wishlist-menu i::before {
    color: var(--luxury-color) !important;
}

/* 7. BUSCADOR: una sola lupa personalizada */
.lux-search .wp-block-search__label,
.lux-search .wp-block-search__input,
.lux-search .wp-block-search__inside-wrapper,
.lux-search .wp-block-search__inside-wrapper input,
.wp-block-search.lux-search .wp-block-search__input,
.lux-search .wp-block-search__button,
.wp-block-search.lux-search .wp-block-search__button,
.lux-search select.wc-booster-product,
.lux-search .wc-booster-search-form,
.lux-search .select2-container,
[id*="wc-booster-search-block"] .wc-booster-search-form,
[id*="wc-booster-search-block"] select.wc-booster-product,
[id*="wc-booster-search-block"] .select2-container {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    border: none !important;
    pointer-events: none !important;
}

.lux-search-icon {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.lux-search-icon svg {
    width: var(--lux-icon-size) !important;
    height: var(--lux-icon-size) !important;
    fill: var(--luxury-color);
    stroke: var(--luxury-color);
    stroke-width: 0.5px;
    transform: scaleX(-1);
    transition: fill 0.3s ease, stroke 0.3s ease;
    display: block;
}

.lux-search-icon:hover {
    transform: scale(1.1);
}

/* =========================================
   8. SEARCH OVERLAY FULLSCREEN (LUXURY)
   ========================================= */

.lux-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        backdrop-filter 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.lux-search-overlay.is-active {
    opacity: 1;
    visibility: visible;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* Botón cerrar */
.lux-search-overlay__close {
    position: absolute;
    top: 32px;
    right: 40px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 42px;
    font-weight: 200;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s ease, transform 0.3s ease;
    padding: 0;
}

.lux-search-overlay__close:hover {
    color: #ffffff;
    transform: rotate(90deg);
}

/* Formulario central */
.lux-search-overlay__form {
    width: 60%;
    max-width: 720px;
    position: relative;
    transform: translateY(30px);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

.lux-search-overlay.is-active .lux-search-overlay__form {
    transform: translateY(0);
}

/* Input gigante minimalista */
.lux-search-overlay__input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-family: inherit;
    font-size: clamp(24px, 4vw, 48px);
    font-weight: 300;
    letter-spacing: 0.04em;
    padding: 16px 0;
    caret-color: #ffffff;
}

.lux-search-overlay__input::placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-weight: 200;
}

/* Línea inferior animada */
.lux-search-overlay__line {
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    position: relative;
}

.lux-search-overlay__line::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1px;
    background: #ffffff;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.lux-search-overlay__input:focus ~ .lux-search-overlay__line::after {
    width: 100%;
    left: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .lux-search-overlay__form {
        width: 85%;
    }

    .lux-search-overlay__close {
        top: 20px;
        right: 24px;
        font-size: 36px;
    }
}

/* =========================================
   9. GALERÍA CATEGORÍAS: HOVER + ACCESSIBLE + TOUCH
   ========================================= */

.lux-category-card {
    overflow: hidden !important;
    cursor: pointer;
    position: relative;
}

.lux-category-card img.wp-block-cover__image-background {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.lux-category-card .wp-block-cover__background,
.lux-category-card .wp-block-cover__background.has-background-dim {
    background-color: #000000 !important;
    opacity: 0 !important;
    transition: opacity 0.45s ease !important;
}

.lux-category-card .wp-block-cover__inner-container > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.lux-category-card:is(:hover, :focus-within) img.wp-block-cover__image-background {
    transform: scale(1.05) !important;
}

.lux-category-card:is(:hover, :focus-within) .wp-block-cover__background,
.lux-category-card:is(:hover, :focus-within) .wp-block-cover__background.has-background-dim {
    opacity: 0.5 !important;
}

.lux-category-card:is(:hover, :focus-within) .wp-block-cover__inner-container > * {
    opacity: 1;
    transform: translateY(0);
}

/* Touch devices: mantener legibilidad sin hover */
@media (hover: none), (pointer: coarse) {
    .lux-category-card .wp-block-cover__background,
    .lux-category-card .wp-block-cover__background.has-background-dim {
        opacity: 0.28 !important;
    }

    .lux-category-card .wp-block-cover__inner-container > * {
        opacity: 1;
        transform: none;
    }

    .lux-category-card img.wp-block-cover__image-background {
        transform: none !important;
    }
}

/* Respeta preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .lux-category-card *,
    .lux-category-card *::before,
    .lux-category-card *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* =========================================
   10. CONTROL DE BREAKPOINT (ANTI-LINE-BREAK)
   ========================================= */

@media (max-width: 1200px) {
    .header-luxury .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }

    .header-luxury .wp-block-navigation__responsive-container-open {
        display: flex !important;
        color: var(--luxury-color) !important;
    }

    .header-luxury .wp-block-navigation {
        margin-right: auto !important;
        padding-left: 10px !important;
    }
}

.header-luxury.header-luxury--mobile-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
}

.header-luxury.header-luxury--mobile-nav .wp-block-navigation__responsive-container-open {
    display: flex !important;
    color: var(--luxury-color) !important;
}

.header-luxury.header-luxury--mobile-nav .wp-block-navigation {
    margin-right: auto !important;
    padding-left: 10px !important;
}

/* =========================================
   11. HEADER MÓVIL TIPO "LOUIS VUITTON" (≤768px)
   ========================================= */

@media (max-width: 768px) {
    .header-luxury {
        padding: 12px 4% !important;
        align-items: center !important;
        position: relative !important;
    }

    /* 1) Ocultar enlaces de navegación en móvil (solo hamburguesa) */
    .header-luxury .wp-block-navigation__container,
    .header-luxury .wp-block-navigation__container > li {
        display: none !important;
    }

    /* 2) Forzar visibilidad del botón hamburguesa (izquierda) */
    .header-luxury .wp-block-navigation__responsive-container-open {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 6px !important;
    }

    /* 3) Layout natural: hamburguesa | logo centrado | iconos derecha */
    .header-luxury {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    .header-luxury .wp-block-navigation__responsive-container-open {
        order: 1;
        flex: 0 0 auto;
    }

    /* Enlace del logo: lo convertimos en columna central flexible */
    .header-luxury > a,
    .header-luxury .wp-block-site-logo,
    .header-luxury .lux-logo,
    .header-luxury .site-logo {
        order: 2;
        flex: 1 1 auto;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    /* Grupo de iconos a la derecha (usuario + carrito) */
    .header-luxury .wp-block-group.is-layout-flex,
    .header-luxury .lux-icons,
    .header-luxury .header-actions {
        order: 3;
        flex: 0 0 auto;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    /* 5) Ocultar buscador en móvil (pero mantener en desktop) */
    .header-luxury .lux-search,
    .header-luxury .lux-search-icon,
    .header-luxury .wp-block-search,
    .header-luxury .wp-block-search__button,
    .header-luxury .wp-block-search__input {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* También ocultar cualquier botón/elemento de búsqueda alternativo */
    .header-luxury [role="search"],
    .header-luxury button[aria-label*="Buscar"],
    .header-luxury .search-toggle,
    .header-luxury .wc-booster-search,
    .header-luxury .wc-booster-search-block {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Limitar tamaño del logo para que ajuste de forma natural */
    .header-luxury > a img,
    .header-luxury .wp-block-site-logo img,
    .header-luxury .lux-logo img {
        max-height: 48px !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
    }

    /* 6) Ajustes de áreas clicables para consistencia */
    .header-luxury .lux-wishlist,
    .header-luxury .lux-cart,
    .header-luxury .lux-user {
        width: 36px !important;
        height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 7) Si usamos la clase automática, aplicamos la misma lógica */
    .header-luxury.header-luxury--mobile-nav .wp-block-navigation__container { display: none !important; }
}
/* =========================================
   12. HEADER GLOBAL REUTILIZABLE
   ========================================= */

:root {
    --lux-header-height: 82px;
}

.site-header {
    min-height: var(--lux-header-height);
}

.header-luxury {
    left: 0;
    min-height: var(--lux-header-height);
    box-sizing: border-box;
}

body:not(.home) .header-luxury {
    --luxury-color: #000000;
    background-color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.header-luxury .lux-nav,
.header-luxury .lux-icons {
    flex: 1 1 0;
}

/* FIX-MENU-SUBPAGINAS: el logo ya no ocupa un tercio fijo; el nav gana el
   mismo ancho que tiene en el home y no colapsa a hamburguesa en escritorio */
.header-luxury .lux-logo {
    flex: 0 0 auto;
}

/* FIX-MENU-SUBPAGINAS: mismos paddings laterales que las columnas del header
   del home (menú arranca 16px adentro, iconos con aire de 7px a la derecha).
   OJO: la clase lux-nav está en el <nav> Y en el <ul>; se scopea al <nav>
   para no duplicar el padding. */
.header-luxury nav.lux-nav {
    padding-left: var(--wp--preset--spacing--40);
    padding-right: var(--wp--preset--spacing--40);
}

.header-luxury .lux-icons {
    padding-right: var(--wp--preset--spacing--20);
    /* iguala el padding horizontal total del nav (2x spacing-40) para que
       ambos flancos midan lo mismo y el logo quede centrado exacto */
    padding-left: calc(2 * var(--wp--preset--spacing--40) - var(--wp--preset--spacing--20));
}

.header-luxury .lux-logo {
    display: flex !important;
    justify-content: center !important;
}

.header-luxury .lux-icons {
    justify-content: flex-end !important;
}

@media (max-width: 768px) {
    :root {
        --lux-header-height: 72px;
    }

    .header-luxury .lux-nav,
    .header-luxury .lux-icons,
    .header-luxury .lux-logo {
        flex: 0 1 auto;
    }

    .header-luxury .lux-logo {
        flex: 1 1 auto;
    }
}

/* =========================================
   13. NORMALIZACION DEL HEADER GUARDADO EN WORDPRESS
   ========================================= */

.header-luxury.alignwide,
.header-luxury.has-global-padding {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 15px 5% !important;
}

.header-luxury > .wp-block-columns {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.header-luxury > .wp-block-columns > .wp-block-column {
    min-width: 0;
    display: flex !important;
    align-items: center !important;
}

.header-luxury > .wp-block-columns > .wp-block-column:nth-child(1) {
    flex: 1 1 0 !important;
    justify-content: flex-start !important;
}

.header-luxury > .wp-block-columns > .wp-block-column:nth-child(2) {
    flex: 0 0 auto !important;
    justify-content: center !important;
}

.header-luxury > .wp-block-columns > .wp-block-column:nth-child(3) {
    flex: 1 1 0 !important;
    justify-content: flex-end !important;
}

.header-luxury > .wp-block-columns > .wp-block-column:nth-child(3) > .wp-block-group {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 25px !important;
    flex-wrap: nowrap !important;
}

.header-luxury .wp-block-site-logo {
    margin: 0 !important;
}

.header-luxury .wp-block-navigation {
    width: auto !important;
}

@media (max-width: 768px) {
    .header-luxury.alignwide,
    .header-luxury.has-global-padding {
        padding: 12px 4% !important;
    }

    .header-luxury > .wp-block-columns {
        display: grid !important;
        grid-template-columns: minmax(44px, 1fr) auto minmax(78px, 1fr);
        gap: 8px !important;
    }

    .header-luxury > .wp-block-columns > .wp-block-column:nth-child(1) {
        justify-content: flex-start !important;
    }

    .header-luxury > .wp-block-columns > .wp-block-column:nth-child(2) {
        justify-content: center !important;
    }

    .header-luxury > .wp-block-columns > .wp-block-column:nth-child(3) {
        justify-content: flex-end !important;
    }

    .header-luxury > .wp-block-columns > .wp-block-column:nth-child(3) > .wp-block-group {
        gap: 10px !important;
    }

    .header-luxury .wp-block-navigation {
        margin: 0 !important;
        padding-left: 0 !important;
    }
}

/* Buscador WC Booster dentro del header global */
.header-luxury [id*="wc-booster-search-block"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    line-height: 1 !important;
    transition: transform 0.2s ease;
}

.header-luxury [id*="wc-booster-search-block"]:hover {
    transform: scale(1.08);
}

.header-luxury [id*="wc-booster-search-block"] form,
.header-luxury [id*="wc-booster-search-block"] select,
.header-luxury [id*="wc-booster-search-block"] .select2-container {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden !important;
    border: none !important;
}

@media (max-width: 768px) {
    .header-luxury [id*="wc-booster-search-block"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ===== FIX-GALERIA-MULTI: galería de producto con varias imágenes ===== */
/* WooCommerce no da altura al carrusel interno; con >1 imagen colapsa. */
.wc-block-product-gallery-large-image { aspect-ratio: 1 / 1; }
.wc-block-product-gallery-large-image__container,
.wc-block-product-gallery-large-image__wrapper,
.wc-block-product-gallery-large-image .wc-block-components-product-image,
.wc-block-product-gallery-large-image .wc-block-components-product-image > a {
    height: 100% !important;
    width: 100% !important;
}
.wc-block-product-gallery-large-image .wc-block-components-product-image img {
    height: 100% !important;
    width: 100% !important;
    object-fit: contain !important;
}
/* ===== /FIX-GALERIA-MULTI ===== */

/* ===== STICKY-GALLERY: galeria tipo LV (todos los productos, escritorio) ===== */
@media (min-width: 1024px) {
  body.single-product .wp-block-columns.alignwide { align-items: stretch; }

  /* Galeria: apilar TODAS las imagenes en columna, pegadas sin espacio */
  body.single-product .wc-block-product-gallery { display: block; }
  body.single-product .wc-block-product-gallery-large-image {
    aspect-ratio: auto !important;
    overflow: visible !important;
  }
  body.single-product .wc-block-product-gallery-large-image__container {
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
    gap: 0 !important;
  }
  body.single-product .wc-block-product-gallery-large-image__wrapper,
  body.single-product .wc-block-product-gallery-large-image__wrapper[hidden] {
    display: block !important;
    height: auto !important;
  }
  body.single-product .wc-block-product-gallery-large-image__wrapper img {
    display: block;
    width: 100% !important;
    height: auto !important;
    cursor: pointer;
  }
  body.single-product .wc-block-product-gallery-thumbnails,
  /* Gallery content must remain visible even if AOS loads late. */
  body.single-product .wc-block-product-gallery-large-image__wrapper,
  body.single-product .wc-block-product-gallery-large-image__wrapper[data-aos] {
    opacity: 1 !important;
    visibility: visible !important;
  }
  body.single-product .wc-block-next-previous-buttons { display: none !important; }

  /* Panel derecho pegado mientras corren las fotos */
  body.single-product .wp-block-columns.alignwide > .wp-block-column:nth-child(2) {
    position: sticky;
    top: 100px;
    align-self: flex-start;
    height: fit-content;
  }

  /* Fade suave estilo LV al hacer scroll: recorrido corto, sin salto brusco (AOS anima opacidad y transform) */
  body.single-product .wc-block-product-gallery-large-image__wrapper[data-aos="fade-up"] {
    transform: translate3d(0, 40px, 0);
  }
}

/* Visor (dialog): UNA imagen a la vez, centrada, flechas para navegar */
.wc-block-product-gallery-dialog .wc-block-product-gallery-dialog__content {
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden !important;
  gap: 0 !important;
}
.wc-block-product-gallery-dialog .wc-block-product-gallery-dialog__content img {
  display: none !important;
  height: auto !important;
  max-height: calc(100vh - 110px);
  width: auto !important;
  max-width: 92vw;
  object-fit: contain;
  margin: 0 !important;
}
.wc-block-product-gallery-dialog .wc-block-product-gallery-dialog__content img.lux-active {
  display: block !important;
}
.lux-dialog-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100001;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  font-size: 18px;
  line-height: 1; padding: 0; align-items: center; justify-content: center;
  cursor: pointer;
  display: none;
}
.lux-dialog-nav--prev { left: 24px; }
.lux-dialog-nav--next { right: 24px; }
dialog[open] .lux-dialog-nav { display: flex; }
/* ===== /PROTO-STICKY-GALLERY ===== */

/* Visor por encima del header del sitio */
dialog.wc-block-product-gallery-dialog { z-index: 100000 !important; }

/* ===== FULL-BLEED-GALLERY: la columna de fotos llega al borde izquierdo (escritorio) ===== */
@media (min-width: 1024px) {
  body.single-product main .wp-block-columns.alignwide {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    gap: 0 !important;
  }
  /* el panel derecho conserva aire interno */
  body.single-product main .wp-block-columns.alignwide > .wp-block-column:nth-child(2) {
    padding-left: 3rem;
    padding-right: 3rem;
    box-sizing: border-box;
  }
  /* recorta el desborde de 100vw sin romper el sticky */
  body.single-product { overflow-x: clip; }
}
/* ===== /FULL-BLEED-GALLERY ===== */

/* ===== LUX-HOME-COLLECTION: seccion "Lo Mas Vendido" estilo LV (portada) ===== */
/* Eyebrow */
body.home .lux-eyebrow {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #111;
  margin-bottom: 8px !important;
  font-weight: 500;
}
/* Titulo de la seccion */
body.home h2.has-large-font-size.has-text-align-center {
  font-family: 'Marcellus', serif !important;
  font-weight: 400 !important;
  font-size: 34px !important;
  letter-spacing: .01em;
  margin-bottom: 40px !important;
}
/* Tarjetas: fondo blanco uniforme, sin bordes, imagen proporcional */
body.home .wc-booster-carousel-product-card,
body.home .wc-booster-carousel-product-inner-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* La zona de imagen respeta el tamano configurado en el editor del bloque */
body.home .wc-booster-carousel-product-card-image {
  background: transparent !important;
}
/* Nombre y precio centrados (como el editor) */
body.home .wc-booster-carousel-product-body,
body.home .wc-booster-carousel-product-post-title,
body.home .wc-booster-carousel-product-post-title a,
body.home .wc-booster-carousel-product-price,
body.home .wc-booster-carousel-product-post-cat {
  text-align: center !important;
}
body.home .wc-booster-carousel-product-post-title,
body.home .wc-booster-carousel-product-post-title a {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #111 !important;
  text-decoration: none;
}
body.home .wc-booster-carousel-product-price,
body.home .wc-booster-carousel-product-price .woocommerce-Price-amount {
  font-size: 14px !important;
  color: #767676 !important;
  font-weight: 400 !important;
}
/* Boton pill centrado */
body.home .lux-pill .wp-block-button__link {
  background: transparent !important;
  color: #111 !important;
  border: 1px solid #000 !important;
  border-radius: 999px !important;
  padding: 12px 32px !important;
  font-size: 14px !important;
  font-weight: 400;
  transition: background .25s ease, color .25s ease;
}
body.home .lux-pill .wp-block-button__link:hover {
  background: #000 !important;
  color: #fff !important;
}
/* ===== /LUX-HOME-COLLECTION ===== */

/* La imagen se muestra COMPLETA (el plugin usa cover y recorta) */
body.home img.wc-booster-carousel-product-card-image {
  object-fit: contain !important;
  object-position: center bottom;
}

/* ===== LUX-HOME-GRID: grilla nativa "Lo Mas Vendido" estilo LV ===== */
/* Ancho acotado como LV: la seccion completa (titulo, tarjetas y boton) cabe
   en una pantalla; el bloque trae alignwide y se iba de borde a borde */
body.home .lux-home-grid {
  max-width: min(1320px, 90vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.home .lux-home-grid .wc-block-product-template__responsive { gap: 16px; }

/* Tarjeta de foto: proporcion 3:4 identica en todas, fondo gris claro como LV
   (el bloque trae aspect-ratio 1 y scale contain desde la BD; se pisa con !important) */
body.home .lux-home-grid .wc-block-components-product-image {
  background: #f6f5f3;
  margin-bottom: 0;
  aspect-ratio: 3 / 4 !important;
  overflow: hidden;
}
body.home .lux-home-grid .wc-block-components-product-image a { display: block; height: 100%; }
body.home .lux-home-grid .wc-block-components-product-image img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
}

/* Nombre y precio alineados a la izquierda, compactos (el bloque los centra; se pisa) */
body.home .lux-home-grid .wp-block-post-title,
body.home .lux-home-grid .wp-block-post-title a {
  font-size: 14px; font-weight: 400; color: #111; text-decoration: none;
}
body.home .lux-home-grid .wp-block-post-title {
  text-align: left !important;
  margin: 14px 0 2px !important;
}
body.home .lux-home-grid .wc-block-components-product-price {
  font-size: 14px; color: #767676;
  display: block;
  text-align: left !important;
  margin: 0 !important;
  /* reserva la linea aunque el producto no tenga precio: todas las tarjetas
     miden lo mismo y los botones quedan alineados */
  min-height: 1.45em;
}

/* Add to Cart solo al pasar el mouse: conserva su espacio (sin saltos de layout) */
body.home .lux-home-grid .wc-block-components-product-button {
  margin-top: 10px;
  text-align: left !important;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
body.home .lux-home-grid li:hover .wc-block-components-product-button,
body.home .lux-home-grid li:focus-within .wc-block-components-product-button {
  opacity: 1;
  transform: translateY(0);
}
@media (hover: none) {
  /* tactil: sin hover, el boton queda siempre visible */
  body.home .lux-home-grid .wc-block-components-product-button { opacity: 1; transform: none; }
}
body.home .lux-home-grid .wc-block-components-product-button .wp-block-button__link {
  font-size: 13px; padding: 10px 24px; border-radius: 999px;
  background: #111 !important; color: #fff !important; border: none;
  line-height: 1.2;
}
/* Woo inyecta un enlace "View cart" junto al boton cuando el producto ya esta
   en el carrito; agranda el contenedor y rompe la tarjeta limpia estilo LV */
body.home .lux-home-grid .wc-block-components-product-button .added_to_cart {
  display: none !important;
}
/* ===== /LUX-HOME-GRID ===== */

/* ===== LUX-GRID-SLIDER: pista deslizable por pasos (arrastre = 1 tarjeta, suave) ===== */
@media (min-width: 1024px) {
  body.home .lux-home-grid ul.wc-block-product-template {
    display: flex !important;
    flex-wrap: nowrap !important;
    /* x oculto para el desplazamiento del slider; y oculto EXPLICITO:
       si se deja implicito el navegador lo vuelve "auto" y pinta una barra
       de scroll vertical por el mini-desborde del boton oculto del hover */
    overflow-x: hidden;
    overflow-y: hidden;
    cursor: grab;
    gap: 16px;
  }
  body.home .lux-home-grid ul.wc-block-product-template:active { cursor: grabbing; }
  body.home .lux-home-grid ul.wc-block-product-template > li {
    flex: 0 0 calc(25% - 12px) !important;
  }
  body.home .lux-home-grid ul.wc-block-product-template img,
  body.home .lux-home-grid ul.wc-block-product-template a {
    -webkit-user-drag: none;
    user-select: none;
  }
}
/* ===== /LUX-GRID-SLIDER ===== */

/* ===== LUX-GRID-SLIDER-RESPONSIVE ===== */
/* El bloque original solo convertia la grilla en slider desde 1024px. En
   tablet y movil WooCommerce recuperaba cuatro columnas y el contenido se
   desbordaba. La pista ahora conserva el mismo comportamiento en todos los
   anchos, con una cantidad de tarjetas adecuada para cada pantalla. */
body.home .lux-home-grid {
  overflow: hidden;
}
body.home .lux-home-grid ul.wc-block-product-template {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  cursor: grab;
}
body.home .lux-home-grid ul.wc-block-product-template:active {
  cursor: grabbing;
}
body.home .lux-home-grid ul.wc-block-product-template > li {
  flex: 0 0 calc(25% - 12px) !important;
  min-width: 0 !important;
  box-sizing: border-box;
}
body.home .lux-home-grid ul.wc-block-product-template img,
body.home .lux-home-grid ul.wc-block-product-template a {
  -webkit-user-drag: none;
  user-select: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
  body.home .lux-home-grid {
    max-width: 92vw !important;
  }
  body.home .lux-home-grid ul.wc-block-product-template > li {
    flex-basis: calc(50% - 8px) !important;
  }
}

@media (max-width: 767px) {
  body.home .lux-home-grid {
    max-width: calc(100vw - 32px) !important;
  }
  body.home h2.has-large-font-size.has-text-align-center {
    font-size: 28px !important;
    margin-bottom: 28px !important;
  }
  body.home .lux-home-grid .wc-block-product-template__responsive {
    gap: 12px;
  }
  body.home .lux-home-grid ul.wc-block-product-template {
    gap: 12px;
  }
  body.home .lux-home-grid ul.wc-block-product-template > li {
    flex-basis: 100% !important;
  }
}
/* ===== /LUX-GRID-SLIDER-RESPONSIVE ===== */