/* Mushtaq Fabrics: front-end enhancements and WooCommerce integration. */
:root {
	--mf-border: #e7e5df;
	--mf-muted: #686868;
	--mf-ink: #121212;
	--mf-gold: #a97a32;
	--mf-emerald: #123c31;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-padding-top: 7rem;
}

body {
	overflow-wrap: break-word;
}

.skip-link {
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 99999;
	transform: translateY(-180%);
	background: #fff;
	color: #121212;
	border: 2px solid #121212;
	padding: 0.7rem 1rem;
	font-weight: 700;
}

.skip-link:focus {
	transform: translateY(0);
}

.mf-header {
	position: relative;
	z-index: 30;
	border-bottom: 1px solid var(--mf-border);
	background: rgba(255,255,255,.98);
}

.mf-header__main {
	min-height: 5rem;
}

.mf-header .wp-block-site-logo img {
	max-height: 3.65rem;
	width: auto;
}

.mf-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem;
}

.mf-announcement {
	font-size: .76rem;
	letter-spacing: .02em;
}

.mf-home-hero {
	min-height: min(72vh, 760px);
	isolation: isolate;
	overflow: hidden;
}

.mf-home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 75% 28%, rgba(255,255,255,.22), transparent 20%),
		linear-gradient(125deg, rgba(18,60,49,.94), rgba(18,18,18,.74));
	z-index: -1;
}

.mf-home-hero .wp-block-cover__inner-container {
	width: 100%;
}

.mf-eyebrow {
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: .72rem;
	font-weight: 700;
}

.mf-card {
	height: 100%;
	border: 1px solid var(--mf-border);
	background: #fff;
	transition: transform .2s ease, box-shadow .2s ease;
}

.mf-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 36px rgba(0,0,0,.08);
}

.mf-category-tile {
	min-height: 21rem;
	display: flex;
	align-items: flex-end;
	position: relative;
	overflow: hidden;
	color: #fff;
	background:
		linear-gradient(0deg, rgba(0,0,0,.58), transparent 62%),
		linear-gradient(145deg, #d9c9ad, #745846);
}

.mf-category-tile::after {
	content: "";
	position: absolute;
	width: 54%;
	height: 82%;
	right: 10%;
	top: 10%;
	border-radius: 48% 48% 8% 8%;
	background: linear-gradient(155deg, #efe4d3 0 30%, #6f1f34 30%);
	opacity: .85;
	box-shadow: 0 20px 40px rgba(0,0,0,.16);
}

.mf-category-tile > * {
	position: relative;
	z-index: 2;
}

.mf-category-tile.is-green {
	background:
		linear-gradient(0deg, rgba(0,0,0,.58), transparent 62%),
		linear-gradient(145deg, #9fb5aa, #244d41);
}
.mf-category-tile.is-green::after {
	background: linear-gradient(155deg, #e3d5b9 0 30%, #174a3e 30%);
}

.mf-category-tile.is-dark {
	background:
		linear-gradient(0deg, rgba(0,0,0,.62), transparent 62%),
		linear-gradient(145deg, #909392, #2c2f31);
}
.mf-category-tile.is-dark::after {
	background: linear-gradient(155deg, #ded7c9 0 30%, #22282c 30%);
}

.mf-category-tile.is-rose {
	background:
		linear-gradient(0deg, rgba(0,0,0,.58), transparent 62%),
		linear-gradient(145deg, #d5b0ab, #87574f);
}
.mf-category-tile.is-rose::after {
	background: linear-gradient(155deg, #efd9d1 0 30%, #8b4c43 30%);
}

.mf-promo {
	overflow: hidden;
	min-height: 28rem;
}

.mf-promo-art {
	min-height: 28rem;
	background:
		radial-gradient(circle at 25% 50%, transparent 0 18%, rgba(255,255,255,.28) 18% 19%, transparent 19% 30%, rgba(255,255,255,.22) 30% 31%, transparent 31%),
		linear-gradient(135deg, #a97a32, #ddc496);
}

.mf-post-card {
	height: 100%;
}

.mf-post-card .wp-block-post-featured-image img {
	aspect-ratio: 4/5;
	object-fit: cover;
}

.wp-block-query-pagination {
	gap: .75rem;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .current {
	min-width: 2.75rem;
	min-height: 2.75rem;
	display: inline-grid;
	place-items: center;
	border: 1px solid var(--mf-border);
	text-decoration: none;
}

.wp-block-search__input {
	min-height: 3rem;
	border: 1px solid #cfcfcf;
}

.wp-block-search__button {
	min-height: 3rem;
}

/* WooCommerce */
.woocommerce .woocommerce-breadcrumb {
	color: var(--mf-muted);
	font-size: .82rem;
}

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.4rem;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

.woocommerce ul.products li.product a img {
	margin: 0 0 .8rem;
	aspect-ratio: 3/4;
	object-fit: cover;
	background: #f3f1ec;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: .92rem;
	line-height: 1.4;
	padding: .25rem 0;
}

.woocommerce ul.products li.product .price {
	color: var(--mf-ink);
	font-weight: 700;
	font-size: .88rem;
}

.woocommerce span.onsale {
	min-width: auto;
	min-height: auto;
	line-height: 1;
	border-radius: 0;
	padding: .5rem .65rem;
	background: #8a1538;
	font-size: .72rem;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	border-radius: 0;
	background: var(--mf-ink);
	color: #fff;
	padding: .9rem 1.15rem;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--mf-emerald);
	color: #fff;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--mf-ink);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--mf-gold);
	background: #f8f7f3;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--mf-gold);
}

@media (max-width: 980px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.mf-header__main {
		min-height: 4.25rem;
	}
	.mf-home-hero {
		min-height: 34rem;
	}
	.mf-category-tile {
		min-height: 18rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}