/* ==========================================================================
   KIRUR NISIM THEME - css/nisim/pages/cataloge04.css          (owner: product)
   Product page, view/pages/cataloge04.tpl (180 pages). Design: the "product"
   mock. Loaded un-bundled after base.css, shell.css and dblocks.css.

   Shared components used as they are (base.css): tokens, .dn, breadcrumbs
   (restyled to the mock below), .nis-rich (description), .nis-checks
   (feature list), .nis-btn--quote (quote pill), .nis-link--arrow,
   .nis-prodcard--related + .nis-badge ("more models" cards), .nis-cta +
   .nis-formpanel + the automatic lead-form look (quote band),
   .nis-kicker--on-navy, .ph-light. .nis-seo (secondary look of an existing
   heading, owner rule R3) is defined here, scoped to .nis-prod.
   Everything else on this page lives here under .nis-prod / .nis-prod__*.

   DOM order is pinned by the SEO fingerprint (h1, breadcrumbs, thumbnails,
   description ... form, related), so the visual order is made with grid areas
   and flex order only. The "more models" section of product.js is inserted
   right after the product block.

   Minifier-safe (platform spec, chapter 5): one declaration per line, single
   spaces, slash-star comments only, no data URIs, no double curly braces.
   ========================================================================== */


/* ---------- 1. Page frame ----------
   DOM: main block > ("more models" of product.js) > quote form band >
   (CMS related products, 3 products).
   Shown: main block > more models > quote form band (the navy band with the
   lead form always closes the page, next to the footer). */
.nis-prod {
	display: flex;
	flex-direction: column;
}
.nis-prod__main {
	order: 1;
}
.nis-prod__related {
	order: 2;
}
.nis-prod__quote {
	order: 3;
}


/* ---------- 2. Main block: breadcrumbs / gallery | title + details ----------
   The gallery spans the title row and the flexible details row, so any
   surplus height of the taller column always lands in the last row. */
.nis-prod__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: auto auto 1fr;
	grid-template-areas: "crumbs crumbs" "gallery head" "gallery info";
	column-gap: clamp(34px, 4vw, 76px);
	align-items: start;
	padding: clamp(20px, 2.4vw, 34px) var(--nis-gutter) clamp(40px, 4.2vw, 66px);
}
.nis-prod__crumbs {
	grid-area: crumbs;
	min-width: 0;
	margin-bottom: clamp(20px, 2.2vw, 34px);
}
.nis-prod__gallery {
	grid-area: gallery;
	width: 100%;
	min-width: 0;
}

/* breadcrumbs in the look of the product mock: 14px, current page bold navy, angle separators (the slash of the
   component stays in the DOM, drawn as an angle) */
.nis-prod__crumbs .Breadcrumbs {
	color: var(--nis-text-muted);
	font-size: 14px;
	font-weight: 400;
}
.nis-prod__crumbs .Breadcrumbs ul {
	gap: 2px 12px;
}
.nis-prod__crumbs .Breadcrumbs a.active {
	color: var(--nis-navy);
	font-weight: 600;
}
.nis-prod__crumbs .Breadcrumbs .sep {
	font-size: 0;
}
.nis-prod__crumbs .Breadcrumbs .sep::before {
	content: "\2039";
	color: rgba(26, 48, 82, .28);
	font-size: 13px;
}
.nis-prod__head {
	grid-area: head;
	min-width: 0;
}
.nis-prod__info {
	grid-area: info;
	min-width: 0;
}

/* bare product: at most a description - no feature list, sizes, maker logo or price (12 products: 8 without
   any text, 4 with 27 to 331 characters). The title column would end a third of the way down the picture, so
   the trust strip joins it under the quote pill and the group is centred against the picture; a group taller
   than the picture (750 below 1440px) makes the white well grow with it, the photo staying contained in its
   centre, so both columns always end together. Two-column widths only; :has()
   decides at first paint, the class .is-bare of product.js is the fallback (:is() drops the :has() branch
   where it is unknown). */
@media (min-width: 900px) {
	.nis-prod__main:is(.is-bare, :not(:has(.nis-prod__bulets, .nis-prod__spec, .nis-prod__extra:not(.is-empty), .nis-prod__maker img, .nis-prod__maker-note, .wholesale-price-info, .nis-prod__iconlist img))) {
		grid-template-rows: auto 1fr auto auto auto 1fr;
		grid-template-areas: "crumbs crumbs" "pic ." "pic head" "pic info" "pic trust" "pic .";
	}
	.nis-prod__main:is(.is-bare, :not(:has(.nis-prod__bulets, .nis-prod__spec, .nis-prod__extra:not(.is-empty), .nis-prod__maker img, .nis-prod__maker-note, .wholesale-price-info, .nis-prod__iconlist img))) .nis-prod__gallery {
		display: contents;
	}
	.nis-prod__main:is(.is-bare, :not(:has(.nis-prod__bulets, .nis-prod__spec, .nis-prod__extra:not(.is-empty), .nis-prod__maker img, .nis-prod__maker-note, .wholesale-price-info, .nis-prod__iconlist img))) .nis-prod__pic {
		display: flex;
		flex-direction: column;
		align-self: stretch;
		grid-area: pic;
		min-width: 0;
	}
	.nis-prod__main:is(.is-bare, :not(:has(.nis-prod__bulets, .nis-prod__spec, .nis-prod__extra:not(.is-empty), .nis-prod__maker img, .nis-prod__maker-note, .wholesale-price-info, .nis-prod__iconlist img))) .nis-prod__stage {
		position: relative;
		flex: 1 0 auto;
		height: auto;
		min-height: clamp(340px, 38vw, 600px);
	}
	.nis-prod__main:is(.is-bare, :not(:has(.nis-prod__bulets, .nis-prod__spec, .nis-prod__extra:not(.is-empty), .nis-prod__maker img, .nis-prod__maker-note, .wholesale-price-info, .nis-prod__iconlist img))) .nis-prod__stage > img {
		position: absolute;
		inset: 0;
	}
	.nis-prod__main:is(.is-bare, :not(:has(.nis-prod__bulets, .nis-prod__spec, .nis-prod__extra:not(.is-empty), .nis-prod__maker img, .nis-prod__maker-note, .wholesale-price-info, .nis-prod__iconlist img))) .nis-prod__trust {
		grid-area: trust;
	}
}

/* ---------- 3. Title ----------
   Kicker = the category crumb, written by product.js (the server prints the catalog name as a fallback); with
   JS on it waits up to 3s for that text, so the fallback never flashes. */
.nis-prod__kicker {
	color: var(--nis-gold);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .18em;
}
html.nis-js .nis-prod__kicker:not(.is-set) {
	animation: nisProdHold 0s linear 3s backwards;
}
@keyframes nisProdHold {
	from {
		visibility: hidden;
	}
	to {
		visibility: hidden;
	}
}
.nis-prod__title {
	margin: 14px 0 0;
	color: var(--nis-navy);
	font-size: var(--nis-fs-h1);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: var(--nis-ls-title);
	text-wrap: pretty;
	overflow-wrap: break-word;
}

/* ---------- 4. Gallery ----------
   #PicWrapper is empty in the served HTML: product.js (and, after window
   load, the legacy bundle) puts img#CurrItemPic into it. The well has the
   mock's size (column width x clamp(340px, 38vw, 600px)). The CMS photos
   are white squares and 76 of 171 fill the frame to the top and bottom
   edge, so a cut-out photo is contained (never cropped) on a white well;
   product.js adds .is-cover (the mock's "cover") when the photo has a
   backdrop of its own (8 of 172). --nis-ph (inline style = the first
   thumbnail) paints the picture before any script has run and while the
   large file is loading. */
.nis-prod__stage {
	display: block;
	width: 100%;
	height: clamp(340px, 38vw, 600px);
	overflow: hidden;
	border-radius: 22px;
	background-color: var(--nis-white);
	background-image: var(--nis-ph);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
.nis-prod__stage.is-loaded {
	background-image: none;
}
.nis-prod__stage > img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: contain;
}
.nis-prod__stage > img ~ img {
	display: none;
}
.nis-prod__stage.is-cover > img {
	object-fit: cover;
}
.nis-prod__stage.is-zoomable {
	cursor: zoom-in !important;
}
.nis-prod__stage:focus-visible {
	outline-offset: 4px;
}
.nis-prod__thumbs {
	margin-top: 18px;
}
.nis-prod__thumblist {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}
.nis-prod__thumblist > li {
	display: block;
	flex: 0 0 126px;
	min-width: 0;
}
.nis-prod__thumblist > li > span {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 7;
	padding: 8px;
	border: 1px solid var(--nis-line-3);
	border-radius: var(--nis-r-thumb);
	background: var(--nis-white);
	box-shadow: var(--nis-sh-thumb);
	cursor: pointer;
	transition: border-color var(--nis-t-color), transform .3s var(--nis-ease);
}
.nis-prod__thumblist > li > span > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.nis-prod__thumblist > li.is-active > span,
.nis-prod__thumblist > li.ON > span {
	border-color: var(--nis-gold);
}
@media (hover: hover) {
	.nis-prod__thumblist > li > span:hover {
		border-color: var(--nis-gold);
		transform: translateY(-3px);
	}
}
.nis-prod__thumblist > li > span:active {
	border-color: var(--nis-gold);
}
/* thumbnail file missing in the CMS media folder (product.js): no frame with alt text; no strip for one picture */
.nis-prod__thumblist > li.is-broken,
.nis-prod__thumbs.is-solo {
	display: none;
}

/* ---------- 5. Trust strip (decorative copy) ---------- */
.nis-prod__trust {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: clamp(30px, 3.4vw, 48px);
	padding-top: clamp(22px, 2.4vw, 34px);
	border-top: 1px solid var(--nis-gold);
}
.nis-prod__trust-item {
	min-width: 0;
	padding: 0 clamp(10px, 1.4vw, 22px);
	text-align: center;
}
.nis-prod__trust-item + .nis-prod__trust-item {
	border-inline-start: 1px solid var(--nis-line-3);
}
.nis-prod__trust-title {
	color: var(--nis-navy);
	font-size: 16.5px;
	font-weight: 600;
}
.nis-prod__trust-note {
	margin-top: 7px;
	color: var(--nis-text-muted);
	font-size: 14.5px;
	font-weight: 300;
}

/* ---------- 6. Details column ----------
   div[itemprop=description] keeps its DOM text order (description, feature
   list, manufacturer, sizes); the manufacturer strip is shown below the
   sizes table with flex order only. */
.nis-prod__body {
	display: flex;
	flex-direction: column;
}
.nis-prod__desc {
	position: relative;
	order: 1;
}
.nis-prod__bulets {
	order: 2;
}
.nis-prod__spec {
	order: 3;
}
.nis-prod__extra {
	order: 4;
}
.nis-prod__maker {
	order: 5;
}

/* description (CMS html, 1 to 6 paragraphs): the first paragraph is the lead, the following ones the lighter
   "fits for" lines; the gold rule under it is the ::after of the block. On top of .nis-rich.
   The existing label "תיאור המוצר:" stays visible as a run-in at the start of the first paragraph (label and
   first paragraph are inline; the following paragraphs are blocks), so the column keeps the mock's rhythm. */
.nis-prod__info .nis-prod__desc {
	max-width: 52ch;
	margin-top: 14px;
	color: var(--nis-text-muted);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.75;
}
.nis-prod__info .nis-prod__label--runin {
	display: inline;
	margin-inline-end: .3em;
	color: var(--nis-text-strong);
	font-size: inherit;
	font-weight: 500;
	line-height: inherit;
	letter-spacing: 0;
}
.nis-prod__info .nis-prod__lead {
	display: inline;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}
.nis-prod__info .nis-prod__lead > p:first-child {
	display: inline;
}
.nis-prod__info .nis-prod__lead *:where([style]) {
	border: 0 !important;
	background: none !important;
	color: inherit !important;
	text-align: inherit !important;
}
.nis-prod__info .nis-prod__lead p,
.nis-prod__info .nis-prod__lead h1,
.nis-prod__info .nis-prod__lead div {
	margin: 0 !important;
	padding: 0 !important;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: 0;
}
.nis-prod__info .nis-prod__lead p + p,
.nis-prod__info .nis-prod__lead div + p {
	margin-top: 10px !important;
	font-size: 17px;
	line-height: 1.85;
}
.nis-prod__info .nis-prod__lead .nis-blank,
.nis-prod__bulets .nis-blank,
.nis-prod__table > .nis-blank {
	display: none;
}
.nis-prod__desc::after {
	content: "";
	display: block;
	width: 88px;
	height: 1px;
	margin-top: clamp(18px, 2vw, 26px);
	background: var(--nis-gold);
}

/* small spaced label: the literal of the sizes block and the CMS lead paragraph of the feature list */
.nis-prod__label,
.nis-prod__bulets > p:first-child {
	margin: 0;
	color: var(--nis-gold);
	font-size: 16px;
	font-weight: 600;
	line-height: var(--nis-lh);
	letter-spacing: .18em;
}
.nis-prod__bulets > p:first-child * {
	color: inherit;
	font: inherit;
}

/* feature list = shared .nis-checks around the CMS html (p + ul [+ p]) */
.nis-prod__bulets {
	margin-top: clamp(18px, 2vw, 26px);
}
.nis-prod__bulets > ul {
	margin-top: 4px;
}
.nis-prod__bulets > ul ~ p {
	margin: 6px 0 0;
	color: var(--nis-text);
	font-size: 16px;
	font-weight: 400;
}

/* sizes: CMS table (border=1, inline width 570px, no th); the first cell of every row is its label */
.nis-prod__spec {
	margin-top: clamp(22px, 2.4vw, 32px);
	padding-top: clamp(18px, 2vw, 26px);
	border-top: 1px solid var(--nis-line-3);
}
.nis-prod__desc + .nis-prod__spec,
.nis-prod__desc + .nis-prod__maker + .nis-prod__spec,
.nis-prod__body > .nis-prod__spec:first-child,
.nis-prod__body > .nis-prod__maker:first-child + .nis-prod__spec {
	margin-top: clamp(18px, 2vw, 26px);
	padding-top: 0;
	border-top: 0;
}
.nis-prod__table {
	margin-top: 12px;
	overflow-x: auto;
}
.nis-prod__table > p {
	margin: 0;
}
.nis-prod__table table.techDet {
	display: none;
}
.nis-prod__table table {
	width: 100% !important;
	margin: 0 !important;
	overflow: hidden;
	table-layout: fixed;
	border: 1px solid var(--nis-line-3) !important;
	border-radius: var(--nis-r-thumb) !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	background: var(--nis-white) !important;
	font-family: inherit !important;
	font-size: 15.5px !important;
}
.nis-prod__table tbody,
.nis-prod__table tr {
	border: 0 !important;
	background: none !important;
}
.nis-prod__table td {
	width: auto !important;
	height: auto !important;
	padding: 16px 8px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--nis-line-2) !important;
	border-inline-start: 1px solid var(--nis-line-1) !important;
	background: none !important;
	color: var(--nis-text-strong) !important;
	font-weight: 400;
	line-height: var(--nis-lh) !important;
	text-align: center !important;
	vertical-align: middle;
}
.nis-prod__table td:first-child {
	width: 130px !important;
	padding-inline: 20px 12px !important;
	border-inline-start: 0 !important;
	background: var(--nis-mist-light) !important;
	color: var(--nis-navy) !important;
	text-align: start !important;
}
.nis-prod__table td:first-child,
.nis-prod__table td strong,
.nis-prod__table td b {
	font-size: 15px;
	font-weight: 600;
}
.nis-prod__table td:nth-child(2):last-child,
.nis-prod__table tr.nis-single > td:nth-child(2) {
	padding-inline: 20px !important;
	text-align: start !important;
}
.nis-prod__table tr:last-child > td {
	border-bottom: 0 !important;
}
.nis-prod__table td.nis-blank {
	border-inline-start-color: transparent !important;
}
.nis-prod__table td p {
	margin: 0 !important;
}
.nis-prod__table td > br:first-child {
	display: none;
}
.nis-prod__table td * {
	border: 0 !important;
	background: none !important;
	color: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
}

/* extra CMS blocks (fields Mifrat2 and description2: empty on every product today) */
.nis-prod__extra {
	margin-top: clamp(16px, 1.8vw, 24px);
}
.nis-prod__extra.is-empty {
	display: none;
}

/* manufacturer strip: label + 200x40 logo (29 products) [+ text]; not shown while it holds only the label */
.nis-prod__maker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(14px, 1.6vw, 24px);
	margin-top: clamp(16px, 1.8vw, 24px);
	padding: 14px 26px;
	border-radius: var(--nis-r-box);
	background: var(--nis-mist-light);
}
.nis-prod__maker.is-empty {
	display: none;
}
@supports selector(:has(*)) {
	.nis-prod__maker:not(:has(img)):not(:has(.nis-prod__maker-note)) {
		display: none;
	}
}
.nis-prod__maker-label {
	color: var(--nis-text-muted);
	font-size: 15px;
	font-weight: 400;
}
.nis-prod__maker-logo {
	display: flex;
	align-items: center;
	min-height: 22px;
	padding-inline-start: clamp(14px, 1.6vw, 24px);
	border-inline-start: 1px solid var(--nis-line-4);
}
.nis-prod__maker-logo:empty {
	display: none;
}
.nis-prod__maker-logo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 30px;
	mix-blend-mode: multiply;
}
.nis-prod__maker-note {
	color: var(--nis-text-soft);
	font-size: 16px;
	font-weight: 400;
}

/* wholesale price and stock (only for a logged-in wholesaler; otherwise the Offer div holds nothing but meta tags) */
.nis-prod__offer .wholesale-price-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	margin-top: clamp(16px, 1.8vw, 24px);
	padding: 16px 26px;
	border: 1px solid var(--nis-line-3);
	border-radius: var(--nis-r-box);
	background: var(--nis-white);
}
.nis-prod__offer .wholesale-price,
.nis-prod__offer .wholesale-stock {
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.nis-prod__offer .price-label,
.nis-prod__offer .stock-label {
	color: var(--nis-text-muted);
	font-size: 15px;
	font-weight: 400;
}
.nis-prod__offer .price-value,
.nis-prod__offer .price-currency {
	color: var(--nis-navy);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
}
.nis-prod__offer .price-value {
	direction: ltr;
}
.nis-prod__offer .stock-value {
	color: var(--nis-navy);
	font-size: 16px;
	font-weight: 600;
}

/* location icons (the list is empty on every product today): takes no room while empty */
.nis-prod__iconlist {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.nis-prod__iconlist > li {
	margin-top: 16px;
}
.nis-prod__iconlist img {
	display: block;
	width: auto;
	height: 44px;
}

/* quote pill = the existing in-page anchor to the form band, shared .nis-btn--quote */
.nis-prod__cta {
	margin-top: clamp(12px, 1.4vw, 18px);
}
.nis-prod__cta > li {
	display: block;
}
@supports selector(:has(*)) {
	.nis-prod__body:not(:has(> .nis-prod__desc, > .nis-prod__bulets, > .nis-prod__spec, > .nis-prod__extra, img)) ~ .nis-prod__cta {
		margin-top: clamp(22px, 2.4vw, 30px);
	}
}


/* ---------- 7. Quote form band (shared .nis-cta ground + .nis-formpanel) ----------
   Not in the mock (its pill links to the home contact form): the product form that the page always had. */
.nis-prod__quote .nis-cta__in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--nis-gap-cols);
	align-items: center;
}
.nis-prod__quote .nis-cta__title {
	font-size: clamp(28px, 3vw, 44px);
	text-wrap: balance;
}
.nis-prod__quote .nis-cta__text {
	max-width: 44ch;
	margin-top: 22px;
}
.nis-prod__quote-panel {
	min-width: 0;
}


/* ---------- 8. "More models" (every product) ----------
   --cms: the CMS related products of the template (3 products) with the mock's head; their existing h2 stays
   right below it in the secondary .nis-seo look. --auto: built by product.js from the category page
   (a.nis-prodcard cards: well + title spans). */
.nis-prod__related {
	padding: clamp(52px, 6vw, 90px) var(--nis-gutter);
	background: var(--nis-mist);
}
.nis-prod__related-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px 24px;
}
.nis-prod__related-title {
	color: var(--nis-navy);
	font-size: clamp(26px, 2.6vw, 38px);
	font-weight: 300;
	line-height: 1.25;
	letter-spacing: var(--nis-ls-title);
}
.nis-prod__related-title .nis-b {
	font-weight: 600;
}
/* "לכל הדגמים בקטגוריה" (shared .nis-link--arrow, 25px of text): a 44px tap target at every width (touch
   tablets reach 1366px); the negative margin keeps the row exactly where the text alone puts it */
.nis-prod__related-all {
	min-height: 44px;
	margin-block: -10px;
}
.nis-prod__related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: clamp(14px, 1.6vw, 22px);
	margin-top: clamp(28px, 3vw, 44px);
}

/* secondary look of an existing heading that the mock's copy replaces (owner rule R3) */
.nis-prod .nis-seo {
	max-width: 62ch;
	margin-top: clamp(18px, 2vw, 24px);
	padding-top: 14px;
	border-top: 1px solid var(--nis-line-3);
}
.nis-prod .nis-seo__title {
	margin: 0;
	color: var(--nis-navy);
	font-size: 21px;
	font-weight: 500;
	line-height: 1.4;
}

/* cards: the mock's related card (cream, 18px radius, mist well, 190px picture, 72px title row) */
.nis-prod__related .nis-prodcard {
	border-color: var(--nis-line-2);
	border-radius: var(--nis-r-card-sm);
	background: var(--nis-cream);
}
.nis-prod__related .nis-prodcard__well {
	border-bottom-color: var(--nis-line-1);
	background: var(--nis-mist-light);
}
.nis-prod__related .nis-prodcard__well img {
	height: 190px;
	padding: 12px;
}
.nis-prod__related .nis-prodcard__title,
.nis-prod__related .nis-prodcard__body {
	min-height: 72px;
	padding: 16px 20px;
	color: var(--nis-navy);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
}
.nis-prod__related .nis-prodcard__body > .nis-prodcard__title {
	min-height: 0;
	padding: 0;
}
.nis-prod__related .nis-prodcard__title a {
	color: inherit;
}
@media (hover: hover) {
	.nis-prod__related .nis-prodcard:hover {
		box-shadow: 0 20px 44px rgba(26, 48, 82, .12);
	}
	.nis-prod__related .nis-prodcard:hover .nis-prodcard__well img {
		transform: none;
	}
}


/* ---------- 9. Responsive ---------- */

/* the two columns get narrow: the trust strip stays on three one-line columns; four related cards per row */
@media (max-width: 1249.98px) {
	.nis-prod__related-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.nis-prod__trust-item {
		padding: 0 8px;
	}
	.nis-prod__trust-title {
		font-size: 15px;
	}
	.nis-prod__trust-note {
		font-size: 13.5px;
	}
}

/* mobile header bar; the two columns stay down to 900px */
@media (max-width: 1099.98px) {
	.nis-prod__thumblist > li {
		flex-basis: 104px;
	}
	.nis-prod__trust-item {
		padding: 0 6px;
	}
	.nis-prod__trust-title {
		font-size: 14px;
	}
	.nis-prod__trust-note {
		font-size: 13px;
	}
	.nis-prod__table td {
		padding-inline: 5px !important;
	}
	.nis-prod__table td:first-child {
		width: 120px !important;
		padding-inline: 14px 10px !important;
	}
}

/* one column: breadcrumbs, picture, title, details, quote pill, trust strip */
@media (max-width: 899.98px) {
	.nis-prod__main {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		grid-template-areas: "crumbs" "pic" "head" "info" "trust";
	}
	.nis-prod__gallery {
		display: contents;
	}
	.nis-prod__pic {
		grid-area: pic;
		width: 100%;
		min-width: 0;
		max-width: 560px;
		margin-inline: auto;
	}
	.nis-prod__stage {
		height: auto;
		aspect-ratio: 619 / 547;
	}
	.nis-prod__related-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.nis-prod__head {
		margin-top: clamp(26px, 5vw, 36px);
	}
	.nis-prod__info .nis-prod__desc {
		max-width: 62ch;
	}
	.nis-prod__trust {
		grid-area: trust;
		margin-top: clamp(30px, 6vw, 44px);
	}
	.nis-prod__trust-item {
		padding: 0 12px;
	}
	.nis-prod__trust-title {
		font-size: 15.5px;
	}
	.nis-prod__trust-note {
		font-size: 14px;
	}
	.nis-prod__table td {
		padding-inline: 8px !important;
	}
	.nis-prod__table td:first-child {
		width: 130px !important;
		padding-inline: 20px 12px !important;
	}
	.nis-prod__quote .nis-cta__in {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
	.nis-prod__quote .nis-cta__text {
		max-width: 56ch;
	}
}

/* phone */
@media (max-width: 599.98px) {
	.nis-prod__kicker {
		font-size: 13.5px;
	}
	.nis-prod__stage {
		aspect-ratio: 1 / 1;
		border-radius: 18px;
	}
	.nis-prod__thumbs {
		margin-top: 12px;
	}
	.nis-prod__thumblist {
		gap: 10px;
	}
	.nis-prod__thumblist > li {
		flex-basis: calc((100% - 30px) / 4);
	}
	.nis-prod__thumblist > li > span {
		padding: 6px;
		border-radius: 12px;
	}
	.nis-prod__info .nis-prod__desc {
		color: var(--nis-text-soft);
		font-size: 17px;
	}
	.nis-prod__info .nis-prod__lead p + p,
	.nis-prod__info .nis-prod__lead div + p {
		font-size: 16px;
	}
	.nis-prod__label,
	.nis-prod__bulets > p:first-child {
		font-size: 14.5px;
	}
	.nis-prod__table table {
		table-layout: auto;
		font-size: 14.5px !important;
	}
	.nis-prod__table td {
		padding: 13px 5px !important;
	}
	.nis-prod__table td:first-child {
		width: 108px !important;
		padding: 13px 10px !important;
	}
	.nis-prod__table td:first-child,
	.nis-prod__table td strong,
	.nis-prod__table td b {
		font-size: 13.5px;
	}
	.nis-prod__table tr.nis-single > td:nth-child(2) {
		padding-inline: 5px !important;
		text-align: center !important;
	}
	.nis-prod__table td:nth-child(2):last-child {
		padding-inline: 14px !important;
		text-align: start !important;
	}
	.nis-prod__maker {
		padding: 12px 18px;
	}
	.nis-prod__offer .wholesale-price-info {
		padding: 14px 18px;
	}
	.nis-prod__offer .price-value,
	.nis-prod__offer .price-currency {
		font-size: 23px;
	}
	.nis-prod__cta .nis-btn--quote {
		padding-block: 10px;
		padding-inline: 16px 10px;
		border-radius: 30px;
	}
	.nis-prod__cta .nis-btn__disc {
		width: 38px;
		height: 38px;
	}
	.nis-prod__trust {
		grid-template-columns: minmax(0, 1fr);
		padding-top: 6px;
	}
	.nis-prod__trust-item {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		padding: 13px 0;
		text-align: start;
	}
	.nis-prod__trust-item + .nis-prod__trust-item {
		border-top: 1px solid var(--nis-line-3);
		border-inline-start: 0;
	}
	.nis-prod__trust-note {
		margin-top: 0;
		color: var(--nis-text-soft);
		text-align: end;
	}
	.nis-prod__related-grid {
		display: flex;
		gap: 14px;
		margin-inline: calc(var(--nis-gutter) * -1);
		padding: 0 var(--nis-gutter) 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--nis-gutter);
		scrollbar-width: none;
	}
	.nis-prod__related-grid::-webkit-scrollbar {
		display: none;
	}
	.nis-prod__related .nis-prodcard {
		flex: 0 0 min(74%, 280px);
		scroll-snap-align: start;
	}
}