/**
 * Shop archive.
 *
 * Enqueued only on is_shop() by BSD_Shop_Page, so nothing here needs
 * scoping selectors: this file never loads anywhere else. Brings the
 * WooCommerce archive template in line with the dark/gold treatment
 * used everywhere else on the site. The accent colour itself is set in
 * the Customizer; this covers what that alone doesn't reach.
 *
 * The catalogue reads as a body of work, not a product grid: one
 * release per row, large artwork, no price or Add to Cart (both
 * removed server-side in BSD_Shop_Page, not just hidden here), the
 * whole card linking through to the product page, where the purchase
 * decision actually belongs.
 *
 * !important throughout: this page also loads the theme's own CSS
 * (woo-module.css, kava-theme-style-inline-css), which declares the
 * same properties on the same elements. Matching selector specificity
 * alone isn't enough to win that fight, confirmed by testing.
 */

/* Header menu region: no menu is assigned to this location, so it only
   ever showed WordPress's "Set main menu" admin prompt (never visible
   to a real visitor, confirmed against an anonymous request, but
   confusing during review and not a menu this site actually uses --
   every other page carries no site nav at all, just the logo). Hidden
   rather than left for a menu that was never going to be assigned. */
nav.main-navigation {
	display: none !important;
}

/* Banner: the site logo has no size constraint on this template (that
   normally lives in an Elementor widget setting, which this raw
   WooCommerce archive template doesn't have), so it rendered at its
   full native size on the theme's raw grey header background. */
.custom-logo-link img {
	max-width: 68px !important;
	height: auto !important;
}
.site-header__wrap {
	background: #0a0a0a !important;
}

/* Page title, matched to the product title's treatment. */
h1.page-title {
	font-family: Cormorant, sans-serif !important;
	color: #808080 !important;
	font-weight: 400 !important;
}

/* Sorting dropdown: stock white select. appearance:none is needed on
   top of the colour properties -- without it, the browser keeps a
   native form-control chrome for the box itself even when
   background-color is set. */
select.orderby {
	appearance: none;
	-webkit-appearance: none;
	background-color: #141414 !important;
	background-image: linear-gradient(45deg, transparent 50%, #d9d9d9 50%),
		linear-gradient(135deg, #d9d9d9 50%, transparent 50%);
	background-position: calc(100% - 18px) center, calc(100% - 13px) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	border: 1px solid #4d4d4d !important;
	color: #d9d9d9 !important;
	font-family: Cormorant, sans-serif !important;
	padding-right: 32px !important;
}

/* Result count: WooCommerce boilerplate, muted further so it reads as
   a quiet aside next to the sorting control rather than competing
   with it. */
.woocommerce-result-count {
	color: #5a5a5a !important;
	font-family: Cormorant, sans-serif !important;
	font-size: 12px !important;
	letter-spacing: 0.05em !important;
}

/* One release per row. loop_shop_columns is filtered to 1 in
   BSD_Shop_Page, which changes the columns-* classes Kava emits, but
   the width this rule set actually reads is a fixed percentage keyed
   to those classes, not something the column count alone rewrites, so
   it's pinned directly here too. */
ul.products li.product {
	width: 100% !important;
	flex: 0 0 100% !important;
	margin: 0 !important;
}

/* Generous space between releases so each one lands on its own.
   Reduced, not dropped, on narrow viewports -- one-per-row is already
   the natural mobile layout, and the full desktop gap would make
   scrolling to a three-item catalogue feel like more than it is. */
ul.products {
	row-gap: 96px !important;
}
@media (max-width: 480px) {
	ul.products {
		row-gap: 56px !important;
	}
}

/* Card: no border, no padding, no background. The artwork carries the
   page; nothing should frame it like a product-listing tile. */
.product-content {
	position: relative;
	border: none !important;
	padding: 0 !important;
	background: transparent !important;
}

/* Artwork: large, square, centred, never distorted. object-fit:cover
   replaces the stock object-fit:fill, which stretched a square source
   to match whatever box it landed in. */
.woocommerce-loop-product__link {
	display: block;
	max-width: 640px;
	margin: 0 auto;
}
.woocommerce-loop-product__link img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Whole-card click-through, the "stretched link" pattern: the existing
   image anchor's ::after is positioned to cover the full card
   (.product-content is its nearest positioned ancestor), so clicking
   anywhere in the row, including the title and the space around it,
   follows the same link the image itself already does. No markup
   change and no JS needed; the title's own separate link underneath
   still exists for keyboard/screen-reader navigation, it's just not
   what mouse clicks land on. */
.woocommerce-loop-product__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Title beneath the artwork, in the site's Cormorant/gold, with real
   room to breathe above it rather than the stock 8px. */
.woocommerce-loop-product__title {
	margin: 28px 0 0 !important;
	font-family: Cormorant, sans-serif !important;
	font-size: 26px !important;
	font-weight: 400 !important;
	color: #b8860b !important;
	text-align: center !important;
}

/* Footer. Same markup and styling as the working bsd-footer component
   already placed on Product, Cart, Checkout, and My Account, each as
   its own Elementor HTML widget. This archive template has no
   Elementor document to hold that widget, so BSD_Shop_Page renders the
   same markup via a WooCommerce hook instead; this is that same CSS,
   with the top padding tightened for this page's rhythm -- the
   original 64px stacked on top of the product grid and pagination's
   own bottom margins, reading as an unanchored gap before the divider. */
.bsd-footer {
	background: transparent;
	padding: 24px 24px 40px;
	text-align: center;
	color: #7a7a7a;
}
.bsd-footer-divider {
	width: 40px;
	height: 1px;
	background: #8a7233;
	margin: 0 auto 24px;
}
.bsd-footer-links {
	margin-bottom: 20px;
	font-size: 13px;
	letter-spacing: 0.03em;
}
.bsd-footer-links a {
	color: #b8b8b8;
	text-decoration: none;
}
.bsd-footer-links a:hover {
	color: #8a7233;
}
.bsd-footer-links span {
	color: #444;
	margin: 0 10px;
}
.bsd-footer-tagline {
	font-size: 12px;
	letter-spacing: 0.05em;
	color: #5a5a5a;
	margin: 0;
}

/* Pagination: link text already picked up the accent gold, but borders
   and the current-page fill stayed the stock light-grey -- three
   different treatments in one control (a plain white box for the
   current page, a bordered box for others, and Next/Prev squeezed
   into the same fixed 33x33 box sized for a single digit, clipping
   the label). Left in place for now; at one release per row, the
   current 2-per-page setting wants revisiting on its own. */
.woocommerce-pagination .page-numbers {
	border-color: rgba(217, 217, 217, 0.15) !important;
	background: transparent !important;
	color: #967444 !important;
}
.woocommerce-pagination .page-numbers.current {
	background: #42251e !important;
	border-color: #42321e !important;
	color: #d9d9d9 !important;
}
.woocommerce-pagination a.next.page-numbers,
.woocommerce-pagination a.prev.page-numbers {
	width: auto !important;
	padding: 0 14px !important;
}