/*
Theme Name: Hadadanza
Theme URI: https://hadadanza.com
Description: La tienda de Hadadanza, con el mismo mundo que hadadanza.com: oro sobre penumbra, Cinzel y Montserrat. Tema hijo.
Author: Hadadanza
Version: 1.0
Template: twentytwentyfour
Text Domain: hadadanza
*/

/* ==========================================================================
   EL CONTRATO DE ESTA TIENDA

   TESIS: la tienda es la siguiente sala de la web de la banda, no un
   escaparate genérico con el logo encima. Rechaza la rejilla de tarjetas
   claras e intercambiables de cualquier tienda: aquí el producto se enseña
   como una pieza expuesta en penumbra, con la luz cayéndole encima.

   MUNDO: el de hadadanza.com, sin cambiar una coma. Casi negro cálido
   (#0a0705) con brasas, oro (#e9b44c) para lo que manda, Cinzel para los
   títulos, Montserrat para leer. Filetes de oro al 20 %, nunca cajas
   grises. Reconocible aunque le quites todo el texto.

   HISTORIA: quien llega ya conoce a la banda. Entiende en un vistazo qué
   hay, cuánto cuesta y en qué talla, y compra sin salir del disco.

   PRIMER GOLPE DE VISTA: barra fija con el logotipo y el carrito a la
   derecha; debajo, el título en Cinzel con su filete de oro y la rejilla
   de piezas a tres columnas, cada una sobre su plancha oscura.

   FORMA: la ficha de catálogo de una tienda de merchandising, llevada al
   mundo de la banda. El sistema entero se hereda de la web pública.
   ========================================================================== */

/* ==========================================================================
   1. LOS TOKENS — los mismos de hadadanza.com, sin inventar ninguno
   ========================================================================== */
:root {
  --bg:        #0a0705;
  --bg-2:      #130c07;
  --bg-3:      #1b1109;
  --oro:       #e9b44c;
  --oro-alto:  #ffdc94;
  --oro-hondo: #a97c2a;
  --brasa:     #e2571f;
  --rojo:      #a3221a;
  --ink:       #f5ede1;
  --ink-2:     #c9b8a1;
  --linea:     rgba(233,180,76,.20);
  --linea-2:   rgba(245,237,225,.10);
  --sombra:    0 26px 60px -24px rgba(0,0,0,.95);
  --r:         14px;
  --paso:      clamp(2rem, 5vw, 4.5rem);
  --sale:      cubic-bezier(.2,.8,.2,1);
}

/* ==========================================================================
   2. LA BASE
   ========================================================================== */
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
}

/* Dos brasas muy tenues detrás de todo, para que el negro no sea un plano
   muerto. Las mismas que en la web de la banda. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 12% -8%,  rgba(226,87,31,.10), transparent 60%),
    radial-gradient(52rem 38rem at 88% 108%, rgba(233,180,76,.07), transparent 62%);
}
.wp-site-blocks { position: relative; z-index: 1; }

h1, h2, h3, h4, h5, h6,
.wp-block-post-title,
.woocommerce-loop-product__title,
.wc-block-components-product-name {
  font-family: 'Cinzel', 'Times New Roman', serif;
  letter-spacing: .02em;
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
}

p { max-width: 68ch; }

a { color: var(--oro-alto); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--oro); }

/* Las superficies que no dibujé yo también son del diseño */
::selection { background: var(--oro); color: #150d04; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 6px; }
* { scrollbar-color: var(--oro-hondo) #120c07; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #120c07; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--oro-hondo), #6a4a15);
  border-radius: 99px; border: 3px solid #120c07;
}
::-webkit-scrollbar-thumb:hover { background: var(--oro); }
input, textarea, select { caret-color: var(--oro); }

/* Las cifras, siempre alineadas: un precio es una medida */
.price, .woocommerce-Price-amount, .wc-block-components-totals-item__value,
.wc-block-formatted-money-amount, .quantity input {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   3. LA BARRA DE ARRIBA
   ========================================================================== */
.hd-barra {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  background: linear-gradient(180deg, rgba(10,7,5,.92), rgba(10,7,5,.62));
  border-bottom: 1px solid var(--linea);
}
.hd-barra > .wp-block-group { padding-block: .7rem; }

/* El isotipo, no el logotipo entero: a 42 px el logo de fuego es un borrón.
   Es el mismo gesto que la barra de hadadanza.com. */
.hd-marca { align-items: center; }
.hd-isotipo { margin: 0; line-height: 0; flex: none; }
.hd-isotipo img { display: block; width: 42px; height: 42px; object-fit: contain; }
.hd-barra .wp-block-site-logo img { display: block; height: auto; }
.hd-rotulo { line-height: 1.3; }

/* El rótulo de al lado del logo: dice dónde estás, no grita */
.hd-rotulo {
  font-family: 'Montserrat', sans-serif;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-2); margin: 0;
}
.hd-rotulo a { color: inherit; text-decoration: none; }
.hd-rotulo a:hover { color: var(--oro); }

/* Los enlaces, con el filete de oro que se despliega al pasar: el mismo
   gesto que la web de la banda, para que sea la misma casa */
.hd-barra .wp-block-navigation__container { gap: clamp(.9rem, 2vw, 1.7rem); }
.hd-barra .wp-block-navigation-item__content {
  position: relative;
  font-size: .84rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; padding-block: .35rem;
}
.hd-barra .wp-block-navigation-item__content:hover,
.hd-barra .current-menu-item > .wp-block-navigation-item__content { color: var(--ink); }
.hd-barra .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--oro); transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--sale);
}
.hd-barra .wp-block-navigation-item__content:hover::after,
.hd-barra .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }

/* El menú plegado del móvil: oscuro como todo lo demás, no una sábana blanca */
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--bg) !important; color: var(--ink) !important;
  padding: 1.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: 1rem; color: var(--ink);
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { color: var(--ink); }

/* La cuenta y el carrito, el mismo botón: WooCommerce planta el icono de la
   cuenta en la barra por su cuenta, así que se le da la misma ropa en vez de
   dejarlo flotando como un pegote del tema de serie. */
.hd-barra .wp-block-woocommerce-customer-account a,
.hd-barra .wc-block-mini-cart__button {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 2.5rem; padding: .5rem .85rem; border-radius: 99px;
  border: 1px solid var(--linea); background: rgba(233,180,76,.06);
  color: var(--ink); text-decoration: none;
  transition: border-color .25s var(--sale), background .25s var(--sale), color .25s var(--sale);
}
.hd-barra .wp-block-woocommerce-customer-account a:hover {
  border-color: var(--oro-hondo); background: rgba(233,180,76,.14); color: var(--oro-alto);
}
.hd-barra .wc-block-customer-account__account-icon { width: 1.35rem; height: 1.35rem; }

.hd-barra .wc-block-mini-cart__button {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .85rem; border-radius: 99px;
  border: 1px solid var(--linea); background: rgba(233,180,76,.06);
  color: var(--ink); transition: border-color .25s var(--sale), background .25s var(--sale);
}
.hd-barra .wc-block-mini-cart__button:hover {
  border-color: var(--oro-hondo); background: rgba(233,180,76,.14);
}
.hd-barra .wc-block-mini-cart__badge {
  background: var(--oro); color: #150d04; font-weight: 700;
  font-size: .72rem; min-width: 1.25rem; height: 1.25rem;
  display: grid; place-items: center; border-radius: 99px; padding-inline: .3rem;
}
.hd-barra .wc-block-mini-cart__icon { fill: currentColor; }

/* ==========================================================================
   4. LOS BOTONES — el de oro es el que manda, y solo hay uno por pantalla
   ========================================================================== */
.wp-block-button__link,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce .button.alt, .woocommerce #respond input#submit,
.wc-block-components-button,
.wp-element-button {
  font-family: 'Montserrat', sans-serif;
  font-size: .82rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .82rem 1.6rem; border-radius: 99px; border: 0;
  background: linear-gradient(180deg, var(--oro-alto), var(--oro) 58%, var(--oro-hondo));
  color: #150d04; cursor: pointer; text-decoration: none;
  box-shadow: 0 10px 26px -14px rgba(233,180,76,.75);
  transition: transform .22s var(--sale), box-shadow .22s var(--sale), filter .22s var(--sale);
}
.wp-block-button__link:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce .button.alt:hover,
.wc-block-components-button:hover, .wp-element-button:hover {
  transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: 0 16px 34px -14px rgba(233,180,76,.85);
  color: #150d04;
}
.wp-block-button__link:active, .woocommerce a.button:active,
.woocommerce button.button:active, .wc-block-components-button:active { transform: translateY(0); }

.woocommerce a.button:disabled, .woocommerce button.button:disabled,
.woocommerce button.button.disabled, .wc-block-components-button:disabled,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.wc-variation-selection-needed,
.woocommerce button.button.alt.wc-variation-selection-needed {
  background: rgba(245,237,225,.10); color: rgba(245,237,225,.45);
  box-shadow: none; cursor: not-allowed; transform: none; filter: none;
}

/* El secundario: solo el filete, para que nunca compita con el de oro.
   Ojo con quién entra aquí: el botón de finalizar la compra es de oro, y una
   regla de más lo dejó apagado durante media tarde. */
.woocommerce a.button.wc-backward,
.woocommerce-message a.button, .woocommerce-error a.button, .woocommerce-info a.button,
.wc-block-components-button.outlined {
  background: transparent; color: var(--oro-alto);
  border: 1px solid var(--linea); box-shadow: none;
}
.woocommerce a.button.wc-backward:hover,
.woocommerce-message a.button:hover, .woocommerce-error a.button:hover,
.woocommerce-info a.button:hover,
.wc-block-components-button.outlined:hover {
  background: rgba(233,180,76,.10); border-color: var(--oro-hondo);
  color: var(--oro-alto); filter: none;
}

/* ==========================================================================
   5. LOS CAMPOS — oscuros, con el oro solo cuando tienes el dedo encima
   ========================================================================== */
input[type=text], input[type=email], input[type=tel], input[type=url],
input[type=password], input[type=search], input[type=number], input[type=date],
textarea, select,
.wc-block-components-text-input input, .wc-block-components-select__select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .quantity input[type=number], .woocommerce .quantity .qty {
  width: 100%;
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--linea-2);
  border-radius: 10px;
  padding: .72rem .9rem;
  font-family: inherit; font-size: .95rem; line-height: 1.4;
  transition: border-color .2s var(--sale), box-shadow .2s var(--sale), background .2s var(--sale);
}
input:focus, textarea:focus, select:focus,
.wc-block-components-text-input input:focus {
  outline: none; border-color: var(--oro-hondo);
  background: var(--bg-3);
  box-shadow: 0 0 0 3px rgba(233,180,76,.16);
}
::placeholder { color: rgba(201,184,161,.65); }

/* El desplegable de la talla era una caja negra con letras negras dentro:
   no se leía nada. Flecha dibujada, no un glifo de teclado. */
select, .wc-block-components-select__select,
.woocommerce div.product form.cart .variations select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9b44c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 1.05rem;
  cursor: pointer;
}
select option { background: var(--bg-2); color: var(--ink); }

label, .wc-block-components-text-input label {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}

/* ==========================================================================
   6. LA PORTADA Y EL CATÁLOGO
   ========================================================================== */
.woocommerce-products-header,
.wp-block-query-title, .wp-block-post-title.has-text-align-left {
  margin-bottom: 1.2rem;
}
.woocommerce-products-header__title,
body.archive .wp-block-query-title,
body.post-type-archive-product .wp-block-post-title,
.wp-block-page-title {
  font-size: clamp(2.4rem, 6vw, 4rem);
  color: var(--ink);
  margin: 0 0 .5rem;
}

/* El filete de oro bajo el título: el sello de la casa */
.hd-filete {
  width: 5.5rem; height: 2px; border: 0; margin: 0 0 1.6rem;
  background: linear-gradient(90deg, var(--oro), transparent);
}

.woocommerce-result-count, .woocommerce-ordering select {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2);
}
.woocommerce-result-count { margin: 0; }
.woocommerce-ordering select { width: auto; min-width: 14rem; }

/* La rejilla */
/* Tres columnas, y punto. WooCommerce trae su propia rejilla con un
   `auto-fill` que depende del ancho y acaba dando dos: aquí se decide. */
.woocommerce ul.products,
.wp-block-woocommerce-product-template,
.wc-block-product-template,
.wc-block-product-template__responsive[class*="columns-"] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(1rem, 2vw, 1.8rem) !important;
  margin: 0; padding: 0; list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; }

/* La pieza expuesta: plancha oscura, filete de oro y la luz encima */
.woocommerce ul.products li.product,
.wc-block-product-template .wc-block-product,
.wp-block-woocommerce-product-template .wc-block-product {
  position: relative;
  display: flex; flex-direction: column;
  width: auto !important; float: none !important; margin: 0 !important;
  padding: 0; overflow: hidden;
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border: 1px solid var(--linea-2);
  border-radius: var(--r);
  transition: transform .3s var(--sale), border-color .3s var(--sale), box-shadow .3s var(--sale);
}
.woocommerce ul.products li.product:hover,
.wc-block-product-template .wc-block-product:hover {
  transform: translateY(-4px);
  border-color: var(--oro-hondo);
  box-shadow: 0 24px 50px -28px rgba(0,0,0,.95), 0 0 0 1px rgba(233,180,76,.18);
}

.woocommerce ul.products li.product a img,
.wc-block-product-template .wc-block-components-product-image img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  margin: 0; border-radius: 0;
  background: #0f0a06;
  transition: transform .5s var(--sale);
}
.woocommerce ul.products li.product:hover a img,
.wc-block-product-template .wc-block-product:hover .wc-block-components-product-image img {
  transform: scale(1.04);
}
/* La imagen se funde con la plancha por abajo, para que el nombre no
   parezca pegado a un recorte */
.woocommerce ul.products li.product > a:first-of-type,
.wc-block-components-product-image { position: relative; display: block; overflow: hidden; }
.woocommerce ul.products li.product > a:first-of-type::after,
.wc-block-components-product-image::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(180deg, transparent, rgba(10,7,5,.85));
  pointer-events: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-product-template .wc-block-components-product-name {
  font-size: 1.02rem; line-height: 1.3;
  color: var(--ink); text-decoration: none;
  padding: 1rem 1.15rem .35rem; margin: 0;
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: var(--oro-alto); }

.woocommerce ul.products li.product .price,
.wc-block-product-template .wc-block-components-product-price {
  display: block;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.12rem;
  color: var(--oro); padding: 0 1.15rem .95rem; margin: 0;
}
.woocommerce ul.products li.product .price del,
.wc-block-components-product-price del {
  color: var(--ink-2); opacity: .6; font-size: .85em; font-weight: 500; margin-right: .4rem;
}
.woocommerce ul.products li.product .price ins,
.wc-block-components-product-price ins { text-decoration: none; }

.woocommerce ul.products li.product .button,
.wc-block-product-template .wp-block-button__link {
  margin: auto 1.15rem 1.15rem; text-align: center;
}

/* El sello de oferta, arriba a la izquierda */
.woocommerce span.onsale,
.wc-block-components-product-sale-badge {
  position: absolute; top: .9rem; left: .9rem; right: auto; z-index: 2;
  min-height: 0; min-width: 0; padding: .3rem .75rem; margin: 0;
  border-radius: 99px; border: 1px solid var(--oro-hondo);
  background: linear-gradient(180deg, var(--oro-alto), var(--oro));
  color: #150d04; font-family: 'Montserrat', sans-serif;
  font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  line-height: 1.5; box-shadow: 0 6px 18px -8px rgba(0,0,0,.9);
}

@media (max-width: 980px) {
  .woocommerce ul.products, .wp-block-woocommerce-product-template,
  .wc-block-product-template,
  .wc-block-product-template__responsive[class*="columns-"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 560px) {
  .woocommerce ul.products, .wp-block-woocommerce-product-template,
  .wc-block-product-template,
  .wc-block-product-template__responsive[class*="columns-"] {
    grid-template-columns: 1fr !important; gap: 1rem !important;
  }
}

/* ==========================================================================
   7. LA FICHA DEL PRODUCTO
   ========================================================================== */
.woocommerce-breadcrumb, .wp-block-woocommerce-breadcrumbs {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 2rem;
}
.woocommerce-breadcrumb a { color: var(--ink-2); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--oro); }

/* La galería: un marco, no una foto suelta en medio de la nada.
   El `opacity:1` es un seguro: WooCommerce la deja invisible hasta que
   arranca su JavaScript, y si ese JavaScript falla no se ve el producto. */
.woocommerce div.product div.images,
.wp-block-woocommerce-product-image-gallery { opacity: 1 !important; }
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
  border: 1px solid var(--linea); border-radius: var(--r);
  overflow: hidden; background: var(--bg-2); box-shadow: var(--sombra);
}
.woocommerce div.product div.images img { display: block; width: 100%; }
.woocommerce div.product div.images .flex-control-thumbs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem;
  margin: .8rem 0 0; padding: 0; list-style: none;
}
.woocommerce div.product div.images .flex-control-thumbs li { margin: 0; width: auto; }
.woocommerce div.product div.images .flex-control-thumbs img {
  border: 1px solid var(--linea-2); border-radius: 8px; opacity: .55;
  transition: opacity .25s var(--sale), border-color .25s var(--sale);
}
.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs .flex-active {
  opacity: 1; border-color: var(--oro-hondo);
}
.woocommerce div.product .woocommerce-product-gallery__trigger {
  background: rgba(10,7,5,.75); border: 1px solid var(--linea);
  border-radius: 99px; color: var(--oro); top: 1rem; right: 1rem;
}

.woocommerce div.product .product_title,
.wp-block-woocommerce-product-title, body.single-product .wp-block-post-title {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  color: var(--ink); margin: 0 0 .9rem;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.wp-block-woocommerce-product-price {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--oro);
  margin: 0 0 1.4rem;
}
.woocommerce div.product p.price del { color: var(--ink-2); opacity: .6; font-size: .62em; }
.woocommerce div.product p.price ins { text-decoration: none; }

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--ink-2); max-width: 54ch; margin-bottom: 1.8rem;
}

/* Elegir talla: la fila de la variación, legible y con sitio */
.woocommerce div.product form.cart .variations {
  width: 100%; border: 0; margin: 0 0 1.4rem;
  display: grid; gap: .55rem;
}
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
  display: block; width: 100%; padding: 0; border: 0; background: none;
}
.woocommerce div.product form.cart .variations label {
  display: block; margin-bottom: .4rem; color: var(--ink-2);
}
.woocommerce div.product form.cart .variations select { max-width: 22rem; }
.woocommerce div.product form.cart .reset_variations {
  display: inline-block; margin-top: .5rem;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.woocommerce div.product form.cart .woocommerce-variation-price {
  margin-bottom: 1rem; font-family: 'Cinzel', serif; font-size: 1.3rem; color: var(--oro);
}
.woocommerce div.product form.cart .woocommerce-variation-availability p { margin: 0 0 1rem; color: var(--ink-2); }

.woocommerce div.product form.cart {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
}
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .woocommerce-variation { flex: 1 0 100%; }
.woocommerce div.product form.cart .quantity { margin: 0; }
.woocommerce div.product form.cart .quantity input { width: 5rem; text-align: center; }
.woocommerce div.product form.cart .button { flex: 0 1 auto; }

/* -------- Las tallas, en botones --------------------------------------- */
.woocommerce div.product form.cart .variations select.hd-espejo {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.hd-elegida {
  margin-left: .5rem; color: var(--oro); font-weight: 700; letter-spacing: .08em;
}
.hd-tallas { display: flex; flex-wrap: wrap; gap: .5rem; }
.hd-talla {
  min-width: 3.4rem; padding: .65rem .9rem;
  font-family: 'Montserrat', sans-serif; font-size: .85rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); background: var(--bg-2);
  border: 1px solid var(--linea-2); border-radius: 10px;
  cursor: pointer;
  transition: border-color .2s var(--sale), color .2s var(--sale),
              background .2s var(--sale), transform .2s var(--sale);
}
.hd-talla:hover { border-color: var(--oro-hondo); color: var(--ink); transform: translateY(-1px); }
.hd-talla.elegida {
  color: #150d04; border-color: var(--oro);
  background: linear-gradient(180deg, var(--oro-alto), var(--oro));
  box-shadow: 0 8px 20px -12px rgba(233,180,76,.9);
}
/* Una talla que no se puede pedir se dice con la raya y con el texto, no
   solo apagándola: apagada a secas parece un fallo de la página. */
.hd-talla.no-hay {
  cursor: not-allowed; opacity: .4; text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.hd-talla.no-hay:hover { transform: none; border-color: var(--linea-2); color: var(--ink-2); }
.hd-talla:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

.hd-pista {
  flex: 1 0 100%; margin: .2rem 0 0;
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--oro-alto);
}
.hd-pista[hidden] { display: none; }

/* -------- Las tres promesas -------------------------------------------- */
.hd-promesas {
  list-style: none; margin: 1.6rem 0 0; padding: 1.2rem 0 0;
  border-top: 1px solid var(--linea-2);
  display: grid; gap: .7rem;
}
.hd-promesas li {
  display: flex; align-items: center; gap: .7rem;
  margin: 0; font-size: .86rem; color: var(--ink-2); line-height: 1.4;
}
.hd-promesas svg { width: 1.15rem; height: 1.15rem; flex: none; color: var(--oro); }

.hd-guia { margin: 1rem 0 0; }
.hd-guia a {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--oro-alto); text-decoration: none;
  border-bottom: 1px solid var(--linea); padding-bottom: .2rem;
}
.hd-guia a:hover { color: var(--oro); border-color: var(--oro-hondo); }
.hd-guia svg { width: 1.1rem; height: 1.1rem; }

.woocommerce div.product .product_meta {
  margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--linea-2);
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.woocommerce div.product .product_meta a { color: var(--oro-alto); text-decoration: none; }
.woocommerce div.product .product_meta > span { display: block; margin-bottom: .35rem; }
.hd-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
.hd-meta > span { margin: 0 !important; }
.hd-meta b { color: var(--ink-2); font-weight: 700; margin-right: .35rem; }

/* Las pestañas */
.woocommerce div.product .woocommerce-tabs { margin-top: var(--paso); }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex; flex-wrap: wrap; gap: 1.8rem;
  margin: 0 0 2rem; padding: 0 0 0; list-style: none;
  border-bottom: 1px solid var(--linea-2);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0; padding: 0; background: none; border: 0; border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block; padding: .5rem 0 .9rem; position: relative;
  font-family: 'Montserrat', sans-serif; font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--ink); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--oro); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--oro);
}
.woocommerce div.product .woocommerce-tabs .panel { margin: 0; padding: 0; }
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { display: none; }
.woocommerce div.product .woocommerce-tabs .panel img {
  border-radius: var(--r); border: 1px solid var(--linea-2); margin-top: 1.2rem;
}
.woocommerce table.shop_attributes {
  width: 100%; border: 0; border-collapse: collapse; max-width: 36rem;
}
.woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td {
  border: 0; border-bottom: 1px solid var(--linea-2); padding: .7rem 0; background: none;
}
.woocommerce table.shop_attributes th { color: var(--ink-2); font-weight: 700; }
.woocommerce table.shop_attributes td { color: var(--ink); font-style: normal; }
.woocommerce table.shop_attributes td p { margin: 0; }

.related.products, .upsells.products, .wc-block-related-products {
  margin-top: var(--paso); padding-top: var(--paso);
  border-top: 1px solid var(--linea-2);
}
.related.products > h2, .upsells.products > h2, .wc-block-related-products h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0 0 1.6rem;
}

/* En pantalla ancha la foto se queda quieta mientras se lee la ficha: la
   columna de comprar es más larga y si no, debajo de la foto queda un
   agujero negro de media pantalla. */
@media (min-width: 821px) {
  body.single-product .wp-block-columns > .wp-block-column:first-child {
    position: sticky; top: 5.5rem; align-self: start;
  }
}

@media (max-width: 780px) {
  .woocommerce div.product form.cart .button { flex: 1 1 100%; }
}

/* ==========================================================================
   8. EL CARRITO Y LA COMPRA — aquí manda la tarea, no el adorno
   ========================================================================== */
.wc-block-cart, .wc-block-checkout, .woocommerce-cart-form { color: var(--ink); }

.wc-block-cart-items, .woocommerce table.shop_table {
  width: 100%; border-collapse: collapse; border: 0; border-radius: 0;
}
.wc-block-cart-items th, .woocommerce table.shop_table th {
  font-family: 'Montserrat', sans-serif; font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
  border: 0; border-bottom: 1px solid var(--linea); padding: .9rem 0; text-align: left;
}
.wc-block-cart-items td, .woocommerce table.shop_table td {
  border: 0; border-bottom: 1px solid var(--linea-2);
  padding: 1.1rem 0; background: none; vertical-align: middle;
}
.wc-block-cart-item__image img, .woocommerce table.shop_table td.product-thumbnail img {
  width: 76px; height: 76px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--linea-2);
}
.wc-block-components-product-name { color: var(--ink); text-decoration: none; font-size: 1rem; }
.wc-block-cart-item__total, .wc-block-components-product-price {
  font-family: 'Cinzel', serif; color: var(--oro); font-weight: 700;
}

.wc-block-components-sidebar, .cart_totals, .wc-block-components-order-summary {
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border: 1px solid var(--linea); border-radius: var(--r);
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
  box-shadow: var(--sombra);
}
.cart_totals h2, .wc-block-components-totals-wrapper + h2 {
  font-size: 1.1rem; margin: 0 0 1rem;
}
.wc-block-components-totals-item, .cart_totals table th, .cart_totals table td {
  border: 0; padding-block: .5rem; color: var(--ink-2); background: none;
}
.wc-block-components-totals-footer-item,
.cart_totals .order-total th, .cart_totals .order-total td {
  border-top: 1px solid var(--linea) !important;
  padding-top: .9rem !important; color: var(--ink) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.cart_totals .order-total .amount {
  font-family: 'Cinzel', serif; font-size: 1.4rem; color: var(--oro);
}

.wc-block-components-panel, .wc-block-checkout__form,
.woocommerce-checkout #customer_details, .woocommerce-checkout-review-order {
  color: var(--ink);
}
.wc-block-checkout__form .wc-block-components-checkout-step {
  border: 0; border-top: 1px solid var(--linea-2);
  padding-top: 1.6rem; margin-top: 1.6rem;
}
.wc-block-components-checkout-step__title, .woocommerce-billing-fields h3 {
  font-family: 'Cinzel', serif; font-size: 1.15rem; color: var(--ink);
}
.wc-block-components-checkout-step__description,
.wc-block-components-checkout-step__heading-content { color: var(--ink-2); }
.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option {
  border: 1px solid var(--linea-2); border-radius: 10px;
  padding: .85rem 1rem; margin-bottom: .6rem; background: var(--bg-2);
}
.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option:has(input:checked) {
  border-color: var(--oro-hondo); background: rgba(233,180,76,.07);
}
.wc-block-components-checkbox__input, input[type=checkbox], input[type=radio] {
  accent-color: var(--oro); width: auto;
}

.woocommerce-info, .woocommerce-message, .woocommerce-error,
.wc-block-components-notice-banner {
  display: flex; align-items: flex-start; gap: .75rem;
  background: var(--bg-2); border: 1px solid var(--linea);
  border-radius: var(--r); padding: 1rem 1.2rem; margin: 0 0 1.6rem;
  color: var(--ink); list-style: none;
}
.woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before { content: none; }
.woocommerce-message { border-color: var(--oro-hondo); background: rgba(233,180,76,.08); }
.woocommerce-error, .wc-block-components-notice-banner.is-error {
  border-color: rgba(163,34,26,.55); background: rgba(163,34,26,.14);
}
.wc-block-components-notice-banner svg { fill: var(--oro); flex: none; }

/* Los dos botones que cierran la compra, de oro y sin discusión */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.contained {
  width: 100%;
  background: linear-gradient(180deg, var(--oro-alto), var(--oro) 58%, var(--oro-hondo)) !important;
  color: #150d04 !important; border: 0 !important;
  box-shadow: 0 10px 26px -14px rgba(233,180,76,.75);
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover { filter: brightness(1.06); }

/* Encima del modo oscuro de WooCommerce: que el filete y el foco sean de oro
   y no el blanco al 40 % que trae de serie. */
.has-dark-controls .wc-block-components-text-input input,
.has-dark-controls .wc-block-components-select .wc-block-components-select__select,
.has-dark-controls .wc-block-components-combobox input {
  background-color: var(--bg-2) !important;
  border-color: var(--linea-2) !important;
  color: var(--ink) !important;
  border-radius: 10px !important;
}
.has-dark-controls .wc-block-components-text-input input:focus,
.has-dark-controls .wc-block-components-select .wc-block-components-select__select:focus,
.has-dark-controls .wc-block-components-combobox input:focus {
  border-color: var(--oro-hondo) !important;
  box-shadow: 0 0 0 3px rgba(233,180,76,.16);
}
.has-dark-controls .wc-block-components-text-input label { color: var(--ink-2); }
.has-dark-controls .wc-block-components-text-input.is-active label { color: var(--oro-alto); }
.has-dark-controls .wc-block-components-validation-error { color: #f0a08f; }

/* Cómo lo quieres recibir: dos fichas, no dos pestañas de navegador */
.wc-block-checkout__shipping-method-container { gap: .6rem; }
.wc-block-checkout__shipping-method-option {
  background: var(--bg-2) !important;
  border: 1px solid var(--linea-2) !important;
  border-radius: 12px !important;
  color: var(--ink) !important;
  padding: 1rem !important;
}
.wc-block-checkout__shipping-method-option--selected {
  border-color: var(--oro-hondo) !important;
  background: rgba(233,180,76,.10) !important;
  color: var(--ink) !important;
}
.wc-block-checkout__shipping-method-option-title { color: inherit; font-weight: 700; }
.wc-block-checkout__shipping-method-option svg { fill: currentColor; }

/* El título de la página, a la altura del contenido y no a media calle */
body.woocommerce-cart .wp-block-post-title,
body.woocommerce-checkout .wp-block-post-title {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto; width: 100%;
}

.woocommerce-cart .cart-empty, .wc-block-cart__empty-cart__title {
  font-family: 'Cinzel', serif; font-size: 1.5rem; color: var(--ink);
}

/* ==========================================================================
   9. EL PIE
   ========================================================================== */
.hd-pie {
  margin-top: var(--paso);
  padding: clamp(2.5rem, 5vw, 4rem) 0 2.5rem;
  border-top: 1px solid var(--linea);
  background: linear-gradient(180deg, transparent, rgba(27,17,9,.75));
}
.hd-pie .wp-block-site-logo img { width: 170px; max-width: 60%; }
.hd-pie h2 {
  font-family: 'Montserrat', sans-serif; font-size: .68rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--oro);
  margin: 0 0 .9rem;
}
.hd-pie p { margin: 0; }
.hd-pie .hd-pie-nota {
  font-size: .76rem; letter-spacing: .08em; color: var(--ink-2); max-width: 46ch;
}
.hd-pie a { color: var(--ink-2); text-decoration: none; }
.hd-pie a:hover { color: var(--oro); }
.hd-pie .wp-block-navigation {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
}
.hd-firma {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linea-2);
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(201,184,161,.55);
}

/* ==========================================================================
   10. LO QUE SE CUELA DEL TEMA DE SERIE
   ========================================================================== */
.wp-block-group.has-base-background-color { background: transparent !important; }
.wp-block-post-content > * { margin-block: 1.1rem; }
.woocommerce .woocommerce-ordering, .woocommerce .woocommerce-result-count { float: none; }
.woocommerce-notices-wrapper:empty { display: none; }
figure { margin: 0; }

/* La paginación */
.woocommerce nav.woocommerce-pagination ul,
.wp-block-query-pagination { border: 0; display: flex; gap: .4rem; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: grid; place-items: center; min-width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--linea-2); border-radius: 8px;
  color: var(--ink-2); text-decoration: none; background: none;
}
.woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--oro-hondo); color: var(--oro); }
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--oro); border-color: var(--oro); color: #150d04; font-weight: 700;
}

/* Que nadie se quede sin saber dónde está el foco */
.woocommerce a:focus-visible, .woocommerce button:focus-visible,
.wc-block-components-button:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

/* -------------------------------------------------------------------------
   El móvil.

   La plantilla de la ficha trae dos columnas con `flex-basis:512px`, y en un
   teléfono de 390 eso empuja la página 120 px fuera de la pantalla: el texto
   se corta por la derecha y no hay forma de leerlo. Aquí se sueltan.
   ------------------------------------------------------------------------- */
img, iframe, video, table { max-width: 100%; }

/* El cajón del carrito se pinta dentro de la página y mide 480 px. Mientras
   no arranca su JavaScript empuja todo hacia la derecha y en un teléfono el
   texto se sale por el borde. Escondido es escondido. */
:root { --drawer-width: min(480px, 100vw); }
.wc-block-components-drawer__screen-overlay--is-hidden { display: none !important; }
.wc-block-mini-cart__drawer { max-width: 100vw; }

/* Y el último seguro: nada se sale de la página por los lados */
.wp-site-blocks, .woocommerce-page .wp-site-blocks { overflow-x: clip; }

@media (max-width: 820px) {
  /* En el móvil, los bloques «anchos» de WordPress se salen por la derecha:
     se les quitan los tirones de margen y se quedan dentro de la página.
     La barra y el pie se libran, que esos sí van de lado a lado. */
  .has-global-padding > .alignwide,
  .has-global-padding > .alignfull:not(.hd-barra):not(.hd-pie) {
    margin-left: 0 !important; margin-right: 0 !important;
    width: 100% !important; max-width: 100% !important;
  }
  body.single-product .wp-block-columns { flex-wrap: wrap !important; }
  .woocommerce-breadcrumb { white-space: normal; overflow-wrap: anywhere; }
  .woocommerce .woocommerce-ordering select { min-width: 0; width: 100%; }
  .woocommerce-products-header + * .woocommerce-result-count { width: 100%; }
  body.single-product .wp-block-column {
    flex-basis: 100% !important; min-width: 0 !important; flex-grow: 1;
  }
  .woocommerce div.product form.cart .variations select { max-width: 100%; }
  .hd-promesas li { font-size: .82rem; }
  .woocommerce-breadcrumb { font-size: .68rem; letter-spacing: .1em; }
  .woocommerce div.product .woocommerce-tabs ul.tabs { gap: 1.1rem; }
}

@media (max-width: 480px) {
  .hd-barra .hd-rotulo { display: none; }
  .woocommerce div.product form.cart .quantity input { width: 4.2rem; }
  .hd-talla { min-width: 3rem; padding: .6rem .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}