/*
Theme Name: House of Miskah
Theme URI: https://miskahbd.com
Author: House of Miskah
Description: A WooCommerce block theme for House of Miskah dresses. Colours and the arch come from the House of Miskah logo: cream, rose lettering and a gold Mughal arch.
Version: 1.0.1
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: miskah
Tags: e-commerce, block-patterns, full-site-editing, custom-colors
*/

/* Most styling lives in theme.json. This file holds the few things theme.json can't express. */

:root {
	--miskah-radius: 14px;
	--miskah-shadow: 0 1px 2px rgb(38 38 39 / 0.04), 0 8px 24px -12px rgb(38 38 39 / 0.12);
}

/* ---------- Header ---------- */

.miskah-topbar {
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
}
.miskah-topbar p { margin: 0; }

.miskah-header {
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--blush);
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .miskah-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .miskah-header { top: 0; position: relative; } }

.miskah-header .wp-block-site-title a { white-space: nowrap; }

.miskah-header__icons { gap: 0.25rem !important; }
.miskah-header__icons .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--ink);
	padding: 0.5rem;
	border: 0;
}
.miskah-header__icons .wp-block-search__button svg { fill: currentColor; }

@media (max-width: 781px) {
	.miskah-header .wp-block-site-title { font-size: 1.25rem !important; letter-spacing: 0.25em !important; }
	/* Keep the hamburger first so the title stays centred-ish and icons stay on the right. */
	.miskah-header__row { gap: 0.5rem !important; }
	.miskah-header .wp-block-navigation { order: -1; }
}

/* ---------- Hero ---------- */

.miskah-hero__eyebrow {
	font-size: 0.8125rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sage-deep);
}
.miskah-hero__mark img {
	width: 100%;
	max-width: 420px;
	height: auto;
	margin-inline: auto;
	display: block;
	/* Fade the photo's edges into the page so no square outline shows. */
	-webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%);
	mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%);
}

/* ---------- Category cards ---------- */

/* Stretch the cards to fill the row instead of leaving empty grid tracks. */
.miskah-cats.wp-block-group.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}
@media (max-width: 600px) {
	.miskah-cats.wp-block-group.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.miskah-cat { min-height: 7.5rem; }
	.miskah-cat--new { grid-column: 1 / -1; }
}

.miskah-cat {
	position: relative;
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--miskah-radius);
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	min-height: 9rem;
}
.miskah-cat:hover {
	border-color: var(--wp--preset--color--sage);
	box-shadow: var(--miskah-shadow);
	transform: translateY(-2px);
}
.miskah-cat h3 { margin: 0; }
.miskah-cat h3 a { text-decoration: none; color: inherit; }
/* Whole card is clickable via the heading link. */
.miskah-cat h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.miskah-cat h3 a:focus-visible { outline: none; }
.miskah-cat:has(a:focus-visible) { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 3px; }
.miskah-cat p { margin: 0.25rem 0 0; color: var(--wp--preset--color--muted); font-size: 0.875rem; }

.miskah-cat--new { background: var(--wp--preset--color--sage-tint); border-color: var(--wp--preset--color--sage); }
.miskah-badge {
	display: inline-block;
	font-size: 0.6875rem !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: var(--wp--preset--color--sage-deep);
	color: var(--wp--preset--color--white) !important;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	margin-bottom: 0.5rem !important;
}

@media (prefers-reduced-motion: reduce) {
	.miskah-cat, .miskah-cat:hover { transition: none; transform: none; }
}

/* ---------- Trust strip ---------- */

.miskah-trust h3 { font-size: 1.25rem; margin-bottom: 0.25rem; }
.miskah-trust p { margin: 0; color: var(--wp--preset--color--muted); font-size: 0.9375rem; }

/* ---------- WooCommerce product cards (block + classic) ---------- */

.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img,
.woocommerce ul.products li.product img {
	border-radius: var(--miskah-radius);
	background: var(--wp--preset--color--linen);
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.wc-block-components-product-price,
.wp-block-woocommerce-product-price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	color: var(--wp--preset--color--ink) !important;
	font-weight: 500;
}
.woocommerce ul.products li.product .price del,
.wc-block-components-product-price del { color: var(--wp--preset--color--muted); }

.wc-block-components-product-sale-badge,
.woocommerce span.onsale {
	background: var(--wp--preset--color--sage-deep) !important;
	color: var(--wp--preset--color--white) !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
}

/* Classic WooCommerce buttons (cart, my-account, shortcodes) follow the theme button. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--wp--preset--color--sage-deep);
	color: var(--wp--preset--color--white);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	letter-spacing: 0.04em;
	padding: 0.8em 1.6em;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* Form fields */
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="password"], input[type="number"], select, textarea {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	padding: 0.65rem 0.8rem;
	font: inherit;
	color: var(--wp--preset--color--ink);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--sage-deep);
	outline-offset: 1px;
}

/* ---------- Footer ---------- */

.miskah-footer { border-top: 1px solid var(--wp--preset--color--line); }
.miskah-footer h2 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.miskah-footer ul { list-style: none; padding: 0; margin: 0; }
.miskah-footer li { margin: 0.35rem 0; }
.miskah-footer a { text-decoration: none; color: var(--wp--preset--color--ink); }
.miskah-footer a:hover { text-decoration: underline; }
.miskah-footer__brand { font-family: var(--wp--preset--font-family--heading); font-size: 1.5rem; letter-spacing: 0.35em; text-transform: uppercase; }

/* =====================================================================
   Phone layout (most House of Miskah shoppers are on mobile)
   ===================================================================== */

/* Menu overlay sits above everything (product zoom icon, sale badges). */
.wp-block-navigation__responsive-container.is-menu-open { z-index: 100000; }
/* The sticky header creates its own stacking layer, so lift the whole header while the menu is open. */
.miskah-header:has(.is-menu-open),
.wp-site-blocks > header:has(.is-menu-open) { z-index: 100000 !important; position: relative; }

@media (max-width: 781px) {
	/* Mobile menu: big, left-aligned tap targets. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: flex-start !important;
		padding-top: 3.5rem;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: flex-start !important;
		gap: 0 !important;
		width: 100%;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
		align-items: flex-start !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--heading);
		font-size: 1.5rem;
		padding: 0.6rem 0 !important;
		width: 100%;
		border-bottom: 1px solid var(--wp--preset--color--line);
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		padding: 0 0 0.5rem 1rem !important;
		gap: 0 !important;
		width: 100%;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--body);
		font-size: 1.0625rem;
		padding: 0.45rem 0 !important;
		border-bottom: 0;
		color: var(--wp--preset--color--muted);
	}
}

@media (max-width: 600px) {
	/* Top bar: one line. */
	.miskah-topbar { font-size: 0.75rem; }
	.miskah-topbar__extra { display: none; }

	/* Hero: text and buttons only, so products appear sooner. */
	.miskah-hero { padding-top: 2rem !important; padding-bottom: 2rem !important; }
	.miskah-hero .wp-block-column:has(.miskah-hero__mark) { display: none; }
	.miskah-hero h1 { font-size: 2.5rem !important; margin-top: 0.5rem; }
	.miskah-hero .wp-block-buttons { flex-wrap: nowrap; gap: 0.5rem; }
	.miskah-hero .wp-block-button__link { padding: 0.8rem 1.1rem; font-size: 0.8125rem; letter-spacing: 0.05em; white-space: nowrap; }

	/* Section spacing: tighter on small screens. */
	.wp-block-group.alignfull[style*="spacing--60"] { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }

	/* Product cards in the 2-column grid. */
	.wc-block-product-template { gap: 1.25rem 0.75rem !important; }
	.wc-block-product .wp-block-post-title,
	.wc-block-product h3 { font-size: 1rem !important; line-height: 1.3; margin: 0.6rem 0 0.15rem !important; }
	.wc-block-product .wp-block-woocommerce-product-price { font-size: 0.9375rem; }
	.wc-block-product .wp-block-button__link,
	.wc-block-product .wc-block-components-product-button__button {
		width: 100%;
		padding: 0.65rem 0.5rem !important;
		font-size: 0.75rem !important;
		letter-spacing: 0.05em;
		min-height: 44px;
	}
	.wc-block-product .wp-block-woocommerce-product-button,
	.wc-block-product .wc-block-components-product-button { width: 100%; }

	/* Category / shop page header row (result count + sorting). */
	.woocommerce-result-count, .wc-block-product-results-count { font-size: 0.875rem; }

	/* Product page: sticky add-to-cart bar at the bottom of the screen. */
	.single-product form.cart,
	.single-product .wp-block-add-to-cart-form form.cart {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 60;
		display: flex;
		gap: 0.5rem;
		margin: 0 !important;
		padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
		background: var(--wp--preset--color--cream);
		border-top: 1px solid var(--wp--preset--color--line);
		box-shadow: 0 -6px 20px -12px rgb(38 38 39 / 0.25);
	}
	.single-product form.cart .quantity input { height: 48px; width: 4rem; }
	.single-product form.cart button[type="submit"],
	.single-product form.cart .single_add_to_cart_button { flex: 1; min-height: 48px; }
	.single-product { padding-bottom: 5rem; }
	.single-product .wp-block-post-title,
	.single-product h1.product_title { font-size: 2rem !important; }
}

/* =====================================================================
   Classic checkout (name, phone, address, city)
   ===================================================================== */
.miskah-hidden { display: none !important; }
.woocommerce-checkout .woocommerce-billing-fields h3 { font-size: 1.5rem; margin-bottom: 0.75rem; }
.woocommerce-checkout form .form-row { margin: 0 0 1rem; padding: 0; }
.woocommerce-checkout form .form-row label { display: block; font-weight: 500; margin-bottom: 0.35rem; }
.woocommerce-checkout form .form-row .input-text,
.woocommerce-checkout form .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
	width: 100%;
	min-height: 48px;
	padding: 0.65rem 0.9rem;
	font-size: 16px; /* stops iOS zooming into the field */
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--white);
	box-sizing: border-box;
}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered { line-height: 1.6; padding: 0; }
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow { height: 46px; }
.woocommerce-checkout form .form-row .input-text:focus,
.woocommerce-checkout form .form-row select:focus { outline: 2px solid var(--wp--preset--color--sage-deep); outline-offset: 1px; }
.woocommerce-checkout #order_review_heading { font-size: 1.5rem; margin-top: 1.5rem; }
.woocommerce-checkout #place_order {
	width: 100%;
	min-height: 52px;
	font-size: 1.0625rem;
	border-radius: 999px;
	background: var(--wp--preset--color--sage-deep);
	color: var(--wp--preset--color--white);
}
@media (max-width: 781px) {
	.woocommerce-checkout .col2-set .col-1,
	.woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; }
	.woocommerce-checkout .woocommerce-checkout-review-order-table { font-size: 0.9375rem; }
}

/* =====================================================================
   Storefront best-practice additions (1.0.5)
   ===================================================================== */

/* WCAG contrast: small eyebrow text and form-field borders. */
.miskah-hero__eyebrow { color: #7E4446; }
.woocommerce form .input-text,
.woocommerce form select,
.woocommerce-checkout form .form-row .input-text,
.woocommerce-checkout form .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single,
.wp-block-search__input,
.quantity input.qty { border-color: #9A8C82 !important; }

/* Category chips: visible category links on phones (no need to open the menu). */
.miskah-chips { display: none; }
@media (max-width: 781px) {
	.miskah-chips {
		display: block;
		border-bottom: 1px solid var(--wp--preset--color--line);
		background: var(--wp--preset--color--cream);
	}
	.miskah-chips__row {
		display: flex;
		gap: 0.5rem;
		margin: 0;
		padding: 0.6rem 1rem;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scroll-padding-inline: 1rem;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.miskah-chips__row::-webkit-scrollbar { display: none; }
	.miskah-chips__row a {
		flex: 0 0 auto;
		scroll-snap-align: start;
		display: inline-flex;
		align-items: center;
		min-height: 40px;
		padding: 0 1rem;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 999px;
		background: var(--wp--preset--color--white);
		color: var(--wp--preset--color--ink);
		font-size: 0.9375rem;
		text-decoration: none;
		white-space: nowrap;
	}
	.miskah-chips__row a:active { background: var(--wp--preset--color--sage-tint); }
}

/* Product page: Order now + delivery/payment info. */
.single-product form.cart { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: stretch; }
.single-product form.cart .single_add_to_cart_button {
	background: transparent !important;
	color: var(--wp--preset--color--sage-deep) !important;
	border: 1.5px solid var(--wp--preset--color--sage-deep) !important;
}
.miskah-buy-now.button {
	background: var(--wp--preset--color--sage-deep) !important;
	color: var(--wp--preset--color--white) !important;
	border: 1.5px solid var(--wp--preset--color--sage-deep) !important;
	border-radius: 999px;
	padding: 0.75rem 1.5rem;
	font-weight: 500;
	cursor: pointer;
}
.miskah-buy-info {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 1rem 1.1rem;
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	font-size: 0.9375rem;
	line-height: 1.5;
}
.miskah-buy-info li { display: grid; grid-template-columns: 5.75rem 1fr; gap: 0.5rem; }
.miskah-buy-info li + li { margin-top: 0.5rem; }
.miskah-buy-info strong { font-weight: 500; }
.miskah-buy-info a { color: var(--wp--preset--color--sage-deep); }

/* Floating Messenger button. */
.miskah-chat {
	position: fixed;
	right: 1rem;
	bottom: calc(1rem + env(safe-area-inset-bottom));
	z-index: 55;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wp--preset--color--sage-deep);
	color: var(--wp--preset--color--white);
	box-shadow: 0 6px 18px -6px rgb(38 38 39 / 0.45);
}
.miskah-chat:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 3px; }
.wp-block-navigation__responsive-container.is-menu-open ~ .miskah-chat,
body:has(.is-menu-open) .miskah-chat { display: none; }

/* Trust strip link. */
.miskah-trust h3 a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }

@media (max-width: 600px) {
	/* Card buttons: sentence case, readable size. */
	.wc-block-product .wp-block-button__link,
	.wc-block-product .wc-block-components-product-button__button {
		font-size: 0.875rem !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
	}

	/* Related products: 2 per row instead of one tall card per row. */
	.single-product .wc-block-product-template.is-flex-container,
	.single-product ul.wc-block-product-template {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem 0.75rem !important;
	}
	.single-product .wc-block-product-template.is-flex-container > li { width: auto !important; margin: 0 !important; }

	/* Sticky bar: quantity + Add to cart + Order now on one row. */
	.single-product form.cart { flex-wrap: nowrap; }
	.single-product form.cart .single_add_to_cart_button,
	.single-product form.cart .miskah-buy-now {
		flex: 1 1 0;
		min-height: 48px;
		padding: 0.5rem 0.6rem !important;
		font-size: 0.9375rem !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
		white-space: nowrap;
	}
	.single-product form.cart .quantity input { width: 3.25rem; }

	/* Keep the chat button above the sticky bar. */
	.single-product .miskah-chat { bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
}

/* =====================================================================
   1.1.0 · Display-card look
   House of Miskah's earrings arrive pinned to small punched display cards.
   Products, categories and the hero pick are drawn as those cards,
   hanging by a fine sage thread on the logo blush.
   ===================================================================== */

:root {
	--miskah-card: #FFFAF3;
	--miskah-thread: #C9A97E;
	--miskah-col-gap: 1.25rem;
	--miskah-drop: 22px; /* space above each card for its string */
	--miskah-card-shadow: 0 1px 0 var(--wp--preset--color--line), 0 10px 24px -18px rgb(38 38 39 / 0.45);
	/* The punched hole near the top of every card. */
	--miskah-hole: radial-gradient(circle at 50% 13px, #ECDCCB 0 1.5px, var(--wp--preset--color--blush) 2.5px 4.25px, #E3D2C0 4.75px 5px, transparent 5.5px);
}

.miskah-tag,
.wc-block-product-template > li.wc-block-product,
.woocommerce ul.products li.product,
.miskah-cat {
	position: relative;
	margin-top: var(--miskah-drop);
	padding: 26px 10px 14px;
	background: var(--miskah-hole) no-repeat, var(--miskah-card);
	border: 0;
	border-radius: 10px;
	box-shadow: var(--miskah-card-shadow);
}

/* The thread runs along the top of each row: each card draws its share, gaps included. */
.wc-block-product-template > li.wc-block-product::before,
.miskah-cat::before {
	content: "";
	position: absolute;
	top: calc(var(--miskah-drop) * -1 + 4px);
	left: calc(var(--miskah-col-gap) / -2 - 1px);
	right: calc(var(--miskah-col-gap) / -2 - 1px);
	height: 1px;
	background: var(--miskah-thread);
	pointer-events: none;
}
/* The string from the thread down through the hole. */
.miskah-tag::after,
.wc-block-product-template > li.wc-block-product::after,
.miskah-cat::after {
	content: "";
	position: absolute;
	top: calc(var(--miskah-drop) * -1 + 4px);
	left: 50%;
	width: 1px;
	height: calc(var(--miskah-drop) + 6px);
	background: var(--miskah-thread);
	pointer-events: none;
}

/* Product cards */
.wc-block-product-template.is-flex-container,
.wc-block-product-template {
	column-gap: var(--miskah-col-gap) !important;
	row-gap: 1.25rem !important;
}
.wc-block-product-template > li.wc-block-product { display: flex; flex-direction: column; transition: box-shadow 0.2s ease; }
.wc-block-product-template > li.wc-block-product > .wp-block-woocommerce-product-button { margin-top: auto; padding-top: 0.4rem; }
.wc-block-product-template > li.wc-block-product:hover,
.woocommerce ul.products li.product:hover { box-shadow: 0 1px 0 var(--wp--preset--color--line), 0 16px 28px -18px rgb(38 38 39 / 0.55); }

.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img,
.woocommerce ul.products li.product img { border-radius: 6px; }

.wc-block-product .wp-block-post-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem !important;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	margin: 0.7rem 0.25rem 0.1rem !important;
}
.wc-block-product .wp-block-post-title a { color: var(--wp--preset--color--ink); }

.wc-block-product .wc-block-components-product-price,
.wc-block-product .wp-block-woocommerce-product-price,
.woocommerce ul.products li.product .price {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.1875rem !important;
	font-weight: 400;
}

.wc-block-product .wp-block-woocommerce-product-button,
.wc-block-product .wc-block-components-product-button { width: 100%; margin-top: 0.4rem; }
.wc-block-product .wp-block-button__link,
.wc-block-product .wc-block-components-product-button__button {
	width: 100%;
	min-height: 44px;
	padding: 0.6rem 0.75rem !important;
	font-size: 0.9375rem !important;
	font-weight: 600;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
.wc-block-product .added_to_cart { display: block; margin-top: 0.4rem; font-size: 0.875rem; color: var(--wp--preset--color--sage-deep); }

/* Category cards: same card, centred. */
.miskah-cats.wp-block-group.is-layout-grid { gap: 1.25rem var(--miskah-col-gap); }
.miskah-cat {
	align-items: center !important;
	justify-content: center !important;
	text-align: center;
	min-height: 8.5rem;
	gap: 0.35rem !important;
	padding: 30px 1rem 1.1rem !important;
	transition: box-shadow 0.2s ease;
}
.miskah-cat:hover { transform: none; box-shadow: 0 1px 0 var(--wp--preset--color--line), 0 16px 28px -18px rgb(38 38 39 / 0.55); }
.miskah-cat h3 { font-size: 1.5rem; }
.miskah-cat--new { background: var(--miskah-hole) no-repeat, var(--wp--preset--color--sage-tint); }

/* Hero: tagline beside "This week's pair". */
.miskah-hero { overflow-x: clip; }
.miskah-hang { position: relative; padding-top: var(--miskah-drop); max-width: 420px; margin-inline: auto; }
.miskah-hang::before {
	content: "";
	position: absolute;
	top: 4px;
	left: -2rem;
	right: -2rem;
	height: 1px;
	background: var(--miskah-thread);
}
.miskah-tag--hero {
	margin-top: 0;
	padding: 30px 16px 20px;
	text-align: center;
	transform-origin: 50% calc(var(--miskah-drop) * -1 + 4px);
}
.miskah-tag--hero > * { margin-block: 0; }
.miskah-tag__photo { margin: 0 !important; }
.miskah-tag__photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--wp--preset--color--linen); }
.miskah-tag__label {
	margin-top: 1rem !important;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #7E4446;
}
.miskah-tag__title { margin-top: 0.25rem !important; font-size: clamp(1.75rem, 6vw, 2.25rem); }
.miskah-tag__title a { color: inherit; text-decoration: none; }
.miskah-tag__note { margin: 0.5rem auto 1.1rem !important; max-width: 32ch; color: var(--wp--preset--color--muted); }
.miskah-tag__price { color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--heading); font-size: 1.1875rem; }
.miskah-tag--hero .wp-block-buttons { gap: 0.5rem; }
.miskah-tag--hero .wp-block-button__link { white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
	.miskah-tag--hero { animation: miskah-sway 7s ease-in-out infinite; }
}
@keyframes miskah-sway {
	0%, 100% { transform: rotate(-0.8deg); }
	50% { transform: rotate(0.8deg); }
}

/* How ordering works: three steps. */
.miskah-trust h2 { margin-bottom: 0; }
.miskah-steps {
	list-style: none;
	counter-reset: miskah-step;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.6rem;
	max-width: 760px;
	margin: 1.25rem auto 0 !important;
	padding: 0;
}
.miskah-steps li {
	counter-increment: miskah-step;
	background: var(--miskah-card);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 0.9rem 0.6rem;
	text-align: center;
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var(--wp--preset--color--muted);
}
.miskah-steps li::before {
	content: counter(miskah-step);
	display: block;
	margin-bottom: 0.2rem;
	font: 400 1.625rem/1.1 var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--sage-deep);
}
.miskah-trust__note { margin-top: 1rem !important; color: var(--wp--preset--color--muted); font-size: 0.9375rem; }
.miskah-trust__note a { color: var(--wp--preset--color--sage-deep); white-space: nowrap; }

/* Product page details on the card colour. */
.miskah-buy-info { background: var(--miskah-card); }
.single-product .woocommerce-product-gallery img,
.single-product .wp-block-woocommerce-product-image-gallery img { border-radius: 10px; }
.miskah-chips { background: var(--wp--preset--color--blush); }
.miskah-chips__row a { background: var(--miskah-card); }

@media (max-width: 600px) {
	:root { --miskah-col-gap: 0.75rem; }
	.wc-block-product-template { gap: 1rem var(--miskah-col-gap) !important; }
	.wc-block-product-template > li.wc-block-product { padding: 24px 8px 10px; }

	/* Hero: short headline, then the hanging card. */
	.miskah-hero { padding-top: 1.25rem !important; padding-bottom: 2rem !important; }
	.miskah-hero .wp-block-columns { gap: 0.75rem !important; }
	.miskah-hero__eyebrow,
	.miskah-hero__lead,
	.miskah-hero__shop { display: none !important; }
	.miskah-hero__intro { text-align: center; }
	.miskah-hero h1 { font-size: 1.875rem !important; margin: 0; }
	.miskah-hang::before { left: -1rem; right: -1rem; }
	.miskah-tag--hero { padding: 28px 12px 16px; }
	.miskah-tag--hero .miskah-tag__photo img { aspect-ratio: 5 / 4; }
	.miskah-tag__label { margin-top: 0.75rem !important; }
	.miskah-tag__note { margin: 0.35rem auto 0.9rem !important; font-size: 0.9375rem; }
	.miskah-hero .miskah-tag--hero .wp-block-button__link {
		padding: 0.75rem 1.1rem;
		font-size: 0.9375rem;
		letter-spacing: 0;
	}

	.miskah-cat { min-height: 7rem; }
	.miskah-cat h3 { font-size: 1.3rem; }
	.miskah-steps { gap: 0.4rem; }
	.miskah-steps li { font-size: 0.8125rem; padding: 0.8rem 0.35rem; }
}

@media (prefers-reduced-motion: reduce) {
	.wc-block-product-template > li.wc-block-product, .miskah-cat { transition: none; }
}
/* Breathing room between a section heading and the thread below it. */
.wc-block-product-template { padding-top: 0.75rem !important; }
.miskah-cats.wp-block-group { margin-top: 1.5rem !important; }
.single-product .wp-block-woocommerce-product-price .wc-block-components-product-price,
.single-product .wp-block-woocommerce-product-price,
.woocommerce div.product p.price {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.625rem !important;
	font-weight: 400;
}