/** Shopify CDN: Minification failed

Line 211:2 Unexpected "{"
Line 211:3 Expected identifier but found "%"
Line 212:22 Expected identifier but found whitespace
Line 216:3 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:delivery-address (INDEX:16) */
/* Zelfde opzet als sections/pickup-party.liquid: elke waarde als
     var(--token, terugval), zodat deze sectie ook draait op het live thema dat
     geen design-tokens.css kent. Zodra NOOCH DEV live is mogen de terugvallen
     weg en blijft var(--token) over. De klassenamen zijn bewust dezelfde als
     bij de pick-up sectie: het is hetzelfde formulier in hetzelfde jasje, en
     die twee staan nooit samen op een pagina. */
  .pickup {
    --pk-bg:        var(--color-bg, #fbfaf6);              /* token-check-allow: terugval voor het live thema zonder design system */
    --pk-bg-alt:    var(--color-bg-alt, #f2f0e8);          /* token-check-allow: idem */
    --pk-ink:       var(--color-text, #16170f);            /* token-check-allow: idem */
    --pk-muted:     var(--color-text-muted, #6b6a5e);      /* token-check-allow: idem */
    --pk-line:      var(--color-border, #d9d7cc);          /* token-check-allow: idem */
    --pk-line-soft: var(--color-border-subtle, #e6e4da);   /* token-check-allow: idem */
    --pk-accent:    var(--color-neon-green, #00ff00);      /* token-check-allow: idem */
    --pk-on-accent: var(--color-black, #000000);           /* token-check-allow: idem */
    --pk-white:     var(--color-white, #ffffff);           /* token-check-allow: idem */
    --pk-bad:       var(--color-error, #8f2214);           /* token-check-allow: idem */
    --pk-focus:     var(--color-focus, #16170f);           /* token-check-allow: idem */
    --pk-2: var(--space-2, 0.5rem);                        /* token-check-allow: idem */
    --pk-3: var(--space-3, 0.75rem);                       /* token-check-allow: idem */
    --pk-4: var(--space-4, 1rem);                          /* token-check-allow: idem */
    --pk-5: var(--space-5, 1.5rem);                        /* token-check-allow: idem */
    --pk-6: var(--space-6, 2rem);                          /* token-check-allow: idem */
    --pk-8: var(--space-8, 3rem);                          /* token-check-allow: idem */
    --pk-10: var(--space-10, 4.5rem);                      /* token-check-allow: idem */
    --pk-radius: var(--radius-md, 6px);                    /* token-check-allow: idem */
    --pk-border: var(--border-width, 1px);                 /* token-check-allow: idem */
    --pk-border-md: var(--border-width-md, 2px);           /* token-check-allow: idem */
    --pk-tap: var(--touch-min, 44px);                      /* token-check-allow: idem */
    --pk-wide: var(--content-width-narrow, 42rem);         /* token-check-allow: idem */
    --pk-font: var(--font-body-family, inherit);           /* token-check-allow: idem */

    background: var(--pk-bg); color: var(--pk-ink);
    font-family: var(--pk-font);
  }

  .pk-hero {
    font-size: clamp(2rem, 6vw, 3.25rem);   /* token-check-allow: terugval voor het live thema zonder design system */
    line-height: 1.02;                      /* token-check-allow: idem */
    letter-spacing: -0.02em;                /* token-check-allow: idem */
    font-weight: 800;
    text-transform: uppercase;
  }
  .pk-heading { font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.2; font-weight: 700; }  /* token-check-allow: idem */
  .pk-body { font-size: 1rem; line-height: 1.55; }         /* token-check-allow: idem */
  .pk-strong { font-size: 1rem; line-height: 1.5; font-weight: 700; }  /* token-check-allow: idem */
  .pk-micro {
    font-size: 0.8125rem;                   /* token-check-allow: idem */
    line-height: 1.45;                      /* token-check-allow: idem */
    letter-spacing: 0.06em;                 /* token-check-allow: idem */
    text-transform: uppercase;
    color: var(--pk-muted);
  }

  .pickup__inner {
    max-width: var(--pk-wide); margin: 0 auto;
    padding: var(--pk-6) var(--pk-4) var(--pk-10);
  }
  .pickup__title { margin: 0 0 var(--pk-5); text-wrap: balance; }
  .pickup__lead { margin: 0 0 var(--pk-6); }
  .pickup__h2 { margin: 0 0 var(--pk-4); }

  .pickup__card {
    margin: var(--pk-6) 0 var(--pk-8); padding: var(--pk-6) var(--pk-5);
    border: var(--pk-border) solid var(--pk-line);
    border-radius: var(--pk-radius);
    background: var(--pk-bg-alt); color: var(--pk-ink);
  }
  .pickup__card p { margin: 0 0 var(--pk-4); }

  .pickup__label { display: block; margin-bottom: var(--pk-3); }
  .pickup__field {
    width: 100%; max-width: 100%; box-sizing: border-box;
    min-height: var(--pk-tap);
    padding: var(--pk-3) var(--pk-4);
    font: inherit; font-size: 1rem;                        /* token-check-allow: idem */
    color: var(--pk-ink); background: var(--pk-white);
    border: var(--pk-border-md) solid var(--pk-ink);
    border-radius: 0;
  }
  .pickup__field:focus-visible { outline: 2px solid var(--pk-focus); outline-offset: 2px; }  /* token-check-allow: idem */

  /* Eén kolom op een telefoon, twee zodra het past. min-width 0 zodat een lang
     adres binnen zijn vakje blijft in plaats van de pagina breder te maken. */
  .pickup__grid { display: grid; gap: var(--pk-4); grid-template-columns: 1fr; }
  .pickup__grid > div { min-width: 0; }
  @media (min-width: 34em) {
    .pickup__grid--two { grid-template-columns: 1fr 1fr; }
  }

  .pickup__actions {
    display: flex; flex-wrap: wrap; gap: var(--pk-4);
    align-items: center; margin-top: var(--pk-5);
  }
  /* token-check-allow: eigen knop, want het live thema heeft geen button-snippet. */
  .pickup__btn {
    min-height: var(--pk-tap); padding: var(--pk-3) var(--pk-5);
    background: var(--pk-accent); color: var(--pk-on-accent);
    border: var(--pk-border-md) solid var(--pk-ink);
    border-radius: 0;
    font: inherit; font-size: 1rem; font-weight: 900;      /* token-check-allow: idem */
    letter-spacing: 0.02em;                                /* token-check-allow: idem */
    text-transform: uppercase; cursor: pointer;
  }
  .pickup__btn:hover { background: var(--pk-on-accent); color: var(--pk-accent); }
  .pickup__btn[disabled] { opacity: 0.6; cursor: progress; }
  .pickup__btn[disabled]:hover { background: var(--pk-accent); color: var(--pk-on-accent); }
  .pickup__plain {
    background: none; border: 0; padding: 0; color: inherit; font: inherit;
    cursor: pointer; text-decoration: underline; min-height: var(--pk-tap);
  }

  .pickup__hint { margin: var(--pk-2) 0 0; }
  .pickup__hint--error {
    color: var(--pk-bad); text-transform: none; letter-spacing: normal;
    font-size: 0.9375rem;                                  /* token-check-allow: idem */
  }

  .pickup__done {
    margin: 0 0 var(--pk-4); padding: var(--pk-4);
    background: var(--pk-white);
    border-left: 4px solid var(--pk-accent);               /* token-check-allow: idem */
  }
  .pickup__done p { margin: 0; }

  @media (min-width: 48em) {
    .pickup__inner { padding: var(--pk-6) var(--pk-5) var(--pk-10); }
  }
/* END_SECTION:delivery-address */

/* START_SECTION:pickup-party (INDEX:57) */
/* Deze sectie moet op twee thema's werken: op NOOCH DEV, dat het hele
     ontwerpsysteem heeft, en op NOOCH.EARTH WAITLIST, dat geen
     design-tokens.css en geen components.css kent.

     Daarom staat elke waarde hieronder als var(--token, terugval). Bestaat het
     token, dan wint het ontwerpsysteem. Bestaat het niet, dan valt hij terug op
     een eigen waarde en ziet de pagina er alsnog uit zoals bedoeld.

     Alle terugvalwaarden staan in dit ene blok, nergens anders. Zodra NOOCH DEV
     live is mag dit blok weg en blijft alleen var(--token) over. */
  .pickup {
    --pk-bg:        var(--color-bg, #fbfaf6);              /* token-check-allow: terugval voor het live thema zonder design system */
    --pk-bg-alt:    var(--color-bg-alt, #f2f0e8);          /* token-check-allow: idem */
    --pk-ink:       var(--color-text, #16170f);            /* token-check-allow: idem */
    --pk-muted:     var(--color-text-muted, #6b6a5e);      /* token-check-allow: idem */
    --pk-line:      var(--color-border, #d9d7cc);          /* token-check-allow: idem */
    --pk-line-soft: var(--color-border-subtle, #e6e4da);   /* token-check-allow: idem */
    --pk-accent:    var(--color-neon-green, #00ff00);      /* token-check-allow: idem; de knop is neon green met zwart erop, zoals de nieuwsbriefbalk */
    --pk-on-accent: var(--color-black, #000000);           /* token-check-allow: idem */
    --pk-white:     var(--color-white, #ffffff);           /* token-check-allow: idem */
    --pk-bad:       var(--color-error, #8f2214);           /* token-check-allow: idem */
    --pk-focus:     var(--color-focus, #16170f);           /* token-check-allow: idem */
    --pk-2: var(--space-2, 0.5rem);                        /* token-check-allow: idem */
    --pk-3: var(--space-3, 0.75rem);                       /* token-check-allow: idem */
    --pk-4: var(--space-4, 1rem);                          /* token-check-allow: idem */
    --pk-5: var(--space-5, 1.5rem);                        /* token-check-allow: idem */
    --pk-6: var(--space-6, 2rem);                          /* token-check-allow: idem */
    --pk-8: var(--space-8, 3rem);                          /* token-check-allow: idem */
    --pk-10: var(--space-10, 4.5rem);                      /* token-check-allow: idem */
    --pk-radius: var(--radius-md, 6px);                    /* token-check-allow: idem */
    --pk-border: var(--border-width, 1px);                 /* token-check-allow: idem */
    --pk-border-md: var(--border-width-md, 2px);           /* token-check-allow: idem; de dikke zwarte rand om veld en knop */
    --pk-tap: var(--touch-min, 44px);                      /* token-check-allow: idem */
    --pk-wide: var(--content-width-narrow, 42rem);         /* token-check-allow: idem */
    --pk-font: var(--font-body-family, inherit);           /* token-check-allow: idem */

    background: var(--pk-bg); color: var(--pk-ink);
    font-family: var(--pk-font);
  }

  /* Eigen typografie. Op NOOCH DEV staat de ladder in de weg van een sectie die
     ook elders moet draaien, dus hier een kleine eigen set. */
  .pk-hero {
    font-size: clamp(2rem, 6vw, 3.25rem);   /* token-check-allow: terugval voor het live thema zonder design system */
    line-height: 1.02;                      /* token-check-allow: terugval voor het live thema zonder design system */
    letter-spacing: -0.02em;                /* token-check-allow: terugval voor het live thema zonder design system */
    font-weight: 800;
    text-transform: uppercase;
  }
  .pk-heading { font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.2; font-weight: 700; }  /* token-check-allow: idem */
  .pk-body { font-size: 1rem; line-height: 1.55; }         /* token-check-allow: idem */
  .pk-strong { font-size: 1rem; line-height: 1.5; font-weight: 700; }        /* token-check-allow: idem */
  .pk-micro {
    font-size: 0.8125rem;                   /* token-check-allow: terugval voor het live thema zonder design system */
    line-height: 1.45;                      /* token-check-allow: terugval voor het live thema zonder design system */
    letter-spacing: 0.06em;                 /* token-check-allow: terugval voor het live thema zonder design system */
    text-transform: uppercase;
    color: var(--pk-muted);
  }
  .pickup__hint--error { color: var(--pk-bad); text-transform: none; letter-spacing: normal; }
  .pickup__ok { align-self: center; color: var(--pk-ink); font-weight: 700; }

  .pickup__inner {
    max-width: var(--pk-wide); margin: 0 auto;
    padding: var(--pk-6) var(--pk-4) var(--pk-10);
  }
  {%- comment -%}
    pk-6 en niet pk-8. De terugvalwaarden hierboven zijn klein (pk-8 = 3rem),
    maar op het live thema staat --space-8 op 6rem. Het gat tussen de hero en
    het formulier werd daar dus 96px, en dat is zoveel lucht dat het formulier
    onder de vouw begon te zakken. pk-6 is op het thema 48px.
  {%- endcomment -%}
  .pickup__hero { margin-bottom: var(--pk-6); }

  /* De illustratie: breed als de kolom. Geen mix-blend-mode, zie de toelichting
     bij het blok hierboven: die maakte het wit in de tekening doorzichtig. */
  .pickup__art { margin: 0 0 var(--pk-5); }
  .pickup__art-el { display: block; width: 100%; height: auto; }

  .pickup__title { margin: 0 0 var(--pk-5); text-wrap: balance; }

  .pickup__facts {
    margin: 0; padding: var(--pk-5) 0;
    border-top: var(--pk-border) solid var(--pk-line);
    border-bottom: var(--pk-border) solid var(--pk-line);
  }
  .pickup__maplink { color: inherit; }

  .pickup__h2 { margin: 0 0 var(--pk-4); }

  .pickup__card {
    margin: var(--pk-6) 0 var(--pk-8); padding: var(--pk-6) var(--pk-5);
    border: var(--pk-border) solid var(--pk-line);
    border-radius: var(--pk-radius);
    background: var(--pk-bg-alt); color: var(--pk-ink);
  }
  .pickup__label { display: block; margin-bottom: var(--pk-3); }

  /* Veld: wit, dikke zwarte rand, hoekig. Zelfde taal als de knop. */
  .pickup__field {
    width: 100%; max-width: 100%; box-sizing: border-box;
    min-height: var(--pk-tap);
    padding: var(--pk-3) var(--pk-4);
    font: inherit; font-size: 1rem;                        /* token-check-allow: terugval voor het live thema zonder design system */
    color: var(--pk-ink); background: var(--pk-white);
    border: var(--pk-border-md) solid var(--pk-ink);
    border-radius: 0;
  }
  .pickup__field::placeholder { color: var(--pk-muted); opacity: 1; }
  .pickup__field:focus-visible { outline: 2px solid var(--pk-focus); outline-offset: 2px; }  /* token-check-allow: idem */
  .pickup__hint { margin: var(--pk-2) 0 0; }

  /* Twee knoppen, even zwaar in gewicht maar niet in kleur: ophalen is de
     bedoeling, opsturen is de uitwijk. */
  /* stretch, niet center: "I'll pick them up at the party" breekt af op een
     smal scherm en "Ship them to me" niet. Zonder stretch is de ene knop dan
     een regel hoger dan de andere, en dan lijkt de keuze niet gelijkwaardig. */
  .pickup__actions {
    display: flex; flex-wrap: wrap; gap: var(--pk-4);
    align-items: stretch; margin-top: var(--pk-5);
  }
  .pickup__actions .pickup__btn { flex: 1 1 14rem; }        /* token-check-allow: terugval voor het live thema zonder design system */
  /* Ophalen of opsturen zijn de twee hoofdkeuzes en delen de breedte. Opslaan
     is dat niet: die knop hoort zo breed te zijn als zijn eigen woord, met de
     bevestiging ernaast in plaats van eronder. */
  .pickup__guests .pickup__actions .pickup__btn { flex: 0 0 auto; }
  /* token-check-allow: eigen knop, want het live thema heeft geen button-snippet.
     Neon green, zwarte tekst, kapitalen, dikke zwarte rand, hoekig. */
  .pickup__btn {
    min-height: var(--pk-tap); padding: var(--pk-3) var(--pk-5);
    background: var(--pk-accent); color: var(--pk-on-accent);
    border: var(--pk-border-md) solid var(--pk-ink);
    border-radius: 0;
    font: inherit; font-size: 1rem; font-weight: 900;      /* token-check-allow: idem */
    letter-spacing: 0.02em;                                /* token-check-allow: idem */
    text-transform: uppercase; cursor: pointer;
  }
  .pickup__btn:hover { background: var(--pk-on-accent); color: var(--pk-accent); }
  .pickup__btn[disabled] { opacity: 0.6; cursor: progress; }
  .pickup__btn[disabled]:hover { background: var(--pk-accent); color: var(--pk-on-accent); }
  .pickup__btn--ghost { background: var(--pk-white); color: var(--pk-ink); }
  .pickup__btn--ghost:hover { background: var(--pk-ink); color: var(--pk-white); }
  .pickup__plain {
    background: none; border: 0; padding: 0; color: inherit;
    cursor: pointer; text-decoration: underline; min-height: var(--pk-tap);
  }

  .pickup__boxes { list-style: none; margin: var(--pk-4) 0; padding: 0; }
  .pickup__box {
    display: flex; flex-wrap: wrap; gap: var(--pk-2) var(--pk-4);
    align-items: baseline; justify-content: space-between;
    padding: var(--pk-3) 0;
    border-bottom: var(--pk-border) solid var(--pk-line-soft);
  }
  .pickup__box-model { min-width: 0; font-weight: 700; }
  .pickup__box-size { white-space: nowrap; }

  .pickup__guests { margin-top: var(--pk-6); }
  .pickup__stepper { display: flex; align-items: stretch; }
  .pickup__step-btn {
    min-width: var(--pk-tap); min-height: var(--pk-tap);
    border: var(--pk-border-md) solid var(--pk-ink);
    border-radius: 0;
    background: var(--pk-white); color: var(--pk-ink);
    font: inherit; font-weight: 900; cursor: pointer;      /* token-check-allow: terugval voor het live thema zonder design system */
  }
  .pickup__step-btn:hover { background: var(--pk-ink); color: var(--pk-white); }
  /* de randen schuiven over elkaar, anders staat er een dubbele streep tussen */
  .pickup__count { max-width: 5rem; text-align: center; margin: 0 calc(var(--pk-border-md) * -1); }  /* token-check-allow: idem */
  /* De browser zet zelf ook nog een pijltje omhoog en omlaag in een
     type=number. Naast een min en een plus van 44 pixels is dat twee keer
     dezelfde knop, waarvan de ene te klein is om te raken. Weg ermee; het
     veld blijft numeriek, dus een telefoon geeft nog steeds cijfers. */
  .pickup__count::-webkit-outer-spin-button,
  .pickup__count::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .pickup__count { -moz-appearance: textfield; appearance: textfield; }

  .pickup__cancel { margin-top: var(--pk-5); }
  .pickup__practical, .pickup__faq { margin-top: var(--pk-8); }
  .pickup__practical > p { margin: 0 0 var(--pk-4); }
  .pickup__faq-item {
    padding: var(--pk-4) 0;
    border-bottom: var(--pk-border) solid var(--pk-line-soft);
  }
  .pickup__faq-q { cursor: pointer; }
  .pickup__faq-a { margin: var(--pk-3) 0 0; }

  @media (min-width: 48em) {
    .pickup__inner { padding: var(--pk-6) var(--pk-5) var(--pk-10); }
  }
/* END_SECTION:pickup-party */