/* =====================================================================
   05-system.css -- Unit 8 (site-wide consistency & polish)
   Loads FIRST (filename order), before 10-footer/20-home/30-pages/40-shop
   and before the Flatsome theme-mod inline #custom-css. Holds cross-page
   design-system rules only: buttons, hero safety net, gutters, the
   floating WhatsApp button and the global footer-CTA visibility switch.
   Page-specific/section-specific rules stay in the other unit files.
   ===================================================================== */

/* === Button system ===
   One shared size/typography system for every content button on the site
   (primary/secondary/outline/white all keep their own colour from Flatsome's
   "color" attribute; only sizing + type are unified here). Header, top-bar
   and off-canvas menu buttons are excluded on purpose ("Header buttons keep
   their current design unless they break the system"): they already meet
   the 44px tap-target rule from the Header/Global CSS.

   Round 2 fix (2 iterations): min-height/display/alignment stay !important
   (non-negotiable -- this is the actual 44px tap-target requirement, and it
   must win over Flatsome's .small/.xsmall utility classes regardless of
   specificity). Padding/typography are NOT !important, so a genuinely
   different component style -- e.g. the shop/related product-card "View
   details" text-link (40-shop.css) -- can override them with an ordinary
   rule instead of fighting a specificity war.

   The exclusions (header/off-canvas/back-to-top buttons) are wrapped in
   :where(), which always contributes ZERO specificity, however complex the
   selector list inside it. Previously they were plain :not() clauses, and
   ":not(#header .button)" silently added a whole ID's worth of specificity
   to EVERY match (elements not inside #header still "pay" for the ID in
   the negated argument) -- (0,1,5,0) total, higher than any page file could
   reasonably reach, which is what was overriding 40-shop.css's "View
   details" padding and giving the back-to-top button an oval 44x46 shape at
   <=549px (".icon.circle" needing equal width/height couldn't win either).
   With :where(), this selector's real specificity is just ".button" (or
   ".button.icon.circle"), so ordinary, appropriately-specific component
   rules can override it again as intended. */
.button:where(:not(#header *):not(.mobile-sidebar *):not(.back-to-top)),
a.button:where(:not(#header *):not(.mobile-sidebar *):not(.back-to-top)) {
	min-height: 46px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 26px;
	padding-right: 26px;
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.3;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: normal;
}

/* Icon-only circular buttons (e.g. the product-gallery zoom trigger) must
   stay circular, not stretch to the padded pill above. Kept !important +
   explicit width/min-width on both axes so the min-height rule above can
   never turn this into an oval. */
.button.icon.circle:where(:not(#header *):not(.back-to-top)) {
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 46px !important;
	min-width: 46px !important;
	height: 46px !important;
}

@media (max-width: 849px) {
	.button:where(:not(#header *):not(.mobile-sidebar *):not(.back-to-top)),
	a.button:where(:not(#header *):not(.mobile-sidebar *):not(.back-to-top)) {
		min-height: 46px !important;
	}
}

@media (max-width: 549px) {
	.button:where(:not(#header *):not(.mobile-sidebar *):not(.back-to-top)),
	a.button:where(:not(#header *):not(.mobile-sidebar *):not(.back-to-top)) {
		min-height: 44px !important;
		font-size: 14px;
		padding-left: 20px;
		padding-right: 20px;
	}
	.button.icon.circle:where(:not(#header *):not(.back-to-top)) {
		width: 44px !important;
		min-width: 44px !important;
		height: 44px !important;
	}
}

/* === Hero safety net (HIGH #1) ===
   Flatsome's ux_banner sets a fixed pixel height and .banner-layers clips
   overflow, so long headline/subtext combinations get cut off on narrow
   phones no matter how the height attributes are tuned per page. Letting
   the layers grow instead of clipping is the robust, page-agnostic fix;
   per-hero height/font tuning (done in page content + 20-home/30-pages/
   40-shop) keeps the *normal* case tidy, this is the guard for the rest. */
.banner .banner-layers {
	overflow: visible;
}
.banner {
	overflow: visible;
}
.banner .banner-bg,
.banner .overlay {
	overflow: hidden;
}

/* === Mobile gutter (M1: effective side padding >=16px, target 20px) ===
   Measured directly in the browser (a real .row/.col tree, not just the
   theory): most boxed (non-"full-width") [row]/[section] combinations on
   this site render with NO ".container" div in the DOM at all at mobile
   widths -- the row is already exactly viewport-width, and the ONLY edge
   protection is Flatsome's own ".col{padding:0 15px 30px}" gutter
   (FLATSOME_REFERENCE). Overriding just ".container" (as a first attempt
   here did) left real pages at 15px. Override the .col gutter itself,
   plus .container for the cases that do use one, and the banner/text_box
   padding for full-bleed heroes/CTAs. Our stylesheet loads BEFORE the
   theme-mod inline CSS, so these need !important to win the cascade. */
@media (max-width: 549px) {
	.container {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	/* Scoped to exclude Flatsome's own deliberately tight row gutters
	   (row-collapse:0, row-small:~10px, row-xsmall:2px) -- forcing 20px
	   there would break intentionally tight grids (icon rows, thumbnail
	   strips) that never had an edge-distance problem to begin with. */
	.row:not(.row-collapse):not(.row-small):not(.row-xsmall) > .col {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	/* A .container that also contains .col children would otherwise stack
	   both paddings (20+20=40px); when a .container is a col's ancestor,
	   the .col gutter alone is enough. */
	.container .row:not(.row-collapse):not(.row-small):not(.row-xsmall) > .col {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
	.row-full-width .text-box,
	.banner .text-box,
	.ux_banner .text-box {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	.container > .row:not(.row-full-width),
	.container > .row-inner {
		margin-left: 0;
		margin-right: 0;
	}
}

/* === Global footer CTA band visibility (HIGH #3) ===
   The homepage already hides it (10-footer.css, "home .bt-footer-cta").
   Hide it on every other page that already ends with its own closing CTA,
   or that has no natural place for a second CTA: Hose Crimping, About, 404,
   Request a Quote, Contact, Cart, My Account. The Inventory/shop page used
   to have its own separate boxed CTA panel (removed, see betogrow-shop.php)
   and now relies on this same global band as its one closing CTA, so it is
   deliberately NOT in this hide list. Product pages and the Privacy/Refund
   policy pages also keep it (they have no page-level closing CTA of their
   own). */
body.page-id-168 #footer .bt-footer-cta,
body.page-id-19 #footer .bt-footer-cta,
body.error404 #footer .bt-footer-cta,
body.page-id-35 #footer .bt-footer-cta,
body.page-id-23 #footer .bt-footer-cta,
body.woocommerce-cart #footer .bt-footer-cta,
body.woocommerce-account #footer .bt-footer-cta {
	display: none;
}

/* === Floating WhatsApp button (M11) ===
   Bottom-left (the back-to-top button already owns bottom-right), on every
   page. Markup is injected once via the footer block (renders in the DOM
   on every page since the footer is global) but is positioned fixed so its
   place in the DOM doesn't matter. */
.bt-whatsapp-float {
	position: fixed;
	left: 18px;
	bottom: 18px;
	z-index: 999;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: #25D366;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba(5, 31, 48, 0.35);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bt-whatsapp-float:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 10px 26px rgba(5, 31, 48, 0.4);
}
.bt-whatsapp-float svg {
	width: 28px;
	height: 28px;
	display: block;
}
@media (max-width: 549px) {
	.bt-whatsapp-float {
		left: 14px;
		bottom: 14px;
		width: 48px;
		height: 48px;
	}
	.bt-whatsapp-float svg {
		width: 25px;
		height: 25px;
	}
}

/* === Mobile off-canvas menu: product dropdown rows >=44px (LOW #11) === */
@media (max-width: 849px) {
	#main-menu ul.sub-menu.nav-sidebar-ul.children li a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}
}