/* Taartaholics — uitbreidingen op het design system.
   Alle waarden komen uit tokens.css. Prefix tt-, zoals bundle.css.
   Hier staan alleen componenten die het design system nog niet had;
   bestaande klassen worden niet overschreven. */

/* ---------- hidden wint altijd ----------
   Veel componenten in bundle.css zetten display (flex, grid, inline-flex).
   Dat overschrijft de standaard van [hidden], waardoor verborgen elementen
   toch zichtbaar blijven. Deze regel zet dat recht voor de hele site. */
[hidden] { display: none !important; }

/* Prijzen en aantallen op cijferbreedte, zodat ze netjes onder elkaar staan. */
.tt-price, .tt-hours td, .tt-stepper output, .tt-pricelist dd { font-variant-numeric: tabular-nums; }

/* Sprongdoelen niet onder een sticky element laten verdwijnen. */
:target, [id^="g-"] { scroll-margin-top: var(--space-6); }

/* ---------- Naar inhoud (eerste element van elke pagina) ---------- */
.tt-skip { position: absolute; left: var(--space-4); top: var(--space-2); z-index: 60; transform: translateY(-200%); transition: transform .15s ease-out; }
/* Niet :focus-visible maar :focus — deze link is alleen met het toetsenbord
   te bereiken en moet altijd verschijnen zodra hij focus krijgt. */
.tt-skip:focus { transform: translateY(0); }

/* ---------- Header: zoeken in de header ---------- */
.tt-headersearch { position: absolute; inset: auto 0 auto 0; top: 100%; z-index: 40; background: var(--bg-raised); border-bottom: var(--border-hair) solid var(--line); box-shadow: var(--shadow-l); }
.tt-headersearch form { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-4) 0; }
.tt-headersearch .tt-input { flex: 1; }

/* Mobiel menu zweeft onder de header. */
.tt-mobilemenu--overlay { position: absolute; left: 0; right: 0; top: 100%; z-index: 50; max-height: calc(100vh - 64px); overflow-y: auto; }

/* Het menupaneel hangt in de header en erft daardoor .tt-on-dark, terwijl het
   paneel zelf een lichte achtergrond heeft. Zonder deze correctie wordt de
   primaire knop roomwit op roomwit en de secundaire knop vrijwel onzichtbaar. */
.tt-on-dark .tt-mobilemenu .tt-btn--primary { background: var(--action-primary); color: var(--on-primary); }
.tt-on-dark .tt-mobilemenu .tt-btn--primary:hover { background: var(--chocolade-800); }
.tt-on-dark .tt-mobilemenu .tt-btn--secondary { color: var(--text); border-color: var(--chocolade-900); }
.tt-on-dark .tt-mobilemenu .tt-btn--secondary:hover { background: var(--room-200); }
.tt-on-dark .tt-mobilemenu :where(a, button):focus-visible { box-shadow: var(--focus-ring); }

/* ---------- Paginakop ---------- */
.tt-pagehead { display: grid; gap: var(--space-4); padding: var(--space-5) 0 var(--space-6); }
.tt-pagehead > .tt-breadcrumb { margin-bottom: var(--space-2); }
.tt-pagehead__intro { display: grid; gap: var(--space-3); max-width: var(--container-text); }
.tt-pagehead--split { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: end; gap: var(--space-6); }
@media (max-width: 899px) { .tt-pagehead--split { grid-template-columns: 1fr; align-items: start; } }

/* ---------- Filterbalk ---------- */
.tt-filters { display: grid; gap: var(--space-4); padding: var(--space-5); background: var(--bg-raised); border: var(--border-hair) solid var(--line); border-radius: var(--radius-l); }
.tt-filters__row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.tt-filters__row > .tt-field { max-width: none; }
.tt-filters__search { flex: 1 1 280px; }
.tt-filters__select { flex: 0 1 220px; }
.tt-filters__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.tt-filters__foot { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; padding-top: var(--space-3); border-top: var(--border-hair) solid var(--line); }
.tt-searchfield { position: relative; }
.tt-searchfield .tt-input { padding-left: 46px; }
.tt-searchfield__icon { position: absolute; left: var(--space-3); bottom: 12px; color: var(--chocolade-600); pointer-events: none; }
@media (max-width: 767px) { .tt-filters { padding: var(--space-4); } .tt-filters__select, .tt-filters__search { flex-basis: 100%; } }

/* ---------- Lege staat ---------- */
.tt-empty { display: grid; justify-items: center; gap: var(--space-4); padding: var(--space-8) var(--space-5); text-align: center; background: var(--bg-sunken); border-radius: var(--radius-l); }
.tt-empty [data-icon] { color: var(--chocolade-400); }
.tt-empty p { max-width: 42ch; }

/* ---------- Detailpagina ---------- */
.tt-detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-7); align-items: start; }
.tt-detail__info { display: grid; gap: var(--space-5); align-content: start; }
.tt-detail__feiten { display: grid; gap: var(--space-3); font: var(--text-body); margin: 0; padding: 0; list-style: none; }
.tt-detail__feiten li { display: flex; gap: var(--space-3); align-items: flex-start; }
.tt-detail__feiten .tt-icon { width: 20px; height: 20px; color: var(--chocolade-600); margin-top: 4px; }
.tt-detail__prijs { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; }
.tt-detail__prijs .tt-price { font-size: 30px; line-height: 36px; }
@media (max-width: 899px) { .tt-detail { grid-template-columns: 1fr; gap: var(--space-6); } }

/* Galerij. Op desktop blijft de foto in beeld terwijl je de keuzes doorloopt,
   zodat je ziet wat je samenstelt en er geen leeg vlak overblijft. */
.tt-gallery { display: grid; gap: var(--space-3); align-content: start; }
@media (min-width: 900px) { .tt-detail .tt-gallery { position: sticky; top: var(--space-5); } }
.tt-gallery__main { position: relative; background: var(--bg-sunken); border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 1 / 1; }
.tt-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.tt-gallery__thumbs { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.tt-gallery__thumb { width: 84px; height: 84px; padding: 0; border: var(--border-control) solid transparent; border-radius: var(--radius-m); background: var(--bg-sunken); overflow: hidden; cursor: pointer; }
.tt-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tt-gallery__thumb[aria-current="true"] { border-color: var(--chocolade-900); }
.tt-gallery__thumb:hover { border-color: var(--chocolade-600); }

/* Productfoto in een kaart */
.tt-cardimg { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--bg-sunken); }
.tt-cardimg--3x2 { aspect-ratio: 3 / 2; }

/* ---------- Optiekiezer op de detailpagina ---------- */
.tt-options { display: grid; gap: var(--space-5); padding: var(--space-5); background: var(--bg-raised); border: var(--border-hair) solid var(--line); border-radius: var(--radius-l); }
.tt-options__totaal { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: baseline; justify-content: space-between; padding-top: var(--space-4); border-top: var(--border-hair) solid var(--line); }
.tt-options__acties { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.tt-meerprijs { color: var(--text-muted); font-weight: 400; }
@media (max-width: 767px) { .tt-options { padding: var(--space-4); } .tt-options__acties { display: grid; } .tt-options__acties > .tt-btn { width: 100%; } .tt-options__acties > .tt-stepper { justify-self: start; } }

/* ---------- Vaste actiebalk op mobiel ---------- */
.tt-actionbar-wrap { position: fixed; inset: auto 0 0 0; z-index: 45; display: none; }
@media (max-width: 899px) { .tt-actionbar-wrap { display: block; } body.heeft-actiebalk { padding-bottom: 88px; } }

/* ---------- Winkelmand ---------- */
.tt-cart { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-7); align-items: start; }
.tt-cartlist { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.tt-cartline { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--space-4); padding: var(--space-4); background: var(--bg-raised); border: var(--border-hair) solid var(--line); border-radius: var(--radius-l); align-items: start; }
.tt-cartline__foto { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-m); background: var(--bg-sunken); }
.tt-cartline__body { display: grid; gap: var(--space-2); }
.tt-cartline__opties { display: grid; gap: 2px; margin: 0; font: var(--text-body-s); color: var(--text-muted); }
.tt-cartline__opties div { display: flex; gap: var(--space-2); }
.tt-cartline__opties dt { font-weight: 700; }
.tt-cartline__opties dd { margin: 0; }
.tt-cartline__eind { display: grid; gap: var(--space-3); justify-items: end; align-content: start; }
.tt-cartsum { display: grid; gap: var(--space-4); padding: var(--space-5); background: var(--bg-raised); border: var(--border-hair) solid var(--line); border-radius: var(--radius-l); position: sticky; top: var(--space-5); }
.tt-cartsum__rij { display: flex; justify-content: space-between; gap: var(--space-3); font: var(--text-body); }
.tt-cartsum__rij--totaal { padding-top: var(--space-3); border-top: var(--border-hair) solid var(--line); }
@media (max-width: 899px) { .tt-cart { grid-template-columns: 1fr; } .tt-cartsum { position: static; } }
@media (max-width: 599px) { .tt-cartline { grid-template-columns: 72px minmax(0, 1fr); } .tt-cartline__foto { width: 72px; height: 72px; } .tt-cartline__eind { grid-column: 1 / -1; justify-items: stretch; } }

/* ---------- Tijdelijke melding (toast) ---------- */
.tt-toasts { position: fixed; z-index: 70; left: var(--gutter-mobile); right: var(--gutter-mobile); bottom: var(--space-5); display: grid; gap: var(--space-2); justify-items: center; pointer-events: none; }
.tt-toasts .tt-alert { pointer-events: auto; width: min(520px, 100%); background: var(--pistache-100); box-shadow: var(--shadow-l); }
@media (max-width: 899px) { .tt-toasts { bottom: 96px; } }

/* ---------- Springlijst ----------
   Zelfde vorm als tt-aside, maar zonder de genummerde bolletjes: deze lijsten
   zijn een sprongmenu, geen stappenplan. */
.tt-jump { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-5); border-radius: var(--radius-l); background: var(--bg-sunken); }
.tt-jump ul { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.tt-jump li a { display: block; padding: var(--space-2) 0; }
.tt-jump p { font: var(--text-body-s); margin: 0; }

/* ---------- Prijslijst ---------- */
.tt-pricelist { display: grid; gap: 0; margin: 0; }
.tt-pricelist > div { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; padding: var(--space-3) 0; border-bottom: var(--border-hair) solid var(--line); }
.tt-pricelist > div:first-child { border-top: var(--border-hair) solid var(--line); }
.tt-pricelist dt { font: var(--text-body); }
.tt-pricelist dd { margin: 0; font: var(--text-label); font-size: 17px; white-space: nowrap; }

/* ---------- Inhoudsblok met twee kolommen ---------- */
.tt-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.tt-split--aside { grid-template-columns: minmax(0, 1fr) 340px; }
.tt-split img { border-radius: var(--radius-l); }
@media (max-width: 899px) { .tt-split, .tt-split--aside { grid-template-columns: 1fr; gap: var(--space-6); } }

/* Inhoudelijk tekstblok met kop */
.tt-prosesection { display: grid; gap: var(--space-4); max-width: var(--container-text); }
.tt-prosesection + .tt-prosesection { margin-top: var(--space-7); }
.tt-prosesection ul { margin: 0; padding-left: 1.3em; display: grid; gap: var(--space-2); }

/* ---------- Merkenlijst in de bakwinkel ---------- */
.tt-brands { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tt-brand { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); background: var(--bg-raised); border: var(--border-hair) solid var(--line); border-radius: var(--radius-l); }
.tt-brand img { border-radius: var(--radius-m); aspect-ratio: 1 / 1; object-fit: cover; margin-bottom: var(--space-2); }

/* ---------- Fotogalerij (bruidstaarten) ---------- */
.tt-photogrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.tt-photogrid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-l); background: var(--bg-sunken); }
@media (max-width: 899px) { .tt-photogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }

/* ---------- Allergenenlijst ---------- */
.tt-allergen { display: grid; gap: var(--space-3); }
.tt-allergen__ingr { margin: 0; font: var(--text-body); }
.tt-allergen__sporen { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; padding: var(--space-3) var(--space-4); background: var(--goud-100); border-radius: var(--radius-m); font: var(--text-body-s); }
.tt-allergen__sporen [data-icon] { color: var(--goud-800); flex: none; }
.tt-allergen__toel { margin: 0; font: var(--text-body-s); color: var(--text-muted); }
.tt-accordion mark { background: var(--goud-100); color: var(--text); padding: 0 2px; border-radius: 2px; }

/* ---------- Workshopdetail ---------- */
.tt-wsmeta { display: grid; gap: var(--space-3); margin: 0; padding: var(--space-5); list-style: none; background: var(--bg-sunken); border-radius: var(--radius-l); font: var(--text-body); }
.tt-wsmeta li { display: flex; gap: var(--space-3); align-items: flex-start; }
.tt-wsmeta .tt-icon { width: 20px; height: 20px; color: var(--chocolade-600); margin-top: 4px; }

/* ---------- Maandkop in het workshopoverzicht ---------- */
.tt-monthhead { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-7) 0 var(--space-5); }
.tt-monthhead::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tt-monthhead:first-child { margin-top: 0; }

/* ---------- Aanvraagformulier: stap-panelen ---------- */
/* De knoppenrij mag afbreken, zodat drie knoppen op een smal scherm passen. */
.tt-request__nav { flex-wrap: wrap; }
.tt-review { display: grid; gap: var(--space-4); }
.tt-review__blok { display: grid; gap: var(--space-2); padding: var(--space-4); background: var(--bg-sunken); border-radius: var(--radius-m); }
.tt-review__kop { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; }
.tt-review dl { display: grid; gap: var(--space-1); margin: 0; font: var(--text-body-s); }
.tt-review dl > div { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tt-review dt { font-weight: 700; }
.tt-review dd { margin: 0; }

/* ---------- Routekaarten op de contactpagina ---------- */
.tt-locations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
@media (max-width: 899px) { .tt-locations { grid-template-columns: 1fr; } }

/* ---------- Beweging ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Printen ---------- */
@media print {
  .tt-header, .tt-footer, .tt-scallop, .tt-scallop--up, .tt-actionbar-wrap, .tt-filters, .tt-toasts { display: none !important; }
  body { background: #fff; }
}