:root {
  color-scheme: light;
  font-family: "Segoe UI", system-ui, sans-serif;
  --forest: #173c31;
  --forest-dark: #142e25;
  --paper: #f8f7f0;
  --ink: #20392f;
  --soft-ink: #54635b;
  --cream-line: #e1e3d7;
  --quiet: #337247;
  --quiet-bg: #eaf5eb;
  --steady: #805800;
  --steady-bg: #fbf1d6;
  --busy: #a13f36;
  --busy-bg: #f9eae7;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
a, button, input { font: inherit; }
button { cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3px solid #20724e; outline-offset: 3px; }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.customer { background: var(--paper); color: var(--ink); min-height: 100vh; }
.customer-width { width: min(1136px, calc(100% - 64px)); margin-inline: auto; }
.brandbar { border-bottom: 1px solid var(--cream-line); background: #fdfbf5; }
.brandbar .customer-width { display: flex; justify-content: space-between; align-items: center; min-height: 66px; gap: 12px; }
.fct-brand img { display: block; width: 176px; max-width: 100%; height: auto; }
.private-label { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: #3a594a; }
.private-label .icon { width: 15px; height: 15px; }
.customer-page { padding-top: 21px; }
.customer-hero { position: relative; display: flex; align-items: center; min-height: 301px; overflow: hidden; border-radius: 16px; color: #fffcf0; background: #203d30; isolation: isolate; }
.customer-hero::before { content: ""; position: absolute; z-index: -2; inset: 0 0 0 35%; background: url("farm-hero.jpg") center 52% / cover no-repeat; }
.customer-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,#203d30 1%,#203d30 31%,#203d30e8 44%,#203d3054 65%,#19291e1a 100%); }
.hero-content { padding: 31px 43px 34px; }
.eyebrow, .step-label { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.hero-eyebrow { color: #f5e2a7; }
.hero-eyebrow span { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.customer h1, .customer h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.customer h1 { font-size: clamp(2.5rem,5.25vw,4.45rem); line-height: .99; letter-spacing: -.052em; margin: 13px 0 11px; }
.hero-content p { margin: 0 0 17px; font-size: 15px; max-width: 375px; line-height: 1.5; color: #f5f0e1; }
.hero-date { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 7px; background: #fffaf027; border: 1px solid #f9f4e053; font-size: 12px; font-weight: 650; }
.hero-date .icon { width: 16px; height: 16px; }
.customer-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(270px,310px); align-items: start; gap: 22px; margin-top: 21px; }
.customer-booking, .visit-card { border: 1px solid var(--cream-line); border-radius: 14px; background: #fffefa; padding: 24px; }
.customer h2 { margin: 9px 0 6px; font-size: clamp(1.8rem,3.3vw,2.55rem); line-height: 1.08; letter-spacing: -.035em; }
.step-label { color: #3c624d; }
.step-label span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #eaf1e7; letter-spacing: 0; font-size: 11px; }
.section-copy, .visit-hint { margin: 0; font-size: 13px; color: var(--soft-ink); line-height: 1.55; }
.day-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 18px 0 14px; }
.day-tab { padding: 10px 13px; border-radius: 8px; border: 1px solid #dce2d8; background: #fafbf7; text-align: left; color: #263f34; }
.day-tab strong, .day-tab span { display: block; }
.day-tab strong { font-size: 14px; }
.day-tab span { font-size: 11px; margin-top: 2px; }
.day-tab[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: white; }
.day-tab[aria-pressed="true"] span { color: #e0e9de; }
.legend { display: flex; gap: 6px 13px; align-items: center; flex-wrap: wrap; font-size: 11px; font-weight: 650; color: #35483e; }
.legend span { display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.legend small { font-size: inherit; color: var(--soft-ink); font-weight: 400; }
.legend-title { color: var(--soft-ink); }
.dot { width: 8px; height: 8px; flex: none; border-radius: 50%; display: inline-block; background: var(--level); }
.quiet { --level: var(--quiet); --level-bg: var(--quiet-bg); }
.steady { --level: var(--steady); --level-bg: var(--steady-bg); }
.busy { --level: var(--busy); --level-bg: var(--busy-bg); }
.slot-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 13px; }
.slot { display: grid; gap: 6px; min-width: 0; padding: 10px 11px; border: 1px solid #e1e5dc; border-radius: 8px; background: #fff; color: #20382d; text-align: left; }
.slot:hover:not(:disabled) { border-color: #789784; background: #fbfcf9; }
.slot[aria-pressed="true"] { border-color: #245b43; box-shadow: inset 0 0 0 1px #245b43; background: #f3f8f1; }
.slot:disabled, .day-tab:disabled, .customer-action:disabled { cursor: default; }
.slot[data-closed] { background: #f6f7f3; border-style: dashed; }
.slot[data-closed] .traffic-tag { color: #4f5952; background: #e8ebe5; }
.slot-top { display: flex; justify-content: space-between; align-items: center; gap: 3px; }
.slot-top strong { font-size: 14px; white-space: nowrap; }
.traffic-tag { display: inline-flex; align-items: center; gap: 4px; width: max-content; padding: 3px 6px; border-radius: 20px; color: var(--level); background: var(--level-bg); font-size: 10px; font-weight: 700; white-space: nowrap; }
.traffic-tag .dot { width: 6px; height: 6px; }
.slot-count { color: #536359; font-size: 11px; }
.availability:not(:empty) { margin-top: 12px; }
.visit-card { background: #edf2e8; border-color: #dce5d7; }
.visit-card h2 { font-size: 29px; margin-bottom: 13px; }
.visit-status { display: grid; align-items: start; grid-template-columns: 20px minmax(0,1fr); gap: 9px; padding: 11px 10px; border-radius: 8px; background: #f9fbf6; color: #43564a; font-size: 13px; line-height: 1.45; }
.visit-status .icon { color: #306447; }
.visit-status strong { display: block; color: #1c422f; }
.visit-hint { font-size: 12px; margin-top: 11px; }
.party-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 11px; }
.party-fields label { display: grid; gap: 4px; font-size: 12px; font-weight: 650; }
.party-fields input { width: 100%; min-height: 44px; padding: 5px 8px; border: 1px solid #cbd9cb; border-radius: 6px; color: var(--ink); background: #fff; font-size: 16px; }
.customer-action { display: flex; justify-content: space-between; align-items: center; gap: 5px; width: 100%; margin-top: 11px; padding: 10px 11px; background: var(--forest); color: white; border: 1px solid var(--forest); border-radius: 7px; font-size: 13px; font-weight: 650; text-align: left; }
.customer-action:disabled { opacity: .7; }
.customer-action.secondary { color: var(--forest); background: #fafbf7; border-color: #aec3b2; }
.visit-error { color: #8a2922; font-size: 13px; line-height: 1.55; }
.link-panel { margin-top: 21px; }
.link-panel .customer-action { width: auto; }
.footer-location { display: flex; align-items: center; gap: 10px; }
.location-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: #e9efe3; color: #2b6045; }
.customer-footer { padding: 22px 0 25px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; color: var(--soft-ink); font-size: 13px; }
.customer-footer p { margin: 3px 0 0; line-height: 1.45; }
.customer-footer a { color: #245b43; text-underline-offset: .18em; }

@media (max-width: 900px) {
  .customer-width { width: min(100% - 38px,1136px); }
  .customer-layout { grid-template-columns: minmax(0,1fr) minmax(220px,250px); gap: 13px; }
  .customer-booking, .visit-card { padding: 17px; }
  .slot-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 660px) {
  .customer-width { width: calc(100% - 28px); }
  .brandbar .customer-width { min-height: 57px; }
  .fct-brand img { width: 151px; }
  .customer-page { padding-top: 13px; }
  .customer-hero { min-height: 278px; align-items: end; }
  .customer-hero::before { inset: 0; background-position: center; }
  .customer-hero::after { background: linear-gradient(86deg,#1a3529 0%,#1a3529ed 29%,#1a3529a3 67%,#16291f55 100%); }
  .hero-content { padding: 23px 20px; }
  .hero-content p { font-size: 13px; max-width: 260px; }
  .customer-layout, .link-panel { margin-top: 13px; }
  .customer-layout { display: block; }
  .customer-aside { margin-top: 13px; }
}
@media (max-width: 370px) {
  .customer-booking { padding: 13px; }
  .slot { padding-inline: 7px; }
  .slot-top strong { font-size: 12px; }
  .traffic-tag { padding-inline: 4px; }
}