/*
Theme Name: The Ivy
Theme URI: https://theivytt.com
Description: Child theme for The Ivy Steakhouse. Holds the brand fonts and the ivy- utility classes that Elementor Free cannot express on its own. Colours, type scale, buttons and container width are owned by Elementor > Site Settings.
Author: The Ivy
Template: hello-elementor
Version: 1.0.0
Text Domain: the-ivy
*/

/* ---------------------------------------------------------------------------
   1. Tokens
   Every utility below reads these. They point at Elementor's own global colour
   variables, so changing a colour in Site Settings updates the utilities too.
   Never hardcode a brand hex anywhere else in this file.
--------------------------------------------------------------------------- */
:root {
	--ivy-ivy:    var(--e-global-color-primary,   #11231A);
	--ivy-ink:    var(--e-global-color-secondary, #0F1713);
	--ivy-stone:  var(--e-global-color-text,      #4E5852);
	--ivy-gold:   var(--e-global-color-accent,    #C7A66B);
	--ivy-paper:  var(--e-global-color-ivypaper,  #FAF6EF);
	--ivy-cream:  var(--e-global-color-ivycream,  #F2EBDE);
	--ivy-light:  var(--e-global-color-ivylight,  #193526);
	--ivy-wine:   var(--e-global-color-ivywine,   #723540);
	--ivy-white:  var(--e-global-color-ivywhite,  #FFFFFF);

	--ivy-line:   rgba(17, 35, 26, .13);
	--ivy-line-d: rgba(255, 255, 255, .08);

	--ivy-r-sm:   8px;
	--ivy-r-md:   20px;
	--ivy-r-lg:   34px;
	--ivy-r-pill: 999px;

	/* Shadows are tinted green, never neutral black. */
	--ivy-shadow:    0 12px 35px rgba(10, 20, 14, .04);
	--ivy-shadow-up: 0 18px 40px rgba(10, 20, 14, .09);
}

body {
	background: var(--ivy-paper);
}

/* ---------------------------------------------------------------------------
   2. Two traps that bite every page
--------------------------------------------------------------------------- */

/* Elementor binds the heading widget's colour to Global Primary, which here is
   ivy green. Every heading would render green unless coloured by hand,
   including any the client adds later. The extra `body` outranks Elementor's
   own rule while per-widget colours stay more specific and still win. */
body .elementor-widget-heading .elementor-heading-title {
	color: var(--ivy-ink);
}

/* A linked heading renders as <div class="elementor-heading-title"><a>, so the
   global link colour beats the heading's own colour. */
.elementor-heading-title a {
	color: inherit;
}

/* ---------------------------------------------------------------------------
   3. Type
--------------------------------------------------------------------------- */
.ivy-serif .elementor-heading-title,
.ivy-serif {
	font-family: "Instrument Serif", Georgia, serif;
	font-weight: 400;
}

/* Display type sits tight. */
.ivy-display .elementor-heading-title {
	line-height: .82;
	letter-spacing: -.045em;
}

.ivy-h2 .elementor-heading-title {
	line-height: .95;
}

.ivy-eyebrow,
.ivy-eyebrow p {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin: 0;
	color: var(--ivy-stone);
}

/* Gold eyebrows only ever sit on a dark ground. */
.ivy-ground-ivy .ivy-eyebrow,
.ivy-ground-ivy .ivy-eyebrow p,
.ivy-shell .ivy-eyebrow,
.ivy-shell .ivy-eyebrow p,
.ivy-hero .ivy-eyebrow,
.ivy-hero .ivy-eyebrow p {
	color: var(--ivy-gold);
}

/* Running text stays inside a comfortable measure. */
.ivy-measure {
	max-width: 62ch;
}

.ivy-measure-sm {
	max-width: 46ch;
}

/* ---------------------------------------------------------------------------
   4. Grounds
--------------------------------------------------------------------------- */
.ivy-ground-paper { background-color: var(--ivy-paper); }
.ivy-ground-cream { background-color: var(--ivy-cream); }

.ivy-ground-ivy {
	background-color: var(--ivy-ivy);
	color: #ECEFE9;
}

.ivy-ground-ivy .elementor-heading-title,
.ivy-shell .elementor-heading-title {
	color: var(--ivy-white);
}

.ivy-ground-ivy p,
.ivy-shell p {
	color: #CBD3CC;
}

/* The gold band. Its own ground, so ink text on gold is the one place gold and
   ink meet. */
.ivy-goldband {
	background-color: var(--ivy-gold);
}

.ivy-goldband .elementor-heading-title,
.ivy-goldband p,
.ivy-goldband a {
	color: #1B271F;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   5. Shells, cards and panels
--------------------------------------------------------------------------- */

/* The large dark showcase shell. */
.ivy-shell {
	background: linear-gradient(180deg, #13261C, #102119);
	border: 1px solid rgba(255, 255, 255, .05);
	border-radius: var(--ivy-r-lg);
	overflow: hidden;
}

/* Card. Use only where the raised surface means real hierarchy. */
.ivy-card {
	background: var(--ivy-white);
	border: 1px solid var(--ivy-line);
	border-radius: var(--ivy-r-md);
	box-shadow: var(--ivy-shadow);
	transition: transform .2s ease, box-shadow .2s ease;
}

.ivy-card-dark {
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--ivy-line-d);
	border-radius: var(--ivy-r-md);
	box-shadow: none;
}

.ivy-lift:hover {
	transform: translateY(-4px);
	box-shadow: var(--ivy-shadow-up);
}

/* Image panel. The frame stays fixed while the image scales. */
.ivy-panel {
	border-radius: var(--ivy-r-md);
	overflow: hidden;
	position: relative;
	background: #203328;
}

.ivy-panel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}

.ivy-panel:hover img {
	transform: scale(1.03);
}

/* The single permitted label over imagery. */
.ivy-panel-label {
	position: absolute;
	left: 15px;
	bottom: 15px;
	z-index: 2;
	padding: 8px 10px;
	background: rgba(8, 15, 11, .70);
	backdrop-filter: blur(8px);
	border-radius: var(--ivy-r-pill);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
}

/* Glass panel. The only element on the site using backdrop blur besides the
   panel label above. */
.ivy-glass {
	background: rgba(10, 18, 13, .50);
	border: 1px solid rgba(255, 255, 255, .14);
	backdrop-filter: blur(10px);
	border-radius: 24px;
}

.ivy-glass .elementor-heading-title { color: #fff; }
.ivy-glass p { color: #DBDFDA; }

/* ---------------------------------------------------------------------------
   6. Hero
--------------------------------------------------------------------------- */

/* Contrast scrim. Sits above the image, below the copy, and never intercepts
   clicks. */
.ivy-hero {
	position: relative;
	color: #fff;
	background-color: #0D1A13;
	overflow: hidden;
}

.ivy-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(5, 12, 8, .82) 0%, rgba(5, 12, 8, .48) 42%, rgba(5, 12, 8, .18) 70%),
		linear-gradient(0deg, rgba(6, 12, 9, .38), transparent 45%);
}

/* The scrim is a ::before at z-index 3, so anything sitting on top of it has to
   be positioned and lifted above it. A full-width hero has no .e-con-inner, so
   both shapes are covered here. */
.ivy-hero > .e-con,
.ivy-hero > .e-con-inner,
.ivy-hero > .elementor-container,
.ivy-hero > .elementor-element {
	position: relative;
	z-index: 5;
}

.ivy-hero .elementor-heading-title,
.ivy-hero p {
	color: #fff;
}

.ivy-hero p {
	color: #ECE4D8;
}

/* ---------------------------------------------------------------------------
   7. Menu rows
   Hairlines carry the separation. No boxes.
--------------------------------------------------------------------------- */
.ivy-menurow {
	border-bottom: 1px solid var(--ivy-line);
}

.ivy-menurow:last-child {
	border-bottom: 0;
}

.ivy-ground-ivy .ivy-menurow,
.ivy-shell .ivy-menurow {
	border-bottom-color: var(--ivy-line-d);
}

.ivy-price .elementor-heading-title,
.ivy-price {
	font-family: "DM Sans", system-ui, sans-serif;
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
	color: var(--ivy-ink);
}

.ivy-ground-ivy .ivy-price .elementor-heading-title,
.ivy-shell .ivy-price .elementor-heading-title {
	color: var(--ivy-gold);
}

/* ---------------------------------------------------------------------------
   8. Chips and tags
--------------------------------------------------------------------------- */
.ivy-chip {
	display: inline-flex;
	align-items: center;
	padding: 9px 12px;
	border: 1px solid var(--ivy-line);
	border-radius: var(--ivy-r-pill);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--ivy-ink);
}

/* The pill is the widget wrapper. A link inside it stays plain so the chip is
   not drawn twice. */
.ivy-chip a,
.ivy-chip p {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
}

.ivy-ground-ivy .ivy-chip,
.ivy-shell .ivy-chip {
	border-color: rgba(255, 255, 255, .13);
	color: #EBEEE7;
}

/* ---------------------------------------------------------------------------
   9. Placeholders
   Declared local placeholders in the direction's own colours, composed like the
   final image. Swapping a real photo onto the same element replaces them with
   no markup change.
--------------------------------------------------------------------------- */
.ivy-ph {
	background-image:
		radial-gradient(circle at 72% 26%, rgba(199, 166, 107, .22), transparent 42%),
		linear-gradient(135deg, #1A2F23 0%, #2E4438 58%, #11231A 100%);
	background-size: cover;
	background-position: center;
	min-height: 220px;
}

.ivy-ph-wine {
	background-image:
		radial-gradient(circle at 70% 30%, rgba(199, 166, 107, .20), transparent 44%),
		linear-gradient(135deg, #1A2F23 0%, #3C3630 50%, #723540 100%);
}

.ivy-ph-gold {
	background-image:
		radial-gradient(circle at 28% 24%, rgba(255, 244, 224, .30), transparent 46%),
		linear-gradient(135deg, #C7A66B 0%, #8E7442 60%, #2E4438 100%);
}

.ivy-ph-paper {
	background-image:
		radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .70), transparent 48%),
		linear-gradient(135deg, #F2EBDE 0%, #DFD3BE 60%, #C7A66B 100%);
}

/* ---------------------------------------------------------------------------
   10. Header and footer
--------------------------------------------------------------------------- */
.ivy-topbar,
.ivy-topbar p {
	background-color: #08120D;
	color: #E7DFD0;
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin: 0;
}

/* Elementor sets position:relative on every element wrapper, which anchors a
   collapsed dropdown to the toggle instead of the header. Force the wrappers
   back to static and give the header the positioning context. */
header#masthead .ivy-header {
	position: relative;
}

/* The overlay header floats over a hero. Pages with no hero keep the solid
   ivy header, so this stays self-maintaining as pages are added. */
.ivy-overlay-header header#masthead {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 30;
	background: transparent;
}

.ivy-overlay-header header#masthead .ivy-header,
.ivy-overlay-header header#masthead .ivy-header a {
	color: #fff;
}

/* UAE ships menu items with 15px of side padding on top of whatever spacing is
   set, which overflows the desktop row and wraps the last item. */
header#masthead .hfe-nav-menu__layout-horizontal .menu-item a.hfe-menu-item {
	padding-left: 0;
	padding-right: 0;
}

/* hamburger_align only applies to expandible/flyout layouts. On horizontal it
   is inert and Elementor emits its default margin:0 auto, centring the toggle. */
header#masthead .hfe-nav-menu-icon {
	margin-left: auto;
	margin-right: 0;
}

/* UAE's JS writes width and left as inline styles on the dropdown nav, measured
   from the toggle. Inline styles beat every selector, so the full-width mobile
   panel genuinely needs !important. This is the one place it is justified. */
@media (max-width: 1024px) {
	header#masthead .hfe-nav-menu__layout-horizontal.hfe-nav-menu__submenu-none .hfe-nav-menu,
	header#masthead nav.hfe-nav-menu__layout-horizontal {
		width: 100% !important;
		left: 0 !important;
	}
}

.ivy-footer a:hover {
	color: var(--ivy-gold);
}

/* ---------------------------------------------------------------------------
   11. Mobile collapse
   Declared for every multi-column layout rather than assumed.
--------------------------------------------------------------------------- */
@media (max-width: 860px) {
	.ivy-display .elementor-heading-title {
		letter-spacing: -.03em;
	}

	.ivy-ph {
		min-height: 180px;
	}
}

/* ---------------------------------------------------------------------------
   12. Hero slider
   The Content Slider widget owns the slides; these rules do the two things its
   controls cannot: hold the copy inside the 1180 container, and park the
   featured panel over the slider's bottom-right on desktop while letting it
   fall into normal flow on mobile.
--------------------------------------------------------------------------- */
.ivy-hero-wrap {
	position: relative;
}

.ivy-hero-wrap .ivy-hero-slider .uc_fbps_slide {
	min-height: min(860px, 88vh);
}

/* The copy sits at the foot of the slide, so a tall hero leaves a lot of empty
   frame above it on a small screen. The height comes down with the viewport. */
@media (max-width: 1024px) {
	.ivy-hero-wrap .ivy-hero-slider .uc_fbps_slide {
		min-height: 78vh;
	}
}

@media (max-width: 600px) {
	.ivy-hero-wrap .ivy-hero-slider .uc_fbps_slide {
		min-height: 72vh;
	}
}

/* No photo yet: the slide falls back to the declared placeholder rather than
   showing an empty frame. A real background image covers this. */
.ivy-hero-slider .uc_fbps_slide {
	background-image:
		radial-gradient(circle at 72% 26%, rgba(199, 166, 107, .22), transparent 42%),
		linear-gradient(135deg, #1A2F23 0%, #2E4438 58%, #11231A 100%);
	background-size: cover;
	background-position: center;
}

.ivy-hero-slider .uc_fbps_content {
	width: min(1180px, calc(100% - 40px));
	max-width: none;
	margin-inline: auto;
}

.ivy-hero-slider .uc_fbps_container_desc {
	max-width: 460px;
}

/* The featured panel. The outer container is only a positioning rail; the
   glass treatment sits on its inner so the panel keeps the 1180 gutter. */
.ivy-hero-panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 92px;
	z-index: 6;
	background: transparent;
	border: 0;
	padding: 0;
	pointer-events: none;
}

.ivy-hero-panel > .e-con-inner {
	max-width: 400px;
	margin-left: auto;
	margin-right: max(20px, calc((100% - 1180px) / 2));
	padding: 24px;
	background: rgba(10, 18, 13, .50);
	border: 1px solid rgba(255, 255, 255, .14);
	backdrop-filter: blur(10px);
	border-radius: 24px;
	pointer-events: auto;
}

@media (max-width: 1024px) {
	.ivy-hero-panel {
		position: static;
		margin-top: -40px;
		margin-bottom: 20px;
	}

	.ivy-hero-panel > .e-con-inner {
		max-width: none;
		/* width:auto, not the inherited 100%: with side margins on top of a
		   full-width box the panel ran 40px past the viewport and its right
		   edge was clipped by the hero's overflow. */
		width: auto;
		margin-inline: 20px;
	}
}

/* ---------------------------------------------------------------------------
   13. Gold strip
   Six labels share the row evenly and fall to two columns on mobile.
--------------------------------------------------------------------------- */
.ivy-goldband > .e-con-inner {
	flex-wrap: wrap;
}

.ivy-goldband > .e-con-inner > .e-con {
	flex: 1 1 auto;
	width: auto;
}

@media (max-width: 860px) {
	.ivy-goldband > .e-con-inner > .e-con {
		flex: 1 1 40%;
	}
}

/* ---------------------------------------------------------------------------
   14. Wordmark and the Reserve pill
--------------------------------------------------------------------------- */
.ivy-wordmark .elementor-heading-title {
	letter-spacing: .06em;
}

.ivy-wordmark-sub p {
	margin: 0;
}

/* The Reserve item is a real menu item so the client can retitle or re-point it
   from Appearance > Menus; only its skin lives here. */
header#masthead .menu-item.ivy-nav-reserve > a.hfe-menu-item {
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: var(--ivy-r-pill);
	padding: 11px 18px;
}

header#masthead .menu-item.ivy-nav-reserve > a.hfe-menu-item:hover {
	background: var(--ivy-gold);
	border-color: var(--ivy-gold);
	color: var(--ivy-ink);
}

/* The slider writes its own width and max-width from an ID selector inside the
   body, after this stylesheet, so a plain rule loses on both specificity and
   source order. The width control is set to 1180 to match the container; this
   is only the responsive clamp under it, and is the one place the hero needs
   !important. */
.ivy-hero-slider .uc_fbps_content {
	max-width: calc(100% - 40px) !important;
}

.ivy-hero-slider .uc_fbps_container_title {
	max-width: 700px;
}

/* THE IVY needs a real gap between the two words at display size. */
.ivy-wordmark .elementor-heading-title {
	word-spacing: .12em;
}

/* ---------------------------------------------------------------------------
   15. Gold strip cells
   Elementor gives every container --width:100%, so a row of them wraps one per
   line no matter what the flex settings say. Releasing the width is what makes
   the six labels share the row.
--------------------------------------------------------------------------- */
.ivy-goldband .e-con-inner > .e-con {
	--width: auto;
	flex: 1 1 auto;
}

@media (max-width: 860px) {
	.ivy-goldband .e-con-inner > .e-con {
		flex: 1 1 40%;
	}
}

/* ---------------------------------------------------------------------------
   16. Slider controls
   The arrows ship as Font Awesome glyphs whose webfont does not resolve on this
   host, so they render as tofu. Plain arrow characters need no webfont and match
   the mockup. Dots and arrows are pulled into the 1180 gutter.
--------------------------------------------------------------------------- */
.ivy-hero-slider .owl-nav button i {
	display: none;
}

.ivy-hero-slider .owl-nav button::before {
	font-family: "DM Sans", system-ui, sans-serif;
	font-size: 16px;
	line-height: 1;
}

.ivy-hero-slider .owl-prev::before { content: "\2190"; }
.ivy-hero-slider .owl-next::before { content: "\2192"; }

.ivy-hero-slider .owl-nav {
	position: absolute;
	right: max(20px, calc((100% - 1180px) / 2));
	bottom: 26px;
	z-index: 8;
	display: flex;
	gap: 8px;
	width: auto;
}

.ivy-hero-slider .owl-dots {
	position: absolute;
	left: max(20px, calc((100% - 1180px) / 2));
	bottom: 34px;
	z-index: 8;
	width: auto;
}

/* Over a hero the nav band drops its ground so the photograph reads through.
   Pages without a hero keep the solid ivy bar. */
.ivy-overlay-header header#masthead .ivy-header {
	background-color: transparent;
}

/* ---------------------------------------------------------------------------
   17. Inner-page heroes
--------------------------------------------------------------------------- */
.ivy-hero .ivy-eyebrow .elementor-heading-title,
.ivy-hero .ivy-chip {
	color: var(--ivy-gold);
}

.ivy-hero .ivy-chip {
	border-color: rgba(255, 255, 255, .3);
}

.ivy-center {
	text-align: center;
}

.ivy-measure.ivy-center,
.elementor-widget.ivy-center .elementor-widget-container {
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   18. The gallery slider shares the hero's arrow treatment
--------------------------------------------------------------------------- */
.ivy-gallery-slider .owl-nav button i {
	display: none;
}

.ivy-gallery-slider .owl-nav button::before {
	font-family: "DM Sans", system-ui, sans-serif;
	font-size: 15px;
	line-height: 1;
}

.ivy-gallery-slider .owl-prev::before { content: "\2190"; }
.ivy-gallery-slider .owl-next::before { content: "\2192"; }

/* The gallery carries real photographs now, so the slide only needs a dark
   ground behind them while they load. */
.ivy-gallery-slider .uc_fbps_slide {
	background-color: #11231A;
}

/* ---------------------------------------------------------------------------
   19. Tabs
--------------------------------------------------------------------------- */
.ivy-tabs .elementor-tab-title {
	border-color: var(--ivy-line);
}

.ivy-tabs .elementor-tab-title.elementor-active {
	border-left-color: var(--ivy-gold);
}

.ivy-tabs .elementor-tab-content h3 {
	font-family: "Instrument Serif", Georgia, serif;
	font-weight: 400;
	font-size: 32px;
	line-height: 1.05;
	margin: 0 0 12px;
	color: var(--ivy-ink);
}

.ivy-tabs .elementor-tab-content p {
	color: var(--ivy-stone);
}

.ivy-tabs .elementor-tab-content strong {
	color: var(--ivy-ink);
}

/* ---------------------------------------------------------------------------
   20. The booking embed slot
   A composed empty state rather than a blank box: it shows where the embed goes
   and reads as finished until the platform is chosen.
--------------------------------------------------------------------------- */
.ivy-booking-slot {
	border: 1px dashed rgba(17, 35, 26, .28);
	border-radius: var(--ivy-r-lg);
	background: var(--ivy-white);
	padding: 54px 34px;
	text-align: center;
}

.ivy-booking-eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ivy-stone);
}

.ivy-booking-slot h3 {
	font-family: "Instrument Serif", Georgia, serif;
	font-weight: 400;
	font-size: 42px;
	line-height: 1.02;
	margin: 12px 0 14px;
	color: var(--ivy-ink);
}

.ivy-booking-slot p {
	max-width: 54ch;
	margin: 0 auto;
	font-size: 14px;
	line-height: 1.7;
	color: var(--ivy-stone);
}

.ivy-booking-platforms {
	margin-top: 22px !important;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ivy-stone);
}

/* ---------------------------------------------------------------------------
   21. Contact form
   WPForms ships its own skin; these rules bring it onto the brand without
   touching the plugin.
--------------------------------------------------------------------------- */
.ivy-form .wpforms-field-label {
	font-family: "DM Sans", system-ui, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ivy-stone);
}

.ivy-form input[type="text"],
.ivy-form input[type="email"],
.ivy-form input[type="tel"],
.ivy-form select,
.ivy-form textarea {
	font-family: "DM Sans", system-ui, sans-serif;
	font-size: 14px;
	color: var(--ivy-ink);
	background: var(--ivy-white);
	border: 1px solid var(--ivy-line);
	border-radius: var(--ivy-r-sm);
	padding: 12px 14px;
}

.ivy-form input:focus,
.ivy-form select:focus,
.ivy-form textarea:focus {
	outline: 2px solid var(--ivy-gold);
	outline-offset: 1px;
	border-color: var(--ivy-gold);
}

.ivy-form ::placeholder {
	color: #98A29B;
}

.ivy-form button[type="submit"] {
	font-family: "DM Sans", system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	color: var(--ivy-cream);
	background: var(--ivy-ivy);
	border: 0;
	border-radius: var(--ivy-r-pill);
	padding: 14px 26px;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.ivy-form button[type="submit"]:hover {
	background: var(--ivy-gold);
	color: var(--ivy-ink);
}

/* ---------------------------------------------------------------------------
   22. Map
--------------------------------------------------------------------------- */
.ivy-map iframe {
	border-radius: var(--ivy-r-lg);
}

/* ---------------------------------------------------------------------------
   23. Inline containers
   Elementor gives every container --width:100%, which turns a row of pills or
   buttons into a stack. This releases the width for the ones meant to sit
   inline: chips, tags and side-by-side buttons.
--------------------------------------------------------------------------- */
.ivy-inline {
	--width: auto;
	flex: 0 0 auto;
	width: auto;
	/* Rows stack to a column on mobile, where the default stretch would pull a
	   chip back out to full width. */
	align-self: flex-start;
}

/* ---------------------------------------------------------------------------
   24. Links on dark grounds
   The kit sets ivy green for links on paper; over an ivy ground that is
   invisible, so dark sections take gold instead.
--------------------------------------------------------------------------- */
.ivy-ground-ivy a,
.ivy-shell a,
.ivy-hero a:not(.elementor-button),
.ivy-footer a {
	color: var(--ivy-gold);
}

.ivy-ground-ivy a:hover,
.ivy-shell a:hover,
.ivy-footer a:hover {
	color: #FFFFFF;
}

/* Belt and braces: a honeypot must never be visible, whatever the form plugin
   decides to render. */
.wpforms-field-hp,
.wpforms-form .wpforms-field[id*="field_5-container"] {
	position: absolute !important;
	left: -9000px !important;
}

/* ---------------------------------------------------------------------------
   25. Header legibility over any hero image
   The mockup's side-to-side scrim leaves the top-right bright, which is fine
   over the placeholder but not over a real photograph. This top band keeps the
   wordmark and nav readable whatever image the client drops in.
--------------------------------------------------------------------------- */
.ivy-hero::after,
.ivy-hero-wrap::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 190px;
	z-index: 4;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(5, 12, 8, .70), transparent);
}

.ivy-hero-wrap {
	position: relative;
}

/* The desktop nav is one line. Below the dropdown breakpoint UAE takes over
   with its own toggle, so this only guards the desktop row. */
@media (min-width: 1025px) {
	header#masthead .hfe-nav-menu ul.hfe-nav-menu {
		flex-wrap: nowrap;
		width: 100%;
		justify-content: flex-end;
	}
}

/* ---------------------------------------------------------------------------
   26. Mobile
--------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	/* The toggle belongs at the right edge. hamburger_align is inert on the
	   horizontal layout, so the alignment is done here. */
	header#masthead .hfe-nav-menu__toggle {
		margin-left: auto;
		margin-right: 0;
	}

	header#masthead .hfe-nav-menu-icon {
		margin-left: auto;
		margin-right: 0;
	}

	/* Off the photograph the featured panel needs a solid ground, not glass. */
	.ivy-hero-panel > .e-con-inner {
		background: var(--ivy-ivy);
		backdrop-filter: none;
	}
}

@media (max-width: 600px) {
	.ivy-topbar,
	.ivy-topbar p {
		font-size: 9px;
		letter-spacing: .1em;
	}

	.ivy-wordmark .elementor-heading-title {
		word-spacing: .2em;
	}

	.ivy-booking-slot {
		padding: 38px 22px;
	}

	.ivy-booking-slot h3 {
		font-size: 30px;
	}
}

/* The wordmark is two short words; the serif closes them up without help. */
.ivy-wordmark .elementor-heading-title {
	word-spacing: .18em;
}

/* ---------------------------------------------------------------------------
   27. Mobile menu panel
   Elementor sets position:relative on every element wrapper, so the collapsed
   dropdown anchors to the 40px toggle instead of the header and comes out
   ~156px wide, floating mid-screen. Forcing the wrappers back to static and
   giving the header the positioning context is what makes it span the header.

   Note the panel is the inner <nav>, not .hfe-nav-menu: that outer div also
   holds the toggle, so positioning it takes the toggle out of flow and
   collapses the header row.
--------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	header#masthead .ivy-header {
		position: relative;
	}

	header#masthead .ivy-header .e-con,
	header#masthead .ivy-header .e-con-inner,
	header#masthead .ivy-header .elementor-widget,
	header#masthead .ivy-header .elementor-widget-container {
		position: static;
	}

	/* The logo column is a fixed size and the toggle column takes the rest.
	   An auto-width logo column cannot work: Elementor sizes the image widget
	   as a percentage of its parent, so an auto parent and a percentage child
	   size each other and both collapse to zero. */
	header#masthead .ivy-header .e-con-inner > .e-con:first-child {
		--width: 150px;
		width: var(--width);
		flex: 0 0 auto;
	}

	header#masthead .ivy-header .e-con-inner > .e-con:last-child {
		--width: auto;
		width: auto;
		flex: 1 1 auto;
	}

	/* The panel reads as glass laid over the hero rather than a solid slab:
	   a translucent ivy ground, the page blurred behind it, and a single gold
	   hairline where it meets the header. */
	header#masthead nav.hfe-nav-menu__layout-horizontal {
		left: 0;
		right: 0;
		width: 100%;
		background: linear-gradient(180deg,
			rgba(13, 30, 22, .84) 0%,
			rgba(9, 22, 16, .93) 100%);
		-webkit-backdrop-filter: blur(20px) saturate(135%);
		backdrop-filter: blur(20px) saturate(135%);
		border-top: 1px solid rgba(199, 166, 107, .30);
		box-shadow: 0 26px 64px rgba(0, 0, 0, .42);
		padding: 6px 0 14px;
	}

	/* Browsers without backdrop-filter get a near-opaque ground instead, so the
	   copy underneath never shows through as noise. */
	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		header#masthead nav.hfe-nav-menu__layout-horizontal {
			background: rgba(11, 26, 19, .98);
		}
	}

	/* UAE rules a grey hairline under every item and fills each one with a
	   lighter green. Together they made the panel read as a stack of boxes. */
	header#masthead nav.hfe-nav-menu__layout-horizontal li.menu-item,
	header#masthead nav.hfe-nav-menu__layout-horizontal li.menu-item a.hfe-menu-item,
	header#masthead nav.hfe-nav-menu__layout-horizontal li a.hfe-sub-menu-item {
		border: 0;
		background: transparent;
	}

	/* One barely-there separator between items, none above the first and none
	   above the Reserve pill. It sits on the li, not the anchor: the item that
	   has a submenu wraps its anchor in a div, so an anchor-based rule skipped
	   it and left that one row without a line. */
	header#masthead nav.hfe-nav-menu__layout-horizontal > ul > li.menu-item + li.menu-item:not(.ivy-nav-reserve) {
		border-top: 1px solid rgba(231, 223, 208, .09);
	}

	/* Lighter and wider-set, with room around it. padding_horizontal_menu_item
	   is zeroed for the desktop row, so the gutter is restored here. */
	header#masthead nav.hfe-nav-menu__layout-horizontal .menu-item a.hfe-menu-item {
		padding: 15px 24px;
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 2.6px;
		color: rgba(255, 255, 255, .88);
		transition: color .22s ease, padding-left .22s ease;
	}

	header#masthead nav.hfe-nav-menu__layout-horizontal .menu-item a.hfe-menu-item:hover,
	header#masthead nav.hfe-nav-menu__layout-horizontal .menu-item a.hfe-menu-item:focus-visible {
		color: var(--ivy-gold);
		padding-left: 30px;
	}

	/* The submenu sits inside the same glass, indented and slightly recessed,
	   instead of arriving as a cream slab from the desktop dropdown styling. */
	header#masthead nav.hfe-nav-menu__layout-horizontal .sub-menu {
		background: rgba(0, 0, 0, .18);
	}

	header#masthead nav.hfe-nav-menu__layout-horizontal .sub-menu a.hfe-sub-menu-item {
		padding: 12px 24px 12px 42px;
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 2px;
		color: rgba(231, 223, 208, .74);
		background: transparent;
	}

	header#masthead nav.hfe-nav-menu__layout-horizontal .sub-menu a.hfe-sub-menu-item:hover {
		color: var(--ivy-gold);
		background: transparent;
	}

	/* Reserve stays the one framed item, now gold on glass rather than a white
	   outline. The second selector kills the separator the +li rule would give
	   it; it needs the extra .menu-item to outweigh that rule. */
	header#masthead nav.hfe-nav-menu__layout-horizontal .menu-item.ivy-nav-reserve > a.hfe-menu-item {
		margin: 18px 24px 4px;
		padding: 14px 18px;
		border: 1px solid rgba(199, 166, 107, .55);
		border-radius: var(--ivy-r-pill);
		color: var(--ivy-gold);
		text-align: center;
		letter-spacing: 2.6px;
	}

	header#masthead nav.hfe-nav-menu__layout-horizontal .menu-item.ivy-nav-reserve > a.hfe-menu-item:hover,
	header#masthead nav.hfe-nav-menu__layout-horizontal .menu-item.ivy-nav-reserve > a.hfe-menu-item:focus-visible {
		padding-left: 18px;
		background: var(--ivy-gold);
		border-color: var(--ivy-gold);
		color: var(--ivy-ink);
	}
}

/* ---------------------------------------------------------------------------
   27b. Desktop dropdown
   The mobile panel is glass; the desktop dropdown was still the solid #193526
   slab that background_color_dropdown_item paints. This gives it the same
   treatment so the two breakpoints read as one design. The header is
   position:absolute over a dark hero on every page, so a translucent panel
   always has something dark behind it.
--------------------------------------------------------------------------- */
@media (min-width: 1025px) {
	header#masthead .hfe-nav-menu__layout-horizontal ul.sub-menu {
		background: linear-gradient(180deg,
			rgba(13, 30, 22, .86) 0%,
			rgba(9, 22, 16, .94) 100%);
		-webkit-backdrop-filter: blur(20px) saturate(135%);
		backdrop-filter: blur(20px) saturate(135%);
		border: 1px solid rgba(199, 166, 107, .28);
		border-radius: var(--ivy-r-md);
		box-shadow: 0 22px 54px rgba(0, 0, 0, .40);
		padding: 5px 0;
		overflow: hidden;
	}

	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		header#masthead .hfe-nav-menu__layout-horizontal ul.sub-menu {
			background: rgba(11, 26, 19, .98);
		}
	}

	/* Items carry no fill of their own, and the same lighter, wider-set type as
	   the mobile panel. */
	header#masthead .hfe-nav-menu__layout-horizontal ul.sub-menu a.hfe-sub-menu-item {
		background: transparent;
		padding: 11px 22px;
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 2.2px;
		color: rgba(231, 223, 208, .82);
		transition: color .2s ease, padding-left .2s ease;
	}

	header#masthead .hfe-nav-menu__layout-horizontal ul.sub-menu li + li a.hfe-sub-menu-item {
		border-top: 1px solid rgba(231, 223, 208, .09);
	}

	header#masthead .hfe-nav-menu__layout-horizontal ul.sub-menu a.hfe-sub-menu-item:hover,
	header#masthead .hfe-nav-menu__layout-horizontal ul.sub-menu a.hfe-sub-menu-item:focus-visible,
	header#masthead .hfe-nav-menu__layout-horizontal ul.sub-menu a.hfe-sub-menu-item.hfe-sub-menu-item-active {
		background: transparent;
		color: var(--ivy-gold);
		padding-left: 28px;
	}

	/* The row itself never carries a fill: the header floats over the hero. */
	header#masthead nav.hfe-nav-menu__layout-horizontal,
	header#masthead nav.hfe-nav-menu__layout-horizontal .menu-item a.hfe-menu-item {
		background: transparent;
	}

	/* Top-level links match the panel's weight and tracking. The row measures
	   ~370px inside an 855px column, so the extra tracking cannot wrap it. */
	header#masthead nav.hfe-nav-menu__layout-horizontal .menu-item a.hfe-menu-item {
		font-weight: 500;
		letter-spacing: 2.2px;
		transition: color .2s ease;
	}
}

/* THE IVY is two short words in a tight serif; without help they read as one. */
.ivy-wordmark .elementor-heading-title {
	word-spacing: .3em;
}

/* Chips hug their label at every width; only genuinely wide buttons stretch. */
@media (max-width: 600px) {
	.ivy-inline {
		flex: 0 1 auto;
		max-width: 100%;
	}
}

/* ---------------------------------------------------------------------------
   28. Skip link
   Hello Elementor's skip link is the one piece of default WordPress blue left
   on the page. It only shows on keyboard focus, but it should still be on brand.
--------------------------------------------------------------------------- */
.hfe-skip-link:focus,
.skip-link.screen-reader-text:focus {
	background: var(--ivy-ivy);
	color: var(--ivy-cream);
	outline: 2px solid var(--ivy-gold);
	outline-offset: -2px;
	border-radius: 0 0 var(--ivy-r-sm) 0;
	font-family: "DM Sans", system-ui, sans-serif;
	font-weight: 700;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
   29. Legibility
   The secondary grey measured 4.43:1 on paper and 4.03:1 on cream, both under
   the 4.5:1 floor for body text, and it carried every menu description on the
   site. It is now #4E5852, which measures 6.9:1 on paper and 6.2:1 on cream.
   The small-text sizes went up with it.
--------------------------------------------------------------------------- */
.ivy-form ::placeholder {
	/* was #98A29B at 2.6:1 */
	color: #6E7872;
	opacity: 1;
}

/* Menu rows carry the most reading on the site, so they get the most room. */
.ivy-menurow .elementor-widget-text-editor p {
	line-height: 1.7;
}

.ivy-price .elementor-heading-title,
.ivy-price {
	font-size: 15px;
}

/* Uppercase labels need tracking to stay readable once they are this small. */
.ivy-eyebrow,
.ivy-eyebrow p,
.ivy-eyebrow .elementor-heading-title {
	font-size: 11.5px;
	letter-spacing: .16em;
}

.ivy-chip {
	font-size: 11px;
	letter-spacing: .09em;
	padding: 10px 14px;
}

.ivy-panel-label {
	font-size: 11px;
	letter-spacing: .08em;
	padding: 9px 12px;
	background: rgba(8, 15, 11, .82);
}

.ivy-goldband .elementor-heading-title,
.ivy-goldband p,
.ivy-goldband a {
	font-size: 11.5px;
	letter-spacing: .1em;
}

.ivy-topbar,
.ivy-topbar p {
	font-size: 11px;
	letter-spacing: .12em;
}

/* ---------------------------------------------------------------------------
   30. Logo
--------------------------------------------------------------------------- */
.ivy-logo img {
	display: block;
	height: auto;
	/* No percentage width here: the header column is auto-width, so a percentage
	   resolves against a parent that is itself sized by this image and collapses
	   to zero. Elementor's own width control caps it. */
	max-width: 100%;
}

/* clip-path trims the tagline visually but leaves the element's layout box at
   the image's full intrinsic height, so the footer measured 57px on some pages
   and 63px on others depending on when the image resolved. A fixed height with
   a top-anchored cover crop gives the same look at a height that never moves,
   which is what keeps the footer identical on all twelve pages. */
.ivy-footer-logo {
	margin-bottom: 0;
	line-height: 0;
}

.ivy-footer-logo img {
	/* The source is 1200x457 including the tagline, which occupies the bottom
	   14%. 165 wide over the remaining 86% is 54 high, so a top-anchored cover
	   crop lands exactly on the mark with the wordmark intact. clip-path is
	   held off here in case ivy-logo-mark is ever added back to this element. */
	clip-path: none;
	height: 54px;
	width: 165px;
	object-fit: cover;
	object-position: top center;
	margin-bottom: 0;
}

@media (max-width: 1024px) {
	.ivy-footer-logo img {
		height: 46px;
		width: 140px;
	}
}

/* The two footer columns should finish at a similar height so the band reads as
   one block. The link columns get a small top nudge to sit with the mark. */
@media (min-width: 861px) {
	.ivy-footer .e-con-inner > .e-con:first-child > .e-con:last-child {
		padding-top: 6px;
	}
}

/* The lockup carries "Steakhouse, Seafood & Champagne Lounge" beneath the
   wordmark. At any width that fits a header that line is about four pixels tall
   and unreadable, so the header shows the bee and wordmark only and the footer
   carries the full lockup at a size where the tagline actually reads. Remove
   this class to show the whole logo in the header again. */
.ivy-logo-mark img {
	clip-path: inset(0 0 14% 0);
	margin-bottom: -6px;
}

@media (max-width: 1024px) {
	.ivy-logo {
		max-width: 150px;
	}

	.ivy-footer-logo {
		max-width: 150px;
	}
}

/* ---------------------------------------------------------------------------
   31. Audit fixes
--------------------------------------------------------------------------- */

/* A heading on a dark ground that does not set its own colour was rendering
   ink-on-ivy at 1.1:1, i.e. invisible. The ink default in section 2 is
   `body .elementor-widget-heading .elementor-heading-title`, so the dark-ground
   rule has to outrank it rather than merely match it. */
body .ivy-ground-ivy .elementor-widget-heading .elementor-heading-title,
body .ivy-shell .elementor-widget-heading .elementor-heading-title,
body .ivy-hero .elementor-widget-heading .elementor-heading-title,
body .ivy-card-dark .elementor-widget-heading .elementor-heading-title,
body .ivy-footer .elementor-widget-heading .elementor-heading-title {
	color: var(--ivy-white);
}

/* Eyebrows on dark grounds keep gold, which the rule above would otherwise
   overwrite. */
body .ivy-ground-ivy .ivy-eyebrow .elementor-heading-title,
body .ivy-shell .ivy-eyebrow .elementor-heading-title,
body .ivy-hero .ivy-eyebrow .elementor-heading-title,
body .ivy-footer .ivy-eyebrow .elementor-heading-title,
body .ivy-feature .ivy-eyebrow .elementor-heading-title {
	color: var(--ivy-gold);
}

/* The slider prints its own background from an ID selector, so the placeholder
   ground loses on specificity and the slides render with no ground at all:
   white titles on cream. The fallback sits *behind* .ue-item-image, which is
   where a real photo goes, so forcing it here cannot block a real image. */
.ivy-hero-slider .uc_fbps_slide {
	background-image:
		radial-gradient(circle at 70% 27%, rgba(199, 166, 107, .20), transparent 43%),
		linear-gradient(135deg, #1A2F23 0%, #2E4438 58%, #11231A 100%) !important;
	background-size: cover !important;
	background-position: center !important;
}

/* A caption sitting over the lower half of a slide needs its own scrim, since
   the widget's overlay control did not take on the gallery. */
.ivy-gallery-slider .uc_fbps_content::before {
	content: "";
	position: absolute;
	inset: -24px -24px -24px -24px;
	z-index: -1;
	background: linear-gradient(180deg, rgba(6, 12, 9, 0), rgba(6, 12, 9, .78));
	pointer-events: none;
}

.ivy-gallery-slider .uc_fbps_content {
	position: relative;
	z-index: 1;
}

/* WPForms' required marker is #D63637, which measures 4.39:1 on paper. Its own
   rule is `div.wpforms-container-full .wpforms-required-label`, which outranks a
   two-class override, but it reads the colour from a custom property. Setting
   the property is both simpler and what the plugin intends. */
.ivy-form,
.ivy-form .wpforms-container {
	--wpforms-label-error-color: #723540;
}

/* UAE prints its own skip link, and on focus it inherited ivy-on-transparent,
   which is invisible over a dark hero. */
.hfe-skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 100000;
	width: auto !important;
	height: auto !important;
	clip: auto !important;
	clip-path: none !important;
	padding: 12px 20px;
	background: var(--ivy-ivy);
	color: var(--ivy-cream);
	outline: 2px solid var(--ivy-gold);
	outline-offset: 2px;
	border-radius: 0 0 var(--ivy-r-sm) 0;
	font-family: "DM Sans", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
   32. Beating Elementor's per-widget CSS
   Elementor writes each widget's own rules into an inline <style> inside the
   body, after this stylesheet, and targets the same single class this file
   does. A tie therefore loses on source order, so these two need one extra
   class rather than !important.
--------------------------------------------------------------------------- */

/* The chip's uppercase label needs its weight back. */
.ivy-chip.elementor-widget {
	font-weight: 700;
}

/* An explicit box for the logo. Elementor sizes every widget with
   `width: var(--width)`, and --width is a custom property, so the `--width:auto`
   set on the header column inherits straight down onto this image widget. The
   widget then shrink-wraps an image that is itself 100% of the widget, and both
   collapse to zero. Setting --width here replaces the inherited value, which is
   what Elementor's own rule reads. */
.ivy-logo.elementor-widget {
	--width: 168px;
	width: var(--width);
	/* Not max-width:100%. The header column is auto-width and takes its size
	   from this widget, so a percentage max-width clamps the widget to the
	   zero-width parent it is supposed to be sizing. */
	max-width: none;
	flex: 0 0 auto;
}

.ivy-footer-logo.elementor-widget {
	--width: 260px;
}

.ivy-logo img {
	width: 100%;
}

@media (max-width: 1024px) {
	.ivy-logo.elementor-widget {
		--width: 150px;
	}

	.ivy-footer-logo.elementor-widget {
		--width: 210px;
	}
}

@media (max-width: 600px) {
	.ivy-logo.elementor-widget {
		--width: 140px;
	}

	header#masthead .ivy-header .e-con-inner > .e-con:first-child {
		--width: 140px;
	}
}

/* ---------------------------------------------------------------------------
   33. Hero slider chrome
   Elementor prints this widget's rules into post-11.css from a four-class
   selector, and that file loads after this stylesheet, so these declarations
   can win on neither specificity nor source order. They are the layout of the
   hero, not decoration, so they are forced here.

   What was wrong: the copy sat flush on the slide's bottom edge; the dots
   stayed in normal flow and added a 48px strip of page background below the
   hero; and the arrows were pushed 266px below the slide by the widget's own
   arrow-position control, so they never appeared.
--------------------------------------------------------------------------- */
.ivy-hero-slider .uc_fbps_content {
	padding-bottom: 104px !important;
}

/* Dots overlay the bottom-left of the slide, inside the 1180 gutter. */
.ivy-hero-slider .owl-dots {
	position: absolute !important;
	left: max(20px, calc((100% - 1180px) / 2)) !important;
	bottom: 38px !important;
	width: auto !important;
	margin: 0 !important;
	text-align: left !important;
	z-index: 8;
}

/* Arrows sit opposite the dots. They are laid out by the flex row rather than
   by the widget's own offsets, so the row has a real size to position. */
.ivy-hero-slider .owl-nav {
	position: absolute !important;
	right: max(20px, calc((100% - 1180px) / 2)) !important;
	left: auto !important;
	bottom: 30px !important;
	display: flex !important;
	gap: 8px;
	width: auto !important;
	margin: 0 !important;
	z-index: 8;
}

.ivy-hero-slider .owl-nav button.owl-prev,
.ivy-hero-slider .owl-nav button.owl-next {
	position: static !important;
	margin: 0 !important;
	width: 42px !important;
	height: 42px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* The featured panel lines up with the copy block rather than floating above it. */
.ivy-hero-panel {
	bottom: 112px;
}

@media (max-width: 1024px) {
	.ivy-hero-slider .uc_fbps_content {
		padding-bottom: 92px !important;
	}
}

/* ---------------------------------------------------------------------------
   34. Announcement bar
   On a phone the services and the address each get their own line, rather than
   one long string breaking mid-address.
--------------------------------------------------------------------------- */
@media (max-width: 782px) {
	.ivy-topbar-sep {
		display: none;
	}

	.ivy-topbar-addr {
		display: block;
		margin-top: 3px;
	}
}

/* ---------------------------------------------------------------------------
   35. Cocktail cards
   The photographs are 3:4 portrait with the glass filling the lower two thirds,
   so the frame keeps that ratio. Cropping to a square or a landscape tile cuts
   the base of the glass off, which is the whole subject.
--------------------------------------------------------------------------- */
.ivy-cocktail-grid > .e-con {
	--width: auto;
	flex: 1 1 calc(25% - 11px);
	min-width: 0;
}

.ivy-cocktail-card {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: var(--ivy-r-md);
	overflow: hidden;
	transition: transform .2s ease, border-color .2s ease;
}

.ivy-cocktail-card:hover {
	transform: translateY(-4px);
	border-color: rgba(199, 166, 107, .45);
}

.ivy-cocktail-hero img {
	display: block;
	width: 100%;
	height: auto;
	/* The header shot is a landscape group at the bar. In the old 3:4 portrait
	   frame a centre crop cut both outer guests; 4:3 keeps all three. */
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
}

/* The glass sits in the lower half of these shots, with a lot of ceiling above
   it. At card width the full 3:4 frame makes the drink small and the top of the
   card empty, so the frame is shortened to 4:5 and anchored low: that trims the
   headroom and keeps the whole glass, base included. */
.ivy-cocktail-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 68%;
}

.ivy-cocktail-hero img {
	border-radius: var(--ivy-r-md);
}

/* The name sits directly under the photo, so the price anchors to the card
   foot however long a description runs. */
.ivy-cocktail-card .ivy-price {
	margin-top: auto;
}

@media (max-width: 1024px) {
	.ivy-cocktail-grid > .e-con {
		flex: 1 1 calc(50% - 7px);
	}
}

@media (max-width: 600px) {
	.ivy-cocktail-grid > .e-con {
		flex: 1 1 100%;
	}

	/* Keep the portrait frame on a phone. A landscape crop at this width cuts
	   the stem and base off the glass. */
	.ivy-cocktail-photo img {
		aspect-ratio: 4 / 5;
	}
}

/* ---------------------------------------------------------------------------
   36. Steak cards
   These shots are wide plated overheads rather than portraits, so the frame is
   landscape. Three cuts have no photograph yet and fall back to the same
   placeholder gradient used elsewhere, which keeps the grid even.
--------------------------------------------------------------------------- */
.ivy-steak-grid > .e-con,
.ivy-dish-grid > .e-con {
	--width: auto;
	/* grow:0 matters. With grow:1 a short final row stretched to fill: the
	   fourth Seafood card ran the full 1180px and the last two Appetizers
	   583px each, so each category read as a different grid. */
	flex: 0 1 calc(33.333% - 10px);
	min-width: 0;
}

/* Ten sides, five across: two full rows and no straggler. */
@media (min-width: 1025px) {
	.ivy-dish-grid-sides > .e-con {
		flex: 0 1 calc(20% - 11.2px);
	}
}

.ivy-steak-card,
.ivy-dish-card {
	background: var(--ivy-white);
	border: 1px solid var(--ivy-line);
	border-radius: var(--ivy-r-md);
	overflow: hidden;
	box-shadow: var(--ivy-shadow);
	transition: transform .2s ease, box-shadow .2s ease;
}

.ivy-steak-card:hover,
.ivy-dish-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--ivy-shadow-up);
}

.ivy-steak-photo img,
.ivy-dish-photo img,
.ivy-steak-hero img,
.ivy-feature-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
}

/* The placeholder stand-in for a cut with no photograph yet. */
.ivy-steak-card > .ivy-steak-photo.ivy-ph,
.ivy-dish-card > .ivy-dish-photo.ivy-ph {
	aspect-ratio: 3 / 2;
	min-height: 0;
}

.ivy-steak-hero img,
.ivy-feature-photo img {
	border-radius: var(--ivy-r-md);
}

.ivy-steak-hero img {
	aspect-ratio: 4 / 3;
}

@media (max-width: 1024px) {
	.ivy-steak-grid > .e-con,
	.ivy-dish-grid > .e-con {
		flex: 0 1 calc(50% - 7px);
	}
}

@media (max-width: 600px) {
	.ivy-steak-grid > .e-con,
	.ivy-dish-grid > .e-con {
		flex: 1 1 100%;
	}
}

/* ---------------------------------------------------------------------------
   37. Dessert cards
   Three of the four dessert plates were shot portrait. A 3:2 frame cuts the
   bottom off the plate, so this category gets a taller frame. Four across
   would make them very tall, so the row holds three.
--------------------------------------------------------------------------- */
.ivy-dish-grid-tall > .e-con {
	flex: 1 1 calc(25% - 11px);
}

.ivy-dish-grid-tall .ivy-dish-photo img {
	aspect-ratio: 4 / 5;
}

@media (max-width: 1024px) {
	.ivy-dish-grid-tall > .e-con {
		flex: 1 1 calc(50% - 7px);
	}
}

@media (max-width: 600px) {
	.ivy-dish-grid-tall > .e-con {
		flex: 1 1 100%;
	}
}

/* ---------------------------------------------------------------------------
   38. Experience photography
   One image per experience, sitting beside its copy. A 4:3 frame keeps the six
   rows on the same rhythm whatever shape the source photograph is.
--------------------------------------------------------------------------- */
.ivy-exp-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
	border-radius: var(--ivy-r-md);
}

/* The Wine Down pour is the one portrait in the set. Centred, the frame would
   cut the bottle off the top; anchored high it keeps the bottle, the pour and
   the bowl of the glass, losing only the foot. */
.ivy-exp-photo-high img {
	object-position: center 30%;
}

@media (max-width: 860px) {
	.ivy-exp-photo img {
		aspect-ratio: 3 / 2;
	}
}

/* A dish with no photograph by design, rather than one awaiting a shot: Catch
   of the Day changes daily. Left in the grid it would sit alone on a second row
   at a third of the width and a third of the height, reading as a mistake, so
   it spans the full row instead and reads as a closing note. */
.ivy-dish-grid > .ivy-dish-card-text {
	flex: 1 1 100%;
	justify-content: center;
	padding-block: 22px;
}

.ivy-dish-card-text .elementor-widget-text-editor p {
	max-width: 62ch;
}

/* ---------------------------------------------------------------------------
   39. About photography
   Each of these sits alone beside its copy rather than in a grid, so the images
   keep their own aspect ratio and nothing is cropped. The Vision and The Space
   are landscape, In The Kitchen is portrait, and that variation is fine here.
--------------------------------------------------------------------------- */
.ivy-about-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ivy-r-md);
}

/* ---------------------------------------------------------------------------
   40. Ambience photography
   The three sources are landscape, portrait and square. These rows alternate
   media and copy in a repeating pattern, so they need one common frame; a
   square is the only shape that crops all three lightly rather than taking 40%
   off the height of the portrait patio shot.
--------------------------------------------------------------------------- */
.ivy-amb-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
	border-radius: var(--ivy-r-md);
}

@media (max-width: 860px) {
	.ivy-amb-photo img {
		aspect-ratio: 4 / 3;
	}
}

/* The gallery caption is a small label over the foot of the photograph, not a
   headline: the picture is the content here. */
.ivy-gallery-slider .uc_fbps_container_title {
	max-width: none;
	opacity: .92;
}

/* ---------------------------------------------------------------------------
   39. Feature tile
   The Chef's pick block that opens Appetizers, Steaks, A5 Wagyu and Seafood.
   It was a 58/42 split with a gap between the halves, which read as a wide
   text card with a picture parked beside it, and each category sized it
   differently. It is now one tile split down the middle with the copy on the
   dark ground, so all four open the same way and the block carries more
   weight than the cards below it.
--------------------------------------------------------------------------- */
.ivy-feature {
	border-radius: var(--ivy-r-md);
	overflow: hidden;
	box-shadow: var(--ivy-shadow);
}

.ivy-feature > .e-con {
	--width: auto;
	flex: 0 1 50%;
	min-width: 0;
}

.ivy-feature .ivy-card-dark {
	background: linear-gradient(135deg, #17311F 0%, #0F2317 100%);
	border: 0;
	border-radius: 0;
	height: 100%;
	justify-content: center;
	padding: 44px 46px;
}

/* The photograph fills its half at whatever height the copy sets, so the two
   sides always finish level however long the description runs. */
.ivy-feature .elementor-widget-image,
.ivy-feature .elementor-widget-image .elementor-widget-container,
.ivy-feature .ivy-feature-photo {
	height: 100%;
}

.ivy-feature .ivy-feature-photo img {
	width: 100%;
	height: 100%;
	min-height: 360px;
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: 0;
}

@media (max-width: 767px) {
	.ivy-feature > .e-con {
		flex-basis: auto;
	}

	.ivy-feature .ivy-card-dark {
		padding: 30px 24px;
	}

	.ivy-feature .ivy-feature-photo img {
		min-height: 240px;
	}
}

/* ---------------------------------------------------------------------------
   40. Doneness chart
   "How We Cook It" listed the five levels as words alone, which asked the
   reader to picture the difference. Each card now opens with a cross-section
   of the cut: a seared crust around a core that shrinks and fades from red to
   brown across the five levels. Colour is never the only signal — the name and
   the description carry the same information underneath.
--------------------------------------------------------------------------- */
.ivy-done {
	display: block;
	/* A definite width, not 100%: .ivy-done-card centres its children with
	   align-items:center, which makes them shrink-to-fit, so a percentage
	   width resolves against nothing and the swatch collapses to its border. */
	width: 150px;
	max-width: 100%;
	aspect-ratio: 8 / 5;
	/* An irregular radius reads as a cut of meat rather than an ellipse. */
	border-radius: 47% 53% 44% 56% / 56% 46% 54% 44%;
	border: 2px solid #34210F;
	background:
		radial-gradient(ellipse 64% 68% at 50% 50%,
			var(--core) 0%,
			var(--core) var(--core-stop),
			#8A5B39 calc(var(--core-stop) + 15%),
			#71462B 100%);
	/* the seared band just inside the crust */
	box-shadow: inset 0 0 0 5px rgba(52, 33, 15, .5);
}

.ivy-done-1 { --core: #9E1B14; --core-stop: 58%; }
.ivy-done-2 { --core: #B32E1C; --core-stop: 44%; }
.ivy-done-3 { --core: #C55B41; --core-stop: 30%; }
.ivy-done-4 { --core: #C08A6F; --core-stop: 15%; }
/* Well done has no core at all: the fill is the cooked brown throughout. */
.ivy-done-5 { --core: #8A5B39; --core-stop: 0%; }

.ivy-done-card {
	align-items: center;
	text-align: center;
}

@media (max-width: 600px) {
	.ivy-done {
		width: 120px;
	}
}