/*
 * Daylon — shop listing, category, tag and search results (DAY-17, against DAY-11 v2;
 * DAY-320 against v4). The product card itself is product-card.css.
 *
 * Breakpoint: 1024px, matching style.css (DAY-33 §2) — one number for the whole
 * chrome+shop, not a second breakpoint the tester has to learn.
 *
 * Tokens come from theme.json (STANDARDS.md §7 — no raw hex/px when a preset exists).
 */

/* ---------------------------------------------------------------- heading */

.daylon-shop-heading {
	padding-block: var(--wp--preset--spacing--40);
}

.daylon-shop-title {
	margin-bottom: var(--wp--preset--spacing--20);
}

.daylon-shop-count {
	margin: 0;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
}

/* Size comes from the block's fontSize attribute (archive-product.html): its preset class is
   !important, so a font-size here would never apply. */
.daylon-shop-breadcrumb {
	color: var(--wp--preset--color--secondary);
	margin-block: var(--wp--preset--spacing--30) 0;
}

/* ---------------------------------------------------------------- mobile bar */

.daylon-shop-mobile-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	position: sticky;
	/* Under the site header, which is sticky too (style.css): at `top: 0` this bar slid
	   behind it and was never seen again. chrome.js measures the header; 56px is its min-height. */
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--daylon-header-height, 56px));
	z-index: 30;
	padding-block: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--base);
	border-block: 1px solid var(--wp--preset--color--border-light);
}

.daylon-shop-mobile-bar__filter,
.daylon-shop-mobile-bar__sort select {
	min-height: 44px;
	padding-inline: var(--wp--preset--spacing--30);
	background: transparent;
	border: 1px solid var(--wp--preset--color--border);
	font: inherit;
}

.daylon-shop-mobile-bar__count {
	margin-inline-start: auto;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--secondary);
	white-space: nowrap;
}

/* One row — Filtrar · Ordenar · the count (§3.4). With the select's label on a line of its
   own the bar wrapped to three and stood 134px tall on a phone, which is a lot of screen for
   a bar that stays on it. The label is still there for a screen reader; the select's own
   value ("Novedades", "Precio: …") says what it is to the eye. */
.daylon-shop-mobile-bar__sort {
	flex: 1 1 auto;
	min-width: 0;
}

.daylon-shop-mobile-bar__sort select {
	width: 100%;
}

.daylon-shop-mobile-bar__sort .daylon-shop-sort__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.daylon-shop-mobile-bar {
		display: none;
	}
}

/* ---------------------------------------------------------------- layout */

.daylon-shop-layout {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	align-items: flex-start;
}

/* A column flex item is as wide as its content unless told otherwise; the grid has none of
   its own. The layout group is a flow group, which gives its second child a block-gap top
   margin: beside the filters at desktop width that set the results 32px lower than the column
   they sit next to. The flex gap already does the spacing. */
.daylon-shop-layout > .daylon-shop-results {
	width: 100%;
	margin-block-start: 0;
}

@media (min-width: 1024px) {
	.daylon-shop-layout {
		flex-direction: row;
		gap: var(--wp--preset--spacing--60);
	}

	/* 220px, down from 260: the facet values are single words, and every pixel this column
	   gives up is a third of a pixel on each photograph (§2.1 — the photograph is the argument). */
	.daylon-shop-filters {
		flex: 0 0 220px;
	}

	.daylon-shop-results {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* ---------------------------------------------------------------- filters */

.daylon-shop-filters {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	width: 100%;
}

/* `display: flex` above outranks the browser's own `[hidden] { display: none }`, so the panel
   shop.js closes on load stayed open: the whole facet list sat above the grid on a phone, the
   first garment ~1,100px down (DAY-319 F-03). */
.daylon-shop-filters[hidden] {
	display: none;
}

/* Below 1024px the filters live behind "Filtrar" (§3.4). Closed from the first paint wherever
   scripts run, so the list never flashes open before shop.js loads; where they do not run the
   media query is false, the form stays in the page and still filters with a plain GET. A
   browser too old to know `scripting` gets the `[hidden]` rule above once shop.js has run. */
@media (max-width: 1023.98px) and (scripting: enabled) {
	body:not(.daylon-shop-filters-open) .daylon-shop-filters {
		display: none;
	}
}

/* Open: a full-screen panel over the page — "Borrar" top right, the facets, "Ver N prendas"
   fixed at the bottom (§3.4). The page behind does not scroll. Scoped to the open state so
   that without scripts the form is never a fixed sheet with nothing to close it. */
@media (max-width: 1023.98px) {
	body.daylon-shop-filters-open {
		overflow: hidden;
	}

	body.daylon-shop-filters-open .daylon-shop-filters {
		position: fixed;
		inset: var(--wp-admin--admin-bar--height, 0px) 0 0 0;
		z-index: 60;
		width: auto;
		padding-inline: var(--wp--preset--spacing--40);
		background: var(--wp--preset--color--base);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	body.daylon-shop-filters-open .daylon-shop-filters__head {
		position: sticky;
		top: 0;
		z-index: 1;
		padding-block: var(--wp--preset--spacing--20);
		background: var(--wp--preset--color--base);
		border-bottom: 1px solid var(--wp--preset--color--border-light);
	}

	body.daylon-shop-filters-open .daylon-shop-filters__apply {
		position: sticky;
		bottom: var(--wp--preset--spacing--30);
		margin-block-start: auto;
		width: 100%;
		min-height: 48px;
		/* The panel's own ground above and below the button, so a facet scrolling past is not
		   read through the gap around it. */
		box-shadow: 0 calc(-1 * var(--wp--preset--spacing--30)) 0 var(--wp--preset--color--base), 0 var(--wp--preset--spacing--30) 0 var(--wp--preset--color--base);
	}

	/* The "Preferencias de cookies" pill (daylon-core, consent.css) is fixed at the bottom left
	   above everything, this sheet included, and sat on the left of "Ver N prendas" (DAY-411).
	   It steps out while the panel is open, as it does for the mobile menu (style.css,
	   DAY-338): `visibility` takes it out of the tab order and the accessibility tree as well,
	   and leaves `hidden` — its "no choice made yet" state — to consent.js. */
	body.daylon-shop-filters-open .daylon-consent-reopen {
		visibility: hidden;
	}
}

.daylon-shop-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* The close control belongs to the open panel and to nothing else: in the page it was a "✕"
   with nothing to close (DAY-319 F-03). */
.daylon-shop-filters__close {
	display: none;
	min-width: 44px;
	min-height: 44px;
	background: transparent;
	border: none;
}

@media (max-width: 1023.98px) {
	body.daylon-shop-filters-open .daylon-shop-filters__close {
		display: block;
	}
}

.daylon-shop-filters__clear,
.daylon-shop-filters__apply {
	min-height: 44px;
	padding-inline: var(--wp--preset--spacing--40);
	background: transparent;
	border: 1px solid var(--wp--preset--color--border-dark);
	font: inherit;
}

.daylon-shop-filters__apply {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--primary);
}

@media (min-width: 1024px) {
	/* Desktop: results sit next to the controls (DAY-11 §3.5) — no apply step needed. */
	.daylon-shop-filters__apply {
		display: none;
	}
}

.daylon-facet {
	margin: 0;
	padding: 0;
	border: none;
}

.daylon-facet legend {
	font-weight: 600;
	margin-bottom: var(--wp--preset--spacing--20);
}

.daylon-facet__options {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.daylon-facet__option {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: 44px;
}

.daylon-facet__option input {
	width: 20px;
	height: 20px;
}

.daylon-facet__show-all {
	background: none;
	border: none;
	text-decoration: underline;
	padding: 0;
	min-height: 44px;
	color: var(--wp--preset--color--primary);
}

.daylon-facet__price {
	display: flex;
	gap: var(--wp--preset--spacing--30);
}

/* The two fields share the row equally and may shrink. A number input has an intrinsic width
   (about 230px here) and a flex item will not go below its content, so two of them made the
   row 470px wide; a fieldset is never narrower than its content, so that became the filter
   column's width in place of its 220px, on every listing where the price facet shows (DAY-459). */
.daylon-facet__price label {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
	font-size: var(--wp--preset--font-size--x-small);
}

.daylon-facet__price input {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 44px;
	padding-inline: var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--border);
}

/* ---------------------------------------------------------------- toolbar, chips */

.daylon-shop-toolbar {
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--40);
}

.daylon-shop-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.daylon-chip {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding-inline: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border-dark);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--x-small);
	text-decoration: none;
	color: var(--wp--preset--color--main);
}

.daylon-chip--clear-all {
	border-style: dashed;
}

/* The desktop copy of the sort control. Below 1024px the mobile bar carries its own copy, so
   this one is display:none — not moved off-screen — which also takes it out of the tab order
   and the accessibility tree (DAY-106: both copies rendered at 390px). */
.daylon-shop-sort {
	display: none;
}

@media (min-width: 1024px) {
	.daylon-shop-sort {
		display: block;
	}
}

.daylon-shop-sort select {
	min-height: 44px;
	font: inherit;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
}

/* ---------------------------------------------------------------- empty states */

.daylon-shop-empty {
	padding-block: var(--wp--preset--spacing--60);
}

.daylon-shop-empty[hidden] {
	display: none;
}

/* §5 state 4, a search that found nothing: the term, the field refilled, then the categories. */
.daylon-shop-empty__search {
	max-width: 22rem;
	margin-block: var(--wp--preset--spacing--40);
}

.daylon-shop-empty__field {
	width: 100%;
	min-height: 44px;
	padding-inline: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
	font: inherit;
}

.daylon-shop-empty__categories ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	list-style: none;
	margin: 0;
	padding: 0;
}

.daylon-shop-empty__categories a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ---------------------------------------------------------------- the grid */

/* §2.1: 2 columns below 768px, 3 from there up — never 4. `minmax(0, 1fr)`, not `1fr`: a
   bare `1fr` track is as wide as its longest unbreakable content at least, so one long name
   could widen its column and narrow the others. The gutter is generous on purpose (§6). */
.daylon-shop-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.daylon-shop-grid .wp-block-post-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	}
}

/* The post template keeps core's flow layout, which spaces every child but the first with a
   block-gap top margin. In a grid that pushes every card but the first down 32px and adds it to
   each row gap (DAY-129, the same fault as the home page's DAY-111); the grid gap already does
   the spacing. Holds for the sparse grid below too. */
.daylon-shop-grid .wp-block-post-template > * {
	margin-block: 0;
}

/* DAY-11 §5 state 2: 1–2 products never stretch to fill the row — a fixed card width,
   left-aligned, is a small shop looking curated; a stretched grid looks broken. */
.daylon-shop-grid[data-daylon-sparse] .wp-block-post-template {
	grid-template-columns: repeat(auto-fit, minmax(0, 220px));
	justify-content: flex-start;
}


.daylon-shop-pagination {
	display: flex;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--60);
}

/* ---------------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.daylon-shop-filters {
		transition: none !important;
	}
}