/* =============================================================================
   Shop / Product Archive
   ========================================================================== */

/* WooCommerce's default breadcrumb nav is the first thing rendered inside
   the page wrapper, directly under the sticky header — give it room to
   breathe instead of butting up against it. */
.woocommerce-breadcrumb {
	display: block;
	padding-top: clamp(1.75rem, 4vw, 2.75rem);
	font-size: 0.85rem;
	color: var(--color-dark-soft);
}

.shop-header {
	background-color: var(--color-bg-light);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.shop-header__title {
	margin-bottom: 0.75rem;
}

.shop-header__description {
	max-width: 65ch;
	color: var(--color-dark-soft);
}

/* Category filter pills */
.shop-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.shop-filters__pill {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 1.4rem;
	border: 1.5px solid var(--color-border);
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--color-dark);
	background-color: var(--color-white);
	transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.shop-filters__pill:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.shop-filters__pill.is-active {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

/* Toolbar: result count + ordering dropdown */
.shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 2rem;
}

.shop-toolbar .woocommerce-result-count {
	margin: 0;
	font-size: 0.9rem;
	color: var(--color-dark-soft);
}

.shop-toolbar .woocommerce-ordering {
	margin: 0;
}

.shop-toolbar .woocommerce-ordering select {
	appearance: none;
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--color-dark);
	background-color: var(--color-white);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius);
	padding: 0.6rem 2.5rem 0.6rem 1.1rem;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%231f1f1f' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	transition: border-color var(--transition-base);
}

.shop-toolbar .woocommerce-ordering select:hover,
.shop-toolbar .woocommerce-ordering select:focus {
	border-color: var(--color-primary);
}

/* Shop hub: Supplier / Subcategory cards shown before the flat product
   grid on the shop root and top-level category archives — see
   archive-product.php. Deliberately reuses the exact same grid mechanics
   and card visual language as the product grid below (ul.products /
   .product-card) via .term-card-grid / .term-card, so switching from
   "browsing terms" to "browsing products" reads as one continuous grid
   rather than a different design. */
.shop-hub-section {
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
	/* Half of the global `section { padding-block: ... }` default (see
	   main.css) — top only, per request. That global rule is what was
	   actually producing the visible padding above/below this section;
	   .shop-hub-section itself set no padding of its own until now. */
	padding-top: clamp(1.5rem, 4vw, 3rem);
}

.shop-hub-section__heading {
	font-family: var(--font-body);
	font-size: 1.3rem;
	margin-bottom: 1.5rem;
}

.term-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.term-card {
	list-style: none;
}

.term-card__link {
	min-width: 0; /* see .product-card's comment above on this same trap */
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	color: inherit;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.term-card__link:hover,
.term-card__link:focus-visible {
	transform: translateY(-6px);
	box-shadow: 0 24px 48px -28px rgba(31, 31, 31, 0.3);
}

.term-card__media {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	background-color: var(--color-bg-light);
}

.term-card__media::before {
	content: '';
	display: block;
	padding-top: 100%;
}

.term-card__media img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.term-card__link:hover .term-card__media img {
	transform: scale(1.06);
}

.term-card__content {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	flex-grow: 1;
	text-align: center;
}

/* No thumbnail set for this term yet — skip the empty image box and just
   center the name in a slightly taller card instead of leaving a bare
   light-gray square. */
.term-card--no-image .term-card__content {
	min-height: 140px;
}

.term-card__title {
	font-family: var(--font-body);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--color-dark);
}

/* Supplier hub cards — image, name, short description, and a list of
   that supplier's "lines" (child Supplier terms), matching a reference
   layout the client asked to match, kept in our own rounded-corner
   style (var(--radius-lg) image + var(--radius) button) rather than the
   sharp-cornered original. Left-aligned content, unlike .term-card. */
.supplier-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
	gap: 2.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.supplier-card {
	list-style: none;
}

.supplier-card__media {
	display: block;
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-color: var(--color-bg-light);
	margin-bottom: 1.5rem;
}

.supplier-card__media::before {
	content: '';
	display: block;
	padding-top: 125%;
}

.supplier-card__media img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.supplier-card__media:hover img {
	transform: scale(1.04);
}

.supplier-card__title {
	font-size: 1.6rem;
	margin-bottom: 0.75rem;
}

.supplier-card__title a {
	color: var(--color-dark);
}

.supplier-card__title a:hover {
	color: var(--color-primary);
}

.supplier-card__description {
	color: var(--color-dark-soft);
	margin-bottom: 1.25rem;
}

.supplier-card__lines {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.supplier-card__lines li {
	margin-bottom: 0.5rem;
}

.supplier-card__lines a {
	color: var(--color-dark);
	text-decoration: underline;
	text-decoration-color: var(--color-border);
	text-underline-offset: 3px;
	transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.supplier-card__lines a:hover {
	color: var(--color-primary);
	text-decoration-color: var(--color-primary);
}

/* Product grid */
ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	list-style: none;
	margin: 0 0 3rem;
	padding: 0;
}

/* Product card */
.product-card {
	/* Same min-width: auto grid/flex-item trap as .related.products in
	   single-product.css — this is both a grid item (of ul.products) and
	   a flex container for its own children, so it's another point in the
	   chain where the default content-based minimum can win out over the
	   track's actual available width. */
	min-width: 0;
	display: flex;
	flex-direction: column;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
	list-style: none;
}

.product-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 48px -28px rgba(31, 31, 31, 0.3);
}

/* Square media box via the classic padding-top(100%) technique rather than
   the `aspect-ratio` property — this is fully self-contained (the ::before
   forces height to equal this element's own width, full stop) and doesn't
   depend on `aspect-ratio` support or on any ancestor stretch chain
   resolving correctly, both of which proved unreliable here (images were
   collapsing to a few px wide in some contexts, e.g. related products).
   The link + image are then absolutely positioned to fill that box. The
   sizing rules are !important as a deliberate, hard guard: this exact spot
   has now broken three different ways for reasons that trace back outside
   this theme's own CSS, so these are pinned to win regardless of whatever
   else is loaded on the page. */
.product-card__media {
	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: var(--color-bg-light);
}

.product-card__media::before {
	content: '';
	display: block;
	padding-top: 100%;
}

.product-card__image-link {
	display: block !important;
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

.product-card__media img {
	display: block !important;
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	transition: transform var(--transition-slow);
}

.product-card:hover .product-card__media img {
	transform: scale(1.06);
}

.product-card__badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	background-color: rgba(255, 255, 255, 0.92);
	color: var(--color-secondary);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
}

/* Sale flash badge from WooCommerce */
.product-card .onsale {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background-color: var(--color-primary);
	color: var(--color-white);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	z-index: 1;
}

.product-card__content {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem;
	flex-grow: 1;
}

.product-card__content .woocommerce-loop-product__title {
	/* Rendered as <h2>, so it'd otherwise inherit font-family:
	   var(--font-heading) (Feeling Passionate) from the global heading rule. */
	font-family: var(--font-body);
	font-size: 1.15rem;
	margin-bottom: 0;
	color: var(--color-dark);
}

.product-card .price {
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-secondary);
}

.product-card .price del {
	color: var(--color-accent);
	font-weight: 400;
	margin-right: 0.4rem;
}

.product-card .star-rating {
	font-size: 0.85rem;
	color: var(--color-primary);
}

.product-card__action {
	margin-top: auto;
	padding-top: 0.75rem;
}

/* Force a block-level flex box (overriding the base .wby-button's
   inline-flex) so `width: 100%` resolves reliably against the card's own
   padded content box in every browser — inline-flex + percentage width is
   a known trouble spot that produced inconsistent widths here. */
.product-card__action .button,
.product-card__action .wby-button {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	text-align: center;
}

/* Pagination */
.shop-pagination {
	padding-bottom: 50px;
}

.shop-pagination .woocommerce-pagination {
	display: flex;
	justify-content: center;
}

.shop-pagination .page-numbers {
	display: inline-flex;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.shop-pagination .page-numbers li a,
.shop-pagination .page-numbers li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.6rem;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-dark);
	transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.shop-pagination .page-numbers li a:hover,
.shop-pagination .page-numbers li span.current {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

/* No products found */
.woocommerce-info {
	background-color: var(--color-bg-light);
	border-radius: var(--radius);
	padding: 1.5rem 2rem;
	color: var(--color-dark-soft);
}

/* -----------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------- */
@media (max-width: 1024px) {
	ul.products,
	.term-card-grid,
	.supplier-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	ul.products,
	.term-card-grid,
	.supplier-grid {
		grid-template-columns: 1fr;
	}

	.shop-toolbar {
		flex-direction: column;
		align-items: flex-start;
	}
}