/* ============================================
   GOOD TASTE — Design System
   Base canvas: 1440 x 1024px
   All values scale proportionally via clamp()
   ============================================ */

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500&family=Poppins:wght@400;500&display=swap');

/* --- Design Tokens --- */
:root {

  /* Colours */
  --color-primary:       #FFC50F;   /* Yellow — logo, accents, CTAs */
  --color-background:    #FFFFFF;   /* Page background */
  --color-text:          #412D04;   /* Body text — dark brown */
  --color-text-muted:    #A89B7E;   /* #412D04 at 50% on white */
  --color-surface:       #F7F5F0;   /* Warm off-white — cards, sidebars */
  --color-border:        #E8E3D9;   /* Subtle border on surfaces */
  --color-overlay:       rgba(65, 45, 4, 0.6);  /* Dark overlay for modals/map */

  /* Typography — font family */
  --font:                'Poppins', sans-serif;
  --font-body:           'Poppins', sans-serif;
  --font-serif:          'Cormorant Garamond', serif;

  /* Typography — sizes (clamp: min at 375px, preferred at 1440px, max) */
  --text-h1:             clamp(3rem,    13.89vw, 150px);  /* 200px @ 1440 */
  --text-h2:             clamp(2rem,    4.86vw,  45px);   /* 70px  @ 1440 */
  --text-h3:             clamp(1.5rem,  2.78vw,  25px);   /* 40px  @ 1440 */
  --text-body:           clamp(1rem,    1.39vw,  15px);   /* 20px  @ 1440 */
  --text-base:           clamp(1rem,    1.39vw,  15px);   /* alias for body size */
  --text-md:             clamp(1.0625rem, 1.53vw, 17px);  /* slightly above body */
  --text-lg:             clamp(1.25rem,   1.8vw,  20px);  /* between md and h3 */
  --text-xl:             clamp(1.375rem,  2vw,    22px);  /* between lg and h3 */
  --text-small:          clamp(0.75rem, 0.97vw,  12px);   /* 14px  @ 1440 */
  --text-button:         clamp(1rem,    1.39vw,  20px);   /* 20px  @ 1440 */

  /* Typography — weights */
  --weight-extrabold:    900;
  --weight-bold:         700;
  --weight-medium:       500;  /* Headings */
  --weight-regular:      400;  /* Body, detail, buttons */

  /* Typography — line heights */
  --leading-heading:     1.15;
  --leading-body:        1.6;
  --leading-small:       1.5;

  /* Spacing scale (4px base) */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  /* Border radius */
  --radius-sm:   8px;   /* Inputs, small elements */
  --radius-md:   10px;  /* Cards */
  --radius-lg:   18px;  /* Large cards, modals */
  --radius-pill: 999px; /* Tags, badges, fully rounded buttons */

  /* Shadows */
  --shadow-card:   0 2px 12px rgba(65, 45, 4, 0.08);
  --shadow-raised: 0 4px 24px rgba(65, 45, 4, 0.12);

  /* Layout */
  --max-width:     1440px;
  --page-padding:  clamp(24px, 5.56vw, 80px);  /* 80px @ 1440 */
}


/* --- Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family:      var(--font);
  font-size:        var(--text-body);
  font-weight:      var(--weight-regular);
  line-height:      var(--leading-body);
  color:            var(--color-text);
  background-color: var(--color-background);
  max-width:        var(--max-width);
  margin:           0 auto;
  padding:          0 var(--page-padding);
}


/* --- Typography --- */
h1 {
  font-size:   var(--text-h1);
  font-weight: var(--weight-medium);
  line-height: var(--leading-heading);
  color:       var(--color-text);
  letter-spacing: -0.09em;
}

h2 {
  font-family: var(--font-serif);
  font-size:   var(--text-h2);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  color:       var(--color-text);
}

h3 {
  font-family: var(--font-serif);
  font-size:   var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  color:       var(--color-text);
}

p {
  font-size:   var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color:       var(--color-text);
}

.text-small,
small {
  font-size:   var(--text-small);
  font-weight: var(--weight-regular);
  line-height: var(--leading-small);
  color:       var(--color-text-muted);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-primary {
  color: var(--color-primary);
}

/* --- Buttons --- */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  font-family:     var(--font);
  font-size:       var(--text-button);
  font-weight:     var(--weight-regular);
  line-height:     1;
  border-radius:   var(--radius-pill);
  padding:         var(--space-4) var(--space-7);
  cursor:          pointer;
  border:          none;
  text-decoration: none;
  transition:      background-color 0.2s ease, opacity 0.2s ease, transform 0.1s ease;
}

.btn:active {
  transform: scale(0.98);
}

/* Primary button — yellow fill */
.btn-primary {
  background-color: var(--color-primary);
  color:            var(--color-text);
}

.btn-primary:hover {
  background-color: #e6b000;  /* Primary darkened ~10% */
}

.btn-primary:disabled {
  opacity: 0.4;
  cursor:  not-allowed;
}

/* Secondary button — outlined */
.btn-secondary {
  background-color: transparent;
  color:            var(--color-text);
  border:           2px solid var(--color-text);
}

.btn-secondary:hover {
  background-color: var(--color-surface);
}

.btn-secondary:disabled {
  opacity: 0.4;
  cursor:  not-allowed;
}

/* Ghost button — text only */
.btn-ghost {
  background-color: transparent;
  color:            var(--color-text-muted);
  padding-left:     0;
  padding-right:    0;
}

.btn-ghost:hover {
  color: var(--color-text);
}


/* --- Input fields --- */
.input-group {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.input-label {
  font-size:   var(--text-small);
  font-weight: var(--weight-medium);
  color:       var(--color-text);
}

.input {
  font-family:      var(--font);
  font-size:        var(--text-body);
  font-weight:      var(--weight-regular);
  color:            var(--color-text);
  background-color: var(--color-background);
  border:           1.5px solid var(--color-border);
  border-radius:    var(--radius-sm);
  padding:          var(--space-4) var(--space-5);
  width:            100%;
  outline:          none;
  transition:       border-color 0.2s ease;
}

.input::placeholder {
  color: var(--color-text-muted);
}

.input:focus {
  border-color: var(--color-primary);
}

.input.error {
  border-color: #C0392B;
}

.input-hint {
  font-size: var(--text-small);
  color:     var(--color-text-muted);
}

.input-error-msg {
  font-size: var(--text-small);
  color:     #C0392B;
}


/* --- Cards --- */
.card {
  background-color: var(--color-surface);
  border-radius:    var(--radius-md);
  padding:          var(--space-6);
  box-shadow:       var(--shadow-card);
  transition:       box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-raised);
  transform:  translateY(-2px);
}

/* Selected state — for hub selection cards */
.card.selected {
  outline:        3px solid var(--color-primary);
  outline-offset: 2px;
}

.card-large {
  border-radius: var(--radius-lg);
  padding:       var(--space-7);
}


/* --- Tags / Badges --- */
.tag {
  display:          inline-block;
  width:            auto;
  align-self:       flex-start;
  font-size:        var(--text-small);
  font-weight:      var(--weight-medium);
  background-color: var(--color-surface);
  color:            var(--color-text-muted);
  border-radius:    var(--radius-pill);
  padding:          var(--space-1) var(--space-3);
}

.tag-primary {
  background-color: var(--color-primary);
  color:            var(--color-text);
}


/* --- Divider --- */
.divider {
  border:     none;
  border-top: 1px solid var(--color-border);
  margin:     var(--space-6) 0;
}


/* --- Layout helpers --- */
.section {
  padding: var(--space-9) 0;
}

.stack {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-5);
}

.cluster {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-4);
}

.grid-2 {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--space-6);
}

.grid-3 {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-5);
}


/* --- Overlay / Modal backdrop --- */
.overlay {
  position:         fixed;
  inset:            0;
  background-color: var(--color-overlay);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  z-index:          100;
}

.modal {
  background-color: var(--color-background);
  border-radius:    var(--radius-lg);
  padding:          var(--space-8);
  max-width:        640px;
  width:            90%;
  box-shadow:       var(--shadow-raised);
}


/* ============================================
   INDEX — Page styles
   ============================================ */

/* --- Header --- */
.site-header {
  padding-top:    var(--space-7);
  padding-bottom: var(--space-5);
}

.logo {
  color:       var(--color-primary);
  line-height: 1;
}


/* --- Hero --- */
.hero {
  padding-top:           var(--space-9);
  padding-bottom:        var(--space-9);
  display:               grid;
  grid-template-columns: 9fr 11fr;
  gap:                   var(--space-8);
  align-items:           flex-start;
}

.hero-text h2 {
  margin-bottom: var(--space-6);
}

.hero-text p {
  margin-bottom: var(--space-7);
  font-size:     var(--text-body);
  color:         var(--color-text);
}

.hero-image {
  align-self:       stretch;
  object-fit:       cover;
  width:            100%;
  height:           100%;
  max-height:       420px;
  aspect-ratio:     4 / 3;
  background-color: var(--color-surface);
  border-radius:    var(--radius-lg);
}

.btn-get-started {
  display:          inline-flex;
  align-items:      center;
  font-family:      var(--font);
  font-size:        var(--text-button);
  font-weight:      var(--weight-regular);
  line-height:      1;
  background-color: var(--color-primary);
  color:            var(--color-text);
  border:           none;
  border-radius:    var(--radius-md);
  padding:          var(--space-4) 40px;
  cursor:           pointer;
  text-decoration:  none;
  transition:       background-color 0.2s ease, transform 0.1s ease;
}

.btn-get-started:hover  { background-color: #E6B000; }
.btn-get-started:active { transform: scale(0.98); }


/* --- Seasonal section --- */
.seasonal {
  padding-bottom: var(--space-10);
}

.seasonal h3 {
  margin-bottom: var(--space-7);
  font-size:     clamp(1.75rem, 4vw, 38px);
}

.seasonal-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--space-5);
}


/* --- Plant card --- */
.plant-card {
  background-color: var(--color-surface);
  border-radius:    var(--radius-md);
  overflow:         hidden;
  box-shadow:       var(--shadow-card);
  cursor:           default;
}

.plant-card-image {
  object-fit:       cover;
  width:            100%;
  height:           200px;
  aspect-ratio:     3 / 2;
  background-color: var(--color-surface);
  border-bottom:    1px solid var(--color-border);
  border-radius:    var(--radius-md) var(--radius-md) 0 0;
}

.plant-card-body {
  padding: var(--space-5);
}

.plant-card-body p:first-child {
  font-size:     var(--text-body);
  font-weight:   var(--weight-medium);
  color:         var(--color-text);
  line-height:   var(--leading-body);
  margin-bottom: var(--space-2);
}

.plant-card-body p {
  font-size: var(--text-small);
  color:     var(--color-text-muted);
}


/* ============================================
   HUB SELECTION — Page styles
   ============================================ */

/* Logo as link */
.logo-link {
  text-decoration: none;
}

/* --- Hidden utility --- */
.hub-hidden {
  display: none;
}

/* --- Search section --- */
.hub-search {
  padding-top:    var(--space-9);
  padding-bottom: var(--space-6);
}

.hub-search h2 {
  margin-bottom: var(--space-5);
}

/* --- Search row (input + button) --- */
.hub-search-row {
  grid-area:   search;
  display:     flex;
  gap:         var(--space-4);
  align-items: center;
}

.hub-search-row .input {
  flex:  1;
  width: auto;
}

/* --- Search button --- */
.btn-search {
  display:          inline-flex;
  align-items:      center;
  font-family:      var(--font);
  font-size:        var(--text-button);
  font-weight:      var(--weight-regular);
  line-height:      1;
  background-color: var(--color-primary);
  color:            var(--color-text);
  border:           none;
  border-radius:    var(--radius-md);
  padding:          var(--space-4) 40px;
  cursor:           pointer;
  white-space:      nowrap;
  transition:       background-color 0.2s ease, transform 0.1s ease;
}

.btn-search:hover  { background-color: #E6B000; }
.btn-search:active { transform: scale(0.98); }

/* --- Two-column layout --- */
.hub-layout {
  display:               grid;
  grid-template-columns: 3fr 2fr;
  grid-template-areas:
    "search ."
    "map    list";
  column-gap:            var(--space-6);
  row-gap:               var(--space-5);
  padding-bottom:        var(--space-10);
  align-items:           start;
}

/* --- Map --- */
.hub-map {
  grid-area:        map;
  position:         relative;
  height:           520px;
  background-color: var(--color-surface);
  border-radius:    var(--radius-lg);
  overflow:         hidden;
  display:          flex;
  align-items:      center;
  justify-content:  center;
}

.hub-map-label {
  font-size: var(--text-body);
  color:     var(--color-text-muted);
}

.hub-pin {
  position:         absolute;
  width:            20px;
  height:           20px;
  background-color: var(--color-primary);
  border-radius:    var(--radius-pill);
}

.hub-pin--1 { top: 38%; left: 32%; }
.hub-pin--2 { top: 55%; left: 57%; }
.hub-pin--3 { top: 27%; left: 65%; }

.map-pin {
  position:      absolute;
  width:         24px;
  height:        24px;
  background:    var(--color-primary);
  border-radius: 50%;
  transform:     translateX(-50%);
}

.map-pin--1 { top: 35%; left: 25%; }
.map-pin--2 { top: 55%; left: 50%; }
.map-pin--3 { top: 40%; left: 70%; }

/* --- Hub list --- */
.hub-list {
  grid-area:      list;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

/* --- Hub card --- */
.hub-card {
  display:          flex;
  align-items:      flex-start;
  justify-content:  space-between;
  background-color: var(--color-background);
  border-radius:    var(--radius-md);
  padding:          var(--space-5);
  cursor:           pointer;
  border-top:    1px solid var(--color-border);
  border-right:  1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-left:   4px solid var(--color-border);  
  transition:       border-left-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.hub-card:hover {
  border-left-color: var(--color-primary);
  box-shadow:        var(--shadow-card);
}

.hub-card.selected {
  border-left-color: var(--color-primary);
  background-color:  var(--color-surface);
  box-shadow:        var(--shadow-card);
}

.hub-card.selected .tag {
  background-color: var(--color-background);
  color:            var(--color-text);
}

.hub-card-info {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  flex:           1;
}

.hub-card-distance {
  font-size:   var(--text-body);
  color:       var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- Continue button --- */
.hub-continue {
  display:          block;
  width:            100%;
  font-family:      var(--font);
  font-size:        var(--text-button);
  font-weight:      var(--weight-regular);
  line-height:      1;
  text-align:       center;
  background-color: var(--color-border);
  color:            var(--color-text-muted);
  border:           none;
  border-radius:    var(--radius-md);
  padding:          var(--space-4) var(--space-7);
  cursor:           not-allowed;
  margin-top:       var(--space-3);
  transition:       background-color 0.2s ease, color 0.2s ease;
}

.hub-continue.active {
  background-color: var(--color-primary);
  color:            var(--color-text);
  cursor:           pointer;
}

.hub-continue.active:hover { background-color: #E6B000; }


/* ============================================
   SIGNUP — Page styles
   ============================================ */

/* --- Progress bar --- */
.progress-bar {
  padding-top:    var(--space-8);
  padding-bottom: var(--space-7);
}

.progress-steps {
  display:     flex;
  align-items: flex-start;
}

.progress-step {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-2);
  flex-shrink:    0;
}

.progress-dot {
  width:         16px;
  height:        16px;
  border-radius: var(--radius-pill);
  background:    var(--color-text-muted);
}

.progress-dot.active {
  background: var(--color-primary);
}

.progress-segment {
  flex:       1;
  height:     2px;
  background: var(--color-border);
  margin-top: 7px; /* vertically centres 2px track with 16px dot */
  overflow:   hidden;
  position:   relative;
}

.progress-segment-fill {
  position:   absolute;
  inset:      0;
  width:      0%;
  background: var(--color-primary);
  transition: width 0.4s ease;
}

.progress-label {
  font-size:   var(--text-small);
  color:       var(--color-text-muted);
  text-align:  center;
  white-space: nowrap;
}


/* --- Signup step --- */
.signup-step {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-8);
  padding-top:           var(--space-7);
  padding-bottom:        var(--space-6);
}

.signup-step h3 {
  margin-bottom: var(--space-6);
}

.signup-hidden {
  display: none;
}

.signup-note {
  font-size:     var(--text-body);
  color:         var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.signup-placeholder {
  background-color: var(--color-surface);
  border-radius:    var(--radius-lg);
  height:           496px;
}

.signup-fields {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  max-width:      560px;
}


/* --- Calendar --- */
.calendar {
  background-color: var(--color-surface);
  border-radius:    var(--radius-lg);
  padding:          var(--space-6);
  max-width:        420px;
}

.calendar-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   var(--space-5);
}

.calendar-month-year {
  font-family: var(--font);
  font-size:   var(--text-body);
  font-weight: var(--weight-medium);
  color:       var(--color-text);
}

.calendar-nav {
  background:      none;
  border:          none;
  font-family:     var(--font);
  font-size:       var(--text-h3);
  color:           var(--color-text);
  width:           36px;
  height:          36px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   var(--radius-sm);
  cursor:          pointer;
  line-height:     1;
  transition:      background-color 0.2s ease;
}

.calendar-nav:hover {
  background-color: var(--color-border);
}

.calendar-weekdays {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom:         var(--space-2);
}

.calendar-weekdays span {
  text-align:  center;
  font-family: var(--font);
  font-size:   var(--text-small);
  font-weight: var(--weight-medium);
  color:       var(--color-text-muted);
  padding:     var(--space-1) 0;
}

.calendar-grid {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   var(--space-1);
}

.calendar-day {
  aspect-ratio:    1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font);
  font-size:       var(--text-small);
  border-radius:   var(--radius-pill);
  cursor:          pointer;
  color:           var(--color-text);
  transition:      background-color 0.15s ease;
}

/* light yellow tint derived from --color-primary at 20% opacity */
.calendar-day:not(.disabled):not(.selected):not(.empty):hover {
  background-color: rgba(255, 197, 15, 0.2);
}

.calendar-day.disabled {
  color:  var(--color-text-muted);
  cursor: not-allowed;
}

.calendar-day.selected {
  background-color: var(--color-primary);
  color:            var(--color-text);
}

.calendar-day.empty {
  cursor: default;
}


/* --- Number stepper --- */
.stepper {
  display:          inline-flex;
  align-items:      center;
  gap:              var(--space-3);
  background-color: var(--color-surface);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-md);
  padding:          var(--space-2) var(--space-3);
}

.stepper-btn {
  background:      none;
  border:          none;
  font-family:     var(--font);
  font-size:       var(--text-button);
  font-weight:     var(--weight-regular);
  color:           var(--color-text);
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   var(--radius-pill);
  padding:         var(--space-2) var(--space-3);
  cursor:          pointer;
  line-height:     1;
  transition:      background-color 0.2s ease;
}

.stepper-btn:hover {
  background-color: var(--color-border);
}

.stepper-count {
  font-family: var(--font);
  font-size:   var(--text-body);
  font-weight: var(--weight-regular);
  color:       var(--color-text);
  min-width:   24px;
  text-align:  center;
}


/* --- Dietary textarea --- */
.signup-textarea {
  resize:     vertical;
  min-height: 140px;
  max-width:  560px;
}


/* --- Skill cards --- */
.skill-cards {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  max-width:      560px;
}

.skill-card {
  background-color: var(--color-background);
  border-top:       1px solid var(--color-border);
  border-right:     1px solid var(--color-border);
  border-bottom:    1px solid var(--color-border);
  border-left:      4px solid var(--color-border);
  border-radius:    var(--radius-md);
  padding:          var(--space-5);
  cursor:           pointer;
  transition:       border-left-color 0.2s ease, background-color 0.2s ease;
}

.skill-card:hover {
  border-left-color: var(--color-primary);
}

.skill-card.selected {
  border-left-color: var(--color-primary);
  background-color:  var(--color-surface);
}

.skill-card-title {
  font-weight:   var(--weight-medium);
  margin-bottom: var(--space-1);
}

.skill-card-sub {
  font-size:   var(--text-small);
  color:       var(--color-text-muted);
  line-height: var(--leading-small);
}


/* --- Signup navigation --- */
.signup-nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-top:     var(--space-7);
  padding-bottom:  var(--space-10);
}

.btn-back {
  background:      none;
  border:          none;
  font-family:     var(--font);
  font-size:       var(--text-button);
  font-weight:     var(--weight-regular);
  color:           var(--color-text-muted);
  cursor:          pointer;
  padding:         0;
  text-decoration: none;
  transition:      color 0.2s ease;
}

.btn-back:hover {
  color: var(--color-text);
}

.btn-next {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  font-family:      var(--font);
  font-size:        var(--text-button);
  font-weight:      var(--weight-regular);
  line-height:      1;
  background-color: var(--color-primary);
  color:            var(--color-text);
  border:           none;
  border-radius:    var(--radius-md);
  padding:          var(--space-4) 40px;
  cursor:           pointer;
  transition:       background-color 0.2s ease, transform 0.1s ease;
}

.btn-next:hover:not(:disabled)  { background-color: #E6B000; }
.btn-next:active:not(:disabled) { transform: scale(0.98); }

.btn-next:disabled {
  background-color: var(--color-border);
  color:            var(--color-text-muted);
  cursor:           not-allowed;
}


/* ============================================
   MENU — Page styles
   ============================================ */

.menu-hidden {
  display: none;
}

/* --- Two-column layout --- */
.menu-layout {
  display:     flex;
  gap:         var(--space-8);
  align-items: flex-start;
}

.menu-left {
  flex:      2;
  min-width: 0;
}

.menu-right {
  flex: 1;
}

/* --- Page heading --- */
.menu-heading {
  margin-bottom: var(--space-4);
}

/* --- Season pill --- */
.menu-season-pill {
  display:          inline-block;
  font-size:        var(--text-body);
  font-weight:      var(--weight-medium);
  background-color: var(--color-surface);
  color:            var(--color-text-muted);
  border-radius:    var(--radius-pill);
  padding:          var(--space-2) var(--space-5);
  margin-bottom:    var(--space-5);
}

/* --- Season description --- */
.menu-season-desc {
  margin-bottom: var(--space-8);
}

/* --- Course section --- */
.menu-course {
  margin-bottom: var(--space-6);
}

.menu-course-label {
  margin-bottom: var(--space-5);
  font-family:   var(--font-body);
  font-size:     var(--text-body);
  font-weight:   var(--weight-medium);
  color:         var(--color-text);
  line-height:   var(--leading-body);
}

/* --- Menu card grid --- */
.menu-card-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-5);
  align-items:           stretch;
}

/* --- Menu card --- */
.menu-card {
  border-top:       1px solid var(--color-border);
  border-right:     1px solid var(--color-border);
  border-bottom:    1px solid var(--color-border);
  border-left:      1px solid var(--color-border);
  border-radius:    var(--radius-md);
  height:           100%;
  display:          flex;
  flex-direction:   column;
  overflow:         hidden;
  cursor:           pointer;
  background-color: var(--color-background);
  transition:       background-color 0.2s ease;
}

.menu-card.selected {
  border-top:       1px solid var(--color-border);
  border-right:     1px solid var(--color-border);
  border-bottom:    1px solid var(--color-border);
  border-left:      4px solid var(--color-primary);
  background-color: var(--color-surface);
}

.menu-card.selected .tag,
.menu-card.selected .menu-card-time {
  background-color: var(--color-background);
  color:            var(--color-text);
}

.menu-card-image {
  width:            100%;
  height:           200px;
  background-color: var(--color-surface);
}

.menu-card-body {
  padding:        var(--space-5);
  height:         100%;
  display:        flex;
  flex-direction: column;
}

.menu-card-body h3 {
  margin-bottom: var(--space-2);
  font-size:     var(--text-xl);
  font-weight:   var(--weight-medium);
}

.menu-card-body p {
  font-size: var(--text-small);
  color:     var(--color-text-muted);
}

.menu-card-meta {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  margin-top:  var(--space-3);
}

.menu-card-footer {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--space-2);
  margin-top:     var(--space-3);
}

.menu-card-pills {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-2);
}

.menu-card-time {
  display:          inline-block;
  font-size:        var(--text-small);
  color:            var(--color-text-muted);
  background-color: var(--color-surface);
  border-radius:    var(--radius-pill);
  padding:          var(--space-1) var(--space-3);
}

/* --- Make my box button --- */
.btn-make-box {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  font-family:      var(--font);
  font-size:        var(--text-button);
  font-weight:      var(--weight-regular);
  line-height:      1;
  background-color: var(--color-primary);
  color:            var(--color-text);
  border:           none;
  border-radius:    var(--radius-md);
  padding:          var(--space-4) 40px;
  cursor:           pointer;
  text-decoration:  none;
  transition:       background-color 0.2s ease, transform 0.1s ease;
  margin-bottom:    var(--space-10);
}

.btn-make-box:hover  { background-color: #E6B000; }
.btn-make-box:active { transform: scale(0.98); }


/* ============================================
   ORDER — Page styles
   ============================================ */

/* --- Two-column layout --- */
.order-layout {
  display:               grid;
  grid-template-columns: 2fr 1fr;
  gap:                   var(--space-8);
  padding-top:           var(--space-7);
  padding-bottom:        var(--space-10);
  align-items:           start;
}

/* --- Left column --- */
.order-image {
  width:            100%;
  height:           400px;
  background-color: var(--color-surface);
  border-radius:    var(--radius-lg);
  margin-bottom:    var(--space-6);
}

.order-box-label {
  margin-bottom: var(--space-4);
}

.order-produce-list {
  list-style-type: disc;
  padding-left:    var(--space-5);
}

/* --- Right column --- */
.order-right {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-6);
}

.order-promo-label {
  margin-bottom: var(--space-3);
}

.order-promo-row {
  display:     flex;
  gap:         var(--space-3);
  align-items: center;
}

.order-promo-row .input {
  flex:  1;
  width: auto;
}

.btn-apply {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  font-family:      var(--font);
  font-size:        var(--text-body);
  font-weight:      var(--weight-regular);
  line-height:      1;
  background-color: var(--color-surface);
  color:            var(--color-text);
  border-top:       1px solid var(--color-border);
  border-right:     1px solid var(--color-border);
  border-bottom:    1px solid var(--color-border);
  border-left:      1px solid var(--color-border);
  border-radius:    var(--radius-sm);
  padding:          var(--space-4) var(--space-5);
  cursor:           pointer;
  white-space:      nowrap;
  transition:       background-color 0.2s ease;
}

.btn-apply:hover {
  background-color: var(--color-border);
}

/* --- Order summary --- */
.order-summary {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.order-summary-row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
}

.order-summary-total {
  font-weight: var(--weight-medium);
}

.order-divider {
  border:     none;
  border-top: 1px solid var(--color-border);
  margin:     0;
}

/* --- Pay and order button --- */
.btn-pay {
  display:          block;
  width:            100%;
  font-family:      var(--font);
  font-size:        var(--text-button);
  font-weight:      var(--weight-regular);
  line-height:      1;
  text-align:       center;
  background-color: var(--color-primary);
  color:            var(--color-text);
  border:           none;
  border-radius:    var(--radius-md);
  padding:          var(--space-4) var(--space-7);
  cursor:           pointer;
  transition:       background-color 0.2s ease, transform 0.1s ease;
}

.btn-pay:hover  { background-color: #E6B000; }
.btn-pay:active { transform: scale(0.98); }


/* ============================================
   HUB DASHBOARD — Page styles
   ============================================ */

.logo-sm {
  font-size: var(--text-h2);
}

.hub-main {
  padding-top: var(--space-7);
}

.hub-login {
  display:         flex;
  justify-content: center;
  padding-top:     var(--space-10);
}

.hub-login-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  width:          100%;
  max-width:      480px;
  background:     var(--color-background);
  border-top:     1px solid var(--color-border);
  border-right:   1px solid var(--color-border);
  border-bottom:  1px solid var(--color-border);
  border-left:    1px solid var(--color-border);
  border-radius:  var(--radius-md);
  padding:        var(--space-7);
}

.hub-login-btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  font-family:      var(--font);
  font-size:        var(--text-button);
  font-weight:      var(--weight-regular);
  line-height:      1;
  background-color: var(--color-primary);
  color:            var(--color-text);
  border:           none;
  border-radius:    var(--radius-md);
  padding:          var(--space-4) var(--space-7);
  cursor:           pointer;
  transition:       background-color 0.2s ease, transform 0.1s ease;
}

.hub-login-btn:hover  { background-color: #E6B000; }
.hub-login-btn:active { transform: scale(0.98); }


.orders-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--space-5);
}

.hub-spacer {
  height: var(--space-5);
}

.order-card-header {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
}

.hub-card-label {
  font-weight: 700;
}

.order-card {
  background:    var(--color-background);
  padding:       var(--space-5);
  border-radius: var(--radius-md);
  border-top:    1px solid var(--color-border);
  border-right:  1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-left:   1px solid var(--color-border);
}

.hub-filters {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  margin-bottom: var(--space-6);
}

.filter-btn {
  background:   var(--color-surface);
  color:        var(--color-text-muted);
  border:       none;
  padding:      var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  cursor:       pointer;
  font-size:    var(--text-small);
  font-family:  var(--font);
}

.filter-btn.active {
  background: var(--color-primary);
  color:      var(--color-text);
}

.refresh-btn {
  margin-left: auto;
}


/* ============================================
   PAYMENT — Page styles
   ============================================ */

.payment-heading {
  margin-bottom: var(--space-6);
}

.payment-form {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-5);
}

.payment-field {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.payment-label {
  font-size:   var(--text-small);
  font-weight: var(--weight-regular);
  color:       var(--color-text-muted);
}

.btn-confirm-pay {
  display:          block;
  width:            100%;
  font-family:      var(--font);
  font-size:        var(--text-button);
  font-weight:      var(--weight-regular);
  line-height:      1;
  text-align:       center;
  background-color: var(--color-primary);
  color:            var(--color-text);
  border:           none;
  border-radius:    var(--radius-md);
  padding:          var(--space-4) var(--space-7);
  cursor:           pointer;
  transition:       background-color 0.2s ease, transform 0.1s ease;
}

.btn-confirm-pay:hover:not(:disabled)  { background-color: #E6B000; }
.btn-confirm-pay:active:not(:disabled) { transform: scale(0.98); }

.btn-confirm-pay:disabled {
  background-color: var(--color-border);
  color:            var(--color-text-muted);
  cursor:           not-allowed;
}


/* ============================================
   RECIPES — Page styles
   ============================================ */

.recipes-heading {
  margin-top:    var(--space-7);
  margin-bottom: var(--space-6);
}

.recipes-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  padding-bottom: 0;
}

.recipe-card {
  background:    var(--color-background);
  border-top:    1px solid var(--color-border);
  border-right:  1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-left:   1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       var(--space-5) var(--space-6);
}

.recipe-card-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   var(--space-2);
}

.recipe-card-bottom {
  display:    flex;
  align-items: center;
  margin-top:  var(--space-4);
}

.recipe-card-bottom .menu-card-meta {
  margin-top: 0;
}

.recipe-toggle-btn {
  width:           40px;
  height:          40px;
  flex-shrink:     0;
  border-radius:   var(--radius-pill);
  background:      var(--color-surface);
  border:          none;
  font-family:     var(--font);
  font-size:       var(--text-body);
  font-weight:     700;
  color:           var(--color-text);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background-color 0.2s ease;
}

.recipe-toggle-btn:hover {
  background-color: var(--color-border);
}

.recipe-card-expanded {
  display:     none;
  margin-top:  var(--space-5);
  padding-top: var(--space-5);
  border-top:  1px solid var(--color-border);
}

.recipe-card-expanded.visible {
  display: block;
}

.recipe-section-label {
  font-weight:   700;
  margin-bottom: var(--space-3);
}

.recipe-section-label + ol,
.recipe-section-label + ul {
  margin-bottom: var(--space-6);
}

.recipe-ingredients {
  list-style: none;
  padding:    0;
  margin:     0;
}

.recipe-ingredients li {
  padding:       var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.recipe-ingredients li:last-child {
  border-bottom: none;
}

.recipe-method {
  padding-left: var(--space-6);
  margin:       0;
}

.recipe-method li {
  padding:     var(--space-2) 0;
  line-height: var(--leading-body);
}

.shopping-heading {
  margin-top:    var(--space-8);
  margin-bottom: var(--space-3);
}

.shopping-subheading {
  margin-bottom: var(--space-6);
}

.shopping-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-5);
  margin-bottom:         var(--space-6);
}

.shopping-card {
  background:    var(--color-background);
  border-top:    1px solid var(--color-border);
  border-right:  1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-left:   1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       var(--space-5);
}

.shopping-card h3 {
  margin-bottom: var(--space-3);
}

.shopping-card ul {
  list-style-type: disc;
  padding-left:    var(--space-5);
  margin:          0;
}

.shopping-card ul li {
  margin-bottom: var(--space-1);
}

.shopping-actions {
  display:         flex;
  justify-content: flex-end;
  gap:             var(--space-3);
  padding-bottom:  var(--space-10);
}

.btn-print {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  font-family:      var(--font);
  font-size:        var(--text-button);
  font-weight:      var(--weight-regular);
  line-height:      1;
  background-color: var(--color-primary);
  color:            var(--color-text);
  border:           none;
  border-radius:    var(--radius-md);
  padding:          var(--space-4) 40px;
  cursor:           pointer;
  text-decoration:  none;
  transition:       background-color 0.2s ease, transform 0.1s ease;
}

.btn-print:hover  { background-color: #E6B000; }
.btn-print:active { transform: scale(0.98); }

.btn-back-home {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  font-family:      var(--font);
  font-size:        var(--text-button);
  font-weight:      var(--weight-regular);
  line-height:      1;
  background-color: var(--color-surface);
  color:            var(--color-text);
  border:           none;
  border-radius:    var(--radius-md);
  padding:          var(--space-4) 40px;
  cursor:           pointer;
  transition:       background-color 0.2s ease, transform 0.1s ease;
}

.btn-back-home:hover  { background-color: var(--color-border); }
.btn-back-home:active { transform: scale(0.98); }


/* ============================================
   ORDER CONFIRMED — Page styles
   ============================================ */

.confirmed-layout {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  padding-top:    var(--space-9);
  padding-bottom: var(--space-10);
  gap:            var(--space-5);
}

.confirmed-card {
  width:         100%;
  max-width:     560px;
  text-align:    left;
  background:    var(--color-background);
  border-top:    1px solid var(--color-border);
  border-right:  1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-left:   1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       var(--space-6);
}

.confirmed-layout-columns {
  display:     flex;
  gap:         var(--space-8);
  align-items: flex-start;
}

.confirmed-left {
  flex:      2;
  min-width: 0;
}

.confirmed-right {
  flex: 1;
}

.confirmed-summary-card {
  background-color: var(--color-background);
  border-top:       1px solid var(--color-border);
  border-right:     1px solid var(--color-border);
  border-bottom:    1px solid var(--color-border);
  border-left:      1px solid var(--color-border);
  border-radius:    var(--radius-md);
  padding:          var(--space-6);
  margin-top:       var(--space-6);
  display:          inline-flex;
  flex-direction:   column;
  gap:              var(--space-3);
  min-width:        280px;
}

.btn-home {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  font-family:      var(--font);
  font-size:        var(--text-button);
  font-weight:      var(--weight-regular);
  line-height:      1;
  background-color: var(--color-primary);
  color:            var(--color-text);
  border:           none;
  border-radius:    var(--radius-md);
  padding:          var(--space-4) 40px;
  cursor:           pointer;
  text-decoration:  none;
  transition:       background-color 0.2s ease, transform 0.1s ease;
}

.btn-home:hover  { background-color: #E6B000; }
.btn-home:active { transform: scale(0.98); }

.confirmed-recipes-section {
  margin-top:     var(--space-8);
  padding-bottom: var(--space-8);
}

.confirmed-recipes-section h2 {
  margin-bottom: var(--space-3);
}

.confirmed-recipes-section > p {
  margin-bottom: var(--space-6);
}

.confirmed-recipes-row {
  display:     flex;
  gap:         var(--space-4);
  align-items: stretch;
}

.confirmed-recipe-card {
  flex:             1;
  background-color: var(--color-surface);
  border-top:       1px solid var(--color-border);
  border-right:     1px solid var(--color-border);
  border-bottom:    1px solid var(--color-border);
  border-left:      4px solid var(--color-primary);
  border-radius:    var(--radius-md);
  padding:          var(--space-6);
  display:          flex;
  flex-direction:   column;
  gap:              var(--space-2);
}

.btn-get-recipes {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  margin-top:       var(--space-6);
  background-color: var(--color-primary);
  color:            var(--color-text);
  padding:          var(--space-4) var(--space-6);
  border-radius:    var(--radius-md);
  border:           none;
  font-family:      var(--font);
  font-size:        var(--text-button);
  font-weight:      var(--weight-regular);
  text-align:       center;
  text-decoration:  none;
  cursor:           pointer;
  transition:       background-color 0.2s ease;
}

.btn-get-recipes:hover { background-color: #E6B000; }


/* ============================================
   LOADING MENU — Page styles
   ============================================ */

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

.loading-center {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding-top:     var(--space-10);
  gap:             var(--space-6);
  text-align:      center;
}

.loading-spinner {
  width:         60px;
  height:        60px;
  border-radius: var(--radius-pill);
  border:        4px solid var(--color-border);
  border-top:    4px solid var(--color-primary);
  animation:     spin 0.8s linear infinite;
  flex-shrink:   0;
}


/* ============================================
   PRINT — styles
   ============================================ */

@media print {

  /* Page size and margins */
  @page {
    size:          A4;
    margin-top:    1.5cm;
    margin-bottom: 1.5cm;
    margin-left:   2cm;
    margin-right:  2cm;
  }

  /* Accurate colour rendering and base type */
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust:         exact;
    font-size:        11pt;
    background-color: white !important;
    color:            #412D04 !important;
  }

  /* Print font sizes */
  h2   { font-size: 18pt !important; }
  h3   { font-size: 14pt !important; }
  small,
  .text-muted,
  .text-small,
  .menu-card-time,
  .shopping-subheading { font-size: 9pt !important; }

  /* Brown text on all text elements */
  p, li {
    color: #412D04 !important;
  }

  /* White backgrounds and brown text on all card types */
  .recipe-card,
  .shopping-card,
  .order-card,
  .card,
  .site-header {
    background-color: white !important;
    color:            #412D04 !important;
  }

  /* Hide progress bar */
  .progress-bar {
    display: none !important;
  }

  /* Nav bar: visible for print, only logo shown */
  .site-header {
    display: block !important;
  }

  .site-header > * {
    display: none !important;
  }

  .logo-link {
    display: inline !important;
  }

  .logo {
    color:                      #FFC50F !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust:         exact;
  }

  /* Hide interactive elements */
  .btn-print,
  .btn-back-home,
  .recipe-toggle-btn {
    display: none !important;
  }

  /* Always show expanded recipe content */
  .recipe-card-expanded {
    display: block !important;
  }

  /* Page break before every recipe card except the first */
  .recipe-card + .recipe-card {
    page-break-before: always;
    break-before:      page;
  }

  /* Shopping list starts on a new page */
  #shopping-section {
    page-break-before: always;
    break-before:      page;
  }

  /* Clean up card borders and shadows */
  .recipe-card,
  .shopping-card,
  .order-card,
  .card {
    box-shadow:    none !important;
    border-top:    1px solid #ccc !important;
    border-right:  1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important;
    border-left:   1px solid #ccc !important;
  }

  /* Single-column shopping grid for print */
  .shopping-grid {
    grid-template-columns: 1fr;
    gap:                   var(--space-3);
  }

  /* Keep each shopping category on one page */
  .shopping-card {
    page-break-inside: avoid;
    break-inside:      avoid;
  }

}