/* ==========================================================================
   Universal Tile — Home page refresh (August 2026)
   Implements design_handoff_home_refresh / SPEC-sections.md

   Scoping rules:
   - Site chrome (contact bar, header, footer) is global: the header and
     footer are shared Elementor templates, so a home-only treatment would
     break as soon as you navigated away.
   - Everything else is scoped to `body.home`.
   ========================================================================== */

:root{
	--uni-navy-deep:#092a46;
	--uni-navy:#0d3f66;
	--uni-navy-light:#114f7e;
	--uni-blue:#1b7fc4;
	--uni-link:#0f5b91;
	--uni-sky:#8ecdf4;
	--uni-ice:#cfe6f7;
	--uni-pale:#dfeaf3;
	--uni-footer-text:#a9c6dc;
	--uni-hover-wash:#eaf3fa;
	--uni-border:#dfe7ee;
	--uni-text:#223642;
	--uni-muted:#5b7285;
	--uni-page:#eef3f7;

	--uni-head:"Bricolage Grotesque","Open Sans",Arial,sans-serif;
	--uni-ui:"Barlow Condensed","Open Sans",Arial,sans-serif;
	--uni-body:"Source Sans 3","Open Sans",Arial,sans-serif;

	--uni-gutter:24px;
	--uni-max:1240px;
}

.uni-wrap{max-width:var(--uni-max);margin:0 auto;padding:0 var(--uni-gutter);}

/* --------------------------------------------------------------------------
   1. Contact bar (site-wide, above the header)
   -------------------------------------------------------------------------- */
.uni-topbar{background:var(--uni-navy);color:var(--uni-ice);font-family:var(--uni-body);font-size:15.5px;letter-spacing:.02em;}
.uni-topbar__inner{max-width:var(--uni-max);margin:0 auto;padding:9px var(--uni-gutter);display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;align-items:center;}
.uni-topbar__right{display:flex;flex-wrap:wrap;gap:22px;align-items:center;}
.uni-topbar a{color:var(--uni-ice);text-decoration:none;}
.uni-topbar a:hover{color:#fff;text-decoration:underline;}
.uni-topbar__phone{color:#fff !important;font-weight:700;font-size:17px;}

/* --------------------------------------------------------------------------
   2. Header (site-wide restyle of the shared Elementor header)
   -------------------------------------------------------------------------- */
.site-header,
header.elementor-location-header{background:#fff;border-bottom:1px solid var(--uni-border);}
/* Match the header to the content measure (Elementor defaults it to 1140). */
header.elementor-location-header > .elementor-section > .elementor-container,
header.elementor-location-header .elementor-section .elementor-container{
	max-width:var(--uni-max) !important;width:100%;
}

/* Forced for the same reason as the footer nav: Elementor's per-element CSS
   (.elementor-4841 .elementor-element-xxx .elementor-item) sits above any
   selector the theme can practically write. */
header.elementor-location-header .elementor-nav-menu .elementor-item{
	font-family:var(--uni-ui) !important;font-size:21px !important;font-weight:600 !important;
	text-transform:uppercase !important;letter-spacing:.03em !important;
	color:var(--uni-navy) !important;padding:12px 9px !important;border-radius:4px !important;
	transition:background .15s ease,color .15s ease;fill:var(--uni-navy);
}
header.elementor-location-header .elementor-nav-menu .elementor-item:hover,
header.elementor-location-header .elementor-nav-menu .elementor-item:focus-visible,
header.elementor-location-header .elementor-nav-menu .elementor-item.elementor-item-active{
	background:var(--uni-hover-wash) !important;color:var(--uni-navy) !important;
}
/* Desktop only. `.elementor-nav-menu--dropdown` is on BOTH the desktop
   submenu panel and the mobile menu container, so styling it unscoped put a
   border, padding and min-width on the mobile menu - which Elementor animates
   open by setting max-height from its measured height. That left the mobile
   "All Products" submenu stuck at max-height:0. */
@media (min-width:1025px){
	header.elementor-location-header ul.sub-menu.elementor-nav-menu--dropdown{
		background:#fff;border:1px solid var(--uni-border);border-top:3px solid var(--uni-blue);
		box-shadow:0 18px 40px rgba(13,63,102,.18);min-width:232px;padding:6px 0;border-radius:0;
	}
	header.elementor-location-header ul.sub-menu.elementor-nav-menu--dropdown a{
		font-family:var(--uni-body);font-size:19px;font-weight:400;text-transform:none;
		letter-spacing:0;color:var(--uni-text);padding:10px 18px;
	}
}
/* Mobile menu: Elementor compounds 0.85em twice on sub-items, leaving ~11px
   type, and its hover/open state is the old teal. Match the navy palette. */
@media (max-width:1024px){
	header.elementor-location-header .elementor-nav-menu--dropdown .elementor-sub-item{
		font-size:17px;padding-left:34px;color:var(--uni-text);
	}
	header.elementor-location-header .elementor-nav-menu--dropdown a:hover,
	header.elementor-location-header .elementor-nav-menu--dropdown a:focus,
	header.elementor-location-header .elementor-nav-menu--dropdown a.highlighted,
	header.elementor-location-header .elementor-nav-menu--dropdown a.elementor-item-active{
		background-color:var(--uni-navy) !important;color:#fff !important;
	}
	header.elementor-location-header .elementor-nav-menu--dropdown .elementor-item{
		color:var(--uni-navy);
	}
}
/* Second-level items: white on navy when hovered or focused. */
header.elementor-location-header .elementor-nav-menu--dropdown a:hover,
header.elementor-location-header .elementor-nav-menu--dropdown a:focus,
header.elementor-location-header .elementor-nav-menu--dropdown a:focus-visible,
header.elementor-location-header .elementor-nav-menu--dropdown a.elementor-item-active,
header.elementor-location-header .sub-menu a:hover,
header.elementor-location-header .sub-menu a:focus-visible{
	background-color:var(--uni-navy) !important;color:#fff !important;
}
/* Six items at the spec's 21px/14px need ~967px, but the nav column of a
   1240px header only offers ~945px, so they wrapped to a second row.
   Trimming the horizontal padding to 9px keeps the specified 21px type and
   leaves ~24px of slack so it can't re-wrap on a font-rendering difference.
   Below the full-width header, step the type down too. */
@media (max-width:1240px){
	header.elementor-location-header .elementor-nav-menu .elementor-item{
		font-size:19px !important;padding:11px 9px !important;
	}
}
@media (max-width:1100px){
	header.elementor-location-header .elementor-nav-menu .elementor-item{
		font-size:18px !important;padding:10px 7px !important;
	}
}

/* Keyboard users on desktop; on touch this fights Elementor's own toggle. */
@media (min-width:1025px){
	header.elementor-location-header .menu-item-has-children:focus-within > .sub-menu{
		display:block;opacity:1;visibility:visible;
	}
}

/* --------------------------------------------------------------------------
   3. Home page ground — tile-grid texture
   -------------------------------------------------------------------------- */
body.home main.site-main,
body.home .page-content{max-width:100%;width:100%;margin:0;padding:0;}
body.home .page-content,
body.home main.site-main{
	background-color:var(--uni-page);
	background-image:
		linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.75)),
		repeating-linear-gradient(0deg,rgba(27,127,196,.13) 0 1px,transparent 1px 64px),
		repeating-linear-gradient(90deg,rgba(27,127,196,.13) 0 1px,transparent 1px 64px);
}
/* The old flat grey column fill would hide the texture. */
body.home .elementor-10 > .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap.elementor-element-populated{
	background-color:transparent !important;background-image:none !important;padding:0 !important;
}
body.home .elementor-10 .elementor-section{padding:0;}
body.home .elementor-10 .elementor-container{max-width:100% !important;}
body.home .elementor-10 .elementor-widget:not(:last-child){margin-bottom:0;}

body.home{font-family:var(--uni-body);color:var(--uni-text);}
body.home h1,body.home h2,body.home h3,body.home h4{font-family:var(--uni-head);font-weight:600;letter-spacing:-.015em;}
/* Link colour is set per component instead of blanket-applied, so buttons and
   cards keep their own treatment. */
body.home .uni-intro a,
body.home .uni-cats__sub a,
body.home .uni-showroom p a,
body.home .uni-showroom__addr a{color:var(--uni-link);}
body.home .uni-intro a:hover,
body.home .uni-showroom__addr a:hover{color:var(--uni-navy);}

/* --------------------------------------------------------------------------
   4. Slider — full bleed, no swoop
   -------------------------------------------------------------------------- */
.uni-slider{position:relative;width:100%;overflow:hidden;background:var(--uni-navy);height:clamp(230px,30vw,460px);}
.uni-slider__track{display:flex;height:100%;width:100%;transition:transform 1.1s cubic-bezier(.4,0,.2,1);}
.uni-slide{position:relative;flex:0 0 100%;height:100%;}
.uni-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.uni-slide__cap{position:absolute;left:0;right:0;bottom:0;padding:54px 32px 44px;color:#fff;
	background:linear-gradient(0deg,rgba(9,42,70,.82),rgba(9,42,70,0));}
.uni-slide__cap-inner{max-width:var(--uni-max);margin:0 auto;padding-right:120px;}
.uni-slide__title{font-family:var(--uni-head);font-weight:600;font-size:clamp(22px,2.4vw,34px);line-height:1.1;letter-spacing:-.015em;color:#fff;margin:0;}
.uni-slide__sub{font-size:17.5px;color:var(--uni-ice);margin:6px 0 0;}

.uni-slider__nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border:0;border-radius:50%;
	background:rgba(13,63,102,.55);color:#fff;font-size:26px;line-height:1;cursor:pointer;
	display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);
	transition:background .18s ease;z-index:3;}
.uni-slider__nav:hover{background:var(--uni-navy);}
.uni-slider__nav:focus-visible{outline:4px solid var(--uni-blue);outline-offset:3px;}
.uni-slider__nav--prev{left:18px;}
.uni-slider__nav--next{right:18px;}

.uni-slider__dots{position:absolute;bottom:14px;left:0;right:0;padding:0 92px;display:flex;justify-content:flex-end;gap:12px;z-index:3;}
.uni-slider__dot{width:16px;height:16px;border-radius:50%;border:2px solid #fff;background:rgba(255,255,255,.28);
	box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:pointer;padding:0;transition:background .18s ease;}
.uni-slider__dot[aria-current="true"]{background:#fff;}
.uni-slider__dot:focus-visible{outline:3px solid #fff;outline-offset:3px;}

/* --------------------------------------------------------------------------
   5. CTA hero row — the whole row is one link
   -------------------------------------------------------------------------- */
.uni-cta{display:block;position:relative;width:100%;min-height:320px;overflow:hidden;text-decoration:none;color:#fff;
	background-image:var(--uni-cta-bg);background-size:cover;background-position:center;
	border-top:5px solid var(--uni-blue);border-bottom:5px solid var(--uni-blue);}
.uni-cta__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,42,70,.9) 0%,rgba(9,42,70,.78) 45%,rgba(9,42,70,.35) 100%);}
.uni-cta__inner{position:relative;display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;justify-content:space-between;
	max-width:var(--uni-max);margin:0 auto;padding:54px var(--uni-gutter);min-height:320px;}
.uni-cta__copy{max-width:780px;}
.uni-cta__eyebrow{display:block;font-family:var(--uni-ui);font-size:20px;font-weight:600;text-transform:uppercase;
	letter-spacing:.16em;color:var(--uni-sky);margin-bottom:12px;}
.uni-cta__title{display:block;font-family:var(--uni-head);font-weight:600;font-size:clamp(36px,4.8vw,68px);
	line-height:1.04;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35);}
.uni-cta__btn{display:inline-flex;align-items:center;gap:14px;background:var(--uni-blue);color:#fff;
	font-family:var(--uni-ui);font-size:30px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
	padding:20px 38px;border-radius:6px;box-shadow:0 12px 30px rgba(0,0,0,.3);}
.uni-cta__btn i{font-style:normal;display:inline-block;animation:uniCue 1.8s ease-in-out infinite;}
@keyframes uniCue{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
.uni-cta:focus-visible{outline:4px solid var(--uni-blue);outline-offset:3px;}

/* --------------------------------------------------------------------------
   6. Intro
   -------------------------------------------------------------------------- */
.uni-intro{max-width:var(--uni-max);margin:0 auto;padding:72px var(--uni-gutter) 8px;}
.uni-intro__grid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(320px,2.1fr);gap:40px 56px;align-items:start;}
.uni-intro__rule{width:64px;height:5px;background:var(--uni-blue);margin-bottom:20px;}
.uni-intro h2{font-size:clamp(32px,3.6vw,46px);line-height:1.05;color:var(--uni-navy);margin:0;text-wrap:balance;}
.uni-intro p{font-size:19.5px;line-height:1.66;margin:0;text-wrap:pretty;}
@media (max-width:700px){.uni-intro__grid{grid-template-columns:1fr;}}

/* --------------------------------------------------------------------------
   7. Product category grid
   -------------------------------------------------------------------------- */
.uni-cats{max-width:var(--uni-max);margin:0 auto;padding:56px var(--uni-gutter) 24px;}
.uni-cats h2{text-align:center;font-size:clamp(28px,3vw,40px);color:var(--uni-navy);margin:0 0 8px;text-wrap:balance;}
.uni-cats__sub{text-align:center;font-size:18px;color:var(--uni-muted);margin:0 0 36px;}
.uni-cats__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;}
.uni-card{display:block;background:#fff;border:1px solid var(--uni-border);border-radius:8px;overflow:hidden;
	box-shadow:0 2px 10px rgba(13,63,102,.07);text-decoration:none;
	transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.uni-card:hover,.uni-card:focus-visible{transform:translateY(-4px);box-shadow:0 16px 34px rgba(13,63,102,.18);border-color:var(--uni-blue);}
.uni-card:focus-visible{outline:4px solid var(--uni-blue);outline-offset:3px;}
.uni-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.uni-card__label{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;
	font-family:var(--uni-ui);font-size:25px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--uni-navy);}
.uni-card__label span{color:var(--uni-blue);}

/* --------------------------------------------------------------------------
   8. Brochure block
   -------------------------------------------------------------------------- */
.uni-brochure{background:linear-gradient(160deg,var(--uni-navy-light) 0%,var(--uni-navy) 48%,var(--uni-navy-deep) 100%);
	color:var(--uni-pale);margin-top:72px;}
.uni-brochure__inner{max-width:var(--uni-max);margin:0 auto;padding:64px var(--uni-gutter);
	display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:44px;align-items:center;}
.uni-brochure__eyebrow{font-family:var(--uni-ui);font-size:19px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--uni-sky);}
.uni-brochure h2{font-size:clamp(30px,3.2vw,44px);color:#fff;margin:8px 0 16px;}
.uni-brochure p{font-size:19px;line-height:1.65;margin:0 0 26px;text-wrap:pretty;}
.uni-brochure__btns{display:flex;flex-wrap:wrap;gap:14px;}
.uni-btn{display:inline-flex;align-items:center;font-family:var(--uni-ui);font-size:25px;font-weight:700;
	text-transform:uppercase;letter-spacing:.05em;border-radius:6px;text-decoration:none;transition:background .18s ease,color .18s ease;}
.uni-btn--primary{background:var(--uni-blue);color:#fff;padding:16px 30px;}
.uni-btn--primary:hover,.uni-btn--primary:focus-visible{background:#fff;color:var(--uni-navy);}
.uni-btn--ghost{border:2px solid #6ba9d4;color:#fff;padding:14px 28px;}
.uni-btn--ghost:hover,.uni-btn--ghost:focus-visible{background:#fff;color:var(--uni-navy);}
.uni-btn:focus-visible{outline:4px solid var(--uni-sky);outline-offset:3px;}
.uni-brochure__cover{justify-self:center;}
.uni-brochure__cover img{max-width:340px;width:100%;height:auto;border-radius:6px;box-shadow:0 24px 50px rgba(0,0,0,.4);display:block;}

/* --------------------------------------------------------------------------
   9. Showroom + map
   -------------------------------------------------------------------------- */
.uni-showroom{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));background:#fff;}
.uni-showroom__copy{padding:60px 32px;max-width:620px;margin:0 auto;width:100%;}
.uni-showroom h2{font-size:clamp(28px,3vw,38px);color:var(--uni-navy);margin:0 0 14px;}
.uni-showroom p{font-size:19px;line-height:1.65;margin:0 0 22px;}
.uni-showroom__addr{font-size:19px;line-height:1.9;margin:0 0 26px;}
.uni-showroom__addr strong{color:var(--uni-navy);}
.uni-showroom__addr a{font-weight:700;}
.uni-showroom__btn{display:inline-flex;align-items:center;background:var(--uni-navy);color:#fff;font-family:var(--uni-ui);
	font-size:24px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:15px 28px;border-radius:6px;
	text-decoration:none;transition:background .18s ease;}
.uni-showroom__btn:hover,.uni-showroom__btn:focus-visible{background:var(--uni-blue);color:#fff;}
.uni-showroom__btn:focus-visible{outline:4px solid var(--uni-blue);outline-offset:3px;}
.uni-showroom__map{min-height:380px;}
.uni-showroom__map iframe{width:100%;height:100%;min-height:380px;border:0;display:block;}

/* --------------------------------------------------------------------------
   10. Footer (site-wide)
   -------------------------------------------------------------------------- */
footer.elementor-location-footer,
.site-footer{background:var(--uni-navy-deep);color:var(--uni-footer-text);font-family:var(--uni-body);font-size:17px;}
/* The first footer section carries a teal gradient of its own; the refresh
   palette is navy, so neutralise it and let the footer background show. */
footer.elementor-location-footer .elementor-section{background-color:transparent;}
footer.elementor-location-footer > .elementor-section,
footer.elementor-location-footer .elementor-section > .elementor-background-overlay{background-image:none !important;}
/* Elementor emits per-element CSS at higher specificity than a theme selector
   can reasonably reach, so the footer nav overrides are forced. */
footer.elementor-location-footer .elementor-nav-menu .elementor-item{
	font-family:var(--uni-ui) !important;font-size:20px !important;font-weight:600 !important;
	text-transform:uppercase !important;letter-spacing:.04em !important;
	color:var(--uni-pale) !important;padding:6px 0 !important;background:transparent !important;}
footer.elementor-location-footer .elementor-nav-menu .elementor-item:hover,
footer.elementor-location-footer .elementor-nav-menu .elementor-item:focus-visible{
	color:#fff !important;background:transparent !important;}
footer.elementor-location-footer p,
footer.elementor-location-footer .elementor-heading-title{color:var(--uni-footer-text) !important;font-family:var(--uni-body);font-size:17px;}
footer.elementor-location-footer a{color:var(--uni-pale);}
footer.elementor-location-footer a:hover{color:#fff;}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
	.uni-slider__track{transition:none;}
	.uni-cta__btn i{animation:none;}
	.uni-card,.uni-cta,.uni-btn,.uni-showroom__btn{transition:none;}
	.uni-card:hover{transform:none;}
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */
@media (max-width:767px){
	.uni-cta__inner{padding:38px 20px;min-height:320px;}
	.uni-cta__copy{max-width:100%;}
	/* At 230px tall the full caption took 173px of the slide and ran under the
	   arrows. Keep the title, drop the sub-line, and inset clear of the controls. */
	.uni-slide__cap{padding:20px 60px 32px;}
	.uni-slide__cap-inner{padding-right:0;}
	.uni-slide__title{font-size:19px;line-height:1.15;}
	.uni-slide__sub{display:none;}
	.uni-slider__dots{bottom:10px;padding:0 20px;justify-content:center;}
	.uni-slider__dot{width:12px;height:12px;}
	.uni-slider__nav{width:44px;height:44px;font-size:22px;}
	.uni-slider__nav--prev{left:10px;} .uni-slider__nav--next{right:10px;}
	.uni-showroom__copy{padding:44px 20px;}
	.uni-brochure__inner{padding:48px 20px;}
}

/* --------------------------------------------------------------------------
   Header alignment (Aug 2026 revision)

   Everything is anchored to the row's BOTTOM edge, because the shared
   reference is the logo's "UNIVERSAL TILE" wordmark, which sits at the
   bottom of the logo image (the globe fills the upper ~80%). Centring the
   nav against the whole logo floated it well above that wordmark.

   The nav items stretch to the full row height via flex only - no percentage
   heights, which previously fed back into the row height and made the logo
   drift on every change. Stretching is what puts Elementor's overline on the
   header's top edge instead of the top of each menu item.
   -------------------------------------------------------------------------- */
:root{ --uni-hdr-h:106px; }
header.elementor-location-header .elementor-section,
header.elementor-location-header .elementor-container{ padding-top:0 !important; }
header.elementor-location-header .elementor-container{ align-items:stretch; }
header.elementor-location-header .elementor-column,
header.elementor-location-header .elementor-widget-wrap{
	align-items:stretch;align-content:stretch;padding-top:0 !important;
}
/* .elementor-element-populated sets align-items:center at a specificity a
   plain .elementor-widget-wrap selector cannot reach, which kept the nav from
   stretching (and so kept the overline off the header's top edge). */
header.elementor-location-header .elementor-widget-wrap.elementor-element-populated{
	align-items:stretch !important;align-content:stretch !important;
}
header.elementor-location-header .elementor-widget-nav-menu{ align-self:stretch !important; }

/* logo — bottom anchored, with 8px of breathing room beneath it */
header.elementor-location-header .elementor-widget-theme-site-logo,
header.elementor-location-header .elementor-widget-image{
	display:flex;align-items:flex-end;justify-content:flex-start;
	padding-bottom:8px;margin-bottom:0;
}

/* nav — desktop only. Below 1025px Elementor collapses this into the burger
   menu, and forcing display:flex here un-collapsed it and pushed the items
   off-screen. */
@media (min-width:1025px){
	header.elementor-location-header .elementor-widget-nav-menu{ align-self:stretch !important;display:flex; }
	header.elementor-location-header .elementor-widget-nav-menu > .elementor-widget-container{ flex:1;display:flex; }
	header.elementor-location-header .elementor-nav-menu--main{ flex:1;display:flex; }
	header.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu{
		flex:1;display:flex;align-items:flex-end;
	}
	header.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu > li{
		display:flex;align-items:flex-end;
	}
	header.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item{
		display:flex;align-items:flex-end;border-radius:0 !important;
		padding-top:0 !important;padding-bottom:18px !important;line-height:1.05 !important;
	}

	/* Hover indicator across the header's top edge.
	   The nav shares its widget-wrap with the search form, so it sits on its own
	   flex line and cannot be stretched to the full header height. The bar is
	   therefore offset arithmetically: the header height is pinned, and 100%
	   resolves to the item height. */
	/* Pinned exactly, not min-height: the offset below is a single constant, so
	   the row geometry has to be deterministic or the bar drifts by viewport. */
	header.elementor-location-header > .elementor-section{
		height:var(--uni-hdr-h);min-height:var(--uni-hdr-h);
	}
	header.elementor-location-header > .elementor-section > .elementor-container{ height:100%; }
	header.elementor-location-header .elementor-nav-menu--main .elementor-item:before{
		bottom:auto !important;height:4px !important;
		background-color:var(--uni-blue) !important;
		top:calc(100% - var(--uni-hdr-h) + 1px) !important;
	}
}

/* search icon — same bottom anchor */
@media (min-width:1025px){
	/* :not(.elementor-hidden-desktop) matters - there are two search widgets in
	   this header, and a blanket display:flex un-hid the mobile one. */
	header.elementor-location-header .elementor-widget-search-form:not(.elementor-hidden-desktop){
		align-self:flex-end;display:flex;align-items:flex-end;padding-bottom:12px;
	}
}

/* --------------------------------------------------------------------------
   Product-line tab pages (template-product-line.php)

   style.min.css gives .the_products a `margin-right:-3%` to absorb the gutter
   after the last card in a row. On desktop the surrounding wrapper has enough
   padding to swallow it; on mobile .site-main sits flush to the viewport edge,
   so that -3% (about 11px at 375px) pushed the page into horizontal scroll.

   Below the 3-across breakpoint the cards are 47.5% wide and two fit in a row
   without the compensation, so it is simply removed there.
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
	.the_products{ margin-right:0 !important; }
}
/* The cards are inline-block, so the whitespace between them in the markup
   renders as a ~4-7px gap that the theme's percentage widths (24% / 32.3% /
   49.5% / 47.5%) do not account for. That is what the -3% was compensating
   for, and why 2 x 49.5% still overflowed once it was removed. Zeroing the
   font-size on the container removes the gap at every breakpoint; each card
   sets its own font-size already. */
.pl{ font-size:0; }
.pl-item{ font-size:18px; }
@media (max-width:750px){ .pl-item{ font-size:16px; } }
@media (max-width:750px){
	/* stop the cards sitting hard against the screen edge, and give the page
	   heading the same gutter so the two line up */
	.the_products,
	.site-main .body-wrapper{ padding-left:16px;padding-right:16px;box-sizing:border-box; }
}
/* The cards are inline-block, so they align on the text baseline and rows go
   ragged whenever the tile images differ in height. */
.pl-item{ vertical-align:top; }