/**
 * Adriatic site tweaks — front-end layout / design corrections.
 *
 * Scoped as tightly as possible and grouped by the issue each block fixes,
 * so a later change is easy to find and reason about.
 */

/* [57] The WooLentor sales-notification popup is hidden dynamically from the
 * settings (Settings → Adriatic Tweaks → "Hide the WooLentor sales popup"),
 * output as inline CSS in wp_head so the toggle takes effect immediately. */

/* ------------------------------------------------------------------ *
 * Site background is WHITE by default. The Astra global background was a pale
 * blue that showed through on pages/posts wherever a section did not paint its
 * own background. Sections, header, nav and footer set their own colours, so a
 * white page underneath is correct everywhere.
 * ------------------------------------------------------------------ */
html,
body {
	background-color: #ffffff !important;
}

/* ------------------------------------------------------------------ *
 * Fonts (self-hosted, from the brand kit)
 *   Body copy ......... Avenir LT Std 85 Heavy (weight 400/700 → heavy file),
 *                       35 Light for the lighter greys (weight 300).
 *   Navigation ........ Roboto (set on the nav items, below).
 *   Headings / buttons  Oswald (set on the heading elements themselves).
 * ------------------------------------------------------------------ */
@font-face {
	font-family: "Avenir";
	src: url("fonts/avenir-heavy.woff2") format("woff2"),
	     url("fonts/avenir-heavy.woff") format("woff");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Avenir";
	src: url("fonts/avenir-light.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

/* Base body copy is Avenir (the brand body font). The theme's default was the
 * system stack, which made forms/labels/buttons look off. Navigation keeps
 * Roboto and headings keep Oswald (both set on their own elements, which is
 * more specific than `body`). */
body {
	font-family: "Avenir", "Roboto", Arial, sans-serif;
}
input, textarea, select, button,
.elementor-field-group label,
.elementor-field,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
	font-family: "Avenir", "Roboto", Arial, sans-serif !important;
}

/* ------------------------------------------------------------------ *
 * Navy navigation bar
 * The labels sat hard against the bottom edge of the navy band because
 * the band carried bottom padding and the menu widget a negative bottom
 * margin. Zero those out and centre the items so the caps read as sitting
 * in the middle of the band, with equal space above and below. Also open
 * the letter-spacing a touch — condensed Oswald caps on a dark ground read
 * better with a little air between the letters.
 * ------------------------------------------------------------------ */
/* Extra .elementor-element class raises specificity above Elementor's own
   inline `.elementor .e-flexbox-base { padding-top:10px !important }`. */
.elementor-18641 .elementor-element.elementor-element-bcf3f36 {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	align-items: center !important;
}

.elementor-18641 .elementor-element-ba63477 {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.elementor-18641 .elementor-element-ba63477 .elementor-item {
	letter-spacing: 1.8px !important;
}

/* The menu widget carried uneven vertical padding (12px top / 22px bottom),
   so the caps sat above the optical centre of the navy band. Equalise it so
   the labels are truly vertically centred. */
.elementor-18641 .elementor-element-ba63477 .elementor-item {
	padding-top: 17px !important;
	padding-bottom: 17px !important;
}

/* The JetSmartFilters price-slider handles (z-index ~20-21) were painting on
   top of the header's FOOD & DRINK dropdown. Give the whole header its own
   stacking context above the page content so its dropdowns always win. */
[data-elementor-type="header"] {
	position: relative;
	z-index: 200;
}
.elementor-18641 .elementor-nav-menu .sub-menu,
.elementor-18641 .elementor-nav-menu ul ul {
	z-index: 201 !important;
}

/* ------------------------------------------------------------------ *
 * Typography — match the reference exactly (measured from the Wix build)
 *   Headings / buttons ........ Oswald (already the site heading face) ✓
 *   Navigation labels ......... Roboto bold, 18px, 1.8px tracking
 *   Body / secondary text ..... Roboto (sans). The Elementor kit set the
 *                               "Secondary" style to Roboto SLAB (a serif),
 *                               which the reference never uses — override the
 *                               global variable to the sans Roboto.
 * The kit id differs per environment, so match any "elementor-kit-*" body.
 * ------------------------------------------------------------------ */
body[class*="elementor-kit-"] {
	--e-global-typography-secondary-font-family: "Roboto", sans-serif;
}

/* Navigation labels → Roboto (was Oswald), matching the reference header. */
.elementor-nav-menu .elementor-item,
.elementor-nav-menu--main .elementor-item,
.elementor-nav-menu .elementor-item .elementor-item-title {
	font-family: "Roboto", sans-serif !important;
	font-weight: 700 !important;
	font-size: 18px !important;
	letter-spacing: 1.8px !important;
}

/* ------------------------------------------------------------------ *
 * Header cart icon — the reference uses a fine single-stroke cart, but
 * Elementor renders its heavier "cart-medium" glyph. Hide that glyph and
 * mask in a thin-stroke cart that inherits the button's colour (so it stays
 * navy on white / white on navy without a second rule).
 * ------------------------------------------------------------------ */
.elementor-menu-cart__toggle_button .elementor-button-icon svg.e-eicon-cart-medium {
	display: none !important;
}
.elementor-menu-cart__toggle_button .elementor-button-icon::before {
	content: "";
	display: inline-block;
	width: 26px;
	height: 26px;
	/* Use the supplied navy cart icon (its alpha as a mask so it inherits the
	 * button colour — navy on the white header). */
	background-color: currentColor;
	-webkit-mask: url("img/cart-icon.png") no-repeat center / contain;
	mask: url("img/cart-icon.png") no-repeat center / contain;
}

/* ------------------------------------------------------------------ *
 * Header — match the reference.
 *   Logo: ~199px wide (reference size). The file is 398×164 (2×), so it renders
 *         crisp at half size on retina.
 *   "Sign In": Avenir, 14px, navy (was Albert Sans 16px).
 *   Search placeholder "Search", centred with the magnifier icon.
 * ------------------------------------------------------------------ */
.elementor-element-72e38b8 img,
.elementor-widget-theme-site-logo img {
	width: 199px !important;
	max-width: 199px !important;
	height: auto !important;
}
.elementor-element-2f26d1d .elementor-icon-box-title,
.elementor-element-2f26d1d .elementor-icon-box-title a,
.elementor-element-2f26d1d .elementor-icon-box-title * {
	font-family: "Avenir", "Roboto", Arial, sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: #242c3f !important;
}

/* Search: centre the placeholder/text with the icon. FiboSearch puts the
 * magnifier on the left; centre the text and let the icon sit just before it. */
.dgwt-wcas-search-input {
	text-align: center !important;
}
.dgwt-wcas-search-input::placeholder { text-align: center !important; }
/* Keep room so the centred text doesn't collide with the icon/clear controls. */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-input {
	padding-left: 34px !important;
	padding-right: 34px !important;
}

/* Header search box: match the Wix reference size — 348 x 42, square corners,
 * 1px navy border. Scoped to the header so the search overlay is untouched. */
[data-elementor-type="header"] .dgwt-wcas-search-wrapp,
[data-elementor-type="header"] .dgwt-wcas-search-form {
	width: 348px !important;
	max-width: 348px !important;
	height: 42px !important;      /* match the input so the absolute icon centres to it */
	padding: 0 !important;
}
[data-elementor-type="header"] .dgwt-wcas-search-input {
	width: 348px !important;
	height: 42px !important;
	margin: 0 !important;
	border-radius: 0 !important;
	border: 1px solid #242c3f !important;
	cursor: pointer !important;   /* hand cursor on hover, not the text I-beam */
}
[data-elementor-type="header"] .dgwt-wcas-search-wrapp,
[data-elementor-type="header"] .dgwt-wcas-search-form,
[data-elementor-type="header"] .dgwt-wcas-search-submit {
	cursor: pointer !important;
}
/* Placeholder text: centred, navy, 14px Avenir — matches Wix */
[data-elementor-type="header"] .dgwt-wcas-search-input {
	text-align: center !important;
	font-family: "Avenir", sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #242c3f !important;
	padding-left: 12px !important;
	padding-right: 12px !important;
}
[data-elementor-type="header"] .dgwt-wcas-search-input::placeholder {
	color: #242c3f !important;
	opacity: 1 !important;
	font-weight: 700 !important;
	text-align: center !important;
}
/* Magnifier: vertically centred and sitting just to the LEFT of the centred
   "Search" text (Wix groups the icon next to the text, ~8px gap). */
[data-elementor-type="header"] .dgwt-wcas-search-submit {
	left: calc(50% - 44px) !important;
	right: auto !important;
	top: calc(50% + 5px) !important;
	bottom: auto !important;
	transform: translateY(-50%) !important;
	height: auto !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
[data-elementor-type="header"] .dgwt-wcas-search-submit svg,
[data-elementor-type="header"] .dgwt-wcas-search-icon svg {
	margin: 0 !important;
	vertical-align: middle !important;
	fill: #242c3f !important;
}

/* ------------------------------------------------------------------ *
 * Mobile / small-screen header (<= 1024px)
 * On phones the fixed 348px search box, 199px logo and the row of icons
 * fought for the same width, so the cart "0" badge overlapped the logo and
 * the search box could push past the screen edge. Cap the search width to the
 * viewport, shrink the logo a step, and give the icons a little breathing
 * room so nothing overlaps.
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	/* Search box never wider than the screen (minus side gutters). */
	[data-elementor-type="header"] .dgwt-wcas-search-wrapp,
	[data-elementor-type="header"] .dgwt-wcas-search-form,
	[data-elementor-type="header"] .dgwt-wcas-search-input {
		width: 100% !important;
		max-width: calc(100vw - 20px) !important;
	}
}

@media ( max-width: 767px ) {
	/* --- One tidy, aligned mobile header ------------------------------------
	 * Row 1: full-width search.
	 * Row 2: logo on the LEFT; cart, account and the menu (burger) grouped on
	 *        the RIGHT, all on one baseline (vertically centred) and spaced.
	 * The header was authored for a single desktop row, so on a phone the
	 * widgets wrapped at different heights and read as misaligned. These rules
	 * re-flow the same header into two clean rows and anchor the menu dropdown
	 * to the full width of the header. */
	.elementor-element-ab670e1 {
		position: relative !important;   /* anchor the dropdown to the header box */
		align-items: center !important;
		justify-content: flex-start !important;
		column-gap: 8px !important;
		row-gap: 10px !important;
		/* 20px side padding matches the search box's own gutters, so the logo (far
		 * left) and the burger (far right) line up with the search box edges. */
		padding: 10px 20px !important;
	}
	/* Search — its own full-width row, first. */
	.elementor-element-1f94615 {
		order: 1;
		flex: 1 0 100% !important;
		width: 100% !important;
		margin: 0 !important;
	}
	/* Logo — left, inset 20px to line up with the search box's left edge. It does
	 * NOT grow; the icon group is pushed right with an auto margin instead (below),
	 * which avoids the row overflowing and wrapping the burger onto a third line. */
	.elementor-element-731bba3 {
		order: 2;
		flex: 0 0 auto !important;
		width: auto !important;
		align-self: center !important;
		align-items: center !important;
		justify-content: flex-start !important;
		margin: 0 0 0 20px !important;
	}
	.elementor-element-72e38b8 img,
	.elementor-widget-theme-site-logo img {
		width: 148px !important;
		max-width: 148px !important;
	}
	/* Cart + account group — right, centred, evenly spaced. */
	.elementor-element-753129f {
		order: 3;
		flex: 0 0 auto !important;
		width: auto !important;
		align-items: center !important;
		align-self: center !important;
		column-gap: 16px !important;
		margin: 0 0 0 auto !important;   /* auto-left pushes the icons to the right */
	}
	.elementor-element-753129f .elementor-element,
	.elementor-element-c1eaa46,
	.elementor-element-b86e846 {
		align-items: center !important;
		align-self: center !important;
		justify-content: center !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
	/* Strip the 10px padding on the cart/account sub-containers — it widened the
	 * icon group by ~40px and tipped the row just past the viewport, wrapping the
	 * burger onto a third line. The column-gap keeps them spaced. */
	.elementor-element-c1eaa46,
	.elementor-element-b86e846 {
		padding: 0 !important;
		width: auto !important;
	}
	.elementor-element-2f26d1d .elementor-icon-box-wrapper {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	.elementor-element-2f26d1d .elementor-icon-box-icon { margin: 0 !important; }
	[data-elementor-type="header"] .elementor-menu-cart__toggle_button {
		position: relative !important;
	}

	/* Burger — collapse the "justify" nav menu down to just the toggle so it
	 * stops reserving ~200px (which was forcing it onto a third row), and keep
	 * it on the icon row, right of the account icon. */
	.elementor-element-bcf3f36 {
		order: 4;
		flex: 0 0 auto !important;
		width: auto !important;
		align-self: center !important;
		align-items: center !important;
		display: flex !important;
		position: static !important;
		/* Zero the uneven default margin (was 12px top / 20px bottom, which sat the
		 * burger too high) so it centres on the row with the other icons; and inset
		 * it 20px from the right (matches the logo's 20px left inset). */
		margin: 0 20px 0 0 !important;
	}
	/* Shrink the nav widget down to the toggle. NB: do NOT touch the
	 * .elementor-nav-menu--main element's display — it is the desktop menu and
	 * must stay hidden on mobile (forcing display:flex on it unhides the whole
	 * horizontal menu and shoves the toggle off-screen). */
	.elementor-element-ba63477,
	.elementor-element-ba63477 > .elementor-widget-container {
		width: auto !important;
		min-width: 0 !important;
		position: static !important;
		display: flex !important;
		align-items: center !important;
	}
	.elementor-element-ba63477 .elementor-menu-toggle {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		margin: 0 !important;
		position: relative !important;
		top: 0 !important;   /* centred with the account circle (was nudged 5px down, which left it 5px low - 23 Oct 2026) */
	}

	/* Mobile menu panel — the mobile dropdown NAV only (not the nested category
	 * sub-menus). Full width below the header, a clean tap-friendly list that
	 * fills the space (was a narrow left-indented column). Anchored to the header
	 * box (position:relative above). */
	.elementor-element-ba63477 nav.elementor-nav-menu__container.elementor-nav-menu--dropdown {
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: 100vw !important;
		margin: 0 !important;
		background: #ffffff !important;
		box-shadow: 0 10px 24px rgba( 0, 0, 0, .12 ) !important;
		border-top: 2px solid #242c3f !important;
		z-index: 320 !important;
	}
	.elementor-element-ba63477 nav.elementor-nav-menu__container.elementor-nav-menu--dropdown .elementor-item {
		width: 100% !important;
		padding: 16px 24px !important;
		font-size: 16px !important;
		border-bottom: 1px solid #ececec !important;
	}
	/* Nested category sub-menus stay in normal flow (indented, revealed on tap),
	 * not absolutely positioned. */
	.elementor-element-ba63477 nav.elementor-nav-menu__container.elementor-nav-menu--dropdown .sub-menu .elementor-item {
		padding-left: 40px !important;
		background: #f8f9fa !important;
	}
}

/* Header search area: Elementor gives its box a pale pink background
 * (#FFFAFA), which shows as a pink block left of the search field.
 * White, like the rest of the header (23 Oct 2026). */
.elementor-location-header .elementor-element-187994b > .elementor-widget-container,
.elementor-location-header .elementor-element-187994b {
	background-color: #fff !important;
}