/* ══════════════════════════════════════════════════════════════
   Ioannidis Cars — Design System v2
   Light · Copper · Premium Evolved
   ──────────────────────────────────────────────────────────────
   Signature: dark metrics band (ink bg) = dramatic billboard break
   that makes every light section feel more curated.
══════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Surfaces — glossy white (MyeliTech) */
  --bg:           #f7fafc;
  --bg-alt:       #eef3f8;
  --surface:      #ffffff;
  --surface-2:    #f1f5fa;
  --surface-3:    #e6edf5;

  /* Borders — cool */
  --border:       #e1e8f0;
  --border-2:     #c8d4e0;

  /* Text — charcoal navy (από το logo) */
  --ink:          #16202e;
  --text:         #2b3340;
  --muted:        #66727f;
  --faint:        #6b7684;

  /* Accent — MyeliTech steel blue */
  --accent:       #1a5689;   /* primary blue — κουμπιά / τίτλοι */
  --accent-dark:  #134d7c;   /* darker hover */
  --accent-light: #2b8fd1;   /* bright accent — το «i» του logo, glows */
  --accent-soft:  #d8e6f2;
  --accent-softer:#eef5fb;
  --accent-glow:  rgba(43,143,209,.18);

  /* Status — ψυχρά */
  --green:        #2e8b6b;
  --green-soft:   rgba(46,139,107,.1);
  --red:          #c0463f;
  --red-soft:     rgba(192,70,63,.1);

  /* Gloss helpers (γυαλιστερό λευκό) */
  --glass:        rgba(255,255,255,.72);
  --sheen:        linear-gradient(180deg,#ffffff 0%,#f4f8fc 100%);
  --sheen-strong: linear-gradient(180deg,#ffffff 0%,#eaf2fa 100%);
  --hi-top:       inset 0 1px 0 rgba(255,255,255,.9);

  /* ── ΓΕΩΜΕΤΡΙΑ ΣΕΛΙΔΑΣ ────────────────────────────────────────────
     Τρία tokens που ΠΡΕΠΕΙ να χρησιμοποιεί κάθε σελίδα. Πριν, κάθε
     σελίδα όριζε δικές της τιμές και είχαν αποκλίνει:

       max-width    1260 / 1200 / 1100          (τρία πλάτη)
       padding-top  108 / 100 / 96 / 92 / 90 / 80   (28px διαφορά)
       padding-x     28 / 24 / 22 / 20

     Ο επισκέπτης που αλλάζει γρήγορα σελίδα έβλεπε το περιεχόμενο να
     μετακινείται οριζόντια ΚΑΙ κάθετα. Δεν το ονομάζει «ασυνέπεια
     max-width» — το νιώθει ως πρόχειρο.

     ΑΝ ΠΡΟΣΘΕΣΕΤΕ ΣΕΛΙΔΑ, χρησιμοποιήστε αυτά και όχι νέους αριθμούς. */
  --page-max:  1260px;   /* πλάτος περιεχομένου */
  --page-pad:  28px;     /* οριζόντιο περιθώριο */
  --page-top:  104px;    /* κενό κάτω από το σταθερό header */
  --page-top-sm: 94px;   /* το ίδιο σε κινητό, όπου το header είναι χαμηλότερο */
  --page-pad-sm: 22px;

  /* Typography
     Ένα σημείο ελέγχου για την τυπογραφία τίτλων. Πριν, η γραμματοσειρά
     δηλωνόταν ξεχωριστά σε 14 σημεία μέσα σε 7 αρχεία — κάθε αλλαγή
     σήμαινε 14 επεξεργασίες και ένα ξεχασμένο σημείο έδειχνε άλλη
     γραμματοσειρά σε μία σελίδα.

     Η Georgia μένει στο fallback ως δίχτυ ασφαλείας για την περίπτωση
     που αποτύχει η φόρτωση των woff2. Δεν είναι πλέον η πραγματική
     γραμματοσειρά των ελληνικών τίτλων — η Literata έχει greek subset. */
  --font-display: 'Literata', Georgia, serif;

  /* Radius */
  --r-xs:   3px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-full: 100px;

  /* Legacy aliases */
  --radius:    var(--r-xs);
  --radius-lg: var(--r-sm);

  /* Shadows — ψυχρό slate-blue tint */
  --shadow-xs: 0 1px 3px rgba(22,32,46,.05);
  --shadow-sm: 0 2px 10px rgba(22,32,46,.08), 0 1px 3px rgba(22,32,46,.05);
  --shadow-md: 0 6px 22px rgba(22,32,46,.10), 0 2px 6px rgba(22,32,46,.06);
  --shadow-lg: 0 12px 40px rgba(22,32,46,.12), 0 4px 12px rgba(22,32,46,.07);
  --shadow-xl: 0 20px 56px rgba(22,32,46,.14), 0 8px 18px rgba(22,32,46,.08);
  --shadow-accent: 0 10px 32px rgba(26,86,137,.30);

  /* Easing */
  --ease:      cubic-bezier(.16,.7,.3,1);
  --ease-out:  cubic-bezier(.16,.7,.3,1);
  --ease-circ: cubic-bezier(.2,.9,.3,1);
  --ease-slow: cubic-bezier(.22,.61,.36,1);  /* για αργά, αισθητά reveals */
  --ease-cine: cubic-bezier(.16,.84,.26,1);  /* cinematic: αργό, βαθύ ease-out */

  /* ── ΡΟΛΟΙ (ΚΡΙΣΙΜΟ ΓΙΑ ΤΟ DARK MODE) ──────────────────────
     Το --ink χρησιμοποιούνταν ΚΑΙ ως χρώμα κειμένου ΚΑΙ ως φόντο
     των σκούρων ζωνών (footer, metrics band). Στο dark mode αυτά τα
     δύο θέλουν αντίθετη κατεύθυνση: το κείμενο πρέπει να ανοίξει,
     το πάνελ πρέπει να μείνει σκούρο. Οπότε χωρίστηκαν σε ρόλους. */
  --panel-dark:      #16202e;              /* footer, metrics band, skip-link */
  --on-panel:        #ffffff;              /* έντονο κείμενο πάνω στο πάνελ */
  --on-panel-body:   #d0c8bc;              /* βασικό κείμενο footer */
  --on-panel-soft:   rgba(255,255,255,.62);
  --on-panel-quiet:  rgba(255,255,255,.72);
  --on-panel-faint:  rgba(255,255,255,.50);
  --on-panel-line:   rgba(255,255,255,.08);
  --on-panel-line-2: rgba(255,255,255,.06);
  --on-panel-line-3: rgba(255,255,255,.07);
  --on-panel-edge:   rgba(255,255,255,.10);
  --on-panel-hover:  rgba(255,255,255,.30);
  --on-panel-strong: rgba(255,255,255,.85);
  --on-panel-white:  rgba(255,255,255,.78);
  --on-accent:       #ffffff;              /* κείμενο πάνω σε accent */

  /* Γυαλιστερές επιφάνειες — αλλάζουν πλήρως στο dark */
  --body-top:      #ffffff;
  --glass-strong:  rgba(255,255,255,.88);  /* sticky nav */
  --glass-solid:   rgba(255,255,255,.97);  /* mobile sticky bar */
  --card-glass:    linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.66));
  --sheen-line:    rgba(255,255,255,.38);  /* shimmer sweep */
  --sheen-line-2:  rgba(255,255,255,.42);
  --inner-hi:      rgba(255,255,255,.5);   /* inset highlight */
  --nav-sheen:     rgba(255,255,255,.55);
  --knob:          #ffffff;                /* διακόπτης cookie */

  /* Διακοσμητικά πλέγματα & σκιάσεις */
  --grid-line:     rgba(26,86,137,.032);
  --grid-line-2:   rgba(26,86,137,.24);
  --grid-line-3:   rgba(26,86,137,.26);
  --vignette:      rgba(16,32,46,.07);
  --shadow-up:     0 -2px 20px rgba(22,32,46,.08);
  --hud-soft:      rgba(26,86,137,.06);
  --hud-soft-2:    rgba(26,86,137,.12);
  --hud-line:      rgba(26,86,137,.10);
  --focus-ring:    #ffffff;
}

/* ── DARK THEME ────────────────────────────────────────────────
   Ίδια ονόματα μεταβλητών, άλλες τιμές. Κανένας selector δεν
   ξαναγράφεται — γι' αυτό το token system άξιζε εξαρχής.
   Το data-theme μπαίνει στο <html> από την PHP (cookie) ή από το
   inline script στο <head>, ΠΡΙΝ ζωγραφίσει ο browser. */
[data-theme="dark"] {
  /* Επιφάνειες */
  --bg:           #0f1720;
  --bg-alt:       #0b1119;
  --surface:      #1a2635;
  --surface-2:    #212f41;
  --surface-3:    #29394d;

  --border:       #354456;
  --border-2:     #45566a;

  /* Κείμενο — αντιστρέφεται */
  --ink:          #eef4fa;
  --text:         #c6d2df;
  --muted:        #8d9aa8;
  --faint:        #808d9b;

  /* Accent — ανοίγει, αλλιώς δεν έχει αντίθεση σε σκούρο φόντο.
     Το #1a5689 πάνω σε #0f1720 πέφτει κάτω από το όριο WCAG AA. */
  --accent:       #4b9fdd;
  --accent-dark:  #3688c6;
  --accent-light: #6fb6e9;
  --accent-soft:  #17324a;
  --accent-softer:#122536;
  --accent-glow:  rgba(111,182,233,.22);

  --green:        #45b58d;
  --green-soft:   rgba(69,181,141,.14);
  --red:          #e0685f;
  --red-soft:     rgba(224,104,95,.14);

  /* Gloss — από «γυαλιστερό λευκό» σε «γυαλισμένο μέταλλο» */
  --glass:        rgba(22,32,46,.72);
  --sheen:        linear-gradient(180deg,#202e3f 0%,#1a2635 100%);
  --sheen-strong: linear-gradient(180deg,#253447 0%,#1a2635 100%);
  --hi-top:       inset 0 1px 0 rgba(255,255,255,.05);

  /* Σκιές — πιο βαθιές, αλλιώς χάνονται εντελώς σε σκούρο φόντο */
  --shadow-xs: 0 1px 3px rgba(0,0,0,.35);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.42), 0 1px 3px rgba(0,0,0,.30);
  --shadow-md: 0 6px 22px rgba(0,0,0,.48), 0 2px 6px rgba(0,0,0,.32);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.35);
  --shadow-xl: 0 20px 56px rgba(0,0,0,.60), 0 8px 18px rgba(0,0,0,.38);
  --shadow-accent: 0 10px 32px rgba(75,159,221,.28);

  /* Ρόλοι: το πάνελ ΜΕΝΕΙ σκούρο, λίγο βαθύτερο από τη σελίδα
     ώστε να ξεχωρίζει ακόμη ως ζώνη */
  --panel-dark:      #080d14;
  --on-panel-body:   #c3ccd6;

  /* Γυάλινες επιφάνειες — αντιστρέφονται σε σκούρες ημιδιαφανείς */
  --body-top:      #131d29;
  --glass-strong:  rgba(15,23,32,.88);
  --glass-solid:   rgba(15,23,32,.97);
  --card-glass:    linear-gradient(180deg, rgba(40,56,74,.55), rgba(27,39,54,.42));
  --sheen-line:    rgba(255,255,255,.10);
  --sheen-line-2:  rgba(255,255,255,.12);
  --inner-hi:      rgba(255,255,255,.07);
  --nav-sheen:     rgba(255,255,255,.06);
  --knob:          #e8eef5;

  --grid-line:     rgba(111,182,233,.05);
  --grid-line-2:   rgba(111,182,233,.16);
  --grid-line-3:   rgba(111,182,233,.18);
  --vignette:      rgba(0,0,0,.35);
  --shadow-up:     0 -2px 20px rgba(0,0,0,.45);
  --hud-soft:      rgba(111,182,233,.10);
  --hud-soft-2:    rgba(111,182,233,.18);
  --hud-line:      rgba(111,182,233,.14);
  --focus-ring:    #6fb6e9;
}

/* Ομαλή μετάβαση κατά την εναλλαγή — ΟΧΙ στην πρώτη φόρτωση
   (το .theme-ready μπαίνει από JS μετά το load, αλλιώς η σελίδα
   «σβήνει» μέσα από το light στο dark κάθε φορά που ανοίγει). */
.theme-ready body,
.theme-ready .site-header,
.theme-ready .car-card,
.theme-ready /* ── FOOTER HERO ──────────────────────────────────────────────────────
   Το τηλέφωνο στο ίδιο μέγεθος με το όνομα, σε Literata με tabular-nums.
   Είναι ο λόγος που κάποιος σκρολάρει μέχρι εδώ. */
.footer-hero {
  max-width: var(--page-max); margin: 0 auto;
  padding: 40px 28px 30px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-hero-name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700; color: #fff; letter-spacing: -.025em;
}
.footer-hero-tel {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700; color: #fff; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color .3s var(--ease);
}
.footer-hero-tel:hover { border-bottom-color: #fff; color: #fff; }
@media (max-width: 560px) {
  .footer-hero { padding: 30px 22px 24px; gap: 6px; }
}

.site-footer {
  transition: background-color .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .theme-ready body, .theme-ready .site-header,
  .theme-ready .car-card, .theme-ready .site-footer { transition: none; }
}

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
body {
  /* Γυαλιστερό λευκό: ψυχρά sheens + λεπτό gradient. Το fixed
     attachment δίνει διακριτικό «parallax» αίσθημα καθώς κάνεις scroll. */
  background:
    radial-gradient(1100px 560px at 82% -6%, rgba(43,143,209,.07), transparent 60%),
    radial-gradient(820px 480px at -6% 8%, rgba(26,86,137,.05), transparent 55%),
    linear-gradient(180deg, var(--body-top) 0%, var(--bg) 46%, var(--bg-alt) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }
::selection { background: var(--accent); color: #fff; }

/* ── TYPOGRAPHY HELPERS ────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .7rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent);
}
.eyebrow::before {
  content: ''; width: 28px; height: 1.5px;
  background: currentColor; flex-shrink: 0;
}

/* Legacy alias used in multiple pages */
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .7rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent);
}
.section-eyebrow::before {
  content: ''; width: 28px; height: 1.5px; background: currentColor;
}

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 30px; border-radius: 0;
  background: var(--ink); color: var(--bg);
  font-size: .88rem; font-weight: 600; letter-spacing: .01em;
  border: 1.5px solid var(--ink); transition: all .25s var(--ease);
}
.btn-primary:hover {
  background: var(--accent); border-color: var(--accent); color: #fff;
  transform: translateY(-2px); box-shadow: var(--shadow-accent);
}
.btn-ghost {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 30px; border-radius: 0;
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--border-2);
  font-size: .88rem; font-weight: 600; letter-spacing: .01em;
  transition: all .25s var(--ease);
}
.btn-ghost:hover {
  border-color: var(--ink); transform: translateY(-2px);
  background: var(--surface); color: var(--ink);
}
.btn-accent {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 30px; border-radius: 0;
  background: var(--accent); color: #fff;
  border: 1.5px solid var(--accent);
  font-size: .88rem; font-weight: 700; letter-spacing: .01em;
  transition: all .25s var(--ease);
}
.btn-accent:hover {
  background: var(--accent-dark); border-color: var(--accent-dark);
  transform: translateY(-2px); box-shadow: var(--shadow-accent);
}

/* ── HEADER ────────────────────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  transition: background .35s var(--ease), box-shadow .35s, border-color .35s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(1.7);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm), var(--hi-top);
}
.header-inner {
  max-width: var(--page-max); margin: 0 auto;
  padding: 0 var(--page-pad); height: 72px;
  display: flex; align-items: center; gap: 20px;
}
.site-logo {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; flex-shrink: 0;
}
.logo-ic {
  width: 38px; height: 38px;
  background: var(--ink); color: var(--bg);
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .88rem; letter-spacing: .04em;
  flex-shrink: 0; transition: background .25s;
}
.site-logo:hover .logo-ic { background: var(--accent); }
.logo-text {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); line-height: 1.4;
}
.logo-text small { display: block; font-weight: 400; color: var(--muted); letter-spacing: .12em; }

.main-nav { display: flex; gap: 0; margin: 0 auto; }
.nav-link {
  position: relative; padding: 8px 16px; border-radius: 0;
  font-size: .84rem; font-weight: 500; color: var(--text);
  transition: color .2s; text-decoration: none;
}
.nav-link::after {
  content: ''; position: absolute;
  left: 16px; right: 16px; bottom: 3px; height: 1.5px;
  background: var(--accent); transform: scaleX(0);
  transform-origin: left; transition: transform .28s var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: var(--ink); font-weight: 600; }

.header-cta {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 0;
  background: var(--ink); border: 1.5px solid var(--ink);
  color: var(--bg); font-size: .82rem; font-weight: 600;
  transition: all .25s; flex-shrink: 0; text-decoration: none;
}
.header-cta:hover {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* Burger */
.burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px; margin-left: auto;
}
.burger span {
  display: block; width: 24px; height: 2px;
  background: var(--ink); border-radius: 2px; transition: all .3s var(--ease);
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none; flex-direction: column;
  background: var(--glass-strong); backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  padding: 16px 24px 28px; border-bottom: 1px solid var(--border);
  gap: 2px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 13px 12px; border-radius: 0;
  color: var(--text); font-size: .95rem; font-weight: 500;
  transition: background .2s; text-decoration: none;
}
.mobile-menu a:hover { background: var(--surface-2, var(--surface-2)); color: var(--ink); }
.mobile-menu .mob-phone {
  margin-top: 10px; color: var(--accent); font-weight: 700;
  border-top: 1px solid var(--border); padding-top: 16px;
}

/* ── CAR CARDS ─────────────────────────────────────────────── */
/* ── ΛΩΡΙΔΑ ΣΤΟΛΟΥ ────────────────────────────────────────────────────
   Η υπογραφή του site. Βλ. σχόλιο στην render_fleet_strip().

   Το mask-image σβήνει τα δύο άκρα, ώστε οι φωτογραφίες να μη «μπαίνουν»
   και να «βγαίνουν» απότομα από το κάδρο — φαίνεται σαν η λωρίδα να
   συνεχίζει πέρα από την οθόνη.

   Η κίνηση σταματά σε hover: αν κάποιος θέλει να κοιτάξει ένα αυτοκίνητο,
   δεν πρέπει να του φεύγει. */
.fleet-strip {
  /* ΙΔΙΟ ΠΛΑΤΟΣ ΜΕ ΟΛΟ ΤΟ SITE (1260px + 28px padding), όχι full-bleed.
     Πριν έπιανε από άκρη σε άκρη και ήταν το ΜΟΝΟ στοιχείο της σελίδας
     που το έκανε — έσπαγε το κάθετο πλέγμα που ακολουθούν όλα τα άλλα.

     ΕΦΥΓΕ ΚΑΙ ΤΟ ΣΚΟΥΡΟ ΦΟΝΤΟ: το metrics band από κάτω είναι ήδη σκούρο,
     οπότε τα δύο κολλούσαν σε ένα ενιαίο μαύρο μπλοκ ύψους ~360px. Τώρα οι
     φωτογραφίες κάθονται στο ανοιχτό φόντο — ελαφρύτερο, και το σκούρο
     band ξαναγίνεται το μοναδικό σκούρο σημείο της αρχικής. */
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 28px 34px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.fleet-track {
  display: flex; gap: 10px;
  width: max-content;
  animation: fleet-slide 70s linear infinite;
}
.fleet-strip:hover .fleet-track { animation-play-state: paused; }
.fleet-item {
  position: relative; display: block; flex: 0 0 auto;
  width: 200px; overflow: hidden;
  text-decoration: none;
}
.fleet-item img {
  height: 150px; width: 100%;
  object-fit: cover; display: block;
  filter: saturate(.92);
  transition: filter .3s var(--ease), transform .5s var(--ease);
}
.fleet-item:hover img { filter: saturate(1); transform: scale(1.04); }

/* Τίτλος + τιμή, μόνο σε hover. Η λωρίδα δεν πρέπει να διαβάζεται όσο
   κινείται — θα ήταν θόρυβος. Μόλις ο δείκτης μπει, η κίνηση σταματά
   (fleet-strip:hover) και τότε έχει νόημα να δείξουμε τι είναι. */
.fleet-info {
  position: absolute; inset: auto 0 0 0;
  padding: 22px 10px 9px;
  background: linear-gradient(to top, rgba(10,16,24,.92), transparent);
  color: #fff;
  opacity: 0; transform: translateY(6px);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.fleet-item:hover .fleet-info,
.fleet-item:focus-visible .fleet-info { opacity: 1; transform: none; }
.fleet-name {
  display: block; font-size: .74rem; font-weight: 600;
  line-height: 1.3; margin-bottom: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fleet-price {
  display: block;
  font-family: var(--font-display);
  font-size: .88rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fleet-item:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
/* -50% ακριβώς: εκεί βρίσκεται η αρχή του δεύτερου αντιγράφου. */
@keyframes fleet-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 700px) {
  .fleet-item { width: 138px; }
  .fleet-item img { height: 104px; }
}
/* Χωρίς κίνηση για όποιον το έχει ζητήσει από το λειτουργικό του.
   Η λωρίδα μένει ορατή — απλά ακίνητη. */
@media (prefers-reduced-motion: reduce) {
  .fleet-track { animation: none; }
}

/* ── CAR CARDS — editorial ────────────────────────────────────────────
   ΤΙ ΑΛΛΑΞΕ ΚΑΙ ΓΙΑΤΙ:
   Η παλιά κάρτα ήταν κουτί — border + radius + δύο σκιές + gradient
   φόντο — και έκανε ΕΞΙ πράγματα σε hover (ανασήκωμα, μεγάλωμα σκιάς,
   λάμψη περιγράμματος, αλλαγή χρώματος border, ζουμ φωτό, gradient που
   ακολουθούσε τον cursor). Ήταν το λεξιλόγιο κάθε premium template.

   Τώρα δεν υπάρχει κουτί καθόλου. Η φωτογραφία ΕΙΝΑΙ το αντικείμενο.
   Ένα εφέ σε hover: εναλλαγή φωτογραφιών + η γραμμή πάνω από την τιμή
   γίνεται accent. Ο τίτλος πήρε τη --font-display και ΔΕΝ κόβεται πια
   με ellipsis — παίρνει δεύτερη γραμμή.
   ──────────────────────────────────────────────────────────────────── */
.cars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 34px 26px;
}

.car-card { position: relative; }

.card-img-wrap {
  position: relative; display: block;
  /* 4:3 όπως και η γκαλερί — οι λήψεις είναι 1200×900. Το παλιό 16/10
     πετούσε το 17% κάθε φωτογραφίας. */
  aspect-ratio: 4/3; overflow: hidden;
  background: var(--surface-2);
  margin-bottom: 14px;
}
.card-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity .35s var(--ease);
}
.card-img.swapping { opacity: .55; }

/* Δείκτες φωτογραφιών — λεπτές γραμμές, όχι κουκκίδες. Οι κουκκίδες
   διαβάζονται ως «carousel»· οι γραμμές ως «φιλμ». */
.card-dots {
  position: absolute; top: 10px; left: 10px; right: 10px;
  display: flex; gap: 4px; z-index: 2;
  opacity: 0; transition: opacity .3s var(--ease);
}
.card-img-wrap:hover .card-dots { opacity: 1; }
.card-dot {
  flex: 1; height: 2px;
  background: rgba(255,255,255,.35);
  transition: background .3s;
}
.card-dot.on { background: #fff; }

.card-badge {
  position: absolute; bottom: 10px; left: 10px;
  background: var(--accent); color: #fff;
  font-size: .64rem; font-weight: 700;
  padding: 4px 10px;
  letter-spacing: .09em; text-transform: uppercase;
}
/* Κατάσταση πώλησης. Σκούρο ουδέτερο αντί για accent: το accent σημαίνει
   «δες με» σε όλο το site, ενώ το «Κλεισμένο» σημαίνει το αντίθετο.
   Σταθερή τιμή και όχι token, γιατί το --ink αντιστρέφεται στο dark mode
   και το λευκό κείμενο θα έχανε αντίθεση. */
.card-badge-status { background: #2b3340; }

/* Συλλογή: διάφανο με λεπτό περίγραμμα αντί για γεμάτο χρώμα. Ένα κλασικό
   δεν χρειάζεται να φωνάξει — και το γεμάτο badge θα σκέπαζε κομμάτι της
   φωτογραφίας, που εδώ είναι ακριβώς το προϊόν. */
.card-badge-coll {
  background: rgba(10,15,22,.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.4);
  font-weight: 600;
}

.card-title {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 700; line-height: 1.28;
  letter-spacing: -.015em; margin: 0 0 8px;
}
.card-title a { color: var(--ink); text-decoration: none; }

.card-meta {
  font-size: .79rem; color: var(--muted);
  display: flex; gap: 9px; flex-wrap: wrap;
  padding-bottom: 12px;
}
/* Κάθετος διαχωριστής αντί για τελεία: η τελεία «·» χάνεται οπτικά σε
   μικρό μέγεθος, η κάθετος κρατά ρυθμό. Παράγεται από CSS, οπότε δεν
   υπάρχουν <span class="dot"> στο markup που να διαβάζονται φωναχτά. */
.card-meta span:not(:last-child)::after {
  content: '/'; margin-left: 9px; color: var(--faint);
}

.card-footer {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--ink);
  padding-top: 10px;
  transition: border-color .3s var(--ease);
}
.car-card:hover .card-footer { border-top-color: var(--accent); }

.card-price {
  font-family: var(--font-display);
  font-size: 1.45rem; font-weight: 700;
  letter-spacing: -.025em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.card-was {
  font-size: .76rem; color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--border-2);
  font-variant-numeric: tabular-nums;
}

/* ── SECTION SCAFFOLD ──────────────────────────────────────── */
.section { padding: 88px 0; }
.section-inner { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad); }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 44px; gap: 16px; flex-wrap: wrap;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 700; color: var(--ink);
  letter-spacing: -.02em; line-height: 1.15;
  margin-top: 10px;
}
.see-all {
  font-size: .84rem; font-weight: 600; color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; transition: gap .2s, color .2s;
}
.see-all:hover { gap: 12px; color: var(--accent); }

/* ── METRICS BAND (signature dark strip) ───────────────────── */
.metrics-band {
  background: var(--panel-dark);
  border-top: 3px solid var(--accent);
}
.metrics-inner {
  max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.metric {
  padding: 36px 28px;
  border-right: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column; gap: 5px;
}
.metric:last-child { border-right: none; }
/* Σεριφικοί αριθμοί, ΛΕΥΚΟΙ αντί για accent.
   Το accent σε σκούρο φόντο έμοιαζε με σύνδεσμο· το λευκό διαβάζεται ως
   δεδομένο. Και το tabular-nums κρατά ίδιο πλάτος σε κάθε ψηφίο, ώστε οι
   τέσσερις στήλες να ευθυγραμμίζονται οπτικά. */
.metric-val {
  font-family: var(--font-display);
  font-size: 2.7rem; font-weight: 700; color: #fff;
  letter-spacing: -.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.metric-val .unit {
  font-size: 1.05rem; font-weight: 400;
  opacity: .5; margin-left: 4px;
  letter-spacing: 0;
}
.metric-label { font-size: .78rem; color: #fff; font-weight: 600; }
.metric-desc { font-size: .73rem; color: rgba(255,255,255,.55); line-height: 1.55; }

/* ── PROCESS STEPS ─────────────────────────────────────────── */
.process-section { padding: 96px 0; background: var(--bg-alt); }
.process-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; position: relative; margin-top: 52px;
}
.process-grid::before {
  content: '';
  position: absolute; top: 28px; left: calc(12.5% + 8px); right: calc(12.5% + 8px);
  height: 1px; background: linear-gradient(90deg, var(--border), var(--accent), var(--border));
  z-index: 0;
}
.process-step {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 0 var(--page-pad); position: relative; z-index: 1;
}
.process-num {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 800; color: var(--muted);
  letter-spacing: .05em; margin-bottom: 20px;
  transition: border-color .3s, color .3s, background .3s;
  position: relative; z-index: 1;
}
.process-step:hover .process-num {
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-softer);
}
.process-icon {
  width: 36px; height: 36px; color: var(--accent);
  margin: 0 auto 12px; opacity: .7;
}
.process-step-title {
  font-size: .92rem; font-weight: 700; color: var(--ink);
  margin-bottom: 8px;
}
.process-step-desc {
  font-size: .8rem; color: var(--muted); line-height: 1.7;
}

/* ── ABOUT BAND ────────────────────────────────────────────── */
.about-band { background: var(--surface); padding: 96px 0; }
.about-inner {
  max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad);
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
}
.about-text .section-title { margin-top: 10px; }
.about-text p {
  color: var(--muted); line-height: 1.85; font-size: .93rem;
  margin-bottom: 16px;
}
.about-promises {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  margin-top: 36px; background: var(--border);
  border: 1px solid var(--border); border-radius: 0;
  overflow: hidden;
}
.about-promise {
  background: var(--bg); padding: 20px 22px;
}
.about-promise-icon {
  width: 32px; height: 32px; color: var(--accent);
  margin-bottom: 10px;
}
.about-promise strong {
  display: block; font-size: .88rem; font-weight: 700;
  color: var(--ink); margin-bottom: 4px;
}
.about-promise span { font-size: .8rem; color: var(--muted); line-height: 1.55; }

.about-visual-panel {
  background: var(--panel-dark); border-radius: 0;
  padding: 44px 40px; position: relative; overflow: hidden;
}
.about-visual-panel::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light), var(--accent));
}
.avp-logo {
  /* 700, όχι 800. Το 800 δεν φορτώνεται από το fonts.css, οπότε ο browser
     έκανε faux bold — τέντωνε τεχνητά τα περιγράμματα του 700. Σε 4.5rem
     αυτό φαίνεται λασπωμένο. Ένα σωστά σχεδιασμένο 700 είναι καθαρότερο
     από ένα συνθετικό 800. */
  font-size: 4.5rem; font-weight: 700;
  font-family: var(--font-display); line-height: 1;
  margin-bottom: 32px; letter-spacing: -.03em;
  color: var(--accent-light);                       /* fallback */
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.avp-quote {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 600; font-style: italic;
  color: rgba(255,255,255,.85); line-height: 1.55; margin-bottom: 28px;
}
.avp-attr { font-size: .78rem; color: var(--accent-light); font-weight: 500; letter-spacing: .08em; }
.avp-badge {
  margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.08);
  display: flex; gap: 24px; flex-wrap: wrap;
}
.avp-badge-item {
  display: flex; flex-direction: column; gap: 2px;
}
.avp-badge-item .bval {
  font-size: 1.4rem; font-weight: 800; color: var(--accent);
  letter-spacing: -.02em;
}
.avp-badge-item .blbl { font-size: .72rem; color: rgba(255,255,255,.62); letter-spacing: .06em; }

/* ── CTA BAND ──────────────────────────────────────────────── */
.cta-band {
  padding: 88px 28px;
  background: var(--bg-alt);
  text-align: center;
  border-top: 1px solid var(--border);
}
.cta-inner { max-width: 560px; margin: 0 auto; }
.cta-band .section-title {
  margin: 10px 0 14px;
}
.cta-band p { color: var(--muted); margin-bottom: 32px; font-size: .95rem; line-height: 1.75; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── MOBILE STICKY BAR ─────────────────────────────────────── */
.mobile-sticky {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
  background: var(--glass-solid);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border-top: 1px solid var(--border);
  padding: 9px 0 max(9px, env(safe-area-inset-bottom));
  grid-template-columns: repeat(4, 1fr);
  box-shadow: var(--shadow-up);
}
.sticky-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 6px 4px; text-decoration: none;
  font-size: .64rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
  transition: color .2s; color: var(--muted);
}
.sticky-call  { color: var(--green); }
.sticky-viber { color: #7360f2; }
.sticky-sms   { color: var(--accent); }
.sticky-email { color: #4a76a8; }

/* ── FOOTER ────────────────────────────────────────────────── */
.site-footer {
  background: var(--panel-dark);
  color: var(--on-panel-body);
  margin-top: 0;
}
.footer-accent-line {
  height: 3px;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent), var(--accent-light), var(--accent), var(--accent-dark));
}
.footer-inner {
  max-width: var(--page-max); margin: 0 auto;
  padding: 64px 28px 44px;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
}
.footer-brand .footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-brand .logo-ic { background: var(--accent); color: #fff; }
.footer-brand .logo-text { color: #fff; }
.footer-brand .logo-text small { color: rgba(255,255,255,.62); }
.footer-brand p { color: rgba(255,255,255,.62); font-size: .85rem; line-height: 1.75; margin-bottom: 20px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,.62); font-size: .8rem; font-weight: 500;
  padding: 6px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 0;
  transition: all .2s;
}
.footer-social a:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.footer-madeby {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .76rem; color: rgba(255,255,255,.62); line-height: 1.7;
}
.footer-madeby a {
  color: var(--accent-light); font-weight: 600; transition: color .2s;
}
.footer-madeby a:hover { color: #fff; }
.footer-col h4 {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.62); margin-bottom: 20px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.footer-col a {
  display: flex; align-items: flex-start; gap: 7px;
  color: rgba(255,255,255,.72); font-size: .84rem;
  margin-bottom: 10px; transition: color .2s; text-decoration: none;
}
.footer-col a:hover { color: #fff; }
.footer-col p { color: rgba(255,255,255,.62); font-size: .82rem; line-height: 1.8; }
.footer-bottom {
  max-width: var(--page-max); margin: 0 auto;
  padding: 20px 28px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px;
  font-size: .76rem; color: rgba(255,255,255,.62);
}
.footer-bottom a { color: rgba(255,255,255,.78); }
.footer-credit {
  display: inline-flex; align-items: center; gap: 14px;
}
.footer-credit a {
  color: var(--accent-light); font-weight: 600; transition: color .2s;
}
.footer-credit a:hover { color: #fff; }
.footer-credit .footer-xml {
  color: rgba(255,255,255,.78); font-weight: 400;
  padding-left: 14px; border-left: 1px solid rgba(255,255,255,.1);
}
.footer-credit .footer-xml:hover { color: #fff; }

/* ── PAGE HERO (inner pages) ───────────────────────────────── */
.page-hero {
  padding: 148px 28px 56px;
  max-width: var(--page-max); margin: 0 auto;
}
.page-hero-inner { max-width: 640px; }
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 700; color: var(--ink);
  letter-spacing: -.02em; line-height: 1.12;
  margin: 12px 0 16px;
}
.page-hero h1 em { font-style: italic; color: var(--accent); }
.page-hero p { color: var(--muted); font-size: 1rem; line-height: 1.8; max-width: 520px; }

/* ── AOS — FAST, snappy reveals (όχι κουραστικά) ──────────── */
[data-aos] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .42s var(--ease-out), transform .42s var(--ease-out);
  will-change: opacity, transform;
}
[data-aos].aos-visible { opacity: 1; transform: none; }
[data-aos-delay="1"] { transition-delay: .04s; }
[data-aos-delay="2"] { transition-delay: .08s; }
[data-aos-delay="3"] { transition-delay: .12s; }
[data-aos-delay="4"] { transition-delay: .16s; }
[data-aos-delay="5"] { transition-delay: .20s; }
[data-aos-delay="6"] { transition-delay: .24s; }
[data-aos-delay="7"] { transition-delay: .28s; }
[data-aos-delay="8"] { transition-delay: .32s; }

/* Hero entrance — fast */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.page-loaded .hero-animate {
  animation: heroIn .55s var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-aos] { opacity: 1; transform: none; }
  .page-loaded .hero-animate { animation: none; opacity: 1; }
}

/* (το παλιό word-by-word reveal αφαιρέθηκε — κούραζε) */

/* ── SCROLL PROGRESS BAR (tech touch) ──────────────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 600;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  box-shadow: 0 0 12px var(--accent-glow);
  pointer-events: none;
}

/* ── BUTTON SHINE SWEEP (tech touch) ───────────────────────── */
.btn-primary, .btn-accent, .header-cta { position: relative; overflow: hidden; }
.btn-primary::after, .btn-accent::after, .header-cta::after {
  content: ''; position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, var(--sheen-line), transparent);
  transform: skewX(-18deg); transition: left .6s var(--ease);
}
.btn-primary:hover::after, .btn-accent:hover::after, .header-cta:hover::after { left: 140%; }

/* ── FX FIELD — tech grid + ambient glow (data-visualizer vibe) ── */
.fx-field { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fx-grid {
  position: absolute; inset: -14%;
  background-image:
    linear-gradient(to right,  var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(circle at 50% 26%, #000 0%, rgba(0,0,0,.45) 46%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 26%, #000 0%, rgba(0,0,0,.45) 46%, transparent 78%);
  opacity: 0; transition: opacity 1.4s var(--ease-cine);
  will-change: transform;
}
.fx-grid.lit { opacity: 1; }

/* particle constellation — «data network» (λευκό φόντο κυρίαρχο) */
.fx-constellation {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity 1.4s var(--ease-cine);
}
.fx-constellation.lit { opacity: 1; }

/* cursor-follow glow (διακριτικό μπλε halo στο φόντο) */
.fx-glow {
  position: absolute; inset: -28%;
  background:
    radial-gradient(480px 480px at 16% 24%, rgba(43,143,209,.085), transparent 60%),
    radial-gradient(600px 600px at 88% 70%, rgba(26,86,137,.075), transparent 62%),
    radial-gradient(420px 420px at 62% 8%,  rgba(43,143,209,.055), transparent 60%),
    radial-gradient(360px 360px at 40% 88%, rgba(43,143,209,.04),  transparent 60%);
  filter: blur(24px);
  animation: ambientDrift 26s var(--ease) infinite alternate;
  will-change: transform;
}
@keyframes ambientDrift {
  from { transform: translate3d(-3%, -2%, 0) scale(1);    opacity: .9; }
  to   { transform: translate3d(3%, 2.5%, 0) scale(1.12); opacity: 1; }
}
/* cinematic vignette για βάθος */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 60%, var(--vignette) 100%);
}
@media (prefers-reduced-motion: reduce) { .fx-glow { animation: none; } }

/* ── REVEAL GLOW — borders φωτίζονται καθώς μπαίνουν στο view ── */
.glow-pulse { animation: borderGlow 1.3s var(--ease-cine); }
@keyframes borderGlow {
  0%   { box-shadow: 0 0 0 1px rgba(43,143,209,0); }
  38%  { box-shadow: 0 0 0 1px var(--accent-light), 0 0 28px -4px var(--accent-glow); }
  100% { box-shadow: 0 0 0 1px rgba(43,143,209,0); }
}

/* ── CINEMATIC ENTRANCE (first-impression wow) ─────────────── */
.fx-enter {
  position: fixed; inset: 0; z-index: 950; pointer-events: none;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity .7s var(--ease-cine);
}
.fx-enter.gone { opacity: 0; }
.fx-enter .en-bloom {
  position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(43,143,209,.16), rgba(43,143,209,.05) 38%, transparent 62%);
  opacity: 0; transform: scale(.6);
  animation: enBloom .85s var(--ease-cine) forwards;
}
@keyframes enBloom { 0% { opacity: 0; transform: scale(.6) } 55% { opacity: 1 } 100% { opacity: .35; transform: scale(1.1) } }
.fx-enter .en-line {
  position: relative; height: 2px; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-light), transparent);
  box-shadow: 0 0 20px var(--accent-glow);
  animation: enLine .95s var(--ease-cine) .12s forwards;
}
.fx-enter .en-scan {
  position: absolute; left: 0; right: 0; top: -20%; height: 16%;
  background: linear-gradient(180deg, transparent, rgba(43,143,209,.14), transparent);
  animation: enScan .95s var(--ease-cine) .1s forwards;
}
@keyframes enGrid { from { opacity: 0 } to { opacity: 1 } }
@keyframes enLine { from { width: 0 } to { width: 220px } }
@keyframes enScan { from { top: -20% } to { top: 120% } }

/* ── COOKIE CONSENT — HUD / system-notification ────────────── */
.cookie-hud {
  position: fixed; left: 18px; bottom: 18px; z-index: 800;
  width: min(420px, calc(100vw - 36px));
  border-radius: 0; padding: 16px 18px 15px;
  background: var(--card-glass);
  backdrop-filter: blur(26px) saturate(1.8);
  -webkit-backdrop-filter: blur(26px) saturate(1.8);
  border: 1px solid rgba(43,143,209,.28);
  box-shadow: var(--shadow-xl), inset 0 0 0 1px var(--inner-hi), 0 0 28px -8px var(--accent-glow);
  transform: translateY(170%) scale(.98); opacity: 0;
  transition: transform 1s var(--ease-cine), opacity 1s var(--ease-cine);
  overflow: hidden;
}
.cookie-hud.show { transform: none; opacity: 1; }
.cookie-hud::before {                 /* glowing animated top border */
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-light), var(--accent), transparent);
  background-size: 200% 100%; animation: hudBorder 4s linear infinite;
}
@keyframes hudBorder { from { background-position: 200% 0 } to { background-position: -200% 0 } }
.cookie-hud .hud-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.cookie-hud .hud-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent-light);
  animation: hudPulse 1.8s var(--ease) infinite;
}
@keyframes hudPulse {
  0%   { box-shadow: 0 0 0 0 rgba(43,143,209,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(43,143,209,0); }
  100% { box-shadow: 0 0 0 0 rgba(43,143,209,0); }
}
.cookie-hud .hud-label {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-dark); font-weight: 600;
}
.cookie-hud .hud-body { font-size: .82rem; line-height: 1.55; color: var(--text); margin-bottom: 14px; }
.cookie-hud .hud-body strong { color: var(--ink); }
.cookie-hud .hud-actions { display: flex; gap: 8px; }
.cookie-hud .hud-btn {
  position: relative; overflow: hidden; flex: 1; cursor: pointer;
  font-family: inherit; font-size: .8rem; font-weight: 600;
  padding: 11px 14px; border-radius: 0; border: 1.5px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background .25s, color .25s, border-color .25s;
}
.cookie-hud .hud-accept {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff;
  box-shadow: 0 6px 18px -4px var(--accent-glow);
}
.cookie-hud .hud-accept:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -6px var(--accent-glow); }
.cookie-hud .hud-accept::after {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, var(--sheen-line-2), transparent);
  transform: skewX(-18deg); transition: left .6s var(--ease); pointer-events: none;
}
.cookie-hud .hud-accept:hover::after { left: 140%; }
.cookie-hud .hud-prefs {
  background: var(--hud-soft); color: var(--accent-dark); border-color: rgba(43,143,209,.28);
}
.cookie-hud .hud-prefs:hover { background: var(--hud-soft-2); transform: translateY(-2px); }
.cookie-hud .hud-panel {
  max-height: 0; opacity: 0; overflow: hidden; margin: 0;
  transition: max-height .5s var(--ease-cine), opacity .45s var(--ease-cine), margin .5s var(--ease-cine);
}
.cookie-hud.open .hud-panel { max-height: 340px; opacity: 1; margin: 6px 0 14px; }
.cookie-hud .hud-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--hud-line);
}
.cookie-hud .hud-row .rt { font-size: .8rem; color: var(--ink); font-weight: 600; }
.cookie-hud .hud-row .rd { font-size: .7rem; color: var(--muted); margin-top: 1px; }
.hud-tg {
  position: relative; width: 38px; height: 22px; flex-shrink: 0; border-radius: var(--r-full);
  background: var(--border-2); cursor: pointer; transition: background .25s;
}
.hud-tg::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--knob); box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: left .25s var(--ease);
}
.hud-tg.on { background: var(--accent); }
.hud-tg.on::after { left: 18px; }
.hud-tg.locked { background: var(--accent); opacity: .45; cursor: not-allowed; }
@media (max-width: 600px) {
  .cookie-hud { left: 12px; right: 12px; bottom: 12px; width: auto; }
}

/* ── FORM ELEMENTS (shared) ────────────────────────────────── */
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 11px 14px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 0; color: var(--text); font-size: .9rem;
  font-family: inherit; transition: border-color .2s, box-shadow .2s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-textarea { resize: vertical; min-height: 120px; }
.form-label { font-size: .76rem; font-weight: 600; color: var(--muted); display: block; margin-bottom: 6px; letter-spacing: .03em; text-transform: uppercase; }
.form-group { margin-bottom: 18px; }

/* ── UTILITIES ─────────────────────────────────────────────── */
.container { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad); }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .process-grid { grid-template-columns: 1fr 1fr; }
  .process-grid::before { display: none; }
  .about-inner { gap: 48px; }
}
@media (max-width: 860px) {
  .about-inner { grid-template-columns: 1fr; }
  .metrics-inner { grid-template-columns: 1fr 1fr; }
  .metric:nth-child(2) { border-right: none; }
  .metric:nth-child(1), .metric:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.07); }
}
@media (max-width: 768px) {
  .main-nav, .header-cta { display: none; }
  .burger { display: flex; }
  .mobile-sticky { display: grid; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
  .process-grid { grid-template-columns: 1fr; }
  /* Clear space so the sticky bar doesn't cover the footer credit */
  .site-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .footer-bottom { justify-content: center; text-align: center; }
  .footer-credit { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 480px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
  .metrics-inner { grid-template-columns: 1fr 1fr; }
  .about-promises { grid-template-columns: 1fr; }
  html { font-size: 14px; }
}

/* ── BACKWARD COMPAT ALIASES (for cars.php / car.php) ── */
:root {
  --surface2: var(--surface-2);
}

/* ══════════════════════════════════════════════════════════════
   ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ (WCAG 2.1 AA)
   ──────────────────────────────────────────────────────────────
   Προσθήκη: skip link + ορατό focus σε πλοήγηση με πληκτρολόγιο.
   ΜΗΝ αφαιρεθεί — καλύπτει τα κριτήρια 2.4.1 και 2.4.7.
══════════════════════════════════════════════════════════════ */

/* ── SKIP LINK (WCAG 2.4.1 «Bypass Blocks») ─────────────────
   Κρυμμένο μέχρι να πατηθεί Tab. Επιτρέπει σε χρήστη πληκτρολογίου
   ή screen reader να προσπεράσει το μενού και να πάει στο περιεχόμενο. */
.skip-link {
  position: absolute;
  top: -100px; left: 12px; z-index: 9999;
  background: var(--panel-dark); color: var(--on-panel);
  padding: 12px 20px; border-radius: 0;
  font-size: .9rem; font-weight: 700; text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: top .18s var(--ease);
}
.skip-link:focus {
  top: 12px;
  color: #fff;
  outline: 3px solid var(--accent-light);
  outline-offset: 2px;
}

/* Στόχος του skip link — αόρατο άγκιστρο, δεν πιάνει χώρο */
#main-content { display: block; height: 0; scroll-margin-top: 96px; }
#main-content:focus { outline: none; }

/* ── ΟΡΑΤΟ FOCUS (WCAG 2.4.7 «Focus Visible») ───────────────
   :focus-visible = εμφανίζεται ΜΟΝΟ σε πλοήγηση με πληκτρολόγιο,
   όχι σε κλικ με ποντίκι — άρα δεν χαλάει την αισθητική. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 0;
}

/* Σε σκούρα φόντα το μπλε δεν φαίνεται — λευκό δαχτυλίδι */
.site-footer a:focus-visible,
.site-footer button:focus-visible,
.metrics-band a:focus-visible,
.hero-search-card a:focus-visible,
.about-visual-panel a:focus-visible,
.mobile-sticky a:focus-visible,
.lightbox button:focus-visible,
.gallery-arrow:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Τα πεδία φόρμας έπαιρναν outline:none — επαναφορά ορατής ένδειξης */
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible,
.filter-input:focus-visible,
.filter-select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

/* Νομικά στοιχεία επιχείρησης — κάτω γραμμή footer */
.footer-legal {
  max-width: var(--page-max); margin: 0 auto;
  padding: 0 28px 20px;
  font-size: .72rem; color: rgba(255,255,255,.62);
  line-height: 1.6;
}
@media (max-width: 768px) {
  .footer-legal { text-align: center; padding-bottom: 14px; }
}

/* ── ΕΝΑΛΛΑΓΗ ΘΕΜΑΤΟΣ ──────────────────────────────────────── */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--muted); cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.theme-toggle:hover {
  color: var(--accent); border-color: var(--accent-soft);
  background: var(--accent-softer); transform: translateY(-1px);
}
.theme-toggle svg { display: block; }

/* Ήλιος όταν είμαστε στο σκοτεινό (=«πάτα για φως»), φεγγάρι στο φωτεινό.
   Το εικονίδιο δείχνει ΤΙ ΘΑ ΓΙΝΕΙ, όχι πού βρίσκεσαι. */
.theme-toggle .ico-sun  { display: none; }
[data-theme="dark"] .theme-toggle .ico-sun  { display: block; }
[data-theme="dark"] .theme-toggle .ico-moon { display: none; }

@media (max-width: 560px) {
  .theme-toggle { width: 33px; height: 33px; }
}

/* ── ΕΝΑΛΛΑΓΗ ΓΛΩΣΣΑΣ ──────────────────────────────────────── */
.lang-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; min-width: 40px; padding: 0 11px; flex-shrink: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--muted); text-decoration: none;
  font-size: .74rem; font-weight: 800; letter-spacing: .06em;
  transition: color .2s var(--ease), background .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.lang-toggle:hover {
  color: var(--accent); border-color: var(--accent-soft);
  background: var(--accent-softer); transform: translateY(-1px);
}
@media (max-width: 560px) {
  .lang-toggle { height: 33px; min-width: 36px; padding: 0 9px; font-size: .7rem; }
}


/* ══════════════════════════════════════════════════════════════════════
   IC-BUILD: 2026-08-05-a   style.css
   ΜΙΚΡΟΤΥΠΟΓΡΑΦΙΑ + ΕΚΤΥΠΩΣΗ
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1 · ΤΙΜΕΣ ΔΕΝ ΣΠΑΝΕ ────────────────────────────────────────────────
   Η format_price() στο includes.php παράγει «12.500 €» με ΚΑΝΟΝΙΚΟ κενό.
   Σε στενή στήλη ο browser επιτρέπεται να σπάσει εκεί, οπότε το € πέφτει
   μόνο του στην επόμενη γραμμή. Στη διπλή τιμή — το δυνατότερο στοιχείο
   του site — αυτό είναι ορατή ζημιά.

   ΓΙΑΤΙ ΜΕ CSS ΚΑΙ ΟΧΙ ΜΕ NBSP ΣΤΗΝ PHP: η format_price() ζει στο
   includes.php και δεν ξέρω αν την καλεί το feed.php. Αλλαγή του χαρακτήρα
   κενού θα άλλαζε το XML προς Car.gr. Το CSS δεν αγγίζει τα δεδομένα.

   ΓΙΑΤΙ ΟΧΙ ΣΤΟ .spec-val: εκεί μπαίνει και ελεύθερο κείμενο (χρώμα,
   κατάσταση). Το nowrap θα το έβγαζε έξω από το panel. */
.card-price, .card-was, .fleet-price,
.car-panel-price, .price-was, .price-pill,
.key-spec-val {
  white-space: nowrap;
}

/* ── 2 · ΤΙΤΛΟΙ ΧΩΡΙΣ ΟΡΦΑΝΗ ΛΕΞΗ ───────────────────────────────────────
   «Volkswagen Polo 1.0 MPI Comfortline» σε στενό panel άφηνε το τελευταίο
   κομμάτι μόνο του στην τρίτη γραμμή. Το balance μοιράζει τις λέξεις σε
   ίσες γραμμές αντί να γεμίζει την πρώτη.
   Progressive enhancement: όπου δεν υποστηρίζεται, αγνοείται σιωπηλά. */
h1, h2, h3,
.car-panel-title, .cars-page-title, .page-hero h1 {
  text-wrap: balance;
}

/* ── 3 · ΣΥΛΛΑΒΙΣΜΟΣ ΣΤΙΣ ΠΕΡΙΓΡΑΦΕΣ ───────────────────────────────────
   Ελληνικές λέξεις τύπου «αντιπροσωπείας» (15 χαρακτήρες) πέφτουν
   ολόκληρες στην επόμενη γραμμή σε κινητό και αφήνουν τρύπα μισής γραμμής.

   Ο browser συλλαβίζει ελληνικά ΜΟΝΟ αν το lang δηλώνει el. Επαληθεύτηκε:
   includes.php γρ.763 παράγει <html lang="{$lang}"> από τη σταθερά LANG.
   Άρα η προϋπόθεση υπάρχει ήδη — λείπει μόνο η ιδιότητα.

   ΜΟΝΟ ΣΕ ΠΡΟΖΑ. Ποτέ σε τίτλους: θα έσπαγε το «Volkswagen» στη μέση. */
.description-section p,
.page-hero p,
.guide-body p {
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ══════════════════════════════════════════════════════════════════════
   ΕΚΤΥΠΩΣΗ
   ──────────────────────────────────────────────────────────────────────
   ΓΙΑΤΙ ΥΠΑΡΧΕΙ: ο αγοραστής μεταχειρισμένου τυπώνει 3-4 αγγελίες και τις
   δείχνει σε μηχανικό ή σύζυγο. Είναι το μόνο σημείο όπου το site
   δουλεύει εκτός οθόνης.

   ΤΟ ΣΟΒΑΡΟ ΠΟΥ ΔΙΟΡΘΩΝΕΙ: το [data-aos] { opacity: 0 } κρύβει κάθε
   στοιχείο που δεν έχει πάρει ακόμα την κλάση .aos-visible. Στην εκτύπωση
   τυπώνεται ΟΛΟ το document, όχι μόνο ό,τι έχει δει ο επισκέπτης — άρα
   ό,τι δεν σκρόλαρε βγαίνει ΛΕΥΚΟ. Χωρίς αυτό το block, τα features και η
   περιγραφή απλά δεν υπάρχουν στο χαρτί.

   ΓΙΑΤΙ !important ΠΑΝΤΟΥ: το CSS της καρτέλας ζει σε inline <style> μέσα
   στο car.php (γρ.160-491), δηλαδή φορτώνεται ΜΕΤΑ από αυτό το αρχείο.
   Με ίδια specificity κερδίζει το inline. Το @media print δεν προσθέτει
   βάρος. Δοκιμασμένη επιλογή, όχι τεμπελιά.
   ══════════════════════════════════════════════════════════════════════ */
@media print {

  /* ── Α · ΤΟ ΚΡΙΣΙΜΟ: ακύρωση του AOS ──────────────────────────────── */
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* ── Β · ΕΞΑΝΑΓΚΑΣΜΟΣ ΣΕ ΑΝΟΙΧΤΟ ΘΕΜΑ ─────────────────────────────
     Όποιος τυπώνει με ενεργό dark mode θα έβγαζε λευκά γράμματα σε λευκό
     χαρτί (οι περισσότεροι εκτυπωτές δεν τυπώνουν φόντο) ή θα άδειαζε
     ένα toner. Επαναφέρουμε τα light tokens ΜΟΝΟ για την εκτύπωση. */
  [data-theme="dark"] {
    --bg: #ffffff; --bg-alt: #ffffff;
    --surface: #ffffff; --surface-2: #ffffff; --surface-3: #f4f6f8;
    --border: #c9d2dc; --border-2: #9aa7b5;
    --ink: #000000; --text: #16202e; --muted: #4a5561; --faint: #4a5561;
    --accent: #16202e; --accent-dark: #000000; --accent-light: #16202e;
    --accent-soft: #eef2f6; --accent-softer: #f7f9fb; --accent-glow: transparent;
    --green: #1f5e47; --green-soft: #eef4f1;
    --glass: #ffffff; --sheen: none; --sheen-strong: none; --hi-top: none;
    --shadow-xs: none; --shadow-sm: none;
  }

  /* ── Γ · ΧΑΡΤΙ ──────────────────────────────────────────────────── */
  @page { margin: 14mm 12mm; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10.5pt !important;
  }

  /* ── Δ · ΤΙ ΔΕΝ ΤΥΠΩΝΕΤΑΙ ──────────────────────────────────────────
     Πλοήγηση, κουμπιά, εργαλεία. Ο,τιδήποτε απαιτεί κλικ είναι άχρηστο
     στο χαρτί και τρώει μισή σελίδα. */
  .site-header, .site-footer, .skip-link, .mobile-sticky, .mobile-menu,
  .burger, .theme-toggle, .lang-toggle, .header-cta, .main-nav,
  .footer-hero, .footer-xml, .lightbox,
  .gallery-nav, .gallery-arrow, .gallery-counter, .gallery-thumbs,
  .cta-row, .share-row, .related-section, .breadcrumb,
  .filters-sidebar, .mobile-filter-toggle, .sort-form, .active-filters,
  .btn-filter-apply, .btn-filter-clear, .chip-x,
  iframe, video, canvas,

  /* ΤΑ ΕΞΗΣ ΔΕΝ ΤΑ ΕΙΧΑ ΥΠΟΨΗ — τα βρήκε το print_audit.py.
     Είναι position:fixed overlays. Το fixed σε εκτύπωση δεν «κολλάει»:
     ο browser το τυπώνει είτε μία φορά στην κορυφή είτε — σε Chromium —
     ΣΕ ΚΑΘΕ ΣΕΛΙΔΑ. Η .scroll-progress θα έβγαζε μια μπλε μπάρα στην
     κορυφή κάθε φύλλου· τα .fx-* είναι διακοσμητικά πλέγματα που θα
     τύπωναν γκρι θόρυβο πάνω στο κείμενο. */
  .scroll-progress, .fx-field, .fx-grid, .fx-constellation, .fx-enter,
  .cookie-hud,

  /* Λωρίδα στόλου: οριζόντια κύλιση. Στο χαρτί τυπώνεται μόνο ό,τι
     τυχαίνει να είναι ορατό στο viewport — δηλαδή 3-4 τυχαία οχήματα,
     κομμένα στη μέση. Χειρότερο από το να λείπει. */
  /* Το .fleet-info είναι ΗΔΗ μέσα στο .fleet-strip, άρα λογικά περιττό.
     Δηλώνεται ρητά επειδή το print_audit.py δεν συμπεραίνει ένθεση από
     CSS και θα το ανέφερε σε κάθε εκτέλεση. Ένας έλεγχος που βγάζει
     μόνιμα ένα γνωστό ψευδώς-θετικό εκπαιδεύει να τον αγνοείς. */
  .fleet-strip, .fleet-info, .card-dots {
    display: none !important;
  }

  /* ── Ε · ΚΑΡΤΕΛΑ ΟΧΗΜΑΤΟΣ ─────────────────────────────────────────
     Από grid 1fr/380px σε μία στήλη.

     order:-1 στο panel ΕΠΙΤΗΔΕΣ: στο DOM το <aside class="car-panel">
     έρχεται μετά το .car-content (car.php γρ.604 vs 499). Χωρίς αυτό, ο
     τίτλος (<h1 class="car-panel-title">) και η ΤΙΜΗ θα τυπώνονταν στη
     δεύτερη σελίδα, κάτω από τη φωτογραφία και την περιγραφή. Το χαρτί
     πρέπει να ξεκινά με «τι είναι» και «πόσο κάνει». */
  .car-page {
    display: flex !important;
    flex-direction: column !important;
    max-width: none !important;
    padding: 0 !important;
    gap: 14px !important;
  }
  .car-panel {
    order: -1 !important;
    position: static !important;
    top: auto !important;
    padding: 0 0 12px 0 !important;
    border: none !important;
    border-bottom: 1.5pt solid #000 !important;
    background: none !important;
    break-inside: avoid; page-break-inside: avoid;
  }

  /* Η φωτογραφία δεν επιτρέπεται να καταλάβει ολόκληρη σελίδα.
     95mm ≈ το 1/3 μιας A4 μετά τα περιθώρια. */
  .gallery-main {
    aspect-ratio: auto !important;
    max-height: 95mm !important;
    width: 100% !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .gallery-main img { object-fit: contain !important; }

  /* ── ΣΤ · ΤΙΠΟΤΑ ΔΕΝ ΚΟΒΕΤΑΙ ΣΤΗ ΜΕΣΗ ──────────────────────────────
     Χωρίς αυτό, ένας πίνακας τεχνικών σπάει ανάμεσα σε ετικέτα και τιμή:
     «Κυβικά» στη σελίδα 1, «1.598 cc» στη σελίδα 2. */
  .spec-row, .key-spec, .feature-chip,
  .specs-table, .key-specs, .features-section, .description-section,
  .car-card, h1, h2, h3 {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

  /* ── Ζ · ΣΥΝΔΕΣΜΟΙ ────────────────────────────────────────────────
     Μπλε υπογραμμισμένο κείμενο σε ασπρόμαυρο χαρτί δείχνει σαν λάθος. */
  a, a:visited { color: #000 !important; text-decoration: none !important; }

  /* ── Η · ΛΙΣΤΑ ΟΧΗΜΑΤΩΝ ───────────────────────────────────────────
     Χωρίς sidebar φίλτρων, η λίστα παίρνει όλο το πλάτος. Δύο στήλες,
     ρητός αριθμός — auto-fill δεν είναι αξιόπιστο εδώ (PROJECT §7). */
  .cars-layout { display: block !important; }
  .cars-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10mm !important;
  }

  /* ── Θ · ΚΑΘΑΡΙΣΜΑ ────────────────────────────────────────────────
     Σκιές και στρογγυλεμένες γωνίες δεν αποδίδονται σε εκτυπωτή —
     βγαίνουν ως θολά γκρι περιγράμματα. */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}