/*
Theme Name: Hello Elementor Child - MYT Works
Template: hello-elementor
Description: Child theme for the MYT Works Elementor rebuild (Parker Web). All custom CSS and PHP lives here so Hello Elementor updates never wipe out site-specific work.
Version: 1.0.0
Text Domain: myt-child
*/

/* ==========================================================================
   Design tokens
   Palette pulled from the live mytworks.com (Apress theme) and tidied into
   one value per role. The live body text (#747474) and nav gold (#8A7D59 on
   cream, 3.4:1) both fall short of WCAG AA for normal-size text, so each
   gets an "-ink" partner calibrated to pass; the brand values stay for
   large text, rules and non-text accents.

   Elementor's Site Settings → Global Colors mirror these values so editors
   see the same palette in the color picker — this file stays the source of
   truth; update both together if a brand color changes.
   ========================================================================== */
:root {
	/* Brand */
	--myt-cream: #EFEBE0;        /* header band, alt sections */
	--myt-cream-soft: #F7F5EF;   /* lighter alt-section fill */
	--myt-gold: #8A7D59;         /* brand gold — rules, icons, large text only (3.4:1 on cream) */
	--myt-gold-ink: #6E6343;     /* gold for normal-size text — 5.0:1 on cream, 5.9:1 on white */
	--myt-maroon: #681800;       /* primary buttons, links — 12:1 with white text */
	--myt-maroon-deep: #4A1000;  /* primary hover/active */
	--myt-amber: #CD9442;        /* secondary buttons — pair with --myt-ink text (5.3:1), never white (2.4:1) */
	--myt-amber-deep: #B67D2C;   /* secondary hover */
	--myt-teal: #0C343D;         /* footer, dark bands */

	/* Neutrals */
	--myt-ink: #2B2B2B;          /* headings */
	--myt-text: #4A4A4A;         /* body copy — 8.8:1 on white */
	--myt-muted: #6B6B6B;        /* meta, captions — 5.3:1 on white */
	--myt-paper: #FFFFFF;
	--myt-rule: #D9D0BA;         /* borders/dividers on paper or cream */
	--myt-scrim: rgba(15, 15, 15, 0.72); /* hero text backing — matches live slider layers */
	--myt-on-dark: #EFEBE0;       /* text on --myt-teal — 11.6:1 */
	--myt-on-dark-muted: #B9C4C6; /* secondary text on --myt-teal — 7.5:1 */
	--myt-rule-dark: rgba(239, 235, 224, 0.2); /* dividers on --myt-teal */
	--myt-shadow: 0 16px 32px rgba(12, 52, 61, 0.14); /* dropdown panels */

	/* Type */
	--myt-font-heading: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	--myt-font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--myt-text-xs: 0.75rem;
	--myt-text-sm: 0.875rem;
	--myt-text-base: 1rem;
	--myt-text-lg: 1.125rem;
	--myt-h3: 1.125rem;
	--myt-h2: 1.5rem;
	--myt-hero-title: 1.625rem;
	--myt-tracking-caps: 0.08em; /* letter-spacing for all-caps labels/nav — live uses ~1px at 12px */

	/* Spacing scale — every margin/padding/gap on the site should come from
	   here (or from --myt-gutter / --myt-section-space below for rhythm)
	   rather than a new hardcoded number. */
	--myt-space-2xs: 4px;
	--myt-space-xs: 8px;
	--myt-space-sm: 12px;
	--myt-space-md: 16px;
	--myt-space-lg: 24px;
	--myt-space-xl: 32px;
	--myt-space-2xl: 48px;

	--myt-radius: 2px;           /* live site is square-cornered; keep it crisp */
	--myt-transition: 150ms ease;
}

/* ==========================================================================
   Grid rhythm — mobile first
   Gutter (side padding + gap between columns) and section spacing widen
   with the viewport. Breakpoints: 768 / 992 / 1200. Elementor's own Tablet
   breakpoint is set to 991px in Site Settings → Layout → Breakpoints so the
   editor's device preview switches at the same widths as this file.
   ========================================================================== */
:root {
	--myt-gutter: 16px;
	--myt-section-space: 48px;
	--myt-container: 1280px;       /* matches the live site's content width */
	--myt-container-narrow: 880px; /* text-led sections */
	--myt-hero-height: 440px;
	--myt-logo-width: 150px;
}
@media (min-width: 768px) {
	:root {
		--myt-gutter: 24px;
		--myt-section-space: 64px;
		--myt-h2: 1.75rem;
		--myt-hero-title: 2.25rem;
		--myt-hero-height: 560px;
		--myt-logo-width: 180px;
	}
}
@media (min-width: 992px) {
	:root {
		--myt-gutter: 32px;
		--myt-section-space: 80px;
		--myt-h3: 1.25rem;
		--myt-h2: 2rem;
		--myt-hero-title: 3rem;
		/* Live hero fills the viewport under the header; cap it so a very
		   tall monitor doesn't push everything below the fold. */
		--myt-hero-height: min(78vh, 760px);
		--myt-logo-width: 200px;
	}
}

/* ==========================================================================
   Base
   Elementor's "Default Colors" and "Default Fonts" are disabled (Elementor →
   Settings), so widgets inherit these rules instead of Elementor's own
   global typography — one source of truth.
   ========================================================================== */
body {
	font-family: var(--myt-font-body);
	font-size: var(--myt-text-base);
	line-height: 1.65;
	color: var(--myt-text);
	background-color: var(--myt-paper);
}
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	font-family: var(--myt-font-heading);
	color: var(--myt-ink);
	line-height: 1.25;
}
a {
	color: var(--myt-maroon);
	transition: color var(--myt-transition);
}
a:hover,
a:focus-visible {
	color: var(--myt-maroon-deep);
}
:focus-visible {
	outline: 2px solid var(--myt-maroon);
	outline-offset: 2px;
}
img {
	max-width: 100%;
	height: auto;
}
/* Visually hidden, still announced by screen readers and read by search
   engines — e.g. the homepage H1, which the design doesn't show. */
.myt-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Layout primitives
   Every homepage band is two Elementor containers, both set to "Full Width"
   in the editor (no Elementor boxed inner wrapper to fight with):
     .myt-section — the full-bleed band: background + vertical rhythm
     .myt-wrap    — the centered content column inside it
   Add these as CSS Classes (Container → Advanced → CSS Classes). Layout is
   owned here, mobile first, rather than Elementor's per-device controls,
   which are desktop-first under the hood.

   .e-con prefix: Elementor's container CSS (display/padding/gap driven by
   its own --display/--padding-* variables) is single-class specificity and
   loads first; doubling the class keeps these rules winning without
   !important.
   ========================================================================== */
.e-con.myt-section {
	padding: var(--myt-section-space) var(--myt-gutter);
	gap: 0;
}
.e-con.myt-section--flush {
	padding: 0;
}
.e-con.myt-section--cream {
	background-color: var(--myt-cream);
}
.e-con.myt-section--soft {
	background-color: var(--myt-cream-soft);
}
.e-con.myt-wrap {
	width: 100%;
	max-width: var(--myt-container);
	margin-inline: auto;
	padding: 0;
	gap: var(--myt-gutter);
}
.e-con.myt-wrap--narrow {
	max-width: var(--myt-container-narrow);
}

/* Grids: one column on phones, stepping up per modifier. */
.e-con.myt-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--myt-gutter);
}
@media (min-width: 768px) {
	.e-con.myt-grid--2,
	.e-con.myt-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 992px) {
	.e-con.myt-grid--2-lg {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1200px) {
	.e-con.myt-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Section headings — small caps eyebrow over a Montserrat title, centered,
   with a short gold rule (echoes the live site's gold nav/logo accents). */
.myt-eyebrow .elementor-heading-title {
	font-family: var(--myt-font-heading);
	font-size: var(--myt-text-sm);
	font-weight: 600;
	letter-spacing: var(--myt-tracking-caps);
	text-transform: uppercase;
	color: var(--myt-gold-ink);
	text-align: center;
}
.myt-section-title .elementor-heading-title {
	font-size: var(--myt-h2);
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.myt-section-title .elementor-heading-title::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin: var(--myt-space-sm) auto 0;
	background-color: var(--myt-gold);
}
.myt-section-intro {
	text-align: center;
	color: var(--myt-muted);
	font-size: var(--myt-text-sm);
	letter-spacing: var(--myt-tracking-caps);
	text-transform: uppercase;
}
.myt-section-intro p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Buttons
   Elementor Button widget + one of these classes. Square corners and
   tracked caps match the live site's CTAs.
   ========================================================================== */
.myt-btn .elementor-button {
	font-family: var(--myt-font-heading);
	font-size: var(--myt-text-sm);
	font-weight: 600;
	letter-spacing: var(--myt-tracking-caps);
	text-transform: uppercase;
	padding: var(--myt-space-sm) var(--myt-space-lg);
	border-radius: var(--myt-radius);
	transition: background-color var(--myt-transition), color var(--myt-transition);
}
.myt-btn--primary .elementor-button {
	background-color: var(--myt-maroon);
	color: var(--myt-paper);
}
.myt-btn--primary .elementor-button:hover,
.myt-btn--primary .elementor-button:focus-visible {
	background-color: var(--myt-maroon-deep);
	color: var(--myt-paper);
}
.myt-btn--secondary .elementor-button {
	background-color: var(--myt-amber);
	color: var(--myt-ink);
}
.myt-btn--secondary .elementor-button:hover,
.myt-btn--secondary .elementor-button:focus-visible {
	background-color: var(--myt-amber-deep);
	color: var(--myt-ink);
}
/* For dark bands (footer) — cream outline that fills on hover. */
.myt-btn--outline-light .elementor-button {
	background-color: transparent;
	color: var(--myt-on-dark);
	box-shadow: inset 0 0 0 1px var(--myt-on-dark);
}
.myt-btn--outline-light .elementor-button:hover,
.myt-btn--outline-light .elementor-button:focus-visible {
	background-color: var(--myt-on-dark);
	color: var(--myt-teal);
}

/* ==========================================================================
   1. Hero slider (Elementor Pro Slides widget, class myt-hero)
   Each slide carries two lines like the live Revolution Slider: a short
   kicker (entered in the widget's Description field) above a large title
   (the Heading field). Slides renders heading first, so the kicker is
   moved up with flex order rather than swapping the fields' meanings.
   Slide height is left empty in the widget so this token-driven height
   applies at every breakpoint.

   Selector weight: Elementor Pro's widget-slides CSS prints after this
   file and styles the text with `.elementor-slides .swiper-slide-inner
   .elementor-slide-*` (3 classes), so the text/button rules below carry
   4 classes to win without !important.
   ========================================================================== */
.elementor-widget-slides.myt-hero .swiper-slide {
	height: var(--myt-hero-height);
}
.elementor-widget-slides.myt-hero .swiper-slide-inner {
	padding: var(--myt-space-2xl) var(--myt-gutter);
	align-items: flex-end;
}
.elementor-widget-slides.myt-hero .swiper-slide-contents {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--myt-space-sm);
	max-width: min(100%, 880px);
}
/* Kicker and title each sit on their own dark backing, like the live
   slider's layers, so white text stays legible over any photo. */
.elementor-widget-slides.myt-hero .swiper-slide-inner .elementor-slide-description {
	order: -1;
	margin: 0 !important; /* Slides widget sets a default bottom margin inline per element */
	padding: var(--myt-space-2xs) var(--myt-space-xs);
	background-color: var(--myt-scrim);
	color: var(--myt-paper);
	font-family: var(--myt-font-heading);
	font-size: var(--myt-text-sm);
	font-weight: 600;
	line-height: 1.4;
}
.elementor-widget-slides.myt-hero .swiper-slide-inner .elementor-slide-heading {
	margin: 0 !important;
	padding: var(--myt-space-xs) var(--myt-space-sm);
	background-color: var(--myt-scrim);
	color: var(--myt-paper);
	font-family: var(--myt-font-heading);
	font-size: var(--myt-hero-title);
	font-weight: 700;
	line-height: 1.15;
}
.elementor-widget-slides.myt-hero .swiper-slide-inner .elementor-slide-button {
	margin-top: var(--myt-space-xs);
	padding: var(--myt-space-sm) var(--myt-space-lg);
	border: 0;
	border-radius: var(--myt-radius);
	background-color: var(--myt-maroon);
	color: var(--myt-paper);
	font-family: var(--myt-font-heading);
	font-size: var(--myt-text-sm);
	font-weight: 600;
	letter-spacing: var(--myt-tracking-caps);
	text-transform: uppercase;
}
.elementor-widget-slides.myt-hero .swiper-slide-inner .elementor-slide-button:hover,
.elementor-widget-slides.myt-hero .swiper-slide-inner .elementor-slide-button:focus-visible {
	background-color: var(--myt-maroon-deep);
	color: var(--myt-paper);
}
/* Arrows sit over busy photos — give them a round scrim like the live
   slider. Hidden on phones, where swipe + dots are enough and the arrows
   would cover the text.
   Selector weight: Elementor's e-swiper.css prints in the footer (after
   this file) with `.elementor-element .swiper ~ .elementor-swiper-button`
   (3 classes) setting display:inline-flex, so these need 4 classes to win. */
.elementor-widget.elementor-widget-slides.myt-hero .elementor-swiper-button {
	display: none;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.45);
	color: var(--myt-paper);
	font-size: 20px;
}
.myt-hero .elementor-swiper-button svg {
	fill: var(--myt-paper);
}
@media (min-width: 768px) {
	.elementor-widget-slides.myt-hero .swiper-slide-inner {
		/* Clear the arrows; on wide screens, inset further so the text lines
		   up with the 1280px content column of the sections below. */
		padding-inline: max(calc(var(--myt-gutter) + 64px), calc((100% - var(--myt-container)) / 2));
	}
	.elementor-widget-slides.myt-hero .swiper-slide-inner .elementor-slide-description {
		font-size: var(--myt-text-lg);
	}
	.elementor-widget.elementor-widget-slides.myt-hero .elementor-swiper-button {
		display: flex;
	}
}

/* ==========================================================================
   2. Awards (NAB 2023)
   ========================================================================== */
.myt-award {
	gap: var(--myt-space-md);
}
.myt-award .elementor-widget-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	background-color: var(--myt-cream-soft);
}
.myt-award .elementor-widget-text-editor {
	text-align: center;
}
.myt-award .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   3. Clients & installations
   Logo and installation carousels use Elementor's Image Carousel widget;
   its slides-per-view is set per device in the widget (Swiper handles
   that in JS, so it can't come from this file).
   ========================================================================== */
/* Logos: uniform boxes so mixed-aspect logos line up, full color (the live
   strip is full color; grayscale-until-hover would hide brand recognition
   on touch devices). */
.myt-logos .swiper-slide-image {
	width: 100%;
	height: 72px;
	object-fit: contain;
	padding: var(--myt-space-xs);
}
@media (min-width: 992px) {
	.myt-logos .swiper-slide-image {
		height: 88px;
	}
}
.myt-installs .swiper-slide-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.myt-map iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	border: 0;
}
@media (min-width: 768px) {
	.myt-map iframe {
		aspect-ratio: 16 / 9;
	}
}
@media (min-width: 992px) {
	.myt-map iframe {
		aspect-ratio: 21 / 9;
	}
}

/* ==========================================================================
   4. Product category cards
   Card = container (class myt-card) with a linked Image, a linked Heading
   (h3) and a short tagline.
   ========================================================================== */
.e-con.myt-card {
	gap: var(--myt-space-sm);
	padding: var(--myt-space-lg);
	background-color: var(--myt-paper);
	border: 1px solid var(--myt-rule);
	text-align: center;
	transition: border-color var(--myt-transition);
}
.e-con.myt-card:hover,
.e-con.myt-card:focus-within {
	border-color: var(--myt-gold);
}
.myt-card .elementor-widget-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: contain;
}
.myt-card .elementor-heading-title {
	font-size: var(--myt-h3);
	font-weight: 700;
	letter-spacing: var(--myt-tracking-caps);
	text-transform: uppercase;
}
.myt-card .elementor-heading-title a {
	color: var(--myt-ink);
}
.myt-card .elementor-heading-title a:hover,
.myt-card .elementor-heading-title a:focus-visible {
	color: var(--myt-maroon);
}
.myt-card .elementor-widget-text-editor {
	font-size: var(--myt-text-sm);
	color: var(--myt-muted);
}
.myt-card .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   5. Badges (NYCEDC award, order, Made in NY, showroom, demo)
   Five square tiles: 2 across on phones with the odd one centered, 3 at
   768, all 5 in a row at 992.
   ========================================================================== */
.e-con.myt-badges {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--myt-gutter);
}
.myt-badges > .elementor-widget-image {
	flex: 0 0 calc((100% - var(--myt-gutter)) / 2);
}
/* The link wrapper is inline by default, so the img's width:100% had
   nothing to resolve against and collapsed to 0. */
.myt-badges .elementor-widget-image a {
	display: block;
}
.myt-badges .elementor-widget-image img {
	width: 100%;
	transition: opacity var(--myt-transition);
}
.myt-badges .elementor-widget-image a:hover img,
.myt-badges .elementor-widget-image a:focus-visible img {
	opacity: 0.85;
}
@media (min-width: 768px) {
	.myt-badges > .elementor-widget-image {
		flex-basis: calc((100% - 2 * var(--myt-gutter)) / 3);
	}
}
@media (min-width: 992px) {
	.myt-badges > .elementor-widget-image {
		flex-basis: calc((100% - 4 * var(--myt-gutter)) / 5);
	}
}

/* ==========================================================================
   6. Featured products — PLACEHOLDER until WooCommerce is imported
   ========================================================================== */
.myt-placeholder {
	padding: var(--myt-space-xl) var(--myt-space-lg);
	border: 2px dashed var(--myt-rule);
	background-color: var(--myt-paper);
	text-align: center;
	color: var(--myt-muted);
}
.myt-placeholder p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   7. Lot 19 machine shop — image beside text from 768 up
   ========================================================================== */
.e-con.myt-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--myt-gutter);
	align-items: center;
}
.myt-split .elementor-widget-image img {
	width: 100%;
}
.myt-split .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}
@media (min-width: 768px) {
	.e-con.myt-split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   8. Latest blog posts (Elementor Pro Posts widget, Cards skin, class
   myt-posts). Column count comes from here, not the widget's per-device
   Columns controls, so it stays mobile first like everything else.
   ========================================================================== */
.elementor-widget.myt-posts .elementor-grid {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--myt-gutter);
}
.myt-posts .elementor-post__card {
	border-radius: var(--myt-radius);
	border: 1px solid var(--myt-rule);
	box-shadow: none;
}
.myt-posts .elementor-post__title,
.myt-posts .elementor-post__title a {
	font-family: var(--myt-font-heading);
	font-size: var(--myt-h3);
	color: var(--myt-ink);
}
.myt-posts .elementor-post__title a:hover,
.myt-posts .elementor-post__title a:focus-visible {
	color: var(--myt-maroon);
}
.myt-posts .elementor-post__excerpt p {
	color: var(--myt-text);
	font-size: var(--myt-text-sm);
}
.myt-posts .elementor-post__read-more {
	color: var(--myt-maroon);
	font-family: var(--myt-font-heading);
	font-size: var(--myt-text-xs);
	font-weight: 600;
	letter-spacing: var(--myt-tracking-caps);
	text-transform: uppercase;
}
.myt-posts .elementor-post__meta-data,
.myt-posts .elementor-post-date {
	color: var(--myt-muted);
}
.myt-posts .elementor-post__badge {
	background-color: var(--myt-gold-ink);
	color: var(--myt-paper);
	border-radius: var(--myt-radius);
	font-family: var(--myt-font-heading);
	letter-spacing: var(--myt-tracking-caps);
	text-transform: uppercase;
}
@media (min-width: 768px) {
	.elementor-widget.myt-posts .elementor-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 992px) {
	.elementor-widget.myt-posts .elementor-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ==========================================================================
   9. Closing CTA — two buttons, stacked on phones, side by side from 768
   ========================================================================== */
.e-con.myt-cta {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--myt-space-md);
}
.myt-cta .elementor-button {
	width: 100%;
	justify-content: center;
}
@media (min-width: 768px) {
	.e-con.myt-cta {
		flex-direction: row;
		justify-content: center;
	}
	.myt-cta .elementor-button {
		width: auto;
	}
}

/* ==========================================================================
   Site header — Theme Builder → Header ("Site Header")
   Cream bar with the live site's 3px gold underline. Phones: menu toggle |
   centered logo | search + cart (the live mobile arrangement). From 992:
   the logo gets its own centered row; below it the mega menu sits centered
   with search + cart at the right end.
   ========================================================================== */
.e-con.myt-header {
	padding: var(--myt-space-sm) var(--myt-gutter);
	background-color: var(--myt-cream);
	border-bottom: 3px solid var(--myt-gold);
	z-index: 100; /* above Swiper slides and the full-screen search's siblings */
}
.e-con.myt-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas: "nav logo actions";
	align-items: center;
	gap: var(--myt-space-md);
}
.myt-header__logo {
	grid-area: logo;
	width: var(--myt-logo-width);
}
.myt-header__logo img {
	display: block;
	width: 100%;
}
.myt-nav {
	grid-area: nav;
	justify-self: start;
}
/* Elementor stretches this container to fill its grid cell (--width:
   100%), so justify-content, not justify-self, is what pushes the icons
   to the right edge. Phones have no room for extra right padding (the
   cell beside a 150px logo is ~88px at 390); the gutter plus the cart
   button's own inset keeps the bag ~26px off the edge. nowrap + no
   shrink stop the pair stacking or overlapping in that narrow cell. */
.e-con.myt-header__actions {
	grid-area: actions;
	justify-self: end;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: center;
	gap: var(--myt-space-xs);
	padding: 0;
}
.e-con.myt-header__actions > .elementor-element {
	flex-shrink: 0;
}
@media (min-width: 768px) {
	/* Tablets have room: nudge the bag further in from the edge. */
	.e-con.myt-header__actions {
		padding-right: var(--myt-space-xs);
	}
}
@media (min-width: 992px) {
	.e-con.myt-header__bar {
		/* Equal outer columns keep the menu centered under the logo; the
		   empty left cell balances the actions on the right. max-content,
		   not auto — with auto the grid squeezes the menu and it wraps. */
		grid-template-columns: 1fr max-content 1fr;
		grid-template-areas:
			"logo logo logo"
			".    nav  actions";
		row-gap: var(--myt-space-xs);
		column-gap: var(--myt-space-sm);
	}
	.myt-header__logo {
		justify-self: center;
	}
	/* Desktop keeps the icons beside the menu. */
	.e-con.myt-header__actions {
		justify-content: normal;
		padding-right: 0;
	}
	.myt-nav {
		justify-self: center;
	}
}

/* Search (Search Form widget, Full Screen skin) and cart — icon buttons
   in brand gold. The cart's "Cart" label stays in the markup for screen
   readers but is visually hidden. */
.myt-header__search .elementor-search-form__toggle {
	--e-search-form-toggle-size: 40px;
	--e-search-form-toggle-color: var(--myt-gold-ink);
	--e-search-form-toggle-background-color: transparent;
	--e-search-form-toggle-icon-size: 20px;
}
.myt-header__search .elementor-search-form__toggle:hover {
	--e-search-form-toggle-color: var(--myt-maroon);
}
.myt-header__cart .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background-color: transparent;
	color: var(--myt-gold-ink);
	font-size: 20px;
}
.myt-header__cart .elementor-button:hover,
.myt-header__cart .elementor-button:focus-visible {
	background-color: transparent;
	color: var(--myt-maroon);
}
.myt-header__cart .elementor-button-icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}
.myt-header__cart .elementor-button-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* ==========================================================================
   Mega menu (Elementor Pro Mega Menu widget, class myt-nav)
   The widget is styled through its own custom properties; these are set
   on the widget with two classes so they beat the widget's single-class
   defaults. Below 992 it collapses into Elementor's hamburger + accordion.
   ========================================================================== */
.elementor-widget-n-menu.myt-nav {
	--n-menu-title-font-size: var(--myt-text-sm);
	--n-menu-title-line-height: 1.3;
	--n-menu-title-color-normal: var(--myt-ink);
	--n-menu-title-color-hover: var(--myt-maroon);
	--n-menu-title-color-active: var(--myt-maroon);
	--n-menu-title-padding: var(--myt-space-md) 0;
	--n-menu-dropdown-indicator-size: 12px;
	--n-menu-dropdown-indicator-color-normal: var(--myt-gold);
	--n-menu-dropdown-indicator-color-hover: var(--myt-maroon);
	--n-menu-dropdown-indicator-color-active: var(--myt-maroon);
	--n-menu-toggle-icon-color: var(--myt-gold-ink);
	--n-menu-toggle-icon-color-hover: var(--myt-maroon);
	--n-menu-toggle-icon-color-active: var(--myt-maroon);
	--n-menu-toggle-icon-size: 24px;
	--n-menu-toggle-icon-padding: var(--myt-space-xs);
}
.myt-nav .e-n-menu-title-text {
	font-family: var(--myt-font-heading);
	font-weight: 600;
	letter-spacing: var(--myt-tracking-caps);
	text-transform: uppercase;
}
/* Phones/tablets: accordion rows, full width under the header. */
.myt-nav .e-n-menu-wrapper {
	background-color: var(--myt-paper);
	box-shadow: var(--myt-shadow);
}
.myt-nav .e-n-menu-item {
	border-bottom: 1px solid var(--myt-rule);
}
.myt-nav .e-n-menu-title {
	padding-inline: var(--myt-gutter);
}
@media (min-width: 992px) {
	.elementor-widget-n-menu.myt-nav {
		--n-menu-title-font-size: var(--myt-text-xs);
		--n-menu-title-color-normal: var(--myt-gold-ink);
	}
	/* Top of panel sits flush with the header's gold underline. Three
	   classes: Elementor's post-85.css sets this to 0px on the widget's
	   element ID (also three classes) and prints before us. */
	.elementor-widget-n-menu.myt-nav.elementor-element {
		--n-menu-title-distance-from-content: calc(var(--myt-space-sm) + 3px);
	}
	.myt-nav .e-n-menu-wrapper {
		background-color: transparent;
		box-shadow: none;
	}
	.myt-nav .e-n-menu-item {
		border-bottom: 0;
	}
	/* Tighter until 1200 so the centered menu stays on one line at 992. */
	.myt-nav .e-n-menu-title {
		padding-inline: var(--myt-space-xs);
	}
}
@media (min-width: 1200px) {
	.elementor-widget-n-menu.myt-nav {
		--n-menu-title-font-size: var(--myt-text-sm);
	}
	.myt-nav .e-n-menu-title {
		padding-inline: var(--myt-space-sm);
	}
}

/* Dropdown panel — one per top-level item. */
.e-con.myt-mega {
	padding: var(--myt-space-md) var(--myt-gutter) var(--myt-space-lg);
	background-color: var(--myt-cream-soft);
}
.e-con.myt-mega__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--myt-gutter);
}
.myt-mega-links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--myt-space-2xs) var(--myt-gutter);
}
.myt-mega-links a {
	display: block;
	padding: var(--myt-space-xs) 0;
	font-family: var(--myt-font-heading);
	font-size: var(--myt-text-sm);
	font-weight: 600;
	color: var(--myt-ink);
}
.myt-mega-links a:hover,
.myt-mega-links a:focus-visible {
	color: var(--myt-maroon);
}
.myt-mega-links small {
	display: block;
	margin-top: 2px;
	font-family: var(--myt-font-body);
	font-size: var(--myt-text-xs);
	font-weight: 400;
	color: var(--myt-muted);
}
/* Promo cards only on desktop — on phones they'd push the links apart. */
.e-con.myt-mega__promo {
	display: none;
}
@media (min-width: 768px) {
	.myt-mega-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 992px) {
	.e-con.myt-mega {
		padding: var(--myt-space-xl) var(--myt-gutter);
		background-color: var(--myt-paper);
		border-top: 1px solid var(--myt-rule);
		box-shadow: var(--myt-shadow);
	}
	.e-con.myt-mega__inner {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: var(--myt-space-2xl);
		align-items: start;
	}
	.myt-mega-links {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--myt-space-xs) var(--myt-gutter);
	}
	.myt-mega-links a {
		padding: var(--myt-space-sm);
		border-left: 2px solid transparent;
		transition: border-color var(--myt-transition), background-color var(--myt-transition), color var(--myt-transition);
	}
	.myt-mega-links a:hover,
	.myt-mega-links a:focus-visible {
		border-left-color: var(--myt-gold);
		background-color: var(--myt-cream-soft);
	}
	.e-con.myt-mega__promo {
		display: flex;
		gap: var(--myt-space-sm);
		padding: var(--myt-space-lg);
		background-color: var(--myt-cream-soft);
	}
	.myt-mega__promo .elementor-widget-image img {
		width: 100%;
		aspect-ratio: 3 / 2;
		object-fit: contain;
	}
	.myt-mega__promo .elementor-widget-text-editor {
		font-size: var(--myt-text-sm);
		color: var(--myt-text);
	}
	.myt-mega__promo p:last-child {
		margin-bottom: 0;
	}
}

/* ==========================================================================
   Site footer — Theme Builder → Footer ("Site Footer")
   Live footer's dark teal. Phones: one column. 768: link columns in pairs,
   contact block full width. 1200: four link columns + contact block.
   ========================================================================== */
.e-con.myt-footer {
	padding: var(--myt-section-space) var(--myt-gutter) var(--myt-space-lg);
	background-color: var(--myt-teal);
	color: var(--myt-on-dark);
	gap: 0;
}
.e-con.myt-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--myt-space-xl) var(--myt-gutter);
}
.e-con.myt-footer__col {
	gap: var(--myt-space-sm);
	padding: 0;
}
.myt-footer__heading .elementor-heading-title {
	font-size: var(--myt-text-sm);
	font-weight: 700;
	letter-spacing: var(--myt-tracking-caps);
	text-transform: uppercase;
	color: var(--myt-amber); /* 5.0:1 on teal */
}
.myt-footer a {
	color: var(--myt-on-dark);
}
.myt-footer a:hover,
.myt-footer a:focus-visible {
	color: var(--myt-amber);
}
.myt-footer :focus-visible {
	outline-color: var(--myt-amber);
}
.myt-footer__links .elementor-icon-list-item {
	padding-block: var(--myt-space-2xs);
}
.myt-footer__links .elementor-icon-list-text {
	color: inherit;
	font-size: var(--myt-text-sm);
}
.myt-footer__contact .elementor-widget-text-editor {
	font-size: var(--myt-text-sm);
	color: var(--myt-on-dark-muted);
}
.myt-footer__contact p:last-child {
	margin-bottom: 0;
}
/* Phones: social icons, buttons and badge sit centered under the
   left-aligned contact text; from 768 they line up with it on the left. */
.elementor-widget.myt-footer__social,
.elementor-widget.myt-footer__badge {
	text-align: center;
}
/* Extra space on top of the column's gap so the icons, buttons and badge
   read as separate groups rather than one stack. */
.elementor-widget.myt-footer__social,
.e-con.myt-footer__buttons,
.elementor-widget.myt-footer__badge {
	margin-top: var(--myt-space-lg);
}
.myt-footer__social .elementor-social-icons-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--myt-space-xs);
}
.myt-footer__social .elementor-social-icon {
	--icon-size: 16px;
	--icon-padding: 0.6em;
	background-color: transparent;
	box-shadow: inset 0 0 0 1px var(--myt-rule-dark);
	transition: background-color var(--myt-transition);
}
.myt-footer__social .elementor-social-icon svg {
	fill: var(--myt-on-dark);
}
.myt-footer__social .elementor-social-icon:hover,
.myt-footer__social .elementor-social-icon:focus-visible {
	background-color: var(--myt-amber);
}
.myt-footer__social .elementor-social-icon:hover svg,
.myt-footer__social .elementor-social-icon:focus-visible svg {
	fill: var(--myt-teal);
}
.e-con.myt-footer__buttons {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--myt-space-sm);
	padding: 0;
}
/* Elementor sizes widgets in a flex container to the full row by default;
   let each button take its own width so the pair sits side by side. */
.myt-footer__buttons > .elementor-widget {
	width: auto;
	flex: 0 0 auto;
}
.myt-footer__badge img {
	width: 88px;
}
.e-con.myt-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: var(--myt-space-sm);
	margin-top: var(--myt-space-2xl);
	padding-top: var(--myt-space-lg);
	border-top: 1px solid var(--myt-rule-dark);
	font-size: var(--myt-text-xs);
	color: var(--myt-on-dark-muted);
	text-align: center; /* phones; left from 768 */
}
.myt-footer__copy p {
	margin: 0;
}
.myt-footer__legal .elementor-icon-list-items {
	margin: 0 !important; /* inline view offsets the list with negative margins per element; the gap below replaces them */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--myt-space-2xs) var(--myt-space-md);
}
.myt-footer__legal .elementor-icon-list-item {
	margin: 0 !important; /* Icon List's inline view adds its own item margins per element */
}
.myt-footer__legal .elementor-icon-list-text {
	color: inherit;
	font-size: var(--myt-text-xs);
}
@media (min-width: 768px) {
	.e-con.myt-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.myt-footer__contact {
		grid-column: 1 / -1;
	}
	.e-con.myt-footer__buttons,
	.myt-footer__social .elementor-social-icons-wrapper,
	.myt-footer__legal .elementor-icon-list-items {
		justify-content: flex-start;
	}
	.e-con.myt-footer__bottom {
		text-align: left;
	}
	.elementor-widget.myt-footer__social,
	.elementor-widget.myt-footer__badge {
		text-align: left;
	}
}
@media (min-width: 992px) {
	.e-con.myt-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}
@media (min-width: 1200px) {
	.e-con.myt-footer__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr);
	}
	.myt-footer__contact {
		grid-column: auto;
	}
}