/* The original market's inline slots, and the home hero that is one of them (js/slots.js).
 * D-ECOMM's lesson, adopted on the account owner's word of 21 October 2026 for the original market
 * only. Loaded on original pages only (tools/build-pages.py), so the Moroccan slots, frozen by the
 * same decision, keep every size they had.
 *
 * Every slot keeps the page column. A slot that sits in main rather than inside a .wrap (under the
 * header, under the hero, above the footer, beside the recommendation rail) ran the full width of
 * the window, so whatever a campaign put in it, the site's own creative or a served one, ran edge to
 * edge on a wide desktop while the hero and the rails stopped at 1240 pixels. So the slot class
 * carries the column itself, the same max width and gutter as .wrap, and a slot already inside a
 * .wrap takes the width it is given. The column is measured at 1920 pixels wide by tools/verify.mjs.
 *
 * js/slots.js puts the class on every declared slot that lacks it, so a slot a script draws without
 * it still keeps the column. A child is held to the slot's width, so a served creative that asks for
 * the whole window (width: 100vw) still lands in the column. Add before and Add after put a creative
 * beside the slot rather than in it, where nothing here can reach it; handoff/ONSITE-SLOTS.md says
 * so per slot.
 */
.dn-inline-target {
  max-width: var(--max); margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px;
  /* The slot's width comes from what holds it, never from what lands in it. Two slots sit in a one
     column grid (the price block on a product page, the top up form), where a child that asks for
     100vw widened the grid's track and the slot with it, to the whole window, before max-width
     below could hold it: measured at 1920 pixels by tools/verify.mjs. No slot is a flex row item,
     where this would shrink it. */
  contain: inline-size;
}
.wrap .dn-inline-target { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.dn-inline-target > * { max-width: 100%; }

/* The hero's row of slides, which is also its inline target, #dn_inline_target_hero. Every child is
   one full width slide, the site's own three and anything a campaign adds: End of appends the next
   slide, Start of the first, and Replace leaves the campaign as the only one. A served creative
   pasted with one root element is one slide. js/site.js turns the row and draws a dot per slide. */
.hero-track {
  position: relative; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  border-radius: var(--radius-lg);
}
.hero-track::-webkit-scrollbar { display: none; }
.hero-track > * { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.hero-track > .hero { display: block; }

/* A visitor who asked for less motion gets the dots without the turn (js/site.js), and a dot
   pressed jumps rather than slides. */
@media (prefers-reduced-motion: reduce) {
  .hero-track { scroll-behavior: auto; }
}