/* ==========================================================================
   SAN ROCCO STAYS — φύλλο στυλ
   --------------------------------------------------------------------------
   Κατεύθυνση: «ενετικό αρχοντικό, μινιμάλ, με μαλακές γωνίες».
   Έδαφος από ασβεστωμένο σοβά, μελάνι για το κείμενο, μία ώχρα δανεισμένη
   από την κίτρινη πόρτα, γκριζογάλανο παντζουριού και κερκυραϊκή πέτρα
   για τις γραμμές.

   Κανόνες που δεν σπάνε πουθενά:
     1. ΜΙΑ καμπύλη παντού: --bend. Καμία κλίμακα από ακτίνες, καμία γωνία.
     2. Δύο μόνο σκιές, απαλές και ουδέτερες — για ό,τι «σηκώνεται».
     3. Καθαρό λευκό (#FFF) δεν υπάρχει. Η ανοιχτή επιφάνεια είναι ασβέστης.
     4. Πρώτα το κινητό. Κάθε στοιχείο αφής τουλάχιστον 48px.
   ========================================================================== */

/* --- 1. Μεταβλητές -------------------------------------------------------- */

:root {
  /* Χρώματα — παρμένα από τις φωτογραφίες των καταλυμάτων */
  --pigment:      #16181A;   /* μελάνι */
  --pigment-soft: #3A4046;   /* δεύτερο μελάνι, για σώμα κειμένου */
  --plaster:      #F1EDE4;   /* σοβάς — το έδαφος της σελίδας */
  --limewash:     #FAF7F1;   /* ασβέστης — καρτέλες, φόρμες */
  --saffron:      #B87310;   /* ώχρα — η κίτρινη πόρτα */
  --saffron-deep: #8C550A;   /* ώχρα σε μέγεθος κειμένου (AA σε σοβά) */
  --saffron-veil: rgba(184, 115, 16, 0.12);
  --shutter:      #445862;   /* γκριζογάλανο παντζουριού */
  --travertine:   #D6CDBC;   /* πέτρα — όλες οι γραμμές */
  --travertine-2: #E6DFD2;   /* πιο απαλή γραμμή */
  --quiet:        #5E6367;   /* σβησμένο κείμενο */
  --alarm:        #9A3324;   /* σφάλματα */
  --grow:         #3F6B4A;   /* επιτυχία */

  /* Μία καμπύλη, μία μόνο. Το 999px μόνο για τα μικρά «χαπάκια». */
  --bend: 12px;
  --bend-pill: 999px;

  /* Δύο σκιές, ουδέτερες. Μόνο για ό,τι πρέπει να «σηκωθεί» από τη σελίδα. */
  --lift:   0 1px 3px rgba(22, 24, 26, 0.05), 0 6px 18px rgba(22, 24, 26, 0.05);
  --lift-2: 0 2px 6px rgba(22, 24, 26, 0.06), 0 18px 46px rgba(22, 24, 26, 0.12);

  /* Γραμματοσειρές */
  --face-display: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --face-text:    'Commissioner', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Κλίμακα μεγεθών — αυστηρή μείζων τρίτη (1.25) */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.25rem;
  --t-lg:   1.5625rem;
  --t-xl:   1.953rem;
  --t-2xl:  2.441rem;
  --t-3xl:  3.052rem;
  --t-4xl:  3.815rem;

  /* Αποστάσεις — βήμα ×1.618 */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  16px;
  --space-sm:  26px;
  --space-md:  42px;
  --space-lg:  68px;
  --space-xl:  112px;
  --space-2xl: 180px;

  --measure: 1320px;
  --gutter: 32px;

  --speed: 280ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ένα ρευστό root· όλα τα υπόλοιπα μεγέθη μένουν σταθερά σε rem. */
html {
  font-size: clamp(15px, 0.86rem + 0.28vw, 17.5px);
  -webkit-text-size-adjust: 100%;
}

/* --- 2. Βάση -------------------------------------------------------------- */

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

/* Χωρίς «λάστιχο» στις άκρες: ούτε κάθετα στο σώμα της σελίδας, ούτε
   οριζόντια όταν ο χρήστης σέρνει μια λωρίδα φωτογραφιών. */
html, body { overflow-x: clip; overscroll-behavior: none; }

body {
  margin: 0;
  background: var(--plaster);
  color: var(--pigment);
  font-family: var(--face-text);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, iframe { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--face-display);
  font-weight: 500;
  line-height: 1.12;
  overflow-wrap: break-word;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }
p  { margin: 0 0 1em 0; overflow-wrap: break-word; }
p:last-child { margin-bottom: 0; }

hr { border: none; border-top: 1px solid var(--travertine); margin: 0; }

::selection { background: var(--saffron); color: var(--limewash); }

:focus-visible { outline: 2px solid var(--saffron-deep); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--space-xs); top: -70px; z-index: 400;
  background: var(--pigment); color: var(--plaster);
  padding: 13px 20px; font-size: var(--t-xs);
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--bend);
  transition: top var(--speed) var(--ease);
}
.skip:focus { top: var(--space-xs); }

/* --- 3. Σκελετός ---------------------------------------------------------- */

.frame {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ΜΟΝΟ κάθετο padding: το .band μπαίνει στο ΙΔΙΟ στοιχείο με το .frame και
   ένα shorthand `padding: X 0` θα έσβηνε το οριζόντιο περιθώριο του .frame. */
.band { padding-block: var(--space-xl); }
.band-tight { padding-block: var(--space-lg); }
.band-ink { background: var(--pigment); color: var(--plaster); }
.band-ink .band-title, .band-ink h2, .band-ink h3 { color: var(--plaster); }
.band-ink .band-note, .band-ink .prose { color: rgba(241, 237, 228, 0.74); }
.band-ink .index-num { color: var(--saffron); }
.band-rule { border-top: 1px solid var(--travertine); }

.closing {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* Κεφαλίδα ενότητας: αριθμημένος δείκτης αριστερά, τίτλος δεξιά. */
.band-head {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: var(--space-sm);
  align-items: start;
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--travertine);
}
.index-num {
  font-family: var(--face-display);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--saffron-deep);
  line-height: 1.3;
  padding-top: 4px;
}
.band-title {
  font-family: var(--face-display);
  font-size: var(--t-2xl);
  font-weight: 500;
  line-height: 1.1;
  max-width: 22ch;
}
.band-note {
  grid-column: 2;
  margin-top: var(--space-2xs);
  color: var(--quiet);
  max-width: 62ch;
  font-size: var(--t-sm);
}
.band-head-act { grid-column: 2; margin-top: var(--space-xs); }

/* --- 4. Τυπογραφικοί ρόλοι ------------------------------------------------ */

.display { font-family: var(--face-display); font-weight: 400; line-height: 1.08; }
.display-xl { font-size: var(--t-4xl); }
.display-lg { font-size: var(--t-3xl); }

.display em, .band-title em, .opening-title em {
  font-style: italic;
  color: var(--saffron-deep);
}
/* Το όνομα της γειτονιάς δεν σπάει ποτέ στη μέση. */
.opening-title em { white-space: nowrap; }

.micro {
  font-size: var(--t-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--quiet);
}

.prose {
  color: var(--pigment-soft);
  max-width: 66ch;
  font-size: var(--t-base);
  line-height: 1.72;
}

.figure-price {
  font-family: var(--face-display);
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--pigment);
  white-space: nowrap;
}
.figure-price .per {
  font-family: var(--face-text);
  font-size: var(--t-xs);
  color: var(--quiet);
  letter-spacing: 0.04em;
  margin-left: 4px;
}

.hidden { display: none !important; }
.tabular { font-variant-numeric: tabular-nums; }

/* Το .reveal μένει στο markup ως άγκυρα, αλλά ΔΕΝ κρύβει τίποτα:
   περιεχόμενο που εξαρτάται από JavaScript για να φανεί είναι περιεχόμενο
   που κάποια στιγμή δεν θα φανεί. */
.reveal { opacity: 1; transform: none; }

/* --- 5. Ενέργειες --------------------------------------------------------- */

.act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 28px;
  border: 1px solid var(--pigment);
  border-radius: var(--bend);
  background: transparent;
  color: var(--pigment);
  font-family: var(--face-text);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease),
              border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.act-solid { background: var(--pigment); color: var(--plaster); }
.act-solid:hover, .act-solid:focus-visible {
  background: var(--saffron); border-color: var(--saffron); color: var(--pigment);
}
.act-line:hover, .act-line:focus-visible { background: var(--pigment); color: var(--plaster); }
.act-sm { min-height: 42px; padding: 10px 18px; font-size: 0.7rem; }
.act-lg { min-height: 56px; padding: 18px 38px; }
.act-block { width: 100%; }
.act[disabled] { opacity: 0.45; cursor: not-allowed; }
.act[disabled]:hover { background: var(--pigment); color: var(--plaster); border-color: var(--pigment); }
.act-line[disabled]:hover { background: transparent; color: var(--pigment); }

.band-ink .act-line { border-color: rgba(241, 237, 228, 0.4); color: var(--plaster); }
.band-ink .act-line:hover { background: var(--plaster); color: var(--pigment); border-color: var(--plaster); }

.act-quiet {
  display: inline-block;
  font-size: var(--t-sm);
  font-weight: 500;
  border-bottom: 1px solid var(--travertine);
  padding-bottom: 3px;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.act-quiet:hover { color: var(--saffron-deep); border-bottom-color: var(--saffron); }

/* --- 6. Λωρίδα υπηρεσίας + κεφαλίδα --------------------------------------- */

.topbar {
  background: var(--pigment);
  color: rgba(241, 237, 228, 0.78);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 40px;
  padding-top: 7px;
  padding-bottom: 7px;
}
.topbar-facts { display: flex; gap: var(--space-sm); flex-wrap: wrap; min-width: 0; }
.topbar-item { display: inline-flex; align-items: center; gap: 7px; }
.topbar-item a:hover { color: var(--saffron); }
.topbar svg { width: 13px; height: 13px; opacity: 0.65; flex: none; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(241, 237, 228, 0.28);
  border-radius: var(--bend-pill);
  overflow: hidden;
  flex: none;
}
.lang-switch button {
  padding: 6px 13px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(241, 237, 228, 0.62);
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.lang-switch button.is-on { background: var(--saffron); color: var(--pigment); }
.lang-switch button:hover:not(.is-on) { color: var(--plaster); }

/* Η κεφαλίδα είναι πάντα συμπαγής — ποτέ διάφανη, ποτέ θολή. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 120;
  background: var(--plaster);
  border-bottom: 1px solid var(--travertine);
}
.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
  transition: padding var(--speed) var(--ease);
}
.masthead.is-tight .masthead-inner { padding-top: 10px; padding-bottom: 10px; }

.wordmark { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
.wordmark-mark {
  width: 36px; height: 36px;
  flex: none;
  border: 1px solid var(--pigment);
  border-radius: var(--bend);
  display: grid; place-items: center;
  font-family: var(--face-display);
  font-size: 0.95rem;
  line-height: 1;
  padding-top: 2px;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.wordmark:hover .wordmark-mark { background: var(--saffron); border-color: var(--saffron); }
.wordmark-text {
  display: block;
  font-family: var(--face-display);
  font-size: var(--t-md);
  line-height: 1.05;
}
.wordmark-sub {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--quiet);
  margin-top: 3px;
}

.menu { display: flex; align-items: center; gap: var(--space-sm); }
.menu-item {
  position: relative;
  font-size: var(--t-sm);
  font-weight: 500;
  padding: 6px 0;
  color: var(--pigment-soft);
  transition: color var(--speed) var(--ease);
}
.menu-item::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: var(--bend-pill);
  background: var(--saffron);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--speed) var(--ease);
}
.menu-item:hover, .menu-item.is-current { color: var(--pigment); }
.menu-item.is-current::after, .menu-item:hover::after { transform: scaleX(1); }

.masthead-act { display: flex; align-items: center; gap: var(--space-xs); }

.burger {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--pigment);
  border-radius: var(--bend);
  place-items: center;
}
.burger span, .burger span::before, .burger span::after {
  display: block; width: 18px; height: 1.5px;
  background: var(--pigment);
  border-radius: var(--bend-pill);
  transition: transform var(--speed) var(--ease), opacity 140ms linear;
}
.burger span { position: relative; }
.burger span::before, .burger span::after { content: ''; position: absolute; left: 0; }
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger.is-open span { background: transparent; }
.burger.is-open span::before { transform: translateY(6px) rotate(45deg); }
.burger.is-open span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Μενού κινητού: πλήρης οθόνη που κατεβαίνει από πάνω. */
.overlay-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--plaster);
  transform: translateY(-100%);
  transition: transform 420ms var(--ease);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.overlay-menu.is-open { transform: none; }
.overlay-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--gutter);
  border-bottom: 1px solid var(--travertine);
}
.overlay-shut {
  width: 46px; height: 46px; flex: none;
  border: 1px solid var(--pigment);
  border-radius: var(--bend);
  display: grid; place-items: center;
}
.overlay-list { padding: var(--space-xs) var(--gutter); flex: 1; }
.overlay-list a {
  display: flex;
  align-items: center;
  min-height: 60px;
  font-family: var(--face-display);
  font-size: var(--t-xl);
  border-bottom: 1px solid var(--travertine-2);
}
.overlay-list a:last-child { border-bottom: none; }
.overlay-foot {
  padding: var(--space-xs) var(--gutter) var(--space-md);
  border-top: 1px solid var(--travertine);
  display: grid;
  gap: var(--space-xs);
}
.overlay-foot .lang-switch { border-color: var(--travertine); justify-self: start; }
.overlay-foot .lang-switch button { color: var(--quiet); padding: 10px 18px; }
.overlay-contact { display: grid; gap: 10px; font-size: var(--t-sm); }
.overlay-contact a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }

/* --- 7. Άνοιγμα ----------------------------------------------------------- */

/* Το άνοιγμα είναι μία φωτογραφία της Κέρκυρας με το κείμενο πάνω της. */
.opening { padding-top: var(--space-sm); padding-bottom: var(--space-md); }

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(74vh, 620px);
  overflow: hidden;
  border-radius: var(--bend);
  background: var(--travertine-2);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('/images/general/hero-corfu.jpg');
  background-size: cover;
  background-position: 50% 62%;
  background-repeat: no-repeat;
}
/* Το πέπλο κρατά το κείμενο ευανάγνωστο χωρίς να σβήνει τη φωτογραφία. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(22, 24, 26, 0.92) 0%,
    rgba(22, 24, 26, 0.80) 28%,
    rgba(22, 24, 26, 0.52) 56%,
    rgba(22, 24, 26, 0.24) 82%,
    rgba(22, 24, 26, 0.16) 100%);
}
.hero-body {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-md);
  max-width: 60ch;
  color: var(--plaster);
}
.opening-title {
  font-family: var(--face-display);
  font-size: var(--t-4xl);
  font-weight: 400;
  line-height: 1.04;
  margin: 0;
  color: var(--plaster);
}
.opening-title em { white-space: nowrap; color: var(--saffron); }
.opening-note {
  color: rgba(241, 237, 228, 0.86);
  font-size: var(--t-base);
  line-height: 1.7;
  max-width: 52ch;
  margin: 0;
}
.opening-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--space-2xs); }

/* Πάνω στη σκοτεινή φωτογραφία τα κουμπιά αντιστρέφονται. */
.hero-body .act-solid {
  background: var(--plaster);
  border-color: var(--plaster);
  color: var(--pigment);
}
.hero-body .act-solid:hover, .hero-body .act-solid:focus-visible {
  background: var(--saffron); border-color: var(--saffron); color: var(--pigment);
}
.hero-body .act-line { border-color: rgba(241, 237, 228, 0.55); color: var(--plaster); }
.hero-body .act-line:hover, .hero-body .act-line:focus-visible {
  background: var(--plaster); border-color: var(--plaster); color: var(--pigment);
}

/* Γραμμή αναζήτησης */
.seek {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  border: 1px solid var(--travertine);
  border-radius: var(--bend);
  background: var(--limewash);
  box-shadow: var(--lift);
  margin-top: var(--space-md);
  overflow: hidden;
}
.seek-slot {
  position: relative;
  display: block;
  width: 100%;
  min-height: 74px;
  text-align: left;
  padding: 14px 20px;
  border-right: 1px solid var(--travertine-2);
  background: transparent;
  transition: background var(--speed) var(--ease);
}
.seek-slot:hover, .seek-slot.is-active { background: var(--saffron-veil); }
.seek-label {
  display: block;
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--quiet);
  font-weight: 600;
}
.seek-value {
  display: block;
  margin-top: 4px;
  font-family: var(--face-display);
  font-size: var(--t-md);
  line-height: 1.2;
}
.seek-value.is-empty { color: var(--quiet); font-family: var(--face-text); font-size: var(--t-sm); }
.seek-go {
  padding: 0 34px;
  min-height: 74px;
  background: var(--pigment);
  color: var(--plaster);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.seek-go:hover { background: var(--saffron); color: var(--pigment); }

.slot-menu {
  overscroll-behavior: contain;
  position: absolute;
  z-index: 90;
  top: calc(100% - 6px);
  left: 10px; right: 10px;
  background: var(--limewash);
  border: 1px solid var(--travertine);
  border-radius: var(--bend);
  box-shadow: var(--lift-2);
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
}
.slot-menu button {
  display: block; width: 100%; text-align: left;
  padding: 12px 14px;
  border-radius: var(--bend);
  font-size: var(--t-sm);
}
.slot-menu button:hover { background: var(--saffron-veil); }
.slot-menu button.is-on { background: var(--pigment); color: var(--plaster); }

/* Επικεφαλίδα εσωτερικής σελίδας */
.page-open {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--travertine);
}
.page-open .index-num { display: block; margin-bottom: var(--space-xs); padding-top: 0; }
.page-open h1 { font-size: var(--t-3xl); font-weight: 400; max-width: 18ch; }
.page-open .prose { margin-top: var(--space-xs); }

/* --- 8. Καταλύματα -------------------------------------------------------- */

/* --- 8α. Η κάρτα στην αρχική --------------------------------------------- */
/* Μόνο τα βασικά: φωτογραφία, όνομα, μέγεθος, τιμή. Οι παροχές και οι
   λεπτομέρειες ανοίγουν στη σελίδα του καταλύματος. */

.unit-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }

.unit-card {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: center;
  background: var(--limewash);
  border: 1px solid var(--travertine);
  border-radius: var(--bend);
  padding: var(--space-xs);
  scroll-margin-top: 110px;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.unit-card:hover { border-color: var(--pigment); box-shadow: var(--lift); }

.unit-card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--bend);
  background: var(--travertine-2);
}
.unit-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease);
}
.unit-card:hover .unit-card-media img { transform: scale(1.04); }
.unit-card-count {
  position: absolute; left: 12px; bottom: 12px;
  background: var(--plaster);
  border-radius: var(--bend-pill);
  padding: 6px 13px;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.unit-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-xs) var(--space-2xs) 0;
  min-width: 0;
}
.unit-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
}
.unit-card-id { min-width: 0; }
.unit-floor {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--saffron-deep);
  font-weight: 600;
}
.unit-name {
  font-family: var(--face-display);
  font-size: var(--t-xl);
  font-weight: 500;
  margin-top: 8px;
  line-height: 1.1;
}
.unit-card-price { text-align: right; flex: none; }
.unit-card-price .figure-price {
  display: block;
  font-size: var(--t-xl);
  color: var(--saffron-deep);
  line-height: 1;
}
.unit-card-per {
  display: block;
  margin-top: 5px;
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--quiet);
  font-weight: 600;
}
.unit-card-blurb {
  font-size: var(--t-sm);
  color: var(--pigment-soft);
  line-height: 1.68;
  margin: 0;
}
.unit-card-cta { align-self: flex-start; }

.stay-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  margin-top: 10px;
  font-size: var(--t-xs);
  color: var(--quiet);
}
.stay-fact { display: inline-flex; align-items: center; gap: 6px; }
.stay-fact + .stay-fact::before {
  content: '';
  width: 3px; height: 3px;
  border-radius: var(--bend-pill);
  background: var(--travertine);
  margin-right: 6px;
}

/* --- 8β. Η σελίδα του καταλύματος ----------------------------------------- */

.sheet-back { padding-top: var(--space-sm); }

.sheet-hero {
  position: relative;
  margin-top: var(--space-xs);
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: var(--bend);
  background: var(--travertine-2);
}
.sheet-hero img { width: 100%; height: 100%; object-fit: cover; }
.sheet-hero-open {
  position: absolute; right: 14px; bottom: 14px;
  background: var(--plaster);
  border-radius: var(--bend-pill);
  padding: 12px 20px;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background var(--speed) var(--ease);
}
.sheet-hero-open:hover { background: var(--saffron); }

.sheet-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding: var(--space-sm) 0 var(--space-xs);
  border-bottom: 1px solid var(--travertine);
}
.sheet-title {
  font-size: var(--t-3xl);
  font-weight: 400;
  font-family: var(--face-display);
  line-height: 1.05;
  margin-top: 8px;
}

.sheet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-lg);
  /* ΟΧΙ align-items:start — η στήλη θα έπαιρνε το ύψος του πάνελ και το
     sticky δεν θα είχε πού να ταξιδέψει, αφήνοντας τεράστιο κενό δεξιά. */
  align-items: stretch;
  padding-top: var(--space-md);
}
.sheet-grid > * { min-width: 0; }
.sheet-main > * + * { margin-top: var(--space-md); }

.unit-part {
  font-family: var(--face-display);
  font-size: var(--t-md);
  font-weight: 500;
  padding-bottom: 9px;
  margin-bottom: var(--space-xs);
  border-bottom: 1px solid var(--travertine-2);
}
.unit-kit-title { margin: var(--space-xs) 0 4px; }

.spec-list { display: grid; grid-template-columns: minmax(0, 1fr); }
.spec-list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-md); }
.spec-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: 11px 0;
  border-bottom: 1px solid var(--travertine-2);
  font-size: var(--t-sm);
}
.spec-row dt { color: var(--quiet); }
.spec-row dd { margin: 0; font-weight: 500; text-align: right; }

.kit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-sm); }
.kit-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-md); }
.kit-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-size: var(--t-sm);
  border-bottom: 1px solid var(--travertine-2);
}
.kit-item svg { width: 17px; height: 17px; flex: none; color: var(--saffron-deep); }

.aside-panel {
  position: sticky;
  top: 110px;
  border: 1px solid var(--travertine);
  border-radius: var(--bend);
  background: var(--limewash);
  box-shadow: var(--lift);
  padding: var(--space-sm);
}
.aside-price { text-align: left; }
.aside-line {
  display: flex; justify-content: space-between; gap: var(--space-xs);
  padding: 10px 0;
  font-size: var(--t-sm);
  border-bottom: 1px solid var(--travertine-2);
}
.aside-note { font-size: var(--t-xs); color: var(--quiet); line-height: 1.6; }

/* Λωρίδα φωτογραφιών με κύλιση και snap */
.filmstrip {
  display: flex;
  max-width: 100%;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 10px;
}
.filmstrip-cell {
  flex: 0 0 clamp(220px, 27vw, 330px);
  aspect-ratio: 4 / 3;
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: var(--bend);
  background: var(--travertine-2);
  cursor: zoom-in;
}
.filmstrip-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.filmstrip-cell:hover img { transform: scale(1.04); }
.filmstrip-note {
  font-size: var(--t-xs);
  color: var(--quiet);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.mapframe {
  border: 1px solid var(--travertine);
  border-radius: var(--bend);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--travertine-2);
}
.mapframe iframe { width: 100%; height: 100%; border: 0; }

/* --- 9. Δημοφιλείς περιοχές ----------------------------------------------- */

.area-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md) var(--space-sm);
}
.area-card { display: flex; flex-direction: column; }
.area-figure {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: var(--bend);
  background: var(--travertine-2);
}
.area-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.area-card:hover .area-figure img { transform: scale(1.04); }
.area-body { padding-top: var(--space-xs); }
.area-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--travertine);
  flex-wrap: wrap;
}
.area-index { font-family: var(--face-display); font-style: italic; color: var(--saffron-deep); font-size: var(--t-base); }
.area-name { font-family: var(--face-display); font-size: var(--t-lg); font-weight: 500; line-height: 1.12; }
.area-far {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--quiet);
  font-weight: 600;
}
.area-text { margin-top: 12px; font-size: var(--t-sm); color: var(--pigment-soft); line-height: 1.68; }
.area-tip {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  font-size: var(--t-xs);
  color: var(--shutter);
  line-height: 1.6;
}
.area-tip::before {
  content: '';
  flex: none;
  width: 7px; height: 7px;
  border-radius: var(--bend-pill);
  background: var(--saffron);
  margin-top: 6px;
}
.area-card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-sm); align-items: center; }
.area-card--wide .area-figure { aspect-ratio: 16 / 9; }
.area-card--wide .area-body { padding-top: 0; }

/* --- 10. Σχετικά ---------------------------------------------------------- */

.about-split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--space-lg);
  align-items: start;
}
.about-split > * { min-width: 0; }
.about-figure { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--bend); background: var(--travertine-2); }
.about-figure img { width: 100%; height: 100%; object-fit: cover; }
.about-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--travertine);
}
.about-facts--ink { border-top-color: rgba(241, 237, 228, 0.2); }
.about-fact-num { font-family: var(--face-display); font-size: var(--t-xl); line-height: 1; }
.about-fact-label { font-size: var(--t-xs); color: var(--quiet); margin-top: 6px; }
.band-ink .about-fact-label { color: rgba(241, 237, 228, 0.6); }

.quote {
  font-family: var(--face-display);
  font-size: var(--t-xl);
  font-style: italic;
  line-height: 1.32;
  max-width: 24ch;
  border-left: 2px solid var(--saffron);
  border-radius: 0 var(--bend) var(--bend) 0;
  padding-left: var(--space-sm);
  margin: 0;
}

/* --- 11. Φόρμες ----------------------------------------------------------- */

.fld { display: block; margin-bottom: var(--space-sm); }
.fld-label {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--quiet);
  margin-bottom: 6px;
  transition: color var(--speed) var(--ease);
}
.fld-input, .fld-area, .fld-pick {
  display: block;
  width: 100%;
  min-height: 50px;
  background: var(--limewash);
  border: 1px solid var(--travertine);
  border-radius: var(--bend);
  padding: 13px 15px;
  font-size: var(--t-base);
  font-family: var(--face-text);
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.fld-input:focus, .fld-area:focus, .fld-pick:focus {
  outline: none;
  border-color: var(--saffron);
  background: var(--plaster);
}
.fld:focus-within .fld-label { color: var(--saffron-deep); }
.fld-area { min-height: 104px; resize: vertical; line-height: 1.6; }
.fld-pick {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--pigment) 50%),
                    linear-gradient(135deg, var(--pigment) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.fld-note { font-size: var(--t-xs); color: var(--quiet); margin-top: 6px; line-height: 1.5; }
.fld.has-error .fld-input, .fld.has-error .fld-area, .fld.has-error .fld-pick { border-color: var(--alarm); }
.fld.has-error .fld-label { color: var(--alarm); }
.fld-error { display: block; font-size: var(--t-xs); color: var(--alarm); margin-top: 6px; }
.fld-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-sm); }
.fld-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--space-sm); }

/* Κρυφό πεδίο-παγίδα για bots — δεν το βλέπει άνθρωπος. */
.trap { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--t-sm);
  color: var(--pigment-soft);
  line-height: 1.6;
  cursor: pointer;
  min-height: 44px;
  padding: 4px 0;
}
.check-row input {
  appearance: none;
  flex: none;
  width: 22px; height: 22px;
  margin-top: 1px;
  border: 1px solid var(--pigment);
  border-radius: 6px;
  background: var(--limewash);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.check-row input:checked { background: var(--pigment); }
.check-row input:checked::after {
  content: '';
  width: 10px; height: 5px;
  border-left: 1.5px solid var(--plaster);
  border-bottom: 1.5px solid var(--plaster);
  transform: rotate(-45deg) translate(1px, -2px);
}

/* --- 12. Ημερολόγιο ------------------------------------------------------- */

.cal {
  background: var(--limewash);
  border: 1px solid var(--travertine);
  border-radius: var(--bend);
  overflow: hidden;
}

/* Η μπάρα του μήνα: δύο ίσα τετράγωνα στις άκρες, ο μήνας στο κέντρο.
   Ίδιο οριζόντιο padding με το πλέγμα, ώστε όλα να πέφτουν στην ίδια γραμμή. */
.cal-bar {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: var(--space-2xs);
  padding: 12px var(--cal-pad, 12px);
  border-bottom: 1px solid var(--travertine-2);
}
.cal-month {
  font-family: var(--face-display);
  font-size: var(--t-md);
  text-align: center;
  line-height: 1.2;
}
.cal-step {
  width: 40px; height: 40px;
  border: 1px solid var(--travertine);
  border-radius: var(--bend);
  display: grid; place-items: center;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.cal-step:last-of-type { justify-self: end; }
.cal-step:hover:not([disabled]) { background: var(--pigment); border-color: var(--pigment); color: var(--plaster); }
.cal-step[disabled] { opacity: 0.28; cursor: not-allowed; }
.cal-step svg { width: 14px; height: 14px; }

/* Επικεφαλίδες και μέρες: ΙΔΙΟ grid, ΙΔΙΟ padding, ΙΔΙΟ gap — αλλιώς οι
   στήλες των ονομάτων δεν πέφτουν πάνω στους αριθμούς. */
.cal-dows, .cal-cells {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
  padding: 0 var(--cal-pad, 12px);
}
.cal-dows {
  padding-top: 12px;
  padding-bottom: 6px;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--quiet);
  font-weight: 600;
}
.cal-dows span { text-align: center; }
.cal-cells { padding-bottom: 12px; }

.cal-cell {
  position: relative;
  aspect-ratio: 1;
  min-height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--bend);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  background: transparent;
  color: var(--pigment);
  transition: background 140ms linear, color 140ms linear;
}
.cal-cell.is-pad { visibility: hidden; }
.cal-cell:not([disabled]):hover { background: var(--saffron-veil); }
.cal-cell[disabled] { color: var(--travertine); cursor: not-allowed; }
.cal-cell.is-taken {
  color: var(--travertine);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: var(--travertine);
}
/* Το «σήμερα» είναι μια κουκκίδα από κάτω — δεν αλλάζει το σχήμα του κελιού. */
.cal-cell.is-today::after {
  content: '';
  position: absolute;
  bottom: 5px; left: 50%;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: var(--bend-pill);
  background: var(--shutter);
}
.cal-cell.is-between { background: var(--saffron-veil); }
.cal-cell.is-edge-in, .cal-cell.is-edge-out {
  background: var(--pigment);
  color: var(--plaster);
  font-weight: 600;
}
.cal-cell.is-edge-in::after, .cal-cell.is-edge-out::after { background: var(--plaster); }

.cal-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  padding: 11px var(--cal-pad, 12px);
  border-top: 1px solid var(--travertine-2);
  font-size: var(--t-xs);
  color: var(--quiet);
}
.cal-legend span { display: inline-flex; align-items: center; gap: 7px; }
.cal-swatch { width: 13px; height: 13px; border: 1px solid var(--travertine); border-radius: 4px; flex: none; }
.cal-swatch--sel { background: var(--pigment); border-color: var(--pigment); }
.cal-swatch--range { background: var(--saffron-veil); }
.cal-swatch--taken { background: var(--travertine-2); }

.cal-pop {
  position: absolute;
  z-index: 150;
  width: min(394px, calc(100vw - 24px));
  background: var(--limewash);
  border: 1px solid var(--travertine);
  border-radius: var(--bend);
  box-shadow: var(--lift-2);
  overflow: hidden;
}
.cal-pop .cal { border: none; }
.cal-pop-veil {
  position: fixed; inset: 0; z-index: 140;
  background: rgba(22, 24, 26, 0.45);
  opacity: 0; visibility: hidden;
  transition: opacity 240ms var(--ease), visibility 0s linear 240ms;
}
.cal-pop-veil.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.cal-pop-shut {
  position: absolute; top: 9px; right: 9px; z-index: 2;
  width: 40px; height: 40px; display: none; place-items: center;
  background: var(--plaster);
  border-radius: var(--bend);
}

/* Το επιλεγμένο κατάλυμα μέσα στην κράτηση: μία σύντομη λωρίδα, όχι
   ολόκληρη η σελίδα του. Ο επισκέπτης την έχει ήδη δει. */
.book-pick {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: var(--space-xs);
  align-items: center;
  border: 1px solid var(--travertine);
  border-radius: var(--bend);
  background: var(--limewash);
  padding: var(--space-2xs);
  margin-bottom: var(--space-md);
}
.book-pick-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--bend);
  background: var(--travertine-2);
}
.book-pick-media img { width: 100%; height: 100%; object-fit: cover; }
.book-pick-body { min-width: 0; padding: 0 var(--space-2xs); }
.book-pick-name { font-family: var(--face-display); font-size: var(--t-md); font-weight: 500; margin-top: 5px; }
.book-pick-side {
  display: grid;
  justify-items: end;
  gap: 8px;
  padding-right: var(--space-2xs);
  text-align: right;
}
.book-pick-side .figure-price { color: var(--saffron-deep); font-size: var(--t-md); }

/* --- 13. Κράτηση ---------------------------------------------------------- */

.wizard-track {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--travertine);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}
.wizard-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  font-size: var(--t-sm);
  color: var(--quiet);
}
.wizard-mark b {
  font-family: var(--face-display);
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--travertine);
}
.wizard-mark.is-now { color: var(--pigment); }
.wizard-mark.is-now b { color: var(--saffron-deep); }
.wizard-mark.is-past b { color: var(--pigment); }

.book-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-lg); align-items: stretch; }
.book-grid > * { min-width: 0; }
.book-aside {
  position: sticky; top: 110px;
  border: 1px solid var(--travertine);
  border-radius: var(--bend);
  background: var(--limewash);
  box-shadow: var(--lift);
  overflow: hidden;
}
.book-aside-head { padding: 14px var(--space-sm); background: var(--pigment); color: var(--plaster); }
.book-aside-head .micro { color: rgba(241, 237, 228, 0.75); }
.book-aside-body { padding: var(--space-sm); }

.tally-row { display: flex; justify-content: space-between; gap: var(--space-xs); padding: 9px 0; font-size: var(--t-sm); border-bottom: 1px solid var(--travertine-2); }
.tally-row span:first-child { color: var(--quiet); }
.tally-sum {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-xs);
  padding-top: var(--space-xs); margin-top: 4px;
  border-top: 1px solid var(--pigment);
}
.tally-sum b { font-family: var(--face-display); font-size: var(--t-xl); font-weight: 500; }
.tally-note { font-size: var(--t-xs); color: var(--quiet); line-height: 1.55; margin-top: 8px; }

.notice {
  border-left: 3px solid var(--saffron);
  border-radius: 0 var(--bend) var(--bend) 0;
  background: var(--saffron-veil);
  padding: 14px var(--space-xs);
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--pigment-soft);
}
.notice-bad { border-left-color: var(--alarm); background: rgba(154, 51, 36, 0.09); color: var(--alarm); }

.wizard-nav { display: flex; justify-content: space-between; gap: var(--space-xs); margin-top: var(--space-md); flex-wrap: wrap; }

.done-panel {
  border: 1px solid var(--travertine);
  border-radius: var(--bend);
  box-shadow: var(--lift);
  padding: var(--space-md) var(--space-sm);
  text-align: center;
  background: var(--limewash);
}
.done-code {
  display: inline-block;
  border: 1px solid var(--pigment);
  border-radius: var(--bend);
  padding: 14px 28px;
  font-family: var(--face-display);
  font-size: var(--t-xl);
  letter-spacing: 0.08em;
  margin: var(--space-xs) 0;
}
.done-mark {
  width: 58px; height: 58px;
  border: 1px solid var(--saffron);
  border-radius: var(--bend-pill);
  display: grid; place-items: center;
  margin: 0 auto var(--space-xs);
}
.done-mark svg { width: 24px; height: 24px; color: var(--saffron-deep); }

/* --- 14. Προβολέας φωτογραφιών -------------------------------------------- */

.viewer {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(22, 24, 26, 0.95);
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.viewer-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--gutter); color: var(--plaster); }
.viewer-count { font-size: var(--t-xs); letter-spacing: 0.12em; }
.viewer-shut {
  width: 46px; height: 46px; flex: none;
  border: 1px solid rgba(241, 237, 228, 0.4);
  border-radius: var(--bend);
  display: grid; place-items: center; color: var(--plaster);
}
.viewer-shut:hover { background: var(--plaster); color: var(--pigment); }
.viewer-stage { position: relative; display: grid; place-items: center; padding: 0 var(--gutter); overflow: hidden; }
.viewer-img { max-width: 100%; max-height: 76vh; object-fit: contain; border-radius: var(--bend); }
.viewer-step {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  border: 1px solid rgba(241, 237, 228, 0.4);
  border-radius: var(--bend-pill);
  background: rgba(22, 24, 26, 0.6);
  display: grid; place-items: center;
  color: var(--plaster);
}
.viewer-step:hover { background: var(--plaster); color: var(--pigment); }
.viewer-prev { left: 8px; }
.viewer-next { right: 8px; }
.viewer-caption { padding: var(--space-xs) var(--gutter) var(--space-sm); color: rgba(241, 237, 228, 0.7); font-size: var(--t-sm); text-align: center; }

/* --- 15. Υποσέλιδο -------------------------------------------------------- */

.colophon {
  background: var(--pigment);
  color: rgba(241, 237, 228, 0.74);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-radius: var(--bend) var(--bend) 0 0;
}
.colophon a:hover { color: var(--saffron); }
.colophon-top {
  display: grid;
  grid-template-columns: 1.4fr auto auto;
  gap: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(241, 237, 228, 0.18);
}
.colophon h4 {
  font-family: var(--face-text);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(241, 237, 228, 0.45);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}
.colophon-lines { display: grid; gap: 10px; font-size: var(--t-sm); }
.colophon-lines a { display: inline-flex; align-items: center; gap: 9px; }
.colophon-nav { display: grid; gap: 10px; font-size: var(--t-sm); }
.colophon-social { display: flex; gap: 10px; margin-top: var(--space-xs); }
.colophon-social a {
  width: 44px; height: 44px;
  border: 1px solid rgba(241, 237, 228, 0.28);
  border-radius: var(--bend);
  display: grid; place-items: center;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.colophon-social a:hover { background: var(--saffron); border-color: var(--saffron); color: var(--pigment); }
.colophon-social svg { width: 17px; height: 17px; }

/* Το λογότυπο κόβεται από το κάτω περιθώριο — γραφικό στοιχείο, όχι κείμενο. */
.colophon-wordmark {
  font-family: var(--face-display);
  font-size: clamp(2.6rem, 15vw, 12rem);
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: rgba(241, 237, 228, 0.1);
  padding-top: var(--space-md);
  margin-bottom: -0.16em;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
}
.colophon-legal {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: var(--space-sm) 0;
  border-top: 1px solid rgba(241, 237, 228, 0.18);
  font-size: var(--t-xs);
  color: rgba(241, 237, 228, 0.5);
}

/* --- 16. Πίνακας διαχείρισης ---------------------------------------------- */

.console { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.console-rail {
  background: var(--pigment);
  color: rgba(241, 237, 228, 0.7);
  padding: var(--space-sm) var(--space-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.console-rail .wordmark-mark { border-color: rgba(241, 237, 228, 0.4); color: var(--plaster); }
.console-rail .wordmark-text { color: var(--plaster); }
.console-nav { display: grid; gap: 3px; }
.console-nav a {
  padding: 12px 14px;
  border-radius: var(--bend);
  font-size: var(--t-sm);
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.console-nav a:hover { background: rgba(241, 237, 228, 0.07); color: var(--plaster); }
.console-nav a.is-current { color: var(--pigment); background: var(--saffron); }
.console-foot { margin-top: auto; font-size: var(--t-xs); display: grid; gap: 10px; padding-top: var(--space-sm); border-top: 1px solid rgba(241,237,228,0.18); }
.console-body { padding: var(--space-sm) var(--space-md) var(--space-lg); min-width: 0; }
.console-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--space-sm); flex-wrap: wrap;
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-sm);
  border-bottom: 1px solid var(--travertine);
}
.console-head h1 { font-size: var(--t-xl); font-weight: 500; }

.tile-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-xs); margin-bottom: var(--space-md); }
.tile { border: 1px solid var(--travertine); border-radius: var(--bend); background: var(--limewash); padding: var(--space-xs); }
.tile-num { font-family: var(--face-display); font-size: var(--t-xl); line-height: 1; }
.tile-label { font-size: var(--t-xs); color: var(--quiet); margin-top: 6px; }

.panel {
  border: 1px solid var(--travertine);
  border-radius: var(--bend);
  background: var(--limewash);
  padding: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.panel-title { font-family: var(--face-display); font-size: var(--t-md); margin-bottom: var(--space-xs); padding-bottom: 10px; border-bottom: 1px solid var(--travertine-2); }

.grid-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.grid-table th {
  text-align: left;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--quiet);
  font-weight: 600;
  padding: 0 12px 10px 0;
  border-bottom: 1px solid var(--pigment);
  white-space: nowrap;
}
.grid-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--travertine-2); vertical-align: top; }
.grid-table tr:hover td { background: rgba(184, 115, 16, 0.05); }
.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }

.state { display: inline-block; padding: 4px 11px; border-radius: var(--bend-pill); font-size: 0.66rem; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600; border: 1px solid; }
.state--wait { color: var(--saffron-deep); border-color: var(--saffron); }
.state--ok   { color: var(--grow); border-color: var(--grow); }
.state--off  { color: var(--alarm); border-color: var(--alarm); }

.gate { min-height: 100vh; display: grid; place-items: center; padding: var(--space-sm); background: var(--plaster); }
.gate-card {
  width: 100%; max-width: 410px;
  border: 1px solid var(--travertine);
  border-radius: var(--bend);
  box-shadow: var(--lift);
  background: var(--limewash);
  padding: var(--space-md) var(--space-sm);
}

.modal-veil {
  position: fixed; inset: 0; z-index: 250;
  background: rgba(22, 24, 26, 0.6);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-xs);
  overflow-y: auto;
}
.modal-veil.is-open { display: flex; }
.modal-card {
  width: 100%; max-width: 720px;
  background: var(--limewash);
  border: 1px solid var(--travertine);
  border-radius: var(--bend);
  box-shadow: var(--lift-2);
  padding: var(--space-sm);
  margin: auto;
}
.chip-pick {
  display: inline-block;
  padding: 9px 15px;
  border: 1px solid var(--travertine);
  border-radius: var(--bend-pill);
  font-size: var(--t-xs);
  cursor: pointer;
  margin: 0 5px 5px 0;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.chip-pick.is-on { background: var(--pigment); color: var(--plaster); border-color: var(--pigment); }

.thumb-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--bend); border: 1px solid var(--travertine); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb button {
  position: absolute; top: 6px; right: 6px;
  width: 28px; height: 28px;
  border-radius: var(--bend-pill);
  background: var(--pigment); color: var(--plaster);
  display: grid; place-items: center;
  font-size: 14px; line-height: 1;
}

/* ==========================================================================
   17. ΑΝΤΑΠΟΚΡΙΣΗ — τα πλάτη είναι 1200 / 1000 / 860 / 620 / 460
   ========================================================================== */

@media (max-width: 1200px) {
  .book-grid { grid-template-columns: 1fr 330px; gap: var(--space-md); }
  .sheet-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-md); }
}

@media (max-width: 1000px) {
  :root { --gutter: 24px; }
  .band { padding-block: var(--space-lg); }
  .hero { min-height: min(66vh, 520px); }
  .hero-body { padding: var(--space-sm); }
  .opening-title { font-size: var(--t-3xl); }
  .sheet-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .aside-panel { position: static; }
  .kit-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-split { grid-template-columns: 1fr; gap: var(--space-sm); }
  .about-figure { aspect-ratio: 3 / 2; }
  .book-grid { grid-template-columns: 1fr; }
  .book-aside { position: static; }
  .colophon-top { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
}

/* ---- ΚΙΝΗΤΟ ------------------------------------------------------------- */
@media (max-width: 860px) {
  :root { --gutter: 18px; }

  .band { padding-block: var(--space-md) var(--space-lg); }
  .band-tight { padding-block: var(--space-md); }

  /* Κεφαλίδα ενότητας: ο δείκτης πάει από πάνω, όχι σε δική του στήλη */
  .band-head {
    grid-template-columns: 1fr;
    gap: 6px;
    padding-bottom: var(--space-xs);
    margin-bottom: var(--space-sm);
  }
  .band-note, .band-head-act { grid-column: 1; }
  .index-num { padding-top: 0; font-size: var(--t-base); }
  .band-title { font-size: var(--t-xl); max-width: none; }

  /* Λωρίδα υπηρεσίας: μόνο τηλέφωνο + γλώσσα, η διεύθυνση δεν χωράει */
  .topbar-facts .topbar-item { display: none; }
  .topbar-facts .topbar-item:nth-child(2) { display: inline-flex; }
  .topbar-inner { justify-content: space-between; }
  .topbar { font-size: 0.72rem; }

  /* Κεφαλίδα */
  .menu, .masthead-act > .act { display: none; }
  .burger { display: grid; }
  .wordmark-sub { display: none; }
  .wordmark-text { font-size: var(--t-base); }
  .masthead-inner { padding-top: 10px; padding-bottom: 10px; }

  /* Άνοιγμα */
  .opening { padding-top: var(--space-xs); padding-bottom: var(--space-sm); }
  .hero { min-height: min(78vh, 560px); align-items: flex-end; }
  .hero-bg { background-position: 50% 46%; }
  /* Σε στενή οθόνη το κείμενο πιάνει μεγαλύτερο μέρος της φωτογραφίας,
     οπότε το πέπλο ανεβαίνει πιο ψηλά. */
  .hero::after {
    background: linear-gradient(to top,
      rgba(22, 24, 26, 0.94) 0%,
      rgba(22, 24, 26, 0.86) 40%,
      rgba(22, 24, 26, 0.60) 66%,
      rgba(22, 24, 26, 0.26) 100%);
  }
  .hero-body { padding: var(--space-sm) var(--space-xs) var(--space-sm); gap: 12px; }
  .opening-title { font-size: var(--t-2xl); line-height: 1.08; }
  .opening-note { font-size: var(--t-sm); }
  .opening-acts { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .opening-acts .act { width: 100%; }

  /* Αναζήτηση: στοιβαγμένη, με πραγματικά μεγάλα σημεία αφής */
  .seek { grid-template-columns: 1fr; margin-top: var(--space-sm); }
  .seek-slot { border-right: none; border-bottom: 1px solid var(--travertine-2); min-height: 66px; }
  .seek-go { min-height: 56px; padding: 16px; }
  .slot-menu { left: 8px; right: 8px; }

  /* Καταλύματα: η κάρτα γίνεται μία στήλη — φωτογραφία πάνω, στοιχεία κάτω */
  .unit-list { gap: var(--space-sm); }
  .unit-card { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .unit-card-body { padding: 0 var(--space-2xs) var(--space-2xs); }
  .unit-card-media { aspect-ratio: 3 / 2; }
  .unit-name { font-size: var(--t-lg); }
  .unit-card-price { text-align: right; }
  .unit-card-price .figure-price { font-size: var(--t-lg); }
  .unit-card-cta { align-self: stretch; width: 100%; }

  /* Σελίδα καταλύματος */
  .sheet-hero { aspect-ratio: 4 / 3; }
  .book-pick { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; margin-bottom: var(--space-sm); }
  .book-pick-side {
    grid-column: 1 / -1;
    grid-auto-flow: column;
    justify-items: stretch;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 0 var(--space-2xs) var(--space-2xs);
  }
  .book-pick-side .act { width: auto; }
  .sheet-hero-open { right: 10px; bottom: 10px; padding: 10px 16px; }
  .sheet-head { display: block; padding-top: var(--space-xs); }
  .sheet-title { font-size: var(--t-2xl); }
  .sheet-head .unit-card-price { text-align: left; margin-top: var(--space-xs); }
  .spec-list--two { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kit-grid, .kit-grid--three { grid-template-columns: minmax(0, 1fr); }
  .filmstrip-cell { flex: 0 0 78%; }

  /* Περιοχές */
  .area-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .area-card--wide { grid-template-columns: 1fr; }
  .area-card--wide .area-figure { aspect-ratio: 5 / 4; }
  .area-top { flex-direction: column; align-items: flex-start; gap: 4px; }
  .area-name { font-size: var(--t-md); }

  /* Σελίδες */
  .page-open { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
  .page-open h1 { font-size: var(--t-2xl); max-width: none; }
  .quote { font-size: var(--t-lg); max-width: none; padding-left: var(--space-xs); }

  /* Κράτηση */
  .wizard-track { gap: var(--space-xs); padding: var(--space-xs) 0; margin-bottom: var(--space-sm); }
  .wizard-mark { font-size: var(--t-xs); }
  .wizard-mark b { font-size: var(--t-base); }
  .wizard-nav .act { flex: 1 1 46%; }
  .book-aside { margin-bottom: var(--space-sm); }

  /* Ημερολόγιο: γεμίζει το πλάτος και τα κελιά πιάνονται με το δάχτυλο */
  .cal-cell { min-height: 44px; font-size: var(--t-base); }
  .cal-pop .cal-bar { padding-right: 58px; }
  .cal-pop {
    position: fixed;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: min(400px, calc(100vw - 24px));
  }
  .cal-pop-shut { display: grid; }

  /* Υποσέλιδο */
  .colophon { margin-top: var(--space-lg); padding-top: var(--space-md); }
  .colophon-top { grid-template-columns: 1fr; gap: var(--space-sm); padding-bottom: var(--space-sm); }
  .colophon-wordmark { padding-top: var(--space-sm); }

  /* Προβολέας */
  .viewer-img { max-height: 66vh; }
  .viewer-step { width: 44px; height: 44px; }

  /* Πίνακας διαχείρισης */
  .console { grid-template-columns: 1fr; }
  .console-rail {
    position: static; height: auto;
    flex-direction: row; align-items: center; flex-wrap: wrap;
    gap: var(--space-xs);
    padding: 12px var(--gutter);
  }
  .console-nav { grid-auto-flow: column; gap: 4px; overflow-x: auto; }
  .console-nav a { white-space: nowrap; }
  .console-foot { margin-top: 0; border-top: none; padding-top: 0; grid-auto-flow: column; align-items: center; gap: var(--space-xs); }
  .console-body { padding: var(--space-sm) var(--gutter) var(--space-md); }
  .panel { padding: var(--space-xs); }
  .modal-card { padding: var(--space-xs); }
}

@media (max-width: 620px) {
  .fld-pair, .fld-trio { grid-template-columns: 1fr; }
  .about-facts { grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
  .closing { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
  .closing .act { width: 100%; }
  .filmstrip-cell { flex: 0 0 84%; }
  .tile-row { grid-template-columns: 1fr 1fr; }
  .cal-legend { gap: 10px; font-size: 0.7rem; }
  .wizard-nav .act { flex: 1 1 100%; }
  .colophon-legal { flex-direction: column; gap: 8px; }
}

@media (max-width: 460px) {
  :root { --gutter: 14px; }
  .opening-title { font-size: var(--t-xl); }
  .hero { min-height: min(80vh, 500px); }
  .page-open h1 { font-size: var(--t-xl); }
  .band-title { font-size: var(--t-lg); }
  .unit-name { font-size: var(--t-md); }
  .about-facts { grid-template-columns: 1fr; }
  .done-code { font-size: var(--t-lg); padding: 12px 20px; letter-spacing: 0.06em; }
  .wordmark-mark { width: 34px; height: 34px; }
  .spec-row { font-size: var(--t-xs); }
}

/* --- 18. Σεβασμός στις προτιμήσεις κίνησης -------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 19. Εκτύπωση --------------------------------------------------------- */

@media print {
  .topbar, .masthead, .colophon, .seek, .act, .viewer, .overlay-menu { display: none !important; }
  body { background: none; color: #000; }
  .band { padding-block: 0; }
  .unit-card { border: none; padding: 0; box-shadow: none; }
}