/*
 * Store Knooz - Professional brand theme
 * Colors derived from the brand logo (green #4E9376 / gold #E8B356 / dark green #1E3E33)
 */

/* ============================================================
   1. BRAND COLOR SYSTEM  (override Hostinger AI theme presets)
   ============================================================ */
:root {
	--knooz-dark: #1E3E33;
	--knooz-green: #2E6B52;
	--knooz-sage: #4E9376;
	--knooz-gold: #E8B356;
	--knooz-gold-dark: #D99E3D;
	--knooz-ink: #15241E;
	--knooz-mist: #EFF4F0;
	--knooz-line: #E3EAE5;

	/* map Hostinger preset variables -> brand palette */
	--wp--preset--color--color-1: var(--knooz-mist);
	--wp--preset--color--color-2: var(--knooz-dark);
	--wp--preset--color--color-3: var(--knooz-gold);
	--wp--preset--color--light: #ffffff;
	--wp--preset--color--dark: var(--knooz-ink);
	--wp--preset--color--grey: #C8D3CD;
	--wp--preset--color--header-background: #ffffff;
	--wp--preset--color--header-text: var(--knooz-dark);
	--wp--preset--color--page-background: #ffffff;
	--wp--preset--color--page-text: var(--knooz-ink);

	--wp--preset--gradient--gradient-one: linear-gradient(135deg, #1E3E33 0%, #2E6B52 60%, #4E9376 100%);
	--wp--preset--gradient--gradient-two: linear-gradient(135deg, #E8B356 0%, #D99E3D 100%);
}

/* ============================================================
   2. TYPOGRAPHY  (Cairo)
   ============================================================ */
body,
.wp-site-blocks,
.entry-content,
input,
select,
textarea,
button,
.wp-block-navigation,
.wp-block-post-title a,
.wc-block-product-template .wc-block-product {
	font-family: 'Cairo', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title,
.wc-block-product .wp-block-post-title {
	font-family: 'Cairo', sans-serif;
	font-weight: 800;
	letter-spacing: -0.01em;
}

/* ============================================================
   3. HEADER
   ============================================================ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: #ffffff;
	box-shadow: 0 2px 20px rgba(30, 62, 51, 0.08);
	border-bottom: 1px solid var(--knooz-line);
}

.hostinger-ai-menu .hostinger-ai-site-title {
	font-weight: 800;
	color: var(--knooz-dark);
}

/* Brand logo in header (injected via render_block) */
.knooz-logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.knooz-logo img {
	height: 50px;
	width: auto;
	max-width: none;
}

/* Navigation links */
.hostinger-ai-site-navigation .wp-block-navigation-item__content,
.hostinger-ai-site-navigation a {
	font-weight: 600;
	color: var(--knooz-dark);
	transition: color 0.2s ease;
}
.hostinger-ai-site-navigation .wp-block-navigation-item__content:hover,
.hostinger-ai-site-navigation a:hover {
	color: var(--knooz-green);
}

/* ============================================================
   4. BUTTONS
   ============================================================ */
.wp-block-button__link,
.hostinger-ai-cta-button a {
	display: inline-block;
	background: linear-gradient(135deg, var(--knooz-gold) 0%, var(--knooz-gold-dark) 100%);
	color: var(--knooz-dark) !important;
	font-family: 'Cairo', sans-serif;
	font-weight: 800;
	font-size: 1rem;
	line-height: 1;
	padding: 0.95em 1.9em;
	border-radius: 999px;
	text-decoration: none !important;
	letter-spacing: 0.01em;
	box-shadow: 0 8px 20px rgba(217, 158, 61, 0.35);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.wp-block-button__link:hover,
.hostinger-ai-cta-button a:hover {
	transform: translateY(-2px);
	background: linear-gradient(135deg, #EEC06F 0%, var(--knooz-gold) 100%);
	box-shadow: 0 12px 26px rgba(217, 158, 61, 0.45);
}

/* ============================================================
   5. HERO
   ============================================================ */
.hostinger-ai-hero-for-online-store-2.hostinger-ai-hero-opacity {
	position: relative;
	background-color: var(--knooz-dark) !important;
}
.hostinger-ai-hero-for-online-store-2.hostinger-ai-hero-opacity::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 44, 35, 0.55) 0%, rgba(20, 44, 35, 0.75) 100%);
	pointer-events: none;
}
.hostinger-ai-hero-for-online-store-2.hostinger-ai-hero-opacity > * {
	position: relative;
	z-index: 1;
}
.hostinger-ai-hero-for-online-store-2 .hostinger-ai-title {
	text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
.hostinger-ai-hero-for-online-store-2 .hostinger-ai-description {
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   6. FEATURE CARDS  (wp-block-cover)
   ============================================================ */
.wp-block-column > .wp-block-cover.hostinger-ai-cover-image,
.hostinger-ai-cover-image {
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 16px 40px rgba(30, 62, 51, 0.16);
	border: 1px solid var(--knooz-line);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wp-block-column > .wp-block-cover.hostinger-ai-cover-image:hover,
.hostinger-ai-cover-image:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 50px rgba(30, 62, 51, 0.24);
}
.hostinger-ai-cover-image .wp-block-cover__background {
	background: linear-gradient(180deg, rgba(15, 34, 26, 0.25) 0%, rgba(15, 34, 26, 0.82) 100%) !important;
}
.hostinger-ai-cover-image .hostinger-ai-title {
	color: #ffffff;
	font-weight: 800;
}
.hostinger-ai-cover-image p {
	color: #ffffff;
}

/* ============================================================
   7. PRODUCT CARDS  (WooCommerce Product Collection)
   ============================================================ */
.wc-block-product-template__responsive.woocommerce > li.wc-block-product,
.wc-block-product-template > li.wc-block-product,
li.wc-block-product {
	background: #ffffff;
	border-radius: 18px;
	border: 1px solid var(--knooz-line);
	padding: 16px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 6px 20px rgba(30, 62, 51, 0.07);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	list-style: none;
}
li.wc-block-product:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 36px rgba(30, 62, 51, 0.16);
	border-color: rgba(78, 147, 118, 0.5);
}
li.wc-block-product .wc-block-components-product-image {
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 14px;
}
li.wc-block-product .wc-block-components-product-image img {
	transition: transform 0.35s ease;
	width: 100%;
	height: auto;
}
li.wc-block-product:hover .wc-block-components-product-image img {
	transform: scale(1.06);
}
li.wc-block-product .wp-block-post-title {
	font-size: 1.05rem;
	line-height: 1.4;
	margin: 0 0 8px;
}
li.wc-block-product .wp-block-post-title a {
	color: var(--knooz-ink);
	font-weight: 700;
	text-decoration: none;
}
li.wc-block-product .wp-block-post-title a:hover {
	color: var(--knooz-green);
}
li.wc-block-product .wc-block-grid__product-price,
li.wc-block-product .wc-block-components-product-price {
	font-weight: 800;
	color: var(--knooz-green);
	font-size: 1.1rem;
	margin-top: auto;
}
li.wc-block-product .wc-block-grid__product-price .woocommerce-Price-currencySymbol {
	font-size: 0.8em;
}

/* 2-up product grid on phones; CSS grid auto-scales on larger screens. */
.wc-block-product-template.is-flex-container {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.9em;
}
.wc-block-product-template.is-flex-container > li {
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
}
@media (min-width: 600px) {
	.wc-block-product-template.is-flex-container {
		grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
		gap: 1.25em;
	}
}

/* ============================================================
   8. SECTION HEADINGS
   ============================================================ */
main .wp-block-heading:not(.has-light-color):not(.has-color-1-color) {
	color: var(--knooz-ink);
}
main h1.wp-block-heading {
	font-size: clamp(2rem, 5vw, 3.5rem);
}

/* ============================================================
   9. FOOTER
   ============================================================ */
.site-footer {
	background: var(--knooz-dark) !important;
	color: #EAF3EE;
}
.site-footer .wp-block-heading {
	color: #ffffff !important;
}
.site-footer a {
	color: #CFE6DA;
	text-decoration: none;
}
.site-footer a:hover {
	color: var(--knooz-gold);
}

/* ============================================================
   10. MISC POLISH
   ============================================================ */
.wp-block-buttons {
	gap: 0.8em;
}
img {
	border-radius: 8px;
}
.wc-block-product-template__responsive > li {
	margin-top: 0;
}
.wp-block-separator {
	border-color: var(--knooz-line);
}

/* ============================================================
   11. HOME PAGE SECTION TILES  (multi-banner grid)
   ============================================================ */
.store-knooz-banners {
	padding: clamp(2rem, 5vw, 3.5rem) 0;
	position: relative;
}

.store-knooz-banners-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-right, 24px);
}

.store-knooz-banner-item {
	position: relative;
	display: block;
	background: linear-gradient(135deg, var(--knooz-dark) 0%, var(--knooz-green) 100%);
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: 0 12px 30px rgba(30, 62, 51, 0.14);
	border: 1px solid var(--knooz-line);
	text-decoration: none !important;
	transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.6s ease;
}
.store-knooz-banner-item:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 44px rgba(30, 62, 51, 0.24);
}

.sk-banner-media {
	position: absolute;
	inset: 0;
	display: block;
}
.sk-banner-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.store-knooz-banner-item:hover .sk-banner-media img {
	transform: scale(1.07);
}
.sk-banner-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 40, 32, 0.10) 0%, rgba(20, 40, 32, 0.80) 100%);
	pointer-events: none;
}

.sk-banner-label {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 18px 18px 20px;
	color: #ffffff;
	text-align: start;
	z-index: 1;
	display: block;
}
.sk-banner-label strong {
	display: block;
	font-family: 'Cairo', sans-serif;
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1.3;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.sk-banner-label em {
	display: inline-block;
	margin-top: 8px;
	font-style: normal;
	font-family: 'Cairo', sans-serif;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--knooz-dark);
	background: linear-gradient(135deg, var(--knooz-gold) 0%, var(--knooz-gold-dark) 100%);
	padding: 5px 14px;
	border-radius: 999px;
}

/* Reveal animation applied to the tiles by animations.js */
.store-knooz-banner-item.knooz-reveal {
	opacity: 0;
	transform: translate3d(0, 34px, 0);
}
.store-knooz-banner-item.knooz-reveal.knooz-inview {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}
.store-knooz-banner-item.knooz-inview:hover {
	transform: translateY(-6px);
}

@media (max-width: 700px) {
	.store-knooz-banners-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		padding-inline: 16px;
	}
	.store-knooz-banner-item {
		aspect-ratio: 1 / 1;
		border-radius: 16px;
	}
	.sk-banner-label {
		padding: 12px 10px 12px;
	}
	.sk-banner-label strong {
		font-size: 0.95rem;
	}
	.sk-banner-label em {
		margin-top: 6px;
		font-size: 0.78rem;
		padding: 4px 10px;
	}
}

/* ============================================================
   12. RESPONSIVE
   ============================================================ */
@media (max-width: 781px) {
	.knooz-logo img {
		height: 42px;
	}
	li.wc-block-product {
		padding: 12px;
	}
}

/* ============================================================
   13. MOBILE QUICK-ACCESS BOTTOM BAR
   ============================================================ */
.store-knooz-bottom-bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 999;
	display: none;
	grid-template-columns: repeat(4, 1fr);
	background: #ffffff;
	border-top: 1px solid var(--knooz-line);
	box-shadow: 0 -6px 24px rgba(30, 62, 51, 0.10);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.store-knooz-bottom-bar .sk-bar-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 9px 4px 8px;
	text-decoration: none !important;
	background: #ffffff;
	border: none;
	cursor: pointer;
	color: var(--knooz-ink);
	font-family: 'Cairo', sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	-webkit-tap-highlight-color: transparent;
}

.store-knooz-bottom-bar .sk-bar-icon {
	display: inline-flex;
	color: var(--knooz-green);
	transition: transform 0.2s ease, color 0.2s ease;
}

.store-knooz-bottom-bar .sk-bar-link:active .sk-bar-icon {
	transform: scale(0.88);
}

.store-knooz-bottom-bar .sk-bar-link:hover,
.store-knooz-bottom-bar .sk-bar-link:focus {
	color: var(--knooz-dark);
}

.store-knooz-bottom-bar .sk-bar-link:hover .sk-bar-icon,
.store-knooz-bottom-bar .sk-bar-link:focus .sk-bar-icon {
	color: var(--knooz-gold-dark);
}

.store-knooz-bottom-bar .sk-bar-link.active {
	color: var(--knooz-green);
}

/* Only on mobile widths */
@media (max-width: 781px) {
	.store-knooz-bottom-bar {
		display: grid;
	}
	.site-footer {
		padding-bottom: 70px;
	}
}

/* Compact product cards when 2-up on phones */
@media (max-width: 599px) {
	li.wc-block-product {
		padding: 10px;
		border-radius: 14px;
	}
	li.wc-block-product .wc-block-components-product-image {
		border-radius: 10px;
		margin-bottom: 10px;
	}
	li.wc-block-product .wp-block-post-title {
		font-size: 0.88rem;
		line-height: 1.35;
		margin-bottom: 6px;
	}
	li.wc-block-product .wc-block-grid__product-price,
	li.wc-block-product .wc-block-components-product-price {
		font-size: 0.95rem;
	}
}