/*
Theme Name: Blooopp
Author: adbrainstech
Author URI: https://profiles.wordpress.org/adbrainstech/
Theme URI: 
Tags: full-site-editing, editor-style, block-styles, block-patterns
Text Domain: blooopp
Requires at least: 6.3
Requires PHP: 7.4
Tested up to: 6.3
Version: 1.0.0

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Styles intended only for the front.*/
html {
	scroll-behavior: smooth;
	overflow-x: clip;
}

body {
	overflow-x: clip;
}

.wp-site-blocks {
	overflow: visible !important;
}

@media screen and (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}
}

/* Sticky Navigation Header with Blurred Backdrop */
header,
.site-header,
header.wp-block-template-part,
.wp-block-template-part-header {
	position: -webkit-sticky !important;
	position: sticky !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 99990 !important;
	background: rgba(0, 0, 0, 0.85) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	transition: background 0.3s ease, box-shadow 0.3s ease;
}


.wp-site-blocks {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Adjust Top Section Space under Sticky Header */
main> :first-child,
.wp-site-blocks>main> :first-child,
.wp-site-blocks> :nth-child(2) {
	margin-top: 1.5rem !important;
	padding-top: 1rem !important;
}

/* Remove Top Section Space on Single Product Pages for Full-Bleed Immersive Hero */
body.single-product main,
body.single-product .wp-site-blocks> :nth-child(2),
body.single-product .wp-site-blocks>main,
body.single-product main> :first-child,
body.single-product .blooopp-single-product-main,
body:has(.blooopp-single-product-main) main,
body:has(.blooopp-single-product-main) .wp-site-blocks> :nth-child(2),
body:has(.blooopp-single-product-main) .wp-site-blocks>main,
body:has(.blooopp-single-product-main) main> :first-child,
body:has(.blooopp-single-product-main) .blooopp-single-product-main {
	margin-top: 0 !important;
	padding-top: 0 !important;
	margin-block-start: 0 !important;
	padding-block-start: 0 !important;
}

body.single-product .blooopp-new-product-hero,
body:has(.blooopp-single-product-main) .blooopp-new-product-hero {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
	padding: 12px 14px !important;
}

:root :where(.is-layout-constrained)> :first-child {
	margin-block-start: var(--wp--preset--spacing--30, 1rem) !important;
}

:where(.is-layout-flex) {
	gap: var(--wp--style--block-gap, 1.25rem);
}

:where(.is-layout-grid) {
	gap: var(--wp--style--block-gap, 1.25rem);
}

/* Custom Font Face Declarations */
@font-face {
	font-family: 'Blacky';
	src: url('assets/fonts/blacky-modern-headline-food-font/Blacky.woff2') format('woff2'),
		url('assets/fonts/blacky-modern-headline-food-font/Blacky.woff') format('woff'),
		url('assets/fonts/blacky-modern-headline-food-font/Blacky.ttf') format('truetype');
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Blacky Modern Headline Food Font';
	src: url('assets/fonts/blacky-modern-headline-food-font/Blacky.woff2') format('woff2'),
		url('assets/fonts/blacky-modern-headline-food-font/Blacky.woff') format('woff'),
		url('assets/fonts/blacky-modern-headline-food-font/Blacky.ttf') format('truetype');
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Dirty Weather';
	src: url('assets/fonts/blacky-modern-headline-food-font/Blacky.woff2') format('woff2'),
		url('assets/fonts/blacky-modern-headline-food-font/Blacky.woff') format('woff'),
		url('assets/fonts/blacky-modern-headline-food-font/Blacky.ttf') format('truetype');
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}

:root {
	--wp--preset--font-family--blacky-modern-headline-food-font: 'Blacky', 'Blacky Modern Headline Food Font', display, cursive, sans-serif;
	--wp--preset--font-family--dirty-weather-bubble-display: var(--wp--preset--font-family--blacky-modern-headline-food-font);
}

@font-face {
	font-family: 'Sequel Sans';
	src: url('assets/fonts/sequel-sans-ttf/Sequel Sans Roman Body.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Sequel Sans';
	src: url('assets/fonts/sequel-sans-ttf/Sequel Sans Medium Body.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Sequel Sans';
	src: url('assets/fonts/sequel-sans-ttf/Sequel Sans Semi Bold Body.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Sequel Sans';
	src: url('assets/fonts/sequel-sans-ttf/Sequel Sans Bold Body.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Sequel Sans';
	src: url('assets/fonts/sequel-sans-ttf/Sequel Sans Black Body.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

/* Base Typography Element Overrides */
h1 {
	font-family: 'Blacky', 'Blacky Modern Headline Food Font', var(--wp--preset--font-family--blacky-modern-headline-food-font), display, cursive !important;
	font-size: clamp(3rem, 7vw, 5.5rem);
	line-height: 1.1;
	letter-spacing: 0.02em;
}

h2 {
	font-family: 'Blacky', 'Blacky Modern Headline Food Font', var(--wp--preset--font-family--blacky-modern-headline-food-font), display, cursive !important;
	font-size: clamp(2.25rem, 5vw, 4rem);
	line-height: 1.15;
	letter-spacing: 0.02em;
}

h3 {
	font-family: 'Blacky', 'Blacky Modern Headline Food Font', var(--wp--preset--font-family--blacky-modern-headline-food-font), display, cursive !important;
	font-size: clamp(1.75rem, 3.5vw, 2.75rem);
	line-height: 1.2;
	letter-spacing: 0.01em;
}

h4 {
	font-family: 'Blacky', 'Blacky Modern Headline Food Font', var(--wp--preset--font-family--blacky-modern-headline-food-font), display, cursive !important;
	font-size: clamp(1.35rem, 2.5vw, 2rem);
	line-height: 1.25;
}

h5 {
	font-family: 'Blacky', 'Blacky Modern Headline Food Font', var(--wp--preset--font-family--blacky-modern-headline-food-font), display, cursive !important;
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	line-height: 1.3;
}

h6 {
	font-family: 'Blacky', 'Blacky Modern Headline Food Font', var(--wp--preset--font-family--blacky-modern-headline-food-font), display, cursive !important;
	font-size: 1.1rem;
	line-height: 1.4;
}

p,
body,
.wp-block-paragraph {
	font-family: 'Sequel Sans', var(--wp--preset--font-family--sequel-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
}



.blooopp-curved-text {
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease;
	will-change: transform;
}

/* Hero Title Specialty Styles (Matching "THE HYDRATION THAT MAKES OTHER DRINKS JEALOUS") */
/* Outlined Text Style */
.is-style-blooopp-outline,
.text-outline,
span.outline-text {
	color: transparent !important;
	-webkit-text-stroke: 5px #ffffff;
	-webkit-text-fill-color: transparent !important;
	letter-spacing: 0.05em;
}

/* 3D Glossy Bubble Text Style (Matching "JEALOUS" Inflated Sticker Design) */
.is-style-blooopp-3d,
.text-3d,
.text-jealous,
span.jealous-text,
.editor-styles-wrapper .is-style-blooopp-3d,
h1.is-style-blooopp-3d,
h2.is-style-blooopp-3d,
h3.is-style-blooopp-3d,
h4.is-style-blooopp-3d,
p.is-style-blooopp-3d {
	background: radial-gradient(ellipse at 40% 35%, #ffffff 0%, #ffffff 55%, #dbdbdb 80%, #b0b0b0 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
	filter: drop-shadow(2px 0px 0px #000000) drop-shadow(1px 0px 0px #000000) drop-shadow(0px 1px 0px #000000) drop-shadow(3px 3px 0px #000000) drop-shadow(7px 6px 0px #000000) drop-shadow(2px -1px 0px #ffffff) drop-shadow(1px 2px 0px #ffffff) !important;
	letter-spacing: 0.09em !important;
}

/* When split into words/chars, apply gradient & clip at character level without repeating filter drop-shadow */
.is-style-blooopp-3d .blooopp-word,
.is-style-blooopp-3d .blooopp-char,
.text-3d .blooopp-word,
.text-3d .blooopp-char {
	background: radial-gradient(ellipse at 40% 35%, #ffffff 0%, #ffffff 55%, #dbdbdb 80%, #b0b0b0 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
	filter: none !important;
}




/* Thick White Outline Text Style (Matching "01" outline design) */
.is-style-blooopp-thick-outline,
.text-thick-outline,
.thick-outline-text,
.editor-styles-wrapper .is-style-blooopp-thick-outline,
h1.is-style-blooopp-thick-outline,
h2.is-style-blooopp-thick-outline,
h3.is-style-blooopp-thick-outline,
h4.is-style-blooopp-thick-outline,
p.is-style-blooopp-thick-outline {
	color: transparent !important;
	-webkit-text-stroke: 15px #ffffff !important;
	-webkit-text-fill-color: transparent !important;
	letter-spacing: 0.04em !important;
	paint-order: stroke fill !important;
}

/* Static Heading & Word Styling (Drop Animations Removed) */
.blooopp-heading-split {
	opacity: 1;
}

.blooopp-word {
	display: inline-block;
	white-space: normal;
	vertical-align: baseline;
	color: inherit;
	-webkit-text-stroke: inherit;
	-webkit-text-fill-color: inherit;
}

.blooopp-space {
	display: inline-block;
	white-space: pre;
}

.blooopp-char {
	display: inline;
	opacity: 1 !important;
	color: inherit;
	-webkit-text-stroke: inherit;
	-webkit-text-fill-color: inherit;
	transform: none !important;
	transition: none !important;
	animation: none !important;
}

/* ==========================================================================
   Mobile Responsive Adjustments (< 768px)
   ========================================================================== */
@media (max-width: 768px) {

	/* Scale down ultra thick white outlines on small screens */
	.is-style-blooopp-thick-outline,
	.text-thick-outline,
	.thick-outline-text,
	.editor-styles-wrapper .is-style-blooopp-thick-outline,
	h1.is-style-blooopp-thick-outline,
	h2.is-style-blooopp-thick-outline,
	h3.is-style-blooopp-thick-outline,
	h4.is-style-blooopp-thick-outline,
	p.is-style-blooopp-thick-outline {
		-webkit-text-stroke: 6px #ffffff !important;
	}

	/* Scale giant headings on mobile devices to prevent horizontal overflow */
	h1,
	h2,
	h3,
	.wp-block-heading {
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
	}

	/* Allow word wrapping on split kinetic headings */
	.blooopp-word {
		display: inline !important;
	}
}

@media (max-width: 480px) {

	.is-style-blooopp-thick-outline,
	.text-thick-outline,
	.thick-outline-text,
	.editor-styles-wrapper .is-style-blooopp-thick-outline,
	h1.is-style-blooopp-thick-outline,
	h2.is-style-blooopp-thick-outline,
	h3.is-style-blooopp-thick-outline,
	h4.is-style-blooopp-thick-outline,
	p.is-style-blooopp-thick-outline {
		-webkit-text-stroke: 4px #ffffff !important;
	}
}

/* Flying Animation Clone Style */
.blooopp-flying-product-img {
	box-shadow: none !important;
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.25)) !important;
	border: none !important;
	background: transparent !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain !important;
}

h2.wc-block-mini-cart__title span:first-child {
	margin-right: 0px !important;
}

@import url('assets/css/woocommerce.css');

/* Optimized GPU-Accelerated Reveal Animations */
@keyframes reveal-from-left {
	0% {
		opacity: 0;
		transform: translate3d(-120px, 0, 0);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes reveal-from-right {
	0% {
		opacity: 0;
		transform: translate3d(120px, 0, 0);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* Mobile Screen Optimization: Tight distance avoids layout thrashing and stutter */
@media (max-width: 768px) {
	@keyframes reveal-from-left {
		0% {
			opacity: 0;
			transform: translate3d(-40px, 0, 0);
		}

		100% {
			opacity: 1;
			transform: translate3d(0, 0, 0);
		}
	}

	@keyframes reveal-from-right {
		0% {
			opacity: 0;
			transform: translate3d(40px, 0, 0);
		}

		100% {
			opacity: 1;
			transform: translate3d(0, 0, 0);
		}
	}
}

/* Force hardware GPU acceleration and eliminate reflows on mobile */
[class*="reveal-from-left"],
[class*="reveal-from-right"] {
	will-change: transform, opacity;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform-style: preserve-3d;
}

/* Global Floating Keyframes & Classes (Available across all pages & editor) */
@keyframes bloooppFloat {
	0% {
		transform: translateY(0px) rotate(0deg);
	}

	50% {
		transform: translateY(-15px) rotate(3deg);
	}

	100% {
		transform: translateY(0px) rotate(0deg);
	}
}

@keyframes bloooppFloatReverse {
	0% {
		transform: translateY(0px) rotate(0deg);
	}

	50% {
		transform: translateY(15px) rotate(-3deg);
	}

	100% {
		transform: translateY(0px) rotate(0deg);
	}
}

/* Direct & Fallback support for Tailwind arbitrary float animation classes */
[class*="bloooppFloat_4s"] {
	animation: bloooppFloat 4s ease-in-out infinite alternate !important;
}

[class*="bloooppFloat_5s"] {
	animation: bloooppFloat 5s ease-in-out infinite alternate !important;
}

[class*="bloooppFloat_6s"] {
	animation: bloooppFloat 6s ease-in-out infinite alternate-reverse !important;
}

[class*="animate-\[bloooppFloat"] {
	animation: bloooppFloat 4s ease-in-out infinite alternate;
}

/* ==========================================================================
   Gutenberg Grid Utility & Equal-Height Card Support
   Fixes WordPress is-layout-flow injecting margin-block-start on grid children
   ========================================================================== */
.grid,
.wp-block-group.grid {
	display: grid !important;
	align-items: stretch !important;
}

.grid-cols-1 {
	grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

@media (min-width: 640px) {
	.sm\:grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.sm\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	.sm\:grid-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 768px) {
	.md\:grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.md\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	.md\:grid-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 1024px) {
	.lg\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	.lg\:grid-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

.gap-2 {
	gap: 0.5rem !important;
}

.gap-3 {
	gap: 0.75rem !important;
}

.gap-4 {
	gap: 1rem !important;
}

.gap-6 {
	gap: 1.5rem !important;
}

.gap-8 {
	gap: 2rem !important;
}

.w-full {
	width: 100% !important;
}

.h-full {
	height: 100% !important;
}

/* Cancel Gutenberg layout flow top margin on grid items & force equal height stretch */
.grid.is-layout-flow>*,
.grid.wp-block-group-is-layout-flow>*,
.wp-block-group.grid>*,
:where(.grid)>*,
:where(.grid.is-layout-flow)>* {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	height: 100% !important;
	align-self: stretch !important;
	box-sizing: border-box !important;
}

.grid>.wp-block-group {
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	height: 100% !important;
}


/* ==========================================================================
   Mini-Cart Header Icon & Number Badge (Compact, Elegant & Responsive)
   ========================================================================== */
.wc-block-mini-cart__button,
.main-sticky-header .wc-block-mini-cart__button {
	padding: 0 !important;
	position: relative !important;
	overflow: visible !important;
}

.wc-block-mini-cart__quantity-badge,
.main-sticky-header .wc-block-mini-cart__quantity-badge,
body.single-product .main-sticky-header .wc-block-mini-cart__quantity-badge,
body:has(.blooopp-single-product-main) .main-sticky-header .wc-block-mini-cart__quantity-badge {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 0 !important;
	overflow: visible !important;
}

.wc-block-mini-cart__badge,
.wc-block-mini-cart .wc-block-mini-cart__badge,
.wp-block-woocommerce-mini-cart .wc-block-mini-cart__badge,
.main-sticky-header .wc-block-mini-cart__badge,
.main-top-header .wc-block-mini-cart__badge,
header .wc-block-mini-cart__badge,
.site-header .wc-block-mini-cart__badge,
body.single-product .main-sticky-header .wc-block-mini-cart__badge,
body:has(.blooopp-single-product-main) .main-sticky-header .wc-block-mini-cart__badge {
	position: absolute !important;
	top: -5px !important;
	right: -7px !important;
	left: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	width: max-content !important;
	min-width: 18px !important;
	max-width: 28px !important;
	height: 18px !important;
	padding: 0 4px !important;
	border-radius: 9999px !important;
	background-color: #ffffff !important;
	color: #000000 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	line-height: 18px !important;
	letter-spacing: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	box-sizing: border-box !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45) !important;
	pointer-events: none !important;
	z-index: 10 !important;
	transform: none !important;
}

.wc-block-mini-cart__badge[hidden],
.wc-block-mini-cart .wc-block-mini-cart__badge[hidden],
.wp-block-woocommerce-mini-cart .wc-block-mini-cart__badge[hidden],
.main-sticky-header .wc-block-mini-cart__badge[hidden],
.main-top-header .wc-block-mini-cart__badge[hidden],
header .wc-block-mini-cart__badge[hidden],
.site-header .wc-block-mini-cart__badge[hidden] {
	display: none !important;
}

/* ==========================================================================
   Single Product Page: Immersive Hero Header (Matches Reference Design)
   ========================================================================== */
body.single-product .main-top-header,
body:has(.blooopp-single-product-main) .main-top-header {
	display: none !important;
	opacity: 0 !important;
	max-height: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

/* Default / Unscrolled State: Transparent Overlay Header Flush at Top */
body.single-product header.site-header,
body.single-product .site-header,
body:has(.blooopp-single-product-main) header.site-header,
body:has(.blooopp-single-product-main) .site-header {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	box-shadow: none !important;
	border: none !important;
	z-index: 99990 !important;
	pointer-events: none !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	transition: top 0.2s ease !important;
}

/* Adjust for logged in WordPress Admin Bar */
body.admin-bar.single-product header.site-header,
body.admin-bar.single-product .site-header,
body.admin-bar:has(.blooopp-single-product-main) header.site-header,
body.admin-bar:has(.blooopp-single-product-main) .site-header {
	top: 32px !important;
}

@media screen and (max-width: 782px) {

	body.admin-bar.single-product header.site-header,
	body.admin-bar.single-product .site-header,
	body.admin-bar:has(.blooopp-single-product-main) header.site-header,
	body.admin-bar:has(.blooopp-single-product-main) .site-header {
		top: 46px !important;
	}
}

body.single-product .main-sticky-header,
body:has(.blooopp-single-product-main) .main-sticky-header {
	opacity: 1 !important;
	transform: none !important;
	max-height: none !important;
	overflow: visible !important;
	padding: 0 !important;
	background: transparent !important;
	pointer-events: none !important;
	width: 100% !important;
	box-sizing: border-box !important;
	display: block !important;
}

body.single-product .main-sticky-header>.wp-block-group,
body:has(.blooopp-single-product-main) .main-sticky-header>.wp-block-group {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	pointer-events: none !important;
}

/* 1. Header Logo Placed Directly Inside Curved Notch on Damask Background (Top-Left) */
body.single-product .main-sticky-header .wp-block-image,
body:has(.blooopp-single-product-main) .main-sticky-header .wp-block-image {
	margin: 12px 0 0 14px !important;
	padding: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	pointer-events: auto !important;
	z-index: 30 !important;
	width: 100px !important;
	height: 100px !important;
	max-width: none !important;
	flex: 0 0 auto !important;
	transition: transform 0.2s ease !important;
}

body.single-product .main-sticky-header .wp-block-image:hover,
body:has(.blooopp-single-product-main) .main-sticky-header .wp-block-image:hover {
	transform: scale(1.04);
}

body.single-product .main-sticky-header .wp-block-image a,
body:has(.blooopp-single-product-main) .main-sticky-header .wp-block-image a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

body.single-product .main-sticky-header .wp-block-image img,
body:has(.blooopp-single-product-main) .main-sticky-header .wp-block-image img {
	width: 72px !important;
	height: auto !important;
	display: block !important;
}

@media screen and (max-width: 768px) {
	body.single-product .main-sticky-header .wp-block-image,
	body:has(.blooopp-single-product-main) .main-sticky-header .wp-block-image {
		margin: 10px 0 0 10px !important;
		width: 84px !important;
		height: 84px !important;
	}

	body.single-product .main-sticky-header .wp-block-image img,
	body:has(.blooopp-single-product-main) .main-sticky-header .wp-block-image img {
		width: 58px !important;
	}
}

/* 2. Right Actions Container: Cart & Menu (Top-Right) */
body.single-product .main-sticky-header .wp-block-group>.wp-block-group:last-child,
body:has(.blooopp-single-product-main) .main-sticky-header .wp-block-group>.wp-block-group:last-child {
	display: inline-flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 16px 24px 0 0 !important;
	padding: 0 !important;
	pointer-events: auto !important;
	opacity: 1 !important;
	visibility: visible !important;
	flex: 0 0 auto !important;
}

/* Hide Redundant "Get Your Blooopp" CTA Button on Single Product Page */
body.single-product .main-sticky-header .wp-block-buttons,
body:has(.blooopp-single-product-main) .main-sticky-header .wp-block-buttons {
	display: none !important;
}

/* Order: Cart First, Menu Second */
body.single-product .main-sticky-header .wc-block-mini-cart,
body:has(.blooopp-single-product-main) .main-sticky-header .wc-block-mini-cart {
	order: 1 !important;
	display: inline-flex !important;
	margin: 0 !important;
}

body.single-product .main-sticky-header .wp-block-navigation,
body:has(.blooopp-single-product-main) .main-sticky-header .wp-block-navigation {
	order: 2 !important;
	display: inline-flex !important;
	margin: 0 !important;
}

/* Cart Button Styled as Rounded Outline Square */
.main-sticky-header .wc-block-mini-cart__button,
.main-top-header .wc-block-mini-cart__button,
header .wc-block-mini-cart__button,
.site-header .wc-block-mini-cart__button,
body.single-product .main-sticky-header .wc-block-mini-cart__button,
body:has(.blooopp-single-product-main) .main-sticky-header .wc-block-mini-cart__button {
	position: relative !important;
	overflow: visible !important;
	width: 50px !important;
	height: 50px !important;
	border-radius: 12px !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	background: #000000 !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	color: #ffffff !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
}

.main-sticky-header .wc-block-mini-cart__button:hover,
.main-top-header .wc-block-mini-cart__button:hover,
header .wc-block-mini-cart__button:hover,
.site-header .wc-block-mini-cart__button:hover,
body.single-product .main-sticky-header .wc-block-mini-cart__button:hover,
body:has(.blooopp-single-product-main) .main-sticky-header .wc-block-mini-cart__button:hover {
	background: rgba(255, 255, 255, 0.15) !important;
	border-color: rgba(255, 255, 255, 0.45) !important;
	transform: scale(1.04);
}

.main-sticky-header .wc-block-mini-cart__quantity-badge,
.main-top-header .wc-block-mini-cart__quantity-badge,
header .wc-block-mini-cart__quantity-badge,
.site-header .wc-block-mini-cart__quantity-badge,
body.single-product .main-sticky-header .wc-block-mini-cart__quantity-badge,
body:has(.blooopp-single-product-main) .main-sticky-header .wc-block-mini-cart__quantity-badge {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 0 !important;
	overflow: visible !important;
}

.main-sticky-header .wc-block-mini-cart__button svg,
.main-top-header .wc-block-mini-cart__button svg,
header .wc-block-mini-cart__button svg,
.site-header .wc-block-mini-cart__button svg,
body.single-product .main-sticky-header .wc-block-mini-cart__button svg,
body:has(.blooopp-single-product-main) .main-sticky-header .wc-block-mini-cart__button svg {
	width: 40px !important;
	height: 40px !important;
	fill: #ffffff !important;
	stroke: none !important;
	display: block !important;
	margin: 0 !important;
}

/* Menu Hamburger Button Styled as Rounded Outline Square */
.main-sticky-header .wp-block-navigation__responsive-container-open,
.main-sticky-header button.wp-block-navigation__responsive-container-open,
.main-top-header .wp-block-navigation__responsive-container-open,
.main-top-header button.wp-block-navigation__responsive-container-open,
header .wp-block-navigation__responsive-container-open,
header button.wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-open,
.site-header button.wp-block-navigation__responsive-container-open,
body.single-product .main-sticky-header .wp-block-navigation__responsive-container-open,
body.single-product .main-sticky-header button.wp-block-navigation__responsive-container-open,
body:has(.blooopp-single-product-main) .main-sticky-header .wp-block-navigation__responsive-container-open,
body:has(.blooopp-single-product-main) .main-sticky-header button.wp-block-navigation__responsive-container-open {
	width: 50px !important;
	height: 50px !important;
	border-radius: 12px !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	background: #000000 !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	color: #ffffff !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
}

.main-sticky-header .wp-block-navigation__responsive-container-open:hover,
.main-sticky-header button.wp-block-navigation__responsive-container-open:hover,
.main-top-header .wp-block-navigation__responsive-container-open:hover,
.main-top-header button.wp-block-navigation__responsive-container-open:hover,
header .wp-block-navigation__responsive-container-open:hover,
header button.wp-block-navigation__responsive-container-open:hover,
.site-header .wp-block-navigation__responsive-container-open:hover,
.site-header button.wp-block-navigation__responsive-container-open:hover,
body.single-product .main-sticky-header .wp-block-navigation__responsive-container-open:hover,
body.single-product .main-sticky-header button.wp-block-navigation__responsive-container-open:hover,
body:has(.blooopp-single-product-main) .main-sticky-header .wp-block-navigation__responsive-container-open:hover,
body:has(.blooopp-single-product-main) .main-sticky-header button.wp-block-navigation__responsive-container-open:hover {
	background: rgba(255, 255, 255, 0.15) !important;
	border-color: rgba(255, 255, 255, 0.45) !important;
	transform: scale(1.04);
}

.main-sticky-header .wp-block-navigation__responsive-container-open svg,
.main-sticky-header button.wp-block-navigation__responsive-container-open svg,
.main-top-header .wp-block-navigation__responsive-container-open svg,
.main-top-header button.wp-block-navigation__responsive-container-open svg,
header .wp-block-navigation__responsive-container-open svg,
header button.wp-block-navigation__responsive-container-open svg,
.site-header .wp-block-navigation__responsive-container-open svg,
.site-header button.wp-block-navigation__responsive-container-open svg,
body.single-product .main-sticky-header .wp-block-navigation__responsive-container-open svg,
body.single-product .main-sticky-header button.wp-block-navigation__responsive-container-open svg,
body:has(.blooopp-single-product-main) .main-sticky-header .wp-block-navigation__responsive-container-open svg,
body:has(.blooopp-single-product-main) .main-sticky-header button.wp-block-navigation__responsive-container-open svg {
	width: 40px !important;
	height: 40px !important;
	fill: #ffffff !important;
	stroke: none !important;
	display: block !important;
	margin: 0 !important;
}

@media screen and (max-width: 768px) {

	body.single-product .main-sticky-header .wp-block-image,
	body:has(.blooopp-single-product-main) .main-sticky-header .wp-block-image {
		padding: 8px 14px 10px 14px !important;
		border-bottom-right-radius: 20px !important;
	}

	body.single-product .main-sticky-header .wp-block-image img,
	body:has(.blooopp-single-product-main) .main-sticky-header .wp-block-image img {
		width: 52px !important;
	}

	body.single-product .main-sticky-header .wp-block-group>.wp-block-group:last-child,
	body:has(.blooopp-single-product-main) .main-sticky-header .wp-block-group>.wp-block-group:last-child {
		margin: 12px 16px 0 0 !important;
		gap: 8px !important;
	}

	.main-sticky-header .wc-block-mini-cart__button,
	.main-top-header .wc-block-mini-cart__button,
	header .wc-block-mini-cart__button,
	.site-header .wc-block-mini-cart__button,
	body.single-product .main-sticky-header .wc-block-mini-cart__button,
	body:has(.blooopp-single-product-main) .main-sticky-header .wc-block-mini-cart__button,
	.main-sticky-header .wp-block-navigation__responsive-container-open,
	.main-sticky-header button.wp-block-navigation__responsive-container-open,
	.main-top-header .wp-block-navigation__responsive-container-open,
	.main-top-header button.wp-block-navigation__responsive-container-open,
	header .wp-block-navigation__responsive-container-open,
	header button.wp-block-navigation__responsive-container-open,
	.site-header .wp-block-navigation__responsive-container-open,
	.site-header button.wp-block-navigation__responsive-container-open,
	body.single-product .main-sticky-header .wp-block-navigation__responsive-container-open,
	body.single-product .main-sticky-header button.wp-block-navigation__responsive-container-open,
	body:has(.blooopp-single-product-main) .main-sticky-header .wp-block-navigation__responsive-container-open,
	body:has(.blooopp-single-product-main) .main-sticky-header button.wp-block-navigation__responsive-container-open {
		width: 42px !important;
		height: 42px !important;
		border-radius: 10px !important;
	}

	.main-sticky-header .wc-block-mini-cart__button svg,
	.main-top-header .wc-block-mini-cart__button svg,
	header .wc-block-mini-cart__button svg,
	.site-header .wc-block-mini-cart__button svg,
	body.single-product .main-sticky-header .wc-block-mini-cart__button svg,
	body:has(.blooopp-single-product-main) .main-sticky-header .wc-block-mini-cart__button svg,
	.main-sticky-header .wp-block-navigation__responsive-container-open svg,
	.main-sticky-header button.wp-block-navigation__responsive-container-open svg,
	.main-top-header .wp-block-navigation__responsive-container-open svg,
	.main-top-header button.wp-block-navigation__responsive-container-open svg,
	header .wp-block-navigation__responsive-container-open svg,
	header button.wp-block-navigation__responsive-container-open svg,
	.site-header .wp-block-navigation__responsive-container-open svg,
	.site-header button.wp-block-navigation__responsive-container-open svg,
	body.single-product .main-sticky-header .wp-block-navigation__responsive-container-open svg,
	body.single-product .main-sticky-header button.wp-block-navigation__responsive-container-open svg,
	body:has(.blooopp-single-product-main) .main-sticky-header .wp-block-navigation__responsive-container-open svg,
	body:has(.blooopp-single-product-main) .main-sticky-header button.wp-block-navigation__responsive-container-open svg {
		width: 20px !important;
		height: 20px !important;
	}
}

/* Parent section clipping to protect following sections */
.wp-block-group:has(.blooopp-accordion-card-stack) {
	overflow: clip !important;
}

/* ==========================================================================
   Sticky Canvas for Section Floating Elements (.wp-block-image.absolute)
   Bucks Sauce Exact Composition & Placement Matching
   ========================================================================== */
.blooopp-sticky-fruit-canvas {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	max-width: none;
	height: 100vh;
	height: 100dvh;
	pointer-events: none;
	z-index: 2;
	margin-bottom: -100vh;
	margin-bottom: -100dvh;
	overflow: visible;
	will-change: transform, opacity;
	transition: opacity 0.15s ease-out;
}

.blooopp-sticky-fruit-canvas .wp-block-image.absolute,
.blooopp-sticky-fruit-canvas figure.absolute {
	position: absolute !important;
	pointer-events: auto;
	margin: 0 !important;
	transform-origin: center center;
	transition: filter 0.3s ease, transform 0.3s ease;
}

.blooopp-sticky-fruit-canvas figure img {
	width: 100%;
	height: auto;
	display: block;
}

/* --------------------------------------------------------------------------
   1. Left Top Accent (Guava Slice - Matches Cherries in Reference)
   Sharp, crisp in focal plane, floating elegantly near top-left
   -------------------------------------------------------------------------- */
.blooopp-sticky-fruit-canvas .blooopp-fruit-guava-slice,
.blooopp-sticky-fruit-canvas figure:has(img[src*="Guava"]):has(img[src*="Half"]),
.blooopp-sticky-fruit-canvas figure:has(img[src*="Half-Cut-Guava"]) {
	top: clamp(40px, 8vh, 100px) !important;
	left: clamp(20px, 7vw, 130px) !important;
	right: auto !important;
	bottom: auto !important;
	width: clamp(95px, 8.5vw, 145px) !important;
	filter: blur(0px) drop-shadow(0 15px 25px rgba(0, 0, 0, 0.35));
	z-index: 3;
	transform: rotate(-12deg);
}

.blooopp-sticky-fruit-canvas .blooopp-fruit-guava-slice img {
	animation: bloooppFloat 4.2s ease-in-out infinite alternate 0.2s;
}

/* --------------------------------------------------------------------------
   2. Left Mid Hero (Whole Guava - Matches Tomato in Reference)
   Sharp hero element, rich volume and natural tilt
   -------------------------------------------------------------------------- */
.blooopp-sticky-fruit-canvas .blooopp-fruit-guava-whole,
.blooopp-sticky-fruit-canvas figure:has(img[src*="Whole-guava"]) {
	top: clamp(260px, 42vh, 440px) !important;
	left: clamp(25px, 33.5vw, 300px) !important;
	right: auto !important;
	bottom: auto !important;
	width: clamp(140px, 12.5vw, 215px) !important;
	filter: blur(0px) drop-shadow(0 20px 35px rgba(0, 0, 0, 0.4));
	z-index: 3;
	transform: rotate(6deg);
}

.blooopp-sticky-fruit-canvas .blooopp-fruit-guava-whole img {
	animation: bloooppFloatReverse 4.8s ease-in-out infinite alternate 0.6s;
}

/* --------------------------------------------------------------------------
   3. Left Bottom Near / Foreground (Lemon - Matches Onion in Reference)
   Depth of field: Large, close to lens, realistic camera bokeh blur, bleeding off left edge
   -------------------------------------------------------------------------- */
.blooopp-sticky-fruit-canvas .blooopp-fruit-lemon,
.blooopp-sticky-fruit-canvas figure:has(img[src*="lemon"]),
.blooopp-sticky-fruit-canvas .blooopp-fruit-depth-near {
	top: clamp(480px, 68vh, 740px) !important;
	left: clamp(-30px, 0.5vw, 30px) !important;
	right: auto !important;
	bottom: auto !important;
	width: clamp(160px, 14.5vw, 240px) !important;
	filter: blur(7px) drop-shadow(0 25px 45px rgba(0, 0, 0, 0.5)) !important;
	opacity: 0.94;
	z-index: 4;
	transform: rotate(-10deg) scale(1.08);
}

.blooopp-sticky-fruit-canvas .blooopp-fruit-lemon img,
.blooopp-sticky-fruit-canvas .blooopp-fruit-depth-near img {
	animation: bloooppFloat 5.6s ease-in-out infinite alternate 1.1s;
}

/* --------------------------------------------------------------------------
   4. Right Top Hero (Peach Top - Matches Habanero in Reference)
   Sharp hero high up in upper right, warm and eye-catching
   -------------------------------------------------------------------------- */
.blooopp-sticky-fruit-canvas .blooopp-fruit-peach-top,
.blooopp-sticky-fruit-canvas figure.blooopp-fruit-peach:first-of-type,
.blooopp-sticky-fruit-canvas figure:has(img[src*="Peach"]):first-of-type,
.blooopp-sticky-fruit-canvas figure:has(img[src*="peach"]):first-of-type {
	top: clamp(20px, 5vh, 70px) !important;
	right: clamp(25px, 33.5vw, 300px) !important;
	left: auto !important;
	bottom: auto !important;
	width: clamp(135px, 11.5vw, 195px) !important;
	filter: blur(0px) drop-shadow(0 15px 30px rgba(0, 0, 0, 0.35));
	z-index: 3;
	transform: rotate(14deg);
}

.blooopp-sticky-fruit-canvas .blooopp-fruit-peach-top img,
.blooopp-sticky-fruit-canvas figure.blooopp-fruit-peach:first-of-type img {
	animation: bloooppFloat 4.4s ease-in-out infinite alternate 0.3s;
}

/* --------------------------------------------------------------------------
   5. Right Mid Far / Background (Lychee - Matches Garlic in Reference)
   Depth of field: Smaller, deeper in background, subtle soft bokeh blur
   -------------------------------------------------------------------------- */
.blooopp-sticky-fruit-canvas .blooopp-fruit-lychee,
.blooopp-sticky-fruit-canvas figure:has(img[src*="e2"]),
.blooopp-sticky-fruit-canvas figure:has(img[src*="lychee"]),
.blooopp-sticky-fruit-canvas .blooopp-fruit-depth-far {
	top: clamp(180px, 26vh, 290px) !important;
	right: clamp(12px, 4.5vw, 85px) !important;
	left: auto !important;
	bottom: auto !important;
	width: clamp(85px, 7vw, 125px) !important;
	filter: blur(5.5px) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.25)) !important;
	opacity: 0.85;
	z-index: 1;
	transform: rotate(-16deg) scale(0.92);
}

.blooopp-sticky-fruit-canvas .blooopp-fruit-lychee img,
.blooopp-sticky-fruit-canvas .blooopp-fruit-depth-far img {
	animation: bloooppFloatReverse 5.2s ease-in-out infinite alternate 0.8s;
}

/* --------------------------------------------------------------------------
   6. Right Bottom Hero (Peach Bottom - Matches Peach in Reference)
   Sharp hero anchor at lower right, large and appetizing
   -------------------------------------------------------------------------- */
.blooopp-sticky-fruit-canvas .blooopp-fruit-peach-bottom,
.blooopp-sticky-fruit-canvas figure.blooopp-fruit-peach:last-of-type,
.blooopp-sticky-fruit-canvas figure:has(img[src*="Peach"]):last-of-type,
.blooopp-sticky-fruit-canvas figure:has(img[src*="peach"]):last-of-type {
	top: clamp(380px, 54vh, 580px) !important;
	right: clamp(25px, 8vw, 150px) !important;
	left: auto !important;
	bottom: auto !important;
	width: clamp(150px, 13vw, 225px) !important;
	filter: blur(0px) drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
	z-index: 3;
	transform: rotate(-6deg);
}

.blooopp-sticky-fruit-canvas .blooopp-fruit-peach-bottom img,
.blooopp-sticky-fruit-canvas figure.blooopp-fruit-peach:last-of-type img {
	animation: bloooppFloat 4.7s ease-in-out infinite alternate 1.3s;
}

@media (max-width: 781px) {
	.blooopp-sticky-fruit-canvas .wp-block-hidden-mobile {
		display: none !important;
	}

	.blooopp-sticky-fruit-canvas .blooopp-fruit-lemon,
	.blooopp-sticky-fruit-canvas .blooopp-fruit-depth-near {
		filter: blur(4.5px) drop-shadow(0 15px 30px rgba(0, 0, 0, 0.4)) !important;
		width: clamp(110px, 20vw, 160px) !important;
	}

	.blooopp-sticky-fruit-canvas .blooopp-fruit-lychee,
	.blooopp-sticky-fruit-canvas .blooopp-fruit-depth-far {
		filter: blur(3.5px) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.2)) !important;
		width: clamp(65px, 13vw, 95px) !important;
	}
}