/*
 * MODULE AbsFrequentlyBoughtTogether (fork CMC) - 3.8.1
 * Diseño P62 «Flat cards» (variante de P61): la misma fila de tarjetas con «+» entre ellas, pie en una banda, puntos (las pestañas del núcleo) y flechas, pero cada tarjeta es UN contenedor
 * (.abs-p62-card) con la casilla, la etiqueta del descuento, la foto, el nombre, los selectores, el precio y el ahorro como hijos directos. Se carga SOLO cuando P62 es el diseño activo, después de abs-offers.css.
 * Este archivo trae el aspecto de FÁBRICA de las cinco opciones de «Personalizar» (AbsOfferP62): casilla arriba a la derecha, cinta diagonal izquierda, bloque verde de ahorro junto al precio, selectores en una franja
 * gris al pie y foto de 210 px (--abs-p62-ih del contenedor). Las demás variantes están en p62-v.css, que solo se carga cuando algún ajuste de lista no es el de fábrica (AbsOfferDesigns::designAssets).
 * Producto desmarcado: p62.js le deja el precio de pack, el tachado y las etiquetas (.is-pk); .abs-p62-v (etiqueta del % y ahorro) se ve solo con el pack completo con descuento o con .is-pk.
 * Todo bajo .abs-offers--p62; colores y radios con las variables --abs-* del núcleo. Mobile-first (< 576 px del bloque: rejilla 2 x 2); 576 px: pie en una fila; 720 px: una fila de tarjetas.
 * La foto es cuadrada y se acota al ancho de la tarjeta (100cqw): en móvil cabe aunque el ajuste sea de 240 px. Opción A: columnas = --abs-gx (con «Automático» 2 hasta 720 px y tantas como productos, hasta 4).
 */
.abs-offers--p62 { --abs-p62-bs: #eff6ff; --abs-p62-bd: #dbe7fb; --abs-p62-ih: 210px; padding: 10px 10px 12px; border: 1px solid var(--abs-p62-bd); border-radius: 14px; background: var(--abs-surface-2); }
@supports (color: color-mix(in srgb, red 8%, white)) { .abs-offers--p62 { --abs-p62-bs: color-mix(in srgb, var(--abs-primary) 8%, #fff); --abs-p62-bd: color-mix(in srgb, var(--abs-primary) 18%, #fff); } }
/* cabecera: título, «Pack N of M», aviso de deslizar, puntos (pestañas) y flechas */
.abs-offers--p62 .abs-p62-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0 0 6px; }
.abs-offers--p62 .abs-offers__title { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.2; }
.abs-offers--p62 .abs-p62-count { padding: 1px 9px; border: 1px solid var(--abs-p62-bd); border-radius: var(--abs-radius-pill, 999px); background: #fff; color: var(--abs-primary-hover); font-size: 12px; font-weight: 700; line-height: 20px; white-space: nowrap; }
.abs-offers--p62 .abs-p62-nav { display: flex; order: 1; gap: 2px; margin-left: auto; }
.abs-offers--p62 .abs-p62-sub { display: flex; order: 2; flex: 1 0 100%; align-items: center; min-width: 0; }
.abs-offers--p62 .abs-p62-hint { flex: 1; min-width: 0; overflow: hidden; color: var(--abs-muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.abs-offers--p62 .abs-p62-dots { display: flex; flex: none; }
.abs-offers--p62 .abs-p62-dot { position: relative; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; cursor: pointer; }
.abs-offers--p62 .abs-p62-dot::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 4px; background: #838b99; transition: width .2s, margin .2s, background .2s; }
.abs-offers--p62 .abs-p62-dot[aria-selected=true]::after { width: 20px; margin-left: -10px; background: var(--abs-primary); }
.abs-offers--p62 .abs-p62-arr { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--abs-line); border-radius: 50%; background: #fff; box-shadow: none; color: var(--abs-primary-hover); cursor: pointer; }
/* caja del pack */
.abs-offers--p62 .abs-p62-panel { --abs-p62-g: 8px; --abs-p62-px: 6px; }
.abs-offers--p62 .abs-offer { margin: 0; padding: 10px var(--abs-p62-px) 0; border-radius: 12px; }
.abs-offers--p62 .abs-offer__form { display: block; padding: 0; }
.abs-offers--p62 .abs-p62-slot { margin: 0 0 8px; }
.abs-offers--p62 .abs-badge.is-inline { margin: 0; }
.abs-offers--p62 .abs-badge[data-kind="pct"] { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* rejilla: 2 x 2 en móvil (1 con --abs-gx:1); los «+» son li::after (en el eje central en 2 columnas) */
.abs-offers--p62 .abs-items { --c: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abs-p62-g); margin: 0; padding: 0; }
.abs-offers--p62[data-abs-colmode="1"] .abs-items { grid-template-columns: minmax(0, 1fr); }
.abs-offers--p62 .abs-p62-cell { position: relative; display: flex; flex: none; align-items: stretch; min-width: 0; max-width: none; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.abs-offers--p62 .abs-p62-cell::after { content: "+"; content: "+" / ""; position: absolute; z-index: 3; top: 50%; right: calc(var(--abs-p62-g) / -2 - 10px); width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--abs-primary); box-shadow: 0 0 0 2px #fff; color: var(--abs-on-primary); font-size: 15px; font-weight: 800; line-height: 20px; text-align: center; pointer-events: none; }
.abs-offers--p62 .abs-p62-cell:nth-child(even)::after, .abs-offers--p62 .abs-p62-cell[data-pp="c"]::after { top: auto; right: auto; bottom: calc(var(--abs-p62-g) / -2 - 10px); left: calc(var(--abs-p62-g) / -2 - 10px); margin: 0; }
.abs-offers--p62 .abs-p62-cell[data-pp="b"]::after { top: auto; right: auto; bottom: calc(var(--abs-p62-g) / -2 - 10px); left: 50%; margin: 0 0 0 -10px; }
.abs-offers--p62 .abs-p62-cell[data-pp="r"]::after { top: 50%; right: calc(var(--abs-p62-g) / -2 - 10px); bottom: auto; left: auto; margin: -10px 0 0; }
.abs-offers--p62 .abs-p62-cell:last-child::after { display: none; }
/* la tarjeta: un contenedor de tamaño (cqw acota la foto al ancho disponible) con padding para la casilla de la esquina (--ct arriba, --cb abajo) */
.abs-offers--p62 .abs-p62-card { --it: calc(var(--ct, 44px) + var(--st, 0px)); --ih: min(var(--abs-p62-ih), 100cqw); --ex: calc((100cqw - var(--ih)) / 2); position: relative; container-type: inline-size; display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; padding: var(--ct, 44px) 12px var(--cb, 12px); overflow: hidden; border: 1px solid var(--abs-line); border-radius: 12px; background: #fff; }
.abs-offers--p62 .is-locked > .abs-p62-card { border-color: #93b4f5; border-color: color-mix(in srgb, var(--abs-primary) 45%, #fff); }
.abs-offers--p62 .is-off > .abs-p62-card { border-style: dashed; background: #f9fafb; }
/* casilla «In your pack» (o candado e «Included») en la esquina: arriba a la derecha de fábrica */
.abs-offers--p62 .abs-p62-k { position: absolute; z-index: 3; top: 0; right: 0; display: flex; align-items: center; gap: 7px; min-height: 36px; margin: 0; padding: 0 12px; border-radius: 0 0 0 10px; background: var(--abs-p62-bs); color: var(--abs-text, #111827); font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; }
.abs-offers--p62 .abs-p62-k .abs-item__cb { flex: none; width: 18px; height: 18px; margin: 0; }
.abs-offers--p62 .is-off .abs-p62-k { background: #f3f4f6; color: var(--abs-muted); }
.abs-offers--p62 .abs-p62-k.is-locked { justify-content: center; min-width: 44px; color: var(--abs-primary-hover); cursor: default; pointer-events: none; }
.abs-offers--p62 .is-locked .abs-item__cb { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* foto cuadrada, nombre en 2 líneas y precio (el que sigue al nombre empuja con margin-top:auto: las tarjetas con selectores al pie suben el precio) */
.abs-offers--p62 .abs-item__media { position: relative; display: var(--abs-d-thumb, block); align-self: center; flex: none; width: var(--ih, var(--abs-p62-ih)); max-width: 100%; min-height: 0; margin: 0; aspect-ratio: 1; }
.abs-offers--p62 .abs-item__media img { display: block; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 8px; object-fit: contain; }
.abs-offers--p62 .abs-p62-nm { -webkit-line-clamp: 2; min-height: 2.5em; margin: 0; padding: 0; font-size: 14px; font-weight: 700; line-height: 1.25; text-align: left; }
.abs-offers--p62 .abs-item__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: auto 0 0; font-size: 20px; font-weight: 800; line-height: 1.2; }
.abs-offers--p62 .abs-item__price :is(.abs-item__old, .abs-item__was) { margin: 0; font-size: 13px; font-weight: 400; }
.abs-offers--p62 .abs-item__price :is(.abs-item__old, .abs-item__now, .abs-item__was, .abs-item__pack) { white-space: nowrap; }
.abs-offers--p62 .abs-item__note { margin: 0; font-size: 12px; }
/* con selectores en franja (c5) en alguna tarjeta: el precio va pegado al nombre (de alto fijo) y la franja al pie, así el precio queda a la misma altura en todas */
.abs-offers--p62 .abs-items:has(.c-c5 select) .abs-item__price { margin-top: 0; }
.abs-offers--p62 .abs-items:has(.c-c5 select) .c-c5 .abs-item__attrs { margin-top: auto; }
/* clic en cualquier parte de la tarjeta = marcar o desmarcar «En tu pack» (el nombre es una etiqueta de la casilla y se estira sobre la tarjeta; no lleva a la ficha); selectores y casilla quedan por encima */
.abs-offers--p62 .abs-p62-nm::after { content: ""; position: absolute; inset: 0; cursor: pointer; }
.abs-offers--p62 .is-off :is(.abs-p62-nm, .abs-item__price, .abs-item__now) { color: var(--abs-muted); }
/* desmarcado con precio de pack (p62.js): tachado y precio de pack aunque la oferta ya no tenga descuento */
.abs-offers--p62 .is-off.is-pk .abs-onsale { display: revert; }
.abs-offers--p62 .is-off.is-pk :is(.abs-item__now, .abs-item__old) { display: none; }
.abs-offers--p62 .is-off .abs-item__pack { color: var(--abs-save); }
/* etiqueta del % y ahorro: solo con el pack completo con descuento o en un desmarcado que conserva su precio de pack */
.abs-offers--p62 .abs-offer:not([data-sale="1"]) .abs-item:not(.is-pk) .abs-p62-v, .abs-offers--p62 .abs-item.is-off:not(.is-pk) .abs-p62-v { display: none; }
.abs-offers--p62 .abs-p62-card .abs-p62-sv[hidden] { display: none; }
/* % de fábrica: cinta diagonal en la esquina izquierda (a3) */
.abs-offers--p62 .abs-p62-pc { position: absolute; z-index: 2; display: var(--abs-d-chip, block); box-sizing: border-box; background: var(--abs-save); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; pointer-events: none; }
.abs-offers--p62 .abs-p62-a3 { top: 28px; left: -48px; width: 170px; padding: 5px 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); font-size: 12px; text-align: center; transform: rotate(-45deg); }
/* ahorro de fábrica: bloque verde junto al precio (b5) */
.abs-offers--p62 .abs-p62-s5 { display: flex; flex-direction: column; align-items: center; align-self: flex-end; margin-left: auto; padding: 3px 10px; border-radius: 8px; background: #dcfce7; color: #166534; font-size: 15px; font-weight: 700; line-height: 1.1; }
.abs-offers--p62 .abs-p62-s5 small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
/* selectores de fábrica: franja gris al pie (c5) */
.abs-offers--p62 .abs-item__attrs { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; min-width: 0; margin: 0; position: relative; }
.abs-offers--p62 .c-c5 .abs-item__attrs { padding: 10px; border-radius: 8px; background: #eef2f9; }
.abs-offers--p62 .abs-item__sel { width: 100%; min-width: 0; min-height: 40px; padding: 0 26px 0 8px; border-color: #b8c3da; border-radius: 8px; font-size: 13px; background-position: right 8px center; }
/* pie en una banda: productos, ahorro, total y botón (en móvil: ahorro y total, y el botón debajo) */
.abs-offers--p62 .abs-p62-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px calc(var(--abs-p62-px) * -1) 0; padding: 10px var(--abs-p62-px); border-top: 1px solid var(--abs-p62-bd); background: var(--abs-p62-bs); }
.abs-offers--p62 .abs-p62-fl { display: contents; font-size: 14px; font-weight: 800; line-height: 1.2; }
.abs-offers--p62 .abs-p62-fl strong { display: none; }
.abs-offers--p62 .abs-p62-fl .abs-offer__hint { flex: 1 0 100%; margin: 0; font-size: 12.5px; font-weight: 400; line-height: 1.3; }
.abs-offers--p62 .abs-p62-ps { display: var(--abs-d-save, inline-block); order: 1; margin: 0; padding: 2px 10px; border-radius: var(--abs-radius-pill, 999px); background: #dcfce7; color: #166534; font-size: 12.5px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.abs-offers--p62 .abs-offer:has(.abs-badge[data-kind="amount"]) .abs-p62-ps { display: none; }
.abs-offers--p62 .abs-p62-tot { display: flex; order: 2; align-items: baseline; gap: 7px; margin-left: auto; white-space: nowrap; }
.abs-offers--p62 .abs-p62-tot .abs-offer__apart { margin: 0; font-size: 13px; }
.abs-offers--p62 .abs-offer__total-l { font-size: 13px; }
.abs-offers--p62 .abs-offer__total-v { font-size: 21px; line-height: 1.1; font-weight: 800; }
.abs-offers--p62 .abs-p62-go { order: 3; flex: 1 0 100%; width: auto; min-height: 48px; margin: 0; font-size: 14.5px; }
@container abs (max-width: 575px) { .abs-offers--p62 .abs-p62-cell:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@container (max-width: 119px) { .abs-offers--p62 .abs-p62-t { font-size: 0; } }
@container abs (min-width: 576px) {
    .abs-offers--p62 .abs-p62-panel { --abs-p62-px: 12px; --abs-p62-g: 18px; }
    .abs-offers--p62 .abs-offers__title { font-size: 18px; }
    .abs-offers--p62 .abs-p62-hd { gap: 0 10px; margin-bottom: 8px; }
    .abs-offers--p62 .abs-p62-nav { order: 0; gap: 6px; }
    .abs-offers--p62 .abs-p62-sub { display: contents; }
    .abs-offers--p62 .abs-p62-dot { width: 24px; height: 36px; }
    .abs-offers--p62 .abs-p62-tot .abs-offer__apart-l { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .abs-offers--p62 .abs-p62-hint { font-size: 13px; }
    .abs-offers--p62 .abs-items { grid-template-columns: repeat(var(--abs-gx, var(--c)), minmax(0, var(--w, 1fr))); justify-content: center; }
    .abs-offers--p62 .abs-p62-foot { flex-wrap: nowrap; gap: 14px; padding: 8px var(--abs-p62-px); }
    .abs-offers--p62 .abs-p62-fl { display: block; flex: 1; min-width: 0; }
    .abs-offers--p62 .abs-p62-fl strong { display: inline; }
    .abs-offers--p62 .abs-p62-fl .abs-offer__hint { margin-top: 2px; }
    .abs-offers--p62 :is(.abs-p62-ps, .abs-p62-tot, .abs-p62-go) { order: 0; }
    .abs-offers--p62 .abs-p62-tot { margin-left: 0; }
    .abs-offers--p62 .abs-p62-go { flex: none; min-width: 236px; min-height: 42px; padding: 0 18px; }
}
@container abs (min-width: 720px) {
    .abs-offers--p62 .abs-p62-panel { --abs-p62-g: 24px; }
    .abs-offers--p62 .abs-items { --c: 4; }
    .abs-offers--p62 .abs-items[data-n="2"] { --c: 2; --w: 250px; }
    .abs-offers--p62 .abs-items[data-n="3"] { --c: 3; --w: 250px; }
}
@media (max-width: 480px) { .abs-offers--p62 { padding: 8px 6px 10px; } }
@media (prefers-reduced-motion: reduce) { .abs-offers--p62 .abs-p62-dot::after { transition: none; } }
@media (forced-colors: active) { .abs-offers--p62 :is(.abs-p62-k, .abs-p62-arr) { border: 1px solid ButtonText; } .abs-offers--p62 .abs-p62-dot[aria-selected=true]::after { forced-color-adjust: none; background-color: Highlight; } }