/* EstilosCMC 1.17.0 — Tarjeta de producto: hoja COMÚN (se carga antes de la del estilo, solo con un estilo de tarjeta activo).
   DOM real del tema licencias2026 (article.product-miniature.js-product-miniature.tl-card): .thumbnail-container > a.product-thumbnail
   (img.product-thumbnail-first / -second) + ul.product-flags; .product-description > .product-title, .product-rating,
   .product-price-and-shipping (a.product-price, span.regular-price, span.ecmc-pc-stock del módulo), .product-add-cart (.input-qty,
   .btn-product-list).
   Especificidad: base = body.pc-on .js-product-miniature.tl-card (0,4,1); cada estilo = html body.pc-<id>.pc-on … (0,5,2), así el estilo
   gana aunque esta hoja llegue después (vista previa en vivo). !important solo donde el tema lo usa: padding de .product-description,
   color de .product-price, colores de .btn-primary, display de .input-qty, borde de .form-control, color de la bandera de oferta, outline. */

body.pc-on { --pc-ac: #2563EB; --pc-rk: 1; --pc-sk: 1; --pc-ar: 1/1; }

body.pc-on .js-product-miniature.tl-card {
  --ac: var(--pc-ac, #2563EB);
  --ac-d: color-mix(in srgb, var(--ac) 80%, #000);
  --ac-b: color-mix(in srgb, var(--ac) 58%, #fff);
  --ac-m: color-mix(in srgb, var(--ac) 28%, #fff);
  --ac-l: color-mix(in srgb, var(--ac) 10%, #fff);
  --ac-ll: color-mix(in srgb, var(--ac) 5%, #fff);
  --rk: var(--pc-rk, 1);
  --sk: var(--pc-sk, 1);
  --ar: var(--pc-ar, 1/1);
  --sh-s: 0 1px 2px rgba(17, 24, 39, calc(.06 * var(--sk)));
  --sh-m: 0 6px 18px -4px rgba(17, 24, 39, calc(.15 * var(--sk)));
  --sh-l: 0 18px 36px -10px rgba(17, 24, 39, calc(.28 * var(--sk)));
  --bg: #fff; --fg: #111827; --tt: #1f2937; --mut: #6b7280; --bd: #e5e7eb; --mbg: #fff; --pc: var(--ac);
  --ok: #16a34a; --lo: #f59e0b; --no: #dc2626; --okt: #15803d; --lot: #b45309; --not: #b91c1c;
  --btn-bg: var(--ac); --btn-fg: #fff; --btn-bd: var(--ac); --btn-r: calc(10px * var(--rk));
  --r: calc(16px * var(--rk)); --sh: var(--sh-s); --pad: 14px;
  --flag-bg: #fef2f2; --flag-fg: #b91c1c; --flag-bd: rgba(220, 38, 38, .25);
  position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; padding: 0;
  background: var(--bg); color: var(--fg); border: 1px solid var(--bd); border-radius: var(--r);
  box-shadow: var(--sh); overflow: hidden; text-align: left;
  font: 400 13px/1.35 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  transition: box-shadow .2s, transform .2s;
}

/* ---- imagen ---- */
body.pc-on .js-product-miniature.tl-card .thumbnail-container { position: relative; flex: none; background: var(--mbg); border-bottom: 0; }
body.pc-on .js-product-miniature.tl-card .product-thumbnail { display: block; position: relative; overflow: hidden; }
body.pc-on .js-product-miniature.tl-card .product-thumbnail img.product-thumbnail-first,
body.pc-on .js-product-miniature.tl-card .product-thumbnail img.product-thumbnail-second {
  aspect-ratio: var(--ar); width: 100%; height: auto; object-fit: cover; padding: 0; transition: opacity .25s, filter .25s;
}
body.pc-on.pc-nohov .js-product-miniature.tl-card .product-thumbnail img.product-thumbnail-second { display: none !important; }
/* Agotado: apagada pero SÓLIDA. Nada de opacity: la 2.ª imagen (hover) es absolute sobre la 1.ª y con opacity<1 se transparentaba y fantasmeaba. El hover/transición de opacity del tema queda intacto. */
body.pc-on .js-product-miniature.tl-card:has(.ecmc-pc-stock.is-out) .product-thumbnail img { filter: grayscale(.85) contrast(.6) brightness(1.25); }

/* ---- banderas («¡En oferta!», «Nuevo») ---- */
body.pc-on .js-product-miniature.tl-card .product-flags {
  position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin: 0; padding: 0;
}
body.pc-on .js-product-miniature.tl-card .product-flags li.product-flag {
  display: inline-block; margin: 0; font: 700 11.5px/1 Inter, system-ui, sans-serif; padding: 5px 9px; border-radius: 999px;
  border: 1px solid var(--bd); text-transform: none;
}
body.pc-on .js-product-miniature.tl-card .product-flags li.product-flag.tl-badge--danger {
  background: var(--flag-bg); color: var(--flag-fg) !important; border-color: var(--flag-bd);
}
body.pc-on.pc-noflags .js-product-miniature.tl-card .product-flags { display: none !important; }

/* ---- cuerpo ---- */
body.pc-on .js-product-miniature.tl-card .product-description {
  display: flex; flex-direction: column; gap: 9px; padding: var(--pad) !important; flex: 1 1 auto; min-width: 0; text-align: left;
  container: pcbody / inline-size;
}
body.pc-on .js-product-miniature.tl-card .product-rating:not(:has(*)) { display: none; }
body.pc-on .js-product-miniature.tl-card .product-title { margin: 0; min-height: 2.6em; font: 600 13.5px/1.3 Inter, system-ui, sans-serif; text-align: left; }
body.pc-on .js-product-miniature.tl-card .product-title a {
  color: var(--tt); font: inherit; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- precio, precio anterior y estado de stock (1.19.1): fila flexible que ENVUELVE. El estado de stock va al lado del precio (extremo derecho)
   cuando cabe; si el precio es largo (COP, USD, MXN…) y no cabe, el estado pasa a su propia línea DEBAJO del precio (alineado a la derecha) en vez de
   solaparlo. El precio anterior (tachado) ocupa siempre su línea. «Cabe» lo decide el navegador con el ancho real del texto (flex-wrap), sin JS.
   Antes (1.17.0-1.19.0) era una rejilla «precio | estado»: la columna del estado podía encogerse a 0 y el texto se montaba sobre el precio. ---- */
body.pc-on .js-product-miniature.tl-card .product-price-and-shipping {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 6px; row-gap: 2px; margin-top: auto; padding: 3px 0 0; container: pcprice / inline-size; text-align: left;
}
body.pc-on .js-product-miniature.tl-card .product-price-and-shipping > * { order: 3; flex: 0 0 100%; }
body.pc-on .js-product-miniature.tl-card .product-price-and-shipping > .product-price { order: 1; flex: 0 0 auto; align-self: flex-start; margin-bottom: 2px; }
body.pc-on:not(.pc-noold) .js-product-miniature.tl-card .product-price-and-shipping:has(> .regular-price) > .product-price { margin-bottom: 0; align-self: flex-end; }
body.pc-on .js-product-miniature.tl-card .product-price-and-shipping > .regular-price { order: 3; flex: 0 0 100%; }
body.pc-on .js-product-miniature.tl-card .product-price {
  font: 700 21px/1.1 Inter, system-ui, sans-serif; letter-spacing: -.01em; color: var(--pc) !important; font-variant-numeric: tabular-nums; white-space: nowrap;
}
body.pc-on .js-product-miniature.tl-card .regular-price {
  font: 400 12.5px/1.2 Inter, system-ui, sans-serif; color: var(--mut); text-decoration: line-through; font-variant-numeric: tabular-nums; white-space: nowrap; margin: 0;
}
body.pc-on.pc-noold .js-product-miniature.tl-card .regular-price { display: none !important; }

body.pc-on .js-product-miniature.tl-card .product-price-and-shipping > .ecmc-pc-stock {
  order: 2; flex: 1000 1 auto; width: min-content; max-width: max-content; margin-left: auto;
}
body.pc-on .js-product-miniature.tl-card .ecmc-pc-stock {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; text-align: right;
  font: 600 12px/1.15 Inter, system-ui, sans-serif; color: var(--st);
}
body.pc-on .js-product-miniature.tl-card .ecmc-pc-stock.is-ok { --sc: var(--ok); --st: var(--okt); }
body.pc-on .js-product-miniature.tl-card .ecmc-pc-stock.is-low { --sc: var(--lo); --st: var(--lot); }
body.pc-on .js-product-miniature.tl-card .ecmc-pc-stock.is-out { --sc: var(--no); --st: var(--not); }
body.pc-on .js-product-miniature.tl-card .ecmc-pc-dot { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--sc); }
body.pc-on .js-product-miniature.tl-card .ecmc-pc-sl { min-width: 0; }
body.pc-on.pc-nostock .js-product-miniature.tl-card .ecmc-pc-stock { display: none !important; }
body.pc-on.pc-pulse .js-product-miniature.tl-card .ecmc-pc-stock:is(.is-ok, .is-low) .ecmc-pc-dot::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--sc); animation: pc-ping 1.9s ease-out infinite;
}
@keyframes pc-ping { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(2.6); opacity: 0; } }

/* Tarjetas angostas (móvil a 2 columnas, ~145 px útiles): precio algo menor, estado apilado punto-sobre-texto en su columna y, si no cabe,
   solo el punto. Especificidad alta a propósito ((0,7,2)): debe ganar también a los tamaños de precio de cada estilo. */
@container pcprice (max-width: 185px) {
  html body.pc-on[class] .js-product-miniature.tl-card.tl-card .product-price { font-size: 18px; }
  html body.pc-on[class] .js-product-miniature.tl-card.tl-card .product-price-and-shipping { column-gap: 6px; }
  html body.pc-on[class] .js-product-miniature.tl-card.tl-card .ecmc-pc-stock { flex-direction: column; align-items: flex-end; gap: 3px; font-size: 10.5px; line-height: 1.1; }
}
@container pcprice (max-width: 125px) {
  html body.pc-on[class] .js-product-miniature.tl-card.tl-card .ecmc-pc-sl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@container pcbody (max-width: 185px) {
  html body.pc-on[class] .js-product-miniature.tl-card.tl-card .btn-product-list { font-size: 12px; gap: 5px; padding: 0 6px !important; white-space: nowrap; }
}

/* ---- compra ---- */
body.pc-on .js-product-miniature.tl-card .product-add-cart { width: 100%; margin: 0; padding-top: 3px; }
body.pc-on .js-product-miniature.tl-card .product-add-cart form { margin: 0; }
body.pc-on .js-product-miniature.tl-card .input-group-add-cart { display: flex; flex-wrap: nowrap; gap: 6px; justify-content: stretch; align-items: stretch; }
body.pc-on .js-product-miniature.tl-card .btn-product-list {
  flex: 1 1 auto; width: 100%; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px;
  padding: 0 12px !important; border: 1px solid var(--btn-bd) !important; background: var(--btn-bg) !important; color: var(--btn-fg) !important;
  border-radius: var(--btn-r) !important; box-shadow: none; font: 700 13px/1 Inter, system-ui, sans-serif; text-transform: none;
  transition: filter .15s, background .15s, color .15s;
}
body.pc-on .js-product-miniature.tl-card .btn-product-list:hover { filter: brightness(.93); }
body.pc-on .js-product-miniature.tl-card .btn-product-list .bag-icon { font-size: 15px; }
body.pc-on .js-product-miniature.tl-card:has(.ecmc-pc-stock.is-out) { --btn-bg: #e5e7eb; --btn-fg: #4b5563; --btn-bd: #e5e7eb; }
body.pc-on.pc-nobtn .js-product-miniature.tl-card .product-add-cart { display: none !important; }
body.pc-on.pc-qty .js-product-miniature.tl-card .input-qty {
  display: block !important; flex: none; width: 44px; max-width: none; min-width: 0; height: auto; padding: 0 2px; text-align: center;
  font: 600 13px Inter, system-ui, sans-serif; color: var(--fg); background: transparent; border: 1px solid var(--bd) !important; border-radius: var(--btn-r);
}
/* Con selector de cantidad el botón tiene ~120 px: sin ícono, letra algo menor y, si no cabe, dos líneas (nunca recortado). */
html body.pc-on.pc-qty[class] .js-product-miniature.tl-card.tl-card .btn-product-list { font-size: 12px; padding: 4px 6px !important; white-space: normal; line-height: 1.15; }
html body.pc-on.pc-qty[class] .js-product-miniature.tl-card.tl-card .btn-product-list .bag-icon { display: none; }


/* ---- foco visible (el tema hace * { outline: none !important }) ---- */
body.pc-on .js-product-miniature.tl-card a:focus-visible,
body.pc-on .js-product-miniature.tl-card button:focus-visible,
body.pc-on .js-product-miniature.tl-card input:focus-visible { outline: 2px solid var(--ac-d) !important; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  body.pc-on .js-product-miniature.tl-card, body.pc-on .js-product-miniature.tl-card * { transition: none !important; }
  body.pc-on .js-product-miniature.tl-card .ecmc-pc-dot::before { animation: none !important; }
}