/* ITEMPLS-015 -- demand capture, the compact list, and specification search.
 *
 * Loaded last, so it can lean on v2.css rather than fight it. Everything here
 * is additive: the grid, the card and the roll picker are untouched until the
 * customer asks for the list.
 */

/* The hidden attribute has to actually hide.
 *
 * `.it-btn` sets `display: inline-flex`, and ANY author rule beats the user
 * agent's `[hidden] { display: none }` whatever the specificity -- so the
 * Request button rendered beside Add on every card in the catalogue, and the
 * cards were 30px taller for it. Both states are switched by `hidden` here,
 * so this rule is the one that has to win. */
html body [hidden] { display: none !important; }

/* A roll picker must not be wider than its card.
 *
 * `.it-fb` is a flex item, and a flex item's default `min-width: auto` refuses
 * to shrink below its content -- so a long label like "200% ED Perfect $13.25"
 * made the picker 165px wide inside a 150px card and the PRICE was the part
 * that fell off the edge. The label is the part that should yield, and it
 * already knows how to (ellipsis); it just needs to be allowed to. */
html body ul.products li.product .it-fb,
html body ul.products li.product .it-fb__rolls,
html body ul.products li.product .it-fb__roll,
html body ul.products li.product .it-fb__lab {
	min-width: 0;
	max-width: 100%;
}
/* `.it-fb__rolls` is a grid, and a grid ITEM has the same `min-width: auto`
 * refusal to shrink -- so the row itself stretched the column to 165px inside
 * a 150px card even after the picker was clamped. A minmax(0, 1fr) column is
 * the half of the fix that lives on the container. */
html body ul.products li.product .it-fb__rolls {
	grid-template-columns: minmax(0, 1fr);
}

/* The quantity box must stay 3.2rem wide, in EVERY view.
 *
 * `.it-fb__qty` is (0,1,0) and the parent theme's `input[type=number]
 * { width: 100% }` is (0,1,1), so the input filled the card: 150px in the
 * grid, 698px in a list row. Add was pushed past the card's edge and clipped
 * away -- measured at 53px past on a grid card, 41px on a list row -- so the
 * catalogue was showing a roll picker with no way to buy from it. */
html body .it-fb__qty {
	width: 3.2rem !important;
	flex: 0 0 auto;
}
html body .it-fb__act {
	display: flex;
	align-items: center;
	gap: var(--it-s2, 8px);
	flex-wrap: wrap;
}

/* ============================================================ the toolbar */

.it-tools {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--it-s3, 12px);
	flex-wrap: wrap;
	margin: 0 0 var(--it-s4, 16px);
	padding-bottom: var(--it-s3, 12px);
	border-bottom: 1px solid var(--it-line);
}
.it-tools__count {
	margin: 0;
	font-size: var(--it-fs-sm);
	color: var(--it-text-muted);
	font-variant-numeric: tabular-nums;
}
.it-tools__right {
	display: flex;
	align-items: center;
	gap: var(--it-s4, 16px);
	flex-wrap: wrap;
}
.it-tools__chk {
	display: inline-flex;
	align-items: center;
	gap: var(--it-s2, 8px);
	font-size: var(--it-fs-sm);
	color: var(--it-text-muted);
	cursor: pointer;
	user-select: none;
}
.it-tools__chk:hover { color: var(--it-text); }
.it-tools__chk input { accent-color: var(--it-accent); }
.it-tools__n {
	font-variant-numeric: tabular-nums;
	font-size: var(--it-fs-xs);
	color: var(--it-text-faint);
	background: var(--it-surface-3);
	border-radius: 999px;
	padding: 1px 7px;
}

.it-views {
	display: inline-flex;
	border: 1px solid var(--it-line);
	border-radius: 7px;
	overflow: hidden;
}
.it-views__b {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 11px;
	background: transparent;
	border: 0;
	color: var(--it-text-muted);
	font-size: var(--it-fs-sm);
	cursor: pointer;
}
.it-views__b + .it-views__b { border-left: 1px solid var(--it-line); }
.it-views__b:hover { background: var(--it-surface-2); color: var(--it-text); }
.it-views__b[aria-pressed="true"] {
	background: var(--it-accent-soft);
	color: var(--it-accent);
}
.it-views__b:focus-visible { outline: 2px solid var(--it-accent); outline-offset: -2px; }

@media (max-width: 480px) {
	.it-views__b span { display: none; }
	.it-views__b { padding: 7px 10px; }
}

/* The specification count earns its line in the list, where the
 * specification IS the decision. In the grid it costs every card a row and
 * the card already carries a roll picker, so it stays out of the way. */
html body ul.products li.product .it-card__spec { display: none; }

/* ========================================================== compact list */
/* The grid becomes one column of rows. */
html:not([data-it-view="grid"]) body ul.products.it-view--list,
html[data-it-view="list"] body ul.products {
	display: flex !important;
	flex-direction: column;
	gap: 0 !important;
	grid-template-columns: none !important;
}

/* The row: art beside everything else. */
html:not([data-it-view="grid"]) body ul.products.it-view--list li.product,
html[data-it-view="list"] body ul.products li.product {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start;
	gap: var(--it-s3, 12px);
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 10px var(--it-s3, 12px);
	border: 0;
	border-bottom: 1px solid var(--it-line);
	border-radius: 0;
	background: transparent;
}

html:not([data-it-view="grid"]) body ul.products.it-view--list li.product:hover,
html[data-it-view="list"] body ul.products li.product:hover {
	background: var(--it-surface);
}


/* The well is a padding box with height:0 in the grid. Here it is a real
 * square, small enough that the roll list is the widest thing on the row. */
html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-card__media,
html[data-it-view="list"] body ul.products li.product .it-card__media {
	flex: 0 0 56px;
	height: 56px !important;
	width: 56px;
	padding-top: 0 !important;
	border-bottom: 0;
	border-radius: 6px;
}

html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-card__media img,
html[data-it-view="list"] body ul.products li.product .it-card__media img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	padding: 8% !important;
	object-fit: contain;
}


/* The hover tooltip still works; only its badge goes, for room. */
html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-card__stats,
html[data-it-view="list"] body ul.products li.product .it-card__stats {
	display: none;
}


/* THE row template lives here, because this is the element whose children
 * the parts are. */
html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-card__body,
html[data-it-view="list"] body ul.products li.product .it-card__body {
	flex: 1 1 auto;
	min-width: 0;
	display: grid !important;
	grid-template-columns: minmax(150px, 1.1fr) minmax(0, 2fr) auto;
	grid-template-areas:
	"name  rolls foot"
	"type  rolls foot"
	"spec  rolls foot";
	align-items: center;
	column-gap: var(--it-s3, 12px);
	row-gap: 0;
	padding: 0;
}

html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-card__link,
html[data-it-view="list"] body ul.products li.product .it-card__link {
	grid-area: name; align-self: end;
}

html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-card__type,
html[data-it-view="list"] body ul.products li.product .it-card__type {
	grid-area: type; margin: 0; font-size: var(--it-fs-xs); color: var(--it-text-faint);
}

html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-card__spec,
html[data-it-view="list"] body ul.products li.product .it-card__spec {
	grid-area: spec; display: block; margin: 0; font-size: var(--it-fs-xs); color: var(--it-text-faint); align-self: start;
}

html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-fb,
html[data-it-view="list"] body ul.products li.product .it-fb {
	grid-area: rolls; margin: 0; padding: 0; border: 0; min-width: 0;
}

html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-card__foot,
html[data-it-view="list"] body ul.products li.product .it-card__foot {
	grid-area: foot;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	min-width: 0;
	border: 0;
	padding: 0;
	margin: 0;
}

html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .woocommerce-loop-product__title,
html[data-it-view="list"] body ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--it-fs-base) !important;
	line-height: 1.25 !important;
	-webkit-line-clamp: 1;
	margin: 0;
}

html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-fb__legend,
html[data-it-view="list"] body ul.products li.product .it-fb__legend {
	display: none;
}

html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-fb__rolls,
html[data-it-view="list"] body ul.products li.product .it-fb__rolls {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 2px;
	max-height: none;
}

html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-fb__roll,
html[data-it-view="list"] body ul.products li.product .it-fb__roll {
	margin: 0;
}

html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-fb__lab,
html[data-it-view="list"] body ul.products li.product .it-fb__lab {
	display: flex;
	justify-content: space-between;
	gap: var(--it-s2, 8px);
	padding: 3px 7px;
	font-size: var(--it-fs-xs);
	line-height: 1.3;
}

html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-fb__act,
html[data-it-view="list"] body ul.products li.product .it-fb__act {
	margin-top: 6px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-fb__qty,
html[data-it-view="list"] body ul.products li.product .it-fb__qty {
	width: 3.2rem !important; flex: 0 0 auto;
}

html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-card__actions,
html[data-it-view="list"] body ul.products li.product .it-card__actions {
	flex-direction: row; gap: 5px;
}

/* A row with no roll picker gives the middle column back: nothing is there,
 * and holding 2fr of empty space open is what made these rows 154px tall. */
html:not([data-it-view="grid"]) body ul.products.it-view--list li.product.it-card--norolls .it-card__body,
html[data-it-view="list"] body ul.products li.product.it-card--norolls .it-card__body {
	grid-template-columns: minmax(150px, 1fr) auto;
	grid-template-areas:
		"name foot"
		"type foot"
		"spec foot";
}

@media (max-width: 760px) {
	/* A grid, not a wrapping flex row: the row must never stack. */
	html:not([data-it-view="grid"]) body ul.products.it-view--list li.product,
	html[data-it-view="list"] body ul.products li.product {
		display: grid !important;
		grid-template-columns: 40px minmax(0, 1fr);
		align-items: center;
		column-gap: 10px;
		padding: 7px 12px;
	}
	html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-card__media,
	html[data-it-view="list"] body ul.products li.product .it-card__media {
		flex: none;
		width: 40px;
		height: 40px !important;
	}

	/* Name and buy on one line, the specification count under the name.
	 * The category line goes: the page title already says it. */
	html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-card__body,
	html[data-it-view="list"] body ul.products li.product .it-card__body {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
		"name foot"
		"spec foot"
		"rolls rolls";
		row-gap: 0;
		column-gap: 8px;
		align-items: center;
	}
	html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-card__type,
	html[data-it-view="list"] body ul.products li.product .it-card__type {
		display: none;
	}
	html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .woocommerce-loop-product__title,
	html[data-it-view="list"] body ul.products li.product .woocommerce-loop-product__title {
		font-size: var(--it-fs-sm) !important;
		line-height: 1.25 !important;
		-webkit-line-clamp: 1;
	}
	html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-card__spec,
	html[data-it-view="list"] body ul.products li.product .it-card__spec {
		align-self: start;
		font-size: var(--it-fs-xs);
	}

	/* The foot was a column, stacking a two-line price above the buttons
	 * for 85px of height on its own. */
	html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-card__foot,
	html[data-it-view="list"] body ul.products li.product .it-card__foot {
		flex-direction: row !important;
		align-items: center;
		justify-content: flex-end;
		gap: 8px;
	}
	html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-card__price,
	html[data-it-view="list"] body ul.products li.product .it-card__price {
		display: flex;
		align-items: baseline;
		gap: 4px;
		white-space: nowrap;
	}
	html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-card__price .from,
	html[data-it-view="list"] body ul.products li.product .it-card__price .from {
		font-size: 10px;
	}

	/* View costs 60px of a 390px screen and duplicates the title link. */
	html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-view,
	html[data-it-view="list"] body ul.products li.product .it-view {
		display: none;
	}
	html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-fb,
	html[data-it-view="list"] body ul.products li.product .it-fb {
		margin-top: 4px;
	}

	/* A finger needs 44px. The row is 89px tall, so the button can have it
	 * without costing a row of density. */
	html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-card__actions .it-btn,
	html[data-it-view="list"] body ul.products li.product .it-card__actions .it-btn,
	html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-fb__add,
	html[data-it-view="list"] body ul.products li.product .it-fb__add,
	html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-fb__req,
	html[data-it-view="list"] body ul.products li.product .it-fb__req {
		min-height: 44px;
	}
	html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-fb__rolls,
	html[data-it-view="list"] body ul.products li.product .it-fb__rolls {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
}

/* WooCommerce adds its own "Out of stock" line as a direct child of the
 * body. It has no class of ours, so the row's grid auto-placed it into an
 * implicit area and it floated in the middle of the row. The row already
 * says "0 of 14 in stock" and the price column already says "Not sold for
 * Ladder", so in list view it is one statement too many. */
html:not([data-it-view="grid"]) body ul.products.it-view--list li.product .it-card__body > *:not(.it-card__link):not(.it-card__type):not(.it-card__spec):not(.it-card__foot):not(.it-fb),
html[data-it-view="list"] body ul.products li.product .it-card__body > *:not(.it-card__link):not(.it-card__type):not(.it-card__spec):not(.it-card__foot):not(.it-fb) {
	display: none;
}

/* ====================================================== hide unavailable */

/* A filter, never a policy: the depth still exists, this visitor has simply
 * asked not to look at it right now. */
html[data-it-hide-unavail="1"] .it-fb__roll[data-sellable="false"] { display: none; }
html[data-it-hide-unavail="1"] li.product[data-it-nothing="1"] { display: none; }
html[data-it-hide-unavail="1"] .it-sr__row[data-sellable="false"] { display: none; }
html[data-it-hide-unavail="1"] .it-vt__row[data-unavail="1"] { display: none; }

/* ======================================================= request control */

.it-btn--request {
	background: var(--it-surface-3);
	color: var(--it-text);
	border: 1px solid var(--it-line-strong);
}
.it-btn--request:hover {
	background: var(--it-surface-2);
	border-color: var(--it-accent-line);
	color: var(--it-accent);
}

.it-fb__roll[data-requestable="true"] .it-fb__name { color: var(--it-text-muted); }
.it-fb__roll[data-requestable="true"][data-selected="true"] {
	outline: 1px solid var(--it-accent-line);
}

.it-req {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--it-s4, 16px);
	background: rgba(5, 7, 10, 0.72);
	backdrop-filter: blur(2px);
}
.it-req[hidden] { display: none; }
.it-req__box {
	position: relative;
	width: min(460px, 100%);
	background: var(--it-surface);
	border: 1px solid var(--it-line-strong);
	border-radius: 12px;
	padding: 22px 22px 20px;
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
}
.it-req__x {
	position: absolute;
	top: 8px;
	right: 10px;
	background: none;
	border: 0;
	color: var(--it-text-faint);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
}
.it-req__x:hover { color: var(--it-text); }
.it-req__h { margin: 0 0 6px; font-size: var(--it-fs-md); }
.it-req__spec {
	margin: 0 0 12px;
	font-size: var(--it-fs-sm);
	color: var(--it-accent);
	font-weight: 600;
}
.it-req__msg { margin: 0; font-size: var(--it-fs-sm); color: var(--it-text-muted); }
.it-req__notify { margin-top: 16px; border-top: 1px solid var(--it-line); padding-top: 14px; }
.it-req__lab { display: block; font-size: var(--it-fs-sm); margin-bottom: 6px; }
.it-req__row { display: flex; gap: var(--it-s2, 8px); }
.it-req__email {
	flex: 1 1 auto;
	min-width: 0;
	background: var(--it-surface-3);
	border: 1px solid var(--it-line);
	border-radius: 7px;
	color: var(--it-text);
	padding: 8px 10px;
	font-size: var(--it-fs-sm);
}
.it-req__fine { margin: 9px 0 0; font-size: var(--it-fs-xs); color: var(--it-text-faint); }
html.it-req-open { overflow: hidden; }

.it-reqs { width: 100%; }
.it-reqs th, .it-reqs td { text-align: left; padding: 8px 10px; }

/* ================================================ specification results */

.it-sr {
	margin: 0 0 var(--it-s5, 20px);
	padding: var(--it-s4, 16px);
	background: var(--it-surface);
	border: 1px solid var(--it-line);
	border-radius: 10px;
}
.it-sr__h { margin: 0 0 4px; font-size: var(--it-fs-md); }
.it-sr__terms { margin: 0 0 14px; font-size: var(--it-fs-xs); color: var(--it-text-faint); }
.it-sr__chip {
	display: inline-block;
	margin-left: 5px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--it-surface-3);
	color: var(--it-text-muted);
	font-family: var(--it-font-mono);
}
.it-sr__none { margin: 0; font-size: var(--it-fs-sm); color: var(--it-text-muted); }
.it-sr__g + .it-sr__g { margin-top: 14px; border-top: 1px solid var(--it-line); padding-top: 12px; }
.it-sr__gh { margin: 0 0 6px; font-size: var(--it-fs-base); display: flex; gap: 10px; align-items: baseline; }
.it-sr__gh a { color: var(--it-text); text-decoration: none; }
.it-sr__gh a:hover { color: var(--it-accent); }
.it-sr__class { font-size: var(--it-fs-xs); color: var(--it-text-faint); font-weight: 400; }
.it-sr__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.it-sr__row {
	display: grid;
	grid-template-columns: minmax(0, 2fr) 84px 86px minmax(0, 1fr) auto;
	gap: var(--it-s3, 12px);
	align-items: center;
	padding: 5px 8px;
	border-radius: 6px;
	font-size: var(--it-fs-sm);
}
.it-sr__row:hover { background: var(--it-surface-2); }
.it-sr__spec { min-width: 0; }
.it-sr__mode { font-size: var(--it-fs-xs); color: var(--it-text-faint); }
.it-sr__price { font-variant-numeric: tabular-nums; }
.it-sr__price .na { color: var(--it-text-faint); font-style: italic; }
.it-sr__why {
	font-size: var(--it-fs-xs);
	color: var(--it-text-faint);
	font-family: var(--it-font-mono);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.it-sr__act .it-btn { padding: 4px 11px; font-size: var(--it-fs-xs); }
.it-sr__ms { margin: 12px 0 0; font-size: var(--it-fs-xs); color: var(--it-text-faint); }

@media (max-width: 700px) {
	.it-sr__row {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"spec  act"
			"price mode";
		row-gap: 2px;
	}
	.it-sr__spec { grid-area: spec; }
	.it-sr__price { grid-area: price; }
	.it-sr__mode { grid-area: mode; text-align: right; }
	.it-sr__act { grid-area: act; }
	.it-sr__why { display: none; }
}

/* ============================================== hub: the shop on the hub */

.it-hubshop { margin: var(--it-s6, 24px) 0; }
.it-hubshop__h {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--it-s3, 12px);
	margin: 0 0 var(--it-s3, 12px);
}
.it-hubshop__h h2 { margin: 0; font-size: var(--it-fs-lg); }
.it-hubshop__all { font-size: var(--it-fs-sm); white-space: nowrap; }

/* ============================== the price must never leave on hover ====== */

/* WooCommerce Show Product Thumbnails ("wcspt") gives every card with a
 * gallery a `::before` sheet -- white, `position: absolute`, `inset: 0 0
 * -15px` -- and fades it in on hover (opacity 0 -> 1, visibility hidden ->
 * visible) so its own gallery image can be swapped underneath. This
 * storefront does not use that swap; it has its own hover tooltip.
 *
 * The sheet covered the card. What survived were only the parts that happen
 * to have their own stacking context -- the media well (z-index 2), the title
 * (position: relative) and the Add button -- so the two pieces of plain
 * static content, the TYPE LABEL and the PRICE, were the exact things that
 * disappeared. A customer hovering Amn Rune watched its price vanish.
 *
 * `content: none` removes the pseudo-element rather than hiding it, so there
 * is nothing left to fade in. */
html body ul.products li.product::before,
html body ul.products li.product.wcspt-has-gallery::before {
	content: none !important;
}

/* ================================================= floating roll selector */

/* A collapsed card is one height whatever sits behind it: image, name, type,
 * price, one action. The rolls open over the page, never inside the card
 * (inc/fastbuy.php, initFastBuy in itempls.js), so nothing in the grid moves.
 *
 *   [data-kind="popover"]  desktop: anchored to the card, in document
 *                          coordinates, scrolling with it
 *   [data-kind="sheet"]    phone: a bottom sheet over a scrim
 *
 * Six to twenty rolls scroll inside the list; more than that never reaches a
 * card -- those go to the product page or the Charm Finder. */
html body .it-fb[data-open] {
	position: absolute;
	z-index: 9000;
	display: flex;
	flex-direction: column;
	gap: 8px;
	box-sizing: border-box;
	margin: 0;
	padding: 12px;
	max-height: min(72vh, 540px);
	background: var(--it-surface);
	color: var(--it-text);
	border: 1px solid var(--it-line-strong);
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 18px 40px -12px rgba(0, 0, 0, .38);
}
.it-fb__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.it-fb__title { margin: 0; font-size: var(--it-fs-sm); font-weight: 700; line-height: 1.3; }
.it-fb__close {
	flex: none; width: 30px; height: 30px; margin: -4px -4px 0 0; padding: 0;
	border: 0; border-radius: 6px; background: transparent; color: var(--it-text-muted);
	font-size: 20px; line-height: 30px; cursor: pointer;
}
.it-fb__close:hover, .it-fb__close:focus-visible { background: var(--it-surface-2); color: var(--it-text); }
html body .it-fb[data-open] .it-fb__legend { display: flex; gap: 6px; margin: 0; }
html body .it-fb[data-open] .it-fb__rolls {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-height: 0;
	max-height: 320px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
html body .it-fb[data-open] .it-fb__roll { display: block; }
html body .it-fb[data-open] .it-fb__lab { padding: 7px 8px; gap: 10px; cursor: pointer; }
html body .it-fb[data-open] .it-fb__radio { width: 14px; height: 14px; }
html body .it-fb[data-open] .it-fb__act { margin-top: 2px; flex-wrap: nowrap; }
html body .it-fb[data-open] .it-fb__qty { min-height: 40px; }
html body .it-fb[data-open] .it-fb__add,
html body .it-fb[data-open] .it-fb__req { flex: 1 1 auto; min-height: 40px; justify-content: center; }
/* The "added" line is reserved, so confirming an Add does not resize the panel. */
html body .it-fb[data-open] .it-fb__msg { margin: 0; min-height: 1.5em; line-height: 1.5; }

html body .it-fb[data-kind="sheet"] {
	position: fixed;
	left: 0 !important;
	right: 0;
	top: auto !important;
	bottom: 0;
	width: auto !important;
	z-index: 9001;
	max-height: 82vh;
	padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
	border-radius: 14px 14px 0 0;
	border-bottom: 0;
}
html body .it-fb[data-kind="sheet"] .it-fb__title { font-size: var(--it-fs-base); }
html body .it-fb[data-kind="sheet"] .it-fb__rolls { max-height: none; flex: 1 1 auto; }
html body .it-fb[data-kind="sheet"] .it-fb__lab { min-height: 44px; }
html body .it-fb[data-kind="sheet"] .it-fb__radio { width: 18px; height: 18px; }
html body .it-fb[data-kind="sheet"] .it-fb__qty { min-height: 44px; }
html body .it-fb[data-kind="sheet"] .it-fb__add,
html body .it-fb[data-kind="sheet"] .it-fb__req { min-height: 44px; }
.it-fb-scrim { position: fixed; inset: 0; z-index: 9000; background: rgba(5, 7, 10, .45); }

/* The card's single action: same box whether it adds, chooses or links. */
html body ul.products li.product .it-card__actions button.it-choose { cursor: pointer; font: inherit; }

/* ============================================== one collapsed card shape */

/* Every grid card has the same five regions in the same place, so a row of
 * cards reads as a row: image, name (two lines reserved), type (one line),
 * price (one row), actions (one row). A simple product used to put its price
 * beside Add while a roll product stacked them, which made the two shapes
 * 33px apart in one row, and "Choose N" + View overflowed a 176px card. */
html:not([data-it-view="list"]) body ul.products:not(.it-view--list) li.product .it-card__foot,
html[data-it-view="grid"] body ul.products li.product .it-card__foot {
	flex-direction: column;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: 8px;
}
html:not([data-it-view="list"]) body ul.products:not(.it-view--list) li.product .it-card__price,
html[data-it-view="grid"] body ul.products li.product .it-card__price {
	display: flex;
	align-items: baseline;
	min-height: 22px;
	white-space: nowrap;
}
html:not([data-it-view="list"]) body ul.products:not(.it-view--list) li.product .it-card__price .from,
html[data-it-view="grid"] body ul.products li.product .it-card__price .from {
	display: inline;
	margin-right: 4px;
}
html:not([data-it-view="list"]) body ul.products:not(.it-view--list) li.product .it-card__actions,
html[data-it-view="grid"] body ul.products li.product .it-card__actions {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-columns: auto;
	gap: 6px;
}
html:not([data-it-view="list"]) body ul.products:not(.it-view--list) li.product .it-card__actions .it-btn,
html[data-it-view="grid"] body ul.products li.product .it-card__actions .it-btn {
	min-width: 0;
	min-height: 40px;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: var(--it-fs-sm, 14px);
	font-weight: 600;
}
html:not([data-it-view="list"]) body ul.products:not(.it-view--list) li.product .it-card__actions .it-view,
html[data-it-view="grid"] body ul.products li.product .it-card__actions .it-view {
	padding-left: 10px;
	padding-right: 10px;
}
html:not([data-it-view="list"]) body ul.products:not(.it-view--list) li.product .woocommerce-loop-product__title,
html[data-it-view="grid"] body ul.products li.product .woocommerce-loop-product__title {
	line-height: 1.3 !important;
	/* Two lines, exactly: the clamp already stops a third. */
	height: 2.6em;
	min-height: 0 !important;
}
html:not([data-it-view="list"]) body ul.products:not(.it-view--list) li.product .it-card__type,
html[data-it-view="grid"] body ul.products li.product .it-card__type {
	height: 1.35em;
	min-height: 0;
	line-height: 1.35;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
/* One action per card: Add, Choose N, or -- when this realm cannot sell it --
 * View. A Choose card used to carry View as well, which no other card did,
 * and the whole card already opens the product page. */
html body ul.products li.product:has(.it-choose) .it-card__actions .it-view { display: none !important; }


/* ==================================================== detail media, no badge */

/* The card image is the Stats control. Where a verified detail image exists
 * the pointer says so (zoom-in) and the image lifts a little on hover; where
 * none exists the image is an ordinary link to the product, with no hint of
 * anything more. There is no permanent label. */
.it-card__stats { display: none !important; }
@media (hover: hover) and (pointer: fine) {
	html body ul.products li.product .it-card__media.has-detail { cursor: zoom-in; }
	html body ul.products li.product .it-card__media.has-detail:hover img {
		filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .18));
	}
}
/* Keyboard access to the same lightbox: invisible until focused. */
html body ul.products li.product .it-card__statsbtn {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}
html body ul.products li.product .it-card__statsbtn:focus-visible {
	top: 8px; left: 8px; z-index: 4;
	width: auto; height: auto; margin: 0; padding: 4px 10px;
	clip: auto; clip-path: none; overflow: visible;
	font-size: var(--it-fs-xs, 12px); font-weight: 600;
	background: var(--it-surface); color: var(--it-text);
	border: 1px solid var(--it-accent, #e08a06); border-radius: 999px;
	outline: 2px solid var(--it-accent, #e08a06); outline-offset: 1px;
}


/* ======================================================= Reign of the Warlock */
.it-rotw-note { margin: 2px 0 10px; font-size: var(--it-fs-sm, 14px); color: var(--it-text-muted); }
.it-rotw-note a, .it-hub__note a, .it-hero__eyebrow a { color: var(--it-accent); text-decoration: underline; text-underline-offset: 2px; }
.it-hub__note { margin: 6px 0 0; font-size: var(--it-fs-sm, 14px); color: var(--it-text-muted); }
.it-rotw-guide table { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: var(--it-fs-sm, 14px); }
.it-rotw-guide th, .it-rotw-guide td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--it-line); vertical-align: top; }
.it-rotw-guide thead th { font-size: var(--it-fs-xs, 12px); text-transform: uppercase; letter-spacing: .04em; color: var(--it-text-faint); }
@media (max-width: 640px) {
	.it-rotw-guide table, .it-rotw-guide thead, .it-rotw-guide tbody, .it-rotw-guide tr, .it-rotw-guide th, .it-rotw-guide td { display: block; }
	.it-rotw-guide thead { display: none; }
	.it-rotw-guide tr { padding: 6px 0; border-bottom: 1px solid var(--it-line); }
	.it-rotw-guide td { border: 0; padding: 2px 0; }
}

/* The hub guide prints on woocommerce_after_shop_loop, inside Shoptimizer's
 * sorting row -- a two-column grid on a phone -- so it fell into the 161px
 * second column and widened the page (runewords hub included). It is a
 * full-width section below everything else. */
html body .shoptimizer-sorting > .it-guide {
	grid-column: 1 / -1;
	flex: 1 1 100%;
	width: 100%;
	box-sizing: border-box;
}

/* "Reign of the Warlock" in full in the navigation, except where the
 * one-row desktop menu has no room (861-1279px): there it reads ROTW, with
 * the full name as its title. A phone's menu scrolls, so it stays in full. */
.it-nav__short { display: none; }
@media (min-width: 861px) and (max-width: 1279px) {
	.it-nav__full { display: none; }
	.it-nav__short { display: inline; }
}

/* FAQ questions sit under their section heading, not above it in size. */
html body .it-guide h3 {
	margin: var(--it-s4, 16px) 0 var(--it-s2, 8px);
	font-size: var(--it-fs-md, 16px) !important;
	font-family: var(--it-font) !important;
	color: var(--it-text) !important;
	line-height: 1.35;
}