/* Homepage: promotion cards and rows that scroll sideways (since 29-10-2026, see LEERLOG.md sections 13 and 14). */

/* A rail is a row that scrolls sideways; --rail-pad is the room before the first and after the last item. */
.rail { --rail-pad: max(var(--gutter), calc((100% - var(--shell)) / 2)); --rail-gap: 16px; }
.rail-track,
.hog-store .product-rail ul.products {
  display: flex;
  gap: var(--rail-gap);
  margin: -8px 0 0;
  padding: 8px var(--rail-pad) 16px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rail-pad);
  scrollbar-width: none;
}
.rail-track::-webkit-scrollbar,
.hog-store .product-rail ul.products::-webkit-scrollbar { display: none; }
.rail-track > li,
.hog-store .product-rail ul.products li.product { flex: 0 0 var(--rail-item); scroll-snap-align: start; }

/* Categories and product rows: five items at a time within the page width (four under 1200px, three under 1000px),
   with a round button on either side like bol.com. Phones swipe a row that runs to the edge of the screen. */
.rail-contained {
  --rail-pad: 4px;
  --per-view: 5;
  --rail-item: calc((100% - (var(--per-view) - 1) * var(--rail-gap)) / var(--per-view));
  position: relative;
}
.rail-contained .rail-track,
.hog-store .rail-contained ul.products { margin-inline: calc(-1 * var(--rail-pad)); }
.product-rail { --rail-gap: 20px; }

/* The buttons sit on a layer over the items. The track's negative top margin collapses through the rail, so the
   layer starts 8px lower; under the items is 16px of track padding. storefront.js sets --rail-mid to the middle
   of the first item's photo, and hides each button at its end of the row. */
.rail-buttons { position: absolute; inset: 8px 0 16px; z-index: 3; pointer-events: none; }
.rail-buttons[hidden] { display: none; }
.rail-button {
  position: absolute;
  top: var(--rail-mid, 50%);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(20, 21, 24, .08), 0 4px 14px rgba(20, 21, 24, .16);
  cursor: pointer;
  pointer-events: auto;
  transition: background-color .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease), visibility .2s;
}
.rail-button[data-rail-prev] { left: 0; transform: translate(-50%, -50%); }
.rail-button[data-rail-next] { right: 0; transform: translate(50%, -50%); }
.rail-button .icon { width: 22px; height: 22px; stroke-width: 2; }
.rail-button:hover { background: var(--ink); color: #fff; }
.rail-button[aria-disabled="true"] { opacity: 0; visibility: hidden; }

/* Promotion cards, directly under the hero: four in a row on a wide screen, a rail below that. */
.section-promos { padding-top: 20px; }
.rail-promos { --rail-item: 300px; }
.promo-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--promo, var(--cloud));
  color: var(--ink);
  text-decoration: none;
  isolation: isolate;
  container-type: inline-size;
}
.promo-card:hover { color: var(--ink); }
.promo-media { position: absolute; inset: 0; z-index: -1; transition: transform .5s var(--ease); }
.promo-card:hover .promo-media { transform: scale(1.035); }
.promo-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A photo with detail behind the title gets a shade at the top (inc/promotions.php: 'shade'): light with the
   ink title, or dark with a white title. */
.promo-shade-light .promo-media::after,
.promo-shade-dark .promo-media::after { content: ""; position: absolute; inset: 0 0 auto; height: 36%; }
.promo-shade-light .promo-media::after { background: linear-gradient(rgba(255, 255, 255, .78), rgba(255, 255, 255, .5) 55%, rgba(255, 255, 255, 0)); }
.promo-shade-dark .promo-media::after { background: linear-gradient(rgba(14, 15, 18, .82), rgba(14, 15, 18, .55) 55%, rgba(14, 15, 18, 0)); }
.promo-shade-dark .promo-title,
.promo-shade-dark:hover { color: #fff; }
/* Discount sticker: the same size and place on every card, its middle at 82% of the width and 45.3% of the height.
   The combideal photo still has its old sticker in the image, exactly underneath; move them together or not at all.
   White letters (Abdel, 29-10-2026) on a deeper shade of the signal orange, same hue: 4.6:1, so the small
   "halve prijs" is readable too. White on #FF5B1F itself is only 3.1:1. */
.promo-sticker {
  position: absolute;
  z-index: 1;
  left: calc(81.97% - 14.3cqw);
  top: calc(45.34% - 14.3cqw);
  display: grid;
  place-content: center;
  width: 28.6cqw;
  height: 28.6cqw;
  border-radius: 50%;
  background: var(--accent-deep);
  color: #fff;
  font: 800 9.6cqw/1 var(--display);
  letter-spacing: -.035em;
  text-align: center;
  box-shadow: 0 .5cqw 1.6cqw rgba(20, 21, 24, .16);
}
.promo-sticker b { font-weight: 800; }
.promo-sticker-split b { font-size: 11cqw; }
.promo-sticker small { display: block; margin-top: .6cqw; font: 800 4.6cqw/1 var(--display); letter-spacing: -.01em; }
.promo-title { display: block; padding: 22px 24px 0; font: 500 21px/1.18 var(--display); letter-spacing: -.022em; text-wrap: balance; }
/* Every title reads as two parts: the deal on its own line, then what it applies to. */
.promo-title b { display: block; font-weight: 800; }
@media (min-width: 1100px) {
  .rail-promos .promo-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
}

/* Category tiles in the gallery: name over the photo, no arrow (Abdel, 29-10-2026). */
.cat-grid.cat-rail { display: flex; grid-template-columns: none; gap: var(--rail-gap); }
.cat-rail .cat-tile { aspect-ratio: 1.2; }
.cat-rail .cat-tile-name { font-size: clamp(19px, 1.55vw, 22px); }
.cat-tile-adapters-hubs .cat-tile-media,
.cat-tile-houders .cat-tile-media { width: 66%; right: 4%; }

@media (max-width: 1199px) {
  .rail-contained { --per-view: 4; }
}
@media (max-width: 1099px) {
  .promo-title { padding: 18px 20px 0; font-size: 19px; }
  .cat-carousel { --rail-gap: 12px; }
}
@media (max-width: 999px) {
  .rail-contained { --per-view: 3; }
}
@media (max-width: 760px) {
  .rail { --rail-gap: 10px; }
  .section-promos { padding-top: 14px; }
  /* A share of the screen on a phone, with a ceiling so a small tablet does not get giant cards. */
  .rail-promos { --rail-item: min(70vw, 340px); }
  .promo-title { padding: 16px 16px 0; font-size: 17px; }
  .rail-contained { --rail-pad: var(--gutter); }
  .cat-carousel { --rail-item: min(62vw, 300px); }
  .cat-rail .cat-tile-name { font-size: 17px; }
  /* 228px leaves part of a fourth card in view on a small tablet, so it is clear the row goes on. */
  .product-rail { --rail-gap: 12px; --rail-item: min(44vw, 228px); }
  .rail-buttons { display: none; }
  /* A long heading keeps its line; the link moves underneath instead of being squeezed off the screen. */
  .rail-section .section-head { flex-wrap: wrap; row-gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-media { transition: none; }
  .promo-card:hover .promo-media { transform: none; }
}