/* deploy-refresh */
/* =========================================================
   XNY Farms Limited — Global Styles
   Agricultural / earthy palette: greens, gold/amber, cream
   Plain CSS, no build step.
   ========================================================= */

:root {
  /* Brand palette — anchored to 4 exact hex values confirmed by the client
     from the real logo file: #06552A (dark forest green), #8CC10F
     (lime/chartreuse accent), #DAD905 (gold/yellow), #0B4124 (dark green
     text). --green-700, --green-600, --amber-500 and --ink below are
     those exact confirmed values; the remaining shades in each scale
     (900/800/100, amber-600/400/100) are computed tints/shades derived
     from them for gradients, hover states and light backgrounds. */
  --green-900: #043d1e;
  --green-800: #054826;
  --green-700: #06552a;
  --green-600: #8cc10f;
  --green-100: #e7f3d9;

  --amber-600: #b0af04;
  --amber-500: #dad905;
  --amber-400: #e7e650;
  --amber-100: #fafad8;

  --cream: #faf6ee;
  --cream-dark: #f2ead9;
  --brown: #5a4632;
  /* Base body/paragraph text color. Darkened from the logo-exact #0B4124
     to a deeper green-charcoal for readability — still reads as "dark
     text" rather than "colored text", while tying into the brand's
     forest-green identity. ~16.3:1 contrast against white/cream
     (WCAG AAA), vs. ~11–12:1 for the previous shade. */
  --ink: #14231a;
  /* Secondary/de-emphasized text (descriptions, form notes, lead
     paragraphs) — darkened for readability alongside --ink, but kept
     lighter than --ink so the two-tier hierarchy still reads clearly.
     ~9.3:1 contrast against white / ~8.6:1 against cream (WCAG AAA),
     vs. ~5.6:1 / ~5.2:1 for the previous shade (AA, but only just). */
  --muted: #3d4a42;
  --white: #ffffff;
  --line: #e3dbc9;

  --shadow-sm: 0 1px 3px rgba(11, 65, 36, 0.08);
  --shadow-md: 0 6px 20px rgba(11, 65, 36, 0.12);
  --radius: 12px;
  --radius-sm: 8px;
  --maxw: 1160px;

  --font-head: "Baloo 2", "Poppins", "Segoe UI", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Reset-ish ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--green-700); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--green-900); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
.section { padding: 4rem 0; }
.section--tight { padding: 2.5rem 0; }
.section--cream { background: var(--cream); }
.section--white { background: var(--white); }
.section--green { background: var(--green-800); color: var(--cream); }
.section--green h2, .section--green h3 { color: var(--white); }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--amber-600);
  margin-bottom: .6rem;
}
.lead { font-size: 1.12rem; color: var(--muted); max-width: 60ch; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .98rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .12s ease, background .2s ease, color .2s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn--primary { background: var(--amber-500); color: var(--green-900); }
.btn--primary:hover { background: var(--amber-400); }
.btn--green { background: var(--green-700); color: var(--white); }
.btn--green:hover { background: var(--green-800); }
.btn--ghost { background: transparent; border-color: var(--cream); color: var(--cream); }
.btn--ghost:hover { background: rgba(255,255,255,.12); }
.btn--outline { background: transparent; border-color: var(--green-700); color: var(--green-700); }
.btn--outline:hover { background: var(--green-700); color: #fff; }

/* ---------- Header / Nav ---------- */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-sm);
}
/* Flex order (rather than source order) drives the desktop layout:
   brand (1) — nav links (2) — actions/cart (3). The cart + hamburger live
   in .nav__actions, which sits OUTSIDE .nav__links on purpose, so the cart
   stays visible in the bar on mobile instead of collapsing into the
   hamburger menu. .nav__links gets margin-left:auto to push the links and
   the cart together over to the right. */
.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 0;
}
.brand { display: flex; align-items: center; gap: .7rem; min-width: 0; flex: 0 1 auto; order: 1; }
.brand:hover { text-decoration: none; }
/* Logo is a wide lockup (1893x831 ≈ 2.28:1) — scale height fluidly between
   mobile and desktop; width follows automatically to preserve aspect ratio. */
.brand__logo { height: clamp(36px, 6vw, 56px); width: auto; max-width: 100%; display: block; }
/* Homepage-only: bigger header logo. Scoped to body.home so the other
   8 pages keep the standard .brand__logo size above untouched. */
body.home .site-header .brand__logo { height: clamp(48px, 7vw, 72px); }
.footer-brand .brand__logo-wrap {
  display: inline-block;
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: .4rem .65rem;
  line-height: 0;
}
.footer-brand .brand__logo { height: clamp(26px, 4vw, 40px); }

.nav__links { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0 0 0 auto; padding: 0; order: 2; }
.nav__links a {
  display: inline-block;
  padding: .55rem .9rem;
  border-radius: 8px;
  color: var(--ink);
  font-weight: 600;
  font-size: .96rem;
}
.nav__links a:hover { background: var(--green-100); color: var(--green-800); text-decoration: none; }
.nav__links a.is-active { color: var(--green-800); background: var(--green-100); }
.nav__cta { margin-left: .4rem; }

/* Cart + hamburger group. Stays in the bar at every breakpoint. */
.nav__actions { display: flex; align-items: center; gap: .35rem; order: 3; }

.cart-link {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: 10px;
  color: var(--green-800);
  transition: background .2s ease, color .2s ease;
}
.cart-link:hover { background: var(--green-100); color: var(--green-900); text-decoration: none; }
/* Inline SVG rather than the old 🛒 emoji: emoji can't take a stroke
   weight and renders differently per-platform. currentColor + a heavy
   stroke keeps it crisp and clearly visible against the white header. */
.cart-icon { width: 27px; height: 27px; display: block; }

.cart-badge {
  position: absolute; top: 2px; right: 2px;
  background: var(--amber-500); color: var(--green-900);
  font-family: var(--font-body);
  font-size: .74rem; font-weight: 800;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  border: 2px solid var(--white);
  box-shadow: var(--shadow-sm);
}
.cart-badge[hidden] { display: none; }

.nav__toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 46px; height: 46px;
  cursor: pointer;
  padding: 0;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block; width: 22px; height: 2.5px; border-radius: 2px;
  background: var(--green-900);
  margin: 0 auto; position: relative;
  transition: transform .28s ease, background-color .15s ease;
}
.nav__toggle span::before { position: absolute; left: 0; top: -7px; }
.nav__toggle span::after { position: absolute; left: 0; top: 7px; }

/* Hamburger → X. The middle bar fades out while the outer two slide to
   the centre (translateY cancels their ±7px offset) and cross over. */
.nav__toggle.is-open span { background-color: transparent; }
.nav__toggle.is-open span::before { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    linear-gradient(rgba(31,61,19,.72), rgba(31,61,19,.78)),
    url("../assets/hero-farm.svg") center/cover no-repeat;
  color: var(--cream);
  padding: 5.5rem 0 5rem;
}
.hero__inner { max-width: 720px; }
.hero h1 { color: #fff; margin-bottom: .4rem; }
.hero__tagline { font-size: 1.25rem; color: var(--amber-100); margin-bottom: 1.5rem; max-width: 55ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.page-hero {
  background: linear-gradient(135deg, var(--green-800), var(--green-700));
  color: var(--cream);
  padding: 3.2rem 0;
}
.page-hero h1 { color: #fff; margin-bottom: .3rem; }
.page-hero p { color: var(--amber-100); max-width: 62ch; margin: 0; }

/* ---------- Grid / Cards ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card__ribbon {
  position: absolute; top: 18px; right: -38px;
  background: var(--green-700); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .4rem 2.6rem;
  transform: rotate(45deg);
  box-shadow: var(--shadow-sm);
  z-index: 3;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card__media { aspect-ratio: 16 / 10; background: var(--cream-dark); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }

/* Portrait product-photo variant (bottles, etc.). Source images are now
   normalized to identical 800x1000 canvases (bottle bottom-aligned,
   consistent padding on every side), so the container can just use a
   fixed aspect-ratio matching that canvas instead of the previous
   clamp()-based height workaround that existed to compensate for
   4 differently-shaped source photos. object-fit: contain is kept as a
   safety net (never crops, never overflows) rather than a load-bearing
   fix. Written as a single higher-specificity selector
   (.card .card__media--contain) so it can never lose a cascade tie to
   the base .card__media rule regardless of source order. */
.card .card__media--contain {
  aspect-ratio: 4 / 5;
  background: #fff;
  padding: 1.25rem;
  box-sizing: border-box;
}
.card .card__media--contain img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  padding: 0;
}
.card__body { padding: 1.25rem 1.25rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: .35rem; }
.card__body p { color: var(--muted); font-size: .96rem; }
.card__footer { margin-top: auto; padding-top: .8rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.price { font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; color: var(--green-800); margin: .3rem 0 .9rem; }

.badge {
  display: inline-block;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .28rem .6rem; border-radius: 999px;
  background: var(--amber-100); color: var(--amber-600);
  margin-bottom: .6rem;
}
.badge--soon { background: var(--green-100); color: var(--green-700); }

/* ---------- Trust / feature list ---------- */
.feature { text-align: left; }
.feature__icon {
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--green-100); color: var(--green-700);
  display: grid; place-items: center; font-size: 1.6rem; margin-bottom: .9rem;
}
.feature h3 { margin-bottom: .3rem; }
.feature p { color: var(--muted); font-size: .97rem; margin: 0; }

/* ---------- Product detail blocks ---------- */
.product-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.2rem;
  align-items: center;
  padding: 2.4rem 0;
  border-bottom: 1px solid var(--line);
}
.product-row:last-child { border-bottom: 0; }
.product-row--flip .product-row__media { order: 2; }
.product-row__media {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cream-dark);
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-sm);
}
.product-row__media img { width: 100%; height: 100%; object-fit: cover; }
.product-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }
.chip {
  font-size: .85rem; font-weight: 600;
  background: var(--cream-dark); border: 1px solid var(--line);
  padding: .4rem .8rem; border-radius: 999px; color: var(--brown);
}
.chip strong { color: var(--green-800); }

/* ---------- Forms ---------- */
.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: var(--shadow-sm);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: .9rem; color: var(--ink); }
.field label .req { color: #b23b2e; }
.field input, .field select, .field textarea {
  font: inherit;
  padding: .7rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--cream);
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--green-600); background: #fff;
  box-shadow: 0 0 0 3px rgba(74,124,47,.15);
}
.field textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: .85rem; color: var(--muted); margin-top: 1rem; }
.form-status { margin-top: 1rem; font-weight: 600; }

/* ---------- Info list (contact) ---------- */
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li { display: flex; gap: .9rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.info-list li:last-child { border-bottom: 0; }
.info-list .info-ic { font-size: 1.3rem; flex: 0 0 auto; }
.info-list strong { display: block; color: var(--green-900); font-family: var(--font-head); }
.info-list span { color: var(--muted); }

.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  min-height: 320px;
}
.map-embed iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

/* ---------- Callout / CTA band ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--green-900), var(--green-700));
  color: var(--cream);
  border-radius: var(--radius);
  padding: 2.6rem;
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--amber-100); max-width: 55ch; margin: 0 auto 1.4rem; }

/* ---------- Legal / long-form content ---------- */
.legal { max-width: 820px; }
.legal h2 { margin-top: 2.2rem; font-size: 1.5rem; }
.legal h3 { margin-top: 1.5rem; }
.legal ul, .legal ol { padding-left: 1.3rem; }
.legal li { margin-bottom: .4rem; }
.legal .updated { color: var(--muted); font-size: .92rem; }
.legal table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.legal th, .legal td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: left; font-size: .95rem; }
.legal th { background: var(--green-100); color: var(--green-900); }

.placeholder-note {
  background: var(--amber-100);
  border-left: 4px solid var(--amber-500);
  padding: .8rem 1rem;
  border-radius: var(--radius-sm);
  font-size: .92rem;
  color: var(--brown);
  margin: 1rem 0;
}

/* ---------- Cart / Checkout ---------- */
.cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2rem; align-items: start; }
.cart-items-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .4rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
.cart-item {
  display: flex; gap: 1rem; align-items: center;
  padding: 1.1rem 0; border-bottom: 1px solid var(--line);
}
.cart-item:last-child { border-bottom: 0; }
.cart-item__media {
  width: 64px; height: 64px; flex: 0 0 auto;
  border-radius: var(--radius-sm); background: var(--cream-dark); overflow: hidden;
}
.cart-item__media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; background: #fff; }
.cart-item__body { flex: 1; min-width: 0; }
.cart-item__body h3 { font-size: 1rem; margin-bottom: .15rem; }
.cart-item__meta { color: var(--muted); font-size: .88rem; }
.cart-item__qty { display: flex; align-items: center; gap: .6rem; margin-top: .55rem; }
.qty-btn {
  width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--white); cursor: pointer; font-weight: 700; color: var(--green-800);
  display: grid; place-items: center; line-height: 1; padding: 0;
}
.qty-btn:hover { background: var(--green-100); }
.cart-item__qty-value { min-width: 1.4em; text-align: center; font-weight: 600; }
.cart-item__price { text-align: right; flex: 0 0 auto; min-width: 90px; font-weight: 700; color: var(--green-800); }
.cart-item__remove {
  background: none; border: 0; color: #b23b2e; font-size: .82rem; cursor: pointer;
  margin-top: .5rem; padding: 0;
}
.cart-item__remove:hover { text-decoration: underline; }

.cart-line { display: flex; justify-content: space-between; padding: .45rem 0; font-size: .98rem; color: var(--muted); }
.cart-line--total {
  border-top: 1px solid var(--line); margin-top: .5rem; padding-top: .9rem;
  font-size: 1.2rem; font-weight: 700; color: var(--green-900);
}

.delivery-options { display: flex; flex-direction: column; gap: .5rem; margin-top: .4rem; }
.delivery-option {
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .65rem .85rem; cursor: pointer; font-size: .92rem;
}
.delivery-option:has(input:checked) { border-color: var(--green-600); background: var(--green-100); }
.delivery-option input { margin: 0; }

.confirmation-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.4rem;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: var(--shadow-sm);
}
.confirmation-card .confirmation-icon { font-size: 2.6rem; margin-bottom: .6rem; }
.confirmation-card h2 { margin-bottom: .5rem; }
.confirmation-ref {
  display: inline-block; font-family: var(--font-head); font-weight: 700;
  background: var(--green-100); color: var(--green-800);
  padding: .35rem .9rem; border-radius: var(--radius-sm); margin: .6rem 0 1.2rem;
}

@media (max-width: 760px) {
  .cart-layout { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--green-900); color: #d9dcc9; padding: 3rem 0 1.5rem; }
.site-footer a { color: var(--amber-100); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2rem; }
.footer-brand p { color: #b9c0a6; font-size: .95rem; }
.footer-col h4 { color: #fff; font-size: .95rem; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .9rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: .5rem; font-size: .95rem; }
.footer-legal {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 2.2rem; padding-top: 1.2rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .85rem; color: #9aa384;
}
.footer-legal a { color: #9aa384; }

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1rem; }
hr.divider { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
/* Nav collapses to a hamburger earlier than the other 760px breakpoints
   below, because the wide logo lockup leaves too little room for the
   full link list (the "Wholesale Enquiry" button was wrapping onto two
   lines around 768–800px otherwise). */
@media (max-width: 860px) {
  .nav__toggle { display: block; }
  /* .nav__links leaves the flow here, so .nav__actions (cart + hamburger)
     needs its own auto margin to stay pinned to the right of the bar. */
  .nav__actions { margin-left: auto; }
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: var(--white); border-bottom: 1px solid var(--line);
    margin: 0;
    padding: .6rem 1.25rem 1rem; gap: .2rem;
    box-shadow: var(--shadow-md);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: .75rem .6rem; }
  .nav__cta { margin: .4rem 0 0; text-align: center; }
}
@media (max-width: 760px) {
  .hero { padding: 4rem 0; }
  .product-row, .grid--2, .form-grid { grid-template-columns: 1fr; }
  .product-row--flip .product-row__media { order: 0; }
  .cta-band { padding: 2rem 1.3rem; }
}
@media (max-width: 520px) {
  .grid--4, .grid--3 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}