/*
Theme Name: MAKOLAX Earth
Theme URI: https://makolax.com
Author: MAKOLAX
Description: A premium earthy block theme for the MAKOLAX WooCommerce fashion store.
Version: 1.4.1
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: makolax-earth
*/

:root {
	--mk-espresso: #24150f;
	--mk-brown: #4a2c21;
	--mk-clay: #7a4a34;
	--mk-caramel: #aa7658;
	--mk-sand: #d8bfa6;
	--mk-ivory: #f8f2e9;
	--mk-cream: #fffaf3;
	--mk-gold: #b48a52;
	--mk-white: #ffffff;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
a { text-underline-offset: .18em; }

.mk-announcement {
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.mk-header {
	position: sticky;
	top: 0;
	z-index: 80;
	box-shadow: 0 1px 0 rgba(36, 21, 15, .1);
	backdrop-filter: blur(14px);
}

.mk-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: 1240px;
	margin: 0 auto;
}

.mk-search-trigger { display: none; }
.mk-sticky-search { display: flex; align-items: center; gap: .7rem; max-width: 1240px; margin: 16px auto 0; padding: 7px 7px 7px 14px; border: 1px solid rgba(74,44,33,.2); border-radius: 999px; background: rgba(255,255,255,.82); }
.mk-sticky-search svg { flex: 0 0 auto; width: 19px; height: 19px; fill: none; stroke: var(--mk-clay); stroke-width: 1.8; stroke-linecap: round; }
.mk-sticky-search input[type="search"] { flex: 1; min-width: 0; padding: .55rem 0; border: 0; outline: 0; background: transparent; color: var(--mk-espresso); font: inherit; }
.mk-sticky-search button,.mk-search-input-row button { padding: .7rem 1.2rem; border: 0; border-radius: 999px; background: var(--mk-brown); color: var(--mk-white); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.mk-search-overlay[hidden] { display: none; }
.mk-search-overlay { position: fixed; inset: 0; z-index: 120; display: grid; align-items: start; padding: 12vh 16px 16px; }
.mk-search-backdrop { position: absolute; inset: 0; border: 0; background: rgba(20,10,6,.7); backdrop-filter: blur(8px); }
.mk-search-panel { position: relative; z-index: 1; width: min(620px,100%); margin: 0 auto; padding: 1.4rem; border-radius: 18px; background: var(--mk-cream); box-shadow: 0 24px 70px rgba(18,9,5,.35); }
.mk-search-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.mk-search-panel-head h2 { margin: 0; color: var(--mk-espresso); font-size: clamp(1.55rem,5vw,2.2rem); }
.mk-search-close { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--mk-ivory); color: var(--mk-espresso); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.mk-search-panel label { display: block; margin-bottom: .55rem; color: var(--mk-clay); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mk-search-input-row { display: flex; gap: .5rem; padding: .45rem; border: 1px solid rgba(74,44,33,.2); border-radius: 12px; background: var(--mk-white); }
.mk-search-input-row input[type="search"] { flex: 1; min-width: 0; padding: .7rem; border: 0; outline: 0; background: transparent; font: inherit; }
.mk-search-shortcuts { display: flex; flex-wrap: wrap; gap: .7rem 1rem; margin-top: 1.2rem; font-size: .82rem; }
.mk-search-shortcuts span { color: #765f53; }
.mk-search-shortcuts a { color: var(--mk-brown); font-weight: 700; }
body.mk-search-open { overflow: hidden; }

.mk-static-nav { display: flex; align-items: center; gap: 1.35rem; white-space: nowrap; }
.mk-static-nav > a,
.mk-categories-menu > summary { color: var(--mk-espresso); font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.mk-static-nav > a:hover,
.mk-categories-menu > summary:hover { color: var(--mk-clay); }
.mk-categories-menu { position: relative; }
.mk-categories-menu > summary { cursor: pointer; list-style: none; }
.mk-categories-menu > summary::-webkit-details-marker { display: none; }
.mk-category-dropdown { position: absolute; right: 0; top: 1.8rem; z-index: 30; width: 190px; padding: .75rem 1rem; background: var(--mk-cream); border: 1px solid rgba(74,44,33,.14); box-shadow: 0 15px 38px rgba(36,21,15,.16); }
.mk-category-dropdown a { display: block; padding: .55rem 0; color: var(--mk-espresso); font-size: .82rem; text-decoration: none; }
.mk-mobile-menu { display: none; position: relative; }
.mk-mobile-menu summary { cursor: pointer; font-size: .78rem; font-weight: 700; letter-spacing: .08em; list-style: none; text-transform: uppercase; }
.mk-mobile-menu summary::-webkit-details-marker { display: none; }
.mk-mobile-menu nav { position: absolute; top: 2rem; right: 0; width: 230px; padding: 1rem; background: var(--mk-cream); box-shadow: 0 14px 38px rgba(36,21,15,.16); }
.mk-mobile-menu nav a { display: block; padding: .6rem 0; color: var(--mk-espresso); text-decoration: none; }


.mk-wordmark {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(1.55rem, 3vw, 2.25rem);
	font-weight: 600;
	letter-spacing: .18em;
	line-height: 1;
	text-decoration: none;
}

.mk-nav a { text-decoration: none; }
.mk-nav a:hover { color: var(--mk-clay); }

.mk-cart-link {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: var(--mk-espresso);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-decoration: none;
	text-transform: uppercase;
}

.mk-cart-count {
	display: inline-grid;
	place-items: center;
	width: 1.45rem;
	height: 1.45rem;
	border-radius: 50%;
	background: var(--mk-brown);
	color: var(--mk-white);
	font-size: .72rem;
}

.mk-hero {
	position: relative;
	min-height: min(720px, 78vh);
	background:
		linear-gradient(90deg, rgba(22,12,8,.72) 0%, rgba(22,12,8,.25) 52%, rgba(22,12,8,.02) 100%),
		url('assets/images/makolax-hero.webp') center / cover no-repeat;
	overflow: hidden;
}

.mk-hero::after { content: none; }

.mk-hero > .wp-block-group { position: relative; z-index: 2; }
.mk-kicker { letter-spacing: .22em; text-transform: uppercase; }

.wp-block-button__link {
	transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.wp-block-button__link:hover { transform: translateY(-2px); }

.mk-trust-strip { border-bottom: 1px solid rgba(74,44,33,.12); }
.mk-trust-item { min-width: 180px; }
.mk-trust-item strong { display: block; font-family: Georgia, serif; font-size: 1rem; }
.mk-trust-item span { color: #765f53; font-size: .82rem; }

.mk-section-label {
	color: var(--mk-clay);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.mk-category-card {
	position: relative;
	min-height: 320px;
	border-radius: 3px;
	overflow: hidden;
}
.mk-category-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 25%, rgba(36,21,15,.82) 100%);
}
.mk-category-card > * { position: relative; z-index: 1; }
.mk-category-bags { background: linear-gradient(180deg, transparent 35%, rgba(36,21,15,.88)), url('assets/images/category-bags.webp') center / cover no-repeat; }
.mk-category-footwear { background: linear-gradient(180deg, transparent 35%, rgba(36,21,15,.9)), url('assets/images/category-footwear.webp') center / cover no-repeat; }
.mk-category-preorder { background: linear-gradient(180deg, transparent 35%, rgba(36,21,15,.9)), url('assets/images/category-preorder.webp') center / cover no-repeat; }

.mk-process-number {
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--mk-gold);
	border-radius: 50%;
	color: var(--mk-gold);
	font-family: Georgia, serif;
}

.woocommerce ul.products li.product,
.wc-block-grid__product {
	background: var(--mk-white);
	border: 1px solid rgba(74,44,33,.1);
	padding-bottom: 1.1rem;
	transition: transform .25s ease, box-shadow .25s ease;
}
.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(36,21,15,.11);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button { margin-left: 1rem; margin-right: 1rem; }
.woocommerce ul.products li.product .button,
.woocommerce div.product form.cart .button,
.wc-block-components-button {
	border-radius: 2px !important;
	background: var(--mk-brown) !important;
	color: var(--mk-white) !important;
	font-weight: 700 !important;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.woocommerce span.onsale { background: var(--mk-clay); }
.woocommerce-message, .woocommerce-info { border-top-color: var(--mk-clay); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--mk-clay); }

.makolax-lifecycle {
	background: var(--mk-ivory);
	border-color: var(--mk-sand) !important;
	border-left-color: var(--mk-clay) !important;
}

.mk-policy-links a { color: rgba(255,255,255,.74); text-decoration: none; }
.mk-policy-links a:hover { color: var(--mk-white); }
.mk-footer { margin-block-start: 0; }
.mk-footer-nav { position: fixed; left: 50%; bottom: 14px; z-index: 90; display: flex; align-items: stretch; justify-content: center; width: min(680px, calc(100% - 28px)); transform: translateX(-50%); border: 1px solid rgba(216,191,166,.32); border-radius: 18px; background: rgba(36,21,15,.96); box-shadow: 0 14px 42px rgba(18,9,5,.3); backdrop-filter: blur(18px); overflow: hidden; }
.mk-footer-nav a { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 74px; padding: 10px 7px 8px; color: var(--mk-ivory); font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; transition: background-color .18s ease, color .18s ease, transform .18s ease; }
.mk-footer-nav a:hover,.mk-footer-nav a:focus { background: var(--mk-clay); color: var(--mk-white); transform: translateY(-1px); }
.mk-footer-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body { padding-bottom: 86px; }

.mk-whatsapp {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 50;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .78rem 1rem;
	border-radius: 999px;
	background: #1f7a4c;
	box-shadow: 0 8px 28px rgba(0,0,0,.2);
	color: white;
	font-size: .8rem;
	font-weight: 700;
	text-decoration: none;
}

@media (max-width: 781px) {
	.mk-hero { min-height: 620px; }
	.mk-header { padding: 16px 18px !important; }
	.mk-header-inner { flex-wrap: nowrap; }
	.mk-static-nav { display: none; }
	.mk-sticky-search { display: none; }
	.mk-search-trigger { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; padding: .62rem .8rem; border: 1px solid rgba(74,44,33,.18); border-radius: 999px; background: var(--mk-ivory); color: var(--mk-espresso); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
	.mk-search-trigger svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
	.mk-categories-menu { position: static; }
	.mk-category-dropdown { left: 0; right: auto; top: auto; margin-top: .65rem; }
	.mk-footer-nav { bottom: 8px; width: calc(100% - 16px); border-radius: 16px; }
	.mk-footer-nav a { min-width: 0; padding-inline: 3px; font-size: .56rem; }
	.mk-footer > div:first-child { grid-template-columns: 1fr 1fr !important; }
	.mk-trust-strip > .wp-block-group { gap: 1.3rem !important; }
	.mk-category-card { min-height: 240px; }
	.mk-whatsapp span { display: none; }
	.mk-whatsapp { width: 48px; height: 48px; justify-content: center; padding: 0; }
}

@media (max-width: 420px) {
	.mk-search-trigger span { display: none; }
	.mk-search-trigger { width: 42px; height: 42px; justify-content: center; padding: 0; }
	.mk-search-input-row { align-items: stretch; }
	.mk-search-input-row button { padding-inline: .9rem; }
}