/*
Theme Name: Blocksy Child — Yoy Games
Template: blocksy
Version: 1.0
Description: Child theme de Yoy Games (sale del de Empires 3.23) — tienda oscura de recargas y gift cards. Todo el código y estilos de la casa viven aquí, a salvo de actualizaciones del padre.
*/

/* ── Cards de producto: fondo, borde y hover ── */
.woocommerce ul.products li.product,
[data-products] .product {
  background: var(--yoy-sup);
  border: 1px solid var(--yoy-linea);
  border-radius: 12px;
  padding: 10px 10px 16px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product:hover,
[data-products] .product:hover {
  box-shadow: 0 8px 24px rgba(15,14,23,.12);
  transform: translateY(-2px);
}

/* ── Precio protagonista, todo en una línea ── */
.woocommerce ul.products li.product .price,
[data-products] .product .price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
  color: var(--yoy-texto);
  font-weight: 800;
  font-size: 1.08em;
}
.pg-desde { font-weight: 600; color: var(--yoy-gris); font-size: .82em; margin-right: 2px; }
.pg-usd  { font-weight: 700; color: #7C3AED; font-size: .78em; letter-spacing: .5px; }

/* ── Badge Oferta ── */
span.onsale {
  background: #7C3AED !important;
  color: #fff !important;
  border-radius: 6px;
  font-weight: 700;
}

/* ── Página de producto ── */
@media (max-width: 768px) {
  .woocommerce-product-gallery { max-width: 300px; margin: 0 auto; }
}
.pg-venta { font-size: 14.5px; color: #444; margin-bottom: 4px; }

.pg-details { border: 1px solid var(--yoy-linea); border-radius: 10px; margin: 14px 0; overflow: hidden; }
.pg-details summary { cursor: pointer; padding: 12px 14px; font-weight: 700; list-style: none; }
.pg-details summary::-webkit-details-marker { display: none; }
.pg-details summary::after { content: "▾"; float: right; color: #7C3AED; transition: transform .2s; }
.pg-details[open] summary::after { transform: rotate(180deg); }
.pg-details-body { padding: 4px 14px 14px; }

.pg-ficha-fila { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--yoy-linea); font-size: 14px; }
.pg-ficha-fila:last-child { border-bottom: 0; }

.pg-lic { background: var(--yoy-sup); border-radius: 8px; padding: 12px; margin-bottom: 10px; }
.pg-lic p { margin: 6px 0 8px; font-size: 13.5px; }
.pg-chip { display: inline-block; font-size: 12px; border-radius: 6px; padding: 3px 8px; margin: 2px 6px 0 0; font-weight: 600; }
.pg-chip.ok { background: var(--yoy-sup); color: #1d7a3f; }
.pg-chip.warn { background: var(--yoy-sup); color: #a3690e; }

.pg-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.pg-badges div { background: var(--yoy-sup); border: 1px solid var(--yoy-linea); border-radius: 8px; padding: 10px; font-size: 12.5px; font-weight: 600; text-align: center; }

/* Un solo precio: el del formulario de variación se oculta */
.woocommerce-variation-price { display: none; }

/* ── v1.1: precio del producto con tachado discreto ── */
.product .summary .price del { font-size: .62em; color: var(--yoy-gris); font-weight: 600; }
.product .summary .price ins { text-decoration: none; }

/* ── v1.1: "¿Cuál es la diferencia?" compacta, dentro del formulario ── */
.pg-dif { margin: 6px 0 14px; }
.pg-dif summary { padding: 9px 12px; font-size: 13.5px; }
.pg-dif .pg-details-body { padding: 2px 10px 10px; }
.pg-dif .pg-lic { padding: 9px 10px; margin-bottom: 7px; }
.pg-dif .pg-lic p { font-size: 12.5px; margin: 4px 0 6px; }
.pg-dif .pg-chip { font-size: 11px; padding: 2px 7px; }

/* ── v1.2: HOME ── */
/* Hero compacto: se ven las ofertas sin bajar mucho */
.pg-hero { border-radius: 14px; overflow: hidden; }
.pg-hero img { display: block; width: 100%; height: auto; }
@media (max-width: 768px) {
  .pg-hero { border-radius: 10px; }
}

/* Títulos de sección */
.pg-sec-title {
  font-size: 1.15rem !important;
  font-weight: 800;
  letter-spacing: .3px;
  margin: 34px 0 16px !important;
  padding-left: 12px;
  border-left: 4px solid var(--eg-naranja, #fc7c00);
}

/* Badges de confianza en la home: 4 columnas en desktop */
.pg-badges-home { margin: 26px 0 10px; }
@media (min-width: 769px) {
  .pg-badges-home { grid-template-columns: repeat(4, 1fr); }
}

/* ── v1.3: título de página oculto en la portada ── */
.home .entry-header, .home h1.page-title, .page-id-2 .entry-title { display: none !important; }
body.home .hentry > .entry-header { display: none !important; }

/* ── v1.3: SLIDER del hero (scroll-snap + dots) ── */
.pg-slider { position: relative; border-radius: 14px; overflow: hidden; margin-bottom: 6px; }
.pg-slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.pg-slides::-webkit-scrollbar { display: none; }
.pg-slide { flex: 0 0 100%; scroll-snap-align: start; }
.pg-slide img { display: block; width: 100%; height: auto; }
.pg-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 7px; }
.pg-dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,.45); transition: all .2s; }
.pg-dots button.act { background: #22D3EE; width: 22px; border-radius: 5px; }
.pg-slider:has(.pg-slide:only-child) .pg-dots { display: none; }

/* ── v1.3: carruseles de productos deslizables en móvil ── */
@media (max-width: 768px) {
  .pg-scroll ul.products,
  .pg-scroll [data-products] {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    gap: 10px;
    scroll-snap-type: x proximity;
    padding: 2px 2px 10px;
    scrollbar-width: none;
  }
  .pg-scroll ul.products::-webkit-scrollbar,
  .pg-scroll [data-products]::-webkit-scrollbar { display: none; }
  .pg-scroll ul.products li.product,
  .pg-scroll [data-products] .product {
    flex: 0 0 45% !important;
    min-width: 45%;
    scroll-snap-align: start;
    margin: 0 !important;
  }
}

/* ── v1.4: título de página EJECUTADO en la portada (selectores Blocksy) ── */
body.home .hero-section,
body.home .entry-header,
body.home h1.page-title,
body.home .page-title,
body.home article > .entry-title,
body.home [data-prefix] .entry-title { display: none !important; }

/* ── v1.4: slider a ancho completo en móvil (edge-to-edge) ── */
@media (max-width: 768px) {
  .pg-slider {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
  }
}

/* ── v1.4: carrusel de productos reforzado (con y sin wrapper) ── */
@media (max-width: 768px) {
  body.home ul.products,
  body.home .products[data-products],
  .pg-scroll ul.products,
  .pg-scroll .products {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 10px;
    scroll-snap-type: x proximity;
    padding: 2px 2px 10px;
    scrollbar-width: none;
  }
  body.home ul.products::-webkit-scrollbar,
  .pg-scroll ul.products::-webkit-scrollbar { display: none; }
  body.home ul.products li.product,
  body.home .products[data-products] .product,
  .pg-scroll ul.products li.product,
  .pg-scroll .products .product {
    flex: 0 0 45% !important;
    min-width: 45% !important;
    width: 45% !important;
    scroll-snap-align: start;
    margin: 0 !important;
  }
}

/* ── v1.6: sin selector de cantidad en la página de producto ── */
/* (quien quiera dos, añade dos veces: cada click suma 1 al carrito) */
.single-product form.cart .quantity { display: none !important; }
.single-product form.cart .ct-quantity-actions { display: none !important; }

/* ── v1.7: CARRITO Y CHECKOUT ── */
/* Títulos de página fuera (el stepper manda) */
.woocommerce-cart .hero-section, .woocommerce-cart .entry-header, .woocommerce-cart h1.page-title,
.woocommerce-checkout .hero-section, .woocommerce-checkout .entry-header, .woocommerce-checkout h1.page-title { display: none !important; }

/* ── v1.14: el carrito SÍ lleva selector de cantidad ──
   Antes estaba oculto y la única salida era quitar el producto entero.
   Si alguien agrega tres copias y quiere dos, tiene que poder bajarlo. */
.woocommerce-cart table.cart td.product-quantity .quantity { display: inline-flex; }
.woocommerce-cart table.cart td.product-quantity input.qty {
  width: 72px; padding: 7px 8px; border: 1px solid var(--yoy-linea); border-radius: 8px; text-align: center;
}
.woocommerce-cart table.cart td.product-remove a.remove { color: #c62828 !important; font-size: 20px; }
.woocommerce-cart .actions .button[name="update_cart"] { border-radius: 8px; }

/* Stepper de pasos 1-2-3 */
.pg-steps { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 0 22px; flex-wrap: wrap; }
.pg-step { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13.5px; letter-spacing: 1px; color: var(--yoy-gris); text-transform: uppercase; }
.pg-step span { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #ececf1; color: var(--yoy-gris); font-size: 13px; }
.pg-step.act { color: var(--yoy-texto); }
.pg-step.act span { background: #7C3AED; color: #fff; }
.pg-step + .pg-step::before { content: "›"; color: #d3d5e0; margin: 0 10px 0 4px; font-size: 18px; font-weight: 400; }

/* Estética de los items del carrito */
.wc-block-cart-item__image img { border-radius: 8px; border: 1px solid var(--yoy-linea); }
.wc-block-components-product-name { color: var(--yoy-texto) !important; font-weight: 700 !important; text-decoration: none !important; }
.wc-block-cart-item__remove-link, .wc-block-cart-item__remove-icon { color: #c62828 !important; }
.wc-block-components-product-metadata { font-size: 12px; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-weight: 800; font-size: 1.15em; }
.wc-block-components-sale-badge { background: var(--yoy-sup) !important; color: #6a1b9a !important; border: 0 !important; }

/* El botón principal hereda la casa */
.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button {
  background: #7C3AED !important; border-radius: 10px !important; font-weight: 800 !important;
}
.wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover { background: #6a2fd6 !important; }

/* ── v1.8: el aviso verde de la casa + sugeridos ── */
.woocommerce-cart .wc-block-components-notice-banner.is-success,
.woocommerce-cart .woocommerce-message {
  background: var(--yoy-sup) !important; border: 1.5px solid #79c98b !important;
  color: #1d6b34 !important; border-radius: 10px !important; font-size: 14px;
}
.woocommerce-cart .woocommerce-message a.button { display: none !important; }
.pg-sugeridos-title { margin-top: 34px !important; }

/* ── v1.9: CHECKOUT CLÁSICO estetizado ── */
.woocommerce-checkout form.checkout h3 {
  font-size: 1.05rem; font-weight: 800; padding-left: 12px;
  border-left: 4px solid var(--eg-naranja, #fc7c00); margin: 22px 0 14px;
}
.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row select {
  border: 1.5px solid var(--yoy-linea); border-radius: 10px; padding: 12px 14px;
  font-size: 14.5px; background: var(--yoy-sup);
}
.woocommerce-checkout form .form-row input.input-text:focus,
.woocommerce-checkout form .form-row select:focus { border-color: #7C3AED; outline: none; }
.woocommerce-checkout form .form-row label { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.select2-container--default .select2-selection--single {
  border: 1.5px solid var(--yoy-linea) !important; border-radius: 10px !important; height: 46px !important;
  display: flex; align-items: center; padding: 0 8px;
}
#order_review { background: var(--yoy-sup); border: 1px solid var(--yoy-linea); border-radius: 12px; padding: 18px; }
#order_review table.shop_table { border: 0; background: transparent; }
#order_review .order-total .amount { font-size: 1.2em; font-weight: 800; }
#place_order {
  background: #7C3AED !important; border-radius: 10px !important; font-weight: 800 !important;
  padding: 15px !important; width: 100%; font-size: 15.5px !important;
}
#place_order:hover { background: #6a2fd6 !important; }
.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error { border-radius: 10px; }

/* ── v1.11: métodos de pago que calzan con el tema (el recuadro rebelde) ── */
.woocommerce-checkout #order_review { overflow: hidden; }
.woocommerce-checkout #payment { background: transparent !important; border: 0 !important; }
.woocommerce-checkout #payment ul.payment_methods {
  border: 1px solid var(--yoy-linea); border-radius: 10px; background: var(--yoy-sup);
  padding: 2px 0 !important; margin: 6px 0 14px !important; list-style: none;
}
.woocommerce-checkout #payment li.wc_payment_method { padding: 11px 14px; }
.woocommerce-checkout #payment li.wc_payment_method label { font-weight: 700; font-size: 14.5px; }
.woocommerce-checkout #payment div.payment_box {
  background: var(--yoy-sup) !important; border-radius: 8px; margin: 8px 12px 4px !important;
  padding: 10px 13px !important; font-size: 13px; line-height: 1.55; color: var(--yoy-gris);
}
.woocommerce-checkout #payment div.payment_box::before { display: none !important; }
.woocommerce-privacy-policy-text p { font-size: 12.5px; color: var(--yoy-gris); }

/* ── v1.12: THANK YOU PAGE ── */
/* El stepper avanza solo al paso 3 en la página de gracias */
.woocommerce-order-received .pg-step.act { color: var(--yoy-gris); }
.woocommerce-order-received .pg-step.act span { background: #ececf1; color: var(--yoy-gris); }
.woocommerce-order-received .pg-step:last-child { color: var(--yoy-texto); }
.woocommerce-order-received .pg-step:last-child span { background: #16a34a; color: #fff; }

/* Gracias + datos del pedido como chips compactos */
.woocommerce-order-received .woocommerce-notice--success {
  font-size: 1.05rem; font-weight: 800; color: #16a34a; text-align: center; margin-bottom: 16px;
}
ul.woocommerce-order-overview {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0 !important; margin: 0 0 18px !important;
}
ul.woocommerce-order-overview li {
  background: var(--yoy-sup); border: 1px solid var(--yoy-linea); border-radius: 10px;
  padding: 8px 12px; font-size: 11.5px; color: var(--yoy-gris); text-transform: uppercase; letter-spacing: .4px;
  border-right: 1px solid var(--yoy-linea) !important; margin: 0 !important; float: none !important; width: auto !important;
}
ul.woocommerce-order-overview li strong { display: block; font-size: 14px; color: var(--yoy-texto); letter-spacing: 0; text-transform: none; margin-top: 2px; }

/* Las instrucciones del método de pago: la card protagonista */
.woocommerce-order-received .woocommerce-bacs-bank-details,
.woocommerce-order-received .woocommerce-info,
.woocommerce-order-received section.woocommerce-order-details ~ .payment-instructions,
.pg-pago-card {
  background: var(--yoy-sup); border: 1.5px solid var(--yoy-linea); border-radius: 12px; padding: 16px 18px; margin: 0 0 20px;
}
.woocommerce-order-received .wc-bacs-bank-details-heading,
.woocommerce-order-received h2.wc-bacs-bank-details-heading { font-size: 1rem; margin-top: 0; }

/* Resumen del pedido comprimido; fuera la dirección de facturación */
.woocommerce-order-received section.woocommerce-customer-details { display: none !important; }
.woocommerce-order-received section.woocommerce-order-details h2 {
  font-size: 1rem; font-weight: 800; padding-left: 12px; border-left: 4px solid var(--eg-naranja, #fc7c00);
}
.woocommerce-order-received table.order_details { border: 1px solid var(--yoy-linea); border-radius: 12px; overflow: hidden; }
.woocommerce-order-received table.order_details th, .woocommerce-order-received table.order_details td { padding: 10px 14px; font-size: 13.5px; }

/* ── v1.12: equivalencia en moneda local ── */
.pg-equiv { display: block; font-size: .74em; color: var(--yoy-gris); font-weight: 600; letter-spacing: .2px; }
.pg-pais-pill {
  position: fixed; bottom: 16px; left: 16px; z-index: 9999;
  background: #0F0E17; color: #fff; border-radius: 999px; padding: 9px 14px;
  font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 16px rgba(15,14,23,.3);
  display: flex; align-items: center; gap: 7px; border: 0; font-family: inherit;
}
.pg-pais-menu {
  position: fixed; bottom: 62px; left: 16px; z-index: 9999; background: var(--yoy-sup);
  border: 1px solid var(--yoy-linea); border-radius: 12px; box-shadow: 0 8px 30px rgba(15,14,23,.18);
  padding: 6px; display: none; min-width: 200px;
}
.pg-pais-menu.open { display: block; }
.pg-pais-menu button {
  display: flex; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 9px 12px; border-radius: 8px; font-size: 14px; font-family: inherit; gap: 8px; align-items: center;
}
.pg-pais-menu button:hover { background: var(--yoy-sup); }


/* ── v1.14: texto solo para lectores de pantalla ──
   WooCommerce envuelve los precios de oferta con frases como "El precio
   original era: $20." para quien usa lector de pantalla. Si el tema no
   las esconde, se leen pegadas al precio y queda el engendro
   "~~$20~~El precio original era: $20.$10El precio actual es: $10."
   Esta es la regla estándar de WordPress, que faltaba. */
.screen-reader-text,
.woocommerce-Price-amount + .screen-reader-text,
ins .screen-reader-text, del .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* El precio tachado, discreto y en la misma línea */
.price del { opacity: .55; font-weight: 500; margin-right: 6px; }
.price del .woocommerce-Price-amount { text-decoration: line-through; }
.price ins { text-decoration: none; font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════
   PIEL EMPIRES v2.0

   Reproduce empiresgames.co sobre Blocksy. Va al final a propósito:
   es una capa de pintura sobre lo que ya había, así se puede quitar
   borrando este bloque sin tocar nada funcional.

   Blocksy arma el header y el menú desde el Personalizador y su HTML
   cambia según la configuración, así que acá se apunta a varios
   selectores a la vez. Los que no existan simplemente no aplican.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --eg-negro: #000;
  --eg-tinta: #111;
  --eg-gris:  #767676;
  --eg-linea: #e8e8e8;
  --eg-suave: #f4f4f4;
  --eg-rojo:  #e2231a;
  --eg-rojo2: #a8120c;
  --eg-oro:   #f2a307;
}

/* ── Barra de anuncio ── */
.eg-anuncio {
  background: var(--yoy-grad); color: #fff;
  text-align: center; padding: 9px 14px;
  font-size: 13px; font-weight: 800; font-style: italic;
  letter-spacing: .5px; text-transform: uppercase;
}
.eg-anuncio a { color: #fff; text-decoration: none; }

/* ── Header negro ── */
header[data-header], header.ct-header, .ct-header [data-row] {
  background: var(--eg-negro) !important;
}
header[data-header] a, header[data-header] .ct-toggle,
header[data-header] svg, header.ct-header a, header.ct-header svg {
  color: #fff !important; fill: currentColor;
}
header[data-header] [data-id="logo"] .site-title { color: #fff !important; }

/* ── Buscador bajo el header ── */
.eg-buscador { background: var(--eg-negro); padding: 0 14px 14px; }
.eg-buscador form { max-width: 1200px; margin: 0 auto; }
.eg-buscador input[type="search"] {
  width: 100%; border: 0; border-radius: 999px;
  padding: 15px 22px; font-size: 15px; background: var(--yoy-sup); color: var(--eg-tinta);
  box-shadow: none; outline: none;
}
.eg-buscador input[type="search"]::placeholder { color: var(--yoy-gris); }

/* ── Menú off-canvas, negro a pantalla completa ──
 * OJO: solo #offcanvas. `.ct-panel` es la clase de TODOS los paneles
 * laterales de Blocksy —el menú y también el carrito—, así que pintar
 * `.ct-panel.active` dejaba el carrito negro con los botones azules. */
#offcanvas .ct-panel-inner,
#offcanvas .ct-panel-content { background: var(--eg-negro) !important; }
#offcanvas a, #offcanvas .ct-toggle-close, #offcanvas svg { color: #fff !important; }
#offcanvas .menu > li > a {
  font-weight: 700; font-size: 17px; letter-spacing: .3px; padding: 14px 0 !important;
}
#offcanvas .menu > li + li { border-top: 0; }
/* Las redes que Blocksy pone en el panel, en blanco */
#offcanvas .ct-social-box a,
#offcanvas .ct-social-box svg { color: #fff !important; fill: currentColor; opacity: 1; }
#offcanvas .ct-social-box a { opacity: .85; }
#offcanvas .ct-social-box a:hover { opacity: 1; }

/* ── [eg_moneda] — selector de moneda ── */
.eg-moneda { display: block; width: 100%; }
.eg-moneda-tit {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; opacity: .6; margin-bottom: 7px;
}
.eg-moneda-sel {
  display: block; box-sizing: border-box; width: 100%;
  height: auto !important; min-height: 0 !important; line-height: 1.35 !important;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
  border: 1px solid rgba(255,255,255,.26); border-radius: 999px;
  padding: 11px 38px 11px 15px;
  font-size: 14.5px; font-weight: 600; color: #fff;
  cursor: pointer;
}
.eg-moneda-sel option { color: var(--yoy-texto); background: var(--yoy-sup); }
/* Fuera del menú (pie, cabecera clara) se invierte solo */
.eg-pie .eg-moneda-sel, .site-header .eg-moneda-sel {
  color: var(--eg-tinta); border-color: var(--eg-linea);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23111' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ── Tarjeta de producto ── */
.woocommerce ul.products li.product,
[data-products] .product {
  background: transparent; border: 0; border-radius: 0;
  padding: 0 0 18px; box-shadow: none;
}
.woocommerce ul.products li.product:hover,
[data-products] .product:hover { box-shadow: none; transform: none; }

.eg-media { position: relative; border-radius: 10px; overflow: hidden; line-height: 0; }
.eg-media img { width: 100%; height: auto; display: block; border-radius: 10px; }

/* El % de descuento, pastilla negra arriba a la izquierda */
.eg-off {
  position: absolute; top: 9px; left: 9px; z-index: 2;
  background: var(--yoy-grad); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .3px;
  padding: 4px 10px; border-radius: 999px; line-height: 1.4;
}

/* Plataformas, arriba a la derecha */
.eg-plataformas {
  position: absolute; top: 9px; right: 9px; z-index: 2;
  display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; max-width: 70%;
}
.eg-plataformas span {
  background: rgba(0,0,0,.72); color: #fff; backdrop-filter: blur(2px);
  font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px; line-height: 1.5; white-space: nowrap;
}

/* Botón circular de carrito, abajo a la derecha de la imagen */
.eg-cart {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--yoy-sup); color: var(--eg-tinta) !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; text-decoration: none; line-height: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
  transition: transform .15s ease, background-color .15s ease;
}
.eg-cart:hover { transform: scale(1.07); background: var(--eg-oro); }

/* Blocksy pinta su propio badge de oferta y su botón flotante:
   sobran, porque ya los ponemos nosotros encima de la imagen. */
[data-products] .product .onsale,
.woocommerce ul.products li.product .onsale,
[data-products] .ct-woo-card-actions { display: none !important; }

/* Título y precio de la tarjeta */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
[data-products] .product .woocommerce-loop-product__title,
[data-products] .product .ct-woo-card-title {
  text-align: center; font-weight: 700; font-size: 15px; line-height: 1.3;
  margin: 12px 0 6px; color: var(--eg-tinta);
}
.woocommerce ul.products li.product .price,
[data-products] .product .price {
  text-align: center; display: block; font-weight: 800; color: var(--eg-tinta); font-size: 15px;
}
.woocommerce ul.products li.product .price del,
[data-products] .product .price del {
  display: block; font-weight: 500; color: var(--yoy-gris); font-size: .86em; margin-top: 2px;
}
.pg-desde { font-weight: 800; color: var(--eg-tinta); font-size: 1em; margin-right: 3px; }
.pg-usd   { font-weight: 700; color: var(--eg-gris); }

/* ── Encabezado de sección de la home ── */
.eg-seccion { text-align: center; margin: 34px 0 18px; }
.eg-seccion h2 {
  font-size: clamp(22px, 5vw, 30px); font-weight: 800; letter-spacing: -.3px;
  margin: 0 0 10px; color: var(--eg-tinta);
}
.eg-seccion a {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--eg-tinta); text-decoration: none;
  border-bottom: 2px solid var(--eg-tinta); padding-bottom: 3px;
}
.eg-seccion a:hover { color: var(--eg-rojo); border-color: var(--eg-rojo); }

/* ── Botón rojo de la casa (CTA del hero) ── */
.eg-cta {
  display: inline-block; background: linear-gradient(180deg, var(--eg-rojo), var(--eg-rojo2));
  color: #fff !important; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  padding: 11px 26px; border-radius: 999px; text-decoration: none; font-size: 14px;
  box-shadow: 0 3px 12px rgba(226,35,26,.35);
}
.eg-cta:hover { filter: brightness(1.08); }

/* ── v2.1: piezas de la portada ───────────────────────────────── */

/* A sangre completa aunque el tema limite el ancho del contenido */
.eg-full {
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  border-radius: 0;
}

/* Hero: los dots de la .co son barritas, no puntos */
.pg-slider .pg-dots { position: static; padding: 14px 0 4px; background: var(--yoy-sup); }
.pg-dots button { background: #d4d4d4; }
.pg-dots button.act { background: var(--yoy-grad); width: 26px; border-radius: 4px; }

/* Barra de confianza */
.eg-confianza { background: var(--eg-suave); margin: 0 0 6px; }
.eg-confianza-pista {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 18px 16px; scrollbar-width: none; max-width: 1200px; margin: 0 auto;
}
.eg-confianza-pista::-webkit-scrollbar { display: none; }
.eg-confianza-item {
  display: flex; align-items: center; gap: 12px;
  flex: 0 0 auto; min-width: 230px; scroll-snap-align: start;
}
.eg-confianza-item i {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--eg-tinta); color: var(--eg-tinta);
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 19px; font-weight: 700;
}
.eg-confianza-item strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--eg-tinta); }
.eg-confianza-item span  { display: block; font-size: 12.5px; color: var(--eg-gris); margin-top: 1px; }

/* Carrusel: barrita de progreso bajo los productos */
.eg-carrusel { position: relative; }
.eg-barra { position: relative; height: 3px; background: var(--yoy-sup); border-radius: 3px; margin: 4px 2px 0; }
.eg-barra span {
  position: absolute; top: 0; left: 0; height: 100%;
  background: var(--yoy-grad); border-radius: 3px; transition: left .08s linear;
}

/* Aviso para el editor cuando falta configurar algo (nadie más lo ve) */
.eg-vacio {
  border: 1px dashed var(--yoy-linea); background: var(--yoy-sup); color: var(--yoy-gris);
  padding: 16px; border-radius: 10px; font-size: 14px; text-align: center;
}

/* En escritorio el carrusel muestra más tarjetas y sigue deslizando */
@media (min-width: 900px) {
  .pg-scroll ul.products, .pg-scroll .products {
    display: flex !important; gap: 18px; overflow-x: auto;
    scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px;
  }
  .pg-scroll ul.products::-webkit-scrollbar, .pg-scroll .products::-webkit-scrollbar { display: none; }
  .pg-scroll ul.products li.product, .pg-scroll .products .product {
    flex: 0 0 calc(20% - 15px) !important; min-width: calc(20% - 15px) !important;
    width: auto !important; margin: 0 !important; scroll-snap-align: start;
  }
}

/* ── v2.2: ajustes sobre lo que se vio en vivo ─────────────────── */

/* El hero pegado a la cabecera, como en la .co. Blocksy mete un
   respiro arriba del contenido que acá sobra: en la portada la primera
   pieza tiene que arrancar donde termina el buscador. */
.home main .ct-container,
.home main .ct-container-fluid,
.home .site-main,
.home #main-container > .ct-container { padding-top: 0 !important; }
.home .entry-content > *:first-child,
.home .site-main > *:first-child { margin-top: 0 !important; }
.eg-full:first-child { margin-top: 0 !important; }

/* La imagen del producto manda su propia proporción: las carátulas de
   juego son verticales y recortarlas a 4:3 les come la mitad. Si en el
   Personalizador queda un recorte forzado, esto lo desarma. */
.eg-media { display: block; position: relative; border-radius: 10px; overflow: hidden; }
/* Sin forzar proporción ni object-fit: la caja de la tarjeta la define
   el Personalizador de Blocksy, y pelearle desde acá fue lo que hacía
   que "original" estirara la tarjeta. Acá solo el borde redondeado. */
.eg-media img,
.woocommerce ul.products li.product img,
[data-products] .product img { border-radius: 10px; }

/* La categoría bajo el precio ("UNCATEGORIZED") no va en la tarjeta */
.woocommerce ul.products li.product .woocommerce-loop-category__title,
[data-products] .product .ct-woo-card-extra,
[data-products] .product .product-categories,
[data-products] .product .ct-product-categories,
ul.products li.product .posted_in { display: none !important; }

/* Tachado del precio en la tarjeta, debajo y discreto */
.woocommerce ul.products li.product .price del,
[data-products] .product .price del,
.eg-precio del { display: block; font-weight: 500; color: var(--yoy-gris); font-size: .86em; margin-top: 2px; }
.woocommerce ul.products li.product .price del .woocommerce-Price-amount,
[data-products] .product .price del .woocommerce-Price-amount { text-decoration: line-through; }

/* ══════════════════════════════════════════════════════════════════
   v3.0 — PÁGINA DE PRODUCTO, MENÚ Y PIE

   El color de acento lo pone Blocksy desde el Personalizador y por eso
   todo salía azul (venía de la paleta de yoy). Acá se fuerza el negro
   de Empires en lo que de verdad se ve: enlaces, botones, pestañas y
   badges. Lo correcto igual es cambiar la paleta en el Personalizador;
   esto es el cinturón además de los tirantes.
   ══════════════════════════════════════════════════════════════════ */

.eg-oculto, .single-product .woocommerce-breadcrumb { display: none !important; }

/* ── La carátula, grande y a sangre ── */
.single-product .woocommerce-product-gallery {
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  margin-bottom: 18px;
}
.single-product .woocommerce-product-gallery__image img { width: 100%; height: auto; border-radius: 0; }
.single-product .woocommerce-product-gallery .flex-control-thumbs { padding: 10px 16px 0; }
@media (min-width: 900px) {
  .single-product .woocommerce-product-gallery {
    width: auto; max-width: none; margin-left: 0; margin-right: 0;
  }
  .single-product .woocommerce-product-gallery__image img { border-radius: 14px; }
}

/* ── Ahorro, título y precio ── */
.eg-ahorro {
  display: inline-block; background: var(--yoy-grad); color: #fff;
  font-size: 12.5px; font-weight: 800; letter-spacing: .3px;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 10px;
}
.single-product .product_title { font-weight: 800; letter-spacing: -.4px; line-height: 1.18; }
.single-product .summary .price { font-size: 26px; font-weight: 800; color: var(--eg-tinta); }
.single-product .summary .price del { font-size: .58em; color: var(--yoy-gris); font-weight: 500; margin-left: 8px; }
.single-product .summary .price .pg-desde { font-size: .62em; color: var(--eg-gris); font-weight: 700; }

/* ── Selectores de variación ── */
.single-product .variations { border: 0; margin: 4px 0 6px; }
.single-product .variations td, .single-product .variations th { border: 0; padding: 0; display: block; }
.single-product .variations label {
  display: block; font-size: 14.5px; font-weight: 700; letter-spacing: 0;
  text-transform: none; color: var(--eg-tinta); margin: 16px 0 8px;
}
/* El texto salía como una rayita aplastada: Blocksy le fija a los campos
 * una altura exacta (--theme-form-field-height) y un line-height suyo, y
 * con el padding de acá adentro no cabía ni una línea. Por eso la altura
 * la da el padding y no una medida fija. */
.single-product .variations select,
.single-product .variations td.value select {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  line-height: 1.35 !important;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-color: var(--eg-suave) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23111' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 20px center !important;
  background-size: 12px 8px !important;
  border: 1px solid var(--eg-linea) !important; border-radius: 999px !important;
  padding: 15px 46px 15px 20px !important;
  font-size: 15px !important; font-weight: 500; color: var(--eg-tinta) !important;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.single-product .variations select:hover { background-color: var(--yoy-sup) !important; }
.single-product .variations select:focus { outline: none; border-color: var(--yoy-morado) !important; background-color: var(--yoy-sup) !important; }
/* La opción en sí, por si el tema la deja en blanco sobre blanco */
.single-product .variations select option { color: var(--yoy-texto); background: var(--yoy-sup); font-weight: 500; }
.single-product .reset_variations { font-size: 12.5px; color: var(--eg-gris); }

/* ── v3.1: la ficha, más compacta ──
 * Blocksy separa cada bloque del resumen con --theme-content-spacing
 * (su valor por defecto es bastante aire). Acá se baja solo dentro de
 * la ficha de producto, que es donde se notaba contra la .co. */
.single-product .entry-summary,
.single-product .summary {
  --theme-content-spacing: 12px;
  --content-spacing: 12px;
}
.single-product .woocommerce-product-gallery { margin-bottom: 12px; }
.single-product .product_title { margin: 0 0 6px !important; }
.single-product .summary .price { margin: 0 0 4px !important; }
.single-product .woocommerce-product-details__short-description { margin: 0 0 4px; }
.single-product .summary > hr,
.single-product .entry-summary > hr { margin: 14px 0 !important; }
.single-product .variations { margin: 0 !important; }
.single-product .variations label { margin: 12px 0 7px !important; }
.single-product .variations tr:first-child label { margin-top: 2px !important; }
.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart { margin-top: 14px !important; margin-bottom: 14px !important; }
.single-product .woocommerce-variation-price { margin: 0 0 10px; }
.single-product .quantity { margin-bottom: 10px; }

/* ── Botones ── */
.single-product .single_add_to_cart_button,
.woocommerce .button.alt, .woocommerce button.button.alt,
.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button,
#place_order, .checkout-button {
  background: var(--yoy-grad) !important; color: #fff !important;
  border: 0 !important; border-radius: 999px !important;
  font-weight: 800 !important; letter-spacing: .4px; text-transform: none;
  padding: 17px 28px !important; font-size: 15.5px !important; width: 100%;
  box-shadow: 0 4px 16px rgba(0,0,0,.16); transition: transform .12s ease, filter .15s ease;
}
.single-product .single_add_to_cart_button:hover,
.woocommerce .button.alt:hover, #place_order:hover, .checkout-button:hover {
  filter: brightness(1.18); transform: translateY(-1px);
}
.single-product .single_add_to_cart_button:disabled { opacity: .35; box-shadow: none; }
.woocommerce .button { border-radius: 999px; font-weight: 700; }

/* ── Pestañas ──
 * En pantallas chicas Blocksy apila los títulos uno debajo del otro
 * (su modo acordeón). Acá se fuerza la fila: los dos títulos al lado,
 * como en la .co, a cualquier ancho. */
.woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.wc-tabs,
.single-product .woocommerce-tabs > ul.tabs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 26px;
  padding: 0 !important; margin: 26px 0 0 !important;
  list-style: none !important;
  border-bottom: 1px solid var(--eg-linea) !important;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }

/* ── v3.3: alineación y aire de las pestañas ──
 * El margen de la izquierda no lo pone la lista: lo pone el panel de
 * abajo (.woocommerce-Tabs-panel), y la lista no lo tiene. Por eso
 * "DESCRIPCIÓN" quedaba contra el borde mientras el texto respetaba el
 * margen. En vez de adivinar cuánto es, el margen se lo damos al
 * contenedor que envuelve a los dos y se los quitamos a ambos: así no
 * pueden quedar desalineados, valga lo que valga el margen.
 *
 * Y el aire: Blocksy trae `.product > .woocommerce-tabs{padding-top:60px}`
 * más `.panel{padding-top:40px}` — 100px entre el botón y el texto. */
/* v3.13: las pestañas viven dentro del resumen, debajo del botón. Al
 * compartir contenedor con el título ya no hay margen propio que
 * corregir ni franja aparte que separar. */
body .single-product .summary .woocommerce-tabs,
body .single-product .entry-summary .woocommerce-tabs {
  padding: 18px 0 0 !important;
  margin: 0 !important;
  clear: none !important;
  width: auto !important; max-width: none !important;
}
body .single-product .woocommerce-tabs ul.tabs,
body .single-product .woocommerce-tabs .woocommerce-Tabs-panel {
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  width: auto !important; max-width: none !important;
}
body .single-product .woocommerce-tabs .woocommerce-Tabs-panel.panel {
  padding-top: 14px !important;
}
.woocommerce-tabs ul.tabs::before, .woocommerce-tabs ul.tabs::after,
.woocommerce-tabs ul.tabs li::before, .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce-tabs ul.tabs li {
  display: block !important; flex: 0 0 auto !important; width: auto !important;
  background: none !important; border: 0 !important; margin: 0 !important;
  padding: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
.woocommerce-tabs ul.tabs li a {
  display: block !important; white-space: nowrap;
  padding: 12px 0 !important; font-weight: 600; font-size: 15px;
  color: var(--eg-gris) !important; border-bottom: 2.5px solid transparent;
  background: none !important;
}
.woocommerce-tabs ul.tabs li.active a { color: var(--eg-tinta) !important; border-bottom-color: var(--yoy-cian); }
/* El acordeón de Blocksy repite el título arriba de cada panel */
.woocommerce-tabs .panel > .ct-tab-title,
.woocommerce-tabs .ct-accordion-trigger { display: none !important; }
.woocommerce-tabs .panel > h2:first-child { display: none; }

/* ── Cómo funciona ── */
.eg-como h3 { font-size: 16px; font-weight: 800; margin: 20px 0 6px; }
.eg-como h3:first-child { margin-top: 0; }
.eg-como p { font-size: 14.5px; line-height: 1.6; color: #3a3a3a; margin: 0 0 6px; }
.eg-lic-grid { display: grid; gap: 10px; margin: 10px 0 4px; }
@media (min-width: 700px) { .eg-lic-grid { grid-template-columns: 1fr 1fr; } }
.eg-lic { background: var(--eg-suave); border-radius: 12px; padding: 14px; }
.eg-lic b { display: block; font-size: 15px; margin-bottom: 5px; }
.eg-lic p { font-size: 13.5px; margin-bottom: 8px; }
.eg-chip { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 6px; padding: 3px 8px; margin: 0 5px 4px 0; }
.eg-chip.ok   { background: var(--yoy-sup); color: #1d7a3f; }
.eg-chip.warn { background: var(--yoy-sup); color: #a3690e; }
.eg-como-pie { font-size: 13px; color: var(--eg-gris); margin-top: 14px; }

.eg-relacionados { margin-top: 30px; }

/* ── Pie de página ── */
.eg-pie { border-top: 1px solid var(--eg-linea); margin-top: 36px; background: var(--yoy-sup); }
.eg-pie-caja { max-width: 1200px; margin: 0 auto; padding: 26px 16px 34px; }
.eg-contacto { display: grid; gap: 4px; margin-bottom: 18px; }
.eg-contacto-fila { display: flex; align-items: center; gap: 13px; padding: 9px 0; text-decoration: none; color: inherit; }
.eg-contacto-fila i {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--eg-tinta); color: var(--eg-tinta);
  display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 16px;
}
.eg-contacto-fila i svg { width: 19px; height: 19px; display: block; }
.eg-redes a svg { width: 18px; height: 18px; display: block; }
.eg-contacto-fila strong { display: block; font-size: 15px; font-weight: 700; color: var(--eg-tinta); }
.eg-contacto-fila span   { display: block; font-size: 13.5px; color: var(--eg-gris); margin-top: 1px; }

.eg-acordeon { border-top: 1px solid var(--eg-linea); }
.eg-acordeon summary {
  list-style: none; cursor: pointer; padding: 16px 2px; font-size: 15px; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center; color: var(--eg-tinta);
}
.eg-acordeon summary::-webkit-details-marker { display: none; }
.eg-acordeon summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--eg-gris); }
.eg-acordeon[open] summary::after { content: "–"; }
.eg-acordeon ul { list-style: none; margin: 0 0 14px; padding: 0; }
.eg-acordeon li a { display: block; padding: 7px 2px; font-size: 14px; color: var(--eg-gris); text-decoration: none; }
.eg-acordeon li a:hover { color: var(--eg-tinta); }

.eg-redes { display: flex; gap: 10px; margin: 20px 0 14px; }
.eg-redes a {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--eg-linea);
  display: flex; align-items: center; justify-content: center;
  color: var(--eg-tinta); text-decoration: none; font-size: 16px;
}
.eg-redes a:hover { background: var(--yoy-morado); color: #fff; border-color: var(--eg-negro); }
.eg-copy { font-size: 13px; color: var(--eg-gris); margin: 0; }

/* ── Menú off-canvas con más cuerpo ── */
#offcanvas .menu > li > a,
#offcanvas .ct-panel-content .menu a {
  font-size: 19px !important; font-weight: 700 !important;
  padding: 16px 0 !important; letter-spacing: .2px;
}
/* v3.1: se quitó el pie inyectado al menú lateral (redes + inicio de
 * sesión). Blocksy arma ese panel desde el Personalizador y el
 * `display:flex` que hacía falta para anclarlo abajo le rompía el
 * layout propio: el panel salía negro y vacío. Las redes y el botón de
 * cuenta se agregan desde Personalizar → Cabecera → Menú lateral. */

/* ── Carrito lateral, blanco con botones negros (igual que la .co) ── */
#woo-cart-panel .ct-panel-inner,
#woo-cart-panel .ct-panel-content,
#woo-cart-panel .ct-panel-actions { background: var(--yoy-sup) !important; }
#woo-cart-panel,
#woo-cart-panel a:not(.button),
#woo-cart-panel .ct-panel-heading { color: var(--eg-tinta) !important; }
#woo-cart-panel .ct-panel-actions { border-top: 1px solid var(--eg-linea); }
#woo-cart-panel .ct-cart-total,
#woo-cart-panel .woocommerce-mini-cart__total { color: var(--eg-tinta) !important; font-weight: 700; }

#woo-cart-panel .ct-panel-actions .button,
#woo-cart-panel .woocommerce-mini-cart__buttons .button {
  display: block; width: 100%; box-sizing: border-box;
  border-radius: 999px !important; padding: 15px 20px !important;
  font-weight: 700 !important; font-size: 15px; letter-spacing: .2px;
  text-align: center; border: 0 !important; margin: 0 0 10px;
  background: var(--eg-suave) !important; color: var(--eg-tinta) !important;
}
/* El de pagar, negro: es el `checkout` o, si no lleva clase, el último */
#woo-cart-panel .ct-panel-actions .button.checkout,
#woo-cart-panel .woocommerce-mini-cart__buttons .checkout,
#woo-cart-panel .ct-panel-actions .button:last-child,
#woo-cart-panel .woocommerce-mini-cart__buttons .button:last-child {
  background: var(--yoy-grad) !important; color: #fff !important; margin-bottom: 0;
}
#woo-cart-panel .ct-panel-actions .button:hover,
#woo-cart-panel .woocommerce-mini-cart__buttons .button:hover { opacity: .88; }

/* Blocksy le cambia el id al panel según la versión, así que lo de abajo
 * se cuelga del carrito mismo (marcado de WooCommerce), que no cambia. */
.ct-panel .widget_shopping_cart_content,
.ct-panel .woocommerce-mini-cart,
.ct-panel .woocommerce-mini-cart__empty-message { color: var(--eg-tinta) !important; }
.ct-panel .woocommerce-mini-cart__total { color: var(--eg-tinta) !important; font-weight: 700; }
.ct-panel .woocommerce-mini-cart__buttons { display: grid; gap: 10px; margin: 0; }
.ct-panel .woocommerce-mini-cart__buttons .button,
.ct-panel .woocommerce-mini-cart__buttons a.button {
  display: block; width: 100%; box-sizing: border-box; margin: 0;
  background: var(--eg-suave) !important; color: var(--eg-tinta) !important;
  border: 0 !important; border-radius: 999px !important;
  padding: 15px 20px !important; font-weight: 700 !important; font-size: 15px;
  text-align: center; box-shadow: none !important;
}
.ct-panel .woocommerce-mini-cart__buttons .checkout,
.ct-panel .woocommerce-mini-cart__buttons .button:last-child {
  background: var(--yoy-grad) !important; color: #fff !important;
}
.ct-panel .woocommerce-mini-cart__buttons .button:hover { opacity: .88; }

/* ── El azul heredado de yoy, fuera ── */
.single-product a:not(.button):not(.eg-cta),
.woocommerce-tabs a, .eg-pie a { color: var(--eg-tinta); }
.woocommerce span.onsale, .woocommerce .onsale {
  background: var(--yoy-grad) !important; color: #fff !important;
  border-radius: 999px !important; font-weight: 800 !important;
}

/* ══════════════════════════════════════════════════════════════════
   v3.5 — PÁGINA DEL CARRITO
   Los botones salían azules y cuadrados: el color de los botones es
   un ajuste aparte de la paleta en Blocksy (Personalizar → Botones),
   así que acá se fuerzan los de la casa. Negro solo el de pagar; los
   demás son acciones secundarias y van en gris, como en la .co.
   ══════════════════════════════════════════════════════════════════ */

/* Miniatura 5/6, como en la .co */
.woocommerce-cart table.cart td.product-thumbnail img,
.woocommerce-cart .cart_item .product-thumbnail img {
  width: 92px; max-width: 92px; height: auto;
  aspect-ratio: 5 / 6; object-fit: cover;
  border-radius: 9px; display: block;
}

/* Nombre en negro y la variación chica y gris, debajo */
.woocommerce-cart td.product-name > a,
.woocommerce-cart .product-name > a {
  color: var(--eg-tinta) !important; font-weight: 700; font-size: 15px;
  text-decoration: none; line-height: 1.35;
}
.woocommerce-cart td.product-name dl.variation,
.woocommerce-cart td.product-name .variation,
.woocommerce-cart td.product-name .wc-item-meta,
.woocommerce-cart .product-name dl.variation,
.woocommerce-cart .product-name .wc-item-meta {
  font-size: 12.5px !important; line-height: 1.4 !important;
  color: var(--eg-gris) !important; font-weight: 500 !important;
  margin: 4px 0 0 !important;
}
.woocommerce-cart td.product-name dl.variation dt,
.woocommerce-cart td.product-name dl.variation dd,
.woocommerce-cart .wc-item-meta li {
  display: inline; margin: 0 2px 0 0; padding: 0; font-weight: inherit; float: none;
}
.woocommerce-cart td.product-name dl.variation p,
.woocommerce-cart .wc-item-meta p { display: inline; margin: 0; }

/* Cupón y "actualizar": gris, redondos */
.woocommerce-cart .cart .actions .button,
.woocommerce-cart .cart .actions .coupon .button,
.woocommerce-cart .cart .actions button[name="apply_coupon"],
.woocommerce-cart .cart .actions button[name="update_cart"] {
  background: var(--eg-suave) !important;
  color: var(--eg-tinta) !important;
  border: 1px solid var(--eg-linea) !important;
  border-radius: 999px !important;
  font-weight: 700 !important; font-size: 14.5px !important;
  padding: 13px 24px !important;
  box-shadow: none !important; text-transform: none; letter-spacing: 0;
}
.woocommerce-cart .cart .actions .button:hover:not(:disabled) {
  background: var(--yoy-morado) !important; color: #fff !important; border-color: var(--eg-negro) !important;
}
.woocommerce-cart .cart .actions .button:disabled,
.woocommerce-cart .cart .actions .button[disabled] { opacity: .4; cursor: default; }
.woocommerce-cart .cart .actions #coupon_code,
.woocommerce-cart .coupon input[type="text"] {
  border-radius: 999px !important; border: 1px solid var(--eg-linea) !important;
  padding: 13px 20px !important; background: var(--yoy-sup);
}

/* El de pagar, el único negro (ya lo pone la regla de botones de v3.0) */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button { margin-bottom: 0; }

/* Totales, sin la caja gris de Blocksy peleando con el resto */
.woocommerce-cart .cart_totals h2 { font-size: 17px; font-weight: 800; }
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td { border: 0; padding: 10px 0; }

/* ── v3.6: el "Ver carrito" que aparece tras añadir ──
 * Lo agrega WooCommerce al lado del botón después de un alta por AJAX.
 * Sobra: el carrito lateral ya se abre solo y ahí están los dos caminos
 * ("Ver carrito" y "Pagar pedido"). Además rompía la línea con un botón
 * cuadrado al lado de uno redondo. */
.single-product .added_to_cart,
.woocommerce ul.products li.product .added_to_cart,
[data-products] .product .added_to_cart { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   v3.8 — CHECKOUT

   v3.7 colgaba casi todo de `#order_review`, y resulta que Blocksy NO
   usa ese contenedor: arma el checkout con el suyo, `.ct-order-review`.
   Por eso aquellas reglas no hacían nada —ni una— y seguían el fondo
   lila, las cajas anidadas y los bordes. La lista de métodos, además,
   Blocksy la estiliza colgando de `#payment`, que lleva id y le gana por
   especificidad a cualquier cadena de clases.

   Acá se nombran los dos contenedores y se usa #payment donde hace
   falta.
   ══════════════════════════════════════════════════════════════════ */

/* ── Títulos: fuera la barrita de color heredada ──
   Puede venir como borde o como pseudo-elemento; se tapan los dos. */
body.woocommerce-checkout h3,
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout .woocommerce-billing-fields h3 {
  border: 0 !important;
  border-left: 0 !important;
  border-inline-start: 0 !important;
  padding-left: 0 !important; padding-inline-start: 0 !important;
  font-size: 18px; font-weight: 800; letter-spacing: -.2px;
  color: var(--eg-tinta); margin: 0 0 14px;
}
body.woocommerce-checkout h3::before,
body.woocommerce-checkout #order_review_heading::before { content: none !important; display: none !important; }

/* ── Nada de azul ── */
.woocommerce-checkout a:not(.button),
.woocommerce-checkout .product-name,
.woocommerce-checkout .product-name a,
.woocommerce-checkout td, .woocommerce-checkout th { color: var(--eg-tinta); }
.woocommerce-checkout .woocommerce-privacy-policy-text a { color: var(--eg-tinta); text-decoration: underline; }

/* ── Campos ── */
.woocommerce-checkout .form-row label { font-size: 13.5px; font-weight: 600; color: var(--eg-tinta); margin-bottom: 6px; }
.woocommerce-checkout .form-row .required { color: var(--eg-rojo); text-decoration: none; }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
  height: auto !important; min-height: 0 !important; line-height: 1.35 !important;
  border: 1px solid var(--eg-linea) !important; border-radius: 12px !important;
  padding: 14px 16px !important; font-size: 15px; background-color: var(--yoy-sup);
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus { border-color: var(--yoy-morado) !important; outline: none; }

/* ── UNA sola caja para el pedido ── */
.woocommerce-checkout .ct-order-review,
.woocommerce-checkout #order_review {
  background: var(--yoy-sup) !important;
  border: 1px solid var(--eg-linea) !important;
  border-radius: 16px !important;
  padding: 18px 16px !important;
  box-shadow: none !important;
}
/* Y nada de lo de adentro lleva caja propia */
.woocommerce-checkout .ct-order-review .shop_table,
.woocommerce-checkout .ct-order-review .woocommerce-checkout-payment,
.woocommerce-checkout #order_review .shop_table,
.woocommerce-checkout #order_review .woocommerce-checkout-payment,
.woocommerce-checkout #payment,
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method,
.woocommerce-checkout #payment ul.payment_methods .payment_box {
  background: none !important; background-color: transparent !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
.woocommerce-checkout #payment ul.payment_methods .payment_box { padding-top: 0 !important; padding-bottom: 0 !important; }
.woocommerce-checkout #payment ul.payment_methods .payment_box::before,
.woocommerce-checkout #payment .payment_box::before { content: none !important; display: none !important; }

/* ── La tabla del pedido ── */
.woocommerce-checkout .shop_table { width: 100%; margin: 0; border-collapse: collapse; }
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td {
  border: 0 !important; border-bottom: 1px solid var(--eg-linea) !important;
  padding: 12px 0 !important; font-size: 14.5px; vertical-align: top;
}
.woocommerce-checkout .shop_table thead th {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--eg-gris); font-weight: 700;
}
.woocommerce-checkout .shop_table .product-name { padding-right: 14px !important; line-height: 1.4; }
.woocommerce-checkout .shop_table .product-name .product-quantity { color: var(--eg-gris); font-weight: 600; }
.woocommerce-checkout .shop_table .product-total,
.woocommerce-checkout .shop_table td:last-child,
.woocommerce-checkout .shop_table th:last-child { text-align: right; white-space: nowrap; width: 1%; }
.woocommerce-checkout .shop_table .order-total th,
.woocommerce-checkout .shop_table .order-total td { border-bottom: 0 !important; padding-top: 14px !important; }
.woocommerce-checkout .shop_table .order-total td { font-size: 17px; font-weight: 800; white-space: nowrap; }

/* ── Los métodos: lista plana con líneas finas ── */
.woocommerce-checkout #payment ul.payment_methods {
  list-style: none !important; margin: 6px 0 0 !important;
  border-top: 1px solid var(--eg-linea) !important;
}
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method { margin: 0 !important; }
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 2px !important; margin: 0; font-weight: 700; font-size: 15px; cursor: pointer;
}
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method + li.wc_payment_method > label {
  border-top: 1px solid var(--eg-linea);
}
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method img { max-height: 20px; width: auto; }

/* El círculo que dibuja Blocksy para sus métodos, en negro */
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label::before {
  border-color: var(--eg-linea) !important;
}
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > input[type="radio"]:checked + label::before {
  border-color: var(--yoy-morado) !important; background-color: var(--yoy-morado) !important;
}
.woocommerce-checkout input[type="radio"] { accent-color: var(--yoy-morado); }

/* ── Sellos de confianza ── */
.eg-sellos {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 16px 0 0; padding: 0; list-style: none;
}
.eg-sellos li {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--eg-linea); border-radius: 999px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 600; color: var(--eg-tinta);
  background: var(--yoy-sup); margin: 0;
}
.eg-sellos svg { flex: none; opacity: .75; }

/* ── El botón de pagar ── */
.woocommerce-checkout #place_order { margin-top: 14px; }
.woocommerce-checkout .woocommerce-privacy-policy-text p { font-size: 12.5px; color: var(--eg-gris); line-height: 1.5; margin: 14px 0 0; }
/* ══════════════════════════════════════════════════════════════════
   v3.9 — ESCRITORIO
   ══════════════════════════════════════════════════════════════════ */

/* ── Banda de confianza, de borde a borde ──
   Salía como un recuadro gris centrado con aire a los lados; en la .co
   la banda cruza toda la pantalla y solo el contenido va centrado. */
.eg-confianza {
  background: var(--eg-suave);
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  margin-bottom: 6px; border-radius: 0;
}
.eg-confianza-pista {
  max-width: 1290px; margin: 0 auto;
  padding-left: 20px; padding-right: 20px;
}
@media (min-width: 900px) {
  .eg-confianza-pista { justify-content: space-between; gap: 30px; }
  .eg-confianza-item { flex: 1 1 0; }
}

/* ── Carrusel: flechas y arrastre ── */
.eg-carrusel, .pg-scroll { position: relative; }
.eg-flecha {
  position: absolute; top: 42%; transform: translateY(-50%);
  z-index: 4; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--eg-linea); background: var(--yoy-sup); color: var(--eg-tinta);
  display: none; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.1);
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.eg-flecha:hover { background: var(--yoy-morado); color: #fff; border-color: var(--eg-negro); }
.eg-flecha-izq { left: -8px; }
.eg-flecha-der { right: -8px; }
/* Solo si hay para dónde ir, y solo con mouse */
@media (hover: hover) and (pointer: fine) {
  .eg-hay-izq > .eg-flecha-izq,
  .eg-hay-der > .eg-flecha-der { display: flex; }
}
/* El cursor cuenta que se puede arrastrar */
@media (hover: hover) and (pointer: fine) {
  .eg-carrusel ul.products, .eg-carrusel .products,
  .pg-scroll ul.products, .pg-scroll .products { cursor: grab; }
  /* Solo mientras se arrastra de verdad. Nada de pointer-events:none
     acá: con eso el navegador calculaba el destino del click sin los
     enlaces y el producto no se abría nunca. */
  .eg-agarrando { cursor: grabbing !important; user-select: none; }
}

/* ── Cabecera: el menú como en la .co ──
   La posición de cada pieza se mueve en Personalizar → Cabecera; esto
   es solo la tipografía y el aire. */
@media (min-width: 1000px) {
  .site-header .menu > li > a,
  header [data-id="menu"] .menu > li > a {
    text-transform: none !important;
    font-size: 15.5px !important; font-weight: 700 !important;
    letter-spacing: .1px !important;
  }
  /* El buscador, pastilla ancha como en la .co */
  .eg-buscador input[type="search"] { padding: 15px 24px; font-size: 15.5px; }
}

/* ══════════════════════════════════════════════════════════════════
   v3.10 — EL ESPACIO EN BLANCO SOBRE EL SLIDER

   Intentos anteriores anularon el padding de los contenedores y no
   alcanzó, así que el hueco no es padding: es algo que ocupa alto.
   Lo más común es un párrafo vacío que queda en el editor antes del
   shortcode. Acá se tapan las dos causas posibles, y si queda algo
   lo termina de cerrar eg_pegar_hero(), que lo mide en el navegador.
   ══════════════════════════════════════════════════════════════════ */
.home .entry-content > p:empty,
.home .site-main > p:empty,
.home .entry-content > p:blank,
.home .entry-content > .wp-block-spacer:first-child { display: none !important; }

.home main, .home .site-main, .home #main-container,
.home .entry-content { margin-top: 0 !important; }
.home .entry-content > *:first-child,
.home .site-main > *:first-child { margin-top: 0 !important; padding-top: 0 !important; }

/* ══════════════════════════════════════════════════════════════════
   v3.11 — SUGERENCIAS DEL BUSCADOR
   ══════════════════════════════════════════════════════════════════ */
.eg-buscador { position: relative; }
.eg-sug {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 7px);
  background: var(--yoy-sup); border-radius: 14px;
  border: 1px solid var(--eg-linea);
  box-shadow: 0 16px 44px rgba(0,0,0,.18);
  max-height: min(62vh, 520px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
}
.eg-sug[hidden] { display: none; }

.eg-sug-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; text-decoration: none; color: var(--eg-tinta);
  border-bottom: 1px solid #f1f1f4;
}
.eg-sug-item:last-child { border-bottom: 0; }
.eg-sug-item:hover, .eg-sug-item.is-activo { background: var(--eg-suave); }
.eg-sug-item img, .eg-sug-nada {
  width: 42px; height: 52px; flex: none; object-fit: cover;
  border-radius: 6px; background: #ececf1; display: block;
}
.eg-sug-txt {
  flex: 1 1 auto; font-size: 14px; line-height: 1.35; font-weight: 500;
  color: var(--eg-tinta);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.eg-sug-txt b { font-weight: 800; }
.eg-sug-precio {
  flex: 0 1 auto; font-size: 13.5px; font-weight: 800; color: var(--eg-tinta);
  text-align: right; white-space: nowrap; max-width: 40%;
  overflow: hidden; text-overflow: ellipsis;
}
.eg-sug-todos {
  display: block; padding: 13px 14px; text-align: center;
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  color: var(--eg-tinta); background: var(--eg-suave);
  position: sticky; bottom: 0;
}
.eg-sug-todos:hover { background: var(--yoy-morado); color: #fff; }
.eg-sug-vacio { padding: 18px 14px; font-size: 13.5px; color: var(--eg-gris); text-align: center; }

/* Página de resultados */
.search-results .woocommerce-products-header,
.search .woocommerce-products-header { padding-top: 6px; }
.search-results h1.page-title, .search h1.page-title,
.search-results .woocommerce-products-header__title {
  font-size: 26px; font-weight: 800; letter-spacing: -.4px; margin: 0 0 14px;
}

/* ── v3.13: "Cómo funciona", texto corrido ── */
.eg-como p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--eg-tinta); }
.eg-como p:last-child { margin-bottom: 0; }
.eg-como strong { font-weight: 800; }

/* ── v3.14: fuera el SKU y las categorías de la ficha ──
 * Llegan con el elemento "Metadatos" del Personalizador, que es el que
 * ahora pinta las pestañas debajo del botón. Se queda el elemento —hace
 * falta— y se esconde solo esta fila. */
.single-product .product_meta,
.single-product .ct-product-meta,
.single-product .summary .sku_wrapper,
.single-product .summary .posted_in,
.single-product .summary .tagged_as { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   v3.15 — CHECKOUT, UNA SOLA CAJA

   En v3.8 le puse borde a los DOS contenedores —el de Blocksy y el de
   WooCommerce—, y por eso quedaba una caja adentro de la otra. El borde
   va solo en el de afuera.
   ══════════════════════════════════════════════════════════════════ */

/* El de adentro, sin caja (gana por especificidad: lleva clase + id) */
.woocommerce-checkout .ct-order-review #order_review,
.woocommerce-checkout .ct-order-review .woocommerce-checkout-review-order,
.woocommerce-checkout .ct-order-review .woocommerce-checkout-payment {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  padding: 0 !important; box-shadow: none !important;
}

/* ── El resumen: texto más chico, gris, con carátula ── */
.woocommerce-checkout .shop_table thead { display: none; }
.woocommerce-checkout .shop_table .cart_item td { padding: 11px 0 !important; }

.eg-ci { display: flex; align-items: center; gap: 11px; }
.eg-ci-img, .woocommerce-checkout .eg-ci img {
  width: 44px; height: 54px; flex: none; object-fit: cover;
  border-radius: 7px; display: block; margin: 0;
}
.eg-ci-txt {
  font-size: 13px; line-height: 1.42; font-weight: 500;
  color: var(--eg-gris);
}
.eg-cant {
  display: inline-block; margin-left: 55px; margin-top: 3px;
  font-size: 12px; font-weight: 800; color: var(--eg-tinta);
}
.woocommerce-checkout .shop_table .cart_item .product-total {
  font-size: 13.5px; font-weight: 600; color: var(--eg-gris); vertical-align: middle;
}

/* Subtotal y total, que sí pesan */
.woocommerce-checkout .shop_table .cart-subtotal th,
.woocommerce-checkout .shop_table .cart-subtotal td { font-size: 14px; color: var(--eg-tinta); }
.woocommerce-checkout .shop_table .order-total th { font-size: 15px; font-weight: 800; }
.woocommerce-checkout .shop_table .order-total td { font-size: 18px; }

/* ── Los métodos, en su propio bloque gris ── */
.woocommerce-checkout #payment ul.payment_methods {
  background: var(--eg-suave) !important;
  border: 0 !important; border-radius: 14px !important;
  padding: 2px 14px !important; margin: 16px 0 0 !important;
}
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label,
.woocommerce-checkout #payment ul.payment_methods .paycash-medio-txt strong {
  font-weight: 800 !important; font-size: 15px !important; color: var(--eg-tinta) !important;
}
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method + li.wc_payment_method > label,
.woocommerce-checkout #payment .paycash-medio { border-top-color: rgba(0,0,0,.09) !important; }

/* El desplegable del medio, más marcado */
.woocommerce-checkout .paycash-select {
  background-color: var(--yoy-sup) !important;
  border: 1px solid var(--eg-linea) !important; border-radius: 12px !important;
  font-weight: 700 !important; font-size: 14.5px !important; color: var(--eg-tinta) !important;
}
.woocommerce-checkout .paycash-label { font-weight: 700; color: var(--eg-tinta); opacity: 1; }
.woocommerce-checkout .paycash-total {
  padding: 13px 2px 2px !important; font-size: 14px;
}
.woocommerce-checkout .paycash-total strong { font-weight: 800; }

/* ══════════════════════════════════════════════════════════════════
   v3.16 — CHECKOUT: UN SOLO TOTAL Y AIRE EN EL BLOQUE DE PAGO
   ══════════════════════════════════════════════════════════════════ */

/* ── El total, una sola vez ──
 * Estaba tres veces: Subtotal, Total y "Monto a pagar". El Subtotal
 * sobra cuando no hay descuento ni envío —es el mismo número— y el
 * "Monto a pagar" repite el Total que está dos renglones más arriba.
 * Queda el Total, que es el que el cliente confirma antes de pagar.
 *
 * El Subtotal reaparece solo si hay un cupón o un cargo, porque ahí sí
 * deja de ser el mismo número. */
.woocommerce-checkout .shop_table:not(:has(.cart-discount)):not(:has(.fee)):not(:has(.shipping)) .cart-subtotal {
  display: none !important;
}
.woocommerce-checkout .paycash-total { display: none !important; }

/* ── El bloque gris de los métodos, con aire ── */
.woocommerce-checkout #payment ul.payment_methods {
  padding: 8px 16px 14px !important;
}
/* El desplegable, del mismo ancho que las filas: estaba sangrado a la
   izquierda y pegado al borde derecho. */
.woocommerce-checkout .paycash-opciones {
  padding: 2px 0 14px 0 !important;
}
.woocommerce-checkout .paycash-label { margin-bottom: 7px; }

/* ── El círculo del selector, visible ──
 * Salía azul y casi invisible: el radio se dibuja con `currentColor`, y
 * acá adentro el color heredado seguía siendo el azul del tema. */
.woocommerce-checkout .paycash-medio,
.woocommerce-checkout .paycash-medio-txt { color: var(--eg-tinta) !important; }
.woocommerce-checkout .paycash-medio input[type="radio"] {
  width: 21px !important; height: 21px !important;
  border: 2px solid var(--yoy-linea) !important; background: var(--yoy-sup) !important;
}
.woocommerce-checkout .paycash-medio input[type="radio"]:checked {
  border-color: var(--yoy-morado) !important;
}
.woocommerce-checkout .paycash-medio input[type="radio"]:checked::after {
  background: var(--yoy-morado) !important; inset: 3px !important;
}
.woocommerce-checkout .paycash-medio { padding: 15px 2px !important; }

/* ── v3.17: ajustes finos del bloque de pago ── */

/* El punto de adentro, azul otra vez. El aro se queda como está, que
   era lo que de verdad no se veía. Si algún día querés otro azul, se
   cambia solo acá. */
:root { --eg-punto: #1a73e8; }
.woocommerce-checkout .paycash-medio input[type="radio"]:checked::after {
  background: var(--eg-punto) !important;
}

/* El desplegable, con margen parejo a los dos lados */
.woocommerce-checkout .paycash-opciones {
  padding: 2px 14px 14px !important;
}

/* ── v3.18: el selector, un disco lleno ──
 * Quedaba un aro negro, un hueco blanco y un punto chico adentro: tres
 * anillos, como un blanco de tiro. El aro se queda gris siempre —no
 * cambia al elegir— y el azul llena todo el círculo hasta tocarlo. */
.woocommerce-checkout .paycash-medio input[type="radio"]:checked {
  border-color: var(--yoy-linea) !important;
}
.woocommerce-checkout .paycash-medio input[type="radio"]:checked::after {
  inset: 0 !important;
  background: var(--eg-punto) !important;
}

/* ══════════════════════════════════════════════════════════════════
   v3.21 — BLOQUE DE PAGO, DEFINITIVO

   Reemplaza los parches de v3.19 y v3.20. Esos corregían síntomas uno
   por uno sin saber quién empujaba la fila de Stripe hacia la izquierda
   (Blocksy, WooCommerce y Stripe tienen reglas sobre estas mismas
   piezas). Este bloque no depende de saberlo: fija TODAS las medidas
   que pueden desplazar algo —margen, relleno, posición, transformación,
   ancho— en cada pieza, con un selector que le gana a cualquiera de
   los tres. No queda palanca suelta.

   El HTML de cada fila, leído del plugin de Stripe y de WooCommerce:

     <li class="wc_payment_method payment_method_X">
       <input type="radio">                 ← el círculo
       <label>Nombre <img icono></label>    ← el nombre
       <div class="payment_box">…</div>     ← el formulario
     </li>

   Cada fila es una grilla de dos columnas —círculo y nombre— y el
   formulario ocupa la fila de abajo a todo el ancho. Los medios de
   PayCash usan la misma medida (21px + 11px de separación), así que los
   cuatro círculos quedan en la misma vertical.
   ══════════════════════════════════════════════════════════════════ */

/* 1 · El panel gris: el único que pone margen interior */
html body.woocommerce-checkout #payment ul.payment_methods {
  display: block !important;
  box-sizing: border-box !important;
  width: auto !important; max-width: none !important;
  margin: 16px 0 0 !important;
  padding: 4px 16px !important;
  position: static !important; left: auto !important; right: auto !important;
  transform: none !important;
  overflow: visible !important;
  background: var(--eg-suave) !important;
  border: 0 !important; border-radius: 14px !important;
  list-style: none !important;
}

/* 2 · Cada fila, una grilla */
html body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method {
  display: grid !important;
  grid-template-columns: 21px minmax(0, 1fr) !important;
  column-gap: 11px !important; row-gap: 0 !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: auto !important; max-width: none !important; min-width: 0 !important;
  margin: 0 !important; padding: 0 !important;
  position: relative !important; left: auto !important; right: auto !important;
  transform: none !important; text-indent: 0 !important;
  overflow: visible !important;
  background: none !important;
  border: 0 !important; border-radius: 0 !important;
  list-style: none !important;
}
html body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method + li.wc_payment_method {
  border-top: 1px solid rgba(0,0,0,.09) !important;
}
html body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method::before,
html body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method::after {
  content: none !important; display: none !important;
}

/* 3 · El círculo: el radio real. Blocksy lo esconde y dibuja uno falso
       con label::before; acá se usa el de verdad, igual al de PayCash.
       La fila de PayCash queda afuera: está oculta a propósito. */
html body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:not(.payment_method_paycash) > input[type="radio"] {
  grid-column: 1 !important; grid-row: 1 !important;
  position: static !important;
  left: auto !important; right: auto !important; top: auto !important;
  transform: none !important;
  opacity: 1 !important; visibility: visible !important;
  clip: auto !important; clip-path: none !important;
  appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
  width: 21px !important; height: 21px !important;
  min-width: 21px !important; max-width: 21px !important;
  margin: 0 !important; padding: 0 !important;
  border: 2px solid var(--yoy-linea) !important; border-radius: 50% !important;
  background: var(--yoy-sup) !important; box-shadow: none !important;
  cursor: pointer; pointer-events: auto !important;
}
html body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:not(.payment_method_paycash) > input[type="radio"]:checked {
  background: var(--eg-punto) !important;
  border-color: var(--yoy-linea) !important;
}
html body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:not(.payment_method_paycash) > input[type="radio"]:focus-visible {
  outline: 2px solid var(--eg-punto); outline-offset: 2px;
}

/* 4 · El nombre, con el ícono pegado al lado */
html body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:not(.payment_method_paycash) > label {
  grid-column: 2 !important; grid-row: 1 !important;
  display: flex !important; align-items: center !important;
  flex-wrap: wrap; gap: 8px !important;
  box-sizing: border-box !important;
  width: auto !important; min-width: 0 !important; max-width: none !important;
  margin: 0 !important; padding: 15px 0 !important;
  position: static !important; left: auto !important; right: auto !important;
  transform: none !important; text-indent: 0 !important;
  background: none !important; border: 0 !important;
  font-size: 15px !important; font-weight: 800 !important;
  line-height: 1.3 !important; color: var(--eg-tinta) !important;
  cursor: pointer;
}
html body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label::before,
html body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label::after {
  content: none !important; display: none !important;
}
html body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label img {
  position: static !important; float: none !important;
  margin: 0 !important; padding: 0 !important;
  max-height: 18px !important; width: auto !important; max-width: 64px !important;
  vertical-align: middle; box-shadow: none !important;
}

/* 5 · El formulario: debajo, a lo ancho de la fila, sin caja */
html body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > .payment_box {
  grid-column: 1 / -1 !important;
  box-sizing: border-box !important;
  width: auto !important; max-width: none !important; min-width: 0 !important;
  margin: 0 !important; padding: 0 0 16px !important;
  position: static !important; left: auto !important; right: auto !important;
  transform: none !important;
  background: none !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important;
  font-size: 14px !important; color: var(--eg-tinta) !important;
}
html body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > .payment_box::before,
html body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > .payment_box::after {
  content: none !important; display: none !important;
}
/* PayCash: su caja es la lista de medios, sin aire extra abajo */
html body.woocommerce-checkout #payment ul.payment_methods > li.payment_method_paycash > .payment_box {
  padding: 0 !important;
}

/* 6 · Lo que imprime Stripe adentro */
html body.woocommerce-checkout #payment .payment_box .testmode-info {
  margin: 0 0 12px !important; padding: 0 !important;
  font-size: 12.5px !important; line-height: 1.5 !important;
  color: var(--eg-gris) !important; text-indent: 0 !important;
}
html body.woocommerce-checkout #payment .payment_box fieldset,
html body.woocommerce-checkout #payment #wc-stripe-upe-form {
  box-sizing: border-box !important;
  width: auto !important; max-width: 100% !important;
  min-width: 0 !important; min-inline-size: 0 !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  position: static !important; left: auto !important; transform: none !important;
}
html body.woocommerce-checkout #payment .wc-stripe-upe-element {
  width: auto !important; max-width: 100% !important;
  margin: 0 !important; padding: 0 !important;
  position: static !important; left: auto !important; transform: none !important;
}
html body.woocommerce-checkout #payment #wc-stripe-upe-errors:empty { display: none !important; }
html body.woocommerce-checkout #payment .payment_box > p:empty { display: none !important; }

/* Apple Pay / Google Pay y el separador "o", si aparecen */
.woocommerce-checkout #wc-stripe-payment-request-wrapper,
.woocommerce-checkout .wc-stripe-payment-request-wrapper { margin: 0 0 12px !important; }
.woocommerce-checkout #wc-stripe-payment-request-button-separator {
  margin: 10px 0 !important; font-size: 12.5px; color: var(--eg-gris);
}

/* 7 · PayCash adentro, en la misma vertical que el círculo de Stripe */
html body.woocommerce-checkout #payment .paycash-medios { margin: 0 !important; padding: 0 !important; }
html body.woocommerce-checkout #payment .paycash-medio {
  margin: 0 !important; padding: 15px 0 !important; gap: 11px !important;
}
html body.woocommerce-checkout #payment .paycash-medio input[type="radio"] {
  margin: 0 !important; flex: none !important;
}
html body.woocommerce-checkout #payment .paycash-opciones {
  margin: 0 !important; padding: 0 0 14px !important;
}

/* ══════════════════════════════════════════════════════════════════
   v3.22 — CELULAR Y SELECTOR UNIFICADO
   Estas dos causas salieron del CSS real de Blocksy del sitio, no de
   suponer: static/bundle/woocommerce.min.css y main.min.css.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · En el celular todo salía corrido y cortado ──
 * Blocksy, por debajo de 690px:
 *   .woocommerce-checkout-payment { position: relative; margin-inline: -26px }
 *   .woocommerce-checkout-payment .place-order { padding: 0 25px }
 * Saca el bloque de pago 26px por cada lado para que llegue al borde de
 * la caja. Con nuestro panel gris adentro, eso lo corría a la izquierda
 * y lo cortaba contra el borde. En la PC no pasaba porque la regla es
 * solo para pantallas chicas. Se anulan las dos: el bloque queda dentro
 * de la caja como todo lo demás, y el botón de pagar sin el relleno que
 * compensaba ese corrimiento. */
html body.woocommerce-checkout #payment.woocommerce-checkout-payment,
html body.woocommerce-checkout .woocommerce-checkout-payment {
  margin-left: 0 !important; margin-right: 0 !important;
  margin-inline: 0 !important;
  position: static !important;
}
html body.woocommerce-checkout .woocommerce-checkout-payment .place-order {
  padding-left: 0 !important; padding-right: 0 !important;
  padding-inline: 0 !important;
}

/* ── 2 · Un solo círculo para la tarjeta y para PayCash ──
 * Blocksy dibuja el punto blanco con::before en todos los radios de
 * pago (.wc_payment_method > input y .payment_box input) y además los
 * baja 3px con `top`. En PayCash el punto se veía; en la tarjeta no,
 * porque ese radio no tenía posición propia y el punto se ubicaba contra
 * la fila. Acá los dos quedan definidos igual, de punta a punta:
 *   sin elegir → aro gris sobre blanco
 *   elegido    → azul lleno con el punto blanco en el centro */
html body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:not(.payment_method_paycash) > input[type="radio"],
html body.woocommerce-checkout #payment .paycash-medio input[type="radio"] {
  position: relative !important;
  top: 0 !important; left: auto !important;
  appearance: none !important; -webkit-appearance: none !important;
  width: 21px !important; height: 21px !important;
  min-width: 21px !important; min-height: 21px !important;
  margin: 0 !important; padding: 0 !important;
  border: 2px solid var(--yoy-linea) !important; border-radius: 50% !important;
  background: var(--yoy-sup) !important;
  box-shadow: none !important;
  flex: none !important;
}
html body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:not(.payment_method_paycash) > input[type="radio"]:checked,
html body.woocommerce-checkout #payment .paycash-medio input[type="radio"]:checked {
  background: var(--eg-punto) !important;
  border-color: var(--eg-punto) !important;
}
/* El punto blanco: el ::before que ya trae Blocksy, centrado y del mismo
   tamaño en los dos */
html body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:not(.payment_method_paycash) > input[type="radio"]::before,
html body.woocommerce-checkout #payment .paycash-medio input[type="radio"]::before {
  content: "" !important; display: block !important;
  position: absolute !important; inset: 0 !important; margin: auto !important;
  width: 7px !important; height: 7px !important;
  border-radius: 50% !important; background: var(--yoy-sup) !important;
  opacity: 0 !important; z-index: 2 !important;
}
html body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:not(.payment_method_paycash) > input[type="radio"]:checked::before,
html body.woocommerce-checkout #payment .paycash-medio input[type="radio"]:checked::before {
  opacity: 1 !important;
}
/* El relleno azul de antes iba en::after; ya no hace falta */
html body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > input[type="radio"]::after,
html body.woocommerce-checkout #payment .paycash-medio input[type="radio"]::after {
  content: none !important; display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v3.23 — Página de gracias y Mi cuenta → pedido
   ═══════════════════════════════════════════════════════════════════ */
:root { --eg-naranja: #fc7c00; }

/* Franjas de los títulos: naranja Empires (venían moradas de Yoy).
   Cubre también los títulos que pone Blocksy y el del plugin de entregas. */
.woocommerce-order-received section.woocommerce-order-details h2,
.woocommerce-view-order section.woocommerce-order-details h2,
.woocommerce-order-received .eg-entrega-tit,
.woocommerce-view-order .eg-entrega-tit {
  border-left: 4px solid var(--eg-naranja) !important;
  padding-left: 12px !important; font-size: 1rem !important; font-weight: 800 !important;
}

/* "Gracias. Tu pedido ha sido recibido.": tinta de la casa, no verde;
   campana naranja; esquinas redondas como todo lo demás. */
.woocommerce-order-received .woocommerce-notice--success,
.woocommerce-order-received .woocommerce-thankyou-order-received {
  color: var(--eg-tinta) !important; background: var(--eg-suave) !important;
  border: 0 !important; border-radius: 12px !important;
  text-align: left; font-weight: 800;
}
.woocommerce-order-received .woocommerce-notice--success::before,
.woocommerce-order-received .woocommerce-notice--success svg,
.woocommerce-order-received .woocommerce-thankyou-order-received::before { color: var(--eg-naranja) !important; fill: currentColor; }

/* Datos del pedido (número, fecha, total, método): sin el marco cuadrado
   de afuera; cada dato ya es su propia cajita redonda. */
.woocommerce-order-received ul.woocommerce-order-overview {
  border: 0 !important; outline: 0 !important; box-shadow: none !important;
  background: none !important; border-radius: 0 !important; padding: 0 !important;
}
.woocommerce-order-received ul.woocommerce-order-overview li {
  background: var(--yoy-sup) !important; border: 1px solid var(--eg-linea) !important;
  border-radius: 12px !important; color: var(--eg-gris);
}
.woocommerce-order-received ul.woocommerce-order-overview li strong { color: var(--eg-tinta); }

/* Detalles del pedido: como el resumen del checkout — carátula, letra
   gris de 13px, sin "× 1", sin encabezado de tabla ni marco cuadrado. */
.woocommerce-order-received table.order_details,
.woocommerce-view-order table.order_details {
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important;
}
.woocommerce-order-received table.order_details thead,
.woocommerce-view-order table.order_details thead { display: none; }
.woocommerce-order-received table.order_details td,
.woocommerce-order-received table.order_details th,
.woocommerce-view-order table.order_details td,
.woocommerce-view-order table.order_details th { padding: 11px 0 !important; border-left: 0 !important; border-right: 0 !important; }
.woocommerce-order-received table.order_details .product-name a,
.woocommerce-view-order table.order_details .product-name a { color: inherit; text-decoration: none; }
.woocommerce-order-received table.order_details .product-name .wc-item-meta,
.woocommerce-view-order table.order_details .product-name .wc-item-meta { display: none; }
.woocommerce-order-received table.order_details .eg-ci img,
.woocommerce-view-order table.order_details .eg-ci img {
  width: 44px; height: 54px; flex: none; object-fit: cover; border-radius: 7px; display: block; margin: 0;
}
.woocommerce-order-received table.order_details .eg-cant,
.woocommerce-view-order table.order_details .eg-cant { margin-left: 55px; }
.woocommerce-order-received table.order_details .product-total,
.woocommerce-view-order table.order_details .product-total {
  font-size: 13.5px; font-weight: 600; color: var(--eg-gris); vertical-align: middle; text-align: right;
}
.woocommerce-order-received table.order_details tfoot th,
.woocommerce-order-received table.order_details tfoot td,
.woocommerce-view-order table.order_details tfoot th,
.woocommerce-view-order table.order_details tfoot td { font-size: 14px; color: var(--eg-tinta); }


/* ═══════════════════════════════════════════════════════════════════
   YOY 1.0 — PIEL OSCURA
   Negro, morado #7C3AED y cian #22D3EE, como el logo. Todo lo de arriba
   viene del child de Empires y usa estas variables para sus colores.
   ═══════════════════════════════════════════════════════════════════ */
:root:root {
  --yoy-fondo:  #0b0a12;
  --yoy-sup:    #151320;   /* tarjetas, paneles, campos */
  --yoy-card:   #151320;
  --yoy-card2:  #1d1a2c;
  --yoy-linea:  rgba(255,255,255,.09);
  --yoy-texto:  #f1f0f8;
  --yoy-gris:   #a19fb6;
  --yoy-morado: #7C3AED;
  --yoy-cian:   #22D3EE;
  --yoy-grad:   linear-gradient(90deg, #7C3AED 0%, #22D3EE 100%);

  /* Las variables del child de Empires, en oscuro */
  --eg-negro: #07060d;
  --eg-tinta: var(--yoy-texto);
  --eg-gris:  var(--yoy-gris);
  --eg-linea: var(--yoy-linea);
  --eg-suave: var(--yoy-card2);
  --eg-rojo:  #7C3AED;
  --eg-rojo2: #6a2fd6;
  --eg-oro:   #22D3EE;
  --eg-naranja: #22D3EE;
  --eg-punto: #7C3AED;

  /* La paleta de Blocksy (Personalizar → Colores) también en oscuro, para
     que nada dependa de lo que esté guardado en el Personalizador. */
  --theme-palette-color-1: #7C3AED;
  --theme-palette-color-2: #22D3EE;
  --theme-palette-color-3: #c9c7db;
  --theme-palette-color-4: #f1f0f8;
  --theme-palette-color-5: rgba(255,255,255,.12);
  --theme-palette-color-6: #1d1a2c;
  --theme-palette-color-7: #0b0a12;
  --theme-palette-color-8: #151320;
  --theme-text-color: #c9c7db;
  --theme-headings-color: #f1f0f8;
  --theme-heading-color: #f1f0f8;
  --theme-link-initial-color: #22D3EE;
  --theme-link-hover-color: #7C3AED;
  --theme-border-color: rgba(255,255,255,.1);
  --theme-form-field-border-initial-color: rgba(255,255,255,.12);
  --theme-form-field-border-focus-color: #7C3AED;
  --theme-form-field-background-initial-color: #151320;
  --theme-form-field-background-focus-color: #1d1a2c;
  --theme-form-text-initial-color: #f1f0f8;
  --theme-form-text-focus-color: #f1f0f8;
  --theme-button-background-initial-color: #7C3AED;
  --theme-button-background-hover-color: #6a2fd6;
  --theme-button-text-initial-color: #fff;
  --theme-button-text-hover-color: #fff;
  color-scheme: dark;
}
html body, body.ct-loading, [data-prefix] { background-color: var(--yoy-fondo); }
body { color: var(--theme-text-color); }
h1, h2, h3, h4, h5, h6, .entry-title, .woocommerce-products-header__title { color: var(--yoy-texto); }
::selection { background: rgba(124,58,237,.45); color: #fff; }

/* ── Botones principales: el degradado del logo ── */
.single_add_to_cart_button,
.woocommerce a.button.alt, .woocommerce button.button.alt,
#place_order, .checkout-button, .wc-proceed-to-checkout .button {
  background: var(--yoy-grad) !important; color: #fff !important; border: 0 !important;
  box-shadow: 0 6px 22px rgba(124,58,237,.28) !important;
}
.single_add_to_cart_button:hover, #place_order:hover, .checkout-button:hover { filter: brightness(1.08); }
.single_add_to_cart_button.disabled, .single_add_to_cart_button:disabled { background: #2a2838 !important; color: #77748c !important; box-shadow: none !important; }

/* ── Grilla de juegos [yoy_juegos] ── */
.yoy-juegos { margin: 30px 0 8px; }
.yoy-juegos-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.yoy-juegos-cab h2 { margin: 0; font-size: 1.3rem; font-weight: 900; color: var(--yoy-texto); }
.yoy-juegos-cab a { font-size: 13px; font-weight: 800; color: var(--yoy-cian) !important; text-decoration: none; white-space: nowrap; }
.yoy-juegos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .yoy-juegos-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1000px) { .yoy-juegos-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.yoy-juego {
  position: relative; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  background: var(--yoy-card); border: 1px solid var(--yoy-linea); text-decoration: none !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.yoy-juego:hover { transform: translateY(-3px); border-color: rgba(124,58,237,.65); box-shadow: 0 10px 26px rgba(124,58,237,.22); }
.yoy-juego-img { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.yoy-juego-img img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 !important; transition: transform .3s ease; }
.yoy-juego:hover .yoy-juego-img img { transform: scale(1.05); }
.yoy-juego-nombre {
  padding: 9px 8px 10px; font-size: 12.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .02em;
  color: var(--yoy-texto); text-align: center; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 640px) { .yoy-juego-nombre { font-size: 13.5px; padding: 11px 10px 12px; } }
.yoy-juego-off {
  position: absolute; top: 8px; left: 8px; z-index: 1; padding: 2px 8px; border-radius: 99px;
  background: var(--yoy-grad); color: #fff; font-size: 11px; font-weight: 900;
}