/* Carry-on sections of carry-on-sections.php (02/11/2026): the site's values only (near-black
   #151515, muted #5f6368, line #e3e5e8, the hero's cobalt #1e3fd8, theme radius). Airline logos
   (owner, 02/11/2026) in one color only, recolored inside the SVG files: #111 on white, white on
   the black band; never their brand colors. One base height (--co-h) for all four, with a small
   optical factor (--co-s) so the wordmarks read the same size: Southwest and Sun Country are one
   long line, Frontier and Allegiant stack a second line or a sun above their name. */
.co-logo--southwest { --co-s: .85; }
.co-logo--frontier { --co-s: 1.1; }
.co-logo--allegiant { --co-s: 1.3; }
.co-logo--sun-country { --co-s: .9; }

/* ---------- Scrolling band: full bleed, black, never wider than the page ---------- */
.cob {
	position: relative;
	overflow: hidden;
	max-inline-size: 100%;
	margin: 0;
	padding-block: 0;
	background: #151515;
	color: #fff;
}
/* Inside a bordered main (product pages) the band leaves the container to reach both edges; the
   body clips the overflow on the x axis only (clip keeps sticky headers working). */
.site-main:not(.site-main--page) .cob {
	inline-size: 100vw;
	max-inline-size: 100vw;
	margin-inline: calc(50% - 50vw);
}
body:has(.cob) { overflow-x: clip; }
.cob__track {
	display: flex;
	inline-size: max-content;
	animation: cob-scroll 40s linear infinite;
}
.cob:hover .cob__track { animation-play-state: paused; }
.cob__list {
	display: flex;
	flex: none;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cob__item {
	display: inline-flex;
	align-items: center;
	gap: 22px;
	padding-inline-end: 22px;
	min-block-size: 52px;
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
}
.cob__sep { inline-size: 7px; block-size: 7px; flex: none; }
.cob { --co-h: 20px; }
.cob .co-logo { display: block; flex: none; inline-size: auto; block-size: calc(var(--co-h) * var(--co-s, 1)); max-inline-size: none; }
.cob .screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
@keyframes cob-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (min-width: 750px) {
	.cob__item { min-block-size: 58px; font-size: 21px; gap: 30px; padding-inline-end: 30px; }
	.cob__sep { inline-size: 8px; block-size: 8px; }
	.cob { --co-h: 25px; }
}
/* Reduced motion: one static line, the copies gone. */
@media (prefers-reduced-motion: reduce) {
	.cob__track { animation: none; inline-size: 100%; }
	.cob__list--copy { display: none; }
	.cob__list { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; padding: 8px var(--m-gutter, 16px); }
	.cob__item { min-block-size: 36px; }
	.cob__item:last-child { padding-inline-end: 0; }
	.cob__item:last-child .cob__sep { display: none; }
}

/* ---------- Airline tiles: a wall in type ---------- */
.ms.coa {
	background: #fff;
	color: #151515;
	padding-block: clamp(28px, 4vw, 56px) !important; /* product pages zero the section padding */
}
.coa p { margin: 0; }
.coa__head {
	max-inline-size: 46rem;
	margin: 0 auto clamp(22px, 3vw, 36px);
	text-align: center;
}
.coa .coa__eyebrow { margin: 0 0 0.4rem; color: #1e3fd8; }
.coa__title { margin: 0; font-size: clamp(26px, 3vw, 40px); line-height: 1.05; }
.coa__intro { margin-top: 14px !important; color: #5f6368; font-size: 15px; line-height: 1.5; }
.coa__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.coa__tile {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 18px;
	min-inline-size: 0;
	padding: 20px 14px 16px;
	background: #fff;
	border: 1px solid #e3e5e8;
	border-radius: var(--m-radius, 10px);
	transition: border-color .2s ease;
}
.coa__name {
	font-size: clamp(20px, 5.6vw, 26px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.5px;
	text-transform: uppercase;
	white-space: nowrap;
}
.coa__brand {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-inline-size: 0;
}
.coa__logo {
	--co-h: 24px;
	display: flex;
	align-items: flex-end;
	block-size: calc(var(--co-h) * 1.3);
}
.coa .co-logo {
	display: block;
	inline-size: auto;
	block-size: calc(var(--co-h) * var(--co-s, 1));
	max-inline-size: 100%;
	object-fit: contain;
	object-position: left center;
}
.coa__airline {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #5f6368;
}
.coa__limit {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 12px;
	border-top: 1px solid #e3e5e8;
}
.coa__label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #5f6368;
}
.coa__value {
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.coa__note {
	max-inline-size: 60rem;
	margin: clamp(18px, 2.4vw, 28px) auto 0 !important;
	color: #5f6368;
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}
.coa__buttons { justify-content: center; margin: 22px 0 0 !important; }
.coa .wp-block-button__link { text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
@media (min-width: 750px) {
	.coa__grid { gap: 16px; }
	.coa__tile { padding: 28px 24px 22px; }
	.coa__intro { font-size: 16px; }
	.coa__value { font-size: 17px; }
	.coa__logo { --co-h: 30px; }
}
@media (min-width: 900px) {
	.coa__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); }
	.coa__tile { padding: clamp(28px, 2.6vw, 40px) clamp(18px, 1.8vw, 28px) clamp(22px, 2vw, 28px); gap: clamp(28px, 3vw, 44px); }
	.coa__name { font-size: clamp(22px, 2.5vw, 38px); }
	.coa__logo { --co-h: clamp(26px, 2.2vw, 34px); }
}
@media (hover: hover) and (min-width: 900px) {
	.coa__tile:hover { border-color: #1e3fd8; }
}