/*
 * MODULE AbsFrequentlyBoughtTogether (fork CMC) - 3.4.0 (2.12.0)
 * Front multi-oferta (diseños D1, D2, D3, D6, D9 y la base de los P01…P40). Solo se carga con ABS_MULTIOFFER_ENABLED = 1 y un diseño distinto de D0.
 * - Variables --abs-*: heredan del tema si define --cmc-* (con respaldo) y el JS puede adoptar el color del botón «Añadir al carrito».
 * - Mobile-first: la base es la variante móvil (< 576 px de ANCHO DEL BLOQUE, container query); sin !important.
 * - 3.6.0: opciones A-D (columnas, principal incluido, precio en el pack, insignia) en un bloque propio, activadas solo por atributos nuevos.
 * - Contrastes: texto >= 4,5:1 (blanco sobre #2563eb = 5,2; #b91c1c sobre blanco = 6,5; #4b5563 sobre blanco = 7,6), controles >= 3:1.
 */
.abs-offers {
    --abs-primary: var(--cmc-primary, #2563eb);
    --abs-primary-hover: var(--cmc-primary-hover, #1d4ed8);
    --abs-on-primary: #fff;
    --abs-focus: var(--cmc-focus, #1d4ed8);
    --abs-save: #b91c1c;
    --abs-muted: #4b5563;
    --abs-surface: #fff;
    --abs-surface-2: #f8fafc;
    --abs-line: #d5dde8;
    --abs-control: #6b7280;
    --abs-radius: var(--cmc-radius, 16px);
    --abs-radius-btn: 10px;
    /* 3.1.0: el panel «Estilo» puede redefinir estas variables (bloque <style id="abs-style">); sin él, el aspecto es el de siempre */
    container: abs / inline-size;
    margin: 24px 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--abs-text, inherit);
    text-align: left;
}
.abs-offers *, .abs-offers *::before, .abs-offers *::after { box-sizing: border-box; }
.abs-offers [hidden] { display: none; }
.abs-offers :focus-visible { outline: 2px solid var(--abs-focus); outline-offset: 2px; }
.abs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.abs-offers .abs-offers__title { margin: 0 0 12px; color: inherit; font-size: 20px; line-height: 1.25; font-weight: 700; }

/* ---------- Oferta (tarjeta) ---------- */
.abs-offer { margin: 0 0 calc(16px * var(--abs-dens, 1)); background: var(--abs-surface); border: 1px solid var(--abs-line); border-radius: var(--abs-radius); box-shadow: var(--abs-shadow, none); overflow: hidden; }
.abs-offer__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(10px * var(--abs-dens, 1)) calc(14px * var(--abs-dens, 1)); border-bottom: 1px solid var(--abs-line); }
.abs-offers .abs-offer__title { display: var(--abs-d-title, block); margin: 0; color: inherit; font-size: 16px; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; text-transform: none; }
.abs-chip { display: var(--abs-d-chip, inline-block); flex: 0 0 auto; padding: 2px 8px; border-radius: var(--abs-radius-pill, 999px); background: var(--abs-save); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.abs-offer__form { margin: 0; padding: calc(4px * var(--abs-dens, 1)) calc(14px * var(--abs-dens, 1)) calc(12px * var(--abs-dens, 1)); }
.abs-offer:not([data-sale="1"]) .abs-onsale { display: none; }
/* 2.14.0 etiqueta honesta (ABS_DISCOUNT_LABEL_STRICT): sin pack completo no hay insignia de ahorro y se explica cómo ahorrar */
.abs-offer[data-strict="1"]:not([data-sale="1"]) .abs-chip, .abs-offer[data-strict="1"]:not([data-sale="1"]) .abs-item__badge, .abs-tab[data-strict="1"]:not([data-sale="1"]) .abs-chip { display: none; }
.abs-offer__act .abs-offer__hint { grid-area: sale; }
.abs-offer__hint { margin: 0; color: var(--abs-save); font-size: 14px; font-weight: 600; }
.abs-offer:not([data-nudge="1"]) .abs-offer__hint { display: none; }
/* 3.6.1 mínimo de acompañantes: el aviso ocupa su propia fila bajo el ahorro (en el diseño base la celda «sale» es del bloque de ahorro, que ahora puede verse a la vez) */
.abs-offer[data-abs-minx] .abs-offer__act { grid-template-areas: "total btn" "sale btn" "hint btn"; }
.abs-offer[data-abs-minx] .abs-offer__act .abs-offer__hint { grid-area: hint; font-size: 13px; line-height: 1.35; }
.abs-offer__hint[data-state="keep"], .abs-offer__hint[data-state="none"] { color: var(--abs-muted); font-weight: 400; }

/* ---------- Productos ---------- */
.abs-items { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.abs-plus { display: none; }
.abs-item { position: relative; display: grid; grid-template-columns: var(--abs-cols, 44px calc(56px * var(--abs-thumb-k, 1)) minmax(0, 1fr)); align-items: center; min-height: calc(64px * var(--abs-dens, 1)); padding: calc(3px * var(--abs-dens, 1)) 0; }
.abs-item + .abs-item { border-top: 1px solid var(--abs-line); }
.abs-item__tap { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; cursor: pointer; }
.abs-item__cb { width: 22px; height: 22px; margin: 0; accent-color: var(--abs-primary); cursor: pointer; }
.abs-item__cb:disabled { cursor: not-allowed; }
.abs-item__media { position: relative; display: var(--abs-d-thumb, block); width: calc(56px * var(--abs-thumb-k, 1)); }
.abs-item__media img { display: block; width: calc(56px * var(--abs-thumb-k, 1)); height: auto; aspect-ratio: 98 / 127; object-fit: contain; border-radius: 6px; background: #fff; }
.abs-item__x { position: absolute; right: -2px; bottom: 0; padding: 0 5px; border-radius: 6px; background: #111827; color: #fff; font-size: 12px; font-weight: 700; }
.abs-item__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; min-width: 0; padding-left: 10px; }
.abs-item__name { grid-column: 1 / -1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 24px; padding: 2px 0; font-weight: 600; line-height: 1.3; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.abs-item__name:hover { text-decoration: underline; }
.abs-item__this { font-weight: 400; color: var(--abs-muted); }
.abs-item__attrs { grid-column: 1; grid-row: 2; margin-top: 2px; min-width: 0; }
.has-sel .abs-item__price { grid-column: 2; grid-row: 2; justify-self: end; }
.abs-item__price { grid-column: 1 / -1; }
.abs-item__note { grid-column: 1 / -1; }
.abs-item__sel { display: block; width: 100%; max-width: 100%; min-height: 44px; padding: 6px 30px 6px 10px; border: 1px solid var(--abs-control); border-radius: 8px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; color: inherit; font: inherit; font-size: 14px; line-height: 1.3; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; }
.abs-item__price { margin: 2px 0 0; font-weight: 700; }
.abs-item__old { display: var(--abs-d-old, inline); margin-right: 4px; color: var(--abs-muted); font-weight: 400; font-size: 13px; }
.abs-item__qty { color: var(--abs-muted); font-weight: 400; }
.abs-item__note { margin: 2px 0 0; font-size: 13px; color: var(--abs-muted); }
.abs-item__note .abs_sred { color: #b91c1c; font-weight: 600; }
.abs-item.is-off .abs-item__media img, .abs-strip__i.is-off img { filter: grayscale(1); opacity: .55; }
.abs-item.is-na { opacity: 1; }
.abs-item.is-na .abs-item__name { color: var(--abs-muted); }

/* ---------- Total y botón ---------- */
.abs-offer__act { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "total btn" "sale btn"; align-items: center; gap: 2px 12px; margin-top: calc(6px * var(--abs-dens, 1)); padding-top: calc(8px * var(--abs-dens, 1)); border-top: 1px dashed var(--abs-line); }
.abs-offer__sale { grid-area: sale; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.abs-offer__apart, .abs-offer__save, .abs-offer__total { margin: 0; }
.abs-offer__apart { display: var(--abs-d-old, block); color: var(--abs-muted); font-size: 13px; }
.abs-offer__apart-l { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.abs-offer__save { display: var(--abs-d-save, block); color: var(--abs-save); font-size: 14px; font-weight: 600; }
.abs-offer__save b { font-weight: 700; }
.abs-offer__total { grid-area: total; display: var(--abs-d-total, flex); align-items: baseline; flex-wrap: wrap; gap: 0 6px; }
.abs-offer__total-l { color: var(--abs-muted); font-size: 13px; }
.abs-offer__total-v { font-size: 21px; line-height: 1.2; font-weight: 800; }
.abs-offer__act .abs-offer__btn { grid-area: btn; }
.abs-offer__btn { align-self: stretch; width: 100%; min-height: 48px; margin: 0; padding: 10px 18px; border: 0; border-radius: var(--abs-radius-btn); background: var(--abs-primary); color: var(--abs-on-primary); font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center; box-shadow: var(--abs-btn-shadow, none); cursor: pointer; }
.abs-offer__btn:hover { background: var(--abs-primary-hover); }
.abs-offer__btn:disabled { background: #6b7280; color: #fff; cursor: not-allowed; }
.abs-offer__btn.is-busy { cursor: progress; }
.abs-offer__btn.is-busy [data-abs-cta]::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -1px; animation: abs-spin .7s linear infinite; }
.abs-offer__btn.is-done { background: #166534; }
.abs-offer__msg { margin: 0; }
.abs-offer__msg:not(.is-err) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.abs-offer__msg.is-err { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: 14px; }
/* 3.4.0: en D1, D2, D3, D6 y D9 (y en un diseño con data-abs-msg-float en el contenedor) el error se superpone arriba de la tarjeta, deja pasar los clics y el JS
   lo retira a los 7 s: el bloque no cambia de altura. Los diseños P que no lo piden lo pintan en flujo, como siempre. */
.abs-offer--d1, .abs-offer--d2, .abs-offer--d3, .abs-offer--d6, .abs-offer--d9, .abs-offers[data-abs-msg-float] .abs-offer { position: relative; }
.abs-offer--d1 .abs-offer__msg.is-err, .abs-offer--d2 .abs-offer__msg.is-err, .abs-offer--d3 .abs-offer__msg.is-err, .abs-offer--d6 .abs-offer__msg.is-err, .abs-offer--d9 .abs-offer__msg.is-err,
.abs-offers[data-abs-msg-float] .abs-offer__msg.is-err { position: absolute; top: 8px; right: 8px; left: 8px; z-index: 3; margin: 0; border: 1px solid #fecaca; box-shadow: 0 4px 14px rgba(17, 24, 39, .18); pointer-events: none; }
@keyframes abs-spin { to { transform: rotate(360deg); } }

/* ---------- D1 · Clásico multi (aspecto del bloque actual) ---------- */
.abs-offer--d1 { border-radius: var(--abs-radius); }
.abs-offer--d1 .abs-offer__head { justify-content: center; background: var(--abs-primary); color: var(--abs-on-primary); border: 0; text-align: center; }
.abs-offer--d1 .abs-offer__title { text-transform: uppercase; letter-spacing: .02em; }
.abs-offer--d1 .abs-chip { background: #fff; color: var(--abs-save); }
.abs-offer--d1 .abs-offer__form { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "strip" "act" "items" "msg"; gap: calc(6px * var(--abs-dens, 1)); padding: calc(10px * var(--abs-dens, 1)) calc(14px * var(--abs-dens, 1)) calc(12px * var(--abs-dens, 1)); }
.abs-strip { grid-area: strip; display: var(--abs-d-thumb, flex); align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; }
.abs-strip__i { display: block; padding: 3px; border: 1px solid var(--abs-line); border-radius: 10px; background: var(--abs-inner, #fff); }
.abs-strip__i img { display: block; width: calc(44px * var(--abs-thumb-k, 1)); height: auto; aspect-ratio: 236 / 305; object-fit: contain; }
.abs-strip .abs-plus { display: block; font-size: 22px; color: var(--abs-muted); }
.abs-offer--d1 .abs-items { grid-area: items; }
.abs-offer--d1 .abs-offer__act { grid-area: act; margin: 0; padding: 0; border: 0; }
.abs-offer--d1 .abs-offer__msg { grid-area: msg; }
.abs-offer--d1 .abs-item { grid-template-columns: 44px minmax(0, 1fr); }
.abs-offer--d1 .abs-item__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding-left: 0; }
.abs-offer--d1 .abs-item__name { grid-column: 1; grid-row: 1; }
.abs-offer--d1 .abs-item__attrs { grid-column: 1 / -1; grid-row: 2; }
.abs-offer--d1 .abs-item__note { grid-column: 1 / -1; grid-row: 3; }
.abs-offer--d1 .abs-item__price, .abs-offer--d1 .has-sel .abs-item__price { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; }
.abs-offer--d1 .abs-items .abs-plus, .abs-offer--d9 .abs-items .abs-plus { display: none; }

/* ---------- D2 / D3 · Filas apiladas (y tarjeta de las pestañas) ---------- */
/* base móvil ya definida arriba: lista vertical de productos y total + botón debajo */

/* ---------- D6 · PBP mejorado ---------- */
.abs-offer--d6 .abs-offer__head { background: var(--abs-primary); color: var(--abs-on-primary); border: 0; }
.abs-offer--d6 .abs-chip { background: #fff; color: var(--abs-save); }
.abs-offer--d6 .abs-item { grid-template-columns: var(--abs-cols, 44px calc(72px * var(--abs-thumb-k, 1)) minmax(0, 1fr)); }
.abs-offer--d6 .abs-item__media, .abs-offer--d6 .abs-item__media img { width: calc(72px * var(--abs-thumb-k, 1)); }
.abs-offer--d6 .abs-item__name { -webkit-line-clamp: unset; display: block; }
.abs-offer--d6 .has-sel .abs-item__attrs { grid-column: 1 / -1; }
.abs-offer--d6 .has-sel .abs-item__price { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
.abs-item__badge { position: absolute; display: var(--abs-d-chip, block); left: 0; top: 0; padding: 1px 6px; border-radius: 6px 0 6px 0; background: var(--abs-save); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.5; }

/* ---------- D9 · Compacto ---------- */
.abs-offer--d9 { border-radius: var(--abs-radius-in, 12px); }
.abs-offer--d9 .abs-offer__head { padding: calc(8px * var(--abs-dens, 1)) calc(12px * var(--abs-dens, 1)); }
.abs-offer--d9 .abs-offer__title { font-size: 15px; }
.abs-offer--d9 .abs-offer__form { padding: calc(4px * var(--abs-dens, 1)) calc(12px * var(--abs-dens, 1)) calc(12px * var(--abs-dens, 1)); }
.abs-offer--d9 .abs-item { grid-template-columns: 44px minmax(0, 1fr); min-height: 48px; }
.abs-offer--d9 .abs-item__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding-left: 0; }
.abs-offer--d9 .abs-item__name { -webkit-line-clamp: 2; font-weight: 500; }
.abs-offer--d9 .abs-item__name { grid-column: 1; grid-row: 1; }
.abs-offer--d9 .abs-item__price, .abs-offer--d9 .has-sel .abs-item__price { margin: 0; grid-column: 2; grid-row: 1; justify-self: end; }
.abs-offer--d9 .abs-item__attrs { grid-column: 1 / -1; grid-row: 2; }
.abs-offer--d9 .abs-item__note { grid-column: 1 / -1; grid-row: 3; }
.abs-offer--d9 .abs-offer__act { margin-top: 4px; }

/* ---------- D3 · Pestañas con nombre (acordeón en móvil) ---------- */
/* 3.4.0: móvil = acordeón con tres columnas fijas por fila (nombre · porcentaje · flecha), así el porcentaje y la flecha caen siempre en la misma vertical;
   escritorio = control segmentado centrado de N columnas IGUALES (mismo ancho y alto, texto y porcentaje centrados), ver el bloque @container de abajo. */
.abs-tabs { display: flex; flex-direction: column; }
.abs-tabs__list { display: contents; }
.abs-tab { order: calc(var(--abs-i) * 2); display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 8px; width: 100%; min-height: 52px; margin: 0 0 8px; padding: 8px 14px; border: 1px solid var(--abs-control); border-radius: var(--abs-radius-in, 12px); background: var(--abs-inner, #fff); color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.abs-tab[aria-selected="true"], .abs-tab[aria-expanded="true"] { background: var(--abs-primary); border-color: var(--abs-primary); color: var(--abs-on-primary); }
.abs-tab[aria-selected="true"] .abs-chip, .abs-tab[aria-expanded="true"] .abs-chip { background: #fff; color: var(--abs-save); }
.abs-tab__name { grid-column: 1; min-width: 0; overflow-wrap: anywhere; }
.abs-tab .abs-chip { grid-column: 2; }
.abs-tabs__panel { order: calc(var(--abs-i) * 2 + 1); }
.abs-tabs__panel .abs-offer { margin-bottom: 12px; }

/* ---------- >= 576 px de ancho del bloque ---------- */
@container abs (min-width: 576px) {
    .abs-offer__head { padding: calc(14px * var(--abs-dens, 1)) calc(20px * var(--abs-dens, 1)); }
    .abs-offer__title { font-size: 17px; }
    .abs-offer__form { padding: calc(16px * var(--abs-dens, 1)) calc(20px * var(--abs-dens, 1)) calc(20px * var(--abs-dens, 1)); display: grid; grid-template-columns: minmax(0, 1fr) 250px; column-gap: 24px; align-items: center; }
    .abs-items { flex-direction: row; align-items: stretch; flex-wrap: wrap; gap: 8px; }
    .abs-plus { display: flex; align-items: center; font-size: 24px; color: var(--abs-muted); }
    .abs-offer--d1 .abs-items .abs-plus, .abs-offer--d9 .abs-items .abs-plus { display: none; }
    .abs-item + .abs-item { border-top: 0; }
    .abs-item { flex: 1 1 150px; max-width: 220px; display: flex; flex-direction: column; align-items: center; padding: calc(12px * var(--abs-dens, 1)) calc(10px * var(--abs-dens, 1)) calc(10px * var(--abs-dens, 1)); border: 1px solid var(--abs-line); border-radius: var(--abs-radius-in, 12px); background: var(--abs-inner, #fff); text-align: center; }
    .abs-item + .abs-item { border-top: 1px solid var(--abs-line); }
    .abs-item.is-off { border-style: dashed; }
    /* 3.4.0: esquina de la casilla en las tarjetas; un diseño que la quiera a la derecha basta con --abs-tap-r y --abs-tap-l: auto (sin anular `left`) */
    .abs-item__tap { position: absolute; top: var(--abs-tap-t, 2px); left: var(--abs-tap-l, 2px); right: var(--abs-tap-r, auto); z-index: 1; }
    .abs-item__media { width: calc(98px * var(--abs-thumb-k, 1)); margin: 0 auto 8px; }
    .abs-item__media img { width: calc(98px * var(--abs-thumb-k, 1)); }
    .abs-item__body { display: block; width: 100%; padding-left: 0; }
    .abs-item__name { text-align: center; -webkit-line-clamp: 3; }
    .abs-item__sel { text-align: left; }
    .abs-offer__act { grid-column: 2; grid-template-columns: 1fr; grid-template-areas: "sale" "total" "btn"; justify-items: start; gap: 4px; margin: 0; padding: 0 0 0 24px; border-top: 0; border-left: 1px solid var(--abs-line); }
    .abs-offer__sale { flex-direction: column; gap: 2px; }
    .abs-offer[data-abs-minx] .abs-offer__act { grid-template-areas: "sale" "hint" "total" "btn"; }
    .abs-offer__apart { font-size: 14px; }
    .abs-offer__apart-l { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
    .abs-offer__total { margin-top: 2px; }
    .abs-offer__btn { align-self: auto; margin-top: 4px; }
    .abs-offer__msg { grid-column: 1 / -1; }
    .abs-offer__total-v { font-size: 26px; }

    .abs-offer--d1 .abs-offer__form { grid-template-columns: minmax(0, 1fr) 250px; grid-template-areas: "strip act" "items items" "msg msg"; gap: 12px 24px; align-items: center; }
    .abs-offer--d1 .abs-offer__act { padding: 0; border: 0; }
    .abs-strip { justify-content: flex-start; }
    .abs-strip__i img { width: calc(96px * var(--abs-thumb-k, 1)); }
    .abs-offer--d1 .abs-items { flex-direction: column; flex-wrap: nowrap; gap: 0; }
    .abs-offer--d1 .abs-item { flex: none; max-width: none; display: grid; grid-template-columns: 44px minmax(0, 1fr); border: 0; border-top: 1px solid var(--abs-line); border-radius: 0; padding: 4px 0; text-align: left; }
    .abs-offer--d1 .abs-item:first-child { border-top: 0; }
    .abs-offer--d1 .abs-item__tap { position: static; }
    .abs-offer--d1 .abs-item__name { text-align: left; }
    .abs-offer--d1 .abs-item__attrs { max-width: 320px; }

    .abs-offer--d6 .abs-items { gap: 0; flex-wrap: nowrap; }
    .abs-offer--d6 .abs-plus { padding: 0 8px; }
    .abs-offer--d6 .abs-item { flex: 1 1 0; max-width: none; min-width: 0; }
    .abs-offer--d6 .abs-item__tap { left: auto; right: 2px; }
    .abs-offer--d6 .abs-item__media { width: calc(140px * var(--abs-thumb-k, 1)); }
    .abs-offer--d6 .abs-item__media img { width: calc(140px * var(--abs-thumb-k, 1)); }
    .abs-item__badge { font-size: 13px; padding: 2px 8px; }

    .abs-offer--d9 .abs-offer__form { display: block; padding: 4px 16px 14px; }
    .abs-offer--d9 .abs-items { flex-direction: column; flex-wrap: nowrap; gap: 0; }
    .abs-offer--d9 .abs-item { flex: none; max-width: none; display: grid; grid-template-columns: 44px minmax(0, 1fr); border: 0; border-top: 1px solid var(--abs-line); border-radius: 0; padding: 2px 0; text-align: left; }
    .abs-offer--d9 .abs-item:first-child { border-top: 0; }
    .abs-offer--d9 .abs-item__tap { position: static; }
    .abs-offer--d9 .abs-item__name { text-align: left; }
    .abs-offer--d9 .abs-offer__act { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding: 8px 0 0; border-left: 0; border-top: 1px dashed var(--abs-line); margin-top: 4px; }
    .abs-offer--d9 .abs-offer__total { grid-column: auto; }
    .abs-offer--d9 .abs-offer__act .abs-offer__hint { flex: 1 0 100%; order: 3; }
    .abs-offer--d9 .abs-offer__btn { width: auto; min-width: 220px; margin-top: 0; }

    /* Pestañas: control segmentado centrado (N columnas iguales, de 340 px como máximo) y el panel debajo */
    .abs-tabs__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 340px); gap: 1px; width: fit-content; max-width: 100%; margin: 0 auto 16px; overflow: hidden; border: 1px solid var(--abs-control); border-radius: var(--abs-radius-in, 12px); background: var(--abs-line); }
    .abs-tab { order: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 56px; margin: 0; padding: 10px 14px; border: 0; border-radius: 0; text-align: center; }
    .abs-tab:focus-visible { outline-offset: -4px; }
    .abs-tab[aria-selected="true"]:focus-visible { outline-color: var(--abs-on-primary); }
    .abs-tab__name { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; } /* una línea con puntos suspensivos (el nombre entero va en el title): todas las pestañas con la misma altura y el porcentaje siempre en la misma fila */
    .abs-tab .abs-chip { grid-column: auto; }
    .abs-tabs__panel { order: 0; }
}

/* ---------- 3.6.0 · Opciones del bloque «Completa tu compra» (A columnas, B principal incluido, C precio en el pack, D insignia) ----------
   Todo se activa por atributos que solo existen con la opción encendida (data-abs-colmode/-cols/-lock/-pack, .abs-badge, .is-locked, data-pack): con las cuatro
   opciones apagadas ninguna de estas reglas coincide con nada y el aspecto es el de 3.5.0. */

/* A · Columnas de producto en D2, D3 y D6 (los diseños P las leen con --abs-gx en su propio CSS). --abs-gc = columnas de ESTA oferta; --abs-gx solo con 1/2/3 explícito. */
.abs-offer[data-abs-cols="1"] { --abs-gc: 1; }
.abs-offer[data-abs-cols="2"] { --abs-gc: 2; }
.abs-offer[data-abs-cols="3"] { --abs-gc: 3; }
.abs-offers[data-abs-colmode="1"] { --abs-gx: 1; }
.abs-offers[data-abs-colmode="2"] { --abs-gx: 2; }
.abs-offers[data-abs-colmode="3"] { --abs-gx: 3; }
@container abs (min-width: 576px) {
    .abs-offers[data-abs-colmode] .abs-offer--d2[data-abs-cols] .abs-items,
    .abs-offers[data-abs-colmode] .abs-offer--d3[data-abs-cols] .abs-items,
    .abs-offers[data-abs-colmode] .abs-offer--d6[data-abs-cols] .abs-items {
        display: grid; gap: 8px; grid-auto-rows: 1fr; align-items: stretch;
        /* N columnas iguales; si el hueco no da para N de 150 px como mínimo, baja el nº de columnas (nunca tarjetas más estrechas). El -.5px evita que un redondeo reste una columna */
        grid-template-columns: repeat(auto-fill, minmax(max(150px, calc((100% - (var(--abs-gc, 2) - 1) * 8px) / var(--abs-gc, 2) - .5px)), 1fr));
    }
    /* solo D2, D3 y D6: los diseños P aplican la opción A en su propio CSS (bajo .abs-offers--pNN, con --abs-gx) */
    .abs-offers[data-abs-colmode] :is(.abs-offer--d2, .abs-offer--d3, .abs-offer--d6)[data-abs-cols] .abs-items > .abs-plus { display: none; }
    .abs-offers[data-abs-colmode] :is(.abs-offer--d2, .abs-offer--d3, .abs-offer--d6)[data-abs-cols] .abs-item { flex: none; width: auto; max-width: none; display: flex; flex-direction: column; }
    .abs-offers[data-abs-colmode] :is(.abs-offer--d2, .abs-offer--d3, .abs-offer--d6)[data-abs-cols] .abs-item__body { flex: 1 1 auto; display: flex; flex-direction: column; }
    .abs-offers[data-abs-colmode] :is(.abs-offer--d2, .abs-offer--d3, .abs-offer--d6)[data-abs-cols] .abs-item__name { min-height: calc(2 * 1.3em); }
    .abs-offers[data-abs-colmode] :is(.abs-offer--d2, .abs-offer--d3, .abs-offer--d6)[data-abs-cols] .abs-item__price { margin-top: auto; padding-top: 4px; }
}

/* B · Producto de la ficha incluido y bloqueado: la casilla real sigue en el DOM (marcada, habilitada, se envía) pero no se ve ni recibe clic ni foco */
.abs-item__tap.is-locked { cursor: default; pointer-events: none; }
.abs-item__tap.is-locked .abs-item__cb { position: absolute; width: 1px; height: 1px; opacity: 0; }
.abs-item__lk { position: relative; display: block; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--abs-primary); color: var(--abs-on-primary); }
.abs-item__lk::after { content: ""; position: absolute; top: 4px; left: 8px; width: 5px; height: 10px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@container abs (min-width: 576px) {
    .abs-item__tap.is-locked[data-lk]:not(.abs-sr) { gap: 4px; width: auto; max-width: calc(100% - 4px); height: 28px; margin: 4px 0 0 4px; padding: 0 8px 0 3px; border-radius: 14px; background: var(--abs-surface-2); }
    .abs-item__tap.is-locked[data-lk]::after { content: attr(data-lk); overflow: hidden; color: var(--abs-muted); font-size: 12px; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
    .abs-item__tap.is-locked .abs-item__lk { width: 20px; height: 20px; }
    .abs-item__tap.is-locked .abs-item__lk::after { left: 7px; top: 3px; }
    .abs-offer--d1 .abs-item__tap.is-locked[data-lk]::after, .abs-offer--d9 .abs-item__tap.is-locked[data-lk]::after { content: none; }
    .abs-offer--d1 .abs-item__tap.is-locked[data-lk], .abs-offer--d9 .abs-item__tap.is-locked[data-lk] { width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 0; background: none; }
    .abs-offer--d1 .abs-item__tap.is-locked .abs-item__lk, .abs-offer--d9 .abs-item__tap.is-locked .abs-item__lk { width: 22px; height: 22px; }
    .abs-offer--d1 .abs-item__tap.is-locked .abs-item__lk::after, .abs-offer--d9 .abs-item__tap.is-locked .abs-item__lk::after { left: 8px; top: 4px; }
}

/* C · Precio dentro del pack: solo con el pack completo y con descuento (.abs-onsale ya se oculta sin data-sale="1"); entonces sustituye al precio y al tachado del catálogo */
.abs-item__was { margin-right: 4px; color: var(--abs-muted); font-size: 13px; font-weight: 400; text-decoration: line-through; }
.abs-item__pack { color: var(--abs-save); font-weight: 800; text-decoration: none; }
.abs-offer[data-sale="1"] .abs-item__price[data-pack="1"] .abs-item__now,
.abs-offer[data-sale="1"] .abs-item__price[data-pack="1"] .abs-item__old { display: none; }

/* D · Insignia de descuento (cinta o etiqueta) arriba a la derecha de la tarjeta de la oferta */
.abs-badge { position: absolute; top: 10px; right: 12px; z-index: 2; max-width: 62%; padding: 3px 10px; overflow: hidden; background: var(--abs-save); color: #fff; font-size: 13px; font-weight: 800; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.abs-badge b { font-weight: 800; }
.abs-badge--ribbon { right: 0; padding: 3px 12px 3px 18px; border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%); }
.abs-badge--tag { border-radius: var(--abs-radius-pill, 999px); }
.abs-badge.is-inline { position: static; display: inline-block; max-width: 100%; pointer-events: auto; }
.abs-badge[hidden] { display: none; }
.abs-offer[data-strict="1"]:not([data-sale="1"]) .abs-badge { display: none; }
/* la cabecera deja sitio a la insignia (que no tape el título); con importe («You save $ 3.267») la insignia es más ancha */
.abs-offers[data-abs-badge] .abs-offer__head { padding-right: 92px; }
.abs-offers[data-abs-badge] .abs-offer--d1 .abs-offer__head { padding-left: 92px; }
.abs-offers[data-abs-badge] .abs-offer:has(.abs-badge[data-kind="amount"]) .abs-offer__head { padding-right: 168px; }
.abs-offers[data-abs-badge] .abs-offer--d1:has(.abs-badge[data-kind="amount"]) .abs-offer__head { padding-left: 168px; }
@container abs (min-width: 576px) {
    .abs-offers[data-abs-badge] .abs-offer__head { padding-right: 100px; }
    .abs-offers[data-abs-badge] .abs-offer--d1 .abs-offer__head { padding-left: 100px; }
    .abs-offers[data-abs-badge] .abs-offer:has(.abs-badge[data-kind="amount"]) .abs-offer__head { padding-right: 176px; }
    .abs-offers[data-abs-badge] .abs-offer--d1:has(.abs-badge[data-kind="amount"]) .abs-offer__head { padding-left: 176px; }
}
/* D3 con pestañas: la pestaña ya lleva el chip con el mismo texto (-15 % / Envío gratis), así que la insignia del panel solo sale si trae importe, y deja sitio arriba */
.abs-offers[data-abs-badge] .abs-tabs__list ~ .abs-tabs__panel .abs-badge:not([data-kind="amount"]) { display: none; }
.abs-offers[data-abs-badge] .abs-tabs__list ~ .abs-tabs__panel .abs-offer:has(.abs-badge[data-kind="amount"]) .abs-offer__form { padding-top: 40px; }
/* la insignia sustituye al chip de la cabecera para no repetir el mismo texto */
.abs-offers[data-abs-badge] .abs-offer--d1 .abs-offer__head .abs-chip, .abs-offers[data-abs-badge] .abs-offer--d2 .abs-offer__head .abs-chip, .abs-offers[data-abs-badge] .abs-offer--d6 .abs-offer__head .abs-chip,
.abs-offers[data-abs-badge] .abs-offer--d9 .abs-offer__head .abs-chip, .abs-offers[data-abs-badge] .abs-offer--d3 .abs-offer__head .abs-chip { display: none; }

/* Bloque muy estrecho (320 px de pantalla): el selector ocupa todo el ancho y el precio va debajo */
@container abs (max-width: 359px) {
    .has-sel .abs-item__attrs { grid-column: 1 / -1; }
    .has-sel .abs-item__price { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
}

/* Variante móvil: acordeón de las pestañas */
@container abs (max-width: 575px) {
    .abs-tab::after { content: ""; grid-column: 3; width: 8px; height: 8px; margin-right: 2px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; }
    .abs-tab[aria-expanded="true"]::after, .abs-tab[aria-selected="true"]::after { transform: rotate(-135deg); }
    .abs-tabs__panel { padding: 0 0 4px; }
}

/* Sitios estrechos del tema (columna lateral): siempre compacto aunque el contenedor sea ancho */
.abs-small-fqb-container .abs-offer__btn { min-width: 0; }

@media (prefers-reduced-motion: reduce) {
    .abs-offer__btn.is-busy [data-abs-cta]::after { animation: none; }
    .abs-tab::after { transition: none; }
}
/* 3.4.0: modo de alto contraste de Windows (forced-colors): los fondos se fuerzan, así que el botón (border: 0) y la pestaña/cabecera elegida se quedarían sin forma ni estado */
@media (forced-colors: active) {
    .abs-offer__btn { border: 1px solid ButtonText; }
    .abs-item__lk { background: Highlight; color: HighlightText; forced-color-adjust: none; }
    .abs-badge { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
    .abs-tab[aria-selected="true"], .abs-tab[aria-expanded="true"] { outline: 2px solid Highlight; outline-offset: -3px; }
}
@media print { .abs-offers { display: none; } }