/* Holy Moly order flow: Jost (body/UI), Brakle (headlines & actions) */
@font-face{
  font-family: 'Jost';
  src: url('fonts/Jost-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Jost';
  src: url('fonts/Jost-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Jost';
  src: url('fonts/Jost-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Brakle';
  src: url('fonts/Brakle-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Brakle';
  src: url('fonts/Brakle-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Brakle';
  src: url('fonts/Brakle-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  /* Breakpoints and min desktop size (must match .content min-height 880px so popover fills frame) */
  --desktop-w: 1400px;
  --desktop-min-h: 880px;
  --mobile-break: 1022px;

  /* Desktop padding for the red stage */
  --page-pad-x: 28px;
  --page-pad-y: 52px;

  /* Bars */
  --bar-top-h: 40px;
  --bar-bottom-h: 55px;
  --toolbar-extra-h: 56px; /* height of order-summary-bar when used in toolbar-container */

  /* Colors */
  --red: #BE1622;
  --black: #0b0b0b;
  --paper: #FFF7D8;
  --white: #ffffff;

  --btn-red: #BE1622;
  --btn-blue: #005093;

  --text: #0b0b0b;
  --muted: #6a6a6a;

  /* Effects */
  --shadow: 0 18px 40px rgba(0,0,0,0.35);

  /* Typography (see @font-face above) */
  --font-body: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Brakle', 'Jost', system-ui, -apple-system, sans-serif;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
html, body{ overflow-x: hidden; }

body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
}

input,
textarea,
select,
.control{
  font-family: var(--font-body);
}

body:before{
  background-color: var(--red);
}

.frame-rounded{
  border-radius: 30px;
}
.frame-rounded-top{
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}
/* Desktop stage */
.page{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: var(--page-pad-y) var(--page-pad-x);
  background: var(--red);
   background-image: url('asfalt-light-1.png');
}

/* Desktop frame:
   - min height 880 (matches .content so no gap when popover is shown)
   - grows if content needs more height
   - width rules unchanged
*/
.frame{
  position: relative;
  overflow: hidden;

  min-height: var(--desktop-min-h);
  margin-top: auto;
  margin-bottom: auto;
  width: min(
    var(--desktop-w),
    calc(100vw - (2 * var(--page-pad-x)))
  );

  background: var(--paper);
  box-shadow: var(--shadow);
}

/* Bars */
.bar{
  background: var(--black);
  color: var(--paper);
  font-family: var(--font-display);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 12px;

  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
}

.bar-top{
  height: var(--bar-top-h);
  top: 0;
  justify-content: space-between;
}

.bar-bottom{
  height: var(--bar-bottom-h);
  bottom: 0;
  justify-content: center;
  gap: 18px;
}
.bar-bottom--has-extra{
  flex-direction: column;
  height: auto;
  justify-content: stretch;
  gap: 0;
  padding: 0;
}
.bar-bottom__nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.bar-bottom--has-extra .bar-bottom__nav{
  height: var(--bar-bottom-h);
  flex-shrink: 0;
  padding: 0 14px;
}
.bar-bottom--has-extra .order-summary-bar{
  flex-shrink: 0;
}

.bar-left{
  display: flex;
  align-items: center;
  gap: 10px;
}
.bar-right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.icon{
  font-size: 18px;
  line-height: 1;
}

.timer{
  font-weight: 800;
  letter-spacing: 0.5px;
}

.icon-btn{
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.nav-btn{
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.nav-sep{
  width: 56px;
  height: 3px;
  background: rgba(255,255,255,0.25);
  border-radius: 99px;
}

/* Content area between bars:
   On desktop the frame can grow, so content should not be forced into a fixed window.
   We keep the same look, but make it normal flow and let the frame grow.
*/
.content{
  padding: calc(var(--bar-top-h) + 30px) 18px calc(var(--bar-bottom-h) + 30px);
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  min-height: 880px; /* needed for the option of having a bottom section */
}

/* Optional: fix content to default min height and make inner content (panel with text, list, etc.) scrollable. Add class content--fixed-scroll to the main.content element. */
@media (min-width: 1023px) {
  .content.content--fixed-scroll {
    max-height: var(--desktop-min-h);
    overflow: hidden;
  }
  .content.content--fixed-scroll > .panel {
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .content.content--fixed-scroll > .panel::-webkit-scrollbar {
    display: none;
  }
}

/* Desktop: toolbar in flow at bottom of content (like address page bar) */
@media (min-width: 1023px){
  .toolbar-container{
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .toolbar-container .bar-bottom{
    position: relative;
    flex-shrink: 0;
  }
  .content:has(.toolbar-container){
    padding-bottom: 30px;
  }
}

.panel{
  width: min(600px, 100%);
  padding: 48px;
  text-align: center;
}

/* Landing page only: keep content block and CTA block distributed over full available panel height. */
.panel--landing{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.panel--landing .center-block--landing-logo{
  margin-top: auto;
  margin-bottom: auto;
}
.panel--landing .center-block--landing-logo img{
  width: 225px;
  max-width: 100%;
    max-height: none;
  height: auto;
}
.panel--landing .padding-block{
  display: none;
}
.panel--landing .stick-bottom{
  margin-top: auto;
  padding-left: 0;
  padding-right: 0;
}

/* Address step: keep truck graphic at fixed height. */
.order-address-image{
  width: 225px;
  height: auto;
}

/* Login step image size */
.order-login-image{
  height: 200px;
  width: auto;
  margin-top: 10px;
}

/* Typography */
.title{
  margin: 0 0 10px 0;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.5px;
  font-size: 34px;
}

.title-two{
  margin: 0 0 10px 0;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.5px;
  font-size: 25px;
}

.subtitle{
  margin: 0 0 34px 0;
  font-weight: 800;
  letter-spacing: 0.3px;
  font-size: 14px;
}

.subtitle--hint{
  margin: -32px 0 22px 0;
  font-weight: 600;
  letter-spacing: 0.2px;
  font-size: 10px;
  opacity: 0.62;
}

/* Form */
.form{
  width: 100%;
  text-align: left;
  display: grid;
  gap: 22px;
}

.field{ width: 100%; }

/* Timeslot page: add a bit more vertical breathing room between date and time fields */
.timeslot-date{
  margin-bottom: 18px;
}

/* Calculator pages: keep inputs visually centered */
.panel--calculator .form{
  width: min(520px, 100%);
  margin-left: auto;
  margin-right: auto;
}
.panel--calculator .field{
  text-align: left;
}

.panel--calculator .calculator-order-meta{
  margin: 2px 0 10px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.panel--calculator .calculator-order-meta__row{
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.35em;
  row-gap: 0;
  font-size: 14px;
  letter-spacing: 0.2px;
  line-height: 1.3;
}
.panel--calculator .calculator-order-meta__label{
  font-weight: 900;
  font-family: var(--font-display);
  flex-shrink: 0;
}
.panel--calculator .calculator-order-meta__row--address{
  flex-direction: column;
  align-items: flex-start;
}
.panel--calculator .calculator-order-meta__row--address .calculator-order-meta__value{
  margin-top: 0;
  white-space: normal;
}

/* Phone step: single phone input with +31 default */
.field-phone .phone-input{
  width: 100%;
}

.cart-kortingscode{
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.cart-kortingscode .control{
  flex: 1;
  min-width: 120px;
}
.cart-kortingscode .btn{ flex-shrink: 0; }
.cart-kortingscode .btn-apply-code{
  background: var(--black);
}

.label{
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.3px;
  font-size: 14px;
  margin: 0 0 8px 0;
  text-transform: uppercase;
}

/* 52px total height including bottom line */
.control{
  width: 100%;
  height: 48px;
  font-size: 18px;
  padding: 0 12px;
  border: 0;
  border-bottom: 4px solid var(--black);
  background: rgba(255,255,255,0.92);
}

.control-select,
select.control{
  cursor: pointer;
  padding-right: 36px;
  appearance: auto;
}

/* Timeslot inputs: on some mobile browsers <select> can render narrower than full width.
   Force both controls to match field width. */
.timeslot-date,
.timeslot-select{
  display: block;
  width: 100% !important;
  max-width: 100% !important;
}
/* Calculator inputs: same sizing rules as timeslot controls */
.calc-date,
.calc-time{
  display: block;
  width: 100% !important;
  max-width: 100% !important;
}
select.timeslot-select{
  /* iOS Safari can ignore width:100% on native selects when appearance is auto */
  -webkit-appearance: none;
  appearance: none;
  min-width: 100% !important;
  max-width: 100% !important;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  background-color: rgba(255,255,255,0.92);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230b0b0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}

@media (max-width: 1022px){
  input[type="date"].timeslot-date{
    /* iOS Safari: native date control can overflow its container (looks wider than select).
       Normalize by removing native appearance and forcing sizing. */
    -webkit-appearance: none;
    appearance: none;
    min-width: 100% !important;
    max-width: 100% !important;
    color: var(--text);
    -webkit-text-fill-color: var(--text);
    line-height: 48px;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230b0b0b' d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h1V3a1 1 0 0 1 1-1Zm12 8H5v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V10ZM6 6a1 1 0 0 0-1 1v1h14V7a1 1 0 0 0-1-1H6Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
  }
}

/* Timeslot: mobile = native date; desktop = readonly display + modal calendar */
.timeslot-date-desktop{
  display: none;
}
.timeslot-date-mobile{
  display: block;
}
@media (min-width: 1024px){
  .timeslot-date-desktop{
    display: block;
  }
  .timeslot-date-mobile{
    display: none;
  }
  /* Readonly NL date (dd-mm-jjjj); opens centered modal — same row as other controls */
  input.timeslot-date.timeslot-date--display{
    -webkit-appearance: none;
    appearance: none;
    min-width: 100% !important;
    max-width: 100% !important;
    color: var(--text);
    -webkit-text-fill-color: var(--text);
    line-height: 48px;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230b0b0b' d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h1V3a1 1 0 0 1 1-1Zm12 8H5v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V10ZM6 6a1 1 0 0 0-1 1v1h14V7a1 1 0 0 0-1-1H6Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
    cursor: pointer;
  }
}

/* Centered modal for desktop timeslot date (order flow: black frame, display font) */
.timeslot-date-modal{
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.timeslot-date-modal[hidden]{
  display: none !important;
}
.timeslot-date-modal--open{
  display: flex !important;
}
.timeslot-date-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 11, 0.45);
  backdrop-filter: blur(2px);
}
.timeslot-date-modal__panel{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 340px;
  padding: 20px 20px 16px;
  background: var(--paper);
  border: 0;
  border-radius: 16px;
  border-bottom: 4px solid var(--black);
  box-shadow: 8px 16px 40px rgba(0,0,0,0.18);
  text-align: center;
}
.timeslot-date-modal__title{
  margin: 0 0 12px 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1.2;
}
.timeslot-date-modal__calendar{
  display: flex;
  justify-content: center;
  margin: 0 -4px 36px;
}
.timeslot-date-modal__close{
  width: 100%;
  margin-top: 10px;
}
.timeslot-date-modal__close.btn.btn-secondary{
  background: var(--black);
  color: var(--white);
  border: 0;
  border-bottom: 4px solid var(--black);
}
.timeslot-date-modal__close.btn.btn-secondary:hover,
.timeslot-date-modal__close.btn.btn-secondary:focus{
  filter: brightness(1.08);
}

/* Flatpickr only inside timeslot modal */
.timeslot-date-modal .flatpickr-calendar{
  font-family: var(--font-body);
  margin: 0 auto;
  border: 0;
  border-bottom: 4px solid var(--black);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding-bottom: 14px;
}
.timeslot-date-modal .flatpickr-months .flatpickr-month{
  background: transparent;
  color: var(--black);
}
.timeslot-date-modal .flatpickr-current-month .flatpickr-monthDropdown-months,
.timeslot-date-modal .flatpickr-current-month .numInputWrapper{
  font-weight: 700;
}
.timeslot-date-modal .flatpickr-weekdays{
  background: transparent;
}
/* Today (not the chosen day): blue */
.timeslot-date-modal .flatpickr-day.today:not(.selected){
  background: var(--btn-blue);
  border-color: var(--btn-blue);
  color: #fff;
}
/* Chosen date: red circle */
.timeslot-date-modal .flatpickr-day.selected,
.timeslot-date-modal .flatpickr-day.startRange,
.timeslot-date-modal .flatpickr-day.endRange{
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(190, 22, 34, 0.45);
}
.timeslot-date-modal .flatpickr-day.today.selected{
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.timeslot-date-modal .flatpickr-day:hover:not(.selected){
  background: rgba(0, 80, 147, 0.12);
  border-color: rgba(0, 80, 147, 0.35);
  color: var(--text);
}
.timeslot-date-modal .flatpickr-day.today:hover:not(.selected){
  background: #004a80;
  border-color: #004a80;
  color: #fff;
}
.timeslot-date-modal .flatpickr-day.selected:hover{
  background: #a0121c;
  border-color: #a0121c;
  color: #fff;
}
.timeslot-date-modal .flatpickr-arrow{
  fill: var(--black);
}

@media (max-width: 1022px){
  /* iOS Safari: normalize native date/time controls in calculator as well */
  input[type="date"].calc-date{
    -webkit-appearance: none;
    appearance: none;
    min-width: 100% !important;
    max-width: 100% !important;
    color: var(--text);
    -webkit-text-fill-color: var(--text);
    line-height: 48px;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230b0b0b' d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h1V3a1 1 0 0 1 1-1Zm12 8H5v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V10ZM6 6a1 1 0 0 0-1 1v1h14V7a1 1 0 0 0-1-1H6Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
  }
  input[type="time"].calc-time{
    -webkit-appearance: none;
    appearance: none;
    min-width: 100% !important;
    max-width: 100% !important;
    color: var(--text);
    -webkit-text-fill-color: var(--text);
    line-height: 48px;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 12px;
  }
}

.hint{
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
}

/* Buttons – fixed 43px. Explicit font so <button> and <a> look identical. */
.btn{
  width: 100%;
  height: 43px;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgb(255,255,255);

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 22px 22px 0 0;
}

/* Smaller button variant for bars (top nav) */
.btn.btn--bar{
  width: auto;
  min-width: 100px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.4px;
}
.btn.btn--bar .btn-label::after{ display: none; }

/* Menu top bar: buttons blend into bar (subtle outline) */
.btn.btn--bar.btn--bar-on-bar{
  background: var(--black) !important;
  border: 0;
}

.btn-primary{ background: var(--btn-red); }
.btn-primary.btn--disabled{
  background: var(--muted);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.7;
}
.btn-secondary{ background: var(--btn-blue); }
.btn-third{ background: black; }
.center-block{
  text-align: center;
  margin-top: 6px;
}

.center-block-spaced{
  margin-top: 24px;
}

/* Landing page: keep primary/secondary action buttons visually closer together. */
.form--landing-actions .center-block-spaced{
  margin-top: 10px;
}

.small-title{
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: 14px;
  margin-bottom: 10px;
}

.link{
  font-family: var(--font-display);
  color: var(--text);
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  letter-spacing: 0.4px;
}
.btn + .link{
  display: inline-block;
  margin-top: 14px;
}

.padding-block{
  height:60px;
  width:100%;
}

.stick-bottom{
  width: min(600px, 100%);
  padding: 0 48px 16px; /* optional, to visually match panel */
}
/* When the bottom bar has the extra (OVERZICHT), spacing is handled by content padding. */
/* Menu page only: extra bottom padding above the bar */
.stick-bottom--menu{
  padding: 0 48px 36px;
}

/* Narrow desktop: no red on sides */
@media (max-width: 1399px) and (min-width: 1023px){
  .page{
    padding-left: 0;
    padding-right: 0;
  }

  .frame{
    width: 100%;
    max-width: 100%;
  }


}

/* Mobile: unchanged behavior */
@media (max-width: 1022px){
  /* /order landing only: stretch panel to viewport content area. */
  .content:has(.panel--landing){
    /* Landing has no separate stick-bottom outside panel; remove shared extra bottom reserve. */
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
    height: 100vh;
    height: 100dvh;
    height: 100svh;
    padding-bottom: 8px;
    display: flex;
    flex-direction: column;
  }
  .content > .panel.panel--landing{
    align-self: stretch;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }

  .form--landing-actions{
    gap: 10px;
  }
  .form--landing-actions .center-block-spaced{
    margin-top: 10px;
  }

  body{
    background: var(--paper);
  }
  body::before{
    display: none;
  }

  .page{
    padding: 0;
    display: block;
    background: var(--paper);
  }

  .frame{
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    box-shadow: none;
  }

  .bar{
    position: fixed;
    left: 0;
    right: 0;
  }

  .bar-top{ top: 0; }
  .bar-bottom{
    bottom: 0;
    /* Mobile: allow safe-area padding without clipping icons */
    height: auto;
    min-height: var(--bar-bottom-h);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bar-bottom--has-extra .bar-bottom__nav{
    height: auto;
    min-height: var(--bar-bottom-h);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Bottom nav should never overflow the viewport on mobile.
     The separators can shrink to fit smaller widths. */
  .bar-bottom__nav{
    width: 100%;
    gap: 12px;
  }
  .nav-btn{
    padding: 8px 6px;
  }
  .nav-sep{
    width: auto;
    flex: 1 1 12px;
    min-width: 12px;
    max-width: 56px;
  }

  /* Toolbar container: fixed at bottom (order summary + bar_bottom), same as bezorgadres bar */
  .toolbar-container{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    z-index: 100;
  }
  .toolbar-container .bar-bottom{
    position: relative;
    flex-shrink: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .content:has(.toolbar-container){
    padding-bottom: calc(var(--toolbar-extra-h) + var(--bar-bottom-h) + env(safe-area-inset-bottom, 0px));
  }
  /* When bar has OVERZICHT (thicker), add gap so TERUG isn’t stuck to the bar */
  .content:has(.bar-bottom--has-extra){
    padding-bottom: calc(var(--bar-bottom-h) + var(--toolbar-extra-h) + 24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Content in flow so page can grow; min-height so stick-bottom at bottom when short. With box-sizing:border-box, min-height includes padding. 100svh for iOS; -46px (12 + 34) to remove ~30–40px scroll on iPhone Safari. Padding-bottom includes safe-area for home indicator. */
  .content{
    min-height: calc(100vh - 12px);
    min-height: calc(100dvh - 12px);
    min-height: calc(100svh - 46px);
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    /* Default: no top bar on many pages (menu); keep content close to top */
    padding: 8px 14px calc(var(--bar-bottom-h) + env(safe-area-inset-bottom, 0px));
  }
  /* When a top bar is present, offset content by bar height + 8px */
  .frame--has-bar-top .content{
    padding-top: calc(var(--bar-top-h) + 8px);
  }

  .content > .panel{
    width: min(720px, 100%);
    padding: 34px 22px;
    min-height: 0;
    overflow-y: visible;
    align-self: start;
    grid-row: 1;
  }

  .content > .stick-bottom{
    width: min(720px, 100%);
    padding: 0 24px 16px;
    align-self: end;
    grid-row: 2;
  }

  /* When a page renders the bottom icon bar inside stick-bottom (e.g. timeslot),
     move the VOLGENDE/TERUG block a bit closer to the bar on mobile. */
  .stick-bottom:has(.bar-bottom) .center-block-spaced{
    margin-bottom: -10px;
  }

  /* Desktop popover is 3rd child; keep it in row 1 so it doesn’t create a 3rd row and push stick-bottom down */
  /* Optional: fix content height and make panel scrollable (same as desktop content--fixed-scroll). */
  .content.content--fixed-scroll {
    /* Fill the viewport; reserve space for fixed bars via padding. */
    height: 100vh;
    height: 100dvh;
    height: 100svh;
    max-height: 100svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Stretch so the panel can use all available height/width */
    align-items: stretch;
    /* Top + bottom padding reserve space for fixed bars. */
    padding-top: 8px;
    padding-bottom: calc(var(--toolbar-extra-h) + var(--bar-bottom-h) + env(safe-area-inset-bottom, 0px));
  }
  .frame--has-bar-top .content.content--fixed-scroll{
    padding-top: calc(var(--bar-top-h) + 8px);
  }
  .content.content--fixed-scroll > .panel {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    max-width: 720px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .content.content--fixed-scroll > .panel::-webkit-scrollbar {
    display: none;
  }
  .content.content--fixed-scroll > .stick-bottom {
    flex-shrink: 0;
    /* stick-bottom only wraps the fixed footer here */
    padding-bottom: 0;
    height: 0;
  }

  .content > .popover--desktop{
    grid-row: 1 / 2;
    grid-column: 1;
  }

  .panel{
    width: min(720px, 100%);
    padding: 34px 22px;
  }

  /* Popover: same padding as .content on mobile, panel/stick-bottom match content width */
  .popover {
    padding: calc(var(--bar-top-h) + 18px) 14px calc(var(--bar-bottom-h) + 18px);
  }
  .popover .panel,
  .popover .stick-bottom {
    width: min(720px, 100%);
  }
  /* Order flow: smaller title on mobile so form/content is reachable */
  .page .frame .content .title {
    font-size: 29px;
  }
  .page .frame .content .panel--landing .center-block--landing-logo img{
    width: 225px;
    max-width: 100%;
    max-height: none;
    height: auto;
  }
}

/* Small phones */
@media (max-width: 520px){
  .panel{
    padding: 28px 18px;
  }

  .title{
    font-size: 30px;
  }

  .page .frame .content .title {
    font-size: 25px;
  }

  .control{
    font-size: 16px;
  }

  .nav-sep{
    width: 44px;
  }
}


/* =========================
   Warning components
   ========================= */

.alert{
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 4px;
}

.alert-warning{
  background: rgba(255,255,255,0.30);
  border: 1px solid rgba(179, 18, 28, 0.35);
  color: var(--btn-red);
}

.alert-icon{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex: 0 0 28px;

  background: rgba(179, 18, 28, 0.12);
  border: 1px solid rgba(179, 18, 28, 0.30);
  color: var(--btn-red);

  font-size: 16px;
  line-height: 1;
}

.alert-text{
  
  font-size: 16px;
  line-height: 1.35;
}

/* Small label helper like (VEREIST) */
.label-required{
  font-weight:500;
  color: var(--btn-red);
  font-size: 12px;
  letter-spacing: 0.3px;
  margin-left: 6px;
}

/* Field error state and inline message */
.field-error .control{
  border-bottom-color: var(--black);
}

.field-error-note{
  width: 100%;
  background: var(--btn-blue);
  color: var(--paper);
 
  font-size: 14px;

  padding: 10px 12px;

  margin-top: 0;
}
.field-error-note--danger{
  background: var(--btn-red);
  color: var(--white);
}


/* =========================
   Button hover animation (text-width underline)
   ========================= */

.btn{
  position: relative;
  overflow: hidden;
  transition: background-color 0.25s ease;
}

.btn-label{
  position: relative;
  display: inline-block;
}

/* underline exactly matching text width */
.btn-label::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;

  height: 2px;
  background: currentColor;

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

/* hover + focus */
.btn:hover{
  background-color: var(--black);
}

.btn:hover .btn-label::after{
  transform: scaleX(1);
}

.btn:focus-visible{
  outline: none;
  background-color: var(--black);
}

.btn:focus-visible .btn-label::after{
  transform: scaleX(1);
}



/* =========================
   Cart page: left/right columns (desktop)
   ========================= */

.cart-columns{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 1023px){
  .panel--cart{
    width: min(960px, 100%);
  }
  .cart-columns{
    display: grid;
    grid-template-columns: 1fr minmax(300px, 380px);
    gap: 32px 40px;
    align-items: start;
  }
  .cart-columns__left{
    min-width: 0;
  }
  .cart-columns__right{
    min-width: 0;
  }
  .cart-columns__right .bonnetje{
    margin-top: 0;
  }
}

.cart-columns__right .bonnetje{
  margin-top: 0;
}

/* =========================
   Bonnetje (order summary)
   ========================= */

.bonnetje{
  width: 100%;
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.bonnetje-title{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.4px;
}

.bonnetje-box{
  width: 100%;
  background: rgba(231,231,231,0.55);
  padding: 22px 20px;
}

.bonnetje-row{
  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.bonnetje-row + .bonnetje-row{
  margin-top: 6px;
}

.bonnetje-row-main{
  font-size: 20px;
  font-weight: 900;
}

.bonnetje-row-total{
  font-size: 20px;
  font-weight: 900;
}

.bonnetje-divider{
  height: 2px;
  background: var(--black);
  margin: 18px 0;
}

.bonnetje-note{
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.3px;
}


/* =========================
   Textarea control
   ========================= */

.control-textarea{
  height: auto;
  min-height: 180px;
  padding: 14px 12px;
  resize: vertical;
  line-height: 1.25;
}



/* =========================
   Radio cards
   ========================= */

.radio-group{
  width: 100%;
  display: grid;
  gap: 14px;
}

/* Card wrapper */
.radio-card{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;

  padding: 18px 16px;

  background: rgba(255,255,255,0.35);
  cursor: pointer;

  position: relative;
}

/* bottom underline instead of border */
.radio-card::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 3px;
  background: var(--black);
  opacity: 0.25;
}

/* Hide native radio */
.radio-card input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Custom radio dot */
.radio-ui{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid var(--muted);
  position: relative;
  flex-shrink: 0;
}

.radio-ui::after{
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: var(--btn-blue);
  opacity: 0;
}

/* Label */
.radio-label{
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.3px;
}

/* Icons */
.radio-icons{
  display: flex;
  gap: 8px;
  align-items: center;
}

.radio-icons img{
  height: 24px;
  width: auto;
  display: block;
}

/* Selected state */
.radio-card input:checked ~ .radio-ui{
  border-color: var(--btn-blue);
}

.radio-card input:checked ~ .radio-ui::after{
  opacity: 1;
}

.radio-card input:checked ~ .radio-label{
  color: var(--btn-blue);
}

.radio-card input:checked ~ .radio-icons{
  opacity: 1;
}

/* Hover */
.radio-card:hover{
  background: rgba(255,255,255,0.55);
}

/* Focus (keyboard) */
.radio-card input:focus-visible + .radio-ui{
  outline: 2px solid var(--btn-blue);
  outline-offset: 3px;
}



/** Some text stuff **/
.text-left{
  text-align: left;
}




/* =========================
   Verification code inputs
   ========================= */

.code-block{
  width: 100%;
  display: grid;
  gap: 14px;
}

.code-inputs{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.control-code{
  height: 48px;                 /* same as other inputs */
  font-size: 20px;
  font-weight: 900;

  text-align: center;           /* center text horizontally */
  line-height: 48px;            /* center text vertically */

  padding: 0;
  background: rgba(255,255,255,0.92);

  border: 0;
  border-bottom: 4px solid var(--black);
}

.control-code:focus{
  outline: none;
}

.control-code:focus-visible{
  outline: 2px solid rgba(11,79,137,0.5);
  outline-offset: 3px;
}

.code-resend{
  display: inline-block;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.4px;
  color: rgba(0,0,0,0.45);

  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}



/* =========================
   Button groups
   ========================= */

.btn-group{
  width: 100%;
  display: grid;
  gap: 14px;
}

/* 2 buttons */
.btn-group-2{
  grid-template-columns: repeat(2, 1fr);
}

/* 3 buttons */
.btn-group-3{
  grid-template-columns: repeat(3, 1fr);
}

/* ensure buttons fill their grid cell */
.btn-group .btn{
  width: 100%;
}

/* link buttons: no underline */
a.btn,
a.btn:hover,
a.btn:focus{
  text-decoration: none;
}







/* =========================
   Product selector
   ========================= */

.product-list{
  width: 100%;
  display: grid;
  gap: 26px;
}

/* Menu pages: decorative (non-draggable) right-side scroll cue */
.content.content--fixed-scroll{
  position: relative;
}
.menu-scroll-cue{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(calc(-50% - 30px));
  width: 16px;
  height: 430px;
  display: none;
  pointer-events: none;
  z-index: 3;
  opacity: 0.75;
}
.menu-scroll-cue__track{
  width: 100%;
  height: 100%;
  border: 2px solid rgba(190, 22, 34, 0.7);
  border-radius: 999px;
  background: rgba(190, 22, 34, 0.06);
  padding: 3px;
}
.menu-scroll-cue__thumb{
  width: 100%;
  height: 56px;
  border-radius: 999px;
  background: #be1622;
  box-shadow: 0 2px 8px rgba(190, 22, 34, 0.35);
  transform: translateY(0);
}

@media (max-width: 1022px){
  .menu-scroll-cue{
    display: none !important;
  }
}
@media (min-width: 1023px){
  .panel:has(.product-list){
    width: min(960px, 100%);
  }
  .panel:has(.product-list) .product-list{
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
    column-gap: 75px;
  }
}

.product-item{
  display: grid;
  /* Use minmax(0, 1fr) so long text can't force overflow
     and push the qty buttons outside the panel. */
  grid-template-columns: 86px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.product-item--highlight{
  background: rgba(190, 22, 34, 0.08);
  border: 1px solid rgba(190, 22, 34, 0.22);
  border-radius: 16px;
  padding: 10px 12px;
}

/* Full product description opens in popover (name + ingredients tap target) */
.product-detail-trigger{
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 8px;
}
.product-detail-trigger:focus-visible{
  outline: 2px solid var(--btn-blue);
  outline-offset: 2px;
}
.product-detail-trigger .product-title{
  display: block;
}

/* Pizza image */
.product-image{
  width: 86px;
  height: 86px;
  object-fit: cover;
  border-radius: 50%;
}
.product-list .product-item .product-image--open-detail{
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.product-list .product-item .product-image--open-detail:focus-visible{
  outline: 2px solid var(--btn-blue);
  outline-offset: 3px;
}

@media (max-width: 1022px){
  /* Mobile: shrink product images and reduce density */
  .panel:has(.product-list){
    /* Menu list feels cramped vs footer; align horizontal rhythm */
    padding-left: 8px;
    padding-right: 8px;
  }
  .product-list .product-item{
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
  }
  .product-list .product-item .product-image{
    width: 96px !important;
    height: 96px !important;
  }
  .product-title{
    font-size: 16px;
  }
  .product-desc{
    font-size: 12px;
    line-height: 1.25;
    line-clamp: 3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Inside <button>; must beat .product-detail-trigger defaults so line-clamp works */
  .product-detail-trigger .product-desc{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    min-width: 0;
  }
  .product-meta{
    justify-items: end;
    align-self: start;
  }
  .product-price{
    font-size: 16px;
  }
  .qty{
    gap: 4px;
  }
  .qty-btn{
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
}

/* Info */
.product-info{
  display: grid;
  gap: 4px;
  min-width: 0;
}

.product-title{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.4px;
}

.product-desc{
  font-size: 14px;
  color: var(--muted);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Price + quantity */
.product-meta{
  display: grid;
  justify-items: end;
  gap: 10px;
}

@media (min-width: 1023px){
  /* Desktop: align price with product title (top of row) */
  .product-item{
    align-items: start;
  }
  .product-meta{
    align-self: start;
  }
  /* Match mobile: truncated list text; full copy in popover */
  .product-list .product-desc{
    line-clamp: 3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .product-detail-trigger .product-desc{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    min-width: 0;
  }
}

.product-price{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
}

/* Quantity control */
.qty{
  display: flex;
  align-items: center;
  gap: 10px;
}

.qty-btn{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 0;

  background: var(--btn-red);
  color: var(--paper);

  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  cursor: pointer;

  display: grid;
  place-items: center;
}

.qty-value{
  min-width: 20px;
  text-align: center;
  font-weight: 900;
  font-size: 16px;
}

.qty-input{
  width: 32px;
  min-width: 32px;
  text-align: center;
  font-weight: 900;
  font-size: 16px;
  color: var(--text);
  border: 0;
  background: transparent;
  padding: 0;
  outline: none;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.qty-input[type=number]{
  -moz-appearance: textfield;
}

@media (max-width: 1022px){
  /* Mobile: override base qty sizing (must come after base rules) */
  .qty{
    gap: 4px;
  }
  .qty-btn{
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
  /* Use extra specificity so this cannot be overridden later */
  .product-list .qty-value{
    font-size: 14px !important;
    min-width: 10px !important;
  }
  .qty-input{
    width: 28px;
    min-width: 28px;
    font-size: 16px;
  }
}

/* Order summary bar (black bar above bottom nav) – background black, font color paper */
.order-summary-bar{
  width: 100%;
  background-color: var(--black);
  color: var(--paper);
  font-family: var(--font-display);
  padding: 14px 16px;
}
.order-summary-bar__inner{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
}
@media (min-width: 1023px){
  .order-summary-bar__inner{
    max-width: 504px;
    margin-left: auto;
    margin-right: auto;
  }
}
.order-summary-bar,
.order-summary-bar__left,
.order-summary-bar__right,
.order-summary-bar__label,
.order-summary-bar__count,
.order-summary-bar__total{
  color: var(--paper);
}
.order-summary-bar__left{ display: flex; flex-direction: column; gap: 2px; }
.order-summary-bar__label{ font-size: 12px; font-weight: 700; letter-spacing: 0.5px; opacity: 0.9; }
.order-summary-bar__count{ font-size: 14px; }
.order-summary-bar__right{ text-align: right; }
.order-summary-bar__total{ font-weight: 900; font-size: 18px; }

/* =========================
   Modal popup
   ========================= */

.modal{
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: grid;
  align-items: start;
  justify-items: center;

  padding: 22px 16px;
}

/* overlay */
.modal-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

/* card */
.modal-card{
  position: relative;
  width: min(480px, calc(100vw - 32px));
  background: var(--btn-blue);
  color: rgb(255,255,255);

  border-radius: 18px;
  padding: 26px 22px;

  display: grid;
  gap: 16px;
  justify-items: center;

  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

/* icon circle */
.modal-icon{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: var(--btn-blue);

  display: grid;
  place-items: center;

  font-size: 22px;
  font-weight: 900;
}

/* title */
.modal-title{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-align: center;
}

/* make primary button fill width inside modal */
.modal-btn{
  border-radius: 22px 22px 0 0;
  width: 100%;
}

/* close link style */
.modal-link{
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;

  color: rgb(255,255,255);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.4px;
  text-transform: uppercase;

  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* visibility helpers */
.is-hidden{
  display: none;
}

.is-shown{
  display: grid;
}

/* Desktop position: slightly above center */
@media (min-width: 1023px){
  .modal{
    align-items: center;
    padding: 0;
  }

  .modal-card{
    transform: translateY(-40px);
  }
}

/* Mobile position: top with spacing, not full width */
@media (max-width: 1022px){
  .modal{
    align-items: start;
    padding-top: 18px;
  }

  .modal-card{
    margin-top: 8px;
  }
}






/* =========================
   Payment picker v2
   Isolated, does not affect existing radio-card styles
   ========================= */

.payment-picker-v2{
  width: 100%;
  display: grid;
  gap: 14px;
}

/* label wrapper */
.pp-option{
  display: block;
  cursor: pointer;
}

/* hide native radio but keep it accessible */
.pp-radio{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* card */
.pp-card{
  width: 100%;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 16px;

  background: rgba(255,255,255,0.35);
  border: 2px solid rgba(11,11,11,0.55);

  border-radius: 0;
}

/* left side area */
.pp-left{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* right side text */
.pp-right{
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* logo images */
.pp-logo{
  height: 22px;
  width: auto;
  display: block;
}
.pp-logo-card{
  height: 20px;
}

/* simple text logo fallback */
.pp-textlogo{
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.3px;
  line-height: 1;
}

.pp-textlogo-small{
  font-size: 0.75em;
  margin-left: 4px;
}

/* hover */
.pp-option:hover .pp-card{
  background: rgba(255,255,255,0.55);
}

/* selected */
.pp-radio:checked + .pp-card{
  background: var(--btn-red);
  border-color: var(--btn-red);
}

.pp-radio:checked + .pp-card .pp-right,
.pp-radio:checked + .pp-card .pp-left{
  color: rgb(255,255,255);
}

.pp-radio:checked + .pp-card .pp-logo{
  filter: brightness(0) invert(1);
}

/* keyboard focus */
.pp-radio:focus-visible + .pp-card{
  outline: 2px solid var(--btn-blue);
  outline-offset: 4px;
}

/* smaller screens */
@media (max-width: 520px){
  .payment-picker-v2{
    gap: 12px;
  }

  .pp-card{
    height: 50px;
    padding: 0 14px;
  }

  .pp-logo{
    height: 18px;
  }
}



.icon-footer{
  height:40px;
  opacity: 0.5;
  transition: opacity 140ms ease;
}
.bar-bottom .nav-btn--active .icon-footer{
  opacity: 1;
}

.bar-bottom__desktop-logo{
  display: none;
}

@media (min-width: 1023px) {
  .bar-bottom__desktop-logo{
    display: block;
    position: absolute;
    left: 12px;
    bottom: 8px;
    max-height: calc(100% - 12px);
    opacity: 0.85;
    pointer-events: none;
    user-select: none;
  }
}

@media (max-width: 1022px) {
  .bar-bottom .icon-footer {
    height: 35px !important;
  }
}

/* Flash messages (type, title, text, image) – e.g. for popovers */
.flash { padding: 12px; border-radius: 8px; }
.flash--error { color: var(--btn-red); background: rgba(190, 22, 34, 0.08); }
.flash--success { color: #0a6b0a; background: rgba(10, 107, 10, 0.08); }
.flash--status,
.flash--info { color: var(--btn-blue); background: rgba(0, 80, 147, 0.08); }
.flash-title { display: block; margin-bottom: 4px; }
.flash-text { font-size: 0.95em; }

/* Content needs a positioning context when desktop popover is present (inset: 0). Mobile popover is in body; avoid affecting it. */
@media (min-width: 1023px) {
  .content--has-popover { position: relative; overflow: hidden; }
}

/* Popover: generic overlay, slide in from left (--open), slide out to right on close. Reusable across the order flow. */
.popover {
  background: var(--btn-blue);
  color: var(--white);
  box-sizing: border-box;
  transform: translateX(-100%);
  transition: transform 0.3s ease-out;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-content: start;
}
.popover--open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.3s ease-out, visibility 0s 0s;
}
.popover--closed {
  transform: translateX(100%);
  pointer-events: none;
  visibility: hidden;
  transition: transform 0.3s ease-out, visibility 0s 0.3s;
}
.popover--desktop {
  position: absolute;
  inset: 0;
  z-index: 9999;
  padding: calc(var(--bar-top-h) + 30px) 18px calc(var(--bar-bottom-h) + 30px);
  overflow: auto;
}
/* When the overzicht bar is visible (menu etc.), move popover content up so Sluiten is not behind it */
.frame--has-toolbar-extra .popover--desktop {
  padding-bottom: calc(var(--bar-bottom-h) + 30px + 50px);
}
/* Optional: fix desktop popover to content area height and make inner content scrollable. Add class popover--desktop-scroll to the desktop popover element. */
.popover--desktop.popover--desktop-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.popover--desktop-scroll .popover__layout {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.popover--desktop-scroll .popover .panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  width: min(600px, 100%);
}
.popover--desktop-scroll .popover .stick-bottom {
  flex-shrink: 0;
}
.popover--mobile {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  z-index: 9999;
  margin: 0;
  border: none;
  outline: none;
  padding: calc(var(--bar-top-h) - 20px) 18px calc(var(--bar-bottom-h) + 30px);
  overflow: auto;
}
.frame--has-toolbar-extra .popover--mobile {
  padding-bottom: calc(var(--bar-bottom-h) + 30px + 50px);
  /* Match page background so no red/blue bands around overlay */
  background: var(--paper);
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 1022px) {
  .popover--desktop { display: none !important; }
}
@media (min-width: 1023px) {
  .popover--mobile { display: none !important; }
}
.popover__layout {
  width: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  min-height: 0;
}
/* Mobile: fill overlay so grid has definite height and stick-bottom stays at bottom. Outer stays paper; type color on inner layout only. */
.popover--mobile .popover__layout {
  height: 100%;
  background: var(--btn-blue);
}
.popover--mobile.popover--error .popover__layout { background: var(--btn-red); }
.popover--mobile.popover--success .popover__layout { background: #0a6b0a; }
.popover--mobile.popover--info .popover__layout,
.popover--mobile.popover--status .popover__layout { background: var(--btn-blue); }
.popover .panel,
.popover .stick-bottom {
  width: min(600px, 100%);
}
.popover .panel .title {
  margin-bottom: 30px;
  font-family: var(--font-display);
}
.popover .subtitle.popover__text {
  margin-bottom: 30px;
  color: inherit;
  white-space: pre-wrap;
}
/* Out-of-region popover: two paragraphs; pull second block up by 30px */
.popover .popover__text--lead {
  margin-bottom: 0;
}
.popover .popover__text--follow {
  margin-top: -30px;
}
.popover .subtitle.popover__text.popover__text--empty {
  display: none;
  margin-bottom: 0;
}

/* Product detail popover: promo line (highlight) above ingredients */
.popover--menu-highlight .popover__highlight {
  margin: 0 0 12px 0;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.0625rem;
  letter-spacing: 0.25px;
  line-height: 1.35;
  color: inherit;
  white-space: pre-wrap;
}
.popover--menu-highlight .popover__highlight.popover__highlight--empty {
  display: none;
  margin: 0;
}
.popover--menu-highlight .subtitle.popover__ingredients {
  margin-top: 0;
  margin-bottom: 30px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2px;
}

.popover__image-wrap {
  margin-bottom: 24px;
}
.popover__image {
  /* Width comes from markup (default 200, overridable per popover via imageWidth). */
  max-width: 100%;
  height: auto;
}
.popover--menu-highlight .popover__image {
  width: 206px;
}
.popover--error { background: var(--btn-red); }
.popover--success { background: #0a6b0a; }
.popover--info { background: var(--btn-blue); }
.popover--status { background: var(--btn-blue); }