/*
 * MK Kataloog — kangaste leht (/kangad/).
 * Laaditakse ainult siis, kui lehe sisus on lühikood [mk_kangad] (inc/assets.php).
 * Märgendi annab plugin MK Pood (class-mk-pood-fabric-gallery.php); siin on ainult stiil.
 */

/* ---------------------------------------------------------------- */
/* 0. Leht .mk-prose sees                                            */
/*                                                                   */
/* Lühikood satub lehe sisusse (page.php → .mk-prose), kus theme.css  */
/* taltsutab migreeritud HTML-i reegliga `width: auto !important`     */
/* igale järglasele. Meie oma komponent peab laiuse tagasi võtma —    */
/* ainus koht siin failis, kus !important on lubatud.                 */
/* ---------------------------------------------------------------- */

.mk-prose .mk-kangad .mk-swatch__btn,
.mk-prose .mk-kangad .mk-swatch__img {
	width: 100% !important;
}

/* Kanganäidiste ruudustik vajab rohkem laiust kui tavaline tekstileht (820 px). */
.mk-page--narrow:has(.mk-kangad) {
	max-width: calc(var(--mk-content) + var(--mk-gutter) * 2);
}

.mk-kangad {
	display: flex;
	flex-direction: column;
	gap: var(--mk-s4);
	margin: var(--mk-s3) 0 0;
	color: var(--mk-ink);
}

/* ---------------------------------------------------------------- */
/* 1. Filtririba: tootja- ja kangagrupikiibid                        */
/* ---------------------------------------------------------------- */

.mk-kangad__filters {
	display: flex;
	flex-direction: column;
	gap: var(--mk-s1);
	padding-bottom: var(--mk-s2);
	border-bottom: 1px solid var(--mk-line);
}

.mk-kangad .mk-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* .mk-chip tuleb theme.css-ist; siin ainult see, mida .mk-prose a üle kirjutaks. */
.mk-kangad .mk-chip {
	color: var(--mk-ink);
	text-decoration: none;
}

.mk-kangad .mk-chip:hover {
	color: var(--mk-ink);
	text-decoration: none;
}

.mk-kangad .mk-chip--on,
.mk-kangad .mk-chip--on:hover {
	color: #fff;
}

.mk-kangad .mk-chip__count {
	font-size: 11px;
	font-weight: 500;
	opacity: 0.65;
}

/* ---------------------------------------------------------------- */
/* 2. Tootja, kangagrupp, kollektsioon                               */
/* ---------------------------------------------------------------- */

.mk-kangad__maker {
	display: flex;
	flex-direction: column;
	gap: var(--mk-s2);
	scroll-margin-top: 96px;
}

/* .mk-prose h2 on (0,1,1) — seepärast kahe klassiga valija. */
.mk-kangad .mk-section__title {
	margin: 0;
	font-family: var(--mk-font-display);
	font-size: var(--mk-fs-h2);
	font-weight: 700;
	color: var(--mk-ink);
}

.mk-kangad__group {
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius);
	background: var(--mk-bg);
}

.mk-kangad__summary {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: var(--mk-control-h);
	padding: 10px 14px;
	font-family: var(--mk-font-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--mk-ink);
	cursor: pointer;
	list-style: none;
}

.mk-kangad__summary::-webkit-details-marker {
	display: none;
}

/* Oma nool, et see käituks ühtmoodi kõigis brauserites. */
.mk-kangad__summary::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-left: auto;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--mk-ease, 160ms ease);
}

.mk-kangad__group[open] > .mk-kangad__summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.mk-kangad__summary:hover {
	background: var(--mk-surface);
}

.mk-kangad__count {
	font-size: var(--mk-fs-meta);
	font-weight: 500;
	color: var(--mk-muted);
}

.mk-kangad__family {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0 14px var(--mk-s2);
}

.mk-kangad__family + .mk-kangad__family {
	padding-top: var(--mk-s2);
	border-top: 1px solid var(--mk-line);
}

/* .mk-prose h3 on (0,1,1) — seepärast kahe klassiga valija. */
.mk-kangad .mk-kangad__familyname {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 0;
	font-family: var(--mk-font-display);
	font-size: var(--mk-fs-h4);
	font-weight: 600;
	color: var(--mk-ink);
}

.mk-kangad__familyname span {
	font-size: 11.5px;
	font-weight: 500;
	color: var(--mk-muted);
}

/* ---------------------------------------------------------------- */
/* 3. Näidiste ruudustik                                             */
/* ---------------------------------------------------------------- */

/* .mk-prose ul annab loendile täpid ja sisenihke — võtame need maha. */
.mk-kangad .mk-swatches__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk-kangad .mk-swatch {
	margin: 0;
	min-width: 0;
	list-style: none;
}

.mk-kangad .mk-swatch__btn {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: zoom-in;
}

/* WooCommerce'i `.woocommerce img { height: auto }` on (0,1,1) — siin (0,2,0). */
.mk-kangad .mk-swatch__img {
	display: block;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius);
	background: var(--mk-surface);
}

.mk-kangad .mk-swatch__btn:hover .mk-swatch__img {
	border-color: var(--mk-ink);
}

.mk-kangad .mk-swatch__btn:focus-visible .mk-swatch__img {
	outline: 2px solid var(--mk-ink);
	outline-offset: 1px;
}

.mk-kangad .mk-swatch__name {
	font-size: 11.5px;
	line-height: 1.3;
	color: var(--mk-muted);
	overflow-wrap: anywhere;
}

.mk-kangad__note {
	margin: var(--mk-s3) 0 0;
	font-size: var(--mk-fs-meta);
	color: var(--mk-muted);
}

@media (min-width: 480px) {
	.mk-kangad .mk-swatches__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 700px) {
	.mk-kangad .mk-swatches__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.mk-kangad .mk-swatches__grid {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------- */
/* 4. Suurendusvaade (dialoog)                                       */
/*                                                                   */
/* Märgendi ehitab siin plugin (assets/kangad.js): pilt + riba, kus   */
/* on nimi ning nupud eelmine / järgmine / sulge. Tootelehel on sama  */
/* komponendi rikkalikum variant (woo-product.css + assets/js/        */
/* lightbox.js); ühine on välimus, mõõdud ja ≥44 px puutesihtmärk.    */
/* ---------------------------------------------------------------- */

.mk-lightbox {
	max-width: min(92vw, 1100px);
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: var(--mk-radius);
	background: var(--mk-bg);
	color: var(--mk-ink);
	overflow: hidden;
}

/* NB: display'd tohib anda ainult [open]-olekule — muidu lööks autori
   reegel üle brauseri `dialog:not([open]) { display: none }` reegli. */
.mk-lightbox[open] {
	display: flex;
	flex-direction: column;
}

.mk-lightbox::backdrop {
	background: rgba(0, 0, 0, 0.8);
}

/* Lauaarvutis jääb pilt oma mõõtu (dialoog kahaneb pildi järgi), telefonis
   venib kogu vaateakna laiusele — vt allpool 560 px reegleid. max-height
   jätab ribale ruumi, et see ei kataks kunagi pilti. */
.mk-lightbox .mk-lightbox__img {
	display: block;
	align-self: center;
	max-width: 100%;
	max-height: calc(92vh - 76px);
	height: auto;
	margin: 0;
	object-fit: contain;
	background: var(--mk-surface);
}

.mk-lightbox__bar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-top: 1px solid var(--mk-line);
	background: var(--mk-bg);
}

/* Nimi ja asukoht ("3 / 24") ühes rühmas, nagu tootelehe suurendusvaates
   (woo-product.css) — nupud jäävad riba teise serva. */
.mk-lightbox__text {
	display: flex;
	flex: 1 1 auto;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.mk-lightbox__title {
	font-family: var(--mk-font-display);
	font-size: 14px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* Asukoht: tabelinumbrid ei hüppa kangalt kangale liikudes. */
.mk-lightbox__pos {
	flex: none;
	font-size: 12.5px;
	color: var(--mk-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.mk-lightbox__pos[hidden] {
	display: none;
}

.mk-lightbox__nav {
	display: flex;
	flex: none;
	gap: 8px;
}

.mk-lightbox__close,
.mk-lightbox__prev,
.mk-lightbox__next {
	flex: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--mk-line-2);
	border-radius: var(--mk-radius);
	background: var(--mk-bg);
	color: var(--mk-ink);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.mk-lightbox__close:hover,
.mk-lightbox__prev:hover,
.mk-lightbox__next:hover {
	border-color: var(--mk-ink);
}

/* Telefonis läheb suur vaade üle terve ekraani: pilt keskel, riba all.
   dvh võtab arvesse brauseri kahaneva aadressiriba; vh on varuks. */
@media (max-width: 560px) {
	.mk-lightbox {
		width: 100vw;
		max-width: 100vw;
		height: 100vh;
		height: 100dvh;
		max-height: 100vh;
		max-height: 100dvh;
		margin: 0;
		border-radius: 0;
	}

	.mk-lightbox .mk-lightbox__img {
		flex: 1 1 auto;
		align-self: stretch;
		width: 100%;
		min-height: 0;
		max-height: 100%;
	}
}