/* ============================================================
   ElectroABC · tema 0.3.0
   Fondo claro y azul. Nada de fondos oscuros, ni rojo salvo el porcentaje
   de descuento, ni el amarillo de outlet (docs/contexto-heredado).
   El 95 % del tráfico es de celular: cada bloque se pensó primero a 390 px.

   1  Tokens y base            7  Tarjeta y grillas
   2  Botones y enlaces        8  Catálogo
   3  Encabezado               9  Ficha de producto
   4  Portada: banners         10 Carrito
   5  Banda de beneficios      11 Pie, menú y diálogos
   6  Categorías y carruseles  12 WhatsApp flotante y avisos
   ============================================================ */

/* 1 · TOKENS Y BASE */
:root {
  /* Font Awesome Free 6.7.2 (CC BY 4.0): file-arrow-up y circle-check. */
  --abc-upload-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-288-128 0c-17.7 0-32-14.3-32-32L224 0 64 0zM256 0l0 128 128 0L256 0zM216 408c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-102.1-31 31c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l72-72c9.4-9.4 24.6-9.4 33.9 0l72 72c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-31-31L216 408z'/%3E%3C/svg%3E");
  --abc-done-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E");
  --abc-amber-text: #9a5400;
  --abc-navy: #0f172a;
  --abc-blue: #0673d3;
  --abc-blue-hover: #055fae;
  --abc-blue-text: #075a9c;
  --abc-blue-soft: #eaf4ff;
  --abc-sky: #f1f7fc;
  --abc-surface: #f8fafc;
  --abc-line: #dbe2ea;
  --abc-line-soft: #eef2f6;
  --abc-input: #94a3b8;
  --abc-text: #334155;
  --abc-muted: #64748b;
  --abc-strike: #6b7280;
  --abc-green: #15803d;
  --abc-green-hover: #116a32;
  --abc-green-soft: #f0fdf4;
  --abc-red: #e02b20;
  --abc-amber: #c26a00;
  --abc-cat-bg: #e8f1fb;
  --abc-shadow: 0 4px 16px rgba(15, 23, 42, .06);
  --abc-shadow-hover: 0 8px 24px rgba(15, 23, 42, .1);
  --abc-r-card: 14px;
  --abc-r-btn: 10px;
  --abc-r-pill: 999px;
  --abc-container: 1280px;
  --abc-gutter: 16px;
  --abc-rail-gap: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--abc-text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--abc-blue-text); }
h1, h2, h3 { color: var(--abc-navy); line-height: 1.25; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--abc-blue-text); outline-offset: 2px; }
.abc-container { width: min(calc(100% - 2 * var(--abc-gutter)), var(--abc-container)); margin-inline: auto; }
.abc-icon { flex: 0 0 auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.abc-skip:focus { position: fixed !important; top: 12px; left: 12px; z-index: 1000; width: auto; height: auto; clip: auto; clip-path: none; padding: 12px 16px; margin: 0; background: #fff; color: var(--abc-navy); border-radius: var(--abc-r-btn); box-shadow: var(--abc-shadow-hover); }
.abc-eyebrow { margin: 0; color: var(--abc-muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.abc-eyebrow.is-green { color: var(--abc-green); }
.abc-label { margin: 0 0 8px; color: var(--abc-navy); font-size: 14px; font-weight: 700; }
.abc-page { padding-block: 24px 56px; }
.abc-page__title { margin: 0 0 20px; font-size: 26px; }

/* 2 · BOTONES Y ENLACES */
.abc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 2px solid transparent; border-radius: var(--abc-r-btn); background: none; font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.abc-btn--primary { background: var(--abc-blue); color: #fff; }
.abc-btn--primary:hover { background: var(--abc-blue-hover); color: #fff; }
.abc-btn--outline { border-color: var(--abc-blue); background: #fff; color: var(--abc-blue-text); }
.abc-btn--outline:hover { background: var(--abc-sky); }
.abc-btn--soft { background: #e9eef3; color: var(--abc-navy); text-transform: uppercase; letter-spacing: .02em; }
.abc-btn--soft:hover { background: #dde4eb; }
.abc-btn--wa { background: var(--abc-green); color: #fff; }
.abc-btn--wa:hover { background: var(--abc-green-hover); color: #fff; }
.abc-btn--large { min-height: 52px; font-size: 16px; }
.abc-btn--small { min-height: 40px; padding: 0 14px; font-size: 14px; }
.abc-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--abc-blue-text); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.abc-off { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--abc-r-pill); background: var(--abc-red); color: #fff; font-size: 12px; font-weight: 800; line-height: 1.4; letter-spacing: .02em; white-space: nowrap; }
.abc-price-old { color: var(--abc-strike); font-size: 13px; font-weight: 500; }
.abc-price-old .woocommerce-Price-amount { text-decoration: line-through; }

/* 3 · ENCABEZADO */
.abc-header { position: relative; z-index: 30; background: #fff; border-bottom: 1px solid var(--abc-line); }
.abc-header__bar { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "menu logo search actions"; align-items: center; gap: 20px; min-height: 80px; }
.abc-header__menu { grid-area: menu; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--abc-r-btn); background: none; color: var(--abc-navy); font-size: 15px; font-weight: 700; cursor: pointer; }
.abc-header__menu:hover { background: var(--abc-sky); }
.abc-header__logo { grid-area: logo; display: block; }
.abc-header__logo img { width: auto; height: 56px; object-fit: contain; }
.abc-header__search { position: relative; grid-area: search; min-width: 0; }

/* Sugerencias del buscador (theme.js): productos, categorías y marcas. */
.abc-suggest { position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: 70; max-width: 640px; max-height: min(70vh, 560px); overflow: auto; padding: 8px; border: 1px solid var(--abc-line); border-radius: var(--abc-r-card); background: #fff; box-shadow: 0 16px 40px rgba(15, 23, 42, .16); overscroll-behavior: contain; }
.abc-suggest[hidden] { display: none; }
.abc-suggest__label { margin: 6px 8px 4px; color: var(--abc-muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.abc-suggest__note { margin: 4px 8px 8px; color: var(--abc-muted); font-size: 13px; }
.abc-suggest__product { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; color: var(--abc-navy); text-decoration: none; }
.abc-suggest__product img { width: 48px; height: 48px; border: 1px solid var(--abc-line-soft); border-radius: 8px; background: #fff; object-fit: contain; }
.abc-suggest__name { display: -webkit-box; overflow: hidden; font-size: 14px; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.abc-suggest__price { display: grid; justify-items: end; color: var(--abc-blue); font-size: 14px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.abc-suggest__price small { color: var(--abc-muted); font-size: 11px; font-weight: 600; }
.abc-suggest__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 8px 8px; }
.abc-suggest__chip { padding: 6px 12px; border: 1px solid var(--abc-line); border-radius: var(--abc-r-pill); color: var(--abc-navy); font-size: 13px; font-weight: 600; text-decoration: none; }
.abc-suggest__all { display: block; margin-top: 4px; padding: 12px 8px; border-top: 1px solid var(--abc-line-soft); color: var(--abc-blue-text); font-size: 14px; font-weight: 700; text-decoration: none; }
.abc-suggest [role="option"].is-active { background: var(--abc-sky); }
.abc-suggest .abc-suggest__chip.is-active { border-color: var(--abc-blue); }
.abc-suggest__empty { display: grid; justify-items: start; gap: 8px; padding: 10px 8px; }
.abc-suggest__empty p { margin: 0; color: var(--abc-text); font-size: 14px; }
@media (hover: hover) {
  .abc-suggest [role="option"]:hover { background: var(--abc-sky); }
}
.abc-search-note { margin: 0; color: var(--abc-muted); font-size: 14px; }
.abc-search-empty { display: grid; justify-items: start; gap: 12px; padding: 12px 0 24px; }
.abc-search-empty h2 { margin: 0; font-size: 22px; }
.abc-search-empty p { margin: 0; color: var(--abc-text); }
.abc-search { display: flex; width: 100%; max-width: 640px; overflow: hidden; border: 1px solid #cbd5e1; border-radius: var(--abc-r-btn); background: #fff; }
.abc-search:focus-within { border-color: var(--abc-blue); box-shadow: 0 0 0 3px rgba(6, 115, 211, .18); }
.abc-search input[type="search"] { min-width: 0; flex: 1; height: 48px; padding: 0 14px; border: 0; outline: 0; background: transparent; font-size: 16px; }
.abc-search button { display: grid; place-items: center; width: 56px; border: 0; border-left: 1px solid #cbd5e1; background: var(--abc-sky); color: var(--abc-blue-text); cursor: pointer; }
.abc-search button:hover { background: var(--abc-blue-soft); }
.abc-header__actions { grid-area: actions; display: flex; align-items: center; gap: 6px; }
.abc-header__account, .abc-header__cart { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: var(--abc-r-btn); color: var(--abc-navy); font-size: 15px; font-weight: 700; text-decoration: none; }
.abc-header__account:hover, .abc-header__cart:hover { background: var(--abc-sky); }
.abc-header__cart-count { min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0 6px; border-radius: var(--abc-r-pill); background: var(--abc-blue); color: #fff; font-size: 12px; font-weight: 800; }
.abc-header__cart-count[hidden] { display: none; }
.abc-header__secure { grid-column: 3; display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--abc-green); font-size: 14px; font-weight: 700; justify-self: end; }
.abc-header__back { grid-column: 4; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--abc-blue-text); font-size: 15px; font-weight: 700; }
.abc-location { border-top: 1px solid var(--abc-line-soft); background: var(--abc-surface); }
.abc-location__button { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 40px; padding: 4px 0; border: 0; background: none; color: var(--abc-text); font-size: 14px; text-align: left; cursor: pointer; }
.abc-location__button .abc-icon { color: var(--abc-blue); }
.abc-location__button strong { color: var(--abc-blue-text); }
.abc-location__action { color: var(--abc-blue-text); text-decoration: underline; text-underline-offset: 3px; }
/* Cartel de la primera visita para confirmar la ubicación (como Frávega). */
.abc-location > .abc-container { position: relative; }
.abc-location-tip { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: min(360px, 100%); padding: 16px 18px; border: 1px solid var(--abc-line); border-radius: var(--abc-r-card); background: #fff; color: var(--abc-text); box-shadow: 0 16px 40px rgba(15, 23, 42, .16); animation: abc-tip-in .2s ease; }
.abc-location-tip[hidden] { display: none; }
.abc-location-tip::before { content: ""; position: absolute; top: -7px; left: 24px; width: 12px; height: 12px; border-top: 1px solid var(--abc-line); border-left: 1px solid var(--abc-line); background: #fff; transform: rotate(45deg); }
.abc-location-tip p { margin: 0 0 14px; font-size: 14px; line-height: 1.45; }
.abc-location-tip .abc-location-tip__title { margin-bottom: 6px; color: var(--abc-navy); font-size: 15px; font-weight: 800; }
.abc-location-tip strong { color: var(--abc-navy); }
.abc-location-tip__actions { display: flex; flex-wrap: wrap; gap: 8px; }
@keyframes abc-tip-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (max-width: 767px) {
  .abc-header__bar { grid-template-columns: auto auto 1fr auto; grid-template-areas: "menu logo . actions" "search search search search"; gap: 4px 6px; min-height: 0; padding-block: 8px 10px; }
  .abc-header__menu { padding: 0 8px; }
  .abc-header__menu span, .abc-header__account span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .abc-header__logo img { height: 46px; }
  .abc-header__actions { gap: 0; }
  .abc-header__account, .abc-header__cart { padding: 0 8px; min-width: 44px; justify-content: center; }
  .abc-search { max-width: none; }
  .abc-header__secure { grid-column: 3 / 5; grid-row: 1; }
  .abc-header__back { grid-column: 1 / -1; grid-row: 2; }
}

/* 4 · PORTADA: BANNERS
   Cada banner trae su arte de escritorio (1920×540) y de celular (750×300).
   Se apilan en la misma celda: el alto lo da la imagen, no se recorta. */
.abc-hero { position: relative; background: var(--abc-sky); }
.abc-hero__track { display: grid; }
.abc-hero__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.abc-hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity .4s ease; }
.abc-hero__link, .abc-hero__link img { display: block; width: 100%; }
.abc-hero__arrow { position: absolute; top: calc(50% - 14px); z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: var(--abc-blue-text); box-shadow: var(--abc-shadow-hover); transform: translateY(-50%); cursor: pointer; }
.abc-hero__arrow.is-prev { left: 16px; }
.abc-hero__arrow.is-next { right: 16px; }
/* Los puntos van debajo del arte: los banners tienen botones y precios al pie. */
.abc-hero__dots { display: flex; justify-content: center; gap: 4px; padding: 2px 0; }
.abc-hero__dots button { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.abc-hero__dots button::before { content: ""; display: block; width: 8px; height: 8px; margin: auto; border-radius: var(--abc-r-pill); background: #b8c4d1; transition: width .2s ease; }
.abc-hero__dots button.is-active::before { width: 20px; background: var(--abc-blue); box-shadow: none; }
/* Pausa: obligatoria en un carrusel que cambia solo (WCAG 2.2.2). */
.abc-hero__dots .abc-hero__pause { display: inline-grid; place-items: center; margin-left: 6px; border-radius: 50%; color: var(--abc-blue-text); }
.abc-hero__dots .abc-hero__pause::before { display: none; }
.abc-hero__pause .abc-icon--play, .abc-hero__pause.is-paused .abc-icon--pause { display: none; }
.abc-hero__pause.is-paused .abc-icon--play { display: block; }
.abc-hero__pause:hover { background: #fff; }
@media (max-width: 767px) {
  .abc-hero__arrow { display: none; }
}

/* 5 · BANDA DE BENEFICIOS
   Inmediatamente debajo del banner, a todo el ancho y continua.
   Escritorio: una fila. Celular: 2×2 (medido: 230 px contra 332 px de
   tres en fila, con los títulos partidos). */
.abc-benefits { border-bottom: 1px solid var(--abc-line); background: var(--abc-surface); }
.abc-benefits__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin-block: 0; padding: 0; list-style: none; }
.abc-benefit { min-width: 0; border-left: 1px solid var(--abc-line); }
.abc-benefit:first-child { border-left: 0; }
.abc-benefit, .abc-benefit__link { display: flex; align-items: center; gap: 12px; padding: 16px 18px; color: inherit; text-decoration: none; }
.abc-benefit:has(.abc-benefit__link) { padding: 0; }
.abc-benefit__link:hover strong { color: var(--abc-blue-text); }
.abc-benefit__icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; background: #fff; color: var(--abc-blue); box-shadow: 0 0 0 1px var(--abc-line); }
.abc-benefit__text { display: grid; gap: 2px; min-width: 0; }
.abc-benefit__text strong { color: var(--abc-navy); font-size: 15px; line-height: 1.3; }
.abc-benefit__text > span:not(.abc-benefit__badges) { color: var(--abc-muted); font-size: 13px; line-height: 1.4; }
.abc-benefit__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.abc-benefit__badges span { padding: 1px 6px; border: 1px solid var(--abc-line); border-radius: 4px; background: #fff; color: var(--abc-navy); font-size: 10px; font-weight: 800; letter-spacing: .04em; }
@media (max-width: 767px) {
  .abc-benefits__list { width: 100%; grid-template-columns: 1fr 1fr; }
  .abc-benefit { border-left: 0; border-top: 1px solid var(--abc-line); }
  .abc-benefit:nth-child(-n+2) { border-top: 0; }
  .abc-benefit:nth-child(2n) { border-left: 1px solid var(--abc-line); }
  .abc-benefit, .abc-benefit__link { align-items: flex-start; gap: 10px; padding: 12px; }
  .abc-benefit__icon { width: 34px; height: 34px; flex-basis: 34px; }
  .abc-benefit__icon .abc-icon { width: 18px; height: 18px; }
  .abc-benefit__text strong { font-size: 14px; }
  .abc-benefit__text > span:not(.abc-benefit__badges) { font-size: 12.5px; }
}

/* 6 · CATEGORÍAS Y CARRUSELES
   Tira de categorías en una sola fila: en celular 96 px con desplazamiento
   lateral; desde 1024 px entran todas a lo ancho. */
.abc-categories { padding-block: 24px 4px; }
.abc-categories__list { display: flex; gap: 10px; margin: 0; padding: 2px 2px 12px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.abc-categories__list::-webkit-scrollbar { display: none; }
.abc-categories__list > li { flex: 0 0 96px; scroll-snap-align: start; }
.abc-category { display: grid; gap: 8px; color: var(--abc-navy); text-decoration: none; }
.abc-category__img { display: block; overflow: hidden; aspect-ratio: 1; border-radius: var(--abc-r-card); background: var(--abc-cat-bg); transition: box-shadow .15s ease, transform .15s ease; }
.abc-category__img img { width: 100%; height: 100%; object-fit: cover; }
/* Categoría sin miniatura en el panel: su inicial. */
.abc-category__img.is-empty { display: grid; place-items: center; color: var(--abc-blue-text); font-size: 34px; font-weight: 800; }
.abc-category:hover .abc-category__img { box-shadow: var(--abc-shadow-hover); transform: translateY(-2px); }
.abc-category__name { font-size: 12px; font-weight: 700; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
@media (min-width: 1024px) {
  .abc-categories__list { display: grid; grid-template-columns: repeat(var(--abc-cat-count, 9), minmax(0, 1fr)); gap: 14px; overflow: visible; }
  .abc-categories__list:has(> li:nth-child(-n+5):last-child) { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .abc-category__name { font-size: 13px; }
}

.abc-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.abc-section-heading h2 { margin: 2px 0 0; font-size: 22px; }
.abc-section-heading__more { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; color: var(--abc-blue-text); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.abc-rail-section { padding-block: 28px 4px; }

/* Banner intermedio, antes de un carrusel (ElectroABC → Portada). */
.abc-mid-banner { padding-top: 28px; }
.abc-mid-banner__link { display: block; overflow: hidden; border-radius: var(--abc-r-card); }
.abc-mid-banner img { display: block; width: 100%; height: auto; }
a.abc-mid-banner__link:focus-visible { outline: 3px solid var(--abc-blue-text); outline-offset: 3px; }

/* Logos de marca, sin caja. El plugin recorta el margen del archivo y el tema
   pasa la raíz de su proporción (--abc-logo-r): el ancho crece con ella, así
   todos ocupan la misma superficie y ninguno parece más grande que otro. */
.abc-logo { display: block; width: calc(var(--abc-logo-base, 48px) * var(--abc-logo-r, 2)); max-width: 100%; height: auto; max-height: calc(var(--abc-logo-base, 48px) * 1.1); object-fit: contain; }

/* Carrusel de marcas: tira que avanza sola (theme.js). En gris; el color
   aparece al pasar el mouse o con el foco. */
.abc-brands .abc-section-heading { align-items: center; }
.abc-brands__pause { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--abc-line); border-radius: 50%; background: #fff; color: var(--abc-blue-text); cursor: pointer; }
.abc-brands__pause[hidden] { display: none; }
.abc-brands__pause .abc-icon--play, .abc-brands__pause.is-paused .abc-icon--pause { display: none; }
.abc-brands__pause.is-paused .abc-icon--play { display: block; }
.abc-brands__pause:hover { border-color: var(--abc-blue); }
.abc-brands__pause:focus-visible { outline: 3px solid var(--abc-blue-text); outline-offset: 2px; }
.abc-brands__viewport { container-type: inline-size; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.abc-brands__viewport::-webkit-scrollbar { display: none; }
.abc-brands__list { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; }
.abc-brands__list li { flex: none; }
.abc-brand { --abc-logo-base: 54px; display: grid; place-items: center; width: 172px; height: 88px; padding: 8px 16px; border-radius: var(--abc-r-btn); }
.abc-brand .abc-logo { filter: grayscale(1); opacity: .6; transition: filter .25s ease, opacity .25s ease, transform .25s ease; }
.abc-brand:hover .abc-logo, .abc-brand:focus-visible .abc-logo { filter: none; opacity: 1; transform: scale(1.06); }
.abc-brand:focus-visible { outline: 3px solid var(--abc-blue-text); outline-offset: -3px; }
/* En PC entran tantos logos como diga ElectroABC → Portada (--abc-brands-visible);
   con menos logos, cada uno más grande. */
@media (min-width: 768px) {
  .abc-brand { --abc-brand-slot: max(172px, calc(100cqi / var(--abc-brands-visible, 6))); --abc-logo-base: calc(var(--abc-brand-slot) * .29); width: var(--abc-brand-slot); height: calc(var(--abc-logo-base) * 1.1 + 28px); padding: 10px 22px; }
}
@media (min-width: 768px) {
  .abc-section-heading h2 { font-size: 26px; }
  .abc-rail-section { padding-top: 36px; }
}

.abc-product-list { position: relative; }
.abc-product-list.is-rail ul.products { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - (var(--abc-rail-mobile, 2.2) - 1) * var(--abc-rail-gap)) / var(--abc-rail-mobile, 2.2)); gap: var(--abc-rail-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 14px; }
.abc-product-list.is-rail ul.products::-webkit-scrollbar { display: none; }
.abc-product-list.is-rail li.product { scroll-snap-align: start; }
.abc-rail-arrow { display: none; }
@media (min-width: 768px) {
  .abc-product-list.is-rail ul.products { --abc-rail-gap: 16px; grid-auto-columns: calc((100% - 2 * var(--abc-rail-gap)) / 3); }
  .abc-rail-arrow { position: absolute; top: 34%; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--abc-line); border-radius: 50%; background: #fff; color: var(--abc-blue-text); box-shadow: var(--abc-shadow-hover); cursor: pointer; }
  .abc-rail-arrow.is-prev { left: -14px; }
  .abc-rail-arrow.is-next { right: -14px; }
  .abc-rail-arrow[disabled] { opacity: 0; pointer-events: none; }
}
@media (min-width: 1024px) {
  .abc-product-list.is-rail ul.products { grid-auto-columns: calc((100% - 3 * var(--abc-rail-gap)) / 4); }
}
@media (min-width: 1280px) {
  .abc-product-list.is-rail ul.products { grid-auto-columns: calc((100% - (var(--abc-rail-desktop, 6) - 1) * var(--abc-rail-gap)) / var(--abc-rail-desktop, 6)); }
}

/* 7 · TARJETA Y GRILLAS (boceto 01)
   Foto, Agregar, nombre, precios y porcentaje una sola vez, pegado al precio.
   Sobre la foto va solo la etiqueta comercial. */
.woocommerce ul.products, ul.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
ul.products li.abc-card { position: relative; display: flex; flex-direction: column; width: auto; float: none; margin: 0; padding: 10px; border: 1px solid var(--abc-line); border-radius: var(--abc-r-card); background: #fff; text-align: left; transition: border-color .15s ease, box-shadow .15s ease; }
ul.products li.abc-card:hover { border-color: #cbd5e1; box-shadow: var(--abc-shadow); }
.abc-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 1; border-radius: var(--abc-r-btn); background: #fff; }
ul.products li.abc-card .abc-card__media img { width: 100%; height: 100%; margin: 0; object-fit: contain; }
.abc-card__label { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 4px 10px; border-radius: var(--abc-r-pill); background: var(--abc-blue); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.abc-card__cta { margin-top: 10px; }
ul.products li.abc-card .abc-card__cta .button { display: flex; gap: 8px; text-decoration: none; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 0; padding: 0 10px; border: 0; border-radius: var(--abc-r-btn); background: var(--abc-blue); color: #fff; font-size: 15px; font-weight: 700; line-height: 1.2; }
ul.products li.abc-card .abc-card__cta .button:hover { background: var(--abc-blue-hover); }
ul.products li.abc-card .abc-card__cta .button.loading { opacity: .7; }
ul.products li.abc-card .abc-card__cta .button.loading::after { display: none; }
ul.products li.abc-card .abc-card__cta .added_to_cart { display: none; }
ul.products li.abc-card h3.abc-card__title { margin: 10px 0 0; padding: 0; font-size: 14px; font-weight: 600; line-height: 1.4; }
.abc-card__title a { display: -webkit-box; overflow: hidden; color: var(--abc-navy); text-decoration: none; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.abc-card__title a:hover { color: var(--abc-blue-text); }
.abc-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.abc-card__cta, .abc-card__media { position: relative; z-index: 1; }
.abc-card__colors { display: flex; align-items: center; gap: 5px; margin: 8px 0 0; color: var(--abc-muted); font-size: 12px; }
.abc-swatch { width: 14px; height: 14px; border-radius: 50%; background: var(--abc-swatch); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .25); }
.abc-swatch.is-current { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--abc-blue); }
/* Precio de lista tachado con el porcentaje, «pagando por transferencia» y el
   precio de contado. Va al pie, alineado entre tarjetas. */
.abc-card__pricing { display: grid; gap: 2px; margin-top: auto; padding-top: 8px; }
.abc-card__list { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; color: var(--abc-muted); font-size: 12px; }
.abc-card__list-label { flex-basis: 100%; }
.abc-card__method { margin: 2px 0 0; color: var(--abc-blue-text); font-size: 12px; font-weight: 700; }
/* Cuotas sin interés, solo el día que corren. */
.abc-card__promo { margin: 4px 0 0; color: var(--abc-green); font-size: 12px; line-height: 1.35; }
.abc-card__promo strong { font-weight: 800; }
.abc-card__price { margin: 0; }
.abc-price-now { color: var(--abc-blue); font-size: 18px; font-weight: 800; line-height: 1.25; }
.abc-card .abc-off { padding: 2px 8px; font-size: 11px; }
.abc-card__stock { margin: 6px 0 0; color: var(--abc-muted); font-size: 13px; font-weight: 700; }
@media (min-width: 768px) {
  .woocommerce ul.products, ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  ul.products li.abc-card { padding: 12px; }
  ul.products li.abc-card h3.abc-card__title { font-size: 15px; line-height: 1.45; }
  .abc-price-now { font-size: 20px; }
}
@media (min-width: 1200px) {
  .woocommerce ul.products, ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; }
}

/* 8 · CATÁLOGO: tienda, categoría, marca y búsqueda */
.abc-commerce { padding-block: 12px 56px; }
.abc-breadcrumb { margin: 0 0 12px; padding-block: 8px; overflow-x: auto; color: var(--abc-muted); font-size: 13px; white-space: nowrap; scrollbar-width: none; }
.abc-breadcrumb a { color: var(--abc-blue-text); }
.abc-crumb-sep { margin: 0 6px; color: #94a3b8; }
.abc-catalog-head { display: grid; gap: 12px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--abc-line); }
.abc-catalog-head__title { display: flex; align-items: center; gap: 16px; }
.abc-catalog-head h1 { margin: 2px 0 0; font-size: 26px; }
/* Logo de la marca, suelto, separado del nombre por una línea. */
.abc-catalog-head__logo { --abc-logo-base: 58px; max-width: 46%; }
.abc-catalog-head__title.has-logo > div { padding-left: 16px; border-left: 1px solid var(--abc-line); }
@media (min-width: 768px) {
  .abc-catalog-head__logo { --abc-logo-base: 68px; }
  .abc-catalog-head__title.has-logo { gap: 24px; }
  .abc-catalog-head__title.has-logo > div { padding-left: 24px; }
}
.abc-catalog-head__desc { max-width: 760px; color: var(--abc-text); font-size: 15px; }
.abc-catalog-head__desc p { margin: 0; }
.abc-subcats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.abc-subcats a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--abc-line); border-radius: var(--abc-r-pill); background: #fff; color: var(--abc-navy); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.abc-subcats a:hover { border-color: var(--abc-blue); color: var(--abc-blue-text); }
/* Cantidad, «Filtrar» (celular) y orden, arriba del listado. */
.abc-catalog-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.woocommerce .abc-catalog-tools .woocommerce-result-count { flex: 1 1 100%; margin: 0; color: var(--abc-muted); font-size: 14px; }
.woocommerce .abc-catalog-tools .woocommerce-ordering { flex: 1 1 0; min-width: 0; margin: 0; }
.abc-catalog-tools__filter { flex: 1 1 0; min-height: 48px; }
.abc-catalog-tools__badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--abc-r-pill); background: var(--abc-blue); color: #fff; font-size: 12px; line-height: 1; }
.woocommerce .abc-catalog-tools .woocommerce-ordering select { width: 100%; min-height: 48px; padding: 0 40px 0 14px; border: 1px solid var(--abc-input); border-radius: var(--abc-r-btn); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23075a9c' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--abc-navy); font-size: 15px; font-weight: 600; appearance: none; }
.woocommerce nav.woocommerce-pagination { margin-top: 28px; }
.woocommerce nav.woocommerce-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; border: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--abc-line); border-radius: var(--abc-r-btn); color: var(--abc-navy); font-weight: 700; }
.woocommerce nav.woocommerce-pagination ul li span.current { border-color: var(--abc-blue); background: var(--abc-blue); color: #fff; }
@media (min-width: 768px) {
  .abc-catalog-head h1 { font-size: 30px; }
  .woocommerce .abc-catalog-tools .woocommerce-result-count { flex: 1 1 auto; }
  .woocommerce .abc-catalog-tools .woocommerce-ordering { flex: 0 0 auto; }
  .abc-catalog-tools__filter { flex: 0 0 auto; }
  .woocommerce .abc-catalog-tools .woocommerce-ordering select { min-width: 240px; }
}

/* Filtros (inc/filters.php). PC: columna a la izquierda que se aplica al
   marcar. Celular y tablet: panel que abre «Filtrar», con «Ver resultados».
   Sin JavaScript la columna queda arriba del listado, con su botón. */
.abc-filters__head { display: none; }
.abc-filters__body { display: grid; }
.abc-filter { border-bottom: 1px solid var(--abc-line); }
.abc-filter > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; color: var(--abc-navy); font-size: 15px; font-weight: 700; list-style: none; cursor: pointer; }
.abc-filter > summary::-webkit-details-marker { display: none; }
.abc-filter > summary .abc-icon { color: var(--abc-muted); transition: transform .15s ease; }
.abc-filter[open] > summary .abc-icon { transform: rotate(180deg); }
.abc-filter fieldset { display: grid; gap: 2px; min-width: 0; margin: 0 0 12px; padding: 0; border: 0; }
.abc-filter__option { display: flex; align-items: center; gap: 10px; min-height: 40px; color: var(--abc-text); font-size: 15px; cursor: pointer; }
.abc-filter__option input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--abc-blue); cursor: pointer; }
.abc-filter__label { flex: 1; min-width: 0; }
.abc-filter__option:hover .abc-filter__label { color: var(--abc-blue-text); }
.abc-filter__count { color: var(--abc-muted); font-size: 13px; }
.abc-filter__option input:checked ~ .abc-filter__label { color: var(--abc-navy); font-weight: 700; }
.abc-filters.is-enhanced fieldset:not(.is-expanded) .is-extra { display: none; }
.abc-filter__more { justify-self: start; min-height: 40px; }
.abc-filter__price { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 8px; margin-bottom: 14px; }
.abc-filter__price label { display: grid; gap: 4px; color: var(--abc-muted); font-size: 13px; }
.abc-filter__price input { width: 100%; min-width: 0; height: 44px; padding: 0 10px; border: 1px solid var(--abc-input); border-radius: var(--abc-r-btn); background: #fff; font-size: 16px; }
.abc-filter__price .abc-btn { width: 44px; min-height: 44px; padding: 0; }
.abc-filters__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 16px; }
.abc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 16px; }
.abc-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--abc-blue); border-radius: var(--abc-r-pill); background: var(--abc-blue-soft); color: var(--abc-blue-text); font-size: 14px; font-weight: 600; text-decoration: none; }
.abc-chip:hover { background: #dbeafe; }
.abc-chips__clear { min-height: 36px; padding: 6px 4px; color: var(--abc-blue-text); font-size: 14px; font-weight: 600; }
.abc-filters { margin-bottom: 16px; }
@media (max-width: 1023px) {
  .abc-filters.is-enhanced:not(.is-open) { display: none; }
  .abc-filters.is-open { position: fixed; inset: 0 auto 0 0; z-index: 1000; display: flex; flex-direction: column; width: min(420px, 100%); margin: 0; background: #fff; box-shadow: 0 0 0 100vmax rgba(15, 23, 42, .45); animation: abc-drawer-in .25s ease; }
  .abc-filters.is-open .abc-filters__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--abc-line); }
  .abc-filters.is-open .abc-filters__head h2 { margin: 0; font-size: 20px; }
  .abc-filters.is-open .abc-filters__form { display: flex; flex: 1; flex-direction: column; min-height: 0; }
  .abc-filters.is-open .abc-filters__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 18px; }
  .abc-filters.is-open .abc-filters__foot { padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--abc-line); }
  .abc-no-scroll, .abc-no-scroll body { overflow: hidden; }
}
@media (min-width: 1024px) {
  .abc-catalog-body.has-filters { display: grid; grid-template-columns: 248px minmax(0, 1fr); align-items: start; gap: 32px; }
  .abc-filters { margin: 0; }
  .abc-filters .abc-filter:first-child > summary { min-height: 40px; }
  .abc-filters.is-enhanced .abc-filters__foot { display: none; }
  .abc-catalog-tools__filter { display: none; }
}

/* 9 · FICHA DE PRODUCTO (bocetos del 2026-10-09, docs/reference/bocetos)
   PC: galería con miniaturas a la izquierda y compra a la derecha; debajo,
   la descripción con los relacionados al costado. Celular: una columna y la
   compra fija al pie de la pantalla. */
.abc-commerce div.product { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "gallery" "summary"; gap: 20px; }
.abc-commerce div.product > * { min-width: 0; grid-column: 1 / -1; }
.abc-commerce div.product > div.images { grid-area: gallery; }
.abc-commerce div.product > .summary { grid-area: summary; }
.woocommerce .abc-commerce div.product div.images, .woocommerce .abc-commerce div.product div.summary { float: none; width: 100%; margin: 0; }

/* Galería: la foto en un recuadro blanco. Miniaturas: puntos en celular,
   fila debajo en tablet, columna a la izquierda en PC. */
.woocommerce div.product div.images { position: relative; }
.woocommerce div.product div.images .flex-viewport, .woocommerce div.product div.images > .woocommerce-product-gallery__wrapper { border: 1px solid var(--abc-line); border-radius: var(--abc-r-card); background: #fff; overflow: hidden; }
.woocommerce div.product div.images img { object-fit: contain; }
/* La foto principal, siempre cuadrada (boceto): las fichas quedan parejas
   y la columna de miniaturas tiene lugar aunque la foto sea apaisada. */
.woocommerce div.product div.images .woocommerce-product-gallery__image img { width: 100%; height: auto; aspect-ratio: 1 / 1; background: #fff; }
.woocommerce div.product div.images .flex-control-thumbs { display: flex; gap: 8px; margin: 10px 0 0; padding: 0; overflow-x: auto; }
.woocommerce div.product div.images .flex-control-thumbs li { flex: 0 0 64px; width: 64px; margin: 0; padding: 0; }
.woocommerce div.product div.images .flex-control-thumbs li img { width: 100%; height: auto; aspect-ratio: 1 / 1; border: 1px solid var(--abc-line); border-radius: 10px; background: #fff; object-fit: contain; opacity: 1; }
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active { border: 2px solid var(--abc-blue); }
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { top: auto; right: 14px; bottom: 14px; width: 40px; height: 40px; border: 1px solid var(--abc-line); border-radius: 50%; background: #fff; box-shadow: var(--abc-shadow); }
/* Videos de YouTube: un cuadro más de la galería, del mismo tamaño que las
   fotos. Sobre un video no van la lupa ni, mientras se reproduce, el
   porcentaje. */
.woocommerce div.product div.images .abc-video { position: relative; aspect-ratio: 1 / 1; background: var(--abc-navy); }
.abc-video__play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; background: var(--abc-navy) center / contain no-repeat; cursor: pointer; }
.abc-video__icon { display: grid; place-items: center; width: 76px; height: 76px; padding-left: 5px; border-radius: 50%; background: rgba(15, 23, 42, .72); color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); transition: transform .15s ease, background-color .15s ease; }
.abc-video__play:hover .abc-video__icon, .abc-video__play:focus-visible .abc-video__icon { background: var(--abc-red); transform: scale(1.06); }
.abc-video__play:focus-visible { outline-offset: -5px; }
.abc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.abc-video.is-playing .abc-video__play { display: none; }
.woocommerce div.product div.images:has(.abc-video.flex-active-slide) .woocommerce-product-gallery__trigger { display: none; }
.abc-commerce div.product:has(.abc-video.is-playing) > .abc-pdp-badges { display: none; }
.woocommerce div.product div.images .flex-control-thumbs li img[src*="i.ytimg.com"] { object-fit: cover; }
@media (min-width: 768px) {
  .woocommerce div.product div.images .flex-control-thumbs li:has(img[src*="i.ytimg.com"]) { position: relative; }
  .woocommerce div.product div.images .flex-control-thumbs li:has(img[src*="i.ytimg.com"])::after { content: ""; position: absolute; inset: 0; width: 28px; height: 28px; margin: auto; border-radius: 50%; background: rgba(15, 23, 42, .75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23fff' d='M96 48l320 208L96 464z'/%3E%3C/svg%3E") 58% 50% / 12px no-repeat; pointer-events: none; }
}
@media (max-width: 767px) {
  .woocommerce div.product div.images .flex-control-thumbs { justify-content: center; gap: 8px; margin-top: 12px; overflow: visible; }
  .woocommerce div.product div.images .flex-control-thumbs li { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; transition: width .2s ease, background-color .2s ease; }
  .woocommerce div.product div.images .flex-control-thumbs li:has(img.flex-active) { width: 20px; border-radius: var(--abc-r-pill); background: var(--abc-blue); }
  /* La miniatura queda invisible encima del punto: es lo que se toca. */
  .woocommerce div.product div.images .flex-control-thumbs li img, .woocommerce div.product div.images .flex-control-thumbs li img.flex-active, .woocommerce div.product div.images .flex-control-thumbs li img:hover { position: absolute; top: -10px; left: -4px; width: calc(100% + 8px); height: 28px; border: 0; opacity: 0; }
}
@media (min-width: 992px) {
  .woocommerce div.product div.images:has(.flex-control-thumbs) { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: start; }
  .woocommerce div.product div.images:has(.flex-control-thumbs) .flex-viewport { grid-column: 2; grid-row: 1; }
  /* La columna de miniaturas toma el alto de la foto (height 0 y min-height
     100 %: no agranda la fila) y, si no entran, se desplaza sin barra. */
  .woocommerce div.product div.images .flex-control-thumbs { grid-column: 1; grid-row: 1; flex-direction: column; height: 0; min-height: 100%; margin: 0; overflow: hidden auto; scrollbar-width: none; }
  .woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar { display: none; }
  .woocommerce div.product div.images .flex-control-thumbs li { flex: none; width: 76px; }
  .woocommerce div.product div.images .flex-control-thumbs li img { width: 76px; height: 76px; object-fit: contain; }
  /* Con 7 u 8 fotos, más chicas para que entren todas. */
  .woocommerce div.product div.images .flex-control-thumbs:has(li:nth-child(7)) { gap: 6px; }
  .woocommerce div.product div.images .flex-control-thumbs:has(li:nth-child(7)) li img { width: 62px; height: 62px; }
}

/* Sobre la foto: el porcentaje real y la etiqueta comercial. */
.abc-commerce div.product > .abc-pdp-badges { grid-area: gallery; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; align-self: start; justify-self: start; margin: 12px; pointer-events: none; }
.abc-pdp-badges .abc-off { padding: 4px 12px; font-size: 12px; }
.abc-pdp-badge { padding: 4px 12px; border-radius: var(--abc-r-pill); background: var(--abc-green); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }

/* Columna de compra. */
.abc-commerce .summary { display: flex; flex-direction: column; gap: 16px; }
.abc-commerce .summary > * { margin: 0; }
.woocommerce div.product .product_title { margin: 0; color: var(--abc-navy); font-size: 22px; font-weight: 800; line-height: 1.25; text-wrap: balance; }
.abc-pdp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: -8px; }
.abc-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; color: var(--abc-muted); font-size: 13px; }
.abc-identity__brand { color: var(--abc-blue-text); font-weight: 700; text-decoration: none; }
.abc-identity__brand:hover { text-decoration: underline; }
.abc-identity__label { color: var(--abc-blue-text); font-weight: 600; }
.abc-identity__sku { padding-left: 12px; border-left: 1px solid var(--abc-line); }
.abc-status { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: 13px; font-weight: 700; }
.abc-status > span { display: inline-flex; align-items: center; gap: 6px; }
.abc-status__stock.is-ok { color: var(--abc-green); }
.abc-status__stock.is-out { color: var(--abc-muted); }
.abc-status__warranty { color: var(--abc-text); font-weight: 600; }
.abc-status__warranty .abc-icon { color: var(--abc-blue-text); }
/* Condición: «Primera», o «Outlet Premium» con «¿Qué es?» que abre el texto. */
.abc-status__condition { display: inline-flex; align-items: center; padding: 1px 8px; border: 1px solid var(--abc-line); border-radius: 6px; color: var(--abc-text); font-weight: 700; }
details.abc-status__condition { position: relative; padding: 0; border: 0; }
details.abc-status__condition > summary { display: inline-flex; align-items: center; gap: 8px; padding: 1px 8px; border: 1px solid #f3c58a; border-radius: 6px; background: #fff7ed; color: var(--abc-amber-text); list-style: none; cursor: pointer; }
details.abc-status__condition > summary::-webkit-details-marker { display: none; }
.abc-status__condition.is-outlet:not(details) { border-color: #f3c58a; background: #fff7ed; color: var(--abc-amber-text); }
.abc-status__what { color: var(--abc-blue-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.abc-status__note { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: min(320px, 80vw); padding: 12px 14px; border: 1px solid var(--abc-line); border-radius: var(--abc-r-btn); background: #fff; box-shadow: var(--abc-shadow-hover); color: var(--abc-text); font-size: 13px; font-weight: 400; line-height: 1.5; }

/* Recuadro de precios: mejor precio, tarjetas y billeteras, envío y retiro. */
.abc-buybox { display: grid; gap: 12px; }
.abc-buybox__best, .abc-buybox__cards { padding: 14px 16px; border: 1px solid var(--abc-line); border-radius: var(--abc-r-card); background: #fff; }
.abc-buybox__best { border-color: #bbe5c8; background: var(--abc-green-soft); }
.abc-buybox__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.abc-buybox__pill { padding: 3px 10px; border: 1px solid #bbe5c8; border-radius: var(--abc-r-pill); background: #fff; color: var(--abc-green); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.abc-buybox__save { color: var(--abc-green); font-size: 13px; font-weight: 700; }
.abc-buybox__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 8px 0 0; }
.abc-price-big { color: var(--abc-navy); font-size: 34px; font-weight: 900; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.abc-buybox__price .abc-price-old { font-size: 14px; }
.abc-buybox__methods { margin: 4px 0 0; color: var(--abc-text); font-size: 13px; }
.abc-buybox__methods strong { color: var(--abc-green); }
.abc-buybox__tax { margin: 2px 0 0; color: var(--abc-muted); font-size: 12px; }
.abc-buybox__label { display: inline-flex; align-items: center; gap: 6px; color: var(--abc-navy); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.abc-buybox__logos { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.abc-buybox__logos img { width: auto; height: 18px !important; margin: 0 !important; }
.abc-buybox__other { margin: 6px 0 0; color: var(--abc-navy); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.abc-buybox__promos { margin: 10px 0 0; }
.abc-buybox__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 10px 0 0; color: var(--abc-muted); font-size: 12px; }
.abc-buybox__more .abc-link { font-size: 13px; font-weight: 700; text-decoration: none; }
.abc-buybox__more .abc-link:hover { text-decoration: underline; }
.abc-buybox__more--solo { margin: 0; }
/* Envío y retiro: pegados al pie del recuadro de tarjetas. */
.abc-buybox__delivery { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--abc-line); border-radius: var(--abc-r-card); background: var(--abc-surface); list-style: none; }
.abc-buybox__delivery li { display: grid; align-content: start; gap: 2px; padding: 10px 14px; color: var(--abc-navy); font-size: 13px; font-weight: 600; line-height: 1.35; }
.abc-buybox__delivery li + li { border-left: 1px solid var(--abc-line); }
.abc-buybox__delivery .abc-buybox__label { color: var(--abc-muted); font-size: 10px; }
.abc-buybox__delivery .is-pickup > span:last-child { color: var(--abc-green); }
.abc-buybox__cards:has(+ .abc-buybox__delivery) { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.abc-buybox__cards + .abc-buybox__delivery { margin-top: -13px; border-top-color: var(--abc-line-soft); border-top-right-radius: 0; border-top-left-radius: 0; }

/* Cuota sin interés del día (theme.js elige cuál se ve). */
.abc-promo-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "day amount" "text amount"; align-items: center; gap: 4px 12px; padding: 10px 12px; border: 1px solid #b9d3ee; border-radius: var(--abc-r-btn); background: var(--abc-blue-soft); }
.abc-promo-box[hidden], .abc-promo-box [hidden] { display: none; }
.abc-promo-box__day { grid-area: day; }
.abc-promo-box__day > span { display: inline-block; padding: 3px 8px; border: 1px solid #b9d3ee; border-radius: 6px; background: #fff; color: var(--abc-blue-text); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.abc-promo-box.is-today .abc-promo-box__day > span { border-color: var(--abc-blue); background: var(--abc-blue); color: #fff; }
.abc-promo-box__text { grid-area: text; display: grid; gap: 1px; min-width: 0; color: var(--abc-navy); font-size: 13px; line-height: 1.35; }
.abc-promo-box__text strong { font-weight: 700; }
.abc-promo-box__bank { color: var(--abc-blue-text); font-size: 12px; font-weight: 600; }
.abc-promo-box__text small { color: var(--abc-muted); font-size: 11px; }
.abc-promo-box__amount { grid-area: amount; display: grid; justify-items: end; color: var(--abc-blue-text); font-size: 15px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.abc-promo-box__amount small { color: var(--abc-muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
@media (min-width: 1200px) {
  .abc-promo-box { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "day text amount"; }
}

/* Colores: fotos redondas; la del producto actual, con anillo azul. */
.abc-variants { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.abc-variants__label { margin: 0; color: var(--abc-navy); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.abc-variants__label strong { color: var(--abc-text); font-weight: 600; letter-spacing: 0; text-transform: none; }
.abc-variants ul, .abc-features ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.abc-variants a { display: grid; place-items: center; width: 46px; height: 46px; overflow: hidden; border: 1px solid var(--abc-line); border-radius: 50%; background: #fff; }
.abc-variants a img { width: 38px; height: 38px; object-fit: contain; }
.abc-variants a:hover { border-color: var(--abc-blue); }
.abc-variants a.is-current { border: 2px solid var(--abc-blue); box-shadow: 0 0 0 3px var(--abc-blue-soft); }
.abc-features li { padding: 6px 14px; border: 1px solid #cbd5e1; border-radius: var(--abc-r-pill); background: #fff; color: var(--abc-navy); font-size: 14px; font-weight: 600; }

/* Compra. PC: cantidad y «Comprar ahora»; debajo, «Agregar al carrito».
   Celular: fija al pie, con la cantidad y «Agregar» arriba. */
.abc-btn--navy { background: var(--abc-navy); color: #fff; }
.abc-btn--navy:hover { background: #1e293b; color: #fff; }
.abc-btn--wa-outline { border-color: var(--abc-green); background: #fff; color: var(--abc-green); }
.abc-btn--wa-outline:hover { background: var(--abc-green-soft); color: var(--abc-green-hover); }
.woocommerce div.product form.cart.abc-buy { display: grid; grid-template-columns: 140px minmax(0, 1fr); grid-template-areas: "qty now" "add add"; gap: 10px; margin: 0; }
.abc-buy__qty { grid-area: qty; }
.abc-buy__now { grid-area: now; }
.abc-buy__add { grid-area: add; }
.abc-buy .abc-btn { width: 100%; min-height: 52px; font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
/* WooCommerce agrega «Ver carrito» al lado del botón; el aviso ya lo trae. */
.woocommerce .abc-buy a.added_to_cart { display: none; }
.woocommerce .quantity { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: stretch; min-height: 48px; overflow: hidden; border: 1px solid var(--abc-input); border-radius: var(--abc-r-btn); background: #fff; }
.woocommerce .quantity:not(:has(.abc-qty-btn)) { display: block; }
.woocommerce .quantity .qty { width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; background: #fff; color: var(--abc-navy); font-size: 16px; font-weight: 700; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.woocommerce .quantity .qty::-webkit-inner-spin-button, .woocommerce .quantity .qty::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.abc-qty-btn { display: grid; place-items: center; border: 0; background: #fff; color: var(--abc-navy); cursor: pointer; }
.abc-qty-btn:hover { background: var(--abc-sky); }
.abc-qty-btn[disabled] { color: #cbd5e1; cursor: default; background: #fff; }
.abc-buy .quantity { min-height: 52px; }
.woocommerce div.product .stock { margin: 0; font-weight: 700; }
.woocommerce div.product .stock.out-of-stock { color: var(--abc-muted); }

/* WhatsApp, garantía, devolución y compartir. */
.abc-ask { display: grid; gap: 12px; }
.abc-ask__wa { width: 100%; min-height: 50px; font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.abc-ask__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.abc-ask__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.abc-ask__chips li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--abc-line-soft); border-radius: 6px; background: var(--abc-surface); color: var(--abc-text); font-size: 12px; font-weight: 600; }
.abc-ask__chips .abc-icon { color: var(--abc-blue-text); }
.abc-ask__share { gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; }
.abc-ask__share:hover { text-decoration: underline; }

/* Descripción: íconos a todo el ancho; debajo, las solapas con los
   relacionados al costado (PC). */
.abc-pdp-description { display: grid; gap: 20px; margin-top: 16px; padding-top: 28px; border-top: 1px solid var(--abc-line); }
.abc-pdp-description__title { margin: 0; font-size: 22px; font-weight: 800; }
.abc-pdp-features .gv-features { margin: 0; }
.abc-pdp-description__layout { display: grid; gap: 24px; }
.abc-pdp-description__body { min-width: 0; overflow-wrap: anywhere; }

/* Tarjeta de WhatsApp: solo en celular (en PC el botón está en la compra). */
.abc-pdp-help { display: grid; justify-items: center; gap: 8px; padding: 22px 18px; border: 1px solid #b9d3ee; border-radius: var(--abc-r-card); background: var(--abc-blue-soft); text-align: center; }
.abc-pdp-help__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--abc-green); box-shadow: var(--abc-shadow); }
.abc-pdp-help h2 { margin: 4px 0 0; font-size: 18px; }
.abc-pdp-help p { max-width: 32ch; margin: 0; color: var(--abc-muted); font-size: 14px; }
.abc-pdp-help .abc-btn { width: 100%; margin-top: 6px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

/* Relacionados: lista compacta. */
.abc-pdp-related { display: grid; align-content: start; gap: 12px; }
.abc-pdp-related h2 { margin: 0; font-size: 18px; }
.abc-pdp-related ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.abc-mini { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--abc-line); border-radius: var(--abc-r-card); background: #fff; }
.abc-mini__img img { display: block; width: 72px; height: 72px; object-fit: contain; }
.abc-mini__body { display: grid; gap: 1px; min-width: 0; }
.abc-mini__name { display: -webkit-box; overflow: hidden; color: var(--abc-navy); font-size: 13px; font-weight: 600; line-height: 1.35; text-decoration: none; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.abc-mini__name:hover { color: var(--abc-blue-text); }
.abc-mini .abc-price-old { font-size: 12px; }
.abc-mini__price { color: var(--abc-blue); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.abc-mini__promo { color: var(--abc-green); font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.abc-mini__promo[hidden] { display: none; }
.abc-pdp-related__all { width: 100%; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

/* Productos que se venden junto con este (si se cargan en WooCommerce). */
.woocommerce div.product .upsells { margin-top: 32px; }
.woocommerce div.product .upsells > h2 { margin: 0 0 14px; font-size: 22px; }

/* «Ver todas las cuotas». */
.abc-pay-dialog__gateway { display: grid; gap: 8px; margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--abc-line-soft); }
.abc-pay-dialog__gateway h3 { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: 16px; }
.abc-pay-dialog__label { margin: 4px 0 0; color: var(--abc-navy); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.abc-pay-dialog__plans { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.abc-pay-dialog__plans li { display: grid; gap: 1px; padding: 8px 12px; border: 1px solid var(--abc-line); border-radius: var(--abc-r-btn); }
.abc-pay-dialog__plans li[hidden], .abc-pay-dialog__plans [hidden] { display: none; }
.abc-pay-dialog__plans li.is-free { border-color: #bbe5c8; background: var(--abc-green-soft); }
.abc-pay-dialog__plans li.is-today { order: -1; border-color: var(--abc-green); }
.abc-pay-dialog__plans strong { color: var(--abc-navy); font-size: 15px; font-variant-numeric: tabular-nums; }
.abc-pay-dialog__plans small { color: var(--abc-muted); font-size: 12px; }
.abc-pay-dialog__when { color: var(--abc-green); font-size: 12px; font-weight: 700; }
.abc-pay-dialog__when [data-abc-promo-today] { padding: 1px 6px; border-radius: 4px; background: var(--abc-green); color: #fff; text-transform: uppercase; }
.abc-pay-dialog__legal { margin: 0; color: var(--abc-muted); font-size: 12px; }

@media (max-width: 767px) {
  /* Marca y SKU arriba del nombre; stock y garantía debajo. */
  .abc-pdp-meta { display: contents; }
  .abc-identity { order: -1; margin-bottom: -8px; }
  .abc-identity__label { display: none; }
  .abc-identity__brand { padding: 2px 10px; border: 1px solid var(--abc-line); border-radius: 6px; color: var(--abc-muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .abc-identity__sku { padding-left: 0; border-left: 0; font-size: 12px; }
  .abc-status { margin-top: -6px; }

  .woocommerce div.product form.cart.abc-buy { position: fixed; right: 0; bottom: 0; left: 0; z-index: 40; grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "qty add" "now now"; gap: 8px; padding: 10px var(--abc-gutter) calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--abc-line); background: #fff; box-shadow: 0 -8px 24px rgba(15, 23, 42, .1); }
  .abc-buy .abc-btn, .abc-buy .quantity { min-height: 46px; }
  .abc-buy .abc-btn { gap: 6px; padding: 0 10px; font-size: 13px; letter-spacing: .02em; white-space: nowrap; }
  .abc-buy .abc-buy__add { border-color: var(--abc-blue); background: #fff; color: var(--abc-blue-text); }
  .abc-buy .abc-buy__add:hover { background: var(--abc-sky); }
  body:has(form.abc-buy) { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
  body:has(form.abc-buy) .abc-toast { bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }

  .abc-ask__wa, .abc-ask__chips .is-warranty { display: none; }

  .abc-pdp-description { margin-top: 4px; padding-top: 0; border-top: 0; }
  .abc-pdp-description__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* Íconos: los cuatro primeros, de a cuatro por fila. */
  .abc-pdp-features .gv-features { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .abc-pdp-features .gv-feature { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 2px; padding: 10px 4px; text-align: center; }
  .abc-pdp-features .gv-feature .gv-icon { grid-row: auto; width: 32px; height: 32px; margin-bottom: 2px; }
  .abc-pdp-features .gv-feature-label { font-size: 9px; letter-spacing: .02em; }
  .abc-pdp-features .gv-feature-value { font-size: 12px; }
  .abc-pdp-features .gv-feature:nth-child(n+5) { display: none; }
}
@media (min-width: 768px) {
  /* La garantía va en las etiquetas de debajo de la compra. */
  .abc-status > .abc-status__warranty { display: none; }
  .abc-pdp-help { display: none; }
  .abc-pdp-related ul { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
@media (min-width: 992px) {
  .abc-commerce div.product { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "gallery summary"; column-gap: 40px; row-gap: 28px; align-items: start; }
  .abc-commerce div.product > .abc-pdp-badges { margin: 12px 0 0 12px; }
  .abc-commerce div.product:has(.flex-control-thumbs) > .abc-pdp-badges { margin-left: 104px; }
  .woocommerce div.product .product_title { font-size: 26px; }
  .abc-price-big { font-size: 38px; }
  .abc-pdp-description { margin-top: 24px; padding-top: 36px; }
  .abc-pdp-description__title { font-size: 26px; }
  .abc-pdp-description__layout { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); column-gap: 40px; align-items: start; }
  .abc-pdp-description__body { grid-column: 1; grid-row: 1; }
  .abc-pdp-related { grid-column: 2; grid-row: 1; }
  .abc-pdp-related ul { grid-template-columns: minmax(0, 1fr); }
}

/* 10 · CARRITO (bocetos 04 y 05) */
.abc-cart__title { margin: 8px 0 18px; font-size: 26px; }
.abc-cart__layout { display: flex; flex-direction: column; gap: 14px; }
.abc-cart__items { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.abc-line { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 14px; border: 1px solid var(--abc-line); border-radius: var(--abc-r-card); background: #fff; }
.abc-line__img img { width: 72px; height: 72px; object-fit: contain; border-radius: 8px; background: #fff; }
.abc-line__info { display: grid; gap: 8px; min-width: 0; }
.abc-line__name { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; }
.abc-line__name a { color: var(--abc-navy); text-decoration: none; }
.abc-line__name a:hover { color: var(--abc-blue-text); }
/* Como la tarjeta: precio de lista tachado con el porcentaje, «pagando por
   transferencia» y el precio con transferencia. */
.abc-line__prices { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.abc-line__list { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; color: var(--abc-muted); font-size: 12px; }
.abc-line__method { color: var(--abc-blue-text); font-size: 12px; font-weight: 700; }
.abc-line__total { color: var(--abc-blue); font-size: 20px; font-weight: 800; line-height: 1.2; }
.abc-line__unit { color: var(--abc-muted); font-size: 13px; }
.abc-line__controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.abc-line__controls .quantity { width: 134px; }
.abc-line__remove { color: var(--abc-blue-text); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.woocommerce a.remove.abc-line__remove { display: inline; width: auto; height: auto; border-radius: 0; color: var(--abc-blue-text) !important; font-size: 14px; font-weight: 600; line-height: 1.4; }
.woocommerce a.remove.abc-line__remove:hover { background: none; color: var(--abc-navy) !important; }
.abc-line .variation, .abc-line .backorder_notification { margin: 0; color: var(--abc-muted); font-size: 13px; }

.abc-coupon { border: 1px solid var(--abc-line); border-radius: var(--abc-r-card); background: #fff; }
.abc-coupon > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 16px; color: var(--abc-navy); font-size: 15px; font-weight: 700; list-style: none; cursor: pointer; }
.abc-coupon > summary::-webkit-details-marker { display: none; }
.abc-coupon[open] > summary .abc-icon { transform: rotate(180deg); }
.abc-coupon__field { display: flex; gap: 8px; padding: 0 16px 16px; }
.abc-coupon__field input { min-width: 0; flex: 1; height: 46px; padding: 0 12px; border: 1px solid var(--abc-input); border-radius: var(--abc-r-btn); font-size: 16px; }

.abc-summary { padding: 18px; border: 1px solid var(--abc-line); border-radius: var(--abc-r-card); background: #fff; }
.abc-summary h2 { margin: 0 0 12px; font-size: 17px; }
.abc-summary__rows { display: grid; gap: 8px; margin: 0; }
.abc-summary__rows > div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.abc-summary__rows dt { color: var(--abc-text); }
.abc-summary__rows dd { margin: 0; color: var(--abc-navy); font-weight: 600; text-align: right; }
.abc-summary__rows .is-discount dd { color: var(--abc-green); }
.abc-summary__rows .woocommerce-remove-coupon { margin-left: 6px; font-size: 13px; }
.abc-summary__total { align-items: baseline; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--abc-line); }
.abc-summary__total dt { color: var(--abc-navy); font-size: 17px; font-weight: 700; }
.abc-summary__total dd { font-size: 28px; font-weight: 800 !important; }
.abc-summary__total dd small { display: block; color: var(--abc-muted); font-size: 12px; font-weight: 500; }
.abc-summary__rows .abc-summary__other { margin-top: -4px; font-size: 13px; }
.abc-summary__other dt, .abc-summary__rows .abc-summary__other dd { color: var(--abc-muted); font-weight: 500; }
.abc-summary__actions { display: grid; gap: 10px; margin-top: 14px; padding: 0; }
.woocommerce-cart .abc-summary .wc-proceed-to-checkout a.checkout-button { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 18px; font-size: 17px; text-decoration: none; }
.abc-summary__help { margin: 12px 0 0; text-align: center; }
.abc-cart__update { margin-top: 12px; }
.abc-js .abc-cart__update { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.abc-cart__related { margin-top: 36px; }
.abc-cart-empty { padding-block: 8px 24px; }
.abc-cart-empty .return-to-shop { margin-top: 16px; }

@media (max-width: 991px) {
  /* El resumen acompaña el desplazamiento y se apoya al pie: no hay que
     bajar hasta el fondo para comprar. */
  .abc-summary { position: sticky; bottom: 0; z-index: 20; margin-inline: calc(-1 * var(--abc-gutter)); padding: 14px var(--abc-gutter) calc(14px + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 24px rgba(15, 23, 42, .1); }
  .abc-summary h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .abc-summary__rows { gap: 6px; }
  .abc-summary__total { padding-top: 8px; }
  .abc-summary__total dd { font-size: 24px; }
  .abc-summary__actions { margin-top: 10px; gap: 8px; }
  .abc-summary__help { margin-top: 8px; }
  .abc-summary__keep { min-height: 46px; }
}
@media (min-width: 768px) {
  .abc-line { grid-template-columns: 96px minmax(0, 1fr); padding: 18px; }
  .abc-line__img img { width: 96px; height: 96px; }
  .abc-line__info { grid-template-columns: minmax(0, 1fr) 170px; grid-template-areas: "name prices" "controls prices"; column-gap: 16px; align-items: start; }
  .abc-line__name { grid-area: name; }
  .abc-line__prices { grid-area: prices; align-items: flex-end; text-align: right; }
  .abc-line__list { justify-content: flex-end; }
  .abc-line__total { font-size: 22px; }
  .abc-line__controls { grid-area: controls; justify-content: flex-start; gap: 20px; }
}
@media (min-width: 992px) {
  .abc-cart__title { font-size: 30px; }
  .abc-cart__layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); grid-template-areas: "items coupon" "items summary" "items ."; column-gap: 24px; row-gap: 16px; align-items: start; }
  .abc-cart__items { grid-area: items; }
  .abc-coupon { grid-area: coupon; padding-bottom: 2px; }
  .abc-coupon > summary { pointer-events: none; }
  .abc-coupon > summary .abc-icon { display: none; }
  .abc-summary { grid-area: summary; position: sticky; top: 16px; padding: 20px; }
}

/* Avisos de WooCommerce */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error, .woocommerce-message, .woocommerce-info, .woocommerce-error { margin: 0 0 16px; padding: 14px 16px 14px 48px; border: 1px solid #b9d3ee; border-radius: var(--abc-r-btn); background: var(--abc-sky); color: var(--abc-navy); font-size: 15px; list-style: none; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--abc-blue); top: 14px; left: 16px; }
.woocommerce .woocommerce-message, .woocommerce-message { border-color: #bbe5c8; background: var(--abc-green-soft); }
.woocommerce-message::before { color: var(--abc-green); }
.woocommerce .woocommerce-error, .woocommerce-error { border-color: #f3c3bf; background: #fff6f5; }
.woocommerce-error::before { color: var(--abc-red); top: 14px; left: 16px; }
.woocommerce-message .button, .woocommerce-info .button { float: right; margin-left: 12px; padding: 0; border: 0; background: none !important; color: var(--abc-blue-text) !important; font-weight: 700; text-decoration: underline; }

/* 11 · PIE, MENÚ Y DIÁLOGOS */
.abc-footer { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--abc-line); background: var(--abc-surface); color: var(--abc-text); font-size: 14px; }
.abc-footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
.abc-footer__brand { grid-column: 1 / -1; }
.abc-footer__brand img { width: 72px; height: 72px; object-fit: contain; }
.abc-footer__brand p { max-width: 320px; margin: 10px 0 0; color: var(--abc-muted); }
.abc-footer h2 { margin: 0 0 10px; font-size: 15px; }
.abc-footer ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.abc-footer a { color: var(--abc-text); text-decoration: none; }
.abc-footer a:hover { color: var(--abc-blue-text); text-decoration: underline; }
.abc-footer .abc-link { color: var(--abc-text); font-weight: 400; text-decoration: none; }
.abc-footer__col > .abc-btn { margin-top: 12px; }
.abc-footer__legal { margin-top: 32px; padding-block: 16px 24px; border-top: 1px solid var(--abc-line); color: var(--abc-muted); font-size: 13px; }
@media (min-width: 768px) {
  .abc-footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); }
  .abc-footer__brand { grid-column: auto; }
}

.abc-dialog { width: min(440px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 22px; border: 0; border-radius: 16px; background: #fff; color: var(--abc-text); box-shadow: 0 30px 80px rgba(15, 23, 42, .28); }
.abc-dialog::backdrop, .abc-drawer::backdrop { background: rgba(15, 23, 42, .45); }
.abc-dialog__head, .abc-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.abc-dialog__head h2, .abc-drawer__head h2 { margin: 0; font-size: 20px; }
.abc-dialog__close { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 50%; background: var(--abc-surface); color: var(--abc-navy); cursor: pointer; }
.abc-dialog__close:hover { background: var(--abc-line-soft); }
.abc-dialog p { margin: 0 0 14px; font-size: 15px; }
.abc-dialog__note { color: var(--abc-muted); font-size: 13px !important; }
.abc-postcode label { display: block; margin-bottom: 6px; color: var(--abc-navy); font-size: 14px; font-weight: 700; }
.abc-postcode > div { display: flex; gap: 8px; }
.abc-postcode input { min-width: 0; flex: 1; height: 48px; padding: 0 12px; border: 1px solid var(--abc-input); border-radius: var(--abc-r-btn); font-size: 16px; }
.abc-location-detect { margin: 14px 0 10px; }
.abc-dialog .abc-postcode-help { margin: 8px 0 0; font-size: 14px; }
.abc-postcode-help a { color: var(--abc-blue-text); font-weight: 600; text-underline-offset: 3px; }
.abc-payments-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.abc-payments-list li { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--abc-line); border-radius: var(--abc-r-btn); }
.abc-payments-list strong { color: var(--abc-navy); }
.abc-payments-list span p { margin: 0; color: var(--abc-text); font-size: 14px; }
.abc-wa-branches { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.abc-wa-branches a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 14px; border: 1px solid var(--abc-line); border-radius: var(--abc-r-btn); color: var(--abc-navy); font-size: 16px; font-weight: 700; text-decoration: none; }
.abc-wa-branches a > .abc-icon:first-child { color: var(--abc-green); }
.abc-wa-branches a > span { flex: 1; }
.abc-wa-branches a:hover { border-color: var(--abc-green); background: var(--abc-green-soft); }

.abc-drawer { width: min(380px, 100%); height: 100%; max-width: 100%; max-height: 100%; margin: 0 auto 0 0; padding: 0; border: 0; background: #fff; color: var(--abc-text); }
.abc-drawer[open] { display: flex; flex-direction: column; animation: abc-drawer-in .25s ease; }
@keyframes abc-drawer-in { from { transform: translateX(-100%); } to { transform: none; } }
.abc-drawer__head { margin: 0; padding: 16px 18px; border-bottom: 1px solid var(--abc-line); }
.abc-drawer__nav { flex: 1; overflow-y: auto; padding: 6px 18px 18px; }
.abc-drawer__nav > a, .abc-drawer__nav summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--abc-line-soft); color: var(--abc-navy); font-size: 16px; font-weight: 700; text-decoration: none; list-style: none; cursor: pointer; }
.abc-drawer__nav summary::-webkit-details-marker { display: none; }
.abc-drawer__nav details[open] summary .abc-icon { transform: rotate(180deg); }
.abc-drawer__nav details a { display: flex; align-items: center; min-height: 46px; padding-left: 14px; border-left: 2px solid var(--abc-line); color: var(--abc-text); font-size: 15px; text-decoration: none; }
.abc-drawer__nav details a:hover, .abc-drawer__nav > a:hover { color: var(--abc-blue-text); }
.abc-drawer__nav .abc-icon { color: var(--abc-blue); }
.abc-drawer__all { color: var(--abc-blue-text) !important; }
.abc-drawer__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--abc-line); }

/* 12 · WHATSAPP FLOTANTE
   No se muestra en la ficha (la descripción trae el suyo), ni en carrito y
   checkout (el carrito tiene su consulta y el checkout no se interrumpe). */
.abc-wa-float { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 56px; height: 56px; padding: 0; border: 0; border-radius: var(--abc-r-pill); background: var(--abc-green); color: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, .2); cursor: pointer; }
.abc-wa-float span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.abc-wa-float:hover { background: var(--abc-green-hover); }
.abc-no-float .abc-wa-float { display: none; }
@media (min-width: 768px) and (hover: hover) {
  .abc-wa-float { width: auto; padding: 0 20px; font-size: 15px; font-weight: 700; }
  .abc-wa-float span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* 13 · CHECKOUT (boceto 06)
   Tres pasos a la izquierda y el resumen al costado. En celular, el resumen
   va arriba y plegado, con el total a la vista. */
.abc-checkout { display: flex; flex-direction: column; gap: 16px; padding-block: 8px 24px; }
.abc-checkout__main { display: grid; gap: 20px; min-width: 0; }
.abc-checkout__summary { order: -1; min-width: 0; }
.abc-checkout__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.abc-checkout__head h1 { margin: 0; font-size: 26px; }
.abc-checkout__head a { font-size: 15px; font-weight: 600; }
/* Los errores del envío ocupan todo el ancho, arriba de todo. */
.abc-checkout > .woocommerce-NoticeGroup { order: -2; grid-column: 1 / -1; }
.abc-checkout > .woocommerce-NoticeGroup .woocommerce-error { margin: 0; }
.abc-checkout__steps { display: grid; gap: 20px; }

/* Paso: número a la izquierda; título y estado a la derecha; los campos en
   una caja debajo. Con JavaScript (.is-stepped) los pasos se pliegan: el
   que falta completar dice «Aún falta completar» y el completo muestra un
   resumen y «Editar». */
.abc-step { scroll-margin-top: 16px; }
.abc-step__head { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 40px; }
.abc-step__n { grid-row: 1 / span 2; align-self: start; display: inline-grid; place-items: center; width: 30px; height: 30px; margin-top: 2px; border: 2px solid var(--abc-blue); border-radius: 50%; background: var(--abc-blue); color: #fff; font-size: 14px; font-weight: 800; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.abc-step__n .abc-icon { display: none; }
.abc-step__head h2 { grid-column: 2; margin: 0; font-size: 18px; line-height: 1.3; }
.abc-step__toggle { padding: 0; border: 0; background: none; color: var(--abc-navy); font: inherit; text-align: left; cursor: default; }
.abc-step__status { grid-column: 2; margin: 2px 0 0; color: var(--abc-muted); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.abc-step__status:empty { display: none; }
.abc-step__edit, .abc-step__chevron { grid-column: 3; grid-row: 1 / span 2; display: none; }
.abc-step__body { margin-top: 12px; padding: 16px; border: 1px solid var(--abc-line); border-radius: var(--abc-r-card); background: #fafcfe; }
.abc-step__body--pay { padding: 0; border: 0; background: none; }
.abc-step__actions { display: none; }

.is-stepped .abc-step__toggle { cursor: pointer; }
/* Todo el encabezado es el botón. */
.is-stepped .abc-step__toggle::after { content: ""; position: absolute; inset: -6px; border-radius: var(--abc-r-btn); }
.is-stepped .abc-step__toggle:focus-visible { outline: none; }
.is-stepped .abc-step__toggle:focus-visible::after { outline: 3px solid var(--abc-blue-text); outline-offset: 0; }
.is-stepped .abc-step__head:hover .abc-step__toggle { color: var(--abc-blue-text); }
.is-stepped .abc-step__chevron { display: inline-flex; color: var(--abc-muted); transition: transform .2s ease; }
.is-stepped .abc-step.is-open .abc-step__chevron { transform: rotate(180deg); }
.is-stepped .abc-step:not(.is-open) .abc-step__body { display: none; }
.is-stepped .abc-step.is-open .abc-step__body { animation: abc-fade-up .25s ease both; }
.is-stepped .abc-step.is-locked .abc-step__n { border-color: var(--abc-line); background: #fff; color: var(--abc-muted); }
.is-stepped .abc-step.is-locked .abc-step__chevron { display: none; }
.abc-step.is-done .abc-step__n > span { display: none; }
.abc-step.is-done .abc-step__n .abc-icon { display: block; animation: abc-pop .35s ease both; }
.is-stepped .abc-step.is-done:not(.is-open) .abc-step__chevron { display: none; }
.is-stepped .abc-step.is-done:not(.is-open) .abc-step__edit { display: inline; color: var(--abc-blue-text); font-size: 14px; font-weight: 700; }
.is-stepped .abc-step__actions { display: block; margin-top: 4px; }
.abc-step__actions .abc-btn { width: 100%; }
@media (min-width: 560px) {
  .abc-step__body { margin-left: 42px; }
  .abc-step__body--pay { margin-left: 42px; }
}
.abc-checkout .checkout-inline-error-message { margin: 6px 0 0; color: #b42318; font-size: 13px; font-weight: 600; }
.abc-step__group { margin: 16px 0 0; padding: 0; border: 0; }
.abc-step__group legend { margin-bottom: 8px; padding: 0; color: var(--abc-navy); font-size: 15px; font-weight: 700; }
.abc-checkout .form-row, .woocommerce form.abc-checkout .form-row { margin: 0 0 12px; padding: 0; }
.abc-checkout .woocommerce-billing-fields__field-wrapper, .abc-checkout .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.abc-checkout .woocommerce-billing-fields__field-wrapper > .form-row, .abc-checkout .woocommerce-shipping-fields__field-wrapper > .form-row { grid-column: 1 / -1; width: auto; float: none; }
@media (min-width: 560px) {
  .abc-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first, .abc-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first { grid-column: 1; }
  .abc-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last, .abc-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last { grid-column: 2; }
}
.abc-checkout .form-row label { display: block; margin-bottom: 4px; color: var(--abc-navy); font-size: 14px; font-weight: 600; line-height: 1.4; }
.abc-checkout .form-row .required { color: var(--abc-red); text-decoration: none; }
.abc-checkout .form-row .optional { color: var(--abc-muted); font-weight: 400; }
.woocommerce .abc-checkout .form-row .input-text, .woocommerce .abc-checkout .form-row select, .abc-checkout .select2-container .select2-selection--single { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--abc-input); border-radius: var(--abc-r-btn); background: #fff; font-size: 16px; }
.abc-checkout .select2-container .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 26px; }
.abc-checkout .select2-container .select2-selection--single .select2-selection__arrow { top: 10px; right: 8px; }
.woocommerce .abc-checkout .form-row .input-text:focus, .woocommerce .abc-checkout .form-row select:focus { border-color: var(--abc-blue); outline: 3px solid rgba(6, 115, 211, .2); outline-offset: 0; }
.woocommerce .abc-checkout .form-row.woocommerce-invalid .input-text { border-color: var(--abc-red); }
.abc-checkout textarea.input-text { min-height: 88px; }
/* Venta solo a Argentina: el país no se elige, no hace falta mostrarlo.
   Con !important porque el JavaScript de WooCommerce lo vuelve a mostrar. */
.abc-checkout #billing_country_field:has(input[type="hidden"], .country_to_state--single), .abc-checkout #shipping_country_field:has(input[type="hidden"], .country_to_state--single) { display: none !important; }

/* Subtítulo dentro de un paso: «Dirección de facturación», «Lo enviamos a». */
.abc-step__sub { grid-column: 1 / -1; margin: 6px 0 12px; padding-top: 14px; border-top: 1px solid var(--abc-line); color: var(--abc-navy); font-size: 15px; font-weight: 700; }

/* Envío: la dirección de facturación, bloqueada, y «Enviar a otro lado». */
.abc-ship { margin-top: 16px; }
.abc-ship[hidden] { display: none; }
.abc-ship__billing { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--abc-line); border-radius: var(--abc-r-btn); background: var(--abc-surface); }
.abc-ship__billing > .abc-icon { flex: none; margin-top: 3px; color: var(--abc-muted); }
.abc-ship__billing address { color: var(--abc-navy); font-style: normal; font-weight: 600; line-height: 1.45; }
.abc-ship__billing address:empty::before { content: "Completá la dirección en el paso 1."; color: var(--abc-muted); font-weight: 400; }
.abc-ship__billing p { margin: 4px 0 0; color: var(--abc-muted); font-size: 13px; }
.abc-ship__toggle { position: relative; margin: 12px 0 0; }
.abc-ship__toggle input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.abc-ship__toggle label { width: 100%; }
.abc-ship__toggle .abc-icon--check { display: none; }
.abc-ship__toggle input:checked + label { border-color: var(--abc-blue); background: var(--abc-sky); }
.abc-ship__toggle input:checked + label .abc-icon--check { display: inline-block; animation: abc-pop .3s ease both; }
.abc-ship__toggle input:checked + label .abc-icon--truck { display: none; }
.abc-ship__toggle input:focus-visible + label { outline: 3px solid var(--abc-blue-text); outline-offset: 2px; }
.abc-ship:has(#ship-to-different-address-checkbox:checked) .abc-ship__billing { display: none; }
.abc-ship .shipping_address { margin-top: 14px; }
.abc-step__body .woocommerce-additional-fields { margin-top: 16px; }
@media (min-width: 560px) {
  .abc-ship__toggle label { width: auto; }
}
.abc-checkout .abc-factura-toggle label { display: inline-flex; align-items: center; gap: 8px; color: var(--abc-blue-text); cursor: pointer; }
.abc-checkout .abc-factura-toggle input { width: 20px; height: 20px; accent-color: var(--abc-blue); }
/* «Opcional» confunde: razón social y CUIT son obligatorios con Factura A. */
.abc-checkout .abc-factura-toggle .optional, .abc-checkout .abc-factura-a .optional { display: none; }
.abc-js .abc-checkout .abc-factura-a { display: none; }
.abc-js .abc-checkout .abc-factura-a.is-open { display: block; animation: abc-fade-up .25s ease both; }

.abc-delivery__options { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.woocommerce ul#shipping_method.abc-delivery__options li { margin: 0; line-height: 1.4; }
.woocommerce ul#shipping_method.abc-delivery__options li input { position: absolute; margin: 0; opacity: 0; pointer-events: none; }
.woocommerce ul#shipping_method.abc-delivery__options li label { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 1px solid var(--abc-line); border-radius: var(--abc-r-btn); color: var(--abc-navy); font-size: 15px; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.abc-delivery__options label .abc-icon { color: var(--abc-blue); }
.abc-delivery__options label span { flex: 1; }
.abc-delivery__options label strong { color: var(--abc-navy); white-space: nowrap; }
.woocommerce ul#shipping_method.abc-delivery__options li input:checked + label { border: 2px solid var(--abc-blue); background: var(--abc-sky); padding: 9px 13px; }
.woocommerce ul#shipping_method.abc-delivery__options li input:focus-visible + label { outline: 3px solid var(--abc-blue-text); outline-offset: 2px; }
.abc-delivery__empty { margin: 0; color: var(--abc-muted); font-size: 14px; }

.woocommerce-checkout #payment, .woocommerce .abc-checkout #payment { border-radius: 0; background: none; }
.woocommerce-checkout #payment ul.payment_methods { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
/* El clearfix de WooCommerce sería una fila más de la grilla. */
.woocommerce-checkout #payment ul.payment_methods::before, .woocommerce-checkout #payment ul.payment_methods::after { display: none; }
.woocommerce-checkout #payment ul.payment_methods li { margin: 0; padding: 0; border: 1px solid var(--abc-line); border-radius: var(--abc-r-card); background: #fff; line-height: 1.5; list-style: none; overflow: hidden; }
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) { border: 2px solid var(--abc-blue); }
.woocommerce-checkout #payment ul.payment_methods li > input { margin: 0 0 0 16px; width: 20px; height: 20px; vertical-align: middle; accent-color: var(--abc-blue); }
.woocommerce-checkout #payment ul.payment_methods li > label { display: inline-block; padding: 16px 12px; color: var(--abc-navy); font-size: 16px; font-weight: 700; cursor: pointer; }
.abc-pay-promo { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: var(--abc-r-pill); background: var(--abc-green-soft); color: var(--abc-green); font-size: 13px; font-weight: 700; }
.abc-pay-promo[hidden] { display: none; }
.abc-pay-saving { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: var(--abc-r-pill); background: var(--abc-green-soft); color: var(--abc-green); font-size: 13px; font-weight: 700; white-space: nowrap; }
.woocommerce-checkout #payment div.payment_box { margin: 0; padding: 0 16px 16px; background: none; color: var(--abc-text); font-size: 15px; }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.abc-pay__intro { margin: 0 0 12px; }
.abc-pay__note { margin: 12px 0 0; color: var(--abc-muted); font-size: 13px; }
.abc-pay__refund { margin-top: 14px !important; }
.woocommerce-checkout #payment .place-order { margin-top: 16px; padding: 0; }
.woocommerce-checkout #payment #place_order { float: none; width: 100%; min-height: 56px; border-radius: var(--abc-r-btn); background: var(--abc-blue); color: #fff; font-size: 17px; font-weight: 800; }
.woocommerce-checkout #payment #place_order:hover { background: var(--abc-blue-hover); }

.abc-account { display: grid; gap: 0; margin: 0 0 12px; padding: 4px 14px; border-radius: var(--abc-r-btn); background: var(--abc-surface); font-size: 15px; }
.abc-account > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--abc-line-soft); }
.abc-account > div:last-child { border-bottom: 0; }
.abc-account dt { color: var(--abc-muted); }
.abc-account dd { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--abc-navy); font-weight: 700; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.abc-account__amount dd { font-size: 18px; }
.abc-account--missing { display: block; padding: 12px 14px; color: var(--abc-text); font-size: 14px; }
.abc-copy { min-height: 32px; padding: 0 10px; border: 1px solid var(--abc-line); border-radius: var(--abc-r-pill); background: #fff; color: var(--abc-blue-text); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.abc-copy.is-copied { border-color: #bbe5c8; background: var(--abc-green-soft); color: var(--abc-green); }

.abc-drop { position: relative; display: grid; justify-items: center; gap: 4px; padding: 20px 16px; border: 2px dashed #b9c8d8; border-radius: var(--abc-r-btn); background: #fbfdff; text-align: center; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.abc-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.abc-drop label { display: grid; gap: 4px; cursor: pointer; }
.abc-drop__text { color: var(--abc-navy); font-size: 15px; font-weight: 700; }
.abc-drop__text::before { content: ""; display: block; width: 28px; height: 28px; margin: 0 auto 6px; background: var(--abc-blue); -webkit-mask: var(--abc-upload-icon) center / contain no-repeat; mask: var(--abc-upload-icon) center / contain no-repeat; }
.abc-drop__hint { color: var(--abc-muted); font-size: 13px; }
.abc-drop__status { margin: 4px 0 0; color: var(--abc-muted); font-size: 13px; }
.abc-drop.is-over { border-color: var(--abc-blue); background: var(--abc-sky); }
.abc-drop.is-loading { border-color: var(--abc-blue); }
.abc-drop.is-loading .abc-drop__text::before { animation: abc-pulse 1s ease-in-out infinite; }
.abc-drop.is-done { border-style: solid; border-color: #9fd8b1; background: var(--abc-green-soft); }
.abc-drop.is-done .abc-drop__text::before { background: var(--abc-green); -webkit-mask-image: var(--abc-done-icon); mask-image: var(--abc-done-icon); animation: abc-pop .35s ease both; }
.abc-drop.is-done .abc-drop__status { color: var(--abc-green); font-weight: 700; }
.abc-drop.is-error { border-color: #f3c3bf; background: #fff6f5; }
.abc-drop.is-error .abc-drop__status { color: var(--abc-red); font-weight: 700; }

.abc-summary-box { border: 1px solid var(--abc-line); border-radius: var(--abc-r-card); background: #fff; }
.abc-summary-box > summary { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; list-style: none; cursor: pointer; }
.abc-summary-box > summary::-webkit-details-marker { display: none; }
.abc-summary-box > summary h2 { flex: 1; margin: 0; font-size: 17px; }
.abc-summary-box__total { color: var(--abc-navy); font-weight: 800; }
.abc-summary-box[open] > summary .abc-icon { transform: rotate(180deg); }
.abc-summary-box #order_review { padding: 0 16px 16px; }
.abc-review__items { display: grid; gap: 10px; margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--abc-line); list-style: none; }
.abc-review__items li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 14px; }
.abc-review__items img { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--abc-line-soft); border-radius: 8px; }
.abc-review__name { color: var(--abc-navy); line-height: 1.35; }
.abc-review__price { color: var(--abc-navy); font-weight: 700; white-space: nowrap; }
.abc-review__totals { display: grid; gap: 6px; margin: 0; }
.abc-review__totals > div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.abc-review__totals dt { color: var(--abc-text); }
.abc-review__totals dd { margin: 0; color: var(--abc-navy); font-weight: 600; text-align: right; }
.abc-review__totals .is-discount dd { color: var(--abc-green); }
.abc-review__total { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--abc-line); }
.abc-review__total dt { color: var(--abc-navy) !important; font-size: 17px; font-weight: 700; }
.abc-review__total dd { font-size: 24px; font-weight: 800 !important; }

@media (min-width: 992px) {
  .abc-checkout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); align-items: start; gap: 28px; }
  .abc-checkout__summary { order: 0; position: sticky; top: 16px; }
  .abc-checkout__head h1 { font-size: 30px; }
  .abc-step__body { padding: 20px; }
  .abc-step__body--pay { padding: 0; }
  .abc-step__actions .abc-btn { width: auto; min-width: 220px; }
  .abc-summary-box > summary { pointer-events: none; }
  .abc-summary-box > summary .abc-icon, .abc-summary-box__total { display: none; }
}

/* Mientras WooCommerce recalcula: velo claro, sin bloquear la lectura. */
.woocommerce .blockUI.blockOverlay { background: rgba(255, 255, 255, .6) !important; }
.woocommerce .blockUI.blockOverlay::before { display: none; }

/* 14 · PEDIDO RECIBIDO (boceto 07) */
.abc-order-done { display: grid; gap: 16px; max-width: 720px; margin: 8px auto 0; }
.abc-confirm { display: grid; justify-items: center; gap: 12px; padding: 28px 18px; border: 1px solid var(--abc-line); border-radius: var(--abc-r-card); background: #fff; text-align: center; }
.abc-confirm h1 { margin: 0; font-size: 24px; }
.abc-confirm__lead { max-width: 560px; margin: 0; color: var(--abc-text); font-size: 16px; line-height: 1.6; }
.abc-confirm__lead .is-pending { color: var(--abc-amber-text); }
.abc-confirm__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--abc-green-soft); }
.abc-confirm__circle { stroke: #bbe5c8; stroke-width: 2; }
.abc-confirm__check { stroke: var(--abc-green); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: abc-draw .5s .25s ease forwards; }
.abc-confirm__summary { display: grid; gap: 0; width: min(100%, 380px); margin: 4px 0 0; padding: 6px 16px; border: 1px solid var(--abc-line); border-radius: var(--abc-r-btn); background: var(--abc-surface); text-align: left; }
.abc-confirm__summary > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; padding: 9px 0; border-bottom: 1px solid var(--abc-line-soft); font-size: 15px; }
.abc-confirm__summary > div:last-child { border-bottom: 0; }
.abc-confirm__summary dt { color: var(--abc-text); }
.abc-confirm__summary dd { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--abc-navy); }
.abc-confirm__summary dd.is-ok { color: var(--abc-green); font-weight: 800; }
.abc-confirm__summary dd.is-pending { color: var(--abc-amber-text); font-weight: 800; }
.abc-confirm.is-failed { justify-items: start; text-align: left; }

.abc-transfer { display: grid; gap: 12px; padding: 20px 18px; border: 1px solid var(--abc-line); border-radius: var(--abc-r-card); background: #fff; }
.abc-transfer h2 { margin: 0; font-size: 19px; }
.abc-transfer__ok { margin: 0; padding: 12px 14px; border-radius: var(--abc-r-btn); background: var(--abc-green-soft); color: var(--abc-green); font-weight: 700; animation: abc-fade-up .3s ease both; }
.abc-transfer__error { margin: 0; padding: 12px 14px; border-radius: var(--abc-r-btn); background: #fff6f5; color: var(--abc-red); font-weight: 700; }
.abc-receipt-form { display: grid; gap: 12px; }

.abc-confirm__help { display: grid; justify-items: center; gap: 10px; text-align: center; }
.abc-confirm__help p { margin: 0; color: var(--abc-text); }
.abc-confirm__help > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.abc-confirm__help .abc-btn { flex: 1 1 220px; max-width: 320px; }
.abc-confirm__details { border: 1px solid var(--abc-line); border-radius: var(--abc-r-card); background: #fff; }
.abc-confirm__details > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 16px; color: var(--abc-blue-text); font-weight: 700; list-style: none; cursor: pointer; }
.abc-confirm__details > summary::-webkit-details-marker { display: none; }
.abc-confirm__details[open] > summary .abc-icon { transform: rotate(180deg); }
.abc-confirm__details > :not(summary) { padding: 0 16px 16px; }
.abc-confirm__details > summary:focus-visible { outline-offset: -3px; border-radius: var(--abc-r-card); }

/* Detalle del pedido (pedido recibido y Mi cuenta): productos y totales como
   en el checkout; después, facturación y entrega. */
.woocommerce .abc-order-details, .woocommerce .abc-customer { margin: 0; }
.abc-order-details { display: grid; gap: 12px; }
.abc-order-details__title, .abc-customer h2 { margin: 0; color: var(--abc-navy); font-size: 15px; font-weight: 700; }
.abc-order-details .abc-review__items { margin: 0; }
.abc-review__items .abc-review__name a { color: var(--abc-navy); text-decoration: none; }
.abc-review__items .abc-review__name a:hover { color: var(--abc-blue-text); text-decoration: underline; }
.abc-review__note { grid-column: 1 / -1; color: var(--abc-muted); font-size: 13px; }
.abc-order-details .abc-review__totals dd { white-space: nowrap; }
.abc-order-details__pay { margin: 0; color: var(--abc-text); font-size: 14px; }
.abc-order-details__pay strong { color: var(--abc-navy); }
.abc-order-details__note { display: grid; gap: 2px; margin: 0; padding: 12px 14px; border-radius: var(--abc-r-btn); background: var(--abc-surface); font-size: 14px; }
.abc-order-details__note strong { color: var(--abc-navy); }
.abc-order-details__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.abc-customer { display: grid; gap: 12px; }
.abc-customer__block { display: grid; align-content: start; gap: 8px; padding: 14px; border: 1px solid var(--abc-line); border-radius: var(--abc-r-btn); background: var(--abc-surface); }
.woocommerce .abc-customer address { margin: 0; padding: 0; border: 0; border-radius: 0; color: var(--abc-text); font-size: 14px; font-style: normal; line-height: 1.5; }
.abc-customer address strong { color: var(--abc-navy); }
.abc-customer__contact { display: grid; gap: 2px; margin: 0; color: var(--abc-text); font-size: 14px; overflow-wrap: anywhere; }
.abc-customer__method { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--abc-navy); font-size: 14px; }
.abc-customer__method .abc-icon { flex: none; color: var(--abc-blue); }
.abc-customer__hint { margin: 0; color: var(--abc-muted); font-size: 13px; }
@media (min-width: 560px) {
  .abc-customer { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  .abc-confirm { padding: 36px 32px; }
  .abc-confirm h1 { font-size: 28px; }
}

/* 15 · AVISOS Y ANIMACIONES
   Todo se apaga con «reducir movimiento» (al final del archivo). */
.abc-toast { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 12px; width: min(440px, calc(100% - 32px)); padding: 10px 10px 10px 12px; border: 1px solid var(--abc-line); border-radius: var(--abc-r-card); background: #fff; color: var(--abc-navy); box-shadow: 0 16px 40px rgba(15, 23, 42, .18); opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1); }
.abc-toast.is-in { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.abc-toast img { width: 44px; height: 44px; flex: 0 0 44px; object-fit: contain; border-radius: 8px; }
.abc-toast p { flex: 1; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
@media (min-width: 768px) {
  .abc-toast { left: auto; right: 24px; bottom: 24px; transform: translateY(16px); }
  .abc-toast.is-in { transform: none; }
}

.abc-header__cart.is-bumped .abc-icon { animation: abc-bump .5s ease; }
.abc-header__cart.is-bumped .abc-header__cart-count { animation: abc-pop .4s ease; }
.abc-btn.is-loading, #place_order.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.abc-btn.is-loading::after, #place_order.is-loading::after { content: ""; position: absolute; inset: 0; width: 22px; height: 22px; margin: auto; border: 3px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: abc-spin .7s linear infinite; }
.abc-btn--outline.is-loading::after { border-color: rgba(6, 115, 211, .25); border-top-color: var(--abc-blue); }
ul.products li.abc-card .abc-card__cta .button.loading { position: relative; color: transparent; }
ul.products li.abc-card .abc-card__cta .button.loading .abc-icon { opacity: 0; }
ul.products li.abc-card .abc-card__cta .button.loading::after { content: ""; display: block !important; position: absolute; inset: 0; width: 20px; height: 20px; margin: auto; border: 3px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: abc-spin .7s linear infinite; }
ul.products li.abc-card .abc-card__cta .button.is-added, .abc-btn.is-added { border-color: var(--abc-green) !important; background: var(--abc-green) !important; color: #fff !important; animation: abc-pop .35s ease; }
.abc-line.is-removing { opacity: .4; transform: translateX(12px); transition: opacity .25s ease, transform .25s ease; }
.abc-summary__total dd.is-updated { animation: abc-flash .8s ease; }
.abc-confirm[data-abc-confirm] > * { animation: abc-fade-up .45s ease both; }
.abc-confirm[data-abc-confirm] > :nth-child(2) { animation-delay: .12s; }
.abc-confirm[data-abc-confirm] > :nth-child(3) { animation-delay: .2s; }
.abc-confirm[data-abc-confirm] > :nth-child(4) { animation-delay: .28s; }
.abc-confirm[data-abc-confirm] > .abc-confirm__icon { animation: abc-pop .5s cubic-bezier(.2, .8, .2, 1.2) both; }
.abc-dialog[open] { animation: abc-dialog-in .22s cubic-bezier(.2, .8, .2, 1); }
.abc-dialog[open]::backdrop { animation: abc-fade .2s ease; }

@keyframes abc-spin { to { transform: rotate(360deg); } }
@keyframes abc-pop { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes abc-bump { 0%, 100% { transform: none; } 30% { transform: translateY(-4px) rotate(-8deg); } 60% { transform: translateY(0) rotate(6deg); } }
@keyframes abc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes abc-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes abc-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes abc-draw { to { stroke-dashoffset: 0; } }
@keyframes abc-flash { 0% { color: var(--abc-green); } 100% { color: var(--abc-navy); } }
@keyframes abc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Páginas de cuenta y checkout */
.abc-page.is-commerce { padding-top: 16px; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { min-height: 48px; padding: 10px 12px; border: 1px solid var(--abc-input); border-radius: var(--abc-r-btn); font-size: 16px; }
.woocommerce button.button, .woocommerce a.button, .woocommerce input.button { border-radius: var(--abc-r-btn); }
.woocommerce button.button.alt, .woocommerce a.button.alt { background: var(--abc-blue); color: #fff; }
.woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover { background: var(--abc-blue-hover); }

@media (prefers-reduced-motion: reduce) {
  .abc-filters.is-open { animation: none; }
  .abc-location-tip { animation: none; }
  .abc-video__icon { transition: none; }
  .abc-filter > summary .abc-icon { transition: none; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
  .abc-confirm__check { stroke-dashoffset: 0; }
}