/* Taartaholics — componentstijlen. Alle waarden komen uit tokens.css; prefix tt-. */

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg-page); color: var(--text); font: var(--text-body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
.tt-icon { display: inline-block; flex: none; vertical-align: middle; }
.tt-icon--sparkle { fill: var(--goud-500); }
[data-icon] { display: inline-flex; line-height: 0; }
.tt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tt-container { width: 100%; max-width: calc(var(--container-max) + 2 * var(--gutter-desktop)); margin: 0 auto; padding: 0 var(--gutter-desktop); }
.tt-section { padding: var(--space-8) 0; }
.tt-section--sunken { background: var(--bg-sunken); }
.tt-stack > * + * { margin-top: var(--space-4); }
.tt-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.tt-grid { display: grid; gap: var(--space-5); }
.tt-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tt-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tt-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tt-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ---------- Typografie ---------- */
.tt-display, .tt-title-1, .tt-title-2, .tt-title-3 { margin: 0; color: var(--text); font-weight: 400; text-wrap: balance; }
.tt-display { font: var(--text-display); letter-spacing: -0.01em; }
.tt-title-1 { font: var(--text-title-1); letter-spacing: -0.005em; }
.tt-title-2 { font: var(--text-title-2); }
.tt-title-3 { font: var(--text-title-3); }
.tt-lead { margin: 0; font: var(--text-lead); color: var(--text); max-width: 40em; }
.tt-body { margin: 0; font: var(--text-body); }
.tt-body-s { margin: 0; font: var(--text-body-s); }
.tt-muted { color: var(--text-muted); }
.tt-label { font: var(--text-label); }
.tt-caption { margin: 0; font: var(--text-caption); color: var(--text-muted); }
.tt-price { font: var(--text-price); color: var(--text); }
.tt-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font: var(--text-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.tt-eyebrow .tt-icon--sparkle { width: 16px; height: 16px; }
.tt-prose { max-width: var(--container-text); }
.tt-prose p { margin: 0 0 var(--space-4); }
@media (max-width: 767px) {
  .tt-display { font: var(--text-display-mobile); }
  .tt-title-1 { font: var(--text-title-1-mobile); }
  .tt-title-2 { font: var(--text-title-2-mobile); }
}

/* ---------- Focus (één regel voor alles) ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
.tt-on-dark :where(a, button, input, select, summary):focus-visible { box-shadow: var(--focus-ring-inverse); }

/* ---------- Knoppen ---------- */
.tt-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap-target); padding: 0 var(--space-5); border: var(--border-control) solid transparent; border-radius: var(--radius-pill); font: var(--text-button-text); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out, transform .1s ease-out; }
.tt-btn .tt-icon { width: 20px; height: 20px; }
.tt-btn:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
.tt-btn--primary { background: var(--action-primary); color: var(--on-primary); }
.tt-btn--primary:hover, .tt-btn--primary.is-hover { background: var(--chocolade-800); }
.tt-btn--order { background: var(--action-order); color: var(--on-order); }
.tt-btn--order:hover, .tt-btn--order.is-hover { background: var(--goud-600); }
.tt-btn--secondary { background: transparent; color: var(--text); border-color: var(--chocolade-900); }
.tt-btn--secondary:hover, .tt-btn--secondary.is-hover { background: var(--room-200); }
.tt-btn--ghost { background: transparent; color: var(--text); padding: 0 var(--space-3); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.tt-btn--ghost:hover, .tt-btn--ghost.is-hover { text-decoration-color: currentColor; background: var(--room-200); }
.tt-btn--block { width: 100%; }
.tt-btn--icon { width: var(--tap-target); padding: 0; }
.tt-btn:disabled, .tt-btn[aria-disabled="true"] { background: var(--room-200); color: var(--chocolade-400); border-color: var(--meel-300); cursor: not-allowed; transform: none; }
.tt-btn.is-focus { box-shadow: var(--focus-ring); }
.tt-btn[aria-busy="true"] { cursor: progress; }
.tt-btn[aria-busy="true"]::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: tt-spin .8s linear infinite; }
@keyframes tt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tt-btn[aria-busy="true"]::before { animation: none; } .tt-btn, .tt-card { transition: none; } }
/* op donkere grond */
.tt-on-dark .tt-btn--primary { background: var(--room-50); color: var(--chocolade-900); }
.tt-on-dark .tt-btn--primary:hover { background: var(--goud-100); }
.tt-on-dark .tt-btn--secondary { color: var(--text-inverse); border-color: var(--text-inverse); }
.tt-on-dark .tt-btn--secondary:hover { background: var(--chocolade-800); }
.tt-on-dark .tt-btn--ghost { color: var(--text-inverse); }
.tt-on-dark .tt-btn--ghost:hover { background: var(--chocolade-800); }

/* ---------- Links ---------- */
.tt-link, .tt-prose a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; border-radius: 2px; }
.tt-link:hover, .tt-link.is-hover, .tt-prose a:hover { color: var(--text); text-decoration-thickness: 2px; }
.tt-link--quiet { color: var(--text); }
.tt-link--quiet:hover { color: var(--link); }
.tt-link--arrow { display: inline-flex; align-items: center; gap: var(--space-1); font: var(--text-label); font-size: 16px; }
.tt-link--arrow .tt-icon { width: 18px; height: 18px; transition: transform .15s ease-out; }
.tt-link--arrow:hover .tt-icon { transform: translateX(3px); }
.tt-on-dark .tt-link, .tt-link--inverse { color: var(--text-inverse); }
.tt-on-dark .tt-link:hover, .tt-link--inverse:hover { color: var(--goud-500); }

/* ---------- Schulprand (taartrand uit het logo) ---------- */
.tt-scallop { height: 12px; background: radial-gradient(circle at 12px 0, var(--scallop-color, var(--chocolade-900)) 11.5px, transparent 12px) 0 0 / 24px 12px repeat-x; }
.tt-scallop--up { background: radial-gradient(circle at 12px 12px, var(--scallop-color, var(--chocolade-950)) 11.5px, transparent 12px) 0 0 / 24px 12px repeat-x; }

/* ---------- Header / navigatie ---------- */
.tt-header { background: var(--bg-inverse); color: var(--text-inverse); position: relative; }
.tt-header__bar { display: flex; align-items: center; gap: var(--space-6); min-height: var(--header-height); }
.tt-header__logo { display: block; flex: none; border-radius: var(--radius-s); line-height: 0; }
.tt-header__logo img { width: 90px; height: 60px; }
.tt-nav { display: flex; gap: var(--space-1); margin: 0; padding: 0; list-style: none; flex: 1; }
.tt-nav a { display: inline-flex; align-items: center; min-height: var(--tap-target); padding: 0 var(--space-3); color: var(--text-inverse); text-decoration: none; font: var(--text-button-text); border-radius: var(--radius-s); position: relative; }
.tt-nav a::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 6px; height: 3px; border-radius: 2px; background: transparent; transition: background-color .15s; }
.tt-nav a:hover::after, .tt-nav a.is-hover::after { background: var(--text-inverse-muted); }
.tt-nav a[aria-current="page"] { color: var(--goud-500); }
.tt-nav a[aria-current="page"]::after { background: var(--goud-500); }
.tt-header__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.tt-iconbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--tap-target); height: var(--tap-target); border: 0; border-radius: var(--radius-pill); background: transparent; color: inherit; cursor: pointer; }
.tt-iconbtn:hover { background: var(--chocolade-800); }
.tt-iconbtn__count { position: absolute; top: 4px; right: 2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--goud-500); color: var(--chocolade-900); font: 700 12px/20px var(--font-body); text-align: center; }
.tt-header__menu { display: none; }
.tt-mobilemenu { background: var(--bg-raised); color: var(--text); box-shadow: var(--shadow-l); }
.tt-mobilemenu ul { list-style: none; margin: 0; padding: var(--space-2) 0; }
.tt-mobilemenu ul a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 var(--gutter-mobile); color: var(--text); text-decoration: none; font: var(--text-title-3); border-bottom: var(--border-hair) solid var(--line); }
.tt-mobilemenu ul a[aria-current="page"] { color: var(--link); }
.tt-mobilemenu__cta { display: grid; gap: var(--space-3); padding: var(--space-5) var(--gutter-mobile); }
.tt-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font: var(--text-body-s); color: var(--text-muted); }
.tt-breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--chocolade-400); }
.tt-breadcrumb a { color: var(--text-muted); }
.tt-breadcrumb a:hover { color: var(--text); }
.tt-breadcrumb [aria-current] { color: var(--text); }
@media (max-width: 1023px) {
  .tt-nav, .tt-header__cta { display: none; }
  .tt-header__menu { display: inline-flex; }
  .tt-header__bar { min-height: 64px; gap: var(--space-3); }
  .tt-header__logo img { width: 72px; height: 48px; }
}

/* ---------- Footer ---------- */
.tt-footer { background: var(--chocolade-950); color: var(--text-inverse); }
.tt-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); padding: var(--space-8) 0 var(--space-6); }
.tt-footer h2 { margin: 0 0 var(--space-3); font: var(--text-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--goud-500); }
.tt-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.tt-footer p, .tt-footer li { font: var(--text-body-s); color: var(--text-inverse-muted); margin: 0; }
.tt-footer a { color: var(--text-inverse); text-decoration: underline; text-decoration-color: var(--chocolade-600); text-underline-offset: 3px; }
.tt-footer a:hover { color: var(--goud-500); text-decoration-color: currentColor; }
.tt-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) 0 var(--space-6); border-top: var(--border-hair) solid var(--chocolade-800); }
.tt-footer__bottom p { font: var(--text-caption); }
@media (max-width: 1023px) { .tt-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .tt-footer__grid { grid-template-columns: 1fr; gap: var(--space-5); } }

/* ---------- Formulieren ---------- */
.tt-field { display: grid; gap: var(--space-2); align-content: start; max-width: var(--container-text); }
.tt-field__label { font: var(--text-label); color: var(--text); }
.tt-field__opt { font: var(--text-body-s); color: var(--text-muted); font-weight: 400; }
.tt-field__hint { margin: 0; font: var(--text-body-s); color: var(--text-muted); }
.tt-field__error { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; font: var(--text-body-s); font-weight: 700; color: var(--rood-700); }
.tt-field__error .tt-icon { width: 20px; height: 20px; margin-top: 2px; }
.tt-input, .tt-select, .tt-textarea { width: 100%; min-height: var(--tap-target); padding: 11px var(--space-4); background: var(--bg-raised); color: var(--text); border: var(--border-control) solid var(--line-strong); border-radius: var(--radius-s); font: var(--text-body); transition: border-color .15s; }
.tt-textarea { min-height: 128px; resize: vertical; }
.tt-input::placeholder, .tt-textarea::placeholder { color: var(--chocolade-600); }
.tt-input:hover, .tt-select:hover, .tt-textarea:hover, .is-hover > .tt-input { border-color: var(--chocolade-600); }
.tt-input:focus, .tt-select:focus, .tt-textarea:focus, .tt-input.is-focus { outline: 2px solid transparent; border-color: var(--chocolade-900); box-shadow: var(--focus-ring); }
.tt-input[aria-invalid="true"], .tt-select[aria-invalid="true"], .tt-textarea[aria-invalid="true"] { border-color: var(--rood-700); border-width: 2px; padding: 10.5px 15.5px; }
.tt-input:disabled, .tt-select:disabled, .tt-textarea:disabled { background: var(--room-200); color: var(--chocolade-400); border-color: var(--meel-300); cursor: not-allowed; }
.tt-select { appearance: none; padding-right: 48px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23462810' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.tt-input-group { display: flex; align-items: stretch; }
.tt-input-group .tt-input { border-radius: var(--radius-s) 0 0 var(--radius-s); }
.tt-input-group__suffix { display: inline-flex; align-items: center; padding: 0 var(--space-4); border: var(--border-control) solid var(--line-strong); border-left: 0; border-radius: 0 var(--radius-s) var(--radius-s) 0; background: var(--room-200); font: var(--text-body-s); color: var(--text-muted); }
.tt-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.tt-fieldset legend { padding: 0; margin-bottom: var(--space-2); font: var(--text-label); }

/* Keuzes: checkbox, radio */
.tt-check { display: flex; gap: var(--space-3); align-items: flex-start; min-height: 32px; cursor: pointer; font: var(--text-body); }
.tt-check input { appearance: none; flex: none; width: 24px; height: 24px; margin: 2px 0 0; background: var(--bg-raised); border: var(--border-control) solid var(--line-strong); border-radius: var(--radius-s); display: grid; place-content: center; cursor: pointer; transition: background-color .15s, border-color .15s; }
.tt-check input[type="radio"] { border-radius: 50%; }
.tt-check input:hover { border-color: var(--chocolade-900); }
.tt-check input:checked { background: var(--chocolade-900); border-color: var(--chocolade-900); }
.tt-check input[type="checkbox"]:checked::after { content: ""; width: 12px; height: 7px; border: solid var(--room-50); border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
.tt-check input[type="radio"]:checked { background: var(--bg-raised); border-width: 7px; }
.tt-check input[aria-invalid="true"] { border-color: var(--rood-700); border-width: 2px; }
.tt-check input:disabled { background: var(--room-200); border-color: var(--meel-300); cursor: not-allowed; }
.tt-check:has(input:disabled) { color: var(--chocolade-400); cursor: not-allowed; }
.tt-check small { display: block; font: var(--text-body-s); color: var(--text-muted); }

/* Keuzekaarten (gelegenheid, ophalen/bezorgen) */
.tt-choicecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.tt-choicecard { position: relative; display: grid; gap: var(--space-2); justify-items: start; padding: var(--space-4); background: var(--bg-raised); border: var(--border-control) solid var(--line-strong); border-radius: var(--radius-m); cursor: pointer; font: var(--text-label); transition: border-color .15s, background-color .15s; }
.tt-choicecard input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.tt-choicecard .tt-icon { color: var(--chocolade-600); }
.tt-choicecard:hover { border-color: var(--chocolade-900); }
.tt-choicecard:has(input:checked) { border: 2px solid var(--chocolade-900); padding: 15.5px; background: var(--room-200); }
.tt-choicecard:has(input:checked) .tt-icon { color: var(--framboos-700); }
.tt-choicecard:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.tt-choicecard__check { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--chocolade-900); color: var(--room-50); display: none; place-items: center; }
.tt-choicecard__check .tt-icon { width: 16px; height: 16px; color: var(--room-50); }
.tt-choicecard:has(input:checked) .tt-choicecard__check { display: grid; }
.tt-choicecard:has(input:checked) .tt-choicecard__check .tt-icon { color: var(--room-50); }

/* Filterchips */
.tt-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border: var(--border-control) solid var(--line-strong); border-radius: var(--radius-pill); background: var(--bg-raised); color: var(--text); font: var(--text-label); cursor: pointer; }
.tt-chip:hover { border-color: var(--chocolade-900); }
.tt-chip[aria-pressed="true"] { background: var(--chocolade-900); border-color: var(--chocolade-900); color: var(--room-50); }
.tt-chip[aria-pressed="true"]::before { content: ""; width: 10px; height: 6px; border: solid currentColor; border-width: 0 0 2px 2px; transform: translateY(-2px) rotate(-45deg); }

/* Aantal-stepper */
.tt-stepper { display: inline-flex; align-items: center; border: var(--border-control) solid var(--line-strong); border-radius: var(--radius-pill); background: var(--bg-raised); }
.tt-stepper button { width: var(--tap-target); height: var(--tap-target); border: 0; background: transparent; color: var(--text); border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.tt-stepper button:hover { background: var(--room-200); }
.tt-stepper output { min-width: 3ch; text-align: center; font: var(--text-label); font-size: 17px; }

/* Upload */
.tt-drop { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); border: 2px dashed var(--line-strong); border-radius: var(--radius-m); background: var(--bg-raised); text-align: center; font: var(--text-body-s); color: var(--text-muted); }
.tt-drop .tt-icon { color: var(--framboos-700); width: 28px; height: 28px; }
.tt-drop strong { color: var(--text); }

/* ---------- Kaarten ---------- */
.tt-card { position: relative; display: flex; flex-direction: column; background: var(--bg-raised); border: var(--border-hair) solid var(--line); border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-s); transition: box-shadow .2s ease-out, transform .2s ease-out; }
.tt-card__body { display: grid; gap: var(--space-2); padding: var(--space-5); flex: 1; align-content: start; }
.tt-card__foot { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; padding: 0 var(--space-5) var(--space-5); }
.tt-card--link:hover, .tt-card.is-hover { box-shadow: var(--shadow-m); transform: translateY(-2px); }
.tt-card--link:focus-within { box-shadow: var(--focus-ring); }
.tt-card__title a { color: inherit; text-decoration: none; }
.tt-card__title a::after { content: ""; position: absolute; inset: 0; }
.tt-card--link:hover .tt-card__title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.tt-card__media { position: relative; }
.tt-card__badges { position: absolute; top: var(--space-3); left: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tt-card--flat { box-shadow: none; }

/* Fotoplaceholder (vervangen door echte fotografie) */
.tt-photo { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: var(--ratio, 4 / 5); background-color: var(--room-200); background-image: radial-gradient(circle at 12px 12px, var(--meel-300) 2px, transparent 2.5px); background-size: 24px 24px; color: var(--chocolade-600); overflow: hidden; }
.tt-photo > span { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 80%; padding: var(--space-2) var(--space-3); background: var(--room-50); border-radius: var(--radius-pill); font: var(--text-caption); color: var(--chocolade-600); text-align: center; }
.tt-photo--1x1 { --ratio: 1 / 1; } .tt-photo--3x2 { --ratio: 3 / 2; } .tt-photo--16x9 { --ratio: 16 / 9; } .tt-photo--4x5 { --ratio: 4 / 5; }
.tt-photo--rounded { border-radius: var(--radius-l); }
.tt-photo--xl { border-radius: var(--radius-xl); }

/* ---------- Badges & intent-labels ---------- */
.tt-badge { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 26px; padding: 2px 10px; border-radius: var(--radius-s); font: 700 13px/18px var(--font-body); background: var(--room-200); color: var(--text); white-space: nowrap; }
.tt-badge .tt-icon { width: 16px; height: 16px; }
.tt-badge--goud { background: var(--goud-100); color: var(--chocolade-900); }
.tt-badge--framboos { background: var(--framboos-100); color: var(--framboos-700); }
.tt-badge--pistache { background: var(--pistache-100); color: var(--pistache-700); }
.tt-badge--rood { background: var(--rood-100); color: var(--rood-700); }
.tt-badge--solid { background: var(--chocolade-900); color: var(--room-50); }
.tt-badge--onphoto { background: var(--room-50); color: var(--chocolade-900); box-shadow: var(--shadow-s); }
.tt-intent { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--text-label); font-size: 14px; color: var(--text); }
.tt-intent__dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.tt-intent__dot .tt-icon { width: 16px; height: 16px; }
.tt-intent--bestellen .tt-intent__dot { background: var(--goud-500); color: var(--chocolade-900); }
.tt-intent--aanvragen .tt-intent__dot { background: var(--framboos-700); color: var(--room-50); }
.tt-intent--bezoeken .tt-intent__dot { background: var(--pistache-700); color: var(--room-50); }

/* ---------- Meldingen ---------- */
.tt-alert { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: start; padding: var(--space-4) var(--space-5); border-radius: var(--radius-m); background: var(--blauwbes-100); color: var(--text); font: var(--text-body-s); }
.tt-alert > .tt-icon, .tt-alert > [data-icon] { color: var(--blauwbes-700); margin-top: 1px; }
.tt-alert__title { display: block; font: var(--text-label); font-size: 16px; margin-bottom: 2px; }
.tt-alert p { margin: 0; }
.tt-alert--succes { background: var(--pistache-100); } .tt-alert--succes > [data-icon] { color: var(--pistache-700); }
.tt-alert--waarschuwing { background: var(--goud-100); } .tt-alert--waarschuwing > [data-icon] { color: var(--goud-800); }
.tt-alert--fout { background: var(--rood-100); } .tt-alert--fout > [data-icon] { color: var(--rood-700); }
.tt-alert__close { margin: -10px -12px -10px 0; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 50%; color: var(--text); cursor: pointer; display: grid; place-items: center; }
.tt-alert__close:hover { background: #4628101a; }
.tt-banner { display: flex; justify-content: center; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--gutter-mobile); background: var(--goud-500); color: var(--chocolade-900); font: var(--text-body-s); text-align: center; }
.tt-banner a { color: inherit; font-weight: 700; }

/* ---------- Accordeon ---------- */
.tt-accordion { border-top: var(--border-hair) solid var(--line); }
.tt-accordion details { border-bottom: var(--border-hair) solid var(--line); }
.tt-accordion summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 60px; padding: var(--space-3) var(--space-2); cursor: pointer; list-style: none; font: var(--text-label); font-size: 17px; line-height: 24px; color: var(--text); border-radius: var(--radius-s); }
.tt-accordion summary::-webkit-details-marker { display: none; }
.tt-accordion summary:hover { background: var(--room-200); }
.tt-accordion summary [data-icon] { transition: transform .2s ease-out; color: var(--chocolade-600); }
.tt-accordion details[open] summary [data-icon] { transform: rotate(180deg); color: var(--text); }
.tt-accordion__panel { padding: 0 var(--space-2) var(--space-5); font: var(--text-body); color: var(--text); max-width: var(--container-text); }
.tt-accordion__panel p { margin: 0 0 var(--space-3); }

/* ---------- Routes: bestellen / aanvragen / bezoeken ---------- */
.tt-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.tt-route { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6) var(--space-5) var(--space-5); border-radius: var(--radius-xl); }
.tt-route--bestellen { background: var(--goud-100); }
.tt-route--aanvragen { background: var(--framboos-100); }
.tt-route--bezoeken { background: var(--pistache-100); }
.tt-route .tt-intent__dot { width: 48px; height: 48px; }
.tt-route .tt-intent__dot .tt-icon { width: 24px; height: 24px; }
.tt-route ol { margin: 0; padding-left: 1.2em; font: var(--text-body-s); }
.tt-route .tt-btn { justify-self: start; margin-top: var(--space-2); }
@media (max-width: 899px) { .tt-routes { grid-template-columns: 1fr; } }

/* ---------- Taartkaart ---------- */
.tt-cake .tt-card__body { gap: var(--space-2); }
.tt-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; font: var(--text-body-s); color: var(--text-muted); }
.tt-meta li { display: inline-flex; align-items: center; gap: var(--space-2); }
.tt-meta .tt-icon { width: 18px; height: 18px; color: var(--chocolade-600); }

/* ---------- Workshopkaart ---------- */
.tt-workshop .tt-date { position: absolute; left: var(--space-3); bottom: calc(-1 * var(--space-5)); display: grid; justify-items: center; min-width: 64px; padding: var(--space-2) var(--space-3); background: var(--goud-500); color: var(--chocolade-900); border-radius: var(--radius-m); box-shadow: var(--shadow-s); }
.tt-workshop .tt-date b { font: var(--text-title-3); }
.tt-workshop .tt-date small { font: var(--text-eyebrow); letter-spacing: .12em; text-transform: uppercase; }
.tt-workshop .tt-card__body { padding-top: var(--space-7); }
.tt-workshop .tt-meta { display: grid; gap: var(--space-2); }
.tt-workshop.is-full .tt-date { background: var(--room-200); color: var(--text-muted); }

/* ---------- Categorieën ---------- */
.tt-cat { position: relative; display: grid; gap: var(--space-3); text-decoration: none; color: var(--text); border-radius: var(--radius-l); }
.tt-cat .tt-photo { border-radius: var(--radius-l); transition: transform .2s ease-out; }
.tt-cat__label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font: var(--text-title-3); font-size: 20px; line-height: 26px; }
.tt-cat__label [data-icon] { color: var(--framboos-700); transition: transform .15s; }
.tt-cat:hover .tt-photo { transform: scale(1.02); }
.tt-cat:hover .tt-cat__label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.tt-cat:hover .tt-cat__label [data-icon] { transform: translateX(3px); }
.tt-cat__count { font: var(--text-body-s); color: var(--text-muted); }
.tt-catrow { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-2); scroll-snap-type: x mandatory; }
.tt-catrow .tt-cat { flex: 0 0 140px; scroll-snap-align: start; }

/* ---------- Taartaanvraag ---------- */
.tt-steps { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; counter-reset: s; }
.tt-steps li { flex: 1; display: grid; gap: var(--space-2); font: var(--text-body-s); color: var(--text-muted); counter-increment: s; }
.tt-steps li::before { content: ""; height: 6px; border-radius: var(--radius-pill); background: var(--meel-300); }
.tt-steps li[aria-current="step"], .tt-steps li.is-done { color: var(--text); font-weight: 700; }
.tt-steps li.is-done::before { background: var(--chocolade-900); }
.tt-steps li[aria-current="step"]::before { background: var(--framboos-700); }
.tt-request { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-7); align-items: start; }
.tt-request__form { display: grid; gap: var(--space-5); padding: var(--space-6); background: var(--bg-raised); border: var(--border-hair) solid var(--line); border-radius: var(--radius-l); }
.tt-request__nav { display: flex; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--border-hair) solid var(--line); }
.tt-aside { display: grid; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-l); background: var(--framboos-100); }
.tt-aside ol { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); counter-reset: a; font: var(--text-body-s); }
.tt-aside li { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); counter-increment: a; }
.tt-aside li::before { content: counter(a); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--framboos-700); color: var(--room-50); font: 700 14px/1 var(--font-body); }
@media (max-width: 899px) { .tt-request { grid-template-columns: 1fr; } .tt-request__form { padding: var(--space-4); } .tt-steps li span { display: none; } .tt-steps li[aria-current="step"] span { display: inline; } }

/* ---------- Winkelinformatie ---------- */
.tt-store { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; background: var(--bg-raised); border: var(--border-hair) solid var(--line); border-radius: var(--radius-xl); overflow: hidden; }
.tt-store__map { min-height: 100%; }
.tt-store__map .tt-photo { height: 100%; aspect-ratio: auto; min-height: 280px; }
.tt-store__body { display: grid; gap: var(--space-4); padding: var(--space-6); align-content: start; }
.tt-hours { width: 100%; border-collapse: collapse; font: var(--text-body-s); }
.tt-hours th { text-align: left; font-weight: 400; color: var(--text-muted); padding: 6px 0; width: 40%; }
.tt-hours td { padding: 6px 0; }
.tt-hours tr + tr { border-top: var(--border-hair) solid var(--line); }
.tt-hours tr.is-today th, .tt-hours tr.is-today td { font-weight: 700; color: var(--text); }
.tt-contact { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font: var(--text-body-s); }
.tt-contact li { display: flex; gap: var(--space-2); align-items: flex-start; }
.tt-contact [data-icon] { color: var(--pistache-700); }
@media (max-width: 899px) { .tt-store { grid-template-columns: 1fr; } .tt-store__map .tt-photo { min-height: 200px; } .tt-store__body { padding: var(--space-5); } }

/* ---------- Hero ---------- */
.tt-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-7); align-items: center; padding-top: var(--space-8); padding-bottom: var(--space-9); }
.tt-hero__text { display: grid; gap: var(--space-5); justify-items: start; }
.tt-hero__media { position: relative; }
.tt-hero__media .tt-sparkle-deco { position: absolute; width: 40px; height: 40px; top: -14px; right: 28px; }
@media (max-width: 899px) { .tt-hero { grid-template-columns: 1fr; gap: var(--space-5); padding-top: var(--space-6); padding-bottom: var(--space-7); } .tt-hero__media { order: -1; } }

/* ---------- Sectiekop ---------- */
.tt-sechead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-3); margin-bottom: var(--space-6); }
.tt-sechead > div { display: grid; gap: var(--space-2); }

/* ---------- Mobiel algemeen ---------- */
@media (max-width: 767px) {
  .tt-container { padding: 0 var(--gutter-mobile); }
  .tt-section { padding: var(--space-7) 0; }
  .tt-grid--2, .tt-grid--3 { grid-template-columns: 1fr; }
  .tt-grid--4, .tt-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .tt-card__body { padding: var(--space-4); }
  .tt-card__foot { padding: 0 var(--space-4) var(--space-4); }
}

/* ---------- Sticky actiebalk (mobiel, detailpagina) ---------- */
.tt-actionbar { display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; padding: var(--space-3) var(--gutter-mobile); background: var(--bg-raised); border-top: var(--border-hair) solid var(--line); box-shadow: var(--shadow-m); }

/* ---------- Previewhulp (alleen voor de kaarten in dit systeem) ---------- */
.tt-demo { padding: var(--space-5); display: grid; gap: var(--space-5); }
.tt-demo__label { font: var(--text-caption); color: var(--text-muted); margin: 0 0 var(--space-2); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.tt-demo--dark { background: var(--bg-inverse); }
.tt-demo--dark .tt-demo__label { color: var(--text-inverse-muted); }