/* Dashboard. Erft de tokens uit style.css. */

.pk-dash { padding: clamp(2rem, 5vw, 3.5rem) 0 5rem; }

.pk-dash__head { margin-bottom: 2.5rem; }
.pk-dash__head h1 { font-size: var(--step-3); margin: 0; }

.is-hidden { display: none !important; }

/* --------------------------------------------------------------------------
   Stappen. De nummers dragen informatie: dit is een echte sequentie.
   -------------------------------------------------------------------------- */
.pk-step {
  border-top: 1px solid var(--line-soft);
  padding: 2rem 0;
}
.pk-step:first-of-type { border-top: 0; padding-top: 0; }

.pk-step__label {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.pk-step__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--brass);
}
.pk-step__label h2 { font-size: var(--step-2); margin: 0; }
.pk-step__opt {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--linen-faint);
  border: 1px solid var(--line);
  padding: 0.2rem 0.45rem;
  vertical-align: middle;
  margin-left: 0.5rem;
}
.pk-step__note {
  color: var(--linen-dim);
  font-size: 0.92rem;
  max-width: 42rem;
  margin: 0 0 1.25rem;
}

/* Keuzeknoppen */
.pk-choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.pk-choice__opt {
  background: var(--ink);
  border: 0;
  padding: 1.1rem 1.2rem;
  text-align: left;
  cursor: pointer;
  color: var(--linen-dim);
  font-family: inherit;
  transition: background-color 0.18s ease, color 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.pk-choice__opt:hover { background: var(--panel); color: var(--linen); }
.pk-choice__opt.is-active {
  background: var(--panel-2);
  color: var(--linen);
  box-shadow: inset 3px 0 0 var(--garnet-lift);
}
.pk-choice__title { font-size: 1rem; font-weight: 500; }
.pk-choice__sub {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--linen-faint);
}

.pk-panel { margin-top: 1.5rem; }

/* Upload */
.pk-drop {
  border: 1px dashed var(--line);
  background: var(--ink-2);
  padding: 2rem 1.25rem;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.pk-drop:hover, .pk-drop.is-over { border-color: var(--brass); background: var(--panel); }
.pk-drop--wide { padding: 1.5rem 1.25rem; }

.pk-drop__inner { display: flex; flex-direction: column; gap: 0.4rem; align-items: center; }
.pk-drop__icon { font-size: 1.6rem; color: var(--brass); line-height: 1; }
.pk-drop__text { font-size: 0.95rem; }
.pk-drop__hint {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--linen-faint);
}
.pk-drop__preview {
  margin: 1rem auto 0;
  max-height: 220px;
  width: auto;
  border: 1px solid var(--line);
}

.pk-thumbs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.pk-thumb { position: relative; width: 84px; height: 84px; border: 1px solid var(--line); }
.pk-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pk-thumb button {
  position: absolute;
  top: 2px; right: 2px;
  width: 22px; height: 22px;
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--linen);
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  padding: 0;
}

/* Acties */
/*
 * De knop in het midden, met de melding eronder.
 *
 * Dit was een rij die links begon, en op een telefoon plakte de knop daardoor
 * tegen de linkerrand terwijl hij de belangrijkste knop van het scherm is. De
 * melding stond ernaast en viel weg zodra hij niet meer paste.
 */
.pk-flow__actions {
  border-top: 1px solid var(--line-soft);
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.pk-btn--go {
  padding-inline: 2.2rem;
}

@media (max-width: 600px) {
  /* Volle breedte op een telefoon: makkelijker te raken dan een knop van
     tweehonderd pixels ergens in het midden. */
  .pk-btn--go {
    width: 100%;
  }
}
.pk-flow__meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--linen-faint);
}

/* --------------------------------------------------------------------------
   Voortgang: een glas dat volloopt.

   Het glas is een tekening, geen blokje met een uitsnede. Dat laatste gaf een
   trapezium zonder steel en zonder voet, en dat leest niet als een glas.

   Bij wijn een kelk op een steel; bij bier de taille van een weizenglas met een
   schuimkraag die meeloopt met het niveau.
   -------------------------------------------------------------------------- */
.pk-progress {
  padding: 3rem 0;
  text-align: center;
}

.pk-glas {
  width: 88px;
  margin: 0 auto 1.25rem;
}
.pk-glas__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Welke van de twee je ziet, hangt aan de omhulling. */
.pk-glas__svg--bier { display: none; }
.pk-progress.is-bier .pk-glas__svg--wijn { display: none; }
.pk-progress.is-bier .pk-glas__svg--bier { display: block; }

.pk-glas__lijn {
  fill: none;
  stroke: var(--line);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/*
 * De vloeistof is een rechthoek die alleen binnen het glas zichtbaar is. Door
 * de bovenkant te verplaatsen loopt hij mee met de vorm, ook waar het glas
 * smaller wordt.
 */
.pk-glas__vloeistof {
  fill: #e3cd88;
  transition: y 0.8s ease, height 0.8s ease;
}
.pk-progress.is-bier .pk-glas__vloeistof {
  fill: #eaa81f;
}

.pk-glas__schuim {
  fill: #f7f1e2;
  opacity: 0;
  transition: y 0.8s ease, opacity 0.4s;
}
.pk-progress.is-bier .pk-glas__schuim {
  opacity: 1;
}

.pk-glas__bel {
  fill: rgba(255, 255, 255, 0.6);
  opacity: 0;
}
.pk-progress.is-bier .pk-glas__bel {
  animation: pk-bel 2.6s linear infinite;
}
.pk-glas__bel:nth-child(1) { animation-delay: 0s; }
.pk-glas__bel:nth-child(2) { animation-delay: 0.9s; }
.pk-glas__bel:nth-child(3) { animation-delay: 1.7s; }

@keyframes pk-bel {
  0%   { transform: translateY(0); opacity: 0; }
  20%  { opacity: 0.7; }
  100% { transform: translateY(-90px); opacity: 0; }
}

/* Wie liever geen beweging ziet, krijgt die niet. */
@media (prefers-reduced-motion: reduce) {
  .pk-progress.is-bier .pk-glas__bel { animation: none; opacity: 0.35; }
  .pk-glas__vloeistof,
  .pk-glas__schuim { transition: none; }
}

.pk-progress__stage {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0;
}

/* Kleiner bij het uitlezen van een kaart of etiket. */
.pk-progress--klein {
  padding: 1.5rem 0 0;
}
.pk-progress--klein .pk-glas {
  width: 52px;
  margin-bottom: 0.8rem;
}

/*
 * De drie stappen als puntjes.
 *
 * Waar je bent en hoeveel er nog komt. Hier stond alleen een regel tekst, met
 * daarachter "(poging 2)" zodra een stap opnieuw werd aangetrapt, en dat leest
 * als een mislukking.
 */
.pk-stappen {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}
.pk-stappen__punt {
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  transition: background 0.3s;
}
.pk-stappen__punt.is-klaar {
  background: var(--brass);
}
.pk-stappen__punt.is-bezig {
  background: var(--brass);
  animation: pk-stap-puls 1.4s ease-in-out infinite;
}

@keyframes pk-stap-puls {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* --------------------------------------------------------------------------
   Resultaten. Signature: vloeistofkolom in de echte kleur van de drank,
   plus een dubbele schaal die laat zien waar gerecht en drank samenvallen.
   -------------------------------------------------------------------------- */
.pk-results { padding-top: 1rem; }

.pk-result__dish {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 1.5rem 0;
  margin-bottom: 2.5rem;
}
.pk-result__dish h2 { font-size: var(--step-2); margin: 0 0 0.35rem; }
.pk-result__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--linen-faint);
  margin: 0;
}

.pk-pick {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.5rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.pk-pick:first-of-type { border-top: 0; }

.pk-pick__column {
  position: relative;
  border-radius: 2px;
  min-height: 150px;
  align-self: stretch;
  overflow: hidden;
}
.pk-pick__column::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 40%);
}
.pk-pick__rank {
  position: absolute;
  top: 0.4rem;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: rgba(20, 16, 15, 0.7);
  z-index: 2;
}

.pk-pick__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  margin-bottom: 0.6rem;
}
.pk-pick__name { font-family: var(--font-display); font-size: var(--step-2); margin: 0; }
.pk-pick__type {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  border: 1px solid var(--line);
  padding: 0.2rem 0.45rem;
}
.pk-pick__headline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--amber-lift);
  margin: 0 0 0.9rem;
}
.pk-pick__why { color: var(--linen); margin: 0 0 1.1rem; max-width: 44rem; }
.pk-pick__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--linen-faint);
  margin: 0 0 1.25rem;
}

/* Dubbele schaal: gerecht en drank op dezelfde as */
.pk-scales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.9rem 1.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
}
.pk-scale__label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--linen-faint);
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}
.pk-scale__track {
  position: relative;
  height: 14px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}
.pk-scale__cell { background: var(--line-soft); position: relative; }
.pk-scale__cell.is-dish::before {
  content: "";
  position: absolute;
  inset: 0 0 50% 0;
  background: var(--linen-dim);
}
.pk-scale__cell.is-drink::after {
  content: "";
  position: absolute;
  inset: 50% 0 0 0;
  background: var(--amber);
}
.pk-scale__key {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--linen-faint);
  display: flex;
  gap: 1.25rem;
  padding-top: 0.4rem;
}
.pk-scale__key span { display: inline-flex; align-items: center; gap: 0.4rem; }
.pk-scale__key i { width: 14px; height: 6px; display: inline-block; }

.pk-pick__warn {
  margin: 1.1rem 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--garnet-lift);
  color: var(--linen-dim);
  font-size: 0.88rem;
}

.pk-results__again { padding: 2rem 0 0; }

/* Geschiedenis */
.pk-history { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--line-soft); }
.pk-history__title { font-size: var(--step-2); }
.pk-history__empty { color: var(--linen-faint); font-size: 0.92rem; max-width: 36rem; }
.pk-history__list { list-style: none; margin: 0; padding: 0; }
.pk-history__item {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.pk-history__swatch { width: 10px; height: 28px; border-radius: 1px; }
.pk-history__dish { font-size: 0.95rem; }
.pk-history__drink {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-lift);
}
.pk-history__date {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--linen-faint);
}

@media (max-width: 640px) {
  .pk-pick { grid-template-columns: 34px 1fr; gap: 1rem; }
  .pk-history__item { grid-template-columns: 10px 1fr auto; }
  .pk-history__drink { grid-column: 2; font-size: 0.62rem; }
}

.pk-pick__alts {
  font-size: 0.85rem;
  color: var(--linen-dim);
  margin: 0 0 1.2rem;
  padding-left: 0.9rem;
  border-left: 1px solid var(--line);
}

.pk-drop__actions {
  margin: 0.75rem 0 0;
  text-align: center;
}

/* Beoordeling. Bewust rustig: dit mag het advies niet overstemmen. */
.pk-fb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
}
.pk-fb__q {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--linen-faint);
  margin-right: 0.4rem;
}
.pk-fb__btn,
.pk-fb__reason {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--linen-dim);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.pk-fb__btn:hover,
.pk-fb__reason:hover {
  border-color: var(--brass);
  color: var(--linen);
}
.pk-fb__reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.3rem;
}
.pk-fb__done {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moss);
}

.pk-pick__weak {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  border: 1px solid var(--line);
  display: inline-block;
  padding: 0.3rem 0.6rem;
  margin: 0 0 0.8rem;
}

.pk-pick__label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moss);
  border: 1px solid var(--moss);
  padding: 0.2rem 0.45rem;
}

/* ==========================================================================
   Kelder
   ========================================================================== */

.pk-cellar {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.25rem 5rem;
}

.pk-cellar__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.pk-cellar__head h1 {
  margin: 0.2rem 0 0;
}

/* Samenvatting. Getallen groot, want dat is wat je in een oogopslag wilt zien. */
.pk-cellar__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 2rem;
}
.pk-stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.pk-stat strong {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--linen);
}
.pk-stat span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--linen-faint);
}

.pk-cellar__ready {
  margin-bottom: 2.5rem;
}
.pk-cellar__ready h2 {
  font-size: 1rem;
  margin: 0 0 0.9rem;
}

.pk-cellar__filters {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.pk-seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.pk-seg__btn {
  background: transparent;
  border: 0;
  color: var(--linen-dim);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}
.pk-seg__btn.is-active {
  background: var(--line-soft);
  color: var(--linen);
}

.pk-search input {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--linen);
  padding: 0.5rem 0.8rem;
  font-size: 0.85rem;
  min-width: 220px;
}

.pk-cellar__list {
  display: grid;
  gap: 0.9rem;
}
.pk-cellar__empty {
  color: var(--linen-faint);
  font-size: 0.9rem;
  padding: 2rem 0;
}

/* Een fles. De statusstreep links is het eerste wat je ziet. */
.pk-bottle {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.pk-bottle.is-now { border-left-color: var(--brass); }
.pk-bottle.is-ready { border-left-color: var(--moss); }
.pk-bottle.is-young { border-left-color: var(--line); }
.pk-bottle.is-past { border-left-color: #8a4b3a; }

.pk-bottle__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}
.pk-bottle__name {
  margin: 0;
  font-size: 1rem;

  /*
   * De naam wijkt, het merkje niet.
   *
   * Het merkje staat op nowrap en mag niet afbreken. Zonder deze twee regels
   * kan een lange flesnaam op een smal scherm niet krimpen, want een flexitem
   * krimpt standaard niet onder zijn inhoud. Dan duwt de naam het merkje van de
   * kaart af.
   */
  min-width: 0;
  overflow-wrap: anywhere;
}
.pk-bottle__status {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--linen-faint);
  white-space: nowrap;
  flex-shrink: 0;
}
.is-now .pk-bottle__status { color: var(--brass); }
.is-ready .pk-bottle__status { color: var(--moss); }
.is-past .pk-bottle__status { color: #b5705c; }

.pk-bottle__meta {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  color: var(--linen-dim);
}
.pk-bottle__window {
  margin: 0.55rem 0 0;
  font-size: 0.85rem;
  color: var(--linen-dim);
}
/* --------------------------------------------------------------------------
   De omgekeerde vraag: welke fles uit mijn kelder past hierbij.

   In de kelder een knop, op het dashboard een regel die vertelt dat er uit je
   eigen flessen wordt gekozen.
   -------------------------------------------------------------------------- */
.pk-kelderadvies {
  margin: 1.4rem 0 1.8rem;
  text-align: center;
}
/*
 * Het zinnetje onder een invoerveld.
 *
 * Werd gebruikt in het blad om een fles te zoeken en had geen opmaak: dan valt
 * het terug op de gewone tekstgrootte en leest het als deel van het formulier
 * in plaats van als toelichting.
 */
.pk-field__hint {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--linen-faint);
}

.pk-kelderadvies__hint {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--linen-dim);
}

.pk-kelderadvies__fles {
  margin-top: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius);
}
.pk-kelderadvies__naam {
  margin: 0 0 0.35rem;
  font-size: 0.98rem;
}
.pk-kelderadvies__waarom {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--linen-dim);
}

/* --------------------------------------------------------------------------
   Kiezen uit een uitgelezen menukaart.

   De omschrijving staat onder de naam en is niet versiering: brioche, bacon,
   cheddar en uiencompote bepalen het advies, de naam Black Angus burger zegt
   vrijwel niets. De gast ziet er meteen aan of de kaart goed is gelezen.
   -------------------------------------------------------------------------- */
.pk-menukeuze {
  margin-top: 1.1rem;
}
.pk-menukeuze__kop {
  margin: 0 0 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--linen-faint);
}
.pk-menukeuze__lijst {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 22rem;
  overflow-y: auto;
}
.pk-menukeuze__knop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: 100%;
  padding: 0.7rem 0.85rem;
  text-align: left;
  color: var(--linen);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.pk-menukeuze__knop:hover {
  border-color: var(--brass);
  background: rgba(180, 145, 85, 0.08);
}
.pk-menukeuze__naam {
  font-size: 0.92rem;
  font-weight: 600;
}
.pk-menukeuze__uitleg {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--linen-dim);
}

/* --------------------------------------------------------------------------
   Open deze eerst.

   Namen waarop je tikt om naar de kaart te springen, geen tweede set kaarten.
   Dat laatste was het namelijk, en dan heeft dezelfde fles twee keer een plus en
   een min. Tik je de ene aan, dan beweegt de andere mee.
   -------------------------------------------------------------------------- */
.pk-cellar__ready .pk-cellar__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.pk-ready__chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.45rem 0.8rem;
  text-align: left;
  font-size: 0.85rem;
  color: var(--linen);
  background: transparent;
  border: 1px solid var(--brass);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s;
}
.pk-ready__chip:hover {
  background: rgba(180, 145, 85, 0.12);
}
.pk-ready__chip.is-past {
  border-color: #8a4b3a;
}
.pk-ready__merk {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--linen-faint);
}

/*
 * Even oplichten wanneer je vanaf de snelkoppeling hierheen springt, anders weet
 * je niet waar je bent geland.
 */
.pk-bottle.is-aangewezen {
  border-color: var(--brass);
  box-shadow: 0 0 0 1px var(--brass);
  transition: box-shadow 0.3s, border-color 0.3s;
}

/* --------------------------------------------------------------------------
   De voet van een fleskaart.

   Twee zones onder elkaar. Boven staat wat je bezit: het aantal met een min en
   een plus, en helemaal rechts het kruisje om de fles weg te halen. Daaronder
   staat wat je ermee doet.

   Alles op een rij was op een telefoon niet te lezen: vijf knoppen naast elkaar
   op driehonderd pixels laat van elke knop een paar letters over.
   -------------------------------------------------------------------------- */
.pk-bottle__foot {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line-soft);
}

.pk-bottle__voorraad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.pk-bottle__teller {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.pk-bottle__stap {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  color: var(--linen-dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.pk-bottle__stap:hover:not(:disabled) {
  color: var(--linen);
  border-color: var(--brass);
}
.pk-bottle__stap:disabled {
  opacity: 0.3;
  cursor: default;
}
.pk-bottle__count {
  min-width: 5.5rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--linen-dim);
}

/*
 * Weghalen is onomkeerbaar, dus het kruisje staat aan de overkant van de rij en
 * blijft gedempt tot je erover gaat. Het raakvlak is groter dan wat je ziet,
 * want een kruisje van twaalf pixels is op een telefoon niet te raken.
 */
/*
 * Aanpassen en weghalen staan naast elkaar aan de rechterkant.
 *
 * Allebei dingen die je zelden doet, dus ze horen niet tussen de knoppen die je
 * vaak gebruikt. De marge duwt ze samen naar de overkant van de rij.
 */
.pk-bottle__wijzig {
  margin-left: auto;
  padding: 0.35rem 0.5rem;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--linen-faint);
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
}
.pk-bottle__wijzig:hover:not(:disabled) {
  color: var(--brass);
  opacity: 1;
}

.pk-bottle__weg {
  padding: 0.35rem 0.5rem;
  margin-right: -0.5rem;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--linen-faint);
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
}
.pk-bottle__weg:hover:not(:disabled) {
  color: #b5705c;
  opacity: 1;
}

.pk-bottle__acties {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.7rem;
}
.pk-bottle__acties .pk-btn {
  flex: 1;
  justify-content: center;
  text-align: center;
}
.pk-btn--tiny {
  font-size: 0.62rem;
  padding: 0.35rem 0.7rem;
}

/* --------------------------------------------------------------------------
   Fles toevoegen: een blad dat vanaf de onderkant opkomt, zoals in een app.
   De klassen hieronder staan los van de stappen op het dashboard, want die
   hebben een heel andere vorm en botsten met deze.
   -------------------------------------------------------------------------- */

/* Op een groot scherm hoort dit venster gewoon in het midden. Onderaan
   vastplakken is een patroon voor telefoons, waar je duim daar is. */
.pk-sheet {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 7, 0.75);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  z-index: 9999;
  overflow-y: auto;
}

.pk-sheet__inner {
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  animation: pk-sheet-in 0.2s ease-out;
}

@keyframes pk-sheet-in {
  from { transform: translateY(12px) scale(0.99); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Op een telefoon wel vanaf de onderkant, binnen duimbereik. */
@media (max-width: 600px) {
  .pk-sheet {
    align-items: flex-end;
    padding: 0;
  }
  .pk-sheet__inner {
    border-radius: 14px 14px 0 0;
    border-bottom: 0;
    max-height: 92vh;
  }
  @keyframes pk-sheet-in {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
}

.pk-sheet__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem 1.5rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.pk-sheet__head h2 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.2;
}
.pk-sheet__sub {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--linen-faint);
}
.pk-sheet__close {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  color: var(--linen-dim);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.pk-sheet__close:hover {
  border-color: var(--brass);
  color: var(--linen);
}

.pk-sheet__body {
  padding: 1.5rem;
  overflow-y: auto;
}

/* Elke stap is een kolom met vaste tussenruimte. Dat was het probleem:
   zonder deze regel liepen de keuzeknoppen en het fotovlak over elkaar heen. */
.pk-sheet__step {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.pk-sheet__step.is-hidden {
  display: none;
}

.pk-sheet__step .pk-seg {
  align-self: flex-start;
}

/* Het fotovlak. Groot genoeg om er met een duim op te mikken. */
.pk-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: 2rem 1.5rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.pk-photo:hover,
.pk-photo:focus-within {
  border-color: var(--brass);
  background: rgba(255, 255, 255, 0.02);
}
.pk-photo__icon {
  font-size: 1.5rem;
  color: var(--brass);
  line-height: 1;
}
.pk-photo__title {
  font-size: 0.95rem;
  color: var(--linen);
}
.pk-photo__hint {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--linen-faint);
  max-width: 34ch;
}

.pk-sheet__actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  margin-top: 0.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
}

/* Velden in het formulier. */
.pk-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}
.pk-field label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--linen-faint);
}
.pk-field input,
.pk-field select,
.pk-field textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--linen);
  padding: 0.6rem 0.75rem;
  font-size: 0.92rem;
  font-family: inherit;
  transition: border-color 0.18s ease;
}
.pk-field input:focus,
.pk-field select:focus,
.pk-field textarea:focus {
  outline: none;
  border-color: var(--brass);
}
.pk-field textarea {
  resize: vertical;
  min-height: 60px;
}
.pk-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

/* Het drinkvenster onder het stijlveld: dit is de uitkomst waar het om draait,
   dus die krijgt een eigen vlak in plaats van een grijs zinnetje. */
#pk-f-window:not(:empty) {
  margin: 0.15rem 0 0;
  padding: 0.6rem 0.75rem;
  border-left: 2px solid var(--brass);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--linen-dim);
}

.pk-note:empty {
  display: none;
}

/* --------------------------------------------------------------------------
   Meldingen met een toon.

   Hier ging alles door dezelfde grijze regel: bezig, gelukt, en mislukt zagen
   er precies hetzelfde uit. Iemand van wie het etiket niet gelezen kon worden
   zag een grijs zinnetje dat niet te onderscheiden was van "de kaart lezen", en
   wachtte dus op iets dat niet meer kwam.

   Drie tonen. Bezig blijft gedempt, want dat is geen nieuws. Een waarschuwing
   vraagt iets van de gebruiker en heeft een rand die dat laat zien. Een fout
   betekent dat er niets is gebeurd.
   -------------------------------------------------------------------------- */
.pk-note.is-bezig,
.pk-note.is-waarschuwing,
.pk-note.is-fout {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  margin: 0.7rem 0 0;
  padding: 0.7rem 0.85rem;
  font-size: 0.86rem;
  line-height: 1.45;
  text-align: left;
  border-radius: var(--radius);
  border-left: 3px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--linen-dim);
}
.pk-note.is-waarschuwing {
  border-left-color: var(--brass);
  background: rgba(180, 145, 85, 0.1);
  color: var(--linen);
}
.pk-note.is-fout {
  border-left-color: #b5705c;
  background: rgba(181, 112, 92, 0.12);
  color: var(--linen);
}

/* Het tekentje ervoor, zodat je het verschil ook ziet zonder te lezen. */
.pk-note.is-waarschuwing::before {
  content: '!';
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink, #1a1713);
  background: var(--brass);
  border-radius: 50%;
}
.pk-note.is-fout::before {
  content: '\00d7';
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: #fff;
  background: #b5705c;
  border-radius: 50%;
}
#pk-label-status:not(:empty),
#pk-form-status:not(:empty) {
  margin: 0;
  font-size: 0.85rem;
  color: var(--linen-dim);
  text-align: center;
}

.pk-cellar__locked {
  max-width: 560px;
  margin: 3rem auto;
  text-align: center;
}
.pk-cellar__sell {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 2rem;
  text-align: left;
  display: inline-block;
}
.pk-cellar__sell li {
  padding: 0.5rem 0 0.5rem 1.5rem;
  position: relative;
  color: var(--linen-dim);
  font-size: 0.9rem;
}
.pk-cellar__sell li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 8px;
  height: 8px;
  border: 1px solid var(--brass);
}

.pk-no-scroll {
  overflow: hidden;
}

@media (max-width: 600px) {
  .pk-cellar__head {
    flex-direction: column;
    align-items: stretch;
  }
  .pk-row {
    grid-template-columns: 1fr;
  }
  .pk-search input {
    min-width: 0;
    width: 100%;
  }
}

/* Kelderkaart op het dashboard. */
.pk-dash__quota {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--linen-faint);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pk-badge--pro {
  border: 1px solid var(--brass);
  color: var(--brass);
  padding: 0.15rem 0.4rem;
  font-size: 0.55rem;
  letter-spacing: 0.16em;
}

.pk-cellar-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin: 0 0 2rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease;
}
.pk-cellar-card:hover {
  border-color: var(--brass);
}
.pk-cellar-card__count {
  margin: 0.25rem 0 0;
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--linen);
}
.pk-cellar-card__note {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  color: var(--linen-dim);
}
.pk-cellar-card__arrow {
  color: var(--brass);
  font-size: 1.1rem;
}

/* Knopvarianten die de kelder gebruikt. */
.pk-btn--quiet {
  background: transparent;
  border: 0;
  color: var(--linen-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.4rem 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  align-self: center;
}
.pk-btn--quiet:hover {
  color: var(--linen);
}

.pk-cellar__intro {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--linen-dim);
  margin: 0.75rem 0 0;
}

/* ==========================================================================
   Gerecht bij een fles
   ========================================================================== */

.pk-pairing {
  max-width: 820px;
  padding-bottom: 5rem;
}
.pk-pairing__head {
  margin-bottom: 2rem;
}
.pk-pairing__head h1 {
  margin: 0.2rem 0 0;
}
.pk-pairing__sub {
  margin: 0.4rem 0 0;
  color: var(--linen-dim);
  font-size: 0.9rem;
}

.pk-pairing__pick {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 2rem;
}
.pk-pairing__pick .pk-seg {
  align-self: flex-start;
}

.pk-pairing__diet h2 {
  font-size: 1.05rem;
  margin: 0 0 0.9rem;
}
.pk-diet__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
  margin-bottom: 2.5rem;
}
.pk-diet__btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--linen-dim);
  padding: 0.9rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.pk-diet__btn:hover {
  border-color: var(--brass);
  color: var(--linen);
}
.pk-diet__btn.is-active {
  border-color: var(--brass);
  background: rgba(198, 156, 90, 0.08);
  color: var(--linen);
}

.pk-pairing__resultshead h2 {
  font-size: 1.15rem;
  margin: 0 0 1.25rem;
}

/* Een recept. Boodschappen links, stappen rechts, want zo gebruik je het. */
.pk-recipe {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.pk-recipe__head {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.pk-recipe__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--brass);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.pk-recipe__name {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.25;
}
.pk-recipe__summary {
  margin: 0.3rem 0 0;
  color: var(--linen-dim);
  font-size: 0.9rem;
}
.pk-recipe__facts {
  margin: 0.9rem 0 0;
  padding-left: calc(26px + 0.9rem);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--linen-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.pk-recipe__why {
  margin: 1rem 0 0;
  padding: 0.75rem 0.9rem;
  border-left: 2px solid var(--brass);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--linen-dim);
}
.pk-recipe__body {
  display: grid;
  grid-template-columns: minmax(200px, 0.8fr) 1.2fr;
  gap: 2rem;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
}
.pk-recipe__label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--linen-faint);
  margin: 0 0 0.7rem;
}
.pk-recipe__ingredients {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
}
.pk-recipe__ingredients li {
  /* Twee kolommen in plaats van naast elkaar zwevende blokken. Zo houdt de
     hoeveelheid zijn eigen ruimte en loopt hij niet over de naam heen, ook niet
     bij iets als 5 stuks (elk ca. 300 g). */
  display: grid;
  grid-template-columns: minmax(5.5rem, auto) 1fr;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--linen-dim);
}
.pk-recipe__ingredients li:last-child {
  border-bottom: 0;
}
.pk-recipe__amount {
  color: var(--linen);

  /* Wel afbreken wanneer het niet past. Nowrap duwde de tekst over de naam
     heen bij een lange hoeveelheid. */
  overflow-wrap: break-word;
  hyphens: auto;
}
.pk-recipe__steps {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--linen-dim);
}
.pk-recipe__steps li {
  padding: 0.2rem 0;
}
.pk-recipe__steps li::marker {
  color: var(--brass);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

@media (max-width: 700px) {
  .pk-diet__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pk-recipe__body {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .pk-recipe__facts {
    padding-left: 0;
  }
}

.pk-recipe__col {
  min-width: 0;
}
.pk-recipe__dot {
  color: var(--line);
}

/* Aantal personen boven de recepten. */
.pk-pairing__resultshead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.pk-pairing__resultshead h2 {
  margin: 0;
}
.pk-servings {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.pk-servings__label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--linen-faint);
}
.pk-servings__btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  color: var(--linen-dim);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.pk-servings__btn:hover {
  border-color: var(--brass);
  color: var(--linen);
}
.pk-servings__count {
  min-width: 1.4rem;
  text-align: center;
  font-size: 1.05rem;
  color: var(--linen);
}

/* Deelknoppen onder een recept. */
.pk-share {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
}
.pk-share__btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--linen-dim);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.pk-share__btn:hover {
  border-color: var(--brass);
  color: var(--linen);
}

/* ==========================================================================
   Afdrukken. De browser biedt hier zelf opslaan als PDF aan, op elke telefoon
   en elke computer. Dat scheelt een bibliotheek die op deze hosting toch niet
   te installeren is.
   ========================================================================== */

@media print {
  /* Alles weg wat niet bij het recept hoort. */
  .pk-header,
  .pk-footer,
  .pk-agecheck,
  .pk-nav,
  .pk-pairing__pick,
  .pk-pairing__diet,
  .pk-progress,
  .pk-share,
  .pk-servings,
  #wpadminbar {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #111 !important;
    font-size: 11pt;
  }

  .pk-shell,
  .pk-pairing {
    max-width: none;
    padding: 0;
    margin: 0;
  }

  /*
   * Bij het afdrukken van een enkel recept alles verbergen wat er niet bij
   * hoort.
   *
   * Niet alleen de andere recepten: ook de kop van de pagina, de lijst met wat
   * je eerder opvroeg, en de keuze voor een drank. Anders krijg je een lege
   * eerste pagina met kies een drank erop, en onderaan een lijst die niets met
   * dit recept te maken heeft.
   */
  .pk-printing .pk-recipe:not(.pk-print-this) {
    display: none !important;
  }
  .pk-printing .pk-pairing__head,
  .pk-printing .pk-pairing__resultshead h2,
  .pk-printing .pk-pairing__pick,
  .pk-printing .pk-pairing__diet,
  .pk-printing .pk-history,
  .pk-printing .pk-tabbar,
  .pk-printing .pk-preview-bar,
  .pk-printing .pk-proef {
    display: none !important;
  }

  

  /*
   * Noemen wat er weg moet, niet wat er mag blijven.
   *
   * De eerste poging verborg elk kind behalve het resultatenblok. Dat leek
   * netjes, maar de recepten zitten in een omhulsel binnen dat blok, en dat
   * omhulsel viel onder de regel: dan blijft er niets over en is de afdruk leeg.
   *
   * Opnoemen wat weg moet is minder elegant maar breekt niet wanneer de opbouw
   * verandert.
   */
  .pk-printing .pk-pairing__resultshead,
  .pk-printing .pk-notice {
    display: none !important;
  }

  .pk-printing .pk-print-this {
    page-break-before: avoid;
    page-break-after: avoid;
  }

  .pk-recipe {
    border: 0;
    padding: 0;
    margin: 0;
    page-break-inside: avoid;
  }

  .pk-recipe__num {
    display: none;
  }
  .pk-recipe__name {
    font-size: 20pt;
    color: #111;
    margin-bottom: 0.2rem;
  }
  .pk-recipe__summary,
  .pk-recipe__facts,
  .pk-recipe__steps,
  .pk-recipe__ingredients li {
    color: #333;
  }
  .pk-recipe__facts {
    padding-left: 0;
    border-bottom: 1pt solid #ccc;
    padding-bottom: 0.5rem;
  }
  .pk-recipe__why {
    border-left: 2pt solid #999;
    background: none;
    color: #333;
    font-style: italic;
  }
  .pk-recipe__body {
    border-top: 0;
    grid-template-columns: 1fr 1.4fr;
    gap: 1.5rem;
  }
  .pk-recipe__label {
    color: #111;
    border-bottom: 1pt solid #ccc;
    padding-bottom: 0.3rem;
  }
  .pk-recipe__ingredients li {
    border-bottom: 1pt dotted #ddd;
  }
  .pk-recipe__ingredients li {
    /* Op een smal scherm onder elkaar: naast elkaar blijft er te weinig over
       voor de naam. */
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
  .pk-recipe__amount {
    color: #111;
    font-weight: 600;
  }
  .pk-recipe__steps li::marker {
    color: #666;
  }

  /* Onderaan het blad waar het vandaan komt. */
  .pk-print-this::after {
    content: 'sipnificant.com';
    display: block;
    margin-top: 1.5rem;
    padding-top: 0.5rem;
    border-top: 1pt solid #ccc;
    font-size: 8pt;
    color: #888;
  }

  /* Het logo boven het recept. Alleen bij afdrukken zichtbaar: op het scherm
     staat het al in de header. */
  .pk-print-logo {
    display: block !important;
    max-width: 130px;
    height: auto;
    margin: 0 0 1.2rem;

    /* Nooit een eigen bladzijde: hij hoort boven het recept te staan. */
    page-break-after: avoid;
    page-break-inside: avoid;
  }

  a {
    color: #111;
    text-decoration: none;
  }
}

/* Het vergrendelde kelderscherm. */
.pk-cellar__sell {
  list-style: none;
  padding: 0;
  margin: 1.75rem auto 0;
  text-align: left;
  max-width: 30rem;
}
.pk-cellar__actions {
  margin: 2rem 0 0;
}
.pk-cellar__free {
  margin: 2.5rem auto 0;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-width: 30rem;
}
.pk-cellar__free p {
  margin: 0.5rem 0 1.25rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--linen-dim);
}
.pk-cellar__free .pk-eyebrow {
  margin: 0;
}

/* Het startscherm van de app. */
.pk-app-start {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ink);
  margin: 0;
  padding: 0;
}
.pk-start {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 26rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 2rem;
  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0));
  text-align: center;
}
.pk-start__top {
  padding-top: 2rem;
}
.pk-start__mark {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 2rem;
}
.pk-start__claim {
  font-size: 2rem;
  line-height: 1.15;
  margin: 0;
}
.pk-start__sub {
  margin: 1rem auto 0;
  max-width: 22rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--linen-dim);
}
.pk-start__actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 2.5rem;
}
.pk-start__actions .pk-btn {
  width: 100%;
  max-width: none;
}

/* De Google-knop moet er uitzien zoals mensen hem kennen. */
/* --------------------------------------------------------------------------
   Doorgaan met Google, boven een inlog- of registratieformulier.

   Google staat bovenaan omdat het de kortste weg is: een tik, geen wachtwoord,
   en meteen een bevestigd adres. Het formulier eronder blijft voor wie dat
   liever niet doet.
   -------------------------------------------------------------------------- */
.pk-auth__google {
  margin-bottom: 1.4rem;
}
.pk-auth__google .pk-start__google {
  width: 100%;
}

/* Een streep met het woord of erin, zodat duidelijk is dat het twee wegen zijn
   naar hetzelfde en geen stap een en stap twee. */
.pk-auth__of {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 1.1rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--linen-faint);
}
.pk-auth__of::before,
.pk-auth__of::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

/*
 * De knop om met Google door te gaan.
 *
 * Alles staat hier met een uitroepteken erachter, en dat is niet uit gemakzucht.
 * Dit is een anker, en in style.css krijgt elk anker een kleur en een
 * onderstreping bij zweven. Die regel staat in een ander bestand, en welke wint
 * hangt af van de volgorde waarin de twee worden geladen. Dat is te fragiel
 * voor het element waarop je hele registratie begint.
 *
 * Het is namelijk al een keer misgegaan: de inlogpagina laadde dit bestand
 * helemaal niet, en toen was de knop gewoon een gekleurd zinnetje.
 */
.pk-start__google {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  background: #fff !important;
  color: #1f1f1f !important;
  border: 0;
  border-radius: var(--radius);
  padding: 0.95rem 1rem;
  min-height: 52px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease;
}
.pk-start__google:hover {
  color: #1f1f1f !important;
  text-decoration: none !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.pk-start__google:active {
  transform: translateY(1px);
}
.pk-start__google:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}
.pk-start__glogo {
  display: flex;
  align-items: center;
}
.pk-start__of {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--linen-faint);
  margin: 0.35rem 0;
}
.pk-start__info {
  background: transparent;
  border: 0;
  color: var(--linen-faint);
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 0.9rem 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
}
.pk-start__info:hover {
  color: var(--linen);
}
.pk-start__legal {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--linen-faint);
  margin: 2rem 0 0;
}

.pk-info {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.25rem;
  text-align: left;
}
.pk-info li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.pk-info strong {
  color: var(--linen);
  font-size: 0.95rem;
}
.pk-info span {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--linen-dim);
}
.pk-info__note {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.85rem;
  color: var(--linen-faint);
  text-align: center;
}


/* Eerdere analyses: klikbaar en wisbaar. */
.pk-history__hint {
  font-size: 0.85rem;
  color: var(--linen-faint);
  margin: 0.35rem 0 1rem;
}
.pk-history__item {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
}
.pk-history__open {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  padding: 0.7rem 0.6rem;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  transition: background 0.15s ease;
}
.pk-history__open:hover {
  background: rgba(255, 255, 255, 0.03);
}
.pk-history__item.is-loading .pk-history__open {
  opacity: 0.5;
  pointer-events: none;
}
.pk-history__del {
  background: transparent;
  border: 0;
  color: var(--linen-faint);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 0.6rem;
  cursor: pointer;
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.pk-history__item:hover .pk-history__del,
.pk-history__del:focus {
  opacity: 1;
}
.pk-history__del:hover {
  color: #b5705c;
}

/* Op een telefoon is er geen hover, dus daar altijd tonen. */
@media (hover: none) {
  .pk-history__del {
    opacity: 0.6;
  }
}

.pk-earlier {
  margin: 0 0 1.25rem;
  padding: 0.6rem 0.9rem;
  border-left: 2px solid var(--brass);
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--linen-faint);
}

/* De knoppen om te kopen. Welk blok er komt bepaalt PHP, dus hier alleen de
   ruimte ertussen. Eerder stonden alle drie de varianten in de pagina met
   stijlregels die de verkeerde verborgen, en toen hielden die elkaar in
   evenwicht: er verscheen niets meer. */
.pk-koop > * + * {
  margin-top: 0.65rem;
}

/* Bericht na een geslaagde activering. */
.pk-welkom {
  border: 1px solid var(--brass);
  border-radius: var(--radius);
  background: rgba(198, 156, 90, 0.08);
  padding: 1.1rem 1.25rem;
  margin: 0 0 2rem;
}
.pk-welkom__titel {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}
.pk-welkom__tekst {
  margin: 0.4rem 0 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--linen-dim);
}

/* De twee abonnementen naast elkaar. Het jaar heeft de nadruk. */
.pk-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin: 0 0 1.75rem;
}
.pk-plan {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1rem 1.2rem;
  text-align: center;
}
.pk-plan.is-best {
  border-color: var(--brass);
  background: rgba(198, 156, 90, 0.06);
}
.pk-plan__badge {
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brass);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 3px;
  white-space: nowrap;
}
.pk-plan__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--linen-faint);
}
.pk-plan__price {
  margin: 0.5rem 0 0;
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--linen);
}
.is-best .pk-plan__price {
  color: var(--brass);
}
.pk-plan__cur {
  font-size: 1rem;
  vertical-align: super;
  margin-right: 0.1rem;
}
.pk-plan__per {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--linen-faint);
}

@media (max-width: 380px) {
  /*
   * Onder de 380 pixels passen twee knoppen naast elkaar niet meer zonder dat
   * het opschrift over twee regels breekt. Dan liever onder elkaar.
   */
  .pk-bottle__acties {
    flex-direction: column;
  }
  .pk-bottle__count {
    min-width: 4.5rem;
  }
}

@media (max-width: 420px) {
  .pk-plans {
    gap: 0.6rem;
  }
  .pk-plan {
    padding: 1.3rem 0.6rem 1rem;
  }
  .pk-plan__price {
    font-size: 1.5rem;
  }
}

/* Contact en juridische pagina's. */
.pk-contact,
.pk-legal {
  max-width: 780px;
  padding-bottom: 5rem;
}
.pk-contact__head,
.pk-legal__head {
  margin-bottom: 2.5rem;
}
.pk-contact__head h1,
.pk-legal__head h1 {
  margin: 0.2rem 0 0;
}
.pk-contact__sub {
  margin: 0.8rem 0 0;
  color: var(--linen-dim);
  line-height: 1.65;
  max-width: 34rem;
}
.pk-legal__date {
  margin: 0.6rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--linen-faint);
}

.pk-contact__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
.pk-contact__form {
  display: grid;
  gap: 1rem;
}
.pk-contact__side h2 {
  font-size: 0.95rem;
  margin: 0 0 0.7rem;
}
.pk-contact__side h2 + * {
  margin-top: 0;
}
.pk-contact__side > h2:not(:first-child) {
  margin-top: 1.75rem;
}
.pk-contact__tip {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--linen-faint);
  margin: 0 0 0.9rem;
}

.pk-company__block {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--linen-dim);
  margin: 0 0 1rem;
}
.pk-company__label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--linen-faint);
  display: inline-block;
  min-width: 4.5rem;
}

/* Het veld dat alleen een bot invult. */
.pk-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pk-contact__done {
  border: 1px solid var(--brass);
  border-radius: var(--radius);
  background: rgba(198, 156, 90, 0.08);
  padding: 1.5rem;
  text-align: center;
}
.pk-contact__donetitle {
  margin: 0;
  font-size: 1rem;
  color: var(--linen);
}
.pk-contact__donetext {
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
  color: var(--linen-dim);
}

/* Juridische tekst: smal en rustig, want dit wordt gelezen en niet gescand. */
.pk-legal__body {
  max-width: 42rem;
}
.pk-legal__body h2 {
  font-size: 1.1rem;
  margin: 2.5rem 0 0.8rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
}
.pk-legal__body h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.pk-legal__body h3 {
  font-size: 0.95rem;
  margin: 1.5rem 0 0.5rem;
  color: var(--linen);
}
.pk-legal__body p,
.pk-legal__body li {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--linen-dim);
  margin: 0 0 1rem;
}
.pk-legal__body ul {
  padding-left: 1.2rem;
  margin: 0 0 1rem;
}
.pk-legal__body li strong {
  color: var(--linen);
}
.pk-legal__company {
  border-left: 2px solid var(--brass);
  padding: 0.2rem 0 0.2rem 1rem;
  margin: 0 0 1.5rem;
}


@media (max-width: 700px) {
  .pk-contact__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ==========================================================================
   Account
   ========================================================================== */

.pk-account {
  max-width: 720px;
  padding-bottom: 5rem;
}
.pk-account__head {
  margin-bottom: 2rem;
}
.pk-account__head h1 {
  margin: 0.2rem 0 0;
}
.pk-account__mail {
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
  color: var(--linen-faint);
}

.pk-account__block {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.pk-account__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--linen-faint);
}
.pk-account__hint,
.pk-account__block p:not(.pk-account__label):not(.pk-note) {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--linen-dim);
  margin: 0.5rem 0 0;
}

.pk-account__planline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.pk-account__plan {
  margin: 0.4rem 0 0 !important;
  font-size: 1.1rem;
  color: var(--linen) !important;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.pk-account__until {
  font-size: 0.85rem;
  color: var(--linen-faint);
}
.pk-account__bars {
  display: grid;
  gap: 1rem;
}

.pk-account__cancel {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
}
.pk-account__steps {
  margin: 0.9rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--linen-dim);
}
.pk-account__steps li::marker {
  color: var(--brass);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

/* Taalkeuze. */
.pk-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}
.pk-lang {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--linen-dim);
  padding: 0.5rem 0.9rem;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  min-height: 40px;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.pk-lang:hover {
  border-color: var(--brass);
  color: var(--linen);
}
.pk-lang.is-active {
  border-color: var(--brass);
  background: rgba(198, 156, 90, 0.1);
  color: var(--linen);
}

.pk-account__data {
  list-style: none;
  padding: 0;
  margin: 0.9rem 0 0;
  display: grid;
  gap: 0.7rem;
}
.pk-account__data li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--line);
}
.pk-account__data strong {
  font-size: 0.9rem;
  color: var(--linen);
  font-weight: 500;
}
.pk-account__data span {
  font-size: 0.82rem;
  color: var(--linen-faint);
}

/* Verwijderen: onderaan, apart, en met een andere kleur. */
.pk-account__danger {
  border-color: rgba(181, 112, 92, 0.4);
}
.pk-account__warn {
  margin: 1rem 0 0;
  padding: 0.8rem 1rem;
  border-left: 2px solid #b5705c;
  background: rgba(181, 112, 92, 0.08);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--linen-dim);
}
.pk-btn--danger {
  border-color: rgba(181, 112, 92, 0.5);
  color: #b5705c;
  margin-top: 1.25rem;
}
.pk-btn--danger:hover {
  background: #b5705c;
  border-color: #b5705c;
  color: var(--linen);
}
.pk-btn--danger:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.pk-btn--danger:disabled:hover {
  background: transparent;
  color: #b5705c;
}

@media (max-width: 600px) {
  .pk-account__planline {
    flex-direction: column;
    align-items: flex-start;
  }
  .pk-account__block {
    padding: 1.25rem;
  }
}

/* Naam en adres kunnen langer zijn dan het scherm. Een e-mailadres heeft geen
   spaties, dus zonder deze regels loopt het er gewoon uit. */
.pk-account__name {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.pk-account__mail {
  overflow-wrap: anywhere;
  word-break: break-all;
}

.pk-account__logout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.pk-account__logout p:not(.pk-account__label) {
  margin-top: 0.4rem;
  max-width: 26rem;
}

@media (max-width: 600px) {
  .pk-account__name {
    font-size: 1.5rem;
  }
  .pk-account__logout {
    flex-direction: column;
    align-items: stretch;
  }
  .pk-account__logout .pk-btn {
    width: 100%;
  }
}

/* De regels in een keuzelijst.
   Een browser tekent die met zijn eigen achtergrond, niet met die van de pagina.
   Op een donker thema werd dat lichte tekst op wit: onleesbaar. Deze twee regels
   zetten beide kleuren, zodat het klopt met wat eromheen staat. */
select option {
  background: var(--ink);
  color: var(--linen);
}
select optgroup {
  background: var(--ink);
  color: var(--linen-faint);
  font-style: normal;
}

/* Op Windows tekent Chrome de gemarkeerde regel blauw met witte tekst. Dat
   contrast klopt, dus dat laten we staan. */

/* Het vierkante logo op het startscherm. Groot genoeg om het merk te dragen,
   klein genoeg om de knoppen zonder scrollen in beeld te houden. */
.pk-start__logo {
  display: block;
  width: 190px;
  max-width: 55vw;
  height: auto;
  margin: 0 auto 1.75rem;
}

@media (max-height: 700px) {
  .pk-start__logo {
    width: 140px;
    margin-bottom: 1.25rem;
  }
}

/* Proefaankoop. Duidelijk anders dan de echte knoppen, want dit is een
   oefening en mag nooit voor het echte werk worden aangezien. */
.pk-proef {
  margin-top: 2rem;
  padding: 1.1rem 1.25rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  text-align: left;
}
.pk-proef__kop {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--linen-faint);
}
.pk-proef p:not(.pk-proef__kop):not(.pk-note) {
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--linen-dim);
}
.pk-proef .pk-btn {
  margin-right: 0.5rem;
}

.pk-proef__uitleg {
  margin: 0.9rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--linen-faint);
}


/* Wat er na een proefaankoop werkelijk in de database staat. Zonder dit zie je
   alleen dat het scherm is ververst, en niet of er iets is gebeurd. */
.pk-proef__gelukt {
  margin: 0 0 0.8rem !important;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #00a67d;
}
.pk-proef__bewijs {
  border: 1px solid rgba(0, 166, 125, 0.3);
  background: rgba(0, 166, 125, 0.05);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0 0 1rem;
}
.pk-proef__bewijs dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  font-size: 0.85rem;
}
.pk-proef__bewijs dt {
  color: var(--linen-faint);
}
.pk-proef__bewijs dd {
  margin: 0;
  color: var(--linen);
}
.pk-proef__bewijs code {
  font-size: 0.72rem;
  color: var(--brass);
  background: transparent;
  padding: 0;
}
.pk-proef__wat {
  margin: 0 0 1rem !important;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--linen-dim);
}

/* Een proefabonnement is zichtbaar anders dan een echt, overal waar het staat. */
.pk-badge--proef {
  border-color: rgba(0, 166, 125, 0.5);
  color: #00a67d;
}

/* Een schakelaar voor aan en uit. */
.pk-toggle {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--linen-dim);
}
.pk-toggle input {
  width: 44px;
  height: 26px;
  appearance: none;
  background: var(--line);
  border-radius: 13px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex: none;
}
.pk-toggle input::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--linen-faint);
  transition: transform 0.2s ease, background 0.2s ease;
}
.pk-toggle input:checked {
  background: rgba(198, 156, 90, 0.35);
}
.pk-toggle input:checked::after {
  transform: translateX(18px);
  background: var(--brass);
}


/* Het logo dat alleen op een afdruk verschijnt.

   Het wordt vlak voor het afdrukken in de kaart gezet en daarna weer weggehaald,
   maar mocht dat laatste een keer misgaan, dan blijft het hier onzichtbaar. */
.pk-print-logo {
  display: none;
}





/* Een advies dat afwijkt van wat je meestal kiest.

   Zachter dan een waarschuwing: dit is geen bezwaar tegen de combinatie maar
   een opmerking over jou. */
.pk-pick__taste {
  margin: 0.6rem 0 0;
  padding: 0.55rem 0.8rem;
  border-left: 2px solid var(--brass);
  background: rgba(198, 156, 90, 0.07);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--linen-dim);
}

/* Het smaakprofiel op de accountpagina. */
.pk-taste {
  margin-top: 1rem;
}
.pk-taste__vraag {
  margin-bottom: 1.4rem;
}
.pk-taste__label {
  margin: 0 0 0.2rem;
  font-size: 0.9rem;
  color: var(--linen);
}
.pk-taste__hint {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--linen-faint);
}
.pk-taste__opties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pk-taste__knop {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--linen-dim);
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.pk-taste__knop:hover {
  border-color: var(--brass);
  color: var(--linen);
}
.pk-taste__knop.is-aan {
  border-color: var(--brass);
  background: rgba(198, 156, 90, 0.14);
  color: var(--brass);
}

/* Het merkje bij een functie die bij Pro hoort. */
.pk-badge--pro {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--brass);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
  vertical-align: middle;
}

/* ==========================================================================
   Het smaakprofiel van een drank.

   Balkjes in plaats van getallen. De kennisbank heeft negen assen per stijl en
   die bepalen elke match, maar tot nu toe zag niemand ze. Dit maakt zichtbaar
   dat er een systeem onder zit in plaats van een gok.
   ========================================================================== */

.pk-profile {
  display: grid;
  gap: 0.55rem;
  margin: 1rem 0;
}

.pk-profile__as {
  display: grid;
  grid-template-columns: 5.5rem 1fr 1.6rem;
  align-items: center;
  gap: 0.7rem;
}

.pk-profile__naam {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--linen-dim);
}

.pk-profile__balk {
  position: relative;
  height: 5px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}

.pk-profile__vul {
  display: block;
  height: 100%;
  border-radius: 3px;

  /* Een verloop in plaats van een vlakke kleur: dat leest als een schaal en
     niet als een vinkje. */
  background: linear-gradient(90deg, rgba(198, 156, 90, 0.45), var(--brass));
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.pk-profile__waarde {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--brass);
  text-align: right;
}

/* In een kleine kaart wat compacter. */
.pk-profile--compact {
  gap: 0.4rem;
  margin: 0.7rem 0 0;
}
.pk-profile--compact .pk-profile__as {
  grid-template-columns: 4.5rem 1fr 1.4rem;
  gap: 0.5rem;
}
.pk-profile--compact .pk-profile__naam {
  font-size: 0.72rem;
}
.pk-profile--compact .pk-profile__balk {
  height: 4px;
}

/* De praktische gegevens ernaast: temperatuur, alcohol, herkomst. */
.pk-facts {
  display: grid;
  gap: 0.5rem;
  margin: 1rem 0 0;
}

.pk-facts__rij {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.7rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line-soft);
}
.pk-facts__rij:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.pk-facts dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--linen-faint);
}

.pk-facts dd {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--linen-dim);
}

@media (max-width: 480px) {
  .pk-facts__rij {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* De knop die het profiel van een fles uitklapt. */
.pk-bottle__meer {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.7rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brass);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.pk-bottle__meer::after {
  content: '+';
  font-size: 0.9rem;
  line-height: 1;
  transition: transform 0.2s ease;
}
.pk-bottle__meer.is-open::after {
  transform: rotate(45deg);
}
.pk-bottle__meer:hover {
  color: var(--linen);
}

.pk-bottle__details {
  margin-top: 0.6rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line-soft);
}

/* Dezelfde uitklapknop bij een advies. */
.pk-pick__meer {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.8rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brass);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.pk-pick__meer::after {
  content: '+';
  font-size: 0.9rem;
  line-height: 1;
  transition: transform 0.2s ease;
}
.pk-pick__meer.is-open::after {
  transform: rotate(45deg);
}
.pk-pick__meer:hover {
  color: var(--linen);
}

.pk-pick__details {
  margin-top: 0.7rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.015);
}