/*
Theme Name:   Kengur Storefront Child
Theme URI:    https://kengur.ee
Description:  Child theme for the Kengur shop. Restyles WooCommerce Storefront with the Kengur brand tokens, self-hosted Manrope/Inter fonts, a three-row header, product cards with grade chips and stock labels, and a custom homepage. Requires the Storefront parent theme.
Author:       Kengur
Author URI:   https://kengur.ee
Template:     storefront
Version:      0.1.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  kengur
*/

/*
==================================================================
 1. DESIGN TOKENS
 Source: kengur-main/style-notes.md ("Color tokens" table).
==================================================================
*/
:root {
	--kengur-amber: #D97A2B;
	--kengur-amber-dark: #B96320;
	--kengur-amber-soft: #F8EBDD;
	--kengur-charcoal: #262320;
	--kengur-charcoal-soft: #4A4540;
	--kengur-blue: #4A6E8A;
	--kengur-bg: #F7F5F2;
	--kengur-card: #FFFFFF;
	--kengur-line: #ECE8E3;
	--kengur-green: #3E8E52;
	--kengur-red: #C0392B;
	/* Sourced from style-notes.md: old price strikethrough gray (also grade C gray). */
	--kengur-muted: #9A948D;
	/* Sourced from style-notes.md "Footer": light warm gray footer bg. */
	--kengur-footer-bg: #F0EDE9;
}

/*
==================================================================
 2. FONTS + TYPOGRAPHY
 Self-hosted woff2 in assets/fonts/ (see assets/fonts/OFL-*.txt).
 Both files are variable fonts covering the listed weights; the
 unicode ranges below mirror the official subsets.
==================================================================
*/
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url('assets/fonts/manrope-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url('assets/fonts/manrope-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url('assets/fonts/manrope-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('assets/fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('assets/fonts/inter-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

body,
button,
input,
select,
textarea,
.price,
.woocommerce-Price-amount {
	font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body {
	color: var(--kengur-charcoal);
	font-size: 16px;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.site-branding .site-title {
	font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 700;
	color: var(--kengur-charcoal);
}

/* Shared "shop UI" voice: uppercase + 0.5px letter-spacing. */
.main-navigation a,
.button,
button,
button.menu-toggle,
.added_to_cart,
.kengur-chip,
.kengur-stock-out,
.onsale,
.kengur-section-title,
.kengur-cat-tile-title,
.kengur-hero-title {
	font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.kengur-wordmark {
	font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/*
==================================================================
 3. BASE RESTYLE
==================================================================
*/
/* The sticky menu row breaks if an ancestor is a scroll container
   (overflow-x: hidden computes overflow-y to auto); clip scrolls nothing. */
.site {
	overflow-x: clip;
}

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

a {
	color: var(--kengur-blue);
}

a:hover {
	color: color-mix(in srgb, var(--kengur-blue) 82%, var(--kengur-charcoal));
}

/* Tertiary / link: never underline in menus and UI chrome. */
.main-navigation a,
.secondary-navigation a,
.site-header a,
.kengur-topbar a,
.kengur-mainrow a,
.site-footer a,
.kengur-card-actions a {
	text-decoration: none;
}

/* Focus states: blue outline on non-CTA elements, amber on CTAs,
   amber border on focused inputs (style-notes interaction table). */
a:focus,
a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--kengur-blue);
	outline-offset: 2px;
}

input[type=text],
input[type=number],
input[type=email],
input[type=tel],
input[type=url],
input[type=password],
input[type=search],
textarea,
.input-text,
select {
	background-color: var(--kengur-card);
	border: 1px solid var(--kengur-line);
	border-radius: 4px;
	color: var(--kengur-charcoal);
	font-size: 15px;
	padding: 0.6em 0.8em;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

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,
select:focus {
	background-color: var(--kengur-card);
	border-color: var(--kengur-amber);
	outline: none;
}

/* Hover language: fast, color-swap only, no transforms. */
a,
button,
.button,
.added_to_cart,
.main-navigation a,
ul.products li.product {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Prices: bold, large, tabular numbers. */
.price,
.woocommerce-Price-amount {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

ul.products li.product .price {
	font-size: 1.25rem;
	color: var(--kengur-charcoal);
}

.single-product .price {
	font-size: 1.5rem;
}

/* Sale price amber, old price strikethrough gray. */
.price del {
	color: var(--kengur-muted);
	text-decoration: line-through;
	font-weight: 400;
}

.price del .amount {
	color: var(--kengur-muted);
}

.price ins {
	color: var(--kengur-amber);
	text-decoration: none;
	font-weight: 700;
}

.price ins .amount {
	color: var(--kengur-amber);
}

/* Breadcrumb tone-down. */
.woocommerce-breadcrumb {
	color: var(--kengur-charcoal-soft);
	font-size: 13px;
}

.woocommerce-breadcrumb a {
	color: var(--kengur-blue);
}

/*
==================================================================
 4. BUTTONS
 Three variants from the style-notes interaction table.
==================================================================
*/
/* Primary: amber bg, white uppercase Manrope 600, 4px radius. */
button,
input[type=button],
input[type=reset],
input[type=submit],
.button,
.added_to_cart,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link {
	background-color: var(--kengur-amber);
	border-color: var(--kengur-amber);
	border-radius: 4px;
	color: var(--kengur-card);
	font-weight: 600;
}

button:hover,
.button:hover,
.added_to_cart:hover,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link:hover {
	background-color: var(--kengur-amber-dark);
	border-color: var(--kengur-amber-dark);
	color: var(--kengur-card);
}

.kengur-btn-primary:focus-visible,
button:focus-visible,
.button:focus-visible {
	outline-color: var(--kengur-amber);
}

/* Secondary: white bg, 1px charcoal border, hover charcoal fill. */
.kengur-btn-secondary {
	background-color: var(--kengur-card);
	border: 1px solid var(--kengur-charcoal);
	border-radius: 4px;
	color: var(--kengur-charcoal);
	font-weight: 600;
}

.kengur-btn-secondary:hover {
	background-color: var(--kengur-charcoal);
	border-color: var(--kengur-charcoal);
	color: var(--kengur-card);
}

/* Tertiary / link: slate blue, hover darker (base rules in section 3). */

/*
==================================================================
 5. HEADER — three rows (top strip / main row / sticky menu row)
 The two custom rows render before #masthead (hooked into
 storefront_before_header); #masthead holds only the menu row, so
 the sticky element has room to move within #page.
==================================================================
*/
.site-header {
	background-color: var(--kengur-card);
	padding: 0;
	position: sticky;
	top: 0;
	z-index: 999;
	border-bottom: 1px solid var(--kengur-line);
}

.site-header .col-full {
	box-sizing: border-box;
}

.home .site-header,
.home.page:not(.page-template-template-homepage) .site-header {
	margin-bottom: 0;
}

/* Keep the sticky menu row clear of the fixed WP admin bar. */
body.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

/* Row 1: charcoal utility strip, 40px. */
.kengur-topbar {
	background-color: var(--kengur-charcoal);
	color: var(--kengur-card);
	font-size: 13px;
}

.kengur-topbar-inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1.5em;
	min-height: 40px;
	flex-wrap: wrap;
}

.kengur-topbar a {
	color: var(--kengur-card);
}

.kengur-topbar a:hover {
	color: var(--kengur-amber-soft);
}

.kengur-topbar-phone {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
}

.kengur-langs {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.kengur-langs .kengur-lang {
	font-weight: 400;
	color: var(--kengur-card);
}

.kengur-langs .kengur-lang-current {
	font-weight: 600;
	color: var(--kengur-amber-soft);
	pointer-events: none;
}

.kengur-langs .kengur-sep {
	opacity: 0.4;
}

/* Row 2: white main row, logo + search + cart. */
.kengur-mainrow {
	background-color: var(--kengur-card);
}

.kengur-mainrow-inner {
	display: flex;
	align-items: center;
	gap: 2em;
	min-height: 76px;
	padding-top: 0.75em;
	padding-bottom: 0.75em;
}

.kengur-brand {
	display: flex;
	align-items: center;
	gap: 0.6em;
	flex-shrink: 0;
	color: var(--kengur-charcoal);
}

.kengur-brand:hover {
	color: var(--kengur-charcoal);
}

.kengur-brand img.kengur-brand-icon {
	width: 48px;
	height: 48px;
	max-width: none;
	border-radius: 0;
}

.kengur-wordmark {
	font-size: 1.5rem;
	line-height: 1;
	color: var(--kengur-charcoal);
}

/* Combined search: input + category select + amber submit. */
.kengur-search {
	display: flex;
	align-items: stretch;
	flex: 1 1 auto;
	max-width: 640px;
	background-color: var(--kengur-card);
	border: 1px solid var(--kengur-line);
	border-radius: 4px;
	overflow: hidden;
}

.kengur-search input[type=search] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	border-radius: 0;
	padding: 0.65em 1em;
	font-size: 15px;
}

.kengur-search input[type=search]:focus {
	border: 0;
	outline: none;
}

.kengur-search:focus-within {
	border-color: var(--kengur-amber);
}

.kengur-search select {
	flex: 0 1 auto;
	width: auto;
	max-width: 180px;
	border: 0;
	border-left: 1px solid var(--kengur-line);
	border-radius: 0;
	padding: 0.65em 0.8em;
	font-size: 15px;
	color: var(--kengur-charcoal);
}

.kengur-search button[type=submit],
.kengur-search input[type=submit] {
	flex: 0 0 auto;
	border: 0;
	border-radius: 0;
	padding: 0.65em 1.4em;
	font-size: 14px;
}

.kengur-search:focus-within .kengur-search-submit {
	outline: none;
}

/* Cart: icon + amber circular count badge + mini-cart dropdown.
   Selector strength matters here: Storefront ships unscoped
   .site-header-cart rules (padding on .cart-contents, 0.5-opacity
   .count, left-anchored mini-cart) that must be beaten at equal or
   higher specificity by this later stylesheet. */
.kengur-cart {
	margin-left: auto;
	flex-shrink: 0;
}

.kengur-cart .site-header-cart {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
}

.kengur-cart .site-header-cart > li {
	margin: 0;
	list-style: none;
}

.kengur-cart .cart-contents {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--kengur-charcoal);
}

.kengur-cart .cart-contents:hover {
	color: var(--kengur-amber);
}

.kengur-cart .cart-contents svg {
	display: block;
	width: 26px;
	height: 26px;
}

.kengur-cart .cart-contents .count {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 19px;
	height: 19px;
	padding: 0 4px;
	background-color: var(--kengur-amber);
	color: var(--kengur-card);
	border-radius: 10px;
	font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
	letter-spacing: 0;
	text-transform: none;
	opacity: 1;
}

.kengur-cart .widget_shopping_cart {
	position: absolute;
	top: 100%;
	right: 0;
	left: auto;
	z-index: 1000;
	display: none;
	width: 300px;
	background-color: var(--kengur-card);
	border: 1px solid var(--kengur-line);
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	padding: 1em;
}

/* Matches Storefront's own hover selectors (.site-header-cart:hover/
   .focus) at equal specificity — later in the cascade, so it wins and
   the panel stays right-anchored. */
.kengur-cart .site-header-cart:hover .widget_shopping_cart,
.kengur-cart .site-header-cart.focus .widget_shopping_cart {
	left: auto;
	display: block;
}

/* Row 3: white menu row inside the sticky header, 48px. */
.storefront-primary-navigation {
	background-color: var(--kengur-card);
	border-top: 1px solid var(--kengur-line);
}

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
	color: var(--kengur-charcoal);
	font-size: 14px;
	padding: 0 1em;
	line-height: 45px;
	border-bottom: 3px solid transparent;
}

.main-navigation ul.menu > li:hover > a,
.main-navigation ul.menu > li.focus > a,
.main-navigation ul.menu > li.current-menu-item > a {
	color: var(--kengur-amber);
	border-bottom-color: var(--kengur-amber);
}

/* Dropdown panels: amber bg, white items, charcoal hover. */
.main-navigation ul.menu ul.sub-menu {
	background-color: var(--kengur-amber);
	border-radius: 0 0 4px 4px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	min-width: 220px;
	padding: 0.4em 0;
}

.main-navigation ul.menu ul.sub-menu li a {
	color: var(--kengur-card);
	background-color: transparent;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 0.7em 1.2em;
}

.main-navigation ul.menu ul.sub-menu li a:hover,
.main-navigation ul.menu ul.sub-menu li.focus > a,
.main-navigation ul.menu ul.sub-menu li:hover > a {
	background-color: var(--kengur-charcoal);
	color: var(--kengur-card);
}

/*
==================================================================
 6. PRODUCT CARDS
==================================================================
*/
ul.products li.product {
	background-color: var(--kengur-card);
	border: 1px solid var(--kengur-line);
	border-top: 2px solid transparent;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	padding: 0 1em 1.2em;
	position: relative;
}

ul.products li.product:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

/* Amber top border kept for sale items. */
ul.products li.product.on-sale {
	border-top-color: var(--kengur-amber);
}

ul.products li.product img {
	border-radius: 0;
	object-fit: contain;
	max-height: 200px;
}

ul.products li.product .woocommerce-loop-product__title {
	font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 600;
	font-size: 1em;
	color: var(--kengur-charcoal);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

ul.products li.product .woocommerce-loop-product__title:hover {
	color: var(--kengur-blue);
}

/* Sale flash badge. */
ul.products li.product span.onsale,
span.onsale {
	background-color: var(--kengur-amber-soft);
	color: var(--kengur-charcoal);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	line-height: 1;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 0.5em 0.8em;
	border-radius: 4px;
	top: 1em;
	left: 1em;
	z-index: 5;
}

/* Chips row: grade chip + Uus + LAOS. */
.kengur-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
	margin: 0.4em 0 0.6em;
}

.kengur-chip {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	padding: 0.45em 0.7em;
	border-radius: 4px;
	color: var(--kengur-card);
	/* Fallback for grade values outside the documented A+/A/B/C set. */
	background-color: var(--kengur-charcoal-soft);
	cursor: help;
}

.kengur-grade--a-plus {
	background-color: var(--kengur-green);
}

.kengur-grade--a {
	background-color: var(--kengur-blue);
}

.kengur-grade--b {
	background-color: var(--kengur-amber);
}

.kengur-grade--c {
	background-color: var(--kengur-muted);
}

.kengur-chip--new {
	background-color: var(--kengur-green);
}

.kengur-stock-in {
	background-color: var(--kengur-green);
	cursor: default;
}

/* Out of stock: gray full-width label. */
.kengur-stock-out {
	display: block;
	width: 100%;
	background-color: var(--kengur-muted);
	color: var(--kengur-card);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	line-height: 1;
	padding: 0.6em 0;
	border-radius: 4px;
	text-align: center;
}

/* Specs summary lines. */
.kengur-specs {
	margin: 0 0 0.8em;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--kengur-charcoal-soft);
}

.kengur-specs li {
	margin: 0;
	padding: 0;
	line-height: 1.7;
}

.kengur-specs .kengur-spec-label {
	font-weight: 600;
	color: var(--kengur-charcoal-soft);
}

/* Card buttons: VAATA (primary) + VÕRDLUS (secondary). */
.kengur-card-actions {
	display: flex;
	gap: 0.6em;
	margin-top: 0.9em;
}

.kengur-card-actions .button {
	flex: 1 1 50%;
	margin: 0;
	text-align: center;
	font-size: 13px;
	padding: 0.7em 0.5em;
}

/*
==================================================================
 7. PRODUCT PAGE
==================================================================
*/
.single-product div.product .price {
	color: var(--kengur-charcoal);
}

/* Grade badge + explainer block in the buy-box. */
.kengur-single-grade {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0.6em 0;
}

.kengur-grade-desc {
	font-size: 13px;
	color: var(--kengur-charcoal-soft);
}

/* Delivery/installment hints near the price. */
.kengur-delivery-hints {
	margin: 1em 0;
	padding: 0.8em 1em;
	background-color: var(--kengur-amber-soft);
	border-radius: 4px;
	font-size: 13px;
	color: var(--kengur-charcoal);
}

.kengur-delivery-hints ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kengur-delivery-hints li {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: 0.15em 0;
}

.kengur-delivery-hints svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--kengur-amber);
}

.kengur-delivery-hints a {
	font-weight: 600;
}

/* Specs as a clean two-column table. */
.single-product table.woocommerce-product-attributes {
	border: 0;
	margin: 0 0 1.5em;
}

.single-product table.woocommerce-product-attributes th,
.single-product table.woocommerce-product-attributes td {
	padding: 0.6em 0.8em;
	border-bottom: 1px solid var(--kengur-line);
}

.single-product table.woocommerce-product-attributes th {
	font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--kengur-charcoal-soft);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	width: 30%;
}

.single-product table.woocommerce-product-attributes td {
	font-size: 15px;
	color: var(--kengur-charcoal);
}

.single-product table.woocommerce-product-attributes tr:last-child th,
.single-product table.woocommerce-product-attributes tr:last-child td {
	border-bottom: 0;
}

/*
==================================================================
 8. FOOTER
==================================================================
*/
.site-footer {
	background-color: var(--kengur-footer-bg);
	color: var(--kengur-charcoal);
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer .widget-title {
	color: var(--kengur-charcoal);
	font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.site-footer a {
	color: var(--kengur-charcoal);
}

.site-footer a:hover {
	color: var(--kengur-amber);
}

.site-info {
	color: var(--kengur-charcoal-soft);
}

/*
==================================================================
 9. HOMEPAGE
==================================================================
*/
.kengur-home section {
	margin: 0 0 3em;
}

/* Hero: flat amber-soft placeholder block, no photography yet. */
.kengur-hero {
	background-color: var(--kengur-amber-soft);
	border-radius: 4px;
	padding: 4em 2.5em;
}

.kengur-hero-title {
	font-size: 2.2em;
	font-weight: 800;
	letter-spacing: 0.5px;
	color: var(--kengur-charcoal);
	margin: 0 0 0.4em;
}

.kengur-hero-sub {
	color: var(--kengur-charcoal-soft);
	margin: 0 0 1.5em;
	max-width: 40em;
}

.kengur-hero .button {
	font-size: 14px;
}

/* Category tiles. */
.kengur-cat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.2em;
}

.kengur-cat-tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.8em;
	background-color: var(--kengur-card);
	border: 1px solid var(--kengur-line);
	border-radius: 4px;
	padding: 1.5em;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.kengur-cat-tile:hover {
	border-color: var(--kengur-amber);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.kengur-cat-tile svg {
	width: 40px;
	height: 40px;
	color: var(--kengur-amber);
}

.kengur-cat-tile-title {
	font-size: 15px;
	color: var(--kengur-charcoal);
}

.kengur-cat-tile:hover .kengur-cat-tile-title {
	color: var(--kengur-amber);
}

/* Section headings. */
.kengur-section-title {
	font-size: 1.3em;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--kengur-charcoal);
	margin: 0 0 1em;
	padding-bottom: 0.5em;
	border-bottom: 2px solid var(--kengur-amber);
	display: inline-block;
}

/* Trust strip: 4 icon + text items. */
.kengur-trust {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.2em;
	padding: 1.5em 0;
	border-top: 1px solid var(--kengur-line);
	border-bottom: 1px solid var(--kengur-line);
}

.kengur-trust-item {
	display: flex;
	align-items: center;
	gap: 0.8em;
	font-size: 13px;
	color: var(--kengur-charcoal-soft);
}

.kengur-trust-item svg {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	color: var(--kengur-charcoal);
}

.kengur-trust-item strong {
	display: block;
	color: var(--kengur-charcoal);
	font-weight: 600;
}

/*
==================================================================
 10. RESPONSIVE
==================================================================
*/
@media (max-width: 768px) {
	.kengur-topbar-inner {
		justify-content: space-between;
		gap: 0.8em;
	}

	.kengur-topbar-phone {
		display: none;
	}

	.kengur-mainrow-inner {
		flex-wrap: wrap;
		gap: 1em;
		min-height: 0;
	}

	.kengur-search {
		order: 3;
		flex: 1 1 100%;
		max-width: none;
	}

	.kengur-cart .widget_shopping_cart {
		width: 260px;
	}

	.kengur-cat-grid {
		grid-template-columns: 1fr;
	}

	.kengur-trust {
		grid-template-columns: repeat(2, 1fr);
	}

	.kengur-hero {
		padding: 2.5em 1.5em;
	}
}

@media (max-width: 480px) {
	.kengur-wordmark {
		font-size: 1.2rem;
	}

	.kengur-trust {
		grid-template-columns: 1fr;
	}
}