/* ==========================================================================
   Shop and product category archive pages.
   The product cards themselves live in product-card.css.
   ========================================================================== */

/* --- Archive header ------------------------------------------------------- */

body.tds-theme.woocommerce .woocommerce-products-header {
	margin-bottom: var(--tds-space-4);
	font-family: var(--tds-font);
}

body.tds-theme.woocommerce .woocommerce-products-header__title {
	font-size: var(--tds-fs-xl);
	font-weight: 800;
	line-height: var(--tds-lh-tight);
	color: var(--tds-ink);
	margin-bottom: var(--tds-space-2);
}

body.tds-theme.woocommerce .term-description {
	max-width: 70ch;
	font-size: var(--tds-fs-base);
	line-height: var(--tds-lh-body);
	color: var(--tds-body);
}

/* --- Category chips ------------------------------------------------------- */

.tds-chips {
	margin: var(--tds-space-4) 0 var(--tds-space-5);
	font-family: var(--tds-font);
}

.tds-chips__rail {
	gap: var(--tds-space-2);
	scrollbar-width: none;
}

.tds-chips__rail::-webkit-scrollbar {
	display: none;
}

.tds-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 6px 14px;
	border: 1px solid var(--tds-line);
	border-radius: var(--tds-radius-pill);
	background: var(--tds-white);
	color: var(--tds-body);
	font-size: var(--tds-fs-sm);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.tds-chip:hover,
.tds-chip:focus-visible {
	border-color: var(--tds-primary);
	color: var(--tds-primary);
}

.tds-chip.is-current {
	background: var(--tds-primary);
	border-color: var(--tds-primary);
	color: var(--tds-white);
}

.tds-chip__count {
	font-size: var(--tds-fs-xs);
	font-weight: 700;
	opacity: 0.65;
}

/* --- Result count + ordering --------------------------------------------- */

body.tds-theme.woocommerce .woocommerce-result-count,
body.tds-theme.woocommerce .woocommerce-ordering {
	font-family: var(--tds-font);
	font-size: var(--tds-fs-sm);
	color: var(--tds-muted);
	margin-bottom: var(--tds-space-4);
}

body.tds-theme.woocommerce .woocommerce-ordering select {
	border: 1px solid var(--tds-line);
	border-radius: var(--tds-radius-sm);
	padding: 8px 12px;
	font-size: var(--tds-fs-sm);
	min-height: 40px;
}

/* --- Pagination ----------------------------------------------------------- */

body.tds-theme.woocommerce nav.woocommerce-pagination {
	margin-block: var(--tds-space-6);
	font-family: var(--tds-font);
}

body.tds-theme.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--tds-space-2);
}

body.tds-theme.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	overflow: visible;
}

body.tds-theme.woocommerce nav.woocommerce-pagination ul li a,
body.tds-theme.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 12px;
	border: 1px solid var(--tds-line);
	border-radius: var(--tds-radius-sm);
	background: var(--tds-white);
	color: var(--tds-body);
	font-size: var(--tds-fs-base);
	font-weight: 600;
}

body.tds-theme.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--tds-primary);
	border-color: var(--tds-primary);
	color: var(--tds-white);
}

/* --- Sidebar -------------------------------------------------------------
   Storefront prints a widget sidebar next to the content on every page,
   including shop / product / cart / checkout / my-account, where it showed a
   category widget nobody asked for and squeezed the grid into ~74% width.

   inc/layout.php unhooks storefront_get_sidebar on those screens, so #secondary
   is not rendered at all. What is left here is the width half of the fix:
   Storefront's `.woocommerce-active .site-content .content-area` keeps its
   73.9% float even with no sidebar present, so it is reset below.

   Blog / posts / regular pages are NOT matched by .tds-wc-fullwidth and keep
   their sidebar exactly as before.
   ------------------------------------------------------------------------ */

body.tds-theme.tds-wc-fullwidth .content-area,
body.tds-theme.tds-wc-fullwidth .site-content .content-area {
	width: 100%;
	max-width: 100%;
	float: none;
	margin-right: 0;
	box-sizing: border-box;
}

/* Belt and braces: if a plugin injects its own sidebar into these screens it
   must not reintroduce the two-column squeeze. */
body.tds-theme.tds-wc-fullwidth #secondary {
	display: none;
}

/* Typography for the sidebar wherever it IS still shown (blog, pages). */
body.tds-theme #secondary .widget-title,
body.tds-theme #secondary .widgettitle {
	font-family: var(--tds-font);
	font-size: var(--tds-fs-md);
	font-weight: 800;
	color: var(--tds-ink);
}

/* --- Phones ---------------------------------------------------------------- */

@media (max-width: 767px) {
	body.tds-theme.woocommerce .woocommerce-products-header__title {
		font-size: var(--tds-fs-lg);
	}

	body.tds-theme.woocommerce .woocommerce-ordering,
	body.tds-theme.woocommerce .woocommerce-result-count {
		float: none;
		width: 100%;
		margin-bottom: var(--tds-space-3);
	}

	body.tds-theme.woocommerce .woocommerce-ordering select {
		width: 100%;
		min-height: 44px;
	}
}