/* ==========================================================================
   Kondido — Shop archive
   ==========================================================================
   Applies only to the WooCommerce Shop page and product category/tag
   archives (see kondido_is_shop_archive() in functions.php) — never the
   single-product page. Layers on top of assets/css/woocommerce.css, reusing
   the same design tokens (colors, type, spacing, radius, shadows) as the
   rest of the theme. No WooCommerce templates are overridden; the grid/card
   structure below styles WooCommerce's own default markup.
   ========================================================================== */

/* ---- Nav clearance ----
   #nav is fixed and transparent at the top of the page — with nothing
   pushing content down, the title/toolbar/grid render underneath it.
   Same fix and same values as assets/css/single-product.css. */
.woocommerce-main .container {
	padding-top: 150px;
}
@media (max-width: 900px) {
	.woocommerce-main .container {
		padding-top: 130px;
	}
}

/* ---- Archive header (breadcrumb eyebrow + title + optional description) ----
   The breadcrumb is re-centered and given the same small-caps "eyebrow
   label" treatment as .section-label-text elsewhere in the theme, so it
   reads as a deliberate lead-in to the title below instead of a small,
   disconnected trail sitting above it. This only touches
   .woocommerce-breadcrumb's presentation on the archive — the base rule
   in woocommerce.css is untouched, so Single Product/Cart/Checkout (where
   shop.css never loads) keep their own breadcrumb styling as-is. */
.woocommerce-breadcrumb {
	text-align: center;
	margin-bottom: 16px;
	font-size: var(--text-sm);
	letter-spacing: 0.1em;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--accent-deep);
}
.woocommerce-breadcrumb a {
	color: var(--accent-deep);
}
.woocommerce-products-header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 48px;
}
.woocommerce-products-header__title {
	font-size: clamp(34px, 4.5vw, 54px);
	line-height: 1.15;
}
.woocommerce-products-header p {
	color: var(--text-muted);
	font-size: var(--text-lg);
	line-height: 1.7;
	margin-top: 12px;
}

/* ---- Result count + sorting toolbar ---- */
.kondido-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 20px;
	padding: 20px 0;
	margin-bottom: 44px;
	border-top: 1px solid var(--border-soft);
	border-bottom: 1px solid var(--border-soft);
}
.woocommerce-result-count {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--text-muted);
}
.woocommerce-ordering {
	margin: 0;
}
.woocommerce-ordering select.orderby {
	border: 1.5px solid var(--border-soft);
	background: var(--white);
	padding: 11px 18px;
	border-radius: var(--r);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--ink);
	cursor: pointer;
}
.woocommerce-ordering select.orderby:focus {
	border-color: var(--accent-deep);
	outline: none;
}

/* ---- Product grid ----
   3 columns is the default/typical-desktop tier (not 4) — wider cards use
   more of the container per card and read less like a dense catalog
   listing. 4 columns is reserved for genuinely large viewports (>=1600px)
   where a 4th column still has real room to breathe; 1440px stays at 3. */
ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px 36px;
}
/* WooCommerce's own woocommerce-layout.css puts a clearfix
   (content:" "; display:table) on ul.products::before/::after for its
   float-based layout — harmless as a float container, but content:" "
   makes it a REAL box, so once the container is display:grid it becomes
   an actual (invisible) first grid item. That silently occupied
   row 1 / column 1, pushing every real product into column 2 onward and
   leaving the first row starting one cell short of the left edge instead
   of flush against it. content:none removes it from the render tree
   entirely, so it no longer participates in grid placement. */
#primary ul.products::before,
#primary ul.products::after {
	content: none;
}
@media (min-width: 1600px) {
	ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}
/* 800px (not 760px) so the tablet tier — explicitly 2 columns per spec —
   actually covers the standard 768px tablet width. */
@media (max-width: 800px) {
	ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 20px;
	}
}
/* Below ~420px two columns leaves too little room for the title + badge
   to read comfortably — one full-width column scans far better on small
   phones than a cramped, compressed grid. */
@media (max-width: 420px) {
	ul.products {
		grid-template-columns: 1fr;
	}
}

/* ---- Product card ----
   WooCommerce's own woocommerce-layout.css unconditionally sets
   ul.products li.product { float:left; width:22.05%; margin:0 3.8% ... }
   (its classic float-grid math), and woocommerce-smallscreen.css raises
   that to width:48% at <=768px via the ul's own "columns-4" class. Both
   have higher specificity than a bare "ul.products li.product" selector
   ((0,3,2) and (0,4,2) vs (0,2,2)), so the card shrank to ~22%/48% of its
   real CSS Grid track instead of filling it. #primary-scoped here so
   this wins outright ((1,2,2)) regardless of viewport or load order,
   and float/width/margin are explicitly neutralized since this is a
   grid item, not a float layout. */
#primary ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	float: none;
	width: 100%;
	margin: 0;
	background: var(--white);
	border-radius: var(--r);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
#primary ul.products li.product:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
}
ul.products li.product.outofstock {
	opacity: 0.6;
}

/* WooCommerce's own woocommerce.css also carries a full set of
   ul.products li.product X rules (link display, image margin, badge
   position, title/price/star-rating font-size) at specificity (0,4,2) —
   one class higher than a bare "ul.products li.product X" selector
   (0,3,2), so it silently won for font-size/display/margin on several of
   these even though the card container fix above already worked. Every
   selector below is #primary-scoped for the same reason as the container
   rule: it wins outright ((1,3,2)/(1,3,3)) regardless of which WC rule it
   is or what viewport it's evaluated at. */
#primary ul.products li.product a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	position: relative;
	color: inherit;
	text-decoration: none;
}

/* 1/1 (not the previous 4/5) — wider cards at 3-per-row made a tall
   portrait ratio read as narrow/elongated; a square image area stays
   consistent across cards while feeling proportionate at the new width.
   margin:0 explicitly, since WC's own "a img" rule adds margin-bottom:1em
   that nothing here was previously overriding. */
#primary ul.products li.product img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--cream-deep);
	border-radius: 0;
	margin: 0;
	transition: transform 800ms var(--ease);
}
#primary ul.products li.product:hover img {
	transform: scale(1.06);
}

/* Sale flash (native) and the optional configurable badge share the same
   pill treatment, opposite corners so they never collide. */
#primary ul.products li.product .onsale,
#primary ul.products li.product .kondido-configurable-badge {
	position: absolute;
	top: 14px;
	z-index: 2;
	font-size: var(--text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 20px;
	line-height: 1.4;
}
#primary ul.products li.product .onsale {
	inset-inline-end: 14px;
	inset-inline-start: auto;
	background: var(--accent-deep);
	color: var(--white);
}
#primary ul.products li.product .kondido-configurable-badge {
	inset-inline-start: 14px;
	background: var(--white);
	color: var(--gold-deep);
	border: 1px solid var(--gold);
}

#primary ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ink);
	margin: 24px 24px 6px;
}

#primary ul.products li.product .star-rating {
	margin: 0 24px 8px;
	font-size: var(--text-sm);
}

#primary ul.products li.product .price {
	display: block;
	margin: auto 24px 8px;
	padding-top: 4px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 20px;
	color: var(--ink);
}
.kondido-price-from {
	font-size: var(--text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--text-muted);
	margin-inline-end: 4px;
}

/* Secondary-weight action — an outline pill sized to its own content
   (not a full-width filled bar) so it reads as a card-level action, not
   a page-level CTA; still fully visible and still on-brand (accent-deep),
   just lighter than the site's primary .btn-solid treatment. */
#primary ul.products li.product a.button {
	align-self: flex-start;
	display: inline-flex;
	width: auto;
	margin: 4px 24px 24px;
	padding: 10px 22px;
	font-size: var(--text-sm);
	background: transparent;
	color: var(--accent-deep);
	border-color: var(--accent-deep);
}
#primary ul.products li.product a.button:hover {
	background: var(--accent-deep);
	color: var(--white);
	box-shadow: none;
	transform: none;
}

@media (max-width: 800px) {
	#primary ul.products li.product .woocommerce-loop-product__title {
		font-size: var(--text-xl);
		margin: 18px 18px 4px;
	}
	#primary ul.products li.product .star-rating {
		margin: 0 18px 6px;
	}
	#primary ul.products li.product .price {
		margin: auto 18px 8px;
		font-size: var(--text-lg);
	}
	#primary ul.products li.product a.button {
		margin: 4px 18px 18px;
	}
}

/* ---- Empty state ---- */
.woocommerce-no-products-found {
	text-align: center;
	padding: 56px 20px;
}
.woocommerce-no-products-found .woocommerce-info {
	display: block;
	background: transparent;
	border: none;
	padding: 0;
	margin: 0 auto;
	max-width: 440px;
	font-size: var(--text-lg);
	color: var(--text-muted);
}