/* ITEMPLS — design V2: mode first, category first.
 *
 * Loaded last. Mode visibility is driven ENTIRELY by <html data-mode> and
 * <html data-cart-mode>, which a tiny inline script sets before first paint
 * (inc/v2.php). No price, button or card depends on JavaScript having run
 * to be correct on first render.
 */

/* ============================================================ mode control */
.it-modectl {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	background: var(--it-surface-3);
	border: 1px solid var(--it-line);
	border-radius: var(--it-r-pill);
	flex: none;
}
.it-modectl__realm {
	padding: 0 8px 0 10px;
	font-size: var(--it-fs-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--it-text-faint);
	white-space: nowrap;
}
html body .it-modectl__opt {
	appearance: none;
	border: 1px solid transparent;
	background: transparent;
	color: var(--it-text-muted);
	font: 650 var(--it-fs-sm)/1 var(--it-font);
	padding: 8px 14px;
	border-radius: var(--it-r-pill);
	cursor: pointer;
	white-space: nowrap;
	min-height: 34px;
}
html body .it-modectl__opt:hover { color: var(--it-text); background: var(--it-surface-2); }
html body .it-modectl__opt:focus-visible { outline: none; box-shadow: var(--it-focus); }
html[data-mode="ladder"] body .it-modectl__opt.is-ladder {
	background: var(--it-ladder-soft); border-color: var(--it-ladder-line); color: var(--it-ladder);
}
html[data-mode="non-ladder"] body .it-modectl__opt.is-nonladder {
	background: var(--it-nonladder-soft); border-color: var(--it-nonladder-line); color: var(--it-nonladder);
}
/* The cart has committed the order to one realm: the other is visibly locked. */
html[data-cart-mode="ladder"] body .it-modectl__opt.is-nonladder,
html[data-cart-mode="non-ladder"] body .it-modectl__opt.is-ladder { opacity: .45; }
html[data-cart-mode] body .it-modectl__opt[aria-disabled="true"]::after { content: " \1F512"; font-size: 10px; }

/* Header placement: beside search on desktop, its own row on phones. */
@media (max-width: 860px) {
	.it-modectl--header {
		order: 11;
		flex-basis: 100%;
		justify-content: space-between;
		margin-bottom: var(--it-s3);
	}
	.it-modectl--header .it-modectl__opt { flex: 1 1 0; }
}
@media (min-width: 861px) and (max-width: 1100px) {
	.it-modectl--header .it-modectl__realm { display: none; }
}
.it-modectl--drawer { margin: var(--it-s4) 0 0; display: flex; }
.it-modectl--drawer .it-modectl__opt { flex: 1 1 0; }

/* =========================================================== mode gate */
/* Only until a mode is chosen. */
.it-gate { display: none; }
html:not([data-mode]) .it-gate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--it-s3) var(--it-s5);
	margin-top: var(--it-s4);
	padding: var(--it-s4) var(--it-s5);
	background: linear-gradient(90deg, var(--it-ladder-soft), var(--it-nonladder-soft));
	border: 1px solid var(--it-line-strong);
	border-radius: var(--it-r-lg);
}
.it-gate__text { color: var(--it-text-muted); font-size: var(--it-fs-sm); max-width: 60ch; }
.it-gate__text strong { color: var(--it-text); display: block; font-size: var(--it-fs-md); margin-bottom: 2px; }
.it-modectl--gate { background: var(--it-bg); }
.it-modectl--gate .it-modectl__opt { padding: 10px 18px; font-size: var(--it-fs-base); }
.it-homegate { margin-top: var(--it-s5); }
html[data-mode] .it-homegate { display: none; }
@media (max-width: 520px) {
	.it-modectl--gate { width: 100%; }
	.it-modectl--gate .it-modectl__opt { flex: 1 1 0; }
}

/* ============================================================ mega nav */
@media (min-width: 861px) {
	.it-nav__list { overflow: visible; }
	.it-nav__item { position: relative; }
	.it-nav__item.has-menu > a::after {
		content: ""; display: inline-block; margin-left: 6px; vertical-align: 2px;
		border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0;
	}
	.it-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 300;
		display: none;
		gap: var(--it-s6);
		padding: var(--it-s5);
		min-width: 240px;
		background: var(--it-surface-2);
		border: 1px solid var(--it-line-strong);
		border-radius: 0 0 var(--it-r-lg) var(--it-r-lg);
		box-shadow: var(--it-shadow-lg);
	}
	.it-nav__item.has-menu:hover > .it-menu,
	.it-nav__item.has-menu:focus-within > .it-menu { display: flex; }
	.it-menu__col { min-width: 170px; }
	.it-menu__col ul { list-style: none; margin: var(--it-s2) 0 0; padding: 0; columns: 1; }
	.it-menu__col li a {
		display: block !important;
		padding: 6px 0 !important;
		border: 0 !important;
		color: var(--it-text-muted) !important;
		font-weight: 500 !important;
	}
	.it-menu__col li a:hover { color: var(--it-text) !important; }
	html body .it-menu__all {
		display: block !important;
		padding: 0 0 6px !important;
		border-bottom: 1px solid var(--it-line) !important;
		color: var(--it-text) !important;
		font-weight: 700 !important;
		font-size: var(--it-fs-xs) !important;
		letter-spacing: .06em;
		text-transform: uppercase;
	}
}
@media (max-width: 860px) {
	.it-menu { display: none !important; }
}

/* Drawer: the whole tree, folded. */
.it-drawer__list details > summary {
	list-style: none;
	cursor: pointer;
	padding: 12px 6px;
	color: var(--it-text);
	font-weight: 600;
	border-bottom: 1px solid var(--it-line);
}
.it-drawer__list details > summary::-webkit-details-marker { display: none; }
.it-drawer__list details > summary::after { content: "+"; float: right; color: var(--it-text-faint); }
.it-drawer__list details[open] > summary::after { content: "\2212"; }
.it-drawer__list details ul { list-style: none; margin: 0; padding: 0 0 var(--it-s2) var(--it-s4); }
.it-drawer__list details ul a { font-weight: 500; color: var(--it-text-muted); border-bottom: 0; padding: 9px 6px; }

/* ====================================================== catalogue head */
.it-hub { margin-bottom: var(--it-s5); }
.it-crumbs {
	display: flex; flex-wrap: wrap; gap: 6px;
	font-size: var(--it-fs-sm);
	color: var(--it-text-faint);
	margin-bottom: var(--it-s2);
}
.it-crumbs a { color: var(--it-text-muted); }
.it-crumbs a:hover { color: var(--it-text); }
.it-hub__titlerow { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--it-s3); }
html body .it-hub__title { margin: 0; font-size: var(--it-fs-2xl); line-height: var(--it-lh-tight); color: var(--it-text) !important; font-family: var(--it-font) !important; }
.it-hub__count { color: var(--it-text-muted); font-size: var(--it-fs-sm); }
.it-hub__intro { margin: var(--it-s2) 0 0; color: var(--it-text-muted); max-width: 72ch; }
@media (max-width: 520px) { html body .it-hub__title { font-size: var(--it-fs-xl); } }

.it-chips {
	display: flex;
	gap: var(--it-s2);
	margin-top: var(--it-s4);
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 2px;
}
.it-chips::-webkit-scrollbar { display: none; }
@media (min-width: 861px) { .it-chips { flex-wrap: wrap; overflow: visible; } }
.it-chip {
	display: inline-flex; align-items: center; gap: 8px;
	flex: none;
	padding: 8px 14px;
	background: var(--it-surface);
	border: 1px solid var(--it-line);
	border-radius: var(--it-r-pill);
	color: var(--it-text);
	font-size: var(--it-fs-sm);
	font-weight: 600;
	white-space: nowrap;
}
.it-chip span { color: var(--it-text-faint); font-weight: 500; }
.it-chip:hover { border-color: var(--it-line-strong); background: var(--it-surface-2); }
.it-chip[aria-current="page"] { border-color: var(--it-accent-line); background: var(--it-accent-soft); color: var(--it-accent); }

/* Sort control sits under the head, right-aligned. */
html body .woocommerce-ordering { float: none; margin: 0 0 var(--it-s4) auto; display: flex; justify-content: flex-end; }

/* Root hub: item-class tiles. */
.it-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--it-s3);
	margin: 0 0 var(--it-s5);
}
.it-tile {
	display: flex; flex-direction: column; gap: 4px;
	padding: var(--it-s4);
	background: var(--it-surface);
	border: 1px solid var(--it-line);
	border-radius: var(--it-r-lg);
}
.it-tile:hover { border-color: var(--it-accent-line); background: var(--it-surface-2); }
.it-tile__name { color: var(--it-text); font-weight: 700; }
.it-tile__count { color: var(--it-text-faint); font-size: var(--it-fs-sm); }

/* Hub guide, below the products: supports the purchase, never buries it. */
.it-guide {
	margin-top: var(--it-s7);
	padding: var(--it-s5);
	background: var(--it-surface);
	border: 1px solid var(--it-line);
	border-radius: var(--it-r-lg);
	max-width: 860px;
	color: var(--it-text-muted);
}
html body .it-guide h2 { margin: 0 0 var(--it-s3); font-size: var(--it-fs-lg); color: var(--it-text) !important; font-family: var(--it-font) !important; }
.it-guide p { margin: 0 0 var(--it-s3); }
.it-guide strong { color: var(--it-text); }

/* ================================================== compact catalogue V3 */
/* Measured before: 5 columns, a 419px card and a 211px media well at 1424px.
 * The image is there for recognition; inspection is the hover tooltip's job,
 * so a permanently large light rectangle spends the card's best space on the
 * least useful thing. */
/* The ratio is a TOKEN, used by the well, the image and the no-image
 * placeholder. Overriding one rule left the image square and the well
 * followed it, so the token is redefined on the card instead. Was 1/1:
 * on a 150px card that is a 150px light plinth. */
html body ul.products li.product { --it-card-ratio: 4 / 3; }
html body ul.products li.product .it-card__body {
	padding: var(--it-s2) var(--it-s3) var(--it-s3);
	gap: 3px;
}
html body ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--it-fs-sm);
	line-height: 1.25;
	/* Two lines, no more: one long runeword name must not make its entire
	   row taller than the others. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(2 * 1.25 * var(--it-fs-sm));
}
html body ul.products li.product .it-card__type {
	font-size: 10.5px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .04em;
}
html body ul.products li.product .it-card__foot {
	margin-top: auto;
	padding-top: 4px;
	gap: var(--it-s2);
}
html body ul.products li.product .it-card__actions .it-btn,
html body ul.products li.product .it-card__actions .add_to_cart_button {
	padding: 5px 10px;
	font-size: var(--it-fs-xs);
}
.it-card__price .it-p { font-size: var(--it-fs-sm); }

/* The roll list is the densest thing on the card, so it gets the tightest
 * rhythm of all. */
html body ul.products li.product .it-fb { margin-top: 6px; padding-top: 6px; }
html body ul.products li.product .it-fb__lab { padding: 2px 4px; }
html body ul.products li.product .it-fb__rolls { max-height: 132px; overflow-y: auto; }

/* =============================================================== cards */
/* The media well: a deliberate light plinth. Item art is multiplied onto it,
 * so a baked-in white background becomes the well rather than a rectangle. */
ul.products li.product .it-card__media {
	position: relative;
	z-index: 2;                 /* above the card-wide title link */
	display: block;
	aspect-ratio: var(--it-card-ratio);
	background: var(--it-well);
	isolation: isolate;
	border-bottom: 1px solid var(--it-line);
	overflow: hidden;
}
html body ul.products li.product .it-card__media img {
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto;
	object-fit: contain;
	padding: 14% !important;
	background: transparent !important;
	border: 0 !important;
	mix-blend-mode: multiply;
	transition: transform var(--it-t);
}
ul.products li.product:hover .it-card__media img { transform: scale(1.04); }
html body ul.products li.product .it-card__noimg {
	height: 100%;
	aspect-ratio: auto;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	background: transparent;
	border: 0;
	color: var(--it-well-ink);
	opacity: .7;
}
.it-card__stats {
	position: absolute; left: 8px; bottom: 8px;
	display: inline-flex; align-items: center; gap: 4px;
	padding: 3px 8px;
	background: rgba(11, 14, 19, .82);
	color: #eef2f7;
	border-radius: var(--it-r-pill);
	font-size: 11px; font-weight: 700; letter-spacing: .03em;
	pointer-events: none;
}
html body ul.products li.product .it-card__type {
	margin: 0;
	color: var(--it-text-faint);
	font-size: var(--it-fs-xs);
	font-weight: 600;
	letter-spacing: .02em;
}

/* Price for the active mode; "from" before one is chosen. */
.it-card__price .it-p { display: none; font-weight: 700; color: var(--it-text); }
html:not([data-mode]) .it-card__price .it-p--none,
html[data-mode="ladder"] .it-card__price .it-p--ladder,
html[data-mode="non-ladder"] .it-card__price .it-p--nonladder { display: block; }
.it-card__price .it-p--na { font-size: var(--it-fs-xs); font-weight: 600; color: var(--it-text-faint); }

/* Actions: Add for the active mode, View before a mode is chosen. */
.it-card__actions { display: flex; gap: var(--it-s2); align-items: center; position: relative; z-index: 3; }
.it-card__actions .it-add,
.it-card__actions .it-view { display: none !important; }
html:not([data-mode]) .it-card__actions .it-view,
html[data-mode="ladder"] .it-card__actions .it-add--ladder,
html[data-mode="non-ladder"] .it-card__actions .it-add--nonladder { display: inline-flex !important; }
/* A card with no Add for the active mode (not sold, or unavailable) keeps
 * a way in. */
html[data-mode="ladder"] li.product:not(:has(.it-add--ladder)) .it-card__actions .it-view,
html[data-mode="non-ladder"] li.product:not(:has(.it-add--nonladder)) .it-card__actions .it-view { display: inline-flex !important; }
html body ul.products li.product .it-card__actions .it-btn {
	min-height: 38px;
	padding: 8px 16px;
	white-space: nowrap;
}
ul.products li.product .it-card__actions .added_to_cart {
	font-size: var(--it-fs-xs);
	color: var(--it-accent);
	padding: 0 !important;
	min-height: 0;
	background: none;
	border: 0;
}
ul.products li.product .it-add.loading { opacity: .6; pointer-events: none; }
ul.products li.product .it-add.added::after { content: " \2713"; }

/* A product not sold in the active mode is not shown in that mode. (Lists
 * reached through a mode-aware link are filtered server-side too.) */
html[data-mode="ladder"] ul.products li.product:not(.it-has-ladder),
html[data-mode="non-ladder"] ul.products li.product:not(.it-has-nonladder) { display: none !important; }

/* V1 per-card mode badges are gone: the mode is global now. */
ul.products li.product .it-card__meta { display: none; }

/* ========================================================== detail peek */
.it-peek {
	position: fixed;
	z-index: 600;
	max-width: min(420px, 46vw);
	padding: 6px;
	background: #07090d;
	border: 1px solid var(--it-line-strong);
	border-radius: var(--it-r);
	box-shadow: var(--it-shadow-lg);
	pointer-events: none;
	opacity: 0;
	transition: opacity 90ms linear;
}
.it-peek[data-open="true"] { opacity: 1; }
.it-peek__img { display: block; max-width: 100%; max-height: 70vh; height: auto; border-radius: var(--it-r-sm); }
.it-peek__cap { margin: 6px 4px 2px; color: var(--it-text-faint); font-size: 11px; line-height: 1.35; }

/* ============================================================== dialog */
.it-dlg {
	max-width: 420px;
	padding: var(--it-s5);
	background: var(--it-surface-2);
	color: var(--it-text);
	border: 1px solid var(--it-line-strong);
	border-radius: var(--it-r-lg);
	box-shadow: var(--it-shadow-lg);
}
.it-dlg::backdrop { background: rgba(0,0,0,.6); }
html body .it-dlg__t { margin: 0 0 var(--it-s2); font-size: var(--it-fs-lg); color: var(--it-text) !important; font-family: var(--it-font) !important; }
.it-dlg__d { margin: 0 0 var(--it-s4); color: var(--it-text-muted); }
.it-dlg__actions { display: flex; gap: var(--it-s2); flex-wrap: wrap; }

/* ======================================================= product page */
.it-gallery__main {
	background: var(--it-well) !important;
	isolation: isolate;
}
html body .it-gallery__main img {
	mix-blend-mode: multiply;
	box-shadow: none !important;
	border-radius: 0 !important;
}
.it-gallery__main .it-card__noimg { color: var(--it-well-ink); background: transparent !important; }
.it-gallery__thumbs button { background: var(--it-well) !important; isolation: isolate; }
.it-gallery__thumbs button img { mix-blend-mode: multiply; }

/* The active mode, restated at the product, and why a card may be locked. */
.it-mode[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.it-modes__note {
	display: none;
	margin: var(--it-s2) 0 0;
	padding: var(--it-s3) var(--it-s4);
	border: 1px solid var(--it-line-strong);
	border-radius: var(--it-r);
	background: var(--it-surface-2);
	color: var(--it-text-muted);
	font-size: var(--it-fs-sm);
}
.it-modes__note[data-show="true"] { display: block; }
.it-modes__note a { color: var(--it-accent); font-weight: 600; }

/* ================================================================ cart */
html body .woocommerce-cart-form td.product-thumbnail a,
html body .woocommerce-cart-form td.product-thumbnail > img {
	display: block;
	background: var(--it-well);
	isolation: isolate;
	border-radius: var(--it-r);
}
html body .woocommerce-cart-form td.product-thumbnail img { mix-blend-mode: multiply; background: transparent !important; }

/* Single-mode product: which mode, and a warning if it is not yours. */
.it-onlymode { display: flex; flex-wrap: wrap; align-items: center; gap: var(--it-s2); margin: 0 0 var(--it-s3); }
.it-onlymode__warn { display: none; color: var(--it-warn); font-size: var(--it-fs-sm); font-weight: 600; }
html[data-mode="non-ladder"] .it-onlymode[data-only="ladder"] .it-onlymode__warn,
html[data-mode="ladder"] .it-onlymode[data-only="non-ladder"] .it-onlymode__warn { display: inline; }

/* Sort: a compact control, not a full-width bar.
 *
 * There used to be a pagination rule here, carrying the comment "the top
 * pagination is dropped everywhere; the bottom one is where a shopper looks
 * for it." Its second selector was
 *
 *     .it-shop .woocommerce-ordering ~ nav.woocommerce-pagination
 *
 * and `~` is the GENERAL sibling combinator, matching every later sibling
 * rather than the adjacent one. Shoptimizer hooks pagination to both ends of
 * the loop and both navs are siblings of .woocommerce-ordering, so the rule
 * written to hide the first hid the second too: "Showing 1-24 of 33" with no
 * way to reach the other nine, and 459 of Unique Items' 483 unreachable.
 *
 * Nothing hides pagination any more. Shoptimizer's controls are UNHOOKED in
 * inc/pagination.php and .it-pager after the grid replaces them, so there is
 * no hidden nav left to accidentally match -- and no hiding rule left for
 * someone to widen by accident. */
html body .woocommerce-ordering select,
html body .woocommerce-ordering .orderby { width: auto !important; min-width: 200px; }

/* Shoptimizer styles loop buttons as position:absolute; opacity:0 and reveals
 * them on hover. In this design the Add button is the card's point, and a
 * button that only exists on hover does not exist on a touch screen. */
html body ul.products li.product .it-card__actions .it-btn,
html body ul.products li.product .it-card__actions .add_to_cart_button {
	position: static !important;
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
	inset: auto !important;
	width: auto !important;
	pointer-events: auto;
}

/* The gallery plugin injects a second "hover swap" image as a bare child of
 * every card, which sat above the media well at its own aspect ratio. */
html body ul.products li.product > img,
html body ul.products li.product .wcspt-secondary-img { display: none !important; }

/* Phones. Another sheet forces a single column below 520px, which makes the
 * catalogue one huge card per screen; two is what fits and what the rest of
 * the system assumes. */
@media (max-width: 520px) {
	html body ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	html body .woocommerce-ordering { margin-left: 0; justify-content: flex-start; }
	html body .woocommerce-ordering select { width: 100% !important; min-width: 0; }
	html body ul.products li.product .it-card__actions .it-btn { padding: 8px 10px; font-size: var(--it-fs-xs); }
}
/* The gate's control ran off the edge of its own card on a phone: the realm
 * label and two options do not fit one row at 390px. */
@media (max-width: 620px) {
	html:not([data-mode]) .it-gate { padding: var(--it-s4); }
	.it-modectl--gate { width: 100%; flex-wrap: wrap; box-sizing: border-box; }
	.it-modectl--gate .it-modectl__realm { display: none; }
	.it-modectl--gate .it-modectl__opt { flex: 1 1 0; min-width: 0; padding: 10px 8px; }
}

/* The product summary price follows the active mode, like the cards do. */
.it-price .it-p { display: none; }
html:not([data-mode]) .it-price .it-p--none,
html[data-mode="ladder"] .it-price .it-p--ladder,
html[data-mode="non-ladder"] .it-price .it-p--nonladder { display: inline; }
.it-price .from { font-size: var(--it-fs-sm); color: var(--it-text-faint); font-weight: 500; margin-right: 6px; }

/* The media well is a padding box, not an aspect-ratio.
 *
 * `aspect-ratio` alone did not hold: the card is a column flex container, so
 * the well is a flex ITEM and its height came from the image's own ratio
 * instead -- 139px, 151px and 196px side by side in the same row. A padding
 * box with the image positioned inside it is unconditional.
 *
 * V3: 75% rather than 100%. The image is for recognition; inspection is
 * the hover tooltip's job. On a 150px card a square well is a 150px light
 * rectangle and the biggest thing on the card; 75% puts it near 112px.
 * That is the one number this mission changes here. */
html body ul.products li.product {
	--it-well-pad: 75%;
}
html body ul.products li.product .it-card__media {
	position: relative;
	height: 0 !important;
	padding-top: var(--it-well-pad) !important;
	aspect-ratio: auto !important;
	flex: none;
}
html body ul.products li.product .it-card__media img,
html body ul.products li.product .it-card__media .it-card__noimg {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
}

/* The Add button is the storefront's accent, not the parent theme's green:
 * Shoptimizer colours .add_to_cart_button from the Customizer, which lands
 * after this theme's styles. */
html body ul.products li.product .it-card__actions .it-btn--primary,
html body ul.products li.product .it-card__actions .add_to_cart_button {
	background-color: var(--it-accent) !important;
	border-color: var(--it-accent) !important;
	color: var(--it-text-on-accent) !important;
	font-weight: 700;
}
html body ul.products li.product .it-card__actions .it-btn--primary:hover,
html body ul.products li.product .it-card__actions .add_to_cart_button:hover {
	background-color: var(--it-accent-hover) !important;
	border-color: var(--it-accent-hover) !important;
}

/* Product description (SEO wave 1 content). The Customizer reaches the tab
 * panel too, so the copy we publish arrived in the parent theme's serif with
 * unstyled links. */
html body .woocommerce-Tabs-panel,
html body .itempls-wave1 {
	font-family: var(--it-font) !important;
	color: var(--it-text-muted) !important;
	font-size: var(--it-fs-base);
	line-height: var(--it-lh);
	max-width: 80ch;
}
html body .woocommerce-Tabs-panel h2,
html body .itempls-wave1 h2 {
	font-family: var(--it-font) !important;
	color: var(--it-text) !important;
	font-size: var(--it-fs-lg);
	margin: var(--it-s5) 0 var(--it-s3);
}
html body .itempls-wave1 strong { color: var(--it-text); }
html body .itempls-wave1 a,
html body .woocommerce-Tabs-panel a { color: var(--it-accent) !important; text-decoration: none; font-weight: 600; }
html body .itempls-wave1 a:hover { text-decoration: underline; }
html body .itempls-wave1 ul { margin: 0 0 var(--it-s4); padding-left: var(--it-s5); }
html body .itempls-wave1 li { margin-bottom: 6px; }
html body .woocommerce-tabs ul.tabs li a { font-family: var(--it-font) !important; }

/* WooCommerce prints its sorting form again after the loop, which reads as a
 * duplicate control now that the top one is compact and right-aligned. */
html body .it-shop .woocommerce-ordering ~ .woocommerce-ordering,
html body ul.products ~ .woocommerce-ordering { display: none !important; }

/* =========================================================== roll bands
 *
 * The roll chooser is deliberately quieter than the mode cards: mode is the
 * first decision and stays the loudest control on the page. A band is a row,
 * not a tile, because a family can offer eighteen of them (Annihilus) and a
 * grid of eighteen tiles would bury the buy button below the fold.
 */
fieldset.it-bands,
fieldset.it-bases { border: 0; padding: 0; margin: var(--it-s4) 0 0; min-width: 0; }
.it-bands__legend,
.it-bases__legend {
	display: flex; align-items: baseline; gap: var(--it-s2); flex-wrap: wrap;
	padding: 0; margin: 0 0 var(--it-s2);
	font-weight: 700; font-size: var(--it-fs-sm); color: var(--it-text);
}
.it-bands__hint,
.it-bases__hint { font-weight: 500; font-size: var(--it-fs-xs); color: var(--it-text-muted); }

.it-bands,
.it-bases {
	display: grid; gap: 6px;
	/* Eighteen rolls must not push the button off the page. */
	max-height: 336px; overflow-y: auto;
	padding-right: 2px;
}
.it-band,
.it-base {
	display: flex; align-items: center; justify-content: space-between; gap: var(--it-s3);
	padding: var(--it-s3) var(--it-s4);
	background: var(--it-surface);
	border: 1.5px solid var(--it-line);
	border-radius: var(--it-r);
	cursor: pointer;
	transition: border-color var(--it-t), background var(--it-t);
}
.it-band:hover,
.it-base:hover { border-color: var(--it-line-strong); }
.it-band input,
.it-base input { position: absolute; opacity: 0; pointer-events: none; }
.it-band__name,
.it-base__name { font-weight: 600; font-size: var(--it-fs-sm); color: var(--it-text); }
.it-band__price,
.it-base__price { font-weight: 700; font-size: var(--it-fs-base); white-space: nowrap; }
.it-band__price .from,
.it-base__price .from,
.it-card__price .from { margin-right: 5px; font-weight: 500; font-size: var(--it-fs-xs); color: var(--it-text-muted); text-transform: lowercase; }
.it-band__price .na,
.it-base__price .na { font-weight: 600; font-size: var(--it-fs-xs); color: var(--it-text-muted); }
.it-band[data-selected="true"],
.it-base[data-selected="true"] { border-color: var(--it-accent); background: var(--it-surface-2); }
.it-band[aria-disabled="true"],
.it-base[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.it-band:focus-visible,
.it-base:focus-visible { outline: none; box-shadow: var(--it-focus); }


/* The base chooser sits above the roll chooser and reads as the first
 * decision, so it gets a little more air and its own scroll ceiling:
 * Fortitude is sold in twenty bases and the list must not push the Add
 * button off the screen. A based roll list is shorter than an unbased one,
 * because only the chosen base's rolls are ever shown. */
.it-bases { max-height: 300px; }
.it-bases + .it-bands { margin-top: var(--it-s4); }
.it-bands--based { max-height: 260px; }
.it-base__name { font-weight: 600; }

/* ---------------------------------------- dense specification table ----- */
/* Many specifications are compared, not browsed: rows beat a dropdown. The
 * table scrolls inside its own box so a 151-row charm never pushes the Add
 * button off the page, and it keeps a horizontal scroller of its own so the
 * page body never scrolls sideways on a phone. */
.it-vt { margin: var(--it-s4) 0 0; }
.it-vt__head { margin-bottom: var(--it-s2); }
.it-vt__title { font-size: var(--it-fs-sm); font-weight: 700; margin: 0; color: var(--it-text); }
.it-vt__hint { font-size: var(--it-fs-xs); color: var(--it-text-muted); margin: 2px 0 0; }
.it-vt__filters {
	display: flex; flex-wrap: wrap; gap: var(--it-s2) var(--it-s3);
	align-items: end; margin-bottom: var(--it-s2);
}
.it-vt__f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.it-vt__f > span { font-size: var(--it-fs-xs); color: var(--it-text-muted); }
.it-vt__f select {
	font: inherit; font-size: var(--it-fs-sm); padding: 5px 8px; max-width: 15rem;
	border: 1.5px solid var(--it-line); border-radius: var(--it-r);
	background: var(--it-surface); color: var(--it-text);
}
.it-vt__f--chk { flex-direction: row; align-items: center; gap: 6px; font-size: var(--it-fs-sm); }
.it-vt__count { margin-left: auto; font-size: var(--it-fs-xs); color: var(--it-text-muted); }
.it-vt__scroll {
	max-height: 380px; overflow: auto;
	border: 1.5px solid var(--it-line); border-radius: var(--it-r);
	background: var(--it-surface);
}
.it-vt__table { width: 100%; border-collapse: collapse; font-size: var(--it-fs-sm); }
.it-vt__table th {
	position: sticky; top: 0; z-index: 1; text-align: left; white-space: nowrap;
	padding: 8px 12px; background: var(--it-surface-2); color: var(--it-text-muted);
	font-size: var(--it-fs-xs); text-transform: uppercase; letter-spacing: .06em;
	border-bottom: 1px solid var(--it-line);
}
.it-vt__table td { padding: 8px 12px; border-bottom: 1px solid var(--it-line); vertical-align: middle; }
.it-vt__table tbody tr:last-child td { border-bottom: 0; }
.it-vt__row { cursor: pointer; }
.it-vt__row:hover { background: var(--it-surface-2); }
.it-vt__row[data-sellable="false"] { cursor: default; color: var(--it-text-muted); }
.it-vt__row[data-sellable="false"]:hover { background: transparent; }
.it-vt__row[data-selected="true"] { background: var(--it-surface-2); box-shadow: inset 3px 0 0 var(--it-accent); }
.it-vt__p { text-align: right; white-space: nowrap; font-weight: 700; }
.it-vt__p .na { font-weight: 600; font-size: var(--it-fs-xs); color: var(--it-text-muted); }
.it-vt__p .from { margin-right: 4px; font-weight: 500; font-size: var(--it-fs-xs); color: var(--it-text-muted); text-transform: lowercase; }
.it-vt__pick { width: 1%; }
.it-vt__btn {
	font: inherit; font-size: var(--it-fs-xs); font-weight: 600; cursor: pointer;
	padding: 4px 10px; border-radius: var(--it-r);
	border: 1.5px solid var(--it-line); background: var(--it-surface); color: var(--it-text);
}
.it-vt__btn:hover { border-color: var(--it-accent); }
.it-vt__row[data-sellable="false"] .it-vt__btn { opacity: .4; cursor: not-allowed; }
.it-vt__row[data-selected="true"] .it-vt__btn { background: var(--it-accent); border-color: var(--it-accent); color: #fff; }
.it-vt__empty { font-size: var(--it-fs-sm); color: var(--it-text-muted); padding: var(--it-s3) 0 0; }
@media (max-width: 600px) {
	.it-vt__scroll { max-height: 320px; }
	.it-vt__table { font-size: var(--it-fs-xs); }
	.it-vt__table th, .it-vt__table td { padding: 7px 8px; }
}

/* ------------------------------------------------ fast variant buying --- */
/* A card carries its rolls so an experienced buyer never opens the product
 * page. The list is deliberately quiet: the item name and price stay the
 * loudest things on the card, and the rolls read as a short menu under them. */
.it-fb { margin-top: var(--it-s2); border-top: 1px solid var(--it-line); padding-top: var(--it-s2); }
.it-fb__legend {
	display: flex; justify-content: space-between; align-items: baseline;
	font-size: var(--it-fs-xs); color: var(--it-text-muted);
	text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px;
}
.it-fb__n { font-variant-numeric: tabular-nums; }
.it-fb__rolls { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.it-fb__roll { border-radius: var(--it-r); }
.it-fb__lab {
	display: flex; align-items: center; gap: var(--it-s2);
	padding: 3px 6px; cursor: pointer; font-size: var(--it-fs-xs);
	border: 1px solid transparent; border-radius: var(--it-r);
}
.it-fb__roll:hover .it-fb__lab { border-color: var(--it-line-strong); }
.it-fb__roll[data-selected="true"] .it-fb__lab {
	border-color: var(--it-accent); background: var(--it-surface-2);
}
.it-fb__roll[data-sellable="false"] .it-fb__lab { opacity: .45; cursor: not-allowed; }
.it-fb__radio { margin: 0; width: 12px; height: 12px; flex: none; accent-color: var(--it-accent); }
.it-fb__name {
	flex: 1 1 auto; min-width: 0; color: var(--it-text);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.it-fb__price { flex: none; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.it-fb__price .na, .it-fb__price .it-fb__pick { font-weight: 500; color: var(--it-text-faint); }
.it-fb__more {
	margin-top: 4px; font: inherit; font-size: var(--it-fs-xs); cursor: pointer;
	background: none; border: 0; padding: 2px 0; color: var(--it-accent); text-decoration: underline;
}
.it-fb__act { display: flex; gap: var(--it-s2); margin-top: var(--it-s2); }
.it-fb__qty {
	width: 3.2rem; flex: none; font: inherit; font-size: var(--it-fs-xs);
	padding: 5px 6px; text-align: center;
	border: 1.5px solid var(--it-line); border-radius: var(--it-r);
	background: var(--it-surface); color: var(--it-text);
}
.it-fb__add { flex: 1 1 auto; }
html body ul.products li.product .it-fb__add {
	padding: 6px 10px; font-size: var(--it-fs-xs); border-radius: var(--it-r);
}
.it-fb__add[disabled] { opacity: .45; cursor: not-allowed; }
.it-fb__msg { margin: 4px 0 0; font-size: var(--it-fs-xs); color: var(--it-text-muted); min-height: 1em; }
.it-choose__n {
	margin-left: 5px; font-variant-numeric: tabular-nums; opacity: .8;
	font-size: var(--it-fs-xs);
}

/* A banded card cannot be added in one click, so its action is a link to the
 * page where the roll is chosen. It keeps the primary button's weight: it is
 * still the card's point, just one step longer. */
html body ul.products li.product .it-card__actions .it-choose { text-decoration: none; text-align: center; }
.it-line-band { display: inline-block; margin-top: 3px; color: var(--it-text-muted); font-size: var(--it-fs-xs); font-weight: 600; }

/* ====================================================== recipe index
 *
 * A reference table that has to stay readable at 360px, where five columns
 * do not fit. Below the breakpoint each row becomes a small card and every
 * cell carries its own label from data-c, so nothing depends on a header
 * row that is no longer beside it.
 */
.it-rx { margin: var(--it-s5) 0; }
.it-rx__controls {
	display: grid; gap: var(--it-s3);
	padding: var(--it-s4);
	background: var(--it-surface-2);
	border: 1px solid var(--it-line);
	border-radius: var(--it-r-lg);
	margin-bottom: var(--it-s4);
}
.it-rx__search input {
	width: 100%; padding: var(--it-s3) var(--it-s4);
	background: var(--it-surface); color: var(--it-text);
	border: 1.5px solid var(--it-line); border-radius: var(--it-r);
	font-size: var(--it-fs-base);
}
.it-rx__row { display: flex; align-items: baseline; gap: var(--it-s3); flex-wrap: wrap; }
.it-rx__lbl { min-width: 56px; font-size: var(--it-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--it-text-muted); }
.it-rx__chips { display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 auto; }
.it-rx__chip {
	padding: 4px 10px;
	background: var(--it-surface); color: var(--it-text-muted);
	border: 1px solid var(--it-line); border-radius: 999px;
	font: inherit; font-size: var(--it-fs-xs); font-weight: 600; cursor: pointer;
}
.it-rx__chip:hover { border-color: var(--it-line-strong); color: var(--it-text); }
.it-rx__chip[data-on="true"] { background: var(--it-accent); border-color: var(--it-accent); color: #fff; }
.it-rx__count { margin: 0; font-size: var(--it-fs-sm); color: var(--it-text-muted); }

html body .it-rx__table { width: 100%; border-collapse: collapse; margin: 0; font-size: var(--it-fs-sm); }
html body .it-rx__table th,
html body .it-rx__table td { padding: var(--it-s3); text-align: left; border-bottom: 1px solid var(--it-line); vertical-align: top; }
html body .it-rx__table thead th {
	font-size: var(--it-fs-xs); text-transform: uppercase; letter-spacing: .06em;
	color: var(--it-text-muted); border-bottom-width: 2px;
}
html body .it-rx__table tbody th { font-weight: 700; color: var(--it-text); }
.it-rx__rune {
	display: inline-block; padding: 2px 7px; margin: 1px 0;
	background: var(--it-surface-2); border: 1px solid var(--it-line);
	border-radius: var(--it-r-sm); font-size: var(--it-fs-xs); font-weight: 700;
}
a.it-rx__rune { text-decoration: none; }
a.it-rx__rune:hover { border-color: var(--it-accent); color: var(--it-accent); }
.it-rx__note { color: var(--it-text-faint); font-size: var(--it-fs-xs); font-weight: 500; }
.it-rx__caveat { color: var(--it-text-muted); font-size: var(--it-fs-sm); }
.it-rx__empty { padding: var(--it-s5); text-align: center; color: var(--it-text-muted); }

@media (max-width: 720px) {
	html body .it-rx__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	/* A card-mode row adds its own padding and border. Without border-box
	 * those land OUTSIDE the 100% width and push the document 9px wider than
	 * the viewport, which is a horizontal scrollbar on every phone. */
	html body .it-rx__table,
	html body .it-rx__table tbody,
	html body .it-rx__table tr,
	html body .it-rx__table th,
	html body .it-rx__table td { box-sizing: border-box; max-width: 100%; }
	html body .it-rx__table { width: 100%; table-layout: fixed; }
	html body .it-rx__table tr {
		display: block; margin-bottom: var(--it-s3); padding: var(--it-s3);
		border: 1px solid var(--it-line); border-radius: var(--it-r);
	}
	html body .it-rx__table th,
	html body .it-rx__table td { display: flex; gap: var(--it-s3); border: 0; padding: 3px 0; }
	html body .it-rx__table th::before,
	html body .it-rx__table td::before {
		content: attr(data-c); flex: 0 0 74px;
		font-size: var(--it-fs-xs); text-transform: uppercase; letter-spacing: .06em;
		color: var(--it-text-muted); font-weight: 700;
	}
}

/* The parent theme fades the first paragraph of page content into a "lead"
 * that, on this dark palette, lands near the background. On a reference page
 * the opening paragraph is the one that explains what the page is. */
html body .itempls-recipes > p:first-of-type,
html body .entry-content .itempls-recipes > p:first-of-type {
	color: var(--it-text) !important;
	opacity: 1 !important;
	font-size: var(--it-fs-lg);
	line-height: 1.6;
}
.it-mode__price .from { margin-right: 5px; font-weight: 500; font-size: var(--it-fs-xs); color: var(--it-text-muted); }

/* ============================================ catalogue parity audit (internal)
 * Staging-only review view. Dense on purpose: the job is to scan hundreds of
 * rows and spot a wrong one, not to look like the shop. */
.it-pa__lead { color: var(--it-text-muted); }
.it-pa__totals { display: flex; flex-wrap: wrap; gap: var(--it-s2); margin: var(--it-s4) 0; }
.it-pa__tot {
	display: flex; flex-direction: column; gap: 2px; min-width: 92px;
	padding: var(--it-s3) var(--it-s4);
	background: var(--it-surface-2); border: 1px solid var(--it-line);
	border-radius: var(--it-r); font-size: var(--it-fs-xs); color: var(--it-text-muted);
}
.it-pa__tot strong { font-size: var(--it-fs-lg); color: var(--it-text); }
.it-pa__tot[data-v="MISSING_FAMILY"] strong { color: var(--it-warn, #e0a030); }
.it-pa__controls { display: grid; gap: var(--it-s3); padding: var(--it-s4);
	background: var(--it-surface-2); border: 1px solid var(--it-line);
	border-radius: var(--it-r-lg); margin-bottom: var(--it-s4); }
.it-pa__search input { width: 100%; padding: var(--it-s3) var(--it-s4);
	background: var(--it-surface); color: var(--it-text);
	border: 1.5px solid var(--it-line); border-radius: var(--it-r); font-size: var(--it-fs-base); }
.it-pa__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.it-pa__n { opacity: .6; font-weight: 500; }
html body .it-pa__h { margin: var(--it-s5) 0 var(--it-s2); font-size: var(--it-fs-lg); }
html body .it-pa__table { font-size: var(--it-fs-xs); }
html body .it-pa__table td, html body .it-pa__table th { padding: 6px var(--it-s3); }
.it-pa__dim { color: var(--it-text-faint); }
.it-pa__v { display: inline-block; padding: 2px 8px; border-radius: 999px;
	font-weight: 700; font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
	background: var(--it-surface-2); border: 1px solid var(--it-line); }
.it-pa__v[data-v="MISSING_FAMILY"] { border-color: var(--it-warn, #e0a030); color: var(--it-warn, #e0a030); }
.it-pa__v[data-v="FULL_PARITY"] { border-color: #2e7d52; color: #63c08d; }
.it-pa__v[data-v="REVIEW_REQUIRED"] { border-color: var(--it-accent); color: var(--it-accent); }
.it-pa__empty { padding: var(--it-s5); text-align: center; color: var(--it-text-muted); }


/* ============================================================ charm finder */
.it-find { max-width: 900px; margin: var(--it-s5) 0; }
.it-find__head { margin-bottom: var(--it-s4); }
html body .it-find__title { margin: 0 0 4px; font-size: var(--it-fs-lg); color: var(--it-text); }
.it-find__sub { margin: 0; color: var(--it-text-muted); font-size: var(--it-fs-sm); }
.it-find__step { margin-bottom: var(--it-s4); }
.it-find__lab {
	display: block; font-size: var(--it-fs-xs); text-transform: uppercase;
	letter-spacing: .07em; color: var(--it-text-muted); margin-bottom: 6px;
}
.it-find__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.it-find__chip {
	font: inherit; font-size: var(--it-fs-sm); cursor: pointer; padding: 5px 12px;
	border: 1.5px solid var(--it-line); border-radius: var(--it-r-pill);
	background: var(--it-surface); color: var(--it-text-muted);
}
.it-find__chip:hover { border-color: var(--it-line-strong); color: var(--it-text); }
.it-find__chip[data-on="true"] {
	border-color: var(--it-accent); background: var(--it-accent-soft); color: var(--it-accent);
}
.it-find__search {
	width: 100%; font: inherit; padding: 8px 12px; margin-bottom: 8px;
	border: 1.5px solid var(--it-line); border-radius: var(--it-r);
	background: var(--it-surface); color: var(--it-text);
}
.it-find__fams {
	list-style: none; margin: 0; padding: 0; display: grid; gap: 3px;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	max-height: 260px; overflow-y: auto;
}
.it-find__fambtn {
	width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px;
	font: inherit; font-size: var(--it-fs-sm); text-align: left; cursor: pointer;
	padding: 6px 10px; border: 1.5px solid var(--it-line); border-radius: var(--it-r);
	background: var(--it-surface); color: var(--it-text);
}
.it-find__fambtn:hover { border-color: var(--it-accent); }
.it-find__fam[data-selected="true"] .it-find__fambtn {
	border-color: var(--it-accent); background: var(--it-surface-2);
}
.it-find__famname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-find__famn { flex: none; font-size: var(--it-fs-xs); color: var(--it-text-faint); font-variant-numeric: tabular-nums; }
.it-find__fam--none { color: var(--it-text-faint); font-size: var(--it-fs-sm); padding: 6px 2px; }
.it-find__rowhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.it-find__only { font-size: var(--it-fs-xs); color: var(--it-text-muted); display: flex; align-items: center; gap: 5px; }
.it-find__filters { display: flex; gap: var(--it-s3); flex-wrap: wrap; margin: 8px 0; }
.it-find__f { display: flex; flex-direction: column; gap: 3px; }
.it-find__f > span { font-size: var(--it-fs-xs); color: var(--it-text-muted); }
.it-find__f select {
	font: inherit; font-size: var(--it-fs-sm); padding: 5px 8px; max-width: 16rem;
	border: 1.5px solid var(--it-line); border-radius: var(--it-r);
	background: var(--it-surface); color: var(--it-text);
}
.it-find__scroll {
	max-height: 360px; overflow: auto; border: 1.5px solid var(--it-line);
	border-radius: var(--it-r); background: var(--it-surface);
}
.it-find__table { width: 100%; border-collapse: collapse; font-size: var(--it-fs-sm); }
.it-find__table th {
	position: sticky; top: 0; z-index: 1; text-align: left; white-space: nowrap;
	padding: 8px 12px; background: var(--it-surface-2); color: var(--it-text-muted);
	font-size: var(--it-fs-xs); text-transform: uppercase; letter-spacing: .06em;
	border-bottom: 1px solid var(--it-line);
}
.it-find__table td { padding: 7px 12px; border-bottom: 1px solid var(--it-line); }
.it-find__row { cursor: pointer; }
.it-find__row:hover { background: var(--it-surface-2); }
.it-find__row[data-sellable="false"] { color: var(--it-text-faint); cursor: default; }
.it-find__row[data-sellable="false"]:hover { background: transparent; }
.it-find__row[data-selected="true"] { background: var(--it-surface-2); box-shadow: inset 3px 0 0 var(--it-accent); }
.it-find__p { text-align: right; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.it-find__p .na { font-weight: 600; font-size: var(--it-fs-xs); color: var(--it-text-faint); }
.it-find__pick { width: 1%; }
.it-find__btn {
	font: inherit; font-size: var(--it-fs-xs); font-weight: 600; cursor: pointer;
	padding: 4px 10px; border-radius: var(--it-r);
	border: 1.5px solid var(--it-line); background: var(--it-surface); color: var(--it-text);
}
.it-find__btn[disabled] { opacity: .4; cursor: not-allowed; }
.it-find__row[data-selected="true"] .it-find__btn { background: var(--it-accent); border-color: var(--it-accent); color: #fff; }
.it-find__loading, .it-find__none, .it-find__empty { color: var(--it-text-faint); font-size: var(--it-fs-sm); padding: 10px 12px; }
.it-find__buy {
	position: sticky; bottom: 0; margin-top: var(--it-s4);
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
	gap: var(--it-s3); padding: var(--it-s3);
	border: 1.5px solid var(--it-accent); border-radius: var(--it-r-lg);
	background: var(--it-surface-2);
}
.it-find__sel { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.it-find__selname { font-size: var(--it-fs-sm); color: var(--it-text); font-weight: 600; }
.it-find__selprice { font-size: var(--it-fs-lg); font-weight: 700; color: var(--it-text); font-variant-numeric: tabular-nums; }
.it-find__act { display: flex; gap: var(--it-s2); align-items: center; }
.it-find__msg { flex: 1 1 100%; margin: 0; font-size: var(--it-fs-xs); color: var(--it-text-muted); }
@media (max-width: 600px) {
	.it-find__fams { grid-template-columns: 1fr; max-height: 220px; }
	.it-find__scroll { max-height: 300px; }
	.it-find__buy { flex-direction: column; align-items: stretch; }
	.it-find__act { justify-content: stretch; }
	.it-find__act .it-find__add { flex: 1 1 auto; }
}