/* ==========================================================================
   Jetour — shared components: buttons, forms, accordion, tabs, carousel,
   news card, car card, counters, badges, pagination, notices.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons — one component, six variants, three sizes.

   Anatomy:  <a class="jt-btn jt-btn--ghost jt-btn--lg">  or  <button class="jt-btn">
   Variants: (default = solid teal) · --ghost · --dark · --light · --outline-light · --link
   Sizes:    --sm · (default) · --lg      Layout: --block (full width) · --icon (square)
   Every variant is driven by four custom properties, so a new one only has to set those:
     --btn-bg, --btn-fg, --btn-bd  and the matching --btn-bg-h, --btn-fg-h, --btn-bd-h for hover.
   The hover is a wipe: a pseudo-element scales up from the bottom under the label, which reads
   as motion rather than a colour flip, and the label lifts by a hair. Everything uses the same
   easing so buttons feel like one family.
   -------------------------------------------------------------------------- */
.jt-btn {
	--btn-bg: var(--jt-teal);
	--btn-fg: #fff;
	--btn-bd: var(--jt-teal);
	--btn-bg-h: var(--jt-teal-hover);
	--btn-fg-h: #fff;
	--btn-bd-h: var(--jt-teal-hover);
	--btn-pad-y: 17px;
	--btn-pad-x: 26px;
	--btn-fs: 14px;

	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: var(--btn-pad-y) var(--btn-pad-x);
	background: var(--btn-bg);
	color: var(--btn-fg);
	border: 1px solid var(--btn-bd);
	border-radius: var(--jt-radius);
	font-family: var(--jt-font-sans);
	font-size: var(--btn-fs);
	font-weight: 500;
	line-height: 1;
	letter-spacing: .01em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
	transition:
		color .45s var(--jt-ease),
		border-color .45s var(--jt-ease),
		background-color .45s var(--jt-ease),
		transform .45s var(--jt-ease-out),
		box-shadow .45s var(--jt-ease);
}
/* the wipe */
.jt-btn::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	background: var(--btn-bg-h);
	transform: scaleY(0);
	transform-origin: bottom center;
	transition: transform .5s var(--jt-ease-out);
}
.jt-btn > * { position: relative; z-index: 1; }
.jt-btn:hover, .jt-btn:focus-visible {
	color: var(--btn-fg-h);
	border-color: var(--btn-bd-h);
	transform: translateY(-2px);
}
.jt-btn:hover::before, .jt-btn:focus-visible::before { transform: scaleY(1); }
.jt-btn:active { transform: translateY(0); transition-duration: .08s; }
.jt-btn[disabled], .jt-btn[aria-disabled="true"], .jt-btn.is-loading { opacity: .5; pointer-events: none; }
.jt-btn .jt-icon { flex: 0 0 auto; transition: transform .45s var(--jt-ease-out); }
.jt-btn:hover .jt-icon { transform: translateX(3px); }

/* variants */
.jt-btn--ghost {
	--btn-bg: transparent; --btn-fg: var(--jt-ink); --btn-bd: var(--jt-line);
	--btn-bg-h: var(--jt-ink); --btn-fg-h: #fff; --btn-bd-h: var(--jt-ink);
}
.jt-btn--dark {
	--btn-bg: var(--jt-ink); --btn-fg: #fff; --btn-bd: var(--jt-ink);
	--btn-bg-h: var(--jt-teal); --btn-fg-h: #fff; --btn-bd-h: var(--jt-teal);
}
.jt-btn--light {
	--btn-bg: #fff; --btn-fg: var(--jt-ink); --btn-bd: #fff;
	--btn-bg-h: var(--jt-teal); --btn-fg-h: #fff; --btn-bd-h: var(--jt-teal);
}
/* on photography / dark bands */
.jt-btn--outline-light {
	--btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .55);
	--btn-bg-h: #fff; --btn-fg-h: var(--jt-ink); --btn-bd-h: #fff;
}
.jt-btn--link {
	--btn-bg: transparent; --btn-fg: var(--jt-teal-ink); --btn-bd: transparent;
	--btn-bg-h: transparent; --btn-fg-h: var(--jt-teal-hover); --btn-bd-h: transparent;
	--btn-pad-x: 0; --btn-pad-y: 4px;
	overflow: visible;
}
.jt-btn--link::before { display: none; }
.jt-btn--link::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .45s var(--jt-ease-out);
}
.jt-btn--link:hover, .jt-btn--link:focus-visible { transform: none; }
.jt-btn--link:hover::after, .jt-btn--link:focus-visible::after { transform: scaleX(1); }

/* sizes & layout */
.jt-btn--sm { --btn-pad-y: 12px; --btn-pad-x: 18px; --btn-fs: 13px; }
.jt-btn--lg { --btn-pad-y: 21px; --btn-pad-x: 34px; --btn-fs: 15px; }
.jt-btn--block { display: flex; width: 100%; }
.jt-btn--icon { --btn-pad-x: var(--btn-pad-y); aspect-ratio: 1; }

/* A button that also reveals on scroll needs both transition sets (the shorthand above would
   otherwise replace the [data-reveal] one, and the button would pop in). */
.jt-btn[data-reveal] {
	transition-property: opacity, transform, color, border-color, background-color;
	transition-duration: var(--jt-reveal-dur), var(--jt-reveal-dur), .45s, .45s, .45s;
	transition-timing-function: var(--jt-ease-out);
}

/* --------------------------------------------------------------------------
   Arrows — one circular control used by every carousel and slider on the site.
   Frosted glass over whatever sits behind it, a hairline ring and a thin chevron.
   `--arrow-ink` flips the whole thing for light-on-dark placements.
   -------------------------------------------------------------------------- */
.jt-arrow {
	--arrow-size: 46px;
	--arrow-ink: var(--jt-ink);
	--arrow-surface: rgba(255, 255, 255, .55);
	--arrow-ring: rgba(0, 0, 0, .10);

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--arrow-size);
	height: var(--arrow-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--arrow-surface);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	backdrop-filter: blur(14px) saturate(150%);
	box-shadow: inset 0 0 0 1px var(--arrow-ring);
	color: var(--arrow-ink);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition:
		background-color .45s var(--jt-ease),
		color .45s var(--jt-ease),
		box-shadow .45s var(--jt-ease),
		transform .45s var(--jt-ease-out),
		opacity .3s var(--jt-ease);
}
.jt-arrow svg {
	width: 40%;
	height: 40%;
	stroke-width: 1.25;           /* thin chevron */
	transition: transform .45s var(--jt-ease-out);
}
.jt-arrow:hover, .jt-arrow:focus-visible {
	background: var(--arrow-ink);
	color: var(--arrow-surface-ink, #fff);
	box-shadow: inset 0 0 0 1px transparent;
	transform: scale(1.06);
}
.jt-arrow:active { transform: scale(.97); transition-duration: .08s; }
.jt-arrow[disabled] { opacity: .3; pointer-events: none; }
/* direction cue on hover */
:is(.jt-arrow--prev, .jt-arrow[data-jt-prev], .jt-arrow[data-carousel-prev], .jt-arrow[data-jt-showcase-prev], .jt-arrow[data-jto-car-prev]):hover svg { transform: translateX(-2px); }
:is(.jt-arrow--next, .jt-arrow[data-jt-next], .jt-arrow[data-carousel-next], .jt-arrow[data-jt-showcase-next], .jt-arrow[data-jto-car-next]):hover svg { transform: translateX(2px); }
/* on photography / dark bands */
.jt-arrow--light {
	--arrow-ink: #fff;
	--arrow-surface: rgba(255, 255, 255, .14);
	--arrow-ring: rgba(255, 255, 255, .32);
	--arrow-surface-ink: var(--jt-ink);
}
.jt-arrow--sm { --arrow-size: 38px; }
.jt-arrow--lg { --arrow-size: 56px; }
.jt-arrows { display: inline-flex; gap: 10px; }
@media (max-width: 767px) {
	.jt-arrow { --arrow-size: 40px; }
	.jt-arrow--lg { --arrow-size: 46px; }
}

/* --------------------------------------------------------------------------
   Forms (template-parts/forms/*)
   -------------------------------------------------------------------------- */
.jt-form { position: relative; }
.jt-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.jt-form__grid > .jt-field--full, .jt-form__grid > .jt-field--textarea, .jt-form__grid > .jt-field--checkbox, .jt-form__grid > .jt-form__actions, .jt-form__grid > .jt-form__group { grid-column: 1 / -1; }
.jt-form__title { font-family: var(--jt-font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(22px, 2.6vw, 32px); margin: 0 0 8px; }
.jt-form__title-accent { color: var(--jt-teal); }
.jt-form__text { margin: 0 0 20px; color: var(--jt-soft); font-size: 14px; }
.jt-form__group { margin-top: 8px; }
.jt-form__group-title { font-family: var(--jt-font-caps); font-weight: 500; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 12px; color: var(--jt-ink); }
.jt-form__actions { margin-top: 12px; }
.jt-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.jt-field { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.jt-field__label { font-size: 13px; font-weight: 500; color: var(--jt-soft); }
.jt-field__req { color: var(--jt-teal); margin-left: 3px; }
.jt-input {
	width: 100%;
	padding: 12px 0;
	background: transparent;
	border: 0; border-bottom: 1px solid var(--jt-line);
	border-radius: 0;
	font-size: 15px; line-height: 1.4; color: var(--jt-ink);
	transition: border-color var(--jt-dur) var(--jt-ease);
	-webkit-appearance: none; appearance: none;
}
.jt-input::placeholder { color: var(--jt-mute); opacity: 1; }
.jt-input:hover { border-bottom-color: var(--jt-soft); }
.jt-input:focus { outline: none; border-bottom-color: var(--jt-teal); }
.jt-input--textarea { resize: vertical; min-height: 96px; }
.jt-input--select { padding-right: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") right 4px center / 16px no-repeat; }
.jt-input-wrap { position: relative; display: flex; align-items: center; }
.jt-input-wrap .jt-input { flex: 1; }
.jt-input__icon { position: absolute; right: 4px; color: var(--jt-mute); pointer-events: none; }
.jt-input--date::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; position: absolute; right: 0; width: 32px; height: 100%; }

/* --------------------------------------------------------------------------
   Phone country selector — circular flag + dial code, sharing the input's
   underline so the two read as one field. Flags are vendored SVGs drawn as a
   background image, which keeps the markup free of 36 inline sprites.
   -------------------------------------------------------------------------- */
.jt-cc { position: relative; flex: 0 0 auto; }
.jt-cc__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 100%;
	padding: 12px 10px 12px 0;
	border: 0;
	border-bottom: 1px solid var(--jt-line);
	background: none;
	font: inherit;
	color: var(--jt-ink);
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color var(--jt-dur) var(--jt-ease), color var(--jt-dur) var(--jt-ease);
}
.jt-input-wrap--tel:focus-within .jt-cc__btn { border-bottom-color: var(--jt-teal); }
.jt-cc__flag {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--flag, none) center / cover no-repeat, var(--jt-hair);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
	flex: 0 0 auto;
}
.jt-cc__dial { font-variant-numeric: tabular-nums; }
.jt-cc__chev { display: inline-flex; color: var(--jt-muted); transition: transform var(--jt-dur) var(--jt-ease); }
.jt-cc__btn[aria-expanded="true"] .jt-cc__chev { transform: rotate(180deg); }

.jt-cc__menu {
	position: absolute;
	z-index: 30;
	top: calc(100% + 8px);
	left: 0;
	width: 268px;
	max-height: 272px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 6px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 18px 44px rgba(0, 0, 0, .16);
	/* the menu grows out of the button rather than appearing */
	transform-origin: top left;
	opacity: 0;
	transform: translateY(-6px) scale(.97);
	transition: opacity .28s var(--jt-ease-out), transform .28s var(--jt-ease-out);
}
.jt-cc__menu[hidden] { display: none; }
.jt-cc.is-open .jt-cc__menu { opacity: 1; transform: translateY(0) scale(1); }
.jt-cc__opt {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 10px;
	border: 0;
	border-radius: 9px;
	background: none;
	font: inherit;
	font-size: 14px;
	color: var(--jt-ink);
	text-align: left;
	cursor: pointer;
	transition: background-color .25s var(--jt-ease), color .25s var(--jt-ease);
}
.jt-cc__opt:hover, .jt-cc__opt:focus-visible { background: var(--jt-bg-soft); }
.jt-cc__opt.is-active { background: var(--jt-bg-soft); font-weight: 600; }
.jt-cc__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jt-cc__opt .jt-cc__dial { color: var(--jt-muted); font-size: 13px; }

/* Dark form cards (the contact hero card) invert the control, not the menu. */
.jt-form--dark .jt-cc__btn { color: #fff; border-bottom-color: rgba(255, 255, 255, .28); }
.jt-form--dark .jt-cc__chev { color: rgba(255, 255, 255, .6); }

@media (prefers-reduced-motion: reduce) {
	.jt-cc__menu { transition: none; }
}
.jt-field.is-invalid .jt-input, .jt-field.is-invalid .jt-cc__btn { border-bottom-color: var(--jt-error); }
.jt-field__error { display: none; font-size: 12px; color: var(--jt-error); }
.jt-field.is-invalid .jt-field__error { display: block; }
.jt-field__help { margin: 0; font-size: 12px; color: var(--jt-mute); }

.jt-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13px; line-height: 1.5; color: var(--jt-soft); }
.jt-check__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jt-check__box { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--jt-line); background: #fff; color: #fff; transition: background-color var(--jt-dur) var(--jt-ease), border-color var(--jt-dur) var(--jt-ease); }
.jt-check__input:checked + .jt-check__box { background: var(--jt-teal); border-color: var(--jt-teal); }
.jt-check__input:focus-visible + .jt-check__box { box-shadow: var(--jt-focus-ring); }
.jt-check__text a { color: var(--jt-teal-ink); text-decoration: underline; text-underline-offset: 2px; }
.jt-field.is-invalid .jt-check__box { border-color: var(--jt-error); }

/* Choice cards (car / trim / colour pickers) */
.jt-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.jt-choice { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px 12px; border: 1px solid var(--jt-hair); background: #fff; cursor: pointer; text-align: center; transition: border-color var(--jt-dur) var(--jt-ease), box-shadow var(--jt-dur) var(--jt-ease); }
.jt-choice:hover { border-color: var(--jt-line); }
.jt-choice__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jt-choice__img { width: 100%; height: 64px; object-fit: contain; }
.jt-choice__swatch { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--jt-hair); }
.jt-choice__label { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--jt-ink); }
.jt-choice__sub { font-size: 11px; color: var(--jt-mute); }
/* two rules on purpose: a selector list with an unsupported :has() is dropped as a whole, and .is-checked is the fallback the page scripts set for exactly those browsers */
.jt-choice:has(.jt-choice__input:checked) { border-color: var(--jt-teal); box-shadow: 0 0 0 1px var(--jt-teal) inset; }
.jt-choice.is-checked { border-color: var(--jt-teal); box-shadow: 0 0 0 1px var(--jt-teal) inset; }
.jt-choice:has(.jt-choice__input:focus-visible) { box-shadow: var(--jt-focus-ring); }
.jt-choices--chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jt-choices--chips .jt-choice { flex-direction: row; padding: 10px 14px; gap: 8px; }
.jt-choices.is-loading { opacity: .5; pointer-events: none; }
.jt-choices__empty { font-size: 13px; color: var(--jt-mute); }

/* Response messages */
.jt-form__msg { display: none; margin: 16px 0 0; padding: 14px 16px; font-size: 14px; border-left: 3px solid var(--jt-teal); background: var(--jt-teal-tint); color: var(--jt-ink); }
.jt-form__msg.is-visible { display: block; }
.jt-form__msg--error { border-left-color: var(--jt-error); background: #FDF1F0; }
.jt-form.is-sending .jt-form__submit { opacity: .6; pointer-events: none; }
.jt-form.is-sent .jt-form__body { display: none; }

@media (max-width: 767px) {
	.jt-form__grid { grid-template-columns: 1fr; }
	.jt-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Accordion
   -------------------------------------------------------------------------- */
.jt-acc { border-top: 1px solid var(--jt-line); }
.jt-acc__item { border-bottom: 1px solid var(--jt-line); background: #fff; }
.jt-acc__heading { margin: 0; font-size: inherit; }
.jt-acc__trigger { display: flex; width: 100%; align-items: center; gap: 16px; padding: 20px 16px; text-align: left; font-family: var(--jt-font-caps); font-weight: 500; font-size: 18px; color: var(--jt-ink); transition: color var(--jt-dur) var(--jt-ease); }
.jt-acc__trigger:hover { color: var(--jt-teal-ink); }
.jt-acc__icon { order: -1; flex: 0 0 20px; display: inline-flex; color: var(--jt-ink); transition: transform .35s var(--jt-ease); }
.jt-acc__item.is-open .jt-acc__icon { transform: rotate(45deg); }
.jt-acc__title { flex: 1; }
.jt-acc__panel { overflow: hidden; }
.jt-acc__panel[hidden] { display: none; }
.jt-acc__body { padding: 0 16px 24px 52px; font-size: 16px; color: #393939; }
@media (max-width: 767px) {
	.jt-acc__trigger { padding: 16px 12px; font-size: 16px; }
	.jt-acc__body { padding: 0 12px 20px 44px; }
}

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */
.jt-tabs { position: relative; display: flex; gap: 28px; border-bottom: 1px solid var(--jt-line); margin-bottom: 24px; }
.jt-tab { padding: 12px 0; font-size: 15px; font-weight: 600; color: var(--jt-mute); background: none; border: 0; transition: color var(--jt-dur) var(--jt-ease); }
.jt-tab:hover, .jt-tab.is-active { color: var(--jt-ink); }
.jt-tabs__ink { position: absolute; bottom: -1px; left: 0; height: 2px; width: 0; background: var(--jt-teal); transition: left .35s var(--jt-ease), width .35s var(--jt-ease); }
.jt-tabs.jc-no-ink .jt-tabs__ink { transition: none; }
.jt-tab-panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Carousel (app.js: [data-jt-carousel], scroll-snap track, arrows, dots, drag, autoplay)
   -------------------------------------------------------------------------- */
.jt-carousel { position: relative; }
.jt-carousel__track {
	display: flex;
	gap: var(--jt-carousel-gap, 20px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 2px;
	cursor: grab;
}
.jt-carousel__track::-webkit-scrollbar { display: none; }
.jt-carousel__track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.jt-carousel__item { flex: 0 0 var(--jt-carousel-item, 33.333%); scroll-snap-align: start; min-width: 0; }
.jt-carousel--peek .jt-carousel__item { flex-basis: calc(var(--jt-carousel-item, 33.333%) - var(--jt-carousel-gap, 20px)); }
.jt-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.jt-carousel__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--jt-line); transition: background-color var(--jt-dur) var(--jt-ease), transform var(--jt-dur) var(--jt-ease); }
.jt-carousel__dot.is-active { background: var(--jt-teal); transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) { .jt-carousel__track { scroll-behavior: auto; } }

/* --------------------------------------------------------------------------
   News card
   -------------------------------------------------------------------------- */
.jt-news-card { display: flex; flex-direction: column; color: var(--jt-ink); background: #fff; height: 100%; }
.jt-news-card__media { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--jt-bg-muted); }
.jt-news-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--jt-ease); }
.jt-news-card:hover .jt-news-card__img { transform: scale(1.1); }
.jt-news-card__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 0 0; }
.jt-news-card__title { font-family: var(--jt-font-sans); font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--jt-ink); transition: color var(--jt-dur) var(--jt-ease); }
.jt-news-card:hover .jt-news-card__title { color: var(--jt-ink); }
.jt-news-card__date { font-size: 13px; font-weight: 500; color: var(--jt-soft); transition: color var(--jt-dur) var(--jt-ease); }
.jt-news-card:hover .jt-news-card__date { color: var(--jt-teal); }
@media (prefers-reduced-motion: reduce) {
	.jt-news-card__img { transition: none; }
	.jt-news-card:hover .jt-news-card__img { transform: none; }
}

/* --------------------------------------------------------------------------
   Car card (models grid, 404): photo, logo, rolling in on hover
   -------------------------------------------------------------------------- */
.jt-car-card { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 16px; padding: 40px 24px 28px; background: #fff; color: var(--jt-ink); border: 1px solid var(--jt-hair); transition: box-shadow var(--jt-dur) var(--jt-ease), transform var(--jt-dur) var(--jt-ease); }
.jt-car-card:hover { box-shadow: var(--jt-shadow); transform: translateY(-4px); color: var(--jt-ink); }
.jt-car-card__media { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 190px; }
.jt-car-card__photo { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; transition: transform .45s var(--jt-ease); }
.jt-car-card:hover .jt-car-card__photo { transform: translateX(-4%); }
.jt-car-card__logo { position: absolute; right: 8%; bottom: 0; height: 22px; width: auto; opacity: 0; transform: translateX(-20px); transition: opacity .35s var(--jt-ease), transform .45s var(--jt-ease); filter: brightness(0); /* library logos are any colour — black on the white card, as in the header mega menu */ }
.jt-car-card:hover .jt-car-card__logo { opacity: 1; transform: none; }
.jt-car-card:focus-visible .jt-car-card__logo { opacity: 1; transform: none; }   /* keyboard users get the hover reveal */
.jt-car-card:focus-visible .jt-car-card__photo { transform: translateX(-4%); }
@media (hover: none) { .jt-car-card__logo { opacity: 1; transform: none; } }       /* touch screens never hover: the logo is always shown */
@media (prefers-reduced-motion: reduce) {
	.jt-car-card, .jt-car-card__photo, .jt-car-card__logo { transition: none; }
	.jt-car-card:hover, .jt-car-card:hover .jt-car-card__photo, .jt-car-card:focus-visible .jt-car-card__photo { transform: none; }
}
.jt-car-card__title { font-family: var(--jt-font-display); font-weight: 900; font-size: 22px; text-transform: uppercase; text-align: center; margin: 0; }
@media (max-width: 767px) {
	.jt-car-card { padding: 24px 16px 20px; }
	.jt-car-card__media { height: 140px; }
	.jt-car-card__title { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   Small things
   -------------------------------------------------------------------------- */
.jt-badge { display: inline-block; padding: 6px 12px; font-family: var(--jt-font-accent-sc); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; background: var(--jt-ink); color: #fff; }
.jt-badge--teal { background: var(--jt-teal); }
.jt-count { font-family: var(--jt-font-accent); font-variant-numeric: tabular-nums; }
.jt-pagination { display: flex; justify-content: center; margin-top: 40px; }
.jt-pagination .nav-links { display: flex; gap: 6px; }
.jt-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--jt-line); color: var(--jt-ink); font-weight: 600; }
.jt-pagination .page-numbers.current, .jt-pagination .page-numbers:hover { background: var(--jt-teal); border-color: var(--jt-teal); color: #fff; }
.jt-notice { padding: 14px 16px; border-left: 3px solid var(--jt-teal); background: var(--jt-teal-tint); }
.jt-notice--error { border-left-color: var(--jt-error); background: #FDF1F0; }

/* Read-more block (SEO text with a toggle) */
.jt-readmore { position: relative; }
.jt-readmore__body { position: relative; overflow: hidden; max-height: var(--jt-readmore-h, 9.5em); } /* no transition: max-height cannot animate to "none" */
.jt-readmore__body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--jt-readmore-bg, #fff)); transition: opacity .3s; }
.jt-readmore.is-open .jt-readmore__body { max-height: none; }
.jt-readmore.is-open .jt-readmore__body::after { opacity: 0; }
.jt-readmore__toggle { display: inline-block; margin-top: 12px; font-weight: 600; color: var(--jt-teal-ink); background: none; border: 0; }
.jt-readmore__toggle:hover { color: var(--jt-teal-hover); }
/* No JS: the whole text stays reachable (the no-js marker is swapped in <head>, so this never flashes with JS on) */
.no-js .jt-readmore__body { max-height: none; }
.no-js .jt-readmore__body::after, .no-js .jt-readmore__toggle { display: none; }