/* ==================================================================
   Hillersden Farm - site styles (replaces Bootstrap 4.4.1)
   Colours come from the logo: leaf, sprout and harvest gold.
   ================================================================== */

:root {
  --surface: #fefaed;
  --surface-white: #ffffff;
  --note-top: #f7eed2;
  --note-bottom: #efe1ae;
  --ink: #212529;
  --ink-hand: #351c09;
  --muted: #5a5650;
  --rule: #8c8b8b;
  --line: #d9d2bd;
  --leaf: #1b4001;
  --leaf-hover: #2a5c06;
  --leaf-soft: #e5ecd8;
  --sprout: #5a7302;
  --harvest: #f2b705;
  --harvest-soft: #fcefc2;
  --harvest-deep: #7a5500;
  --footer: #484644;
  --footer-deep: #2e2c2b;
  --on-footer: #ffffff;
  --on-footer-muted: #979695;

  --serif: adobe-garamond-pro, "EB Garamond", Garamond, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hand: "Nothing You Could Do", cursive;

  --shadow-soft: 0 .125rem .25rem rgba(0, 0, 0, .15);
  --shadow-postcard: 4px 4px 6px rgba(0, 0, 0, .15);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface-white);
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 500; line-height: 1.2; }
p { margin: 0 0 1rem; }
a { color: var(--leaf); }
a:hover { color: var(--sprout); }
:focus-visible { outline: 3px solid var(--harvest); outline-offset: 2px; }
.nowrap { white-space: nowrap; }
.muted { color: var(--muted); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 2000;
  background: var(--leaf); color: #fff; padding: .5rem 1rem; border-radius: 4px;
}
.skip-link:focus { top: 1rem; color: #fff; }
.texture { background-color: var(--surface); background-image: url("../images/texture01.png"); }

/* ---------- Type ---------- */
.header-text {
  font-family: var(--serif); font-weight: 300;
  font-size: 1.8rem; line-height: 1; margin: 0 0 1rem;
}
.header-text2 {
  font-weight: 300; text-shadow: var(--shadow-soft);
  font-size: 2.5rem; line-height: 1; margin: 0;
}
.page-title {
  font-family: var(--serif); font-weight: 300; text-align: center;
  font-size: clamp(2.4rem, 6vw, 3.5rem); line-height: 1.2; margin: 0 0 2rem;
}
.small-heading { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; }
.lead { text-align: center; font-size: 1.3rem; font-weight: 300; max-width: 40rem; margin: 0 auto; }
hr.double-rule {
  border: 0; border-top: 3px double var(--rule);
  margin: 1rem; height: 0;
}
@media (min-width: 576px)  { .header-text { font-size: 2.5rem; } .header-text2 { font-size: 3.3rem; } }
@media (min-width: 768px)  { .header-text { font-size: 3rem; line-height: 1.1; } .header-text2 { font-size: 4rem; line-height: 1.1; } }
@media (min-width: 992px)  { .header-text { font-size: 3.3rem; line-height: 1.2; } .header-text2 { font-size: 4.3rem; line-height: 1.2; } }
@media (min-width: 1200px) { .header-text { font-size: 3.5rem; } .header-text2 { font-size: 4.5rem; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; font: inherit; font-weight: 500; text-decoration: none; cursor: pointer;
  background: var(--leaf); color: #fff; border: 2px solid var(--leaf);
  padding: .5rem 1.4rem; border-radius: 4px; transition: background .2s, border-color .2s;
}
.btn:hover { background: var(--leaf-hover); border-color: var(--leaf-hover); color: #fff; }
.btn--lg { font-size: 1.25rem; padding: .7rem 2.2rem; }

/* ---------- Menu button + overlay ---------- */
.menu-button {
  position: fixed; top: 1rem; right: 1rem; z-index: 1030;
  border: 0; padding: 0; margin: .5rem; cursor: pointer;
  font: inherit; font-size: 30px; line-height: 1; color: var(--footer-deep);
  background: var(--surface) url("../images/texture01.png");
  border-radius: 2.5rem; box-shadow: none;
}
.menu-button__bg {
  position: absolute; inset: 0; border-radius: 2.5rem; overflow: hidden;
  transition: transform .4s cubic-bezier(.1, 0, .3, 1);
}
.menu-button__bg::before {
  content: ""; position: absolute; width: 110%; height: 0; padding-bottom: 110%;
  top: 50%; left: 50%; border-radius: 50%; background: var(--harvest);
  transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 1);
  transition: transform .4s cubic-bezier(.1, 0, .3, 1);
}
.menu-button:hover .menu-button__bg { transform: scale3d(1.1, 1.1, 1); }
.menu-button:hover .menu-button__bg::before { transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1); }
.menu-button__label { position: relative; display: block; padding: 1rem 1.25rem; font-weight: 700; }
.menu-button__word { display: none; }
@media (min-width: 768px) {
  .menu-button__label { padding: 1.5rem 3rem; }
  .menu-button__word { display: inline; }
}

/* Desktop: links on show instead of the MENU button */
.top-nav { display: none; }
@media (min-width: 992px) {
  .top-nav { display: block; position: fixed; top: 1.25rem; right: 1.25rem; z-index: 1030; }
  .top-nav ul {
    list-style: none; margin: 0; padding: .35rem; display: flex; gap: .25rem;
    background: var(--surface) url("../images/texture01.png"); border-radius: 2.5rem;
    box-shadow: var(--shadow-soft);
  }
  .top-nav a {
    display: block; padding: .7rem 1.4rem; border-radius: 2rem;
    color: var(--footer-deep); text-decoration: none; font-weight: 600; font-size: 1.05rem;
    transition: background .25s;
  }
  .top-nav a:hover { background: var(--harvest); color: var(--ink); }
  .top-nav a[aria-current="page"] { background: var(--leaf); color: #fff; }
  .menu-button { display: none; }
}

.menu-overlay {
  position: fixed; inset: 0; z-index: 1050;
  background: rgba(0, 0, 0, .9);
  display: flex; align-items: flex-start; justify-content: center;
  opacity: 0; transition: opacity .4s;
}
.menu-overlay[hidden] { display: none; }
.menu-overlay.is-open { opacity: 1; }
.menu-overlay nav { margin-top: 25vh; text-align: center; }
.menu-overlay ul { list-style: none; margin: 0; padding: 0; }
.menu-overlay li { margin: 0 0 1.75rem; }
.menu-overlay a {
  font-size: 42px; color: #bfbfbf; text-decoration: none; padding: 8px; transition: color .3s;
}
.menu-overlay a:hover, .menu-overlay a:focus { color: #f1f1f1; }
.menu-overlay a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--harvest); text-underline-offset: .3em; }
.menu-close {
  position: absolute; top: 20px; right: 45px; background: none; border: 0; cursor: pointer;
  font-size: 60px; line-height: 1; color: #bfbfbf;
}
.menu-close:hover { color: #f1f1f1; }
@media (max-height: 450px) {
  .menu-overlay a { font-size: 20px; }
  .menu-close { font-size: 40px; top: 15px; right: 35px; }
  .menu-overlay nav { margin-top: 15vh; }
}

/* ---------- Home hero (photo seen through the hill) ---------- */
/* The cream paper sits on top of the photo. Its lower edge is the hill
   behind the farm, drawn in index.html: solid cream, two see-through
   bands, then clear so the photo shows. Replaces the skyline-top PNGs. */
.hero {
  --paper: #fffbee;
  background: #cfd3d6 url("../images/background/snowy-fence-small.jpg") center / cover no-repeat;
}
.hero__paper {
  background: var(--paper) url("../images/texture01.png");
  text-align: center; padding: 4.5rem 1.5rem .5rem;
}
.hero__hill { position: relative; }
.hero__hill svg { display: block; width: 100%; height: auto; aspect-ratio: 3500 / 687; }
.hill-solid { fill: var(--paper); }
.hill-mist  { fill: var(--paper); fill-opacity: .63; }
.hill-haze  { fill: var(--paper); fill-opacity: .25; }
/* The paper speckle carries on down to the far ridge. */
.hero__hill-paper { display: none; }
@supports ((mask-image: url("x.svg")) or (-webkit-mask-image: url("x.svg"))) {
  .hero__hill-paper {
    display: block; position: absolute; inset: 0;
    background: url("../images/texture01.png");
    -webkit-mask: url("../images/hill-top-mask.svg") 0 0 / 100% 100% no-repeat;
            mask: url("../images/hill-top-mask.svg") 0 0 / 100% 100% no-repeat;
  }
}
.hero__logo { margin: 0 auto; max-width: 160px; }
.hero__tagline {
  font-family: var(--serif); font-weight: 300; margin: .5rem 0 0;
  font-size: 2rem; line-height: 1.05;
}
.hero__spacer { height: 40px; }
.white-blend {
  height: 110px;
  background: linear-gradient(0deg, #fff 0%, rgba(255,255,255,.5) 25%, rgba(255,255,255,.3) 50%, rgba(255,255,255,0) 100%);
}
@media (min-width: 576px) {
  .hero { background-image: url("../images/background/snowy-fence-medium.jpg"); }
  .hero__logo { max-width: 200px; }
  .hero__tagline { font-size: 2.64rem; }
}
@media (min-width: 768px) {
  .hero__paper { padding-top: 2rem; }
  .hero__logo { max-width: 240px; }
  .hero__tagline { font-size: 3.2rem; line-height: 1.1; }
  .hero__spacer { height: 60px; }
}
@media (min-width: 992px) {
  .hero { background-image: url("../images/background/snowy-fence-large.jpg"); }
  .hero__logo { max-width: 260px; }
  .hero__tagline { font-size: 3.3rem; line-height: 1.15; }
}
@media (min-width: 1200px) {
  .hero__logo { max-width: 300px; }
  .hero__tagline { font-size: 3.6rem; }
}
/* Parallax where it works well (desktop pointers, motion allowed) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero, .page-hero { background-attachment: fixed; }
}

/* ---------- Inner page hero (raindrops) ---------- */
.page-hero {
  background: #b9c2c6 url("../images/background/raindrops-small.jpg") center / cover no-repeat;
  min-height: 250px;
}
.page-hero__header { padding: .5rem 3rem 0; }
.page-hero__logo { max-width: 220px; width: 100%; padding-top: .5rem; }
.page-hero__blend {
  height: 110px;
  background: linear-gradient(0deg, #fff 0%, rgba(255,255,255,.5) 25%, rgba(255,255,255,.3) 50%, rgba(255,255,255,0) 100%);
}
@media (min-width: 576px) { .page-hero { background-image: url("../images/background/raindrops-medium.jpg"); } }
@media (min-width: 992px) { .page-hero { background-image: url("../images/background/raindrops-large.jpg"); } }

/* ---------- Store notice ---------- */
.store-notice { background: #fff; text-align: center; padding: 2rem 1.5rem 3rem; }
.store-notice__title {
  font-family: var(--serif); font-weight: 400; line-height: 1.15;
  font-size: 2rem; margin: 0 auto 1.5rem; max-width: 46rem;
}
.store-notice__line {
  font-family: var(--serif); font-size: 1.4rem; line-height: 1.35; color: var(--muted);
  max-width: 40rem; margin: 0 auto .75rem;
}
.store-notice--open .store-notice__title { color: var(--leaf); }
.store-notice--inline { padding: 1rem 0 0; }
@media (min-width: 768px) {
  .store-notice { padding: 2rem 3rem 3.5rem; }
  .store-notice__title { font-size: 2.5rem; }
  .store-notice__line { font-size: 1.55rem; }
}

/* "Tell me when you open" */
.notify { max-width: 34rem; margin: 2rem auto 0; padding: 1.5rem; background: var(--surface) url("../images/texture01.png"); border-top: 4px solid var(--harvest); }
.notify__label { display: block; margin-bottom: .75rem; }
.notify__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.notify__row input { flex: 1 1 14rem; }
.notify__row .btn { flex: 0 0 auto; }
.notify__small { font-size: .9rem; color: var(--muted); margin: .6rem 0 0; }
.notify__done { margin: 0; color: var(--leaf); }
.notify__error { color: var(--harvest-deep); margin: .5rem 0 0; font-weight: 600; }

/* ---------- Split rows (photo + content) ---------- */
.split { display: flex; flex-direction: column; }
.split__image {
  background-color: #d9dcdc; background-repeat: no-repeat; background-position: center; background-size: cover;
  height: 350px;
}
.split__body { padding: 3rem; display: flex; flex-direction: column; justify-content: center; }
.split--reverse .split__image { order: -1; }
@media (min-width: 576px) { .split__image { height: 400px; } }
@media (min-width: 768px) {
  .split { flex-direction: row; }
  .split > * { flex: 0 0 50%; max-width: 50%; }
  .split__image { height: 700px; }
  .split--reverse .split__image { order: 0; }
}

/* Photos load small first, then sharp once on screen (no layout shift). */
#callout-image-1 { background-image: url("../images/callout-images/rushes-small-lazy.jpg"); }
#callout-image-2 { background-image: url("../images/callout-images/snow-drift-small-lazy.jpg"); }
#callout-image-1.is-loaded { background-image: url("../images/callout-images/rushes-small.jpg"); }
#callout-image-2.is-loaded { background-image: url("../images/callout-images/snow-drift-small.jpg"); }
@media (min-width: 576px) {
  #callout-image-1 { background-image: url("../images/callout-images/rushes-medium-lazy.jpg"); }
  #callout-image-2 { background-image: url("../images/callout-images/snow-drift-medium-lazy.jpg"); }
  #callout-image-1.is-loaded { background-image: url("../images/callout-images/rushes-medium.jpg"); }
  #callout-image-2.is-loaded { background-image: url("../images/callout-images/snow-drift-medium.jpg"); }
}
@media (min-width: 768px) {
  #callout-image-1 { background-image: url("../images/callout-images/rushes-large-lazy.jpg"); }
  #callout-image-2 { background-image: url("../images/callout-images/snow-drift-large-lazy.jpg"); }
  #callout-image-1.is-loaded { background-image: url("../images/callout-images/rushes-large.jpg"); }
  #callout-image-2.is-loaded { background-image: url("../images/callout-images/snow-drift-large.jpg"); }
}

/* ---------- How we farm: three values ---------- */
.values { list-style: none; margin: 0 auto; padding: 0; max-width: 34rem; width: 100%; }
.value {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .75rem;
  padding: 1.75rem 0;
}
.value + .value { border-top: 3px double var(--rule); }
.value__art { width: auto; flex: 0 0 auto; }
.value__art--basket { height: 70px; }
.value__art--fork   { height: 90px; }
.value__art--doodle { height: 70px; }
.value__text {
  font-family: var(--serif); font-weight: 300; margin: 0;
  font-size: 1.9rem; line-height: 1.15;
}
@media (min-width: 576px) {
  .value { flex-direction: row; text-align: left; gap: 1.5rem; }
  .value__art { width: 96px; height: 90px; object-fit: contain; }
  .value__text { font-size: 2.2rem; }
}
@media (min-width: 1200px) { .value__text { font-size: 2.6rem; } }

/* ---------- Sticky-note to-do lists ---------- */
/* Two notes fanned like a pile: next month peeks out underneath,
   this month sits on top where it can be read. */
.split__body--todo { text-align: center; justify-content: flex-start; }
.to-do-box { position: relative; margin: 1rem auto 0; width: 100%; max-width: 500px; min-height: 600px; }
.note {
  position: absolute; top: 0; left: 50%; padding: 8px 24px;
  font-family: var(--hand); font-size: 1.4em; line-height: 1.5; color: var(--ink-hand); text-align: left;
  box-shadow: var(--shadow-soft);
  background: linear-gradient(var(--note-top) 56%, var(--note-bottom) 100%);
}
.note ol { margin: 12px; padding-left: 1.4em; }
.note li.done { text-decoration: line-through; }
.note__head { text-align: center; margin: 0 0 .25rem; }
.note--over .note__head { padding-top: 1.5em; }
.note__doodle { position: absolute; }
.note__doodle--a { top: 10px; left: 10px; }
.note__doodle--b { bottom: 60px; right: 10px; }

.note { width: 250px; min-height: 480px; padding-bottom: 1.25rem; }
.note--under { transform: translateX(-62%) rotate(-7deg); }
.note--over  { top: 40px; transform: translateX(-40%) rotate(5deg); }
.note--under .note__head, .note--under ol { opacity: .75; }
@media (min-width: 576px) {
  .to-do-box { min-height: 470px; }
  .note { width: 330px; min-height: 380px; }
}
@media (min-width: 768px) {
  .to-do-box { min-height: 560px; }
  .note { width: 250px; min-height: 470px; }
}
@media (min-width: 992px) {
  .to-do-box { min-height: 520px; }
  .note { width: 300px; min-height: 430px; }
}
@media (min-width: 1200px) {
  .to-do-box { min-height: 500px; }
  .note { width: 350px; min-height: 410px; }
}

/* ---------- "Local, seasonal food" + postcards ---------- */
/* The same hill, in the footer colour, rising into the footer.
   Bottom padding = the hill's height (it's 10.2% as tall as it is wide). */
.skyline-footer {
  background: url("../images/hill-footer.svg") center bottom / 100% 10.2vw no-repeat;
  padding-bottom: calc(10.2vw + .5rem);
}
.section-title { text-align: center; padding: 3rem 1.5rem 0; }
.two-col { display: flex; flex-direction: column; }
@media (min-width: 768px) {
  .two-col { flex-direction: row; }
  .two-col > * { flex: 0 0 50%; max-width: 50%; }
}
.local-food__text { text-align: center; padding: .5rem 1.5rem; align-self: center; }
.local-food__cards { padding: 1.5rem 3rem 1rem; }
.postcard-pile { position: relative; min-height: 470px; margin: auto; }
@media (min-width: 576px) { .postcard-pile { min-height: 380px; } }
@media (min-width: 768px) { .postcard-pile { min-height: 420px; } }
@media (min-width: 992px) { .postcard-pile { min-height: 370px; } }
.local-food__text p { font-size: 1.25rem; max-width: 30rem; margin-left: auto; margin-right: auto; }
.postcard {
  position: absolute; padding: 0; cursor: zoom-in; background: #fff;
  border: 10px solid #fff; box-shadow: var(--shadow-postcard);
  max-width: 100%; transition: transform .3s;
}
.postcard img { max-width: 100%; }
.postcard01 { transform: rotate(-3deg); top: 1%; left: 1%; }
.postcard02 { transform: rotate(7deg); top: 30%; left: 5%; }
.postcard:hover, .postcard:focus-visible { z-index: 2; }
.postcard01:hover { transform: rotate(-3deg) scale(1.02); }
.postcard02:hover { transform: rotate(7deg) scale(1.02); }
@media (min-width: 576px)  { .postcard01 { left: 5%; } .postcard02 { top: 10%; left: 20%; } }
@media (min-width: 768px)  { .postcard01 { left: 8%; } .postcard02 { top: 20%; left: 3%; } }
@media (min-width: 992px)  { .postcard01 { left: 5%; } .postcard02 { top: 10%; left: 45%; } }
@media (min-width: 1200px) { .postcard01 { left: 25%; } .postcard02 { top: 10%; left: 5%; } }

.postcard-viewer {
  border: 0; padding: 0; background: #fff; max-width: min(960px, 94vw); width: 100%;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
.postcard-viewer::backdrop { background: rgba(0, 0, 0, .6); }
.postcard-viewer figure { margin: 0; }
.postcard-viewer img { width: 100%; }
.postcard-viewer button {
  position: absolute; border: 0; cursor: pointer; color: #fff; background: rgba(0,0,0,.35);
  font-size: 2.4rem; line-height: 1; width: 3rem; height: 3rem; border-radius: 50%;
}
.postcard-viewer__close { top: .5rem; right: .5rem; }
.postcard-viewer__prev { left: .5rem; top: 50%; transform: translateY(-50%); }
.postcard-viewer__next { right: .5rem; top: 50%; transform: translateY(-50%); }

/* ---------- Footer ---------- */
.canopy-band { display: flex; height: 6px; }
.canopy-band span { flex: 1; }
.canopy-band span:nth-child(1) { background: var(--leaf); }
.canopy-band span:nth-child(2) { background: var(--sprout); }
.canopy-band span:nth-child(3) { background: var(--harvest); }
.site-footer { background: var(--footer); color: var(--on-footer); }
.site-footer a { color: var(--on-footer); text-decoration: none; }
.site-footer__inner { display: grid; gap: 1rem; padding: 1rem 1.5rem 3rem; text-align: center; }
.site-footer__logo { padding: 1rem; }
.footer-logo { margin: 0 auto; max-width: 190px; }
.site-footer__col { padding: 1.5rem; }
.footer-badge {
  display: inline-block; font-family: var(--serif); font-weight: 500; font-size: 1.24rem;
  background: var(--footer-deep); color: #fff; padding: 1rem; border-radius: 4px; margin: 0 0 1rem;
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .4rem; }
.footer-email { display: inline-flex; align-items: center; gap: .4rem; }
.site-footer__copy { background: var(--footer-deep); color: var(--on-footer-muted); text-align: center; margin: 0; padding: .6rem; font-size: 1rem; }
@media (min-width: 768px) {
  .site-footer__inner { grid-template-columns: repeat(3, 1fr); padding: 0 3rem 3rem; text-align: left; }
  .site-footer__logo { text-align: center; }
  .site-footer__col { padding: 1rem 0; }
  .footer-logo { max-width: 240px; }
}
@media (min-width: 992px)  { .footer-logo { max-width: 290px; } }
@media (min-width: 1200px) { .footer-logo { max-width: 300px; } }

.link-anim { position: relative; white-space: nowrap; }
.link-anim::before {
  content: ""; position: absolute; width: 100%; height: 1px; background: currentColor; top: 100%; left: 0;
  pointer-events: none; transform-origin: 100% 50%; transform: scale3d(0, 1, 1); transition: transform .3s;
}
.link-anim:hover::before, .link-anim:focus-visible::before { transform-origin: 0% 50%; transform: scale3d(1, 1, 1); }

/* ---------- Inner page content ---------- */
.content-section { padding: 3rem 1.5rem; }
@media (min-width: 768px) { .content-section { padding: 3rem; } }
.contact-info__text { text-align: center; padding-bottom: 2rem; }
.contact-info__text .small-heading { margin-top: 1.5rem; }
.contact-email { display: inline-flex; align-items: center; gap: .4rem; }
.contact-info__map { text-align: center; }
.contact-info__map iframe { border: 0; width: 100%; max-width: 600px; height: 450px; }

/* ---------- Forms ---------- */
.contact-form, .order-form { max-width: 960px; margin: 0 auto; }
.field { margin-bottom: 1rem; text-align: left; }
.field label { display: block; margin-bottom: .4rem; }
.field-row { display: grid; gap: 0 1.5rem; }
@media (min-width: 768px) { .field-row { grid-template-columns: 1fr 1fr; } }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  padding: .5rem .75rem; background: #fff; border: 1px solid #ced4da; border-radius: 4px;
}
input:focus, textarea:focus { outline: 0; border-color: var(--sprout); box-shadow: 0 0 0 3px rgba(90, 115, 2, .25); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-errors { background: var(--harvest-soft); color: var(--harvest-deep); border-left: 4px solid var(--harvest); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.form-errors ul { margin: 0; padding-left: 1.2rem; }
.form-errors p { margin-bottom: .4rem; }
.form-success { background: var(--leaf-soft); color: var(--leaf); border-left: 4px solid var(--leaf); padding: 1rem 1.25rem; max-width: 960px; margin: 0 auto 1.5rem; }
.form-success p { margin: 0; }
.contact-form .btn { display: block; margin: 0 auto; }
.contact-form .muted { text-align: left; }

/* ---------- Order page ---------- */
.order-form fieldset { border: 0; padding: 0; margin: 0 0 2.5rem; min-width: 0; }
.order-form legend { display: block; width: 100%; text-align: center; padding: 0; }
.product-list { list-style: none; margin: 0; padding: 0; background: #fff; box-shadow: var(--shadow-postcard); }
.product {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name name" "price qty";
  gap: .5rem 1rem; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line);
}
.product:last-child { border-bottom: 0; }
.product__name { grid-area: name; font-family: var(--serif); font-size: 1.45rem; }
.product__unit { display: block; font-family: var(--sans); font-size: .95rem; color: var(--muted); }
.product__price { grid-area: price; font-weight: 500; }
.qty { grid-area: qty; display: inline-flex; align-items: center; }
.qty input { width: 3.5rem; text-align: center; border-radius: 0; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty__btn {
  width: 2.6rem; height: 2.6rem; font: inherit; font-size: 1.3rem; cursor: pointer;
  border: 1px solid var(--leaf); background: #fff; color: var(--leaf);
}
.qty__btn:first-child { border-radius: 4px 0 0 4px; }
.qty__btn:last-child { border-radius: 0 4px 4px 0; }
.qty__btn:hover { background: var(--leaf-soft); }
.qty input { height: 2.6rem; border-left: 0; border-right: 0; border-color: var(--leaf); }
@media (min-width: 576px) {
  .product { grid-template-columns: 1fr auto auto; grid-template-areas: "name price qty"; }
}
.choice-row { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .choice-row { grid-template-columns: 1fr 1fr; } }
.choice {
  display: flex; gap: .75rem; align-items: flex-start; cursor: pointer;
  background: #fff; border: 2px solid var(--line); padding: 1rem 1.25rem;
}
.choice input { margin-top: .35rem; accent-color: var(--leaf); width: 1.1rem; height: 1.1rem; }
.choice small { color: var(--muted); font-size: .95rem; }
.choice:has(input:checked) { border-color: var(--leaf); background: var(--leaf-soft); }
.order-form.is-pickup .field--address { display: none; }
.order-total {
  background: #fff; box-shadow: var(--shadow-postcard); padding: 1.5rem; text-align: center;
  border-top: 6px solid var(--harvest); max-width: 28rem; margin: 0 auto;
}
.order-total__line { display: flex; justify-content: space-between; margin: 0 0 .4rem; }
.order-total__line--big { font-family: var(--serif); font-size: 1.8rem; border-top: 3px double var(--rule); padding-top: .5rem; margin-top: .5rem; }
.order-total__note { font-size: .95rem; color: var(--muted); }
.order-total__note.is-short { color: var(--harvest-deep); font-weight: 600; }
.order-done { text-align: center; max-width: 40rem; margin: 0 auto; }
.order-summary { width: 100%; border-collapse: collapse; margin: 1.5rem 0; text-align: left; background: #fff; box-shadow: var(--shadow-postcard); }
.order-summary td { padding: .6rem 1rem; border-bottom: 1px solid var(--line); }
.order-summary td:last-child { text-align: right; white-space: nowrap; }
.order-summary__total td { font-weight: 600; border-bottom: 0; }