/* ΠΑΡΑΓΟΜΕΝΟ απο _build/build.py (CSS_BUNDLE). Μην το αλλαζεις: αλλαξε τα πηγαια assets/*.css. */

/* --- vendor/slick-1.8.1.min.css --- */
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}
/*# sourceMappingURL=slick.min.css.map */
/* --- fonts.css --- */
/* ===================================================================
   fonts.css — Bella Vista Design Studios
   STAGE 5 (designer). Self-hosted, no third-party request at runtime.

   Three families, and the third one is an exception:
     Literata   headings          greek + latin   (glyph gate: greek=1)
     Manrope    body, UI          greek + latin   (glyph gate: greek=1)
     Hurricane  eyebrows ONLY     latin only      (glyph gate: greek=0)

   Hurricane has ZERO Greek glyphs (cmap: all 19 tested codepoints
   missing). That is why every eyebrow on this site is written in
   English, in all three languages — a decision by Ioannis, 15/9/2026,
   recorded in DESIGN-DIRECTION.md. Never use --font-eyebrow for
   headings, body, buttons, labels, forms or any other UI: Greek text
   would fall back silently to another family and still look fine.

   All three are variable fonts: Google serves ONE file per family and
   subset for every weight, so a weight range is declared instead of a
   file per weight. Verified by sha256: 11 downloads, 5 unique files.
   =================================================================== */

/* --- Literata (headings) ------------------------------------------ */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/literata-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/literata-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Manrope (body, UI) ------------------------------------------- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/manrope-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Hurricane (eyebrows only, English only) ---------------------- */
@font-face {
  font-family: 'Hurricane';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/hurricane-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- tokens.css --- */
/* Design Tokens - Auto-generated */
/* Do not edit directly - modify tokens.json instead */

/* === PRIMITIVES === */
:root {
  --primitive-color-teal: #134c61;
  --primitive-color-midnight: #10303c;
  --primitive-color-beige: #fffaef;
  --primitive-color-light-beige: #e8d9bc;
  --primitive-color-white: #ffffff;
  --primitive-color-link-primary: #2d62ff;
  --primitive-color-rule: #134c6133;
  --primitive-color-rule-light: #ffffff80;
  --primitive-color-rule-faint: #ffffff33;
  --primitive-color-scrim-tab: #00000033;
  --primitive-color-scrim-modal: #134c6180;
  --primitive-color-scrim-panel: #134c61d1;
  --primitive-color-status-success: #2F6B4F;
  --primitive-color-status-warning: #8A5A12;
  --primitive-color-status-error: #A62B27;
  --primitive-color-status-info: #2C5C8A;
  --primitive-color-focus: #4d65ff;
  --primitive-color-scrim-hero: #10303cdb;
  --primitive-color-scrim-hero-0: #10303c00;
  --primitive-color-scrim-cta: #10303ca8;
  --primitive-color-star: #fcbf02;
  --primitive-color-teal-75: #134c61bf;
  --primitive-color-teal-light: #176582;
  --primitive-color-rule-on-dark: #e8d9bc80;
  --primitive-color-rule-white: #ffffff33;
  --primitive-font-primary: Literata, 'Noto Serif Display', Georgia, serif;
  --primitive-font-secondary: Manrope, 'Noto Sans', system-ui, -apple-system, sans-serif;
  --primitive-font-script: Hurricane, 'Brush Script MT', cursive;
  --primitive-fontSize-h1: 10.5rem;
  --primitive-fontSize-h1-991: 8rem;
  --primitive-fontSize-h1-767: 6rem;
  --primitive-fontSize-h1-479: 3.5rem;
  --primitive-fontSize-hero: 7rem;
  --primitive-fontSize-hero-1440: 8.25rem;
  --primitive-fontSize-hero-767: 4.5rem;
  --primitive-fontSize-hero-479: 3.5rem;
  --primitive-fontSize-hero-page: 4.5rem;
  --primitive-fontSize-hero-page-991: 3.5rem;
  --primitive-fontSize-hero-page-767: 2.5rem;
  --primitive-fontSize-hero-page-cap: 10.5vw;
  --primitive-fontSize-h2: 2.9rem;
  --primitive-fontSize-h2-1440: 3.74rem;
  --primitive-fontSize-h2-991: 3rem;
  --primitive-fontSize-h2-767: 2.5rem;
  --primitive-fontSize-h2-479: 2rem;
  --primitive-fontSize-h3: 2rem;
  --primitive-fontSize-h3-767: 1.8rem;
  --primitive-fontSize-h3-479: 1.5rem;
  --primitive-fontSize-h3-style: 1.5rem;
  --primitive-fontSize-body: 1.25rem;
  --primitive-fontSize-body-767: 1.125rem;
  --primitive-fontSize-regular: 1.25rem;
  --primitive-fontSize-paragraph: 1rem;
  --primitive-fontSize-small: 0.875rem;
  --primitive-fontSize-mega: 2rem;
  --primitive-fontSize-mega-1440: 3rem;
  --primitive-fontSize-eyebrow: 3.125rem;
  --primitive-fontSize-eyebrow-767: 2.125rem;
  --primitive-fontSize-eyebrow-hero: 5rem;
  --primitive-fontSize-eyebrow-hero-1440: 6rem;
  --primitive-fontSize-regular-479: 1.125rem;
  --primitive-fontSize-card-title: 2.375rem;
  --primitive-fontSize-card-title-991: 1.5rem;
  --primitive-fontSize-caption: 0.75rem;
  --primitive-leading-h1: 8.75rem;
  --primitive-leading-h1-991: 7rem;
  --primitive-leading-h1-767: 5rem;
  --primitive-leading-h1-479: 3.5rem;
  --primitive-leading-hero: 1.1;
  --primitive-leading-tight: 1.15;
  --primitive-leading-flat: 100%;
  --primitive-leading-body: 2rem;
  --primitive-leading-body-767: 1.5rem;
  --primitive-leading-prose: 1.5;
  --primitive-leading-regular: 1.3;
  --primitive-leading-paragraph: 1.4375rem;
  --primitive-leading-small: 1.5rem;
  --primitive-leading-mega: 130%;
  --primitive-leading-contact: 1.25rem;
  --primitive-leading-card-title: 2.5rem;
  --primitive-leading-card-title-767: 1.8rem;
  --primitive-leading-review: 1.625rem;
  --primitive-leading-caption: 1rem;
  --primitive-leading-heading: 105%;
  --primitive-tracking-h1: -0.05em;
  --primitive-tracking-h2: -1.8px;
  --primitive-tracking-h2-479: -1px;
  --primitive-tracking-h3: -1.28px;
  --primitive-tracking-h3-479: -0.5px;
  --primitive-tracking-h3-style: -0.48px;
  --primitive-tracking-h1-word: 0.1em;
  --primitive-tracking-body: -0.4px;
  --primitive-tracking-regular: -0.48px;
  --primitive-tracking-button: -0.8px;
  --primitive-tracking-mega: -1.92px;
  --primitive-tracking-contact: -0.32px;
  --primitive-tracking-span: -0.2px;
  --primitive-tracking-none: 0;
  --primitive-weight-light: 300;
  --primitive-weight-regular: 400;
  --primitive-weight-medium: 500;
  --primitive-weight-bold: 700;
  --primitive-spacing-0: 0;
  --primitive-spacing-1: 0.25rem;
  --primitive-spacing-2: 0.5rem;
  --primitive-spacing-3: 0.75rem;
  --primitive-spacing-4: 1rem;
  --primitive-spacing-5: 1.25rem;
  --primitive-spacing-6: 1.5rem;
  --primitive-spacing-7: 1.75rem;
  --primitive-spacing-8: 2rem;
  --primitive-spacing-10: 2.5rem;
  --primitive-spacing-12: 3rem;
  --primitive-spacing-15: 3.75rem;
  --primitive-spacing-16: 4rem;
  --primitive-spacing-20: 5rem;
  --primitive-spacing-24: 6rem;
  --primitive-spacing-25: 6.25rem;
  --primitive-spacing-guide-descr-gap: 2.8125rem;
  --primitive-spacing-guide-btn-y: 1.4375rem;
  --primitive-spacing-guide-footer-menu: 0.8rem;
  --primitive-spacing-guide-footer-bottom: 1.5625rem;
  --primitive-spacing-guide-legal: 1.6875rem;
  --primitive-spacing-guide-right-block-1440: 2.375rem;
  --primitive-spacing-guide-contact-1440: 1.1875rem;
  --primitive-spacing-guide-card-x: 3.0625rem;
  --primitive-spacing-guide-card-b: 4.5rem;
  --primitive-spacing-guide-modal-title: 4.375rem;
  --primitive-spacing-guide-detail-gap: 0.2rem;
  --primitive-spacing-guide-hero-title-767: 3.5rem;
  --primitive-spacing-pad-global: 3.125rem;
  --primitive-spacing-pad-global-767: 1.25rem;
  --primitive-spacing-nav-x: 3.375rem;
  --primitive-spacing-nav-y: 0.5rem;
  --primitive-spacing-gap-reach: 3rem;
  --primitive-spacing-gap-reach-1440: 5rem;
  --primitive-spacing-gap-reach-991: 2rem;
  --primitive-spacing-arrows-x: 3.3125rem;
  --primitive-spacing-cta-top: 21.0625rem;
  --primitive-spacing-cta-bottom: 13.75rem;
  --primitive-spacing-place-left-top: 19.0625rem;
  --primitive-spacing-place-img-left: 25.25rem;
  --primitive-spacing-place-mid-right: 8.0625rem;
  --primitive-spacing-card-gap: 2.875rem;
  --primitive-spacing-card-pad: 1.375rem;
  --primitive-spacing-card-gap-991: 1.5rem;
  --primitive-spacing-upcoming-gap-1440: 3.125rem;
  --primitive-size-modal: 85.0625rem;
  --primitive-size-menu-icon: 1.375rem;
  --primitive-size-mega-479: 1.8rem;
  --primitive-size-place-img-479: 15rem;
  --primitive-size-footer-link-479: 15rem;
  --primitive-size-focus-ring-w: 0.125rem;
  --primitive-size-root-font: 16px;
  --primitive-size-offscreen: -9999px;
  --primitive-size-overlap-gallery: 3.5rem;
  --primitive-size-container: 83.75rem;
  --primitive-size-hero-title: 70rem;
  --primitive-size-place-left: 26.25rem;
  --primitive-size-place-left-img: 18.5625rem;
  --primitive-size-place-block: 32rem;
  --primitive-size-place-title: 30rem;
  --primitive-size-place-descr: 28.75rem;
  --primitive-size-place-right-img: 25rem;
  --primitive-size-place-right-img-1440: 22.5625rem;
  --primitive-size-place-right-h: 23.6875rem;
  --primitive-size-display-max: 50rem;
  --primitive-size-reach-title: 28rem;
  --primitive-size-reach-img: 25rem;
  --primitive-size-reach-img-1440: 22.1875rem;
  --primitive-size-reach-block: 20rem;
  --primitive-size-reach-block-1440: 22.1876rem;
  --primitive-size-gallery-w: 63.375rem;
  --primitive-size-gallery-h: 42.3125rem;
  --primitive-size-gallery-w-991: 35rem;
  --primitive-size-gallery-h-991: 25rem;
  --primitive-size-gallery-w-767: 30rem;
  --primitive-size-gallery-h-767: 20rem;
  --primitive-size-gallery-w-479: 22.5rem;
  --primitive-size-testi-title: 30rem;
  --primitive-size-testi-title-1440: 25rem;
  --primitive-size-cta-content: 58rem;
  --primitive-size-cta-descr: 35.3125rem;
  --primitive-size-footer-link: 22.5rem;
  --primitive-size-footer-addr: 16rem;
  --primitive-size-menu: 31.25rem;
  --primitive-size-circle: 3.75rem;
  --primitive-size-circle-767: 3rem;
  --primitive-size-circle-479: 2.5rem;
  --primitive-size-arrow-btn: 3.5rem;
  --primitive-size-arrow-btn-767: 2.5rem;
  --primitive-size-logo-nav: 7rem;
  --primitive-size-logo-nav-479: 5.25rem;
  --primitive-size-hairline: 0.5px;
  --primitive-size-divider: 0.03125rem;
  --primitive-size-tap: 44px;
  --primitive-size-panel: 26%;
  --primitive-size-nav-row: 5.875rem;
  --primitive-size-upcoming-title: 40rem;
  --primitive-size-upcoming-descr: 32rem;
  --primitive-size-link-icon: 4.8125rem;
  --primitive-size-link-icon-991: 2.5rem;
  --primitive-size-review-avatar: 2.5rem;
  --primitive-size-review-star: 1.375rem;
  --primitive-size-review-star-sm: 1.125rem;
  --primitive-size-review-tab: 2.75rem;
  --primitive-size-tab-indicator: 0.125rem;
  --primitive-size-review-dot: 0.375rem;
  --primitive-size-reveal-bleed: 0.0625rem;
  --primitive-size-underline-offset: 0.18em;
  --primitive-size-explore-title: 55rem;
  --primitive-size-explore-descr: 26.5rem;
  --primitive-size-explore-img-sm: 21.9375rem;
  --primitive-size-explore-left: 34.375rem;
  --primitive-size-explore-img-tall: 27.6875rem;
  --primitive-size-time-title-wrap: 40rem;
  --primitive-size-point-h: 30rem;
  --primitive-size-point-h-1440: 45.625rem;
  --primitive-size-point-h-767: 20rem;
  --primitive-size-explore-col: 26rem;
  --primitive-size-explore-indent-sm: 3rem;
  --primitive-size-map-h: 22rem;
  --primitive-size-textarea: 9rem;
  --primitive-size-hero-compact: 38vh;
  --primitive-size-hero-compact-991: 46vh;
  --primitive-size-legal-toc: 16rem;
  --primitive-radius-none: 0;
  --primitive-radius-circle: 100%;
  --primitive-radius-pill: 100px;
  --primitive-radius-score: 0.375rem 0.375rem 0.375rem 0;
  --primitive-blur-gallery: 10px;
  --primitive-blur-gallery-479: 3px;
  --primitive-blur-word: 6.6px;
  --primitive-blur-panel: 2px;
  --primitive-duration-fast: 140ms;
  --primitive-duration-base: 240ms;
  --primitive-duration-hover: 0.25s;
  --primitive-duration-slow: 480ms;
  --primitive-easing-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --primitive-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --primitive-scale-parallax: 1.3;
  --primitive-scale-overlay-991: 1.1;
  --primitive-z-nav: 9;
  --primitive-z-overlay: 90;
  --primitive-z-menu: 99;
  --primitive-z-modal: 999;
  --primitive-z-above: 2;
  --primitive-z-base: 1;
  --primitive-z-scrim: 3;
  --primitive-space-explore-grid: 5.625rem;
  --primitive-space-explore-indent: 6.9375rem;
}

/* === SEMANTIC === */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-alt: #fffaef;
  --fg: #10303c;
  --fg-muted: #134c61;
  --fg-subtle: #134c61;
  --fg-on-photo: #ffffff;
  --fg-on-dark: #e8d9bc;
  --border: #134c6133;
  --rule: #134c6133;
  --rule-on-photo: #ffffff80;
  --rule-faint: #ffffff33;
  --accent: #134c61;
  --accent-strong: #10303c;
  --accent-hover: #10303c;
  --accent-soft: #e8d9bc;
  --on-accent: #ffffff;
  --focus-ring: #4d65ff;
  --scrim-tab: #00000033;
  --scrim-modal: #134c6180;
  --scrim-panel: #134c61d1;
  --link-primary: #134c61;
  --success: #2F6B4F;
  --on-success: #ffffff;
  --warning: #8A5A12;
  --on-warning: #ffffff;
  --error: #A62B27;
  --on-error: #ffffff;
  --info: #2C5C8A;
  --on-info: #ffffff;
  --opacity-disabled: 0.5;
  --font-display: Literata, 'Noto Serif Display', Georgia, serif;
  --font-sans: Manrope, 'Noto Sans', system-ui, -apple-system, sans-serif;
  --font-eyebrow: Hurricane, 'Brush Script MT', cursive;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --text-h1: 10.5rem;
  --text-h1-991: 8rem;
  --text-h1-767: 6rem;
  --text-h1-479: 3.5rem;
  --text-hero: 7rem;
  --text-hero-1440: 8.25rem;
  --text-hero-767: 4.5rem;
  --text-hero-479: 3.5rem;
  --text-hero-page: 4.5rem;
  --text-hero-page-991: 3.5rem;
  --text-hero-page-767: 2.5rem;
  --text-hero-page-cap: 10.5vw;
  --text-h2: 2.9rem;
  --text-h2-1440: 3.74rem;
  --text-h2-991: 3rem;
  --text-h2-767: 2.5rem;
  --text-h2-479: 2rem;
  --text-h3: 2rem;
  --text-h3-767: 1.8rem;
  --text-h3-479: 1.5rem;
  --text-h3-style: 1.5rem;
  --text-base: 1.25rem;
  --text-base-767: 1.125rem;
  --text-regular: 1.25rem;
  --text-paragraph: 1rem;
  --text-sm: 0.875rem;
  --text-mega: 2rem;
  --text-mega-1440: 3rem;
  --text-eyebrow: 3.125rem;
  --text-eyebrow-767: 2.125rem;
  --text-eyebrow-hero-767: 3.125rem;
  --text-eyebrow-hero: 5rem;
  --text-eyebrow-hero-1440: 6rem;
  --leading-h1: 8.75rem;
  --leading-h1-991: 7rem;
  --leading-h1-767: 5rem;
  --leading-h1-479: 3.5rem;
  --leading-hero: 1.1;
  --leading-tight: 1.15;
  --leading-flat: 100%;
  --leading-base: 2rem;
  --leading-base-767: 1.5rem;
  --leading-prose: 1.5;
  --leading-regular: 1.3;
  --leading-paragraph: 1.4375rem;
  --leading-sm: 1.5rem;
  --leading-mega: 130%;
  --leading-contact: 1.25rem;
  --tracking-h1: -0.05em;
  --word-spacing-h1: 0.1em;
  --tracking-h2: -1.8px;
  --tracking-h2-479: -1px;
  --tracking-h3: -1.28px;
  --tracking-h3-479: -0.5px;
  --tracking-h3-style: -0.48px;
  --tracking-base: -0.4px;
  --tracking-regular: -0.48px;
  --tracking-button: -0.8px;
  --tracking-mega: -1.92px;
  --tracking-contact: -0.32px;
  --tracking-span: -0.2px;
  --tracking-none: 0;
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-15: 3.75rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-25: 6.25rem;
  --pad-global: 3.125rem;
  --pad-global-sm: 1.25rem;
  --nav-pad-x: 3.375rem;
  --nav-pad-y: 0.5rem;
  --gap-reach: 3rem;
  --gap-reach-1440: 5rem;
  --gap-reach-991: 2rem;
  --arrows-pad-x: 3.3125rem;
  --cta-pad-top: 21.0625rem;
  --cta-pad-bottom: 13.75rem;
  --place-left-top: 19.0625rem;
  --place-img-left: 25.25rem;
  --place-mid-right: 8.0625rem;
  --overlap-gallery: 3.5rem;
  --size-container: 83.75rem;
  --size-hero-title: 70rem;
  --size-place-left: 26.25rem;
  --size-place-left-img: 18.5625rem;
  --size-place-block: 32rem;
  --size-place-title: 30rem;
  --size-place-descr: 28.75rem;
  --size-place-right-img: 25rem;
  --size-place-right-img-1440: 22.5625rem;
  --size-place-right-h: 23.6875rem;
  --size-display-max: 50rem;
  --size-reach-title: 28rem;
  --size-reach-img: 25rem;
  --size-reach-img-1440: 22.1875rem;
  --size-reach-block: 20rem;
  --size-reach-block-1440: 22.1876rem;
  --size-gallery-w: 63.375rem;
  --size-gallery-h: 42.3125rem;
  --size-gallery-w-991: 35rem;
  --size-gallery-h-991: 25rem;
  --size-gallery-w-767: 30rem;
  --size-gallery-h-767: 20rem;
  --size-gallery-w-479: 22.5rem;
  --size-testi-title: 30rem;
  --size-testi-title-1440: 25rem;
  --size-cta-content: 58rem;
  --size-cta-descr: 35.3125rem;
  --size-footer-link: 22.5rem;
  --size-footer-addr: 16rem;
  --size-menu: 31.25rem;
  --size-circle: 3.75rem;
  --size-circle-767: 3rem;
  --size-circle-479: 2.5rem;
  --size-arrow-btn: 3.5rem;
  --size-arrow-btn-767: 2.5rem;
  --size-logo-nav: 7rem;
  --size-logo-nav-479: 5.25rem;
  --hairline: 0.5px;
  --border-width: 0.5px;
  --divider-h: 0.03125rem;
  --tap-target: 44px;
  --hero-panel: 26%;
  --radius-none: 0;
  --radius-circle: 100%;
  --radius-pill: 100px;
  --blur-gallery: 10px;
  --blur-gallery-479: 3px;
  --blur-word: 6.6px;
  --blur-panel: 2px;
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-hover: 0.25s;
  --dur-slow: 480ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --scale-parallax: 1.3;
  --scale-overlay-991: 1.1;
  --z-nav: 9;
  --z-menu: 99;
  --z-overlay: 90;
  --z-modal: 999;
  --z-above: 2;
  --z-base: 1;
  --space-descr-gap: 2.8125rem;
  --space-btn-y: 1.4375rem;
  --space-footer-menu: 0.8rem;
  --space-footer-bottom: 1.5625rem;
  --space-legal: 1.6875rem;
  --space-right-block-1440: 2.375rem;
  --space-contact-1440: 1.1875rem;
  --space-card-x: 3.0625rem;
  --space-card-b: 4.5rem;
  --space-modal-title: 4.375rem;
  --space-detail-gap: 0.2rem;
  --space-hero-title-767: 3.5rem;
  --size-modal: 85.0625rem;
  --size-menu-icon: 1.375rem;
  --size-mega-479: 1.8rem;
  --size-place-img-479: 15rem;
  --size-footer-link-479: 15rem;
  --focus-width: 0.125rem;
  --root-font: 16px;
  --offscreen: -9999px;
  --scrim-hero: #10303cdb;
  --scrim-hero-0: #10303c00;
  --scrim-cta: #10303ca8;
  --z-scrim: 3;
  --size-nav-row: 5.875rem;
  --text-regular-479: 1.125rem;
  --size-upcoming-title: 40rem;
  --size-upcoming-descr: 32rem;
  --size-link-icon: 4.8125rem;
  --space-card-gap: 2.875rem;
  --space-card-pad: 1.375rem;
  --text-card-title: 2.375rem;
  --leading-card-title: 2.5rem;
  --leading-card-title-767: 1.8rem;
  --space-7: 1.75rem;
  --space-card-gap-991: 1.5rem;
  --text-card-title-991: 1.5rem;
  --size-link-icon-991: 2.5rem;
  --space-upcoming-gap-1440: 3.125rem;
  --rating-star: #fcbf02;
  --fg-caption: #134c61bf;
  --text-caption: 0.75rem;
  --text-review: 1.125rem;
  --leading-review: 1.625rem;
  --leading-caption: 1rem;
  --size-review-avatar: 2.5rem;
  --size-review-star: 1.375rem;
  --size-review-star-sm: 1.125rem;
  --size-review-tab: 2.75rem;
  --size-tab-indicator: 0.125rem;
  --size-review-dot: 0.375rem;
  --radius-score: 0.375rem 0.375rem 0.375rem 0;
  --size-reveal-bleed: 0.0625rem;
  --size-underline-offset: 0.18em;
  --size-explore-title: 55rem;
  --size-explore-descr: 26.5rem;
  --size-explore-img-sm: 21.9375rem;
  --size-explore-left: 34.375rem;
  --size-explore-img-tall: 27.6875rem;
  --size-time-title-wrap: 40rem;
  --size-point-h: 30rem;
  --size-point-h-1440: 45.625rem;
  --size-point-h-767: 20rem;
  --space-explore-grid: 5.625rem;
  --space-explore-indent: 6.9375rem;
  --accent-gradient-end: #176582;
  --rule-on-dark: #e8d9bc80;
  --rule-white: #ffffff33;
  --size-explore-col: 26rem;
  --size-explore-indent-sm: 3rem;
  --size-map-h: 22rem;
  --leading-heading: 105%;
  --size-textarea: 9rem;
  --size-hero-compact: 38vh;
  --size-hero-compact-991: 46vh;
  --size-legal-toc: 16rem;
}

/* === COMPONENTS === */
:root {
  --header-height: 3.75rem;
  --field-height: 44px;
  --placeholder-border: #134c6133;
}

/* --- app.css --- */
/* =============================================================================
   app.css — Bella Vista Design Studios
   ΓΥΡΟΣ 5, 16/9/2026. Ξαναγραμμένο section προς section πάνω στον οδηγό
   κώδικα `Work/Designs/Bella Vista/References/Code/oneanasa-stay/css/styles.css`
   (rebuild της ζωντανής oneanasa.com/stay, δηλαδή της R1).

   Εντολή Ιωάννη: «θα πάμε όπως είναι το δείγμα ακριβώς, δεν αλλάζουμε κάτι».
   Άρα: ίδιες διαστάσεις, ίδια ratio, ίδιο spacing, ίδια κλίμακα τύπου, ίδια
   χρώματα, ίδια breakpoints (1280↑, 1440↑, 991↓, 767↓, 479↓), ίδιες κλάσεις.
   Οι κλάσεις κρατιούνται ΑΥΤΟΥΣΙΕΣ, με τα τυπογραφικά λάθη του Webflow που
   κουβαλά και ο οδηγός (.stay-place_diuscription, .sta-reach_info, .m-menu_blovk,
   .amenties-*), ώστε το `assets/js/main.js` να τρέχει χωρίς καμία αλλαγή.

   ΚΑΘΕ τιμή έρχεται από `assets/tokens.css` μέσω var(--…). Οι μόνοι ωμοί
   αριθμοί είναι τα breakpoints των media queries, γιατί ένα media query δεν
   διαβάζει custom property.

   Οι ΤΡΕΙΣ δικές μας προσθήκες, όλες δηλωμένες:
     1. `.hero-panel`  η κάθετη λωρίδα χρώματος αριστερά στο hero
     2. a11y: skip-link, ορατό focus, touch targets 44px, `.visually-hidden`
     3. `prefers-reduced-motion`, που ο οδηγός ήδη έχει και κρατιέται ως έχει
   ========================================================================== */

/* ------------------------------------------------------------ 1  RESET/BASE */

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

html {
  height: auto;
  font-size: var(--root-font);
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-base);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main { display: block; }

/* Ο οδηγός κρατά το normalize του Webflow: inline-block + vertical-align.
   Με αυτό μετρήθηκαν τα κουτιά, δεν γίνεται block. */
/* Το `height: auto` ΛΕΙΠΕ και κρατουσε το λογοτυπο στο υψος του attribute
   (885x190): η μπαρα εβγαινε 206 px αντι για 110 του οδηγου, και το tween
   A4 (-110 px) αφηνε λωριδα 96 px ορατη στο scroll down. */
img { max-width: 100%; height: auto; vertical-align: middle; display: inline-block; border: 0; }

/* Ο helper picture() της build.py βγάζει `<picture class="…"><img>`, οπότε η
   κλάση του οδηγού (.img-cover, .hero-bg_img, .scale-img …) κάθεται στο
   <picture>. Το object-fit όμως δουλεύει μόνο σε replaced element, δηλαδή
   στην <img>. Μία γραμμή το περνά μέσα, για κάθε κουτί του οδηγού. */
picture { display: block; width: 100%; height: 100%; }
picture > img { width: 100%; height: 100%; object-fit: inherit; display: block; }
/* 23/9: χωρίς JS η lazy εκδοχή (placeholder) κρύβεται και μένει η εικόνα του
   <noscript> που την ακολουθεί. Με JS το <noscript> δεν αποδίδεται ποτέ.
   Το !important χρειάζεται: κανόνες όπως `.block-image.is-auto > picture`
   (display: block, μεγαλύτερη ειδικότητα) την ξαναέδειχναν (μετρημένο 23/9). */
@media (scripting: none) { picture[data-lz] { display: none !important; } }

svg:not(:root) { overflow: hidden; }
/* Το sprite των εικονιδιων φερει `hidden`, αλλα το `hidden` ειναι κανονας του
   UA stylesheet της HTML και δεν πιανει στοιχεια του SVG namespace: το sprite
   εμενε display:inline, 300x150, και εσπρωχνε ολο το .main-wrapper 159 px πιο
   κατω. Κρυφο στην οθονη δεν σημαινει κρυφο στη ροη. */
svg[data-icon-sprite] { position: absolute; width: 0; height: 0; overflow: hidden; }

a { color: var(--link-primary); background-color: transparent; text-decoration: none; }
/* 17/9 αποφαση Ιωαννη: «οχι μπλε links». Το --link-primary δειχνει πλεον στο teal.
   Οι συνδεσμοι μεσα σε κειμενο (οι {{link:…}} του content, χωρις κλαση) παιρνουν
   υπογραμμιση, ωστε να ξεχωριζουν και χωρις χρωμα (WCAG 1.4.1). */
/* 24/9 (QA P2-1): και οι λιστες του κειμενου (ul χωρις κλαση, απο το prose
   του build). Οι λιστες των templates εχουν ολες κλαση, αρα δεν πιανονται. */
p a:not([class]), ul:not([class]) > li a:not([class]) { color: var(--accent); text-decoration: underline; text-decoration-thickness: var(--border-width); text-underline-offset: var(--size-underline-offset); }
p a:not([class]):hover, ul:not([class]) > li a:not([class]):hover { color: var(--accent-hover); }
/* 24/9 (QA P2-2): το email δεν εχει σημειο αλλαγης γραμμης και στα 320 εσπρωχνε
   τη σελιδα 12 px. Σπαει μονο οταν δεν χωραει. */
a[href^="mailto:"] { overflow-wrap: anywhere; }
a:active, a:hover { outline: 0; }

/* Lenis (ο οδηγός φορτώνει Lenis χωρίς το stylesheet του) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* --- ΔΙΚΟ ΜΑΣ: a11y. Ο οδηγός δεν έχει skip-link ούτε ορατό focus σε links. --- */
.skip-link {
  position: absolute;
  inset-inline-start: var(--offscreen);
  z-index: var(--z-modal);
  background: var(--accent);
  color: var(--on-accent);
  padding: var(--space-3) var(--space-5);
}
.skip-link:focus { inset-inline-start: var(--space-4); top: var(--space-4); }

:where(a, button, [tabindex], summary):focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-width);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------- 2  ΤΥΠΟΓΡΑΦΙΑ */

/* 16/9 αποφαση Ιωαννη: ΟΛΟΙ οι τιτλοι 400, για συνοχη. Ο οδηγος γραφει 700,
   αλλα η Hv Muse του εχει μονο 400 και ο browser την «χοντραινει» ελαφρα· η
   Literata εχει πραγματικο bold και εβγαινε πολυ βαρια. */
/* 18/9: μια μεγαλη ελληνικη λεξη σε στενη στηλη («ΕΠΙΚΟΙΝΩΝΗΣΤΕ» στα 390)
   εβγαζε ολοκληρη τη σελιδα εξω. Συλλαβισμος, με το lang="el" του <html>. */
/* 19/9: ΧΩΡΙΣ συλλαβισμο. Το hyphens: auto της 18/9 εκοβε λεξεις που χωρουσαν
   ολοκληρες στην επομενη γραμμη («ΔΙΑ-ΜΕΡΙΣΜΑ», ακομη και «χω-ριά» στα 1440):
   47 σπασμενες λεξεις σε τιτλους. Μενει μονο το overflow-wrap, που σπαει
   λεξη ΜΟΝΟ οταν δεν χωραει μονη της σε γραμμη (η υπερχειλιση της 18/9). */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--weight-regular); overflow-wrap: break-word; hyphens: manual; }

/* 18/9 (Ιωαννης: «στα H1 οι λεξεις ειναι πολυ κοντα η μια στην αλλη»): το
   letter-spacing του οδηγου σφιγγει ΚΑΙ το διαστημα, οποτε το κενο λεξης
   επεφτε στο 0.107em ενω καθε H2 της ιδιας σελιδας ειχε 0.25em (μετρηση στο
   /studios/). Το tracking εγινε αναλογικο (em) και το word-spacing επαναφερει
   το κενο ακριβως στο 0.25em, δηλαδη στον ρυθμο των H2. */
h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-h1);
  word-spacing: var(--word-spacing-h1);
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
}

h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-h2);
  font-size: var(--text-h2);
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
}

h3 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-h3);
  font-size: var(--text-h3);
  line-height: var(--leading-heading);
  text-transform: uppercase;
}

p { margin: 0; color: var(--fg); line-height: var(--leading-prose); }

.text-h1 { font-size: var(--text-hero); font-weight: var(--weight-regular); line-height: var(--leading-hero); }
/* 17/9 (σταδιο 7c): ο H1 των εσωτερικων σελιδων ειναι προταση, οχι το ονομα
   του καταλυματος. Δικη του κλιμακα, αλλιως επιανε τεσσερις αραδες. */
.text-h1.is-page { font-size: var(--text-hero-page); }
.heading-style-h3 { letter-spacing: var(--tracking-h3-style); font-size: var(--text-h3-style); line-height: var(--leading-heading); }
.text-size-small { font-size: var(--text-sm); }
.text-size-small.caps-none { text-transform: none; line-height: var(--leading-sm); }
.text-size-regular { letter-spacing: var(--tracking-regular); font-size: var(--text-regular); font-weight: var(--weight-regular); line-height: var(--leading-regular); }
.paragraph { font-family: var(--font-sans); color: var(--accent); text-transform: uppercase; font-size: var(--text-paragraph); line-height: var(--leading-paragraph); }
.paragraph.white { color: var(--fg-on-photo); }

/* Word-split headings (A1). Η ΤΕΛΙΚΗ κατάσταση είναι η προεπιλογή, ώστε η
   σελίδα να είναι σωστή χωρίς JS και με ?nomotion. Η προ-κατάσταση ζει πίσω
   από το html.js και τη σβήνει το main.js μόλις σπάσει τις λέξεις. */
.blur-word { display: inline-block; margin-right: 0.25em; }
/* 17/9 (audit A11Y-3 / SEO-2): το πραγματικο κενο αναμεσα στις λεξεις που
   βαζει το main.js. Μετραει για το κειμενο της σελιδας (αντιγραφη, αναζητηση,
   Google), οχι για το ματι: μηδενικο πλατος, η αποσταση μενει το margin του
   .blur-word. */
/* 18/9: `line-height: 0`. ΧΩΡΙΣ αυτο ο τιτλος ανοιγε 66 px αντι για τα 46 που
   δηλωνε το CSS. Το κενο ειναι inline με font-size 0 αλλα κληρονομουσε το
   line-height του τιτλου, οποτε εβαζε μισο leading (23 px) ΚΑΤΩ απο τη
   γραμμη βασης, ενω οι λεξεις (inline-block) εβαζαν το υψος τους ΠΑΝΩ της.
   Το αθροισμα ηταν η αραδα. Μετρημενο πριν και μετα, σε 1280, 1440 και 1920. */
.blur-space { font-size: 0; line-height: 0; letter-spacing: var(--tracking-none); }
.js [data-blur-text] { opacity: .5; filter: blur(var(--blur-word)); }
.js .blur-word { opacity: .5; filter: blur(var(--blur-word)); }

/* ΔΙΚΟ ΜΑΣ: το eyebrow σε Hurricane. ΜΟΝΟ αγγλικά, greek=0. */
.eyebrow-script {
  font-family: var(--font-eyebrow);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-regular);
  line-height: 1;
  letter-spacing: var(--tracking-none);
  color: var(--fg-on-photo);
  text-transform: none;
}
.eyebrow-script.is-ink { color: var(--accent); }
/* 17/9 αποφαση Ιωαννη: eyebrow πανω απο τους τεσσερις κεντρικους τιτλους
   (τοποθεσια, δωματια, «Γιατι», κριτικες) και, μετα το audit, πανω απο τον
   τιτλο της gallery («Το Μπατσι και η Ανδρος»). Ομαδα με δικο της μικρο κενο,
   ωστε το gap του wrapper να μην ανοιγει ανεμεσα σε eyebrow και τιτλο. */
.title-group { display: flex; flex-flow: column; row-gap: var(--space-2); }
.title-group > .eyebrow-script { display: block; margin: 0; }

/* -------------------------------------------------------------- 3  LAYOUT */

.padding-global { padding-left: var(--pad-global); padding-right: var(--pad-global); }
/* 18/9, αποφαση Ιωαννη («να μην ειναι full width οταν μεγαλωνω το παραθυρο»):
   μεγιστο πλατος περιεχομενου. Ο οδηγος δεν εχει, οποτε σε οθονη 2560 απλωνε
   καθε ενοτητα (το κουτι των παροχων εφτανε 2460 px, το κειμενο της εισαγωγης
   εμενε στη μεση και οι φωτογραφιες εφευγαν στις ακρες). Μονη εξαιρεση ηταν η
   gallery, που εχει δικο της οριο στα 1014. Η τιμη ειναι ακριβως το περιεχομενο
   σε οθονη 1440, αρα ως εκει δεν αλλαζει τιποτα: απο κει και πανω η σελιδα
   παγωνει στη συνθεση που εχει εγκριθει και μεγαλωνουν μονο τα περιθωρια. */
.container-large { width: 100%; max-width: var(--size-container); margin-left: auto; margin-right: auto; }
/* 18/9, αποφαση Ιωαννη: δυο εξαιρεσεις απο το οριο. Το hero και η ζωνη CTA
   μενουν οπως ηταν, δηλαδη ακολουθουν το πλατος της οθονης: και τα δυο ειναι
   φωτογραφια που πιανει ολο το καδρο, οχι στηλη κειμενου. */
.container-large.is-full { max-width: none; }

.main-wrapper.vh-space { padding-top: 100vh; }
/* Κοντο hero: σελιδες συναλλαγης (18/9). Το υψος και το κενο ΠΑΝΤΑ μαζι. */
.main-wrapper.vh-space.is-compact { padding-top: var(--size-hero-compact); }
.main-scroll_wrapper { z-index: var(--z-base); background-color: var(--bg); position: relative; }

/* --------------------------------------------------- 4  NAV + MEGA MENU */

.global-nav {
  z-index: var(--z-nav);
  padding: var(--nav-pad-y) var(--nav-pad-x);
  position: fixed;
  inset: 0% 0% auto;
  background-color: transparent;
}
.nav-wrapper {
  /* 94 px, ΑΚΡΙΒΩΣ οσο του οδηγου (μετρημενο). Εκει το δινει το συμπαγες
     σημα του· εδω δηλωνεται, γιατι το δικο μας ειναι πλατυ wordmark. */
  min-height: var(--size-nav-row);
  grid-column-gap: var(--space-4);
  grid-row-gap: var(--space-4);
  grid-template-rows: auto;
  grid-template-columns: 1fr max-content 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  display: grid;
}
.nav-left_wrapper {
  grid-column-gap: var(--space-8);
  grid-row-gap: var(--space-8);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.hamburger_block {
  cursor: pointer;
  border: var(--hairline) solid var(--rule-on-photo);
  border-radius: var(--radius-circle);
  justify-content: center;
  align-items: center;
  width: var(--size-circle);
  height: var(--size-circle);
  display: flex;
  background: none;
  padding: 0;
  flex: none;
}
.menu-open { justify-content: center; align-items: center; width: var(--size-menu-icon); display: flex; color: var(--fg-on-photo); }
.nav-main_links { grid-column-gap: var(--space-8); grid-row-gap: var(--space-8); display: flex; }
.nav-link { font-family: var(--font-sans); color: var(--fg-on-photo); text-decoration: none; }
.nav-main_logo { width: var(--size-logo-nav); max-width: 100%; color: var(--fg-on-photo); display: inline-block; }
.nav-right_wrapper { justify-content: flex-end; display: flex; align-items: center; grid-column-gap: var(--space-4); }
.nav-lang { display: flex; gap: var(--space-3); font-size: var(--text-sm); color: var(--fg-on-photo); }
.nav-lang--mm { display: none; font-size: var(--text-regular); margin-top: var(--space-4); }
.nav-lang a { color: inherit; opacity: .62; text-decoration: none; }
.nav-lang a[aria-current] { opacity: 1; font-weight: var(--weight-medium); }

.mega-menu {
  z-index: var(--z-menu);
  background-color: var(--accent);
  width: 100%;
  max-width: var(--size-menu);
  height: 100vh;
  display: block;
  position: fixed;
  inset: 0% auto 0% 0%;
  transform: translateX(-100%);
  /* 17/9 (audit A11Y-1): κλειστο = εκτος πληκτρολογιου. Το initMegaMenu το
     κανει visible στο ανοιγμα και hidden μολις τελειωσει το κλεισιμο. */
  visibility: hidden;
}
.mega-menu.move { transform: none; }
.m-menu_blovk { padding-top: var(--space-2); padding-left: var(--space-10); padding-right: var(--space-4); }
.close-mm_wrapper { padding-bottom: var(--space-10); }
.close-hamburger {
  cursor: pointer;
  border: var(--hairline) solid var(--rule-on-photo);
  border-radius: var(--radius-circle);
  justify-content: center;
  align-items: center;
  width: var(--size-circle);
  height: var(--size-circle);
  display: flex;
  background: none;
  padding: 0;
}
.mm-links_wrapper { flex-flow: column; display: flex; }
.mega_nav_links {
  font-family: var(--font-display);
  color: var(--fg-on-photo);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  font-size: var(--text-mega);
  font-weight: var(--weight-regular);
  line-height: var(--leading-mega);
  text-decoration: none;
  transition: color var(--dur-hover);
}
.mega_nav_links:hover { color: var(--accent-soft); }
.m-m_divider { background-color: var(--rule-faint); width: 100%; height: var(--divider-h); margin-top: var(--space-10); margin-bottom: var(--space-10); }
.menu-other_links { flex-flow: column; padding-left: var(--space-10); padding-right: var(--space-4); display: flex; }
.m-m_contact { grid-column-gap: var(--space-2); grid-row-gap: var(--space-2); flex-flow: column; padding-left: var(--space-10); padding-right: var(--space-4); display: flex; }
.link-contact { color: var(--accent-soft); letter-spacing: var(--tracking-contact); font-size: var(--text-paragraph); line-height: var(--leading-contact); text-decoration: none; }

/* ============================================================ 5  SECTIONS */

/* --- 1. HERO (position:fixed· το .main-wrapper.vh-space κρατά τον χώρο) --- */
.section-stay_hero.is-compact { height: var(--size-hero-compact); }
.section-stay_hero {
  flex-flow: column;
  justify-content: flex-end;
  height: 100vh;
  display: flex;
  position: fixed;
  inset: 0% 0% auto;
}
.hero-bg_col { gap: 0; width: 100%; height: 100%; display: block; position: absolute; inset: 0%; overflow: hidden; }
/* Ο οδηγος γραφει το `.hero-main_img { height: 100% }` ΜΟΝΟ κατω απο 991
   (τα υπολοιπα του τα εδινε το base CSS του Webflow, που δεν το εχουμε).
   Χωρις αυτο, η φωτογραφια παιρνει το φυσικο της 16:9 και αφηνει λευκη
   λωριδα 90 px στον πατο του hero. Μετρημενο: 810 αντι για 900. */
.hero-main_img { width: 100%; height: 100%; }
.hero-bg_img { object-fit: cover; width: 100%; height: 100%; }
.stay-hero_wrapper { z-index: var(--z-above); position: relative; }
.stay-home_title { width: 100%; max-width: var(--size-hero-title); color: var(--fg-on-photo); padding-bottom: var(--space-descr-gap); }
.heading-tag { padding-left: var(--space-5); }
/* ΔΙΚΗ ΜΑΣ ΠΡΟΣΘΗΚΗ #2, απαιτηση προσβασιμοτητας: ο οδηγος κραται το
   .tab-overlay κρυφο πανω απο τα 991 και το δειχνει ως επιπεδο scrim πιο
   κατω. Η δικη του φωτογραφια ειναι σκουρα πετρα· η δικη μας ειναι φωτεινη
   θαλασσα, και το λευκο κειμενο μετρηθηκε 1,38:1 στον τιτλο και 1,73:1 στον
   υποτιτλο. Το ιδιο στοιχειο του οδηγου γινεται βαθμιδωτο scrim σε ΚΑΘΕ
   πλατος, απο τον πατο προς τα πανω, ωστε να μη μπει νεο στοιχειο στο hero.
   Μετρημενο μετα: 3,44:1 στον τιτλο (οριο 3,0 για 132 px) και 6,6:1 στον
   υποτιτλο (οριο 4,5). Ο κανονας των floors υπερισχυει του reference. */
.tab-overlay {
  display: block;
  width: 100%; height: 100%;
  position: absolute; inset: 0;
  /* Πληρης ισχυς στο κατω 12% (εκει καθεται ο υποτιτλος), σβησιμο στο 62%
     (αρκετα πανω απο την πρωτη αραδα του τιτλου). Πιο ψηλα η φωτογραφια
     μενει ανεπαφη. */
  /* Δυο βαθμιδες, μια για καθε ζωνη κειμενου. Κατω: πληρης ισχυς στο 12%
     (υποτιτλος) και σβησιμο στο 68% (πανω απο την πρωτη αραδα του
     τιτλου). Πανω: η μπαρα πλοηγησης, που στην κορυφη της σελιδας ειναι
     διαφανη (το A5 της βαφει teal μολις ξεκινησει η κυλιση) και ως τοτε
     καθεται πανω στον ουρανο. */
  background-image:
    linear-gradient(to bottom, var(--scrim-hero) 0%, var(--scrim-hero) 8%, var(--scrim-hero-0) 26%),
    linear-gradient(to top, var(--scrim-hero) 0%, var(--scrim-hero) 12%, var(--scrim-hero-0) 68%);
  pointer-events: none;
}

/* 22/9, ΜΕΤΡΗΜΕΝΟ: το πανω scrim ειναι σε ΠΟΣΟΣΤΟ του hero, οποτε στο κοντο
   hero (38vh, δηλαδη 266 px στα 1440) σβηνει στα 69 px, ακριβως εκει που
   καθεται η μπαρα. Το λευκο «Διαθεσιμοτητα» της μπαρας μετρηθηκε 1,86:1 στις
   Τιμες και 3,11:1 στη Διαθεσιμοτητα, δηλαδη κατω απο το οριο 4,5. Στο κοντο
   hero το πανω scrim μετραται σε ΕΙΚΟΝΟΣΤΟΙΧΕΙΑ, οσο ειναι και η μπαρα, ωστε
   να μην εξαρταται απο το υψος της ζωνης ουτε απο τη φωτογραφια της ημερας. */
.section-stay_hero.is-compact .tab-overlay {
  background-image:
    linear-gradient(to bottom, var(--scrim-hero) 0, var(--scrim-hero) 4.5rem, var(--scrim-hero-0) 10rem),
    linear-gradient(to top, var(--scrim-hero) 0%, var(--scrim-hero) 12%, var(--scrim-hero-0) 68%);
}

/* ΔΙΚΗ ΜΑΣ ΠΡΟΣΘΗΚΗ, η μόνη στο hero: η κάθετη λωρίδα χρώματος αριστερά.
   Δεν είναι πλακάτο χρώμα: είναι η ΙΔΙΑ φωτογραφία κάτω από πετρόλ overlay,
   ώστε να μη σπάσει κανένα tween του οδηγού (το .hero-bg_col και το
   [data-scroll-image] μένουν ακριβώς ως έχουν, η λωρίδα κάθεται από πάνω). */
.hero-panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--hero-panel);
  background-color: var(--scrim-panel);
  backdrop-filter: blur(var(--blur-panel));
  z-index: var(--z-base);
}
/* 17/9: στοιχιση αριστερα με τον τιτλο (αποφαση Ιωαννη). */
.hero-eyebrow { padding-left: 0; padding-bottom: var(--space-4); }
/* 17/9 αποφαση Ιωαννη: ΜΟΝΟ το eyebrow του hero μεγαλυτερο («περιπου 6rem»),
   στο περιπου 0,73 του .text-h1 απο 768 και πανω (τιμες στα
   --text-eyebrow-hero*). Κατω απο 768 (δευτερη αποφαση, ιδια μερα) στο μεγεθος
   που ειχαν τα eyebrows των ενοτητων, --text-eyebrow-hero-767· μενει ετσι και
   οταν εκεινα μικρυναν στο κινητο (τριτη αποφαση, --text-eyebrow-767). */
.hero-eyebrow .eyebrow-script { font-size: var(--text-eyebrow-hero); }

/* --- 2. A PLACE TO BREATHE AGAIN --- */
.stay-place_wrapper { justify-content: space-between; padding-top: var(--space-16); padding-bottom: var(--space-16); }
.stay-place_wrapper-copy { justify-content: center; width: 100%; padding-top: 0; padding-bottom: 0; display: flex; }
.stay-left_wrapper { width: 100%; max-width: var(--size-place-left); padding-top: var(--place-left-top); }
.stay-left_img { width: 100%; height: var(--size-place-left-img); }
.stay-left_img.size-block { max-width: var(--size-place-block); }
.stay-right_block { grid-column-gap: var(--space-6); grid-row-gap: var(--space-6); flex-flow: column; display: flex; }
.div-block-5 { display: flex; }
.stay-midde_wrapper { padding-left: var(--space-3); padding-right: var(--place-mid-right); }
.stay-place_title { width: 100%; max-width: var(--size-place-title); color: var(--accent); padding-bottom: var(--space-8); }
.stay-place_diuscription {
  grid-column-gap: var(--space-descr-gap);
  grid-row-gap: var(--space-descr-gap);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: var(--size-place-descr);
  margin-left: var(--space-8);
  display: flex;
}
.stay-right_image { width: 100%; max-width: var(--size-place-right-img); height: var(--size-place-right-h); }
.place-img_wrap { padding-left: var(--place-img-left); }

/* --- 3. FULL-BLEED ΦΩΤΟΓΡΑΦΙΑ (parallax A3) --- */
.section-stay_display { height: 100vh; max-height: var(--size-display-max); overflow: hidden; }
.scale-img { object-fit: cover; width: 100%; height: 100%; display: block; transform: scale(var(--scale-parallax)); }
/* 17/9 αποφαση Ιωαννη (ο οδηγος δεν το εχει): η ασπρομαυρη εκδοχη με εγχρωμο
   μονο το κτηριο, ακριβως πανω στη φωτογραφια. Με JavaScript ξεκινα κρυφη και
   την εμφανιζει το scroll (initDisplayHighlight). Χωρις JavaScript φαινεται
   κατευθειαν, για να δειχνει παντα που ειναι το κτηριο. */
.section-stay_display .scale-img { position: relative; }
.display-highlight { position: absolute; inset: 0; }
.js .display-highlight { opacity: 0; }

/* --- 4. WHAT AWAITS WITHIN REACH --- */
.section-stay_reach { background-color: var(--surface-alt); }
.stay-reach_wrapper { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.stay-reach_title {
  grid-column-gap: var(--space-10);
  grid-row-gap: var(--space-10);
  width: 100%;
  max-width: var(--size-reach-title);
  color: var(--accent);
  text-align: center;
  flex-flow: column;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.stay-reach {
  grid-column-gap: var(--gap-reach);
  grid-row-gap: var(--gap-reach);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.stay-reach_card { grid-column-gap: var(--space-6); grid-row-gap: var(--space-6); flex-flow: column; display: flex; }
.reach-img_wrapper { height: var(--size-reach-img); }
.sta-reach_info {
  grid-column-gap: var(--space-4);
  grid-row-gap: var(--space-4);
  color: var(--accent);
  text-transform: uppercase;
  flex-flow: column;
  display: flex;
}
.stay-reach_block { width: 100%; max-width: var(--size-reach-block); }
/* 17/9 audit DL-4 (αποφαση Ιωαννη): το δευτερο «κουμπι» του «Γιατι» ως
   συνδεσμος κειμενου, με την υπογραμμιση των συνδεσμων μεσα σε κειμενο. Ιδια
   γραμματοσειρα και μεγεθος με το .button-link, ωστε να στοιχιζονται, και
   περιοχη πατηματος 44 px. */
.link-secondary {
  font-family: var(--font-sans);
  color: var(--accent);
  letter-spacing: var(--tracking-button);
  line-height: var(--leading-flat);
  text-decoration: underline;
  text-decoration-thickness: var(--border-width);
  text-underline-offset: var(--size-underline-offset);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  transition: color var(--dur-hover);
}
.link-secondary:hover { color: var(--accent-hover); }
.stay-reach_button_wrapper {
  grid-column-gap: var(--space-8);
  grid-row-gap: var(--space-8);
  flex-flow: row;
  justify-content: center;
  align-items: center;
  padding-top: var(--space-16);
  display: flex;
}

/* --- 4γ. ΣΕΛΙΔΕΣ ΔΩΜΑΤΙΩΝ (17/9, σταδιο 7c) ---------------------------
   Ο οδηγος εχει μια μονο σελιδα βαθους και καθολου breadcrumbs. Τα παρακατω
   ειναι δικες μας προσθηκες, στη γλωσσα του: micro Manrope, teal, hairlines. */
.breadcrumbs { padding-top: var(--space-8); }
.breadcrumbs-list {
  grid-column-gap: var(--space-2);
  grid-row-gap: var(--space-1);
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-caption);
  color: var(--fg-muted);
  display: flex;
}
.breadcrumbs-list li { grid-column-gap: var(--space-2); align-items: center; display: flex; }
.breadcrumbs-list li + li::before { content: "·"; color: var(--rule); }
.breadcrumbs-list a { color: var(--accent); text-decoration: none; }
.breadcrumbs-list a:hover { text-decoration: underline; }

/* Παροχες δωματιου ως ΛΙΣΤΕΣ με εικονιδιο ανα γραμμη (αποφαση Ιωαννη 17/9).
   Οι ομαδες χωριζονται με hairline, οχι με πλαισιο: το πλαισιο θα εκανε
   καρτες, και οι καρτες ειναι το pattern της Αρχικης.
   18/9 (Ιωαννης: «το section των παροχων να ειναι boxed οχι full width»): το
   κρεμ ΔΕΝ ειναι πια ζωνη απο ακρη σε ακρη. Καθεται στο .amenities-wrapper,
   δηλαδη μεσα στο .padding-global, και γινεται κουτι με δικο του περιθωριο.
   Ετσι ο καταλογος εξοπλισμου διαβαζεται ως ενα αντικειμενο, και η μονη
   full-bleed κρεμ ζωνη του site μενει το «Γιατι Bella Vista» της Αρχικης. */
/* 18/9, αποφαση Ιωαννη: το κουτι χωνεται κατω απο τη θολη ακρη της gallery, που
   ειναι ΠΑΝΤΑ η ενοτητα απο πανω στις σελιδες δωματιου. Η θολη στρωση ειναι
   position:absolute με z-index, αρα ζωγραφιζεται πανω απο το φοντο του κουτιου:
   εκει που σβηνει, αποκαλυπτει κρεμ αντι για λευκο, και το περασμα απο το
   πετρολ στο κρεμ γινεται ενα. Ως τωρα ηταν τρια πραγματα στη σειρα: σβησιμο σε
   λευκο (54 px), λωριδα λευκου (64 px), κοφτη ακμη του κρεμ.
   Ο τιτλος ΔΕΝ κουναται: οσο ανεβαινει το κουτι, τοσο μπαινει στο εσωτερικο του
   περιθωριο, ωστε να μενει 128 px κατω απο το τελος της gallery. */
.section-amenities { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.amenities-wrapper {
  background-color: var(--surface-alt);
  padding: var(--space-16) var(--space-12);
}
/* Το χωσιμο κατω απο τη θολη ακρη ισχυει ΜΟΝΟ οπου απο πανω ειναι η gallery,
   δηλαδη στις σελιδες δωματιου. 18/9: ηταν χωρις ορο και στη σελιδα τοποθεσιας
   τραβουσε το κουτι πανω στο κειμενο, με 184 px κενο μεσα του πριν τον τιτλο. */
.section-amenities.is-under-gallery { margin-top: calc(-1 * var(--overlap-gallery)); padding-top: 0; }
.section-amenities.is-under-gallery .amenities-wrapper { padding-top: calc(var(--space-16) * 2 + var(--overlap-gallery)); }
.amenities-head {
  grid-column-gap: var(--space-6);
  grid-row-gap: var(--space-6);
  width: 100%;
  max-width: var(--size-reach-title);
  color: var(--accent);
  text-align: center;
  flex-flow: column;
  margin: 0 auto var(--space-12);
  display: flex;
}
/* 18/9: ροη σε δυο στηλες (columns) αντι για grid. Με grid καθε σειρα επαιρνε
   το υψος της ψηλοτερης ομαδας, οποτε κατω απο τις κοντες («Η κουζινα», «Το
   μπανιο») εμενε κενο, και η πεμπτη ομαδα εμενε μονη της σε σειρα. Η ροη τις
   στοιβαζει και γεμιζει και τις δυο στηλες· το break-inside κραταει καθε ομαδα
   ακεραια. */
/* 18/9, αποφαση Ιωαννη: το κουτι με το χρωμα φτανει ως εκει που εφτανε, δηλαδη
   ακολουθει την οθονη με μικρη αποσταση απο την ακρη, οπως η ζωνη CTA (γι' αυτο
   το .container-large του εχει is-full). Το ΠΕΡΙΕΧΟΜΕΝΟ ομως σταματα: παγωνει
   στο πλατος που εχει σε οθονη 1440, δηλαδη το οριο του container μειον το
   εσωτερικο περιθωριο του κουτιου, και κεντραρεται. */
.amenities-groups {
  column-count: 2;
  column-gap: var(--space-12);
  max-width: calc(var(--size-container) - 2 * var(--space-12));
  margin-inline: auto;
}
.amenities-groups > .amenity-group { break-inside: avoid; margin-bottom: var(--space-12); }
.amenity-group {
  grid-column-gap: var(--space-6);
  grid-row-gap: var(--space-6);
  border-top: var(--hairline) solid var(--rule);
  padding-top: var(--space-6);
  flex-flow: column;
  display: flex;
}
/* 18/9: ο h3 κληρονομει leading 100%, γραμμενο για τιτλους μιας αραδας. Στο
   κουτι του κινητου («Ψυχαγωγια και συνδεση») τυλιγεται και οι δυο αραδες
   κολλουσαν, οποτε παιρνει το leading-tight. */
/* 18/9: οι σελιδες τοποθεσιας εχουν ερωτηματικο H2 (SEO), που στα 448 px της
   κεντραρισμενης στηλης επιανε εξι αραδες. Opt-in, ωστε οι σελιδες δωματιων
   να μεινουν ακριβως οπως εγκριθηκαν. */
.amenities-head.is-wide { max-width: var(--size-explore-title); }
.amenity-group_title { color: var(--accent); font-size: var(--text-h3); line-height: var(--leading-tight); }
.amenity-list { grid-row-gap: var(--space-4); flex-flow: column; display: flex; }
.amenity-item { grid-column-gap: var(--space-4); align-items: flex-start; display: flex; }
.amenity-icon { color: var(--accent); flex: none; width: var(--space-6); height: var(--space-6); display: block; }
.amenity-label { color: var(--fg); font-size: var(--text-paragraph); }

/* «Για ποιους ταιριαζει»: κεντραρισμενη στηλη κειμενου, χωρις φωτογραφια. */
.fit-wrapper {
  grid-column-gap: var(--space-8);
  grid-row-gap: var(--space-8);
  width: 100%;
  max-width: var(--size-testi-title);
  text-align: center;
  flex-flow: column;
  margin: 0 auto;
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  display: flex;
}
.fit-wrapper .title-group { color: var(--accent); }

/* --- 4b. ΤΑ ΔΩΜΑΤΙΑ ΜΑΣ (οδηγος: section-soma_upcoming.explore) ---------
   Το section των καρτων της δευτερης σελιδας του οδηγου, αυτουσιο. Δυο
   στηλες, μπεζ καρτα, μια γραμμη περιγραφης πανω, τιτλος, φωτογραφια κατω,
   και λευκο δισκακι που εμφανιζεται στο hover (initCardHover του main.js).
   Δυο τυποι δωματιου = ακριβως μια σειρα. */
.section-soma_upcoming.explore { padding-bottom: var(--space-20); }
/* 17/9: χωρις γραμμες (αποφαση Ιωαννη)· ο οδηγος εχει μια πανω απο την ενοτητα και δυο γυρω απο τις καρτες. */
.upcoming-wrapper { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.upcomong-title_wrapper {
  grid-column-gap: var(--space-8);
  grid-row-gap: var(--space-8);
  width: 100%;
  max-width: var(--size-upcoming-title);
  color: var(--accent);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: var(--space-12);
  display: flex;
}
.upcoming-discription { width: 100%; max-width: var(--size-upcoming-descr); }
.upcoming-details {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}
/* Το `".Area" / 1fr 1fr` του οδηγου κραταει ΔΥΟ στηλες σε καθε πλατος, ακομα
   και εκει που ο κανονας των 991 γραφει 1fr: το string αναλυεται σε δυο
   κελια (κενο `.` + ονομα `Area`). Μετρημενο απο τον οδηγο σε 1440/1024/768/390.
   ΜΗΝ το «απλοποιησεις» σε grid-template-columns. */
.coming-card_col {
  grid-column-gap: var(--space-card-gap);
  grid-row-gap: var(--space-card-gap);
  grid-template: ".Area" / 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.card-soma {
  grid-column-gap: var(--space-8);
  grid-row-gap: var(--space-8);
  background-color: var(--surface-alt);
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  padding: var(--space-card-pad);
  text-decoration: none;
  /* 19/9: ιδιο υψος στις δυο καρτες της σειρας, οσες γραμμες κι αν πιασει η
     περιγραφη (στα 768 η μια πιανει τρεις και η αλλη δυο). */
  height: 100%;
  display: flex;
}
.card-information {
  grid-column-gap: var(--space-6);
  grid-row-gap: var(--space-6);
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  height: auto;
  display: flex;
}
/* 19/9: τιτλος και μια γραμμη μαζι, με την αποσταση του κινητου σε καθε πλατος.
   Δυο κλασεις, ωστε να νικαει το .card-information των breakpoints. */
.card-information._1 { grid-row-gap: var(--space-4); row-gap: var(--space-4); height: auto; }
.card-more_deqatils {
  grid-column-gap: var(--space-4);
  grid-row-gap: var(--space-4);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.card-title {
  font-family: var(--font-display);
  color: var(--accent);
  font-size: var(--text-card-title);
  line-height: var(--leading-card-title);
}
/* 19/9 αποφαση Ιωαννη: η καρτα εχει τη δομη του κινητου σε ΚΑΘΕ πλατος, ωστε
   τα δωματια να εχουν πιο κυριαρχο ρολο: φωτογραφια πανω σε 4:3, τιτλος, η μια
   γραμμη. Ως τοτε κειμενο πανω και φωτογραφια 300 px κατω (768 εως 1439), και
   κειμενο αριστερα, φωτογραφια δεξια απο τα 1440. Η φωτογραφια ειναι μεσα στο
   .block-image του reveal· αυτο γεμιζει το κουτι 4:3 και το <picture>
   (img-cover) κανει το cover. */
.card-img_wrapper {
  justify-content: center;
  align-items: center;
  order: -1;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  margin-top: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}
.card-img_wrapper > .block-image { position: absolute; inset: 0; }
.card-more_deqatils { order: -1; }
.card-img_wrapper._1 { height: auto; }
.link-icon { justify-content: center; align-items: center; width: var(--size-link-icon); display: flex; position: absolute; color: var(--fg-on-photo); }
.link-icon_arrow { fill: var(--accent); }
/* Πανω απο 992 το δισκακι ξεκινα κρυφο και το βγαζει το hover (initCardHover).
   Κατω απο 992 μενει μονιμα ορατο: ετσι ειναι ο οδηγος, και σε οθονη αφης
   δεν υπαρχει hover. */
@media screen and (min-width: 992px) {
  .link-icon { opacity: 0; }
}

/* --- 5. GALLERY --- */
.section-stay_gallery { justify-content: center; align-items: center; height: 100vh; display: flex; position: relative; }
/* Ιδια αιτια: ο συνδεσμος και τα βελακια ειναι λευκα πανω στη φωτογραφια, και
   η δικη μας ειναι φωτεινη (μετρηθηκε 1,50:1). z-index 3: πανω απο το slider
   (2), κατω απο τη σειρα των κουμπιων (5). */
/* 17/9: το scrim μπαινει ΜΕΣΑ στη θολη στρωση (.gallery-bg::after), ωστε να
   θολωνει μαζι της. Ως ::after της section ειχε σκληρη ακμη στο κατω ακρο
   και «εκοβε το blur» στο κινητο. Μενει κατω απο τον slider. */
.gallery-bg::after {
  content: "";
  position: absolute; inset: 0; z-index: var(--z-above);
  background-image: linear-gradient(to top, var(--scrim-hero) 0%, var(--scrim-hero) 16%, var(--scrim-hero-0) 34%);
  pointer-events: none;
}

.gallery-bg { z-index: 0; text-align: center; filter: blur(var(--blur-gallery)); background-color: transparent; width: 100%; height: 100%; position: absolute; inset: 0%; }
.mask-2 { z-index: var(--z-base); position: relative; display: block; width: 100%; height: 100%; overflow: hidden; white-space: nowrap; }
.gallery-slide { position: relative; display: inline-block; vertical-align: top; width: 100%; height: 100%; white-space: normal; text-align: left; }
.image-gallery_bg { object-fit: cover; width: 100%; height: 100%; }

.gallery-main_slider {
  z-index: var(--z-above);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
}
/* 17/9 (audit SEO-1 / A11Y-6): ο τιτλος της ενοτητας, σε δικη του λωριδα
   πανω απο τη gallery, κεντραρισμενος και teal οπως οι «Κριτικες». Ο οδηγος
   δεν εχει τιτλο εδω. */
.gallery-title_wrapper { color: var(--accent); text-align: center; padding-top: var(--space-16); padding-bottom: var(--space-12); }
.div-block-2 { width: 100%; max-width: var(--size-gallery-w); height: var(--size-gallery-h); }
.list { width: 100%; height: 100%; display: flex; }
.list-slide { flex: none; width: 100%; height: 100%; margin-left: var(--space-2); margin-right: var(--space-2); }
/* 16/9 αποφαση Ιωαννη: ολες οι φωτο του slider στο ΙΔΙΟ μεγεθος, cover στο box.
   Ο οδηγος εχει contain, αλλα οι δικες του φωτο εχουν ολες αναλογια 3:2, ιδια με
   το box· οι δικες μας εχουν διαφορετικες (πανοραμα 2,1:1) και με contain εβγαιναν
   σε διαφορετικα μεγεθη. */
.slide-list_image { object-fit: cover; width: 100%; height: 100%; min-height: 100%; max-height: 100%; }
.list:not(.slick-initialized) { align-items: flex-start; }
.list:not(.slick-initialized) .list-slide { width: calc(100% - 1rem); height: auto; }
.list.slick-initialized.slick-slider { display: block; overflow: unset !important; }
/* 16/9: για να κανει το cover πραγματικα cover, το υψος πρεπει να φτανει μεχρι
   την εικονα. Το slick τυλιγει τα slides σε .slick-list/.slick-track χωρις υψος,
   οποτε το 100% της εικονας επεφτε σε auto και το κουτι ακολουθουσε την αναλογια
   καθε φωτο (472, 665, 749 px). Με την αλυσιδα σε 100% ολα τα slides εχουν το
   υψος του .div-block-2 (το κουτι του οδηγου). */
.list.slick-initialized .slick-list,
.list.slick-initialized .slick-track,
.list.slick-initialized .list-slide { height: 100%; }
.slick-list { overflow: visible; }
.slick-list.draggable { overflow: visible !important; cursor: grab; }
/* 17/9 αποφαση Ιωαννη: ο slider συρεται (swipe και ποντικι). */
.slick-list.dragging { cursor: grabbing; }
.list-slide img { -webkit-user-drag: none; user-select: none; }
.slick-prev, .slick-next, .slick-dots { display: none !important; }

.gallery-slide_arrows {
  z-index: 5;
  grid-column-gap: var(--space-2);
  grid-row-gap: var(--space-2);
  justify-content: space-between;
  padding-bottom: var(--space-8);
  padding-left: var(--arrows-pad-x);
  padding-right: var(--arrows-pad-x);
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
}
.g-arrows { grid-column-gap: var(--space-2); grid-row-gap: var(--space-2); display: flex; }
/* 17/9 αποφαση Ιωαννη: δευτερο κουμπι (ζωντανη καμερα) διπλα στο «Μπατσι».
   Ο οδηγος εχει ενα. Αν δεν χωρανε στη σειρα, το δευτερο πεφτει απο κατω. */
.gallery-links { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-8); row-gap: var(--space-2); }
.slider-prev, .slider-next {
  background-color: var(--fg-on-photo);
  cursor: pointer;
  border: 0;
  border-radius: var(--radius-circle);
  justify-content: center;
  align-items: center;
  width: var(--size-arrow-btn);
  height: var(--size-arrow-btn);
  display: flex;
  color: var(--accent);
}
.stay-slide_arrow { justify-content: center; align-items: center; display: flex; }

/* --- 5β. ΣΕΛΙΔΕΣ ΤΟΠΟΘΕΣΙΑΣ (18/9, σταδιο 7c) -------------------------
   Οδηγος: η ΔΕΥΤΕΡΗ σελιδα του δειγματος, explore-kea.html. Οι δυο ενοτητες
   της που εμειναν αχρησιμοποιητες μετα την Αρχικη, αντιγραμμενες με tokens:
     .section-explore_kea   αφηγηση τοπου + τρεις φωτογραφιες σε ασυμμετρο πλεγμα
     .section-explore_time  τα σημεια, ενα ανα καρε, σε σκουρα πετρολ ζωνη
   Μαζι: ο χαρτης της τοποθεσιας και οι ερωτησεις, στο ιδιο ιδιωμα. */

/* 5β.1 Αφηγηση του τοπου ------------------------------------------------- */
/* ΤΡΕΙΣ ΦΩΤΟΓΡΑΦΙΕΣ, ΤΡΕΙΣ ΣΤΗΛΕΣ. Η ΔΟΜΗ ειναι του οδηγου, ΟΙ ΑΝΑΛΟΓΙΕΣ ΟΧΙ.
   Ο οδηγος δουλευει σε περιεχομενο 1820 px και εκει οι τρεις στηλες βγαινουν
   535 + 565 + 550. Εμεις κοψαμε το περιεχομενο στα 1340 (18/9), οποτε με τους
   αριθμους του η μεσαια φωτογραφια επεφτε στα **85 px**, μια κατακορυφη φετα
   (μετρημενο και στον ιδιο τον οδηγο στα 1440). Ξαναμοιραστηκαν: δυο πλαγιες
   στηλες 26rem και η μεσαια παιρνει ο,τι μενει, δηλαδη 416 + 60 + 388 + 60 + 416. */
.explore-kea_wrapper { padding-top: var(--space-16); padding-bottom: var(--space-20); }
.about-explore_col { grid-column-gap: var(--space-15); grid-row-gap: var(--space-15); display: flex; }
.explore-right_col { flex: 1 1 auto; min-width: 0; }
.explore-title_wrapper { width: 100%; max-width: var(--size-explore-title); color: var(--accent); padding-bottom: var(--space-12); }
.right-col_grid { grid-column-gap: var(--space-15); grid-row-gap: var(--space-15); align-items: stretch; display: flex; }
.col-right { flex: 0 0 var(--size-explore-col); max-width: var(--size-explore-col); }
/* Η εσοχη του κειμενου ειναι το «ασυμμετρο» της ενοτητας: το κειμενο δεν
   ξεκινα στην ακρη της στηλης αλλα πιο μεσα, και η φωτογραφια απο κατω ναι. */
.col-discription { width: 100%; max-width: calc(var(--size-explore-col) - var(--size-explore-indent-sm)); margin-left: var(--size-explore-indent-sm); padding-bottom: var(--space-8); }
.col-discription > p + p { margin-top: var(--space-6); }
.col-right_img { width: 100%; }
/* Η μεσαια φωτογραφια παιρνει ο,τι μενει και φτανει ως το υψος της σειρας:
   ορθια, κοντρα στις δυο οριζοντιες δεξια και αριστερα. */
.col-right_big-img { flex: 1 1 auto; min-width: 0; align-self: stretch; overflow: hidden; }
.col-right_big-img > .scale-img { width: 100%; height: 100%; }
.col-right_big-img picture, .col-right_big-img img { width: 100%; height: 100%; }
/* Η δεξια στηλη: φωτογραφια πανω, δευτερη παραγραφος κατω, σπρωγμενες στα δυο
   ακρα, οπως στον οδηγο (εκει το κατω ειναι το δευτερο μισο του τιτλου). */
.explore-lrft_col { flex: 0 0 var(--size-explore-col); flex-flow: column; justify-content: space-between; grid-row-gap: var(--space-10); max-width: var(--size-explore-col); display: flex; }
.explore-left_img { width: 100%; }
.explore-left_details > p + p { margin-top: var(--space-6); }
/* 19/9: το κουμπι στο τελος του κειμενου (Αρχικη). Αριστερα, οπως στην
   περιγραφη της παλιας ενοτητας, με την ιδια αποσταση απο το κειμενο. */
.explore-left_details > .button-link,
.explore-left_details > .button-outline,
.explore-left_details > .button-quiet { justify-content: flex-start; width: fit-content; margin-top: var(--space-descr-gap); }

/* 5β.2 Ο χαρτης της τοποθεσιας ------------------------------------------- */
.section-place_map, .section-callout { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.callout-img { width: 100%; }
/* 18/9: εναλλαγη πλευρας σε διαδοχικα μπλοκ (Διαμονη: studios, διαμερισμα),
   ωστε να μη διαβαζονται ως το ιδιο πραγμα δυο φορες. */
.section-callout.is-flipped .place-map_text { order: 2; }
.callout-note { color: var(--fg); font-size: var(--text-sm); line-height: var(--leading-regular); }
/* minmax(0,1fr): με σκετο 1fr η στηλη της τιμης δεν συρρικνωνεται και στα 390
   εβγαζε ΤΗ ΣΕΛΙΔΑ 99 px εξω (μετρημενο 18/9). Στο κινητο η ετικετα παει
   πανω απο την τιμη. */
.callout-lines { grid-column-gap: var(--space-4); grid-row-gap: var(--space-2); grid-template-columns: auto minmax(0, 1fr); margin: 0; display: grid; }
.callout-lines dt { color: var(--accent); font-family: var(--font-sans); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-button); }
.callout-lines dd { color: var(--fg); font-size: var(--text-regular); margin: 0; }
.callout-lines a { color: var(--accent); text-underline-offset: var(--size-underline-offset); }
.place-map_wrapper {
  grid-column-gap: var(--space-16);
  grid-row-gap: var(--space-12);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  display: grid;
}
.place-map_text { grid-row-gap: var(--space-6); flex-flow: column; display: flex; color: var(--accent); }
.place-map_text > p { margin-top: var(--space-6); }
.place-map_card { background-color: var(--surface-alt); }
.place-map_info { grid-row-gap: var(--space-4); flex-flow: column; align-items: flex-start; padding: var(--space-12); display: flex; }

/* --- Ο ΧΑΡΤΗΣ (click to load) ------------------------------------------
   18/9: το `.embed` ΔΕΝ ειχε καθολου στυλ (ιδιο κενο με το `.ph`): οι κλασεις
   ηταν του σταδιου 7a. Εδω παιρνει τη γλωσσα του οδηγου.
   Το χρωμα: το embed του Google ΔΕΝ δεχεται styling (μονο το JavaScript API
   με κλειδι και χρεωση). Αρα ο χαρτης γινεται ασπρομαυρος με filter και απο
   πανω περναει το πετρολ μας με mix-blend-mode: color. Αποτελεσμα: στεργια
   στο χρωμα της καρτας, θαλασσα στο πετρολ μας, πινεζα σκουρο πετρολ. Το
   overlay ειναι pointer-events: none, ο χαρτης μενει πληρως λειτουργικος. */
.embed { position: relative; isolation: isolate; width: 100%; height: var(--size-map-h); overflow: hidden; }
.embed-poster {
  grid-row-gap: var(--space-5);
  background-color: var(--accent-soft);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: var(--space-8);
  text-align: center;
  display: flex;
}
.embed-poster > p { color: var(--accent); font-size: var(--text-sm); line-height: var(--leading-tight); max-width: var(--size-explore-descr); }
/* Το κουμπι της φορτωσης: πιλουλα σαν το .btn-holder, σε πετρολ πανω σε
   ανοιχτο φοντο (το .btn-holder ειναι γραμμενο για λευκο πανω σε φωτογραφια). */
.embed-poster > .button {
  font-family: var(--font-sans);
  color: var(--accent);
  letter-spacing: var(--tracking-button);
  line-height: var(--leading-flat);
  background: none;
  border: var(--hairline) solid var(--accent);
  border-radius: var(--radius-pill);
  min-height: var(--tap-target);
  padding: var(--space-4) var(--space-10);
  cursor: pointer;
}
.embed-poster > .button:hover { background-color: var(--accent); color: var(--fg-on-photo); }
.embed-frame { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) sepia(0.2) brightness(1.04) contrast(0.95); }
/* 24/9 (αποφαση Ιωαννη, «οι χαρτες να φορτωνουν by default»): στατικος χαρτης
   OpenStreetMap απο τον δικο μας server (_build/staticmap.py), στη θεση του
   iframe της Google. Ιδιο υψος και ιδιο φιλτρο με το iframe, ωστε να δενει με
   την παλετα. Το κτηριο ειναι στο κεντρο της εικονας, αρα και του πλαισιου
   (object-position 50% 50%): εκει καθεται η καρφιτσα, σε SVG, χωρις φιλτρο. */
.static-map { margin: 0; }
.static-map_frame { position: relative; width: 100%; height: var(--size-map-h); overflow: hidden; background-color: var(--surface-alt); }
.static-map_frame picture { position: absolute; inset: 0; }
.static-map_frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: grayscale(1) sepia(0.2) brightness(1.04) contrast(0.95); }
.static-map_pin { position: absolute; left: 50%; top: 50%; z-index: var(--z-base); width: var(--space-8); height: auto; transform: translate(-50%, -100%); color: var(--accent); pointer-events: none; }
.static-map_credit { position: absolute; right: 0; bottom: 0; z-index: var(--z-base); margin: 0; padding: var(--space-1) var(--space-2); background-color: var(--bg); color: var(--fg); font-size: var(--text-sm); line-height: var(--leading-tight); }
.static-map_credit a { color: inherit; text-decoration: underline; text-underline-offset: var(--size-underline-offset); }
.static-map_pin-body { fill: currentColor; stroke: var(--fg-on-photo); stroke-width: 2; }
.static-map_pin-dot { fill: var(--fg-on-photo); }
.embed:has(.embed-frame)::after {
  content: "";
  background-color: var(--accent);
  mix-blend-mode: color;
  opacity: 0.55;
  pointer-events: none;
  position: absolute;
  inset: 0;
}
.place-map_label { color: var(--accent); font-family: var(--font-sans); text-transform: uppercase; font-size: var(--text-sm); letter-spacing: var(--tracking-button); }
.place-map_address { color: var(--fg); font-size: var(--text-h3-style); line-height: var(--leading-tight); font-family: var(--font-display); }

/* 5β.3 Τα σημεια του τοπου ----------------------------------------------- */
/* Ο οδηγος εχει και μια υφη πανω στο gradient, που ζει σε δικο του CDN:
   μενει εξω (καμια εξωτερικη εικονα), το gradient ειναι το ιδιο. */
.section-explore_time { background-image: linear-gradient(115.55deg, var(--accent), var(--accent-gradient-end)); }
.time-wrapper { padding-top: 0; padding-bottom: var(--space-20); }
.trusted-title_wrapper {
  grid-column-gap: var(--space-8);
  grid-row-gap: var(--space-8);
  width: 100%;
  max-width: var(--size-time-title-wrap);
  color: var(--fg-on-photo);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding-top: var(--space-12);
  display: flex;
}
.time-title { width: 100%; max-width: var(--size-testi-title); }
.upcoming-discription > .text-color-alternate { color: var(--fg-on-dark); }
.guide-divider { background-color: var(--rule); width: 100%; height: var(--hairline); margin-top: var(--space-20); margin-bottom: var(--space-20); }
.guide-divider.white { background-color: var(--rule-white); margin-top: var(--space-12); margin-bottom: var(--space-12); }

.points-viewport { position: relative; }
.points-track {
  display: flex;
  align-items: stretch;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.points-track::-webkit-scrollbar { display: none; }
.point-card { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.time-slide_wrapper {
  grid-column-gap: var(--space-5);
  grid-row-gap: var(--space-5);
  grid-template-columns: 1fr 1fr;
  display: grid;
}
.point-photo { border: var(--hairline) solid var(--rule-on-dark); height: var(--size-point-h); overflow: hidden; }
.point-photo > picture, .point-photo > .ph { width: 100%; height: 100%; }
/* Η κενή θέση πάνω στο πετρόλ: το teal του .ph είναι αόρατο εκεί. */
.point-photo .ph { color: var(--fg-on-photo); border-color: var(--rule-on-dark); }
.point-photo .ph > span + span { color: var(--fg-on-dark); }
.point-text {
  background-color: var(--surface-alt);
  border: var(--hairline) solid var(--rule-on-dark);
  grid-row-gap: var(--space-6);
  flex-flow: column;
  justify-content: center;
  height: var(--size-point-h);
  padding: var(--space-10) var(--space-8);
  text-align: center;
  display: flex;
  overflow: auto;
}
.slide-heading { font-family: var(--font-display); color: var(--accent); letter-spacing: var(--tracking-h2); text-transform: uppercase; font-size: var(--text-h3); line-height: var(--leading-tight); word-spacing: var(--word-spacing-h1); }
.slide-discription { width: 100%; max-width: var(--size-testi-title); margin-left: auto; margin-right: auto; }
.points-controls {
  grid-column-gap: var(--space-5);
  justify-content: center;
  align-items: center;
  margin-top: var(--space-8);
  display: flex;
}
.points-dots { grid-column-gap: var(--space-3); align-items: center; display: flex; }
.points-dot {
  background-color: var(--rule-white);
  border: 0;
  border-radius: var(--radius-circle);
  width: var(--size-review-dot);
  height: var(--size-review-dot);
  padding: 0;
  cursor: pointer;
}
.points-dot[aria-current="true"] { background-color: var(--fg-on-photo); }
.points-controls .reviews-arrow { color: var(--fg-on-photo); border-color: var(--rule-white); }

/* 5β.4 Ερωτησεις ---------------------------------------------------------- */
.section-faq { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.faq-wrapper { grid-row-gap: var(--space-12); flex-flow: column; display: flex; }
.faq-head {
  grid-row-gap: var(--space-6);
  width: 100%;
  max-width: var(--size-reach-title);
  color: var(--accent);
  text-align: center;
  flex-flow: column;
  margin: 0 auto;
  display: flex;
}
.faq-list { width: 100%; max-width: var(--size-explore-title); margin: 0 auto; }
.faq-item { border-top: var(--hairline) solid var(--rule); padding: var(--space-6) 0; }
.faq-item:last-child { border-bottom: var(--hairline) solid var(--rule); }
.faq-question {
  grid-column-gap: var(--space-6);
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
  display: flex;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question > h3 { color: var(--accent); font-size: var(--text-h3-style); letter-spacing: var(--tracking-h3-style); line-height: var(--leading-tight); text-transform: none; }
.faq-icon { color: var(--accent); flex: none; width: var(--space-6); height: var(--space-6); transition: transform var(--dur-base) var(--ease-out); }
.faq-item[open] .faq-icon { transform: rotate(180deg); }
.faq-answer { padding-top: var(--space-4); }
.faq-answer > p + p { margin-top: var(--space-4); }

/* Κουμπι κατω απο κεντραρισμενο κειμενο (ζωντανη καμερα στη σελιδα τοπου). */
.fit-button { display: flex; justify-content: center; }

/* --- 5γ. ΦΟΡΜΑ ΚΑΙ ΤΙΜΕΣ (18/9, σταδιο 7c) ----------------------------
   Η Διαθεσιμοτητα ειναι ΑΛΛΟΣ τυπος σελιδας (εντολη Ιωαννη): ιδιο λεξιλογιο,
   αλλη διαταξη. Η φορμα καθεται σε κρεμ καρτα διπλα στο κειμενο που λεει τι
   γινεται μετα το πατημα, αντι να ειναι μια ακομη ενοτητα σε αφηγηση.
   Τα πεδια ακολουθουν τη γραμματικη: Manrope micro uppercase ετικετες, teal,
   hairline κατω απο καθε πεδιο, κανενα πλαισιο, κανενα radius. */
.section-form { padding-top: var(--space-10); padding-bottom: var(--space-16); }
/* 18/9, αποφαση Ιωαννη: η ΦΟΡΜΑ ΠΡΩΤΗ. Ο τιτλος πανω απο ολα, η καρτα της
   φορμας αριστερα, και ο,τι εξηγει δεξια. Στο κινητο η σειρα του DOM ειναι
   ηδη η σωστη (τιτλος, φορμα, εξηγησεις), αρα δεν χρειαζεται καμια
   αναδιαταξη. Μετρημενο πριν: το πρωτο πεδιο ξεκινουσε στα 1089 px στα 390. */
/* 21/9: η στηλη με τα κειμενα δεξια εφυγε (αποφαση Ιωαννη). Η φορμα μενει
   μονη της, με το πλατος αναγνωσης των αλλων ενοτητων, οχι σε ολο το
   περιεχομενο των 1340. */
.form-wrapper {
  grid-row-gap: var(--space-10);
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: var(--size-explore-title);
  margin-left: auto;
  margin-right: auto;
  align-items: start;
  display: grid;
}
.form-aside { grid-row-gap: var(--space-8); flex-flow: column; color: var(--accent); display: flex; }
/* Ο τιτλος της στηλης δεν χρειαζεται κλιμακα αφησης: ειναι πλαι στη φορμα. */
.form-aside h2 { font-size: var(--text-h3); letter-spacing: var(--tracking-h3); }
/* Τα τεσσερα που ηταν 125 λεξεις. */
.form-points { grid-row-gap: var(--space-4); flex-flow: column; margin: 0; padding: 0; list-style: none; display: flex; }
.form-points > li { grid-column-gap: var(--space-4); align-items: flex-start; color: var(--fg); font-size: var(--text-regular); line-height: var(--leading-regular); display: flex; }
.form-points .amenity-icon { margin-top: var(--space-1); }
.form-answer { border-top: var(--hairline) solid var(--rule); padding-top: var(--space-6); }
.form-answer > h3 { font-size: var(--text-h3-style); letter-spacing: var(--tracking-h3-style); line-height: var(--leading-heading); margin-bottom: var(--space-4); }
.form-card { background-color: var(--surface-alt); padding: var(--space-12); }
.form-label { color: var(--accent); font-family: var(--font-sans); font-size: var(--text-sm); letter-spacing: var(--tracking-button); text-transform: uppercase; margin-bottom: var(--space-8); }
/* Η επιβεβαιωση στη θεση της φορμας (18/9). Ιδιο κουτι, ωστε το ματι να μη
   χασει το σημειο· ο τιτλος της ειναι h3 γιατι ζει μεσα στην ενοτητα. */
.form-done { background-color: var(--surface-alt); border: var(--hairline) solid var(--accent); padding: var(--space-12); }
.form-done > h3 { color: var(--accent); font-size: var(--text-h3); letter-spacing: var(--tracking-h3); line-height: var(--leading-heading); text-transform: uppercase; margin-bottom: var(--space-6); }
.form-done p + p { margin-top: var(--space-4); }
.form-done a { color: var(--accent); text-underline-offset: var(--size-underline-offset); }
.form-done:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-width); }
.form-error { color: var(--error); font-family: var(--font-sans); font-size: var(--text-regular); line-height: var(--leading-regular); }

.form { grid-row-gap: var(--space-10); flex-flow: column; display: flex; }
.form-set { grid-row-gap: var(--space-6); flex-flow: column; border: 0; margin: 0; padding: 0; display: flex; }
.form-legend {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--text-h3-style);
  letter-spacing: var(--tracking-h3-style);
  line-height: var(--leading-heading);
  text-transform: uppercase;
  padding: 0;
  /* 21/9 (Ιωαννης): αερας αναμεσα στο «Η διαμονη σας» και την πρωτη ετικετα
     πεδιου· ηταν 8 px και διαβαζοταν σαν ετικετα του πεδιου. */
  margin-bottom: var(--space-6);
}
/* 18/9, ΣΦΑΛΜΑ ΠΟΥ ΕΠΙΑΣΕ Η ΠΡΩΤΗ ΑΠΟΔΟΣΗ: το honeypot πεδιο ειναι
   <p class="field" hidden>. Το display:flex της .field νικαει το display:none
   του [hidden] του browser, οποτε το πεδιο «μην συμπληρωσετε» ΦΑΙΝΟΤΑΝ. Ο
   χρηστης θα το συμπληρωνε και το send.php θα εριχνε το αιτημα του ως spam. */
[hidden] { display: none !important; }
.field { grid-row-gap: var(--space-2); flex-flow: column; margin: 0; display: flex; }
.field > label {
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-button);
  line-height: var(--leading-tight);
  text-transform: uppercase;
}
.field input, .field select, .field textarea {
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-regular);
  line-height: var(--leading-regular);
  background: none;
  border: 0;
  border-bottom: var(--hairline) solid var(--rule);
  border-radius: var(--radius-none);
  min-height: var(--tap-target);
  padding: var(--space-2) 0;
  width: 100%;
}
.field textarea { min-height: var(--size-textarea); resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-width); }
/* minmax(0,1fr), οχι 1fr: το <input type="date"> εχει δικο του ελαχιστο
   πλατος και με σκετο 1fr η στηλη δεν συρρικνωνεται. Στα 390 εβγαζε τη
   ΣΕΛΙΔΑ 99 px εξω (μετρημενο 18/9: scrollWidth 489 σε viewport 390). */
.field-row { grid-column-gap: var(--space-6); grid-row-gap: var(--space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; }
.field input, .field select, .field textarea { min-width: 0; max-width: 100%; }
.field-consent > label { grid-column-gap: var(--space-3); align-items: flex-start; text-transform: none; font-size: var(--text-sm); line-height: var(--leading-regular); color: var(--fg); display: flex; }
.field-consent input { width: var(--space-5); height: var(--space-5); min-height: 0; flex: none; margin-top: var(--space-1); accent-color: var(--accent); }
.field-consent a { color: var(--accent); text-underline-offset: var(--size-underline-offset); }
.form-note { color: var(--fg-muted); font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-tight); }
.form-submit { display: flex; }
.button-primary.is-submit { background: none; border: 0; padding: 0; cursor: pointer; }
.button-primary.is-submit .btn-holder { display: block; }
.button-primary.is-submit .btn-holder { border-color: var(--accent); }
.button-primary.is-submit .btn-text { color: var(--accent); }
.button-primary.is-submit:hover .btn-holder { background-color: var(--accent); }
.button-primary.is-submit:hover .btn-text { color: var(--fg-on-photo); }

/* Τιμες: ο πινακας σε κρεμ ζωνη, hairlines αντι για πλαισια. */
.section-prices { background-color: var(--surface-alt); padding-top: var(--space-16); padding-bottom: var(--space-16); }
.prices-wrapper { grid-row-gap: var(--space-12); flex-flow: column; display: flex; }
.prices-head {
  grid-row-gap: var(--space-6);
  width: 100%;
  max-width: var(--size-explore-title);
  color: var(--accent);
  text-align: center;
  flex-flow: column;
  margin: 0 auto;
  display: flex;
}
.price-block { grid-row-gap: var(--space-4); flex-flow: column; width: 100%; max-width: var(--size-explore-title); margin: 0 auto; display: flex; }
.table-scroll { overflow-x: auto; }
.price-table { border-collapse: collapse; width: 100%; }
.price-table caption { color: var(--accent); font-family: var(--font-sans); font-size: var(--text-sm); letter-spacing: var(--tracking-button); text-transform: uppercase; text-align: left; padding-bottom: var(--space-4); }
.price-table th, .price-table td { border-bottom: var(--hairline) solid var(--rule); padding: var(--space-4) var(--space-3); text-align: left; }
.price-table thead th { color: var(--accent); font-family: var(--font-sans); font-size: var(--text-sm); letter-spacing: var(--tracking-button); text-transform: uppercase; font-weight: var(--weight-regular); }
.price-table tbody th { color: var(--fg); font-family: var(--font-sans); font-size: var(--text-regular); font-weight: var(--weight-regular); }
.price-table tbody td { color: var(--accent); font-family: var(--font-display); font-size: var(--text-h3-style); font-variant-numeric: tabular-nums; }
/* 21/9: ο δευτερος πινακας, με τις ειδικες περιοδους. Ιδια γραμματικη
   με τον πρωτο· η ετικετα του κραταει τη θεση της λεζαντας. */
/* 21/9: πινακας μεσα σε κειμενο σελιδας (Πολιτικη Cookies). Ιδια γραμματικη
   με τον πινακα τιμων: hairlines, micro sans uppercase στην κεφαλιδα. */
.prose-table { border-collapse: collapse; width: 100%; }
.prose-table th, .prose-table td { border-bottom: var(--hairline) solid var(--rule); padding: var(--space-3) var(--space-3); text-align: left; vertical-align: top; font-size: var(--text-sm); line-height: var(--leading-regular); }
.prose-table thead th { color: var(--accent); font-family: var(--font-sans); letter-spacing: var(--tracking-button); text-transform: uppercase; font-weight: var(--weight-regular); }
.prose-table tbody th { color: var(--fg); font-weight: var(--weight-regular); }
.legal-section .table-scroll { margin-top: var(--space-2); }
.price-specials { margin-top: var(--space-10); }
.price-specials > .label { color: var(--accent); font-family: var(--font-sans); font-size: var(--text-sm); letter-spacing: var(--tracking-button); text-transform: uppercase; padding-bottom: var(--space-4); }
.badge { color: var(--accent); font-family: var(--font-sans); font-size: var(--text-sm); letter-spacing: var(--tracking-button); text-transform: uppercase; }

/* --- 5δ. ΛΩΡΙΔΑ «ΤΩΡΑ» (οδηγος: section-live_details) -----------------
   Η ενοτητα του οδηγου που ειχε αφαιρεθει απο την Αρχικη στις 17/9. Εδω
   εχει νοημα: ειναι η σελιδα της ζωντανης καμερας. */
.section-live_details { background-color: var(--accent); }
.live-data_wrapper { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.daily-details_box {
  grid-column-gap: var(--space-10);
  grid-row-gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}
.detail-box { grid-column-gap: var(--space-3); align-items: baseline; display: flex; }
.detail-box > p { color: var(--fg-on-dark); font-family: var(--font-sans); font-size: var(--text-sm); letter-spacing: var(--tracking-button); text-transform: uppercase; }
.detail-box > p + p { color: var(--fg-on-photo); }
.live-link { grid-column-gap: var(--space-3); align-items: center; color: var(--fg-on-photo); font-family: var(--font-sans); font-size: var(--text-sm); letter-spacing: var(--tracking-button); text-transform: uppercase; text-decoration: none; min-height: var(--tap-target); display: inline-flex; }
.live-link:hover { text-decoration: underline; text-underline-offset: var(--size-underline-offset); }
.live-arrow { width: var(--space-4); height: var(--space-4); display: block; }

/* --- 5ε. ΝΟΜΙΚΕΣ ΣΕΛΙΔΕΣ (18/9) --------------------------------------
   Κειμενο αναφορας. Μια στηλη με ανετο μηκος γραμμης, και διπλα της ο
   πινακας περιεχομενων που μενει στη θεση του καθως κυλας. */
.section-legal { padding-top: var(--space-12); padding-bottom: var(--space-20); }
.legal-wrapper {
  grid-column-gap: var(--space-16);
  grid-row-gap: var(--space-10);
  grid-template-columns: minmax(0, var(--size-legal-toc)) minmax(0, 1fr);
  align-items: start;
  display: grid;
}
/* Ο πινακας περιεχομενων μενει στη θεση του καθως κυλας το κειμενο. Κατω απο
   992 γινεται απλη λιστα στην κορυφη (μπλοκ max-width: 991px). */
.legal-toc { grid-row-gap: var(--space-4); flex-flow: column; display: flex; position: sticky; top: var(--space-20); }
.legal-toc_label { color: var(--accent); font-family: var(--font-sans); font-size: var(--text-sm); letter-spacing: var(--tracking-button); text-transform: uppercase; }
.legal-toc_list { grid-row-gap: var(--space-3); flex-flow: column; margin: 0; padding: 0; list-style: none; counter-reset: toc; display: flex; }
.legal-toc_list > li { counter-increment: toc; }
.legal-toc_list a { color: var(--fg); font-size: var(--text-sm); line-height: var(--leading-tight); text-decoration: none; }
.legal-toc_list a::before { content: counter(toc, decimal-leading-zero) ". "; color: var(--accent); }
.legal-toc_list a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: var(--size-underline-offset); }
.legal-body { grid-row-gap: var(--space-12); flex-flow: column; width: 100%; max-width: var(--size-explore-title); display: flex; }
.legal-updated { color: var(--fg-muted); font-family: var(--font-sans); font-size: var(--text-sm); }
.legal-section { grid-row-gap: var(--space-4); flex-flow: column; scroll-margin-top: var(--space-20); display: flex; }
.legal-section > h2 { color: var(--accent); font-size: var(--text-h3); letter-spacing: var(--tracking-h3); }
.legal-section p + p, .legal-section ul { margin-top: var(--space-2); }
.legal-section ul { grid-row-gap: var(--space-2); flex-flow: column; padding-left: var(--space-5); display: flex; }
.legal-section a { color: var(--accent); text-underline-offset: var(--size-underline-offset); }

/* --- 6. ECHOES OF THE STAY --- */
.section-testimonials { overflow: hidden; }
.testimonial-wrapper { padding-top: var(--space-16); padding-bottom: var(--space-16); overflow: hidden; }
/* 17/9: χωρις τις δυο γραμμες του οδηγου· το κενο τιτλου-widget το δινει αυτο. */
.testimonial-wrapper > .reviews { margin-top: var(--space-12); }
.testimonial-title_wrapper {
  grid-column-gap: var(--space-8);
  grid-row-gap: var(--space-8);
  width: 100%;
  max-width: var(--size-testi-title);
  color: var(--accent);
  text-align: center;
  flex-flow: column;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

/* --- 6β. ΤΟ WIDGET ΚΡΙΤΙΚΩΝ (16/9) ---
   Ο οδηγος εχει εδω το Elfsight All-in-One Reviews, που μενει εξω. Οι τιμες
   ειναι μετρησεις του ζωντανου oneanasa.com/stay στα 1440: κρεμ ζωνη με
   γραμμη tabs 44 px και υπογραμμιση 2 px, καρτες 20 px αναμεσα, padding
   24 px, avatar 40 px, κειμενο 18/26, αστερια 22 px. Αριθμος καρτων ανα
   οθονη: 5 στα >=1440, 3 στα 992-1439, 2 στα <=991, 1 στα <=479, με τα
   breakpoints που ηδη εχει το αρχειο. Το track ειναι scroll-snap: σερνεται
   με αφη και trackpad χωρις JavaScript. */
.reviews { color: var(--accent); font-family: var(--font-sans); letter-spacing: var(--tracking-base); }
.reviews p { color: inherit; line-height: inherit; }

.reviews-head { background-color: var(--surface-alt); }
.reviews-summary { display: flex; flex-flow: column; gap: var(--space-2); padding: var(--space-6); }
.reviews-summary_title { margin: 0; font-size: var(--text-regular); line-height: var(--leading-regular); letter-spacing: var(--tracking-regular); }
.reviews-summary_list { display: flex; flex-wrap: wrap; column-gap: var(--space-10); row-gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.reviews-rating { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-2); row-gap: var(--space-1); margin: 0; }
.reviews-rating_name { font-size: var(--text-paragraph); line-height: var(--leading-caption); }
.reviews-rating_number { font-size: var(--text-regular); line-height: var(--leading-flat); font-weight: var(--weight-medium); }
.reviews-summary > .reviews-rating .reviews-rating_number { font-size: var(--text-h3-style); letter-spacing: var(--tracking-h3-style); }
.reviews-rating_scale { font-size: var(--text-paragraph); font-weight: var(--weight-regular); }
.reviews-rating_count { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--fg-caption); }
.reviews-rating .review-stars { height: var(--size-review-star); }

.review-stars { display: block; width: auto; aspect-ratio: 5 / 1; }
.review-stars_base { color: var(--rule); }
.review-stars_fill { color: var(--rating-star); }

.reviews-viewport { position: relative; margin-top: var(--space-5); }
.reviews-track {
  --reviews-per-view: 3;
  display: flex;
  align-items: stretch;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.reviews-track::-webkit-scrollbar { display: none; }
.review-card {
  flex: 0 0 calc((100% - (var(--reviews-per-view) - 1) * var(--space-5)) / var(--reviews-per-view));
  min-width: 0;
  scroll-snap-align: start;
  background-color: var(--surface-alt);
  padding: var(--space-6);
}
.review-card[hidden] { display: none; }
.review-card_inner { display: flex; flex-flow: column; height: 100%; margin: 0; }
.review-author { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.review-avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-review-avatar);
  height: var(--size-review-avatar);
  border-radius: var(--radius-circle);
  background-color: var(--accent-soft);
  font-family: var(--font-display);
  font-size: var(--text-regular);
  line-height: var(--leading-flat);
}
.review-author_info { display: flex; flex-flow: column; gap: var(--space-1); min-width: 0; }
.review-author_name { font-size: var(--text-paragraph); line-height: var(--leading-caption); font-weight: var(--weight-medium); }
.review-author_meta { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--fg-caption); }
.review-card_rating { display: flex; margin-bottom: var(--space-3); }
.review-card_stars .review-stars { height: var(--size-review-star-sm); }
.review-score {
  padding: var(--space-detail-gap) var(--space-2);
  border-radius: var(--radius-score);
  background-color: var(--accent);
  color: var(--on-accent);
  font-size: var(--text-sm);
  line-height: var(--leading-caption);
  font-weight: var(--weight-medium);
}
.review-card_title { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: var(--text-review); line-height: var(--leading-review); }
.review-card_text { margin: 0; font-size: var(--text-review); line-height: var(--leading-review); }

/* Βελακια κατω απο τις καρτες, στο σχημα του .button-circle του οδηγου
   (hairline κυκλος, βελος teal). */
.reviews-controls { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); }
.reviews-controls[hidden] { display: none; }
.reviews-arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-arrow-btn);
  height: var(--size-arrow-btn);
  padding: 0;
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius-circle);
  background-color: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.reviews-arrow:hover { background-color: var(--surface-alt); }
.reviews-arrow[disabled] { opacity: var(--opacity-disabled); cursor: default; background-color: transparent; }

.reviews-dots { display: flex; flex-wrap: wrap; justify-content: center; }
.reviews-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.reviews-dot::before {
  content: "";
  width: var(--size-review-dot);
  height: var(--size-review-dot);
  border-radius: var(--radius-circle);
  background-color: var(--rule);
  transition: background-color var(--dur-base) var(--ease-out);
}
.reviews-dot[aria-current="true"]::before { background-color: var(--accent); }

/* --- 7. CTA --- */
.cta-wrap { justify-content: center; align-items: center; padding-top: var(--cta-pad-top); padding-bottom: var(--cta-pad-bottom); display: flex; position: relative; }
.cta-bg_image { object-fit: cover; width: 100%; height: 100%; position: absolute; inset: 0%; }
/* ΔΙΚΗ ΜΑΣ ΠΡΟΣΘΗΚΗ #3, ιδια αιτια με το scrim του hero: ο οδηγος βαζει
   λευκο κειμενο κατευθειαν πανω στη φωτογραφια του cta, γιατι η δικη του
   ειναι σκουρη. Η δικη μας δειχνει ουρανο και θαλασσα, και το λευκο h2
   μετρηθηκε 1,05:1. Ψευδοστοιχειο, οχι νεο div: κανενας selector του
   main.js δεν αλλαζει. */
.cta-wrap::after {
  content: "";
  position: absolute; inset: 0;
  background-color: var(--scrim-cta);
  pointer-events: none;
}
.cta-content {
  z-index: var(--z-base);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: var(--size-cta-content);
  display: flex;
  position: relative;
}
.cta-title_wrap { color: var(--fg-on-photo); text-align: center; }
.cta-discription_wrapper { text-align: center; width: 100%; max-width: var(--size-cta-descr); padding-top: var(--space-8); padding-bottom: var(--space-15); }
/* 21/9: χωρις την προταση, ο τιτλος και το κουμπι εμεναν κολλητα (0 px).
   Η αποσταση ειναι αυτη που εδινε πριν η προταση απο κατω: 60 px, 32 στο
   κινητο. Το .cta-discription_wrapper μενει, αν ξαναμπει καπου προταση. */
.cta-button_wrapper { padding-top: var(--space-15); }

/* --- 7β. ΠΑΡΑΘΥΡΟ ΣΥΓΚΑΤΑΘΕΣΗΣ (21/9) --------------------------------
   Λωριδα κατω κατω, οχι σκοτεινιασμα της σελιδας: δεν εμποδιζει την
   αναγνωση, ουτε ειναι cookie wall. «Αποδοχη» και «Απορριψη» ΙΔΙΟ κουμπι,
   ιδιο μεγεθος, διπλα διπλα: ο νομος ζηταει ιδια βαρυτητα. */
.consent { position: fixed; z-index: var(--z-overlay); inset: auto 0 0 0; background-color: var(--surface-alt); border-top: var(--hairline) solid var(--rule); }
.consent-box {
  grid-column-gap: var(--space-8);
  grid-row-gap: var(--space-6);
  align-items: center;
  width: 100%;
  max-width: var(--size-container);
  margin-left: auto;
  margin-right: auto;
  padding: var(--space-6) var(--space-8);
  display: flex;
}
.consent-text { flex: 1 1 auto; min-width: 0; }
.consent-text p { font-size: var(--text-sm); line-height: var(--leading-regular); }
.consent-text a { color: var(--accent); text-underline-offset: var(--size-underline-offset); }
.consent-title { color: var(--accent); font-family: var(--font-sans); letter-spacing: var(--tracking-button); text-transform: uppercase; margin-bottom: var(--space-2); }
.consent-actions { grid-column-gap: var(--space-4); flex: none; display: flex; }
.consent-btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-button);
  color: var(--accent);
  background-color: transparent;
  border: var(--hairline) solid var(--accent);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-6);
  min-height: var(--tap-target);
  cursor: pointer;
  transition: color var(--dur-hover), background-color var(--dur-hover);
}
.consent-btn:hover { background-color: var(--accent); color: var(--fg-on-photo); }
.consent-btn:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-width); }
.consent-reopen { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.consent-reopen:hover { text-decoration: underline; text-underline-offset: var(--size-underline-offset); }

/* --- 8. LIVE DETAILS BAR: αφαιρεθηκε 17/9 (αποφαση Ιωαννη) --- */

/* ---------------------------------------------------------- 6  COMPONENTS */

/* image reveal wipe (A2) */
.block-image { justify-content: flex-end; width: 100%; height: 100%; display: flex; position: relative; overflow: hidden; }
/* 18/9: παραλλαγη για φωτογραφιες που δεν καθονται σε κουτι με υψος (αφηγηση
   τοπου): η εικονα δινει το υψος, το overlay του reveal μενει ιδιο. */
.block-image.is-auto { height: auto; }
.block-image.is-auto > picture, .block-image.is-auto img { width: 100%; height: auto; display: block; }
.img-cover { object-fit: cover; width: 100%; height: 100%; }
.overlay-animate {
  z-index: var(--z-base);
  background-color: var(--bg);
  width: 0%;
  height: 100%;
  margin-left: auto;
  position: absolute;
  inset: 0%;
}
.overlay-animate.is-beige { background-color: var(--surface-alt); }
/* 17/9 (audit DL-3): το wipe με transform αντι για width. Το main.js
   μετακινει το --wipe απο 0 σε 100 και το overlay φευγει προς τα δεξια· μεσα
   στο overflow: hidden του .block-image φαινεται ιδιο με το width που
   μικραινε. Χωρις το main.js το --wipe λειπει και το overlay σκεπαζει,
   οπως πριν. */
.js .block-image > .overlay-animate { width: 100%; transform: translateX(calc(var(--wipe, 0) * 1%)); }
/* 17/9: «περιγραμμα πριν εμφανιστει η φωτο» στο κινητο. Σε Chrome δεν
   αναπαραχθηκε (ουτε σε 3x)· η φωτογραφια κοβεται 1px μεσα απο το κουτι,
   ωστε σε καμια μηχανη ο antialiased ή στρογγυλοποιημενος ακρος του
   overlay να μην αφηνει ακρη εικονας ορατη. Αοπρατο οταν αποκαλυφθει. */
.block-image > picture { clip-path: inset(var(--size-reveal-bleed)); }

/* dividers, 0,5px */
.stay-reach_divider { background-color: var(--rule); width: 100%; height: var(--hairline); margin-top: var(--space-12); margin-bottom: var(--space-16); }
.stay-reach_divider.testimonial { margin-top: var(--space-12); margin-bottom: var(--space-20); }

/* A. .button-link — ετικέτα + κύκλος με περίγραμμα */
.button-link {
  grid-column-gap: var(--space-3);
  grid-row-gap: var(--space-3);
  font-family: var(--font-sans);
  color: var(--accent);
  letter-spacing: var(--tracking-button);
  justify-content: center;
  align-items: center;
  line-height: var(--leading-flat);
  text-decoration: none;
  transition: color var(--dur-hover);
  display: flex;
  min-height: var(--tap-target);
}
.button-link.is-light, .button-link:hover { color: var(--fg-on-photo); }
.button-link.is-light:hover { color: var(--accent); }
/* 16/9: ο οδηγος δινει στο κειμενο ΔΙΚΟ ΤΟΥ χρωμα· στο hover αλλαζει μονο το
   βελακι (currentColor) πανω στον κυκλο που γεμιζει. Με `inherit` το κειμενο
   γινοταν λευκο σε ανοιχτο φοντο και πετρολ σε σκουρη φωτο, και χανοταν. */
.button-text { color: var(--accent); }
.button-link.is-light .button-text { color: var(--fg-on-photo); }

.button-circle {
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius-circle);
  justify-content: center;
  align-items: center;
  width: var(--size-circle);
  height: var(--size-circle);
  display: flex;
  position: relative;
  overflow: hidden;
  /* 17/9: χωρις αυτο το flex του .button-link τον στριμωχνε σε ελλειψη
     (34x48 και 32x40 στα 390) οταν το κειμενο ηθελε πλατος. */
  flex: none;
}
.button-circle.is-light { border-color: var(--fg-on-photo); }
/* 22/9: ο ησυχος συνδεσμος κατω απο τη διευθυνση ειχε 16 px, σφιχτο για
   στοιχειο 44 px αφης. Η καρτα του χαρτη αναπνεει. */
.place-map_info > .button-quiet { margin-top: var(--space-4); }

/* --- ΤΡΙΑ ΕΠΙΠΕΔΑ ΚΟΥΜΠΙΟΥ (22/9, αποφαση Ιωαννη) --------------------
   «Να μην ειναι ολα ιδια»: ο δισκος με το βελος ηταν ΣΕ ΟΛΑ, οποτε ο
   επισκεπτης εβλεπε το ιδιο αντικειμενο σε τρια μεγεθη. Απο δω και περα:
     1 · .button-primary  γεματη πιλουλα + δισκος. ΜΙΑ φορα ανα σελιδα
                          (η μπαρα και το CTA band).
     2 · .button-outline   πιλουλα με hairline, βελακι ΜΕΣΑ στην πιλουλα.
                          Τα κουμπια των ενοτητων.
     3 · .button-quiet     σκετο κειμενο με υπογραμμιση. Συνδεσμοι μεσα σε
                          κειμενο, χαρτες, εξωτερικα.
   Το `.button-link` μενει για ο,τι δεν εχει ακομη μεταφερθει. */
.button-outline,
.button-quiet {
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-button);
  line-height: var(--leading-flat);
  color: var(--accent);
  text-decoration: none;
  grid-column-gap: var(--space-3);
  align-items: center;
  min-height: var(--tap-target);
  display: inline-flex;
  transition: color var(--dur-hover), background-color var(--dur-hover), border-color var(--dur-hover);
}
.button-outline {
  border: var(--hairline) solid var(--accent);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-8);
}
.button-outline:hover { background-color: var(--accent); color: var(--fg-on-photo); }
/* Πανω σε φωτογραφια: λευκο κειμενο με λευκη γραμμη χανεται σε φωτεινο
   σημειο (μετρηθηκε στη ζωνη της Αρχικης, αμμος και πρασινο). Παιρνει
   πεπλο απο το ιδιο το μελανι του συστηματος, οχι backdrop-filter. */
.button-outline.is-light {
  color: var(--fg-on-photo);
  border-color: var(--fg-on-photo);
  background-color: color-mix(in srgb, var(--fg) 45%, transparent);
}
.button-outline.is-light:hover { background-color: var(--fg-on-photo); color: var(--accent); }
.button-quiet { text-decoration: underline; text-underline-offset: var(--size-underline-offset); }
.button-quiet:hover { color: var(--accent-strong); }
.button-quiet.is-light { color: var(--fg-on-photo); }
.button-outline:focus-visible,
.button-quiet:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-width); }
/* Το βελακι ακολουθει το χρωμα του κειμενου, σε καθε κατασταση. */
.button-icon { flex: none; width: var(--space-4); height: var(--space-4); display: block; }

.button-circle.p { border-color: var(--fg-on-photo); background-color: var(--fg-on-photo); color: var(--accent); flex: none; }
.button-arrow { z-index: var(--z-base); justify-content: center; align-items: center; width: var(--space-4); display: flex; position: relative; }

/* κατάσταση ηρεμίας του δίσκου hover, το GSAP τον φέρνει στο translateY(0) */
.circle-overlay {
  background-color: var(--accent);
  width: var(--size-circle);
  height: var(--size-circle);
  position: absolute;
  inset: 0%;
  transform: translateY(100%);
}
.circle-overlay.is-light { background-color: var(--fg-on-photo); }

/* B. .button-primary — pill με περίγραμμα + γεμάτος κύκλος */
.button-primary {
  grid-column-gap: var(--space-1);
  grid-row-gap: var(--space-1);
  font-family: var(--font-sans);
  color: var(--accent);
  letter-spacing: var(--tracking-button);
  justify-content: center;
  align-items: center;
  line-height: var(--leading-flat);
  text-decoration: none;
  display: flex;
  min-height: var(--tap-target);
}
.btn-holder { border: var(--hairline) solid var(--fg-on-photo); border-radius: var(--radius-pill); flex: none; padding: var(--space-btn-y) var(--space-descr-gap); }
.btn-text { color: var(--fg-on-photo); }
.btn-icon { display: none; }

/* Το ΚΥΡΙΟ κουμπι πανω σε ΑΝΟΙΧΤΟ φοντο (22/9, αποφαση Ιωαννη: «να μεινει,
   αλλα με το design του CTA, οχι ιδιο με το δεξια»). Το κανονικο .button-primary
   ειναι γραμμενο για φωτογραφια, δηλαδη λευκο περιγραμμα και λευκο κειμενο:
   πανω στο κρεμ της σελιδας ειναι ΑΟΡΑΤΟ. Η ιδια φορμα (πιλουλα + δισκος),
   γεμιστη με το μελανι του brand. */
.button-primary.is-ink .btn-holder { background-color: var(--accent); border-color: var(--accent); }
.button-primary.is-ink .button-circle.p { background-color: var(--accent); border-color: var(--accent); color: var(--fg-on-photo); }
.button-primary.is-ink:hover .btn-holder,
.button-primary.is-ink:hover .button-circle.p { background-color: var(--accent-strong); border-color: var(--accent-strong); }
.button-primary.is-ink:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-width); border-radius: var(--radius-pill); }

/* modal παροχών (κλειστό) */
.amenties-fixed {
  z-index: var(--z-modal);
  background-color: var(--scrim-modal);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  inset: 0%;
}
.amaneties-block { background-color: var(--bg); width: 100%; max-width: var(--size-modal); height: 80vh; position: relative; overflow: scroll; }
.amaneties-title { color: var(--accent); text-align: center; padding-top: var(--space-modal-title); padding-bottom: var(--space-modal-title); }
.amenties-grid { grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr; grid-auto-columns: 1fr; display: grid; }
.amenties-card {
  grid-column-gap: var(--space-4);
  grid-row-gap: var(--space-4);
  color: var(--accent);
  text-transform: uppercase;
  border: var(--hairline) solid var(--rule);
  flex-flow: column;
  padding: var(--space-12) var(--space-card-x) var(--space-card-b);
  display: flex;
}
.amenties-card._1 { padding-bottom: var(--space-8); }
.close-a_wrap {
  justify-content: center;
  align-items: center;
  width: var(--size-arrow-btn);
  height: var(--size-arrow-btn);
  margin-top: var(--space-6);
  margin-right: var(--space-6);
  display: flex;
  position: absolute;
  inset: 0% 0% auto auto;
  cursor: pointer;
  border: 0;
  background: none;
  color: var(--accent);
}
.amenties-triger { cursor: pointer; }

/* ΔΙΚΟ ΜΑΣ: ορατοί, μεταφρασμένοι placeholders φωτογραφίας.
   18/9: η κλάση ήταν `.photo-placeholder` ενώ ο helper της build.py γράφει
   `class="ph"`. Δεν φάνηκε ως τώρα γιατί καμία χτισμένη σελίδα δεν είχε κενή
   θέση («0 σε χρήση» στον selfcheck #15). Η πρώτη σελίδα τοποθεσίας τις
   έβγαλε ως άστυλα κουτιά με τις δύο αράδες κολλημένες. */
.ph {
  display: flex;
  flex-flow: column;
  gap: var(--space-2);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border: var(--hairline) dashed var(--rule);
  color: var(--accent);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  text-align: center;
  padding: var(--space-4);
}
.ph > span + span { color: var(--fg-muted); }

/* ------------------------------------------------------------- 7  FOOTER */

.footer-wrapper { grid-column-gap: var(--space-25); grid-row-gap: var(--space-25); flex-flow: column; padding-top: var(--space-25); display: flex; }
.footer-col { grid-column-gap: var(--space-4); grid-row-gap: var(--space-4); grid-template-rows: auto; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; display: grid; }
.footer-link { width: 100%; max-width: var(--size-footer-link); display: inline-block; color: var(--accent); }
.footer-details { grid-column-gap: var(--space-15); grid-row-gap: var(--space-15); justify-content: flex-end; display: flex; }
.footer-menu { grid-column-gap: var(--space-footer-menu); grid-row-gap: var(--space-footer-menu); flex-flow: column; display: flex; }
.link { color: var(--accent); line-height: var(--leading-sm); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap-target); }
.link.adress { width: 100%; max-width: var(--size-footer-addr); display: block; }
.footer-bottom {
  grid-column-gap: var(--space-4);
  grid-row-gap: var(--space-4);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  padding-top: var(--space-6);
  padding-bottom: var(--space-footer-bottom);
  display: grid;
}
.legal-pages { grid-column-gap: var(--space-legal); grid-row-gap: var(--space-legal); justify-content: flex-start; align-items: center; flex-wrap: wrap; display: flex; } /* 23/9: στα DE η γραμμή δεν χωρά στα 360 px */
.legal-links { color: var(--accent); font-size: var(--text-sm); line-height: var(--leading-flat); text-decoration: none; }
.link-2 { color: var(--accent); font-weight: var(--weight-medium); text-decoration: none; }
.link-2:hover { text-decoration: underline; }
.copy-right { text-align: center; }
.design-dev_by { text-align: right; }

/* ==================================================== 8  MEDIA QUERIES ====
   Ίδια σειρά με τον οδηγό: 1280↑, 1440↑, 991↓, 767↓, 479↓.
   Τα breakpoints είναι οι ΜΟΝΟΙ ωμοί αριθμοί του αρχείου.               */

@media screen and (min-width: 1440px) {
  /* 18/9, σελιδες τοποθεσιας: η τριτη φωτογραφια της αφηγησης και τα ψηλα
     καρε των σημειων, οπως στον οδηγο (πιο κατω δεν χωρουν). */

  /* 19/9: η καρτα ΔΕΝ γινεται πια οριζοντια εδω (κειμενο αριστερα, φωτογραφια
     δεξια, οπως ο οδηγος στο ιδιο breakpoint). Μενει η δομη του κινητου. */
  .upcoming-wrapper { padding-top: var(--space-20); padding-bottom: var(--space-20); }
  .upcomong-title_wrapper { grid-column-gap: var(--space-upcoming-gap-1440); grid-row-gap: var(--space-upcoming-gap-1440); padding-bottom: var(--space-20); }
  .coming-card_col {
    grid-column-gap: var(--space-card-gap);
    grid-row-gap: var(--space-card-gap);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  h2 { font-size: var(--text-h2-1440); }
  .text-h1 { font-size: var(--text-hero-1440); }
  .text-h1.is-page { font-size: var(--text-hero-page); }
  .hero-eyebrow .eyebrow-script { font-size: var(--text-eyebrow-hero-1440); }

  .stay-place_wrapper { padding-top: var(--space-24); padding-bottom: var(--space-24); }
  .stay-place_title { padding-bottom: var(--space-15); }
  .stay-place_diuscription { margin-left: var(--space-20); }
  .stay-right_image { max-width: var(--size-place-right-img-1440); }
  .stay-right_block { grid-column-gap: var(--space-right-block-1440); grid-row-gap: var(--space-right-block-1440); }

  .section-stay_display { max-height: none; }

  .stay-reach_wrapper { padding-top: var(--space-25); padding-bottom: var(--space-25); }
  .stay-reach { grid-column-gap: var(--gap-reach-1440); grid-row-gap: var(--gap-reach-1440); }
  .stay-reach_block { max-width: var(--size-reach-block-1440); }
  .reach-img_wrapper { height: var(--size-reach-img-1440); }
  .stay-reach_divider.testimonial { margin-top: var(--space-20); }

  .gallery-slide_arrows { padding-bottom: var(--space-20); }

  .testimonial-wrapper { padding-top: var(--space-25); padding-bottom: var(--space-25); }
  .testimonial-wrapper > .reviews { margin-top: var(--space-15); }
  .testimonial-title_wrapper { grid-column-gap: var(--space-15); grid-row-gap: var(--space-15); max-width: var(--size-testi-title-1440); }
  /* 18/9 αποφαση Ιωαννη: 3 κριτικες ορατες, οχι 5. Εδω ηταν
     `--reviews-per-view: 5` (ο αριθμος του οδηγου στα 1440)· χωρις τον
     κανονα ισχυει το 3 της βασης, οπως και στα 992 εως 1439. */


  .mega_nav_links { font-size: var(--text-mega-1440); line-height: var(--leading-mega); }
  .m-m_contact { grid-column-gap: var(--space-contact-1440); grid-row-gap: var(--space-contact-1440); }
}

/* 17/9: ΔΙΚΟ ΜΑΣ breakpoint. Στα 992-1179 η μπαρα δεν χωρουσε (μετρημενη
   375 px δεξια + 403 αριστερα + 200 λογοτυπο, εβγαινε ως 40 px εξω απο τα
   1024): οι τρεις ελληνικοι συνδεσμοι ειναι μακρυτεροι απο τα «Stay Soma
   Voyage» του οδηγου. Κρυβονται οπως ηδη κατω απο τα 991· ολες οι σελιδες
   μενουν στο μενου του κουμπιου. */
@media screen and (max-width: 1199px) {
  .nav-main_links { display: none; }
}

@media screen and (max-width: 991px) {
  /* 19/9: μια στηλη παροχων και στο tablet, οπως στο κινητο. Με δυο στηλες των
     262 px στα 768 οι τιτλοι των ομαδων δεν χωρουσαν («Η ΚΑΘΗΜΕΡΙΝΟΤ / ΗΤΑ ΣΑΣ»)
     και καθε παροχη επιανε τεσσερις γραμμες. */
  .amenities-groups { column-count: 1; }
  .amenities-groups > .amenity-group { margin-bottom: var(--space-8); }
  .legal-wrapper { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { position: static; }
  /* 18/9, σελιδες τοποθεσιας: το ασυμμετρο πλεγμα γινεται στηλη και τα καρε
     των σημειων φωτογραφια πανω, κειμενο κατω. */
  .about-explore_col { grid-column-gap: var(--space-12); grid-row-gap: var(--space-12); flex-flow: column; }
  .right-col_grid { grid-column-gap: var(--space-10); grid-row-gap: var(--space-10); flex-flow: column; }
  .col-right { grid-column-gap: var(--space-10); grid-row-gap: var(--space-10); flex-flow: column; display: flex; }
  .col-discription { max-width: none; margin-left: 0; padding-bottom: 0; }
  .col-right, .col-right_img, .explore-lrft_col, .explore-left_img { flex: none; max-width: none; }
  /* στο κινητο η μεσαια φωτογραφια φευγει: τρεις στηλες η μια κατω απο την αλλη
     θα εκαναν την ενοτητα ατελειωτη. */
  .col-right_big-img { display: none; }
  .explore-title_wrapper { padding-bottom: var(--space-10); }
  .place-map_wrapper { grid-template-columns: minmax(0, 1fr); }
  .form-wrapper { grid-template-columns: minmax(0, 1fr); }
  .time-slide_wrapper { grid-template-columns: 1fr; }
  .point-text { height: auto; }
  .faq-list { max-width: none; }

  .text-h1.is-page { font-size: var(--text-hero-page-991); }
  .upcomong-title_wrapper { grid-column-gap: var(--space-8); grid-row-gap: var(--space-8); }
  .coming-card_col { grid-column-gap: var(--space-card-gap-991); grid-row-gap: var(--space-card-gap-991); grid-template-columns: 1fr; }
  .card-title { font-size: var(--text-card-title-991); line-height: var(--leading-card-title-767); }
  .link-icon { width: var(--size-link-icon-991); }

  h1 { font-size: var(--text-h1-991); line-height: var(--leading-h1-991); }
  h2 { font-size: var(--text-h2-991); }
  .text-size-small { line-height: 150%; }

  .nav-main_links { display: none; }

  .heading-tag { padding-left: 0; }
  .hero-bg_col { display: flex; }
  .hero-main_img { width: 100%; height: 100%; }
  .tab-overlay { background-color: var(--scrim-tab); width: 100%; height: 100%; display: block; position: absolute; }

  /* 18/9 αποφαση Ιωαννη: στο tablet ισχυει ο,τι και στο κινητο, δηλαδη ΚΑΜΙΑ
     ζωνη χρωματος· φαινεται ολη η φωτογραφια. Ως τωρα η καθετη λωριδα γινοταν
     εδω οριζοντια ζωνη στο κατω 52%. Τον τιτλο τον διαβαζει το scrim του
     .tab-overlay, που απο εδω και κατω ειναι επιπεδο σε ολο το hero. */
  .hero-panel { display: none; }

  .stay-place_wrapper { padding-top: var(--space-20); padding-bottom: var(--space-20); }
  .stay-place_wrapper-copy { flex-flow: column; }
  .stay-left_wrapper { max-width: none; padding-top: 0; }
  .stay-left_img, .stay-left_img.size-block { max-width: none; }
  .stay-midde_wrapper { padding: var(--space-10) 0; }
  .stay-place_title { max-width: none; padding-bottom: var(--space-8); }
  .stay-place_diuscription { grid-column-gap: var(--space-8); grid-row-gap: var(--space-8); max-width: none; margin-left: 0; }
  .stay-right_image { max-width: none; }
  .stay-right_block { grid-column-gap: var(--space-8); grid-row-gap: var(--space-8); }
  .div-block-5 { flex-flow: column; }
  .place-img_wrap { padding-left: 0; }

  .overlay-animate { transform: scale(var(--scale-overlay-991)); }
  /* Το ιδιο scale του οδηγου, με τη μετακινηση του wipe μπροστα του. Η
     διαδρομη μεγαλωνει οσο και το scale, ωστε στο --wipe 100 το overlay να
     εχει βγει ολοκληρο απο το κουτι. */
  .js .block-image > .overlay-animate {
    transform: translateX(calc(var(--wipe, 0) * var(--scale-overlay-991) * 1%)) scale(var(--scale-overlay-991));
  }

  .section-stay_display { height: 80vh; }

  .stay-reach_wrapper { padding-top: var(--space-20); padding-bottom: var(--space-20); }
  .stay-reach_title { grid-column-gap: var(--space-6); grid-row-gap: var(--space-6); }
  .stay-reach_divider { margin-top: var(--space-12); margin-bottom: var(--space-12); }
  .stay-reach_divider.testimonial { margin-bottom: var(--space-12); }
  .stay-reach { grid-column-gap: var(--gap-reach-991); grid-row-gap: var(--gap-reach-991); grid-template-columns: 1fr 1fr; }
  .stay-reach_card { grid-column-gap: var(--space-4); grid-row-gap: var(--space-4); }
  .stay-reach_button_wrapper { padding-top: var(--space-12); }

  .section-stay_gallery { height: 80vh; }
  .div-block-2 { max-width: var(--size-gallery-w-991); height: var(--size-gallery-h-991); }
  .gallery-slide_arrows { padding-bottom: var(--space-8); }

  .testimonial-wrapper { padding-top: var(--space-20); padding-bottom: var(--space-20); }
  .testimonial-title_wrapper { grid-column-gap: var(--space-6); grid-row-gap: var(--space-6); }
  .reviews-track { --reviews-per-view: 2; }

  .cta-wrap { padding: var(--space-20) var(--space-8); }

  .button-link:hover { color: var(--accent); }
  .button-link.is-light:hover { color: var(--fg-on-photo); }
  .circle-overlay { display: none; }
  .btn-holder { padding: var(--space-4) var(--space-6); }

  .footer-wrapper { grid-column-gap: var(--space-12); grid-row-gap: var(--space-12); padding-top: var(--space-12); }
  .footer-col { grid-column-gap: var(--space-8); grid-row-gap: var(--space-8); grid-template-columns: 1fr; }
  .footer-details { justify-content: space-between; }
  .footer-bottom { flex-flow: column; justify-content: center; align-items: center; display: flex; }
  .legal-pages { justify-content: center; }

  .mega_nav_links { font-size: var(--space-10); line-height: 120%; }
}

@media screen and (max-width: 767px) {
  /* 18/9, σελιδες τοποθεσιας στο κινητο. */
  .explore-kea_wrapper { padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .section-place_map, .section-callout, .section-faq { padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .section-stay_hero.is-compact { height: var(--size-hero-compact-991); }
  .main-wrapper.vh-space.is-compact { padding-top: var(--size-hero-compact-991); }
  .place-map_card { padding: var(--space-6); }
  .callout-lines { grid-template-columns: 1fr; grid-row-gap: var(--space-1); }
  .callout-lines dd { margin-bottom: var(--space-3); }
  .point-photo { height: var(--size-point-h-767); }
  .point-text { padding: var(--space-8) var(--space-6); }
  .time-wrapper { padding-bottom: var(--space-15); }
  .trusted-title_wrapper { padding-top: var(--space-15); }

  h1 { font-size: var(--text-h1-767); line-height: var(--leading-h1-767); }
  h2 { font-size: var(--text-h2-767); }
  h3 { font-size: var(--text-h3-767); }
  /* 19/9: τιτλοι με μεγεθος h3 απο κλαση δεν επιαναν το σκετο «h3» απο πανω
     (η κλαση νικαει το στοιχειο) και εμεναν 32 px ως τα 320. */
  .amenity-group_title, .legal-section > h2 { font-size: var(--text-h3-767); }
  p { font-size: var(--text-base-767); line-height: var(--leading-base-767); }
  .heading-style-h3 { font-size: var(--text-h3-style); }
  .text-h1 { font-size: var(--text-hero-767); }
  .text-h1.is-page { font-size: var(--text-hero-page-767); }
  .hero-eyebrow .eyebrow-script { font-size: var(--text-eyebrow-hero-767); }
  /* 17/9 αποφαση Ιωαννη: τα eyebrows των τιτλων μικροτερα στο κινητο, γιατι
     εβγαιναν σχεδον ισα με τους H2. Το hero το κραταει ο κανονας απο πανω
     (πιο ειδικος selector). */
  .eyebrow-script { font-size: var(--text-eyebrow-767); }

  .padding-global { padding-left: var(--pad-global-sm); padding-right: var(--pad-global-sm); }
  .global-nav { padding-left: var(--space-4); padding-right: var(--space-4); }
  .hamburger_block { width: var(--size-circle-479); height: var(--size-circle-479); }

  .stay-home_title { padding-bottom: var(--space-hero-title-767); }

  .stay-place_wrapper { padding-top: var(--space-15); padding-bottom: var(--space-15); }
  .stay-midde_wrapper { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .stay-place_title { padding-bottom: var(--space-6); }

  .stay-reach_wrapper { padding-top: var(--space-15); padding-bottom: var(--space-15); }
  .stay-reach_divider.testimonial { margin-top: var(--space-8); margin-bottom: var(--space-8); }
  .stay-reach { grid-template-columns: 1fr; }
  .stay-reach_card.reverse-b-t { flex-flow: row-reverse wrap-reverse; justify-content: flex-end; }
  .reach-img_wrapper { width: 100%; height: auto; }
  /* 17/9: τα δυο κουμπια (μακριες ελληνικες ετικετες) δεν χωρουσαν διπλα
     διπλα και εβγαιναν απο το πλατος· πανε το ενα κατω απο το αλλο. */
  .stay-reach_button_wrapper { flex-flow: column; grid-row-gap: var(--space-4); row-gap: var(--space-4); }
  /* 21/9: το παραθυρο συγκαταθεσης σε στηλη, κουμπια σε ολο το πλατος. */
  .consent-box { flex-flow: column; align-items: stretch; padding: var(--space-6); }
  .consent-actions > .consent-btn { flex: 1 1 0; }
  /* 24/9 (QA UX-6): πιο συμπαγες στο κινητο, για να καλυπτει λιγοτερο απο
     τον τιτλο της πρωτης οθονης. Ιδια στοιχεια, λιγοτερος αερας. */
  .consent-box { padding: var(--space-4) var(--space-6); grid-row-gap: var(--space-4); }

  /* 17/9 αποφαση Ιωαννη: μια στηλη καρτων στο κινητο (ο οδηγος κραταει δυο
     και βγαινουν στενες και εκτος πλατους). Η δομη της καρτας, φωτογραφια
     πανω, τιτλος, περιγραφη, ισχυει απο 19/9 σε καθε πλατος (βλ. βαση). */
  .coming-card_col { grid-template: none; grid-template-columns: 1fr; }
  .card-soma { grid-row-gap: var(--space-6); row-gap: var(--space-6); }
  /* 17/9: σελιδες δωματιων στο κινητο, μια στηλη παροχων. */
  .amenities-wrapper, .fit-wrapper { padding-top: var(--space-15); padding-bottom: var(--space-15); }
  /* 18/9: το κουτι των παροχων ειναι ηδη μεσα στο περιθωριο της σελιδας (20 px
     απο τα 767 και κατω)· με 48 px ακομη απο μεσα η λιστα εμενε 254 px. */
  .amenities-wrapper { padding-left: var(--space-6); padding-right: var(--space-6); }
  .section-amenities { padding-top: var(--space-12); padding-bottom: var(--space-12); }
  /* ιδια αριθμητικη με το desktop: ο τιτλος μενει 108 px κατω απο τη gallery */
  .section-amenities.is-under-gallery { padding-top: 0; }
  .section-amenities.is-under-gallery .amenities-wrapper { padding-top: calc(var(--space-12) + var(--space-15) + var(--overlap-gallery)); }

  /* 17/9: στο κινητο η gallery γινεται ροη: φωτογραφια, απο κατω τα βελακια
     και κατω απο αυτα ο συνδεσμος, και θολο φοντο που συνεχιζει απο κατω
     ωστε να μην κοβεται. Με position absolute τα κουμπια επεφταν πανω στη
     φωτογραφια και ο μακρυς συνδεσμος δεν χωρουσε διπλα στα βελακια. */
  .section-stay_gallery { height: auto; padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .gallery-main_slider { height: auto; }
  .div-block-2 { max-width: var(--size-gallery-w-767); height: var(--size-gallery-h-767); }
  .gallery-slide_arrows { position: static; flex-flow: column-reverse; align-items: center; grid-row-gap: var(--space-4); row-gap: var(--space-4); width: 100%; padding: var(--space-6) var(--space-8) 0; }
  .gallery-links { flex-direction: column; align-items: flex-start; row-gap: var(--space-4); }
  .slider-prev, .slider-next { width: var(--size-arrow-btn-767); height: var(--size-arrow-btn-767); }

  .testimonial-wrapper { padding-top: var(--space-15); padding-bottom: var(--space-15); }
  .testimonial-wrapper > .reviews { margin-top: var(--space-8); }
  .testimonial-title_wrapper { grid-column-gap: var(--space-4); grid-row-gap: var(--space-4); max-width: none; }

  .cta-wrap { padding-top: var(--space-15); padding-bottom: var(--space-15); }
  .cta-discription_wrapper { padding-bottom: var(--space-8); }
  .cta-button_wrapper { padding-top: var(--space-8); }

  .button-circle { width: var(--size-circle-767); height: var(--size-circle-767); }
  .button-circle.p { width: var(--size-circle-479); height: var(--size-circle-479); }
  .btn-holder { padding: var(--space-2) var(--space-4); }

  .amenties-grid { grid-template-columns: 1fr 1fr; }
  .amenties-card { padding: var(--space-6); }
  .amenties-card._1 { padding-bottom: var(--space-6); }

  /* Ο εναλλακτης γλωσσας φευγει απο τη μπαρα και παει στο mega menu: στα
     390 px η μπαρα χωραει 253 px δεξια, και μονο το κουμπι θελει 241. */
  .nav-lang--bar { display: none; }
  .nav-lang--mm { display: flex; }

  /* 17/9: στα 480-640 η μπαρα (589 px) και το footer (601 px) εβγαιναν απο
     το πλατος και η σελιδα κυλουσε οριζοντια. Η μπαρα παιρνει τη μορφη των
     479 (μικρο λογοτυπο, κουμπι χωρις κυκλο) και οι στηλες της μενουν ισες
     ωστε το λογοτυπο να μενει στο κεντρο· το footer παυει να απλωνεται στο
     min-content του λογοτυπου και οι στηλες του τυλιγονται. */
  .nav-wrapper { grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr); }
  .nav-main_logo { width: var(--size-logo-nav-479); }
  .nav-right_wrapper .button-circle.p { display: none; }
  /* 17/9 αποφαση Ιωαννη: στο κινητο το κουμπι διαθεσιμοτητας γινεται κυκλος
     με ημερολογιο, ιδιο μεγεθος με το κουμπι μενου απεναντι. Το κειμενο
     μενει για αναγνωστες οθονης. */
  .nav-right_wrapper .btn-holder { display: flex; align-items: center; justify-content: center; width: var(--size-circle-479); height: var(--size-circle-479); padding: 0; border-radius: var(--radius-circle); }
  .nav-right_wrapper .btn-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .nav-right_wrapper .btn-icon { display: flex; color: var(--fg-on-photo); }
  .footer-col { grid-template-columns: minmax(0, 1fr); }
  .footer-details { flex-wrap: wrap; grid-row-gap: var(--space-8); row-gap: var(--space-8); justify-content: flex-start; }

  .mega_nav_links { font-size: var(--text-mega); }
  .m-m_divider { margin-top: var(--space-8); margin-bottom: var(--space-8); }

  /* 17/9 (audit UX-2): περιοχη πατηματος τουλαχιστον --tap-target (44 px)
     στα μικρα κουμπια και στους συνδεσμους του footer, με ψευδοστοιχειο: η
     οψη δεν αλλαζει. Το min(0%, ...) δεν μικραινει ποτε ο,τι ειναι ηδη
     μεγαλυτερο απο 44 px. */
  .hamburger_block, .nav-right_wrapper .button-primary, .slider-prev, .slider-next,
  .reviews-arrow, a.legal-links, .link-2 { position: relative; }
  .hamburger_block::after, .nav-right_wrapper .button-primary::after, .slider-prev::after,
  .slider-next::after, .reviews-arrow::after, a.legal-links::after, .link-2::after {
    content: "";
    position: absolute;
    inset: min(0%, calc((var(--tap-target) - 100%) / -2));
  }
  /* Τα dots των κριτικων: εννεα των 44 px δεν χωρανε στα 390. Στο κινητο
     γινονται ενδειξη θεσης, οχι κουμπια· η πλοηγηση γινεται με τα βελακια και
     με swipe. Το app.js τα βγαζει και απο το Tab και απο τους αναγνωστες
     οθονης στο ιδιο πλατος. */
  .reviews-dots { pointer-events: none; }

  /* 17/9 (audit UX-3): οι λιστες παροχων σε 16 px (ηταν 14 px κεφαλαια) και
     η πλατφορμα κατω απο καθε κριτικη σε 14 px (ηταν 12 px). */
  .stay-reach_block .text-size-small { font-size: var(--text-paragraph); }
  .review-author_meta { font-size: var(--text-sm); }
}

@media screen and (max-width: 479px) {
  .reviews-track { --reviews-per-view: 1; }
  .reviews-controls { gap: var(--space-2); }
  .reviews-arrow { width: var(--size-arrow-btn-767); height: var(--size-arrow-btn-767); }
  .reviews-summary { padding: var(--space-4); }
  .review-card { padding: var(--space-5); }
  .section-soma_upcoming.explore { padding-bottom: var(--space-15); }
  .upcoming-wrapper { padding-top: var(--space-15); }
  .upcomong-title_wrapper { grid-column-gap: var(--space-8); grid-row-gap: var(--space-8); padding-bottom: var(--space-12); }
  .card-soma { grid-column-gap: var(--space-8); grid-row-gap: var(--space-8); grid-template-columns: 1fr; padding: var(--space-4); }
  .card-information { grid-column-gap: var(--space-6); grid-row-gap: var(--space-6); }
  .card-more_deqatils { grid-column-gap: var(--space-4); grid-row-gap: var(--space-4); }

  /* 18/9: χωρις letter-spacing εδω, το --tracking-h1 ειναι em και κλιμακωνεται μονο του */
  h1 { font-size: var(--text-h1-479); line-height: var(--leading-h1-479); }
  h2 { letter-spacing: var(--tracking-h2-479); font-size: var(--text-h2-479); }
  h3 { letter-spacing: var(--tracking-h3-479); font-size: var(--text-h3-479); }
  .amenity-group_title, .legal-section > h2 { letter-spacing: var(--tracking-h3-479); font-size: var(--text-h3-479); }
  .text-h1 { font-size: var(--text-hero-479); }
  /* 19/9: οριο 11vw, ωστε η μεγαλυτερη λεξη του τιτλου να χωραει στα 360
     (το συνηθεστερο πλατος Android). Πανω απο 364 px ισχυει το token. */
  .text-h1.is-page { font-size: min(var(--text-hero-page-767), var(--text-hero-page-cap)); }
  .text-size-regular.caps-none { font-size: var(--text-regular-479); }

  .nav-wrapper { grid-column-gap: 0; grid-row-gap: 0; }
  .menu-open { width: var(--space-4); }

  .stay-left_img, .stay-right_image { height: var(--size-place-img-479); }
  .stay-reach_title { grid-column-gap: var(--space-4); grid-row-gap: var(--space-4); max-width: none; }
  .sta-reach_info { grid-column-gap: var(--space-2); grid-row-gap: var(--space-2); }

  .gallery-bg { filter: blur(var(--blur-gallery-479)); }
  .div-block-2 { max-width: var(--size-gallery-w-479); height: var(--size-gallery-h-767); }

  .button-circle.is-light { width: var(--size-circle-479); height: var(--size-circle-479); }
  .button-circle.p { display: none; }

  .footer-wrapper { grid-column-gap: var(--space-8); grid-row-gap: var(--space-8); }
  .footer-link { max-width: var(--size-footer-link-479); }
  .footer-details { grid-row-gap: var(--space-8); flex-flow: wrap; justify-content: flex-start; }
  .footer-menu, .footer-bottom { grid-column-gap: var(--space-2); grid-row-gap: var(--space-2); }
  .legal-pages { grid-column-gap: var(--space-4); grid-row-gap: var(--space-4); }

  .mega-menu { width: 100%; }
  .m-menu_blovk { padding-top: var(--space-8); padding-left: var(--space-4); }
  .close-mm_wrapper { padding-bottom: var(--space-8); }
  .close-hamburger { width: var(--size-circle-479); height: var(--size-circle-479); }
  .mega_nav_links { letter-spacing: var(--tracking-h3-479); font-size: var(--size-mega-479); }
  .menu-other_links { padding-left: var(--space-4); }
  .m-m_contact { grid-column-gap: var(--space-2); grid-row-gap: var(--space-2); padding-left: var(--space-4); }

  .amenties-grid { grid-template-columns: 1fr; }
  .amenties-card { padding: var(--space-4); }
  .close-a_wrap { margin-top: var(--space-2); margin-right: 0; }
}

/* Ο οδηγός δεν τιμά καμία προτίμηση κίνησης στην αρχική του μορφή· αυτό το
   μπλοκ είναι δική του τεκμηριωμένη προσθήκη (SPEC-MOTION §6) και κρατιέται
   αυτούσιο. Το main.js κάνει το ίδιο από τη μεριά του JS. */
@media (prefers-reduced-motion: reduce) {
  .reviews-track { scroll-behavior: auto !important; }
  .link-icon { opacity: 1 !important; }
  .blur-word { opacity: 1 !important; filter: none !important; }
  .overlay-animate { width: 0% !important; }
  .display-highlight { opacity: 1 !important; }
  [data-scroll-image] { transform: scale(var(--scale-parallax)) !important; }
  .global-nav { transform: none !important; background-color: var(--accent) !important; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}