/**
Theme Name: tusvasos
Author: lavallweb
Author URI: https://lavallweb.com
Description: Astra child theme by lavallweb
Version: 1.25.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tusvasos
Template: astra
*/

/*
   ESTRUCTURA DEL ARCHIVO

   PARTE 1 — Ajustes sueltos de la web
             Categorías, loop, tabla de atributos, sellos, carrito.
             Reglas pequeñas e independientes entre sí.

   PARTE 2 — Configurador de producto
             Todo lo que da forma al add-to-cart por pasos.
             Es el bloque grande y el único con dependencias externas
             (EPO, Tiered Price Table, plugin LVW).

   Cada parte lleva sus propias media queries al final.
*/

/* ##########################################################################
   PARTE 1 — AJUSTES SUELTOS DE LA WEB
   ########################################################################## */

/* --------------------------------------------------------------------------
   Archivo de categoría — resalta la gama activa en el filtro superior
   -------------------------------------------------------------------------- */

.term-gama-elite  #term-gama-elite,
.term-gama-basic  #term-gama-basic,
.term-gama-premium #term-gama-premium {
  border-color: var(--e-global-color-astglobalcolor0);
}

/* --------------------------------------------------------------------------
   Loop de producto — distintivo "UML Full" sobre la miniatura
   -------------------------------------------------------------------------- */

.uml-full-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  max-width: 30px;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Ficha — tabla de atributos, sin marco
   -------------------------------------------------------------------------- */

.woocommerce-js table.shop_attributes {
  border: 0;
}
.woocommerce-js table.shop_attributes td,
.woocommerce-js table.shop_attributes th {
  border: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Ficha — vídeo del vaso flexible vs. sello "Hecho en España"

   El vídeo va como fondo del contenedor #video-fondo-flexibles; el sello
   es el widget de imagen #hecho-espana. Se alternan según la clase que
   WooCommerce pone en el <body>: en la categoría Vasos Flexibles se ve el
   vídeo, en el resto el sello.
   -------------------------------------------------------------------------- */

#video-fondo-flexibles { display: none; }
#hecho-espana          { display: block; }

.product_cat-vasos-flexibles #video-fondo-flexibles { display: flex; }
.product_cat-vasos-flexibles #hecho-espana          { display: none; }

/* --------------------------------------------------------------------------
   Ficha — sellos de características (lavavajillas, reciclable, etc.)
   -------------------------------------------------------------------------- */

.tv-sellos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5%;
  margin: 24px 0;
  align-items: start;
}

.tv-sellos__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  border-radius: 10px;
  text-align: center;
  transition: transform .15s ease, box-shadow .15s ease;
}

.tv-sellos__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

.tv-sellos__icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tv-sellos__label {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.625;
  letter-spacing: .04em;
  color: #495057;
}

/* --------------------------------------------------------------------------
   Carrito
   -------------------------------------------------------------------------- */

.checkout-button.button.wc-forward br {
  display: none;
}

/* --------------------------------------------------------------------------
   Responsive de la PARTE 1
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
  .tv-sellos {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .tv-sellos__icon svg {
    width: 32px;
    height: 32px;
  }
  .tv-sellos__label {
    font-size: 10px;
  }
}


/* ##########################################################################
   PARTE 2 — CONFIGURADOR DE PRODUCTO POR PASOS
   ##########################################################################

   El configurador son cuatro fuentes distintas apiladas dentro del <form>:

     1. Variaciones de EPO   → .tc-styled-variations
     2. Tramos por cantidad  → .tpt__tiered-pricing        (Tiered Price Table)
     3. Opciones de EPO      → #tm-extra-product-options
     4. Resumen              → #lvw-precio-vaso            (plugin LVW propio)
                               + .tc-totals-form
                               + .e-atc-qty-button-holder

   El orden del DOM ya es el correcto, así que aquí no se reordena nada:
   solo se les da forma de tarjeta y se numeran con un contador CSS.

   AVISO: los nombres de clase `tc-` y `tm-` son de Extra Product Options
   (ThemeComplete). Una actualización del plugin puede cambiarlos y dejar
   este bloque sin efecto. Es la única parte del archivo con esa dependencia.
   ########################################################################## */

/* --------------------------------------------------------------------------
   Variables — cambiar aquí antes que en las reglas
   -------------------------------------------------------------------------- */

body.single-product {
  --tv-acento: #ff5c1a;          /* naranja de marca; lo usa Tiered Price Table */
  --tv-borde: #e3e5e8;
  --tv-fondo-paso: #fff;         /* era #f8f9fa antes de consolidar */
  --tv-borde-resumen: #ffcbb2;
  --tv-fondo-resumen: #fff7f3;
  --tv-tenue: #6b7280;
  --tv-radio: 12px;
  --tv-sticky-top: 100px;        /* mismo valor para imagen y resumen */
}

/* --------------------------------------------------------------------------
   Tarjeta de paso

   Sustituye a la antigua regla `.tc-container.cpf-element, .tpt__tiered-pricing`,
   que pintaba también los elementos ocultos y los anidados.
   -------------------------------------------------------------------------- */

.tc-styled-variations .cpf-section.tm-epo-variation-section,
.tpt__tiered-pricing > .tiered-pricing-wrapper,
#tm-extra-product-options .cpf-section:not(.tc-hidden) .tc-container.cpf-element:not(.tc-hidden) {
  border: 1px solid var(--tv-borde);
  border-radius: var(--tv-radio);
  background: var(--tv-fondo-paso);
  padding: 20px 22px 22px;
  margin: 0 0 16px;
  font-family: inherit;
}

/* El contenedor exterior de tramos no pinta marco: ya lo hace
   .tiered-pricing-wrapper. Si lo pintara, saldrían dos bordes anidados. */
.tpt__tiered-pricing {
  border: 0;
  padding: 0;
  background: none;
}

/* Igual dentro de las variaciones: la tarjeta la pone la sección exterior. */
.tc-styled-variations .tc-container.cpf-element {
  border: 0;
  padding: 0;
  background: none;
}

/* Cargos fijos sin etiqueta ("Pantalla Serigrafía", "Preimpresión IML").
   No son un paso: van sin número y en gris, para que no compitan. */
#tm-extra-product-options .tc-container.cpf-element:not(:has(.tm-epo-element-label)) {
  background: #fafbfc;
  padding: 12px 22px;
  margin: -6px 0 16px;
  font-size: .9rem;
}

/* Relleno vacío que EPO inserta entre secciones */
#tm-extra-product-options .tm_padding {
  display: none;
}

/* --------------------------------------------------------------------------
   Numeración de los pasos

   Un solo contador por formulario. Los pasos ocultos llevan display:none,
   así que no incrementan y la numeración sale correlativa sola en cada
   variación. Sigue el orden del DOM, no el visual: si algún día se reordena
   con flex o grid, los números dejarán de coincidir.
   -------------------------------------------------------------------------- */

body.single-product form.cart {
  counter-reset: tvpaso;
}

.tc-styled-variations h5.tc-epo-label,
.tpt__tiered-pricing > .tiered-pricing-wrapper > h3,
#tm-extra-product-options .cpf-section:not(.tc-hidden) .tc-container.cpf-element:not(.tc-hidden) > .tc-element-inner-wrap > .tc-row > h5.tc-epo-label {
  counter-increment: tvpaso;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px !important;   /* el <h3> de tramos trae margen inline */
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
  clear: none !important;
}

.tc-styled-variations h5.tc-epo-label::before,
.tpt__tiered-pricing > .tiered-pricing-wrapper > h3::before,
#tm-extra-product-options .cpf-section:not(.tc-hidden) .tc-container.cpf-element:not(.tc-hidden) > .tc-element-inner-wrap > .tc-row > h5.tc-epo-label::before {
  content: counter(tvpaso);
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tv-acento);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* El asterisco de obligatorio se lee como suciedad; se sustituye por texto. */
.tc-epo-label .tm-epo-required {
  margin-left: auto;
  float: none !important;
  font-size: 0;
  color: var(--tv-tenue);
  font-weight: 400;
}
.tc-epo-label .tm-epo-required::after {
  content: "Obligatorio";
  font-size: .75rem;
  letter-spacing: .01em;
}

/* Texto de ayuda bajo el título, alineado con el contenido del paso */
#tm-extra-product-options .tm-element-description p {
  margin: -8px 0 14px 40px;
  font-size: .875rem;
  color: var(--tv-tenue);
}

/* Contenido sangrado a la altura del círculo numerado */
#tm-extra-product-options .tc-container.cpf-element .tc-element-container {
  padding-left: 40px;
}

/* --------------------------------------------------------------------------
   Tabla de tramos por cantidad

   Las filas son clicables (ajuste clickable_rows del plugin) y fijan la
   cantidad, de ahí el hover marcado.
   -------------------------------------------------------------------------- */

.woocommerce-js table.shop_table.tiered-pricing-table {
  border: 0 !important;
  border-radius: 10px;
  border-collapse: separate;
  overflow: hidden;
  font-size: 14px;
  margin-top: 10px !important;
}

.woocommerce-js table.shop_table.tiered-pricing-table th,
.woocommerce-page table.shop_table.tiered-pricing-table th {
  padding: .3em 1em;
  font-weight: 600;
  color: var(--tv-tenue);
  border-bottom: 1px solid var(--tv-borde);
}

.woocommerce-js table.shop_table.tiered-pricing-table td,
.woocommerce-page table.shop_table.tiered-pricing-table td {
  padding: .3em 1em;
  border: 0 !important;
  border-bottom: 1px solid #f1f2f4 !important;
}

.woocommerce-js table.shop_table.tiered-pricing-table tbody tr:hover {
  background-color: #ff5c1a59;
}

/* --------------------------------------------------------------------------
   Opciones: radios, colores de tinta, campos de texto
   -------------------------------------------------------------------------- */

.tmcp-field-wrap.tm-per-row.tc-mode-text.tc-epo-text-wrapper {
  background: #fff;
  outline-width: 0 !important;
}

.tc-styled-variations li.tmcp-field-wrap.tc-active .tc-label-wrap,
#tm-extra-product-options li.tmcp-field-wrap.tc-active .tc-label-wrap {
  border-color: var(--tv-acento);
}

/* Última muestra de tinta = "Escoger pantone": es la única que lleva
   texto en vez de color, por eso se le devuelve la etiqueta. */
.colores-tinta-div li:last-child .tc-label-text {
  display: block !important;
  position: absolute;
  top: 8px;
  font-size: 10px;
  font-weight: 600;
}

.woocommerce-page input.tmcp-textfield {
  border-radius: 6px;
}

/* Enlaces de reinicio que EPO duplica y no aportan nada */
.tm-cart-edit-options,
.reset_variations.tc-cell {
  display: none !important;
}

form.cart .reset_variations {
  font-size: .8rem;
  color: var(--tv-tenue);
}

/* --------------------------------------------------------------------------
   Resumen apilado (precio por vaso + totales + cantidad + botón)

   Son cuatro hermanos sueltos, no un bloque. Las uniones se hacen quitando
   el borde donde se tocan, así que si falta alguno (producto sin LVW, sin
   tramos) el resto conserva su marco completo y no queda a medias.

   Este es el estado por defecto. Si el JS del resumen lateral está activo,
   el bloque siguiente lo sobrescribe.
   -------------------------------------------------------------------------- */

#lvw-precio-vaso,
.tc-totals-form,
.tc-totals-form + .e-atc-qty-button-holder {
  border: 1px solid var(--tv-borde-resumen);
  border-radius: var(--tv-radio);
  background: var(--tv-fondo-resumen);
  margin: 0;
  text-align: end;
}

#lvw-precio-vaso {
  padding: 20px 22px 12px;
  margin-top: 24px !important;   /* pisa el margen inline del plugin LVW */
}

.tc-totals-form {
  padding: 16px 22px;
}

.tc-totals-form + .e-atc-qty-button-holder {
  padding: 0 22px 22px;
  margin-bottom: 20px;
  display: flex;
  gap: 12px;
  align-items: stretch;
  justify-content: flex-end;
}

.tc-totals-form + .e-atc-qty-button-holder .single_add_to_cart_button {
  flex: 1 1 auto;
}

/* Uniones entre bloques contiguos */
#lvw-precio-vaso:has(+ .tc-totals-form),
.tc-totals-form:has(+ .e-atc-qty-button-holder) {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#lvw-precio-vaso + .tc-totals-form,
.tc-totals-form + .e-atc-qty-button-holder {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Sin plugin LVW, el resumen arranca en los totales */
.tc-totals-form:not(#lvw-precio-vaso + .tc-totals-form) {
  margin-top: 24px;
}

/* --------------------------------------------------------------------------
   Resumen en columna derecha — REQUIERE JS

   Estas reglas no hacen nada por sí solas: #tv-pasos y #tv-resumen no
   existen en el HTML que genera WordPress, los crea el JS del configurador.
   Si ese JS no está activo, este bloque queda inerte y manda el anterior.
   -------------------------------------------------------------------------- */

form.variations_form.cart:has(#tv-resumen) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 28px;
  align-items: start;
}

#tv-pasos {
  grid-column: 1;
  min-width: 0;
}

#tv-resumen {
  grid-column: 2;
  position: sticky;
  top: var(--tv-sticky-top);
  border: 1px solid var(--tv-borde-resumen);
  border-radius: var(--tv-radio);
  background: var(--tv-fondo-resumen);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Dentro del resumen los bloques pierden su marco individual */
#tv-resumen > * {
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  width: 100%;
}

#tv-resumen .e-atc-qty-button-holder {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

/* Etiqueta del selector de cantidad. Se genera con ::before para no tocar
   el JS ni el DOM: ocupa su propia línea encima del - 3 + gracias al
   flex-wrap del contenedor. */
#tv-resumen .e-atc-qty-button-holder::before {
  content: "Número de cajas";
  flex: 1 1 100%;
  text-align: right;
  font-size: .85rem;
  font-weight: 600;
  color: var(--tv-tenue);
  margin-bottom: -4px;
}

/* El selector - 3 + trae relleno propio de Astra/WooCommerce que dentro
   del resumen deja un hueco visible alrededor de los botones. */
#tv-resumen .quantity {
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
}
#tv-resumen .quantity .minus,
#tv-resumen .quantity .plus,
#tv-resumen .quantity input.qty {
  margin: 0;
}

#tv-resumen .quantity input.qty {
  width: 56px;
  min-height: 42px;
  text-align: center;
}
#tv-resumen .quantity .minus,
#tv-resumen .quantity .plus {
  min-width: 36px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#tv-resumen .single_add_to_cart_button {
  flex: 1 1 180px;
  min-height: 42px;
  white-space: nowrap;
}

/* "Ver carrito" lo inyecta WooCommerce tras añadir; a su propia línea */
#tv-resumen .added_to_cart {
  flex: 1 1 100%;
  text-align: right;
  font-size: .85rem;
}

/* "(sin impuestos)" tres veces es ruido: una sola vez al pie */
#tv-resumen small {
  display: none;
}
#tv-resumen::after {
  content: "Precios sin IVA";
  font-size: .75rem;
  color: var(--tv-tenue);
  text-align: right;
}

/* --------------------------------------------------------------------------
   Columna de la imagen — sticky

   El ID lo pone Elementor en el contenedor de la imagen.
   `align-self: start` es obligatorio: en un contenedor flex el hijo se
   estira a toda la altura por defecto y entonces el sticky no tiene
   recorrido y parece que no funciona.

   Comparte --tv-sticky-top con #tv-resumen para que ambos se peguen a la
   misma altura. Si un ancestro tiene overflow distinto de visible, ninguno
   de los dos sticky funcionará.
   -------------------------------------------------------------------------- */

#col-producto-personalizable {
  position: sticky;
  top: var(--tv-sticky-top);
  align-self: start;
}

/* --------------------------------------------------------------------------
   Responsive de la PARTE 2
   -------------------------------------------------------------------------- */

/* Por debajo de 900px no caben dos columnas.
   Se apaga el grid con `display: block` en vez de dejarlo en una columna:
   si el grid sigue activo, el `grid-column: 2` del resumen crea una columna
   implícita y el resumen se superpone a los pasos. */
@media (max-width: 900px) {
  form.variations_form.cart:has(#tv-resumen) {
    display: block;
  }

  #tv-pasos,
  #tv-resumen {
    grid-column: auto;
  }

  #tv-resumen {
    position: static;
    margin-top: 20px;
  }

  /* La imagen va encima del formulario: pegada taparía el configurador. */
  #col-producto-personalizable {
    position: static;
  }

  /* El resumen queda al final de seis pasos, así que el usuario configura
     sin ver el precio. Solo la fila de cantidad y botón se queda fija abajo.
     El padding derecho deja hueco al botón flotante de WhatsApp. */
  #tv-resumen .e-atc-qty-button-holder {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: var(--tv-fondo-resumen);
    border-top: 1px solid var(--tv-borde-resumen);
    padding: 10px 70px 10px 0;
  }

  /* En la barra fija la etiqueta sobra: cada línea cuenta en móvil. */
  #tv-resumen .e-atc-qty-button-holder::before {
    display: none;
  }
}

@media (max-width: 600px) {
  #tm-extra-product-options .tc-container.cpf-element .tc-element-container,
  #tm-extra-product-options .tm-element-description p {
    padding-left: 0;
    margin-left: 0;
  }

  .tc-styled-variations .cpf-section.tm-epo-variation-section,
  .tpt__tiered-pricing > .tiered-pricing-wrapper,
  #tm-extra-product-options .cpf-section:not(.tc-hidden) .tc-container.cpf-element:not(.tc-hidden) {
    padding: 16px 14px 18px;
  }

  /* La tabla de tramos tiene cuatro columnas y no cabe: scroll horizontal.
     Con la columna de rangos ("100.080 - 149.760") necesita más ancho. */
  .tpt__tiered-pricing > .tiered-pricing-wrapper {
    overflow-x: auto;
  }
  .woocommerce-js table.shop_table.tiered-pricing-table {
    min-width: 560px;
  }
}