/* greenbags storefront — design tokens + layout.
   Accent colour arrives per council via body{--accent} (Emily's "pink buttons"). */
:root {
  --ink: #24312a;
  --body: #4a564e;
  --muted: #77837a;
  --line: #e3e8e0;
  --paper: #ffffff;
  --wash: #f6f8f3;
  --accent: #578c32;
  --accent-ink: #ffffff;
  --warn: #b3541e;
  --good: #3c7a28;
  --focus: #1c5fd6;
  --radius: 10px;
  --panel-w: 560px;
}
* {
  box-sizing: border-box;
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  color: var(--body);
  background: var(--wash);
  font-size: 16.5px;
  line-height: 1.6;
}
::placeholder {
  color: rgb(119 131 122 / 0.45);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
}
.skip:focus {
  left: 0;
}

:is(a, button, input, textarea, summary, [role="combobox"]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- split shell ---------- */
.shell {
  display: flex;
  min-height: 100vh;
}
.panel {
  width: var(--panel-w);
  max-width: 100%;
  flex-shrink: 0;
  background: var(--paper);
  padding: 28px 44px 32px;
  display: flex;
  flex-direction: column;
  box-shadow: 8px 0 30px rgb(36 49 42 / 0.08);
  z-index: 1;
}
.hero {
  flex: 1;
  background-size: cover;
  background-position: 62% center;
  min-height: 240px;
}
/* Optional angled panel/image divider (desktop only) — the old Randwick look. */
@media (min-width: 861px) {
  .hero-angled {
    clip-path: polygon(56px 0, 100% 0, 100% 100%, 0 100%);
    margin-left: -56px;
  }
  .hero-angled-reverse {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 56px 100%);
    margin-left: -56px;
  }
}
@media (max-width: 860px) {
  .shell {
    flex-direction: column-reverse;
  }
  .panel {
    width: 100%;
    box-shadow: 0 -8px 30px rgb(36 49 42 / 0.08);
    padding: 24px 22px 30px;
  }
  .hero {
    min-height: 42vh;
    background-position: 62% 22%;
  }
}

/* ---------- brand row ---------- */
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-bottom: 20px;
}
.brand-logo {
  height: 44px;
  max-width: 240px;
  object-fit: contain;
}
.brand-name {
  font-weight: 700;
  color: var(--ink);
  font-size: 19px;
}
.brand-cap {
  height: 72px;
  object-fit: contain;
}

/* ---------- steps ---------- */
.steps {
  display: flex;
  gap: 6px;
  margin-bottom: 26px;
}
.step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--wash);
  border: 1.5px solid transparent;
}
.step-n {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #d8ded4;
  color: var(--ink);
  font-size: 12.5px;
  flex-shrink: 0;
}
.step-current {
  color: var(--ink);
  border-color: var(--accent);
  background: #fff;
}
.step-current .step-n {
  background: var(--accent);
  color: var(--accent-ink);
}
.step-done {
  color: var(--good);
}
.step-done .step-n {
  background: var(--good);
  color: #fff;
}
/* Residents are ~80% mobile: keep the step labels readable at phone widths
   instead of collapsing to bare numbers (UX review 6 Aug, item shipped 21 Aug). */
@media (max-width: 400px) {
  .steps {
    gap: 4px;
  }
  .step {
    font-size: 11px;
    gap: 5px;
    padding: 7px 6px;
    white-space: nowrap;
    justify-content: center;
  }
  .step .step-n {
    width: 18px;
    height: 18px;
    font-size: 11px;
  }
}

/* ---------- type ---------- */
h1 {
  color: var(--ink);
  font-size: 27px;
  line-height: 1.25;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
h2 {
  color: var(--ink);
  font-size: 16.5px;
  margin-bottom: 6px;
}
.h-warn {
  color: var(--ink); /* was var(--warn) red — Mel (4 Aug): black reads calmer */
}
.h-good {
  color: var(--good);
}
.intro {
  margin-bottom: 22px;
}
.step-label {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
main {
  flex: 1;
}

/* ---------- address combo ---------- */
.addr-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}
.combo {
  position: relative;
}
.combo input {
  width: 100%;
  font-size: 18px;
  padding: 15px 16px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  transition: border-color 0.15s;
}
.combo input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 4px rgb(87 140 50 / 0.15);
}
#addr-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5;
  list-style: none;
  padding: 6px;
  margin: 0;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgb(36 49 42 / 0.16);
  max-height: 290px;
  overflow: auto;
}
#addr-list li {
  padding: 11px 12px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--ink);
  font-size: 15.5px;
}
#addr-list li:hover,
#addr-list li[aria-selected="true"] {
  background: rgb(87 140 50 / 0.12);
}
/* throttled, not "address not found" — must not look clickable */
#addr-list .ac-note {
  color: var(--muted);
  cursor: default;
  font-size: 14.5px;
}
#addr-list .ac-note:hover {
  background: none;
}
#addr-list .no-results {
  color: var(--muted);
  cursor: default;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  padding: 16px 26px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 3px 0 rgb(0 0 0 / 0.18);
}
.btn-primary:hover {
  filter: brightness(1.07);
}
.btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 rgb(0 0 0 / 0.18);
}
.btn-big {
  width: 100%;
  padding: 18px 26px;
  font-size: 18px;
  margin-top: 6px;
}

/* ---------- help / callouts ---------- */
.help {
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  margin: 16px 0;
  background: #fff;
}
.help summary {
  cursor: pointer;
  padding: 13px 16px;
  font-weight: 600;
  color: var(--ink);
  list-style-position: inside;
}
.help[open] summary {
  border-bottom: 1.5px solid var(--line);
}
.help-body {
  padding: 13px 16px;
  font-size: 15px;
}
.help-body p + p {
  margin-top: 10px;
}

.notice {
  background: #fdf7e3;
  border: 1.5px solid #ecd9a0;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 15px;
}
.callout {
  background: var(--wash);
  border-left: 4px solid var(--muted);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 14px 0 20px;
}
.callout p + p {
  margin-top: 10px;
}
.callout-warn {
  border-left-color: var(--warn);
}
.eligible-banner {
  background: rgb(87 140 50 / 0.1);
  border: 1.5px solid rgb(87 140 50 / 0.4);
  border-radius: var(--radius);
  padding: 13px 16px;
  margin-bottom: 16px;
  color: var(--ink);
  font-size: 15.5px;
}
.eligible-banner::before {
  content: "✓ ";
  color: var(--good);
  font-weight: 800;
}

.addr-echo {
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
}
.alloc-note {
  font-size: 14px;
  color: var(--muted);
  margin-top: 18px;
}
.assist {
  margin: 20px 0;
}
.assist p {
  font-size: 15px;
}
.field-error {
  color: #a3271e;
  font-weight: 600;
  margin: 10px 0;
}
.input-error,
textarea.input-error {
  border-color: #a3271e;
  box-shadow: 0 0 0 3px rgba(163, 39, 30, 0.12);
}
.link-back {
  color: var(--muted);
  text-decoration: underline;
  font-size: 15px;
}
.re-enter {
  font-size: 14.5px;
  margin-bottom: 16px;
}
a {
  color: var(--accent);
}
a.phone {
  white-space: nowrap;
  font-weight: 600;
}

/* ---------- product ---------- */
.product {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin: 6px 0 18px;
  background: #fff;
}
.product-img {
  width: 128px;
  height: 128px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.product-name {
  font-size: 20px;
  margin-bottom: 8px;
}
.product-body p {
  font-size: 15px;
}
.product-body p + p {
  margin-top: 8px;
}
.learn-more {
  font-size: 14.5px;
}
.learn-fold {
  margin-top: 6px;
}
.learn-fold summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
  font-size: 15px;
  list-style: none;
}
.learn-fold summary::-webkit-details-marker {
  display: none;
}
.learn-fold summary::after {
  content: " ›";
}
.learn-fold[open] summary::after {
  content: " ⌄";
}
.learn-fold > *:not(summary) {
  margin-top: 8px;
}
@media (max-width: 480px) {
  .product {
    flex-direction: column;
  }
  .product-img {
    width: 100%;
    height: 170px;
  }
}
/* Mel (26 Aug): in the panel/photo split the expanded product info read as a
   tall narrow slab. On wide screens an open fold lets the panel borrow width
   from the photo and the description balance across two columns. */
@media (min-width: 1100px) {
  .panel {
    transition: width 0.3s ease;
  }
  .shell:has(.learn-fold[open]) .panel {
    width: min(900px, 72vw);
  }
  .shell:has(.learn-fold[open]) .fold-body {
    column-count: 2;
    column-gap: 38px;
  }
  .shell:has(.learn-fold[open]) .fold-body p {
    break-inside: avoid;
  }
}
@media (prefers-reduced-motion: reduce) {
  .panel {
    transition: none;
  }
}

/* ---------- forms ---------- */
.delivery-form .field,
.survey-form .field {
  margin-bottom: 18px;
}
label {
  display: block;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
}
.hint {
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 7px;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea {
  width: 100%;
  font-size: 16.5px;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
}
input:focus,
textarea:focus {
  border-color: var(--accent);
  outline: none;
}
.privacy-line {
  font-size: 14px;
  background: var(--wash);
  border-radius: 8px;
  padding: 11px 14px;
  margin: 16px 0 8px;
}

/* ---------- confirmed ----------
   Font hierarchy (Mel, 25 Aug): the order detail line with the ADDRESS is the
   biggest, the "save this page" and "this period's pack" lines sit at body size. */
.thanks {
  font-size: 17px;
  margin-bottom: 14px;
}
.order-ref {
  font-size: 19px;
  color: var(--ink);
  background: var(--wash);
  border: 1.5px dashed var(--accent);
  padding: 13px 18px;
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.order-detail {
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 16px;
}
.confirm-alloc {
  /* Was `inherit`, which took the page body size and rendered this line LARGER
     than the "What happens next" copy above it. Emily (SSS) reported it on the
     Sutherland Shire program page, 10 Sep 2026. Match `.assist p`. */
  font-size: 15px;
  color: var(--body);
  margin-top: 18px;
}

/* ---------- wide (photo-free) pages: the survey ---------- */
.shell-wide {
  display: block;
}
.shell-wide .panel {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  min-height: 100vh;
  box-shadow: 0 0 30px rgb(36 49 42 / 0.08);
}

/* ---------- tracking progress (/t/:token) ---------- */
.track-steps {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 20px 0 24px;
}
.tstep {
  flex: 1;
  text-align: center;
  position: relative;
  min-width: 0;
}
.tstep::before {
  content: "";
  position: absolute;
  top: 11px;
  left: calc(-50% + 14px);
  right: calc(50% + 14px);
  height: 3px;
  border-radius: 2px;
  background: var(--line);
}
.tstep:first-child::before {
  display: none;
}
.tstep-done::before,
.tstep-current::before {
  background: var(--good);
}
.tstep-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin: 0 auto 6px;
  display: grid;
  place-items: center;
  background: #d8ded4;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  position: relative;
  z-index: 1;
}
.tstep-done .tstep-dot {
  background: var(--good);
}
.tstep-current .tstep-dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);
}
.tstep-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.25;
}
.tstep-done .tstep-label,
.tstep-current .tstep-label {
  color: var(--ink);
}
.tstep-date {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
@media (max-width: 420px) {
  .tstep-label {
    font-size: 10.5px;
  }
  .tstep-date {
    font-size: 10px;
  }
}

/* ---------- survey (SurveyMonkey-mirrored) ---------- */
.sv-q {
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  margin-bottom: 16px;
}
.sv-q legend {
  font-weight: 700;
  color: var(--ink);
  padding: 0 6px;
  font-size: 15.5px;
}
.sv-q legend label {
  font-weight: 700;
  margin: 0;
}
.sv-n {
  color: var(--accent);
}
/* Q1 options in two columns filled top-to-bottom (VS/MS/Neutral | MD/VD),
   mirroring the SurveyMonkey layout — Marianne's pass, 25 Aug. */
.sv-opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 8px 18px;
  max-width: 560px;
}
@media (max-width: 480px) {
  .sv-opts {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}
.sv-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: 14.5px;
  color: var(--body);
}
.sv-opt input {
  accent-color: var(--accent);
  width: 17px;
  height: 17px;
}

/* matrix: one grid — aspect rows × the shared option columns */
.sv-matrix {
  display: block;
}
.sv-mx-head,
.sv-mx-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.5fr) repeat(6, 1fr);
  align-items: center;
  gap: 2px;
}
.sv-mx-head span {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  line-height: 1.2;
  padding: 4px 2px 8px;
}
.sv-mx-row {
  border-top: 1px solid var(--line);
}
.sv-mx-row:nth-child(odd) {
  background: var(--wash);
}
.sv-mx-label {
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
  padding: 10px 6px 10px 4px;
  line-height: 1.3;
}
.sv-mx-cell {
  display: grid;
  place-items: center;
  padding: 10px 0;
  cursor: pointer;
  margin: 0;
}
.sv-mx-cell input {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.sv-cell-lab {
  display: none;
}
/* phones: the grid folds into stacked rows with visible option labels */
@media (max-width: 620px) {
  .sv-mx-head {
    display: none;
  }
  .sv-mx-row {
    display: block;
    padding: 10px 2px;
  }
  .sv-mx-label {
    display: block;
    padding: 0 0 6px;
  }
  .sv-mx-cell {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 12px 3px 0;
  }
  .sv-cell-lab {
    display: inline;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--body);
  }
}

/* 0–10 recommend number line: one tap on a value */
.nps-ends {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 6px;
}
.nps-line {
  display: flex;
  gap: 4px;
}
.nps-cell {
  flex: 1;
  margin: 0;
  cursor: pointer;
}
.nps-cell input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip-path: inset(50%);
  overflow: hidden;
}
.nps-cell span {
  display: grid;
  place-items: center;
  height: 42px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-weight: 700;
  color: var(--ink);
  font-size: 15px;
}
.nps-cell input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.nps-cell input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
@media (max-width: 480px) {
  .nps-line {
    gap: 3px;
  }
  .nps-cell span {
    height: 38px;
    font-size: 13.5px;
    border-radius: 6px;
  }
}
.sv-submit {
  margin-top: 4px;
}

/* ---------- footer ---------- */
.foot {
  border-top: 1.5px solid var(--line);
  margin-top: 30px;
  padding-top: 14px;
}
.foot-privacy {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}
.foot-links {
  font-size: 13.5px;
}
.foot-links a {
  color: var(--muted);
}

/* ---------- prose / privacy ---------- */
.prose p {
  margin-bottom: 12px;
  font-size: 15.5px;
}

/* ---------- apex ---------- */
.apex {
  max-width: 460px;
  margin: 18vh auto 0;
  text-align: center;
  padding: 24px;
}
.apex-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 20px;
  background: radial-gradient(circle at 35% 30%, #9dc480, #578c32);
}
.apex h1 {
  margin-bottom: 10px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

@media print {
  .hero,
  .skip {
    display: none;
  }
  .panel {
    width: 100%;
    box-shadow: none;
  }
}

/* bullet lists from editable content ("- " lines) */
main ul {
  margin: 10px 0;
  padding-left: 20px;
}
main ul li {
  margin: 4px 0;
}

/* ---------- 23 July review: CTA shimmer, input glow, exit-intent ---------- */
/* Shimmer on the step-2 Continue button — signals "there's more to do". */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}
.btn-shimmer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgb(255 255 255 / 0.35), transparent);
  animation: gb-shimmer 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gb-shimmer {
  0% {
    left: -60%;
  }
  55% {
    left: 115%;
  }
  100% {
    left: 115%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-shimmer::after {
    animation: none;
    display: none;
  }
}

/* Green glow when the address field is active (Marianne: make it obvious). */
.combo:focus-within input {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Exit-intent reminder modal */
.exit-overlay {
  position: fixed;
  inset: 0;
  background: rgb(29 43 34 / 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}
.exit-modal {
  background: #fff;
  border-radius: 14px;
  padding: 26px 28px;
  max-width: 430px;
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.25);
}
.exit-modal h2 {
  margin: 0 0 8px;
  font-size: 21px;
}
.exit-modal p {
  margin: 0 0 18px;
}
.exit-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.exit-close {
  background: none;
  border: none;
  color: var(--accent, #3c7a28);
  text-decoration: underline;
  cursor: pointer;
  font-size: 14.5px;
  padding: 8px;
}