/* ==========================================================================
   ATHENS HALLOWEEN FESTIVAL — athenshalloweenfest.gr · Design System v1 (2026)
   Ύφος: dark gothic + neon πορτοκαλί. Τα χρώματα βγαίνουν από το νέο λογότυπο
   2026 (Παρθενώνας μέσα σε κολοκύθα) ώστε site και έντυπο να μιλάνε ίδια γλώσσα.

   Structure: 1 Tokens · 2 Reset · 3 Type · 4 Layout · 5 Buttons · 6 Cards
              7 Header · 8 Hero · 9 Sections · 10 Program · 11 Forms
              12 Footer · 13 Utils · 14 Motion · 15 Responsive
              16 FX (πύλη, σκηνικό, στάχτες, δάδα, marquee, σταγόνες)
              17 Εσωτερικές σελίδες (page-hero, φίλτρα, φόρμες, γκαλερί, άρθρο)

   ΠΡΟΣΟΧΗ στο port σε WordPress: αυτό το αρχείο μένει εδώ (assets/css/style.css)
   και φορτώνεται με wp_enqueue_style. Το style.css του theme κρατά μόνο το header.
   ========================================================================== */

/* 0) ΓΡΑΜΜΑΤΟΣΕΙΡΕΣ ---------------------------------------------------------
   Φιλοξενούνται ΤΟΠΙΚΑ, όχι από το Google Fonts. Δύο λόγοι:

   1) GDPR. Το fonts.gstatic.com βλέπει την IP κάθε επισκέπτη. Γερμανικό
      δικαστήριο (LG München, 2022) το έκρινε παράβαση. Ίδια λογική με
      το AMVROSIA — μηδέν αιτήματα σε τρίτους.
   2) Ταχύτητα. Φεύγουν δύο DNS + TLS handshakes πριν καν ζητηθεί το αρχείο.

   ΑΛΛΑΓΗ ΟΥΣΙΑΣ: το Playfair Display ΔΕΝ έχει ελληνικά glyphs. Όλοι οι
   ελληνικοί τίτλοι έπεφταν σιωπηλά σε system serif (Times/Georgia) — δηλαδή
   το μισό site δεν έδειχνε ποτέ τη γραμματοσειρά που νομίζαμε. Μπήκε το
   Noto Serif Display: ίδια didone αίσθηση, 9 βάρη, ελληνικά + λατινικά.

   Τα unicode-range κόβουν το κατέβασμα ανά αλφάβητο: ελληνική σελίδα δεν
   φορτώνει latin-ext, αγγλική δεν φορτώνει greek.

   ΣΤΟ PORT: ο φάκελος assets/fonts/ πάει αυτούσιος στο theme και αυτό το
   μπλοκ μένει ως έχει — απλώς το ../fonts/ δείχνει ήδη σωστά.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/manrope-greek-400-normal.woff2") format("woff2");
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/manrope-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/manrope-greek-600-normal.woff2") format("woff2");
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/manrope-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/manrope-greek-700-normal.woff2") format("woff2");
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/manrope-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/manrope-greek-800-normal.woff2") format("woff2");
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext-800-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Noto Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/noto-serif-display-greek-400-italic.woff2") format("woff2");
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: "Noto Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/noto-serif-display-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Noto Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/noto-serif-display-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Noto Serif Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/noto-serif-display-greek-700-normal.woff2") format("woff2");
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: "Noto Serif Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/noto-serif-display-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Noto Serif Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/noto-serif-display-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Noto Serif Display";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/noto-serif-display-greek-800-normal.woff2") format("woff2");
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: "Noto Serif Display";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/noto-serif-display-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Noto Serif Display";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/noto-serif-display-latin-ext-800-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Noto Serif Display";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/noto-serif-display-greek-900-normal.woff2") format("woff2");
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: "Noto Serif Display";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/noto-serif-display-latin-900-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Noto Serif Display";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/noto-serif-display-latin-ext-900-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* 1) TOKENS ---------------------------------------------------------------- */
:root {
  /* Σκοτεινή ράμπα — η βάση όλου του site. Το --ink-950 είναι το «κενό» φόντο. */
  --ink-950: #050509;
  --ink-900: #0a0a12;
  --ink-850: #0f0e1a;
  --ink-800: #151325;
  --ink-700: #1e1a33;

  /* Μωβ — από το περίγραμμα του badge στο λογότυπο. Δίνει το «gothic». */
  --purple-950: #16062b;
  --purple-900: #230a42;
  --purple-800: #351060;
  --purple-700: #4d1889;
  --purple-600: #7b2fa8;  /* το μωβ του λογοτύπου */
  --purple-400: #a95fd6;
  --purple-300: #c99af0;

  /* Πορτοκαλί — το κύριο χρώμα της μάρκας. #ef6d00 μετρημένο από το logo.png. */
  --orange-700: #a44a00;
  --orange-600: #c85a00;
  --orange-500: #ef6d00;  /* 6.5:1 σε --ink-950 ✓ AA normal */
  --orange-400: #ff8a1f;  /* 8.9:1 ✓ AAA large */
  --orange-300: #ffa94d;
  --peach:      #ffc9a0;  /* 13.5:1 ✓ AAA — τα γράμματα ATHENS/FESTIVAL */

  /* Accents. Το τοξικό πράσινο ΜΟΝΟ για μικρά σήματα (π.χ. «Δωρεάν»), ποτέ σώμα. */
  --toxic:  #8bff3d;
  --blood:  #a5101f;
  --bone:   #ede6dc;

  /* Κείμενο */
  --text:  #ede6dc;   /* 15.9:1 σε --ink-950 ✓ AAA */
  --muted: #a99fb5;   /*  8.0:1 ✓ AAA — δευτερεύον κείμενο, όχι διακοσμητικό */
  --faint: #8b839c;   /*  5.6:1 ✓ AA — labels, breadcrumbs, μεταδεδομένα */
  --line:  rgba(169, 159, 181, .18);
  --line-strong: rgba(169, 159, 181, .34);

  /* Επιφάνειες με διαφάνεια: «κάθονται» πάνω στο φόντο χωρίς να το κόβουν. */
  --surface:      rgba(255, 255, 255, .035);
  --surface-2:    rgba(255, 255, 255, .06);
  --glass:        rgba(10, 10, 18, .72);
  --glass-line:   rgba(255, 255, 255, .10);

  /* Gradients */
  --grad-fire:  linear-gradient(120deg, #ff8a1f 0%, #ef6d00 45%, #a44a00 100%);
  --grad-night: linear-gradient(160deg, #230a42 0%, #0f0e1a 55%, #050509 100%);
  --grad-text:  linear-gradient(100deg, #ffc9a0 0%, #ff8a1f 45%, #a95fd6 100%);
  --grad-line:  linear-gradient(90deg, transparent, var(--orange-500), transparent);

  /* Τυπογραφία — δύο οικογένειες, και οι δύο με ελληνικό subset. */
  --font-display: "Noto Serif Display", "Georgia", "Times New Roman", serif;
  --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  /* Κλίμακα κειμένου με clamp ώστε να μη χρειάζονται media queries παντού. */
  --fs-xs:   .78rem;
  --fs-sm:   .89rem;
  --fs-base: 1rem;
  --fs-md:   clamp(1.05rem, .98rem + .3vw, 1.18rem);
  --fs-lg:   clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fs-xl:   clamp(1.6rem, 1.35rem + 1.1vw, 2.2rem);
  --fs-2xl:  clamp(2.1rem, 1.6rem + 2.2vw, 3.2rem);
  --fs-3xl:  clamp(2.8rem, 1.8rem + 4.4vw, 5.4rem);
  --fs-hero: clamp(2.4rem, min(4.35vw, 7.2vh), 5rem);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;
  --space-9: 112px;

  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .45);
  --shadow:    0 18px 50px rgba(0, 0, 0, .55);
  --shadow-lg: 0 40px 90px rgba(0, 0, 0, .7);
  --glow-orange: 0 0 32px rgba(239, 109, 0, .45);
  --glow-purple: 0 0 44px rgba(123, 47, 168, .42);

  --container: 1220px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --header-h: 76px;
  --topbar-h: 38px;

  --transition: .28s cubic-bezier(.4, 0, .2, 1);
  --bounce: .5s cubic-bezier(.34, 1.56, .64, 1);
}

/* 2) RESET ----------------------------------------------------------------- */
/* Το [hidden] πρέπει να νικάει ΚΑΘΕ display που βάζει ένα component. Χωρίς
   αυτό, ένα .field με display:flex αγνοεί το hidden και το στοιχείο μένει
   ορατό — κλασική παγίδα που εμφανίστηκε στη φόρμα του καλαθιού. */
[hidden] { display: none !important; }

/* Το <main> παίρνει tabindex="-1" για να δουλεύει ο skip-link. Δεν θέλουμε
   όμως περίγραμμα γύρω από ολόκληρη τη σελίδα όταν προσγειωθεί εκεί. */
#main:focus { outline: none; }

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

/* ΠΡΟΣΟΧΗ: κανένα overflow στο html. Το overflow-x: clip εδώ ακυρώνει το
   position:sticky του header (δοκιμάστηκε — το header ξεκολλάει). Το οριζόντιο
   ξεχείλισμα λύνεται στα ίδια τα στοιχεία, όχι με σφουγγάρισμα στη ρίζα. */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  background: var(--ink-950);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

::selection { background: var(--orange-500); color: #fff; }

/* Ορατό focus παντού — το site είναι σκοτεινό, το πορτοκαλί ξεχωρίζει καθαρά. */
:focus-visible {
  outline: 3px solid var(--orange-400);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 3) TYPOGRAPHY ------------------------------------------------------------ */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.02em;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { text-wrap: pretty; }
.lead { font-size: var(--fs-md); color: var(--muted); max-width: 62ch; }

/* Το «eyebrow» είναι το μικρό κεφαλαίο label πάνω από κάθε τίτλο ενότητας. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--orange-400);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--orange-500);
}

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 4) LAYOUT ---------------------------------------------------------------- */
.container {
  width: min(var(--container), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(3.5rem, 8vw, 7rem); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* Διακριτική μωβ «ομίχλη» στο πάνω μέρος μιας ενότητας, για ρυθμό. */
.section--haze::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 380px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(123, 47, 168, .22), transparent 70%);
  pointer-events: none;
}

.section__head { margin-bottom: var(--space-7); max-width: 70ch; }
.section__head h2 { margin-block: var(--space-3) var(--space-4); }

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* 5) BUTTONS --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: var(--fs-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform var(--transition), box-shadow var(--transition),
              background-color var(--transition), border-color var(--transition);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--grad-fire);
  color: #fff;
  box-shadow: var(--glow-orange);
}
.btn--primary:hover { box-shadow: 0 0 46px rgba(239, 109, 0, .65); }

.btn--ghost {
  border: 1.5px solid var(--line-strong);
  color: var(--text);
  background: var(--surface);
}
.btn--ghost:hover { border-color: var(--orange-400); color: var(--orange-300); }

.btn--sm { padding: 9px 18px; font-size: var(--fs-xs); }
.btn--lg { padding: 18px 34px; font-size: var(--fs-base); }

/* 6) CARDS & BADGES -------------------------------------------------------- */
.card {
  position: relative;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition),
              background-color var(--transition);
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(239, 109, 0, .45);
  background: var(--surface-2);
}
/* Το λαμπερό «χείλος» στην κορυφή εμφανίζεται μόνο στο hover — διακριτικά. */
.card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--grad-line);
  opacity: 0;
  transition: opacity var(--transition);
}
.card:hover::after { opacity: 1; }

.card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(239, 109, 0, .12);
  border: 1px solid rgba(239, 109, 0, .3);
  font-size: 1.6rem;
  margin-bottom: var(--space-4);
}
.card h3 { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.card p { color: var(--muted); font-size: var(--fs-sm); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  color: var(--muted);
}
.badge--free { color: var(--toxic); border-color: rgba(139, 255, 61, .4); background: rgba(139, 255, 61, .08); }
.badge--new  { color: var(--orange-300); border-color: rgba(239, 109, 0, .45); background: rgba(239, 109, 0, .1); }
/* Τιμή: γεμάτο πορτοκαλί ώστε να ξεχωρίζει από τα υπόλοιπα badge —
   είναι η μόνη πληροφορία της κάρτας που ψάχνει κανείς με τη ματιά. */
.badge--price { color: var(--ink-950); border-color: transparent; background: var(--orange-400); }
/* Ακυρωμένη δράση: γεμάτο κόκκινο με λευκά γράμματα (~7,8:1), γιατί είναι η
   πληροφορία που ΠΡΕΠΕΙ να δει όποιος είχε σχεδιάσει τη μέρα του γύρω της. */
.badge--cancelled { color: #fff; border-color: transparent; background: var(--blood); }

/* Τιμή στον πίνακα προπώλησης — δεξιά στοίχιση για να διαβάζονται
   κάθετα τα ποσά. */
.presale__price { font-weight: 800; color: var(--orange-400); white-space: nowrap; }

/* 7) HEADER ---------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--orange-500);
  color: #fff;
  font-weight: 800;
}
.skip-link:focus { left: 12px; top: 12px; }

.topbar {
  position: relative;
  z-index: 60;
  background: var(--purple-950);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--muted);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 38px;
  flex-wrap: wrap;
}
/* Τα μηνύματα στοιβάζονται στο ΙΔΙΟ κελί grid: η λωρίδα παίρνει το ύψος
   του μακρύτερου και δεν μετακινεί τίποτα όταν αλλάζει μήνυμα. Το ανενεργό
   κρύβεται με opacity, ΟΧΙ display/visibility: έτσι μένει στο δέντρο
   προσβασιμότητας και ο αναγνώστης οθόνης το διαβάζει κανονικά, μία φορά.
   Χωρίς JS (ή με λιγότερη κίνηση) φαίνεται μόνο το πρώτο — ο διαγωνισμός. */
.topbar__msgs { position: relative; display: grid; min-width: 0; overflow: hidden; }
/* Το overflow: hidden (για τη λάμψη) έκοβε το περίγραμμα εστίασης του
   συνδέσμου: το κουτί είχε ακριβώς το ύψος του κειμένου. 6px χώρος = 3px
   περίγραμμα + 3px απόσταση, με ίσο αρνητικό margin ώστε η διάταξη να
   μείνει ίδια στο pixel. */
.topbar__msgs { padding: 6px; margin: -6px; }
.topbar__msg {
  grid-area: 1 / 1;
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  letter-spacing: .06em;
  transition: opacity .15s ease;
}
.topbar__msg strong { color: var(--peach); font-weight: 800; }
.topbar__msg + .topbar__msg,
.topbar__msgs.is-rotating .topbar__msg { opacity: 0; pointer-events: none; }
/* Διαδοχικά, όχι ταυτόχρονα: το παλιό φεύγει σε 150ms και ΜΕΤΑ μπαίνει το
   νέο (250ms). Σε σκέτο crossfade τα δύο κείμενα πέφτουν το ένα πάνω στο
   άλλο και για μια στιγμή δεν διαβάζεται κανένα. Σύνολο 400ms. */
.topbar__msgs.is-rotating .topbar__msg.is-active { opacity: 1; pointer-events: auto; transition: opacity .25s ease .15s; }
.topbar__short { display: none; }
/* Όλο το μήνυμα του διαγωνισμού είναι ο σύνδεσμος. Διακριτική υπογράμμιση
   στο κύριο κείμενο, για να φαίνεται ότι πατιέται χωρίς βέλος που θα
   έτρωγε πλάτος (η λωρίδα μετρήθηκε ώστε να χωρά σε μία γραμμή). */
.topbar__link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  color: inherit;
  text-decoration: none;
}
.topbar__link strong {
  text-decoration: underline;
  text-decoration-color: rgba(255, 201, 160, .45);
  text-underline-offset: 3px;
}
.topbar__link:hover strong { text-decoration-color: currentColor; }

/* Η λάμψη της αλλαγής: μια λωρίδα πορτοκαλί φωτός που περνά μία φορά πάνω
   από το κείμενο, σαν ανάκλαση — όχι φλας. Χαμηλή διαφάνεια και screen, για
   να φωτίζει τα γράμματα χωρίς να ρίχνει ποτέ την αντίθεσή τους. */
.topbar__msgs::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Έλλειψη που σβήνει προς όλες τις άκρες: ένα γραμμικό gradient έδειχνε
     ορθογώνιο με κοφτό πάνω/κάτω όριο — κουτί, όχι ανάκλαση. */
  background: radial-gradient(ellipse 18% 70% at 50% 50%, rgba(255, 169, 77, .42), rgba(255, 169, 77, 0) 100%);
  mix-blend-mode: screen;
  transform: translateX(-30%);
  opacity: 0;
}
/* Ξεκινά 100ms μετά την αλλαγή, για να περάσει πάνω από το ΝΕΟ κείμενο
   καθώς εμφανίζεται — όχι πάνω από άδεια λωρίδα. Κινείται μόνο ±30%, ώστε
   η έλλειψη να μην κόβεται ποτέ στις άκρες του κουτιού· μπαίνει και βγαίνει
   με σβήσιμο. Σύνολο 550ms. */
.topbar__msgs.is-shine::after { animation: topbar-shine .45s ease-in-out .1s both; }
@keyframes topbar-shine {
  0%   { transform: translateX(-30%); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateX(30%);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar__msg { transition: none; }
  .topbar__msgs::after { display: none; }
}

.lang { display: inline-flex; gap: 2px; align-items: center; }
.lang a {
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  letter-spacing: .08em;
  /* ΟΧΙ --faint: στα 12px έδινε αντίθεση 3,62:1, κάτω από το 4,5:1 του
     WCAG AA. Το --muted δίνει 7,1:1 στο φόντο της λωρίδας. */
  color: var(--muted);
}
.lang a[aria-current="true"] { background: rgba(239, 109, 0, .16); color: var(--orange-300); }
.lang a:hover { color: var(--text); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), background-color var(--transition);
}
.site-header.is-stuck { border-bottom-color: var(--line); background: rgba(5, 5, 9, .9); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-h);
}
/* Η μπάρα χρειάζεται περισσότερο πλάτος από το κείμενο των σελίδων: σήμα +
   7 σύνδεσμοι + καλάθι + CTA δεν χωρούν στα 1220px του container. Το κείμενο
   ΔΕΝ πλαταίνει — μόνο το header. */
.site-header > .container { --container: 1380px; }
/* Το nav παίρνει ό,τι περισσεύει και σπρώχνει το CTA στη δεξιά άκρη. */
.site-header__inner > nav { flex: 1 1 auto; display: flex; justify-content: flex-end; min-width: 0; }

.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; padding-right: var(--space-5); }
.brand img { width: 46px; height: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__text b {
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: .01em;
  white-space: nowrap;
}
.brand__text span {
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--orange-400);
  font-weight: 800;
}

/* clamp στο gap: στα 1440 χωράνε άνετα, στα 1024 σφίγγουν αντί να σπάσουν σε δύο σειρές */
.nav-menu { display: flex; align-items: center; gap: clamp(12px, 1.25vw, 20px); }
.nav-menu > li { position: relative; }
.nav-menu a {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  padding-block: 8px;
  white-space: nowrap;
  transition: color var(--transition);
}
.nav-menu a:hover, .nav-menu a.is-active { color: var(--text); }
.nav-menu a.is-active { position: relative; }
.nav-menu a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--orange-500);
  border-radius: 2px;
}

/* Dropdown «Δραστηριότητες» — ανοίγει σε hover, σε focus (πληκτρολόγιο) και
   σε άγγιγμα (main.js §5, που προσθέτει .is-open).

   Ο ΓΟΝΕΑΣ ΕΙΝΑΙ <a>, ΟΧΙ <button>: πρέπει να δουλεύει χωρίς JavaScript και
   να τον βλέπουν οι μηχανές αναζήτησης. Το «Όλες» δείχνει στην ΙΔΙΑ σελίδα,
   οπότε κανένα μονοπάτι δεν χάνεται όταν σε touch το πρώτο πάτημα ανοίγει
   το υπομενού αντί να πλοηγεί. */
.has-sub > a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* Ενεργό και όταν είναι ενεργό ΠΑΙΔΙ του (π.χ. είμαστε στο «Για παιδιά»):
   αλλιώς η τρέχουσα ενότητα δεν φαίνεται πουθενά στη λωρίδα. */
.nav-menu .has-sub:has(.is-active) > a { color: var(--text); }
.has-sub.is-active > a { color: var(--text); position: relative; }
.has-sub.is-active > a::after {
  content: "";
  position: absolute;
  left: 0; right: 16px; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--orange-500);
}
.sub-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  translate: -50% 0;
  min-width: 260px;
  padding: var(--space-3);
  border-radius: var(--radius);
  background: rgba(15, 14, 26, .97);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  translate: -50% 8px;
  transition: opacity var(--transition), translate var(--transition), visibility var(--transition);
}
.has-sub:hover .sub-menu, .has-sub:focus-within .sub-menu, .has-sub.is-open .sub-menu {
  opacity: 1; visibility: visible; translate: -50% 0;
}
/* Το υπομενού δεν έχει δικό του padding-top· χωρίς γέφυρα, το ποντίκι το
   χάνει στο κενό των 12px καθώς κατεβαίνει. */
/* ΜΕΤΑ το hover/focus, ώστε να κερδίζει: το Esc κλείνει το υπομενού ΚΑΙ
   επιστρέφει την εστίαση στον γονέα — οπότε το :focus-within θα το ξανάνοιγε
   αμέσως. Το .is-closed το κρατά κλειστό όσο η εστίαση μένει εκεί (main.js §5
   το καθαρίζει μόλις φύγει το ποντίκι ή η εστίαση). */
.has-sub.is-closed .sub-menu { opacity: 0; visibility: hidden; translate: -50% 8px; }
.has-sub::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.has-sub:hover::after, .has-sub:focus-within::after { display: block; }
.sub-menu a { display: block; padding: 9px 12px; border-radius: 10px; }
.sub-menu a:hover { background: var(--surface-2); color: var(--orange-300); }

.nav-actions { display: flex; align-items: center; gap: var(--space-3); margin-left: var(--space-4); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  place-items: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle span::before { position: relative; top: -6px; }
.nav-toggle span::after { position: relative; top: 4px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* Mobile overlay */
/* Μενού κινητού.

   ΤΟ ΛΑΘΟΣ ΠΟΥ ΔΙΟΡΘΩΘΗΚΕ: το overlay σκέπαζε το header μαζί με το κουμπί
   που το είχε ανοίξει, και άφηνε από πάνω ένα κενό ύψους header. Ο χρήστης
   έβλεπε μαύρη λωρίδα και δεν είχε πουθενά να πατήσει για να κλείσει.
   Τώρα το μενού έχει δικό του Χ μέσα του, πάντα ορατό. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 210;               /* πάνω από header (200), κάτω από την πύλη (300) */
  display: none;
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(123, 47, 168, .22), transparent 60%),
    linear-gradient(180deg, #0c0618 0%, var(--ink-950) 55%);
  overflow: hidden;           /* κυλά μόνο η ζώνη των συνδέσμων */
}
.mobile-menu.is-open { display: grid; animation: menu-in .26s cubic-bezier(.2, .7, .3, 1) both; }

@keyframes menu-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

/* 1) Μπάρα: σήμα αριστερά, Χ δεξιά. Ίδιο ύψος με το header, ώστε το Χ να
      πέφτει ακριβώς εκεί που ήταν το χάμπουργκερ. */
.mobile-menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
  padding: max(8px, env(safe-area-inset-top)) var(--gutter) 8px;
  border-bottom: 1px solid var(--line);
}
.mobile-menu__bar .brand { padding-right: 0; }

.mobile-menu__close {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.mobile-menu__close:hover,
.mobile-menu__close:focus-visible { border-color: var(--orange-500); color: var(--orange-400); }
.mobile-menu__close:active { transform: scale(.94); }
.mobile-menu__close svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* 2) Οι σύνδεσμοι — η μόνη ζώνη που κυλά */
.mobile-menu__nav {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-4) var(--gutter);
}
.mobile-menu__nav a {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 800;
}
.mobile-menu__nav a:last-child { border-bottom: 0; }
.mobile-menu__nav a:hover,
.mobile-menu__nav a:focus-visible { color: var(--orange-400); }

/* 3) Πόδι: το CTA δεν κυλά ποτέ εκτός οθόνης */
.mobile-menu__foot {
  display: grid;
  gap: var(--space-4);
  justify-items: stretch;
  padding: var(--space-5) var(--gutter) calc(var(--space-5) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, .35);
}
.mobile-menu__foot .btn { justify-content: center; }
.mobile-menu__note {
  margin: 0;
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu.is-open { animation: none; }
}

body.is-locked { overflow: hidden; }

/* 8) HERO ------------------------------------------------------------------ */
.hero {
  position: relative;
  /* ΟΧΙ 100svh σκέτο: το hero ξεκινά κάτω από topbar+header, οπότε θα έβγαινε
     τόσο ψηλό που τα κάγκελα θα έπεφταν κάτω από το πρώτο κάδρο. */
  min-height: calc(100svh - var(--header-h) - var(--topbar-h));
  display: grid;
  place-items: center;
  text-align: center;
  /* Το κάτω padding κρατά ελεύθερη τη ζώνη όπου κάθονται τα κάγκελα. */
  padding-block: var(--space-4) clamp(96px, 14vh, 155px);
  /* Ουρανός σε σούρουπο: σκοτεινός ψηλά, με «λάμψη ορίζοντα» στα 3/4 ώστε οι
     μαύρες σιλουέτες από κάτω να έχουν πάνω σε τι να πατήσουν. */
  background: linear-gradient(180deg,
    #100522 0%, #180830 26%, #240e45 52%, #3b1663 72%, #2b1350 88%, #1d0e36 100%);
  overflow: hidden;
  isolation: isolate;
}

.hero__inner { position: relative; z-index: 3; display: grid; justify-items: center; gap: clamp(9px, 1.2vh, 15px); }

.hero__logo {
  width: clamp(70px, min(9.4vw, 12vh), 122px);
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, .8)) drop-shadow(0 0 26px rgba(239, 109, 0, .35));
  animation: candle 5.5s ease-in-out infinite;
}

.hero__title {
  font-size: var(--fs-hero);
  line-height: .9;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-shadow: 0 0 60px rgba(0, 0, 0, .9);
}
/* Η μεσαία λέξη είναι το «νέον»: βαμμένη με gradient και με αργό τρεμόπαιγμα
   κεριού. Η συχνότητα μένει κάτω από 3 αναλαμπές/δευτ. για λόγους ασφάλειας. */
.hero__title em {
  display: block;
  font-style: normal;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(239, 109, 0, .5));
  animation: neon 7s ease-in-out infinite;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  font-size: var(--fs-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--peach);
}
.hero__meta li { display: inline-flex; align-items: center; gap: 8px; }

.hero__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--muted);
}

/* Countdown */
.countdown { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.countdown__cell {
  min-width: 86px;
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.countdown__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, min(2.6vw, 4.2vh), 2.9rem);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--orange-400);
}
.countdown__label {
  display: block;
  margin-top: 6px;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 700;
}

/* Αριθμοί-εντυπώσεις κάτω από το hero */
.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5) var(--space-8); }
.stats__item { text-align: center; }
.stats__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 900;
  color: var(--peach);
}
.stats__label { font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }

/* 9) SECTIONS -------------------------------------------------------------- */
/* Bento: η πρώτη κάρτα πιάνει διπλό πλάτος & ύψος, οι υπόλοιπες κυλούν γύρω. */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.bento > * { min-height: 190px; display: flex; flex-direction: column; justify-content: flex-end; }
.bento__feature { grid-column: span 2; grid-row: span 2; min-height: 400px; }
.bento__wide { grid-column: span 2; }

/* Κάρτα με φωτογραφία φόντο. Η βαθμίδα από κάτω κρατά το κείμενο ευανάγνωστο. */
.tile {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  padding: var(--space-6);
  background: var(--ink-850);
  isolation: isolate;
  transition: transform var(--transition), border-color var(--transition);
}
.tile:hover { transform: translateY(-4px); border-color: rgba(239, 109, 0, .5); }
.tile__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.35) contrast(1.05);
  transition: transform .6s cubic-bezier(.4, 0, .2, 1), filter var(--transition);
}
.tile:hover .tile__bg { transform: scale(1.06); filter: grayscale(0) contrast(1.1); }
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(5, 5, 9, .25) 0%, rgba(5, 5, 9, .82) 62%, rgba(5, 5, 9, .96) 100%);
}
.tile h3 { font-size: var(--fs-lg); }
.tile p { color: var(--muted); font-size: var(--fs-sm); margin-top: 6px; }
.tile__tag {
  align-self: flex-start;
  margin-bottom: auto;
}

/* Θεματικές ημέρες */
.day-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(35, 10, 66, .55), rgba(10, 10, 18, .5));
  transition: transform var(--transition), border-color var(--transition);
}
.day-card:hover { transform: translateY(-4px); border-color: var(--purple-600); }
.day-card__date {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 900;
  line-height: 1;
  color: var(--orange-500);
}
.day-card__day { font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--faint); font-weight: 800; }
.day-card ul { display: grid; gap: 8px; }
.day-card li {
  display: flex;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.day-card li::before { content: "▸"; color: var(--orange-500); }

/* Λωρίδα CTA */
.cta-band {
  position: relative;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--purple-900) 0%, var(--ink-900) 60%);
  border: 1px solid var(--line);
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  right: -80px; top: -140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 109, 0, .3), transparent 65%);
  filter: blur(60px);
}
.cta-band > * { position: relative; }

/* Τιμοκατάλογος περιπτέρων */
.price-card { text-align: center; }
.price-card__price {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 900;
  color: var(--peach);
  line-height: 1;
}
.price-card__vat { display: block; font-size: var(--fs-xs); color: var(--faint); margin-top: 6px; letter-spacing: .1em; text-transform: uppercase; }
.price-card__size { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--space-3); }

/* Γκαλερί */
.gallery-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-3);
  scrollbar-width: thin;
}
.gallery-strip img {
  scroll-snap-align: start;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  filter: grayscale(.3);
  transition: filter var(--transition), transform var(--transition);
}
.gallery-strip img:hover { filter: none; transform: scale(1.02); }

/* FAQ */
.faq { display: grid; gap: var(--space-3); max-width: 860px; }
.faq__item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-weight: 700;
  font-size: var(--fs-base);
}
.faq__q::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--orange-500);
  transition: transform var(--transition);
  flex: none;
}
.faq__q[aria-expanded="true"]::after { transform: rotate(45deg); }
.faq__a { padding: 0 var(--space-5) var(--space-5); color: var(--muted); font-size: var(--fs-sm); }
.faq__a[hidden] { display: none; }

/* 10) PROGRAM -------------------------------------------------------------- */
/* Υπόμνημα των σημάτων, στην κορυφή του προγράμματος. Κάθε σήμα με μισή
   γραμμή εξήγησης: σκέτο «Προς επιβεβαίωση» διαβαζόταν «μπορεί να μη
   γίνει», ενώ σημαίνει μόνο ότι η ώρα διαφέρει ακόμη από το more.com. */
.legend {
  list-style: none;
  margin: var(--space-5) auto 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.legend li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }

.tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-6); }
.tabs button {
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted);
  transition: all var(--transition);
}
.tabs button[aria-selected="true"] {
  background: var(--grad-fire);
  border-color: transparent;
  color: #fff;
}

.timeline { display: grid; gap: 0; border-left: 2px solid var(--line); padding-left: var(--space-5); }
.timeline__row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.timeline__row:last-child { border-bottom: 0; }
.timeline__row::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-5) - 6px);
  top: calc(var(--space-4) + 10px);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--orange-500);
  box-shadow: 0 0 0 4px rgba(239, 109, 0, .18);
}
.timeline__time {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--peach);
  font-size: var(--fs-sm);
}
.timeline__what strong { display: block; }
/* Κάθε γραμμή της δράσης σε δική της σειρά. Ήταν inline, οπότε ο
   συνεργάτης και η ετικέτα εισιτηρίου κολλούσαν σε μία αράδα:
   «Με τη Χριστίνα Εξηνταδέκα ΔΩΡΕΑΝ ΜΕ ΤΗΝ ΕΙΣΟΔΟ». */
.timeline__what > span:not(.badge) { display: block; font-size: var(--fs-sm); color: var(--muted); }
.timeline__what > span + span { margin-top: 4px; }

/* 11) FORMS ---------------------------------------------------------------- */
.field { display: grid; gap: 6px; }
.field label { font-size: var(--fs-sm); font-weight: 700; }
/* Το <select> παίρνει εγγενές πλάτος από τη μακρύτερη επιλογή του. Σε στενή
   οθόνη αυτό φούσκωνε ολόκληρη τη στήλη του grid — εξ ου το min-width: 0. */
.field { min-width: 0; }
.form-grid > *, .stack > * { min-width: 0; }
.field input, .field select, .field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 13px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-strong);
  color: var(--text);
  transition: border-color var(--transition), background-color var(--transition);
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--orange-500);
  background: rgba(255, 255, 255, .06);
}
.field__hint { font-size: var(--fs-xs); color: var(--faint); }

.newsletter { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.newsletter input { flex: 1 1 260px; }

/* 12) FOOTER --------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ink-900), var(--purple-950));
  padding-block: var(--space-8) var(--space-5);
  margin-top: var(--space-8);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--space-7) var(--space-5);
}
.footer-grid h2 {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--orange-400);
  margin-bottom: var(--space-4);
}
.footer-grid ul { display: grid; gap: 10px; }
.footer-grid a { font-size: var(--fs-sm); color: var(--muted); transition: color var(--transition); }
.footer-grid a:hover { color: var(--orange-300); }

.socials { display: flex; gap: var(--space-2); }
.socials a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  transition: all var(--transition);
}
.socials a:hover { border-color: var(--orange-500); background: rgba(239, 109, 0, .12); color: var(--orange-300); }
.socials svg { width: 19px; height: 19px; fill: currentColor; }

.footer-bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--faint);
}
.footer-bottom nav { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* 13) UTILS ---------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.text-center { text-align: center; }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mx-auto { margin-inline: auto; }

/* 14) MOTION --------------------------------------------------------------- */
@keyframes pulse-glow {
  0%, 100% { opacity: .78; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.1); }
}
@keyframes drift {
  from { transform: translateX(-4%); }
  to   { transform: translateX(4%); }
}
/* Φως κεριού: αργό, χαμηλού πλάτους. Κανένα βήμα δεν είναι απότομο. */
@keyframes candle {
  0%, 100% { filter: drop-shadow(0 24px 60px rgba(0,0,0,.8)) drop-shadow(0 0 26px rgba(239,109,0,.35)); }
  45%      { filter: drop-shadow(0 24px 60px rgba(0,0,0,.8)) drop-shadow(0 0 44px rgba(239,109,0,.55)); }
  70%      { filter: drop-shadow(0 24px 60px rgba(0,0,0,.8)) drop-shadow(0 0 22px rgba(239,109,0,.3)); }
}
@keyframes neon {
  0%, 100% { opacity: 1; }
  42%      { opacity: .88; }
  46%      { opacity: 1; }
  61%      { opacity: .93; }
}
@keyframes float-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* Scroll reveal: το .reveal γίνεται .is-visible από το main.js. */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.4, 0, .2, 1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* 15) RESPONSIVE ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__feature { grid-column: span 2; grid-row: span 1; min-height: 300px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ΤΙ ΦΕΥΓΕΙ ΠΡΩΤΟ, ΟΤΑΝ ΣΤΕΝΕΨΕΙ Η ΛΩΡΙΔΑ: πρώτα το CTA, ύστερα το μενού.
   Ως τις 28.09 έφευγαν ΜΑΖΙ στα 1380px — ένα laptop 1280 έβλεπε burger ενώ
   το μενού χωρούσε άνετα. Το CTA δεν χάνεται: το συρτάρι το κρατά στο πόδι
   του, γι' αυτό ο burger μένει ορατός στο ενδιάμεσο πλάτος.

   ΜΕΤΡΗΣΕΙΣ — 29.09.2026, με ΟΚΤΩ στοιχεία πρώτου επιπέδου (το «Για παιδιά»
   ζει μέσα στο dropdown των Δραστηριοτήτων). Το κενό είναι η ΠΡΑΓΜΑΤΙΚΗ
   απόσταση από το δεξί άκρο του σήματος ως τον πρώτο σύνδεσμο:

       πλάτος    ελληνικά    αγγλικά
       1201       49px       155px      ← ακριβώς πάνω από το όριο
       1280      128px       234px      (χωρίς CTA: φεύγει στα 1320)
       1380       56px       152px      ← το ταβάνι του header
       1920       37px       133px      (ίδιο με 1380: το ταβάνι κρατάει)

   ΠΡΟΣΟΧΗ ΣΤΟ ΤΑΒΑΝΙ: το .site-header > .container είναι --container:1380px.
   Σε οθόνη 2560 το περιεχόμενο μένει στα 1380 — μια σύγκρουση ΔΕΝ λύνεται με
   πλατύτερη οθόνη. Το ελληνικό είναι το στενό: 37px στα 1920.

   ΑΝ ΠΡΟΣΤΕΘΕΙ ΔΕΚΑΤΟ ΣΤΟΙΧΕΙΟ, θα σπάσει εδώ. Το μετράει το
   `npm run check-nav` (όριο 24px) — μην αλλάξεις μέγεθος γραμματοσειράς ή
   gap για να «χωρέσει»: βάλ' το σε υπομενού, όπως έγινε με το «Για παιδιά».
   Το ίδιο σημείο έχει σπάσει ΤΡΕΙΣ φορές, πάντα σιωπηλά. */
@media (max-width: 1320px) {
  .nav-actions .btn { display: none; }
  .nav-toggle { display: grid; }
  .nav-menu { gap: 12px; }
  .nav-actions { margin-left: var(--space-3); }
}
/* 1200 και όχι 1160: ΜΕΤΡΗΘΗΚΕ (29.09). Στα 1161 το κενό έπεφτε στα 16px —
   το μενού ακουμπούσε το σήμα. Στα 1201 είναι 49px. */
@media (max-width: 1200px) {
  .nav-menu { display: none; }
}

@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  :root { --header-h: 66px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .bento__wide, .bento__feature { grid-column: span 1; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-block: var(--space-8); }
  .countdown__cell { min-width: 72px; padding: var(--space-3) var(--space-2); }
  .timeline__row { grid-template-columns: 1fr; gap: 4px; }
  .brand__text span { display: none; }
  /* Η λωρίδα σε ΜΙΑ γραμμή: με χώρο και more.com οι ημερομηνίες θέλουν
     ≥659px (EL) δίπλα στο EL/EN, αλλιώς το EL/EN πέφτει από κάτω και η
     λωρίδα γίνεται 64px. Ο χώρος γράφεται ήδη στο hero και στο υποσέλιδο. */
  .topbar__when span { display: none; }
}

/* Σύντομο «Κέρδισε ταξίδι στον Δράκουλα»: το πλήρες θέλει ≥580px (EL) για
   να χωρά σε μία γραμμή δίπλα στο EL/EN. 60px περιθώριο για διαφορές
   γραμματοσειράς· από 641px και πάνω φαίνεται και το «με κάθε εισιτήριο». */
@media (max-width: 640px) {
  .topbar__long { display: none; }
  .topbar__short { display: inline; }
}

@media (max-width: 480px) {
  .stats { gap: var(--space-5); }
}

/* Κάτω από 360px ούτε το σύντομο μήνυμα του διαγωνισμού χωρά σε μία
   γραμμή (θέλει ~351px). Μικρότερο κενό και πιο σφιχτά EL/EN (μένουν
   ≥24px πλάτος, το ελάχιστο μέγεθος στόχου) κερδίζουν τα pixel χωρίς να
   κοπεί λέξη. */
@media (max-width: 390px) {
  .topbar__inner { gap: var(--space-2); }
  .topbar__msg { letter-spacing: 0; }
  .lang a { padding-inline: 6px; }
}

/* 16) FX — ΤΟ ΕΠΙΠΕΔΟ ΠΟΥ ΚΑΝΕΙ ΤΗ ΔΙΑΦΟΡΑ --------------------------------
   Όλα εδώ είναι διακοσμητικά: αν κοπεί το JS ή ζητηθεί λιγότερη κίνηση, το
   site παραμένει πλήρως λειτουργικό. Κανένα εφέ δεν κρύβει περιεχόμενο.
   -------------------------------------------------------------------------- */

/* 16.1 Η ΠΥΛΗ ------------------------------------------------------------
   «Πέρυσι ανοίξαμε μια πύλη που δεν ξανακλείνει» — το λέει η ίδια η
   διοργάνωση, οπότε το site ανοίγει κυριολεκτικά σαν πύλη. Μία φορά ανά
   επίσκεψη (sessionStorage), με δυνατότητα παράλειψης σε κάθε πάτημα. */
.gate {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-columns: 1fr 1fr;
  pointer-events: auto;
}
.gate__half {
  position: relative;
  background: linear-gradient(180deg, #1b0733, #0a0716 70%, #050509);
  transition: transform 1.25s cubic-bezier(.76, 0, .18, 1);
  overflow: hidden;
}
/* Κάθετες «σανίδες» — δίνουν υφή πύλης χωρίς εικόνα. */
.gate__half::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .028) 0 2px, transparent 2px 78px);
}
.gate__half--l { border-right: 1px solid rgba(239, 109, 0, .22); }
.gate__half--r { border-left: 1px solid rgba(239, 109, 0, .22); }

.gate__seal {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(var(--space-4), 3vh, var(--space-6));
  text-align: center;
  padding-inline: var(--gutter);
  transition: opacity .5s ease, transform .8s cubic-bezier(.76, 0, .18, 1);
}
/* Το λογότυπο της πύλης είναι το πρώτο πράγμα που βλέπει ο επισκέπτης σε
   ολόκληρη οθόνη — άρα μεγάλο. Περιορίζεται ΚΑΙ από το ύψος (36vh), ώστε σε
   κοντό laptop να μη σπρώχνει έξω το κείμενο από κάτω. */
.gate__seal img {
  width: clamp(190px, min(27vw, 36vh), 400px);
  animation: candle 4s ease-in-out infinite;
}
.gate__seal p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--muted);
  max-width: 22ch;
  line-height: 1.35;
}
.gate__skip {
  font-size: var(--fs-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 3px;
}
.gate__skip:hover { color: var(--orange-300); }

/* Η γραμμή φωτός που «σκάει» τη στιγμή που ανοίγει η πύλη. */
.gate__crack {
  position: absolute;
  left: 50%; top: 0;
  width: 2px; height: 100%;
  translate: -50% 0;
  background: var(--grad-fire);
  box-shadow: 0 0 60px 14px rgba(239, 109, 0, .75);
  opacity: 0;
  z-index: 3;
  transition: opacity .35s ease;
}
.gate.is-open .gate__crack { opacity: 1; }
.gate.is-open .gate__seal { opacity: 0; transform: scale(1.25); }
.gate.is-open .gate__half--l { transform: translateX(-101%); }
.gate.is-open .gate__half--r { transform: translateX(101%); }
.gate.is-done { display: none; }
body.is-gated { overflow: hidden; }

/* 16.2 ΤΟ ΣΚΗΝΙΚΟ ΤΟΥ HERO ----------------------------------------------
   Πέντε επίπεδα με data-depth. Το fx.js τα μετακινεί με το ποντίκι και με
   το scroll — όσο πιο «μπροστά» το επίπεδο, τόσο μεγαλύτερη η μετατόπιση. */
.scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.scene__layer { position: absolute; inset: -5% -4% 0; will-change: transform; }

.scene__stars {
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.4px 1.4px at 28% 9%,  rgba(255,255,255,.6),  transparent),
    radial-gradient(1.8px 1.8px at 43% 24%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.2px 1.2px at 61% 12%, rgba(255,255,255,.5),  transparent),
    radial-gradient(1.7px 1.7px at 78% 20%, rgba(255,255,255,.8),  transparent),
    radial-gradient(1.3px 1.3px at 89% 8%,  rgba(255,255,255,.55), transparent),
    radial-gradient(1.5px 1.5px at 34% 34%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.4px 1.4px at 68% 38%, rgba(255,255,255,.4),  transparent);
  animation: twinkle 7s ease-in-out infinite alternate;
}

/* Το φεγγάρι. ΟΧΙ box-shadow για τη λάμψη: το γονικό επίπεδο έχει
   will-change:transform, άρα γίνεται composited και κόβει τη σκιά σε ορατό
   ορθογώνιο. Το φωτοστέφανο μπαίνει ως ξεχωριστό ::after με gradient. */
.scene__moon {
  position: absolute;
  top: 10%;
  right: 13%;
  width: clamp(140px, 16vw, 235px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 63% 66%, rgba(120, 70, 20, .16) 0 5.5%, transparent 6.5%),
    radial-gradient(circle at 36% 30%, rgba(120, 70, 20, .13) 0 4.5%, transparent 5.5%),
    radial-gradient(circle at 52% 44%, rgba(120, 70, 20, .10) 0 3%, transparent 4%),
    radial-gradient(circle at 40% 34%, #fff7ea 0%, #ffe6c0 34%, #f6c27c 64%, #dc9440 85%, #b9721f 100%);
  animation: pulse-glow 11s ease-in-out infinite;
}
.scene__moon::after {
  content: "";
  position: absolute;
  inset: -135%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 196, 118, .3) 0%, rgba(239, 109, 0, .15) 25%,
    rgba(123, 47, 168, .12) 45%, transparent 66%);
}

/* Τα ύψη ορίζονται εδώ (τα SVG έχουν preserveAspectRatio="none" και τεντώνουν),
   ώστε ολόκληρη η σιλουέτα να χωράει στη ζώνη κάτω από το περιεχόμενο. */
.scene__silhouette { position: absolute; inset: auto 0 0; width: 100%; display: block; }
.scene__silhouette--far  { opacity: .8;  height: clamp(56px, 8vh, 104px); }
.scene__silhouette--mid  { opacity: .95; height: clamp(86px, 13vh, 158px); }
.scene__silhouette--near { height: clamp(72px, 11vh, 132px); }

/* Ομίχλη: δύο στρώσεις που κυλούν αντίθετα, ώστε να μη φαίνεται το loop. */
.scene__fog {
  position: absolute;
  inset: auto 0 0;
  height: 62%;
  background:
    radial-gradient(60% 70% at 18% 100%, rgba(196, 140, 230, .16), transparent 70%),
    radial-gradient(55% 65% at 62% 100%, rgba(255, 150, 60, .13), transparent 70%),
    radial-gradient(70% 55% at 88% 100%, rgba(150, 80, 200, .14), transparent 72%);
  animation: drift 26s ease-in-out infinite alternate;
}
.scene__fog--back { animation-duration: 38s; animation-direction: alternate-reverse; opacity: .7; }

/* Ο καμβάς με τις στάχτες που ανεβαίνουν από τη φωτιά. */
.embers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* Νυχτερίδες: περνούν διαγώνια, με μεγάλες παύσεις ανάμεσα. */
.bat {
  position: absolute;
  z-index: 2;
  width: 34px;
  color: #07060c;
  opacity: .9;
  animation: bat-fly 17s linear infinite;
}
.bat svg { width: 100%; height: auto; fill: currentColor; animation: bat-flap .42s ease-in-out infinite alternate; }
.bat--2 { width: 22px; animation-duration: 23s; animation-delay: 6s; top: 26%; }
.bat--3 { width: 44px; animation-duration: 29s; animation-delay: 13s; top: 12%; }

@keyframes bat-fly {
  0%   { transform: translate(-12vw, 0) rotate(-4deg); opacity: 0; }
  8%   { opacity: .9; }
  50%  { transform: translate(52vw, -9vh) rotate(3deg); }
  92%  { opacity: .9; }
  100% { transform: translate(114vw, 4vh) rotate(-3deg); opacity: 0; }
}
@keyframes bat-flap { from { transform: scaleY(1); } to { transform: scaleY(.64); } }
@keyframes twinkle { from { opacity: .5; } to { opacity: 1; } }

/* Δείκτης κύλισης */
.scroll-cue {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  translate: -50% 0;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 8px;
  font-size: .64rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 800;
}
.scroll-cue span {
  width: 22px; height: 36px;
  border: 2px solid var(--line-strong);
  border-radius: 12px;
  position: relative;
}
.scroll-cue span::after {
  content: "";
  position: absolute;
  left: 50%; top: 7px;
  width: 3px; height: 7px;
  translate: -50% 0;
  border-radius: 2px;
  background: var(--orange-500);
  animation: cue 2s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { transform: translate(-50%, 0); opacity: 1; }
  60%      { transform: translate(-50%, 12px); opacity: .2; }
}

/* 16.3 ΦΩΣ ΔΑΔΑΣ ΣΤΟΝ ΚΕΡΣΟΡΑ ------------------------------------------
   Μόνο σε συσκευές με ποντίκι. Δεν πιάνει κλικ, δεν αλλάζει τα χρώματα του
   κειμένου — απλώς «ζεσταίνει» ό,τι είναι κοντά στον δείκτη. */
.torch {
  position: fixed;
  top: 0; left: 0;
  width: 640px; height: 640px;
  margin: -320px 0 0 -320px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 80;
  opacity: 0;
  /* ΟΧΙ mix-blend-mode: screen — αναγκάζει σύνθεση ολόκληρης της σελίδας σε
     κάθε κίνηση του ποντικιού. Πάνω σε σκούρο φόντο η απλή διαφάνεια δίνει
     πρακτικά το ίδιο αποτέλεσμα με κλάσμα του κόστους. */
  background: radial-gradient(circle,
    rgba(255, 172, 80, .16) 0%, rgba(239, 109, 0, .08) 34%, transparent 62%);
  transition: opacity .45s ease;
  will-change: transform;
}
.torch.is-on { opacity: 1; }

/* 16.4 MARQUEE ----------------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid rgba(239, 109, 0, .28);
  background: linear-gradient(90deg, var(--purple-950), var(--ink-900), var(--purple-950));
  padding-block: 14px;
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: max-content;
  animation: scroll-x 34s linear infinite;
}
.marquee span {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .9rem + .5vw, 1.6rem);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--peach);
}
.marquee span:nth-child(even) { color: var(--orange-500); }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 16.5 ΛΑΜΨΗ ΠΟΥ ΑΚΟΛΟΥΘΕΙ ΜΕΣΑ ΣΤΙΣ ΚΑΡΤΕΣ ---------------------------
   Το fx.js γράφει --mx/--my σε κάθε κάρτα που περνάει από πάνω ο δείκτης. */
.card, .day-card, .tile { --mx: 50%; --my: 50%; }
.card::before, .day-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx) var(--my),
    rgba(239, 109, 0, .16), transparent 62%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.card:hover::before, .day-card:hover::before { opacity: 1; }
.day-card { position: relative; overflow: hidden; }

/* 16.6 ΜΑΓΝΗΤΙΚΑ ΚΟΥΜΠΙΑ ------------------------------------------------ */
.btn--magnet { will-change: transform; }

/* 16.7 ΜΠΑΡΑ ΠΡΟΟΔΟΥ ----------------------------------------------------- */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--grad-fire);
  box-shadow: 0 0 14px rgba(239, 109, 0, .8);
  z-index: 120;
  pointer-events: none;
}

/* 16.8 ΣΤΑΓΟΝΕΣ ΑΝΑΜΕΣΑ ΣΤΙΣ ΕΝΟΤΗΤΕΣ ---------------------------------
   Χωρίζουν τις ενότητες χωρίς γραμμή· καθαρά διακοσμητικές, aria-hidden. */
/* Το χρώμα είναι μωβ και όχι μαύρο: πάνω στο σχεδόν μαύρο φόντο διαβάζεται
   ως απαλή σκιά που «στάζει», χωρίς να γίνεται φιγούρα-θόρυβος. */
.drip { display: block; width: 100%; height: 54px; color: #1b0c31; filter: drop-shadow(0 1px 0 rgba(239, 109, 0, .22)); }
.drip--up { transform: rotate(180deg); }

/* 16.9 ΜΕΤΡΗΤΕΣ ---------------------------------------------------------- */
.stats__num { font-variant-numeric: tabular-nums; }

/* 16.10 ΑΠΟΚΑΛΥΨΗ ΤΙΤΛΩΝ ΑΝΑ ΛΕΞΗ -------------------------------------- */
.split-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.split-word > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(105%);
  transition: transform .85s cubic-bezier(.22, 1, .36, 1);
}
.is-visible .split-word > i { transform: none; }
.split-word:nth-child(2) > i { transition-delay: .06s; }
.split-word:nth-child(3) > i { transition-delay: .12s; }
.split-word:nth-child(4) > i { transition-delay: .18s; }
.split-word:nth-child(5) > i { transition-delay: .24s; }
.split-word:nth-child(6) > i { transition-delay: .3s; }
.split-word:nth-child(n+7) > i { transition-delay: .36s; }

/* 16.11 ΦΡΕΝΟ ------------------------------------------------------------
   Ένας χρήστης που ζητά λιγότερη κίνηση παίρνει το ίδιο site, ακίνητο. */
@media (prefers-reduced-motion: reduce) {
  .gate { display: none !important; }
  .torch, .embers, .bat, .scroll-cue span::after { display: none !important; }
  .marquee__track { animation: none; }
  .split-word > i { transform: none; }
  .scene__moon, .scene__stars, .scene__fog, .hero__logo, .hero__title em { animation: none; }
}

@media (hover: none), (pointer: coarse) {
  .torch { display: none; }
  .bat--3 { display: none; }
}

@media (max-width: 760px) {
  .scene__moon { top: 7%; right: 8%; width: clamp(110px, 30vw, 170px); }
  .bat--2, .bat--3 { display: none; }
  .drip { height: 34px; }
  .scroll-cue { display: none; }
}

/* Οι λέξεις κόβονται στο overflow — δίνουμε λίγο χώρο για τα ρ/γ/φ που
   κατεβαίνουν κάτω από τη γραμμή βάσης, χωρίς να αλλάξει το ύψος γραμμής. */
.split-word { padding-bottom: .14em; margin-bottom: -.14em; }

/* 17) ΕΣΩΤΕΡΙΚΕΣ ΣΕΛΙΔΕΣ ---------------------------------------------------
   Το πλήρες σκηνικό με το φεγγάρι και τα κάγκελα ανήκει ΜΟΝΟ στην αρχική.
   Οι υπόλοιπες σελίδες παίρνουν ένα συμπυκνωμένο page-hero: ίδια παλέτα,
   ίδιο βάθος, μισό ύψος — ώστε να μη χρειάζεται τρίτο scroll για να δει
   κανείς το περιεχόμενο.
   -------------------------------------------------------------------------- */

.page-hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem);
  background: linear-gradient(180deg, #140729 0%, #1e0c3a 42%, #2a1150 72%, #150b2a 100%);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.page-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  width: clamp(300px, 46vw, 680px);
  aspect-ratio: 1;
  top: -46%;
  left: 50%;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 109, 0, .28) 0%, rgba(123, 47, 168, .16) 40%, transparent 68%);
  animation: pulse-glow 12s ease-in-out infinite;
}
/* Η ίδια σιλουέτα κάγκελων, χαμηλότερη — κρατά τη συνέχεια με την αρχική.
   Εδώ γίνεται με gradients αντί για SVG: μία γραμμή CSS αντί για 25 paths σε
   κάθε μία από τις 14 σελίδες. */
.page-hero__fence {
  position: absolute;
  inset: auto 0 -1px;
  z-index: -1;
  height: clamp(38px, 5.5vh, 64px);
  background:
    linear-gradient(var(--ink-950), var(--ink-950)) bottom / 100% 13px no-repeat,
    linear-gradient(var(--ink-950), var(--ink-950)) 0 calc(100% - 26px) / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, var(--ink-950) 0 9px, transparent 9px 46px);
}
.page-hero__inner { position: relative; display: grid; justify-items: center; gap: var(--space-4); }
.page-hero h1 { font-size: var(--fs-3xl); max-width: 18ch; }
.page-hero .lead { max-width: 58ch; margin-inline: auto; }

/* Ψίχουλα πλοήγησης */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 700;
}
.crumbs a:hover { color: var(--orange-300); }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--orange-500); }
.crumbs li { display: inline-flex; align-items: center; }

/* Φίλτρα (chips) — χρησιμοποιούνται σε πρόγραμμα και δραστηριότητες. */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.filters button {
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted);
  transition: all var(--transition);
}
.filters button:hover { border-color: var(--line-strong); color: var(--text); }
.filters button[aria-pressed="true"] {
  background: var(--grad-fire);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--glow-orange);
}
[data-hidden="true"] { display: none !important; }

/* Μετρητής αποτελεσμάτων φίλτρου — role="status", το διαβάζει ο reader. */
.filters__count { font-size: var(--fs-sm); color: var(--faint); margin-bottom: var(--space-5); }

/* Πίνακας ημερών στο πρόγραμμα */
.day-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-5);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}
.day-head h2 { font-size: var(--fs-xl); }
.day-head p { color: var(--muted); font-size: var(--fs-sm); }

/* Επικεφαλίδα ζώνης μέσα στην ημέρα (αίθουσα / workshops / εξωτερικός /
   δωρεάν). Το πρόγραμμα τρέχει σε τέσσερις ζώνες ΤΑΥΤΟΧΡΟΝΑ — χωρίς αυτόν
   τον διαχωρισμό οι ώρες φαίνονται να συγκρούονται μεταξύ τους. */
.zone-head {
  margin: var(--space-8) 0 var(--space-5);
  padding-left: 14px;
  border-left: 3px solid var(--orange-500);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--peach);
}
.day-head + .zone-head { margin-top: var(--space-5); }

/* Η γραμμή του timeline «γεμίζει» καθώς κατεβαίνεις (το fx.js γράφει --fill). */
.timeline { position: relative; --fill: 0%; }
.timeline::before {
  content: "";
  position: absolute;
  left: -2px; top: 0;
  width: 2px;
  height: var(--fill);
  background: var(--grad-fire);
  box-shadow: 0 0 12px rgba(239, 109, 0, .6);
  transition: height .2s linear;
}
.timeline__row { align-items: start; }
.timeline__tag {
  display: inline-block;
  margin-top: 6px;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 700;
}
/* Το «δωρεάν» είναι η πληροφορία που ψάχνει ο επισκέπτης στο
   πρόγραμμα — παίρνει το τοξικό πράσινο, όπως και το badge--free. */
.timeline__tag--free { color: var(--toxic); }
/* Ακυρωμένη: η γραμμή μένει στη θέση της, με διαγραμμένη ώρα και τίτλο.
   ΟΧΙ θολό χρώμα — θα έριχνε την αντίθεση κάτω από το AA. */
.timeline__row--cancelled .timeline__time,
.timeline__row--cancelled s,
.ws-card--cancelled .ws-card__time,
.ws-card--cancelled s { text-decoration: line-through; text-decoration-thickness: 2px; }
/* Η αφίσα γράφει πάνω της «Προπώληση» και ώρα· σε πλήρη χρώματα η κάρτα θα
   έμοιαζε ζωντανή με μια ματιά. Γκρίζα — είναι εικόνα, δεν αγγίζει την
   αντίθεση του κειμένου. */
.ws-card--cancelled img { filter: grayscale(1); opacity: .55; }
.timeline__where { color: var(--orange-300); }

/* Κατάλογος εκθετών / χορηγών */
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-4); }
.logo-card {
  display: grid;
  place-items: center;
  gap: var(--space-3);
  min-height: 130px;
  padding: var(--space-5);
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--faint);
  font-size: var(--fs-sm);
  transition: all var(--transition);
}
.logo-card:hover { border-style: solid; border-color: var(--orange-500); color: var(--text); }
.logo-card b { color: var(--text); font-family: var(--font-display); font-size: 1.05rem; }

/* Βήματα (αίτηση εκθέτη) */
.steps { counter-reset: step; display: grid; gap: var(--space-5); }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: var(--space-4);
  align-items: start;
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--orange-400);
  border: 1px solid rgba(239, 109, 0, .4);
  background: rgba(239, 109, 0, .1);
}
.steps b { display: block; margin-bottom: 4px; }
.steps p { color: var(--muted); font-size: var(--fs-sm); }

/* Φόρμες σε πλέγμα */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.form-grid .field--full { grid-column: 1 / -1; }
.field--required label::after { content: " *"; color: var(--orange-500); }

/* Επιλογή περιπτέρου με radio που μοιάζει με κάρτα */
.pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.pick input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pick label {
  display: block;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  text-align: center;
  transition: all var(--transition);
}
.pick label:hover { border-color: var(--line-strong); }
.pick input:checked + label {
  border-color: var(--orange-500);
  background: rgba(239, 109, 0, .1);
  box-shadow: var(--glow-orange);
}
.pick input:focus-visible + label { outline: 3px solid var(--orange-400); outline-offset: 3px; }

/* Ζώνη ανεβάσματος αρχείων */
.drop {
  display: grid;
  place-items: center;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-5);
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--muted);
  transition: all var(--transition);
  cursor: pointer;
}
.drop:hover, .drop.is-over { border-color: var(--orange-500); background: rgba(239, 109, 0, .06); color: var(--text); }
.drop strong { color: var(--text); }

/* Γκαλερί */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
}
.gallery-grid figure { margin: 0; position: relative; }
.gallery-grid button {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  background: linear-gradient(145deg, var(--purple-900), var(--ink-850));
  transition: transform var(--transition), border-color var(--transition);
}
.gallery-grid button:hover { transform: translateY(-3px); border-color: var(--orange-500); }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; }
/* Θέση για φωτογραφία που δεν έχει έρθει ακόμα — δεν είναι σφάλμα, είναι κενό. */
.ph {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  color: var(--faint);
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  gap: 8px;
}
.ph span { font-size: 1.6rem; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  place-items: center;
  padding: var(--gutter);
  background: rgba(5, 5, 9, .94);
  backdrop-filter: blur(6px);
}
.lightbox.is-open { display: grid; }
.lightbox img { max-height: 84vh; border-radius: var(--radius); }
.lightbox__close {
  position: absolute;
  top: var(--space-5); right: var(--space-5);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  font-size: 1.4rem;
}
.lightbox__close:hover { border-color: var(--orange-500); color: var(--orange-300); }
/* Προηγούμενη / επόμενη: στο πλάι στον υπολογιστή, κάτω στο κινητό — εκεί
   φτάνει ο αντίχειρας, και δεν σκεπάζουν τη φωτογραφία που πιάνει όλο το
   πλάτος. Με μία μόνο φωτογραφία (.is-single) δεν υπάρχουν. */
.lightbox__prev,
.lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(5, 5, 9, .6);
  display: grid; place-items: center;
  font-size: 2rem; line-height: 1;
}
.lightbox__prev { left: var(--space-5); }
.lightbox__next { right: var(--space-5); }
.lightbox__prev:hover,
.lightbox__next:hover { border-color: var(--orange-500); color: var(--orange-300); }
.lightbox__count {
  position: absolute;
  bottom: var(--space-5); left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.lightbox.is-single .lightbox__prev,
.lightbox.is-single .lightbox__next,
.lightbox.is-single .lightbox__count { display: none; }
@media (max-width: 720px) {
  .lightbox__prev,
  .lightbox__next { top: auto; bottom: var(--space-5); transform: none; }
  .lightbox__prev { left: var(--gutter); }
  .lightbox__next { right: var(--gutter); }
  .lightbox__count { bottom: calc(var(--space-5) + 16px); }
}

/* Άρθρο */
.prose { max-width: 68ch; margin-inline: auto; }
.prose > * + * { margin-top: var(--space-5); }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--space-8); }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--space-7); }
.prose p { color: #ded6ea; }
.prose a { color: var(--orange-300); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { display: grid; gap: 10px; }
.prose ul li { display: flex; gap: 12px; color: var(--muted); }
.prose ul li::before { content: "▸"; color: var(--orange-500); flex: none; }
.prose blockquote {
  padding-left: var(--space-5);
  border-left: 3px solid var(--orange-500);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--peach);
}
.post-meta { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 700; }

/* Πίνακας (τιμές, ΜΜΜ) */
.table-wrap { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: 520px;
}
th, td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
th { color: var(--orange-400); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; }
td { color: var(--muted); }
tbody tr:hover td { background: var(--surface); color: var(--text); }

/* 404 */
.oops { display: grid; place-items: center; text-align: center; gap: var(--space-5); padding-block: clamp(4rem, 12vw, 9rem); }
.oops__num {
  font-family: var(--font-display);
  font-size: clamp(6rem, 22vw, 14rem);
  font-weight: 900;
  line-height: .85;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 760px) {
  .form-grid, .pick { grid-template-columns: 1fr; }
  .page-hero h1 { max-width: none; }
}

/* Με το καλάθι στη μπάρα, στα 360px το σήμα + καλάθι + χάμπουργκερ δεν
   χωρούσαν: η μπάρα ξεχείλιζε 13px. Κάτω από 430px μένει το σύμβολο. */
@media (max-width: 430px) {
  .site-header .brand__text { display: none; }
  .site-header .brand img { width: 40px; }
  .cart-link { width: 38px; height: 38px; }
  .nav-toggle { width: 40px; height: 40px; }
}

/* Ο κώδικας μέσα σε κείμενο (π.χ. prefers-reduced-motion) είναι μία λέξη 24
   χαρακτήρων: στα 360px έσπαγε το πλάτος της σελίδας. */
.prose code {
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .07);
  color: var(--peach);
  font-size: .9em;
  overflow-wrap: anywhere;
}
.prose, .lead, .card p, .timeline__what { overflow-wrap: break-word; }

/* Πολύ στενές οθόνες (iPhone SE 1ης γενιάς και παλαιότερα Android): το
   countdown σπάει σε 2×2 και οι τιμές στη φόρμα δεν ξεχειλίζουν. */
@media (max-width: 390px) {
  .countdown { display: grid; grid-template-columns: 1fr 1fr; }
  .countdown__cell { min-width: 0; }
  .pick label { padding: var(--space-4); }
  .price-card__price { font-size: var(--fs-xl); }
  table { min-width: 420px; }
}

/* Σε πολύ στενές οθόνες τα κουμπιά με μακρύ ελληνικό κείμενο («ΠΕΡΙΣΣΟΤΕΡΑ ΓΙΑ
   ΤΟ ΦΕΣΤΙΒΑΛ») ξεπερνούσαν το πλάτος, επειδή το .btn είναι nowrap. Εδώ και
   μόνο εδώ τους επιτρέπουμε να σπάσουν σε δύο γραμμές. */
@media (max-width: 430px) {
  .btn { white-space: normal; text-align: center; line-height: 1.25; }
  .grid > *, .bento > * { min-width: 0; }
}

/* 16.12 ΦΑΝΤΑΣΜΑΤΑ -------------------------------------------------------
   Ανεβαίνουν αργά από κάτω, λικνίζονται και σβήνουν πριν βγουν από το κάδρο.
   Οι τιμές (θέση, πλάτος, διάρκεια, καθυστέρηση, απόκλιση) έρχονται ως
   custom properties από το fx.js, ώστε κάθε φάντασμα να είναι διαφορετικό. */
.ghosts {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.ghost {
  position: absolute;
  left: var(--x, 10%);
  bottom: -18%;
  width: var(--w, 38px);
  opacity: 0;
  animation: ghost-rise var(--dur, 26s) linear var(--delay, 0s) infinite;
  will-change: transform, opacity;
}
.ghost svg {
  width: 100%;
  height: auto;
  fill: var(--tint, rgba(240, 235, 250, .88));
  filter: drop-shadow(0 0 22px rgba(185, 160, 255, .55));
  animation: ghost-sway 3.8s ease-in-out infinite alternate;
}

@keyframes ghost-rise {
  0%   { transform: translate(0, 0) scale(.9); opacity: 0; }
  12%  { opacity: .5; }
  50%  { transform: translate(var(--drift, 40px), -62vh) scale(1); }
  85%  { opacity: .38; }
  100% { transform: translate(calc(var(--drift, 40px) * -.4), -125vh) scale(.85); opacity: 0; }
}
@keyframes ghost-sway {
  from { transform: translateX(-9px) rotate(-5deg); }
  to   { transform: translateX(9px) rotate(5deg); }
}

/* Στρώσεις: στο hero τα φαντάσματα πάνε μπροστά από το σκηνικό αλλά πίσω από
   το κείμενο (που είναι z-index 3). Μέσα σε ενότητα, το .container ανεβαίνει
   ώστε να μη σκεπάζεται ποτέ κείμενο από φάντασμα. */
.hero .ghosts { z-index: 1; }
.page-hero .ghosts { z-index: 0; }
.section > .container { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .ghosts { display: none !important; }
}
@media (max-width: 560px) {
  /* Σε στενή οθόνη τρία φαντάσματα γίνονται θόρυβος· κρατάμε τα δύο πρώτα. */
  .ghost:nth-child(n+3) { display: none; }
}

/* 16.13 ΤΟ ΚΡΥΦΟ: ΤΟ ΦΕΓΓΑΡΙ ΓΙΝΕΤΑΙ ΚΟΛΟΚΥΘΑ ---------------------------
   Δύο στρώσεις μέσα στο ίδιο το φεγγάρι. Τίποτα δεν καλύπτει τη σελίδα,
   τίποτα δεν σβήνει — η αλλαγή συμβαίνει εκεί που ήδη κοιτάς. */
.moon-skin,
.moon-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s ease;
}

/* Το δέρμα της κολοκύθας: πιο σκούρο και πιο κορεσμένο από το φεγγάρι, ώστε
   τα φωτεινά σκαλίσματα να ξεχωρίζουν πάνω του. Οι κάθετες «φέτες» δίνουν
   σχήμα κολοκύθας χωρίς να χρειάζεται εικόνα. */
.moon-skin {
  background:
    repeating-linear-gradient(90deg, rgba(120, 48, 0, .16) 0 2px, transparent 2px 13%),
    radial-gradient(circle at 40% 34%, #f5a437 0%, #e88316 32%, #c75f04 64%, #963f00 86%, #5f2900 100%);
}

.moon-face svg {
  width: 100%;
  height: 100%;
  display: block;
  /* Η λάμψη γύρω από κάθε σκάλισμα — σαν να ξεχύνεται το φως του κεριού. */
  filter: drop-shadow(0 0 10px rgba(255, 200, 90, .95)) drop-shadow(0 0 26px rgba(255, 150, 30, .6));
}
/* Κάθε χαρακτηριστικό σκαλίζεται ξεχωριστά, με μικρή διαφορά χρόνου —
   σαν να το χαράζει κάποιος, όχι σαν να εμφανίζεται σφραγίδα. */
.moon-face .mf { opacity: 0; transform-origin: 50% 50%; transform: scale(.4); }
.scene__moon.is-pumpkin .moon-face .mf { animation: carve .5s cubic-bezier(.22, 1, .36, 1) forwards; }
.scene__moon.is-pumpkin .mf--eye-l { animation-delay: .30s; }
.scene__moon.is-pumpkin .mf--eye-r { animation-delay: .42s; }
.scene__moon.is-pumpkin .mf--nose  { animation-delay: .56s; }
.scene__moon.is-pumpkin .mf--mouth { animation-delay: .70s; }

@keyframes carve {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: scale(1); }
}

.scene__moon.is-pumpkin .moon-skin { opacity: 1; }
.scene__moon.is-pumpkin .moon-face { opacity: 1; }

/* Το τρεμόπαιγμα της μεταμόρφωσης: δύο αναλαμπές σε ένα δευτερόλεπτο, δηλαδή
   κάτω από το όριο των 3/δευτ. για φωτοευαισθησία, και χωρίς να σβήνει τελείως. */
.scene__moon.is-pumpkin { animation: moon-flicker 1s ease-in-out 1; }
@keyframes moon-flicker {
  0%, 100% { filter: none; }
  12%  { filter: brightness(1.45); }
  22%  { filter: brightness(.62); }
  38%  { filter: brightness(1.35); }
  52%  { filter: brightness(.78); }
}

/* Το φωτοστέφανο μεγαλώνει και ζεσταίνεται — εκεί φαίνεται ότι «άναψε». */
.scene__moon::after { transition: transform .8s cubic-bezier(.22, 1, .36, 1), opacity .8s ease; }
.scene__moon.is-pumpkin::after { transform: scale(1.3); opacity: 1; }
.scene__moon.is-fading .moon-skin,
.scene__moon.is-fading .moon-face { opacity: 0; }

/* Οι νυχτερίδες που ξεφεύγουν από μπροστά του. Μία φορά, όχι σε βρόχο. */
.bat--burst {
  position: absolute;
  z-index: 2;
  translate: -50% -50%;
  opacity: 0;
  animation: bat-burst 2.8s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes bat-burst {
  0%   { transform: translate(0, 0) scale(.45) rotate(-8deg); opacity: 0; }
  14%  { opacity: .95; }
  70%  { opacity: .8; }
  100% { transform: translate(var(--bx, -240px), var(--by, -60px)) scale(1.15) rotate(6deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .moon-skin, .moon-face, .bat--burst { display: none !important; }
  .scene__moon.is-pumpkin { animation: none; }
}

/* 17.1 SPECIAL GUESTS ------------------------------------------------------
   Δύο στήλες: το δημιουργικό αριστερά, το κείμενο δεξιά. Η εικόνα είναι
   κάθετη (4:5), οπότε της δίνουμε σταθερό ανώτατο πλάτος — αλλιώς σε μεγάλη
   οθόνη τραβάει όλο το ύψος της ενότητας. */
.guests {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(123, 47, 168, .18), transparent 60%),
    rgba(255, 255, 255, .03);
}
.guests__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
}
.guests__body h2 { font-size: var(--fs-xl); }
/* Το h2 του μπλοκ είναι ήδη μικρότερο από ένα κανονικό h2· χωρίς αυτό το
   h3 έβγαινε στο ΙΔΙΟ μέγεθος και χανόταν η ιεραρχία. */
.guests__body h3 { font-size: var(--fs-lg); }

@media (max-width: 900px) {
  .guests { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-5); }
  .guests__img { max-width: 260px; margin-inline: auto; }
}

/* Αφίσα με κείμενο (διαγωνισμός): στα 320px δεν διαβάζεται τίποτα από όσα
   γράφει. Μεγαλύτερη στήλη στο desktop, όλο το πλάτος (ως 480px) στο κινητό.
   Το sizes του <img> ακολουθεί ακριβώς αυτά τα νούμερα. */
.guests--poster { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
@media (max-width: 900px) {
  .guests--poster { grid-template-columns: 1fr; }
  .guests--poster .guests__img { max-width: 480px; }
}

/* Δεύτερο μπλοκ .guests αμέσως μετά το πρώτο (αρχική: guests → διαγωνισμός):
   καθρέφτης, αφίσα δεξιά, για να μη διαβάζονται σαν ένα κουτί που
   επαναλαμβάνεται. Στο κινητό στοιβάζεται κανονικά, με την εικόνα πρώτη. */
.guests--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
.guests--flip .guests__img { order: 2; }
@media (max-width: 900px) {
  .guests--flip { grid-template-columns: 1fr; }
  .guests--flip .guests__img { order: 0; }
}

/* 17.2 ΧΟΡΗΓΟΙ ΜΕ ΛΟΓΟΤΥΠΟ ------------------------------------------------
   Η κενή θέση χορηγού είναι διάστικτο περίγραμμα· η γεμάτη είναι συμπαγής
   και ανοιχτόχρωμο πλαίσιο, γιατί τα λογότυπα έρχονται σε διαφορετικά
   χρώματα και χρειάζονται ουδέτερο φόντο για να διαβάζονται όλα. */
.logo-card--filled {
  border-style: solid;
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, .92);
  padding: var(--space-4);
}
.logo-card--filled img { max-width: 100%; max-height: 74px; width: auto; height: auto; object-fit: contain; }
/* Χορηγός χωρίς λογότυπο (π.χ. RIKA Travel μέχρι να έρθει αρχείο): το
   όνομα πάνω στη λευκή κάρτα. Το ανοιχτό κείμενο του .logo-card b έβγαινε
   εδώ σε αντίθεση 1,03:1 — πρακτικά αόρατο. */
.logo-card--filled b { color: var(--purple-950); }
/* Χορηγός με ιστοσελίδα: η κάρτα είναι <a>. Χωρίς υπογράμμιση — το λογότυπο
   ή το όνομα είναι το ίδιο το «κείμενο» του συνδέσμου· το πλαίσιο που
   χρωματίζεται στο hover (όπως κάθε κάρτα) δείχνει ότι πατιέται. */
a.logo-card { text-decoration: none; }

/* 17.3 ΚΑΡΤΑ ΕΚΘΕΤΗ -------------------------------------------------------
   Ο κατάλογος έχει 63 λογότυπα σε κάθε χρώμα και σχήμα. Δύο αποφάσεις:

   · Το λογότυπο πάει σε ΤΕΤΡΑΓΩΝΟ πλαίσιο σταθερού ύψους. Αλλιώς ένα
     πανό 4:1 δίπλα σε ένα κυκλικό σήμα κάνει το πλέγμα να χοροπηδάει.
   · Το όνομα γράφεται ΑΠΟ ΚΑΤΩ, έξω από το λευκό πλαίσιο. Πολλά
     λογότυπα είναι εικαστικά χωρίς όνομα μέσα τους — χωρίς λεζάντα ο
     επισκέπτης βλέπει 63 εικόνες και κανένα εκθέτη. */
.logo-card--exhibitor {
  align-content: start;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-color: var(--line);
  background: none;
}
.logo-card--exhibitor img {
  width: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: rgba(255, 255, 255, .92);
  padding: var(--space-4);
}
.logo-card--exhibitor figcaption,
.logo-card--exhibitor .logo-card__name {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  text-align: center;
  overflow-wrap: break-word;
}
.logo-card--exhibitor:hover { border-color: var(--orange-500); }

/* Συνεργάτες δράσεων: λίστα, όχι λογότυπα — δεν έχουμε λογότυπα για όλους */
.partners { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-4); }
.partners li {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 700;
}
.partners li span { display: block; margin-top: 4px; font-weight: 400; font-size: var(--fs-xs); color: var(--faint); letter-spacing: .08em; text-transform: uppercase; }
/* Πρώτη, σε ΟΛΗ τη σειρά: οι υπόλοιποι είναι 12, που μοιράζονται ακριβώς σε
   1, 2, 3 και 4 στήλες (κινητό → υπολογιστής). Ένας 13ος μέσα στο πλέγμα
   θα άφηνε ένα κουτί μόνο του στην τελευταία σειρά σε κάθε πλάτος. */
.partners .partners__lead { grid-column: 1 / -1; padding: 0; border-color: var(--orange-500); }
.partners__lead a { display: block; padding: var(--space-4) var(--space-5); color: inherit; text-decoration: none; }
.partners__lead a:hover { color: var(--orange-300); }

/* 17.3 ΚΑΡΤΕΣ WORKSHOP -----------------------------------------------------
   Η εικόνα είναι το επίσημο δημιουργικό (4:5). Το κείμενο ΔΕΝ βασίζεται σε
   αυτήν: η ώρα και το όνομα υπάρχουν και ως HTML, ώστε να διαβάζονται από
   readers, να βρίσκονται από αναζήτηση και να μεταφράζονται. */
.ws-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}
.ws-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .03);
  transition: transform .25s ease, border-color .25s ease;
}
.ws-card:hover { transform: translateY(-4px); border-color: var(--orange-500); }
.ws-card img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 5; object-fit: cover; }
.ws-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
/* Σύνδεσμος αγοράς μέσα στην κάρτα workshop. Υπογράμμιση, όχι μόνο
   χρώμα: ο σύνδεσμος πρέπει να ξεχωρίζει και χωρίς αντίληψη χρώματος. */
.ws-card__buy {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--orange-400);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.ws-card__buy:hover { color: var(--peach); }

.ws-card__time {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--orange-400);
  line-height: 1;
}
.ws-card h4 { font-size: 1rem; line-height: 1.25; }
.ws-card__by { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.ws-card .mt-4 { margin-top: auto; padding-top: var(--space-4); }

/* ==========================================================================
   18) ΚΑΤΑΣΤΗΜΑ
   Στατική όψη. Στο WordPress όλο αυτό το κομμάτι το αναλαμβάνει το
   WooCommerce — οι κλάσεις μένουν για να κρατηθεί η εμφάνιση.
   ========================================================================== */

/* Μήνυμα κατάστασης: το λέμε εμείς πριν το ανακαλύψει ο επισκέπτης. */
.notice {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid rgba(239, 109, 0, .35);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: rgba(239, 109, 0, .08);
  font-size: var(--fs-sm);
  color: var(--peach);
}

/* Καλάθι στο header */
.cart-link {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--text);
  flex: 0 0 auto;
  transition: border-color .2s ease, color .2s ease;
}
.cart-link:hover { border-color: var(--orange-500); color: var(--orange-400); }
.cart-link svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cart-link__n {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--orange-500);
  color: #14040a;
  font-size: .66rem;
  font-weight: 800;
  line-height: 1;
}

/* Πλέγμα προϊόντων */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-5);
}
.prod {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .03);
  transition: transform .25s ease, border-color .25s ease;
}
.prod:hover { transform: translateY(-4px); border-color: var(--orange-500); }

/* Θέση φωτογραφίας. ΔΕΝ είναι γκρι κουτί «λείπει εικόνα»: είναι σκηνικό με
   το εικονίδιο της κατηγορίας, ώστε η σελίδα να στέκει και χωρίς φωτογραφίες. */
.prod__link { display: block; position: relative; }
.prod__ph {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  font-size: 2.6rem;
  background:
    radial-gradient(90% 90% at 50% 20%, rgba(239, 109, 0, .16), transparent 62%),
    linear-gradient(180deg, #170b2b, #0b0616);
  border-bottom: 1px solid var(--line);
}
.prod__body { padding: var(--space-5); display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.prod__cat { font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.prod__name { font-size: 1.02rem; line-height: 1.25; }
.prod__name a:hover { color: var(--orange-400); }
.prod__desc { font-size: var(--fs-sm); color: var(--muted); }
.prod__price { margin-top: auto; padding-top: var(--space-4); font-size: var(--fs-sm); color: var(--faint); }
.prod__price span { color: var(--peach); font-weight: 700; }

/* Σελίδα προϊόντος */
.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; margin-top: var(--space-6); }
.product__ph {
  display: grid;
  place-items: center;
  gap: var(--space-3);
  aspect-ratio: 1;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: radial-gradient(90% 90% at 50% 25%, rgba(239, 109, 0, .14), transparent 64%), #0d0719;
  color: var(--faint);
}
.product__ph span { font-size: 3.4rem; }
.product__ph p { margin: 0; font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase; }
.product__thumbs { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.product__thumb { width: 64px; aspect-ratio: 1; border: 1px dashed var(--line); border-radius: var(--radius); }
.product__thumb.is-active { border-style: solid; border-color: var(--orange-500); }
.product__price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 900; color: var(--faint); }
.product__price span { color: var(--peach); }

/* Μεγέθη: radio που μοιάζουν με κουμπιά — σε κινητό φαίνονται όλα μαζί,
   ενώ ένα <select> θα έκρυβε τις επιλογές πίσω από ένα άνοιγμα. */
.sizes { border: 0; padding: 0; margin: 0; }
.sizes legend { font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: var(--space-3); }
.sizes label { display: inline-block; margin: 0 8px 8px 0; }
.sizes input { position: absolute; opacity: 0; width: 0; height: 0; }
.sizes span {
  display: grid;
  place-items: center;
  min-width: 52px;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.sizes input:checked + span { border-color: var(--orange-500); background: rgba(239, 109, 0, .14); color: var(--peach); }
.sizes input:focus-visible + span { outline: 2px solid var(--orange-400); outline-offset: 2px; }

/* Καλάθι */
.cart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--space-7); align-items: start; }
.cart__empty { padding: var(--space-7); text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--muted); }
.cart__empty a { color: var(--orange-300); text-decoration: underline; text-underline-offset: 3px; }
.cart__row {
  display: grid;
  grid-template-columns: 62px 1fr auto auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}
.cart__thumb { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius); background: #140a24; font-size: 1.5rem; }
.cart__what { display: grid; gap: 2px; }
.cart__what span { font-size: var(--fs-xs); color: var(--faint); }
.cart__price { color: var(--muted) !important; }
.cart__qty { font-weight: 700; color: var(--peach); }
.cart__remove { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--faint); cursor: pointer; }
.cart__remove:hover { border-color: var(--orange-500); color: var(--orange-400); }
.cart__summary { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .03); }
.cart__summary h2 { font-size: var(--fs-lg); }
.cart__totals { margin: var(--space-4) 0 var(--space-4); display: grid; gap: var(--space-3); }
.cart__totals div { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--fs-sm); }
.cart__totals dt { color: var(--muted); }
.cart__totals dd { margin: 0; color: var(--text); }
.cart__grand { padding-top: var(--space-3); border-top: 1px solid var(--line); font-weight: 800; }
.cart__grand dd { color: var(--peach); }

@media (max-width: 860px) {
  .product { grid-template-columns: 1fr; gap: var(--space-6); }
  .cart { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .cart__row { grid-template-columns: 48px 1fr auto; row-gap: 8px; }
  .cart__remove { grid-column: 3; }
}

/* 17.4 ΜΗΝΥΜΑ ΦΟΡΜΑΣ ------------------------------------------------------
   Εμφανίζεται πάνω από τη φόρμα μετά την υποβολή, στο WordPress. Στο
   στατικό δεν το βλέπει κανείς — δεν υπάρχει server να απαντήσει.
   Το role="status" το διαβάζει ο αναγνώστης οθόνης χωρίς να κλέψει την
   εστίαση: ο χρήστης μαθαίνει ότι στάλθηκε, χωρίς να χάσει τη θέση του. */
.form-notice {
  margin: 0 0 var(--space-6);
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-weight: 600;
}
.form-notice--ok {
  border-color: rgba(122, 255, 122, .35);
  background: rgba(30, 90, 40, .22);
  color: #b9f5c0;
}
.form-notice--error {
  border-color: rgba(239, 109, 0, .45);
  background: rgba(90, 30, 10, .24);
  color: var(--peach);
}
/* Όταν απορρίπτονται φωτογραφίες, το μήνυμα λέει ΠΟΙΕΣ και γιατί — λίστα,
   όχι μία πρόταση που ο εκθέτης θα έπρεπε να αποκωδικοποιήσει. */
.form-notice p { margin: 0; }
.form-notice ul { margin: var(--space-3) 0; padding-left: 1.3em; list-style: disc; font-weight: 400; }
.form-notice span { display: block; font-weight: 400; }

/* Ο έλεγχος πριν την υποβολή (pages.js): εμφανίζεται κάτω από τη ζώνη
   φωτογραφιών τη στιγμή της επιλογής, όχι μετά από ένα ταξίδι στον server. */
.drop-error {
  margin-top: var(--space-3);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(239, 109, 0, .45);
  background: rgba(90, 30, 10, .24);
  color: var(--peach);
  font-size: var(--fs-sm);
}
.drop-error[hidden] { display: none; }
.drop-error ul { margin: 6px 0 0; padding-left: 1.3em; list-style: disc; }

/* 17.5 ΜΠΑΝΕΡ ΣΥΓΚΑΤΑΘΕΣΗΣ -----------------------------------------------
   Εμφανίζεται μόνο αν υπάρχει ρυθμισμένο εργαλείο μέτρησης (δες
   consent.js). Κάτω δεξιά και ΟΧΙ πάνω σε όλη την οθόνη: δεν κρύβει το
   περιεχόμενο, δεν παγιδεύει την εστίαση, και τα δύο κουμπιά έχουν ίδιο
   βάρος — η «άρνηση» δεν είναι κρυμμένη. */
.consent {
  position: fixed;
  left: var(--space-5);
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 90;
  margin-inline: auto;
  max-width: 560px;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(239, 109, 0, .35);
  background: rgba(10, 6, 20, .96);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  backdrop-filter: blur(8px);
}
.consent__text {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
}
.consent__text a { color: var(--orange-300); }
.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.consent__actions .btn { flex: 1 1 auto; justify-content: center; }

@media (prefers-reduced-motion: no-preference) {
  .consent { animation: consent-in .32s ease-out both; }
  @keyframes consent-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}

/* 17.6 ΧΑΡΤΗΣ ΜΕ ΚΛΙΚ ----------------------------------------------------
   Η θέση του χάρτη πριν φορτώσει ο χάρτης. Κρατά το ίδιο ύψος με το
   iframe, ώστε να μη χοροπηδήσει η σελίδα όταν μπει (CLS). */
.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 520px;
  display: grid;
}
.map-embed__load {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-7);
  border: 0;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(239, 109, 0, .10), transparent 70%),
    var(--surface-2);
  color: var(--text);
  font-family: var(--font-body);
  text-align: center;
  cursor: pointer;
  transition: background-color .2s ease;
}
.map-embed__load:hover { background-color: rgba(239, 109, 0, .10); }
.map-embed__load > span[aria-hidden] { font-size: 2.2rem; }
.map-embed__load strong { font-size: var(--fs-lg); }
.map-embed__note {
  max-width: 44ch;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.55;
}
.map-embed.is-loaded { min-height: 0; }

/* 17.7 WOOCOMMERCE -------------------------------------------------------
   Ελάχιστες γέφυρες, ώστε το κατάστημα να μη μοιάζει ξένο σώμα: τα
   κουμπιά και οι τιμές παίρνουν τα χρώματα του site. Η λεπτομερής
   μορφοποίηση γίνεται όταν υπάρχουν πραγματικά προϊόντα — αλλιώς
   στυλάρουμε φαντάσματα. */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  border-radius: 999px;
  border: 1px solid var(--orange-500);
  background: var(--orange-500);
  color: #150018;
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: none;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: var(--orange-300); border-color: var(--orange-300); }
.woocommerce .price,
.woocommerce ul.products li.product .price { color: var(--orange-300); font-weight: 800; }
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  color: var(--text);
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--orange-500);
  background: var(--surface-2);
  color: var(--text);
}