/* ==========================================================================
   KIRUR NISIM THEME - css/nisim/pages/catalog-category.css   (owner: catalog)
   Category page (view/pages/catalog-category.tpl + the product card
   view/components/catalog-category-item.tpl): compact hero, breadcrumbs,
   side menu + intro text + product grid, mist band with the bottom text,
   CTA band.
   Shared components come from base.css (.nis-pagehero--compact,
   .nis-crumbs-bar, .nis-side, .nis-prodcard, .nis-badge, .nis-rich, .nis-cta,
   .nis-kicker, .nis-btn); only the page blocks live here (prefix .nis-ctg).
   The block between the two SHARED markers is repeated verbatim in
   catalog-search.css (every page loads only its own page file): edit it
   here and copy it there.
   Keep it minifier-safe (see the header of base.css); check with css-lint.php.
   ========================================================================== */

/* == SHARED with catalog-search.css: start == */

/* ---------- layout: side menu + content column ---------- */
.nis-ctg__body {
	padding: clamp(48px, 5vw, 80px) var(--nis-gutter);
}
.nis-ctg__layout {
	display: grid;
	grid-template-columns: minmax(0, 270px) minmax(0, 1fr);
	gap: clamp(28px, 3.4vw, 56px);
	align-items: start;
}
.nis-ctg__main {
	min-width: 0;
}
/* ---------- side menu card (design): the whole card is shown (no inner scroll),
   sticky under the header. When the card is taller than the window, catalog.js sets
   --nis-side-top so that it sticks by its bottom edge: every link stays reachable ---------- */
@media (min-width: 1100px) {
	.nis-ctg__layout > .nis-side {
		top: var(--nis-side-top, calc(var(--nis-hdr-h) + 20px));
		max-height: none;
		overflow: visible;
	}
}
/* sub-categories: smaller and lighter, aligned with their parents (design: padding 9px 14px 9px 28px) */
.nis-ctg__layout > .nis-side li li > a {
	padding-inline: 14px 28px;
}

/* ---------- product grid ---------- */
.nis-ctg__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: clamp(16px, 1.8vw, 26px);
}
.nis-ctg__grid .nis-prodcard__title {
	text-wrap: pretty;
}
/* optional ribbon text of a product (CMS field, not used today) */
.nis-prodcard .imtext {
	position: absolute;
	top: 14px;
	inset-inline-end: 14px;
	z-index: 2;
	max-width: calc(100% - 28px);
	padding: 6px 14px;
	border-radius: var(--nis-r-pill);
	background: var(--nis-gold);
	color: var(--nis-white);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}
/* price rows under the name: the wholesale price / stock of a logged-in
   wholesaler (.nis-prodcard__meta) and the shop price block (not used today) */
.nis-prodcard__body > [itemprop="offers"] {
	color: var(--nis-text-soft);
	font-size: 14.5px;
	font-weight: 300;
	line-height: 1.5;
}
.nis-prodcard__body > .nis-prodcard__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 20px;
	margin-top: 12px;
	padding-top: 11px;
	border-top: 1px solid var(--nis-line-2);
}
.nis-prodcard__body > [itemprop="offers"] .priceNum,
.nis-prodcard__body > [itemprop="offers"] .priceCurr {
	color: var(--nis-navy);
	font-weight: 600;
}
.nis-prodcard__body > [itemprop="offers"] .priceNum > * {
	display: inline;
}

/* ---------- empty state (a category without products, a search without results).
   The wording sits in data-nis-text and is printed by css, so it adds no body text to the page ---------- */
.nis-ctg__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(40px, 5vw, 72px) 24px;
	border: 1px solid var(--nis-line-2);
	border-radius: var(--nis-r-card-sm);
	background: var(--nis-white);
	text-align: center;
}
.nis-ctg__empty-icon {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--nis-mist);
	color: var(--nis-navy);
	font-size: 30px;
}
.nis-ctg__empty-title {
	margin-top: 22px;
	color: var(--nis-navy);
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 600;
	line-height: 1.35;
	text-wrap: balance;
}
.nis-ctg__empty-text {
	max-width: 44ch;
	margin: 10px 0 0;
	color: var(--nis-text-soft);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.8;
	text-wrap: pretty;
}
.nis-ctg__empty [data-nis-text]::before {
	content: attr(data-nis-text);
}
.nis-ctg__empty > .nis-btn {
	margin-top: 26px;
}

/* ---------- CTA band (shared component): both title lines wrap evenly on narrow screens
   (the bold line is its own box, so it is balanced too instead of leaving one word behind) ---------- */
.nis-cta__title,
.nis-cta__title > .nis-b {
	text-wrap: balance;
}
.nis-cta__title > .nis-b {
	display: inline-block;
}

@media (max-width: 1099.98px) {
	.nis-ctg__body {
		padding-top: 28px;
	}
	/* the side menu becomes a collapsible block above the content (base.css) */
	.nis-ctg__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
	.nis-ctg__grid {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	}
}
@media (max-width: 599.98px) {
	.nis-ctg__body {
		padding-top: 22px;
		padding-bottom: 56px;
	}
	.nis-ctg__layout {
		gap: 20px;
	}
	/* phones: two compact columns (a category holds up to 172 products) */
	.nis-ctg__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.nis-ctg__grid .nis-prodcard {
		--nis-prodcard-img-h: clamp(118px, 38vw, 190px);
		border-radius: var(--nis-r-thumb);
	}
	.nis-ctg__grid .nis-prodcard__well img {
		padding: 8px;
	}
	.nis-ctg__grid .nis-prodcard__body {
		justify-content: flex-start;
		min-height: 0;
		padding: 11px 12px 13px;
	}
	.nis-ctg__grid .nis-prodcard__title {
		font-size: 14.5px;
		line-height: 1.4;
	}
	.nis-ctg__grid .nis-badge {
		display: none;
	}
	.nis-prodcard .imtext {
		top: 8px;
		inset-inline-end: 8px;
		max-width: calc(100% - 16px);
		padding: 4px 10px;
		font-size: 12px;
	}
	.nis-prodcard__body > [itemprop="offers"] {
		font-size: 13.5px;
	}
	.nis-prodcard__body > .nis-prodcard__meta {
		gap: 0 12px;
		margin-top: 9px;
		padding-top: 8px;
	}
	.nis-ctg__empty {
		padding: 36px 20px;
	}
	.nis-ctg__empty-icon {
		width: 64px;
		height: 64px;
		font-size: 27px;
	}
	.nis-ctg__empty-title {
		margin-top: 18px;
	}
}
/* == SHARED with catalog-search.css: end == */

/* ---------- intro text above the products (CMS field category_info_t, 8 of 34 categories) ---------- */
.nis-ctg__intro {
	margin-bottom: clamp(30px, 3.4vw, 46px);
}
.nis-ctg__intro:empty {
	display: none;
}
/* headings inside the intro stay below the page title */
.nis-ctg__intro h2,
.nis-ctg__intro h3 {
	margin: 1.5em 0 .5em;
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
}

/* ---------- bottom text (CMS field category_info_b, 7 of 34 categories): full-bleed mist band.
   One 900px column by default; two columns when the text has exactly two h2 (end of this block) ---------- */
.nis-ctg__more {
	padding: clamp(56px, 6vw, 92px) var(--nis-gutter);
	background: var(--nis-mist);
	font-size: 16px;
	line-height: 1.8;
}
.nis-ctg__more:empty {
	display: none;
}
.nis-ctg__more > * {
	max-width: 900px;
}
.nis-ctg__more h2 {
	margin: 44px 0 30px;
	font-size: clamp(26px, 2.6vw, 38px);
	text-wrap: balance;
	break-after: avoid;
	break-inside: avoid;
}
.nis-ctg__more h3 {
	margin: 30px 0 10px;
	font-size: clamp(18px, 1.5vw, 20px);
	break-after: avoid;
	break-inside: avoid;
}
.nis-ctg__more > :first-child {
	margin-top: 0;
}
.nis-ctg__more li {
	break-inside: avoid;
}
/* numerals of an ordered list: the design's 15px gap */
.nis-ctg__more ol:not([class]) > li {
	padding-inline-start: 33px;
}
/* list markers of both CMS texts: taken out of the text flow, so the white
   space the editor leaves after <li> cannot indent the first line */
.nis-ctg__intro ul:not([class]) > li::before,
.nis-ctg__intro ol:not([class]) > li::before,
.nis-ctg__more ul:not([class]) > li::before,
.nis-ctg__more ol:not([class]) > li::before {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	width: auto;
	margin: 0;
}
.nis-ctg__intro ul:not([class]) > li::before {
	top: .82em;
	top: calc(.5lh - 3px);
	inset-inline-start: 4px;
	width: 6px;
}
.nis-ctg__intro ol:not([class]) > li::before {
	top: 1px;
}
.nis-ctg__more ul:not([class]) > li::before {
	top: 4px;
}
/* closing paragraph after a list: ruled off */
.nis-ctg__more > ul + p:last-child,
.nis-ctg__more > ol + p:last-child {
	margin-top: 32px;
	padding-top: 26px;
	border-top: 1px solid var(--nis-line-3);
	font-size: 16.5px;
	line-height: 1.9;
}
@supports selector(:has(*)) {
	/* a paragraph that only carries pictures: one row */
	.nis-ctg__more > p:has(> img) {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: clamp(16px, 2vw, 28px);
		max-width: none;
	}
	.nis-ctg__more > p:has(> img) > img {
		flex: 0 1 auto;
		min-width: 0;
		max-width: min(100%, 500px) !important;
		margin: 0 !important;
	}
	/* exactly two h2: two columns, every h2 heads its own column (a forced
	   column break is only safe while the band really has two columns) */
	@media (min-width: 900px) {
		.nis-ctg__more:has(> h2 ~ h2):not(:has(> h2 ~ h2 ~ h2)) {
			column-count: 2;
			column-gap: clamp(32px, 4vw, 72px);
		}
		.nis-ctg__more:has(> h2 ~ h2):not(:has(> h2 ~ h2 ~ h2)) > * {
			max-width: none;
		}
		.nis-ctg__more:has(> h2 ~ h2):not(:has(> h2 ~ h2 ~ h2)) > h2 ~ h2 {
			margin-top: 0;
			break-before: column;
		}
		/* the last block of the first column must not add its margin to the band */
		.nis-ctg__more:has(> h2 ~ h2):not(:has(> h2 ~ h2 ~ h2)) > :has(+ h2),
		.nis-ctg__more:has(> h2 ~ h2):not(:has(> h2 ~ h2 ~ h2)) > :has(+ [hidden] + h2) {
			margin-bottom: 0;
		}
	}
}

@media (max-width: 599.98px) {
	.nis-ctg__intro {
		margin-bottom: 26px;
		font-size: 16px;
	}
	.nis-ctg__more {
		padding-block: 48px;
	}
	.nis-ctg__more h2 {
		margin: 38px 0 22px;
	}
}