/* ==========================================================================
   Lottelittlecreations – stylesheet
   --------------------------------------------------------------------------
   Kleuren, lettertypes en afrondingen staan als variabelen in :root.
   Pas ze daar aan en de hele site volgt.
   Opbouw: mobile-first (basis = gsm), daarna tablet en desktop.
   ========================================================================== */

:root {
  /* Merkkleuren */
  --mauve: #A67F91;        /* navigatiebalk, footer, hoofdaccent */
  --mauve-dark: #7A5468;   /* hover van knoppen, prijzen, links */
  --plum: #6B3F66;         /* paars accent: primaire knoppen */
  --blush: #F6E1E5;        /* ruitjespatroon, lichte vlakken */
  --blush-light: #FDF4F6;  /* pagina-achtergrond */
  --ink: #2E2228;          /* tekst: warm donker, geen puur zwart */

  /* Afgeleide kleuren */
  --white: #FFFFFF;
  --ink-soft: #5E4A55;     /* secundaire tekst (7,5:1 op blush-light) */
  --line: #EAD3DA;         /* zachte scheidingslijnen */
  --line-strong: var(--mauve); /* randen van invulvelden (≥ 3:1) */
  --disabled: #B7A9B0;
  --success: #3F6B4F;
  --success-bg: #E7F1E9;
  --error: #A1283B;
  --error-bg: #FBE9EC;
  --warning-bg: #FFF3E0;
  --overlay: rgba(46, 34, 40, .5);

  /* Tekst op de mauve balk (WCAG AA): wit enkel groot en vet (≥ 19px bold),
     kleinere tekst in ink (4,5:1). */
  --on-mauve: #FFFFFF;
  --on-mauve-small: var(--ink);

  /* Typografie */
  --font-heading: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Lora", Georgia, "Times New Roman", serif;
  --text-xs: .8125rem;
  --text-sm: .9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --lh-body: 1.7;

  /* Vormen: foto's licht afgerond, knoppen volledig rond */
  --radius-photo: 14px;
  --radius-card: 20px;
  --radius-field: 12px;
  --radius-pill: 999px;
  --shadow-soft: 0 12px 32px -14px rgba(107, 63, 102, .28);

  /* Ruimte */
  --gutter: 16px;
  --container: 1200px;
  --section: clamp(3.5rem, 9vw, 6.5rem);
  --header-h: 64px;

  /* Gingham (ruitjespatroon): grootte van één herhaling */
  --gingham-size: 40px;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

@media (min-width: 1080px) {
  :root { --header-h: 80px; }
}

/* ==========================================================================
   Basis
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

html.has-dialog { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--blush-light);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { flex: 1; }

img, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
}

h1 { font-size: clamp(2rem, 6vw, 3rem); }
h2 { font-size: clamp(1.5rem, 4.2vw, 2.25rem); }
h3 { font-size: 1.1875rem; font-weight: 700; }

p { margin: 0 0 1em; }

a {
  color: var(--mauve-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

a:hover { color: var(--plum); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--plum);
  outline-offset: 3px;
}

[tabindex="-1"]:focus { outline: none; }

[hidden] { display: none !important; }

::selection { background: var(--blush); color: var(--ink); }

.icon {
  width: 24px;
  height: 24px;
  flex: none;
}

/* ==========================================================================
   Layout & hulpklassen
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: calc(780px + 2 * var(--gutter)); }

.section { padding-block: var(--section); }
.section--white { background: var(--white); }
.section--blush { background: var(--blush); }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4rem); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.section-head h2 { margin: 0; }
.section-head--center { flex-direction: column; align-items: center; text-align: center; }

.section-intro {
  max-width: 60ch;
  margin: .5rem 0 0;
  color: var(--ink-soft);
}

.section-head--center .section-intro { margin-inline: auto; }

.center { text-align: center; }
.mt-md { margin-top: 1.5rem; }
.mt-lg { margin-top: 1.75rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 1000;
  padding: .75rem 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--plum);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus { top: 1rem; color: #fff; }

/* Placeholders die nog ingevuld moeten worden (TODO) */
.todo {
  padding: 0 .2em;
  border-radius: 3px;
  border-bottom: 1.5px dashed #B8930E;
  background: #FFF3B8;
  color: #3D3100;
  cursor: help;
}

/* ==========================================================================
   Knoppen & links
   ========================================================================== */

.btn {
  --btn-bg: var(--plum);
  --btn-fg: #fff;
  --btn-border: var(--btn-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .75rem 1.5rem;
  border: 2px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .15s;
}

.btn:hover { --btn-bg: var(--mauve-dark); color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 1.2em; height: 1.2em; }

.btn--secondary { --btn-bg: transparent; --btn-fg: var(--plum); --btn-border: var(--plum); }
.btn--secondary:hover { --btn-bg: var(--plum); --btn-fg: #fff; --btn-border: var(--plum); }

.btn--light { --btn-bg: #fff; --btn-fg: var(--plum); --btn-border: #fff; }
.btn--light:hover { --btn-bg: var(--blush); --btn-fg: var(--plum); --btn-border: var(--blush); }

.btn--sm { min-height: 40px; padding: .5rem 1rem; font-size: .9375rem; }
.btn--lg { min-height: 56px; padding: .875rem 2rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] {
  --btn-bg: var(--disabled);
  --btn-border: var(--disabled);
  --btn-fg: #fff;
  cursor: not-allowed;
  transform: none;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  color: var(--plum);
  font-family: var(--font-heading);
  font-weight: 700;
  text-decoration: none;
}

.link-arrow .icon { width: 1.1em; height: 1.1em; transition: transform .2s var(--ease); }
.link-arrow:hover { color: var(--plum); text-decoration: underline; }
.link-arrow:hover .icon { transform: translateX(3px); }

.link-button {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem 0;
  border: 0;
  background: none;
  color: var(--mauve-dark);
  font: 600 .875rem/1.3 var(--font-heading);
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}

.link-button:hover { color: var(--plum); }
.link-button .icon { width: 16px; height: 16px; }

.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color .2s;
}

.icon-btn:hover { background: rgba(255, 255, 255, .18); }
.drawer .icon-btn:hover,
.modal .icon-btn:hover { background: var(--blush); }

/* ==========================================================================
   Header & navigatie
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--mauve);
  color: var(--on-mauve);
}

.site-header :focus-visible { outline-color: #fff; }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: .5rem;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-right: auto;
  color: inherit;
  text-decoration: none;
}

.brand:hover { color: inherit; }

.brand__logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0 2px 10px -4px rgba(46, 34, 40, .35);
}

/* Merknaam: wit op mauve is enkel leesbaar genoeg in groot en vet */
.brand__name {
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
}

@media (max-width: 559px) {
  .brand__name:not(.brand__name--always) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

@media (min-width: 1080px) and (max-width: 1239px) {
  .brand__name:not(.brand__name--always) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

@media (min-width: 1080px) {
  .brand__logo { width: 62px; height: 62px; }
  .brand__name { font-size: 1.3125rem; }
}

.main-nav { display: none; }

@media (min-width: 1080px) {
  .main-nav { display: block; margin-right: 1rem; }

  .main-nav__list {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .main-nav__item { position: relative; }

  /* 19px bold: telt als "grote tekst" volgens WCAG, dus wit op mauve mag */
  .main-nav__link {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .625rem .875rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--on-mauve);
    font-family: var(--font-heading);
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s;
  }

  .main-nav__link:hover,
  .main-nav__link[aria-expanded="true"] { background: rgba(255, 255, 255, .16); color: var(--on-mauve); }

  .main-nav__link[aria-current="page"],
  .main-nav__link.is-active {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: .45em;
  }

  .main-nav__chevron { width: 18px; height: 18px; transition: transform .2s; }
  .main-nav__toggle[aria-expanded="true"] .main-nav__chevron { transform: rotate(180deg); }

  .dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    min-width: 240px;
    margin: 0;
    padding: .5rem;
    list-style: none;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow-soft), 0 0 0 1px var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px);
    transition: opacity .18s, transform .18s var(--ease), visibility 0s linear .18s;
  }

  .dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }

  .has-dropdown.is-open .dropdown,
  .no-js .has-dropdown:hover .dropdown,
  .no-js .has-dropdown:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
  }

  .dropdown :focus-visible { outline-color: var(--plum); }

  .dropdown__link {
    display: block;
    padding: .625rem .875rem;
    border-radius: 10px;
    color: var(--ink);
    font: 600 1rem/1.3 var(--font-heading);
    text-decoration: none;
  }

  .dropdown__link:hover { background: var(--blush); color: var(--plum); }
  .dropdown__link[aria-current="page"] { background: var(--blush-light); color: var(--plum); }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.header-cta { margin-right: .25rem; padding-inline: .875rem; }
.header-cta__icon { display: none; }
.header-cta__more { display: none; }

@media (min-width: 480px) {
  .header-cta__more { display: inline; }
  .header-cta__icon { display: block; width: 18px; height: 18px; }
}

.cart-count {
  position: absolute;
  top: 1px;
  right: -1px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--plum);
  box-shadow: 0 0 0 2px var(--mauve);
  color: #fff;
  font: 700 .75rem/20px var(--font-heading);
  text-align: center;
}

.cart-count.is-bumped { animation: bump .5s var(--ease); }

@keyframes bump {
  30% { transform: scale(1.4); }
}

@media (min-width: 1080px) {
  .menu-toggle { display: none; }
}

/* Mobiel menu: volledig scherm */
.mobile-menu {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--mauve);
  color: #fff;
  overflow-y: auto;
}

.mobile-menu::backdrop { background: var(--overlay); }
.mobile-menu[open] { animation: fade-in .2s ease-out; }
.mobile-menu :focus-visible { outline-color: #fff; }

.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 100%;
  padding: 0 var(--gutter) 2rem;
}

.mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.mobile-menu__top .brand__logo { width: 48px; height: 48px; }

.mobile-menu__list,
.mobile-menu__sub,
.mobile-menu__social { margin: 0; padding: 0; list-style: none; }

.mobile-menu__list { display: grid; gap: .25rem; }

.mobile-menu__link {
  display: block;
  padding: .5rem 0;
  color: #fff;
  font: 800 1.75rem/1.2 var(--font-heading);
  text-decoration: none;
}

.mobile-menu__sub {
  display: grid;
  gap: .125rem;
  margin: .25rem 0 .75rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(255, 255, 255, .45);
}

.mobile-menu__sublink {
  display: block;
  padding: .4rem 0;
  color: #fff;
  font: 700 1.25rem/1.3 var(--font-heading);
  text-decoration: none;
}

.mobile-menu a:hover { color: #fff; text-decoration: underline; }

.mobile-menu [aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: .3em;
}

.mobile-menu__cta { margin-top: auto; }

.mobile-menu__social { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

.mobile-menu__social a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #fff;
  font: 700 1.1875rem var(--font-heading);
  text-decoration: none;
}

/* ==========================================================================
   Gingham & titelbanners
   ========================================================================== */

/* Twee lagen strepen in blush over blush-light; waar ze kruisen wordt het
   donkerder (multiply), zoals echte gingham. Volgt automatisch de merkkleuren. */
.gingham {
  --gingham-stripe: var(--blush);
  background-color: var(--blush-light);
  background-image:
    linear-gradient(90deg, var(--gingham-stripe) 50%, transparent 50%),
    linear-gradient(var(--gingham-stripe) 50%, transparent 50%);
  background-size: var(--gingham-size) var(--gingham-size);
  background-blend-mode: multiply;
}

/* Iets zachter waar de browser het kan (moderne browsers) */
@supports (color: color-mix(in srgb, red, blue)) {
  .gingham { --gingham-stripe: color-mix(in srgb, var(--blush) 78%, #fff); }
}

.page-banner {
  padding-block: clamp(2.75rem, 8vw, 4.75rem);
  text-align: center;
}

.page-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-banner__title {
  margin: 0;
  color: var(--plum);
  font-size: clamp(2.1rem, 8.5vw, 4.25rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.page-banner__intro {
  max-width: 46ch;
  margin: 1.125rem auto 0;
  padding: .5rem 1rem;
  border-radius: 14px;
  background: rgba(253, 244, 246, .88);
  font-size: var(--text-lg);
  line-height: 1.6;
}

.page-banner .breadcrumbs { margin-bottom: 1.25rem; }

.page-heading {
  padding-block: clamp(2.25rem, 6vw, 3.75rem) clamp(1.25rem, 3vw, 2rem);
  text-align: center;
}

.page-heading__title {
  margin: 0;
  color: var(--plum);
  font-size: clamp(2rem, 7vw, 3.5rem);
  letter-spacing: -.03em;
  line-height: 1.05;
}

.page-heading__intro {
  max-width: 54ch;
  margin: .875rem auto 0;
  color: var(--ink-soft);
}

.page-heading .breadcrumbs { margin-bottom: 1rem; }

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 600 .875rem/1.4 var(--font-heading);
}

.breadcrumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--mauve-dark); }
.breadcrumbs a { color: var(--mauve-dark); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--ink); }
.breadcrumbs--left ol { justify-content: flex-start; }

/* ==========================================================================
   Startpagina
   ========================================================================== */

.hero { padding-block: clamp(2.75rem, 10vw, 6.5rem); }

.hero__inner {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  text-align: center;
}

.hero__logo {
  order: -1;
  width: clamp(150px, 42vw, 220px);
  height: auto;
  border-radius: 50%;
  box-shadow: 0 16px 40px -20px rgba(107, 63, 102, .55);
}

.hero__title {
  margin: 0;
  color: var(--plum);
  font-size: clamp(2rem, 9.4vw, 5.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
}

.hero__subtitle {
  max-width: 32ch;
  margin: 1rem auto 1.75rem;
  font-size: clamp(1.125rem, 3vw, 1.375rem);
  line-height: 1.5;
}

.hero__subtitle span {
  padding: .1em .3em;
  border-radius: 6px;
  background: rgba(253, 244, 246, .85);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: start;
    align-items: center;
    gap: 3rem;
    text-align: left;
  }

  .hero__logo { order: 0; width: clamp(240px, 26vw, 320px); }
  .hero__title { font-size: clamp(3rem, 6.1vw, 5.25rem); }
  .hero__subtitle { margin-inline: 0; }
}

.usp-bar {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.usp-bar__list {
  display: grid;
  gap: .625rem;
  margin: 0;
  padding: 1rem 0;
  list-style: none;
}

.usp-bar__item {
  display: flex;
  align-items: center;
  gap: .625rem;
  font: 600 .9375rem/1.35 var(--font-heading);
}

.usp-bar__item .icon { width: 22px; height: 22px; color: var(--plum); }

@media (min-width: 768px) {
  .usp-bar__list { grid-template-columns: repeat(3, auto); justify-content: space-between; padding: 1.125rem 0; }
}

.welcome { text-align: center; }

.welcome__text {
  max-width: 62ch;
  margin-inline: auto;
  font-size: var(--text-lg);
}

.signature {
  margin: 0;
  color: var(--mauve-dark);
  font-style: italic;
  font-size: 1.25rem;
}

.category-grid { display: grid; gap: 1.25rem; }

@media (min-width: 768px) {
  .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}

.category-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--white);
  color: inherit;
  text-decoration: none;
}

.category-card:hover { color: inherit; }

.category-card__media { aspect-ratio: 4 / 3; overflow: hidden; }

.category-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}

.category-card:hover .category-card__media img { transform: scale(1.04); }

.category-card__body { display: grid; gap: .375rem; padding: 1.25rem 1.25rem 1.5rem; }
.category-card__title { margin: 0; font-size: 1.5rem; }
.category-card__text { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.55; }
.category-card__link { margin-top: .5rem; }

.promo-band {
  display: grid;
  gap: 1.25rem;
  align-items: center;
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border-radius: var(--radius-card);
  background: var(--plum);
  color: #fff;
}

.promo-band h2 { margin: 0 0 .375rem; color: #fff; font-size: clamp(1.375rem, 3.6vw, 1.875rem); }
.promo-band p { margin: 0; color: #F8EEF5; }

.promo-band__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
}

.promo-band__icon .icon { width: 32px; height: 32px; }
.promo-band__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

@media (min-width: 900px) {
  .promo-band { grid-template-columns: auto minmax(0, 1fr) auto; gap: 2rem; }
}

.split {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; }
  .split--reverse > :first-child { order: 2; }
}

.split__media img {
  width: 100%;
  border-radius: var(--radius-card);
  object-fit: cover;
}

.treatment-list {
  display: grid;
  gap: .75rem;
  margin: 1.25rem 0 1.75rem;
  padding: 0;
  list-style: none;
}

.treatment-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  background: var(--blush-light);
}

.treatment-list__name { display: block; font: 700 1.0625rem/1.3 var(--font-heading); }
.treatment-list__meta { display: block; font-size: var(--text-sm); color: var(--ink-soft); }
.treatment-list__price { font: 700 1rem var(--font-heading); color: var(--mauve-dark); white-space: nowrap; }

/* Custom nagels-blok met een gingham-kader */
.custom-teaser {
  padding: clamp(10px, 2.5vw, 22px);
  border-radius: calc(var(--radius-card) + 10px);
}

.custom-teaser__inner {
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--white);
}

.custom-teaser__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.custom-teaser__text { padding: clamp(1.5rem, 5vw, 3rem); }
.custom-teaser__text h2 { color: var(--plum); }

@media (min-width: 768px) {
  .custom-teaser__inner { grid-template-columns: 1fr 1fr; align-items: center; }
}

.about-teaser__media img { aspect-ratio: 4 / 5; }

.social-block { text-align: center; }
.social-block .section-intro { margin-inline: auto; }

.social-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .social-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
}

.social-grid a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 12px; }
.social-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.social-grid a:hover img { transform: scale(1.05); }

.social-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

/* ==========================================================================
   Producten
   ========================================================================== */

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem .875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
}

@media (min-width: 1100px) {
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.product-card { position: relative; }

/* Startpagina: op tablet (3 kolommen) 6 producten, zodat de rijen vol zijn */
@media (min-width: 768px) and (max-width: 1099px) {
  .product-grid--limit > li:nth-child(n + 7) { display: none; }
}

.product-card__link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.product-card__link:hover { color: inherit; }

.product-card__media {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-photo);
  background: var(--white);
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}

/* Hover: foto zoomt heel licht in */
.product-card__link:hover .product-card__media img { transform: scale(1.04); }

.product-card__body { display: grid; gap: .1rem; }

.product-card__title {
  margin: 0;
  color: var(--ink);
  font: 700 1rem/1.3 var(--font-heading);
}

.product-card__link:hover .product-card__title { text-decoration: underline; text-underline-offset: .2em; }

.product-card__meta {
  color: var(--ink-soft);
  font: 500 var(--text-xs)/1.4 var(--font-heading);
}

.product-card__price {
  margin-top: .15rem;
  color: var(--mauve-dark);
  font: 700 1rem/1.3 var(--font-heading);
}

.product-card__badges {
  position: absolute;
  top: .625rem;
  left: .625rem;
  right: .625rem;
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  pointer-events: none;
}

.product-card.is-soldout .product-card__media img { opacity: .5; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .625rem;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--plum);
  font: 700 .75rem/1.3 var(--font-heading);
}

.badge .icon { width: 11px; height: 11px; }
.badge--new { background: var(--plum); color: #fff; }
.badge--unique { box-shadow: inset 0 0 0 1.5px var(--plum); }
.badge--soldout { background: var(--ink); color: #fff; }
.badge--video { background: rgba(255, 255, 255, .92); color: var(--ink); }

/* ==========================================================================
   Collectiepagina's
   ========================================================================== */

.collection { padding-block: clamp(1.75rem, 5vw, 3rem) var(--section); }

.collection-bar { display: grid; gap: .75rem; margin-bottom: 1.5rem; }

.pills {
  display: flex;
  gap: .5rem;
  margin: -.5rem;
  padding: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.pills::-webkit-scrollbar { display: none; }

.pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 40px;
  padding: .5rem 1.05rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink);
  font: 600 .9375rem/1 var(--font-heading);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}

.pill:hover { border-color: var(--plum); color: var(--plum); }
.pill[aria-current] { border-color: var(--plum); background: var(--plum); color: #fff; }
.pills--sub .pill { min-height: 36px; padding-block: .4rem; background: transparent; font-size: .875rem; }
.pills--sub .pill[aria-current] { background: var(--plum); }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  margin-bottom: 1.75rem;
  padding-block: .75rem;
  border-block: 1px solid var(--line);
  font: 500 .9375rem var(--font-heading);
}

.toolbar__count { margin: 0; color: var(--ink-soft); }
.sort-form { display: flex; align-items: center; gap: .5rem; }
.sort-form label { font-weight: 600; white-space: nowrap; }
.sort-form .select { width: auto; min-height: 42px; padding-block: .4rem; }

.custom-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 2rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-card);
  background: var(--blush);
}

.custom-promo__title { margin: 0; font: 800 1.25rem/1.25 var(--font-heading); }
.custom-promo p { margin: .25rem 0 0; font-size: var(--text-sm); }

.empty-state {
  display: grid;
  justify-items: center;
  gap: .75rem;
  padding: 3rem 1.25rem;
  border-radius: var(--radius-card);
  background: #fff;
  text-align: center;
}

.empty-state .icon { width: 40px; height: 40px; color: var(--mauve); }
.empty-state--page { margin-bottom: var(--section); }
.empty-state p { margin: 0; }

/* ==========================================================================
   Productpagina
   ========================================================================== */

.product-page { padding-block: 1.25rem var(--section); }
.product-page .breadcrumbs { margin-bottom: 1.25rem; }

.product {
  display: grid;
  gap: 2rem;
}

@media (min-width: 900px) {
  .product { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
  .gallery { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

.gallery { display: grid; gap: .75rem; }

.gallery__stage {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-photo);
  background: #fff;
}

.gallery__stage img,
.gallery__stage video { width: 100%; height: 100%; object-fit: cover; }

.gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery__thumb {
  position: relative;
  width: 76px;
  height: 76px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb[aria-current="true"] { border-color: var(--plum); }
.gallery__thumb:hover { border-color: var(--mauve); }

.gallery__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(46, 34, 40, .25);
  color: #fff;
}

.gallery__play .icon { width: 26px; height: 26px; }

.product-info__kind { margin: 0; color: var(--mauve-dark); font: 600 .9375rem var(--font-heading); }

.product-info__title {
  margin: .25rem 0 .5rem;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
}

.product-info__price { margin: 0; color: var(--mauve-dark); font: 800 1.5rem var(--font-heading); }

.stock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  margin: .875rem 0 0;
  font: 700 .9375rem var(--font-heading);
}

.stock::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--success);
}

.stock--unique::before { background: var(--plum); }
.stock--low::before { background: #C77D2E; }
.stock--soldout::before { background: var(--disabled); }
.stock__note { flex-basis: 100%; padding-left: 1.125rem; color: var(--ink-soft); font: 400 var(--text-sm)/1.5 var(--font-body); }

.product-info__desc { margin-top: 1.25rem; }

.includes {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  background: var(--blush);
}

.includes h2 { margin: 0 0 .5rem; font-size: 1rem; }
.includes ul { margin: 0; padding-left: 1.25rem; }
.includes li { margin-bottom: .25rem; }

.product-form {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.option-group { min-width: 0; margin: 0; padding: 0; border: 0; }

.option-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem 1rem;
  margin-bottom: .625rem;
}

.option-group legend,
.option-group__label { padding: 0; font: 700 1rem var(--font-heading); }

.option-group legend { float: left; margin-bottom: .625rem; }
.option-group__aside { float: right; margin-bottom: .625rem; }
.option-group .option-pills { clear: both; }
.option-group .field-error, .option-group .hint { clear: both; }

.option-pills { display: flex; flex-wrap: wrap; gap: .5rem; }

.option-pill { position: relative; display: block; }

.option-pill input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.option-pill__label {
  display: grid;
  place-items: center;
  min-width: 52px;
  min-height: 44px;
  padding: .5rem .9rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: #fff;
  font: 600 .9375rem/1.2 var(--font-heading);
  text-align: center;
  transition: background-color .15s, border-color .15s, color .15s;
}

.option-pill__label small { display: block; color: var(--ink-soft); font: 500 .75rem/1.3 var(--font-heading); }
.option-pill input:hover + .option-pill__label { border-color: var(--plum); }
.option-pill input:checked + .option-pill__label { border-color: var(--plum); background: var(--plum); color: #fff; }
.option-pill input:checked + .option-pill__label small { color: #F3E6F0; }
.option-pill input:focus-visible + .option-pill__label { outline: 3px solid var(--plum); outline-offset: 3px; }
.option-pill input:disabled + .option-pill__label { border-color: var(--line); color: var(--disabled); cursor: not-allowed; }

.size-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mauve-dark);
  font: 600 .9375rem var(--font-heading);
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}

.size-link:hover { color: var(--plum); }
.size-link .icon { width: 18px; height: 18px; }

.hint { margin: .5rem 0 0; color: var(--ink-soft); font-size: var(--text-sm); }

.field-error {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin: .5rem 0 0;
  color: var(--error);
  font: 600 .875rem/1.4 var(--font-heading);
}

.field-error .icon { width: 16px; height: 16px; }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: #fff;
}

.qty button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--plum);
}

.qty button:hover { background: var(--blush); }
.qty button:disabled { background: none; color: var(--disabled); cursor: not-allowed; }
.qty .icon { width: 18px; height: 18px; }

.qty input {
  width: 3rem;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: 700 1rem var(--font-heading);
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

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

.qty--sm button { width: 34px; height: 34px; }
.qty--sm input { width: 2.25rem; height: 34px; font-size: .9375rem; }

.product-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.product-form__actions .btn { flex: 1 1 220px; }

.handmade {
  display: grid;
  gap: 1.125rem;
  margin-top: 2rem;
  padding: 1.5rem;
  border-radius: var(--radius-card);
  background: #fff;
}

.handmade__item { display: grid; grid-template-columns: auto 1fr; gap: .875rem; align-items: start; }

.handmade__item > .icon {
  box-sizing: content-box;
  width: 22px;
  height: 22px;
  padding: 9px;
  border-radius: 50%;
  background: var(--blush);
  color: var(--plum);
}

.handmade__item h2,
.handmade__item h3 { margin: 0 0 .15rem; font-size: 1rem; font-weight: 700; }
.handmade__item p { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.55; }

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

/* ==========================================================================
   Formulieren
   ========================================================================== */

.form-grid { display: grid; gap: 1.125rem; }

@media (min-width: 640px) {
  .form-grid--2 { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}

.field { display: grid; align-content: start; gap: .375rem; min-width: 0; }

.field__label,
.label { font: 600 .9375rem/1.3 var(--font-heading); }

.field__optional { color: var(--ink-soft); font-weight: 500; }
.field__hint { margin: 0; color: var(--ink-soft); font-size: .875rem; line-height: 1.45; }

.input,
.select,
.textarea {
  width: 100%;
  min-height: 48px;
  padding: .75rem 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-field);
  background-color: #fff;
  color: var(--ink);
  font: 500 1rem/1.4 var(--font-heading);
  transition: border-color .2s;
}

.textarea { min-height: 120px; resize: vertical; line-height: 1.55; }

.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B3F66' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 1rem center;
  background-repeat: no-repeat;
  background-size: 16px;
  cursor: pointer;
}

.input:hover, .select:hover, .textarea:hover { border-color: var(--mauve-dark); }

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible { border-color: var(--plum); outline-offset: 1px; }

.input::placeholder,
.textarea::placeholder { color: #7A6670; }

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] { border-color: var(--error); background-color: #FFFBFC; }

.input-unit { position: relative; }
.input-unit .input { padding-right: 2.75rem; }

.input-unit__unit {
  position: absolute;
  top: 50%;
  right: .875rem;
  transform: translateY(-50%);
  color: var(--ink-soft);
  font: 600 .875rem var(--font-heading);
  pointer-events: none;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  cursor: pointer;
}

.check input {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: .12em 0 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.check input[type="radio"] { border-radius: 50%; }

.check input::before {
  content: "";
  width: 12px;
  height: 12px;
  background: #fff;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transition: transform .12s;
}

.check input[type="radio"]::before { width: 10px; height: 10px; clip-path: circle(50%); }
.check input:checked { border-color: var(--plum); background: var(--plum); }
.check input:checked::before { transform: scale(1); }
.check input:focus-visible { outline: 3px solid var(--plum); outline-offset: 2px; }
.check input[aria-invalid="true"] { border-color: var(--error); }

/* Keuzekaarten (radio of checkbox) */
.choice { position: relative; display: block; cursor: pointer; }

.choice > input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choice__body {
  position: relative;
  display: grid;
  align-content: start;
  gap: .25rem;
  height: 100%;
  padding: 1rem 2.75rem 1rem 1.125rem;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.choice:hover .choice__body { border-color: var(--mauve); }

.choice > input:checked + .choice__body {
  border-color: var(--plum);
  background: #FFFAFC;
  box-shadow: inset 0 0 0 1.5px var(--plum);
}

.choice > input:focus-visible + .choice__body { outline: 3px solid var(--plum); outline-offset: 3px; }
.choice > input:disabled { cursor: not-allowed; }
.choice > input:disabled + .choice__body { opacity: .5; }

.choice__title { font: 700 1rem/1.3 var(--font-heading); }
.choice__desc { color: var(--ink-soft); font-size: .875rem; line-height: 1.45; }
.choice__price { color: var(--mauve-dark); font: 700 .875rem/1.3 var(--font-heading); }

.choice__check {
  position: absolute;
  top: .875rem;
  right: .875rem;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: #fff;
  color: transparent;
}

.choice__check .icon { width: 14px; height: 14px; stroke-width: 3; }

.choice > input:checked + .choice__body .choice__check {
  border-color: var(--plum);
  background: var(--plum);
  color: #fff;
}

.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.choice-list { display: grid; gap: .75rem; }

@media (min-width: 640px) {
  .choice-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .choice-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.fieldset {
  display: grid;
  gap: 1rem;
  min-width: 0;
  margin: 0;
  padding: clamp(1.25rem, 4vw, 1.75rem);
  border: 0;
  border-radius: var(--radius-card);
  background: #fff;
}

.fieldset > legend {
  float: left;
  width: 100%;
  margin-bottom: .25rem;
  padding: 0;
  font: 800 1.25rem/1.3 var(--font-heading);
}

.fieldset > legend + * { clear: both; }

.subfieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.subfieldset > legend { margin-bottom: .75rem; padding: 0; font: 700 1rem var(--font-heading); }

.error-summary {
  padding: 1rem 1.25rem;
  border-radius: 14px;
  background: var(--error-bg);
  color: var(--error);
}

.error-summary h2 { margin: 0 0 .5rem; color: var(--error); font-size: 1.0625rem; }
.error-summary ul { margin: 0; padding-left: 1.25rem; font-size: var(--text-sm); }

/* ==========================================================================
   Meldingen
   ========================================================================== */

.notice {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  margin: 0;
  padding: .875rem 1rem;
  border-radius: 14px;
  background: var(--blush);
  font-size: .9375rem;
  line-height: 1.5;
}

.notice > .icon { width: 20px; height: 20px; margin-top: .12em; color: var(--plum); }
.notice p { margin: 0; }
.notice--warning { background: var(--warning-bg); color: #5E3B00; }
.notice--warning > .icon { color: #9A5B00; }
.notice--success { background: var(--success-bg); color: #24452F; }
.notice--success > .icon { color: var(--success); }
.notice--error { background: var(--error-bg); color: var(--error); }
.notice--error > .icon { color: var(--error); }
.notice--todo { border: 1px dashed #B8930E; background: #FFF8D6; color: #4D3D00; }
.notice--preview { background: var(--plum); color: #fff; }
.notice--preview > .icon { color: #fff; }

/* ==========================================================================
   Stappen-flow (custom nagels & afspraak)
   ========================================================================== */

.flow { padding-block: clamp(1.5rem, 4vw, 3rem) var(--section); }

.flow__progress { margin-bottom: 1.25rem; }

.flow__progress-text {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .5rem;
  font: 600 .9375rem var(--font-heading);
}

.flow__progress-text span:last-child { color: var(--ink-soft); }

.flow__bar { height: 6px; overflow: hidden; border-radius: 3px; background: var(--blush); }
.flow__bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--plum); transition: width .35s var(--ease); }

.flow__layout { display: grid; gap: 1.5rem; }
.flow__steps { display: grid; gap: 1.5rem; min-width: 0; }

.flow-step {
  padding: clamp(1.25rem, 4vw, 2rem);
  border-radius: var(--radius-card);
  background: #fff;
  scroll-margin-top: calc(var(--header-h) + 1rem);
  transition: box-shadow .2s;
}

.flow-step__head { display: flex; align-items: center; gap: .75rem; margin-bottom: .375rem; }

.flow-step__number {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blush);
  color: var(--plum);
  font: 800 1rem var(--font-heading);
}

.flow-step.is-complete .flow-step__number { background: var(--plum); color: #fff; }
.flow-step__title { margin: 0; font-size: clamp(1.25rem, 4vw, 1.5rem); }
.flow-step__intro { margin: 0 0 1.25rem; color: var(--ink-soft); font-size: var(--text-sm); }

.flow-step__error {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: 1rem 0 0;
  padding: .75rem 1rem;
  border-radius: 12px;
  background: var(--error-bg);
  color: var(--error);
  font: 600 .9375rem/1.4 var(--font-heading);
}

.flow-step__error .icon { width: 20px; height: 20px; }
.flow-step.has-error { box-shadow: inset 0 0 0 2px var(--error); }

.flow__nav { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.flow__nav .btn { min-width: 0; }
.flow__nav-price { font-family: var(--font-heading); line-height: 1.2; text-align: center; }
.flow__nav-price small { display: block; color: var(--ink-soft); font-size: .75rem; font-weight: 600; }
.flow__nav-price strong { color: var(--plum); font-size: 1.125rem; font-weight: 800; }

.no-js .flow__nav,
.no-js .flow__progress { display: none; }

/* Gsm & tablet: één stap tegelijk met een vaste balk onderaan */
@media (max-width: 1023px) {
  .js .flow [data-step]:not(.is-current) { display: none; }

  .js .flow__nav {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: 1.25rem calc(var(--gutter) * -1) 0;
    padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(253, 244, 246, .96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

/* Desktop: stappen onder elkaar met een vaste samenvatting rechts */
@media (min-width: 1024px) {
  .flow__progress, .flow__nav { display: none; }
  .flow__layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 2.5rem; align-items: start; }
  .flow__aside {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    max-height: calc(100vh - var(--header-h) - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    border-radius: var(--radius-card);
  }
}

.summary {
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 4vw, 1.75rem);
  border-radius: var(--radius-card);
  background: #fff;
}

.summary__title { margin: 0; font-size: 1.375rem; }
.summary__list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }

.summary__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px dashed var(--line);
}

.summary__label { font: 700 .875rem/1.3 var(--font-heading); }
.summary__value { grid-column: 1; margin: 0; font-size: .9375rem; line-height: 1.4; overflow-wrap: anywhere; }
.summary__value.is-empty { color: var(--ink-soft); font-style: italic; }
.summary__edit { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 600 .8125rem var(--font-heading); }

.summary__prices { display: grid; gap: .3rem; font-size: .9375rem; }
.summary__price-row { display: flex; justify-content: space-between; gap: 1rem; }
.summary__price-row span:last-child { font-family: var(--font-heading); font-weight: 600; white-space: nowrap; }

.summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .75rem;
  border-top: 2px solid var(--blush);
  font: 700 1rem var(--font-heading);
}

.summary__total strong { color: var(--plum); font-size: 1.5rem; font-weight: 800; }
.summary__actions { display: grid; gap: .75rem; }
.summary__alt { margin: 0; font-size: var(--text-sm); text-align: center; }

.color-dots { display: inline-flex; flex-wrap: wrap; gap: .3rem; vertical-align: middle; margin-right: .375rem; }

.color-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(46, 34, 40, .2);
}

/* ==========================================================================
   Custom nagels
   ========================================================================== */

.shape-choice .choice__body,
.length-choice .choice__body {
  justify-items: center;
  padding: 1.25rem .75rem 1rem;
  text-align: center;
}

.shape-choice .choice__check,
.length-choice .choice__check { top: .625rem; right: .625rem; }

.shape-icon,
.length-icon { width: 44px; height: 66px; margin-bottom: .375rem; color: var(--mauve-dark); }

.length-icon { width: 34px; height: 70px; }

.shape-icon path,
.length-icon path {
  fill: var(--blush);
  stroke: currentColor;
  stroke-width: 2;
  transition: fill .15s, stroke .15s;
}

.shape-icon .shine,
.length-icon .shine { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; opacity: .8; }

/* Gekozen vorm licht op in plum */
.choice > input:checked + .choice__body .shape-icon path:not(.shine),
.choice > input:checked + .choice__body .length-icon path:not(.shine) { fill: var(--plum); stroke: var(--plum); }

.size-panel {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1.125rem;
  border-radius: 14px;
  background: var(--blush-light);
}

.size-panel p { margin: 0; }

.finger-grid { display: grid; gap: 1.25rem; }

@media (min-width: 640px) {
  .finger-grid { grid-template-columns: 1fr 1fr; }
}

.finger-grid fieldset { display: grid; gap: .5rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.finger-grid legend { margin-bottom: .5rem; padding: 0; font: 700 .9375rem var(--font-heading); }

.finger-field { display: grid; grid-template-columns: minmax(0, 1fr) 104px; align-items: center; gap: .75rem; }
.finger-field label { font: 500 .9375rem var(--font-heading); }
.finger-field .input { min-height: 44px; padding-block: .5rem; }

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: .875rem .5rem;
}

.swatch { position: relative; display: grid; justify-items: center; gap: .375rem; text-align: center; cursor: pointer; }

.swatch input {
  position: absolute;
  top: 0;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: 0 0 0 -22px;
  opacity: 0;
  cursor: pointer;
}

.swatch__dot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(46, 34, 40, .18);
  transition: box-shadow .15s;
}

.swatch__dot .icon { width: 20px; height: 20px; color: #fff; opacity: 0; stroke-width: 3; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .45)); }
.swatch--light .swatch__dot .icon { color: var(--ink); filter: none; }
.swatch input:checked + .swatch__dot { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--plum); }
.swatch input:checked + .swatch__dot .icon { opacity: 1; }
.swatch input:focus-visible + .swatch__dot { outline: 3px solid var(--plum); outline-offset: 6px; }
.swatch input:disabled { cursor: not-allowed; }
.swatch input:disabled + .swatch__dot { opacity: .35; }
.swatch input:disabled ~ .swatch__name { opacity: .5; }
.swatch__name { font: 500 .8125rem/1.2 var(--font-heading); }

.custom-color {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  margin-top: 1.25rem;
  padding: .875rem 1rem;
  border-radius: 14px;
  background: var(--blush-light);
}

.custom-color__picker {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.custom-color__picker::-webkit-color-swatch-wrapper { padding: 0; }
.custom-color__picker::-webkit-color-swatch { border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(46, 34, 40, .2); }
.custom-color__picker::-moz-color-swatch { border: 0; border-radius: 50%; }

.color-status { margin: .75rem 0 0; color: var(--ink-soft); font: 600 .875rem var(--font-heading); }

.photo-drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .375rem;
  padding: 1.5rem 1rem;
  border: 2px dashed var(--mauve);
  border-radius: 16px;
  background: var(--blush-light);
  text-align: center;
  cursor: pointer;
  transition: background-color .15s;
}

.photo-drop:hover { background: var(--blush); }
.photo-drop:focus-within { outline: 3px solid var(--plum); outline-offset: 3px; }
.photo-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-drop .icon { width: 32px; height: 32px; color: var(--plum); }
.photo-drop__title { color: var(--plum); font: 700 1rem var(--font-heading); }
.photo-drop__hint { color: var(--ink-soft); font-size: .875rem; }
.photo-drop.is-full { opacity: .6; cursor: not-allowed; }

.photo-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.photo-thumbs:empty { display: none; }

.photo-thumb { position: relative; width: 96px; height: 96px; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }

.photo-thumb button {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
}

.photo-thumb button .icon { width: 16px; height: 16px; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
}

.gallery-grid figure { margin: 0; }
.gallery-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-photo); }
.gallery-grid figcaption { margin-top: .5rem; font: 600 .875rem/1.3 var(--font-heading); text-align: center; }

/* ==========================================================================
   Afspraak maken
   ========================================================================== */

.treatment-cards { display: grid; gap: .875rem; }

@media (min-width: 640px) {
  .treatment-cards { grid-template-columns: 1fr 1fr; }
}

.treatment-card .choice__body { gap: .5rem; padding: 1.25rem 3rem 1.25rem 1.25rem; }
.treatment-card .choice__title { font-size: 1.125rem; }

.treatment-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem 1rem;
  color: var(--ink-soft);
  font: 600 .875rem var(--font-heading);
}

.treatment-card__meta span { display: inline-flex; align-items: center; gap: .3rem; }
.treatment-card__meta .icon { width: 16px; height: 16px; }
.treatment-card__price { color: var(--mauve-dark); font: 800 1.125rem var(--font-heading); }

.extra-note { margin-top: .75rem; }

.calendar {
  max-width: 480px;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.calendar__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.calendar__title { margin: 0; font: 800 1.125rem var(--font-heading); }

.calendar__nav {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--plum);
}

.calendar__nav:hover { background: var(--blush); }
.calendar__nav:disabled { border-color: var(--line); background: #fff; color: var(--disabled); cursor: not-allowed; }
.calendar__nav .icon { width: 20px; height: 20px; }

.calendar__table { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.calendar__table th { padding-bottom: .25rem; color: var(--ink-soft); font: 700 .75rem var(--font-heading); }
.calendar__table abbr { text-decoration: none; }
.calendar__table td { padding: 0; text-align: center; }

.calendar__day {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 46px;
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--blush);
  color: var(--ink);
  font: 700 .9375rem var(--font-heading);
  cursor: pointer;
}

.calendar__day:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--plum); }
.calendar__day:disabled { background: transparent; color: var(--disabled); cursor: not-allowed; }
.calendar__day.is-today { box-shadow: inset 0 0 0 1.5px var(--mauve); }
.calendar__day[aria-pressed="true"] { background: var(--plum); color: #fff; box-shadow: none; }

.calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem 1rem;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
  font: 500 .8125rem var(--font-heading);
}

.calendar__legend li { display: inline-flex; align-items: center; gap: .375rem; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--blush); }
.legend-dot--off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--disabled); }
.legend-dot--on { background: var(--plum); }

.slots { display: flex; flex-wrap: wrap; gap: .5rem; }
.slots .option-pill__label { min-width: 76px; }

.slot-info { margin: 1rem 0 0; color: var(--ink-soft); font-size: var(--text-sm); }
.slots-intro { margin: 0 0 .75rem; }

.info-cards { display: grid; gap: 1rem; }

@media (min-width: 768px) {
  .info-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}

.info-card {
  display: grid;
  align-content: start;
  gap: .5rem;
  padding: 1.5rem;
  border-radius: var(--radius-card);
  background: #fff;
}

.info-card > .icon {
  box-sizing: content-box;
  width: 22px;
  height: 22px;
  padding: 10px;
  border-radius: 50%;
  background: var(--blush);
  color: var(--plum);
}

.info-card h3 { margin: .25rem 0 0; font-size: 1.0625rem; }
.info-card p { margin: 0; font-size: var(--text-sm); line-height: 1.6; }

.faq { display: grid; gap: .75rem; }
.faq details { padding: 0 1.25rem; border-radius: 16px; background: #fff; }

.faq summary {
  position: relative;
  padding: 1.125rem 2rem 1.125rem 0;
  font: 700 1.0625rem/1.35 var(--font-heading);
  list-style: none;
  cursor: pointer;
}

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

.faq summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: .25rem;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--plum);
  border-bottom: 2px solid var(--plum);
  transform: translateY(-75%) rotate(45deg);
  transition: transform .2s;
}

.faq details[open] summary::after { transform: translateY(-25%) rotate(225deg); }
.faq summary:focus-visible { outline-offset: 0; border-radius: 8px; }
.faq__answer { padding-bottom: 1.25rem; }
.faq__answer > :last-child { margin-bottom: 0; }

/* ==========================================================================
   Winkelmandje (slide-in) & winkelmandpagina
   ========================================================================== */

.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(440px, 100%);
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--blush-light);
  color: var(--ink);
}

.drawer::backdrop { background: var(--overlay); }
.drawer[open] { animation: drawer-in .32s var(--ease); }
.drawer[open]::backdrop { animation: fade-in .32s ease; }
.drawer.is-closing { animation: drawer-out .22s ease-in forwards; }
.drawer.is-closing::backdrop { animation: fade-out .22s ease-in forwards; }

@keyframes drawer-in { from { transform: translateX(100%); } }
@keyframes drawer-out { to { transform: translateX(100%); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

.drawer__panel { display: flex; flex-direction: column; height: 100%; }

.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem .75rem .75rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.drawer__title { margin: 0; font-size: 1.25rem; }

.drawer__status {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .75rem 1.25rem;
  background: var(--success-bg);
  color: #24452F;
  font: 600 .9375rem/1.4 var(--font-heading);
}

.drawer__status .icon { width: 20px; height: 20px; color: var(--success); }

.drawer__body {
  flex: 1;
  padding: 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer__footer {
  display: grid;
  gap: .875rem;
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: #fff;
}

.drawer__footer:empty { display: none; }
.drawer__extras { display: grid; gap: .875rem; margin-top: 1.25rem; }
.center-self { justify-self: center; }

.cart-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }

.cart-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: .875rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  border-radius: 12px;
}

.cart-item:last-child { padding-bottom: 0; border-bottom: 0; }
.cart-item.is-added { animation: highlight 1.6s ease; }

@keyframes highlight {
  0%, 40% { background: var(--blush); box-shadow: 0 0 0 8px var(--blush); }
  100% { background: transparent; box-shadow: 0 0 0 8px transparent; }
}

.cart-item__media img {
  width: 76px;
  height: 76px;
  border-radius: 12px;
  background: #fff;
  object-fit: cover;
}

.cart-item__top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.cart-item__name { color: var(--ink); font: 700 .9375rem/1.3 var(--font-heading); text-decoration: none; }
.cart-item__name:hover { color: var(--plum); text-decoration: underline; }
.cart-item__price { color: var(--mauve-dark); font: 700 .9375rem var(--font-heading); white-space: nowrap; }

.cart-item__options {
  margin: .25rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
  font-size: .8125rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.cart-item__options b { color: var(--ink); font-family: var(--font-heading); font-weight: 600; }

.cart-item__notice {
  display: flex;
  gap: .375rem;
  margin: .5rem 0 0;
  padding: .5rem .625rem;
  border-radius: 8px;
  background: var(--warning-bg);
  color: #5E3B00;
  font-size: .8125rem;
  line-height: 1.4;
}

.cart-item__notice .icon { width: 16px; height: 16px; margin-top: .1em; }
.cart-item__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; margin-top: .625rem; }

.cart-empty { display: grid; justify-items: center; gap: .875rem; padding: 2.5rem 1rem; text-align: center; }
.cart-empty .icon { width: 44px; height: 44px; color: var(--mauve); }
.cart-empty p { margin: 0; font: 600 1.0625rem var(--font-heading); }

.progress-note { display: grid; gap: .5rem; font-size: .875rem; line-height: 1.45; }
.progress-note p { display: flex; align-items: flex-start; gap: .5rem; margin: 0; }
.progress-note .icon { width: 18px; height: 18px; margin-top: .1em; color: var(--plum); }

.progress { height: 6px; overflow: hidden; border-radius: 3px; background: var(--blush); }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--plum); transition: width .4s var(--ease); }
.progress-note.is-done .progress > span { background: var(--success); }
.progress-note.is-done .icon { color: var(--success); }

.surprise {
  display: grid;
  gap: .625rem;
  padding: .875rem 1rem;
  border-radius: 14px;
  background: var(--blush);
}

.surprise__title { display: flex; align-items: flex-start; gap: .5rem; margin: 0; font: 700 .9375rem/1.4 var(--font-heading); }
.surprise__title .icon { width: 20px; height: 20px; color: var(--plum); }
.surprise__text { margin: 0; color: var(--ink-soft); font-size: .8125rem; line-height: 1.45; }

.surprise__choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.surprise__choice legend { float: left; margin-right: .25rem; padding: 0; font: 600 .8125rem var(--font-heading); }
.surprise__choice .option-pill__label { min-height: 36px; padding: .35rem .85rem; font-size: .875rem; }

.metal {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.metal::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F6E7A8, #C9A227 60%, #F3DE8A);
  box-shadow: inset 0 0 0 1px rgba(46, 34, 40, .15);
}

.metal--zilver::before { background: linear-gradient(135deg, #F4F5F8, #A9ADB8 60%, #E6E8EE); }

.cart-summary { display: grid; gap: .5rem; }

.cart-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font: 500 .9375rem/1.4 var(--font-heading);
}

.cart-summary__row span:last-child { font-weight: 700; white-space: nowrap; }
.cart-summary__row--total { padding-top: .5rem; border-top: 1px solid var(--line); font-size: 1.125rem; }
.cart-summary__row--total span { font-weight: 800; }
.cart-summary__note { margin: 0; color: var(--ink-soft); font-size: .8125rem; }

.cart-page { display: grid; gap: 1.5rem; padding-bottom: var(--section); }

@media (min-width: 900px) {
  .cart-page { grid-template-columns: minmax(0, 1fr) 380px; gap: 2.5rem; align-items: start; }
  .cart-page__summary { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

.cart-page__items,
.cart-page__summary {
  padding: clamp(1.125rem, 4vw, 1.75rem);
  border-radius: var(--radius-card);
  background: #fff;
}

.cart-page__summary { display: grid; gap: 1rem; }
.cart-page__summary h2 { margin: 0; font-size: 1.375rem; }
.cart-page .cart-item { grid-template-columns: 96px minmax(0, 1fr); }
.cart-page .cart-item__media img { width: 96px; height: 96px; }

@media (max-width: 479px) {
  .cart-page .cart-item { grid-template-columns: 76px minmax(0, 1fr); }
  .cart-page .cart-item__media img { width: 76px; height: 76px; }
}
.cart-page .cart-empty { padding-block: 3rem; }
.cart-page.is-empty { grid-template-columns: minmax(0, 1fr); }

/* ==========================================================================
   Afrekenen
   ========================================================================== */

.checkout { display: grid; gap: 1.5rem; padding-bottom: var(--section); }

@media (min-width: 1024px) {
  .checkout { grid-template-columns: minmax(0, 1fr) 400px; gap: 2.5rem; align-items: start; }
  .checkout__summary { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .checkout__form { grid-column: 1; grid-row: 1; }
}

.checkout__form { display: grid; gap: 1.25rem; min-width: 0; }

.checkout-summary {
  display: grid;
  gap: 1rem;
  padding: clamp(1.125rem, 4vw, 1.5rem);
  border-radius: var(--radius-card);
  background: #fff;
}

.checkout-summary h2 { margin: 0; font-size: 1.25rem; }
.checkout-summary__body { display: grid; gap: 1rem; }
.checkout-summary__body > .cart-summary { padding-top: .875rem; border-top: 1px solid var(--line); }

.order-lines { display: grid; gap: .875rem; margin: 0; padding: 0; list-style: none; }
.order-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: .75rem; align-items: start; }
.order-line__media { position: relative; }
.order-line__media img { width: 56px; height: 56px; border-radius: 10px; background: var(--blush-light); object-fit: cover; }

.order-line__qty {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font: 700 .6875rem/20px var(--font-heading);
  text-align: center;
}

.order-line__name { margin: 0; font: 700 .875rem/1.3 var(--font-heading); }
.order-line__options { margin: .15rem 0 0; color: var(--ink-soft); font-size: .75rem; line-height: 1.4; overflow-wrap: anywhere; }
.order-line__price { font: 700 .875rem var(--font-heading); white-space: nowrap; }

.payment-logos { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.payment-logos img { width: 72px; height: 45px; }
.payment-logos__text {
  display: inline-grid; place-items: center;
  min-width: 72px; height: 45px; padding: 0 .75rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--white); color: var(--ink);
  font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700;
}

.checkout__submit { display: grid; gap: .75rem; }
.checkout__total-line { display: flex; justify-content: space-between; margin: 0; font: 700 1.0625rem var(--font-heading); }

/* ==========================================================================
   Inhoudspagina's
   ========================================================================== */

.prose { max-width: 70ch; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: 2em; font-size: clamp(1.25rem, 3.5vw, 1.625rem); }
.prose h3 { margin-top: 1.5em; font-size: 1.125rem; }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.25rem; }
.prose li { margin-bottom: .375em; }
.prose .notice { margin-bottom: 1.5rem; }
.prose blockquote {
  margin: 0 0 1em;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--mauve);
  border-radius: 0 12px 12px 0;
  background: var(--blush-light);
}
.prose blockquote > :last-child { margin-bottom: 0; }
.info-content .faq details { background: var(--blush-light); }

.info-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-bottom: var(--section); }

@media (min-width: 900px) {
  .info-layout { grid-template-columns: 270px minmax(0, 1fr); gap: 3rem; align-items: start; }
  .info-nav { position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .info-nav .pills { flex-direction: column; overflow: visible; }
  .info-nav .pill { justify-content: flex-start; border-color: transparent; background: transparent; white-space: normal; }
  .info-nav .pill:hover { background: var(--blush); }
  .info-nav .pill[aria-current="page"] { background: var(--plum); }
}

.info-content {
  padding: clamp(1.25rem, 5vw, 2.75rem);
  border-radius: var(--radius-card);
  background: #fff;
}

.about-intro__media img { aspect-ratio: 4 / 5; }

.steps {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}

.steps li { padding: 1.5rem; border-radius: var(--radius-card); background: #fff; counter-increment: step; }

.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--blush);
  color: var(--plum);
  font: 800 1.125rem var(--font-heading);
}

.steps h3 { margin-bottom: .375rem; }
.steps p { margin: 0; font-size: var(--text-sm); }

.contact-layout { display: grid; gap: 1.5rem; padding-bottom: var(--section); }

@media (min-width: 900px) {
  .contact-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
}

.contact-card {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--radius-card);
  background: #fff;
}

.contact-card h2 { margin: 0; font-size: 1.25rem; }
.contact-list { display: grid; gap: .875rem; margin: 0; padding: 0; list-style: none; }
.contact-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: center; overflow-wrap: anywhere; }

.contact-list .icon {
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: 8px;
  border-radius: 50%;
  background: var(--blush);
  color: var(--plum);
}

.confirmation {
  display: grid;
  gap: 1.5rem;
  max-width: 740px;
  margin-inline: auto;
  padding-bottom: var(--section);
}

.confirmation__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
}

.confirmation__icon .icon { width: 36px; height: 36px; stroke-width: 2.25; }
.confirmation__lead { margin: 0; font-size: var(--text-lg); text-align: center; }
.confirmation__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

.summary-card {
  padding: clamp(1.25rem, 4vw, 1.75rem);
  border-radius: var(--radius-card);
  background: #fff;
}

.summary-card h2 { margin: 0 0 1rem; font-size: 1.25rem; }

.detail-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1.25rem; margin: 0; }
.detail-list dt { font: 700 .9375rem var(--font-heading); }
.detail-list dd { margin: 0; overflow-wrap: anywhere; }

/* ==========================================================================
   Vensters (maattabel)
   ========================================================================== */

.modal {
  width: min(660px, calc(100% - 2rem));
  max-width: none;
  max-height: calc(100% - 2rem);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-card);
  background: #fff;
  color: var(--ink);
}

.modal::backdrop { background: var(--overlay); }
.modal[open] { animation: modal-in .25s var(--ease); }
.modal[open]::backdrop { animation: fade-in .25s ease; }
.modal.is-closing { animation: fade-out .18s ease-in forwards; }
.modal.is-closing::backdrop { animation: fade-out .18s ease-in forwards; }

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

.modal__panel { display: flex; flex-direction: column; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); }

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem .75rem .75rem 1.5rem;
  border-bottom: 1px solid var(--line);
}

.modal__title { margin: 0; font-size: 1.25rem; }
.modal__body { padding: 1.25rem 1.5rem 1.5rem; overflow-y: auto; }

.measure-steps { padding-left: 1.25rem; }

.table-wrap { margin: 1rem 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }

.size-table { width: 100%; min-width: 460px; border-collapse: collapse; font: 500 .875rem var(--font-heading); }
.size-table caption { padding: .75rem 1rem; background: var(--blush-light); font-weight: 700; text-align: left; }
.size-table th, .size-table td { padding: .625rem .75rem; border-top: 1px solid var(--line); text-align: center; }
.size-table thead th { background: var(--blush); }
.size-table tbody th { color: var(--plum); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  padding-top: clamp(2.5rem, 7vw, 4rem);
  background: var(--mauve);
  color: var(--on-mauve-small);
}

.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.site-footer :focus-visible { outline-color: var(--ink); }

.site-footer__grid { display: grid; gap: 2rem; padding-bottom: 2.5rem; }

@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: 1.3fr 1fr 1.25fr 1fr; gap: 2.5rem; }
}

.site-footer__logo { display: inline-block; border-radius: 50%; }
.site-footer__logo img { width: 112px; height: 112px; border-radius: 50%; }
.site-footer__slogan { margin: 1rem 0 1.25rem; font-size: 1.0625rem; font-style: italic; }
.site-footer__heading { margin: 0 0 .875rem; font: 800 1.125rem var(--font-heading); color: var(--ink); }
.site-footer__col ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.site-footer__col a { font: 600 .9375rem/1.4 var(--font-heading); }

.social-links { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.social-links a { display: inline-flex; align-items: center; gap: .5rem; font: 700 .9375rem var(--font-heading); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding-block: 1.25rem;
  border-top: 1px solid rgba(46, 34, 40, .25);
  font: 500 .8125rem/1.5 var(--font-heading);
}

.site-footer__bottom p { margin: 0; }

/* ==========================================================================
   Minder beweging
   ========================================================================== */

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