/** Shopify CDN: Minification failed

Line 1676:13 Expected ":"
Line 1676:15 Expected identifier but found "36px"

**/
/* =========================
   HomePlate Design System
   ========================= */

/* =========================
   1. CSS variables (spacing, colors, grid)
   ========================= */
:root {
  /* Brand + UI colors */
  --hp-green: #123F0E;
  --hp-primary: #8A4064;
  --hp-primary-disabled: #BDBDBD;

  --hp-black: #000000;
  --hp-white: #ffffff;

  --hp-dark-grey: #3c3c3c;
  --hp-grey: #757575;
  --hp-light-grey: #BFBFBF;
  --hp-lighter-grey: #DBDBDB;

  --hp-required: #BF0202;

  --hp-brown: #2D1209;
  --hp-avocado: #EAFE6F;
  --hp-beige: #E4D2C2;

  /* Surfaces + text */
  --hp-bg: #FFFDF6;
  --hp-overlay: #00000060;
  --hp-text: var(--hp-black);

  /* Header */
  --hp-header-bg: var(--hp-green);
  --hp-header-text: var(--hp-white);

  /* Footer */
  --hp-sticky-footer-h: 72px;

  /* Buttons */
  --hp-btn-primary-bg: var(--hp-primary);
  --hp-btn-primary-text: var(--hp-white);
  --hp-btn-primary-hover-bg: var(--hp-black);

  --hp-btn-outline-border: rgba(255, 255, 255, 1);
  --hp-btn-outline-text: var(--hp-white);

  /* Borders + focus */
  --hp-border: var(--hp-light-grey);
  --hp-focus-ring: 0 0 0 1px var(--hp-brown);

  /* Radius */
  --hp-radius-6: 6px;
  --hp-radius-8: 8px;

  /* Box shadow */
  --shadow-sm: 0px 4px 4px rgba(0, 0, 0, 0.25);

  /* Grid defaults (desktop >=1024) */
  --hp-cols: 12;
  --hp-gutter: 20px;
  --hp-container-margin: 120px;
  --hp-container-max: calc(100vw - (2 * var(--hp-container-margin)));
}

/* Tablet (768–1023) */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --hp-cols: 12;
    --hp-gutter: 20px;
    --hp-container-margin: 48px;
    --hp-container-max: calc(100vw - (2 * var(--hp-container-margin)));
  }
}

/* Mobile (375–767) */
@media (min-width: 375px) and (max-width: 767px) {
  :root {
    --hp-cols: 8;
    --hp-gutter: 16px;
    --hp-container-margin: 24px;
    --hp-container-max: calc(100vw - (2 * var(--hp-container-margin)));
  }
}

/* Safety (<375) */
@media (max-width: 374px) {
  :root {
    --hp-cols: 8;
    --hp-gutter: 16px;
    --hp-container-margin: 16px;
    --hp-container-max: calc(100vw - (2 * var(--hp-container-margin)));
  }
}

/* =========================
   2. Layout system (container, grid, columns)
   Breakpoints:
   - Desktop: >= 1024px  | 12 cols | margin 120px | gutter 20px
   - Tablet:  768-1023px | 12 cols | margin 48px  | gutter 20px
   - Mobile:  375-767px  | 8 cols  | margin 24px  | gutter 16px
   ========================= */

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --hp-cols: 12;
    --hp-gutter: 20px;
    --hp-container-margin: 48px;
  }
}

/* Mobile */
@media (min-width: 375px) and (max-width: 767px) {
  :root {
    --hp-cols: 8;
    --hp-gutter: 16px;
    --hp-container-margin: 24px;
  }
}

/* Optional: <375px safety */
@media (max-width: 374px) {
  :root {
    --hp-cols: 8;
    --hp-gutter: 16px;
    --hp-container-margin: 16px;
  }
}

/* Container: consistent outer margins */
.hp-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--hp-container-margin);
  padding-right: var(--hp-container-margin);
  box-sizing: border-box;
}

/* Grid: your 12 or 8 column system */
.hp-grid {
  display: grid;
  grid-template-columns: repeat(var(--hp-cols), minmax(0, 1fr));
  column-gap: var(--hp-gutter);
  align-items: start;
}

/* Column span helpers (common) */
.hp-span-1 { grid-column: span 1; }
.hp-span-2 { grid-column: span 2; }
.hp-span-3 { grid-column: span 3; }
.hp-span-4 { grid-column: span 4; }
.hp-span-5 { grid-column: span 5; }
.hp-span-6 { grid-column: span 6; }
.hp-span-7 { grid-column: span 7; }
.hp-span-8 { grid-column: span 8; }
.hp-span-9 { grid-column: span 9; }
.hp-span-10 { grid-column: span 10; }
.hp-span-11 { grid-column: span 11; }
.hp-span-12 { grid-column: span 12; }

/* Start position helpers (useful for alignment) */
.hp-start-1 { grid-column-start: 1; }
.hp-start-2 { grid-column-start: 2; }
.hp-start-3 { grid-column-start: 3; }
.hp-start-4 { grid-column-start: 4; }
.hp-start-5 { grid-column-start: 5; }
.hp-start-6 { grid-column-start: 6; }
.hp-start-7 { grid-column-start: 7; }
.hp-start-8 { grid-column-start: 8; }
.hp-start-9 { grid-column-start: 9; }
.hp-start-10 { grid-column-start: 10; }
.hp-start-11 { grid-column-start: 11; }
.hp-start-12 { grid-column-start: 12; }

/* Centered content patterns */
.hp-center-8 {
  grid-column: 3 / span 8; /* centered 8 of 12 */
}

.hp-center-6 {
  grid-column: 4 / span 6; /* centered 6 of 12 */
}

.hp-center-4 {
  grid-column: 5 / span 4; /* centered 4 of 12 */
}

/* Mobile: centered blocks become full width by default */
@media (max-width: 767px) {
  .hp-span-9,
  .hp-span-10,
  .hp-span-11,
  .hp-span-12,
  .hp-center-8,
  .hp-center-6 {
    grid-column: 1 / -1;
  }
}

/* Optional: make anything full width regardless of grid spans */
.hp-full {
  grid-column: 1 / -1;
}

/* Debug overlay: add class "debug" to <body> */
body.debug .hp-grid {
  background-image: repeating-linear-gradient(
    to right,
    rgba(255, 0, 0, 0.06) 0,
    rgba(255, 0, 0, 0.06) calc((100% - (var(--hp-gutter) * (var(--hp-cols) - 1))) / var(--hp-cols)),
    transparent calc((100% - (var(--hp-gutter) * (var(--hp-cols) - 1))) / var(--hp-cols)),
    transparent calc(((100% - (var(--hp-gutter) * (var(--hp-cols) - 1))) / var(--hp-cols)) + var(--hp-gutter))
  );
}

/* =========================
   3. Global typography rules
   ========================= */
.hp-root {
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--hp-color-text, #000000);
}

/* Tokens (px values from your DLS) */
:root {
  --hp-h1-desktop: 32px; /* 32pt -> 42px */
  --hp-h1-mobile: 32px;  /* 24pt -> 32px */
  --hp-h2: 32px;         /* 24pt -> 32px */
  --hp-h3: 26px;         /* 20pt -> 26px */
  --hp-h4: 22px;         /* 16pt -> 22px */
  --hp-p: 19px;          /* 14pt -> 19px */
  --hp-p-support: 16px;  /* 12pt -> 16px */
  --hp-link: 12px;       /* 12pt -> 16px */

  --hp-lh-48: 48px;
  --hp-lh-36: 36px;
  --hp-lh-30: 30px;
  --hp-lh-24: 24px;
  --hp-lh-21: 21px;
  --hp-lh-18: 18px;

  --hp-letter-0: 0;

  --hp-space-0: 0;
  --hp-space-4: 4px;
  --hp-space-8: 8px;
  --hp-space-12: 12px;
  --hp-space-16: 16px;
  --hp-space-24: 24px;
  --hp-space-32: 32px;
  --hp-space-48: 48px;
  --hp-space-64: 64px;
}

/* Utility classes (recommended) */

.mt-8  { margin-top: var(--hp-space-8); }
.mt-16 { margin-top: var(--hp-space-16); }
.mt-24 { margin-top: var(--hp-space-24); }
.mt-32 { margin-top: var(--hp-space-32); }

.mb-8  { margin-bottom: var(--hp-space-8); }
.mb-16 { margin-bottom: var(--hp-space-16); }
.mb-24 { margin-bottom: var(--hp-space-24); }
.mb-32 { margin-bottom: var(--hp-space-32); }

.hp-h1 {
  font-size: var(--hp-h1-desktop);
  line-height: var(--hp-lh-48);
  letter-spacing: var(--hp-letter-0);
  font-weight: 700; 
  margin: 0;
}

.hp-h2 {
  font-size: var(--hp-h2);
  line-height: var(--hp-lh-36);
  letter-spacing: var(--hp-letter-0);
  font-weight: 400; /* Regular */
  margin: 0;
}

.hp-h3 {
  font-size: var(--hp-h3);
  line-height: var(--hp-lh-30);
  letter-spacing: var(--hp-letter-0);
  font-weight: 400; /* Regular */
  margin: 0;
}

.hp-h4 {
  font-size: var(--hp-h4);
  line-height: var(--hp-lh-24);
  letter-spacing: var(--hp-letter-0);
  font-weight: 400; /* Regular */
  margin: 0;
}

.hp-h4-bold {
  font-size: var(--hp-h4);
  line-height: var(--hp-lh-24);
  letter-spacing: var(--hp-letter-0);
  font-weight: 700; /* Bold */
  margin: 0;
}


.hp-p {
  font-size: var(--hp-p);
  line-height: var(--hp-lh-21);
  letter-spacing: var(--hp-letter-0);
  font-weight: 400; /* Regular */
  margin: 0;
}

.hp-p-support {
  font-size: var(--hp-p-support);
  line-height: var(--hp-lh-24);
  letter-spacing: var(--hp-letter-0);
  font-weight: 400; /* Regular */
  margin: 0;
}

.hp-p-emphasis {
  font-size: var(--hp-p-support);
  line-height: var(--hp-lh-24);
  letter-spacing: var(--hp-letter-0);
  font-weight: 700;      /* Bold */
  text-transform: uppercase;
  margin: 0;
}

.hp-link {
  font-size: var(--hp-link);
  line-height: var(--hp-lh-24);
  letter-spacing: var(--hp-letter-0);
  font-weight: 500; /* Medium */
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--hp-green);
}

/* h1 becomes 24pt (32px) on mobile */
@media (max-width: 767px) {
  .hp-h1 {
    font-size: var(--hp-h1-mobile);
    line-height: var(--hp-lh-36);
  }
}

.hp-text-center {
  text-align: center;
}

.hp-content-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
}

.hp-heading-paragraph-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  text-align: center;
}

/* Green emphasis words in the sentence */
.hp-pref-emph {
  color: var(--hp-green);
  font-weight: 700;
}


/* =========================
   4. Buttons and components
   ========================= */

/* Base button */
.hp-btn {
  appearance: none;
  border: 0;
  border-radius: 6px;
  padding: 8px 16px;     
  min-height: 34px;       
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 18px;     
  text-decoration: none;
  cursor: pointer;
  user-select: none; 
  transition: background-color 120ms ease, transform 120ms ease, opacity 120ms ease;
}

.hp-btn:active {
  transform: translateY(1px);
}

.hp-btn:focus {
  outline: none;
}

.hp-btn[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: none;
}
.hp-btn-primary[aria-disabled="true"] {
  background: var(--hp-primary-disabled);
}

/* Primary */
.hp-btn-primary {
  background: var(--hp-color-primary, #8A4064);
  color: #ffffff;
}

.hp-btn-primary:hover {
  background: var(--hp-black);
}

/* Disabled (support both patterns) */
.hp-btn:disabled,
.hp-btn[aria-disabled="true"] {
  cursor: not-allowed;
  transform: none;
  opacity: 1;
}

.hp-btn-primary:disabled,
.hp-btn-primary[aria-disabled="true"] {
  background: var(--hp-color-primary-disabled, #BDBDBD);
  color: #ffffff;
}

/* Secondary (outline) */
.hp-btn-secondary {
  background: transparent;
  color: var(--hp-white);
  border: 2px solid var(--hp-white);
}

.hp-btn-secondary:hover {
  background: var(--hp-black);
  border-color: var(--hp-black);
  color: var(--hp-white);
}

.hp-btn-secondary:disabled,
.hp-btn-secondary[aria-disabled="true"] {
  background: transparent;
  border-color: var(--hp-grey);
  color: var(--hp-grey);
  cursor: not-allowed;
  transform: none;
}

/* =========================
   Input Field Component
   ========================= */

.hp-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Question label */
.hp-field__label {
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--hp-black);
  margin: 0;
}

.hp-field__label--lg {
  font-size: 19px;
  line-height: 1.5;
  font-weight: 700;
}

.hp-field__required {
  color: var(--hp-required);
  margin-left: 2px;
}

/* Helper text */
.hp-field__helper {
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: var(--hp-black);
  margin: 0;
}

/* Base input */
.hp-field__input {
  width: 100%;
  box-sizing: border-box;

  background: var(--hp-white);
  color: var(--hp-black);

  border: 1px solid var(--hp-black);
  border-radius: 4px;

  padding: 12px 16px;
  font-size: 16px;
  line-height: 24px;

  outline: none;
}


/* Placeholder text */
.hp-field__input::placeholder {
  color: var(--hp-light-grey);
}

/* Hover */
.hp-field__input:hover {
  border-color: var(--hp-brown);
}

/* Focus styles */
.hp-field__input:focus-visible,
.hp-field__input:focus {
  border-color: var(--hp-brown);
  outline: none;
  box-shadow: none;
}

/* Mouse focus: no ring */
.hp-field__input:focus:not(:focus-visible) {
  border-color: var(--hp-brown);
  outline: none;
  box-shadow: none;
}

/* Error state */

/* Error row: reserve space always (prevents layout jump) */
.hp-field__error {
  min-height: 18px;
  margin: 0;

  font-size: 12px;
  line-height: 18px;
  font-weight: 400;

  color: var(--hp-required);
  visibility: hidden; /* keeps space but hides text when empty */
}

/* Show error text when error is present */
.hp-field[data-error="true"] .hp-field__error {
  visibility: visible;
}

/* Error border on input */
.hp-field[data-error="true"] .hp-field__input {
  border-color: var(--hp-required);
  box-shadow: none;
}

/* Variant: compact */
.hp-field--compact .hp-field__input {
  padding: 8px;
  font-size: 14px;
  line-height: 21px;
}

.hp-field--compact .hp-field__input::placeholder {
  font-size: 14px;
  color: var(--hp-light-grey);
}

.hp-field--compact .hp-field__helper {
  margin-top: 4px;
}

.hp-field--compact .hp-field__error {
  margin-top: 4px;
  font-size: 12px;
}

/* Date input: placeholder support */

/* Needed so ::before can render for the fake placeholder */
/* Remove the ::before fake placeholder entirely to prevent double line */
.hp-field__input[type="date"]::before {
  content: none;
}

/* Default: keep date text normal when valid */
.hp-field__input[type="date"] {
  background-color: var(--hp-white);
  color: var(--hp-black);
  cursor: pointer; /* feels like a date picker */
  -webkit-appearance: none;
  appearance: none;
}

.hp-field__input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

/* When empty/invalid: show the native date placeholder text in light grey */
.hp-field__input[type="date"]:invalid {
  color: var(--hp-light-grey);
}

/* WebKit (Chrome, Safari): style the internal date text segments */
.hp-field__input[type="date"]::-webkit-datetime-edit {
  color: var(--hp-black);
}

/* Empty/invalid should look like placeholder grey, even on focus */
.hp-field__input[type="date"]:invalid::-webkit-datetime-edit,
.hp-field__input[type="date"]:focus:invalid::-webkit-datetime-edit {
  color: var(--hp-light-grey);
}

/* Once a valid date exists, it becomes black */
.hp-field__input[type="date"]:valid::-webkit-datetime-edit {
  color: var(--hp-black);
}

/* =========================
   About You Page
   ========================= */

.hp-about-contact-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


/* =========================
   Intake Plan Cards
   ========================= */

.hp-plan-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  padding-top: 24px;
}

.hp-plan-grid__item {
  grid-column: span 4;
}

@media (max-width: 1023px) {
  .hp-plan-grid__item {
    grid-column: 1 / -1;
  }
}

.hp-plan-card {
  background: var(--hp-white);
  border-radius: var(--hp-radius-6);
  border: 1px solid rgba(0,0,0,0.18);
  box-shadow: var(--shadow-sm);
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  position: relative;
}

.hp-plan-card[aria-selected="true"] {
  border: 2px solid var(--hp-primary);
}

.hp-plan-card__badge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--hp-avocado);
  color: var(--hp-black);
  text-align: center;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 18px;
  font-weight: 400;
  border-top-left-radius: var(--hp-radius-6);
  border-top-right-radius: var(--hp-radius-6);
}

.hp-plan-card__title {
  font-size: 24px;
  line-height: 30px;
  font-weight: 400;
  margin: 0;
}

.hp-plan-card__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hp-plan-card__priceValue {
  font-size: 48px;
  line-height: 48px;
  font-weight: 400;
  color: var(--hp-green);
  margin: 0;
}

.hp-plan-card__perMeal {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: rgba(0,0,0,0.65);
  margin: 0;
}

/* =========================
   Checkbox Tile
   ========================= */

.hp-checktile {
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 16px;
  border-radius: 8px;

  background: var(--hp-white);
  border: 1px solid rgba(0,0,0,0.55);

  cursor: pointer;
  user-select: none;
}

/* Mobile: tighter padding */
@media (max-width: 767px) {
  .hp-checktile {
    padding: 12px;
  }
}

.hp-checktile__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.hp-checktile__box {
  width: 24px;
  height: 24px;
  border-radius: 4px;

  border: 2px solid var(--hp-dark-grey);
  background: transparent;

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

  flex: 0 0 auto;
}

.hp-checktile__label {
  font-size: 18px;
  line-height: 21px;
  font-weight: 400;
  color: var(--hp-dark-grey);
}

/* Show check only when checked */
.hp-checktile__check {
  display: none;
  width: 18px;
  height: 18px;
  color: var(--hp-white);
}

/* Selected state */
.hp-checktile__input:checked + .hp-checktile__box {
  border-color: rgba(255,255,255,0.9);
  background: var(--hp-brown);
}

.hp-checktile__input:checked + .hp-checktile__box .hp-checktile__check {
  display: block;
}

.hp-checktile__input:checked ~ .hp-checktile__label {
  color: var(--hp-white);
}

/* Selected tile background */
.hp-checktile:has(.hp-checktile__input:checked) {
  background: var(--hp-brown);
  border-color: var(--hp-brown);
}

/* Focus state (keyboard) */
.hp-checktile__input:focus-visible + .hp-checktile__box {
  border-color: var(--hp-brown);
}

/* Disabled state */
.hp-checktile.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* =========================
   Checkbox Tile (Inline variant)
   ========================= */

.hp-checktile--inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  min-height: 40px;
  width: 100%;

  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;

  width: fit-content;
  cursor: pointer;
}

/* Inline label: 12pt = 16px */
.hp-checktile--inline .hp-checktile__label {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--hp-dark-grey);
  margin: 0;
}

/* Keep the custom checkbox visual consistent with Figma */
.hp-checktile--inline .hp-checktile__box {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border-width: 2px;
}

/* Selected state */
.hp-checktile--inline:has(.hp-checktile__input:checked) {
  background: transparent;
  border-color: transparent;
}

.hp-checktile--inline .hp-checktile__input:checked ~ .hp-checktile__label {
  color: var(--hp-dark-grey);
}

.hp-checktile--inline .hp-checktile__input:checked + .hp-checktile__box {
  border-color: var(--hp-dark-grey);
  background: var(--hp-dark-grey);
}

.hp-checktile--inline .hp-checktile__check {
  color: var(--hp-white);
}

/* Hover/focus should only affect the checkbox */
.hp-checktile--inline:hover .hp-checktile__box {
  box-shadow: 0 0 0 1px var(--hp-grey);
}

/* .hp-checktile--inline:focus-within .hp-checktile__box {
  box-shadow: var(--hp-focus-ring);
} */

/* Disabled */
.hp-checktile--inline.is-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}


/* =========================
   Preferences option grid
   - Desktop/laptop: 4x2 for first 8, then 1 centered ("None")
   - Tablet: 2x4 for first 8, then 1 centered
   - Mobile: 2x4 for first 8, then 1 centered + tighter checkbox style
   ========================= */

/* Loading overlay */
.hp-overlay[hidden] { display: none; }

.hp-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--hp-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.hp-overlay__panel {
  background: rgba(255,255,255,0.92);
  border-radius: 8px;
  padding: 20px 18px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
}

.hp-overlay__title {
  margin: 10px 0 4px;
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
}

.hp-overlay__sub {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
}

/* Simple spinner */
.hp-overlay__spinner {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 3px solid rgba(0,0,0,0.18);
  border-top-color: rgba(0,0,0,0.7);
  margin: 0 auto;
  animation: hpSpin 0.9s linear infinite;
}

@keyframes hpSpin {
  to { transform: rotate(360deg); }
}

/* Wrapper inside your hp-center-8 container */
.hp-pref-grid {
  display: grid;
  justify-items: stretch;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.hp-pref-step { display: none; }
.hp-pref-step.is-active { display: block; }


.hp-pref-avoid-options-row-2 {
  display: grid;
  justify-items: stretch;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Desktop only: soften width of bottom-row tiles */
@media (min-width: 1024px) {
  .hp-pref-avoid-options-row-2 .hp-checkbox-tile {
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* Desktop/laptop default: 4 columns (8 items = 2 rows), then None row */
@media (min-width: 1024px) {
   .hp-pref-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Make row 2 span across all 4 columns of the parent grid */
  .hp-pref-grid[data-hp-pref-group="allergies"] .hp-pref-avoid-options-row-2 {
    grid-column: 1 / -1;
  }

  /* IMPORTANT: inside row 2, "None" should behave like a normal grid cell */
  .hp-pref-grid[data-hp-pref-group="allergies"] .hp-pref-avoid-options-row-2 .hp-pref-grid__none {
    grid-column: auto;
    display: block;
    justify-content: initial;
  }

  .hp-pref-grid[data-hp-pref-group="allergies"] .hp-pref-avoid-options-row-2 .hp-pref-grid__none .hp-checkbox-tile {
    width: 100%;
  }

  /* Keep your original behavior for other None rows */
  .hp-pref-grid__none {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
  }

  .hp-pref-grid__none .hp-checkbox-tile {
    width: min(420px, 100%);
  }
}

/* Tablet: 2 columns (8 items = 4 rows), then None row */
@media (min-width: 768px) and (max-width: 1023px) {
  .hp-pref-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hp-pref-grid__none {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
  }

  .hp-pref-grid__none .hp-checkbox-tile {
    width: min(420px, 100%);
  }
}

/* Mobile: 2 columns (8 items = 4 rows), then None row */
@media (max-width: 767px) {
  .hp-pref-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px; /* matches your mobile screenshot spacing better */
  }

  .hp-pref-grid__none {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
  }

  .hp-pref-grid__none .hp-checkbox-tile {
    width: min(320px, 100%);
  }

  /* Switch tiles to the tighter mobile variant */
  .hp-pref-grid .hp-checkbox-tile {
    padding: 16px 16px;
    border-radius: var(--hp-radius-8);
  }

  .hp-pref-grid .hp-checkbox-tile__box {
    width: 16px;
    height: 16px;
  }

  .hp-pref-grid .hp-checkbox-tile__label {
    font-size: 14px;
    line-height: 21px;
  }
}

/* Optional: if you want perfect equal heights across a row */
.hp-pref-grid .hp-checkbox-tile {
  height: 100%;
}

.hp-mp-meals-title {
  font-size: 24px;
  line-height: 36px;
  text-align: left;
  color: var(--hp-green);
  font-weight: 700;
  margin: 0;
}

.hp-mp-grid {
  display: grid;
  width: 100%;
  gap: 16px;

  /* Always 2 columns */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Preferences section */
.hp-mp-prefs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
}

.hp-pill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
}

/* ============== Pills ============== */
.hp-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--hp-light-grey);
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
}

.hp-pill__text {
  white-space: nowrap;
}

/* Dismissible Pill Variant */
.hp-pill--dismissible {
  display: flex;             
  width: fit-content;               
  padding: 4px 12px 4px 8px;
  gap: 8px;                   
  justify-content: space-between;
}

.hp-pill__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  width: 16px;
  height: 16px;

  border: 0;
  border-radius: 999px;
  background: transparent;

  color: rgba(0,0,0,0.6);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;

  padding: 0;
}

.hp-pill__close:hover {
  background: var(--hp-grey);
  color: var(--hp-black);
}

.hp-pill__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--hp-brown);
}

/*  ============== Meal Preview ==============  */
.hp-mp-changes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  color: var(--hp-green, #114411);
  text-decoration: underline;
  font-weight: 700;
  font-size: 14px;
}

.hp-mp-delivery {
  background: var(--hp-beige);
  border-radius: 8px;
  /* box-shadow: var(--shadow-sm); */
  padding: 16px 16px;
}

.hp-field--delivery {
  gap: 8px;
}

/* Order Summary block */
.hp-mp-summary {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hp-mp-summary__title {
  font-size: 20px;
  font-weight: 700;
  margin: 0px;
}

/* Rows */
[hidden] {
  display: none !important;
}

.hp-mp-summary__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hp-mp-summary__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 16px;
}

.hp-mp-summary__label {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.hp-mp-summary__value {
  font-size: 14px;
  line-height: 21px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.hp-mp-summary__sub {
  font-size: 12px;
  line-height: 24px;
  font-weight: 400;
  color: var(--hp-grey);
  margin-left: 8px;
  white-space: nowrap;
}

/* Divider line */
.hp-mp-summary__divider {
  height: 1px;
  background: var(--hp-grey);
}

/* Total row */
.hp-mp-summary__total {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: auto;
}

.hp-mp-summary__totalLabel {
  font-size: 24px;
  font-weight: 700;
}

.hp-mp-summary__totalRight {
  display: flex;
  align-items: baseline;
  gap: 18px;
  justify-content: flex-end;
}

.hp-mp-summary__totalOld {
  font-size: 28px;
  line-height: 32px;
  font-weight: 600;
  opacity: 0.65;
  text-decoration: line-through;
  white-space: nowrap;
}

.hp-mp-summary__totalValue {
  font-size: 24px;
  font-weight: 700;
  color: var(--hp-green);
  white-space: nowrap;
}

.hp-mp-discount__row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

/* Make input fill remaining space */
.hp-mp-discount__row .hp-field {
  flex: 1 1 auto;
  min-width: 0;
}

/* Make secondary button match input height */
.hp-mp-discount__apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 8px 16px;
}

/* Discount apply button override */
.hp-btn--discount {
  color: var(--hp-black);
  border: 2px solid var(--hp-black);
  background: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover + focus */
.hp-btn--discount:hover,
.hp-btn--discount:focus-visible {
  background: var(--hp-black);
  color: #fff;
  border-color: var(--hp-black);
}

/* Disabled state */
.hp-btn--discount[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}




/* =========================
   Meal Preview: 2 columns inside hp-center-8
   Left 4 cols + Right 4 cols (of the 12-col grid)
   ========================= */

/* Put the whole layout into the centered 8 columns */
.hp-mp-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 24px;

  /* Centered 8 on a 12-col grid */
  grid-column: 3 / span 8;
}

/* Left column = 4 cols */
.hp-mp-layout__left {
  grid-column: 3 / span 5;
  min-width: 0;
}

/* Right column = 4 cols */
.hp-mp-layout__right {
  grid-column: 8 / span 3;
  min-width: 0;
}

/* Meal list stack */
.hp-mp-list {
  display: grid;
  padding-top: 16px;
}

/* Right side stack */
.hp-mp-side {
  display: grid;
  gap: 24px;
  margin-top: 16px;
}

/* Tablet + down: stack into 1 column (still within centered-8) */
@media (max-width: 1023px) {
  .hp-mp-layout {
    grid-column: 3 / span 8;
    column-gap: 0;
  }

  .hp-mp-layout__left,
  .hp-mp-layout__right {
    grid-column: 1 / -1;
  }
}

/* Mobile: use full width (center-8 becomes too narrow) */
@media (max-width: 767px) {
  .hp-mp-layout {
    grid-column: 1 / -1; /* full 12 */
    padding-left: 0;
    padding-right: 0;
  }
}

/* Optional: keep the right column visible on desktop */
@media (min-width: 1024px) {
  .hp-mp-layout__right {
    top: 24px;
  }
}


/* Card */
.hp-mp-card {
  width: 100%;
  background: #fff;
  border-radius: 8px;
  border: 2px solid rgba(60, 28, 18, 1);
  box-shadow: var(--shadow-sm);

  padding: 0px 0px 16px;
  position: relative;   

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  cursor: pointer;
}

.hp-mp-card:focus {
  outline: 2px solid rgba(60, 28, 18, 0.35);
  outline-offset: 2px;
}

/* Image circle */
.hp-mp-card__imgWrap {
  overflow: hidden;
  background: rgba(0,0,0,0.06);
  display: grid;
  place-items: center;
}

.hp-mp-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.20);
  transform-origin: center;
}

/* Content stack */
.hp-mp-card__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Typography */
.hp-mp-card__name {
  font-size: 18px;  
  line-height: 27px;
  font-weight: 700;
  padding: 0px 8px;
}

.hp-mp-card__meta {
  font-size: 16px;
  line-height: 32px;
  font-weight: 400;
  color: var(--hp-grey);
}


/* 2x2 pills grid */
.hp-mp-card__pillGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;

  max-width: 400px; /* controls when the wrap happens */
  margin: 0 auto;
}

.hp-mp-card__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 12px;
  border-radius: 16px;

  background: rgba(0,0,0,0.18);
  color: rgba(0,0,0,0.72);

  font-size: 14px;
  line-height: 18px;
  font-weight: 500;

  white-space: nowrap;
  width: fit-content;
}

.hp-mp-card__pill--more {
  background: rgba(0,0,0,0.18);
}

.hp-mp-card__pill--ghost {
  background: transparent;
}

/* Included badge (top-right anchored) */
.hp-mp-card__included {
  position: absolute;
  top: 0;
  right: 0;

  background: rgba(60, 28, 18, 1);
  color: #fff;

  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;

  padding: 6px 12px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 800;
}

/* Accordion base */
.hp-acc {
  border: 0;
  padding: 0;
  margin: 0;
}

/* Remove default marker */
.hp-acc > summary {
  list-style: none;
}
.hp-acc > summary::-webkit-details-marker {
  display: none;
}

/* Summary row matches Figma: big title, chevron, divider line */
.hp-acc__summary {
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 8px 0px;
}

.hp-acc__title {
  font-size: 18px;
  font-weight: 400;
}

/* Chevron icon (pure CSS) */
.hp-acc__chev {
  width: 18px;
  height: 18px;
  position: relative;
  display: inline-block;
  margin-left: 8px;
}

.hp-acc__chev::before,
.hp-acc__chev::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 12px;
  height: 3px;
  background: var(--hp-dark-grey);
  border-radius: 999px;
}

.hp-acc__chev::before {
  left: 0px;
  transform: rotate(45deg);
}
.hp-acc__chev::after {
  right: -1.5px;
  transform: rotate(-45deg);
}

/* Rotate when open */
.hp-acc[open] .hp-acc__chev {
  transform: rotate(180deg);
}

/* ======= Meal Detail Modal ====== */

/* Body spacing */
.hp-acc__body {

}

.hp-mdm {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.hp-mdm__backdrop {
  position: absolute;
  inset: 0;
  background: var(--hp-overlay);
}

.hp-mdm__dialog {
  position: relative;
  width: min(920px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  margin: 64px auto;
  background: var(--hp-white);
  border-radius: 8px;
  outline: none;
  padding: 40px 32px 32px 32px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hp-mdm__dialog {
    width: min(680px, calc(100vw - 64px));
    max-height: calc(100vh - 64px);
    margin: 32px auto;
  }
}

.hp-mdm__closeContainer {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}

.hp-mdm__close {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;

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

  border-radius: 50%;
}

.hp-mdm__content {  }

.hp-mdm__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: center;
}

.hp-mdm__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

.hp-mdm__title {
  font-size: 24px;
  line-height; 36px;
  font-weight: 700;
  margin: 0px;
}

.hp-mdm__desc {
  font-size: 16px;
  line-height: 24px;
  margin: 0px;
}

.hp-mdm__imgWrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.hp-mdm__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.20);
}

.hp-mdm__desc {
  margin: 0;
}

.hp-mdm__tagRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.hp-mdm__browse {
  color: var(--hp-black);
  border: 2px solid var(--hp-black);
  background: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.hp-mdm__bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.hp-mdm__card {
  border-radius: 8px;
  background: var(--hp-beige);
  padding: 16px;
}

.hp-mdm__cardTitle {
  font-size: 20px;
  font-weight: 700;
  margin: 0px;
}

.hp-mdm__cardBody {
  font-size: 14px;
  line-height: 21px;
  margin: 0px;
}

.hp-mdm-bottom-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hp-mdm__nutrition {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 6px;
  column-gap: 16px;
  margin: 0;
}

.hp-mdm__nutrition dt,
.hp-mdm__nutrition dd {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

/* (1) Right-align nutrition values in the meal detail modal */
[data-hp-mdm-nutrition] {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  row-gap: 8px;
}

[data-hp-mdm-nutrition] dt {
  margin: 0;
}

[data-hp-mdm-nutrition] dd {
  margin: 0;
  text-align: right;
  justify-self: end;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 800px) {
  .hp-mdm__top { grid-template-columns: 1fr; }
  .hp-mdm__imgWrap { max-width: 320px; margin: 0 auto; }
  .hp-mdm__bottom { grid-template-columns: 1fr; }
}


/* =========================
   Adjust Your Meals (Step 4)
   Uses HomePlate tokens
   ========================= */

/* Use your app background token */
.hp-aym {
  background: var(--hp-bg);
  padding-bottom: var(--hp-space-48);
}

/* Header */
.hp-aym__header {
  padding-top: var(--hp-space-12);
  padding-bottom: var(--hp-space-24);
}

.hp-aym__headerInner {
  text-align: center;
}

.hp-aym__title {
  margin: 0;
}

.hp-aym__subhead {
  margin: var(--hp-space-8) 0 0;
  font-size: var(--hp-p);
  line-height: var(--hp-lh-24);
  font-weight: 700;
  color: var(--hp-green);
}

/* Layout: align with your 12-col grid */
.hp-aym__grid {
  display: grid;
  grid-template-columns: repeat(var(--hp-cols), minmax(0, 1fr));
  column-gap: var(--hp-gutter);
  align-items: start;
}

/* Desktop: left 3 cols, right 9 cols */
.hp-aym__filters {
  grid-column: 1 / span 3;
}

.hp-aym__meals {
  grid-column: 4 / -1;
}

/* Tablet: stack */
@media (max-width: 1023px) {
  .hp-aym__filters,
  .hp-aym__meals {
    grid-column: 1 / -1;
  }
}

/* Filters */
.hp-aym__filtersCard {
  display: flex;
  flex-direction: column;
  background: transparent;
  gap: 16px;
}

.hp-aym__filtersTitle {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: var(--hp-black);
}

.hp-aym__activePills {
  display: flex;
  flex-direction: column;
  gap: var(--hp-space-8);
  margin-bottom: var(--hp-space-8);
}

@media (max-width: 767px) {
  .hp-aym__activePills {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.hp-aym__pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hp-space-8);

  padding: 8px 10px;
  border-radius: 999px;

  background: rgba(0, 0, 0, 0.14);
  color: rgba(0, 0, 0, 0.8);

  font-size: 13px;
  line-height: 18px;

  width: fit-content;
  max-width: 100%;
}

.hp-aym__pillX {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(0, 0, 0, 0.65);

  width: 24px;
  height: 24px;
  border-radius: 999px;

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

  cursor: pointer;
}

.hp-aym__pillX:focus-visible {
  outline: none;
  box-shadow: var(--hp-focus-ring);
}

.hp-aym__clearAll {
  appearance: none;
  border: 0;
  background: transparent;

  color: var(--hp-green);
  text-decoration: underline;
  text-underline-offset: 3px;

  font-size: 13px;
  line-height: 18px;

  padding: 0 0 var(--hp-space-12);
  cursor: pointer;
}

.hp-aym__divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.18);
  margin: var(--hp-space-12) 0;
}

/* Details / accordion */
.hp-aym__details {
  margin: 0;
}

.hp-aym__summary {
  list-style: none;
  cursor: pointer;

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

  gap: var(--hp-space-12);
  padding: var(--hp-space-8) 0;

  font-size: 14px;
  line-height: 21px;
  font-weight: 700;

  color: rgba(0, 0, 0, 0.85);
}

.hp-aym__summary::-webkit-details-marker {
  display: none;
}

.hp-aym__checklist {
  display: flex;
  flex-direction: column;  
  margin-bottom: 16px;
}

.hp-aym__check {
  display: flex;
  align-items: center;
  gap: var(--hp-space-12);

  font-size: 13px;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.78);
}

.hp-aym__check input {
  width: 16px;
  height: 16px;
  accent-color: var(--hp-black);
}

.hp-aym-both-accordions {
  display: flex;
  flex-direction: column;
  gap: 0px;
}


/* Meals grid */
.hp-aym__mealGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hp-space-24);
}

@media (max-width: 1023px) {
  .hp-aym__mealGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .hp-aym__mealGrid {
    grid-template-columns: 1fr;
  }
}

/* Cards */
.hp-aym__card {
  background: var(--hp-white);
  border: 2px solid transparent;
  border-radius: var(--hp-radius-8);
  box-shadow: var(--shadow-sm);

  padding: var(--hp-space-16) var(--hp-space-16) var(--hp-space-12);
}

.hp-aym__card--selected {
  border-color: var(--hp-brown);
}

/* Image */
.hp-aym__imgWrap {
  display: flex;
  justify-content: center;
  margin-top: var(--hp-space-4);
  margin-bottom: var(--hp-space-12);
}

.hp-aym__img {
  width: 110px;
  height: 110px;
  border-radius: 999px;
  object-fit: cover;
}

/* Name */
.hp-aym__name {
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;

  text-align: center;
  margin: 0 0 var(--hp-space-12);
  color: rgba(0, 0, 0, 0.92);
}

/* Tags (pills on cards) */
.hp-aym__tags {
  display: flex;
  justify-content: center;
  gap: var(--hp-space-8);
  margin-bottom: var(--hp-space-8);
}

.hp-aym__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 10px;
  border-radius: 999px;

  background: rgba(0, 0, 0, 0.18);
  color: rgba(0, 0, 0, 0.72);

  font-size: 12px;
  line-height: 18px;
  font-weight: 500;

  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hp-aym__tag--more {
  background: rgba(0, 0, 0, 0.14);
}

/* Quantity controls */
.hp-aym__qtyRow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hp-space-16);
  margin-top: var(--hp-space-12);
}

.hp-aym__qtyBtn {
  appearance: none;
  width: 34px;
  height: 34px;

  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.35);

  background: rgba(45, 18, 9, 0.92); /* hp-brown, softened */
  color: var(--hp-white);

  font-size: 20px;
  line-height: 1;

  cursor: pointer;
  user-select: none;
}

.hp-aym__qtyBtn:focus-visible {
  outline: none;
  box-shadow: var(--hp-focus-ring);
}

.hp-aym__qtyBtn.is-disabled,
.hp-aym__qtyBtn:disabled {
  background: rgba(0, 0, 0, 0.18);
  color: rgba(0, 0, 0, 0.55);
  border-color: rgba(0, 0, 0, 0.2);
  cursor: not-allowed;
}

.hp-aym__qtyNum {
  width: 18px;
  text-align: center;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.85);
}

/* AYM variant: add a bottom stepper without changing existing card layout */
.hp-mp-card--aym .hp-mp-card__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Stepper row */
.hp-mp-card__stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

/* Buttons: WCAG touch target */
.hp-mp-stepper__btn {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 0;
  background: var(--hp-brown);
  color: var(--hp-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.hp-mp-stepper__btn:focus-visible {
  box-shadow: var(--hp-focus-ring);
}

.hp-mp-stepper__value {
  min-width: 44px;
  text-align: center;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: var(--hp-black);
}

/* =========================
   5. Header and Footer navigation
   ========================= */

/* Global beige header: uses theme color scheme for text/icons (dark text), beige background */
.hp-header {
  background: var(--hp-beige);
  --color-background: var(--hp-beige);
  /* Foreground (text, icons, images) comes from theme color_scheme_top so header uses theme “dark text” */
  color: var(--color-foreground);
}

.hp-header__container {
  width: 100%;
}

.hp-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hp-gutter);
  padding: 12px 0;
  min-height: 56px;
}

/* Left slot: logo (desktop) or hamburger (mobile) */
.hp-header__slot-left {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}

/* Center slot: nav (desktop) or logo (mobile) */
.hp-header__slot-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

.hp-header__nav-wrap {
  width: 100%;
  justify-content: center;
}

.hp-header__nav-wrap .header-menu,
.hp-header__nav-wrap .menu-list {
  justify-content: center;
}

/* Right slot: search, account, cart */
.hp-header__slot-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.hp-header__slot-right header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Logo wrap (theme logo block) – inherits theme foreground for dark text */
.hp-header__logoWrap {
  display: inline-flex;
  align-items: center;
}

.hp-header__logoWrap .header-logo,
.hp-header__logoWrap a,
.hp-header__logoWrap .header-logo__image {
  color: var(--color-foreground);
}

/* Drawer (hamburger) on mobile – theme foreground */
.hp-header__drawer-wrap {
  display: flex;
  align-items: center;
}

.hp-header__drawer-wrap .header__icon--menu,
.hp-header__drawer-wrap .header-drawer-icon svg {
  color: var(--color-foreground);
}

/* Nav and actions use theme foreground (dark text from color scheme) */
.hp-header .menu-list__link,
.hp-header .header-actions__action,
.hp-header .header__icon {
  color: var(--color-foreground);
}

.hp-header .menu-list__link:hover,
.hp-header .header-actions__action:hover {
  opacity: 0.85;
}

/* Desktop: logo left, nav center, actions right */
@media (min-width: 750px) {
  .hp-header__bar {
    padding: 14px 0;
  }

  .hp-header__slot-center .hp-header__logoWrap {
    display: none;
  }
}

/* Condensed / mobile: hamburger left, logo center, cart right */
@media (max-width: 749px) {
  .hp-header__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 10px 0;
    min-height: 52px;
  }

  .hp-header__slot-left {
    justify-content: flex-start;
  }

  .hp-header__slot-left .hp-header__logoWrap {
    display: none;
  }

  .hp-header__slot-center {
    justify-content: center;
  }

  .hp-header__slot-center .hp-header__nav-wrap {
    display: none;
  }

  .hp-header__slot-center .hp-header__logoWrap {
    display: inline-flex;
    justify-content: center;
  }

  .hp-header__slot-right {
    justify-content: flex-end;
  }

  /* Condensed view: only cart on right (optional - remove to show search/account too) */
  .hp-header__slot-right .account-popover,
  .hp-header__slot-right .account-drawer,
  .hp-header__slot-right .search-action {
    display: none;
  }
}


/* ==== Intake Sticky Footer ==== */

.hp-intake-sticky-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 50;

  background: var(--hp-header-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.12);

  padding-top: 16px;
  padding-bottom: 16px;
}

.hp-intake-sticky-footer__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.hp-intake-sticky-footer__btn {
  min-width: 120px;
}

.hp-intake-sticky-footer__btn[aria-disabled="true"] {
  pointer-events: none;
}

/* =========================
   Cart Variant Sticky Footer
   ========================= */

.hp-intake-sticky-footer__cart {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 50;

  background: var(--hp-header-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.12);

  padding-top: 8px;
  padding-bottom: 16px;
}

.hp-intake-sticky-footer__stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.hp-intake-sticky-footer__cartLink {
  font-size: 16px;
  line-height: 32px;
  font-weight: 400;
  color: var(--hp-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  justify-self: center;
}

.hp-intake-sticky-footer__cartLink:hover {
  color: var(--hp-brown);
}

.hp-intake-sticky-footer__count {
  font-size: 20px;
  line-height: 30px;
  color: var(--hp-white);
  font-weight: 700;
}

.hp-intake-sticky-footer__cart_select_text {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
}

.hp-intake-sticky-footer__btn_row {
  display: flex;
  flex-direction: row;
  gap: 16px;
}


.hp-cart-panel {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.hp-cart-panel__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.hp-cart-panel__dialog {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 360px;
  max-width: 100%;
  background: var(--hp-white);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.2);
}

@media (max-width: 767px) {
  .hp-cart-panel__dialog {
    width: 100%;
  }
}

.hp-cart-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--hp-border);
}

.hp-cart-panel__title {
  font-size: 18px;
  font-weight: 700;
}

.hp-cart-panel__close {
  background: none;
  border: 0;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}


.hp-cart-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.hp-cart-panel__footer {
  padding: 16px;
  border-top: 1px solid var(--hp-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}



/* =========================
   Intake Page Body
   ========================= */

.hp-intake-body {
  display: flex;
  flex-direction: column;
  gap: 8px;

  padding-top: 24px;
  padding-bottom: calc(
    var(--hp-sticky-footer-h) + 80px + env(safe-area-inset-bottom)
  );
}

/* tighten on mobile */
@media (max-width: 767px) {
  .hp-intake-body {
    padding-top: 24px;
    padding-bottom: 80px;
  }
}

/* =========================
   Intake Progress Indicator
   ========================= */

.hp-progress {
  width: 100%;
}

.hp-progress__desktop,
.hp-progress__mobile {
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0;
}

/* Desktop layout: center the whole row */
.hp-progress__desktop {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
}

/* Keep each step + arrow as a unit */
.hp-progress__item {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto; /* do not shrink */
}

/* Desktop step layout (bubble above label) */
.hp-progress__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 90px;
}

.hp-progress__label {
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  color: var(--hp-black);
  white-space: nowrap;
}

/* Bubble styles */
.hp-progress__bubble {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  color: var(--hp-white);

  background:var(--hp-dark-grey);
}

.hp-progress__item[data-state="current"] .hp-progress__bubble {
  background: var(--hp-primary);
}

.hp-progress__item[data-state="complete"] .hp-progress__bubble {
  background:var(--hp-dark-grey);
}

/* Arrow between steps */
.hp-progress__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hp-black);
}

/* Tablet and mobile: compact row */
.hp-progress__mobile .hp-progress__bubble {
  width: 36px;
  height: 36px;
}

/* Show desktop layout only on >=1024px */
@media (min-width: 1024px) {
  .hp-progress__mobile {
    display: none;
  }
}

/* Show compact layout on <=1023px */
@media (max-width: 1023px) {
  .hp-progress__desktop {
    display: none;
  }

  .hp-progress__mobile {
    justify-content: center;
    gap: 0;
  }

  .hp-progress__arrow {
    margin: 0 16px;
  }
}


/* =========================
   6. Page-specific overrides
   ========================= */