/* ==========================================================================
   DORIC · Catalogue listings
   --------------------------------------------------------------------------
   Shop, categories, New In, gender listings, God collections, and every
   other place a grid of product cards appears. The product card itself is
   the homepage component (cards.css); this file only arranges it.
   ========================================================================== */

/* ── Category navigation ────────────────────────────────────────────────── */

.d-shop__nav {
	margin-bottom: var(--d-s6);
	border-block: var(--d-hairline) solid var(--d-border);
}

.d-shop__navlist {
	display: flex;
	gap: var(--d-s6);
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	scroll-padding-inline: var(--d-gutter);
}

.d-shop__navlist::-webkit-scrollbar { display: none; }

.d-shop__navlink {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	font-size: var(--d-fs-label);
	font-weight: 500;
	letter-spacing: var(--d-ls-label);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--d-text-muted);
	transition: color var(--d-dur-fast) var(--d-ease-out);
}

.d-shop__navlink:hover { color: var(--d-text); }

.d-shop__navlink[aria-current="page"] {
	color: var(--d-text);
	box-shadow: inset 0 -1px 0 var(--d-accent);
}

/* ── Toolbar: count and sort ────────────────────────────────────────────── */

.d-shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--d-s4);
	margin-bottom: var(--d-s7);
}

.d-sort { display: flex; align-items: center; gap: var(--d-s3); }

.d-sort__select {
	min-height: var(--d-tap);
	padding: 0 var(--d-s8) 0 var(--d-s4);
	background-color: transparent;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--d-accent) 50%),
		linear-gradient(135deg, var(--d-accent) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px;
	background-repeat: no-repeat;
	border: var(--d-hairline) solid var(--d-border-strong);
	border-radius: 0;
	color: var(--d-text);
	font-size: var(--d-fs-small);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.d-sort__select:focus-visible { outline: 2px solid var(--d-focus); outline-offset: 2px; }
.d-sort__select option { background: var(--d-surface-2); color: var(--d-text); }

.d-sort__apply {
	min-height: var(--d-tap);
	padding-inline: var(--d-s4);
	border: var(--d-hairline) solid var(--d-border-strong);
	font-size: var(--d-fs-label);
	letter-spacing: var(--d-ls-label);
	text-transform: uppercase;
}

/* ── Product grid ───────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.d-shop__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--d-s7) var(--d-s2);
	}
}

@media (min-width: 768px) {
	.d-shop__grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--d-s9) var(--d-s5);
	}
}

@media (min-width: 1280px) {
	.d-shop__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The card's hover panel is drawn over photography; over the stone
   placeholder it needs no scale, which would only move the mark. */
.d-shop__grid .d-pcard:hover .d-media__ph--stone { transform: none; }

/* ── WooCommerce notices on catalogue views ─────────────────────────────── */

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

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--d-s3) var(--d-s6);
	margin-bottom: var(--d-s6);
	padding: var(--d-s4) var(--d-s5);
	background: var(--d-surface-1);
	border: var(--d-hairline) solid var(--d-border-strong);
	border-left: 2px solid var(--d-accent);
	font-size: var(--d-fs-small);
	color: var(--d-text);
	list-style: none;
}

.woocommerce-error { border-left-color: var(--d-error); }

.woocommerce-message .button,
.woocommerce-info .button {
	order: 2;
	font-size: var(--d-fs-label);
	font-weight: 500;
	letter-spacing: var(--d-ls-label);
	text-transform: uppercase;
	color: var(--d-accent);
}