/*
Theme Name: Zero Lifestyle Child Theme
Theme URI: https://test.zerolifestyle.example
Author: Zero Lifestyle
Author URI: https://zerolifestyle.co/
Description: Storefront child theme for the Zero Lifestyle test store. Clean black header, white store, announcement bar, hero, category tiles and trust bar. Requires the Storefront parent theme and WooCommerce.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: storefront
Text Domain: zero-lifestyle-child
Tags: e-commerce, storefront-child, black, white, minimal
*/

/* ---------- Announcement bar ---------- */
.zl-announcement {
	background: #111111;
	color: #ffffff;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	padding: 9px 12px;
}
.zl-announcement span { margin: 0 10px; white-space: nowrap; }
.zl-announcement a { color: #ffffff; text-decoration: underline; }

/* ---------- Header: clean black ---------- */
.site-header {
	background: #111111;
	border-bottom: 1px solid #222222;
}
.site-header .site-branding img { max-height: 52px; width: auto; }
.site-header .site-title a,
.site-header .site-description { color: #ffffff; }
.main-navigation ul li a { color: #ffffff; font-weight: 600; }
.main-navigation ul li a:hover { color: #cccccc; }
.site-header .site-search input[type="search"] {
	background: #ffffff;
	border-radius: 4px;
}
.site-header-cart .cart-contents { color: #ffffff; }

/* ---------- Buttons ---------- */
.wp-block-button__link,
.button,
button[type="submit"],
.woocommerce a.button,
.woocommerce button.button {
	background: #111111;
	color: #ffffff;
	border-radius: 4px;
	font-weight: 700;
}
.wp-block-button__link:hover,
.button:hover,
.woocommerce a.button:hover {
	background: #333333;
	color: #ffffff;
}

/* ---------- Hero ---------- */
.zl-hero {
	background: #f4f4f4;
	text-align: center;
	padding: 48px 20px 40px;
}
.zl-hero img { max-width: 340px; width: 100%; height: auto; margin: 0 auto 16px; }
.zl-hero h1 { font-size: 40px; margin: 0 0 12px; }
.zl-hero p { font-size: 18px; color: #444444; max-width: 720px; margin: 0 auto 20px; }
.zl-hero .button { font-size: 16px; padding: 12px 28px; }

/* ---------- Category tiles ---------- */
.zl-tiles {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
	margin: 24px 0;
}
.zl-tile a { display: block; text-decoration: none; color: #111111; }
.zl-tile img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	background: #f4f4f4;
}
.zl-tile span {
	display: block;
	text-align: center;
	font-weight: 700;
	margin-top: 8px;
}
@media (max-width: 768px) {
	.zl-tiles { grid-template-columns: repeat(2, 1fr); }
	.zl-hero h1 { font-size: 28px; }
}

/* ---------- Trust bar ---------- */
.zl-trust {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	background: #111111;
	color: #ffffff;
	border-radius: 8px;
	padding: 20px;
	margin: 28px 0;
	text-align: center;
}
.zl-trust strong { display: block; font-size: 15px; }
.zl-trust small { color: #bbbbbb; }
/* ---------- Footer link columns (rich footer) ---------- */
.zl-footer-links { display: flex; gap: 48px; background: #111111; color: #cccccc; padding: 48px 5%; }
.zl-footer-links > div { flex: 1 1 0; }
.zl-footer-links h3 { color: #ffffff; margin: 0 0 16px; }
.zl-footer-links ul { list-style: none; margin: 0; padding: 0; }
.zl-footer-links li { margin: 0 0 10px; }
.zl-footer-links a { color: #cccccc; }
.zl-footer-links a:hover { color: #ffffff; }

/* ---------- Sticky header ---------- */
.site-header { position: sticky; top: 0; z-index: 1000; }
body.admin-bar .site-header { top: 32px; }

/* ---------- Shop / category pages — full width, no sidebar ---------- */
body.woocommerce-shop .content-area, body.tax-product_cat .content-area, body.post-type-archive-product .content-area { width: 100% !important; }
.widget-area { display: none !important; }

@media (max-width: 768px) {
	.zl-trust { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Sale badges & prices ---------- */
.woocommerce span.onsale {
	background: #c0392b;
	border-radius: 4px;
	min-height: 0;
	line-height: 1.6;
	padding: 4px 10px;
}
.woocommerce ul.products li.product .price { color: #111111; font-weight: 700; }
/* ---------- Sticky header: let the header stick — overflow-x: clip does not create a scroll container the way hidden does ---------- */
html, body { overflow-x: clip; }

.woocommerce ul.products li.product .price del { color: #999999; }

/* ---------- Footer ---------- */
.site-footer {
	background: #111111;
	color: #cccccc;
}
.site-footer a { color: #ffffff; }
.zl-social { text-align: center; padding: 18px 0 4px; }
.zl-social a {
	display: inline-block;
	margin: 0 10px;
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
}
.zl-social a:hover { text-decoration: underline; }
.zl-footer-contact { text-align: center; font-size: 14px; padding-bottom: 16px; }