/* =========================================================
   1. POPUP (quick view)
   ========================================================= */
.mwe-qv{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px;z-index:99999}
.mwe-qv__box{position:relative;background:#fff;max-width:760px;width:100%;max-height:90vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:24px;border-radius:8px}
.mwe-qv__title{margin:0 0 8px;font-size:1.5rem}
.mwe-qv__price{font-size:1.25rem;margin-bottom:12px}
.mwe-qv__x{position:absolute;top:8px;right:12px;background:none;border:0;font-size:28px;line-height:1;cursor:pointer}
.mwe-qv__btn{display:inline-block;margin-top:16px;padding:10px 20px;text-decoration:none;border-radius:4px}

/* Galería con miniaturas */
.mwe-qv__gal{min-width:0}
.mwe-qv__main{width:100%;height:auto;display:block;border-radius:4px}
.mwe-qv__thumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto;padding-bottom:4px}
.mwe-qv__thumbs[hidden]{display:none}
.mwe-qv__thumbs button{
  flex:0 0 64px;width:64px;height:64px;min-width:0;padding:0;
  border:2px solid transparent;border-radius:4px;background:none;
  cursor:pointer;opacity:.6;overflow:hidden;
}
.mwe-qv__thumbs button:hover{opacity:1}
.mwe-qv__thumbs button.activa{border-color:#222;opacity:1}
.mwe-qv__thumbs img{width:100%;height:100%;object-fit:cover;display:block}

/* "Leer más" en su propia línea */
.mwe-qv__mas{display:block;margin-top:6px;text-decoration:underline}
.mwe-qv__mas:hover{text-decoration:none}

/* Formulario dentro del popup */
.mwe-qv__form{margin-top:12px}
.mwe-qv__form table.variations{width:100%;margin:0 0 12px}
.mwe-qv__form .variations th.label,
.mwe-qv__form .variations td.value{vertical-align:middle;padding:4px 0;display:table-cell}
.mwe-qv__form .reset_variations{display:none !important}
.mwe-qv__form .woocommerce-variation-price{margin:8px 0}
.mwe-qv__form .woocommerce-variation-add-to-cart,
.mwe-qv__form form.cart{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.mwe-qv__form .single_add_to_cart_button.loading{opacity:.6;pointer-events:none}

/* Mensajes */
.mwe-qv__msg{margin-top:10px;font-size:.95rem}
.mwe-qv__msg--ok{color:#1d6b34}
.mwe-qv__msg--error{color:#b3261e}

/* =========================================================
   2. LISTADO DE PRODUCTOS
   ========================================================= */

/* Contenedor de la imagen: referencia para botón, destello y segunda foto */
.wc-block-components-product-image,
.wp-block-woocommerce-product-image{
  position:relative;
  overflow:hidden;
}

/* Botón superpuesto abajo de la foto */
.wc-block-components-product-image .wp-block-woocommerce-product-button,
.wc-block-components-product-image .wc-block-components-product-button,
.wp-block-woocommerce-product-image .wp-block-woocommerce-product-button,
.wp-block-woocommerce-product-image .wc-block-components-product-button{
  position:absolute;
  left:8px;
  right:8px;
  bottom:8px;
  margin:0;
  z-index:2;
}

/* Botón más pequeño */
.wc-block-components-product-image .wp-block-button__link,
.wc-block-components-product-image .wc-block-components-product-button__button,
.wp-block-woocommerce-product-image .wp-block-button__link,
.wp-block-woocommerce-product-image .wc-block-components-product-button__button{
  width:100%;
  margin:0;
  padding:.5em .8em;
  font-size:.8rem;
}

/* Segunda foto: espera a la derecha */
.mwe-alt{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:translateX(100%);
  z-index:0;                       /* debajo del destello (1) y del botón (2) */
  pointer-events:none;
  will-change:transform;
}
.mwe-tiene-alt img:not(.mwe-alt),
.mwe-alt{
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}

/* Destello diagonal */
.wc-block-components-product-image::after,
.wp-block-woocommerce-product-image::after{
  content:"";
  position:absolute;
  top:0; left:-80%;
  width:45%; height:100%;
  background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.65) 50%, transparent 100%);
  transform:skewX(-20deg);
  opacity:0;
  pointer-events:none;
  z-index:1;
}
.mwe-flash::after{animation:mwe-shine .9s ease-out 1}

@keyframes mwe-shine{
  0%   { left:-80%; opacity:0; }
  15%  { opacity:1; }
  100% { left:130%; opacity:0; }
}

/* Solo con mouse: botón oculto hasta el hover + cambio de foto */
@media (hover: hover){
  .wc-block-components-product-image .wp-block-woocommerce-product-button,
  .wc-block-components-product-image .wc-block-components-product-button,
  .wp-block-woocommerce-product-image .wp-block-woocommerce-product-button,
  .wp-block-woocommerce-product-image .wc-block-components-product-button{
    opacity:0;
    transform:translateY(6px);
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }

  li.wp-block-post:hover .wp-block-woocommerce-product-button,
  li.wp-block-post:hover .wc-block-components-product-button,
  li.wp-block-post:focus-within .wp-block-woocommerce-product-button,
  li.wp-block-post:focus-within .wc-block-components-product-button,
  .wc-block-product:hover .wp-block-woocommerce-product-button,
  .wc-block-product:hover .wc-block-components-product-button,
  .wc-block-product:focus-within .wp-block-woocommerce-product-button,
  .wc-block-product:focus-within .wc-block-components-product-button{
    opacity:1;
    transform:none;
    pointer-events:auto;
  }

  /* La segunda foto entra */
  li.wp-block-post:hover .mwe-tiene-alt .mwe-alt,
  .wc-block-product:hover .mwe-tiene-alt .mwe-alt,
  li.wp-block-post:focus-within .mwe-tiene-alt .mwe-alt{
    transform:none;
  }
  /* La foto original sale hacia la izquierda */
  li.wp-block-post:hover .mwe-tiene-alt img:not(.mwe-alt),
  .wc-block-product:hover .mwe-tiene-alt img:not(.mwe-alt),
  li.wp-block-post:focus-within .mwe-tiene-alt img:not(.mwe-alt){
    transform:translateX(-100%);
  }
}

/* Efecto activado por toque (celular y tablet): igual que el hover */
li.wp-block-post.mwe-activo .mwe-tiene-alt .mwe-alt,
.wc-block-product.mwe-activo .mwe-tiene-alt .mwe-alt{
  transform:none;
}
li.wp-block-post.mwe-activo .mwe-tiene-alt img:not(.mwe-alt),
.wc-block-product.mwe-activo .mwe-tiene-alt img:not(.mwe-alt){
  transform:translateX(-100%);
}

/* Pantallas medianas y menores: sin botón sobre la foto */
@media (max-width:900px){
  .wc-block-components-product-image .wp-block-woocommerce-product-button,
  .wc-block-components-product-image .wc-block-components-product-button,
  .wp-block-woocommerce-product-image .wp-block-woocommerce-product-button,
  .wp-block-woocommerce-product-image .wc-block-components-product-button{
    display:none;
  }
}

/* =========================================================
   3. CATEGORÍAS (ciclo de fotos al hover)
   ========================================================= */
.mwe-cat-wrap{display:block;position:relative;overflow:hidden}
.mwe-cat-alt{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .9s ease;
  pointer-events:none;
}
.mwe-cat-alt.on{opacity:1}

/* =========================================================
   4. ACCESIBILIDAD Y RESPONSIVE
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .mwe-tiene-alt img:not(.mwe-alt),
  .mwe-alt,
  .mwe-cat-alt{transition:none}
  .mwe-flash::after{animation:none}
}

@media (max-width:600px){
  .mwe-qv__box{grid-template-columns:1fr}
}