/*
Theme Name: Clara BioSolv
Theme URI: https://clarabiosolv.com
Author: Clara BioSolv
Description: WooCommerce block theme recreating the Clara BioSolv storefront — eco-friendly biodegradable solvent shop.
Version: 1.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clara-biosolv
Tags: e-commerce, block-theme, full-site-editing
*/

/* Hero: size to the image's natural aspect ratio so the bottle is never cropped */
.clara-hero {
	aspect-ratio: 1366 / 881;
	min-height: 0 !important;
}
/* Text sits to the right of the bottle baked into the background image,
   pushed below the bottle label with a subtle dark backdrop for readability */
.clara-hero .clara-hero-content {
	margin-left: 28%;
	margin-top: 14%;
	max-width: 660px;
	background: rgba(11, 30, 20, 0.45);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	border-radius: 10px;
	padding: 32px 36px;
}
@media (max-width: 900px) {
	.clara-hero {
		aspect-ratio: auto;
		min-height: 560px !important;
	}
	.clara-hero .clara-hero-content {
		margin-left: 0;
		margin-top: 0;
		max-width: 100%;
		padding: 24px;
	}
}

/* Underline the current page in the nav, like the original */
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation a[aria-current="page"],
.wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	text-decoration: underline;
	text-underline-offset: 8px;
}

/* Green-bordered list boxes used in homepage sections */
.clara-list-box {
	border: 1px solid #109637;
	border-radius: 10px;
	padding: 24px 28px;
	margin-bottom: 24px;
}
.clara-list-box ul {
	margin: 0;
	padding-left: 18px;
	font-size: 0.9rem;
}
.clara-list-box li {
	margin-bottom: 10px;
}
.clara-list-box li:last-child {
	margin-bottom: 0;
}

/* Product grid: match Shopify look — light gray "Sold out" pill, "39.00 GTQ" price */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 0.95rem;
	font-weight: 400;
	color: #3a3a3a;
}
.woocommerce ul.products li.product .price {
	color: #545454;
	font-size: 0.95rem;
}
ul.products li.product .button.wp-element-button {
	background: #ececec !important;
	color: #9a9a9a !important;
	border-radius: 6px;
	padding: 12px 40px;
	font-weight: 500;
	display: block;
	text-align: center;
	max-width: 260px;
	margin-left: auto;
	margin-right: auto;
}
ul.products li.product .button.wp-element-button:hover {
	background: #e0e0e0 !important;
	color: #7a7a7a !important;
}

/* Contact page: blue Send button like the original */
.clara-contact-blue .wpforms-container button.wpforms-submit {
	background: #29b4ec !important;
	color: #fff !important;
}
.clara-contact-blue .wpforms-container button.wpforms-submit:hover {
	background: #1a9fd6 !important;
}

/* Newsletter form in footer: inline email + arrow button inside one border */
.clara-newsletter .wpforms-container {
	margin: 0;
}
.clara-newsletter div.wpforms-container-full form.wpforms-form {
	display: flex !important;
	align-items: stretch;
	max-width: 400px;
	border: 1px solid #3a3a3a;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
}
.clara-newsletter div.wpforms-container-full .wpforms-field-container {
	flex: 1;
}
.clara-newsletter div.wpforms-container-full .wpforms-field {
	padding: 0 !important;
	margin: 0 !important;
}
.clara-newsletter div.wpforms-container-full .wpforms-field input[type="email"] {
	border: none !important;
	box-shadow: none !important;
	width: 100%;
	height: 100%;
	padding: 14px 16px !important;
	font-family: inherit;
	font-size: 15px;
	background: transparent;
}
.clara-newsletter div.wpforms-container-full .wpforms-submit-container {
	display: flex;
	padding: 0 !important;
	margin: 0 !important;
	width: auto !important;
}
.clara-newsletter div.wpforms-container-full button.wpforms-submit {
	border: none !important;
	background: #fff !important;
	color: #3a3a3a !important;
	padding: 0 18px !important;
	font-size: 20px;
	cursor: pointer;
	min-height: 100%;
}
.clara-newsletter .wpforms-error {
	position: absolute;
}

/* Contact page form: green submit button to match brand */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container textarea {
	border: 1px solid #c9c9c9;
	padding: 12px 14px;
	font-family: inherit;
}
.wpforms-container button.wpforms-submit {
	background: #109637 !important;
	color: #fff !important;
	border: none !important;
	padding: 14px 40px !important;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	border-radius: 4px;
}
.wpforms-container button.wpforms-submit:hover {
	background: #376751 !important;
}

/* Shop page availability filter dropdown */
.clara-stock-filter {
	border: 1px solid #c9c9c9;
	border-radius: 4px;
	padding: 8px 12px;
	font-family: inherit;
	font-size: 14px;
	color: #3a3a3a;
	background: #fff;
}

/* Footer country/language selector boxes */
.clara-selector {
	display: inline-block;
	border: 1px solid #3a3a3a;
	border-radius: 4px;
	padding: 12px 20px;
	font-size: 14px;
	color: #3a3a3a;
	margin: 0;
}

/* Footer payment badges */
.clara-pay-badge {
	display: inline-block;
	border-radius: 4px;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 700;
	font-style: italic;
	margin-left: 6px;
	vertical-align: middle;
}
.clara-pay-paypal {
	background: #fff;
	color: #003087;
	border: 1px solid #e0e0e0;
}
.clara-pay-venmo {
	background: #3396cd;
	color: #fff;
}

/* Header icon row tweaks */
.wp-block-search__button.wp-element-button {
	background: transparent !important;
	color: #545454 !important;
	border: none;
	padding: 4px;
}

/* Language switcher in the header: inline EN | ES links */
.clara-lang-links {
	font-size: 14px;
	white-space: nowrap;
}
.clara-lang-links a.clara-lang-link {
	color: #8a8a8a;
	text-decoration: none;
}
.clara-lang-links a.clara-lang-link.clara-lang-current {
	color: #3a3a3a;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 5px;
}
.clara-lang-links a.clara-lang-link:hover {
	color: #3a3a3a;
}
.clara-lang-sep {
	color: #c9c9c9;
	margin: 0 8px;
}

/* Nav links underline on hover, like the original */
.wp-block-navigation a:hover {
	text-decoration: underline;
	text-underline-offset: 8px;
}