/*
 * Layout that follows the text instead of English string lengths.
 * Product names, form labels and headings stay readable in Chinese
 * and in later languages with longer words.
 */

html {
	scroll-padding-top: 78px;
}

html:has(body.admin-bar) {
	scroll-padding-top: 110px;
}

.rr-source h1,
.rr-source h2,
.rr-source h3 {
	overflow-wrap: break-word;
	scroll-margin-top: 78px;
	line-height: 1.3;
}

html:has(body.admin-bar) .rr-source h1,
html:has(body.admin-bar) .rr-source h2,
html:has(body.admin-bar) .rr-source h3 {
	scroll-margin-top: 110px;
}

html[lang|="zh"] body.tmk-home {
	font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", urw-din, Barlow, Helvetica, Arial, sans-serif;
	letter-spacing: 0;
}

html[lang|="zh"] .rr-source {
	line-height: 1.7;
	line-break: strict;
}

/* Comparison columns share row heights, so a longer translation
   does not push one side out of line with the other. */
.rr-source .grid.sys-ov:has(> .ov-row > .ov-extension) > .ov-row {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 4;
	min-width: 0;
}

.rr-source .ov-intro,
.rr-source .ov-title,
.rr-source .ov-intro p {
	min-width: 0;
	overflow-wrap: break-word;
}

/* Keep the product photo at a fixed size. Let the caption use the
   free space and wrap on word boundaries, including CJK phrases. */
.rr-source .ov-inner:not(.ov-inner-tmk) > div {
	width: auto;
	flex: 1 1 7.5rem;
	min-width: 6.5rem;
	max-width: 11rem;
	line-height: 1.35;
	word-break: keep-all;
	line-break: strict;
	overflow-wrap: break-word;
	text-wrap: balance;
}

.rr-source .ov-inner:not(.ov-inner-tmk) > div > div {
	width: 6rem;
	max-width: 100%;
	flex: none;
}

.rr-source .accord-item > div:first-of-type:has(img.tmk-product-shot) {
	align-items: center;
	align-self: center;
}

.rr-source .accord-item > div:first-of-type img.tmk-product-shot {
	height: 4.5rem;
	object-fit: contain;
	object-position: center;
}

.rr-source .accord-item.active > div:first-of-type img.tmk-product-shot {
	width: 8rem;
	height: 8rem;
}

@media (max-width: 768px) {
	.rr-source .accord-item > div:first-of-type img.tmk-product-shot,
	.rr-source .accord-item.active > div:first-of-type img.tmk-product-shot {
		width: 4rem;
	}
}

.rr-source .linkbox.contactbox:not(:has(.linkbox-image)) {
	padding: 1.4rem 1.75rem;
	gap: 2rem;
}

.rr-source .linkbox.contactbox:not(:has(.linkbox-image)) .linkbox-text {
	padding: 0;
	min-width: 0;
}

.rr-source .linkbox.contactbox:not(:has(.linkbox-image)) .preview-text1 p,
.rr-source .linkbox.contactbox:not(:has(.linkbox-image)) .preview-text2 p {
	margin: 0;
}

.rr-source .linkbox.contactbox:not(:has(.linkbox-image)) .preview-text1 {
	margin-bottom: 0.35rem;
}

.rr-source .linkbox.contactbox:not(:has(.linkbox-image)) .preview-text2 p {
	line-height: 1.6;
}

.rr-source .linkbox.contactbox:not(:has(.linkbox-image)) .linkbox-button {
	padding-right: 0;
	flex: none;
}

@media (max-width: 768px) {
	.rr-source .linkbox.contactbox:not(:has(.linkbox-image)) {
		padding: 1.15rem;
		gap: 0.85rem;
	}

	.rr-source .linkbox.contactbox:not(:has(.linkbox-image)) .linkbox-text,
	.rr-source .linkbox.contactbox:not(:has(.linkbox-image)) .linkbox-button {
		padding: 0;
	}
}

.rr-source .ov-inner > div.tmk-static,
.rr-source .ov-inner > div.tmk-static:hover {
	transform: none;
	cursor: default;
	font-weight: inherit;
}

.rr-source .ov-inner > div.tmk-static:hover > div {
	background-color: var(--rrgray-mid);
}

.rr-source .ov-inner-tmk > div {
	line-height: 1.45;
	word-break: keep-all;
	line-break: strict;
	overflow-wrap: break-word;
	text-wrap: balance;
}

/* The case photo shares the main TMK image size (12rem).
   Wrapping it in picture makes the img both :first-of-type and
   :last-of-type, so the 100% cable rule was stretching the case. */
.rr-source .ov-inner-tmk > div > div > picture:first-child img,
.rr-source .ov-inner-tmk > div > div > img:first-child {
	width: 12rem;
	max-width: 100%;
	height: auto;
}

.rr-source .ov-inner-tmk > div > div > picture:first-child ~ picture img,
.rr-source .ov-inner-tmk > div > div > picture:first-child ~ img,
.rr-source .ov-inner-tmk > div > div > img:first-child ~ img,
.rr-source .ov-inner-tmk > div > div > img:first-child ~ picture img {
	width: 100%;
	height: auto;
}

/* Transponder photos are delivered in picture. The layout rules target
   a direct img, so the centered product and the accordion frames lost
   their size. Keep the picture from generating a box. */
.rr-source .large-image-accordion-wrapper > .large-images > picture,
.rr-source .large-image-accordion-wrapper > .wrapper-text > picture {
	display: contents;
}

.rr-source .large-image-accordion-wrapper > .large-images picture > img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 1rem;
	opacity: 0;
	transition: opacity 0.5s;
}

.rr-source .large-image-accordion-wrapper > .large-images picture > img.active {
	opacity: 1;
}

.rr-source .large-image-accordion-wrapper > .wrapper-text picture > img[data-image] {
	display: none;
}

@media (max-width: 768px) {
	.rr-source .large-image-accordion-wrapper > .wrapper-text picture > img[data-image] {
		display: block;
		width: 100%;
		border-radius: 1rem;
		overflow: hidden;
		max-height: 0;
		margin-bottom: 0;
		opacity: 0;
		pointer-events: none;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		object-position: center;
		transition: max-height 0.5s, opacity 0.5s, margin 0.2s;
	}

	.rr-source .large-image-accordion-wrapper > .wrapper-text picture > img[data-image].active {
		max-height: 100vw;
		margin-bottom: 0.5rem;
		opacity: 1;
		pointer-events: auto;
	}
}

/* The product in the middle of the four photos is 33% of that square. */
.rr-source .transponders-4-images > picture:has(> img.transponder-centered) {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 33%;
	height: 33%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	margin: 0;
}

.rr-source .transponders-4-images > picture:has(> img.transponder-centered) img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Mountainbike setup art is portrait. Other solution pages use a 3:2 frame. */
.rr-source .grid-item:has(img#setup_pic[src*="mountainbike-setup"]) {
	container-type: inline-size;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.rr-source img#setup_pic[src*="mountainbike-setup"] {
	width: auto !important;
	height: calc(100cqi * 2 / 3);
	max-width: 100%;
}

.rr-source .grid-item:has(img#setup_pic[src*="mountainbike-setup"]) .equ-highlights {
	width: auto;
	height: calc(100cqi * 2 / 3);
	aspect-ratio: 1200 / 1451 !important;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
}

.rr-source .select_button.submit {
	aspect-ratio: auto;
	width: fit-content;
	height: 50px;
	max-width: 100%;
	margin-inline: auto;
	white-space: nowrap;
	line-height: 1.2;
}

.rr-source .input_columns > .column,
.rr-source .two_inputs > div,
.rr-source .form-group,
.rr-source .result_content_section_text {
	min-width: 0;
}

.rr-source .two_inputs {
	flex-wrap: wrap;
}

.rr-source .two_inputs > div {
	width: auto;
	flex: 1 1 9rem;
}

.rr-source .form-group input + label.active,
.rr-source .form-group select + label.active {
	max-width: calc(100% - 20px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rr-source .form-group textarea,
.rr-source #comment {
	min-height: 12rem;
	line-height: 1.6;
}

.rr-source .input_checkbox label {
	white-space: normal;
	line-height: 1.45;
}

.tmk-nav__panel {
	max-width: min(22rem, 80vw);
}

.rr-source .tmk-platform-name {
	margin: 0 0 0.35rem;
	color: #fff;
	font-size: clamp(1.55rem, 2.6vw, 2.35rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.01em;
}

.tmk-nav__panel a {
	white-space: normal;
	line-height: 1.4;
}

.rr-source .tmk-bib-rotator {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	background: #efefef;
}

.rr-source .tmk-bib-rotator img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.45s ease;
}

.rr-source .tmk-bib-rotator img.is-on {
	opacity: 1;
}

@media (max-width: 800px) {
	.rr-source .grid.sys-ov:has(> .ov-row > .ov-extension) > .ov-row {
		grid-row: auto;
		grid-template-rows: none;
		display: block;
	}

	.rr-source .ov-inner:not(.ov-inner-tmk) > div {
		max-width: 100%;
	}
}

/* News articles use the same column as the Race Result article page.
   A lead photo narrower than that column still spans it. */
.rr-source .grid-item.article > img {
	display: block;
	width: 100%;
	height: auto;
}

.rr-source .newsarticle_text_copytext iframe,
.rr-source .newsarticle_text_copytext video {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	margin: 1rem 0;
	border: 0;
	border-radius: 1rem;
}

.tmk-lang__panel {
	max-height: min(70vh, 32rem);
	overflow-y: auto;
}

html[lang|="ar"] body,
html[lang|="he"] body,
html[lang|="th"] body {
	line-height: 1.65;
}

html[lang|="ar"] body {
	font-family: "Segoe UI", "Noto Naskh Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
}

html[lang|="he"] body {
	font-family: "Segoe UI", "Noto Sans Hebrew", Arial, sans-serif;
}

html[lang|="th"] body {
	font-family: "Leelawadee UI", "Noto Sans Thai", "Segoe UI", Tahoma, sans-serif;
}

html[dir="rtl"] .rr-source .carousel-container {
	overflow: hidden;
}

html[dir="rtl"] .rr-source .sec .carousel-track {
	overflow: visible;
	transition: transform 420ms ease;
}

html[dir="rtl"] .rr-source .sec .carousel-track.dragging {
	transition: none;
}

html[dir="rtl"] .tmk-lang__panel,
html[dir="rtl"] .tmk-account__panel {
	right: auto;
	left: 0;
}

html[dir="rtl"] .tmk-nav__panel {
	text-align: right;
}

html[dir="rtl"] .rr-source input,
html[dir="rtl"] .rr-source textarea,
html[dir="rtl"] .rr-source select,
html[dir="rtl"] .tmk-account input {
	text-align: right;
}

/* The plus sits in the gap toward the next card. In RTL that gap is on the left. */
html[dir="rtl"] .rr-source .grid > .buyorrent:not(:last-of-type)::after {
	right: auto;
	left: -2.6rem;
}

@media (max-width: 1024px) {
	html[dir="rtl"] .rr-source .grid > .buyorrent:not(:last-of-type)::after {
		right: auto;
		left: 50%;
	}
}

/* Phone and the collapsed menu. Wide screens keep the rules above. */
.tmk-nav__expand {
	display: none;
}

@media (max-width: 1100px) {
	.tmk-header__inner {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 8px;
		min-width: 0;
	}

	.tmk-menu-toggle,
	.tmk-utils {
		flex: 0 0 auto;
	}

	.tmk-brand {
		flex: 1 1 auto;
		min-width: 0;
	}

	.tmk-brand .tmk-logo {
		max-width: 100%;
		font-size: 20px;
	}

	.tmk-utils {
		gap: 2px;
	}

	.tmk-utils__lang {
		height: 42px;
		min-width: 0;
		min-height: 0;
		padding: 0 4px;
	}

	.tmk-nav__expand svg {
		width: 22px;
		height: 22px;
	}

	.tmk-nav__item:has(.tmk-nav__panel) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 44px;
		align-items: center;
	}

	.tmk-nav__expand {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: transparent;
		color: #007DBC;
		cursor: pointer;
	}

	.tmk-nav__item.is-expanded .tmk-nav__expand svg {
		transform: rotate(180deg);
	}

	.tmk-nav__panel {
		grid-column: 1 / -1;
	}

	.tmk-nav__item > a {
		display: block;
		width: auto;
		max-width: 100%;
		white-space: normal;
		overflow-wrap: break-word;
		line-height: 1.4;
	}

	.tmk-nav__item:hover .tmk-nav__panel,
	.tmk-nav__item:focus-within .tmk-nav__panel {
		display: none;
	}

	.tmk-nav__item.is-expanded .tmk-nav__panel,
	.tmk-nav__item.is-expanded:hover .tmk-nav__panel,
	.tmk-nav__item.is-expanded:focus-within .tmk-nav__panel {
		position: static;
		top: auto;
		right: auto;
		left: auto;
		display: grid;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		transform: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
	}

	.tmk-nav__panel a {
		display: block;
		width: auto;
		max-width: 100%;
		padding: 8px 8px 8px 16px;
		white-space: normal;
		overflow-wrap: break-word;
		line-height: 1.4;
		box-sizing: border-box;
	}
}

@media (max-width: 767px) {
	html {
		scroll-padding-top: 74px;
	}

	.rr-source h1,
	.rr-source h2,
	.rr-source h3,
	.tmk-hero h1,
	.tmk-sys-hero h1 {
		scroll-margin-top: 74px;
		max-width: 100%;
	}

	#main-content,
	.rr-source,
	.tmk-page,
	.tmk-wrap {
		max-width: 100%;
		overflow-x: clip;
	}

	.rr-source .grid,
	.rr-source .grid-item,
	.rr-source .sec,
	.rr-source .linkbox,
	.rr-source .linkbox-text,
	.tmk-card,
	.tmk-offer-card {
		min-width: 0;
		max-width: 100%;
	}

	.rr-source .grid-item img,
	.rr-source .sec > img,
	.rr-source figure img,
	.rr-source .article img,
	.rr-source .box-squared-image img,
	.rr-source .linkbox-image img {
		max-width: 100%;
		height: auto;
	}

	.rr-source img[src=""],
	.rr-source .linkbox-image:has(> img[src=""]) {
		display: none;
	}

	.rr-source .header-wrapper > .sec.large-header > picture,
	.tmk-company .hero-bg > picture,
	.rr-source .sol-hero > picture {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
	}

	.rr-source .header-wrapper > .sec.large-header > img,
	.rr-source .header-wrapper > .sec.large-header > picture > img,
	.tmk-company .hero-bg picture > img,
	.rr-source .sol-hero > picture > img {
		width: 100%;
		max-width: none;
		height: 100%;
		object-fit: cover;
	}

	.rr-source .mp4video-squared video {
		width: 100%;
		max-width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.rr-source .tmk-bib-rotator img {
		width: 100%;
		max-width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.rr-source video,
	.rr-source iframe,
	.rr-source embed {
		max-width: 100%;
	}

	.rr-source table {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
	}

	.rr-source .btn-1,
	.rr-source .btn-2,
	.rr-source .btn-3,
	.rr-source .linkbox-button,
	.rr-source .linkbox-button button,
	.rr-source .linkbox-button a {
		max-width: 100%;
		height: auto;
		min-height: 2.75rem;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.rr-source .header-wrapper > .large-header-text {
		padding-right: 1rem;
		padding-left: 1rem;
	}

	.rr-source .header-wrapper > .large-header-text h1,
	.rr-source .header-wrapper > .large-header-text p {
		max-width: 100%;
	}

	html[lang|="en"] .rr-source h1,
	html[lang|="en"] .rr-source h2,
	html[lang|="en"] .rr-source .btn-1,
	html[lang|="en"] .rr-source .btn-2,
	html[lang|="en"] .rr-source .btn-3,
	html[lang|="es"] .rr-source h1,
	html[lang|="es"] .rr-source h2,
	html[lang|="es"] .rr-source .btn-1,
	html[lang|="es"] .rr-source .btn-2,
	html[lang|="es"] .rr-source .btn-3,
	html[lang|="en"] .tmk-nav__item > a,
	html[lang|="es"] .tmk-nav__item > a,
	html[lang|="en"] .tmk-nav__panel a,
	html[lang|="es"] .tmk-nav__panel a {
		overflow-wrap: break-word;
		max-width: 100%;
	}

	html[lang|="en"] .rr-source .header-wrapper > .large-header-text h1,
	html[lang|="es"] .rr-source .header-wrapper > .large-header-text h1 {
		font-size: clamp(1.65rem, 8vw, 2.25rem);
		line-height: 1.25;
	}

	html[dir="rtl"] .rr-source ul {
		padding-left: 0;
		padding-right: 1.25rem;
	}

	html[dir="rtl"] .tmk-nav__panel {
		padding-right: 12px;
		padding-left: 0;
		text-align: right;
	}

	html[dir="rtl"] .tmk-nav__item > a,
	html[dir="rtl"] .tmk-nav__panel a {
		text-align: right;
	}

	html[dir="rtl"] .rr-source .header-wrapper > .large-header-text {
		text-align: right;
	}

	html[dir="rtl"] .rr-source .sec .carousel-track {
		direction: rtl;
	}
}

@media (max-width: 575px) {
	.rr-source .video-grid {
		display: grid;
	}

	.rr-source .video-grid > video {
		grid-area: 1 / 1;
		width: 100%;
		height: auto;
		aspect-ratio: 2 / 1;
		object-fit: cover;
	}

	.rr-source .video-layover {
		display: contents;
	}

	.rr-source .layover-slogan {
		grid-area: 1 / 1;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0 1rem;
		text-align: center;
		pointer-events: none;
	}

	.rr-source .layover-slogan h2 {
		color: #fff;
		text-shadow: 0 0 10px rgba(0, 0, 0, 0.65);
	}

	.rr-source .layover-facts {
		grid-area: 2 / 1;
	}
}

.rr-source .carousel-container:has(> .carousel-track > .testimonials){justify-content:flex-end;margin-top:0.25rem;row-gap:1.25rem;}