/* House of Miskah · the arch look (loads last).
   The logo frames the name in a Mughal arch with a fine gold line. Here every
   dress photo sits in that arch: portrait, rounded top, gold hairline around it.
   Rose (#9A5354, the "Miskah" lettering) is the action colour, gold is for lines only. */

:root {
	--miskah-gold: #C9A97E;      /* arch line: decorative only */
	--miskah-gold-text: #7A5C34; /* gold when it has to be read (5.5:1 on cream) */
	--miskah-rose: #9A5354;
	--miskah-rose-deep: #7E4446;
	--miskah-petal-tint: #F4E4E0;
	--miskah-arch: 999px 999px 6px 6px;
}

/* ---------- Retire the hanging-card thread, string and punched hole ---------- */
.wc-block-product-template > li.wc-block-product::before,
.wc-block-product-template > li.wc-block-product::after,
.miskah-cat::before,
.miskah-cat::after,
.miskah-tag::after,
.miskah-hang::before { content: none !important; display: none !important; }

.miskah-tag,
.wc-block-product-template > li.wc-block-product,
.woocommerce ul.products li.product {
	background: transparent !important;
	box-shadow: none !important;
	margin-top: 0 !important;
	padding: 0 0 0.75rem !important;
	border-radius: 0 !important;
}
.wc-block-product-template > li.wc-block-product:hover,
.woocommerce ul.products li.product:hover { box-shadow: none !important; }
.miskah-hang { padding-top: 0 !important; }
.miskah-tag--hero { animation: none !important; transform: none !important; padding: 0 !important; }
.wc-block-product-template { padding-top: 0.5rem !important; row-gap: 2rem !important; }

/* ---------- Dress photos in the arch ---------- */
.wc-block-product .wc-block-components-product-image,
.woocommerce ul.products li.product a img {
	border: 1px solid var(--miskah-gold);
	border-radius: var(--miskah-arch);
	padding: 5px;
	background: transparent;
}
.wc-block-product .wc-block-components-product-image { margin-bottom: 0.25rem; }
.wc-block-product .wc-block-components-product-image img,
.wp-block-woocommerce-product-image img,
.woocommerce ul.products li.product img {
	aspect-ratio: 3 / 4 !important;
	object-fit: cover;
	border-radius: var(--miskah-arch) !important;
	background: var(--wp--preset--color--linen);
}
.wc-block-product .wc-block-components-product-image a { display: block; border-radius: var(--miskah-arch); }
.wc-block-product .wc-block-components-product-image a:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 4px; }

/* Card text: name in body type, price in the display serif, centred under the arch. */
.wc-block-product .wp-block-post-title { text-align: center; font-size: 0.9375rem !important; }
.wc-block-product .wc-block-components-product-price,
.wc-block-product .wp-block-woocommerce-product-price { color: var(--miskah-rose) !important; font-size: 1.25rem !important; font-weight: 600; }
.wc-block-product .wp-block-button__link,
.wc-block-product .wc-block-components-product-button__button {
	background: transparent !important;
	color: var(--miskah-rose) !important;
	border: 1.5px solid var(--miskah-rose) !important;
}
.wc-block-product .wp-block-button__link:hover,
.wc-block-product .wc-block-components-product-button__button:hover {
	background: var(--miskah-rose) !important;
	color: #fff !important;
}
/* Sale and sold-out badges sit inside the arch, not on its curve. */
.wc-block-product .wc-block-components-product-sale-badge { top: auto !important; bottom: 14px; right: 14px; }

/* ---------- Single product: big arch photo ---------- */
.single-product .woocommerce-product-gallery__image img,
.single-product .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__image img {
	aspect-ratio: 3 / 4 !important;
	object-fit: cover;
	border-radius: var(--miskah-arch) !important;
}
.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	border: 1px solid var(--miskah-gold);
	border-radius: var(--miskah-arch);
	padding: 6px;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: 999px 999px 3px 3px; }
.single-product .wp-block-woocommerce-product-price,
.single-product .woocommerce div.product p.price { color: var(--miskah-rose) !important; font-weight: 600 !important; }

/* Size picker (variable dresses): big, tappable. */
.single-product table.variations { border: 0; margin-bottom: 0.5rem; }
.single-product table.variations th.label { padding: 0 0 0.35rem; font-weight: 600; text-align: left; }
.single-product table.variations td.value select {
	min-height: 48px;
	min-width: 12rem;
	font-size: 16px;
	border-radius: 999px;
	padding: 0 2.25rem 0 1rem;
	border: 1px solid #9A8C82;
	background-color: var(--wp--preset--color--white);
}
.single-product .reset_variations { display: inline-block; margin-top: 0.4rem; font-size: 0.875rem; color: var(--miskah-rose); }
.single-product .woocommerce-variation-price { margin: 0.5rem 0; }

/* ---------- Hero: this week's dress in a tall arch ---------- */
.miskah-tag--hero .miskah-tag__photo {
	border: 1px solid var(--miskah-gold);
	border-radius: var(--miskah-arch);
	padding: 6px;
	max-width: 380px;
	margin-inline: auto !important;
}
.miskah-tag--hero .miskah-tag__photo img,
.miskah-tag--hero .miskah-tag__photo a { border-radius: var(--miskah-arch) !important; }
.miskah-tag--hero .miskah-tag__photo img { aspect-ratio: 3 / 4 !important; object-fit: cover; }
.miskah-tag__label { color: var(--miskah-gold-text) !important; }
.miskah-tag__price { color: var(--miskah-rose) !important; font-weight: 600; }

/* ---------- Headings: the logo's small gold star under section titles ---------- */
h2.wp-block-heading.has-text-align-center::after {
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	margin: 0.7rem auto 0;
	background: var(--miskah-gold);
	transform: rotate(45deg);
}
.miskah-hero__eyebrow,
.miskah-section-sub { color: var(--miskah-gold-text) !important; }

/* ---------- Category tiles: arch-topped ---------- */
.miskah-cat {
	background: var(--wp--preset--color--cream) !important;
	border: 1px solid var(--miskah-gold) !important;
	border-radius: 999px 999px 8px 8px !important;
	padding: 2.25rem 1rem 1.25rem !important;
	box-shadow: none !important;
	margin-top: 0 !important;
}
.miskah-cat--new { background: var(--miskah-petal-tint) !important; }

/* ---------- Steps: small arch-topped cards ---------- */
.miskah-steps li { border-radius: 999px 999px 8px 8px; border-color: var(--miskah-gold); padding-top: 1.25rem; }
.miskah-steps li::before { color: var(--miskah-rose); }

/* ---------- Header wordmark: "House of" in gold over "Miskah" in rose ---------- */
.miskah-wordmark {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
	text-decoration: none !important;
	white-space: nowrap;
}
.miskah-wordmark__small {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--miskah-gold-text);
}
.miskah-wordmark__big {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-weight: 600;
	font-size: 1.875rem;
	color: var(--miskah-rose);
	margin-top: 0.1rem;
}
.miskah-header .wp-block-site-title { display: none; }
.miskah-footer__brand { color: var(--miskah-rose); font-style: italic; letter-spacing: 0.06em !important; text-transform: none !important; }
@media (max-width: 781px) {
	.miskah-wordmark__small { font-size: 0.6875rem; }
	.miskah-wordmark__big { font-size: 1.5rem; }
}

/* Floating chat button and focus ring in the brand colours. */
.miskah-chat { background: var(--miskah-rose) !important; }
:where(a, button, input, select, summary):focus-visible { outline-color: var(--wp--preset--color--ink); }

@media (max-width: 600px) {
	.wc-block-product-template { row-gap: 1.5rem !important; }
	.wc-block-product .wc-block-components-product-image { padding: 4px; }
	.miskah-tag--hero .miskah-tag__photo { max-width: 290px; }
	.miskah-tag--hero .miskah-tag__photo img { aspect-ratio: 4 / 5 !important; }
}

/* Dresses with sizes: the sticky one-row phone bar (built for one-size items) can't fit a size picker,
   so the size form sits in the page; the Order now / Add to bag buttons get full width under it. */
@media (max-width: 600px) {
	.single-product form.variations_form.cart {
		position: static !important;
		display: block !important;
		padding: 0 !important;
		margin: 0.5rem 0 0 !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
	}
	.single-product form.variations_form .woocommerce-variation-add-to-cart {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		align-items: stretch;
	}
	.single-product form.variations_form .woocommerce-variation-add-to-cart .quantity { flex: 0 0 auto; }
	.single-product form.variations_form .single_add_to_cart_button { flex: 1 1 auto; }
	.single-product form.variations_form .miskah-buy-now { flex: 1 1 100%; min-height: 52px; font-size: 1rem !important; }
	.single-product table.variations td.value select { width: 100%; }
	.single-product:has(form.variations_form) { padding-bottom: 0; }
	.single-product:has(form.variations_form) .miskah-chat { bottom: calc(1rem + env(safe-area-inset-bottom)); }
}