/* CMC Packs 3.9.0 (SX) · tarjeta .abs-summary--s17 (familia «sx»: mini-carrusel de las ofertas). Todo bajo .abs-summary--s17; colores = variables --abs-* (panel «Estilo»); sin !important.
   .sx__in es el contenedor (@container): con ancho >= 520 foto grande y flechas a los lados; 330-519 foto media; < 330 las flechas bajan junto a los puntos y el botón ocupa todo el ancho. */
.abs-summary--s17 { padding: 12px; background: var(--abs-bg); border: 1px solid var(--abs-border); border-radius: var(--abs-radius); }
.abs-summary--s17 .sx__in { container-type: inline-size; }
.abs-summary--s17 .sx__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 4px 8px; }
.abs-summary--s17 .sx__title { margin: 0; font-size: 13px; font-weight: 700; }
.abs-summary--s17 .sx__count { color: var(--abs-muted); font-size: 12px; }
.abs-summary--s17 .sx__stage { display: flex; align-items: center; gap: 6px; }
.abs-summary--s17 .sx__slides { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.abs-summary--s17 .sx__slide { grid-area: 1 / 1; display: flex; align-items: center; gap: 14px; }
.abs-summary--s17 .sx__slide.is-off { visibility: hidden; }
.abs-summary--s17 .sx__media { position: relative; flex: 0 0 auto; display: grid; grid: 1fr / auto-flow 1fr; width: 112px; height: 112px; overflow: hidden; background: #fff; border-radius: 12px; }
.abs-summary--s17 .sx__media--n3 { grid: 1fr 1fr / 1fr 1fr; }
.abs-summary--s17 .sx__img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 4px; object-fit: contain; }
.abs-summary--s17 .sx__media--n3 .sx__img:first-child { grid-column: 1 / 3; }
.abs-summary--s17 .sx__badge { position: absolute; top: 4px; left: 4px; font-size: 12px; }
.abs-summary--s17 .sx__info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; font-size: 13px; color: var(--abs-muted); }
.abs-summary--s17 .sx__nm { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; color: var(--abs-text); font-size: 17px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.abs-summary--s17 .sx__info strong, .abs-summary--s17 .sx__info del { white-space: nowrap; }
.abs-summary--s17 .sx__price strong { color: var(--abs-accent); font-size: 22px; }
.abs-summary--s17 .sx__save { padding: 2px 9px; background: #f0fdf4; color: #166534; border-radius: 999px; font-size: 12px; font-weight: 700; }
.abs-summary--s17 .sx__arrow { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: #fff; border: 1px solid var(--abs-border); border-radius: 50%; color: var(--abs-accent); cursor: pointer; }
.abs-summary--s17 .sx__foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.abs-summary--s17 .sx__dots { display: flex; justify-content: center; }
.abs-summary--s17 .sx__ctl { visibility: hidden; }
.abs-summary--s17.is-js .sx__ctl { visibility: visible; }
.abs-summary--s17 .sx__arrow:focus-visible, .abs-summary--s17 .sx__dot:focus-visible { outline: 2px solid var(--abs-accent); outline-offset: 2px; }
.abs-summary--s17 .sx__dot { position: relative; width: 24px; height: 24px; padding: 0; background: none; border: 0; cursor: pointer; }
.abs-summary--s17 .sx__dot::after { content: ""; position: absolute; top: 8px; left: 8px; width: 8px; height: 8px; background: var(--abs-border); border-radius: 4px; }
.abs-summary--s17 .sx__dot[aria-current]::after { left: 1px; width: 22px; background: var(--abs-accent); }
.abs-summary--s17 .sx__foot .sx__cta[href] { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-left: auto; padding: 0 22px; background: var(--abs-accent); color: var(--abs-on-accent); border-radius: 14px; font-weight: 700; }
.abs-summary--s17 .sx__foot .sx__cta[href]:hover { background: var(--abs-accent-hover); }

/* a5 · banda compacta: foto pequeña, nombre y ahorro a la izquierda y precio a la derecha */
.abs-summary--s17 .sx__slide { gap: 12px; }
.abs-summary--s17 .sx__media { width: 84px; height: 84px; }
.abs-summary--s17 .sx__info { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; width: 100%; }
.abs-summary--s17 .sx__nm { grid-column: 1; font-size: 16px; -webkit-line-clamp: 2; line-clamp: 2; }
.abs-summary--s17 .sx__save { grid-column: 1; justify-self: start; }
.abs-summary--s17 .sx__price { grid-column: 2; grid-row: 1 / 3; text-align: right; }
.abs-summary--s17 .sx__lbl { display: none; }
.abs-summary--s17 .sx__price strong, .abs-summary--s17 .sx__price del { display: block; }
.abs-summary--s17 .sx__price strong { font-size: 22px; line-height: 1.1; }
@container (max-width: 419px) { .abs-summary--s17 .sx__media { width: 64px; height: 64px; } .abs-summary--s17 .sx__info { grid-template-columns: minmax(0, 1fr); } .abs-summary--s17 .sx__price { grid-column: 1; grid-row: auto; text-align: left; } }

@container (max-width: 329px) {
    .abs-summary--s17 .sx__box { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px 6px; align-items: center; }
    .abs-summary--s17 .sx__stage, .abs-summary--s17 .sx__foot { display: contents; }
    .abs-summary--s17 .sx__head, .abs-summary--s17 .sx__slides, .abs-summary--s17 .sx__foot .sx__cta[href], .abs-summary--s17 .sx__thumbs { grid-column: 1 / -1; }
    .abs-summary--s17 .sx__slides, .abs-summary--s17 .sx__thumbs { order: 1; }
    .abs-summary--s17 [data-abs-prev] { order: 2; }
    .abs-summary--s17 .sx__dots { order: 3; }
    .abs-summary--s17 [data-abs-next] { order: 4; }
    .abs-summary--s17 .sx__foot .sx__cta[href] { order: 5; margin: 0; }
    .abs-summary--s17 .sx__slide { flex-direction: column; align-items: center; text-align: center; }
    .abs-summary--s17 .sx__media:not(.sx__media--row) { align-self: center; width: 112px; height: 112px; min-height: 0; max-height: none; }
    .abs-summary--s17 .sx__info { align-items: center; }
    .abs-summary--s17 [data-abs-prev] { grid-column: 1; }
    .abs-summary--s17 [data-abs-next] { grid-column: 3; }
    .abs-summary--s17 .sx__dots { grid-column: 2; }
    .abs-summary--s17 .sx__foot .abs-s12__add { grid-column: 1 / -1; order: 5; margin: 0; }
    .abs-summary--s17 .sx__more { grid-column: 1 / -1; order: 6; justify-content: center; }
}