/*
Theme Name: Astra Child - IDOLO
Template: astra
Version: 2.84
Description: Child theme de Astra con la estética dark/gold de IDOLO (somosidolo.com)
*/

/* ═══════════════════════════════════════
   IDOLO — Variables de marca
═══════════════════════════════════════ */

/* ===== v2.10 -- WooCommerce incluye su propia @font-face local para "Inter" (variable font, weight 300-900) con el MISMO nombre de familia que el Inter de Google Fonts que usa el tema. Al coincidir el nombre, el navegador puede resolver la ambiguedad de forma inconsistente entre ambas fuentes, causando que la tipografia se vea "distinta" en algunos textos. Solucion: declarar nuestra propia fuente bajo un nombre unico (IdoloInter) que no colisiona con la de WooCommerce, usando los mismos archivos de Google Fonts (subsets latin + latin-ext para cubrir acentos/enye). ===== */
@font-face {
  font-family: 'IdoloInter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IdoloInter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IdoloInter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IdoloInter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IdoloInter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IdoloInter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IdoloInter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IdoloInter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --idolo-black: #0a0a0a;
  --idolo-dark: #111111;
  --idolo-dark-2: #1a1a1a;
  --idolo-gray: #888888;
  --idolo-gray-light: #cccccc;
  --idolo-white: #f5f5f0;
  --idolo-gold: #c9a84c;
  --idolo-gold-light: #e8c97a;
  --idolo-gold-dark: #a07830;
  --idolo-font-heading: 'Playfair Display', serif;
  --idolo-font-body: 'IdoloInter', sans-serif;
}

/* ═══════════════════════════════════════
   BASE
═══════════════════════════════════════ */
body {
  background-color: var(--idolo-black) !important;
  color: var(--idolo-white) !important;
  font-family: var(--idolo-font-body) !important;
  font-weight: 300 !important;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .page-title,
.woocommerce-Price-amount + h1 {
  font-family: var(--idolo-font-heading) !important;
  color: var(--idolo-white) !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
}

p, span, a, li, label, input, button, select, textarea {
  font-family: var(--idolo-font-body) !important;
}

a {
  color: var(--idolo-gray-light);
  transition: color 0.3s;
}
a:hover { color: var(--idolo-gold); }

/* ═══════════════════════════════════════
   CABECERA (Astra)
═══════════════════════════════════════ */
.site-header,
.ast-header-break-point .main-header-bar,
.main-header-bar {
  background-color: rgba(10, 10, 10, 0.97) !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.2) !important;
}

.site-title, .site-title a,
.ast-site-identity .site-title a {
  font-family: var(--idolo-font-heading) !important;
  letter-spacing: 6px !important;
  color: var(--idolo-white) !important;
}

.main-header-menu .menu-item > a,
.main-navigation ul li a {
  color: var(--idolo-gray-light) !important;
  font-family: var(--idolo-font-body) !important;
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
}
.main-header-menu .menu-item > a:hover,
.main-navigation ul li a:hover {
  color: var(--idolo-gold) !important;
}

.ast-header-search svg,
.astra-cart-drawer-icon svg,
.ast-site-header-cart svg {
  color: var(--idolo-gray-light) !important;
}

/* ═══════════════════════════════════════
   BOTONES
═══════════════════════════════════════ */
.button, .btn,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button,
a.ast-custom-button,
.single_add_to_cart_button {
  background-color: var(--idolo-gold) !important;
  color: var(--idolo-black) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--idolo-font-body) !important;
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 14px 32px !important;
  transition: background-color 0.3s, transform 0.2s !important;
}
.button:hover, .btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.single_add_to_cart_button:hover {
  background-color: var(--idolo-gold-light) !important;
  color: var(--idolo-black) !important;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════
   WOOCOMMERCE — TIENDA / CATÁLOGO
═══════════════════════════════════════ */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background-color: var(--idolo-dark-2) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 0 !important;
  padding: 16px !important;
  transition: border-color 0.3s, transform 0.3s !important;
}
.woocommerce ul.products li.product:hover {
  border-color: rgba(201, 168, 76, 0.2) !important;
  transform: translateY(-2px);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--idolo-font-heading) !important;
  color: var(--idolo-white) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}
.woocommerce ul.products li.product .price,
.woocommerce .price {
  color: var(--idolo-gray-light) !important;
  font-family: var(--idolo-font-body) !important;
  font-weight: 700 !important;
}
.woocommerce .price ins {
  color: var(--idolo-gold) !important;
  text-decoration: none !important;
}
/* IDOLO: la regla de arriba (.woocommerce .price ins) pone el precio con
   descuento en dorado -- correcto en la pagina de producto individual (ahi
   hay una regla propia y mas especifica, .idolo-product__price-row .price
   ins, que ya lo pinta blanco y gana por especificidad). Pero en el listado
   del catalogo (/tienda/, incluida la seccion "Productos relacionados", que
   usa el mismo marcado) no hay ninguna regla propia que la tape, asi que el
   precio con descuento de Messi se veia dorado en vez de blanco/gris como
   el resto -- medido en vivo en Shopify: el mismo color en ambos precios
   (normal y con descuento), sin dorado. */
.woocommerce ul.products li.product .price ins {
  color: var(--idolo-gray-light) !important;
}

/* ═══════════════════════════════════════
   WOOCOMMERCE — PÁGINA DE PRODUCTO
═══════════════════════════════════════ */
.woocommerce div.product .product_title,
.single-product .entry-title {
  font-family: var(--idolo-font-heading) !important;
  color: var(--idolo-white) !important;
  font-size: clamp(24px, 3vw, 40px) !important;
}
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product div.summary p {
  color: var(--idolo-gray) !important;
  font-family: var(--idolo-font-body) !important;
  line-height: 1.9 !important;
}

/* Selector de variantes (equivalente al Premium/Coleccionista) */
.woocommerce div.product form.cart .variations select,
.woocommerce div.product form.cart .variations td {
  background-color: var(--idolo-dark-2) !important;
  color: var(--idolo-white) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  font-family: var(--idolo-font-body) !important;
}

/* ═══════════════════════════════════════
   CARRITO
═══════════════════════════════════════ */
.woocommerce-cart table.cart,
.woocommerce table.shop_table {
  background-color: var(--idolo-dark) !important;
  border-color: rgba(201, 168, 76, 0.15) !important;
  color: var(--idolo-white) !important;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--idolo-white) !important;
}
.woocommerce-cart-form .product-name a {
  font-family: var(--idolo-font-heading) !important;
  color: var(--idolo-white) !important;
}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout-review-order {
  background-color: var(--idolo-dark) !important;
  color: var(--idolo-white) !important;
}

/* ═══════════════════════════════════════
   FORMULARIOS
═══════════════════════════════════════ */
input[type="text"], input[type="email"],
input[type="password"], input[type="number"],
input[type="tel"], textarea, select {
  background-color: var(--idolo-dark-2) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--idolo-white) !important;
  border-radius: 0 !important;
  font-family: var(--idolo-font-body) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(201, 168, 76, 0.4) !important;
  outline: none !important;
  box-shadow: none !important;
}
label {
  color: var(--idolo-gray) !important;
  font-family: var(--idolo-font-body) !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

/* ═══════════════════════════════════════
   FOOTER (Astra)
═══════════════════════════════════════ */
.ast-footer,
.site-footer,
.footer-widget-area {
  background-color: var(--idolo-dark) !important;
  border-top: 1px solid rgba(201, 168, 76, 0.15) !important;
}
.footer-widget-area .widget-title,
.ast-footer .widget-title {
  font-family: var(--idolo-font-body) !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--idolo-gold) !important;
  font-weight: 600 !important;
}
.ast-footer a, .footer-widget-area a {
  color: var(--idolo-gray) !important;
  font-size: 13px !important;
  font-family: var(--idolo-font-body) !important;
  text-decoration: none !important;
}
.ast-footer a:hover, .footer-widget-area a:hover {
  color: var(--idolo-white) !important;
}
.ast-small-footer,
.ast-footer-overlay {
  background-color: var(--idolo-dark) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: var(--idolo-gray) !important;
}

/* ═══════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--idolo-black); }
::-webkit-scrollbar-thumb { background: var(--idolo-gold-dark); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--idolo-gold); }

/* ═══════════════════════════════════════
   RESPONSIVE BASE
═══════════════════════════════════════ */
@media (max-width: 768px) {
  h1 { font-size: clamp(32px, 8vw, 52px) !important; }
  h2 { font-size: clamp(24px, 6vw, 36px) !important; }
  .site-title, .site-title a { letter-spacing: 4px !important; }
}


/* ═══════════════════════════════════════
   PÁGINA DE PRODUCTO — LAYOUT PERSONALIZADO IDOLO
   (usa woocommerce/content-single-product.php)
═══════════════════════════════════════ */
.idolo-product-page {
  background: var(--idolo-black);
  min-height: 60vh;
}

.idolo-product__breadcrumb {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 40px;
  font-size: 11px;
  color: rgba(245,245,240,0.28);
  letter-spacing: 0.4px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.idolo-product__breadcrumb a { color: rgba(245,245,240,0.28) !important; text-decoration: none; }
.idolo-product__breadcrumb a:hover { color: var(--idolo-gold) !important; }
.idolo-product__breadcrumb .woocommerce-breadcrumb { margin: 0 !important; }

.idolo-product__grid.product {
  max-width: 1400px;
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
}

.idolo-product__gallery {
  padding: 44px 40px 60px 40px;
}
.idolo-product__frame {
  position: relative;
  display: flow-root;
  padding: 10px;
  background: #1e1912;
  box-shadow: inset 0 0 0 1px var(--idolo-gold-dark), inset 0 0 0 4px rgba(201,168,76,0.08);
}
.idolo-product__frame .woocommerce-product-gallery__wrapper {
  width: 100% !important;
}
.idolo-product__frame .woocommerce-product-gallery__image {
  width: 100% !important;
  float: none !important;
}
.idolo-product__frame img {
  width: 100% !important;
  height: auto !important;
}
.idolo-product__frame .woocommerce-product-gallery { background: #101010; }
.idolo-product__frame img { display: block; }

.idolo-product__info {
  padding: 44px 40px 60px 40px;
  border-left: 1px solid rgba(255,255,255,0.05);
}

.idolo-product__tags {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.idolo-product__sport-tag {
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--idolo-gold);
  border: 1px solid rgba(201,168,76,0.35);
  padding: 5px 13px;
  font-weight: 700;
  display: inline-block;
}
.idolo-product__edition-tag {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: rgba(245,245,240,0.32);
}

.idolo-product__info .product_title {
  font-size: 28px !important;
  margin-bottom: 8px !important;
}

.idolo-product__price-row {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* IDOLO -- el precio (<p class="price">) vive dentro de div.summary,
   y hay una regla de Astra/WooCommerce ".woocommerce div.product
   div.summary p" (pensada para la descripcion corta, color gris
   --idolo-gray #888888) que iguala en numero de clases (3) a nuestro
   refuerzo anterior y gana por tener mas selectores de tipo
   (especificidad 0,0,3,3 vs 0,0,3,1) -- por eso el precio se veia
   gris SOLO en productos sin oferta (precio simple <p class="price">
   sin del/ins). En productos con oferta si se veia blanco porque esa
   regla apunta directo a ins/.amount y no compite con la de
   descripcion corta (que solo afecta <p>). Se agrega la clase
   ".idolo-product__info" (el propio div.summary) para subir a 4
   clases y ganar sin depender del recuento de selectores de tipo.
   Shopify muestra el precio en blanco (--idolo-white, #f5f5f0), no
   en gris. */
body.single-product .idolo-product__info .idolo-product__price-row .price,
.idolo-product__info .idolo-product__price-row.idolo-product__price-row .price {
  font-size: 26px !important;
  color: var(--idolo-white) !important;
  font-weight: 700 !important;
}
.idolo-product__price-row .price del {
  color: rgba(245,245,240,0.28) !important;
  font-size: 15px !important;
  opacity: 1 !important;
}
.idolo-product__price-row .price ins {
  text-decoration: none !important;
}

.idolo-product__description {
  font-size: 13px;
  line-height: 1.8;
  color: rgba(245,245,240,0.52);
  margin-bottom: 28px;
  font-weight: 300;
}

.idolo-product__cta-wrap .variations {
  margin-bottom: 20px !important;
}
.idolo-product__cta-wrap .variations th.label {
  font-size: 9px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--idolo-gold) !important;
  font-weight: 700 !important;
  padding-bottom: 8px !important;
}
.idolo-product__cta-wrap table.variations,
.idolo-product__cta-wrap table.variations tbody,
.idolo-product__cta-wrap table.variations tr,
.idolo-product__cta-wrap table.variations td {
  display: block !important;
  width: 100% !important;
}
.idolo-product__cta-wrap .variations select {
  width: 100% !important;
  background: var(--idolo-dark-2) !important;
  border: 1px solid rgba(245,245,240,0.14) !important;
  color: var(--idolo-white) !important;
  padding: 14px 16px !important;
  font-size: 12px !important;
  letter-spacing: 0.5px !important;
  border-radius: 0 !important;
  height: auto !important;
}
.idolo-product__cta-wrap .reset_variations {
  color: rgba(245,245,240,0.4) !important;
  font-size: 11px !important;
}
.idolo-product__cta-wrap .single_add_to_cart_button {
  width: 100%;
  height: 52px;
  font-size: 10px !important;
  letter-spacing: 3px !important;
}
.idolo-product__cta-wrap .quantity input.qty {
  background: var(--idolo-dark-2) !important;
  border: 1px solid rgba(245,245,240,0.14) !important;
  color: var(--idolo-white) !important;
  height: 52px !important;
  border-radius: 0 !important;
}
/* IDOLO -- ya no se muestra: la fila de precio de arriba
   (.idolo-product__price-row) ahora se actualiza en vivo con el precio de
   la variante elegida (ver idolo_variant_swatches_script() en
   functions.php), asi que este precio nativo junto al boton de anadir al
   carrito quedaria repitiendo el mismo dato dos veces en la pagina. */
.idolo-product__cta-wrap .woocommerce-variation-price {
  display: none !important;
}
.idolo-product__cta-wrap .woocommerce-variation-availability {
  margin-bottom: 12px;
}

/* IDOLO -- a pedido del usuario: al cambiar de variante (Premium <->
   Coleccionista), WooCommerce "bloquea" brevemente toda esta zona
   (tarjetas de version + boton "Anadir al carrito") con su spinner
   nativo de jQuery blockUI (icono loader.svg girando sobre una capa
   blanca semitransparente) -- pensado para un cambio real por AJAX,
   pero aqui el precio ya se recalcula al instante en JS (ver
   idolo_variant_swatches_script(), found_variation/reset_data), asi
   que el spinner no aporta nada, solo un parpadeo. Se oculta -- esto
   es CSS puro sobre un elemento que WooCommerce ya inserta en el DOM
   por su cuenta: no anade ninguna peticion, imagen ni script nuevo,
   por lo que no afecta en nada al tiempo de carga de la pagina. */
.idolo-product__cta-wrap.idolo-variant-swatches .blockUI.blockOverlay {
  display: none !important;
}

/* IDOLO -- el usuario reporto un "salto" de toda la parte inferior de la
   pagina (desde el precio hasta "Productos relacionados") la primera vez
   que se elige una variante. Causa raiz real: WooCommerce/Stripe insertan
   un contenedor vacio para el boton de "Finalizar compra exprés" (Apple
   Pay/Google Pay/Link) con id #wc-stripe-express-checkout-element dentro
   de esta zona. Ese metodo esta desactivado (ver Ronda 7, punto 4), asi
   que el contenedor nunca muestra ningun boton -- pero el script de
   Stripe igual lo cambia de display:none a display:flex en cuanto se
   elige una variante (escucha el evento found_variation del formulario),
   y aunque queda vacio (altura 0), su margin-bottom:12px SI participa del
   layout una vez que pasa a flex, empujando 12px hacia abajo todo lo que
   viene despues (boton "Añadir al carrito", "Productos relacionados",
   etc.) -- ese es el salto real y medible que veia el usuario. El
   contenedor SIEMPRE tiene 3 nodos hijos (texto/comentarios internos de
   Stripe) aunque nunca renderice un boton visible, asi que ":empty" no lo
   detecta. En vez de ocultarlo sin condicion, se usa ":not(:has(*))" --
   "sin ningun elemento hijo real (boton, iframe, etc.)" -- para que la
   regla solo oculte el estado fantasma actual: si en el futuro se
   reactiva Apple Pay/Google Pay/Link (Ronda 7, punto 4) y Stripe llega a
   renderizar ahi un boton real (que si tendria un elemento hijo), esta
   regla deja de aplicar automaticamente y el boton se veria normal, sin
   tener que tocar este CSS. */
#wc-stripe-express-checkout-element:not(:has(*)) {
  display: none !important;
  margin: 0 !important;
}

.idolo-product__divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 8px 0 24px;
}

.idolo-product__meta {
  font-size: 11px;
  color: rgba(245,245,240,0.5);
  letter-spacing: 0.2px;
}
.idolo-product__meta a { color: rgba(245,245,240,0.6) !important; }
.idolo-product__meta a:hover { color: var(--idolo-gold) !important; }

@media (max-width: 989px) {
  .idolo-product__grid.product { grid-template-columns: 1fr; }
  .idolo-product__info { border-left: none; border-top: 1px solid rgba(255,255,255,0.06); }
}


/* ═══════════════════════════════════════
   PÁGINA DE PRODUCTO — WHY BUY / META GRID / SWATCHES
═══════════════════════════════════════ */
.idolo-whybuy {
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 28px;
}
.idolo-whybuy__q {
  width: 100% !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--idolo-white) !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 !important;
  cursor: pointer;
  text-align: left;
}
.idolo-whybuy__q:hover {
  background: none !important;
  color: var(--idolo-white) !important;
}
.idolo-whybuy__q-text {
  font-family: var(--idolo-font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--idolo-white);
  letter-spacing: 0.2px;
}
.idolo-whybuy__toggle {
  color: var(--idolo-gold);
  font-size: 17px;
  font-weight: 300;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.idolo-whybuy.open .idolo-whybuy__toggle { transform: rotate(45deg); }
.idolo-whybuy__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.idolo-whybuy.open .idolo-whybuy__a { max-height: 400px; }
.idolo-whybuy__a-inner { padding: 0 0 22px; }
.idolo-whybuy__item {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: rgba(245,245,240,0.55);
  line-height: 1.7;
  margin-bottom: 10px;
  font-family: var(--idolo-font-body);
  font-weight: 300;
}
.idolo-whybuy__item:last-child { margin-bottom: 0; }
.idolo-whybuy__item span:first-child {
  color: var(--idolo-gold);
  flex-shrink: 0;
  font-size: 11px;
}

.idolo-product__meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.idolo-product__meta-item { display: flex; flex-direction: column; gap: 5px; }
.idolo-product__meta-key {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(245,245,240,0.28);
  font-weight: 700;
  font-family: var(--idolo-font-body);
}
.idolo-product__meta-val {
  font-size: 12px;
  color: rgba(245,245,240,0.62);
  font-family: var(--idolo-font-body);
  font-weight: 300;
  letter-spacing: 0.2px;
}
.idolo-product__meta-val a { color: rgba(245,245,240,0.62) !important; }
.idolo-product__meta-val a:hover { color: var(--idolo-gold) !important; }

/* Tarjetas de versión (reemplazan visualmente el <select> nativo) */
.idolo-variant-swatches table.variations { display: none !important; }
.idolo-variant-swatches .idolo-variant-cards {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.idolo-variant-swatches .idolo-variant-cards-label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--idolo-gold);
  font-weight: 700;
  font-family: var(--idolo-font-body);
  margin-bottom: 10px;
  display: block;
}
.idolo-variant-card {
  flex: 1;
  min-width: 150px;
  border: 1px solid rgba(245,245,240,0.12) !important;
  background: transparent !important;
  color: var(--idolo-white) !important;
  padding: 14px 16px !important;
  cursor: pointer;
  text-align: left;
  border-radius: 0 !important;
  transition: border-color 0.2s, background 0.2s;
  font-family: var(--idolo-font-body) !important;
}
.idolo-variant-card:hover { border-color: rgba(245,245,240,0.3) !important; }
.idolo-variant-card.active {
  border-color: var(--idolo-gold) !important;
  background: rgba(201,168,76,0.06) !important;
}
.idolo-variant-card__name {
  display: block;
  font-size: 12px;
  color: var(--idolo-white);
  font-weight: 600;
  letter-spacing: 0.5px;
}

@media (max-width: 599px) {
  .idolo-product__meta-grid { grid-template-columns: 1fr; gap: 16px; }
}


/* ═══════════════════════════════════════
   CABECERA — LAYOUT IDOLO (barra de anuncio + logo centrado)
═══════════════════════════════════════ */
.ast-above-header-wrap {
  background-color: var(--idolo-gold) !important;
}
.ast-above-header-wrap,
.ast-above-header-wrap p,
.ast-above-header-wrap a {
  color: var(--idolo-black) !important;
}
.ast-above-header-wrap .ast-above-header {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.site-above-header-wrap .site-header-section {
  justify-content: center !important;
  width: 100% !important;
  flex: 1 1 100% !important;
}

.site-primary-header-wrap .ast-builder-grid-row {
  display: flex !important;
  align-items: center !important;
}
.site-header-primary-section-left,
.site-header-primary-section-right {
  flex: 1 1 0 !important;
  display: flex !important;
  align-items: center !important;
}
.site-header-primary-section-left { justify-content: flex-start !important; }
.site-header-primary-section-right { justify-content: flex-end !important; }
.idolo-header-center {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.idolo-header-center .site-branding { margin: 0; }

.ast-header-account .ahfb-svg-iconset svg,
.ast-header-search .astra-search-icon svg {
  color: var(--idolo-gray-light) !important;
  width: 18px !important;
  height: 18px !important;
}
.ast-header-account { margin-right: 18px !important; }

/* ===== v2.42 -- Iconos de cuenta y busqueda del header a texto ("CUENTA" /
   "BUSCAR"), para calzar 100% con la captura de referencia de Shopify, que
   usa texto en vez de iconos ahi (mismo tratamiento tipografico que el
   menu principal: INICIO / CATALOGO / CONTACTO). No se toca el marcado
   nativo de Astra ni sus manejadores de eventos -- el buscador se sigue
   expandiendo con su propio JS (slide-search) y el link de cuenta sigue
   resolviendo login o el menu de "Mi cuenta" segun la sesion, exactamente
   igual que antes. Solo se oculta el SVG del icono y se muestra como
   texto visible el label que Astra ya trae internamente (hasta ahora
   oculto para lectores de pantalla). ===== */
.ast-header-account .ahfb-svg-iconset {
  display: none !important;
}
.ast-header-account-link {
  font-family: var(--idolo-font-body) !important;
  font-size: 11px !important;
  font-weight: 400;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--idolo-gray-light) !important;
  text-decoration: none;
}
.ast-header-account-link::after {
  content: "Cuenta";
}
.ast-header-account-link:hover {
  color: var(--idolo-gold) !important;
}

.astra-search-icon .ast-icon,
.search-submit .ast-icon {
  display: none !important;
}
.astra-search-icon .screen-reader-text,
.search-submit span[hidden] {
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  white-space: nowrap;
  margin: 0 !important;
  display: inline-block !important;
  font-family: var(--idolo-font-body) !important;
  font-size: 11px !important;
  font-weight: 400;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--idolo-gray-light) !important;
}
.astra-search-icon:hover .screen-reader-text,
.search-submit:hover span[hidden] {
  color: var(--idolo-gold) !important;
}

/* Fix: WooCommerce core gallery CSS forces div.images to width:48% + float:left,
   which shrinks the product image inside our custom frame. Override to fill frame. */
.idolo-product__frame .woocommerce-product-gallery.images,
.idolo-product__frame div.images {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
.idolo-product__frame .woocommerce-product-gallery__wrapper {
  width: 100% !important;
}
.idolo-product__frame .woocommerce-product-gallery__image,
.idolo-product__frame .woocommerce-product-gallery__image a {
  width: 100% !important;
  display: block !important;
}
.idolo-product__frame img.wp-post-image {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
}

/* Text hierarchy fixes to match Shopify reference (title size, price colors/order, savings badge) */
body .idolo-product__info h1.product_title.entry-title {
  font-size: 28px !important;
  line-height: 1.25 !important;
  margin-bottom: 8px !important;
}
.idolo-product__price-row {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.idolo-product__price-row .price {
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: baseline !important;
  gap: 10px !important;
  margin: 0 !important;
}
.idolo-product__price-row .price ins,
.idolo-product__price-row .price ins .amount {
  color: var(--idolo-white) !important;
  font-weight: 700 !important;
}
.idolo-product__save-badge {
  color: var(--idolo-gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Fallback: hide duplicate WooCommerce description/reviews tabs on product page */
body.single-product .woocommerce-tabs {
  display: none !important;
}

/* Rediseño tarjetas de variante: grid 2 columnas + radio + descripción (como Shopify) */
.idolo-variant-swatches .idolo-variant-cards {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.idolo-variant-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: none !important;
}
.idolo-variant-card__radio {
  width: 16px;
  height: 16px;
  min-width: 16px;
  border-radius: 50%;
  border: 1px solid rgba(245,245,240,0.35);
  margin-top: 2px;
  position: relative;
  transition: border-color 0.2s;
}
.idolo-variant-card.active .idolo-variant-card__radio {
  border-color: var(--idolo-gold);
}
.idolo-variant-card.active .idolo-variant-card__radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--idolo-gold);
}
.idolo-variant-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.idolo-variant-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--idolo-white);
}
.idolo-variant-card__desc {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(245,245,240,0.5);
}

/* IDOLO -- aviso de "elige una version" cuando el usuario intenta anadir
   al carrito sin seleccionar Premium/Coleccionista, igual que en Shopify:
   las tarjetas se marcan en rojo y aparece esta caja de alerta debajo. */
.idolo-variant-error {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 2px 0 18px;
  padding: 12px 14px;
  border: 1px solid rgba(224,138,138,0.45);
  background: rgba(224,138,138,0.08);
  color: #e08a8a;
  font-size: 13px;
  font-family: var(--idolo-font-body);
}
.idolo-variant-error.is-visible {
  display: flex;
}
.idolo-variant-error__icon {
  font-size: 14px;
  line-height: 1;
  flex: none;
}
.idolo-variant-cards.has-error .idolo-variant-card {
  border-color: rgba(224,138,138,0.6) !important;
}

@media (max-width: 480px) {
  .idolo-variant-swatches .idolo-variant-cards {
    grid-template-columns: 1fr;
  }
}

/* Nota de envío bajo el botón Añadir al carrito */
.idolo-product__shipping-note {
  font-size: 12px;
  color: rgba(245,245,240,0.55);
  margin-top: 12px;
  margin-bottom: 0;
}
.idolo-product__shipping-sep {
  margin: 0 6px;
  color: var(--idolo-gold);
}

/* Oculta la descripcion nativa de variacion (ya se muestra en la tarjeta) */
.idolo-variant-swatches .woocommerce-variation-description {
  display: none !important;
}

/* Footer personalizado IDOLO: marca + contacto, antes del footer nativo de Astra */
.idolo-footer-main {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 30px 40px;
  border-top: 1px solid rgba(245,245,240,0.08);
}
.idolo-footer-logo {
  font-family: var(--idolo-font-heading);
  font-size: 22px;
  letter-spacing: 4px;
  color: var(--idolo-gold);
  text-transform: uppercase;
}
.idolo-footer-tagline {
  font-style: italic;
  color: rgba(245,245,240,0.55);
  font-size: 14px;
  margin: 10px 0 18px;
}
.idolo-footer-social {
  display: flex;
  gap: 10px;
}
.idolo-footer-social__link {
  border: 1px solid rgba(245,245,240,0.2);
  color: var(--idolo-white);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 8px 14px;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.idolo-footer-social__link:hover {
  border-color: var(--idolo-gold);
  color: var(--idolo-gold);
}
.idolo-footer-contact__label {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--idolo-gold);
  font-weight: 700;
  margin-bottom: 14px;
}
.idolo-footer-contact__row {
  margin-bottom: 10px;
}
.idolo-footer-contact__key {
  display: block;
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(245,245,240,0.4);
  margin-bottom: 2px;
}
.idolo-footer-contact__val {
  color: var(--idolo-white);
  font-size: 14px;
  text-decoration: none;
}
.idolo-footer-contact__val:hover {
  color: var(--idolo-gold);
}
.idolo-footer-legal {
  font-size: 12px !important;
  color: rgba(245,245,240,0.45) !important;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  align-items: center;
}
.idolo-footer-legal__links {
  display: inline-flex;
  gap: 18px;
  flex-wrap: wrap;
}
.idolo-footer-legal a {
  color: rgba(245,245,240,0.45) !important;
  text-decoration: none;
}
.idolo-footer-legal a:hover {
  color: var(--idolo-gold) !important;
}

/* Seccion "Comunidad" (newsletter) antes del footer */
.idolo-newsletter {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
  padding: 70px 30px 40px;
}
.idolo-newsletter__eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--idolo-gold);
  font-weight: 700;
  margin-bottom: 14px;
}
.idolo-newsletter__title {
  font-family: var(--idolo-font-heading);
  font-size: 30px;
  font-weight: 600;
  color: var(--idolo-white);
  margin: 0 0 14px;
  line-height: 1.25;
}
.idolo-newsletter__title em {
  color: var(--idolo-gold);
  font-style: italic;
}
.idolo-newsletter__subtitle {
  font-size: 14px;
  color: rgba(245,245,240,0.55);
  margin: 0 0 28px;
}
.idolo-newsletter__form {
  display: flex;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
}
.idolo-newsletter__input {
  flex: 1;
  background: transparent !important;
  border: 1px solid rgba(245,245,240,0.2) !important;
  color: var(--idolo-white) !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  border-radius: 0 !important;
}
.idolo-newsletter__button {
  background: var(--idolo-gold) !important;
  color: var(--idolo-black) !important;
  border: none !important;
  padding: 12px 22px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  cursor: pointer;
  border-radius: 0 !important;
  white-space: nowrap;
}
.idolo-newsletter__note {
  font-size: 11px;
  color: rgba(245,245,240,0.35);
  margin: 16px 0 0;
}
.idolo-newsletter__error {
  font-size: 12px;
  color: #e08a8a;
  margin: 10px 0 0;
}
@media (max-width: 480px) {
  .idolo-newsletter__form { flex-direction: column; }
}

/* Fix critico: WooCommerce pone .summary.entry-summary a width:48%+float:right,
   comprimiendo la columna de texto (causaba que el titulo y el precio se rompieran
   en varias lineas). Forzamos que ocupe toda la columna del grid. */
.idolo-product__grid .summary.entry-summary.idolo-product__info {
  width: 100% !important;
  float: none !important;
}

/* Sin marco: la imagen del producto va sin borde, igual que pidio el usuario */
.idolo-product__frame {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.idolo-product__frame .woocommerce-product-gallery {
  background: transparent !important;
}
/* Sin lupa ni zoom/lightbox en la imagen del producto */
.woocommerce-product-gallery__trigger {
  display: none !important;
}
.woocommerce-product-gallery__image a,
.woocommerce-product-gallery__image img {
  cursor: default !important;
}

/* Linea "Idolo" (marca/vendor) bajo el titulo, como en Shopify */
.idolo-product__vendor {
  font-style: italic;
  color: rgba(245,245,240,0.5);
  font-size: 14px;
  margin: 0 0 18px;
}


/* ===== v2.3 -- Full-bleed product grid + typography fixes (extracted from Shopify) ===== */

.idolo-product-page {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
.idolo-product__breadcrumb {
  max-width: none !important;
  padding: 18px 60px !important;
}
.idolo-product__grid.product {
  max-width: none !important;
  width: 100% !important;
}
.idolo-product__gallery {
  padding: 44px 56px 60px 60px !important;
}
.idolo-product__info {
  padding: 44px 60px 60px 56px !important;
}

/* Vendor line -- match Shopify exactly (Playfair italic, 40% opacity) */
.idolo-product__vendor {
  font-family: var(--idolo-font-heading), Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: rgba(245,245,240,0.4) !important;
  font-size: 14px !important;
  margin: 0 0 30px !important;
}

/* Price row + save badge */
.idolo-product__price-row {
  gap: 16px !important;
}
/* IDOLO -- este bloque ponia el precio a 30px, pero la regla de v2.48
   (mas arriba, ".idolo-product__info .idolo-product__price-row .price",
   4 clases -- ver su propio comentario) le gana en especificidad al
   <p class="price"> base y lo deja en 26px; como esa regla de v2.48 NO
   alcanza al <ins> (selector distinto), el <ins> se quedaba en 30px sin
   competencia -- resultado: el precio con oferta (25€, via <ins>) se
   veia 4px mas grande que el precio simple sin oferta (30€, sin <ins>),
   pese a ser el mismo elemento de precio de la misma fila. Se quita el
   30px de aca para que ambos casos queden en el mismo tamano (26px,
   heredado de la regla de v2.48) sin importar si el producto tiene
   oferta activa o no.
*/
.idolo-product__price-row .price,
.idolo-product__price-row .price ins,
.idolo-product__price-row .price ins .amount {
  letter-spacing: -0.5px !important;
}
.idolo-product__save-badge {
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
}

/* IDOLO (v2.62): badge nativo de Astra "¡Oferta!" en la galeria de la
   ficha de producto (.ast-on-card-button.ast-onsale-card) nunca se habia
   tocado -- quedaba con el estilo por defecto de Astra (pildora blanca
   redondeada), un tercer estilo de "oferta" distinto del ya usado en home
   y catalogo. Se unifica al mismo tratamiento: fondo dorado oscuro, texto
   negro, rectangular, mismo tamano/posicion que los demas badges de
   esquina. */
.ast-on-card-button.ast-onsale-card {
  background: var(--idolo-gold-dark) !important;
  color: var(--idolo-black) !important;
  border-radius: 0 !important;
  top: 14px !important;
  left: 14px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 5px 11px !important;
  box-shadow: none !important;
}

/* "VERSION" section label -- Shopify uses plain white bold, not gold uppercase */
.idolo-variant-swatches .idolo-variant-cards-label {
  font-size: 13px !important;
  color: var(--idolo-white) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: var(--idolo-font-body) !important;
}

/* Variant card text sizes */
.idolo-variant-card__name { font-size: 12px !important; }
.idolo-variant-card__desc { font-size: 10.5px !important; }

@media (max-width: 989px) {
  .idolo-product__grid.product {
    grid-template-columns: 1fr !important;
  }
  .idolo-product__info {
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
  }
  .idolo-product__gallery,
  .idolo-product__info {
    padding: 32px 24px !important;
  }
  .idolo-product__breadcrumb {
    padding: 14px 24px !important;
  }
}

@media (max-width: 599px) {
  .idolo-product__info .product_title {
    font-size: 22px !important;
  }
  .idolo-product__price-row .price,
  .idolo-product__price-row .price ins {
    font-size: 24px !important;
  }
}

body.single-product { overflow-x: hidden !important; }


/* ===== v2.3b -- Wishlist button next to Add to Cart (matching Shopify's .idolo-product__cta layout) ===== */
.woocommerce-variation-add-to-cart {
  display: flex !important;
  gap: 12px !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
}
.woocommerce-variation-add-to-cart .quantity {
  flex: none !important;
}
.woocommerce-variation-add-to-cart .single_add_to_cart_button {
  flex: 1 1 0% !important;
  width: auto !important;
}
.idolo-product__wishlist {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  flex: none !important;
  border: 1px solid rgba(245,245,240,0.14) !important;
  background: transparent !important;
  color: rgba(245,245,240,0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: border-color 0.2s, color 0.2s !important;
  padding: 0 !important;
}
.idolo-product__wishlist:hover {
  border-color: var(--idolo-gold) !important;
  color: var(--idolo-gold) !important;
}
.idolo-product__wishlist.is-active {
  border-color: var(--idolo-gold) !important;
  color: var(--idolo-gold) !important;
}
.idolo-product__wishlist svg {
  width: 18px;
  height: 18px;
}


/* Barra de anuncio superior: debe ser dorada, como en Shopify (actualmente queda blanca) */
.ast-above-header-bar {
  background: var(--idolo-gold) !important;
}
.ast-above-header-bar,
.ast-above-header-bar p,
.ast-above-header-bar a {
  color: #0a0a0a !important;
}


/* ===== v2.4 -- Description paragraphs, vendor margin & shipping note match Shopify exactly ===== */
.woocommerce div.product div.summary .idolo-product__description p {
  color: rgba(245,245,240,0.52) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
  margin: 13px 0 10px !important;
}
.idolo-product__vendor {
  margin: 14px 0 30px !important;
}
.woocommerce div.product div.summary p.idolo-product__shipping-note {
  color: rgba(245,245,240,0.28) !important;
  font-size: 11px !important;
  margin: 11px 0 32px !important;
}


/* ===== v2.5 -- Elimina la barra blanca por defecto de Astra bajo el footer legal ===== */
.site-below-footer-wrap {
  background: var(--idolo-dark) !important;
}


/* ===== v2.6 -- Barra de anuncio (altura + tipografia) y logo IDOLO igual que Shopify ===== */
.site-above-header-wrap {
  min-height: 0 !important;
}
.ast-above-header-bar {
  padding: 10px 0 !important;
}
.ast-above-header-bar p {
  font-weight: 600 !important;
  letter-spacing: 2px !important;
}

/* Logo IDOLO: Cinzel, dorado, mayusculas, con el tracking real de Shopify */
.site-title, .site-title a,
.ast-site-identity .site-title a {
  font-family: 'Cinzel', Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 14px !important;
  color: var(--idolo-gold) !important;
  text-transform: uppercase !important;
}


/* ===== v2.7 -- Marco negro real, bloqueo de clic en imagen, tipografia newsletter + footer exacta de Shopify ===== */

/* Marco negro (no dorado) simulando un passe-partout, igual que en Shopify */
.idolo-product__frame {
  border: 10px solid rgb(30,25,18) !important;
  box-shadow: rgb(160,120,48) 0 0 0 1px inset, rgb(30,25,18) 0 0 0 2.5px inset, rgba(201,168,76,0.08) 0 0 0 4px inset !important;
  background: transparent !important;
  padding: 0 !important;
}
.idolo-product__frame .woocommerce-product-gallery {
  background: rgb(16,16,16) !important;
}

/* La imagen ya no se puede clicar ni ampliar */
.woocommerce-product-gallery__image a {
  pointer-events: none !important;
  cursor: default !important;
}

/* Newsletter "Comunidad": tamanos y colores reales de Shopify */
.idolo-newsletter__eyebrow {
  font-size: 10px !important;
  font-weight: 300 !important;
  letter-spacing: 4px !important;
}
.idolo-newsletter__title {
  font-size: 44px !important;
}
.idolo-newsletter__title em {
  font-size: 44px !important;
}
.idolo-newsletter__subtitle {
  color: #888888 !important;
}
.idolo-newsletter__button {
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
}
.idolo-newsletter__note {
  color: #666666 !important;
}

/* Footer: logo, tagline, redes, contacto y linea legal con los valores reales de Shopify */
.idolo-footer-logo {
  font-family: 'Cinzel', Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 14px !important;
}
.idolo-footer-tagline {
  font-family: var(--idolo-font-heading), Georgia, serif !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  letter-spacing: 0.4px !important;
  color: rgba(245,245,240,0.4) !important;
}
.idolo-footer-social__link {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: var(--idolo-gold) !important;
  text-transform: uppercase !important;
}
.idolo-footer-contact__key {
  font-size: 9px !important;
  font-weight: 300 !important;
  letter-spacing: 2px !important;
  color: rgba(201,168,76,0.7) !important;
  text-transform: uppercase !important;
}
.idolo-footer-contact__val {
  font-size: 13px !important;
  color: rgba(245,245,240,0.55) !important;
}
.idolo-footer-legal {
  font-size: 11px !important;
  color: rgba(245,245,240,0.25) !important;
}
.idolo-footer-legal__links a {
  font-size: 11px !important;
  color: rgba(245,245,240,0.25) !important;
}


/* ===== v2.8 -- Marco mas gris/negro, peso de fuente en tarjetas, boton habilitado, sin boton azul de scroll ===== */

/* Marco mas neutro (gris oscuro) en vez del tono marron */
.idolo-product__frame {
  border-color: #1a1a1a !important;
  box-shadow: rgb(160,120,48) 0 0 0 1px inset, #1a1a1a 0 0 0 2.5px inset, rgba(201,168,76,0.06) 0 0 0 4px inset !important;
}

/* Peso de fuente real de Shopify en la descripcion de cada version */
.idolo-variant-card__desc {
  font-weight: 300 !important;
}

/* El boton Añadir al carrito no debe verse apagado/deshabilitado por defecto */
.idolo-product__cta-wrap .single_add_to_cart_button.disabled,
.idolo-product__cta-wrap .single_add_to_cart_button.wc-variation-selection-needed {
  opacity: 1 !important;
}

/* Astra incluye un boton azul de "volver arriba" que no existe en Shopify: lo ocultamos */
#ast-scroll-top {
  display: none !important;
}


/* ===== v2.9 -- Corrige el ancho del footer: .idolo-footer-main era un flex-item directo de .hfeed.site y su margin:0 auto lo encogia a 426px centrado, mientras la fila legal de Astra usaba su contenedor de 1200px centrado (otro ancho distinto). Se igualan ambos a full-bleed con el mismo padding lateral de 80px, como en Shopify. ===== */
.idolo-footer-main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 80px 80px 40px !important;
  box-sizing: border-box !important;
}
.site-below-footer-wrap .ast-builder-footer-grid-columns {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 80px !important;
  box-sizing: border-box !important;
}
@media (max-width: 767px) {
  .idolo-footer-main {
    padding: 50px 24px 30px !important;
  }
  .site-below-footer-wrap .ast-builder-footer-grid-columns {
    padding: 0 24px !important;
  }
}

/* ===================================================================
   HOME — front-page.php
   Replica exacta de los valores reales de somosidolo.com (medidos con
   getComputedStyle sobre el tema publicado): las secciones son
   full-bleed con padding lateral de 72px, SIN contenedor centrado a
   max-width — Astra por defecto mete #primary dentro de un
   .ast-container de 1200px, asi que hay que "romper" ese contenedor
   con la tecnica de breakout (100vw + margenes negativos) para que
   el ancho y las proporciones coincidan con Shopify pixel a pixel.
   =================================================================== */

.idolo-home-hero,
.idolo-home-marquee,
.idolo-home-featured,
.idolo-home-grid-section,
.idolo-home-trust,
.idolo-home-testimonials {
  box-sizing: border-box;
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}
.idolo-home-hero *,
.idolo-home-marquee *,
.idolo-home-featured *,
.idolo-home-grid-section *,
.idolo-home-trust *,
.idolo-home-testimonials * {
  box-sizing: border-box;
}
body.home { overflow-x: hidden; }

/* ---- Hero ---- */
.idolo-home-hero {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  background-color: var(--idolo-black) !important;
  min-height: 560px;
  height: 92vh;
}
.idolo-home-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 56px 80px 72px;
  overflow-y: auto;
}
.idolo-home-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--idolo-gold);
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.idolo-home-hero__eyebrow::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--idolo-gold);
  flex-shrink: 0;
}
.idolo-home-hero__title {
  font-family: var(--idolo-font-heading) !important;
  font-size: clamp(36px, 4.5vw, 78px) !important;
  line-height: 1.06 !important;
  font-weight: 600 !important;
  color: var(--idolo-white) !important;
  letter-spacing: -0.01em;
  margin: 0 0 20px !important;
}
.idolo-home-hero__title em {
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(135deg, var(--idolo-gold-light), var(--idolo-gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.idolo-home-hero__desc {
  font-size: 15px !important;
  font-weight: 300 !important;
  color: var(--idolo-gray) !important;
  line-height: 1.8 !important;
  max-width: 400px;
  margin: 0 0 36px !important;
}
.idolo-home-hero__ctas {
  display: flex;
  align-items: center;
  gap: 20px;
}
.idolo-home-hero__btn-primary {
  font-size: 11px !important;
  padding: 14px 30px !important;
  letter-spacing: 2.5px !important;
  background: var(--idolo-gold) !important;
  color: var(--idolo-black) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-block;
  transition: background-color .2s;
}
.idolo-home-hero__btn-primary:hover { background: var(--idolo-gold-light) !important; }
.idolo-home-hero__btn-secondary {
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  color: var(--idolo-gray-light) !important;
  font-weight: 300 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
.idolo-home-hero__btn-secondary:hover { color: var(--idolo-gold) !important; }
.idolo-home-hero__stats {
  display: flex;
  gap: 32px;
  padding-top: 28px;
  margin-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.idolo-home-hero__stat { display: flex; flex-direction: column; gap: 4px; }
.idolo-home-hero__stat-num {
  font-family: var(--idolo-font-heading) !important;
  font-size: 24px;
  color: var(--idolo-gold);
  font-weight: 600;
}
.idolo-home-hero__stat-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2.5px;
  color: var(--idolo-gray);
  text-transform: uppercase;
  display: block;
}
.idolo-home-hero__visual {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0a0a0a;
}
.idolo-home-hero__visual-fade {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 80px;
  background: linear-gradient(to right, #0a0a0a, transparent);
  z-index: 10;
  pointer-events: none;
}
.idolo-home-hero__photo-frame {
  position: relative;
  width: 78%;
  aspect-ratio: 4 / 3;
  max-height: 72%;
  z-index: 2;
}
.idolo-home-hero__photo-border {
  /* IDOLO: marco unificado con el de la pagina de producto (.idolo-product__frame). */
  position: absolute;
  inset: 0;
  border: 10px solid #1a1a1a;
  box-shadow: rgb(160,120,48) 0 0 0 1px inset, #1a1a1a 0 0 0 2.5px inset, rgba(201,168,76,0.06) 0 0 0 4px inset;
  background: transparent;
  z-index: 2;
  pointer-events: none;
}
.idolo-home-hero__photo-mat {
  position: absolute;
  inset: 10px;
  overflow: hidden;
  background-color: rgb(16,16,16);
  z-index: 1;
}
.idolo-home-hero__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ---- Marquee ---- */
.idolo-home-marquee {
  overflow: hidden;
  padding: 16px 0;
  border-top: 1px solid rgba(201,168,76,0.2);
  border-bottom: 1px solid rgba(201,168,76,0.2);
}
.idolo-home-marquee__track {
  display: flex;
  width: max-content;
  gap: 60px;
  animation: idolo-marquee-scroll 28s linear infinite;
  padding-left: 72px;
}
.idolo-home-marquee__item {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--idolo-gray);
  white-space: nowrap;
}
@keyframes idolo-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .idolo-home-marquee__track { animation: none; }
}

/* ---- Producto destacado ---- */
.idolo-home-featured {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 80px;
  align-items: center;
  padding: 100px 72px !important;
  background: var(--idolo-dark) !important;
}
.idolo-home-featured__showcase {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.idolo-home-featured__frame-border {
  border: 10px solid #1a1a1a;
  box-shadow: rgb(160,120,48) 0 0 0 1px inset, #1a1a1a 0 0 0 2.5px inset, rgba(201,168,76,0.06) 0 0 0 4px inset;
  width: 100%;
}
.idolo-home-featured__frame-mat {
  padding: 0;
  background: rgb(16,16,16);
}
.idolo-home-featured__frame-mat img {
  width: 100%;
  height: auto;
  display: block;
}
.idolo-home-featured__tag {
  display: inline-block;
  font-size: 10px;
  padding: 6px 16px;
  letter-spacing: 3px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--idolo-black);
  background: var(--idolo-gold-dark);
  border: none;
  margin-bottom: 20px;
}
.idolo-home-featured__title {
  font-family: var(--idolo-font-heading) !important;
  font-size: clamp(32px, 3.5vw, 48px) !important;
  line-height: 1.1 !important;
  color: var(--idolo-white) !important;
  font-weight: 600 !important;
  margin: 0 0 20px !important;
}
.idolo-home-featured__title em {
  font-style: italic;
  color: var(--idolo-gold);
}
.idolo-home-featured__desc {
  font-size: 14px !important;
  line-height: 1.9 !important;
  color: var(--idolo-gray) !important;
  margin: 14px 0 32px !important;
}
.idolo-home-featured__price-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.idolo-home-featured__price {
  font-family: var(--idolo-font-heading);
  font-size: 36px;
  font-weight: 600;
  color: var(--idolo-white);
}
.idolo-home-featured__compare {
  font-size: 16px;
  color: #666;
  text-decoration: line-through;
}
.idolo-home-featured__save {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--idolo-gold);
}
.idolo-home-featured__features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 34px;
}
.idolo-home-featured__feature {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--idolo-gray-light);
}
.idolo-home-featured__feature-icon {
  font-size: 10px;
  color: var(--idolo-gold);
  width: 20px;
  flex-shrink: 0;
}
.idolo-home-featured__btn {
  display: inline-block;
  font-size: 11px !important;
  padding: 16px 40px !important;
  letter-spacing: 3px !important;
  background: var(--idolo-gold) !important;
  color: var(--idolo-black) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background-color .2s;
}
.idolo-home-featured__btn:hover { background: var(--idolo-gold-light) !important; }

/* ---- Nuevas piezas (grid) ---- */
.idolo-home-grid-section {
  padding: 100px 72px !important;
  background: var(--idolo-black) !important;
}
.idolo-home-grid-section__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0 0 56px;
}
.idolo-home-grid-section__label {
  display: block;
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--idolo-gold);
  font-weight: 300;
  margin-bottom: 12px;
}
.idolo-home-grid-section__title {
  font-family: var(--idolo-font-heading) !important;
  font-size: clamp(28px, 3.5vw, 44px) !important;
  color: var(--idolo-white) !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
.idolo-home-grid-section__title em {
  font-style: italic;
  color: var(--idolo-gold);
}
.idolo-home-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.idolo-home-grid__card {
  display: block;
  text-decoration: none !important;
  color: var(--idolo-white) !important;
}
.idolo-home-grid__image {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-bottom: 16px;
  overflow: hidden;
}
.idolo-home-grid__frame-border {
  border: 10px solid #1a1a1a;
  box-shadow: rgb(160,120,48) 0 0 0 1px inset, #1a1a1a 0 0 0 2.5px inset, rgba(201,168,76,0.06) 0 0 0 4px inset;
  width: 100%;
  height: 100%;
}
.idolo-home-grid__frame-mat {
  padding: 0;
  background: rgb(16,16,16);
  width: 100%;
  height: 100%;
}
.idolo-home-grid__frame-mat img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.idolo-home-grid__badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 4px 10px;
  color: #fff;
}
.idolo-home-grid__badge.is-oferta,
.idolo-home-grid__badge.is-nuevo { background: var(--idolo-gold-dark); color: var(--idolo-black); }
.idolo-home-grid__cat {
  display: block;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--idolo-gold);
  margin-bottom: 6px;
}
.idolo-home-grid__name {
  font-family: var(--idolo-font-heading) !important;
  font-size: 16px !important;
  color: var(--idolo-white) !important;
  font-weight: 500 !important;
  margin: 0 0 8px !important;
}
.idolo-home-grid__price-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 10px;
}
.idolo-home-grid__price { font-size: 15px; color: #ccc; font-weight: 700; }
.idolo-home-grid__compare { font-size: 12px; color: #666; text-decoration: line-through; }
/* IDOLO (v2.62): el boton "Ver pieza" pasa de barra superpuesta sobre la
   imagen (solo visible al hover) a un boton fijo debajo del precio,
   siempre visible -- pedido explicito del usuario para que se vea mejor
   en todo momento, no solo al pasar el mouse. El <span> se movio en el
   markup (front-page.php) de dentro de .idolo-home-grid__image a despues
   de .idolo-home-grid__price-row. */
.idolo-home-grid__link {
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--idolo-black);
  background: var(--idolo-gold);
  text-transform: uppercase;
  padding: 14px 10px;
  margin-top: 2px;
  transition: background-color .2s;
}
.idolo-home-grid__card:hover .idolo-home-grid__link,
.idolo-home-grid__card:focus-visible .idolo-home-grid__link {
  background: var(--idolo-gold-light);
}

/* ---- Confianza ---- */
.idolo-home-trust {
  padding: 80px 72px !important;
  background: var(--idolo-black) !important;
}
.idolo-home-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.idolo-home-trust__item {
  padding: 32px 20px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.04);
}
.idolo-home-trust__icon {
  display: block;
  font-size: 22px;
  color: var(--idolo-gold);
  margin-bottom: 16px;
}
.idolo-home-trust__title {
  font-family: var(--idolo-font-heading) !important;
  font-size: 15px !important;
  color: var(--idolo-white) !important;
  font-weight: 500 !important;
  margin: 0 0 8px !important;
}
.idolo-home-trust__desc {
  font-size: 12px !important;
  line-height: 1.7 !important;
  color: var(--idolo-gray) !important;
  margin: 0 !important;
}

/* ---- Testimonios ---- */
.idolo-home-testimonials {
  padding: 100px 72px !important;
  background: var(--idolo-dark) !important;
}
.idolo-home-testimonials__header { margin: 0 0 56px; }
.idolo-home-testimonials__label {
  display: block;
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--idolo-gold);
  margin-bottom: 12px;
}
.idolo-home-testimonials__title {
  font-family: var(--idolo-font-heading) !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  color: var(--idolo-white) !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
.idolo-home-testimonials__title em {
  font-style: italic;
  color: var(--idolo-gold);
}
.idolo-home-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.idolo-home-testimonial-card {
  padding: 36px;
  background: var(--idolo-dark-2);
  border: 1px solid rgba(255,255,255,0.06);
}
.idolo-home-testimonial__stars {
  color: var(--idolo-gold);
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 20px;
}
.idolo-home-testimonial__text {
  font-size: 17px;
  line-height: 1.7;
  color: #ccc;
  font-style: italic;
  margin: 0 0 28px;
}
.idolo-home-testimonial__author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.idolo-home-testimonial__avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid rgba(201,168,76,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--idolo-gold);
}
.idolo-home-testimonial__author > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.idolo-home-testimonial__name {
  font-size: 13px;
  color: var(--idolo-white);
  font-weight: 500;
}
.idolo-home-testimonial__location {
  font-size: 10px;
  color: var(--idolo-gray);
}

/* ---- Responsive home ---- */
@media (max-width: 989px) {
  .idolo-home-hero { grid-template-columns: 1fr !important; height: auto; }
  .idolo-home-hero__visual { min-height: 320px; }
  .idolo-home-featured { grid-template-columns: 1fr !important; gap: 40px; padding: 60px 32px !important; }
  .idolo-home-grid-section { padding: 70px 32px !important; }
  .idolo-home-grid { grid-template-columns: repeat(2, 1fr); }
  .idolo-home-trust { padding: 50px 32px !important; }
  .idolo-home-trust__grid { grid-template-columns: repeat(2, 1fr); }
  .idolo-home-testimonials { padding: 70px 32px !important; }
  .idolo-home-testimonials__grid { grid-template-columns: 1fr; }
  .idolo-home-marquee__track { padding-left: 32px; }
  /* IDOLO: en Shopify el titulo del hero tiene su propio clamp() en este
     breakpoint (medido en vivo: clamp(34px, 7vw, 56px)), distinto del
     clamp() de escritorio -- sin esto el piso de 36px del clamp de
     escritorio se queda corto en anchos tablet. */
  .idolo-home-hero__title { font-size: clamp(34px, 7vw, 56px) !important; }
}
@media (max-width: 599px) {
  .idolo-home-hero__copy { padding: 50px 24px; }
  /* IDOLO: en Shopify el hero mobile oculta por completo la columna de
     la foto (incluida la foto secundaria "Donde nace la leyenda") -- solo
     queda el texto a todo el ancho. Ocultar solo el marco interno dejaba
     un hueco negro vacio del alto minimo de la columna; hay que ocultar
     la columna entera. */
  .idolo-home-hero__visual { display: none !important; }
  .idolo-home-grid { grid-template-columns: 1fr; gap: 24px; }
  .idolo-home-grid-section { padding: 50px 20px !important; }
  /* IDOLO: v2.56 -- estos 3 titulos ya escalan solos via clamp() (ver
     reglas base mas arriba), igual que en Shopify -- ahi NO hay ningun
     override fijo en mobile, el propio clamp() ya se encarga. El fijo de
     30px de v2.55 estaba mal: forzaba el mismo tamano en TODOS los anchos
     por debajo de 599px en vez de seguir escalando con el viewport. */
  .idolo-home-trust { padding: 40px 20px !important; }
  .idolo-home-trust__grid { grid-template-columns: repeat(2, 1fr); }
  .idolo-home-testimonials { padding: 50px 20px !important; }
}
/* IDOLO: breakpoint propio de 749px (no es uno de los habituales 599/989
   del tema) porque asi es exactamente como Shopify escala el titulo del
   hero -- tiene su propio tercer clamp() en este ancho especifico, medido
   en vivo: clamp(30px, 9vw, 44px). */
@media (max-width: 749px) {
  .idolo-home-hero__title { font-size: clamp(30px, 9vw, 44px) !important; }
}

/* ═══════════════════════════════════════
   CONTACTO — formulario nativo + páginas legales
═══════════════════════════════════════ */
.page .entry-content {
  max-width: 760px;
  line-height: 1.7;
}
.page .entry-content p,
.page .entry-content li {
  color: var(--idolo-gray-light);
  font-size: 15px;
}
.page .entry-content h2,
.page .entry-content h3 {
  margin-top: 36px;
  margin-bottom: 12px;
}
.page .entry-content ul,
.page .entry-content ol {
  padding-left: 20px;
  margin: 0 0 20px;
}

.idolo-contact-form { max-width: 640px; margin-top: 8px; }
.idolo-contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.idolo-contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.idolo-contact-form__field {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.idolo-contact-form__field label {
  font-size: 10px !important;
  letter-spacing: 2.5px !important;
  color: var(--idolo-gray) !important;
  text-transform: uppercase;
}
.idolo-contact-form__field input,
.idolo-contact-form__field textarea {
  background: var(--idolo-dark) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: var(--idolo-white) !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  font-family: var(--idolo-font-body) !important;
  transition: border-color .2s;
  width: 100%;
  box-sizing: border-box;
}
.idolo-contact-form__field input:focus,
.idolo-contact-form__field textarea:focus {
  outline: none;
  border-color: var(--idolo-gold) !important;
}
.idolo-contact-form__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.idolo-contact-form__submit {
  font-size: 11px !important;
  padding: 14px 34px !important;
  letter-spacing: 2.5px !important;
  background: var(--idolo-gold) !important;
  color: #000 !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer;
  transition: background-color .2s;
}
.idolo-contact-form__submit:hover { background: var(--idolo-gold-light) !important; }
.idolo-contact-form__hint {
  font-size: 11px;
  color: var(--idolo-gray);
  letter-spacing: 1px;
}
.idolo-contact-form__notice {
  padding: 14px 18px;
  margin-bottom: 24px;
  border: 1px solid rgba(201,168,76,0.35);
  font-size: 14px;
  max-width: 640px;
}
.idolo-contact-form__notice--ok { color: var(--idolo-gold-light); border-color: var(--idolo-gold); }
.idolo-contact-form__notice--error { color: #e08a8a; border-color: rgba(224,138,138,0.5); }

/* IDOLO -- validacion del formulario de contacto en el cliente (JS),
   con el mismo estilo/comportamiento que el aviso de "elige una version"
   de la ficha de producto: caja con icono de aviso y borde/campo en rojo,
   en vez del globo nativo feo del navegador. */
.idolo-contact-form__field input.has-error,
.idolo-contact-form__field textarea.has-error {
  border-color: rgba(224,138,138,0.6) !important;
}
.idolo-contact-form__alert {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 2px 0 18px;
  padding: 12px 14px;
  border: 1px solid rgba(224,138,138,0.45);
  background: rgba(224,138,138,0.08);
  color: #e08a8a;
  font-size: 13px;
  font-family: var(--idolo-font-body);
}
.idolo-contact-form__alert.is-visible {
  display: flex;
}
.idolo-contact-form__alert-icon {
  font-size: 14px;
  line-height: 1;
  flex: none;
}

@media (max-width: 600px) {
  .idolo-contact-form__row { grid-template-columns: 1fr; gap: 0; }
}

/* ═══════════════════════════════════════
   CARRITO / CHECKOUT (WooCommerce Blocks) — alinear con el dorado de la marca
═══════════════════════════════════════ */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-return-to-cart-button,
.wc-block-components-totals-coupon__button {
  background-color: var(--idolo-gold) !important;
  border-color: var(--idolo-gold) !important;
  color: #000 !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
}
.wc-block-cart__submit-button:hover,
/* IDOLO -- 'Aplicar' del panel de cupones del checkout, mismo
   tratamiento dorado/negro que el resto de botones de esta seccion en
   vez del azul nativo de WooCommerce (#046bd2). */
.wc-block-components-totals-coupon__button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background-color: var(--idolo-gold-light) !important;
  border-color: var(--idolo-gold-light) !important;
}
.wc-block-components-totals-item__value,
.wc-block-components-product-price,
.wc-block-components-title {
  color: var(--idolo-white) !important;
}
.wc-block-components-totals-item__value,
.wc-block-components-product-price {
  font-weight: 700 !important;
}
/* IDOLO -- el badge redondo de cantidad sobre la miniatura (resumen del
   pedido en el checkout) heredaba fondo Y texto casi del mismo color
   crema (--idolo-white en ambos), asi que el numero quedaba invisible --
   se veia como un simple punto blanco sin numero. Se le da un fondo
   oscuro solido con el numero en blanco, como el badge gris/oscuro que
   usa Shopify en su propio resumen de pedido. */
.wc-block-components-order-summary-item__quantity {
  background-color: #1a1a1a !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.15);
}
.wc-block-components-order-summary-item__quantity span {
  color: #fff !important;
}
.wc-block-components-panel,
.wc-block-components-order-summary,
.wp-block-woocommerce-checkout-order-summary-block {
  border-color: rgba(255,255,255,0.1) !important;
}
/* IDOLO -- el checkout real de Shopify usa campos BLANCOS con esquinas
   redondeadas sobre el fondo oscuro de la pagina (contraste deliberado,
   patron clasico de checkout para dar confianza/legibilidad) en vez de
   inputs oscuros como se habia hecho antes aqui. Se replica ese mismo
   tratamiento en el checkout de WooCommerce, a pedido del usuario de
   alinear ambos checkouts. */
.wc-block-checkout__form input[type="text"],
.wc-block-checkout__form input[type="email"],
.wc-block-checkout__form input[type="tel"],
.wc-block-checkout__form input[type="search"],
.wc-block-checkout__form select,
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-combobox input {
  background-color: #fff !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
  border-radius: 8px !important;
  color: #1a1a1a !important;
}
.wc-block-checkout__form input[type="text"]::placeholder,
.wc-block-checkout__form input[type="email"]::placeholder,
.wc-block-checkout__form input[type="tel"]::placeholder,
.wc-block-components-text-input input::placeholder {
  color: rgba(0,0,0,0.45) !important;
}
/* las etiquetas flotantes (label que se posa dentro del campo y sube al
   enfocar/llenar) deben leerse sobre fondo blanco, no sobre el oscuro. */
.wc-block-components-text-input label,
.wc-block-components-address-form label {
  color: rgba(0,0,0,0.55) !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus ~ label,
.wc-block-components-address-form .is-active label {
  color: rgba(0,0,0,0.75) !important;
}

/* IDOLO -- "Opciones de pago" del checkout: en el checkout real de
   Shopify esta seccion es una tarjeta blanca con esquinas redondeadas
   (mismo patron que los campos de "Entrega" de arriba), con la opcion
   de pago seleccionada resaltada en un crema calido y su radio en
   negro con un anillo dorado -- muy distinto del bloque oscuro con
   texto en mayusculas que traia WooCommerce por defecto. Se alinea
   aqui al tratamiento real observado en el checkout de Shopify
   (referencia visual tomada en vivo, sept. 2026). */
.wc-block-checkout__payment-method .wc-block-components-radio-control {
  background-color: #fff;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 12px;
  overflow: hidden;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option {
  box-shadow: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:last-child {
  border-bottom: none;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option--checked-option-highlighted > label {
  background-color: #fdf6e8;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content {
  background-color: #fff;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content > div {
  color: rgba(0,0,0,0.65) !important;
  padding: 4px 16px 16px 48px;
  font-size: 14px;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control__option {
  text-transform: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  color: #1a1a1a !important;
  padding: 16px 16px 16px 48px !important;
}
.wc-block-checkout__payment-method .wc-block-components-payment-method-label {
  color: #1a1a1a !important;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control__input {
  border: 1px solid rgba(0,0,0,0.3) !important;
  background-color: #fff !important;
  width: 18px !important;
  height: 18px !important;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control__input:checked {
  background-color: #000 !important;
  border: 6px solid var(--idolo-gold) !important;
}

/* IDOLO (v2.59): el radio de "Opciones de envio" nunca tuvo estilo propio.
   WooCommerce Blocks le quita la apariencia nativa del navegador
   (appearance:none) a TODOS los radio-control__input, pero el fix de v2.40
   de arriba solo cubre el radio de metodos de PAGO (scopeado a
   .wc-block-checkout__payment-method, que ahi es una tarjeta blanca). El
   radio de envio vive en una caja oscura (.wc-block-components-shipping-
   rates-control), asi que sin este bloque se veia igual de vacio estuviera
   o no seleccionado -- aunque en el DOM SI estaba marcado (checked=true).
   Aca se usa un punto dorado relleno en vez del anillo negro+dorado de
   pago, porque el fondo es oscuro y no blanco. */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__input {
  border: 1px solid rgba(245,245,240,0.35) !important;
  background-color: transparent !important;
}
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__input:checked {
  border: 1px solid var(--idolo-gold) !important;
  background-color: var(--idolo-gold) !important;
}

/* ═══════════════════════════════════════
   PÁGINA "PEDIDO RECIBIDO" (thank you) — estética de marca (v2.60)
   Antes (v2.37) solo se corregia legibilidad (fondo transparente, texto
   gris claro sobre las cajas por defecto de WooCommerce). Ahora se aplica
   el mismo lenguaje visual que el resto del sitio: el motivo "eyebrow"
   (linea dorada de 40px + texto en mayusculas con tracking, igual que en
   el hero de portada .idolo-home-hero__eyebrow y en la cabecera de la
   tienda .idolo-shop-header__eyebrow), titulos en Playfair, y una franja
   tipo "recibo" para los datos del pedido con separadores dorados
   sutiles. No se toco el HTML (sigue siendo el template clasico de
   WooCommerce), todo el efecto se logra con CSS.
═══════════════════════════════════════ */

/* "Gracias. Tu pedido ha sido recibido." como titular editorial (Playfair)
   con el eyebrow dorado "PEDIDO CONFIRMADO" encima. El truco del guion
   dorado se logra con un fondo en degradado de 40x1px en vez de un
   pseudo-elemento aparte, para no depender de HTML extra. */
.woocommerce-thankyou-order-received {
  display: block !important;
  font-family: var(--idolo-font-heading) !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  color: var(--idolo-white) !important;
  margin: 0 0 40px !important;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(201,168,76,0.18);
}
.woocommerce-thankyou-order-received::before {
  content: "Pedido confirmado";
  display: block;
  font-family: var(--idolo-font-body);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--idolo-gold);
  background: linear-gradient(var(--idolo-gold), var(--idolo-gold)) no-repeat left center / 40px 1px;
  padding-left: 54px;
  margin-bottom: 18px;
}

/* Franja de datos del pedido (numero, fecha, email, total, metodo de
   pago) como un recibo premium: bordes dorados sutiles arriba/abajo,
   cada dato en columna (etiqueta pequena en mayusculas + valor grande
   en Playfair), separadas por lineas finas. */
.woocommerce-order-overview {
  display: flex !important;
  flex-wrap: wrap;
  list-style: none !important;
  padding: 26px 0 !important;
  margin: 0 0 48px !important;
  border-top: 1px solid rgba(201,168,76,0.25) !important;
  border-bottom: 1px solid rgba(201,168,76,0.25) !important;
}
.woocommerce-order-overview > li {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 28px !important;
  margin: 0 !important;
  border-left: 1px solid rgba(245,245,240,0.1);
  font-size: 10px !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--idolo-gray) !important;
}
.woocommerce-order-overview > li:first-child {
  border-left: none;
  padding-left: 0 !important;
}
.woocommerce-order-overview > li strong {
  display: block;
  font-family: var(--idolo-font-heading) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: normal;
  text-transform: none;
  color: var(--idolo-white) !important;
}

/* Titulos de seccion ("Detalles del pedido", direcciones) con el mismo
   guion dorado de 40px que el resto del sitio, en vez del texto plano
   que traia el fix de legibilidad de v2.37. */
.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-customer-details h2,
.woocommerce-order-details h2 {
  background: transparent !important;
  color: var(--idolo-white) !important;
  padding: 14px 0 0 !important;
  margin: 0 0 20px !important;
  font-size: 20px !important;
  position: relative;
  border: none !important;
}
.woocommerce-order-details__title::before,
.woocommerce-column__title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 1px;
  background: var(--idolo-gold);
}

/* Tabla "Detalles del pedido": encabezado con borde dorado apagado,
   fila de "Total" resaltada con borde dorado solido -- igual que el
   cierre de un ticket de compra. */
.woocommerce-table--order-details thead th,
table.shop_table thead th {
  background: transparent !important;
  color: var(--idolo-gray) !important;
  font-size: 10px !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600 !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid var(--idolo-gold-dark) !important;
}
.woocommerce-table--order-details td,
.woocommerce-table--order-details th,
table.shop_table td,
table.shop_table th {
  border-color: rgba(255,255,255,0.08) !important;
  color: var(--idolo-gray-light) !important;
  padding: 14px 0 !important;
}
.woocommerce-table--order-details tfoot tr:nth-last-child(2) th,
.woocommerce-table--order-details tfoot tr:nth-last-child(2) td {
  border-top: 1px solid var(--idolo-gold) !important;
  color: var(--idolo-white) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  padding-top: 18px !important;
}

/* Direcciones de facturacion/envio como tarjetas finas con marco dorado
   sutil sobre un fondo ligeramente elevado (--idolo-dark-2), igual de
   espiritu que la tarjeta blanca del checkout pero adaptada a fondo
   oscuro. */
.woocommerce-customer-details {
  margin-top: 48px !important;
}
.woocommerce-column--billing-address,
.woocommerce-column--shipping-address {
  border: 1px solid rgba(201,168,76,0.18) !important;
  border-radius: 4px;
  background: var(--idolo-dark-2) !important;
  padding: 26px 28px 30px !important;
}
.woocommerce-customer-details address {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--idolo-gray-light) !important;
  font-style: normal;
  font-size: 14px;
  line-height: 1.75;
}

/* ═══════════════════════════════════════
   IDOLO — CATÁLOGO ("Tienda") estilo Shopify (v2.20)
   Grid de 3 columnas, cabecera personalizada (COLECCIÓN / Productos /
   X piezas disponibles / ORDENAR POR) y tarjetas limpias: solo imagen,
   título y precio, sin caja/borde ni botones de compra visibles.
═══════════════════════════════════════ */

/* Tarjetas de producto del listado: sin caja/fondo/borde/hover-lift,
   igual que Shopify (solo imagen + título + precio). */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.woocommerce ul.products li.product:hover {
  border-color: transparent !important;
  transform: none !important;
}
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
  border-radius: 0 !important;
  /* v2.21: la imagen del listado ahora viene sin recortar (tamaño "large"
     en vez del cuadrado "woocommerce_thumbnail"). v2.22: se fija una
     proporción explícita 4:3 (la de las piezas originales) en vez de
     "auto" -- con "auto" el navegador calculaba mal el alto en algunas
     imágenes (se disparaba a >1000px) y dejaba un hueco enorme en la
     tarjeta. Con una proporción fija + object-fit:contain se ve la
     imagen completa sin recortes y sin ese hueco. */
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: contain !important;
}

/* Ocultar la categoría ("Sin categorizar") -- Shopify no la muestra */
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce-page ul.products li.product .ast-woo-product-category {
  display: none !important;
}

/* Un poco de aire bajo la imagen ahora que no hay padding de tarjeta */
.woocommerce ul.products li.product .astra-shop-summary-wrap,
.woocommerce-page ul.products li.product .astra-shop-summary-wrap {
  padding: 14px 2px 0 !important;
}

/* Ocultar los botones de compra del listado (icono sobre la miniatura
   y botón de texto bajo el precio) -- en Shopify las tarjetas no llevan
   ningún botón, solo imagen + título + precio.
   IDOLO -- se añade "a.button" (sin más) además de "a.add_to_cart_button":
   WooCommerce solo añade la clase add_to_cart_button cuando el producto
   es comprable y tiene stock (ver woocommerce_template_loop_add_to_cart());
   si no lo es (p.ej. una variable sin variaciones publicadas/activas)
   imprime el mismo enlace pero con el texto "Leer más" y SOLO las clases
   "button product_type_X" -- sin este selector ese enlace se colaba tanto
   en el catálogo como en "Productos relacionados". El botón propio
   ".idolo-catalog__view-btn" ("Ver pieza") no lleva la clase ".button",
   así que no lo afecta. */
.woocommerce ul.products li.product .ast-on-card-button,
.woocommerce-page ul.products li.product .ast-on-card-button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce-page ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.button,
.woocommerce-page ul.products li.product a.button {
  display: none !important;
}

/* Más aire entre columnas/filas, como en el grid de Shopify */
.woocommerce[class*="columns-"] ul.products,
.woocommerce-page[class*="columns-"] ul.products {
  gap: 40px 32px !important;
}

/* Cabecera del catálogo */
.idolo-shop-header {
  margin: 0 0 40px;
}
.idolo-shop-header__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--idolo-gold) !important;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.idolo-shop-header__eyebrow::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--idolo-gold);
  flex-shrink: 0;
}
.idolo-shop-header__title {
  font-size: clamp(32px, 4vw, 56px) !important;
  line-height: 1.05 !important;
  margin: 0 0 14px !important;
}
.idolo-shop-header__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 24px;
}
.idolo-shop-header__count {
  color: var(--idolo-gray) !important;
  font-size: 13px;
  margin: 0 !important;
}
.idolo-shop-header__count strong {
  color: var(--idolo-white) !important;
  font-weight: 600;
}
.idolo-shop-header__sort {
  display: flex;
  align-items: center;
  gap: 12px;
}
.idolo-shop-header__sort-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--idolo-gray) !important;
}
.idolo-shop-header__sort .woocommerce-ordering {
  margin: 0 !important;
}
.idolo-shop-header__sort select.orderby {
  background-color: var(--idolo-dark-2) !important;
  color: var(--idolo-white) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0 !important;
  font-family: var(--idolo-font-body) !important;
  font-size: 12px !important;
  padding: 10px 32px 10px 14px !important;
}


/* ═══════════════════════════════════════
   IDOLO — Menú móvil (v2.23)
   Bug preexistente: en mobile el menú principal (Inicio/Catálogo/Contacto)
   no quedaba oculto detrás del botón hamburguesa -- se veía en línea,
   metido en una columna de ~51px de ancho, así que cada palabra se
   partía letra por letra en vertical y el header medía ~700px de alto.
   Astra sí agrega correctamente la clase "ast-main-header-nav-open" al
   <body> al togglear el botón (confirmado), pero el CSS que debería
   ocultar/mostrar el menú según esa clase no se estaba aplicando. Se
   define ese comportamiento explícitamente acá: oculto por defecto,
   panel desplegable de ancho completo al abrir.
═══════════════════════════════════════ */
body.ast-header-break-point .ast-mobile-header-wrap .main-header-bar-navigation {
  display: none;
}
body.ast-header-break-point.ast-main-header-nav-open .ast-mobile-header-wrap .main-header-bar-navigation {
  display: block !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background-color: var(--idolo-dark-2) !important;
  border-top: 1px solid rgba(201, 168, 76, 0.15);
  z-index: 999;
}
body.ast-header-break-point .ast-mobile-header-wrap .ast-primary-header-bar,
body.ast-header-break-point .ast-mobile-header-wrap .ast-builder-grid-row {
  position: relative;
}
body.ast-header-break-point.ast-main-header-nav-open .ast-mobile-header-wrap .main-header-bar-navigation ul.main-header-menu {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}
body.ast-header-break-point.ast-main-header-nav-open .ast-mobile-header-wrap .main-header-bar-navigation li.menu-item {
  width: 100% !important;
  flex: 1 1 100% !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.ast-header-break-point.ast-main-header-nav-open .ast-mobile-header-wrap .main-header-bar-navigation a.menu-link {
  display: block !important;
  width: 100% !important;
  padding: 16px 24px !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
}

/* Header móvil: la fila del header en mobile tenía el logo IDOLO
   duplicado (una vez en la sección izquierda, comprimido, y otra vez
   en la sección central, también comprimido a 1/3 del ancho) -- se
   ocultaba entre las letras de "IDOLO" cortadas en columna. Se oculta
   la copia del centro (queda solo la de la izquierda) y así esa
   sección libera espacio para que el logo de la izquierda quepa en
   una sola línea. */
body.ast-header-break-point .ast-mobile-header-wrap .idolo-header-center {
  display: none !important;
}

/* El wordmark "IDOLO" usa una tipografía con muchísimo letter-spacing
   (14px) pensada para el ancho completo del header de escritorio -- en
   mobile, dentro de una sección de ~160px, se partía letra por letra
   en varias líneas. Se reduce tamaño/tracking solo en el header móvil
   y se fuerza una sola línea. */
body.ast-header-break-point .ast-mobile-header-wrap .site-title {
  font-size: 15px !important;
  letter-spacing: 3px !important;
  white-space: nowrap !important;
}
body.ast-header-break-point .ast-mobile-header-wrap .ast-site-identity {
  width: auto !important;
  flex: 0 0 auto !important;
}

/* Menú "fuera del lienzo" (drawer que abre la hamburguesa en mobile):
   no tenía ningún menú asignado en Apariencia > Menús, así que WordPress
   mostraba automáticamente TODAS las páginas del sitio (Carrito, Mi
   cuenta, Página de ejemplo, etc.) en vez del menú real (Inicio /
   Catálogo / Contacto) -- ya se asignó el menú correcto en
   "Ubicación del menú". Acá solo se corrige que la lista traía un
   fondo blanco fijo (de la hoja de estilos de WooCommerce/Astra) que
   no encajaba con el resto del sitio. */
#ast-hf-mobile-menu .main-header-menu,
#ast-mobile-site-navigation .main-header-menu {
  background-color: var(--idolo-dark-2) !important;
}
#ast-hf-mobile-menu .menu-item,
#ast-mobile-site-navigation .menu-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
#ast-hf-mobile-menu a.menu-link,
#ast-mobile-site-navigation a.menu-link {
  color: var(--idolo-white) !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  padding: 16px 24px !important;
}

/* Los links del menú fuera-de-lienzo tienen su propio fondo blanco
   (heredado de los estilos base de WooCommerce/Astra para listas de
   página) que no se veía afectado por el fondo oscuro del <ul>
   contenedor -- se fuerza transparente para que se vea el fondo oscuro
   detrás, incluida la fila del ítem "activo" (página actual). */
#ast-hf-mobile-menu.main-header-menu a.menu-link,
#ast-mobile-site-navigation .main-header-menu a.menu-link,
#ast-mobile-site-navigation .main-header-menu li.current-menu-item > a.menu-link,
#ast-mobile-site-navigation .main-header-menu li.current-menu-item {
  background-color: transparent !important;
}

/* ===== v2.27 -- La fila "Above Header" nativa de Astra (barra de envio
   gratuito) tiene dos problemas: 1) su seccion derecha queda vacia pero
   reserva ancho, corriendo el texto -centrado solo dentro de su propia
   columna- hacia la izquierda en vez de centrarlo en toda la pagina; y
   2) Astra nunca la duplica en el header de mobile (#ast-desktop-header
   completo qudaba oculto bajo el breakpoint mobile), asi que jamas se
   veia en mobile. En vez de parchear la fila nativa, se oculta por
   completo y se reemplaza por .idolo-announcement-bar (ver functions.php,
   hook wp_body_open), que es HTML propio, siempre visible y no depende
   del Header Builder ni de su logica responsive. ===== */
.ast-above-header-wrap {
  display: none !important;
}
.idolo-announcement-bar {
  background: var(--idolo-gold) !important;
  padding: 10px 16px !important;
  text-align: center;
}
.idolo-announcement-bar p {
  margin: 0 !important;
  color: var(--idolo-black) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  line-height: 1.5;
}
@media (max-width: 599px) {
  .idolo-announcement-bar p {
    font-size: 10px !important;
    letter-spacing: 1px !important;
  }
}

/* ===== v2.28 -- Anadir al carrito no daba NINGUNA senal visible: el
   producto SI se agregaba (WooCommerce funcionaba bien por detras), pero
   la plantilla personalizada de producto individual (woocommerce/content-
   single-product.php) habia perdido el hook nativo "woocommerce_before_
   single_product", que es el que imprime el aviso "X ha sido anadido a
   tu carrito. Ver carrito" (wc_print_notices()). Se restauro el hook (ver
   ese archivo) y aqui se viste el aviso para que combine con el resto del
   sitio en vez de verse como una caja verde/roja generica de WordPress. ===== */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  display: block;
  margin: 0 0 24px !important;
  padding: 14px 20px !important;
  list-style: none !important;
  border-radius: 2px;
  font-size: 13px;
  letter-spacing: 0.3px;
  line-height: 1.6;
}
.woocommerce-message {
  background: var(--idolo-dark-2) !important;
  border: 1px solid var(--idolo-gold) !important;
  color: var(--idolo-white) !important;
}
.woocommerce-message .button,
.woocommerce-message a.button {
  display: inline-block;
  margin-left: 12px;
  padding: 6px 14px;
  background: var(--idolo-gold) !important;
  color: var(--idolo-black) !important;
  border-radius: 2px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
  text-decoration: none;
}
.woocommerce-message .button:hover,
.woocommerce-message a.button:hover {
  background: var(--idolo-gold-light) !important;
}
.woocommerce-error,
.woocommerce-info {
  background: var(--idolo-dark-2) !important;
  border: 1px solid var(--idolo-gray) !important;
  color: var(--idolo-white) !important;
}
.woocommerce-error {
  border-color: #b3413d !important;
}

/* ===== v2.29 -- Boton de carrito en el header (ver idolo_header_cart_script
   en functions.php). Mismo lenguaje visual que el resto de botones dorados
   del sitio (single_add_to_cart_button, idolo-newsletter__button). ===== */
.idolo-header-cart {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--idolo-gold) !important;
  color: var(--idolo-black) !important;
  font-family: var(--idolo-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none !important;
  padding: 9px 16px;
  border-radius: 2px;
  white-space: nowrap;
  line-height: 1.4;
  transition: background-color 0.2s;
}
.idolo-header-cart:hover,
.idolo-header-cart:focus {
  background: var(--idolo-gold-light) !important;
  color: var(--idolo-black) !important;
}
.site-header-primary-section-right .idolo-header-cart {
  margin-left: 18px;
}
/* Mobile: header mas compacto -- version reducida al lado de la hamburguesa */
.ast-mobile-header-wrap .idolo-header-cart {
  font-size: 10px;
  letter-spacing: 1px;
  padding: 6px 10px;
  margin-left: 0;
  margin-right: 10px;
}

/* ═══════════════════════════════════════
   CARRITO (WooCommerce Blocks) — layout de 5 columnas estilo Shopify
   (imagen / producto / cantidad / total / eliminar), en vez del layout
   apilado por defecto del bloque. El bloque genera una <table> con solo
   3 <td> por fila (imagen / "detalles" -que trae junto nombre, precio,
   atributos, selector de cantidad y botón de eliminar- / total); se usa
   display:contents en los contenedores intermedios para que sus hijos
   se comporten como celdas de grid directas de la fila, así se puede
   separar cantidad y eliminar en sus propias columnas, igual que en
   idolo-cart.liquid (Shopify): 90px 1fr 120px 120px 40px.
═══════════════════════════════════════ */
.wc-block-cart-items {
  display: block !important;
  width: 100% !important;
}
.wc-block-cart-items thead,
.wc-block-cart-items tbody {
  display: block !important;
  width: 100%;
}
.wc-block-cart-items__header,
.wc-block-cart-items__row {
  display: grid !important;
  grid-template-columns: 72px 1fr 120px 100px 32px;
  column-gap: 16px;
  align-items: center;
}
.wc-block-cart-items__header {
  padding: 0 0 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.wc-block-cart-items__header th {
  display: block !important;
  padding: 0 !important;
  font-family: var(--idolo-font-body) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(245, 245, 240, 0.5) !important;
  text-align: left !important;
}
/* El primer <th> (columna imagen) ya trae el texto visible "Producto";
   se lo deja abarcar tambien la columna de texto (imagen + nombre se leen
   como un solo bloque "Producto", igual que en Shopify). El segundo <th>
   (columna cantidad) solo trae un <span class="screen-reader-text">
   ("Detalles"), oculto a proposito para accesibilidad -- se deja tal cual. */
.wc-block-cart-items__header-image { grid-column: 1 / span 2; }
.wc-block-cart-items__header-product {
  grid-column: 3;
  text-align: center !important;
}
.wc-block-cart-items__header-product::before { content: "Cantidad"; }
.wc-block-cart-items__header-total {
  grid-column: 4;
  text-align: right !important;
}

.wc-block-cart-items__row {
  padding: 28px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.wc-block-cart-item__image {
  grid-column: 1;
  grid-row: 1 / span 6;
  align-self: start;
  padding: 0 !important;
}
.wc-block-cart-item__image img { border-radius: 2px; }
.wc-block-cart-item__product,
.wc-block-cart-item__wrap {
  display: contents !important;
}
.wc-block-components-product-name,
.wc-block-cart-item__prices,
.wc-block-components-product-metadata {
  grid-column: 2;
  padding: 0 !important;
  /* IDOLO -- el contenedor de la fila (.wc-block-cart-items__row) tiene
     align-items:center, asi que sin este align-self:start el bloque de
     nombre/version/precio quedaba centrado verticalmente en su celda
     mientras imagen/cantidad/total/eliminar (que si tienen align-self:
     start explicito) quedaban arriba -- se veian desalineados entre si
     (a pedido del usuario, tras verificar con getBoundingClientRect que
     el nombre arrancaba ~13px mas abajo que el resto). */
  align-self: start;
}
.wc-block-components-product-name {
  /* IDOLO -- este <h3> hereda margin-top:36px de la regla general
     ".page .entry-content h2/h3" (pensada para titulos de contenido
     editorial normal) por el mismo empate de especificidad ya visto en
     v2.48 -- en el resumen del pedido del checkout eso empujaba el
     nombre del producto ~36px por debajo del precio total de la fila
     (que no tiene ese margen), rompiendo la alineacion entre ambos. */
  margin-top: 0 !important;
  color: var(--idolo-white) !important;
  font-family: var(--idolo-font-body) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  order: 1;
}
/* IDOLO -- a pedido del usuario, la celda de producto (carrito y resumen
   del checkout, comparten el mismo marcado de WooCommerce Blocks) debe
   mostrar SOLO nombre, version y precio -- igual que en Shopify. Se quita
   la descripcion corta del producto por completo (antes aparecia debajo
   del precio) y el precio "anterior" tachado (antes mostraba
   "30,00 € 25,00 €"; Shopify solo muestra el precio actual). Tambien se
   reordena para que "Version: X" quede antes del precio (Shopify:
   nombre -> version -> precio), usando el orden de auto-colocacion de
   CSS Grid (mismo grid ya usado para name/prices/metadata en columna 2). */
.wc-block-components-product-metadata__description {
  display: none !important;
}
/* IDOLO -- en el resumen del pedido del checkout (no en /carrito/, que no
   usa este componente) WooCommerce Blocks muestra el precio dos veces por
   producto: el total de la fila (arriba a la derecha, cantidad x precio
   unitario) y ademas esta linea de "precio individual" debajo del nombre,
   redundante (a qty=1 son literalmente el mismo numero repetido). A
   pedido del usuario, se deja solo el precio total de la fila. */
.wc-block-components-order-summary-item__individual-prices {
  display: none !important;
}
.wc-block-components-product-price__regular {
  display: none !important;
}
.wc-block-components-product-metadata {
  order: 2;
  font-size: 12px;
  color: rgba(245, 245, 240, 0.5) !important;
}
.wc-block-cart-item__prices {
  order: 3;
}

/* La cantidad y el botón de eliminar vienen juntos dentro del mismo
   contenedor (.wc-block-cart-item__quantity, flex); se separan en sus
   propias columnas de grid (cantidad centrada, eliminar al final, como
   en Shopify) en vez de dejarlos pegados uno al lado del otro. */
.wc-block-cart-item__quantity { display: contents !important; }
/* IDOLO -- el stepper de cantidad nativo de WooCommerce Blocks mide 42px
   de alto (botones y campo con bastante padding interno) -- con
   align-self:start, su borde superior coincide con el del nombre/total
   (ambos en el tope de la fila), pero al ser mucho mas alto que esas
   lineas de texto (18px) el CONTENIDO del stepper (el numero, los
   botones +/-) queda visualmente mas abajo que el nombre y el total,
   leyendose desalineado aunque los bordes de arriba coincidan (a pedido
   del usuario, que lo senalo en desktop, no en mobile: la cantidad y el
   total debian ir mas finos). Se angosta a un alto similar al de esas
   lineas de texto, en vez de solo en el layout mobile.
*/
.wc-block-components-quantity-selector {
  grid-column: 3;
  grid-row: 1;
  justify-self: center;
  align-self: start;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 2px !important;
  height: 32px !important;
}
.wc-block-components-quantity-selector__button {
  color: var(--idolo-gray-light) !important;
  background: transparent !important;
  width: 30px !important;
  height: 30px !important;
}
.wc-block-components-quantity-selector__input {
  background: transparent !important;
  color: var(--idolo-white) !important;
  height: 30px !important;
  padding: 0 8px !important;
  font-size: 13px !important;
}
.wc-block-cart-item__total {
  grid-column: 4;
  grid-row: 1;
  align-self: start;
  text-align: right !important;
  padding: 0 !important;
  border-top: none !important;
}
/* IDOLO -- Shopify muestra el total de la fila como un precio simple,
   sin la linea divisoria que WooCommerce Blocks agrega de forma nativa
   arriba de este precio, y sin el badge "Ahorra X€" (ese ahorro ya se
   ve reflejado en el precio con descuento de la celda de producto, a
   la izquierda -- mostrarlo tambien aca es redundante y Shopify no lo
   hace). Se oculta el badge nativo de WooCommerce Blocks. */
.wc-block-cart-item__total .wc-block-components-sale-badge {
  display: none !important;
}
/* IDOLO -- mismo criterio que arriba pero para el resumen del pedido
   del checkout (wc-block-components-order-summary-item): Shopify no
   muestra el badge "Ahorra X€" ahi tampoco. */
.wc-block-components-order-summary-item .wc-block-components-sale-badge {
  display: none !important;
}
/* IDOLO -- a pedido del usuario, se reemplaza el icono nativo de
   papelera (SVG) de WooCommerce Blocks por una "X" de texto, igual
   que la usada en el mini-carrito lateral -- se oculta el SVG con
   display:none y se dibuja la "X" con un pseudo-elemento, sin tocar
   la posicion en el grid (ya estaba alineada en la misma fila que
   producto/cantidad/precio desde v2.30-2.34). */
.wc-block-cart-item__remove-link {
  grid-column: 5;
  grid-row: 1;
  align-self: start;
  justify-self: center;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  padding: 6px !important;
  font-size: 20px !important;
  line-height: 1 !important;
  color: rgba(245, 245, 240, 0.25) !important;
  /* IDOLO -- WooCommerce Blocks estiliza este boton nativo como un link
     de texto con subrayado por defecto; con el SVG oculto y la "X" de
     texto, ese subrayado quedaba visible debajo del simbolo (a pedido
     del usuario, se quita). */
  text-decoration: none !important;
}
.wc-block-cart-item__remove-link:hover {
  color: #d85a30 !important;
}
.wc-block-cart-item__remove-link svg {
  display: none !important;
}
.wc-block-cart-item__remove-link::before {
  content: "\00d7";
}

/* Encabezado del resumen del pedido: mismo tratamiento tipográfico
   (mayúsculas, tracking amplio, tenue) que "RESUMEN DEL PEDIDO" en
   Shopify, en vez del texto por defecto del bloque. */
.wc-block-components-totals-wrapper:first-of-type .wc-block-components-title,
.wc-block-cart__totals-title {
  font-family: var(--idolo-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(245, 245, 240, 0.6) !important;
}

@media (max-width: 700px) {
  .wc-block-cart-items__header { display: none !important; }
  .wc-block-cart-items__row {
    grid-template-columns: 64px 1fr auto;
    row-gap: 6px;
    padding: 24px 0 !important;
  }
  .wc-block-cart-item__image { grid-row: 1 / span 4; }
  /* IDOLO -- fila y columna explicitas para cada elemento (en vez de
     dejar que el auto-placement de CSS Grid las infiera): al agregar
     la columna nueva para el total (ver mas abajo) el auto-placement
     dejaba "precio unitario" despues de cantidad/total en vez de
     antes, por quedar la fila 3 libre pero el cursor de auto-placement
     ya haber avanzado -- se fija cada fila a mano para que el orden
     visual sea siempre: nombre, version, precio unitario, cantidad+total. */
  .wc-block-components-product-name {
    grid-column: 2;
    grid-row: 1 !important;
  }
  .wc-block-components-product-metadata {
    grid-column: 2;
    grid-row: 2 !important;
  }
  .wc-block-cart-item__prices {
    grid-column: 2;
    grid-row: 3 !important;
  }
  /* IDOLO -- cantidad y total "mas finos" y en la misma linea (a pedido
     del usuario, siguiendo una fila de referencia de Shopify): el stepper
     de cantidad se angosta (menos ancho/alto) y se coloca junto al total
     en la misma fila en vez de quedar cada uno en su propia fila. Los
     !important en grid-row/grid-column son necesarios porque el bloque
     nativo de WooCommerce agrega sus propias clases de contenedor
     (.is-mobile/.is-small/.is-medium -- por ancho del bloque, no del
     viewport) con reglas de mayor especificidad (p.ej. ".is-mobile ...
     .wc-block-cart-item__total { grid-row-start: 1 }") que sin !important
     ganaban por especificidad y hacian que el total apareciera arriba de
     todo, encimado con el precio unitario, en vez de junto a la cantidad. */
  .wc-block-components-quantity-selector {
    grid-column: 2;
    grid-row: 4 !important;
    justify-self: start;
    align-self: center;
    margin-top: 6px;
    height: 30px !important;
  }
  .wc-block-components-quantity-selector__button {
    width: 26px !important;
    height: 28px !important;
  }
  .wc-block-components-quantity-selector__input {
    width: 32px !important;
    height: 28px !important;
    padding: 0 4px !important;
    font-size: 12px !important;
  }
  .wc-block-cart-item__total {
    grid-column: 3 !important;
    grid-row: 4 !important;
    align-self: center !important;
    justify-self: end;
    text-align: right !important;
    font-weight: 600;
    margin-top: 6px;
  }
  .wc-block-cart-item__remove-link {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
}

/* IDOLO -- la pagina Carrito usa el layout "contenido normal" de Astra
   (ast-plain-container), que limita .entry-content a ~760px de ancho --
   por eso el layout de 5 columnas de arriba quedaba comprimido en vez
   de aprovechar todo el ancho, como en Shopify. Se libera solo en esta
   pagina (via el body class woocommerce-cart que WooCommerce agrega). */
body.woocommerce-cart .entry-content.clear,
body.woocommerce-cart article.ast-article-single {
  max-width: none !important;
}

/* IDOLO -- el checkout (/finalizar-compra/) tiene el mismo problema que el
   carrito: es una Pagina normal de WP (ast-plain-container, ~760px), lo que
   aplasta el layout de 2 columnas de WooCommerce Blocks (formulario +
   resumen del pedido) dejando el resumen a ~266px de ancho -- el nombre y
   la descripcion de cada producto se parten letra por letra. Se libera el
   ancho solo en esta pagina (via el body class woocommerce-checkout que
   WooCommerce agrega), con un max-width propio mas comodo para 2 columnas
   (a diferencia del carrito, aqui no conviene ir a todo el ancho de la
   pantalla: se ve raro con las columnas muy separadas). */
body.woocommerce-checkout .entry-content.clear,
body.woocommerce-checkout article.ast-article-single {
  max-width: 1160px !important;
}


/* ═══════════════════════════════════════
   CARRITO — resumen del pedido completo (Envío / IVA / EUR), igual que
   Shopify (ver idolo_cart_summary_script en functions.php)
═══════════════════════════════════════ */
.idolo-cart-shipping-row .wc-block-components-totals-item__value {
  color: var(--idolo-gray-light);
}
.idolo-cart-disclaimer {
  font-family: var(--idolo-font-body) !important;
  /* IDOLO -- Astra aplica su propia tipografia global de parrafo
     (.entry-content p) con mayor especificidad que esta clase sola, asi
     que el tamano de fuente quedaba mas grande de lo definido aca (se
     vela "enorme" comparado con el resto del panel) -- se fuerza con
     !important, a pedido del usuario. */
  font-size: 12px !important;
  color: var(--idolo-gray) !important;
  line-height: 1.5;
  margin: 4px 0 20px;
}

/* IDOLO -- la fila de total (footer) del panel usa por defecto un
   tamano de letra bastante mas grande que el resto de filas del
   resumen (WooCommerce Blocks la destaca a proposito) -- se veia
   desproporcionada frente a "Subtotal"/"Envio" (a pedido del usuario,
   que la comparo con el resumen real de Shopify: ahi la etiqueta es
   discreta, igual que el resto, y solo el importe se destaca un poco
   mas, sin llegar a ser enorme). */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-size: 13px !important;
  font-weight: 600 !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 18px !important;
}

/* ═══════════════════════════════════════
   CARRITO VACIO — bloque nativo "Nuevo en la tienda" (Productos
   recientes, woocommerce/product-new) que WooCommerce Blocks muestra
   cuando el carrito no tiene productos. Usa su propio marcado
   (wc-block-grid__*), distinto al del catalogo clasico (li.product),
   asi que no heredaba ninguno de los estilos de marca ya aplicados ahi
   (tipografia, badge "OFERTA" dorado, boton "Ver pieza") -- se estiliza
   por separado. El renombrado de los botones nativos ("Añadir al
   carrito"/"Seleccionar opciones" -> "Ver pieza") se hace por JS, ver
   idolo_cart_summary_script() en functions.php.
═══════════════════════════════════════ */
.wc-block-grid__product-title {
  font-family: var(--idolo-font-heading) !important;
  color: var(--idolo-white) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}
/* IDOLO -- el link nativo que envuelve toda la tarjeta (.wc-block-grid__
   product-link, <a>) trae subrayado por defecto de WooCommerce Blocks --
   el div de arriba (product-title) no tiene subrayado propio (no es un
   link), asi que no alcanzaba con estilizarlo a el solo; el subrayado
   real esta en el <a> padre (a pedido del usuario, que lo señalo en una
   captura de estas mismas tarjetas). */
.wc-block-grid__product-link {
  text-decoration: none !important;
}
.wc-block-grid__product-price {
  color: var(--idolo-gray-light) !important;
  font-family: var(--idolo-font-body) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}
/* Badge nativo "Oferta": circulo azul por defecto (sin relacion con la
   marca) -- se alinea al mismo tratamiento que el badge "OFERTA" del
   resto del sitio (home/catalogo/ficha de producto: dorado oscuro,
   texto negro, sin redondeo). */
.wc-block-grid__product-onsale {
  background: var(--idolo-gold-dark) !important;
  color: var(--idolo-black) !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 5px 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  top: 14px !important;
  right: 14px !important;
  line-height: 1 !important;
}
/* IDOLO -- parida real con "Nuevas piezas" de home (a pedido explicito
   del usuario, que la mitigacion de v2.66 -- un simple borde fino -- no
   dejaba conforme): ahora la imagen ya llega sin recortar desde PHP
   (ver idolo_empty_cart_uncropped_image en functions.php, tamano
   woocommerce_single en vez de woocommerce_thumbnail), asi que aca se
   replica el mismo marco decorativo que .idolo-home-grid__frame-border
   + .idolo-home-grid__frame-mat (borde oscuro grueso + filetes dorados
   en inset + fondo oscuro detras de la imagen), pero en un solo
   elemento en vez de los dos divs anidados que usa home, porque este
   bloque nativo de WooCommerce no trae ese marcado extra. */
.wc-block-grid__product-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 10px solid #1a1a1a;
  box-shadow: rgb(160, 120, 48) 0 0 0 1px inset, #1a1a1a 0 0 0 2.5px inset, rgba(201, 168, 76, 0.06) 0 0 0 4px inset;
  background: rgb(16, 16, 16);
  box-sizing: border-box;
}
.wc-block-grid__product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ═══════════════════════════════════════
   PÁGINA DE PRODUCTO — "Productos relacionados" (theme v2.46). Esta
   sección la renderiza WooCommerce como <section class="related
   products"> HERMANA de .idolo-product-page (no hija), así que no
   heredaba ninguno de los paddings de página (breadcrumb/galería/info
   usan max-width 1400px + padding lateral) y quedaba pegada al borde
   izquierdo/derecho del viewport. Shopify no tiene esta sección en la
   ficha de producto (no hay referencia directa que igualar), así que
   se le da el mismo tratamiento de contenedor que ya usa el resto de
   la página de producto para que quede consistente.
═══════════════════════════════════════ */
.related.products,
.upsells.products {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 20px 60px 80px !important;
  box-sizing: border-box !important;
}
.related.products > h2,
.upsells.products > h2 {
  font-family: var(--idolo-font-heading) !important;
  color: var(--idolo-white) !important;
  font-size: 28px !important;
  margin: 0 0 30px !important;
}
@media (max-width: 989px) {
  .related.products,
  .upsells.products {
    padding: 16px 24px 60px !important;
  }
}

/* ═══════════════════════════════════════
   CATÁLOGO (/tienda/) — badge "OFERTA" en productos con descuento
   (theme v2.47). Shopify muestra un badge rojo "OFERTA" sobre la miniatura
   de cada producto rebajado en /collections/all -- en WooCommerce el
   listado (plantilla nativa de Astra, no la de idolo-home-grid usada en
   home) no pinta ningún indicador visual de oferta en la tarjeta, solo el
   precio tachado debajo. WooCommerce ya marca el <li> del producto con la
   clase ".sale" quando está rebajado (nativo, no hace falta JS), así que
   se pinta el badge con CSS puro sobre ese contenedor -- mismo color que
   el badge "OFERTA" que ya existe en la sección destacada de home
   (idolo-home-grid__badge.is-oferta, #e0483a). */
.astra-shop-thumbnail-wrap {
  position: relative;
  overflow: hidden;
}
li.product.sale .astra-shop-thumbnail-wrap::before {
  content: "OFERTA";
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: var(--idolo-gold-dark);
  color: var(--idolo-black);
  font-family: var(--idolo-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 5px 11px;
  text-transform: uppercase;
}

/* IDOLO (v2.62): el boton "Ver pieza" del catalogo pasa de barra
   superpuesta sobre la miniatura (pseudo-elemento ::after, v2.61) a un
   boton real (<a>, ver idolo_catalog_view_piece_button() en functions.php)
   debajo del precio, siempre visible -- mismo cambio de criterio que en
   el grid "Nuevas piezas" de home (.idolo-home-grid__link). Hace falta un
   elemento real (no un pseudo-elemento) porque ahora vive fuera de la
   miniatura, despues del precio. */
.idolo-catalog__view-btn {
  display: block;
  text-align: center;
  font-family: var(--idolo-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--idolo-black) !important;
  background: var(--idolo-gold);
  text-transform: uppercase;
  padding: 14px 10px;
  text-decoration: none !important;
  margin-top: 10px;
  transition: background-color .2s;
}
li.product:hover .idolo-catalog__view-btn,
li.product:focus-within .idolo-catalog__view-btn {
  background: var(--idolo-gold-light);
}

/* ═══════════════════════════════════════
   RESULTADOS DE BÚSQUEDA (/?s=...) — theme v2.50
   El buscador nativo del header (icono "BUSCAR") cae en la plantilla
   generica de WordPress/Astra para resultados de busqueda, que nunca se
   habia probado ni estilizado: usa el formato de "tarjeta de blog" propio
   de Astra (.ast-article-inner con fondo BLANCO solido, pensado para un
   tema claro), mientras que el texto hereda el color crema del sitio
   (--idolo-white, #f5f5f0) -- el resultado es texto casi blanco sobre
   fondo blanco, prácticamente ilegible. Se oculta la caja blanca y el
   metadato de autor/fecha (no aporta nada en una tienda: "admin / fecha")
   y se deja solo imagen + título + extracto, con la paleta oscura del
   resto del sitio. No se reconstruye como tarjeta de producto completa
   (con precio y "Añadir al carrito") para mantener el cambio acotado --
   la plantilla nativa de WordPress no expone esos datos aquí.
*/
body.search .ast-article-inner {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}
body.search .entry-meta {
  display: none !important;
}
body.search .entry-title a {
  color: var(--idolo-white) !important;
  font-family: var(--idolo-font-heading) !important;
  text-decoration: none !important;
}
body.search .entry-title a:hover {
  color: var(--idolo-gold) !important;
}
body.search .ast-excerpt-container,
body.search .ast-excerpt-container p {
  color: rgba(245, 245, 240, 0.52) !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}
body.search article.ast-article-post {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 30px;
  margin-bottom: 30px;
}
/* Cabecera "Resultados de busqueda para: ..." y el bloque "no se encontro
   nada" usan el mismo fondo blanco de Astra -- mismo problema, mismo
   fix. */
body.search .ast-archive-description,
body.search .no-results.not-found {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}
body.search .page-title.ast-archive-title {
  color: var(--idolo-white) !important;
  font-family: var(--idolo-font-heading) !important;
}
body.search .ast-archive-description p,
body.search .no-results.not-found p {
  color: rgba(245, 245, 240, 0.7) !important;
}
body.search .woocommerce-breadcrumb,
body.search .woocommerce-breadcrumb a {
  color: rgba(245, 245, 240, 0.5) !important;
}


/* ═══════════════════════════════════════
   IDOLO — v2.63: Mini-carrito lateral (drawer)
═══════════════════════════════════════ */
/* IDOLO -- Sustituye el aviso "producto añadido" que WooCommerce muestra
   arriba del todo de la página (invisible si el usuario está scrolleado
   hacia abajo -- el bug que originó este cambio) por un panel lateral
   que se abre sin recargar la página, con el carrito ya confirmado y
   editable ahí mismo. Ver idolo_mini_cart_drawer_script() y
   idolo_product_add_to_cart_ajax_script() en functions.php. Anclado al
   borde derecho en escritorio (420px); a pantalla completa sólo en
   mobile (media query más abajo), a pedido explícito del usuario. */
.idolo-minicart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 100000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.idolo-minicart-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.idolo-minicart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 420px;
  max-width: 92vw;
  background: var(--idolo-dark);
  border-left: 1px solid rgba(201, 168, 76, 0.3);
  z-index: 100001;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
  font-family: var(--idolo-font-body);
}
.idolo-minicart-drawer.is-open {
  transform: translateX(0);
}
.idolo-minicart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(245, 245, 240, 0.08);
}
.idolo-minicart-drawer__title {
  font-family: var(--idolo-font-heading);
  font-size: 18px;
  color: var(--idolo-white);
  margin: 0;
}
.idolo-minicart-drawer__close {
  background: none;
  border: none;
  color: var(--idolo-gray-light);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.idolo-minicart-drawer__close:hover {
  color: var(--idolo-white);
}
.idolo-minicart-drawer__items {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}
.idolo-minicart-item {
  display: grid;
  grid-template-columns: 70px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(245, 245, 240, 0.06);
}
.idolo-minicart-item__img {
  width: 70px;
  height: 70px;
  background-color: var(--idolo-dark-2);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(201, 168, 76, 0.25);
}
.idolo-minicart-item__name {
  font-size: 14px;
  color: var(--idolo-white);
  margin-bottom: 4px;
}
.idolo-minicart-item__variant {
  font-size: 11px;
  color: var(--idolo-gray);
  margin-bottom: 8px;
}
.idolo-minicart-item__qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(245, 245, 240, 0.15);
  font-size: 12px;
  height: 24px;
}
.idolo-minicart-item__qty button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  line-height: 1;
  color: var(--idolo-gray-light);
  width: 22px;
  cursor: pointer;
}
.idolo-minicart-item__qty button:hover {
  color: var(--idolo-gold);
}
.idolo-minicart-item__qty span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  font-size: 12px;
  line-height: 1;
  color: var(--idolo-white);
}
.idolo-minicart-item__price {
  font-size: 14px;
  font-weight: 700;
  color: var(--idolo-white);
  text-align: right;
  white-space: nowrap;
}
.idolo-minicart-item__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 4px;
  font-size: 18px;
  line-height: 1;
  color: var(--idolo-gray-light);
  cursor: pointer;
}
.idolo-minicart-item__remove:hover {
  color: var(--idolo-gold);
}
.idolo-minicart-drawer__empty {
  text-align: center;
  color: var(--idolo-gray);
  font-size: 13px;
  padding: 60px 20px;
}
.idolo-minicart-drawer__footer {
  border-top: 1px solid rgba(245, 245, 240, 0.08);
  padding: 20px 24px 26px;
}
.idolo-minicart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: var(--idolo-white);
  margin-bottom: 6px;
}
.idolo-minicart-drawer__subtotal b {
  font-weight: 700;
}
.idolo-minicart-drawer__disclaimer {
  font-size: 11px;
  color: var(--idolo-gray);
  margin-bottom: 18px;
}
.idolo-minicart-drawer__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.idolo-minicart-drawer__btn {
  display: block;
  background: var(--idolo-gold);
  color: var(--idolo-black);
  border: none;
  padding: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.idolo-minicart-drawer__btn:hover {
  background: var(--idolo-gold-light);
  color: var(--idolo-black);
}
.idolo-minicart-drawer__btn--ghost {
  background: transparent;
  color: var(--idolo-gray-light);
  border: 1px solid rgba(245, 245, 240, 0.2);
}
.idolo-minicart-drawer__btn--ghost:hover {
  border-color: var(--idolo-gold);
  color: var(--idolo-white);
  background: transparent;
}
.single_add_to_cart_button.idolo-loading {
  opacity: 0.7;
  cursor: wait;
}
@keyframes idoloFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 700px) {
  .idolo-minicart-drawer {
    width: 100%;
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════
   RESULTADOS DE BÚSQUEDA (/?s=...) — tarjetas de producto en vez de
   texto completo del artículo (theme v2.68). Reusa el marcado y las
   clases de "Nuevas piezas" (idolo-home-grid__*, ver template-parts/
   content-blog.php), así que la tipografía/marco/badge ya están
   resueltos por el CSS de esa sección; acá solo se convierte el
   contenedor que Astra ya envuelve alrededor de cada resultado
   (.ast-row, flex por defecto) en una grilla, igual que en home.
═══════════════════════════════════════ */
body.search-results .ast-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  row-gap: 40px;
}
@media (max-width: 989px) {
  body.search-results .ast-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  body.search-results .ast-row { grid-template-columns: 1fr; gap: 24px; }
}


/* ===== IDOLO -- checkout /finalizar-compra/: fix "Pago expres" + estetica de campos (v2.83) =====
   Nota: el bloque anterior (v2.82) perdia contra reglas ya existentes mas arriba en este mismo
   archivo -- ".wc-block-checkout__form input[type=\"email\"]" y similares (clase + atributo +
   elemento, especificidad 0,2,1) -- que fuerzan estos campos a blanco/texto negro/radio 8px.
   Esta version iguala esa especificidad agregando "[type]" a cada selector para ganar por orden
   de aparicion (este bloque queda al final del archivo). */

/* 1) El H2 "Pago expres" del checkout (WooCommerce) es una etiqueta decorativa posicionada con
   position:absolute arriba de los botones de pago expres -- no un titulo de contenido real. */
.wc-block-components-express-payment__title-container,
.wc-block-components-express-payment__title {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  font-family: var(--idolo-font-body, 'IdoloInter', sans-serif) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* 2) Campos de texto y selects del checkout: integrarlos con el fondo oscuro del sitio. */
.wc-block-checkout__form input[type],
.wc-block-components-text-input input[type],
.wc-block-components-address-form input[type],
.wc-block-checkout__form select,
.wc-block-components-address-form select,
.wc-block-components-country-input select,
.wc-block-components-state-input select {
  background: rgba(245,245,240,0.045) !important;
  border: 1px solid rgba(245,245,240,0.18) !important;
  border-radius: 4px !important;
  color: var(--idolo-white) !important;
  color-scheme: dark;
}
.wc-block-checkout__form input[type]::placeholder,
.wc-block-components-text-input input[type]::placeholder {
  color: rgba(245,245,240,0.35) !important;
}
.wc-block-checkout__form input[type]:focus,
.wc-block-components-text-input input[type]:focus,
.wc-block-checkout__form select:focus,
.wc-block-components-address-form select:focus {
  border-color: var(--idolo-gold) !important;
  background: rgba(201,168,76,0.07) !important;
  box-shadow: 0 0 0 1px var(--idolo-gold) !important;
  outline: none !important;
}
/* Chrome fuerza el fondo blanco en campos autocompletados salvo con este truco */
.wc-block-checkout__form input[type]:-webkit-autofill,
.wc-block-components-text-input input[type]:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px rgba(20,19,16,0.95) inset !important;
  -webkit-text-fill-color: var(--idolo-white) !important;
}
.wc-block-checkout__form .wc-block-components-text-input label,
.wc-block-components-text-input label {
  color: rgba(245,245,240,0.5) !important;
}
.wc-block-components-text-input.is-active label {
  color: var(--idolo-gold) !important;
}
.wc-block-checkout__form input[type="checkbox"],
.wc-block-checkout__form input[type="radio"],
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--idolo-gold) !important;
}


/* v2.84 -- el selector visible de Pais/Region no es el <select> sino un div wrapper propio de
   WooCommerce (.wc-blocks-components-select__container) con fondo blanco fijo en su propio CSS
   (no !important, pero nada en este archivo lo tocaba todavia). */
.wc-blocks-components-select__container {
  background: rgba(245,245,240,0.045) !important;
  border: 1px solid rgba(245,245,240,0.18) !important;
  border-radius: 4px !important;
}
.wc-blocks-components-select__container:focus-within {
  border-color: var(--idolo-gold) !important;
  background: rgba(201,168,76,0.07) !important;
}
.wc-blocks-components-select__label {
  color: rgba(245,245,240,0.5) !important;
}
.wc-blocks-components-select__select {
  color: var(--idolo-white) !important;
  background: transparent !important;
}