/* woocommerce.css — capa base de la tienda (scaffold Plan 01).
 *
 * Última capa CSS: tokens → base → layout → components → woocommerce.
 * Solo se encola en contextos WooCommerce (shop/cart/checkout/account).
 * Regla dura: SOLO var(--token) y la escala de 8 puntos; nunca hex ni px crudos.
 * Los planes 02-05 rellenan las secciones comentadas más abajo.
 */

/* Override de las variables nativas de WooCommerce a tokens del tema. */
.woocommerce {
  --wc-content-bg: var(--gray-900);
  --wc-form-border-color: var(--gray-600);
  --wc-primary: var(--accent);
}

/* Fondo de página de la tienda. */
.woocommerce,
.woocommerce-page {
  background-color: var(--black);
}

/* Nav-clearance: el .nav del tema es `position: fixed; top: 0` (components.css),
 * así que en las páginas WooCommerce basadas en page.php (carrito, mi-cuenta,
 * checkout) el contenido de .site-main queda tapado por el nav fijo (~76-80px de
 * alto). Las páginas de marketing (Fase 4) lo libran con heroes full-height;
 * estas no. Empujamos .site-main 5rem (valor de layout documentado, consistente
 * con el sticky `top: 5rem` de Plan 05-03). */
body.woocommerce-page .site-main,
body.woocommerce-cart .site-main,
body.woocommerce-account .site-main,
body.woocommerce-checkout .site-main {
  padding-top: 5rem;
}

/* ── Shop / archive (Plan 02) ───────────────────────────────────────────── */

/* Hero del shop — muro de arena: titular condensado peso 900 a escala de póster,
 * anclado a la izquierda, con divisor inferior. */
.rcio-shop-hero {
  padding-block: var(--space-2xl) var(--space-xl);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--gray-800);
}
.rcio-shop-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
}
.rcio-shop-hero__subtitle {
  max-width: 48ch;
  margin: var(--space-md) 0 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray-300);
}

/* Pills de categoría (full-width, sin sidebar). */
.rcio-shop-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}
.rcio-shop-pill {
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gray-300);
  background: transparent;
  border: 1px solid var(--gray-700);
  border-radius: 0;
  text-decoration: none;
  transition:
    color 200ms var(--ease-out-expo),
    border-color 200ms var(--ease-out-expo);
}
.rcio-shop-pill:hover {
  color: var(--white);
  border-color: var(--gray-400);
}
.rcio-shop-pill.is-active {
  color: var(--black);
  background: var(--accent);
  border-color: var(--accent);
}

/* Barra de conteo de resultados + selector de orden (hooks nativos WC). */
.rcio-shop .woocommerce-result-count {
  float: left;
  margin-bottom: var(--space-lg);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--gray-400);
}
.rcio-shop .woocommerce-ordering {
  float: right;
  margin-bottom: var(--space-lg);
}
.rcio-shop .woocommerce-ordering select {
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  color: var(--white);
  background: var(--gray-800);
  border: 1px solid var(--gray-600);
  border-radius: 0;
}

/* Grid del shop: tiles gris-900 con aire entre ellas (el negro de la página separa). */
.rcio-product-grid {
  clear: both;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
/* Escala estándar del tema: tablet ≤1024 (2 col) → móvil ≤480 (1 col). Ver
 * components.css para la nota de escala 480/768/1024 (+782 admin-bar). */
@media (max-width: 1024px) {
  .rcio-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .rcio-product-grid {
    grid-template-columns: 1fr;
  }
}

/* Product card. */
.rcio-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Permite que el track 1fr del grid encoja por debajo del ancho intrínseco de
   * la imagen (480px de rcio-card); sin esto las columnas desbordan el viewport
   * en tablet/landscape y se cortan a la mitad. */
  min-width: 0;
  /* Tile gris-900: superficie elevada sobre la costura gris-800 del grid (profundidad
   * tonal, sin sombra — regla "flat by default" del sistema). */
  background: var(--gray-900);
  /* Aísla el apilamiento interno: el z-index del badge queda contenido dentro de
   * la card y no puede pintarse sobre elementos de página (p.ej. la columna de
   * compra sticky cuando la card aparece en el grid de productos relacionados). */
  isolation: isolate;
}
.rcio-product-card__img-wrap {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--black);
}
.rcio-product-card__img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Velo inferior para legibilidad del badge y profundidad (no es sombra). */
.rcio-product-card__img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    oklch(from var(--black) l c h / 0.55) 0%,
    oklch(from var(--black) l c h / 0) 45%
  );
}
/* Transición de la 2ª imagen: reveal moderno con clip-path. La foto se descubre de abajo
 * hacia arriba (barrido tipo cortina editorial) mientras escala sutil (1.06 → 1). Sin
 * opacity: la máscara hace el efecto, más limpio y actual. También por foco de teclado;
 * `will-change` mantiene la composición fluida. */
.rcio-product-card__img-hover {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: inset(100% 0 0 0);
  transform: scale(1.06);
  will-change: clip-path, transform;
  transition:
    clip-path 900ms var(--ease-in-out),
    transform 900ms var(--ease-in-out);
}
.rcio-product-card:hover .rcio-product-card__img-hover,
.rcio-product-card:focus-within .rcio-product-card__img-hover {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}
/* Respeta la preferencia de movimiento reducido: swap casi instantáneo y sin escala. */
@media (prefers-reduced-motion: reduce) {
  .rcio-product-card__img-hover {
    transition-duration: 1ms;
    transform: none;
  }
}
/* Agotado: imagen atenuada (la card lleva la clase WC `outofstock`). */
.rcio-product-card.outofstock .rcio-product-card__img-wrap img {
  filter: grayscale(40%) opacity(0.7);
}

/* Badge overlay — credencial de póster: condensado, peso 700, costura cero.
 * Oferta = bloque sólido near-white (máximo contraste); agotado = contorno 1px. */
.rcio-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 0;
}
.rcio-badge--sale {
  color: var(--black);
  background: var(--accent);
}
.rcio-badge--oos {
  color: var(--white);
  background: transparent;
  border: 1px solid var(--white);
}

/* Bloque de info de la card (sobre la tile gris-900). */
.rcio-product-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
}
.rcio-product-card__kicker {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gray-400);
}
.rcio-product-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.rcio-product-card__name a {
  color: var(--white);
  text-decoration: none;
}
.rcio-product-card__price {
  margin-top: var(--space-xs);
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--accent);
}
.rcio-product-card__price del {
  margin-right: var(--space-sm);
  font-weight: 400;
  color: var(--gray-400);
}
.rcio-product-card__price ins {
  color: var(--accent);
  text-decoration: none;
}

/* ATC: oculto por defecto, se revela al hover/foco del card — SOLO con opacity,
 * NUNCA con transform. El loop de hover que bloqueaba el clic venía del movimiento
 * (translateY del botón) y del scale de la imagen, no del fade: al no mover geometría,
 * la aparición por opacidad es estable (igual que el crossfade de la 2ª imagen).
 * En touch/móvil (sin hover) el botón va siempre visible. */
.rcio-product-card__atc {
  margin-top: var(--space-sm);
  opacity: 0;
  transition: opacity 250ms var(--ease-out-expo);
}
.rcio-product-card:hover .rcio-product-card__atc,
.rcio-product-card:focus-within .rcio-product-card__atc {
  opacity: 1;
}
/* Foco de teclado visible en los enlaces de la card (imagen y nombre). */
.rcio-product-card__img-wrap:focus-visible,
.rcio-product-card__name a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Botón ATC: hover PLANO (solo color/fondo), sin transform ni pseudo-elementos.
 * Antes usaba un ::before negro que se deslizaba con transform:translateX en :hover.
 * Como el botón tiene fondo opaco (--accent), ese ::before (z-index:-1) ni se veía,
 * pero su capa de composición + el zoom de la imagen provocaban, en grid multi-columna,
 * un loop de hover que hacía oscilar el botón (selecciona/deselecciona) y bloqueaba el
 * clic — solo perceptible con cards a la derecha (D-03). Invert plano = estable. */
.rcio-product-card__atc .button {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--black);
  background: var(--accent);
  border: none;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition:
    color 200ms var(--ease-out-expo),
    background 200ms var(--ease-out-expo);
}
.rcio-product-card__atc .button:hover {
  color: var(--accent);
  background: var(--black);
}
.rcio-product-card__atc .button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.rcio-product-card__atc .button.loading {
  opacity: 0.6;
  cursor: wait;
}
/* Touch / móvil: sin hover el botón debe estar SIEMPRE visible + touch target 44px (WCAG 2.5.5). */
@media (hover: none) {
  .rcio-product-card__atc {
    opacity: 1;
  }
  .rcio-product-card__atc .button {
    min-height: 44px;
  }
}
@media (max-width: 480px) {
  .rcio-product-card__atc {
    opacity: 1;
  }
  .rcio-product-card__atc .button {
    min-height: 44px;
  }
}

/* Paginación numérica clásica. */
.rcio-shop .woocommerce-pagination {
  clear: both;
  margin-top: var(--space-2xl);
  text-align: center;
}
.rcio-shop .woocommerce-pagination ul {
  display: inline-flex;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
  border: none;
}
.rcio-shop .woocommerce-pagination ul li {
  margin: 0;
  border: none;
}
.rcio-shop .woocommerce-pagination a,
.rcio-shop .woocommerce-pagination span {
  display: inline-block;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--gray-300);
  text-decoration: none;
  border-radius: 0;
}
.rcio-shop .woocommerce-pagination a:hover {
  color: var(--white);
}
.rcio-shop .woocommerce-pagination .current {
  font-weight: 600;
  color: var(--accent);
  background: var(--gray-800);
}

/* Estado sin resultados (markup nativo WC), estilizado dark. */
.rcio-shop .woocommerce-info,
.rcio-shop .woocommerce-no-products-found {
  clear: both;
  padding: var(--space-md) var(--space-lg);
  color: var(--gray-100);
  background: var(--gray-900);
  border-top: 3px solid var(--accent);
}

/* ── Ficha de producto / single (Plan 03) ───────────────────────────────── */

/* Layout de 2 columnas: galería izquierda + columna de compra sticky (D-11).
 * align-items:start es necesario para que el sticky de la columna funcione. */
.rcio-single-product__layout .product {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
/* Badge de oferta de la ficha (.onsale nativo de WC): tag plano sharp, no la
 * píldora redondeada por defecto. Esquina superior izquierda de la galería. */
.rcio-single-product__layout .product > .onsale {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 2;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--accent);
  border: none;
  border-radius: 0;
}
.rcio-single-product__layout .woocommerce-product-gallery {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}
.rcio-single-product__summary {
  grid-column: 2;
  grid-row: 1;
  /* top:5rem compensa el nav fijo (~76-80px); valor documentado dependiente del header. */
  position: sticky;
  top: 5rem;
  /* Panel gris-900 con inset: superficie elevada (profundidad tonal, no sombra) que
   * además es opaca (evita transparencia del sticky) y con z-index queda por encima
   * de tabs/relacionados al scrollear. */
  padding: var(--space-xl);
  background: var(--gray-900);
  z-index: 2;
}
/* WooCommerce core (woocommerce-layout.css) fuerza width:48% + float en
 * div.images/div.summary para su layout no-grid. Dentro de .rcio-single-product__layout
 * cada columna ya es un track del grid, así que reseteamos a ancho completo y sin float.
 * Misma especificidad (0,3,2) que la regla del core, pero el tema carga después → gana. */
.rcio-single-product__layout div.product div.images,
.rcio-single-product__layout div.product div.summary {
  width: 100%;
  float: none;
}
/* Tabs, relacionados y up-sells abarcan todo el ancho bajo el grid de 2 columnas. */
.rcio-single-product__layout .woocommerce-tabs,
.rcio-single-product__layout .related,
.rcio-single-product__layout .up-sells {
  grid-column: 1 / -1;
}
@media (max-width: 768px) {
  .rcio-single-product__layout .product {
    grid-template-columns: 1fr;
  }
  /* grid-row:auto deja que galería (1ª en el DOM) y compra fluyan en orden:
   * galería arriba, columna de compra abajo. Sin esto ambas quedan en la fila 1. */
  .rcio-single-product__layout .woocommerce-product-gallery {
    grid-column: 1;
    grid-row: auto;
  }
  .rcio-single-product__summary {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
}

/* Columna de compra: tipografía y CTA. */
.rcio-single-product__summary .product_title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
}
.rcio-single-product__summary .price {
  margin-bottom: var(--space-md);
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
}
.rcio-single-product__summary .price del {
  margin-right: var(--space-sm);
  font-weight: 400;
  color: var(--gray-400);
}
.rcio-single-product__summary .price ins {
  color: var(--accent);
  text-decoration: none;
}
.rcio-single-product__summary .woocommerce-product-details__short-description {
  margin-bottom: var(--space-lg);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray-100);
}
.rcio-single-product__summary .quantity input {
  padding: var(--space-sm);
  color: var(--white);
  background: var(--gray-800);
  border: 1px solid var(--gray-600);
  border-radius: 0;
}
/* Add-to-cart de la ficha: full-width. El color (acento) y el invert al hover los
 * da la regla genérica .woocommerce button.button (más específica). Sin ::before
 * deslizante: aquí desbordaba sobre la galería. */
.rcio-single-product__summary .single_add_to_cart_button {
  display: block;
  width: 100%;
  margin-top: var(--space-sm);
}

/* Variation swatches (plugin woo-variation-swatches v2.3.0): estilos dark. */
.rcio-single-product__summary .variations .label,
.rcio-single-product__summary .variations th {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-300);
}
.rcio-single-product__summary .variable-items-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.rcio-single-product__summary .variable-item {
  min-width: 40px;
  height: 40px;
  color: var(--gray-100);
  background: var(--gray-800);
  border: 1px solid var(--gray-600);
  border-radius: 0;
  cursor: pointer;
  transition: border-color 200ms ease;
}
.rcio-single-product__summary .variable-item:hover {
  border-color: var(--gray-300);
}
.rcio-single-product__summary .variable-item.selected {
  border: 2px solid var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.rcio-single-product__summary .variable-item.disabled,
.rcio-single-product__summary .variable-item[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  border-style: dashed;
}

/* Galería: imagen principal y thumbnails.
 * aspect-ratio 4/5 + object-fit cover normaliza la altura entre slides: sin esto
 * cada imagen usa su altura natural y mueve los controles al cambiar de slide. */
.rcio-single-product__layout .woocommerce-product-gallery__wrapper img,
.rcio-single-product__layout .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0;
}
.rcio-single-product__layout .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
}
.rcio-single-product__layout .flex-control-thumbs li {
  width: 64px;
}
.rcio-single-product__layout .flex-control-thumbs img {
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  opacity: 0.7;
  transition:
    opacity 200ms ease,
    border-color 200ms ease;
}
.rcio-single-product__layout .flex-control-thumbs img.flex-active,
.rcio-single-product__layout .flex-control-thumbs img:hover {
  opacity: 1;
  border-color: var(--accent);
}

/* Tabs (descripción / información adicional / valoraciones). */
.rcio-single-product__layout .woocommerce-tabs {
  margin-top: var(--space-2xl);
}
.rcio-single-product__layout .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin: 0 0 var(--space-lg);
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--gray-700);
}
.rcio-single-product__layout .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-400);
  text-decoration: none;
  transition: color 200ms var(--ease-out-expo);
}
.rcio-single-product__layout .woocommerce-tabs ul.tabs li a:hover {
  color: var(--white);
}
.rcio-single-product__layout .woocommerce-tabs ul.tabs li.active a {
  color: var(--accent);
}
/* Contenido del panel de tabs. */
.rcio-single-product__layout .woocommerce-Tabs-panel {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray-100);
}
.rcio-single-product__layout .woocommerce-Tabs-panel h2 {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
}
.rcio-single-product__layout .woocommerce-Tabs-panel table.shop_attributes th {
  color: var(--white);
}
.rcio-single-product__layout .woocommerce-Tabs-panel table.shop_attributes td {
  color: var(--gray-100);
}

/* Breadcrumb (sobre el layout de la ficha y del shop). */
.woocommerce .woocommerce-breadcrumb {
  margin-bottom: var(--space-lg);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.woocommerce .woocommerce-breadcrumb a {
  color: var(--gray-300);
  text-decoration: none;
  transition: color 200ms var(--ease-out-expo);
}
.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--white);
}

/* Form de compra: cantidad + variación. */
.rcio-single-product__summary form.cart {
  margin-top: var(--space-lg);
}
.rcio-single-product__summary .quantity {
  display: inline-flex;
  margin-bottom: var(--space-md);
}
.rcio-single-product__summary .quantity input.qty {
  width: 5rem;
  text-align: center;
}
.rcio-single-product__summary .woocommerce-variation-price .price {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
}
.rcio-single-product__summary .woocommerce-variation-availability p {
  font-family: var(--font-body);
  color: var(--gray-300);
}
.rcio-single-product__summary .reset_variations {
  display: inline-block;
  margin-left: var(--space-sm);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--gray-400);
  transition: color 200ms var(--ease-out-expo);
}
.rcio-single-product__summary .reset_variations:hover {
  color: var(--white);
}

/* Productos relacionados: divisor + heading a escala de marca. */
.rcio-single-product__layout .related,
.rcio-single-product__layout .up-sells {
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--gray-800);
}
.rcio-single-product__layout .related > h2,
.rcio-single-product__layout .up-sells > h2 {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
}

/* Tabs omitidos (la descripción se mueve a la columna de compra vía hook). */
.rcio-single-product__layout .woocommerce-tabs {
  display: none;
}

/* Descripción del producto dentro de la columna de compra (reemplaza a los tabs).
 * Divisor superior para separarla del bloque de compra. */
.rcio-single-description {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--gray-700);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray-100);
}
.rcio-single-description > :first-child {
  margin-top: 0;
}
.rcio-single-description > :last-child {
  margin-bottom: 0;
}
.rcio-single-description h2,
.rcio-single-description h3 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
}

/* Estado agotado en la ficha: mensaje + ruta de recuperación. Sin franja lateral
 * (prohibida): divisor superior + etiqueta condensada en rojo. */
.rcio-single-oos {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--gray-700);
}
.rcio-single-oos__heading {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red);
}
.rcio-single-oos__recovery {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--gray-100);
}
.rcio-single-oos__recovery a {
  color: var(--accent);
  text-decoration: underline;
}

/* ── Mini-cart drawer + toast (Plan 04) ─────────────────────────────────── */

/* Overlay detrás del drawer (color derivado del token negro a 60%, sin rgba/hex). */
.rcio-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: oklch(from var(--black) l c h / 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms var(--ease-in-out);
}
.rcio-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Drawer lateral derecho. */
.rcio-mini-cart {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 101;
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: 92vw;
  height: 100vh;
  background: var(--gray-900);
  border-left: 1px solid var(--gray-700);
  transform: translateX(100%);
  transition: transform 300ms var(--ease-out-expo);
}
.rcio-mini-cart.is-open {
  transform: translateX(0);
}
/* Con sesión iniciada, la admin bar de WP (fija arriba) tapa el header del drawer.
 * Lo bajamos por su altura (32px desktop / 46px <=782px) y reducimos la altura para
 * que no desborde. Valores propios de la admin bar de WP, no tokens de diseño. */
body.admin-bar .rcio-mini-cart {
  top: 32px;
  height: calc(100vh - 32px);
}
@media screen and (max-width: 782px) {
  body.admin-bar .rcio-mini-cart {
    top: 46px;
    height: calc(100vh - 46px);
  }
}
@media (max-width: 480px) {
  .rcio-mini-cart {
    width: 92vw;
  }
}

/* Header del drawer. */
.rcio-mini-cart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--gray-700);
}
.rcio-mini-cart__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
}
.rcio-mini-cart__close {
  display: flex;
  padding: 0;
  color: var(--gray-300);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 200ms ease;
}
.rcio-mini-cart__close:hover {
  color: var(--white);
}

/* Cuerpo: contenido WC (items + subtotal), scrollable. */
.rcio-mini-cart .widget_shopping_cart_content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-lg);
}
.rcio-mini-cart ul.cart_list,
.rcio-mini-cart ul.product_list_widget {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Item del mini-cart: imagen y botón × en absoluto; el contenido (nombre +
 * cantidad) fluye a lo ancho. La estructura de WC es: a.remove, a(img+nombre),
 * span.quantity — por eso no se usa grid. */
.rcio-mini-cart ul.product_list_widget li {
  position: relative;
  min-height: 75px;
  padding: var(--space-md) var(--space-lg) var(--space-md) 72px;
  border-bottom: 1px solid var(--gray-800);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--gray-100);
}
.rcio-mini-cart ul.product_list_widget li > a:not(.remove) {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
}
.rcio-mini-cart ul.product_list_widget li img {
  position: absolute;
  top: var(--space-md);
  left: 0;
  width: 60px;
  height: 75px;
  margin: 0;
  object-fit: cover;
  border: 1px solid var(--gray-800);
  border-radius: 0;
  float: none;
}
.rcio-mini-cart ul.product_list_widget li .remove {
  position: absolute;
  top: var(--space-md);
  right: 0;
  width: 22px;
  height: 22px;
  font-size: 1.25rem;
  line-height: 20px;
  text-align: center;
  color: var(--gray-400);
  text-decoration: none;
  transition: color 200ms var(--ease-out-expo);
}
.rcio-mini-cart ul.product_list_widget li .remove:hover {
  color: var(--red);
}
.rcio-mini-cart ul.product_list_widget li .quantity {
  display: block;
  margin-top: var(--space-xs);
  font-size: 0.9375rem;
  color: var(--gray-300);
}
.rcio-mini-cart ul.product_list_widget li .quantity .woocommerce-Price-amount {
  font-weight: 700;
  color: var(--accent);
}
.rcio-mini-cart .woocommerce-mini-cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--gray-700);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--gray-100);
}
.rcio-mini-cart .woocommerce-mini-cart__total strong {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-300);
}
.rcio-mini-cart .woocommerce-mini-cart__total .woocommerce-Price-amount {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--accent);
}
/* Botones y mensaje vacío nativos de WC: ocultos (usamos footer y empty custom). */
.rcio-mini-cart .woocommerce-mini-cart__buttons,
.rcio-mini-cart .woocommerce-mini-cart__empty-message {
  display: none;
}

/* Empty state custom: visible solo cuando WC marca el carrito vacío. */
.rcio-mini-cart__empty {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
}
.rcio-mini-cart:has(.woocommerce-mini-cart__empty-message) .rcio-mini-cart__empty {
  display: flex;
}
.rcio-mini-cart:has(.woocommerce-mini-cart__empty-message) .rcio-mini-cart__footer {
  display: none;
}
.rcio-mini-cart__empty-icon {
  color: var(--gray-600);
}
.rcio-mini-cart__empty-heading {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
}
.rcio-mini-cart__empty-text {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--gray-400);
}

/* Footer del drawer. */
.rcio-mini-cart__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-top: 1px solid var(--gray-700);
}

/* Botones reutilizables del drawer (primario con relleno direccional / secundario contorno). */
.rcio-btn-primary,
.rcio-btn-secondary {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  overflow: hidden;
  padding: var(--space-md);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  border-radius: 0;
  cursor: pointer;
  transition:
    color 450ms var(--ease-out-expo),
    border-color 200ms var(--ease-out-expo);
}
.rcio-btn-primary::before,
.rcio-btn-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateX(-101%);
  transition: transform 450ms var(--ease-out-expo);
}
.rcio-btn-primary {
  color: var(--black);
  background: var(--accent);
  border: 1px solid var(--accent);
}
.rcio-btn-primary::before {
  background: var(--black);
}
.rcio-btn-primary:hover {
  color: var(--accent);
}
.rcio-btn-secondary {
  color: var(--white);
  background: transparent;
  border: 1px solid var(--gray-600);
}
.rcio-btn-secondary::before {
  background: var(--accent);
}
.rcio-btn-secondary:hover {
  color: var(--black);
  border-color: var(--accent);
}
.rcio-btn-primary:hover::before,
.rcio-btn-secondary:hover::before {
  transform: translateX(0);
}
.rcio-btn-primary:active,
.rcio-btn-secondary:active {
  transform: scale(0.98);
}

/* Toast de add-to-cart (no bloquea interacción). */
.rcio-toast {
  position: fixed;
  right: var(--space-lg);
  bottom: var(--space-lg);
  z-index: 102;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--accent);
  background: var(--gray-800);
  border: 1px solid var(--gray-600);
  border-radius: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-in-out);
}
.rcio-toast.is-visible {
  opacity: 1;
}
@media (max-width: 480px) {
  .rcio-toast {
    right: 50%;
    transform: translateX(50%);
  }
}

/* Badge del contador en el nav (sobre el ícono de carrito). */
.nav__cart-trigger {
  position: relative;
}
.nav__cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 var(--space-xs);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 0;
}
.nav__cart-count.has-items {
  display: inline-flex;
  color: var(--black);
  background: var(--accent);
}
/* En móvil el ícono crece a un área de toque de 40px (components.css); reanclamos
 * el badge para que siga pegado al glifo del carrito y no a la esquina del box. */
@media (max-width: 768px) {
  .nav__cart-count {
    top: 4px;
    right: 4px;
  }
}

/* ── Cart / Checkout / My Account (Plan 05) ─────────────────────────────── */
/* CSS-only (sin override PHP, D-13/D-14). Selectores calificados con .woocommerce. */

/* Color de texto base en las páginas de tienda. */
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main {
  color: var(--gray-100);
}

/* Inputs de formulario (checkout + carrito + mi-cuenta). */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce input.input-text,
.woocommerce select,
.woocommerce textarea {
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--white);
  background: var(--gray-800);
  border: 1px solid var(--gray-400);
  border-radius: 0;
  /* Fuerza el UI nativo (flecha del select, resize del textarea, lista de opciones
   * del select nativo, autofill) en modo oscuro — sin esto algunos navegadores los
   * pintan con fondo blanco. */
  color-scheme: dark;
}
/* Placeholder legible (por defecto el navegador lo pinta muy tenue). */
.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder,
.woocommerce input.input-text::placeholder,
.woocommerce textarea::placeholder {
  color: var(--gray-300);
  opacity: 1;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce input.input-text:focus,
.woocommerce textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px oklch(from var(--accent) l c h / 0.25);
  outline: none;
}
/* Refuerzo explícito del textarea (notas del pedido). Por ID para máxima especificidad
 * (1,1,0) y con background-color longhand: garantiza el fondo oscuro aunque el navegador
 * o un plugin intente dejarlo en el blanco del UA. */
.woocommerce textarea,
.woocommerce #order_comments {
  background-color: var(--gray-800);
  color: var(--white);
  color-scheme: dark;
}
/* ── select2 (dropdowns de país/estado del checkout) ─────────────────────────
 * WooCommerce reemplaza esos <select> por el widget select2, que trae su propio
 * markup y se renderiza con fondo blanco. Lo homologamos al dark del resto del form. */
.woocommerce .select2-container--default .select2-selection--single,
.woocommerce .select2-container--default .select2-selection--multiple {
  min-height: calc(1rem + var(--space-sm) * 2 + 2px); /* iguala la altura de los inputs */
  color: var(--white);
  background: var(--gray-800);
  border: 1px solid var(--gray-400);
  border-radius: 0;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--white);
  line-height: calc(1rem + var(--space-sm) * 2);
  padding-left: var(--space-md);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--gray-300);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(1rem + var(--space-sm) * 2);
}
/* Panel desplegable + buscador + opciones. */
.select2-dropdown {
  color: var(--white);
  background: var(--gray-800);
  border: 1px solid var(--gray-400);
  border-radius: 0;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  color: var(--white);
  background: var(--gray-900);
  border: 1px solid var(--gray-600);
  border-radius: 0;
}
.select2-container--default .select2-results__option {
  color: var(--gray-100);
  background: var(--gray-800);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  color: var(--black);
  background: var(--accent);
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
  color: var(--white);
  background: var(--gray-700);
}

.woocommerce form .form-row label,
.woocommerce-checkout label {
  font-family: var(--font-body);
  color: var(--gray-100);
}
/* Campo en error. */
.woocommerce form .form-row.woocommerce-invalid input.input-text {
  border-color: var(--red);
}

/* Notices. */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  padding: var(--space-md) var(--space-lg);
  color: var(--gray-100);
  background: var(--gray-800);
  border-top: 3px solid var(--gray-400);
  list-style: none;
}
.woocommerce-error {
  border-top-color: var(--red);
}
.woocommerce-message {
  border-top-color: var(--accent);
}
.woocommerce-info {
  border-top-color: var(--gray-400);
}

/* Tablas (carrito + historial de pedidos). */
.woocommerce table.shop_table {
  color: var(--gray-100);
  border: 1px solid var(--gray-700);
}
.woocommerce table.shop_table th {
  padding: var(--space-md);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--gray-900);
  border-bottom: 1px solid var(--gray-700);
}
.woocommerce table.shop_table td {
  background: var(--black);
  border-top: 1px solid var(--gray-700);
}
.woocommerce table.shop_table tbody tr:nth-child(even) td {
  background: var(--gray-900);
}
.woocommerce table.shop_table a {
  color: var(--white);
}
.woocommerce .cart_totals .order-total .amount,
.woocommerce-checkout .order-total .amount {
  color: var(--accent);
}

/* Botones de WooCommerce: primario acento que invierte a negro al hover (sin ::before,
 * porque algunos son <input> y no admiten pseudo-elementos). Condensado, costura cero. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #place_order {
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--black);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 0;
  cursor: pointer;
  transition:
    color 250ms var(--ease-out-expo),
    background 250ms var(--ease-out-expo);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce #place_order:hover {
  color: var(--accent);
  background: var(--black);
}
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #place_order:active {
  transform: scale(0.98);
}
/* Secundario: aplicar cupón y "seguir comprando" — contorno que se rellena al hover. */
.woocommerce .button[name="apply_coupon"],
.woocommerce .wc-backward {
  color: var(--white);
  background: transparent;
  border: 1px solid var(--gray-600);
}
.woocommerce .button[name="apply_coupon"]:hover,
.woocommerce .wc-backward:hover {
  color: var(--black);
  background: var(--accent);
  border-color: var(--accent);
}

/* Mi cuenta: navegación de tabs + contenido. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--gray-700);
  border-radius: 0;
  overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--gray-800);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-300);
  text-decoration: none;
  transition:
    color 200ms var(--ease-out-expo),
    background 200ms var(--ease-out-expo);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  color: var(--white);
  background: var(--gray-800);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--black);
  background: var(--accent);
}
.woocommerce-account .woocommerce-MyAccount-content {
  color: var(--gray-100);
}
.woocommerce-account .woocommerce-MyAccount-content a {
  color: var(--accent);
}

/* Títulos de página (page.php → entry-title) a escala de marca. */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title {
  margin: 0 0 var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--gray-800);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
}

/* Headings de sección WC (facturación, totales, pedido, contenido de cuenta). */
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
}

/* Carrito: totales como panel tonal + botón de checkout full-width. */
.woocommerce-cart .cart-collaterals .cart_totals {
  padding: var(--space-lg);
  background: var(--gray-900);
}
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table {
  border: none;
}
.woocommerce-cart .wc-proceed-to-checkout {
  margin-top: var(--space-md);
  padding: 0;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  display: block;
  width: 100%;
  text-align: center;
}
.woocommerce-cart .coupon {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.woocommerce-cart .coupon .input-text {
  flex: 1;
}

/* Checkout: pedido como panel; métodos de pago y caja de pago en dark. */
.woocommerce-checkout #order_review {
  padding: var(--space-lg);
  background: var(--gray-900);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table {
  border: none;
}
.woocommerce-checkout .wc_payment_methods {
  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
}
.woocommerce-checkout .wc_payment_method {
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--gray-800);
}
.woocommerce-checkout .wc_payment_method > label {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
}
.woocommerce-checkout .payment_box {
  margin-top: var(--space-sm);
  padding: var(--space-md);
  font-family: var(--font-body);
  color: var(--gray-100);
  background: var(--gray-800);
}
.woocommerce-checkout .payment_box::before {
  display: none; /* quita el triángulo/flecha por defecto de WC */
}
.woocommerce-checkout #place_order {
  display: block;
  width: 100%;
  margin-top: var(--space-md);
}

/* Cuenta: formularios de login / registro como panel. */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  padding: var(--space-lg);
  background: var(--gray-900);
  border: 1px solid var(--gray-800);
}

/* ── Accesibilidad: respetar prefers-reduced-motion (PRODUCT.md) ─────────── */
@media (prefers-reduced-motion: reduce) {
  .woocommerce *,
  .rcio-mini-cart,
  .rcio-overlay,
  .rcio-toast,
  .rcio-product-card__img-wrap img,
  .rcio-product-card__img-hover,
  .rcio-product-card__atc,
  .rcio-product-card__atc .button::before,
  .rcio-single-product__summary .single_add_to_cart_button::before,
  .rcio-btn-primary::before,
  .rcio-btn-secondary::before {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .rcio-product-card:hover .rcio-product-card__img-wrap img {
    transform: none;
  }
}