/* Products family (catalogue and product pages). Spacing, type and colour are native controls and kit bindings; this file holds state (filter, zebra, hover), the search field, tier switches and what no control reaches. */

/* ---- catalogue: search field (the one HTML widget; type reads the kit's search-products step) ---- */
.iwg-p-search { display: flex; align-items: stretch; border: 2px solid var(--intwater-blue); background: var(--intwater-white); }
.iwg-p-search__icon { display: flex; align-items: center; justify-content: center; width: 62px; flex: none; background: var(--intwater-blue); color: var(--intwater-white); }
.iwg-p-search .iwg-p-search__input { flex: 1; min-width: 0; margin: 0; padding: 20px 22px; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: transparent; appearance: none; -webkit-appearance: none;
	font-family: var(--e-global-typography-intwater_search_products-font-family), sans-serif; font-weight: var(--e-global-typography-intwater_search_products-font-weight);
	font-size: var(--e-global-typography-intwater_search_products-font-size); line-height: var(--e-global-typography-intwater_search_products-line-height); color: var(--intwater-ink); }
.iwg-p-search__input::placeholder { color: var(--intwater-secondary); opacity: 1; }
.iwg-p-search:focus-within { outline: 2px solid var(--intwater-orange); outline-offset: 2px; }
.iwg-p-search .iwg-p-search__clear { flex: none; margin: 0; padding: 0 22px; border: 0; border-left: 1px solid var(--intwater-border-section); border-radius: 0; background: transparent; cursor: pointer; color: var(--intwater-secondary);
	font-family: var(--e-global-typography-intwater_micro_label-font-family), sans-serif; font-weight: 800; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; }
.iwg-p-search .iwg-p-search__clear:hover, .iwg-p-search .iwg-p-search__clear:focus-visible { color: var(--intwater-blue); background: transparent; }
.iwg-p-search__clear[hidden] { display: none; }

/* ---- catalogue: filter chips, reset, count ---- */
html body .elementor .iwg-p-find .iwg-chip.is-active .elementor-button,
html body .elementor .iwg-p-find .iwg-chip.is-active .elementor-button:hover,
html body .elementor .iwg-p-find .iwg-chip.is-active .elementor-button:focus-visible { background-color: var(--intwater-blue); border-color: var(--intwater-blue); color: var(--intwater-white); }
html body .elementor .iwg-p-find .iwg-chip .elementor-button { transition: background-color 180ms linear, color 180ms linear; }
html body .elementor .iwg-p-reset { display: none; }
html body .elementor .iwg-p-reset.is-on, html body .elementor .iwg-p-empty .iwg-p-reset { display: block; }
html body .elementor .iwg-p-reset .elementor-button { transition: background-color 180ms linear, color 180ms linear; }

/* ---- catalogue: rows. Zebra follows the visible rows (js adds .is-alt); hover wins over the stripe. ---- */
html body .elementor .iwg-p-row { background-color: var(--intwater-white); transition: background-color 180ms linear; }
html body .elementor .iwg-p-row.is-alt { background-color: var(--intwater-zebra); }
html body .elementor .iwg-p-row:hover { background-color: var(--intwater-row-hover); }
html body .elementor .iwg-p-row.is-hidden, html body .elementor .iwg-p-note.is-hidden { display: none; }
html body .elementor .iwg-p-row > * { min-width: 0; }
html body .elementor .iwg-p-img { overflow: hidden; }
html body .elementor .iwg-p-name .elementor-heading-title a { transition: color 180ms linear; }
html body .elementor .iwg-p-name .elementor-heading-title a:hover, html body .elementor .iwg-p-name .elementor-heading-title a:focus-visible { color: var(--intwater-blue); }
html body .elementor .iwg-p-doc .elementor-button { transition: background-size 900ms cubic-bezier(.25, .8, .3, 1), color 300ms linear, background-color 200ms linear; }
html body .elementor .iwg-p-empty { display: none; }
html body .elementor .iwg-p-empty.is-on { display: flex; }
html body .elementor .iwg-p-note strong { font-weight: 800; color: var(--intwater-body); }

@media (max-width: 767px) {
	/* The comp's six columns cannot hold a phone: thumbnail beside the stacked cells. */
	html body .elementor .iwg-p-row > .iwg-p-img { grid-row: 1 / span 5; align-self: start; min-height: 112px; }
	html body .elementor .iwg-p-row > :not(.iwg-p-img) { grid-column: 2; }
	html body .elementor .iwg-p-row .iwg-p-doc { margin-top: 6px; }
}

/* ---- product pages ---- */
/* Specification and component tables (one HTML widget each; the sanctioned census exception). */
.iwg-spec { width: 100%; margin: 0; border-collapse: collapse; border-top: 1px solid var(--intwater-border-strong); }
.iwg-spec th, .iwg-spec td { padding: 24px 16px; border-bottom: 1px solid var(--intwater-hairline); text-align: left; vertical-align: top; }
.iwg-spec tr:nth-child(even) > * { background: var(--intwater-zebra); }
.iwg-spec th { width: 300px; color: var(--intwater-ink);
	font-family: var(--e-global-typography-intwater_card_title_systems-font-family), sans-serif; font-weight: var(--e-global-typography-intwater_card_title_systems-font-weight);
	font-size: var(--e-global-typography-intwater_card_title_systems-font-size); line-height: var(--e-global-typography-intwater_card_title_systems-line-height); letter-spacing: var(--e-global-typography-intwater_card_title_systems-letter-spacing); }
.iwg-spec td { color: var(--intwater-body);
	font-family: var(--e-global-typography-intwater_section_intro-font-family), sans-serif; font-weight: var(--e-global-typography-intwater_section_intro-font-weight);
	font-size: var(--e-global-typography-intwater_section_intro-font-size); line-height: var(--e-global-typography-intwater_section_intro-line-height); }
.iwg-spec thead th { width: auto; }

/* Documentation cards: the download glyph after the label (lucide download). */
html body .elementor .iwg-dl .elementor-heading-title { display: inline-flex; align-items: center; gap: 9px; }
html body .elementor .iwg-dl .elementor-heading-title::after { content: ''; flex: none; width: 13px; height: 13px; background-color: currentColor;
	-webkit-mask: var(--iwg-icon-download) center / contain no-repeat; mask: var(--iwg-icon-download) center / contain no-repeat; }
html body .elementor .iwg-p-doccard { transition: background-color 200ms linear; }
html body .elementor .iwg-p-doccard > * { position: relative; z-index: 1; }
html body .elementor .iwg-p-doccard .iwg-p-doccard__meta { flex: 1; }
:root { --iwg-icon-download: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27/%3E%3Cpath%20d=%27m7%2010%205%205%205-5%27/%3E%3Cpath%20d=%27M12%2015V3%27/%3E%3C/svg%3E"); }

/* "Also in" rows: name turns blue on hover, the arrow is the row's own ::after (grid column three). */
html body .elementor .iwg-p-rel::after { content: ''; width: 16px; height: 16px; justify-self: end; background-color: var(--intwater-muted);
	-webkit-mask: var(--iwg-icon-arrow) center / contain no-repeat; mask: var(--iwg-icon-arrow) center / contain no-repeat; }
html body .elementor .iwg-p-rel .iwg-p-rel__name .elementor-heading-title { transition: color 180ms linear; }
html body .elementor .iwg-p-rel:hover .iwg-p-rel__name .elementor-heading-title, html body .elementor .iwg-p-rel:focus-visible .iwg-p-rel__name .elementor-heading-title { color: var(--intwater-blue); }

@media (max-width: 767px) {
	html body .elementor .iwg-p-rel::after { display: none; }
	.iwg-spec th, .iwg-spec td { display: block; width: auto; padding: 14px 12px; }
	.iwg-spec th { padding-bottom: 0; border-bottom: 0; }
}