/* ===========================================================================
   CARRITO, CHECKOUT Y PEDIDO RECIBIDO
   Las tres pantallas del flujo de caja. Van en código por la regla técnica 5.
   Solo tokens; ni un valor a mano.
   =========================================================================== */

/* La plantilla propia emite main.sc-tienda, no .entry-content de Divi. */
.sc-tienda{
  max-width:var(--sc-ancho-contenido);
  margin-inline:auto;
  padding-inline:var(--sc-canal);
  padding-block:var(--sc-espacio-seccion);
}

/* --- Campos, igual que el preset de Divi para que las dos zonas coincidan --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-cart .coupon input[type="text"]{
  width:100%;
  padding:var(--sc-espacio-4);
  background:var(--sc-color-superficie-sobre-superficie);
  color:var(--sc-texto-primario);
  border:var(--sc-trazo-normal) solid var(--sc-color-borde-campo);
  border-radius:var(--sc-radio-campo);
  font-family:var(--sc-fuente-lectura);
  font-size:var(--sc-tipo-cuerpo);
  min-height:var(--sc-toque-minimo);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{
  outline:var(--sc-trazo-foco) solid var(--sc-color-foco);
  outline-offset:var(--sc-desplazamiento-foco);
  border-color:var(--sc-color-foco) !important;
}

.woocommerce form .form-row label{
  display:block;
  margin-block-end:var(--sc-espacio-2);
  font-size:var(--sc-tipo-nota);
  font-weight:600;
  color:var(--sc-texto-secundario);
}

/* --- Botones --- */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce button.button.alt,
.woocommerce a.button.alt{
  background:var(--sc-color-accion);
  color:var(--sc-blanco);
  border-radius:var(--sc-radio-boton);
  padding:var(--sc-espacio-3) var(--sc-espacio-6);
  font-weight:600;
  border:0;
  min-height:var(--sc-toque-minimo);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover{ background:var(--sc-color-accion-hover); }

/* --- Envío gratuito, con su barra --- */
.sc-envio-gratis{ margin-block-end:var(--sc-espacio-6); }

.sc-envio-gratis__barra{
  height:var(--sc-espacio-2);
  background:var(--sc-color-superficie-hundida);
  border-radius:var(--sc-radio-pildora);
  overflow:hidden;
}

.sc-envio-gratis__barra span{
  display:block;
  height:100%;
  background:var(--sc-color-accion);
  border-radius:var(--sc-radio-pildora);
}

.sc-aviso{
  padding:var(--sc-espacio-4);
  border-radius:var(--sc-radio-tarjeta);
  margin-block-end:var(--sc-espacio-6);
}

.sc-aviso--atencion{ background:var(--sc-color-aviso-superficie); color:var(--sc-color-aviso-texto); }
.sc-aviso--confirmacion{ background:var(--sc-color-confirmacion-superficie); color:var(--sc-color-confirmacion-texto); }
.sc-aviso--info{ background:var(--sc-color-info-superficie); color:var(--sc-color-info-texto); }

/* --- Las dos casillas de desistimiento -------------------------------------
   Obligación legal: separadas, sin premarcar y bien visibles. Se les da
   superficie propia para que nadie las confunda con letra pequeña.
   -------------------------------------------------------------------------- */
.sc-desistimiento{
  margin-block:var(--sc-espacio-6);
  padding:var(--sc-espacio-6);
  background:var(--sc-color-superficie-elevada);
  border:var(--sc-trazo-normal) solid var(--sc-color-borde);
  border-radius:var(--sc-radio-tarjeta);
}

.sc-desistimiento__casilla{
  display:flex;
  gap:var(--sc-espacio-3);
  align-items:flex-start;
  padding-block:var(--sc-espacio-3);
  cursor:pointer;
}

.sc-desistimiento__casilla + .sc-desistimiento__casilla{
  border-block-start:var(--sc-trazo-fino) solid var(--sc-color-borde-sutil);
}

.sc-desistimiento__casilla input[type="checkbox"]{
  inline-size:var(--sc-espacio-5);
  block-size:var(--sc-espacio-5);
  margin-block-start:2px;
  accent-color:var(--sc-color-accion);
  flex:0 0 auto;
}

.sc-desistimiento__casilla span{
  font-size:var(--sc-tipo-cuerpo-s);
  line-height:var(--sc-linea-cuerpo);
  color:var(--sc-texto-secundario);
}

.sc-desistimiento__casilla strong{ color:var(--sc-texto-primario); }

.sc-desistimiento__nota{
  margin-block-start:var(--sc-espacio-4);
  font-size:var(--sc-tipo-nota);
  color:var(--sc-texto-terciario);
}

/* --- Pedido recibido, las cinco variantes --- */
.sc-gracias{
  max-width:var(--sc-ancho-lectura);
  margin-inline:auto;
  margin-block-end:var(--sc-espacio-seccion);
}

.sc-gracias__titulo{
  font-size:var(--sc-tipo-display-2);
  margin-block-end:var(--sc-espacio-4);
}

.sc-gracias h2{
  font-size:var(--sc-tipo-titulo-2);
  margin-block:var(--sc-espacio-8) var(--sc-espacio-4);
}

.sc-gracias ol,
.sc-gracias ul{ padding-inline-start:var(--sc-espacio-6); }

.sc-gracias li + li{ margin-block-start:var(--sc-espacio-3); }

.sc-boton--grande{
  display:inline-block;
  margin-block:var(--sc-espacio-6);
  padding:var(--sc-espacio-4) var(--sc-espacio-8);
  font-size:var(--sc-tipo-cuerpo);
}

.sc-gracias__pie,
.sc-gracias__cierre{
  margin-block-start:var(--sc-espacio-6);
  color:var(--sc-texto-secundario);
  font-size:var(--sc-tipo-cuerpo-s);
}

.sc-gracias__panel{ margin-block-start:var(--sc-espacio-4); }

.sc-tienda__titulo{
  font-size:var(--sc-tipo-display-2);
  margin-block-end:var(--sc-espacio-8);
}

/* ===========================================================================
   FICHA DE PRODUCTO
   La ficha la maqueta el Theme Builder con módulos nativos. Aquí solo van los
   controles que WooCommerce imprime dentro del módulo de añadir al carrito y
   que ningún atributo de Divi alcanza.
   =========================================================================== */

/*
 * Divi estila este campo con selectores muy específicos, y el borde además lo
 * pone con !important:
 *   .et_pb_wc_add_to_cart .quantity input.qty{border:0 solid #333!important}
 * Por eso el borde de aquí también lo lleva. El resto gana por especificidad.
 */
.woocommerce div.product form.cart .quantity input.qty,
.et_pb_wc_add_to_cart form.cart .quantity input.qty{
  min-width:calc(var(--sc-toque-minimo) * 1.4);
  min-height:var(--sc-toque-minimo);
  padding-inline:var(--sc-espacio-3);
  text-align:center;
  background:var(--sc-color-superficie-sobre-superficie);
  color:var(--sc-texto-primario);
  border:var(--sc-trazo-normal) solid var(--sc-color-borde-campo) !important;
  border-radius:var(--sc-radio-campo);
  font-family:var(--sc-fuente-lectura);
  font-size:var(--sc-tipo-cuerpo);
}

.woocommerce div.product form.cart .quantity input.qty:focus,
.et_pb_wc_add_to_cart form.cart .quantity input.qty:focus{
  outline:var(--sc-trazo-foco) solid var(--sc-color-foco);
  outline-offset:var(--sc-desplazamiento-foco);
  border-color:var(--sc-color-foco) !important;
}


/* ===========================================================================
   LO QUE DIVI PISA EN EL CARRITO Y EL PAGO
   ---------------------------------------------------------------------------
   Divi trae su propia hoja de WooCommerce y llega DESPUÉS de base.css con
   selectores más específicos. Su regla para los campos del carrito es:

     .woocommerce .quantity input.qty,
     .woocommerce #content table.cart td.actions .input-text, …
     { background-color:#eee; border-width:0; border-radius:0 }

   El rival aquí no es WooCommerce, es Divi: medido el 2026-08-25 en
   et-divi-dynamic-*.css. Por eso estos selectores repiten su cadena y le
   suman una clase o un elemento — es lo mínimo para ganar sin `!important`.
   =========================================================================== */

/* --- Cantidad y cupón del carrito ---------------------------------------- */
.woocommerce-cart table.cart td.product-quantity .quantity input.qty,
.woocommerce-cart table.cart td.actions .coupon input.input-text,
.woocommerce-page table.cart td.product-quantity .quantity input.qty,
.woocommerce-page table.cart td.actions .coupon input.input-text{
  padding:var(--sc-espacio-4);
  background-color:var(--sc-color-superficie-sobre-superficie);
  color:var(--sc-texto-primario);
  border:var(--sc-trazo-normal) solid var(--sc-color-borde-campo);
  border-radius:var(--sc-radio-campo);
  font-family:var(--sc-fuente-lectura);
  font-size:var(--sc-tipo-cuerpo);
  min-height:var(--sc-toque-minimo);
}

.woocommerce-cart table.cart td.product-quantity .quantity input.qty:hover,
.woocommerce-cart table.cart td.actions .coupon input.input-text:hover{
  border-color:var(--sc-color-borde-campo-hover);
}

.woocommerce-cart table.cart td.product-quantity .quantity input.qty:focus,
.woocommerce-cart table.cart td.actions .coupon input.input-text:focus{
  outline:var(--sc-trazo-foco) solid var(--sc-color-foco);
  outline-offset:var(--sc-desplazamiento-foco);
  border-color:var(--sc-color-foco);
}

/* La cantidad es un número corto: a ancho completo queda un campo enorme
   para tres caracteres, y descuadra la columna de la tabla. */
.woocommerce-cart table.cart td.product-quantity .quantity input.qty{
  width:auto;
  max-width:5.5rem;
  text-align:center;
}

/* --- El botón «Actualizar carrito» ---------------------------------------
   Nace deshabilitado —WooCommerce lo activa al cambiar una cantidad— así que
   se le da el estado apagado del sistema en vez del gris del navegador, y el
   mismo radio que los demás para que la fila no mezcle dos formas. */
.woocommerce-cart table.cart td.actions button[name="update_cart"],
.woocommerce-cart table.cart td.actions input[name="update_cart"]{
  background:transparent;
  border:var(--sc-trazo-normal) solid var(--sc-color-borde-fuerte);
  border-radius:var(--sc-radio-boton);
  color:var(--sc-texto-primario);
  padding:var(--sc-espacio-3) var(--sc-espacio-6);
  font-weight:600;
  min-height:var(--sc-toque-minimo);
}

.woocommerce-cart table.cart td.actions button[name="update_cart"]:hover:not(:disabled),
.woocommerce-cart table.cart td.actions input[name="update_cart"]:hover:not(:disabled){
  background:var(--sc-capa-hover);
  border-color:var(--sc-marron-700);
}

.woocommerce-cart table.cart td.actions button[name="update_cart"]:disabled,
.woocommerce-cart table.cart td.actions input[name="update_cart"]:disabled{
  opacity:var(--sc-opacidad-desactivado,.55);
  cursor:not-allowed;
}

/* --- El desplegable de país y provincia ----------------------------------
   WooCommerce esconde el <select> y pinta un widget propio (select2). Sin
   esto, los dos únicos campos con forma distinta del formulario son
   justamente los que abren un panel: borde de 4px y otro color de trazo. */
.woocommerce-checkout .select2-container .select2-selection--single,
.woocommerce-page .select2-container .select2-selection--single{
  height:auto;
  min-height:var(--sc-toque-minimo);
  padding:var(--sc-espacio-4);
  background-color:var(--sc-color-superficie-sobre-superficie);
  border:var(--sc-trazo-normal) solid var(--sc-color-borde-campo);
  border-radius:var(--sc-radio-campo);
}

.woocommerce-checkout .select2-container .select2-selection--single:hover{
  border-color:var(--sc-color-borde-campo-hover);
}

.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered{
  padding:0;
  line-height:inherit;
  color:var(--sc-texto-primario);
}

/* La flecha se recoloca porque el relleno del campo cambió su caja. */
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow{
  height:100%;
  inset-block-start:0;
  inset-inline-end:var(--sc-espacio-3);
}

/* El panel abierto hereda la forma del campo, no la de select2. */
.select2-container--default .select2-dropdown{
  background-color:var(--sc-color-superficie-sobre-superficie);
  border:var(--sc-trazo-normal) solid var(--sc-color-borde-campo);
  border-radius:var(--sc-radio-campo);
}

.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background-color:var(--sc-color-accion);
  color:var(--sc-blanco);
}

/* --- El carril de las pestañas -------------------------------------------
 * El módulo Woo Tabs de Divi NO emite el marcado de WooCommerce (`ul.tabs`):
 * emite el suyo, `ul.et_pb_tabs_controls`. Medido en el front, ese carril sale
 * con `background:#f4f4f4` y deja una banda gris a la derecha de la última
 * pestaña. Las pestañas en sí ya vienen de marca por atributos del módulo
 * (`inactiveTab` y `activeTab`), así que aquí solo se apaga el carril y se le
 * pone la línea de separación con el token.
 *
 * Es lo que no se pudo hacer con `css.tabsControls`: ese atributo no emite.
 */
.et_pb_wc_tabs ul.et_pb_tabs_controls{
  background:transparent;
  border-bottom:var(--sc-trazo-fino) solid var(--sc-color-borde-sutil);
}

.et_pb_wc_tabs ul.et_pb_tabs_controls li{
  border-right-color:var(--sc-color-borde-sutil);
}

/* --- Los iconos de la franja de garantías --------------------------------
 * El diseño los pide monolínea, del mismo trazo que el resto del sistema.
 * NovaMira no expone el catálogo de iconos de Divi, y la fuente ETmodules no
 * es el mismo lenguaje visual que la ilustración de marca. Se dibujan con
 * `mask`, así que el SVG es una silueta y **el color sale del token**, no del
 * archivo: se puede cambiar la paleta sin volver a tocar los iconos.
 * Trazo 2,25 = el valor de --sc-trazo-icono; va dentro del SVG porque una
 * máscara no puede leer una custom property.
 */
.sc-garantia .et_pb_blurb_content{
  display:flex;
  align-items:flex-start;
  gap:var(--sc-espacio-4);
  max-width:none;
}

.sc-garantia .et_pb_blurb_content:before{
  content:"";
  flex:0 0 auto;
  width:30px;
  height:30px;
  background-color:var(--sc-color-tinta-tenue);
  -webkit-mask:var(--sc-garantia-icono) center/contain no-repeat;
  mask:var(--sc-garantia-icono) center/contain no-repeat;
}

.sc-garantia--envio      { --sc-garantia-icono:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.25%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m7.5 4.27 9 5.15%22/%3E%3Cpath d=%22M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z%22/%3E%3Cpath d=%22m3.3 7 8.7 5 8.7-5%22/%3E%3Cpath d=%22M12 22V12%22/%3E%3C/svg%3E"); }
.sc-garantia--pago       { --sc-garantia-icono:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.25%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E"); }
.sc-garantia--devolucion { --sc-garantia-icono:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.25%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 14 4 9l5-5%22/%3E%3Cpath d=%22M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11%22/%3E%3C/svg%3E"); }