/* ═══════════════════════════════════════════════════════════════════════════
   Η ΓΡΑΜΜΑΤΟΣΕΙΡΑ, ΑΠΟ ΤΟΝ ΔΙΚΟ ΣΟΥ ΣΕΡΒΕΡ
   ---------------------------------------------------------------------------
   Πριν: η Artemisia ερχόταν από το fonts.googleapis.com. Αυτό σημαίνει, ΠΡΙΝ
   γραφτεί ένα γράμμα στην οθόνη: DNS + σύνδεση + TLS σε δύο ξένους τομείς,
   κατέβασμα ενός CSS, και ΜΕΤΑ αρχίζει το κατέβασμα της γραμματοσειράς.
   Τα ίδια αρχεία υπάρχουν ήδη στο /css/fonts/, τα σερβίρουμε από εκεί.

   ΓΙΑΤΙ ΞΑΝΑΓΡΑΦΕΤΑΙ ΕΔΩ ΚΑΙ ΔΕΝ ΧΡΗΣΙΜΟΠΟΙΕΙΤΑΙ ΤΟ css/bill.css:
   το bill.css είναι πρωτότυπο αρχείο και δεν το πειράζουμε. Επιπλέον δεν
   δηλώνει font-display, οπότε ο browser κρύβει το κείμενο έως 3 δευτερόλεπτα
   περιμένοντας τη γραμματοσειρά. Με `swap` το κείμενο φαίνεται ΑΜΕΣΩΣ με
   Georgia και αλλάζει σε Artemisia μόλις έρθει.

   Μόνο woff2 + woff: τα eot/ttf/svg αφορούν browsers που δεν υπάρχουν πια.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'GFS Artemisia';
  src: url('/css/fonts/GFSArtemisia-Regular.woff2') format('woff2'),
       url('/css/fonts/GFSArtemisia-Regular.woff')  format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
/* ── ΤΟ BOLD ΕΙΝΑΙ ΔΙΟΡΘΩΜΕΝΟ ΑΝΤΙΓΡΑΦΟ ─────────────────────────────────────
   ΤΟ ΠΡΟΒΛΗΜΑ: το πρωτότυπο GFSArtemisia-Bold δίνει σε ΟΛΑ τα ψηφία το ίδιο
   πλάτος (634 μονάδες), ενώ το regular τα έχει αναλογικά. Το «1» είναι μόλις
   346 μονάδες φαρδύ, οπότε έπαιρνε **288 μονάδες κενό** γύρω του, σχεδόν όσο
   το ίδιο το ψηφίο. Σε «119», «15», «12» φαινόταν σπασμένο.
   Το bold ΔΕΝ διαθέτει καν τα χαρακτηριστικά `pnum`/`tnum` που έχει το regular,
   άρα δεν διορθωνόταν από το CSS.

   Η ΔΙΟΡΘΩΣΗ: τα κενά κάθε ψηφίου υπολογίστηκαν από το REGULAR και
   κλιμακώθηκαν στο πλάτος του bold. Το «1» πήγε από 143+145 σε 62+33.
   Τα περιγράμματα δεν πειράχτηκαν, μόνο τα πλάτη.
   Το πρωτότυπο στο /css/fonts/ ΔΕΝ αγγίχτηκε.

   ΣΤΟ ΑΝΕΒΑΣΜΑ: το αρχείο πρέπει να ανέβει μαζί με το CSS. Η διαδρομή είναι
   σχετική ως προς αυτό το αρχείο, οπότε αντέχει τη μετακίνηση του φακέλου. */
@font-face {
  font-family: 'GFS Artemisia';
  src: url('../fonts/GFSArtemisia-Bold-prop.woff2') format('woff2'),
       url('../fonts/GFSArtemisia-Bold-prop.woff')  format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GFS Artemisia';
  src: url('/css/fonts/GFSArtemisia-Italic.woff2') format('woff2'),
       url('/css/fonts/GFSArtemisia-Italic.woff')  format('woff');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'GFS Artemisia';
  src: url('/css/fonts/GFSArtemisia-BoldItalic.woff2') format('woff2'),
       url('/css/fonts/GFSArtemisia-BoldItalic.woff')  format('woff');
  font-weight: 700; font-style: italic; font-display: swap;
}

@charset "UTF-8";
/* =====================================================================================
   vt-shell.css  ·  ΚΕΛΥΦΟΣ: HEADER + FOOTER
   -------------------------------------------------------------------------------------
   Αντικαθιστά τους κανόνες header/footer του style.css (332 KB) και την εξάρτηση
   από το bootstrap.css. Μέγεθος: ~9 KB.

   ΧΡΩΜΑΤΑ: τα δικά σου, από το css/bill.css.
   ΓΡΑΜΜΑΤΟΣΕΙΡΑ: GFS Artemisia, μόνη σε όλο το site.

   RESPONSIVE: τρία επίπεδα:
     ≥1080px  δύο σειρές · ζώδια με σύμβολο + όνομα · μενού οριζόντιο
     768-1079 δύο σειρές · ζώδια μόνο σύμβολα      · μενού οριζόντιο, πιο σφιχτό
     <768px   μία σειρά  · ζώδια σε λωρίδα κύλισης · μενού σε συρτάρι
   ===================================================================================== */

:root {
  /* Τα ονόματα αντιστοιχούν στο css/bill.css:
     --vtx-navy  = vt-dark-blue    --vtx-slate = vt-light-blue
     --vtx-brown = vt-dark-brown   --vtx-gold  = vt-light-brown
     --vtx-cream = vt-yellow */
  --vtx-navy:   #1E2D40;
  --vtx-deep:   #16222F;
  --vtx-slate:  #3B4B59;
  --vtx-brown:  #A6977B;
  --vtx-gold:   #D9BD89;
  --vtx-cream:  #F2ECCE;
  /* Το μόνο κόκκινο του κελύφους. Ίδιο με το --brick του vt-page.css, ώστε το
     badge του early bird και η κορδέλα της τιμής να είναι το ίδιο χρώμα: ο
     επισκέπτης το μαθαίνει μία φορά και το αναγνωρίζει παντού.
     ΑΝ ΑΛΛΑΞΕΙ, ΠΡΕΠΕΙ ΝΑ ΑΛΛΑΞΕΙ ΚΑΙ ΣΤΑ ΔΥΟ ΑΡΧΕΙΑ. */
  --vtx-brick:  #8E2F22;
  --vtx-hair:   rgba(242, 236, 206, .13);
  --vtx-font:   "GFS Artemisia", Georgia, "Times New Roman", serif;
  --vtx-h:      76px;   /* ύψος κύριας σειράς */
  --vtx-hs:     60px;   /* μετά την κύλιση */
  --vtx-z:      44px;   /* ύψος σειράς ζωδίων */
  --vtx-pad:    clamp(16px, 3vw, 40px);
}

/* Ο browser δίνει στο <body> 8px margin από προεπιλογή. Χωρίς μηδενισμό,
   γύρω από ΟΛΗ τη σελίδα εμφανίζεται λευκό πλαίσιο 8px, και το header παύει να
   ακουμπά τις άκρες. Ανήκει εδώ: όποια σελίδα φορτώνει το κέλυφος το θέλει. */
body {
  margin: 0;
  /* Η σελίδα τελειώνει σε σκούρο footer. Χωρίς αυτό, όταν το περιεχόμενο είναι
     κοντό, κάτω από το footer φαίνεται λευκή λωρίδα. */
  background: var(--vtx-navy);
}

/* ═══ ΚΕΛΥΦΟΣ ════════════════════════════════════════════════════════════ */
.vtx {
  position: sticky; top: 0; z-index: 900;
  background: var(--vtx-navy);
  font-family: var(--vtx-font);
  /* sticky ⇒ συμμετέχει στη ροή. Κανένας «κλώνος», καμία επικάλυψη. */
}
.vtx *, .vtx *::before, .vtx *::after { box-sizing: border-box; }
.vtx a { text-decoration: none; }
.vtx a:not([class]) { color: inherit; }  /* ΜΗΝ βάλεις .vtx a{color}, νικά τα .vtx__sign/.vtx__link λόγω ειδικότητας */
.vtx ul { list-style: none; margin: 0; padding: 0; }

.vtx__inner {
  max-width: 1320px; margin-inline: auto;
  padding-inline: var(--vtx-pad);
  display: flex; align-items: center; gap: 1rem;
}

/* ── Κύρια σειρά ─────────────────────────────────────────────── */
.vtx__main { border-bottom: 1px solid var(--vtx-hair); }
.vtx__main > .vtx__inner {
  height: var(--vtx-h);
  transition: height .22s ease;
}
.vtx.is-scrolled .vtx__main > .vtx__inner { height: var(--vtx-hs); }

.vtx__logo { display: flex; align-items: center; }
/* Το κενό ως τη ΔΕΞΙΑ πλοήγηση το ανοίγει πλέον η άγκυρα του ζωδίου, όχι το
   λογότυπο, αλλιώς η άγκυρα προσγειωνόταν δίπλα στο μενού αντί στο λογότυπο.
   Η άγκυρα υπάρχει πάντα στη ροή (με μηδενικό πλάτος όταν δεν φαίνεται),
   οπότε το κενό ανοίγει σωστά και πριν την κύλιση. */
.vtx__inner:not(:has(.vtx__dock)) .vtx__logo { margin-right: auto; }
.vtx__logo img {
  height: 62px; width: auto; display: block;
  transition: height .22s ease;
}
@media (min-width: 1300px) { .vtx__logo img { height: 70px; } }
.vtx.is-scrolled .vtx__logo img { height: 46px; }

/* ── Πλοήγηση ────────────────────────────────────────────────── */
.vtx__list { display: flex; align-items: center; }
.vtx__item { position: relative; }
.vtx__link {
  display: flex; align-items: center; gap: .35rem;
  padding: .55rem .75rem;
  font-size: 15px;              /* ήταν 13px, η Artemisia έχει μικρό ύψος-x */
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vtx-cream);
  white-space: nowrap;
  position: relative;
  transition: color .15s ease;
}
.vtx__link:hover { color: var(--vtx-gold); }

/* Ένδειξη τρέχουσας σελίδας: ΜΟΝΟ αλλαγή χρώματος.
   Υπήρχε και υπογράμμιση από κάτω· αφαιρέθηκε. Το χρώμα το λέει ήδη, και κάθε
   επιπλέον σημάδι είναι ένα ακόμη πράγμα που πρέπει να επεξεργαστεί το μάτι. */
.vtx__item.is-current > .vtx__link { color: var(--vtx-gold); }
.vtx__caret { width: 9px; height: 6px; opacity: .55; transition: transform .18s ease; }
.vtx__item.has-sub:hover > .vtx__link .vtx__caret,
.vtx__item.open > .vtx__link .vtx__caret { transform: rotate(180deg); }

/* ── Υπομενού (desktop: αναδυόμενο) ──────────────────────────── */
.vtx__panel {
  position: absolute; top: 100%; left: 0; width: 420px;
  background: var(--vtx-deep);
  border: 1px solid var(--vtx-hair);
  border-radius: 8px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .38);
  padding: .5rem;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.vtx__item.has-sub:hover > .vtx__panel,
.vtx__item.has-sub:focus-within > .vtx__panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* Το τελευταίο υπομενού δεν βγαίνει εκτός οθόνης */
.vtx__item:nth-last-child(-n+3) .vtx__panel { left: auto; right: 0; }

/* ΠΡΟΣΟΧΗ: «.vtx__panel a» θα έπιανε ΚΑΘΕ σύνδεσμο του πλαισίου, και με
   ειδικότητα (0,1,1) νικούσε το «.vtx__all» (0,1,0), κρατώντας ορατό τον
   σύνδεσμο καταλόγου παρά το display:none. Στοχεύουμε μόνο τα στοιχεία λίστας. */
.vtx__panel li > a {
  display: block; padding: .7rem .8rem; border-radius: 5px;
  transition: background-color .14s ease;
}
.vtx__panel li > a:hover { background: rgba(242, 236, 206, .06); }
/* Ο τίτλος και η σήμανση σε ΜΙΑ σειρά, με τη σήμανση πάντα στοιχισμένη δεξιά.
   Πριν το badge ήταν inline μετά τον τίτλο: όταν ο τίτλος ήταν μακρύς, έπεφτε
   σε δεύτερη σειρά και έσπρωχνε την περιγραφή, άτακτος ρυθμός από στοιχείο
   σε στοιχείο. Τώρα η περιγραφή είναι ΠΑΝΤΑ ακριβώς κάτω από τον τίτλο. */
.vtx__panel-t {
  display: flex; align-items: center; gap: .6rem;
  font-size: 17px; font-weight: 700; line-height: 1.3;
  color: var(--vtx-cream);
}
.vtx__panel-n { min-width: 0; }
.vtx__panel-t .vtx__badge { margin-left: auto; flex: none; }
.vtx__panel-d {
  display: block; margin-top: .2rem;
  font-size: 14.5px; line-height: 1.45; color: var(--vtx-brown);
}
/* Σημάνσεις τμημάτων, τρεις καταστάσεις, όχι όλα κόκκινα.
   Το κόκκινο πρέπει να σημαίνει «χάθηκε»· αν το φοράνε και τα ανοιχτά,
   δεν σημαίνει τίποτα. */
.vtx__badge {
  display: inline-block; vertical-align: middle;
  font-size: 10.5px; font-style: normal; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  border-radius: 30px; padding: 2px 8px; white-space: nowrap;
  border: 1px solid transparent;
}
/* Επείγον: early bird, ξεκινά σύντομα, προλαβαίνεις ακόμη */
.vtx__badge--hot  { background: var(--vtx-gold); color: var(--vtx-navy); }
/* Ανοιχτές εγγραφές, χωρίς πίεση χρόνου */
.vtx__badge--open { background: transparent; color: var(--vtx-gold); border-color: rgba(217,189,137,.55); }
/* Κλειστές, διακριτικό, δεν διεκδικεί προσοχή */
.vtx__badge--shut { background: transparent; color: rgba(242,236,206,.45); border-color: rgba(242,236,206,.22); }

/* ── EARLY BIRD: ΤΟ ΜΟΝΟ ΠΟΥ ΚΙΝΕΙΤΑΙ ────────────────────────────────────────
   ΓΙΑΤΙ ΤΟΥΒΛΙΝΟ. Είναι το ίδιο χρώμα με την κορδέλα της τιμής. Ο επισκέπτης
   το έχει ήδη συναντήσει εκεί ως «προσφορά που λήγει», οπότε το αναγνωρίζει
   χωρίς να διαβάσει.

   ΓΙΑΤΙ ΜΟΝΟ ΑΥΤΟ ΠΑΛΜΙΖΕΙ. Μετρήθηκε ότι στο υπομενού υπάρχουν σήμερα ΤΡΙΑ
   επείγοντα badges ταυτόχρονα (EARLY BIRD, ΑΥΡΙΟ, ΑΥΡΙΟ). Αν κινούνταν όλα,
   κανένα δεν θα ξεχώριζε και το υπομενού, που είναι εργαλείο πλοήγησης, θα
   γινόταν δύσκολο να διαβαστεί. Το early bird είναι πάντα ΕΝΑ, γιατί τρέχει
   μία προσφορά τη φορά.

   ΓΙΑΤΙ ΠΑΛΜΟΣ ΚΑΙ ΟΧΙ ΑΝΑΒΟΣΒΗΜΑ. Το on/off είναι το εφέ των φτηνών banner,
   κουράζει μέσα σε δευτερόλεπτα, και σε γρήγορο ρυθμό είναι επικίνδυνο για
   φωτοευαισθησία (WCAG 2.3.1: όχι πάνω από 3 αναλαμπές ανά δευτερόλεπτο).
   Εδώ ο κύκλος είναι 2,6s και η φωτεινότητα δεν πέφτει ποτέ κάτω από 88%:
   το μάτι το πιάνει ως ανάσα, όχι ως τρεμόπαιγμα.

   Η κίνηση γίνεται με transform και box-shadow, όχι με ιδιότητες διάταξης,
   ώστε να μη ξαναϋπολογίζεται το υπομενού σε κάθε καρέ. */
.vtx__badge--eb {
  background: var(--vtx-brick); color: #FBEFE6;
  border-color: transparent;
  animation: vtx-eb-pulse 2.6s ease-in-out infinite;
}
@keyframes vtx-eb-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(142,47,34,.55); opacity: 1; }
  50%      { transform: scale(1.045); box-shadow: 0 0 0 5px rgba(142,47,34,0); opacity: .88; }
}
@media (prefers-reduced-motion: reduce) {
  .vtx__badge--eb { animation: none; }
}

/* ── Σειρά ζωδίων ────────────────────────────────────────────── */
.vtx__zodiac {
  background: var(--vtx-deep);
  border-bottom: 1px solid var(--vtx-hair);
  overflow: hidden;
  max-height: var(--vtx-z);
  transition: max-height .24s ease, opacity .2s ease;
  /* Λέει στον browser ότι ό,τι αλλάζει ΜΕΣΑ στη λωρίδα δεν επηρεάζει τα μεγέθη
     έξω από αυτήν. Χωρίς αυτό, το μάζεμα του ύψους ανάγκαζε επανυπολογισμό και
     για το περιεχόμενο των ζωδίων σε κάθε καρέ. */
  contain: layout paint;
}
.vtx.is-scrolled .vtx__zodiac { max-height: 0; opacity: 0; border-bottom-color: transparent; }
.vtx.is-scrolled .vtx__main { border-bottom-color: transparent; }
.vtx__zodiac > .vtx__inner { height: var(--vtx-z); }

.vtx__signs { display: flex; align-items: center; width: 100%; justify-content: space-between; }
.vtx__sign {
  display: flex; align-items: center; gap: .38rem;
  padding: .3rem .6rem;
  /* Σε ηρεμία light-brown ώστε να μην ανταγωνίζονται το κύριο μενού (yellow).
     Στο hover ανεβαίνουν σε yellow. */
  color: var(--vtx-gold);
  min-height: 34px;
  font-size: 13.5px; letter-spacing: .01em; white-space: nowrap;
  transition: color .14s ease, background-color .14s ease;
}
.vtx__sign svg { width: 15px; height: 15px; flex: none; }
.vtx__sign:hover { color: var(--vtx-cream); }   /* μόνο χρώμα, χωρίς πλαίσιο */
/* Απόλυτη στοίχιση με το header: το πρώτο ζώδιο στην άκρη του λογοτύπου,
   το τελευταίο στην άκρη του «Επικοινωνία». */
/* Απόλυτη στοίχιση με το header, σε ΚΑΘΕ πλάτος.
   Το πρώτο σύμβολο ακουμπά την άκρη του λογοτύπου, το τελευταίο την άκρη
   του μενού (ή του χάμπουργκερ). */
.vtx__signs > li:first-child .vtx__sign { padding-left: 0; }
.vtx__signs > li:last-child  .vtx__sign { padding-right: 0; }
.vtx__sign.is-current { color: var(--vtx-cream); }

/* ── Χάμπουργκερ ─────────────────────────────────────────────── */
.vtx__burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px;
  background: none; border: 0; cursor: pointer;
}
.vtx__burger span {
  display: block; height: 2px; width: 100%; background: var(--vtx-cream);
  border-radius: 2px; transform-origin: center;
  transition: transform .25s cubic-bezier(.34,1.4,.64,1), opacity .18s ease,
              width .25s cubic-bezier(.34,1.4,.64,1), background-color .18s ease;
}
/* Η μεσαία γραμμή είναι εξαρχής πιο κοντή, μικρή λεπτομέρεια που δίνει χαρακτήρα. */
.vtx__burger span:nth-child(2) { width: 70%; align-self: flex-end; }

/* ΚΙΝΗΣΗ ΣΤΟ HOVER: μόνο σε συσκευές με πραγματικό δείκτη.
   Στην αφή δεν υπάρχει hover: ένα :hover σε κινητό «κολλάει» μετά το πάτημα. */
@media (hover: hover) and (pointer: fine) {
  .vtx__burger:hover span { background: var(--vtx-gold); }
  .vtx__burger:hover span:nth-child(1) { transform: translateY(1px); }
  .vtx__burger:hover span:nth-child(2) { width: 100%; }
  .vtx__burger:hover span:nth-child(3) { transform: translateY(-1px); width: 70%; }
}
/* ΑΦΗ: ανάδραση στο πάτημα, που δουλεύει παντού. */
.vtx__burger:active span { background: var(--vtx-gold); }
.vtx__burger:active { transform: scale(.94); }
.vtx__burger { transition: transform .12s ease; }
body.vtx-open .vtx__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.vtx-open .vtx__burger span:nth-child(2) { opacity: 0; width: 0; }
body.vtx-open .vtx__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 100%; }

.vtx__scrim {
  position: fixed; inset: 0; z-index: 890;
  background: rgba(10, 16, 24, .6);
}

/* ΕΣΤΙΑΣΗ ΣΕ ΟΛΟ ΤΟ ΚΕΛΥΦΟΣ, ΟΧΙ ΜΟΝΟ ΣΤΗΝ ΚΕΦΑΛΙΔΑ.
   Ο κανόνας ήταν `.vtx :focus-visible`, δηλαδή κάλυπτε μόνο τα παιδιά της
   κεφαλίδας. Μετρήθηκε ότι 31 σύνδεσμοι και κουμπιά έμεναν ΕΞΩ: ολόκληρο το
   υποσέλιδο και η λωρίδα ανακοινώσεων, που είναι αδέρφια της κεφαλίδας και όχι
   παιδιά της. Όποιος πλοηγείται με πληκτρολόγιο έχανε πού βρίσκεται. */
.vtx :focus-visible,
.vta :focus-visible,
.vtf :focus-visible,
.vtx:focus-visible,
.vta:focus-visible,
.vtf:focus-visible { outline: 2px solid var(--vtx-gold); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  .vtx, .vtx * { transition: none !important; }
}

/* ═══ ΕΠΙΠΕΔΟ 2, ζώδια μόνο σύμβολα ═════════════════════════════════════
   Μετρημένο: με ονόματα πιάνουν 1061px. Στα 1080 έμεναν 4px, πολύ οριακό.
   Μόνο σύμβολα: 408px, χωράνε άνετα ως το κινητό. Δεν χρειάζεται να μπουν
   στο συρτάρι. */
@media (max-width: 1199px) {
  .vtx__sign span { display: none; }
  /* Στόχος αφής ≥44px, με μόνο σύμβολα υπάρχει χώρος, οπότε τα μεγαλώνουμε. */
  .vtx__sign { padding: .55rem .9rem; min-height: 44px; }
  .vtx__sign svg { width: 22px; height: 22px; }
  .vtx__signs { justify-content: space-between; }
  .vtx__link { font-size: 14px; padding: .55rem .55rem; letter-spacing: .04em; }
}

/* ═══ ΕΠΙΠΕΔΟ 3, συρτάρι ════════════════════════════════════════════════
   ΠΡΟΣΟΧΗ στο breakpoint: το οριζόντιο μενού πιάνει 810-923px. Μαζί με το
   λογότυπο και τα περιθώρια χρειάζεται ~1080px. Κάτω από αυτό ΞΕΧΕΙΛΙΖΕ
   (το «ΚΟΙΝΟΤΗΤΑ» κοβόταν και εμφανιζόταν οριζόντια κύλιση). */
@media (max-width: 1079px) {
  :root { --vtx-h: 62px; --vtx-hs: 56px; --vtx-z: 46px; }

  .vtx__burger { display: flex; }

  .vtx__nav {
    position: fixed; top: 0; right: 0; z-index: 901;
    width: min(88vw, 360px); height: 100dvh;
    background: var(--vtx-deep);
    border-left: 1px solid var(--vtx-hair);
    padding: calc(var(--vtx-h) + 12px) 0 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .26s ease;
  }
  body.vtx-open .vtx__nav { transform: translateX(0); }
  body.vtx-open { overflow: hidden; }

  .vtx__list { flex-direction: column; align-items: stretch; }
  .vtx__item { border-bottom: 1px solid var(--vtx-hair); }
  .vtx__link {
    justify-content: space-between;
    padding: 1rem var(--vtx-pad); font-size: 16px; white-space: normal;
  }
  .vtx__caret { width: 12px; height: 8px; opacity: .8; }

  /* Υπομενού ως πτυσσόμενο, όχι αναδυόμενο */
  .vtx__panel {
    position: static; width: auto; opacity: 1; visibility: visible;
    transform: none; box-shadow: none; border: 0; border-radius: 0;
    background: rgba(0, 0, 0, .22);
    padding: 0 0 .5rem;
    display: none;
  }
  .vtx__item.open > .vtx__panel { display: block; }
  .vtx__panel a { padding: .75rem var(--vtx-pad); border-radius: 0; }
  .vtx__panel-t { font-size: 14.5px; }
  .vtx__panel-d { font-size: 13px; }

  /* Ζώδια: λωρίδα με οριζόντια κύλιση, χωρίς να σπρώχνει τη σελίδα */
  .vtx__zodiac { max-height: var(--vtx-z); }
  .vtx__zodiac > .vtx__inner {
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* ΙΔΙΟ padding με την κύρια σειρά, αλλιώς τα ζώδια δεν είναι περασιά
       με το λογότυπο. Η στοίχιση επιτυγχάνεται με μηδενισμό του padding
       στο πρώτο/τελευταίο σύμβολο, όχι με αφαίρεση από τον περιέκτη. */
    padding-inline: var(--vtx-pad);
  }
  .vtx__zodiac > .vtx__inner::-webkit-scrollbar { display: none; }

  /* ΔΥΟ ΔΙΟΡΘΩΣΕΙΣ ΣΤΗΝ ΟΡΙΖΟΝΤΙΑ ΚΥΛΙΣΗ (12 Σεπ 2026, από δοκιμή σε κινητό)

     1. ΤΟ ΤΕΛΕΥΤΑΙΟ ΖΩΔΙΟ ΑΚΟΥΜΠΟΥΣΕ ΣΤΗΝ ΑΚΡΗ. Το padding-inline παραπάνω
        δίνει αέρα αριστερά, αλλά στο ΤΕΛΟΣ μιας οριζόντιας κύλισης οι
        περισσότεροι browsers αγνοούν το δεξί padding του περιέκτη. Οι Ιχθύες
        έφταναν κολλητά στο χείλος και φαίνονταν κομμένοι. Ένα κενό στοιχείο στο
        τέλος της λίστας το λύνει, επειδή είναι ΠΕΡΙΕΧΟΜΕΝΟ και όχι padding.

     2. ΔΕΝ ΦΑΙΝΟΤΑΝ ΟΤΙ ΚΥΛΑΕΙ. Ένα σύμβολο μισοκομμένο στην άκρη μοιάζει με
        σφάλμα, όχι με πρόσκληση. Η μάσκα σβήνει απαλά τα δύο άκρα, που είναι το
        καθιερωμένο σήμα ότι το περιεχόμενο συνεχίζεται πέρα από την οθόνη. */
  /* ΤΟ ΚΕΝΟ ΣΤΟ ΤΕΛΟΣ ΠΡΕΠΕΙ ΝΑ ΕΙΝΑΙ ΜΕΓΑΛΥΤΕΡΟ ΑΠΟ ΤΗ ΜΑΣΚΑ.
     Η μάσκα σβήνει τη δεξιά άκρη ΠΑΝΤΑ, και όταν ο επισκέπτης έχει φτάσει στο
     τέλος της κύλισης. Αν το κενό είναι μικρότερο από τη ζώνη ξεθωριάσματος, το
     τελευταίο σύμβολο κάθεται μέσα της και δείχνει σβησμένο μόνιμα.
     Μετρήθηκε στα 390px: κενό 16px (--vtx-pad) έναντι μάσκας 20px, δηλαδή οι
     Ιχθύες ξεθώριαζαν πάντα. Τώρα το κενό είναι 30px και η μάσκα 14px, οπότε
     μένουν 16px καθαρού χώρου ανάμεσά τους. */
  .vtx__signs::after {
    content: ''; flex: none; width: 30px;
  }
  .vtx__zodiac > .vtx__inner {
    -webkit-mask-image: linear-gradient(to right,
            transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(to right,
            transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  /* Άκρη-άκρη και εδώ. Όταν τα σύμβολα ξεχειλίζουν (πολύ στενές οθόνες),
     το space-between δεν έχει χώρο να μοιράσει και συμπεριφέρεται ως flex-start,
     οπότε ο Κριός δεν κόβεται ποτέ. Μία δήλωση, δύο συμπεριφορές. */
  /* ΤΟ ul ΠΡΕΠΕΙ ΝΑ ΜΕΓΑΛΩΝΕΙ ΜΕ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ, ΟΧΙ ΝΑ ΜΕΝΕΙ ΣΤΟ 100%.
     Με `width: 100%` το ul έμενε στο πλάτος της οθόνης (343px) ενώ τα σύμβολα
     έπιαναν 428px. Το `space-between` μοίραζε τότε τον χώρο μέσα σε 343px, και
     το κενό του `::after` τοποθετούνταν στο ΤΕΛΟΣ ΤΟΥ ul, δηλαδή ΠΑΝΩ στα
     σύμβολα που είχαν ήδη ξεχειλίσει, αντί για μετά από αυτά.
     Μετρήθηκε: στο τέλος της κύλισης οι Ιχθύες απείχαν **0px** από την άκρη,
     παρότι το κενό υπήρχε και είχε σωστό πλάτος.
     Η λύση είναι `width: max-content` ΜΑΖΙ με `min-width: 100%`, και τα δύο:
       · `width: auto` ΔΕΝ αρκεί. Σε στοιχείο επιπέδου μπλοκ σημαίνει «γέμισε
         τον γονέα», όχι «προσαρμόσου στο περιεχόμενο». Δοκιμάστηκε και το ul
         έμεινε πάλι στα 343px.
       · `max-content` μεγαλώνει το ul όσο χρειάζονται τα σύμβολα ΚΑΙ το κενό.
       · `min-width: 100%` κρατά τη συμπεριφορά «άκρη σε άκρη» στις οθόνες όπου
         τα σύμβολα χωρούν και το space-between έχει νόημα. */
  .vtx__signs {
    justify-content: space-between; gap: 0;
    width: max-content; min-width: 100%;
    /* ΤΟ ΤΡΙΤΟ ΚΟΜΜΑΤΙ, ΚΑΙ ΧΩΡΙΣ ΑΥΤΟ ΤΑ ΑΛΛΑ ΔΥΟ ΔΕΝ ΚΑΝΟΥΝ ΤΙΠΟΤΕ.
       Ο περιέκτης `.vtx__inner` είναι flex, άρα το ul είναι flex item και παίρνει
       `flex-shrink: 1` από προεπιλογή: ο γονέας το ΣΥΡΡΙΚΝΩΝΕ πίσω στο πλάτος της
       οθόνης, ακυρώνοντας το `max-content`. Μετρήθηκε: το ul έμενε στα 343px ενώ
       το περιεχόμενό του ήθελε 428px. */
    flex: 0 0 auto;
  }
  .vtx__sign { padding: .45rem .5rem; }
  .vtx__sign svg { width: 20px; height: 20px; }
}

/* ═══ FOOTER ═════════════════════════════════════════════════════════════ */
.vtf {
  background: var(--vtx-navy);
  color: var(--vtx-cream);
  font-family: var(--vtx-font);
}
.vtf *, .vtf *::before, .vtf *::after { box-sizing: border-box; }
.vtf a { color: inherit; text-decoration: none; }
.vtf ul { list-style: none; margin: 0; padding: 0; }

.vtf__inner {
  max-width: 1320px; margin-inline: auto;
  padding: 3.2rem var(--vtx-pad) 2.4rem;
  display: grid; gap: 2.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .vtf__inner { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .vtf__inner { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

.vtf__logo img { width: 220px; max-width: 100%; height: auto; display: block; margin-bottom: 1rem; }
.vtf__about { font-size: 15px; line-height: 1.6; color: var(--vtx-brown); max-width: 34ch; margin: 0; }

.vtf h3 {
  font-size: 13px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--vtx-gold); font-weight: 700; margin: 0 0 .9rem;
}
.vtf li + li { margin-top: .5rem; }
.vtf__links a { font-size: 15px; color: var(--vtx-cream); opacity: .82; }
.vtf__links a:hover { opacity: 1; color: var(--vtx-gold); }

.vtf__contact { font-size: 15px; color: var(--vtx-cream); }
.vtf__contact a:hover { color: var(--vtx-gold); }
.vtf__social { display: flex; gap: .55rem; margin-top: 1rem; }
.vtf__social a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--vtx-hair); color: var(--vtx-cream);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.vtf__social a:hover { background: var(--vtx-gold); color: var(--vtx-navy); border-color: var(--vtx-gold); }
.vtf__social svg { width: 17px; height: 17px; fill: currentColor; }

.vtf__bar { background: var(--vtx-slate); }
.vtf__bar-in {
  max-width: 1320px; margin-inline: auto;
  padding: 1.1rem var(--vtx-pad);
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem;
  align-items: center; justify-content: space-between;
  font-size: 14px; color: rgba(242, 236, 206, .62);
}
.vtf__bar a { color: rgba(242, 236, 206, .78); }
.vtf__bar a:hover { color: var(--vtx-gold); }
.vtf__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }

/* Newsletter στο footer */
.vtf__news { display: flex; gap: .4rem; flex-wrap: wrap; }
.vtf__news input {
  flex: 1 1 10rem; min-width: 0;
  font: inherit; font-size: 14.5px;
  padding: .6rem .8rem; border-radius: 4px;
  border: 1px solid var(--vtx-hair);
  background: var(--vtx-deep); color: var(--vtx-cream);
}
.vtf__news input::placeholder { color: rgba(242,236,206,.42); }
.vtf__news input:focus { border-color: var(--vtx-gold); outline: none; }
.vtf__news button {
  font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
  padding: .6rem 1.1rem; border: 0; border-radius: 4px;
  background: var(--vtx-brown); color: var(--vtx-navy);
  transition: background-color .15s ease;
}
.vtf__news button:hover { background: var(--vtx-gold); }
.vtx-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ═══ COOKIES ════════════════════════════════════════════════════════════
   Το consent.js καλεί `new bootstrap.Modal(...)`. Επειδή δεν φορτώνουμε πια
   το Bootstrap JS, δίνουμε (α) ένα μικρό υποκατάστατο στο vt-shell.js και
   (β) τα στυλ που έλειπαν. Χωρίς αυτά το panel ξεχυνόταν κάτω από το footer. */
#cookie-banner.hidden, #cookie-icon.hidden { display: none !important; }

#cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: var(--vtx-deep);
  border-top: 1px solid var(--vtx-hair);
  box-shadow: 0 -14px 40px rgba(0, 0, 0, .38);
  font-family: var(--vtx-font); color: var(--vtx-cream);
}
#cookie-banner .container {
  max-width: 1320px; margin-inline: auto; padding: 1.2rem var(--vtx-pad);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center;
}
#cookie-banner .txt { flex: 1 1 22rem; font-size: 14px; line-height: 1.55; color: rgba(242,236,206,.8); }
#cookie-banner .txt a { color: var(--vtx-gold); }
#cookie-banner .btns { display: flex; flex-wrap: wrap; gap: .6rem; margin-left: auto; }
#cookie-banner .btn {
  font: inherit; font-size: 14.5px; cursor: pointer; white-space: nowrap;
  padding: .62rem 1.25rem; border-radius: 4px; border: 1px solid var(--vtx-brown);
  background: transparent; color: var(--vtx-cream);
}
#cookie-banner .btn:hover { background: var(--vtx-brown); color: var(--vtx-navy); }
#cookie-banner .btn.accept-all,
#cookie-banner .btn-outline-brown.accept-all { background: var(--vtx-brown); color: var(--vtx-navy); }

/* ΜΗΝ φτιάχνεις κύκλο εδώ: το inc/cookie_banner.php κάνει ΤΟ ΚΟΥΜΠΙ κύκλο 50px
   με χρυσό φόντο. Ένας δεύτερος κύκλος στο <div> έδινε δύο ομόκεντρους κύκλους,
   μικρό αποκεντραρισμένο εικονίδιο, και «μεγάλωμα» στο hover.
   Εδώ αλλάζουμε ΜΟΝΟ τη θέση. */
#cookie-icon { z-index: 880; }
/* ΤΟ ΜΑΥΡΟ ΠΕΡΙΓΡΑΜΜΑ ΤΟΥ ΚΥΚΛΟΥ.
   Το κουμπί μέσα στο #cookie-icon είναι <button class="btn"> και ο browser του
   δίνει από προεπιλογή περίγραμμα 2px. Χωρίς Bootstrap να το μηδενίσει, έμενε
   μια μαύρη γραμμή γύρω από τον χρυσό κύκλο.
   Το inc/cookie_banner.php είναι πρωτότυπο και δεν αγγίζεται· μηδενίζεται εδώ. */
#cookie-icon .btn { border: 0; }
#cookie-icon .btn:focus-visible { outline: 2px solid var(--vtx-cream); outline-offset: 3px; }

/* ΤΑ ΚΟΥΜΠΙΑ ΤΟΥ BANNER ΤΩΝ COOKIES. Έρχονται από το πρωτότυπο
   inc/cookie_banner.php, που δεν το αγγίζουμε. Ήταν τα δύο μοναδικά κουμπιά
   ολόκληρης της σελίδας χωρίς ορατή εστίαση· ο κανόνας μπαίνει εδώ, στο δικό
   μας φύλλο, ώστε να μη χρειαστεί καμία αλλαγή στο πρωτότυπο. */
#cookie-banner .btn:focus-visible,
#cookie-banner a:focus-visible,
.modal .btn:focus-visible,
.modal a:focus-visible,
.modal input:focus-visible {
  outline: 2px solid var(--vtx-gold); outline-offset: 3px;
}

/* Το modal, χωρίς Bootstrap */
.modal {
  position: fixed; inset: 0; z-index: 1050;
  display: none; overflow-y: auto;
  background: rgba(8, 13, 20, .68);
  font-family: var(--vtx-font);
}
.modal.show { display: block; }
.modal-dialog {
  max-width: 640px; margin: 4vh auto; padding-inline: 16px;
}
.modal-lg { max-width: 780px; }
.modal-dialog-centered { display: flex; align-items: center; min-height: 92vh; }
.modal-content {
  width: 100%; background: var(--vtx-navy); color: var(--vtx-cream);
  border: 1px solid var(--vtx-hair); border-radius: 8px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
  max-height: 88vh; display: flex; flex-direction: column;
}
.modal-header, .modal-footer {
  padding: 1.1rem 1.5rem; display: flex; align-items: center; gap: 1rem;
}
.modal-header { border-bottom: 1px solid var(--vtx-hair); }
.modal-footer { border-top: 1px solid var(--vtx-hair); justify-content: flex-end; flex-wrap: wrap; }
.modal-title { margin: 0; font-size: 1.35rem; color: var(--vtx-gold); font-weight: 400; }
.modal-body { padding: 1.2rem 1.5rem; overflow-y: auto; }
.modal-body p { margin: 0 0 1rem; font-size: 14.5px; line-height: 1.6; color: rgba(242,236,206,.82); }
.btn-close {
  margin-left: auto; width: 34px; height: 34px; flex: none; cursor: pointer;
  background: none; border: 1px solid var(--vtx-hair); border-radius: 50%;
  color: var(--vtx-cream); font-size: 0; position: relative;
}
.btn-close::before, .btn-close::after {
  content: ""; position: absolute; inset: 50% 9px auto; height: 1.5px;
  background: currentColor;
}
.btn-close::before { transform: rotate(45deg); }
.btn-close::after  { transform: rotate(-45deg); }
.btn-close:hover { border-color: var(--vtx-gold); color: var(--vtx-gold); }

/* Τους διακόπτες συναίνεσης τους στυλίζει ΤΟ ΙΔΙΟ το inc/cookie_banner.php
   (έχει δικό του <style> με .switch/.slider). ΔΕΝ τους αγγίζουμε, οι δικοί μας
   κανόνες τους έκρυβαν. */

/* Newsletter, μία σειρά όταν χωράει, δύο όταν στενεύει */
.vtf__news { display: grid; gap: .5rem; }   /* μία στήλη: τίποτα δεν εξέχει */
.vtf__news input, .vtf__news button { width: 100%; }
.vtf__news button { justify-self: stretch; }


/* ═══ FOOTER ΣΤΟ ΚΙΝΗΤΟ ══════════════════════════════════════════════════
   Μία στήλη ⇒ κεντραρισμένο διαβάζεται καλύτερα από αριστερά στοιχισμένο. */
@media (max-width: 699px) {
  .vtf__inner { text-align: center; justify-items: center; }
  .vtf__logo img { margin-inline: auto; }
  .vtf__about { max-width: 42ch; margin-inline: auto; }
  .vtf__social { justify-content: center; }
  .vtf__news { max-width: 22rem; margin-inline: auto; width: 100%; }
  .vtf__bar-in { justify-content: center; text-align: center; }
  .vtf__legal { justify-content: center; width: 100%; }
  /* Χώρος ώστε το πλωτό εικονίδιο cookies να μην καβαλάει τα πνευματικά δικαιώματα */
  .vtf__bar-in { padding-bottom: 4.2rem; }
}

/* Το εικονίδιο cookies: δεξιά, μακριά από τους συνδέσμους του footer */
#cookie-icon {
  left: auto; right: 20px; bottom: 20px;
  /* Χωρίς αυτό ο περιέκτης απλωνόταν σε 750px (left του banner + το δικό μας right)
     και έπιανε τα κλικ σε ολόκληρο το κάτω μέρος της σελίδας. */
  width: max-content;
}
@media (max-width: 699px) { #cookie-icon { right: 14px; bottom: 14px; } }

/* Κλείσιμο συρταριού, ορατό μόνο όταν το συρτάρι είναι σε χρήση */
.vtx__close { display: none; }
@media (max-width: 1079px) {
  .vtx__close {
    display: grid; place-items: center;
    position: absolute; top: 12px; right: 12px;
    width: 44px; height: 44px; padding: 0;
    background: none; border: 1px solid var(--vtx-hair); border-radius: 50%;
    color: var(--vtx-cream); cursor: pointer;
  }
  .vtx__close svg { width: 20px; height: 20px; }
  .vtx__close:hover { border-color: var(--vtx-gold); color: var(--vtx-gold); }
  .vtx__nav { position: fixed; }   /* ώστε το absolute του × να πατά στο συρτάρι */
}

/* ═══ ΕΞΑΡΤΗΣΕΙΣ ΤΟΥ COOKIE BANNER ═══════════════════════════════════════
   Το inc/cookie_banner.php έχει δικό του <style> που στηρίζεται σε δύο
   πράγματα τα οποία ΔΕΝ φορτώνουμε πια:

     1. τις μεταβλητές --vt-* του css/bill.css
        → χωρίς αυτές το `input:checked + .slider` δεν είχε χρώμα και
          ΔΕΝ φαινόταν ποια επιλογή έχει κάνει ο χρήστης.
     2. τα εικονίδια του css/font-icons.css (icon-cookie-bite, -check, -times)
        → το πλωτό κουμπί έβγαινε άδειος κύκλος.

   Τα δίνουμε εδώ, χωρίς να αγγίξουμε το κοινό αρχείο. */
:root {
  --vt-dark-blue:   #1E2D40;
  --vt-light-blue:  #3B4B59;
  --vt-dark-brown:  #A6977B;
  --vt-light-brown: #D9BD89;
  --vt-yellow:      #F2ECCE;
}

/* Εικονίδια ως inline SVG mask, παίρνουν χρώμα από το currentColor */
.icon-cookie-bite, .icon-check, .icon-times {
  display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.icon-cookie-bite {
  -webkit-mask-image: var(--ic-cookie); mask-image: var(--ic-cookie);
}
.icon-check { -webkit-mask-image: var(--ic-check); mask-image: var(--ic-check); }
.icon-times { -webkit-mask-image: var(--ic-times); mask-image: var(--ic-times); }
:root {
  /* viewBox ΣΦΙΧΤΟ στο σχήμα (μετρημένο bbox: 2.19 3.32 19.6 19.6).
     Με το προηγούμενο '0 0 24 24' το μπισκότο καθόταν 1.12 μονάδες χαμηλότερα
     από το κέντρο, στα 38px φαινόταν ~1.8px εκτός κέντρου. */
  --ic-cookie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.19 3.32 19.6 19.6'%3E%3Cpath fill='%23000' d='M21.6 11.2a3.2 3.2 0 0 1-3.3-3.9 3.2 3.2 0 0 1-3.6-3.6A9.8 9.8 0 1 0 21.6 11.2zM8 8.5a1.3 1.3 0 1 1 0 2.6 1.3 1.3 0 0 1 0-2.6zm.9 8.2a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6zm5.6.9a1.6 1.6 0 1 1 0-3.2 1.6 1.6 0 0 1 0 3.2zm.6-6.4a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6z'/%3E%3C/svg%3E");
  --ic-check:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.5 17.2 4.3 12l1.6-1.6 3.6 3.6 8.6-8.6L19.7 7z'/%3E%3C/svg%3E");
  --ic-times:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18.3 7.1 16.9 5.7 12 10.6 7.1 5.7 5.7 7.1l4.9 4.9-4.9 4.9 1.4 1.4 4.9-4.9 4.9 4.9 1.4-1.4-4.9-4.9z'/%3E%3C/svg%3E");
}
/* Μόνο το κεντράρισμα του εικονιδίου μέσα στο κουμπί, τα χρώματα και το
   μέγεθος του κύκλου παραμένουν του banner. */
#cookie-icon .btn { display: grid; place-items: center; line-height: 1; }
/* Με σφιχτό viewBox, το πλαίσιο ΕΙΝΑΙ το οπτικό μέγεθος: 30px σε κύκλο 50px = 60%. */
#cookie-icon .btn .icon-cookie-bite { width: 30px; height: 30px; }

/* Κουμπιά του banner/modal, οι κλάσεις btn-booking-light-brown και
   btn-outline-brown ζούσαν στο css/bill.css. Εδώ, στο ύφος του site. */
#cookie-banner .btn, .modal .btn {
  font-family: var(--vtx-font); font-size: 15px; line-height: 1.2;
  cursor: pointer; white-space: nowrap;
  padding: .68rem 1.3rem; border-radius: 4px;
  border: 1px solid var(--vt-dark-brown);
  background: transparent; color: var(--vtx-cream);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
#cookie-banner .btn:hover, .modal .btn:hover {
  background: var(--vt-dark-brown); color: var(--vt-dark-blue);
}
/* Η κύρια ενέργεια ξεχωρίζει */
#cookie-banner .btn-booking-light-brown, .modal .btn-booking-light-brown {
  background: var(--vt-dark-brown); color: var(--vt-dark-blue); font-weight: 700;
}
#cookie-banner .btn-booking-light-brown:hover, .modal .btn-booking-light-brown:hover {
  background: var(--vt-light-brown); color: var(--vt-dark-blue);
}
.modal .btn.hidden { display: none !important; }
.modal-footer { gap: .6rem; }

/* Το modal στο κινητό: γεμίζει την οθόνη με περιθώριο, χωρίς να ξεφεύγει */
@media (max-width: 640px) {
  .modal-dialog { margin: 2vh auto; padding-inline: 12px; }
  .modal-dialog-centered { min-height: 96vh; }
  .modal-content { max-height: 94vh; }
  .modal-header, .modal-footer { padding: .9rem 1.1rem; }
  .modal-body { padding: 1rem 1.1rem; }
  .modal-title { font-size: 1.15rem; }
  .modal-footer { justify-content: stretch; }
  .modal-footer .btn { flex: 1 1 8rem; }
}

/* Η ΑΝΕΝΕΡΓΗ θέση του διακόπτη ήταν rgba(255,255,255,.15), πάνω σε #1E2D40
   είναι σχεδόν αόρατη, οπότε δεν φαινόταν καν ότι υπάρχει διακόπτης.
   Της δίνουμε ορατό περίγραμμα ώστε να διαβάζονται και οι δύο καταστάσεις. */
#consent-form .slider {
  background-color: rgba(242, 236, 206, .10);
  border: 1px solid rgba(242, 236, 206, .30);
}
#consent-form input:checked + .slider {
  background-color: var(--vt-dark-brown);
  border-color: var(--vt-light-brown);
}

/* ═══ ΛΩΡΙΔΑ ΑΝΑΚΟΙΝΩΣΕΩΝ ════════════════════════════════════════════════ */
/* ΠΡΟΣΟΧΗ: χωρίς border-box το πλάτος γινόταν 1320+padding = 1400 και η λωρίδα
   ξέφευγε 40px αριστερά από το header. */
.vta, .vta *, .vta *::before, .vta *::after { box-sizing: border-box; }
.vta {
  background: var(--vtx-deep);
  border-bottom: 1px solid var(--vtx-hair);
  font-family: var(--vtx-font);
  overflow: hidden;
}
.vta__inner {
  max-width: 1320px; margin-inline: auto;
  padding: 0 var(--vtx-pad);
  display: flex; align-items: center; gap: .7rem;
  height: 40px;
}
/* Παλμός «ζωντανού», διακριτικός */
.vta__dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--vtx-gold);
  box-shadow: 0 0 0 0 rgba(217, 189, 137, .55);
  animation: vtaPulse 2.6s ease-out infinite;
}
@keyframes vtaPulse {
  0%   { box-shadow: 0 0 0 0 rgba(217, 189, 137, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(217, 189, 137, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 189, 137, 0); }
}
.vta__list { position: relative; flex: 1; min-width: 0; height: 100%; }
.vta__item {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  opacity: 0; visibility: hidden;
  transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease, visibility .45s;
}
.vta__item.is-on { opacity: 1; visibility: visible; transform: none; }
.vta__item a {
  display: flex; align-items: center; gap: .5rem;
  font-size: 14px; min-width: 0; max-width: 100%;
  /* Ίδια ιεραρχία με τα ζώδια: light-brown σε ηρεμία, yellow στο hover. */
  color: var(--vtx-gold);
  transition: color .15s ease;
}
.vta__item a:hover { color: var(--vtx-cream); }
.vta__item b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vta__sep { opacity: .45; flex: none; }
.vta__note { color: inherit; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vta__item.is-hot .vta__note { opacity: 1; font-weight: 700; }
.vta__arrow { flex: none; width: 15px; height: 10px; opacity: .6; transition: transform .18s ease; }
.vta__item a:hover .vta__arrow { transform: translateX(3px); opacity: 1; }


@media (max-width: 640px) {
  .vta__inner { height: 38px; gap: .5rem; }
  .vta__item a { font-size: 13px; gap: .35rem; }
  .vta__item b { max-width: 44%; }
  .vta__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vta__dot { animation: none; }
  .vta__item { transition: none; }
}

/* ═══ Ο ΗΛΙΟΣ ΣΤΟ ΖΩΔΙΟ ΤΗΣ ΕΠΟΧΗΣ ═══════════════════════════════════════
   Το σύμβολο μπαίνει σε γεμάτο κύκλο με ΑΝΤΙΣΤΡΟΦΑ χρώματα, φόντο light-brown,
   σύμβολο σκούρο μπλε. Ξεχωρίζει αμέσως χωρίς να μοιάζει με σφάλμα, και
   παραπέμπει στον δίσκο του Ήλιου. Όταν φαίνεται και η λέξη, ο κύκλος περιβάλλει
   ΜΟΝΟ το σύμβολο· η λέξη μένει όπως των υπολοίπων. */
.vtx__sign--sun svg {
  box-sizing: content-box;
  background: var(--vtx-gold);
  color: var(--vtx-navy);
  border-radius: 50%;
  padding: 5px;
  transition: background-color .15s ease, color .15s ease;
}
.vtx__sign--sun:hover svg { background: var(--vtx-cream); }
@media (max-width: 1199px) { .vtx__sign--sun svg { padding: 6px; } }
@media (prefers-reduced-motion: reduce) { .vtx__sign--sun svg { transition: none; } }

/* Η λωρίδα ανακοινώσεων χωρίς υπογράμμιση */
.vta a { text-decoration: none; }

/* Λωρίδα: πλήρες κείμενο σε πλάτος, σύντομο σε στενές οθόνες.
   Μετρημένο: η πλήρης φράση θέλει ~436px· στα 390px υπάρχουν ~343px. */
.vta__mini { display: none; }
@media (max-width: 720px) {
  .vta__full { display: none; }
  .vta__mini { display: inline; }
  .vta__item b { max-width: none; }
}

/* Ομάδες μέσα στο υπομενού.
   Τα μαθήματα μπαίνουν σε ΕΣΟΧΗ ώστε η επικεφαλίδα να διαβάζεται ως κατηγορία.
   Χωρίς αυτήν, επικεφαλίδες και τίτλοι ξεκινούσαν από την ίδια αριστερή άκρη
   και όλα έμοιαζαν με μία επίπεδη στήλη. */
/* ΔΥΟ ΣΤΗΛΕΣ. Μετρημένο: με μεγαλύτερα γράμματα και μία ακόμη κατηγορία
   (Ιατρική, 2027) το μονόστηλο φτάνει 719px, δεν χωρά σε laptop 13". Σε δύο
   στήλες πέφτει στα ~400px και σηκώνει άλλες 4-5 προσθήκες. */
/* ΔΥΟ ΣΤΗΛΕΣ: ΜΟΝΟ σε desktop.
   Αν το `display: grid` δηλωθεί χωρίς media query, ισχύει και στο κινητό, όπου
   νικά το `.vtx__panel { display: none }` (ίδια ειδικότητα, έρχεται αργότερα)
   και το υπομενού μένει μόνιμα ανοιχτό. Στο κινητό η ορατότητα ελέγχεται
   αποκλειστικά από το `.vtx__item.open`. */
@media (min-width: 1080px) {
  .vtx__panel--grouped {
    /* 2 στήλες × (τίτλος ~270px + σήμανση ~95px) + εσοχές. Στα 720px οι τίτλοι
       τυλίγονταν σε τρεις σειρές. Το min() το κρατά μέσα στην οθόνη. */
    width: min(880px, calc(100vw - 90px));
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
    align-content: start;
  }
}
.vtx__grp { break-inside: avoid; }
.vtx__group {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  margin: 1rem .8rem .35rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--vtx-hair);
}
.vtx__panel--grouped > .vtx__group:first-child { margin-top: .35rem; }
/* Η εσοχή: τα στοιχεία μετατοπίζονται δεξιά ως προς την επικεφαλίδα */
.vtx__panel--grouped ul { padding-left: .85rem; border-left: 1px solid var(--vtx-hair); margin-left: 1rem; }
.vtx__panel--grouped ul a { padding-inline: .6rem; }
/* Η κατηγορία ΔΕΝ είναι προορισμός, είναι ετικέτα. Πρέπει να υποχωρεί.
   Το χρυσό της κατηγορίας και το καφέ των περιγραφών ήταν στην ίδια χρωματική
   οικογένεια και μπερδεύονταν. Τις χωρίζουμε σε ΤΟΝΟ: η κατηγορία ουδέτερη
   και αχνή, οι περιγραφές ζεστό καφέ. */
.vtx__group span {
  font-size: 11.5px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(242, 236, 206, .48);
}
/* Οι φράσεις κατηγορίας αποσύρθηκαν: άλλες επικεφαλίδες γίνονταν μία σειρά και
   άλλες δύο, οπότε οι δύο στήλες δεν ξεκινούσαν στο ίδιο ύψος. */
.vtx__group em { display: none; }
.vtx__panel--grouped ul + .vtx__group { margin-top: .7rem; }
@media (max-width: 1079px) {
  .vtx__panel--grouped { width: auto; }
  .vtx__group { margin: .8rem var(--vtx-pad) .2rem; }
}

/* Σύνδεσμος προς τον πλήρη κατάλογο, καλύπτει και τις δύο στήλες */
/* ΠΡΟΣΩΡΙΝΑ ΚΡΥΜΜΕΝΟΣ: ο κατάλογος δεν είναι έτοιμος για δημοσίευση.
   Βγάλε το display:none όταν το mathimata-astrologias.php γίνει δημόσιο. */
.vtx__all { display: none; }
.vtx__all--on {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  margin: .6rem .4rem .2rem; padding: .7rem;
  border-top: 1px solid var(--vtx-hair);
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--vtx-gold);
}
.vtx__all svg { width: 15px; height: 10px; transition: transform .18s ease; }
.vtx__all:hover { color: var(--vtx-cream); }
.vtx__all:hover svg { transform: translateX(3px); }
@media (max-width: 1079px) {
  /* ΜΗΝ γράψεις εδώ display:block, έχει την ίδια ειδικότητα με το
     `.vtx__panel { display:none }` και, ερχόμενο αργότερα, κρατούσε το
     υπομενού ΜΟΝΙΜΑ ανοιχτό στο κινητό. Την ορατότητα την ελέγχει ΜΟΝΟ
     το `.vtx__item.open > .vtx__panel`. */
  .vtx__panel--grouped { width: auto; }
  .vtx__all { margin-inline: var(--vtx-pad); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ΤΟ ΖΩΔΙΟ ΤΟΥ ΗΛΙΟΥ, ΔΙΑΚΡΙΤΙΚΑ
   ---------------------------------------------------------------------------
   ΙΣΤΟΡΙΚΟ, για να μην ξαναχτιστεί: εδώ υπήρξε «χάρακας εκλειπτικής», δύο
   σειρές δοντακιών ανά 5°/10°/30° με τον Ήλιο και τη Σελήνη στη μοίρα τους.
   Δούλευε σωστά (σφάλμα ≤0,01°) αλλά ΦΟΡΤΩΝΕ τη σελίδα: μαζί με τη λωρίδα
   ανακοινώσεων και το μενού, η κεφαλίδα είχε τέσσερις ζώνες που μιλούσαν
   ταυτόχρονα. Αφαιρέθηκε συνειδητά. Οι θέσεις των φώτων λέγονται πλέον ΜΟΝΟ
   με λέξεις, στη λωρίδα (δες inc/vt/announce.php).

   Ο υπολογισμός (inc/vt/sky.php) ΠΑΡΑΜΕΝΕΙ: τον χρησιμοποιούν η λωρίδα και η
   άγκυρα του ζωδίου παρακάτω.

   ΤΙ ΜΕΝΕΙ ΕΔΩ: το ζώδιο όπου βρίσκεται ο Ήλιος φωτίζει σε yellow. Τίποτε
   άλλο, ούτε πλαίσιο, ούτε δίσκος.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Σε πλάτος, η λωρίδα ανακοινώσεων λέει ήδη «18° Παρθένου» με λέξεις, οπότε
   ο γεμάτος δίσκος γύρω από το σύμβολο ήταν η τρίτη φορά που λεγόταν το ίδιο.
   ΚΑΤΩ από 1080px η λωρίδα δεν δείχνει θέσεις, εκεί ο δίσκος ΠΑΡΑΜΕΝΕΙ,
   γιατί είναι το μόνο που δείχνει πού είναι ο Ήλιος. */
@media (min-width: 1080px) {
  .vtx__sign--sun svg { background: none; color: inherit; padding: 0; }
  .vtx__sign--sun     { color: var(--vtx-cream); }
}

/* ΣΕΙΡΑ ΖΩΓΡΑΦΙΣΜΑΤΟΣ: η κύρια σειρά πρέπει να είναι ΠΑΝΩ από τη σειρά των
   ζωδίων, αλλιώς η δεύτερη σκεπάζει τα ανοιχτά υπομενού, που βγαίνουν από
   την πρώτη. Χωρίς ρητό z-index κερδίζει ο τελευταίος τοποθετημένος αδελφός,
   δηλαδή λάθος. Μετρήθηκε: το πλαίσιο των Μαθημάτων κοβόταν στα 54px. */
.vtx__main   { position: relative; z-index: 2; }
.vtx__zodiac { position: relative; z-index: 1; }

/* ═══ ΤΟ ΖΩΔΙΟ ΠΟΥ ΠΡΟΣΓΕΙΩΝΕΤΑΙ ΔΙΠΛΑ ΣΤΟ ΛΟΓΟΤΥΠΟ ════════════════════════
   Καθώς η σειρά των ζωδίων μαζεύεται, το τρέχον ζώδιο του Ήλιου δεν χάνεται:
   μπαίνει δίπλα στο λογότυπο. Δεν εμφανίζεται απότομα, μπαίνει από αριστερά
   με μικρή καθυστέρηση, όσο να προλάβει να κλείσει η σειρά από κάτω. */
.vtx__dock {
  display: flex; align-items: center; gap: .4rem;
  margin-left: .55rem; margin-right: auto; padding: .25rem .1rem;
  color: var(--vtx-gold);
  font-size: 13px; letter-spacing: .02em; white-space: nowrap;
  /* Κλειστό: μηδενικό πλάτος, ώστε να μην πιάνει χώρο όταν δεν φαίνεται.
     ΤΟ visibility ΔΕΝ ΕΙΝΑΙ ΔΙΑΚΟΣΜΗΤΙΚΟ. Με σκέτο opacity: 0 ο σύνδεσμος
     παρέμενε στη σειρά του Tab: μετρήθηκε ότι όποιος πλοηγείται με πληκτρολόγιο
     σταματούσε σε αόρατο στοιχείο και δεν έβλεπε πού βρίσκεται η εστίαση.
     Το visibility: hidden τον βγάζει από τη σειρά, και επειδή είναι ιδιότητα με
     διακριτά βήματα, αλλάζει στο ΤΕΛΟΣ της μετάβασης όταν κλείνει και ΑΜΕΣΩΣ
     όταν ανοίγει, οπότε η κίνηση μένει ίδια. */
  max-width: 0; opacity: 0; overflow: hidden; visibility: hidden;
  transform: translateX(-8px);
  /* ΤΟ ΠΛΑΤΟΣ ΑΝΟΙΓΕΙ ΑΚΑΡΙΑΙΑ, ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΓΛΙΣΤΡΑΕΙ.
     ΓΙΑΤΙ: το max-width είναι ιδιότητα ΔΙΑΤΑΞΗΣ. Με transition, ο browser
     ξαναϋπολογίζει τη θέση όλης της σειράς σε ΚΑΘΕ καρέ, και η σειρά αυτή
     περιέχει το λογότυπο και το μενού. Ταυτόχρονα άλλαζε το ύψος της ίδιας
     σειράς και μαζευόταν η λωρίδα από κάτω: τρεις αναδιατάξεις μαζί, πάνω σε
     sticky κεφαλίδα, ενώ ο επισκέπτης σκρολάρει. Σε υπολογιστή περνά
     απαρατήρητο, σε κινητό τρεμοπαίζει.
     Τώρα ο χώρος ανοίγει με ΜΙΑ αναδιάταξη και η κίνηση γίνεται με transform
     και opacity, που τις χειρίζεται ο compositor χωρίς να ξαναμετρήσει τίποτε. */
  transition: opacity .2s ease .26s,
              transform .26s cubic-bezier(.22,.8,.3,1) .26s,
              visibility 0s linear .46s,
              color .14s ease;
}
.vtx.is-scrolled .vtx__dock {
  max-width: 190px; opacity: 1; transform: none; visibility: visible;
  /* ΣΕΙΡΙΑΚΑ, ΟΧΙ ΤΑΥΤΟΧΡΟΝΑ: η άγκυρα ξεκινά στα 260ms, δηλαδή ΑΦΟΥ έχει
     τελειώσει το μάζεμα της λωρίδας (240ms). Έτσι κάθε στιγμή τρέχει μία
     αλλαγή διάταξης, όχι τρεις. */
  transition: opacity .2s ease .26s,
              transform .26s cubic-bezier(.22,.8,.3,1) .26s,
              visibility 0s linear .26s,
              color .14s ease;
}
.vtx__dock:hover { color: var(--vtx-cream); }
.vtx__dock-g { display: flex; }
.vtx__dock-g svg { width: 17px; height: 17px; display: block; }
.vtx__dock-t { font-variant-numeric: tabular-nums; }

/* ΠΟΥ ΧΩΡΑΕΙ Η ΑΓΚΥΡΑ: μετρημένο, όχι υποθετικό:
     ≥1300px  πλήρης (σύμβολο + «18° Παρθένου»), 111px· το μενού ξεκινά 16px μετά.
     1080-1299 ΚΑΘΟΛΟΥ· στα 1200 η άγκυρα στριμωχνόταν στα 40px και το κείμενο
              κοβόταν στη μέση.
     ≤1079    μόνο το σύμβολο, 20px· εκεί υπάρχει το χάμπουργκερ και άφθονος χώρος. */
@media (min-width: 1080px) and (max-width: 1299px) {
  .vtx__dock { display: none; }
  .vtx__logo { margin-right: auto; }   /* η άγκυρα λείπει· το κενό το ανοίγει πάλι το λογότυπο */
}
@media (max-width: 1079px) { .vtx__dock-t { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .vtx__dock { transition: none; }
}

/* ═══ Ο ΟΥΡΑΝΟΣ ΜΕΣΑ ΣΤΗ ΛΩΡΙΔΑ ══════════════════════════════════════════
   Δεξιά στοίχιση στον υπολογιστή· σε στενές οθόνες δεν χωρά δίπλα στις
   ανακοινώσεις και αποσύρεται, εκτός αν είναι το μόνο περιεχόμενο. */
.vta__sky {
  display: none;
  margin: 0 0 0 auto; padding-left: 1.2rem;
  flex: none; align-items: center; gap: .55rem;
  font-size: 13px; color: var(--vtx-gold);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.vta__body { display: inline-flex; align-items: center; gap: .38rem; }
.vta__sun-g  { width: 13px; height: 13px; flex: none; opacity: .95; }
.vta__moon-g { width: 13px; height: 13px; flex: none; overflow: visible; }

/* Τα δύο μέρη του μισοφέγγαρου, ίδια σε λωρίδα και χάρακα.
   Ο κύκλος πρέπει να διαβάζεται ΚΑΙ στη νέα σελήνη, όταν δεν υπάρχει καθόλου
   φωτισμένο μέρος: τότε είναι το μόνο που φαίνεται. Με opacity .32 έμοιαζε
   με μουτζούρα, δοκιμάστηκε σήμερα, που η σύνοδος είναι ακριβώς σήμερα. */
.vt-moon-disc { fill: none; stroke: currentColor; stroke-width: 1.35; opacity: .95; }
.vt-moon-lit  { fill: currentColor; }

@media (min-width: 1080px) { .vta__sky { display: flex; } }

/* ΜΟΝΟΣ ΤΟΥ: όταν δεν τρέχει τμήμα, ο ουρανός παίρνει τη θέση των
   ανακοινώσεων, αριστερά, δίπλα στην κουκκίδα, και ορατός παντού. */
.vta__inner > .vta__sky--solo {
  display: flex; margin-left: 0; padding-left: 0;
  color: var(--vtx-gold);
}
@media (max-width: 420px) {
  .vta__inner > .vta__sky--solo { font-size: 12px; gap: .4rem; }
}

/* ═══ ΤΟ ΠΛΑΤΥ ΥΠΟΜΕΝΟΥ ΝΑ ΜΗΝ ΒΓΑΙΝΕΙ ΑΠΟ ΤΗΝ ΟΘΟΝΗ ════════════════════════
   ΜΕΤΡΗΜΕΝΟ ΣΦΑΛΜΑ (προϋπήρχε): το πλαίσιο των Μαθημάτων είναι 880px και
   ξεκινούσε από την άκρη του συνδέσμου «ΜΑΘΗΜΑΤΑ». Κάτω από 1300px η δεξιά
   του στήλη έβγαινε έξω από την οθόνη, στα 1200px κοβόταν κατά 20px και
   εμφανιζόταν οριζόντια μπάρα κύλισης σε ΟΛΗ τη σελίδα.
   Το width: min(880px, 100vw − 90px) περιόριζε το ΠΛΑΤΟΣ αλλά όχι τη ΘΕΣΗ.

   ΔΙΟΡΘΩΣΗ: για ΑΥΤΟ μόνο το υπομενού, σημείο αναφοράς γίνεται η σειρά του
   header αντί για το στοιχείο του μενού, και αγκιστρώνεται στη δεξιά της άκρη, εκεί όπου βρίσκεται ήδη η πλοήγηση. Τα υπόλοιπα υπομενού δεν αλλάζουν. */
@media (min-width: 1080px) {
  /* Σημείο αναφοράς η ΛΙΣΤΑ του μενού, όχι η σειρά του header.
     ΓΙΑΤΙ ΟΧΙ Η ΣΕΙΡΑ: τα υπόλοιπα υπομενού κρέμονται από το δικό τους <li>,
     που είναι κεντραρισμένο μέσα στη σειρά, δηλαδή τελειώνει 20,7px ψηλότερα
     από τη σειρά. Με αναφορά τη σειρά, το πλαίσιο των Μαθημάτων έπεφτε τόσο
     πιο χαμηλά από τα άλλα (μετρήθηκε: 117,0 έναντι 96,3).
     Η <ul> έχει ΑΚΡΙΒΩΣ το ίδιο ύψος με τα <li> της, οπότε το top: 100%
     δίνει το ίδιο ύψος με όλα τα υπόλοιπα, και η δεξιά της άκρη είναι η άκρη
     του περιεχομένου, που κρατά το πλατύ πλαίσιο μέσα στην οθόνη. */
  .vtx__list { position: relative; }
  .vtx__item:has(> .vtx__panel--grouped) { position: static; }
  .vtx__panel--grouped { left: auto; right: 0; }
}
/* Όταν ο ουρανός είναι μόνος του χρειάζεται εισαγωγή, αλλιώς δύο αριθμοί
   στην άκρη μιας άδειας λωρίδας μοιάζουν με υπόλειμμα. */
.vta__sky-l { font-weight: 700; color: var(--vtx-cream); }
@media (max-width: 480px) { .vta__sky-l { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   ΜΕΤΑΒΑΣΕΙΣ ΜΕΤΑΞΥ ΣΕΛΙΔΩΝ  (View Transitions)
   ---------------------------------------------------------------------------
   ΤΙ ΑΛΛΑΖΕΙ: σήμερα, σε κάθε κλικ ο browser πετάει ολόκληρη τη σελίδα και
   ξαναζωγραφίζει από το μηδέν, γι' αυτό το header «αναβοσβήνει». Με τις
   δηλώσεις που ακολουθούν κρατά την παλιά εικόνα, τη σβήνει απαλά μέσα στη
   νέα, και ΤΟ ΚΕΛΥΦΟΣ ΜΕΝΕΙ ΑΚΙΝΗΤΟ.

   ΠΩΣ: το κάθε κομμάτι που πρέπει να «επιζήσει» παίρνει όνομα. Ο,τι έχει
   όνομα φωτογραφίζεται ξεχωριστά και μεταμορφώνεται από την παλιά θέση στη
   νέα· επειδή header, λωρίδα και footer είναι ίδια, φαίνονται ακίνητα.
   Ό,τι δεν έχει όνομα ανήκει στο «root» και κάνει διασταύρωση.

   ΤΟ ΟΝΟΜΑ ΠΡΕΠΕΙ ΝΑ ΕΙΝΑΙ ΜΟΝΑΔΙΚΟ στη σελίδα. Αν δύο στοιχεία πάρουν το
   ίδιο, ο browser ΑΚΥΡΩΝΕΙ σιωπηλά ολόκληρη τη μετάβαση.

   ΣΥΜΒΑΤΟΤΗΤΑ: Chrome/Edge και Safari 18+. Όπου δεν υποστηρίζεται, απλώς δεν
   συμβαίνει τίποτα, καμία απώλεια, κανένα σφάλμα. Ισχύει μόνο για πλοήγηση
   στο ΙΔΙΟ site· η φόρμα της Viva φεύγει σε άλλον τομέα και δεν την αγγίζει.
   ═══════════════════════════════════════════════════════════════════════════ */
@view-transition { navigation: auto; }

.vta { view-transition-name: vt-strip; }
.vtx { view-transition-name: vt-header; }
.vtf { view-transition-name: vt-footer; }

/* Γρήγορο και ήσυχο. Το περιεχόμενο μπαίνει λίγο πιο αργά απ' όσο βγαίνει το
   προηγούμενο, ώστε να μην υπάρχει στιγμή που φαίνονται και τα δύο. */
::view-transition-old(root) { animation-duration: .14s; }
::view-transition-new(root) { animation-duration: .22s; }
::view-transition-group(vt-header),
::view-transition-group(vt-strip),
::view-transition-group(vt-footer) { animation-duration: .2s; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

}