/* r2o Tires 2026 — hero logo strip, hero finder and Ride Safe banner.
   Figma: r2o-Inner-Pages, page "Tires" (1499:334)
     desktop  1499:335  "r2o Tires - Desktop"  (1920)
     mobile   1558:335  "r2o Tires - Mobile - 2" (390)
   Sections rebuilt here: hero-logos (1572:341 / 1572:353),
   tires-form (1572:340 / 1572:352), ridesafe-banner (1572:339 / 1572:350).

   The finder panels are WowForm forms, so their fields carry the class names
   from rto-form-popups (.form-row / .form-field / .field-wrapper / .select_box)
   and are styled by driving forms.css's own custom properties wherever it
   exposes one, rather than re-declaring its rules.

   Every px value below is measured off those frames. Desktop values are the
   base; the 390 frame drives the <=767 block. 1440 and 1140 have no frame, so
   the fluid values (clamp / min) are derived to degrade continuously between
   the two measured widths without overflow. */

.tires-lp #tires-hero-logos,
.tires-lp #tires-hero,
.tires-lp #tires-ridesafe {
	--red: #fc0d1b;
	--card-border: #e1e1e3;
	--tab-idle: #f6f6f6;
	--input-border: #d9d9d0;
	--label: #505050;
	--input-text: #373737;
	--star: #fc5147;
	--wash: #1f1e1e;
	font-size: 16px;
	color: #000;
}

.tires-lp #tires-hero .container,
.tires-lp #tires-ridesafe .container {
	/* 1280px of content — the Figma container (banner is 1279px at x=320 in the
	   1920 frame) — plus the 20px gutters the page keeps below 1320px. */
	width: 1320px;
	max-width: 100%;
	padding-left: 20px;
	padding-right: 20px;
}

/* ------------------------------------------------------------------ *
 * hero-logos — 1920x48 red strip, five logos on a 1200px centred band
 * ------------------------------------------------------------------ */

#tires-hero-logos {
	height: 48px;
	overflow: hidden;
}

#tires-hero-logos .thl-swiper {
	height: 100%;
}

#tires-hero-logos .swiper-wrapper {
	height: 100%;
	align-items: center;
}

#tires-hero-logos .thl-logo {
	display: flex;
	width: auto;
	height: 100%;
	flex-shrink: 0;
	align-items: center;
}

#tires-hero-logos .thl-logo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
}

@media screen and (min-width: 1100px) {
	/* Swiper is destroyed above 1100px, so the wrapper is a plain centred row.
	   The five marks measure 815px together with uniform 96px gutters at 1920
	   (367 -> 1567). 5vw reproduces that exactly at 1920 and closes the gutters
	   down to 1100px; below that the row can no longer fit, so it falls back to
	   the marquee the 390 frame uses. */
	#tires-hero-logos .swiper-wrapper {
		display: flex;
		justify-content: center;
		gap: clamp(12px, 5vw, 96px);
		padding: 0 20px;
		transform: none !important;
	}

	#tires-hero-logos .thl-logo {
		flex: 0 1 auto;
		min-width: 0;
	}
}

@media screen and (max-width: 1099px) {
	/* Marquee mode: measured 116px between the two marks on the 390 frame,
	   at a constant speed rather than Swiper's default easing. */
	#tires-hero-logos .swiper-slide {
		width: auto;
		margin-right: 116px;
	}

	#tires-hero-logos .swiper-wrapper {
		transition-timing-function: linear;
	}
}

/* ------------------------------------------------------------------ *
 * tires-form — hero photo band + the four-tab finder card
 * ------------------------------------------------------------------ */

#tires-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

#tires-hero .th-photo {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 440px;
	background-repeat: no-repeat;
	/* The 1920x500 export is masked to its bottom 440px in Figma. */
	background-position: center bottom;
	background-size: cover;
	background-image: url(../images/tires/26/hero-back.jpg);
	background-image: image-set(url("../images/tires/26/hero-back.webp") 1x, url("../images/tires/26/hero-back@2x.webp") 2x);
	background-image: -webkit-image-set(url("../images/tires/26/hero-back.webp") 1x, url("../images/tires/26/hero-back@2x.webp") 2x);
}

#tires-hero .th-photo:after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #000;
	opacity: 0.55;
}

#tires-hero .container {
	padding-top: 76px;
	padding-bottom: 40px;
}

#tires-hero h1.th-title {
	font-size: clamp(36px, 5.67vw, 72.632px);
	line-height: 0.95;
	letter-spacing: 0;
	margin-bottom: 0;
}

#tires-hero .th-sub {
	width: 685px;
	max-width: 100%;
	margin-top: 10px;
	margin-bottom: 0;
	font-size: clamp(18px, 2.58vw, 33px);
	line-height: 1.06;
}

/* --- card ------------------------------------------------------- */

#tires-hero .th-card {
	width: 835px;
	max-width: 100%;
	margin-top: 39px;
	border: 1px solid var(--card-border);
	border-radius: 20px;
	box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.07);
	overflow: hidden;
}

#tires-hero .th-tabs {
	position: relative;
	z-index: 1;
}

#tires-hero .th-tab {
	flex: 1 1 0;
	min-width: 0;
	/* per-tab grow ratios are set below for the mobile frame's 89/87/87/86 */
	display: flex;
	align-items: center;
	justify-content: center;
	/* min- rather than a fixed height: the label centres itself at any line
	   count, and a wrapped label grows the row instead of being clipped. */
	min-height: 50px;
	padding: 0 4px;
	margin: 0;
	border: 0;
	border-radius: 0;
	border-right: 1px solid var(--card-border);
	border-bottom: 1px solid var(--card-border);
	background-color: var(--tab-idle);
	color: #000;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

/* Blockified as the button's only flex item, so the two lines centre together. */
#tires-hero .th-tab-label {
	text-align: center;
}

#tires-hero .th-tab:last-child {
	border-right: 0;
}

#tires-hero .th-tab:hover {
	color: var(--red);
}

#tires-hero .th-tab.is-active {
	background-color: #fff;
	border-bottom-color: transparent;
	color: var(--red);
	cursor: default;
}

#tires-hero .th-tab:focus-visible {
	outline: 2px solid var(--red);
	outline-offset: -2px;
}

#tires-hero .th-panel {
	display: none;
	padding-top: 41px;
	padding-bottom: 36px;
}

#tires-hero .th-panel.is-active {
	display: block;
}

#tires-hero .th-heading {
	margin: 0;
	font-size: clamp(24px, 2.43vw, 31.111px);
	line-height: 30px;
}

/* --- fields: forms.css tokens ------------------------------------ */

#tires-hero .th-form {
	--form-width: 100%;
	--form-font-size: 16px;
	/* 3 fields x (240 content + 2x15 padding) = 810 inside an 835 card, with the
	   row insets below putting the first at x=32 and the last edge at x=812. */
	--form-field-padding: 0 15px;
	--form-input-height: 55.556px;
	--form-input-radius: 5.556px;
	--form-input-font-size: 18px;
	--form-input-text-indent: 15px;
	--form-input-padding-top: 0;
	--form-input-color: var(--input-text);
	--form-placeholder-color: var(--input-text);
	--form-label-offset-x: 15px;
	--form-label-font-size: 18px;
	--form-label-margin-top: 0;
	/* The label is the in-field placeholder here, not a floating one — it is
	   hidden outright on .has-value, so the "active" tokens match the resting
	   ones and nothing shifts on focus. */
	--form-label-active-font-size: 18px;
	--form-label-active-margin-top: 0;
	--form-select-arrow-width: 10px;
	--form-select-arrow-height: 5px;
	--form-select-arrow-right: 15px;
	--form-select-arrow-image: url(../images/tires/26/select-arrow.svg);
	/* forms.css re-declares these below 567px with its own defaults — the form
	   would shrink to calc(100% - 25px) and the inputs jump to a 13px radius.
	   Pin every mobile twin to the value measured off the 390 frame. */
	--form-width-mobile: 100%;
	--form-field-padding-mobile: 0 5px;
	--form-input-radius-mobile: 5.556px;
	--form-input-font-size-mobile: 16px;
	--form-label-font-size-mobile: 16px;
}

#tires-hero .form-row {
	justify-content: center;
	margin-top: 24.44px;
	padding: 0 8px 0 17px;
}

#tires-hero .form-field {
	margin-bottom: 0;
}

#tires-hero .form-field:only-child {
	/* Brand + zipcode panels: a single 390px control, centred (1503:6248). */
	flex: 0 0 auto;
	width: 420px;
	max-width: 100%;
}

#tires-hero .field-caption {
	margin-bottom: 3.67px;
	font-size: 14.444px;
	line-height: 17.778px;
	color: var(--label);
}

#tires-hero .form-field select,
#tires-hero .form-field input:not([type="file"]) {
	border: 1.111px solid var(--input-border);
}

#tires-hero .form-field label {
	color: var(--input-text);
}

#tires-hero .form-field label .f-red {
	color: var(--star);
}

#tires-hero .form-field .focused label {
	color: var(--input-text);
}

#tires-hero .form-field .has-value label {
	opacity: 0;
}

#tires-hero .form-field .focused select,
#tires-hero .form-field .focused input {
	border-color: var(--input-text);
	border-width: 1.111px;
}

#tires-hero .form-field .validation-error select,
#tires-hero .form-field .validation-error input {
	border-width: 1.111px;
}

/* --- submit ------------------------------------------------------ */

#tires-hero .form-action {
	margin-top: 27.55px;
}

#tires-hero .th-submit {
	width: auto;
	min-width: 110px;
	height: 40px;
	padding: 0 15px;
	border-radius: 40px;
	font-size: 17px;
	line-height: 24px;
	cursor: pointer;
	transition: opacity 0.2s;
}

#tires-hero .th-submit:hover {
	opacity: 0.85;
}

/* --- upload panel: the form *is* the dashed frame (1503:6261) ------ */

#tires-hero .th-panel[data-th-panel="upload"] {
	padding-top: 37px;
	padding-bottom: 23px;
}

#tires-hero #form-tires-upload form.uni-style {
	width: 720px;
	max-width: calc(100% - 40px);
	height: 216px;
	margin: 0 auto;
	border: 1px dashed var(--red);
	border-radius: 10px;
	background-color: #fff;
}

#tires-hero #form-tires-upload .form-row {
	margin-top: 0;
	padding: 0;
}

#tires-hero .field-file .field-wrapper {
	cursor: pointer;
}

#tires-hero .th-drop-icon {
	width: 35.534px;
	height: 35.534px;
	margin: -14px auto 0;
}

#tires-hero #form-tires-upload .th-heading {
	margin-top: 20.47px;
	cursor: pointer;
}

#tires-hero .th-drop-text {
	margin-top: 9px;
	font-size: 16px;
	line-height: 26px;
}

#tires-hero .field-file .file-name-text {
	margin-top: 4px;
	font-size: 14px;
	line-height: 18px;
	color: var(--label);
}

#tires-hero #form-tires-upload .form-action {
	margin-top: 12px;
}

/* --- tyre stack --------------------------------------------------- */

#tires-hero .th-tires {
	position: absolute;
	display: block;
	z-index: 3;
	top: 270px;
	left: 50%;
	/* 391px wide, 366px right of centre — 1326px in the 1920 frame, where it
	   clears the card's right edge by 51.5px. Both stay fixed so the stack keeps
	   its designed size and its relationship to the card at every width; below
	   ~1510px it simply bleeds past the right edge and the section clips it.
	   (It used to shrink to fit, which left a 204px stack at 1140.) */
	width: 391px;
	margin-left: 366px;
}

#tires-hero .th-tires img {
	width: 100%;
	height: auto;
}

/* ------------------------------------------------------------------ *
 * ridesafe-banner — 1279x230 photo panel
 * ------------------------------------------------------------------ */

#tires-ridesafe {
	margin-top: 26px;
	margin-bottom: 44px;
}

#tires-ridesafe .trs-banner {
	height: 230px;
	border-radius: 5px;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-image: url(../images/tires/26/ridesafe-back.jpg);
	background-image: image-set(url("../images/tires/26/ridesafe-back.webp") 1x, url("../images/tires/26/ridesafe-back@2x.webp") 2x);
	background-image: -webkit-image-set(url("../images/tires/26/ridesafe-back.webp") 1x, url("../images/tires/26/ridesafe-back@2x.webp") 2x);
}

#tires-ridesafe .trs-banner:before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--wash);
	opacity: 0.7;
	mix-blend-mode: multiply;
}

#tires-ridesafe .trs-logo,
#tires-ridesafe .trs-text,
#tires-ridesafe .trs-more {
	position: relative;
	z-index: 1;
}

#tires-ridesafe .trs-logo {
	width: 283px;
	max-width: 80%;
	height: auto;
	padding-top: 40px;
}

#tires-ridesafe .trs-text {
	width: 435px;
	max-width: 100%;
	margin: 0 auto;
	padding-top: 14px;
	font-size: 22px;
	line-height: 30px;
}

#tires-ridesafe .trs-more {
	width: max-content;
	column-gap: 7px;
	margin-top: 15px;
	font-size: 16px;
	line-height: 17px;
}

#tires-ridesafe .trs-more img {
	width: 17px;
	height: 12px;
	/* Figma draws the shared tires-arrow rotated 180deg for the forward chevron. */
	transform: rotate(180deg);
}

#tires-ridesafe .trs-more:hover span {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * <= 1199 — no Figma frame; keep the measured card, ease the display type
 * ------------------------------------------------------------------ */

@media screen and (max-width: 1199px) {
	#tires-ridesafe .trs-banner {
		height: auto;
		padding-bottom: 30px;
	}

	#tires-ridesafe .trs-logo {
		padding-top: 34px;
	}
}

/* ------------------------------------------------------------------ *
 * <= 991
 * ------------------------------------------------------------------ */

@media screen and (max-width: 991px) {
	#tires-hero .th-form {
		--form-field-padding: 0 10px;
	}

	#tires-hero .form-row {
		padding: 0 12px;
	}

	#tires-hero .th-tab {
		font-size: 17px;
	}
}

/* ------------------------------------------------------------------ *
 * <= 767 — built to the 390 frame (1558:335)
 * ------------------------------------------------------------------ */

@media screen and (max-width: 767px) {
	#tires-hero-logos {
		height: 50px;
	}

	#tires-hero .th-photo {
		height: 335px;
	}

	#tires-hero .container {
		padding-top: 42px;
		/* The tyre stack overlaps the card, so the hero keeps its 654px frame
		   height by reserving the part of the image that hangs below it. */
		padding-bottom: 121px;
	}

	#tires-hero h1.th-title {
		width: 349px;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		line-height: 1.177;
	}

	#tires-hero .th-sub {
		width: 350px;
		margin-top: 0.63px;
		line-height: 1.111;
	}

	#tires-hero .th-card {
		width: 350px;
		margin-top: 41px;
		border-radius: 10px;
	}

	#tires-hero .th-tab {
		padding: 0 2px;
		font-size: 13px;
		line-height: 13px;
		/* 1558:2970-2975 carry a left border only — no bottom rule under the
		   inactive cells, they just meet the panel. */
		border-right: 0;
		border-bottom: 0;
		border-left: 1px solid var(--card-border);
	}

	/* Coincides with the card border, so it would read as a double line. */
	#tires-hero .th-tab:first-child {
		border-left: 0;
	}

	#tires-hero .th-tab:nth-child(1) {
		flex-grow: 89;
	}

	#tires-hero .th-tab:nth-child(2),
	#tires-hero .th-tab:nth-child(3) {
		flex-grow: 87;
	}

	#tires-hero .th-tab:nth-child(4) {
		flex-grow: 86;
	}

	#tires-hero .th-tab-line {
		display: block;
	}

	#tires-hero .th-panel {
		padding-top: 27px;
		padding-bottom: 34px;
	}

	#tires-hero .th-heading {
		font-family: "AvenirNextW05-Heavy", sans-serif;
	}

	/* Year | Make on one row, Model full width beneath (1558:2954 / 1558:2960):
	   two 160px controls with a 10px gutter inside a 350px card. */
	#tires-hero .th-form {
		--form-field-padding: 0 5px;
		--form-input-height: 55px;
		--form-input-font-size: 16px;
		--form-input-text-indent: 12px;
		--form-label-offset-x: 12px;
		--form-label-font-size: 16px;
		--form-label-active-font-size: 16px;
	}

	#tires-hero .form-row {
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 17px;
		padding: 0 5px;
		row-gap: 15.44px;
	}

	#tires-hero .form-field {
		flex: 1 1 50%;
		padding-top: 0;
		padding-bottom: 0;
	}

	#tires-hero .form-field:nth-child(3) {
		flex-basis: 100%;
	}

	#tires-hero .form-field:only-child {
		width: 100%;
	}

	#tires-hero .field-caption {
		margin-bottom: 1.78px;
		font-size: 13px;
		color: #000;
	}

	#tires-hero .form-action {
		margin-top: 24.44px;
	}

	#tires-hero .th-panel[data-th-panel="upload"] {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	#tires-hero #form-tires-upload form.uni-style {
		width: auto;
		height: auto;
		max-width: none;
		margin: 0 10px;
		padding-bottom: 24px;
	}

	#tires-hero .th-drop-text {
		font-size: 14px;
		line-height: 22px;
	}

	#tires-hero .th-drop-text br {
		display: none;
	}

	#tires-hero .th-tires {
		top: auto;
		bottom: 0;
		left: auto;
		right: -12.56%;
		width: 56.92%;
		margin-left: 0;
	}

	#tires-ridesafe {
		margin-top: 28px;
		margin-bottom: 34px;
	}

	#tires-ridesafe .trs-banner {
		padding-bottom: 34px;
	}

	#tires-ridesafe .trs-logo {
		width: 278px;
		padding-top: 55px;
	}

	#tires-ridesafe .trs-text {
		width: 288px;
		padding-top: 21px;
		font-size: 20px;
		line-height: 26px;
	}

	#tires-ridesafe .trs-more {
		column-gap: 9.7px;
		margin-top: 22px;
		font-size: 18px;
		line-height: 19px;
	}

	#tires-ridesafe .trs-more img {
		width: 13px;
		height: 9px;
	}
}

/* ------------------------------------------------------------------ *
 * <= 389 — below the mobile frame; only guard against overflow
 * ------------------------------------------------------------------ */

@media screen and (max-width: 389px) {
	#tires-hero .th-card,
	#tires-hero h1.th-title,
	#tires-hero .th-sub {
		width: 100%;
	}
}