/* L3 v3 — tour detail redesign (Claude Design hand-off "Tour Detail v3", 8a desktop / 8b mobile,
   2026-09-10). Scoped to .l3v3 so the old tour-detail.css keeps styling only the blocks the
   redesign keeps verbatim (gallery lightbox, holiday calendar, QR modal, promo banner,
   testimonials, related slider, mobile bottom bar). Measurements are the README's production
   values (container ~1320, section gap 36, card radius 16 …); px on purpose.
   Flight-panel colour = ONE variable (--l3-flight-bg/-fg/-muted/-accent/-line): default 7e
   cream; 7a teal / 7b light teal / 7f soft black are the alternates Mod may still pick. */

.l3v3 {
  --l3-yellow: #fdd219; --l3-yellow-dark: #f7b228;
  --l3-teal: #06b2bb; --l3-teal-deep: #007076; --l3-teal-tint: #ddf6f7; --l3-teal-border: #a8e4e7; --l3-teal-link: #0a7d84;
  --l3-orange: #f78828; --l3-coral: #fa5456; --l3-red: #d92d20; --l3-red-bg: #feecec;
  --l3-warm: #fff6d2; --l3-warm-border: #f0d05c; --l3-warm-text: #7a5c10;
  --l3-black: #111; --l3-soft: #393939; --l3-grey: #777; --l3-grey-light: #98a2b3; --l3-slate: #475467;
  --l3-line: #cdd5df; --l3-line-faint: #ecf0f5; --l3-chip: #f2f4f7; --l3-chip-2: #f8f9fb; --l3-chip-hotel: #eef2f8; --l3-chip-hotel-text: #3b5170; --l3-chip-text: #667085;
  --l3-page: #fcfbf8; --l3-white: #fff;
  --l3-shadow: 0 4px 6px -1px rgba(10, 13, 18, 0.08), 0 2px 4px -2px rgba(10, 13, 18, 0.05);
  --l3-gap: 36px;
  /* flight panel — 7e cream (default) */
  --l3-flight-bg: #f4f2ea; --l3-flight-fg: #111; --l3-flight-muted: #777; --l3-flight-accent: #06b2bb; --l3-flight-line: #e4e1d6;
  background: var(--l3-page);
  color: var(--l3-black);
  font-family: 'DB Heavent', Tahoma, sans-serif;
}
.l3v3 * { box-sizing: border-box; }
.l3v3 h1, .l3v3 h2, .l3v3 p { margin: 0; }
.l3-wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--spacing-container, 112px); }
.l3-page { display: flex; flex-direction: column; gap: var(--l3-gap); padding: 24px 0 40px; }
.l3-crumb { padding-top: 24px; font-size: 17px; color: var(--l3-grey); }
.l3-crumb a { color: var(--l3-grey); }
.l3-card { background: var(--l3-white); border-radius: 16px; box-shadow: var(--l3-shadow); overflow: hidden; }
.l3-card-bar { height: 5px; background: linear-gradient(90deg, #fdd219, #06b2bb); }
.l3-sec { display: flex; flex-direction: column; gap: 14px; }
.l3-sec-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.l3-sec-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--l3-yellow); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--l3-black); flex: none; }
.l3-sec-title { font-size: 30px; font-weight: 500; color: var(--l3-black); line-height: 1.1; }
.l3-sec-sub { font-size: 19px; color: var(--l3-grey); }
.l3-arrow { color: var(--l3-grey-light); padding: 0 6px; }
.l3v3 .ic { display: inline-flex; align-items: center; justify-content: center; }

/* ── 1 · title strip ── */
.l3-title { display: flex; gap: 24px; align-items: stretch; }
/* the brochure cover at its own aspect (Mod 2026-09-11: "the banners are cropped") — 200 wide, height follows */
.l3-cover { width: 200px; height: auto; align-self: flex-start; flex: none; border-radius: 12px; overflow: hidden; background: var(--l3-teal-tint); cursor: pointer; }
.l3-cover img { width: 100%; height: auto; object-fit: contain; display: block; }
.l3-cover-empty { width: 100%; aspect-ratio: 1 / 1.1; background: linear-gradient(192deg, #fdd219 3.29%, #06b2bb 50.19%, #007076 97.14%); }
.l3-title-col { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.l3-title-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.l3-code { font-size: 19px; color: var(--l3-teal); font-weight: 700; letter-spacing: 0.5px; }
.l3-type { display: inline-flex; align-items: center; background: var(--l3-warm); border: 1px solid var(--l3-warm-border); color: var(--l3-warm-text); border-radius: 50vw; padding: 1px 12px; font-size: 18px; font-weight: 700; }
.l3-name { font-size: 38px; font-weight: 500; color: var(--l3-black); line-height: 1.05; }
.l3-pills { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.l3-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--l3-white); border: 1px solid var(--l3-line); color: var(--l3-soft); border-radius: 50vw; padding: 6px 18px; font-size: 20px; line-height: 1.2; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.l3-pill .ic { font-size: 16px; }
.l3-pill:hover { background: var(--l3-yellow); border-color: var(--l3-yellow); color: var(--l3-black); }
/* the PDF (= L4) button carries the brand yellow so it is found at a glance (Mod 2026-09-11) */
.l3-pill.primary { background: var(--l3-yellow); border-color: var(--l3-yellow); color: var(--l3-black); font-weight: 700; }
.l3-pill.primary:hover { background: var(--l3-yellow-dark); border-color: var(--l3-yellow-dark); }
/* facts strip: every tile gets a light lift — tinted card, teal icon, bold value — so all six read
   at a glance; ไม่ลงร้าน keeps the stronger teal (Mod 2026-09-11: "highlight a bit for all") */
.l3-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.l3-tile { background: var(--l3-chip-2); border: 1px solid #e4e8ee; border-radius: 10px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; min-height: 78px; box-shadow: 0 1px 2px rgba(10, 13, 18, 0.04); }
.l3-tile .ic { font-size: 24px; color: var(--l3-teal-deep); }
.l3-tile-main { font-size: 18px; color: var(--l3-black); line-height: 1.1; font-weight: 700; }
/* Mod 2026-09-12: บินตรง and ฟูลเซอร์วิส are two DIFFERENT things — the second one is a fact of
   its own, not a footnote under the first. Same weight, and a hairline across the tile so both
   are easy to spot at a glance. Tiles with only one fact (ไม่ลงร้าน, อิสระ 1 วัน) keep the same
   skeleton, so the strip reads parallel across all six. */
.l3-tile-sub { font-size: 17px; color: var(--l3-slate); line-height: 1.1; font-weight: 600; width: 100%; padding-top: 6px; border-top: 1px solid var(--l3-line-faint); }
.l3-tile.good { background: var(--l3-teal-tint); border-color: var(--l3-teal-border); }
.l3-tile.good .ic, .l3-tile.good .l3-tile-main { color: var(--l3-teal-deep); }
.l3-tile.good .l3-tile-sub { color: var(--l3-teal-deep); border-top-color: var(--l3-teal-border); }
.l3-tile.warn { background: #fff1e6; border-color: var(--l3-orange); }
.l3-tile.warn .ic, .l3-tile.warn .l3-tile-main { color: var(--l3-orange); }
.l3-tile.empty { background: var(--l3-white); }
.l3-tile.empty .ic { color: var(--l3-grey-light); }
.l3-tile.empty .l3-tile-main { color: var(--l3-grey-light); font-weight: 400; }

/* ── 2 · gallery (grid-item hooks kept for the lightbox) ── */
.l3-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 200px 200px; gap: 10px; }
/* the old desktop rule (tour-detail.css ≥992px) gives .grid-item-N fixed heights/areas — every
   sizing prop is reset here so the item fills ITS grid cell and never spills into the next block */
.l3v3 .l3-gallery .grid-item { position: relative; overflow: hidden; border-radius: 12px; cursor: pointer; background: var(--l3-teal-tint); grid-column: auto; grid-row: auto; height: 100%; min-height: 0; max-height: none; aspect-ratio: auto; transition: transform 0.2s ease; }
.l3v3 .l3-gallery .grid-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.l3v3 .l3-gallery.n5 .grid-item-1, .l3v3 .l3-gallery.n4 .grid-item-1, .l3v3 .l3-gallery.n3 .grid-item-1 { grid-column: 1; grid-row: 1 / 3; }
.l3v3 .l3-gallery.n4 .grid-item-4 { grid-column: 2 / 4; grid-row: 2; }
.l3v3 .l3-gallery.n3 { grid-template-columns: 2fr 1fr; }
.l3v3 .l3-gallery.n2 { grid-template-columns: 1fr 1fr; grid-template-rows: 300px; }
.l3v3 .l3-gallery.n1 { grid-template-columns: 1fr; grid-template-rows: 380px; }
.l3v3 .l3-gallery .grid-item::after { content: attr(data-more); position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(17, 17, 17, 0.45); color: #fff; font-size: 22px; font-weight: 700; }
/* the place name on each photo (Mod 2026-09-11 "you show highlight place names too", re-confirmed
   2026-09-12 "i want the caption on photos") */
.l3v3 .l3-gallery .l3-gallery-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 10px; background: linear-gradient(180deg, rgba(17, 17, 17, 0), rgba(17, 17, 17, 0.6)); color: #fff; font-size: 18px; font-weight: 600; line-height: 1.2; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 3 · สรุปให้ฟัง ── */
.l3-summary-body { padding: 22px 28px 26px; display: flex; flex-direction: column; gap: 20px; }
.l3-summary-top { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 24px; align-items: start; }
.l3-flight { background: var(--l3-flight-bg); color: var(--l3-flight-fg); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.l3-flight-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--l3-flight-line); }
.l3-flight-head b { font-size: 24px; font-weight: 700; line-height: 1; }
.l3-flight-head span { font-size: 17px; color: var(--l3-flight-muted); }
.l3-flight-airline { display: flex; align-items: center; gap: 8px; font-size: 17px; color: var(--l3-flight-muted); min-height: 0; }
.l3-flight-airline:empty { display: none; }
.l3-flight-airline img { width: 30px; height: 30px; object-fit: contain; border-radius: 6px; background: #fff; }
.l3-leg { display: flex; flex-direction: column; gap: 3px; }
.l3-leg-label { font-size: 16px; color: var(--l3-flight-muted); }
.l3-leg-route { font-size: 22px; font-weight: 700; line-height: 1.1; }
.l3-leg-route .l3-arrow { color: var(--l3-flight-muted); padding: 0 4px; }
.l3-plus { color: var(--l3-flight-accent); font-size: 16px; font-weight: 700; }
.l3-flight-foot { display: flex; align-items: center; gap: 8px; font-size: 17px; color: var(--l3-soft); flex-wrap: wrap; }
.l3-flight-foot span { display: inline-flex; align-items: center; gap: 6px; }
.l3-flight-foot .ic { font-size: 15px; color: var(--l3-flight-accent); }
.l3-sep { color: var(--l3-line); }
.l3-rows { display: flex; flex-direction: column; }
.l3-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--l3-line-faint); font-size: 21px; color: var(--l3-black); line-height: 1.3; }
.l3-row > .ic { font-size: 19px; color: var(--l3-grey); flex: none; }
.l3-row > span { flex: 1; min-width: 0; }
.l3-row:first-child { padding-top: 0; }
.l3-equiv { color: var(--l3-teal-deep); font-size: 0.85em; font-style: normal; }
.l3-money { border-bottom: 0; padding: 10px 0 0; font-size: 19px; color: var(--l3-grey); }
.l3-money > .ic { font-size: 17px; color: var(--l3-grey-light); }
.l3-money b { color: var(--l3-soft); font-weight: 600; }
.l3-money small { font-size: 15px; color: var(--l3-grey-light); }
.l3-places { border-top: 1px solid var(--l3-line-faint); padding-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.l3-places-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.l3-places-head b { font-size: 22px; font-weight: 700; color: var(--l3-black); }
.l3-places-head span { font-size: 19px; color: var(--l3-grey); }
.l3-place-list { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.l3-place { display: inline-flex; align-items: center; gap: 6px; background: var(--l3-teal-tint); border-radius: 50vw; padding: 3px 14px 3px 11px; font-size: 19px; color: var(--l3-teal-deep); font-weight: 600; transition: background-color 0.3s ease; }
.l3-place .ic { font-size: 14px; }
a.l3-place:hover { background: var(--l3-teal-border); }
.l3-minor-label { font-size: 18px; color: var(--l3-grey); }
.l3-place-minor { background: var(--l3-chip); border-radius: 50vw; padding: 2px 13px; font-size: 18px; color: var(--l3-slate); transition: background-color 0.3s ease; }
a.l3-place-minor:hover { background: var(--l3-line-faint); color: var(--l3-teal-deep); }

/* ── 4 · โปรแกรมรายวัน ── */
.l3-day { display: flex; gap: 18px; padding: 18px 24px; border-bottom: 1px solid var(--l3-line-faint); align-items: flex-start; }
.l3-day:last-child { border-bottom: 0; }
.l3-day-disc { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--l3-yellow); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; color: var(--l3-black); }
.l3-day-disc span { font-size: 12px; font-weight: 700; }
.l3-day-disc b { font-size: 19px; font-weight: 700; }
.l3-day-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.l3-day-head { font-size: 21px; color: var(--l3-soft); line-height: 1.35; }
/* one colour = one meaning (Mod 2026-09-11): teal is reserved for ที่เที่ยวหลัก — in the day text only a
   MAJOR place (strong.kw-place) is teal + bold; every other place page link is dark with a dotted
   underline, matching the grey แวะเพิ่ม pills */
.l3-day-head .place-link, .l3-day-list .place-link { color: var(--l3-soft); font-weight: 400; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--l3-grey-light); text-underline-offset: 3px; }
.l3-day-head strong.kw-place .place-link, .l3-day-list strong.kw-place .place-link { color: var(--l3-teal-link); font-weight: 600; text-decoration: none; }
.l3-day-head strong, .l3-day-list strong { font-weight: 600; }
.l3-meal-names { font-size: 18px; color: var(--l3-grey); line-height: 1.3; }
.l3-dchip.meal-special { background: var(--l3-warm); color: var(--l3-warm-text); }
.l3-day-head .kw-meal, .l3-day-head .kw-menu, .l3-day-head .kw-activity, .l3-day-list .kw-meal, .l3-day-list .kw-menu, .l3-day-list .kw-activity { font-weight: 500; }
.l3-day-list { margin: 0; padding: 0 0 0 18px; font-size: 19px; color: var(--l3-soft); line-height: 1.4; display: flex; flex-direction: column; gap: 3px; }
.l3-day-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.l3-dchip { border-radius: 6px; padding: 1px 10px; font-size: 17px; line-height: 1.4; background: var(--l3-chip); color: var(--l3-chip-text); }
.l3-dchip.hotel { background: var(--l3-chip-hotel); color: var(--l3-chip-hotel-text); }
.l3-dchip.hotel .l3-equiv { color: var(--l3-teal-deep); }
.l3-dchip.free { border-radius: 50vw; padding: 1px 12px; font-weight: 600; }
.l3-dchip.opt { background: var(--l3-warm); color: var(--l3-warm-text); border-radius: 50vw; padding: 1px 12px; }
.l3-dchip.shop { background: var(--l3-red-bg); color: var(--l3-red); }
.l3-dchip.act { background: #f3eeff; color: #5b3fa8; }
.l3-dchip.transfer { background: var(--l3-teal-tint); color: var(--l3-teal-deep); border-radius: 50vw; padding: 1px 12px; }
.l3-dchip.meal-free { color: var(--l3-grey); }
.l3-cta { display: flex; }
.l3v3 .l3-cta .button.tour-program-full { font-size: 20px; padding: 8px 22px !important; height: auto; text-transform: none; }

/* promo banner: the existing block, boxed into the column */
.l3-promo .line-promo-banner { border-radius: 16px; overflow: hidden; }
/* …and COMPACT (Mod 2026-09-13: "the section area of free bag is too large"). tour-detail.css sizes
   it as the old page's full-bleed hero — a 560px photo and an 80px headline — which inside this
   column made one promo card taller than the whole summary card. Same markup, same images. */
.l3-promo .promo-wrap-text { gap: 4px; }
.l3-promo .line-promo-subtitle { font-size: 18px; }
.l3-promo .line-promo-title, .l3-promo .promo-wrap-text h2 { font-size: clamp(28px, 3vw, 40px); }
.l3-promo .line-promo-description { font-size: 18px; padding-top: 6px; }
.l3-promo .line-promo-btn { font-size: 18px; padding: 10px 20px; margin-top: 12px; width: auto; align-self: flex-start; }
@media (min-width: 992px) {
  .l3-promo .line-promo-banner { padding: 0 0 0 40px; }
  .l3-promo .line-promo-container-img { height: 260px; width: 100%; }
  .l3-promo .promo-wrap-text { padding: 20px 0; max-width: 420px; flex-shrink: 0; }
}
@media (max-width: 991px) {
  .l3-promo .line-promo-container-img-mb { height: 200px; overflow: hidden; }
  .l3-promo .promo-wrap-text { padding: 14px 20px 0; }
  .l3-promo .line-promo-container { padding-bottom: 20px; }
}
.l3-days-note { margin: 0; padding: 12px 24px; font-size: 15px; color: var(--l3-grey); border-bottom: 1px solid var(--l3-line-faint); }

/* ── 6 · วันที่เดินทางและราคา ── */
/* the old swiper rule pads 36px for arrows and masks the gutters — that mask cut the selected chip's
   left edge (Mod 2026-09-11 "the box is cutted"); v3 has no arrows, so no gutter and no mask */
.l3v3 .date-price-swiper { padding: 3px 3px !important; overflow: hidden !important; }
.l3v3 .date-price-swiper::before, .l3v3 .date-price-swiper::after { display: none !important; }
.l3-months .swiper-slide { width: auto; margin-right: 10px; }
.l3-month { display: block; background: var(--l3-white); border: 1px solid var(--l3-line); border-radius: 12px; padding: 8px 22px; text-align: center; color: var(--l3-soft); transition: border-color 0.3s ease, color 0.3s ease; }
.l3-month-l { display: block; font-size: 17px; color: var(--l3-grey); line-height: 1.2; }
.l3-month-p { font-size: 22px; font-weight: 700; line-height: 1.2; }
.l3-month.active { border: 2px solid var(--l3-coral); padding: 7px 21px; }
.l3-month.active .l3-month-p { color: var(--l3-coral); }
.l3v3 .date-price-swiper .swiper-button-prev, .l3v3 .date-price-swiper .swiper-button-next { display: none; }
.l3-date-row { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--l3-line-faint); flex-wrap: wrap; }
.l3-date-row:last-child { border-bottom: 0; }
.l3-date-main { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 4px; }
.l3-date-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.l3-date { font-size: 22px; color: var(--l3-black); font-weight: 700; }
.l3-date-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.l3-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 50vw; padding: 0 11px; font-size: 17px; line-height: 1.5; background: var(--l3-chip); color: var(--l3-chip-text); }
.l3-chip .ic { font-size: 13px; }
.l3-chip.holiday { background: var(--l3-warm); color: var(--l3-warm-text); font-weight: 600; }
.l3-chip.weekend { background: var(--l3-teal-tint); color: var(--l3-teal-deep); }
.l3-chip.red { background: var(--l3-red-bg); color: var(--l3-red); font-weight: 700; }
.l3-date-cal { margin: 2px 0 0; font-size: 16px; color: var(--l3-grey); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.l3-date-cal:hover { color: var(--l3-teal-deep); }
.l3-date-side { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.l3-seats { font-size: 19px; color: var(--l3-grey); }
.l3-seats.low { color: var(--l3-red); font-weight: 700; }
.l3-seats.out { color: var(--l3-red); }
.l3-from { font-size: 19px; color: var(--l3-grey); }
.l3-price { font-size: 26px; color: var(--l3-soft); font-weight: 700; }
.l3-price.sale { color: var(--l3-coral); }
.l3-price-old { font-size: 18px; color: var(--l3-grey-light); }
.l3-book { display: inline-flex; align-items: center; justify-content: center; background: var(--l3-yellow); color: var(--l3-black); border-radius: 50vw; padding: 6px 20px; font-size: 20px; font-weight: 700; line-height: 1.3; transition: background-color 0.3s ease; }
.l3-book:hover { background: var(--l3-yellow-dark); color: var(--l3-black); }

/* ── testimonials: keep the existing block inside the column ── */
.l3-testimonials { padding-top: 12px; }

/* ── 9 · FAQ ── */
.l3-faq { padding: 6px 24px; }
.l3-faq-item { border-bottom: 1px solid var(--l3-line-faint); }
.l3-faq-item:last-child { border-bottom: 0; }
.l3-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; background: none; border: 0; text-align: left; cursor: pointer; font-family: inherit; font-size: 21px; font-weight: 500; color: var(--l3-black); line-height: 1.3; }
.l3-faq-q .ic { font-size: 15px; color: var(--l3-grey); flex: none; }
.l3-faq-a { max-height: 0; overflow: hidden; transition: max-height 200ms ease; }
.l3-faq-a p { font-size: 20px; color: var(--l3-grey); line-height: 1.4; padding: 0 0 13px; }

/* ── 10 · LINE box ── */
.l3-line { margin: var(--l3-gap) 0 40px; background: var(--l3-teal); border-radius: 16px; padding: 18px 26px; display: flex; align-items: center; gap: 18px; color: #fff; }
.l3-line-qr { width: 64px; height: 64px; border-radius: 10px; background: #fff; flex: none; object-fit: contain; }
.l3-line-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.l3-line-text b { font-size: 23px; font-weight: 700; line-height: 1.15; }
.l3-line-text span { font-size: 18px; color: #dff7f8; }
.l3-line .l3-book { padding: 7px 22px; }

/* mobile bottom bar (existing #tour-nav-bottom) gains the from-price */
.l3-nav-price { display: flex; flex-direction: column; line-height: 1.05; padding-right: 8px; }
.l3-nav-price span { font-size: 14px; color: var(--l3-grey); }
.l3-nav-price b { font-size: 22px; color: var(--l3-soft); font-weight: 700; }

/* ── tablet (768–1023): tiles 3×2, summary stacks ── */
@media (max-width: 1023px) {
  .l3-wrap { padding: 0 24px; }
  .l3-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .l3-summary-top { grid-template-columns: minmax(0, 1fr); }
  .l3-name { font-size: 32px; }
}

/* ── mobile (≤767; designed at 390) ── */
@media (max-width: 767px) {
  .l3v3 { --l3-gap: 26px; }
  .l3-wrap { padding: 0 16px; }
  .l3-page { padding: 18px 0 24px; }
  .l3-card { border-radius: 14px; }
  .l3-card-bar { height: 4px; }
  .l3-sec { gap: 12px; }
  .l3-sec-head { gap: 10px; }
  .l3-sec-icon { width: 30px; height: 30px; border-radius: 7px; font-size: 17px; }
  .l3-sec-title { font-size: 24px; }
  .l3-sec-sub { font-size: 16px; }
  .l3-title { flex-wrap: wrap; gap: 12px; }
  .l3-cover { width: 96px; height: auto; border-radius: 10px; }
  .l3-title-col { flex: 1 1 0; gap: 6px; }
  .l3-title-top { gap: 8px; }
  .l3-code { font-size: 16px; }
  .l3-type { font-size: 15px; padding: 0 10px; }
  .l3-name { font-size: 25px; }
  .l3-pills { width: 100%; order: 3; }
  .l3-pill { font-size: 17px; padding: 5px 14px; }
  .l3-pill .ic { font-size: 14px; }
  .l3v3 .l3-gallery .l3-gallery-cap { font-size: 14px; padding: 18px 8px 6px; }
  .l3-tiles { width: 100%; order: 4; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .l3-tile { padding: 9px 4px; gap: 3px; min-height: 0; }
  .l3-tile .ic { font-size: 22px; }
  .l3-tile-main { font-size: 17px; }
  .l3-tile-sub { font-size: 15px; padding-top: 4px; }
  .l3-gallery, .l3v3 .l3-gallery.n3, .l3v3 .l3-gallery.n2, .l3v3 .l3-gallery.n1 { grid-template-columns: 1fr 1fr; grid-template-rows: 120px 58px; gap: 6px; }
  .l3v3 .l3-gallery.n1 { grid-template-rows: 160px; }
  .l3v3 .l3-gallery.n2 { grid-template-rows: 120px 58px; }
  .l3v3 .l3-gallery .grid-item { border-radius: 10px; }
  .l3v3 .l3-gallery .grid-item-1 { grid-column: 1 / 3 !important; grid-row: 1 !important; }
  .l3v3 .l3-gallery .grid-item-2, .l3v3 .l3-gallery .grid-item-3 { grid-column: auto !important; grid-row: 2 !important; }
  .l3v3 .l3-gallery .grid-item:nth-child(n + 4) { display: none; }
  .l3v3 .l3-gallery .grid-item-3[data-more]::after { display: flex; }
  .l3-summary-body { padding: 14px 16px 16px; gap: 12px; }
  .l3-summary-top { gap: 12px; }
  .l3-flight { padding: 16px 18px; gap: 12px; }
  .l3-flight-head b { font-size: 22px; }
  .l3-flight-head span { font-size: 16px; }
  .l3-leg-label { font-size: 15px; }
  .l3-leg-route { font-size: 21px; }
  .l3-flight-foot { font-size: 16px; }
  .l3-row { font-size: 19px; padding: 10px 0; gap: 10px; }
  .l3-row > .ic { font-size: 17px; }
  .l3-money { font-size: 17px; padding-top: 10px; }
  .l3-money small { font-size: 14px; }
  .l3-places { padding-top: 14px; gap: 10px; }
  .l3-places-head b { font-size: 20px; }
  .l3-places-head span { font-size: 17px; }
  .l3-place-list { gap: 6px; }
  .l3-place { font-size: 17px; padding: 3px 12px 3px 10px; }
  .l3-place .ic { font-size: 13px; }
  .l3-minor-label, .l3-place-minor { font-size: 16px; }
  .l3-place-minor { padding: 2px 11px; }
  .l3-day { gap: 12px; padding: 14px 16px; }
  .l3-day-disc { width: 40px; height: 40px; }
  .l3-day-disc span { font-size: 10px; }
  .l3-day-disc b { font-size: 17px; }
  .l3-day-body { gap: 7px; }
  .l3-day-head { font-size: 19px; }
  .l3-day-list { font-size: 17px; }
  .l3-dchip { font-size: 15px; padding: 1px 9px; }
  .l3-dchip.free, .l3-dchip.opt, .l3-dchip.transfer { padding: 1px 11px; }
  .l3v3 .l3-cta .button.tour-program-full { font-size: 18px; padding: 7px 18px !important; }
  .l3-promo .line-promo-banner { border-radius: 14px; }
  .l3-month { padding: 6px 16px; border-radius: 10px; }
  .l3-month.active { padding: 5px 15px; }
  .l3-month-l { font-size: 15px; }
  .l3-month-p { font-size: 20px; }
  .l3-date-row { padding: 14px 16px; gap: 8px; flex-direction: column; align-items: stretch; }
  .l3-date-main { min-width: 0; gap: 6px; }
  .l3-date-line { justify-content: space-between; }
  .l3-date { font-size: 20px; }
  .l3-chip { font-size: 15px; padding: 0 10px; }
  .l3-chip .ic { font-size: 11px; }
  .l3-date-cal { font-size: 15px; }
  .l3-date-side { margin-left: 0; gap: 10px; }
  .l3-date-side .l3-from { margin-left: auto; }
  .l3-seats, .l3-from { font-size: 17px; }
  .l3-price { font-size: 24px; }
  .l3-book { font-size: 18px; padding: 5px 16px; }
  .l3-faq { padding: 4px 16px; }
  .l3-faq-q { font-size: 19px; padding: 12px 0; gap: 10px; }
  .l3-faq-q .ic { font-size: 13px; }
  .l3-faq-a p { font-size: 18px; padding-bottom: 12px; }
  .l3-line { margin: 26px 0 24px; border-radius: 14px; padding: 16px 18px; flex-wrap: wrap; gap: 12px; }
  .l3-line-qr { width: 56px; height: 56px; }
  .l3-line-text { flex: 1 1 200px; }
  .l3-line-text b { font-size: 20px; }
  .l3-line-text span { font-size: 16px; }
  .l3-line .l3-book { padding: 6px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .l3v3 * { transition: none !important; }
}