/* ==========================================================================
   SCV villa pages - shared hero carousel, gallery carousel and type reset.

   Hooks are global classes from the kit (scv-villa-*), attached to the hero
   section, the media box, each slide image, the caption band, the title, the
   dots row, the gallery section, its track and its slides, the content sections
   (details / villas / stay block), the intro block, the highlight/amenity text
   panels, the metric row and each metric item, and the two big row images. The
   numbers come from the About Us hero (its frame, band and title) and from the
   live site's own stylesheet and markup (sliderItem 251x437, navButton circles,
   icon 30px + 10px gap, metrics gap 2.5rem down to 1rem on its small
   breakpoint).

   !important is required wherever a rule must beat an Elementor element style;
   among equally specific !important rules the LAST one in the file wins, so base
   values come first and their media-query tiers after them, widest first.
   ========================================================================== */

/* --- HERO: full bleed, sitting under the sticky transparent header ------
   The theme's header is 197px tall at desktop (126px on a phone), sticky and with
   no background, and exposes its height as --scv-header-h. The About Us hero and
   the Maasai hero are pulled up by exactly that, so the photo runs edge to edge
   from the very top of the viewport; without it the hero starts BELOW the header
   and leaves a band of page background along the top edge.

   The section also carries the kit's own `*-hero` class, which caps it at 1440px
   (that is what left a white margin down the right on a wide screen), and a newly
   built hero section carries Elementor's default 20px padding - which insets the
   photo 20px at each side. Both are overridden here; the checklist asserts the
   photo spans the full viewport width. */
.scv-villa-hero {
	position: relative;
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	margin-top: calc(-1 * var(--scv-header-h, 197px)) !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 5rem !important;
}

.scv-villa-hero-media {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: none !important;
	padding: 0 !important;
	height: 809px;
}

/* the caption band + title, exactly as the About Us hero has them:
   130px above 820px, 110px at <=820px, 36px at <=526px; padding 0 and the title
   3rem off the right edge - both !important because the built band keeps a 10px
   default padding and the title a 0 margin otherwise (see the header note). */
.scv-villa-hero-band {
	width: 100% !important;
	height: 130px !important;
	position: absolute;
	inset-block-end: 4px;
	inset-inline-start: 0;
	padding: 0 !important;
	background-color: rgba(0, 0, 0, 0.3);
	display: flex;
	justify-content: flex-end;
	align-items: center;
	z-index: 3;
}

/* white - the About Us hero and the live site's own caption are white on this
   band; the kit's h1 colour is the terracotta #A6533C, so !important is needed */
.scv-villa-hero-title {
	font-family: Optima, serif;
	font-weight: 400 !important;
	font-size: 75px;
	line-height: 1.16;
	color: #FFFFFF !important;
	text-align: center;
	margin: 0 3rem 0 0 !important;
}

/* ---- hero tiers: widest first, so each property steps down correctly ---- */
@media (max-width: 1024px) {
	.scv-villa-hero-media { height: auto; max-height: 575px; aspect-ratio: 1400 / 809; }
}

@media (max-width: 820px) {
	.scv-villa-hero-band { height: 110px !important; }
}

@media (max-width: 767px) {
	.scv-villa-hero-media { height: auto; aspect-ratio: 738 / 496; max-height: none; }
	.scv-villa-hero { margin-bottom: 2rem !important; }
	.scv-villa-hero-title { font-size: 40px !important; margin-right: 1rem !important; }
}

@media (max-width: 526px) {
	.scv-villa-hero-media { aspect-ratio: 370 / 251; }
	.scv-villa-hero-band { height: 36px !important; }
}

/* --- HERO: the frames, one at a time, each fading in ------------------- */
.scv-villa-hero-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	opacity: 0;
	transition: opacity 1s ease;
	will-change: opacity, transform;
}

.scv-villa-hero-slide.is-active { opacity: 1; }

/* with no JS the first frame is still the hero */
.scv-villa-hero-media > .scv-villa-hero-slide:first-child { opacity: 1; }

/* --- HERO: Ken Burns pull-back, 1.15 -> 1 over 5s, always covering ----- */
@media (prefers-reduced-motion: no-preference) {
	@keyframes scvVillaHeroKenBurns {
		from { transform: scale(1.15); }
		to   { transform: scale(1); }
	}
	.scv-villa-hero-slide.is-active { animation: scvVillaHeroKenBurns 5s linear both; }
}

/* --- HERO: the dots, under the image -----------------------------------
   The active dot scales to 1.3, so the row needs a little room under it or
   the bottom of the active dot reads as cut off. */
.scv-villa-hero-dots {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 18px 0 10px !important;
	min-height: 30px !important;
}

.scv-villa-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background-color: rgba(166, 83, 60, 0.28);
	cursor: pointer;
	transition: background-color .3s ease, transform .3s ease;
}

.scv-villa-dot:hover { background-color: rgba(166, 83, 60, 0.55); }

.scv-villa-dot.is-active { background-color: #A6533C; transform: scale(1.3); }

/* ==========================================================================
   CONTENT COLUMN: the live villa page runs its sections at about 80% of the
   viewport; the kit's own section classes box them at 1440 / 1152px instead.
   Phones keep the full width. (Also needs !important - see the note above.)
   ========================================================================== */
.scv-villa-details,
.scv-villa-villas,
.scv-villa-gallery {
	width: 100% !important;
	max-width: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

@media (min-width: 768px) {
	.scv-villa-details,
	.scv-villa-villas,
	.scv-villa-gallery { width: 80% !important; }
}

/* the intro block's own 52px top padding stacked on top of the hero's margin */
.scv-villa-intro { padding-top: 0 !important; }

/* the break under the gallery's dots, and the stay block's own 44px top padding
   stacking on top of it (owner-tuned: the pair ran 134px) */
.scv-villa-gallery { margin-bottom: 3.5rem !important; }
.scv-villa-stay { padding-top: 0 !important; }

/* the text panel beside each photo keeps the live site's 3rem side padding at
   desktop; it eats too much of the panel on small screens, where the metrics
   then have nowhere to sit on one row */
@media (max-width: 1366px) {
	.scv-villa-panel { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
}

@media (max-width: 767px) {
	.scv-villa-panel { padding-left: 1rem !important; padding-right: 1rem !important; }
	/* 27px of side padding inside the details section left the metric row only
	   ~270px on a 360px phone; trim it so the three still fit on one line */
	.scv-villa-details { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
}

/* ==========================================================================
   METRIC ROW: the live site puts a bronze icon (its own artwork) 10px to the
   left of each metric value, all three items on ONE row. Two things make that
   work at every width:
     - the row is `nowrap`, so an item NEVER jumps to a second line. When the
       panel is too narrow for the three labels side by side (the Swahili page's
       "1 Queen, 2 Single beds, 1 Daybed" is long), the long label wraps inside
       its own item - which is exactly what the live site's row does.
     - the sizes step down as the panel narrows (the live does the same: 20px
       icon, 12px label, 1rem gap at its small breakpoint). The panel is only
       ~638px at 1920 but ~446px at 1440 and ~310px at 1100.
   Labels need the three-class selector because the page-wide type reset sits
   later in the file at the same specificity. Icons are
   uploads/2026/10/scv-metric-{guests,size,bed}.svg.
   ========================================================================== */
.scv-villa-metrics {
	display: flex !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 2.5rem !important;
	width: 100% !important;
}

.scv-villa-metric {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	width: auto !important;
	min-width: 0;
}

.scv-villa-metric img {
	width: 30px !important;
	height: 30px !important;
	object-fit: cover;
	flex: 0 0 auto;
}

.scv-villa-metrics .scv-villa-metric .e-default-p { color: #88755A !important; }

@media (max-width: 1699px) {
	.scv-villa-metrics { gap: 1.25rem !important; }
	.scv-villa-metric { gap: 8px !important; }
	.scv-villa-metric img { width: 22px !important; height: 22px !important; }
	.scv-villa-metrics .scv-villa-metric .e-default-p { font-size: 16px !important; }
}

@media (max-width: 1440px) {
	.scv-villa-metrics { gap: 1rem !important; }
	.scv-villa-metric img { width: 20px !important; height: 20px !important; }
	.scv-villa-metrics .scv-villa-metric .e-default-p { font-size: 14px !important; }
}

/* half-and-half layout and the narrowest text panel: tighten hard */
@media (max-width: 1366px) and (min-width: 1025px) {
	.scv-villa-metrics { gap: 0.5rem !important; }
	.scv-villa-metric { gap: 5px !important; }
	.scv-villa-metric img { width: 16px !important; height: 16px !important; }
	.scv-villa-metrics .scv-villa-metric .e-default-p { font-size: 11px !important; }
}

/* phones: the panel is only ~230-340px wide, so the row goes as tight as it can
   and still reads */
@media (max-width: 767px) {
	.scv-villa-metrics { gap: 0.25rem !important; }
	.scv-villa-metric { gap: 4px !important; }
	.scv-villa-metric img { width: 12px !important; height: 12px !important; }
	.scv-villa-metrics .scv-villa-metric .e-default-p { font-size: 11px !important; }
}

/* small phones: shave the panel padding and the icons once more */
@media (max-width: 400px) {
	.scv-villa-panel { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
	.scv-villa-metrics { gap: 0.25rem !important; }
	.scv-villa-metric { gap: 3px !important; }
	.scv-villa-metric img { width: 10px !important; height: 10px !important; }
	.scv-villa-metrics .scv-villa-metric .e-default-p { font-size: 10px !important; }
}

/* ==========================================================================
   ROW IMAGES: the highlights and amenities photos were pinned at 356px while
   the text box beside them grew past that below 1920px. Stretched instead, so
   the photo is exactly as tall as the text at every width.
   ========================================================================== */
.scv-villa-row-image {
	height: auto !important;
	align-self: stretch !important;
	object-fit: cover !important;
}

/* ==========================================================================
   GALLERY: one row of every villa photo, autorun, dots + arrows
   ========================================================================== */
.scv-villa-gallery-track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 16px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 4px;
}

.scv-villa-gallery-track::-webkit-scrollbar { display: none; width: 0; height: 0; }

.scv-villa-gallery-track.is-dragging {
	scroll-snap-type: none;
	scroll-behavior: auto;
	user-select: none;
}

.scv-villa-gallery-slide {
	flex: 0 0 auto;
	width: 437px;
	max-width: 437px;
	height: 251px;
	object-fit: cover;
	object-position: center;
	display: block;
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.scv-villa-gallery-slide { width: 400px; max-width: 400px; height: 225px; }
}

@media (max-width: 767px) {
	.scv-villa-gallery-slide { width: 392px; max-width: 392px; height: 200px; }
}

@media (max-width: 526px) {
	.scv-villa-gallery-slide { width: 78vw; max-width: 78vw; height: 190px; }
}

@media (hover: hover) and (pointer: fine) {
	.scv-villa-gallery-track { cursor: grab; }
	.scv-villa-gallery-track.is-dragging { cursor: grabbing; }
}

.scv-villa-gallery-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.8);
	color: #A6533C;
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease, opacity .3s ease;
}

.scv-villa-gallery-arrow svg { display: block; width: 18px; height: 18px; }

.scv-villa-gallery-arrow:hover,
.scv-villa-gallery-arrow:focus-visible {
	background-color: #A6533C;
	color: #FFFFFF;
}

.scv-villa-gallery-arrow.is-off { opacity: .35; pointer-events: none; }

.scv-villa-gallery-arrow--prev { left: 8px; }
.scv-villa-gallery-arrow--next { right: 8px; }

.scv-villa-gallery-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 16px 0 10px;
}

@media (max-width: 767px) {
	.scv-villa-gallery-arrow { width: 38px; height: 38px; }
}

/* ==========================================================================
   TYPE: the site's global defaults, the same reset the About Us and the
   Accommodation pages carry. Scoped to the PAGE CONTENT (Elementor renders it
   as data-elementor-type="wp-page") so the theme-builder header and footer keep
   their own type. Elementor publishes its own responsive scale in
   uploads/elementor/css/default-<device>.css: 75/48/38/30/25/20 and body 18 at
   desktop, smaller below - the reset pins the desktop numbers everywhere with
   one small-screen step put back, the h1 at 40px on a phone.

   NOTE: this block sits last on purpose (it is the page-wide reset) - page
   specific overrides that must win over it use a 3-class selector instead of
   relying on source order.
   ========================================================================== */
[data-elementor-type="wp-page"] .e-default-h1,
[data-elementor-type="wp-page"] .e-default-h1 span { font-family: Optima, serif !important; font-weight: 400 !important; font-size: 75px !important; line-height: 1.16 !important; }
[data-elementor-type="wp-page"] .e-default-h2,
[data-elementor-type="wp-page"] .e-default-h2 span { font-family: Optima, serif !important; font-weight: 400 !important; font-size: 48px !important; line-height: 1.16 !important; }
[data-elementor-type="wp-page"] .e-default-h3,
[data-elementor-type="wp-page"] .e-default-h3 span { font-family: Optima, serif !important; font-weight: 400 !important; font-size: 38px !important; line-height: 1.16 !important; }
[data-elementor-type="wp-page"] .e-default-h4,
[data-elementor-type="wp-page"] .e-default-h4 span { font-family: Optima, serif !important; font-weight: 400 !important; font-size: 30px !important; line-height: 1.16 !important; }
[data-elementor-type="wp-page"] .e-default-h5,
[data-elementor-type="wp-page"] .e-default-h5 span { font-family: Optima, serif !important; font-weight: 400 !important; font-size: 25px !important; line-height: 1.16 !important; }
[data-elementor-type="wp-page"] .e-default-h6,
[data-elementor-type="wp-page"] .e-default-h6 span { font-family: Optima, serif !important; font-weight: 400 !important; font-size: 20px !important; line-height: 1.16 !important; }

[data-elementor-type="wp-page"] .e-default-p,
[data-elementor-type="wp-page"] .e-default-p span { font-family: "Neue Einstellung", Optima, serif !important; font-weight: 400 !important; font-size: 18px !important; line-height: 1.44 !important; }

@media (max-width: 767px) {
	[data-elementor-type="wp-page"] .e-default-h1,
	[data-elementor-type="wp-page"] .e-default-h1 span { font-size: 40px !important; }
	/* The site's DEFAULT paragraph size (Elementor's published responsive scale,
	   uploads/elementor/css/default-<device>.css, cross-checked against the kit's
	   "Text" system-typography = 18px) is 18px desktop, 18px tablet (no <=1024
	   override) and 16px on the phone (<=767). The reset above pinned the desktop
	   number at ALL widths, so on the phone every ordinary paragraph on this page
	   rendered 2px above the site default. Restore the phone step here, for
	   ordinary paragraphs only - the deliberately matched meal-block pieces
	   (H5/H6/LI/clock) do NOT carry .e-default-p and are untouched. */
	[data-elementor-type="wp-page"] .e-default-p,
	[data-elementor-type="wp-page"] .e-default-p span { font-size: 16px !important; }
}

/* ==========================================================================

/* ==========================================================================

/* ==========================================================================

/* ==========================================================================

/* ==========================================================================
   Dining page (41) - layout corrections, measured against the villa pages.

   The hero and carousel here were built from scratch, so Elementor gives the new
   containers a row flex context; on the villa pages those containers carry their own
   local styles. Everything below only restores the measured 407 values:
     hero            flex-direction column, spanning the viewport
     hero media      display block, full width (photo 1265x809 at desktop)
     hero slides     fill the media, 5s Ken Burns
     carousel        one row, tiles 437x251 desktop / 392x200 phone
     carousel phone  wrapper full width with 20px inset, track 10px, scrolls
   !important because the element's own generated class outranks a single global-class
   selector. Bump SCV_DINING_PAGE_ASSETS_VERSION_1379 on every edit.
   ========================================================================== */
.scv-villa-hero { flex-direction: column !important; }
.scv-villa-hero-media { display: block !important; width: 100% !important; }
.scv-villa-hero-media > .scv-villa-hero-slide { width: 100% !important; height: 100% !important; }
.scv-villa-gallery-track { display: flex !important; flex-wrap: nowrap !important; }
.scv-villa-gallery-slide { height: 251px !important; flex: 0 0 auto !important; }
/* the wrapper is a flex ROW, so the track is squeezed to make room for the 15 dots + the arrow, which then
   float in the empty space to its right (very obvious here, barely noticeable with the villa pages' 6 dots).
   A block wrapper lets the strip fill it and the controls sit beneath/over it as intended. */
.scv-villa-gallery { display: block !important; }
.scv-villa-gallery-track { width: 100% !important; }
/* The caption band is absolutely placed and the dots row follows it, so the band ended 4px short of the
   hero's bottom edge - a visible step where the grey dots strip pokes out under the dark band. Anchor the
   band to the bottom of the photo (the dots row is 38px: 18 top + 10 bottom padding + the 10px dot) so the
   band is flush with the image and the dots sit cleanly underneath, as on the About hero. */
.scv-villa-hero-band { bottom: 38px !important; }
@media (max-width: 767px) {
  .scv-villa-gallery { width: 100% !important; padding: 0 0 0 20px !important; }
  .scv-villa-gallery-track { width: auto !important; flex: none !important; padding-left: 10px !important; overflow-x: auto !important; }
  .scv-villa-gallery-slide { width: 392px !important; max-width: 392px !important; height: 200px !important; }
}

/* ==========================================================================
   Restaurant & Bar (page 41) — the restaurant meal blocks, matched to the live
   site (www.swahilicoastvillas.com/dining, .menuTextInner). Measured on the live
   page at 1280 / 640 / 480 and reproduced here:
     H5 meal title   Optima 400 55px / lh 50px / #A6533C
     H6 sub-heading  16px 400 #88755A
     UL              disc, padding-left 40px, margin 12px 0
     LI              16px 400 #88755A, lh 15px, margin-bottom 12px
     clock row       flex, align-items center, gap 16px, margin-top 16px,
                     15px #88755A + inline 25x25 clock SVG (path fill #A6533C)
   The live page steps down below 640px, so that step is reproduced too.
   Hooks are scv-dining-restaurant-* only, so nothing here can reach the hero,
   carousel, bar or any other section.
   Selectors carry the section class + hook + element hook = 3 classes, because
   Elementor emits "[data-elementor-type=wp-page] .e-default-hN/h6/p { …!important }"
   at (0,2,0) — one class + !important loses to it outright (the H5 rendered at
   Elementor's 25px default until this prefix was added).
   ========================================================================== */
.dining-restaurant .scv-dining-restaurant-meal .scv-dining-restaurant-meal-title {
  font-family: Optima, serif !important;
  font-weight: 400 !important;
  font-size: 55px !important;
  line-height: 50px !important;
  color: #A6533C !important;
  margin: 0 !important;
}
/* ORDINARY TEXT NOW SITS ON THE SITE'S GLOBAL DEFAULTS (8th pass).
   Owner: "the restaurant section's body text is too small ... the owner now wants
   it on the site's GLOBAL default instead, the same as the Bar's" and "check the
   fonts are the same too". The Bar section is the reference and was MEASURED on
   this page (1265/1024/390): its body copy renders .e-default-p (18/18/16,
   "Neue Einstellung" 400) and its sub-headings render .e-default-h3 (38px, Optima
   400) - both straight from the global reset further up this file. So the three
   ordinary pieces here are moved onto the SAME global defaults:
     H6 sub  -> .e-default-h6 (Optima 400, 20/20/16, lh 1.16). Its size is no longer
                pinned by this snippet, so at >=768 it comes straight from the global
                rule; the <=767 block below restores the site's 16px phone step.
     LI      -> the global body font, "Neue Einstellung" 400, 18/18/16, lh 1.44.
                The <ul>/<li> are BARE (the browser hoists the <ul> out of the
                .e-default-p <p>, so the list keeps no Elementor class); the snippet
                must therefore restate the global font for the list itself.
     clock   -> .e-default-p (18/18/16, "Neue Einstellung" 400, lh 1.44) - now
                inherited, nothing pinned here but the colour/margin.
   Colour stays the deliberate live-site #88755A for all three, and the H5 meal
   titles stay 55px terracotta (owner: keep - a heading, not ordinary text).
   The Bar's sub-headings are Optima like these H6s; the Bar's BODY is
   "Neue Einstellung" like the LI/clock. See the report for the 38 vs 20 note. */
.dining-restaurant .scv-dining-restaurant-meal .scv-dining-restaurant-sub {
  font-weight: 400 !important;
  color: #88755A !important;
  line-height: 1.16 !important;
  margin: 0 !important;
}
.dining-restaurant .scv-dining-restaurant-meal .scv-dining-restaurant-list {
  margin: 0 !important;
  padding: 0 !important;
}
.dining-restaurant .scv-dining-restaurant-meal ul {
  list-style: disc outside !important;
  padding-left: 40px !important;
  margin: 12px 0 !important;
}
.dining-restaurant .scv-dining-restaurant-meal li {
  font-family: "Neue Einstellung", Optima, serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: #88755A !important;
  line-height: 1.44 !important;
  margin-bottom: 12px !important;
  list-style: disc outside !important;
}
.dining-restaurant .scv-dining-restaurant-clock {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 0 !important;
  margin-top: 16px !important;
}
.dining-restaurant .scv-dining-restaurant-clock .scv-dining-restaurant-clock-text {
  color: #88755A !important;
  margin: 0 !important;
}
.dining-restaurant .scv-dining-restaurant-clock .scv-dining-restaurant-clock-icon {
  width: 25px !important;
  height: 25px !important;
  flex: 0 0 25px !important;
  display: block !important;
  line-height: 0 !important;
}
.dining-restaurant .scv-dining-restaurant-clock .scv-dining-restaurant-clock-icon svg {
  width: 25px !important;
  height: 25px !important;
  display: block !important;
}
.dining-restaurant .scv-dining-restaurant-clock .scv-dining-restaurant-clock-icon svg path {
  fill: #A6533C !important;
}
/* The site's global TYPE steps at <=767 (Elementor's mobile tier: .e-default-p and
   the rest render 16px there), so the ordinary text steps there too. The <=639
   block below keeps only the LAYOUT bits of the live match (list indent, clock gap,
   icon size) and the H5 title's small-screen size. */
@media (max-width: 767px) {
  .dining-restaurant .scv-dining-restaurant-meal .scv-dining-restaurant-sub { font-size: 16px !important; }
  .dining-restaurant .scv-dining-restaurant-meal li { font-size: 16px !important; }
}
@media (max-width: 639px) {
  .dining-restaurant .scv-dining-restaurant-meal .scv-dining-restaurant-meal-title { font-size: 25px !important; line-height: 25px !important; }
  .dining-restaurant .scv-dining-restaurant-meal ul { padding-left: 20px !important; margin: 4px 0 !important; }
  .dining-restaurant .scv-dining-restaurant-clock { gap: 8px !important; }
  .dining-restaurant .scv-dining-restaurant-clock .scv-dining-restaurant-clock-icon,
  .dining-restaurant .scv-dining-restaurant-clock .scv-dining-restaurant-clock-icon svg { width: 20px !important; height: 20px !important; }
}

/* ==========================================================================
   Restaurant CARDS CAROUSEL (page 41) — the three meal blocks become three
   full-width cards in a one-card-at-a-time carousel, each with its own
   "Download Full Menu" CTA. It reuses the villa carousel hooks
   (.scv-villa-gallery / -track / -slide) so the snippet's own script builds
   the arrows, dots and drag for free - but the villa tile metrics (437x251,
   80% width, 3.5rem bottom margin) are overridden HERE ONLY so one card fills
   the visible strip. The card is the meal block itself: its background stays
   the text block's own (#F4F2ED painted by .restaurant-panel) and every type
   hook (-meal-title / -sub / ul / li / -clock) is unchanged.
   Scoped with .dining-restaurant (2 classes) so the villa pages are untouched,
   and so these beat the villa rules, which also carry !important.
   ========================================================================== */
.dining-restaurant .scv-villa-gallery {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}
.dining-restaurant .scv-villa-gallery-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  width: 100% !important;
  padding: 0 !important;
}
.dining-restaurant .scv-villa-gallery-slide {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  scroll-snap-align: start !important;
}
/* ONE "Download Full Menu" CTA sits BELOW the whole carousel, centred under the
   dots row. The dots are JS-appended inside .scv-villa-gallery; the button is the
   next sibling in .restaurant-panel, so it renders beneath them. The card area's
   height is driven by the tallest card via the track's default align-items:stretch,
   so the button sits cleanly beneath the dots. */
.dining-restaurant .restaurant-panel > .elementor-widget-button { text-align: center !important; margin: 0 !important; }

@media (max-width: 767px) {
  .dining-restaurant .scv-villa-gallery { width: 100% !important; padding: 0 !important; }
  .dining-restaurant .scv-villa-gallery-track { width: 100% !important; padding: 0 !important; overflow-x: auto !important; }
  .dining-restaurant .scv-villa-gallery-slide { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; }
}

/* ==========================================================================
   Restaurant carousel ARROWS OUTSIDE THE CARD (owner: "place the arrows
   outside of the text"). The snippet's script builds the arrows into
   .scv-villa-gallery at left/right 8px, where they land ON the card's text
   because the card (the slide) fills the wrapper edge to edge. This block
   gives the wrapper - ONLY inside .dining-restaurant - a horizontal gutter and
   anchors the arrows in it, so the card is narrower and each arrow sits clear
   of the card box on its own side (no overlap with the text). The gutter is
   symmetric, so the dots row keeps the same centre and the card stays centred
   in the panel; nothing here touches the card's own styling, the dots, or the
   CTA, which is a sibling of the wrapper and is unaffected.
   Scoped with .dining-restaurant + the arrow hook (2 classes) so it beats the
   snippet's own 1-class .scv-villa-gallery-arrow--prev/next rules (both carry
   !important), and placed LAST in this file so it also beats the
   .dining-restaurant .scv-villa-gallery padding:0 !important rules above.
   Desktop: gutter 60px, arrow (48px) inset 6px -> 6px clear of the card.
   Phone:   gutter 42px, arrow (38px) inset 2px -> 2px clear of the card (MINIMUM
            that keeps the 38px arrow fully outside the card; was 46px, see the
            WIDTH RECLAIM block at the end of this file).
   ========================================================================== */
.dining-restaurant .scv-villa-gallery { padding: 0 60px !important; }
.dining-restaurant .scv-villa-gallery-arrow--prev { left: 6px !important; }
.dining-restaurant .scv-villa-gallery-arrow--next { right: 6px !important; }

@media (max-width: 767px) {
  .dining-restaurant .scv-villa-gallery { padding: 0 42px !important; }
  .dining-restaurant .scv-villa-gallery-arrow--prev { left: 2px !important; }
  .dining-restaurant .scv-villa-gallery-arrow--next { right: 2px !important; }
}
/* ==========================================================================
   Restaurant meal-card INTERNAL SPACING + VERTICAL CENTRING (page 41)
   Owner: "the margins between subtitles and text paragraphs are too big - copy
   the margins from the live site" and "vertically centre each card".

   1. WHY THE SPACING WAS WRONG
   The card is an Elementor e-flexbox: display:flex; flex-direction:column;
   gap:6px. The live block (www.swahilicoastvillas.com/dining .Dining_menuTextInner)
   is plain BLOCK flow with the same values, so the live relies on MARGIN
   COLLAPSING (ul margin-bottom 12 vs clock margin-top 16 collapse to 16).
   flexbox NEVER collapses margins, and the card's DOM has two extra children the
   eye cannot see: the browser HOISTS each <ul> out of its e-paragraph (leaving an
   EMPTY <p>) and Elementor leaves a TRAILING empty <p> after every list (whose
   margin-bottom is 14.4px). The flex items are therefore
     [h5, h6, p, ul, p, (h6, p, ul, p), clock]
   so Elementor's 6px default gap plus the phantom <p> margins stacked on top of
   the real margins. Measured BEFORE this block (desktop 1265 / phone 390):
     h5->h6      6     / 6       (live 0)
     h6->ul     24     / 16      (live 12)   <- the gap the owner sees
     ul->h6b    38.39  / 30.39   (live 12)
     h6b->ulb   24     / 16      (live 12)
     ul->clock  54.39  / 46.39   (live 16)

   2. THE FIX
   Keep the card a flex COLUMN so justify-content:center can put its content in
   the middle of the (stretched, equal-height) card box, but drop the gap and the
   phantom <p> margins and express the two collapsed pairs explicitly, because
   flex ADDS adjacent margins instead of collapsing them:
     h6 -> ul     : ul margin-top 12                            = live 12
     ul -> h6b    : ul margin-bottom 12 + h6 margin-top 0       = live 12
     ul -> clock  : ul margin-bottom 12 + clock margin-top 4    = live max(12,16)=16
   The live RENDERED gap is 12 every time and 16 before the clock at BOTH widths
   (the live's <=639px ul margin of 4px only reaches 12/16 via collapsing), so the
   UL margin is 12px 0 at every width. Net effect: every rendered gap is identical
   to the live one - 0 / 12 / 12 / 12 / 12 / 16 at desktop AND phone - while the
   H5/H6/LI computed margins and every type value stay exactly the live ones.

   3. CENTRING
   The card is a stretched flex item in .scv-villa-gallery-track, so its BOX keeps
   the height of the tallest card; justify-content:center then centres each card's
   content inside that box (shorter cards no longer hug the top). The card's
   width/height are untouched (flex:0 0 100% comes from the carousel block).
   Scoped .dining-restaurant + the slide/meal hook (3 classes) so it beats the
   carousel block's own `.dining-restaurant .scv-villa-gallery-slide
   { display:flex !important; flex-direction:column !important }`, and placed
   LAST in the file so nothing above can re-open or re-space the context.
   ========================================================================== */
.dining-restaurant .scv-dining-restaurant-meal.scv-villa-gallery-slide {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0 !important;
  row-gap: 0 !important;
}
/* the hoisted e-paragraph wrappers and Elementor's trailing <p> are always empty;
   zeroing them stops their margins joining the flex sums (the trailing one is
   14.4px, which used to push the clock row away). */
.dining-restaurant .scv-dining-restaurant-meal > p {
  margin: 0 !important;
  padding: 0 !important;
}
/* flex cannot collapse ul margin-bottom (12) with clock margin-top, so the live
   collapsed 16px (max(12,16)) is expressed as 12 + 4. */
.dining-restaurant .scv-dining-restaurant-meal ul {
  margin: 12px 0 !important;
}
.dining-restaurant .scv-dining-restaurant-meal .scv-dining-restaurant-clock {
  margin-top: 4px !important;
}

/* ==========================================================================
   Restaurant section HEIGHT REDUCTION (page 41, owner: "reduce the height of
   the whole section").

   MEASURED before this block - the section box was 1030px tall:
       25  section padding-block-start  (the section's own global class)
      + 10  row padding-block-start      (Elementor's atomic DEFAULT,
                                          .elementor .e-flexbox-base, not a design value)
      + 920 the row's tallest item = the static photo (.restaurant-image
            height:920px; object-fit:cover, a 592.5x920 portrait crop of the 1280x855
            original). The beige .restaurant-panel is only 729.78 tall naturally, but the
            row is flex-row with the default align-items:stretch, so the panel is
            STRETCHED to the photo. The PHOTO sets the section's height, not the panel.
      + 10  row padding-block-bottom     (same default)
      + 65  section padding-block-end    (the section's own global class)
   The card box (551.78) and the card's 10px inner padding sit INSIDE the panel and are
   ~370px shorter than the photo, so neither can shorten the section at desktop; and the
   tallest card (Dinner, content span 531.78) already fills its content box EXACTLY, so a
   max-height on the card box would only clip it. The only real levers are the two
   vertical padding pairs around the row.

   WHAT THIS DOES
     - drops the row's 10px top/bottom: Elementor's flexbox default, and pure empty space
       (the photo and the panel fill the row edge to edge; the row is overflow:hidden).
     - drops the section's 25px top padding: the section above (dining-intro) already ends
       with 52px of its own, so the gutter above stays clear.
     - trims the section's 65px bottom padding to 32px (SUPERSEDED - see the BOTTOM-EDGE
       TARGET block at the end of this file: the whole gap under the CTA is now 30px, carried
       by the PANEL's own bottom padding because the panel is where that space renders).
   Only padding-block is touched: the horizontal padding is untouched, so the photo stays
   50% of the row (592.5px at 1265px viewport) at x=40 and no card width moves. Nothing
   inside the row moves relative to the row - the whole row simply rises by the padding
   removed above it, and the section's bottom edge comes up by the rest.
   Result (desktop 1265): section 1030 -> 952px (-78px, -7.57%).
   ========================================================================== */
.dining-restaurant { padding-block-start: 0 !important; padding-block-end: 0 !important; }
.dining-restaurant .restaurant-row { padding-block-start: 0 !important; padding-block-end: 0 !important; }

/* ==========================================================================
   Restaurant section BOTTOM EDGE = 30px UNDER THE CTA (page 41, sixth pass,
   owner: "reduce it more - so that the bottom edge is just 30px below the
   DOWNLOAD button"). Target: section.bottom - button.bottom == 30px at 1265,
   1024 and 390 (within 1px).

   1. THE PHOTO NO LONGER SETS THE ROW'S HEIGHT
   .restaurant-row is `display:flex; flex-direction:row` and .restaurant-image is NOT
   wrapped in a column - the <img> ITSELF is the flex item
   (<img class="e-image-base e-default-img restaurant-image">), carrying
   `.elementor .restaurant-image{width:50%;height:920px;object-fit:cover}` from
   local-41-frontend-desktop.css. A DEFINITE 920px cross size makes it the row's tallest item,
   so the row is 920 and the panel - stretched by the row's default align-items:stretch - has
   ~230px of empty beige under the CTA.
   Setting the img's height to `auto` removes its definite cross size: its hypothetical cross
   size becomes just its aspect-ratio height (585 x 1203/1800 = 391), the flex line then takes
   the PANEL's hypothetical height (its real content), and `align-self: stretch` (which only
   applies while the cross size is auto) grows the img to exactly that height - so the photo
   crops vertically to fill the row instead of defining it. object-fit:cover is restated
   because a stretched replaced element is exactly the case it exists for: the box changes
   shape, the picture inside does not (aspect preserved, sides cropped).
   Why not the absolute-position recipe: there is no column div to anchor to (the img IS the
   flex item), so `position:absolute` would take it out of flow and let the 50%-wide panel
   slide to the row's left edge, i.e. MOVE the panel and the carousel - the one thing that
   must not happen. The stretch route moves nothing: the img keeps width 50% (585px) at x40
   and the panel keeps its half of the row.
   The desktop-only media query is deliberate: at <=1024 the row is a COLUMN and the photo is
   a stacked block with its own tablet/mobile height (460 / 300), which is longer neither
   stretching anything (the panel is the taller child there) nor part of the target - a global
   `height:auto` would override those with the raw aspect height (621 at 1024, 197 at 390) and
   change the photo's box at both tiers for nothing.

   2. THE 30px IS THE PANEL'S BOTTOM PADDING, NOT THE SECTION'S
   The button is the panel's LAST child, so the space under it is
   panel.padding-block-end + section.padding-block-end, and nothing else:
     before: 42 (panel, desktop) / 32 (panel, <=1024) + 32 (section) = 74 / 64
     after : 30 (panel, all widths) + 0 (section)                    = 30
   The section's own bottom padding therefore goes to 0 and the panel carries all 30px, so the
   BEIGE's bottom edge - the edge the owner is looking at - is itself 30px below the button and
   the section's bottom edge coincides with it (the section background is transparent). The
   separation from the Bar section does not close: that section's row keeps its 10px
   padding-block-start, so the two beige blocks stay 40px apart (they were 42).
   Nothing above the button moves: the panel's top padding (42) and every internal relation
   are untouched, so the card, dots and CTA keep their measured positions.
   ========================================================================== */
@media (min-width: 1025px) {
  .dining-restaurant .restaurant-image {
    height: auto !important;
    align-self: stretch !important;
    object-fit: cover !important;
  }
}
.dining-restaurant .restaurant-panel { padding-block-end: 30px !important; }

/* ==========================================================================
   Restaurant phone WIDTH RECLAIM (page 41, ninth pass, v1.3.7).

   PROBLEM (measured at 390): the 8th pass raised the card's ordinary text onto
   the site's global defaults (H6 20/20/16, LI 18/18/16), and the phone card was
   only 166px wide, so 16px text wrapped into a 1198px-tall card and the section
   ballooned 1006 -> 1654px.

   WHY THE CARD WAS ONLY 166 WIDE - the full 390 horizontal budget:
        10  section margin      (.dining-restaurant width:calc(100%-20px), page frame)
       +20  section padding-inline-start   (the section's global class)
       +10  row padding-inline-start       (Elementor atomic DEFAULT, .e-flexbox-base,
                                            NOT design - padding:10px, no !important)
       +26  panel padding-inline-start     (local-41 <=1024 override; 46 at desktop)
       +46  wrapper gutter (arrow inset 2 + 38px arrow + 6px clear)
      = 166  card (the meal slide)
      ... mirrored on the right: 46+26+10+20+10.
   The row/panel/gutter chain therefore eats 168px on each side and the card gets
   166 (43% of the viewport). The villa tile metrics and the wrapper's own
   padding:0 rule are all already overridden; this is pure spacing, not content.

   WHAT THIS DOES (phone only, @media max-width:767px; desktop/tablet untouched):
     - section padding-inline 20 -> 0   (the section keeps its 10px page frame)
     - row    padding-inline 10 -> 0    (Elementor's atomic default, not design)
     - panel  padding-inline 26 -> 0    (the card carries its own 10px inner
                                          padding; the 42px gutter, not the panel,
                                          is what now separates card from beige edge)
     - wrapper gutter 46 -> 42          (the minimum the 38px arrows need outside
                                          the card: 2px inset + 38 + 2px clear)
   Result at 390: card 166 -> 286 (+120, +72%), panel/wrapper 310 -> 370, tallest
   card 1198 -> 761, section 1654 -> 1217 (-437, -26%), arrows still OUTSIDE with
   2px clear, gap under the CTA still 30. The section keeps its x=10/370 box, the
   same frame every other section on the page uses (intro/bar/special-food/schedule
   all x=10 w=370), so the phone layout stays visually consistent; the photo and
   panel simply fill the row (370) instead of leaving 30px each side.
   WHY NOT 300: a 300px card + two 38px arrows = 376px, leaving 7px TOTAL for the
   page gutters + arrow insets, i.e. the arrows would sit flush against the screen
   edge. 286 is the widest that keeps a 2px arrow clear inside the page frame;
   300+ is only reachable by deleting the shared 10px section frame (making this
   one section full-bleed, inconsistent with the rest of the page) or by overlaying
   the arrows on the card. Reported, not applied.
   ========================================================================== */
@media (max-width: 767px) {
  .dining-restaurant { padding-inline: 0 !important; }
  .dining-restaurant .restaurant-row { padding-inline: 0 !important; }
  .dining-restaurant .restaurant-panel { padding-inline: 0 !important; }
}