/*
 * Store-wide WooCommerce styles (replacing WooCommerce's own stylesheets):
 * product grid and cards, archive header, toolbar, filters, pagination,
 * breadcrumb, notices, account forms and tables.
 */

/* Breadcrumb: "HOME / SHOP / NECKLACES" */
.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: var(--qilaada-space-2);
	margin-bottom: var(--qilaada-space-8);
	color: var(--qilaada-color-muted);
	font-size: 0.6875rem;
	letter-spacing: var(--qilaada-heading-tracking);
	text-transform: uppercase;
}

.breadcrumb a {
	color: var(--qilaada-color-text);
	text-decoration: none;
}

.breadcrumb a:hover {
	text-decoration: underline;
}

/* Archive header: centred title and description */
.woocommerce-products-header {
	max-width: var(--qilaada-container-xs);
	margin: 0 auto var(--qilaada-space-8);
	text-align: center;
}

.woocommerce-products-header__title {
	margin-bottom: var(--qilaada-space-4);
	font-size: clamp(1.375rem, 1rem + 1.5vw, 2rem); /* [ref] 22px phones, 32px desktop */
	letter-spacing: 0.14em;
	line-height: 1.3;
}

.term-description,
.page-description {
	color: var(--qilaada-color-text);
}

.term-description p:last-child {
	margin-bottom: 0;
}

/* Toolbar, full width as on the reference (the borders run to the window
   edges without widening the page): phones "Filter | Sort | grid size";
   desktop "grid size | count | sort", 54px tall with dividers. */
.shop-toolbar {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	align-items: stretch;
	min-height: 2.625rem;
	border-block: 1px solid var(--qilaada-color-gray-20);
	border-image: linear-gradient(var(--qilaada-color-gray-20), var(--qilaada-color-gray-20)) 1 / 1px 0 / 0 100vmax;
	font-family: var(--qilaada-font-heading);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.shop-toolbar > * {
	display: flex;
	align-items: center;
}

.shop-toolbar__layout {
	order: 3;
	gap: var(--qilaada-space-2);
	padding-inline: var(--qilaada-space-3) 0;
	border-inline-start: 1px solid var(--qilaada-color-gray-20);
}

.shop-toolbar__layout[hidden] {
	display: none;
}

.shop-toolbar__layout-button {
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--qilaada-color-gray-50);
	cursor: pointer;
}

.shop-toolbar__layout-button[aria-pressed="true"] {
	color: var(--qilaada-color-text);
}

.shop-toolbar__layout-button .icon {
	width: 1.125rem;
	height: 1.125rem;
	fill: currentColor;
	stroke: none;
}

.shop-toolbar__filter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--qilaada-space-2);
	padding: var(--qilaada-space-2) 0;
	border-inline-end: 1px solid var(--qilaada-color-gray-20);
	color: inherit;
	border: 0;
	background: none;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: inherit;
	font-size: inherit;
}

.shop-toolbar__filter-count {
	display: inline-grid;
	place-items: center;
	min-width: 1.25rem;
	height: 1.25rem;
	border-radius: 9999px;
	background: var(--qilaada-color-ink);
	color: var(--qilaada-color-white);
	font-size: 0.625rem;
}

.shop-toolbar__count {
	margin: 0;
	color: var(--qilaada-color-muted);
}

.shop-toolbar > .shop-toolbar__count {
	display: none;
}

.shop-toolbar__sort {
	justify-content: center;
}

.woocommerce-ordering {
	margin: 0;
}

.woocommerce-ordering select.orderby {
	width: auto;
	padding: var(--qilaada-space-2) var(--qilaada-space-6) var(--qilaada-space-2) var(--qilaada-space-2);
	border: 0;
	/* Chevron drawn with two CSS gradients (no image file). */
	background:
		linear-gradient(45deg, transparent 50%, currentColor 50%, currentColor calc(50% + 1px), transparent calc(50% + 1px)) right 0.5rem center / 0.375rem 0.375rem no-repeat,
		linear-gradient(-45deg, transparent 50%, currentColor 50%, currentColor calc(50% + 1px), transparent calc(50% + 1px)) right 0.125rem center / 0.375rem 0.375rem no-repeat,
		transparent;
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	text-transform: uppercase;
	cursor: pointer;
}

@media (min-width: 1024px) {
	.shop-toolbar {
		grid-template-columns: 9.125rem 1fr 10.5rem;
		min-height: 3.375rem;
	}

	.shop-toolbar > .shop-toolbar__filter {
		display: none;
	}

	.shop-toolbar__layout {
		order: -1;
		justify-content: center;
		padding: 0;
		border-inline-end: 1px solid var(--qilaada-color-gray-20);
		border-inline-start: 0;
	}

	.shop-toolbar__layout[hidden] + .shop-toolbar__count {
		grid-column: 1 / 3;
	}

	.shop-toolbar > .shop-toolbar__count {
		display: flex;
		justify-content: center;
	}

	.shop-toolbar__sort {
		border-inline-start: 1px solid var(--qilaada-color-gray-20);
	}
}

/* Active filter chips */
.active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--qilaada-space-2);
	margin: var(--qilaada-space-4) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--qilaada-text-xs);
}

.active-filters__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--qilaada-space-2);
	padding: var(--qilaada-space-1) var(--qilaada-space-3);
	border: 1px solid var(--qilaada-color-border);
	text-decoration: none;
}

.active-filters__chip .icon {
	width: 0.75rem;
	height: 0.75rem;
}

.active-filters__chip:hover {
	border-color: var(--qilaada-color-ink);
	color: inherit;
}

.active-filters__clear {
	padding-inline: var(--qilaada-space-2);
	color: var(--qilaada-color-muted);
}

/* Sidebar + results */
.shop-layout {
	display: grid;
	gap: var(--qilaada-space-8);
	margin-top: var(--qilaada-space-6);
}

.shop-sidebar {
	display: none;
}

/* Filter form (sidebar and drawer) */
.filter-group {
	border-bottom: 1px solid var(--qilaada-color-gray-20);
}

.filter-group__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--qilaada-space-4);
	font-size: var(--qilaada-text-xs);
	letter-spacing: var(--qilaada-heading-tracking);
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
}

.filter-group__title::-webkit-details-marker {
	display: none;
}

.filter-group[open] > .filter-group__title .icon--chevron-down {
	transform: rotate(180deg);
}

.filter-group__links,
.filter-group__options {
	display: grid;
	gap: var(--qilaada-space-2);
	margin: 0;
	padding: 0 0 var(--qilaada-space-4);
	border: 0;
	list-style: none;
}

.filter-group__links a {
	font-size: var(--qilaada-text-sm);
	text-decoration: none;
}

.filter-group__links a[aria-current="page"] {
	text-decoration: underline;
}

.filter-group > .filter-option {
	padding-bottom: var(--qilaada-space-4);
}

.filter-option {
	display: flex;
	align-items: center;
	gap: var(--qilaada-space-3);
	font-size: var(--qilaada-text-sm);
	cursor: pointer;
}

.filter-option input {
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var(--qilaada-color-ink);
}

.filter-price {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: end;
	gap: var(--qilaada-space-2);
	padding-bottom: var(--qilaada-space-4);
}

.filter-price__label {
	display: block;
	margin-bottom: var(--qilaada-space-1);
	color: var(--qilaada-color-muted);
	font-size: var(--qilaada-text-xs);
}

.filter-price__to {
	padding-bottom: var(--qilaada-space-3);
	color: var(--qilaada-color-muted);
	font-size: var(--qilaada-text-xs);
}

.filter-form__actions {
	display: flex;
	gap: var(--qilaada-space-2);
	padding-top: var(--qilaada-space-4);
}

.filter-form__actions > * {
	flex: 1;
}

.filter-form--drawer {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

.filter-form--drawer .filter-form__actions {
	padding-top: var(--qilaada-space-4);
}

/* Desktop archives: breadcrumb on the same row as the centred title, as on the reference. */
@media (min-width: 1024px) {
	.woocommerce-shop .breadcrumb,
	.tax-product_cat .breadcrumb,
	.tax-product_tag .breadcrumb,
	.search .site-main--shop .breadcrumb {
		margin-bottom: -1.125rem;
	}
}

@media (min-width: 1024px) {
	.shop-layout {
		grid-template-columns: 15rem minmax(0, 1fr);
		gap: 3.125rem;
		margin-top: 3rem;
	}

	.shop-sidebar {
		display: block;
		align-self: start;
		position: sticky;
		top: calc(var(--qilaada-header-height) + var(--qilaada-space-4));
	}

	.shop-sidebar .filter-group:first-child {
		border-top: 0;
	}
}

/* Product grid: 2 columns 10px apart on phones (the grid reaches 10px from
   the screen edges), 3 on tablets, 4 on desktop (219px cards 60px apart).
   The toolbar's grid size toggle switches to 1 / 2 / 3 columns ("large"). */
ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.5rem 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.shop-results ul.products {
	margin-inline: calc(0.625rem - var(--qilaada-gutter));
}

.shop-results[data-grid="large"] ul.products {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
	ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 3rem var(--qilaada-space-6);
	}

	.shop-results ul.products {
		margin-inline: 0;
	}

	.shop-results[data-grid="large"] ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 3.5rem 3.75rem;
	}

	.shop-results[data-grid="large"] ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Product card: packshot on a warm tile, centred text, full-width button */
.product-card {
	position: relative; /* Contains absolutely positioned children (e.g. screen-reader text) so scrolling rows clip them. */
	display: flex;
	flex-direction: column;
	text-align: center;
}

.product-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--qilaada-ratio-product);
	background: var(--qilaada-color-tile);
}

/* Whole image inside the frame (never cropped); multiply blends white
   packshot backgrounds into the warm tile, as on the reference. */
.product-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: opacity 0.4s var(--qilaada-ease), transform 0.6s var(--qilaada-ease);
}

.product-card__image--secondary {
	opacity: 0;
}

@media (hover: hover) {
	.product-card:hover .product-card__image--secondary {
		opacity: 1;
	}

	.product-card:hover .product-card__image--primary:not(:only-of-type) {
		opacity: 0;
	}

	.product-card:hover .product-card__image--primary:only-of-type {
		transform: scale(1.04);
	}
}

.product-card__badge {
	position: absolute;
	top: var(--qilaada-space-3);
	inset-inline-start: var(--qilaada-space-3);
	padding: var(--qilaada-space-1) var(--qilaada-space-2);
	font-size: 0.625rem;
	letter-spacing: var(--qilaada-nav-tracking);
	text-transform: uppercase;
}

.product-card__badge--sold-out {
	background: var(--qilaada-color-sold-out-bg);
	color: var(--qilaada-color-sold-out-text);
}

.product-card__badge--sale {
	background: var(--qilaada-color-sale);
	color: var(--qilaada-color-white);
}

/* Titles share a baseline: one-line names start lower, so prices and
   buttons in a row line up (as on the reference). */
.product-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.25rem;
	padding-top: 1.25rem;
}

.product-card__title {
	margin: 0;
	font-family: var(--qilaada-font-heading);
	font-size: var(--qilaada-text-xs);
	font-weight: 400;
	letter-spacing: 0.14em;
	line-height: 1.7;
	text-transform: uppercase;
}

.product-card__title a {
	text-decoration: none;
}

.product-card__title a:hover {
	color: inherit;
	text-decoration: underline;
}

.product-card__price,
.price {
	margin: 0;
	color: rgb(28 27 27 / 0.65);
	font-family: var(--qilaada-font-heading);
	font-size: var(--qilaada-text-xs);
	letter-spacing: 0.14em;
}

.price del {
	margin-inline-end: var(--qilaada-space-2);
	opacity: 0.7;
}

.price ins {
	color: var(--qilaada-color-sale);
	text-decoration: none;
}

.product-card__actions {
	margin-top: 1.25rem;
}

.product-card__actions .button {
	width: 100%;
	padding-inline: var(--qilaada-space-2);
}

/* Skeleton cards (design preview, empty-store layout): no hover image swap. */
.product-card--skeleton .product-card__media {
	background: var(--qilaada-color-placeholder);
}

/* Empty slots (homepage) show their name and price lines as shaded bars. */
.product-card--skeleton .product-card__title:empty::before,
.product-card--skeleton .product-card__price:empty::before {
	content: "";
	display: inline-block;
	width: 70%;
	height: 0.75em;
	border-radius: 1px;
	background: var(--qilaada-color-placeholder);
	vertical-align: middle;
}

.product-card--skeleton .product-card__price:empty::before {
	width: 3.5em;
}

.product-card__media .media-placeholder {
	position: absolute;
	inset: 0;
	height: 100%;
}

.woocommerce-ordering select.orderby:disabled {
	cursor: default;
	opacity: 1;
}

.product-card__actions--none {
	min-height: var(--qilaada-button-height);
}

/* WooCommerce adds a "View cart" link after AJAX add; the drawer replaces it. */
.product-card a.added_to_cart,
.single-product a.added_to_cart {
	display: none;
}

/* Pagination */
.woocommerce-pagination {
	margin-top: var(--qilaada-space-12);
}

.woocommerce-pagination ul.page-numbers {
	display: flex;
	justify-content: center;
	gap: var(--qilaada-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
	display: inline-grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	text-decoration: none;
}

.woocommerce-pagination .page-numbers .current {
	border-bottom: 1px solid var(--qilaada-color-ink);
}

/* Empty states */
.empty-state {
	max-width: var(--qilaada-container-xs);
	margin: 0 auto;
	padding-block: var(--qilaada-space-12);
	text-align: center;
}

.empty-state__title {
	font-size: var(--qilaada-text-h3);
}

.empty-state__text {
	color: var(--qilaada-color-muted);
}

/* Notices */
.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--qilaada-space-3);
	margin: 0 0 var(--qilaada-space-6);
	padding: var(--qilaada-space-4) var(--qilaada-space-5);
	border-inline-start: 2px solid var(--qilaada-color-ink);
	background: var(--qilaada-color-tile);
	list-style: none;
	font-size: var(--qilaada-text-sm);
}

.woocommerce-error {
	border-inline-start-color: var(--qilaada-color-error-text);
	background: var(--qilaada-color-error-bg);
}

.woocommerce-message .button,
.woocommerce-info .button {
	order: 2;
	padding: var(--qilaada-space-2) var(--qilaada-space-4);
}

/* Star ratings are not part of this design. */
.star-rating,
.woocommerce-product-rating {
	display: none;
}

/* Account and classic forms */
.woocommerce form .form-row {
	margin: 0 0 var(--qilaada-space-4);
}

.woocommerce form .form-row label {
	display: block;
	margin-bottom: var(--qilaada-space-1);
	font-size: var(--qilaada-text-sm);
}

.woocommerce form .form-row .required {
	color: var(--qilaada-color-error-text);
	text-decoration: none;
}

.woocommerce-form__label-for-checkbox {
	display: inline-flex !important;
	align-items: center;
	gap: var(--qilaada-space-2);
}

.u-columns.col2-set,
.woocommerce .col2-set {
	display: grid;
	gap: var(--qilaada-space-12);
}

@media (min-width: 768px) {
	.u-columns.col2-set,
	.woocommerce .col2-set {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce-account .woocommerce {
	display: grid;
	gap: var(--qilaada-space-8);
}

@media (min-width: 1024px) {
	.woocommerce-account.logged-in .woocommerce {
		grid-template-columns: 14rem 1fr;
	}
}

.woocommerce-MyAccount-navigation ul {
	display: grid;
	gap: var(--qilaada-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: var(--qilaada-space-2) 0;
	font-size: var(--qilaada-text-sm);
	letter-spacing: var(--qilaada-nav-tracking);
	text-decoration: none;
	text-transform: uppercase;
}

.woocommerce-MyAccount-navigation .is-active a {
	text-decoration: underline;
}

.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--qilaada-text-sm);
}

.shop_table th,
.shop_table td {
	padding: var(--qilaada-space-3);
	border-bottom: 1px solid var(--qilaada-color-gray-20);
	text-align: start;
}

/* ------------------------------------------------------------------
 * Wishlist (inc/wishlist.php): heart on product cards (top right of the
 * image, as in the approved design) and on the product page; filled when
 * saved. The Wishlist page reuses the product grid.
 * ---------------------------------------------------------------- */

.wishlist-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--qilaada-color-ink);
	font: inherit;
	cursor: pointer;
}

.wishlist-toggle .icon {
	width: 1.375rem;
	height: 1.375rem;
	transition: fill var(--qilaada-duration) var(--qilaada-ease);
}

.wishlist-toggle[aria-pressed="true"] .icon {
	fill: currentColor;
}

.product-card__wishlist {
	position: absolute;
	top: 0.5rem;
	inset-inline-end: 0.5rem;
	z-index: 2;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
}

.product-card__wishlist .wishlist-toggle__text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.wishlist-toggle--single {
	margin-top: var(--qilaada-space-4);
	font-size: var(--qilaada-text-sm);
	letter-spacing: var(--qilaada-nav-tracking);
	text-transform: uppercase;
}

.wishlist__status:empty {
	display: none;
}

.wishlist__products {
	margin-top: var(--qilaada-space-6);
}

.wishlist__item {
	text-align: start;
}

.wishlist__remove {
	align-self: flex-start;
	margin-top: var(--qilaada-space-2);
	font-size: var(--qilaada-text-xs);
	letter-spacing: var(--qilaada-nav-tracking);
	text-decoration: underline;
	text-transform: uppercase;
}