/* =============================================================================
   WorkHard — Product Experience (mejora visual de la página de producto)
   =============================================================================
   Se carga SOLO en páginas de producto individual (is_product()), ver
   wh_product_enqueue_assets() en el mu-plugin. No es un rediseño completo
   del template (Uncode genera muchísimo markup propio del page builder) —
   es una capa de "skin" que aplica el mismo lenguaje visual del resto del
   sitio (quiz, emails): bordes redondeados, glow verde neón (#00eb00,
   el mismo acento que ya usa el theme), tarjetas oscuras y transiciones
   suaves, sobre los selectores ESTÁNDAR de WooCommerce (que no cambian
   aunque Uncode actualice su propio CSS).
   Todo prefijado con body.single-product para no filtrarse a ninguna
   otra página del sitio.
   ============================================================================= */

body.single-product{
  --wh-green:#00eb00;
  --wh-ink:#0a0a0a;
  --wh-surface:#141414;
  --wh-surface-2:#1f1f1f;
  --wh-border:rgba(255,255,255,.1);
}

/* ---------- Reducir espacio superior del template (-40%) ----------
   Uncode aplica un padding-top muy grande a la fila que envuelve la
   galería + ficha del producto (clases *-top-padding, ej. penta-top-
   padding = 180px en desktop). Se reduce al 60% del valor original en
   cada breakpoint del propio theme para no perder el responsive. */
body.single-product .single-top-padding{ padding-top:22px !important; }
body.single-product .double-top-padding{ padding-top:43px !important; }
body.single-product .triple-top-padding{ padding-top:65px !important; }
body.single-product .quad-top-padding{ padding-top:86px !important; }
body.single-product .penta-top-padding{ padding-top:108px !important; }
@media (max-width:1699px){
  body.single-product .quad-top-padding{ padding-top:65px !important; }
  body.single-product .penta-top-padding{ padding-top:86px !important; }
}
@media (max-width:1499px){
  body.single-product .triple-top-padding{ padding-top:43px !important; }
  body.single-product .quad-top-padding{ padding-top:43px !important; }
  body.single-product .penta-top-padding{ padding-top:65px !important; }
}
@media (max-width:959px){
  body.single-product .double-top-padding{ padding-top:22px !important; }
  body.single-product .triple-top-padding{ padding-top:22px !important; }
  body.single-product .quad-top-padding{ padding-top:22px !important; }
  body.single-product .penta-top-padding{ padding-top:43px !important; }
}
@media (max-width:569px){
  body.single-product .double-top-padding,
  body.single-product .triple-top-padding,
  body.single-product .quad-top-padding,
  body.single-product .penta-top-padding{ padding-top:22px !important; }
}

/* ---------- Badge "¡Oferta!" ---------- */
body.single-product .product-badge{
  border-radius:30px !important;
  overflow:hidden;
}
body.single-product .product-badge .onsale{
  display:inline-block;
  background:var(--wh-green) !important;
  color:var(--wh-ink) !important;
  font-weight:800 !important;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:6px 16px !important;
  border-radius:30px !important;
  box-shadow:0 0 18px 3px rgba(0,235,0,.45);
}

/* ---------- Galería de imágenes ---------- */
body.single-product .woocommerce-product-gallery__wrapper,
body.single-product .woocommerce-product-gallery__image,
body.single-product .woocommerce-product-gallery__image img{
  border-radius:20px !important;
  overflow:hidden;
}
body.single-product .woocommerce-product-gallery__image{
  position:relative;
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 20px 50px rgba(0,0,0,.45);
  transition:box-shadow .3s ease, transform .3s ease;
}
body.single-product .woocommerce-product-gallery__image:hover{
  box-shadow:0 0 0 1px rgba(0,235,0,.35), 0 0 46px 6px rgba(0,235,0,.22), 0 20px 50px rgba(0,0,0,.5);
}
body.single-product .woocommerce-product-gallery__image img{
  transition:transform .5s ease;
}
body.single-product .woocommerce-product-gallery__image:hover img{
  transform:scale(1.03);
}
body.single-product .flex-control-thumbs img,
body.single-product .woocommerce-product-gallery__trigger{
  border-radius:12px !important;
}
/* Miniaturas de la galería (carrusel debajo de la imagen principal) */
body.single-product li.woocommerce-product-gallery__thumb img,
body.single-product li.woocommerce-product-gallery__thumb{
  border-radius:12px !important;
  overflow:hidden;
}

/* ---------- Columna de galería sticky ----------
   En desktop, la columna de la imagen queda fija mientras se hace scroll
   por la ficha del producto (variaciones, botón, meta, tabs...), y se
   "suelta" sola al llegar al final de esa columna. Uncode arma la columna
   como tabla anidada (.wpb_column > .uncol > .uncoltable > .uncell, todos
   con display:table/table-cell para su sistema de alineación vertical) y
   position:sticky no es fiable sobre table-cell — por eso NO se aplica al
   .wpb_column en sí (eso además rompía el formulario de compra), sino al
   primer contenedor de bloque normal DENTRO de la columna
   (.uncode-wrapper.uncode-single-product-gallery), que sí soporta sticky
   sin tocar el sistema de tablas de Uncode. */
@media (min-width:960px){
  /* CADENA COMPLETA de ancestros que rompen position:sticky en Uncode,
     encontrados uno a uno (cualquier overflow != visible en CUALQUIER
     ancestro entre el elemento sticky y el viewport lo desactiva
     silenciosamente, sin error en consola):
     1) .box-wrapper / .box-container: wrapper de TODA la página (el
        "boxed layout" de Uncode), con overflow:hidden + height:100%.
     2) .uncol / .uncoltable / .uncell / .uncont: sistema de alineación
        vertical de cada columna, .uncol trae overflow:hidden.
     Se liberan ambos SOLO dentro de body.single-product para no afectar
     el resto del sitio (el boxed layout global no se toca). */
  body.single-product .box-wrapper,
  body.single-product .box-container{
    overflow:visible !important;
  }
  body.single-product .wpb_column:has(.uncode-single-product-gallery) .uncol,
  body.single-product .wpb_column:has(.uncode-single-product-gallery) .uncoltable,
  body.single-product .wpb_column:has(.uncode-single-product-gallery) .uncell,
  body.single-product .wpb_column:has(.uncode-single-product-gallery) .uncont{
    overflow:visible !important;
  }
  /* CONFIRMADO con devtools en vivo, paso 1: .uncol no heredaba altura de
     su .wpb_column (table-cell) — se estiró con height:100%. */
  body.single-product .wpb_column:has(.uncode-single-product-gallery) .uncol{
    height:100% !important;
  }
  /* CONFIRMADO con devtools en vivo, paso 2: aun con .uncol/.uncoltable/
     .uncell correctamente a 1252px (medido con getBoundingClientRect),
     el siguiente nivel .uncont (hijo directo de .uncell, que es
     display:table-cell) se quedaba en 528px pese a tener height:100% en
     el CSS base del theme. Es un quirk real de CSS: un height porcentual
     dentro de una tabla NO se considera "definido" para efectos de
     resolución de porcentajes en los hijos, aunque el navegador sí le dé
     una altura final en pantalla. Se rodea el problema sacando a .uncont
     del flujo normal (position:absolute + inset:0 contra .uncell, que sí
     tiene position:relative) — así su alto se calcula por posicionamiento
     absoluto, no por porcentaje, y finalmente sí hereda los 1252px reales. */
  body.single-product .wpb_column:has(.uncode-single-product-gallery) .uncell{
    position:relative !important;
  }
  body.single-product .wpb_column:has(.uncode-single-product-gallery) .uncont{
    position:absolute !important;
    inset:0 !important;
    height:auto !important;
  }
  /* Ancla de posicionamiento explícita: nos aseguramos de que el row sea
     el containing block correcto para el sticky (ya trae position:relative
     por defecto, se refuerza por las dudas). */
  body.single-product .row-parent:has(.uncode-single-product-gallery){
    position:relative !important;
  }
  body.single-product .uncode-wrapper.uncode-single-product-gallery{
    position:-webkit-sticky !important;
    position:sticky !important;
    top:130px !important;
    z-index:5;
  }
}

/* ---------- Precio "Desde" ---------- */
body.single-product .woocommerce-Price-amount{
  font-weight:800;
}

/* ---------- Formulario de variaciones: tarjeta propia ---------- */
body.single-product form.variations_form.cart{
  display:block;
  background:var(--wh-surface) !important;
  border:1px solid var(--wh-surface-2);
  border-radius:20px !important;
  padding:28px 26px !important;
  margin-top:22px !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 24px 60px rgba(0,0,0,.35);
  transition:box-shadow .3s ease, border-color .3s ease;
}
body.single-product form.variations_form.cart:focus-within{
  border-color:rgba(0,235,0,.4);
  box-shadow:0 0 0 1px rgba(0,235,0,.18), 0 0 40px 4px rgba(0,235,0,.14), 0 24px 60px rgba(0,0,0,.4);
}

body.single-product table.variations{
  width:100%;
  border-collapse:separate !important;
  border-spacing:0 14px !important;
}
body.single-product table.variations tr{ display:block; }
body.single-product table.variations td.label{
  display:block !important;
  padding:0 0 8px !important;
  border:none !important;
}
body.single-product table.variations td.label label{
  font-family:'Nunito', sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55) !important;
  margin:0;
}
body.single-product table.variations td.value{
  display:block !important;
  padding:0 !important;
  border:none !important;
}
body.single-product table.variations .value{ display:block; }

body.single-product table.variations select{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  background:var(--wh-ink) !important;
  border:1px solid var(--wh-surface-2) !important;
  color:#ffffff !important;
  font-family:'Nunito', sans-serif;
  font-size:15px;
  padding:13px 40px 13px 16px !important;
  border-radius:12px !important;
  cursor:pointer;
  transition:.2s ease;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300eb00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px;
}
body.single-product table.variations select:hover{
  border-color:rgba(0,235,0,.45) !important;
}
body.single-product table.variations select:focus{
  outline:none;
  border-color:var(--wh-green) !important;
  box-shadow:0 0 0 3px rgba(0,235,0,.16);
}
body.single-product .reset_variations{
  display:inline-block;
  margin-top:8px;
  font-family:'Nunito', sans-serif;
  font-size:12px;
  color:rgba(255,255,255,.45) !important;
  text-decoration:underline;
  text-underline-offset:3px;
}
body.single-product .reset_variations:hover{ color:var(--wh-green) !important; }

/* ---------- Precio + resumen de variación seleccionada ---------- */
body.single-product .woocommerce-variation.single_variation{
  margin:6px 0 18px;
}
body.single-product .woocommerce-variation-price .price,
body.single-product .woocommerce-variation .price{
  font-size:26px !important;
  font-weight:800;
  color:var(--wh-green) !important;
}
body.single-product .woocommerce-variation-price .price del{
  opacity:.55;
  font-weight:600;
  font-size:16px !important;
  margin-right:8px;
}
body.single-product .woocommerce-variation-description p{
  color:rgba(255,255,255,.6) !important;
  font-size:13.5px;
  line-height:1.6;
}

/* ---------- Cantidad + botón "Agregar al carrito" ---------- */
body.single-product .woocommerce-variation-add-to-cart,
body.single-product .cart{
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-top:6px !important;
}
body.single-product .quantity .qty-inset{
  display:flex; align-items:center; justify-content:center; gap:2px;
  background:var(--wh-ink) !important;
  border:1px solid var(--wh-surface-2) !important;
  border-radius:12px !important;
  padding:4px !important;
  overflow:hidden;
  position:relative !important;
}
body.single-product .quantity .qty-inset input.qty{
  background:transparent !important;
  border:none !important;
  color:#fff !important;
  text-align:center;
  width:42px !important;
  padding:0 !important;
  min-width:0 !important;
  flex:0 0 42px !important;
  font-family:'Nunito', sans-serif;
  font-size:14px !important;
  font-weight:700;
  line-height:34px !important;
  height:34px !important;
}
body.single-product .quantity .qty-minus,
body.single-product .quantity .qty-plus{
  /* Uncode posiciona estos iconos con position:absolute (left/right en px
     calculados por su propio JS al cargar la pagina, calibrados para el
     ancho ROTO del input de 122px). Al corregir el ancho del input a
     42px, el contenedor .qty-inset se encoge (los hijos absolutos no
     aportan a su tamano intrinseco) y esos left/right ya calculados
     quedan pisando el input. Se pasan a flujo normal como items de flex
     mas, en el mismo orden del DOM (menos, input, mas). */
  position:static !important;
  order:0;
  width:34px; height:34px; flex:0 0 34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:9px !important;
  color:rgba(255,255,255,.7) !important;
  transition:.15s ease;
  cursor:pointer;
}
body.single-product .quantity .qty-minus:hover,
body.single-product .quantity .qty-plus:hover{
  background:rgba(0,235,0,.14) !important;
  color:var(--wh-green) !important;
}

body.single-product .single_add_to_cart_button,
body.single-product .wh-product-whatsapp-cta{
  flex:1 1 auto;
  min-width:220px;
  border-radius:14px !important;
  padding:16px 28px !important;
  font-weight:800 !important;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:13px !important;
  border:none !important;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
  box-shadow:0 0 0 3px rgba(0,235,0,.1), 0 0 30px 4px rgba(0,235,0,.35);
}
body.single-product .single_add_to_cart_button:hover,
body.single-product .wh-product-whatsapp-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 4px rgba(0,235,0,.14), 0 0 40px 8px rgba(0,235,0,.5);
}
/* Texto en negro sobre el verde para mejor legibilidad (el blanco perdía
   contraste sobre el acento neón). */
body.single-product .single_add_to_cart_button{
  color:var(--wh-ink) !important;
}
body.single-product .single_add_to_cart_button.disabled,
body.single-product .single_add_to_cart_button[disabled]{
  opacity:.45; cursor:not-allowed; transform:none; box-shadow:none;
}

/* ---------- Botón de WhatsApp (reemplaza "Agregar al carrito" en
   productos de Sede Concón) — ver product-experience.js. Mismo lenguaje
   visual que .wh-whatsapp-float del quiz, en versión botón ancho. ---------- */
body.single-product .wh-product-whatsapp-cta{
  display:inline-flex !important;
  align-items:center; justify-content:center; gap:10px;
  background:#25D366 !important;
  color:#ffffff !important;
  text-decoration:none !important;
  box-shadow:0 0 0 6px rgba(37,211,102,.12), 0 0 30px 4px rgba(37,211,102,.4);
}
body.single-product .wh-product-whatsapp-cta:hover{
  box-shadow:0 0 0 8px rgba(37,211,102,.16), 0 0 40px 8px rgba(37,211,102,.55);
}
body.single-product .wh-product-whatsapp-cta svg{ width:18px; height:18px; flex:none; }
body.single-product .wh-product-whatsapp-cta.wh-cta-disabled{
  opacity:.45; pointer-events:none; box-shadow:none;
}

/* Variante "secundaria": aparece junto al botón "Agregar al carrito" en
   todos los planes que NO son de Sede Concón, como alternativa para
   contratar por WhatsApp sin competir visualmente con el CTA principal. */
body.single-product .wh-product-whatsapp-cta.wh-cta-secondary{
  background:transparent !important;
  color:#25D366 !important;
  border:1.5px solid rgba(37,211,102,.5) !important;
  box-shadow:none;
}
body.single-product .wh-product-whatsapp-cta.wh-cta-secondary:hover{
  background:rgba(37,211,102,.1) !important;
  border-color:#25D366 !important;
  box-shadow:0 0 24px 2px rgba(37,211,102,.25);
}
body.single-product .wh-whatsapp-hint{
  flex-basis:100%;
  font-family:'Nunito', sans-serif;
  font-size:12.5px;
  color:rgba(255,255,255,.45) !important;
  margin-top:-4px;
}

/* ---------- Meta (SKU / categorías) ---------- */
body.single-product .product_meta{
  margin-top:24px !important;
  padding-top:20px !important;
  border-top:1px solid var(--wh-border) !important;
  font-size:12.5px !important;
  color:rgba(255,255,255,.45) !important;
}
body.single-product .product_meta a{
  color:rgba(255,255,255,.7) !important;
  text-decoration:underline;
  text-underline-offset:2px;
}
body.single-product .product_meta a:hover{ color:var(--wh-green) !important; }

/* ---------- Tabs (descripción / información adicional) ---------- */
body.single-product .woocommerce-tabs ul.tabs{
  display:flex; gap:10px; flex-wrap:wrap;
  border:none !important; margin-bottom:20px !important; padding:0 !important;
}
body.single-product .woocommerce-tabs ul.tabs li{
  border:1px solid var(--wh-surface-2) !important;
  background:var(--wh-surface) !important;
  border-radius:30px !important;
  padding:0 !important;
  margin:0 !important;
}
body.single-product .woocommerce-tabs ul.tabs li a{
  display:block;
  padding:10px 20px !important;
  font-family:'Nunito', sans-serif;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:rgba(255,255,255,.65) !important;
}
body.single-product .woocommerce-tabs ul.tabs li.active{
  background:var(--wh-green) !important;
  border-color:var(--wh-green) !important;
}
body.single-product .woocommerce-tabs ul.tabs li.active a{
  color:var(--wh-ink) !important;
}
body.single-product .woocommerce-tabs .panel{
  background:var(--wh-surface) !important;
  border:1px solid var(--wh-surface-2) !important;
  border-radius:18px !important;
  padding:26px !important;
}

/* ---------- Productos relacionados ---------- */
body.single-product .related.products .products,
body.single-product .up-sells.products .products{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap:20px !important;
}
body.single-product .related.products .product,
body.single-product .up-sells.products .product{
  background:var(--wh-surface) !important;
  border:1px solid var(--wh-surface-2) !important;
  border-radius:16px !important;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.single-product .related.products .product:hover,
body.single-product .up-sells.products .product:hover{
  transform:translateY(-4px);
  border-color:rgba(0,235,0,.4) !important;
  box-shadow:0 0 0 1px rgba(0,235,0,.2), 0 0 30px 4px rgba(0,235,0,.2), 0 18px 40px rgba(0,0,0,.4);
}
body.single-product .related.products .product img,
body.single-product .up-sells.products .product img{
  border-radius:16px 16px 0 0 !important;
}
body.single-product .related.products .product .button,
body.single-product .up-sells.products .product .button{
  border-radius:10px !important;
}

/* ---------- Responsive ---------- */
@media (max-width:767px){
  body.single-product form.variations_form.cart{ padding:20px 18px !important; border-radius:16px !important; }
  body.single-product .single_add_to_cart_button,
  body.single-product .wh-product-whatsapp-cta{ width:100%; min-width:0; }
  body.single-product .related.products .products,
  body.single-product .up-sells.products .products{ grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)) !important; }
}