/* =============================================================================
   NAILIVA STORE — SHOP / CATEGORY ARCHIVE
   Styles WooCommerce's own default archive-product.php output (we don't
   override that template — our functions.php hooks already swap the
   content wrapper, toolbar, and loop card, so the stock template just
   works). Mobile-first: 2-column grid → 4-column at desktop.
   ============================================================================= */

.shop-wrap { padding-block: 32px var(--space-section-y); }

.woocommerce-breadcrumb {
	font-size: 12px; color: var(--color-text-muted); letter-spacing: 0.02em; margin-bottom: 12px;
}
.woocommerce-breadcrumb a:hover { text-decoration: underline; }

.shop-wrap h1.page-title,
.shop-wrap .page-title {
	font-family: var(--font-heading); font-size: 30px; font-weight: 500; margin-bottom: 8px;
}

.term-description,
.woocommerce-products-header__description {
	color: var(--color-text-muted); font-size: 14px; max-width: 60ch; margin-bottom: 20px;
}

/* Inline filter bar: FINISH / WEAR / LENGTH pill rows + native sort
   dropdown (nailiva_shop_filter_bar()) — matches the reference exactly,
   filters live on the page instead of behind a drawer. */
.shop-filter-bar {
	padding-block: 20px; margin-bottom: 12px;
	border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
}
.filter-pill-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; margin-bottom: 14px; }
.filter-pill-row:last-child { margin-bottom: 0; }
.filter-pill-label {
	font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--color-text-muted);
	width: 100%;
}
.filter-pill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-pill {
	display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
	font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
	border: 1px solid var(--color-border); border-radius: 0; color: var(--color-text);
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.filter-pill:hover, .filter-pill:focus-visible { border-color: var(--color-text); }
.filter-pill.is-active { background-color: var(--color-bg-dark); color: var(--color-text-on-dark); border-color: var(--color-bg-dark); }
.filter-sort { margin-top: 16px; display:flex; align-items:center; gap:10px; }
.filter-sort-label { font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--color-text-muted); flex-shrink:0; }
.filter-sort select.orderby {
	width: 100%; min-height: 36px; padding: 0 12px; border: 1px solid var(--color-border);
	background-color: var(--color-bg); font-size: 13px; color: var(--color-text); border-radius: var(--radius);
}
.shop-result-count,
.woocommerce-result-count { font-size: 13px; color: var(--color-text-muted); margin: 0 0 20px; }

/* Product grid */
ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px 16px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
ul.products li.product { list-style: none; }

/* Empty state */
.woocommerce-info {
	background-color: var(--color-bg-alt); border: 1px solid var(--color-border); padding: 20px;
	font-size: 14px; border-radius: var(--radius); list-style: none;
}

/* Pagination */
.woocommerce-pagination { margin-top: 40px; }
.woocommerce-pagination ul.page-numbers {
	display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0;
}
.woocommerce-pagination .page-numbers li { list-style: none; }
.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers {
	display: flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px;
	padding: 0 10px; border: 1px solid var(--color-border); font-size: 13px;
}
.woocommerce-pagination span.page-numbers.current { background-color: var(--color-bg-dark); color: var(--color-text-on-dark); border-color: var(--color-bg-dark); }
.woocommerce-pagination a.page-numbers:hover { border-color: var(--color-accent-deep); }

/* -----------------------------------------------------------------------
   TABLET (768px+)
   ----------------------------------------------------------------------- */
@media (min-width: 768px) {
	ul.products { grid-template-columns: repeat(3, 1fr); gap: 28px 20px; }
	.shop-wrap h1.page-title, .shop-wrap .page-title { font-size: 36px; }
}

/* -----------------------------------------------------------------------
   DESKTOP (1024px+)
   ----------------------------------------------------------------------- */
@media (min-width: 1024px) {
	ul.products { grid-template-columns: repeat(4, 1fr); gap: 32px 24px; }
	.shop-filter-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
	.shop-filter-rows { flex: 1; }
	.filter-sort { margin-top: 0; flex-shrink: 0; width: 235px; justify-content:flex-end; }
	.filter-pill-row { flex-wrap:nowrap; }
	.filter-pill-label { width:62px; flex:0 0 62px; }
	.filter-pill-list { flex:1; }
}


/* -----------------------------------------------------------------------
   WOOCOMMERCE 11.x LAYOUT RESET
   WooCommerce's core stylesheet still assigns percentage widths/floats to
   li.product. Inside our CSS Grid those widths shrink each card to roughly
   one quarter of its own grid track. Use the Woo-specific selector here so
   our theme wins the cascade without disabling WooCommerce's functional CSS.
   ----------------------------------------------------------------------- */
.woocommerce .shop-wrap ul.products,
.woocommerce-page .shop-wrap ul.products {
	display: grid !important;
	float: none !important;
	width: 100% !important;
	clear: both;
}
.woocommerce .shop-wrap ul.products::before,
.woocommerce .shop-wrap ul.products::after,
.woocommerce-page .shop-wrap ul.products::before,
.woocommerce-page .shop-wrap ul.products::after {
	display: none !important;
	content: none !important;
}
.woocommerce .shop-wrap ul.products li.product,
.woocommerce-page .shop-wrap ul.products li.product,
.woocommerce .shop-wrap ul.products[class*="columns-"] li.product,
.woocommerce-page .shop-wrap ul.products[class*="columns-"] li.product {
	float: none !important;
	clear: none !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.woocommerce .shop-wrap ul.products li.product a img.product-card-photo,
.woocommerce-page .shop-wrap ul.products li.product a img.product-card-photo {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	object-fit: cover;
}
.woocommerce .shop-wrap ul.products li.product .button,
.woocommerce-page .shop-wrap ul.products li.product .button {
	margin: 0 !important;
	line-height: 1.2;
}