/**
 * Catalog V4 — "All Tours" hub page styles.
 * Loaded only when ACF flag `use_v4_catalog` is true on the category term (archive.php fork).
 *
 * Reuses tour-v4.css tokens + shared components (.t4-foot, .t4-fr reviews carousel),
 * and home-v4.css components broadened to body.t4-catalog (.t4-hcta, .t4-hpartners,
 * .t4-hcontact/.t4-ccard, .t4-hhero__strip trust bar). Only NEW styles below: the
 * compact banner header, includes checklist, filter re-skin, and tour-card grid.
 */

/* ====================== BANNER HEADER — compact, not a full hero (this is a listing page) ====================== */
body.t4-catalog .t4-cbanner {
	position: relative;
	overflow: hidden;
	background: var(--t4-ink);
	color: #fff;
}
body.t4-catalog .t4-cbanner__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
body.t4-catalog .t4-cbanner__bg {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0.5;
	transform: scale(1.04);
}
body.t4-catalog .t4-cbanner__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12,12,12,0.45) 0%, rgba(12,12,12,0.72) 100%);
}
body.t4-catalog .t4-cbanner__inner {
	position: relative;
	z-index: 1;
	max-width: var(--t4-container);
	margin: 0 auto;
	padding: 140px var(--t4-gutter) 44px;
}
body.t4-catalog .t4-cbanner__crumb {
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	letter-spacing: 0.04em;
	color: rgba(255,255,255,0.6);
	margin-bottom: 16px;
}
body.t4-catalog .t4-cbanner__crumb-inner a { color: rgba(255,255,255,0.8); text-decoration: none; }
body.t4-catalog .t4-cbanner__crumb-inner a:hover { color: #fff; text-decoration: underline; }
body.t4-catalog .t4-cbanner__crumb-inner .breadcrumb_last { color: rgba(255,255,255,0.55); }
body.t4-catalog .t4-cbanner__title {
	font-family: var(--t4-sans);
	font-weight: 800; /* PJS: Bebas был одновесный */
	font-size: clamp(var(--t4-fs-h3), 3vw, var(--t4-fs-h1));
	line-height: 1.02;
	letter-spacing: -0.005em;
	margin: 0 0 14px;
	color: #fff;
	max-width: var(--t4-content);
}
body.t4-catalog .t4-cbanner__desc {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-body);
	line-height: 1.6;
	color: rgba(255,255,255,0.82);
	max-width: var(--t4-measure);
	margin: 0;
}
/* PREVIEW ONLY — blinking cursor while the H1 typing effect runs. Remove along with
   the <script> block in content-catalog-v4.php to revert. */
body.t4-catalog .t4-cbanner__title.t4-typing::after {
	content: '';
	display: inline-block;
	width: 3px;
	height: 0.85em;
	margin-left: 4px;
	background: var(--t4-red);
	vertical-align: -0.1em;
	animation: t4-typing-blink 800ms step-end infinite;
}
@keyframes t4-typing-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}
@media (max-width: 768px) {
	body.t4-catalog .t4-cbanner__inner { padding: 96px 16px 32px; }
	body.t4-catalog .t4-cbanner__title { font-size: clamp(30px, 8vw, 44px); }
}

/* ====================== INCLUDES CHECKLIST v2 (мокап юзера 2026-07-13) ======================
   Заголовок с красным последним словом → линия → моно-лейбл; белые пилюли с красными
   чек-кружками. На мобиле список превращается в белую карточку с разделителями.
   Селекторы без body-префикса — блок общий для каталога/категорий/booknow. */
.t4-cincl {
	background: var(--t4-bg-1);
	border-bottom: 1px solid var(--t4-line);
	padding: var(--t4-sec-sm) 0;
}
.t4-cincl__inner {
	max-width: var(--t4-container);
	margin: 0 auto;
	padding: 0 var(--t4-gutter);
}
.t4-cincl__head {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 20px;
}
.t4-cincl__h {
	font-family: var(--t4-sans);
	font-weight: 800; /* PJS: Bebas был одновесный */
	font-size: var(--t4-fs-h4);
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--t4-ink);
	margin: 0;
	white-space: nowrap;
}
.t4-cincl__h span { color: var(--t4-red); }
.t4-cincl__rule { flex: 1; height: 1px; background: var(--t4-line); }
.t4-cincl__side {
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--t4-muted);
	white-space: nowrap;
}
.t4-cincl__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
}
/* Чистый стиль по мокапам юзера 2026-07-14: белые пилюли без рамки, мягкая тень,
   розовый кружок с красной галкой; сноска серым в строке */
.t4-cincl__list li {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	border: 0;
	border-radius: 999px;
	padding: 9px 16px;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	font-weight: 600;
	color: var(--t4-ink);
	box-shadow: 0 1px 2px rgba(26,22,18,0.05), 0 2px 10px rgba(26,22,18,0.05);
}
.t4-cincl__chk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: rgba(255,40,0,0.1);
	color: var(--t4-red);
	flex-shrink: 0;
}
.t4-cincl__chk svg { width: 11px; height: 11px; }
.t4-cincl__note {
	font-style: normal;
	font-weight: 400;
	font-size: var(--t4-fs-small);
	color: var(--t4-muted);
	margin-left: 6px;
}
@media (max-width: 640px) {
	.t4-cincl { padding: 28px 0 32px; }
	.t4-cincl__head { flex-wrap: wrap; gap: 8px 12px; margin-bottom: 14px; }
	.t4-cincl__rule { display: none; }
	.t4-cincl__side { flex-basis: 100%; font-size: 12px; }
	/* Мобайл по мокапу 2026-07-14: стопка отдельных полноширинных пилюль (не карточка с разделителями) */
	.t4-cincl__list {
		display: flex;
		flex-direction: column;
		gap: 10px;
		background: none;
		border: 0;
		padding: 0;
	}
	.t4-cincl__list li {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 11px 16px;
	}
	/* сноска В СТРОКУ и мельче (юзер 2026-07-15): «FREE Pick-up/Drop-off * Only
	   within Dubai» укладывается в одну строку на 390px после укорачивания текста;
	   слишком длинные переводы просто переносятся сами. */
	.t4-cincl__txt { display: block; }
	.t4-cincl__note {
		display: inline;
		margin: 0 0 0 5px;
		font-size: 12px;
	}
}

/* ====================== FILTER + TOUR GRID WRAPPER ====================== */
body.t4-catalog .t4-cgrid {
	background: #fff;
	padding: var(--t4-sec-sm) 0 var(--t4-sec);
}
body.t4-catalog .t4-cgrid__inner {
	max-width: var(--t4-container);
	margin: 0 auto;
	padding: 0 var(--t4-gutter);
}
body.t4-catalog .t4-cgrid__head { margin-bottom: 32px; max-width: var(--t4-measure); }
body.t4-catalog .t4-cgrid__lede {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-body);
	line-height: 1.6;
	color: var(--t4-body);
	margin: 14px 0 0;
}

/* ---- Filter bar re-skin (same .selector/.mini-filter markup + JS, V4 tokens only) ---- */
body.t4-catalog .selector {
	margin-bottom: 32px;
}
body.t4-catalog .selector__title,
body.t4-catalog .selector__description { display: none; } /* shown in the banner header instead */
body.t4-catalog .selector__form-title {
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--t4-muted);
	margin-bottom: 10px;
}
body.t4-catalog .selector__form {
	display: flex;
	flex-wrap: wrap;
	/* flex-end, not center: each field is a 2-line column (label above + dropdown box
	   below), so centering made Reset float between the two lines instead of sitting
	   level with the dropdown boxes themselves. */
	align-items: flex-end;
	gap: 10px;
	padding: 14px;
	background: var(--t4-bg-1);
	border: 1px solid var(--t4-line);
	border-radius: var(--t4-r-lg);
}
body.t4-catalog .selector__list { display: flex; flex-wrap: wrap; gap: 10px; }
body.t4-catalog .field.selector__field { position: relative; }

/* Duplicate "open filter" icon button — redundant, each field already opens its own
   drawer on click. Removed per feedback (was just re-opening the same filter in a modal). */
body.t4-catalog .selector__open { display: none; }

/* Field pill — flat rounded-rect (not a full stadium/oval), neutral hover (no red border-glow).
   .field__select and .field__icon are reset from the legacy input-field look (bordered box +
   absolutely-positioned icon) to plain inline flex children so the chevron sits inside the pill. */
body.t4-catalog .field__label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid var(--t4-line);
	border-radius: var(--t4-r-md);
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	font-weight: 600;
	color: var(--t4-ink);
	cursor: pointer;
	transition: border-color 200ms var(--t4-ease), background 200ms var(--t4-ease);
}
body.t4-catalog .field__label:hover { border-color: rgba(12,12,12,0.28); }
body.t4-catalog .field--open .field__label { border-color: var(--t4-ink); }
body.t4-catalog .selector__field .field__select {
	height: auto;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	white-space: nowrap;
	line-height: 1.2;
}
body.t4-catalog .selector__field .field__icon {
	position: static;
	margin-top: 0;
	width: 12px;
	height: 12px;
	opacity: 1;
	color: var(--t4-muted);
	flex-shrink: 0;
}
body.t4-catalog .selector__field .field__icon::before { display: none; }
body.t4-catalog .field--open .selector__field .field__icon,
body.t4-catalog .selector__field .field--open .field__icon { color: var(--t4-ink); }

body.t4-catalog .selector__btn {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	font-weight: 600;
	color: var(--t4-ink);
	/* .btn sets fill/stroke: white by default (assumes a solid red button) — this button
	   is transparent, so the icon was rendering white-on-cream (invisible). Force it to
	   follow the text color instead. */
	fill: currentColor;
	stroke: currentColor;
	background: transparent;
	border: 1px solid var(--t4-line);
	border-radius: var(--t4-r-md);
	padding: 12px 16px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}
body.t4-catalog .selector__btn:hover { border-color: rgba(12,12,12,0.28); }
@media (max-width: 768px) {
	/* Legacy mobile rule turns this into an icon-only 44px circle — keep that, just
	   make sure the icon itself stays visibly dark inside it. */
	body.t4-catalog .selector__btn { color: var(--t4-ink); fill: currentColor; stroke: currentColor; }
}
/* ---- Per-field bottom-sheet drawer (mobile/tablet ≤1024px) — V4 restyle ---- */
body.t4-catalog .drawer__box {
	font-family: var(--t4-sans);
	border-radius: 20px 20px 0 0;
}
body.t4-catalog .drawer__title {
	font-family: var(--t4-sans);
	font-weight: 800; /* PJS: Bebas был одновесный */
	font-size: var(--t4-fs-h3);
	letter-spacing: 0.01em;
	color: var(--t4-ink);
}
body.t4-catalog .drawer__close {
	background: var(--t4-bg-1);
}
body.t4-catalog .drawer__close-icon { color: var(--t4-ink); }
body.t4-catalog .drawer .field__list-item {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	font-weight: 600;
	color: var(--t4-ink);
	background: #fff;
	border: 1px solid var(--t4-line);
	border-radius: var(--t4-r-md);
	transition: border-color 200ms var(--t4-ease), background 200ms var(--t4-ease), color 200ms var(--t4-ease);
}
body.t4-catalog .drawer .field__list-item.active,
body.t4-catalog .selector__drawer .field__list-item.active {
	background: var(--t4-red);
	border-color: var(--t4-red);
	color: #fff;
	box-shadow: none;
}
body.t4-catalog .drawer__link {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	font-weight: 600;
	color: var(--t4-muted);
	opacity: 1;
}
body.t4-catalog .drawer__link:hover { color: var(--t4-ink); }
body.t4-catalog .drawer__btn {
	background: var(--t4-red);
	color: #fff;
	border-radius: var(--t4-r-md);
	font-family: var(--t4-sans);
	font-weight: 600;
}
body.t4-catalog .drawer__btn:hover { background: var(--t4-red-dark); }

/* ---- Combined "all filters" modal (rarely reached now that .selector__open is
   hidden, but kept in sync in case it's opened via another path) ---- */
body.t4-catalog .mini-filter__header,
body.t4-catalog .mini-filter__title { font-family: var(--t4-sans);
	font-weight: 800; /* PJS: Bebas был одновесный */ letter-spacing: 0.01em; }
body.t4-catalog .mini-filter__item-title { font-family: var(--t4-sans); font-weight: 600; color: var(--t4-ink); }
body.t4-catalog .mini-filter__list-item-title {
	font-family: var(--t4-sans);
	border: 1px solid var(--t4-line);
	border-radius: var(--t4-r-md);
}
body.t4-catalog .mini-filter__submit {
	background: var(--t4-red);
	color: #fff;
	border-radius: var(--t4-r-md);
	font-family: var(--t4-sans);
	font-weight: 600;
}
body.t4-catalog .mini-filter__clear { font-family: var(--t4-sans); color: var(--t4-muted); }

@media (max-width: 768px) {
	body.t4-catalog .selector__form { padding: 10px; gap: 8px; }
	body.t4-catalog .selector__list { gap: 8px; }
	body.t4-catalog .field__label { padding: 10px 14px; font-size: 12px; }
}

/* ---- Tour card results grid (new t4-tcard component, filter-card-horizontal-v4.php) ---- */
body.t4-catalog .card-list--vertical {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	/* The legacy .card-list base rule sets align-items: flex-start (for its old flex
	   layout) and — since this rule never redeclared align-items — that value carried
	   over even after switching display to grid here. Result: cards were NOT stretched
	   to fill their row, so in any row where a neighboring card was taller, the shorter
	   cards left an unstretched gap at the bottom of their grid cell where the hover
	   effect couldn't trigger (the mouse was over the grid container, not the card). */
	align-items: stretch;
}
/* Legacy .card-list::before is a large absolutely-positioned decorative background
   layer (100vw wide, up to 800px tall, vertically centered in the container) meant for
   the old short flex list. Our grid is ~3200px tall (27 cards), so it lands mid-grid —
   invisible (no background image set here) but still position:absolute, so per CSS
   stacking rules it painted ABOVE the plain position:static card articles beneath it,
   silently blocking hover/click on whichever row it happened to cover. Kill it here. */
body.t4-catalog .card-list--vertical::before { display: none; }
body.t4-catalog .t4-tcard {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--t4-line);
	border-radius: var(--t4-r-lg);
	overflow: hidden;
	transition: transform 280ms var(--t4-ease), box-shadow 280ms var(--t4-ease), border-color 280ms var(--t4-ease);
}
body.t4-catalog .t4-tcard:hover {
	transform: translateY(-4px);
	box-shadow: var(--t4-sh-md);
	border-color: rgba(255,40,0,0.4);
}
body.t4-catalog .t4-tcard__media {
	position: relative;
	display: block;
	height: 190px;
	background: var(--t4-bg-1);
	overflow: hidden;
}
body.t4-catalog .t4-tcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--t4-ease);
}
body.t4-catalog .t4-tcard:hover .t4-tcard__media img { transform: scale(1.05); }
body.t4-catalog .t4-tcard__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--t4-red);
	color: #fff;
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	letter-spacing: 0.1em;
	font-weight: 600;
	padding: 6px 10px;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(255,40,0,0.35);
}
body.t4-catalog .t4-tcard__body {
	padding: 18px 18px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 10px;
}
body.t4-catalog .t4-tcard__name {
	font-family: var(--t4-sans);
	font-weight: 800; /* PJS: Bebas был одновесный */
	font-size: var(--t4-fs-h4);
	line-height: 1.05;
	color: var(--t4-ink);
	text-decoration: none;
	letter-spacing: 0.005em;
}
body.t4-catalog .t4-tcard__name:hover { color: var(--t4-red); }
body.t4-catalog .t4-tcard__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	letter-spacing: 0.02em;
	color: var(--t4-muted);
	text-transform: uppercase;
}
body.t4-catalog .t4-tcard__facts span { display: inline-flex; align-items: center; gap: 5px; }
body.t4-catalog .t4-tcard__facts svg { width: 13px; height: 13px; flex-shrink: 0; }
body.t4-catalog .t4-tcard__desc {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	line-height: 1.55;
	color: var(--t4-body);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
body.t4-catalog .t4-tcard__foot { margin-top: auto; padding-top: 6px; }
body.t4-catalog .t4-tcard__price { margin-bottom: 10px; }
body.t4-catalog .t4-tcard__price-old {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-micro);
	color: var(--t4-muted);
	text-decoration: line-through;
	margin-right: 6px;
}
body.t4-catalog .t4-tcard__price-now {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-body);
	font-weight: 600;
	color: var(--t4-ink);
}
body.t4-catalog .t4-tcard__ctas {
	display: flex;
	align-items: center;
	gap: 12px;
}
body.t4-catalog .t4-tcard__book { flex: 1; justify-content: center; padding: 10px 14px; font-size: var(--t4-fs-small); }
body.t4-catalog .t4-tcard__more {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	font-weight: 600;
	color: var(--t4-body);
	text-decoration: none;
	white-space: nowrap;
}
body.t4-catalog .t4-tcard__more:hover { color: var(--t4-red); }

@media (max-width: 640px) {
	body.t4-catalog .card-list--vertical { grid-template-columns: 1fr; }
	body.t4-catalog .t4-cgrid { padding: 40px 0 64px; }
}

/* ====================== SUBCATEGORY ARCHIVE PAGES (body.t4-archive, content-archive-v4.php) ======================
   Banner / trust strip / includes checklist / t4-tcard cards reuse the body.t4-catalog
   rules above verbatim (the archive body carries both classes). Below: only the
   archive-specific bits — the plain card grid (no filter), the term photo gallery,
   and the lead/video CTA band. */

body.t4-archive .t4-agrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	align-items: stretch;
}
/* The shared card partial carries the legacy .selector__card class (needed for the
   filter's reveal animation on the hub page). There is no .selector-result.active
   ancestor here, so the legacy base rule would leave every card invisible
   (opacity 0 / visibility hidden) — neutralize it. */
body.t4-archive .t4-agrid .selector__card {
	transform: none;
	opacity: 1;
	visibility: visible;
}
/* …но ховер-зум v6-карточки должен жить (нейтрализатор выше его глушил) */
body.t4-archive .t4-agrid .selector__card.t4-tcard--v6:hover {
	transform: scale(1.015);
}
/* ====================== PRODUCT CARD v5 (мокап юзера 2026-07-13, ВСЕ карточки) ======================
   Бейдж-чёрная пилюля на фото (+красный BEST SELLER справа), тёмные чипы (время/места)
   поверх низа фото, кикер «машина · места», человекочитаемое display-имя,
   цена + широкая красная кнопка + текстовая ссылка. */
/* ---- V6 (2026-07-13): чистое фото + карусель + мета-строка — ВСЕ карточки каталога ---- */
/* BEST SELLER — стеклянная пилюля на фото (юзер 2026-07-14): blur-подложка, не кричит */
.t4-tcard--v6__bspill {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	font-family: var(--t4-mono);
	font-size: 8.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(20,18,16,0.3);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255,255,255,0.25);
	pointer-events: none;
}
.t4-tcard--v6 {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--t4-line);
	border-radius: var(--t4-r-lg);
	overflow: hidden;
	transition: transform .6s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow .6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.t4-tcard--v6:hover {
	transform: scale(1.015);
	box-shadow: 0 10px 28px rgba(26,22,18,0.10);
}
/* Наследие .t4-tcard:hover (красная рамка + translateY) — глушим для v6 */
body.t4-catalog .t4-tcard--v6:hover {
	border-color: var(--t4-line);
	transform: scale(1.015);
	box-shadow: 0 10px 28px rgba(26,22,18,0.10);
}
/* На тач-устройствах ховер-эффекты лишние (залипают после тапа) — без зума и тени */
@media (hover: none) {
	.t4-tcard--v6:hover,
	body.t4-catalog .t4-tcard--v6:hover,
	body.t4-archive .t4-agrid .selector__card.t4-tcard--v6:hover {
		transform: none;
		box-shadow: none;
	}
	.t4-tcard--v6:hover .t4-tcard--v6__slide { transform: none; }
}
/* лёгкий зум фото при наведении на карточку */
.t4-tcard--v6:hover .t4-tcard--v6__slide { transform: scale(1.05); }
.t4-tcard--v6__media {
	position: relative;
	height: 160px; /* компакт-мокап tour-card-sale-price.html (2026-07-16), было 250 */
	overflow: hidden;
	border-radius: var(--t4-r-lg) var(--t4-r-lg) 0 0;
}
/* Скидочная пилюля на фото (мокап 1a): красная, верх-лево */
.t4-tcard--v6__off {
	position: absolute;
	top: 11px;
	left: 11px;
	z-index: 2;
	background: var(--t4-red);
	color: #fff;
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	letter-spacing: 0.5px;
	padding: 5px 10px;
	border-radius: 999px;
	pointer-events: none;
}
/* Если у скидочного тура ещё и BEST SELLER — стеклянная пилюля уезжает вправо */
.t4-tcard--v6__off ~ .t4-tcard--v6__bspill {
	left: auto;
	right: 12px;
}
.t4-tcard--v6__slide {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	opacity: 0;
	transition: opacity .35s var(--t4-ease), transform .6s var(--t4-ease);
}
.t4-tcard--v6__slide.is-active { opacity: 1; }
.t4-tcard--v6__medialink { position: absolute; inset: 0; z-index: 1; }
.t4-tcard--v6__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,0.32);
	backdrop-filter: blur(3px);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity .4s var(--t4-ease), background .3s var(--t4-ease);
}
.t4-tcard--v6__arrow--prev { left: 10px; }
.t4-tcard--v6__arrow--next { right: 10px; }
.t4-tcard--v6__arrow svg { width: 16px; height: 16px; }
.t4-tcard--v6__media:hover .t4-tcard--v6__arrow { opacity: 1; }
.t4-tcard--v6__arrow:hover { background: rgba(255,255,255,0.55); }
@media (hover: none) { .t4-tcard--v6__arrow { opacity: 1; background: rgba(255,255,255,0.25); } }
/* Скрытая стрелка (первое/последнее фото) — гасится поверх ховера */
.t4-tcard--v6__arrow.is-hidden { opacity: 0 !important; pointer-events: none; }
.t4-tcard--v6__dots {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	gap: 6px;
}
.t4-tcard--v6__dots i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255,255,255,0.55);
	cursor: pointer;
	transition: transform .2s var(--t4-ease), background .2s var(--t4-ease);
}
.t4-tcard--v6__dots i.is-active { background: #fff; transform: scale(1.25); }
.t4-tcard--v6__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 14px 16px 16px; /* компакт-мокап 2026-07-16, было 18/20/20 */
}
.t4-tcard--v6__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 8px;
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 7px;
	white-space: nowrap;
}
.t4-tcard--v6__time {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #c98413;
	font-weight: 600;
}
.t4-tcard--v6__time i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #f0a437;
}
.t4-tcard--v6__sep { color: var(--t4-line); }
.t4-tcard--v6__kicker { color: var(--t4-muted); overflow: hidden; text-overflow: ellipsis; }
.t4-tcard--v6__facts {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 14px;
	font-size: var(--t4-fs-small); /* компакт-мокап 2026-07-16, было 15 */
	font-weight: 600; /* легче — юзер 2026-07-14 */
	color: rgba(26,22,18,0.75);
	margin: 2px 0 8px;
}
.t4-tcard--v6__fact { display: inline-flex; align-items: center; gap: 6px; }
.t4-tcard--v6__fact svg { width: 14px; height: 14px; color: rgba(26,22,18,0.32); } /* как в спек-ряду главной */

/* ---- Foot (мокап tour-card-sale-price.html 2026-07-16): цена/скидка + два бата в ряд ---- */
.t4-tcard--v6__foot {
	margin-top: auto;
	border-top: 1px solid var(--t4-line);
	padding-top: 12px;
}
.t4-tcard--v6__was {
	font-size: var(--t4-fs-micro);
	color: var(--t4-muted);
	letter-spacing: 0.3px;
	margin-bottom: 2px;
}
.t4-tcard--v6__was s { text-decoration: line-through; }
.t4-tcard--v6__pricerow {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}
.t4-tcard--v6__save {
	display: inline-flex;
	align-items: center;
	align-self: center;
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	line-height: 1.2;
	color: #1F7A3D;
	background: #e8f5ec;
	padding: 4.5px 8px; /* высота пилюли — юзер 2026-07-16: итог 4.5px + line-height 1.2 */
	border-radius: 12px;
	letter-spacing: 0.2px;
}
.t4-tcard--v6__btns {
	display: flex;
	gap: 8px;
	margin-top: 11px;
}
.t4-tcard--v6__ghost {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--t4-body);
	border: 1px solid #dcdcdc;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	font-weight: 600;
	padding: 10px 12px;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .15s var(--t4-ease), color .15s var(--t4-ease);
}
.t4-tcard--v6__ghost:hover {
	border-color: #b5b5b5;
	color: var(--t4-ink);
}

.t4-tcard--v5__best {
	position: absolute;
	top: 14px;
	right: 14px;
	background: var(--t4-red);
	color: #fff;
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 7px 13px;
	border-radius: 999px;
}
.t4-tcard--v5 {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--t4-line);
	border-radius: var(--t4-r-lg);
	overflow: hidden;
}
.t4-tcard--v5__media {
	position: relative;
	display: block;
	height: 250px;
	overflow: hidden;
}
.t4-tcard--v5__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s var(--t4-ease);
}
.t4-tcard--v5:hover .t4-tcard--v5__media img { transform: scale(1.04); }
.t4-tcard--v5__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: rgba(20,16,12,0.92);
	color: #fff;
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 7px 13px;
	border-radius: 999px;
}
.t4-tcard--v5__chips {
	position: absolute;
	left: 14px;
	bottom: 14px;
	display: flex;
	gap: 8px;
}
.t4-tcard--v5__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(20,16,12,0.78);
	color: #fff;
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 999px;
	backdrop-filter: blur(2px);
}
.t4-tcard--v5__chip svg { width: 13px; height: 13px; }
.t4-tcard--v5__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px 20px 20px;
}
.t4-tcard--v5__kicker {
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--t4-muted);
	margin-bottom: 6px;
}
.t4-tcard--v5__name {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-lg); /* компакт-мокап 2026-07-16: 18/600 */
	font-weight: 600;
	letter-spacing: -0.2px;
	line-height: 1.25;
	color: var(--t4-ink);
	text-decoration: none;
	margin-bottom: 8px;
	transition: color .18s var(--t4-ease);
}
.t4-tcard--v5__name:hover { color: var(--t4-red); }
.t4-tcard--v5__desc {
	font-size: var(--t4-fs-micro); /* компакт-мокап 2026-07-16, было 14 */
	line-height: 1.45;
	color: var(--t4-muted);
	margin: 0 0 12px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.t4-tcard--v5__price {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding-top: 14px;
	border-top: 1px solid var(--t4-line);
	margin-top: auto;
	margin-bottom: 14px;
}
.t4-tcard--v5__aed {
	font-family: var(--t4-sans);
	font-weight: 600; /* компакт-мокап 2026-07-16 (было 800) */
	font-size: var(--t4-fs-h4); /* шкала агрегаторов */
	letter-spacing: -0.3px;
	line-height: 1.1;
	color: var(--t4-ink);
}
.t4-tcard--v5__per { font-size: var(--t4-fs-micro); color: var(--t4-muted); margin-top: 1px; } /* Viator-эталон: 10/400 gray */
.t4-tcard--v5__book {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1.5; /* мокап: ghost 1 / cta 1.5 в ряду .t4-tcard--v6__btns */
	background: var(--t4-red);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 10px 12px;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .18s var(--t4-ease), box-shadow .18s var(--t4-ease);
}
.t4-tcard--v5__book:hover { transform: translateY(-1px); box-shadow: var(--t4-sh-md); }
.t4-tcard--v5__book svg { width: 14px; height: 14px; flex: none; }
.t4-tcard--v5__details {
	display: block;
	text-align: center;
	margin-top: 12px;
	font-size: var(--t4-fs-small);
	color: var(--t4-body);
	text-decoration: none;
	transition: color .18s var(--t4-ease);
}
.t4-tcard--v5__details:hover { color: var(--t4-red); }

/* ---- Term photo gallery (same images as the old section-slider) ---- */
body.t4-archive .t4a-gal {
	background: var(--t4-bg-1);
	border-top: 1px solid var(--t4-line);
	padding: var(--t4-sec-sm) 0;
}
body.t4-archive .t4a-gal__inner {
	max-width: var(--t4-container);
	margin: 0 auto;
	padding: 0 var(--t4-gutter);
}
body.t4-archive .t4a-gal__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}
body.t4-archive .t4a-gal__item {
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: var(--t4-r-lg);
	overflow: hidden;
	background: var(--t4-bg-1);
}
body.t4-archive .t4a-gal__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--t4-ease);
}
body.t4-archive .t4a-gal__item:hover img { transform: scale(1.05); }

/* ---- Lead CTA band (old section-lead content: title + button + video thumb) ---- */
body.t4-archive .t4a-lead {
	background: var(--t4-ink);
	color: #fff;
	padding: var(--t4-sec) 0;
}
body.t4-archive .t4a-lead__inner {
	max-width: var(--t4-container);
	margin: 0 auto;
	padding: 0 var(--t4-gutter);
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 48px;
	align-items: center;
}
body.t4-archive .t4a-lead__inner:not(:has(.t4a-lead__video)) {
	grid-template-columns: 1fr;
	justify-items: start;
}
body.t4-archive .t4a-lead__title {
	font-family: var(--t4-sans);
	font-weight: 800; /* PJS: Bebas был одновесный */
	font-size: clamp(var(--t4-fs-h4), 2.6vw, var(--t4-fs-h2));
	line-height: 1.02;
	text-transform: uppercase;
	margin-bottom: 28px;
}
body.t4-archive .t4a-lead__video {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--t4-r-lg);
	overflow: hidden;
}
body.t4-archive .t4a-lead__video img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--t4-ease);
}
body.t4-archive .t4a-lead__video:hover img { transform: scale(1.04); }
body.t4-archive .t4a-lead__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--t4-red);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	box-shadow: 0 6px 24px rgba(255,40,0,0.45);
	transition: transform 280ms var(--t4-ease);
}
body.t4-archive .t4a-lead__play svg { width: 26px; height: 26px; margin-left: 3px; }
body.t4-archive .t4a-lead__video:hover .t4a-lead__play { transform: translate(-50%, -50%) scale(1.08); }

@media (max-width: 768px) {
	body.t4-archive .t4-agrid { grid-template-columns: 1fr; }
	body.t4-archive .t4a-gal { padding: 16px 0; } /* юзер 2026-07-16: было 40 — много */
	/* Mobile = one-photo snap rail + overlay dots (same UX as the tour in-article
	   gallery, user 2026-07-16). Dot styles come from tour-v4.css (.t4-galdots);
	   the inner is the absolute anchor — the rail is its last flow child. */
	body.t4-archive .t4a-gal__inner { position: relative; padding: 0 16px; } /* юзер 2026-07-16: бока ровно 16px */
	body.t4-archive .t4a-gal__grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 12px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	body.t4-archive .t4a-gal__grid::-webkit-scrollbar { display: none; }
	body.t4-archive .t4a-gal__item {
		flex: 0 0 100%;
		aspect-ratio: 406 / 430;
		scroll-snap-align: start;
	}
	body.t4-archive .t4a-lead { padding: var(--t4-sec) 0; }
	body.t4-archive .t4a-lead__inner { grid-template-columns: 1fr; gap: 28px; }
}

/* ====================== CATALOG SECTIONS — divider sections + anchor chips + Best Sellers shelf
   (catalog-sections plan 2026-07-08, mockup mockups/catalog-sections/index.html).
   Markup comes from bigred_v4_render_catalog_sections() and lives INSIDE the old
   list containers (.card-list--vertical on the hub, .t4-agrid on archives), so both
   switch from grid to block whenever sections are present. Flat (filtered) states
   render bare cards — the original grid rules above keep applying untouched. ====================== */

body.t4-catalog .card-list--vertical:has(.t4-csec),
body.t4-archive .t4-agrid:has(.t4-csec) { display: block; }

/* ---- Anchor chips ---- */
.t4-cchips {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 6px;
	margin: 0 0 28px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.t4-cchips::-webkit-scrollbar { display: none; }
.t4-cchip {
	flex: 0 0 auto;
	font-family: var(--t4-sans);
	font-weight: 600;
	font-size: var(--t4-fs-micro);
	line-height: 1;
	letter-spacing: 0.02em;
	padding: 9px 14px;
	border-radius: 99px;
	border: 1px solid rgba(12,12,12,0.14);
	color: var(--t4-ink);
	background: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: color 200ms var(--t4-ease), border-color 200ms var(--t4-ease);
}
.t4-cchip:hover { border-color: var(--t4-red); color: var(--t4-red); }
.t4-cchip--hot { border-color: rgba(255,40,0,0.35); color: var(--t4-red); }

/* ---- Section divider (mono-caps kicker + counter + hairline; DIV, never a heading) ---- */
.t4-csec { margin: 0 0 14px; scroll-margin-top: 96px; }
.t4-csec + .t4-csec { margin-top: 44px; }
.t4-csec__head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 18px;
}
.t4-csec__kicker {
	font-family: var(--t4-mono);
	font-weight: 600;
	font-size: var(--t4-fs-micro);
	line-height: 1;
	letter-spacing: 0.14em;
	color: var(--t4-red);
	text-transform: uppercase;
	white-space: nowrap;
}
.t4-csec__count {
	font-family: var(--t4-mono);
	font-weight: 600;
	font-size: var(--t4-fs-micro);
	line-height: 1;
	letter-spacing: 0.06em;
	color: var(--t4-muted);
	white-space: nowrap;
}
.t4-csec__rule { flex: 1; height: 1px; background: var(--t4-line); transform: translateY(-3px); }
.t4-csec__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	align-items: stretch;
}

/* ---- Mobile: default (unfiltered) state = horizontal rails per section, same
   scroll-snap mechanics as the homepage t4-hgal rail. Filtered states have no
   .t4-csec--rail class and fall back to a vertical 1-column grid. ---- */
@media (max-width: 768px) {
	.t4-csec__grid { grid-template-columns: 1fr; gap: 12px; }
	.t4-csec--rail .t4-csec__grid {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin: 0 calc(-1 * var(--t4-gutter)); /* full bleed at edges */
		/* 16px от левого края экрана (юзер 2026-07-16). ГОЧА: одного padding мало —
		   mandatory-snap прищёлкивает первую карточку к скролл-порту и съедает его
		   (scrollLeft=32 на загрузке); scroll-padding задаёт snap-упор в 16px. */
		padding: 0 16px 8px;
		scroll-padding-left: 16px;
	}
	.t4-csec--rail .t4-csec__grid::-webkit-scrollbar { display: none; }
	.t4-csec--rail .t4-csec__grid > .t4-tcard {
		flex: 0 0 min(78vw, 340px);
		scroll-snap-align: start;
	}
	.t4-csec + .t4-csec { margin-top: 36px; }
}

/* ---- Catalog intro text above the configurator (filter + product grid removed from
   the hub 2026-07-10) — kill the stacked section paddings so the configurator sits
   one normal section-gap below the text. Placed at EOF to outrank the 768px
   `.t4-cgrid { padding: 40px 0 64px; }` override above. ---- */
body.t4-catalog .t4-cgrid--intro { padding-bottom: 0; }
body.t4-catalog .t4-cgrid--intro .t4-cgrid__head { margin-bottom: 0; }

/* ---- Category archives: fixed 3-up card rows (user 2026-07-10; auto-fill 280px made
   four narrow tracks and small cards). Applies to section grids and flat archive
   grids alike; tablets get 2-up, phones keep the 1-col / rail behavior above. ---- */
@media (min-width: 769px) {
	body.t4-archive .t4-agrid,
	body.t4-archive .t4-csec__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
	body.t4-archive .t4-agrid,
	body.t4-archive .t4-csec__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Promo strikethrough (2026-07-15): day/sunset tours carry price_old — the offer
   must be visible on cards, not only in the tour widget. Muted line, no red. */
.t4-tcard--v5__old {
	display: block;
	font-size: var(--t4-fs-micro);
	color: var(--t4-muted);
	margin-bottom: 1px;
}

/* Hub hero (t4ge-hero--hub, 2026-07-15): darker scrim over the new banner photo
   so the white text holds up (base .t4-hero__scrim is a flat 0.4 in tour-v4.css).
   Heavier on the left where the copy sits, eases off over the buggy. */
.t4ge-hero--hub .t4-hero__scrim {
	background: linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.48) 55%, rgba(0,0,0,0.38) 100%);
}

/* ---- Compact banners (user 2026-07-15, evening) ----
   1) Book-now: half the old full-viewport hero; the catalog hub matches it exactly
      (shared rule). Content still governs on short screens (min-height only).
   2) Subcategory archives (.t4-hero--cat): the book-now hero LAYOUT at the old
      compact cbanner height — no min-height, tight paddings.
   Both override tour-v4.css's mobile `.t4-hero { min-height: 78vh; align-items:
   flex-end; }` — this file loads after tour-v4/longread, ties resolve to us. */
body.t4-booknow .t4-hero,
body.t4-catalog .t4ge-hero--hub {
	min-height: max(460px, 54vh);
	padding-top: 120px;
	padding-bottom: 44px;
	align-items: center;
}
body.t4-archive .t4-hero--cat {
	min-height: 0;
	padding: 112px var(--t4-gutter) 36px;
	align-items: center;
}
@media (max-width: 768px) {
	body.t4-booknow .t4-hero,
	body.t4-catalog .t4ge-hero--hub {
		min-height: max(380px, 46vh);
		padding: 88px 20px 28px;
		align-items: flex-end;
	}
	body.t4-archive .t4-hero--cat {
		min-height: 0;
		padding: 88px 20px 28px;
		align-items: flex-end;
	}
}

/* ============================================================================
   SECTION EXPLAINER (2026-07-20, user request) — "What is an Early Bird tour?"
   chip on the right of the section divider + dark popover. The section names
   are insider shorthand; this explains them without adding page copy.
   Popover styling follows the booking-V2 popovers (dark card, tiny arrow).
   ========================================================================== */
.t4-csec__what {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: none;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	letter-spacing: 0.06em;
	line-height: 1;
	color: var(--t4-muted);
	transition: color .18s ease;
}
.t4-csec__what:hover,
.t4-csec__what[aria-expanded="true"] { color: var(--t4-ink); }
.t4-csec__whatico {
	width: 17px;
	height: 17px;
	border-radius: 50%;
	border: 1px solid var(--t4-line);
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--t4-sans, inherit);
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	line-height: 1;
	color: var(--t4-muted);
	transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.t4-csec__what:hover .t4-csec__whatico,
.t4-csec__what[aria-expanded="true"] .t4-csec__whatico {
	border-color: var(--t4-red);
	color: #fff;
	background: var(--t4-red);
}
.t4-csec__pop {
	position: absolute;
	right: 0;
	top: calc(100% + 11px);
	z-index: 30;
	width: 320px;
	max-width: min(320px, calc(100vw - 40px));
	background: #17181c;
	color: #fff;
	border-radius: 12px;
	padding: 13px 15px;
	font-family: var(--t4-sans, inherit);
	font-size: var(--t4-fs-micro);
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
	animation: t4csecPop .18s ease both;
	cursor: default;
}
.t4-csec__pop::after {
	content: '';
	position: absolute;
	right: 6px;
	bottom: 100%;
	border: 7px solid transparent;
	border-bottom-color: #17181c;
}
@keyframes t4csecPop { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

/* mobile: the divider wraps, so the chip drops under the label and the popover
   spans the content width instead of hanging off the right edge */
@media (max-width: 600px) {
	.t4-csec__head { flex-wrap: wrap; gap: 9px 12px; }
	.t4-csec__rule { order: 3; width: 100%; flex: 1 0 100%; }
	.t4-csec__what { order: 4; }
	.t4-csec__pop { right: auto; left: 0; width: calc(100vw - 40px); }
	.t4-csec__pop::after { right: auto; left: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.t4-csec__pop { animation: none; }
}