/*
 * Brand pages (the `brand` taxonomy archive, archive-product.php).
 *
 * Excluded from the LiteSpeed CSS optimizer and versioned by filemtime, so
 * it can land BEFORE the combined bundle that carries style.css. Every rule
 * here therefore wins on specificity (body.tax-brand …), never source order.
 */

/* ---- Photo strip: no empty scrollbar tracks --------------------------
 *
 * div.brandstrip was `overflow: scroll` with nothing to scroll: the real
 * horizontal scroller is .stage inside it. Wherever the OS draws classic
 * scrollbars (a mouse plugged in, or "always show scroll bars"), that
 * painted two empty tracks, white on the dark page: one under the section
 * and one down its right edge.
 */
body.tax-brand div.brandstrip {
	overflow: hidden;
}

/* The scroller that IS real: sideways only, and a thin cream thumb on a
   clear track in place of the browser's default bar. */
body.tax-brand div.brandstrip .strip > div.stage {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	scrollbar-color: rgba(248, 245, 240, 0.35) transparent;
}

/* ---- Photo strip with exactly two photos: a two-up, not a scroller -----
 *
 * Two 4:5 photos at the strip's fixed height overrun a laptop-width stage
 * by a few hundred pixels, so the second sat cut off behind a short
 * sideways scroll. With two, they share the width instead. Phones keep
 * the swipe: a two-up there would be thumbnail-sized.
 */
@media (min-width: 768px) {
	body.tax-brand div.brandstrip.brandstrip-pair,
	body.tax-brand div.brandstrip.brandstrip-pair .strip {
		min-height: 0;
		height: auto;
	}

	body.tax-brand div.brandstrip.brandstrip-pair .strip > div.stage {
		flex: none;
		height: auto;
		overflow: hidden;
	}

	body.tax-brand div.brandstrip.brandstrip-pair .strip > div.stage div {
		flex: 1 1 0;
		min-width: 0;
		height: auto;
		aspect-ratio: 4 / 5;
	}

	body.tax-brand div.brandstrip.brandstrip-pair .strip > div.stage div img {
		width: 100%;
		height: 100%;
	}
}

/* ---- No products to show: a pause state --------------------------------
 *
 * In place of WooCommerce's "No products were found" notice (a raised box
 * with a coloured left edge, neither of which is house style): a ruled line
 * of body copy and a pill to the contact page.
 */
body.tax-brand .productsgrid div.rg-brand-pause {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	margin: 0;
	padding: 32px 0;
	border-top: 1px solid #1c1c1c;
	border-bottom: 1px solid #1c1c1c;
}

body.tax-brand .productsgrid div.rg-brand-pause p {
	margin: 0;
	font-family: 'MatterRegular', sans-serif;
	font-size: 18px;
	line-height: 1.5;
	color: #1c1c1c;
}

body.tax-brand .productsgrid div.rg-brand-pause a.rg-brand-pause-link {
	flex: none;
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 20px;
	border: 1px solid #1c1c1c;
	border-radius: 99px;
	font-family: 'MatterMonoMedium', monospace;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: #1c1c1c;
	transition: background 0.15s, color 0.15s;
}

body.tax-brand .productsgrid div.rg-brand-pause a.rg-brand-pause-link:hover,
body.tax-brand .productsgrid div.rg-brand-pause a.rg-brand-pause-link:focus-visible {
	background: #1c1c1c;
	color: #F8F5F0;
}

/* ---- Range comparison in the long-form section -----------------------
 *
 * A table of the brand's products for "which one?", in place of a subhead
 * and paragraph per product (each in-body h2 is 96px display type, so a
 * product-by-product walk-through runs to several screens above the cards).
 *
 * Markup, in the brand term's brand_big_description_content:
 *   <table class="rg-brand-compare">
 *     <thead><tr><th scope="col">…</th>…</tr></thead>
 *     <tbody><tr><th scope="row"><a href="…">Name</a></th>
 *                <td data-label="…">…</td>…</tr></tbody>
 *   </table>
 * data-label repeats the column heading: it is the cell's label on mobile.
 */
body.tax-brand .big_description table.rg-brand-compare {
	width: 100%;
	margin: 16px 0 96px;
	border-collapse: collapse;
	border-spacing: 0;
	color: #F8F5F0;
	text-align: left;
}

body.tax-brand .big_description table.rg-brand-compare thead th {
	padding: 0 24px 16px 0;
	border-bottom: 1px solid #7A7977;
	font-family: 'MatterMonoRegular', sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
	color: #7A7977;
	vertical-align: bottom;
}

body.tax-brand .big_description table.rg-brand-compare tbody th,
body.tax-brand .big_description table.rg-brand-compare tbody td {
	padding: 24px 24px 24px 0;
	border-bottom: 1px solid #3B3B3A;
	vertical-align: baseline;
}

body.tax-brand .big_description table.rg-brand-compare tbody th {
	width: 20%;
}

/* The row's name, in the display face, whether or not it is a link. */
body.tax-brand .big_description table.rg-brand-compare tbody th,
body.tax-brand .big_description table.rg-brand-compare tbody th a {
	font-family: 'Graphik Condensed Web', sans-serif;
	font-size: 40px;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: #F8F5F0;
}

/* A second, lighter table in the same section (lenses under models, say). */
body.tax-brand .big_description table.rg-brand-compare.is-small tbody th,
body.tax-brand .big_description table.rg-brand-compare.is-small tbody th a {
	font-size: 28px;
}

@media (min-width: 768px) {
	body.tax-brand .big_description table.rg-brand-compare.is-small tbody th {
		width: auto;
		white-space: nowrap;
	}
}

body.tax-brand .big_description table.rg-brand-compare tbody th a:hover,
body.tax-brand .big_description table.rg-brand-compare tbody th a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

body.tax-brand .big_description table.rg-brand-compare tbody td {
	font-family: 'MatterRegular', sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

body.tax-brand .big_description table.rg-brand-compare td.rg-num {
	white-space: nowrap;
}

body.tax-brand .big_description table.rg-brand-compare tr > :last-child {
	padding-right: 0;
}

/* Mobile: one block per product, each cell labelled from data-label. */
@media (max-width: 767px) {
	body.tax-brand .big_description table.rg-brand-compare,
	body.tax-brand .big_description table.rg-brand-compare tbody,
	body.tax-brand .big_description table.rg-brand-compare tr,
	body.tax-brand .big_description table.rg-brand-compare tbody th,
	body.tax-brand .big_description table.rg-brand-compare tbody td {
		display: block;
		width: 100%;
	}

	body.tax-brand .big_description table.rg-brand-compare {
		margin-bottom: 64px;
		border-top: 1px solid #7A7977;
	}

	/* Headings stay for screen readers; the labels below do the visual job. */
	body.tax-brand .big_description table.rg-brand-compare thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	body.tax-brand .big_description table.rg-brand-compare tbody tr {
		padding: 24px 0;
		border-bottom: 1px solid #3B3B3A;
	}

	body.tax-brand .big_description table.rg-brand-compare tbody th,
	body.tax-brand .big_description table.rg-brand-compare tbody td {
		padding: 0;
		border: 0;
	}

	body.tax-brand .big_description table.rg-brand-compare tbody th {
		margin-bottom: 16px;
	}

	body.tax-brand .big_description table.rg-brand-compare tbody td {
		display: grid;
		grid-template-columns: 96px 1fr;
		column-gap: 16px;
		padding: 4px 0;
	}

	body.tax-brand .big_description table.rg-brand-compare tbody td::before {
		content: attr(data-label);
		padding-top: 4px;
		font-family: 'MatterMonoRegular', sans-serif;
		font-size: 12px;
		letter-spacing: 0.14em;
		line-height: 1.4;
		text-transform: uppercase;
		color: #7A7977;
	}
}