/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
#header {

	.nav-left { justify-content: center; }
	.nav-right { justify-content: center; }

}

#main, #footer, .mfp-content, .custom-page-title {

	font-family: inherit;
	font-size: var(--fs-200);
	line-height: 1.2;
	
	h1, h2, h3, h4, h5, h6, .alt-font {
		font-family: inherit;
		font-weight: 700;
	}
	
	strong { font-weight: 600; }
	
	.balance { text-wrap: balance; }

	:is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, select, label, legend, button:not(.toggle), .button:not(.icon)) {
		margin-block: 0;
		margin-inline: 0;
	}

	:is(p, ul, ol, button:not(.toggle), .button:not(.icon), #cmplz-manage-consent-container, #cmplz-cookies-overview)
	:has(+ :is(h1, h2, h3, h4, h5, h6)) {
		margin-block-end: 2em;
	}

	:is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, form, label, legend, button:not(.toggle), .button:not(.icon))
	:has(+ :is(p, ul, ol, blockquote, button, form, .button)) {
		margin-block-end: 0.75em;
	}

	ul:not([class], :has(.recent-blog-posts-li)) { padding-inline-start: 1.25em; }
	ol:not([class]) { padding-inline-start: 1.75em; }

	.fs-100 :is(h1, h2, h3, h4, h5, h6, p, ul, ol) { font-size: var(--fs-100); line-height: 1.4; }
	.fs-200 :is(h1, h2, h3, h4, h5, h6, p, ul, ol) { font-size: var(--fs-200); line-height: 1.4; }
	.fs-300 :is(h1, h2, h3, h4, h5, h6, p, ul, ol) { font-size: var(--fs-300); line-height: 1.4; }
	.fs-400 :is(h1, h2, h3, h4, h5, h6, p, ul, ol) { font-size: var(--fs-400); line-height: 1.2; }
	.fs-500 :is(h1, h2, h3, h4, h5, h6, p, ul, ol) { font-size: var(--fs-500); line-height: 1.2; }
	.fs-600 :is(h1, h2, h3, h4, h5, h6, p, ul, ol) { font-size: var(--fs-600); line-height: 1.1; }
	.fs-700 :is(h1, h2, h3, h4, h5, h6, p, ul, ol) { font-size: var(--fs-700); line-height: 1.1; }

	li {

		&::marker { color: var(--fs-color-secondary); }
		.marker-pri &::marker { color: var(--fs-color-primary); }
		.marker-sec &::marker { color: var(--fs-color-secondary); }
		.marker-suc &::marker { color: var(--fs-color-success); }
		.dark &::marker { color: #fff; }

	}

	.button,
	button,
	input[type=button],
	input[type=reset],
	input[type=submit] {
		font-weight: inherit;
	}

}

/*-----------*/
:is(#main, #footer, .mfp-content) :is(img, svg, iframe) {
	display: block;
	max-width: 100%;
}

:where(svg:not(.flickity-button-icon) *) {
	transform-origin: 50% 50%;
	transform-box: fill-box;
}

.lightbox-content:not(.product-lightbox) {
	background: transparent !important;
	box-shadow: unset;
}

.clip {

	& > .col-inner,
	section& {
		overflow: clip;
	}

	&.img,
	&.img * {
		border-radius: inherit;
	}

}

.grow {
	flex-grow: 1;

	.col-inner:has(> &) {
		display: flex;
		flex-flow: column;
	}
}

.contain {

	& :is(img, svg) {
		object-fit: contain;
	}

	&.side {

		& :is(img, svg) {
			object-position: top right;
		}

	}

	&.wide svg { aspect-ratio: 21 / 9; }
	&.sd svg { aspect-ratio: 4 / 3; }

}

.x-start :is(img, svg) { object-position: 0% 50%; }
.x-end :is(img, svg) { object-position: 100% 50%; }
.y-start :is(img, svg) { object-position: 50% 0%; }
.y-end :is(img, svg) { object-position: 50% 100%; }
.xy-start :is(img, svg) { object-position: 0% 0%; }
.xy-end :is(img, svg) { object-position: 100% 100%; }
.yx-start :is(img, svg) { object-position: 100% 0%; }
.yx-end :is(img, svg) { object-position: 0% 100%; }

.col-inner > .row {
	margin-inline: unset;
}

.mfp-content {

	:is(.off-canvas-left, .off-canvas-right).dark & {
		background-color: #240d41;
	}

}

section {

	&.round {
		border-radius: 3em 3em 0 0;
	}

}

.stack.wrap {
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;

	> * {
		margin: 0 !important;
	}

	.ux-logo {
		inline-size: auto !important;
	}

}

.icon-box-img img,
.icon-box-img svg {
	padding: unset;
}

.accordion.custom {
	--radius: 15px;
	display: grid;
	gap: 1.5rem;

	.accordion-item {
		background: white;
		border-radius: var(--radius);
		border: solid 2px var(--fs-color-secondary);
		overflow: clip;
	}

	.accordion-title {
		padding-inline: 1.5rem;
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		gap: 1.5rem;
		align-items: center;
		color: white;
		font-weight: 600;
		background: var(--fs-color-secondary);
		border: unset;

		&.active {
			border: unset;
		}

	}

	.accordion-inner {
		padding-inline: 1.5rem;
	}

	button.toggle {
		position: static;
		display: grid;
		grid: 25px / 25px;
		place-items: center;
		margin: 0;
		height: unset;
		min-height: unset;
		width: unset;
		min-width: unset;
		aspect-ratio: 1;
		opacity: 1;
		border: unset;
	}

	.toggle + span {
		flex-grow: 1;
	}

	.toggle .icon-angle-down {
		display: block;
		position: static;
		width: 100%;
		height: 100%;
	}

	.toggle .icon-angle-down::before {
		content: '';
		background: white;
		display: block;
		width: 100%;
		height: 100%;
		clip-path: polygon(
			45% 0%, 55% 0%, 55% 45%, 100% 45%, 100% 55%,
			55% 55%, 55% 100%, 45% 100%, 45% 55%, 0% 55%, 0% 45%, 45% 45%
		);
	}

}

.over {
	position: relative;
	z-index: 2;
}

.bigger {
	margin-inline: -20% -30%;
}

/*banner*/
.header .section-bg {
	width: 100vw;
	max-width: 100vw;
	left: 50%;
	transform: translateX(-50%);
}

/*footer*/
.footy {
  aspect-ratio: 1920 / 476;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/*yellow nav*/
/* Create yellow bar behind nav + cart */
#header .header-main {
    position: relative;
    overflow: visible;
}

/* Yellow bar layer */
#header .header-main::before {
    content: "";
    position: absolute;

    /* Anchor to the RIGHT side (cart side) */
    right: 0;
    top: 50%;
    transform: translateY(-50%);

    height:40%; /* match cart height */
    width: 90%;   /* how far it stretches LEFT */

    background: #FFD93B;
    border-radius: 999px;

    z-index: 0;
    pointer-events: none;
}


/* Ensure header content stays above bar */
#header .header-main > .container,
#header .header-main .flex-row {
    position: relative;
    z-index: 2;
}

/*-----------------------------*/

/* Force black text for buttons with blackBtn class */
a.button.blackBtn,
a.button.blackBtn span {
    color: #000 !important;
}

a.button.blackBtn:hover,
a.button.blackBtn:hover span {
    color: #000 !important;
}

a.button.blackBtn,
a.button.blackBtn span {
    color: #000 !important;
}

/* white text on hover */
a.button.blackBtn:hover,
a.button.blackBtn:hover span {
    color: #fff !important;
}

/* Hide top divider */
.top-divider {
    display: none !important;
}
/*gratis form*/


/* Gravity Forms — force text white inside .gratis */

.gratis .gform_wrapper,
.gratis .gform_wrapper label,
.gratis .gform_wrapper legend,
.gratis .gform_wrapper .gfield_label,
.gratis .gform_wrapper .gfield_description,
.gratis .gform_wrapper .gchoice label,
.gratis .gform_wrapper .ginput_container,
.gratis .gform_wrapper .ginput_container span {
    color: #fff !important;
}

/* Required text / asterisk */
.gratis .gform_wrapper .gfield_required {
    color: #ffd84d !important; /* yellow */
}
/* Add space between radio bullet and label text */
.gratis .gfield_radio input[type="radio"] {
    margin-right: 10px;
}

/* Add space below the radio field label */
.gratis .gfield_radio .gfield_label,
.gratis legend.gfield_label {
    margin-bottom: 10px !important;
}

/* Add spacing below all Gravity Forms labels in .gratis */

/* Radio group labels */
.gratis legend.gfield_label {
    margin-bottom: 10px !important;
}

/* Normal field labels (like E-pos) */
.gratis label.gfield_label {
    margin-bottom: 10px !important;
    display: block; /* ensures margin applies correctly */
}

/* Gravity Forms submit button color */
.gratis input.gform_button,
.gratis button.gform_button {
    background-color: #FFD831 !important;
    color: #000 !important;           /* readable on yellow */
    border: none !important;
}

/* Hover state */
.gratis input.gform_button:hover,
.gratis button.gform_button:hover {
    background-color: #ffcc1a !important; /* slightly darker hover */
    color: #000 !important;
}

/* Gravity Forms submit button – rounded */
.gratis input.gform_button,
.gratis button.gform_button {
    background-color: #FFD831 !important;
    color: #000 !important;
    border: none !important;
    border-radius: 30px !important;
}

/* Hover */
.gratis input.gform_button:hover,
.gratis button.gform_button:hover {
    background-color: #ffcc1a !important;
    color: #000 !important;
}

/* Center Gravity Forms submit button */
.gratis .gform_footer {
    text-align: center;
}

/* Button styling (keep consistent) */
.gratis input.gform_button,
.gratis button.gform_button {
    background-color: #FFD831 !important;
    color: #000 !important;
    border: none !important;
    border-radius: 30px !important;
    margin: 0 auto !important;
    display: inline-block;
}

/* Hover */
.gratis input.gform_button:hover,
.gratis button.gform_button:hover {
    background-color: #ffcc1a !important;
}

/*contact form*/
/* Force Gravity Forms submit button to the RIGHT */
#gform_wrapper_2 .gform_footer {
    display: flex !important;
    justify-content: flex-end !important;
}

/* Button styling */
#gform_wrapper_2 input.gform_button,
#gform_wrapper_2 button.gform_button {
    background-color: #FFD831 !important;
    color: #000 !important;
    border-radius: 30px !important;
    padding: 10px 26px !important;
    border: none !important;
}


/* Force Gravity Forms submit button to the RIGHT */
#gform_wrapper_2 .gform_footer {
    display: flex !important;
    justify-content: flex-end !important;
}

/* Button styling – 10px wider each side */
#gform_wrapper_2 input.gform_button,
#gform_wrapper_2 button.gform_button {
    background-color: #FFD831 !important;
    color: #000 !important;
    border-radius: 30px !important;
    padding: 15px 50px !important; 
    border: none !important;
}


/* Gravity Forms "Required" text – yellow */
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required_text {
    color: #FFD831 !important;
}

/* Hide Flatsome cart / checkout breadcrumb bar */
.checkout-page-title,
.checkout-page-title .page-title-inner {
    display: none !important;
}

/*shop search sorting*/

/* Hide WooCommerce result count + sorting bar */
.woocommerce-result-count,
.woocommerce-ordering {
    display: none !important;
}
/* Hide Flatsome shop page title bar */
.shop-page-title,
.page-title,
.page-title-inner,
.page-title-inner.flex-row {
    display: none !important;
}

/*cart icon border*/

.header-cart-link.button.circle {
    background-color: #FFD831 !important;
    border-color: #FFD831 !important;
}
/*hide absolute footer*/

/* Hide Flatsome absolute footer */
.absolute-footer {
    display: none !important;
}


/*form astrix*/
/* Hide Gravity Forms "indicates required fields" line */
.gform_required_legend,
.gform_required_legend *,
.gform_wrapper .gform_required_legend {
    display: none !important;
}


#field_1_3 .gfield_required_asterisk {
    padding-left: 5px;
}

.lightBtn span {
    color: #000 !important;
}
/* Mobile off-canvas menu background color */
.off-canvas-left .mfp-content,
.off-canvas-right .mfp-content {
    background-color: #FFD831 !important;
}

/*out of stock overlay*/
.box-image .out-of-stock-label {
  background-color: #1f3c88 !important; /* SITE BLUE */
  color: #ffffff !important;
  font-weight: 700;
  text-transform: uppercase;
}

/*add to cart button padding */
.product-small .add-to-cart-button {
  margin-top: 10px;
}
/* Hide share icons on single product pages */
.single-product .share-icons,
.single-product .social-icons {
  display: none !important;
}

/*single product styling*/
/* Fix quantity height to match + / - buttons */
.single-product .ux-quantity,
.single-product .ux-quantity input,
.single-product .ux-quantity .button,
.single-product .quantity,
.single-product .quantity input,
.single-product .quantity .button {
    height: 52px !important;
    line-height: 52px !important;
    box-sizing: border-box;
}

/* Ensure buttons don’t stretch differently */
.single-product .ux-quantity .button {
    padding: 0 !important;
}

/* Center the number vertically */
.single-product .quantity input.qty {
    padding: 0 !important;
    text-align: center;
}


/* Add spacing below price on single product page */
.single-product .price,
.single-product .product-page-price {
    margin-bottom: 10px !important;
}


/* Make Add to Cart button same height as quantity input */
.single-product form.cart {
    align-items: stretch;
}

.single-product form.cart .single_add_to_cart_button {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 52px; /* matches Flatsome quantity height */
    line-height: 52px !important;
}

/* CART page: equalize quantity input and +/- buttons */
.woocommerce-cart .quantity {
    display: flex;
    align-items: stretch;
}

.woocommerce-cart .quantity input.qty,
.woocommerce-cart .quantity .minus,
.woocommerce-cart .quantity .plus {
    height: 46px !important;
    line-height: 46px !important;
    padding: 0 !important;
}


/* Hide yellow nav bar on mobile & tablet */
@media (max-width: 849px) {
    #header .header-main::before {
        display: none !important;
    }
}


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
}