/* Island Compass - villa detail components.
   Loaded ONLY on single villa pages (see ic-villa-detail.php).
   Every selector is scoped to an .ic-vd-* class emitted by the villa
   renderers in ic-villa-parts.php. No element-only or global selectors.
   Deliberately NOT named ic-*.css so the sitewide ic-build glob skips it. */

/* --- Section headings inside the renderers --- */
.ic-vd-h2 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--text-primary);
  margin: 0 0 var(--space-4);
}

/* --- Chips: spec bar, amenities, location --- */
.ic-vd-chip {
  cursor: default;
  transition: none;
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-body);
  white-space: nowrap;
}
.ic-vd-chip:hover { border-color: var(--border-default); }

.ic-vd-specbar { gap: var(--space-2); margin: 0; }
.ic-vd-specbar .ic-vd-chip {
  background: var(--surface-card);
  border-color: var(--border-default);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

.ic-vd-amenities { gap: var(--space-2); margin: 0; }
.ic-vd-amenities .ic-vd-chip {
  background: var(--surface-subtle);
  border-color: var(--border-hairline);
  color: var(--text-secondary);
  font-weight: var(--weight-regular);
  white-space: normal;
}

.ic-vd-loc { gap: var(--space-2); margin: 0; }
.ic-vd-loc .ic-vd-chip {
  background: transparent;
  border-color: var(--border-default);
  color: var(--text-secondary);
}

/* --- Bed configuration --- */
.ic-vd-list {
  display: block;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-hairline);
  gap: 0;
}
.ic-vd-row {
  display: grid;
  grid-template-columns: minmax(150px, 34%) 1fr;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-hairline);
  align-items: baseline;
}
.ic-vd-row dt {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  color: var(--text-tertiary);
  letter-spacing: var(--tracking-body);
}
.ic-vd-row dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

/* --- Rates / availability enquiry message --- */
.ic-vd-p {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-subtle);
  border: 1px solid var(--border-hairline);
  border-left: 2px solid var(--brand-palm, var(--palm-800));
  border-radius: var(--radius-card);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}
.ic-vd-note {
  margin: var(--space-3) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  line-height: var(--leading-body);
  color: var(--text-tertiary);
}

/* --- Rates table (ready for when rates are made public) --- */
.ic-vd-rates {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  margin: 0;
}
.ic-vd-rates thead th {
  text-align: left;
  padding: 0 var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--border-default);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
}
.ic-vd-rates tbody th {
  text-align: left;
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--border-hairline);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
.ic-vd-rates tbody td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--border-hairline);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* --- Pending / coming-soon notice --- */
.ic-vd-notice p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  max-width: var(--measure-body);
}

/* --- Description (theme-post-content) --- */
.ic-vd-content p {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  max-width: var(--measure-body);
  margin: 0 0 var(--space-4);
}
.ic-vd-content p:last-child { margin-bottom: 0; }

/* --- Video walkthrough --- */
.ic-vd-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--radius-media);
  display: block;
}

/* --- Mobile --- */
@media (max-width: 767px) {
  .ic-vd-h2 { font-size: var(--text-h4); margin-bottom: var(--space-3); }
  .ic-vd-row { grid-template-columns: 1fr; gap: var(--space-1); padding: var(--space-3) 0; }
  .ic-vd-p { padding: var(--space-4); }
  .ic-vd-chip { white-space: normal; }
  .ic-vd-rates thead th,
  .ic-vd-rates tbody th,
  .ic-vd-rates tbody td { padding-right: var(--space-3); font-size: var(--text-caption); }
}
/* --- Collapse widget wrappers whose renderer returned nothing ---
   The renderers already output an empty string for missing data, but the
   Elementor widget wrapper survives and still takes a flex gap. Each rule is
   tied to one specific ic-* wrapper class; no .elementor or element selectors.
   Browsers without :has() simply keep today's behaviour. */
.ic-vd-bedswrap:not(:has(.ic-vd-list)),
.ic-vd-videowrap:not(:has(.ic-vd-video)),
.ic-vd-locwrap:not(:has(.ic-vd-loc)),
.ic-vd-availwrap:not(:has(.ic-vd-h2)),
.ic-vnotice:not(:has(.ic-vd-notice)),
.ic-vspec:not(:has(.ic-vd-specbar)),
.ic-vamen:not(:has(.ic-vd-amenities)),
.ic-eyebrow:not(:has(p)) {
  display: none;
}
/* --- Curated gallery: one feature image + four supporting, rest in lightbox --- */
.ic-vd-gal__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--space-2);
  aspect-ratio: 16 / 9;
}
.ic-vd-gal__cell {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--surface-subtle);
}
.ic-vd-gal__cell--hero { grid-column: span 2; grid-row: span 2; }
.ic-vd-gal__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-image, 600ms) var(--ease-standard, ease);
}
.ic-vd-gal__cell:hover img { transform: scale(1.04); }
.ic-vd-gal__rest { display: none; }
.ic-vd-gal__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* QA Aug26: .48 measured ~4.3:1 on bright sand/sky photos, under WCAG AA
     for this text size; matches the existing hover value so it no longer
     depends on a hover state touch devices never trigger. */
  background: rgba(18, 22, 20, 0.58);
  transition: background var(--dur-fast, 150ms) var(--ease-standard, ease);
}
.ic-vd-gal__cell:hover .ic-vd-gal__more { background: rgba(18, 22, 20, 0.58); }
.ic-vd-gal__morelabel {
  color: var(--text-on-dark, #fff);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-button);
  text-align: center;
  padding: 0 var(--space-3);
  line-height: 1.3;
}
.ic-vd-gal__count {
  margin: var(--space-3) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  color: var(--text-tertiary);
}
/* Small galleries keep the same language without holes in the grid */
.ic-vd-gal--c1 .ic-vd-gal__grid { grid-template-columns: 1fr; }
.ic-vd-gal--c1 .ic-vd-gal__cell--hero { grid-column: span 1; grid-row: span 1; }
.ic-vd-gal--c2 .ic-vd-gal__grid { grid-template-columns: repeat(2, 1fr); }
.ic-vd-gal--c2 .ic-vd-gal__cell { grid-row: span 2; }
.ic-vd-gal--c2 .ic-vd-gal__cell--hero { grid-column: span 1; }
.ic-vd-gal--c3 .ic-vd-gal__grid { grid-template-columns: 2fr 1fr; }
.ic-vd-gal--c3 .ic-vd-gal__cell--hero { grid-column: span 1; }
.ic-vd-gal--c4 .ic-vd-gal__grid { grid-template-columns: 2fr 1fr 1fr; }

@media (max-width: 767px) {
  .ic-vd-gal__grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    aspect-ratio: auto;
    gap: var(--space-1);
  }
  .ic-vd-gal__cell--hero { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .ic-vd-gal__cell { aspect-ratio: 1 / 1; }
  .ic-vd-gal--c2 .ic-vd-gal__cell,
  .ic-vd-gal--c3 .ic-vd-gal__cell { grid-row: auto; }
  .ic-vd-gal__morelabel { font-size: var(--text-caption); }
}
/* ==========================================================================
   AVAILABILITY - two months side by side.
   ICS Calendar renders every month into the page and hides all but one with
   an inline style, driving them from a dropdown. The free plugin has no
   multi-month option (its .month_list_all class is Pro-only), so the future
   months are revealed here and the dropdown is retired. Scoped to the villa
   availability widget; this stylesheet only loads on single villa pages.
   ========================================================================== */
.ic-vd-availwrap .ics-calendar {
  opacity: 1 !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
  align-items: start;
  /* QA Aug26: plugin defaults for "off" days (4.03:1) and the "today"
     background (4.49:1) both fell short of WCAG AA on this ground. Both
     tokens now point at the site's own palm-700, which passes comfortably
     and keeps the calendar in the brand palette instead of generic grey. */
  --r34ics--element--month--off--color: var(--palm-700, #2c463b);
  --r34ics--element--month--today-day--background: var(--palm-700, #2c463b);
}
/* Past months stay hidden; every future month shows */
.ic-vd-availwrap .ics-calendar-month-wrapper.past { display: none !important; }
.ic-vd-availwrap .ics-calendar-month-wrapper:not(.past) { display: block !important; }

/* The dropdown and the past-events toggle would fight the fixed layout */
.ic-vd-availwrap .ics-calendar > label,
.ic-vd-availwrap .ics-calendar-select,
.ic-vd-availwrap .ics-calendar-past-events-toggle { display: none !important; }
/* Month grids fill their column */
.ic-vd-availwrap .ics-calendar-month-wrapper { min-width: 0; }
.ic-vd-availwrap .ics-calendar-month-grid { width: 100%; table-layout: fixed; }
.ic-vd-availwrap .ics-calendar-label {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
  font-weight: var(--weight-regular);
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}

/* Stack on narrower screens - two grids side by side stop being legible */
@media (max-width: 900px) {
  .ic-vd-availwrap .ics-calendar {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}
@media (max-width: 767px) {
  .ic-vd-availwrap .ics-calendar { gap: var(--space-4); }
  .ic-vd-availwrap .ics-calendar-label { font-size: 1rem; }
}
/* --- AVAILABILITY: twelve months ------------------------------------------
   The feed now renders a full year rather than five months, so the grid goes
   to three across on wide screens and the past months stay hidden. */
.ic-vd-availwrap .ics-calendar {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 32px);
}
@media (max-width: 1200px) {
  .ic-vd-availwrap .ics-calendar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ic-vd-availwrap .ics-calendar { grid-template-columns: 1fr; }
}
/* Months past the second are hidden until the toggle is used. The class is
   added by JavaScript, so without it every month simply stays visible. */
.ic-vd-availwrap .ics-calendar .ics-calendar-month-wrapper.ic-cal-more { display: none !important; }
.ic-vd-availwrap .ics-calendar.ic-cal-open .ics-calendar-month-wrapper.ic-cal-more { display: block !important; }
@media (min-width: 1200px) {
  .ic-vd-availwrap .ics-calendar.ic-cal-open { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ic-cal-toggle {
  display: inline-block;
  margin-top: clamp(14px, 1.6vw, 20px);
  padding: 11px 20px;
  background: transparent;
  border: 1px solid rgba(194,94,155,.55);
  border-radius: var(--radius-card, 4px);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 300ms ease, border-color 300ms ease, transform 300ms ease;
}
.ic-cal-toggle:hover {
  background: rgba(255,194,232,.18);
  border-color: #C25E9B;
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) { .ic-cal-toggle { transition: none; } .ic-cal-toggle:hover { transform: none; } }
/* --- DARK BAND ON VILLA PAGES --------------------------------------------
   The site-wide body-copy rule in ic-system.css sets text-editor paragraphs
   to dark ink at (0,6,2) and prints after this sheet, so the copy inside the
   green concierge band rendered nearly invisible. Forced light here. Applies
   to every villa page, since this comes from the shared template. */
.ic-vctasec .ic-vcta__p p,
.ic-vctasec p,
.ic-section--dark .ic-vcta__p p {
  color: rgba(253,251,248,.9) !important;
  opacity: 1 !important;
}
.ic-vctasec .ic-vcta__h .elementor-heading-title,
.ic-vctasec h2 {
  color: var(--shell-50, #fdfbf8) !important;
}
.ic-vctasec .ic-eyebrow p,
.ic-vctasec .ic-eyebrow--on-dark p {
  color: #FFC2E8 !important;
  opacity: 1 !important;
}
.ic-vctasec a:not(.elementor-button) {
  color: var(--shell-50, #fdfbf8) !important;
  border-bottom: 1px solid rgba(255,194,232,.6);
  text-decoration: none;
}
/* --- CALENDAR WEEKDAY LABELS ----------------------------------------------
   The plugin prints full day names (Monday, Wednesday) into narrow cells,
   so they wrapped as MONDA/Y and WEDNE/SDAY. Each cell carries a data-dow
   attribute, so the visible text is replaced with a three-letter label in
   CSS. The plugin, the feeds and the booking data are untouched, and the
   full name stays in the markup for screen readers. */
.ic-vd-availwrap .ics-calendar-month-grid thead th { font-size: 0; white-space: nowrap; padding: 6px 2px; }
.ic-vd-availwrap .ics-calendar-month-grid thead th:before {
  font-size: var(--text-caption);
  font-family: var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ic-vd-availwrap .ics-calendar-month-grid thead th[data-dow="1"]:before { content: "Mon"; }
.ic-vd-availwrap .ics-calendar-month-grid thead th[data-dow="2"]:before { content: "Tue"; }
.ic-vd-availwrap .ics-calendar-month-grid thead th[data-dow="3"]:before { content: "Wed"; }
.ic-vd-availwrap .ics-calendar-month-grid thead th[data-dow="4"]:before { content: "Thu"; }
.ic-vd-availwrap .ics-calendar-month-grid thead th[data-dow="5"]:before { content: "Fri"; }
.ic-vd-availwrap .ics-calendar-month-grid thead th[data-dow="6"]:before { content: "Sat"; }
.ic-vd-availwrap .ics-calendar-month-grid thead th[data-dow="0"]:before { content: "Sun"; }

/* --- RATES TABLE: centred values ------------------------------------------
   Price cells and their column headers are centred so the figures sit under
   their season. The row label column stays left, since a left-aligned label
   against centred figures is what makes a rates table readable. */
.ic-vd-rates thead th:not(:first-child),
.ic-vd-rates tbody td {
  text-align: center;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}
.ic-vd-rates thead th:first-child,
.ic-vd-rates tbody th { text-align: left; }
.ic-vd-rates { max-width: 720px; }

/* --- ABOUT TEXT: consistent alignment -------------------------------------
   Left aligned, one measure across every villa, so the paragraph lines up
   with the heading above it and the sections below. Not full justification,
   which opens ragged gaps at this column width. */
.ic-vd-content,
.ic-v__p .elementor-widget-container {
  text-align: left;
}
/* Full width across the content column, on every villa. The 62ch token and
   the 68ch cap are both released; line-height opens slightly because longer
   lines need more leading to stay readable. */
.ic-vd-content p {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  line-height: 1.75;
}
.ic-v__h2 .elementor-heading-title { text-align: left; margin: 0 0 12px; }
/* The About block sits in a container that was holding it to a narrow column.
   Widget, container and paragraph all released so the text spans the page's
   content width uniformly on every villa. */
.ic-v__p,
.ic-v__p .elementor-widget-container,
.ic-vd-content {
  max-width: none !important;
  width: 100%;
}
.ic-vd-content p + p { margin-top: var(--space-4); }
/* The Customizer sets .ic-v__p p { max-width: 64ch } and prints AFTER this
   stylesheet, so the earlier rules here were being overridden and the text
   stayed in a narrow column. Forced, and the actual paragraph selector is
   targeted this time - the About text is a theme-post-content widget, so its
   paragraphs are .ic-v__p p rather than .ic-vd-content p alone. */
.ic-v__p p,
.ic-v__p .elementor-widget-container p,
.ic-vd-content p {
  max-width: none !important;
  width: auto !important;
  line-height: 1.75;
}
/* ==========================================================================
   RATES TABLE - pink header band, equal columns, unit as a subheading.
   Client request 09 Sep: space the columns equally, use pink for the table,
   and lift 'USD per night' out of the corner cell to sit above the table.
   Written after the earlier rates rules in this file, so it supersedes them.
   ========================================================================== */
.ic-vd-rates__unit{margin:0 0 var(--space-4);font-family:var(--font-sans);font-size:var(--text-caption);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--pink-700)}
.ic-vd-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* table-layout:fixed is what makes the columns equal. Without it the
   browser sizes each column to its content, so Summer sat narrower than
   Christmas & New Year and the figures never lined up. */
.ic-vd-rates{width:100%;max-width:none;table-layout:fixed;border-collapse:separate;border-spacing:0;border-radius:var(--radius-card);overflow:hidden}
/* Header band: pink-200 with ink text. White on a pink this light fails
   WCAG AA, and the site already pairs pink-200 with dark ink on the buttons. */
.ic-vd-rates thead th{background:var(--pink-200);color:var(--ink-900);text-align:center;vertical-align:middle;padding:var(--space-5) var(--space-3);border-bottom:0;font-size:var(--text-caption);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;line-height:1.35}
.ic-vd-rates tbody th{text-align:left;padding:var(--space-5) var(--space-4);border-bottom:1px solid var(--border-hairline);font-size:var(--text-body-sm);font-weight:var(--weight-medium);color:var(--text-primary)}
.ic-vd-rates tbody td{text-align:center;padding:var(--space-5) var(--space-3);border-bottom:1px solid var(--border-hairline);font-size:var(--text-body-sm);font-weight:var(--weight-medium);color:var(--text-accent);font-variant-numeric:tabular-nums}
.ic-vd-rates tbody tr:nth-child(even) th,.ic-vd-rates tbody tr:nth-child(even) td{background:var(--pink-50)}
.ic-vd-rates tbody tr:last-child th,.ic-vd-rates tbody tr:last-child td{border-bottom:0}
@media (max-width:767px){
  .ic-vd-rates thead th{padding:var(--space-4) var(--space-2);font-size:.6875rem;letter-spacing:.03em}
  .ic-vd-rates tbody th,.ic-vd-rates tbody td{padding:var(--space-4) var(--space-2);font-size:var(--text-caption)}
}

/* ==========================================================================
   SECTION SPACING - client request 10 Sep 2026 ("spacing is off between
   amenities and rates, and amenities and bedrooms").
   Root causes: (1) the earlier gap rules targeted .e-con-inner, which these
   full-width containers do not have, so they never applied; (2) the empty
   video block between Amenities and Rates still took a flex gap, doubling
   the space there; (3) Bed configuration and Amenities share one block, so
   they sat closer together than every other section.
   Fix: one rhythm for every section on the page, and empty blocks removed.
   ========================================================================== */
body.single-villa .ic-vmain.e-con{row-gap:var(--space-7)!important}
body.single-villa .ic-vmain > .ic-vblock ~ .ic-vblock{margin-top:clamp(16px,2.5vw,24px)}
body.single-villa .ic-vblock.e-con:has(.ic-vd-bedswrap){row-gap:calc(var(--space-7) + clamp(16px,2.5vw,24px))!important}
body.single-villa .ic-vblock:has(.ic-vd-videowrap):not(:has(.ic-vd-video)),
body.single-villa .ic-vblock:has(.ic-vd-locwrap):not(:has(.ic-vd-loc)){display:none}

/* ==========================================================================
   12-MONTH AVAILABILITY CALENDAR - client request 10 Sep 2026.
   Markup from ic_v_cal12() in novamira-sandbox/ic-villa-calendar.php.
   Booked nights use the same pink-200 / ink pairing as the rates table.
   ========================================================================== */
.ic-vd-cal{width:100%}
.ic-vd-cal__legend{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-7);margin:0 0 var(--space-7);font-family:var(--font-sans);font-size:var(--text-caption);color:var(--text-secondary)}
.ic-vd-cal__key{display:inline-flex;align-items:center;gap:var(--space-3)}
.ic-vd-cal__key i{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid var(--border-default);background:transparent}
.ic-vd-cal__key i.is-booked{background:var(--pink-200);border-color:var(--pink-300)}
.ic-vd-cal__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:var(--space-8) var(--space-7)}
.ic-vd-cal__m{min-width:0}
.ic-vd-cal .ic-vd-cal__t{margin:0 0 var(--space-4);font-family:var(--font-sans);font-size:var(--text-body-sm);font-weight:var(--weight-semibold);color:var(--text-primary);text-align:left}
.ic-vd-cal__dow,.ic-vd-cal__days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.ic-vd-cal__dow span{font-family:var(--font-sans);font-size:.6875rem;font-weight:var(--weight-medium);color:var(--text-tertiary);padding-bottom:var(--space-3)}
.ic-vd-cal__days span{font-family:var(--font-sans);font-size:var(--text-caption);line-height:1;padding:7px 0;border-radius:3px;color:var(--text-primary);font-variant-numeric:tabular-nums}
.ic-vd-cal__days span.is-booked{background:var(--pink-200);color:var(--ink-900)}
.ic-vd-cal__days span.is-past{color:var(--text-tertiary);opacity:.5;background:transparent}
@media (max-width:420px){.ic-vd-cal__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-7) var(--space-5)}.ic-vd-cal__days span{padding:6px 0;font-size:.6875rem}}

/* Calendar across the page (10 Sep 2026): the availability widget was shrink-wrapping
   to one month's width inside the flex column, so auto-fill only ever found room for
   one column. Stretch the widget and its wrapper to the full content width. */
body.single-villa .ic-vd-availwrap.elementor-widget{align-self:stretch;width:100%;max-width:100%}
body.single-villa .ic-vd-availwrap .elementor-shortcode,body.single-villa .ic-vd-cal{width:100%}
/* Fixed column counts so the twelve months always fill even rows: 4x3, 3x4, 2x6. */
body.single-villa .ic-vd-cal__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-9) var(--space-8)}
@media (max-width:900px){body.single-villa .ic-vd-cal__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){body.single-villa .ic-vd-cal__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-7) var(--space-5)}}