/*
 * Щастливците public website — site-wide styles.
 *
 * FTT-20: rebuilt on the 2026-09 design export
 * (design/2026-09 Site/Shtastlivcite Site.dc.html) and its contract,
 * docs/FRONTEND-DESIGN.md. One fixed palette (no more seasonal theme, no
 * ambient canvas) — bordo primary, teal/green/amber/navy accents, warm
 * off-white background, Literata + Onest.
 *
 * No build step: this file is served as-is by STATICFILES_DIRS. Keep it
 * readable over clever. Every colour literal lives in :root — nowhere else
 * in this file, and nowhere in a template, may a #hex/rgb()/named colour
 * appear (qa/tests/test_ui_no_hardcoded_colors.py-style discipline, applied
 * here to the public site by hand since that test targets the admin panel).
 */

/* ── Design tokens (the only place a colour literal may appear) ──────── */

:root {
  /* Surfaces */
  --bg: #EDE6DC; /* 2026-09-27 update (FTT-30): warm sand, was #FBF8F3 */
  --surface: #FFFFFF;

  /* Text */
  --ink: #2A1D1F;
  --text: #4A3A3C;
  --muted: #5C4B4D;

  /* Hairlines */
  --line: #D8CBBB; /* 2026-09-27 update (FTT-30): was #EDE5DA */
  --line-2: #E6DCCF;

  /* Placeholders / borders */
  --sand: #DCCFBF;
  --sand-2: #E6DCCF;
  /* Idle chip/select border on the sand background (FTT-30) — kept separate
     from --sand, which still borders white inputs/placeholders at #DCCFBF. */
  --chip-line: #C9B9A6;

  /* Brand */
  --bordo: #7A1F2B;
  --bordo-deep: #5E1520;
  --teal: #1E8C93;
  --teal-deep: #1E6F75;
  --teal-deeper: #16585D;
  --green: #3F7D4A;
  --amber: #F2A33A;
  --amber-hover: #FFB84F;
  --navy: #1F4E79;
  --mint: #EFF6F5;
  /* 2026-09-27 update (FTT-32): "Промоция" badge / old-price strike / current
     price / "-N%" image badge -- no existing token was this red. */
  --promo: #C8372D;
  /* FTT-62: text on a --promo / --bordo / --teal fill (the "-N%" pill) */
  --on-accent: #FFFFFF;

  /* Testimonial tints */
  --tint-amber: #F6EAD9;
  --tint-teal: #E3F0EF;
  --tint-bordo: #F3E3E3;
  /* Home Блог band (owner 2026-11-05): the dotted world map, bordo lightened well over --tint-bordo */
  --map-dots: #E4C6CA;
  /* Team-photo tints (FTT-20 tokenises the two extra hexes the design used
     inline for the 3rd/4th member fallback) */
  --tint-green: #E4E9D8;
  --tint-sand: #F4E4CC;

  /* Text-on-dark */
  --on-bordo-soft: #F4E4E2;
  --on-bordo-line: rgba(255, 255, 255, .22);
  --on-teal-soft: #E3F2F1;

  /* Footer (owner 2026-11-05: the header's bordo, was #2A1518; the same value as --bordo, spelled out so
     design-system/tokens/contrast.py can read it) */
  --footer-bg: #7A1F2B;
  --footer-ink: #EADBD8;
  --footer-muted: #E0C6C2; /* lighter on the bordo footer (was #B89A96 on #2A1518): 4.5:1 for the small print */
  --footer-line: rgba(255, 255, 255, .12);

  /* Notes / feedback */
  --ok-bg: #E4F0E6;
  --ok-ink: #2F5E38;

  /* Overlays */
  --scrim: rgba(42, 21, 24, .55);
  /* FTT-34: the gallery lightbox backdrop -- darker than --scrim (nearly
     opaque, matching the design's photo-viewer overlay) so the photo reads
     against it at any page's background colour. */
  --scrim-strong: rgba(20, 10, 12, .92);
  --header-bg: rgba(237, 230, 220, .94); /* 2026-09-27 update (FTT-30): was rgba(251,248,243,.94) */
  --cover-scrim: linear-gradient(0deg, rgba(30, 16, 18, .75) 0%, rgba(30, 16, 18, .2) 50%, rgba(30, 16, 18, 0) 75%);
  --hero-scrim: linear-gradient(90deg, rgba(30, 16, 18, .78) 0%, rgba(30, 16, 18, .35) 45%, rgba(30, 16, 18, 0) 70%);
  --shadow-lift: 0 12px 30px rgba(42, 29, 31, .16);
  --cta-img-highlight: radial-gradient(circle at 75% 25%, rgba(255, 255, 255, .16) 0%, transparent 60%);
  --input-dark-bg: rgba(255, 255, 255, .08);
  --input-dark-border: rgba(255, 255, 255, .3);
  --shadow-dock: 0 10px 30px rgba(0, 0, 0, .25);

  /* Type */
  --font-display: 'Literata', Georgia, serif;
  --font-body: 'Onest', system-ui, sans-serif;
  /* FTT-169: settable in the admin (Уебсайт -> Шрифтове); the values here are the defaults. */
  --fs-root: 100%;
  --heading-scale: 1;
  --heading-weight: 600;
  --bold-weight: 700;
  --body-line-height: normal;

  /* Layout (docs/FRONTEND-DESIGN.md "Layout contract"): one container,
     90rem, centred. Wider screens (2K, 4K) get margins, never a wider layout. */
  --wrap: 90rem;
  /* Page Pochivki v2 / HANDOFF.md (owner, 2026-10-12): the page content (everything but the header, the footer
     and full-bleed cover photos) is 90% of the screen wide, 5% page background each side (owner 2026-11-04, was 80%); desktop only, the
     phone block sets it back to --wrap. The header and the footer keep --wrap. */
  --wrap-content: calc(90vw + 2 * var(--gutter));
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  /* owner 2026-11-05: more room between sections (was clamp(5rem, 10vw, 8.5rem) / clamp(4.5rem, 9vw, 7.5rem)) */
  --section-pad: clamp(6rem, 11vw, 10.5rem);
  --section-pad-tight: clamp(5.5rem, 10vw, 9.5rem);
  /* Room the footer/cookie banner leave for the phone dock (FTT-28); set on
     `.sht-has-dock` at phone widths, 0 everywhere else. */
  --dock-space: 0rem;

  /* Radii */
  --radius-sm: .875rem;
  --radius-md: 1.125rem;
  --radius-lg: 1.375rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;

  /* FTT-223: the cruise page's sea (the map container, FTT-224 paints on it): the teal accent thinned into the white surface */
  --cruise-sea: color-mix(in oklch, var(--teal) 18%, var(--surface));
}

/* ── Reset-ish basics ─────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: var(--fs-root); }
body {
  margin: 0;
  font-family: var(--font-body);
  line-height: var(--body-line-height);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; } /* FTT-209: every <img> carries width/height (the box is reserved); height: auto keeps its ratio */
a { color: var(--bordo); text-decoration: none; }
a:hover { color: var(--teal); }
button { font-family: inherit; cursor: pointer; }
select, input, textarea { font-family: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--heading-weight); letter-spacing: -.02em; margin: 0; overflow-wrap: anywhere; }
/* FTT-187: a flex/grid child may shrink below its longest word; the long word then wraps instead of pushing the page wide (large text, zoom). */
.sht-section__head > *, .sht-brand, .sht-brand__text { min-width: 0; }
.sht-brand__name, .sht-bar__brand span, .sht-consent > span, .sht-filter-row__count { overflow-wrap: anywhere; min-width: 0; }
b, strong { font-weight: var(--bold-weight); }
p { margin: 0; }

/* No horizontal scrolling at any width — the one hard layout rule. */
html, body { max-width: 100%; overflow-x: clip; }
/* Real height of the sticky header (desktop 68.4px, phone 63px, measured), rounded up/matched.
   Anchors and the phone filter row clear it: `html { scroll-padding-top }` keeps #trips,
   #zapitvane, #dest-offers and scrollIntoView() from landing under it. */
:root { --header-h: 4.3125rem; }
html { scroll-padding-top: calc(var(--header-h) + .5rem); }
/* `clip` clips without making body a scroll container, so position: sticky (header, phone
   filter row, continent sidebar) sticks to the window. Browsers without `clip` (Chrome < 90,
   Safari < 16, Firefox < 81) fall back to `hidden`: no sideways scroll, but nothing sticky there. */
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

:focus-visible { outline: .1875rem solid var(--teal); outline-offset: .1875rem; border-radius: .375rem; }

.sht-visually-hidden {
  position: absolute; width: .0625rem; height: .0625rem; padding: 0; margin: -.0625rem;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Layout ────────────────────────────────────────────────────────────── */

.sht-wrap { max-width: var(--wrap-content); margin: 0 auto; padding: 0 var(--gutter); }

.sht-section { max-width: var(--wrap-content); margin: 0 auto; padding: var(--section-pad) var(--gutter) 0; }
.sht-section--tight { padding-top: var(--section-pad-tight); }
.sht-section--reviews-list { padding-top: clamp(2.5rem, 5vw, 4rem); } /* FTT-120: /otzivi list sits close under the hero, as the export's tight section */

/* FTT-180: a `.sht-section` has no bottom padding (the next block brings its own top padding); where the next block
   is the cozy band or the footer itself, the cards' last row would touch it */
.sht-section + .sht-cozy, .sht-section + .sht-footer { margin-top: var(--section-pad-tight); }
.sht-pagehead + .sht-cozy { margin-top: clamp(1.5rem, 4vw, 3rem); } /* /pochivki with no cards: the head sat on the band */

/* FTT-455 (home v5/v6, design "2a"): the section divider. One thin rule in the content column, halfway through the
   gap above a page-level section (half the section padding below the previous one and half above its heading), drawn
   as a pseudo-element: no markup, not in the accessibility tree, the same on every public page. Left out where the
   section follows the page head, a cover photo or the search/filter row of its own page (first section under them),
   or carries `sht-section--no-rule`. The 2c variant (line with the turtle) is not built. */
.sht-section, .sht-cta { position: relative; --divider-top: calc(var(--section-pad) / 2); }
.sht-section--tight { --divider-top: calc(var(--section-pad-tight) / 2); }
.sht-section:not(:first-child)::before, .sht-cta:not(:first-child)::before,
#destinations:not(.sht-section) > .sht-section:first-child::before,
.sht-section-fonts:not(:first-child) > :is(.sht-section, .sht-cta):first-child::before {
  content: ""; position: absolute; top: var(--divider-top); left: var(--gutter); right: var(--gutter);
  border-top: 1px solid var(--line); pointer-events: none;
}
/* a full-bleed band has no padding box in the column: its line sits in the margin above it (`::after`, the map band's
   `::before` is its mask). The bordo band gets the section-pad margin the design gives it (Home.dc.html). */
.sht-band { --divider-gap: calc(var(--section-pad) / 2); }
.sht-band--spaced { --divider-gap: calc(var(--section-pad-tight) / 2); }
.sht-section + .sht-band--bordo, .sht-band--mint:not(.sht-band--spaced):not(:first-child), .sht-band.sht-band--map.sht-band--spaced { margin-top: var(--section-pad); }
.sht-cover + .sht-band.sht-band.sht-band.sht-band { margin-top: 0; } /* beats the mint rule above (0,4,0 vs 0,3,0) */
.sht-band:not(:first-child)::after, .sht-section-fonts:not(:first-child) > .sht-band:first-child::after {
  content: ""; position: absolute; top: calc(-1 * var(--divider-gap)); pointer-events: none;
  left: calc(max(0rem, (100% - var(--wrap-content)) / 2) + var(--gutter));
  right: calc(max(0rem, (100% - var(--wrap-content)) / 2) + var(--gutter));
  border-top: 1px solid var(--line);
}
.sht-band--bordo, .sht-band--mint { position: relative; }
.sht-band.sht-band--map.sht-band--spaced { --divider-gap: calc(var(--section-pad) / 2); }
:is(.sht-pagehead, .sht-cover) + .sht-band::after, .sht-band.sht-section--no-rule::after { content: none; }
:is(.sht-pagehead, .sht-cover, .sht-ex-top, .sht-hsearch-main, .sht-cruise-main, .sht-trip-tabs) + :is(.sht-section, .sht-cta)::before,
:is(.sht-pagehead, .sht-cover, .sht-ex-top, .sht-hsearch-main, .sht-cruise-main, .sht-trip-tabs) + .sht-section-fonts > :is(.sht-section, .sht-cta):first-child::before,
:is(.sht-pagehead, .sht-cover) + .sht-section-fonts > .sht-band:first-child::after,
.sht-section--no-rule::before, .sht-cta--flush::before { content: none; }
.sht-band { background: var(--bg); }
.sht-band--bordo { background: var(--bordo); color: var(--surface); }
.sht-band.sht-band--spaced { margin-top: var(--section-pad-tight); }
.sht-band__note { margin-top: 1.5rem; } /* FTT-97: the holiday band's price footnote */
.sht-band--mint { background: transparent; } /* 2026-09-27 update (FTT-30): tinted bands sit on --bg now; --mint stays for .sht-cozy */
.sht-band__inner { max-width: var(--wrap-content); margin: 0 auto; padding: clamp(3.5rem, 7vw, 6rem) var(--gutter); }
/* Home Блог (owner 2026-11-05, atlas FTT-455 / home v5 "1d"): a light-bordo band with the world map behind the cards,
   solid continents plus latitude/longitude lines (img/world-atlas.svg, the designer's file; the earlier dotted
   img/world-dots.svg stays on disk). The map is a mask, so its colour stays the --map-dots token; `cover` keeps it
   filling the band at every width. */
.sht-band--map { position: relative; isolation: isolate; background: var(--tint-bordo); }
.sht-band--map::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--map-dots);
  -webkit-mask: url("img/world-atlas.2f28c85bda75.svg") center / cover no-repeat; mask: url("img/world-atlas.2f28c85bda75.svg") center / cover no-repeat;
}

.sht-section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1.75rem;
}
.sht-section__title {
  font-size: calc(clamp(2rem, 3.6vw, 3rem) * var(--heading-scale)); font-weight: 600; line-height: 1.05; letter-spacing: -.02em;
}
.sht-section__lead { margin: 0; font-size: calc(1.0625rem * var(--text-scale, 1)); line-height: 1.55; color: var(--muted); max-width: 27.5rem; }
.sht-section__more {
  font-weight: 600; font-size: .9375rem; color: var(--bordo);
  border-bottom: 1.5px solid currentColor; padding-bottom: .125rem; white-space: nowrap;
}
.sht-section__more:hover { color: var(--teal); }

.sht-eyebrow {
  margin: 0; font-size: .8125rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600; color: var(--teal);
}
.sht-eyebrow--amber { color: var(--amber); }
/* A breadcrumb link inside an eyebrow (FTT-34's "Начало / Отзиви") keeps the
   eyebrow's own colour rather than the site-wide bordo link colour. */
.sht-eyebrow a { color: inherit; }
.sht-eyebrow a:hover { color: var(--bordo); }

/* ── Buttons (`.sht-btn`) ─────────────────────────────────────────────── */

.sht-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  text-decoration: none; font-weight: 600; font-size: 1rem; line-height: 1.1;
  padding: 1.0625rem 1.75rem; border-radius: var(--radius-pill); border: 0; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.sht-btn--primary { background: var(--bordo); color: var(--surface); }
.sht-btn--primary:hover { background: var(--bordo-deep); color: var(--surface); }
.sht-btn--dark { background: var(--ink); color: var(--surface); }
.sht-btn--dark:hover { background: var(--bordo-deep); color: var(--surface); }
.sht-btn--outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.sht-btn--outline:hover { background: var(--ink); color: var(--surface); }
.sht-btn--outline-light { background: transparent; color: var(--surface); border: 1.5px solid currentColor; }
.sht-btn--outline-light:hover { background: var(--surface); color: var(--teal-deep); }
.sht-btn--light { background: var(--surface); color: var(--bordo); }
.sht-btn--light:hover { background: var(--on-bordo-soft); color: var(--bordo); }
.sht-btn--amber { background: var(--amber); color: var(--ink); font-weight: 700; }
.sht-btn--amber:hover { background: var(--amber-hover); color: var(--ink); }
.sht-btn--ghost {
  background: none; border: 0; color: var(--bordo); font-weight: 700; font-size: .875rem;
  padding: .375rem 0; border-radius: 0;
}
.sht-btn--ghost:hover { color: var(--teal); background: none; }
.sht-btn--sm { padding: .75rem 1.25rem; font-size: .875rem; }
.sht-btn--block { display: flex; width: 100%; }
.sht-btn[disabled], .sht-btn.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* ── Chips (`.sht-chips` > `.sht-chip`) ──────────────────────────────── */

.sht-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
/* FTT-43: optional text label as the row's first item (destination page). Hidden on phones, where the sheet's kicker names the group. */
.sht-chips__label { font-size: .875rem; font-weight: 600; color: var(--text); margin-right: .375rem; }
.sht-chip {
  display: inline-flex; align-items: center; border-radius: var(--radius-pill);
  border: 1.5px solid var(--chip-line); background: transparent; color: var(--ink);
  font-size: .875rem; font-weight: 600; padding: .625rem 1.125rem; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.sht-chip:hover { border-color: var(--ink); }
.sht-chip.is-active { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* ── Badge (`.sht-badge`) — corner label on image cards ──────────────── */

.sht-badge {
  position: absolute; top: .875rem; left: .875rem; border-radius: var(--radius-pill);
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; padding: .375rem .6875rem;
  pointer-events: none; color: var(--surface);
}
.sht-badge--green { background: var(--green); color: var(--surface); }
.sht-badge--amber { background: var(--amber); color: var(--ink); }
.sht-badge--bordo { background: var(--bordo); color: var(--surface); }
.sht-badge--teal { background: var(--teal); color: var(--surface); }
.sht-badge--navy { background: var(--navy); color: var(--surface); }
.sht-badge--promo { background: var(--promo); color: var(--surface); }
.sht-badge--ink { background: var(--ink); color: var(--surface); }
.sht-badge--muted { background: var(--muted); color: var(--surface); }

/* Card image "-N%" discount corner (FTT-32) -- top-right, mirrors the
   top-left `.sht-badge`; only rendered when `trip.is_promo`. */
.sht-card__discount {
  position: absolute; top: .875rem; right: .875rem; border-radius: var(--radius-sm);
  font-size: .9375rem; font-weight: 800; padding: .4375rem .6875rem;
  pointer-events: none; background: var(--promo); color: var(--surface);
  box-shadow: var(--shadow-lift);
}

/* Own-trip label „Авторска екскурзия“ (FTT-436, D521 A; was a 45-degree band, owner 2026-10-06): a horizontal bordo pill in the
   image's top-left corner, same place, size and shape as `.sht-badge`. The badge moves to the bottom-left. */
.sht-card__ribbon {
  position: absolute; top: .875rem; left: .875rem; z-index: 1; border-radius: var(--radius-pill);
  max-width: calc(100% - 6.5rem); white-space: normal; line-height: 1.25;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; padding: .375rem .6875rem;
  background: var(--bordo); color: var(--surface); pointer-events: none;
}
.sht-card__img--own .sht-badge { top: auto; bottom: .875rem; }
/* FTT-312: the kind tag (Екскурзия / Почивка / Круиз) of a /search card: layout only, the colour is a `.sht-badge--*` modifier. */
.sht-card__img .sht-badge--kind { top: auto; left: auto; right: .875rem; bottom: .875rem; }

/* ── Offer / trip card (`.sht-card`) ─────────────────────────────────── */

/* The fixed-count variant of the grid below: exactly `--cols` equal columns, no minimum. For a box that sizes itself
   to its content (a stat box in a flex column), where the fluid rule's percentage minimum would collapse it.
   Before the fluid rule so that a box that is in both lists keeps the fluid one. */
.sht-facts {
  --cols: 2; --col-gap: 1px; --row-gap: 1px;
  display: grid; gap: var(--row-gap) var(--col-gap);
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}
/* THE GRID (FTT-187, D31). Every grid of equal columns on the site is this one rule: the column count is
   one variable and the cards share the row, so 3 -> 9 columns is `--cols: 9` and the cards simply get
   narrower in the same space.
     --cols      the most columns (default: as many as fit)
     --col-min   the narrowest a column may get; below that the grid drops a column, no breakpoint
     --fit       auto-fit (an empty track collapses, the cards stretch) or auto-fill (the track stays)
     --col-gap / --row-gap   the gaps; a grid with a `--cols` limit sets them here, not with `gap`
   A new grid is `class="sht-grid"` (or a rule added to this list) plus those variables. Grids whose columns are
   not equal (an icon column, the calendar's 7 days, a two-part head, a sidebar) keep their own
   `grid-template-columns` in the rule of their component. */
.sht-grid, .sht-grid--2, .sht-grid--3, .sht-grid--4,
.sht-hero, .sht-search__fields, .sht-cozy__inner, .sht-cats, .sht-why, .sht-dests--grid, .sht-articles,
.sht-article--hero, .sht-quotes, .sht-review-gallery, .sht-cta__box, .sht-pagehead, .sht-gallery, .sht-team,
.sht-values, .sht-story, .sht-dest-intro, .form-row, .sht-footer__grid, .sht-prose .sht-tip__facts, .sht-trip-prices, .sht-labels__tiles,
.sht-cruise-facts {
  --cols: 99; --col-min: 17rem; --fit: auto-fit; --col-gap: 1.375rem; --row-gap: 1.75rem;
  display: grid; gap: var(--row-gap) var(--col-gap);
  grid-template-columns: repeat(var(--fit), minmax(min(100%, max(var(--col-min), (100% - (var(--cols) - 1) * var(--col-gap)) / var(--cols) - .002rem)), 1fr));
}
.sht-grid { --fit: auto-fill; }
.sht-grid--2, .sht-grid--3, .sht-grid--4 { --fit: auto-fill; --cols: 2; --col-min: 15rem; }
.sht-grid--3 { --cols: 3; }
.sht-grid--4 { --cols: 4; }
/* Country cards hold less than a trip card, so beside the continent sidebar
   they may get narrower before a column is dropped. */
.sht-continents-grid .sht-grid--4 { --col-min: 12.5rem; }

.sht-card {
  display: flex; flex-direction: column; gap: .875rem;
  text-decoration: none; color: var(--ink);
}
.sht-card[hidden] { display: none; }
.sht-card:hover { color: var(--ink); }
.sht-card__img {
  position: relative; aspect-ratio: 4 / 3.2; border-radius: var(--radius-md); overflow: hidden;
  background-color: var(--sand-2); background-size: cover; background-position: center;
}
.sht-card__body { display: flex; flex-direction: column; gap: .375rem; }
.sht-card__kicker {
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--teal);
}
.sht-card__title { font-size: calc(1.3125rem * var(--heading-scale)); font-weight: 600; line-height: 1.2; text-wrap: balance; }
.sht-card__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.sht-card__meta { font-size: calc(.875rem * var(--text-scale, 1)); color: var(--muted); }
.sht-card__footer {
  margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem .75rem; border-top: 1px solid var(--line-2); padding-top: .875rem;
}
.sht-card__footer .sht-btn--ghost { margin-left: auto; }
.sht-card__pricebox { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
/* FTT-62: the price is the first thing in the footer -- 1.75rem bordo display
   figure, small muted "от" on the same baseline (owner brief 2026-10-02). */
.sht-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .375rem; font-size: calc(.875rem * var(--text-scale, 1)); color: var(--muted); }
.sht-card__price b { font-family: var(--font-display); font-size: calc(1.75rem * var(--heading-scale)); line-height: 1.15; font-weight: var(--bold-weight); color: var(--bordo); }
/* Promo: old price struck on its own line (--muted, 1rem), new price in --promo
   with a "-N%" pill after it. */
.sht-card__price--promo b { color: var(--promo); }
.sht-card__price-old {
  font-size: 1rem; color: var(--muted); text-decoration: line-through;
  text-decoration-color: var(--promo); text-decoration-thickness: 2px;
}
.sht-card__save {
  align-self: center; border-radius: 999px; padding: .125rem .5rem;
  font-size: .8125rem; font-weight: 800; line-height: 1.3;
  background: var(--promo); color: var(--on-accent);
}

.sht-card--boxed {
  background: var(--surface); border-radius: var(--radius-lg); padding: .625rem .625rem 1.125rem;
}
.sht-card--boxed .sht-card__footer { border-top: 0; }
.sht-card--boxed .sht-card__img { border-radius: var(--radius-sm); aspect-ratio: 4 / 3; }
.sht-card--boxed .sht-card__body, .sht-card--boxed .sht-card__footer { padding-left: .375rem; padding-right: .375rem; }

.sht-carousel { display: flex; gap: 1.125rem; overflow-x: auto; padding-bottom: .625rem; scroll-snap-type: x proximity; }
.sht-carousel .sht-card { flex: 0 0 17rem; scroll-snap-align: start; }

.sht-card__desc { font-size: calc(.8125rem * var(--text-scale, 1)); color: var(--muted); line-height: 1.5; }
.sht-card__desc p { margin: 0; }

/* ── Hero (home, split — `.sht-hero`) ────────────────────────────────── */

.sht-hero {
  max-width: var(--wrap-content); margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) 0;
  display: grid; --col-min: 23.75rem;
  gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
}
.sht-hero__copy { display: flex; flex-direction: column; gap: 1.625rem; max-width: 32.5rem; }
.sht-hero__title {
  font-size: calc(clamp(2.625rem, 5.4vw, 4.75rem) * var(--heading-scale)); font-weight: 600; line-height: 1.02; letter-spacing: -.025em;
  text-wrap: balance; color: var(--ink);
}
.sht-hero__title em { color: var(--bordo); font-weight: 500; font-style: italic; }
.sht-hero__lead { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.55; color: var(--text); max-width: 33rem; }
.sht-hero__perks { display: flex; flex-wrap: wrap; gap: .625rem 1.375rem; }
.sht-hero__perk { display: flex; align-items: center; gap: .5625rem; font-size: .9375rem; font-weight: 500; color: var(--ink); }
.sht-hero__perk-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--bordo); flex: none; }
.sht-hero__perk:nth-child(2) .sht-hero__perk-dot { background: var(--teal); }
.sht-hero__perk:nth-child(3) .sht-hero__perk-dot { background: var(--green); }
.sht-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .25rem; }
.sht-hero__media { position: relative; height: clamp(26rem, 62vh, 41.25rem); }
.sht-hero__media-img {
  position: absolute; inset: 0; border-radius: 1.75rem 1.75rem 1.75rem 8.75rem; overflow: hidden;
  background-color: var(--sand); background-size: cover; background-position: center;
}
.sht-hero__stat {
  position: absolute; left: -1.125rem; bottom: 2.25rem; background: var(--amber); color: var(--ink);
  border-radius: var(--radius-md); padding: 1.125rem 1.375rem; display: flex; align-items: baseline; gap: .625rem;
  pointer-events: none; box-shadow: var(--shadow-lift);
}
.sht-hero__stat-n { font-family: var(--font-display); font-size: calc(2.75rem * var(--heading-scale)); font-weight: var(--bold-weight); line-height: 1; }
.sht-hero__stat-t { font-size: .8125rem; font-weight: 600; line-height: 1.25; }

/* Full-bleed hero variant, kept for `heroFull` parity with the design. */
.sht-hero--full {
  position: relative; min-height: clamp(35rem, 82vh, 51.25rem); display: flex; align-items: flex-end;
  background: var(--ink); color: var(--surface); padding: 0;
}
.sht-hero--full .sht-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--sand); }
.sht-hero--full .sht-hero__scrim { position: absolute; inset: 0; background: var(--hero-scrim); pointer-events: none; }
.sht-hero--full .sht-hero__copy {
  position: relative; width: 100%; max-width: var(--wrap-content); margin: 0 auto;
  padding: 0 var(--gutter) clamp(3rem, 7vw, 6rem);
}
.sht-hero--full .sht-hero__title, .sht-hero--full .sht-hero__title em { color: var(--surface); }
.sht-hero--full .sht-hero__lead { color: var(--surface); }
.sht-hero--full .sht-eyebrow { color: var(--amber); }

/* ── Search panel (home, `.sht-search`, FTT-31 — UI only) ─────────────── */

.sht-search__panel {
  background: var(--bordo); color: var(--surface); border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: 1.375rem;
  border: 0;
}
.sht-search__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.25rem;
}
.sht-search__title {
  font-family: var(--font-display); font-weight: 600; font-size: calc(clamp(1.625rem, 2.6vw, 2.25rem) * var(--heading-scale));
  letter-spacing: -.015em; margin: 0; color: var(--surface);
}
.sht-search__lead { margin: 0; font-size: .9375rem; color: var(--on-bordo-soft); }
.sht-search__fields {
  display: grid; --col-min: 12.5rem; gap: .75rem;
}
.sht-search__field {
  display: flex; align-items: center; gap: .75rem; background: var(--surface); color: var(--ink);
  border-radius: var(--radius-sm); padding: .625rem 1rem; min-height: 4rem; cursor: pointer;
}
.sht-search__icon { flex: none; color: var(--bordo); }
.sht-search__field-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sht-search__label {
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--teal);
}
.sht-search__select {
  border: 0; outline: 0; background: transparent; font: inherit; font-size: 1rem; font-weight: 500;
  color: var(--ink); padding: .125rem 0; width: 100%; cursor: pointer;
}
.sht-search__submit { min-height: 4rem; letter-spacing: .04em; }

/* ── Cozy contrast band (`.sht-cozy`, no dedicated design screen) ────── */

.sht-cozy { background: var(--mint); }
.sht-cozy__inner {
  max-width: var(--wrap-content); margin: 0 auto; padding: clamp(3.5rem, 7vw, 6rem) var(--gutter);
  display: grid; --col-min: 22rem;
  gap: 2.5rem; align-items: center;
}
.sht-cozy__copy { display: flex; flex-direction: column; gap: 1.125rem; }
.sht-cozy__copy .sht-section__title { font-size: calc(clamp(1.875rem, 3.2vw, 2.625rem) * var(--heading-scale)); }
.sht-cozy__text { font-size: 1.0625rem; line-height: 1.6; color: var(--text); max-width: 32.5rem; }
.sht-cozy__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .375rem; }
.sht-cozy__img {
  aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden;
  background-color: var(--sand); background-size: cover; background-position: center;
}

/* ── Category tile (`.sht-cats` > `.sht-cat`) ────────────────────────── */

.sht-cats { display: grid; --col-min: 13rem; gap: .875rem; }
.sht-cat {
  display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden;
  color: var(--surface); text-decoration: none; min-height: 11rem;
}
.sht-cat:hover { color: var(--surface); }
.sht-cat__img { position: relative; height: 16.25rem; background-size: cover; background-position: center; }
.sht-cat__body { padding: 1.125rem 1.25rem 1.375rem; display: flex; flex-direction: column; gap: .375rem; margin-top: auto; }
.sht-cat__n { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; opacity: .85; }
.sht-cat__title { font-family: var(--font-display); font-size: calc(1.4375rem * var(--heading-scale)); font-weight: 600; line-height: 1.15; }
.sht-cat__sub { font-size: .875rem; opacity: .9; }

.sht-cat--1 { background: var(--bordo); }
.sht-cat--2 { background: var(--teal); }
.sht-cat--3 { background: var(--green); }
.sht-cat--4 { background: var(--navy); }
.sht-cat--5 { background: var(--amber); color: var(--ink); }

/* ── Why / "88" band (`.sht-why`, on `.sht-band--bordo`) ─────────────── */

.sht-why {
  display: grid; --col-min: 26rem;
  gap: 3.5rem; align-items: center;
}
.sht-why__left { display: flex; flex-direction: column; gap: 1.625rem; }
.sht-why__num {
  font-family: var(--font-display); font-weight: 700; font-size: calc(clamp(7.5rem, 16vw, 13.75rem) * var(--heading-scale));
  line-height: .85; letter-spacing: -.04em; color: var(--amber);
}
.sht-why__kicker { color: var(--amber); }
.sht-why__title { font-weight: 500; font-size: calc(clamp(1.75rem, 3vw, 2.5rem) * var(--heading-scale)); line-height: 1.15; max-width: 32.5rem; color: var(--surface); }
.sht-why__title em { font-style: italic; }
.sht-why__list { display: flex; flex-direction: column; }
.sht-why__item { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--on-bordo-line); }
.sht-why__n { font-size: .875rem; font-weight: 700; color: var(--amber); padding-top: .25rem; }
.sht-why__t { font-family: var(--font-display); font-size: calc(1.375rem * var(--heading-scale)); font-weight: 600; color: var(--surface); }
.sht-why__d { margin-top: .375rem; font-size: calc(1rem * var(--text-scale, 1)); line-height: 1.5; color: var(--on-bordo-soft); }

/* ── Destination arch card (`.sht-dests` > `.sht-dest`) ──────────────── */

.sht-dests {
  display: flex; gap: 1.125rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter); /* snap the first card to the gutter, not the edge */
  padding: 0 var(--gutter) .75rem; max-width: var(--wrap-content); margin: 0 auto;
  scrollbar-width: none; /* owner 2026-11-05: no scrollbar; a mouse drags the row (site.js initDragScroll), touch swipes */
}
.sht-dests::-webkit-scrollbar { display: none; }
.sht-dests:not(.sht-dests--grid) { cursor: grab; }
.sht-dests.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.sht-dests.is-dragging .sht-dest { pointer-events: none; }
.sht-dests img { -webkit-user-drag: none; }
.sht-dest {
  flex: 0 0 clamp(13.75rem, 22vw, 17.5rem); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: .75rem; text-decoration: none; color: var(--ink);
}
.sht-dest:hover { color: var(--ink); }
.sht-dest__img {
  aspect-ratio: 3 / 4; border-radius: 10rem 10rem 1.125rem 1.125rem; overflow: hidden;
  background-color: var(--sand-2); background-size: cover; background-position: center;
}
.sht-dest__row { display: flex; flex-direction: column; gap: .125rem; padding: 0 .25rem; }
.sht-dest__name { font-family: var(--font-display); font-size: calc(1.375rem * var(--heading-scale)); font-weight: 600; color: var(--ink); }
.sht-dest__note { font-size: .8125rem; color: var(--muted); }

.sht-dests--grid {
  display: grid; --col-min: 9.5rem; --fit: auto-fill;
  gap: 1.75rem 1rem; overflow-x: visible; padding: 0; scroll-snap-type: none;
}

/* ── Travelogues (`.sht-articles`) ───────────────────────────────────── */

.sht-articles { display: grid; --col-min: 26rem; gap: 2.5rem; }

/* FTT-82: the home Блог block, one `.sht-articles` set per category. Without JS every set
   shows under its own small heading and the chips stay hidden; `site.js` adds `.is-live`. */
.sht-blog-tabs__chips { display: none; margin-bottom: 2rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } /* FTT-172: one scrolling row, as the export's */
.sht-blog-tabs__chips::-webkit-scrollbar { display: none; }
.sht-blog-tabs__chips .sht-chip { flex: none; }
.sht-blog-tabs.is-live .sht-blog-tabs__chips { display: flex; }
.sht-blog-tabs__set + .sht-blog-tabs__set { margin-top: 3rem; }
.sht-blog-tabs__title { margin: 0 0 1.25rem; font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.sht-blog-tabs.is-live .sht-blog-tabs__title { display: none; }
.sht-blog-tabs__set[hidden] { display: none; }

.sht-article--featured { display: flex; flex-direction: column; gap: 1.125rem; text-decoration: none; color: var(--ink); }
.sht-article--featured:hover { color: var(--ink); }
.sht-article__img {
  aspect-ratio: 16 / 11; border-radius: var(--radius-lg); overflow: hidden;
  background-color: var(--sand-2); background-size: cover; background-position: center;
}
.sht-article__tag { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--teal); }
.sht-article__title { font-size: calc(clamp(1.625rem, 2.6vw, 2.125rem) * var(--heading-scale)); font-weight: 600; line-height: 1.15; text-wrap: balance; }
.sht-article__lead { font-size: 1.0625rem; line-height: 1.55; color: var(--muted); max-width: 35rem; }
.sht-article__cta { font-weight: 700; font-size: .9375rem; color: var(--bordo); }

.sht-article-list { display: flex; flex-direction: column; gap: 1.75rem; }
.sht-article {
  display: grid; grid-template-columns: minmax(0, 9.375rem) 1fr; gap: 1.25rem; align-items: center;
  padding-bottom: 1.75rem; border-bottom: 1px solid var(--line-2); text-decoration: none; color: var(--ink);
}
.sht-article:hover { color: var(--ink); }
.sht-article__thumb {
  aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden;
  background-color: var(--sand-2); background-size: cover; background-position: center;
}
.sht-article__col { display: flex; flex-direction: column; gap: .5rem; }
.sht-article__col .sht-article__title { font-size: calc(1.3125rem * var(--heading-scale)); }
.sht-article__date { font-size: .875rem; color: var(--muted); }

/* ── Блог list (`/patepisi`, FTT-66) ─────────────────────────────────── */
/* Featured article (`.sht-article--hero`: photo left, text right), then
   „Всички статии“: category chips (v3: no search, no region filter) and a grid of `.sht-article-card`s. Phone rules: the „Блог“
   group in the 48em block. */
.sht-blog-featured { padding-top: 2.5rem; }
.sht-blog { padding-bottom: var(--section-pad); } /* the footer follows the list (no CTA box) */
.sht-article--hero {
  display: grid; --col-min: 26rem;
  gap: clamp(1.25rem, 4vw, 3.5rem); align-items: center;
}
.sht-article__body { display: flex; flex-direction: column; gap: 1.125rem; min-width: 0; }
.sht-article--hero .sht-article__title { font-size: calc(clamp(2rem, 3.6vw, 3rem) * var(--heading-scale)); }
.sht-article-card .sht-article__title { font-size: calc(1.3125rem * var(--heading-scale)); }
.sht-article-card .sht-article__lead {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
a.sht-chip { color: var(--ink); }
a.sht-chip.is-active, a.sht-chip.is-active:hover { color: var(--surface); }
.sht-blog__filters { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.sht-empty a:not(.sht-btn) { color: var(--bordo); font-weight: 600; }

/* ── Search results (`/search`, FTT-133): layout only ─────────────────── */
.sht-search-empty { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.sht-search-empty > p { margin: 0; }
.sht-search-foot { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; margin: 2.5rem 0 3rem; }
.sht-search-foot .sht-chips { justify-content: center; }
.sht-pager__gap { display: inline-flex; align-items: center; min-height: 2.5rem; color: var(--muted); }

/* ── Article page (`/statii/<slug>`, FTT-67) ─────────────────────────── */
/* Head (breadcrumb eyebrow + meta line under the lead), the cover with its
   caption, the body next to a sticky „Съдържание“ list (`.sht-continents-grid`
   / `-nav`, ids and links made by services.article_contents), the nearest
   trip as a wide boxed card, „Още от блога“. Phone rules: the „Статия“
   group in the 48em block. */
.sht-article-head__side { display: flex; flex-direction: column; gap: .5rem; }
.sht-article-head__side .sht-card__meta b { color: var(--ink); }
.sht-article-cover { max-width: var(--wrap-content); margin: 2.5rem auto 0; padding: 0 var(--gutter); }
.sht-article-cover .sht-pagehead__img { margin: 0; }
.sht-article-cover figcaption { display: block; margin-top: .625rem; }
.sht-article-layout { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.sht-continents-grid.sht-continents-grid--single { grid-template-columns: minmax(0, 1fr); }
.sht-article-body { display: flex; flex-direction: column; gap: 2.5rem; }
.sht-article-body .sht-prose { max-width: none; } /* v3: the text fills the column beside „Съдържание“; the global .sht-prose keeps its cap */
.sht-article-body .sht-gallery { max-width: none; }
.sht-prose h2 { scroll-margin-top: 1rem; }
.sht-article-trip { max-width: none; }
.sht-article-trip .sht-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: 1fr auto; gap: 1.25rem; align-items: center;
  background: var(--surface); border-radius: var(--radius-lg); padding: .625rem;
}
.sht-article-trip .sht-card__img { grid-row: 1 / span 2; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }
.sht-article-trip .sht-card__body { align-self: end; }
.sht-article-trip .sht-card__footer { border-top: 0; }
.sht-article-trip .sht-card__body, .sht-article-trip .sht-card__footer { padding-left: .5rem; padding-right: .75rem; }
.sht-related .sht-article-card .sht-article__lead, .sht-related .sht-article-card .sht-article__cta { display: none; } /* the mockup's cards: photo, tag, title */
.sht-article-end { height: var(--section-pad); }

/* ── Testimonials (`.sht-quotes` > `.sht-quote`) ─────────────────────── */

.sht-quotes { display: grid; --col-min: 20rem; gap: 1.375rem; }
.sht-quote {
  margin: 0; border-radius: var(--radius-lg); padding: 2rem 1.875rem;
  display: flex; flex-direction: column; gap: 1.5rem;
}
.sht-quote--1 { background: var(--tint-amber); }
.sht-quote--2 { background: var(--tint-teal); }
.sht-quote--3 { background: var(--tint-bordo); }
.sht-quote__mark { font-family: var(--font-display); font-size: calc(4rem * var(--heading-scale)); line-height: .5; height: 1.5rem; }
.sht-quote--1 .sht-quote__mark { color: var(--amber); }
.sht-quote--2 .sht-quote__mark { color: var(--teal); }
.sht-quote--3 .sht-quote__mark { color: var(--bordo); }
.sht-quote blockquote { margin: 0; font-family: var(--font-display); font-size: calc(1.25rem * var(--heading-scale)); line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.sht-quote figcaption { margin-top: auto; font-size: .875rem; color: var(--text); }
.sht-quote figcaption b { color: var(--ink); }
.sht-quote__stars { font-size: .875rem; color: var(--amber); letter-spacing: .1875rem; }

/* ── Reviews slider (home/about `#testimonials`, FTT-34) ─────────────── */
/* `.sht-reviews__head`'s left column (eyebrow+title) is plain block flow --
   no extra rule needed, same as every other `.sht-section__head` caller. */
.sht-reviews__actions { display: flex; align-items: center; gap: 1.125rem; flex-wrap: wrap; }
.sht-reviews__arrows { display: flex; gap: .5rem; }
.sht-reviews__arrow {
  width: 3rem; height: 3rem; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent;
  color: var(--ink); font-size: 1.125rem; display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease; flex: none;
}
.sht-reviews__arrow:hover { background: var(--ink); color: var(--surface); }
.sht-reviews__arrow.is-disabled { opacity: .35; pointer-events: none; }

/* No-JS state: the viewport scrolls horizontally, same contract as
   `.sht-carousel`. `initReviewsSlider` adds `.is-enhanced` once it takes
   over -- only then does the viewport clip and the track become a
   `transform`-driven, paged slide. */
.sht-reviews-slider__viewport { overflow-x: auto; scrollbar-width: none; }
.sht-reviews-slider__viewport::-webkit-scrollbar { display: none; }
.sht-reviews-slider.is-enhanced .sht-reviews-slider__viewport { overflow: hidden; }
.sht-reviews-slider__track { display: flex; gap: 1.125rem; padding-bottom: .625rem; scroll-snap-type: x proximity; }
.sht-reviews-slider__track .sht-quote { flex: 0 0 min(21.875rem, 85vw); scroll-snap-align: start; }
.sht-reviews-slider.is-enhanced .sht-reviews-slider__track {
  padding-bottom: 0; scroll-snap-type: none; transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}
.sht-reviews-slider__dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.5rem; }
.sht-reviews-slider__dots:empty { display: none; }
.sht-reviews-slider__dot {
  width: .5rem; height: .5rem; border: 0; padding: 0; border-radius: var(--radius-pill);
  background: var(--sand); cursor: pointer; transition: width .3s ease, background-color .3s ease;
}
.sht-reviews-slider__dot.is-active { width: 1.75rem; background: var(--ink); }

/* ── /otzivi review card (`.sht-quotes` > `.sht-review-card`, FTT-34) ── */
/* Reuses `.sht-quotes`'s grid; a different card than the home slider's
   `.sht-quote` -- adds a type eyebrow and an initials-avatar byline. */
.sht-review-card {
  margin: 0; border-radius: var(--radius-lg); padding: 1.875rem 1.75rem;
  display: flex; flex-direction: column; gap: 1.25rem;
}
.sht-review-card--1 { background: var(--tint-amber); }
.sht-review-card--2 { background: var(--tint-teal); }
.sht-review-card--3 { background: var(--tint-bordo); }
.sht-review-card--4 { background: var(--surface); }
.sht-review-card blockquote { margin: 0; font-family: var(--font-display); font-size: calc(1.1875rem * var(--heading-scale)); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.sht-review-card__meta { margin-top: auto; display: flex; align-items: center; gap: .75rem; font-size: .875rem; color: var(--text); }
.sht-review-card__avatar {
  width: 2.625rem; height: 2.625rem; border-radius: 50%; flex: none; color: var(--surface);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem;
}
.sht-review-card--1 .sht-review-card__avatar { background: var(--amber); color: var(--ink); }
.sht-review-card--2 .sht-review-card__avatar { background: var(--teal); }
.sht-review-card--3 .sht-review-card__avatar { background: var(--bordo); }
.sht-review-card--4 .sht-review-card__avatar { background: var(--green); }
.sht-review-card__who { display: flex; flex-direction: column; gap: .125rem; }
.sht-review-card__who b { color: var(--ink); font-size: .9375rem; }


/* ── /otzivi gallery (`.sht-review-gallery`, FTT-34 R3) ───────────────── */
.sht-review-gallery {
  display: grid; --col-min: 11.25rem; --fit: auto-fill;
  grid-auto-rows: clamp(9.375rem, 16vw, 12.5rem); grid-auto-flow: dense; --col-gap: .75rem; --row-gap: .75rem;
}
.sht-review-gallery__tile {
  position: relative; margin: 0; padding: 0; border: 0; border-radius: var(--radius-md); overflow: hidden;
  background-color: var(--sand-2); cursor: pointer; display: block; text-align: left;
}
.sht-review-gallery__tile--wide { grid-column: span 2; }
.sht-review-gallery__tile--tall { grid-row: span 2; }
.sht-review-gallery__tile--big { grid-column: span 2; grid-row: span 2; }
.sht-review-gallery__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sht-review-gallery__cap {
  position: absolute; left: .75rem; bottom: .75rem; background: var(--scrim); color: var(--surface);
  font-size: .75rem; font-weight: 600; padding: .3125rem .625rem; border-radius: var(--radius-pill); pointer-events: none;
}

/* ── Photos (`{% picture %}`, FTT-209) ───────────────────────────────────
   Every photo is `<picture class="sht-pic"><source …><img width height …></picture>`. The <picture> adds no box
   (`display: contents`), so every rule written for an <img> in a slot still applies to the <img>. A slot that used
   to paint its photo as a CSS background-image keeps its own geometry (aspect-ratio, height, inset, radius) and
   the <img> fills it, positioned and cropped the way `background-size: cover; background-position: center` did. */
.sht-pic { display: contents; }
.sht-pic > source { display: none; } /* as a flex/grid child a <source> would become an empty item and add a gap */
.sht-cozy__img, .sht-dest__img, .sht-article__img, .sht-article__thumb, .sht-pagehead__img, .sht-story__img, .sht-gallery__tile { position: relative; }
:is(.sht-card__img, .sht-hero__media-img, .sht-cozy__img, .sht-cat__img, .sht-dest__img, .sht-article__img, .sht-article__thumb,
    .sht-cta__img, .sht-pagehead__img, .sht-cover__img, .sht-story__img, .sht-gallery__tile) > .sht-pic > img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center;
}
.sht-cta__img::before { z-index: 1; } /* the highlight stays above the photo */
.sht-prose .sht-prose__img { margin-bottom: 1rem; } /* a CMS text card's picture (was an inline style) */

/* ── Photo lift on hover (FTT-229) ───────────────────────────────────────
   One rule for every photo that sits in a clipping frame: the photo scales about 3.5 % over .2 s, the frame never
   moves, so the layout does not either. Only with a mouse and only without reduced motion (a capability query, not a
   breakpoint). Cards that are links keep their link (`a.sht-card`); a photo of a non-link card (the destination's
   tours) does not lift. Components: see docs/FRONTEND-DESIGN.md "Photo lift". */
.sht-country-card__frame { display: block; border-radius: var(--radius-md); overflow: hidden; }
.sht-cat__img, .sht-article__img, .sht-article__thumb { overflow: hidden; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(.sht-card__img, .sht-cat__img, .sht-dest__img, .sht-article__img, .sht-article__thumb, .sht-gallery__tile, .sht-review-gallery__tile,
      .sht-cruise-deck__img, .sht-cruise-cabin__photo, .sht-country-card__frame) > .sht-pic > img { transition: transform .2s ease; }
  :is(a.sht-card:hover .sht-card__img, a.sht-cat:hover .sht-cat__img, a.sht-dest:hover .sht-dest__img,
      a.sht-article--featured:hover .sht-article__img, a.sht-article:hover .sht-article__thumb,
      a.sht-country-card:hover .sht-country-card__frame, .sht-gallery__tile:hover, .sht-review-gallery__tile:hover,
      .sht-cruise-deck:hover .sht-cruise-deck__img, button.sht-cruise-cabin__photo:hover) > .sht-pic > img { transform: scale(1.035); }
}

/* ── Lightbox (`.sht-lightbox`, FTT-34) ───────────────────────────────── */
.sht-lightbox {
  position: fixed; inset: 0; z-index: 200; background: var(--scrim-strong);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
}
.sht-lightbox[hidden] { display: none; }
.sht-lightbox { overscroll-behavior: contain; touch-action: none; } /* a vertical move does nothing; a horizontal swipe is ours */
html.sht-lightbox-open { overflow: hidden; scrollbar-gutter: stable; } /* FTT-229: the page behind does not scroll */
.sht-lightbox__stage { position: relative; display: flex; max-width: 100%; } /* shrink-wraps the photo */
.sht-lightbox__half { position: absolute; top: 0; bottom: 0; width: 50%; padding: 0; border: 0; background: none; }
.sht-lightbox__half--prev { left: 0; cursor: w-resize; }
.sht-lightbox__half--next { right: 0; cursor: e-resize; }
.sht-lightbox.is-single .sht-lightbox__half, .sht-lightbox.is-single .sht-lightbox__nav { display: none; }
.sht-lightbox__img { max-width: 100%; max-height: 78vh; border-radius: var(--radius-lg); object-fit: contain; }
.sht-lightbox__caption { margin: 0; color: var(--surface); font-size: .9375rem; }
.sht-lightbox__close, .sht-lightbox__nav {
  border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 1; /* above the photo's stage */
}
.sht-lightbox__close { position: absolute; top: 1.25rem; right: 1.25rem; width: 3rem; height: 3rem; font-size: 1.125rem; }
.sht-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 3.25rem; height: 3.25rem; font-size: 1.25rem; }
.sht-lightbox__nav--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.sht-lightbox__nav--next { right: clamp(.5rem, 2vw, 1.5rem); }

/* ── CTA block (`.sht-cta`) ───────────────────────────────────────────── */

.sht-cta.sht-cta--flush { padding-top: 0; }
.sht-cta { max-width: var(--wrap-content); margin: 0 auto; padding: var(--section-pad) var(--gutter); }
.sht-cta__box {
  background: var(--teal-deep); color: var(--surface); border-radius: var(--radius-xl); overflow: hidden;
  display: grid; --col-min: 23.75rem; --col-gap: 0rem; --row-gap: 0rem;
}
.sht-cta__copy {
  padding: clamp(2.25rem, 5vw, 4.5rem); display: flex; flex-direction: column; gap: 1.375rem; justify-content: center;
}
.sht-cta__copy h2 { font-size: calc(clamp(1.875rem, 3.4vw, 2.875rem) * var(--heading-scale)); line-height: 1.08; color: var(--surface); text-wrap: balance; }
.sht-cta__copy p { font-size: 1.0625rem; line-height: 1.55; color: var(--on-teal-soft); max-width: 27.5rem; }
.sht-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
/* /otzivi's own CTA (FTT-34, export "Пътували сте с нас?"): bordo, not teal. */
.sht-cta__box--bordo { background: var(--bordo); }
.sht-cta__box--bordo .sht-cta__copy p { color: var(--on-bordo-soft); }
.sht-cta__img {
  position: relative; min-height: 20rem; background: var(--teal-deeper);
  background-size: cover; background-position: center;
}
.sht-cta__img::before {
  content: ""; position: absolute; inset: 0;
  background: var(--cta-img-highlight);
}

/* ── Page head (inner pages: `.sht-pagehead`) ────────────────────────── */

.sht-pagehead {
  max-width: var(--wrap-content); margin: 0 auto; padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-left: var(--gutter); padding-right: var(--gutter);
  display: grid; --col-min: 25rem;
  gap: 3rem; align-items: end;
}
.sht-pagehead__left { display: flex; flex-direction: column; gap: 1.125rem; }
.sht-pagehead__title {
  font-size: calc(clamp(3rem, 6.4vw, 5.75rem) * var(--heading-scale)); line-height: .98; letter-spacing: -.03em; color: var(--ink);
  overflow-wrap: anywhere;
}
/* a trip operator's offer title is a whole sentence ("Hotel 4* — All Inclusive почивка в … с полет от …"), not a display word */
.sht-pagehead__title--offer { font-size: calc(clamp(1.75rem, 3.2vw, 2.75rem) * var(--heading-scale)); line-height: 1.12; letter-spacing: -.02em; }
.sht-pagehead__title em { color: var(--bordo); font-weight: 500; font-style: italic; }
/* A title too long for half the grid at display size (FTT-34's "Какво
   споделят пътешествениците" -- "пътешествениците" alone is wider than a
   ~25rem column at clamp's top end, so `overflow-wrap: anywhere` above
   would otherwise break it mid-word): force a single full-width column so
   the title always has the whole row; the second column (here, the rating
   box) stacks on its own row below instead of sharing the width. */
.sht-pagehead--full-title { --cols: 1; }
.sht-pagehead__lead { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.55; color: var(--text); max-width: 32.5rem; }
.sht-pagehead__img {
  height: clamp(20rem, 48vw, 35rem); border-radius: var(--radius-xl); overflow: hidden;
  background-color: var(--sand); background-size: cover; background-position: center;
  max-width: var(--wrap-content); margin: 2.5rem auto 0;
}

/* ── Full-bleed hero (destination page: `.sht-cover`) ────────────────── */

.sht-cover {
  position: relative; min-height: clamp(30rem, 70vh, 43.75rem); display: flex; align-items: flex-end;
  background: var(--ink); color: var(--surface); overflow: hidden;
}
.sht-cover__img { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--sand); }
.sht-cover__scrim { position: absolute; inset: 0; background: var(--cover-scrim); pointer-events: none; }
.sht-cover__copy {
  position: relative; width: 100%; max-width: var(--wrap-content); margin: 0 auto;
  padding: 0 var(--gutter) clamp(2.5rem, 6vw, 4.5rem);
  display: flex; flex-direction: column; gap: 1.125rem; color: var(--surface);
}
/* FTT-91: the huge title's line box (line-height .95) paints over the breadcrumb above it, so a real click on the breadcrumb's links landed on the h1. Lift the breadcrumb above it. */
.sht-cover__copy > .sht-eyebrow { position: relative; z-index: 1; }
.sht-cover__title { font-size: calc(clamp(3.5rem, 9vw, 8rem) * var(--heading-scale)); line-height: .95; color: var(--surface); overflow-wrap: anywhere; }
.sht-cover__lead { font-family: var(--font-display); font-style: italic; font-size: calc(clamp(1.1875rem, 1.8vw, 1.5rem) * var(--heading-scale)); max-width: 38.75rem; margin: 0; color: var(--surface); }
/* FTT-36: the destinations/continent cover's three stats -- like
   `.sht-hero__perks` (home hero) but every dot is a fixed amber (the
   export's own choice for a full-bleed dark hero), never the bordo/teal/
   green cycle the split home hero uses. */
.sht-cover__stats { display: flex; flex-wrap: wrap; gap: .625rem 1.375rem; margin-top: .25rem; }
.sht-cover__stat { display: flex; align-items: center; gap: .5625rem; font-size: .9375rem; font-weight: 500; color: var(--surface); }
.sht-cover__stat-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--amber); flex: none; }

/* ── Continents sidebar + country grid (/destinatsii, FTT-36) ─────────── */

.sht-continents-layout { max-width: var(--wrap-content); margin: 0 auto; padding: var(--section-pad) var(--gutter) 0; }
.sht-continents-layout__head { display: flex; flex-direction: column; gap: .625rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.sht-continents-grid {
  display: grid; grid-template-columns: 14.375rem minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start;
}
.sht-continents-grid__body { min-width: 0; }
.sht-continents-grid__body[hidden] { display: none; }
.sht-section__head-text { display: flex; flex-direction: column; gap: .625rem; }
/* FTT-86: the index's left column = continent list + side search. The list is not sticky here (its
   containing block would be the whole column and it would slide over the panel); the panel does not stick. */
.sht-continents-grid--with-search { grid-template-columns: minmax(13rem, 14.375rem) minmax(0, 1fr); }
.sht-continents-grid__side { display: flex; flex-direction: column; gap: 2rem; min-width: 0; }
.sht-continents-grid__side .sht-continents-nav { position: static; }

.sht-continents-nav { position: sticky; top: 6.25rem; display: flex; flex-direction: column; gap: .25rem; }
.sht-continents-nav__label {
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--teal);
  margin-bottom: .625rem;
}
.sht-continents-nav a, .sht-continents-nav__empty {
  display: flex; align-items: center; justify-content: space-between; gap: .625rem;
  padding: .8125rem 1rem; border-radius: var(--radius-md); font-size: 1rem; font-weight: 500;
}
.sht-continents-nav a { color: var(--ink); }
.sht-continents-nav a:hover { background: var(--surface); color: var(--ink); }
.sht-continents-nav a.is-active { background: var(--surface); color: var(--bordo); font-weight: 700; }
.sht-continents-nav__empty { color: var(--muted); }
.sht-continents-nav__count {
  font-size: .75rem; font-weight: 600; color: var(--muted); background: var(--sand-2);
  border-radius: var(--radius-pill); padding: .1875rem .5625rem;
}

/* One destination card in the export's country-grid shape: white card, 4:3
   cover, name + note, amber circle arrow -- the /destinatsii continent
   preview and the /destinatsii/kontinent/<slug> grid both use it
   (_destination_country_card.html). */
.sht-country-card {
  display: flex; flex-direction: column; gap: .75rem; background: var(--surface);
  border-radius: var(--radius-lg); padding: .5rem .5rem 1rem; color: var(--ink);
  transition: box-shadow .25s ease;
}
.sht-country-card:hover { box-shadow: var(--shadow-lift); color: var(--ink); }
.sht-country-card__img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md);
  background-color: var(--sand);
}
.sht-country-card__row { padding: 0 .5rem; display: flex; justify-content: space-between; align-items: flex-end; gap: .625rem; }
.sht-country-card__body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.sht-country-card__name { font-family: var(--font-display); font-size: calc(clamp(1.125rem, 1.5vw, 1.3125rem) * var(--heading-scale)); font-weight: 600; line-height: 1.15; }
.sht-country-card__note { font-size: .8125rem; color: var(--muted); line-height: 1.35; }
.sht-country-card__arrow {
  flex: none; width: 2.125rem; height: 2.125rem; border-radius: 50%; background: var(--amber); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}

/* Continent page's client-side name search (static/website/site.js::
   initDestinationSearch) -- a `.sht-input`-like pill with a leading icon,
   plus the sort select next to "Държави в {континент}"'s `.sht-section__head`. */
.sht-country-search {
  display: flex; align-items: center; gap: .625rem; background: var(--surface); border-radius: var(--radius-md);
  padding: 0 1rem; min-height: 3.5rem; margin-bottom: 1.75rem; color: var(--bordo);
}
.sht-country-search input {
  border: 0; outline: 0; flex: 1; min-width: 0; font: inherit; font-size: .9375rem; color: var(--ink); background: transparent;
}
.sht-country-search__empty { margin: .5rem 0 0; font-size: 1.0625rem; color: var(--text); }
.sht-country-search__empty a { color: var(--bordo); font-weight: 600; }
/* FTT-38: real GET form; the submit button is the no-JS path only. */
.sht-country-filter__submit { margin-bottom: 1.75rem; min-height: 2.75rem; }
.is-live .sht-country-filter__submit { display: none; }
.sht-country-sort {
  border: 1.5px solid var(--chip-line); border-radius: var(--radius-pill); padding: .6875rem 1.125rem;
  background: transparent; color: var(--ink); font-size: .875rem; font-weight: 600; cursor: pointer;
}

/* ── Facts grid (`.sht-facts`) ────────────────────────────────────────── */

.sht-facts {
  background: var(--line);
  border-radius: var(--radius-lg); overflow: hidden; align-self: start;
}
.sht-fact { background: var(--surface); padding: 1.375rem 1.375rem 1.5rem; display: flex; flex-direction: column; gap: .375rem; }
.sht-fact__k { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--teal); }
.sht-fact__v { font-family: var(--font-display); font-size: calc(1.25rem * var(--heading-scale)); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
/* FTT-69: a tile that is a link (tel:/mailto:) is the whole tap target. */
a.sht-fact { color: inherit; text-decoration: none; }
a.sht-fact:hover .sht-fact__v { color: var(--bordo); }
/* Контакти: info column = facts + the two buttons under them. */
/* The footer follows the section directly (no CTA box), as the mockup. */
.sht-contact { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: var(--section-pad); }
.sht-contact__info { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; align-self: start; }
.sht-contact__info > .sht-facts { align-self: stretch; } /* FTT-180: `.sht-facts` is align-self:start; in this flex column that shrank the card to its text at 768px */

/* ── Gallery (`.sht-gallery`) ─────────────────────────────────────────── */

.sht-gallery {
  display: grid; --col-min: 10rem;
  grid-auto-rows: 11.25rem; grid-auto-flow: dense; --col-gap: .75rem; --row-gap: .75rem;
}
.sht-gallery__tile {
  border-radius: var(--radius-md); overflow: hidden; background-color: var(--sand-2);
  background-size: cover; background-position: center;
}
button.sht-gallery__tile { padding: 0; margin: 0; border: 0; cursor: pointer; display: block; font: inherit; color: inherit; text-align: left; } /* FTT-229: a tile that opens the viewer */
.sht-trip-gallery__tile .sht-badge { top: auto; left: auto; right: .875rem; bottom: .875rem; } /* the „+N снимки“ label */
.sht-trip-gallery-more { display: none; } /* photos 6+: only their data-full* for the viewer */
.sht-gallery__tile--wide { grid-column: span 2; }
.sht-gallery__tile--tall { grid-row: span 2; }
.sht-gallery__tile--big { grid-column: span 2; grid-row: span 2; }

/* FTT-71: the closed mosaic (`_gallery.html`, `gallery_tiles`). Five columns x
   two rows per block of up to five photos; each block's spans add up to 10
   cells, so no cell is ever empty. */
.sht-gallery--mosaic { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sht-gallery--mosaic .sht-gallery__tile--full { grid-column: span 5; grid-row: span 2; }
.sht-gallery--mosaic .sht-gallery__tile--half-l { grid-column: span 3; grid-row: span 2; }
.sht-gallery--mosaic .sht-gallery__tile--half-r { grid-column: span 2; grid-row: span 2; }
.sht-gallery--mosaic .sht-gallery__tile--w3 { grid-column: span 3; }

/* ── FAQ (`.sht-faq`) ─────────────────────────────────────────────────── */

.sht-section__title.sht-faq__title { font-size: calc(clamp(1.5rem, 2.4vw, 1.875rem) * var(--heading-scale)); margin: 0 0 .75rem; } /* FTT-94/172: the FAQ heading is h3.sht-section__title.sht-faq__title (export Morocco.dc.html:107); the compound selector keeps the smaller size on a phone too */
.sht-faq__item { border-bottom: 1px solid var(--line); }
.sht-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 0; font-size: 1.0625rem; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none;
}
.sht-faq__item summary::-webkit-details-marker { display: none; }
.sht-faq__sign { font-size: 1.375rem; font-weight: 400; color: var(--bordo); transition: transform .2s ease; flex: none; }
.sht-faq__item[open] .sht-faq__sign { transform: rotate(45deg); }
.sht-faq__item p { margin: 0 0 1.25rem; font-size: calc(1rem * var(--text-scale, 1)); line-height: 1.6; color: var(--text); max-width: 35rem; }

/* ── Team (`.sht-team` > `.sht-team__member`) ────────────────────────── */

.sht-team { display: grid; --col-min: 15.625rem; gap: 2rem 1.375rem; }
.sht-team__member { margin: 0; display: flex; flex-direction: column; gap: .875rem; }
.sht-team__photo {
  aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background-color: var(--sand-2);
}
.sht-team__photo img { width: 100%; height: 100%; object-fit: cover; }
.sht-team__photo--1 { background-color: var(--tint-bordo); }
.sht-team__photo--2 { background-color: var(--tint-teal); }
.sht-team__photo--3 { background-color: var(--tint-green); }
.sht-team__photo--4 { background-color: var(--tint-sand); }
.sht-team figcaption { display: flex; flex-direction: column; gap: .875rem; }
.sht-team__name { font-family: var(--font-display); font-size: calc(1.5rem * var(--heading-scale)); font-weight: 600; }
.sht-team__role { font-size: calc(.75rem * var(--text-scale, 1)); letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--teal); }
.sht-team__bio { font-size: calc(.9375rem * var(--text-scale, 1)); line-height: 1.55; color: var(--text); }
.sht-team__bio p { margin: 0 0 .5rem; }
.sht-team__bio p:last-child { margin-bottom: 0; }
.sht-team__fact { font-size: calc(.875rem * var(--text-scale, 1)); font-weight: 600; color: var(--bordo); }

/* ── Values (`.sht-values` > `.sht-value`) ───────────────────────────── */

.sht-values { display: grid; --col-min: 12.5rem; gap: 1.75rem; }
.sht-value { display: flex; flex-direction: column; gap: .625rem; border-top: .1875rem solid var(--bordo); padding-top: 1.125rem; }
.sht-value--1 { border-top-color: var(--bordo); }
.sht-value--2 { border-top-color: var(--teal); }
.sht-value--3 { border-top-color: var(--green); }
.sht-value--4 { border-top-color: var(--amber); }
.sht-value--5 { border-top-color: var(--navy); }
.sht-value__t { font-family: var(--font-display); font-size: calc(1.25rem * var(--heading-scale)); font-weight: 600; line-height: 1.25; }
.sht-value__d { font-size: calc(.9375rem * var(--text-scale, 1)); line-height: 1.5; color: var(--text); }

/* ── About story (`.sht-story`) ───────────────────────────────────────── */

.sht-story { display: grid; --col-min: 25rem; gap: 3.5rem; align-items: center; }
.sht-story__img {
  aspect-ratio: 4 / 5; max-height: 38.75rem; border-radius: 1.5rem 1.5rem 11.25rem 1.5rem; overflow: hidden;
  background-color: var(--sand-2); background-size: cover; background-position: center;
}
.sht-story__copy { display: flex; flex-direction: column; gap: 1.375rem; max-width: 35rem; }
.sht-story__copy p { font-size: calc(1.0625rem * var(--text-scale, 1)); line-height: 1.7; color: var(--text); }
.sht-stats {
  display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: .625rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line-2);
}
.sht-stat { display: flex; flex-direction: column; gap: .25rem; }
.sht-stat__n { font-family: var(--font-display); font-size: calc(3rem * var(--heading-scale)); font-weight: var(--bold-weight); line-height: 1; color: var(--bordo); }
.sht-stat--teal .sht-stat__n { color: var(--teal); }
.sht-stat__l { font-size: calc(.875rem * var(--text-scale, 1)); color: var(--muted); }

/* FTT-497 About v4: the stats now open the copy column (their top rule stays), the second half of the story, the
   mission line, the promise and the wider four-column values. Layout and type only; tokens, no colour literal. */
.sht-story__copy > .sht-stats:first-child { margin-top: 0; }
.sht-story__copy p.sht-story__quote { font-family: var(--font-display); font-size: calc(1.5rem * var(--heading-scale)); line-height: 1.35; color: var(--ink); }
.sht-story__copy p.sht-story__accent { font-weight: 600; color: var(--bordo); }
.sht-section--story-more { padding-top: clamp(2.5rem, 6vw, 5rem); }
.sht-values--wide { --col-min: 15rem; }
.sht-mission { display: flex; flex-direction: column; gap: 1.5rem; max-width: min(62rem, var(--wrap-content)); }
.sht-mission__lead {
  margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.3; color: var(--ink); text-wrap: pretty;
  font-size: calc(clamp(1.5rem, 2.6vw, 2.375rem) * var(--heading-scale));
}
.sht-mission__lead em { color: var(--bordo); }
.sht-mission__text { margin: 0; max-width: 44rem; font-size: 1.0625rem; line-height: 1.7; color: var(--text); }
.sht-promise { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }
.sht-promise__mark { width: 4rem; height: auto; }
.sht-promise__line {
  margin: 0; font-family: var(--font-display); line-height: 1.3; color: var(--ink); text-wrap: balance;
  font-size: calc(clamp(1.375rem, 2.4vw, 2.25rem) * var(--heading-scale));
}

/* ── Forms ─────────────────────────────────────────────────────────────── */

.sht-form__title { font-size: calc(1.375rem * var(--heading-scale)); font-weight: 600; }
.sht-input {
  width: 100%; border: 1.5px solid var(--sand); background: var(--surface); border-radius: var(--radius-sm);
  padding: .9375rem 1rem; font: inherit; font-size: 1rem; color: var(--ink);
}
.sht-input:focus { border-color: var(--bordo); outline: none; }
textarea.sht-input { resize: vertical; }
.sht-input--dark {
  background: var(--input-dark-bg); border-color: var(--input-dark-border); color: var(--surface);
}
.sht-input--dark::placeholder { color: var(--footer-muted); }
.sht-form { display: flex; flex-direction: column; gap: .75rem; }
.sht-consent { display: flex; align-items: flex-start; gap: .5rem; font-size: .8125rem; color: var(--muted); cursor: pointer; }
.sht-consent input { width: auto; margin-top: .1875rem; flex-shrink: 0; }
.sht-consent--dark { color: var(--footer-muted); }
.sht-note--ok { background: var(--ok-bg); color: var(--ok-ink); border-radius: var(--radius-md); padding: 1.125rem; font-weight: 600; }
.sht-note--error { background: var(--tint-bordo); color: var(--bordo); border-radius: var(--radius-md); padding: 1.125rem; font-weight: 600; }
.sht-hp { position: absolute; left: -999em; }

/* ── Modal (`.sht-modal`) — inquiry / newsletter pop-up shell ────────── */

.sht-modal {
  position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center;
  padding: 1.25rem; background: var(--scrim);
}
.sht-modal.is-open { display: flex; }
.sht-modal__panel {
  background: var(--bg); border-radius: var(--radius-xl); width: 100%; max-width: 32.5rem; max-height: 90vh;
  overflow: auto; padding: clamp(1.75rem, 5vw, 2.75rem); display: flex; flex-direction: column; gap: 1.125rem;
  position: relative;
}
.sht-modal__close {
  position: absolute; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 0; background: var(--line); color: var(--ink); font-size: 1.125rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.sht-modal__title { font-size: calc(2rem * var(--heading-scale)); line-height: 1.1; padding-right: 2.5rem; margin: 0; }
.sht-modal__text { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--text); }

/* Same panel look reused by the newsletter pop-up (FTT-9's own classes). */
.sht-popup {
  position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 1.25rem;
}
.sht-popup.is-visible { display: flex; }
.sht-popup__backdrop { position: absolute; inset: 0; background: var(--scrim); }
.sht-popup__panel {
  position: relative; background: var(--bg); border-radius: var(--radius-xl); width: 100%; max-width: 32.5rem;
  max-height: 90vh; overflow: auto; padding: clamp(1.75rem, 5vw, 2.75rem); display: flex; flex-direction: column; gap: 1.125rem;
}
.sht-popup__close {
  position: absolute; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 0; background: var(--line); color: var(--ink); font-size: 1.125rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.sht-popup__title { font-size: calc(2rem * var(--heading-scale)); line-height: 1.1; padding-right: 2.5rem; margin: 0; font-family: var(--font-display); font-weight: 600; }
.sht-popup__text { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--text); }
.sht-popup form { display: flex; flex-direction: column; gap: .75rem; }
.sht-popup__hp { position: absolute; left: -999em; }
.sht-popup__consent { display: flex; align-items: flex-start; gap: .5rem; font-size: .8125rem; color: var(--muted); cursor: pointer; }
.sht-popup__consent input { width: auto; margin-top: .1875rem; flex-shrink: 0; }

/* ── Header (`.sht-header`) ───────────────────────────────────────────── */

.sht-header {
  position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(.625rem);
  border-bottom: 1px solid var(--line);
}
.sht-header__inner {
  /* Owner 2026-11-09: the brand (logo + name + tagline) is always the top-left corner of the screen.
     Full-width row, only the gutter (relative) from the left edge; the brand never shrinks or moves
     when menu items or buttons are added or removed (nav takes the rest and sits right). */
  width: 100%; max-width: none; margin: 0; padding: .875rem var(--gutter);
  display: flex; align-items: center; justify-content: flex-start; gap: 1.5rem;
}
.sht-header__inner > .sht-brand { flex: 0 0 auto; }
.sht-header__inner > .sht-nav, .sht-header__inner > .sht-burger { margin-left: auto; }
.sht-brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; }
.sht-brand:hover { color: inherit; }
.sht-logo { flex: none; }
.sht-brand__text { display: flex; flex-direction: column; gap: .125rem; }
.sht-brand__name { font-family: var(--font-display); font-weight: 700; font-size: calc(1.4375rem * var(--heading-scale)); color: var(--bordo); line-height: 1; }
.sht-brand__tag { font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--teal); font-weight: 600; }

.sht-nav { display: flex; align-items: center; gap: clamp(.75rem, 1.8vw, 1.75rem); }
.sht-nav a {
  text-decoration: none; color: var(--ink); font-weight: 500; font-size: .9375rem;
  padding: .5rem 0; border-bottom: 2px solid transparent;
}
.sht-nav a[aria-current="page"] { color: var(--bordo); border-bottom-color: var(--bordo); }
.sht-nav a:hover { color: var(--bordo); }

/* „Още“ (FTT-183): with more than 8 visible menu rows the bar shows 7 and a
   <details> holding the rest. Works without JS; site.js adds Escape, click
   outside and aria-expanded. */
.sht-more { position: relative; }
.sht-more__toggle {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .375rem;
  color: var(--ink); font-weight: 500; font-size: .9375rem; padding: .5rem 0; border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.sht-more__toggle::-webkit-details-marker { display: none; }
.sht-more__toggle::after {
  content: ""; width: .4375rem; height: .4375rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-.125rem) rotate(45deg); transition: transform .15s;
}
.sht-more[open] > .sht-more__toggle::after { transform: translateY(.0625rem) rotate(225deg); }
.sht-more__toggle:hover, .sht-more[open] > .sht-more__toggle { color: var(--bordo); }
.sht-more__toggle[aria-current] { color: var(--bordo); border-bottom-color: var(--bordo); }
.sht-more__panel {
  position: absolute; top: 100%; right: 0; z-index: 60; min-width: 12rem; margin-top: .5rem; padding: .375rem 0;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: .75rem; box-shadow: var(--shadow-lift);
}
.sht-nav .sht-more__panel a { padding: .625rem 1.125rem; border-bottom: 0; white-space: nowrap; }
.sht-nav .sht-more__panel a:hover { background: var(--bg); }
.sht-nav .sht-more__panel a[aria-current="page"] { font-weight: 700; }

.sht-header__actions { display: flex; align-items: center; gap: 1.125rem; }

/* „Обадете се“ (FTT-447, design 2026-11-09; partial `_call_buttons.html`). `.sht-call*` = one button per number;
   `.sht-call-menu` = one button, a <details> lists the numbers (header: a popup under the button, right-aligned;
   drawer, footer: in the flow). Works without JS; site.js (`data-call`) adds Escape, click outside, aria-expanded. */
.sht-call { display: flex; flex-wrap: wrap; gap: .75rem; }
.sht-call__btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; flex: 1 1 auto; white-space: nowrap; }
.sht-call__icon { flex: none; }
.sht-call-menu { position: relative; }
.sht-call-menu__summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; }
.sht-call-menu__summary::-webkit-details-marker { display: none; }
.sht-call-menu__caret { font-size: .75em; transition: transform .15s; }
.sht-call-menu[open] > .sht-call-menu__summary .sht-call-menu__caret { transform: rotate(180deg); }
.sht-call-menu__panel { display: flex; flex-direction: column; }
.sht-call-menu--header .sht-call-menu__panel {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 30; min-width: 14rem; max-width: calc(100vw - 2rem);
  gap: .125rem; padding: .5rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lift);
}
.sht-call-menu__link {
  display: flex; align-items: center; gap: .625rem; min-height: 2.75rem; padding: .5rem .875rem;
  border-radius: var(--radius-md); font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.sht-call-menu__link:hover { background: var(--tint-bordo); color: var(--bordo); }
.sht-call-menu--inline .sht-call-menu__panel {
  position: absolute; left: 0; top: calc(100% + .5rem); z-index: 30; min-width: 14rem; max-width: calc(100vw - 2rem);
  gap: .125rem; padding: .5rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lift);
}
/* FTT-448: contacts tile holds two numbers, each its own link */
a.sht-fact__link { text-decoration: none; display: flex; align-items: center; min-height: 2.75rem; }
a.sht-fact__link:hover { color: var(--bordo); }
.sht-call-menu--drawer { display: flex; flex-direction: column; gap: .5rem; }
.sht-call-menu--drawer > .sht-call-menu__summary { display: flex; justify-content: center; }
.sht-call-menu--drawer .sht-call-menu__panel { gap: .5rem; }
.sht-call-menu--footer { display: flex; flex-direction: column; align-items: flex-start; }
.sht-call-menu--footer .sht-call-menu__panel { gap: .375rem; margin-top: .625rem; }
.sht-call-menu--footer > .sht-call-menu__summary.sht-btn--sm { min-height: 2.75rem; }
.sht-call-menu--footer .sht-call-menu__panel a { display: flex; align-items: center; min-height: 2.75rem; }

.sht-burger {
  display: none; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%;
  border: 0; background: var(--bordo); color: var(--surface); font-size: 1.125rem; cursor: pointer; flex: none;
}
/* The burger replaces the nav in the 48em block at the end of this file. */

/* ── Footer (`.sht-footer`) ───────────────────────────────────────────── */

.sht-footer { background: var(--footer-bg); color: var(--footer-ink); }
.sht-footer a { color: var(--footer-ink); text-decoration: none; }
.sht-footer a:hover { color: var(--amber); }
.sht-footer a.sht-btn--outline-light:hover { color: var(--teal-deep); } /* white hover fill: keep the ink dark */
.sht-footer :focus-visible { outline-color: var(--amber); } /* the teal ring is too faint on the bordo footer */
.sht-footer__grid {
  max-width: var(--wrap); margin: 0 auto; padding: clamp(3.5rem, 7vw, 5.5rem) var(--gutter) 2rem;
  display: grid; --col-min: 13.75rem; gap: 2.5rem;
}
.sht-footer__col { display: flex; flex-direction: column; gap: .625rem; }
.sht-footer a.sht-footer__brand {
  display: inline-flex; align-items: center; gap: .75rem; align-self: flex-start;
  font-family: var(--font-display); font-weight: 700; font-size: calc(1.75rem * var(--heading-scale)); color: var(--surface);
}
.sht-footer__tagline { font-family: var(--font-display); font-style: italic; font-size: calc(1.125rem * var(--heading-scale)); color: var(--amber); margin: 0; }
.sht-footer__text { margin: .75rem 0 0; color: var(--footer-ink); font-size: .9375rem; line-height: 1.5; }
.sht-footer__addr { font-size: .9375rem; color: var(--footer-ink); }
.sht-footer__social { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; margin-top: .75rem; }
.sht-footer__social a { font-size: .8125rem; }
/* FTT-35: round icon buttons (export BaseFooter.dc.html) -- the unknown-
   network fallback stays a plain text link and keeps the rule above. */
.sht-footer__social a.sht-footer__social-link {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; flex: none;
  border: 1.5px solid var(--on-bordo-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--surface);
}
.sht-footer__social a.sht-footer__social-link svg { display: block; }
.sht-footer__social a.sht-footer__social-link:hover,
.sht-footer__social a.sht-footer__social-link:focus-visible {
  background: var(--amber); border-color: var(--amber); color: var(--ink);
}
.sht-footer__label { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--footer-muted); font-weight: 700; margin-bottom: .25rem; }
.sht-footer__col a { color: var(--surface); font-size: .9375rem; }
.sht-footer__hours { font-size: .8125rem; color: var(--footer-muted); }
.sht-footer__form { display: flex; flex-direction: column; gap: .5rem; }
.sht-cookie-settings-link {
  background: none; border: 0; color: var(--footer-ink); text-decoration: underline; cursor: pointer;
  font-size: .9375rem; padding: 0; text-align: left; font-family: inherit;
}
.sht-cookie-settings-link:hover { color: var(--amber); }

.sht-footer__legal {
  max-width: var(--wrap); margin: 0 auto; padding: 1.25rem var(--gutter) 1.75rem; border-top: 1px solid var(--footer-line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem;
  font-size: .8125rem; color: var(--footer-muted);
}
.sht-footer__legal p { margin: 0; line-height: 1.6; }
.sht-footer__legal-links { display: flex; gap: 1.25rem; }
.sht-footer__legal-links a { color: var(--footer-muted); }
.sht-footer__legal-links a:hover { color: var(--amber); }
.sht-footer__legal-links .sht-cookie-settings-link { color: var(--footer-muted); font-size: inherit; text-decoration: none; } /* FTT-170: the cookie link is a button that looks like its sibling */
.sht-footer__legal-links .sht-cookie-settings-link:hover { color: var(--amber); }

/* ── Misc: preview banner, messages, cookie banner ───────────────────── */

.sht-preview-banner {
  /* Not sticky: it never stuck before FTT-48, and now that the header does, a stuck banner would
     sit over it at the same top: 0 and hide the nav. It scrolls away; the header stays. */
  position: relative; z-index: 60; display: flex; align-items: center; justify-content: center;
  gap: .875rem; flex-wrap: wrap; padding: .625rem 1rem; background: var(--ink); color: var(--amber);
  font-size: .8125rem; font-weight: 600; letter-spacing: .02em;
}
.sht-preview-banner form { margin: 0; }
.sht-preview-banner button {
  border: 1px solid var(--amber); background: transparent; color: var(--amber);
  border-radius: var(--radius-pill); padding: .375rem 1rem; font-size: .75rem; font-weight: 700; cursor: pointer;
}
.sht-preview-banner button:hover { background: var(--amber); color: var(--ink); }

.sht-messages { padding-top: .75rem; }
.sht-message {
  padding: .625rem 1rem; border-radius: var(--radius-sm); margin-bottom: .5rem; font-size: .875rem;
  background: var(--ok-bg); color: var(--ok-ink);
}
.sht-message--error { background: var(--tint-bordo); color: var(--bordo); }

.sht-cookie {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 80; max-width: 40rem; margin: 0 auto;
  padding: 1.125rem 1.25rem; background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); display: none; flex-direction: column; gap: .75rem;
}
.sht-cookie.is-visible { display: flex; }
.sht-cookie p { font-size: .875rem; line-height: 1.55; }
.sht-cookie__actions { display: flex; gap: .625rem; flex-wrap: wrap; }
.sht-cookie__actions .sht-btn { padding: .625rem 1.125rem; font-size: .875rem; }

/* ── Prose / empty state ──────────────────────────────────────────────── */

.sht-prose { max-width: 47.5rem; font-size: calc(1.0625rem * var(--text-scale, 1)); line-height: 1.7; color: var(--text); }
.sht-prose h2 { font-size: calc(clamp(1.5rem, 2.4vw, 1.875rem) * var(--heading-scale)); margin: 2rem 0 .75rem; color: var(--ink); }
.sht-prose p { margin: 0 0 1rem; }
.sht-prose img { border-radius: var(--radius-md); }
.sht-prose a { color: var(--bordo); text-decoration: underline; }
/* FTT-67: what the editor can already make -- lists, a figure with its caption,
   two images side by side, a quote. (The tip box and captioned photo pairs: FTT-72.) */
.sht-prose ul, .sht-prose ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.sht-prose h3 { font-size: calc(1.25rem * var(--heading-scale)); margin: 1.5rem 0 .5rem; color: var(--ink); }
.sht-prose h4 { font-size: calc(1.0625rem * var(--heading-scale)); margin: 1.25rem 0 .5rem; color: var(--ink); } /* FTT-320: the copied travelogues use h4 */
.sht-prose img { max-width: 100%; height: auto; }
.sht-prose p:has(> img:nth-child(2)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.sht-prose p > img:nth-child(2) ~ br { display: none; }
.sht-prose figure { margin: 1.5rem 0; display: flex; flex-direction: column; gap: .625rem; }
.sht-prose figcaption { font-size: .875rem; color: var(--muted); }
.sht-prose blockquote {
  position: relative; margin: 1.5rem 0; padding: 2.75rem 2rem 1.75rem; border-radius: var(--radius-lg);
  background: var(--tint-bordo); color: var(--ink); font-family: var(--font-display); font-size: calc(1.25rem * var(--heading-scale)); line-height: 1.45;
}
.sht-prose blockquote::before {
  content: "\201C"; position: absolute; top: 1.25rem; left: 2rem; font-size: 4rem; line-height: .5; color: var(--bordo);
}
.sht-prose blockquote p:last-child { margin-bottom: 0; }
/* FTT-72: the two blocks the article editor adds (class names are the sanitiser's allow-list,
   apps/cms/sanitize.py). Tip box: eyebrow title, 0-4 value/label tiles, one paragraph. */
.sht-prose .sht-tip { display: flex; flex-direction: column; gap: 1rem; margin: 1.5rem 0; padding: 1.5rem; background: var(--surface); border-radius: var(--radius-lg); }
.sht-prose .sht-tip p { margin: 0; }
.sht-prose .sht-tip__title { font-size: .8125rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--teal); }
.sht-prose .sht-tip__facts { display: grid; --col-min: 7.5rem; gap: 1px; background: var(--line-2); border-radius: var(--radius-lg); overflow: hidden; }
.sht-prose .sht-tip__fact { display: flex; flex-direction: column; gap: .375rem; padding: .875rem 1rem; background: var(--surface); }
.sht-prose .sht-tip__v { font-family: var(--font-display); font-size: calc(1.25rem * var(--heading-scale)); font-weight: 600; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.sht-prose .sht-tip__l { font-size: calc(.875rem * var(--text-scale, 1)); color: var(--muted); }
.sht-prose .sht-tip__text { font-size: calc(.9375rem * var(--text-scale, 1)); }
/* Photos with one caption: two 3:4 side by side, or one 4:3. */
.sht-prose .sht-figs__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.sht-prose .sht-figs__row > img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.sht-prose .sht-figs__row > img:only-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
/* FTT-115: the quote with a source (`figure.sht-quote.sht-quote--3`, the export's block; the
   sanitiser keeps exactly this shape). The generic `.sht-prose figure / figcaption / blockquote`
   rules above would restyle it, so each is overridden here (more specific, not repeated in 48em:
   the export has no phone rule, the quote is 1.25rem at every width). The 2.5rem margin stands in
   for the export's flex `gap: 2.5rem` between the prose blocks. */
.sht-prose .sht-quote { gap: 1.5rem; margin: 2.5rem 0; font-size: 1rem; color: var(--ink); }
.sht-prose .sht-quote figcaption { color: var(--text); font-size: .875rem; }
.sht-prose .sht-quote blockquote { position: static; margin: 0; padding: 0; background: none; border-radius: 0; font-size: calc(1.25rem * var(--heading-scale)); }
.sht-prose .sht-quote blockquote::before { content: none; }

.sht-empty {
  border: 1.5px dashed var(--sand); border-radius: var(--radius-md); padding: 3rem 1.5rem;
  text-align: center; color: var(--muted); background: transparent;
}

/* ── Split layouts (content + sidebar: offers/offer/trip detail pages) ── */

.sht-split { display: grid; gap: 2rem; align-items: start; }
.sht-split--filters { grid-template-columns: minmax(13rem, 16.25rem) minmax(0, 1fr); }
.sht-split__main { min-width: 0; }
.sht-split__main > .sht-chips { margin-bottom: 1.25rem; }
#trips .sht-section__head > div { display: flex; flex-direction: column; gap: .625rem; }
.sht-split--offer { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); margin-top: 1.5rem; }
.sht-split--contact { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
/* two classes: the 80em and 48em `.sht-split { gap }` rules come later at one-class specificity */
.sht-split.sht-split--contact { gap: clamp(1.75rem, 4vw, 3.5rem); }
.sht-split--contact .sht-split__aside { padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: 1rem; } /* FTT-170: the export's aside is a flex column */
.sht-split--contact .sht-form__title, .sht-split--contact .sht-modal__text { margin-bottom: .25rem; }
.sht-split--trip { grid-template-columns: minmax(0, 1.5fr) minmax(17.5rem, 1fr); gap: 2.5rem; padding-top: 2.75rem; padding-bottom: 4.5rem; }
/* The splits narrow in the 80em block and stack in the 48em block, both at
   the end of this file. */
.sht-split__aside {
  background: var(--surface); border-radius: var(--radius-lg); padding: 1.5rem;
}

/* ── Trip page (`/patuvania/<code>`, FTT-64) ──────────────────────────── */
/* Head with the big price, the dot row, sticky section tabs, the content
   column and the sticky side card (mockup „Trip Rome“). Layout only; the
   parts are the shared `.sht-pagehead`, `.sht-stat`, `.sht-hero__perks`,
   `.sht-chips`, `.sht-faq`, `.sht-cta__box--bordo`, `.sht-facts`. The sticky
   rows clear the header through `--header-h`. Phone rules: the 48em block,
   comment „Пътуване“. */

/* trip, offer and hotel titles are long sentences: half of the 2026-11-08 size (3rem/3.4vw/1.75rem), owner 2026-11-08 */
.sht-trip-title { font-size: calc(clamp(.875rem, 1.7vw, 1.5rem) * var(--heading-scale)); line-height: 1.08; }
.sht-trip-head { align-items: start; } /* breadcrumb + title start on the same line as the lead (was `end`: the short title column sank below the lead) */
.sht-trip-head__side { display: flex; flex-direction: column; gap: 1.25rem; }
.sht-trip-head__closed { position: relative; min-height: 1.75rem; }
.sht-stat .sht-card__price b { font-size: calc(3rem * var(--heading-scale)); line-height: 1; }
/* FTT-542 (D686): „Очаквайте скоро“ where a price was (card, trip head, side card): words, not a number, one step smaller */
.sht-card__price.sht-card__price--soon b { font-size: calc(1.25rem * var(--heading-scale)); }
.sht-stat .sht-card__price.sht-card__price--soon b, .sht-stat__n.sht-stat__n--soon { font-size: calc(1.75rem * var(--heading-scale)); line-height: 1.15; }
.sht-trip-top { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.sht-trip-top > * { min-width: 0; }
.sht-trip-tabs {
  position: sticky; top: var(--header-h); z-index: 5; margin-top: 2rem; padding: .75rem 0;
  background: var(--header-bg); backdrop-filter: blur(.625rem); border-bottom: 1px solid var(--line);
}
.sht-trip-main { display: flex; flex-direction: column; gap: 3.5rem; min-width: 0; }
.sht-trip-section { scroll-margin-top: calc(var(--header-h) + 5rem); }
/* FTT-172: TT3 on a hotel page is a flex column in the export (title, text, facts, 1.5rem apart). */
#hotel.sht-trip-section { display: flex; flex-direction: column; gap: 1.5rem; }
#hotel.sht-trip-section > .sht-section__head { margin-bottom: 0; }
.sht-trip-prices { display: grid; --col-min: 18rem; gap: 1.25rem; }
.sht-trip-prices__card { display: flex; flex-direction: column; gap: 1rem; }
.sht-ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .75rem; }
.sht-ticks li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .625rem; font-size: .9375rem; line-height: 1.5; color: var(--text); }
.sht-ticks__mark { color: var(--green); font-weight: 700; }
.sht-prose-lines { white-space: pre-line; }
.sht-trip-hotels { margin: 0 0 1.25rem; padding-left: 1.25rem; font-size: 1rem; line-height: 1.6; color: var(--text); }
.sht-trip-card { position: sticky; top: calc(var(--header-h) + 5rem); display: flex; flex-direction: column; gap: 1.25rem; }
.sht-trip-card__facts .sht-fact { padding: .875rem 1rem; }
.sht-trip-card__facts .sht-fact__v { font-size: calc(1rem * var(--heading-scale)); }
.sht-trip-card__facts .sht-fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sht-trip-card__phone { text-align: center; }
/* FTT-170: the trip page's related section keeps the export's class list (`sht-section sht-section--tight`),
   so its rules hang on a class of the inner grid; the export's cards show the lead unclamped. */
.sht-trip-related__grid .sht-article-card .sht-article__lead { display: block; overflow: visible; }


/* FTT-106: „Дати и цени“ of the hotel page: one link row per departure, the selected one striped. */
.sht-departures__rooms { margin-bottom: 1.25rem; }
.sht-departures { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.sht-departures__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  min-height: 4.5rem; padding: 1rem 1.25rem; color: inherit; text-decoration: none;
  border-top: 1px solid var(--line-2); box-shadow: inset .25rem 0 0 transparent; background: var(--surface);
}
.sht-departures__row:first-child { border-top: 0; }
a.sht-departures__row:hover { background: var(--tint-bordo); }
.sht-departures__row.is-selected { box-shadow: inset .25rem 0 0 var(--bordo); background: var(--tint-bordo); }
.sht-departures__row.is-unavailable { color: var(--muted); }
.sht-departures__when-box { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.sht-departures__when { font-family: var(--font-display); font-weight: 600; font-size: calc(1.125rem * var(--heading-scale)); color: var(--ink); }
.is-unavailable .sht-departures__when { color: var(--muted); }
.sht-departures__right { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; }
.sht-departures__right .sht-badge { position: static; }
.sht-departures__na { font-size: .875rem; color: var(--muted); }
.sht-departures [hidden], .sht-trip-card__facts [hidden] { display: none; }
.sht-departures__note { margin-top: 1rem; }
/* Page Pochivki v2: „Цени с деца“, the same row boxes as the dates */
.sht-child-prices { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.5rem; }
.sht-child-prices[hidden] { display: none; }
.sht-trip-card__facts--hotel { --cols: 1; align-self: stretch; }
.sht-trip-related__title { display: flex; flex-direction: column; gap: .625rem; }

/* Page Pochivki v2: the hotel page's sections are panes, one shown at a time (mockup `Page Pochivki`). The
   server hides the inactive ones (`hidden`, links `?tab=` work without JS); site.js (initHotelV3) removes
   `hidden` and slides them with `data-pos` (before = to the left, after = to the right). Phone: the 48em block. */
.sht-panes { position: relative; overflow-x: clip; gap: 0; }
.sht-pane[hidden] { display: none !important; }
.sht-pane { display: flex; flex-direction: column; gap: 1.25rem; transition: transform .35s ease, opacity .35s ease, visibility 0s linear 0s; }
#hotel.sht-pane { gap: 2rem; }
#vklyuchva.sht-pane { gap: 1.5rem; }
.sht-pane > .sht-section__head { margin-bottom: 0; }
.sht-pane[data-pos="before"], .sht-pane[data-pos="after"] {
  position: absolute; inset: 0 0 auto 0; visibility: hidden; opacity: 0; pointer-events: none;
  transition: transform .35s ease, opacity .35s ease, visibility 0s linear .35s;
}
.sht-pane[data-pos="before"] { transform: translateX(-3rem); }
.sht-pane[data-pos="after"] { transform: translateX(3rem); }
.sht-pane__nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line-2); }
.sht-pane__facts { align-self: stretch; }
.sht-pane__facts [hidden] { display: none; }
.sht-pane-tab { min-height: 2.75rem; display: inline-flex; align-items: center; gap: .5rem; }
.sht-pane-tab__n { font-size: .8125rem; opacity: .75; }
/* FTT-452 (design ekskurzii v4): the excursion page's panes (own and partner, `data-hash-panes`). Layout only; rem and tokens. */
.sht-pane__body { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; scroll-margin-top: 10rem; }
.sht-pane__body > .sht-section__head { margin-bottom: 0; }
.sht-hotel-stars { font-size: .6em; color: var(--amber); white-space: nowrap; vertical-align: middle; }
.sht-info { display: flex; flex-direction: column; gap: 1.75rem; }
.sht-info__group { display: flex; flex-direction: column; gap: 1.75rem; scroll-margin-top: 10rem; }
.sht-info__sec { display: flex; flex-direction: column; gap: .875rem; padding-top: 1.5rem; border-top: 1px solid var(--line-2); scroll-margin-top: 10rem; }
.sht-info__body { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 1rem; }
.sht-info__sec .sht-faq__item { border-bottom: 0; }
.sht-long__more { align-self: flex-start; }
.sht-long__more[hidden] { display: none; }
[data-long] { position: relative; }
[data-long][data-open="0"] { max-height: 26rem; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, var(--ink) 70%, transparent); mask-image: linear-gradient(to bottom, var(--ink) 70%, transparent); }
[data-hash-panes] .sht-pane__nav .sht-btn { min-height: 2.75rem; }
[data-hash-panes] .sht-pane > .sht-facts { align-self: stretch; }
[data-hash-panes] .sht-pane > .sht-facts .sht-fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sht-trip-tabs--exc .sht-pane-tab { min-height: 2.75rem; } /* design: tap targets of the tab bar */
[data-hash-panes] .sht-pane .sht-chip { min-height: 2.75rem; display: inline-flex; align-items: center; }
/* Labels.dc.html variant "tiles": key / value tiles in rows, as many as fit side by side */
.sht-labels { display: flex; flex-direction: column; gap: 1rem; }
.sht-labels__tiles { --cols: 99; --col-min: 13rem; --fit: auto-fill; align-self: stretch; }
.sht-labels__tiles .sht-fact__k { color: var(--teal-deep); }
.sht-labels__tiles [hidden] { display: none; }
/* Labels.dc.html variant "chips": one pill per amenity name */
.sht-labels__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sht-labels__chip {
  display: flex; align-items: center; min-height: 2.25rem; padding: .5rem .875rem; box-sizing: border-box;
  border: 1px solid var(--chip-line); border-radius: var(--radius-pill); background: var(--surface);
  font-size: .875rem; line-height: 1.3; font-weight: 600; color: var(--ink);
}
.sht-labels__more, .sht-long__more { align-self: flex-start; }
.sht-labels__more[hidden], .sht-long__more[hidden] { display: none; }
/* long text: site.js folds it past 26rem (`data-open="0"`) with a fade and a button; without JS it is open */
.sht-long { display: flex; flex-direction: column; gap: 1rem; }
.sht-long [data-long] { position: relative; }
.sht-long [data-long][data-open="0"] {
  max-height: 26rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, var(--ink) 70%, transparent); mask-image: linear-gradient(to bottom, var(--ink) 70%, transparent);
}

/* Photos, day programme and „Цената не включва“ (FTT-65). The gallery is one large tile and four
   small ones (mockup `#trip-gallery`); fewer photos re-flow (`--1` .. `--4`). The tile is the shared
   `.sht-gallery__tile` (radius, sand fill) with an <img> filling it. The day programme is the
   shared `.sht-faq`; „не включва“ is the card beside „Цената включва“. Phone rules: the 48em block. */
.sht-trip-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, clamp(8rem, 15vw, 13rem)); gap: .75rem; }
.sht-trip-gallery > :first-child { grid-row: 1 / 3; }
.sht-trip-gallery__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sht-trip-gallery--1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: clamp(12rem, 28vw, 24rem); }
.sht-trip-gallery--2 { grid-template-columns: 2fr 1fr; grid-template-rows: clamp(12rem, 24vw, 21rem); }
.sht-trip-gallery--1 > :first-child, .sht-trip-gallery--2 > :first-child { grid-row: auto; }
.sht-trip-gallery--3 { grid-template-columns: 2fr 1fr; }
.sht-trip-gallery--4 > :last-child { grid-column: 2 / 4; }
/* on the offer page the blocks sit in the content column of .sht-split--offer */
.sht-split--offer .sht-trip-gallery { margin-bottom: 1.25rem; }
.sht-split--offer .sht-trip-section { margin-top: 3rem; }
.sht-trip-toggle { background: none; border-width: 0 0 1.5px; border-style: solid; border-color: currentColor; cursor: pointer; font-family: inherit; }
.sht-trip-day__head { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.sht-trip-day__date { font-weight: 500; }
.sht-trip-day__text b { color: var(--ink); }
.sht-faq__item .sht-trip-day__tags { margin-top: -.5rem; }
.sht-trip-excl { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.sht-trip-excl__row { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--line-2); }
.sht-trip-excl__what { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.sht-trip-excl__label { font-size: .9375rem; color: var(--ink); font-weight: 600; }
.sht-trip-excl__amount { font-family: var(--font-display); font-weight: 600; color: var(--ink); white-space: nowrap; }

/* ── Cruise page (`/kruizi/<slug>`, FTT-223, design `kruiz` v1): layout only, tokens only ───────────────────
   Head, perks, the shared sticky tabs (`#trip-tabs`), seven panes (one shown at a time, the rest `hidden`), the
   route (map container + day row + side panel; the map drawing is FTT-224), the configurator, boxes, the ship, the
   cabins, the decks. The export's `.kz-*` are `.sht-cruise-*`; every inline style of the export is a class here.
   Equal columns use the shared grid (`.sht-grid` + `--cols` / `--col-min`); the unequal ones are listed in
   qa/tests/test_site_layout_contract.py. The 80em and 48em rules are in the two media blocks below. */
.sht-cruise-title { font-size: calc(clamp(2.25rem, 4.4vw, 4rem) * var(--heading-scale)); }
.sht-cruise-top { margin-top: 1.5rem; }
.sht-cruise-perks .sht-badge { position: static; }
.sht-cruise-section { padding-top: 2rem; padding-bottom: var(--section-pad); }
.sht-cruise-section [hidden] { display: none; }
.sht-cruise-pane { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.sht-cruise-pane--route { gap: 1rem; }
.sht-cruise-pane--ship { gap: 1.5rem; }
.sht-cruise-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.sht-cruise-head .sht-section__title { margin: 0; }
.sht-cruise-sub { font-size: .9375rem; color: var(--muted); }
.sht-cruise-sub--text { margin: 0; }
.sht-cruise-sub a { color: var(--bordo); font-weight: 600; }
.sht-cruise-lbl { font-size: .75rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.sht-cruise-more { align-self: flex-start; min-height: 2.75rem; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--bordo); cursor: pointer; }
.sht-cruise-clamp { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sht-cruise-clamp.is-open { display: block; }

/* route: map | side panel, then the legend and the day row; the panel is sticky beside the map */
.sht-cruise-route { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem); gap: 1rem 1.25rem; align-items: start; }
.sht-cruise-route > .sht-cruise-map { grid-column: 1; grid-row: 1; }
.sht-cruise-route > .sht-cruise-bubble { grid-column: 2; grid-row: 1; }
.sht-cruise-route > .sht-cruise-key, .sht-cruise-route > .sht-cruise-days { grid-column: 1 / -1; }
.sht-cruise-route--nomap { grid-template-columns: minmax(0, 1fr); }
.sht-cruise-route--nomap > .sht-cruise-bubble { grid-column: 1; grid-row: auto; }
.sht-cruise-map { position: relative; aspect-ratio: 1000 / 560; min-width: 0; background: var(--cruise-sea); border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; }
.sht-cruise-map > .sht-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sht-cruise-map__loading { position: absolute; right: 1rem; top: 1rem; font-size: .8125rem; color: var(--muted); }
/* FTT-224: the map `cruise-map.js` draws over that box (SVG marks by class, labels as buttons over it; the partner's picture is the fallback) */
.sht-cruise-map.is-live > .sht-pic { display: none; }
.sht-cruise-map .is-off { display: none; }
.sht-cruise-map__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sht-cruise-map__land { fill: var(--bg); stroke: var(--chip-line); stroke-width: 1; }
.sht-cruise-map__leg { fill: none; stroke: var(--bordo-deep); stroke-linecap: round; }
.sht-cruise-map__leg.is-selected, .sht-cruise-map__leg.is-done { stroke: var(--bordo); }
.sht-cruise-map__leg.is-faint { stroke: var(--bordo); opacity: .3; }
.sht-cruise-map__leg--flight { stroke: var(--ink); opacity: .7; stroke-dasharray: 1 7; }
.sht-cruise-map__wake { fill: none; stroke: var(--surface); opacity: .75; stroke-linecap: round; }
.sht-cruise-map__ship { fill: var(--bordo-deep); }
.sht-cruise-map__deck { fill: var(--surface); }
.sht-cruise-map__disc { fill: var(--surface); }
.sht-cruise-map__plane { fill: var(--ink); }
.sht-cruise-map__live .sht-cruise-map__ship, .sht-cruise-map__live .sht-cruise-map__plane { fill: var(--bordo); }
.sht-cruise-map__pin { fill: var(--bordo); stroke: var(--surface); stroke-width: 2; }
.sht-cruise-map__leader { stroke: var(--bordo); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .6; }
.sht-cruise-map__layer { position: absolute; inset: 0; pointer-events: none; }
.sht-cruise-map__ctl { position: absolute; left: 1rem; top: 1rem; display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.sht-cruise-map .sht-cruise-map__play { min-height: 2.75rem; }
.sht-cruise-map__badge { padding: .375rem .75rem; border-radius: var(--radius-pill); background: var(--surface); font-size: .875rem; font-weight: 600; color: var(--ink); }
.sht-cruise-map__bar { position: absolute; left: 0; right: 0; bottom: 0; height: .25rem; background: var(--line); }
.sht-cruise-map__fill { width: 0; height: 100%; background: var(--bordo); }
.sht-cruise-pill {
  position: absolute; pointer-events: auto; display: inline-flex; align-items: center; gap: .375rem; padding: .1875rem .625rem .1875rem .1875rem;
  border: 1.5px solid var(--bordo); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink);
  font: inherit; font-size: .8125rem; font-weight: 600; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 18%, transparent);
}
.sht-cruise-pill b { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .25rem; box-sizing: border-box; border-radius: var(--radius-pill); background: var(--bordo); color: var(--surface); font-family: var(--font-display); font-size: calc(.8125rem * var(--heading-scale)); }
.sht-cruise-pill span:empty { display: none; }
.sht-cruise-pill:has(span:empty) { padding-right: .1875rem; }
.sht-cruise-pill--l { transform: translate(calc(-100% - .625rem), -50%); }
.sht-cruise-pill--r { transform: translate(.625rem, -50%); }
.sht-cruise-pill--c { transform: translate(-50%, -50%); }
.sht-cruise-pill--sea { padding: .25rem .625rem; color: var(--bordo); font-weight: 700; transform: translate(-50%, -50%); }
.sht-cruise-pill.is-active { background: var(--bordo); color: var(--surface); }
.sht-cruise-pill.is-active b { background: var(--surface); color: var(--bordo); }
.sht-cruise-pill--hide { display: none; }
.sht-cruise-pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sht-cruise-bubble {
  position: sticky; top: calc(var(--header-h) + 5rem); max-height: calc(100vh - 11rem); overflow: auto; min-width: 0;
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.sht-cruise-bubble__photo { flex: none; aspect-ratio: 16 / 6; overflow: hidden; background: var(--tint-teal); }
.sht-cruise-bubble__photo img { width: 100%; height: 100%; object-fit: cover; }
.sht-cruise-bubble__body { display: flex; flex-direction: column; gap: .75rem; padding: 1rem 1.25rem 1.25rem; }
.sht-cruise-bubble__head { display: flex; flex-direction: column; gap: .125rem; }
.sht-cruise-bubble__title { margin: 0; }
.sht-cruise-bubble__text { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.sht-cruise-bubble__text:empty { display: none; }
.sht-cruise-bubble__nav { display: flex; justify-content: space-between; gap: .5rem; padding-top: .5rem; border-top: 1px solid var(--line-2); }
.sht-cruise-bubble__nav .sht-btn { min-height: 2.75rem; }
.sht-cruise-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-2); border-radius: var(--radius-md); }
.sht-cruise-times > div { display: flex; flex-direction: column; gap: .125rem; padding: .5rem .75rem; min-width: 0; }
.sht-cruise-times > div + div { border-left: 1px solid var(--line-2); }
.sht-cruise-times small { font-size: .75rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.sht-cruise-times b { font-family: var(--font-display); font-size: calc(1.0625rem * var(--heading-scale)); font-weight: 600; color: var(--ink); white-space: nowrap; }
.sht-cruise-leg { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .125rem .5rem; padding: .75rem .875rem; background: var(--bg); border-radius: var(--radius-md); font-size: .875rem; color: var(--text); }
.sht-cruise-leg b { color: var(--ink); }
.sht-cruise-leg__icon { color: var(--bordo); font-weight: 700; }
.sht-cruise-key { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; font-size: .8125rem; color: var(--text); }
.sht-cruise-key > span { display: inline-flex; align-items: center; gap: .5rem; }
.sht-cruise-key > .sht-cruise-sub { font-size: inherit; }
.sht-cruise-key__mark { width: 1.625rem; height: .625rem; }
.sht-cruise-key__ship { fill: none; stroke: var(--bordo); stroke-width: 2.5; }
.sht-cruise-key__flight { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 1 5; stroke-linecap: round; }
.sht-cruise-key__sea { color: var(--bordo); }
.sht-cruise-days { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; }
.sht-cruise-days::-webkit-scrollbar { display: none; }
.sht-cruise-day {
  flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: .125rem; min-width: 7.5rem; min-height: 2.75rem;
  padding: .625rem .875rem; border: 1px solid var(--chip-line); border-radius: var(--radius-md); background: var(--surface);
  text-align: left; text-decoration: none; color: var(--ink);
}
.sht-cruise-day small { font-size: .75rem; color: var(--muted); font-weight: 600; }
.sht-cruise-day span { font-size: .875rem; font-weight: 600; white-space: nowrap; }
.sht-cruise-day.is-active { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.sht-cruise-day.is-active small { color: var(--surface); }

/* dates and prices: the configurator */
.sht-cruise-cfg { display: flex; flex-direction: column; gap: 1.25rem; padding: clamp(1.25rem, 2vw, 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); }
.sht-cruise-block { display: flex; flex-direction: column; gap: .5rem; }
.sht-cruise-nowrap .sht-chip { flex: none; white-space: nowrap; }
.sht-cruise-chip__min { font-weight: 500; opacity: .8; margin-left: .25rem; }
.sht-cruise-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, .8fr); gap: 1rem; }
.sht-cruise-f { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.sht-cruise-f .sht-input { width: 100%; min-height: 2.75rem; padding: .75rem 1rem; background: var(--bg); border: 1px solid var(--chip-line); color: var(--ink); }
.sht-cruise-f--age { width: 8rem; }
.sht-cruise-ages { display: flex; flex-wrap: wrap; gap: 1rem; }
.sht-cruise-ages:empty { display: none; }
.sht-cruise-step { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; align-items: center; min-height: 2.75rem; background: var(--bg); border: 1px solid var(--chip-line); border-radius: var(--radius-md); }
.sht-cruise-step button { height: 2.75rem; padding: 0; border: 0; background: transparent; font: inherit; font-size: 1.25rem; color: var(--bordo); cursor: pointer; }
.sht-cruise-step button:disabled { color: var(--muted); opacity: .5; cursor: default; }
.sht-cruise-step input { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; text-align: center; font: inherit; font-size: 1rem; color: var(--ink); appearance: textfield; -moz-appearance: textfield; }
.sht-cruise-step input::-webkit-outer-spin-button, .sht-cruise-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sht-cruise-info { display: flex; flex-direction: column; align-items: flex-start; }
.sht-cruise-info:has(> .sht-cruise-info__text:empty) { display: none; }
.sht-cruise-info__text { margin: 0; font-size: .875rem; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sht-cruise-info__text:empty { display: none; }
.sht-cruise-info__text.is-open { display: block; }
.sht-cruise-cabs { --cols: 4; --col-min: 6.5rem; --col-gap: .75rem; --row-gap: .75rem; }
.sht-cruise-cab {
  display: flex; flex-direction: column; gap: .25rem; min-width: 0; min-height: 2.75rem; padding: .875rem 1rem; border: 1px solid var(--chip-line);
  border-radius: var(--radius-lg); background: var(--bg); text-align: left; text-decoration: none; color: var(--ink); cursor: pointer;
}
.sht-cruise-cab__name { font-size: .875rem; font-weight: 600; }
.sht-cruise-cab b { font-family: var(--font-display); font-size: calc(1.375rem * var(--heading-scale)); font-weight: 600; }
.sht-cruise-cab s { font-size: .8125rem; color: var(--muted); }
.sht-cruise-cab.is-active { border-color: var(--bordo); box-shadow: inset 0 0 0 1px var(--bordo); background: var(--tint-bordo); }
.sht-cruise-cab.is-off { cursor: default; opacity: .5; }
.sht-cruise-result { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; padding: 1.25rem 1.5rem; background: var(--bg); border-radius: var(--radius-lg); }
.sht-cruise-result__body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.sht-cruise-total { font-family: var(--font-display); font-size: calc(1.75rem * var(--heading-scale)); font-weight: 600; color: var(--ink); }
.sht-cruise-note { font-size: .875rem; color: var(--text); }

/* boxes, rich text of the partner, the ship, the cabins, the decks */
.sht-cruise-two { --cols: 2; --col-min: 20rem; --col-gap: 1.5rem; --row-gap: 1.5rem; align-items: start; }
.sht-cruise-box { display: flex; flex-direction: column; gap: .75rem; min-width: 0; padding: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.sht-cruise-box .sht-form__title { margin: 0; }
.sht-cruise-set { display: flex; flex-direction: column; gap: 1.25rem; }
.sht-cruise-prose { font-size: .9375rem; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.sht-cruise-prose > :first-child { margin-top: 0; }
.sht-cruise-prose > :last-child { margin-bottom: 0; }
.sht-cruise-prose p { margin: 0 0 .75rem; }
.sht-cruise-prose ul, .sht-cruise-prose ol { margin: 0 0 .75rem; padding-left: 1.125rem; display: flex; flex-direction: column; gap: .5rem; }
.sht-cruise-prose h2, .sht-cruise-prose h3, .sht-cruise-prose h4 { margin: 1rem 0 .5rem; font-size: calc(1.0625rem * var(--heading-scale)); color: var(--ink); }
.sht-cruise-prose a { color: var(--bordo); }
.sht-cruise-prose img { max-width: 100%; height: auto; }
.sht-cruise-prose table { width: 100%; border-collapse: collapse; }
.sht-cruise-prose td, .sht-cruise-prose th { padding: .375rem .625rem; border: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.sht-cruise-tile { padding: 0; border: 0; cursor: pointer; display: block; font: inherit; }
/* FTT-227: the ship pane's fact tiles and collapsible sections are the shared `.sht-facts`/`.sht-fact` and `.sht-faq`. Kept
   differences (docs/FRONTEND-DESIGN.md, page-local variants): the number of facts is not fixed, so the tiles stand apart
   (a joined grid would show empty cells) and the grid is fluid; the value sits above its label, which is a plain muted line. */
.sht-cruise-facts { --fit: auto-fill; --cols: 99; --col-min: 9rem; --col-gap: .75rem; --row-gap: .75rem; background: none; border-radius: 0; overflow: visible; align-self: stretch; }
.sht-cruise-facts .sht-fact { gap: .125rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.sht-cruise-facts .sht-fact__v { font-size: calc(1.375rem * var(--heading-scale)); }
.sht-cruise-facts .sht-fact__k { font-size: .8125rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.sht-cruise-secs { max-width: 56rem; }
.sht-cruise-cabins { --cols: 2; --col-min: 26rem; --col-gap: 1rem; --row-gap: 1rem; }
.sht-cruise-cabin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.sht-cruise-cabin__media { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.sht-cruise-cabin__photo { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; font: inherit; background: var(--tint-teal); overflow: hidden; }
button.sht-cruise-cabin__photo { cursor: pointer; }
.sht-cruise-cabin__note { margin: 0; padding: 0 .75rem .75rem; font-size: .75rem; line-height: 1.4; color: var(--muted); }
.sht-cruise-cabin__photo > .sht-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sht-cruise-cabin__body { display: flex; flex-direction: column; gap: .625rem; min-width: 0; padding: 1.25rem 1.5rem; }
.sht-cruise-cabin__title { margin: 0; font-size: calc(1.25rem * var(--heading-scale)); }
.sht-cruise-bare-wrap { display: flex; flex-direction: column; gap: .75rem; }
.sht-cruise-bare-title { margin: 0; font-size: calc(1.125rem * var(--heading-scale)); }
.sht-cruise-bare { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.sht-cruise-bare__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; min-height: 2.75rem; padding: .75rem 1.25rem; border-top: 1px solid var(--line-2); font-size: .9375rem; }
.sht-cruise-bare__row:first-child { border-top: 0; }
.sht-cruise-bare__row b { color: var(--ink); }
.sht-cruise-bare__ask { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .875rem; font-weight: 600; color: var(--bordo); }
.sht-cruise-decks { --cols: 2; --col-min: 22rem; --col-gap: 1.25rem; --row-gap: 1.25rem; }
.sht-cruise-deck { display: flex; flex-direction: column; gap: .5rem; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; text-align: left; color: var(--ink); }
.sht-cruise-deck__img { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.sht-cruise-deck__img img { width: 100%; height: auto; object-fit: contain; }
.sht-cruise-deck__caption { font-size: .9375rem; font-weight: 600; }
.sht-cruise-plan { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 6; padding: 2rem; text-align: center; border: 1px dashed var(--chip-line); border-radius: var(--radius-xl); background: var(--surface); color: var(--muted); }
.sht-cruise-plan p { margin: 0; }

/* ── Legacy public-form pages (registration/success/kniga): a thin
   consistent bar, everything below it untouched from the pinned pages. ── */

.sht-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1.25rem; background: var(--ink); color: var(--surface);
}
.sht-bar__brand { display: flex; align-items: center; gap: .625rem; text-decoration: none; color: var(--surface); }
.sht-bar__brand:hover { color: var(--surface); }
.sht-bar__brand img { width: 2.5rem; height: auto; }
.sht-bar__brand span { font-family: var(--font-display); font-weight: 600; font-size: calc(.9375rem * var(--heading-scale)); }
.sht-bar__phone { color: var(--surface); text-decoration: none; font-weight: 600; font-size: .875rem; }
.sht-bar-footer {
  padding: 1.125rem 1.25rem 1.75rem; background: var(--ink); color: var(--surface);
  font-size: .8125rem; text-align: center; line-height: 1.7;
}
/* FTT-180: the standalone pages (success, closed form, kniga) style a bare `p`; the footer line must not take it */
.sht-bar-footer p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.sht-bar-footer a { color: var(--amber); }
.sht-bar-footer button.sht-cookie-settings-link {
  background: none; border: 0; color: var(--amber); text-decoration: underline; cursor: pointer;
  font-size: .8125rem; padding: 0;
}

/* ── Bottom action dock (`.sht-dock`, FTT-28) ─────────────────────────── */
/* The 2026-09 mobile design's always-visible "Обади се · Изпрати запитване"
   pill. Only rendered from base.html and only shown on phones (the
   `.sht-has-dock` body class + the ≤ 48em block below); `--dock-space`
   is the room the footer and the cookie banner leave for it. */

.sht-dock {
  display: none; position: fixed; left: .75rem; right: .75rem; bottom: .875rem; z-index: 75;
  max-width: 32rem; margin: 0 auto; background: var(--ink); border-radius: var(--radius-pill); padding: .375rem;
  grid-template-columns: 1fr 1.3fr; gap: .375rem; box-shadow: var(--shadow-dock);
}
.sht-dock a {
  display: flex; align-items: center; justify-content: center; min-height: 3rem;
  border-radius: var(--radius-pill); font-size: .9375rem; font-weight: 600;
  color: var(--surface); text-decoration: none;
}
.sht-dock a:hover { color: var(--surface); }
.sht-dock__note { grid-column: 1 / -1; padding: 0 .75rem .125rem; font-size: .6875rem; line-height: 1.3; text-align: center; color: var(--surface); }
.sht-dock__cta { background: var(--amber); color: var(--ink); font-weight: 700; }
.sht-dock__cta:hover { background: var(--amber-hover); }
.sht-dock a.sht-dock__cta, .sht-dock a.sht-dock__cta:hover { color: var(--ink); }

/* ── Filter sheet (`.sht-sheet`, FTT-28) ──────────────────────────────── */
/* Wraps a `[data-chips]` group. On desktop it is invisible (display:
   contents — the chips sit exactly where they always did). On phones the
   chips move into a bottom sheet opened by `[data-sheet-open]` (the
   sticky "Филтри · Всички" button) and closed by `[data-sheet-close]`,
   the backdrop or Escape; site.js keeps the button label and the "Покажи
   N" count in step with the active chip. */

.sht-sheet, .sht-sheet__panel { display: contents; }
.sht-sheet__handle, .sht-sheet__title, .sht-sheet__kicker, .sht-sheet__apply, .sht-filter-row, .sht-more-mobile { display: none; }
/* FTT-41: with the wrapper gone the chip rows are siblings of the offer grid
   and nothing spaces them: .75rem between rows, 2rem before the grid. The
   last row is the last <div> (the apply button is the panel's last child but
   a <button>), so a destination with a single row still gets the 2rem. The
   phone block resets this; there the panel is a flex column with its own gap. */
.sht-sheet__panel > .sht-chips { margin-bottom: .75rem; }
.sht-sheet__panel > .sht-chips:last-of-type { margin-bottom: 2rem; }

/* ── Side search panel (`.sht-filters`, FTT-78, design FilterSidebar) ─────── */
/* One form, two looks. Above 48em it is the boxed panel in the `.sht-split--filters` column
   (its width comes from the column, never from here); on a phone it is the `.sht-sheet__panel`
   of the sheet that the sticky `.sht-filter-row` opens (rules in the 48em block), so the boxed
   background / border / radius / padding below are overridden there. Inputs sit on the page
   background with a hairline border (the designer: not white). The submit button has its own
   class, always visible: `.sht-sheet__apply` is hidden by default and would leave a visitor
   without JavaScript no way to search. */
.sht-filters {
  display: flex; flex-direction: column; gap: 1.125rem; min-width: 0;
  background: var(--bg); border: 1px solid var(--chip-line); border-radius: var(--radius-lg); padding: 1.5rem;
}
.sht-filters [hidden] { display: none; }
.sht-filters .sht-sheet__title { display: block; margin: 0; }
.sht-filters .sht-input {
  background: var(--bg); border: 1px solid var(--chip-line); color: var(--ink); font-weight: 500; padding: .75rem 1rem; min-width: 0;
}
.sht-filters select.sht-input { text-overflow: ellipsis; }
.sht-filters .sht-input:focus { border-color: var(--bordo); }
.sht-filters__k { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); padding: 0; }
/* FTT-170: the markup follows the export's, whose select wrappers, dates fieldset and the Възрастни/Деца
   row carry no class of their own (qa/ui pairs elements by their class chain), so these are structural. */
.sht-filters__group, .sht-filters > fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.sht-filters__group > legend, .sht-filters > fieldset > legend { margin-bottom: .5rem; }
.sht-filters > label { display: flex; flex-direction: column; min-width: 0; } /* a select in its plain label */
.sht-filters .sht-sheet__kicker { display: block; padding: 0; font-size: .75rem; font-weight: 700; letter-spacing: .14em; color: var(--ink); } /* hidden outside the sheet elsewhere; here the panel's field label */
.sht-filters > fieldset > label { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: normal; gap: .5rem; font-size: .875rem; color: var(--text); }
.sht-filters > fieldset > label .sht-input { padding: .625rem .75rem; }
.sht-filters__ages, .sht-filters > div:not([class]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.sht-filters > div:not([class]) > label { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.sht-filters__age { display: flex; flex-direction: column; gap: .375rem; font-size: .8125rem; color: var(--text); min-width: 0; }
.sht-filters__hint { margin: 0; font-size: .8125rem; color: var(--muted); }
.sht-filters__opt { color: var(--muted); }
.sht-filters.is-live .sht-filters__opt { display: none; } /* JS shows only as many age fields as children */
.sht-filters__dates { display: flex; flex-direction: column; gap: .375rem; min-width: 0; } /* FTT-451: the range picker's field */
.sht-filters__actions { display: flex; flex-direction: column; gap: .5rem; margin-top: .25rem; }
.sht-filters__submit { font-weight: 600; }
.sht-filters__clear { min-height: 2.75rem; }

/* ── Mobile nav overlay (`.sht-drawer`, FTT-28) ───────────────────────── */
/* Replaces the FTT-20 push-down drawer: a full-screen bordo overlay with
   display-font links, the phone number and an amber "Актуални оферти",
   as in the mobile design's M1 menu. Lives outside `.sht-header` (whose
   backdrop-filter would otherwise trap position: fixed). */

.sht-drawer {
  display: none; position: fixed; inset: 0; z-index: 70; flex-direction: column;
  background: var(--bordo); color: var(--surface); padding: 1rem var(--gutter) 2rem;
  overflow-y: auto; overscroll-behavior: contain;
}
/* `.is-open` only opens it inside the 48em block: a drawer left open while
   the window is widened simply disappears with the burger. */
.sht-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.sht-drawer__brand { font-family: var(--font-display); font-weight: 700; font-size: calc(1.375rem * var(--heading-scale)); color: var(--surface); }
.sht-drawer__close {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; padding: 0;
  background: var(--surface); color: var(--bordo); font-size: 1rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
}
.sht-drawer > a {
  font-family: var(--font-display); font-size: calc(clamp(1.625rem, 7.5vw, 2rem) * var(--heading-scale)); font-weight: 500; line-height: 1.2;
  color: var(--surface); text-decoration: none; padding: .625rem 0; border-bottom: 1px solid var(--on-bordo-line);
}
.sht-drawer > a:hover { color: var(--amber); }
.sht-drawer__actions { display: flex; flex-direction: column; gap: .625rem; margin-top: auto; padding-top: 1.5rem; }
.sht-drawer__actions .sht-btn { width: 100%; min-height: 3.25rem; }

/* ── Cruise search (`/kruizi`, FTT-222, design/kruizi `Kruizi.dc.html`): layout only, every colour is a token ─────── */
/* The panel is a surface card (it overrides the side search's `.sht-filters` box it borrows the inputs from); above 48em it
   is in the page, on a phone it is the bottom sheet's panel (rules in the 48em block). The month chips, the duration
   chips and the two „Кога“ chips are real checkboxes / radios under an invisible full-size input, so the page works
   without JavaScript; the grids are the shared `.sht-grid` with their own `--cols`. */
.sht-cruise-main { padding-top: 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.sht-cruise-main > * { min-width: 0; }
.sht-cruise-subnav { display: flex; flex-wrap: wrap; gap: .5rem; }
.sht-cruise-subnav .sht-chip { flex: none; white-space: nowrap; }
.sht-cruise-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl);
  padding: clamp(1.25rem, 2vw, 2rem); display: flex; flex-direction: column; gap: 1.5rem;
}
.sht-cruise-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sht-cruise-panel__hint { font-size: .875rem; color: var(--muted); }
.sht-cruise-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.sht-cruise-when { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.sht-cruise-when__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sht-cruise-when__label { color: var(--ink); }
.sht-cruise-when__months, .sht-cruise-when__period { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.sht-cruise-when:has(input[name="when"][value="period"]:checked) .sht-cruise-when__months,
.sht-cruise-when:has(input[name="when"][value="months"]:checked) .sht-cruise-when__period { display: none; }
.sht-cruise-dur { display: flex; flex-direction: column; gap: .625rem; margin-top: .5rem; }
.sht-cruise-seg { display: inline-flex; padding: .25rem; background: var(--bg); border-radius: var(--radius-pill); gap: .25rem; }
.sht-cruise-seg__opt {
  position: relative; display: inline-flex; align-items: center; min-height: 2.25rem; padding: .5rem 1rem;
  border-radius: var(--radius-pill); font-weight: 600; font-size: .875rem; color: var(--text); cursor: pointer;
}
.sht-cruise-seg__opt:has(> input:checked) { background: var(--ink); color: var(--surface); }
.sht-cruise-seg__opt > input, .sht-cruise-month > input, .sht-cruise-choice > input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.sht-cruise-month, .sht-cruise-choice { position: relative; }
.sht-cruise-month:has(> input:checked), .sht-cruise-choice:has(> input:checked) { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.sht-cruise-seg__opt:has(> input:focus-visible), .sht-cruise-month:has(> input:focus-visible), .sht-cruise-choice:has(> input:focus-visible) {
  outline: .1875rem solid var(--teal); outline-offset: .1875rem;
}
.sht-cruise-panel .sht-cruise-months .sht-chip { justify-content: center; min-height: 2.75rem; padding-left: .25rem; padding-right: .25rem; }
.sht-cruise-months { --cols: 6; --col-min: 0rem; --col-gap: .5rem; --row-gap: .5rem; }
.sht-cruise-month.is-disabled { opacity: .4; pointer-events: none; }
.sht-cruise-yearblock { display: flex; flex-direction: column; gap: .5rem; }
.sht-cruise-yearblock__label { font-size: .875rem; font-weight: 600; color: var(--text); }
.sht-cruise-panel.is-live .sht-cruise-yearblock__label, .sht-cruise-panel.is-live .sht-cruise-yearblock:not(.is-current) { display: none; }
.sht-cruise-picked { display: flex; flex-wrap: wrap; gap: .375rem; }
.sht-cruise-picked button {
  display: inline-flex; align-items: center; gap: .375rem; border: 0; background: var(--tint-bordo); color: var(--bordo-deep);
  font: inherit; font-size: .8125rem; font-weight: 600; padding: .375rem .75rem; border-radius: var(--radius-pill); cursor: pointer;
}
.sht-cruise-fields { --cols: 2; --col-min: 10rem; --col-gap: 1rem; --row-gap: .875rem; }
.sht-cruise-fields--side { align-content: start; }
.sht-cruise-field { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.sht-cruise-field > span { font-size: .8125rem; font-weight: 600; color: var(--ink); }
.sht-cruise-field .sht-input { min-height: 2.75rem; }
.sht-cruise-points { gap: .5rem; }
.sht-cruise-point-row { display: flex; align-items: center; gap: .5rem; }
.sht-cruise-point-row .sht-input { flex: 1 1 auto; min-width: 0; }
.sht-cruise-point-remove {
  flex: none; display: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid var(--chip-line); border-radius: var(--radius-md); background: var(--bg); color: var(--bordo);
  font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.is-live .sht-cruise-point-remove { display: inline-flex; }
.sht-cruise-point-remove:focus-visible { outline: .1875rem solid var(--teal); outline-offset: .1875rem; }
.sht-cruise-point-add { align-self: flex-start; min-height: 2.75rem; }
.sht-cruise-point-add[hidden] { display: none; }
.sht-cruise-panel__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-top: 1.25rem; border-top: 1px solid var(--line-2);
}
.sht-cruise-panel__note { flex: 1 1 18rem; font-size: .875rem; color: var(--muted); }
.sht-cruise-panel__actions { display: flex; gap: .5rem; flex-wrap: wrap; flex: 1 1 auto; justify-content: flex-end; }
.sht-cruise-clear { min-height: 2.75rem; }
.sht-cruise-results { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 1.5rem; }
.sht-cruise-results__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sht-cruise-sort { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .875rem; color: var(--ink); min-width: 0; max-width: 100%; }
.sht-cruise-sort label { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; max-width: 100%; }
/* FTT-237: the select keeps its natural width but never more than the row (360 px at 130 % text ran past the screen) */
.sht-cruise-sort .sht-input { width: auto; max-width: 100%; min-width: 0; padding: .5rem .875rem; border: 1px solid var(--chip-line); min-height: 2.75rem; }
.sht-cruise-grid { --cols: 4; --col-min: 16rem; } /* FTT-450 (kruizi v2): was 3 / 17rem, the design overturns FTT-222's three columns */
.sht-cruise-note { margin: 0; font-size: .875rem; color: var(--muted); }
.sht-cruise-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.sht-cruise-empty > p { margin: 0; }

/* ══ The two breakpoints (docs/FRONTEND-DESIGN.md "Layout contract") ══════
   Everything above this line is the desktop layout, drawn at 1920 and fluid
   inside the 90rem container. Only two blocks step it down, and no other
   media query may be added to this file
   (qa/tests/test_site_layout_contract.py):

     @media (max-width: 80em)   small laptops / 720p — same layout, tighter
     @media (max-width: 48em)   mobile — burger, stacked columns, the phone
                                layout (dock, drawer, sheets, swipe rows)

   Never a block for 1080p, 2K or 4K. */

/* Where the phone layout differs structurally, a section carries both
   blocks in one template: `.sht-hide-phone` (hidden in the 48em block) and
   `.sht-only-phone` (shown only there). Width decides, nothing else. Put
   `.sht-only-phone` on a plain wrapper: it is shown with `display: revert`. */
.sht-only-phone { display: none; }

/* FTT-331: /ekskurzii search row (export Ekskurzii.dc.html): layout only, tokens only */
.sht-ex-top { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.sht-ex-lead { display: flex; flex-direction: column; gap: 1.25rem; }
.sht-ex-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(1.25rem, 2vw, 1.75rem); display: flex; flex-direction: column; gap: 1.25rem; }
.sht-ex-panel .sht-form__title { margin: 0; }
.sht-ex-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.6fr) auto; gap: .875rem 1rem; align-items: end; }
.sht-ex-field { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.sht-ex-field > span { font-size: .8125rem; font-weight: 600; color: var(--ink); }
.sht-ex-field .sht-input { min-height: 2.75rem; box-sizing: border-box; width: 100%; padding: .75rem 1rem; background: var(--bg); border: 1px solid var(--chip-line); color: var(--ink); } /* FTT-469: the mockup's .ex-field .sht-input; the date button takes it too */
.sht-ex-field .sht-input:focus { border-color: var(--bordo); }
.sht-ex-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.sht-ex-grid { --cols: 4; --col-min: 16rem; } /* FTT-450 (ekskurzii-search v2): the same declaration as .sht-hsearch-grid */
.sht-ex-submit { min-height: 2.75rem; }
.sht-ex-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.sht-ex-note { font-size: .875rem; color: var(--muted); }
.sht-ex-clear { min-height: 2.75rem; }
.sht-ex-trigger { display: none; }
/* FTT-332: the holiday search `/pochivki` (design pochivki-search v1). Layout only; colours are tokens. */
.sht-hsearch-main { padding-top: 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.sht-hsearch-main > * { min-width: 0; }
.sht-hsearch { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(1.25rem, 2vw, 1.75rem); display: flex; flex-direction: column; gap: 1.25rem; }
.sht-hsearch__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .875rem 1rem; align-items: end; }
.sht-hsearch__field { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.sht-hsearch__field--dates .sht-ex-dates { display: flex; flex-direction: column; gap: .5rem; }
.sht-hsearch__field > span {font-size: .8125rem; font-weight: 600; color: var(--ink); }
.sht-hsearch__field .sht-input { min-height: 2.75rem; box-sizing: border-box; width: 100%; }
.sht-hsearch__submit { min-height: 2.75rem; }
.sht-hsearch__steps { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 1rem 1.25rem; background: var(--tint-teal); border-radius: var(--radius-lg); }
.sht-hsearch__step { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; align-items: start; }
.sht-hsearch__step > div { display: flex; flex-direction: column; gap: .125rem; }
.sht-hsearch__step b { color: var(--ink); }
.sht-hsearch__step span { font-size: .875rem; color: var(--text); }
.sht-hsearch__step > .sht-hsearch__n { width: 2rem; height: 2rem; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: calc(1rem * var(--heading-scale)); }
.sht-hsearch__foot { display: flex; justify-content: flex-end; }
.sht-hsearch-results { padding-top: 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
.sht-hsearch-grid { --cols: 4; --col-min: 16rem; }
.sht-hsearch-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
/* FTT-333 pochivki v6: „Кога и кой пътува?“ box at the top of Дати и цени (layout only; colours are tokens) */
.pk-party { display: flex; flex-direction: column; gap: 1.25rem; padding: clamp(1.25rem, 2vw, 1.75rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); }
.pk-party[hidden] { display: none; }
.pk-party__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; }
.pk-cfg__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: .875rem 1rem; }
.pk-ages { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: .75rem; }
.pk-party__kids { display: flex; flex-direction: column; gap: .5rem; }
.pk-party__kids[hidden], .pk-party__warn[hidden] { display: none; }
.pk-f { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.pk-f > span { font-size: .8125rem; font-weight: 600; color: var(--ink); }
.pk-f .sht-input { width: 100%; box-sizing: border-box; min-height: 2.75rem; }
.pk-party__warn { margin: 0; padding: .75rem 1rem; background: var(--tint-amber); border-radius: var(--radius-md); font-size: .9375rem; color: var(--ink); }
.pk-sum { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.25rem; flex-wrap: wrap; padding-top: 1.25rem; border-top: 1px solid var(--line-2); }
.pk-sum__lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .375rem; flex: 1 1 18rem; font-size: .9375rem; color: var(--text); }
.pk-sum__lines li { display: flex; justify-content: space-between; gap: 1rem; }
.pk-sum__lines b { color: var(--ink); text-align: right; }
.pk-sum__act { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; justify-content: flex-end; flex: 0 1 auto; }
.pk-sum__total { display: flex; flex-direction: column; align-items: flex-end; gap: .125rem; }
.pk-sum__n { font-family: var(--font-display); font-weight: 600; font-size: calc(clamp(1.75rem, 2.4vw, 2.25rem) * var(--heading-scale)); line-height: 1.1; color: var(--ink); white-space: nowrap; }
/* FTT-337 pochivki v7: the offer rows (layout only; colours are tokens). The „Търсене на дати“ form is gone (FTT-463, v10) */
.pk-offers[hidden], .pk-offers [hidden] { display: none; }
.pk-offers { display: flex; flex-direction: column; gap: .75rem; padding: clamp(1.25rem, 2vw, 1.75rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); scroll-margin-top: 10rem; }  /* FTT-464 (v10): its own card under the month table */
.pk-offers__live { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.pk-offers__ask { align-self: flex-start; }
.pk-offers__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; }
.pk-offers__title { margin: 0; font-size: calc(1.125rem * var(--heading-scale)); }
.pk-offers__list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.pk-offers__list:empty { display: none; }
.pk-offers__note { font-size: .8125rem; }
.pk-offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem 1.25rem; align-items: center; padding: 1rem 1.25rem; background: var(--surface); border-top: 1px solid var(--line-2); }
.pk-offer:first-child { border-top: 0; }
.pk-offer__main { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.pk-offer__room { font-family: var(--font-display); font-size: calc(1.0625rem * var(--heading-scale)); color: var(--ink); overflow-wrap: anywhere; }
.pk-offer__act { display: flex; align-items: center; gap: 1rem; justify-content: flex-end; flex-wrap: wrap; }
.pk-offer__price { display: flex; flex-direction: column; align-items: flex-end; gap: .125rem; }
.pk-offer__total { font-family: var(--font-display); font-weight: 600; font-size: calc(1.5rem * var(--heading-scale)); line-height: 1.1; color: var(--ink); white-space: nowrap; }
.pk-offer__pp { font-size: .8125rem; }
.pk-early { display: flex; flex-direction: column; gap: .375rem; padding: 1rem 1.25rem; background: var(--tint-teal); border-radius: var(--radius-md); }
.pk-early[hidden] { display: none; }
.pk-early__head, .pk-early__text { margin: 0; font-size: .9375rem; }
.pk-early__head { font-weight: 700; color: var(--ink); }
.pk-early__text { line-height: 1.6; color: var(--text); }

/* pochivki v3/v10 table (`.pk-dep`, `.pk-month`): defined BEFORE the 80em/48em blocks so their phone and laptop rules win the cascade */
.pk-dep { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.pk-row { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(var(--n, 3), minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.pk-row:first-child { border-top: 0; }
.pk-row--head { font-size: .8125rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pk-row--head > span { padding: .875rem 1.25rem; }
.pk-row--head > span + span { border-left: 1px solid var(--line-2); }
.pk-when { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.25rem; min-width: 0; }
.pk-when b { font-family: var(--font-display); font-weight: 600; font-size: calc(1.125rem * var(--heading-scale)); color: var(--ink); }
.pk-cell { display: flex; flex-direction: column; justify-content: center; gap: .125rem; min-height: 4.75rem; padding: .875rem 1.25rem; box-sizing: border-box; border-left: 1px solid var(--line-2); color: inherit; text-decoration: none; min-width: 0; }
a.pk-cell:hover { background: var(--tint-bordo); }
.pk-cell.is-selected { background: var(--tint-bordo); box-shadow: inset 0 0 0 2px var(--bordo); }
.pk-cell.is-stop { background: var(--bg); }
.pk-cell b { font-family: var(--font-display); font-weight: 600; font-size: calc(1.125rem * var(--heading-scale)); color: var(--ink); }
.pk-price { display: flex; flex-direction: column; gap: .125rem; }
.pk-room { display: none; }
.pk-ask { grid-column: 2 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .875rem 1.25rem; border-left: 1px solid var(--line-2); background: var(--tint-amber); }
.pk-ask__text { display: flex; flex-direction: column; gap: .125rem; }
.pk-ask__text b { font-family: var(--font-display); color: var(--ink); }
.pk-ask__line { font-size: .9375rem; color: var(--ink); }
/* FTT-544: the month table takes the full width of the page; more than 8 rooms scroll sideways inside the card with the date column fixed */
.sht-split.sht-split--full { grid-template-columns: minmax(0, 1fr); }
.pk-dep--scroll { overflow-x: auto; }
.pk-dep--scroll .pk-row { grid-template-columns: 12rem repeat(var(--n), 10rem); width: max-content; min-width: 100%; }
.pk-dep--scroll .pk-row--head > span:first-child, .pk-dep--scroll .pk-when { position: sticky; left: 0; z-index: 1; background: var(--surface); }
/* pochivki v10 (FTT-463): the month table card „Цени за месец“ above `.pk-dep` (layout only; colours are tokens) */
.pk-month { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.25rem, 2vw, 1.75rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); scroll-margin-top: 10rem; }
.pk-month [hidden] { display: none; }
.pk-month__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; }
.pk-month__nav { display: flex; align-items: center; gap: .5rem; }
.pk-month__chip { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; box-sizing: border-box; text-decoration: none; }
.pk-month__chip[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }
.pk-month__name { margin: 0; min-width: 9rem; text-align: center; }
.pk-month__group { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .9375rem; color: var(--ink); }
.pk-month__sel { width: auto; min-height: 2.75rem; padding: .5rem 1rem; background: var(--bg); border: 1px solid var(--chip-line); color: var(--ink); }
.pk-month__ages { display: flex; flex-direction: column; gap: .5rem; }
.pk-month .pk-f .sht-input { padding: .75rem 1rem; background: var(--bg); border: 1px solid var(--chip-line); color: var(--ink); }
.pk-cap { font-weight: 400; text-transform: none; letter-spacing: 0; }
.pk-small { font-size: .8125rem; }
.pk-best { position: static; align-self: flex-start; margin-top: .25rem; }
.pk-cell--wide { grid-column: 2 / -1; }

/* ── Small laptops (≤ 80em / 1280px) ──────────────────────────────────── */
/* The desktop layout, stepped down: narrower gutters and section rhythm, a
   header that still shows the whole nav down to 769px, slimmer sidebars. */
@media (max-width: 80em) {
  /* FTT-448: the contacts call list opens in the flow here (the info column can be narrower than the two buttons, an
     absolute list would cover the e-mail button); the row keeps both buttons at the top. */
  .sht-hero__actions { align-items: flex-start; }
  .sht-call-menu--inline .sht-call-menu__panel { position: static; margin-top: .5rem; }
  :root {
    --gutter: clamp(1.25rem, 3vw, 2.5rem);
    --section-pad: clamp(5rem, 9vw, 8rem);
    --section-pad-tight: clamp(4.5rem, 8vw, 7rem);
  }

  /* Header: the tagline goes, links and gaps scale with the width. */
  .sht-header__inner { gap: clamp(.375rem, 1.6vw, 1.5rem); padding-left: clamp(.75rem, 1.5vw, 2.5rem); padding-right: clamp(.75rem, 1.5vw, 2.5rem); }
  .sht-brand__tag { display: none; }
  .sht-brand { gap: .5rem; }
  .sht-brand__name { font-size: calc(clamp(.8125rem, 1.7vw, 1.4375rem) * var(--heading-scale)); }
  .sht-logo { width: clamp(1.75rem, 4.4vw, 3.25rem); height: auto; }
  .sht-nav { gap: clamp(.25rem, 1.2vw, 1.5rem); }
  .sht-nav a { font-size: clamp(.75rem, 1.25vw, .9375rem); white-space: nowrap; }
  .sht-more__toggle { font-size: clamp(.75rem, 1.25vw, .9375rem); }
  .sht-header__actions .sht-btn { white-space: nowrap; padding: .625rem .875rem; }

  /* Content + sidebar layouts keep two columns, the sidebar narrower */
  .sht-split { gap: 1.5rem; }
  .sht-split--filters { grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr); }
  .sht-filters > fieldset > label { grid-template-columns: 1.5rem minmax(0, 1fr); gap: .375rem; }
  .sht-filters > fieldset > label .sht-input { padding-inline: .375rem; }
  .sht-filters select.sht-input { padding-inline: .75rem .375rem; }
  .sht-filters > div:not([class]) .sht-sheet__kicker { letter-spacing: .04em; font-size: .6875rem; } /* FTT-88: „Възрастни“ and „Деца“ shared one line in the 13rem column */
  .sht-split--offer { grid-template-columns: minmax(0, 1.5fr) minmax(15rem, 1fr); }
  .sht-split--trip { grid-template-columns: minmax(0, 1.4fr) minmax(15rem, 1fr); gap: 1.75rem; }
  .sht-split__aside { padding: 1.125rem; }

  /* Круиз (FTT-223): the side panel goes under the map and the day row, the configurator row has two columns, a cabin card stacks */
  .sht-cruise-route { grid-template-columns: minmax(0, 1fr); }
  .sht-cruise-route > .sht-cruise-map, .sht-cruise-route > .sht-cruise-bubble { grid-column: 1; grid-row: auto; }
  .sht-cruise-route > .sht-cruise-bubble { order: 3; position: static; max-height: none; }
  .sht-cruise-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sht-continents-grid { grid-template-columns: 12rem minmax(0, 1fr); }
  .sht-continents-grid--with-search { grid-template-columns: 13rem minmax(0, 1fr); }

  .sht-why, .sht-story { gap: 2.5rem; }

  /* FTT-168 calendar: narrower boxes, one-line entries */

 .sht-ex-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } 
  .sht-hsearch__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* pochivki v10 month table */
  .pk-month .pk-cell, .pk-month .pk-when { padding: .75rem 1rem; }
  .pk-month .pk-row--head > span { padding: .75rem 1rem; }
}

/* ── Mobile (≤ 48em / 768px): the 2026-09 mobile design (FTT-28) ───────── */
/* Source: design/2026-09 Site/Shtastlivcite Mobile.dc.html (M1 home,
   M2 destination, M3 about). "Mobile" here means viewport width, nothing
   else — no user-agent sniffing anywhere (docs/FRONTEND-DESIGN.md
   "Mobile"). The design is drawn at 390px; sizes that would look squashed
   on a 768px screen are clamp()s whose floor is the 390px value. */
@media (max-width: 48em) {
  :root {
    --wrap-content: var(--wrap);
    --section-pad: 4.25rem;
    --section-pad-tight: 4.25rem;
  }
  .sht-has-dock { --dock-space: 4.75rem; }
  /* FTT-180: the cover title keeps the export's 3.5rem at 390px but steps down below it, so "Дестинации" fits one line at 360px */
  .sht-cover__title { font-size: calc(clamp(2.5rem, 20vw - 1.375rem, 3.5rem) * var(--heading-scale)); }
  .sht-hide-phone { display: none; }
  .sht-only-phone { display: revert; }

  /* Menu: the burger and the full-screen drawer replace the nav */
  .sht-nav, .sht-header__actions { display: none; }
  .sht-burger { display: flex; }
  .sht-drawer.is-open { display: flex; }
  html.sht-nav-open { overflow: hidden; }
  html.sht-nav-open .sht-dock { display: none; }

  /* Content + sidebar layouts stack */
  .sht-split { gap: 2rem; }
  .sht-split--filters, .sht-split--offer, .sht-split--trip, .sht-split--contact { grid-template-columns: minmax(0, 1fr); }
  /* FTT-92: the destination page's split, like FTT-86's continents grid: a sticky grid item has no travel
     inside its own grid row, so the split is a block and the panel's sticky "Филтри · …" row (a direct child,
     the sheet is fixed) sticks through the whole split while the cards scroll. */
  .sht-split--sticky-row { display: block; }
  .sht-split--trip { gap: 2.5rem; padding-top: 1.75rem; padding-bottom: 3rem; }
  .sht-split__aside { padding: 1.5rem; }

  /* Пътуване (FTT-64): the head stacks, the tabs scroll sideways under the
     header, the side card is `.sht-hide-phone` (the dock carries the booking
     button), related articles are a swipe row. */
  .sht-pagehead__title.sht-trip-title { font-size: calc(.875rem * var(--heading-scale)); }
  .sht-stat .sht-card__price b { font-size: calc(2.5rem * var(--heading-scale)); }
  .sht-trip-top { margin-top: 1.5rem; }
  .sht-trip-tabs { margin-top: 1.25rem; padding: .5rem 0; }
  .sht-trip-tabs .sht-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .sht-trip-tabs .sht-chips::-webkit-scrollbar { display: none; }
  .sht-trip-tabs .sht-chip { flex: none; }
  .sht-pane[data-pos="before"] { transform: translateX(-100%); }
  .sht-pane[data-pos="after"] { transform: translateX(100%); }
  [data-hash-panes] .sht-pane__nav .sht-btn { flex: 1 1 100%; justify-content: center; } /* FTT-452: „← / →“ stack full width under a pane */
  .sht-trip-main { gap: 2.5rem; }
  .sht-trip-section { scroll-margin-top: calc(var(--header-h) + 3.5rem); }
  .sht-trip-related__grid {
    display: flex; gap: .875rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) .5rem;
  }
  .sht-trip-related__grid { scroll-padding: 0 var(--gutter); }
  .sht-trip-related__grid::-webkit-scrollbar { display: none; }
  .sht-trip-related__grid > * { flex: 0 0 min(17.5rem, 78vw); scroll-snap-align: start; }
  /* Снимки (FTT-65): one large tile over a two-column row of small ones. */
  .sht-trip-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 13.75rem; grid-auto-rows: 6.875rem; }
  .sht-trip-gallery > :first-child { grid-row: auto; grid-column: 1 / 3; }
  .sht-trip-gallery > :last-child:nth-child(even) { grid-column: 1 / -1; }

  /* Круиз (FTT-223): swipe rows for the day buttons and the month chips, one-column configurator, cabin buttons 2 x 2, stacked boxes */
  .sht-cruise-map { aspect-ratio: 520 / 620; }
  /* FTT-228 (D148 A): one cabin per row, the photo (4:3) above the text */
  .sht-cruise-cabin { grid-template-columns: minmax(0, 1fr); }
  .sht-cruise-cabin__note { padding: 0 1rem .25rem; }
  .sht-cruise-pill:not(.sht-cruise-pill--sea) span { display: none; }
  /* FTT-227: the stop labels keep their drawn size (~1.9rem) but their tap area is 2.75rem high and at least as wide */
  .sht-cruise-pill::before { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; min-width: 2.75rem; height: 2.75rem; transform: translate(-50%, -50%); }
  .sht-cruise-pill:not(.sht-cruise-pill--sea) { padding-right: .1875rem; }
  .sht-cruise-days, .sht-cruise-nowrap { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) .25rem; }
  .sht-cruise-nowrap::-webkit-scrollbar { display: none; }
  .sht-cruise-row { grid-template-columns: minmax(0, 1fr); }
  .sht-cruise-cabs { --cols: 2; }
  .sht-cruise-two { --cols: 1; }
  .sht-cruise-result .sht-btn { width: 100%; }

  /* FTT-36: the continent sidebar becomes a horizontal strip above the
     grid; its links scroll sideways instead of wrapping into a tall list. */
  .sht-continents-grid { grid-template-columns: minmax(0, 1fr); }
  .sht-continents-nav {
    position: static; flex-direction: row; overflow-x: auto; gap: .5rem; padding-bottom: .5rem;
    scrollbar-width: none; margin-bottom: .5rem;
  }
  .sht-continents-nav::-webkit-scrollbar { display: none; }
  .sht-continents-nav__label { display: none; }
  .sht-continents-nav a, .sht-continents-nav__empty { flex: none; white-space: nowrap; }
  /* FTT-86: with the side search the grid is a block and the wrapper dissolves, so the panel's sticky
     "Филтри · …" row is a child of the grid container (its containing block is the whole container) and
     stays under the header while the cards scroll. Strip -> row gap = the strip's own padding-bottom. */
  .sht-continents-grid--with-search { display: block; }
  .sht-continents-grid__side { display: contents; }
  .sht-continents-grid__side .sht-continents-nav { margin-bottom: 0; }

  /* Touch targets ≥ 44px */
  .sht-btn { min-height: 2.75rem; }
  .sht-btn--sm { min-height: 2.5rem; }
  .sht-chip { min-height: 2.5rem; }
  [data-hotel-departures] .sht-chips__label { display: inline; }
  [data-hotel-departures] .sht-chip { min-height: 2.75rem; display: inline-flex; align-items: center; }
  .sht-search-foot .sht-chip, .sht-search-foot .sht-pager__gap { min-height: 2.75rem; }
  .sht-input { min-height: 3.25rem; }

  /* Rhythm + type */
  .sht-section__head { gap: .375rem 1rem; margin-bottom: 1rem; }
  .sht-section__title { font-size: calc(1.75rem * var(--heading-scale)); letter-spacing: -.015em; }
  .sht-section__lead { font-size: calc(.875rem * var(--text-scale, 1)); }
  .sht-band__inner { padding: 2.75rem var(--gutter) 2.5rem; }

  /* Header: compact — logo + name, 44px burger, no tagline */
  :root { --header-h: 3.9375rem; }
  .sht-header__inner { padding: .5rem var(--gutter) .625rem; gap: .75rem; }
  .sht-brand { gap: .5rem; }
  .sht-brand__tag { display: none; }
  .sht-brand__name { font-size: calc(1.1875rem * var(--heading-scale)); }
  .sht-logo { width: 2.5rem; height: auto; }
  .sht-burger { width: 2.75rem; height: 2.75rem; font-size: 1rem; }

  /* Hero: photo first (with the "88+" pill top-right), then copy, perks
     as a scrolling chip row, two full-width buttons */
  .sht-hero { padding-top: .875rem; gap: 1.25rem; }
  .sht-hero__media { order: -1; height: clamp(14rem, 63vw, 26rem); }
  .sht-hero__media-img { border-radius: 1.5rem 1.5rem 1.5rem 5.625rem; }
  .sht-hero__stat {
    left: auto; bottom: auto; right: .875rem; top: .875rem; border-radius: var(--radius-sm);
    padding: .625rem .75rem; gap: .375rem; box-shadow: none;
  }
  .sht-hero__stat-n { font-size: calc(1.625rem * var(--heading-scale)); }
  .sht-hero__stat-t { font-size: .6875rem; font-weight: 700; line-height: 1.15; }
  .sht-hero__copy { gap: .875rem; max-width: none; }
  .sht-hero__title { font-size: calc(2.5rem * var(--heading-scale)); }
  .sht-hero__lead { font-size: 1rem; line-height: 1.5; }
  .sht-hero__perks {
    flex-wrap: nowrap; overflow-x: auto; gap: .5rem; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
  }
  .sht-hero__perks::-webkit-scrollbar { display: none; }
  .sht-hero__perk {
    flex: none; gap: .4375rem; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-pill); padding: .5rem .75rem; font-size: .8125rem; font-weight: 600;
  }
  .sht-hero__perk-dot { width: .4375rem; height: .4375rem; }
  .sht-hero__actions { flex-direction: column; gap: .5rem; margin-top: .25rem; }
  .sht-hero__actions .sht-btn { width: 100%; min-height: 3.375rem; }
  .sht-call-menu--inline > .sht-call-menu__summary { display: flex; justify-content: center; }
  .sht-call-menu--inline .sht-call-menu__panel { max-width: none; }

  /* Контакти (FTT-69): facts in one column (the e-mail needs the width). */
  .sht-facts--stack { --cols: 1; }

  /* Search panel (FTT-31): the fields grid already collapses to one
     column at this width (same minmax(min(100%,…)) pattern as every other
     responsive grid), so the button naturally sits full-width below it. */
  .sht-search__panel { padding: 1.5rem; gap: 1.125rem; }
  .sht-search__head { flex-direction: column; align-items: flex-start; gap: .375rem; }

  /* 02 Актуални предложения: scrolling chips, cards that swipe with
     the next one peeking, "Виж всички" as a full-width button below */
  #trips .sht-section__head .sht-section__more { display: none; }
  #trips .sht-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 1rem;
  }
  #trips .sht-chips::-webkit-scrollbar { display: none; }
  .sht-blog-tabs__chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter)) 1.25rem; padding: 0 var(--gutter);
  }
  .sht-blog-tabs__chips::-webkit-scrollbar { display: none; }
  .sht-blog-tabs__chips .sht-chip { flex: none; font-size: .875rem; min-height: 2.75rem; display: inline-flex; align-items: center; }
  #trips .sht-chip { flex: none; font-size: .8125rem; }
  #trips .sht-split--filters { gap: 0; } /* the sticky row's own padding is the gap to the chips (export Phone 390) */
  #trips .sht-grid {
    display: flex; gap: .875rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) .5rem;
  }
  #trips .sht-grid::-webkit-scrollbar { display: none; }
  #trips .sht-grid > * { flex: 0 0 min(18.125rem, 78vw); scroll-snap-align: start; }
  .sht-more-mobile { display: flex; margin-top: .875rem; border-color: var(--sand); font-size: .9375rem; min-height: 3rem; }

  /* Дестинации (FTT-68): the continent's country cards are the same swipe row
     as #trips above, the card a little narrower; "Виж всички →" hides and
     .sht-more-mobile (in the template, after the row) replaces it. */
  [data-continent-panel] .sht-section__head .sht-section__more { display: none; }
  [data-continent-panel] .sht-grid {
    display: flex; gap: .875rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) .5rem;
  }
  [data-continent-panel] .sht-grid::-webkit-scrollbar { display: none; }
  [data-continent-panel] .sht-grid > * { flex: 0 0 min(15.625rem, 72vw); scroll-snap-align: start; }

  /* FTT-98: the resort arches of a holiday destination are a swipe row (the export's own phone rule) */
  #resorts .sht-grid {
    display: flex; gap: .875rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
    scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) .5rem;
  }
  #resorts .sht-grid::-webkit-scrollbar { display: none; }
  #resorts .sht-grid > * { flex: 0 0 min(13rem, 60vw); scroll-snap-align: start; }

  /* Card footer: the ghost "Виж програмата →" becomes a 44px bordo arrow */
  .sht-card__footer .sht-btn--ghost {
    font-size: 0; width: 2.75rem; height: 2.75rem; border-radius: 50%; padding: 0; flex: none;
    display: flex; align-items: center; justify-content: center; background: var(--bordo); color: var(--surface);
  }
  .sht-card__footer .sht-btn--ghost::after { content: "→"; font-size: 1rem; }
  .sht-card__price b { font-size: calc(1.5rem * var(--heading-scale)); }
  .sht-card--boxed .sht-card__img { aspect-ratio: 2 / 1; }

  /* 03 Нашите пътувания: a compact list instead of five big tiles */
  .sht-cats { display: flex; flex-direction: column; gap: 0; }
  .sht-cat, .sht-cat--1, .sht-cat--2, .sht-cat--3, .sht-cat--4, .sht-cat--5 {
    display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: .875rem; align-items: center;
    padding: .625rem 0; border-top: 1px solid var(--line); border-radius: 0; overflow: visible;
    background: transparent; color: var(--ink); min-height: 0;
  }
  .sht-cat:hover { color: var(--ink); }
  .sht-cat__img { width: 4.5rem; height: 4.5rem; border-radius: 1rem; background-color: var(--sand-2); }
  .sht-cat__body { padding: 0; gap: .125rem; margin: 0; }
  .sht-cat__n { display: none; }
  .sht-cat__title { font-size: calc(1.1875rem * var(--heading-scale)); }
  .sht-cat__sub { font-size: .8125rem; color: var(--muted); opacity: 1; }
  .sht-cat::after {
    content: "→"; width: 2.25rem; height: 2.25rem; border-radius: 50%; font-size: .875rem;
    display: flex; align-items: center; justify-content: center; background: var(--bordo); color: var(--surface);
  }
  .sht-cat--2::after { background: var(--teal); }
  .sht-cat--3::after { background: var(--green); }
  .sht-cat--4::after { background: var(--navy); }
  .sht-cat--5::after { background: var(--amber); color: var(--ink); }

  /* 04 "88" band: number, title, the four points, then the button */
  .sht-why { display: flex; flex-direction: column; gap: 1.125rem; }
  .sht-why__left { display: contents; }
  .sht-why__num { font-size: calc(7.5rem * var(--heading-scale)); }
  .sht-why__title { font-size: calc(1.5rem * var(--heading-scale)); }
  .sht-why__item { grid-template-columns: 2rem 1fr; gap: .875rem; padding: .875rem 0; }
  .sht-why__n { font-size: .75rem; padding-top: .1875rem; }
  .sht-why__t { font-family: var(--font-body); font-size: calc(1rem * var(--heading-scale)); }
  .sht-why__d { display: none; }
  .sht-why__actions { order: 10; }
  .sht-why__actions .sht-btn { width: 100%; min-height: 3.25rem; font-weight: 700; font-size: .9375rem; }

  /* 05 Дестинации: narrower arch cards */
  .sht-dests { gap: .75rem; }
  .sht-dest { flex-basis: 9.375rem; gap: .5rem; }
  .sht-dest__img { border-radius: 5.625rem 5.625rem .875rem .875rem; }
  .sht-dest__name { font-size: calc(1.125rem * var(--heading-scale)); }
  .sht-dest__note { font-size: .75rem; }

  /* 06 Пътеписи: featured card + 80px thumbnails */
  .sht-articles { gap: 1rem; }
  .sht-article--featured { gap: .75rem; }
  .sht-article__img { aspect-ratio: 16 / 10; border-radius: var(--radius-md); }
  .sht-article__title { font-size: calc(1.4375rem * var(--heading-scale)); }
  .sht-article--featured .sht-article__lead { display: none; }
  .sht-article-list { gap: .875rem; }
  .sht-article { grid-template-columns: 5rem minmax(0, 1fr); gap: .875rem; padding-bottom: .875rem; }
  .sht-article__col { gap: .25rem; }
  .sht-article__col .sht-article__title { font-size: calc(1.0625rem * var(--heading-scale)); }

  /* Блог (/patepisi, FTT-66) */
  .sht-blog-featured { padding-top: 1.5rem; }
  .sht-article--hero { gap: 1rem; }
  .sht-article--hero .sht-article__title { font-size: calc(1.75rem * var(--heading-scale)); }
  .sht-article__body { gap: .75rem; }
  .sht-article-card .sht-article__lead { display: -webkit-box; } /* the 06 rule above hides a featured card's lead */
  .sht-blog__cats {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
  }
  .sht-blog__cats::-webkit-scrollbar { display: none; }
  .sht-blog__cats .sht-chip { flex: none; }
  .sht-sheet:target { display: flex; } /* no JS: a link to the sheet's #id opens it (the blog no longer has one since FTT-501) */

  /* Статия (/statii/<slug>, FTT-67): the contents list is a sticky sideways strip under the
     header, trip card stacks, „Още от блога“ is a swipe row (mockup 56.25em / 37.5em rules) */
  .sht-article-cover { margin-top: 1.25rem; }
  .sht-article-layout { padding-top: 1.5rem; }
  .sht-article-body { gap: 1.75rem; }
  .sht-article-layout .sht-continents-nav {
    position: sticky; top: calc(var(--header-h) - .375rem); z-index: 5; background: var(--header-bg);
    backdrop-filter: blur(.625rem); margin: 0 calc(-1 * var(--gutter)) 1.25rem; padding: .5rem var(--gutter);
  }
  .sht-prose h2 { scroll-margin-top: 4rem; }
  .sht-prose blockquote { padding: 2.5rem 1.25rem 1.25rem; font-size: calc(1.125rem * var(--heading-scale)); }
  .sht-prose blockquote::before { left: 1.25rem; }
  .sht-prose .sht-tip__fact { gap: .25rem; }
  .sht-prose .sht-tip__v { font-size: calc(1rem * var(--heading-scale)); }
  .sht-article-trip .sht-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .sht-article-trip .sht-card__img { grid-row: auto; }
  .sht-article-trip .sht-card__body { align-self: auto; }
  .sht-related .sht-grid {
    display: flex; gap: .875rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) .5rem;
  }
  .sht-related .sht-grid::-webkit-scrollbar { display: none; }
  .sht-related .sht-grid > * { flex: 0 0 min(17.5rem, 78vw); scroll-snap-align: start; }

  /* 07 Отзиви: swipe row (the home/about slider only; /otzivi stays a
     chip-filtered grid, handled separately below) */
  .sht-reviews__head { gap: .75rem 1rem; }
  .sht-reviews-slider__viewport { margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) .5rem; }
  .sht-reviews-slider__track { gap: .75rem; }
  .sht-reviews-slider__track .sht-quote { padding: 1.5rem 1.375rem; gap: 1rem; }
  .sht-reviews-slider__track .sht-quote blockquote { font-size: calc(1.125rem * var(--heading-scale)); }

  /* /otzivi R1: smaller rating number, tighter gap. The title itself also
     drops below the shared `.sht-pagehead__title` mobile size (3rem) --
     "пътешествениците" alone is wider than a 360px screen at 3rem and would
     hit the `overflow-wrap: anywhere` mid-word break the full-title fix
     above was meant to avoid. */
  .sht-pagehead--full-title .sht-pagehead__title { font-size: calc(1.875rem * var(--heading-scale)); }

  /* /otzivi R2: same padding trim as the home slider's card */
  .sht-review-card { padding: 1.5rem 1.375rem; gap: 1rem; }
  .sht-review-card blockquote { font-size: calc(1.0625rem * var(--heading-scale)); }

  /* /otzivi R3 gallery: two-column mosaic (same treatment as D3's .sht-gallery) */
  .sht-review-gallery { --cols: 2; --col-min: 0rem; --col-gap: .5rem; --row-gap: .5rem; grid-auto-rows: clamp(7.5rem, 22vw, 11.25rem); }
  .sht-review-gallery__tile { border-radius: 1rem; }
  .sht-review-gallery__cap { font-size: .6875rem; padding: .25rem .5rem; }

  /* Lightbox: smaller controls so they don't crowd a phone-width photo */
  .sht-lightbox__close { width: 2.5rem; height: 2.5rem; top: .75rem; right: .75rem; font-size: 1rem; }
  .sht-lightbox__nav { width: 2.75rem; height: 2.75rem; font-size: 1.0625rem; }
  .sht-lightbox__caption { font-size: .8125rem; }

  /* CTA: photo on top, copy below, one full-width amber button */
  .sht-cta { padding: 3.5rem calc(var(--gutter) - .25rem) 3rem; }
  .sht-cta__box { display: flex; flex-direction: column; border-radius: 1.625rem; }
  .sht-cta__img { order: -1; min-height: 0; height: clamp(10.625rem, 34vw, 16rem); }
  .sht-cta__copy { padding: 1.625rem 1.375rem 1.75rem; gap: .875rem; }
  .sht-cta__copy h2 { font-size: calc(1.625rem * var(--heading-scale)); }
  .sht-cta__copy p { font-size: .9375rem; }
  .sht-cta__actions { flex-direction: column; gap: .5rem; }
  .sht-cta__actions .sht-btn { width: 100%; min-height: 3.25rem; font-size: .9375rem; }

  /* Destinations/continent cover: the stats row scrolls sideways instead of
     wrapping, same "peek at the next one" pattern as `.sht-hero__perks`. */
  .sht-cover__stats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: .25rem calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter); }
  .sht-cover__stats::-webkit-scrollbar { display: none; }
  .sht-cover__stat { flex: none; }
  .sht-country-search { min-height: 3.25rem; }
  .sht-country-sort { width: 100%; min-height: 2.75rem; }
  .sht-country-filter__submit { width: 100%; min-height: 3.25rem; }

  /* Континент (FTT-68, FTT-88): two columns, no round arrow; the sort select sits in the
     section head (full width on a phone), the side search's own sheet and row (FTT-78) replace
     the old filter sheet. The continent page keeps its own grid rule: it is a form
     (.sht-country-filter), the preview on /destinatsii is a swipe row (rules above). */
  .sht-country-filter .sht-grid { --cols: 2; --col-min: 0rem; --col-gap: .75rem; --row-gap: .75rem; }
  .sht-country-filter .sht-country-card__arrow { display: none; }

  /* Footer: tighter, and room for the dock */
  .sht-footer__grid { padding: 2.25rem var(--gutter) 1.5rem; gap: 1.5rem; }
  .sht-footer__legal { padding-bottom: calc(1.75rem + var(--dock-space, 0rem)); }
  .sht-footer__legal-links a, .sht-footer__legal-links .sht-cookie-settings-link { padding-block: .875rem; } /* tap target >= 2.75rem */

  /* Dock + cookie banner above it */
  .sht-dock { display: grid; }
  .sht-cookie { left: .75rem; right: .75rem; bottom: calc(.75rem + var(--dock-space, 0rem)); }

  /* Inquiry modal + newsletter pop-up: bottom sheets with a drag handle */
  .sht-modal { align-items: flex-end; padding: 0; }
  .sht-modal__panel, .sht-popup__panel {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 92vh; max-height: 92dvh;
    padding: .875rem 1.25rem 2.125rem; gap: .75rem;
  }
  .sht-modal__panel::before, .sht-popup__panel::before {
    content: ""; align-self: center; width: 2.5rem; height: .3125rem; border-radius: .1875rem;
    background: var(--sand); margin-bottom: .25rem; flex: none;
  }
  .sht-modal__title, .sht-popup__title { font-size: calc(1.625rem * var(--heading-scale)); }
  .sht-modal__close, .sht-popup__close { top: .875rem; right: 1rem; width: 2.5rem; height: 2.5rem; }
  .sht-popup { align-items: flex-end; padding: 0; }

  /* Page head (inner pages / A1): stacked, 3rem title, framed image */
  .sht-pagehead { padding-top: 1.75rem; gap: .875rem; }
  .sht-pagehead__left { gap: .875rem; }
  .sht-pagehead__title { font-size: calc(3rem * var(--heading-scale)); }
  .sht-pagehead__lead { font-size: 1rem; }
  .sht-pagehead__img { height: clamp(16.25rem, 48vw, 24rem); border-radius: var(--radius-lg); margin: 1.25rem var(--gutter) 0; }

  /* D1 cover + facts */
  .sht-cover__copy { gap: .625rem; padding-bottom: 1.75rem; }
  .sht-cover__lead { font-size: calc(1.125rem * var(--heading-scale)); }
  .sht-fact { padding: .875rem .875rem 1rem; gap: .25rem; }
  .sht-fact__k { font-size: .625rem; letter-spacing: .14em; }
  .sht-fact__v { font-size: calc(1rem * var(--heading-scale)); }

  /* D2 filters: sticky "Филтри · …" button + count, chips in a bottom sheet */
  .sht-filter-row {
    display: flex; align-items: center; gap: .5rem; position: sticky; top: var(--header-h); z-index: 4;
    background: var(--bg); padding: .375rem 0 .875rem;
  }
  .sht-filter-row__count { font-size: .8125rem; color: var(--text); }
  .sht-sheet {
    display: none; position: fixed; inset: 0; z-index: 100; align-items: flex-end; background: var(--scrim);
  }
  .sht-sheet.is-open { display: flex; }
  .sht-sheet__panel {
    display: flex; flex-direction: column; gap: .875rem; width: 100%; max-height: 92vh; max-height: 92dvh; overflow: auto;
    background: var(--bg); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: .875rem 1.25rem 2.125rem;
  }
  .sht-sheet__handle { display: block; align-self: center; width: 2.5rem; height: .3125rem; border-radius: .1875rem; background: var(--sand); }
  .sht-sheet__title { display: block; font-size: calc(1.5rem * var(--heading-scale)); }
  .sht-sheet__kicker { display: block; font-size: .75rem; letter-spacing: .14em; }
  .sht-sheet .sht-chips__label { display: none; }
  .sht-sheet .sht-chip { min-height: 2.75rem; font-size: .875rem; padding: 0 1.125rem; }
  .sht-sheet__panel > .sht-chips, .sht-sheet__panel > .sht-chips:last-of-type { margin-bottom: 0; }
  .sht-sheet__apply { display: flex; margin-top: .5rem; min-height: 3.375rem; font-weight: 700; }
  /* FTT-78: the side search is the same sheet; its panel loses the desktop box, inputs and the
     buttons get phone tap targets, the submit button is taller */
  .sht-sheet__panel.sht-filters { border: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: .875rem 1.25rem 2.125rem; gap: 1.125rem; }
  .sht-filters .sht-input { min-height: 2.75rem; }
  .sht-filters > div:not([class]) .sht-sheet__kicker { letter-spacing: .14em; font-size: .75rem; } /* the sheet is wide: back to the base label */
  .sht-filter-row--panel .sht-btn { min-height: 2.75rem; }
  .sht-filters__submit { min-height: 3.375rem; }

  /* D3 gallery: two-column mosaic (the spans stay; only the row height drops) */
  .sht-gallery { --cols: 2; --col-min: 0rem; --fit: auto-fill; --col-gap: .5rem; --row-gap: .5rem; grid-auto-rows: clamp(7.5rem, 22vw, 11.25rem); }
  .sht-gallery__tile { border-radius: 1rem; }
  /* FTT-71: the same blocks on two columns (a tall tile becomes a wide one, so
     a block of 1-5 photos still closes) */
  .sht-gallery--mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sht-gallery--mosaic .sht-gallery__tile--full,
  .sht-gallery--mosaic .sht-gallery__tile--half-l,
  .sht-gallery--mosaic .sht-gallery__tile--half-r { grid-column: span 2; grid-row: span 2; }
  .sht-gallery--mosaic .sht-gallery__tile--w3,
  .sht-gallery--mosaic .sht-gallery__tile--tall,
  .sht-gallery--mosaic .sht-gallery__tile--wide { grid-column: span 2; grid-row: span 1; }

  /* A2 team: a swipe row, 250px cards */
  .sht-team {
    display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) .5rem;
  }
  .sht-team::-webkit-scrollbar { display: none; }
  .sht-team__member { flex: 0 0 min(15.625rem, 72vw); scroll-snap-align: start; margin: 0; gap: .625rem; }
  .sht-team figcaption { gap: .625rem; }
  .sht-team__name { font-size: calc(1.3125rem * var(--heading-scale)); }
  .sht-team__role { font-size: calc(.6875rem * var(--text-scale, 1)); letter-spacing: .14em; }
  .sht-team__bio { font-size: calc(.875rem * var(--text-scale, 1)); line-height: 1.5; }

  /* A3 story: photo, title, text, two stats side by side */
  .sht-story { gap: .875rem; }
  .sht-story__img { aspect-ratio: 5 / 4; max-height: clamp(17.5rem, 50vw, 26rem); border-radius: 1.25rem 1.25rem 6.875rem 1.25rem; }
  .sht-story__copy { gap: .875rem; max-width: none; }
  .sht-story__copy p { font-size: calc(1rem * var(--text-scale, 1)); line-height: 1.65; }
  .sht-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; padding-top: 1rem; }
  .sht-stat__n { font-size: calc(2.5rem * var(--heading-scale)); }
  .sht-stat__l { font-size: calc(.8125rem * var(--text-scale, 1)); }

  /* A4 values: a list with a coloured bar instead of five columns */
  .sht-values { display: flex; flex-direction: column; gap: 0; }
  .sht-value, .sht-value--1, .sht-value--2, .sht-value--3, .sht-value--4, .sht-value--5 {
    display: grid; grid-template-columns: .375rem minmax(0, 1fr); gap: .1875rem .875rem;
    padding: .875rem 0; border-top: 1px solid var(--line-2);
  }
  .sht-value::before { content: ""; grid-row: 1 / span 2; border-radius: .1875rem; background: var(--bordo); }
  .sht-value--2::before { background: var(--teal); }
  .sht-value--3::before { background: var(--green); }
  .sht-value--4::before { background: var(--amber); }
  .sht-value--5::before { background: var(--navy); }
  .sht-value__t, .sht-value__d { grid-column: 2; }
  .sht-value__t { font-size: calc(1.0625rem * var(--heading-scale)); }
  .sht-value__d { font-size: calc(.875rem * var(--text-scale, 1)); }

  /* Legacy bar pages */
  .sht-bar { flex-wrap: wrap; }

  /* FTT-168 calendar: the day-by-day list (same markup) */
  /* Pochivki v3 (FTT-218) */
  #trip-tabs .sht-chips, #hotel-jump-m, .pk-progs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  #trip-tabs .sht-chip, #hotel-jump-m .sht-chip, .pk-progs .sht-chip { flex: none; }
  #hotel-body { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  #hotel-jump { display: none; }
  #hotel-jump-m { display: flex; }
  .pk-sec { scroll-margin-top: 8rem; }
  .pk-row { grid-template-columns: minmax(0, 1fr); }
  .pk-row--head { display: none; }
  .pk-dep--scroll { overflow-x: visible; }
  .pk-dep--scroll .pk-row { grid-template-columns: minmax(0, 1fr); width: auto; }
  .pk-dep--scroll .pk-when { position: static; }
  .pk-when { padding: 1rem 1rem .5rem; }
  .pk-cell { border-left: 0; border-top: 1px solid var(--line-2); flex-direction: row; align-items: center; justify-content: space-between; gap: .75rem; min-height: 3.5rem; padding: .625rem 1rem; }
  .pk-room { display: block; font-size: .9375rem; color: var(--text); }
  .pk-price { align-items: flex-end; text-align: right; }
  .pk-ask { grid-column: auto; border-left: 0; border-top: 1px solid var(--line-2); padding: .75rem 1rem; }
  /* Cruise search (FTT-222): the sub-page chips are one swipe row, the panel is the bottom sheet's panel (white, as the
     export draws it), one column of fields, four months a row */
  .sht-cruise-trigger { padding: 0; }
  /* FTT-227: every control a thumb meets is 2.75rem high (the export draws them smaller; the site rule wins) */
  .sht-cruise-trigger .sht-btn--sm, .sht-cruise-subnav .sht-chip, .sht-cruise-entries .sht-chip, .sht-cruise-seg__opt, .sht-cruise-picked button, .sht-cruise-point-add { min-height: 2.75rem; }
  .sht-cruise-trigger .sht-btn--sm, .sht-cruise-seg__opt, .sht-cruise-picked button { box-sizing: border-box; }
  .sht-cruise-subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .sht-cruise-subnav::-webkit-scrollbar { display: none; }
  .sht-cruise-cols { grid-template-columns: minmax(0, 1fr); }
  .sht-cruise-fields { --cols: 1; }
  .sht-cruise-months { --cols: 4; }
  .sht-sheet__panel.sht-cruise-panel { background: var(--surface); padding: 1.25rem; gap: 1.5rem; max-height: 88vh; max-height: 88dvh; }

  .sht-ex-fields { grid-template-columns: minmax(0, 1fr); }
  /* FTT-450: the range picker's popover opens in the flow under its button (an absolute one would be clipped by the sheet), "Готово" closes it */
  .sht-dp .sht-dp__pop--range { position: static; width: auto; max-width: 100%; margin-top: .375rem; box-shadow: none; }
  .sht-dp__pop--range .sht-dp__day { min-height: 2.5rem; }
  .sht-dp__pop--range .sht-dp__done { display: inline-flex; margin-top: .625rem; }
  .sht-ex-trigger { display: flex; padding: 0; }
  .sht-ex-trigger .sht-btn--sm { min-height: 2.75rem; box-sizing: border-box; }
  .sht-ex-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .sht-ex-chips .sht-chip { flex: none; }
  .sht-sheet .sht-ex-panel { border: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 88vh; overflow: auto; }
  .sht-hsearch__fields, .sht-hsearch__steps { grid-template-columns: minmax(0, 1fr); }
  .sht-sheet__panel.sht-hsearch { border: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 88vh; max-height: 88dvh; padding: 1.25rem; }
  .pk-cfg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-sum__act, .pk-sum__total { align-items: flex-start; justify-content: flex-start; }
  .pk-offer { grid-template-columns: minmax(0, 1fr); }
  .pk-offer__act { justify-content: space-between; }
  .pk-offer__act .sht-btn, .pk-offers__ask, .pk-offers__live .sht-btn { min-height: 2.75rem; }
  .pk-offer__act .sht-btn { flex: 1 1 100%; justify-content: center; }
  [data-hotel-dock] { white-space: nowrap; font-size: .8125rem; padding-left: .75rem; padding-right: .75rem; }
  .pk-offer__price { text-align: right; }
  /* pochivki v10 month table */
  .pk-cell--wide { grid-column: auto; }
  .pk-month .pk-cell { padding: .625rem 1rem; }
  .pk-month .pk-when { padding: 1rem 1rem .5rem; }
  .pk-month__name { min-width: 0; }
  .pk-month__nav { flex: 1 1 100%; justify-content: space-between; }
}

/* FTT-200: room between the card grid and its pager on /ekskurzii and /pochivki */
.sht-section__pager { margin-top: 2rem; }

/* ── Pochivki v3: the partner-hotel page (handoff pochivki-v3, `Page Pochivki.dc.html`). Layout only; every colour is a token. ── */
.sht-pane.pk-pane--g125 { gap: 1.25rem; } .sht-pane.pk-pane--g150 { gap: 1.5rem; } .sht-pane.pk-pane--g175 { gap: 1.75rem; } .sht-pane.pk-pane--g200 { gap: 2rem; }
.pk-m0 { margin: 0; } .pk-m0b { margin: 0 0 .5rem; } .pk-push { margin-left: auto; } .pk-center { text-align: center; }
.pk-badge { position: static; } .pk-badge--start { align-self: flex-start; }
.pk-n1 { --n: 1; } .pk-n2 { --n: 2; } .pk-n3 { --n: 3; } .pk-n4 { --n: 4; } .pk-n5 { --n: 5; } .pk-n6 { --n: 6; } .pk-n7 { --n: 7; } .pk-n8 { --n: 8; }
.pk-aside__facts .sht-fact { padding: .875rem 1rem; } .pk-aside__facts .sht-fact__v { font-size: 1rem; }
.pk-day--static { padding: 1.25rem 0 1rem; }
.pk-day--static .pk-day__head { margin-bottom: .75rem; font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.pk-day--static .pk-day__list { padding-bottom: .25rem; }
.pk-introbox { display: flex; flex-direction: column; gap: .75rem; }
.pk-intro-paras { display: flex; flex-direction: column; gap: 1rem; }
.pk-intro-paras > [hidden] { display: none; }
.pk-sec--bare { padding-top: 0; border-top: 0; }
.pk-video.is-playing { max-width: none; }
#hotel-body[data-wide] { grid-template-columns: minmax(0, 1fr); }
#hotel-body[data-wide] #hotel-jump, #hotel-body[data-jump="0"] #hotel-jump, #hotel-body[data-jump="0"] #hotel-jump-m { display: none; }
.pk-note { display: flex; flex-direction: column; gap: .25rem; padding: .875rem 1.25rem; background: var(--tint-teal); border-radius: var(--radius-md); }
.pk-note__head { margin: 0; font-size: .8125rem; font-weight: 700; color: var(--ink); }
.pk-note p { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--text); }
.pk-subhead { list-style: none; margin-left: -1.25rem; margin-top: .5rem; font-weight: 600; color: var(--ink); }
.pk-children-box { display: flex; flex-direction: column; gap: 1rem; }
.pk-children { display: flex; flex-direction: column; gap: .5rem; }
.pk-children[hidden] { display: none; }
.pk-prog { display: flex; flex-direction: column; gap: .875rem; }
.pk-intro { margin: 0; max-width: 47rem; font-size: 1.0625rem; line-height: var(--body-line-height, 1.6); color: var(--text); }
.pk-day__head { display: flex; flex-direction: column; gap: .25rem; }
.pk-day__list { margin: 0; padding: 0 0 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; line-height: var(--body-line-height, 1.6); color: var(--text); }
.pk-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); align-self: stretch; width: 100%; box-sizing: border-box; }
.pk-tiles .sht-fact__k { color: var(--teal-deep); }
#hotel-body { display: grid; grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr); gap: 3rem; align-items: start; }
#hotel-body[data-jump="0"] { grid-template-columns: minmax(0, 1fr); }
#hotel-jump { position: sticky; top: 10rem; display: flex; flex-direction: column; gap: .125rem; padding-top: 1.75rem; }
#hotel-jump-m { display: none; }
.pk-jump { display: block; padding: .5rem 0 .5rem .875rem; border-left: 2px solid var(--line); color: var(--text); text-decoration: none; font-size: .9375rem; line-height: 1.35; }
.pk-jump:hover { color: var(--bordo); border-left-color: var(--bordo); }
.pk-secs { display: flex; flex-direction: column; gap: 1.75rem; min-width: 0; }
.pk-sec { display: flex; flex-direction: column; gap: .875rem; padding-top: 1.75rem; border-top: 1px solid var(--line-2); scroll-margin-top: 10rem; }
.pk-list { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .5rem; line-height: var(--body-line-height, 1.6); color: var(--text); max-width: 52rem; }
.pk-venues { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.pk-venue { display: flex; flex-direction: column; gap: .625rem; padding: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.pk-venue h4 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: calc(1.0625rem * var(--heading-scale)); color: var(--ink); }
.pk-venue ul { margin: 0; padding-left: 1.125rem; display: flex; flex-direction: column; gap: .375rem; font-size: .9375rem; line-height: 1.5; color: var(--text); }
.pk-more { align-self: flex-start; }
.pk-more[hidden], .pk-lists[hidden] { display: none; }
.pk-places { list-style: none; padding-left: 0; }
.pk-notes { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: .25rem; max-width: 52rem; }
.pk-list > [hidden], .pk-venues > [hidden] { display: none; }
.pk-video { position: relative; width: 100%; max-width: 52rem; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink); }
.pk-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.pk-video__poster { position: relative; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; background: var(--ink); display: flex; align-items: center; justify-content: center; font: inherit; }
.pk-video__play { width: 4.5rem; height: 4.5rem; border-radius: var(--radius-pill); background: var(--surface); color: var(--bordo); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: var(--shadow-lift); }
.pk-video__tag { position: absolute; left: 1rem; bottom: 1rem; background: var(--surface); color: var(--ink); padding: .375rem .875rem; border-radius: var(--radius-pill); font-size: .875rem; font-weight: 600; }
.pk-doc { display: flex; align-items: center; gap: 1rem; max-width: 52rem; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); color: inherit; text-decoration: none; }
.pk-doc__text { display: flex; flex-direction: column; gap: .125rem; flex: 1; min-width: 0; }
.pk-doc__text b { color: var(--ink); overflow-wrap: anywhere; }
.pk-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.25rem; align-items: start; }
.pk-card { display: flex; flex-direction: column; gap: 1rem; }
.pk-card--amber { background: var(--tint-amber); }
.pk-card__head { display: flex; flex-direction: column; gap: .375rem; }
.pk-ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .75rem; }
.pk-ticks li { display: grid; grid-template-columns: 1.25rem 1fr; gap: .625rem; font-size: .9375rem; line-height: 1.5; color: var(--text); }
.pk-ticks__mark { color: var(--muted); font-weight: 700; }
.pk-ticks__mark--ok { color: var(--green); }
.pk-money { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.pk-money li { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--line-2); }
.pk-money__label { display: flex; flex-direction: column; gap: .125rem; min-width: 0; font-size: .9375rem; color: var(--ink); font-weight: 600; }
.pk-money__amt { display: flex; flex-direction: column; align-items: flex-end; gap: .125rem; text-align: right; font-family: var(--font-display); font-weight: 600; color: var(--ink); white-space: nowrap; }
.pk-money__amt .sht-card__meta { white-space: nowrap; font-family: var(--font-body); font-weight: 400; }
.pk-aside { position: sticky; top: calc(var(--header-h) + 5rem);  background: transparent; border: 0; box-shadow: none; padding: 0;}
.pk-aside__in { display: flex; flex-direction: column; gap: 1.25rem; }
.pk-aside .sht-call { flex-direction: column; gap: .625rem; }


/* ── Booking form (FTT-344): /registratsiya/<code>, its success page and the closed page ───────────────────
   Built from the site's own pieces (.sht-btn, .sht-input, .sht-note, the shared .form-row grid); only what the
   site lacked is here: the form column, the trip bar, the tourist block, the consent boxes and the error group.
   No media query: the grid and clamp() do the narrowing. */

.sht-reg { max-width: 60rem; margin: clamp(1.5rem, 4vw, 2.5rem) auto clamp(2.5rem, 6vw, 4rem); display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.sht-reg__head h1 { font-family: var(--font-display); font-size: calc(1.75rem * var(--heading-scale)); font-weight: var(--heading-weight); color: var(--ink); line-height: 1.2; margin: 0; }
.sht-reg__head p { margin: .375rem 0 0; color: var(--muted); font-size: .9375rem; }
.sht-reg__back { font-weight: 600; color: var(--bordo); }
.sht-reg__trip { display: flex; flex-wrap: wrap; gap: 1rem 2rem; padding: 1.25rem 1.5rem; background: var(--ink); color: var(--on-accent); border-radius: var(--radius-md); }
.sht-reg__trip-label { font-size: .75rem; color: var(--footer-muted); text-transform: uppercase; letter-spacing: .03em; }
.sht-reg__trip-val { margin-top: .25rem; font-weight: 600; overflow-wrap: anywhere; }
.sht-reg__card { background: var(--surface); border-radius: var(--radius-md); border: 1px solid var(--line); padding: clamp(1rem, 3vw, 1.75rem); min-width: 0; }
.sht-reg__muted { margin: .375rem 0 0; font-size: .8125rem; color: var(--muted); }
.sht-reg__hint { font-size: .75rem; color: var(--muted); margin-top: .25rem; }
.sht-reg__link { color: var(--teal-deeper); text-decoration: underline; }
.sht-reg__row { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; font-weight: 400; font-size: .875rem; color: var(--text); line-height: 1.5; }
.sht-reg__row input { width: auto; margin-top: .2rem; flex-shrink: 0; }
.sht-reg__row > span { min-width: 0; overflow-wrap: anywhere; }
.sht-reg__row--inline { align-items: center; }
.sht-reg__row--inline input { margin-top: 0; }
.sht-reg :is(.sht-note--ok, .sht-note--error, .sht-note--warn) { font-size: .875rem; font-weight: 400; line-height: 1.5; padding: .75rem 1rem; border-radius: var(--radius-sm); }
.sht-note--warn { background: var(--tint-amber); color: var(--bordo-deep); border: 1px solid var(--amber); border-radius: var(--radius-sm); padding: 1.125rem; }
.sht-reg [hidden] { display: none; }

.sht-reg label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .3rem; color: var(--text); }
.sht-reg label.sht-reg__row { display: flex; font-weight: 400; margin-bottom: 0; }
.sht-reg .req { color: var(--bordo); margin-left: .125rem; }
.sht-reg .sht-input { padding: .625rem .875rem; font-size: .9375rem; }
.sht-reg .sht-input.error { border-color: var(--promo); }
.sht-reg .form-row { --cols: 2; --col-min: 14rem; --col-gap: 1rem; --row-gap: 1rem; margin-bottom: 1rem; }
.sht-reg .form-group { margin-bottom: 1rem; min-width: 0; }
.sht-reg .form-row > .form-group { margin-bottom: 0; }
.sht-reg .err-msg { color: var(--promo); font-size: .78rem; margin-top: .25rem; }
.sht-reg .err-msg:empty { display: none; }

.sht-reg .tourist-block { border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 1.1rem; margin-bottom: 1rem; position: relative; min-width: 0; }
.sht-reg .tourist-block.lead { border-color: var(--bordo); }
.sht-reg__block-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.sht-reg__lead { font-size: .75rem; font-weight: 700; color: var(--bordo); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .75rem; }
.sht-reg__radios { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-top: .4rem; }
.sht-reg__radios label { display: flex; align-items: center; gap: .4rem; font-weight: 400; cursor: pointer; margin: 0; }
.sht-reg__radios input { width: auto; }
.sht-reg label.sht-reg__nodoc { display: flex; margin-bottom: 0; align-items: center; gap: .5rem; font-weight: 400; cursor: pointer; background: var(--tint-amber); border: 1px solid var(--amber); border-radius: var(--radius-sm); padding: .5rem .7rem; color: var(--bordo-deep); }
.sht-reg__nodoc input { width: auto; }
.sht-reg__insurance { margin-top: .7rem; padding: .8rem 1rem; background: var(--bg); border-radius: var(--radius-sm); border: 1px solid var(--line); font-size: .875rem; color: var(--text); line-height: 1.6; }
.sht-reg__insurance p { margin: 0 0 .5rem; }
.sht-reg__insurance p:last-child { margin-bottom: 0; }
.sht-reg__insurance .sht-reg__total { font-size: 1rem; color: var(--ink); font-weight: 600; }

.sht-reg .gdpr-box { background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.1rem; margin-top: .75rem; }
.sht-reg .gdpr-box.error-border { border-color: var(--promo); }
.sht-reg .gdpr-toggle { font-size: .75rem; color: var(--teal-deeper); cursor: pointer; text-decoration: underline; background: none; border: none; padding: 0; margin: .5rem 0 0 1.6rem; }
.sht-reg .gdpr-details { display: none; font-size: .78rem; color: var(--muted); line-height: 1.6; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.sht-reg .gdpr-details dt { font-weight: 600; color: var(--text); margin-top: .5rem; }
.sht-reg .gdpr-details dd { margin: .1rem 0 0; }
.sht-reg .gdpr-box .err-msg { margin-left: 1.6rem; }

/* The error group: a field (or a consent box) keeps .has-error from the first submit until its value is right (FTT-344, Flask FLASK-007) */
.sht-reg .has-error { outline: .125rem solid var(--promo); outline-offset: .1875rem; border-radius: var(--radius-sm); background: var(--tint-bordo); scroll-margin-block: 6rem; }
.sht-reg .form-group.has-error > label, .sht-reg .form-group.has-error > label .req { color: var(--promo); }
.sht-reg .has-error .err-msg { font-weight: 700; }
.sht-reg .has-error .sht-input { border-color: var(--promo); }
.sht-reg .gdpr-box.has-error, .sht-reg .sht-note--warn.has-error { border-color: var(--promo); }
.sht-reg .flash-error { animation: shtRegShake 1.2s ease-out; }
.sht-reg .flash-ok { animation: shtRegOk 1.2s ease-out; border-radius: var(--radius-sm); }
@keyframes shtRegShake {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--promo) 60%, transparent); transform: translateX(0); }
  10%  { transform: translateX(-.375rem); }
  20%  { transform: translateX(.375rem); }
  30%  { transform: translateX(-.25rem); }
  40%  { transform: translateX(.25rem); }
  50%  { box-shadow: 0 0 0 .625rem color-mix(in srgb, var(--promo) 15%, transparent); transform: translateX(0); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes shtRegOk {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent); }
  50%  { box-shadow: 0 0 0 .625rem color-mix(in srgb, var(--green) 15%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.sht-reg__fixes { margin: .4rem 0 0 1.2rem; padding: 0; }
.sht-reg__fixes li { margin-top: .35rem; }
.sht-reg__sep { border: none; border-top: 1px solid var(--amber); margin: .6rem 0; }
.sht-reg__fix { margin-left: .4rem; }

.sht-reg-toast { position: fixed; top: 1rem; left: 50%; transform: translate(-50%, -150%); background: var(--promo); color: var(--on-accent);
  padding: .75rem 1.2rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-dock); font-size: .9rem; font-weight: 600; z-index: 10000;
  max-width: calc(100% - 2rem); text-align: center; visibility: hidden; }
.sht-reg-toast.is-animated { transition: transform .3s ease, visibility 0s .3s; }
.sht-reg-toast.show { transform: translate(-50%, 0); visibility: visible; }
.sht-reg-toast.is-animated.show { transition: transform .3s ease, visibility 0s; }
.sht-reg-toast__go { margin-left: .7rem; }

.sht-reg-overlay { display: none; position: fixed; inset: 0; background: var(--scrim); z-index: 9999; align-items: center; justify-content: center; }
.sht-reg-overlay__box { background: var(--surface); border-radius: var(--radius-md); padding: 2rem 3rem; text-align: center; box-shadow: var(--shadow-dock); min-width: 13.75rem; }
.sht-reg-overlay__box p { margin: 0; font-size: .95rem; color: var(--text); font-weight: 500; }
.sht-reg-spinner { width: 2.75rem; height: 2.75rem; border: .25rem solid var(--line); border-top-color: var(--bordo); border-radius: 50%; animation: shtRegSpin .75s linear infinite; margin: 0 auto .9rem; }
@keyframes shtRegSpin { to { transform: rotate(360deg); } }

/* success and closed pages: one centred box between the brand bar and the footer */
.sht-reg-page { display: flex; flex-direction: column; min-height: 100vh; }
.sht-reg-page .sht-bar, .sht-reg-page .sht-bar-footer { flex: none; }
.sht-regbox { margin: auto; width: min(100% - 2 * var(--gutter), 32.5rem); text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: clamp(1.5rem, 5vw, 2.5rem); display: flex; flex-direction: column; gap: .75rem; }
.sht-regbox--narrow { width: min(100% - 2 * var(--gutter), 27.5rem); }
.sht-regbox h1 { font-family: var(--font-display); font-size: calc(1.4rem * var(--heading-scale)); font-weight: var(--heading-weight); color: var(--ink); margin: 0; }
.sht-regbox p { margin: 0; color: var(--text); font-size: .9rem; line-height: 1.7; }
.sht-regbox__icon { font-size: 3rem; line-height: 1; }
.sht-regbox__id { align-self: center; background: var(--ok-bg); color: var(--ok-ink); padding: .5rem 1.2rem; border-radius: var(--radius-sm); font-weight: 700; font-size: 1.1rem; }
.sht-regbox :is(.sht-note--ok, .sht-note--warn, .sht-note--error) { text-align: left; font-size: .875rem; font-weight: 400; padding: .75rem 1rem; border-radius: var(--radius-sm); display: flex; align-items: center; gap: .5rem; }
.sht-regbox .sht-note--error { display: block; }
.sht-regbox .sht-note--error a { color: var(--bordo); }
.sht-regbox__detail { background: var(--bg); border-radius: var(--radius-sm); padding: 1rem; text-align: left; font-size: .875rem; color: var(--text); margin: 0; }
.sht-regbox__detail dt { font-weight: 600; color: var(--muted); font-size: .78rem; text-transform: uppercase; margin-top: .5rem; }
.sht-regbox__detail dd { margin: .2rem 0 0; overflow-wrap: anywhere; }
.sht-regbox__detail dt.deadline, .sht-regbox__detail dd.deadline { color: var(--bordo); }
.sht-regbox__detail .deadline-note { font-size: .8rem; color: var(--muted); }
.sht-regbox__lines { display: flex; flex-direction: column; gap: .25rem; }
.sht-regbox__name { font-weight: 700; color: var(--ink); }
.sht-regbox__quiet { color: var(--muted); }

/* ── Date calendar over a date <select> (site.js enhanceDateSelect) ─────
   Available days bold, the others grey; the <select> stays as the form's value. */
.sht-dp { position: relative; display: block; min-width: 0; }
.sht-dp__native { position: absolute; inset: 0 auto auto 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sht-dp__btn { display: flex; align-items: center; justify-content: space-between; gap: .5rem; text-align: left; cursor: pointer; }
.sht-dp__btn::after { content: "▾"; color: var(--muted); }
.sht-dp__btn:disabled { cursor: default; opacity: .6; }
.sht-dp__pop { position: absolute; z-index: 30; top: calc(100% + .375rem); left: 0; width: min(20rem, calc(100vw - 2rem)); box-sizing: border-box; padding: .875rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 .75rem 2rem var(--line); }
.sht-dp__pop[hidden] { display: none; }
.sht-dp__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; color: var(--ink); }
.sht-dp__nav { min-width: 2.25rem; min-height: 2.25rem; border: 1px solid var(--chip-line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font: inherit; font-size: 1.125rem; cursor: pointer; }
.sht-dp__nav:disabled { opacity: .35; cursor: default; }
.sht-dp__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .125rem; text-align: center; }
.sht-dp__wd { padding: .25rem 0; font-size: .75rem; color: var(--muted); }
.sht-dp__day { min-height: 2.25rem; border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit; font-size: .9375rem; }
.sht-dp__day.is-avail { font-weight: 800; color: var(--ink); cursor: pointer; }
.sht-dp__day.is-avail:hover, .sht-dp__day.is-avail:focus-visible { background: var(--bg); outline: 1.5px solid var(--bordo); }
.sht-dp__day.is-off { font-weight: 400; color: var(--muted); opacity: .4; cursor: default; }
.sht-dp__day.is-sel { background: var(--bordo); color: var(--on-accent); }
.sht-dp__legend { margin: .625rem 0 0; font-size: .75rem; color: var(--muted); }
.sht-dp__choices { display: flex; flex-direction: column; gap: .375rem; margin-top: .625rem; }
.sht-dp__choice { padding: .5rem .75rem; border: 1px solid var(--chip-line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
/* FTT-450: the range variant (`[data-date-range]`, enhanceDateRange): the wrapper of the two native inputs becomes the .sht-dp box */
.sht-ex-dates.sht-dp { display: block; }
.sht-dp.sht-ex-dates .sht-dp__btn { width: 100%; box-sizing: border-box; }
.sht-dp__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sht-dp__val.is-empty { color: var(--muted); }
.sht-dp[data-align="right"] .sht-dp__pop { left: auto; right: 0; }
.sht-dp__day.is-in-range { background: var(--tint-bordo); border-radius: 0; }
.sht-dp__day.is-sel.is-in-range { background: var(--bordo); }
.sht-dp__foot { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; }
.sht-dp__clear { border: 0; background: none; padding: .25rem 0; font: inherit; font-size: .8125rem; font-weight: 600; color: var(--bordo); cursor: pointer; }
.sht-dp__hint { display: block; margin-top: .5rem; font-size: .8125rem; color: var(--text); }
.sht-dp__done { display: none; }

/* FTT-408 a): the live block of an offer page keeps its final size before and after the answer (layout only) */
.sht-live { min-height: 3.5em; }
.sht-live > p { margin: 0; }

/* FTT-550: the text position and size of one CMS block, a closed set (apps/cms/block_text.py). Nothing set = the block as
   designed. The size steps scale the headings through the same variable the font settings use and the text in `em`. */
[data-text-align="left"] { text-align: left; }
[data-text-align="center"] { text-align: center; }
[data-text-align="left"] .sht-section__head { justify-content: flex-start; }
[data-text-align="center"] .sht-section__head { justify-content: center; align-items: center; }
[data-text-align="center"] :is(.sht-section__lead, .sht-prose) { margin-inline: auto; }
[data-text-size="s"] { font-size: .9em; --heading-scale: .85; --text-scale: .9; }
[data-text-size="l"] { font-size: 1.15em; --heading-scale: 1.2; --text-scale: 1.15; }