/* =============================================================
   home.css — ΟΛΑ τα styles της Αρχικής σε ΕΝΑ αρχείο (EL & EN index).
   Ενώθηκαν (με την ίδια σειρά) τα: hero.css, philosophy.css, products.css, journey.css, harvest.css, certs.css, channels.css, testimonials.css, insta.css, home-extras.css
   ώστε η Αρχική να φορτώνει 5 αντί για 14 αρχεία CSS.
   Από εδώ και πέρα οι αλλαγές της Αρχικής γίνονται ΕΔΩ.
   ============================================================= */


/* ######################## hero.css ######################## */
/* =============================================================
   ATHANELEON — hero.css  (Αρχική · ενότητα 1: carousel μπουκαλιών)
   Προσαρμογή του demo στο ύφος μας:
   · Γραμματοσειρές: τίτλος → Ysabeau (display), κείμενα/κουμπιά → Commissioner
   · Το χρώμα έμφασης είναι «κλειδωμένο» στον Hero (--hero-accent),
     ΔΕΝ αλλάζει το global χρυσό του site.
   · Η κλάση .nav του demo μετονομάστηκε σε .hero-nav (σύγκρουση με το header).
   ============================================================= */

.hero {
  position: relative;
  width: 100%;
  height: 100svh;                 /* full viewport (σωστό και σε mobile) */
  overflow: hidden;
  background: var(--c-black);
  isolation: isolate;             /* δικό του stacking context (δεν μπλέκει με το header) */

  /* per-hero accent — default = brand gold (το JS το αλλάζει ανά προϊόν) */
  --hero-accent: var(--accent);
  --hero-glow: rgba(196, 162, 78, 0.30);
}

/* Λεπτός κόκκος (film grain) πάνω απ' όλα μέσα στον Hero */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 60;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.4;
}

/* Λάμψη πίσω από το ενεργό μπουκάλι */
/* Λάμψη πίσω από το ενεργό μπουκάλι (Desktop - Αρχικό Design) */
.aura {
  position: absolute;
  width: 600px; height: 600px; border-radius: 50%;
  left: 50%; top: 44%; transform: translate(-50%, -50%);
  filter: blur(120px); opacity: 0; background: var(--hero-accent);
  transition: background 1.1s ease; z-index: 0;
  animation: auraIn 1.8s ease 0.1s forwards;
}
@keyframes auraIn { to { opacity: 0.2; } }
/* Εντόπισε το container των κειμένων/κουμπιών του Hero (π.χ. .hero-content ή παρόμοιο) */
.hero-text-wrapper {
  /* Αν χρησιμοποιεί bottom, αύξησέ το ελαφρώς για να ανέβει, π.χ. bottom: 12vh; αντί για 8vh */
  bottom: 12vh; 
}

/* Διασφάλιση ότι η λεζάντα δεν κόβεται και έχει σωστό spacing */
.hero-description {
  max-width: 45ch; /* Δίνει επαρκές πλάτος για να μην σπάει σε πολλές γραμμές */
  white-space: normal; /* Επιτρέπει την αλλαγή γραμμής */
  overflow: visible;
  margin-bottom: var(--space-sm); /* Μάζεμα του κενού πριν τα κουμπιά */
}
/* Τεράστιος αχνός τίτλος-υδατογράφημα */
.big-title {
  position: absolute; top: 45%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(6rem, 11vw, 14rem); font-weight: 700;
  letter-spacing: 0.14em; white-space: nowrap; text-transform: uppercase;
  pointer-events: none; z-index: 1; opacity: 0;
  color: var(--text);
  animation: titleIn 1.6s ease 0.3s forwards;
}
@keyframes titleIn { to { opacity: 0.1; } }

/* Σκηνή που «κόβει» ό,τι βγαίνει εκτός */
.stage { position: absolute; inset: 0; overflow: hidden; z-index: 5; }

.bottle {
  position: absolute;
  bottom: 14vh;
  transform-origin: center bottom;
  /* Η εναλλαγή κινεί translate/scale (βλ. home.js) — όχι left/height */
  transition: translate .80s cubic-bezier(.4,0,.2,1),
              scale .80s cubic-bezier(.4,0,.2,1),
              filter .80s ease, opacity .80s ease;
  object-fit: contain;
  animation: floating 6s ease-in-out infinite;
  pointer-events: none; user-select: none;
}

.bottle{
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.bottle:nth-child(1) { animation-delay: 0s; }
.bottle:nth-child(2) { animation-delay: -2s; }
.bottle:nth-child(3) { animation-delay: -4s; }
@keyframes floating { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }

/* Σκίαση στις άκρες */
.vig-l, .vig-r { position: absolute; top: 0; bottom: 0; width: 12vw; z-index: 15; pointer-events: none; }
.vig-l { left: 0;  background: linear-gradient(to right, rgba(0,0,0,.92), transparent); }
.vig-r { right: 0; background: linear-gradient(to left,  rgba(0,0,0,.92), transparent); }

/* Αντανάκλαση κάτω από το μπουκάλι */
.reflection {
  position: absolute; left: 50%; bottom: 17%;
  width: 180px; height: 70px; transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.16), transparent 70%);
  filter: blur(18px); z-index: 6; pointer-events: none;
  opacity: 0; animation: fadeIn 1.2s ease 0.8s forwards;
}
@keyframes fadeIn { to { opacity: 1; } }

/* Tagline */
.hero .content {
  position: absolute; bottom: 92px; left: 0; right: 0;
  text-align: center; z-index: 20; pointer-events: none;
}
.tagline-wrap { overflow: hidden; height: 2.2em; display: flex; align-items: center; justify-content: center; }
.hero .content p {
  font-family: var(--font-body);
  color: var(--text-muted);
  font-size: 1.05rem; line-height: 1.7; letter-spacing: 0.04em;
  display: inline-block; opacity: 0; transform: translateY(20px);
  animation: fadeUp .9s cubic-bezier(.22,1,.36,1) .9s forwards;
}
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* ----- Επιλογέας προϊόντων (πρώην .nav → .hero-nav) ----- */
.hero-nav {
  position: absolute; left: 0; right: 0; bottom: 42px;
  display: flex; gap: 10px; z-index: 30;
  background: rgba(255,255,255,.04);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,.08); border-radius: 999px; padding: 5px;
  width: fit-content; margin: 0 auto; opacity: 0;
}
.hero-nav button {
  border: 1.5px solid transparent; color: rgba(255,255,255,.5); background: transparent;
  padding: 10px 24px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-body); font-size: .75rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  transition: color .4s, background .4s, border-color .4s, box-shadow .4s, transform .2s;
  position: relative; overflow: hidden;
}
.hero-nav button::before {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.1), transparent 70%);
  opacity: 0; transition: opacity .3s;
}
.hero-nav button:hover { color: rgba(255,255,255,.8); transform: translateY(-1px); }
.hero-nav button:hover::before { opacity: 1; }
.hero-nav button.active-btn {
  color: #000; background: var(--hero-accent); border-color: var(--hero-accent);
  box-shadow: 0 0 18px var(--hero-glow), 0 0 40px var(--hero-glow); transform: none;
}
.hero-nav button.active-btn::before { display: none; }
.hero-nav .hero-pause::before { display: none; }

/* ΦΑΣΗ 3: κουμπί παύσης/συνέχισης της αυτόματης εναλλαγής (WCAG 2.2.2) */
.hero-nav .hero-pause {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; margin: auto 2px auto 4px; padding: 0;
  border: 1px solid rgba(255,255,255,.14); border-radius: 50%; letter-spacing: 0;
  background: transparent; color: rgba(255,255,255,.7); cursor: pointer;
  transition: color .3s, border-color .3s, background .3s;
}
.hero-nav .hero-pause:hover { color: #fff; border-color: rgba(255,255,255,.35); }
.hero-nav .hero-pause:focus-visible { outline: 2px solid var(--hero-accent, var(--accent)); outline-offset: 2px; }
.hero-nav .hero-pause[aria-pressed="true"] { color: var(--hero-accent, var(--accent)); border-color: var(--hero-accent, var(--accent)); }
@media (max-width: 30em) { .hero-nav .hero-pause { width: 32px; height: 32px; } }

/* ΦΑΣΗ 3: εκτός οθόνης σταματούν τα άπειρα animations του hero (λιγότερο repaint/μπαταρία) */
.hero.is-offscreen .bottle,
.hero.is-offscreen .aura,
.hero.is-offscreen::after { animation-play-state: paused !important; }

/* Εναλλαγή tagline */
@keyframes tOut { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes tIn  { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } }
.tagline-exit  { animation: tOut .28s ease forwards; }
.tagline-enter { animation: tIn  .38s ease forwards; }

/* Entrance animations */
@keyframes bottleEntrance { 0% { opacity: 0; transform: translateY(80px) scale(.82); } 60% { opacity: 1; transform: translateY(-10px) scale(1.03); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sideEntrance   { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes textEntrance   { 0% { opacity: 0; transform: translateY(24px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes navEntrance    { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }

/* ΔΙΟΡΘΩΣΗ MOBILE (alignment): στο κινητό το ενεργό μπουκάλι ήταν χαμηλά
   (κέντρο ~64% ύψους) ενώ το όνομα-υδατογράφημα και το φωτεινό aura ήταν
   ψηλά (~44%). Αποτέλεσμα: το προσκήνιο ΔΕΝ "φωτιζόταν" (το glow έπεφτε
   πάνω από το μπουκάλι) και τα μπουκάλια έδειχναν ξεκρέμαστα-χαμηλά σε
   σχέση με το όνομα. Εδώ: ανεβάζουμε το μπουκάλι και φέρνουμε όνομα+aura
   ΠΙΣΩ του, ώστε να ευθυγραμμίζονται όπως στον υπολογιστή. */
@media (max-width: 47.999em) {
  .bottle { bottom: 32vh !important; }
  /* item 1: tagline + κουμπιά πιο πάνω, ώστε να μειωθεί το κενό με τα μπουκάλια */
  .hero .content { bottom: 22vh; }
  .hero-nav { bottom: 13vh; }
  .big-title { top: 50%; font-size: clamp(4rem, 16vw, 7rem); }
  
  /* Mobile Fix: Καταργούμε το blur και βάζουμε τη μάσκα */
  .aura { 
    top: 50%; 
    width: 800px; 
    height: 800px; 
    filter: none; /* Σημαντικό: απενεργοποιεί το προβληματικό blur στο iOS */
    -webkit-mask-image: radial-gradient(circle, black 15%, transparent 60%);
    mask-image: radial-gradient(circle, black 15%, transparent 60%);
  }
  
  @keyframes auraIn { to { opacity: 0.35; } }
}

/* ΣΗΜΕΙΩΣΗ: οι παρακάτω είναι ΚΑΘΟΛΙΚΟΙ κανόνες (ισχύουν σε όλες τις οθόνες).
   Ήταν κατά λάθος εκτός του mobile media query, με ένα περιττό κλείσιμο στο
   τέλος (περιττό brace). Αφαιρέθηκε. Τους κρατάμε καθολικούς
   ώστε να ΜΗΝ αλλάξει η τρέχουσα εμφάνιση του hero. */
.big-title { top: 50%; font-size: clamp(4rem, 16vw, 7rem); }
.aura { top: 50%; width: 380px; height: 380px; }
@keyframes auraIn { to { opacity: 0.35; } }

/* ΔΙΟΡΘΩΣΗ MOBILE: τα 3 κουμπιά (ELLYSION/YELLINI/ZERION) με το κανονικό
   padding ξεπερνούν το πλάτος της οθόνης σε μικρά κινητά. Πιο σφιχτό
   padding/font-size κάτω από 480px πλάτος. */
@media (max-width: 30em) {
  .hero-nav { gap: 4px; padding: 4px; max-width: calc(100% - 24px); }
  .hero-nav button { padding: 8px 12px; font-size: .64rem; letter-spacing: .08em; }
}

/* Σεβασμός reduced-motion: σταθερά, χωρίς κίνηση */
@media (prefers-reduced-motion: reduce) {
  .hero *,
  .hero::after { animation: none !important; transition: none !important; }
  .aura { opacity: 0.2; }
  .big-title { opacity: 0.1; }
  .hero .content p, .hero-nav { opacity: 1; }
}


/* ######################## philosophy.css ######################## */
@property --p { syntax: "<percentage>"; inherits: true; initial-value: 0%; }

/* philosophy.css — Αρχική · ενότητα 2: Φιλοσοφία brand */
.philosophy { position: relative; height: 220vh; background: var(--bg); }

.philosophy-inner {
  position: sticky; top: 0; min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  padding-inline: var(--gutter);
}

.philosophy-statement {
  max-width: 18ch; margin: 0 auto; text-align: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 1.2rem + 4vw, 5rem);
  line-height: 1.15; letter-spacing: -0.01em;
}

/* Κάθε λέξη: λευκό βάση → χρυσό γέμισμα από αριστερά (οδηγείται από --p) */
.philo-word {
  display: inline-block;
  background-image: linear-gradient(90deg,
    var(--accent) 0%, var(--accent) var(--p, 0%),
    #ffffff var(--p, 0%), #ffffff 100%);
  -webkit-background-clip: text; 
  background-clip: text;
  -webkit-text-fill-color: transparent; 
  color: transparent;
  
  /* ΔΙΟΡΘΩΣΗ: Αλλάζουμε το opacity από 0 σε 1 για να φαίνεται λευκό εξαρχής */
  opacity: 1; 
  
  transform: translateY(0); /* Αν το εφέ scroll trigger αναλαμβάνει το transform, το αφήνεις, αλλιώς μηδένισέ το */
  transition: transform .4s var(--ease);
}

/* Entrance: εμφάνιση λέξη-λέξη όταν μπει το section */
.philosophy-inner.is-in .philo-word {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}

@media (prefers-reduced-motion: reduce) {
  .philo-word { opacity: 1; transform: none; transition: none; }
}


/* ######################## products.css ######################## */
/* products.css — Αρχική · ενότητα 3: Η σειρά (belt) */
.products { position: relative; background: var(--bg); }
/* ΔΙΟΡΘΩΣΗ MOBILE: το min-height:100vh έπρεπε να ισχύει ΜΟΝΟ στο desktop/
   enhanced mode (όπου το section είναι sticky/pinned). Σε mobile δημιουργούσε
   ένα τεράστιο κενό section, αφού το belt είναι απλό horizontal-scroll strip
   με φυσικό (μικρό) ύψος — οι κάρτες "χάνονταν" μέσα σε ολόκληρη την οθόνη. */
.products-pin { display: flex; flex-direction: column; }
@media (min-width: 64em) { .products-pin { min-height: 100vh; } }

/* ---- belt ---- */
.belt {
  flex: 1; min-height: 0;
  display: flex; align-items: center; gap: var(--space-md);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: var(--space-xl) var(--gutter); -webkit-overflow-scrolling: touch;
}
.belt-item { flex: 0 0 auto; scroll-snap-align: center; }

.belt-title { flex: 0 0 100%; display: grid; place-items: center; text-align: center; }
.belt-title .eyebrow { justify-content: center; margin-bottom: var(--space-sm); }
.belt-statement {
  max-width: 16ch; margin: 0 auto; color: var(--text);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.8rem, 1.2rem + 3vw, 4rem); line-height: 1.12; letter-spacing: -0.01em;
}
.belt-statement .pw { display: inline-block; opacity: 0; transform: translateY(0.5em); }
.belt-title.is-in .pw {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}

/* ---- κάρτα ---- */
.product-card {
  flex: 0 0 min(86%, 360px);
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-lg); text-align: center;
}
.product-card img { height: clamp(160px, 22vh, 230px); width: auto; margin: 0 auto var(--space-sm); object-fit: contain; }
.product-name { font-size: var(--fs-600); }
.product-cap { display: inline-block; margin-top: 6px; padding: .3em .9em; font-size: var(--fs-200); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent); border: 1px solid var(--line); border-radius: 999px; }
.product-specs { display: flex; justify-content: center; gap: var(--space-md); margin-top: var(--space-sm); font-size: var(--fs-200); color: var(--text-muted); }
.product-desc { margin-top: var(--space-sm); margin-inline: auto; color: var(--text-muted); font-size: var(--fs-300); }
.product-card .btn { margin-top: var(--space-md); }

/* ---- dots + CTA (πάντα μπροστά) ---- */
.products-progress { display: none; gap: 10px; justify-content: center; padding-block: var(--space-sm); position: relative; z-index: 50; }
.products-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); border: none; cursor: pointer; transition: transform .3s var(--ease), background .3s var(--ease); }
.products-dot.is-active { background: var(--accent); transform: scale(1.35); }
.products-cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; padding: var(--space-md) var(--gutter) var(--space-lg); position: relative; z-index: 50; }

/* ---- ENHANCED (JS): coverflow belt με scroll-jack — ΠΑΝΤΑ ενεργό πλέον
   (πριν περιοριζόταν σε desktop ≥64em· σε mobile δούλευε μόνο με swipe). ---- */
.products.is-enhanced { height: 200vh; }
.products.is-enhanced .products-pin { position: sticky; top: 0; height: 100vh; }
.products.is-enhanced .belt { display: block; position: relative; overflow: visible; padding: 0; }
.products.is-enhanced .belt-item {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: transform .8s var(--ease), opacity .8s var(--ease), filter .8s var(--ease);
  will-change: transform, opacity;
}
.products.is-enhanced .belt-title { width: min(640px, 90%); }
.products.is-enhanced .product-card { width: min(400px, 86%); padding: var(--space-md); }
.products.is-enhanced .product-card img { height: clamp(150px, 19vh, 200px); }
.products.is-enhanced .products-progress { display: flex; }

@media (prefers-reduced-motion: reduce) { .belt-statement .pw { opacity: 1; transform: none; } }


/* override: sticky pin + header clearance */
.products.is-enhanced .products-pin {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  padding-top: 96px;            /* χώρος για το fixed header */
  box-sizing: border-box;
}

/* review #2: αφαίρεση κουκκίδων ένδειξης ενεργής κάρτας */
.products-progress { display: none !important; }

/* review: compact card — μικρότερα margins, μικρότερη εικόνα, μικρότερο κείμενο */
.product-card img { height: clamp(120px, 16vh, 180px); margin-bottom: var(--space-xs); }
.product-desc { font-size: var(--fs-200); margin-top: var(--space-xs); max-width: 30ch; }
.product-specs { margin-top: var(--space-xs); gap: var(--space-sm); }
.product-card .btn { margin-top: var(--space-sm); }
.products.is-enhanced .product-card img { height: clamp(110px, 15vh, 165px); }

/* ΔΙΟΡΘΩΣΗ MOBILE: σε πολύ μικρά πλάτη η κάρτα στενεύει κι άλλο ώστε να
   μη "κολλάει" στις άκρες της οθόνης κατά το coverflow animation. */
@media (max-width: 39.999em) {
  .products.is-enhanced .product-card { width: min(78vw, 320px); padding: var(--space-sm) var(--space-md); }
  .products.is-enhanced .belt-title { width: min(86vw, 500px); }
}

/* ΔΙΟΡΘΩΣΗ MOBILE: τα 2 κουμπιά («Όλα τα προϊόντα» / «Κατάστημα») έσπαγαν σε
   δύο σειρές (flex-wrap:wrap). Σε mobile τα κρατάμε ΣΤΗΝ ΙΔΙΑ ΕΥΘΕΙΑ,
   ισομοιρασμένα, με μικρότερο padding/γραμματοσειρά ώστε να χωρούν. */
@media (max-width: 47.999em) {
  .products-cta { flex-wrap: nowrap; align-items: stretch; gap: var(--space-2xs); }
  .products-cta .btn { flex: 1 1 0; padding-inline: var(--space-sm); font-size: var(--fs-200); white-space: nowrap; }
}
/* ΔΙΟΡΘΩΣΗ (φάση 1): στο κινητό το 100vh είναι ψηλότερο από την ορατή περιοχή
   (μπάρα browser) → τα κουμπιά CTA κρύβονταν. svh = πραγματικά ορατό ύψος.
   + χώρος κάτω από τα κουμπιά ώστε να μην τα καλύπτει το «↑» (scroll-top). */
.products.is-enhanced .products-pin { height: 100vh; height: 100svh; }
@media (max-width: 47.999em) {
  .products-cta { padding-bottom: calc(var(--space-lg) + 60px); }
}


/* ######################## journey.css ######################## */
/* journey.css — Αρχική · ενότητα 4: Από τον ελαιώνα στο μπουκάλι */
.journey { background: var(--bg-alt); text-align: center; overflow: hidden; }
.journey-head { max-width: 60ch; margin: 0 auto var(--space-xl); }
.journey-title { margin-top: var(--space-2xs); }
.journey-intro { margin: var(--space-sm) auto 0; color: var(--text-muted); }

.journey-steps {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-xl); grid-template-columns: 1fr;
}
@media (min-width: 48em) { .journey-steps { grid-template-columns: repeat(3, 1fr); } }

/* Η γραμμή που συνδέει τους κόμβους (desktop) — «τραβιέται» στην είσοδο */
@media (min-width: 48em) {
  .journey-steps::before {
    content: ""; position: absolute; z-index: 0;
    top: 42px; left: 16.6%; right: 16.6%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    transform: scaleX(0); transform-origin: left;
    transition: transform 1s var(--ease) .2s;
  }
  .journey.is-in .journey-steps::before { transform: scaleX(1); }
}

.journey-step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 160ms);
}
.journey.is-in .journey-step { opacity: 1; transform: none; }

.journey-node {
  position: relative; width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--line);
  color: var(--accent); margin-bottom: var(--space-sm);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  transition-delay: calc(var(--i, 0) * 160ms + 120ms);
  transform: scale(.6);
}
.journey.is-in .journey-node { transform: scale(1); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 10%, transparent); }
.journey-icon { width: 30px; height: 30px; }
.journey-num {
  position: absolute; top: -8px; right: -6px;
  font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--fs-200);
  color: var(--c-black); background: var(--accent);
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
}
.journey-step-title { font-size: var(--fs-600); }
.journey-step-text { margin-top: var(--space-2xs); max-width: 30ch; color: var(--text-muted); font-size: var(--fs-300); }

.journey-cta { margin-top: var(--space-xl); }

@media (prefers-reduced-motion: reduce) {
  .journey-step, .journey-node { opacity: 1; transform: none; transition: none; }
  .journey-steps::before { transform: scaleX(1); transition: none; }
}


/* ######################## harvest.css ######################## */
/* harvest.css — Αρχική · ενότητα 5: Σήμανση συγκομιδής */
.harvest { background: var(--bg); text-align: center; }
.harvest-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); }

.harvest-lead { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
.harvest-year {
  display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0;
  font-family: var(--font-display); line-height: 1;
}
.harvest-label {
  font-family: var(--font-body); font-weight: var(--weight-medium);
  font-size: var(--fs-300); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-muted);
}
.harvest-num {
  font-weight: var(--weight-display); color: var(--accent);
  font-size: clamp(3.5rem, 2rem + 8vw, 8rem); letter-spacing: -0.02em;
}
.harvest-badge {
  margin-top: var(--space-2xs); padding: .5em 1.1em;
  font-family: var(--font-body); font-weight: var(--weight-medium);
  font-size: var(--fs-200); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text); border: 1px solid var(--line); border-radius: 999px;
}

.harvest-stats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm);
  width: 100%; max-width: 760px;
  border-top: 1px solid var(--line); padding-top: var(--space-lg);
}
@media (min-width: 40em) { .harvest-stats { gap: var(--space-lg); } }

.stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
/* ΔΙΟΡΘΩΣΗ MOBILE: ήταν clamp(2rem, ...) — σε 3 στήλες πάνω σε μικρό πλάτος
   (π.χ. 390px οθόνη) τα νούμερα ήταν πολύ μεγάλα και έσπαγαν/overflow-αραν.
   Μικρότερο ελάχιστο μέγεθος, ίδιο ανώτατο σε μεγαλύτερες οθόνες. */
.stat-num { font-family: var(--font-display); font-weight: var(--weight-display); font-size: clamp(1.3rem, 1rem + 2.4vw, 3.2rem); line-height: 1; color: var(--text); }
.stat-unit { font-size: clamp(.65rem, .6rem + .3vw, var(--fs-200)); letter-spacing: var(--tracking-wide); color: var(--accent); text-transform: uppercase; }
.stat-label { font-size: clamp(.7rem, .65rem + .3vw, var(--fs-300)); color: var(--text-muted); text-align: center; }

/* Entrance */
.harvest-lead, .harvest-stats { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.harvest-stats { transition-delay: .15s; }
.harvest.is-in .harvest-lead, .harvest.is-in .harvest-stats { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .harvest-lead, .harvest-stats { opacity: 1; transform: none; transition: none; }
}


/* ######################## certs.css ######################## */
/* certs.css — Αρχική · ενότητα 6: Ποιότητα & πιστοποιήσεις */
.certs { background: var(--bg-alt); text-align: center; }
.certs-head { max-width: 60ch; margin: 0 auto var(--space-xl); }
.certs-title { margin-top: var(--space-2xs); }
.certs-intro { margin: var(--space-sm) auto 0; color: var(--text-muted); }

.certs-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-md); grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 64em) { .certs-grid { grid-template-columns: repeat(4, 1fr); } }

.cert-card {
  display: flex; flex-direction: column; align-items: center;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-lg) var(--space-md);
  transition: transform .4s var(--ease), border-color .4s var(--ease);
  /* entrance */
  opacity: 0; transform: translateY(26px);
}
.certs.is-in .cert-card {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 130ms);
}
.cert-card:hover { transform: translateY(-4px); border-color: var(--accent); }

.cert-badge {
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: var(--space-sm);
  color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid var(--line);
}
.cert-badge svg { width: 34px; height: 34px; }
.cert-badge img { width: 44px; height: 44px; object-fit: contain; }  /* για πραγματικά λογότυπα */
.cert-name { font-size: var(--fs-500); }
.cert-text { margin-top: var(--space-2xs); color: var(--text-muted); font-size: var(--fs-300); max-width: 28ch; }

@media (prefers-reduced-motion: reduce) {
  .cert-card { opacity: 1; transform: none; transition: none; }
}


/* overrides */
.cert-name { font-size: var(--fs-500); white-space: nowrap; }

.cert-text {
  margin-top: var(--space-2xs);
  margin-inline: auto;
  color: var(--text-muted);
  font-size: var(--fs-300);
  max-width: 34ch;          /* λίγο πιο φαρδύ από πριν → λιγότερες γραμμές, χωρίς justify */
  text-align: center;
  text-wrap: pretty;        /* αποφεύγει άσχημα σπασίματα/ορφανές λέξεις */
}

/* review: κάρτες πιο φαρδιές, κείμενο πιο compact, μικρότερο ύψος */
.certs-grid { max-width: 1200px; margin-inline: auto; }
.cert-card { padding: var(--space-md) var(--space-sm); }
.cert-badge { width: 56px; height: 56px; margin-bottom: var(--space-xs); }
.cert-badge svg { width: 26px; height: 26px; }
.cert-name { font-size: var(--fs-400); white-space: normal; }
.cert-text { font-size: var(--fs-200); max-width: 100%; text-align: center; line-height: 1.45; margin-top: var(--space-2xs); }

/* ΔΙΟΡΘΩΣΗ MOBILE: σε mobile οι κάρτες δείχνουν ΜΟΝΟ εικονίδιο + τίτλο,
   χωρίς το επεξηγηματικό κείμενο (πιο καθαρό 2×2 grid, λιγότερο scroll). */
@media (max-width: 39.999em) {
  .cert-text { display: none; }
  .cert-card { padding: var(--space-sm) var(--space-2xs); }
  .cert-name { font-size: var(--fs-300); }
}


/* ######################## channels.css ######################## */
/* channels.css — Αρχική · «Πώς συνεργαζόμαστε» (review #4: ελαφρύ 3-card design) */
.channels { background: var(--bg); padding-block: var(--space-2xl); }
.channels-head { text-align: center; margin-bottom: var(--space-xl); }
.channels-head h2 { margin-top: var(--space-2xs); font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-700); }

.channels-cards {
  display: grid; grid-template-columns: 1fr; gap: var(--space-md);
}
@media (min-width: 48em) { .channels-cards { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } }

/* ΔΙΟΡΘΩΣΗ MOBILE: carousel με swipe (left/right) αντί για 3 κάρτες
   στοιβαγμένες κάθετα. Ίδιο scroll-snap pattern με το products.css,
   για συνέπεια στο πώς "καρουζελάρει" το site σε mobile. */
@media (max-width: 47.999em) {
  .channels-cards {
    grid-template-columns: none;
    display: flex; gap: var(--space-sm);
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-xs); /* χώρος για τυχόν scrollbar */
  }
  .ch-card {
    flex: 0 0 min(74%, 280px); scroll-snap-align: center;
    padding: var(--space-md) var(--space-md) var(--space-sm);
  }
  .ch-ic { width: 42px; height: 42px; margin-bottom: var(--space-sm); }
  .ch-ic svg { width: 20px; height: 20px; }
  .ch-name { font-size: var(--fs-500); }
  .ch-desc { font-size: var(--fs-200); margin-top: 4px; }
  .ch-cta { margin-top: var(--space-sm); }
}

.ch-card {
  position: relative; display: flex; flex-direction: column;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ch-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease);
}
.ch-card:hover { transform: translateY(-6px); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--bg-alt)); }
.ch-card:hover::before { transform: scaleX(1); }

.ch-num {
  position: absolute; top: var(--space-md); right: var(--space-lg);
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--fs-500); color: var(--line); line-height: 1;
}
.ch-ic {
  width: 52px; height: 52px; display: grid; place-items: center;
  color: var(--accent); border: 1px solid var(--line); border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  margin-bottom: var(--space-md);
}
.ch-ic svg { width: 26px; height: 26px; }
.ch-name { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-600); line-height: 1.1; }
.ch-desc { color: var(--text-muted); font-size: var(--fs-300); margin-top: var(--space-xs); flex: 1; }
.ch-cta {
  margin-top: var(--space-lg); color: var(--accent);
  font-weight: var(--weight-medium); font-size: var(--fs-300);
  letter-spacing: 0.02em; transition: color var(--dur-fast) var(--ease);
}
.ch-card:hover .ch-cta { color: var(--accent-bright); }

@media (prefers-reduced-motion: reduce) {
  .ch-card, .ch-card::before { transition: none; }
  .ch-card:hover { transform: none; }
}


/* ######################## testimonials.css ######################## */
/* testimonials.css — Αρχική · ενότητα 9: Μαρτυρίες (διπλό marquee) */
.testimonials { background: var(--bg); padding-block: var(--space-2xl); overflow: hidden; }

.t-heading { text-align: center; margin-bottom: var(--space-xl); }
.t-heading .eyebrow { justify-content: center; }
.t-title { margin-top: var(--space-2xs); }
.t-intro { margin: var(--space-sm) auto 0; color: var(--text-muted); max-width: 60ch; }

.marquee {
  display: flex; margin-block: var(--space-sm); overflow: hidden;
  /* fade στις άκρες */
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.t-track { display: flex; gap: var(--space-md); width: max-content; }
.t-track[data-row="0"] { animation: tScrollLeft 110s linear infinite; }
.t-track[data-row="1"] { animation: tScrollRight 110s linear infinite; }

@keyframes tScrollLeft  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes tScrollRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.t-card {
  width: clamp(280px, 80vw, 360px); flex: none;
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-sm);
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.t-card:hover { transform: translateY(-6px); border-color: var(--accent); }

.t-stars { color: var(--accent); letter-spacing: 2px; font-size: 1.05rem; }
.t-quote {
  color: var(--text); line-height: 1.7; font-size: var(--fs-300); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.t-meta { margin-top: 0; }
.t-author { display: block; font-weight: var(--weight-medium); color: var(--text); }
.t-role { display: block; margin-top: 2px; color: var(--text-muted); font-size: var(--fs-200); }

@media (prefers-reduced-motion: reduce) {
  .testimonials .marquee { overflow-x: auto; -webkit-mask: none; mask: none; }
  .t-track { animation: none !important; }
}


/* overrides */
.marquee {
  display: flex; margin-block: var(--space-sm);
  overflow-x: hidden;          /* κόβει μόνο οριζόντια */
  overflow-y: visible;         /* αφήνει το ανασήκωμα να φανεί */
  padding-block: 10px;         /* χώρος για το translateY(-6px) στο hover */
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.t-track[data-row="0"] { animation: tScrollLeft 110s linear infinite; }
.t-track[data-row="1"] { animation: tScrollRight 110s linear infinite; }

.t-meta { margin-top: 0; }


/* ######################## insta.css ######################## */
/* insta.css — Αρχική · ενότητα 10: Ροή Instagram (κυλιόμενη λωρίδα) */
.insta { background: var(--bg-alt); padding-block: var(--space-2xl); overflow: hidden; }

.insta-head { text-align: center; margin-bottom: var(--space-xl); }
.insta-head .eyebrow { justify-content: center; }
.insta-title { margin-top: var(--space-2xs); }
.insta-head .link-arrow { margin-top: var(--space-sm); }

.insta-marquee {
  display: flex;
  overflow-x: hidden; overflow-y: visible;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.insta-track {
  display: flex; gap: var(--space-sm); width: max-content;
  animation: instaScroll 80s linear infinite;
}
/* Παύση κύλισης σε hover/focus (WCAG 2.2.2) και όταν είναι εκτός οθόνης */
.insta-marquee:hover .insta-track,
.insta-marquee:focus-within .insta-track,
.insta-marquee.is-offscreen .insta-track,
.marquee:hover .t-track,
.marquee:focus-within .t-track,
.marquee.is-offscreen .t-track { animation-play-state: paused; }
@keyframes instaScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.insta-item {
  position: relative; flex: none;
  width: clamp(180px, 22vw, 280px); aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line);
  display: block;
  transition: transform .4s var(--ease);
}
.insta-item:hover { transform: scale(1.03); }
.insta-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* overlay με εικονίδιο IG στο hover */
.insta-item::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(16,14,10,.0); transition: background .4s var(--ease);
}
.insta-item:hover::after { background: rgba(16,14,10,.35); }

/* placeholder πλακίδιο */
.insta-ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--fs-700); color: var(--accent);
  background: radial-gradient(circle at 30% 25%, #241f14, #100d08);
}

@media (prefers-reduced-motion: reduce) {
  .insta-marquee { overflow-x: auto; -webkit-mask: none; mask: none; }
  .insta-track { animation: none !important; }
}

/* ============================================================
   review #5: στατικό grid 4 φωτό (χωρίς κίνηση)
   ============================================================ */
.insta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 48em) { .insta-grid { grid-template-columns: repeat(4, 1fr); } }
.insta-grid .insta-item { width: 100%; aspect-ratio: 1 / 1; }


/* ######################## home-extras.css ######################## */
/* =============================================================
   ATHANELEON — home-extras.css  (Αρχική · νέα sections)
   prefix .hx-  ·  design tokens του global.css
   ============================================================= */

/* ---------------- ΒΡΕΣ ΤΟ ΛΑΔΙ ΣΟΥ (quiz · 2 στήλες σε όλο το πλάτος) ---------------- */
.hx-finder { background: var(--bg-alt); }
.hx-finder-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 56em) { .hx-finder-grid { grid-template-columns: 1fr 1fr; min-height: 72vh; } }

.hx-finder-left { display: flex; flex-direction: column; justify-content: center; padding: clamp(var(--space-xl), 4vw, var(--space-2xl)); }
.hx-finder-head { max-width: 46ch; margin-bottom: var(--space-xl); }
.hx-finder-head h2 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-700); margin-top: var(--space-2xs); }
.hx-finder-sub { color: var(--text-muted); margin-top: var(--space-sm); }
.hx-quiz { display: grid; gap: var(--space-lg); max-width: 52ch; }
.hx-q-text { font-size: var(--fs-400); color: var(--text); margin-bottom: var(--space-sm); }
.hx-q-text span { color: var(--accent); font-family: var(--font-display); font-weight: var(--weight-display); margin-right: .3em; }
.hx-opts { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.hx-opt { flex: 1 1 150px; border: 1.5px solid var(--line); background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-300); padding: .85em 1.1em; border-radius: var(--radius); cursor: pointer; transition: all var(--dur-fast) var(--ease); }
.hx-opt:hover { border-color: var(--accent); }
.hx-opt.is-active { background: var(--accent); border-color: var(--accent); color: var(--c-black); font-weight: var(--weight-medium); }

/* ΝΕΟ: 3-step flow σε mobile — ερώτηση 1 → ερώτηση 2 → αποτέλεσμα, μέσα στο
   ίδιο section, με κουμπί "Πίσω". Η κλάση .hx-stepped μπαίνει από το JS
   (στο .hx-finder-grid) μόνο κάτω από 56em. Δείχνουμε ΜΟΝΟ το ενεργό βήμα. */
.hx-finder-grid.hx-stepped [data-finder-step] { display: none; }
.hx-finder-grid.hx-stepped [data-finder-step].hx-step-active { display: block; animation: hxFade .35s var(--ease); }
/* Σε stepped mode, το hx-finder-right (στο οποίο ζει το step 2) πρέπει να
   ξεχάσει το grid place-items όταν είναι κρυμμένο/εμφανίζεται ως block. */
.hx-finder-grid.hx-stepped .hx-finder-right[data-finder-step].hx-step-active { display: grid; }

.hx-back {
  display: inline-flex; align-items: center; gap: .4em;
  margin-bottom: var(--space-md); padding: .4em .9em .4em .6em;
  border: 1px solid var(--line); border-radius: 999px; background: none;
  color: var(--text-muted); font-family: var(--font-body); font-size: var(--fs-300);
  cursor: pointer; transition: all var(--dur-fast) var(--ease);
}
.hx-back svg { width: 16px; height: 16px; }
.hx-back:hover { color: var(--accent-bright); border-color: var(--accent); }
/* ΔΙΟΡΘΩΣΗ: το attribute [hidden] ακυρωνόταν από το display:inline-flex (η class
   υπερισχύει σε specificity) — το κουμπί φαινόταν ΠΑΝΤΑ, ακόμη κι όταν το JS
   έβαζε hidden. Επαναφέρουμε το [hidden] και το κρύβουμε εντελώς σε desktop,
   όπου το 3-step flow δεν υπάρχει (όλα φαίνονται μαζί), άρα δεν έχει νόημα. */
.hx-back[hidden] { display: none; }
@media (min-width: 56em) { .hx-back { display: none !important; } }
/* Το κουμπί «Πίσω» ζει πλέον ως τελευταίο παιδί του .hx-finder-grid (κάτω-κάτω,
   μετά το αποτέλεσμα). Σε mobile: κεντραρισμένο, με κενό γύρω του. */
@media (max-width: 55.999em) {
  .hx-finder-grid > .hx-back { justify-self: center; margin: var(--space-md) auto var(--space-xl); }
}

/* δεξί μισό: το αποτέλεσμα */
.hx-finder-right { position: relative; display: grid; place-items: center; padding: clamp(var(--space-xl), 4vw, var(--space-2xl)); background: radial-gradient(120% 80% at 70% 25%, rgba(196,162,78,.10), transparent 60%), var(--bg); border-left: 1px solid var(--line); }
@media (max-width: 55.999em) { .hx-finder-right { border-left: 0; border-top: 1px solid var(--line); min-height: 46vh; } }
.hx-finder-hint { text-align: center; max-width: 36ch; color: var(--text-muted); }
.hx-hint-text { margin-top: var(--space-sm); line-height: 1.6; }
.hx-result { text-align: center; max-width: 42ch; animation: hxFade .4s var(--ease); }
.hx-result-eyebrow { font-size: var(--fs-200); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent); }
.hx-result h3 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-700); margin: var(--space-2xs) 0 var(--space-xs); }
.hx-result p { color: var(--text-muted); margin-bottom: var(--space-lg); }
.hx-result-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }
@keyframes hxFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------------- ΔΩΡΟΣΥΣΚΕΥΑΣΙΕΣ (teaser) ---------------- */
.hx-gift { background: var(--bg); padding-block: var(--space-2xl); border-top: 1px solid var(--line); }
.hx-gift-inner { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; }
/* ΔΙΟΡΘΩΣΗ desktop: το gap:2xl ίσχυε και ως ΟΡΙΖΟΝΤΙΟ (στήλες) και ως ΚΑΘΕΤΟ
   (head→text), δημιουργώντας μεγάλο κενό ανάμεσα στον τίτλο, το κείμενο και τα
   κουμπιά. Κρατάμε μεγάλο column-gap, μικρό row-gap, και align-items:start ώστε
   να μη «σκορπίζονται» κάθετα από το align-items:center. */
@media (min-width: 56em) { .hx-gift-inner { grid-template-columns: 1fr 1fr; column-gap: var(--space-2xl); row-gap: var(--space-md); align-items: start; } }
.hx-gift-media { display: flex; justify-content: center; }
.hx-gift-ph { width: 100%; max-width: 460px; aspect-ratio: 4 / 3; display: grid; place-items: center; text-align: center; color: var(--text-muted); font-size: var(--fs-200); background: radial-gradient(120% 80% at 50% 20%, rgba(196,162,78,.12), transparent 60%), var(--c-black); border: 1px dashed var(--line); border-radius: var(--radius-lg); padding: var(--space-md); }
.hx-gift-head h2,
.hx-gift-text h2 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-700); margin-top: var(--space-2xs); }
.hx-gift-text p { color: var(--text-muted); margin-top: var(--space-sm); max-width: 50ch; }
.hx-gift-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }

/* ΔΙΟΡΘΩΣΗ MOBILE: σειρά markup είναι ΗΔΗ head → media → text (το χωρίσαμε
   σε 3 siblings), άρα σε 1-στήλο grid βγαίνει φυσικά: ΤΙΤΛΟΣ → ΕΙΚΟΝΑ →
   ΚΕΙΜΕΝΟ → ΚΟΥΜΠΙΑ. Στο desktop, ο τίτλος "ανεβαίνει" οπτικά στη στήλη
   κειμένου με grid-column, ώστε να μη χαλάσει το αρχικό 2-στηλο layout. */
@media (min-width: 56em) {
  .hx-gift-inner { grid-template-columns: 1fr 1fr; }
  .hx-gift-head { grid-column: 2; grid-row: 1; }
  .hx-gift-media { grid-column: 1; grid-row: 1 / 3; }
  .hx-gift-text { grid-column: 2; grid-row: 2; }
  /* μικρότερο κενό κειμένου→κουμπιών (desktop) */
  .hx-gift-text p { margin-top: var(--space-xs); }
  .hx-gift-actions { margin-top: var(--space-md); }
}
@media (max-width: 55.999em) {
  .hx-gift-head { text-align: center; margin-bottom: var(--space-md); }
  /* ΔΙΟΡΘΩΣΗ: τα 2 κουμπιά είχαν διαφορετικό ύψος επειδή το μεγαλύτερο
     κείμενο ("Δείτε τις δωροσυσκευασίες") έσπαγε σε 2 γραμμές μέσα στο
     στενότερο flex-item, ενώ το "Εταιρικά δώρα" έμενε σε 1 γραμμή.
     align-items:stretch + μικρότερο/nowrap κείμενο εξισώνει το ύψος. */
  .hx-gift-actions { flex-wrap: nowrap; gap: var(--space-2xs); align-items: stretch; }
  .hx-gift-actions .btn {
    flex: 1 1 0; text-align: center; padding-inline: var(--space-xs);
    font-size: var(--fs-200); white-space: normal; line-height: 1.25;
  }
}

@media (prefers-reduced-motion: reduce) { .hx-result { animation: none !important; } }

/* gift buttons πάντα σε μία γραμμή, ισομοιρασμένα. align-items:stretch ώστε,
   όταν το «Δείτε τις δωροσυσκευασίες» σπάει σε 2 γραμμές (mobile), το «Εταιρικά
   δώρα» να εξισώνεται στο ίδιο ύψος. (.btn είναι ήδη inline-flex, άρα το κείμενο
   παραμένει κατακόρυφα κεντραρισμένο.) */
.hx-gift .hx-gift-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch; gap: var(--space-sm); }
.hx-gift .hx-gift-actions .btn { flex: 0 0 auto; width: auto; }
@media (max-width: 55.999em) { .hx-gift .hx-gift-actions .btn { flex: 1 1 0; } }

/* ============================================================
   «Η σειρά» — HINT ότι το section προχωρά με scroll (δημιουργείται από το home.js,
   μόνο όταν είναι ενεργό το coverflow). Κρύβεται στο τελευταίο καρέ.
   ============================================================ */
.products-hint {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding-top: var(--space-xs);
  font-size: var(--fs-200); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-muted); text-align: center; pointer-events: none;
  position: relative; z-index: 50;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.products-hint.is-hidden { opacity: 0; transform: translateY(6px); }
.products-hint-text { transition: opacity .4s var(--ease); }
.products-hint.is-compact .products-hint-text { opacity: 0; }
.products-hint-icon {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--accent);
  animation: productsHintBob 1.6s ease-in-out infinite;
}
.products-hint.is-hidden .products-hint-icon { animation: none; }
@keyframes productsHintBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (max-width: 47.999em) {
  .products-hint { font-size: 0.72rem; }
  .products-hint-icon { width: 26px; height: 26px; }
}

/* «Η σειρά»: η κίνηση των καρτών είναι πλέον ΣΥΝΕΧΗΣ από το JS (ακολουθεί το scroll
   με εξομάλυνση) — οι CSS transitions θα πρόσθεταν καθυστέρηση/«λάστιχο», οπότε βγαίνουν.
   Αφαιρείται και το blur (βαρύ φίλτρο ανά frame στο κινητό). */
.products.is-enhanced .belt-item { transition: none; filter: none; will-change: transform, opacity; }



/* ============================================================
   ΦΑΣΗ 5 — ΑΡΧΙΚΗ: τιμή & αγορά στη «Η σειρά», φιάλες στο «Ποιο σου ταιριάζει»
   ============================================================ */
.product-price { margin-top: var(--space-sm); color: var(--text-muted); font-size: var(--fs-200); }
.product-price[hidden] { display: none; }
.product-price strong { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-600); color: var(--text); margin-left: .2em; }
.product-actions { display: flex; align-items: center; justify-content: center; gap: var(--space-md); margin-top: var(--space-sm); }
.product-actions .btn { margin-top: 0 !important; min-width: 9rem; justify-content: center; }
.product-more { font-size: var(--fs-200); color: var(--text-muted); text-decoration: none; }
.product-more:hover { color: var(--accent-bright); }

.hx-hint-bottles { display: flex; align-items: flex-end; justify-content: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.hx-hint-bottles img { width: auto; height: 120px; opacity: .55; filter: grayscale(.3) drop-shadow(0 12px 20px rgba(0,0,0,.5)); }
.hx-hint-bottles img:nth-child(2) { height: 150px; opacity: .8; }
.hx-result-img { display: block; width: auto; height: 170px; margin: 0 auto var(--space-sm); filter: drop-shadow(0 18px 28px rgba(0,0,0,.55)); }

/* ============================================================
   «Η σειρά» στο κινητό — ΛΙΓΟΤΕΡΟ ΣΤΡΙΜΩΓΜΑ (30/09/2026)
   1) Το «καρφιτσωμένο» ύψος ήταν 100svh (= ύψος ΜΕ τις μπάρες του Safari).
      Όταν οι μπάρες μαζεύονται στο scroll, η ορατή περιοχή μεγαλώνει ~100px
      αλλά όλα έμεναν στριμωγμένα πάνω, με κενό από κάτω. 100dvh = το ύψος
      που φαίνεται ΤΩΡΑ, οπότε βελάκι + κουμπιά κατεβαίνουν στο κάτω μέρος.
   2) Τα κουμπιά κατεβαίνουν κι άλλο (κενό από κάτω 95px → 76px: μένουν
      πάντα πάνω από το «↑»).
   3) Σε κοντές οθόνες η εικόνα της κάρτας μικραίνει λίγο, ώστε η κάρτα
      να μην πατάει πάνω στο βελάκι.
   ============================================================ */
@media (max-width: 47.999em) {
  .products.is-enhanced .products-pin { height: 100svh; height: 100dvh; padding-top: 80px; }
  .products-cta { padding-top: var(--space-sm); padding-bottom: 76px; }
  .products-hint { padding-top: var(--space-sm); }
}
@media (max-width: 47.999em) and (max-height: 720px) {
  .products.is-enhanced .product-card img { height: clamp(80px, 12vh, 110px); }
}