/*
 Theme Name: AndreaSha Shop Child
 Description: Tema hijo de Astra para AndreaSha Shop
 Author: Joss
 Template: astra
 Version: 2.3.1
 Text Domain: andreasha-child
*/

@font-face {
    font-family: 'BillaMount';
    src: local('Billa Mount'), local('BillaMount-Regular'), url('./fonts/BillaMount-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DigitalDrip';
    src: url('fonts/DigitalDrip.ttf') format('truetype');
}


/* Mostrar botón aunque el theme lo oculte */
@media (max-width: 768px) {

    .woocommerce ul.products li.product .product_type_variable,
    .woocommerce ul.products li.product .add_to_cart_button {
        display: block !important;
    }

}

@media (max-width: 768px) {
    .custom-mobile-btn {
        display: block !important;
        text-align: center;
        margin: 10px auto;
    }
}

/* Astra – reducir espacio en texto de productos */
.woocommerce-product-details__short-description p,
.woocommerce-Tabs-panel--description p {
    margin: 0;
    line-height: 2;
}

/* FIX Chrome Mac – select de variaciones con texto invisible */
.woocommerce div.product form.cart select {
  -webkit-appearance: menulist;
  appearance: menulist;
  color: #555 !important;
  background-color: #fff !important;
}

/* Placeholder "elige una opción" gris */
.woocommerce div.product form.cart select option[value=""] {
  color: #999;
}




/* =========================
   PRELOADER 
   ========================= */

.site-preloader {
  position: fixed;
  inset: 0;
  background: #FCFBFC;
  z-index: 999999;

  display: flex;
  align-items: center;
  justify-content: center;

  animation: preloader-fade 4.5s ease forwards;
}

/* CAPA QUE SE DESVANECE (SIN BLUR) */
.preloader-media {
  opacity: 1;
  animation: media-fade 4.8s ease forwards;
}

/* MEDIA REAL (SOLO BLUR AL INICIO) */
.preloader-media img,
.preloader-media video {
  width: 80vw;
  max-width: 420px;
  height: auto;

  filter: blur(22px);
  animation: media-blur 4.8s cubic-bezier(.4,0,.2,1) forwards;
}

/* MOBILE */
@media (max-width: 768px) {
  .preloader-media img,
  .preloader-media video {
    width: 90vw;
  }
}

/* DESKTOP */
@media (min-width: 1024px) {
  .preloader-media img,
  .preloader-media video {
    max-width: 360px;
  }
}

/* =========================
   ANIMACIONES
   ========================= */

/* SOLO BLUR → CLARO (NO FADE) */
@keyframes media-blur {
  0% {
    filter: blur(22px);
  }

  40% {
    filter: blur(0);
  }

  100% {
    filter: blur(0);
  }
}

/* SOLO FADE (SIN BLUR JAMÁS) */
@keyframes media-fade {
  0%,
  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* APAGA OVERLAY */
@keyframes preloader-fade {
  0%,
  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}


/* =========================
   FIX FONDO BLANCO DESKTOP
   ========================= */

.site-preloader {
  overflow: visible;
}

.site-preloader::before {
  content: "";
  position: fixed;
  top: -20vh;
  left: -20vw;
  right: -20vw;
  bottom: -20vh;
  background: #FCFBFC;
  z-index: -1;
}


/* ====================================================================== */
/* =========================  MENÚ ESCRITORIO  ========================== */
/* ====================================================================== */

/* Tipografía, tamaño y color del menú */
.ast-desktop .main-header-menu > .menu-item > a {
    font-family: 'BillaMount', sans-serif !important;
    font-size: 20px !important;
    color: #000000 !important;
    letter-spacing: 0.5px;
}

/* Hover */
.ast-desktop .main-header-menu > .menu-item > a:hover {
    color: #000000 !important;
}

/* Fondo del header escritorio */
.main-header-bar,
.site-header {
    background-color: #ffffff !important;
}

/* Header transparente → sigue blanco */
.ast-transparent-header .main-header-bar {
    background-color: #ffffff !important;
}

/* Submenús */
.main-header-menu .sub-menu a {
    font-family: 'BillaMount', sans-serif !important;
    color: #000000 !important;
    font-size: 18px !important;
}


/* ====================================================================== */
/* ===========================  MENÚ MÓVIL  ============================= */
/* ====================================================================== */

/* Items del menú móvil */
.ast-mobile-popup-drawer .main-header-menu .menu-link {
    font-family: 'BillaMount', sans-serif !important;
    font-size: 20px !important;
    color: #000000 !important;
}

/* Submenú móvil */
.ast-mobile-popup-drawer .main-header-menu .sub-menu .menu-link {
    font-family: 'BillaMount', sans-serif !important;
    font-size: 18px !important;
}

/* Header transparente SOLO en Home (móvil) */
.home.ast-header-break-point .main-header-bar,
.home.ast-header-break-point .site-header,
.home.ast-transparent-header .main-header-bar {
    background-color: transparent !important;
}

/* Header blanco en el resto de páginas (móvil) */
:not(.home).ast-header-break-point .main-header-bar,
:not(.home).ast-header-break-point .site-header,
:not(.home).ast-transparent-header .main-header-bar {
    background-color: #ffffff !important;
}

/* Elimina el hueco del header en móvil */
.ast-header-break-point .main-header-bar,
.ast-header-break-point .ast-mobile-menu-buttons,
.ast-header-break-point .ast-builder-menu-1 {
    backdrop-filter: none !important;
}

/* Tipografía del menú móvil */
.ast-mobile-header-wrap .ast-header-navigation .menu-item a,
.ast-mobile-header-wrap .main-header-menu .menu-link {
    font-family: 'BillaMount', sans-serif !important;
    font-size: 20px !important;
    color: #000 !important;
}

/* Icono del menú — blanco solo en Home */
.home .ast-mobile-menu-trigger,
.home .ast-mobile-menu-trigger * {
    filter: brightness(0) invert(1) !important;
}


/* ============================================= */
/* ESTRELLA ROSA  — DESKTOP (SIGUE EL SCROLL)           */
/* ============================================= */

.imagen-frente-wrapper {
    position: fixed !important; /* 👈 SE QUEDA FIJA EN DESKTOP */
    top: 110px;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 999999 !important;
    display: flex !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    pointer-events: none;
}

.imagen-frente-wrapper .link-frente {
    pointer-events: auto;
}

.imagen-frente {
    width: 200px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    opacity: 0;
    animation: fadeInSlide 2s ease-out forwards;
	animation-delay: 3.5s;
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================= */
/* MÓVIL — BAJA CON EL CONTENIDO (NO SE ENCIMA)  */
/* ============================================= */

@media (max-width: 768px) {

    .imagen-frente-wrapper {
        position: fixed !important; /* 👈 CLAVE */
        top: 100px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-top: 0px !important;
        z-index: 10 !important;
    }

    .imagen-frente {
        width: 160px !important;
    }
}

/* ============================================= */
/* OCULTAR CUANDO MENÚ MÓVIL ESTÁ ABIERTO         */
/* ============================================= */

html.ast-off-canvas-active .imagen-frente-wrapper {
    display: none !important;
}

/* ============================================= */
/* OCULTAR CUANDO CARRITO ESTÁ ABIERTO            */
/* ============================================= */

html.ast-mobile-cart-active .imagen-frente-wrapper,
html.ast-cart-active .imagen-frente-wrapper,
html.ast-sticky-cart-active .imagen-frente-wrapper,
html.woocommerce-cart-active .imagen-frente-wrapper {
    display: none !important;
}


/*--------------------------------ESTRELLA ROSA EN MENU--------------------------------*/ 
.home .menu-logo {
  display: none;
}

.menu-logo {
  width: 45px;   /* AJUSTA ESTE VALOR */
  max-width: none;
  height: auto;
  display: block;
}


/* ====================================================================== */
/* ==========================  SCROLL / BODY  =========================== */
/* ====================================================================== */

/* Evita scroll lateral (clip, no hidden — hidden rompe position:sticky) */
body {
    overflow-x: clip !important;
}


/* ====================================================================== */
/* ============================  TICKER TOP  ============================ */
/* ====================================================================== */

body::before {
    content: "🥀🏰 Subscribe to our newsletter for early access to exclusive events, drops and sales 🍥🪽   🥀🏰 Subscribe to our newsletter for early access to exclusive events, drops and sales 🍥🪽   🥀🏰 Subscribe to our newsletter for early access to exclusive events, drops and sales 🍥🪽   🥀🏰 Subscribe to our newsletter for early access to exclusive events, drops and sales 🍥🪽   🥀🏰 Subscribe to our newsletter for early access to exclusive events, drops and sales 🍥🪽";
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    overflow: hidden;
    background: #ffffff;
    color: #000000;
    font-size: 10px;
    line-height: 14px;
    font-family: Arial, sans-serif !important;
    z-index: 999;
    display: inline-block;
    animation: topScroll 60s linear infinite;
    width: max-content;
    padding: 4px 0;
}

.site-header {
    margin-top: 1px !important;
}

@keyframes topScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


/* ====================================================================== */
/* ===================== ESTRELLA GLOBAL AZUL ================== */
/* ====================================================================== */

.main-header-menu > li > a {
    position: relative;
    padding-right: 30px;
}

/* Hover + Activo (EXCEPTO Tienda/Shop — excluido por ID fijo de producción
   Y por clase dinámica que el JS le pone al item real, para que funcione
   igual sin importar el ID en cada sitio) */
.main-header-menu > li:not(.menu-item-3249):not(.ast-shop-menu-item) > a:hover::after,
.main-header-menu > li:not(.menu-item-3249):not(.ast-shop-menu-item).current-menu-item > a::after,
.main-header-menu > li:not(.menu-item-3249):not(.ast-shop-menu-item).current_page_item > a::after,
.main-header-menu > li:not(.menu-item-3249):not(.ast-shop-menu-item).current-menu-parent > a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 24px;
    height: 24px;
    background: url('https://computervirussss.shop/wp-content/uploads/2025/12/Boton-estrella-azul--scaled.png') no-repeat center;
    background-size: contain;
    transform: translateY(-50%);
    pointer-events: none;
}


/* ====================================================================== */
/* ======================= ESTRELLA ESPECIAL SHOP ======================= */
/* ====================================================================== */

.menu-star {
    display: none;
    width: 22px;
    height: 22px;
    margin-left: 6px;
    background: url("https://computervirussss.shop/wp-content/uploads/2025/12/Boton-estrella-azul--scaled.png") no-repeat center;
    background-size: contain;
}

/* Hover */
.ast-builder-menu-1 .menu-link:hover .menu-star {
    display: inline-block;
}

/* Activo */
.ast-builder-menu-1 .current-menu-item .menu-star,
.ast-builder-menu-1 .current_page_item .menu-star,
.ast-builder-menu-1 .current_page_parent .menu-star,
.ast-builder-menu-1 .current-menu-parent .menu-star {
    display: inline-block;
}

/* Forzar que se quede visible también dentro de un producto individual
   (WooCommerce no marca "Tienda" como activo ahí, pero sí pone
   body.single-product siempre) */
body.single-product .ast-builder-menu-1 .menu-star {
    display: inline-block;
}


/* ====================================================================== */
/* =========================  CARRITO PERSONALIZADO  ==================== */
/* ====================================================================== */

/* Ocultar SVG original */
.ast-site-header-cart-li .astra-icon svg {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* Imagen personalizada */
.ast-site-header-cart-li .astra-icon {
    background-image: url("https://computervirussss.shop/wp-content/uploads/2025/11/botonflanbag.png") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-block !important;
    padding: 0 !important;
    transform: translateY(10px) !important;
}

/* Móvil */
@media (max-width: 768px) {
    .ast-site-header-cart-li .astra-icon {
        width: 33px !important;
        height: 33px !important;
        transform: translateY(11px) !important;
    }
}

/* Asegurar que el ícono personalizado y el contador (badge "0")
   se vean SIEMPRE, incluida la página de tienda/categorías, donde
   a veces aparece el globito negro por defecto de WooCommerce en
   vez del flan con el número. */
body.post-type-archive-product .ast-site-header-cart-li .astra-icon,
body.tax-product_cat .ast-site-header-cart-li .astra-icon {
    background-image: url("https://computervirussss.shop/wp-content/uploads/2025/11/botonflanbag.png") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.ast-site-header-cart-li .count,
.ast-site-header-cart-li .cart-container .count,
.ast-site-header-cart-li .astra-cart-count {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1.5px solid #000000 !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* ================= TEXTO "SHOPPING" AL LADO DEL FLAN ================= */

.ast-site-header-cart-li > a {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important; /* ← Ajusta aquí qué tan pegado va */
}

/* Texto */
.ast-site-header-cart-li > a::before {
    content: "Bag";
    font-family: "BillaMount" !important;
    font-size: 15px !important;
    letter-spacing: 0.5px !important;
    color: black !important;
    display: inline-block;
    line-height: 1;
    margin-right: -20px !important; /* ← Aún más pegado */
}

/* BAG en blanco solo en móvil */
@media (max-width: 921px) {
  .ast-site-header-cart-li > a::before {
    color: #ffffff !important;
  }
}


/* ======________ HAMBURGUESA DISEÑO _______________====== */

/* Color blanco SOLO en la página de inicio */
.home .ast-mobile-svg,
.home .ast-mobile-menu-trigger .ast-mobile-svg,
.home .ast-menu-svg path {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Asegurar que NADA tenga fondo de hamburguesa*/
.home .ast-mobile-menu-trigger,
.home .ast-mobile-menu-trigger * {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/*MAGIC WORL*/
/* Fondo tipo alas */
.galeria-angel {
  background-image: url("URL-DE-TUS-ALAS");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding: 200px 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  position: relative;
}

/* Imágenes flotantes */
.mini-img {
  width: 120px;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.mini-img:hover {
  transform: scale(1.2);
  filter: brightness(1.2);
}

/* POPUP */
.popup-img {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
  z-index: 999999;
}

.popup-img img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  animation: zoomIn 0.3s ease;
}

/* Cerrar */
.popup-img .cerrar {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 50px;
  color: white;
  cursor: pointer;
}

@keyframes zoomIn {
  from { transform: scale(0.3); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/*GALERIAAAA MOVIL*/
.galeria-movil {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 15px;
}

.galeria-movil .item img {
  width: 100%;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .3s ease;
}

.galeria-movil .texto {
  text-align: center;
  font-size: 14px;
  margin-top: 5px;
  color: #fff;
}

.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 99999;
  padding: 20px;
}

.popup img {
  max-width: 90%;
  max-height: 70vh;
  border-radius: 10px;
}

.popup p {
  margin-top: 15px;
  font-size: 18px;
  text-align: center;
  color: #fff;
}

#cerrar {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}


html, body {
  overflow-x: clip !important;
}

.tickers {
  width: 100%;
  overflow: hidden;
}

.ticker-upper {
  display: flex;
  width: 100%;
}

#whatsapp-icon {
  position: fixed !important;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}


/* Ocultar bloque en móvil y tablet MAGIC  */
.solo-escritorio {
  display: block;
}

@media (max-width: 1024px) {
  .solo-escritorio {
    display: none !important;
  }
}

/*SOLO CIMPUTAADORA*/
@media (min-width: 769px) {
  .solo-movil {
    display: none !important;
  }
}


/*GALERIA*/
/* GALERÍA MAGIC REDUCIDA */
.galeria-magic {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 85px; /* MENOS SEPARACIÓN */
  margin: 40px auto;
  max-width: 900px; /* MENOS ANCHO TOTAL */
}

.galeria-magic .item {
  text-align: center;
  width: 140px; /* ← MÁS PEQUEÑO */
}

/* Imagen */
.galeria-magic img {
  width: 100%;
  height: 80px; /* ← MÁS PEQUEÑO */
  object-fit: cover;
  border: 2px solid white;
  border-radius: 0px;
  cursor: pointer;
  transition: transform .3s ease;
}

.galeria-magic img:hover {
  transform: scale(1.04);
}

/* Escalonado */
.fila1 {
  margin-top: -75px;
}

.fila2 {
  margin-top: 0px; /* ← MENOS DESNIVEL */
}

/* Texto */
.titulo-img {
  display: block;
  margin-top: 3px;
  color: white;
  font-size: 12px; /* ← MÁS PEQUEÑA */
  font-weight: bold;
  text-shadow: 0 0 4px black;
}

/* POPUP — Arreglo completo */
.popup-img {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  align-items: center;
  justify-content: center;
  flex-direction: column; /* ← IMPORTANTE PARA QUE EL TEXTO QUEDE ABAJO */
  z-index: 99999;
  padding: 20px;
}

/* Imagen centrada y con margenes */
.popup-img img {
  max-width: 85%;
  max-height: 70vh;
  margin-bottom: 20px; /* ← SEPARA DEL TEXTO */
  border-radius: 10px;
}

/* Texto centrado abajo */
#popup-text {
  color: white;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 0 6px black;
  margin-top: 10px;
  max-width: 80%;
}

/* Botón cerrar */
.popup-img .cerrar {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}


/*------------------------------ABAOUT ESTRELLAS------------------------*/
/* CONTENEDOR CENTRADO */
.columna-estrellas1 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 10px 0;
    overflow: hidden;
    position: relative;
}

/* IMÁGENES (TAMAÑO + COLOR + RESET) */
.columna-estrellas1 .estrella img {
    width: 70px !important;
    height: 70px !important;
    max-width: 70px !important;
    max-height: 70px !important;
    object-fit: contain;

    /* Fuerza a que sean BLANCAS SIEMPRE */
    filter: brightness(0) invert(1);

    /* Animación */
    animation: loopEstrella 3.5s ease-in-out infinite;
}

/* ANIMACIÓN: pulso + izquierda/derecha */
@keyframes loopEstrella {
    0% { transform: translateX(-8px) scale(1); }
    50% { transform: translateX(8px) scale(1.15); }
    100% { transform: translateX(-8px) scale(1); }
}

/* Versión móvil */
@media (max-width: 778px) {

    .columna-estrellas1 {
        gap: 15px;
    }

    .columna-estrellas1 .estrella img {
        width: 55px !important;
        height: 55px !important;
        max-width: 55px !important;
        max-height: 55px !important;
        animation-duration: 8s; /* animación más fluida en celular */
    }
}


/*------------------------------------POP UP--------------------------------------*/ 
/* Fondo  */
.popup-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  background: transparent; /* sin fondo */
  z-index: 999999;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .5s ease; /* degradado */
}

.popup-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* Caja */
.popup-box {
  background-image: url('https://computervirussss.shop/wp-content/uploads/2026/01/suscribirtebotonn-scaled.png'); 
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  width: 80%;
  max-width: 300px;

  min-height: 620px;

  padding: 340px 20px 30px 20px;  /* BAJA inputs */

  border-radius: 9px;
  position: relative;
  text-align: center;
  animation: popupFade 2.80s ease-out forwards;
  overflow: visible;  /* evita que un top negativo la corte */
}

.mfp-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  height: 100vh !important; /* Fuerza centrado real */
  padding: 0 !important;
}

/* X cerrar */
.popup-box .popup-close {
  position: absolute !important;
  top: 84px !important;       /* sube la X */
  right: .5px !important;     /* la pega a la derecha */
  transform: none !important;
  z-index: 999999 !important; /* asegurar que esté encima */
  background: transparent;
  border: none;
  font-size: 24px;
  color: #ffff !important;
  cursor: pointer;
  line-height: 1;
}

/* Títulos */
.popup-box h6 {
  font-size: 12px;
  line-height: 1.3;
  margin-bottom: 24px;
  font-weight: 400;
}

/* Inputs */
.popup-form input {
  width: 100%;
  padding: 15px;
  border: 1.5px solid black;
  margin-bottom: 12px;
  font-size: 12px;
  text-transform: uppercase;
}

/* Botón */
.popup-submit {
  width: 100%;
  padding: 12px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  text-transform: uppercase;
  background: #ffccdd; /* estilo grunge */
  background-size: cover;
  color: white;
}

/* Animación suave */
@keyframes popupFade {
  0% {
    opacity: 0;
    transform: scale(0.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}


/*----------------------------------WOCOMERCEE------------------------------------*/
/* Contenedor */
ul.products li.product a.woocommerce-LoopProduct-link {
    position: relative;
    display: block;
}

/* Imagen principal */
ul.products li.product img {
    transition: opacity 0.3s ease;
}

/* Imagen hover */
ul.products li.product img.hover-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    z-index: 2;
}

/* Hover */
ul.products li.product:hover img.hover-image {
    opacity: 1;
}

/* Desactivar hover en móvil */
@media (max-width: 768px) {
  ul.products li.product:hover img.hover-image {
    opacity: 0 !important;
  }
}

/* Nombre producto */
.woocommerce ul.products li.product h2 {
  font-family: 'helvetica', sans-serif !important;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  margin-top: 14px;
}

/* Precio */
.woocommerce ul.products li.product .price {
  font-family: 'arial', sans-serif !important;
  font-size: 14px;
  color: #000;
  text-align: center;
  margin-top: 4px;
}


/* ===== OCULTAR VARIACIONES EN CATÁLOGO ASTRA ===== */
/* Oculta swatches, selects y atributos */
.woocommerce ul.products li.product .ast-variation-wrapper,
.woocommerce ul.products li.product .variations,
.woocommerce ul.products li.product .ast-variation-item,
.woocommerce ul.products li.product .ast-attribute-swatches,
.woocommerce ul.products li.product .ast-product-variation,
.woocommerce ul.products li.product table.variations {
    display: none !important;
}

/* Oculta "Seleccionar opciones" */
.woocommerce ul.products li.product .product_type_variable {
    display: none !important;
}


/*------------------------PRUEBAS PRODUCTO SOLO — SCROLL CON TEXTO E IMAGEN----------------------*/

/* Ampliar el ancho del contenedor SOLO en producto individual,
   para que no sobre tanto blanco a la derecha en pantallas grandes.
   Confirmado vía DevTools: el contenedor real es .ast-container.
   Le dejamos aire a los costados con padding para que no toque el borde. */
@media (min-width: 1024px) {
  body.single-product .ast-container {
    max-width: 1500px !important;
    padding-left: 90px !important;
    padding-right: 90px !important;
  }
}

@media (min-width: 1024px) {

  /* GRID EDITORIAL */
  .single-product div.product {
    display: grid;
    grid-template-columns: 55% 45%;
    grid-template-areas: "gallery summary";
    column-gap: 48px;
    align-items: start;
  }

  /* Asignar cada bloque a su columna de forma EXPLÍCITA, sin depender
     del orden en que WooCommerce los imprime. Si el producto está en
     oferta, WooCommerce mete el sello ".onsale" como un tercer hijo
     directo de .product ANTES de la galería, y con solo 2 columnas
     definidas por orden implícito, eso corría la galería y el texto
     una fila hacia abajo (el texto terminaba debajo). Con grid-area
     fijo, la galería y el texto SIEMPRE quedan en su columna, pase lo
     que pase con otros elementos que WooCommerce agregue. */
  .single-product div.product > .sl-product-gallery {
    grid-area: gallery;
    position: relative;
  }

  .single-product div.product > .summary {
    grid-area: summary;
  }

  .single-product div.product > .onsale {
    grid-area: gallery;
    position: absolute;
    z-index: 2;
  }

  /* GALERÍA — un poco más grande */
  .sl-product-gallery {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 640px;
  }

  .sl-product-image img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* TEXTO PEGAJOSO (STICKY) — ancho cómodo de lectura, ya no estirado
     (!important porque Astra trae su propia regla de ancho para .summary
     con más especificidad que gana si no forzamos) */
  .single-product div.product .summary {
    position: sticky;
    top: 120px;
    align-self: start;
    width: 100% !important;
    max-width: 460px !important;
    float: none !important;

    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }

  /* ESPACIO PARA QUE NO SE ENCIME */
  .single-product .sl-product-gallery {
    padding-right: 48px;
  }

  /* RELACIONADOS ya no vive dentro del grid (ver functions.php),
     esto solo le da espacio arriba */
  .single-product .related {
    margin-top: 80px;
  }

}


/* =================================
   ASTRA – PRODUCT MOBILE SANDY STYLE
   ================================= */

@media (max-width: 768px) {

  /* contenedor */
  .sl-product-gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);

    background: #fff;
  }

  /* esconder scrollbar */
  .sl-product-gallery::-webkit-scrollbar {
    height: 0;
    display: none;
  }

  .sl-product-gallery {
    scrollbar-width: none; /* Firefox */
  }

  /* cada slide */
  .sl-product-image {
    flex: 0 0 100vw;
    scroll-snap-align: center;

    display: flex;
    justify-content: center;
    align-items: center;

    background: #fff;
  }

  /* imagen */
  .sl-product-image img {
    width: 94vw;           /* OCUPA CASI TODO */
    max-width: 420px;      /* editorial */
    height: auto;
    display: block;
    background: #fff;
  }

  /* dots */
  .sl-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 10px 0 6px;
    background: #fff;
  }

  .sl-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ddd;
    transition: background 0.3s ease;
  }

  .sl-dot.active {
    background: #000;
  }
}


@media (max-width: 768px) {

  /* MATAR SLIDER DUPLICADO */
  .single-product .sl-mobile-slider,
  .single-product .sl-mobile-slider * {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

}


/*--------------Slider barra a puntitos---------------------------------*/

@media (max-width: 768px) {

  .sl-product-gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    background: white;
  }

  .sl-product-gallery::-webkit-scrollbar {
    display: none;
  }

  .sl-product-image {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: flex;
    justify-content: center;
    background: white;
  }

  .sl-product-image img {
    width: 88vw;          /* un poco más pequeño */
    max-width: 380px;
    height: auto;
    display: block;
  }

  /* === DOTS === */
  .sl-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 12px 0 4px;
  }

  .sl-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d3d3d3;
    transition: background 0.3s ease;
  }

  .sl-dot.active {
    background: #000;
  }
}


/*ORDEN DE PRODUCTO SOLO EN MOBILE-----------------------------*/
/* ===== ESTILO FICHA PRODUCTO – SANDY ===== */

/* Ocultar descripción corta arriba */
.single-product .woocommerce-product-details__short-description {
    display: none;
}

/* Ficha producto estilo Sandy */
.descripcion-ficha {
    font-size: 0.9rem;
    line-height: 1.6;
}

.descripcion-ficha p {
    margin: 0 0 8px;
}

.descripcion-ficha ul {
    padding-left: 16px;
    margin: 8px 0;
}

.descripcion-ficha li {
    margin-bottom: 4px;
}


/* ===============================
   RESET TOTAL DEL BOTÓN (ANTI-ASTRA)
   =============================== */

.sandy-accordion-toggle {
    all: unset;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;

    font-size: 0.95rem;
    letter-spacing: 0.02em;   /* más natural para texto */
    text-transform: none;     /* ya NO mayúsculas */

    color: #555;
}

/* Evitar focus raro */
.sandy-accordion-toggle:focus {
    outline: none;
}

/* Contenedor */
.sandy-accordion {
    border-top: 1px solid #e5e5e5;
    margin-top: 23px;
}

/* + / − */
.sandy-accordion-toggle .icon {
    font-size: 0.9rem;
    font-weight: 300;
}

/* Contenido */
.sandy-accordion-content {
    display: none;
    margin-top: 1.5px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #8A8A8A;
}

.sandy-accordion.open .sandy-accordion-content {
    display: block;
}

/* ===============================
   TEXTO COMPACTO (NUESTRAS MODELOS…)
   =============================== */

.sandy-accordion-content .sandy-meta {
    margin: 0;
    padding: 0;
    line-height: 1.;
}

/* ===============================
   TABLA LIMPIA SANDY
   =============================== */

.sandy-size-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.sandy-size-table th {
    font-weight: 400;
    color: #8A8A8A;
    border-bottom: 1px solid #e6e6e6;
    padding: 4px 4px;
    line-height: 1.2;
}

.sandy-size-table td {
    padding: 4px 6px;
    border-bottom: 1px solid #f0f0f0;
    color: #8A8A8A;
    line-height: 1.25;
}


/* Línea delgada a todo lo ancho arriba de "Descripción" */
.single-product #tab-title-description > a {
  position: relative;
  padding-top: 14px;
}

.single-product #tab-title-description > a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10000%;      /* TODO EL ANCHO */
  height: .7px;      /* línea delgada */
  background: rgba(0,0,0,0.35); /* tenue */
}

/* Limpieza total de líneas de tabs */
.single-product .woocommerce-tabs ul.tabs,
.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs::after,
.single-product .woocommerce-tabs ul.tabs li,
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Ocultar SOLO el logo de OXXO */
img[src*="oxxo"],
img[alt*="OXXO"] {
  display: none !important;
}

/* Ocultar SOLO el logo de MERCADO PAGO */
.wc_payment_method img[alt*="Mercado Pago"],
.wc_payment_method img[src*="handshake"],
.wc_payment_method img[src*="logo-mp"] {
    display: none !important;
}


/*WPFORMS*/
/* CENTRAR BOTÓN */
.wpforms-container .wpforms-submit-container {
    text-align: center;
}

.wpforms-container button.wpforms-submit {
    display: inline-block;
    width: 80%;   /* cambia a 100% si lo quieres más ancho */
    max-width: 300px;
}

.form-wrapper {
  position: relative;
  max-width: 360px;
  margin: 0 auto;
}

.cerrar-form {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 26px;
  color: white;
  cursor: pointer;
  z-index: 10;
}


/*-------------BLOQUEO DE SCROLL DERECHA/IZQUIERDA------------------------------------------ */

html, body {
  overflow-x: clip;
}

img {
  max-width: 100%;
  width: 100%;
  height: auto;
}

.wp-block-image,
figure {
  max-width: 100%;
  overflow: hidden;
}

/* ==========================================================
   CONTROLES DE TIENDA — DESKTOP EDITORIAL / MOBILE REFINAR
   ========================================================== */
/* ==========================================================
   REDUCIR ESPACIO ENTRE EL MENÚ Y LA BARRA DE CATEGORÍAS/ORDEN
   (páginas de tienda y categorías, desktop + móvil)
   ========================================================== */
body.post-type-archive-product .ast-container,
body.tax-product_cat .ast-container {
  padding-top: 15px !important;
}

@media (max-width: 768px) {
  body.post-type-archive-product .ast-container,
  body.tax-product_cat .ast-container {
    padding-top: 8px !important;
  }
}

.andrea-shop-controls {
  width: 100%;
  margin: -30px 0 36px;
}

@media (max-width: 768px) {
  .andrea-shop-controls {
    margin: -20px 0 26px;
  }
}

.andrea-desktop-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  padding: 2px 0 14px;
  border-bottom: 1px solid #e2e2e2;
}

.andrea-desktop-categories {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  min-width: 0;
}

.andrea-category-link {
  position: relative;
  display: inline-block;
  padding: 7px 0 5px;
  color: #46566f;
  text-decoration: none !important;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .15px;
  transition: color .25s ease;
}

.andrea-category-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}

.andrea-category-link:hover,
.andrea-category-link.is-active {
  color: #202b3d;
}

.andrea-category-link:hover::after,
.andrea-category-link.is-active::after {
  transform: scaleX(1);
}

.andrea-desktop-order {
  flex: 0 0 235px;
  min-width: 0;
}

.andrea-desktop-order .woocommerce-ordering {
  float: none;
  width: 100%;
  margin: 0;
}

.andrea-desktop-order .woocommerce-ordering select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 36px;
  padding: 0 30px 0 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2346556f' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 18px;
  color: #46566f;
  font-size: 15px;
  font-weight: 400;
  font-family: inherit;
  cursor: pointer;
  box-shadow: none;
}

.andrea-desktop-order .woocommerce-ordering select:focus {
  outline: none;
  box-shadow: none;
}

.andrea-mobile-controls { display: none; }

@media (max-width: 768px) {
  .andrea-desktop-controls { display: none; }
  .andrea-mobile-controls { display: block; }

  .andrea-shop-controls {
    margin: -20px 0 26px;
  }

  .andrea-refine-trigger {
    width: 100%;
    min-height: 52px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #d9dce2;
    border-radius: 0;
    color: #20242b;
    font-family: inherit;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    text-align: left;
  }

  .andrea-refine-trigger span {
    font-size: 22px;
    line-height: 1;
    transform: translateY(-1px);
  }

  .andrea-refine-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.28);
    z-index: 99998;
    opacity: 0;
    transition: opacity .25s ease;
  }
  .andrea-refine-backdrop.is-open { opacity: 1; }

  .andrea-refine-panel {
    position: fixed;
    z-index: 99999;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(92vw, 430px);
    max-width: 100%;
    background: #fff;
    color: #222;
    box-shadow: -10px 0 30px rgba(0,0,0,.10);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .26s ease;
    overflow: hidden;
    text-align: left;
  }
  .andrea-refine-panel.is-open { transform: translateX(0); }

  .andrea-refine-header {
    height: 72px;
    flex: 0 0 72px;
    display: grid;
    grid-template-columns: 52px 1fr 90px;
    align-items: center;
    border-bottom: 1px solid #e7e7e7;
    padding: 0 18px 0 8px;
  }

  .andrea-refine-title {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
  }

  .andrea-refine-close,
  .andrea-refine-clear {
    border: 0;
    background: transparent;
    padding: 0;
    color: #222;
    font-family: inherit;
    cursor: pointer;
  }

  .andrea-refine-close {
    font-size: 32px;
    font-weight: 300;
    line-height: 1;
  }

  .andrea-refine-clear {
    justify-self: end;
    font-size: 15px;
    color: #777;
  }

  .andrea-refine-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 22px;
    -webkit-overflow-scrolling: touch;
  }

  .andrea-refine-section {
    padding: 24px 0 8px;
  }

  .andrea-refine-section + .andrea-refine-section {
    border-top: 1px solid #e7e7e7;
  }

  .andrea-refine-section h3 {
    margin: 0 0 12px;
    color: #222;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 400;
  }

  .andrea-radio-row,
  .andrea-category-row {
    position: relative;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid #e5e5e5;
    color: #303030;
    font-size: 16px;
    cursor: pointer;
  }

  .andrea-radio-row input,
  .andrea-category-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .andrea-radio {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    border: 1.5px solid #333;
    border-radius: 50%;
    position: relative;
  }

  .andrea-radio-row input:checked + .andrea-radio,
  .andrea-category-row input:checked + .andrea-radio {
    border-width: 2px;
  }

  .andrea-radio-row input:checked + .andrea-radio::after,
  .andrea-category-row input:checked + .andrea-radio::after {
    content: '';
    position: absolute;
    width: 11px;
    height: 11px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #222;
  }

  .andrea-refine-trigger,
  .andrea-refine-close,
  .andrea-refine-clear,
  .andrea-category-toggle,
  .andrea-refine-apply {
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    border-radius: 0;
  }

  .andrea-category-toggle {
    width: 100%;
    min-height: 58px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
    background: transparent;
    color: #303030;
    font: inherit;
    font-size: 16px;
    cursor: pointer;
    text-align: left;
  }

  .andrea-category-toggle > span:last-child {
    font-size: 26px;
    font-weight: 300;
  }

  .andrea-category-options {
    padding-left: 16px;
  }

  .andrea-refine-footer {
    flex: 0 0 auto;
    padding: 14px 22px calc(14px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #e7e7e7;
  }

  .andrea-refine-apply {
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 999px;
    background: #222;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
  }

  body.andrea-refine-lock { overflow: hidden; }
}


/* Fuente final del menú: se aplica a desktop, móvil y submenús. */
.main-header-menu > li > a,
.main-header-menu > li > a .menu-text,
.main-header-menu .menu-link,
.main-header-menu .menu-link .menu-text,
.ast-builder-menu-1 .menu-link,
.ast-builder-menu-1 .menu-link .menu-text,
.ast-mobile-popup-drawer .main-header-menu .menu-link,
.ast-mobile-popup-drawer .main-header-menu .menu-link .menu-text,
.ast-mobile-header-wrap .main-header-menu .menu-link,
.ast-mobile-header-wrap .main-header-menu .menu-link .menu-text,
.elementor-nav-menu .elementor-item {
    font-family: 'BillaMountMenu', 'BillaMount', sans-serif !important;
    font-weight: 800 !important;
    font-style: normal !important;
}