/* =========================================================
   GUERRA GOLADA — Ajustes de WooCommerce
   Archivo NUEVO (no toca css/style.css de la maqueta): traduce las
   clases por defecto de WooCommerce (que no se pueden renombrar sin
   sobrescribir plantillas) a los tokens/estilos de marca ya definidos
   en css/style.css (--gg-*, .btn-gg-*, .badge, etc.).
   ========================================================= */

/* ---------- Panel de filtros: fijo al hacer scroll (solo escritorio) ----------
   En móvil sigue siendo el desplegable colapsable de siempre (no tendría
   sentido "engancharlo" ahí). 90px deja hueco para la cabecera sticky
   (~74px reales) + un margen de aire. */
@media (min-width:992px){
  #gg-filtros-panel{
    position:sticky;
    top:90px;
    max-height:calc(100vh - 106px);
    overflow-y:auto;
  }
}

/* ---------- Iconos de cuenta/carrito/búsqueda en la cabecera ----------
   También se usa en <button> (el toggle de la lupa), de ahí el reset de
   borde/fondo: por defecto <a> ya no los tiene, así que no afecta a esos. */
.gg-nav-icon-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;height:38px;
  border-radius:50%;
  border:0;
  background:transparent;
  padding:0;
  color:var(--gg-verde-950);
}
.gg-nav-icon-link:hover,.gg-nav-icon-link:focus-visible{
  background:var(--gg-verde-100);
  color:var(--gg-verde-800);
}
.gg-cart-count{
  position:absolute;
  top:-2px;right:-2px;
  min-width:17px;height:17px;
  padding:0 3px;
  border-radius:50%;
  background:var(--gg-ambar-500);
  color:var(--gg-verde-950);
  font-size:.65rem;
  font-weight:700;
  line-height:17px;
  text-align:center;
}

/* ---------- Migas de pan de WooCommerce (woocommerce_breadcrumb()) ----------
   No es un <ol class="breadcrumb"> de Bootstrap como en el resto del tema,
   sino texto plano separado por " / ": sin este bloque hereda el tamaño y
   color de enlace por defecto del navegador, muy distinto al resto de
   migas de pan del sitio (gg_breadcrumb() en inc/template-tags.php). */
/* Selector con la misma especificidad que ".woocommerce .woocommerce-breadcrumb"
   del propio WooCommerce (le fija margin:0 0 1em): si no, ese margen
   inferior de ~1em gana por especificidad y descuadra la franja hacia
   abajo (más aire debajo del texto que encima). */
.woocommerce .woocommerce-breadcrumb{
  display:block;
  margin:0;
  padding:0;
  font-size:.875rem;
  line-height:1.5;
  color:var(--gg-texto-muted);
}
.woocommerce-breadcrumb a{color:var(--gg-texto-muted);}
.woocommerce-breadcrumb a:hover{color:var(--gg-verde-800);}

/* ---------- Categoría/etiqueta al pie de la ficha de producto ----------
   Salida por defecto de woocommerce_template_single_meta() (product_meta):
   sin estas reglas se ve como texto suelto, sin relación visual con el
   resto de la ficha (specs, badges, precio). */
.woocommerce div.product .product_meta{
  margin-top:2rem;
  padding-top:1rem;
  border-top:1px solid var(--gg-borde);
  font-size:.875rem;
  color:var(--gg-texto-muted);
}
.woocommerce div.product .product_meta > span{
  display:block;
  margin-bottom:.35rem;
}
.woocommerce div.product .product_meta a{color:var(--gg-texto);}
.woocommerce div.product .product_meta a:hover{color:var(--gg-verde-800);}

/* ---------- Precio "Consultar precio / tarifa" ---------- */
.gg-price-consultar{
  font-family:var(--gg-font-heading);
  font-size:1rem;
  color:var(--gg-texto-muted);
}

/* ---------- Etiqueta de oferta sobre la imagen (tarjeta) ---------- */
.gg-img-tag--oferta{
  background:var(--gg-ambar-600);
}

/* ---------- Badge "onsale" por defecto de WooCommerce (ficha de producto) ---------- */
.onsale{
  position:absolute;
  top:.6rem;
  left:.6rem;
  background:var(--gg-ambar-600);
  color:#fff;
  font-size:.7rem;
  font-family:var(--gg-font-heading);
  letter-spacing:.02em;
  padding:.2rem .55rem;
  border-radius:.25rem;
  min-height:0;min-width:0;line-height:1.4;
}

/* ---------- Botones genéricos de WooCommerce (carrito, checkout, mi cuenta) ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
  font-family:var(--gg-font-heading);
  font-weight:500;
  letter-spacing:.02em;
  padding:.65rem 1.4rem;
  border-radius:.3rem;
  border:2px solid var(--gg-verde-800);
  background:var(--gg-verde-800);
  color:#fff;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
  background:var(--gg-verde-950);
  border-color:var(--gg-verde-950);
  color:#fff;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #payment #place_order{
  background:var(--gg-ambar-500);
  border-color:var(--gg-ambar-500);
  color:var(--gg-verde-950);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #payment #place_order:hover{
  background:var(--gg-ambar-600);
  border-color:var(--gg-ambar-600);
}
.woocommerce a.button.loading,
.woocommerce button.button.loading{opacity:.6;}

/* ---------- Formularios (checkout, mi cuenta, login/registro) ---------- */
.woocommerce form .form-row{margin-bottom:1rem;}
.woocommerce form .form-control,
.woocommerce form .form-select{
  border-color:var(--gg-borde);
}
.woocommerce form .form-control:focus,
.woocommerce form .form-select:focus{
  border-color:var(--gg-verde-600);
  box-shadow:0 0 0 .2rem rgba(24,79,40,.15);
}
.woocommerce table.shop_table{
  border-color:var(--gg-borde);
  border-radius:.35rem;
  overflow:hidden;
}
.woocommerce table.shop_table th{
  font-family:var(--gg-font-heading);
  color:var(--gg-verde-950);
  background:var(--gg-verde-100);
}
.woocommerce table.shop_table td,
.woocommerce table.shop_table th{border-color:var(--gg-borde);}

/* ---------- Mi cuenta: navegación lateral con look de .gg-filtros ---------- */
.woocommerce-MyAccount-navigation{
  background:var(--gg-superficie);
  border:1px solid var(--gg-borde);
  border-radius:.4rem;
  padding:1.25rem;
  margin-bottom:1.5rem;
}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;}
.woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--gg-borde);}
.woocommerce-MyAccount-navigation li:last-child{border-bottom:none;}
.woocommerce-MyAccount-navigation li a{
  display:block;
  padding:.6rem 0;
  font-family:var(--gg-font-heading);
  color:var(--gg-texto);
}
.woocommerce-MyAccount-navigation li.is-active a{color:var(--gg-verde-800);font-weight:600;}

/* ---------- Notificaciones (añadido al carrito, errores, avisos) ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments{
  background:var(--gg-verde-100);
  border-top-color:var(--gg-verde-700);
  border-radius:.35rem;
  color:var(--gg-texto);
}
.woocommerce-error{background:#fbeaea;border-top-color:#b23b3b;}

/* ---------- Galería de la ficha de producto (miniaturas tipo .gg-thumb) ---------- */
.woocommerce div.product div.images .flex-control-thumbs{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem;padding:0;list-style:none;
}
.woocommerce div.product div.images .flex-control-thumbs li{width:auto;}
.woocommerce div.product div.images .flex-control-thumbs img{
  width:76px;height:57px;object-fit:cover;border-radius:.3rem;
  border:2px solid transparent;opacity:1;cursor:pointer;
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active{
  border-color:var(--gg-ambar-600);
}

/* ---------- Precio y cantidad en la ficha de producto ---------- */
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family:var(--gg-font-heading);
  color:var(--gg-verde-800);
  font-size:1.5rem;
}
.woocommerce .quantity .qty{
  border:1px solid var(--gg-borde);
  border-radius:.3rem;
  padding:.5rem .6rem;
  width:4.5rem;
}

/* ---------- Tabla de especificaciones (atributos) con look .gg-specs ----------
   WooCommerce pone los valores en cursiva y usa bordes de puntos por
   defecto (woocommerce.css del plugin); se sustituye por el mismo look
   que la tabla de specs de la ficha "Información adicional". */
.woocommerce table.shop_attributes{
  border:1px solid var(--gg-borde);
  border-radius:.35rem;
  overflow:hidden;
}
.woocommerce table.shop_attributes th{
  width:40%;
  font-family:var(--gg-font-heading);
  font-weight:500;
  color:var(--gg-verde-950);
  background:var(--gg-verde-100);
  border-color:var(--gg-borde);
}
.woocommerce table.shop_attributes td{
  font-style:normal;
  border-color:var(--gg-borde);
}
.woocommerce table.shop_attributes td p{padding:.6rem .8rem;}
.woocommerce table.shop_attributes th{padding:.6rem .8rem;}

/* ---------- Ficha de producto: pestañas (Descripción/Información
   adicional/Valoraciones) y sección de valoraciones ----------
   Antes sin ningún estilo propio (por defecto de WooCommerce/WordPress):
   pestañas sin remarcar cuál está activa, estrellas y formulario de
   valoración con el aspecto de fábrica. El cambio de pestaña en sí lo
   sigue gestionando el JS de WooCommerce (wc-single-product), aquí solo
   se da estilo. */
.woocommerce-tabs.wc-tabs-wrapper{margin-top:2rem;}
.woocommerce-tabs ul.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:.25rem 1.5rem;
  list-style:none;
  margin:0 0 1.75rem;
  padding:0;
  border-bottom:1px solid var(--gg-borde);
}
.woocommerce-tabs ul.tabs li{margin:0;padding:0;}
.woocommerce-tabs ul.tabs li a{
  display:inline-block;
  padding:.75rem .25rem;
  font-family:var(--gg-font-heading);
  font-weight:500;
  color:var(--gg-texto-muted);
  border-bottom:3px solid transparent;
  margin-bottom:-1px;
}
.woocommerce-tabs ul.tabs li a:hover{color:var(--gg-verde-800);}
.woocommerce-tabs ul.tabs li.active a{
  color:var(--gg-verde-800);
  border-bottom-color:var(--gg-ambar-600);
}
.woocommerce-tabs .woocommerce-Tabs-panel > h2{
  font-size:1.3rem;
  margin-bottom:1rem;
}

.star-rating{color:var(--gg-ambar-500);}

#reviews .woocommerce-Reviews-title{font-size:1.3rem;margin-bottom:1.25rem;}
#reviews ol.commentlist{list-style:none;margin:0 0 2rem;padding:0;}
#reviews .comment_container{
  display:flex;
  gap:1rem;
  padding:1.25rem 0;
  border-bottom:1px solid var(--gg-borde);
}
#reviews .comment_container img.avatar{border-radius:50%;flex:0 0 auto;}
#reviews .comment-text .star-rating{margin-bottom:.35rem;}
#reviews .woocommerce-review__author{font-family:var(--gg-font-heading);color:var(--gg-verde-950);}
#reviews .woocommerce-review__dash,
#reviews .woocommerce-review__published-date{color:var(--gg-texto-muted);font-size:.85rem;}
#reviews .description p:last-child{margin-bottom:0;}
#reviews .woocommerce-noreviews{color:var(--gg-texto-muted);}

#review_form_wrapper{
  margin-top:1rem;
  padding:1.5rem;
  background:var(--gg-verde-100);
  border-radius:.4rem;
}
#review_form #reply-title{
  display:block;
  font-family:var(--gg-font-heading);
  font-size:1.1rem;
  color:var(--gg-verde-950);
  margin-bottom:1rem;
}
#review_form p{margin-bottom:1rem;}
#review_form label{
  display:block;
  font-family:var(--gg-font-heading);
  margin-bottom:.35rem;
}
#review_form select#rating,
#review_form input[type="text"],
#review_form input[type="email"],
#review_form textarea{
  width:100%;
  border:1px solid var(--gg-borde);
  border-radius:.3rem;
  padding:.55rem .75rem;
  font-family:var(--gg-font-body);
  background:var(--gg-superficie);
}
#review_form select#rating:focus,
#review_form input:focus,
#review_form textarea:focus{
  outline:none;
  border-color:var(--gg-verde-600);
  box-shadow:0 0 0 .2rem rgba(24,79,40,.15);
}
/* button[type="submit"] (no solo input[type="submit"]): gg_review_submit_button_icon()
   en inc/woocommerce.php cambia el <input> de comment_form() por un
   <button> para poder meterle el icono delante del texto. */
#review_form .form-submit input[type="submit"],
#review_form .form-submit button[type="submit"]{
  font-family:var(--gg-font-heading);
  font-weight:500;
  letter-spacing:.02em;
  padding:.65rem 1.4rem;
  border-radius:.3rem;
  border:2px solid var(--gg-verde-800);
  background:var(--gg-verde-800);
  color:#fff;
  cursor:pointer;
}
#review_form .form-submit input[type="submit"]:hover,
#review_form .form-submit button[type="submit"]:hover{background:var(--gg-verde-950);border-color:var(--gg-verde-950);}

/* ---------- Botón "Filtrar resultados" (solo en móvil) ----------
   En pantallas pequeñas el panel de filtros completo ocupaba mucho
   espacio antes de llegar a los resultados; se oculta detrás de un botón
   desplegable (queda siempre visible en pantallas grandes, ver
   archive-product.php: .collapse.d-lg-block). */
.gg-filtros-toggle-icon{transition:transform .2s ease;}
.gg-filtros-toggle[aria-expanded="true"] .gg-filtros-toggle-icon{transform:rotate(180deg);}

/* ---------- Filtros de la tienda (widgets en la barra lateral) ----------
   Traduce el marcado por defecto de los widgets de WooCommerce (listas de
   <a> planas, sin ningún estilo) al look de fila-con-hover del resto del
   tema, y destaca la categoría/filtro activo (.current-cat, que WordPress
   ya añade solo, pero sin ningún CSS no se distinguía del resto).
   Los widgets van DENTRO de .gg-filtros (archive-product.php), que ya
   pone el único fondo/borde de toda la tarjeta — igual que hacía
   .gg-filtros con los <fieldset> en la maqueta original (ver style.css).
   Cada widget NO lleva su propia caja: solo un separador entre secciones,
   para no acabar con una caja dentro de otra. */
.gg-filtros-widget + .gg-filtros-widget{
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid var(--gg-borde);
}
.gg-filtros-widget-title{
  font-family:var(--gg-font-heading);
  font-size:.95rem;
  color:var(--gg-verde-950);
  margin-bottom:.5rem;
}
.gg-filtros-widget ul{list-style:none;padding:0;margin:0 -.5rem;}
/* El fondo/borde de la fila va en el <li> (no en el <a>): así cubre
   también el contador ".count" y el icono de "quitar filtro" que
   WooCommerce añade como hermanos del enlace, no dentro de él — antes se
   veían "fuera" de la píldora de color. Un único borde izquierdo marca el
   estado activo; nada más lleva borde propio, para no leerse como una
   caja dentro de otra caja. */
.gg-filtros-widget li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  padding:.45rem .5rem;
  border-radius:.3rem;
  border-left:3px solid transparent;
}
.gg-filtros-widget li:hover{background:var(--gg-verde-100);}
.gg-filtros-widget a{
  flex:1;
  min-width:0;
  color:var(--gg-texto);
}
.gg-filtros-widget .count{
  color:var(--gg-texto-muted);
  font-size:.8rem;
  flex:0 0 auto;
}
/* Categoría/filtro actualmente seleccionado */
.gg-filtros-widget li.current-cat,
.gg-filtros-widget li.chosen{
  background:var(--gg-verde-100);
  border-left-color:var(--gg-ambar-600);
}
.gg-filtros-widget li.current-cat > a,
.gg-filtros-widget li.chosen > a{
  color:var(--gg-verde-800);
  font-weight:600;
}
/* Icono "quitar filtro" (WooCommerce lo añade como ::before del propio
   enlace): se le da aire respecto al texto y al borde de la fila. */
.gg-filtros-widget li.chosen > a{
  display:flex;
  align-items:center;
}
.gg-filtros-widget li.chosen > a::before{margin-right:.5rem !important;}

/* Buscador de producto del widget (por defecto, controles sin estilo del navegador) */
.gg-filtros-widget .woocommerce-product-search{display:flex;gap:.5rem;}
.gg-filtros-widget .woocommerce-product-search .search-field{
  flex:1;
  min-width:0;
  border:1px solid var(--gg-borde);
  border-radius:.3rem;
  padding:.5rem .7rem;
  font-family:var(--gg-font-body);
  color:var(--gg-texto);
}
.gg-filtros-widget .woocommerce-product-search .search-field:focus{
  outline:none;
  border-color:var(--gg-verde-600);
  box-shadow:0 0 0 .2rem rgba(24,79,40,.15);
}
.gg-filtros-widget .woocommerce-product-search button[type="submit"]{
  font-family:var(--gg-font-heading);
  font-weight:500;
  letter-spacing:.02em;
  padding:.5rem .75rem;
  border-radius:.3rem;
  border:2px solid var(--gg-verde-800);
  background:var(--gg-verde-800);
  color:#fff;
  cursor:pointer;
}
/* Solo la lupa en el panel de filtros (a diferencia de la cabecera y el
   hero, que sí llevan el texto "Buscar"): oculto visualmente el texto
   en vez de quitarlo del todo, para que lectores de pantalla lo sigan
   anunciando. */
.gg-filtros-widget .woocommerce-product-search .gg-buscar-texto{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.gg-filtros-widget .woocommerce-product-search button[type="submit"]:hover{
  background:var(--gg-verde-950);
  border-color:var(--gg-verde-950);
}

/* Nube de etiquetas (widget_product_tag_cloud): mismo radio pequeño que
   el resto de insignias del sitio (.badge, .gg-img-tag…), no una píldora
   totalmente redondeada que no encaja con esa estética. WordPress fija
   el tamaño de letra en línea según la popularidad de la etiqueta
   (8-22pt): se anula con !important para que todas midan lo mismo. */
.gg-filtros-widget .tagcloud{display:flex;flex-wrap:wrap;gap:.5rem;}
.gg-filtros-widget .tagcloud a{
  font-size:.8rem !important;
  display:inline-block;
  padding:.3rem .7rem;
  border-radius:.3rem;
  background:var(--gg-verde-100);
  color:var(--gg-verde-800);
}
.gg-filtros-widget .tagcloud a:hover{
  background:var(--gg-verde-800);
  color:#fff;
}

/* ---------- Barra de herramientas del catálogo (contador + orden) ----------
   Antes eran un texto y un <select> sueltos directamente sobre el fondo
   de la página, sin ninguna relación visual con las tarjetas del resto
   del sitio; ahora es una barra con su propio fondo/borde, apilada en
   columna en móvil (ver archive-product.php: flex-column flex-sm-row). */
.gg-shop-toolbar{
  background:var(--gg-superficie);
  border:1px solid var(--gg-borde);
  border-radius:.4rem;
  padding:.65rem .9rem;
}
.gg-shop-toolbar .woocommerce-result-count{
  color:var(--gg-texto-muted);
  font-size:.9rem;
  margin:0;
}
.gg-shop-toolbar .woocommerce-ordering{margin:0;}
.gg-shop-toolbar .woocommerce-ordering select{
  width:100%;
  border:1px solid var(--gg-borde);
  border-radius:.3rem;
  padding:.45rem .7rem;
  font-size:.9rem;
  font-family:var(--gg-font-body);
  background-color:var(--gg-fondo);
  color:var(--gg-texto);
}
.gg-shop-toolbar .woocommerce-ordering select:focus{
  outline:none;
  border-color:var(--gg-verde-600);
  box-shadow:0 0 0 .2rem rgba(24,79,40,.15);
}
@media (min-width:576px){
  .gg-shop-toolbar .woocommerce-ordering select{width:auto;}
}

/* ---------- Paginación del catálogo ----------
   WooCommerce apenas aplica estilo propio a <ul class="page-numbers">
   (solo display:inline-block en los <li>): sin este bloque se ve como
   números sueltos sin relación visual con el resto del catálogo. */
.woocommerce nav.woocommerce-pagination{
  display:flex;
  justify-content:center;
  margin-top:2rem;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  border:none;
  list-style:none;
  padding:0;
  margin:0;
}
.woocommerce nav.woocommerce-pagination ul li{border:none;}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:2.4rem;
  height:2.4rem;
  padding:0 .5rem;
  border:1px solid var(--gg-borde);
  border-radius:.3rem;
  color:var(--gg-texto);
  font-family:var(--gg-font-heading);
  background:var(--gg-superficie);
}
.woocommerce nav.woocommerce-pagination ul li a:hover{
  border-color:var(--gg-verde-600);
  color:var(--gg-verde-800);
}
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--gg-verde-800);
  border-color:var(--gg-verde-800);
  color:#fff;
}

/* ---------- Carrito vacío (woocommerce/cart/cart-empty.php) ---------- */
.gg-carrito-vacio{
  max-width:560px;
  margin:1rem auto 0;
  padding:1rem 0 2.5rem;
}
.gg-carrito-vacio-icono{
  width:96px;
  height:96px;
  padding:26px;
  border-radius:50%;
  background:var(--gg-verde-100);
  color:var(--gg-verde-800);
  margin-bottom:1.25rem;
}
.gg-carrito-vacio .gg-lead{max-width:44ch;margin-left:auto;margin-right:auto;}
.gg-carrito-sugeridos{
  margin-top:1rem;
  padding-top:2.5rem;
  border-top:1px solid var(--gg-borde);
}
.gg-carrito-sugeridos .gg-eyebrow{justify-content:center;}

/* ---------- Relacionados (ficha de producto) ----------
   Divisor sutil en vez de un fondo de color: esta sección vive dentro
   del mismo .container que el resto de la ficha (no tiene uno propio,
   ver woocommerce/single-product/related.php), así que un fondo de
   color aquí se quedaba como una caja que no llegaba a los bordes
   reales de la página. */
.gg-relacionados{border-top:1px solid var(--gg-borde);}

/* ---------- Carrito con productos: tabla como lista de tarjetas ----------
   La tabla clásica de WooCommerce (fila estrecha, sin aire, cabecera de
   columnas poco útil en un carrito de 1-3 líneas) se sustituye por un
   listado con más aire, miniatura más grande y el peso visual en el
   nombre/subtotal — la cabecera de columnas se oculta porque con este
   formato de fila ya se entiende qué es cada dato sin necesidad de ella. */
.woocommerce-cart-form{
  background:var(--gg-superficie);
  border:1px solid var(--gg-borde);
  border-radius:.5rem;
  overflow:hidden;
}
.woocommerce-cart-form table.cart{border:none;margin:0;}
.woocommerce-cart-form table.cart thead{display:none;}
.woocommerce-cart-form table.cart tr.woocommerce-cart-form__cart-item{border-bottom:1px solid var(--gg-borde);}
.woocommerce-cart-form table.cart td{border:none;vertical-align:middle;padding:1.1rem .75rem;}
.woocommerce-cart-form table.cart td.product-remove{width:2.5rem;padding-right:0;text-align:center;}
.woocommerce-cart-form table.cart td.product-remove a.remove{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:50%;
  color:var(--gg-texto-muted);
  font-size:1.3rem;
  line-height:1;
  transition:background-color .15s ease,color .15s ease;
}
.woocommerce-cart-form table.cart td.product-remove a.remove:hover{background:#fbeaea;color:#b23b3b;}
.woocommerce-cart-form table.cart td.product-thumbnail{width:84px;}
.woocommerce-cart-form table.cart td.product-thumbnail img{
  width:76px;
  height:76px;
  object-fit:cover;
  border-radius:.4rem;
  border:1px solid var(--gg-borde);
}
.woocommerce-cart-form table.cart td.product-name{font-family:var(--gg-font-heading);font-weight:500;color:var(--gg-verde-950);}
.woocommerce-cart-form table.cart td.product-name a{color:inherit;}
.woocommerce-cart-form table.cart td.product-price{color:var(--gg-texto-muted);font-size:.92rem;}
.woocommerce-cart-form table.cart td.product-subtotal{
  font-family:var(--gg-font-heading);
  font-weight:600;
  color:var(--gg-verde-950);
  white-space:nowrap;
}
/* display:flex directamente en el <td> rompe su colspan (el navegador
   deja de tratarlo como celda de tabla real y genera una celda anónima
   de una sola columna, sin importar el colspan="6" del HTML) — con el
   cupón desactivado (ver woocommerce_enable_coupons en
   docker/seed-demo-content.php) esta celda ya solo tiene el botón
   "Actualizar carrito", así que basta con dejarla como celda normal en
   vez de forzar flex. Si en el futuro se reactivan los cupones, el
   propio flujo de bloque los apila uno encima del otro, que sigue
   siendo razonable. */
.woocommerce-cart-form table.cart td.actions{
  background:var(--gg-fondo);
  border-top:1px solid var(--gg-borde);
  padding:1.1rem .75rem;
}
.woocommerce-cart-form table.cart .coupon{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;}
.woocommerce-cart-form table.cart .coupon .input-text{
  border:1px solid var(--gg-borde);
  border-radius:.3rem;
  padding:.55rem .8rem;
  min-width:170px;
}
.woocommerce-cart-form table.cart .coupon .input-text:focus{
  outline:none;
  border-color:var(--gg-verde-600);
  box-shadow:0 0 0 .2rem rgba(24,79,40,.15);
}
@media (max-width:767.98px){
  .woocommerce-cart-form table.cart td.product-thumbnail{display:block !important;text-align:left !important;padding-bottom:0;}
  .woocommerce-cart-form table.cart td.product-thumbnail::before{display:none;}
}

/* ---------- Carrito: tabla + totales en dos columnas en escritorio ----------
   Por defecto WooCommerce apila todo a un único ancho de columna (tabla,
   y debajo "Totales del carrito"): con más de 1-2 líneas eso deja los
   totales muy lejos del botón para continuar. .woocommerce-cart-form y
   .cart-collaterals son hermanos directos dentro de .woocommerce, pero
   NO los únicos: el aviso "se ha añadido a tu carrito" (u otros avisos)
   también son hermanos y se cuelan en el orden — por eso cada uno se
   coloca por selector explícito en vez de fiarse del auto-placement de
   la rejilla por orden de aparición. */
@media (min-width:992px){
  /* :has() para que la rejilla solo se aplique cuando el carrito tiene
     productos (existe .woocommerce-cart-form): con el carrito vacío ese
     hijo no existe y sin esta condición el mensaje + "quizás te
     interese" (los únicos hijos de .woocommerce en ese caso) se metían
     igualmente en las 2 columnas de esta rejilla, uno junto al otro. */
  body.woocommerce-cart .woocommerce:has(> .woocommerce-cart-form){
    display:grid;
    grid-template-columns:1fr 360px;
    gap:0 2rem;
    align-items:start;
  }
  body.woocommerce-cart .woocommerce > .woocommerce-message,
  body.woocommerce-cart .woocommerce > .woocommerce-info,
  body.woocommerce-cart .woocommerce > .woocommerce-error{
    grid-column:1 / -1;
  }
  body.woocommerce-cart .woocommerce > .woocommerce-cart-form{grid-column:1;}
  body.woocommerce-cart .woocommerce > .cart-collaterals{grid-column:2;}
}

/* ---------- Totales del carrito: tarjeta elevada, fija al hacer scroll en escritorio ----------
   WooCommerce trae su propio CSS clásico para este bloque (float:right;
   width:48%, pensado para su maquetación de 1 columna): con la rejilla
   de arriba sobra y descuadra la tarjeta, así que se anula aquí. */
.cart-collaterals{margin-top:2rem;}
@media (min-width:992px){
  .cart-collaterals{margin-top:0;}
  .cart-collaterals .cart_totals{float:none;width:100%;}
}
.cart_totals{
  background:var(--gg-superficie);
  border:1px solid var(--gg-borde);
  border-radius:.5rem;
  padding:1.5rem;
  box-shadow:0 10px 24px -16px rgba(15,46,24,.25);
}
.cart_totals h2{
  font-size:1.15rem;
  margin-bottom:1rem;
  padding-bottom:.75rem;
  border-bottom:1px solid var(--gg-borde);
}
.cart_totals table.shop_table{border:none;width:100%;}
.cart_totals table.shop_table tr{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  border-bottom:1px solid var(--gg-borde);
}
.cart_totals table.shop_table th,
.cart_totals table.shop_table td{background:transparent;border:none;padding:.6rem 0;}
.cart_totals table.shop_table td{text-align:right;}
.cart_totals tr.order-total th,
.cart_totals tr.order-total td{
  font-family:var(--gg-font-heading);
  font-size:1.15rem;
  font-weight:700;
  color:var(--gg-verde-950);
  border-top:2px solid var(--gg-verde-800);
  border-bottom:none;
  padding-top:1rem;
}
.wc-proceed-to-checkout{margin-top:1.25rem;}
.wc-proceed-to-checkout .checkout-button{
  display:block;
  width:100%;
  text-align:center;
  padding:.85rem 1.1rem;
  font-size:1.05rem;
}
@media (min-width:992px){
  .cart_totals{position:sticky;top:104px;}
}