/* Atolyeman shop & category archive polish (Phase D4). Loads only on the shop
   page and product taxonomy archives (see inc/shop-archive.php), so selectors
   below can safely target Blocksy's generic archive markup without leaking
   onto other page types. All color/spacing/type from tokens.css so the band
   morphs per audience segment like everything else. */

/* ---- D4.1 Title band ------------------------------------------------------
   Blocksy renders the shop/category title as a "hero-section type-2": a
   .hero-section wrapping <header class="entry-header"><h1 class="page-title">.
   Our breadcrumb (inc/shop-archive.php) is injected right above the h1; the
   category description (.page-description), when a term has one, is already
   rendered by Blocksy via get_the_archive_description(). */
.hero-section[data-type="type-2"] {
	background: var(--at-surface);
	border-bottom: 1px solid var(--at-border);
}
.hero-section[data-type="type-2"] .entry-header {
	/* Blocksy forces min-height: 250px + 50px paddings on the hero band —
	   far too tall for a plain title. Compact it. */
	min-height: 0 !important;
	padding-block: var(--at-space-8) !important;
}
.hero-section[data-type="type-2"] .page-title {
	margin: 0;
	font-family: var(--at-font-display);
	font-size: var(--at-fs-600);
	font-weight: 500;
	color: var(--at-text);
}
.hero-section[data-type="type-2"] .page-description {
	margin-top: var(--at-space-3);
	max-width: 640px;
	/* Centre the 640px description block under the centred category title —
	   without margin auto it pins left and reads off-centre. */
	margin-inline: auto;
	color: var(--at-text-muted);
	font-size: var(--at-fs-300);
	line-height: var(--at-lh-body);
}

/* ---- Category heading rows in the default Mağaza listing ----
   Injected between loop items (inc/shop-archive.php); spans the whole grid so
   each category's products start on a fresh row. */
.woocommerce ul.products li.at-shop-catrow {
	grid-column: 1 / -1;
	width: 100%;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--at-space-4);
	margin: var(--at-space-8) 0 var(--at-space-2);
	padding-bottom: var(--at-space-3);
	border-bottom: 1px solid var(--at-border);
}
.woocommerce ul.products li.at-shop-catrow:first-child {
	margin-top: 0;
}
.at-shop-catrow__title {
	font-family: var(--at-font-display);
	font-size: var(--at-fs-500);
	margin: 0;
}
.at-shop-catrow__link {
	color: var(--at-accent);
	font-weight: 600;
	font-size: var(--at-fs-200);
	text-decoration: none;
	white-space: nowrap;
}
.at-shop-catrow__link:hover {
	color: var(--at-accent-hover);
}

@media (max-width: 782px) {
	.hero-section[data-type="type-2"] .entry-header {
		padding-block: var(--at-space-8) var(--at-space-6);
	}
	.hero-section[data-type="type-2"] .page-title {
		font-size: var(--at-fs-500);
	}
}

/* ---- D4.4 Toolbar + result count ------------------------------------------
   Quieter, lowercase-reading result count; orderby <select> restyled to match
   the design system (border/radius/focus tokens instead of Blocksy defaults). */
.woo-listing-top {
	align-items: center;
	padding-block: var(--at-space-4);
	margin-bottom: var(--at-space-6) !important;
	border-bottom: 1px solid var(--at-border);
}
.woocommerce-result-count {
	/* !important: Blocksy sets uppercase/11px at higher specificity */
	color: var(--at-text-muted) !important;
	font-size: var(--at-fs-100) !important;
	font-weight: 400;
	text-transform: none !important;
	letter-spacing: normal !important;
}
.woocommerce-ordering .orderby {
	height: auto;
	border: 1px solid var(--at-border);
	border-radius: var(--at-radius-sm);
	padding: var(--at-space-2) var(--at-space-8) var(--at-space-2) var(--at-space-3);
	background-color: var(--at-surface);
	color: var(--at-text);
	font-size: var(--at-fs-200);
}
.woocommerce-ordering .orderby:focus {
	outline: none;
	border-color: var(--at-accent);
	box-shadow: 0 0 0 1px var(--at-accent);
}
.woocommerce-ordering .ct-sort-icon {
	color: var(--at-text-muted);
}

/* ---- D4.3 Card polish ------------------------------------------------------
   Anatomy top-to-bottom: image, title, price, category label, button. Even
   vertical rhythm via --product-element-spacing (Blocksy's own spacing hook),
   re-tokenized to our spacing scale instead of its hardcoded px values. */
.woocommerce ul.products li.product > * {
	--product-element-spacing: var(--at-space-2);
}
.woocommerce ul.products li.product figure {
	--product-element-spacing: var(--at-space-4);
}

/* Category label under the price: quiet small-caps meta, not a blue link. */
.woocommerce ul.products li.product .entry-meta .meta-categories a {
	color: var(--at-text-muted);
	font-size: var(--at-fs-100);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .08em;
	text-decoration: none;
	transition: color .15s ease;
}
.woocommerce ul.products li.product .entry-meta .meta-categories a:hover,
.woocommerce ul.products li.product .entry-meta .meta-categories a:focus-visible {
	color: var(--at-accent);
}

/* ---- D4.4b Empty state -----------------------------------------------------
   Woo's default markup: <div class="woocommerce-no-products-found"><div
   class="woocommerce-info">…</div></div>. inc/shop-archive.php wraps that in
   .at-empty-shop and appends a "Mağazayı Keşfet" button (styled by the shared
   .at-btn system in main.css) so an empty category never reads as a dead end. */
.at-empty-shop {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--at-space-6);
	max-width: 480px;
	margin: var(--at-space-8) auto;
	padding: var(--at-space-12) var(--at-space-8);
	text-align: center;
	background: var(--at-surface);
	border: 1px solid var(--at-border);
	border-radius: var(--at-radius);
}
.at-empty-shop .woocommerce-info {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	color: var(--at-text-muted);
	font-size: var(--at-fs-300);
}
.at-empty-shop .woocommerce-info::before {
	display: none;
}

/* ---- D6.2 Mobile audit ------------------------------------------------------
   Two defects at 375px: Blocksy collapsed `ul.products` to ONE column (a
   9-product shop became an endless scroll), and `.woo-listing-top` kept the
   toolbar on a single flex row, squeezing the sort <select> down to ~34px. */
@media (max-width: 767px) {
	.woocommerce ul.products {
		/* !important: Blocksy sets the column count from its own responsive var. */
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		column-gap: var(--at-space-4) !important;
	}
	.woocommerce ul.products li.at-shop-catrow {
		margin-top: var(--at-space-6);
	}
	.at-shop-catrow__title { font-size: var(--at-fs-400); }

	/* Below 690px Blocksy deliberately collapses the sort <select> to an
	   icon-only 34px button (transparent text + .ct-sort-icon overlay). Keep
	   that pattern — just grow it to a 44px touch target. */
	.woo-listing-top .woocommerce-ordering select.orderby {
		width: 44px !important;
		height: 44px !important;
	}
	.at-filters-toggle { padding-block: var(--at-space-3); }
}