/* ═══════════════════════════════════════════════════════════════
 * PDP Single (C7) — hero negro corto + galería white card + buy box
 * ═══════════════════════════════════════════════════════════════ */
.ec-pdp {
  background: var(--ec-surface);
}

.ec-pdp-hero {
  position: relative;
  background: var(--ec-black);
  color: #fff;
  overflow: hidden;
}

.ec-pdp-hero__bg {
  position: absolute;
  top: -120px;
  right: -120px;
  width: 460px;
  height: 460px;
  border-radius: 999px;
  background: var(--ec-primary);
  opacity: 0.22;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}

.ec-pdp-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 40px 48px;
}

.ec-pdp-hero__crumbs {
  margin-bottom: 24px;
}

.ec-pdp-hero__crumbs .ec-breadcrumbs__list {
  color: rgba(255, 255, 255, 0.65);
}

.ec-pdp-hero__crumbs .ec-breadcrumbs__link {
  color: rgba(255, 255, 255, 0.65);
}

.ec-pdp-hero__crumbs .ec-breadcrumbs__link:hover {
  color: var(--ec-primary-light);
}

.ec-pdp-hero__crumbs .ec-breadcrumbs__current {
  color: #fff;
}

.ec-pdp-hero__crumbs .ec-breadcrumbs__sep {
  color: rgba(255, 255, 255, 0.35);
}

.ec-pdp-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  /* Sub-fase 1G-fix B3.6: stretch para que gallery e info compartan altura.
   * Antes `align-items:start` dejaba la imagen "más alta" que el info card. */
  align-items: stretch;
}

.ec-pdp-hero__gallery {
  background: #fff;
  border-radius: var(--ec-r-2xl);
  padding: 16px;
  overflow: hidden;
  /* B3.6: respeta el flex stretch del grid + max-height matching info card. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ec-pdp-hero__gallery .woocommerce-product-gallery {
  margin: 0;
}

.ec-pdp-hero__gallery .woocommerce-product-gallery__image {
  border-radius: var(--ec-r-xl);
  overflow: hidden;
  background: var(--ec-surface-3);
}

.ec-pdp-hero__gallery .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  display: block;
}

.ec-pdp-hero__gallery .flex-control-thumbs {
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  list-style: none;
}

.ec-pdp-hero__gallery .flex-control-thumbs li {
  margin: 0;
  width: 100%;
}

.ec-pdp-hero__gallery .flex-control-thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 6%;
  border-radius: var(--ec-r-md);
  border: 1px solid var(--ec-border);
  background: var(--ec-surface-2);
  cursor: pointer;
  transition: border-color 0.15s;
}

.ec-pdp-hero__gallery .flex-control-thumbs img.flex-active,
.ec-pdp-hero__gallery .flex-control-thumbs img:hover {
  border-color: var(--ec-primary);
}

.ec-pdp-hero__summary {
  min-width: 0;
}

.ec-pdp-hero__summary-inner {
  /* Sub-fase 1E E6-2: glass bg ligeramente más opaco para mejor legibilidad
   * sobre el black hero. 0.04 -> 0.06; border 0.10 -> 0.14. */
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: var(--ec-r-2xl);
  padding: 28px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ec-pdp-hero__summary-inner .product_title,
.ec-pdp-hero__summary-inner h1.product_title {
  font-family: var(--ec-font-body);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  color: #fff;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}

/* Sub-fase 1G-fix B3.9: PDP precio brand indigo `var(--ec-primary)` strong override.
 * Antes era #fff plano contra dark hero → competía con título y stock.
 * Indigo concuerda con brand v2 + da color signature al elemento dominante. */
.ec-pdp-hero__summary-inner .price,
.ec-pdp-hero__summary-inner .price .woocommerce-Price-amount,
.ec-pdp-hero__summary-inner .price ins .woocommerce-Price-amount,
.ec-pdp-hero__summary-inner .price > .woocommerce-Price-amount {
  color: var(--ec-primary-accent, #9ca0f8) !important;
}
/* Default WC price text still white (excluido el `.price` container que ya overrideamos). */
.ec-pdp-hero__summary-inner .woocommerce-Price-amount {
  color: #fff;
}

.ec-pdp-hero__summary-inner .price {
  /* Sub-fase 1E E6-1 (P0): "la pvp está acortada, como en chiquitita".
   * Aumenta size 32px -> clamp 40-56px y weight 500 -> 600 para que el precio
   * sea el elemento DOMINANTE del buy box. JetBrains Mono tabular-nums. */
  font-family: var(--ec-font-mono);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  line-height: 1.05;
}

.ec-pdp-hero__summary-inner .price del,
.ec-pdp-hero__summary-inner .price del .woocommerce-Price-amount {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-weight: 400;
  text-decoration: line-through;
}

.ec-pdp-hero__summary-inner .price ins {
  background: transparent;
  text-decoration: none;
}

/* Sub-fase 1G-fix B3.8: blur el precio mientras verifica stock en tiempo real.
 * Reemplaza el loader spinner agregando feedback visual contextual sobre el dato
 * que está cambiando. */
.ec-pdp-hero__summary-inner .price.ec-price--verifying,
.summary .price.ec-price--verifying {
  filter: blur(8px);
  opacity: 0.7;
  transition:
    filter 0.25s ease,
    opacity 0.25s ease;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .ec-pdp-hero__summary-inner .price.ec-price--verifying,
  .summary .price.ec-price--verifying {
    filter: none;
    opacity: 0.5;
  }
}

.ec-pdp-hero__summary-inner .stock {
  font-family: var(--ec-font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--ec-r-sm);
  display: inline-block;
  width: max-content;
}

.ec-pdp-hero__summary-inner .stock.in-stock {
  background: rgba(22, 163, 74, 0.18);
  color: var(--ec-success-light);
}

.ec-pdp-hero__summary-inner .stock.out-of-stock {
  background: rgba(220, 38, 38, 0.18);
  color: var(--ec-error-light);
}

.ec-pdp-hero__summary-inner .star-rating {
  color: var(--ec-warning);
  font-size: 14px;
}

.ec-pdp-hero__summary-inner .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.7);
}

.ec-pdp-hero__summary-inner .woocommerce-review-link {
  color: rgba(255, 255, 255, 0.6);
}

.ec-pdp-hero__summary-inner .woocommerce-product-details__short-description {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13.5px;
  line-height: 1.6;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ec-pdp-hero__summary-inner .product_meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--ec-font-mono);
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Sub-fase 2.10.4 fix Issue 3 — .caja_completa (UL precio legacy) alineacion.
 * El UL trae padding-left ~40px del UA stylesheet, lo que shiftea los
 * `<li class="li-flex">` (Normal / Descuento / Pago con transferencia / Otros
 * medios de pago) a la derecha del title h1. Reset explicito desktop+mobile. */
.ec-pdp-hero__summary-inner .caja_completa,
.ec-pdp-hero__summary-inner ul.caja_completa,
.summary .caja_completa,
.summary ul.caja_completa {
  padding-left: 0;
  margin: 0;
  list-style: none;
}

/* v2.11.0 Issue 2 — PDP price table mobile alignment.
 * En mobile los valores (Normal $X / 20% DCTO / Transferencia $Y / Otros $Z)
 * salian sobredimensionados (18px desktop) y mal alineados con su descriptor
 * label. Reduce font-size del label+valor, normaliza alineación baseline y
 * baja los precios principales de 30px → 22px para no ocupar 2 líneas en
 * smartphones 320-360px. */
@media (max-width: 767px) {
  .li-flex {
    font-size: 13px;
    line-height: 1.35;
    align-items: baseline;
    padding-top: 6px !important;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .li-flex .normal,
  .li-flex .otros {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
  }
  .li-flex .descuento-pdp {
    font-size: 11px;
    padding: 2px 6px;
  }
  .li-flex del {
    font-size: 11px;
  }
  .li-flex p {
    font-size: 13px;
    margin: 0;
  }
  /* Precios "principales" del hero PDP (transferencia / webpay) — bajar de
   * 30px (overhead visual mobile) a 22px para densidad correcta. */
  .precios-elite .precio-oferta,
  .precios-elite .precio-webpay,
  .ec-pdp-hero__summary-inner .precio-oferta,
  .ec-pdp-hero__summary-inner .precio-webpay {
    font-size: 22px !important;
    line-height: 1.2;
  }
}

/* Igualar el tamaño del precio "Pago con transferencia" (strong.otros2) al de
   los demás valores del bloque (.normal / .otros / del.p-aj), que computan a
   18px en TODOS los breakpoints (style.css gana sin media query sobre el intento
   de reducción mobile de este archivo). Antes el dual-emission lo reescribía a
   28px (desktop) y un override mobile previo lo bajaba a 14px → en mobile la
   transferencia quedaba MÁS CHICA que el resto (reporte Benjamín 2026-05-24).
   Ahora 18px fijo en ambos breakpoints. El chip de descuento (.descuento-pdp)
   queda como etiqueta aparte. !important porque la regla origen es legacy/dispersa
   y aplica a ambos paths de emisión (template + AJAX realtime). */
.caja_completa .li-flex .otros2,
.summary .caja_completa .li-flex .otros2,
.ec-pdp-hero__summary-inner .caja_completa .li-flex .otros2 {
  font-size: 18px !important;
  font-weight: 700;
}

/* Sub-fase 2.10.4 fix Issue 3 — refuerzo color claro en product_meta dentro
 * del dark hero. Defensivo contra possible parent Woodmart CSS override.
 * (El bloque mismo se desregistra via remove_action en functions.php fix
 * Issue 4; este rule queda como safety si vuelve a renderizarse por hook
 * de plugin downstream.) */
.ec-pdp-hero__summary-inner .product_meta,
.ec-pdp-hero__summary-inner .product_meta .meta-label,
.ec-pdp-hero__summary-inner .product_meta .sku,
.ec-pdp-hero__summary-inner .product_meta .sku_wrapper,
.ec-pdp-hero__summary-inner .product_meta .posted_in {
  color: rgba(255, 255, 255, 0.65) !important;
}
.ec-pdp-hero__summary-inner .product_meta a {
  color: rgba(255, 255, 255, 0.85) !important;
}

.ec-pdp-hero__summary-inner .product_meta > span {
  display: block;
  margin: 4px 0;
}

.ec-pdp-hero__summary-inner .product_meta a {
  color: rgba(255, 255, 255, 0.7);
}

.ec-pdp-hero__summary-inner form.cart {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 10px 0 0;
}

.ec-pdp-hero__summary-inner .quantity {
  /* Sub-fase 1E E6-4: stronger contrast quantity input.
   * Border 0.18 -> 0.24, bg transparent -> rgba 0.08 para legibilidad. */
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--ec-r-md);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.ec-pdp-hero__summary-inner .quantity input.qty {
  width: 60px;
  height: 44px;
  background: transparent;
  border: 0;
  color: #fff;
  text-align: center;
  font-family: var(--ec-font-mono);
  font-weight: 500;
  font-size: 15px;
}

.ec-pdp-hero__summary-inner button.single_add_to_cart_button {
  /* Sub-fase 1E E6-3: CTA primary indigo (Brand System primary color), no white.
   * White inverse era legacy de Cloud Design temprano — Brand v2 dicta indigo
   * solid para CTA primario incluso sobre dark hero. */
  flex: 1;
  min-width: 200px;
  height: 44px;
  background: var(--ec-primary);
  color: #fff;
  font-family: var(--ec-font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0;
  border-radius: var(--ec-r-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: var(--ec-shadow-ambient);
  transition:
    background 0.15s,
    transform 0.12s,
    box-shadow 0.15s;
}

.ec-pdp-hero__summary-inner button.single_add_to_cart_button:hover {
  background: var(--ec-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--ec-shadow-card);
}

/* Sub-fase 1F A1+B2: PDP cotización express CTA consistency override.
 * Issue Benjamín: "no comparte los colores, distinto al botón Agregar y carrito".
 * Diagnosis: el div .ec-quote-cta queda fuera del scope summary form pero dentro
 * del summary-inner. quotes/assets/ec-quotes.css aplica solo background indigo,
 * no clona height/font-display/uppercase/letter-spacing del primary CTA.
 * Fix: usar .ec-cta-outline semantics (Brand v2 §7 — solo 1 primary CTA por
 * vista. Añadir al carrito = primary, Cotización express = secondary outline). */
.ec-pdp-hero__summary-inner .ec-quote-cta {
  margin-top: var(--sp-sm);
  width: 100%;
}

.ec-pdp-hero__summary-inner .ec-quote-cta .ec-quote-guest-btn,
.ec-pdp-hero__summary-inner .ec-quote-cta a.button.alt {
  width: 100%;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--ec-r-lg);
  font-family: var(--ec-font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.12s ease;
}

.ec-pdp-hero__summary-inner .ec-quote-cta .ec-quote-guest-btn:hover,
.ec-pdp-hero__summary-inner .ec-quote-cta a.button.alt:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
}

/* Sub-fase 1F A1+B1: PDP stock indicator override legacy style.css.
 * Issue Benjamín: "Verificando stock está corrido para la izquierda, cargando como raro".
 * Diagnosis: style.css legacy `.stock.in-stock { background:#dfe3ee; padding:25px }`
 * gana especificidad por !important. pages.css ya tiene scoped rule pero
 * la legacy con !important domina. Bumping con !important + agregar loading state. */
.ec-pdp-hero__summary-inner p.stock.in-stock,
.ec-pdp-hero__summary-inner p.stock.out-of-stock {
  padding: 8px 12px !important;
  border-radius: var(--ec-r-sm) !important;
  font-family: var(--ec-font-label) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0 0 var(--sp-sm) 0 !important;
  display: inline-block !important;
  width: max-content !important;
  line-height: 1.4 !important;
}

.ec-pdp-hero__summary-inner p.stock.in-stock {
  background: rgba(22, 163, 74, 0.18) !important;
  color: var(--ec-success-light) !important;
}

.ec-pdp-hero__summary-inner p.stock.out-of-stock {
  background: rgba(220, 38, 38, 0.18) !important;
  color: var(--ec-error-light) !important;
}

/* Loading state para AJAX "Verificando Stock..." injection.
 * El JS de woocommerce/single-product/stock.php hace .stock.html('Verificando Stock...').
 * Mientras texto contenga "Verificando" no hay class hook, así que apuntamos por
 * p.stock genérica sin :is-stock para fallback transitorio. Animación pulse
 * sutil indica loading sin layout shift. */
.ec-pdp-hero__summary-inner p.stock {
  animation: ecStockPulse 1.4s ease-in-out infinite;
}
.ec-pdp-hero__summary-inner p.stock.in-stock,
.ec-pdp-hero__summary-inner p.stock.out-of-stock {
  animation: none;
}

@keyframes ecStockPulse {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ec-pdp-hero__summary-inner p.stock {
    animation: none;
  }
}

/* Sub-fase 1F A1+C1: home hero featured-card cuando NO hay imagen real.
 * Issue Benjamín: "sección final del hero se ve súper rara".
 * Diagnosis: glass overlay (rgba .92 + backdrop-filter blur) sobre placeholder
 * striped diagonal queda como ruido. Brand v2 §8: glass solo cuando HAY imagen.
 * Fix: cuando visual contiene placeholder class, featured-card vuelve sólido. */
.ec-home-hero__visual:has(.ec-home-hero__image--placeholder)
  .ec-home-hero__featured-card {
  background: var(--ec-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--ec-border);
  box-shadow: var(--ec-shadow-card);
}

/* PDP body — kickbacks + tabs */
.ec-pdp-body {
  background: var(--ec-surface);
}

.ec-pdp-body__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 40px 80px;
}

.ec-pdp-kickbacks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 40px;
}

.ec-pdp-kickbacks__item {
  /* Sub-fase 1E E6-6: kickbacks con border + bg surface puro y hover indigo
   * tint para más vida visual sin saturar. */
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-r-xl);
  align-items: center;
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}

.ec-pdp-kickbacks__item:hover {
  border-color: var(--ec-primary);
  background: color-mix(
    in oklab,
    var(--ec-primary-light) 25%,
    var(--ec-surface)
  );
}

.ec-pdp-kickbacks__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--ec-primary-light);
  border-radius: var(--ec-r-md);
  color: var(--ec-primary-dark);
  flex-shrink: 0;
}

.ec-pdp-kickbacks__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ec-pdp-kickbacks__title {
  font-family: var(--ec-font-body);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ec-text-primary);
}

.ec-pdp-kickbacks__sub {
  font-size: 11.5px;
  color: var(--ec-text-muted);
}

/* Tabs WC native — restyled */
.ec-pdp-body__tabs .woocommerce-tabs {
  margin: 0;
}

.ec-pdp-body__tabs .woocommerce-tabs .tabs.wc-tabs {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--ec-border);
  overflow-x: auto;
}

.ec-pdp-body__tabs .woocommerce-tabs .tabs.wc-tabs li {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.ec-pdp-body__tabs .woocommerce-tabs .tabs.wc-tabs li a {
  display: inline-flex;
  align-items: center;
  padding: 14px 20px;
  font-family: var(--ec-font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ec-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition:
    color 0.15s,
    border-color 0.15s;
  white-space: nowrap;
}

.ec-pdp-body__tabs .woocommerce-tabs .tabs.wc-tabs li.active a,
.ec-pdp-body__tabs .woocommerce-tabs .tabs.wc-tabs li a:hover {
  color: var(--ec-primary);
  border-bottom-color: var(--ec-primary);
}

.ec-pdp-body__tabs .woocommerce-Tabs-panel {
  font-family: var(--ec-font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ec-text-primary);
  /* Sub-fase 1G-fix B3.7: descripción full-width container. Antes max-width:760px
   * dejaba un "espacio fantasma" a la derecha en desktop con datasheet wide. */
  max-width: 100%;
}
.ec-pdp-body__tabs .woocommerce-Tabs-panel > * {
  max-width: 100%;
}
.ec-pdp-body__tabs .woocommerce-Tabs-panel p,
.ec-pdp-body__tabs .woocommerce-Tabs-panel li {
  max-width: 76ch;
}

.ec-pdp-body__tabs .woocommerce-Tabs-panel h2,
.ec-pdp-body__tabs .woocommerce-Tabs-panel h3 {
  font-family: var(--ec-font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 24px 0 12px;
}

.ec-pdp-body .related,
.ec-pdp-body .upsells {
  margin-top: 56px;
}

.ec-pdp-body .related > h2,
.ec-pdp-body .upsells > h2 {
  font-family: var(--ec-font-display);
  font-weight: 800;
  font-size: 36px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 24px;
}

/* Mobile sticky buy bar
 * Sub-fase 1E E2-1: bottom 68px sincronizado con nueva altura bottom-tabs */
.ec-pdp-sticky {
  position: fixed;
  bottom: 68px;
  left: 0;
  right: 0;
  background: var(--ec-surface);
  border-top: 1px solid var(--ec-border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  z-index: 49;
  padding-bottom: env(safe-area-inset-bottom, 0);
  display: none;
}

/* v2.11.1 Issue 2 — Sticky bottom layout 50/50.
 * Antes: `flex` con CTA `flex: 1` → CTA gigante (~73% ancho) y precio chiquito
 * (~17%). Reporte Benjamín mobile QA. Fix: grid 50/50 explícito, ambas columnas
 * iguales, tipografía del precio bumped a 17px/700 para más legibilidad. */
.ec-pdp-sticky__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}

.ec-pdp-sticky__price-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  justify-content: center;
}

.ec-pdp-sticky__label {
  color: var(--ec-text-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* v4.x Issue 2a (Benjamín 2026-05-24): el total se veía diminuto al lado del
 * botón. Sube de 17px a 20px/800 con tabular-nums para darle jerarquía de
 * "precio principal" sin desbordar la columna 50% (cabe hasta 8 dígitos CLP). */
.ec-pdp-sticky__price {
  font-size: 20px;
  font-weight: 800;
  color: var(--ec-text-primary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.ec-pdp-sticky__cta {
  width: 100%;
  justify-content: center;
  height: 44px;
  min-width: 0;
}

/* v4.x Issue 4 (Benjamín 2026-05-24): el CTA "Cotizar" (out-of-stock) usa la
 * variante .ec-cta-outline, pero por cascada heredaba color:#fff de .ec-cta →
 * texto BLANCO invisible sobre el surface claro del sticky (la tarjeta salía en
 * blanco). Forzamos color + borde indigo hardcodeado (#444ce7) para no depender
 * del token --ec-primary (que ec-quotes.css puede pisar). */
.ec-pdp-sticky__cta--quote {
  color: #444ce7 !important;
  background: transparent !important;
  border: 1.5px solid #444ce7 !important;
}
.ec-pdp-sticky__cta--quote:hover {
  background: rgba(68, 76, 231, 0.08) !important;
}

@media (max-width: 767px) {
  .ec-pdp-sticky {
    display: block;
  }
  body.single-product {
    padding-bottom: calc(132px + env(safe-area-inset-bottom, 0));
  }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .ec-pdp-hero__inner {
    padding: 20px 24px 40px;
  }
  .ec-pdp-hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .ec-pdp-body__inner {
    padding: 24px 24px 56px;
  }
  .ec-pdp-kickbacks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 32px;
  }
}

@media (max-width: 767px) {
  .ec-pdp-hero__inner {
    padding: 16px 16px 32px;
  }
  .ec-pdp-hero__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ec-pdp-hero__summary-inner {
    padding: 20px;
  }
  .ec-pdp-hero__summary-inner .product_title {
    /* Sub-fase 2.10.4 fix Issue 3: title mobile mas compacto.
     * Antes 18px se sentia denso con padding 20px; bajamos a clamp 15-17px
     * con line-height 1.35 para que el title entre clean en viewports
     * pequenos sin overflow del card glass. !important contra possible
     * Woodmart parent .summary h1.product_title override. */
    font-size: clamp(15px, 4vw, 17px) !important;
    line-height: 1.35 !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .ec-pdp-hero__summary-inner .price {
    font-size: 26px;
  }
  .ec-pdp-body__inner {
    padding: 20px 16px 40px;
  }
  .ec-pdp-kickbacks {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 24px;
  }
  .ec-pdp-body .related > h2,
  .ec-pdp-body .upsells > h2 {
    font-size: 28px;
  }
}

/* ═══════════════════════════════════════════════════════════════
 * Sub-fase 1E perf-cap: en mobile <=767px, suprimir decorative pattern
 * overlays + reducir blurs gigantes para mantener Lighthouse mobile >=85.
 * Las atmósferas brand-aligned permanecen via gradient backgrounds (no
 * elimina la estética bold, solo capa cara mobile).
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Eliminar decorative grid pattern videoconf en mobile (paint cost) */
  .ec-home-split__card--videoconf::before {
    display: none;
  }
  /* Reducir blur principal del split server glow 80px -> 50px en mobile */
  .ec-home-split__glow {
    filter: blur(50px);
    width: 200px;
    height: 200px;
  }
  /* Reducir archive hero gradient mesh complejidad en mobile */
  .ec-archive-hero {
    background:
      radial-gradient(
        ellipse 90% 60% at 95% 0%,
        color-mix(in oklab, var(--ec-primary-light) 30%, transparent) 0%,
        transparent 65%
      ),
      var(--ec-surface);
  }
  /* PDP hero glow más sutil en mobile */
  .ec-pdp-hero__bg {
    width: 320px;
    height: 320px;
    filter: blur(80px);
  }
}