/* "Compare os perfumes" with the Explore kits (08/11/2026). The editorial layout and tokens come from
   mainstream-selection-20261017.css (.ms-selection); this file only adds the kit lines and the compact swipe row. */

/* Desktop editorial: inspiration and price under each kit. */
.ms-selection.ms-kits-compare .selection-desktop .ms-kits-compare-reference { display: grid; gap: 3px; margin-top: 14px; }
.ms-selection.ms-kits-compare .selection-desktop .ms-kits-compare-label { color: var(--muted); font: 400 10px/1.4 'DM Sans', sans-serif; letter-spacing: .02em; }
.ms-selection.ms-kits-compare .selection-desktop .ms-kits-compare-reference > span:last-child { color: var(--green); font: 400 13px/1.45 'DM Sans', sans-serif; }
.ms-selection.ms-kits-compare .selection-desktop .ms-kits-compare-price { margin: 12px 0 0; color: var(--ink); font: 500 15px/1.4 'DM Sans', sans-serif; font-variant-numeric: tabular-nums; }
.ms-selection.ms-kits-compare .selection-desktop .ms-kits-compare-volume { margin-left: 6px; color: var(--muted); font-size: 12px; font-weight: 400; }
.ms-selection.ms-kits-compare .selection-desktop .ms-kits-compare-volume:empty { display: none; }

/* Compact screens: the kits in a swipe row where the cutout roulette used to be. Fixed column widths: with minmax(0, …)
   the grid shrank all eight cards into the screen instead of overflowing (hotfix 08/11/2026). */
.ms-selection.ms-kits-compare .ms-kits-compare-visuals { grid-area: visuals; min-width: 0; }
.ms-selection.ms-kits-compare .ms-kits-compare-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 4px 2px 14px; scrollbar-width: none;
}
.ms-selection.ms-kits-compare .ms-kits-compare-track::-webkit-scrollbar { display: none; width: 0; height: 0; }
.ms-selection.ms-kits-compare .ms-kits-compare-track:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.ms-selection.ms-kits-compare .ms-kits-compare-card { display: flex; flex-direction: column; min-width: 0; scroll-snap-align: start; color: var(--ink); text-decoration: none; }
.ms-selection.ms-kits-compare .ms-kits-compare-card img {
  display: block; width: 100%; height: auto; aspect-ratio: 1122 / 1402; object-fit: cover;
  border-radius: 5px 44px 5px 5px; background: #e8e9e1; box-shadow: 0 18px 26px -20px #26372d66;
}
.ms-selection.ms-kits-compare .ms-kits-compare-maker { margin-top: 14px; color: var(--muted); font: 500 10px/1.4 'DM Sans', sans-serif; letter-spacing: .08em; }
.ms-selection.ms-kits-compare .ms-kits-compare-name { margin-top: 4px; font: 400 21px/1.2 Gelasio, Georgia, serif; }
.ms-selection.ms-kits-compare .ms-kits-compare-members { margin-top: 4px; color: var(--green); font: 400 13px/1.45 'DM Sans', sans-serif; }
.ms-selection.ms-kits-compare .ms-kits-compare-card:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 6px; }
@media (min-width: 651px) {
  .ms-selection.ms-kits-compare .ms-kits-compare-track { grid-auto-columns: 44%; gap: 22px; }
}

/* Owner, 08/11/2026 (second round): featured arts a bit smaller; the five small kits share one size and the same arched
   crop as the featured, and their caption follows the former kit cards: line, name, "Perfumes do kit", volume and price. */
.ms-selection.ms-kits-compare .selection-desktop .featured { max-width: 350px; }
.ms-selection.ms-kits-compare .selection-desktop .featured-two { max-width: 300px; margin-top: 92px; }
.ms-selection.ms-kits-compare .selection-desktop .small-collection { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; align-items: start; justify-content: initial; }
.ms-selection.ms-kits-compare .selection-desktop .small-product { max-width: none; padding-top: 0; }
.ms-selection.ms-kits-compare .selection-desktop .small-product .photo-link { border-radius: 3px 40px 3px 3px; }
.ms-selection.ms-kits-compare .selection-desktop .small-caption { align-items: flex-start; }
.ms-selection.ms-kits-compare .selection-desktop .ms-kits-compare-small-text { display: grid; flex: 1; min-width: 0; }
.ms-selection.ms-kits-compare .selection-desktop .ms-kits-compare-small-label { margin-top: 8px; color: var(--muted); font: 400 10px/1.4 'DM Sans', sans-serif; letter-spacing: .02em; }
.ms-selection.ms-kits-compare .selection-desktop .ms-kits-compare-small-members { color: var(--green); font: 400 12px/1.45 'DM Sans', sans-serif; }

/* Volume and price on one line, as on the former kit cards (small kits and the compact row). */
.ms-selection.ms-kits-compare .ms-kits-compare-buy { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 8px; }
.ms-selection.ms-kits-compare .ms-kits-compare-buy > span:first-child { color: var(--muted); font: 400 11px/1.4 'DM Sans', sans-serif; }
.ms-selection.ms-kits-compare .ms-kits-compare-buy > span:last-child { color: var(--ink); font: 500 14px/1.4 'DM Sans', sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Owner, 08/11/2026 (third round): every kit block as tall as the tallest in its row, with volume and price at the foot,
   so a two-line pair of names ("Imaginary Trip Absolu + Sahara Absolu") no longer pushes one price below the others. */
.ms-selection.ms-kits-compare .selection-desktop .small-collection { align-items: stretch; }
.ms-selection.ms-kits-compare .selection-desktop .small-product { display: flex; flex-direction: column; }
.ms-selection.ms-kits-compare .selection-desktop .small-caption { flex: 1; }
.ms-selection.ms-kits-compare .selection-desktop .ms-kits-compare-small-text { display: flex; flex-direction: column; align-self: stretch; }
.ms-selection.ms-kits-compare .selection-desktop .ms-kits-compare-small-text .ms-kits-compare-buy { margin-top: auto; padding-top: 8px; }
.ms-selection.ms-kits-compare .ms-kits-compare-card .ms-kits-compare-buy { margin-top: auto; padding-top: 8px; }