/* 1. Kill the WordPress.com Masterbar/Action Bar on ALL devices */
#wpadminbar,
.wpcom-masterbar,
.wpcom-action-bar,
#wpcom-mobile-actionbar,
.wpcom-mobile-actionbar {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
	min-height: 0 !important;
	position: absolute !important;
	top: -9999px !important;
	pointer-events: none !important;
}

/* 2. Fix the 'White Gap' left behind at the top/bottom */
html, body {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* 3. THE CREAM SHADOW - The 'Clip' Method */
/* This forces the button to ONLY show what is inside its own turquoise borders */
.wp-block-jetpack-newsletter .wp-block-button {
	overflow: hidden !important;
	background: transparent !important;
	border: none !important;
}

.wp-block-jetpack-newsletter .wp-block-button__link {
	background-color: #4099a5 !important;
	box-shadow: none !important;
	filter: none !important;
	background-image: none !important;
}

/* 1. Kill the Jetpack/WordPress floating subscribe bar */
#jetpack-subscribe-bar, 
.jetpack-subscribe-bar,
#wpadminbar, 
.newsletter-floating-bar {
	display: none !important;
}

/* 2. THE TOTAL VAPORIZER for the cream background box */
/* This targets the button, the link, and any "after" effects at once */
.wp-block-jetpack-newsletter .wp-block-button,
.wp-block-jetpack-newsletter .wp-block-button__link,
.wp-block-jetpack-newsletter .wp-block-button__link::after,
.wp-block-jetpack-newsletter .wp-block-button__link::before {
	background-image: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: none !important;
	filter: none !important;
	mask-image: none !important;
	-webkit-mask-image: none !important;
}

/* 3. Re-apply your clean turquoise button style */
.wp-block-jetpack-newsletter .wp-block-button__link {
	background-color: #4099a5 !important;
	color: #ffffff !important;
	border-radius: 10px !important;
	padding: 12px 24px !important;
}

/* 1. Hide the Hamburger on Desktop */
@media (min-width: 782px) {
	.hide-on-desktop {
		display: none !important;
	}
}

/* 2. Hide the Buttons on Mobile */
@media (max-width: 781px) {
	.hide-on-mobile {
		display: none !important;
	}
}

/* 3. Fix the Huge Icon */
.wp-block-navigation__responsive-container-open svg {
	width: 40px !important;
	height: 40px !important;
}

/* 1. Shrink the gap between links in the mobile menu */
.wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	margin-bottom: 10px !important;
	margin-top: 10px !important;
}

/* 2. Make the mobile font size a bit more reasonable */
.wp-block-navigation__responsive-container-content {
	font-size: 1.5rem !important;
}

/* 3. Remove extra space at the top of the menu */
.wp-block-navigation__responsive-container-content {
	padding-top: 40px !important;
}

/* --- Style the Mobile Subscribe Button --- */
.wp-block-navigation__responsive-container-content .mobile-subscribe-button .wp-block-button__link {
	background-color: #4099a5 !important;
/* Your Turquoise color - adjust hex if needed */
	color: #ffffff !important;
/* White text */
	border-radius: 8px !important;
/* Rounded corners */
	padding: 12px 24px !important;
/* Nice button shape */
	display: inline-block !important;
	border: none !important;
	font-weight: bold !important;
	text-decoration: none !important;
/* Remove underline */
}

/* --- Ensure the Email Input is neat --- */
.wp-block-navigation__responsive-container-content input[type="email"] {
	border: 1px solid #ccc !important;
	border-radius: 8px !important;
	padding: 10px !important;
	width: 100% !important;
	max-width: 300px !important;
	margin-bottom: 5px !important;
}

/* This kills the background color on the button container itself */
.wp-block-navigation__responsive-container-content .mobile-subscribe-button {
	background-color: transparent !important;
	background: none !important;
}

/* This does the same for the Get In Touch container just in case */
.wp-block-navigation__responsive-container-content .mobile-get-in-touch-button {
	background-color: transparent !important;
	background: none !important;
}

/* This targets the actual link container inside the footer navigation */
.wp-block-footer .wp-block-navigation .wp-block-navigation-item a {
	background-color: #4099a5 !important;
/* Solid Turquoise */
	background-image: none !important;
/* Kills the paint stroke/texture */
	border-radius: 25px !important;
/* Forces rounded corners */
	color: #ffffff !important;
/* White text */
	padding: 10px 25px !important;
/* Better button shape */
	text-decoration: none !important;
/* No underline */
	display: inline-block !important;
	border: none !important;
}

/* This removes the greyish/bluey gaps between the buttons */
.wp-block-footer .wp-block-navigation-item {
	background: transparent !important;
	background-image: none !important;
}

/* 1. Make both containers center-aligned and tidy */
.wp-block-footer .wp-block-search,
.wp-block-footer .wp-block-jetpack-newsletter {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	margin-bottom: 20px !important;
}

/* 2. Force the Search and Email boxes to be identical size */
.wp-block-footer .wp-block-search__input,
.wp-block-footer input[type="email"] {
	width: 350px !important;
/* Change this number to make them wider or narrower */
	height: 45px !important;
/* Matching height */
	border-radius: 10px 0 0 10px !important;
/* Rounds the left side only */
	border: 1px solid #ffffff !important;
	padding: 0 15px !important;
	margin: 0 !important;
	background-color: #ffffff !important;
}

/* 3. Force the Search and Subscribe buttons to be identical size */
.wp-block-footer .wp-block-search__button,
.wp-block-footer .wp-block-button__link {
	height: 45px !important;
/* Must match the input height */
	background-color: #4099a5 !important;
	color: #ffffff !important;
	border-radius: 0 10px 10px 0 !important;
/* Rounds the right side only */
	padding: 0 25px !important;
	border: none !important;
	margin: 0 !important;
/* Removes the gap between box and button */
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 14px !important;
	cursor: pointer !important;
}

/* 4. Remove the extra "Search" label text that floats above */
.wp-block-footer .wp-block-search__label {
	display: none !important;
}

/* 1. Removes the background color from the Newsletter button container */
.wp-block-jetpack-newsletter .wp-block-button {
	background-color: transparent !important;
	background: none !important;
	padding: 0 !important;
}

/* 2. Ensures the Search button doesn't have a ghost background either */
.wp-block-search .wp-block-search__button-inside {
	background-color: transparent !important;
	border: none !important;
}

/* 3. Force the Newsletter button itself to be solid turquoise with no shadow */
.wp-block-jetpack-newsletter .wp-block-button__link {
	box-shadow: none !important;
	border: none !important;
}

/* 1. Kill the cream shadow/background on the Newsletter Button container */
.wp-block-jetpack-newsletter .wp-block-button {
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: none !important;
	padding: 0 !important;
	appearance: none !important;
}

/* 2. Kill the cream shadow/background on the Search Button container */
.wp-block-search__button-outside .wp-block-search__button {
	box-shadow: none !important;
	background-image: none !important;
}

/* 3. Ensure the turquoise button itself has NO extra decorations */
.wp-block-jetpack-newsletter .wp-block-button__link {
	background-image: none !important;
	box-shadow: none !important;
	border: none !important;
	outline: none !important;
}

/* 1. Kill the floating 'Subscribe' bar on mobile */
#jetpack-newsletter-floating-bar, 
.jetpack-newsletter-floating-bar {
	display: none !important;
	visibility: hidden !important;
}

/* 2. THE ULTIMATE CREAM-BOX KILLER */
/* We are targeting the 'span' and 'container' which is often where theme shadows hide */
.wp-block-jetpack-newsletter .wp-block-button,
.wp-block-jetpack-newsletter .wp-block-button__link,
.wp-block-jetpack-newsletter .wp-block-button__link span {
	background-image: none !important;
	filter: none !important;
	box-shadow: none !important;
	mask-image: none !important;
}

/* 3. Force the button to be a clean turquoise slab */
.wp-block-jetpack-newsletter .wp-block-button__link {
	background-color: #4099a5 !important;
	border: none !important;
}

/* 1. Kill the floating 'Subscribe' bar on mobile */
#jetpack-newsletter-floating-bar, 
.jetpack-newsletter-floating-bar {
	display: none !important;
	visibility: hidden !important;
}

/* 2. THE ULTIMATE CREAM-BOX KILLER */
/* We are targeting the 'span' and 'container' which is often where theme shadows hide */
.wp-block-jetpack-newsletter .wp-block-button,
.wp-block-jetpack-newsletter .wp-block-button__link,
.wp-block-jetpack-newsletter .wp-block-button__link span {
	background-image: none !important;
	filter: none !important;
	box-shadow: none !important;
	mask-image: none !important;
}

/* 3. Force the button to be a clean turquoise slab */
.wp-block-jetpack-newsletter .wp-block-button__link {
	background-color: #4099a5 !important;
	border: none !important;
}

/* 1. VAPORIZE the floating mobile bar by burying it and hiding it */
div[class*="newsletter-floating"], 
div[id*="newsletter-floating"],
#jetpack-subscribe-bar,
.jetpack-subscribe-bar {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	z-index: -9999 !important;
	height: 0 !important;
	pointer-events: none !important;
}

/* 2. THE ULTIMATE CREAM-BOX KILLER */
/* We are targeting the button wrapper and forcing it to NOT show anything outside the button */
.wp-block-jetpack-newsletter .wp-block-button {
	background: transparent !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
/* This 'clip-path' tells the computer to ONLY show what is inside the button's rectangle */
	clip-path: inset(0 0 0 0) !important;
}

.wp-block-jetpack-newsletter .wp-block-button__link {
	background-color: #4099a5 !important;
	background-image: none !important;
	box-shadow: none !important;
	filter: none !important;
	border: none !important;
	transform: none !important;
/* Some themes 'tilt' the shadow using transform */
}

/* 3. Strip any 'before/after' decorations from the button */
.wp-block-jetpack-newsletter .wp-block-button__link::before,
.wp-block-jetpack-newsletter .wp-block-button__link::after {
	display: none !important;
	content: none !important;
}

/* Hide the WordPress.com Action Bar (the bottom Subscribe bar) */
#wpadminbar, 
.wrapper.wpcom-action-bar, 
div#highlander-comments-pyramid + #wpadminbar,
.wpcom-action-bar {
	display: none !important;
}

/* Also hide the 'Collapse this bar' menu if it lingers */
#wp-admin-bar-notes {
	display: none !important;
}

/* Force the button to hide its own shadow by clipping its container */
.wp-block-jetpack-newsletter .wp-block-button {
	overflow: hidden !important;
/* This chops off anything outside the button lines */
	background: transparent !important;
	border: none !important;
}

.wp-block-jetpack-newsletter .wp-block-button__link {
	margin: 0 !important;
	position: relative !important;
	z-index: 2 !important;
}

/* 1. Force the mobile action bar to have no height or visibility */
.wpcom-mobile-actionbar,
#wpcom-mobile-actionbar,
.wpcom-action-bar,
#mastbar,
#wpadminbar {
	display: none !important;
	height: 0 !important;
	min-height: 0 !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* 2. Push the body down so no "phantom space" is left at the bottom */
html, body {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* 3. The 'Shadow' fix - one last try using the specific 'Handmade' class */
[class*="is-style-handmade"]::after,
[class*="is-style-sketch"]::after,
.wp-block-button.is-style-outline::after {
	display: none !important;
	content: none !important;
	background: none !important;
}

/* Add a frame around the entire carousel container */
.wp-block-jetpack-post-carousel {
	border: 12px solid #fdf5e6 !important;
/* Thick cream frame */
	border-radius: 15px !important;
/* Rounds the corners of the frame */
	padding: 0 !important;
	background-color: #fdf5e6 !important;
/* Fills any tiny gaps with cream */
	box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
/* Adds a soft "lift" shadow */
	overflow: hidden !important;
/* Ensures images stay inside the frame */
}

/* Optional: Make the dots at the bottom cream to match */
.wp-block-jetpack-post-carousel .jetpack-slideshow-pagination dot {
	background: #fdf5e6 !important;
}

@media (max-width: 781px) {
	.wp-block-embed-tiktok {
		display: flex !important;
		justify-content: center !important;
	/* This prevents the height from being cut off by giving the container space */
		min-height: 550px !important;
		overflow: visible !important;
	}
	
	.tiktok-embed {
	/* This shrinks the entire element to 80% of its original size */
		transform: scale(0.8) !important;
		transform-origin: center top !important;
		margin: 0 auto !important;
		width: 100% !important;
	}
}

/* 1. Tighten the space between mobile menu items */
.wp-block-navigation-link {
	margin-top: 5px !important;
	margin-bottom: 5px !important;
}

/* 2. Remove the extra "padding" that WordPress adds to the list */
.wp-block-navigation__container {
	gap: 10px !important;
/* This controls the space between items */
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* 3. If there is still a gap, target the individual links */
.wp-block-navigation-link__content {
	padding-top: 2px !important;
	padding-bottom: 2px !important;
}

/* 1. Hide the newsletter/subscribe block ONLY when the mobile menu is open */
.has-menu-open .wp-block-jetpack-newsletter,
.has-menu-open .newsletter-form,
.is-menu-open .wp-block-jetpack-newsletter {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
}

/* 2. Force the menu 'curtain' to be the top-most layer */
.wp-block-navigation__responsive-container.is-menu-open {
	z-index: 99999 !important;
}

/* 1. Force the mobile menu to the absolute top layer */
.wp-block-navigation__responsive-container.is-menu-open {
	z-index: 999999 !important;
	position: fixed !important;
}

/* 2. Force the newsletter/email area to a lower layer */
.wp-block-jetpack-newsletter, 
.footer-subscribe-area,
.wp-block-group.has-background {
	z-index: 1 !important;
}

/* 3. The 'Safety Net' - Hide it completely when the menu is active */
body.has-menu-open .wp-block-jetpack-newsletter,
body.has-menu-open .newsletter-form,
body.has-menu-open footer {
	visibility: hidden !important;
	opacity: 0 !important;
}

/* 1. Remove the massive gaps between the menu links */
.wp-block-navigation__responsive-container-content .wp-block-buttons {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	gap: 0 !important;
}

/* 2. Tighten the space around the individual links */
.wp-block-navigation__responsive-container-content .wp-block-button {
	margin: 5px 0 !important;
/* This is the ONLY space between items now */
	width: auto !important;
}

/* 3. Get rid of the faint boxes/backgrounds around the text */
.wp-block-navigation__responsive-container-content .wp-block-button__link {
	background: transparent !important;
	border: none !important;
	padding: 10px !important;
	box-shadow: none !important;
}

/* 1. Remove the massive gaps between the menu links */
.wp-block-navigation__responsive-container-content .wp-block-buttons {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	gap: 0 !important;
}

/* 2. Tighten the space around the individual links */
.wp-block-navigation__responsive-container-content .wp-block-button {
	margin: 5px 0 !important;
/* This is the ONLY space between items now */
	width: auto !important;
}

/* 3. Get rid of the faint boxes/backgrounds around the text */
.wp-block-navigation__responsive-container-content .wp-block-button__link {
	background: transparent !important;
	border: none !important;
	padding: 10px !important;
	box-shadow: none !important;
}

@media (max-width: 781px) {
	/* A broader 'catch-all' for featured images */
	header.entry-header img, 
								    .featured-media img {
		display: none !important;
	}
}

/* Hide the featured image on all devices for single posts */
.single-post .post-thumbnail, 
.single-post .entry-hero, 
.single-post .featured-media,
.single-post .wp-post-image:not(.wp-block-image img) {
	display: none !important;
}

/* Hide the massive automatic image at the top of blog posts */
.single-post figure.wp-block-post-featured-image,
.single-post .wp-block-post-featured-image img,
.single-post .post-thumbnail,
.single-post .entry-hero,
.single-post .featured-media {
	display: none !important;
	height: 0 !important;
	visibility: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Remove any extra gap that the hidden image container might leave behind */
.single-post .entry-header {
	margin-bottom: 0 !important;
}

/* Moves all lists to the left on mobile devices only */
/* Round the Lucy & Lola Logo Corners */
@media screen and (max-width: 480px)
.wp-block-media-text__media img {
	
}

/* Add breathing room between the logo and the text */
.wp-block-media-text__content {
	padding-left: 10% !important;
	padding-right: 5% !important;
}

/* Make sure it looks good on mobile */
@media (max-width: 600px) {
	.wp-block-media-text__content {
		padding-left: 20px !important;
		padding-top: 20px !important;
	}
}

/* Round the corners of the shop logos */
.wp-block-media-text__media img {
	border-radius: 20px !important;
}

/* Add space between the logo and the text */
.wp-block-media-text__content {
	padding-left: 30px !important;
	padding-right: 20px !important;
}

/* Keeps the Lucy & Lola logo small on phones */
@media (max-width: 600px) {
	.wp-block-media-text__media img {
		max-width: 150px !important;
	/* Adjust this number to make it bigger or smaller */
		margin: 0 auto !important;
	/* Centers it */
		display: block !important;
	}
}

/* Keeps the Lucy & Lola logo small on phones */
@media (max-width: 600px) {
	.wp-block-media-text__media img {
		max-width: 150px !important;
	/* Adjust this number to make it bigger or smaller */
		margin: 0 auto !important;
	/* Centers it */
		display: block !important;
	}
}