/* =============================================================
   TECNET - TIENDA
   Catalogo, ficha de producto, carrito y checkout.

   WooCommerce trae su propia hoja pensada para temas claros: tarjetas
   blancas, texto gris oscuro y botones morados. Sobre el fondo #0A0B0D
   de este tema eso queda ilegible. Aqui se reescribe con los tokens de
   marca, sin tocar el marcado de WooCommerce.

   Se cubren las DOS versiones del carrito y el checkout: el clasico por
   shortcode (.woocommerce-cart-form, .shop_table) y el de bloques
   (.wc-block-cart, .wc-block-checkout). Una tienda puede tener
   cualquiera de los dos segun como se creo, y cual esta activo no se ve
   desde el tema.
   ============================================================= */

/* ---------- CONTENEDOR ----------
   :not(body) es obligatorio: en la tienda y en las fichas WooCommerce le pone
   la clase "woocommerce" al <body>, y sin el filtro el body entero quedaba en
   una caja de 1200 px con relleno. Encabezado y pie salian encajonados y
   "descentrados" solo en las paginas de tienda (visto en produccion). */
:not(body).woocommerce,
.woocommerce-page .tt-main > .woocommerce,
.tt-shop{
  width:100%;max-width:var(--ancho);margin-inline:auto;
  padding-inline:var(--s-3);padding-block:var(--s-6);
}
@media (min-width:768px){
  :not(body).woocommerce,.tt-shop{padding-inline:var(--s-4);padding-block:var(--s-7)}
}

.woocommerce-products-header__title,
.woocommerce .page-title,
.tt-shop-titulo{
  font-family:var(--tt-font-display);text-transform:uppercase;
  font-size:clamp(1.9rem,5vw,3rem);line-height:.95;margin-bottom:var(--s-2);
}
.term-description{color:var(--tt-texto-2);max-width:68ch;margin-bottom:var(--s-5)}

/* ---------- BARRA DE ORDEN Y RESULTADOS ---------- */
.woocommerce-result-count{color:var(--tt-texto-2);font-size:.9rem;margin:0}
.woocommerce-ordering{margin:0}
.woocommerce-ordering select,
.woocommerce select,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce textarea{
  background:var(--tt-superficie);color:var(--tt-texto);
  border:1px solid var(--tt-linea);border-radius:var(--radio-sm);
  padding:.7rem .9rem;font:inherit;
}
.woocommerce select:focus-visible,
.woocommerce input:focus-visible,
.woocommerce textarea:focus-visible{
  outline:2px solid var(--tt-azul-claro);outline-offset:2px;
}
.woocommerce ::placeholder{color:var(--tt-texto-2);opacity:1}

/* ---------- REJILLA DE PRODUCTOS ---------- */
.woocommerce ul.products{
  display:grid;gap:var(--s-3);margin:var(--s-5) 0 0;padding:0;list-style:none;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:640px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.woocommerce ul.products{grid-template-columns:repeat(3,1fr);gap:var(--s-4)}}
.woocommerce ul.products::before,
.woocommerce ul.products::after{content:none}

/* WooCommerce reparte anchos con float y porcentajes. Con grid eso sobra:
   deja las tarjetas al 30,75% DE LA CELDA, o sea 108 px dentro de una
   columna de 352 (medido en local).
   El selector lleva [class*="columns-"] a proposito: la regla de
   WooCommerce es `.woocommerce ul.products.columns-3 li.product`, con
   cuatro clases. Con tres clases pierde por especificidad aunque nuestra
   hoja cargue despues. El atributo iguala el peso y cubre cualquier
   numero de columnas que se configure en el personalizador. */
.woocommerce ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product{
  float:none;width:auto;margin:0;padding:0;
  display:flex;flex-direction:column;
  background:var(--tt-carbon);border:1px solid var(--tt-linea);
  border-radius:var(--radio);overflow:hidden;
  transition:border-color .18s var(--ease,ease),transform .18s var(--ease,ease);
}
.woocommerce ul.products li.product:hover{
  border-color:var(--tt-azul);transform:translateY(-3px);
}

/* contain y no cover: la mayoria de las fotos vienen con fondo blanco y
   algunas no son cuadradas (hay una de 375x649); cover recortaba la cabeza
   del producto. Sobre blanco, contain deja la foto entera y las bandas que
   sobran se funden con su propio fondo. */
.woocommerce ul.products li.product a img{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;
  margin:0;display:block;background:var(--tt-blanco);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2{
  font-size:1rem;line-height:1.3;font-weight:600;
  padding:var(--s-3) var(--s-3) 0;margin:0;color:var(--tt-texto);
}

.woocommerce ul.products li.product .price{
  padding:var(--s-2) var(--s-3) 0;margin:0 0 auto;
  font-family:var(--tt-font-display);font-size:1.35rem;color:var(--tt-texto);
}

/* El boton va pegado abajo para que todas las tarjetas terminen igual
   aunque los nombres ocupen una o tres lineas. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  margin:var(--s-3);text-align:center;
}

/* En movil van dos tarjetas por fila (~140 px utiles): con el tamano del
   boton grande, "Anadir al carrito" se partia en tres lineas y la pildora
   quedaba como una mancha. Letra y relleno mas chicos lo dejan en una. */
@media (max-width:639px){
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .added_to_cart{
    margin:var(--s-2);padding:.6rem .5rem;font-size:.85rem;line-height:1.25;
    white-space:nowrap;
  }
}

.woocommerce span.onsale{
  background:var(--tt-naranja);color:var(--tt-texto-inv);
  font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  border-radius:var(--radio-pill);padding:.3rem .7rem;
  min-height:0;min-width:0;line-height:1.4;
  top:var(--s-2);left:var(--s-2);right:auto;margin:0;
}

/* flex:1 estira el enlace (foto, titulo, precio) y empuja el boton al fondo:
   el margin:auto del precio no servia porque el boton es hermano del enlace,
   no hijo suyo, y los botones quedaban a alturas distintas en cada fila. */
.woocommerce ul.products li.product .woocommerce-loop-product__link{
  text-decoration:none;display:block;flex:1 1 auto;min-width:0;
}

/* ---------- PRECIOS ---------- */
.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price{color:var(--tt-texto)}

.woocommerce .price del,
.woocommerce div.product p.price del{
  color:var(--tt-texto-2);opacity:1;font-size:.8em;margin-right:.4em;
}
.woocommerce .price ins,
.woocommerce div.product p.price ins{
  text-decoration:none;color:var(--tt-naranja);font-weight:700;
}

/* ---------- BOTONES ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--tt-azul-btn);color:#fff;
  border:0;border-radius:var(--radio-pill);
  font:inherit;font-weight:700;line-height:1.2;
  padding:.85rem 1.4rem;min-height:44px;
  text-decoration:none;cursor:pointer;
  transition:background .18s ease,transform .12s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover{
  background:var(--tt-azul);color:#fff;transform:translateY(-1px);
}
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible{
  outline:2px solid var(--tt-azul-claro);outline-offset:2px;
}

/* El naranja es el CTA de compra y solo ese. Blanco sobre naranja da
   3,3:1 y NO pasa AA, por eso el texto va en el negro del tema. */
.woocommerce button.button.alt.single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce a.button.alt.checkout-button,
.woocommerce #place_order,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
  background:var(--tt-naranja);color:var(--tt-texto-inv);
}
.woocommerce button.button.alt.single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.woocommerce a.button.alt.checkout-button:hover,
.woocommerce #place_order:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover{
  background:#ff7a10;color:var(--tt-texto-inv);
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled{
  background:var(--tt-superficie);color:var(--tt-texto-2);
  opacity:1;cursor:not-allowed;transform:none;
}

/* ---------- FICHA DE PRODUCTO ---------- */
.woocommerce div.product{display:grid;gap:var(--s-5)}
@media (min-width:900px){
  .woocommerce div.product{
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    align-items:start;column-gap:var(--s-6);
  }
  .woocommerce div.product .woocommerce-tabs,
  .woocommerce div.product .related,
  .woocommerce div.product .upsells{grid-column:1/-1}
}

.woocommerce div.product div.images{margin:0;width:auto;float:none}
.woocommerce div.product div.images img{border-radius:var(--radio)}
.woocommerce div.product div.summary{margin:0;width:auto;float:none}

.woocommerce div.product .product_title{
  font-family:var(--tt-font-display);text-transform:uppercase;
  font-size:clamp(1.7rem,4vw,2.6rem);line-height:1;margin-bottom:var(--s-2);
}
.woocommerce div.product p.price{
  font-family:var(--tt-font-display);font-size:2rem;margin-block:var(--s-2) var(--s-3);
}
.woocommerce div.product .woocommerce-product-details__short-description{
  color:var(--tt-texto-2);max-width:60ch;
}

.woocommerce div.product form.cart{
  display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;
  margin-block:var(--s-4);
}
.woocommerce .quantity .qty{
  width:5.5rem;text-align:center;min-height:44px;
  background:var(--tt-superficie);color:var(--tt-texto);
  border:1px solid var(--tt-linea);border-radius:var(--radio-sm);
}
.woocommerce div.product .stock{color:var(--tt-exito);font-weight:600}
.woocommerce div.product .out-of-stock{color:var(--tt-error)}
.woocommerce div.product .product_meta{
  color:var(--tt-texto-2);font-size:.88rem;
  border-top:1px solid var(--tt-linea);padding-top:var(--s-3);margin-top:var(--s-3);
}
.woocommerce div.product .product_meta a{color:var(--tt-azul-claro)}

/* ---------- PESTANAS ---------- */
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 var(--s-4);display:flex;flex-wrap:wrap;gap:var(--s-1)}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent;border:1px solid var(--tt-linea);border-radius:var(--radio-pill);
  margin:0;padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{content:none;border:0;box-shadow:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  color:var(--tt-texto-2);padding:.6rem 1.1rem;font-weight:600;text-decoration:none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
  background:var(--tt-azul-btn);border-color:var(--tt-azul-btn);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:#fff}
.woocommerce div.product .woocommerce-tabs .panel{max-width:72ch}
.woocommerce table.shop_attributes th{background:transparent;color:var(--tt-texto-2);font-weight:600}

/* ---------- BLINDAJE DE LA FICHA CONTRA DESBORDES ----------
   `.woocommerce div.product` es una rejilla de UNA columna en movil, y una
   columna `1fr` implicita vale `minmax(auto,1fr)`: el minimo es el contenido.
   Una descripcion con una tabla de MercadoLibre sin partir (andes-table) lo
   estira y arrastra a la galeria, al resumen y a las pestanas fuera de la
   pantalla. Con minmax(0,1fr) la columna nunca supera al contenedor y
   min-width:0 deja a cada hijo encogerse por debajo de su contenido. */
.woocommerce div.product{grid-template-columns:minmax(0,1fr);max-width:100%}
.woocommerce div.product > *{min-width:0;max-width:100%}
@media (min-width:900px){
  .woocommerce div.product{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
}
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-Tabs-panel{overflow-wrap:anywhere}
.woocommerce div.product .woocommerce-Tabs-panel img,
.woocommerce div.product .woocommerce-product-details__short-description img{max-width:100%;height:auto}

/* ---------- TABLAS DE LA DESCRIPCION ----------
   Vienen pegadas de MercadoLibre (andes-table, ui-vpp-striped-specs) con
   estilos en linea y th centrados o a la derecha, pensados para fondo
   blanco. Se reescriben con tokens: izquierda, filas alternas sutiles, borde
   de linea y texto que parte. Si aun asi una tabla no cabe, scrollea ELLA
   (display:block + overflow-x:auto) y no la pagina entera. */
.woocommerce div.product .woocommerce-Tabs-panel table,
.woocommerce div.product .woocommerce-product-details__short-description table{
  display:block;max-width:100%;overflow-x:auto;
  border-collapse:collapse;border:1px solid var(--tt-linea);
  border-radius:var(--radio-sm);margin:var(--s-3) 0;
  font-size:var(--fs-small);
  background:transparent;color:var(--tt-texto);
}
.woocommerce div.product .woocommerce-Tabs-panel table tbody,
.woocommerce div.product .woocommerce-product-details__short-description table tbody{
  display:table;width:100%;
}
.woocommerce div.product .woocommerce-Tabs-panel table th,
.woocommerce div.product .woocommerce-Tabs-panel table td,
.woocommerce div.product .woocommerce-product-details__short-description table th,
.woocommerce div.product .woocommerce-product-details__short-description table td{
  text-align:left !important;vertical-align:top;
  padding:var(--s-2) var(--s-3);
  border:0;border-top:1px solid var(--tt-linea);
  background:transparent;color:var(--tt-texto);
  overflow-wrap:anywhere;
}
.woocommerce div.product .woocommerce-Tabs-panel table th,
.woocommerce div.product .woocommerce-product-details__short-description table th{
  color:var(--tt-texto-2);font-weight:600;
}
.woocommerce div.product .woocommerce-Tabs-panel table tr:first-child > *,
.woocommerce div.product .woocommerce-product-details__short-description table tr:first-child > *{border-top:0}
.woocommerce div.product .woocommerce-Tabs-panel table tr:nth-child(even) > *,
.woocommerce div.product .woocommerce-product-details__short-description table tr:nth-child(even) > *{
  background:var(--tt-carbon);
}
/* Los div y center internos de MercadoLibre traen su propia alineacion. */
.woocommerce div.product .woocommerce-Tabs-panel table th *,
.woocommerce div.product .woocommerce-Tabs-panel table td *{text-align:left}
.woocommerce div.product .woocommerce-Tabs-panel table center{text-align:left;display:block}

/* "Informacion adicional" de WooCommerce: el valor viene en un <p>. */
.woocommerce div.product table.woocommerce-product-attributes th{width:34%}
.woocommerce div.product table.woocommerce-product-attributes td p{margin:0}

/* ---------- ADDI Y SISTECREDITO EN LA FICHA ----------
   <addi-product-widget> es un web component (shadow DOM) que pinta texto
   NEGRO sobre fondo transparente, pensado para paginas claras: sobre el
   negro de la tienda no se leia. El interior no se puede tocar desde fuera,
   pero el elemento anfitrion si: se le da el fondo claro que espera. Sin
   padding y con el radio de su borde interno (5 px) para no duplicar el
   marco: el contorno negro propio del widget queda como unico borde. */
.woocommerce div.product addi-product-widget,
.woocommerce div.product [class*="sistecredito"][class*="widget"]{
  display:block;width:fit-content;max-width:100%;
  background:var(--tt-blanco);border-radius:5px;
  margin-block:var(--s-3);overflow:hidden;
}

/* ---------- TABLAS: CARRITO CLASICO Y PEDIDOS ---------- */
.woocommerce table.shop_table{
  border:1px solid var(--tt-linea);border-radius:var(--radio);
  border-collapse:separate;border-spacing:0;overflow:hidden;width:100%;
}
.woocommerce table.shop_table th{
  background:var(--tt-superficie);color:var(--tt-texto);
  text-align:left;padding:var(--s-3);font-weight:700;border:0;
}
.woocommerce table.shop_table td{
  background:var(--tt-carbon);color:var(--tt-texto);
  border:0;border-top:1px solid var(--tt-linea);padding:var(--s-3);
}
.woocommerce table.shop_table img{width:64px;height:64px;object-fit:cover;border-radius:var(--radio-sm)}
.woocommerce table.shop_table a{color:var(--tt-texto);text-decoration:none}
.woocommerce table.shop_table a:hover{color:var(--tt-azul-claro)}
.woocommerce a.remove{
  color:var(--tt-error)!important;font-size:1.4rem;line-height:1;
  width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
}
.woocommerce a.remove:hover{background:var(--tt-error);color:#fff!important}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3{
  font-family:var(--tt-font-display);text-transform:uppercase;font-size:1.4rem;
  margin:0 0 var(--s-3);
}
.woocommerce .cart_totals{
  background:var(--tt-carbon);border:1px solid var(--tt-linea);
  border-radius:var(--radio);padding:var(--s-4);
}
/* ---------- ANCHO DE PANTALLAS DE TAREA ----------
   page.php le pone esta clase al contenido de carrito, checkout y Mi cuenta.
   La medida de 68ch de base.css es para leer texto; aqui hay tablas y
   formularios en dos columnas, y con ella todo salia en ~580 px a 1280.
   El doble selector iguala el peso de `.tt-pagina-contenido` sin !important. */
.tt-pagina-contenido.tt-pagina-contenido--ancho{max-width:var(--ancho);padding-bottom:var(--s-6)}
/* El contenedor ya da el margen lateral; sin esto el movil perdia 32 px
   (16 del contenedor + 16 de `.woocommerce`) y quedaban 311 de 375. */
.tt-pagina-contenido--ancho > .woocommerce{padding-inline:0;padding-block:var(--s-4) 0;max-width:none}
.tt-pagina-contenido--ancho > .woocommerce > *{min-width:0}

/* ---------- CARRITO CLASICO: DISPOSICION ----------
   Productos a la izquierda y totales a la derecha desde 900 px; apilado
   antes. Los totales quedan pegados al hacer scroll porque son cortos. */
.woocommerce-cart .woocommerce .woocommerce-notices-wrapper:empty{display:none}
.woocommerce-cart .woocommerce .cart-collaterals{width:100%;float:none;margin:0}
.woocommerce-cart .woocommerce .cart-collaterals .cart_totals{width:100%;float:none;margin:0}
.woocommerce-cart .woocommerce .cart_totals h2{margin-top:0}
.woocommerce-cart .woocommerce-cart-form{margin:0}
@media (max-width:899px){
  .woocommerce-cart .woocommerce .cart-collaterals{margin-top:var(--s-4)}
}
@media (min-width:900px){
  .woocommerce-cart .tt-pagina-contenido--ancho > .woocommerce{
    display:grid;grid-template-columns:minmax(0,1fr) 360px;
    column-gap:var(--s-5);align-items:start;
  }
  .woocommerce-cart .woocommerce .woocommerce-notices-wrapper{grid-column:1/-1}
  .woocommerce-cart .woocommerce .woocommerce-cart-form{grid-column:1}
  .woocommerce-cart .woocommerce .cart-collaterals{
    grid-column:2;position:sticky;top:calc(var(--header-h) + var(--s-3));
  }
}

/* Miniatura: WooCommerce encoge la celda a ~30 px y la imagen quedaba como
   una raya. Se fija el ancho de la celda y de la imagen. */
.woocommerce-cart table.cart td.product-remove{width:48px;padding-inline:var(--s-2);text-align:center}
.woocommerce-cart table.cart td.product-thumbnail{width:88px;min-width:88px}
.woocommerce-cart table.cart td.product-thumbnail img{
  width:64px;height:64px;max-width:none;object-fit:cover;display:block;
  background:var(--tt-superficie);border-radius:var(--radio-sm);
}
.woocommerce-cart table.cart td.product-name a{font-weight:600}
.woocommerce-cart table.cart td.product-quantity .qty{width:5rem}

/* Cupon: se conserva (habra campanas con codigos) pero como accion
   secundaria: input con ancho real, boton de contorno al lado. */
.woocommerce-cart .woocommerce table.cart td.actions{padding:var(--s-3)}
.woocommerce-cart .woocommerce table.cart td.actions::after{content:"";display:table;clear:both}
.woocommerce-cart .woocommerce table.cart td.actions .coupon{
  float:left;display:flex;gap:var(--s-2);width:min(100%,380px);
}
.woocommerce-cart .woocommerce table.cart td.actions .coupon .input-text{
  float:none;flex:1 1 auto;min-width:0;width:auto;margin:0;min-height:44px;
  padding:.7rem .9rem;line-height:1.2;
  background:var(--tt-superficie);color:var(--tt-texto);
  border:1px solid var(--tt-linea);border-radius:var(--radio-sm);
}
.woocommerce-cart .woocommerce table.cart td.actions .coupon .button,
.woocommerce-cart .woocommerce table.cart td.actions > .button{
  background:transparent;color:var(--tt-texto);border:1px solid var(--tt-linea);
  flex:0 0 auto;white-space:nowrap;
}
.woocommerce-cart .woocommerce table.cart td.actions .coupon .button:hover,
.woocommerce-cart .woocommerce table.cart td.actions > .button:hover{
  background:var(--tt-superficie);border-color:var(--tt-azul-claro);color:var(--tt-texto);
}
.woocommerce-cart .woocommerce table.cart td.actions > .button:disabled{
  color:var(--tt-texto-2);border-color:var(--tt-linea);background:transparent;
}
.woocommerce-cart .woocommerce table.cart td.actions > .button{float:right}

/* Totales: sin las lineas de tabla que dibujaba base.css en cada celda. */
.woocommerce .cart_totals table.shop_table{border:0;border-radius:0;background:transparent}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td{
  background:transparent;padding:var(--s-2) 0;border:0;border-top:1px solid var(--tt-linea);
}
.woocommerce .cart_totals table.shop_table tr:first-child th,
.woocommerce .cart_totals table.shop_table tr:first-child td{border-top:0}
.woocommerce .cart_totals table.shop_table td{text-align:right}
.woocommerce .cart_totals .order-total td,
.woocommerce .cart_totals .order-total th{font-size:1.15rem}

/* Boton principal del carrito. */
.woocommerce .wc-proceed-to-checkout{padding:var(--s-3) 0 0}
.woocommerce .wc-proceed-to-checkout a.checkout-button{
  display:flex;width:100%;margin:0;min-height:56px;font-size:1.0625rem;
  padding:.9rem 1.4rem;
}

/* Carrito en movil: la tabla responsive de WooCommerce apila cada celda
   con su etiqueta y esconde la miniatura. Se rehace como tarjeta: foto a la
   izquierda, nombre arriba y precio, cantidad y subtotal debajo. */
@media (max-width:768px){
  .woocommerce-cart table.shop_table_responsive.cart thead{display:none}
  .woocommerce-cart table.shop_table_responsive.cart,
  .woocommerce-cart table.shop_table_responsive.cart tbody{display:block}
  .woocommerce-cart table.shop_table_responsive.cart tr.cart_item{
    display:grid;grid-template-columns:72px minmax(0,1fr) 32px;
    column-gap:var(--s-3);align-items:center;
    padding:var(--s-3);border-top:1px solid var(--tt-linea);
  }
  .woocommerce-cart table.shop_table_responsive.cart tr.cart_item:first-child{border-top:0}
  .woocommerce-cart table.shop_table_responsive.cart tr.cart_item td{
    display:flex;justify-content:space-between;align-items:center;gap:var(--s-2);
    grid-column:2/-1;padding:var(--s-1) 0;border:0;background:transparent;
    text-align:right;width:auto;min-width:0;
  }
  .woocommerce-cart table.shop_table_responsive.cart tr.cart_item td::before{
    color:var(--tt-texto-2);font-weight:400;font-size:var(--fs-small);float:none;
  }
  .woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-thumbnail{
    display:block;grid-column:1;grid-row:1/span 4;padding:0;width:auto;min-width:0;
  }
  .woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-thumbnail::before,
  .woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-name::before,
  .woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-remove::before{content:none}
  .woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-thumbnail img{width:72px;height:72px}
  .woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-name{
    grid-column:2;grid-row:1;text-align:left;display:block;
  }
  .woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-remove{
    grid-column:3;grid-row:1;width:auto;justify-self:end;padding:0;display:block;
  }
  .woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-quantity .qty{width:4.5rem}
  .woocommerce-cart table.shop_table_responsive.cart tr:not(.cart_item) td.actions{
    display:block;padding:var(--s-3);border-top:1px solid var(--tt-linea);text-align:left;
  }
}
@media (max-width:520px){
  .woocommerce-cart .woocommerce table.cart td.actions .coupon{float:none;width:100%;flex-direction:column}
  .woocommerce-cart .woocommerce table.cart td.actions .coupon .button,
  .woocommerce-cart .woocommerce table.cart td.actions > .button{width:100%;float:none;margin-top:var(--s-2)}
}

/* ---------- CHECKOUT CLASICO: DISPOSICION ----------
   Datos a la izquierda; "Tu pedido" y el pago a la derecha desde 900 px.
   No se deja pegajosa la columna derecha: con el formulario de tarjeta de
   Mercado Pago desplegado mide mas que la pantalla y el boton de pagar
   quedaria inalcanzable. */
.woocommerce-checkout form.checkout{display:grid;gap:var(--s-4);align-items:start}
@media (min-width:900px){
  .woocommerce-checkout form.checkout{
    grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);
    grid-template-rows:auto 1fr;column-gap:var(--s-6);row-gap:0;
  }
  .woocommerce-checkout form.checkout #customer_details{grid-column:1;grid-row:1/span 2}
  .woocommerce-checkout form.checkout #order_review_heading{grid-column:2;grid-row:1}
  .woocommerce-checkout form.checkout #order_review{grid-column:2;grid-row:2}
}
.woocommerce-checkout h3{margin-top:0}
.woocommerce-checkout #order_review_heading{margin-bottom:var(--s-3)}

/* Avisos de "iniciar sesion" y "cupon" sobre el formulario: una linea de
   texto, no una tarjeta con borde de color que compita con el pedido. */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{
  background:transparent;border:0;padding:0;margin-bottom:var(--s-3);
  color:var(--tt-texto-2);font-size:var(--fs-small);
}
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a{color:var(--tt-azul-claro)}
.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout form.login{
  border:1px solid var(--tt-linea);border-radius:var(--radio);
  padding:var(--s-3);margin:0 0 var(--s-4);
}
.woocommerce-checkout form.checkout_coupon > p:first-child{color:var(--tt-texto-2);font-size:var(--fs-small);margin:0 0 var(--s-2)}
.woocommerce-checkout form.checkout_coupon .form-row{margin:0;padding:0}
.woocommerce-checkout form.checkout_coupon .form-row-first{float:left;width:calc(100% - 11rem)}
.woocommerce-checkout form.checkout_coupon .form-row-last{float:right;width:10rem}
.woocommerce-checkout form.checkout_coupon .form-row-last .button{width:100%;background:transparent;color:var(--tt-texto);border:1px solid var(--tt-linea)}
.woocommerce-checkout form.checkout_coupon .form-row-last .button:hover{background:var(--tt-superficie);border-color:var(--tt-azul-claro)}
@media (max-width:520px){
  .woocommerce-checkout form.checkout_coupon .form-row-first,
  .woocommerce-checkout form.checkout_coupon .form-row-last{float:none;width:100%}
  .woocommerce-checkout form.checkout_coupon .form-row-first{margin-bottom:var(--s-2)}
}

/* ---------- CHECKOUT: CAMPOS ---------- */
.woocommerce-checkout #customer_details.col2-set{display:block}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{float:none;width:100%;max-width:none}
.woocommerce-checkout #customer_details .col-2{margin-top:var(--s-4)}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper{
    grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-3);
  }
}
.woocommerce-checkout form.checkout .form-row{float:none;width:auto;margin:0 0 var(--s-3);padding:0}
.woocommerce-checkout .form-row-wide{grid-column:1/-1}
.woocommerce form .form-row label{
  display:block;margin-bottom:.35rem;font-weight:600;color:var(--tt-texto);
}
/* Casillas (terminos, datos, publicidad): la regla de arriba es para
   etiquetas de campo; en una casilla el texto va al lado y sin negrita. */
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox{
  display:flex;gap:var(--s-2);align-items:flex-start;
  margin-bottom:0;font-weight:400;color:var(--tt-texto-2);line-height:1.5;
}
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox a{color:var(--tt-azul-claro)}
.woocommerce form .form-row .required{color:var(--tt-naranja);text-decoration:none}
/* WooCommerce 11 pinta los campos con fondo blanco desde esta misma
   especificidad (3 clases + elemento); se iguala para que gane el orden. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  width:100%;min-height:44px;
  background-color:var(--tt-superficie);color:var(--tt-texto);
  border:1px solid var(--tt-linea);border-radius:var(--radio-sm);
  padding:.7rem .9rem;
}
.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row textarea:focus-visible,
.woocommerce form .form-row select:focus-visible{outline:2px solid var(--tt-azul-claro);outline-offset:2px}
.woocommerce form .form-row input[type="checkbox"],
.woocommerce form .form-row input[type="radio"]{accent-color:var(--tt-azul-claro);width:1.1rem;height:1.1rem;flex:0 0 auto;margin-top:.2rem}

/* El pais es siempre Colombia: WooCommerce lo pinta como texto suelto mas
   un input oculto. Se esconde la fila solo cuando es ese caso (un unico
   pais vendible); el valor CO sigue viajando en el formulario. Si algun dia
   se vende en mas paises, el campo sale como select y esta regla no aplica. */
.woocommerce-checkout .form-row.address-field:has(> .woocommerce-input-wrapper > strong){display:none}

/* ---------- SELECT2 / SELECTWOO (departamento y ciudad) ----------
   El plugin trae su propia hoja clara. Mismo alto y colores que los inputs. */
.woocommerce .select2-container{width:100%!important}
.select2-container--default .select2-selection--single{
  height:44px;background:var(--tt-superficie);border:1px solid var(--tt-linea);
  border-radius:var(--radio-sm);display:flex;align-items:center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--tt-texto);line-height:1.2;padding:0 2.25rem 0 .9rem;width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--tt-texto-2)}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:42px;right:var(--s-2)}
.select2-container--default .select2-selection--single .select2-selection__arrow b{
  border-color:var(--tt-texto-2) transparent transparent;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
  border-color:transparent transparent var(--tt-texto-2);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single{
  outline:2px solid var(--tt-azul-claro);outline-offset:2px;border-color:var(--tt-azul-claro);
}
.select2-dropdown{
  background:var(--tt-superficie);color:var(--tt-texto);
  border:1px solid var(--tt-azul-claro);border-radius:var(--radio-sm);
  box-shadow:var(--sombra);overflow:hidden;
}
.select2-container--default .select2-search--dropdown{padding:var(--s-2);background:var(--tt-superficie)}
.select2-container--default .select2-search--dropdown .select2-search__field{
  background:var(--tt-negro);color:var(--tt-texto);min-height:40px;
  border:1px solid var(--tt-linea);border-radius:var(--radio-sm);padding:.5rem .75rem;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus-visible{
  outline:2px solid var(--tt-azul-claro);outline-offset:1px;
}
.select2-container--default .select2-results__option{color:var(--tt-texto);padding:.65rem .9rem;background:transparent}
.select2-container--default .select2-results__option[aria-selected="true"]{background:var(--tt-superficie-2);color:var(--tt-texto)}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
  background:var(--tt-azul-btn);color:#fff;
}
.select2-container--default .select2-results__option--disabled{color:var(--tt-texto-2)}
.select2-results__options{max-height:260px}

/* ---------- CHECKOUT: TU PEDIDO Y PAGO ---------- */
.woocommerce-checkout #order_review{padding:var(--s-4);background:var(--tt-carbon);border:1px solid var(--tt-linea);border-radius:var(--radio)}
.woocommerce-checkout #order_review table.shop_table{border:0;border-radius:0;background:transparent;margin:0 0 var(--s-3)}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td{
  background:transparent;border:0;border-top:1px solid var(--tt-linea);padding:var(--s-2) 0;
}
.woocommerce-checkout #order_review table.shop_table thead th{color:var(--tt-texto-2);font-weight:600;font-size:var(--fs-small);border-top:0}
.woocommerce-checkout #order_review table.shop_table td:last-child,
.woocommerce-checkout #order_review table.shop_table th:last-child{text-align:right}
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td{font-size:1.15rem}

/* El bloque de pago ya vive dentro de la tarjeta de #order_review. */
.woocommerce-checkout #payment{background:transparent;border:0;border-radius:0;padding:0}
.woocommerce-checkout #payment ul.payment_methods{
  list-style:none;border:0;padding:0;margin:0 0 var(--s-3);
  display:grid;gap:var(--s-2);
}

/* Cada medio de pago es una tarjeta entera clicable: el input queda
   superpuesto a la izquierda y la etiqueta cubre toda la fila. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method{
  position:relative;margin:0;padding:0;overflow:hidden;
  background:var(--tt-superficie);border:1px solid var(--tt-linea);border-radius:var(--radio-sm);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method + li.wc_payment_method{margin-top:0}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:hover{border-color:var(--tt-texto-2)}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input.input-radio{
  position:absolute;left:var(--s-3);top:1.2rem;margin:0;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label{
  display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;
  margin:0;min-height:56px;padding:var(--s-3) var(--s-3) var(--s-3) 3rem;
  font-weight:600;color:var(--tt-texto);cursor:pointer;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label img{
  margin:0 0 0 auto;max-height:26px;width:auto;
}
/* Seleccionado: borde azul y brillo. Con :has() sube a toda la tarjeta; sin
   el, al menos la fila de la etiqueta cambia de fondo. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input.input-radio:checked + label{
  background:var(--tt-superficie-2);
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(> input.input-radio:checked){
  border-color:var(--tt-azul-claro);box-shadow:var(--brillo-azul);
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(> input.input-radio:focus-visible){
  outline:2px solid var(--tt-azul-claro);outline-offset:2px;
}

/* Cajas de pago: fondo neutro y relleno propio para que los widgets blancos
   de Addi y Sistecredito se lean como una pieza intencional, no como un
   parche pegado. */
.woocommerce-checkout #payment div.payment_box{
  margin:0;padding:var(--s-3);border-radius:0;
  background:var(--tt-carbon);color:var(--tt-texto-2);
  border-top:1px solid var(--tt-linea);font-size:var(--fs-small);line-height:1.5;
  overflow-x:auto;
}
.woocommerce-checkout #payment div.payment_box::before{display:none}
.woocommerce-checkout #payment div.payment_box p{margin:0 0 var(--s-2)}
.woocommerce-checkout #payment div.payment_box > :last-child{margin-bottom:0}
.woocommerce-checkout #payment div.payment_box hr{border:0;border-top:1px solid var(--tt-linea);margin:0 0 var(--s-3)}
.woocommerce-checkout #payment div.payment_box fieldset{border:0;margin:0;padding:0;min-width:0}
.woocommerce-checkout #payment div.payment_box .addi_description_container{
  border-radius:var(--radio-sm);overflow:hidden;
}
.woocommerce-checkout #payment div.payment_box img{max-width:100%;height:auto}

/* Terminos y privacidad. */
.woocommerce-checkout #payment .form-row.place-order{padding:0;margin:var(--s-3) 0 0}
.woocommerce-terms-and-conditions-wrapper{margin-bottom:var(--s-3)}
.woocommerce-privacy-policy-text,
.woocommerce-privacy-policy-text p{
  color:var(--tt-texto-2);font-size:var(--fs-small);font-weight:400;line-height:1.5;
}
.woocommerce-privacy-policy-text{margin:0 0 var(--s-3)}
.woocommerce-privacy-policy-text p{margin:0}
.woocommerce-privacy-policy-text a{color:var(--tt-azul-claro);text-underline-offset:3px}

/* Boton de pedido: el CTA de la pantalla, a todo el ancho. */
.woocommerce-checkout #payment #place_order{
  float:none;display:flex;width:100%;min-height:56px;font-size:1.0625rem;
  padding:.9rem 1.4rem;margin:0;
}

/* ---------- CARRITO Y CHECKOUT EN BLOQUES ----------
   WooCommerce moderno los pinta con bloques y clases .wc-block-*. Sus
   variables de color se redefinen aqui para no pelear regla por regla. */
.wc-block-components-panel,
.wc-block-cart,
.wc-block-checkout{color:var(--tt-texto)}
.wc-block-cart-items__row,
.wc-block-components-order-summary-item{border-color:var(--tt-linea)}
.wc-block-cart table.wc-block-cart-items{background:transparent}
.wc-block-cart-items__header{
  color:var(--tt-texto-2);border-bottom:1px solid var(--tt-linea);
}
.wc-block-components-sidebar-layout .wc-block-components-sidebar{
  background:var(--tt-carbon);border:1px solid var(--tt-linea);
  border-radius:var(--radio);padding:var(--s-4);
}
.wc-block-components-totals-item__value,
.wc-block-components-product-name{color:var(--tt-texto)}
.wc-block-components-product-name{text-decoration:none}
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox input{
  background:var(--tt-superficie)!important;color:var(--tt-texto)!important;
  border:1px solid var(--tt-linea)!important;border-radius:var(--radio-sm)!important;
}
.wc-block-components-text-input label,
.wc-block-components-checkbox__label{color:var(--tt-texto-2)}
.wc-block-components-title,
.wc-block-components-checkout-step__title{
  font-family:var(--tt-font-display);text-transform:uppercase;color:var(--tt-texto);
}
.wc-block-components-button{border-radius:var(--radio-pill)}

/* ---------- AVISOS ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.wc-block-components-notice-banner{
  background:var(--tt-carbon);color:var(--tt-texto);
  border:1px solid var(--tt-linea);border-top:3px solid var(--tt-azul);
  border-radius:var(--radio-sm);padding:var(--s-3) var(--s-4);
  margin-bottom:var(--s-4);display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{content:none}
.woocommerce-message{border-top-color:var(--tt-exito)}
.woocommerce-error{border-top-color:var(--tt-error)}
.woocommerce-message .button,
.woocommerce-info .button{margin-left:auto}

/* ---------- PAGINACION Y MIGAS ---------- */
.woocommerce nav.woocommerce-pagination ul{border:0;display:flex;gap:var(--s-1);justify-content:center;margin-top:var(--s-6)}
.woocommerce nav.woocommerce-pagination ul li{border:0;margin:0}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--tt-carbon);border:1px solid var(--tt-linea);border-radius:var(--radio-sm);
  color:var(--tt-texto);padding:0 .6rem;
}
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--tt-azul-btn);border-color:var(--tt-azul-btn);color:#fff;
}
.woocommerce .woocommerce-breadcrumb{
  color:var(--tt-texto-2);font-size:.88rem;margin-bottom:var(--s-3);
}
.woocommerce .woocommerce-breadcrumb a{color:var(--tt-azul-claro)}

/* ---------- SIN RESULTADOS ---------- */
.woocommerce-no-products-found .woocommerce-info{border-top-color:var(--tt-naranja)}