/* Χωριάτικο Καλάθι — design system. Mobile first; desktop gets its own layouts from 900px up. */

@font-face { font-family: "Commissioner"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/commissioner-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Commissioner"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/commissioner-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("../fonts/literata-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("../fonts/literata-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --bg: #faf6ee;
  --bg-2: #f2eadb;
  --card: #ffffff;
  --ink: #1f2a24;
  --ink-2: #414c46;
  --muted: #68726c;
  --line: #e8e0d2;
  --line-2: #d8cdb9;
  --green: #2f6b3f;
  --green-600: #275b35;
  --green-700: #1e4629;
  --green-50: #edf4ec;
  --green-100: #d5e7d6;
  --honey: #d99a1c;
  --honey-50: #fcf1d8;
  --clay: #b8562a;
  --clay-50: #fbeadf;
  --red: #b3261e;
  --red-50: #fcebea;
  --viber: #7360f2;
  --wa: #128c7e;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow-1: 0 1px 2px rgba(31, 42, 36, .05), 0 3px 10px rgba(31, 42, 36, .05);
  --shadow-2: 0 10px 30px rgba(31, 42, 36, .13);
  --font: "Commissioner", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --tabbar-h: 64px;
  --topbar-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  /* Δύο σταθερές μπάρες μπορούν να κρύψουν ένα στοιχείο που μόλις πήρε εστίαση: η κολλητή
     κεφαλίδα από πάνω και η μπάρα καρτελών από κάτω στο κινητό (WCAG 2.4.11). Το
     scroll-padding κρατάει απόσταση και από τις δύο όταν ο browser κάνει scroll ένα
     εστιασμένο στοιχείο σε προβολή. */
  scroll-padding-top: calc(var(--topbar-h) + 16px);
  scroll-padding-bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom));
}
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.55 var(--font); letter-spacing: -.003em;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--green); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--green-700); }
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.18; letter-spacing: -.012em; }
h1, h2 { font-family: var(--serif); font-weight: 650; }
h1 { font-size: clamp(28px, 6.4vw, 46px); }
h2 { font-size: clamp(23px, 4.6vw, 32px); }
h3 { font-size: 18px; font-weight: 650; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
button { cursor: pointer; }
/* Το --green-100 δίνει αντίθεση μόλις ~1.3:1 πάνω στα ανοιχτόχρωμα φόντα του site — στην
   πράξη αόρατο δαχτυλίδι εστίασης. Το --ink περνάει άνετα το 3:1 που ζητά το WCAG 1.4.11
   πάνω σε λευκό/κρεμ φόντο, που είναι και το φόντο στο 95% της σελίδας. */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 8px; }
/* Στα σκούρα πράσινα τμήματα (footer, band) και μέσα στο σκοτεινό lightbox το ίδιο σκούρο
   δαχτυλίδι θα χανόταν μέσα στο φόντο του· εκεί χρειάζεται ανοιχτόχρωμο αντί για --ink. */
.footer :focus-visible, .band :focus-visible, .lightbox :focus-visible { outline-color: #fff; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }
.muted { color: var(--muted); }
.small { font-size: 14.5px; }
.hide { display: none !important; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 100; }
.skip:focus { top: 8px; }
.wrap { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 16px; }
.page-narrow { max-width: 720px; }
/* Οι κλάσεις που μπαίνουν δίπλα στο .wrap («wrap page», «wrap section», «wrap dash-head») ορίζουν
   ΜΟΝΟ πάνω/κάτω απόσταση: ένα «padding: 28px 0» θα μηδένιζε το πλαϊνό περιθώριο του .wrap. */
.section { padding-top: 28px; padding-bottom: 28px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-head h2 { margin: 0; }
.section-head .link-more { white-space: nowrap; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 2px; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green); margin-bottom: 8px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 14px; border: 1.5px solid transparent;
  font-weight: 650; font-size: 16.5px; line-height: 1.1; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .1s, box-shadow .15s;
  background: var(--card); color: var(--ink);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green); color: #fff; box-shadow: 0 2px 0 var(--green-700); }
.btn-primary:hover { background: var(--green-600); color: #fff; }
.btn-ghost { background: var(--card); border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--green); color: var(--green-700); }
.btn-soft { background: var(--green-50); color: var(--green-700); }
.btn-soft:hover { background: var(--green-100); color: var(--green-700); }
.btn-warm { background: var(--clay); color: #fff; box-shadow: 0 2px 0 #8f3f1b; }
.btn-warm:hover { background: #a34a22; color: #fff; }
.btn-danger { background: var(--card); border-color: #eab9b5; color: var(--red); }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 15px; border-radius: 12px; }
.btn-lg { min-height: 56px; padding: 0 26px; font-size: 18px; border-radius: 16px; }
.btn-block { width: 100%; }
.btn .ic { width: 20px; height: 20px; }
.linklike { background: none; border: 0; padding: 0; color: var(--green); text-decoration: underline; text-underline-offset: .18em; font-weight: 600; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40; background: rgba(250, 246, 238, .93);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-in { display: flex; align-items: center; gap: 16px; height: var(--topbar-h); }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); flex: none; }
.brand:hover { color: var(--ink); }
.brand-mark { display: block; width: 40px; height: 40px; flex: none; }
.brand-mark img { width: 100%; height: 100%; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-top { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--green); margin-bottom: 3px; }
.brand-name { font-family: var(--serif); font-weight: 700; font-size: 21px; letter-spacing: -.015em; }
.brand-light { color: #fff; }
.brand-light:hover { color: #fff; }
.brand-light .brand-top { color: rgba(255, 255, 255, .8); }
@media (min-width: 900px) {
  .brand-mark { width: 46px; height: 46px; }
  .brand-top { font-size: 11.5px; }
  .brand-name { font-size: 25px; }
}
.topsearch { display: none; }
.topnav { display: none; }
/* On phones the producer entry lives in the bottom tab bar, so the top bar keeps only the area picker. */
.topbar-mobile-cta { display: none; }
.area-pill {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px; max-width: 58vw; font-size: 14.5px; font-weight: 650;
  text-decoration: none; padding: 8px 12px; border-radius: 999px; border: 1.5px solid var(--line-2); background: #fff; color: var(--ink-2);
}
.area-pill:hover { border-color: var(--green); color: var(--green-700); }
.area-pill .ic { width: 17px; height: 17px; color: var(--green); flex: none; }
.area-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--green-50); border: 1px solid var(--green-100); color: var(--green-700); border-radius: 14px; padding: 10px 14px; font-size: 15px; font-weight: 550; margin-bottom: 14px; }
.area-note .ic { width: 18px; height: 18px; }
.area-note a { margin-left: auto; font-weight: 700; }

/* ---------- Tab bar (mobile) ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(31, 42, 36, .06);
}
.tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--muted); font-size: 12px; font-weight: 600; }
.tabbar a .ic { width: 24px; height: 24px; padding: 0; }
.tabbar a[aria-current="page"] { color: var(--green-700); }
.tabbar a[aria-current="page"] .ic { background: var(--green-50); border-radius: 999px; width: 52px; height: 28px; padding: 2px 14px; }
.fav-dot { position: absolute; top: 9px; left: calc(50% + 7px); width: 9px; height: 9px; border-radius: 50%; background: var(--clay); border: 2px solid #fff; }
body.has-contactbar .tabbar { display: none; }
body.has-contactbar { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (max-width: 899px) {
  /* Στις σελίδες προϊόντος η κάτω μπάρα επικοινωνίας είναι ψηλότερη από τη μπάρα
     καρτελών (βλ. .toast παραπάνω, ίδιο 84px)· το scroll-padding πρέπει να το ξέρει κι
     αυτό, αλλιώς ένα εστιασμένο στοιχείο κοντά στον πάτο κρύβεται πίσω της. */
  html:has(body.has-contactbar) { scroll-padding-bottom: calc(84px + 16px + env(safe-area-inset-bottom)); }
}

/* ---------- Flash & toast ---------- */
.flashes { margin-top: 12px; display: grid; gap: 8px; }
.flash { display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 14px; border-radius: 14px; background: var(--green-50); color: var(--green-700); font-weight: 550; border: 1px solid var(--green-100); }
.flash .ic { margin-top: 3px; }
.flash span { flex: 1; }
.flash-error { background: var(--red-50); color: var(--red); border-color: #f2c9c5; }
.flash-info { background: var(--honey-50); color: #7a5410; border-color: #f1dfb2; }
.flash-x { background: none; border: 0; padding: 2px; color: inherit; opacity: .7; }
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px);
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 550; font-size: 15.5px;
  box-shadow: var(--shadow-2); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; max-width: calc(100% - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
body.has-contactbar .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }

/* ---------- Hero ---------- */
.hero { padding-top: 22px; padding-bottom: 8px; }
.hero-in { position: relative; background: var(--bg-2); border-radius: 26px; padding: 26px 20px 22px; overflow: hidden; }
.hero-in::before {
  content: ""; position: absolute; right: -90px; top: -110px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 107, 63, .16), rgba(47, 107, 63, 0) 70%);
}
.hero h1 { position: relative; max-width: 14ch; margin-bottom: 10px; }
.hero h1 em { font-style: normal; background: linear-gradient(transparent 62%, rgba(217, 154, 28, .38) 62%, rgba(217, 154, 28, .38) 92%, transparent 92%); padding: 0 2px; }
.hero-lead { position: relative; color: var(--ink-2); font-size: 18px; max-width: 34ch; margin-bottom: 18px; }
.bigsearch { position: relative; display: flex; align-items: center; background: #fff; border: 1.5px solid var(--line-2); border-radius: 18px; padding: 6px 6px 6px 16px; box-shadow: var(--shadow-1); }
.bigsearch:focus-within { border-color: var(--green); box-shadow: 0 0 0 4px var(--green-700); }
.bigsearch .ic { color: var(--muted); width: 22px; height: 22px; }
.bigsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 17.5px; padding: 12px 10px; }
.bigsearch .btn { min-height: 48px; border-radius: 13px; }
.hero-chips { position: relative; display: flex; gap: 8px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.hero-chips::-webkit-scrollbar { display: none; }
.hero-chips .label { font-size: 14px; color: var(--muted); align-self: center; white-space: nowrap; font-weight: 600; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 8px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line-2); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 550;
}
/* Χωρίς min-height το .chip βγαίνει γύρω στα 39px — πάνω από το 24px ελάχιστο του WCAG
   2.5.8, αλλά όπου είναι πραγματικό κουμπί (φίλτρα κατηγορίας στον ήρωα, γρήγορες
   απαντήσεις στη συνομιλία) το πάμε στα 44px· τα διακοσμητικά chips (π.χ. εποχικότητα)
   δεν τα πειράζουμε, μένουν όσο μικρά ήταν. */
.hero-chips .chip, .quick .chip { min-height: 44px; }
.chip:hover { border-color: var(--green); color: var(--green-700); }
.chip.is-on { background: var(--green); border-color: var(--green); color: #fff; }
.chip .ic { width: 18px; height: 18px; }
.hero-trust { position: relative; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: 14.5px; color: var(--ink-2); font-weight: 550; }
.hero-trust span { display: inline-flex; align-items: center; gap: 6px; }
.hero-trust .ic { color: var(--green); }
.hero-art { display: none; }

/* ---------- Categories ---------- */
.cats { display: grid; grid-auto-flow: column; grid-auto-columns: 92px; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 10px; margin: 0 -16px; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cat {
  scroll-snap-align: start; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--ink); text-align: center;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.cat:hover { border-color: var(--green); color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.cat.is-on { border-color: var(--green); background: var(--green-50); }
.cat-ic { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: var(--green-50); color: var(--green); }
.cat.is-on .cat-ic { background: var(--green); color: #fff; }
.cat-ic .ic { width: 28px; height: 28px; stroke-width: 1.6; }
.cat-name { font-size: 14px; font-weight: 600; line-height: 1.2; }
.cat-n { position: absolute; top: 7px; right: 8px; font-size: 11.5px; font-weight: 700; color: var(--muted); }

/* ---------- Product cards ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid-producers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pcard { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: box-shadow .18s, transform .18s; }
.pcard:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.pcard-img { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--bg-2); overflow: hidden; }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.pcard:hover .pcard-img img { transform: scale(1.03); }
.pcard.is-soldout .pcard-img img { filter: grayscale(.7) opacity(.75); }
.pcard-state { position: absolute; left: 8px; bottom: 8px; }
.pcard-bio { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, .94); color: var(--green-700); font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 999px; }
.pcard-bio .ic { width: 14px; height: 14px; }
.fav-btn {
  /* 44px αντί για 40px (WCAG 2.5.8): μπαίνει άνετα στη γωνία της κάρτας χωρίς να αγγίζει
     τίτλο ή τιμή, οπότε δεν υπήρχε λόγος να μείνει κάτω από το όριο. */
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgba(255, 255, 255, .94); color: var(--ink-2); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); transition: transform .15s, color .15s;
}
.fav-btn:hover { transform: scale(1.06); color: var(--clay); }
.fav-btn .ic { width: 21px; height: 21px; }
.fav-btn[aria-pressed="true"] { color: var(--clay); }
.fav-btn[aria-pressed="true"] .ic { fill: currentColor; }
.pcard-body { padding: 10px 11px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pcard-title { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-title a { color: var(--ink); text-decoration: none; }
.pcard-title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.pcard-price { display: flex; align-items: baseline; gap: 4px; }
.pcard-price b { font-size: 19px; font-weight: 750; letter-spacing: -.01em; }
.pcard-price span { font-size: 14px; color: var(--muted); }
.pcard-by { display: flex; align-items: center; gap: 7px; margin-top: auto; min-width: 0; }
.pcard-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pcard-name { font-size: 13.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-place { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-rating { font-size: 13.5px; }
.pcard .fav-btn, .pcard .pcard-img { z-index: 1; }
.ic-verified { width: 15px; height: 15px; color: var(--green); vertical-align: -2px; }

/* ---------- Avatars ---------- */
.avatar { border-radius: 50%; object-fit: cover; flex: none; background: var(--bg-2); }
.avatar-xs { width: 24px; height: 24px; font-size: 12px; }
.avatar-sm { width: 36px; height: 36px; font-size: 15px; }
.avatar-md { width: 48px; height: 48px; font-size: 20px; }
.avatar-lg { width: 96px; height: 96px; font-size: 40px; border: 4px solid #fff; box-shadow: var(--shadow-1); }
.avatar-l { display: inline-grid; place-items: center; color: #fff; font-weight: 700; font-family: var(--serif); }
.avatar-h0 { background: #2f6b3f; } .avatar-h1 { background: #b8562a; } .avatar-h2 { background: #9a7417; } .avatar-h3 { background: #3c6e8f; } .avatar-h4 { background: #7a4f86; }

/* ---------- Pills, chips, ratings ---------- */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-ok { background: var(--green-50); color: var(--green-700); }
.pill-warn { background: var(--honey-50); color: #7a5410; }
.pill-info { background: #e8eef7; color: #2b4d7a; }
.pill-off { background: #eceae6; color: #5e5a54; }
.chip-mini { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--bg); border: 1px solid var(--line); padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.chip-mini .ic { width: 16px; height: 16px; color: var(--green); }
.rating { display: inline-flex; align-items: center; gap: 4px; font-size: 14.5px; white-space: nowrap; }
.rating b { font-weight: 750; }
.rating-none { color: var(--muted); font-size: 13.5px; }
.star-on { fill: var(--honey); stroke: var(--honey); }
.star-off { fill: #e9e2d4; stroke: #e9e2d4; }
.rating .ic { width: 17px; height: 17px; }
.stars { display: inline-flex; gap: 1px; }
.stars .ic { width: 18px; height: 18px; }
.stars.stars-lg .ic { width: 24px; height: 24px; }
.vbadge { display: inline-grid; place-items: center; color: var(--green); vertical-align: -3px; }
.vbadge .ic { width: 20px; height: 20px; }

/* ---------- Producer cards ---------- */
.rcard { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .18s, transform .18s; }
.rcard:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.rcard-photos { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; height: 150px; background: var(--bg-2); }
.rcard-photos .rp { width: 100%; height: 100%; object-fit: cover; }
.rcard-photos .rp-0 { grid-row: 1 / 3; }
.rcard-photos .rp-of-1 { grid-column: 1 / 3; }
.rcard-photos .rp-of-2.rp-1 { grid-row: 1 / 3; }
.rcard-empty { grid-column: 1 / 3; grid-row: 1 / 3; display: grid; place-items: center; color: var(--green); background: linear-gradient(135deg, var(--green-50), var(--bg-2)); }
.rcard-empty .ic { width: 44px; height: 44px; stroke-width: 1.4; }
.rcard-body { padding: 0 16px 16px; }
.rcard-head { display: flex; align-items: flex-end; gap: 12px; margin-top: -22px; position: relative; }
.rcard-head .avatar { border: 3px solid #fff; width: 56px; height: 56px; box-shadow: var(--shadow-1); }
.rcard-name { margin: 0 0 2px; font-size: 18px; }
.rcard-name a { color: var(--ink); text-decoration: none; }
.rcard-name a::after { content: ""; position: absolute; inset: 0; }
.rcard-place { margin: 0; font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.rcard-place .ic { width: 16px; height: 16px; }
.rcard-meta { display: flex; align-items: center; gap: 12px; margin: 12px 0 10px; font-size: 14px; }
.rcard-cats { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Browse / search ---------- */
.browse-head { padding: 18px 0 6px; }
.browse-head h1 { font-size: clamp(26px, 5.5vw, 38px); margin-bottom: 4px; }
.browse-bar { display: flex; gap: 8px; align-items: center; margin: 12px 0 8px; }
.browse-bar .bigsearch { flex: 1; padding: 4px 4px 4px 14px; border-radius: 15px; }
.browse-bar .bigsearch input { padding: 9px 8px; font-size: 16.5px; }
.filter-toggle { min-height: 50px; }
.filters-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 16px 8px; margin: 0 -16px; }
.filters-row::-webkit-scrollbar { display: none; }
.result-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 10px 0 12px; font-size: 15px; color: var(--muted); }
.sort-select { border: 1px solid var(--line-2); background: #fff; border-radius: 10px; padding: 8px 10px; font-size: 15px; }
.browse-layout { display: block; }
.filters { display: none; }
.filters.open { display: block; position: fixed; inset: 0; z-index: 70; background: var(--bg); overflow-y: auto; padding: 16px 16px 110px; }
.filters-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.filters-head h2 { margin: 0; font-size: 24px; }
.filters fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.filters legend { font-weight: 700; font-size: 16px; margin-bottom: 10px; padding: 0; }
.filters .opt { display: flex; align-items: center; gap: 10px; padding: 9px 4px; font-size: 16px; cursor: pointer; border-radius: 10px; }
.filters .opt:hover { background: var(--bg-2); }
.filters .opt input { width: 22px; height: 22px; accent-color: var(--green); }
.filters .opt .n { margin-left: auto; color: var(--muted); font-size: 13.5px; }
.filters select { width: 100%; }
.filters-apply { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); display: flex; gap: 10px; }
.filters-apply .btn { flex: 1; }

/* ---------- Empty ---------- */
.empty { text-align: center; padding: 42px 20px; background: var(--card); border: 1px dashed var(--line-2); border-radius: var(--radius); }
.empty-ic { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--green-50); color: var(--green); margin-bottom: 12px; }
.empty-ic .ic { width: 36px; height: 36px; stroke-width: 1.5; }
.empty h3 { font-size: 21px; font-family: var(--serif); }
.empty p { color: var(--muted); max-width: 40ch; margin: 0 auto 18px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 26px 0 8px; flex-wrap: wrap; }
.pager-n { color: var(--muted); font-size: 15px; }

/* ---------- Product page ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 14px; color: var(--muted); margin: 14px 0 12px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--green); }
.crumbs .ic { width: 14px; height: 14px; }
.prod { display: block; }
.gallery { position: relative; margin: 0 -16px; }
.gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--bg-2); }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track img { flex: 0 0 100%; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; scroll-snap-align: center; cursor: zoom-in; }
.gallery-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.gallery-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .6); box-shadow: 0 0 2px rgba(0, 0, 0, .3); }
.gallery-dots span.on { background: #fff; width: 20px; border-radius: 999px; }
.gallery-thumbs { display: none; }
.gallery .fav-btn { top: 12px; right: 12px; }
.prod-info { padding-top: 18px; }
.prod-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.prod-title { font-size: clamp(26px, 6vw, 38px); margin-bottom: 8px; }
.prod-price { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 6px; }
.prod-price b { font-size: 32px; font-weight: 800; letter-spacing: -.02em; }
.prod-price span { color: var(--muted); font-size: 17px; }
.prod-updated { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.prod-updated .ic { width: 16px; height: 16px; }
.box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; }
.box h2, .box h3 { margin-top: 0; }
.box-title { font-family: var(--font); font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.facts { display: grid; gap: 10px; margin: 0; }
.facts div { display: flex; gap: 10px; align-items: flex-start; }
.facts dt { flex: 0 0 132px; color: var(--muted); font-size: 15px; }
.facts dd { margin: 0; font-weight: 550; }
.prose p:last-child { margin-bottom: 0; }
.prose { color: var(--ink-2); }
.producer-mini { display: flex; gap: 12px; align-items: center; }
.producer-mini h3 { margin: 0; font-size: 18px; }
.producer-mini h3 a { color: var(--ink); text-decoration: none; }
.producer-mini p { margin: 0; font-size: 14.5px; color: var(--muted); }
.producer-mini .btn { margin-left: auto; }
.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.cbtn {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 10px; border-radius: 14px;
  font-weight: 700; font-size: 17px; text-decoration: none; color: #fff; transition: filter .15s, transform .1s;
}
.cbtn:hover { color: #fff; filter: brightness(1.07); }
.cbtn:active { transform: translateY(1px); }
.cbtn .ic { width: 22px; height: 22px; stroke-width: 2; }
.cbtn-call { background: var(--green); }
.cbtn-viber { background: var(--viber); }
.cbtn-wa { background: var(--wa); }
.contact-note { font-size: 13.5px; color: var(--muted); margin: 10px 0 0; display: flex; gap: 6px; align-items: flex-start; }
.contact-note .ic { width: 16px; height: 16px; margin-top: 2px; }
.contactbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: rgba(255, 255, 255, .98); border-top: 1px solid var(--line);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(31, 42, 36, .08);
}
.contactbar-in { display: flex; align-items: center; gap: 10px; max-width: 1220px; margin: 0 auto; }
.contactbar-price { display: none; }
.contactbar .contact { flex: 1; }
.contactbar .cbtn { min-height: 52px; }
.disclaimer { font-size: 13.5px; color: var(--muted); display: flex; gap: 8px; align-items: flex-start; }
.disclaimer .ic { width: 17px; height: 17px; margin-top: 2px; flex: none; }
.report-link { font-size: 14px; color: var(--muted); display: inline-flex; gap: 5px; align-items: center; }
.report-link .ic { width: 15px; height: 15px; }

/* ---------- Producer page ---------- */
.cover { position: relative; height: 170px; margin: 0 -16px; background: linear-gradient(120deg, #2f6b3f 0%, #4f8a4c 45%, #d99a1c 130%); overflow: hidden; }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .25), transparent 55%); }
.cover-pattern { position: absolute; inset: 0; opacity: .14; background-image: radial-gradient(#fff 1.4px, transparent 1.6px); background-size: 18px 18px; }
.phead { position: relative; margin-top: -48px; z-index: 2; }
.phead-top { display: flex; align-items: flex-end; gap: 14px; }
.phead h1 { font-size: clamp(26px, 6vw, 40px); margin: 12px 0 4px; }
.phead-place { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 550; margin-bottom: 10px; }
.phead-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; padding: 6px 11px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.badge .ic { width: 17px; height: 17px; }
.badge-verified { background: var(--green-50); border-color: var(--green-100); color: var(--green-700); }
.phead-actions { display: flex; gap: 8px; margin: 4px 0 18px; flex-wrap: wrap; }
.tabs { position: sticky; top: var(--topbar-h); z-index: 20; display: flex; gap: 4px; background: var(--bg); border-bottom: 1px solid var(--line); margin: 6px -16px 18px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: 13px 12px; font-weight: 650; text-decoration: none; color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs a:hover, .tabs a.on { color: var(--green-700); border-bottom-color: var(--green); }
.pside { display: block; }

/* ---------- Video, callback form, leads ---------- */
.gallery-video { flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #000; scroll-snap-align: center; }
.gallery-frame { flex: 0 0 100%; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; scroll-snap-align: center; }
.gallery-yt { position: relative; flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; background: #000; scroll-snap-align: center; cursor: pointer; overflow: hidden; }
.gallery-yt img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .2s, transform .4s; }
.gallery-yt:hover img { opacity: 1; transform: scale(1.03); }
.gallery-yt-play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; background: rgba(255, 255, 255, .95); display: grid; place-items: center; box-shadow: var(--shadow-2); }
.gallery-yt-play .ic { width: 34px; height: 34px; color: var(--ink); margin-left: 4px; stroke-width: 2.4; }
.gallery-yt-note { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; color: #fff; font-size: 12.5px; background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent); }
.thumb-play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .35); color: #fff; }
.thumb-play .ic { width: 20px; height: 20px; }
.thumb-video { display: grid; place-items: center; width: 100%; height: 100%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; gap: 2px; }
.gallery-thumbs button { position: relative; }
.photo-video video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.videopick { display: grid; grid-template-columns: minmax(0, 260px); gap: 8px; }
.videopick .photo { aspect-ratio: 16 / 10; }
.videopick .photo-add { aspect-ratio: 16 / 10; }
.pcard-video { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; backdrop-filter: blur(2px); }
.pcard-video .ic { width: 18px; height: 18px; margin-left: 2px; stroke-width: 2.4; }
.pcard-more { position: absolute; left: 8px; top: 8px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.pcard-bio + .pcard-more { top: 40px; }
.callback { border-color: var(--clay); box-shadow: 0 0 0 3px var(--clay-50); }
.callback .box-title { color: var(--clay); }
.leads { display: grid; gap: 10px; margin-top: 12px; }
.lead { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--bg); display: grid; gap: 8px; }
.lead.is-new { background: #fff; border-color: var(--clay); }
.lead-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lead-phone { display: inline-flex; align-items: center; gap: 6px; font-weight: 750; font-size: 17px; color: var(--green-700); text-decoration: none; background: var(--green-50); padding: 6px 12px; border-radius: 999px; }
.lead-phone .ic { width: 18px; height: 18px; }
.lead-note { margin: 0; color: var(--ink-2); }

/* ---------- Field photos ---------- */
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.field-item { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.field-item a { display: block; aspect-ratio: 4 / 3; background: var(--bg-2); }
.field-item img { width: 100%; height: 100%; object-fit: cover; }
.field-item figcaption { padding: 10px 14px 12px; font-size: 14.5px; display: flex; flex-direction: column; gap: 4px; }
.field-item figcaption .muted { font-size: 12.5px; }
.field-title { font-family: var(--serif); font-size: 17px; line-height: 1.25; }
.field-body { font-size: 14.5px; color: var(--ink-2); }
.field-body p { margin: 0 0 .5em; }
.field-item.has-story a { aspect-ratio: 16 / 10; }
.field-strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 10px; margin: 0 -16px; scrollbar-width: none; }
.field-strip::-webkit-scrollbar { display: none; }
.field-post { position: relative; flex: 0 0 240px; scroll-snap-align: start; border-radius: 18px; overflow: hidden; background: var(--bg-2); aspect-ratio: 4 / 3; text-decoration: none; color: #fff; }
.field-post img { width: 100%; height: 100%; object-fit: cover; }
.field-post-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 10px; background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent); display: flex; gap: 8px; align-items: center; font-size: 13.5px; line-height: 1.3; }
.field-post-cap .avatar { border: 2px solid #fff; }
.feat { display: grid; }
.feat-photos { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; height: 220px; background: var(--bg-2); }
.feat-photos img { width: 100%; height: 100%; object-fit: cover; }
.feat-photos .fp-0 { grid-row: 1 / 3; }
.feat-body { padding: 22px 20px 24px; }
.feat-body .producer-mini p { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(20, 26, 22, .92); display: grid; place-items: center; padding: 16px; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; }
.lightbox button { position: absolute; top: 14px; right: 14px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .15); color: #fff; display: grid; place-items: center; }
.lightbox button .ic { width: 24px; height: 24px; }
.compare { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 15.5px; }
.compare th, .compare td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare th { background: var(--bg-2); font-size: 14px; }
.compare td:first-child { font-weight: 600; }
.compare .yes { color: var(--green-700); font-weight: 700; }
.compare .no { color: var(--muted); }
.compare tr:last-child td { border-bottom: 0; }

/* ---------- Reviews ---------- */
.rsum { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.rsum-big { text-align: center; min-width: 110px; }
.rsum-big b { display: block; font-size: 46px; line-height: 1; font-weight: 800; font-family: var(--serif); }
.rsum-big .muted { font-size: 14px; }
.rsum-bars { flex: 1; min-width: 200px; display: grid; gap: 5px; }
.rbar { display: grid; grid-template-columns: 22px 1fr 32px; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); }
.rbar progress { width: 100%; height: 9px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; background: #ece5d8; overflow: hidden; }
.rbar progress::-webkit-progress-bar { background: #ece5d8; border-radius: 999px; }
.rbar progress::-webkit-progress-value { background: var(--honey); border-radius: 999px; }
.rbar progress::-moz-progress-bar { background: var(--honey); border-radius: 999px; }
.review { padding: 16px 0; border-top: 1px solid var(--line); }
.review:first-child { border-top: 0; padding-top: 4px; }
.review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.review-author { font-weight: 700; }
.review-date { color: var(--muted); font-size: 14px; }
.review-v { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 650; color: var(--green-700); background: var(--green-50); padding: 3px 8px; border-radius: 999px; }
.review-v .ic { width: 14px; height: 14px; }
.review-v.v-invite { color: #2b4d7a; background: #e8eef7; }
.review-bought { font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.review-body { margin: 0; white-space: pre-line; }
.review-reply { margin-top: 10px; padding: 12px 14px; background: var(--bg); border-left: 3px solid var(--green); border-radius: 0 12px 12px 0; font-size: 15.5px; }
.review-reply b { display: block; font-size: 14px; margin-bottom: 2px; }
.review-foot { margin-top: 6px; }
.review-foot a { font-size: 13px; color: var(--muted); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field > label, .field > .label, legend.label { font-weight: 700; font-size: 16px; }
.field .hint { font-size: 14px; color: var(--muted); margin: 0; }
.field .opt-tag { font-weight: 500; color: var(--muted); font-size: 14px; }
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=number], input[type=search], input[type=url], select, textarea {
  width: 100%; min-height: 54px; border: 1.5px solid var(--line-2); border-radius: 14px; background: #fff; padding: 12px 14px; font-size: 17px;
  transition: border-color .15s, box-shadow .15s; appearance: none; -webkit-appearance: none;
}
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2368726c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px; }
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 4px var(--green-700); }
input.is-bad, select.is-bad, textarea.is-bad { border-color: var(--red); }
.field-error { color: var(--red); font-size: 14.5px; font-weight: 600; margin: 0; }
/* Κωδικός: το κουμπί «Εμφάνιση» ζει μέσα στο πεδίο. Σε δύο στήλες μένει μόνο το εικονίδιο. */
.pw-wrap { position: relative; }
.pw-wrap input { min-height: 56px; padding-right: 126px; }
.pw-eye {
  position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 12px;
  border: 0; border-radius: 11px; background: var(--bg-2); color: var(--ink-2); font: 650 14px/1 var(--font); cursor: pointer;
  transition: background-color .15s, color .15s;
}
.pw-eye .ic { width: 19px; height: 19px; flex: none; }
.pw-eye:hover { background: var(--line); }
.pw-eye[aria-pressed="true"] { background: var(--green-50); color: var(--green-700); }
.pw-eye:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--green-700); }
/* Κωδικός + «ξανά»: στο κινητό ο ένας κάτω από τον άλλον, από 560px δίπλα-δίπλα και ευθυγραμμισμένοι
   από πάνω (η υπόδειξη κάτω από τον πρώτο δεν σπρώχνει τον δεύτερο). */
.pw-pair { display: grid; gap: 18px; align-items: start; }
@media (min-width: 560px) {
  .pw-pair { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pw-pair .pw-wrap input { padding-right: 60px; }
  .pw-pair .pw-eye { width: 48px; justify-content: center; padding: 0; }
  .pw-pair .pw-eye span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.pw-hint { display: flex; gap: 6px; align-items: flex-start; transition: color .15s; }
.pw-hint .pw-ok { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--line-2); transition: color .15s; }
.pw-hint.is-ok { color: var(--green-700); }
.pw-hint.is-ok .pw-ok { color: var(--green); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.price-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; align-items: end; }
.input-euro { position: relative; }
.input-euro input { padding-right: 40px; font-size: 22px; font-weight: 700; }
.input-euro::after { content: "€"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 700; color: var(--muted); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
  display: inline-flex; align-items: center; gap: 7px; min-height: 46px; padding: 0 16px; border-radius: 13px; background: #fff;
  border: 1.5px solid var(--line-2); font-weight: 600; font-size: 16px; cursor: pointer; transition: all .12s;
}
.choice span .ic { width: 19px; height: 19px; color: var(--green); }
.choice input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.choice input:checked + span .ic { color: #fff; }
.choice input:focus-visible + span { box-shadow: 0 0 0 4px var(--green-700); }
.choice-big span { min-height: 56px; }
.catpick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.catpick .choice span { flex-direction: column; justify-content: center; text-align: center; min-height: 92px; width: 100%; padding: 10px 6px; font-size: 13.5px; line-height: 1.2; gap: 6px; }
.catpick .choice span .ic { width: 28px; height: 28px; }
.catpick .choice { display: flex; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; cursor: pointer; }
.check input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--green); flex: none; }
.check small { display: block; color: var(--muted); font-size: 14px; }
.card-form { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 22px 18px; box-shadow: var(--shadow-1); }
.form-steps { display: flex; gap: 6px; margin-bottom: 14px; }
.form-steps span { flex: 1; height: 5px; border-radius: 999px; background: var(--line); }
.form-steps span.on { background: var(--green); }
.form-section { border-top: 1px solid var(--line); padding-top: 18px; }
.form-section-title { font-family: var(--serif); font-size: 21px; margin: 0 0 4px; }
details.more { border: 1px solid var(--line); border-radius: 14px; background: #fff; }
details.more summary { cursor: pointer; padding: 14px 16px; font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; }
details.more summary::-webkit-details-marker { display: none; }
details.more[open] summary .ic { transform: rotate(180deg); }
details.more .more-in { padding: 0 16px 16px; display: grid; gap: 16px; }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.legal-box { background: var(--honey-50); border: 1px solid #f1dfb2; border-radius: 14px; padding: 14px 16px; font-size: 15px; color: #5f4410; display: grid; gap: 10px; }
.legal-box b { color: #4a340a; }

/* Service areas */
.regions-pick { max-height: 340px; overflow-y: auto; border: 1.5px solid var(--line-2); border-radius: 14px; padding: 12px 14px; background: #fff; }
.regions-group { margin: 0 0 14px; }
.regions-group legend { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; display: flex; gap: 10px; align-items: baseline; }
.regions-list { display: flex; flex-wrap: wrap; gap: 6px; }
.regions-list .choice span { min-height: 38px; padding: 0 12px; font-size: 14.5px; font-weight: 600; border-radius: 10px; }

/* Photo picker */
.photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.photo-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 1; border-radius: 16px;
  border: 2px dashed var(--line-2); background: #fff; color: var(--green-700); font-weight: 700; font-size: 14.5px; cursor: pointer; text-align: center; padding: 8px;
}
.photo-add:hover { border-color: var(--green); background: var(--green-50); }
.photo-add .ic { width: 32px; height: 32px; }
.photo-add.is-first { grid-column: 1 / -1; aspect-ratio: auto; min-height: 170px; font-size: 17px; }
.photo-add.is-first .ic { width: 44px; height: 44px; }
.photo { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--bg-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo .photo-x { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff; display: grid; place-items: center; }
.photo .photo-x .ic { width: 18px; height: 18px; }
.photo .photo-main { position: absolute; left: 6px; bottom: 6px; background: rgba(255, 255, 255, .95); font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.photo.is-busy::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 50 50'%3E%3Ccircle cx='25' cy='25' r='20' fill='none' stroke='%232f6b3f' stroke-width='5' stroke-dasharray='90 60'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center no-repeat; }

/* ---------- Dashboard ---------- */
.dash-head { padding-top: 20px; padding-bottom: 6px; }
.dash-head h1 { font-size: clamp(26px, 6vw, 36px); margin-bottom: 4px; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px; }
.stat b { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; font-family: var(--serif); }
.stat span { font-size: 13px; color: var(--muted); line-height: 1.25; display: block; margin-top: 2px; }
.stat-hi { background: var(--green); border-color: var(--green); color: #fff; }
.stat-hi span { color: rgba(255, 255, 255, .85); }
.todo { display: grid; gap: 8px; }
.todo a, .todo div { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); font-weight: 600; }
.todo a:hover { border-color: var(--green); }
.todo .dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--honey-50); color: #7a5410; flex: none; }
.todo .dot .ic { width: 18px; height: 18px; }
.todo .done .dot { background: var(--green-50); color: var(--green); }
.todo .done { color: var(--muted); font-weight: 500; }
.todo .ic-go { margin-left: auto; color: var(--muted); }
.mylist { display: grid; gap: 10px; }
.myitem { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px; display: grid; gap: 12px; }
.myitem-top { display: flex; gap: 12px; align-items: center; }
.myitem-top img { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; flex: none; background: var(--bg-2); }
.myitem-title { font-weight: 700; font-size: 17px; margin: 0; line-height: 1.25; }
.myitem-title a { color: var(--ink); text-decoration: none; }
.myitem-sub { font-size: 14px; color: var(--muted); margin: 2px 0 0; }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 13px; padding: 4px; }
/* 42px ήταν 2px κάτω από το 44px που ζητά το WCAG 2.5.8 για πραγματικά κουμπιά· εύκολη
   διόρθωση εδώ αφού το .seg είναι ήδη πλέγμα 2 στηλών, δεν στριμώχνεται τίποτα. */
.seg button { border: 0; background: none; border-radius: 10px; min-height: 44px; font-size: 14px; font-weight: 650; color: var(--muted); padding: 0 6px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.seg button[aria-pressed="true"][data-v="available"] { color: var(--green-700); }
.seg button[aria-pressed="true"][data-v="soldout"] { color: #5e5a54; }
.myitem-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.myitem-actions .btn { min-width: 0; width: 100%; }
.myitem-actions form { display: contents; }
.preview-wrap .pcard { width: 100%; }
.fab { position: fixed; right: 16px; bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); z-index: 44; border-radius: 999px; box-shadow: 0 8px 24px rgba(47, 107, 63, .4); }
.sharekit textarea { font-size: 15.5px; min-height: 150px; background: var(--bg); }
.post-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; gap: 10px; }
.post-card pre { white-space: pre-wrap; font: inherit; margin: 0; font-size: 15.5px; color: var(--ink-2); }
.linkbox { display: flex; gap: 8px; align-items: center; background: #fff; border: 1.5px solid var(--line-2); border-radius: 14px; padding: 6px 6px 6px 14px; }
.linkbox code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--ink-2); }

/* ---------- Content pages ---------- */
.page { padding-top: 22px; padding-bottom: 30px; }
.page h1 { margin-bottom: 14px; }
.page h2 { margin-top: 1.4em; font-size: 24px; }
.page h3 { margin-top: 1.2em; }
.page ul, .page ol { padding-left: 1.2em; }
.page li { margin-bottom: .4em; }
.steps { display: grid; gap: 12px; counter-reset: s; padding: 0; list-style: none; }
.steps li { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 16px 16px 64px; }
.steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-weight: 800; font-family: var(--serif); }
.steps li b { display: block; font-size: 17.5px; margin-bottom: 2px; }
.steps li span { color: var(--ink-2); }
.feature-grid { display: grid; gap: 12px; }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.feature .fi { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--green-50); color: var(--green); margin-bottom: 10px; }
.feature .fi .ic { width: 26px; height: 26px; }
.feature h3 { margin-bottom: 4px; }
.feature p { margin: 0; color: var(--ink-2); font-size: 16px; }
.band { background: var(--green-700); color: #fff; border-radius: 26px; padding: 28px 22px; position: relative; overflow: hidden; }
.band::before { content: ""; position: absolute; inset: 0; opacity: .08; background-image: radial-gradient(#fff 1.4px, transparent 1.6px); background-size: 20px 20px; }
.band > * { position: relative; }
.band h2 { color: #fff; }
.band p { color: rgba(255, 255, 255, .88); max-width: 46ch; }
.band .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.band .btn-ghost:hover { border-color: #fff; color: #fff; }
.band .btn-primary { background: #fff; color: var(--green-700); box-shadow: none; }
.band .btn-primary:hover { background: var(--green-50); color: var(--green-700); }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; }
.faq summary { cursor: pointer; padding: 15px 16px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq details > div { padding: 0 16px 16px; color: var(--ink-2); }
.season-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.season { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.season.is-now { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-100); }
.season h3 { font-size: 17px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.season .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.season .chip { font-size: 13.5px; padding: 5px 10px; }

/* ---------- Footer ---------- */
.footer { background: var(--green-700); color: rgba(255, 255, 255, .85); margin-top: 40px; padding: 34px 0 18px; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; color: #fff; }
.footer-in { display: grid; gap: 26px; }
.footer-brand p { margin: 12px 0 0; max-width: 42ch; font-size: 15.5px; }
.footer-note { display: flex; gap: 8px; font-size: 14px !important; color: rgba(255, 255, 255, .75); }
.footer-note .ic { margin-top: 2px; }
.footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.footer-cols h3 { color: #fff; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; }
.footer-cols a { display: block; padding: 5px 0; font-size: 15.5px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; border-top: 1px solid rgba(255, 255, 255, .15); margin-top: 26px; padding-top: 14px; font-size: 13.5px; color: rgba(255, 255, 255, .65); }

/* ---------- Admin ---------- */
.admin-nav { display: flex; gap: 6px; overflow-x: auto; margin: 14px 0; }
.table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: 15px; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { background: var(--bg); font-size: 13.5px; color: var(--muted); }
.table-wrap { overflow-x: auto; }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* ---------- Tablet ---------- */
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .grid-producers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catpick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .photos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .season-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-form { padding: 30px 28px; }
  .gallery { margin: 0; border-radius: var(--radius); overflow: hidden; }
  .cover { margin: 0; border-radius: 0 0 26px 26px; height: 220px; }
  .tabs { margin: 6px 0 18px; padding: 0; }
  .myitem { grid-template-columns: 1fr 300px; align-items: center; }
  .myitem-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr 1fr auto; }
}

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  :root { --topbar-h: 72px; }
  /* Χωρίς σταθερή μπάρα καρτελών ή επικοινωνίας στο desktop, αρκεί λίγος χώρος. */
  html { scroll-padding-bottom: 16px; }
  body { padding-bottom: 0; font-size: 17px; }
  body.has-contactbar { padding-bottom: 0; }
  .tabbar, .topbar-mobile-cta, .fab-mobile { display: none; }
  .area-pill { margin-left: 0; order: 3; max-width: 220px; }
  .wrap { padding: 0 28px; }
  .topbar-in { gap: 24px; }
  .topsearch {
    display: flex; align-items: center; flex: 1; max-width: 520px; background: #fff; border: 1.5px solid var(--line-2);
    border-radius: 14px; padding: 0 12px; height: 46px; transition: border-color .15s, box-shadow .15s;
  }
  .topsearch:focus-within { border-color: var(--green); box-shadow: 0 0 0 4px var(--green-700); }
  .topsearch .ic { color: var(--muted); }
  .topsearch input { border: 0; outline: 0; background: none; flex: 1; min-width: 0; height: 100%; padding: 0 10px; font-size: 16px; }
  .topnav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
  .topnav > a:not(.btn) { padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: 16px; position: relative; }
  .topnav > a:not(.btn):hover { background: var(--bg-2); color: var(--ink); }
  .topnav > a[aria-current="page"] { color: var(--green-700); background: var(--green-50); }
  .topnav .btn { margin-left: 8px; }
  .topnav-ic .ic { width: 22px; height: 22px; }
  .fav-count { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; border-radius: 999px; background: var(--clay); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; padding: 0 5px; }
  .toast { bottom: 28px; }
  body.has-contactbar .toast { bottom: 28px; }

  .hero { padding-top: 28px; padding-bottom: 10px; }
  .hero-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding: 52px 52px 46px; border-radius: 32px; }
  .hero h1 { font-size: 54px; }
  .hero-lead { font-size: 19.5px; }
  .bigsearch input { font-size: 18px; padding: 14px 10px; }
  .bigsearch .btn { min-height: 52px; padding: 0 26px; }
  .hero-art { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 170px 170px; gap: 12px; position: relative; }
  .hero-art .ha { margin: 0; border-radius: 20px; overflow: hidden; background: var(--line); box-shadow: var(--shadow-2); position: relative; transform: rotate(-1.2deg); }
  .hero-art .ha-1 { transform: rotate(1.5deg); }
  .hero-art .ha-2 { transform: rotate(-0.8deg); }
  .hero-art .ha img { width: 100%; height: 100%; object-fit: cover; }
  .hero-art .ha-0 { grid-row: 1 / 3; }
  .hero-art .ha figcaption { position: absolute; left: 10px; bottom: 10px; background: rgba(255, 255, 255, .95); border-radius: 999px; padding: 5px 11px; font-size: 13px; font-weight: 700; color: var(--ink); max-width: calc(100% - 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hero-art-empty { display: grid; place-items: center; }
  .hero-illus { width: 100%; max-width: 420px; margin: 0 auto; }

  .cats { grid-auto-flow: row; grid-template-columns: repeat(11, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 4px 0 10px; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .grid-producers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .pcard-title { font-size: 16.5px; }
  .pcard-body { padding: 12px 14px 14px; }
  .section { padding-top: 38px; padding-bottom: 38px; }

  .browse-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; }
  .browse-layout .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filters, .filters.open { display: block; position: sticky; top: calc(var(--topbar-h) + 16px); inset: auto; z-index: 1; background: none; padding: 0; overflow: visible; max-height: calc(100vh - var(--topbar-h) - 32px); overflow-y: auto; }
  .filters-head .btn, .filters-apply, .filter-toggle, .filters-row { display: none; }
  .filters-head h2 { font-size: 20px; }

  .prod { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 44px; align-items: start; margin-top: 6px; }
  .gallery { position: sticky; top: calc(var(--topbar-h) + 16px); }
  .gallery-track { border-radius: var(--radius); }
  .gallery-dots { display: none; }
  .gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; }
  .gallery-thumbs button { border: 2px solid transparent; padding: 0; border-radius: 12px; overflow: hidden; width: 84px; height: 64px; background: none; }
  .gallery-thumbs button.on { border-color: var(--green); }
  .gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
  .prod-info { padding-top: 0; }
  .contactbar { position: static; background: none; border: 0; box-shadow: none; padding: 0; margin: 0 0 14px; }
  .contactbar-in { display: block; }
  .contact-inline-desktop { display: block; }

  .cover { height: 300px; border-radius: 0 0 32px 32px; }
  .phead { margin-top: -64px; }
  .phead .avatar-lg { width: 132px; height: 132px; font-size: 54px; }
  .playout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-items: start; }
  .pside { position: sticky; top: calc(var(--topbar-h) + 16px); }
  .playout .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
  .fab { display: none; }
  .del-label { display: none; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .stat { padding: 16px; }
  .stat b { font-size: 32px; }
  .form-2col { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
  .form-aside { position: sticky; top: calc(var(--topbar-h) + 16px); }

  .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .field-strip { margin: 0; padding: 4px 0 10px; }
  .field-post { flex: 0 0 300px; }
  .feat { grid-template-columns: 1.1fr 1fr; }
  .feat-photos { height: 100%; min-height: 320px; }
  .feat-body { padding: 40px 44px; }
  .band { padding: 46px 52px; display: grid; grid-template-columns: 1.3fr .7fr; gap: 30px; align-items: center; }
  .band .btn-row { justify-content: flex-end; }
  .season-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-in { grid-template-columns: 1.2fr 2fr; gap: 50px; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .browse-layout .grid, .playout .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  .contact-inline-desktop { display: none; }
}

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

@media print {
  .topbar, .tabbar, .footer, .contactbar, .fav-btn { display: none !important; }
  body { background: #fff; padding: 0; }
}

/* =========================================================================
   ΟΠΤΙΚΟ ΠΕΡΑΣΜΑ — βάθος, υφή και ρυθμός. Τίποτα που να κοστίζει σε ταχύτητα:
   μόνο gradients και ένα ελαφρύ SVG grain, κανένα εξωτερικό αρχείο.
   ========================================================================= */

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 500px at 8% -8%, rgba(47, 107, 63, .07), transparent 60%),
    radial-gradient(900px 420px at 100% 0%, rgba(217, 154, 28, .10), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  /* Όχι «fixed»: στα κινητά αναγκάζει ξαναζωγράφισμα όλης της οθόνης σε κάθε κύλιση. */
  background-attachment: scroll;
}
::selection { background: rgba(217, 154, 28, .3); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Τίτλοι ενοτήτων: λεπτή γραμμή μελιού από κάτω, ίδιος ρυθμός παντού */
.section-head h2 { position: relative; padding-bottom: 10px; }
.section-head h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, var(--honey), rgba(217, 154, 28, .25));
}
.eyebrow + h2 { margin-top: 2px; }

/* Ήρωας: καμάρα και βάθος */
.hero-in {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, .7), transparent 55%),
    linear-gradient(160deg, #f6eedd 0%, var(--bg-2) 60%, #efe4cf 100%);
  border: 1px solid rgba(216, 205, 185, .7);
  box-shadow: 0 24px 60px -40px rgba(31, 42, 36, .5);
}
.hero-in::after {
  content: ""; position: absolute; left: -60px; bottom: -80px; width: 260px; height: 260px;
  border-radius: 50% 50% 0 0 / 60% 60% 0 0; background: rgba(47, 107, 63, .06); pointer-events: none;
}
.hero h1 { text-wrap: balance; }
.hero-trust span { background: rgba(255, 255, 255, .6); border: 1px solid rgba(216, 205, 185, .6); padding: 7px 12px; border-radius: 999px; }

/* Κάρτες: πιο ζεστές σκιές, ήρεμο hover */
.pcard, .rcard, .box, .feature, .cat, .myitem, .post-card, .season, .steps li {
  box-shadow: 0 1px 2px rgba(31, 42, 36, .04), 0 10px 24px -20px rgba(31, 42, 36, .5);
}
.pcard:hover, .rcard:hover { box-shadow: 0 2px 4px rgba(31, 42, 36, .06), 0 22px 40px -24px rgba(31, 42, 36, .55); }
.pcard-img::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 46%; pointer-events: none;
  background: linear-gradient(to top, rgba(20, 26, 22, .28), transparent);
  opacity: 0; transition: opacity .25s;
}
.pcard:hover .pcard-img::after { opacity: 1; }
.pcard-price b { font-variant-numeric: tabular-nums; }
.pcard-title { min-height: 2.6em; }

/* Κουμπιά: ελαφρύ βάθος αντί για επίπεδο χρώμα */
.btn-primary { background: linear-gradient(180deg, #37784a, var(--green)); }
.btn-primary:hover { background: linear-gradient(180deg, var(--green), var(--green-600)); }
.btn-warm { background: linear-gradient(180deg, #c9642f, var(--clay)); }
.cbtn { box-shadow: 0 10px 20px -14px rgba(0, 0, 0, .8); }

/* Κατηγορίες: απαλός τόνος στο εικονίδιο */
.cat-ic { background: linear-gradient(160deg, var(--green-50), #e3efe2); }
.cat:hover .cat-ic { background: linear-gradient(160deg, #dcecda, #cfe5cd); }

/* Σελίδα παραγωγού: εξώφυλλο με βάθος και δαχτυλίδι στο avatar */
.cover { box-shadow: inset 0 -60px 80px -60px rgba(0, 0, 0, .6); }
.phead .avatar-lg { box-shadow: 0 0 0 4px #fff, 0 18px 30px -18px rgba(31, 42, 36, .8); }
.phead h1 { text-wrap: balance; }

/* Λωρίδα κριτικών στην αρχική */
.section-quotes { position: relative; }
.quote-strip { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 12px; margin: 0 -16px; scrollbar-width: none; }
.quote-strip::-webkit-scrollbar { display: none; }
.quote {
  scroll-snap-align: start; flex: 0 0 290px; display: flex; flex-direction: column; gap: 8px; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px 14px; color: var(--ink);
  box-shadow: 0 1px 2px rgba(31, 42, 36, .04), 0 10px 24px -20px rgba(31, 42, 36, .5); transition: transform .18s, box-shadow .18s;
}
.quote:hover { transform: translateY(-2px); color: var(--ink); box-shadow: 0 2px 4px rgba(31, 42, 36, .06), 0 20px 34px -22px rgba(31, 42, 36, .55); }
.quote p { margin: 0; font-family: var(--serif); font-size: 16.5px; line-height: 1.45; color: var(--ink); }
.quote-by { display: flex; align-items: center; gap: 7px; margin-top: auto; font-size: 13.5px; color: var(--muted); }
.quote-by b { color: var(--ink-2); }

/* Λωρίδα «Από το χωράφι»: κάρτες με χείλος */
.field-post { box-shadow: 0 12px 26px -20px rgba(31, 42, 36, .8); }
.field-post::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .25); border-radius: inherit; pointer-events: none; }

/* Φόρμες: πιο ήρεμα πεδία */
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=number], input[type=search], input[type=url], select, textarea {
  background: #fffdf9; box-shadow: inset 0 1px 2px rgba(31, 42, 36, .04);
}
.card-form { box-shadow: 0 2px 4px rgba(31, 42, 36, .04), 0 30px 60px -45px rgba(31, 42, 36, .6); }

/* Μπάρα επικοινωνίας στο κινητό: να ξεχωρίζει από το περιεχόμενο */
.contactbar { box-shadow: 0 -10px 30px -18px rgba(31, 42, 36, .55); }

/* ---------- Παραγγελίες, συνομιλία, ανταμοιβή ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.section-title { font-family: var(--serif); font-size: 21px; margin: 0 0 10px; }
.steps-tall li { padding-top: 14px; padding-bottom: 14px; }

/* Λίστα παραγγελιών */
/* minmax(0, 1fr): αλλιώς το κείμενο που δεν σπάει («Θυμαρίσιο μέλι · 3 κιλό») φαρδαίνει τη στήλη. */
.orows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.orow {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; transition: border-color .15s, transform .15s;
}
.orow:hover { border-color: var(--green); transform: translateY(-1px); color: var(--ink); }
.orow.is-unread { border-color: var(--clay); background: #fffdf7; }
.orow .avatar { flex: none; }
.orow-main { flex: 1 1 auto; min-width: 0; }
.orow-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.orow-top b { font-size: 16.5px; }
.orow-what { margin: 2px 0; color: var(--ink-2); font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow p { margin: 0; }
.orow > .ic { flex: none; color: var(--muted); }
.dotnew { color: var(--clay); }

/* Νήμα συνομιλίας */
.thread { max-width: 760px; margin: 0 auto; }
.thread-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.thread-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.thread-who h1 { font-size: 22px; margin: 0; }
.thread-who p { margin: 2px 0 0; }
.thread-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.thread-info { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; }
.msgs { display: grid; gap: 10px; padding: 8px 0 14px; }
.msg { max-width: 82%; justify-self: start; background: var(--card); border: 1px solid var(--line); border-radius: 16px 16px 16px 5px; padding: 10px 14px; }
.msg-mine { justify-self: end; background: var(--green-50); border-color: #cfe3d3; border-radius: 16px 16px 5px 16px; }
.msg p { margin: 0; white-space: pre-line; }
.msg time { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.msg-request { background: var(--honey-50); border-color: #f1dfb2; max-width: 100%; }
.msg-tag { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #7a5410; margin-bottom: 4px; }
.msg-tag .ic { width: 16px; height: 16px; }
.msg-sys { justify-self: center; text-align: center; }
.msg-sys span { display: inline-block; font-size: 13.5px; color: var(--muted); background: var(--bg-2); border-radius: 999px; padding: 5px 12px; }
.msg-form { display: flex; gap: 8px; align-items: flex-end; position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; }
.msg-form textarea { flex: 1 1 auto; resize: none; min-height: 46px; max-height: 160px; border-radius: 16px; padding: 12px 14px; }
.msg-form .btn { flex: none; width: 50px; height: 46px; padding: 0; display: grid; place-items: center; }
.quick { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.quick::-webkit-scrollbar { display: none; }
.quick .chip { white-space: nowrap; }
.thread-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.thread-actions .inline { display: inline; }
.thread-actions details.more { flex: 1 1 200px; }
.confirm-box { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; width: 100%; background: var(--green-50); border: 1px solid #cfe3d3; border-radius: 16px; padding: 14px 16px; }
.confirm-box b { display: flex; align-items: center; gap: 6px; font-size: 17px; }
.confirm-box p { margin: 2px 0 0; }

/* Κάρτα σφραγίδων */
.cards-stamps { display: grid; gap: 12px; margin-bottom: 20px; }
.stamps { background: var(--card); border: 1px dashed var(--clay); border-radius: 16px; padding: 14px 16px; display: grid; gap: 8px; }
.stamps b { display: flex; align-items: center; gap: 6px; }
.stamp-row { display: flex; flex-wrap: wrap; gap: 8px; }
.stamp {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--muted);
  background: var(--bg-2); border: 1px dashed var(--line-2);
}
.stamp.on { background: var(--green); border: 0; color: #fff; }
.stamp .ic { width: 20px; height: 20px; }

/* Επίπεδο και σήματα */
.box-level { background: linear-gradient(180deg, #fffdf7, var(--card)); }
.level { display: grid; gap: 8px; }
.level-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.level-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 750; font-family: var(--serif); font-size: 18px; }
.level-name .ic { width: 18px; height: 18px; color: var(--honey, #c99a2e); }
.level-bar { height: 10px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.level-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), #7bb26a); border-radius: 999px; }
.level p { margin: 0; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; padding: 5px 10px; border-radius: 999px; background: var(--honey-50); color: #7a5410; }
.badge .ic { width: 15px; height: 15px; }
.ledger { display: grid; gap: 8px; }
.ledger div { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 14.5px; }
.ledger b { color: var(--green-700); }
.ledger time { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); }
.levels { display: grid; gap: 8px; margin: 12px 0 18px; }
.lvl { display: flex; justify-content: space-between; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.lvl span { color: var(--muted); }
.copyrow { display: flex; gap: 8px; }
.copyrow input { flex: 1 1 auto; min-width: 0; font-size: 14px; }

/* Φόρμα παραγγελίας */
.order-box { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-50); }
.order-box .box-title { color: var(--green-700); }
.qty-wrap { position: relative; display: flex; align-items: center; }
.qty-wrap input { padding-right: 84px; }
.qty-unit { position: absolute; right: 12px; color: var(--muted); font-size: 14px; pointer-events: none; }
.reward-hint { background: var(--honey-50); border-radius: 12px; padding: 10px 12px; font-size: 14.5px; display: flex; gap: 8px; align-items: flex-start; }
.reward-hint .ic { width: 18px; height: 18px; flex: none; color: #7a5410; margin-top: 2px; }
.reward-hint .stamp-count { color: #7a5410; }
/* Στο κινητό η ποσότητα και το «πότε» θέλουν όλο το πλάτος για να διαβάζονται. */
@media (max-width: 599px) {
  .order-box .row2 { grid-template-columns: 1fr; }
}

@media (min-width: 900px) {
  .orow { padding: 14px 16px; }
  .msg { max-width: 68%; }
}

/* ---------- Λογαριασμός αγοραστή ---------- */
.nudge {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: 14px 0 20px;
  background: linear-gradient(135deg, var(--honey-50), #fffdf7); border: 1px solid #ecdcb8; border-radius: 18px; padding: 14px 16px;
}
.nudge-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--clay); box-shadow: 0 1px 2px rgba(31, 42, 36, .06); }
.nudge-ic .ic { width: 22px; height: 22px; }
.nudge > div { flex: 1 1 220px; }
.nudge b { display: block; font-size: 16.5px; }
.nudge p { margin: 2px 0 0; }
.nudge-warn { background: linear-gradient(135deg, var(--clay-50), #fffaf6); border-color: #f0cdb8; }
.card-attn { border-color: var(--clay); box-shadow: 0 0 0 3px var(--clay-50); }

/* Newsletter: το κουτάκι της συγκατάθεσης ξεχωρίζει λίγο από τους όρους, χωρίς να «φωνάζει». */
.check-news { background: var(--green-50); border: 1px solid var(--green-100); border-radius: 14px; padding: 12px 14px; }
.news-state { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; font-weight: 600; }
.news-state .ic { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.news-state.is-on { color: var(--green-700); }
.news-state.is-wait { color: #7a5410; }

/* Επιλογέας γλώσσας (εμφανίζεται μόνο όταν το config ανοίγει τα αγγλικά). */
.lang-switch { margin-left: auto; display: inline-flex; border: 1.5px solid var(--line-2); border-radius: 999px; background: #fff; padding: 2px; }
.lang-switch a, .lang-switch span { display: grid; place-items: center; min-width: 38px; min-height: 34px; border-radius: 999px; font-size: 13.5px; font-weight: 700; text-decoration: none; color: var(--ink-2); }
.lang-switch span { background: var(--green); color: #fff; }
.lang-switch a:hover { color: var(--green-700); background: var(--green-50); }
.lang-switch + .area-pill { margin-left: 8px; }
.callback-me { display: flex; align-items: center; gap: 6px; margin: -2px 0 4px; color: var(--green-700); font-weight: 600; }
.callback-me .ic { width: 16px; height: 16px; }
.topnav-in { white-space: nowrap; }

@media (min-width: 900px) {
  .quote-strip { margin: 0; padding: 4px 0 12px; }
  .quote { flex: 0 0 330px; }
  .hero-in::after { width: 360px; height: 360px; left: -110px; bottom: -120px; }
  .nudge { padding: 16px 20px; }
}
.footer .lang-switch { margin: 14px 0 0; }

/* =========================================================================
   1.3 — Το τοπίο του χωριού, ο λογαριασμός αγοραστή, η ιχνηλασιμότητα, η φάρμα.
   Κινήσεις: ΜΟΝΟ transform και opacity. Σύννεφα/πουλιά σε δικά τους στρώματα
   (will-change), όλα παγώνουν εκτός οθόνης (.is-paused) και σβήνουν με reduced-motion.
   ========================================================================= */

/* ---------- Ήρωας με το χωριό ---------- */
.hero-village { padding-bottom: 200px; }
.hero-village::after { display: none; }
.hero-village .hero-copy, .hero-village .hero-art { position: relative; z-index: 2; }
.hero-cta { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 16px; }
.hero-cta .btn-warm { box-shadow: 0 2px 0 #8f3f1b, 0 14px 28px -16px rgba(184, 86, 42, .8); }
.hero-cta-link { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; font-weight: 700; text-decoration: none; }
.hero-cta-link .ic { width: 18px; height: 18px; }
.hero-cta-note { flex-basis: 100%; font-size: 14px; color: var(--ink-2); max-width: 46ch; }

.village-wrap {
  --v-far: #d8e3ca; --v-mid: #bad0a6; --v-near: #96b782; --v-front: #82a66f; --v-row: #a9c595;
  --v-wall: #fffaf1; --v-roof: #c46a3e; --v-win: #8a6a4a; --v-cypress: #3f6e48; --v-olive: #6d8d5a; --v-olive-2: #82a16d;
  --v-trunk: #7b5b3d; --v-sun: #e9b44f; --v-cloud: #fffdf8; --v-hive: #e4b85d; --v-lid: #c08d38; --v-tuft: #9cb86a; --v-bird: #5c554b;
  position: absolute; left: 0; right: 0; bottom: 0; height: 210px; z-index: 1; overflow: hidden; pointer-events: none;
  contain: layout paint; border-radius: 0 0 26px 26px;
}
.village { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.v-sky { position: absolute; left: 0; right: 0; top: 0; height: 58%; }
.v-lane { position: absolute; left: 0; width: 100%; top: 10%; will-change: transform; animation: v-drift 120s linear infinite; }
.v-lane-2 { top: 0; animation-duration: 165s; animation-delay: -75s; }
.v-lane-3 { top: 34%; animation-duration: 100s; animation-delay: -42s; }
.v-lane-birds { top: 18%; animation-name: v-fly; animation-duration: 46s; animation-delay: -14s; }
.v-cloud { position: absolute; left: -150px; top: 0; width: 120px; display: block; }
.v-lane-2 .v-cloud { width: 88px; opacity: .85; }
.v-lane-3 .v-cloud { width: 70px; opacity: .75; }
.v-cloud svg, .v-birds svg { display: block; width: 100%; height: auto; overflow: visible; }
.v-cloud ellipse { fill: var(--v-cloud); }
.v-birds { position: absolute; right: -80px; top: 0; width: 54px; display: block; }
.v-hill-far { fill: var(--v-far); }
.v-hill-mid { fill: var(--v-mid); }
.v-hill-near { fill: var(--v-near); }
.v-front { fill: var(--v-front); }
.v-wall { fill: var(--v-wall); }
.v-roof { fill: var(--v-roof); }
.v-win { fill: var(--v-win); }
.v-cross { fill: none; stroke: var(--v-win); stroke-width: 1.5; stroke-linecap: round; }
.v-cypress ellipse { fill: var(--v-cypress); }
.v-trunk { fill: var(--v-trunk); }
.v-crown circle { fill: var(--v-olive); }
.v-crown circle:nth-child(2) { fill: var(--v-olive-2); }
.v-rows path { fill: none; stroke: var(--v-row); stroke-width: 2.5; stroke-linecap: round; }
.v-hives rect { fill: var(--v-hive); }
.v-hives .v-lid { fill: var(--v-lid); }
.v-bees circle { fill: #4b3d22; }
.v-tuft { fill: none; stroke: var(--v-tuft); stroke-width: 2; stroke-linecap: round; }
.v-sun-core { fill: var(--v-sun); }
.v-sun-glow { fill: var(--v-sun); opacity: .25; }
.v-smoke circle { fill: #fff; opacity: 0; }
.v-bird { fill: none; stroke: var(--v-bird); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.v-smoke circle, .v-tuft, .v-crown, .v-bees circle, .v-sun-glow, .v-bird { transform-box: fill-box; }
.v-smoke circle { transform-origin: center; animation: v-smoke 6s ease-out infinite; }
.v-tuft { transform-origin: 50% 100%; animation: v-sway 3.8s ease-in-out infinite alternate; }
.v-crown { transform-origin: 50% 100%; animation: v-sway-soft 6s ease-in-out infinite alternate; }
.v-bees circle { animation: v-bee 3.2s ease-in-out infinite; }
.v-sun-glow { transform-origin: center; animation: v-glow 5s ease-in-out infinite alternate; }
.v-bird { transform-origin: center; animation: v-flap .7s ease-in-out infinite; }
.village-wrap.is-paused, .village-wrap.is-paused * { animation-play-state: paused !important; }
@keyframes v-drift { from { transform: translateX(-10%); } to { transform: translateX(118%); } }
@keyframes v-fly { from { transform: translateX(8%); } to { transform: translateX(-122%); } }
@keyframes v-smoke { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 15% { opacity: .8; } 100% { transform: translate(8px, -38px) scale(1.6); opacity: 0; } }
@keyframes v-sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes v-sway-soft { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
@keyframes v-bee { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(9px, -6px); } 50% { transform: translate(16px, 2px); } 75% { transform: translate(6px, 7px); } }
@keyframes v-glow { from { transform: scale(1); opacity: .22; } to { transform: scale(1.12); opacity: .4; } }
@keyframes v-flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.5); } }

@media (min-width: 900px) {
  .hero-village { padding-bottom: 250px; }
  .village-wrap { height: 330px; border-radius: 0 0 32px 32px; }
  .hero-village.hero-solo { grid-template-columns: minmax(0, 1fr); }
  .hero-solo .hero-copy { max-width: 720px; }
  .hero-cta-note { flex-basis: auto; }
}

/* Κεφαλίδα: ο λογαριασμός αγοραστή είναι το κύριο κουμπί για όποιον δεν έχει συνδεθεί. */
.topnav .btn-warm { white-space: nowrap; }
.topnav-producer { font-size: 14.5px; color: var(--muted); }
.topnav > a { white-space: nowrap; }
/* Laptops: the full menu does not fit next to the logo, search and area picker.
   «Είσαι παραγωγός;» is also in the hero and the footer. */
@media (max-width: 1440px) {
  .topnav .topnav-producer { display: none; }
  .topnav > a:not(.btn) { padding: 10px 9px; }
}

/* ---------- «Ξέρεις από πού έρχεται» ---------- */
.journey { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.journey-step {
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 2px;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px;
}
.journey-step b { grid-column: 2; font-size: 17.5px; font-family: var(--serif); }
.journey-step > span:last-child { grid-column: 2; color: var(--ink-2); font-size: 15.5px; }
.journey-ic { grid-row: 1 / 3; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--green-50); color: var(--green); }
.journey-ic .ic { width: 24px; height: 24px; }
.journey-step:last-child .journey-ic { background: var(--honey-50); color: var(--clay); }
.journey-step:not(:last-child)::after {
  content: "›"; position: absolute; z-index: 1; left: 28px; bottom: -19px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--honey); color: #fff; font-weight: 800; font-size: 18px; line-height: 1;
  box-shadow: 0 0 0 4px var(--bg); transform: rotate(90deg);
}
.journey-counts { margin: 16px 0 0; font-weight: 650; color: var(--green-700); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .journey { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .journey-step:not(:last-child)::after { left: auto; right: -22px; bottom: auto; top: 28px; transform: none; }
}

/* ---------- Λογαριασμός αγοραστή: η ζώνη στην αρχική ---------- */
.acct-band { display: grid; gap: 22px; background: linear-gradient(160deg, #fff8ec, var(--honey-50)); border: 1px solid #efdcb4; border-radius: 26px; padding: 24px 20px; }
.acct-copy h2 { font-size: clamp(25px, 5vw, 34px); text-wrap: balance; margin-bottom: 14px; }
.acct-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.acct-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 16.5px; }
.acct-list .ic { flex: none; width: 22px; height: 22px; color: var(--green); margin-top: 2px; }
.receipt { position: relative; max-width: 380px; margin: 0 auto; background: #fffdf8; border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 16px; font-size: 14.5px; box-shadow: 0 22px 44px -28px rgba(31, 42, 36, .6); transform: rotate(-1.2deg); }
.receipt-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1.5px dashed var(--line-2); padding-bottom: 10px; margin-bottom: 4px; }
.receipt-head b { font-family: var(--serif); font-size: 19px; }
.receipt-tag { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 8px; }
.receipt-row { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.receipt-item { font-weight: 700; }
.receipt-from { display: inline-flex; align-items: center; gap: 5px; color: var(--green-700); }
.receipt-from .ic { width: 14px; height: 14px; }
.receipt-when { color: var(--muted); font-size: 13px; }
.receipt-stamps { display: flex; gap: 6px; margin-top: 12px; }
.receipt-stamps .stamp { width: 30px; height: 30px; font-size: 12px; }
.receipt-stamps .stamp .ic { width: 16px; height: 16px; }
.receipt-stamps .stamp-gift { background: var(--clay-50); color: var(--clay); }
@media (min-width: 900px) {
  .acct-band { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 40px; padding: 40px 48px; }
}

/* ---------- Σελίδα παραγωγού: η φάρμα και οι φωτογραφίες ---------- */
.badge-farm { background: var(--green-50); color: var(--green-700); border-color: var(--green-100); }
.trace-line { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; font-size: 15.5px; color: var(--ink-2); max-width: 62ch; }
.trace-line .ic { flex: none; width: 20px; height: 20px; color: var(--clay); margin-top: 2px; }
.tag-filter { margin-bottom: 14px; }
.tag-filter .chip { font: inherit; font-size: 15px; font-weight: 550; cursor: pointer; min-height: 44px; }
.tag-filter .chip .muted { font-size: 13px; }
.tag-filter .chip.is-on .muted { color: rgba(255, 255, 255, .8); }
.field-item[hidden] { display: none !important; }
.field-item .chip-mini { justify-self: start; margin-bottom: 2px; }
.farm-facts { margin-top: 16px; }
.farm-sub { display: flex; align-items: center; gap: 8px; margin: 18px 0 6px; font-family: var(--serif); font-size: 18px; }
.farm-sub .ic { color: var(--green); }

/* ---------- Σελίδα προϊόντος: «Από πού έρχεται» ---------- */
.prod-origin { display: flex; align-items: center; gap: 6px; margin: -4px 0 10px; color: var(--green-700); font-weight: 600; font-size: 15.5px; }
.prod-origin .ic { width: 18px; height: 18px; flex: none; }
.trace { border-color: var(--green-100); background: linear-gradient(180deg, #f8fbf5, var(--card) 60%); }
.trace-steps { list-style: none; padding: 0; margin: 0; display: grid; }
.trace-step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding-bottom: 14px; }
.trace-step:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 42px; bottom: 2px; width: 2px; background: repeating-linear-gradient(var(--green-100) 0 5px, transparent 5px 9px); }
.trace-step > div { display: grid; gap: 2px; padding-top: 1px; min-width: 0; }
.trace-step > div > span { font-size: 14.5px; color: var(--ink-2); }
.trace-dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--green-50); color: var(--green); overflow: hidden; }
.trace-dot .ic { width: 20px; height: 20px; }
.trace-dot-av .avatar { width: 40px; height: 40px; font-size: 16px; }
.trace-dot-you { background: var(--honey-50); color: var(--clay); }
.trace-photos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; text-decoration: none; font-weight: 650; }
.trace-photos img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; }
.trace-photos span { display: inline-flex; align-items: center; gap: 2px; }

/* ---------- Προφίλ: διαχείριση φωτογραφιών από τη δουλειά ---------- */
.farm-upload { margin-top: 12px; }
.tag-choices .choice span { font-size: 14.5px; padding: 0 12px; }
.farm-edit-list { display: grid; gap: 12px; margin-top: 16px; }
.farm-edit { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: start; border: 1px solid var(--line); border-radius: 16px; padding: 10px; background: var(--card); }
.farm-edit img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; }
.farm-edit-form { gap: 8px; }
@media (max-width: 559px) {
  .farm-edit { grid-template-columns: 72px minmax(0, 1fr); }
  .farm-edit img { width: 72px; height: 54px; }
  .farm-edit-del { grid-column: 2; justify-self: end; }
}

/* =========================================================================
   1.4 — Το ζωντανό χωριό: ώρα της ημέρας, εποχή, φόντο σε κάθε σελίδα.
   Κανόνες που δεν σπάνε ποτέ:
   - Κινούνται ΜΟΝΟ transform και opacity.
   - Ό,τι είναι .v-extra σβήνει στα κινητά και σε αδύναμες συσκευές.
   - .is-paused παγώνει τα πάντα· το prefers-reduced-motion τα σβήνει.
   - Το φόντο δεν παίρνει ποτέ κλικ και μένει πίσω από το περιεχόμενο.
   ========================================================================= */

/* ---------- Παλέτες ώρας ---------- */
.v-dawn {
  --v-sky-1: #ffd9b0; --v-sky-2: #ffeede; --v-sun: #f6a35b; --v-cloud: #fff2e4;
  --v-far: #d5dcc4; --v-mid: #b6c9a3; --v-near: #93b17f; --v-front: #7fa06c; --v-mount: #c8c6cf; --v-mount-2: #b7b6c2;
}
.v-day {
  --v-sky-1: #cfe6f5; --v-sky-2: #f3f7ea; --v-sun: #e9b44f; --v-cloud: #fffdf8;
  --v-far: #d8e3ca; --v-mid: #bad0a6; --v-near: #96b782; --v-front: #82a66f; --v-mount: #c3ccd6; --v-mount-2: #b2bcc8;
}
.v-dusk {
  --v-sky-1: #f6b98a; --v-sky-2: #fde3cb; --v-sun: #e8743f; --v-cloud: #ffeadb;
  --v-far: #c3c9b2; --v-mid: #a5b892; --v-near: #85a071; --v-front: #728e61; --v-mount: #b8aeb4; --v-mount-2: #a79ea8;
}
.v-night {
  --v-sky-1: #23324a; --v-sky-2: #3c4e66; --v-sun: #dfe6f2; --v-cloud: #46587231;
  --v-far: #46583f; --v-mid: #3b4c39; --v-near: #334331; --v-front: #2b3a2b; --v-mount: #3a4358; --v-mount-2: #333b4d;
  --v-wall: #dfd7c6; --v-roof: #7a4530; --v-win: #ffcf70; --v-cypress: #2b4432; --v-olive: #3f5a3c; --v-olive-2: #4a6845;
  --v-tuft: #5f7248; --v-row: #4a5f45; --v-bird: #2a2f3a; --v-hive: #9c7f3f; --v-lid: #7d6330;
}

/* Σύννεφα και ουρανός παίρνουν το χρώμα της ώρας. */
.village-wrap .v-sky, .vbg-sky { background: linear-gradient(180deg, var(--v-sky-1, #cfe6f5), var(--v-sky-2, #f3f7ea)); }
.v-night .v-cloud { opacity: .35; }
.v-mount { fill: var(--v-mount, #c3ccd6); }
.v-mount-2 { fill: var(--v-mount-2, #b2bcc8); }
.v-snow { fill: #fffdf8; opacity: .9; }

/* Ήλιος, φεγγάρι, αστέρια: εναλλάσσονται με την ώρα, χωρίς να αλλάζει το HTML. */
.v-moon, .v-stars { opacity: 0; pointer-events: none; }
.v-night .v-moon, .v-night .v-stars { opacity: 1; }
.v-night .v-sun-core, .v-night .v-sun-glow { opacity: 0; }
.v-moon-core { fill: #f5f3ea; }
.v-moon-bite { fill: var(--v-sky-1, #23324a); }
.v-stars circle { fill: #fff; transform-box: fill-box; transform-origin: center; animation: v-twinkle 4.5s ease-in-out infinite; }

/* Τα παράθυρα ανάβουν μόνο τη νύχτα. */
.v-night .v-win { fill: var(--v-win); }
.v-night .v-village .v-win { filter: none; }

/* ---------- Ανεμόμυλος, νερόμυλος, καμπάνα ---------- */
.v-mill-body { fill: var(--v-wall); }
.v-mill-top { fill: var(--v-roof); }
.v-mill-sails path { fill: none; stroke: var(--v-trunk); stroke-width: 2.4; stroke-linecap: round; }
.v-sail { fill: #f6ead0; stroke: var(--v-roof); stroke-width: 1.4; }
.v-path { fill: none; stroke: #d9c9a6; stroke-width: 5; stroke-linecap: round; opacity: .8; }
.v-mill-sails circle { fill: var(--v-roof); }
.v-mill-sails { transform-origin: center; animation: v-spin 14s linear infinite; }
.v-wheel-rim { fill: none; stroke: var(--v-trunk); stroke-width: 2.4; }
.v-wheel-spokes { fill: none; stroke: var(--v-trunk); stroke-width: 1.6; }
.v-wheel { transform-origin: center; animation: v-spin 9s linear infinite; }
.v-bell-body { fill: var(--v-lid); }
.v-bell { transform-origin: top center; animation: v-bell 6s ease-in-out infinite; }

/* ---------- Ποτάμι και γεφύρι ---------- */
.v-river { fill: none; stroke: #8fc2d8; stroke-width: 7; stroke-linecap: round; opacity: .75; }
.v-night .v-river { stroke: #4d6b86; }
.v-river-shine { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; opacity: .5; animation: v-shine 4.5s ease-in-out infinite; }
.v-bridge-deck, .v-bridge-leg { fill: none; stroke: var(--v-trunk); stroke-linecap: round; }
.v-bridge-deck { stroke-width: 3.4; }
.v-bridge-leg { stroke-width: 2; }

/* ---------- Αμπέλι, παπαρούνες, κότες, πρόβατα, πεταλούδες ---------- */
.v-vines path { fill: none; stroke: var(--v-trunk); stroke-width: 1.6; }
.v-vines circle { fill: var(--v-olive); }
.v-stem { fill: none; stroke: #5f7a45; stroke-width: 1.4; stroke-linecap: round; }
.v-petal { fill: #d2563c; }
.v-poppy { transform-box: fill-box; transform-origin: 50% 100%; animation: v-sway 4.6s ease-in-out infinite alternate; }
.v-hen { fill: #f3ede1; }
.v-comb { fill: #d2563c; }
.v-legs { fill: none; stroke: #b08a4e; stroke-width: 1.2; stroke-linecap: round; }
.v-peck { transform-box: fill-box; transform-origin: 20% 80%; animation: v-peck 3.4s ease-in-out infinite; }
.v-fleece { fill: #fbf7ee; }
.v-face { fill: #3f3a33; }
.v-night .v-fleece { fill: #cfc8bb; }
.v-sheep { transform-box: fill-box; transform-origin: 50% 100%; animation: v-graze 5s ease-in-out infinite; }
.v-herd { position: absolute; left: -140px; top: 0; width: 120px; display: block; }
.v-herd svg { display: block; width: 100%; height: auto; overflow: visible; }
.v-butterfly { position: absolute; left: -40px; top: 0; width: 18px; display: block; }
.v-butterfly svg { display: block; width: 100%; height: auto; overflow: visible; }
.v-butterfly ellipse { fill: #e8913f; }
.v-butterfly .v-body { fill: #4b3d22; }
.v-wing-l, .v-wing-r { transform-box: fill-box; transform-origin: 100% 50%; animation: v-wing .32s ease-in-out infinite alternate; }
.v-wing-r { transform-origin: 0% 50%; }
.v-birds-big { width: 92px; }

/* ---------- Μπουγάδα ---------- */
.v-line { fill: none; stroke: #8d7f6a; stroke-width: 1; }
.v-cloth { fill: #eef2f6; transform-box: fill-box; transform-origin: 50% 0; animation: v-sway 3.2s ease-in-out infinite alternate; }
.v-cloth-2 { fill: #f7e2c6; animation-delay: -.8s; }
.v-cloth-3 { fill: #dfeadd; animation-delay: -1.6s; }

/* ---------- Πυγολαμπίδες (μόνο νύχτα) ---------- */
.v-fireflies { opacity: 0; }
.v-night .v-fireflies { opacity: 1; }
.v-fireflies circle { fill: #ffe89a; transform-box: fill-box; transform-origin: center; animation: v-firefly 7s ease-in-out infinite; }

/* ---------- Εποχές ---------- */
.v-blossom { fill: #f6d3de; opacity: 0; }
.v-spring .v-blossom { opacity: .9; }
.v-summer { --v-tuft: #cbb35f; --v-front: #93a765; }
.v-autumn { --v-olive: #8a7f42; --v-olive-2: #a58d4a; --v-tuft: #b39a58; --v-row: #b0a071; }
.v-winter { --v-far: #dfe4dd; --v-mid: #cdd6c8; --v-near: #b6c4b2; --v-front: #a8b8a5; --v-tuft: #b9c2b0; --v-olive: #6f8768; --v-olive-2: #7e9476; }
.v-winter .v-snow { opacity: 1; }

/* Ό,τι πέφτει από τον ουρανό. Ένα στρώμα, λίγα κομμάτια, μόνο transform. */
.v-fall { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.v-flake { position: absolute; top: -14px; width: 7px; height: 7px; border-radius: 50% 0 50% 50%; background: #f3c9d6; opacity: .85; will-change: transform; animation: v-fall 11s linear infinite; }
.v-autumn .v-flake { background: #c8863c; border-radius: 50% 0 50% 0; }
.v-winter .v-flake { background: #fff; border-radius: 50%; width: 5px; height: 5px; }
.v-summer .v-fall { display: none; }

/* ---------- Νέα στρώματα ουρανού ---------- */
.v-lane-flock { top: 6%; animation-name: v-fly; animation-duration: 78s; animation-delay: -30s; }
.v-lane-fly { top: 58%; animation-name: v-drift; animation-duration: 42s; animation-delay: -8s; }
.v-lane-fly2 { top: 72%; animation-name: v-drift; animation-duration: 55s; animation-delay: -30s; }
.v-lane-herd { top: auto; bottom: 6%; animation-name: v-drift; animation-duration: 150s; animation-delay: -20s; }

/* ---------- Το φόντο κάθε σελίδας ---------- */
.vbg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  --v-far: #d8e3ca; --v-mid: #bad0a6; --v-near: #96b782; --v-front: #82a66f; --v-row: #a9c595;
  --v-wall: #fffaf1; --v-roof: #c46a3e; --v-win: #8a6a4a; --v-cypress: #3f6e48; --v-olive: #6d8d5a; --v-olive-2: #82a16d;
  --v-trunk: #7b5b3d; --v-sun: #e9b44f; --v-cloud: #fffdf8; --v-tuft: #9cb86a; --v-bird: #5c554b;
}
/* Το φόντο μένει ψίθυρος: καμία βαφή πάνω στο χαρτί της σελίδας, μόνο μια λωρίδα
   τοπίου στο κάτω μέρος που σβήνει προς τα πάνω, ώστε τα γράμματα να μη χάνουν ποτέ
   αντίθεση. Τη νύχτα η σελίδα ΔΕΝ σκοτεινιάζει — αλλάζει μόνο το τοπίο της αρχικής. */
.vbg-sky { position: absolute; inset: 0; background: none; opacity: 1; }
/* Ουρανός μόνο στο πάνω μέρος, που σβήνει μέσα στο χρώμα της σελίδας. */
.vbg-top {
  position: absolute; left: 0; right: 0; top: 0; height: 60vh;
  background: linear-gradient(180deg, rgba(150, 200, 228, .55), rgba(150, 200, 228, .18) 45%, rgba(150, 200, 228, 0));
}
.vbg .v-cloud { opacity: .75; }

/* ---------- Τα φρούτα και τα λαχανικά της εποχής, στα περιθώρια ---------- */
.vbg-produce span { position: absolute; display: block; opacity: .24; will-change: transform; animation: v-bob 11s ease-in-out infinite alternate; }
.vbg-produce svg { display: block; width: 100%; height: auto; }
/* Τα χρώματα των φρούτων: ίδια στο φόντο και στο καλάθι της αρχικής. */
.v-fruits .f-a { fill: #6f4a86; }  /* σταφύλι */
.v-fruits .f-b { fill: #7a4a6b; }  /* σύκο */
.v-fruits .f-c { fill: #c34b3c; }  /* ρόδι, φράουλα, κεράσι, ντομάτα */
.v-fruits .f-d { fill: #d9b03f; }  /* κυδώνι */
.v-fruits .f-e { fill: #e58b34; }  /* πορτοκάλι, μανταρίνι */
.v-fruits .f-f { fill: #4f6b3a; }  /* ελιά */
.v-fruits .f-g { fill: #7fa25a; }  /* μαρούλι, πεπόνι */
.v-fruits .f-h { fill: #d4432f; }  /* πιπεριά */
.v-fruits .f-i { fill: #e79a6a; }  /* ροδάκινο */
.v-fruits .f-leaf { fill: #5f8446; stroke: none; }
.v-fruits .f-stem { fill: none; stroke: #6b5638; stroke-width: 2.2; stroke-linecap: round; }
.v-fruits .f-g + .f-leaf, .v-fruits .f-h + .f-stem + .f-leaf { fill: none; stroke: #5f8446; stroke-width: 1.8; }

/* ---------- Το καλάθι της αρχικής (όταν δεν υπάρχουν ακόμα φωτογραφίες) ---------- */
/* Το .hero-art είναι πλέγμα με σταθερές σειρές 170px για τις φωτογραφίες· το σχέδιο θέλει
   δικό του πλέγμα, αλλιώς το καλάθι στριμώχνεται. Φαίνεται και στο κινητό, πιο μικρό. */
.hero-in .hero-art-drawn { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; place-items: center; min-width: 0; }
.hero-basket { width: 100%; max-width: 300px; }
@media (min-width: 900px) { .hero-basket { max-width: 520px; } }
.basket { display: block; width: 100%; height: auto; overflow: visible; }
.b-shadow { fill: #6b5638; opacity: .12; }
.b-handle { fill: none; stroke: #a9773f; stroke-width: 13; stroke-linecap: round; }
.b-body { fill: #d19a54; }
.b-rim { fill: #b9803e; }
.b-weave path { fill: none; stroke: #b9803e; stroke-width: 3; stroke-linecap: round; opacity: .75; }
.b-fruit { transform-box: fill-box; transform-origin: 50% 100%; animation: v-bob-small 5.5s ease-in-out infinite alternate; }
.b-bee ellipse { fill: #4b3d22; }
.b-bee .b-wing { fill: none; stroke: #4b3d22; stroke-width: 1.6; }
.b-bee { transform-origin: center; animation: v-bee-fly 14s linear infinite; }
@keyframes v-bob-small { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-6px) rotate(1.5deg); } }
@keyframes v-bee-fly {
  0% { transform: translate(70px, 150px); }
  25% { transform: translate(150px, 96px); }
  50% { transform: translate(250px, 130px); }
  75% { transform: translate(320px, 84px); }
  100% { transform: translate(70px, 150px); }
}
@keyframes v-bob { from { transform: translate3d(0, 0, 0) rotate(-3deg); } to { transform: translate3d(0, -16px, 0) rotate(3deg); } }
/* Τα φρούτα ζουν ΜΟΝΟ στα περιθώρια. Το περιεχόμενο πιάνει ως 1220px, οπότε κάτω από
   1500px οθόνη δεν περισσεύει χώρος και θα έπεφταν πάνω στα φίλτρα και στα γράμματα. */
@media (max-width: 1499px) { .vbg-produce { display: none; } }
.vbg .v-birds { opacity: .5; }
.v-dawn .vbg-top { background: linear-gradient(180deg, rgba(247, 186, 140, .5), rgba(247, 186, 140, 0)); }
.v-dusk .vbg-top { background: linear-gradient(180deg, rgba(240, 160, 120, .45), rgba(240, 160, 120, 0)); }
/* Τη νύχτα η σελίδα μένει φωτεινή: μόνο ένα ψυχρό πέπλο στην κορυφή. */
.v-night .vbg-top { background: linear-gradient(180deg, rgba(120, 150, 190, .38), rgba(120, 150, 190, 0)); }
.vbg-art {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 30vh; display: block; opacity: .13;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%);
  mask-image: linear-gradient(180deg, transparent, #000 70%);
}
/* Τα βουνά του φόντου κόβουν με σκληρές γωνίες πίσω από τα γράμματα: μένουν έξω. */
.vbg-art .v-mount, .vbg-art .v-mount-2 { display: none; }
.vbg .v-lane { top: 6%; }
.vbg .v-lane-3 { top: 15%; }
.vbg .v-lane-birds { top: 10%; }
.vbg.v-night { --v-far: #b9c7ad; --v-mid: #a3b795; --v-near: #8ca47e; --v-front: #7c9370; --v-win: #8a6a4a; }
.v-night .vbg-art { opacity: .16; }
/* Το περιεχόμενο πατάει πάντα πάνω από το τοπίο. */
.topbar, main, .footer, .tabbar { position: relative; z-index: 1; }

/* ---------- Κινήσεις ---------- */
@keyframes v-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes v-bell { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(9deg); } 86% { transform: rotate(-7deg); } 93% { transform: rotate(3deg); } }
@keyframes v-shine { 0%, 100% { opacity: .2; } 50% { opacity: .65; } }
@keyframes v-twinkle { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes v-peck { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(26deg); } 80% { transform: rotate(4deg); } 90% { transform: rotate(22deg); } }
@keyframes v-graze { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(3deg); } }
@keyframes v-wing { from { transform: scaleX(1); } to { transform: scaleX(.25); } }
@keyframes v-firefly { 0%, 100% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .9; } 50% { opacity: .5; transform: translate(14px, -10px); } 80% { opacity: .85; transform: translate(4px, -18px); } }
@keyframes v-fall { from { transform: translate3d(0, -20px, 0) rotate(0); } to { transform: translate3d(-40px, 340px, 0) rotate(300deg); } }

/* ---------- Κινητά και αδύναμες συσκευές ---------- */
@media (max-width: 719px) {
  .v-extra { display: none; }
  .v-fall .v-flake:nth-child(n+4) { display: none; }
  /* Στενή οθόνη: το τοπίο του φόντου μεγεθύνεται πολύ, οπότε χαμηλώνει κι άλλο. */
  .vbg-art { height: 20vh; opacity: .1; }
}
/* =========================================================================
   1.5 — «Αυτή την εβδομάδα», παραγγελία χωρίς λογαριασμό, «ξαναπάρε το ίδιο».
   ========================================================================= */
/* Αριστερά, όπως και το «Βιολογικό»: δεξιά κάθεται η καρδιά και το σήμα κοβόταν. */
.pcard-week {
  position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center;
  max-width: calc(100% - 52px); white-space: nowrap;
  background: var(--green-700); color: #fff; font-size: 11.5px; font-weight: 700;
  padding: 4px 9px; border-radius: 999px; box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .35);
}
.pcard-bio + .pcard-week { top: 40px; }
.myitem-actions .is-week { color: var(--green-700); }
/* Ο σύνδεσμος «ξαναπάρε το ίδιο» κάθεται κάτω από τη γραμμή της παραγγελίας, όχι μέσα της:
   ένας σύνδεσμος μέσα σε άλλον δεν επιτρέπεται και μπερδεύει το πληκτρολόγιο. */
.orow-again {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  margin: -6px 0 6px 58px; padding: 0 12px; font-weight: 650; font-size: 15px;
  color: var(--green-700); text-decoration: none; border-radius: 12px;
}
.orow-again:hover { background: var(--green-50); }

/* Το app.js βάζει το .v-lite σε αδύναμες συσκευές ή με «λίγα δεδομένα». */
.v-lite .v-extra, .v-lite .v-fall { display: none; }

/* ---------- Μικρές λεπτομέρειες στην υπόλοιπη σελίδα ----------
   Μόνο σε ποντίκι (hover: hover): στην αφή δεν υπάρχει «πέρασμα από πάνω» και
   οι κινήσεις θα κόλλαγαν το κύλισμα. Πάλι μόνο transform και box-shadow. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .rcard, .cat-tile { transition: transform .18s ease, box-shadow .18s ease; }
  .rcard:hover, .cat-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -22px rgba(40, 60, 40, .55); }
}
@media (prefers-reduced-motion: reduce) {
  .vbg .v-lane, .v-fall, .v-flake, .v-mill-sails, .v-wheel, .v-bell, .v-river-shine,
  .v-stars circle, .v-poppy, .v-peck, .v-sheep, .v-cloth, .v-wing-l, .v-wing-r, .v-fireflies circle,
  .vbg-produce span, .b-fruit, .b-bee { animation: none !important; }
  .b-bee { transform: translate(150px, 96px); }
}