/* ============================================================
   HOMBRE ALFA — Rediseño premium de Tienda, Producto y Carrito.

   Tienda, Producto y Carrito se renderizan con las plantillas de
   bloques de WooCommerce (FSE): Product Collection, Single Product
   Template y el bloque Cart. No existen archive-product.php ni
   single-product.php clásicos, por lo que este archivo trabaja
   contra las clases reales que emiten esos bloques (confirmadas
   inspeccionando el HTML servido), no contra plantillas clásicas.
   ============================================================ */

/* ----- Título/breadcrumb nativos de Tienda: se sustituyen por el
   hero premium inyectado en wp_body_open (hombrealfa_shop_hero). ----- */
body.woocommerce-shop h1.wp-block-query-title,
body.woocommerce-shop nav.woocommerce-breadcrumb {
  display: none !important;
}

.ha-shop-hero {
  min-height: 48vh;
  padding-top: 11rem !important;
  padding-bottom: 4.5rem !important;
}

/* ----- Tira decorativa de logos de colección, girando en 3D ----- */
.ha-shop-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--ha-hairline);
}

.ha-shop-logos__wrap {
  position: relative;
  width: 68px;
  height: 68px;
  perspective: 800px;
  flex-shrink: 0;
}

.ha-shop-logos__logo-3d {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: ha-logo-spin-3d 9s linear infinite;
}

.ha-shop-logos__wrap:nth-child(2) .ha-shop-logos__logo-3d { animation-delay: -1.5s; }
.ha-shop-logos__wrap:nth-child(3) .ha-shop-logos__logo-3d { animation-delay: -3s; }
.ha-shop-logos__wrap:nth-child(4) .ha-shop-logos__logo-3d { animation-delay: -4.5s; }
.ha-shop-logos__wrap:nth-child(5) .ha-shop-logos__logo-3d { animation-delay: -6s; }
.ha-shop-logos__wrap:nth-child(6) .ha-shop-logos__logo-3d { animation-delay: -7.5s; }

.ha-shop-logos__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  backface-visibility: hidden;
  background: transparent !important;
}

.ha-shop-logos__face--back {
  transform: rotateY(180deg);
}

@media (max-width: 640px) {
  .ha-shop-hero {
    padding-top: 7rem !important;
    padding-bottom: 3rem !important;
  }

  .ha-shop-logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    column-gap: 1.75rem;
    row-gap: 2rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
  }
  .ha-shop-logos__wrap {
    width: 58px;
    height: 58px;
  }
}

/* ============================================================
   Barra de resultados + ordenación (Tienda)
   ============================================================ */
.wc-block-product-results-count,
.woocommerce-result-count {
  color: var(--ha-smoke) !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.04em;
}

form.woocommerce-ordering,
.wc-block-catalog-sorting {
  margin-bottom: 0 !important;
}

select.orderby,
.wc-block-catalog-sorting__select,
select[name="orderby"] {
  background: var(--ha-charcoal) !important;
  color: var(--ha-white) !important;
  border: 1px solid var(--ha-hairline-strong) !important;
  border-radius: 2px !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.02em;
}

.woocommerce-shop .woocommerce-notices-wrapper,
.wp-block-woocommerce-catalog-sorting,
.wp-block-woocommerce-product-results-count {
  max-width: 1280px;
  margin-inline: auto !important;
  padding-inline: 2rem;
}

/* ============================================================
   Grid de productos (Tienda + relacionados + cross-sells)
   ============================================================ */
.wc-block-product-template,
.wp-block-woocommerce-product-collection {
  max-width: 1280px;
  margin-inline: auto !important;
  padding: 1rem 2rem 2rem;
  gap: 1.75rem !important;
}

/* Varios bloques nativos de WooCommerce (la cuadrícula de productos, el
   bloque Cart completo, el grupo que envuelve "Mostrando X resultados" +
   el selector de orden) llevan la clase "alignwide", pensada para
   sangrar fuera del contenedor con calc(50% - 50vw). Ese cálculo se
   descuadra en móvil y provoca scroll horizontal en Tienda y Carrito
   (cabecera, filtro de orden y carrito incluidos) — no ocurre en el
   resto de páginas porque no usan esa clase. Se neutraliza en toda
   página de WooCommerce (clase de body común a Tienda/Producto/
   Carrito/Checkout/Cuenta) para que se comporte como un contenedor
   normal, igual que el resto del sitio. */
body.woocommerce-page .alignwide,
body.woocommerce-page .alignfull {
  width: auto !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.woocommerce-page {
  overflow-x: hidden;
  max-width: 100vw;
}

/* El grupo que envuelve "Mostrando X resultados" + el selector de orden
   lleva la clase "is-nowrap" (flex-wrap:nowrap forzado), que en móvil no
   deja sitio para el selector y lo corta. Se permite que salte de línea. */
.wp-block-group.is-nowrap {
  flex-wrap: wrap !important;
  row-gap: 0.75rem;
}

select.orderby,
.wc-block-catalog-sorting__select,
select[name="orderby"] {
  max-width: 100%;
  box-sizing: border-box;
}

li.wc-block-product,
.wc-block-grid__product {
  background: transparent;
  list-style: none;
}

/* Imagen */
.wc-block-components-product-image,
.wc-block-grid__product-image {
  aspect-ratio: 1 / 1;
  background: var(--ha-charcoal) !important;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color 0.35s ease;
}

li.wc-block-product:hover .wc-block-components-product-image,
.wc-block-grid__product:hover .wc-block-grid__product-image {
  border-color: var(--ha-amber);
}

.wc-block-components-product-image img,
.wc-block-grid__product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.45s ease;
}

li.wc-block-product:hover .wc-block-components-product-image img,
.wc-block-grid__product:hover .wc-block-grid__product-image img {
  transform: scale(1.045);
}

/* Título */
.wc-block-product h2.wp-block-post-title,
.wc-block-grid__product-title {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--ha-white) !important;
  letter-spacing: 0.01em;
  margin: 1rem 0 0.35rem !important;
  line-height: 1.35;
}

.wc-block-product h2.wp-block-post-title a,
.wc-block-grid__product-title {
  color: inherit !important;
  text-decoration: none !important;
}

/* Precio */
.wc-block-product .wc-block-components-product-price,
.wc-block-grid__product-price {
  color: var(--ha-smoke) !important;
  font-size: 0.875rem !important;
  justify-content: center;
}

.woocommerce-Price-amount { color: inherit; }

/* Botón añadir al carrito */
.wc-block-components-product-button__button.add_to_cart_button,
.wc-block-grid__product-add-to-cart .add_to_cart_button {
  background: transparent !important;
  color: var(--ha-amber) !important;
  border: 1px solid var(--ha-amber) !important;
  border-radius: 2px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.65rem 1rem !important;
  transition: background 150ms ease, color 150ms ease;
}

.wc-block-components-product-button__button.add_to_cart_button:hover,
.wc-block-grid__product-add-to-cart .add_to_cart_button:hover {
  background: var(--ha-amber) !important;
  color: var(--ha-text-on-amber) !important;
}

.wc-block-components-product-button__button.added::after {
  color: inherit;
}

/* ============================================================
   Producto individual
   ============================================================ */
.wp-block-woocommerce-product-details,
.wp-block-woocommerce-product-image-gallery,
.wp-block-woocommerce-product-meta,
.wp-block-woocommerce-add-to-cart-form,
.wp-block-woocommerce-product-price {
  max-width: 1280px;
}

.wp-block-woocommerce-product-details {
  margin-inline: auto;
  padding-inline: 2rem;
  padding-top: 2rem;
}

h1.wp-block-post-title {
  font-family: 'Archivo Expanded', 'Archivo', sans-serif !important;
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
  color: var(--ha-white) !important;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem !important;
}

/* Diseño de una sola columna apilada: la imagen/galería arriba a todo
   ancho de su columna, y justo debajo — no al lado, como estaba antes en
   dos columnas — todo el bloque de compra (título, descripción corta,
   precio, tallas/colores, añadir al carrito, categoría, colección). Se
   fuerza en la propia ficha de producto (2 columnas nativas de WooCommerce)
   sin tocar el HTML, solo apilando con flexbox y centrando el conjunto. */
body.single-product .wp-block-columns.alignwide {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  max-width: 680px !important;
  margin-inline: auto !important;
  gap: 0 !important;
}

body.single-product .wp-block-columns.alignwide > .wp-block-column {
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: auto !important;
}

body.single-product .wp-block-columns.alignwide > .wp-block-column:nth-child(2) {
  display: flex;
  flex-direction: column;
  margin-top: 2.25rem;
}

/* El bloque nativo "Galería de imágenes del producto" trae un ancho fijo
   de 512px de fábrica (el que tenía sentido en la columna estrecha del
   layout de dos columnas anterior) — con la columna única más ancha de
   arriba, se queda pequeño y descentrado. Que ocupe todo el ancho de su
   columna. */
body.single-product .wp-block-woocommerce-product-image-gallery {
  width: 100% !important;
  max-width: 100% !important;
}

.wp-block-columns.alignwide > .wp-block-column:nth-child(2) > .wp-block-post-title { order: 0; }
.wp-block-columns.alignwide > .wp-block-column:nth-child(2) > .wp-block-post-excerpt { order: 1; }
.wp-block-columns.alignwide > .wp-block-column:nth-child(2) > .wp-block-woocommerce-product-price { order: 2; }
.wp-block-columns.alignwide > .wp-block-column:nth-child(2) > .wp-block-add-to-cart-form { order: 3; }
.wp-block-columns.alignwide > .wp-block-column:nth-child(2) > .wp-block-woocommerce-product-meta { order: 4; }
.wp-block-columns.alignwide > .wp-block-column:nth-child(2) > .ha-product-coleccion { order: 5; }

/* ----- Escala tipográfica única del bloque de compra -----
   Antes cada texto sin regla propia caía en el tamaño base del tema
   (22px), mientras las etiquetas sí tenían reglas explícitas muy
   pequeñas (11px) — de ahí el salto "bestial" que reportaste. Aquí se
   fija explícitamente CADA texto de esta zona a una escala coherente. */
h1.wp-block-post-title {
  font-size: clamp(1.75rem, 2.4vw, 2.25rem) !important;
}

body.single-product .wp-block-post-excerpt,
body.single-product .wp-block-post-excerpt p {
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: var(--ha-smoke) !important;
  margin: 0 0 1.5rem !important;
  max-width: 46ch;
}

.wp-block-woocommerce-product-price {
  font-size: 1.5rem !important;
  color: var(--ha-amber) !important;
  font-weight: 700 !important;
  margin: 0 0 1.25rem !important;
}

.wp-block-woocommerce-product-price .woocommerce-Price-amount {
  color: inherit !important;
  font-weight: inherit !important;
}

.wp-block-post-terms.taxonomy-product_cat {
  font-size: 0.75rem !important;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ha-smoke) !important;
}

.wp-block-post-terms.taxonomy-product_cat a {
  color: var(--ha-amber) !important;
  text-decoration: none !important;
}

/* Etiqueta fina de colección bajo la categoría: logo estático pequeño,
   sin protagonismo, sin animación (a diferencia de la tira de Tienda). */
.ha-product-coleccion {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.ha-product-coleccion__logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.85;
  flex-shrink: 0;
  background: transparent !important;
}

.ha-product-coleccion__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ha-smoke);
}

.ha-product-coleccion__label a {
  color: var(--ha-amber);
  text-decoration: none;
}

.ha-product-coleccion__label a:hover {
  text-decoration: underline;
}

/* Galería */
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__wrapper {
  background: var(--ha-charcoal) !important;
  border-radius: 2px;
  overflow: hidden;
}

.woocommerce-product-gallery__image img {
  object-fit: cover;
}

/* Carrusel de miniaturas (flexslider) — activado vía add_theme_support,
   estas reglas afinan su aspecto por defecto a la paleta de marca. */
.woocommerce-product-gallery {
  position: relative;
}

/* La rejilla de miniaturas (todas a la vez, en varias filas) se
   sustituye por una tira de una sola fila, con su propio deslizador
   (flechas .ha-thumbs-nav) para recorrer los 50+ mockups — no solo con
   scroll táctil. El propio WooCommerce (woocommerce.css del plugin)
   trae ".woocommerce div.product div.images .flex-control-thumbs li"
   con más especificidad que un simple ".flex-control-thumbs li", así
   que forzaba "width:25%; float:left" y aplastaba cada miniatura
   cuadrada (100×100) dentro de una caja rectangular — eso es lo que
   se veía "recortado". Se neutraliza con !important y se agranda la
   caja para que no se vean diminutas. */
.ha-thumbs-rail {
  position: relative;
  margin: 1rem 0 0;
  padding: 0 2.25rem;
}

.flex-control-nav.flex-control-thumbs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 0.5rem;
  margin: 0 !important;
  padding: 0 0 0.25rem;
  list-style: none;
  scrollbar-width: thin;
}

.flex-control-thumbs li {
  width: 72px !important;
  height: 72px !important;
  flex: none !important;
  float: none !important;
  margin: 0 !important;
  position: relative;
}

.flex-control-thumbs li img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid transparent;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 150ms ease, border-color 150ms ease;
}

.flex-control-thumbs li img:hover {
  opacity: 0.85;
}

.flex-control-thumbs li img.flex-active {
  opacity: 1;
  border-color: var(--ha-amber);
}

.ha-thumbs-nav {
  position: absolute;
  top: 0;
  bottom: 0.25rem;
  z-index: 5;
  width: 28px;
  border: none;
  cursor: pointer;
  color: var(--ha-white);
  background: linear-gradient(to var(--ha-thumbs-fade-dir, right), var(--ha-black) 0%, transparent 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 150ms ease;
}

.ha-thumbs-nav:hover { color: var(--ha-amber); }
.ha-thumbs-nav--prev { left: 0; --ha-thumbs-fade-dir: right; justify-content: flex-start; }
.ha-thumbs-nav--next { right: 0; --ha-thumbs-fade-dir: left; justify-content: flex-end; }

.ha-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(5, 5, 5, 0.6);
  color: var(--ha-white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, color 150ms ease;
}

.ha-gallery-nav:hover {
  background: var(--ha-amber);
  color: var(--ha-text-on-amber);
}

.ha-gallery-nav--prev { left: 0.75rem; }
.ha-gallery-nav--next { right: 0.75rem; }

.ha-gallery-counter {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  z-index: 5;
  background: rgba(5, 5, 5, 0.6);
  color: var(--ha-white);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.6rem;
  border-radius: 10px;
}

/* Botón de lupa / pantalla completa */
.woocommerce-product-gallery__trigger {
  background: rgba(5, 5, 5, 0.55) !important;
  color: var(--ha-white);
  border-radius: 50%;
  transition: background 150ms ease, color 150ms ease;
}

.woocommerce-product-gallery__trigger:hover {
  background: var(--ha-amber) !important;
  color: var(--ha-text-on-amber);
}

.woocommerce-product-gallery__trigger svg {
  fill: currentColor;
}

/* Lightbox a pantalla completa (PhotoSwipe) */
.pswp__caption__center {
  color: var(--ha-white);
}

.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
  filter: none;
}

.pswp__counter {
  color: var(--ha-smoke);
}

/* Formulario cantidad + botón */
.wc-block-add-to-cart-form .input-text.qty {
  background: var(--ha-charcoal) !important;
  color: var(--ha-white) !important;
  border: 1px solid var(--ha-hairline-strong) !important;
  border-radius: 2px !important;
  text-align: center;
}

.wc-block-add-to-cart-form .input-text.qty:focus {
  outline: none;
  border-color: var(--ha-amber) !important;
}

/* Paso de cantidad con botones +/- reales (antes solo tenía las
   flechitas nativas del navegador, minúsculas y poco visibles). */
.ha-qty-wrap {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--ha-hairline-strong);
  border-radius: 2px;
  overflow: hidden;
}

.ha-qty-btn {
  background: var(--ha-charcoal);
  color: var(--ha-white);
  border: none;
  width: 38px;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.ha-qty-btn:hover {
  background: var(--ha-amber);
  color: var(--ha-text-on-amber);
}

.ha-qty-wrap .input-text.qty {
  border: none !important;
  border-radius: 0 !important;
  width: 48px;
  -moz-appearance: textfield;
}

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

.single_add_to_cart_button.button {
  background: var(--ha-amber) !important;
  color: var(--ha-text-on-amber) !important;
  border: 1px solid var(--ha-amber) !important;
  border-radius: 2px !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.9rem 2rem !important;
  transition: background 150ms ease, border-color 150ms ease;
}

.single_add_to_cart_button.button:hover {
  background: var(--ha-amber-hover) !important;
  border-color: var(--ha-amber-hover) !important;
}

/* Selector de variantes (talla/color) — productos variables (Printify).
   No existía ningún producto con variantes hasta ahora; sin esto el
   formulario se ve con el <select> nativo del navegador, sin estilo. */
table.variations {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.25rem;
}

table.variations tr {
  display: block;
  margin-bottom: 1rem;
}

/* La celda de etiqueta es un <th>, no un <td> — la regla original nunca
   coincidía (por eso "Talla"/"Color" salían al tamaño base del tema,
   22px en negrita, muy por encima del resto de etiquetas de la ficha). */
table.variations th.label,
table.variations td.label {
  display: block;
  padding: 0 0 0.4rem;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ha-smoke) !important;
  text-align: left;
}

table.variations td.value {
  display: block;
  padding: 0;
}

.variations select {
  width: 100%;
  max-width: 320px;
  background: var(--ha-charcoal) !important;
  color: var(--ha-white) !important;
  border: 1px solid var(--ha-hairline-strong) !important;
  border-radius: 2px !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.9375rem !important;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23B8A99A' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
}

.variations select:focus {
  outline: none;
  border-color: var(--ha-amber) !important;
}

.variations select option {
  background: var(--ha-charcoal);
  color: var(--ha-white);
}

/* WooCommerce trae su propia regla ".woocommerce div.product form.cart
   .reset_variations" con más especificidad y font-size en "em" (relativo
   al 22px base del tema = 18px reales) — de ahí que "Limpiar" saliera
   grande. Se fuerza con !important. */
a.reset_variations {
  display: inline-block !important;
  margin-top: 0.5rem !important;
  font-size: 0.75rem !important;
  color: var(--ha-amber) !important;
  text-decoration: underline;
}

/* Mismo tamaño que el precio general (arriba) para que no "salte" de
   tamaño al elegir talla/color — antes era mucho más pequeño (1.125rem
   contra 1.75rem), y el cambio de tamaño se notaba como un parpadeo. */
.woocommerce-variation-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ha-amber);
  margin-bottom: 1rem;
}

.woocommerce-variation-price .price {
  color: inherit;
}

.woocommerce-variation-availability {
  font-size: 0.8125rem;
  color: var(--ha-smoke);
  margin-bottom: 1rem;
}

.woocommerce-variation-availability .stock.in-stock {
  color: var(--ha-amber);
}

.woocommerce-variation-availability .stock.out-of-stock {
  color: #C0392B;
}

/* Pestañas Descripción / Valoraciones */
.woocommerce-tabs.wc-tabs-wrapper {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 2rem;
  margin-top: 3rem;
}

ul.tabs.wc-tabs {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  border-bottom: 1px solid var(--ha-hairline);
}

ul.tabs.wc-tabs li {
  margin: 0;
  padding: 0;
}

ul.tabs.wc-tabs li a {
  display: inline-block;
  padding: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ha-smoke);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}

ul.tabs.wc-tabs li.active a,
ul.tabs.wc-tabs li a:hover {
  color: var(--ha-white);
  border-bottom-color: var(--ha-amber);
}

.woocommerce-Tabs-panel {
  color: var(--ha-smoke);
  line-height: 1.8;
  font-size: 1rem;
  max-width: 760px;
}

.woocommerce-Tabs-panel h2 {
  color: var(--ha-white);
  font-size: 1.375rem;
  margin-bottom: 1.25rem;
}

.woocommerce-Tabs-panel ul {
  padding-left: 1.1rem;
}

.woocommerce-Tabs-panel ul li {
  margin-bottom: 0.4rem;
}

/* Productos relacionados: hereda las reglas de grid de arriba */
.related.products {
  max-width: 1280px;
  margin-inline: auto;
  padding: 3rem 2rem 1rem;
}

.related.products > h2 {
  font-family: 'Archivo Expanded', 'Archivo', sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--ha-white);
  margin-bottom: 1.5rem;
}

/* ----- Franja de confianza (inyectada en wp_footer) ----- */
.ha-trust-badges {
  background: var(--ha-charcoal);
  border-top: 1px solid var(--ha-hairline);
  border-bottom: 1px solid var(--ha-hairline);
}

.ha-trust-badges__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding: 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.ha-trust-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ha-smoke);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.ha-trust-badge__icon {
  flex-shrink: 0;
  color: var(--ha-amber);
}

/* ============================================================
   Carrito (bloque Cart de WooCommerce)
   ============================================================ */
.wp-block-woocommerce-cart {
  max-width: 1280px;
  margin-inline: auto !important;
  padding-inline: 2rem;
}

.wp-block-woocommerce-filled-cart-block {
  gap: 3rem !important;
}

.wc-block-cart-items {
  border: none !important;
}

.wc-block-cart-items__header,
.wc-block-cart-item {
  border-color: var(--ha-hairline) !important;
}

.wc-block-cart-items__header th,
.wc-block-cart-item__product,
.wc-block-cart-item__quantity,
.wc-block-cart-item__total {
  color: var(--ha-white) !important;
}

.wc-block-cart-items__header th {
  color: var(--ha-smoke) !important;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}

.wc-block-components-product-image img,
.wc-block-cart-item__image img {
  background: var(--ha-charcoal) !important;
  border-radius: 2px;
}

.wc-block-cart-item__product-name,
.wc-block-components-product-name {
  color: var(--ha-white) !important;
  font-weight: 600;
  text-decoration: none !important;
}

.wc-block-components-product-price .amount,
.wc-block-components-product-price__value {
  color: var(--ha-smoke) !important;
}

.wc-block-components-quantity-selector {
  background: var(--ha-charcoal) !important;
  border: 1px solid var(--ha-hairline-strong) !important;
  border-radius: 2px !important;
}

.wc-block-components-quantity-selector__input {
  background: transparent !important;
  color: var(--ha-white) !important;
}

.wc-block-components-quantity-selector__button {
  color: var(--ha-smoke) !important;
}

.wc-block-cart-item__remove-link,
.wc-block-components-product-metadata,
.wc-block-cart-item__remove-link button {
  color: var(--ha-amber) !important;
}

/* Resumen del pedido */
.wc-block-cart-order-summary,
.wp-block-woocommerce-cart-order-summary-block,
.wc-block-components-panel {
  background: var(--ha-charcoal) !important;
  border: 1px solid var(--ha-hairline) !important;
  border-radius: 2px;
  padding: 1.5rem !important;
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-cart-order-summary-heading__title {
  color: var(--ha-white) !important;
}

.wc-block-components-totals-item__description {
  color: var(--ha-smoke) !important;
}

.wc-block-cart__totals-title {
  font-family: 'Archivo Expanded', 'Archivo', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9375rem !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--ha-amber) !important;
  font-size: 1.25rem !important;
  font-weight: 700;
}

/* Cupón */
.wc-block-components-totals-coupon-link,
.wc-block-cart-order-summary-coupon-form-block a {
  color: var(--ha-amber) !important;
}

.wc-block-components-text-input input,
.wc-block-components-combobox input {
  background: var(--ha-black) !important;
  color: var(--ha-white) !important;
  border-color: var(--ha-hairline-strong) !important;
}

/* Botón finalizar compra */
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block a,
.wc-block-components-checkout-place-order-button {
  background: var(--ha-amber) !important;
  color: var(--ha-text-on-amber) !important;
  border-radius: 2px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.8125rem !important;
}

.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block a:hover {
  background: var(--ha-amber-hover) !important;
}

/* Cross-sells ("Novedades") dentro del carrito lleno o vacío */
.wc-block-cart-cross-sells-products,
.wp-block-woocommerce-product-new {
  margin-top: 3rem;
}

/* WooCommerce calcula el número de columnas dinámicamente según el
   ancho del contenedor (más estrecho en el carrito por la barra
   lateral de totales), lo que descuadraba la cuadrícula (3 en fila +
   1 suelta). Se fuerza un resultado fijo y predecible con !important
   más especificidad, ignorando ese cálculo. */
.wc-block-grid.has-4-columns .wc-block-grid__products,
.wc-block-cart-cross-sells-products .wc-block-grid__products,
.wp-block-woocommerce-product-new .wc-block-grid__products,
.wc-block-grid__products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
  list-style: none;
  padding: 0;
}

.wc-block-grid__products > .wc-block-grid__product {
  max-width: none !important;
  flex: none !important;
}

/* Estado de carrito vacío */
.wp-block-woocommerce-empty-cart-block {
  text-align: center;
  padding: 3rem 0 2rem;
}

.wc-block-cart__empty-cart__title {
  color: var(--ha-white) !important;
  font-family: 'Archivo Expanded', 'Archivo', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
}

.wp-block-woocommerce-empty-cart-block hr {
  border-color: var(--ha-hairline) !important;
  max-width: 200px;
  margin: 2rem auto;
}

.wp-block-woocommerce-empty-cart-block h2.wp-block-heading:not(.wc-block-cart__empty-cart__title) {
  color: var(--ha-white) !important;
  font-family: 'Archivo Expanded', 'Archivo', sans-serif;
  font-size: 1.375rem !important;
  margin-bottom: 1.5rem;
}

/* Botón "Ir a la tienda" inyectado por JS bajo el título de carrito vacío */
.ha-empty-cart-cta {
  display: inline-flex;
  margin: 1.5rem 0 1rem;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .wc-block-product-template,
  .wp-block-woocommerce-product-collection {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .ha-trust-badges__inner { grid-template-columns: repeat(2, 1fr); }
  .wc-block-grid.has-4-columns .wc-block-grid__products,
  .wc-block-grid__products { grid-template-columns: repeat(2, 1fr) !important; }
  .wp-block-woocommerce-filled-cart-block { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  .wc-block-product-template,
  .wp-block-woocommerce-product-collection,
  .wc-block-grid.has-4-columns .wc-block-grid__products,
  .wc-block-grid__products {
    grid-template-columns: 1fr !important;
  }
  .ha-trust-badges__inner { grid-template-columns: 1fr; }
  ul.tabs.wc-tabs { gap: 1.25rem; overflow-x: auto; }
}