/**
 * Styles for the info-page shortcodes ([tzumi_about_page],
 * [tzumi_contact_page], [tzumi_footprint_page]).
 *
 * Same palette, type and approach as site-header.css / site-footer.css:
 * everything is scoped under .tzumi-info-page, and every rule is written
 * as ".tzumi-info-page .tzumi-x" (two classes) so it outranks Elementor
 * Kit rules like ".elementor-kit-XXXX h1" (one class + one tag) no matter
 * which stylesheet loads last. 'Inter' is enqueued site-wide by
 * tzumi_blocks_enqueue_fonts() in tzumi-blocks.php.
 *
 * One rhythm for every page: hero, then sections that alternate white /
 * paper, each opened by the same eyebrow + H2, then the closing panel.
 * Type scale: 11 / 14 / 15 / 16 / 18 / 20 / 24 / 32 / 40–56 (H1).
 */

.tzumi-info-page {
	--tzumi-accent: #D90D1E;
	--tzumi-accent-hover: #B80A19;
	--tzumi-accent-tint: #FDECEE;
	--tzumi-ink: #181818;
	--tzumi-midgrey: #57585A;
	--tzumi-lightgrey: #8C8D8F;
	--tzumi-line: #E1DFDB;
	--tzumi-paper: #F7F6F4;
	--tzumi-white: #FFFFFF;
	--tzumi-radius: 16px;
	--tzumi-section-y: 88px;

	background: var(--tzumi-white);
	color: var(--tzumi-ink);
	-webkit-font-smoothing: antialiased;
}

.tzumi-info-page,
.tzumi-info-page * {
	box-sizing: border-box;
	font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif !important;
}

.tzumi-info-page :focus-visible {
	outline: 2px solid var(--tzumi-accent);
	outline-offset: 3px;
}

.tzumi-info-page .tzumi-ip-svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Icon system: every outline icon (Heroicons, 24-grid, stroke 1.5, round
   caps/joins) renders at exactly 1.5px on screen whatever size it's drawn
   at — without this a 12px tick comes out half as thick as a 24px card
   icon. Filled brand logos have no stroke and are unaffected. Same rule
   in site-header.css, site-footer.css and search-results.css. */
.tzumi-info-page svg * {
	vector-effect: non-scaling-stroke;
}

/* ---------- layout ---------- */

/* 1520px + 20px gutters: the exact frame the site header and footer use,
   so page content lines up with the logo and footer columns at every
   width. Running text keeps its own ch-based measure inside it. */
.tzumi-info-page .tzumi-ip-inner {
	max-width: 1520px;
	margin: 0 auto;
	padding: 0 20px;
}

.tzumi-info-page .tzumi-ip-section {
	padding: var(--tzumi-section-y) 0;
}
.tzumi-info-page .tzumi-ip-section-tinted {
	background: var(--tzumi-paper);
}

.tzumi-info-page .tzumi-ip-grid {
	display: grid;
	gap: 20px;
}
.tzumi-info-page .tzumi-ip-grid-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tzumi-info-page .tzumi-ip-grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---------- hero (every page) ---------- */

.tzumi-info-page .tzumi-ip-hero {
	background: var(--tzumi-paper);
	border-bottom: 1px solid var(--tzumi-line);
	padding: 28px 0 72px;
}

.tzumi-info-page .tzumi-ip-crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 56px;
	font-size: 14px;
	color: var(--tzumi-midgrey);
}
.tzumi-info-page .tzumi-ip-crumb-link {
	color: var(--tzumi-midgrey);
	text-decoration: none !important;
	transition: color .15s ease;
}
.tzumi-info-page .tzumi-ip-crumb-link:hover {
	color: var(--tzumi-accent);
}
.tzumi-info-page .tzumi-ip-crumb-sep {
	color: var(--tzumi-lightgrey);
}
.tzumi-info-page .tzumi-ip-crumb-current {
	color: var(--tzumi-ink);
	font-weight: 600;
}

.tzumi-info-page .tzumi-ip-eyebrow {
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tzumi-accent);
}

.tzumi-info-page .tzumi-ip-title {
	margin: 0;
	max-width: 18ch;
	font-size: clamp(40px, 5.2vw, 56px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--tzumi-ink);
	text-transform: none;
	text-wrap: balance;
}

.tzumi-info-page .tzumi-ip-lede {
	margin: 24px 0 0;
	max-width: 62ch;
	font-size: 18px;
	line-height: 1.6;
	color: var(--tzumi-midgrey);
}

.tzumi-info-page .tzumi-ip-meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 20px 0 0;
	padding: 6px 12px;
	border: 1px solid var(--tzumi-line);
	border-radius: 999px;
	background: var(--tzumi-white);
	font-size: 13px;
	font-weight: 600;
	color: var(--tzumi-midgrey);
}

/* ---------- section head (every section) ---------- */

.tzumi-info-page .tzumi-ip-section-head {
	margin: 0 0 40px;
}
.tzumi-info-page .tzumi-ip-h2 {
	margin: 0;
	max-width: 24ch;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--tzumi-ink);
	text-transform: none;
	text-wrap: balance;
}

/* ---------- info card ---------- */

.tzumi-info-page .tzumi-ip-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: var(--tzumi-white);
	border: 1px solid var(--tzumi-line);
	border-radius: var(--tzumi-radius);
	padding: 28px;
	min-width: 0;
}

.tzumi-info-page .tzumi-ip-icon-tile {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 12px;
	border-radius: 12px;
	background: var(--tzumi-accent-tint);
	color: var(--tzumi-accent);
}
.tzumi-info-page .tzumi-ip-card .tzumi-ip-icon-tile {
	margin: 0 0 24px;
}

.tzumi-info-page .tzumi-ip-card-title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--tzumi-ink);
	text-transform: none;
}
.tzumi-info-page .tzumi-ip-card-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--tzumi-midgrey);
}

/* link sits on the card's bottom edge, so a row of cards with different
   text lengths still lines their links up */
.tzumi-info-page .tzumi-ip-card-link {
	margin-top: auto;
	padding-top: 20px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--tzumi-accent);
	text-decoration: none !important;
	word-break: break-word;
}
.tzumi-info-page .tzumi-ip-card-link .tzumi-ip-svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	transition: transform .15s ease;
}
.tzumi-info-page .tzumi-ip-card-link:hover {
	color: var(--tzumi-accent-hover);
}
.tzumi-info-page .tzumi-ip-card-link:hover .tzumi-ip-svg {
	transform: translateX(3px);
}

/* ---------- check list ---------- */

.tzumi-info-page .tzumi-ip-checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
	width: 100%;
}
.tzumi-info-page .tzumi-ip-card .tzumi-ip-checks {
	margin-top: 8px;
}
.tzumi-info-page .tzumi-ip-checks-2col {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 48px;
}
.tzumi-info-page .tzumi-ip-checks-2col .tzumi-ip-check {
	padding-top: 18px;
	padding-bottom: 18px;
	border-top: 1px solid var(--tzumi-line);
}
.tzumi-info-page .tzumi-ip-checks-2col .tzumi-ip-check-icon {
	top: 20px;
}

.tzumi-info-page .tzumi-ip-check {
	position: relative;
	margin: 0;
	padding: 0 0 0 34px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--tzumi-ink);
	list-style: none;
}
.tzumi-info-page .tzumi-ip-check-icon {
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	padding: 4px;
	border-radius: 50%;
	background: var(--tzumi-accent-tint);
	color: var(--tzumi-accent);
}

.tzumi-info-page .tzumi-ip-inline-link {
	color: var(--tzumi-accent);
	font-weight: 600;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}
.tzumi-info-page .tzumi-ip-inline-link:hover {
	color: var(--tzumi-accent-hover);
}

/* ---------- closing panel (every page) ---------- */

.tzumi-info-page .tzumi-ip-section-cta {
	padding-top: 0;
}
/* after a white section, that section's bottom padding already spaces the
   panel; after a paper one, the panel needs its own white gap above it */
.tzumi-info-page .tzumi-ip-section-tinted + .tzumi-ip-section-cta {
	padding-top: var(--tzumi-section-y);
}
.tzumi-info-page .tzumi-ip-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	flex-wrap: wrap;
	padding: 48px 56px;
	border-radius: var(--tzumi-radius);
	background: var(--tzumi-paper);
	border: 1px solid var(--tzumi-line);
}
.tzumi-info-page .tzumi-ip-cta-copy {
	min-width: 0;
	flex: 1 1 320px;
}
.tzumi-info-page .tzumi-ip-cta-title {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--tzumi-ink);
	text-transform: none;
}
.tzumi-info-page .tzumi-ip-cta-text {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--tzumi-midgrey);
}
.tzumi-info-page .tzumi-ip-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 30px;
	border-radius: 8px;
	background: var(--tzumi-accent);
	color: var(--tzumi-white) !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background-color .15s ease;
}
.tzumi-info-page .tzumi-ip-btn:hover {
	background: var(--tzumi-accent-hover);
}

/* ---------- about: retailer logos ---------- */

/* 13 retailers: 7 + 6 on desktop. flex-wrap + center keeps any shorter
   last row centered instead of leaving one logo stranded at the left. */
.tzumi-info-page .tzumi-ip-logos {
	--tzumi-logo-cols: 7;
	--tzumi-logo-gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--tzumi-logo-gap);
}
.tzumi-info-page .tzumi-ip-logo-item {
	flex: 0 0 calc((100% - (var(--tzumi-logo-cols) - 1) * var(--tzumi-logo-gap)) / var(--tzumi-logo-cols));
	margin: 0;
	list-style: none;
	min-width: 0;
}
.tzumi-info-page .tzumi-ip-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 88px;
	padding: 12px 20px;
	background: var(--tzumi-white);
	border: 1px solid var(--tzumi-line);
	border-radius: 12px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.tzumi-info-page .tzumi-ip-logo:hover {
	border-color: var(--tzumi-lightgrey);
	box-shadow: 0 6px 18px rgba(24, 24, 24, .06);
}
.tzumi-info-page .tzumi-ip-logo-img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ---------- contact: hours + notice ---------- */

.tzumi-info-page .tzumi-ip-hours {
	margin: 4px 0 0;
	width: 100%;
	display: grid;
}
/* day above time: a quarter-width card is too narrow to hold both on one
   line without the time wrapping */
.tzumi-info-page .tzumi-ip-hours-row {
	display: grid;
	gap: 2px;
	padding: 10px 0;
	border-bottom: 1px solid var(--tzumi-line);
}
.tzumi-info-page .tzumi-ip-hours-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.tzumi-info-page .tzumi-ip-hours-day {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--tzumi-ink);
}
.tzumi-info-page .tzumi-ip-hours-time {
	margin: 0;
	font-size: 15px;
	color: var(--tzumi-midgrey);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.tzumi-info-page .tzumi-ip-notice {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	margin-top: 20px;
	padding: 28px;
	background: var(--tzumi-white);
	border: 1px solid var(--tzumi-line);
	border-radius: var(--tzumi-radius);
}
.tzumi-info-page .tzumi-ip-notice-title {
	margin: 2px 0 6px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--tzumi-ink);
	text-transform: none;
}
.tzumi-info-page .tzumi-ip-notice-text {
	margin: 0;
	max-width: 80ch;
	font-size: 15px;
	line-height: 1.6;
	color: var(--tzumi-midgrey);
}

/* ---------- footprint: image + split text ---------- */

.tzumi-info-page .tzumi-ip-feature-img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: var(--tzumi-radius);
	margin: 0 0 var(--tzumi-section-y);
}

.tzumi-info-page .tzumi-ip-split {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 56px;
	align-items: start;
}
.tzumi-info-page .tzumi-ip-split .tzumi-ip-section-head {
	margin: 0;
}
.tzumi-info-page .tzumi-ip-prose {
	display: grid;
	gap: 20px;
	max-width: 66ch;
}
.tzumi-info-page .tzumi-ip-p {
	margin: 0;
	font-size: 16px;
	line-height: 1.75;
	color: var(--tzumi-midgrey);
}
.tzumi-info-page .tzumi-ip-p:first-child {
	font-size: 18px;
	color: var(--tzumi-ink);
}

/* ---------- recycle page: numbered steps + drop-off locator ---------- */

.tzumi-info-page ol.tzumi-ip-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	counter-reset: none;
}
.tzumi-info-page .tzumi-ip-step {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 28px;
	list-style: none;
	border: 1px solid var(--tzumi-line);
	border-radius: var(--tzumi-radius);
	background: var(--tzumi-white);
}
.tzumi-info-page .tzumi-ip-step-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 24px;
}
.tzumi-info-page .tzumi-ip-step-num {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tzumi-accent);
}
.tzumi-info-page .tzumi-ip-step .tzumi-ip-card-text + .tzumi-ip-card-text {
	margin-top: 10px;
}

.tzumi-info-page .tzumi-ip-locator {
	display: flex;
	align-items: center;
	gap: 24px 40px;
	flex-wrap: wrap;
	margin-top: 20px;
	padding: 32px 36px;
	border: 1px solid var(--tzumi-line);
	border-radius: var(--tzumi-radius);
	background: var(--tzumi-white);
}
.tzumi-info-page .tzumi-ip-locator-logo {
	display: block;
	flex-shrink: 0;
	width: auto;
	height: 48px;
	max-width: 220px;
	object-fit: contain;
}
.tzumi-info-page .tzumi-ip-locator-copy {
	flex: 1 1 320px;
	min-width: 0;
}
.tzumi-info-page .tzumi-ip-locator-title {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--tzumi-ink);
	text-transform: none;
}
.tzumi-info-page .tzumi-ip-locator-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--tzumi-midgrey);
}
.tzumi-info-page .tzumi-ip-btn .tzumi-ip-btn-icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 8px;
}

@media (max-width: 960px) {
	.tzumi-info-page ol.tzumi-ip-steps {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 640px) {
	.tzumi-info-page .tzumi-ip-step,
	.tzumi-info-page .tzumi-ip-locator {
		padding: 22px;
	}
	.tzumi-info-page .tzumi-ip-locator .tzumi-ip-btn {
		width: 100%;
	}
}

/* ---------- downloads page (Alpha Gaming software) ---------- */

.tzumi-info-page .tzumi-ip-downloads {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}
.tzumi-info-page .tzumi-ip-download {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	padding: 32px;
	border: 1px solid var(--tzumi-line);
	border-radius: var(--tzumi-radius);
	background: var(--tzumi-white);
	transition: border-color .15s ease, box-shadow .2s ease;
}
.tzumi-info-page .tzumi-ip-download:hover {
	border-color: #CFCCC7;
	box-shadow: 0 14px 32px -20px rgba(24, 24, 24, .3);
}
.tzumi-info-page .tzumi-ip-download-icon {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	padding: 16px;
	border-radius: 18px;
	background: var(--tzumi-accent-tint);
	color: var(--tzumi-accent);
}
.tzumi-info-page .tzumi-ip-download-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.tzumi-info-page .tzumi-ip-download-type {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tzumi-midgrey);
}
.tzumi-info-page .tzumi-ip-download-name {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--tzumi-ink);
	text-transform: none;
}
.tzumi-info-page .tzumi-ip-download-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--tzumi-midgrey);
}
.tzumi-info-page .tzumi-ip-download-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin-top: 18px;
}
.tzumi-info-page .tzumi-ip-download-note {
	font-size: 13px;
	color: var(--tzumi-lightgrey);
}
.tzumi-info-page .tzumi-ip-btn .tzumi-ip-btn-icon-lead {
	margin: 0 8px 0 0;
}

@media (max-width: 960px) {
	.tzumi-info-page .tzumi-ip-downloads {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 640px) {
	.tzumi-info-page .tzumi-ip-download {
		flex-direction: column;
		gap: 18px;
		padding: 22px;
	}
	.tzumi-info-page .tzumi-ip-download-icon {
		width: 56px;
		height: 56px;
		padding: 13px;
		border-radius: 14px;
	}
	.tzumi-info-page .tzumi-ip-download-actions .tzumi-ip-btn {
		width: 100%;
	}
}

/* ---------- document pages (privacy, terms, warranty, notice) ----------
   Sticky "On this page" list beside a reading column held to ~72ch. The
   document HTML comes from includes/legal/*.html as plain tags, so it's
   styled by element inside .tzumi-doc-body (doubled-class prefix keeps
   these above Elementor Kit tag rules). */

.tzumi-info-page .tzumi-doc-layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 72px;
	align-items: start;
}
.tzumi-info-page .tzumi-doc-layout.is-single {
	grid-template-columns: minmax(0, 1fr);
}

.tzumi-info-page .tzumi-doc-toc {
	position: sticky;
	top: 150px; /* clears the sticky site header */
	max-height: calc(100vh - 180px);
	overflow-y: auto;
}
.tzumi-info-page .tzumi-doc-toc-title {
	display: block;
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tzumi-accent);
	list-style: none;
	cursor: default;
	pointer-events: none;
}
.tzumi-info-page .tzumi-doc-toc-title::-webkit-details-marker {
	display: none;
}
/* the chevron only matters where the list folds (phones, below) */
.tzumi-info-page .tzumi-doc-toc-chev {
	display: none;
}
.tzumi-info-page ol.tzumi-doc-toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 1px solid var(--tzumi-line);
}
.tzumi-info-page ol.tzumi-doc-toc-list > li {
	margin: 0;
	list-style: none;
}
.tzumi-info-page .tzumi-doc-toc-link {
	display: block;
	margin-left: -1px;
	padding: 7px 0 7px 16px;
	border-left: 2px solid transparent;
	font-size: 14px;
	line-height: 1.4;
	color: var(--tzumi-midgrey);
	text-decoration: none !important;
	transition: color .15s ease, border-color .15s ease;
}
.tzumi-info-page .tzumi-doc-toc-link:hover {
	color: var(--tzumi-ink);
}
.tzumi-info-page .tzumi-doc-toc-link.is-current {
	border-left-color: var(--tzumi-accent);
	color: var(--tzumi-ink);
	font-weight: 600;
}

.tzumi-info-page .tzumi-doc-body {
	max-width: 760px;
	min-width: 0;
	font-size: 16px;
	line-height: 1.75;
	color: #3A3A3B;
}
.tzumi-info-page .tzumi-doc-body > :first-child {
	margin-top: 0;
}
.tzumi-info-page .tzumi-doc-body h2 {
	margin: 56px 0 16px;
	padding-top: 28px;
	border-top: 1px solid var(--tzumi-line);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--tzumi-ink);
	text-transform: none;
	scroll-margin-top: 150px;
}
.tzumi-info-page .tzumi-doc-body > h2:first-child,
.tzumi-info-page .tzumi-doc-body > aside + h2 {
	border-top: none;
	padding-top: 0;
}
.tzumi-info-page .tzumi-doc-body h3 {
	margin: 28px 0 10px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--tzumi-ink);
	text-transform: none;
}
.tzumi-info-page .tzumi-doc-body p {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.75;
	color: #3A3A3B;
}
.tzumi-info-page .tzumi-doc-body strong {
	font-weight: 700;
	color: var(--tzumi-ink);
}
.tzumi-info-page .tzumi-doc-body a {
	color: var(--tzumi-accent);
	font-weight: 600;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}
.tzumi-info-page .tzumi-doc-body ul {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}
.tzumi-info-page .tzumi-doc-body ul > li {
	position: relative;
	margin: 0;
	padding-left: 22px;
	list-style: none;
	font-size: 16px;
	line-height: 1.7;
	color: #3A3A3B;
}
.tzumi-info-page .tzumi-doc-body ul > li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 0.72em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tzumi-accent);
}

/* nested list (e.g. the kinds of prohibited uploads in the Terms) */
.tzumi-info-page .tzumi-doc-body ul ul {
	margin: 10px 0 4px;
	gap: 8px;
}
.tzumi-info-page .tzumi-doc-body ul ul > li::before {
	background: transparent;
	border: 1.5px solid var(--tzumi-accent);
	width: 7px;
	height: 7px;
	left: 3px;
}

/* "In short…" summary and the warranty's opening notice */
.tzumi-info-page .tzumi-doc-summary,
.tzumi-info-page .tzumi-doc-notice {
	margin: 0 0 48px;
	padding: 28px 32px;
	border-radius: var(--tzumi-radius);
	background: var(--tzumi-paper);
}
.tzumi-info-page .tzumi-doc-notice {
	background: var(--tzumi-accent-tint);
}
/* .tzumi-doc-body prefix: has to outrank ".tzumi-doc-body p" above */
.tzumi-info-page .tzumi-doc-body .tzumi-doc-summary-label {
	margin: 0 0 8px;
	line-height: 1.4;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tzumi-accent);
}
.tzumi-info-page .tzumi-doc-summary ul,
.tzumi-info-page .tzumi-doc-notice p:last-child {
	margin-bottom: 0;
}
.tzumi-info-page .tzumi-doc-notice p {
	color: var(--tzumi-ink);
	font-weight: 500;
}

/* notice page: label photos */
.tzumi-info-page .tzumi-doc-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 8px 0 24px;
}
.tzumi-info-page .tzumi-doc-shot {
	display: block;
	aspect-ratio: 4 / 3;
	max-width: 100%;
	border: 1px solid var(--tzumi-line);
	border-radius: 12px;
	background: var(--tzumi-paper);
	overflow: hidden;
	text-decoration: none !important;
	transition: border-color .15s ease;
}
.tzumi-info-page .tzumi-doc-shot:hover {
	border-color: var(--tzumi-ink);
}
.tzumi-info-page .tzumi-doc-shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 960px) {
	.tzumi-info-page .tzumi-doc-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
	.tzumi-info-page .tzumi-doc-toc {
		position: static;
		max-height: none;
		overflow: visible;
		border: 1px solid var(--tzumi-line);
		border-radius: 12px;
	}
	.tzumi-info-page .tzumi-doc-toc-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0;
		padding: 14px 16px;
		color: var(--tzumi-ink);
		cursor: pointer;
		pointer-events: auto;
	}
	.tzumi-info-page .tzumi-doc-toc-chev {
		display: block;
		width: 16px;
		height: 16px;
		color: var(--tzumi-midgrey);
		transition: transform .15s ease;
	}
	.tzumi-info-page .tzumi-doc-toc-panel[open] .tzumi-doc-toc-chev {
		transform: rotate(180deg);
	}
	.tzumi-info-page ol.tzumi-doc-toc-list {
		margin: 0 16px 14px;
	}
	.tzumi-info-page .tzumi-doc-body h2 {
		scroll-margin-top: 90px;
	}
}

/* ---------- blog listing ([tzumi_blog]) ----------
   Hero (shared) → a topic/type bar → featured guide → guide cards →
   troubleshooting rows on a paper panel → closing panel. Guide images are
   product cut-outs on white, so like the product cards they sit on a
   paper tile with mix-blend-mode: multiply. */

.tzumi-info-page .tzumi-blog-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin: 22px 0 0;
	font-size: 14px;
	color: var(--tzumi-midgrey);
}
.tzumi-info-page .tzumi-blog-stats strong {
	font-weight: 700;
	color: var(--tzumi-ink);
	font-variant-numeric: tabular-nums;
}

.tzumi-info-page .tzumi-blog-bar {
	border-bottom: 1px solid var(--tzumi-line);
	background: var(--tzumi-white);
}
.tzumi-info-page .tzumi-blog-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	padding-top: 16px;
	padding-bottom: 16px;
}
/* desktop: chips wrap; phones (below): one swipeable row */
.tzumi-info-page .tzumi-blog-topics {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
	padding: 2px;
	margin: -2px;
}
.tzumi-info-page .tzumi-blog-topics::-webkit-scrollbar {
	display: none;
}
.tzumi-info-page .tzumi-blog-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex-shrink: 0;
	padding: 8px 14px;
	border: 1px solid var(--tzumi-line);
	border-radius: 999px;
	background: var(--tzumi-white);
	font-size: 14px;
	font-weight: 600;
	color: var(--tzumi-ink);
	text-decoration: none !important;
	white-space: nowrap;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.tzumi-info-page .tzumi-blog-chip:hover {
	border-color: var(--tzumi-ink);
}
.tzumi-info-page .tzumi-blog-chip-count {
	font-size: 12px;
	font-weight: 500;
	color: var(--tzumi-lightgrey);
	font-variant-numeric: tabular-nums;
}
.tzumi-info-page .tzumi-blog-chip.is-active {
	background: var(--tzumi-ink);
	border-color: var(--tzumi-ink);
	color: var(--tzumi-white);
}
.tzumi-info-page .tzumi-blog-chip.is-active .tzumi-blog-chip-count {
	color: rgba(255, 255, 255, .7);
}

.tzumi-info-page .tzumi-blog-types {
	display: inline-flex;
	flex-shrink: 0;
	gap: 2px;
	padding: 4px;
	border-radius: 12px;
	background: var(--tzumi-paper);
}
.tzumi-info-page .tzumi-blog-type {
	padding: 8px 14px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 600;
	color: var(--tzumi-midgrey);
	text-decoration: none !important;
	white-space: nowrap;
	transition: color .15s ease, background-color .15s ease;
}
.tzumi-info-page .tzumi-blog-type:hover {
	color: var(--tzumi-ink);
}
.tzumi-info-page .tzumi-blog-type.is-active {
	background: var(--tzumi-white);
	color: var(--tzumi-ink);
	box-shadow: 0 1px 3px rgba(24, 24, 24, .12);
}

.tzumi-info-page .tzumi-blog-body {
	padding-top: 56px;
}

/* cards
   - the whole card is one link: the title's <a> is stretched over the
     card with ::after, so there's one tab stop and the whole card clicks
   - the media tile takes a pale per-topic tint (--tzumi-tint, set inline
     from tzumi_blocks_blog_tint()); product cut-outs multiply onto it, so
     a guide card never reads as a store product card
   - summaries reserve three lines and "Read the guide" sits on the card's
     bottom edge, so every card in a row lines up */
.tzumi-info-page .tzumi-blog-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.tzumi-info-page .tzumi-blog-media {
	display: block;
	aspect-ratio: 1200 / 628;
	max-width: 100%;
	border-radius: 16px;
	overflow: hidden;
	background: var(--tzumi-tint, var(--tzumi-paper));
	transition: transform .25s ease, box-shadow .25s ease;
}
.tzumi-info-page .tzumi-blog-img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	padding: 6%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform .4s ease;
}
.tzumi-info-page .tzumi-blog-card:hover .tzumi-blog-media {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px -20px rgba(24, 24, 24, .35);
}
.tzumi-info-page .tzumi-blog-card:hover .tzumi-blog-img {
	transform: scale(1.04);
}
.tzumi-info-page .tzumi-blog-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 10px;
	padding-top: 20px;
}
.tzumi-info-page .tzumi-blog-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--tzumi-lightgrey);
}
.tzumi-info-page .tzumi-blog-kind {
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tzumi-accent);
}
.tzumi-info-page .tzumi-blog-dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--tzumi-lightgrey);
}
.tzumi-info-page .tzumi-blog-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.015em;
	text-transform: none;
}
.tzumi-info-page .tzumi-blog-title a {
	color: var(--tzumi-ink);
	text-decoration: none !important;
	transition: color .15s ease;
}
.tzumi-info-page .tzumi-blog-title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 16px;
}
.tzumi-info-page .tzumi-blog-card:hover .tzumi-blog-title a {
	color: var(--tzumi-accent);
}
/* keyboard focus outlines the whole card, not just the title text */
.tzumi-info-page .tzumi-blog-title a:focus-visible {
	outline: none;
}
.tzumi-info-page .tzumi-blog-title a:focus-visible::after {
	outline: 2px solid var(--tzumi-accent);
	outline-offset: 6px;
}
.tzumi-info-page .tzumi-blog-summary {
	margin: 0;
	min-height: calc(1.6em * 3);
	font-size: 15px;
	line-height: 1.6;
	color: var(--tzumi-midgrey);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tzumi-info-page .tzumi-blog-read {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--tzumi-ink);
	transition: color .15s ease;
}
.tzumi-info-page .tzumi-blog-card:hover .tzumi-blog-read {
	color: var(--tzumi-accent);
}
.tzumi-info-page .tzumi-blog-read .tzumi-ip-svg,
.tzumi-info-page .tzumi-blog-more .tzumi-ip-svg {
	width: 16px;
	height: 16px;
	transition: transform .15s ease;
}
.tzumi-info-page .tzumi-blog-card:hover .tzumi-blog-read .tzumi-ip-svg,
.tzumi-info-page .tzumi-blog-more:hover .tzumi-ip-svg {
	transform: translateX(3px);
}

/* featured (newest guide with a summary) */
.tzumi-info-page .tzumi-blog-card.is-featured {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}
.tzumi-info-page .tzumi-blog-card.is-featured .tzumi-blog-media {
	border-radius: var(--tzumi-radius);
}
.tzumi-info-page .tzumi-blog-card.is-featured .tzumi-blog-card-body {
	gap: 16px;
	padding-top: 0;
}
.tzumi-info-page .tzumi-blog-card.is-featured .tzumi-blog-title {
	font-size: clamp(28px, 2.8vw, 40px);
	line-height: 1.12;
	letter-spacing: -0.025em;
}
.tzumi-info-page .tzumi-blog-card.is-featured .tzumi-blog-summary {
	min-height: 0;
	font-size: 17px;
	-webkit-line-clamp: 4;
}
.tzumi-info-page .tzumi-blog-card.is-featured .tzumi-blog-read {
	margin-top: 8px;
	color: var(--tzumi-accent);
}
.tzumi-info-page .tzumi-blog-card.is-featured .tzumi-blog-title a::after {
	border-radius: var(--tzumi-radius);
}

/* sections */
.tzumi-info-page .tzumi-blog-section {
	margin-top: 80px;
}
.tzumi-info-page .tzumi-blog-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
	flex-wrap: wrap;
	margin: 0 0 28px;
}
.tzumi-info-page .tzumi-blog-h2 {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--tzumi-ink);
	text-transform: none;
}
.tzumi-info-page .tzumi-blog-section-sub {
	margin: 8px 0 0;
	font-size: 15px;
	color: var(--tzumi-midgrey);
}
.tzumi-info-page .tzumi-blog-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--tzumi-accent);
	text-decoration: none !important;
	white-space: nowrap;
}
.tzumi-info-page .tzumi-blog-range {
	margin: 0;
	font-size: 14px;
	color: var(--tzumi-midgrey);
	font-variant-numeric: tabular-nums;
}
.tzumi-info-page .tzumi-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px 24px;
}

/* troubleshooting rows on a paper panel */
.tzumi-info-page .tzumi-blog-help {
	padding: 40px 44px 28px;
	border-radius: var(--tzumi-radius);
	background: var(--tzumi-paper);
}
.tzumi-info-page ul.tzumi-blog-rows {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 40px;
}
.tzumi-info-page ul.tzumi-blog-rows > li {
	margin: 0;
	list-style: none;
	border-top: 1px solid var(--tzumi-line);
}
.tzumi-info-page .tzumi-blog-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 0;
	color: var(--tzumi-ink);
	text-decoration: none !important;
}
.tzumi-info-page .tzumi-blog-row-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	padding: 10px;
	border-radius: 10px;
	background: var(--tzumi-accent-tint);
	color: var(--tzumi-accent);
}
.tzumi-info-page .tzumi-blog-help .tzumi-blog-row-icon {
	background: var(--tzumi-white);
}
.tzumi-info-page .tzumi-blog-row-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.tzumi-info-page .tzumi-blog-row-kicker {
	font-size: 12px;
	color: var(--tzumi-lightgrey);
}
.tzumi-info-page .tzumi-blog-row-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	transition: color .15s ease;
}
.tzumi-info-page .tzumi-blog-row > .tzumi-ip-svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--tzumi-lightgrey);
	transition: color .15s ease, transform .15s ease;
}
.tzumi-info-page .tzumi-blog-row:hover .tzumi-blog-row-title,
.tzumi-info-page .tzumi-blog-row:hover > .tzumi-ip-svg {
	color: var(--tzumi-accent);
}
.tzumi-info-page .tzumi-blog-row:hover > .tzumi-ip-svg {
	transform: translateX(3px);
}

.tzumi-info-page .tzumi-blog-pages {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 56px 0 0;
}
.tzumi-info-page .tzumi-blog-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 10px;
	border: 1px solid var(--tzumi-line);
	border-radius: 10px;
	background: var(--tzumi-white);
	font-size: 14px;
	font-weight: 600;
	color: var(--tzumi-ink);
	text-decoration: none !important;
	font-variant-numeric: tabular-nums;
}
.tzumi-info-page a.tzumi-blog-page:hover {
	border-color: var(--tzumi-ink);
}
.tzumi-info-page .tzumi-blog-page .tzumi-ip-svg {
	width: 16px;
	height: 16px;
}
.tzumi-info-page .tzumi-blog-page.is-current {
	background: var(--tzumi-ink);
	border-color: var(--tzumi-ink);
	color: var(--tzumi-white);
}
.tzumi-info-page .tzumi-blog-page-gap {
	color: var(--tzumi-lightgrey);
}
.tzumi-info-page .tzumi-blog-empty {
	margin: 0;
	padding: 48px 0;
	font-size: 16px;
	color: var(--tzumi-midgrey);
}

@media (max-width: 1024px) {
	.tzumi-info-page .tzumi-blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.tzumi-info-page .tzumi-blog-card.is-featured {
		gap: 32px;
	}
}
@media (max-width: 860px) {
	.tzumi-info-page .tzumi-blog-bar-inner {
		flex-direction: column;
		align-items: stretch;
	}
	/* topics scroll edge-to-edge */
	.tzumi-info-page .tzumi-blog-topics {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin: -2px -20px;
		padding: 2px 20px;
	}
	.tzumi-info-page .tzumi-blog-types {
		display: flex;
	}
	.tzumi-info-page .tzumi-blog-type {
		flex: 1 1 0;
		text-align: center;
	}
	.tzumi-info-page .tzumi-blog-card.is-featured {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
	.tzumi-info-page ul.tzumi-blog-rows {
		grid-template-columns: minmax(0, 1fr);
	}
	.tzumi-info-page .tzumi-blog-help {
		padding: 28px 20px 12px;
	}
	.tzumi-info-page .tzumi-blog-section {
		margin-top: 56px;
	}
}
@media (max-width: 560px) {
	.tzumi-info-page .tzumi-blog-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
	/* one card per row: nothing to line up with, so no reserved lines */
	.tzumi-info-page .tzumi-blog-summary {
		min-height: 0;
	}
	.tzumi-info-page .tzumi-blog-body {
		padding-top: 36px;
	}
	.tzumi-info-page .tzumi-blog-type {
		padding: 8px 6px;
		font-size: 13px;
	}
}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
	.tzumi-info-page .tzumi-ip-grid-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.tzumi-info-page .tzumi-ip-logos {
		--tzumi-logo-cols: 4;
	}
}

@media (max-width: 860px) {
	.tzumi-info-page {
		--tzumi-section-y: 64px;
	}
	.tzumi-info-page .tzumi-ip-split,
	.tzumi-info-page .tzumi-ip-grid-2,
	.tzumi-info-page .tzumi-ip-checks-2col {
		grid-template-columns: minmax(0, 1fr);
	}
	.tzumi-info-page .tzumi-ip-split {
		gap: 24px;
	}
	.tzumi-info-page .tzumi-ip-cta {
		padding: 36px;
	}
}

@media (max-width: 640px) {
	.tzumi-info-page {
		--tzumi-section-y: 52px;
		--tzumi-radius: 14px;
	}
	.tzumi-info-page .tzumi-ip-hero {
		padding: 20px 0 48px;
	}
	.tzumi-info-page .tzumi-ip-crumbs {
		margin-bottom: 36px;
	}
	.tzumi-info-page .tzumi-ip-lede {
		font-size: 16px;
		margin-top: 18px;
	}
	.tzumi-info-page .tzumi-ip-section-head {
		margin-bottom: 28px;
	}
	.tzumi-info-page .tzumi-ip-h2 {
		font-size: 26px;
	}
	.tzumi-info-page .tzumi-ip-grid-4 {
		grid-template-columns: minmax(0, 1fr);
	}
	.tzumi-info-page .tzumi-ip-grid {
		gap: 14px;
	}
	.tzumi-info-page .tzumi-ip-card,
	.tzumi-info-page .tzumi-ip-notice {
		padding: 22px;
	}
	.tzumi-info-page .tzumi-ip-notice {
		flex-direction: column;
		gap: 16px;
	}
	.tzumi-info-page .tzumi-ip-logos {
		--tzumi-logo-cols: 2;
		--tzumi-logo-gap: 12px;
	}
	.tzumi-info-page .tzumi-ip-logo {
		height: 72px;
		padding: 10px 14px;
	}
	.tzumi-info-page .tzumi-ip-cta {
		padding: 28px 22px;
	}
	.tzumi-info-page .tzumi-ip-cta-title {
		font-size: 20px;
	}
	.tzumi-info-page .tzumi-ip-btn {
		width: 100%;
	}
	.tzumi-info-page .tzumi-ip-p:first-child {
		font-size: 17px;
	}
	.tzumi-info-page .tzumi-doc-body h2 {
		margin-top: 40px;
		padding-top: 24px;
		font-size: 20px;
	}
	.tzumi-info-page .tzumi-doc-summary,
	.tzumi-info-page .tzumi-doc-notice {
		padding: 22px;
		margin-bottom: 36px;
	}
	.tzumi-info-page .tzumi-doc-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.tzumi-info-page .tzumi-ip-logo,
	.tzumi-info-page .tzumi-ip-card-link .tzumi-ip-svg,
	.tzumi-info-page .tzumi-ip-btn {
		transition: none;
	}
	.tzumi-info-page .tzumi-ip-card-link:hover .tzumi-ip-svg {
		transform: none;
	}
}
