/* ==========================================================================
   Makgromart — site styles
   One stylesheet for every public page. The admin panel has its own.

   Contents
     1. Tokens        colours, type, spacing — change the look here
     2. Base
     3. Layout        container, sections, page heads
     4. Components    buttons, icons, forms, chips, stepper, badges
     5. Header & footer
     6. Home
     7. Products
     8. Cart & checkout
     9. Order page
    10. Thanks page
   ========================================================================== */

/* Headings font, self-hosted so no outside service is involved. One variable
   file covers every weight we use.
   Manrope, SIL Open Font License — see assets/fonts/manrope-OFL.txt. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../assets/fonts/manrope-variable.woff2") format("woff2-variations");
}

/* 1. Tokens ================================================================ */

:root {
  /* Colour. A fresh leaf green from the logo, a deep green for the big bands,
     and harvest amber as the one warm accent. */
  --bg: #f5f8f2;            /* airy, faintly green page */
  --surface: #ffffff;
  --ink: #10201a;           /* near-black text */
  --ink-2: #3c4b43;         /* secondary text */
  --muted: #637268;
  --line: #e1e9e0;
  --line-strong: #cbd8cc;

  --green: #15803d;         /* buttons and links */
  --green-dark: #0f6330;
  --green-deep: #0a3d21;    /* hero and footer */
  --green-tint: #e6f4ea;
  --leaf: #4cb050;          /* the logo's leaf, for highlights */

  --amber: #f5a524;         /* harvest accent: badges and the hero button */
  --amber-dark: #e08e0b;
  --ochre: #a2520a;         /* amber dark enough for small text */
  --ochre-tint: #fff3dc;

  --danger: #b42318;
  --footer-bg: #0a3d21;

  /* Type. Manrope for headings; system sans for body text costs nothing to load. */
  --font-display: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Five sizes on a 1.2 scale, plus one display size for the hero. */
  --fs-sm: 0.875rem;   /* 14 */
  --fs-base: 1rem;     /* 16 */
  --fs-md: 1.125rem;   /* 18 */
  --fs-lg: 1.375rem;   /* 22 */
  --fs-xl: 1.75rem;    /* 28 */
  --fs-display: clamp(2rem, 1.5rem + 2.1vw, 2.5rem);

  /* Spacing on an 8px rhythm (with 4 and 12 for tight spots). */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --section: clamp(var(--s-7), 8vw, var(--s-9));

  --radius-img: 12px;
  --radius: 10px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(10, 40, 25, 0.05), 0 4px 16px rgba(10, 40, 25, 0.07);
  --shadow-lift: 0 2px 4px rgba(10, 40, 25, 0.06), 0 14px 32px rgba(10, 40, 25, 0.12);

  --header-h: 84px;
  --container: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
}

/* 2. Base ================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

body.no-scroll { overflow: hidden; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }

p { margin: 0; }

a { color: var(--green); text-underline-offset: 0.2em; }
a:hover { color: var(--green-dark); }

img { display: block; max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--s-4);
  z-index: 100;
  padding: var(--s-2) var(--s-4);
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
}
.skip-link:focus { top: var(--s-2); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* 3. Layout ================================================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--tint { background: var(--surface); border-block: 1px solid var(--line); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  margin-bottom: var(--s-6);
}
.section-head p { max-width: 56ch; margin-top: var(--s-2); color: var(--ink-2); }

.eyebrow {
  margin-bottom: var(--s-2);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ochre);
}

.lead { font-size: var(--fs-md); line-height: 1.5; color: var(--ink-2); }

.page-head { padding-block: var(--s-6) var(--s-5); }
.page-head p:not(.eyebrow) { max-width: 60ch; margin-top: var(--s-2); color: var(--ink-2); }

.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }

.loading {
  padding: var(--s-8) 0;
  text-align: center;
  color: var(--muted);
}

/* 4. Components ============================================================ */

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: -0.2em;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-dark); color: #fff; }

/* For the dark green hero: a solid amber button and an outlined one. */
.btn--accent { background: var(--amber); color: #231500; }
.btn--accent:hover { background: var(--amber-dark); color: #231500; }
.btn--outline-light { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.btn--outline-light:hover { background: #fff; border-color: #fff; color: var(--green-deep); }

.btn--secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn--secondary:hover { border-color: var(--ink-2); color: var(--ink); }

.btn--ghost { background: transparent; color: var(--green); padding-inline: var(--s-3); }
.btn--ghost:hover { background: var(--green-tint); }

.btn--block { width: 100%; }
.btn--lg { min-height: 56px; font-size: var(--fs-md); }
.btn--sm { min-height: 40px; padding: 0 var(--s-4); font-size: var(--fs-sm); }

.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.link-btn:hover { color: var(--danger); }

/* Forms */
.field { display: flex; flex-direction: column; gap: var(--s-1); }
.field + .field { margin-top: var(--s-4); }
.field label, .label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.optional { font-weight: 400; color: var(--muted); }

.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  font-size: 16px;                      /* stops iPhones zooming on focus */
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.textarea { min-height: 96px; resize: vertical; }
.select {
  appearance: none;
  padding-right: var(--s-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2347524c' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(29, 97, 48, 0.18);
}

.check {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
  font-size: var(--fs-sm);
}
.check input { width: 20px; height: 20px; accent-color: var(--green); }

.form-error {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  background: #fdecea;
  color: var(--danger);
  font-size: var(--fs-sm);
}

/* Search box */
.search { position: relative; display: block; }
.search .icon {
  position: absolute;
  left: var(--s-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.search .input { padding-left: calc(var(--s-4) + 1.25em + var(--s-2)); }

/* Category chips */
.chips {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  padding-bottom: var(--s-1);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  min-height: 40px;
  padding: 0 var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { border-color: var(--ink-2); }
.chip[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }

/* Quantity stepper */
.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.stepper button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--green);
  cursor: pointer;
}
.stepper button:hover { background: var(--green-tint); }
.stepper button:disabled { color: var(--line-strong); cursor: not-allowed; background: none; }
.stepper output, .stepper .value {
  min-width: 2.5ch;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--s-5);
  z-index: 90;
  max-width: calc(100% - 2 * var(--s-4));
  padding: var(--s-3) var(--s-5);
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-sm);
  box-shadow: var(--shadow);
  transform: translateX(-50%);
}

/* 5. Header & footer ======================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.4) blur(8px);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  height: var(--header-h);
}
/* The logo: the round mark from the owner's logo, with the name set in type
   beside it, so the name reads clearly at any size. The logo's own lettering
   is too small to read once it fits in a header. */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  color: var(--green-deep);
  text-decoration: none;
}
.brand:hover { color: var(--green-deep); }
.brand-mark { height: 46px; width: auto; }
.brand-name {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.brand-name small {
  margin-top: 5px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--green);
}
@media (max-width: 420px) {
  .brand-mark { height: 40px; }
  .brand-name { font-size: 1.2rem; }
}
/* A different logo uploaded in the admin is shown whole, without the typed name. */
.brand--logo-only .brand-name { display: none; }
.brand--logo-only .brand-mark { height: 60px; max-width: 220px; object-fit: contain; }

.site-nav { display: flex; gap: var(--s-1); margin-left: auto; }
.site-nav a {
  padding: var(--s-2) var(--s-4);
  border-radius: 999px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.site-nav a:hover { color: var(--green-dark); background: var(--green-tint); }
.site-nav a[aria-current="page"] { color: var(--green-dark); background: var(--green-tint); }

.header-actions { display: flex; align-items: center; gap: var(--s-1); }

.cart-link, .menu-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.cart-link { background: var(--green-tint); color: var(--green-dark); border-radius: 999px; }
.cart-link:hover, .menu-btn:hover { background: var(--green-tint); color: var(--green-dark); }
.cart-link .icon, .menu-btn .icon { width: 24px; height: 24px; }

.cart-count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--amber);
  color: #2a1a00;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}

.menu-btn { display: none; }

@media (max-width: 760px) {
  .menu-btn { display: grid; }
  .header-actions { margin-left: auto; }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: var(--s-2) var(--gutter) var(--s-5);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(20, 30, 25, 0.08);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  }
  .site-nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .site-nav a {
    padding: var(--s-4) var(--s-2);
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    font-size: var(--fs-md);
  }
  .site-nav a:last-child { border-bottom: 0; }
}

.site-footer {
  margin-top: var(--section);
  padding-top: var(--s-8);
  background:
    radial-gradient(900px 400px at 100% 0%, rgba(76, 176, 80, 0.22), transparent 60%),
    var(--footer-bg);
  color: #d7e8dc;
  font-size: var(--fs-sm);
}
/* No strip of page colour between a white last section and the footer. */
main:has(> .section--tint:last-child) + .site-footer { margin-top: 0; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.footer-grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1.2fr; }
}

/* In the footer the mark sits on a white tile (recolouring it would turn a
   logo with a solid background into a blank box) and the name is white. */
.brand--footer { margin-bottom: var(--s-5); color: #fff; }
.brand--footer:hover { color: #fff; text-decoration: none; }
.brand--footer .brand-name { font-size: 1.6rem; }
.brand--footer .brand-name small { color: var(--amber); }
.brand-badge {
  display: grid;
  place-items: center;
  padding: 8px 10px;
  border-radius: 14px;
  background: #fff;
}
.brand-badge .brand-mark { height: 42px; }
.footer-brand p { max-width: 36ch; }

.footer-title {
  margin-bottom: var(--s-4);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
}
.footer-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); }
.footer-list li { display: flex; align-items: center; gap: var(--s-3); }
.footer-list .icon { color: #8fd49a; }

.socials { display: flex; gap: var(--s-2); margin-top: var(--s-5); }
.socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}
.socials a:hover { background: var(--amber); border-color: var(--amber); color: #2a1a00; text-decoration: none; }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: var(--s-7);
  padding-block: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #9fb3a5;
}
.footer-tagline { color: #b9c9be; }

/* 6. Home ================================================================== */

/* The hero: a deep green band, the words on one side and the photo on the
   other. Kept plain on purpose: a label, a heading, a line of text, two
   buttons, the way established shops do it. */
.hero {
  padding-block: var(--s-6) var(--s-7);
  color: #fff;
  background: linear-gradient(180deg, #0c4627 0%, var(--green-deep) 100%);
}
.hero-grid { display: grid; gap: var(--s-6); align-items: center; }

.hero-eyebrow {
  margin-bottom: var(--s-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
}
.hero h1 {
  max-width: 18ch;
  font-size: clamp(2.1rem, 1.5rem + 2.3vw, 3.1rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #fff;
}
.hero .lead { margin-top: var(--s-4); max-width: 46ch; color: rgba(255, 255, 255, 0.8); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.8);
}
.hero-points li { display: flex; align-items: center; gap: 6px; }
.hero-points .icon { width: 18px; height: 18px; color: #8fd49a; }

.hero-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 35% 40%;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.08);
  transition: opacity 0.3s ease;
}
/* Hidden until the site knows which photo the owner chose (site-content.js),
   so the starter photo never flashes up first. */
.hero-media img[data-waiting] { opacity: 0; }

@media (max-width: 899px) {
  .hero-media { order: -1; }
  .hero-actions .btn { flex: 1 1 180px; }
}
@media (min-width: 900px) {
  .hero { padding-block: var(--s-8); }
  .hero-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .hero-media img { aspect-ratio: 5 / 4; }
}

/* How ordering works */
.steps {
  display: grid;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li {
  counter-increment: step;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--s-4);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--leaf), var(--green));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
}

/* A soft green band, for "How it works". */
.section--leaf { background: linear-gradient(180deg, var(--green-tint), var(--bg)); }
.steps h3 { font-size: var(--fs-md); margin-bottom: var(--s-2); }
.steps p { color: var(--ink-2); }

/* Category cards: a row of tall photo cards that scrolls sideways, four to a
   screen on a laptop. A row never leaves a lonely card on its own line, however
   many categories the owner adds. */
.category-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 70%;
  gap: var(--s-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.category-rail::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .category-rail { grid-auto-columns: calc((100% - 2 * var(--s-4)) / 3); } }
@media (min-width: 1100px) { .category-rail { grid-auto-columns: calc((100% - 3 * var(--s-5)) / 4); gap: var(--s-5); } }

.rail-nav { display: flex; gap: var(--s-2); }
/* Phones swipe the row, and the next card peeking in shows there is more. */
@media (max-width: 699px) { .rail-nav { display: none; } }
.rail-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.rail-btn:hover:not(:disabled) { background: var(--green); border-color: var(--green); color: #fff; }
.rail-btn:disabled { opacity: 0.35; cursor: default; }

.category-tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--green), var(--green-deep));
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  scroll-snap-align: start;
}
.category-tile img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.category-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(6, 36, 18, 0) 40%, rgba(6, 36, 18, 0.88) 100%);
}
.category-tile:hover img { transform: scale(1.05); }
.category-tile:hover { color: #fff; }
/* Stands in for a category with no photo yet. */
.category-tile-empty {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.45);
}
.category-tile-empty .icon { width: 56px; height: 56px; margin-bottom: 30%; }
.category-tile-text {
  position: absolute;
  left: var(--s-5);
  right: var(--s-5);
  bottom: var(--s-5);
}
.category-tile small {
  display: block;
  margin-bottom: var(--s-1);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.8);
}
.category-tile strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.category-tile-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--amber);
}
.category-tile-cta .icon { width: 16px; height: 16px; transition: transform 0.2s ease; }
.category-tile:hover .category-tile-cta .icon { transform: translateX(3px); }

/* Services: a deep green band like the hero, with the services as white
   cards two by two. Photo beside the words on wide screens, above them on
   phones. Each card ends in one plain "Get a quote" link, as service
   companies do, and the band has one main button for anything else. */
.services {
  color: #fff;
  background: linear-gradient(180deg, #0c4627 0%, var(--green-deep) 100%);
}
.services .eyebrow { color: var(--amber); }
.services h2 { color: #fff; }
.services .section-head p { color: rgba(255, 255, 255, 0.78); }

.service-grid { display: grid; gap: var(--s-4); counter-reset: service; }
@media (min-width: 900px) { .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } }

.service-card {
  counter-increment: service;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
}
.service-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--green-tint);
}
.service-card > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--s-5);
}
/* 01, 02 … above each title. */
.service-card > div::before {
  content: counter(service, decimal-leading-zero);
  margin-bottom: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ochre);
}
.service-card h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.service-card p { margin-bottom: var(--s-5); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; }
@media (min-width: 600px) and (max-width: 899px), (min-width: 1100px) {
  .service-card { display: grid; grid-template-columns: 42% 1fr; }
  .service-card:not(:has(img)) { grid-template-columns: 1fr; }
  .service-card img { height: 100%; aspect-ratio: auto; min-height: 240px; }
}

.service-cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--green-tint);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--green-dark);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.service-cta:hover { border-color: var(--green); color: var(--green); }
.service-cta .icon { width: 16px; height: 16px; transition: transform 0.2s ease; }
.service-cta:hover .icon { transform: translateX(3px); }

/* Contact */
.contact-grid { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
.contact-card {
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.contact-list { margin: var(--s-5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-4); }
.contact-list li { display: flex; gap: var(--s-3); align-items: flex-start; }
.contact-list .icon { margin-top: 3px; color: var(--green); }
.contact-list strong { display: block; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }

/* 7. Products ============================================================== */

/* The products page: a coloured strip, then categories down the side on wide
   screens (chips across the top on phones) next to one grid of products. */
.shop-head {
  padding-block: var(--s-6);
  background:
    radial-gradient(600px 240px at 100% 0%, rgba(76, 176, 80, 0.2), transparent 70%),
    linear-gradient(180deg, var(--green-tint), var(--bg));
  border-bottom: 1px solid var(--line);
}
.shop-head h1 { font-size: var(--fs-display); }
.shop-head p:not(.eyebrow) { max-width: 60ch; margin-top: var(--s-2); color: var(--ink-2); }

.shop-layout { display: grid; gap: var(--s-5); padding-top: var(--s-5); }
@media (min-width: 960px) {
  .shop-layout { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-6); padding-top: var(--s-6); }
}

.shop-side { display: none; }
@media (min-width: 960px) {
  .shop-side {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--s-4));
    align-self: start;
    max-height: calc(100vh - var(--header-h) - var(--s-6));
    overflow-y: auto;
    padding: var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }
}
.shop-side-title {
  margin: 0 0 var(--s-2) var(--s-2);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ochre);
}
.cat-list { display: grid; gap: 2px; }
.cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  width: 100%;
  min-height: 40px;
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-radius: var(--radius);
  background: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
}
.cat-item:hover { background: var(--green-tint); color: var(--green-dark); }
.cat-item small {
  min-width: 26px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bg);
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.cat-item[aria-pressed="true"] { background: var(--green); color: #fff; }
.cat-item[aria-pressed="true"] small { background: rgba(255, 255, 255, 0.2); color: #fff; }

.shop-toolbar {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-3);
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--s-3) var(--gutter);
  background: rgba(245, 248, 242, 0.96);
  backdrop-filter: blur(8px);
}
.shop-toolbar .chips { grid-column: 1 / -1; }
.sort .select { width: auto; min-width: 150px; }
@media (min-width: 960px) {
  .shop-toolbar { margin-inline: 0; padding-inline: 0; }
  .shop-toolbar .chips { display: none; }
}
@media (max-width: 480px) {
  .sort .select { min-width: 0; width: 120px; padding-left: var(--s-3); }
}

.results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-1) var(--s-4);
  margin: var(--s-3) 0 var(--s-4);
}
.results-head p { font-size: var(--fs-sm); color: var(--muted); }

.product-grid {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }
@media (min-width: 1000px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); } }
/* Beside the category list there is room for three across. */
@media (min-width: 1000px) { .shop .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.product-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  scroll-margin-top: calc(var(--header-h) + 90px);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.product-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.product-card.is-highlighted { box-shadow: 0 0 0 3px var(--amber); }

.pc-media { position: relative; overflow: hidden; background: var(--green-tint); }
.pc-media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--green-tint);
  transition: transform 0.3s ease;
}
.product-card:hover .pc-media img { transform: scale(1.04); }
/* Stands in for a product photo the owner has not uploaded yet. */
.pc-media-empty {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--green-tint), #f3f8ef);
  color: #9cc2a6;
}
.pc-media-empty .icon { width: 44px; height: 44px; }

.pc-tag {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  max-width: calc(100% - 2 * var(--s-2));
  overflow: hidden;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 700;
  color: var(--green-dark);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pc-body { display: flex; flex-direction: column; flex: 1; gap: var(--s-1); padding: var(--s-3) var(--s-3) var(--s-4); }
@media (min-width: 640px) { .pc-body { padding: var(--s-4); } }
.pc-name { font-family: var(--font-display); font-size: var(--fs-base); font-weight: 700; line-height: 1.3; }
.pc-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--muted);
}
.pc-price { margin-top: var(--s-1); font-size: var(--fs-md); font-weight: 800; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.pc-price .muted { font-weight: 500; }
.pc-price.is-request { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: var(--ochre-tint); font-size: var(--fs-sm); font-weight: 700; color: var(--ochre); }

.pc-controls { display: grid; gap: var(--s-2); margin-top: auto; padding-top: var(--s-3); }
.pc-controls .select { min-height: 44px; padding-block: var(--s-2); font-size: 16px; }
.pc-controls .btn { min-height: 44px; padding-inline: var(--s-3); }
.pc-incart { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.pc-incart .stepper { flex: 1; justify-content: space-between; }
.pc-incart-note { font-size: var(--fs-sm); color: var(--green); font-weight: 600; }

.product-grid > .loading { grid-column: 1 / -1; }

.no-results { padding: var(--s-8) 0; text-align: center; color: var(--ink-2); }
.no-results .btn { margin-top: var(--s-4); }

/* Floating "view cart" bar on the products page */
.cart-bar {
  position: fixed;
  left: 50%;
  bottom: var(--s-4);
  z-index: 45;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 52px;
  padding: 0 var(--s-5);
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(20, 70, 34, 0.3);
  transform: translateX(-50%);
  white-space: nowrap;
}
.cart-bar:hover { background: var(--green-dark); color: #fff; }

/* 8. Cart & checkout ======================================================= */

.cart-layout { display: grid; gap: var(--s-6); align-items: start; padding-bottom: var(--s-7); }
@media (min-width: 900px) { .cart-layout { grid-template-columns: 1fr 360px; gap: var(--s-7); } }

.cart-lines { display: grid; gap: var(--s-3); }
.cart-line {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.cart-line.is-unavailable { opacity: 0.65; }
.cl-photo-empty {
  display: grid;
  place-items: center;
  width: 88px;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-img);
  background: var(--line);
  color: var(--muted);
}
.cart-line img {
  width: 88px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-img);
  background: var(--line);
}
.cl-name { font-weight: 700; color: var(--ink); text-decoration: none; }
.cl-name:hover { color: var(--green); }
.cl-unit { font-size: var(--fs-sm); color: var(--muted); }
.cl-price { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cl-price strong { color: var(--ink); }
.cl-qty { margin-top: var(--s-3); }
.cl-remove {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.cl-remove:hover { background: #fdecea; color: var(--danger); }

.cart-tools { margin-top: var(--s-4); }

.cart-empty {
  padding: var(--s-8) var(--s-5);
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}
.cart-empty p { margin-bottom: var(--s-5); color: var(--ink-2); font-size: var(--fs-md); }

.summary-card {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  font-size: var(--fs-md);
}
.summary-row strong { font-variant-numeric: tabular-nums; }
.summary-note { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--muted); }

.cart-cta { margin-top: var(--s-4); }
@media (max-width: 899px) {
  /* Keep the checkout button in reach while scrolling a long cart. */
  .cart-cta {
    position: sticky;
    bottom: 0;
    margin-inline: calc(-1 * var(--gutter));
    padding: var(--s-3) var(--gutter);
    background: rgba(245, 248, 242, 0.97);
    border-top: 1px solid var(--line);
  }
}

/* Checkout sheet: slides up on phones, a centred panel on wider screens */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
}
.sheet.active { visibility: visible; pointer-events: auto; }
.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 25, 20, 0.45);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.sheet.active .sheet-backdrop { opacity: 1; }
.sheet-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-5) var(--gutter) var(--s-6);
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.sheet.active .sheet-panel { transform: none; }
@media (min-width: 640px) {
  .sheet { align-items: center; padding: var(--s-5); }
  .sheet-panel { border-radius: var(--radius-lg); transform: translateY(24px); opacity: 0; transition: transform 0.2s ease, opacity 0.2s ease; }
  .sheet.active .sheet-panel { opacity: 1; }
}
.sheet-head {
  /* Stays in view while the form scrolls, so Close is always reachable. */
  position: sticky;
  top: calc(-1 * var(--s-5));
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin: calc(-1 * var(--s-5)) calc(-1 * var(--gutter)) var(--s-2);
  padding: var(--s-4) var(--gutter);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.sheet-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
}
.sheet-intro { margin-bottom: var(--s-5); color: var(--ink-2); font-size: var(--fs-sm); }

.order-summary {
  margin: var(--s-5) 0 0;
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.order-summary li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-1) 0;
  font-size: var(--fs-sm);
}
.order-summary li span:last-child { font-weight: 600; white-space: nowrap; }
.checkout-total { margin-top: var(--s-3); font-weight: 700; }
.checkout-submit { margin-top: var(--s-5); }

/* 9. Order page ============================================================ */

.order-page { max-width: 680px; padding-block: var(--s-6) var(--s-7); }
.order-page h1 { font-size: var(--fs-display); }
.order-lead { margin: var(--s-3) 0 var(--s-6); color: var(--ink-2); font-size: var(--fs-md); line-height: 1.5; }

.order-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-2);
  margin: var(--s-6) 0;
  padding: 0;
  list-style: none;
}
.order-steps li {
  padding-top: var(--s-3);
  border-top: 4px solid var(--line);
  font-size: var(--fs-sm);
  line-height: 1.3;
  color: var(--muted);
}
.order-steps li.is-done { border-top-color: var(--green); color: var(--ink-2); }
.order-steps li.is-current { border-top-color: var(--green); color: var(--green); font-weight: 700; }
.order-steps li.is-cancelled { grid-column: 1 / -1; border-top-color: var(--danger); color: var(--danger); }

.order-card {
  margin-bottom: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.order-card h2 { margin-bottom: var(--s-4); font-size: var(--fs-md); }

.order-items { margin: 0; padding: 0; list-style: none; }
.order-items li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}
.order-items li:last-child { border-bottom: 0; }
.oi-name { font-weight: 600; }
.oi-qty { grid-row: 2; font-size: var(--fs-sm); color: var(--muted); }
.oi-price { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-weight: 700; white-space: nowrap; }

.order-total { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 2px solid var(--line); }
.ot-row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-md); }
.ot-note { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--muted); }

.pay-list { margin: 0 0 var(--s-3); padding: 0; list-style: none; font-size: var(--fs-sm); }
.pay-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
}
.pay-done { margin-top: var(--s-2); font-weight: 700; color: var(--green-dark); }
.pay-bank {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--radius);
  background: var(--green-tint);
}
.pay-bank-title { margin-bottom: var(--s-2); font-weight: 700; }
.pay-bank .order-details div { grid-template-columns: 120px 1fr; }
.linkish {
  margin-left: var(--s-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--green);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.order-details { margin: 0; }
.order-details div { display: grid; grid-template-columns: 88px 1fr; gap: var(--s-3); padding: var(--s-1) 0; }
.order-details dt { color: var(--muted); }
.order-details dd { margin: 0; overflow-wrap: anywhere; }

.order-keep {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.order-keep p { flex: 1 1 260px; }

/* 10. Thanks page ========================================================== */

.thanks {
  max-width: 560px;
  padding-block: var(--s-9);
  text-align: center;
}
.thanks p { margin: var(--s-4) 0 var(--s-6); color: var(--ink-2); font-size: var(--fs-md); }

/* Small modifiers used by individual pages ================================ */

.section--flush-top { padding-top: 0; }
.lead--after-title { margin-top: var(--s-3); }
.contact-card-title { margin-bottom: var(--s-5); }
.form-submit { margin-top: var(--s-5); }
.hero-actions--center { justify-content: center; }

.page-head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

/* Leave room so the floating cart bar never covers the last row of cards. */
.shop-main { padding-bottom: var(--s-9); }

/* On phones, four products are enough of a taste on the home page. */
@media (max-width: 639px) {
  .featured .product-card:nth-child(n + 5) { display: none; }
}

/* About page ============================================================== */

.value-grid { display: grid; gap: var(--s-4); }
@media (min-width: 720px) { .value-grid { grid-template-columns: 1fr 1fr; } }
.value-card {
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ochre);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.value-card h2 { font-size: var(--fs-md); margin-bottom: var(--s-3); }
.value-card p { font-size: var(--fs-md); line-height: 1.5; color: var(--ink-2); }

.about-cols { display: grid; gap: var(--s-6); }
@media (min-width: 720px) { .about-cols { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
.about-cols h3 { margin-bottom: var(--s-2); }
.about-cols p { margin-bottom: var(--s-3); color: var(--ink-2); }
.about-cols .btn--ghost { margin-left: calc(-1 * var(--s-3)); }

.about-cta { max-width: 640px; text-align: center; }
.about-cta .lead { margin-top: var(--s-3); }

/* About page: sections the owner fills in from the admin ================= */

.about-banner img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--line);
}
.about-banner { margin-bottom: var(--s-7); }

.fact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
  margin: 0;
}
@media (min-width: 720px) { .fact-grid { grid-template-columns: repeat(4, 1fr); } }
.fact {
  display: flex;
  flex-direction: column-reverse;      /* the figure reads first, the label under it */
  gap: var(--s-1);
  padding: var(--s-5);
  border-radius: var(--radius-lg);
  background: var(--green-tint);
}
.fact dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1.1;
  color: var(--green-dark);
}
.fact dt { font-size: var(--fs-sm); color: var(--ink-2); }

.about-story { max-width: 720px; }
.about-story h2 { margin-bottom: var(--s-4); }
.prose p { font-size: var(--fs-md); line-height: 1.6; color: var(--ink-2); }
.prose p + p { margin-top: var(--s-4); }

.highlight-grid { display: grid; gap: var(--s-4); }
@media (min-width: 720px) { .highlight-grid { grid-template-columns: repeat(3, 1fr); } }
.highlight {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  border-radius: var(--radius-lg);
  background: var(--bg);
}
.highlight h3 { margin-bottom: var(--s-2); font-size: var(--fs-md); }
.highlight p { color: var(--ink-2); }

.team-grid {
  display: grid;
  gap: var(--s-5) var(--s-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) { .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.team-card { margin: 0; }
.team-card img, .team-initials {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-img);
  background: var(--line);
}
.team-initials {
  display: grid;
  place-items: center;
  background: var(--green-tint);
  color: var(--green);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
}
.team-card figcaption { margin-top: var(--s-3); }
.team-card strong { display: block; }
.team-card span { font-size: var(--fs-sm); color: var(--muted); }

.gallery-grid { display: grid; gap: var(--s-4); }
@media (min-width: 600px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-item { margin: 0; }
.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-img);
  background: var(--line);
}
.gallery-item figcaption { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--ink-2); }

.about-location {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  max-width: 720px;
}
.about-location > .icon { width: 32px; height: 32px; margin-top: 4px; color: var(--green); }
.about-location h2 { margin-bottom: var(--s-3); }
@media (max-width: 420px) { .order-steps li { font-size: 0.75rem; } }

/* 11. Company furniture ==================================================== */

/* Top bar: how to reach the shop, on every page. Computers only; on a phone
   the same details are in the footer and the menu stays one tap away. */
.topbar {
  background: var(--green-deep);
  color: #cfe3d5;
  font-size: 0.8125rem;
}
.topbar-inner { display: flex; justify-content: space-between; gap: var(--s-4); min-height: 38px; align-items: center; }
.topbar-list { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: 0; list-style: none; }
.topbar-list li { display: flex; align-items: center; gap: var(--s-2); }
.topbar-list .icon { width: 15px; height: 15px; color: #8fd49a; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
@media (max-width: 900px) { .topbar { display: none; } }

.header-cta { gap: var(--s-2); margin-right: var(--s-2); white-space: nowrap; }
.header-cta .icon { width: 18px; height: 18px; }
@media (max-width: 1100px) { .header-cta { display: none; } }

/* Why buy here: four plain promises on one white card that overlaps the
   bottom of the hero, so it reads as part of the top of the page. */
.hero:has(+ .trust) { padding-bottom: calc(var(--s-7) + var(--s-7)); }
@media (min-width: 900px) { .hero:has(+ .trust) { padding-bottom: calc(var(--s-8) + var(--s-7)); } }
.trust { position: relative; z-index: 2; margin-top: calc(-1 * var(--s-8)); }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5) var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 24px 48px -24px rgba(10, 40, 25, 0.3);
}
.trust-item { display: flex; flex-direction: column; gap: var(--s-3); }
.trust-item .icon {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
}
.trust-item strong { display: block; margin-bottom: 2px; font-family: var(--font-display); font-size: var(--fs-base); color: var(--ink); }
.trust-item span { display: block; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.45; }
@media (min-width: 1000px) {
  .trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: var(--s-6) 0; }
  .trust-item { flex-direction: row; align-items: flex-start; padding-inline: var(--s-5); }
  .trust-item + .trust-item { border-left: 1px solid var(--line); }
}

/* Blog cards, on the home page and the blog. */
.post-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.post-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.post-card-media { aspect-ratio: 16 / 9; background: var(--green-tint); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; }
.post-card-empty { display: grid; place-items: center; height: 100%; color: var(--green); }
.post-card-empty .icon { width: 48px; height: 48px; }
.post-card-body { display: flex; flex-direction: column; gap: var(--s-2); flex: 1; padding: var(--s-5); }
.post-card-body h3 { font-size: var(--fs-md); line-height: 1.3; }
.post-card-body p:not(.post-meta) { color: var(--ink-2); font-size: var(--fs-sm); }
.post-meta { font-size: 0.8125rem; color: var(--muted); }
.post-more { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: auto; padding-top: var(--s-2); font-weight: 700; color: var(--green); }
.post-more .icon { width: 16px; height: 16px; }

/* One post. */
.post-head { max-width: 760px; padding-block: var(--s-6) var(--s-4); }
.post-head h1 { font-size: var(--fs-display); line-height: 1.15; }
.post-head .post-meta { margin-top: var(--s-3); font-size: var(--fs-sm); }
.post-back { display: inline-flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-4); font-weight: 600; color: var(--green); text-decoration: none; }
.post-wrap { max-width: 760px; }
.post-image { width: 100%; height: auto; margin-bottom: var(--s-6); border-radius: var(--radius-lg); }
.post-share { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.more-title { margin-bottom: var(--s-5); font-size: var(--fs-lg); }

/* Long reading: blog posts and the policy pages. */
.prose, .policy { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); }
.prose h2, .policy h2 { margin: var(--s-6) 0 var(--s-3); font-size: var(--fs-lg); color: var(--ink); }
.prose h3 { margin: var(--s-5) 0 var(--s-2); font-size: var(--fs-md); color: var(--ink); }
.prose p, .policy p { margin-bottom: var(--s-4); }
.prose ul, .policy ul { margin: 0 0 var(--s-4); padding-left: 1.25em; }
.prose li, .policy li { margin-bottom: var(--s-2); }
.prose a, .policy a { color: var(--green-dark); font-weight: 600; }
.prose strong, .policy strong { color: var(--ink); }
.policy { max-width: 760px; }
.policy-updated { font-size: var(--fs-sm); color: var(--muted); }
.policy-contact { margin-top: var(--s-6); padding: var(--s-4) var(--s-5); border-radius: var(--radius); background: var(--green-tint); }

/* Newsletter band, above the footer on every page. */
/* A white card that sits half on the page and half on the footer, so it
   joins the two instead of adding another band of colour. */
.newsletter-band {
  margin-top: var(--section);
  background: linear-gradient(180deg, transparent 50%, var(--footer-bg) 50%);
}
.newsletter-band + .site-footer { margin-top: 0; background: var(--footer-bg); }
/* The white last section runs straight into the card, with no rule between. */
main:has(+ .newsletter-band) > .section--tint:last-child { border-bottom: 0; padding-bottom: 0; }
main:has(> .section--tint:last-child) + .newsletter-band { margin-top: 0; padding-top: var(--s-7); background-color: var(--surface); }
main:has(> .services:last-child) + .newsletter-band { margin-top: 0; padding-top: var(--s-7); background-color: var(--green-deep); }
.newsletter-inner {
  display: grid;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 24px 48px -24px rgba(10, 40, 25, 0.35);
}
/* .container sets side padding for the page; the card keeps its own. */
.container.newsletter-inner { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--container) - 2 * var(--gutter)); }
@media (min-width: 900px) {
  .newsletter-inner { grid-template-columns: 1fr 1.2fr; gap: var(--s-7); padding: var(--s-6) var(--s-7); }
}
.newsletter-band h2 { font-size: var(--fs-lg); line-height: 1.25; }
.newsletter-text p:not(.eyebrow) { margin-top: var(--s-2); color: var(--ink-2); }
.newsletter-form { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 560px) { .newsletter-form { grid-template-columns: 0.8fr 1.2fr auto; } }
.newsletter-form .btn { background: var(--green); color: #fff; }
.newsletter-form .btn:hover { background: var(--green-dark); color: #fff; }
.newsletter-note { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--muted); }
.newsletter-note a { color: var(--green-dark); }
.newsletter-done { grid-column: 1 / -1; padding: var(--s-4); border-radius: var(--radius); background: var(--green-tint); color: var(--green-dark); font-weight: 600; }

/* Five footer columns on a computer. */
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.6fr 0.8fr 0.8fr 0.9fr 1.3fr; } }
.footer-address { margin-top: var(--s-4); }
.footer-legal { display: flex; align-items: center; gap: var(--s-2); }
.footer-legal .icon { width: 16px; height: 16px; color: #8fd49a; }

/* Checkout: a note under a field, and a tick-box line. */
.field-hint { margin-top: var(--s-1); font-size: 0.8125rem; color: var(--muted); }
.field .check-line, .check-line { display: flex; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-3); font-size: var(--fs-sm); font-weight: 400; color: var(--ink-2); cursor: pointer; }
.check-line input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green); flex: none; }
@media (max-width: 719px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-4); }
  .footer-brand, .footer-grid > div:last-child { grid-column: 1 / -1; }
}