/*
 * MODULE AbsFrequentlyBoughtTogether (fork CMC) - 3.8.1
 * Diseño P62 «Flat cards»: VARIANTES de las opciones de «Personalizar» (AbsOfferP62) que NO son las de fábrica. Se carga después de p62.css y SOLO cuando alguno de los cuatro ajustes de lista
 * (casilla, porcentaje, ahorro por producto, atributos) no vale lo de fábrica (AbsOfferDesigns::designAssets): con los ajustes de fábrica la tienda no descarga ni un byte de esto. El tamaño de la foto
 * no está aquí: es la variable --abs-p62-ih del contenedor. Mismas reglas que p62.css: todo bajo .abs-offers--p62, sin !important, y ninguna regla con más especificidad que la hoja base para
 * lo que muestra u oculta (.abs-p62-v y [hidden]: ver p62.css). La plantilla imprime SOLO el elemento de cada opción elegida: aquí no hay reglas de combinaciones.
 * --it = alto reservado arriba de la tarjeta (casilla de 44 px o 12 px, más 34 px si hay franja encima de la foto), --ih = lado de la foto, --ex = hueco lateral entre la foto y el borde de la tarjeta.
 */
/* casilla «En tu pack»: arriba a la izquierda (tl), abajo a la derecha (br) o abajo a la izquierda (bl) */
.abs-offers--p62 .k-tl .abs-p62-k { right: auto; left: 0; border-radius: 0 0 10px 0; }
.abs-offers--p62 :is(.k-br, .k-bl) { --ct: 12px; --cb: 50px; }
.abs-offers--p62 :is(.k-br, .k-bl) .abs-p62-k { top: auto; bottom: 0; }
.abs-offers--p62 .k-br .abs-p62-k { border-radius: 10px 0 0 0; }
.abs-offers--p62 .k-bl .abs-p62-k { right: auto; left: 0; border-radius: 0 10px 0 0; }
/* porcentaje: a1 etiqueta arriba izquierda de la foto, a2 etiqueta abajo derecha de la foto, a4 cinta diagonal derecha, a5 cinta cruzada, a6 banderín, a7 franja sobre la foto, a8 junto al precio */
.abs-offers--p62 .abs-p62-a1 { top: calc(var(--it) + 6px); left: calc(12px + var(--ex) + 6px); padding: 4px 9px; border-radius: 4px; }
.abs-offers--p62 .abs-p62-a2 { top: calc(var(--it) + var(--ih) - 32px); right: calc(12px + var(--ex) + 6px); padding: 4px 9px; border-radius: 4px; }
.abs-offers--p62 .abs-p62-a4 { top: 28px; right: -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); }
.abs-offers--p62 .abs-p62-a5 { top: calc(var(--it) + var(--ih) / 2 - 14px); right: -30px; left: -30px; padding: 5px 0; font-size: 13px; letter-spacing: .04em; text-align: center; text-transform: uppercase; transform: rotate(-12deg); opacity: .94; }
.abs-offers--p62 .abs-p62-a6 { top: calc(var(--it) + 12px); left: 0; padding: 6px 22px 6px 12px; clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%); }
.abs-offers--p62 .abs-p62-a7 { position: static; padding: 6px 10px; border-radius: 6px; font-size: 13px; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.abs-offers--p62 .x7 { --st: 34px; }
.abs-offers--p62 .abs-p62-a8 { position: static; display: var(--abs-d-chip, inline-block); align-self: center; padding: 2px 8px; border-radius: 4px; font-size: 13px; }
/* con el ahorro dentro de la cinta («-15 % · -1,50 €», b3) la cinta diagonal se aleja de la esquina para que quepa el texto largo */
.abs-offers--p62 :is(.abs-p62-a3, .abs-p62-a4):has(.abs-p62-sv) { top: 37px; width: 200px; }
.abs-offers--p62 .abs-p62-a3:has(.abs-p62-sv) { left: -50px; }
.abs-offers--p62 .abs-p62-a4:has(.abs-p62-sv) { right: -50px; }
/* ahorro por producto: b1 pastilla bajo el precio, b2 «-1,65 €» en la línea del precio, b4 franja verde al pie, b6 sello verde sobre la foto (b3 va dentro de la etiqueta del %; b5 es el de fábrica) */
.abs-offers--p62 .abs-p62-s1 { align-self: flex-start; margin: 0; padding: 4px 10px; border-radius: 999px; background: #dcfce7; color: #166534; font-size: 13px; font-weight: 700; }
.abs-offers--p62 .abs-p62-s2 { color: #166534; font-size: 13px; font-weight: 700; }
.abs-offers--p62 .abs-p62-s4 { margin: 0; padding: 9px 12px; border-radius: 8px; background: #dcfce7; color: #166534; font-size: 13px; font-weight: 700; text-align: center; }
.abs-offers--p62 .abs-p62-s6 { position: absolute; z-index: 2; pointer-events: none; top: calc(var(--it) + var(--ih) - 32px); left: calc(12px + var(--ex) + 6px); padding: 4px 9px; border-radius: 4px; background: #166534; color: #fff; font-size: 13px; font-weight: 700; }
/* selectores: c1 bajo el nombre, apilados; c2 bajo el nombre, en fila (la rejilla de fábrica sin franja); c4 línea de resumen con «Cambiar» */
.abs-offers--p62 .c-c1 .abs-item__attrs { grid-template-columns: minmax(0, 1fr); }
.abs-offers--p62 .abs-p62-ch { position: relative; margin: 0; }
.abs-offers--p62 .abs-p62-sm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; min-height: 36px; color: var(--abs-muted); font-size: 13px; list-style: none; cursor: pointer; }
.abs-offers--p62 .abs-p62-sm span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; text-align: left; }
.abs-offers--p62 .abs-p62-sm::-webkit-details-marker { display: none; }
.abs-offers--p62 .abs-p62-sm b { flex: none; padding: 6px 12px; border: 1px solid var(--abs-primary); border-radius: 8px; background: #fff; color: var(--abs-primary-hover); font-weight: 700; }
.abs-offers--p62 .abs-p62-ch[open] .abs-item__attrs { margin-top: 6px; }
/* estructura (3.9.1, ABS_P62_FRAME = flat): SIN rectángulo anidado. Una sola caja: la cabecera, el cuerpo con las tarjetas y el pie con el total son bandas de ancho completo; arriba y abajo siguen el radio del bloque
   (overflow: hidden), las bandas del medio son rectas. El <article> del pack deja de ser una caja (sin borde, fondo, sombra ni radio) y el pie sigue pegado a los bordes (sus márgenes negativos). */
.abs-offers--p62[data-p62-frame="flat"] { padding: 0; overflow: hidden; background: #fff; }
.abs-offers--p62[data-p62-frame="flat"] .abs-p62-hd { margin: 0; padding: 10px 14px 6px; border-bottom: 1px solid var(--abs-p62-bd); background: var(--abs-surface-2); }
.abs-offers--p62[data-p62-frame="flat"] .abs-p62-panel { --abs-p62-px: 14px; }
.abs-offers--p62[data-p62-frame="flat"] .abs-offer { padding-top: 14px; border: 0; border-radius: 0; background: none; box-shadow: none; }
@container abs (min-width: 576px) { .abs-offers--p62[data-p62-frame="flat"] .abs-p62-hd { padding: 12px 14px 10px; } }