/* Imagine Holidays theme layer over the Tripora Webflow template.
   Rule: only colours, fonts and small new components live here. Layout, spacing and
   proportions stay exactly as the template CSS defines them. */

:root {
  /* brand (taken from the logo) */
  --ih-navy: #133f86;          /* logo "Imagine" blue: buttons, links */
  --ih-navy-hover: #1b56b0;
  --ih-ink: #0f2745;           /* deep navy: headings, dark panels */
  --ih-turq: #1bb3c1;          /* logo wave turquoise */
  --ih-turq-deep: #0b8e9b;     /* accent words, icons on light */
  --ih-turq-tint: #d2f1ef;
  --ih-gold: #f2a900;          /* logo sun */
  --ih-gold-deep: #d98a00;
  --ih-gold-tint: #fff3d1;
  --ih-sand: #fbe9c6;
  --ih-sky: #d5ebf7;
  --ih-promo: #e8590c;         /* sun orange for discounts */

  /* template palette remapped (same roles, new hues) */
  --color--primary-1: var(--ih-gold-tint);   /* was cream yellow */
  --color--primary-2: var(--ih-turq-tint);   /* was pink */
  --color--primary-3: var(--ih-sand);        /* was peach */
  --color--primary-4: var(--ih-sky);         /* was light blue */
  --color--secondary-1: #7360f2;             /* was WhatsApp green, now Viber */
  --color--secondary-2: var(--ih-turq-deep);
  --color--secondary-3: var(--ih-promo);
  --color--secondary-3-op50: #e8590c80;
  --color--secondary-3-op20: #e8590c33;
  --color--secondary-3-op10: #e8590c1a;
  --color--secondary-4: var(--ih-gold);
  --color--gray-1: var(--ih-ink);
  --color--gray-1-op10: #0f27451a;
  --color--gray-1-op30: #0f27454d;
  --color--gray-1-op70: #0f2745b3;
  --color--gray-4: #f5f7fa;

  /* body font: Stack Sans Headline has no Cyrillic; Manrope is the closest metric match */
  --_typography---font-family--body: "Manrope", "Stack Sans Headline", Arial, sans-serif;
  /* the template's heading/accent faces as small WOFF2 files under our own names (fonts/manrope.css,
     tools/fonts/make_fonts.py): the template CSS still declares its 200-400 KB TTFs, never used now */
  --_typography---font-family--heading: "IH Inter Display", Arial, sans-serif;
  --_typography---font-family--alt-text: "IH Source Serif 4", Arial, sans-serif;
}
/* the template sets these again on body at <= 991 px: keep ours there too, or tablets and phones would still download
   the TTFs and show the body text in "Stack Sans Headline" (no @font-face: Helvetica / Roboto); same values as :root,
   so laptops and desktops do not change */
body {
  --_typography---font-family--body: "Manrope", "Stack Sans Headline", Arial, sans-serif;
  --_typography---font-family--heading: "IH Inter Display", Arial, sans-serif;
  --_typography---font-family--alt-text: "IH Source Serif 4", Arial, sans-serif;
}

/* ---------- brand accents ---------- */
.accent-word-text { color: var(--ih-turq-deep); }
.text-white .accent-word-text,
.accent-word-text.text-white,
.hero-title .accent-word-text,
.subscribe-title .accent-word-text,
.tours-hero .accent-word-text,
.about-hero-section .accent-word-text,
.step-section .grid-step .accent-word-text,
.categories-hero .accent-word-text { color: inherit; }

/* dark buttons: template black becomes logo navy */
.button-black,
.button-primary,
.button-primary.button-subscribe { background-color: var(--ih-navy); }
.button-primary:hover,
.button-primary.button-subscribe:hover { background-color: var(--ih-navy-hover); }
.button-black:where(.w-variant-2fbc6b96-0789-bfea-7264-5e6c2fd5a699) { background-color: var(--color--white); color: var(--ih-ink); }
.button-black:where(.w-variant-34dfffa8-4842-149d-6b4d-ef06bf968439) { background-color: var(--color--primary-2); color: var(--ih-ink); }
.button-black:where(.w-variant-5f1ca978-ef6b-8eea-93a4-92ba70d9a491) { background-color: var(--color--primary-3); color: var(--ih-ink); }
.duration-badge,
.badge:where(.w-variant-5345bc4c-5615-85e2-4b20-4ba39866672a) { background-color: var(--ih-navy); }
.nav-icon-wrapper.left-icon:where(.w-variant-e1eed9f3-2c03-4a43-3b35-85301ee647b0) { background-color: var(--ih-navy); }

/* ---------- logo (keeps the template's 50px logo slot, lockup is taller so it gets a bit more height) ---------- */
.logo { width: auto; height: 58px; }
.footer-logo { width: auto; height: 64px; }

/* ---------- offers: promo badge + old price (new, sized like the template's small pills) ---------- */
.ih-promo-badge {
  border-radius: var(--border-radius--xl); background-color: var(--ih-promo); color: #fff;
  font-size: var(--_typography---body--body-xs); line-height: var(--_typography---body--line-height-2);
  font-weight: 600; padding: .25rem .625rem .2rem; letter-spacing: .01em;
}
/* card pills top-left over the photo: offer label (ТОП ОФЕРТА / LAST MINUTE) then the discount */
.ih-card-badges {
  z-index: 1; position: absolute; top: 20px; left: 20px; right: 20px;
  display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none;
}
.ih-promo-badge.ih-label-top, .badge.ih-label-top { background-color: var(--ih-gold); color: var(--ih-ink); }
.ih-promo-badge.ih-label-last-minute, .badge.ih-label-last-minute { background-color: var(--ih-ink); color: #fff; }
.ih-old-price {
  color: var(--color--gray-2); text-decoration: line-through; text-decoration-thickness: 1px;
  font-size: var(--_typography---body--body-sm); margin-right: 6px; white-space: nowrap;
}
.tours-detail-top .ih-old-price { color: var(--color--white-op70); font-size: var(--_typography---body--body-md); }
.ih-price-from { font-size: var(--_typography---body--body-xs); color: var(--color--gray-2); margin-right: 4px; }

/* ---------- small helpers ---------- */
.ih-nowrap { white-space: nowrap; }
.ih-hidden { display: none !important; }

/* lang="bg" makes Chrome switch the body font to Bulgarian letterforms while the heading
   fonts stay standard; keep one consistent (standard) Cyrillic style everywhere. */
html { font-feature-settings: "locl" 0; }
.nav-menu-round.bg-black { background-color: var(--ih-ink); }

/* ---------- short and narrow laptop windows (2026-10-03): only where the template's layout would break ---------- */
/* Menu overlay: the panel starts 80px down and its 6 link rows (20px apart) plus contacts make it ~640px tall, so
   under ~720px of window height its bottom (phone, social icons) went under the window edge. There the rows move
   closer; and the panel scrolls (the smooth-scroll script leaves it alone: data-lenis-prevent) if it still doesn't
   fit. Taller windows keep the template's spacing. */
@media screen and (min-width: 992px) {
  .nav-menubar { max-height: 100vh; overflow-y: auto; overscroll-behavior: contain; }
}
@media screen and (min-width: 992px) and (max-height: 720px) {
  .nav-link-items { grid-row-gap: var(--gap--gap-4); row-gap: var(--gap--gap-4); }
  .nav-menu-inner { margin-top: 4.375rem; }
}
/* Footer background video: the template puts its play/pause button 1em from the footer's bottom-right corner,
   right on the last social icon (TikTok), on every screen. Same button, moved up into the empty dark band between
   the link columns and the dashed line (the line is 93px above the footer's bottom and the band 80px tall at every
   desktop size): visible on the dark video, clear of the icons and the text. */
@media screen and (min-width: 992px) {
  footer .w-background-video--control { top: auto; bottom: calc(93px + 22px); right: 1.25rem; }
}
/* Offer card grids: the template's three 1fr columns can't shrink below their content's widest word or pill row,
   so at ~1024px (a promo card's old + new price + nights) the grid ran ~100px past the window (sideways scroll).
   minmax(0, 1fr) keeps them equal and inside; from ~1100px up the columns are wider than any content anyway. */
@media screen and (min-width: 992px) {
  .grid-featured-tours-item { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* in those narrower cards (~1024px windows) a promo price (old + new + „/ човек”) and „11 нощувки” no longer fit
     on one line: the nights badge then moves under the price instead of being cut off at the card's edge.
     Wrapping only happens when the row doesn't fit, so wider cards stay exactly as before. */
  .featured-tours-pricing { flex-wrap: wrap; row-gap: var(--gap--gap-3); }
}
/* Blog cards on ~1024px windows: „8 септември 2026 • 4 мин. за четене” no longer fits one line and broke mid-phrase;
   there the date and the reading time go on two lines (without the dot). From 1152px up it stays one line. */
@media screen and (min-width: 992px) and (max-width: 1151px) {
  .blog-item .meta-list { flex-direction: column; align-items: flex-start; grid-row-gap: 2px; row-gap: 2px; }
  .blog-item .meta-list .dot { display: none; }
}

/* ---------- navbar (client, 2026-10-05) ---------- */
/* a slightly larger logo on desktop (template slot 50px, was 58px), still centred between the menu and contact buttons */
@media screen and (min-width: 992px) { .logo { height: 68px; } }
/* „Контакти” panel under the navbar button (lib.mjs applyNav + site.js): the menu overlay's dark panel and dashed
   frame, with the contacts as white icon tiles like the footer's social icons */
.ih-contact-pop {
  position: absolute; top: calc(100% + .75rem); right: 0; z-index: 20; width: 21.25rem; max-width: calc(100vw - 2.5rem);
  opacity: 0; transform: translateY(-.5rem); transition: opacity .25s ease, transform .25s ease;
}
.ih-contact-pop.is-open { opacity: 1; transform: none; }
.ih-contact-pop .nav-menu-inner { margin-top: 0; box-shadow: 0 1.25rem 3rem rgba(15, 39, 69, .28); }
.ih-contact-pop .nav-menu-item { grid-row-gap: 1.25rem; row-gap: 1.25rem; padding: 1.5rem; }
.ih-contact-pop .footer-title { margin-bottom: 0; padding-bottom: 1rem; }
.ih-contact-pop-links { display: flex; flex-direction: column; gap: .875rem; }
.ih-contact-pop-link { display: flex; align-items: center; gap: .875rem; text-decoration: none; }
.ih-contact-pop-icon {
  flex: none; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  border-radius: var(--border-radius--sm); background-color: var(--color--white);
}
.ih-contact-pop-icon img { width: 1.25rem; height: 1.25rem; }
.ih-contact-pop-label { display: block; color: var(--color--gray-3); font-size: var(--_typography---body--body-sm); line-height: 1.3; }
.ih-contact-pop-value { display: block; color: var(--color--white); font-weight: 600; line-height: 1.35; transition: color .3s ease-in-out; }
.ih-contact-pop-link:hover .ih-contact-pop-value, .ih-contact-pop-link:focus-visible .ih-contact-pop-value { color: var(--ih-turq); }
.ih-contact-pop-bottom { display: flex; flex-direction: column; gap: .625rem; }
.ih-contact-pop-note { margin: 0; color: var(--color--gray-3); font-size: var(--_typography---body--body-sm); line-height: 1.4; }
.ih-contact-pop-more { align-self: flex-start; color: var(--color--white); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ih-contact-pop-more:hover { color: var(--ih-turq); }

/* Offer cards (lib.offerCard): the photo box keeps the proportions of the cards' photos (720x582) whatever the size of
   the photo in it, e.g. one uploaded in the admin or the offer's hero photo standing in for a missing card photo; the
   template sizes the box by its photo, so a photo of another shape made the cards of one row uneven */
.featured-tours-top { aspect-ratio: 720 / 582; }

/* ---------- picture wrappers and phone-only markup (2026-10-10; layout-neutral on laptops and desktops) ---------- */
/* lib.phoneSources wraps a photo in <picture class="ih-pic"> for its phone copies: the wrapper takes no box, so the
   template's flex/grid layout and its selectors see the <img> exactly as before */
.ih-pic { display: contents; }
/* its <source> elements would otherwise become (empty) flex / grid items of the img's container and add a gap */
.ih-pic > source { display: none; }
/* markup the generator adds for phones and tablets only (always last in its container). The exact complement of the
   phone guard „screen and (max-width: 991px)”: a fractional window width (991.2 px at 125 % scaling) matches neither
   that nor (min-width: 992px), and must still hide it */
@media not screen and (max-width: 991px) {
  .ih-m-only { display: none !important; }
  /* links the generator adds inside running text (blog articles): plain text on laptops and desktops */
  .ih-text-link { color: inherit; text-decoration: none; }
}

/* ===== PHONES & TABLETS (≤ 991) — never laptops =====
   Every rule below sits in a max-width 991 / 767 / 479 query, the phone-landscape query (max-width 991 and max-height
   500) or a touch-only query, so laptops and desktops (≥ 992 px wide) never see them. Page parts live in
   css/<page>.css; these are the site-wide decisions (tools/AGENTS.md „Phones and tablets”). */

/* ----- P0 utilities and safe areas ----- */
@media screen and (max-width: 991px) {
  body {
    /* metric-matched local fallbacks while the web fonts load (fonts/manrope.css): less text jump on slow phones */
    --_typography---font-family--body: "Manrope", "IH Manrope Fallback", "Stack Sans Headline", Arial, sans-serif;
    --_typography---font-family--heading: "IH Inter Display", "IH Inter Display Fallback", Arial, sans-serif;
    --_typography---font-family--alt-text: "IH Source Serif 4", "IH Source Serif 4 Fallback", Arial, sans-serif;
    /* viewport-fit=cover (lib.applyHead): the side gutters never go under the notch of a phone in landscape */
    --_layout---container--container-gutter: max(1.25rem, env(safe-area-inset-left), env(safe-area-inset-right));
    --_layout---container--container-full-gutter: max(1.25rem, env(safe-area-inset-left), env(safe-area-inset-right));
    --_layout---container--inner-container-gutter: max(1.25rem, env(safe-area-inset-left), env(safe-area-inset-right));
    --_layout---container--container-medium-gutter: max(1.25rem, env(safe-area-inset-left), env(safe-area-inset-right));
    --_layout---container--container-small-gutter: max(1.25rem, env(safe-area-inset-left), env(safe-area-inset-right));
  }
  /* anchors and focused fields land below the floating header */
  html { scroll-padding-top: 88px; }
  input, select, textarea { scroll-margin-top: 96px; }
  .ih-nowrap-m { white-space: nowrap; }
  .ih-text-link { color: var(--ih-navy); text-decoration: underline; text-underline-offset: 2px; }
}
@media screen and (max-width: 767px) {
  body {
    --_layout---container--container-gutter: max(.938rem, env(safe-area-inset-left), env(safe-area-inset-right));
    --_layout---container--container-full-gutter: max(.938rem, env(safe-area-inset-left), env(safe-area-inset-right));
    --_layout---container--inner-container-gutter: max(.938rem, env(safe-area-inset-left), env(safe-area-inset-right));
    --_layout---container--container-medium-gutter: max(.938rem, env(safe-area-inset-left), env(safe-area-inset-right));
    --_layout---container--container-small-gutter: max(.938rem, env(safe-area-inset-left), env(safe-area-inset-right));
  }
}
@media screen and (max-width: 479px) {
  /* the small poster (lib.setBgVideo poster_sm) of a video whose poster is an inline background (hero / load videos) */
  video[data-ih-poster-small][style*="--ih-poster-sm"] { background-image: var(--ih-poster-sm) !important; }
}

/* ----- P1 typography ----- */
@media screen and (max-width: 767px) {
  /* no single-word last lines in headings, fewer in paragraphs */
  h1, h2, h3, .cta-title, .hero-title, .featured-blog-title, .blog-title, .heading-h5 { text-wrap: balance; }
  p, li { text-wrap: pretty; }
  /* information text at least 13 px (12 px stays on pills only) */
  .blog-date, .blog-read-time, .blog-category, .ih-cal-chip-wd { font-size: .8125rem; }
}
@media screen and (max-width: 479px) {
  /* the template's 36 / 30 px headings, a little smaller only below 375 px */
  body {
    --_typography---h1--h1: clamp(1.875rem, 9.6vw, 2.25rem);
    --_typography---h2--h2: clamp(1.625rem, 8vw, 1.875rem);
  }
}

/* ----- P2 navbar: floating header and the contacts sheet ----- */
/* site.js: html.ih-nav-float once the page is scrolled past the first screen (the navbar becomes fixed, parked above
   the window), html.ih-nav-show while the visitor scrolls up (it slides in), both gone again at the top. Nothing on the
   path from .navbar to the menu panel (.nav-menubar, position: fixed) may get transform / filter / backdrop-filter /
   contain / will-change, and `translate` is none whenever the menu can open: the panel would be trapped inside. */
@media screen and (max-width: 991px) {
  html.ih-nav-float :is(.navbar, .navbar-simple) {
    position: fixed; top: 0; left: 0; right: 0;
    padding-top: max(.5rem, env(safe-area-inset-top)); padding-bottom: .5rem;
    translate: 0 calc(-100% - 10px);
    transition: translate .28s ease;
  }
  html.ih-nav-float.ih-nav-show :is(.navbar, .navbar-simple),
  html.ih-nav-float.ih-menu-open :is(.navbar, .navbar-simple) { translate: none; }
  /* the navbar's own (empty) top padding lets taps and hit tests through: Chrome on Android keeps the reading place on
     rotation by the element at the top centre of the window, and the header there made a turned tablet jump to the
     top of the page (and a turned phone keep its raw offset); its content (pill, panels, menu overlay) stays tappable */
  html.ih-nav-float :is(.navbar, .navbar-simple) { pointer-events: none; }
  html.ih-nav-float :is(.navbar, .navbar-simple) > * { pointer-events: auto; }
  html.ih-nav-instant :is(.navbar, .navbar-simple) { transition: none; }
  /* the pill behind the floating header: on a pseudo-element, so .grid-nav itself never gets a backdrop-filter. No
     isolation on .grid-nav: Webflow moves the open menu into .w-nav-overlay, a later sibling, and the menu button
     (z-index 9999) must stay above it; z-index -1 inside the fixed navbar keeps the pill under the grid's own frame */
  html.ih-nav-float .grid-nav { padding-top: .3125rem; padding-bottom: .3125rem; }
  html.ih-nav-float .grid-nav::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background-color: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 6px 20px rgba(15, 39, 69, .12);
  }
  html.ih-nav-float .navbar .grid-nav::before { background-color: rgba(15, 39, 69, .88); box-shadow: 0 6px 20px rgba(15, 39, 69, .25); }
  html.ih-nav-float .logo { height: 44px; }
  html.ih-nav-float .menu-button .nav-menu-round { width: 44px; height: 44px; }
  /* the contacts panel scrolls when the window is short (phones in landscape) */
  .ih-contact-pop { max-height: calc(100vh - 7rem); max-height: calc(100dvh - 7rem); overflow-y: auto; overscroll-behavior: contain; }
  /* the round contacts button is for phones in portrait only (≤ 479 px, below) */
  .ih-contact-mini { display: none; }
}
@media screen and (max-width: 991px) and (prefers-reduced-motion: reduce) {
  html.ih-nav-float :is(.navbar, .navbar-simple) { transition: none; }
}
@media screen and (max-width: 767px) {
  /* 44 px rows in the contacts panel / sheet */
  .ih-contact-pop-link { min-height: 44px; }
  .ih-contact-pop-more { display: inline-flex; align-items: center; min-height: 44px; }
}
/* ≤ 479 px: the template hides the „Контакти” button; a round 44 px button takes its place (lib.applyNav), on the left of
   the logo, which is centred between it and the menu button; the panel opens as a full-width sheet under the navbar */
@media screen and (max-width: 479px) {
  .grid-nav { grid-template-columns: auto 1fr auto; padding-left: .625rem; }
  .grid-nav > .navbar-center { justify-self: center !important; }
  .navbar-center .brand { padding-left: 0; }
  .navbar-right { display: flex; order: -1; position: static; }
  .navbar-right .nav-button { display: none; }
  .ih-contact-mini {
    display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px;
    border-radius: 50%; background-color: var(--ih-ink); color: var(--color--white); text-decoration: none;
  }
  .navbar .ih-contact-mini { background-color: var(--color--white); color: var(--ih-ink); }
  .ih-contact-mini-round { display: contents; }
  #ih-contact-pop { left: 0; right: 0; width: auto; max-width: none; }
}

/* ----- P3 menu overlay ----- */
@media screen and (max-width: 991px) {
  /* the page behind the open menu stays put (site.js also stops the smooth scroll) */
  html.ih-menu-open, html.ih-menu-open body { overflow: hidden; }
  /* the panel scrolls by itself when it is taller than the window (as the ≥ 992 px rule above) */
  .nav-menubar {
    min-height: 100vh; min-height: 100dvh; max-height: 100vh; max-height: 100dvh;
    overflow-y: auto; overscroll-behavior: contain;
  }
  /* there is no hover on touch screens: the links are readable at rest (the current one keeps its cream) */
  .nav-menubar .nav-link-item:not(.w--current) { color: rgba(255, 255, 255, .82); }
}
@media (hover: none) and (pointer: coarse) {
  .nav-menubar .nav-link-item:not(.w--current) { color: rgba(255, 255, 255, .82); }
}
@media screen and (max-width: 767px) {
  .nav-menubar { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  /* 44 px rows */
  .nav-menubar .nav-link-items { grid-row-gap: 0; row-gap: 0; }
  .nav-menubar .nav-link-item { padding-top: 10px; padding-bottom: 10px; }
}
@media screen and (max-width: 479px) {
  .menu-button .nav-menu-round { width: 44px; height: 44px; }
  /* open: a clear X instead of the four dots (the „Затвори” label is hidden at this width). The template's interaction
     turns the dots and sets their opacity inline, and makes the round white on every page */
  .menu-button.w--open .nav-menu-icon { opacity: 0 !important; }
  .menu-button.w--open .nav-menu-round { position: relative; }
  .menu-button.w--open .nav-menu-round::before,
  .menu-button.w--open .nav-menu-round::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px;
    border-radius: 1px; background-color: var(--ih-ink); rotate: 45deg;
  }
  .menu-button.w--open .nav-menu-round::after { rotate: -45deg; }
}

/* ----- P4 footer ----- */
@media screen and (max-width: 991px) {
  /* „Разгледай” (lib.applyFooter, phones and tablets only): first */
  .ih-footer-browse { order: -1; }
}
@media screen and (min-width: 480px) and (max-width: 991px) {
  /* the video's play/pause button sat on the TikTok icon (at <= 479 the template's corner position stays clear: moved
     up there it covered the copyright line at 412 / 430 px) */
  footer .w-background-video--control { top: auto; bottom: 4.5rem; right: 1.25rem; }
}
@media screen and (max-width: 767px), screen and (max-width: 991px) and (pointer: coarse) {
  /* 44 px tap targets (phones, and touch tablets / landscape phones, where the „Разгледай” column shows too) */
  .footer-links { grid-row-gap: 0; row-gap: 0; }
  /* min-width: a short label („Блог”) still gives a 44 px wide target */
  .footer-link, .footer-contact-link { display: inline-block; min-width: 44px; padding-top: 12px; padding-bottom: 12px; line-height: 1.4; }
  .footer-social-link { width: 44px; height: 44px; }
  .w-background-video--control { width: 44px; height: 44px; }
}

/* ----- P5 shared components ----- */
@media screen and (max-width: 767px), screen and (max-width: 991px) and (pointer: coarse) {
  /* slider dots (phones, and touch tablets / landscape phones): swiping is the main control; each dot (10 px + 8 px
     margins) gets a 26 x 44 px hit area, no overlap. !important: Webflow's slider script writes the dots' spacing as an
     inline margin (3 px) */
  .w-slider-dot { flex-shrink: 0; margin-left: 8px !important; margin-right: 8px !important; }
  .w-slider-dot::before { content: ""; position: absolute; inset: -17px -8px; }
  /* the template's dots pill (.slide-nav, 110 px: 6 dots at a 15 px pitch) grows with them (6 dots: 164 px) */
  .slide-nav { width: max-content; padding-left: 4px; padding-right: 4px; }
  /* the home categories slider's arrows sit either side of that pill (home.css places them for the 110 px one: 55 px
     = half of it); here half of the 164 px pill. Specificity above home.css's rule, which loads later */
  .categories-slider .w-slider-arrow-left.ih-cat-arrow.left-arrow { right: calc(50% + 82px + var(--gap--gap-5)); }
  .categories-slider .w-slider-arrow-right.ih-cat-arrow.right-arrow { left: calc(50% + 82px + var(--gap--gap-5)); }
}
@media screen and (max-width: 767px) {
  /* buttons */
  .button-black, .button-secondary-icon, .ih-cal-book { min-height: 44px; }
  /* chips (listings, calendar, destinations) */
  .tours-category-link {
    display: inline-flex; align-items: center; justify-content: center; min-height: 40px;
    padding: 0 14px; font-size: .875rem;
  }
  /* one swipeable row (the page modules add .ih-scroll-row; site.js brings the current item into view and tracks the end) */
  .ih-scroll-row {
    display: flex; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * var(--_layout---container--container-gutter)); margin-right: calc(-1 * var(--_layout---container--container-gutter));
    padding-left: var(--_layout---container--container-gutter); padding-right: var(--_layout---container--container-gutter);
    scroll-padding-left: var(--_layout---container--container-gutter); scroll-padding-right: var(--_layout---container--container-gutter);
  }
  .ih-scroll-row::-webkit-scrollbar { display: none; }
  .ih-scroll-row > * { flex: none; scroll-snap-align: start; }
  .ih-scroll-row:not(.ih-at-end) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  }
  /* featured blog card (home, /blog): the white title stays readable over bright photos */
  .featured-blog-blur { height: 80%; background-image: linear-gradient(180deg, transparent, rgba(15, 39, 69, .85) 55%); }
  .featured-blog-title { text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
  /* radio chips: the circle and its label on one line (a template defect at every width; phones only here) */
  label.w-radio.radio-item { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; min-height: 44px; }
  label.w-radio.radio-item::before, label.w-radio.radio-item::after { display: none; }
  label.w-radio.radio-item .w-radio-input { float: none; margin: 0; }
  label.w-radio.radio-item .radio-button-label { padding-left: 0; }
}
@media screen and (max-width: 991px) and (min-width: 768px) {
  /* blog cards on tablets: two columns, and the date and the reading time on two lines (as 992–1151 px above) */
  .grid-blog-item { grid-template-columns: 1fr 1fr; }
  .blog-item .meta-list { flex-direction: column; align-items: flex-start; grid-row-gap: 2px; row-gap: 2px; }
  .blog-item .meta-list .dot { display: none; }
  /* the CTA box decoration (vector-08) reached 11 px past the window: sideways scroll on tablets */
  .simple-cta-section { overflow-x: clip; }
}
@media screen and (max-width: 479px) {
  /* featured blog card at least 4:3 */
  .featured-blog-image { aspect-ratio: 4 / 3; height: auto; min-height: 100%; }
  /* contact methods (/kontakti, /biznes-patuvania, /rezervacia): full-width rows with a 16 px value */
  .contact-item {
    width: 100%; height: auto; min-height: 64px; flex-direction: row; justify-content: flex-start; padding: 12px 16px;
    text-align: left; border: 1px dashed var(--color--gray-1-op30); border-radius: var(--border-radius--md);
    background-color: var(--color--gray-4);
  }
  .contact-item .vector-07 { display: none; }
  .contact-item .contact-icon-round { width: 44px; height: 44px; }
  .contact-item .contact-icon { width: 22px; height: 22px; }
  .contact-link { font-size: 1rem; font-weight: 600; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
}
@media (hover: none) and (pointer: coarse) {
  /* no sticky hover colour after a tap */
  .submit-button:hover { background-color: var(--color--white); }
}

/* ----- P6 phones in landscape ----- */
@media screen and (max-width: 991px) and (max-height: 500px) {
  /* compact floating header (≤ 60 px) */
  html.ih-nav-float :is(.navbar, .navbar-simple) { padding-top: max(.25rem, env(safe-area-inset-top)); padding-bottom: .25rem; }
  html.ih-nav-float .grid-nav { padding-top: .125rem; padding-bottom: .125rem; }
  html.ih-nav-float .navbar-right .nav-button { padding-top: .125rem; padding-bottom: .125rem; }
  /* compact menu */
  .nav-link-items { grid-row-gap: 8px; row-gap: 8px; }
  .nav-menu-inner { margin-top: 4.375rem; }
  .nav-menubar .nav-link-item { padding-top: 4px; padding-bottom: 4px; }
  /* once the panel is scrolled, a band under the menu button (which stays put) keeps the links from running under it;
     scroll-driven, so browsers without it just keep the template's look */
  .nav-menubar::before {
    content: ""; position: sticky; top: -1.25rem; z-index: 1; flex: none; display: block; height: 5.75rem; margin: -1.25rem 0 -4.5rem;
    background-image: linear-gradient(to bottom, rgba(15, 39, 69, .97) 75%, rgba(15, 39, 69, 0)); opacity: 0; pointer-events: none;
  }
  @supports (animation-timeline: scroll()) {
    .nav-menubar::before { animation: ih-menu-band linear both; animation-timeline: scroll(nearest block); animation-range: 0 2.5rem; }
  }
}
@media screen and (max-width: 767px) and (max-height: 500px) {
  .nav-menubar::before { top: -1rem; margin-top: -1rem; margin-bottom: -4.75rem; }
}
/* short portrait phones (320x568, 375x667): the panel scrolls there too, and the fixed round X covered the top-right
   link; the same band as in landscape */
@media screen and (max-width: 479px) and (min-height: 501px) and (max-height: 700px) {
  .nav-menubar::before {
    content: ""; position: sticky; top: -1rem; z-index: 1; flex: none; display: block; height: 5.75rem; margin: -1rem 0 -4.75rem;
    background-image: linear-gradient(to bottom, rgba(15, 39, 69, .97) 75%, rgba(15, 39, 69, 0)); opacity: 0; pointer-events: none;
  }
  @supports (animation-timeline: scroll()) {
    .nav-menubar::before { animation: ih-menu-band linear both; animation-timeline: scroll(nearest block); animation-range: 0 2.5rem; }
  }
}
@keyframes ih-menu-band { to { opacity: 1; } }

/* ===== Offer search (client, 2026-10-15): the round magnifier in the header (lib.applyNav) and its panel
   (lib.finalize, js/search.js; index tools/search-index.mjs). Same round look as the menu button: navy on the white
   pages, white on the home page's photo header. On phones the panel is a full screen. ===== */
.ih-search-btn {
  display: flex; flex: none; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%;
  background-color: var(--ih-ink); color: var(--color--white); text-decoration: none; transition: transform .2s ease;
}
.navbar .ih-search-btn { background-color: var(--color--white); color: var(--ih-ink); }
.ih-search-btn:hover { transform: scale(1.06); }
.ih-search-btn:focus-visible { outline: 2px solid var(--ih-turq); outline-offset: 3px; }
.ih-search-round { display: contents; }
html.ih-search-open { overflow: hidden; }
.ih-search { position: fixed; inset: 0; z-index: 100000; }
.ih-search[hidden] { display: none; }
.ih-search-backdrop { position: absolute; inset: 0; background-color: rgba(15, 39, 69, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ih-search-box {
  position: relative; display: flex; flex-direction: column; width: min(720px, calc(100% - 32px)); max-height: 84vh; max-height: 84dvh;
  margin: 8vh auto 0; overflow: hidden; border-radius: 24px; background-color: var(--color--white); color: var(--ih-ink);
  box-shadow: 0 30px 80px rgba(15, 39, 69, .35);
}
.ih-search-bar { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 20px; border-bottom: 1px dashed var(--color--gray-1-op30); }
.ih-search-icon { display: flex; color: var(--ih-turq-deep); }
.ih-search-input {
  flex: 1; min-width: 0; padding: 10px 0; border: 0; outline: 0; background: transparent; color: var(--ih-ink);
  font: inherit; font-size: 18px; -webkit-appearance: none; appearance: none;
}
.ih-search-input::placeholder { color: var(--color--gray-1-op70); }
.ih-search-input::-webkit-search-cancel-button { display: none; }
.ih-search-close {
  display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background-color: var(--color--gray-4); color: var(--ih-ink); cursor: pointer;
}
.ih-search-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px 6px; }
.ih-search-filter-btn {
  display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 2px solid var(--ih-ink);
  border-radius: 999px; background-color: var(--color--white); color: var(--ih-ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.ih-search-filter-btn.is-on { background-color: var(--ih-ink); color: var(--color--white); }
.ih-search-filter-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background-color: var(--ih-gold); color: var(--ih-ink); font-size: 12px; font-weight: 800;
}
.ih-search-filter-count[hidden] { display: none; }
.ih-search-chev { transition: transform .2s ease; }
.ih-search-filter-btn[aria-expanded="true"] .ih-search-chev { transform: rotate(180deg); }
.ih-search-status { margin: 0; color: var(--color--gray-1-op70); font-size: 13px; font-weight: 600; text-align: right; }
.ih-search-filters { flex: none; max-height: 52vh; max-height: 52dvh; margin: 4px 12px 8px; padding: 14px; overflow-y: auto; overscroll-behavior: contain; border-radius: 18px; background-color: var(--color--gray-4); }
.ih-search-filters[hidden] { display: none; }
.ih-search-group + .ih-search-group { margin-top: 14px; }
.ih-search-legend { margin: 0 0 8px; color: var(--ih-ink); font-size: 13px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.ih-search-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.ih-search-opt {
  min-height: 44px; padding: 8px 10px; border: 2px solid var(--color--gray-1-op30); border-radius: 12px; background-color: var(--color--white);
  color: var(--ih-ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.ih-search-opt[aria-pressed="true"] { border-color: var(--ih-ink); background-color: var(--ih-ink); color: var(--color--white); }
.ih-search-check { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 12px; color: var(--ih-ink); font-size: 15px; font-weight: 600; cursor: pointer; }
.ih-search-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--ih-ink); }
.ih-search-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; margin-top: 14px; }
.ih-search-clear, .ih-search-apply { min-height: 48px; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.ih-search-clear { border: 2px solid var(--ih-ink); background-color: var(--color--white); color: var(--ih-ink); }
.ih-search-apply { border: 2px solid var(--ih-ink); background-color: var(--ih-ink); color: var(--color--white); }
.ih-search-results { flex: 1 1 auto; margin: 0; padding: 2px 10px 10px; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.ih-search-item { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 16px; color: var(--ih-ink); text-decoration: none; }
[aria-selected="true"] > .ih-search-item { background-color: var(--ih-turq-tint); }
.ih-search-thumb { flex: none; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.ih-search-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.ih-search-name { font-size: 16px; font-weight: 700; line-height: 1.3; }
.ih-search-name mark { padding: 0 1px; border-radius: 3px; background-color: var(--ih-gold-tint); color: inherit; }
.ih-search-tag {
  display: inline-block; padding: 2px 7px; border-radius: 999px; background-color: var(--ih-gold); color: var(--ih-ink);
  font-size: 10px; font-weight: 800; letter-spacing: .03em; vertical-align: 2px; white-space: nowrap;
}
.ih-search-tag.is-lm { background-color: var(--ih-promo); color: var(--color--white); }
.ih-search-meta { overflow: hidden; color: var(--color--gray-1-op70); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ih-search-price { display: flex; flex: none; flex-direction: column; align-items: flex-end; color: var(--color--gray-1-op70); font-size: 12px; line-height: 1.25; text-align: right; }
.ih-search-price strong { color: var(--ih-ink); font-size: 17px; white-space: nowrap; }
.ih-search-old { white-space: nowrap; }
.ih-search-none { padding: 16px 10px; color: var(--ih-ink); }
.ih-search-none a { color: var(--ih-navy); font-weight: 600; }
.ih-search-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 20px 16px; border-top: 1px dashed var(--color--gray-1-op30); }
.ih-search-fbtn {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 6px 10px; border: 2px solid var(--ih-ink);
  border-radius: 999px; background-color: var(--color--white); color: var(--ih-ink); font-size: 15px; font-weight: 700; text-align: center; text-decoration: none;
}
.ih-search-fbtn.is-main { background-color: var(--ih-ink); color: var(--color--white); }
/* hover only where there is a real pointer (on phones a tapped button kept its hover colour) */
@media (hover: hover) {
  .ih-search-close:hover, .ih-search-item:hover { background-color: var(--ih-turq-tint); }
  .ih-search-filter-btn:not(.is-on):hover, .ih-search-opt:not([aria-pressed="true"]):hover, .ih-search-clear:hover, .ih-search-fbtn:not(.is-main):hover { background-color: var(--ih-turq-tint); }
  .ih-search-apply:hover, .ih-search-fbtn.is-main:hover { background-color: var(--ih-navy); border-color: var(--ih-navy); }
}
@media screen and (max-width: 991px) {
  .ih-search-btn { width: 44px; height: 44px; }
}
@media screen and (max-width: 767px) {
  .ih-search-box { width: 100%; height: 100vh; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .ih-search-bar { padding: max(10px, env(safe-area-inset-top)) 10px 10px 16px; }
  .ih-search-input { font-size: 16px; }
  .ih-search-tools { padding: 12px 16px 6px; }
  .ih-search-filters { margin: 4px 10px 8px; }
  .ih-search-options { grid-template-columns: repeat(2, 1fr); }
  .ih-search-results { padding: 2px 6px 10px; }
  .ih-search-item { gap: 12px; padding: 10px 10px; }
  .ih-search-thumb { width: 48px; height: 48px; }
  .ih-search-name { font-size: 15px; }
  .ih-search-price strong { font-size: 15px; }
  .ih-search-foot { grid-template-columns: 1.35fr 1fr 1fr; gap: 6px; padding: 10px 12px max(12px, env(safe-area-inset-bottom)); }
  .ih-search-fbtn { padding: 6px 6px; font-size: 14px; }
}
/* phones and tablets: equal side columns keep the logo in the middle of the screen (the search button made one side
   wider); on phones (≤ 479) the search and contacts buttons sit left of the logo and the menu right of it */
@media screen and (max-width: 991px) {
  .grid-nav { grid-template-columns: 1fr auto 1fr; }
  .grid-nav > .navbar-left { justify-self: start; }
  .grid-nav > .navbar-right { justify-self: end; }
}
@media screen and (max-width: 479px) {
  .grid-nav { column-gap: 10px; grid-column-gap: 10px; }
  .navbar-right { column-gap: 8px; grid-column-gap: 8px; }
  .grid-nav > .navbar-right { justify-self: start; }
  .grid-nav > .navbar-left { justify-self: end; }
}