/* DUAAL Store — CSS a medida.
   theme.json hace el grueso (tokens + botones/links/headings de los bloques de
   Woo). Aquí van solo los toques que no caben en tokens: la barra de anuncios,
   el hero del producto, la fila de garantías, el newsletter, y overrides de
   clases reales de WooCommerce (badge de oferta, estrellas, foto sobre espacio).
   Las clases .duaal-* las controlan los patterns del theme (markup propio). */

:root {
  --duaal-space: #08081a;
  --duaal-space-2: #0d0b22;
  --duaal-cyan: #00cccc;
  --duaal-magenta: #ff0066;
  --duaal-gold: #f2a93b;
  --duaal-ink: #171717;
  --duaal-line: #e8e6df;
}

/* ── Barra de anuncios (en el header part) ── */
.duaal-announce {
  background: var(--duaal-ink);
  color: #dff6f6;
  font-family: 'Roboto Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 8px 16px;
}
.duaal-announce strong {
  color: var(--duaal-cyan);
  font-weight: 500;
}

/* ── Hero del producto (pattern duaal-store/hero) ── */
.duaal-hero {
  background: linear-gradient(160deg, var(--duaal-space) 0%, var(--duaal-space-2) 100%);
  color: #f2f6f8;
  border-radius: 20px;
  overflow: hidden;
}
.duaal-hero :where(h1, h2) {
  color: #f2f6f8;
}
.duaal-hero .duaal-eyebrow {
  font-family: 'Roboto Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--duaal-cyan);
}
.duaal-hero-price {
  font-family: 'Quicksand', system-ui, sans-serif;
  font-weight: 700;
  font-size: 30px;
  color: #f2f6f8;
}
.duaal-hero-art img {
  filter: drop-shadow(0 20px 44px rgba(0, 0, 0, 0.55));
}

/* ── Garantías (pattern duaal-store/props) ── */
.duaal-prop {
  text-align: center;
}
.duaal-prop .duaal-prop-ico {
  color: var(--duaal-cyan);
}

/* ── Newsletter (pattern duaal-store/newsletter) ── */
.duaal-news {
  background: var(--duaal-ink);
  color: #eef4f4;
  border-radius: 20px;
}
.duaal-news :where(h2, h3) {
  color: #fff;
}

/* ── Overrides de WooCommerce (clases reales de Woo) ── */

/* Badge de oferta -> magenta de marca (clásico y bloques). */
.woocommerce span.onsale,
.wc-block-components-product-sale-badge,
.wp-block-woocommerce-product-sale-badge .wc-block-components-product-sale-badge {
  background: var(--duaal-magenta);
  color: #fff;
  border-radius: 999px;
  font-family: 'Roboto Mono', ui-monospace, monospace;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* Estrellas de reseña -> oro. */
.woocommerce .star-rating span::before,
.wc-block-components-product-rating__stars,
.wc-block-grid__product-rating .star-rating span::before {
  color: var(--duaal-gold);
}

/* Foto de producto sobre fondo espacio: mantiene el universo del juego dentro
   del chrome claro (guía del design system). */
.woocommerce-product-gallery,
.wc-block-components-product-image,
.wp-block-woocommerce-product-image,
ul.products li.product .woocommerce-LoopProduct-link img,
.wc-block-grid__product-image {
  background: linear-gradient(160deg, var(--duaal-space) 0%, var(--duaal-space-2) 100%);
  border-radius: 12px;
}

/* Precio con la display font. */
.woocommerce div.product p.price,
.wc-block-components-product-price {
  font-family: 'Quicksand', system-ui, sans-serif;
  font-weight: 700;
  color: var(--duaal-ink);
}
.woocommerce div.product p.price del,
.wc-block-components-product-price del {
  color: #8a9ca0;
  font-weight: 400;
}

/* Tarjeta de producto con borde de marca. */
ul.products li.product,
.wc-block-grid__product,
.wp-block-woocommerce-product-template li {
  border: 1px solid var(--duaal-line);
  border-radius: 12px;
  padding: 10px;
  background: #fff;
}