/* Anthos Brood en Bloem — Color tokens
 * Derived from the brand's Instagram huisstijl: a signature canary yellow,
 * warm near-black ink, cream "paper", and botanical secondaries pulled from
 * the flowers (blush), foliage (sage) and bread/wood tones (terracotta).
 */
:root {
  /* ---- Brand core ---- */
  --anthos-yellow:        #F5E400; /* signature canary yellow — badges, blobs, primary */
  --anthos-yellow-deep:   #E7D500; /* hover / pressed state of yellow surfaces */
  --anthos-yellow-soft:   #FBF3A6; /* tints, highlights, subtle fills */

  --ink:                  #17150F; /* warm near-black — primary text, black-on-yellow */
  --ink-soft:             #4B463A; /* secondary text */
  --ink-faint:            #6E695C; /* tertiary / captions / placeholders */

  --paper:                #FBF8F1; /* default warm cream background */
  --paper-2:              #F2EADA; /* deeper cream — sections, cards on paper */
  --paper-3:              #E9DEC9; /* deepest cream — borders, wells */
  --white:                #FFFFFF;

  /* ---- Botanical secondaries (from the flowers & café) ---- */
  --blush:                #E7B3C1; /* soft pink florals */
  --blush-deep:           #C9738A;
  --sage:                 #8C9A6A; /* foliage green */
  --sage-deep:            #5E6B45;
  --terracotta:           #C67B52; /* bread crust / warm wood accent */
  --terracotta-deep:      #9E5A38;
  --sky:                  #9FB6C4; /* delft / cornflower — the blue florals */

  /* ---- Lines & shadows ---- */
  --line:                 rgba(23, 21, 15, 0.12);
  --line-strong:          rgba(23, 21, 15, 0.24);
  --line-yellow:          rgba(23, 21, 15, 0.55); /* lines drawn on yellow */

  /* ---- Semantic aliases ---- */
  --bg:                   var(--paper);
  --bg-elevated:          var(--white);
  --surface-card:         var(--white);
  --surface-sunk:         var(--paper-2);

  --text-body:            var(--ink);
  --text-muted:           var(--ink-soft);
  --text-faint:           var(--ink-faint);
  --text-on-yellow:       var(--ink);
  --text-on-ink:          var(--paper);

  --primary:              var(--anthos-yellow);
  --primary-hover:        var(--anthos-yellow-deep);
  --on-primary:           var(--ink);

  --accent-script:        var(--ink);      /* script accents are usually ink or yellow */
  --border:               var(--line);
  --border-strong:        var(--line-strong);
  --focus-ring:           var(--ink);

  /* ---- Status (kept muted & on-brand) ---- */
  --success:              #5E6B45;
  --success-bg:           #E6EAD6;
  --warning:              #C67B52;
  --warning-bg:           #F6E3D3;
  --danger:               #B23A34;
  --danger-bg:            #F4DAD6;
}
/* Anthos Brood en Bloem — Typography tokens */
:root {
  /* ---- Families ----
   * display / ui : Archivo  (bold friendly grotesque, matches IG captions)
   * script       : Sacramento (elegant signature, for accents only — never body)
   */
  --font-display: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script:  'Sacramento', 'Segoe Script', cursive;
  --font-mono:    ui-monospace, monospace;

  /* ---- Weights ---- */
  --fw-light:   300; /* @kind other */
  --fw-regular: 400; /* @kind other */
  --fw-medium:  500; /* @kind other */
  --fw-semibold:600; /* @kind other */
  --fw-bold:    700; /* @kind other */
  --fw-black:   800; /* @kind other */

  /* ---- Type scale (fluid-ready px values) ---- */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   21px;
  --text-xl:   26px;
  --text-2xl:  32px;
  --text-3xl:  42px;
  --text-4xl:  56px;
  --text-5xl:  72px;
  --text-6xl:  96px;

  /* ---- Line heights ---- */
  --leading-tight:   1.05;
  --leading-snug:    1.18;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.14em;  /* uppercase labels — a brand signal (TAKE AWAY, MENU) */

  /* ---- Semantic roles ---- */
  --display-1-size: var(--text-6xl);
  --display-1-weight: var(--fw-black);
  --display-1-leading: var(--leading-tight);
  --display-1-tracking: var(--tracking-tight);

  --heading-size: var(--text-2xl);
  --heading-weight: var(--fw-bold);

  --body-size: 17px;                         /* lopende tekst: 17px gsm, 18px vanaf tablet (feedback: fonts te klein) */
  --lead-size: clamp(18px, 0.5vw + 16px, 20px); /* intro-/leadtekst onder een kop */
  --body-leading: var(--leading-normal);

  --eyebrow-size: var(--text-xs);
  --eyebrow-tracking: var(--tracking-caps);
  --eyebrow-weight: var(--fw-semibold);
}
/* Anthos Brood en Bloem — Spacing & layout tokens
 * Base unit 4px. Generous, airy spacing to match the calm café feel.
 */
:root {
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ---- Container widths ---- */
  --container-sm:   640px;
  --container-md:   860px;
  --container-lg:   1120px;
  --container-xl:   1320px;
  --gutter:         clamp(20px, 5vw, 64px); /* @kind spacing */

  /* ---- Semantic ---- */
  --section-y:      clamp(76px, 9vw, 112px); /* @kind spacing · ruimte boven/onder elke sectie (76px gsm, 112px desktop) */
  --card-pad:       var(--space-6);
  --field-height:   48px;
  --touch-min:      44px;
}
/* Anthos Brood en Bloem — Radii, shadows, borders, motion
 * Corners are soft and generous — pills for actions, rounded rectangles for
 * cards. The signature shape is the ORGANIC BLOB (see --blob-* clip paths),
 * used for badges and yellow cutouts, echoing the Instagram grid.
 */
:root {
  /* ---- Radii ---- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   36px;
  --radius-2xl:  48px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- Shadows — soft, warm, low-contrast (photographic daylight) ---- */
  --shadow-xs:  0 1px 2px rgba(23, 21, 15, 0.06);
  --shadow-sm:  0 2px 8px rgba(23, 21, 15, 0.07);
  --shadow-md:  0 8px 24px rgba(23, 21, 15, 0.09);
  --shadow-lg:  0 18px 48px rgba(23, 21, 15, 0.12);
  --shadow-yellow: 0 10px 30px rgba(216, 198, 0, 0.35); /* glow under yellow CTAs */

  /* ---- Borders ---- */
  --border-width: 1.5px; /* @kind other */
  --border-hair:  1px; /* @kind other */

  /* ---- Organic blob clip-paths (the brand's signature cutout shapes) ---- */
  --blob-1: 47% 53% 45% 55% / 55% 45% 55% 45%; /* @kind other */
  --blob-2: 63% 37% 55% 45% / 48% 62% 38% 52%; /* @kind other */
  --blob-3: 40% 60% 62% 38% / 54% 42% 58% 46%; /* @kind other */

  /* ---- Motion ---- */
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    240ms; /* @kind other */
  --dur-slow:    420ms; /* @kind other */
}
/* Anthos Brood en Bloem — Base layer
 * Minimal reset + brand defaults + a few signature utility classes.
 * Consumers get sensible element defaults just by linking styles.css.
 */

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

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
/* decoratieve blad-accenten bloeden bewust over de rand; clip voorkomt horizontale scroll op mobiel zonder de sticky header te breken */
body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: var(--fw-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--text-4xl); font-weight: var(--fw-black); line-height: var(--leading-tight); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p { margin: 0 0 1em; text-wrap: pretty; }

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

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

:focus-visible {
  outline: 2.5px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 3px;
}

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

/* ---- Signature utilities ---- */

/* Uppercase tracked eyebrow — a core brand label style */
.anthos-eyebrow {
  font-family: var(--font-display);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Handwritten script accent (headlines only, never body copy) */
.anthos-script {
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* Kopstapel: script-regel boven een titel, met ademruimte (max. 3 lettertypes per blok:
   script + titel + tekst; het kleine kicker-kopje alleen waar geen script-regel staat) */
.a-script-line { margin: 0 0 10px; line-height: 1.15; }
/* Intro-/leadtekst onder een kop */
.a-lead-text { font-size: var(--lead-size); line-height: 1.65; }
/* Pijltje in een geel bolletje (tegels, kaart-links) */
.a-arrow-dot { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--anthos-yellow); color: var(--ink); transition: transform .2s ease; }
a:hover > * > .a-arrow-dot, a:hover .a-arrow-dot { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .a-arrow-dot { transition: none; } }
@media (min-width: 768px) { :root { --body-size: 18px; } }

/* The signature organic yellow blob / badge */
.anthos-blob {
  background: var(--anthos-yellow);
  border-radius: var(--blob-1);
  color: var(--ink);
}

/* Constrained content container */
.anthos-container {
  width: 100%;
  max-width: var(--container-lg);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
/* Anthos Brood en Bloem — Component styles
 * Classes consumed by the React primitives in /components.
 * Hover / focus / active states live here so components stay declarative.
 */

/* ============ BUTTON ============ */
.abtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-base);
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  border: var(--border-width) solid transparent;
  background: var(--anthos-yellow);
  color: var(--ink);
  padding: 0 24px;
  min-height: var(--field-height);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-soft),
              background-color var(--dur-base) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-soft),
              border-color var(--dur-base) var(--ease-soft);
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}
.abtn:active { transform: translateY(1px) scale(0.985); }
.abtn:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 2px; }

.abtn--primary { background: var(--anthos-yellow); color: var(--ink); box-shadow: var(--shadow-sm); }
.abtn--primary:hover { background: var(--anthos-yellow-deep); box-shadow: var(--shadow-yellow); }

.abtn--ink { background: var(--ink); color: var(--paper); }
.abtn--ink:hover { background: #000; }

.abtn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.abtn--outline:hover { background: var(--ink); color: var(--paper); }

.abtn--ghost { background: transparent; color: var(--ink); border-color: transparent; }
.abtn--ghost:hover { background: rgba(23,21,15,0.06); }

.abtn--sm { min-height: 38px; font-size: var(--text-sm); padding: 0 16px; }
.abtn--lg { min-height: 58px; font-size: var(--text-md); padding: 0 34px; }

/* volle-breedte knoppen mogen afbreken i.p.v. buiten de pill te lopen (lange labels op mobiel) */
.abtn--block { display: flex; width: 100%; max-width: 100%; white-space: normal; text-align: center; line-height: 1.2; padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 480px) {
  .abtn--lg { padding-left: 18px; padding-right: 18px; }
  .abtn--lg.abtn--block { font-size: var(--text-base); }
}
.abtn[disabled], .abtn[aria-disabled="true"] {
  opacity: 0.45; pointer-events: none; box-shadow: none;
}
.abtn .abtn__icon { display: inline-flex; width: 1.15em; height: 1.15em; }
.abtn .abtn__icon svg { width: 100%; height: 100%; }

/* ============ TAG (uppercase pill label) ============ */
.atag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  line-height: 1;
}
.atag--yellow  { background: var(--anthos-yellow); border-color: var(--anthos-yellow); }
.atag--ink     { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.atag--soft    { background: var(--paper-2); border-color: transparent; color: var(--ink-soft); }
.atag--sage    { background: var(--success-bg); border-color: transparent; color: var(--sage-deep); }
.atag--blush   { background: #F6E1E7; border-color: transparent; color: var(--blush-deep); }

/* ============ BADGE (script-in-blob signature) ============ */
.abadge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--anthos-yellow);
  color: var(--ink);
  aspect-ratio: 1;
  border-radius: var(--radius-circle);
  padding: 14%;
  line-height: 1;
}
.abadge--blob { border-radius: var(--blob-2); }
.abadge__script { font-family: var(--font-script); font-size: 1.1em; margin-bottom: 0.04em; }
.abadge__main {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
  line-height: 0.95;
}

/* ============ SECTION HEADING ============ */
.ahead { display: flex; flex-direction: column; gap: 10px; }
.ahead--center { align-items: center; text-align: center; }
.ahead__eyebrow {
  font-family: var(--font-display);
  font-size: var(--eyebrow-size);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ahead__script {
  font-family: var(--font-script);
  font-size: var(--text-3xl);
  line-height: 0.9;
  color: var(--ink);
  margin-bottom: -6px;
}
.ahead__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.ahead__sub { color: var(--ink-soft); font-size: var(--text-md); max-width: 56ch; margin: 0; }

/* ============ CARD ============ */
.acard {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.acard--interactive { cursor: pointer; }
.acard--interactive:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.acard--flat { box-shadow: none; }
.acard--sunk { background: var(--paper-2); border-color: transparent; box-shadow: none; }
.acard__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  overflow: hidden;
}
.acard__media img { width: 100%; height: 100%; object-fit: cover; }
.acard__media--tall { aspect-ratio: 3 / 4; }
.acard__body { padding: var(--card-pad); display: flex; flex-direction: column; gap: 8px; }
.acard__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-lg); margin: 0; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
.acard__body { min-width: 0; }
.acard__body > * { min-width: 0; max-width: 100%; }
.acard__text { color: var(--ink-soft); font-size: var(--text-sm); margin: 0; }
.acard__foot { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.acard__price { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-lg); white-space: nowrap; }
.acard__foot .button, .acard__foot .abtn, .acard__foot .add_to_cart_button { flex: 0 0 auto; white-space: nowrap; }

/* photo placeholder used across kits when real imagery is absent */
.aphoto-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(245,228,0,0.20), transparent 60%),
    linear-gradient(135deg, var(--paper-2), var(--paper-3));
  color: var(--ink-faint);
  font-family: var(--font-script);
  font-size: 1.6rem;
}

/* ============ PRICE ROW (menu line item) ============ */
.aprice {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
}
.aprice + .aprice { border-top: 1px dashed var(--line); }
.aprice__name { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-md); }
.aprice__desc { color: var(--ink-soft); font-size: var(--text-sm); margin-top: 2px; }
.aprice__amount { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-md); white-space: nowrap; }
.aprice__lead {
  flex: 1; border-bottom: 1.5px dotted var(--line-strong);
  transform: translateY(-4px); margin: 0 6px;
}

/* ============ INPUT ============ */
.afield { display: flex; flex-direction: column; gap: 7px; }
.afield__label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.afield__hint { font-size: var(--text-xs); color: var(--ink-faint); }
.ainput, .aselect {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  height: var(--field-height);
  padding: 0 14px;
  width: 100%;
  transition: border-color var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}
.ainput::placeholder { color: var(--ink-faint); }
.ainput:hover, .aselect:hover { border-color: var(--ink); }
.ainput:focus, .aselect:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--anthos-yellow-soft);
}
.ainput--invalid { border-color: var(--danger); }
.ainput--invalid:focus { box-shadow: 0 0 0 3px var(--danger-bg); }
textarea.ainput { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
.aselect {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2317150F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

/* ============ QUANTITY STEPPER ============ */
.aqty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--white);
}
.aqty__btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink); font-size: 20px; line-height: 1;
  transition: background var(--dur-fast) var(--ease-soft);
}
.aqty__btn:hover { background: var(--anthos-yellow); }
.aqty__btn:disabled { opacity: 0.3; pointer-events: none; }
.aqty__val { min-width: 36px; text-align: center; font-family: var(--font-display); font-weight: var(--fw-bold); }

/* ============ ICON ============ */
.aicon { display: inline-flex; width: 1.25em; height: 1.25em; vertical-align: -0.15em; }
.aicon svg { width: 100%; height: 100%; stroke-width: 1.75; }

/* ============ LOGO ============ */
.alogo { display: inline-block; line-height: 0; }
.alogo svg { display: block; height: 100%; width: auto; }
.alogo--ink svg path { fill: var(--ink); }
.alogo--paper svg path { fill: var(--paper); }
.alogo--white svg path { fill: #fff; }