/**
 * Puente entre el marcado de WooCommerce y el diseño.
 *
 * La regla que se sigue aquí: cuando WooCommerce ya emite un elemento con la estructura
 * que hace falta, se le da el aspecto del diseño desde su propia clase en vez de sustituir
 * la plantilla. Cada plantilla que no se copia es una que no habrá que revisar en la
 * próxima actualización de WooCommerce.
 */

/* ============================================================
   Catálogo
   ============================================================ */

.woocommerce ul.products,
ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.products::before,
ul.products::after {
  content: none;
}

ul.products li.product {
  width: auto;
  margin: 0;
  float: none;
  clear: none;
}

/* La tarjeta ya la pinta content-product.php con las clases del diseño; aquí solo se
   neutraliza lo que WooCommerce añade por su cuenta. */
.product .woocommerce-loop-product__title,
.product .price,
.product .star-rating {
  display: none;
}

.product .product__name,
.product .product__price {
  display: block;
}

.product__name a {
  color: inherit;
}

.product__name a:hover {
  color: var(--brand);
}

/* El botón «+» es el enlace de añadir al carrito de WooCommerce, reestilizado. */
.product__add {
  position: absolute;
  right: var(--space-sm);
  top: var(--space-sm);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: var(--paper);
  box-shadow: var(--shadow-1);
  font-size: 0;
  line-height: 0;
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), background 160ms var(--ease-out);
}

.product:hover .product__add,
.product:focus-within .product__add {
  opacity: 1;
  transform: none;
}

.product__add::before {
  content: "+";
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
}

.product__add:hover {
  background: var(--ink);
  color: var(--paper);
}

.product__add.loading::before {
  content: "…";
}

.product__add.added::before {
  content: "✓";
}

/* WooCommerce añade un enlace «Ver carrito» tras el añadido por AJAX; el panel lateral ya
   cumple esa función, así que sobra. */
.product .added_to_cart {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .product__add {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Barra de orden ---------------------------------------------------------- */

.shop-toolbar .woocommerce-result-count {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.shop-toolbar .woocommerce-ordering {
  margin: 0 0 0 auto;
}

.shop-toolbar .woocommerce-ordering select {
  height: 40px;
  padding-inline: var(--space-sm);
  border: 1px solid var(--rule);
  border-radius: var(--r-full);
  background: var(--paper);
  font: inherit;
  font-size: var(--text-sm);
}

.shop-layout--full {
  grid-template-columns: minmax(0, 1fr);
}

/* Paginación -------------------------------------------------------------- */

.woocommerce-pagination ul,
.navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  justify-content: center;
  margin: var(--space-2xl) 0 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.woocommerce-pagination ul li {
  border: 0;
}

.woocommerce-pagination a,
.woocommerce-pagination span,
.navigation.pagination a,
.navigation.pagination span {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: var(--space-xs);
  border: 1px solid var(--rule);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.woocommerce-pagination .current,
.navigation.pagination .current {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* ============================================================
   Ficha de producto
   ============================================================ */

.pdp .woocommerce-product-gallery {
  width: 100% !important;
  float: none;
  margin: 0;
}

.pdp .woocommerce-product-gallery__wrapper {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-2);
}

.pdp .woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.pdp .flex-control-thumbs {
  /* Flexbox, no grid de 4 columnas fijas: con menos de 4 fotos, un grid a `1fr` estira
     cada miniatura a una porción del ancho completo y dejaba mucho aire entre ellas.
     Con tamaño fijo por miniatura se quedan pegadas a la izquierda, del mismo tamaño
     tenga la ficha 2 fotos o 6. */
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  /* !important: mismo motivo que el `li` de abajo — woocommerce.css trae
     `.woocommerce div.product div.images .flex-control-thumbs { margin: 0 }` con más
     especificidad (4 clases) que este selector (2), y sin forzarlo ganaba siempre él,
     dejando la fila de miniaturas pegada a la foto de portada sin ningún hueco. */
  margin: var(--space-md) 0 0 !important;
  padding: 0;
  list-style: none;
}

.pdp .flex-control-thumbs li {
  margin: 0;
  /* !important porque el propio woocommerce.css trae
     `.woocommerce div.product div.images .flex-control-thumbs li { width: 25% }` con más
     especificidad (4 clases) que este selector (2): sin forzarlo, ese 25% siempre gana,
     venga cargada la hoja del tema antes o después. */
  width: 72px !important;
  height: 72px;
  flex: 0 0 auto;
  float: none;
}

.pdp .flex-control-thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  /* El flexslider de WooCommerce fija `width`/`height` como atributos HTML al tamaño
     natural de la imagen cuando termina de cargar; sin esto el <img> vuelve a su tamaño
     real (miles de píxeles) en vez de quedarse en el de su miniatura. */
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule-2);
  opacity: 0.72;
  transition: opacity 140ms var(--ease-out), border-color 140ms var(--ease-out);
}

.pdp .flex-control-thumbs img.flex-active,
.pdp .flex-control-thumbs img:hover {
  opacity: 1;
  border-color: var(--ink);
}

.pdp__info .product_title {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-display-s);
}

.pdp__info .price {
  display: block;
  margin: var(--space-sm) 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--ink);
}

.pdp__info .price del {
  margin-right: var(--space-xs);
  font-size: var(--text-md);
  color: var(--muted);
}

.pdp__info .price ins {
  text-decoration: none;
}

.pdp__info .woocommerce-product-details__short-description {
  color: var(--ink-2);
}

/* Formulario de compra ----------------------------------------------------- */

.pdp__info form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin-block: var(--space-lg);
}

.pdp__info form.cart .quantity {
  margin: 0;
}

.pdp__info form.cart button[type="submit"] {
  flex: 1 1 9rem;
  min-height: 48px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms var(--ease-out), color 140ms var(--ease-out);
}

.pdp__info form.cart button[type="submit"]:hover {
  background: var(--brand);
}

.pdp__info form.cart button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* «Comprar ahora» es la acción secundaria: mismo tamaño, jerarquía distinta. Si los dos
   botones se ven idénticos, ninguno es el principal. */
.pdp__info form.cart button.colido-comprar-ahora {
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.pdp__info form.cart button.colido-comprar-ahora:hover {
  background: var(--paper-2);
  color: var(--ink);
}

/* Variaciones -------------------------------------------------------------- */

.pdp__info .variations {
  width: 100%;
  margin-bottom: var(--space-md);
  border: 0;
}

.pdp__info .variations th,
.pdp__info .variations td {
  display: block;
  padding: 0;
  border: 0;
  text-align: left;
}

.pdp__info .variations th.label {
  margin-bottom: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* El desplegable solo se estiliza cuando de verdad se ve. Los plugins de swatches dejan
   el <select> en el DOM —lo necesita el formulario— pero oculto tras una clase; darle
   estilo aquí sin excluirlo lo devolvía a la vista, y el color acababa eligiéndose dos
   veces: una en las muestras y otra en una lista larguísima debajo. */
.pdp__info .variations select:not(.kwv-visually-hidden-select):not([class*="visually-hidden"]) {
  width: 100%;
  min-height: 48px;
  padding-inline: var(--space-sm);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper);
  font: inherit;
}

.pdp__info .reset_variations {
  display: inline-block;
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--muted);
}

.pdp__info .woocommerce-variation-price .price {
  margin-top: 0;
}

/* Swatches del plugin de variaciones: se les da el tamaño del diseño sin tocar su
   marcado, para que el plugin siga siendo el dueño de cómo se pintan. */
.pdp__info .kwv-swatches,
.filters .kwv-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.pdp__info .kwv-swatch-color,
.filters .kwv-swatch-color,
.kwff-option__swatch .kwv-swatch-color {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* ============================================================
   Filtros plegables
   ============================================================
   El botón lo inserta theme.js dentro del <h3> que ya pinta el plugin. Sin JS el título
   sigue siendo un título y la lista se ve entera: se pierde el plegado, no los filtros. */

.kwff-facet__title:has(.kwff-facet__toggle) {
  margin: 0;
}

.kwff-facet__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-xs) 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

.kwff-facet__toggle > span:first-child {
  flex: 1 1 auto;
}

.kwff-facet__n {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--muted);
  background: var(--paper-2);
  border-radius: var(--r-full);
  padding: 1px 7px;
}

.kwff-facet__chevron {
  flex: none;
  color: var(--muted);
  transition: transform var(--dur-short) var(--ease-out);
}

.kwff-facet.is-plegado .kwff-facet__chevron {
  transform: rotate(-90deg);
}

.kwff-facet.is-plegado .kwff-facet__options {
  display: none;
}

.kwff-facet__toggle:hover .kwff-facet__chevron,
.kwff-facet__toggle:hover .kwff-facet__n {
  color: var(--ink);
}

/* ============================================================
   Pestañas y relacionados
   ============================================================ */

.woocommerce-tabs {
  margin-top: var(--space-3xl);
}

.woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: 0 0 var(--space-lg);
  padding: 0 0 var(--space-xs);
  border-bottom: 1px solid var(--rule-2);
  list-style: none;
}

.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after {
  content: none;
}

.woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.woocommerce-tabs ul.tabs li a {
  padding: 0;
  font-weight: 600;
  color: var(--muted);
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ink);
}

.related.products,
.up-sells.products,
.cross-sells {
  margin-top: var(--space-3xl);
}

.related.products > h2,
.up-sells.products > h2,
.cross-sells > h2 {
  margin-bottom: var(--space-lg);
  font-size: var(--text-xl);
}

/* ============================================================
   Carrito
   ============================================================ */

.woocommerce-cart-form {
  margin: 0;
}

.woocommerce-cart-form__contents {
  display: grid;
  gap: var(--space-md);
  border: 0;
}

.woocommerce-cart-form__contents thead {
  display: none;
}

.woocommerce-cart-form__contents tbody,
.woocommerce-cart-form__contents tr {
  display: contents;
}

.woocommerce-cart-form__cart-item {
  align-items: center;
}

/* Cada fila del carrito se convierte en la tarjeta del diseño. */
.woocommerce-cart-form__cart-item.cart_item {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-md);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-md);
}

.woocommerce-cart-form__cart-item td {
  padding: 0;
  border: 0;
  background: none;
}

.woocommerce-cart-form__cart-item .product-remove {
  order: 3;
}

.woocommerce-cart-form__cart-item .product-thumbnail {
  order: 0;
}

.woocommerce-cart-form__cart-item .product-thumbnail img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  object-fit: cover;
}

.woocommerce-cart-form__cart-item .product-name {
  order: 1;
  font-weight: 600;
}

.woocommerce-cart-form__cart-item .product-name a {
  color: inherit;
}

.woocommerce-cart-form__cart-item .product-price {
  display: none;
}

.woocommerce-cart-form__cart-item .product-quantity,
.woocommerce-cart-form__cart-item .product-subtotal {
  order: 2;
}

.woocommerce-cart-form__cart-item .product-subtotal {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

.woocommerce-cart-form__cart-item .product-remove a {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-full);
  color: var(--muted);
  font-size: var(--text-md);
  text-decoration: none;
}

.woocommerce-cart-form__cart-item .product-remove a:hover {
  background: var(--err-soft);
  color: var(--err);
}

.woocommerce-cart-form .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-md) 0 0;
  border: 0;
}

.woocommerce-cart-form .coupon {
  display: flex;
  gap: var(--space-xs);
  flex: 1 1 18rem;
}

.woocommerce-cart-form .coupon input {
  flex: 1;
  min-height: 44px;
  padding-inline: var(--space-sm);
  border: 1px solid var(--rule);
  border-radius: var(--r-full);
  font: inherit;
}

.woocommerce-cart-form .actions button {
  min-height: 44px;
  padding-inline: var(--space-lg);
  border: 1px solid var(--rule);
  border-radius: var(--r-full);
  background: var(--paper);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.woocommerce-cart-form .actions button[name="update_cart"]:disabled {
  display: none;
}

/* Totales y layout de dos columnas ---------------------------------------- */

/* Las dos columnas las pone .cart-layout, que emite la plantilla del tema. Aquí había una
   segunda rejilla sobre .woocommerce —de cuando el carrito usaba el marcado de WooCommerce—
   y al anidarse dejaba todo el contenido metido en su primera columna, con medio ancho de
   página vacío a la derecha. */
.woocommerce-cart .woocommerce {
  display: block;
}

.cart-collaterals {
  width: auto;
}

.cart-collaterals .cart_totals {
  width: auto;
  float: none;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-lg);
  padding: var(--space-lg);
  background: var(--paper);
  position: sticky;
  top: calc(var(--bar-h) + var(--space-lg));
}

.cart_totals h2 {
  margin-bottom: var(--space-md);
  font-size: var(--text-lg);
}

.cart_totals table {
  width: 100%;
  border: 0;
}

.cart_totals th,
.cart_totals td {
  padding: var(--space-2xs) 0;
  border: 0;
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.cart_totals td {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.cart_totals .order-total th,
.cart_totals .order-total td {
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule-2);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--ink);
}

.wc-proceed-to-checkout {
  padding: var(--space-md) 0 0;
}

.wc-proceed-to-checkout .checkout-button {
  display: grid;
  place-items: center;
  min-height: 48px;
  border-radius: var(--r-full);
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
}

.wc-proceed-to-checkout .checkout-button:hover {
  background: var(--brand);
}

@media (max-width: 900px) {
  .cart-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   Pago
   ============================================================ */

.woocommerce-checkout-review-order,
#customer_details {
  min-width: 0;
}

.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}

/* Cuando la validación falla, `checkout.js` inserta el aviso con `$form.prepend()`: queda
   como primer hijo del formulario y, siendo este una rejilla, ocupa una celda. Eso empuja
   los datos de facturación a la columna derecha y el resumen a la fila siguiente —la página
   entera se desordena justo cuando el cliente necesita leer el error—. El aviso ocupa el
   ancho completo, que además es donde debe estar. */
.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup,
.woocommerce-checkout form.checkout > .woocommerce-error,
.woocommerce-checkout form.checkout > .woocommerce-message,
.woocommerce-checkout form.checkout > .woocommerce-info {
  grid-column: 1 / -1;
  order: -1; /* WooCommerce lo antepone, pero una pasarela puede añadirlo al final. */
  margin: 0;
}

/* La plantilla del tema envuelve título y resumen en .checkout-aside, así que la columna
   derecha es un solo elemento: no hacen falta filas explícitas ni cálculos de altura. */
.checkout-aside {
  position: sticky;
  top: calc(var(--bar-h) + var(--space-lg));
  display: grid;
  gap: var(--space-md);
}

.checkout-aside > h3#order_review_heading {
  margin: 0;
}


.woocommerce-checkout form.checkout .col2-set {
  display: grid;
  gap: var(--space-xl);
}

.woocommerce-checkout form.checkout .col2-set .col-1,
.woocommerce-checkout form.checkout .col2-set .col-2 {
  width: auto;
  float: none;
}

.woocommerce-checkout h3 {
  margin-bottom: var(--space-md);
  font-size: var(--text-lg);
}

/* Campos: el marcado de WooCommerce se lleva al aspecto de `.field` del diseño. */
.woocommerce-checkout .form-row,
.woocommerce-address-fields .form-row,
.woocommerce-EditAccountForm .form-row {
  display: grid;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-md);
  padding: 0;
}

.woocommerce-checkout .form-row label,
.woocommerce-address-fields .form-row label,
.woocommerce-EditAccountForm .form-row label {
  font-size: var(--text-sm);
  font-weight: 600;
}

.woocommerce-checkout .form-row .required {
  color: var(--err);
  text-decoration: none;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-address-fields input.input-text,
.woocommerce-address-fields select,
.woocommerce-EditAccountForm input.input-text,
.select2-container .select2-selection--single {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-sm);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper);
  font: inherit;
  color: var(--ink);
}

.woocommerce-checkout .form-row textarea {
  min-height: 5.5rem;
  padding-block: var(--space-sm);
  resize: vertical;
}

.select2-container .select2-selection--single {
  display: flex;
  align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: inherit;
  color: inherit;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: var(--space-xs);
}

.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select {
  border-color: var(--err);
  background: var(--err-soft);
}

/* Dos columnas para los campos que caben de a pares. */
@media (min-width: 640px) {
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-address-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-md);
  }

  .woocommerce-billing-fields__field-wrapper > .form-row-wide,
  .woocommerce-shipping-fields__field-wrapper > .form-row-wide,
  .woocommerce-address-fields__field-wrapper > .form-row-wide {
    grid-column: 1 / -1;
  }
}

/* Resumen del pedido ------------------------------------------------------- */

#order_review {
  border: 1px solid var(--rule-2);
  border-radius: var(--r-lg);
  padding: var(--space-lg);
  background: var(--paper);
  position: sticky;
  top: calc(var(--bar-h) + var(--space-lg));
}

#order_review table.shop_table {
  width: 100%;
  border: 0;
  margin: 0;
}

#order_review table.shop_table thead {
  display: none;
}

#order_review table.shop_table th,
#order_review table.shop_table td {
  padding: var(--space-2xs) 0;
  border: 0;
  font-size: var(--text-sm);
}

#order_review table.shop_table td {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

#order_review table.shop_table .cart_item td.product-name {
  text-align: left;
  font-family: var(--font-body);
  color: var(--ink-2);
}

#order_review table.shop_table tfoot .order-total th,
#order_review table.shop_table tfoot .order-total td {
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule-2);
  font-size: var(--text-md);
  font-weight: 700;
}

/* Métodos de pago ---------------------------------------------------------- */

.woocommerce-checkout #payment {
  margin-top: var(--space-lg);
  border-radius: var(--r-md);
  background: transparent;
}

.woocommerce-checkout #payment ul.payment_methods {
  display: grid;
  gap: var(--space-xs);
  padding: 0;
  border: 0;
  list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-md);
  background: var(--paper);
}

.woocommerce-checkout #payment ul.payment_methods li label {
  font-weight: 600;
  cursor: pointer;
}

.woocommerce-checkout #payment div.payment_box {
  margin: var(--space-xs) 0 0;
  padding: var(--space-sm);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.woocommerce-checkout #payment div.payment_box::before {
  content: none;
}

.woocommerce-checkout #payment .place-order {
  padding: var(--space-md) 0 0;
}

.woocommerce-checkout #payment #place_order {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.woocommerce-checkout #payment #place_order:hover {
  background: var(--brand);
}

@media (max-width: 900px) {
  .woocommerce-checkout form.checkout {
    grid-template-columns: minmax(0, 1fr);
  }

  .woocommerce-checkout form.checkout > h3#order_review_heading,
  .woocommerce-checkout form.checkout > #order_review {
    grid-column: 1;
  }

  #order_review {
    position: static;
  }
}

/* ============================================================
   Confirmación del pedido
   ============================================================ */

.woocommerce-order {
  max-width: 46rem;
  margin-inline: auto;
}

.woocommerce-thankyou-order-received {
  margin-bottom: var(--space-lg);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--ink);
}

.woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-md);
  margin: 0 0 var(--space-2xl);
  padding: var(--space-lg);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-lg);
  list-style: none;
}

.woocommerce-order-overview li {
  border: 0;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.woocommerce-order-overview li strong {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
}

.woocommerce-order-details,
.woocommerce-customer-details {
  margin-top: var(--space-2xl);
}

.woocommerce-order-details table.shop_table,
.woocommerce-table--order-details {
  width: 100%;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-md);
  border-collapse: collapse;
  overflow: hidden;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--rule-2);
  text-align: left;
  font-size: var(--text-sm);
}

.woocommerce-table--order-details td.woocommerce-table__product-total,
.woocommerce-table--order-details tfoot td {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Mi cuenta
   ============================================================ */

.woocommerce-MyAccount-navigation ul {
  display: grid;
  gap: var(--space-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
}

.woocommerce-MyAccount-navigation li a:hover {
  background: var(--paper-2);
  color: var(--ink);
}

.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--ink);
  color: var(--paper);
}

.woocommerce-MyAccount-content table.shop_table {
  width: 100%;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-md);
  border-collapse: collapse;
  overflow: hidden;
}

.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--rule-2);
  text-align: left;
  font-size: var(--text-sm);
}

.woocommerce-MyAccount-content .button,
.woocommerce-form button[type="submit"],
.woocommerce-Button {
  display: inline-grid;
  place-items: center;
  min-height: 44px;
  padding-inline: var(--space-lg);
  border: 0;
  border-radius: var(--r-full);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.woocommerce-form-login,
.woocommerce-form-register {
  max-width: 28rem;
  padding: var(--space-lg);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-lg);
}

/* ============================================================
   Avisos
   ============================================================ */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-notice {
  margin: 0 0 var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--rule-2);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  background: var(--paper-2);
  list-style: none;
  font-size: var(--text-sm);
}

.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
  content: none;
}

.woocommerce-message {
  border-left-color: var(--ok);
}

.woocommerce-error {
  border-left-color: var(--err);
  background: var(--err-soft);
}

.woocommerce-info {
  border-left-color: var(--brand);
}

.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
  float: right;
  font-size: var(--text-sm);
  text-decoration: underline;
}

/* ============================================================
   Cantidad (la usan carrito y ficha)
   ============================================================ */

.quantity {
  display: inline-flex;
  align-items: center;
  height: 48px;
  border: 1px solid var(--rule);
  border-radius: var(--r-full);
}

.quantity input.qty {
  width: 3.5ch;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-family: var(--font-mono);
  text-align: center;
  appearance: textfield;
}

.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.quantity button {
  width: 42px;
  height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-size: var(--text-md);
  cursor: pointer;
}

.quantity button:hover {
  color: var(--ink);
}

/* ============================================================
   Widgets de filtro en la barra lateral
   ============================================================ */

.filters__widget {
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--rule-2);
  margin-bottom: var(--space-md);
}

.filters__title {
  margin-bottom: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ============================================================
   Accesibilidad
   ============================================================ */

/* WooCommerce mete texto solo para lectores de pantalla dentro de precios y enlaces
   («Rango de precios: desde… hasta…»). Sin esta regla se ve en pantalla pegado al
   precio, que es como estaba saliendo. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* Encabezado de cada material dentro del muro de color de la portada. */
.wall-mat {
  margin: var(--space-xl) 0 var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.wall-mat:first-of-type {
  margin-top: 0;
}

/* ============================================================
   Ajustes de maquetación
   ============================================================ */

/* Visor 3D en dos columnas, como en el diseño ------------------------------ */

/* El plugin solo se ocupa de dibujar la pieza; dónde va y cuánto ocupa es decisión del
   tema. A ancho completo la pieza queda diminuta en medio de un lienzo enorme y las
   muestras se desparraman en una fila larguísima. */
.v3d-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}

.v3d-layout .wcv3d {
  margin: 0;
}

.v3d-layout .wcv3d__paleta {
  max-height: 11rem;
  overflow-y: auto;
}

.v3d-panel p {
  color: var(--ink-2);
}

@media (max-width: 900px) {
  .v3d-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }
}

/* Tarjetas del catálogo a la misma altura ---------------------------------- */

/* Sin esto, una referencia sin precio deja la tarjeta más corta y la fila siguiente
   entra desalineada: la rejilla se ve rota aunque cada tarjeta esté bien. */
ul.products li.product {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: start;
  position: relative;
}

ul.products li.product .product__name {
  margin: var(--space-sm) 0 var(--space-2xs);
  align-self: start;
  font-size: var(--text-base);
  line-height: 1.3;
}

ul.products li.product .product__row {
  align-self: end;
}

.product__media {
  display: block;
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper-2);
  aspect-ratio: 1;
}

.product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mi cuenta ---------------------------------------------------------------- */

/* WooCommerce no envuelve la navegación y el contenido en un contenedor propio: los
   emite como hermanos dentro de .woocommerce. Por eso hay que hacer rejilla en ese
   contenedor y no en uno intermedio que no existe. */
/* La plantilla del tema envuelve las dos columnas en .account-layout, así que la rejilla
   vive ahí y no en un contenedor que hubiera que adivinar. */
.account-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}

.account-nav {
  position: sticky;
  top: calc(var(--bar-h) + var(--space-lg));
}

.woocommerce-MyAccount-content > p:first-child {
  margin-top: 0;
}

@media (max-width: 780px) {
  .account-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-nav {
    position: static;
  }
}

/* Relacionados y venta cruzada -------------------------------------------- */

.related.products ul.products,
.up-sells.products ul.products,
.cross-sells ul.products {
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

/* Swatches del plugin dentro de la ficha ----------------------------------- */

.pdp__info .kwv-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pdp__info .kwv-swatches li {
  margin: 0;
}

.pdp__info .kwv-swatches-wrap {
  margin-bottom: var(--space-md);
}

/* ============================================================
   Botones
   ============================================================ */

/* El tema declara la clase que desactiva los estilos de botón de WooCommerce, así que a
   partir de aquí el aspecto de TODO botón de la tienda es responsabilidad nuestra. Esta es
   la base para los que no tienen una regla propia más específica. */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-grid;
  place-items: center;
  min-height: 44px;
  padding-inline: var(--space-lg);
  border: 0;
  border-radius: var(--r-full);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--brand);
  color: var(--paper);
}

.woocommerce .button.alt {
  background: var(--ink);
}

.woocommerce .button:disabled,
.woocommerce .button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* El «+» de la tarjeta vuelve a mandar sobre la base de arriba. */
.woocommerce ul.products li.product a.product__add,
.woocommerce ul.products li.product .product__add {
  position: absolute;
  right: var(--space-sm);
  top: var(--space-sm);
  z-index: 2;
  min-height: 0;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-1);
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

.woocommerce ul.products li.product .product__add:hover {
  background: var(--ink);
  color: var(--paper);
}

.woocommerce ul.products li.product .product__add::before {
  content: "+";
  font-size: 1.25rem;
  line-height: 1;
}

/* Un texto largo dentro del botón redondo lo desbordaba y se montaba sobre el título. */
.woocommerce ul.products li.product .product__add > * {
  display: none;
}

/* ============================================================
   Reseñas
   ============================================================ */

.colido-resenas {
  margin-top: var(--space-3xl);
}

.colido-resenas .commentlist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.colido-resenas .commentlist li {
  padding: var(--space-lg);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-lg);
}

.colido-resenas .comment-text p:last-child {
  margin-bottom: 0;
}

.colido-resenas .star-rating {
  color: var(--warn);
}

/* ============================================================
   Restos del maquetado antiguo de WooCommerce
   ============================================================ */

/* WooCommerce añade ::before y ::after a la lista de productos como «clearfix» de la época
   de los floats. En una rejilla dejan de ser invisibles: se convierten en dos celdas más y
   desplazan toda la primera fila, dejando un hueco al principio. Sus selectores llevan
   `.woocommerce` delante, así que hay que igualar la especificidad para retirarlos. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none;
  display: none;
}

/* Lo mismo en los contenedores que envuelven catálogo y ficha. */
.woocommerce .woocommerce-notices-wrapper::before,
.woocommerce .woocommerce-notices-wrapper::after {
  content: none;
  display: none;
}

/* Y los anchos en porcentaje que reparte por posición (first/last), pensados para floats. */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
  clear: none;
  margin-right: 0;
}

/* ============================================================
   Buscador y barra lateral de la tienda
   ============================================================ */

.nav__search {
  border-top: 1px solid var(--rule-2);
  background: var(--paper);
  padding-block: var(--space-sm);
}

.buscador {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  width: 100%;
}

.buscador input[type="search"] {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding-inline: var(--space-md);
  border: 1px solid var(--rule);
  border-radius: var(--r-full);
  background: var(--paper);
  font: inherit;
  color: var(--ink);
}

.buscador input[type="search"]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: transparent;
}

.buscador .btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding-inline: var(--space-lg);
  border: 0;
  border-radius: var(--r-full);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* En la barra lateral el botón sobra: basta con pulsar Intro. */
.filters .buscador .btn {
  display: none;
}

.filters .buscador input[type="search"] {
  font-size: var(--text-sm);
}

/* Categorías ---------------------------------------------------------------- */

.filters__cats {
  display: grid;
  gap: var(--space-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.filters__cats ul {
  display: grid;
  gap: var(--space-3xs);
  margin: var(--space-3xs) 0 0 var(--space-sm);
  padding: 0;
  list-style: none;
}

.filters__cats a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  color: var(--ink-2);
  text-decoration: none;
}

.filters__cats a:hover {
  background: var(--paper-2);
  color: var(--ink);
}

.filters__cats a[aria-current="page"] {
  background: var(--paper-3);
  color: var(--ink);
  font-weight: 600;
}

.filters__n {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
}

/* ============================================================
   Sugerencias de búsqueda
   ============================================================ */

.buscador {
  position: relative;
}

.buscador__sugerencias {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  max-height: 26rem;
  overflow-y: auto;
  padding: var(--space-2xs);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: var(--shadow-2);
}

.buscador__item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-2xs);
  border-radius: var(--r-sm);
  color: var(--ink);
  text-decoration: none;
}

.buscador__item:hover,
.buscador__item:focus-visible {
  background: var(--paper-2);
  outline: none;
}

.buscador__media img {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--paper-2);
}

.buscador__punto {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm);
  background: var(--swatch, var(--rule));
}

.buscador__txt {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.buscador__nombre {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buscador__precio {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
}

.buscador__agotado {
  padding: 1px 6px;
  border-radius: var(--r-full);
  background: var(--paper-3);
  font-family: var(--font-body);
  font-size: var(--text-xs);
}

.buscador__todos {
  display: block;
  margin-top: var(--space-2xs);
  padding: var(--space-xs);
  border-top: 1px solid var(--rule-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand-ink);
  text-align: center;
  text-decoration: none;
}

.buscador__todos:hover,
.buscador__todos:focus-visible {
  background: var(--paper-2);
  outline: none;
}

.buscador__vacio {
  margin: 0;
  padding: var(--space-md);
  font-size: var(--text-sm);
  color: var(--muted);
  text-align: center;
}


/* ============================================================
   Carrito — plantilla del tema
   ============================================================ */

.cart-line__name a {
  color: inherit;
  text-decoration: none;
}

.cart-line__name a:hover {
  color: var(--brand-ink);
}

.cart-line__qty {
  margin-top: var(--space-2xs);
}

.cart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin-top: var(--space-lg);
}

.cart-actions .coupon {
  display: flex;
  gap: var(--space-xs);
  flex: 1 1 18rem;
}

.cart-actions .coupon input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding-inline: var(--space-md);
  border: 1px solid var(--rule);
  border-radius: var(--r-full);
  background: var(--paper);
  font: inherit;
}

/* La barra de filtros hace scroll cuando no cabe; que lo haga con discreción. */
.filters {
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  padding-right: var(--space-2xs);
}

/* En un producto variable, cantidad y botones no cuelgan de form.cart sino de este
   contenedor intermedio que WooCommerce inserta al elegir la variación: el flex del
   formulario no les llegaba y los botones se pegaban entre sí. */
.pdp__info form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  width: 100%;
}

.pdp__info .single_variation_wrap {
  width: 100%;
}