/* Kaksipalstalayout arkistosivuille (kauppa/brändi/haku): suodattimet ovat
   nyt product-collection-lohkon SISÄLLÄ (product-templaten rinnalla), eivät
   sen sisarelementtinä — tämä on välttämätöntä jotta suodattimet perivät
   product-collectionin tarjoaman kontekstin (mm. forcePageReload:false),
   jolloin WooCommercen oma reititin voi päivittää tulokset selainpuolella
   ilman koko sivun uudelleenlatausta. Kaksipalstavisuaali tehdään CSS Gridillä
   product-collectionin omaan kääre-diviin: suodatinpalsta ("filters") kattaa
   kaikki rivit vasemmalla, tuotelista+sivutus+ei-tuloksia pinoutuvat oikealle
   ("grid"/"pagination"/"noresults") — grid-template-areas sopii tähän
   flexboxia paremmin, koska flex laittaisi kaikki neljä lohkoa samalle
   riville (flex-wrap:nowrap) tai rikkoisi järjestyksen (wrap). */
.cosmetsky-archive-collection {
	display: grid;
	grid-template-columns: 240px 1fr;
	grid-template-areas:
		"filters grid"
		"filters pagination"
		"filters noresults";
	column-gap: 2.5rem;
	row-gap: 1rem;
	align-items: start;
}

/* Nollataan WordPressin automaattinen blockGap-marginaali
   (:root :where(.is-layout-flow) > * { margin-block-start: 1.5rem }), joka
   lisäisi ylimääräisen välin jokaiselle grid-lapselle paitsi ensimmäiselle —
   välit hoidetaan jo row-gap/column-gap-ominaisuuksilla. */
.cosmetsky-archive-collection > * {
	margin-block-start: 0;
}

.cosmetsky-archive-collection > .wp-block-template-part {
	grid-area: filters;
	min-width: 0;
}

.cosmetsky-archive-collection > .wc-block-product-template {
	grid-area: grid;
	min-width: 0;
}

.cosmetsky-archive-collection > .wp-block-query-pagination {
	grid-area: pagination;
}

.cosmetsky-archive-collection > .wp-block-woocommerce-product-collection-no-results {
	grid-area: noresults;
}

/* product-collection renderöi automaattisesti tyhjän notices-kääreen
   ensimmäiseksi lapsekseen (esim. suodatinvirheitä varten) — sillä ei ole
   nimettyä grid-aluetta, joten annetaan sen viedä koko leveys ettei se
   päädy ruudukon automaattisen sijoittelun kautta väärään soluun. */
.cosmetsky-archive-collection > .wc-block-components-notices {
	grid-column: 1 / -1;
}

/* min-width:0 tarvitaan jokaisella sisäkkäisellä flex/grid-tasolla erikseen
   (suodatinpaneeli → suodatinsektio → WooCommercen omat sisäiset flex-/grid-
   elementit kuten checkbox-listan rivit ja hintaliukusäätimen ruudukko) —
   muuten flex-lapsen oletus min-width:auto laskee leveyden sisällön mukaan
   eikä asetettu leveys koskaan toteudu. Sen sijaan että ylikirjoitettaisiin
   jokainen WC:n luokka erikseen (helppo unohtaa jokin), pakotetaan se
   kerralla kaikille suodatinpalstan sisällä oleville elementeille. */
.cosmetsky-archive-collection > .wp-block-template-part * {
	min-width: 0;
}

.cosmetsky-archive-collection .wc-block-product-filter-checkbox-list__text {
	overflow-wrap: anywhere;
}

/* Hinnan min/max-tekstikentät: WooCommercen oma max-width:60px-sääntö
   (".wc-block-product-filter-price-slider .text input[type=text]") vaatii
   esivanhemman jolla on TARKALLEEN luokka "wc-block-product-filter-price-
   slider" — sellaista ei todellisessa DOM:ssa ole, vain sen __content/
   __left/__right-alaosat. WC:n oma sääntö ei siis koskaan täsmää, ja kenttä
   jää ilman leveysrajaa. Kohdistetaan oikeisiin, todellisiin luokkiin
   (__left/__right) ja asetetaan raja itse. */
.cosmetsky-archive-collection .wc-block-product-filter-price-slider__left input[type="text"],
.cosmetsky-archive-collection .wc-block-product-filter-price-slider__right input[type="text"] {
	box-sizing: border-box;
	max-width: 55px;
	width: 100%;
	padding: 8px 4px;
}

@media (max-width: 689px) {
	.cosmetsky-archive-collection {
		grid-template-columns: 1fr;
		grid-template-areas:
			"filters"
			"grid"
			"pagination"
			"noresults";
	}
}

/* Suodatinpaneelin sisältö: jokainen suodatin omana lohkonaan, kevyt
   erotinviiva sektioiden välissä luettavuuden vuoksi. */
.cosmetsky-filter-section {
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.cosmetsky-filter-section:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.cosmetsky-filter-section .wp-block-heading {
	margin: 0 0 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.7;
}

/* "Filter products" -avausnappi (mobiili) samaan pilleri-tyyliin muun
   sivuston painikkeiden kanssa. */
.wc-block-product-filters__open-overlay {
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 5px;
	padding: 0.55em 1em;
}

.wc-block-product-filters__apply {
	border-radius: 5px;
}

/* Piilotetaan koko suodatinsektio (otsikko + suodatin), kun WooCommerce on jo
   merkinnyt itse suodattimen tyhjäksi (ei yhtään osumaa nykyisillä muilla
   valinnoilla) — muuten otsikko jäisi näkyviin tyhjän suodattimen yläpuolelle. */
.cosmetsky-filter-section:has(> .wc-block-product-filter--hidden) {
	display: none;
}

/* WooCommercen oma suodatindraaperi vaihtaa desktop/mobiili-tilaa 601px:ssä,
   mutta muu teema (ruudukko, layout-pino) vaihtaa 690px:ssä. Toistetaan tässä
   WC:n "mobiili"-tilan säännöt (ks. product-filters-style.css) 601–689px
   välille tavallisilla luokkavalitsimilla — WC:n omat säännöt on kirjoitettu
   :where()-valitsimilla (spesifisyys 0), joten tavallinen luokka voittaa ne
   aina ilman !important-sääntöjä riippumatta lataysjärjestyksestä. */
@media (max-width: 689px) {
	.wc-block-product-filters .wc-block-product-filters__open-overlay,
	.wc-block-product-filters .wc-block-product-filters__overlay-header,
	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__open-overlay,
	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-header {
		display: flex;
	}

	.wc-block-product-filters .wc-block-product-filters__overlay-footer,
	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-footer {
		display: block;
	}

	.wc-block-product-filters .wc-block-product-filters__overlay,
	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay {
		background-color: transparent;
		color: inherit;
		inset: 0;
		top: var(--top-padding);
		pointer-events: none;
		position: fixed;
		transition: background-color 0.5s;
	}

	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay {
		background-color: rgba(95, 95, 95, 0.35);
		pointer-events: auto;
	}

	.wc-block-product-filters .wc-block-product-filters__overlay-wrapper,
	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-wrapper {
		height: 100%;
		width: 100%;
	}

	.wc-block-product-filters .wc-block-product-filters__overlay-dialog,
	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog {
		position: absolute;
	}

	.wc-block-product-filters .wc-block-product-filters__overlay-dialog {
		transform: translateY(100vh);
		transition: none;
	}

	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog {
		transform: translateY(0);
		transition: transform 0.5s;
	}

	.wc-block-product-filters .wc-block-product-filters__overlay-content,
	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-content {
		flex-grow: 1;
		overflow-x: hidden;
		overflow-y: scroll;
		padding: 0 var(--wp--preset--spacing--40);
	}
}

/* Tuotemerkkisuodattimen hierarkia: WooCommerce laskee jokaiselle termille
   depth/parent-tiedon mutta checkbox-list-lohko itse renderöi kaikki aina
   litteänä listana (ei tuettua "dropdown"-näkymää ydintuotteessa). Alamerkit
   (assets/js/brand-filter-hierarchy.js merkitsee ne tällä luokalla depth>0
   perusteella) piilotetaan oletuksena ja avataan ylämerkin vieressä olevalla
   JS:n lisäämällä nuolipainikkeella. */
.cosmetsky-brand-child {
	display: none;
}

.cosmetsky-brand-child.is-visible {
	display: block;
}

.cosmetsky-brand-child .wc-block-product-filter-checkbox-list__label {
	padding-left: 1.25rem;
}

/* Nappi on item-divin suora lapsi (ei <label>:n sisällä, ettei <label>-
   elementin oma klikkauksen välitys checkboxille sotke tilaa), joten se
   asemoidaan absoluuttisesti rivin oikeaan reunaan. */
.wc-block-product-filter-checkbox-list__item {
	position: relative;
}

.cosmetsky-has-children .wc-block-product-filter-checkbox-list__label {
	padding-right: 1.5rem;
}

.cosmetsky-brand-toggle {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	color: inherit;
	display: inline-flex;
	align-items: center;
	transition: transform 0.15s ease;
}

.cosmetsky-brand-toggle[aria-expanded="true"] {
	transform: translateY(-50%) rotate(180deg);
}

.cosmetsky-brand-toggle[aria-expanded="true"] {
	transform: rotate(180deg);
}