/*
 * Vitamins & Supplements — custom Storefront styling
 * Loaded after core storefront styles so these rules win.
 */

:root {
	--sup-green: #22a06b;
	--sup-green-dark: #158150;
	--sup-accent: #ff7a3d;
	--sup-accent-dark: #e05d1f;
	--sup-ink: #0f2a22;
	--sup-muted: #5b6b66;
	--sup-bg: #f6faf7;
	--sup-card: #ffffff;
	--sup-border: #e3ede7;
	--sup-shadow: 0 10px 30px rgba(16, 60, 40, 0.08);
	--sup-shadow-hover: 0 18px 45px rgba(16, 60, 40, 0.16);
	--sup-radius: 14px;
}

/* -------- Base / typography -------- */
body,
button,
input,
textarea,
select {
	font-family: "Inter", "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: var(--sup-ink);
}

body {
	background-color: var(--sup-bg);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--sup-ink);
	font-weight: 700;
	letter-spacing: -0.01em;
}

a {
	color: var(--sup-green-dark);
	transition: color 0.2s ease;
}

a:hover {
	color: var(--sup-accent);
}

/* -------- Header -------- */
.site-header {
	background: linear-gradient(135deg, #0f2a22 0%, #16513a 100%);
	color: #e9f4ee;
	padding-top: 1.2em;
	padding-bottom: 1.2em;
	border-bottom: 3px solid var(--sup-green);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.site-header .site-branding .site-title a,
.site-header .site-branding .site-title {
	color: #fff;
}

.site-header a {
	color: #e9f4ee;
}

.site-header a:hover {
	color: var(--sup-accent);
}

.main-navigation ul li a {
	color: #e9f4ee;
	font-weight: 600;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
	color: var(--sup-accent);
}

.site-header-cart .cart-contents {
	background: var(--sup-green);
	color: #fff !important;
	border-radius: 999px;
	padding: 0.6em 1.2em !important;
	font-weight: 600;
	box-shadow: 0 4px 12px rgba(34, 160, 107, 0.35);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.site-header-cart .cart-contents:hover {
	transform: translateY(-1px);
	background: var(--sup-green-dark);
	box-shadow: 0 6px 18px rgba(34, 160, 107, 0.45);
}

/* -------- Buttons -------- */
button,
input[type=button],
input[type=reset],
input[type=submit],
.button,
.added_to_cart,
.wc-block-components-button:not(.is-link),
.wp-block-button__link,
a.wc-block-cart__submit-button,
a.checkout-button {
	background-color: var(--sup-green);
	border-color: var(--sup-green);
	color: #fff;
	border-radius: 999px;
	padding: 0.85em 1.8em;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: none;
	box-shadow: 0 6px 18px rgba(34, 160, 107, 0.25);
	transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

button:hover,
input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover,
.button:hover,
.added_to_cart:hover,
.wc-block-components-button:not(.is-link):hover,
.wp-block-button__link:hover,
a.wc-block-cart__submit-button:hover,
a.checkout-button:hover {
	background-color: var(--sup-green-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 10px 26px rgba(34, 160, 107, 0.35);
}

button.alt,
button.cta,
.button.alt,
.button.cta,
.single_add_to_cart_button {
	background-color: var(--sup-accent);
	border-color: var(--sup-accent);
	box-shadow: 0 6px 18px rgba(255, 122, 61, 0.3);
}

button.alt:hover,
button.cta:hover,
.button.alt:hover,
.button.cta:hover,
.single_add_to_cart_button:hover {
	background-color: var(--sup-accent-dark);
	box-shadow: 0 10px 26px rgba(255, 122, 61, 0.4);
}

/* Inputs */
input[type=text],
input[type=number],
input[type=email],
input[type=tel],
input[type=url],
input[type=password],
input[type=search],
textarea,
.input-text {
	background-color: #fff;
	border: 1px solid var(--sup-border);
	border-radius: 10px;
	padding: 0.75em 1em;
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type=text]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
textarea:focus,
.input-text:focus {
	background-color: #fff;
	border-color: var(--sup-green);
	box-shadow: 0 0 0 3px rgba(34, 160, 107, 0.15);
	outline: none;
}

/* -------- Product cards (shop / archive) -------- */
.woocommerce ul.products li.product,
.wc-block-grid__products .wc-block-grid__product {
	background: var(--sup-card);
	border: 1px solid var(--sup-border);
	border-radius: var(--sup-radius);
	padding: 1.2em 1.2em 1.4em;
	box-shadow: var(--sup-shadow);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	overflow: hidden;
	position: relative;
}

.woocommerce ul.products li.product:hover,
.wc-block-grid__products .wc-block-grid__product:hover {
	transform: translateY(-4px);
	box-shadow: var(--sup-shadow-hover);
}

.woocommerce ul.products li.product img,
.wc-block-grid__products .wc-block-grid__product img {
	border-radius: 10px;
	background: #f1f7f3;
	transition: transform 0.3s ease;
}

.woocommerce ul.products li.product:hover img {
	transform: scale(1.03);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__products .wc-block-grid__product-title {
	font-size: 1.05em;
	font-weight: 600;
	color: var(--sup-ink);
	margin: 0.6em 0 0.3em;
}

.woocommerce ul.products li.product .price,
.wc-block-grid__products .wc-block-grid__product-price {
	color: var(--sup-green-dark);
	font-weight: 700;
	font-size: 1.15em;
}

.woocommerce span.onsale,
.wc-block-grid__product-onsale {
	background: var(--sup-accent);
	color: #fff;
	border-radius: 999px;
	min-height: auto;
	min-width: auto;
	padding: 0.3em 0.9em;
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.05em;
	box-shadow: 0 4px 12px rgba(255, 122, 61, 0.35);
	top: 12px;
	left: 12px;
}

/* Star rating accent */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before {
	color: var(--sup-accent);
}

/* -------- Single product -------- */
.single-product div.product .product_title {
	font-size: 2.2em;
	line-height: 1.15;
}

.single-product div.product .price {
	color: var(--sup-green-dark);
	font-weight: 700;
	font-size: 1.6em;
}

.single-product div.product .woocommerce-product-details__short-description {
	color: var(--sup-muted);
	font-size: 1.05em;
	line-height: 1.7;
}

/* -------- Cart & Checkout containers -------- */
.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review,
.wc-block-components-sidebar-layout .wc-block-components-main {
	background: var(--sup-card);
	border: 1px solid var(--sup-border);
	border-radius: var(--sup-radius);
	padding: 1.8em;
	box-shadow: var(--sup-shadow);
}

.woocommerce table.shop_table {
	border-radius: var(--sup-radius);
	border: 1px solid var(--sup-border);
	background: var(--sup-card);
	overflow: hidden;
}

/* -------- Footer -------- */
.site-footer {
	background: linear-gradient(180deg, #0f2a22 0%, #081a14 100%);
	color: #c8d6cf;
	padding: 3em 0 2em;
}

.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6 {
	color: #fff;
}

.site-footer a {
	color: #c8d6cf;
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--sup-accent);
	text-decoration: none;
}

.site-info {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* -------- Homepage hero polish -------- */
.page-template-template-homepage .entry-header h1 {
	font-size: 3.2em;
	background: linear-gradient(135deg, var(--sup-green) 0%, var(--sup-accent) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* =========================================================
 * FIX: mobile visibility for the WhatsApp cart button.
 *
 * The OneClick Chat to Order plugin injects
 * `a.wa-order-checkout.checkout-button.button.wa-cart-button`
 * into `.wc-proceed-to-checkout` (classic cart) or into the
 * Block Cart submit container. On narrow viewports several
 * themes and the Block Cart itself collapse or hide the
 * sidebar where the button lives, or the rounded pill style
 * inherited from the new button rules above pushes the label
 * off-screen. The rules below force the button to always be
 * visible, tappable, and correctly sized on mobile.
 * ========================================================= */

a.wa-cart-button,
a.wa-order-checkout.wa-cart-button,
.wc-proceed-to-checkout a.wa-cart-button,
#wa-order-block-cart-button .wa-cart-button,
.wc-block-cart__submit-container .wa-cart-button {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	margin: 0.8em 0 0 !important;
	padding: 1em 1.2em !important;
	background-color: #25d366 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-decoration: none !important;
	white-space: normal !important;
	word-break: break-word !important;
	overflow: visible !important;
	clip: auto !important;
	position: relative !important;
	z-index: 5 !important;
	box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35) !important;
}

a.wa-cart-button:hover {
	background-color: #1ebe5b !important;
	color: #fff !important;
}

/* Make sure the parent containers don't clip or hide the button */
.wc-proceed-to-checkout,
.wc-block-cart__submit-container,
#wa-order-block-cart-button {
	display: block !important;
	width: 100% !important;
	overflow: visible !important;
	height: auto !important;
}

@media (max-width: 768px) {
	/* On the Block Cart, the submit column lives in a sidebar that
	   reflows below the items table. Keep it visible and stacked. */
	.wp-block-woocommerce-cart,
	.wp-block-woocommerce-cart .wc-block-cart,
	.wc-block-cart .wc-block-components-sidebar-layout,
	.wc-block-cart__sidebar,
	.wp-block-woocommerce-proceed-to-checkout-block {
		display: block !important;
		width: 100% !important;
		float: none !important;
	}

	a.wa-cart-button,
	#wa-order-block-cart-button .wa-cart-button,
	.wc-block-cart__submit-container .wa-cart-button {
		position: relative !important;
		display: block !important;
		width: 100% !important;
		margin: 0.75em auto 1em !important;
		padding: 1em 1.1em !important;
		font-size: 1rem !important;
		z-index: 10 !important;
	}

	/* Prevent narrow-screen layouts from pushing the button off the
	   viewport with large negative margins or absolute positioning. */
	.wc-proceed-to-checkout,
	#wa-order-block-cart-button,
	.wc-block-cart__submit-container {
		position: static !important;
		transform: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* -------- Floating WhatsApp cart button (ALWAYS visible on cart) --------
 *  The floating wrapper is injected by the script in functions.php on
 *  cart pages. It uses position:fixed pinned to the bottom of the viewport
 *  so the customer never needs to scroll to find the WhatsApp CTA.
 *  On desktop it sits bottom-right as a pill; on mobile it spans full-width.
 */
html body #sup-wa-floating {
	position: fixed !important;
	bottom: 16px !important;
	right: 16px !important;
	left: auto !important;
	z-index: 2147483647 !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: 380px !important;
	width: auto !important;
	display: block !important;
	pointer-events: auto !important;
	padding-bottom: env(safe-area-inset-bottom, 0px) !important;
	transform: none !important;
}

html body #sup-wa-floating a.wa-cart-button,
html body #sup-wa-floating a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.55em !important;
	width: auto !important;
	min-width: 220px !important;
	margin: 0 !important;
	padding: 0.95em 1.5em !important;
	background-color: #25d366 !important;
	color: #fff !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-decoration: none !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(37, 211, 102, 0.4) !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: relative !important;
	white-space: normal !important;
	transition: transform 0.15s ease, background-color 0.15s ease !important;
}

html body #sup-wa-floating a.wa-cart-button:hover {
	transform: translateY(-2px) !important;
	background-color: #1ebe5b !important;
}

html body #sup-wa-floating a.wa-cart-button::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z'/></svg>") center/contain no-repeat;
	flex: 0 0 auto;
}

/* Mobile: span full width */
@media (max-width: 768px) {
	html body #sup-wa-floating {
		left: 12px !important;
		right: 12px !important;
		bottom: 12px !important;
		max-width: none !important;
	}
	html body #sup-wa-floating a.wa-cart-button,
	html body #sup-wa-floating a {
		display: flex !important;
		width: 100% !important;
		min-width: 0 !important;
	}
}

/* Hide the plugin's in-flow duplicate so there's only one button visible.
   The script marks it with .sup-wa-cloned once the floating copy is mounted. */
a.wa-cart-button.sup-wa-cloned,
#wa-order-block-cart-button.sup-wa-hidden,
.wc-proceed-to-checkout a.wa-cart-button.sup-wa-cloned {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Reserve space at the bottom of the cart so the last row isn't obscured */
body.woocommerce-cart,
body.page-template-template-cart {
	padding-bottom: 100px !important;
}

@media (max-width: 420px) {
	a.wa-cart-button {
		padding: 0.9em 0.9em !important;
		font-size: 0.95rem !important;
	}
}