/* Campaign pages (plan E task 3): /kampanyalar/ and package detail. Builds on transfers.css (.trf-page, .trf-hero, .trf-card-*). */
/* Longhands only: a "padding: X 0" shorthand would zero .container's side padding (edge-to-edge bleed). */
.cmp-page .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cmp-eyebrow { margin: 0 0 .25rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-gold-hover, #b17f3d); }
.cmp-hero .trf-benefits { margin-bottom: 0; }
.cmp-route { margin: .15rem 0 0; font-weight: 600; color: var(--primary); }
.cmp-includes { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .6rem 0 0; padding: 0; font-size: .88rem; color: var(--color-7); }
.cmp-includes li { white-space: nowrap; }

/* Coming soon */
.cmp-soon { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; padding-top: 2.5rem; padding-bottom: 2.5rem; padding-left: 1.25rem; padding-right: 1.25rem; border: 1px dashed #d9cfbb; border-radius: 20px; background: #fffdf8; }
.cmp-soon-icon { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary); color: #fff; font-size: 1.8rem; }
.cmp-soon h2 { margin: 1rem 0 .5rem; }
.cmp-soon p { color: var(--color-7); line-height: 1.6; }
.cmp-soon-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.25rem; }

/* Duration chips (shown by JS only; no JS = every card) */
.cmp-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.cmp-chips[hidden], .cmp-card[hidden] { display: none; }
.cmp-chip { min-height: 40px; padding: .4rem 1rem; border: 1px solid #d9cfbb; border-radius: 999px; background: #fff; color: var(--color-7); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.cmp-chip:hover { border-color: var(--primary); color: var(--primary); }
.cmp-chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.cmp-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cmp-nights { align-self: flex-start; margin: 0; padding: .15rem .6rem; border-radius: 8px; background: #fdf3e3; color: #7a4f12; font-size: .8rem; font-weight: 700; }
/* Where the hotel is (2026-10-08): a strong pin label above the title. */
.cmp-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .3rem; }
.cmp-place { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem .2rem .5rem; border-radius: 999px; background: var(--primary, #0e5c68); color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .01em; }
.cmp-place svg { flex: none; }
/* Filters: length + city rows. */
.cmp-filters { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; margin: 0 0 1rem; }
.cmp-filters[hidden] { display: none; }
.cmp-filters .cmp-chips { margin: 0; align-items: center; }
.cmp-chips-label { font-size: .85rem; font-weight: 700; color: #5b6770; margin-right: .1rem; }
.cmp-card-dates { margin: .1rem 0 0; font-size: .85rem; color: var(--color-6); }

/* Departure city switch (links to ?city= without JS; campaigns.js switches in place) */
.cmp-cities { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .5rem 0 0; }
.cmp-cities-label { font-size: .85rem; font-weight: 600; color: var(--color-7); }
.cmp-city { display: inline-flex; align-items: baseline; gap: .35rem; min-height: 36px; padding: .35rem .8rem; border: 1px solid #d9cfbb; border-radius: 999px; background: #fff; color: var(--color-7); font-size: .88rem; font-weight: 600; text-decoration: none; }
.cmp-city:hover { border-color: var(--primary); color: var(--primary); }
.cmp-city[aria-current="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.cmp-city:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cmp-city-price { font-weight: 500; font-size: .8rem; opacity: .85; }
.cmp-from { font-size: .8rem; font-weight: 600; color: var(--color-7); }
.cmp-legs[hidden] { display: none; }

/* List cards: photo | details | price */
.cmp-list { display: flex; flex-direction: column; gap: 1rem; }
.cmp-card { display: grid; grid-template-columns: 280px 1fr 230px; border: 1px solid #e5e1d8; border-radius: 16px; background: #fff; overflow: hidden; transition: box-shadow .2s; }
.cmp-card:hover { box-shadow: 0 10px 28px rgba(31,26,18,.1); }
.cmp-card-img { position: relative; display: block; min-height: 200px; background: linear-gradient(135deg, #e9e3d6, #d8cfbd); overflow: hidden; }
.cmp-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.cmp-card:hover .cmp-card-img img { transform: scale(1.04); }
/* Photo slider (2026-10-08): hotel photos + one per tour; swipe on touch, arrows on hover. */
.cmp-slides { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.cmp-slides::-webkit-scrollbar { display: none; }
.cmp-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; overflow: hidden; }
.cmp-slide-cap { position: absolute; left: .6rem; right: .6rem; bottom: .6rem; font-style: normal; font-size: .78rem; font-weight: 600; line-height: 1.3; color: #fff; background: rgba(20, 30, 40, .62); border-radius: 8px; padding: .25rem .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-slide-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #1f2a33; font-size: 1.35rem; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); opacity: 0; transition: opacity .2s; }
.cmp-slide-prev { left: .5rem; }
.cmp-slide-next { right: .5rem; }
.cmp-card:hover .cmp-slide-nav, .cmp-slide-nav:focus-visible { opacity: 1; }
.cmp-slide-nav[disabled] { opacity: 0 !important; pointer-events: none; }
@media (hover: none) { .cmp-slide-nav { display: none; } }
.cmp-slide-count { position: absolute; right: .6rem; bottom: .6rem; z-index: 1; font-size: .75rem; font-weight: 600; color: #fff; background: rgba(20, 30, 40, .62); border-radius: 999px; padding: .1rem .45rem; }
.cmp-slide-count b { font-weight: 700; }
.cmp-card-img[data-cmp-slider] .cmp-slide-cap { right: 3.4rem; }
/* Detail page: bigger arrows, always shown (they are the gallery's controls). */
.cmp-head-img[data-cmp-slider] .cmp-slide-cap { right: 4rem; }
.cmp-head-img .cmp-slide-nav { opacity: 1; width: 40px; height: 40px; font-size: 1.6rem; }
.cmp-head-img .cmp-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp-badge { position: absolute; left: .6rem; top: .6rem; font-style: normal; font-weight: 700; font-size: .8rem; border-radius: 8px; padding: .2rem .5rem; background: #9a6a2a; color: #fff; } /* darker gold: white text 4.7:1 (2026-10-14) */
.cmp-card-body { padding-top: 1rem; padding-bottom: 1rem; padding-left: 1.25rem; padding-right: 1.25rem; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cmp-card-title { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.cmp-card-title a { color: inherit; text-decoration: none; }
.cmp-card-title a:hover { color: var(--primary); }
.cmp-card-price { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: .15rem; padding: 1rem 1.25rem; border-left: 1px solid #efebe3; background: #fcfaf6; text-align: right; }
.cmp-was { color: var(--color-6); font-size: .95rem; }
.cmp-now { font-size: 1.6rem; line-height: 1.1; color: var(--primary-dark, #0b3d4c); }
.cmp-pp { font-size: .8rem; color: var(--color-6); }
.cmp-save { display: inline-block; margin: .2rem 0 0; padding: .15rem .55rem; border-radius: 999px; background: #e7f4ec; color: #1f6b3d; font-size: .8rem; font-weight: 700; }
.cmp-cta { margin-top: .6rem; }
.cmp-note { margin-top: 1.25rem; font-size: .85rem; color: var(--color-6); }
.cmp-more-wrap { margin: 1.5rem 0 0; text-align: center; }
.cmp-more { min-height: 44px; }
.cmp-more[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* Detail */
.cmp-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; align-items: center; margin-bottom: 2rem; }
.cmp-head-img { position: relative; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, #e9e3d6, #d8cfbd); }
.cmp-head-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp-head h1 { margin: 0 0 .35rem; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.15; }
.cmp-head-meta { display: flex; align-items: center; gap: .6rem; margin: 0 0 .25rem; }
.cmp-score { background: var(--primary); color: #fff; font-weight: 700; font-size: .8rem; border-radius: 8px; padding: .15rem .45rem; }
.cmp-head .trf-meta { margin-top: .5rem; margin-bottom: 0; }
.cmp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem; align-items: start; }
.cmp-section { margin-bottom: 2rem; }
.cmp-section h2 { margin: 0 0 .75rem; font-size: 1.35rem; }
.cmp-legs { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.cmp-leg, .cmp-box { border: 1px solid #e5e1d8; border-radius: 14px; padding: 1rem; background: #fff; }
.cmp-leg h3, .cmp-box h3 { margin: 0 0 .2rem; font-size: 1rem; }
.cmp-box h3 a { color: inherit; }
.cmp-leg p { margin: .2rem 0; }
.cmp-leg-date { color: var(--color-6); font-size: .85rem; }
.cmp-leg-times { display: flex; align-items: flex-start; gap: .6rem; margin: .5rem 0; }
.cmp-leg-times > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cmp-leg-times strong { font-size: 1.35rem; line-height: 1.2; }
.cmp-leg-times span { font-size: .82rem; color: var(--color-7); }
.cmp-leg-arrow { padding-top: .2rem; color: var(--color-5); }
.cmp-leg-meta { font-size: .85rem; color: var(--color-7); }
.cmp-hint { font-size: .82rem; color: var(--color-6); margin: .5rem 0 0; }
.cmp-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6rem 1rem; margin: .75rem 0 0; }
.cmp-facts dt { font-size: .78rem; color: var(--color-6); }
.cmp-facts dd { margin: 0; font-weight: 600; }
.cmp-tours { list-style: none; margin: 0; padding: 0; border: 1px solid #e5e1d8; border-radius: 14px; background: #fff; }
.cmp-tours li { display: grid; grid-template-columns: 70px 150px 1fr auto; gap: .5rem 1rem; align-items: baseline; padding: .75rem 1rem; border-bottom: 1px solid #f0ece4; }
.cmp-tours li:last-child { border-bottom: 0; }
.cmp-day { font-weight: 700; color: var(--primary); }
.cmp-tour-date, .cmp-tour-pax { font-size: .85rem; color: var(--color-6); }
.cmp-tours a { color: inherit; font-weight: 600; }
.cmp-aside { position: sticky; top: 90px; }
.cmp-pricebox { border: 1px solid #e3d6bd; border-radius: 18px; padding: 1.25rem; background: linear-gradient(180deg, #fffdf8, #fff); box-shadow: 0 10px 30px rgba(31,26,18,.08); }
.cmp-pricebox h2 { margin: 0 0 .75rem; font-size: 1.2rem; }
.cmp-breakdown { margin: 0; }
.cmp-breakdown > div { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid #f0ece4; font-size: .9rem; }
.cmp-breakdown dd { margin: 0; white-space: nowrap; }
.cmp-breakdown .cmp-discount dd { color: #1f6b3d; font-weight: 600; }
.cmp-breakdown .cmp-total { border-bottom: 0; font-weight: 700; font-size: 1rem; }
.cmp-pp-big { margin: .75rem 0 0; }
.cmp-pp-big strong { font-size: 1.9rem; color: var(--primary-dark, #0b3d4c); }
.cmp-pp-big span { color: var(--color-6); font-size: .85rem; }
.cmp-buy .cmp-cta { width: 100%; margin-top: 1rem; }

/* Guest's own date (2026-10-07): "Tarih değiştir" panel, live quote state */
.cmp-cities[hidden], .cmp-quote-form[hidden], .cmp-quote-toggle[hidden], .cmp-quote-status[hidden], .cmp-quote-busy[hidden] { display: none; }
.cmp-quote { margin: .6rem 0 0; }
.cmp-quote-toggle { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: .4rem 1rem; border: 1px solid var(--primary); border-radius: 999px; background: #fff; color: var(--primary); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.cmp-quote-toggle:hover, .cmp-quote-toggle[aria-expanded="true"] { background: var(--primary); color: #fff; }
.cmp-quote-toggle:focus-visible, .cmp-quote-form :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cmp-quote-form { margin: .6rem 0 0; padding: .9rem 1rem; border: 1px solid #e3d6bd; border-radius: 14px; background: #fffdf8; }
.cmp-quote-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.cmp-quote-form legend { padding: 0; margin: 0 0 .5rem; font-weight: 700; font-size: .95rem; }
.cmp-quote-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.cmp-quote-fields label { display: flex; flex-direction: column; gap: .2rem; min-width: 0; font-size: .8rem; color: var(--color-6); }
.cmp-quote-fields input, .cmp-quote-fields select { min-height: 42px; width: 100%; padding: .35rem .5rem; border: 1px solid #d9cfbb; border-radius: 10px; background: #fff; color: var(--color-8, #1f1a12); font: inherit; font-size: .95rem; }
.cmp-quote-go { margin-top: .75rem; }
.cmp-quote-status { margin: .6rem 0 0; padding: .55rem .8rem; border-radius: 10px; font-size: .9rem; background: #f3f0ea; color: var(--color-7); }
.cmp-quote-status.is-ok { background: #e7f4ec; color: #1f6b3d; }
.cmp-quote-status.is-error { background: #fdecea; color: #9b1c1c; }
.cmp-quote-hint { display: block; margin-top: .2rem; font-size: .85rem; }
.cmp-quote-busy { display: flex; align-items: center; gap: .5rem; margin: .75rem 0 0; font-weight: 600; color: var(--primary); }
.cmp-spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cmp-spin .8s linear infinite; }
@keyframes cmp-spin { to { transform: rotate(360deg); } }
.cmp-detail.is-quoting [data-cmp-part] { opacity: .45; transition: opacity .2s; }
/* 390 px: one field per row, full-width inputs and button; iOS date inputs never wider than the panel. */
.cmp-quote-fields input, .cmp-quote-fields select { box-sizing: border-box; min-width: 0; max-width: 100%; }
@media (max-width: 640px) { .cmp-quote-fields { grid-template-columns: 1fr; } .cmp-quote-go, .cmp-quote-toggle { width: 100%; justify-content: center; } .cmp-quote-form { padding-left: .8rem; padding-right: .8rem; } }
@media (prefers-reduced-motion: reduce) { .cmp-spinner { animation: none; border-right-color: currentColor; opacity: .6; } .cmp-detail.is-quoting [data-cmp-part] { transition: none; } }

@media (max-width: 960px) {
	.cmp-card { grid-template-columns: 220px 1fr; }
	.cmp-card-price { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: .3rem .75rem; border-left: 0; border-top: 1px solid #efebe3; text-align: left; }
	.cmp-card-price .cmp-cta { margin-top: 0; margin-left: auto; }
	.cmp-layout { grid-template-columns: 1fr; }
	.cmp-aside { position: static; }
}
@media (max-width: 640px) {
	.cmp-card { grid-template-columns: 1fr; }
	.cmp-card-img { min-height: 0; aspect-ratio: 16 / 10; }
	.cmp-card-price .cmp-cta { width: 100%; margin-left: 0; }
	.cmp-head { grid-template-columns: 1fr; }
	.cmp-legs { grid-template-columns: 1fr; }
	.cmp-tours li { grid-template-columns: auto 1fr; }
	.cmp-tours li a, .cmp-tours li > span:nth-child(3) { grid-column: 1 / -1; }
	.cmp-tour-pax { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cmp-card-img img { transition: none; } .cmp-card:hover .cmp-card-img img { transform: none; } }

/* ── Journey: the holiday drawn step by step (2026-10-08) ─────────────────
   A dashed road down the middle; each stop is a coloured icon on the road
   and a card beside it (alternating sides on wide screens, one side on
   phones). Day labels sit on the road as pills. Pure HTML/CSS. */
.cmp-journey-section h2 { margin-bottom: 1.25rem; }
.cmp-journey { --j-road: #cfd9df; --j-flight: #289dd2; --j-transfer: #2fae9f; --j-hotel: #1d4355; --j-tour: #c8944f; --j-home: #6a4fb3;
	position: relative; list-style: none; margin: 0; padding: .5rem 0 0; }
.cmp-journey[hidden] { display: none; }
.cmp-journey::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-left: 3px dashed var(--j-road); transform: translateX(-1.5px); }
.cmp-j-day { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; gap: .4rem; margin: .9rem 0 .6rem; }
.cmp-j-day span { background: var(--j-hotel); color: #fff; font-weight: 700; font-size: .78rem; letter-spacing: .02em; border-radius: 999px; padding: .25rem .8rem; }
.cmp-j-day em { font-style: normal; font-size: .8rem; color: #5b6770; background: #fff; padding: 0 .35rem; }
.cmp-j-step { --j-c: var(--j-tour); position: relative; display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; margin: 0 0 .7rem; }
.cmp-j--flight-out, .cmp-j--flight-in { --j-c: var(--j-flight); }
.cmp-j--transfer { --j-c: var(--j-transfer); }
.cmp-j--hotel { --j-c: var(--j-hotel); }
.cmp-j--home { --j-c: var(--j-home); }
.cmp-j-icon { grid-column: 2; justify-self: center; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--j-c); box-shadow: 0 0 0 5px #fff, 0 4px 12px rgba(0, 0, 0, .12); }
.cmp-j-card { grid-row: 1; grid-column: 1; justify-self: end; max-width: 330px; text-align: right; background: #fff; border: 1px solid #e8e3d9; border-radius: 14px; padding: .65rem .9rem; box-shadow: 0 2px 10px rgba(31, 26, 18, .05); position: relative; }
.cmp-j-step.cmp-j-r .cmp-j-card { grid-column: 3; justify-self: start; text-align: left; }
/* a small pointer from the card to the road */
.cmp-j-card::after { content: ""; position: absolute; top: 50%; right: -7px; width: 12px; height: 12px; background: #fff; border-right: 1px solid #e8e3d9; border-top: 1px solid #e8e3d9; transform: translateY(-50%) rotate(45deg); }
.cmp-j-step.cmp-j-r .cmp-j-card::after { right: auto; left: -7px; transform: translateY(-50%) rotate(-135deg); }
.cmp-j-card strong { display: block; font-size: .95rem; line-height: 1.3; color: #1f2a33; }
.cmp-j-card strong::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--j-c); margin: 0 .4rem .1rem 0; vertical-align: middle; }
.cmp-j-step:not(.cmp-j-r) .cmp-j-card strong::before { display: none; }
.cmp-j-step:not(.cmp-j-r) .cmp-j-card strong::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--j-c); margin: 0 0 .1rem .4rem; vertical-align: middle; }
.cmp-j-card p { margin: .2rem 0 0; font-size: .82rem; line-height: 1.4; color: #5b6770; }
.cmp-j--flight-out .cmp-j-icon, .cmp-j--home .cmp-j-icon { width: 50px; height: 50px; }
@media (max-width: 700px) {
	.cmp-journey::before { left: 22px; transform: none; }
	.cmp-j-day { justify-content: flex-start; padding-left: 0; }
	.cmp-j-step { grid-template-columns: 44px 1fr; gap: .75rem; }
	.cmp-j-icon { grid-column: 1; }
	.cmp-j--flight-out .cmp-j-icon, .cmp-j--home .cmp-j-icon { width: 44px; height: 44px; }
	.cmp-j-card, .cmp-j-step.cmp-j-r .cmp-j-card { grid-row: 1; grid-column: 2; justify-self: stretch; max-width: none; text-align: left; }
	.cmp-j-card::after, .cmp-j-step.cmp-j-r .cmp-j-card::after { right: auto; left: -7px; transform: translateY(-50%) rotate(-135deg); }
	.cmp-j-step:not(.cmp-j-r) .cmp-j-card strong::before { display: inline-block; }
	.cmp-j-step:not(.cmp-j-r) .cmp-j-card strong::after { display: none; }
}

/* ── Detail copy + not-on-sale state (2026-10-08) ───────────────────────── */
.cmp-layout[hidden], .cmp-unavailable[hidden] { display: none; }
.cmp-unavailable { margin: .6rem 0 .2rem; padding: .7rem .9rem; border-radius: 10px; background: #fff7e6; border: 1px solid #f0d9a8; color: #6b4a12; font-weight: 600; line-height: 1.45; }
.cmp-about p { margin: 0 0 .6rem; line-height: 1.7; color: var(--color-7); }
.cmp-faq-item { border: 1px solid #e8e3d9; border-radius: 12px; background: #fff; margin: 0 0 .5rem; }
.cmp-faq-item summary { cursor: pointer; padding: .8rem 1rem; font-weight: 700; list-style-position: inside; }
.cmp-faq-item p { margin: 0; padding: 0 1rem .9rem; line-height: 1.65; color: var(--color-7); }
.cmp-others .cmp-list { margin-bottom: 1rem; }
.cmp-others-all { margin: 0; }

/* Phones (2026-10-14 audit): first screen showed only the header box and two chip rows.
   Header shrinks to title + one line, each filter is one horizontally scrolling row. */
@media (max-width: 640px) {
  .cmp-hero .trf-benefits { display: none; }
  .cmp-page .cmp-hero { padding-top: .9rem; padding-bottom: .9rem; }
  .cmp-page .cmp-hero h1 { font-size: 1.35rem; line-height: 1.25; }
  .cmp-filters { flex-direction: column; align-items: stretch; gap: .45rem; }
  .cmp-filters .cmp-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .cmp-filters .cmp-chips::-webkit-scrollbar { display: none; }
  .cmp-filters .cmp-chip, .cmp-chips-label { flex: none; }
  .cmp-filters .cmp-chip { min-height: 38px; padding: .3rem .9rem; }
}
/* Package detail: bottom price bar on phones and tablets. */
.cmp-mobile-cta b:empty + span { display: none; }
.cmp-detail { padding-bottom: 4.5rem; }
@media (min-width: 1024px) { .cmp-detail { padding-bottom: 0; } }