/* corissia-web 2026-11-01: the new look (2027), stage A.
   Loaded after main.css only for a browser that opened a page with ?cwlook=1 (cookie cw_look);
   other visitors never download it. Palette «Aegean and limestone». */

:root {
  --cw-ground: #F4F1EB;
  --cw-surface: #FFFFFF;
  --cw-ink: #172A33;
  --cw-muted: #56636B;
  --cw-line: #DDD6CA;
  --cw-primary: #1D4352;
  --cw-primary-hover: #143440;
  --cw-deep: #10303C;
  --cw-accent: #8A5D27;
  --cw-accent-light: #C9A46A;
  --cw-tint: #E8EEEF;
  --cw-sand: #EFE6D6;
  --cw-on-deep: #B9C7CC;

  /* the variables main.css already uses */
  --color-bg-main: var(--cw-ground);
  --color-bg-white: var(--cw-surface);
  --color-bg-lightgray: #EDE8DF;
  --color-bg-gray: #EEE9E0;
  --color-bg-dark: var(--cw-primary);
  --color-bg-lightdark: #3E5C68;
  --color-bg-green: var(--cw-sand);
  --color-bg-blue: var(--cw-tint);
  --color-bg-yellow: var(--cw-sand);
  --color-bg-purple: #EFE1DA;
  --color-body: var(--cw-ink);
  --color-link: var(--cw-primary);
  --color-link-hover: var(--cw-accent);
}

body { color: var(--cw-ink); background-color: var(--cw-ground); }
h1, h2, h3, h4 { color: inherit; }
::selection { background: var(--cw-sand); color: var(--cw-ink); } /* Stage E6 (2026-11-01): dark text on the sand selection, also on dark bands */

/* text colours used across the pages */
.green, .blue { color: var(--cw-primary); }
.silver, .platinum { color: var(--cw-muted); }
.gold { color: var(--cw-accent); }
.bg-dark, .bg-lightdark { color: #FFFFFF; }
.bg-dark a, .bg-lightdark a { color: #FFFFFF; }

/* ---------- buttons ---------- */
.button {
  border-radius: 2px;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: 13px 22px 11px;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.button-dark, .button-blue, .button-green {
  color: #FFFFFF;
  background: var(--cw-primary);
  border: 1px solid var(--cw-primary);
}
.button-white, .button-lightgray, .button-gray, .button-brown {
  color: var(--cw-ink);
  background: var(--cw-surface);
  border: 1px solid var(--cw-line);
}
.button-red { background: #A1412E; border: 1px solid #A1412E; color: #FFFFFF; }
.button-dark:hover, .button-dark:focus,
.button-blue:hover, .button-blue:focus,
.button-green:hover, .button-green:focus,
.button-red:hover, .button-red:focus {
  color: #FFFFFF;
  background: var(--cw-primary-hover);
  border-color: var(--cw-primary-hover);
}
.button-white:hover, .button-white:focus,
.button-lightgray:hover, .button-lightgray:focus,
.button-gray:hover, .button-gray:focus,
.button-brown:hover, .button-brown:focus {
  color: var(--cw-ink);
  background: var(--cw-tint);
  border-color: var(--cw-primary);
}
/* boxes and box-buttons (.frame-col): keep the text colour of the button class they carry */
.frame-col { border-color: var(--cw-line); border-radius: 2px; }
.frame-col.button-dark, .frame-col.button-blue, .frame-col.button-green, .frame-col.button-red { color: #FFFFFF; border-color: var(--cw-primary); }

/* ---------- forms ---------- */
.modernform input[type="text"],
.modernform input[type="email"],
.modernform input[type="password"],
.modernform input[type="date"],
.modernform input[type="tel"],
.modernform input[type="search"],
.modernform input[type="datetime-local"],
.modernform input[type="number"],
.modernform textarea,
.modernform select,
select {
  border: 1px solid var(--cw-line);
  border-radius: 2px;
  background-color: var(--cw-surface);
  color: var(--cw-ink);
}
.modernform input:focus, .modernform textarea:focus, .modernform select:focus, select:focus {
  border-color: var(--cw-primary);
  outline: 2px solid rgba(29, 67, 82, 0.18);
  outline-offset: 0;
}
input[type="radio"], input[type="checkbox"] { accent-color: var(--cw-primary); }

/* ---------- header on the dark band ---------- */
.header {
  background: var(--cw-deep);
  color: #FFFFFF;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
.header .logo > a { color: #FFFFFF; }
.header .logo img { margin-top: 2px; max-width: 150px; }
.header .menuline { background-color: #FFFFFF; }
.header .rate-nav, .header .mobile-nav { color: #FFFFFF; }
.header .menu .dropdown > a,
.header .menu .dropdown > span,
.header .menu > a {
  color: #FFFFFF;
  border-radius: 2px;
  letter-spacing: 0.03em;
}
.header .menu .dropdown > a:hover,
.header .menu .dropdown > a:focus,
.header .menu .dropdown > a.focused {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.10);
  border-color: transparent;
  border-radius: 2px 2px 0 0;
}
/* the section of the page you are on: a thin ochre line under the menu item */
.header .menu .dropdown > a.current {
  color: #FFFFFF;
  background-color: transparent;
  border-color: transparent;
  border-bottom-color: var(--cw-accent-light);
  border-radius: 0;
}
.header .menu .dropdown > a.current.focused { background-color: rgba(255, 255, 255, 0.10); }
/* the page you are on inside the open drop-down menu */
.header .dropdown ul a.current {
  color: var(--cw-accent);
  font-weight: 600;
  background: transparent;
  border-color: transparent;
}
.header .dropdown ul {
  border-top: 2px solid var(--cw-accent-light);
  border-radius: 0 0 3px 3px;
  color: var(--cw-ink);
}
.header .dropdown ul a { color: var(--cw-ink); }
.header .dropdown ul a:hover, .header .dropdown ul a:focus { color: var(--cw-accent); background: transparent; border-color: transparent; }
.header .dropdown .frame-col { background: var(--cw-ground); color: var(--cw-muted); border-color: var(--cw-line); }
.header .progress-bar { background: var(--cw-accent-light); }
.header .progress-display { color: var(--cw-on-deep); }

/* the row with the travel dates, the viewed and selected rooms and the language */
.header .toprow { color: var(--cw-on-deep); }
.header .toprow .button-white,
.header .toprow .frame-col {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.header .toprow .button-white:hover,
.header .toprow .button-white:focus {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
}
.header .toprow .bg-dark { background: #FFFFFF; color: var(--cw-ink); border-color: #FFFFFF; }
.header .lang { color: var(--cw-on-deep); }
.header .lang .bg-dark { background: #FFFFFF; color: var(--cw-ink); }
.header .rate-nav {
  background: #FFFFFF;
  color: var(--cw-ink) !important;
  border: 1px solid #FFFFFF;
  border-radius: 2px;
  letter-spacing: 0.1em;
}
.header .rate-nav:hover, .header .rate-nav:focus { background: var(--cw-sand); border-color: var(--cw-sand); color: var(--cw-ink) !important; }
.header .rate-nav .badge, .header .badge { background: var(--cw-accent-light); color: var(--cw-deep); border-color: var(--cw-deep); }

/* the pop-ups that live inside the header (BOOK NOW dates, mobile menu) are light panels:
   they must not inherit the white text of the dark band */
.header .jmodal-content {
  color: var(--cw-ink);
  border-color: var(--cw-line);
  border-radius: 3px;
}
.header .jmodal-content a { color: var(--cw-primary); }
.header .jmodal-content a:hover, .header .jmodal-content a:focus { color: var(--cw-accent); }
.header .jmodal-content .modalcloser { color: var(--cw-ink); }
.header .jmodal-content .button-dark,
.header .jmodal-content .button-blue,
.header .jmodal-content .button-green,
.header .jmodal-content .bg-dark,
.header .jmodal-content .bg-dark a { color: #FFFFFF; }
.header .jmodal-content .lang { color: var(--cw-muted); }
.header .jmodal-content .lang .bg-dark { background: var(--cw-primary); color: #FFFFFF; }
.header .jmodal-content .mobilemenu a.mobilemenutitle { border-color: var(--cw-line); border-radius: 2px; color: var(--cw-ink); }
.header .jmodal-content .mobilemenu a.current { border-color: var(--cw-primary); }

/* check boxes and radio buttons drawn by the site (label.container + .checkmark) */
.container .checkmark { border-color: var(--cw-line); }
.container:hover input ~ .checkmark { background-color: var(--cw-sand); border-color: var(--cw-line); }
.container input:checked ~ .checkmark { background-color: var(--cw-primary); border-color: var(--cw-primary); }

/* the large photo at the top of a page: no grey frame above and below it */
.main-content .intro.intro-dynamic { border-top-width: 0; border-bottom-width: 0; }

/* phones: a smaller logo, so the header takes less room */
@media only screen and (max-width: 767px) {
  .header .logo img { max-width: 104px; margin-top: 4px; }
}

/* the floating Flights / Contact tabs on the right */
.sidefixed { border-color: var(--cw-line); box-shadow: 0 10px 30px rgba(16, 48, 60, 0.12); }
.sidefixed .cartitems { color: var(--cw-accent); }

/* ---------- news stripe and breadcrumbs ---------- */
.newsarea { background: var(--cw-surface); border-bottom: 1px solid var(--cw-line); }
/* one line under the news bar, not two */
.newsarea + .longrow1, .newsarea + .longrow3 { border-top: 0; }
.longrow1, .longrow3 { border-color: var(--cw-line); }
/* the opened news: plain items divided by a line, no boxes */
#news .frame-col {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--cw-line);
  border-radius: 0;
  padding: 18px 0;
  box-shadow: none;
}
#news .longbutton { background: transparent; border: 0; color: var(--cw-primary); }
#news .longbutton:hover, #news .longbutton:focus { background: transparent; color: var(--cw-accent); }
.breadcrumb, .breadcrumb a { color: var(--cw-muted); }

/* ---------- the two ways to reserve in the room selection (cart) ---------- */
#option-request, #option-book {
  background: var(--cw-surface);
  border: 1px solid var(--cw-line);
  border-left: 4px solid var(--cw-line);
  border-radius: 2px;
}
#option-request:has(input:checked), #option-book:has(input:checked) {
  border-left-color: var(--cw-primary);
  box-shadow: 0 10px 28px rgba(16, 48, 60, 0.08);
}
.border-left-green { border-left-color: var(--cw-primary); }
.border-left-blue { border-left-color: var(--cw-accent-light); }

/* ---------- cards ---------- */
.image-box {
  background: var(--cw-surface);
  box-shadow: 0 1px 0 var(--cw-line), 0 10px 30px rgba(16, 48, 60, 0.06);
  border-radius: 3px;
  overflow: hidden;
}
.image-box a { color: var(--cw-ink); }
.image-box a:hover { color: var(--cw-accent); }
.stripe { border-color: var(--cw-line); border-radius: 2px; color: var(--cw-ink); }

/* ---------- footer ---------- */
.footer {
  background: var(--cw-deep);
  color: var(--cw-on-deep);
  border-top: 0;
}
.footer a { color: #FFFFFF; }
.footer a:hover, .footer a:focus { color: var(--cw-accent-light); }
.footer h2, .footer h3, .footer h4, .footer .bitter { color: #FFFFFF; }
.footer .frame-col, .footer .button-white { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.3); }
.footer .bg-dark { background: #FFFFFF; color: var(--cw-ink); }

/* ---------- cookie banner ---------- */
.cookie-consent {
  background: var(--cw-surface);
  border: 1px solid var(--cw-line);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 -12px 40px rgba(16, 48, 60, 0.14);
  color: var(--cw-ink);
}

/* =====================================================================================
   Stage B: home page (and the top photo of every page)
   ===================================================================================== */

/* the large photo at the top: darker at its top and bottom so the text reads, title in the heading font */
.intro.intro-dynamic { position: relative; }
.intro.intro-dynamic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 24, 31, 0.40) 0%, rgba(8, 24, 31, 0) 28%, rgba(8, 24, 31, 0) 50%, rgba(8, 24, 31, 0.62) 100%);
  pointer-events: none;
}
.intro.intro-dynamic .intro-text {
  z-index: 1;
  top: auto;
  bottom: 18%;
  padding: 0 clamp(20px, 6vw, 96px);
}
.intro.intro-dynamic .intro-text p { text-align: left; margin: 0; }
.intro.intro-dynamic .intro-text span {
  display: block;
  max-width: 14ch;
  padding: 0;
  border-radius: 0;
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(44px, 6.6vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.28);
}
.intro.intro-dynamic .intro-text b { font-weight: 500; }
/* phones: the photo starts right under the header */
@media only screen and (max-width: 767px) {
  .main:has(.main-content > div.intro:first-of-type) { padding-top: 0; }
  .intro.intro-dynamic .intro-text { bottom: 22%; }
}

/* the search bar across the bottom of the top photo (home page) */
.cw-search {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: -64px auto 0;
  padding: 0 clamp(16px, 4vw, 40px);
  box-sizing: border-box;
}
/* the date calendar opened from the search bar: its layer goes above the fixed menu while it is open (decision Giorgos 2026-11-01) */
.cw-search:has(.pickerpopup[style*="block"]) { z-index: 200; }
.cw-searchbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr) max-content;
  align-items: stretch;
  margin: 0;
  background: var(--cw-surface);
  border-radius: 3px;
  box-shadow: 0 24px 60px rgba(16, 48, 60, 0.16);
}
.cw-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 14px 22px;
  border-right: 1px solid var(--cw-line);
}
.cw-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cw-muted); }
/* arrival and nights: the label with the calendar on top, the values below in the heading font */
.cw-field-dates .datepicker {
  display: grid;
  grid-template-columns: auto auto auto 28px auto auto;
  justify-content: start;
  align-items: center;
  column-gap: 14px;
  row-gap: 4px;
  line-height: 1.3;
}
.cw-field-dates .datepicker br { display: none; }
.cw-field-dates .picker-checkin { grid-column: 1 / 4; grid-row: 1; }
.cw-field-dates .picker-checkout { grid-column: 5 / 7; grid-row: 1; }
.cw-field-dates select[name="d"] { grid-column: 1; grid-row: 2; }
.cw-field-dates select[name="m"] { grid-column: 2; grid-row: 2; }
.cw-field-dates select[name="y"] { grid-column: 3; grid-row: 2; }
.cw-field-dates select[name="dt"] { grid-column: 5; grid-row: 2; }
.cw-field-dates .datepicker > span { grid-column: 6; grid-row: 2; font-size: 15px; font-weight: 400; color: var(--cw-muted); white-space: nowrap; }
.cw-field-dates .pickerpopupopener {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  color: var(--cw-muted);
  text-decoration: none;
}
.cw-field-dates .pickerpopupopener .bitter { font-size: 11px; letter-spacing: 0.2em; color: var(--cw-muted); }
.cw-field-dates .picker-icon { width: 20px; height: 20px; opacity: 0.75; }
/* the drop-downs of the bar: no grey box, the value large in the heading font with a fine arrow
   (the arrow is a file: the content security policy allows no data: images) */
.cw-searchbar select,
.cw-field-dates .datepicker select {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 2px 22px 4px 0;
  border: 0;
  border-bottom: 1px solid var(--cw-line);
  border-radius: 0;
  background: transparent url(../images/cw-chevron.svg) no-repeat right 2px center;
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--cw-ink);
  cursor: pointer;
}
.cw-searchbar select:hover, .cw-searchbar select:focus { border-bottom-color: var(--cw-primary); outline: none; }
.cw-searchbar .cw-field-hotel select { width: 100%; padding-right: 26px; }
.cw-field-dates select[name="d"], .cw-field-dates select[name="dt"] { width: 3.1em; }
.cw-field-dates select[name="m"] { width: 6.6em; }
.cw-field-dates select[name="y"] { width: 3.9em; }
@supports (field-sizing: content) {
  .cw-field-dates .datepicker select { field-sizing: content; width: auto; min-width: 2.2em; }
}
/* the opened list of a drop-down: room around each entry, in the text font (also the dates in BOOK NOW) */
:is(.cw-searchbar, form.cw-book) select option {
  padding: 10px 16px;
  font-family: "CW Text", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--cw-ink);
  background-color: #FFFFFF;
}
/* browsers that let pages draw the opened list (Chrome, Edge): a white panel with a soft shadow */
@supports (appearance: base-select) {
  .cw-searchbar select,
  .cw-field-dates .datepicker select,
  :is(.cw-searchbar, form.cw-book) select::picker(select) { appearance: base-select; }
  .cw-searchbar select::picker-icon,
  .cw-field-dates .datepicker select::picker-icon { display: none; }
  :is(.cw-searchbar, form.cw-book) select::picker(select) {
    margin-top: 6px;
    padding: 8px 0;
    border: 1px solid var(--cw-line);
    border-radius: 3px;
    background: #FFFFFF;
    box-shadow: 0 18px 40px rgba(16, 48, 60, 0.16);
  }
  :is(.cw-searchbar, form.cw-book) select option { padding: 10px 22px; }
  :is(.cw-searchbar, form.cw-book) select option::checkmark { display: none; }
  :is(.cw-searchbar, form.cw-book) select option:hover,
  :is(.cw-searchbar, form.cw-book) select option:focus-visible { background-color: var(--cw-tint); outline: none; }
  :is(.cw-searchbar, form.cw-book) select option:checked { font-weight: 600; color: var(--cw-primary); }
  /* hotels: the category on a second line, small; the closed field shows only the name */
  .cw-field-hotel select option { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  .cw-opt-sep { display: none; }
  .cw-field-hotel select optgroup {
    padding-top: 6px;
    font-family: "CW Text", "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--cw-muted);
  }
  .cw-field-hotel select optgroup::label,
  .cw-field-hotel select optgroup legend { display: block; padding: 10px 22px 2px; font-size: 13px; font-weight: 400; color: var(--cw-muted); }
  .cw-field-hotel select optgroup option { color: var(--cw-ink); }
  .cw-opt-sub { font-size: 13px; font-weight: 400; font-style: italic; color: var(--cw-muted); }
  .cw-field-hotel selectedcontent .cw-opt-sub,
  .cw-field-hotel selectedcontent .cw-opt-sep { display: none; }
  .cw-searchbar.modernform .cw-select-btn {
    display: block;
    border-radius: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }
}
.cw-searchbar.modernform .cw-search-btn {
  width: auto;
  white-space: nowrap;
  min-height: 76px;
  padding: 0 32px;
  border: 0;
  border-radius: 0 3px 3px 0;
  background: var(--cw-primary);
  color: #FFFFFF;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  cursor: pointer;
}
.cw-searchbar.modernform .cw-search-btn:hover, .cw-searchbar.modernform .cw-search-btn:focus { background: var(--cw-primary-hover); }
.cw-benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--cw-muted);
}
.cw-benefits li::before { content: "\2713"; margin-right: 8px; font-weight: 600; color: var(--cw-accent); }
.cw-benefits li.cw-benefits-howto::before { content: none; }
.cw-benefits-howto a { color: var(--cw-primary); text-decoration: underline; text-decoration-color: var(--cw-accent-light); text-underline-offset: 4px; }
@media only screen and (max-width: 980px) {
  .cw-search { margin-top: -40px; }
  .cw-searchbar { grid-template-columns: minmax(0, 1fr); }
  .cw-field { border-right: 0; border-bottom: 1px solid var(--cw-line); }
  .cw-searchbar.modernform .cw-search-btn { min-height: 56px; border-radius: 0 0 3px 3px; }
  /* phones: arrival (label, then day, month, year), then the nights below */
  .cw-field-dates .datepicker { grid-template-columns: auto auto auto; row-gap: 6px; }
  .cw-field-dates .picker-checkout { grid-column: 1 / 4; grid-row: 3; margin-top: 10px; }
  .cw-field-dates select[name="dt"] { grid-column: 1; grid-row: 4; }
  .cw-field-dates .datepicker > span { grid-column: 2 / 4; grid-row: 4; }
  .cw-benefits { justify-content: flex-start; }
}

/* the intro text below it, as an editorial block */
.top-header.cw-intro { background: transparent; border: 0; padding-top: clamp(48px, 7vw, 110px); }
.cw-intro-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 80px; }
.cw-intro-head { flex: 1 1 380px; min-width: 0; }
.cw-intro-text { flex: 1 1 420px; min-width: 0; padding-top: 34px; color: var(--cw-muted); }
.cw-intro-text .f-16 { font-size: 18px; line-height: 1.75; }
.cw-eyebrow { margin: 0 0 16px; font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cw-accent); }
.cw-intro h1 { margin: 0; font-size: clamp(36px, 4.2vw, 58px); line-height: 1.15; font-weight: 500; }

/* the dark band with the two sentences after it becomes a quote on the page background */
.cw-intro + .newsarea + .longrow2 { background: transparent; color: var(--cw-primary); padding: clamp(32px, 5vw, 80px) 0; }
.cw-intro + .newsarea + .longrow2 p {
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(24px, 2.4vw, 32px) !important;
  line-height: 1.35;
}
.cw-intro + .newsarea + .longrow2 .row-app::before {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin: 0 0 8px 2%;
  background: var(--cw-accent);
}
/* the two sentences: the first as the large quote, the second in a framed card beside it */
.cw-intro + .newsarea + .longrow2 { padding-bottom: clamp(16px, 2.5vw, 40px); }
.cw-intro + .newsarea + .longrow2 .row { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 56px; }
.cw-intro + .newsarea + .longrow2 .row > .col-6 { flex: 1 1 340px; width: auto; min-width: 0; }
.cw-intro + .newsarea + .longrow2 .row > .col-6:last-child > div {
  margin: 0;
  padding: clamp(24px, 2.6vw, 40px) clamp(24px, 3vw, 44px);
  background: var(--cw-surface);
  border: 1px solid var(--cw-line);
  border-top: 3px solid var(--cw-accent);
  border-radius: 2px;
}
.cw-intro + .newsarea + .longrow2 .row > .col-6:last-child p {
  margin: 0;
  font-style: normal;
  font-size: clamp(20px, 1.8vw, 25px) !important;
  line-height: 1.45;
  color: var(--cw-ink);
}

/* ---------- Stage B, part 2: home page sections ---------- */

/* line icons written by the pages (cwIcon) */
.cw-i { width: 18px; height: 18px; flex: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* the five hotels: grouped by location, a heading line per group, large cards */
.longrow .row:has(> .col-3 > .cw-hotel-card) {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 40px;
}
.longrow .row:has(> .col-3 > .cw-hotel-card) > .col-3 { display: block; flex: 1 1 220px; width: auto; min-width: 0; }
.longrow .row:has(> .col-3 > .cw-hotel-card) > .col-3:not(:has(*)) { display: none; }
.longrow .row:has(> .col-3 > .cw-hotel-card) > .box-col {
  flex: 1 1 100%;
  display: flex;
  box-shadow: none;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 32px;
  padding: 22px 0 0;
  border-top: 1px solid var(--cw-line);
  background: transparent;
  color: var(--cw-ink);
}
.longrow .row:has(> .col-3 > .cw-hotel-card) > .box-col h3 { margin: 0; font-size: 30px; font-weight: 500; }
.longrow .row:has(> .col-3 > .cw-hotel-card) > .box-col p {
  margin: 0;
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 19px;
  color: var(--cw-muted);
}
.cw-hotel-card {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--cw-surface);
  border-radius: 3px;
  box-shadow: 0 1px 0 var(--cw-line), 0 12px 32px rgba(16, 48, 60, 0.06);
}
.cw-hc-photo { position: relative; overflow: hidden; }
.cw-hc-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.6s ease; }
.cw-hotel-card:hover .cw-hc-photo img { transform: scale(1.03); }
.cw-hc-play {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(10, 30, 38, 0.35);
  color: #FFFFFF;
}
.cw-hc-play:hover, .cw-hc-play:focus { background: rgba(10, 30, 38, 0.6); color: #FFFFFF; }
/* the hotel video plays in place of the photo */
.cw-hc-video { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: contain; background: #0B1D24; }
.cw-hc-photo.cw-playing .cw-hc-play { display: none; }
.cw-hc-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 18px; }
.cw-hc-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cw-accent);
}
.cw-hc-rating { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; letter-spacing: 0.02em; text-transform: none; font-size: 14px; color: var(--cw-ink); }
.cw-hc-rating .cw-i { width: 15px; height: 15px; color: var(--cw-accent); }
.cw-hotel-card h3 { margin: 0; font-size: 30px; line-height: 1.12; font-weight: 500; }
.cw-hotel-card h3 a { color: var(--cw-ink); text-decoration: none; }
.cw-hotel-card h3 a:hover { color: var(--cw-primary); }
.cw-hc-slogan {
  margin: 0;
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  color: var(--cw-primary);
}
/* stage D2: why this hotel, in one line under the slogan */
.cw-hc-why { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--cw-ink); }
.cw-hc-why > span { margin-right: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cw-accent); }
.cw-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--cw-ink); }
.cw-facts li { display: inline-flex; align-items: center; gap: 7px; }
.cw-facts .cw-i { color: var(--cw-primary); }
.cw-hc-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 16px;
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--cw-line);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cw-hc-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; white-space: nowrap; color: var(--cw-primary); text-decoration: none; }
.cw-hc-links a.cw-hc-rates { color: var(--cw-muted); }
.cw-hc-links a:hover { color: var(--cw-accent); }

/* the two locations: a map of Crete under the heading, then the two columns */
.longrow .row-app:has(.box-col + .col-3 > .cw-hotel-card) > .rowspace + h2 {
  padding-bottom: calc(min(900px, 100%) * 0.463 + 36px);
  background: url(../images/crete-map.svg) no-repeat center bottom / min(900px, 100%) auto;
}
.longrow .row-app:has(.box-col + .col-3 > .cw-hotel-card) .col-6 .image-box { box-shadow: 0 1px 0 var(--cw-line); }
.longrow .row-app:has(.box-col + .col-3 > .cw-hotel-card) .col-6 a.longbutton.button-gray:not(.modalopener) {
  display: block;
  margin: 0;
  padding: 14px 4px;
  border: 0;
  border-bottom: 1px solid var(--cw-line);
  border-radius: 0;
  background: transparent;
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-size: 21px;
  line-height: 1.3;
  color: var(--cw-ink);
  letter-spacing: 0;
}
.longrow .row-app:has(.box-col + .col-3 > .cw-hotel-card) .col-6 a.longbutton.button-gray:not(.modalopener) .f-12 {
  display: inline-block;
  margin-top: 4px;
  line-height: 1.5;
  font-family: "CW Text", "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  color: var(--cw-muted);
}
.longrow .row-app:has(.box-col + .col-3 > .cw-hotel-card) .col-6 a.longbutton.button-gray:not(.modalopener):hover { color: var(--cw-primary); background: transparent; }
/* «view short video clip» under the location photos: a small link, not a grey bar */
.longrow .row-app:has(.box-col + .col-3 > .cw-hotel-card) .col-6 a.modalopener.longbutton {
  display: inline-flex;
  width: auto;
  margin: 4px 0 8px;
  padding: 8px 14px;
  border: 1px solid var(--cw-line);
  border-radius: 2px;
  background: transparent;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--cw-primary);
}

/* moods: photo tiles on the dark band, the other moods as links */
.cw-moods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 8px; }
@media only screen and (max-width: 980px) { .cw-moods { grid-template-columns: repeat(2, 1fr); } }
.cw-mood { position: relative; display: block; overflow: hidden; border-radius: 3px; color: #FFFFFF; text-decoration: none; }
.cw-mood img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s ease; }
.cw-mood:hover img, .cw-mood:focus img { transform: scale(1.04); }
.cw-mood::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 24, 31, 0) 45%, rgba(8, 24, 31, 0.72) 100%); }
.cw-mood-tag {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  z-index: 1;
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 24px;
  color: #FFFFFF;
}
.longrow2 .cw-mood:hover, .longrow2 .cw-mood:focus { color: #FFFFFF; text-decoration: none; }
.cw-moods-more { margin-top: 20px; }
/* stage D2b: a simple title for each mood, with the hashtag small beside it (tiles, small links, the title of a mood page) */
.cw-mood-tag { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.cw-mood-tag .cw-mood-hash { font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-style: normal; font-size: 12px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.82); }
.filter-area .cw-mood-hash { margin-left: 2px; font-size: 11.5px; color: var(--cw-muted); }
.filter-area a.filter-selected .cw-mood-hash { color: rgba(255, 255, 255, 0.78); }
.cw-h-hash { display: inline-block; margin-left: 10px; font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-style: normal; font-size: 0.34em; font-weight: 400; letter-spacing: 0.04em; vertical-align: middle; color: var(--cw-muted); }

/* small link buttons (moods, experiences) */
.filter-area a {
  padding: 8px 16px 7px;
  border: 1px solid var(--cw-line);
  border-radius: 20px;
  background: var(--cw-surface);
  color: var(--cw-ink);
}
.filter-area a:hover, .filter-area a.filter-selected { background: var(--cw-sand); color: var(--cw-ink); }
.longrow2 .filter-area a { background: transparent; border-color: rgba(255, 255, 255, 0.4); color: #FFFFFF; }
.longrow2 .filter-area a:hover { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }

/* guest reviews: quotes in cards */
.row:has(> [class*="col-"] > [id^="guestreview-"]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}
.row:has(> [class*="col-"] > [id^="guestreview-"]) > [class*="col-"] { display: block; width: auto; }
[id^="guestreview-"] {
  height: 100%;
  margin: 0 !important;
  padding: 28px;
  box-sizing: border-box;
  background: var(--cw-ground);
  border-radius: 3px;
}
[id^="guestreview-"] > a:first-child { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cw-accent); }
[id^="guestreview-"] h3 {
  margin: 10px 0 12px;
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 24px;
  line-height: 1.3;
}
[id^="guestreview-"] h3::before { content: "\201C"; }
[id^="guestreview-"] h3::after { content: "\201D"; }
[id^="guestreview-"] p { font-size: 15px; line-height: 1.7; color: var(--cw-muted); }
.row-app:has(> #reviews) h2.silver { color: var(--cw-ink); }
/* stage D2: an excerpt, with the link to the whole review (hotel and source in sight) at the foot of the card */
.cw-review { display: flex; flex-direction: column; }
[id^="guestreview-"].cw-review p { margin: 0; }
[id^="guestreview-"].cw-review p.cw-review-src { margin-top: auto; padding-top: 16px; }
.cw-review-src a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--cw-primary); text-decoration: underline; text-decoration-color: var(--cw-accent-light); text-underline-offset: 4px; }
.cw-review-src .cw-i { width: 14px; height: 14px; }

/* phones: the west of the map at double size, two columns for moods and restaurants */
@media only screen and (max-width: 767px) {
  .longrow .row-app:has(.box-col + .col-3 > .cw-hotel-card) > .rowspace + h2 {
    padding-bottom: calc(100% * 0.926 + 24px);
    background-size: 200% auto;
    background-position: 14% bottom;
  }
  .cw-moods { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cw-mood-tag { left: 10px; right: 10px; bottom: 8px; font-size: 17px; line-height: 1.2; }
  .row-app:has(> #restaurants) .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
  .row-app:has(> #restaurants) .row > .col-3 { width: auto; margin: 0; }
  .row-app:has(> #restaurants) .image-box { height: 100%; margin: 0; min-height: 0; }
  .row-app:has(> #restaurants) .image-box h3 { font-size: 15px; }
}

/* narrow cards (four in a row): smaller title, links may wrap */
@container (max-width: 300px) {
  .cw-hc-body { padding: 20px 20px 14px; }
  .cw-hotel-card h3 { font-size: 24px; }
  .cw-hc-slogan { font-size: 16px; }
  .cw-hc-links { gap: 0 14px; font-size: 12px; letter-spacing: 0.08em; }
}
/* tablets: two cards per row */
@media only screen and (min-width: 768px) and (max-width: 980px) {
  .longrow .row:has(> .col-3 > .cw-hotel-card) > .col-3 { flex: 1 1 calc(50% - 16px); max-width: calc(50% - 16px); }
}

/* home: every hotel card the same size, two per row. In a group of three (Georgioupolis) the first card
   (Harmony) stands alone in the middle and the other two sit below it */
@media only screen and (min-width: 768px) {
  .longrow .row:has(> .box-col + .col-3 > .cw-hotel-card) { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .longrow .row:has(> .box-col + .col-3 > .cw-hotel-card) > .col-3 { grid-column: span 2; max-width: none; }
  .longrow .row:has(> .box-col + .col-3 > .cw-hotel-card) > .box-col { grid-column: 1 / -1; }
  /* Harmony across the whole width as a wide card, Princess and Beach below it (decision Giorgos 2026-11-01, as on the hotels page) */
  .longrow .row:has(> .box-col ~ .col-3:nth-child(4) > .cw-hotel-card) > .col-3:nth-child(2) { grid-column: 1 / -1; }
}

/* ---------- Stage C: hotel pages ---------- */

/* the top: the title of the hotel with a booking card beside it */
.cw-hotel-top { padding: clamp(24px, 3vw, 40px) 0 clamp(32px, 4vw, 56px); background: var(--cw-ground); }
.cw-hotel-top .breadcrumb { margin-bottom: clamp(16px, 2vw, 28px); font-size: 13px; }
.cw-ht-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: clamp(32px, 5vw, 72px); align-items: start; }
.cw-ht-main .cw-eyebrow { margin-bottom: 14px; line-height: 1.6; }
.cw-ht-place { letter-spacing: 0.16em; }
.cw-hotel-top h1 {
  margin: 0;
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 4.4vw, 64px);
  font-weight: 500;
  line-height: 1.15;
  color: var(--cw-ink);
  text-wrap: balance;
}
.cw-ht-slogan {
  max-width: 38em;
  margin: 18px 0 0;
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.45;
  color: var(--cw-primary);
}
.cw-ht-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 22px 0 0; font-size: 15px; color: var(--cw-ink); }
.cw-ht-score { display: inline-flex; align-items: center; gap: 6px; }
.cw-ht-score .cw-i { color: var(--cw-accent); }
.cw-ht-rating a { color: var(--cw-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--cw-line); }
.cw-ht-rating a:hover { text-decoration-color: currentColor; }
.cw-ht-award { padding: 3px 10px; border: 1px solid var(--cw-accent-light); border-radius: 20px; font-size: 13px; color: var(--cw-accent); }
.cw-ht-main .cw-facts { gap: 10px 26px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--cw-line); font-size: 15px; }
.cw-ht-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 24px 0 0; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.cw-ht-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--cw-primary); text-decoration: none; }
.cw-ht-links a:hover { color: var(--cw-accent); }

/* the booking card */
.cw-ht-book {
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--cw-surface);
  border: 1px solid var(--cw-line);
  border-radius: 3px;
  box-shadow: 0 24px 60px rgba(16, 48, 60, 0.10);
}
.cw-bc-from { margin: 0; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cw-muted); }
.cw-bc-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 6px 0 0; font-size: 15px; color: var(--cw-ink); }
.cw-bc-price s { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 22px; color: var(--cw-muted); }
.cw-bc-rate { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 46px; font-weight: 500; line-height: 1; }
.cw-bc-price a { color: var(--cw-ink); }
.cw-bc-per { font-size: 14px; color: var(--cw-muted); }
.cw-bc-note { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--cw-muted); }
.cw-ht-book .cw-searchbar { display: block; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--cw-line); background: transparent; box-shadow: none; border-radius: 0; }
.cw-ht-book .cw-field { padding: 0; border-right: 0; }
/* in the narrow card: arrival on one line, the nights on the next */
.cw-ht-book .cw-field-dates .datepicker { grid-template-columns: auto auto auto 1fr; column-gap: 12px; }
.cw-ht-book .cw-field-dates .picker-checkin { grid-column: 1 / -1; grid-row: 1; }
.cw-ht-book .cw-field-dates select[name="d"] { grid-column: 1; grid-row: 2; }
.cw-ht-book .cw-field-dates select[name="m"] { grid-column: 2; grid-row: 2; }
.cw-ht-book .cw-field-dates select[name="y"] { grid-column: 3; grid-row: 2; }
.cw-ht-book .cw-field-dates .picker-checkout { grid-column: 1 / -1; grid-row: 3; margin-top: 12px; }
.cw-ht-book .cw-field-dates select[name="dt"] { grid-column: 1; grid-row: 4; }
.cw-ht-book .cw-field-dates .datepicker > span { grid-column: 2 / -1; grid-row: 4; }
.cw-ht-book .cw-field-dates .datepicker select { font-size: 21px; }
.cw-ht-book .cw-searchbar.modernform .cw-search-btn { display: block; width: 100%; min-height: 56px; margin-top: 20px; border-radius: 2px; }
.cw-bc-help { display: flex; flex-direction: column; gap: 4px; margin: 18px 0 0; font-size: 14px; }
.cw-bc-help a { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; color: var(--cw-primary); text-decoration: none; }
.cw-bc-help a:hover { color: var(--cw-accent); }
@media only screen and (max-width: 980px) {
  .cw-ht-grid { grid-template-columns: 1fr; }
  .cw-ht-book { max-width: 560px; }
}

/* the introduction below the title: two columns of text and the closing sentence as a large quote */
.cw-hotel-top + .newsarea + .longrow2 { padding: clamp(40px, 5vw, 80px) 0; background: var(--cw-surface); color: var(--cw-ink); }
.cw-hotel-top + .newsarea + .longrow2 .row { display: flex; flex-wrap: wrap; gap: 0 clamp(32px, 4vw, 64px); }
.cw-hotel-top + .newsarea + .longrow2 .row > .col-6 { flex: 1 1 320px; width: auto; min-width: 0; }
.cw-hotel-top + .newsarea + .longrow2 .row > .col-6 > div { margin: 0; }
.cw-hotel-top + .newsarea + .longrow2 .row p { margin: 0 0 16px; font-size: 18px !important; line-height: 1.75; color: var(--cw-ink); }
.cw-hotel-top + .newsarea + .longrow2 .row-app > p {
  max-width: 30em;
  margin: clamp(24px, 3vw, 44px) auto 0;
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--cw-line);
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(24px, 2.4vw, 32px) !important;
  line-height: 1.4;
  text-align: center;
  color: var(--cw-primary);
}
.cw-hotel-top + .newsarea + .longrow2 .row-app > p::before {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin: 0 auto 24px;
  background: var(--cw-accent);
}
@media only screen and (max-width: 767px) {
  .cw-hotel-top + .newsarea + .longrow2 .row p { font-size: 16px !important; line-height: 1.7; }
}

/* the all-inclusive board in the booking card */
.cw-bc-ai { margin: 12px 0 0; }
.cw-bc-ai a { display: inline-block; padding: 4px 12px; border: 1px solid var(--cw-accent-light); border-radius: 20px; font-size: 13px; color: var(--cw-accent); text-decoration: none; }
.cw-bc-ai a:hover { background: var(--cw-sand); }

/* hotel page, the hotel box below the introduction: the photos with the hotel, rating, dates and rate beside them,
   as one card; the help links below as a light row; room types as cards; location and highlights two panels */
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box { margin-top: 8px; background: transparent; box-shadow: none; }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  background: var(--cw-surface);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(16, 48, 60, 0.06), 0 12px 32px rgba(16, 48, 60, 0.08);
}
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-8 { flex: 1 1 560px; width: auto; min-width: 0; }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-4 { flex: 1 1 320px; width: auto; min-width: 0; }
/* the photos fill the height of the card (at least 3:2) (computers and tablets; on phones the slider keeps its own height) */
@media only screen and (min-width: 768px) {
  body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-8 { display: flex; flex-direction: column; }
  body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-8 > .splide,
  body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-8 .splide__slider { flex: 1 0 auto; display: flex; flex-direction: column; }
  body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-8 .splide__track { flex: 1 0 auto; aspect-ratio: 3 / 2; }
  body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-8 .splide__list { height: 100%; }
  /* the slider draws each photo as the background of its slide (cover) and sets the slide height inline */
  body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-8 .splide__slide { position: relative; height: 100% !important; background-size: cover !important; background-position: center !important; }
  body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-8 .splide__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-4 > .margin3 { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: clamp(22px, 2.4vw, 34px); }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-4 > .margin3 > span.bitter { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cw-accent); }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-4 h2 {
  margin: 0;
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 17px !important;
  font-weight: 400;
  line-height: 1.45;
  color: var(--cw-primary);
}
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-4 h2 > span.block { margin-bottom: 6px; font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-style: normal; font-size: 11px; letter-spacing: 0.2em; color: var(--cw-muted); }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-4 h2 > span.f-22 { display: inline-block; margin-bottom: 6px; font-style: normal; font-size: 30px; font-weight: 500; line-height: 1.12; color: var(--cw-ink); }
/* rating and category in one line */
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-4 .margin3 > .row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 12px 0; border-top: 1px solid var(--cw-line); border-bottom: 1px solid var(--cw-line); }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-4 .margin3 > .row > [class*="col-"] { width: auto; flex: 0 1 auto; }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-4 .margin3 > .row p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--cw-ink); }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-4 .margin3 > .row .rate-square { border-radius: 2px; background-color: var(--cw-accent-light); }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-4 .margin3 > .row .bitter.f-16 { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 500; }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-4 .margin3 > .row a { color: var(--cw-primary); }
/* the travel dates: a light box with the suggestion */
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-4 .margin3 > .center.f-12 > a.longbutton {
  display: block;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--cw-line);
  border-radius: 2px;
  background: var(--cw-ground);
  color: var(--cw-ink);
  text-align: left;
}
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-4 .margin3 > .center.f-12 > a.longbutton .w-600 { font-size: 11px; letter-spacing: 0.2em; color: var(--cw-muted); }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-4 .margin3 > .center.f-12 > a.longbutton .bitter { font-size: 15px; color: var(--cw-ink); }
/* the rate from */
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-4 .margin3 > p.spacep { margin: 0; text-align: left; font-size: 14px; font-weight: 400; color: var(--cw-muted); }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-4 .margin3 > p.spacep > .bitter.f-20 { margin-bottom: 4px; font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 12px !important; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cw-muted); }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-4 .margin3 > p.spacep > s { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 22px !important; color: var(--cw-muted); }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-4 .margin3 > p.spacep > .f-28 { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 44px !important; font-weight: 500; line-height: 1; color: var(--cw-ink); }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-4 .margin3 > p.spacep > .f-12.bitter { font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 13px; color: var(--cw-muted); }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-4 .margin3 > a.highlight { align-self: flex-start; padding: 4px 12px; border: 1px solid var(--cw-accent-light); border-radius: 20px; background: transparent; font-size: 13px; font-weight: 400; color: var(--cw-accent); text-decoration: none; }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-4 .margin3 > a.highlight:hover { background: var(--cw-sand); }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-4 .margin3 > p.center { margin: auto 0 0; }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type > .col-4 .margin3 > p.center > a.longbutton { display: block; margin: 0; }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:first-of-type .splide { border-radius: 0; }
/* the help links below the card: three light links instead of grey boxes */
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:has(a[data-modal="howtobook-modal"]) { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:has(a[data-modal="howtobook-modal"]) > [class*="col-"] { flex: 1 1 220px; width: auto; min-width: 0; }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:has(a[data-modal="howtobook-modal"]) a.longbutton {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  margin: 0;
  padding: 12px 16px;
  box-sizing: border-box;
  border: 1px solid var(--cw-line);
  border-radius: 3px;
  background: var(--cw-surface);
  font-family: "CW Text", "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--cw-primary);
  text-align: left;
}
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:has(a[data-modal="howtobook-modal"]) a.longbutton:hover { border-color: var(--cw-primary); color: var(--cw-ink); }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:has(a[data-modal="howtobook-modal"]) a.longbutton img { flex: none; width: 28px; height: 28px; margin: 0; }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box > .row:has(a[data-modal="howtobook-modal"]) a.longbutton br { display: none; }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .fulltab { display: none; }

/* room types: cards with photo, name, guests, rate from (also on the offers page of one hotel, which shows the same list: stage E3) */
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box div:has(> .inline-block.width24) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
  margin: clamp(40px, 5vw, 72px) 0 0;
}
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box div:has(> .inline-block.width24) > h3 {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 2.8vw, 40px) !important;
  font-weight: 500;
  line-height: 1.15;
  text-align: left;
  color: var(--cw-ink);
}
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box div:has(> .inline-block.width24) > br,
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box div:has(> .inline-block.width24) > .clear { display: none; }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .inline-block.width24 { display: block; width: auto; min-width: 0; }
body:is(:has(.cw-hotel-top), :has(.cw-ot)) .width24 .image-box {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--cw-surface);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(16, 48, 60, 0.06), 0 12px 32px rgba(16, 48, 60, 0.08);
}
body:is(:has(.cw-hotel-top), :has(.cw-ot)) .width24 .image-box > a { display: flex; flex-direction: column; height: 100%; color: var(--cw-ink); text-decoration: none; }
body:is(:has(.cw-hotel-top), :has(.cw-ot)) .width24 .image-box img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.6s ease; }
body:is(:has(.cw-hotel-top), :has(.cw-ot)) .width24 .image-box:hover img { transform: scale(1.03); }
body:is(:has(.cw-hotel-top), :has(.cw-ot)) .width24 .image-box-info { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; background: var(--cw-surface); }
body:is(:has(.cw-hotel-top), :has(.cw-ot)) .width24 .image-box-info h3 { margin: 0; font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--cw-muted); }
body:is(:has(.cw-hotel-top), :has(.cw-ot)) .width24 .image-box-info h3 .f-18 {
  display: inline-block;
  margin-bottom: 4px;
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--cw-ink);
}
body:is(:has(.cw-hotel-top), :has(.cw-ot)) .width24 .image-box-info > .f-12 { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--cw-line); font-size: 13px; line-height: 1.5; color: var(--cw-muted); }
body:is(:has(.cw-hotel-top), :has(.cw-ot)) .width24 .image-box-info > .f-12 .bitter { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 26px; font-weight: 500; color: var(--cw-ink); }
body:is(:has(.cw-hotel-top), :has(.cw-ot)) .width24 .image-box-info > .f-12 > .f-12 { display: block; margin-top: 4px; font-size: 12px; }

/* location and highlights */
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .fulltabbox { margin-top: clamp(40px, 5vw, 72px); }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .fulltabbox > .bg-white { background: transparent; }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .fulltabbox > .bg-white > .row { display: flex; flex-wrap: wrap; gap: 28px; align-items: stretch; }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .fulltabbox .col-7,
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .fulltabbox .col-5 { flex: 1 1 380px; width: auto; min-width: 0; overflow: hidden; background: var(--cw-surface); border-radius: 3px; box-shadow: 0 1px 2px rgba(16, 48, 60, 0.06), 0 12px 32px rgba(16, 48, 60, 0.08); }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .fulltabbox .col-7 .splide__slide img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .fulltabbox .margin3 { margin: 0; padding: clamp(22px, 2.4vw, 32px); }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .fulltabbox .col-7 .margin3 p { font-size: 14px; line-height: 1.7; }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .fulltabbox .col-7 .margin3 p .bitter { display: inline-block; margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cw-accent); }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .fulltabbox .col-7 .margin3 p .f-16 { font-size: 16px !important; font-weight: 400; color: var(--cw-ink); }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .fulltabbox .col-5 h3 {
  margin: 0 0 18px;
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-size: clamp(26px, 2.4vw, 34px) !important;
  font-weight: 500;
  color: var(--cw-ink);
}
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .fulltabbox .col-5 .margin3 > p:not(.center):not(.f-14) {
  position: relative;
  margin: 0;
  padding: 12px 0 12px 30px;
  border-top: 1px solid var(--cw-line);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--cw-muted);
}
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .fulltabbox .col-5 .margin3 > p:not(.center):not(.f-14)::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 17px;
  width: 16px;
  height: 16px;
  background: url(../images/cw-check.svg) no-repeat center / contain;
}
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .fulltabbox .col-5 .margin3 > p strong { font-weight: 600; color: var(--cw-ink); }
/* the dates and the rate under the highlights */
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .fulltabbox .col-5 .margin3 > .frame-col { margin: 20px 0 0; padding: 12px 14px; border: 1px solid var(--cw-line); border-radius: 2px; background: var(--cw-ground); font-size: 14px; font-weight: 400; }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .fulltabbox .col-5 .margin3 > .frame-col a { display: flex; align-items: center; gap: 10px; color: var(--cw-ink); text-decoration: none; }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .fulltabbox .col-5 .margin3 > .frame-col .box-icon img { width: 22px; height: 22px; }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .fulltabbox .col-5 .margin3 > p.f-14 { margin: 16px 0 0; font-size: 12px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cw-muted); }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .fulltabbox .col-5 .margin3 > p.f-14 > s { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 22px !important; letter-spacing: 0; text-transform: none; }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .fulltabbox .col-5 .margin3 > p.f-14 > .f-28 { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 40px !important; font-weight: 500; letter-spacing: 0; color: var(--cw-ink); }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .fulltabbox .col-5 .margin3 > p.f-14 > .f-14 { letter-spacing: 0; text-transform: none; font-size: 14px; }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .fulltabbox .col-5 .margin3 > p.center { margin: 20px 0 0; }
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .fulltabbox .col-5 .margin3 > p.center a { display: block; }

/* «view short video clip» on the photo galleries: a small light label instead of a dark bar */
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .splide a.modalopener.longbutton {
  width: auto;
  margin: 0;
  padding: 8px 14px;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--cw-primary);
}
body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .splide a.modalopener.longbutton:hover { background: #FFFFFF; color: var(--cw-accent); }
/* phones: the room types side by side, swiped */
@media only screen and (max-width: 767px) {
  body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box div:has(> .inline-block.width24) {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
  }
  body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box div:has(> .inline-block.width24) > h3 { grid-column: auto; grid-row: 1; width: calc(100vw - 40px); position: sticky; left: 0; }
  body:is(:has(.cw-hotel-top), :has(.cw-ot):where(:has(section.form-box .inline-block.width24))) section.form-box .inline-block.width24 { grid-row: 2; scroll-snap-align: start; }
  /* on the offers page the hotel box sits in a table-like row that would grow with the swiped cards and widen the page */
  body:has(.cw-ot) .longrow > .row:has(section.form-box .inline-block.width24) { display: block; }
}

/* ---------- Stage C, part 3: the stories of the hotel pages ---------- */

/* a statement inside the introduction columns (Harmony, Princess, Beach) */
.cw-hotel-top + .newsarea + .longrow2 .row p.f-22,
.cw-hotel-top + .newsarea + .longrow2 .row p.f-24,
.cw-hotel-top + .newsarea + .longrow2 .row p.f-26 {
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 30px) !important;
  line-height: 1.4;
  color: var(--cw-primary);
}

/* the jump labels between sections show the raw anchor names on tablets and phones */
body:has(.cw-hotel-top) .inlinemenu { display: none; }

/* section headings: large serif with a short ochre rule */
body:has(.cw-hotel-top) :is(.longrow, .longrow1) > .row-app > h2,
body:has(.cw-hotel-top) :is(.longrow, .longrow1) > .row-app > .row > .col-6 > :is(.margin5, .margin2) > h2 {
  max-width: 21em;
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 3vw, 44px) !important;
  font-weight: 500;
  line-height: 1.14;
  color: var(--cw-ink);
  text-wrap: balance;
}
body:has(.cw-hotel-top) :is(.longrow, .longrow1) > .row-app > h2::before,
body:has(.cw-hotel-top) :is(.longrow, .longrow1) > .row-app > .row > .col-6 > :is(.margin5, .margin2) > h2::before {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin-bottom: 18px;
  background: var(--cw-accent);
}
body:has(.cw-hotel-top) :is(.longrow, .longrow1) { padding-top: clamp(32px, 4vw, 64px); padding-bottom: clamp(32px, 4vw, 64px); }

/* the two columns of a section: photo, reading text, the closing sentence as a pull quote */
body:has(.cw-hotel-top) :is(.longrow, .longrow1) > .row-app > .row:has(> .col-6 > :is(.margin5, .margin2)) { display: flex; flex-wrap: wrap; gap: 0 clamp(28px, 4vw, 56px); }
body:has(.cw-hotel-top) :is(.longrow, .longrow1) > .row-app > .row > .col-6:has(> :is(.margin5, .margin2)) { flex: 1 1 340px; width: auto; min-width: 0; }
body:has(.cw-hotel-top) :is(.longrow, .longrow1) > .row-app > .row > .col-6 > :is(.margin5, .margin2) { margin: 0; }
body:has(.cw-hotel-top) :is(.longrow, .longrow1) > .row-app > .row > .col-6 > :is(.margin5, .margin2) > img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: 0 0 24px;
  border-radius: 3px;
}
body:has(.cw-hotel-top) :is(.longrow, .longrow1) > .row-app > .row > .col-6 > :is(.margin5, .margin2) > :is(p.f-18, p:not([class]), ul.f-18) { font-size: 17px !important; line-height: 1.8; color: var(--cw-ink); }
body:has(.cw-hotel-top) :is(.longrow, .longrow1) > .row-app > .row > .col-6 > :is(.margin5, .margin2) > p.f-22 {
  margin: 28px 0;
  padding-left: 22px;
  border-left: 2px solid var(--cw-accent);
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(21px, 1.9vw, 25px) !important;
  line-height: 1.45;
  color: var(--cw-primary);
}

/* boxes (bg-gray with a white column): the welcome of the management and short texts, as one light panel */
body:has(.cw-hotel-top) :is(.longrow, .longrow1) > .row-app > .bg-gray {
  overflow: hidden;
  background: var(--cw-surface);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(16, 48, 60, 0.06), 0 12px 32px rgba(16, 48, 60, 0.08);
}
body:has(.cw-hotel-top) :is(.longrow, .longrow1) > .row-app > .bg-gray > .row { display: flex; flex-wrap: wrap; align-items: stretch; }
body:has(.cw-hotel-top) :is(.longrow, .longrow1) > .row-app > .bg-gray > .row > [class*="col-"] { flex: 1 1 300px; width: auto; min-width: 0; background: transparent; color: var(--cw-ink); }
body:has(.cw-hotel-top) :is(.longrow, .longrow1) > .row-app > .bg-gray > .row > [class*="col-"] > .margin3 { margin: 0; padding: clamp(24px, 3vw, 44px); }
body:has(.cw-hotel-top) :is(.longrow, .longrow1) > .row-app > .bg-gray > .row > [class*="col-"] + [class*="col-"] { border-left: 1px solid var(--cw-line); }
body:has(.cw-hotel-top) :is(.longrow, .longrow1) > .row-app > .bg-gray p.f-16 { font-size: 16px; line-height: 1.75; }
/* the welcome: the photo round beside the name, the words as a quote */
body:has(.cw-hotel-top) :is(.longrow, .longrow1) > .row-app > .bg-gray > .row:has(img) > [class*="col-"]:has(> .margin3 > img) { flex: 0 1 300px; background: var(--cw-sand); }
body:has(.cw-hotel-top) :is(.longrow, .longrow1) > .row-app > .bg-gray > .row > [class*="col-"] > .margin3 > img { width: 120px; height: 120px; margin-bottom: 14px; border-radius: 50%; object-fit: cover; }
body:has(.cw-hotel-top) :is(.longrow, .longrow1) > .row-app > .bg-gray > .row > [class*="col-"] > .margin3 > img ~ span { font-size: 14px; line-height: 1.5; color: var(--cw-muted); }
body:has(.cw-hotel-top) :is(.longrow, .longrow1) > .row-app > .bg-gray > .row > [class*="col-"] > .margin3 > img ~ span.f-18 { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 22px; color: var(--cw-ink); }
body:has(.cw-hotel-top) :is(.longrow, .longrow1) > .row-app > .bg-gray > .row:has(img) p.f-20 {
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(19px, 1.7vw, 22px) !important;
  line-height: 1.55;
  color: var(--cw-ink);
}

/* restaurants and bars (hotel pages and the home page): cards like the room types */
:is(body:has(.cw-hotel-top) :is(.longrow, .longrow1), .row-app:has(> #restaurants)) .row > .col-3 > .image-box.button-white {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--cw-surface);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(16, 48, 60, 0.06), 0 12px 32px rgba(16, 48, 60, 0.08);
}
body:has(.cw-hotel-top) :is(.longrow, .longrow1) > .row-app > .row:has(> .col-3 > .image-box) { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 24px; }
body:has(.cw-hotel-top) :is(.longrow, .longrow1) > .row-app > .row > .col-3:has(> .image-box) { width: auto; min-width: 0; }
:is(body:has(.cw-hotel-top) :is(.longrow, .longrow1), .row-app:has(> #restaurants)) .row > .col-3 > .image-box.button-white > a { display: flex; flex-direction: column; height: 100%; color: var(--cw-ink); text-decoration: none; }
:is(body:has(.cw-hotel-top) :is(.longrow, .longrow1), .row-app:has(> #restaurants)) .row > .col-3 > .image-box.button-white img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.6s ease; }
:is(body:has(.cw-hotel-top) :is(.longrow, .longrow1), .row-app:has(> #restaurants)) .row > .col-3 > .image-box.button-white:hover img { transform: scale(1.03); }
:is(body:has(.cw-hotel-top) :is(.longrow, .longrow1), .row-app:has(> #restaurants)) .row > .col-3 > .image-box.button-white .image-box-info { flex: 1; padding: 18px 20px 20px; background: var(--cw-surface); }
:is(body:has(.cw-hotel-top) :is(.longrow, .longrow1), .row-app:has(> #restaurants)) .row > .col-3 > .image-box.button-white .image-box-info h3 { margin: 0 0 10px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 22px !important; font-weight: 500; line-height: 1.25; color: var(--cw-ink); }
:is(body:has(.cw-hotel-top) :is(.longrow, .longrow1), .row-app:has(> #restaurants)) .row > .col-3 > .image-box.button-white .image-box-info p { margin: 0; padding-top: 10px; border-top: 1px solid var(--cw-line); font-size: 13px; line-height: 1.5; color: var(--cw-muted); }

/* frequently asked questions: an open list instead of grey buttons */
body:has(.cw-hotel-top) [itemtype*="FAQPage"] > h3 {
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 3vw, 44px) !important;
  font-weight: 500;
  text-align: left;
  color: var(--cw-ink);
}
body:has(.cw-hotel-top) [itemtype*="FAQPage"] > .row { display: flex; flex-wrap: wrap; gap: 0 clamp(28px, 4vw, 56px); }
body:has(.cw-hotel-top) [itemtype*="FAQPage"] > .row > .col-6 { flex: 1 1 340px; width: auto; min-width: 0; }
body:has(.cw-hotel-top) [itemtype*="FAQPage"] > .row > .col-6 > .margin3 { margin: 0; }
body:has(.cw-hotel-top) [itemtype*="FAQPage"] a.toggle.longbutton.button-white {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 18px 2px;
  border: 0;
  border-top: 1px solid var(--cw-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-size: 19px;
  line-height: 1.35;
  color: var(--cw-ink);
}
body:has(.cw-hotel-top) [itemtype*="FAQPage"] a.toggle.longbutton.button-white:hover { color: var(--cw-primary); }
body:has(.cw-hotel-top) [itemtype*="FAQPage"] a.toggle .chevron { flex: none; border-color: var(--cw-accent); }
body:has(.cw-hotel-top) [itemtype*="FAQPage"] .frame-col.bg-white { margin: 0; padding: 0 2px 18px 34px; background: transparent; box-shadow: none; font-size: 16px; line-height: 1.75; color: var(--cw-ink); }
body:has(.cw-hotel-top) [itemtype*="FAQPage"] a.toggle.longbutton.button-gray { display: inline-flex; width: auto; margin: 0 0 18px 34px; padding: 6px 12px; border: 1px solid var(--cw-line); border-radius: 20px; background: transparent; font-size: 12px; color: var(--cw-muted); }

/* photo sliders: the video plays over the slider (static/script/look.js) */
.splide.cw-sv-on { position: relative; }
.cw-slider-video { position: absolute; inset: 0; z-index: 20; background: #0B1D24; }
.cw-slider-video .cw-hc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cw-sv-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--cw-primary);
  font-size: 26px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}
.cw-sv-close:hover, .cw-sv-close:focus { background: #FFFFFF; color: var(--cw-accent); }

/* hotel pages, the other boxes of the story (text beside a slider or a film): light cards; the film box stays dark */
body:has(.cw-hotel-top) div.form-box {
  overflow: hidden;
  background: var(--cw-surface);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(16, 48, 60, 0.06), 0 12px 32px rgba(16, 48, 60, 0.08);
}
body:has(.cw-hotel-top) div.form-box.bg-dark { background: var(--cw-deep); color: #FFFFFF; }
body:has(.cw-hotel-top) div.form-box > .row { display: flex; flex-wrap: wrap; align-items: stretch; }
body:has(.cw-hotel-top) div.form-box > .row > [class*="col-"] { flex: 1 1 340px; width: auto; min-width: 0; }
body:has(.cw-hotel-top) div.form-box > .row > [class*="col-"] > :is(.margin2, .margin3) { margin: 0; padding: clamp(24px, 3vw, 44px); }
body:has(.cw-hotel-top) div.form-box :is(h2, h3) {
  margin: 0 0 14px;
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 2.2vw, 32px) !important;
  font-weight: 500;
  line-height: 1.2;
  color: var(--cw-ink);
}
body:has(.cw-hotel-top) div.form-box.bg-dark :is(h2, h3) { color: #FFFFFF; }
body:has(.cw-hotel-top) div.form-box.bg-dark h3 { font-style: italic; font-size: clamp(19px, 1.7vw, 23px) !important; color: var(--cw-on-deep); }
body:has(.cw-hotel-top) div.form-box p.f-16 { font-size: 16px; line-height: 1.75; }
body:has(.cw-hotel-top) div.form-box.bg-dark a { color: var(--cw-accent-light); }
/* the date form beside the rooms text: the booking card at the top and the hotel box already ask for the dates */
body:has(.cw-hotel-top) .box-col.bg-lightgray:has(> form .modernform) { display: none; }

/* photo sliders: the enlarged photos as a gallery (static/script/look.js) */
.cw-lb-open, .cw-lb-open body { overflow: hidden; }
.cw-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 24, 31, 0.95);
  touch-action: pan-y;
}
.cw-lb-figure { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; padding: 56px 72px; box-sizing: border-box; }
.cw-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 2px; user-select: none; -webkit-user-drag: none; }
.cw-lb-btn, .cw-lb-close {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}
.cw-lb-btn:hover, .cw-lb-close:hover, .cw-lb-btn:focus-visible, .cw-lb-close:focus-visible { background: rgba(255, 255, 255, 0.28); outline: none; }
.cw-lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.cw-lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.cw-lb-close { top: 14px; right: 16px; font-size: 30px; }
.cw-lb-count { position: absolute; bottom: 14px; left: 0; right: 0; margin: 0; text-align: center; font-size: 13px; letter-spacing: 0.14em; color: var(--cw-on-deep); }
.cw-lb-single .cw-lb-btn, .cw-lb-single .cw-lb-count { display: none; }
@media only screen and (max-width: 767px) {
  .cw-lb-figure { padding: 56px 8px; }
  .cw-lb-btn { top: auto; bottom: 8px; transform: none; width: 44px; height: 44px; }
  .cw-lb-prev { left: 12px; }
  .cw-lb-next { right: 12px; }
  .cw-lb-count { bottom: 22px; }
}

/* room cards: size, view and pool under the name (cwRoomFacts) */
.cw-room-facts { flex-direction: column; gap: 7px; margin: 2px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--cw-ink); }
.cw-room-facts li { align-items: flex-start; }
.cw-room-facts .cw-i { width: 16px; height: 16px; margin-top: 1px; color: var(--cw-accent); }

/* ---------- Stage C, part 8: restaurants, bars and wellness ---------- */

/* the top: section, large title, the description as a lead */
.cw-page-top { padding: clamp(24px, 3vw, 40px) 0 clamp(28px, 3.5vw, 48px); background: var(--cw-ground); }
.cw-page-top .breadcrumb { margin-bottom: clamp(16px, 2vw, 28px); font-size: 13px; }
.cw-page-top h1 {
  max-width: 22em;
  margin: 0;
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-size: clamp(36px, 4.2vw, 60px);
  font-weight: 500;
  line-height: 1.15;
  color: var(--cw-ink);
  text-wrap: balance;
}
.cw-pt-lead {
  max-width: 44em;
  margin: 18px 0 0;
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--cw-primary);
}
.cw-pt-lead p, .cw-pt-lead div { font-size: inherit !important; }

/* the content: two columns with air, headings in the heading font, reading text */
body:has(.cw-page-top) :is(.longrow, .longrow1, .longrow2, .longrow3) { padding-top: clamp(28px, 3.5vw, 56px); padding-bottom: clamp(28px, 3.5vw, 56px); }
body:has(.cw-page-top) :is(.longrow, .longrow1, .longrow2, .longrow3) > .row-app > .row:not(:has(> .col-3 > .cw-hotel-card)) { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 clamp(28px, 4vw, 56px); }
body:has(.cw-page-top) :is(.longrow, .longrow1, .longrow2, .longrow3) > .row-app > .row:not(:has(> .col-3 > .cw-hotel-card)) > [class*="col-"] { flex: 1 1 340px; width: auto; min-width: 0; }
body:has(.cw-page-top) :is(.longrow, .longrow1, .longrow2, .longrow3) > .row-app > .row > [class*="col-"] > :is(.margin2, .margin3, .margin5) { margin: 0 0 16px; }
body:has(.cw-page-top) :is(.longrow, .longrow1, .longrow2, .longrow3) > .row-app > .row .splide { border-radius: 3px; overflow: hidden; }
body:has(.cw-page-top) :is(.longrow, .longrow1, .longrow2, .longrow3) > .row-app > :is(h2, h3),
body:has(.cw-page-top) :is(.longrow, .longrow1, .longrow2, .longrow3) > .row-app > .row > [class*="col-"] > div > :is(h3, h4) {
  margin: 0 0 14px;
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: 1.2;
  color: var(--cw-ink);
}
body:has(.cw-page-top) :is(.longrow, .longrow1, .longrow2, .longrow3) > .row-app > h2 { margin-top: 8px; font-size: clamp(28px, 3vw, 40px) !important; }
body:has(.cw-page-top) :is(.longrow, .longrow1, .longrow2, .longrow3) > .row-app > h3 { margin-top: 28px; font-size: clamp(22px, 2vw, 28px) !important; color: var(--cw-primary); }
body:has(.cw-page-top) :is(.longrow, .longrow1, .longrow2, .longrow3) > .row-app > .row > [class*="col-"] > div > h3 { font-size: clamp(22px, 2vw, 28px) !important; }
body:has(.cw-page-top) :is(.longrow, .longrow1, .longrow2, .longrow3) > .row-app > .row > [class*="col-"] > div > h3.f-22 { font-style: italic; font-size: clamp(20px, 1.8vw, 24px) !important; line-height: 1.4; color: var(--cw-primary); }
body:has(.cw-page-top) :is(.longrow, .longrow1, .longrow2, .longrow3) > .row-app > .row > [class*="col-"] > div > h4 { margin-top: 18px; font-size: 21px !important; }
body:has(.cw-page-top) :is(.longrow, .longrow1, .longrow2, .longrow3) > .row-app > .row > [class*="col-"] > div > p { font-size: 16.5px; line-height: 1.75; color: var(--cw-ink); }
body:has(.cw-page-top) :is(.longrow, .longrow1, .longrow2, .longrow3) > .row-app > .row > [class*="col-"] > div > img { max-width: 100%; height: auto; border-radius: 3px; }

/* panels (menus, reservation, info boxes): light cards instead of grey boxes */
body:has(.cw-page-top) .box-col.bg-gray,
body:has(.cw-page-top) .form-box {
  margin: 0 0 24px;
  padding: clamp(20px, 2.6vw, 36px);
  overflow: hidden;
  background: var(--cw-surface);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(16, 48, 60, 0.06), 0 12px 32px rgba(16, 48, 60, 0.08);
  color: var(--cw-ink);
}
body:has(.cw-page-top) .form-box.bg-dark { background: var(--cw-deep); color: #FFFFFF; }
body:has(.cw-page-top) :is(.box-col.bg-gray, .form-box) > .row { display: flex; flex-wrap: wrap; gap: 0 clamp(20px, 3vw, 40px); }
body:has(.cw-page-top) :is(.box-col.bg-gray, .form-box) > .row > [class*="col-"] { flex: 1 1 260px; width: auto; min-width: 0; background: transparent; }
body:has(.cw-page-top) :is(.box-col.bg-gray, .form-box) > .row > [class*="col-"] > :is(.margin2, .margin3) { margin: 0; }
body:has(.cw-page-top) :is(.box-col.bg-gray, .form-box) :is(h3, h4) {
  margin: 0 0 8px;
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-size: clamp(21px, 1.8vw, 26px) !important;
  font-weight: 500;
  line-height: 1.2;
  color: var(--cw-ink);
}
body:has(.cw-page-top) .form-box.bg-dark :is(h2, h3, h4) { color: #FFFFFF; }
body:has(.cw-page-top) .box-col.bg-gray > h3:first-child { font-size: 15px !important; font-family: "CW Text", "Segoe UI", Arial, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cw-accent); }
body:has(.cw-page-top) :is(.box-col.bg-gray, .form-box) p.f-14 { font-size: 14px; line-height: 1.6; color: var(--cw-muted); }

/* menu categories: an open list (as the questions) instead of white buttons; dishes as rows with the price */
body:has(.cw-page-top) a.toggle.longbutton.button-white {
  display: block;
  margin: 0;
  padding: 14px 2px;
  border: 0;
  border-top: 1px solid var(--cw-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cw-muted);
  text-align: left;
}
body:has(.cw-page-top) a.toggle.longbutton.button-white .bitter { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 19px !important; color: var(--cw-ink); }
body:has(.cw-page-top) a.toggle.longbutton.button-white:hover .bitter { color: var(--cw-primary); }
body:has(.cw-page-top) .frame-col.bg-lightgray.margin3 {
  margin: 0;
  padding: 12px 2px;
  border-bottom: 1px dashed var(--cw-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  color: var(--cw-muted);
}
body:has(.cw-page-top) .frame-col.bg-lightgray.margin3 > .f-18 { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 18px; color: var(--cw-ink); }
body:has(.cw-page-top) .frame-col.bg-lightgray.margin3 p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; }
body:has(.cw-page-top) .frame-col.bg-lightgray.margin3 .right { margin-top: 4px; color: var(--cw-ink); }
/* the buttons that close an open list (menus, wine lists): a quiet link instead of a dark pill (decision Giorgos 2026-11-01) */
body:has(.cw-page-top) a.toggle.longbutton.button-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  margin: 6px 0 18px;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: "CW Text", "Segoe UI", Arial, sans-serif;
  font-size: 11.5px !important;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
  color: var(--cw-accent);
}
body:has(.cw-page-top) a.toggle.longbutton.button-dark * { font-family: inherit !important; font-size: inherit !important; font-weight: inherit; color: inherit; }
body:has(.cw-page-top) a.toggle.longbutton.button-dark .longbutton-text { display: inline; max-width: none; }
body:has(.cw-page-top) a.toggle.longbutton.button-dark .chevron { float: none; display: inline-flex; align-items: center; }
body:has(.cw-page-top) a.toggle.longbutton.button-dark:hover,
body:has(.cw-page-top) a.toggle.longbutton.button-dark:focus { background: transparent; color: var(--cw-primary); text-decoration: underline; text-underline-offset: 4px; }
body:has(.cw-page-top) a.toggle.longbutton.button-dark .chevron::before { border-color: currentColor; border-width: 1.5px 1.5px 0 0; }

/* the reservation and contact forms */
body:has(.cw-page-top) .modernform label { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cw-muted); }
body:has(.cw-page-top) .modernform :is(input[type="email"], input[type="tel"], input[type="text"], input[type="number"], input[type="datetime-local"], input[type="date"], textarea) {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--cw-line);
  border-radius: 2px;
  background: #FFFFFF;
  font: inherit;
  font-size: 16px;
  color: var(--cw-ink);
}
body:has(.cw-page-top) .modernform textarea { min-height: 110px; }
body:has(.cw-page-top) .modernform :is(input, textarea):focus { border-color: var(--cw-primary); outline: none; }
body:has(.cw-page-top) .modernform input[type="submit"] { width: 100%; min-height: 52px; }

/* overview pages (restaurants and bars, wellness): the venues as cards like the room types */
body:has(.cw-page-top) .row:has(> .col-3 > .image-box) { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 24px; }
body:has(.cw-page-top) .row > .col-3:has(> .image-box) { width: auto; min-width: 0; }
body:has(.cw-page-top) .row > .col-3 > .image-box {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--cw-surface);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(16, 48, 60, 0.06), 0 12px 32px rgba(16, 48, 60, 0.08);
}
body:has(.cw-page-top) .row > .col-3 > .image-box > a { display: flex; flex-direction: column; height: 100%; color: var(--cw-ink); text-decoration: none; }
body:has(.cw-page-top) .row > .col-3 > .image-box img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.6s ease; }
body:has(.cw-page-top) .row > .col-3 > .image-box:hover img { transform: scale(1.03); }
body:has(.cw-page-top) .row > .col-3 > .image-box .image-box-info { flex: 1; padding: 18px 20px 20px; background: var(--cw-surface); }
body:has(.cw-page-top) .row > .col-3 > .image-box .image-box-info :is(h2, h3) { margin: 0 0 10px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 15px !important; font-weight: 400; line-height: 1.45; color: var(--cw-muted); }
body:has(.cw-page-top) .row > .col-3 > .image-box .image-box-info :is(h2, h3) .f-18,
body:has(.cw-page-top) .row > .col-3 > .image-box .image-box-info h3.f-16 { font-size: 22px !important; font-weight: 500; color: var(--cw-ink); }
body:has(.cw-page-top) .row > .col-3 > .image-box .image-box-info p { margin: 0; padding-top: 10px; border-top: 1px solid var(--cw-line); font-size: 13px; line-height: 1.5; color: var(--cw-muted); }
body:has(.cw-page-top) .inlinemenu { display: none; }

/* ---------- Stage C, part 9: experiences, occasions, travel months, moods ---------- */

/* lists of experiences, occasions and room moods: cards in a grid instead of inline boxes */
body:has(.cw-page-top) .row-app:has(> :is(.width24, .width16) > .image-box) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
}
body:has(.cw-page-top) .row-app:has(> :is(.width24, .width16) > .image-box) > :not(.width24):not(.width16) { grid-column: 1 / -1; }
body:has(.cw-page-top) .row-app:has(> :is(.width24, .width16) > .image-box) > :is(.clear, .anchor, .spaceline) { display: none; }
body:has(.cw-page-top) .row-app > :is(.width24, .width16) { display: block; width: auto; min-width: 0; margin: 0; padding: 0; float: none; text-align: left; }
body:has(.cw-page-top) :is(.width24, .width16) > .image-box {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--cw-surface);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(16, 48, 60, 0.06), 0 12px 32px rgba(16, 48, 60, 0.08);
}
body:has(.cw-page-top) :is(.width24, .width16) > .image-box > a { display: flex; flex-direction: column; height: 100%; color: var(--cw-ink); text-decoration: none; }
body:has(.cw-page-top) :is(.width24, .width16) > .image-box img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.6s ease; }
body:has(.cw-page-top) :is(.width24, .width16) > .image-box:hover img { transform: scale(1.03); }
body:has(.cw-page-top) :is(.width24, .width16) .image-box-info { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; background: var(--cw-surface); text-align: left; }
body:has(.cw-page-top) :is(.width24, .width16) .image-box-info :is(h2, h3) { margin: 0; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 22px !important; font-weight: 500; line-height: 1.25; color: var(--cw-ink); }
body:has(.cw-page-top) :is(.width24, .width16) .image-box-info p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--cw-muted); }
body:has(.cw-page-top) :is(.width24, .width16) .image-box-info p.bitter { font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cw-accent); }
body:has(.cw-page-top) :is(.width24, .width16) .image-box-info .silver { color: var(--cw-muted); }
body:has(.cw-page-top) .width16 .image-box-info p.right { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--cw-line); text-align: left; color: var(--cw-ink); }
body:has(.cw-page-top) .width16 .image-box-info p.right .f-22 { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 26px; font-weight: 500; }
body:has(.cw-page-top) .width16 .image-box .stripe { padding: 10px 20px 16px; background: var(--cw-surface); border: 0; text-align: left; }

/* the «show more» toggle under a list */
body:has(.cw-page-top) .row-app > .spacep > a.toggle.button.button-white,
body:has(.cw-page-top) a.toggle.button.button-white { display: inline-flex; padding: 10px 22px; border: 1px solid var(--cw-line); border-radius: 2px; background: var(--cw-surface); color: var(--cw-primary); }

/* the jump list of topics and moods under a page (filter area): pills */
body:has(.cw-page-top) .longrow1 > .row-app > p.spacep > a.f-24 { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: clamp(24px, 2.4vw, 32px) !important; color: var(--cw-ink); text-decoration: none; }
body:has(.cw-page-top) .filter-area a { display: inline-block; margin: 0 6px 8px 0; }
body:has(.cw-page-top) .filter-area a.filter-selected { background: var(--cw-primary); border-color: var(--cw-primary); color: #FFFFFF; }

/* an experience: the topics on the left as a quiet list, the photos and the story */
body:has(.cw-page-top) .longrow > .row-app > .row > .col-3 > .margin2 a.longbutton:not(.toggle) {
  display: block;
  margin: 0 0 8px;
  padding: 10px 14px;
  border-radius: 2px;
  font-size: 13px;
  text-align: left;
}
body:has(.cw-page-top) .longrow > .row-app > .row > .col-3 > .margin2 a.longbutton.button-white { border: 1px solid var(--cw-line); background: var(--cw-surface); color: var(--cw-ink); }
body:has(.cw-page-top) .longrow > .row-app > .row:has(> .col-3 + .col-6 + .col-3) > .col-3 { flex: 0 1 250px !important; }
body:has(.cw-page-top) .longrow > .row-app > .row > .col-6 > .margin2.f-16 { font-size: 16.5px; line-height: 1.8; color: var(--cw-ink); }
body:has(.cw-page-top) .longrow > .row-app > .row > .col-6 > .margin2.f-16 :is(h2, h3) { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-weight: 500; color: var(--cw-ink); }
/* the old fixed heights of the list boxes: let the cards grow, the description clamped to four lines */
body:has(.cw-page-top) :is(.width24, .width16) { max-width: none; }
body:has(.cw-page-top) :is(.width24, .width16) .image-box :is(h2, h3, p) { height: auto; min-height: 0; overflow: visible; }
body:has(.cw-page-top) .width24 .image-box-info > p:not(.bitter):not(.right) { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* room moods: the hotel small, the room name in the heading font */
body:has(.cw-page-top) .width16 .image-box-info p.bitter { letter-spacing: 0.1em; line-height: 1.5; }
body:has(.cw-page-top) .width16 .image-box-info p.bitter .f-16 {
  display: block;
  margin-top: 6px;
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
  color: var(--cw-ink);
}
body:has(.cw-page-top) .width16 .image-box-info p.right { font-weight: 400; font-size: 13px; line-height: 1.6; }
body:has(.cw-page-top) .width16 .image-box-info p.right s { font-family: "CW Heading", Georgia, "Times New Roman", serif; color: var(--cw-muted); }
body:has(.cw-page-top) .width16 .image-box-info p.right .bitter.f-22 { font-size: 28px; color: var(--cw-ink); }
/* the photo band under the title of these pages carries no text: no darkening */
body:has(.cw-page-top) .newsarea + .intro.intro-dynamic::after { display: none; }
/* travel months and questions in three columns, the titles in the heading font */
body:has(.cw-page-top) :is(.longrow, .longrow1, .longrow2, .longrow3) > .row-app > .row:not(:has(> .col-3 > .cw-hotel-card)) > .col-4 { flex-basis: 280px; }
body:has(.cw-page-top) a.toggle.longbutton.button-white .longbutton-text { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 18px; color: var(--cw-ink); }
body:has(.cw-page-top) a.toggle.longbutton.button-white:hover .longbutton-text { color: var(--cw-primary); }
body:has(.cw-page-top) a.toggle.longbutton.button-white { display: flex; align-items: center; gap: 12px; }
body:has(.cw-page-top) a.toggle.longbutton.button-white .chevron { flex: none; border-color: var(--cw-accent); }
body:has(.cw-page-top) .frame-col.bg-white { margin: 0; padding: 0 2px 18px 30px; background: transparent; box-shadow: none; font-size: 16px; line-height: 1.75; color: var(--cw-ink); }
body:has(.cw-page-top) a.toggle.longbutton.button-gray { display: inline-flex; width: auto; margin: 0 0 18px 30px; padding: 6px 12px; border: 1px solid var(--cw-line); border-radius: 20px; background: transparent; font-size: 12px; color: var(--cw-muted); }

/* ---------- Stage C, part 10: careers ---------- */

/* the open positions: cards in two columns (each position is a row of status and details) */
body:has(.cw-page-top) .row-app:has(> .row > .col-2.frame-col + .col-10.frame-col) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
  gap: 24px;
  align-items: stretch;
}
body:has(.cw-page-top) .row-app:has(> .row > .col-2.frame-col + .col-10.frame-col) > :not(.row:has(> .col-2.frame-col + .col-10.frame-col)) { grid-column: 1 / -1; }
body:has(.cw-page-top) .row-app:has(> .row > .col-2.frame-col + .col-10.frame-col) > :is(.minimaltop, .spaceline, .rowspace) { display: none; }
body:has(.cw-page-top) .row-app > .row:has(> .col-2.frame-col + .col-10.frame-col) {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 0;
  overflow: hidden;
  background: var(--cw-surface);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(16, 48, 60, 0.06), 0 12px 32px rgba(16, 48, 60, 0.08);
}
body:has(.cw-page-top) .row-app > .row:has(> .col-2.frame-col + .col-10.frame-col) > [class*="col-"] { flex: none !important; width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
/* the status as a line at the top of the card: available in the accent of the brand, covered muted */
body:has(.cw-page-top) .row > .col-2.frame-col > p { margin: 0; padding: 12px 24px; font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.5; }
body:has(.cw-page-top) .row > .col-2.frame-col.bg-green > p { background: var(--cw-tint); color: var(--cw-primary); }
body:has(.cw-page-top) .row > .col-2.frame-col.bg-green > p::before { content: "\25CF"; margin-right: 8px; color: #3E8E63; }
body:has(.cw-page-top) .row > .col-2.frame-col.bg-purple > p { background: var(--cw-ground); color: var(--cw-muted); }
body:has(.cw-page-top) .row:has(> .col-2.frame-col.bg-purple) { opacity: 0.78; }
body:has(.cw-page-top) .row > .col-10.frame-col > .margin5 { margin: 0; padding: 18px 24px 24px; }
body:has(.cw-page-top) .row > .col-10.frame-col > .margin5 > a.bitter { font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cw-accent); text-decoration: none; }
body:has(.cw-page-top) .row > .col-10.frame-col > .margin5 > h3 { margin: 8px 0 10px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 25px !important; font-weight: 500; line-height: 1.2; font-style: normal !important; color: var(--cw-ink); }
body:has(.cw-page-top) .row > .col-10.frame-col > .margin5 > h3 a { color: var(--cw-ink); text-decoration: none; }
body:has(.cw-page-top) .row > .col-10.frame-col > .margin5 > h3 a:hover { color: var(--cw-primary); }
body:has(.cw-page-top) .row > .col-10.frame-col > .margin5 > h3 a::after { content: " \2192"; color: var(--cw-accent); }
body:has(.cw-page-top) .row > .col-10.frame-col > .margin5 > p { display: -webkit-box; margin: 0; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.65; color: var(--cw-muted); }

/* a position: status and photo on the left, title and terms in a card; the application next to «your role matters» */
body:has(.cw-page-top) .row:has(> .col-4 + .col-8.frame-col) { align-items: stretch !important; gap: 24px clamp(24px, 3vw, 40px) !important; }
body:has(.cw-page-top) .row > .col-4 > .frame-col { margin: 0 0 12px; padding: 0; background: transparent; box-shadow: none; }
body:has(.cw-page-top) .row > .col-4 > .frame-col.bg-green > p,
body:has(.cw-page-top) .row > .col-4 > .frame-col.bg-purple > p { margin: 0; padding: 12px 16px; border-radius: 3px; font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.5; }
body:has(.cw-page-top) .row > .col-4 > .frame-col.bg-green > p { background: var(--cw-tint); color: var(--cw-primary); }
body:has(.cw-page-top) .row > .col-4 > .frame-col.bg-green > p::before { content: "\25CF"; margin-right: 8px; color: #3E8E63; }
body:has(.cw-page-top) .row > .col-4 > .frame-col.bg-purple > p { background: var(--cw-sand); color: var(--cw-muted); }
body:has(.cw-page-top) .row > .col-4 > .frame-col img { border-radius: 3px; }
body:has(.cw-page-top) .row > .col-8.frame-col {
  margin: 0;
  padding: 0;
  background: var(--cw-surface);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(16, 48, 60, 0.06), 0 12px 32px rgba(16, 48, 60, 0.08);
  color: var(--cw-ink);
}
body:has(.cw-page-top) .row > .col-8.frame-col > :is(.margin5, .margin3) { margin: 0; padding: clamp(22px, 3vw, 40px); }
body:has(.cw-page-top) .row > .col-8.frame-col > .margin5 > br:first-child { display: none; }
body:has(.cw-page-top) .row > .col-8.frame-col a.bitter { font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cw-accent); text-decoration: none; }
body:has(.cw-page-top) .row > .col-8.frame-col h3.f-28 { margin: 8px 0 12px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: clamp(28px, 2.8vw, 38px) !important; font-weight: 500; line-height: 1.15; color: var(--cw-ink); }
body:has(.cw-page-top) .row > .col-8.frame-col p.f-16 { font-size: 16px; line-height: 1.75; }
body:has(.cw-page-top) .row > .col-4.box-col.bg-lightgray {
  margin: 0;
  padding: clamp(22px, 2.6vw, 34px);
  background: var(--cw-sand);
  border-radius: 3px;
  color: var(--cw-ink);
}
body:has(.cw-page-top) .row > .col-4.box-col.bg-lightgray > .margin3 { margin: 0; }
body:has(.cw-page-top) .row > .col-4.box-col.bg-lightgray h3 { margin: 0 0 10px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 24px !important; font-weight: 500; line-height: 1.2; }
body:has(.cw-page-top) .row > .col-4.box-col.bg-lightgray p.f-16 { font-size: 15.5px; line-height: 1.7; }
/* the application form: the title, the upload as a light drop field */
body:has(.cw-page-top) .row > .col-8.frame-col form h3.silver { margin: 0 0 16px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 22px !important; font-weight: 500; color: var(--cw-ink); }
body:has(.cw-page-top) .row > .col-8.frame-col form .button.button-white:has(input[type="file"]) {
  display: block;
  margin: 4px 0 18px;
  padding: 18px;
  border: 1px dashed var(--cw-accent-light);
  border-radius: 3px;
  background: var(--cw-ground);
  text-align: left;
  color: var(--cw-ink);
}
body:has(.cw-page-top) .row > .col-8.frame-col form .button.button-white:has(input[type="file"]) label { display: block; margin-bottom: 8px; font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cw-muted); }
body:has(.cw-page-top) .row > .col-8.frame-col form input[type="file"] { width: 100%; font: inherit; font-size: 14px; color: var(--cw-ink); }
body:has(.cw-page-top) .row > .col-8.frame-col form input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 1px solid var(--cw-primary); border-radius: 2px; background: #FFFFFF; font: inherit; font-size: 13px; color: var(--cw-primary); cursor: pointer; }
/* the job description under it: headings and lists for reading */
body:has(.cw-page-top) .longrow1 > .row-app > div.f-16 { max-width: 52em; font-size: 16.5px; line-height: 1.8; color: var(--cw-ink); }
body:has(.cw-page-top) .longrow1 > .row-app > div.f-16 :is(h2, h3, h4) { margin: 28px 0 10px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 24px; font-weight: 500; color: var(--cw-ink); }
body:has(.cw-page-top) .longrow1 > .row-app > div.f-16 li { margin-bottom: 6px; }

/* ---------- Stage C, part 11: meetings and events ---------- */

/* room set-ups (icon tiles): cards in a grid with the icon, the name, the capacity and a short use */
body:has(.cw-page-top) .row:has(> .col-2 > .margin2 > img[src*="icon-"]) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px !important;
  margin: 8px 0 24px;
}
body:has(.cw-page-top) .row:has(> .col-2 > .margin2 > img[src*="icon-"]) > .col-2 { width: auto; min-width: 0; margin: 0; }
body:has(.cw-page-top) .row > .col-2 > .margin2:has(> img[src*="icon-"]) {
  height: 100%;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 20px 18px 16px;
  background: var(--cw-surface);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(16, 48, 60, 0.06), 0 12px 32px rgba(16, 48, 60, 0.08);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cw-accent);
  text-align: left;
}
body:has(.cw-page-top) .row > .col-2 > .margin2 > img[src*="icon-"] { display: block; width: 44px; height: auto; opacity: 0.85; }
body:has(.cw-page-top) .row > .col-2 > .margin2 > br:first-of-type { display: none; }
body:has(.cw-page-top) .row > .col-2 > .margin2 > .bitter.f-20 { display: inline-block; margin: 10px 0 2px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 21px !important; color: var(--cw-ink); }
body:has(.cw-page-top) .row > .col-2 > .margin2 > p.f-14 { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--cw-line); font-size: 13.5px; line-height: 1.55; color: var(--cw-muted); }
/* section headings of the halls */
body:has(.cw-page-top) .longrow > .row-app > h2.f-32 { margin: 32px 0 18px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: clamp(30px, 3.2vw, 44px) !important; font-weight: 500; color: var(--cw-ink); }
body:has(.cw-page-top) .longrow > .row-app > h2.f-32::before { content: ""; display: block; width: 56px; height: 1px; margin-bottom: 16px; background: var(--cw-accent); }
body:has(.cw-page-top) .longrow > .row-app > p.bitter.f-18 { max-width: 46em; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-style: italic; font-size: clamp(19px, 1.7vw, 23px) !important; line-height: 1.5; color: var(--cw-primary); }
/* the dimensions line above the hall text */
body:has(.cw-page-top) .row > .col-6 > .margin3 > p.f-14:first-child { padding: 12px 16px; border: 1px solid var(--cw-line); border-radius: 2px; background: var(--cw-surface); font-size: 13.5px; line-height: 1.6; color: var(--cw-muted); }
body:has(.cw-page-top) .row > .col-6 > .margin3 > p.f-14:first-child .bitter { font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 11px !important; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cw-accent); }
body:has(.cw-page-top) .row > .col-6 > .margin3 { margin: 0; }
body:has(.cw-page-top) .row > .col-6 > .margin3 > p.f-16 { font-size: 16.5px; line-height: 1.75; color: var(--cw-ink); }
@media only screen and (max-width: 980px) { body:has(.cw-page-top) .row:has(> .col-2 > .margin2 > img[src*="icon-"]) { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Stage C, part 12: corrections from Giorgos (1/11) ---------- */

/* menu dishes and opened questions: no box, only a fine line between the rows */
body:is(:has(.cw-page-top), :has(.cw-hotel-top)) .frame-col.bg-lightgray.margin3 { border: 0; border-bottom: 1px solid var(--cw-line); border-radius: 0; }
body:is(:has(.cw-page-top), :has(.cw-hotel-top)) .frame-col.bg-lightgray.margin3:last-of-type { border-bottom: 0; }
body:is(:has(.cw-page-top), :has(.cw-hotel-top)) .frame-col.bg-white { border: 0; border-radius: 0; }
body:has(.cw-page-top) div[id].nodisplay { border: 0; }
/* a menu of the day (MAIN MENU, MONDAY …): a quiet label with an ochre rule instead of a framed box */
body:has(.cw-page-top) a.toggle.longbutton.button-brown {
  display: block;
  margin: 16px 0 6px;
  padding: 2px 0 2px 14px;
  border: 0;
  border-left: 2px solid var(--cw-accent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cw-muted);
  text-align: left;
}
body:has(.cw-page-top) a.toggle.longbutton.button-brown .f-16 { font-size: 13px !important; font-weight: 600; letter-spacing: 0.14em; color: var(--cw-ink); }
body:has(.cw-page-top) a.toggle.longbutton.button-brown:hover .f-16 { color: var(--cw-primary); }

/* the reservation box beside the title (restaurants, bars, spas with a request form) */
.cw-page-top .row-app:has(> .cw-pt-book) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); column-gap: clamp(32px, 5vw, 72px); align-items: start; }
.cw-page-top .row-app:has(> .cw-pt-book) > :not(.cw-pt-book) { grid-column: 1; }
.cw-pt-book {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: end;
  padding: 22px 24px;
  background: var(--cw-surface);
  border: 1px solid var(--cw-line);
  border-radius: 3px;
  box-shadow: 0 24px 60px rgba(16, 48, 60, 0.10);
}
.cw-ptb-hours { margin: 10px 0 0; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 19px; line-height: 1.45; color: var(--cw-ink); }
.cw-ptb-hours span { display: block; margin-bottom: 2px; font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cw-muted); }
.cw-pt-book .cw-ptb-btn { display: block; margin: 16px 0 0; padding: 14px 18px; text-align: center; }
.cw-ptb-tel { margin: 12px 0 0; font-size: 14px; color: var(--cw-muted); text-align: center; }
.cw-ptb-tel a { color: var(--cw-primary); font-weight: 600; text-decoration: none; white-space: nowrap; }
@media only screen and (max-width: 980px) {
  .cw-page-top .row-app:has(> .cw-pt-book) { display: block; }
  .cw-pt-book { max-width: 420px; margin-top: 24px; }
}

/* the information and reservation section: practical information as a sand panel, the reservation as one white card */
body:has(.cw-page-top) .row:has(> [class*="col-"] fieldset.modernform) { align-items: stretch !important; gap: 24px clamp(24px, 3vw, 40px) !important; }
body:has(.cw-page-top) .row:has(> [class*="col-"] fieldset.modernform) > .col-6:not(:has(fieldset.modernform)) > div {
  height: 100%;
  box-sizing: border-box;
  margin: 0 !important;
  padding: clamp(22px, 2.6vw, 34px);
  background: var(--cw-sand);
  border-radius: 3px;
}
body:has(.cw-page-top) .row:has(> [class*="col-"] fieldset.modernform) > .col-6:not(:has(fieldset.modernform)) :is(h3, h4) {
  margin: 22px 0 6px !important;
  font-family: "CW Text", "Segoe UI", Arial, sans-serif;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cw-accent);
}
body:has(.cw-page-top) .row:has(> [class*="col-"] fieldset.modernform) > .col-6:not(:has(fieldset.modernform)) :is(h3, h4):first-child { margin-top: 0 !important; }
body:has(.cw-page-top) .row:has(> [class*="col-"] fieldset.modernform) > .col-6:not(:has(fieldset.modernform)) p { margin: 0 0 8px; font-size: 15px; line-height: 1.65; }
body:has(.cw-page-top) .row:has(> [class*="col-"] fieldset.modernform) > .col-6:has(fieldset.modernform) > div {
  margin: 0 !important;
  padding: clamp(22px, 2.6vw, 34px);
  background: var(--cw-surface);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(16, 48, 60, 0.06), 0 12px 32px rgba(16, 48, 60, 0.08);
}
body:has(.cw-page-top) .row > .col-6:has(fieldset.modernform) > div > h3 { margin: 0 0 4px !important; font-size: clamp(26px, 2.4vw, 32px) !important; }
body:has(.cw-page-top) .row > .col-6:has(fieldset.modernform) > div > h3 .f-16 { display: block; margin-top: 4px; font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 14px !important; color: var(--cw-muted); }
body:has(.cw-page-top) .row > .col-6:has(fieldset.modernform) > div > p { font-size: 15px; line-height: 1.6; color: var(--cw-muted); }
body:has(.cw-page-top) .row > .col-6:has(fieldset.modernform) > div > p.frame-col { margin: 12px 0; padding: 10px 14px; border: 0; border-left: 2px solid var(--cw-accent); border-radius: 0; background: var(--cw-ground); color: var(--cw-ink); }
body:has(.cw-page-top) .row > .col-6:has(fieldset.modernform) > div > p a[href^="tel:"] { display: inline-block; margin: 4px 0; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 24px !important; color: var(--cw-ink); text-decoration: none; white-space: nowrap; }
body:has(.cw-page-top) .row > .col-6:has(fieldset.modernform) > div > p a[href^="tel:"]:hover { color: var(--cw-primary); }
body:has(.cw-page-top) .row > .col-6:has(fieldset.modernform) .box-col.bg-gray { margin: 16px 0 0; padding: 18px 0 0; border-top: 1px solid var(--cw-line); border-radius: 0; background: transparent; box-shadow: none; }
/* the date and the time of the table form (static/script/look.js): side by side */
.cw-dt { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.cw-dt select { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--cw-line); border-radius: 2px; background: #FFFFFF; font: inherit; font-size: 16px; color: var(--cw-ink); }
.cw-dt label { margin-bottom: 4px; }
.cw-dt { align-items: end; }
.cw-dt > p { display: flex; flex-direction: column; justify-content: flex-end; }
.cw-dt input, .cw-dt select { width: 100% !important; min-width: 0 !important; max-width: 100%; height: 48px; margin: 0; box-sizing: border-box; }
.cw-dt { column-gap: 12px; }

/* occasions, travel months and comparisons: the text first, the hotels after it */
body:has(.cw-page-top) .longrow > .row-app:has(> .row > .col-3 > .cw-hotel-card) { display: flex; flex-direction: column; }
body:has(.cw-page-top) .longrow > .row-app:has(> .row > .col-3 > .cw-hotel-card) > * { order: 1; }
body:has(.cw-page-top) .longrow > .row-app:has(> .row > .col-3 > .cw-hotel-card) > .row:not(:has(> .col-3 > .cw-hotel-card)) ~ * { order: 3; }
body:has(.cw-page-top) .longrow > .row-app:has(> .row > .col-3 > .cw-hotel-card) > :is(h2:has(+ .row > .col-3 > .cw-hotel-card), .row:has(> .col-3 > .cw-hotel-card)) { order: 2 !important; }
body:has(.cw-page-top) .longrow > .row-app:has(> .row > .col-3 > .cw-hotel-card) > h2:has(+ .row > .col-3 > .cw-hotel-card) { margin-top: 40px; }
/* the hotels three in a row and centred (Hilton, Flair, Harmony above Princess and Beach), two in a row when there are two or four */
body:has(.cw-page-top) .longrow .row:has(> .col-3 > .cw-hotel-card) { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 24px !important; }
body:has(.cw-page-top) .longrow .row:has(> .col-3 > .cw-hotel-card) > .col-3 { flex: 0 1 calc((100% - 48px) / 3); width: auto; max-width: none; margin: 0; }
body:has(.cw-page-top) .longrow .row:has(> .col-3 > .cw-hotel-card):is(:has(> .col-3:nth-child(2):last-child), :has(> .col-3:nth-child(4):last-child)) > .col-3 { flex-basis: calc((100% - 24px) / 2); max-width: 420px; }
@media (max-width: 767px) {
  body:has(.cw-page-top) .longrow .row:has(> .col-3 > .cw-hotel-card) > .col-3 { flex-basis: 100% !important; max-width: none !important; }
}

/* comparisons: the question box beside each section as a card with a tinted head */
body:has(.cw-page-top) .row > .col-5 > .form-box.bg-gray { padding: 0; }
body:has(.cw-page-top) .row > .col-5 > .form-box.bg-gray > .padding1.bg-white { padding: 18px 22px 14px; background: var(--cw-tint); }
body:has(.cw-page-top) .row > .col-5 > .form-box.bg-gray > .padding1.bg-white h3 { margin: 0 !important; font-size: 21px !important; }
body:has(.cw-page-top) .row > .col-5 > .form-box.bg-gray > .margin3 { margin: 0; padding: 18px 22px 22px; font-size: 15px; line-height: 1.7; }
body:has(.cw-page-top) :is(h2, h3) > .block.silver { display: block; margin-bottom: 4px; font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 11px !important; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cw-accent); }
body:has(.cw-page-top) .longrow > .row-app > h2.margin1 { margin: 36px 0 16px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: clamp(26px, 2.6vw, 36px) !important; font-weight: 500; color: var(--cw-ink); }
body:has(.cw-page-top) .row > .col-7 > .margin2 { margin: 0; font-size: 16.5px; line-height: 1.8; }

/* the row under the menu (dates, viewed and selected rooms, flight, log in, language): soft pills instead of hard boxes */
.header .toprow #top-date-selector-text { font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; color: var(--cw-on-deep); opacity: 0.85; }
.header .toprow .frame-col,
.header .lang .frame-col {
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-family: "CW Text", "Segoe UI", Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.header .toprow .frame-col:hover, .header .toprow .frame-col:focus,
.header .lang a.frame-col:hover, .header .lang a.frame-col:focus { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.3); color: #FFFFFF; }
.header .toprow #top-date-selector { border-color: transparent; background: rgba(255, 255, 255, 0.11); font-size: 13px; }
.header .toprow #top-date-selector time { white-space: nowrap; }
.header .toprow .frame-col.button-brown { border-color: rgba(201, 164, 106, 0.55); background: transparent; color: var(--cw-accent-light); letter-spacing: 0.12em; }
.header .toprow .frame-col.button-brown:hover, .header .toprow .frame-col.button-brown:focus { background: rgba(201, 164, 106, 0.14); color: #FFFFFF; }
.header .lang .frame-col { padding: 5px 11px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; }
.header .lang .frame-col.bg-dark { border-color: #FFFFFF; background: #FFFFFF; color: var(--cw-ink); }
/* Stage E8 (2026-11-02): the language buttons in the mobile menu, on its light background: the other language as a clear
   outlined button, the current one filled; a larger touch target (Giorgos: the other language had no contrast) */
.header .jmodal-content .lang .frame-col { padding: 9px 18px; border-color: var(--cw-line); background: #FFFFFF; font-size: 13px; color: var(--cw-ink); }
.header .jmodal-content .lang a.frame-col { border-color: var(--cw-primary); color: var(--cw-primary); text-decoration: none; }
.header .jmodal-content .lang a.frame-col:hover, .header .jmodal-content .lang a.frame-col:focus { border-color: var(--cw-primary); background: var(--cw-sand); color: var(--cw-ink); }
.header .jmodal-content .lang .frame-col.bg-dark { border-color: var(--cw-primary); background: var(--cw-primary); color: #FFFFFF; }
/* Stage E9 (2026-11-02): the top video without the browser's controls (PageSpeed: layout shift on the desktop), with a
   pause/play button in the corner in the style of the slider buttons */
.cw-vid { position: relative; }
.cw-vid > video.intro { display: block; }
.cw-vid-toggle { position: absolute; right: 18px; bottom: 18px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(244, 241, 235, 0.92); box-shadow: 0 2px 10px rgba(16, 48, 60, 0.18); color: var(--cw-ink); cursor: pointer; }
.cw-vid-toggle:hover { background: #FFFFFF; }
.cw-vid-toggle:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.cw-vid-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cw-vid-toggle .cw-vid-i-play { display: none; fill: currentColor; }
.cw-vid-toggle.is-paused .cw-vid-i-play { display: block; }
.cw-vid-toggle.is-paused .cw-vid-i-pause { display: none; }

/* Stage C, part 13: the long drop-down menus (hotels, dining, wellness) in two columns, Chania beside Georgioupolis,
   with quiet place labels instead of dashed boxes. The menu script shows a drop-down with an inline display:block. */
@media (min-width: 1100px) {
  .header .dropdown ul[style*="block"]:has(> li.menugroup + li.menugroup) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 4px;
    min-width: 560px;
    padding: 18px 22px 20px;
  }
  .header .dropdown ul:has(> li.menugroup + li.menugroup) > li:not(.menugroup),
  .header .dropdown ul:has(> li.menugroup + li.menugroup) > li.menugroup:not(:has(> .frame-col)) { grid-column: 1 / -1; }
  /* the hotels menu a little wider, so «Hilton Chania Old Town Resort & Spa» stays on one line (it opens far from the right edge) */
  .header .dropdown[data-dropdown="dropdown-crete"] ul[style*="block"]:has(> li.menugroup + li.menugroup) { min-width: 660px; }
}
.header .dropdown ul > li:not(.menugroup):first-child > a { display: block; padding-bottom: 10px; border-bottom: 1px solid var(--cw-line); font-weight: 600; }
.header .dropdown .menugroup { margin-top: 10px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.header .dropdown .menugroup > .frame-col {
  padding: 0 10px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: "CW Text", "Segoe UI", Arial, sans-serif;
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--cw-accent);
}
.header .dropdown .menugroup ol { padding: 0; }
.header .dropdown .menugroup ol a { display: block; padding: 6px 10px; line-height: 1.35; }
.header .dropdown .menugroup ol:not(.menugroup-inline) a { font-weight: 600; letter-spacing: 0.005em; }
.header .dropdown .menugroup ol a i { font-weight: 400; letter-spacing: 0; }
.header .dropdown .menugroup ol a i { display: block; margin-top: 1px; color: var(--cw-muted); font-style: normal; }
.header .dropdown .menugroup ol a br:has(+ i:empty), .header .dropdown .menugroup ol a i:empty { display: none; }
/* the hotel filters (All Inclusive Plus, Adults Oriented, ...) under both columns as a soft band */
.header .dropdown .menugroup:not(:has(> .frame-col)) { margin-top: 14px; padding: 10px 6px; border-top: 1px solid var(--cw-line); background: transparent; }
.header .dropdown .menugroup-inline li a { display: inline-block; padding: 4px 10px; font-size: 13.5px; }

/* comparisons overview: the destinations as two wide cards instead of narrow tiles on the left */
body:has(.cw-page-top) .longrow > .row-app:has(> .inline-block.width24) { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; padding-top: 48px; padding-bottom: 48px; }
body:has(.cw-page-top) .longrow > .row-app:has(> .inline-block.width24) > .clear { display: none; }
body:has(.cw-page-top) .longrow > .row-app > .inline-block.width24 { width: auto; max-width: 560px; margin: 0; padding: 0; text-align: left; }
body:has(.cw-page-top) .longrow > .row-app > .inline-block.width24 > .image-box { height: 100%; margin: 0; }
body:has(.cw-page-top) .longrow > .row-app > .inline-block.width24 .image-box-info h2 { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 24px !important; line-height: 1.25; color: var(--cw-ink); }
body:has(.cw-page-top) .longrow > .row-app > .inline-block.width24 .image-box-info p { font-size: 15px !important; line-height: 1.65; color: var(--cw-muted); }

/* Stage C, part 14 (decisions Giorgos 2026-11-01) */
/* links inside headings («Compare Crete», «amazing Crete», «best time to travel») look like links */
h2.spacep > a, h2.spacep > a:visited {
  color: var(--cw-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--cw-accent-light);
  text-underline-offset: 0.16em;
}
h2.spacep > a:hover, h2.spacep > a:focus { color: var(--cw-accent); text-decoration-color: currentColor; }
/* the mobile menu without the reading progress line */
.header .progress-container { display: none !important; }
/* the language buttons of the footer: a small gap instead of «|» */
.footer .frame-col + a.frame-col, .footer a.frame-col + .frame-col { margin-left: 6px; }

/* Stage C, part 15 (decisions Giorgos 2026-11-01) */
/* no light strip between the menu and the page: the menu stays at the top while scrolling but takes its own place in the
   page (sticky instead of fixed), so every page starts right under it on every width, already at the first paint
   (measuring it with JavaScript showed the strip for a moment, Giorgos 2026-11-01) */
.header { position: sticky; top: 0; }
.main { padding-top: 0; }
.main > .main-content { margin-top: 0 !important; }
/* the menu in one line also in German at 1231–1399 px (it wrapped «Kontakt» to a second line) */
@media only screen and (min-width: 1231px) and (max-width: 1399px) {
  .header .menu .dropdown > a, .header .menu .dropdown > span, .header .menu > a { padding-left: 7px; padding-right: 7px; }
  .header .toprow .frame-col { padding-left: 11px; padding-right: 11px; }
  .header .toprow #top-date-selector-text { letter-spacing: 0.12em; }
}

/* ---------- the hotels page (crete): map, the two places, at a glance, The Refined Inclusive™, advisors (Giorgos 2026-11-01) ---------- */
body:has(.cw-crete) .main-content > .intro.intro-dynamic { height: min(62vh, 640px); }
.cw-crete h2 { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-weight: 500; color: var(--cw-ink); }
.cw-crete .cw-i { width: 16px; height: 16px; stroke-width: 1.6; }
/* the map with the two places */
.cw-crete-map { padding: clamp(40px, 6vw, 84px) 0 0; text-align: center; }
.cw-crete-map h2 { margin: 0 0 18px; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.12; }
.cw-crete-map-img { display: block; width: min(900px, 100%); height: auto; margin: 0 auto; }
.cw-crete-places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 900px; margin: 28px auto 0; text-align: left; }
.cw-place-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px 18px;
  border-radius: 3px;
  background: var(--cw-surface);
  box-shadow: 0 1px 0 var(--cw-line), 0 12px 32px rgba(16, 48, 60, 0.06);
  color: var(--cw-ink);
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cw-place-card:hover, .cw-place-card:focus { transform: translateY(-2px); box-shadow: 0 1px 0 var(--cw-line), 0 16px 40px rgba(16, 48, 60, 0.12); color: var(--cw-ink); }
.cw-place-name { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 25px; line-height: 1.2; }
.cw-place-card .cw-place-ideal { font-size: 15px; line-height: 1.55; color: var(--cw-muted); }
.cw-place-list { font-size: 13.5px; line-height: 1.5; color: var(--cw-ink); }
.cw-place-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cw-primary); }
/* each place: photo and text, then its hotels */
.cw-place { padding-top: clamp(56px, 7vw, 104px); }
.cw-place-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: center; margin-bottom: clamp(28px, 3vw, 44px); }
.cw-place + .cw-place .cw-place-photo { order: 2; }
.cw-place-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; }
.cw-place-text .cw-eyebrow { margin-bottom: 8px; font-size: 12px; }
.cw-place-text h2 { margin: 0 0 12px; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.12; }
.cw-place-text .cw-place-ideal { margin: 0 0 14px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 21px; font-style: italic; line-height: 1.45; color: var(--cw-primary); }
.cw-place-text p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--cw-ink); }
.cw-place-hotels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cw-place-hotels > .cw-hc-wide { grid-column: 1 / -1; }
/* Harmony as a wide card: the photo on the left, the details on the right */
:is(.cw-hc-wide, .longrow .row:has(> .box-col ~ .col-3:nth-child(4) > .cw-hotel-card) > .col-3:nth-child(2)) .cw-hotel-card { flex-direction: row; }
:is(.cw-hc-wide, .longrow .row:has(> .box-col ~ .col-3:nth-child(4) > .cw-hotel-card) > .col-3:nth-child(2)) .cw-hc-photo { flex: 0 0 56%; }
:is(.cw-hc-wide, .longrow .row:has(> .box-col ~ .col-3:nth-child(4) > .cw-hotel-card) > .col-3:nth-child(2)) :is(.cw-hc-photo > a:not(.cw-hc-play), .cw-hc-photo img) { height: 100%; }
:is(.cw-hc-wide, .longrow .row:has(> .box-col ~ .col-3:nth-child(4) > .cw-hotel-card) > .col-3:nth-child(2)) .cw-hc-photo img { aspect-ratio: auto; min-height: 380px; }
:is(.cw-hc-wide, .longrow .row:has(> .box-col ~ .col-3:nth-child(4) > .cw-hotel-card) > .col-3:nth-child(2)) .cw-hc-body { justify-content: center; padding: 34px 38px 26px; }
:is(.cw-hc-wide, .longrow .row:has(> .box-col ~ .col-3:nth-child(4) > .cw-hotel-card) > .col-3:nth-child(2)) .cw-hotel-card h3 { font-size: 38px; }
/* the five hotels at a glance */
.cw-glance { padding-top: clamp(56px, 7vw, 104px); }
.cw-glance h2 { margin: 0 0 22px; font-size: clamp(28px, 3vw, 40px); }
.cw-glance-scroll { overflow-x: auto; border-radius: 3px; background: var(--cw-surface); box-shadow: 0 1px 0 var(--cw-line), 0 12px 32px rgba(16, 48, 60, 0.06); }
.cw-glance table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; color: var(--cw-ink); }
.cw-glance th, .cw-glance td { padding: 15px 16px; border-bottom: 1px solid var(--cw-line); text-align: left; vertical-align: top; }
.cw-glance thead th, .cw-glance thead td { background: var(--cw-tint); border-bottom-color: transparent; }
.cw-glance thead th { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 500; line-height: 1.25; }
.cw-glance thead th a { color: var(--cw-ink); text-decoration: none; }
.cw-glance thead th a:hover, .cw-glance thead th a:focus { color: var(--cw-primary); text-decoration: underline; text-underline-offset: 4px; }
.cw-glance tbody th { width: 130px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cw-accent); }
.cw-glance tbody tr:last-child > * { border-bottom: 0; }
.cw-glance td .cw-i { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; color: var(--cw-accent); }
.cw-glance td strong { font-weight: 600; }
.cw-glance-n { font-size: 12.5px; color: var(--cw-muted); }
/* The Refined Inclusive™ */
.cw-ri { margin-top: clamp(56px, 7vw, 104px); padding: clamp(40px, 5vw, 72px) clamp(24px, 5vw, 80px); border-radius: 3px; background: var(--cw-deep); color: #FFFFFF; text-align: center; }
.cw-ri .cw-eyebrow { margin-bottom: 10px; font-size: 12px; color: var(--cw-accent-light); }
section.cw-ri h2#cw-ri-h { margin: 0 0 12px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: clamp(34px, 4.2vw, 56px); font-weight: 500; line-height: 1.08; color: #FFFFFF; }
.cw-ri-sub { max-width: 780px; margin: 0 auto 16px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 21px; font-style: italic; line-height: 1.45; color: #E8DCC4; }
.cw-ri-text { max-width: 720px; margin: 0 auto; font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, 0.82); }
.cw-ri-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 20px; margin: 28px 0 0; }
.cw-ri-links a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1px solid rgba(201, 164, 106, 0.6); border-radius: 2px; color: #FFFFFF; font-size: 14.5px; text-decoration: none; transition: background 0.2s ease; }
.cw-ri-links a:hover, .cw-ri-links a:focus { background: rgba(201, 164, 106, 0.16); color: #FFFFFF; }
/* the booking advisors */
.cw-help { padding: clamp(56px, 7vw, 96px) 0 clamp(56px, 7vw, 104px); text-align: center; }
.cw-help h2 { margin: 0 0 10px; font-size: clamp(26px, 2.8vw, 36px); }
.cw-help > p { max-width: 640px; margin: 0 auto; font-size: 16px; line-height: 1.7; color: var(--cw-muted); }
.cw-help .cw-help-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; max-width: none; margin-top: 24px; }
.cw-help-msg { color: var(--cw-primary); text-decoration: underline; text-decoration-color: var(--cw-accent-light); text-underline-offset: 4px; }
@media only screen and (max-width: 860px) {
  .cw-crete-places, .cw-place-head, .cw-place-hotels { grid-template-columns: 1fr; }
  .cw-place + .cw-place .cw-place-photo { order: 0; }
  :is(.cw-hc-wide, .longrow .row:has(> .box-col ~ .col-3:nth-child(4) > .cw-hotel-card) > .col-3:nth-child(2)) .cw-hotel-card { flex-direction: column; }
  :is(.cw-hc-wide, .longrow .row:has(> .box-col ~ .col-3:nth-child(4) > .cw-hotel-card) > .col-3:nth-child(2)) .cw-hc-photo { flex: none; }
  :is(.cw-hc-wide, .longrow .row:has(> .box-col ~ .col-3:nth-child(4) > .cw-hotel-card) > .col-3:nth-child(2)) .cw-hc-photo img { aspect-ratio: 3 / 2; min-height: 0; }
  :is(.cw-hc-wide, .longrow .row:has(> .box-col ~ .col-3:nth-child(4) > .cw-hotel-card) > .col-3:nth-child(2)) .cw-hc-body { padding: 24px 26px 18px; }
  :is(.cw-hc-wide, .longrow .row:has(> .box-col ~ .col-3:nth-child(4) > .cw-hotel-card) > .col-3:nth-child(2)) .cw-hotel-card h3 { font-size: 30px; }
}
.cw-place-text p + p, .cw-place-text p + details { margin-top: 14px; }
.cw-place-more-text summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cw-primary); }
.cw-place-more-text summary::-webkit-details-marker { display: none; }
.cw-place-more-text summary::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.cw-place-more-text[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.cw-place-more-text p { margin-top: 12px !important; }
/* phones: the west of the map at a larger size (both places are there); the row names of the table stay visible while it scrolls */
.cw-crete-map { overflow: hidden; }
.cw-glance tbody th, .cw-glance thead td { position: sticky; left: 0; z-index: 1; background: var(--cw-surface); }
.cw-glance thead td { background: var(--cw-tint); }
@media only screen and (max-width: 600px) {
  .cw-crete-map-img { width: 190%; max-width: none; margin-left: -6%; }
  .cw-glance tbody th { width: 92px; padding-right: 10px; }
}

/* The Refined Inclusive™ on the home page (instead of «Book a feeling») and on the Hilton Chania and Harmony pages */
.cw-ri-home { background: transparent; padding: clamp(32px, 4vw, 56px) 0; }
.cw-ri-home .cw-ri { margin-top: 0; }
.cw-ri-hotel { margin: clamp(40px, 5vw, 72px) 0 clamp(40px, 5vw, 72px); }
.cw-ri-hotel .cw-ri { margin-top: 0; }
.cw-ri .cw-i { width: 16px; height: 16px; stroke-width: 1.6; }
section.cw-ri .cw-ri-sub, section.cw-ri .cw-ri-text { text-align: center; }
/* the ™ smaller and raised, in titles and in the comparison table */
.cw-tm { position: relative; top: -0.02em; margin-left: 0.03em; font-size: 0.5em; line-height: 0; vertical-align: super; letter-spacing: 0; }
.cw-glance .cw-tm { font-size: 0.7em; }
.cw-ri-more { margin: 18px 0 0; }
.cw-ri-more a { color: #E8DCC4; font-size: 14px; text-decoration: underline; text-decoration-color: rgba(201, 164, 106, 0.7); text-underline-offset: 4px; }
.cw-ri-more a:hover, .cw-ri-more a:focus { color: #FFFFFF; }
section.cw-ri .jmodal { text-align: left; color: var(--cw-ink); }

/* Stage C, part 18: Flights and Contact not floating at the right edge (decision Giorgos 2026-11-01); look.js moves them into
   the bar at the bottom of phones and tablets as two small icons (on computers that bar is hidden) */
#flight-widget-opener:not(.cw-bar-icon), #contact-modal-opener:not(.cw-bar-icon) { display: none !important; }
#sidefixed a.cw-bar-icon {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 38px !important;
  max-width: none;
  height: 34px;
  margin: 0 3px;
  padding: 0 !important;
  border: 1px solid var(--cw-line);
  border-radius: 999px;
  background: var(--cw-surface);
  box-shadow: none;
  color: var(--cw-primary);
  vertical-align: middle;
}
#sidefixed a.cw-bar-icon:hover, #sidefixed a.cw-bar-icon:focus { background: var(--cw-sand); color: var(--cw-primary); }
#sidefixed a.cw-bar-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* the bar at the bottom of phones on one line (Giorgos 2026-11-01: it wrapped at 360 px) */
#sidefixed > div { white-space: nowrap; }
#sidefixed > div > a.frame-col { padding-left: 10px; padding-right: 10px; }

/* ===================== Stage D1: the BOOK NOW window, «Our Easy Booking Process», The Refined Inclusive™ / All-Inclusive Plus
   windows and the date calendar (2026-11-01). Same forms, fields and texts; only the look changes. ===================== */
/* the shared frame of these windows: a light panel on a dark veil, a round close button */
#rate-menu, #howtobook-modal, #cw-ri-modal, .jmodal[id$="-aimodal"], #cartreminder-modal, #flight-modal, #hiltonchania-modal, #flair-modal, #harmony-modal, #princess-modal, #beach-modal { background-color: rgba(10, 26, 33, 0.66); }
:is(#rate-menu, #howtobook-modal, #cw-ri-modal, .jmodal[id$="-aimodal"], #cartreminder-modal, #flight-modal, #hiltonchania-modal, #flair-modal, #harmony-modal, #princess-modal, #beach-modal) > .jmodal-content {
  width: calc(100% - 32px);
  max-width: 1000px;
  margin: 40px auto;
  padding: 0;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--cw-ground);
  box-shadow: 0 30px 80px rgba(8, 24, 31, 0.35);
  color: var(--cw-ink);
  text-align: left;
}
:is(#rate-menu, #howtobook-modal, #cw-ri-modal, .jmodal[id$="-aimodal"], #cartreminder-modal, #flight-modal, #hiltonchania-modal, #flair-modal, #harmony-modal, #princess-modal, #beach-modal) .jmodal-head { position: absolute; top: 14px; right: 16px; left: auto; z-index: 3; width: auto; padding: 0; background: transparent; }
:is(#rate-menu, #howtobook-modal, #cw-ri-modal, .jmodal[id$="-aimodal"], #cartreminder-modal, #flight-modal, #hiltonchania-modal, #flair-modal, #harmony-modal, #princess-modal, #beach-modal) .jmodal-body { margin: 0; padding: 0; text-align: left; }
:is(#rate-menu, #howtobook-modal, #cw-ri-modal, .jmodal[id$="-aimodal"], #cartreminder-modal, #flight-modal, #hiltonchania-modal, #flair-modal, #harmony-modal, #princess-modal, #beach-modal) .modalcloser {
  float: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 30px;
  line-height: 1;
  color: var(--cw-ink);
  transition: background 0.15s ease;
}
:is(#rate-menu, #howtobook-modal, #cw-ri-modal, .jmodal[id$="-aimodal"], #cartreminder-modal, #flight-modal, #hiltonchania-modal, #flair-modal, #harmony-modal, #princess-modal, #beach-modal) .modalcloser:hover { background: rgba(23, 42, 51, 0.08); }
:is(#cw-ri-modal, .jmodal[id$="-aimodal"]) .modalcloser { color: #FFFFFF; }
:is(#cw-ri-modal, .jmodal[id$="-aimodal"]) .modalcloser:hover { background: rgba(255, 255, 255, 0.14); }

/* BOOK NOW: 1 the hotel, 2 the dates, the button and the benefits */
.cw-book fieldset.modernform { margin: 0; padding: 0; border: 0; }
.cw-book-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.cw-book-hotels { padding: 40px 36px 36px 44px; }
.cw-book-dates { display: flex; flex-direction: column; gap: 18px; padding: 40px 44px 36px 36px; border-left: 1px solid var(--cw-line); background: var(--cw-surface); }
.cw-book-step { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 25px; line-height: 1.2; color: var(--cw-ink); }
.cw-book-step span {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cw-primary);
  font-family: "CW Text", "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
}
.cw-book-place { margin: 18px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cw-accent); }
.cw-book-group { display: grid; gap: 8px; }
.cw-book-group-all { margin-top: 18px; }
form.cw-book fieldset.modernform label.cw-hotel-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--cw-line);
  border-radius: 3px;
  background: var(--cw-surface);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
form.cw-book fieldset.modernform label.cw-hotel-opt:hover { border-color: #BFB6A5; }
form.cw-book fieldset.modernform label.cw-hotel-opt { font-size: 15px; font-weight: 400; letter-spacing: 0; line-height: 1.3; text-transform: none; color: var(--cw-ink); }
.cw-book .cw-hotel-opt input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-content: center;
  flex: none;
  width: 20px !important;
  min-width: 0;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 1.5px solid #ADA595;
  border-radius: 50%;
  background: #FFFFFF;
  cursor: pointer;
}
.cw-book .cw-hotel-opt input[type="radio"]::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cw-primary); transform: scale(0); transition: transform 0.12s ease; }
.cw-book .cw-hotel-opt input[type="radio"]:checked { border-color: var(--cw-primary); }
.cw-book .cw-hotel-opt input[type="radio"]:checked::before { transform: scale(1); }
.cw-book .cw-hotel-opt input[type="radio"]:focus-visible { outline: 2px solid var(--cw-accent-light); outline-offset: 3px; }
form.cw-book fieldset.modernform label.cw-hotel-opt:has(input:checked) { border-color: var(--cw-primary); background: var(--cw-tint); box-shadow: inset 0 0 0 1px var(--cw-primary); }
.cw-opt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cw-opt-name { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--cw-ink); }
.cw-opt-sub { font-size: 12.5px; font-style: normal; line-height: 1.4; color: var(--cw-muted); }
.cw-book-cart { margin: 0; }
.cw-book-cart a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--cw-sand); font-size: 13px; color: var(--cw-ink); text-decoration: none; }
/* the dates as in the home search bar, in two rows: arrival, then nights */
.cw-book .cw-field { padding: 0; border: 0; }
.cw-book .cw-field-dates .datepicker { grid-template-columns: auto auto auto 1fr; row-gap: 6px; }
.cw-book .cw-field-dates .picker-checkin { grid-column: 1 / -1; grid-row: 1; }
.cw-book .cw-field-dates select[name="d"] { grid-column: 1; grid-row: 2; }
.cw-book .cw-field-dates select[name="m"] { grid-column: 2; grid-row: 2; }
.cw-book .cw-field-dates select[name="y"] { grid-column: 3; grid-row: 2; }
.cw-book .cw-field-dates .picker-checkout { grid-column: 1 / -1; grid-row: 3; margin-top: 16px; }
.cw-book .cw-field-dates select[name="dt"] { grid-column: 1; grid-row: 4; }
.cw-book .cw-field-dates .datepicker > span { grid-column: 2 / -1; grid-row: 4; }
.cw-book .cw-field-dates .datepicker select { font-size: 25px; }
form.cw-book fieldset.modernform button.cw-book-btn {
  width: 100%;
  min-height: 58px;
  margin: 8px 0 0;
  padding: 0 20px;
  border: 0;
  border-radius: 3px;
  background: var(--cw-primary);
  font-family: "CW Text", "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.15s ease;
}
form.cw-book fieldset.modernform button.cw-book-btn:hover, form.cw-book fieldset.modernform button.cw-book-btn:focus-visible { background: var(--cw-primary-hover); }
.cw-book-btn:focus-visible { outline: 2px solid var(--cw-accent-light); outline-offset: 3px; }
.cw-book-benefits { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cw-book-benefits li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--cw-muted); }
.cw-book-benefits .cw-i { width: 16px; height: 16px; margin-top: 2px; color: var(--cw-accent); }
/* the first benefit opens the best-rate guarantee in place (no window over the window) */
.cw-book-best details { flex: 1; min-width: 0; }
.cw-book-best summary { display: inline; cursor: pointer; list-style: none; color: var(--cw-ink); text-decoration: underline dotted var(--cw-line); text-underline-offset: 4px; }
.cw-book-best summary::-webkit-details-marker { display: none; }
.cw-book-best summary::after { content: "+"; display: inline-block; margin-left: 6px; font-weight: 600; color: var(--cw-accent); }
.cw-book-best details[open] summary::after { content: "\2212"; }
.cw-book-best summary:focus-visible { outline: 2px solid var(--cw-accent-light); outline-offset: 2px; }
.cw-book-best details p { margin: 8px 0 2px; font-size: 13.5px; line-height: 1.55; color: var(--cw-muted); }
.cw-book-links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: auto 0 0; padding-top: 6px; }
.cw-book-links a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--cw-primary); text-decoration: underline; text-decoration-color: var(--cw-accent-light); text-underline-offset: 4px; }
.cw-book-links .cw-i { width: 16px; height: 16px; }

/* «Our Easy Booking Process»: three numbered steps, the two reservation options as two cards */
#howtobook-modal > .jmodal-content { padding: 48px 56px 44px; }
.cw-howto-head { margin: 0 auto 32px; text-align: center; }
.cw-howto-head h2 { margin: 0 0 10px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: clamp(30px, 3.4vw, 40px); font-weight: 500; line-height: 1.12; color: var(--cw-ink); }
.cw-howto-head p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--cw-muted); text-wrap: balance; }
.cw-howto-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.cw-howto-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; padding: 24px 28px; border-radius: 3px; background: var(--cw-surface); box-shadow: 0 1px 0 var(--cw-line); }
.cw-howto-n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--cw-accent-light);
  border-radius: 50%;
  font-family: "CW Heading", Georgia, "Times New Roman", serif;
  font-size: 22px;
  color: var(--cw-accent);
}
.cw-howto-body h3 { margin: 8px 0 6px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 23px; font-weight: 500; line-height: 1.25; color: var(--cw-ink); }
.cw-howto-body [itemprop="text"] { font-size: 15.5px; line-height: 1.7; color: var(--cw-ink); }
.cw-howto-body ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.cw-howto-body ol li { padding: 16px 18px; border: 1px solid var(--cw-line); border-radius: 3px; background: var(--cw-ground); font-size: 14.5px; line-height: 1.6; color: var(--cw-muted); }
.cw-howto-body ol li > br { display: none; }
.cw-howto-body ol li > .bitter { display: block; margin-bottom: 4px; font-family: "CW Heading", Georgia, "Times New Roman", serif !important; font-size: 19px !important; font-weight: 500; line-height: 1.3; color: var(--cw-ink); }

/* The Refined Inclusive™ / All-Inclusive Plus: a dark head, the description beside what is included and how to book */
.cw-aim-head { padding: 52px 64px 36px; background: var(--cw-deep); text-align: center; }
.cw-aim-head h3 { margin: 0 0 12px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: clamp(32px, 4vw, 48px); font-weight: 500; line-height: 1.1; color: #FFFFFF; }
.cw-aim-head p { max-width: 720px; margin: 0 auto; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 20px; font-style: italic; line-height: 1.45; color: #E8DCC4; }
.cw-aim-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cw-aim-desc { padding: 36px 40px 40px 56px; }
.cw-aim-side { padding: 36px 56px 40px 40px; background: var(--cw-surface); }
.cw-aim-desc p, .cw-aim-incl p { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--cw-ink); }
.cw-aim-desc p + p, .cw-aim-incl p + p { margin-top: 14px; }
.cw-aim-how { display: flex; align-items: flex-start; gap: 10px; margin: 24px 0 0; padding: 14px 16px; border-left: 2px solid var(--cw-accent); background: var(--cw-ground); font-size: 14.5px; line-height: 1.6; color: var(--cw-ink); }
.cw-aim-how .cw-i { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--cw-accent); }
/* the way on to the rates, across the bottom of the window (only the window of The Refined Inclusive™ band) */
.cw-aim-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; padding: 26px 56px 30px; border-top: 1px solid var(--cw-line); background: var(--cw-ground); }
.cw-aim-cta-label { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cw-accent); }
.cw-aim-cta-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; }
a.cw-aim-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 2px; background: var(--cw-primary); font-size: 15px; font-weight: 600; color: #FFFFFF; text-decoration: none; }
a.cw-aim-btn:hover, a.cw-aim-btn:focus-visible { background: var(--cw-primary-hover); color: #FFFFFF; }
a.cw-aim-btn:focus-visible { outline: 2px solid var(--cw-accent-light); outline-offset: 3px; }
a.cw-aim-btn .cw-i { width: 16px; height: 16px; }

/* the date calendar: a white card, round day cells, the chosen day in the main colour, the stay in sand */
.pickerpopup { background-color: rgba(10, 26, 33, 0.66); }
.pickerpopup-content { width: calc(100% - 32px); max-width: 400px; margin: 64px auto; padding: 22px 22px 16px; border: 0; border-radius: 4px; background: var(--cw-surface); box-shadow: 0 30px 80px rgba(8, 24, 31, 0.35); color: var(--cw-ink); }
.pickerpopup-content .pickerpopup-head { height: 0; padding: 0; }
.pickerpopup-content .pickerpopupcloser { top: 10px; right: 12px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; font-size: 30px; line-height: 1; color: var(--cw-ink); }
.pickerpopup-content .pickerpopupcloser:hover { background: rgba(23, 42, 51, 0.08); }
.pickerpopup-content > .margin5.center { margin: 2px 0 6px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 26px !important; font-weight: 500; color: var(--cw-ink); }
.pickerpopup .calendar-container { min-height: 0; padding: 0; }
.pickerpopup .calendar-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 12px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 21px; font-weight: 500; }
.pickerpopup .calendar-header button {
  float: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--cw-line);
  border-radius: 50%;
  background: transparent;
  font-size: 17px;
  line-height: 1;
  color: var(--cw-primary);
}
.pickerpopup .calendar-header button:hover, .pickerpopup .calendar-header button:focus-visible { border-color: var(--cw-primary); background: var(--cw-tint); }
.pickerpopup .calendar-body table { border-collapse: separate; border-spacing: 2px; }
.pickerpopup .calendar-body th { padding: 6px 0; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cw-muted); }
.pickerpopup .calendar-body td { height: 42px; min-width: 0; border: 1px solid transparent; border-radius: 50%; font-size: 15px; }
.pickerpopup .calendar-body .date-cell-disabled { text-decoration: none; color: #BDB5A8; }
.pickerpopup .calendar-body .date-cell-enabled:hover { background: var(--cw-tint); }
.pickerpopup .calendar-body .date-cell-stay { border-radius: 0; background: var(--cw-sand); }
.pickerpopup .calendar-body .date-cell-current { border-color: var(--cw-primary); border-radius: 50%; background: var(--cw-primary); font-weight: 600; color: #FFFFFF; }

/* phones: the windows take the whole screen */
@media only screen and (max-width: 760px) {
  :is(#rate-menu, #howtobook-modal, #cw-ri-modal, .jmodal[id$="-aimodal"], #cartreminder-modal, #flight-modal, #hiltonchania-modal, #flair-modal, #harmony-modal, #princess-modal, #beach-modal) > .jmodal-content { width: 100%; min-height: 100%; margin: 0; border-radius: 0; }
  /* the close button stays in sight while the window scrolls, on a light disc so it shows on the dark head too */
  :is(#rate-menu, #howtobook-modal, #cw-ri-modal, .jmodal[id$="-aimodal"], #cartreminder-modal, #flight-modal, #hiltonchania-modal, #flair-modal, #harmony-modal, #princess-modal, #beach-modal) .jmodal-head { position: fixed; top: 10px; right: 10px; left: auto; width: auto; }
  :is(#rate-menu, #howtobook-modal, #cw-ri-modal, .jmodal[id$="-aimodal"], #cartreminder-modal, #flight-modal, #hiltonchania-modal, #flair-modal, #harmony-modal, #princess-modal, #beach-modal) .modalcloser { background: rgba(244, 241, 235, 0.94); box-shadow: 0 4px 14px rgba(8, 24, 31, 0.18); color: var(--cw-ink) !important; }
  .cw-book-grid { grid-template-columns: 1fr; }
  .cw-book-hotels { padding: 24px 20px 20px; }
  .cw-book-hotels .cw-book-step { padding-right: 44px; }
  /* the button stays in the flow, right under the dates and the nights, so it never covers a field (review R71-E1) */
  .cw-book-dates { padding: 22px 20px 32px; border-left: 0; border-top: 1px solid var(--cw-line); }
  .cw-book-step { font-size: 21px; }
  form.cw-book fieldset.modernform label.cw-hotel-opt { padding: 10px 14px; }
  .cw-book-place { margin-top: 14px; }
  #howtobook-modal > .jmodal-content { padding: 56px 18px 28px; }
  .cw-howto-step { grid-template-columns: 1fr; gap: 10px; padding: 20px; }
  .cw-howto-body h3 { margin-top: 0; }
  .cw-howto-body ol { grid-template-columns: 1fr; }
  .cw-aim-head { padding: 56px 22px 28px; }
  .cw-aim-body { grid-template-columns: 1fr; }
  .cw-aim-desc, .cw-aim-side { padding: 24px 22px; }
  .cw-aim-cta { padding: 22px 22px 28px; }
  .cw-aim-cta-links, a.cw-aim-btn { width: 100%; }
  a.cw-aim-btn { justify-content: space-between; }
  .pickerpopup-content { margin: 24px auto; }
}

/* ===================== Stage D3a: the offers page (booking steps, dates and guarantee, room cards) ===================== */
.cw-steps { background: var(--cw-surface); border-bottom: 1px solid var(--cw-line); }
.cw-steps ol { display: flex; flex-wrap: wrap; gap: 8px 36px; max-width: 1200px; margin: 0 auto; padding: 14px clamp(16px, 4vw, 40px); box-sizing: border-box; list-style: none; font-size: 14px; color: var(--cw-muted); }
.cw-steps li { display: inline-flex; align-items: center; gap: 10px; }
.cw-step-n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--cw-line); border-radius: 50%; font-size: 13px; }
.cw-steps .cw-step-now { font-weight: 600; color: var(--cw-ink); }
.cw-steps .cw-step-now .cw-step-n { border-color: var(--cw-primary); background: var(--cw-primary); color: #FFFFFF; }
.cw-steps .cw-step-done .cw-step-n { border-color: var(--cw-primary); color: var(--cw-primary); }
.cw-oi { padding: 0 0 8px; }
.cw-oi-dates { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 14px; font-size: 15px; color: var(--cw-ink); }
.cw-oi-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cw-muted); }
.cw-oi-dates a { color: var(--cw-primary); text-decoration: underline; text-decoration-color: var(--cw-accent-light); text-underline-offset: 4px; }
.cw-oi-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 24px; margin: 0; padding: 18px 22px; border-radius: 3px; background: var(--cw-tint); list-style: none; font-size: 14px; line-height: 1.5; color: var(--cw-ink); }
.cw-oi-values li { display: flex; align-items: flex-start; gap: 8px; }
.cw-oi-values .cw-i { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--cw-accent); }
.cw-oi-best { grid-column: 1 / -1; }
.cw-oi-best details { flex: 1; min-width: 0; }
.cw-oi-best summary { display: inline; cursor: pointer; list-style: none; font-weight: 600; text-decoration: underline dotted var(--cw-line); text-underline-offset: 4px; }
.cw-oi-best summary::-webkit-details-marker { display: none; }
.cw-oi-best summary::after { content: "+"; margin-left: 6px; color: var(--cw-accent); }
.cw-oi-best details[open] summary::after { content: "\2212"; }
.cw-oi-best details p { margin: 8px 0 0; max-width: 820px; font-size: 14px; line-height: 1.6; color: var(--cw-muted); }
/* a room in the list: photo, details, price column */
.cw-rc { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr) 260px; margin: 0 0 20px; overflow: hidden; border-radius: 3px; background: var(--cw-surface); box-shadow: 0 1px 0 var(--cw-line), 0 12px 32px rgba(16, 48, 60, 0.06); }
.cw-rc-photo { position: relative; min-height: 220px; }
.cw-rc-photo > a:first-child { position: absolute; inset: 0; display: block; }
.cw-rc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cw-rc-flag { position: absolute; top: 14px; left: 14px; padding: 3px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.94); font-size: 12px; color: var(--cw-accent); }
a.cw-rc-video { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 10px; border-radius: 18px; background: rgba(10, 30, 38, 0.55); font-size: 13px; color: #FFFFFF; text-decoration: none; }
a.cw-rc-video:hover, a.cw-rc-video:focus-visible { background: rgba(10, 30, 38, 0.8); color: #FFFFFF; }
a.cw-rc-video .cw-i { width: 16px; height: 16px; }
.cw-rc-body { display: flex; flex-direction: column; gap: 8px; padding: 24px 28px; }
.cw-rc-hotel { margin: 0; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cw-accent); }
.cw-rc h3 { margin: 0; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 27px; font-weight: 500; line-height: 1.15; }
.cw-rc h3 a { color: var(--cw-ink); text-decoration: none; }
.cw-rc h3 a:hover { color: var(--cw-primary); }
.cw-rc-in { margin: 0; font-size: 13px; }
.cw-rc-in a { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 12px; background: var(--cw-tint); color: var(--cw-primary); text-decoration: none; }
.cw-rc-in .cw-i { width: 14px; height: 14px; }
.cw-rc-sleeps, .cw-rc-board { margin: 0; font-size: 14px; line-height: 1.5; color: var(--cw-muted); }
.cw-rc-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: auto 0 0; padding-top: 6px; font-size: 14px; }
.cw-rc-links a { color: var(--cw-primary); text-decoration: underline; text-decoration-color: var(--cw-accent-light); text-underline-offset: 4px; }
.cw-rc-links a.cw-rc-ai { color: var(--cw-accent); }
.cw-rc-price { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 24px 26px; border-left: 1px solid var(--cw-line); }
.cw-rc-price p { margin: 0; }
.cw-rc-was { font-size: 17px; color: var(--cw-muted); }
.cw-rc-from { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 14px; color: var(--cw-muted); }
.cw-rc-label { flex-basis: 100%; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.cw-rc-rate { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 40px; line-height: 1; color: var(--cw-ink); }
.cw-rc-total { font-size: 13px; color: var(--cw-muted); }
.cw-rc-note { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 1.45; color: var(--cw-ink); }
.cw-rc-note .cw-i { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--cw-accent); }
a.cw-rc-btn, a.cw-rc-btn2 { display: flex; align-items: center; justify-content: center; min-height: 50px; margin-top: 12px; padding: 0 14px; border-radius: 2px; background: var(--cw-primary); font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-align: center; text-transform: uppercase; color: #FFFFFF; text-decoration: none; }
a.cw-rc-btn:hover, a.cw-rc-btn:focus-visible { background: var(--cw-primary-hover); color: #FFFFFF; }
a.cw-rc-btn2 { min-height: 44px; margin-top: 8px; border: 1px solid var(--cw-primary); background: transparent; letter-spacing: 0.02em; text-transform: none; font-size: 14px; font-weight: 500; color: var(--cw-primary); }
a.cw-rc-btn2:hover, a.cw-rc-btn2:focus-visible { background: var(--cw-tint); color: var(--cw-primary); }
.cw-rc-none { font-size: 14px; line-height: 1.5; color: var(--cw-ink); }
@media only screen and (max-width: 980px) {
  .cw-rc { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
  .cw-rc-price { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--cw-line); }
}
@media only screen and (max-width: 640px) {
  .cw-rc { grid-template-columns: 1fr; }
  .cw-rc-photo { min-height: 0; aspect-ratio: 3 / 2; }
  .cw-rc-body, .cw-rc-price { padding: 18px 18px; }
  .cw-rc h3 { font-size: 24px; }
  .cw-steps ol { gap: 6px 18px; font-size: 13px; }
}
/* the sort links of the room list as quiet pills (their text keeps its line break out) */
body:has(.cw-oi) a.button.button-narrow { display: inline-flex; align-items: center; column-gap: 0.3em; min-height: 40px; margin: 0 6px 8px 0; padding: 0 16px; border: 1px solid var(--cw-line); border-radius: 20px; background: var(--cw-surface); font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--cw-ink); }
body:has(.cw-oi) a.button.button-narrow.button-dark { border-color: var(--cw-primary); background: var(--cw-primary); color: #FFFFFF; }

/* ===================== Stage D3b: the room page (board choice as cards, the decision with the guarantee) ===================== */
body:has(.cw-oi) form[action="_cart"] p.bitter.f-24 { margin: 8px 0 14px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 30px; font-weight: 500; color: var(--cw-ink); }
body:has(.cw-oi) form[action="_cart"] .frame-col.bg-lightgray { display: grid; gap: 12px; margin: 0 0 14px; padding: 0; border: 0; background: transparent; }
body:has(.cw-oi) form[action="_cart"] .frame-col.bg-lightgray > hr { display: none; }
body:has(.cw-oi) form[action="_cart"] .frame-col.bg-lightgray > p { margin: 0; }
body:has(.cw-oi) form[action="_cart"] .frame-col.bg-lightgray > p.f-14.w-400 { padding: 0 4px; font-size: 13px; line-height: 1.55; color: var(--cw-muted); }
body:has(.cw-oi) form[action="_cart"] label.container { display: block; margin: 0; padding: 18px 20px 18px 58px; border: 1px solid var(--cw-line); border-radius: 3px; background: var(--cw-surface); font-size: 14px; line-height: 1.55; color: var(--cw-muted); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
body:has(.cw-oi) form[action="_cart"] label.container:hover { border-color: var(--cw-primary); }
body:has(.cw-oi) form[action="_cart"] label.container:has(input:checked) { border-color: var(--cw-primary); box-shadow: inset 0 0 0 1px var(--cw-primary); }
body:has(.cw-oi) form[action="_cart"] label.container:has(input:focus-visible) { outline: 2px solid var(--cw-accent-light); outline-offset: 2px; }
body:has(.cw-oi) form[action="_cart"] label.container > .bitter.f-16 { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 21px; color: var(--cw-ink); }
body:has(.cw-oi) form[action="_cart"] label.container > .bitter.f-16::first-letter { text-transform: uppercase; }
body:has(.cw-oi) form[action="_cart"] label.container > a.modalopener { margin-left: 6px; font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 13px; color: var(--cw-primary); text-decoration: underline; text-decoration-color: var(--cw-accent-light); text-underline-offset: 3px; }
body:has(.cw-oi) form[action="_cart"] label.container > .w-600 { color: var(--cw-ink); }
/* «currently on sale», «recommended choice» as small labels */
body:has(.cw-oi) form[action="_cart"] label.container > span.f-12.bitter { display: inline-block; margin-left: 6px; padding: 1px 10px; border: 1px solid currentColor; border-radius: 12px; font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 12px; letter-spacing: 0.04em; vertical-align: 1px; }
body:has(.cw-oi) form[action="_cart"] label.container > span.f-12.bitter.red { color: var(--cw-accent); }
body:has(.cw-oi) form[action="_cart"] label.container > span.f-12.bitter.green { color: var(--cw-primary); }
/* the round choice (board) and the square one (single occupancy) */
body:has(.cw-oi) form[action="_cart"] label.container .checkmark { top: 21px; left: 20px; width: 20px; height: 20px; box-sizing: border-box; border: 1.5px solid var(--cw-muted); border-radius: 50%; background: #FFFFFF; }
body:has(.cw-oi) form[action="_cart"] label.container input[type="checkbox"] ~ .checkmark { border-radius: 3px; }
body:has(.cw-oi) form[action="_cart"] label.container:hover input ~ .checkmark { background: #FFFFFF; border-color: var(--cw-primary); }
body:has(.cw-oi) form[action="_cart"] label.container input[type="radio"]:checked ~ .checkmark { border-color: var(--cw-primary); background: radial-gradient(circle, var(--cw-primary) 0 42%, #FFFFFF 46%); }
body:has(.cw-oi) form[action="_cart"] label.container input[type="radio"] ~ .checkmark::after { display: none !important; }
body:has(.cw-oi) form[action="_cart"] label.container input[type="checkbox"]:checked ~ .checkmark { border-color: var(--cw-primary); background: var(--cw-primary); }
body:has(.cw-oi) form[action="_cart"] label.container input[type="checkbox"] ~ .checkmark::after { left: 6px; top: 2px; width: 5px; height: 10px; }
/* the decision: one large button, and beside it the guarantee and the benefits */
body:has(.cw-oi) form[action="_cart"] input.cw-ro-btn { width: 100%; max-width: 520px; min-height: 56px; border: 0; border-radius: 2px; background: var(--cw-primary); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; color: #FFFFFF; cursor: pointer; }
body:has(.cw-oi) form[action="_cart"] input.cw-ro-btn:hover, body:has(.cw-oi) form[action="_cart"] input.cw-ro-btn:focus-visible { background: var(--cw-primary-hover); }
body:has(.cw-oi) form[action="_cart"] input.cw-ro-btn + * , body:has(.cw-oi) form[action="_cart"] p.spacep { color: var(--cw-muted); }
.cw-ro-values { display: grid; gap: 8px; max-width: 520px; margin: 4px 0 8px; padding: 16px 18px; border-radius: 3px; background: var(--cw-tint); list-style: none; font-size: 14px; line-height: 1.5; color: var(--cw-ink); }
.cw-ro-values li { display: flex; align-items: flex-start; gap: 8px; }
.cw-ro-values .cw-i { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--cw-accent); }
.cw-ro-values .cw-oi-best { grid-column: auto; }
/* the top of the room page: the name in the heading font, the video as a small button, «Select a room rate» as the main
   action, the help links quiet; the best-rate line is already above the list (no second green box) */
body:has(.cw-oi) section.form-box:where(:not(:has(.inline-block.width24))) .col-4 .bitter.f-24 { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 30px; font-weight: 500; line-height: 1.15; color: var(--cw-ink); }
body:has(.cw-oi) section.form-box:where(:not(:has(.inline-block.width24))) .stripe a[id^="video-modal-opener"] { position: absolute; left: 14px; top: 14px; bottom: auto; right: auto; z-index: 2; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 0; border-radius: 18px; background: rgba(10, 30, 38, 0.55); font-size: 12px; letter-spacing: 0.06em; color: #FFFFFF; }
body:has(.cw-oi) section.form-box:where(:not(:has(.inline-block.width24))) .stripe:has(> a[id^="video-modal-opener"]) { position: static; background: transparent; }
body:has(.cw-oi) section.form-box:where(:not(:has(.inline-block.width24))) .col-4 div:has(> .popupopener[data-popup^="bestprice-"]) { display: none; }
body:has(.cw-oi) section.form-box:where(:not(:has(.inline-block.width24))) a.longbutton.button-white[href="#viewrate"] { display: flex; align-items: center; justify-content: center; min-height: 52px; border: 0; border-radius: 2px; background: var(--cw-primary); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #FFFFFF; }
body:has(.cw-oi) section.form-box:where(:not(:has(.inline-block.width24))) a.longbutton.button-white[href="#viewrate"]:hover { background: var(--cw-primary-hover); color: #FFFFFF; }
body:has(.cw-oi) section.form-box:where(:not(:has(.inline-block.width24))) > .row > [class*="col-"] > a.longbutton-icon { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 12px; border: 0; background: transparent; font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 14px; font-weight: 500; color: var(--cw-primary); text-decoration: underline; text-decoration-color: var(--cw-accent-light); text-underline-offset: 4px; }
body:has(.cw-oi) section.form-box:where(:not(:has(.inline-block.width24))) > .row > [class*="col-"] > a.longbutton-icon :is(img, br) { display: none; }

/* ===================== Stage D3a-2: the offers page, the stay and the guarantee as one white card (Giorgos 2026-11-01) ===================== */
.cw-oi { padding: 0; }
.cw-oi > .row-app { padding-top: 0; padding-bottom: 0; }
.cw-oi-card { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); margin: 10px 0 0; overflow: hidden; border-radius: 3px; background: var(--cw-surface); box-shadow: 0 1px 0 var(--cw-line), 0 12px 32px rgba(16, 48, 60, 0.06); }
.cw-oi-stay { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 24px 28px; border-right: 1px solid var(--cw-line); }
.cw-oi-stay .cw-oi-label { margin: 0; }
.cw-oi-when { margin: 2px 0 0; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 24px; line-height: 1.2; color: var(--cw-ink); }
.cw-oi-nights { margin: 0; font-size: 14px; color: var(--cw-muted); }
a.cw-oi-change { display: inline-flex; align-items: center; min-height: 42px; margin-top: 12px; padding: 0 16px; border: 1px solid var(--cw-primary); border-radius: 2px; font-size: 14px; font-weight: 500; color: var(--cw-primary); text-decoration: none; }
a.cw-oi-change:hover, a.cw-oi-change:focus-visible { background: var(--cw-tint); color: var(--cw-primary); }
.cw-oi-value { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 24px 30px; }
p.cw-oi-best { display: flex; align-items: flex-start; gap: 14px; margin: 0; }
.cw-oi-badge { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cw-tint); color: var(--cw-accent); }
.cw-oi-badge .cw-i { width: 20px; height: 20px; }
p.cw-oi-best strong { display: block; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 500; line-height: 1.25; color: var(--cw-ink); }
.cw-oi-short { display: block; margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--cw-muted); }
.cw-oi-card .cw-oi-values { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; padding: 14px 0 0 54px; border-top: 1px solid var(--cw-line); border-radius: 0; background: transparent; font-size: 14px; }
/* the list right under the card: less empty space, the count as a quiet line */
body:has(.cw-oi) .cw-oi + .longrow > .row > .row-app { padding-top: 18px; }
body:has(.cw-oi) .cw-oi + .longrow > .row > .row-app > p.f-16:first-child, body:has(.cw-oi) .cw-oi + .longrow > .row > .row-app > p.f-14:first-child, body:has(.cw-oi) .cw-oi + .longrow > .row > .row-app > p.f-18:first-child { margin: 0 0 10px; font-size: 15px; color: var(--cw-muted); }
@media only screen and (max-width: 760px) {
  .cw-oi-card { grid-template-columns: 1fr; }
  .cw-oi-stay { padding: 18px 18px 20px; border-right: 0; border-bottom: 1px solid var(--cw-line); }
  .cw-oi-value { padding: 18px; }
  p.cw-oi-best strong { font-size: 20px; }
  .cw-oi-card .cw-oi-values { flex-direction: column; padding-left: 0; }
}
/* a hotel in the list of the offers page: the room card with rating, slogan and facts */
.cw-rc-rating { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 14px; color: var(--cw-ink); }
.cw-rc-rating .cw-i { width: 15px; height: 15px; color: var(--cw-accent); }
.cw-rc-slogan { margin: 0; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 18px; font-style: italic; line-height: 1.4; color: var(--cw-primary); }
.cw-rc-hotel-card .cw-facts { margin: 2px 0 0; }
.cw-rc-hotel-card .cw-rc-photo { min-height: 260px; }
/* on the phone the photo keeps its 3:2 shape across the full width (review R80-E1: the height made the page wider) */
@media only screen and (max-width: 640px) {
  .cw-rc-hotel-card .cw-rc-photo { min-height: 0; }
}

/* ===================== Stage D3a-3: the booking steps right above the content, the help under the room ===================== */
.cw-oi .cw-steps { margin: 0; border: 0; background: transparent; }
.cw-oi .cw-steps ol { max-width: none; margin: 0; padding: 4px 0 16px; gap: 10px 0; font-size: 15px; }
.cw-oi .cw-steps li + li::before { content: ""; display: inline-block; width: clamp(24px, 5vw, 64px); height: 1px; margin: 0 14px; background: var(--cw-line); }
.cw-oi .cw-step-n { width: 30px; height: 30px; background: var(--cw-surface); font-size: 14px; }
.cw-oi .cw-steps .cw-step-now .cw-step-n { background: var(--cw-primary); }
/* the help under the room: three items, each an icon and two lines */
.cw-help-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--cw-line); background: var(--cw-surface); }
.cw-help-bar > a { display: flex; align-items: center; gap: 14px; padding: 18px 22px; color: var(--cw-ink); text-decoration: none; transition: background-color 0.15s ease; }
.cw-help-bar > a + a { border-left: 1px solid var(--cw-line); }
.cw-help-bar > a:hover, .cw-help-bar > a:focus-visible { background: var(--cw-ground); color: var(--cw-ink); }
.cw-hb-i { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--cw-tint); color: var(--cw-primary); }
.cw-hb-i .cw-i { width: 20px; height: 20px; }
.cw-hb-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cw-hb-t strong { font-size: 15px; font-weight: 600; line-height: 1.3; }
.cw-hb-t span { font-size: 13px; line-height: 1.4; color: var(--cw-muted); }
@media only screen and (max-width: 760px) {
  .cw-help-bar { grid-template-columns: 1fr; }
  .cw-help-bar > a + a { border-left: 0; border-top: 1px solid var(--cw-line); }
  .cw-oi .cw-steps li + li::before { width: 14px; margin: 0 8px; }
  .cw-oi .cw-steps ol { font-size: 13px; }
}
/* on the phone the steps stay on one line: the current step with its name, the others as their number */
@media only screen and (max-width: 520px) {
  .cw-oi .cw-steps ol { flex-wrap: nowrap; }
  .cw-oi .cw-steps li:not(.cw-step-now) { font-size: 0; }
  .cw-oi .cw-steps li:not(.cw-step-now) .cw-step-n { font-size: 13px; }
  .cw-oi .cw-steps li { white-space: nowrap; }
  .cw-oi .cw-steps li + li::before { width: 22px; margin: 0 10px; }
}
/* the pop-up windows of the booking pages (dates of a room, cancellation, coupon): a centred window above the page
   (no longer squeezed into the price column); a click beside the window closes it as before */
body:has(.cw-oi) .popup { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 400; width: auto; padding: 16px; overflow-y: auto; background: rgba(10, 26, 33, 0.55); }
body:has(.cw-oi) .popup-content { width: 100%; margin: max(8vh, 24px) auto; text-align: left; }
body:has(.cw-oi) .popup-content { max-width: 460px; padding: 26px 28px 28px; border: 0; border-radius: 4px; background: var(--cw-surface); box-shadow: 0 24px 60px rgba(16, 48, 60, 0.22); }
body:has(.cw-oi) .popup-content .popup-head { position: absolute; top: 12px; right: 12px; padding: 0; }
body:has(.cw-oi) .popup-content .popupcloser { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 26px; line-height: 1; color: var(--cw-ink); }
body:has(.cw-oi) .popup-content .popupcloser:hover { background: var(--cw-ground); }
/* the dates form (in the pop-up of a room and in the boxes of the hotel pages) */
form.cw-tf h2 { margin: 0 44px 18px 0; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 26px; font-weight: 500; line-height: 1.2; color: var(--cw-ink); }
form.cw-tf .cw-field-dates { margin: 0 0 20px; padding: 0; border: 0; }
/* flexible columns and drop-downs that fill them, so the form fits the window with or without field-sizing (review R81-E1) */
form.cw-tf .cw-field-dates .datepicker { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1.2fr); column-gap: 12px; row-gap: 6px; }
form.cw-tf .cw-field-dates .datepicker select { width: 100%; min-width: 0; padding-right: 18px; text-overflow: ellipsis; }
form.cw-tf .cw-field-dates .picker-checkin { grid-column: 1 / -1; grid-row: 1; }
form.cw-tf .cw-field-dates select[name="d"] { grid-column: 1; grid-row: 2; }
form.cw-tf .cw-field-dates select[name="m"] { grid-column: 2; grid-row: 2; }
form.cw-tf .cw-field-dates select[name="y"] { grid-column: 3; grid-row: 2; }
form.cw-tf .cw-field-dates .picker-checkout { grid-column: 1 / -1; grid-row: 3; margin-top: 16px; }
form.cw-tf .cw-field-dates select[name="dt"] { grid-column: 1; grid-row: 4; }
form.cw-tf .cw-field-dates .datepicker > span { grid-column: 2 / -1; grid-row: 4; }
@media only screen and (max-width: 420px) {
  body:has(.cw-oi) .popup-content { padding: 24px 22px 24px; }
  form.cw-tf .cw-field-dates .datepicker select { font-size: 20px; }
}
form.cw-tf fieldset.modernform input.cw-tf-btn { width: 100%; min-height: 54px; margin: 0; border: 0; border-radius: 2px; background: var(--cw-primary); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; color: #FFFFFF; cursor: pointer; }
form.cw-tf fieldset.modernform input.cw-tf-btn:hover { background: var(--cw-primary-hover); }
/* the board choice: more air inside and between the cards (Giorgos 2026-11-01: a little crowded) */
body:has(.cw-oi) form[action="_cart"] .frame-col.bg-lightgray { gap: 14px; }
body:has(.cw-oi) form[action="_cart"] .frame-col.bg-lightgray > p:has(> label.container) { margin: 0 0 2px; }
body:has(.cw-oi) form[action="_cart"] label.container { padding: 22px 24px 22px 62px; line-height: 1.85; }
body:has(.cw-oi) form[action="_cart"] label.container .checkmark { top: 26px; left: 22px; }
body:has(.cw-oi) form[action="_cart"] label.container > a.modalopener { margin-left: 10px; }
body:has(.cw-oi) form[action="_cart"] label.container > span.f-12.bitter { margin-left: 10px; padding: 0 10px; font-size: 11.5px; line-height: 1.7; }
body:has(.cw-oi) form[action="_cart"] label.container > br { content: ""; display: block; margin-top: 4px; }
/* the room page: above the room only the ways on (hotel, all room types, other hotel); the hotel name is already in the title */
body:has(.cw-oi) p.margin1.f-12.w-600:has(+ section.form-box) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0 0 14px; font-size: 0; line-height: 1.5; }
body:has(.cw-oi) p.margin1.f-12.w-600:has(+ section.form-box) > :is(span, br) { display: none; }
body:has(.cw-oi) p.margin1.f-12.w-600:has(+ section.form-box) > a { font-size: 14px; font-weight: 500; color: var(--cw-primary); text-decoration: none; }
body:has(.cw-oi) p.margin1.f-12.w-600:has(+ section.form-box) > a:hover { text-decoration: underline; text-underline-offset: 3px; }
body:has(.cw-oi) p.margin1.f-12.w-600:has(+ section.form-box) > a + a { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--cw-line); }
body:has(.cw-oi) p.margin1.f-12.w-600:has(+ section.form-box) > a::first-letter { text-transform: uppercase; }
body:has(.cw-oi) .cw-oi + .longrow > .row > .row-app > .spaceline:has(~ p.margin1.f-12.w-600 + section.form-box) { display: none; }
/* the room page: the travel dates of the room as a quiet framed box (was a grey block) */
body:has(.cw-oi) section.form-box:where(:not(:has(.inline-block.width24))) a.popupopener.longbutton[data-popup$="-dates-main"] { display: block; margin: 4px 0 0; padding: 14px 16px; border: 1px solid var(--cw-line); border-radius: 3px; background: var(--cw-surface); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; line-height: 1.5; text-align: left; color: var(--cw-muted); transition: border-color 0.2s ease, background-color 0.2s ease; }
body:has(.cw-oi) section.form-box:where(:not(:has(.inline-block.width24))) a.popupopener.longbutton[data-popup$="-dates-main"]:hover, body:has(.cw-oi) section.form-box:where(:not(:has(.inline-block.width24))) a.popupopener.longbutton[data-popup$="-dates-main"]:focus-visible { border-color: var(--cw-primary); background: var(--cw-ground); }
body:has(.cw-oi) section.form-box:where(:not(:has(.inline-block.width24))) a.popupopener.longbutton[data-popup$="-dates-main"] > span.bitter { display: block; margin: 4px 0 0; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 18px !important; font-weight: 500; letter-spacing: 0; color: var(--cw-ink); }
body:has(.cw-oi) section.form-box:where(:not(:has(.inline-block.width24))) a.popupopener.longbutton[data-popup$="-dates-main"] > span.block { margin: 8px 0 0; font-size: 12.5px !important; font-weight: 400; letter-spacing: 0; line-height: 1.55; color: var(--cw-muted); }
body:has(.cw-oi) section.form-box:where(:not(:has(.inline-block.width24))) a.popupopener.longbutton[data-popup$="-dates-main"] > span.block b { font-weight: 600; color: var(--cw-ink); }
body:has(.cw-oi) section.form-box:where(:not(:has(.inline-block.width24))) a.popupopener.longbutton[data-popup$="-dates-main"] > br { display: none; }
/* ===================== Stage D3b-2: the summary «Your stay» above the button of the room page ===================== */
body:has(.cw-oi) form[action="_cart"] .cw-stay { max-width: 520px; margin: 6px 0 16px; padding: 20px 24px 18px; border: 1px solid var(--cw-line); border-radius: 3px; background: var(--cw-surface); box-shadow: 0 10px 28px rgba(16, 48, 60, 0.06); }
.cw-stay p { margin: 0; }
.cw-stay .cw-stay-label { margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cw-muted); }
.cw-stay .cw-stay-room { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 500; line-height: 1.3; color: var(--cw-ink); }
.cw-stay .cw-stay-when, .cw-stay .cw-stay-what { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--cw-muted); }
.cw-stay .cw-stay-what [data-cw-board] { color: var(--cw-ink); font-weight: 500; }
.cw-stay-sum { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--cw-line); }
.cw-stay-sum > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 3px 0; font-size: 14px; color: var(--cw-muted); }
.cw-stay-sum > div[hidden] { display: none; }
.cw-stay-sum dt, .cw-stay-sum dd { margin: 0; }
.cw-stay-sum dd { white-space: nowrap; color: var(--cw-ink); }
.cw-stay-sum .cw-stay-total { padding-bottom: 6px; font-size: 15px; color: var(--cw-ink); }
.cw-stay-sum .cw-stay-total strong { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 28px; font-weight: 500; }
.cw-stay .cw-stay-note { margin-top: 10px; font-size: 12.5px; line-height: 1.55; color: var(--cw-muted); }
@media only screen and (max-width: 520px) {
  body:has(.cw-oi) form[action="_cart"] label.container { padding: 18px 18px 18px 54px; line-height: 1.6; }
  body:has(.cw-oi) form[action="_cart"] label.container .checkmark { top: 22px; left: 18px; }
  body:has(.cw-oi) form[action="_cart"] .cw-stay { padding: 18px 18px 16px; }
  .cw-stay-sum .cw-stay-total strong { font-size: 24px; }
}
/* ===================== Stage D3c-1: the selection (cart): rooms as cards, the totals as one card ===================== */
.cw-oi-cart .cw-steps ol { padding-bottom: 4px; }
.cw-oi-cart + .longrow1 { background: var(--cw-ground); }
.cw-oi-cart + .longrow1 > .row-app { margin-top: 0; padding-top: 26px; }
.cw-cart { margin: 0; }
.cw-cart > .margin2 { margin: 0 !important; }
.cw-cart-count { display: block; margin: 0 0 18px; font-size: 15px; color: var(--cw-muted); }
.cw-ct { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: 8px 0 12px; }
.cw-ct p { margin: 0; }
.cw-ct-label { flex-basis: 100%; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cw-muted); }
.cw-ct-when { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 500; color: var(--cw-ink); }
.cw-ct-flight { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--cw-primary); text-decoration: underline; text-decoration-color: var(--cw-accent-light); text-underline-offset: 4px; }
.cw-ct-flight .cw-i { width: 16px; height: 16px; color: var(--cw-accent); }
.cw-ci { display: grid; grid-template-columns: 220px minmax(0, 1fr) 240px; margin: 0 0 16px; overflow: hidden; border-radius: 3px; background: var(--cw-surface); box-shadow: 0 1px 0 var(--cw-line), 0 12px 32px rgba(16, 48, 60, 0.06); }
.cw-ci-photo { position: relative; min-height: 170px; }
.cw-ci-photo > a { position: absolute; inset: 0; display: block; }
.cw-ci-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cw-ci-body { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; }
.cw-ci-body p { margin: 0; }
.cw-ci-hotel { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.cw-ci-hotel a { color: var(--cw-accent); text-decoration: none; }
.cw-ci h3 { margin: 0; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 24px; font-weight: 500; line-height: 1.2; }
.cw-ci h3 a { color: var(--cw-ink); text-decoration: none; }
.cw-ci h3 a:hover { color: var(--cw-primary); }
.cw-ci-meta { font-size: 14px; line-height: 1.5; color: var(--cw-muted); }
.cw-ci .cw-rc-links { margin-top: 4px; padding-top: 0; }
.cw-ci-note { font-size: 12px; color: var(--cw-muted); }
.cw-ci-price { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 20px 22px; border-left: 1px solid var(--cw-line); }
.cw-ci-price p { margin: 0; }
.cw-ci .cw-rc-rate { font-size: 34px; }
.cw-ci-extra { font-size: 13px; color: var(--cw-ink); }
.cw-ci-remove { margin-top: 6px !important; }
.cw-ci-remove a { display: inline-flex; padding: 0; background: transparent; font-size: 13px; font-weight: 500; color: var(--cw-muted); text-decoration: underline; text-underline-offset: 3px; }
.cw-ci-remove a:hover { color: var(--cw-primary); }
.cw-cart .highlight.bitter.f-14 { display: block; margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--cw-accent); border-radius: 0; background: var(--cw-surface); font-size: 14px; color: var(--cw-ink); }
.cw-cs-row { margin-top: 8px; }
.cw-cs { margin: 0 18px 24px 0; padding: 24px 26px 22px; border: 1px solid var(--cw-line); border-radius: 3px; background: var(--cw-surface); box-shadow: 0 10px 28px rgba(16, 48, 60, 0.06); }
.cw-cs-title { margin: 0 0 14px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 26px; font-weight: 500; line-height: 1.2; color: var(--cw-ink); }
.cw-cs-best p.cw-oi-best { align-items: center; gap: 12px; font-size: 15px; color: var(--cw-ink); }
.cw-cs-best p.cw-oi-best strong { font-size: 19px; }
.cw-cs-best ul { margin: 10px 0 0 !important; padding: 0 0 0 18px !important; font-size: 13.5px; line-height: 1.55; color: var(--cw-muted); }
.cw-cs-best ul li { margin: 0 0 4px; }
.cw-cs .cw-stay-sum { margin-top: 16px; }
.cw-cs .cw-stay-total dt { display: flex; flex-direction: column; }
.cw-cs-rooms { font-size: 12.5px; color: var(--cw-muted); }
.cw-cs-tax { font-size: 12.5px !important; }
.cw-cs-inc { margin: 16px 0 6px; font-size: 13px; font-weight: 600; color: var(--cw-ink); }
/* Stage E7 (2026-11-02): the personal advisor with photo and phone in the card of the selection */
.cw-cs-adv { display: flex; gap: 14px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cw-line); }
.cw-cs-adv img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.cw-cs-adv p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--cw-ink); }
.cw-cs-adv .cw-cs-adv-label { margin-bottom: 2px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cw-accent); }
.cw-cs-adv .cw-cs-adv-tel a { font-weight: 600; color: var(--cw-primary); text-decoration: none; }
.cw-cs-adv .cw-cs-adv-tel a:hover { text-decoration: underline; }
.cw-cs-adv .cw-cs-adv-hours { font-size: 12px; color: var(--cw-muted); }
.cw-cs .cw-ro-values { margin: 0; }
@media only screen and (max-width: 980px) {
  .cw-ci { grid-template-columns: 180px minmax(0, 1fr); }
  .cw-ci-price { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; border-left: 0; border-top: 1px solid var(--cw-line); }
  .cw-cs { margin-right: 0; }
}
@media only screen and (max-width: 640px) {
  .cw-ci { grid-template-columns: 1fr; }
  .cw-ci-photo { min-height: 0; aspect-ratio: 3 / 2; }
  .cw-ci-body, .cw-ci-price { padding: 16px 18px; }
  .cw-cs { padding: 20px 18px 18px; }
}
/* ===================== Stage D3c-2: the booking form of the selection: contact details, way to book, guarantee ===================== */
body:has(.cw-oi) form[action="_request"] .margin5, body:has(.cw-oi) .cw-cs-row > .col-7 > .margin5 { margin: 0 !important; }
body:has(.cw-oi) form[action="_request"] fieldset.modernform { margin: 0; padding: 0; border: 0; }
.cw-rf-step { margin: 0 0 14px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 23px; font-weight: 500; line-height: 1.25; color: var(--cw-ink); }
.cw-rf-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin: 0 0 22px; }
.cw-rf-fields > p { margin: 0 0 14px; }
.cw-rf-fields > p:has(textarea) { grid-column: 1 / -1; }
.cw-rf-fields label { display: block; margin: 0 0 6px; font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cw-muted); }
body:has(.cw-oi) .cw-rf-fields :is(input[type="email"], input[type="text"], textarea) { box-sizing: border-box; width: 100%; min-width: 0; max-width: none; margin: 0; min-height: 48px; padding: 12px 14px; font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 16px; }
.cw-rf-best { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--cw-ink); }
.cw-rf-best .cw-i { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--cw-accent); }
.cw-rf-best details { flex: 1; min-width: 0; }
.cw-rf-best summary { display: inline; cursor: pointer; list-style: none; font-weight: 600; text-decoration: underline dotted var(--cw-line); text-underline-offset: 4px; }
.cw-rf-best summary::-webkit-details-marker { display: none; }
.cw-rf-best summary::after { content: "+"; margin-left: 6px; color: var(--cw-accent); }
.cw-rf-best details[open] summary::after { content: "\2212"; }
.cw-rf-best details p { margin: 8px 0 0; font-size: 13.5px; color: var(--cw-muted); }
body:has(.cw-oi) form[action="_request"] > fieldset > hr { display: none; }
body:has(.cw-oi) form[action="_request"] :is(#option-request, #option-book) { margin: 0 0 12px; padding: 18px 22px; border-radius: 3px; }
/* the choice reached with the keyboard is visible (review R84-L1: the radios themselves are hidden); also the boards of the room page */
body:has(.cw-oi) form:is([action="_request"], [action="_cart"]) label.container:has(input:focus-visible) .checkmark { outline: 2px solid var(--cw-primary); outline-offset: 3px; }
body:has(.cw-oi) form[action="_request"] :is(#option-request, #option-book) > p { margin: 0; }
body:has(.cw-oi) form[action="_request"] :is(#option-request, #option-book) label.container { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 21px !important; font-weight: 500; color: var(--cw-ink); }
body:has(.cw-oi) form[action="_request"] :is(#option-request, #option-book) label.container .highlight { display: inline-block; margin-left: 8px; padding: 1px 10px; border: 1px solid var(--cw-accent); border-radius: 12px; background: transparent; font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 11.5px !important; vertical-align: middle; color: var(--cw-accent); }
body:has(.cw-oi) form[action="_request"] :is(#option-request, #option-book) > p.left.bitter.f-14 { margin-top: 8px; font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 14px !important; line-height: 1.75; color: var(--cw-muted); }
body:has(.cw-oi) form[action="_request"] :is(#booktype-request, #booktype-booking) { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cw-line); }
body:has(.cw-oi) form[action="_request"] :is(#booktype-request, #booktype-booking) p.spacep { margin: 0 0 14px; padding-top: 0; font-size: 14px; line-height: 1.6; color: var(--cw-ink); }
body:has(.cw-oi) form[action="_request"] :is(#booktype-request, #booktype-booking) input[type="submit"] { width: 100%; min-height: 54px; margin: 0; border: 0; border-radius: 2px; background: var(--cw-primary); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; white-space: normal; color: #FFFFFF; cursor: pointer; }
body:has(.cw-oi) form[action="_request"] :is(#booktype-request, #booktype-booking) input[type="submit"]:hover { background: var(--cw-primary-hover); }
body:has(.cw-oi) form[action="_request"] :is(#booktype-request, #booktype-booking) p.italic { margin: 10px 0 0; font-size: 12.5px; color: var(--cw-muted); }
body:has(.cw-oi) form[action="_request"] a.reminder.longbutton { display: inline-block; margin: 6px 0 0; padding: 0; border: 0; background: transparent; font-size: 14px; font-weight: 500; line-height: 1.55; color: var(--cw-primary); text-decoration: underline; text-decoration-color: var(--cw-accent-light); text-underline-offset: 4px; }
.cw-cs .cw-stay-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--cw-muted); }
@media only screen and (max-width: 640px) {
  .cw-rf-fields { grid-template-columns: 1fr; }
  body:has(.cw-oi) form[action="_request"] :is(#option-request, #option-book) { padding: 16px 16px; }
  body:has(.cw-oi) form[action="_request"] :is(#option-request, #option-book) label.container { font-size: 19px !important; }
}
/* ===================== Stage D3d-1: the confirmation of a booking request ===================== */
.cw-oi-cart + .longrow { background: var(--cw-ground); }
.cw-oi-cart + .longrow > .row-app { margin-top: 0; padding-top: 26px; }
.cw-done { position: relative; max-width: 860px; margin: 0 0 22px; padding: 30px 34px 26px 96px; border-radius: 3px; background: var(--cw-surface); box-shadow: 0 1px 0 var(--cw-line), 0 12px 32px rgba(16, 48, 60, 0.06); }
.cw-done p { margin: 0; }
.cw-done-badge { position: absolute; top: 30px; left: 32px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cw-primary); color: #FFFFFF; }
.cw-done-badge .cw-i { width: 22px; height: 22px; }
.cw-done-thanks { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cw-accent); }
.cw-done h2 { margin: 6px 0 8px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; line-height: 1.15; color: var(--cw-ink); }
.cw-done-mail { font-size: 15px; line-height: 1.6; color: var(--cw-muted); }
.cw-done-next { margin-top: 20px !important; padding-top: 18px; border-top: 1px solid var(--cw-line); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cw-ink); }
.cw-done-steps { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; counter-reset: cwdone; }
.cw-done-steps li { position: relative; padding-left: 40px; font-size: 15px; line-height: 1.55; color: var(--cw-ink); counter-increment: cwdone; }
.cw-done-steps li::before { content: counter(cwdone); position: absolute; left: 0; top: -1px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--cw-line); border-radius: 50%; font-size: 13px; color: var(--cw-primary); }
.cw-done-time { margin-top: 16px !important; padding: 10px 14px; border-left: 3px solid var(--cw-accent); background: var(--cw-ground); font-size: 14px; line-height: 1.55; color: var(--cw-ink); }
.cw-done-grid { margin-top: 4px; }
.cw-done-side { margin: 0 18px 22px 0; padding: 22px 24px; border: 1px solid var(--cw-line); border-radius: 3px; background: var(--cw-surface); }
.cw-done-side > p { margin: 0 0 12px; font-size: 14px; }
.cw-done-side > p .bitter.silver { display: block; margin-bottom: 2px; font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 11px !important; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cw-muted); }
.cw-done-side > p .bitter.silver + br { display: none; }
.cw-done-side > p :is(.f-18, em) { font-size: 16px !important; font-style: normal; color: var(--cw-ink); }
.cw-done-side > p .f-12 { display: block; margin-top: 4px; font-size: 12px !important; font-weight: 400; color: var(--cw-muted); }
.cw-done-advisor { margin-top: 18px !important; padding-top: 16px; border-top: 1px solid var(--cw-line); font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 18px !important; line-height: 1.35; color: var(--cw-ink); }
.cw-receipt { padding: 22px 26px; border-radius: 3px; background: var(--cw-surface); box-shadow: 0 1px 0 var(--cw-line), 0 12px 32px rgba(16, 48, 60, 0.06); }
.cw-receipt-title { margin: 0 0 6px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 26px; font-weight: 500; color: var(--cw-ink); }
.cw-receipt .frame-col.bg-white { border: 1px solid var(--cw-line); border-radius: 3px; }
.cw-receipt .bitter.f-22 { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 22px !important; color: var(--cw-ink); }
.cw-receipt .rowspace { height: 8px; }
.cw-receipt p.red { padding: 10px 14px; border-left: 3px solid var(--cw-accent); background: var(--cw-ground); font-size: 13.5px !important; line-height: 1.55; color: var(--cw-ink); }
@media only screen and (max-width: 760px) {
  .cw-done { padding: 76px 20px 22px; }
  .cw-done-badge { top: 22px; left: 20px; }
  .cw-done-side { margin-right: 0; }
  .cw-receipt { padding: 18px 16px; }
}
/* ===================== Stage D3d-2: the pre-booking with deposit (payment status, totals and payment links in cards) ===================== */
.cw-booked > .margin2 { margin: 0 !important; padding: 0 !important; }
.cw-booked > .margin2 > br:first-child { display: none; }
.cw-booked > .margin2 > .row:first-of-type { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0 0 22px; }
.cw-booked > .margin2 > .row:first-of-type > [class*="col-"] { box-sizing: border-box; width: auto; max-width: none; float: none; margin: 0; padding: 22px 26px; border: 1px solid var(--cw-line); border-radius: 3px; background: var(--cw-surface); box-shadow: 0 10px 28px rgba(16, 48, 60, 0.06); }
.cw-booked > .margin2 > .row:first-of-type > .col-6 > .margin2 { margin: 0 !important; }
.cw-booked > .margin2 > .row:first-of-type p.left.bitter { margin: 0 0 16px; font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 14px !important; color: var(--cw-muted); }
.cw-booked > .margin2 > .row:first-of-type p.left.bitter > :is(.f-20, .f-18, .silver):first-child { display: block; margin-bottom: 2px; font-size: 11px !important; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cw-muted); }
.cw-booked > .margin2 > .row:first-of-type p.left.bitter > :is(.f-20, .f-18, .silver):first-child + br { display: none; }
.cw-booked > .margin2 > .row:first-of-type p.left.bitter .f-28 { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 32px !important; font-weight: 500; color: var(--cw-ink); }
.cw-booked > .margin2 > .row:first-of-type p.left.bitter .f-18:not(:first-child) { font-size: 20px !important; color: var(--cw-ink); }
.cw-booked .frame-col.bg-lightgray.red, .cw-booked .frame-col.bg-lightgray.green { margin: 0 0 16px; padding: 12px 14px; border: 0; border-left: 3px solid var(--cw-accent); border-radius: 0; background: var(--cw-ground); font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 14.5px !important; line-height: 1.55; color: var(--cw-ink); }
.cw-booked .frame-col.bg-lightgray.green { border-left-color: var(--cw-primary); background: var(--cw-tint); }
.cw-booked a.submit.button.button-dark { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; margin: 10px 0 0; padding: 0 22px; border: 0; border-radius: 2px; background: var(--cw-primary); font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 14px !important; font-weight: 600; letter-spacing: 0.04em; color: #FFFFFF; text-decoration: none; }
.cw-booked a.submit.button.button-dark:hover { background: var(--cw-primary-hover); }
/* the payment link reached with the keyboard is visible (review R86-L1: .button removes the outline) */
.cw-booked a.submit.button.button-dark:focus-visible { background: var(--cw-primary-hover); box-shadow: 0 0 0 3px var(--cw-surface), 0 0 0 5px var(--cw-primary); }
.cw-booked > .margin2 > .row:first-of-type ul { margin: 6px 0 0 !important; padding: 0 0 0 18px !important; font-size: 13.5px; line-height: 1.6; color: var(--cw-muted); }
.cw-booked > .margin2 > .row:first-of-type p.f-16.w-600 { margin: 6px 0 0; font-size: 13px !important; color: var(--cw-ink); }
.cw-booked > .margin2 > p.spacep { padding-top: 6px; }
.cw-booked > .margin2 > p.spacep .silver { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cw-muted); }
.cw-booked > .margin2 > p.spacep .f-16 { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 22px !important; color: var(--cw-ink); }
.cw-booked > .margin2 > p.red { padding: 10px 14px; border-left: 3px solid var(--cw-accent); background: var(--cw-surface); font-size: 13.5px !important; line-height: 1.55; color: var(--cw-ink); }
.cw-booked > .margin2 > .frame-col.bg-white { border: 1px solid var(--cw-line); border-radius: 3px; box-shadow: 0 10px 28px rgba(16, 48, 60, 0.06); }
.cw-booked .bitter.f-22 { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 22px !important; color: var(--cw-ink); }
.cw-booked > .margin2 > .row:last-of-type { margin-top: 10px; }
.cw-booked > .margin2 > .row:last-of-type > .col-7 > .margin2 { margin: 0 18px 0 0 !important; padding: 22px 24px; border: 1px solid var(--cw-line); border-radius: 3px; background: var(--cw-surface); }
.cw-booked > .margin2 > .row:last-of-type p .bitter.silver { display: block; margin-bottom: 2px; font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 11px !important; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cw-muted); }
.cw-booked > .margin2 > .row:last-of-type p .bitter.silver + br { display: none; }
.cw-booked > .margin2 > .row:last-of-type p :is(.f-18, em) { font-size: 16px !important; font-style: normal; color: var(--cw-ink); }
.cw-booked > .margin2 > .row:last-of-type h2 { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 22px !important; font-weight: 500; color: var(--cw-ink); }
@media only screen and (max-width: 760px) {
  .cw-booked > .margin2 > .row:first-of-type { grid-template-columns: 1fr; }
  .cw-booked > .margin2 > .row:first-of-type > [class*="col-"] { padding: 18px 18px; }
  .cw-booked > .margin2 > .row:last-of-type > .col-7 > .margin2 { margin-right: 0 !important; }
}
/* the title of the offers pages: on the page colour, joined to the booking steps and the dates card below */
.cw-ot { padding: clamp(26px, 3vw, 40px) 0 0; background: var(--cw-ground); }
.cw-ot .row-app { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
.cw-ot .breadcrumb { margin-bottom: clamp(14px, 1.8vw, 24px); font-size: 13px; }
/* Stage E5 (2026-11-01): a little more space between the lines of the page titles (1.15; booking pages 1.2) */
.cw-ot h1 { max-width: 26em; margin: 0; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: clamp(30px, 3.2vw, 46px); font-weight: 500; line-height: 1.2; color: var(--cw-ink); text-wrap: balance; }
.cw-ot .cw-eyebrow .cw-ot-brand { color: var(--cw-muted); }
.cw-ot-sub { max-width: 52em; margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--cw-muted); }
.cw-ot-sub > p { margin: 0 0 8px; }
.cw-ot-sub .filter-area { margin-top: 6px; }
/* title, steps and the dates card close together (no empty band between them) */
.cw-ot + .cw-oi { padding-top: 0; }
.cw-ot + .cw-oi > .row-app { margin-top: 0; padding-top: clamp(26px, 3vw, 36px); }

/* ===== Stage E1 (2026-11-01): guest tools and information pages with the page top of the content pages ===== */
/* dark boxes keep white text (Clever: PLATINUM) */
body:has(.cw-page-top) :is(.longrow, .longrow1, .longrow2, .longrow3) .row > [class*="col-"] > .box-col.bg-dark > :is(h2, h3, h4, p) { color: #FFFFFF; }
/* access-code forms (room card, venue card, survey, booking confirmation, check-in): a compact form, not across the page */
body:has(.cw-page-top) .row-app > form > fieldset.modernform { max-width: 440px; }
/* the lead: text with its own size class (flights) reads at the lead size */
.cw-pt-lead span[class*="f-"] { font-size: inherit !important; }
/* a form in the lead (rent a car): logo and form side by side, upright labels, a button of normal width */
.cw-pt-lead > .row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px clamp(24px, 4vw, 56px); margin-top: 8px; }
.cw-pt-lead > .row > [class*="col-"] { flex: 1 1 280px; width: auto; min-width: 0; }
.cw-pt-lead > .row > [class*="col-"] > .margin2 { margin: 0; }
.cw-pt-lead > .row img { max-width: 100%; height: auto; }
.cw-pt-lead form { font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 15px; font-style: normal; color: var(--cw-ink); }
.cw-pt-lead form .bitter { font-family: inherit; font-style: normal; }
.cw-pt-lead form .picker-checkin .bitter { font-size: 11px !important; font-weight: 600; letter-spacing: 0.16em; color: var(--cw-muted); }
.cw-pt-lead form input[type="submit"] { width: auto; min-width: 220px; }
/* how to book: the information boxes in the steps keep their frame, like the steps around them */
body:has(.cw-page-top) .row > .col-4 > .frame-col.bg-white.margin1 { margin: 3px; padding: 14px 24px; border: 1px solid var(--cw-line); border-radius: 4px; background: var(--cw-surface); line-height: 1.4; }
body:has(.cw-page-top) .row > .col-4 > .frame-col.bg-white.margin1 > .margin3 { margin: 0; }
/* the step names a little smaller, so long German words (BUCHUNGSBESTÄTIGUNG) stay on one line */
body:has(.cw-page-top) .row > .col-4 > a.longbutton.margin1 > .f-22 { font-size: 19px !important; }
/* gallery: the photos as an even grid, the links to the other galleries across the full width */
body:has(.cw-page-top) .longrow > .row-app:has(> a.glightbox.inline-block.width24) { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
body:has(.cw-page-top) .longrow > .row-app:has(> a.glightbox.inline-block.width24) > :not(a.glightbox) { grid-column: 1 / -1; }
body:has(.cw-page-top) .longrow > .row-app:has(> a.glightbox.inline-block.width24) > .spaceline { display: none; }
body:has(.cw-page-top) .longrow > .row-app > a.glightbox.width24 { max-width: none; overflow: hidden; border-radius: 3px; background: var(--cw-tint); }
body:has(.cw-page-top) .longrow > .row-app > a.glightbox.width24 > img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.6s ease; }
body:has(.cw-page-top) .longrow > .row-app > a.glightbox.width24:hover > img { transform: scale(1.03); }
@media (max-width: 640px) {
  body:has(.cw-page-top) .longrow > .row-app:has(> a.glightbox.inline-block.width24) { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* ===== Stage E2 (2026-11-01): the «Your selection for later» and «Flight to Crete» windows in the frame of the other windows
   (frame, veil and round close button: the shared rules of stage D1). Same forms, fields, links and texts; only the look changes. ===== */
:is(#cartreminder-modal, #flight-modal) > .jmodal-content { max-width: 880px; }
/* «Your selection for later»: the text on the left, the e-mail form on a light panel on the right */
#cartreminder-modal .jmodal-body > .spaceline { display: none; }
#cartreminder-modal .jmodal-body > .row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); margin: 0; }
#cartreminder-modal .jmodal-body > .row > [class*="col-"] { width: auto; min-width: 0; float: none; }
#cartreminder-modal .jmodal-body > .row > .col-6:first-child { padding: 44px 36px 40px 44px; }
#cartreminder-modal .jmodal-body > .row > .col-6:last-child { display: flex; flex-direction: column; justify-content: center; padding: 44px 44px 40px 36px; border-left: 1px solid var(--cw-line); background: var(--cw-surface); }
#cartreminder-modal .jmodal-body > .row > .col-6:last-child > .margin2 { margin: 0; }
#cartreminder-modal .jmodal-body h2 { margin: 0 0 14px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: clamp(28px, 3vw, 36px) !important; font-weight: 500; line-height: 1.15; color: var(--cw-ink); }
#cartreminder-modal .jmodal-body h2 + p { margin: 0; font-size: 16px !important; font-weight: 400 !important; line-height: 1.65; color: var(--cw-muted); }
/* the old cart, arrow and mail pictures are not needed beside the title */
#cartreminder-modal .jmodal-body p.center:has(> img) { display: none; }
#cartreminder-modal fieldset.modernform { margin: 0; padding: 0; border: 0; text-align: left; }
#cartreminder-modal fieldset.modernform label { display: block; margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cw-muted); }
#cartreminder-modal fieldset.modernform input[type="email"] { box-sizing: border-box; width: 100%; max-width: none; min-height: 50px; margin: 0; padding: 12px 14px; border: 1px solid var(--cw-line); border-radius: 2px; background: #FFFFFF; font: inherit; font-size: 16px; color: var(--cw-ink); }
#cartreminder-modal fieldset.modernform input[type="email"]:focus { border-color: var(--cw-primary); outline: 2px solid var(--cw-accent-light); outline-offset: 1px; }
#cartreminder-modal fieldset.modernform p { margin: 14px 0 0; }
#cartreminder-modal fieldset.modernform input[type="submit"] { width: 100%; min-height: 52px; }
/* «Flight to Crete»: the airports as clear links in the text, the flight search in a white card, the tip for flexible dates as a closing line */
#flight-modal > .jmodal-content { padding: 44px 48px 40px; }
#flight-modal .jmodal-body > h2 { margin: 0 0 14px; padding-right: 48px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: clamp(28px, 3vw, 36px) !important; font-weight: 500; line-height: 1.15; color: var(--cw-ink); }
#flight-modal .jmodal-body > .frame-col { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#flight-modal .jmodal-body > .frame-col > p { margin: 0 0 22px; font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 16px !important; line-height: 1.65; color: var(--cw-ink); }
#flight-modal .jmodal-body > .frame-col:has(> [data-skyscanner-widget]) { padding: 18px 20px; border: 1px solid var(--cw-line); border-radius: 3px; background: var(--cw-surface); }
#flight-modal .jmodal-body > .frame-col.bg-white { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--cw-line); font-family: "CW Text", "Segoe UI", Arial, sans-serif; font-size: 15px !important; line-height: 1.6; color: var(--cw-muted); }
#flight-modal .jmodal-body > .frame-col.bg-white > span.f-20 { font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: 22px !important; font-weight: 500; color: var(--cw-ink); }
/* the links to the two airports read as links (Giorgos 2026-11-01: they did not show), with a sign that they open another site */
#flight-modal .jmodal-body > .frame-col > p a, #flight-modal .jmodal-body > .frame-col.bg-white a { font-weight: 600; color: var(--cw-primary); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--cw-accent-light); text-underline-offset: 0.18em; }
:is(#flight-modal .jmodal-body > .frame-col > p, #flight-modal .jmodal-body > .frame-col.bg-white) a[target="_blank"]::after { content: "\00a0\2197"; display: inline-block; font-weight: 400; text-decoration: none; }
:is(#flight-modal .jmodal-body > .frame-col > p, #flight-modal .jmodal-body > .frame-col.bg-white) a:is(:hover, :focus-visible) { color: var(--cw-accent); text-decoration-color: currentColor; }
@media only screen and (max-width: 760px) {
  #cartreminder-modal .jmodal-body > .row { grid-template-columns: 1fr; }
  #cartreminder-modal .jmodal-body > .row > .col-6:first-child { padding: 56px 20px 20px; }
  #cartreminder-modal .jmodal-body > .row > .col-6:last-child { padding: 22px 20px 32px; border-left: 0; border-top: 1px solid var(--cw-line); }
  #flight-modal > .jmodal-content { padding: 56px 18px 28px; }
  #flight-modal .jmodal-body > h2 { padding-right: 0; }
  #flight-modal .jmodal-body > .frame-col:has(> [data-skyscanner-widget]) { padding: 12px; }
}

/* ===== Stage E4 (2026-11-01): the room name and its description, the slider dashes, the hotel details window ===== */
/* the room page: room between the room name and its description (Giorgos 2026-11-01: they almost touched) */
body:has(.cw-oi) section.form-box:where(:not(:has(.inline-block.width24))) .col-4 p.f-12 > .bitter.f-24 { display: block; margin: 0 0 10px; }
body:has(.cw-oi) section.form-box:where(:not(:has(.inline-block.width24))) .col-4 p.f-12 > .bitter.f-24 + br { display: none; }
body:has(.cw-oi) section.form-box:where(:not(:has(.inline-block.width24))) .col-4 p.f-12 { line-height: 1.6; }
body:has(.cw-oi) section.form-box:where(:not(:has(.inline-block.width24))) .col-4 p.f-12 > .bitter.f-14 { font-size: 15px !important; line-height: 1.6; color: var(--cw-muted); }
/* the dashes in the colours of the new look (white on the photo, the current one solid) instead of the old cyan, clear of the
   arrows and of the enlarge button at the sides */
.splide .splide__pagination { padding: 0 64px; }
.splide .splide__pagination__page { background-color: rgba(255, 255, 255, 0.55); opacity: 1; }
.splide .splide__pagination__page.is-active, .splide .splide__pagination__page:hover { background-color: #FFFFFF; }
.splide .splide__pagination__page:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -2px; }
/* the arrows and the enlarge button: light round buttons with thin icons, like the close button of the windows (Giorgos 2026-11-01) */
.splide .splide__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: rgba(244, 241, 235, 0.92);
  box-shadow: 0 4px 14px rgba(8, 24, 31, 0.18);
  opacity: 1;
  transition: background 0.15s ease;
}
.splide .splide__arrow svg { display: none; }
.splide .splide__arrow::before { content: ""; width: 16px; height: 16px; background: url(../images/cw-arrow.svg) center / contain no-repeat; }
.splide .splide__arrow--prev::before { transform: scaleX(-1); }
.splide .splide__arrow:hover { background: #FFFFFF; }
.splide .splide__arrow:focus-visible { outline: 2px solid var(--cw-accent-light); outline-offset: 2px; }
.expandbox {
  right: 14px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(244, 241, 235, 0.92) url(../images/cw-expand.svg) center / 18px no-repeat;
  box-shadow: 0 4px 14px rgba(8, 24, 31, 0.18);
  opacity: 1;
  transition: background-color 0.15s ease;
}
.expandbox:hover { background-color: #FFFFFF; }
/* the hotel details window («Details zum Hotel»): the frame of the other windows (shared rules of stage D1), the name as a
   title, the address and the button below it, the two texts side by side */
:is(#hiltonchania-modal, #flair-modal, #harmony-modal, #princess-modal, #beach-modal) > .jmodal-content { max-width: 1040px; padding: 44px 48px 40px; }
:is(#hiltonchania-modal, #flair-modal, #harmony-modal, #princess-modal, #beach-modal) .jmodal-body > h3 { margin: 0 0 6px; padding-right: 48px; font-family: "CW Heading", Georgia, "Times New Roman", serif; font-size: clamp(28px, 3vw, 36px) !important; font-weight: 500; line-height: 1.15; color: var(--cw-ink); }
:is(#hiltonchania-modal, #flair-modal, #harmony-modal, #princess-modal, #beach-modal) .jmodal-body > p.f-12 { margin: 0; font-size: 14px !important; line-height: 1.6; color: var(--cw-muted); }
:is(#hiltonchania-modal, #flair-modal, #harmony-modal, #princess-modal, #beach-modal) .jmodal-body > p.f-12 a { color: var(--cw-primary); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--cw-accent-light); text-underline-offset: 0.18em; }
:is(#hiltonchania-modal, #flair-modal, #harmony-modal, #princess-modal, #beach-modal) .jmodal-body > p.f-14 { margin: 16px 0 26px; }
:is(#hiltonchania-modal, #flair-modal, #harmony-modal, #princess-modal, #beach-modal) .jmodal-body > .row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; margin: 0; }
:is(#hiltonchania-modal, #flair-modal, #harmony-modal, #princess-modal, #beach-modal) .jmodal-body > .row > [class*="col-"] { width: auto; min-width: 0; float: none; }
:is(#hiltonchania-modal, #flair-modal, #harmony-modal, #princess-modal, #beach-modal) .jmodal-body > .row > [class*="col-"] > .margin2 { margin: 0; }
:is(#hiltonchania-modal, #flair-modal, #harmony-modal, #princess-modal, #beach-modal) .jmodal-body > .row > .col-6:first-child p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.75; color: var(--cw-ink); }
:is(#hiltonchania-modal, #flair-modal, #harmony-modal, #princess-modal, #beach-modal) .jmodal-body > .row > .col-6.bg-white { align-self: start; padding: 22px 24px; border: 1px solid var(--cw-line); border-radius: 3px; background: var(--cw-surface); }
:is(#hiltonchania-modal, #flair-modal, #harmony-modal, #princess-modal, #beach-modal) .jmodal-body > .row > .col-6.bg-white p { margin: 0 0 12px; font-size: 15px; line-height: 1.7; color: var(--cw-muted); }
:is(#hiltonchania-modal, #flair-modal, #harmony-modal, #princess-modal, #beach-modal) .jmodal-body > .row > .col-6.bg-white p:last-child { margin-bottom: 0; }
@media only screen and (max-width: 760px) {
  :is(#hiltonchania-modal, #flair-modal, #harmony-modal, #princess-modal, #beach-modal) > .jmodal-content { padding: 56px 18px 28px; }
  :is(#hiltonchania-modal, #flair-modal, #harmony-modal, #princess-modal, #beach-modal) .jmodal-body > h3 { padding-right: 0; }
  :is(#hiltonchania-modal, #flair-modal, #harmony-modal, #princess-modal, #beach-modal) .jmodal-body > .row { grid-template-columns: 1fr; gap: 20px; }
}