/* 
Theme Name: HoseJoy
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/*
 * Typography baseline
 * Elementor sets globals on `.elementor-kit-*`, but we also enforce Poppins
 * on the document body so non-Elementor outputs (Woo templates, notices, etc.)
 * stay consistent.
 */
body,
button,
input,
select,
textarea {
	font-family: "Poppins Regular", "Poppins", sans-serif;
}

div.type-page > ul {
	margin-bottom: 25px;
	
}

/* Cart page: prevent horizontal bleed/scroll caused by off-canvas widgets or small negative offsets */
body.woocommerce-cart {
	overflow-x: clip;
}

@supports not (overflow: clip) {
	body.woocommerce-cart {
		overflow-x: hidden;
	}
}

/* Brand label on product detail page */
.elementor-widget-woocommerce-product-meta span.posted_in{
	font-weight: 700!important;
}

/* Product video (ACF field: product_video) */
.hj-product-video {
	margin: 16px 0;
}

body.single-product .elementor-widget-woocommerce-product-images[class*="elementor-animation-"]:hover,
body.single-product .elementor-widget-woocommerce-product-images .elementor-widget-container[class*="elementor-animation-"]:hover,
body.single-product .elementor-widget-woocommerce-product-images [class*="elementor-animation-"]:hover {
	transform: none !important;
}

/* Product tabs + video layout */
.hj-tabs-with-video {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.hj-tabs-with-video__tabs {
	flex: 1 1 66.666%;
	min-width: 0;
}

.hj-tabs-with-video__video {
	flex: 0 0 33.333%;
}

.hj-tabs-with-video__video .hj-product-video {
	margin: 0;
}

@media (max-width: 767px) {
	.hj-tabs-with-video {
		flex-direction: column;
		gap: 16px;
	}

	.hj-tabs-with-video__tabs,
	.hj-tabs-with-video__video {
		flex: 0 0 auto;
		width: 100%;
	}
}

.hj-product-video video {
	background: #000;
	border-radius: 4px;
	display: block;
	height: auto;
	max-width: 100%;
	width: 100%;
}

/* WooCommerce classic notices (e.g. “has been added to your cart”) */
.woocommerce-notices-wrapper {
	margin: 16px 0;
}

.e-woocommerce-notices-wrapper {
	margin: 16px 0;
}


.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
	background: #fff;
	border: 1px solid #ffbb00;
	border-radius: 4px;
	box-sizing: border-box;
	color: #2f2f2f;
	font-size: 0.875em;
	line-height: 1.5;
	margin: 16px 0;
	position: relative;
	/* Keep space for WooCommerce's ::before icon */
	padding: 1em 2em 1em 3.5em;
}

.e-woocommerce-notices-wrapper .woocommerce-message,
.e-woocommerce-notices-wrapper .woocommerce-info,
.e-woocommerce-notices-wrapper .woocommerce-error {
	background: #fff;
	border: 1px solid #ffbb00;
	border-radius: 4px;
	box-sizing: border-box;
	color: #2f2f2f;
	font-size: 0.875em;
	line-height: 1.5;
	margin: 16px 0;
	position: relative;
	/* Keep space for WooCommerce's ::before icon */
	padding: 1em 2em 1em 3.5em;
}

.woocommerce-notices-wrapper .woocommerce-error {
	list-style: none;
}

/* Notice variants */
.woocommerce-notices-wrapper .woocommerce-message {
	background-color: #FFF8E6;
	border: 1px solid var(--e-global-color-accent, #FFBB00) !important;
}

.e-woocommerce-notices-wrapper .woocommerce-message {
	background-color: #FFF8E6;
	border: 1px solid var(--e-global-color-accent, #FFBB00) !important;
}

/* Success notice icon */
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-message:before {
	color: var(--e-global-color-accent, #FFBB00) !important;
	/* Ensure the icon stays on the left and doesn't affect text flow */
	position: absolute;
	top: 1em;
	left: 1.5em;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .stock {
	color: #1E1E1E !important;
}

.e-woocommerce-notices-wrapper .woocommerce-message::before,
.e-woocommerce-notices-wrapper .woocommerce-message:before {
	color: var(--e-global-color-accent, #FFBB00) !important;
	/* Ensure the icon stays on the left and doesn't affect text flow */
	position: absolute;
	top: 1em;
	left: 1.5em;
}

/* Elementor Pro can wrap notices with .e-wc-message-notice and override borders; force our accent border */
.e-wc-message-notice .woocommerce-message,
.woocommerce-notices-wrapper.e-wc-message-notice .woocommerce-message {
	border: 1px solid var(--e-global-color-accent, #FFBB00) !important;
}

.woocommerce-notices-wrapper .woocommerce-info {
	background-color: #f4f8ff;
	border-color: var(--e-global-color-accent, #FFBB00);
}

.woocommerce-notices-wrapper .woocommerce-error {
	background-color: #fff0f0;
	border-color: var(--e-global-color-accent, #FFBB00);
}

/* “View cart” / action button inside notice */
.woocommerce-notices-wrapper .woocommerce-message .button,
.woocommerce-notices-wrapper .woocommerce-info .button,
.woocommerce-notices-wrapper .woocommerce-error .button {
	appearance: none;
	background-color: var(--e-global-color-accent, #FFBB00);
	border: 1px solid var(--e-global-color-accent, #FFBB00);
	border-radius: 3px;
	box-shadow: none;
	color: var(--e-global-color-71ba341, #fff);
	cursor: pointer;
	float: right;
	font-family: var(
		--e-global-typography-primary-font-family,
		var(--e-global-typography-primary-font-family, inherit)
	);
	font-weight: var(--e-global-typography-accent-font-weight, inherit);
	line-height: 1;
	margin: 0 0 0 12px;
	opacity: 1;
	padding: 10px;
	text-transform: uppercase;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
}

.e-woocommerce-notices-wrapper .woocommerce-message .button,
.e-woocommerce-notices-wrapper .woocommerce-info .button,
.e-woocommerce-notices-wrapper .woocommerce-error .button {
	appearance: none;
	background-color: var(--e-global-color-accent, #FFBB00);
	border: 1px solid var(--e-global-color-accent, #FFBB00);
	border-radius: 3px;
	box-shadow: none;
	color: var(--e-global-color-71ba341, #fff);
	cursor: pointer;
	float: right;
	font-family: var(
		--e-global-typography-accent-font-family,
		var(--e-global-typography-primary-font-family, inherit)
	);
	font-weight: var(--e-global-typography-accent-font-weight, inherit);
	line-height: 1;
	margin: 0 0 0 12px;
	opacity: 1;
	padding: 10px;
	text-transform: uppercase;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
}

.woocommerce-notices-wrapper .woocommerce-message .button:hover,
.woocommerce-notices-wrapper .woocommerce-info .button:hover,
.woocommerce-notices-wrapper .woocommerce-error .button:hover {
	background-color: var(--e-global-color-71ba341, #fff);
	color: var(--e-global-color-accent, #FFBB00);
	border-color: var(--e-global-color-accent, #FFBB00);
}

.e-woocommerce-notices-wrapper .woocommerce-message .button:hover,
.e-woocommerce-notices-wrapper .woocommerce-info .button:hover,
.e-woocommerce-notices-wrapper .woocommerce-error .button:hover {
	background-color: var(--e-global-color-71ba341, #fff);
	color: var(--e-global-color-accent, #FFBB00);
	border-color: var(--e-global-color-accent, #FFBB00);
}

.woocommerce-notices-wrapper .woocommerce-message .button:focus,
.woocommerce-notices-wrapper .woocommerce-info .button:focus,
.woocommerce-notices-wrapper .woocommerce-error .button:focus {
	outline: 2px solid var(--e-global-color-accent, #FFBB00);
	outline-offset: 2px;
}

.e-woocommerce-notices-wrapper .woocommerce-message .button:focus,
.e-woocommerce-notices-wrapper .woocommerce-info .button:focus,
.e-woocommerce-notices-wrapper .woocommerce-error .button:focus {
	outline: 2px solid var(--e-global-color-accent, #FFBB00);
	outline-offset: 2px;
}

/*
 * Front-end select controls
 * Note: Styling native <option> hover/selected is browser/OS-dependent.
 */
body.single-product:not(.wp-admin) select {
	accent-color: var(--e-global-color-accent, #FFBB00);
}

body.single-product:not(.wp-admin) select:focus,
body.single-product:not(.wp-admin) select:focus-visible {
	outline: 2px solid var(--e-global-color-accent, #FFBB00);
	outline-offset: 2px;
}

/* Best-effort option highlight styling (works in some browsers, ignored in others) */
body.single-product:not(.wp-admin) select option:checked,
body.single-product:not(.wp-admin) select option:focus,
body.single-product:not(.wp-admin) select option:hover {
	background-color: var(--e-global-color-accent, #FFBB00) !important;
	background: linear-gradient(
		var(--e-global-color-accent, #FFBB00),
		var(--e-global-color-accent, #FFBB00)
	) !important;
	color: #000 !important;
}

/* WooCommerce Blocks notices (Product page add-to-cart banner) */
body:not(.wp-admin) .wc-block-components-notice-banner {
	border-color: var(--e-global-color-accent, #FFBB00) !important;
}

body:not(.wp-admin) .wc-block-components-notice-banner.is-error,
body:not(.wp-admin) .wc-block-components-notice-banner.is-warning,
body:not(.wp-admin) .wc-block-components-notice-banner.is-success,
body:not(.wp-admin) .wc-block-components-notice-banner.is-info {
	border-color: var(--e-global-color-accent, #FFBB00) !important;
}

body:not(.wp-admin) .wc-block-components-notice-banner > svg,
body:not(.wp-admin) .wc-block-components-notice-banner.is-error > svg,
body:not(.wp-admin) .wc-block-components-notice-banner.is-warning > svg,
body:not(.wp-admin) .wc-block-components-notice-banner.is-success > svg,
body:not(.wp-admin) .wc-block-components-notice-banner.is-info > svg {
	background-color: var(--e-global-color-accent, #FFBB00) !important;
}

/* Style "View cart" link inside notice banner like a button */
body:not(.wp-admin) .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward {
	background-color: var(--e-global-color-accent, #FFBB00) !important;
	border: 1px solid var(--e-global-color-accent, #FFBB00) !important;
	border-radius: 3px;
	color: #fff !important;
	display: inline-block;
	float: none;
	margin-left: 12px;
	opacity: 1 !important;
	padding: 10px 12px !important;
	text-decoration: none !important;
	text-transform: uppercase;
	white-space: nowrap;
}

body:not(.wp-admin) .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward:hover,
body:not(.wp-admin) .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward:focus {
	background-color: #fff !important;
	color: var(--e-global-color-accent, #FFBB00) !important;
	border-color: var(--e-global-color-accent, #FFBB00) !important;
	text-decoration: none !important;
}

/* SelectWoo / Select2 dropdown option colors */
body.single-product:not(.wp-admin) .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: var(--e-global-color-accent, #FFBB00) !important;
	color: #000 !important;
}

body.single-product:not(.wp-admin) .select2-container--default .select2-results__option--selected {
	background-color: var(--e-global-color-accent, #FFBB00) !important;
	color: #000 !important;
}

/* Some Select2/SelectWoo themes use aria-selected instead of --selected */
body.single-product:not(.wp-admin) .select2-container--default .select2-results__option[aria-selected='true'] {
	background-color: var(--e-global-color-accent, #FFBB00) !important;
	color: #000 !important;
}

body.single-product:not(.wp-admin) .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--e-global-color-accent, #FFBB00) !important;
	color: #000 !important;
}

body.single-product:not(.wp-admin) .select2-container--default.select2-container--focus .select2-selection--single,
body.single-product:not(.wp-admin) .select2-container--default.select2-container--focus .select2-selection--multiple {
	border-color: var(--e-global-color-accent, #FFBB00);
}

/* Theme-agnostic overrides (some installs use --classic, etc.) */
body.single-product:not(.wp-admin) .select2-results__option--highlighted,
body.single-product:not(.wp-admin) .select2-results__option--highlighted.select2-results__option--selectable,
body.single-product:not(.wp-admin) .select2-results__option.select2-results__option--highlighted[aria-selected],
body.single-product:not(.wp-admin) .select2-results__option.select2-results__option--highlighted[aria-selected='false'] {
	background-color: var(--e-global-color-accent, #FFBB00) !important;
	color: #000 !important;
}

body.single-product:not(.wp-admin) .select2-results__option--selected,
body.single-product:not(.wp-admin) .select2-results__option[aria-selected='true'] {
	background-color: var(--e-global-color-accent, #FFBB00) !important;
	color: #000 !important;
}

/* Vertically center the single-select value/placeholder */
body.single-product:not(.wp-admin) .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
}

body.single-product:not(.wp-admin) .select2-container .select2-selection--single .select2-selection__rendered {
	padding-left: 8px;
	padding-right: 26px;
	line-height: normal !important;
}

body.single-product:not(.wp-admin) .select2-container .select2-selection--single .select2-selection__arrow {
	height: 100%;
	display: flex;
	align-items: center;
}

/*
 * WooCommerce: My Account
 */
body.woocommerce-account:not(.wp-admin) .woocommerce {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* Make the account nav a horizontal “tabs” row above content */
body.woocommerce-account:not(.wp-admin) .woocommerce-MyAccount-navigation {
	float: none;
	width: 100%;
	margin: 0 0 18px;
}

body.woocommerce-account:not(.wp-admin) .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

body.woocommerce-account:not(.wp-admin) .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

body.woocommerce-account:not(.wp-admin) .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
}

body.woocommerce-account:not(.wp-admin) .woocommerce-MyAccount-navigation a {
	display: inline-block;
	background-color: var(--e-global-color-accent, #FFBB00);
	border: 2px solid var(--e-global-color-accent, #FFBB00);
	border-radius: 3px;
	color: #fff;
	padding: 10px 12px;
	text-decoration: none !important;
	text-transform: uppercase;
	line-height: 1;
	transition: all 0.2s ease-in-out;
}

body.woocommerce-account:not(.wp-admin) .woocommerce-MyAccount-navigation a:hover,
body.woocommerce-account:not(.wp-admin) .woocommerce-MyAccount-navigation a:focus,
body.woocommerce-account:not(.wp-admin) .woocommerce-MyAccount-navigation .is-active > a {
	background-color: #fff;
	color: var(--e-global-color-accent, #FFBB00);
	border-color: var(--e-global-color-accent, #FFBB00);
}

body.woocommerce-account:not(.wp-admin) .woocommerce-MyAccount-navigation a:focus {
	outline: 2px solid var(--e-global-color-accent, #FFBB00);
	outline-offset: 2px;
}

/*
 * WooCommerce: Checkout (Blocks)
 * Only apply after JS initializes, so no-JS behavior stays default.
 */
body.woocommerce-checkout.hj-create-account-initialized:not(.wp-admin) #wc-guest-checkout-notice,
body.woocommerce-checkout.hj-create-account-initialized:not(.wp-admin) .wc-block-checkout__guest-checkout-notice {
	display: none;
}

body.woocommerce-checkout.hj-create-account-initialized.hj-create-account-unchecked:not(.wp-admin) #wc-guest-checkout-notice,
body.woocommerce-checkout.hj-create-account-initialized.hj-create-account-unchecked:not(.wp-admin) .wc-block-checkout__guest-checkout-notice {
	display: block;
}

/*
 * Mobile navigation (Elementor Nav Menu)
 * Make the hamburger menu open as a full-viewport overlay (no layout push).
 */
@media (max-width: 1024px) {
	:root {
		/* Adjust if your header is taller/shorter on mobile */
		--hj-mobile-header-offset: 60px;
	}

	body:not(.wp-admin) .elementor-widget-nav-menu {
		/* ensures fixed dropdown can be layered above header content */
		position: relative;
		z-index: 9998;
	}

	/* Keep the header (logo + toggle) above the full-screen dropdown */
	body:not(.wp-admin) .elementor-location-header,
	body:not(.wp-admin) header.elementor-location-header,
	body:not(.wp-admin) .elementor-header,
	body:not(.wp-admin) header.site-header,
	body:not(.wp-admin) .site-header {
		position: relative;
		z-index: 10000;
	}

	/* Elementor typically renders the dropdown container as a sibling of the toggle */
	body:not(.wp-admin) .elementor-widget-nav-menu .elementor-nav-menu__container.elementor-nav-menu--dropdown,
	body:not(.wp-admin) .elementor-widget-nav-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: fixed;
		top: var(--hj-mobile-header-offset, 84px);
		right: 0;
		bottom: 0;
		left: 0;
		height: calc(100vh - var(--hj-mobile-header-offset, 84px));
		width: 100vw;
		max-height: none !important;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		background: #fff;
		z-index: 9999;
		padding-bottom: env(safe-area-inset-bottom);

		/* keep closed state from blocking the page */
		opacity: 0;
		transform: translateY(-8px);
		pointer-events: none;
		transition: opacity 160ms ease, transform 160ms ease;
	}

	/* Open state: when hamburger/toggle is expanded */
	body:not(.wp-admin) .elementor-widget-nav-menu .elementor-menu-toggle[aria-expanded='true'] ~ .elementor-nav-menu__container,
	body:not(.wp-admin) .elementor-widget-nav-menu .elementor-menu-toggle.elementor-active ~ .elementor-nav-menu__container {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
		display: block !important;
		padding-top: 50px;
	}

	/* Make the open-state toggle behave like a top-right close button */
	body:not(.wp-admin) .elementor-widget-nav-menu .elementor-menu-toggle.elementor-active,
	body:not(.wp-admin) .elementor-widget-nav-menu .elementor-menu-toggle[aria-expanded='true'] {
		position: fixed;
		top: calc(env(safe-area-inset-top) + 12px);
		right: 12px;
		z-index: 10001;
	}

	/* Ensure the dropdown menu list fills the panel naturally */
	body:not(.wp-admin) .elementor-widget-nav-menu .elementor-nav-menu--dropdown {
		background: transparent;
	}

	/* Active + hover background */
	body:not(.wp-admin) .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item:hover,
	body:not(.wp-admin) .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item:focus,
	body:not(.wp-admin) .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item:focus-visible,
	body:not(.wp-admin) .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item-active,
	body:not(.wp-admin) .elementor-widget-nav-menu .elementor-nav-menu--dropdown .current-menu-item > a,
	body:not(.wp-admin) .elementor-widget-nav-menu .elementor-nav-menu--dropdown .current-menu-ancestor > a {
		background-color: #ffbb00;
		color: #fff;
	}

	body:not(.wp-admin) .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-sub-item:hover,
	body:not(.wp-admin) .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-sub-item:focus,
	body:not(.wp-admin) .elementor-widget-nav-menu .elementor-nav-menu--dropdown .current-menu-item > a.elementor-sub-item {
		background-color: #ffbb00;
		color: #fff;
	}

	/* Submenu label styling */
	body:not(.wp-admin) .elementor-widget-nav-menu .elementor-nav-menu--dropdown .sub-menu a,
	body:not(.wp-admin) .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-sub-item {
		text-transform: uppercase;
		font-size: 1.2rem;
		font-weight: 500;
	}
}



/*
 * Mobile UI fixes
 * - Reduce headings uniformly under 768px
 * - Prevent horizontal scroll caused by wide carousels (Owl Carousel stage)
 * - Improve tap targets for carousel controls
 */
@media (max-width: 767px) {
	/* Avoid the subtle 1–5px horizontal scroll on mobile */
	html,
	body {
		overflow-x: hidden;
	}

	/* Owl Carousel (used by UC/Ultimate Addons widgets) can create a very wide stage element */
	.owl-carousel,
	.owl-stage-outer {
		overflow-x: hidden !important;
	}

	.owl-stage {
		will-change: transform;
	}

	/* Make carousel controls easier to tap */
	.owl-nav button,
	.owl-dots button,
	.elementor-swiper-button,
	.swiper-button-next,
	.swiper-button-prev {
		min-width: 44px;
		min-height: 44px;
	}

	/* Uniform heading scale */
	/* :is(h1, h2, h3, h4, h5, h6),
	.elementor-heading-title {
		line-height: 1.15 !important;
	}

	h1,
	h1.elementor-heading-title {
		font-size: 32px !important;
	}

	h2,
	h2.elementor-heading-title {
		font-size: 28px !important;
	}

	h3,
	h3.elementor-heading-title {
		font-size: 24px !important;
	}

	h4,
	h4.elementor-heading-title {
		font-size: 20px !important;
	}

	h5,
	h5.elementor-heading-title {
		font-size: 18px !important;
	}

	h6,
	h6.elementor-heading-title {
		font-size: 16px !important;
	} */

	/* Elementor heading widgets can be set to render as a <div>; keep those in a sane mobile size */
	.elementor-heading-title:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
		font-size: 28px !important;
	}

	/* Why HoseJoy: inline CTA icon in page content was rendering at 100% width */
	body.page-id-2 .elementor-widget-theme-post-content a[href="#"] {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 12px;
		text-align: center;
		text-decoration: none;
	}

	body.page-id-2 .elementor-widget-theme-post-content a[href="#"] > svg {
		width: 120px !important;
		height: 120px !important;
		max-width: 120px !important;
		max-height: 120px !important;
		flex: 0 0 auto;
	}
}

/* home hero lighthouse tweaks */
.elementor-widget-image.hero-adapter img {
	width: 100%;
	height: auto;
	aspect-ratio: 768 / 632;
	/* or whatever your real ratio is */
	display: block;
}