/* House of Miskah shop styles (1.2.0). Loaded after style.css.
   Listings (shop, category, search) and the product page. */

/* ---------- Product page: gallery ---------- */

/* Show the main photo at once instead of waiting for the slider script (faster LCP). */
.single-product .woocommerce-product-gallery.miskah-gallery { opacity: 1 !important; }
.single-product .woocommerce-product-gallery { position: relative; margin: 0; }
.single-product .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain; /* square box, but never crop the product (dresses are often portrait) */
	background: var(--miskah-card, #FFFAF3);
}
.single-product .woocommerce-product-gallery .flex-viewport { border-radius: 10px; }

/* Zoom / full-screen trigger: a real 44px target.
   Selector matches woocommerce.css's own (.woocommerce div.product div.images ...) so it wins. */
.single-product .woocommerce.product div.images .woocommerce-product-gallery__trigger {
	top: 0.75rem;
	right: 0.75rem;
	z-index: 5;
	width: 44px;
	height: 44px;
	padding: 0;
	box-sizing: content-box;
	border-radius: 50%;
	background: var(--miskah-card, #FFFAF3);
	box-shadow: 0 2px 8px -2px rgb(38 38 39 / 0.3);
}
/* Re-centre WooCommerce's drawn magnifier inside the bigger circle. */
.single-product .woocommerce.product div.images .woocommerce-product-gallery__trigger::before { top: 13px; left: 13px; }
.single-product .woocommerce.product div.images .woocommerce-product-gallery__trigger::after { top: 23px; left: 26px; }
.single-product .woocommerce-product-gallery__trigger:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 2px; }

/* Thumbnails: one tidy row under the photo, scrolls sideways if there are many. */
.single-product .woocommerce.product div.images .flex-control-thumbs {
	display: flex;
	gap: 0.5rem;
	margin: 0.6rem 0 0;
	padding: 0 0 0.25rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar { display: none; }
.single-product .woocommerce-product-gallery .flex-control-thumbs li {
	flex: 0 0 64px;
	width: 64px !important;
	float: none !important;
	margin: 0 !important;
	scroll-snap-align: start;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 6px;
	border: 1.5px solid transparent;
	opacity: 0.6;
	cursor: pointer;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.single-product .woocommerce-product-gallery .flex-control-thumbs img:hover {
	opacity: 1;
	border-color: var(--wp--preset--color--sage-deep);
}

/* ---------- Product page: summary ---------- */

.single-product .wp-block-post-title,
.single-product h1.product_title {
	line-height: 1.15;
	margin-bottom: 0.4rem !important;
	overflow-wrap: anywhere;
}
.single-product .wp-block-post-excerpt { margin-top: 0.75rem; }
.single-product .wp-block-post-excerpt__excerpt {
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
}

/* Stock: real WooCommerce stock text, made easy to see. */
.single-product .stock {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0.75rem 0 0.9rem;
	font-size: 0.9375rem;
	font-weight: 500;
}
.single-product .stock::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}
.single-product .stock.in-stock { color: var(--wp--preset--color--sage-deep); }
.single-product .stock.available-on-backorder { color: var(--wp--preset--color--muted); }
.single-product .stock.out-of-stock { color: #9A3B2E; } /* 6.6:1 on the card colour */

.miskah-soldout {
	margin: 0 0 1rem;
	padding: 0.9rem 1rem;
	background: var(--miskah-card, #FFFAF3);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	font-size: 0.9375rem;
	line-height: 1.5;
}
.miskah-soldout__link {
	display: inline-block;
	padding: 0.35rem 0;
	color: var(--wp--preset--color--sage-deep);
	font-weight: 500;
	text-underline-offset: 3px;
}

/* Quantity box: a proper 48px control. */
.single-product form.cart .quantity input.qty {
	min-height: 48px;
	border: 1px solid #8A8079;
	border-radius: 999px;
	background: var(--miskah-card, #FFFAF3);
	text-align: center;
	font: inherit;
	font-weight: 500;
	-moz-appearance: textfield;
}
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button,
.single-product form.cart .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.single-product form.cart button:focus-visible,
.single-product form.cart input:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

/* Desktop: buttons a comfortable size, side by side. */
@media (min-width: 601px) {
	.single-product form.cart { margin-bottom: 0; }
	.single-product form.cart .quantity input.qty { width: 4.5rem; }
	.single-product form.cart .single_add_to_cart_button,
	.single-product form.cart .miskah-buy-now { flex: 1 1 10rem; min-height: 50px; }
}

/* Delivery / payment box: links get a full-height target. */
.miskah-buy-info a { display: inline-block; padding: 0.2rem 0; text-underline-offset: 3px; }

.single-product .wp-block-woocommerce-product-meta { margin-top: 1rem; font-size: 0.875rem; color: var(--wp--preset--color--muted); }
.single-product .wp-block-woocommerce-product-meta a { color: var(--wp--preset--color--sage-deep); }

/* ---------- Product page: details tabs ---------- */

.single-product .woocommerce-tabs { margin-top: 2rem; }
.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 0.5rem;
	margin: 0 0 1rem !important;
	padding: 0 !important;
	list-style: none;
	border-bottom: 1px solid var(--wp--preset--color--line);
	overflow-x: auto;
}
.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs::after,
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.single-product .woocommerce-tabs ul.tabs li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}
.single-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.75rem 0.25rem !important;
	min-height: 44px;
	margin-right: 1rem;
	color: var(--wp--preset--color--muted) !important;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}
.single-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--ink) !important;
	border-bottom-color: var(--wp--preset--color--sage-deep);
}
.single-product .woocommerce-tabs .panel {
	max-width: 42rem;
	font-size: 1rem;
	line-height: 1.65;
}
.single-product .woocommerce-tabs table.shop_attributes { width: 100%; border-collapse: collapse; }
.single-product .woocommerce-tabs table.shop_attributes th,
.single-product .woocommerce-tabs table.shop_attributes td {
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: left;
	font-weight: 400;
}
.single-product .woocommerce-tabs table.shop_attributes th { width: 40%; color: var(--wp--preset--color--muted); }
.single-product .woocommerce-tabs table.shop_attributes p { margin: 0; }

/* Related products heading. */
.single-product .wp-block-woocommerce-product-collection > h2.wp-block-heading {
	font-size: clamp(1.5rem, 4vw, 2rem);
	margin-top: 2.5rem;
}

/* ---------- Listings: shop, category, search ---------- */

.woocommerce-breadcrumb { color: var(--wp--preset--color--muted); overflow-wrap: anywhere; }
.woocommerce-breadcrumb a { color: var(--wp--preset--color--muted); text-underline-offset: 3px; }

.post-type-archive-product .wp-block-query-title,
.tax-product_cat .wp-block-query-title,
.tax-product_tag .wp-block-query-title,
.woocommerce-products-header__title {
	margin-bottom: 0.25rem !important;
	line-height: 1.1;
}
.wp-block-term-description,
.wc-block-term-description,
.term-description {
	max-width: 40rem;
	margin: 0.25rem 0 1rem;
	color: var(--wp--preset--color--muted);
	font-size: 1rem;
	line-height: 1.6;
}
.wp-block-term-description p,
.term-description p { margin: 0 0 0.5rem; }

/* Count + sorting row. */
.woocommerce-result-count {
	margin: 0 !important;
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
}
.woocommerce-ordering { margin: 0 !important; }
.woocommerce-ordering select.orderby {
	min-height: 44px;
	max-width: 100%;
	padding: 0.5rem 2.25rem 0.5rem 1rem;
	border: 1px solid #8A8079;
	border-radius: 999px;
	background: var(--miskah-card, #FFFAF3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23262627' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 0.9rem center;
	-webkit-appearance: none;
	appearance: none;
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: 0.9375rem;
	cursor: pointer;
}
.woocommerce-ordering select.orderby:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 2px; }

/* Product images keep their square box before they load: no layout shift. */
.wc-block-product .wc-block-components-product-image img,
.wc-block-product .wp-block-woocommerce-product-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: auto;
	background: var(--wp--preset--color--sage-tint);
}

/* Titles: up to two lines so every card in a row lines up. */
.wc-block-product .wp-block-post-title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-decoration: none;
}
.wc-block-product .wp-block-post-title a:focus-visible,
.wc-block-product .wc-block-components-product-image a:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}
.wc-block-product .wc-block-components-product-button__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

/* Pagination: big enough to tap. */
.wp-block-query-pagination,
.wc-block-pagination,
.woocommerce-pagination { margin-top: 2rem; gap: 0.25rem; justify-content: center; }
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers,
.woocommerce-pagination .page-numbers li a,
.woocommerce-pagination .page-numbers li span {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.5rem;
	border-radius: 999px;
}
.wp-block-query-pagination .page-numbers.current { background: var(--wp--preset--color--sage-tint); color: var(--wp--preset--color--ink); }

/* Empty collection / no search results. */
.miskah-empty {
	max-width: 32rem;
	margin: 1.5rem auto 2rem;
	padding: 2rem 1.25rem;
	text-align: center;
	background: var(--miskah-card, #FFFAF3);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
}
.miskah-empty__title { margin: 0 0 0.5rem; font-size: 1.625rem; }
.miskah-empty__text { margin: 0 0 1.25rem; color: var(--wp--preset--color--muted); }
.miskah-empty__actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; justify-content: center; align-items: center; margin: 0; }
.miskah-empty__shop {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.6rem 1.4rem;
	border-radius: 999px;
	background: var(--wp--preset--color--sage-deep);
	color: var(--wp--preset--color--white);
	text-decoration: none;
	font-weight: 500;
}
.miskah-empty__chat {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--sage-deep);
	font-weight: 500;
	text-underline-offset: 3px;
}

/* ---------- Phones ---------- */

@media (max-width: 600px) {
	/* Gallery runs edge to edge so the photo is as big as possible. */
	.single-product .wp-block-woocommerce-product-image-gallery {
		margin-left: calc(-1 * var(--wp--style--root--padding-left, 1rem));
		margin-right: calc(-1 * var(--wp--style--root--padding-right, 1rem));
	}
	.single-product .woocommerce-product-gallery .flex-viewport,
	.single-product .woocommerce-product-gallery__image img,
	.single-product .wp-block-woocommerce-product-image-gallery img { border-radius: 0; }
	.single-product .woocommerce.product div.images .flex-control-thumbs { padding-left: var(--wp--style--root--padding-left, 1rem); padding-right: var(--wp--style--root--padding-right, 1rem); }

	.single-product .wp-block-columns.alignwide { gap: 1rem !important; }
	.single-product .wp-block-post-title,
	.single-product h1.product_title { font-size: 1.75rem !important; }

	/* Sticky bar: a quantity box that still fits beside two buttons at 360px. */
	.single-product form.cart .quantity input.qty { width: 3rem; padding: 0; }

	/* Count and sorting on one line; the select may shrink, never overflow. */
	.wp-block-group.is-content-justification-space-between:has(.woocommerce-ordering) { gap: 0.75rem; align-items: center; }
	.woocommerce-ordering { min-width: 0; flex: 0 1 auto; }
	.woocommerce-ordering select.orderby { width: 100%; font-size: 0.875rem; padding-left: 0.8rem; }
	.woocommerce-result-count { font-size: 0.875rem; white-space: nowrap; }

	/* Two cards per row on every listing. */
	:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .search-results, .single-product) .wp-block-woocommerce-product-collection .wc-block-product-template.is-flex-container {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .search-results, .single-product) .wp-block-woocommerce-product-collection .wc-block-product-template.is-flex-container > li { width: auto !important; margin: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
	.single-product .woocommerce-product-gallery .flex-control-thumbs img { transition: none; }
	.single-product .woocommerce-product-gallery .flex-viewport { transition: none !important; }
	/* Slider moves instantly (a near-zero duration still fires transitionend, which the slider waits for). */
	.single-product .woocommerce-product-gallery__wrapper { transition-duration: 0.01ms !important; }
}

/* ---------- Product page: "Also in:" other colours of the same design ---------- */
.miskah-also-in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0.75rem 0 1rem;
}
.miskah-also-in__label {
	color: var(--wp--preset--color--muted, #6E5F5B);
	font-size: 0.9375rem;
	margin-right: 0.25rem;
}
.miskah-also-in__pill {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1rem;
	border: 1px solid var(--wp--preset--color--line, #E6DCD4);
	border-radius: 999px;
	background: var(--miskah-card, #FFFAF3);
	color: var(--wp--preset--color--ink, #2E2426);
	font-size: 0.9375rem;
	text-decoration: none;
}
.miskah-also-in__pill:hover { border-color: var(--wp--preset--color--sage, #9A5354); }
.miskah-also-in__pill:active { background: var(--wp--preset--color--sage-tint, #F7ECE9); }
.miskah-also-in__pill:focus-visible {
	outline: 2px solid var(--miskah-focus, #2E2426);
	outline-offset: 3px;
}

/* Grids: out-of-stock cards (WooCommerce adds "outofstock") get a small label. */
.wc-block-product.outofstock .wp-block-woocommerce-product-image { position: relative; }
.wc-block-product.outofstock .wp-block-woocommerce-product-image::after {
	content: "Sold out";
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--miskah-card, #FFFAF3);
	color: #9A3B2E;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.4;
	pointer-events: none;
}
/* Product page: the out-of-stock line reads as a pill. */
.single-product .stock.out-of-stock {
	padding: 0.3rem 0.8rem;
	border: 1px solid currentColor;
	border-radius: 999px;
}