/*
Theme Name:   The Crous House (Astra child)
Theme URI:    https://thecroushouse.co.za
Description:  Child theme for The Crous House. Holds brand styles and WooCommerce/mobile tweaks. Safe to update Astra.
Author:       Havealot Design Corp
Template:     astra
Version:      1.0.0
Text Domain:  crous-child
*/

/* ---------- Brand tokens (from the client's design reference) ---------- */
:root {
	--crous-forest: #1d2619;      /* header, footer, hero overlay */
	--crous-forest-2: #2b3725;
	--crous-cream: #f6eee3;       /* page background */
	--crous-cream-2: #efe3d3;     /* bands, cards */
	--crous-caramel: #ecd3ae;     /* primary buttons */
	--crous-caramel-dark: #d9b98a;
	--crous-brown: #2a1c12;       /* body text */
	--crous-brown-soft: #5b4636;
	--crous-gold: #b8894f;        /* accents, stars */
	--crous-white: #fffdf9;

	--crous-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--crous-sans: "Jost", "Helvetica Neue", Arial, sans-serif;

	--crous-radius: 6px;
	--crous-shadow: 0 6px 24px rgba(42, 28, 18, .12);
}

/* ---------- Base ---------- */
body, .ast-separate-container, .ast-plain-container, .ast-page-builder-template {
	background: var(--crous-cream) !important;
}
body {
	color: var(--crous-brown);
	font-family: var(--crous-sans);
}
h1, h2, h3, h4, .entry-title, .woocommerce-loop-product__title, .product_title {
	font-family: var(--crous-serif);
	color: var(--crous-brown);
	letter-spacing: .01em;
}
a { color: var(--crous-brown); }
a:hover, a:focus { color: var(--crous-gold); }

/* Small spaced capitals used for eyebrows ("OUR STORY", "FOLLOW OUR JOURNEY") */
.crous-eyebrow,
.crous-eyebrow .elementor-heading-title {
	font-family: var(--crous-sans) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: .32em !important;
	text-transform: uppercase;
}

/* Eyebrow with thin lines either side ("—— FOLLOW OUR JOURNEY ——") */
.crous-eyebrow-lines .elementor-heading-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
}
.crous-eyebrow-lines .elementor-heading-title::before,
.crous-eyebrow-lines .elementor-heading-title::after {
	content: "";
	flex: 0 1 140px;
	height: 1px;
	background: currentColor;
	opacity: .35;
}

/* ---------- Trust bar: thin outline icons + dividers (as in the design) ---------- */
.crous-ico .elementor-icon-box-wrapper {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: left !important;
}
.crous-ico .elementor-icon-box-wrapper::before {
	content: "";
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	background-color: var(--crous-brown);
	-webkit-mask: var(--crous-ico) center / contain no-repeat;
	mask: var(--crous-ico) center / contain no-repeat;
}
.crous-ico .elementor-icon-box-title { margin: 0 !important; line-height: 1.5; }
.crous-ico-leaf  { --crous-ico: url("assets/icons/leaf.svg"); }
.crous-ico-heart { --crous-ico: url("assets/icons/heart.svg"); }
.crous-ico-gift  { --crous-ico: url("assets/icons/gift.svg"); }
.crous-ico-truck { --crous-ico: url("assets/icons/truck.svg"); }
@media (min-width: 768px) {
	.crous-trust .crous-ico { flex: 1 1 0 !important; }
	.crous-trust .crous-ico + .crous-ico { border-left: 1px solid rgba(42, 28, 18, .15); padding-left: 24px; }
}

/* FAQ toggles: keep long questions clear of the +/- icon */
.elementor-toggle .elementor-tab-title { display: flex; align-items: flex-start; gap: 14px; }
.elementor-toggle .elementor-tab-title .elementor-toggle-title { flex: 1 1 auto; }
.elementor-toggle .elementor-tab-title .elementor-toggle-icon { order: 2; flex: 0 0 auto; margin-left: auto; float: none !important; }

/* ---------- Buttons (theme, WooCommerce, Elementor) ---------- */
.ast-button, .button, button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .wp-block-button__link,
.elementor-button {
	background: var(--crous-caramel) !important;
	color: var(--crous-brown) !important;
	border: 0 !important;
	border-radius: var(--crous-radius) !important;
	font-family: var(--crous-sans) !important;
	font-weight: 600 !important;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: 13px !important;
	padding: 14px 24px !important;
	transition: background .2s ease, transform .2s ease;
}
.ast-button:hover, .button:hover, button:hover, input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.elementor-button:hover {
	background: var(--crous-caramel-dark) !important;
	color: var(--crous-brown) !important;
	transform: translateY(-1px);
}
.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce .checkout-button, #place_order {
	background: var(--crous-forest) !important;
	color: var(--crous-white) !important;
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce .checkout-button:hover, #place_order:hover {
	background: var(--crous-forest-2) !important;
}

/* ---------- Top bar + header (Astra header builder) ---------- */
.ast-above-header-bar, .ast-above-header-wrap {
	background: var(--crous-forest) !important;
	color: var(--crous-cream);
	font-size: 13px;
}
.ast-above-header-bar a { color: var(--crous-cream); }
.ast-primary-header-bar, .main-header-bar, .ast-mobile-header-wrap .ast-primary-header-bar {
	background: var(--crous-forest) !important;
	border-bottom: 0;
}
/* Logo shown in cream on the dark header (until a light logo file is supplied); text title hidden. */
.site-header .custom-logo-link img, .ast-mobile-header-wrap .custom-logo-link img {
	filter: brightness(0) invert(94%) sepia(8%) saturate(400%) hue-rotate(330deg);
}
.site-header .ast-site-title-wrap { display: none; }
.main-header-menu > .menu-item > .menu-link,
.ast-header-break-point .main-header-menu .menu-link,
.ast-builder-menu-1 .menu-item > .menu-link {
	color: var(--crous-cream) !important;
	font-family: var(--crous-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.main-header-menu > .menu-item.current-menu-item > .menu-link,
.main-header-menu > .menu-item > .menu-link:hover {
	color: var(--crous-caramel) !important;
}
.ast-site-header-cart .ast-cart-menu-wrap .count,
.ast-header-woo-cart .ast-addon-cart-wrap .count { background: var(--crous-caramel); color: var(--crous-brown); }
.ast-header-woo-cart .ast-cart-menu-wrap, .ast-site-header-cart i.astra-icon { color: var(--crous-cream) !important; }
.menu-toggle, .ast-mobile-menu-trigger-minimal { color: var(--crous-cream) !important; background: transparent !important; }
.menu-toggle svg, .ast-mobile-menu-trigger-minimal svg, .ast-mobile-svg { fill: var(--crous-cream) !important; }

/* Top bar message with small outline icons */
.ast-above-header-bar { border-bottom: 1px solid rgba(246, 238, 227, .08); }
.ast-above-header-bar .ast-builder-html-element,
.ast-above-header-bar .ast-builder-html-element p {
	display: flex; align-items: center; gap: 18px; margin: 0;
	color: var(--crous-cream); font-size: 13px; letter-spacing: .04em;
}
.crous-topbar-item { display: inline-flex; align-items: center; gap: 8px; }
.crous-topbar-item::before {
	content: ""; width: 16px; height: 16px; background-color: var(--crous-cream);
	-webkit-mask: var(--crous-ico) center / contain no-repeat; mask: var(--crous-ico) center / contain no-repeat;
}
.crous-topbar-truck { --crous-ico: url("assets/icons/truck.svg"); }
.crous-topbar-home  { --crous-ico: url("assets/icons/heart.svg"); }
.crous-topbar-sep { opacity: .35; }

/* Top bar icons: social, account, cart in cream */
.ast-above-header-bar .ast-builder-social-element,
.ast-above-header-bar .ast-builder-social-element svg,
.ast-above-header-bar .ast-header-account svg,
.ast-above-header-bar .ast-site-header-cart svg,
.ast-mobile-header-wrap .ast-site-header-cart svg,
.ast-header-social-wrap .ast-builder-social-element svg {
	fill: var(--crous-cream) !important;
	color: var(--crous-cream) !important;
}
.ast-above-header-bar .ast-header-account-wrap svg,
.ast-above-header-bar .ast-header-account-wrap .ast-header-account-link,
.ast-above-header-bar .ast-header-account-wrap .account-icon,
.ast-above-header-bar .ast-header-account-wrap svg path,
.ast-above-header-bar .ast-header-account-wrap svg circle {
	fill: var(--crous-cream) !important; color: var(--crous-cream) !important;
}
/* Cart: plain cream bag with caramel count, no outline box */
.ast-site-header-cart .ast-cart-menu-wrap, .ast-site-header-cart .ast-addon-cart-wrap,
.ast-menu-cart-outline .ast-cart-menu-wrap, .ast-menu-cart-outline .ast-addon-cart-wrap {
	border: 0 !important; background: transparent !important;
}
.ast-site-header-cart .ast-cart-menu-wrap .count, .ast-site-header-cart .ast-addon-cart-wrap .count,
.ast-site-header-cart .ast-woo-header-cart-info-wrap, .astra-cart-drawer .count {
	background: var(--crous-caramel) !important; color: var(--crous-brown) !important; border-color: var(--crous-caramel) !important;
}
.ast-above-header-bar .ast-builder-social-element { padding: 0 6px !important; }
.ast-above-header-bar .ast-builder-social-element svg { width: 15px; height: 15px; }

/* Split menu either side of the centred logo */
.ast-builder-menu-1 .main-header-menu, .ast-builder-menu-2 .main-header-menu { gap: 18px; }
.ast-builder-menu-1 { justify-content: flex-end; }
.ast-builder-menu-2 .menu-item > .menu-link {
	color: var(--crous-cream) !important; font-family: var(--crous-sans);
	font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}
.ast-builder-menu-2 .menu-item.current-menu-item > .menu-link,
.ast-builder-menu-2 .menu-item > .menu-link:hover { color: var(--crous-caramel) !important; }
.site-header .site-logo-img .custom-logo-link img { max-height: none; }

/* ---------- Footer ---------- */
.site-footer, .site-primary-footer-wrap, .site-below-footer-wrap {
	background: var(--crous-forest) !important;
	color: var(--crous-cream);
}
.site-footer, .site-footer p, .site-footer .ast-footer-copyright,
.site-footer .ast-footer-copyright p { color: rgba(246, 238, 227, .75) !important; }
.site-footer a { color: var(--crous-cream); }
.site-footer a:hover { color: var(--crous-caramel); }

/* ---------- WooCommerce: shop grid ---------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--crous-white);
	border-radius: var(--crous-radius);
	padding: 0 0 18px;
	overflow: hidden;
	box-shadow: var(--crous-shadow);
	text-align: center;
}
.woocommerce ul.products li.product a img { margin: 0 0 14px; aspect-ratio: 2 / 3; object-fit: cover; /* client posters are 2:3, show them whole */ }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 20px !important;
	padding: 0 14px;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price, .woocommerce div.product span.price {
	color: var(--crous-brown-soft) !important;
	font-family: var(--crous-sans);
	font-weight: 600;
}
.woocommerce ul.products li.product .button { margin-top: 10px; }
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .astra-shop-summary-wrap { padding-left: 14px; padding-right: 14px; }
.woocommerce span.onsale { background: var(--crous-gold); }
.woocommerce .star-rating span::before, .woocommerce p.stars a { color: var(--crous-gold); }

/* ---------- WooCommerce: single product ---------- */
.woocommerce div.product .product_title { font-size: clamp(30px, 4vw, 44px); }
.woocommerce div.product div.images img { border-radius: var(--crous-radius); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--crous-gold); }
.woocommerce div.product form.cart .variations select {
	border-radius: var(--crous-radius);
	background: var(--crous-white);
	border: 1px solid var(--crous-cream-2);
	padding: 10px 12px;
}

/* ---------- Cart / checkout ---------- */
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce form.checkout_coupon, .woocommerce form.login {
	background: var(--crous-white);
	border-radius: var(--crous-radius);
	padding: 20px;
	box-shadow: var(--crous-shadow);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	border-radius: var(--crous-radius);
	border: 1px solid #dccbb5;
	background: var(--crous-white);
}

/* ---------- Mobile ---------- */
@media (max-width: 921px) {
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 17px !important; }
	.ast-above-header-bar { font-size: 12px; text-align: center; }
}
@media (max-width: 767px) {
	/* Trust icons in a 2 x 2 grid */
	.crous-trust > .e-con-inner, .crous-trust.e-con { flex-direction: row !important; flex-wrap: wrap !important; }
	.crous-trust .elementor-widget-icon-box { flex: 0 0 calc(50% - 12px) !important; max-width: calc(50% - 12px); }
	.crous-ico .elementor-icon-box-wrapper { flex-direction: column !important; gap: 8px; text-align: center !important; }
	/* "Follow our journey" photos: 3 across */
	.crous-journey .gallery { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.crous-journey .gallery-item { max-width: 100% !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
}
@media (max-width: 544px) {
	.woocommerce ul.products li.product .button { padding: 10px 12px !important; letter-spacing: .06em; font-size: 12px !important; }
	.ast-button, .button, .elementor-button { padding: 12px 18px !important; letter-spacing: .1em; }
}

/* Baked-fresh notice (product pages, basket, checkout) */
.crous-fresh-notice {
	margin: 0 0 1.4em;
	padding: 12px 16px 12px 18px;
	border-left: 3px solid var(--crous-gold, #b8894f);
	background: var(--crous-cream-2, #efe3d3);
	color: var(--crous-brown, #2a1c12);
	font-size: 15px;
	line-height: 1.55;
}