/*
Theme Name: Watch-O
Theme URI: https://watch-o.com
Description: Tema hijo por bloques (FSE) para Watch-O — relojes originales, El Salvador. Claim: "El lujo que sí puedes llevar". Diseño claro-dominante con secciones negras de contraste, acento ámbar y wordmark WATCH-O gigante. Hereda de Twenty Twenty-Four. Toda la funcionalidad de marca vive en el plugin watch-o-core.
Author: Watch-O
Author URI: https://watch-o.com
Template: twentytwentyfour
Version: 1.15.2
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: watch-o
Tags: e-commerce, block-styles, full-site-editing, custom-colors, custom-logo
*/

/* ============================================================
   WATCH-O · style.css
   Los TOKENS viven en theme.json (→ variables --wp--preset--* y --wp--custom--*).
   Aquí van: puente de nombres --wo-*, componentes de marca y overrides
   de WooCommerce que theme.json no puede expresar (pseudo-estados, layout
   de componente, tarjetas de producto, badges, blur del header, etc.).
   Fuente de verdad: brand/design-tokens.json.
   ============================================================ */

/* ---- Puente de tokens: nombres --wo-* del brand kit apuntando a los presets de theme.json
   (permite reutilizar snippets del brand kit sin duplicar valores). ---- */
:root {
  --wo-cloud:        var(--wp--preset--color--cloud);
  --wo-mist:         var(--wp--preset--color--mist);
  --wo-paper:        var(--wp--preset--color--paper);
  --wo-hero-top:     var(--wp--preset--color--hero-top);
  --wo-hero-bottom:  var(--wp--preset--color--hero-bottom);
  --wo-obsidian:     var(--wp--preset--color--obsidian);
  --wo-ink:          var(--wp--preset--color--ink);
  --wo-surface:      var(--wp--preset--color--surface);
  --wo-surface-2:    var(--wp--preset--color--surface-2);
  --wo-navy:         var(--wp--preset--color--navy);
  --wo-text:         var(--wp--preset--color--text);
  --wo-text-2:       var(--wp--preset--color--text-2);
  --wo-text-3:       var(--wp--preset--color--text-3);
  --wo-text-mute:    var(--wp--preset--color--text-mute);
  --wo-on-dark:      var(--wp--preset--color--on-dark);
  --wo-on-dark-2:    var(--wp--preset--color--on-dark-2);
  --wo-ember:        var(--wp--preset--color--ember);
  --wo-ember-hover:  var(--wp--preset--color--ember-hover);
  --wo-ember-soft:   var(--wp--custom--color--ember-soft);
  --wo-gold:         var(--wp--preset--color--gold);
  --wo-gold-bright:  var(--wp--preset--color--gold-bright);
  --wo-gold-deep:    var(--wp--preset--color--gold-deep);
  --wo-whatsapp:     var(--wp--preset--color--whatsapp);
  --wo-warning:      var(--wp--preset--color--warning);
  --wo-photo-tile:   var(--wp--preset--color--photo-tile);
  --wo-border-light: var(--wp--custom--color--hairline-dark);
  --wo-border-dark:  var(--wp--custom--color--hairline);

  --wo-font-display: var(--wp--preset--font-family--archivo);
  --wo-font-body:    var(--wp--preset--font-family--hanken);
  --wo-font-num:     var(--wp--preset--font-family--space-grotesk);

  --wo-r-pill:   var(--wp--custom--radius--pill);
  --wo-r-input:  var(--wp--custom--radius--input);
  --wo-r-card:   var(--wp--custom--radius--card);
  --wo-r-banner: var(--wp--custom--radius--banner);

  --wo-shadow-1:       var(--wp--preset--shadow--on-light-1);
  --wo-shadow-2:       var(--wp--preset--shadow--on-light-2);
  --wo-shadow-dark:    var(--wp--preset--shadow--on-dark);
  --wo-shadow-product: var(--wp--preset--shadow--product);
  --wo-focus:          var(--wp--custom--shadow--focus);

  --wo-container: var(--wp--style--global--content-size, 1200px);
  --wo-gutter:    var(--wp--custom--layout--gutter);
  --wo-section-y: var(--wp--custom--layout--section-y);
  --wo-dur:       var(--wp--custom--motion--dur);
  --wo-ease:      var(--wp--custom--motion--ease);
}

/* ---- Base ---- */
body {
  background: var(--wo-cloud);
  color: var(--wo-text);
  font-family: var(--wo-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Titulares en dos tonos (primera mitad tinta, segunda muteInk) */
.wo-headline .wo-mute,
.wo-mute { color: var(--wo-text-mute); }

/* ---- Overline / eyebrow (ámbar, mayúsculas) ---- */
.wo-overline {
  display: inline-block;
  font-family: var(--wo-font-body);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--overline);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wo-ember);
  margin: 0 0 var(--wp--preset--spacing--30);
}
.is-on-dark .wo-overline { color: var(--wo-ember); }

/* ---- Precios (Space Grotesk, tabular) ---- */
.wo-price {
  font-family: var(--wo-font-num);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--wo-text);
}
.wo-price--old {
  color: var(--wo-text-3);
  text-decoration: line-through;
  font-weight: 600;
  font-size: 0.72em;
  margin-left: 8px;
}
.is-on-dark .wo-price { color: var(--wo-on-dark); }

/* ============================================================
   LAYOUT / SECCIONES
   ============================================================ */
.wo-section { padding-block: var(--wo-section-y); }
.wo-section--dark {
  background: var(--wo-obsidian);
  color: var(--wo-on-dark);
}
.wo-section--dark :is(h1,h2,h3,h4,h5,h6) { color: var(--wo-on-dark); }
.wo-section--mist  { background: var(--wo-mist); }
.wo-section--paper { background: var(--wo-paper); }

/* Marca de fondo: WATCH-O gigante */
.wo-wordmark-giant {
  position: absolute;
  inset-inline: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  font-family: var(--wo-font-display);
  font-weight: 900;
  font-size: var(--wp--preset--font-size--giant);
  line-height: 0.8;
  letter-spacing: -0.04em;
  text-align: center;
  white-space: nowrap;
  color: rgba(11, 14, 20, var(--wp--custom--layout--wordmark-ink));
}
.wo-section--dark .wo-wordmark-giant,
.is-on-dark .wo-wordmark-giant {
  color: rgba(255, 255, 255, var(--wp--custom--layout--wordmark-white));
}

/* ============================================================
   BOTONES (variantes de marca)
   El botón base (pill ámbar) ya lo define theme.json → elements.button.
   Aquí: variantes on-dark, secundario, WhatsApp, circular, y la flecha.
   ============================================================ */
.wo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 28px;
  border: 0; cursor: pointer;
  border-radius: var(--wo-r-pill);
  background: var(--wo-ember); color: var(--wo-paper, #fff);
  font-family: var(--wo-font-body); font-weight: 700; font-size: 16px; line-height: 1;
  text-decoration: none;
  transition: background var(--wo-dur) var(--wo-ease), transform var(--wo-dur) var(--wo-ease);
}
.wo-btn:hover { background: var(--wo-ember-hover); color: #fff; }
.wo-btn .wo-arrow { transition: transform var(--wo-dur) var(--wo-ease); }
.wo-btn:hover .wo-arrow { transform: translateX(3px); }

.wo-btn--on-dark { background: #fff; color: var(--wo-text); }
.wo-btn--on-dark:hover { background: var(--wo-cloud); color: var(--wo-text); }

.wo-btn--secondary {
  background: transparent; color: var(--wo-text);
  border: 1.5px solid rgba(11,14,20,0.2);
}
.wo-btn--secondary:hover { border-color: var(--wo-text); background: transparent; color: var(--wo-text); }
.is-on-dark .wo-btn--secondary { color: #fff; border-color: var(--wo-border-dark); }
.is-on-dark .wo-btn--secondary:hover { border-color: #fff; }

/* WhatsApp: verde SOLO aquí (PDP y flotante). En header = pill negro (ver header). */
.wo-btn--whatsapp { background: var(--wo-whatsapp); color: #062B16; }
.wo-btn--whatsapp:hover { background: #20C15D; color: #062B16; }

/* Botón circular de flecha (carrusel / CTA card) */
.wo-btn-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 999px;
  background: var(--wo-ember); color: #fff; border: 0; cursor: pointer;
  transition: background var(--wo-dur) var(--wo-ease);
}
.wo-btn-circle:hover { background: var(--wo-ember-hover); }

/* ============================================================
   BADGES
   ============================================================ */
.wo-badge {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 0 12px;
  border-radius: var(--wo-r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  line-height: 1;
}
/* Descuento: ámbar, número tabular (nunca inventar el %) */
.wo-badge--discount {
  background: var(--wo-ember); color: #fff;
  font-family: var(--wo-font-num); letter-spacing: 0; text-transform: none; font-size: 12px;
}
/* Envío gratis: pill NEUTRAL (no verde) */
.wo-badge--shipping {
  background: transparent; color: var(--wo-text-3);
  border: 1px solid var(--wo-border-light);
}
.is-on-dark .wo-badge--shipping { color: var(--wo-on-dark-2); border-color: var(--wo-border-dark); }
/* Garantía: borde dorado tenue */
.wo-badge--warranty {
  background: transparent; color: var(--wo-gold-deep);
  border: 1px solid var(--wp--custom--color--warranty-border);
}
.is-on-dark .wo-badge--warranty { color: var(--wo-gold-bright); }
/* Stock bajo: warning, estilo caption 13px/500 (solo si el dato es real) */
.wo-badge--stock-low {
  background: var(--wp--custom--color--stock-low-bg); color: var(--wo-warning);
  border: 0; letter-spacing: 0; text-transform: none;
  font-size: var(--wp--preset--font-size--caption); font-weight: 500;
}

/* ============================================================
   PRODUCT CARD (oscura sobre claro) — patrón de marca
   ============================================================ */
.wo-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--wo-surface);
  border: 1px solid var(--wo-border-dark);
  border-radius: var(--wo-r-card);
  overflow: hidden;
  transition: transform var(--wo-dur) var(--wo-ease), box-shadow var(--wo-dur) var(--wo-ease);
}
.wo-card:hover { transform: var(--wp--custom--motion--lift); box-shadow: var(--wo-shadow-dark); }
.wo-card--featured {
  background: linear-gradient(160deg, var(--wo-navy), var(--wo-obsidian));
  border-color: rgba(201,162,83,0.3);
}
.wo-card__media {
  aspect-ratio: 1 / 1;
  background: var(--wo-photo-tile);
  display: grid; place-items: center;
  padding: 18px;
}
.wo-card--featured .wo-card__media,
.wo-card__media--wide { aspect-ratio: 4 / 3; }
.wo-card__media img {
  max-width: 100%; height: auto;
  mix-blend-mode: multiply; /* funde la sombra de la foto sobre el tile claro */
}
.wo-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.wo-card__brand { color: var(--wo-text-3); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; }
.wo-card__name { font-family: var(--wo-font-display); font-weight: 700; color: var(--wo-on-dark); font-size: var(--wp--preset--font-size--h3); line-height: 1.2; margin: 0; }
.wo-card__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.wo-card__price { color: var(--wo-on-dark); font-family: var(--wo-font-num); font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--wp--preset--font-size--price); }
.wo-card__badge-slot { position: absolute; top: 12px; left: 12px; z-index: 2; }

/* Pill "Comprar" */
.wo-buy-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 16px; border-radius: 999px;
  background: #fff; color: var(--wo-text);
  font-family: var(--wo-font-body); font-weight: 700; font-size: 14px; text-decoration: none;
  border: 0; cursor: pointer; white-space: nowrap;
  transition: background var(--wo-dur) var(--wo-ease), color var(--wo-dur) var(--wo-ease);
}
.wo-buy-pill .wo-arrow { color: var(--wo-ember); transition: transform var(--wo-dur) var(--wo-ease); }
.wo-buy-pill:hover { background: var(--wo-ember); color: #fff; }
.wo-buy-pill:hover .wo-arrow { color: #fff; transform: translateX(3px); }

/* ============================================================
   CATEGORY CARD (4 categorías oficiales, sin conteos)
   ============================================================ */
.wo-cat-card {
  position: relative; display: block;
  aspect-ratio: 3 / 4; border-radius: var(--wp--custom--radius--card-sm);
  overflow: hidden; text-decoration: none;
  background: linear-gradient(160deg, var(--wo-navy), var(--wo-obsidian));
}
.wo-cat-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--wo-ease);
}
.wo-cat-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,14,20,0) 35%, rgba(11,14,20,0.92));
  opacity: 0.9; transition: opacity 0.35s var(--wo-ease);
}
.wo-cat-card__label { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; }
.wo-cat-card__title { font-family: var(--wo-font-display); font-weight: 800; color: #fff; font-size: var(--wp--preset--font-size--h2); margin: 0 0 6px; line-height: 1.05; }
.wo-cat-card__cta { display: inline-block; color: var(--wo-ember); font-weight: 700; font-size: 14px; transition: transform var(--wo-dur) var(--wo-ease); }
/* Zoom y flecha solo en dispositivos con hover real (en táctil no se "pega") */
@media (hover: hover) {
  .wo-cat-card:hover img, .wo-cat-card:focus-visible img { transform: scale(1.06); }
  .wo-cat-card:hover::after { opacity: 1; }
  .wo-cat-card:hover .wo-cat-card__cta { transform: translateX(4px); }
}

/* ============================================================
   HEADER ISLA (pill flotante centrada) — parts/header.html
   ============================================================ */
.wo-header2 {
  position: sticky; top: 0; z-index: 100;
  padding: 14px clamp(12px, 3vw, 24px);
  background: transparent;
  pointer-events: none; /* la isla recibe los clics; el aire alrededor no tapa nada */
}
/* En la portada el hero se mete DEBAJO de la isla de vidrio (estilo NIXON).
   El fondo del body en home es obsidiana: la franja sobre el hero queda del
   mismo color que la foto (sin línea clara arriba). */
body.home { background-color: var(--wo-obsidian); }
body.home .wo-hero2 { margin-top: -110px; }

.wo-header2 { transition: transform 0.35s var(--wo-ease), opacity 0.35s var(--wo-ease); }
.wo-header2.is-hidden { transform: translateY(-115%); opacity: 0; pointer-events: none; }

/* Isla OSCURA de vidrio — igual en todas las páginas (logo blanco visible) */
.wo-island {
  pointer-events: auto;
  max-width: 1100px; margin-inline: auto;
  padding: 8px 10px 8px 18px;
  border-radius: 999px;
  background: rgba(15,19,26,0.72);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  backdrop-filter: saturate(160%) blur(20px);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 14px 40px rgba(11,14,20,0.35), inset 0 1px 0 rgba(255,255,255,0.1);
}
.wo-island__logo { display: inline-flex; align-items: center; }
.wo-island__logo img { display: block; height: 48px; width: auto; }
.wo-island__nav { display: flex; align-items: center; gap: 2px; }
.wo-island__nav a {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 16px; border-radius: 999px;
  font-weight: 600; font-size: 14px; line-height: 1;
  color: #fff; text-decoration: none;
  transition: background var(--wo-dur) var(--wo-ease);
}
.wo-island__nav a:hover { background: rgba(255,255,255,0.14); }
.wo-island__actions { flex-shrink: 0; }
/* Botón de carrito simple: icono blanco + contador ámbar, va a la página del carrito */
.wo-cart-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  color: #fff !important; text-decoration: none !important;
  border-radius: 999px;
  transition: background var(--wo-dur) var(--wo-ease);
}
.wo-cart-btn:hover { background: rgba(255,255,255,0.14); }
.wo-cart-btn__count {
  position: absolute; top: 1px; right: -2px;
  display: inline-grid; place-items: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--wo-ember); color: #fff;
  border-radius: 999px;
  font-family: var(--wo-font-num); font-weight: 700; font-size: 11px; line-height: 1;
}

/* WhatsApp = pill VERDE oficial de WhatsApp (header, o donde se use) */
.wo-wa-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px;
  box-sizing: border-box; max-width: 100%; white-space: nowrap;
  border-radius: 999px; background: #25D366; color: #fff;
  font-weight: 700; font-size: 14px; text-decoration: none;
  transition: background var(--wo-dur) var(--wo-ease);
}
.wo-wa-pill:hover { background: #1EBE5A; color: #fff; }

/* Móvil: la isla pasa a DOS filas — logo + carrito + WhatsApp arriba,
   y el menú completo centrado abajo (nada se oculta). */
@media (max-width: 860px) {
  .wo-header2 { padding: 10px; }
  .wo-island {
    flex-wrap: wrap !important; row-gap: 0;
    border-radius: 26px; padding: 8px 12px;
  }
  .wo-island__nav {
    order: 3; width: 100%;
    justify-content: center; gap: 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    margin-top: 6px; padding-top: 2px;
  }
  .wo-island__nav a { height: 42px; padding: 0 13px; font-size: 13.5px; }
  .wo-island__logo img { height: 38px; }
  .wo-wa-pill span { display: none; }
  .wo-wa-pill { padding: 0 13px; }
}

/* ============================================================
   TRUST STRIP (franja negra) — parts/trust-strip.html
   ============================================================ */
.wo-trust {
  background: var(--wo-obsidian); color: var(--wo-on-dark-2);
  font-size: 13px; padding-block: 12px;
}
.wo-trust .wo-trust__items { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; }
.wo-trust .wo-trust__sep { color: var(--wo-ember); }

/* ============================================================
   FOOTER (negro con wordmark gigante) — parts/footer.html
   ============================================================ */
.wo-footer { position: relative; background: var(--wo-obsidian); color: var(--wo-on-dark-2); overflow: hidden; }
.wo-footer :is(h1,h2,h3,h4) { color: #fff; }
.wo-footer a { color: var(--wo-on-dark-2); text-decoration: none; }
.wo-footer a:hover { color: #fff; text-decoration: underline; }
.wo-footer > .wp-block-group { position: relative; z-index: 1; }
.wo-footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
/* Wordmark gigante al pie: tamaño en vw para que "WATCH-O" quepa COMPLETO
   en cualquier pantalla, y más tinta para que sí se vea.
   OJO: ".is-on-dark .wo-wordmark-giant" es más específico y pisaba el color
   de esta regla — por eso el footer "no se actualizaba". Se blinda: */
.wo-footer .wo-wordmark-giant--footer {
  bottom: -0.1em;
  font-size: clamp(56px, 21.5vw, 380px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.09);
}
/* Wordmark gigante del hero, centrado tras el reloj */
.wo-wordmark-giant--hero { top: 50%; transform: translateY(-50%); }

/* ============================================================
   HERO v2 (cinematográfico oscuro con reloj) — patterns/hero.php
   ============================================================ */
.wo-hero2 {
  position: relative; overflow: hidden;
  padding-top: clamp(130px, 18vh, 190px);
  padding-bottom: clamp(150px, 20vh, 230px);
  min-height: min(88vh, 860px);
  display: flex; flex-direction: column; justify-content: center;
}
.wo-hero2__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.wo-hero2__bg { object-position: center right; }
/* El velo funde los BORDES de la foto con el color exacto de la sección
   (obsidiana sólida en los extremos → cero costuras a los lados) */
.wo-hero2__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, var(--wo-obsidian) 0%, rgba(11,14,20,0.55) 38%, rgba(11,14,20,0.05) 75%, rgba(11,14,20,0.75) 100%),
    linear-gradient(180deg, rgba(11,14,20,0.85) 0%, rgba(11,14,20,0) 30%, rgba(11,14,20,0) 60%, rgba(11,14,20,0.85) 100%);
}
.wo-hero2__content { position: relative; z-index: 2; width: 100%; }
.wo-hero2__proof {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  list-style: none; margin: 28px 0 0; padding: 0;
  color: var(--wo-on-dark-2); font-size: 14px;
}
.wo-hero2__proof li { display: inline-flex; align-items: center; gap: 8px; }
.wo-hero2__proof li::before { content: "✓"; color: var(--wo-ember); font-weight: 700; }
.wo-hero2__shopcard {
  position: absolute; z-index: 2;
  right: clamp(16px, 5vw, 72px); top: clamp(120px, 18vh, 190px);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 14px 12px 20px; border-radius: 999px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; text-decoration: none; font-weight: 700; font-size: 14px;
  transition: background var(--wo-dur) var(--wo-ease);
}
.wo-hero2__shopcard:hover { background: rgba(255,255,255,0.2); }
.wo-hero2__shopcard-arrow {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--wo-ember); color: #fff;
}
.wo-wordmark-giant--hero2 { bottom: -0.12em; z-index: 1; }
@media (max-width: 900px) {
  .wo-hero2__shopcard { display: none; }
  .wo-hero2 { padding-top: 120px; padding-bottom: 130px; min-height: 0; }
}

/* ============================================================
   BANNER v3 (tarjeta partida: texto + foto) — patterns/banner.php
   ============================================================ */
.wo-banner3 {
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch;
  /* Fondo casi negro: los bordes oscuros de la foto se funden sin costura */
  background: linear-gradient(160deg, #10141c, #04060a);
  border: 1px solid var(--wo-border-dark);
  border-radius: var(--wo-r-card); overflow: hidden;
}
.wo-banner3__content { padding: clamp(32px, 5vw, 64px); }
.wo-banner3__media { position: relative; min-height: 340px; }
.wo-banner3__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* Funde los 4 bordes de la foto con el fondo de la tarjeta */
.wo-banner3__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, #0a0d13 0%, rgba(10,13,19,0) 14%),
    linear-gradient(270deg, #04060a 0%, rgba(4,6,10,0) 12%),
    linear-gradient(180deg, #0a0d13 0%, rgba(10,13,19,0) 14%),
    linear-gradient(0deg, #04060a 0%, rgba(4,6,10,0) 14%);
}
@media (max-width: 820px) {
  .wo-banner3 { grid-template-columns: 1fr; }
  .wo-banner3__media { order: -1; min-height: 240px; }
}

/* ============================================================
   FAQ (acordeón) — página "Preguntas frecuentes" del plugin
   ============================================================ */
.wo-faq { display: flex; flex-direction: column; gap: 12px; }
.wo-faq details {
  background: #fff; border: 1px solid var(--wo-border-light);
  border-radius: var(--wo-r-card); padding: 4px 22px;
}
.wo-faq details[open] { border-color: var(--wo-ember); }
.wo-faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 44px; padding: 14px 0;
  font-family: var(--wo-font-display); font-weight: 700; font-size: 17px; color: var(--wo-text);
}
.wo-faq summary::-webkit-details-marker { display: none; }
.wo-faq summary::after { content: "+"; color: var(--wo-ember); font-size: 24px; font-weight: 700; line-height: 1; flex-shrink: 0; }
.wo-faq details[open] summary::after { content: "–"; }
.wo-faq .wo-faq__body { padding: 0 0 18px; color: var(--wo-text-2, #3d4654); }
.wo-faq .wo-faq__body ul { margin: 8px 0 0 20px; padding: 0; }
.wo-faq .wo-faq__body li { margin-bottom: 4px; }

/* ============================================================
   GRIDS DE PRODUCTO (bloques product-new / product-on-sale)
   Cards estilo NIXON: oscuras, foto full-bleed, badge ámbar.
   Los !important pisan el CSS flex propio de WooCommerce Blocks
   (que encogía las cards a columnas angostas).
   ============================================================ */
.wc-block-grid { margin: 0 !important; max-width: 100%; }
ul.wc-block-grid__products {
  display: grid !important; gap: 24px; margin: 0 !important; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  width: 100%;
}
ul.wc-block-grid__products::before,
ul.wc-block-grid__products::after { content: none !important; display: none !important; }
li.wc-block-grid__product {
  position: relative; margin: 0 !important; padding: 0 !important;
  max-width: none !important; width: auto !important; flex: none !important;
  display: flex; flex-direction: column; text-align: left !important;
  background: linear-gradient(160deg, var(--wo-navy), var(--wo-obsidian));
  border: 1px solid var(--wo-border-dark);
  border-radius: var(--wo-r-card); overflow: visible; /* el badge de oferta sobresale */
  transition: transform var(--wo-dur) var(--wo-ease), box-shadow var(--wo-dur) var(--wo-ease);
}
li.wc-block-grid__product:hover { transform: var(--wp--custom--motion--lift); box-shadow: var(--wo-shadow-dark); }
.wc-block-grid__product a { text-decoration: none; }
.wc-block-grid__product-link { display: flex; flex-direction: column; }
.wc-block-grid__product-image {
  margin: 0; overflow: hidden;
  border-radius: var(--wo-r-card) var(--wo-r-card) 0 0;
}
.wc-block-grid__product-image img {
  width: 100% !important; aspect-ratio: 1/1; object-fit: cover; padding: 0;
  transition: transform 0.4s var(--wo-ease);
}
li.wc-block-grid__product:hover .wc-block-grid__product-image img { transform: scale(1.06); }
.wc-block-grid__product-title {
  font-family: var(--wo-font-display); font-weight: 700; color: var(--wo-on-dark);
  font-size: var(--wp--preset--font-size--h3); padding: 16px 18px 0; line-height: 1.2; margin: 0;
  text-align: left;
  /* Máximo 2 líneas + altura mínima de 2 líneas → tarjetas parejas */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: break-word; min-height: 2.4em;
}
.wc-block-grid__product-price {
  color: var(--wo-on-dark); font-family: var(--wo-font-num); font-weight: 700;
  font-variant-numeric: tabular-nums; padding: 6px 18px 0; margin: 0;
  font-size: var(--wp--preset--font-size--price); text-align: left;
  /* del + ins en fila con salto limpio: el precio final nunca se parte */
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px;
}
.wc-block-grid__product-price del { color: var(--wo-text-3); font-weight: 600; opacity: 1; font-size: 0.72em; }
.wc-block-grid__product-price ins { text-decoration: none; white-space: nowrap; }
.wc-block-grid__product-add-to-cart {
  width: auto !important; margin: 14px 16px 18px !important;
  margin-top: auto !important; /* botón siempre al fondo de la card */
  padding-top: 12px;
  display: flex; justify-content: center;
  flex-wrap: wrap; gap: 8px; /* el enlace "Ver carrito" del AJAX cae a su propia fila */
}
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product .add_to_cart_button,
.wc-block-grid__product .added_to_cart {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; max-width: 100%; box-sizing: border-box; white-space: nowrap;
  background: rgba(255,255,255,0.12) !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 999px; font-weight: 700;
  padding: 10px 18px; min-height: 44px; font-size: 14px;
  text-decoration: none !important;
  transition: background var(--wo-dur) var(--wo-ease), color var(--wo-dur) var(--wo-ease), border-color var(--wo-dur) var(--wo-ease);
}
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-grid__product .add_to_cart_button:hover,
.wc-block-grid__product .added_to_cart:hover {
  background: var(--wo-ember) !important; border-color: var(--wo-ember) !important; color: #fff !important;
}
/* Estados AJAX: cargando (atenuado) — el ✓ de confirmación lo pone Woo */
.wc-block-grid__product .add_to_cart_button.loading,
.woocommerce ul.products li.product .button.loading { opacity: 0.6; pointer-events: none; }
.woocommerce ul.products li.product .button.loading { padding-right: 2.618em; }
.wc-block-grid__product-onsale {
  position: absolute !important; top: -10px; left: 14px; z-index: 3; right: auto;
  min-height: 28px; padding: 0 14px !important; line-height: 28px; margin: 0 !important;
  background: var(--wo-ember) !important; color: #fff !important;
  border: 0 !important; border-radius: 999px !important;
  box-shadow: 0 6px 16px rgba(228,89,43,0.4);
  font-family: var(--wo-font-num); font-weight: 700; font-size: 12px; text-transform: none;
}

/* ============================================================
   TIENDA · layout con sidebar de filtros (estilo librería)
   ============================================================ */
.wo-shop__layout {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: 40px; align-items: start;
}
.wo-shop__filters {
  position: sticky; top: 96px;
  /* El panel puede ser más alto que la pantalla: scroll propio */
  max-height: calc(100vh - 112px);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--wo-border-dark) transparent;
  padding-right: 4px;
}
.wo-filter-heading {
  font-family: var(--wo-font-display); font-weight: 700;
  font-size: 17px; color: var(--wo-text); margin: 0 0 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  cursor: pointer; user-select: none;
}
/* Cada sección de filtros se abre/cierra (– / +) */
.wo-filter-heading::after { content: "–"; color: var(--wo-ember); font-size: 22px; font-weight: 700; line-height: 1; }
.is-closed .wo-filter-heading { margin-bottom: 0; }
.is-closed .wo-filter-heading::after { content: "+"; }
.wo-filter-box.is-closed > :not(.wo-filter-heading),
.wp-block-woocommerce-filter-wrapper.is-closed > :not(.wo-filter-heading) { display: none; }
/* Botón "Filtros y categorías" (solo móvil, lo inyecta el tema) */
.wo-filters-toggle { display: none; }
.wo-filter-box {
  background: #fff; border: 1px solid var(--wo-border-light);
  border-radius: var(--wo-r-card); padding: 20px; margin-bottom: 16px;
}
.wo-shop__filters .wp-block-woocommerce-filter-wrapper {
  background: #fff; border: 1px solid var(--wo-border-light);
  border-radius: var(--wo-r-card); padding: 20px; margin-bottom: 16px;
}
.wo-shop__filters .wp-block-woocommerce-filter-wrapper .wo-filter-heading { margin-bottom: 8px; }
.wo-filter-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wo-filter-cats li a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 10px; margin-inline: -10px; border-radius: 10px;
  color: var(--wo-text-2, #3d4654); text-decoration: none; font-size: 15px; font-weight: 600;
}
.wo-filter-cats li a:hover { background: var(--wo-mist); color: var(--wo-text); }
.wo-filter-cats li.is-current a { color: var(--wo-ember); }
.wo-filter-count {
  font-size: 12px; font-weight: 700; color: var(--wo-text-3);
  background: var(--wo-mist); border-radius: 999px; padding: 2px 8px;
}
.wo-filter-box--help p { margin: 0 0 12px; font-weight: 600; color: var(--wo-text); }
.wo-filter-box--help .wo-wa-pill { width: 100%; justify-content: center; }
/* Slider de precio en ámbar (nada de verdes/azules por defecto) */
.wo-shop__filters .wc-block-price-filter__range-input-progress { --range-color: var(--wo-ember); }
.wo-shop__filters .wc-block-components-price-slider__range-input-progress { --range-color: var(--wo-ember); }
.wo-shop__filters .wc-block-price-filter__range-input::-webkit-slider-thumb,
.wo-shop__filters .wc-block-components-price-slider__range-input::-webkit-slider-thumb { background: var(--wo-ember); }
/* Barra de resultado/orden del loop */
.wo-shop__main .woocommerce-result-count { color: var(--wo-text-3); font-size: 14px; margin: 4px 0 16px; }
.wo-shop__main .woocommerce-ordering { margin: 0 0 16px; }
.wo-shop__main .woocommerce-ordering select {
  background: #fff; border: 1px solid var(--wo-border-light); border-radius: 999px;
  padding: 10px 36px 10px 16px; font-weight: 600; font-size: 14px; color: var(--wo-text);
}
@media (max-width: 960px) {
  .wo-shop__layout { grid-template-columns: 1fr; gap: 24px; }
  .wo-shop__filters { position: static; }
}

/* ============================================================
   PÁGINA DE PRODUCTO · galería con miniaturas + pestañas pill
   ============================================================ */
/* Relacionados: 5 tarjetas en UNA fila que llena el ancho */
.wo-pdp .related.products ul.products {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1100px) and (min-width: 701px) {
  .wo-pdp .related.products ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wo-pdp .related.products ul.products li.product:nth-child(n+4) { display: none; }
}

.wo-pdp .woocommerce-product-gallery {
  background: var(--wo-photo-tile); border-radius: var(--wo-r-card); overflow: hidden;
  padding-bottom: 4px;
}
.wo-pdp .woocommerce-product-gallery img { object-fit: contain; }
/* Miniaturas: fila de fotos PEQUEÑAS bajo la imagen principal.
   Selectores con div.product para ganarle al width en % de WooCommerce. */
.wo-pdp div.product div.images .flex-control-thumbs,
.wo-pdp .woocommerce-product-gallery ol.flex-control-nav {
  display: flex !important; flex-wrap: wrap; gap: 10px;
  margin: 12px; padding: 0; list-style: none;
}
.wo-pdp div.product div.images .flex-control-thumbs li {
  width: 68px !important; margin: 0 !important; padding: 0 !important; float: none !important;
}
.wo-pdp div.product div.images .flex-control-thumbs img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  border-radius: 12px; border: 2px solid transparent;
  cursor: pointer; opacity: 0.65;
  transition: opacity var(--wo-dur) var(--wo-ease), border-color var(--wo-dur) var(--wo-ease);
}
.wo-pdp div.product div.images .flex-control-thumbs img:hover { opacity: 1; }
.wo-pdp div.product div.images .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--wo-ember); }
/* Solo 3 visibles; el resto detrás del botón "+N fotos" (JS del tema) */
.wo-pdp .flex-control-thumbs.is-capped li:nth-child(n+4) { display: none !important; }
.wo-thumbs-more {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 12px 12px; padding: 8px 16px; min-height: 40px;
  background: #fff; color: var(--wo-text);
  border: 1px solid var(--wo-border-light); border-radius: 999px;
  font-weight: 700; font-size: 13px; cursor: pointer;
  transition: background var(--wo-dur) var(--wo-ease), color var(--wo-dur) var(--wo-ease);
}
.wo-thumbs-more:hover { background: var(--wo-ember); border-color: var(--wo-ember); color: #fff; }
/* Pestañas de información como BOTONES PILL (Descripción · Garantía y envío).
   WooCommerce decora ul.tabs con bordes/pseudo-elementos y pinta el activo:
   se anula TODO eso con especificidad div.product + !important. */
.wo-pdp .woocommerce-tabs { max-width: 1200px; margin-top: 40px; }
.wo-pdp div.product .woocommerce-tabs ul.wc-tabs,
.wo-pdp div.product .woocommerce-tabs ul.tabs {
  display: flex; flex-direction: row; gap: 6px;
  width: max-content; max-width: 100%; overflow: visible; overflow-x: auto;
  margin: 0 0 18px !important; padding: 6px !important; list-style: none;
  position: static;
  background: #fff; border: 1px solid var(--wo-border-light); border-radius: 999px;
}
.wo-pdp div.product .woocommerce-tabs ul.tabs::before,
.wo-pdp div.product .woocommerce-tabs ul.tabs::after,
.wo-pdp div.product .woocommerce-tabs ul.tabs li::before,
.wo-pdp div.product .woocommerce-tabs ul.tabs li::after {
  content: none !important; display: none !important;
  border: 0 !important; box-shadow: none !important;
}
.wo-pdp div.product .woocommerce-tabs ul.tabs li {
  background: none !important; border: 0 !important; box-shadow: none !important;
  margin: 0 !important; padding: 0 !important; border-radius: 999px;
}
.wo-pdp div.product .woocommerce-tabs ul.tabs li a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 22px !important; min-height: 42px; border-radius: 999px; white-space: nowrap;
  font-family: var(--wo-font-display); font-weight: 700 !important; font-size: 14.5px;
  color: var(--wo-text-3) !important; text-decoration: none;
  transition: background var(--wo-dur) var(--wo-ease), color var(--wo-dur) var(--wo-ease);
}
.wo-pdp div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--wo-text) !important; }
.wo-pdp div.product .woocommerce-tabs ul.tabs li.active { background: none !important; }
.wo-pdp div.product .woocommerce-tabs ul.tabs li.active a {
  background: var(--wo-obsidian) !important; color: #fff !important;
}
.wo-pdp div.product .woocommerce-tabs .panel {
  padding: 4px 0 22px; margin: 0; border: 0; box-shadow: none;
  color: var(--wo-text-2, #3d4654);
}
.wo-pdp .woocommerce-tabs .panel > h2:first-of-type { display: none; }

/* --- Botón "Pagar con Link BAC": solo el botón, ancho completo (estilo PayPal) --- */
.wo-paylink { margin: 14px 0; padding: 0; background: transparent; border: 0; }
.wo-paylink__label, .wo-paylink__note { display: none; }
.wo-paylink__btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 100%; box-sizing: border-box;
  background: var(--wo-bac, #E2231A); color: #fff !important;
  border-radius: 999px; padding: 12px 24px; min-height: 52px;
  font-weight: 700; font-size: 16px; text-decoration: none !important;
  transition: background var(--wo-dur) var(--wo-ease);
}
.wo-paylink__btn:hover { background: var(--wo-bac-hover, #C01D15); }

/* --- Botón "Consultar por WhatsApp" del producto: EXACTAMENTE igual que el BAC --- */
.wo-pdp .wo-pdp-whatsapp,
.wo-pdp .wo-btn--whatsapp {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 100%; box-sizing: border-box;
  margin: 14px 0 0; padding: 12px 24px; min-height: 52px;
  background: #25D366; color: #fff !important;
  border: 0; border-radius: 999px;
  font-weight: 700; font-size: 16px; text-decoration: none !important;
  transition: background var(--wo-dur) var(--wo-ease);
}
.wo-pdp .wo-pdp-whatsapp:hover,
.wo-pdp .wo-btn--whatsapp:hover { background: #1EBE5A; color: #fff !important; }

/* Meta del producto: ocultar "Etiqueta:" (duplica la línea "Marca:") */
.wo-pdp .product_meta .tagged_as { display: none; }

/* Wordmark/logo BAC en blanco dentro de los botones de pago */
.wo-bac-logo {
  font-family: var(--wo-font-display); font-weight: 900; font-size: 0.95em;
  letter-spacing: 0.04em; color: #fff; line-height: 1;
  padding-right: 10px; border-right: 1px solid rgba(255,255,255,0.45);
}
/* Versión con imagen (mediateca "logo bac"): se pinta en blanco sea cual sea su color */
.wo-bac-logo--img { display: inline-flex; align-items: center; }
.wo-bac-logo--img img {
  height: 22px; width: auto; display: block;
  filter: brightness(0) invert(1);
}
.wo-paylink__note { margin: 10px 0 0; font-size: 13px; color: var(--wo-text-3); }

/* --- Descripción del producto: tarjeta de cristal con aire a los lados --- */
.wo-pdp .woocommerce-Tabs-panel--description {
  background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 12px 40px rgba(11,14,20,0.08), inset 0 1px 0 rgba(255,255,255,0.7);
  border-radius: var(--wo-r-card);
  padding: clamp(28px, 5vw, 60px) !important;
  line-height: 1.75;
}
.wo-pdp .woocommerce-Tabs-panel--description p { margin-bottom: 1.1em; }
.wo-pdp .woocommerce-Tabs-panel--description h3,
.wo-pdp .woocommerce-Tabs-panel--description h4 {
  font-family: var(--wo-font-display); color: var(--wo-text);
  margin: 22px 0 10px; padding-bottom: 8px;
  border-bottom: 2px solid var(--wo-ember); display: inline-block;
}
.wo-pdp .woocommerce-Tabs-panel--description ul {
  list-style: none; margin: 20px 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;
}
.wo-pdp .woocommerce-Tabs-panel--description ul li {
  display: flex; align-items: center; gap: 14px; margin: 0;
  padding: 16px 20px; line-height: 1.5;
  background: rgba(255,255,255,0.6);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.8); border-radius: 16px;
  box-shadow: 0 4px 16px rgba(11,14,20,0.06), inset 0 1px 0 rgba(255,255,255,0.8);
}
.wo-pdp .woocommerce-Tabs-panel--description ul li::before {
  content: "✓"; flex-shrink: 0; align-self: center;
  display: inline-grid; place-items: center;
  width: 24px; height: 24px;
  background: var(--wo-ember); color: #fff;
  border-radius: 999px; font-size: 12px; font-weight: 700;
}
/* El enlace de pago crudo dentro de la descripción sobra: ya hay botón arriba.
   Se oculta el párrafo del enlace y el párrafo "Link de Pago:" que lo precede. */
.wo-pdp .woocommerce-Tabs-panel--description p:has(a[href*="baccredomatic.com"]),
.wo-pdp .woocommerce-Tabs-panel--description p:has(+ p a[href*="baccredomatic.com"]) { display: none; }

/* --- Mini-carrito: sin descripciones largas (el "Link de Pago:" feo) --- */
.wc-block-components-product-metadata__description { display: none !important; }

/* ============================================================
   RECIBO LINK BAC · links de pago por producto (watch-o-core)
   ============================================================ */
.wo-bac-pay {
  margin: 24px 0; padding: clamp(20px, 3vw, 32px);
  background: #fff; border: 1px solid var(--wo-border-light);
  border-left: 4px solid var(--wo-ember); border-radius: var(--wo-r-card);
}
.wo-bac-pay__title { font-family: var(--wo-font-display); margin: 0 0 14px; }
.wo-bac-pay__steps { margin: 0 0 20px 20px; padding: 0; color: var(--wo-text-2, #3d4654); }
.wo-bac-pay__steps li { margin-bottom: 6px; }
.wo-bac-pay__list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wo-bac-pay__item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 14px 18px; background: var(--wo-mist);
  border: 1px solid var(--wo-border-light); border-radius: 14px;
}
.wo-bac-pay__name { font-weight: 700; color: var(--wo-text); flex: 1 1 200px; }
.wo-bac-pay__price { font-family: var(--wo-font-num); font-weight: 700; }
.wo-bac-pay__btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--wo-bac, #E2231A); color: #fff !important;
  border-radius: 999px; padding: 10px 20px; min-height: 44px;
  font-weight: 700; font-size: 14px; text-decoration: none !important;
}
.wo-bac-pay__btn:hover { background: var(--wo-bac-hover, #C01D15); }
/* Botón BAC por producto en la página del carrito */
.wo-cart-bac {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px;
  background: var(--wo-bac, #E2231A); color: #fff !important;
  border-radius: 999px; padding: 8px 16px; min-height: 38px;
  font-weight: 700; font-size: 13px; text-decoration: none !important;
  transition: background var(--wo-dur) var(--wo-ease);
}
.wo-cart-bac:hover { background: var(--wo-bac-hover, #C01D15); }
.wo-bac-pay__pending { font-size: 14px; color: var(--wo-text-3); }
.wo-bac-pay__wa {
  display: inline-flex; align-items: center; gap: 8px;
  background: #25D366; color: #fff !important;
  border-radius: 999px; padding: 12px 24px; min-height: 48px;
  font-weight: 700; text-decoration: none !important;
}
.wo-bac-pay__wa:hover { background: #1EBE5A; }
.wo-bac-pay__note { margin: 14px 0 0; font-size: 13px; color: var(--wo-text-3); }

/* ============================================================
   CHECKOUT · checkbox de newsletter
   ============================================================ */
.wo-newsletter-optin { margin: 12px 0; }
.wo-newsletter-optin label { font-size: 14px; font-weight: 600; color: var(--wo-text); }
.wo-newsletter-optin input[type="checkbox"] { accent-color: var(--wo-ember); width: 18px; height: 18px; }

/* ============================================================
   POPUP NEWSLETTER (solo Tienda) — markup en watch-o-core
   ============================================================ */
body.wo-nl-open { overflow: hidden; }
.wo-nl { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 20px; }
/* El atributo hidden debe GANARLE al display:grid de arriba (si no, la X no cierra) */
.wo-nl[hidden] { display: none !important; }
.wo-nl__backdrop { position: absolute; inset: 0; background: rgba(11,14,20,0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wo-nl__card {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  width: min(860px, 100%); max-height: min(620px, 92vh);
  background: #0d1118; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 24px; overflow: hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,0.5);
  animation: wo-nl-in 0.45s var(--wo-ease) both;
}
@keyframes wo-nl-in { from { transform: translateY(28px) scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }
.wo-nl__media { position: relative; min-height: 300px; }
.wo-nl__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wo-nl__body { padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; justify-content: center; }
.wo-nl__brand {
  margin: 0 0 14px; color: var(--wo-on-dark-2);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
}
.wo-nl__title { font-family: var(--wo-font-display); color: #fff; font-size: clamp(28px, 4vw, 40px); margin: 0 0 10px; line-height: 1.05; }
.wo-nl__title span { color: var(--wo-ember); }
.wo-nl__sub { color: var(--wo-on-dark-2); margin: 0 0 20px; font-size: 15px; }
.wo-nl__label { display: block; color: var(--wo-on-dark-2); font-size: 13px; font-weight: 600; margin: 10px 0 6px; }
.wo-nl__input {
  width: 100%; min-height: 46px; padding: 10px 14px;
  background: rgba(255,255,255,0.07); color: #fff;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 12px;
}
.wo-nl__input:focus { outline: none; border-color: var(--wo-ember); box-shadow: var(--wo-focus); }
.wo-nl__btn {
  width: 100%; margin-top: 18px; min-height: 48px;
  background: #fff; color: var(--wo-text); border: 0; border-radius: 999px;
  font-weight: 700; font-size: 15px; cursor: pointer;
  transition: background var(--wo-dur) var(--wo-ease), color var(--wo-dur) var(--wo-ease);
}
.wo-nl__btn:hover { background: var(--wo-ember); color: #fff; }
.wo-nl__msg { margin: 12px 0 0; min-height: 1.2em; color: var(--wo-ember); font-weight: 600; font-size: 14px; }
.wo-nl__close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px; border: 0; border-radius: 999px;
  background: rgba(255,255,255,0.12); color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer;
}
.wo-nl__close:hover { background: rgba(255,255,255,0.25); }
@media (max-width: 700px) {
  .wo-nl__card { grid-template-columns: 1fr; max-height: 92vh; overflow: auto; }
  .wo-nl__media { min-height: 160px; }
}

/* ============================================================
   GRID DE MARCAS (/marca/) — shortcode [watch_o_marcas]
   ============================================================ */
.wo-brand-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px; margin: 28px 0;
}
.wo-brand-card { display: flex; flex-direction: column; }
.wo-brand-card__main {
  display: flex; flex-direction: column; flex: 1;
  background: linear-gradient(160deg, var(--wo-navy), var(--wo-obsidian));
  border: 1px solid var(--wo-border-dark);
  border-radius: var(--wo-r-card); overflow: hidden;
  text-decoration: none !important;
  transition: transform var(--wo-dur) var(--wo-ease), box-shadow var(--wo-dur) var(--wo-ease);
}
.wo-brand-card__main:hover { transform: var(--wp--custom--motion--lift); box-shadow: var(--wo-shadow-dark); }
.wo-brand-card__main img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  transition: transform 0.4s var(--wo-ease);
}
.wo-brand-card__main:hover img { transform: scale(1.05); }
.wo-brand-card__body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 16px 18px 18px; }
.wo-brand-card__name {
  font-family: var(--wo-font-display); font-weight: 800; font-size: 20px;
  color: #fff; width: 100%;
}
.wo-brand-card__count {
  font-size: 12px; font-weight: 700; color: var(--wo-on-dark-2);
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px; padding: 4px 10px;
}
.wo-brand-card__cta { color: var(--wo-ember); font-weight: 700; font-size: 14px; margin-left: auto; }
.wo-brand-card__guide {
  margin-top: 8px; font-size: 13px; font-weight: 600;
  color: var(--wo-text-3); text-decoration: none;
}
.wo-brand-card__guide:hover { color: var(--wo-ember); }
@media (max-width: 700px) {
  .wo-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .wo-brand-card__name { font-size: 16px; }
  .wo-brand-card__body { padding: 12px; }
}

/* (El bloque de optimización móvil vive al FINAL del archivo: a igual
   especificidad gana la última regla, y aquí quedaba ANTES de los overrides
   de WooCommerce — por eso las reglas móviles del loop clásico no aplicaban.) */

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */
:where(a, button, input, select, textarea, .wp-element-button, .wo-btn, .wo-buy-pill):focus-visible {
  outline: 2px solid var(--wo-ember);
  outline-offset: 2px;
  box-shadow: var(--wo-focus);
}
/* Objetivos táctiles ≥ 44px en interactivos compactos */
.wo-island a, .wo-island button, .wo-icon-btn { min-height: 44px; min-width: 44px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .wo-card:hover { transform: none; }
}

/* Nada debe empujar la página hacia los lados (scroll horizontal fantasma) */
html, body { overflow-x: clip; }
/* Las secciones tampoco dejan escapar contenido a los lados
   (clip solo horizontal: los badges de oferta sobresalen hacia arriba sin problema) */
.wo-section { overflow-x: clip; }

/* Rojo BAC Credomatic para los botones de Link de pago */
:root { --wo-bac: #E2231A; --wo-bac-hover: #C01D15; }

/* ============================================================
   ANIMACIONES (respetan prefers-reduced-motion)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* La isla del header entra deslizándose */
  .wo-island { animation: wo-island-in 0.55s var(--wo-ease) both; }
  @keyframes wo-island-in {
    from { transform: translateY(-18px); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
  /* Hero: zoom lentísimo tipo Ken Burns sobre la foto */
  .wo-hero2__bg { animation: wo-kenburns 22s ease-in-out infinite alternate; }
  @keyframes wo-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.07); }
  }
  /* Contenido del hero aparece subiendo */
  .wo-hero2__copy { animation: wo-rise-in 0.7s var(--wo-ease) 0.1s both; }
  .wo-hero2__shopcard { animation: wo-float 5s ease-in-out infinite alternate, wo-rise-in 0.7s var(--wo-ease) 0.3s both; }
  @keyframes wo-rise-in {
    from { transform: translateY(26px); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
  @keyframes wo-float {
    from { translate: 0 0; }
    to   { translate: 0 -12px; }
  }
}
/* Secciones aparecen al hacer scroll (solo navegadores que lo soportan) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .wo-section > .wp-block-group,
    .wo-section .wc-block-grid,
    .wo-banner3 {
      animation: wo-scroll-rise both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
    /* Categorías: entrada ESCALONADA tarjeta por tarjeta (con scroll timelines
       el stagger se hace con animation-range, no con delays de tiempo) */
    .wo-cat-grid .wo-cat-card {
      animation: wo-scroll-rise both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
    .wo-cat-grid .wo-cat-card:nth-child(2) { animation-range: entry 8% entry 48%; }
    .wo-cat-grid .wo-cat-card:nth-child(3) { animation-range: entry 16% entry 56%; }
    .wo-cat-grid .wo-cat-card:nth-child(4) { animation-range: entry 24% entry 64%; }
    @keyframes wo-scroll-rise {
      from { opacity: 0.001; transform: translateY(32px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* ============================================================
   MICROINTERACCIONES · agregar al carrito y tarjetas
   ============================================================ */
/* Pop del botón al hacer clic en "Añadir al carrito" (clase la pone el JS) */
@keyframes wo-atc-pop { 50% { transform: scale(0.94); } }
.wo-atc-clicked { animation: wo-atc-pop 0.3s var(--wo-ease); }

/* Pulso del contador del mini-carrito al agregar */
@keyframes wo-badge-pop {
  0%   { scale: 1; }
  40%  { scale: 1.45; }
  100% { scale: 1; }
}
.wo-island .wc-block-mini-cart__quantity-badge,
.wo-island .wc-block-mini-cart__badge { display: inline-flex; }
.wo-badge-pop { animation: wo-badge-pop 0.45s var(--wo-ease); }

/* Feedback táctil al presionar tarjetas y botones (scale individual:
   se COMPONE con los transforms animados, no pelea con ellos) */
.wo-cat-card:active,
.wo-brand-card__main:active,
li.wc-block-grid__product:active,
.woocommerce ul.products li.product:active { scale: 0.98; transition: scale 0.15s var(--wo-ease); }
.wo-cat-card, .wo-brand-card__main, li.wc-block-grid__product,
.woocommerce ul.products li.product { transition-property: transform, box-shadow, scale; }

/* ============================================================
   WOOCOMMERCE · overrides (estilo de marca; lógica en watch-o-core)
   ============================================================ */

/* Loop de tienda: convertir cada .product en card oscura sobre claro */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important; gap: 24px; margin: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  width: 100%;
}
/* Las columnas las decide el GRID: se anulan los anchos en % y floats
   que WooCommerce pone según .columns-N (rompían los relacionados) */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product {
  width: auto !important; max-width: none !important;
  float: none !important; margin: 0 !important; clear: none !important;
}
/* El clearfix de WooCommerce (::before/::after) se convierte en un ítem
   fantasma dentro de CSS Grid → celda vacía al inicio. Fuera. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { content: none !important; display: none !important; }
.woocommerce ul.products li.product {
  position: relative; margin: 0; width: auto; float: none; text-align: left;
  display: flex; flex-direction: column; /* para alinear el botón al fondo */
  background: var(--wo-surface); border: 1px solid var(--wo-border-dark);
  border-radius: var(--wo-r-card); overflow: visible; padding: 0;
  transition: transform var(--wo-dur) var(--wo-ease), box-shadow var(--wo-dur) var(--wo-ease);
}
.woocommerce ul.products li.product:hover { transform: var(--wp--custom--motion--lift); box-shadow: var(--wo-shadow-dark); }
.woocommerce ul.products li.product a img {
  margin: 0; width: 100%; aspect-ratio: 1/1; object-fit: cover;
  padding: 0; transition: transform 0.4s var(--wo-ease);
}
.woocommerce ul.products li.product a:hover img { transform: scale(1.06); }
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
  display: block; overflow: hidden;
  border-radius: var(--wo-r-card) var(--wo-r-card) 0 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--wo-font-display); font-weight: 700; color: var(--wo-on-dark);
  font-size: var(--wp--preset--font-size--h3); padding: 14px 18px 0; line-height: 1.2;
  /* Máximo 2 líneas + altura mínima de 2 líneas → filas parejas */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: break-word; min-height: 2.4em;
}
.woocommerce ul.products li.product .price {
  color: var(--wo-on-dark); font-family: var(--wo-font-num); font-weight: 700;
  font-variant-numeric: tabular-nums; padding: 6px 18px 0;
  font-size: var(--wp--preset--font-size--price);
  /* del + ins en fila; el precio final nunca se parte */
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px;
}
.woocommerce ul.products li.product .price del { color: var(--wo-text-3); font-weight: 600; opacity: 1; font-size: 0.72em; }
.woocommerce ul.products li.product .price ins { text-decoration: none; white-space: nowrap; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  margin: 14px 16px 18px; display: flex; align-items: center; justify-content: center; gap: 6px;
  width: calc(100% - 32px); max-width: calc(100% - 32px); box-sizing: border-box; white-space: nowrap;
  background: rgba(255,255,255,0.12); color: #fff;
  border: 1px solid rgba(255,255,255,0.28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 999px; font-weight: 700;
  padding: 10px 16px; min-height: 44px;
  transition: background var(--wo-dur) var(--wo-ease), border-color var(--wo-dur) var(--wo-ease);
}
.woocommerce ul.products li.product .button { margin-top: auto; } /* botón al fondo de la card */
.woocommerce ul.products li.product .added_to_cart { margin-top: -8px; min-height: 38px; font-size: 13px; }
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .added_to_cart:hover { background: var(--wo-ember); border-color: var(--wo-ember); color: #fff; }

/* Badge de descuento (onsale) → pill ámbar que SOBRESALE de la card */
.woocommerce span.onsale {
  position: absolute; top: -10px; left: 14px; right: auto; margin: 0; z-index: 3;
  min-height: 28px; min-width: 0; padding: 0 14px; line-height: 28px;
  background: var(--wo-ember); color: #fff; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(228,89,43,0.4);
  font-family: var(--wo-font-num); font-weight: 700; font-size: 12px;
}

/* Botones WooCommerce en general → pill ámbar */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce .single_add_to_cart_button {
  background: var(--wo-ember); color: #fff; border-radius: var(--wo-r-pill);
  font-family: var(--wo-font-body); font-weight: 700; padding: 14px 28px; border: 0;
  transition: background var(--wo-dur) var(--wo-ease);
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover { background: var(--wo-ember-hover); color: #fff; }
.woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--wo-ember); }

/* Campos de formulario / checkout */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection {
  background: #fff; border: 1px solid var(--wo-border-light); border-radius: var(--wo-r-input);
  min-height: 48px; padding: 12px 14px; color: var(--wo-text);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--wo-ember); outline: none; box-shadow: var(--wo-focus);
}

/* Precio en single product */
.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: var(--wo-text); font-family: var(--wo-font-num); font-weight: 700;
  font-variant-numeric: tabular-nums; font-size: var(--wp--preset--font-size--price-lg);
}
.woocommerce div.product p.price del { color: var(--wo-text-3); font-size: 0.7em; }

/* Quitar cualquier verde por defecto de mensajes Woo → usar tinta/ámbar */
.woocommerce-message, .woocommerce-info { border-top-color: var(--wo-ember); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--wo-ember); }

/* ============================================================
   VARIANTES DEL BLOQUE BOTÓN (registradas en functions.php)
   ============================================================ */
.wp-block-button.is-style-wo-primary > .wp-block-button__link { background: var(--wo-ember); color: #fff; border-radius: var(--wo-r-pill); }
.wp-block-button.is-style-wo-primary > .wp-block-button__link:hover { background: var(--wo-ember-hover); color: #fff; }

.wp-block-button.is-style-wo-on-dark > .wp-block-button__link { background: #fff; color: var(--wo-text); border-radius: var(--wo-r-pill); }
.wp-block-button.is-style-wo-on-dark > .wp-block-button__link:hover { background: var(--wo-cloud); color: var(--wo-text); }

.wp-block-button.is-style-wo-secondary > .wp-block-button__link { background: transparent; color: var(--wo-text); border: 1.5px solid rgba(11,14,20,0.2); border-radius: var(--wo-r-pill); }
.wp-block-button.is-style-wo-secondary > .wp-block-button__link:hover { border-color: var(--wo-text); background: transparent; }
.is-on-dark .wp-block-button.is-style-wo-secondary > .wp-block-button__link { color: #fff; border-color: var(--wo-border-dark); }

.wp-block-button.is-style-wo-whatsapp > .wp-block-button__link { background: var(--wo-whatsapp); color: #062B16; border-radius: var(--wo-r-pill); }
.wp-block-button.is-style-wo-whatsapp > .wp-block-button__link:hover { background: #20C15D; color: #062B16; }

/* ============================================================
   MARKUP DEL PLUGIN watch-o-core (el estilo vive aquí, en el tema)
   ============================================================ */

/* Botón flotante de WhatsApp (verde SOLO aquí) */
.wo-wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 200;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 0 18px 0 14px;
  border-radius: 999px; background: var(--wo-whatsapp); color: #062B16;
  text-decoration: none; font-weight: 700; font-size: 15px;
  box-shadow: var(--wo-shadow-product);
  transition: transform var(--wo-dur) var(--wo-ease), background var(--wo-dur) var(--wo-ease);
}
.wo-wa-float:hover { background: #20C15D; color: #062B16; transform: translateY(-2px); }
.wo-wa-float__label { line-height: 1; }
@media (max-width: 640px) {
  /* En mobile: círculo compacto (deja aire para la barra de compra fija) */
  .wo-wa-float { right: 14px; bottom: 84px; min-height: 52px; padding: 0; width: 52px; justify-content: center; }
  .wo-wa-float__label { display: none; }
}

/* Botón WhatsApp en la ficha (PDP) */
.wo-pdp-whatsapp { width: 100%; margin-top: 10px; }

/* Badges de confianza en PDP */
.wo-trust-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }

/* Aviso de envío bajo el precio */
.wo-ship-notice { color: var(--wo-text-2); font-size: 14px; margin: 6px 0 0; }

/* Métodos de pago (bloque/shortcode) */
.wo-pay-methods { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.wo-pay {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px; border: 1px solid var(--wo-border-light);
  border-radius: var(--wo-r-input); background: var(--wo-paper);
}
.is-on-dark .wo-pay { background: var(--wo-surface); border-color: var(--wo-border-dark); }
.wo-pay__name { font-weight: 700; color: var(--wo-text); }
.is-on-dark .wo-pay__name { color: var(--wo-on-dark); }
.wo-pay__desc { font-size: 14px; color: var(--wo-text-2); }
.is-on-dark .wo-pay__desc { color: var(--wo-on-dark-2); }

/* Avisos genéricos (envío / garantía) */
.wo-notice { font-size: 15px; color: var(--wo-text-2); }
.wo-notice--warranty { border-left: 3px solid var(--wo-gold); padding-left: 14px; }
.wo-notice__muted { color: var(--wo-text-3); font-size: 14px; }

/* Nota de checkout (comprobante simple) */
.wo-checkout-note {
  font-size: 14px; color: var(--wo-text-2);
  background: var(--wo-mist); border-radius: var(--wo-r-input);
  padding: 12px 14px; margin: 0 0 16px;
}

/* Campos ocultos del checkout simplificado */
.wo-hidden-field { display: none !important; }

/* Ítems de la barra de confianza */
.wo-trust__item { white-space: nowrap; }

/* ============================================================
   PATRONES (hero, por qué, categorías, banner)
   ============================================================ */

/* Hero: el wordmark queda detrás del contenido */
.wo-hero { position: relative; overflow: hidden; }
.wo-hero .wp-block-cover__inner-container { position: relative; }
.wo-hero__content { position: relative; z-index: 1; padding-block: var(--wo-section-y); }

/* Tarjetas "Por qué Watch-O" */
.wo-why-card {
  background: var(--wo-mist);
  border: 1px solid var(--wo-border-light);
  border-radius: var(--wp--custom--radius--card-sm);
  padding: 24px 22px;
}
.wo-why-card h3 { margin-top: 0; }
@media (max-width: 781px) {
  .wo-why-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; }
  .wo-why-grid .wp-block-column { width: auto !important; flex-basis: auto !important; margin: 0 !important; }
}

/* Grid de categorías (4 cards, responsive) */
.wo-cat-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1023px) { .wo-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .wo-cat-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }

/* Banner navy */
.wo-banner { border-radius: var(--wo-r-banner); overflow: hidden; }

/* ============================================================
   PDP (single product)
   ============================================================ */
/* Galería sobre tile claro con radio de card */
.wo-pdp .woocommerce-product-gallery img {
  background: var(--wo-photo-tile);
  border-radius: var(--wo-r-card);
}
.wo-pdp .product_title {
  font-family: var(--wo-font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: var(--wp--preset--font-size--h1);
}
/* Marca (categoría) como overline si el tema la muestra */
.wo-pdp .posted_in { color: var(--wo-text-3); font-size: 13px; }

/* Barra de compra fija en mobile: precio + Añadir siempre visibles */
@media (max-width: 640px) {
  .wo-pdp form.cart {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    display: flex; align-items: center; gap: 10px;
    margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.95);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--wo-border-light);
    box-shadow: 0 -8px 30px rgba(11,14,20,0.12);
  }
  .wo-pdp form.cart .quantity { margin: 0; }
  .wo-pdp form.cart .single_add_to_cart_button { flex: 1; min-height: 48px; }
  /* Deja aire al final del contenido para que la barra no tape nada */
  .wo-pdp { padding-bottom: 120px !important; }
}

/* ============================================================
   OPTIMIZACIÓN MÓVIL GLOBAL — SIEMPRE AL FINAL DEL ARCHIVO
   (a igual especificidad gana la última regla: si esto queda
   antes de los overrides de WooCommerce, se muere)
   ============================================================ */
@media (max-width: 960px) {
  /* Tienda: los filtros viven detrás de un botón; los productos se ven al instante */
  .wo-filters-toggle {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 48px; margin-bottom: 4px;
    background: #fff; color: var(--wo-text);
    border: 1px solid var(--wo-border-light); border-radius: 999px;
    font-weight: 700; font-size: 15px; cursor: pointer;
  }
  .wo-filters-toggle::after { content: "+"; color: var(--wo-ember); font-size: 22px; font-weight: 700; }
  .wo-filters-toggle.is-open::after { content: "–"; }
  .wo-shop__filters { display: none; }
  .wo-shop__filters.is-open { display: block; }
}

@media (max-width: 700px) {
  /* iOS hace zoom automático si un input tiene letra menor a 16px — evitarlo */
  input, select, textarea { font-size: 16px !important; }

  /* Menos margen lateral en móvil → las tarjetas llenan la pantalla */
  :root { --wp--style--root--padding-left: 12px; --wp--style--root--padding-right: 12px; }
  .has-global-padding { padding-left: 12px !important; padding-right: 12px !important; }
  .has-global-padding .has-global-padding { padding-left: 0 !important; padding-right: 0 !important; }

  /* Selector de orden a todo el ancho, sin desbordes */
  .wo-shop__main .woocommerce-ordering { width: 100%; }
  .wo-shop__main .woocommerce-ordering select { width: 100%; box-sizing: border-box; }
  .wo-shop__main .woocommerce-result-count { font-size: 13px; margin: 2px 0 10px; }

  /* Menos aire vertical: secciones y tienda compactas, menos scroll */
  .wo-section { padding-top: 44px; padding-bottom: 44px; }
  .wo-shop { padding-top: 20px !important; }
  .wo-shop .wp-block-query-title { font-size: clamp(30px, 9vw, 40px); }

  /* ---- 2 relojes por fila en TODAS las cuadrículas ---- */
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.wc-block-grid__products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
  }

  /* Tarjetas compactas: tipografías y aires pensados para ~165px de ancho */
  .wc-block-grid__product-title,
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px; padding: 10px 12px 0; line-height: 1.25; min-height: 2.5em;
  }
  .wc-block-grid__product-price,
  .woocommerce ul.products li.product .price {
    font-size: 16px; padding: 4px 12px 0; column-gap: 5px;
  }
  .wc-block-grid__product-add-to-cart { margin: 10px 10px 12px !important; margin-top: auto !important; padding-top: 8px; gap: 6px; }
  .wc-block-grid__product-add-to-cart .wp-block-button__link,
  .wc-block-grid__product .add_to_cart_button,
  .wc-block-grid__product .added_to_cart {
    min-height: 40px; font-size: 12.5px; padding: 8px 8px;
  }
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .added_to_cart {
    margin: 10px 10px 12px; width: calc(100% - 20px); max-width: calc(100% - 20px);
    min-height: 40px; font-size: 12.5px; padding: 8px 8px;
  }
  .woocommerce ul.products li.product .button { margin-top: auto; }
  .woocommerce ul.products li.product .added_to_cart { margin-top: -6px; min-height: 34px; font-size: 12px; }

  /* Badges de oferta compactos */
  .wc-block-grid__product-onsale,
  .woocommerce span.onsale {
    font-size: 11px; top: -8px; left: 10px;
    padding: 0 10px !important; line-height: 24px; min-height: 24px;
  }

  /* Cards de marca de la home (patrón .wo-card) */
  .wo-card__name { font-size: 15px; line-height: 1.25; }
  .wo-card__price { font-size: 16px; }
  .wo-card__body { padding: 12px; }

  /* Hero más compacto */
  .wo-hero2 { padding-top: 150px; padding-bottom: 90px; min-height: 0; }
  body.home .wo-hero2 { margin-top: -118px; }

  /* Banner y newsletter compactos */
  .wo-banner3__content { padding: 24px 20px; }

  /* Ficha de producto en celular */
  .wo-pdp { padding-top: 12px !important; }
  .wo-pdp div.product div.images,
  .wo-pdp div.product div.summary { float: none; width: 100%; }
  .wo-pdp div.product div.summary { margin-top: 18px; }
  .wo-pdp div.product .product_title { font-size: clamp(24px, 7vw, 32px); }
  .wo-pdp form.cart .single_add_to_cart_button { width: 100%; justify-content: center; }
  .wo-pdp .woocommerce-tabs { margin-top: 24px; }
  .wo-pdp .woocommerce-Tabs-panel--description { padding: 20px !important; }
  .wo-pdp .woocommerce-Tabs-panel--description ul { grid-template-columns: 1fr; gap: 10px; }
  .wo-bac-pay__item { padding: 12px; }
  .wo-bac-pay__btn, .wo-bac-pay__wa { width: 100%; justify-content: center; }

  /* Footer compacto */
  .wo-footer .wp-block-columns { gap: 20px !important; }
}