/* =============================================================================
   WooCommerce Shop — Catálogo Centro Naturista Alianza Vital
   Prefijo: .av-shop-
   PNGs transparentes sin marcos. Solo: imagen + nombre + precio + CTA Comprar.
   ============================================================================= */

.woocommerce.archive {
    background: #FFFFFF;
}

/* Reset de notices/breadcrumbs/orderby que sobran en el catálogo limpio */
.woocommerce-notices-wrapper:empty,
.woocommerce-result-count,
.woocommerce-ordering,
.woocommerce-breadcrumb {
    display: none !important;
}

/* Encabezado de página por defecto de WC (oculto, usamos nuestro hero) */
.woocommerce-products-header { display: none !important; }

/* Página title de Astra/WC: oculto en el shop */
.ast-archive-title-wrap,
.woocommerce-page .ast-archive-description { display: none !important; }

/* =============================================================================
   GRID DEL CATÁLOGO
   ============================================================================= */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    /* Más gap vertical para apreciar la levitación de las cards */
    gap: clamp(3rem, 5vw, 4.5rem) clamp(1.75rem, 3vw, 2.5rem) !important;
    list-style: none !important;
    padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1.5rem, 4vw, 3rem) clamp(4rem, 7vw, 6rem) !important;
    margin: 0 auto !important;
    max-width: 1380px !important;
    background: #FFFFFF;
}

#sh-products-grid {
    /* Ancla del scroll del CTA "Ver productos" del hero */
    scroll-margin-top: 80px;
}

@media (max-width: 1180px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
@media (max-width: 860px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem 1.25rem !important;
    }
}
@media (max-width: 480px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: 1fr !important;
        padding: 2rem 1.25rem !important;
    }
}

/* =============================================================================
   CARD DE PRODUCTO — LIQUID GLASS 3D FLOAT
   Cada producto vive dentro de su propia tarjeta cristal con profundidad real:
   doble sombra (azul difusa abajo + sombra dura cerca), gradiente glassy,
   borde luminoso superior, levitación en hover.
   ============================================================================= */
.woocommerce ul.products li.product.av-shop-card,
.woocommerce-page ul.products li.product.av-shop-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 1.75rem 1.25rem 1.5rem !important;
    list-style: none !important;
    position: relative !important;
    isolation: isolate;

    /* Glass: gradiente blanco→celeste tenue, borde 1px translúcido,
       blur de fondo para "ver" la luz detrás */
    background:
        linear-gradient(155deg,
            rgba(255, 255, 255, 0.92) 0%,
            rgba(245, 249, 255, 0.82) 50%,
            rgba(231, 240, 255, 0.78) 100%
        ) !important;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    border-radius: 28px !important;

    /* PROFUNDIDAD 3D: 3 capas de sombra que simulan flotación real
       1) glow azul amplio difuso (luz reflejada bajo el cristal)
       2) sombra cercana media (contacto suave con superficie)
       3) inset highlight superior (reflejo de luz sobre el cristal)
       4) inset shadow inferior (curvatura interna del cristal) */
    box-shadow:
        0 30px 60px -20px rgba(0, 47, 217, 0.28),
        0 18px 32px -16px rgba(0, 47, 217, 0.20),
        0 4px 12px rgba(10, 26, 46, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(0, 47, 217, 0.06) !important;

    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
    transform: translateZ(0);
    will-change: transform;
}

/* Highlight superior diagonal (vidrio iluminado) — ::before */
.av-shop-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0) 32%,
        rgba(255, 255, 255, 0) 68%,
        rgba(56, 190, 255, 0.10) 100%
    );
    mix-blend-mode: screen;
    opacity: 0.85;
    z-index: 1;
}

/* Reflexión inferior — falsa "sombra del objeto" sobre la superficie del cristal */
.av-shop-card::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -14px;
    height: 24px;
    background: radial-gradient(ellipse at center, rgba(0, 47, 217, 0.18), transparent 70%);
    filter: blur(8px);
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.55s ease, transform 0.55s ease;
}

/* Hover: levantar la card + intensificar sombras (efecto float) */
.av-shop-card:hover {
    transform: translateY(-10px) !important;
    box-shadow:
        0 50px 90px -22px rgba(0, 47, 217, 0.38),
        0 28px 50px -20px rgba(0, 47, 217, 0.26),
        0 6px 16px rgba(10, 26, 46, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(0, 47, 217, 0.08) !important;
}
.av-shop-card:hover::after {
    transform: scaleX(1.1);
    opacity: 0.65;
}

/* Asegurar que el contenido interior queda por encima del ::before */
.av-shop-card > * { position: relative; z-index: 2; }

/* Suprime cualquier rating, sale flash, badge nativo de WC */
.av-shop-card .star-rating,
.av-shop-card .woocommerce-loop-product__link > .price,
.av-shop-card .onsale,
.av-shop-card .wc-block-components-product-button,
.av-shop-card .add_to_cart_button,
.av-shop-card .ajax_add_to_cart,
.av-shop-card .button.product_type_simple,
.av-shop-card .woocommerce-loop-category__title,
.av-shop-card .woocommerce-product-rating {
    display: none !important;
}

/* =============================================================================
   IMAGEN — PNG transparente con sombra natural, sin marco
   ============================================================================= */
.av-shop-card .av-shop-card__media {
    width: 100% !important;
    padding: 0.5rem 0 1.25rem !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    aspect-ratio: 1 / 1;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

.av-shop-card .av-shop-card__img {
    display: block !important;
    width: 100% !important;
    max-width: 200px !important;
    height: auto !important;
    max-height: 240px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    /* Sombra azul más sutil — el cristal ya aporta profundidad */
    filter:
        drop-shadow(0 16px 22px rgba(0, 47, 217, 0.18))
        drop-shadow(0 5px 10px rgba(0, 0, 0, 0.08)) !important;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.55s ease !important;
    user-select: none;
    -webkit-user-drag: none;
}

/* Producto flota MÁS dentro del cristal al pasar el cursor */
.av-shop-card:hover .av-shop-card__img {
    transform: translateY(-6px) scale(1.05);
    filter:
        drop-shadow(0 26px 32px rgba(0, 47, 217, 0.26))
        drop-shadow(0 8px 14px rgba(0, 0, 0, 0.10)) !important;
}

/* =============================================================================
   BODY — nombre + precio
   ============================================================================= */
.av-shop-card .av-shop-card__body {
    margin-top: 1rem;
    padding: 0 0.5rem;
    width: 100%;
}

.av-shop-card .av-shop-card__title {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    color: #0A1A2E !important;
    margin: 0 0 0.45rem !important;
    padding: 0 !important;
}
.av-shop-card .av-shop-card__title a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.25s ease;
}
.av-shop-card:hover .av-shop-card__title a { color: #002FD9 !important; }

.av-shop-card .av-shop-card__price {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: #002FD9 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}
.av-shop-card .av-shop-card__price del {
    color: #94A3B8 !important;
    font-weight: 500 !important;
    margin-right: 0.45rem;
    font-size: 0.92em;
}
.av-shop-card .av-shop-card__price ins {
    background: transparent !important;
    text-decoration: none !important;
    color: #002FD9 !important;
}

/* =============================================================================
   CTA Comprar → WhatsApp
   ============================================================================= */
.av-shop-card .av-shop-card__cta,
.av-shop-card .av-shop-card__cta:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    margin-top: 1.1rem !important;
    padding: 0.78rem 1.6rem !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    color: #FFFFFF !important;
    background: #002FD9 !important;
    border: 1.5px solid #002FD9 !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow:
        0 4px 18px rgba(0, 47, 217, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
    white-space: nowrap !important;
}
.av-shop-card .av-shop-card__cta:hover {
    transform: translateY(-2px);
    background: #001DB0 !important;
    border-color: #001DB0 !important;
    box-shadow:
        0 8px 28px rgba(0, 47, 217, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
}
.av-shop-card .av-shop-card__cta:active { transform: translateY(0); }

/* =============================================================================
   Defensive — anular cualquier add-to-cart heredado de WC en el contexto del shop
   ============================================================================= */
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .ajax_add_to_cart,
.woocommerce ul.products li.product .added_to_cart {
    display: none !important;
}