/* The shop (visuele herwerking, docs/ontwerp/DESIGN.md and docs/voorstel-herwerking.md onderdeel 2).

   The only stylesheet of the shop after tokens.css and fonts.css (base.html, server_error.html); since fase 11 the
   shop no longer loads components.css, which stays for the back office only. Uses only the shop tokens of tokens.css
   (--wit, --action, ...), never the old ones (tests/test_design_rules.py). */

/* ---------- Fase 11: de basis die de winkel uit components.css nog nodig had ----------

   The rules of components.css that a page of the shop still uses (elements, type, buttons, fields, lists),
   with the shop tokens instead of the old ones and a thin line where there was a shadow. They come first, as
   components.css did; everything after them overrides them as before. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--vlak);
  color: var(--inkt);
  font-family: var(--letter);
  font-size: 16px;
  line-height: 25px;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-underline-offset: 3px;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

p {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  background: var(--wit);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-veld);
}

.skip-link:focus {
  top: var(--space-2);
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}

@media (max-width: 640px) {
  .container {
    padding: 0 var(--space-4);
  }
}

main {
  flex: 1;
  padding-bottom: var(--space-7);
}

.muted {
  color: var(--gedempt);
}

.tabular {
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3 {
  margin: 0;
}

h1 {
  font-family: var(--letter);
  font-weight: 600;
  font-size: 38px;
  line-height: 42px;
}

h2 {
  font-family: var(--letter);
  font-weight: 500;
  font-size: 24px;
  line-height: 30px;
}

h3,
.t-title {
  font-family: var(--letter);
  font-weight: 600;
  font-size: 17px;
  line-height: 24px;
}

.t-small {
  font-family: var(--letter);
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 0;
  border-radius: var(--r-rond);
  padding: var(--space-3) var(--space-5);
  background: var(--action);
  color: var(--wit);
  font-family: var(--letter);
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn--small {
  padding: var(--space-2) var(--space-4);
  font-size: 14px;
}

.btn--ghost {
  background: transparent;
  color: var(--inkt);
  box-shadow: inset 0 0 0 1px var(--lijn);
}

.btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.motif {
  width: 36px;
  height: 36px;
  flex: none;
}

.motif__disc {
  fill: var(--brand);
}

.motif__mark {
  fill: var(--wit);
  font-family: var(--letter);
  font-weight: 600;
  font-size: 28px;
}

.search:focus-within {
  border-color: var(--action);
}

.search:has(:focus-visible) {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}

.search__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gedempt);
  cursor: pointer;
}

.search__button:focus-visible {
  outline: none;
}

.search input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  padding: 10px var(--space-1);
  font-size: 16px;
  color: var(--inkt);
}

.toast-region {
  position: fixed;
  top: 96px;
  right: var(--space-5);
  z-index: 60;
  max-width: calc(100vw - 2 * var(--space-5));
}

@keyframes toast-life {
  0% { opacity: 0; transform: translateY(-8px); }
  6%, 88% { opacity: 1; transform: none; }
  100% { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes toast-fade {
    100% { visibility: hidden; }
  }
}

.section {
  padding-top: var(--space-7);
}

.section__head {
  display: flex;
  flex-wrap: wrap; /* 26 oktober 2026: without room the link goes under the heading, never out of the screen */
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
}

.section__head a {
  font-weight: 600;
  color: var(--action);
  white-space: nowrap;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--letter);
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
}

.status::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--r-rond);
  background: currentColor;
}

.status--in {
  color: var(--inkt);
}

/* "Op voorraad": a check instead of the dot (docs/voorstel-huisstijl.md). */
.status--in::before {
  width: 5px;
  height: 9px;
  margin: 0 2px 2px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  background: none;
  transform: rotate(45deg);
}

.status--pre {
  color: var(--status-preorder);
}

.status--out {
  color: var(--status-uit);
}

.art {
  width: 100%;
  height: 100%;
  color: var(--gedempt);
}

/* Reeks IA-b: the placeholder of a product without a photo (partials/placeholders.html); the line keeps its width
   at every size, from the cart line to the product page. */
.art * {
  vector-effect: non-scaling-stroke;
}

.art .art-fill {
  fill: var(--tint);
}

.art .art-ground {
  fill: var(--wit);
}

.product-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-5);
}

.breadcrumb {
  padding: var(--space-5) 0 var(--space-2);
  color: var(--gedempt);
}

.check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 15px;
  cursor: pointer;
}

.check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--action);
}

select {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--r-rond);
  padding: 9px var(--space-3);
  font-size: 15px;
}

.empty {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-5);
  border: 1px dashed var(--lijn);
  border-radius: var(--r-kaart);
  text-align: center;
}

.empty--page {
  margin-top: var(--space-7);
}

.note {
  width: 100%;
  padding: 18px;
  border-radius: var(--r-kaart);
  background: var(--wit);
  box-shadow: 0 0 0 1px var(--lijn);
  font-size: 15px;
  line-height: 23px;
}

.note strong {
  display: block;
  margin-bottom: var(--space-1);
}

.specs {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.specs th,
.specs td {
  padding: 10px 0;
  border-bottom: 1px solid var(--lijn);
  text-align: left;
  vertical-align: top;
}

.specs th {
  width: 40%;
  font-weight: 500;
  color: var(--gedempt);
}

.table-scroll {
  overflow-x: auto;
}

.specs--cookies th,
.specs--shipping th {
  width: auto;
}

.specs--cookies th,
.specs--cookies td,
.specs--shipping th,
.specs--shipping td {
  padding-right: var(--space-3);
}

.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
}

.chips--center {
  justify-content: center;
  margin: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-rond);
  background: var(--wit);
  box-shadow: inset 0 0 0 1px var(--lijn);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.chip span {
  color: var(--gedempt);
  font-size: 13px;
}

.chip:hover {
  box-shadow: inset 0 0 0 1px var(--inkt);
}

.chip[aria-current="page"] {
  background: var(--inkt);
  color: var(--vlak);
  box-shadow: none;
}

.chip[aria-current="page"] span {
  color: var(--vlak);
}

.page-title {
  margin: var(--space-2) 0 var(--space-5);
}

.page-lede {
  max-width: 65ch;
  margin: calc(-1 * var(--space-3)) 0 var(--space-5);
}

.narrow {
  max-width: 800px;
}

.alert {
  margin-bottom: var(--space-4);
  padding: 14px 18px;
  border-radius: var(--r-kaart);
  background: var(--wit);
  box-shadow: inset 4px 0 0 var(--status-fout), 0 0 0 1px var(--lijn);
}

.alert ul {
  margin: var(--space-1) 0;
}

.note p + form,
.note p + p {
  margin-top: var(--space-3);
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--action);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.summary {
  position: sticky;
  top: 140px;
  padding: var(--space-5);
  border-radius: var(--r-kaart);
  background: var(--wit);
  box-shadow: 0 0 0 1px var(--lijn);
}

@media (max-width: 860px) {
  .summary {
    position: static;
  }
}

.steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: calc(-1 * var(--space-2)) 0 var(--space-6);
  padding: 0;
}

.steps li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--gedempt);
  font-size: 14px;
  font-weight: 600;
}

.steps b {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-rond);
  box-shadow: inset 0 0 0 1px var(--lijn);
  font-size: 13px;
}

.steps li + li::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--lijn);
}

.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field--wide {
  grid-column: 1 / -1;
}

.field label {
  font-size: 14px;
  font-weight: 600;
}

.field input,
.field textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--lijn);
  border-radius: var(--r-veld);
  background: var(--wit);
  font-size: 16px;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--action);
}

.field input[readonly] {
  background: var(--vlak);
  color: var(--gedempt);
}

.field--error input {
  border-color: var(--status-fout);
}

.field__error {
  color: var(--status-fout);
  font-size: 13px;
  font-weight: 600;
}

.field__hint {
  color: var(--gedempt);
  font-size: 13px;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 14px var(--space-4);
  border-radius: var(--r-kaart);
  background: var(--wit);
  box-shadow: inset 0 0 0 1px var(--lijn);
  cursor: pointer;
}

.choice:has(input:checked) {
  box-shadow: inset 0 0 0 2px var(--inkt);
}

.choice input {
  margin-top: 4px;
  accent-color: var(--action);
}

.choices {
  display: grid;
  gap: 10px;
}

.carrier-logo {
  display: block;
  max-width: 100%;
  max-height: 36px;
  width: auto;
  height: auto;
}

@media (max-width: 640px) {
  .carrier-logo {
    max-height: 28px;
  }
}

.carrier-mark {
  display: inline-block;
  margin-right: var(--space-2);
  padding: 1px var(--space-2);
  border-radius: var(--r-veld);
  box-shadow: inset 0 0 0 1px var(--lijn);
  font-size: 13px;
  font-weight: 600;
}

[data-locate-note]:empty {
  display: none;
}

.pickup__hours {
  margin-top: var(--space-1);
}

.pickup__hours dl {
  display: grid;
  gap: 2px;
  margin: var(--space-1) 0 0;
}

.pickup__hours dl div {
  display: flex;
  gap: var(--space-3);
}

.pickup__hours dt {
  min-width: 80px;
  color: var(--gedempt);
}

.pickup__hours dd {
  margin: 0;
}

.check--terms {
  align-items: flex-start;
  margin: var(--space-4) 0 var(--space-2);
}

.check--terms input {
  margin-top: 3px;
  flex: none;
}

.field--error.check--terms {
  color: var(--status-fout);
}

.order-status {
  margin-top: var(--space-7);
}

.order-status + h1 {
  margin-top: var(--space-2);
}

.order-box {
  margin: var(--space-5) 0;
  padding: var(--space-5);
  border-radius: var(--r-kaart);
  background: var(--wit);
  box-shadow: 0 0 0 1px var(--lijn);
}

.order-box h2 {
  margin-bottom: var(--space-3);
}

.order-box p + p {
  margin-top: var(--space-2);
}

.order-box .btn {
  margin-top: var(--space-4);
}

.order-address {
  font-style: normal;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

@media (max-width: 640px) {
  .contact-grid,
.fields {
    grid-template-columns: 1fr;
  }
}

.info-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

.info-layout > * {
  min-width: 0;
}

@media (max-width: 860px) {
  .info-layout {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

.info-nav ul {
  list-style: none;
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
}

.info-nav a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-veld);
  text-decoration: none;
}

.info-nav a:hover,
.info-nav a[aria-current="page"] {
  background: var(--wit);
  box-shadow: inset 0 0 0 1px var(--lijn);
}

.prose {
  max-width: 68ch;
}

.prose h1 {
  margin: 0 0 var(--space-3);
}

.prose h2 {
  margin: var(--space-6) 0 var(--space-2);
}

.prose p + p {
  margin-top: var(--space-3);
}

.prose .btn {
  margin-top: var(--space-5);
}

.prose__lede {
  color: var(--gedempt);
  font-size: 18px;
  line-height: 28px;
}

.faq {
  max-width: 760px;
  border-top: 1px solid var(--lijn);
}

.faq details {
  padding: 18px 0;
  border-bottom: 1px solid var(--lijn);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: 17px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  color: var(--gedempt);
  font-size: 22px;
  line-height: 1;
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq details p {
  max-width: 65ch;
  margin-top: 10px;
}

textarea {
  font: inherit;
  color: inherit;
  resize: vertical;
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  .btn {
    transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.1s ease;
  }

  .btn:active:not(:disabled) {
    transform: scale(0.96);
  }

  .photo {
    transition: opacity 0.3s ease;
  }

  .photo-frame {
    transition: background-color 0.3s ease;
  }

  .btn__spinner {
    animation: spin 0.8s linear infinite;
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--action) 86%, var(--inkt));
}

.btn--ghost:hover:not(:disabled) {
  background: var(--wit);
  box-shadow: inset 0 0 0 1px var(--gedempt);
}

.btn__spinner {
  display: none;
  width: 14px;
  height: 14px;
  border-radius: var(--r-rond);
  border: 2px solid currentColor;
  border-right-color: transparent;
}

.htmx-request .btn__spinner {
  display: inline-block;
}

.htmx-request .btn {
  cursor: progress;
}

.js .photo:not(.is-loaded) {
  opacity: 0;
}

.js .photo-frame:has(.photo:not(.is-loaded)) {
  background: var(--vlak);
}

@keyframes lightbox-in {
  from { opacity: 0; }
}

@keyframes drawer-in {
  from { transform: translateX(100%); }
}

@keyframes backdrop-in {
  from { opacity: 0; }
}

.js .facet--long:not(.is-expanded) .check--extra:not(:has(input:checked)) {
  display: none;
}

.facet__more {
  display: none;
  justify-self: start;
  font-size: 14px;
}

.js .facet__more {
  display: inline;
}

.js .facet.is-searching .facet__more {
  display: none;
}

.facet .check[hidden] {
  display: none;
}

.facet__search {
  width: 100%;
  padding: 7px var(--space-3);
  border: 1px solid var(--lijn);
  border-radius: var(--r-veld);
  background: var(--wit);
  font-size: 15px;
}

.facet__search:focus {
  border-color: var(--action);
}

.htmx-request.more__button {
  cursor: progress;
}

.htmx-request.more__button .btn__spinner {
  display: inline-block;
}

.listing.htmx-request #results {
  opacity: 0.6;
}

.search--inline {
  width: min(420px, 100%);
  margin: 0;
  flex: none;
}

.buy-bar {
  display: none;
}

@media (max-width: 860px) {
  .buy-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
    background: var(--wit);
    box-shadow: 0 -1px 0 var(--lijn), 0 0 0 1px var(--lijn);
    visibility: hidden;
    transform: translateY(100%);
  }

  .buy-bar.is-shown {
    visibility: visible;
    transform: none;
  }

  .buy-bar .btn {
    flex: 1;
    max-width: 240px;
  }

  body:has(.buy-bar.is-shown) .site-footer {
    padding-bottom: 72px;
  }
}

@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  .buy-bar {
    transition: transform 0.2s ease, visibility 0.2s;
  }
}

.account-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

.account-nav {
  position: sticky;
  top: 140px;
  display: grid;
  gap: var(--space-4);
}

.account-nav ul {
  list-style: none;
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
}

.account-nav a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-veld);
  font-weight: 600;
  text-decoration: none;
}

.account-nav a:hover,
.account-nav a[aria-current="page"] {
  background: var(--wit);
  box-shadow: inset 0 0 0 1px var(--lijn);
}

.account-nav a[aria-current="page"] {
  color: var(--action);
}

.account-main {
  display: grid;
  gap: var(--space-5);
  max-width: 720px;
}

.account-notice {
  font-weight: 600;
}

@media (max-width: 860px) {
  .account-layout {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .account-nav {
    position: static;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .account-nav__who {
    display: none;
  }

  .account-nav ul {
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    padding: 2px 2px var(--space-1);
    border-bottom: 1px solid var(--lijn);
  }

  .account-nav li {
    flex: none;
  }

  .account-nav a {
    border-radius: var(--r-rond);
    padding: var(--space-2) var(--space-4);
  }

  .account-nav a[aria-current="page"] {
    background: var(--action);
    color: var(--wit);
    box-shadow: none;
  }
}

/* The popup Melding | Offerte (step 21a, restyled after fase 12): white, a centred window on a laptop, nearly the
   whole width on a phone; the product as in the cart, the switch as in checkout, the fields and the button of
   checkout. */
.notice-dialog {
  width: min(460px, calc(100% - 2 * var(--space-4)));
  max-height: calc(100% - 2 * var(--space-4));
  padding: 20px;
  border: 0;
  border-radius: var(--r-paneel);
  background: var(--wit);
  color: var(--inkt);
  box-shadow: var(--schaduw-paneel);
  overflow-y: auto;
}

.notice-dialog::backdrop {
  background: color-mix(in srgb, var(--inkt) 40%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .notice-dialog[open] {
    animation: notice-in 0.22s ease;
  }

  .notice-dialog[open]::backdrop {
    animation: backdrop-in 0.22s ease;
  }

  .notice-panel {
    transition: transform 0.25s ease, visibility 0.25s;
  }
}

@keyframes notice-in {
  from { opacity: 0; transform: translateY(12px); }
}

.notice-dialog__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--r-rond);
  background: transparent;
  color: var(--inkt);
  cursor: pointer;
}

.notice-dialog__close:hover {
  background: var(--vlak);
}

.notice-dialog__close:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
}

.notice {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

/* The product as a line of the cart: photo, series, short title, the label and the price in full. */
.notice-product {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 0 14px;
  align-items: start;
  padding-right: 36px;
}

.notice-product__info {
  min-width: 0;
}

.notice-product__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin-top: 8px;
}

.notice-product__line .cart-item__price {
  text-align: left;
}

/* The switch as the others (DESIGN.md onderdeel 6): two halves as wide over the full width, the chosen one white. */
.switch__option[role="tab"] {
  border: 0;
  background: transparent;
  font-family: inherit;
}

.switch__option[aria-selected="true"] {
  background: var(--wit);
  color: var(--inkt);
  box-shadow: var(--schaduw-keuze);
}

.switch__option[role="tab"]:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
}

.notice-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  align-items: start;
  /* clip, not hidden: focusing a field must not scroll the track on top of the slide. */
  overflow: clip;
}

.notice[data-tab="offerte"] .notice-panel {
  transform: translateX(-100%);
}

/* The hidden half takes no height: the window is as high as the chosen half. */
.notice-panel[inert] {
  visibility: hidden;
  height: 0;
  overflow: hidden;
}

.notice-intro {
  margin: 0 0 14px;
  color: var(--gedempt);
  font-size: 14px;
  line-height: 20px;
}

.notice-form {
  display: grid;
  gap: 14px;
  padding: 2px;
}

/* The fields of checkout (main .field), also in the dialog, which is outside main. */
.notice-form .field label {
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}

.notice-form .field input {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--veldrand);
  border-radius: var(--r-veld);
  background: var(--wit);
  color: var(--inkt);
  font-size: 16px;
}

.notice-form .field input:focus {
  border-color: var(--action);
}

.notice-form .field--error input {
  border-color: var(--status-fout);
}

/* The quantity as the stepper of the product page (- 1 +), not a field: the field rules do not reach it. */
.notice-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.notice-amount label {
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}

.notice-form__qty {
  height: 44px;
}

.notice-form__qty .qty__input {
  width: 48px;
}

.notice-form__submit {
  gap: 10px;
  width: 100%;
  min-height: 52px;
  font-size: 16px;
}

/* After sending: the same place, a green tick in a light green circle and the words. */
.notice-done {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 28px 16px 20px;
  text-align: center;
}

.notice-done__icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-rond);
  background: var(--tint);
  color: var(--action);
}

.notice-done__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.notice-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 640px) {
  .notice-dialog {
    width: calc(100% - 2 * var(--space-4));
    padding: 16px;
  }

  .notice {
    gap: 14px;
  }
}

@media (max-width: 560px) {
  .product-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }
}

@media (max-width: 560px) {
  h1 {
    font-size: 30px;
    line-height: 34px;
  }
}

.zone-items {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zone-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--lijn);
}

.zone-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.zone-item__image {
  display: block;
  aspect-ratio: 1;
  padding: var(--space-1);
  border-radius: var(--r-veld);
  background: var(--wit);
  box-shadow: inset 0 0 0 1px var(--lijn);
}

.zone-item__image img,
.zone-item__image svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.zone-item__info {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.zone-item__name {
  font-weight: 600;
  text-decoration: none;
}

a.zone-item__name:hover {
  text-decoration: underline;
}

@media (max-width: 480px) {
  .zone-item {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .zone-item form {
    grid-column: 2;
  }
}

.steps-bar {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.steps-bar__text {
  margin: 0;
  font-weight: 600;
}

.steps-bar__text:empty {
  display: none;
}

.steps-bar__track {
  position: relative;
  height: 8px;
  margin: var(--space-2) 10px 0 0;
  border-radius: var(--r-rond);
  background: var(--lijn);
}

.steps-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--r-rond);
  background: var(--action);
}

.steps-bar__mark {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--wit);
  box-shadow: inset 0 0 0 2px var(--lijn);
  color: transparent;
  transform: translate(-50%, -50%);
}

.steps-bar__mark.is-reached {
  background: var(--action);
  box-shadow: none;
  color: var(--wit);
}

.steps-bar__steps {
  position: relative;
  height: 36px;
  margin: 0 10px 0 0;
  padding: 0;
  list-style: none;
}

.steps-bar__step {
  position: absolute;
  top: 0;
  display: grid;
  color: var(--gedempt);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}

.steps-bar__step:last-child {
  text-align: right;
  transform: translateX(calc(-100% + 10px));
}

.steps-bar__step.is-reached {
  color: var(--inkt);
}

.steps-bar__from {
  font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
  .steps-bar__fill {
    transition: width 0.45s ease;
  }

  .steps-bar__mark {
    transition: background-color 0.3s ease 0.3s, color 0.3s ease 0.3s, box-shadow 0.3s ease 0.3s;
  }
}

.guide-text p {
  margin: 0 0 var(--space-3);
}

.guide-text p:last-child {
  margin-bottom: 0;
}

.guide-text,
.guide-questions {
  max-width: 760px;
}

.guide-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding-left: var(--space-5);
}

.guide-closing {
  margin-top: var(--space-6);
}

.guide-question {
  border-bottom: 1px solid var(--lijn);
}

.guide-question summary {
  padding: var(--space-3) 0;
  cursor: pointer;
  font-weight: 600;
}

.guide-question summary:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}

.guide-question p {
  margin: 0 0 var(--space-4);
}

.guide-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.guide-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--r-paneel);
  background: var(--wit);
  box-shadow: 0 0 0 1px var(--lijn);
  color: var(--inkt);
  text-decoration: none;
}

.guide-tile:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
}

.guide-tile:hover,
.guide-tile:focus-visible {
  box-shadow: 0 0 0 1px var(--lijn), 0 0 0 1px var(--lijn);
}

.guide-tile__image {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: var(--space-4);
  background: var(--wit);
}

.guide-tile__image .photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.guide-tile__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.guide-tile__title {
  font-family: var(--letter);
  font-size: 20px;
  line-height: 1.2;
}

.guide-tile__line {
  color: var(--gedempt);
}

.guide-tile__more {
  margin-top: auto;
  padding-top: var(--space-3);
  color: var(--action);
  font-weight: 600;
}

.guide-tiles--small {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: 0;
}

.guide-tile--small .guide-tile__image {
  aspect-ratio: 3 / 2;
  padding: var(--space-3);
}

.guide-tile--small .guide-tile__title {
  font-size: 17px;
}

@media (prefers-reduced-motion: no-preference) {
  .guide-tile {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .guide-tile:hover,
  .guide-tile:focus-visible {
    transform: translateY(-3px);
  }

  .guide-tile__image .photo {
    transition: transform 0.3s ease;
  }

  .guide-tile:hover .guide-tile__image .photo,
  .guide-tile:focus-visible .guide-tile__image .photo {
    transform: scale(1.05);
  }
}

@media (max-width: 1100px) {
  .guide-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .guide-tiles {
    gap: var(--space-3);
  }

  .guide-tile__body {
    padding: var(--space-3);
  }

  .guide-tile__title {
    font-size: 16px;
  }

  .guide-tile__line {
    font-size: 14px;
  }

  .guide-tiles--small {
    grid-template-columns: 1fr;
  }

  .guide-tile--small {
    flex-direction: row;
    align-items: center;
  }

  .guide-tile--small .guide-tile__image {
    flex: none;
    width: 96px;
    aspect-ratio: 1;
  }
}

.guide-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  margin-top: var(--space-4);
}

.guide-hero__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: var(--space-5);
  border-radius: var(--r-paneel);
  background: var(--wit);
  box-shadow: inset 0 0 0 1px var(--lijn);
}

.guide-hero__image .photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.guide-hero__text .page-title {
  margin-top: 0;
}

.guide-more {
  margin-top: var(--space-4);
}

.guide-more summary {
  list-style: none;
}

.guide-more summary::-webkit-details-marker {
  display: none;
}

.guide-more[open] summary {
  margin-bottom: var(--space-4);
}

.guide-step-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.guide-step-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--r-kaart);
  background: var(--wit);
  box-shadow: 0 0 0 1px var(--lijn);
}

.guide-step-card p {
  margin: 0;
}

.guide-step-card__number {
  color: var(--action);
  font-family: var(--letter);
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
}

.product-row {
  display: grid;
  grid-auto-columns: minmax(230px, 260px);
  grid-auto-flow: column;
  gap: var(--space-5);
  margin: 0;
  padding: var(--space-2) var(--space-1) var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  list-style: none;
}

.product-row > .product-card {
  scroll-snap-align: start;
}

.product-row:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}

@media (max-width: 860px) {
  .guide-hero {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .product-row {
    grid-auto-columns: minmax(200px, 72%);
  }
}

@media (max-width: 640px) {
  .guide-step-cards {
    grid-template-columns: 1fr;
  }

  .guide-step-card {
    flex-direction: row;
    align-items: center;
    padding: var(--space-4);
  }

  .guide-step-card__number {
    flex: none;
    width: 40px;
    font-size: 36px;
  }
}

/* ---------- Fase 1: basis ---------- */

/* The two weights the design adds (DESIGN.md onderdeel 3), only in the shop: the back office asks weight 600 in many
   places and must keep rendering it with the 700 file, as before. */

/* White everywhere (DESIGN.md onderdeel 2), also behind the sticky header. */
body,
.site-header {
  background: var(--wit);
}

/* The focus ring (DESIGN.md onderdeel 10): 2 px green, 3 px away. */
:focus-visible {
  outline: var(--focus-dikte) solid var(--action);
  outline-offset: var(--focus-afstand);
}

/* ---------- Fase 2: kop en footer (DESIGN.md onderdeel 6, Main.png en A-gsm.png) ---------- */

/* The content is 1200 px wide on a laptop; header, menu, titles, grids and footer line up on its two edges
   (DESIGN.md onderdeel 4 and 5). The side padding stays: 24 px, on a phone 16 px. */
.container {
  max-width: calc(var(--inhoud) + 2 * var(--space-5));
}

/* The green bar on top: the shipping text, with a check in apricot. */
.promo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 var(--marge-gsm);
  background: var(--tint);
  color: var(--inkt);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

/* The check is part of the line of text: right before the first word, centred with it, also when the text takes two
   lines on a phone (then two lines of equal length). */
.promo__text {
  text-wrap: balance;
}

.promo .icon-check {
  display: inline-block;
  margin-right: var(--space-2);
  vertical-align: -3px;
  color: var(--action);
}

/* Kleur bovenbalk (Instellingen > Winkel, migration 115): the brand colour with white text (default), light (--tint)
   or grey (--vlak). */
:root[data-bovenbalk="brand"] .promo {
  background: var(--brand);
  color: var(--op-merk);
}

:root[data-bovenbalk="brand"] .promo .icon-check {
  color: var(--op-merk);
}

:root[data-bovenbalk="grey"] .promo {
  background: var(--vlak);
}

/* The header: logo, search, Account and Mandje on 80 px, the menu on 46 px below. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--lijn);
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 32px;
  height: 80px;
}

.site-logo {
  flex: none;
  display: block;
  border-radius: var(--r-veld);
}

/* 29 oktober 2026: the tail of the dragon hangs under the letters: the logo moved down by 4 % of its height, so the
   middle of the letters is the middle of the search field. */
.site-logo .logo,
.checkout-head__logo .logo {
  transform: translateY(4%);
}

/* The logo inline (docs/voorstel-huisstijl.md, app/logo.py): one <symbol> per page, letters and D in currentColor, the
   dragon in --logo-goud. The width sets the size (4.23 x as wide as high). */
.logo {
  display: block;
  max-width: 100%;
}

.logo__mark {
  display: block;
  width: 100%;
  height: auto;
}

.logo-symbol {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.site-logo {
  color: var(--brand);
}

.site-logo .logo {
  width: 237px; /* 56 px high */
}

/* A search field (the header, the list and the page not found). */
.search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-3);
  border: 1px solid var(--lijn);
  border-radius: var(--r-rond);
  background: var(--wit);
  color: var(--gedempt);
}

.search:focus-within {
  border-color: var(--action);
}

.search:has(:focus-visible) {
  outline: var(--focus-dikte) solid var(--action);
  outline-offset: var(--focus-afstand);
}

.site-header .search {
  flex: 1;
  gap: 10px;
  height: 46px;
  padding: 0 18px;
}

.site-header .search__button {
  min-width: 20px;
  color: var(--gedempt);
}

.site-header .search input {
  padding: 0;
  font-size: 15px;
  color: var(--inkt);
}

.head-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-right: -14px; /* the text of Mandje lines up with the right edge */
}

.head-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 14px;
  border-radius: var(--r-rond);
  color: var(--inkt);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.head-button:hover,
.head-button[aria-current="page"] {
  background: var(--vlak);
}

.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--r-rond);
  background: var(--action);
  color: var(--wit);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cart-count--empty {
  display: none;
}

/* The menu on a row of its own; the current item and the one under the pointer get a green line of 2 px. */
.main-nav__list {
  list-style: none;
  display: flex;
  align-items: stretch;
  height: 46px;
  margin: 0 auto;
  padding-block: 0;
  padding-inline: calc(var(--space-5) - 15px);
}

/* 26 oktober 2026: no space between the items the pointer can fall into: each item reaches to the next one (15 px of
   padding on each side instead of a gap of 30 px; the list has 15 px less padding, so the words stay where they
   were). */
.main-nav__list > li {
  display: flex;
  padding-inline: 15px;
}

.main-nav__end {
  margin-left: auto;
}

.nav-item {
  position: relative;
}

.nav-item__link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--inkt);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
}

.nav-item__link:hover,
.nav-item__link[aria-current="page"],
.nav-item:focus-within > .nav-item__link,
.nav-item.is-open > .nav-item__link {
  box-shadow: inset 0 -2px 0 var(--action);
}

.nav-item__link--quiet {
  color: var(--gedempt);
  font-weight: 500;
}

.nav-item__chevron {
  color: var(--inkt);
}

/* The menu on a phone and a tablet: a folded panel with an accordion per game. */
.mobile-menu {
  display: none;
  flex: none;
}

.mobile-menu__toggle {
  width: 44px;
  padding: 0;
  list-style: none;
}

.mobile-menu__toggle::-webkit-details-marker {
  display: none;
}

.mobile-menu[open] > .mobile-menu__toggle {
  background: var(--vlak);
}

.mobile-menu__panel {
  position: absolute;
  top: 100%;
  left: var(--marge-gsm);
  right: var(--marge-gsm);
  z-index: 40;
  max-height: 75vh;
  overflow: auto;
  padding: var(--space-2) var(--space-4) var(--space-4);
  border: 1px solid var(--lijn);
  border-radius: var(--r-kaart);
  background: var(--wit);
  box-shadow: var(--schaduw-kaart);
}

.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-3);
}

.mobile-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--inkt);
  text-decoration: none;
}

/* The newsletter (step 21b) as a narrow strip above the footer. */
.newsletter-strip {
  border-top: 1px solid var(--lijn);
  padding-block: 20px;
}

.newsletter__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) 32px;
}

.newsletter__row {
  flex: 1;
  display: flex;
  gap: var(--space-2);
  min-width: 0; /* the field may shrink, so the row never gets wider than its room (320 px) */
  max-width: 520px;
}

.newsletter__row input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 18px;
  border: 1px solid var(--veldrand);
  border-radius: var(--r-rond);
  background: var(--wit);
  color: var(--inkt);
  font-size: 15px;
}

.newsletter__row .btn {
  min-height: 46px;
}

.newsletter__error,
.newsletter__done {
  flex-basis: 100%;
  font-weight: 600;
}

/* The footer (huisstijl, 27 oktober 2026): filled in the brand colour, text and logo white, four columns, then the
   legal line. The focus ring is white here: the colour of action would vanish against the brand colour. */
.site-footer {
  background: var(--brand);
  color: var(--op-merk);
  font-size: 14px;
  line-height: 22px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 32px;
  padding-block: 40px 32px;
}

.footer-logo {
  display: inline-block;
  margin-bottom: 10px;
  border-radius: var(--r-veld);
}

.footer-logo {
  color: var(--op-merk);
}

.footer-logo .logo {
  width: 290px;
}

.site-footer :focus-visible {
  outline-color: var(--op-merk);
}

.footer-company {
  margin-top: 6px;
  color: var(--op-merk-gedempt);
  font-style: normal;
}

.footer-company a {
  color: inherit;
}

.footer-heading {
  margin: 0 0 var(--space-2);
  font-family: var(--letter);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links a,
.footer-legal__links a {
  color: var(--op-merk);
  text-decoration: none;
  line-height: 30px;
}

.footer-links a:hover,
.footer-legal__links a:hover {
  color: var(--op-merk);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.payment-logos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 6px 0 0;
  padding: 0;
}

.payment-logos li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 34px;
  border: 1px solid var(--lijn);
  border-radius: var(--r-logo);
  background: var(--wit);
}

.payment-logos img {
  display: block;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) 20px;
  padding-block: 16px 28px;
  border-top: 1px solid var(--op-merk-lijn);
  color: var(--op-merk-gedempt);
  font-size: 13px;
  line-height: 20px;
}

.footer-legal__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 0;
  padding: 0;
}

.footer-legal__links a {
  color: var(--op-merk-gedempt);
  line-height: 20px;
}

/* Tablet: the menu folds into the menu button, labels go, the search field stays in the row. */
@media (max-width: 900px) {
  .main-nav {
    display: none;
  }

  .mobile-menu {
    display: block;
    margin-left: -10px;
  }

  .site-header__inner {
    gap: var(--space-3);
    height: 64px;
  }

  .site-logo .logo {
    width: 195px;
  }

  .head-actions {
    gap: 0;
    margin-right: -10px;
  }

  .head-button {
    width: 44px;
    padding: 0;
  }

  .head-button__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .head-actions .cart-count {
    position: absolute;
    top: 5px;
    right: 3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    box-shadow: 0 0 0 2px var(--wit);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Phone (DESIGN.md: A-gsm): 60 px, five buttons of 44 x 44; the search field opens under the row. */
@media (max-width: 640px) {
  .promo {
    min-height: 34px;
    font-size: 12px;
  }

  .site-header__inner {
    gap: 0;
    height: 60px;
    padding: 0 6px;
  }

  .mobile-menu {
    margin-left: 0;
  }

  /* About as wide as the logo of before, so the buttons keep their room. */
  .site-logo .logo {
    width: 152px;
  }

  .head-actions {
    margin: 0 0 0 auto;
  }

  .site-header .search {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-2));
    left: var(--marge-gsm);
    right: var(--marge-gsm);
    z-index: 30;
    box-shadow: var(--schaduw-kaart);
  }

  .site-header .search input {
    font-size: 16px; /* no zoom on an iPhone */
  }

  .newsletter-strip {
    padding-block: var(--space-4);
  }

  .newsletter__row {
    flex-basis: 100%;
    max-width: none;
  }

  .footer-grid {
    gap: var(--space-4);
    padding-block: var(--space-5);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-logo .logo {
    width: 254px;
  }

  .footer-links a {
    line-height: 32px;
  }

  .footer-grid > div:last-child {
    grid-column: 1 / -1;
  }

  .footer-legal {
    display: block;
    padding-block: 14px var(--space-5);
    font-size: 12px;
    line-height: 18px;
  }

  /* The legal pages in two columns, one below the other. */
  .footer-legal__links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-4);
    margin-top: 6px;
  }

  .footer-legal__links a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    font-size: 12px;
  }
}

/* ---------- Fase 3: uitklapmenu, compacte kop, zoeksuggesties (A-menu, A-kop-compact, A-zoeken) ---------- */

/* Behind an open dropdown or the suggestions the page goes darker (under the header only). */
.site-header::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: -1;
  height: 100vh;
  background: var(--sluier);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.site-header:has(.main-nav:not(.is-scripted) .nav-item:hover > .nav-panel, .nav-item.is-open > .nav-panel,
                 .nav-item:focus-within > .nav-panel, .suggest__panel)::after {
  visibility: visible;
  opacity: 1;
}

/* With the suggestions open, the menu row goes darker too (the suggestions cover it, A-zoeken). */
.site-header:has(.suggest__panel) .main-nav {
  position: relative;
}

.site-header:has(.suggest__panel) .main-nav::after {
  content: "";
  position: absolute;
  inset: 0 0 -1px;
  background: var(--sluier);
}

/* The dropdown of a game: over the width of the content, under the menu row. */
.main-nav__list {
  position: relative;
}

.nav-item {
  position: static;
}

.nav-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: var(--space-5);
  right: var(--space-5);
  z-index: 30;
  padding: 28px 28px 22px;
  border: 1px solid var(--lijn);
  border-top: 0;
  border-radius: 0 0 var(--r-paneel) var(--r-paneel);
  background: var(--wit);
  box-shadow: var(--schaduw-paneel);
}

/* Without script the dropdown opens under the pointer. With script (shop.js, the main menu) the item with is-open has
   it: changing to another item keeps the panel and only changes its content, closing waits a moment. */
.main-nav:not(.is-scripted) .nav-item:hover > .nav-panel,
.nav-item.is-open > .nav-panel,
.nav-item:focus-within > .nav-panel {
  display: block;
}

.main-nav:not(.is-scripted) .nav-item:hover > .nav-item__link .nav-item__chevron,
.nav-item.is-open > .nav-item__link .nav-item__chevron,
.nav-item:focus-within > .nav-item__link .nav-item__chevron {
  transform: rotate(180deg);
}

/* D&D en accessoires per spel, deel C: two to four columns of links, then the tile at its fixed width. */
.nav-panel__grid {
  display: flex;
  gap: 40px;
}

.nav-panel__col {
  flex: 1 1 0;
  min-width: 0;
}

.nav-panel__grid > .nav-tile {
  flex: 0 0 360px;
}

.nav-panel__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Deel D: a long name in the dropdown Preorders goes on over two lines instead of being cut off; with more than two
   games the tile is narrower. */
.nav-panel .nav-panel__link--wrap {
  height: auto;
  min-height: 38px;
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 20px;
  white-space: normal;
}

/* The arrow of "Alle ..." follows the last word, also of a long name over two lines (after deel D). */
.nav-panel__more .icon-arrow {
  display: inline-block;
  vertical-align: -3px;
}

.nav-panel__grid--many > .nav-tile {
  flex-basis: 280px;
}

/* Deel D: the release date of a series in the dropdown Preorders, "13 NOV. ’26". */
.nav-panel__date {
  flex: none;
  color: var(--status-preorder);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mobile-menu .nav-panel__date {
  margin-left: var(--space-2);
}

/* Deel D: the page /preorders, a group per series with its release date and its cards. */
.preorder-games {
  margin: 0 0 var(--space-5);
}

.preorder-group {
  margin-top: 40px;
}

.preorder-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}

.preorder-group__empty {
  margin-top: 40px;
}

.nav-panel__heading {
  margin: 0 0 10px;
  color: var(--gedempt);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-panel__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 38px;
  margin: 0 -10px;
  padding: 4px 10px;
  border-radius: var(--r-veld);
  color: var(--inkt);
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}

.nav-panel__link:hover {
  background: var(--vlak);
}

/* 26 oktober 2026: a long name ("Andere rollenspelaccessoires") goes on over two lines. The dropdowns show no
   numbers of products any more. */
.nav-panel__name {
  min-width: 0;
  line-height: 20px;
  white-space: normal;
}

.nav-panel__link.nav-panel__more {
  justify-content: flex-start;
  gap: var(--space-1);
  color: var(--action);
  font-weight: 600;
}

/* The image tile: the next release of the game, a product photo in the white field (never cropped). */
.nav-tile {
  align-self: start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--lijn);
  border-radius: var(--r-kaart);
  color: var(--inkt);
  text-decoration: none;
}

.nav-tile:hover {
  border-color: var(--lijn-sterk);
}

.nav-tile__image {
  display: block;
  height: 120px;
  padding: var(--space-2);
  border-bottom: 1px solid var(--lijn);
  background: var(--wit);
}

.nav-tile__image .photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 26 oktober 2026: the image of the series fills the top of the tile (the tile rounds its corners), cropped at the
   point set for the series. */
.nav-tile__image--series {
  padding: 0;
}

.nav-tile__image--series .photo {
  object-fit: cover;
}

.nav-tile__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 14px 16px;
}

.nav-tile__label {
  display: block;
  color: var(--status-preorder);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-tile__name {
  display: block;
  margin-top: 2px;
  font-family: var(--letter);
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
}

.nav-tile .icon-arrow {
  flex: none;
  color: var(--action);
}

.nav-panel .nav-panel__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--lijn);
}

.quick-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--lijn);
  border-radius: var(--r-rond);
  color: var(--inkt);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.quick-link:hover {
  border-color: var(--lijn-sterk);
  background: var(--vlak);
}

.quick-link svg {
  color: var(--action);
}

/* The search suggestions: on a laptop over the width of the content, under the header row. */
.site-header .search {
  position: static;
}

.suggest {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: var(--space-5);
  right: var(--space-5);
  z-index: 30;
  color: var(--inkt);
}

.suggest:empty {
  display: none;
}

.suggest__panel,
.suggest__none {
  border: 1px solid var(--lijn);
  border-radius: var(--r-paneel);
  background: var(--wit);
  box-shadow: var(--schaduw-paneel);
}

.suggest__none {
  padding: var(--space-4) 20px;
}

.suggest__panel {
  display: grid;
  gap: 32px;
  max-height: calc(100vh - 140px);
  overflow: auto;
  padding: var(--space-5);
}

.suggest__panel--side {
  grid-template-columns: 280px minmax(0, 1fr);
}

.suggest__heading {
  margin: 0 0 var(--space-2);
  color: var(--gedempt);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.suggest__side [role="group"] + [role="group"] {
  margin-top: 22px;
}

.suggest__option > a {
  display: grid;
  align-items: center;
  gap: 14px;
  padding: var(--space-2) 10px;
  border-radius: var(--r-rij);
  color: var(--inkt);
  text-decoration: none;
}

.suggest__option.is-active > a,
.suggest__option > a:hover {
  background: var(--vlak);
}

.suggest__set {
  grid-template-columns: 44px minmax(0, 1fr);
}

.suggest__code {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--lijn);
  border-radius: var(--r-rond);
  background: var(--wit);
  color: var(--action);
  font-size: 11px;
  font-weight: 600;
}

.suggest__set-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

.suggest__meta {
  display: block;
  color: var(--gedempt);
  font-size: 13px;
  line-height: 18px;
}

.suggest__option > .suggest__kind {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px;
  font-size: 15px;
  line-height: 20px;
}

.suggest__products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1) 20px;
}

.suggest__item {
  grid-template-columns: 56px minmax(0, 1fr) auto;
}

.suggest__image {
  display: block;
  width: 56px;
  height: 56px;
  padding: var(--space-1);
  border: 1px solid var(--lijn);
  border-radius: var(--r-beeld);
  background: var(--wit);
}

.suggest__image img,
.suggest__image svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.suggest__series {
  display: block;
  color: var(--gedempt);
  font-size: 12px;
  line-height: 16px;
}

.suggest__name {
  display: -webkit-box;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.suggest__tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  margin-top: var(--space-1);
  padding: 0 var(--space-2);
  border-radius: var(--r-rond);
  background: var(--status-preorder-vlak);
  color: var(--status-preorder);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.suggest__price {
  font-family: var(--letter);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.suggest__option--all {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--lijn);
}

.suggest__option > .suggest__all {
  display: inline-flex;
  gap: 6px;
  color: var(--action);
  font-size: 15px;
  font-weight: 600;
}

.suggest mark {
  padding: 0 1px;
  border-radius: var(--r-mark);
  background: var(--tint);
  color: var(--action);
}

/* The compact header after scrolling (laptop, shop.js): one row of 64 px with "Assortiment", which opens the menu
   row under it. The space the header gives up stays below it, so the page does not jump. */
.assortment-button {
  display: none;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  height: 42px;
  padding: 0 16px;
  border: 1px solid var(--lijn);
  border-radius: var(--r-rond);
  background: var(--wit);
  color: var(--inkt);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.assortment-button:hover,
.assortment-button[aria-expanded="true"] {
  background: var(--vlak);
}

@media (min-width: 901px) {
  .site-header.is-compact {
    margin-bottom: calc(80px + 46px - 64px);
    box-shadow: var(--schaduw-kop);
  }

  .is-compact .site-header__inner {
    gap: 20px;
    height: 64px;
  }

  .is-compact .site-logo .logo {
    width: 203px; /* 48 px high in the compact header */
  }

  .is-compact .assortment-button {
    display: inline-flex;
  }

  .site-header.is-compact .search {
    height: 42px;
  }

  .is-compact .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border-top: 1px solid var(--lijn);
    border-bottom: 1px solid var(--lijn);
    background: var(--wit);
  }

  .is-compact.is-menu-open .main-nav {
    display: block;
  }
}

/* 26 oktober 2026: the main menu needs about 1038 px. From 901 to 1023 px the menu of the tablet (the menu button)
   instead of the row, also in the compact header (no "Assortiment" there); without the row the compact header gives
   up 16 px. From 1024 to 1039 px the items 2 px closer together on each side, so the row fits. */
@media (min-width: 901px) and (max-width: 1023px) {
  .main-nav,
  .is-compact.is-menu-open .main-nav {
    display: none;
  }

  .mobile-menu {
    display: block;
    margin-left: -10px;
  }

  .is-compact .assortment-button {
    display: none;
  }

  .site-header.is-compact {
    margin-bottom: calc(80px - 64px);
  }
}

@media (min-width: 1024px) and (max-width: 1039px) {
  .main-nav__list {
    padding-inline: calc(var(--space-5) - 13px);
  }

  .main-nav__list > li {
    padding-inline: 13px;
  }
}

/* 26 oktober 2026: the smallest phones (320 px): the logo a little smaller, so the buttons of the header keep their
   room. */
@media (max-width: 359px) {
  .site-logo .logo {
    width: 120px;
  }
}

/* Tablet and phone: the suggestions in one column. */
@media (max-width: 900px) {
  .suggest__panel,
  .suggest__panel--side {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    max-height: calc(100vh - 160px);
    padding: var(--space-4);
  }

  .suggest__products {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .suggest {
    left: 0;
    right: 0;
  }

  .site-header .search {
    position: absolute;
  }
}

/* ---------- Fase 4: de productkaart (DESIGN.md onderdeel 6, Main.png en A-lijst.png) ---------- */

/* One frame around the whole card; cards in a row are equally high (the grid stretches them) and the price line
   sits at the bottom of each, on the same height. */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 8px 8px 14px;
  border: 1px solid var(--lijn);
  border-radius: var(--r-kaart);
  background: var(--wit);
}

.product-card:hover {
  border-color: var(--lijn-sterk);
  box-shadow: var(--schaduw-kaart-aanwijzen);
}

/* The image: no border of its own, a fixed height so nothing jumps, centred and never cropped. */
.product-card__image {
  position: relative;
  height: 224px;
  padding: 12px;
  overflow: hidden;
  border-radius: var(--r-beeld);
  background: var(--wit);
}

.product-card__image img,
.product-card__image svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-card__labels {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.card-label {
  display: inline-flex;
  align-items: center;
  height: var(--t-label-hoogte);
  padding: 0 10px;
  border-radius: var(--r-rond);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.card-label--pre {
  background: var(--status-preorder-vlak);
  color: var(--status-preorder);
}

.product-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 6px;
}

/* The series takes its line also when empty, so the titles of a row start on the same height. */
.product-card__series {
  min-height: var(--t-reeks-lijn);
  overflow: hidden;
  color: var(--gedempt);
  font-size: var(--t-reeks);
  font-weight: 500;
  line-height: var(--t-reeks-lijn);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The title always takes two lines; a longer one is cut off. */
.product-card__name {
  display: -webkit-box;
  height: calc(2 * var(--t-kaarttitel-lijn));
  margin: 2px 0 0;
  overflow: hidden;
  font-family: var(--letter);
  font-size: var(--t-kaarttitel);
  font-weight: 600;
  line-height: var(--t-kaarttitel-lijn);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-card__name a {
  color: var(--inkt);
  text-decoration: none;
}

/* The title link covers the whole card; the focus ring goes round the card. */
.product-card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-kaart);
}

.product-card__name a:focus-visible {
  outline: none;
}

.product-card__name a:focus-visible::after {
  outline: var(--focus-dikte) solid var(--action);
  outline-offset: var(--focus-afstand);
}

.product-card__footer {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  margin-top: auto;
}

/* The price: euros large, cents small and raised, their top level with the top of the euros; never on two lines. */
.card-price {
  font-family: var(--letter);
  font-size: var(--t-prijs-kaart);
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.card-price sup {
  position: relative;
  top: -0.52em;
  margin-left: -0.2em;
  font-size: 0.58em;
  line-height: 0;
  vertical-align: baseline;
}

/* Herindeling L1 (27 oktober 2026): the button under the price over the full width of the card, 44 px, always with
   text: "In mandje" or "Reserveer" green, "Mail me" (bell) and "Vraag een prijs" white with a green line. */
.product-card__buy {
  position: relative;
  z-index: 1;
}

.card-buy {
  margin: 0;
}

.card-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 44px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--r-rond);
  background: var(--action);
  color: var(--wit);
  font-family: var(--letter);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.card-button:hover,
.product-card:hover .card-button {
  background: var(--action-hover);
}

.card-button--line,
.product-card:hover .card-button--line {
  background: var(--wit);
  color: var(--action);
  box-shadow: inset 0 0 0 1.5px var(--action);
}

.card-button--line:hover {
  background: var(--tint);
}

.card-button svg {
  flex: none;
}

.card-button__text,
.card-button__done {
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-button__done,
.card-button.is-added .card-button__text {
  display: none;
}

.card-button.is-added .card-button__done {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.card-button.is-added,
.product-card:hover .card-button.is-added {
  background: var(--tint);
  color: var(--action);
}

.card-button:disabled {
  cursor: progress;
}

@media (prefers-reduced-motion: no-preference) {
  .card-button {
    transition: background-color 0.15s ease;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .product-card {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .product-card__image .photo {
    transition: transform 0.2s ease, opacity 0.3s ease;
  }

  .product-card:hover .product-card__image .photo {
    transform: translateY(-3px);
  }
}

/* Phone (A-gsm, A-lijst-gsm): a smaller frame and image, the cart button 64 x 44. */
@media (max-width: 640px) {
  .product-card {
    gap: 10px;
    padding: 6px 6px 12px;
  }

  .product-card__image {
    height: 168px;
    padding: 8px;
  }

  .product-card__body {
    gap: 10px;
    margin: 0 4px;
  }
}

/* ---------- Fase 5: de startpagina (DESIGN.md onderdeel 7, Main.png en A-gsm.png) ---------- */

/* Fase 4, after review: the image field of a card keeps room on top for a label, with or without one, so a label
   never lies over the photo and every card in a row stays as high. The photo stays centred and whole. */
.product-card__image {
  padding: 40px 12px 12px;
}

@media (max-width: 640px) {
  .product-card__image {
    padding: 34px 8px 8px;
  }
}

.btn {
  font-weight: 600;
}

/* The second button: white with a green line (DESIGN.md onderdeel 6, Knoppen). */
.btn--line {
  background: var(--wit);
  color: var(--action);
  box-shadow: inset 0 0 0 1.5px var(--action);
}

.btn.btn--line:hover:not(:disabled) {
  background: var(--tint);
}

/* A link with an arrow: "Alle preorders →". */
.arrow-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--action);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.arrow-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 26 oktober 2026: on the overview Accessoires a long "Alle accessoires voor Dungeons & Dragons" goes on over two lines
   on a small phone (320 px) instead of out of the screen; the arrow follows the last word. */
.accessory-game .arrow-link {
  display: inline;
  white-space: normal;
}

.accessory-game .arrow-link .icon-arrow {
  display: inline-block;
  vertical-align: -3px;
}

/* A label in the colour of preorders, in capitals: "Preorder · verschijnt 13 nov. 2026". */
.home-label {
  margin: 0 0 var(--space-1);
  color: var(--status-preorder);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Top: the banner (or the next release) large, the next two releases next to it; their bottoms level. */

/* The banner as one whole: the image and under it the label, the title and the buttons, in one frame. */
.home-section .banner-frame {
  margin: 0;
}

/* The banner itself is in banner.css (also for its preview in the back office). */

/* The series as round chips. */

/* A block of the start page with its title and link. */
.home-section {
  padding-top: var(--space-7);
}

.home-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: 20px;
}

.home-head h2 {
  margin: 0;
  font-family: var(--letter);
  font-size: var(--t-sectie);
  font-weight: 600;
  line-height: var(--t-sectie-lijn);
}

/* The rows of product cards: five next to each other on a laptop; narrower, a row that slides sideways. */
.home-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
}

.home-row > .product-card:nth-child(n + 6) {
  display: none;
}

/* Below a wide laptop the rows slide sideways (native scroll, DESIGN.md onderdeel 8). */
@media (max-width: 1179px) {
  .home-row {
    grid-template-columns: none;
    grid-auto-columns: 220px;
    grid-auto-flow: column;
    margin-right: calc(-1 * var(--space-5));
    padding: 2px var(--space-5) 6px 2px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .home-row > .product-card {
    scroll-snap-align: start;
  }

  .home-row > .product-card:nth-child(n + 6) {
    display: flex;
  }
}

/* Phone (A-gsm): the chips and rows slide, the tiles 2 x 2. */
@media (max-width: 640px) {

  .home-section {
    padding-top: var(--space-6);
  }

  .home-head {
    margin-bottom: 14px;
  }

  .home-row {
    grid-auto-columns: 188px;
    gap: var(--space-3);
    margin-right: calc(-1 * var(--marge-gsm));
    padding-right: var(--marge-gsm);
  }

}

/* On a laptop the chips stay on one line: a chip that does not fit whole goes to a second line that is not shown,
   so no chip is ever cut off before "Alle reeksen". On a phone the line slides sideways. */

/* ---------- Na fase 5: labels, gedeelde knop en iconen op de kaart ---------- */

/* A label stays whole inside the image field, with the same margin left and right, from 360 px wide. */
.product-card__labels {
  right: 10px;
}

.card-label {
  max-width: 100%;
}

@media (max-width: 640px) {
  .product-card__labels {
    top: 8px;
    left: 8px;
    right: 8px;
  }

  .card-label {
    padding: 0 7px;
    letter-spacing: 0.02em;
  }
}

/* ---------- Fase 6: de productlijst (DESIGN.md onderdeel 7, A-lijst, A-lijst-gsm en A-filters-gsm) ---------- */

.breadcrumb {
  padding: 20px 0 6px;
  color: var(--gedempt);
  font-size: 13px;
}

.breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--inkt);
  text-decoration: underline;
}

.listing-head {
  margin-bottom: 28px;
}

/* The title with the number of products next to it, on the same baseline. */
.listing-head__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 14px;
}

.listing-head__title h1 {
  margin: 0;
  font-family: var(--letter);
  font-size: var(--t-paginatitel);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Laptop: the filter column (232 px) and the grid; the column starts on the height of the chips and Sorteer. The
   column is part of the page (decision of the owner, 19 oktober 2026): not sticky, no height or scrollbar of its own. */
.listing {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  column-gap: 40px;
  align-items: start;
}

.listing__filters {
  display: contents;
}

.filters__toggle {
  display: none;
}

.filters__toggle::-webkit-details-marker {
  display: none;
}

.filters__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 46px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--lijn);
}

.filters__title {
  margin: 0 auto 0 0;
  font-family: var(--letter);
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
}

.filters__clear,
.active-filters__clear {
  color: var(--action);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.filters__close {
  display: none;
}

.filters__groups {
  display: flex;
  flex-direction: column;
}

.filters .facet {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--lijn);
  min-width: 0;
}

.filters .facet legend {
  float: left;
  width: 100%;
  margin: 0 0 4px;
  padding: 0;
  font-size: var(--t-tekst);
  font-weight: 600;
}

.facet__values {
  display: grid;
  gap: 10px;
}

.filters .check {
  align-items: flex-start;
  gap: 10px;
  font-size: var(--t-tekst);
  line-height: 20px;
}

.filters .check input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--action);
}

.filters .check__label {
  min-width: 0;
}

.filters .facet__more {
  color: var(--action);
  font-weight: 600;
}

/* With script the list follows every change: the button at the bottom only exists in the panel on a phone. */
.js .filters__foot {
  display: none;
}

.filters__foot {
  padding-top: 20px;
}

/* The chips of the active filters with "Wis alles", Sorteer on the right of the same line. */
.listing-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  min-height: 46px;
  margin-bottom: 20px;
}

.active-filters {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) 10px;
  margin: 0;
  padding: 0;
}

.active-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px 0 14px;
  border-radius: var(--r-rond);
  background: var(--tint);
  color: var(--action);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.active-filter:hover {
  box-shadow: inset 0 0 0 1px var(--action);
}

.active-filters__clear {
  margin-left: 4px;
}

.sort-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex: none;
}

/* The chevron of the select (A-lijst), over the right side; a click goes through to the select. */
.sort-box__chevron {
  position: absolute;
  right: 16px;
  top: 50%;
  display: flex;
  margin-top: -8px;
  color: var(--inkt);
  pointer-events: none;
}

.sort-box__label {
  color: var(--gedempt);
  font-size: 14px;
}

.sort-box select {
  height: 46px;
  padding: 0 40px 0 16px;
  border: 1px solid var(--veldrand);
  border-radius: var(--r-rond);
  background: var(--wit);
  color: var(--inkt);
  font-family: var(--letter);
  font-size: var(--t-tekst);
  font-weight: 600;
  appearance: none;
  cursor: pointer;
}

.sort-box select:hover {
  border-color: var(--lijn-sterk);
}

/* The cards per row of a list: see herindeling L2 at the end of this file. */
.listing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* "8 van 20 producten", the bar and "Toon meer". */
.more {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 40px;
}

.more:empty {
  display: none;
}

.more__button {
  min-height: 44px;
  padding: 0 24px;
}

/* Phone and tablet, up to 900 px: no filter column. The button Filters and Sorteer next to each other on one line,
   the chips under it; the filters are a panel from below (shop.js). Two cards per row. */
@media (max-width: 900px) {
  .listing {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 12px;
  }

  .listing__main,
  .listing-bar {
    display: contents;
  }

  .filters {
    grid-row: 1;
    grid-column: 1 / -1;
    margin-bottom: 12px;
  }

  .sort-box {
    grid-row: 2;
    grid-column: 1 / -1;
    margin: 0 0 12px;
  }

  .js .filters {
    grid-column: 1;
  }

  .js .sort-box {
    grid-row: 1;
    grid-column: 2;
  }

  .sort-box__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .sort-box select {
    width: 100%;
    min-width: 0;
    padding: 0 36px 0 14px;
    text-align: center;
    text-align-last: center;
    text-overflow: ellipsis;
  }

  .sort-box__chevron {
    right: 14px;
  }

  .active-filters {
    grid-column: 1 / -1;
    margin-bottom: 16px;
  }

  #results {
    grid-column: 1 / -1;
  }

  .filters__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--veldrand);
    border-radius: var(--r-rond);
    background: var(--wit);
    font-size: var(--t-tekst);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
  }

  .filters__toggle:hover {
    border-color: var(--lijn-sterk);
  }

  .filters__badge {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--r-rond);
    background: var(--action);
    color: var(--wit);
    font-size: 12px;
    font-weight: 600;
  }

  /* Without script: a plain expander under the button. */
  .filters[open] .filters__panel {
    margin-top: 12px;
  }

  .listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* With script: the panel from below. Closed it does not exist; open it lies over the page with a veil behind it,
     and only its groups scroll. */
  .js .filters__panel {
    display: none;
  }

  .js.filters-open body {
    overflow: hidden;
  }

  .js.filters-open .filters::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 80;
    background: var(--sluier);
  }

  .js.filters-open .filters__panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 81;
    display: flex;
    flex-direction: column;
    max-height: 88dvh;
    margin: 0;
    padding: 22px var(--marge-gsm) 0;
    border-radius: var(--r-paneel) var(--r-paneel) 0 0;
    background: var(--wit);
    box-shadow: var(--schaduw-paneel);
  }

  /* The grip on top of the panel. */
  .js.filters-open .filters__panel::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: var(--r-rond);
    background: var(--lijn);
  }

  .js .filters__head {
    flex: none;
    padding-bottom: 8px;
    border-bottom: 0;
  }

  .js .filters__title {
    font-family: var(--letter);
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
  }

  .js .filters__close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--lijn);
    border-radius: var(--r-rond);
    background: var(--wit);
    color: var(--inkt);
    cursor: pointer;
  }

  .js .filters__groups {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 0 calc(-1 * var(--marge-gsm));
    padding: 0 var(--marge-gsm);
  }

  .js .filters .facet {
    gap: 10px;
    padding: 10px 0;
    border-bottom: 0;
  }

  .js .filters .facet legend {
    margin-bottom: 0;
  }

  /* The values as chips: ticked is green with a check mark. */
  .js .facet__values {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .js .filters .check {
    position: relative;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--veldrand);
    border-radius: var(--r-rond);
    background: var(--wit);
    font-size: 14px;
    font-weight: 600;
  }

  .js .filters .check input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .js .filters .check:has(input:checked) {
    border-color: var(--action);
    background: var(--action);
    color: var(--wit);
  }

  .js .filters .check:has(input:checked) .check__label::before {
    content: "✓ ";
  }

  .js .filters .check:has(input:focus-visible) {
    outline: 2px solid var(--action);
    outline-offset: 3px;
  }

  .js .filters__foot {
    display: block;
    flex: none;
    padding: 16px 0 calc(16px + env(safe-area-inset-bottom));
  }

  .filters__done {
    width: 100%;
    min-height: 52px;
    font-size: 16px;
  }
}

/* Phone, up to 600 px (herindeling L2): two cards per line, see the end of this file. */
@media (max-width: 600px) {
  .listing-head {
    margin-bottom: 20px;
  }

  .listing-head__title h1 {
    font-size: 30px;
  }
}

/* A small phone: the sort select keeps its whole text next to the button Filters. */
@media (max-width: 380px) {
  .sort-box select,
  .filters__toggle {
    font-size: 14px;
  }

  .sort-box select {
    padding: 0 30px 0 10px;
  }

  .sort-box__chevron {
    right: 10px;
  }
}

/* ---------- Fase 7: de productpagina (DESIGN.md onderdeel 7, A-product, A-product-gsm, A-koopbalk-gsm) ---------- */

.product-back {
  display: none;
}

/* Photos on the left, the info on the right; below them Beschrijving as wide as the photos and Productgegevens as
   wide as the info, starting on the same height. */
.product-page {
  display: grid;
  grid-template-columns: minmax(0, 584fr) minmax(0, 560fr);
  grid-template-areas:
    "media info"
    "more specs";
  column-gap: 56px;
  row-gap: 56px;
  align-items: start;
  margin-top: 4px;
}

.product-page__media {
  grid-area: media;
  min-width: 0;
}

/* The photo: one frame, white, the photo centred and whole; arrows left and right, the magnifier bottom right. */
.gallery {
  outline-offset: 3px;
}

.gallery__stage {
  position: relative;
  height: 480px;
  overflow: hidden;
  border: 1px solid var(--lijn);
  border-radius: var(--r-kaart);
  background: var(--wit);
}

.gallery__open {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 40px 72px;
  cursor: zoom-in;
}

.gallery__open:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: -5px;
}

.gallery__main,
.gallery__stage--empty img,
.gallery__stage--empty svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gallery__stage--empty {
  display: flex;
  padding: 40px;
}

.gallery__arrow,
.gallery__zoom,
.lightbox__arrow,
.lightbox__close {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--lijn);
  border-radius: var(--r-rond);
  background: var(--wit);
  color: var(--inkt);
  cursor: pointer;
}

.gallery__arrow:hover,
.gallery__zoom:hover,
.lightbox__arrow:hover,
.lightbox__close:hover {
  border-color: var(--lijn-sterk);
}

.gallery__arrow {
  top: 50%;
  margin-top: -22px;
}

.gallery__arrow--prev {
  left: 14px;
}

.gallery__arrow--next {
  right: 14px;
}

.gallery__zoom {
  right: 14px;
  bottom: 14px;
}

.gallery__dots {
  display: none;
}

.product-photos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
}

.product-photos__thumb {
  display: flex;
  width: 86px;
  height: 86px;
  padding: 8px;
  border: 1px solid var(--lijn);
  border-radius: var(--r-beeld);
  background: var(--wit);
}

.product-photos__thumb:hover {
  border-color: var(--lijn-sterk);
}

.product-photos__thumb[aria-current="true"] {
  border: 2px solid var(--action);
  padding: 7px;
}

.product-photos__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The info: series, the full name, label and price, the quantity and the button. */
.product-page__series {
  margin: 12px 0 0;
  color: var(--gedempt);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-page__title {
  margin: 10px 0 0;
  font-family: var(--letter);
  font-size: 34px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* The label under the title, the price under it; since Impeccable (23 oktober 2026) on a phone too. */
.product-page__price-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 14px;
}

.product-page__price {
  margin: 0;
  font-family: var(--letter);
  font-size: 36px;
  line-height: 1.1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.product-page__price span {
  margin-left: 4px;
  color: var(--gedempt);
  font-family: var(--letter);
  font-size: 14px;
  font-weight: 400;
}

.product-page .buy {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.qty {
  display: flex;
  align-items: center;
  flex: none;
  height: 52px;
  padding: 0 4px;
  border: 1px solid var(--veldrand);
  border-radius: var(--r-rond);
  background: var(--wit);
}

.qty__button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-rond);
  background: none;
  color: var(--inkt);
  cursor: pointer;
}

.qty__button:hover {
  background: var(--vlak);
}

.qty__input {
  width: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--inkt);
  font-family: var(--letter);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.product-page .buy__button {
  flex: 1;
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  font-size: 16px;
}

.product-page__in-cart {
  margin: 10px 0 0;
  color: var(--gedempt);
  font-size: 14px;
}

.product-page .note {
  margin-top: 22px;
}

/* Herindeling L1: not to be ordered now: one button with the words of the status (green, bell or price label), as
   high as the buy button; under it a smaller link (the offer, or the notice when the price is on request). */
.notice-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 22px;
}

.notice-actions__button {
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  font-size: 16px;
}

.notice-actions__more {
  color: var(--action);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* "Uitverkocht" next to the price, in the form of the other labels. */
.card-label--out {
  background: var(--status-uit-vlak);
  color: var(--status-uit);
}

/* The list with icons, under a line. */
.product-facts {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--lijn);
}

.product-facts li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--t-tekst);
  line-height: 20px;
}

.product-facts a {
  color: inherit;
  text-decoration: none;
}

.product-facts a:hover {
  text-decoration: underline;
}

.product-facts__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-rond);
  background: var(--tint);
  color: var(--action);
}

/* A fold: "Zo werkt een preorder" in a frame; Beschrijving and Productgegevens are plain blocks on a laptop. */
.fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  list-style: none;
  cursor: pointer;
}

.fold > summary::-webkit-details-marker {
  display: none;
}

.fold > summary svg {
  flex: none;
}

.fold[open] > summary svg {
  transform: rotate(180deg);
}

[data-fold-wide] > summary {
  cursor: default;
}

[data-fold-wide] > summary svg {
  display: none;
}

[data-fold-wide] h2 {
  margin: 0 0 14px;
  font-family: var(--letter);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 600;
}

.product-description .fold__body p,
.product-description .fold__body ul {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 26px;
}

.product-description .fold__body ul {
  padding-left: 22px;
}

.product-related {
  margin-top: 64px;
}

.product-related .section__head h2 {
  margin: 0;
  font-family: var(--letter);
  font-size: var(--t-sectie);
  line-height: var(--t-sectie-lijn);
  font-weight: 600;
}

.product-facts .nowrap {
  white-space: nowrap;
}

/* The large photo over the screen: count and close button on top, the photo, arrows at the sides, the thumbnails
   below. A click beside the photo closes it (shop.js). */
.lightbox {
  width: calc(100vw - 48px);
  height: calc(100dvh - 48px);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-paneel);
  background: var(--wit);
  color: var(--inkt);
}

.lightbox::backdrop {
  background: var(--sluier);
}

.lightbox[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.lightbox__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 12px 12px 0 24px;
}

.lightbox__count {
  margin: 0;
  color: var(--gedempt);
  font-size: var(--t-tekst);
  font-variant-numeric: tabular-nums;
}

.lightbox__close {
  position: static;
}

.lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 8px 88px;
  overflow: hidden;
  touch-action: none;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center;
  user-select: none;
  cursor: zoom-in;
}

.lightbox__stage.is-zoomed .lightbox__img {
  cursor: grab;
}

.lightbox__arrow {
  top: 50%;
  margin-top: -22px;
}

.lightbox__arrow--prev {
  left: 24px;
}

.lightbox__arrow--next {
  right: 24px;
}

.lightbox__thumbs {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 16px 24px 20px;
  overflow-x: auto;
  scrollbar-width: none;
}

.lightbox__thumb {
  display: flex;
  flex: none;
  width: 64px;
  height: 64px;
  padding: 6px;
  border: 1px solid var(--lijn);
  border-radius: var(--r-beeld);
  background: var(--wit);
  cursor: pointer;
}

.lightbox__thumb[aria-current="true"] {
  border: 2px solid var(--action);
  padding: 5px;
}

.lightbox__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] {
    animation: lightbox-in 0.2s ease;
  }

  .fold > summary svg {
    transition: transform 0.2s ease;
  }
}

/* The buy bar on a phone (A-koopbalk-gsm): the short name and the price on the left, the button on the right. */
.buy-bar__info {
  display: grid;
  min-width: 0;
}

.buy-bar__name {
  overflow: hidden;
  color: var(--gedempt);
  font-size: 13px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buy-bar__price {
  font-family: var(--letter);
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .buy-bar {
    padding: 12px var(--marge-gsm) calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--lijn);
    background: var(--wit);
    box-shadow: var(--schaduw-kop);
  }

  .buy-bar .buy-bar__button {
    flex: none;
    max-width: none;
    gap: 8px;
    height: 48px;
    padding: 0 20px;
    font-size: 16px;
  }
}

/* A narrower laptop or a tablet: everything under each other. */
@media (max-width: 860px) {
  .product-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "media"
      "info"
      "more"
      "specs";
    row-gap: 0;
  }

  .product-page__price-row {
    gap: 10px;
  }

  [data-fold-wide] {
    margin: 0 calc(-1 * var(--marge-gsm));
    padding: 0 var(--marge-gsm);
    border-top: 1px solid var(--lijn);
  }

  [data-fold-wide] > summary {
    min-height: 56px;
    cursor: pointer;
  }

  [data-fold-wide] > summary svg {
    display: block;
  }

  [data-fold-wide] h2 {
    margin: 0;
    font-family: var(--letter);
    font-size: 17px;
    font-weight: 600;
  }

  [data-fold-wide] .fold__body {
    padding-bottom: 16px;
  }

  .product-description .fold__body p,
  .product-description .fold__body ul {
    font-size: var(--t-tekst);
    line-height: 24px;
  }

  .product-related {
    margin-top: 40px;
  }
}

/* Phone: back link instead of the crumbs, a lower photo with dots and swiping, the magnifier top right. */
@media (max-width: 640px) {
  .product-crumbs {
    display: none;
  }

  .product-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 6px 0 4px;
    color: var(--gedempt);
    font-size: var(--t-tekst);
    font-weight: 600;
    text-decoration: none;
  }

  .gallery__stage {
    height: 300px;
  }

  .gallery__open {
    padding: 36px 48px 44px;
  }

  .gallery__arrow,
  .product-photos {
    display: none;
  }

  .gallery__zoom {
    top: 12px;
    right: 12px;
    bottom: auto;
  }

  .gallery__dots {
    list-style: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
  }

  .gallery__dots li {
    width: 6px;
    height: 6px;
    border-radius: var(--r-rond);
    background: var(--lijn-sterk);
  }

  .gallery__dots li.is-current {
    width: 18px;
    background: var(--action);
  }

  .product-page__series {
    margin-top: 20px;
  }

  .product-page__title {
    font-size: 26px;
  }

  .product-page__price {
    font-size: 30px;
  }

  .qty {
    padding: 0 2px;
  }

  .product-page .buy__button {
    padding: 0 16px;
  }

  .notice-actions {
    align-items: stretch;
  }

  .notice-actions__more {
    align-self: flex-start;
    padding: 12px 0;
  }

  /* The large photo fills the screen; swipe between photos, pinch to zoom. */
  .lightbox {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }

  .lightbox__top {
    padding: 8px 8px 0 var(--marge-gsm);
  }

  .lightbox__stage {
    padding: 0;
  }

  .lightbox__arrow {
    display: none;
  }

  .lightbox__thumbs {
    justify-content: flex-start;
    padding: 12px var(--marge-gsm) calc(16px + env(safe-area-inset-bottom));
  }

  .lightbox__thumb {
    width: 52px;
    height: 52px;
  }
}

/* ---------- Fase 8: het mandje (DESIGN.md onderdeel 7, A-paneel, A-paneel-gsm, A-mandje, A-mandje-gsm, A-leeg-gsm) ---------- */

/* The panel: from the right on a laptop (440 px), from below on a phone. Head and foot stay, only the lines scroll.
   While it is open the page behind it does not scroll: one scrollbar, that of the panel. */
html:has(.drawer[open]) {
  overflow: hidden;
}

.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(440px, 100%);
  max-width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--wit);
  color: var(--inkt);
  box-shadow: var(--schaduw-paneel);
}

.drawer[open] {
  display: flex;
  flex-direction: column;
}

.drawer::backdrop {
  background: var(--sluier);
}

.drawer__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.drawer__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 68px;
  padding: 12px 18px 12px 24px;
  border-bottom: 1px solid var(--lijn);
}

.drawer__title {
  margin: 0;
  font-family: var(--letter);
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
}

.drawer__title span {
  margin-left: 4px;
  color: var(--gedempt);
  font-family: var(--letter);
  font-size: var(--t-tekst);
  font-weight: 400;
}

.drawer__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--lijn);
  border-radius: var(--r-rond);
  background: var(--wit);
  color: var(--inkt);
  cursor: pointer;
}

.drawer__close:hover {
  border-color: var(--lijn-sterk);
}

.drawer__scroll {
  flex: 1;
  min-height: 0;
  padding: 0 24px;
  overflow-y: auto;
}

.drawer__message {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--tint);
  color: var(--action);
  font-size: 14px;
  font-weight: 600;
}

.drawer__empty {
  margin: 32px 0;
  color: var(--gedempt);
  text-align: center;
}

.drawer__lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer__foot {
  flex: none;
  padding: 18px 24px 24px;
  border-top: 1px solid var(--lijn);
  background: var(--wit);
}

.drawer__actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.drawer__actions .btn {
  flex: 1;
  min-height: 50px;
}

@media (prefers-reduced-motion: no-preference) {
  .drawer[open] {
    animation: panel-from-right 0.25s ease;
  }

  .drawer[open]::backdrop {
    animation: veil-in 0.25s ease;
  }

  .drawer.is-closing {
    animation: panel-to-right 0.25s ease forwards;
  }

  .drawer.is-closing::backdrop {
    animation: veil-out 0.25s ease forwards;
  }
}

@keyframes panel-from-right {
  from { transform: translateX(100%); }
}

@keyframes panel-to-right {
  to { transform: translateX(100%); }
}

@keyframes panel-from-below {
  from { transform: translateY(100%); }
}

@keyframes panel-to-below {
  to { transform: translateY(100%); }
}

@keyframes veil-in {
  from { opacity: 0; }
}

@keyframes veil-out {
  to { opacity: 0; }
}

/* One line of the cart, on the page and in the panel: photo, series, short title, label, quantity and
   "Verwijderen", the price of the line on the right. */
.cart-item {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  gap: 0 14px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--lijn);
}

.cart-item__image {
  display: flex;
  width: 78px;
  height: 78px;
  padding: 8px;
  border: 1px solid var(--lijn);
  border-radius: var(--r-beeld);
  background: var(--wit);
}

.cart-item__image img,
.cart-item__image svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cart-item__info {
  min-width: 0;
}

.cart-item__series {
  margin: 0;
  color: var(--gedempt);
  font-size: var(--t-reeks);
  line-height: var(--t-reeks-lijn);
}

.cart-item__name {
  display: block;
  color: var(--inkt);
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
  text-decoration: none;
}

.cart-item__name:hover {
  text-decoration: underline;
}

.cart-item__label {
  margin-top: 6px;
}

.cart-item__warning {
  margin: 6px 0 0;
  color: var(--status-fout);
  font-size: 13px;
}

.cart-item__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 12px;
}

.cart-item__qty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qty--small {
  height: 40px;
}

.qty--small .qty__button {
  width: 32px;
  height: 34px;
}

.qty--small .qty__input {
  width: 26px;
  font-size: 15px;
}

.cart-item__remove {
  color: var(--gedempt);
  font-size: 14px;
}

.cart-item__price {
  margin: 0;
  font-family: var(--letter);
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Subtotal, shipping and the total. */
.cart-totals {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--lijn);
}

.cart-totals__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--t-tekst);
}

.cart-totals__row > :last-child {
  white-space: nowrap;
}

.cart-totals__free {
  color: var(--action);
  font-weight: 600;
}

.cart-totals__row--total {
  align-items: center;
  margin-top: 4px;
  font-size: 17px;
  font-weight: 700;
}

.cart-totals__row--total small {
  color: var(--gedempt);
  font-size: 13px;
  font-weight: 400;
}

.cart-totals__row--total .tabular {
  font-family: var(--letter);
  font-size: 26px;
  line-height: 32px;
  font-weight: 700;
  white-space: nowrap;
}

/* The bar of the shipping rules: the text with a tick once free, a thin green track. In the panel without the amounts
   under it; on the page in a frame with the amounts. */
.steps-bar {
  margin: 0;
}

.steps-bar__text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-tekst);
  font-weight: 600;
}

.steps-bar__text svg {
  flex: none;
  color: var(--action);
}

.steps-bar__track {
  height: 5px;
  margin: 10px 0 0;
  background: var(--lijn);
}

.steps-bar__fill {
  background: var(--action);
}

.steps-bar__mark {
  width: 14px;
  height: 14px;
  background: var(--wit);
  box-shadow: inset 0 0 0 2px var(--lijn-sterk);
}

.steps-bar__mark svg {
  display: none;
}

.steps-bar__mark.is-reached {
  background: var(--action);
  box-shadow: none;
}

.steps-bar--compact .steps-bar__mark {
  display: none;
}

.steps-bar__steps {
  height: 34px;
  margin: 8px 0 0;
}

.steps-bar__step {
  color: var(--gedempt);
}

.steps-bar__step.is-reached {
  color: var(--action);
}

.steps-bar__step:last-child {
  transform: translateX(-100%);
}

.steps-bar__from {
  font-weight: 600;
}

/* The bar of the steps of checkout (DESIGN.md onderdeel 7, Stappenbalk). */
.checkout-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(620px, 100%);
  margin: 28px auto 32px;
  padding: 0;
}

.checkout-steps__step {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--gedempt);
  font-size: var(--t-tekst);
  text-align: center;
}

.checkout-steps__step + .checkout-steps__step::before {
  content: "";
  position: absolute;
  top: 16px;
  left: calc(-50% + 26px);
  right: calc(50% + 26px);
  height: 2px;
  background: var(--lijn);
}

.checkout-steps__step.is-done::before,
.checkout-steps__step.is-current::before {
  background: var(--action);
}

.checkout-steps__dot {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--lijn-sterk);
  border-radius: var(--r-rond);
  background: var(--wit);
  font-weight: 600;
}

.checkout-steps__step.is-done .checkout-steps__dot,
.checkout-steps__step.is-current .checkout-steps__dot {
  border-color: var(--action);
  background: var(--action);
  color: var(--wit);
}

.checkout-steps__step.is-current .checkout-steps__dot {
  box-shadow: 0 0 0 4px var(--tint);
}

.checkout-steps__step.is-current .checkout-steps__name {
  color: var(--inkt);
  font-weight: 600;
}

/* The cart page: the title with the number, the lines on the left, the overview on the right. */
.cart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 14px;
  margin-bottom: 20px;
}

.cart-head h1 {
  margin: 0;
  font-family: var(--letter);
  font-size: var(--t-paginatitel);
  line-height: 1.15;
  font-weight: 600;
}

.cart-head__count {
  margin: 0;
  color: var(--gedempt);
  font-size: var(--t-tekst);
}

.cart-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 383px;
  column-gap: 56px;
  align-items: start;
}

.cart-page__main > .steps-bar {
  padding: 18px 20px 6px;
  border: 1px solid var(--lijn);
  border-radius: 12px;
}

.cart-page__lines {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.cart-page .cart-item {
  grid-template-columns: 106px minmax(0, 1fr) auto;
  gap: 0 18px;
}

.cart-page .cart-item__image {
  width: 106px;
  height: 106px;
  padding: 12px;
}

.cart-page .cart-item__name {
  font-size: 17px;
  line-height: 23px;
  font-weight: 600;
}

.cart-page .cart-item__price {
  font-size: 22px;
  line-height: 28px;
}

.cart-page .qty--small {
  height: 42px;
}

.cart-overview {
  padding: 24px;
  border: 1px solid var(--lijn);
  border-radius: var(--r-kaart);
  background: var(--wit);
}

.cart-overview__title {
  margin: 0;
  font-family: var(--letter);
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
}

.cart-overview .cart-totals {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

.cart-overview .cart-totals__row--total {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--lijn);
}

.cart-overview__cta {
  width: 100%;
  min-height: 52px;
  margin-top: 20px;
  font-size: 16px;
}

.cart-overview__pay {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--lijn);
}

.cart-overview__pay .payment-logos {
  justify-content: center;
}

.cart-suggest,
.cart-next {
  margin-top: 56px;
}

/* An empty cart (A-leeg-gsm): the icon in a light circle, two lines and the button, centred. */
.cart-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 48px 0 8px;
  text-align: center;
}

.cart-empty__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 6px;
  border-radius: var(--r-rond);
  background: var(--tint);
  color: var(--action);
}

.cart-empty__title {
  margin: 0;
  font-family: var(--letter);
  font-size: 30px;
  line-height: 36px;
  font-weight: 600;
}

.cart-empty__text {
  margin: 0;
  color: var(--gedempt);
  font-size: 16px;
}

.cart-empty__button {
  min-height: 50px;
  margin-top: 14px;
  padding: 0 24px;
  font-size: 16px;
}

/* Under each other from 900 px: the overview under the lines. */
@media (max-width: 900px) {
  .cart-page {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }
}

/* Phone: the panel from below; the steps closer, the lines with a smaller photo. */
@media (max-width: 640px) {
  .drawer {
    inset: auto 0 0 0;
    width: 100%;
    height: auto;
    max-height: 92dvh;
    border-radius: var(--r-paneel) var(--r-paneel) 0 0;
  }

  .drawer__head {
    padding: 12px 12px 12px var(--marge-gsm);
  }

  .drawer__scroll {
    padding: 0 var(--marge-gsm);
  }

  .drawer__foot {
    padding: 14px var(--marge-gsm) calc(16px + env(safe-area-inset-bottom));
  }

  @media (prefers-reduced-motion: no-preference) {
    .drawer[open] {
      animation-name: panel-from-below;
    }

    .drawer.is-closing {
      animation-name: panel-to-below;
    }
  }

  .checkout-steps {
    margin: 16px auto 22px;
  }

  .checkout-steps__step {
    font-size: 14px;
    line-height: 18px;
  }

  .cart-head h1 {
    font-size: 30px;
  }

  .cart-page .cart-item {
    grid-template-columns: 80px minmax(0, 1fr) auto;
    gap: 0 12px;
  }

  .cart-page .cart-item__image {
    width: 80px;
    height: 80px;
    padding: 8px;
  }

  .cart-page .cart-item__name {
    font-size: 16px;
    line-height: 21px;
    font-weight: 600;
  }

  .cart-page .cart-item__price {
    font-size: 18px;
    line-height: 22px;
  }

  .cart-page__main > .steps-bar {
    padding: 14px 16px 4px;
  }

  /* On a phone only the amounts under the bar (A-mandje-gsm); what each step gives stays for screen readers. */
  .steps-bar__steps {
    height: 20px;
  }

  .steps-bar__gives {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .cart-next,
  .cart-suggest {
    margin-top: 40px;
  }

  .cart-overview {
    padding: 18px var(--marge-gsm) 20px;
  }

  .cart-overview__title {
    display: none;
  }

  .cart-overview .cart-totals {
    margin-top: 0;
  }

  .cart-overview__pay {
    display: none;
  }
}

/* ---------- Fase 9b: afrekenen (DESIGN.md onderdeel 7, A-afrekenen, A-afrekenen-gsm) ---------- */

/* Laptop: three columns, 400 px | the rest | 340 px. The form gives its two columns to the grid. */
.checkout-grid {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr) 340px;
  column-gap: 32px;
  align-items: start;
  margin-bottom: 48px;
}

.checkout-grid > .checkout {
  display: contents;
}

.checkout-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  min-width: 0;
}

/* One column that never grows with a long text inside (the options and the points). */
.checkout-block,
.ship-options,
.pickup {
  grid-template-columns: minmax(0, 1fr);
}

.checkout-block {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.checkout-block__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--letter);
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
}

/* Fields: the label on one line, fields next to each other on exactly the same height. */
.checkout-page .field {
  gap: 6px;
  min-width: 0;
}

.checkout-page .field label {
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-page .field input {
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--veldrand);
  border-radius: var(--r-veld);
  background: var(--wit);
  color: var(--inkt);
  font-size: 16px;
}

.checkout-page .field input::placeholder {
  color: var(--gedempt);
  opacity: 0.8;
}

.checkout-page .field input:focus {
  border-color: var(--action);
}

.checkout-page .field input[readonly] {
  background: var(--vlak);
  color: var(--gedempt);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.field-row--street {
  grid-template-columns: minmax(0, 1fr) 68px 96px;
}

.field-row--place {
  grid-template-columns: 110px minmax(0, 1fr);
}

/* A switch (DESIGN.md onderdeel 6): a light field with round buttons, the chosen one white with a light shadow. */
.switch {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-rond);
  background: var(--vlak);
}

.switch__option {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--r-rond);
  color: var(--gedempt);
  font-size: var(--t-tekst);
  font-weight: 600;
  cursor: pointer;
}

.switch__option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.switch__option:has(input:checked) {
  background: var(--wit);
  color: var(--inkt);
  box-shadow: var(--schaduw-keuze);
}

.switch__option:has(input:focus-visible) {
  outline: 2px solid var(--action);
  outline-offset: 3px;
}

.switch--small {
  display: inline-grid;
}

.switch--small .switch__option {
  min-height: 36px;
  font-size: 14px;
}

/* A tick box with its words. */
.tick {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--t-tekst);
  line-height: 20px;
  cursor: pointer;
}

.tick input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--action);
}

.tick.field--error {
  color: var(--status-fout);
}

.checkout-block > .tick + .tick {
  margin-top: -6px;
}

.billing {
  display: none;
  gap: 14px;
  padding-top: 4px;
}

.checkout:has([data-billing-toggle]:checked) .billing {
  display: grid;
}

.billing__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.checkout-saved {
  margin: 0;
}

.checkout-account {
  display: none;
}

.checkout:has([data-account-toggle]:checked) .checkout-account {
  display: block;
}

.checkout-note {
  margin: 0;
  color: var(--gedempt);
  font-size: 13px;
  line-height: 19px;
}

.checkout-note a {
  color: var(--action);
}

.checkout-note--center {
  text-align: center;
}

/* The shipping options: one row each, radio, logo, title and delivery time, price on the right. */
.ship-options {
  display: grid;
  gap: 10px;
}

.ship-option {
  position: relative;
  display: grid;
  grid-template-columns: 20px 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 12px 16px;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  background: var(--wit);
  cursor: pointer;
}

.ship-option:hover {
  border-color: var(--lijn-sterk);
}

.ship-option:has(input:checked) {
  padding: 11px 15px;
  border: 2px solid var(--action);
}

.ship-option input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--action);
}

.ship-option__logo {
  display: grid;
  place-items: center;
  height: 40px;
  padding: 4px 6px;
  border: 1px solid var(--lijn);
  border-radius: 8px;
  background: var(--wit);
}

.ship-option__logo .carrier-logo {
  max-width: 100%;
  max-height: 28px;
}

.ship-option__logo .carrier-mark {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.ship-option__text {
  display: grid;
  min-width: 0;
}

.ship-option__title {
  font-size: var(--t-tekst);
  font-weight: 600;
  line-height: 20px;
}

.ship-option__time {
  color: var(--gedempt);
  font-size: 13px;
  line-height: 18px;
}

.ship-option__price {
  font-family: var(--letter);
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
}

.ship-option__price--free {
  color: var(--action);
}

/* The chooser of service points. */
.pickup {
  display: grid;
  gap: 12px;
  margin-top: 4px;
  padding: 16px;
  border: 1px solid var(--lijn);
  border-radius: 14px;
}

.pickup__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.pickup__search {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pickup__field {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 46px;
  padding: 0 4px 0 14px;
  border: 1px solid var(--veldrand);
  border-radius: var(--r-rond);
  background: var(--wit);
}

.pickup__field svg {
  flex: none;
  color: var(--gedempt);
}

.pickup__field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-size: 15px;
}

.pickup__field:focus-within {
  border-color: var(--action);
}

.pickup__go {
  flex: none;
  min-height: 36px;
  padding: 0 16px;
  font-size: 14px;
}

.pickup__locate {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--lijn);
  border-radius: var(--r-rond);
  background: var(--wit);
  color: var(--action);
  cursor: pointer;
}

.pickup__locate[hidden] {
  display: none;
}

.pickup [data-locate-note]:empty {
  display: none;
}

.pickup__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.pickup__count {
  color: var(--gedempt);
  font-size: 13px;
}

/* The points in one frame with thin lines; the chosen one light green. */
.pickup__list {
  overflow: hidden;
  border: 1px solid var(--lijn);
  border-radius: 12px;
}

.pickup-point {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
}

.pickup-point + .pickup-point {
  border-top: 1px solid var(--lijn);
}

.pickup-point:has(input:checked) {
  background: var(--tint);
}

.pickup-point input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--action);
}

.pickup-point__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pickup-point__name {
  font-size: var(--t-tekst);
  font-weight: 600;
  line-height: 20px;
}

.pickup-point__address {
  color: var(--gedempt);
  font-size: 13px;
  line-height: 18px;
}

.pickup-point__distance {
  color: var(--gedempt);
  font-size: 13px;
  white-space: nowrap;
}

.pickup__hours summary {
  color: var(--action);
  font-size: 13px;
  cursor: pointer;
}

.pickup__more {
  justify-self: center;
  font-weight: 600;
}

/* The order on the right. */
.checkout-summary {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--lijn);
  border-radius: var(--r-kaart);
  background: var(--wit);
}

.checkout-summary__part {
  display: grid;
  gap: 16px;
}

.checkout-summary__title {
  margin: 0;
  font-family: var(--letter);
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
}

.checkout-summary__lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.checkout-line {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--lijn);
  font-size: 14px;
  line-height: 18px;
}

.checkout-line:first-child {
  padding-top: 0;
}

.checkout-line__image {
  display: flex;
  width: 50px;
  height: 50px;
  padding: 5px;
  border: 1px solid var(--lijn);
  border-radius: 8px;
  background: var(--wit);
}

.checkout-line__image img,
.checkout-line__image svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.checkout-line__name {
  font-weight: 600;
}

.checkout-line__price {
  white-space: nowrap;
}

.checkout-summary .cart-totals {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.checkout-summary .cart-totals__row small {
  color: var(--gedempt);
  font-size: 13px;
}

.checkout-summary .cart-totals__row--total {
  padding-top: 14px;
  border-top: 1px solid var(--lijn);
}

/* 26 oktober 2026: how much is still needed for free shipping, under the total. */
.checkout-summary .steps-bar {
  margin: var(--space-4) 0 0;
}

.checkout-summary__cta {
  width: 100%;
  min-height: 52px;
  font-size: 16px;
}

/* The order folded on top: only on a phone. */
.checkout-mini {
  display: none;
}

/* A smaller laptop: the details and the shipping under each other, the order on the right. */
@media (max-width: 1179px) {
  .checkout-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
  }

  .checkout-grid > .checkout {
    display: grid;
    gap: 32px;
  }
}

/* Phone and tablet: under each other in the same order, every block in a frame, the order folded on top and the
   totals with the button at the bottom. */
@media (max-width: 860px) {
  .checkout-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
  }

  .checkout-grid > .checkout,
  .checkout-col {
    gap: 16px;
  }

  .checkout-block {
    padding: 18px var(--marge-gsm);
    border: 1px solid var(--lijn);
    border-radius: var(--r-kaart);
  }

  .checkout-block--account {
    padding: 16px var(--marge-gsm);
  }

  .checkout-mini {
    display: block;
    margin-bottom: 16px;
    border: 1px solid var(--lijn);
    border-radius: 12px;
  }

  .checkout-mini summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 14px;
    font-size: var(--t-tekst);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
  }

  .checkout-mini summary::-webkit-details-marker {
    display: none;
  }

  .checkout-mini summary > svg:first-child {
    color: var(--action);
  }

  .checkout-mini[open] summary .nav-item__chevron {
    transform: rotate(180deg);
  }

  .checkout-mini__total {
    margin-left: auto;
    font-family: var(--letter);
    font-size: 18px;
    font-weight: 700;
  }

  .checkout-mini__lines {
    list-style: none;
    margin: 0;
    padding: 0 14px 12px;
  }

  .checkout-mini__lines li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--lijn);
    font-size: 14px;
  }

  .checkout-summary {
    padding: 4px 0 0;
    border: 0;
  }

  .checkout-summary__title,
  .checkout-summary__lines {
    display: none;
  }
}

@media (max-width: 640px) {

  .field-row--street {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field-row--street > .field:first-child {
    grid-column: 1 / -1;
  }

  .ship-option {
    grid-template-columns: 20px 56px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
  }

  .ship-option:has(input:checked) {
    padding: 11px;
  }

  .pickup {
    padding: 0;
    border: 0;
  }
}

/* ---------- Na fase 9: de bestelpagina en de bestellingen in Mijn account ---------- */

.order-page {
  display: grid;
  gap: 20px;
  padding-top: 32px;
  padding-bottom: 48px;
}

.order-page__head h1 {
  margin: 0;
  font-family: var(--letter);
  font-size: var(--t-paginatitel);
  line-height: 1.15;
  font-weight: 600;
}

.order-page__head .order-status {
  margin: 0 0 10px;
}

.order-page__lede {
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 26px;
}

/* A block: a thin line, radius 16, no shadow; its title in the title weight. Also every section of Mijn account. */
.order-block,
.account-main .order-box {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--lijn);
  border-radius: var(--r-kaart);
  background: var(--wit);
  box-shadow: none;
}

.order-block h2,
.account-main .order-box h2 {
  margin: 0;
  font-family: var(--letter);
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
}

.order-block p {
  margin: 0;
}

.order-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.order-items .cart-item:first-child {
  padding-top: 4px;
}

.order-items .cart-item__name {
  margin: 0;
}

.order-item__quantity {
  margin: 8px 0 0;
  color: var(--gedempt);
  font-size: 14px;
}

.order-block .cart-totals {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.order-block .cart-totals__row small {
  color: var(--gedempt);
  font-size: 13px;
}

/* Levering: the parts next to each other where they fit. */
.order-delivery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px 24px;
}

.order-delivery h3 {
  margin: 0 0 4px;
  font-size: var(--t-tekst);
  font-weight: 600;
}

.order-delivery p,
.order-delivery .order-address {
  margin: 0;
  font-size: var(--t-tekst);
  font-style: normal;
  line-height: 22px;
}

.order-help {
  gap: 10px;
}

.order-help p {
  font-size: var(--t-tekst);
  line-height: 22px;
}

.order-help a:not(.btn) {
  color: var(--action);
}

.order-help .btn {
  justify-self: start;
  min-height: 44px;
  margin-top: 6px;
}

/* The orders in Mijn account: one row per order. */
.account-orders {
  list-style: none;
  margin: 0;
  padding: 0;
}

.account-order {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-top: 1px solid var(--lijn);
}

.account-order:first-child {
  padding-top: 0;
  border-top: 0;
}

.account-order__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.account-order__number {
  color: var(--inkt);
  font-weight: 600;
}

.account-order__total {
  font-family: var(--letter);
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
}

.account-order__meta {
  margin: 0;
  color: var(--gedempt);
  font-size: 14px;
}

.account-order__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 2px 0 0;
  font-size: 14px;
}

.account-order__links a {
  color: var(--action);
}

@media (max-width: 640px) {
  .order-page {
    padding-top: 20px;
  }

  .order-page__head h1 {
    font-size: 30px;
  }

  .order-block,
  .account-main .order-box {
    padding: 18px var(--marge-gsm);
  }
}

/* ---------- Na fase 9: de eenvoudige kop en voet van het afrekenen (A-afrekenen, A-afrekenen-gsm) ---------- */

.checkout-head {
  border-bottom: 1px solid var(--lijn);
  background: var(--wit);
}

.checkout-head__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  min-height: 80px;
}

/* As large as the logo of the normal header (A-afrekenen). */
.checkout-head__logo {
  display: inline-flex;
  justify-self: start;
  border-radius: var(--r-veld);
}

.checkout-head__logo {
  color: var(--brand);
}

.checkout-head__logo .logo {
  width: 237px;
}

.checkout-head__safe {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--gedempt);
  font-size: var(--t-tekst);
  font-weight: 600;
}

.checkout-head__back {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 6px;
  color: var(--action);
  font-size: var(--t-tekst);
  font-weight: 600;
  text-decoration: none;
}

.checkout-head__back:hover {
  text-decoration: underline;
}

.checkout-foot {
  border-top: 1px solid var(--lijn);
}

.checkout-foot__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  margin: 0 auto;
  padding-top: 18px;
  padding-bottom: 22px;
  font-size: 13px;
}

.checkout-foot__links a {
  color: var(--gedempt);
}

/* Phone: the logo left, "Veilig afrekenen" right, as in A-afrekenen-gsm. */
@media (max-width: 640px) {
  .checkout-head__row {
    grid-template-columns: 1fr auto;
    min-height: 60px;
  }

  .checkout-head__logo .logo {
    width: 177px;
  }

  .checkout-head__safe {
    font-size: 13px;
  }

  .checkout-head__back {
    display: none;
  }
}

/* ---------- Fase 10: sale (DESIGN.md onderdeel 6, Productkaart, toestand Sale) ---------- */

/* The label SALE in the red of a sale with white letters; with a preorder label they stand under each other. */
.card-label--sale {
  background: var(--sale);
  color: var(--wit);
}

/* The old price: small, struck through, above the new one. */
.old-price {
  display: block;
  color: var(--gedempt);
  font-family: var(--letter);
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
}

.old-price s {
  text-decoration-thickness: 1px;
}

/* On a card the old price takes the room next to the button above the new price: the price line keeps its height
   and stays level with the button, so the cards of a row stay as high. */
.card-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.card-price--sale {
  color: var(--sale);
}

.product-page__prices {
  display: grid;
  gap: 2px;
}

.product-page__prices .old-price {
  font-size: 15px;
  line-height: 20px;
}

.product-page__price--sale {
  color: var(--sale);
}

.product-page__price--sale span {
  color: var(--gedempt);
}

.cart-item__price {
  text-align: right;
}

.cart-item__price .old-price {
  font-size: 12px;
  line-height: 15px;
}

.cart-item__price--sale > span:last-child {
  color: var(--sale);
}

.cart-item__label {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.suggest__price {
  text-align: right;
}

.suggest__price .old-price {
  font-size: 12px;
  line-height: 14px;
}

.suggest__price--sale > span:last-child {
  color: var(--sale);
}

/* Herindeling L1: Volzet, Uitverkocht, Op aanvraag in the grey of sold out. */
.suggest__tag--out {
  background: var(--status-uit-vlak);
  color: var(--status-uit);
}

.suggest__tag--sale {
  margin-right: 4px;
  background: var(--sale);
  color: var(--wit);
}

/* ---------- Na fase 10: één vorm voor de meldingen in de winkel ---------- */

/* A message on a page (a form that needs a look, a result): a light field, radius 12, no line on the side and no
   shadow; an error in wine red. A note that informs (a preorder, the maximum reached) is the light green of the
   cart. The error under a field stays the small wine red line. */
.alert {
  display: grid;
  gap: 6px;
  margin: 0 0 20px;
  padding: 14px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--vlak);
  box-shadow: none;
  color: var(--inkt);
  font-size: var(--t-tekst);
  line-height: 22px;
}

.alert[role="alert"] {
  background: var(--status-fout-vlak);
  color: var(--status-fout);
  font-weight: 600;
}

.alert ul,
.alert p {
  margin: 0;
}

.note {
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--tint);
  box-shadow: none;
  font-size: var(--t-tekst);
  line-height: 22px;
}

.field__error {
  color: var(--status-fout);
  font-size: 13px;
  font-weight: 600;
}

/* An empty list or a page that is not there: a frame with a thin line, like the other blocks. */
.empty {
  border: 1px solid var(--lijn);
  border-radius: var(--r-kaart);
}

.pickup .alert {
  margin: 0;
}

/* ---------- Fase 11: de overige winkelpagina's (inloggen, account, contact, herroepen, info, hulp, fouten) ----------

   The same frames, titles, fields, buttons and white space as the reworked pages (DESIGN.md onderdeel 4 tot 6). */

/* A narrow page (forms, texts): narrow indeed (the width of the shop's container no longer wins), not the order
   page, which keeps the full width it got after fase 9. */
.container.narrow:not(.order-page) {
  max-width: calc(720px + 2 * var(--space-5));
}

.page-title {
  margin: 28px 0 20px;
  font-family: var(--letter);
  font-size: var(--t-paginatitel);
  line-height: 1.15;
  font-weight: 600;
}

.breadcrumb + .page-title {
  margin-top: 4px;
}

.page-lede {
  max-width: 65ch;
  margin: -8px 0 24px;
  color: var(--gedempt);
  font-size: 16px;
  line-height: 26px;
}

/* A block: a thin line, radius 16, no shadow; its title in the title weight (like the order page). */
.order-box {
  display: grid;
  gap: 16px;
  margin: 0 0 20px;
  padding: 24px;
  border: 1px solid var(--lijn);
  border-radius: var(--r-kaart);
  background: var(--wit);
  box-shadow: none;
}

.order-box h2 {
  margin: 0;
  font-family: var(--letter);
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
}

.order-box p {
  margin: 0;
}

.order-box .btn {
  justify-self: start;
  margin-top: 4px;
}

.order-box .fields {
  display: grid;
  gap: 14px;
}

/* Fields: like checkout. The label on one line, 44 px, the line of a field, radius 10. */
main .field {
  gap: 6px;
  min-width: 0;
}

main .field label {
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

main .field input,
main .field select {
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--veldrand);
  border-radius: var(--r-veld);
  background: var(--wit);
  color: var(--inkt);
  font-size: 16px;
}

main .field textarea {
  min-height: 120px;
  padding: 10px 12px;
  border: 1px solid var(--veldrand);
  border-radius: var(--r-veld);
  font-size: 16px;
  line-height: 24px;
}

main .field input::placeholder,
main .field textarea::placeholder {
  color: var(--gedempt);
  opacity: 0.8;
}

main .field input:focus,
main .field select:focus,
main .field textarea:focus {
  border-color: var(--action);
}

main .field--error input,
main .field--error textarea {
  border-color: var(--status-fout);
}

/* The second button everywhere: white with a green line (DESIGN.md onderdeel 6, Knoppen). */
.btn--ghost {
  background: var(--wit);
  color: var(--action);
  box-shadow: inset 0 0 0 1.5px var(--action);
}

.btn.btn--ghost:hover:not(:disabled) {
  background: var(--tint);
}

main .btn {
  min-height: 44px;
}

/* A tick box with its words, as at checkout. */
main .check {
  gap: 10px;
  font-size: var(--t-tekst);
  line-height: 20px;
}

main .check input {
  accent-color: var(--action);
}

/* Links in the text of these pages: green. */
.order-box a:not(.btn),
.prose a:not(.btn),
.page-lede a,
.narrow > p a:not(.btn) {
  color: var(--action);
}

/* Tables of data (account, cookies, shipping): thin lines, the names muted. */
main .specs th,
main .specs td {
  padding: 11px 0;
  border-bottom: 1px solid var(--lijn);
}

main .specs th {
  padding-right: var(--space-4);
  color: var(--gedempt);
  font-weight: 400;
}

/* The menus of the info pages and of Mijn account: the current page light green. */
.info-nav a,
.account-nav a {
  color: var(--inkt);
}

.info-nav a:hover,
.account-nav a:hover {
  background: var(--vlak);
  box-shadow: none;
}

.info-nav a[aria-current="page"],
.account-nav a[aria-current="page"] {
  background: var(--tint);
  box-shadow: none;
  color: var(--action);
  font-weight: 600;
}

/* Texts: titles in the title weight, like the other titles. */
.prose h1 {
  font-family: var(--letter);
  font-size: var(--t-paginatitel);
  line-height: 1.15;
  font-weight: 600;
}

.prose h2 {
  margin: 32px 0 8px;
  font-family: var(--letter);
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
}

.prose p,
.prose li {
  font-size: 16px;
  line-height: 26px;
}

.prose__lede {
  font-size: 17px;
  line-height: 27px;
}

.faq summary {
  font-family: var(--letter);
  font-weight: 600;
}

@media (max-width: 640px) {
  .page-title,
  .prose h1 {
    font-size: 30px;
  }

  .order-box {
    padding: 18px var(--marge-gsm);
  }
}

/* ---------- Focusrand (DESIGN.md onderdeel 10, 20 oktober 2026) ---------- */

/* A field shows its focus on itself: a green border and a thin green line inside it, no ring outside. A ring 3 px
   outside a field was cut off by every window or panel that shows nothing outside its edges (the popup). */
input:where(:not([type="checkbox"]):not([type="radio"])):focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--action);
  box-shadow: inset 0 0 0 1px var(--action);
}

/* A field that is a frame round a bare input (search, service point, quantity): only the frame shows the focus,
   never a second rectangle on the input inside it (26 oktober 2026; the rule above is kept light with :where so this
   one wins, also when the input gets the focus with a click). */
.search input:is(:focus, :focus-visible),
.pickup__field input:is(:focus, :focus-visible),
.qty .qty__input:is(:focus, :focus-visible) {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}

.search:has(input:focus-visible),
.pickup__field:has(input:focus-visible),
.qty:has(.qty__input:focus-visible) {
  outline: none;
  border-color: var(--action);
  box-shadow: inset 0 0 0 1px var(--action);
}

.search:has(.search__button:focus-visible) {
  outline: var(--focus-dikte) solid var(--action);
  outline-offset: var(--focus-afstand);
}

/* Buttons, links, boxes and switches keep their ring 3 px away; every zone that cuts off what sticks out (overflow)
   keeps that much room on the inside, and scrolling to a focused element stops that far from the edge. */
.notice-track {
  margin: calc(-1 * (var(--focus-dikte) + var(--focus-afstand) + 1px));
  padding: calc(var(--focus-dikte) + var(--focus-afstand) + 1px);
}

.product-row {
  margin-inline: calc(-1 * var(--space-1));
  padding-inline: var(--space-2);
  scroll-padding-inline: var(--space-2);
}

/* On a phone the line of chips runs to the edge of the screen: the last chip stops a margin before it. */

@media (max-width: 1179px) {
  .home-row {
    margin-top: -4px;
    margin-left: -4px;
    padding-top: 6px;
    padding-left: 6px;
    scroll-padding-inline: 6px var(--space-5);
  }
}

@media (max-width: 900px) {
  .home-row {
    scroll-padding-inline: 6px var(--marge-gsm);
  }
}

@media (max-width: 900px) {
  .js .filters__groups {
    padding-block: 6px;
    scroll-padding-block: 6px;
  }
}

/* ---------- Startersgids nog niet live (migratie 069) ---------- */

/* /beginners while the guide is not live: a short notice in a frame, centred. */
.guide-soon {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto var(--space-7);
  padding: 36px 28px;
  border: 1px solid var(--lijn);
  border-radius: var(--r-kaart);
  background: var(--wit);
  text-align: center;
}

.guide-soon__icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  border-radius: var(--r-rond);
  background: var(--tint);
  color: var(--action);
}

.guide-soon h2 {
  margin: 0;
  font-size: 22px;
  line-height: 28px;
}

.guide-soon p {
  max-width: 44ch;
  margin: 0;
  color: var(--gedempt);
  font-size: var(--t-tekst);
  line-height: 22px;
}

.guide-soon__button {
  margin-top: 8px;
  min-height: 44px;
  padding: 0 24px;
}

@media (max-width: 640px) {
  .guide-soon {
    padding: 28px 18px;
  }
}

/* ---------- Opdracht B: reeksen (overzicht en kop van de pagina van een reeks) ---------- */

/* Meerdere spellen: /reeksen, a part per game. */
.series-part + .series-part {
  margin-top: 48px;
}

/* The cards of the series: three per row on a laptop, two from 600 to 900 px, one on a phone. */
.series-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 var(--space-7);
  padding: 0;
}

@media (max-width: 900px) {
  .series-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
}

@media (max-width: 600px) {
  .series-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* One frame like the product card; the name links over the whole card. */
.series-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 8px 8px 14px;
  border: 1px solid var(--lijn);
  border-radius: var(--r-kaart);
  background: var(--wit);
}

.series-card:hover {
  border-color: var(--lijn-sterk);
  box-shadow: var(--schaduw-kaart-aanwijzen);
}

.series-card__image {
  position: relative;
  height: 224px;
  padding: 40px 12px 12px;
  overflow: hidden;
  border-radius: var(--r-beeld);
  background: var(--wit);
}

.series-card__image img,
.series-card__image svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 26 oktober 2026: the label inside the image, top left, never over the edge of the card (the series card has no room
   above its image like the product card). */
.series-card .product-card__labels {
  top: 10px;
  left: 10px;
  right: 10px;
}

/* The series' own image fills the top of the card from edge to edge with the corners of the card, all at one height,
   cropped (never stretched) at the point set for the series. */
.series-card--image {
  padding-top: 0;
}

.series-card--image .series-card__image {
  height: 232px; /* the 8 px above the white field plus its 224 px: the names of a row stay on one line */
  margin: 0 -8px;
  padding: 0;
  border-radius: calc(var(--r-kaart) - 1px) calc(var(--r-kaart) - 1px) 0 0;
}

.series-card--image .series-card__image img {
  object-fit: cover;
}

.series-card__body {
  display: grid;
  gap: 4px;
  padding: 0 6px;
}

.series-card__name {
  margin: 0;
  font-family: var(--letter);
  font-size: var(--t-kaarttitel);
  line-height: var(--t-kaarttitel-lijn);
  font-weight: 600;
}

.series-card__name a {
  color: var(--inkt);
  text-decoration: none;
}

.series-card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-kaart);
}

.series-card__name a:focus-visible {
  outline: none;
}

.series-card__name a:focus-visible::after {
  outline: var(--focus-dikte) solid var(--action);
  outline-offset: var(--focus-afstand);
}

.series-card__meta {
  margin: 0;
  color: var(--gedempt);
  font-size: var(--t-reeks);
  line-height: var(--t-reeks-lijn);
}

/* The first two lines of the text; the full text stays in the HTML. */
.series-card__text {
  display: -webkit-box;
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--gedempt);
  font-size: 14px;
  line-height: 20px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* The head of the page of a series: the strip, then the text. */
.series-head {
  display: grid;
  gap: 14px;
  margin: 12px 0 24px;
}

/* The strip of a series (22 oktober 2026): its own image fills it (cropped), a dark fade from the left carries the
   white text; without an image the green of the shop. */
.series-strip {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 200px; /* grows for a long name rather than cutting it */
  overflow: hidden;
  border-radius: var(--r-kaart);
  background: var(--brand);
  color: var(--wit);
}

.series-strip__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.series-strip:not(.series-strip--plain)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, var(--overloop) 0%, var(--overloop) 25%, transparent 75%);
}

.series-strip__text {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: 6px;
  max-width: 720px;
  padding: 24px 28px;
}

.series-strip h1 {
  margin: 0;
  color: var(--wit);
  font-family: var(--letter);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.1;
}

.series-strip__meta {
  margin: 0;
  color: var(--wit);
  font-size: var(--t-tekst);
  font-weight: 600;
}

/* 26 oktober 2026: the game over the name, small and light, as in the tabs of the big banner. */
.series-strip__game {
  margin: 0;
  color: color-mix(in srgb, var(--wit) 72%, transparent);
  font-size: 12px;
  line-height: 16px;
}

/* The text of the series: two lines on screen (with script) and "Lees meer"; whole in the page for search engines. */
.series-head__text {
  display: grid;
  gap: 10px;
  color: var(--inkt);
  font-size: var(--t-tekst);
  line-height: 24px;
}

.series-head__text p {
  margin: 0;
}

.js .series-head__text:not(.is-open) {
  display: block;
  max-height: 48px;
  overflow: hidden;
}

.js .series-head__text:not(.is-open) p + p {
  margin-top: 10px;
}

.series-head__more {
  display: none;
  justify-self: start;
}

.js .series-head__more:not([hidden]) {
  display: inline;
}

@media (max-width: 640px) {
  .series-strip {
    min-height: 150px;
  }

  .series-strip__text {
    gap: 4px;
    padding: 16px 18px;
  }

  .series-strip h1 {
    font-size: 24px;
  }

  .series-strip__meta {
    font-size: 13px;
  }
}

/* ---------- Meerdere spellen, deel C: de startpagina (22 oktober 2026) ---------- */

/* On top: the big banner with tabs (26 oktober 2026, below); without banners the first coming release. */
.home-hero {
  margin-top: var(--space-4);
}

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 380px;
  overflow: hidden;
  border-radius: var(--r-kaart);
  background: var(--brand);
  color: var(--wit);
}

/* The image fills the box (cropping is fine, also for Universes Beyond); a dark fade from below carries the text. */
.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero:not(.hero--plain)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, var(--overloop) 0%, var(--overloop) 20%, transparent 70%);
}

.hero__text {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: 8px;
  max-width: 640px;
  padding: 28px 32px;
}

.hero__label {
  margin: 0;
  color: var(--op-merk);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero__title {
  margin: 0;
  color: var(--wit);
  font-family: var(--letter);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.05;
}

.hero__button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 6px;
  padding: 0 22px;
  border-radius: var(--r-rond);
  background: var(--op-merk);
  color: var(--inkt);
  font-weight: 600;
  text-decoration: none;
}

.game-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 168px;
  height: 80px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--inkt);
}

.game-mark img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.game-mark__name {
  color: var(--wit);
  font-family: var(--letter);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.game-mark--small {
  width: 64px;
  height: 30px;
  padding: 4px 8px;
  border-radius: 8px;
}

.game-mark--small .game-mark__name {
  font-size: 11px;
}

/* 26 oktober 2026: every row of the start page has four cards on a wide laptop (Recent bekeken may hold up to eight:
   only the first four show there); from 1179 px the row slides sideways with all of them. */
.home-row--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 1180px) {
  .home-row--four > .product-card:nth-child(n + 5) {
    display: none;
  }
}

@media (max-width: 1179px) {
  .home-row--four {
    grid-template-columns: none;
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: 220px;
  }

  .hero__text {
    gap: 6px;
    padding: 18px;
  }

  .hero__title {
    font-size: 26px;
  }

  .hero__label {
    font-size: 11px;
  }

  .hero__button {
    min-height: 40px;
    padding: 0 18px;
  }

  .game-mark {
    width: 120px;
    height: 64px;
    padding: 8px 12px;
  }

  .game-mark--small {
    width: 64px;
    height: 30px;
    padding: 4px 8px;
  }

  .hero:not(.hero--plain)::before {
    background: linear-gradient(to top, var(--overloop) 0%, var(--overloop) 45%, transparent 100%);
  }
}

/* ---------- Drie per rij (25 oktober 2026): de productkaart met een groter beeld ---------- */

/* The image field is about square and fills the width of the card, almost without an inner margin; the photo fills it
   as far as it can (contain, never cropped; the white edges of a photo are cut off when it is stored). The card keeps
   room on top so the labels can lie on the top edge of the image: half over it, half above it. */
.product-card {
  padding: 14px 6px 14px;
}

.product-card__image {
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  padding: 6px;
  overflow: visible;
}

/* The photo lies in the field (a tall photo must not stretch the square). */
.product-card__image img,
.product-card__image svg {
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
}

.product-card__labels {
  top: calc(-1 * var(--t-label-hoogte) / 2);
  left: 10px;
  right: 10px;
  flex-direction: row;
  flex-wrap: nowrap;
  z-index: 1;
}

.product-card__body {
  margin: 0 8px;
}

@media (max-width: 640px) {
  .product-card {
    padding: 12px 4px 12px;
  }

  .product-card__image {
    height: auto;
    padding: 4px;
  }

  .product-card__image img,
  .product-card__image svg {
    top: 4px;
    left: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
  }

  .product-card__labels {
    top: calc(-1 * var(--t-label-hoogte) / 2);
    left: 8px;
    right: 8px;
  }

  .product-card__body {
    margin: 0 6px;
  }
}

/* Without a photo the line icon of the product type stays small in the middle of the square. */
.product-card__image svg {
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
}

/* ---------- 27 oktober 2026: de grote banner als één klikvlak, met een reactie op het hele vlak ---------- */

/* The hero is one link: no underline, the text stays white. */
.hero {
  color: var(--wit);
  text-decoration: none;
  isolation: isolate;
}

.hero:hover {
  color: var(--wit);
}

/* A second layer over the image makes the fade a little darker on hover or focus (it fades in). */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--overloop);
  opacity: 0;
  pointer-events: none;
}

.hero:focus-visible {
  outline: var(--focus-dikte) solid var(--action);
  outline-offset: var(--focus-afstand);
}

/* The same reaction for the mouse (only where there is a mouse: no hover on a phone) and for the keyboard. */
@media (hover: hover) {
  .hero:hover {
    box-shadow: var(--schaduw-kaart-aanwijzen);
  }

  .hero:hover::after {
    opacity: 0.18;
  }

  .hero:hover .hero__button {
    background: var(--wit);
  }
}

.hero:focus-visible {
  box-shadow: var(--schaduw-kaart-aanwijzen);
}

.hero:focus-visible::after {
  opacity: 0.18;
}

.hero:focus-visible .hero__button {
  background: var(--wit);
}

/* The image zooms in a little, inside the rounded box (it hides what goes over the edge); not with less motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero__image {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .hero::after {
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .hero {
    transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .hero:focus-visible .hero__image {
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .hero:hover .hero__image {
    transform: scale(1.04);
  }
}

/* ---------- 26 oktober 2026: de grote banner met tabs bovenaan de startpagina ---------- */

/* One banner at a time over the full width of the content (partials/hero_carousel.html): its image over the whole
   banner, cropped at its point, a dark fade on the left and at the bottom for the text, the logo of the game in white,
   the title, the line and the buttons. The banners lie on top of each other; shop.js slides the next one in. The
   height is fixed, so nothing on the page moves while an image loads or a banner changes. */
.hero-carousel {
  position: relative;
  margin-top: var(--space-4);
  overflow: hidden;
  border-radius: var(--r-kaart);
  background: var(--inkt);
  color: var(--wit);
  isolation: isolate;
}

.hero-carousel__slides {
  position: relative;
  height: 470px;
  overflow: hidden;
  touch-action: pan-y; /* a swipe sideways is for the banner (shop.js), up and down still scrolls the page */
}

.hero-slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
}

.hero-slide.is-active,
.hero-slide.is-leaving {
  visibility: visible;
}

.hero-slide__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, var(--overloop) 0%, var(--overloop) 22%, transparent 62%),
    linear-gradient(to top, var(--overloop) 0%, transparent 48%);
}

.hero-slide__text {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 12px;
  max-width: 560px;
  padding: 40px 44px 0;
}

/* The official logos are made for a dark ground; here they are white. */
.hero-slide__logo {
  width: auto;
  max-width: 220px;
  height: 44px;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
}

.hero-slide__game {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-slide__title {
  margin: 4px 0 0;
  color: var(--wit);
  font-family: var(--letter);
  font-size: 46px;
  font-weight: 600;
  line-height: 1.05;
}

.hero-slide__line {
  margin: 0;
  max-width: 480px;
  color: var(--wit);
  font-size: 17px;
  line-height: 1.45;
}

.hero-slide__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.hero-slide__button {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 24px;
  border: 2px solid var(--wit);
  border-radius: var(--r-rond);
  background: var(--wit);
  color: var(--inkt);
  font-weight: 600;
  text-decoration: none;
}

.hero-slide__button--line {
  background: transparent;
  color: var(--wit);
}

.hero-slide__button:focus-visible,
.hero-carousel__pause:focus-visible,
.hero-tab:focus-visible {
  outline: var(--focus-dikte) solid var(--wit);
  outline-offset: var(--focus-afstand);
}

@media (hover: hover) {
  .hero-slide__button:hover {
    background: var(--tint);
    border-color: var(--tint);
    color: var(--inkt);
  }

  .hero-slide__button--line:hover {
    background: color-mix(in srgb, var(--wit) 16%, transparent);
    border-color: var(--wit);
    color: var(--wit);
  }
}

/* The pause button, top right; shop.js shows it (without script nothing changes by itself). */
.hero-carousel__pause {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-rond);
  background: color-mix(in srgb, var(--inkt) 60%, transparent);
  color: var(--wit);
  cursor: pointer;
}

.hero-carousel__pause[hidden] {
  display: none;
}

.hero-carousel__pause .icon-play,
.hero-carousel.is-stopped .hero-carousel__pause .icon-pause {
  display: none;
}

.hero-carousel.is-stopped .hero-carousel__pause .icon-play {
  display: block;
}

/* The tabs: one per banner, always in the same order, over the bottom of the image. */
.hero-tabs {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 20px;
  z-index: 3;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 12px;
}

.hero-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 64px;
  padding: 10px 12px;
  overflow: hidden;
  /* 26 oktober 2026: a thin light border and a small soft shadow under every tab. */
  border: 1px solid color-mix(in srgb, var(--wit) 22%, transparent);
  border-radius: var(--r-veld);
  background: color-mix(in srgb, var(--inkt) 62%, transparent);
  box-shadow: var(--schaduw-tab);
  color: var(--wit);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.hero-tab__text {
  display: grid;
  min-width: 0;
}

.hero-tab__label {
  position: absolute;
  top: 6px;
  right: 8px;
}

.hero-tab[aria-selected="true"] {
  border-color: var(--lijn);
  background: var(--wit);
  box-shadow: var(--schaduw-tab-actief);
  color: var(--inkt);
}

/* The green bar of the active tab fills up to the next banner (shop.js starts it; it waits while paused). */
.hero-tab__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: var(--action);
  transform: scaleX(0);
  transform-origin: left center;
}

.hero-carousel.is-playing .hero-tab[aria-selected="true"] .hero-tab__bar {
  animation: hero-bar 6s linear forwards;
}

.hero-carousel.is-held .hero-tab[aria-selected="true"] .hero-tab__bar {
  animation-play-state: paused;
}

@keyframes hero-bar {
  to { transform: scaleX(1); }
}

@media (hover: hover) {
  .hero-tab[aria-selected="false"]:hover {
    background: color-mix(in srgb, var(--inkt) 40%, transparent);
    box-shadow: var(--schaduw-tab-aanwijzen);
  }
}

.hero-tab[aria-selected="false"]:focus-visible {
  background: color-mix(in srgb, var(--inkt) 40%, transparent);
  box-shadow: var(--schaduw-tab-aanwijzen);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-tab {
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }

  .hero-tab[aria-selected="false"]:focus-visible {
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .hero-tab[aria-selected="false"]:hover {
    transform: translateY(-3px);
  }
}

/* Less motion: no bar (nothing changes by itself). */
@media (prefers-reduced-motion: reduce) {
  .hero-tab__bar {
    display: none;
  }
}

/* A screen narrower than the content: the title a little smaller, the tabs without their image. */
@media (max-width: 1000px) {
  .hero-slide__title {
    font-size: 38px;
  }
}

/* A phone: the text on the image over a strong fade from below, the tabs as a row of compact tabs under the banner
   that slides sideways, in the same order. */
@media (max-width: 640px) {
  .hero-carousel__slides {
    height: 420px;
  }

  .hero-slide::before {
    background: linear-gradient(to top, var(--overloop) 0%, var(--overloop) 42%, transparent 82%);
  }

  .hero-slide__text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    gap: 8px;
    max-width: none;
    padding: 0 18px 20px;
  }

  .hero-slide__logo {
    max-width: 160px;
    height: 32px;
  }

  .hero-slide__title {
    font-size: 30px;
  }

  .hero-slide__line {
    display: -webkit-box;
    overflow: hidden;
    font-size: 15px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .hero-slide__button {
    min-height: 44px;
    padding: 0 18px;
  }

  .hero-carousel__pause {
    top: 12px;
    right: 12px;
  }

  .hero-tabs {
    position: static;
    display: flex;
    gap: 8px;
    padding: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    background: var(--inkt);
  }

  .hero-tab {
    flex: 0 0 auto;
    max-width: 220px;
    min-height: 52px;
    padding: 8px 12px;
    scroll-snap-align: start;
    background: color-mix(in srgb, var(--wit) 12%, transparent);
  }

  .hero-tab__label {
    position: static;
    align-self: flex-start;
  }
}

/* ---------- 26 oktober 2026: het effect van de banners op de beelden van een reeks ---------- */

/* The own image of a series on its card (page Reeksen) and in the menu tile gets the treatment of the banners on the
   start page: the dark fade from below (--overloop; shorter, the text is under the image here), on hover or focus a
   darker layer and the shadow, and the image zooming in a little inside its rounded box (not with less motion). The
   label PREORDER lies over all of it. */
.series-card--image .series-card__image,
.nav-tile__image--series {
  position: relative;
  isolation: isolate;
}

.series-card--image .series-card__image::before,
.nav-tile__image--series::before,
.series-card--image .series-card__image::after,
.nav-tile__image--series::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.series-card--image .series-card__image::before,
.nav-tile__image--series::before {
  background: linear-gradient(to top, var(--overloop) 0%, transparent 45%);
}

.series-card--image .series-card__image::after,
.nav-tile__image--series::after {
  background: var(--overloop);
  opacity: 0;
}

.series-card .product-card__labels {
  z-index: 2;
}

.series-card--image:focus-within,
.nav-tile:focus-visible {
  box-shadow: var(--schaduw-kaart-aanwijzen);
}

.series-card--image:focus-within .series-card__image::after,
.nav-tile:focus-visible .nav-tile__image--series::after {
  opacity: 0.18;
}

@media (hover: hover) {
  .series-card--image:hover .series-card__image::after,
  .nav-tile:hover .nav-tile__image--series::after {
    opacity: 0.18;
  }

  .nav-tile:hover {
    box-shadow: var(--schaduw-kaart-aanwijzen);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .series-card--image .series-card__image img,
  .nav-tile__image--series .photo {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .series-card--image .series-card__image::after,
  .nav-tile__image--series::after {
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .series-card--image,
  .nav-tile {
    transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .series-card--image:focus-within .series-card__image img,
  .nav-tile:focus-visible .nav-tile__image--series .photo {
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .series-card--image:hover .series-card__image img,
  .nav-tile:hover .nav-tile__image--series .photo {
    transform: scale(1.04);
  }
}

/* ---------- Aanbod (22 oktober 2026): "Prijs op aanvraag" ---------- */

/* An older series without stock shows no price: in its place "Prijs op aanvraag" in the normal ink, not bold, on the
   card, the product page, the popup and the suggestions. */
.price-request {
  color: var(--inkt);
  font-family: var(--letter);
  font-size: var(--t-tekst);
  font-weight: 400;
  line-height: 1.3;
}

.product-card__footer > .price-request {
  align-self: center;
}

.product-page__price-request {
  margin: 0;
}

.product-page__price-request .price-request {
  font-size: 18px;
}

/* ---------- Preorders één keer (22 oktober 2026) ---------- */

/* The date of delivery on the product page: bold, in the green of the house. */
/* "Preorder, levering vanaf ..." under a preorder in the cart and the checkout. */
.preorder-line {
  margin: 2px 0 0;
  color: var(--gedempt);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}

/* Once under the total of the cart (page and panel): what happens when a preorder cannot be delivered. */
.preorder-promise {
  margin: var(--space-3) 0 0;
  color: var(--gedempt);
  font-size: 13px;
  line-height: 19px;
}

/* In the box of the checkout the date stays in the sentence (a strong in .note is a block of its own elsewhere). */
/* After deel D: /categorie/accessoires, a block per game with its kinds of accessories, then the brands. */
.accessory-games {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
}

.accessory-game {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 20px;
  border: 1px solid var(--lijn);
  border-radius: var(--r-kaart);
}

.accessory-game__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: 20px;
  line-height: 26px;
}

.accessory-game__kinds {
  list-style: none;
  margin: 0;
  padding: 0;
}

.accessory-game__kind {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 40px;
  margin: 0 -10px;
  padding: 0 10px;
  border-radius: var(--r-veld);
  color: var(--inkt);
  font-size: 15px;
  text-decoration: none;
}

.accessory-game__kind:hover {
  background: var(--vlak);
}

.accessory-game .arrow-link {
  margin-top: auto;
}

.accessory-brands {
  margin-top: 40px;
}

/* ---------- Herindeling L2 (27 oktober 2026): de kaart en het raster van een lijst ---------- */

/* Two cards per line up to 1023 px (from 901 px next to the filter column), three from 1024, four from 1280. */
@media (max-width: 1023px) {
  .listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .listing-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

/* The line with the game is there only where games are mixed (product_card(line=true)); when it is, it keeps its
   room on every card, so the titles of a row start on the same height. */
.product-card__body > div:first-child {
  display: flex;
  flex-direction: column;
}

/* The button of a card sits at the bottom, under the price line. */
.product-card__body {
  gap: 10px;
}

@media (max-width: 600px) {
  .listing-grid {
    gap: 10px;
  }

  .product-card {
    padding: 12px 4px 8px;
  }

  .product-card__body {
    gap: 8px;
    margin: 0 4px;
  }

  .card-button {
    padding: 0 var(--space-2);
    font-size: 14px;
  }

  .card-label {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ---------- Herindeling L2 (27 oktober 2026): lijsten ---------- */

/* The switch "Enkel bestelbaar" next to Sorteer: a checkbox drawn as a small switch, the text next to it; at least 44 px
   high to tap. */
.orderable-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-left: auto;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.orderable-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.orderable-switch__track {
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  border-radius: var(--r-rond);
  background: var(--gedempt);
}

.orderable-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--r-rond);
  background: var(--wit);
}

.orderable-switch input:checked + .orderable-switch__track {
  background: var(--action);
}

.orderable-switch input:checked + .orderable-switch__track::after {
  left: 19px;
}

.orderable-switch input:focus-visible + .orderable-switch__track {
  outline: var(--focus-dikte) solid var(--action);
  outline-offset: var(--focus-afstand);
}

.orderable-switch + .sort-box {
  margin-left: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .orderable-switch__track,
  .orderable-switch__track::after {
    transition: background-color 0.15s ease, left 0.15s ease;
  }
}

/* One "Wis alles": with the chips. The panel of the filters on a phone keeps its own (the chips are behind it). */
@media (min-width: 901px) {
  .filters__clear {
    display: none;
  }

  /* The filter column moves along with the page (L2-3): it sticks under the header while it fits in the window; a
     longer one sticks with its bottom in view (shop.js sets its top). No height or scrollbar of its own. */
  .filters {
    position: sticky;
    top: 80px;
    align-self: start;
  }
}

@media (max-width: 900px) {
  .orderable-switch {
    grid-column: 1 / -1;
    justify-self: start;
    margin: 0 0 8px;
  }

  .js .orderable-switch {
    grid-row: 2;
  }
}

/* ---------- Herindeling L3 (27 oktober 2026): de productpagina ---------- */

/* Up to 1023 px everything under each other: photos, the buy block, the sections. From 1024 px the photos with the
   sections under them on the left, the buy block on the right moving along with the page. */
.product-page {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "media"
    "buy"
    "sections";
  row-gap: 0;
}

.product-page__buy {
  grid-area: buy;
  min-width: 0;
}

.product-page__sections {
  grid-area: sections;
  min-width: 0;
  margin-top: 28px;
}

@media (min-width: 1024px) {
  .product-page {
    grid-template-columns: minmax(0, 584fr) minmax(0, 560fr);
    grid-template-areas:
      "media buy"
      "sections buy";
    column-gap: 56px;
    row-gap: 40px;
  }

  .product-page__buy {
    position: sticky;
    top: 88px;
    align-self: start;
  }

  .product-page__sections {
    display: grid;
    gap: 32px;
    margin-top: 0;
  }
}

/* The crumbs only from 1024 px; narrower the link back to the kind. */
@media (max-width: 1023px) {
  .product-crumbs {
    display: none;
  }

  .product-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 6px 0 4px;
    color: var(--gedempt);
    font-size: var(--t-tekst);
    font-weight: 600;
    text-decoration: none;
  }
}

/* Game and series as links above the title. */
.product-page__series a {
  color: inherit;
  text-decoration: none;
}

.product-page__series a:hover {
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The one delivery line under the button. */
.product-contents p,
.product-contents ul {
  margin: 0;
  font-size: var(--t-tekst);
  line-height: 24px;
}

.product-contents ul {
  padding-left: 20px;
}

.product-contents p + ul {
  margin-top: 8px;
}

/* The description folds to about six lines (with script), "Lees meer" opens it; the whole text is in the page. */
.js .product-description__text:not(.is-open) {
  max-height: calc(6 * 24px);
  overflow: hidden;
}

.read-more {
  display: none;
  margin-top: 8px;
}

.js .read-more:not([hidden]) {
  display: inline;
}

/* Over de reeks: two lines of the text of the series, then the link. */
.series-about {
  display: -webkit-box;
  margin: 0 0 10px;
  overflow: hidden;
  font-size: var(--t-tekst);
  line-height: 24px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-page__sections .product-facts {
  margin-top: 0;
}

/* ---------- Herindeling L4 (27 oktober 2026): de pagina van een groep van spellen en de tegel van een spel ---------- */

.group-intro,
.group-closing {
  max-width: 760px;
  margin: 0 0 28px;
  font-size: var(--t-tekst);
  line-height: 24px;
}

.group-closing {
  margin: 40px 0 0;
}

/* Four tiles per row on a laptop, three on a tablet, two on a phone. */
.game-tiles {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
}

@media (max-width: 1023px) {
  .game-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .game-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

.game-tile {
  min-width: 0;
}

/* One frame like a product card: the logo on its dark plate over the full width, the name, the number, the next
   release. The whole tile is the link. */
.game-tile__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 8px 8px 14px;
  border: 1px solid var(--lijn);
  border-radius: var(--r-kaart);
  background: var(--wit);
  color: var(--inkt);
  text-decoration: none;
}

.game-tile__link:hover {
  border-color: var(--lijn-sterk);
  box-shadow: var(--schaduw-kaart-aanwijzen);
}

.game-tile__mark {
  width: 100%;
  height: 112px;
  margin-bottom: 8px;
}

.game-tile__name,
.game-tile__next {
  padding: 0 6px;
}

.game-tile__name {
  font-size: var(--t-kaarttitel);
  font-weight: 600;
  line-height: var(--t-kaarttitel-lijn);
}

.game-tile__next {
  color: var(--status-preorder);
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 600px) {
  .game-tile__mark {
    height: 84px;
    padding: 8px 10px;
  }

  .game-tile__link {
    padding: 6px 6px 12px;
  }

  .game-tile__name,
  .game-tile__next {
    padding: 0 4px;
  }
}

/* ---------- Herindeling L4: het uitklappaneel van een groep van spellen (Andere TCG) ---------- */

.nav-panel__grid--group > .nav-tile {
  flex-basis: 280px;
}

/* Herindeling L4-2: a coming series in the column Reeksen, its label and date under the name. */
.nav-panel .nav-panel__link--dated {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}

/* ---------- Herindeling L4 (27 oktober 2026): het menu op gsm en tablet, één niveau per scherm ---------- */

/* The whole screen, white, one scrollbar; on top the name of the menu and the close button. */
.mobile-menu__panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  max-height: none;
  overflow-y: auto;
  padding: 0 var(--marge-gsm) 40px;
  border: 0;
  border-radius: 0;
  background: var(--wit);
  box-shadow: none;
}

.js.menu-open body {
  overflow: hidden;
}

.mobile-menu__top {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  margin: 0 calc(-1 * var(--marge-gsm)) 8px;
  padding: 0 6px 0 var(--marge-gsm);
  border-bottom: 1px solid var(--lijn);
  background: var(--wit);
}

.mobile-menu__name {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.mobile-menu__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-rond);
  background: transparent;
  color: var(--inkt);
  cursor: pointer;
}

.mobile-menu__close:hover {
  background: var(--vlak);
}

/* Only the level that is shown; without script that is the first one. */
.mobile-level {
  display: none;
}

.mobile-level.is-current {
  display: block;
}

.mobile-menu .mobile-level__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu .mobile-level__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  border-bottom: 1px solid var(--lijn);
}

.mobile-menu .mobile-level__list--main a {
  font-size: 17px;
  font-weight: 600;
}

.mobile-menu .mobile-level__list--quiet {
  margin-top: 16px;
}

.mobile-menu .mobile-level__list--quiet a {
  border-bottom: 0;
  color: var(--gedempt);
  font-weight: 600;
}

.mobile-level__next svg {
  flex: none;
  color: var(--gedempt);
}

.mobile-level__heading {
  margin: 24px 0 4px;
  color: var(--gedempt);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Herindeling L4: de kop op gsm, het zoekveld als tweede rij ---------- */

/* Row 2 hangs under row 1 inside the sticky header; the header keeps the room for it at the top of the page, so nothing
   moves when it slides away (shop.js, when scrolling down) and back (when scrolling up). */
@media (max-width: 640px) {
  .site-header {
    margin-bottom: 60px;
  }

  /* The white band of row 2, behind the field. */
  .site-header::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: -2;
    height: 60px;
    border-bottom: 1px solid var(--lijn);
    background: var(--wit);
  }

  .site-header .search {
    display: flex;
    position: absolute;
    top: calc(100% + 8px);
    left: var(--marge-gsm);
    right: var(--marge-gsm);
    z-index: -1;
    box-shadow: none;
  }

  .site-header.is-search-away .search,
  .site-header.is-search-away::before {
    visibility: hidden;
    transform: translateY(-68px);
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .site-header .search,
  .site-header::before {
    transition: transform 0.2s ease, visibility 0.2s;
  }
}

/* ---------- Herindeling L5 (27 oktober 2026): de grote banner ---------- */

/* About 380 px high on a laptop, so on 1440 x 900 the chips and the first row of products are in view; 300 px on a
   phone (the tabs under it). The fade comes from the side of the text: from the left on a laptop (with a little from
   below for the tabs), from below on a phone; its strength per banner (Catalogus > Banners). app/banners.py measures
   the contrast with the same stops. */
.hero-carousel__slides {
  height: 380px;
}

.hero-slide::before {
  background:
    linear-gradient(to right, var(--overloop) 0%, var(--overloop) 30%, transparent 70%),
    linear-gradient(to top, var(--overloop) 0%, transparent 28%);
}

.hero-slide--fade-1::before {
  opacity: 0.6;
}

.hero-slide--fade-2::before {
  opacity: 0.8;
}

.hero-slide__text {
  gap: 10px;
  padding-top: 32px;
}

.hero-slide__title {
  font-size: 40px;
}

/* Key art with its own text: no title, text or logo on it (they stay for screen readers), only the buttons, low on
   the left above the tabs, with a fade under them. */
.hero-slide--image-text::before {
  background: linear-gradient(to top, var(--overloop) 0%, transparent 40%);
}

.hero-slide--image-text .hero-slide__logo,
.hero-slide--image-text .hero-slide__game,
.hero-slide--image-text .hero-slide__title,
.hero-slide--image-text .hero-slide__line {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hero-slide--image-text .hero-slide__text {
  position: absolute;
  left: 0;
  bottom: 104px;
  padding: 0 44px;
}

@media (max-width: 640px) {
  .hero-carousel__slides {
    height: 300px;
  }

  .hero-slide::before {
    background: linear-gradient(to top, var(--overloop) 0%, var(--overloop) 42%, transparent 82%);
  }

  .hero-slide--image-text::before {
    background: linear-gradient(to top, var(--overloop) 0%, transparent 40%);
  }

  .hero-slide__title {
    font-size: 26px;
  }

  .hero-slide__text {
    gap: 6px;
    padding-bottom: 16px;
  }

  .hero-slide__logo {
    height: 26px;
  }

  .hero-slide__line {
    font-size: 14px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .hero-slide__buttons {
    gap: 8px;
    margin-top: 4px;
  }

  .hero-slide__button {
    padding: 0 16px;
    font-size: 15px;
  }

  .hero-slide--image-text .hero-slide__text {
    bottom: 0;
    padding: 0 18px 18px;
  }
}

/* ---------- Herindeling L5 (27 oktober 2026): de startpagina ---------- */

/* The chips to the games, Andere TCG and the accessories under the banner; one line that slides sideways on a phone. */
.game-chips {
  margin-top: var(--space-5);
}

.game-chips__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

.game-chip {
  min-height: 44px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--inkt);
}

.game-chip:hover {
  box-shadow: inset 0 0 0 1px var(--lijn-sterk);
  background: var(--vlak);
}

@media (max-width: 640px) {
  /* Room inside the row for the focus ring (2 px, 3 px away), also at both ends. */
  .game-chips__list {
    flex-wrap: nowrap;
    margin: -6px calc(-1 * var(--marge-gsm)) -6px -6px;
    padding: 6px var(--marge-gsm) 6px 6px;
    scroll-padding-inline: 6px var(--marge-gsm);
    overflow-x: auto;
    scrollbar-width: none;
  }

  /* No snapping: a chip that gets the focus must be able to scroll into view. */
  .game-chips__list > li {
    flex: none;
  }

  /* About 2,3 cards in view, so the edge of the next one shows there is more. */
  .home-row {
    grid-auto-columns: calc((100vw - var(--marge-gsm) - 2 * var(--space-3)) / 2.3);
  }
}

/* ---------- Herindeling L6 (27 oktober 2026): de pagina van een spel als vertrekpunt ---------- */

/* The intro: two lines with "Lees meer" (with script), whole in the page. */
.listing-intro {
  max-width: 760px;
  margin: -8px 0 24px;
}

.listing-intro__text p,
.listing-closing p {
  margin: 0 0 10px;
  font-size: var(--t-tekst);
  line-height: 24px;
}

.js .listing-intro__text:not(.is-open) {
  max-height: 48px;
  overflow: hidden;
}

.listing-closing {
  max-width: 760px;
  margin-top: 48px;
}

/* ---------- Herindeling L7 (27 oktober 2026): /preorders als releasekalender ---------- */

/* The months as chips; on a phone they stay at the top while scrolling (under the first row of the header). */
.month-chips {
  position: sticky;
  top: 80px;
  z-index: 5;
  margin: 0 0 var(--space-4);
  padding: 8px 0;
  background: var(--wit);
}

.month-chips__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

.month-chip {
  min-height: 40px;
  color: var(--inkt);
  font-weight: 600;
}

.month-chip[aria-current="true"] {
  background: var(--action);
  box-shadow: none;
  color: var(--wit);
}

@media (max-width: 640px) {
  .month-chips {
    top: 60px;
    margin: 0 calc(-1 * var(--marge-gsm)) var(--space-3);
    padding: 8px var(--marge-gsm);
    border-bottom: 1px solid var(--lijn);
  }

  .month-chips__list {
    flex-wrap: nowrap;
    margin: -6px;
    padding: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .month-chips__list > li {
    flex: none;
  }
}

.preorder-month {
  scroll-margin-top: 140px;
}

.preorder-month__title {
  margin: 40px 0 0;
  font-size: var(--t-sectie);
  font-weight: 600;
  line-height: var(--t-sectie-lijn);
}

.preorder-group {
  margin-top: 24px;
}

.preorder-group__head {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
}

.preorder-group__game {
  margin: 0;
  color: var(--gedempt);
  font-size: 13px;
  font-weight: 600;
}

.preorder-group__name {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.preorder-group__name a {
  color: inherit;
  text-decoration: none;
}

.preorder-group__name a:hover {
  text-decoration: underline;
}

/* On a phone a product is a compact row: the image of 56 px, the name and the price, the button on the right. The same
   card as on a laptop, laid out differently. */
@media (max-width: 640px) {
  .preorder-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .preorder-list .product-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--lijn);
    border-radius: 0;
  }

  .preorder-list .product-card:hover {
    box-shadow: none;
  }

  .preorder-list .product-card__image {
    grid-row: 1 / span 2;
    width: 56px;
    height: 56px;
    padding: 2px;
    aspect-ratio: auto;
  }

  .preorder-list .product-card__labels {
    display: none;
  }

  .preorder-list .product-card__body {
    display: contents;
  }

  .preorder-list .product-card__body > div:first-child {
    grid-column: 2;
    grid-row: 1;
  }

  .preorder-list .product-card__name {
    height: auto;
    font-size: 15px;
  }

  .preorder-list .product-card__footer {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
  }

  .preorder-list .card-price {
    font-size: 16px;
  }

  .preorder-list .product-card__buy {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .preorder-list .card-button {
    width: auto;
    padding: 0 16px;
  }
}

/* ---------- Herindeling L8 (27 oktober 2026): zoeken en footer ---------- */

/* The series that matches the search, a strip above the results: the image, the game, the name, date and count, and
   "Bekijk de reeks". The whole strip is the link. */
.search-series {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: -8px 0 24px;
  padding: 10px 18px 10px 10px;
  border: 1px solid var(--lijn);
  border-radius: var(--r-kaart);
  background: var(--wit);
  color: var(--inkt);
  text-decoration: none;
}

.search-series:hover {
  border-color: var(--lijn-sterk);
  box-shadow: var(--schaduw-kaart-aanwijzen);
}

.search-series__image {
  flex: none;
  width: 72px;
  height: 72px;
  padding: 4px;
  border-radius: var(--r-beeld);
}

.search-series__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.search-series__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.search-series__game,
.search-series__meta {
  color: var(--gedempt);
  font-size: 13px;
}

.search-series__name {
  font-size: 17px;
  font-weight: 600;
}

.search-series__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  color: var(--action);
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .search-series__more {
    display: none;
  }

  /* Every link of the footer at least 44 px high to tap. */
  .footer-links a,
  .footer-legal__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    line-height: 20px;
  }
}

/* ---------- Herindeling L8 (27 oktober 2026): mandje en afrekenen ---------- */

/* Checkout: Land and Leveringswijze first (the wide column, room for the service points), the details next to it. */
.checkout-grid {
  grid-template-columns: minmax(0, 1fr) 400px 340px;
}

@media (max-width: 1179px) {
  .checkout-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
}

@media (max-width: 860px) {
  .checkout-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.checkout-back {
  display: none;
}

/* Preorders and stock in one cart: they leave together. */
/* On a phone a fixed bar with the button and the total once the button of the page is out of view (shop.js). */
.cta-bar {
  display: none;
}

@media (max-width: 640px) {
  .checkout-back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0 0 4px;
    color: var(--gedempt);
    font-weight: 600;
    text-decoration: none;
  }

  .cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: block;
    padding: 10px var(--marge-gsm) calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--lijn);
    background: var(--wit);
    box-shadow: var(--schaduw-kop);
    transform: translateY(110%);
    visibility: hidden;
  }

  .cta-bar.is-shown {
    transform: none;
    visibility: visible;
  }

  .cta-bar__button {
    width: 100%;
    min-height: 48px;
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .cta-bar {
    transition: transform 0.2s ease, visibility 0.2s;
  }
}

/* With a service point there is no second invoice address (the address is the one of the invoice). */
.tick[data-billing-row][hidden] {
  display: none;
}

/* ---------- Mockups (28 oktober 2026): de startpagina ---------- */

/* The promotion bar on a phone on one line: "Gratis verzending vanaf € 100", the countries from 641 px. */
@media (max-width: 640px) {
  .promo__more {
    display: none;
  }

  .promo__text {
    white-space: nowrap;
  }
}

/* The big banner over the full width of the screen: no frame, no margin at the sides; the text and the buttons inside
   the content width. */
.hero-carousel {
  margin-top: 0;
  border-radius: 0;
}

.hero-slide__wrap {
  position: relative;
  z-index: 2;
  height: 100%;
}

.hero-slide__text {
  position: absolute;
  left: var(--space-5);
  bottom: 84px;
  max-width: 560px;
  padding: 0;
}

.hero-slide--image-text .hero-slide__text {
  left: var(--space-5);
  bottom: 84px;
  padding: 0;
}

/* The fade from the side of the text: on a laptop from the left (full to 45 %, gone at 65 %). */
.hero-slide::before {
  background: linear-gradient(to right, var(--overloop) 0%, var(--overloop) 45%, transparent 65%);
}

.hero-slide--image-text::before {
  background: linear-gradient(to top, var(--overloop) 0%, transparent 40%);
}

.hero-carousel__pause {
  top: 16px;
  right: 24px;
}

/* The tabs: a narrow dark strip of 60 px at the bottom of the banner, three as wide, text only. */
.hero-tabs {
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  height: 60px;
  background: color-mix(in srgb, var(--inkt) 70%, transparent);
}

.hero-tabs__row {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  height: 100%;
}

.hero-tab {
  gap: 8px;
  min-height: 0;
  height: 100%;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--wit);
  font-size: 14px;
}

.hero-tab + .hero-tab {
  border-left: 1px solid color-mix(in srgb, var(--wit) 30%, transparent);
}

.hero-tab__text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-tab__label {
  position: static;
  flex: none;
}

.hero-tab[aria-selected="true"] {
  background: transparent;
  box-shadow: inset 0 -3px 0 var(--wit);
  color: var(--wit);
  font-weight: 600;
}

.hero-tab[aria-selected="false"]:hover {
  background: color-mix(in srgb, var(--wit) 10%, transparent);
}

.hero-tab__bar {
  height: 3px;
  background: var(--wit);
}

/* The dots under the banner: only on a phone. */
.hero-dots {
  display: none;
}

@media (max-width: 640px) {
  .hero-carousel__slides {
    height: 300px;
  }

  .hero-slide::before {
    background: linear-gradient(to top, var(--overloop) 0%, var(--overloop) 50%, transparent 80%);
  }

  .hero-slide__text,
  .hero-slide--image-text .hero-slide__text {
    left: var(--marge-gsm);
    right: var(--marge-gsm);
    bottom: 16px;
    max-width: none;
  }

  .hero-slide__buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-slide__button {
    justify-content: center;
  }

  .hero-tabs {
    display: none;
  }

  .hero-carousel__pause {
    display: none;
  }

  .hero-dots {
    display: flex;
    justify-content: center;
  }

  .hero-dot {
    display: grid;
    place-items: center;
    width: 44px;
    height: 36px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .hero-dot span {
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--gedempt);
    border-radius: var(--r-rond);
  }

  .hero-dot[aria-current="true"] span {
    border-color: var(--inkt);
    background: var(--inkt);
  }

  /* The search field: no line under it, only white space (about 14 px) to the banner. */
  .site-header {
    margin-bottom: 62px;
    border-bottom: 0;
  }

  .site-header::before {
    height: 62px;
    border-bottom: 0;
  }

  .site-header .search {
    top: calc(100% + 4px);
  }
}

/* The chips to the games: on a phone they go on over more lines, nothing slides out of view. */
@media (max-width: 640px) {
  .game-chips__list {
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}

/* The rows of the start page: four cards on a laptop; on a phone the same four as a grid of 2 x 2. */
@media (max-width: 640px) {
  .home-row,
  .home-row--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 10px;
    margin-right: 0;
    padding: 0;
    overflow: visible;
  }

  .home-row > .product-card:nth-child(n + 5) {
    display: none;
  }
}

/* Andere TCG on the start page: on a laptop every game in one row (its logo tile, .logo-tile), on a phone 2 x 2 with
   "en N andere". */
.group-row {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.group-row__more {
  display: none;
}

.group-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 10px;
  border: 1px solid var(--lijn);
  border-radius: var(--r-kaart);
  background: var(--wit);
  color: var(--inkt);
  text-align: center;
  text-decoration: none;
}

.group-tile:hover {
  border-color: var(--lijn-sterk);
  box-shadow: var(--schaduw-kaart-aanwijzen);
}

.group-tile__name {
  font-size: 14px;
  font-weight: 600;
}

.group-tile__meta {
  display: none;
  color: var(--gedempt);
  font-size: 12px;
}

@media (max-width: 1023px) {
  .group-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .group-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  .group-row__game--wide {
    display: none;
  }

  .group-row__more {
    display: block;
  }

  .group-tile__meta {
    display: block;
  }

  .group-tile--more {
    justify-content: center;
  }
}

/* Mockups: on a phone the headings of the rows 18 px with the link of 14 px next to them, the chips 40 px high and
   14 px under the dots. */
@media (max-width: 640px) {
  .home-head h2 {
    font-size: 18px;
    line-height: 24px;
  }

  .home-head .arrow-link {
    font-size: 14px;
  }

  .home-section {
    padding-top: 24px;
  }

  .game-chips {
    margin-top: 14px;
  }

  .game-chip {
    min-height: 40px;
    padding: 0 14px;
    font-size: 14px;
  }
}

/* ---------- Mockups (28 oktober 2026): het menu op gsm (MenuGsm) ---------- */

/* The bar on top: back (on a deeper level), the name of the level in the middle, close. */
.mobile-menu__top {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  padding: 0 8px;
  margin-bottom: 0;
}

.mobile-menu__name {
  grid-column: 2;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-level:not(#menu-start) .mobile-menu__name {
  text-align: center;
}

.mobile-menu__back,
.mobile-menu__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-rond);
  background: transparent;
  color: var(--inkt);
  cursor: pointer;
}

.mobile-menu__back {
  grid-column: 1;
  grid-row: 1;
}

.mobile-menu__back[hidden] {
  display: none;
}

.mobile-menu__close {
  grid-column: 3;
  grid-row: 1;
}

/* The first level: items of 52 px with a line; the quiet links 48 px. */
.mobile-menu .mobile-level__list--main a {
  min-height: 52px;
  font-size: 16px;
}

.mobile-menu .mobile-level__list a {
  min-height: 48px;
  font-size: 15px;
}

.mobile-menu .mobile-level__list--top a {
  font-weight: 600;
}

.mobile-menu .mobile-level__list:not(.mobile-level__list--main) a {
  border-bottom: 0;
}

.mobile-level__date {
  flex: none;
  color: var(--gedempt);
  font-size: 13px;
}

.mobile-level__heading {
  margin: 16px 0 4px;
  font-size: 12px;
  font-weight: 700;
}

/* The next release at the bottom of the first level. */
.menu-release {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 14px;
  border: 1px solid var(--lijn);
  border-radius: var(--r-kaart);
  color: var(--inkt);
  text-decoration: none;
}

.menu-release__image {
  flex: none;
  width: 56px;
  height: 56px;
  padding: 2px;
  border-radius: var(--r-beeld);
}

.menu-release__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.menu-release__text {
  display: grid;
  gap: 2px;
}

.menu-release__label {
  color: var(--status-preorder);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.menu-release__name {
  font-size: 15px;
  font-weight: 600;
}

.menu-release__more {
  color: var(--action);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Mockups (28 oktober 2026): het paneel van Andere TCG (MenuDesktop) ---------- */

.nav-games-col {
  flex: 3 1 0;
  min-width: 0;
}

.nav-panel__grid--group > .nav-tile {
  flex: 1 1 0;
}

.nav-games__more a {
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nav-games__more {
  display: flex;
  gap: 20px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--lijn);
  font-size: 14px;
  font-weight: 600;
}

/* MenuGsm: on the first level "Menu" on the left; the quiet links in the normal ink. */
.mobile-menu__back[hidden] + .mobile-menu__name {
  grid-column: 1 / span 2;
  padding-left: 8px;
  text-align: left;
}

.mobile-menu .mobile-level__list--quiet a {
  color: var(--inkt);
  font-weight: 400;
}

/* ---------- Mockups (28 oktober 2026): de pagina van een spel (SpelGsm, SpelDesktop) ---------- */

/* The head: the logo (the h1), the intro and under them the kinds as chips (desktop-review). */
.game-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  margin-bottom: 32px;
}

.game-head__mark {
  width: 180px;
  height: 56px;
  margin-bottom: 12px;
  padding: 8px 14px;
}

.game-head__title {
  margin: 0 0 8px;
  font-size: 34px;
  line-height: 1.15;
}

.game-head .listing-intro {
  margin: 0;
}

/* The coming series (cards) and the recent ones (a list) side by side on a laptop. */
.game-series {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}

.game-series .home-head h2 {
  font-size: 22px;
}

.coming-series {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
}

.coming-card__link {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  height: 100%;
  padding: 10px;
  border: 1px solid var(--lijn);
  border-radius: var(--r-kaart);
  color: var(--inkt);
  text-decoration: none;
}

.coming-card__link:hover {
  border-color: var(--lijn-sterk);
  box-shadow: var(--schaduw-kaart-aanwijzen);
}

.coming-card__image {
  height: 130px;
  overflow: hidden;
  border-radius: var(--r-beeld);
}

.coming-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coming-card__text {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 6px;
}

.coming-card__name {
  font-size: 17px;
  font-weight: 600;
}

.recent-series__date {
  color: var(--gedempt);
  font-size: 14px;
}

.recent-series {
  list-style: none;
  margin: 0;
  padding: 0;
}

.recent-series a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  border-bottom: 1px solid var(--lijn);
  color: var(--inkt);
  text-decoration: none;
}

.recent-series a:hover span:first-child {
  text-decoration: underline;
}

/* "Alle producten 381" on the line of the switch and Sorteer. */
.listing-all {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  white-space: nowrap;
}

/* The filter column in a frame (mockups). */
@media (min-width: 901px) {
  .filters {
    padding: 16px;
    border: 1px solid var(--lijn);
    border-radius: var(--r-kaart);
  }
}

@media (max-width: 1023px) {
  .game-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .game-series {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A phone: no crumbs on the page of a game, the coming series as a row of cards that slides sideways (the image above),
   "Alle producten" above Filters and Sorteer. */
@media (max-width: 640px) {
  .listing-page-game .breadcrumb {
    display: none;
  }

  .game-head__title {
    font-size: 26px;
  }

  .game-head__mark {
    width: 150px;
    height: 48px;
  }

  .coming-series {
    grid-template-columns: none;
    grid-auto-columns: 250px;
    grid-auto-flow: column;
    gap: 10px;
    margin-right: calc(-1 * var(--marge-gsm));
    padding-right: var(--marge-gsm);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .coming-card__link {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .coming-card__image {
    height: 230px;
  }

  .listing-all {
    font-size: 20px;
  }
}

@media (max-width: 900px) {
  .listing-all {
    grid-row: 1;
    grid-column: 1 / -1;
    margin-bottom: 12px;
  }

  .listing:has(.listing-all) .filters,
  .js .listing:has(.listing-all) .filters,
  .js .listing:has(.listing-all) .sort-box {
    grid-row: 2;
  }

  .listing:has(.listing-all) .sort-box {
    grid-row: 3;
  }

  .js .listing:has(.listing-all) .orderable-switch {
    grid-row: 3;
  }

  .listing:has(.listing-all) .orderable-switch {
    justify-self: stretch;
    justify-content: space-between;
    flex-direction: row-reverse;
  }
}

@media (max-width: 640px) {
  .game-series .home-head h2 {
    font-size: 18px;
  }
}

/* ---------- Mockups (28 oktober 2026): de productkaart (Kaarten) ---------- */

/* The image a fixed height (180 px, on a phone 140), the photo whole in it; the label inside the image, top left. */
.product-card {
  padding: 10px;
  gap: 8px;
}

.product-card__image,
.listing-grid .product-card__image {
  height: 180px;
  aspect-ratio: auto;
  padding: 8px;
}

.product-card__labels {
  top: 8px;
  left: 8px;
  right: 8px;
}

.product-card__body {
  gap: 6px;
  margin: 0;
}

.product-card__name {
  font-size: 14px;
  line-height: 18px;
  height: 36px;
}

.card-price {
  font-size: 17px;
}

@media (max-width: 640px) {
  .product-card {
    padding: 8px;
    gap: 6px;
  }

  .product-card__image,
  .listing-grid .product-card__image {
    height: 140px;
    padding: 6px;
  }

  .product-card__labels {
    top: 6px;
    left: 6px;
    right: 6px;
  }

  .product-card__name {
    font-size: 13px;
    line-height: 17px;
    height: 34px;
  }

  .card-price {
    font-size: 16px;
  }
}

/* The compact rows of /preorders on a phone keep their image of 56 px. */
@media (max-width: 640px) {
  .preorder-list.listing-grid .product-card__image {
    width: 56px;
    height: 56px;
    padding: 2px;
  }

  .preorder-list .product-card {
    padding: 10px 0;
  }
}

/* ---------- Mockups (28 oktober 2026): een lijst op gsm (LijstGsm) ---------- */

.listing-back {
  display: none;
}

@media (max-width: 640px) {
  .container:has(> .listing-back) > .breadcrumb {
    display: none;
  }

  .listing-back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 4px;
    color: var(--action);
    font-weight: 600;
    text-decoration: none;
  }
}

/* The bottom of the filter panel: "Wis alles" and "Toon N producten" next to each other. */
.filters__foot {
  display: flex;
  gap: 10px;
}

.filters__foot .filters__clear {
  flex: none;
  text-decoration: none;
}

.filters__foot .filters__done {
  flex: 1;
}

/* LijstGsm: the chips of the chosen filters right under Filters and Sorteer, the switch under them. */
@media (max-width: 900px) {
  .js .listing:has(.active-filters):not(:has(.listing-all)) .active-filters {
    grid-row: 2;
  }

  .js .listing:has(.active-filters):not(:has(.listing-all)) .orderable-switch {
    grid-row: 3;
  }
}

/* ---------- Mockups (28 oktober 2026): de productpagina (ProductGsm, ProductDesktop) ---------- */

/* Game · series as plain links above the title. */
.product-page__series {
  color: var(--inkt);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.product-page__series a {
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.product-page__title {
  font-size: 30px;
}

/* The label next to the delivery date. */
.product-page__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 12px 0 0;
  font-size: 15px;
}

.product-page__status:empty {
  display: none;
}

/* The grey box under the button: shipping and the cooling-off period. */
/* A laptop: the thumbnails in a column left of the main photo (560 px), the buy block in a frame. */
@media (min-width: 1024px) {
  .gallery:has(> .product-photos) {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 14px;
  }

  .gallery__stage {
    height: 560px;
  }

  .gallery > .gallery__stage {
    grid-column: 2;
    grid-row: 1;
    height: 560px;
  }

  .gallery > .product-photos {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 0;
  }

  .product-photos__thumb {
    width: 80px;
    height: 80px;
  }

  .product-page__buy {
    padding: 24px;
    border: 1px solid var(--lijn);
    border-radius: var(--r-kaart);
  }

  .product-page__buy .product-page__series {
    margin-top: 0;
  }
}

/* A phone: the title 22 px, the dots under the photo, shipping and the cooling-off period on one line. */
@media (max-width: 640px) {
  .product-page__title {
    font-size: 22px;
    line-height: 1.25;
  }

  .product-page__series {
    font-size: 13px;
  }

  .gallery > .gallery__dots {
    position: static;
    padding: 10px 0 0;
  }

  .gallery__dots li {
    background: var(--lijn-sterk);
  }

}

/* Mockups: the quantity on a row of its own, the button over the full width under it. */
.product-page .buy {
  flex-wrap: wrap;
}

.product-page .buy__button {
  flex: 1 1 100%;
}

/* ---------- Mockups (28 oktober 2026): mandje en afrekenen op gsm (MandjeGsm, AfrekenenGsm) ---------- */

@media (max-width: 640px) {
  /* The steps on one line: a small dot with the name next to it. */
  .checkout-steps {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    max-width: none;
    margin: 0 0 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--lijn);
  }

  .checkout-steps__step {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .checkout-steps__step::before,
  .checkout-steps__step::after {
    display: none;
  }

  .checkout-steps__dot {
    width: 22px;
    height: 22px;
    font-size: 12px;
    box-shadow: none;
  }

  .checkout-steps__dot svg {
    width: 12px;
    height: 12px;
  }

  .checkout-steps__name {
    margin: 0;
    font-size: 13px;
    white-space: nowrap;
  }

  /* The cart: the bar at the bottom with the total on the left, always there; room for it under the page. */
  .cta-bar--split {
    display: flex;
    align-items: center;
    gap: 12px;
    transform: none;
    visibility: visible;
  }

  .cta-bar__total {
    display: grid;
    margin: 0;
    font-size: 13px;
    line-height: 1.2;
  }

  .cta-bar__total b {
    font-size: 17px;
  }

  .cta-bar--split .cta-bar__button {
    flex: 1;
  }

  body:has(.cta-bar--split) {
    padding-bottom: 76px;
  }

  /* Checkout: the blocks without a frame over the full width, separated by a grey band. */
  .checkout-grid .checkout-block {
    margin: 0 calc(-1 * var(--marge-gsm));
    padding: 20px var(--marge-gsm);
    border: 0;
    border-radius: 0;
    border-bottom: 8px solid var(--vlak);
  }

}

/* ---------- Mockups (28 oktober 2026): preorders (PreordersGsm) ---------- */

.preorder-how {
  margin: -8px 0 16px;
  font-size: 14px;
}

.preorder-how a {
  color: var(--action);
}

.preorder-group__head {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.preorder-group__more {
  flex: none;
  color: var(--action);
  font-size: 14px;
  font-weight: 600;
}

.preorder-group__rest {
  margin-top: 12px;
}

.preorder-group__rest > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--action);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.preorder-group__rest[open] > summary {
  margin-bottom: 8px;
}

/* On a phone every series is a block with a thin frame. */
@media (max-width: 640px) {
  .preorder-group {
    padding: 12px 12px 4px;
    border: 1px solid var(--lijn);
    border-radius: var(--r-kaart);
  }

  .preorder-group__name {
    font-size: 17px;
  }
}

/* ---------- Mockups (28 oktober 2026): Andere TCG op gsm (AndereTcgGsm) ---------- */

.game-tile__go {
  display: none;
}

/* On a phone a game is a row: the logo on the left, the name and the numbers, a chevron on the right. */
@media (max-width: 600px) {
  .game-tiles {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .game-tile__link {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    padding: 8px 12px 8px 8px;
  }

  .game-tile__mark {
    grid-row: 1 / -1;
    width: 96px;
    height: 56px;
    margin: 0;
    padding: 6px 8px;
  }

  .game-tile__name,
  .game-tile__next {
    grid-column: 2;
    padding: 0;
  }

  .game-tile__go {
    display: flex;
    grid-column: 3;
    grid-row: 1 / -1;
    color: var(--gedempt);
  }

  .group-soon .home-row > :nth-child(n + 3) {
    display: none;
  }
}

/* Mockups: on a phone the chips go on over more lines (nothing slides out of view); "Reeks bekijken" stays next to
   the name of the series. */
.preorder-group__head {
  flex-wrap: nowrap;
}

.preorder-group__head > div {
  min-width: 0;
}


/* ---------- Desktop-review (28 oktober 2026) ---------- */

/* 2. With the menu row (from 1024 px): as much room above the row of logo, search, Account and Mandje (to the bar on
   top) as below it (to the words of the menu, which sit 15 px into their row of 46 px). */
@media (min-width: 1024px) {
  .site-header:not(.is-compact) .site-header__inner {
    height: 96px;
    padding-top: 16px;
  }

  .site-header.is-compact {
    margin-bottom: calc(96px + 46px - 64px);
  }
}

/* 4. The headings of a dropdown (Soort product, Reeksen, Accessoires, ...) in the brand colour, small and bold, clearly
   apart from the links under them. */
.nav-panel__heading {
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* 5. The next releases of a game or a group: a narrow column on the right (as the tile of Andere TCG had), so the
   columns of links get more room; two releases one under the other. */
.nav-panel__grid > .nav-tiles {
  flex: 0 0 260px;
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.nav-tiles .nav-tile__image {
  height: 96px;
}

.nav-tiles .nav-tile__body {
  padding: 10px 14px;
}

.nav-tiles .nav-tile__name {
  font-size: 16px;
  line-height: 20px;
}

/* 7. A game as its logo on a dark plate over the whole tile (the dropdown of Andere TCG, the row Andere TCG on the
   start page): no white around the plate; pointing at it or focusing it lifts the tile and lights the logo up. */
.logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 96px;
  padding: 14px 18px;
  border-radius: var(--r-kaart);
  background: var(--inkt);
  color: var(--wit);
  text-decoration: none;
}

.logo-tile img {
  display: block;
  max-width: 100%;
  max-height: 68px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.logo-tile__name {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.logo-tile:focus-visible {
  outline: var(--focus-dikte) solid var(--action);
  outline-offset: var(--focus-afstand);
}

@media (prefers-reduced-motion: no-preference) {
  .logo-tile,
  .logo-tile img {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .logo-tile:hover,
  .logo-tile:focus-visible {
    transform: translateY(-2px);
  }

  .logo-tile:hover img,
  .logo-tile:focus-visible img {
    transform: scale(1.06);
  }
}

.logo-tile:hover,
.logo-tile:focus-visible {
  box-shadow: var(--schaduw-kaart-aanwijzen);
}

.nav-logos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}

/* Extra (desktop-review): the dropdowns of the main menu over the whole width of the screen, like a mega menu. The
   white of the panel runs from edge to edge and joins the menu row without a line or a rounded frame; its content stays
   within the width of the content, on the left edge of the logo. Under the panel a light shadow over the page (the
   veil behind it stays). */
@media (min-width: 1024px) {
  .main-nav {
    position: relative;
  }

  .main-nav__list {
    position: static;
  }

  .nav-panel {
    left: 0;
    right: 0;
    padding: 28px max(var(--space-5), calc((100% - var(--inhoud)) / 2)) 24px;
    border: 0;
    border-radius: 0;
    box-shadow: var(--schaduw-kop);
  }
}

/* 8. The big banner on a laptop: the key art no longer over the whole width of the screen. The image stands in its
   frame within the width of the content (cropped at its point, at its zoom, its own proportions), outside it a dark
   ground in --inkt, and at its left and right edge a fade from the image into that ground. Text, buttons and tabs stay
   as they are. */
.hero-slide__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .hero-slide__frame {
    left: 50%;
    width: min(calc(100% - 2 * var(--space-5)), var(--inhoud));
    transform: translateX(-50%);
  }

  .hero-slide__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--inkt) 0%, transparent 12%, transparent 88%, var(--inkt) 100%);
    pointer-events: none;
  }
}

/* 9. The preview of the big banner on the screen of a banner (banner_preview.html, in an iframe): a free band
   above and below the banner, the whole image dimmed behind the frame (placed by admin-banner.js), dragging moves it. */
.banner-edit {
  margin: 0;
  padding: 160px 0;
  background: var(--vlak);
  cursor: move;
  user-select: none;
  touch-action: none;
}

.banner-edit .hero-carousel,
.banner-edit .hero-carousel__slides,
.banner-edit .hero-slide {
  overflow: visible;
}

.banner-edit__ghost {
  position: absolute;
  max-width: none;
  opacity: 0.3;
  pointer-events: none;
}

/* Extra (desktop-review): "In mandje" and "Reserveer" on a card with the cart icon before the words, as on the product
   page; "Mail me" keeps its bell. */
.card-button__text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.card-button__words {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 10. The cards larger and easier to read: the title 16 px and the price 20 px (on a phone the smaller sizes stay). */
@media (min-width: 641px) {
  .product-card__name {
    font-size: 16px;
    line-height: 21px;
    height: 42px;
  }

  .card-price {
    font-size: 20px;
  }
}

/* Extra (desktop-review): the teaser of the WhatsApp channel in the footer, no link. On a laptop and a tablet under the
   columns after a thin line; on a phone right under the company details (its place in the HTML). */
.footer-whatsapp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  grid-column: 1 / -1;
  order: 1;
  padding-top: var(--space-5);
  border-top: 1px solid var(--op-merk-lijn);
}

.footer-whatsapp__text {
  margin: 0;
}

.footer-whatsapp .icon-whatsapp {
  flex: none;
}

@media (max-width: 640px) {
  .footer-whatsapp {
    order: 0;
    padding-top: 0;
    border-top: 0;
    align-items: flex-start;
  }

  .footer-whatsapp__text {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* 14. On every page with crumbs the same white above and below them: 20 px from the menu (the header) to the crumbs and
   20 px from the crumbs to the rest of the page; what follows the crumbs adds no margin of its own. */
#inhoud .breadcrumb {
  margin: 0;
  padding: 20px 0;
}

#inhoud .breadcrumb + *,
#inhoud .breadcrumb + :is(.listing-back, .product-back) + * {
  margin-top: 0;
}

/* On a phone a link back replaces the crumbs on a list and a product page: the same white above and below it. */
@media (max-width: 640px) {
  #inhoud .breadcrumb + :is(.listing-back, .product-back) {
    margin-block: 8px;
  }
}

/* 15 and 16. The page of a game: the logo is the h1, larger, without the name under it; the kinds as chips. */
.game-head__logo {
  margin: 0 0 12px;
  line-height: 0;
}

.game-head__logo .game-head__mark {
  width: 220px;
  height: 68px;
  margin: 0;
}

.game-head {
  gap: 20px;
}

.game-head .game-head__kinds {
  margin-top: 0;
}

@media (max-width: 640px) {
  .game-head__logo .game-head__mark {
    width: 170px;
    height: 54px;
  }
}

/* 17. Sorteren: a rounded select in the style of the other fields (the corners of a field, normal weight; as high as
   the button Filters next to it on a phone). */
.sort-box select {
  border-radius: var(--r-veld);
  font-size: 15px;
  font-weight: 400;
}

/* 18. A list on a laptop (spel, soort, reeks, zoeken, merk, accessoires): by default one product per row
   (LijstDesktop, 28 oktober 2026). No frame per row: one list with a thin line between the rows and about 18 px above
   and below. Three columns: the photo in a fixed square of 144 px (it sets the height of every row), the info (the kind
   in the singular, the name on at most two lines, the start of the description with "Meer", the status label at the
   bottom) and the buy column of 200 px (the price right-aligned right above the button, both at the bottom). The
   switch Lijst/Raster next to Sorteer keeps the grid as it was (data-weergave="raster" on <html>). */
.product-card__kind,
.product-card__details,
.view-switch {
  display: none;
}

@media (min-width: 1024px) {
  .js .view-switch {
    display: inline-flex;
    flex: none;
    padding: 3px;
    border-radius: var(--r-veld);
    background: var(--vlak);
  }

  .view-switch__button {
    height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--r-mandknop);
    background: transparent;
    color: var(--gedempt);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }

  .view-switch__button[aria-pressed="true"] {
    background: var(--wit);
    color: var(--inkt);
    box-shadow: var(--schaduw-keuze);
  }

  .view-switch__button:focus-visible {
    outline: var(--focus-dikte) solid var(--action);
    outline-offset: var(--focus-afstand);
  }

  :root:not([data-weergave="raster"]) .listing-grid--switch {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border-top: 1px solid var(--lijn);
  }

  :root:not([data-weergave="raster"]) .listing-grid--switch .product-card {
    display: grid;
    grid-template-columns: 144px minmax(0, 1fr);
    gap: var(--space-5);
    align-items: stretch;
    padding: 18px 0;
    border: 0;
    border-bottom: 1px solid var(--lijn);
    border-radius: 0;
    background: none;
  }

  :root:not([data-weergave="raster"]) .listing-grid--switch .product-card:hover {
    box-shadow: none;
  }

  :root:not([data-weergave="raster"]) .listing-grid--switch .product-card__image {
    width: 144px;
    height: 144px;
    aspect-ratio: 1 / 1;
    padding: 8px;
    border-radius: var(--r-beeld);
    background: var(--wit);
  }

  :root:not([data-weergave="raster"]) .listing-grid--switch .product-card__image img,
  :root:not([data-weergave="raster"]) .listing-grid--switch .product-card__image svg {
    inset: 8px;
    top: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    object-fit: contain;
  }

  :root:not([data-weergave="raster"]) .listing-grid--switch .product-card__labels,
  :root:not([data-weergave="raster"]) .listing-grid--switch .product-card__series {
    display: none;
  }

  :root:not([data-weergave="raster"]) .listing-grid--switch .product-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "info price"
      "info buy";
    gap: 8px var(--space-5);
    margin: 0;
    min-height: 144px;
  }

  :root:not([data-weergave="raster"]) .listing-grid--switch .product-card__body > div:first-child {
    grid-area: info;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  :root:not([data-weergave="raster"]) .listing-grid--switch .product-card__footer {
    grid-area: price;
    align-self: end;
    justify-content: flex-end;
    margin: 0;
  }

  :root:not([data-weergave="raster"]) .listing-grid--switch .product-card__buy {
    grid-area: buy;
  }

  :root:not([data-weergave="raster"]) .listing-grid--switch .card-button {
    height: 44px;
  }

  :root:not([data-weergave="raster"]) .listing-grid--switch .product-card__kind {
    display: block;
    overflow: hidden;
    margin: 0 0 4px;
    color: var(--gedempt);
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  :root:not([data-weergave="raster"]) .listing-grid--switch .product-card__name {
    display: -webkit-box;
    height: auto;
    max-height: 44px;
    margin: 0 0 4px;
    overflow: hidden;
    font-size: 17px;
    font-weight: 600;
    line-height: 22px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  :root:not([data-weergave="raster"]) .listing-grid--switch .product-card__name a {
    color: var(--inkt);
  }

  :root:not([data-weergave="raster"]) .listing-grid--switch .product-card__details {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
  }

  .product-card__desc {
    display: -webkit-box;
    max-height: 42px;
    margin: 0 0 4px;
    overflow: hidden;
    color: var(--gedempt);
    font-size: 14px;
    line-height: 21px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .product-card__more {
    color: var(--action);
    font-weight: 600;
  }

  .product-card__state {
    margin: auto 0 0;
    font-size: 14px;
  }
}

/* 19. The checkboxes of the filters drawn by us: an evenly thick border on every side, corners of 4 px, checked a full
   box in the brand colour with a white check. The real checkbox stays (invisible, under the box) for keyboards and
   screen readers. */
.filters .check {
  position: relative;
}

.filters .check__input {
  position: absolute;
  top: 1px;
  left: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
}

.check__box {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1.5px solid var(--lijn-sterk);
  border-radius: 4px;
  background: var(--wit);
}

.check:hover .check__box {
  border-color: var(--gedempt);
}

.check__input:checked + .check__box {
  border-color: var(--brand);
  background: var(--brand);
}

.check__input:checked + .check__box::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--op-merk);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.check__input:focus-visible + .check__box {
  outline: var(--focus-dikte) solid var(--action);
  outline-offset: var(--focus-afstand);
}

/* 20. "Meer" under a long group of a filter: an arrow down, no underline, in the colour of the links of the filters. */
.facet__more {
  align-items: center;
  gap: var(--space-1);
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--action);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.js .facet__more {
  display: inline-flex;
}

.facet__more .nav-item__chevron {
  color: currentColor;
}

.facet__more[aria-expanded="true"] .nav-item__chevron {
  transform: rotate(180deg);
}

/* 21. The product page: up to 1023 px the columns fall away and everything goes under each other (photos, buy block,
   the sections on the left, then those on the right). From 1024 px two columns, each on its own: on the left the
   photos with Beschrijving, Inhoud, Over de reeks and Productgegevens; on the right the buy block with Zo werken
   preorders and Verzending en retour under it, so no empty space under the buy block. */
.product-page__left,
.product-page__right {
  display: contents;
}

.product-page {
  grid-template-areas:
    "media"
    "buy"
    "sections"
    "side";
}

.product-page__sections--main {
  grid-area: sections;
}

.product-page__sections--side {
  grid-area: side;
  margin-top: 0;
}

@media (min-width: 1024px) {
  .product-page {
    grid-template-areas: "left right";
    row-gap: 0;
  }

  .product-page__left,
  .product-page__right {
    display: flex;
    flex-direction: column;
    gap: 40px;
    min-width: 0;
  }

  .product-page__left {
    grid-area: left;
  }

  .product-page__right {
    grid-area: right;
    gap: 32px;
  }

  .product-page__buy {
    position: static;
    align-self: stretch;
  }

  .product-page__sections--side {
    margin-top: 0;
  }
}

/* 27. The preorder notice in the panel, on /mandje, at the checkout and on the order page: neutral grey, the same words
   everywhere. */
.preorder-notice {
  margin: 0 0 var(--space-4);
  padding: 12px 14px;
  border-radius: var(--r-veld);
  background: var(--status-uit-vlak);
  color: var(--inkt);
  font-size: 14px;
  line-height: 20px;
}

/* 29. The radio buttons of the checkout (delivery and service point) clearly visible: larger, an evenly thick ring,
   chosen a full dot in the brand colour inside the ring. */
.ship-option input[type="radio"],
.pickup-point input[type="radio"] {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid var(--lijn-sterk);
  border-radius: 50%;
  background: var(--wit);
  appearance: none;
  cursor: pointer;
}

.ship-option input[type="radio"]:checked,
.pickup-point input[type="radio"]:checked {
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: inset 0 0 0 4px var(--wit);
}

.ship-option input[type="radio"]:focus-visible,
.pickup-point input[type="radio"]:focus-visible {
  outline: var(--focus-dikte) solid var(--action);
  outline-offset: var(--focus-afstand);
}

/* 30. Je gegevens and Adres first, then Levering, the overview on the right; the two columns of the form as wide. */
@media (min-width: 1180px) {
  .checkout-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 340px;
  }
}

/* 31. The country is a field of the address: a select like the other fields. */
main .field--country select {
  width: 100%;
  appearance: none;
  padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* 33. The overview moves along with the page, so the total, the terms and the button are always in view; the articles
   folded ("Artikelen (5)"), closed by default. */
@media (min-width: 861px) {
  .checkout-summary {
    position: sticky;
    top: var(--space-4);
  }
}

.checkout-items {
  border-bottom: 1px solid var(--lijn);
}

.checkout-items__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.checkout-items__head::-webkit-details-marker {
  display: none;
}

.checkout-items__head .nav-item__chevron {
  color: currentColor;
}

.checkout-items[open] .checkout-items__head .nav-item__chevron {
  transform: rotate(180deg);
}

.checkout-items .checkout-summary__lines {
  padding-bottom: var(--space-4);
}

.checkout-summary .preorder-notice {
  margin: 0;
}

/* On a phone and a tablet the order is folded on top already (checkout_mini.html). */
@media (max-width: 860px) {
  .checkout-items {
    display: none;
  }
}

/* 35. Withdrawing an order: a small link at the bottom of the order page. */
.order-page__withdraw {
  margin: var(--space-5) 0 0;
  font-size: 13px;
}

.order-page__withdraw a {
  color: var(--gedempt);
}

/* Lists (28 oktober 2026): the head line always on one line, on the left the title with its number (the page of a game),
   on the right Enkel bestelbaar, Lijst/Raster and Sorteer. The chips of the active filters in a row of their own under
   it and above the products, going on over a next line when they do not fit, "Wis alles" last as a plain link. */
@media (min-width: 901px) {
  .listing-bar {
    flex-wrap: nowrap;
  }

  .listing-bar > .orderable-switch {
    margin-left: auto;
  }

  .listing-bar > .sort-box {
    margin-left: 0;
  }

  .active-filters {
    margin: -4px 0 20px;
  }
}

.active-filters__clear {
  margin-left: 4px;
  padding-top: 0;
  text-decoration: none;
}

.active-filters__clear:hover {
  text-decoration: underline;
}

/* The newsletter strip (28 oktober 2026): centred, three rows under each other: the heading, one sentence (at most
   560 px wide) and the field with the button next to it (at most 480 px); on a phone the field and the button under each
   other over the full width. As much white above as below: 56 px, on a phone 40 px. The messages centred under it. */
.newsletter-strip {
  padding-block: 56px;
}

.newsletter {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.newsletter__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}

.newsletter__note {
  max-width: 560px;
  margin: 0;
  text-wrap: balance;
  color: var(--gedempt);
  font-size: 15px;
  line-height: 22px;
}

.newsletter__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 10px;
  width: 100%;
  max-width: 480px;
  margin-top: 8px;
}

.newsletter__row {
  display: flex;
  gap: var(--space-2);
  width: 100%;
  max-width: none;
}

.newsletter__error,
.newsletter__done {
  margin: 0;
  text-align: center;
}

@media (max-width: 640px) {
  .newsletter-strip {
    padding-block: 40px;
  }

  .newsletter__title {
    font-size: 21px;
    line-height: 27px;
  }

  .newsletter__row {
    flex-direction: column;
  }

  .newsletter__row input,
  .newsletter__row .btn {
    flex: none;
    width: 100%;
  }
}

/* The page of a game (28 oktober 2026): the chips of the kinds right of the logo, the first row on the height of the
   logo, a next row also right of the logo; on a phone under the logo. */
.game-head__top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
}

.game-head__top .game-head__logo {
  flex: none;
  margin: 0;
}

.game-head__top .game-head__kinds {
  flex: 1;
  min-width: 0;
  margin: 12px 0 0; /* the first row of 44 px in the middle of the logo of 68 px */
}

@media (max-width: 640px) {
  .game-head__top {
    flex-direction: column;
    gap: var(--space-4);
  }

  .game-head__top .game-head__kinds {
    margin: 0;
  }
}

/* The tiles "Binnenkort verwacht" (28 oktober 2026): the image fills the left of the tile (no white around it; the
   rounding of the tile is its rounding), no number of products but the text of the series on two lines and "Meer" in
   the colour of the links; the whole tile is the one link. */
.coming-card__link {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.coming-card__image {
  height: auto;
  min-height: 150px;
  border-radius: 0;
}

.coming-card__text {
  padding: 14px 16px;
}

.coming-card__desc {
  display: -webkit-box;
  overflow: hidden;
  color: var(--gedempt);
  font-size: 14px;
  line-height: 20px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.coming-card__more {
  color: var(--action);
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .coming-card__image {
    height: 200px;
    min-height: 0;
  }
}

/* Sale (28 oktober 2026, LijstVarianten variant B): on one line the label with the discount ("-14%", the red of a sale
   with white letters), the old price struck through in grey and the new price in the red of a sale; everywhere a price
   is shown (cards, rows, the product page, the buy bar, the suggestions, the cart, the popup). */
.sale-off {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 20px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--sale);
  color: var(--wit);
  font-family: var(--letter);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.old-price {
  display: inline;
  white-space: nowrap;
}

.card-prices,
.product-page__prices,
.cart-item__price--sale,
.suggest__price--sale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.card-prices {
  flex-direction: row;
}

.product-page__prices .product-page__price {
  margin: 0;
}

.cart-item__price--sale,
.suggest__price--sale {
  justify-content: flex-end;
}

.buy-bar__price--sale {
  color: var(--sale);
}

:root:not([data-weergave="raster"]) .listing-grid--switch .card-prices {
  justify-content: flex-end;
}

/* In a line of the cart (narrow): the label and the old price on a line, the new price under them, right-aligned. */
.cart-item__price--sale {
  max-width: 150px;
  margin-left: auto;
}