/* ---------------------------------------------------------------------------
 * Shared brand palette tokens.
 *
 * Single source of truth for the public site's color system, consumed via
 * var() from each page's own inline <style>. CSS custom properties resolve
 * from the full cascade regardless of load order, so it doesn't matter that
 * this file loads after each page's inline styles - only that it's present.
 * ------------------------------------------------------------------------- */
:root{
  --brand-navy:#0A2A46;
  --brand-navy-secondary:#0E3F57;
  --brand-aqua:#12AAA5;
  --brand-aqua-dark:#0C6F6C;
  --brand-aqua-light:#E9F7F6;
  --brand-gold:#C89B4A;
  --brand-gold-light:#E8D4B0;
  --bg-page:#FBF9F4;
  --bg-surface:#FFFFFF;
  --border-warm:#E7DCC6;
  --border-aqua:#D4EDEC;
  --text-primary:#101E2E;
  --text-secondary:#5B6B7A;
  --whatsapp:#25D366;
}

/* ---------------------------------------------------------------------------
 * Shared typography layer.
 *
 * Loaded last in <head> on every public page, so it wins over each page's
 * inline <style> on equal specificity.
 *
 * The site used to declare font-family: "Noto Sans Hebrew","Assistant" without
 * ever loading either file, so every page except deal.php actually rendered in
 * Arial. The font stack below leads with "Segoe UI" (Windows' own system
 * font, matches the reference screenshots) and falls back to the self-hosted
 * Heebo for visitors on platforms where Segoe UI does not exist - see the
 * --font-ui definition further down for the full reasoning.
 * ------------------------------------------------------------------------- */

/* --- Heebo, self-hosted -----------------------------------------------------
 * SIL Open Font License 1.1, from Google Fonts. Served from our own /assets so
 * there is no third-party request and no dependency on a CDN being reachable.
 * Both files are the VARIABLE cut - one file covers weights 100-900, which is
 * why the whole family costs 42 KB instead of one file per weight. Used as
 * the fallback for non-Windows visitors - see --font-ui below. */
@font-face{
  font-family:'Heebo';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/heebo-hebrew.woff2') format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face{
  font-family:'Heebo';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/heebo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* 'Segoe UI' first, not last: it is a licensed Windows system font, so this
     only NAMES it for the browser to use if the visitor's OS already has it -
     nothing is embedded or distributed, so this stays legally web-safe. The
     reference screenshots were compared on Windows, and deal.php's own
     pre-existing font-family (from before any of this round's changes)
     already put "Segoe UI" first for the same reason. Two rounds of tuning
     Heebo's weight/tracking never matched because the reference letterforms
     were never a Google-Fonts geometric sans to begin with. Heebo (self-
     hosted, see @font-face above) is the fallback for visitors on phones/
     Mac/Linux, where "Segoe UI" simply does not exist and the browser moves
     on to the next name in the list. */
  --font-ui:'Segoe UI','Heebo','Assistant','Noto Sans Hebrew',Arial,sans-serif;
  /* A real hierarchy, not one weight everywhere - hero > section > minor
     heading > card title > hotel name / body text. */
  --fw-hero:900;      /* major hero headings */
  --fw-section:800;   /* major section headings */
  --fw-subhead:700;   /* smaller section headings, deal title, buttons */
  --fw-name:600;       /* hotel name - quieter than the deal title above it */
  --fw-body:500;       /* normal informational text */
  --track-tight:-.022em;
  --track-open:.04em;
}

html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }

/* Applied to the elements that carry their own font-family, plus form controls
   which do not inherit it by default. */
body,
button, input, select, textarea,
h1, h2, h3, h4, h5, h6{
  font-family:var(--font-ui);
}

/* --- Headings --------------------------------------------------------------
 * Sizes are NOT touched - the cards have fixed heights. Weight, tracking and
 * line-height are what make Heebo read like the reference headline.
 * h1 = major hero heading (900). h2 = major section heading (800), one notch
 * lighter so the hero stays the loudest thing on the page. h3 = smaller
 * section heading (700). */
h1, .hero h1{
  font-weight:var(--fw-hero);
  letter-spacing:-.028em;
  line-height:1.03;
  text-wrap:balance;
}
h2, .hero-panel b, .journey-switch h3, .panel-head b, .section-head h2{
  font-weight:var(--fw-section);
  letter-spacing:var(--track-tight);
  line-height:1.08;
  text-wrap:balance;
}
h3{
  font-weight:var(--fw-subhead);
  letter-spacing:-.016em;
  line-height:1.14;
  text-wrap:balance;
}

/* --- Lead / intro prose --------------------------------------------------
 * Free-flowing sections only, never inside a fixed-height card. */
.hero p,
.section-intro, .section-intro p,
.lead, .lead p{
  font-weight:var(--fw-body);
  line-height:1.66;
  letter-spacing:0;
}

.eyebrow, .kicker, .section-kicker{
  font-weight:var(--fw-subhead);
  letter-spacing:var(--track-open);
}

/* --- Interactive elements ------------------------------------------------
 * The reference's pill buttons sit a notch lighter than its headings; at 900
 * Heebo the labels close up and look cramped in a pill. Several page-level
 * rules already set these with !important at specific breakpoints, so this
 * needs !important too to win unconditionally. */
button, .btn, .compact-action, .cta, a.btn, .tabs a, .pill{
  font-weight:var(--fw-subhead)!important;
  letter-spacing:-.004em;
}

/* --- Numerals ------------------------------------------------------------
 * Prices line up in columns across cards; tabular figures stop the digits
 * jittering from card to card. Price stays the heaviest weight on the card -
 * second only to the destination label on the photo. */
.price, .compact-deal-price, .price-block, .deal-price,
.compact-deal-meta em, .deal-mini, time, .price-table b{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.price, .compact-deal-price, .deal-price{
  font-weight:var(--fw-hero)!important;
  letter-spacing:-.012em;
}

/* --- Deal-card information hierarchy ---------------------------------------
 * The card's ORIGINAL geometry is untouched: same card/image/body pixel
 * heights, same 4 visual blocks (title box, meta-chip grid, extra-info hook,
 * price+actions), same gaps. Hotel name and destination are fit INTO those
 * two existing blocks instead of adding new rows - that is what keeps the
 * cards symmetrical and the height identical to the previously-approved
 * version.
 *
 * Block 1 (title box): deal title, with the hotel name folded in as a
 * quieter second line inside the SAME box via :has() below - this recreates
 * a title/subtitle pair without growing the box's min-height.
 * Block 2 (meta-chip grid): date+days chip, board chip, destination chip.
 * The grid already had capacity for up to 4 chips in a 2-column layout, so
 * 3 chips (date, board, יעד) sits inside the grid's ORIGINAL min-height with
 * no change - "יעד" simply replaces "אזור" as one of the existing chips,
 * it is not a new element. */
.compact-deal-title{
  font-weight:var(--fw-subhead)!important;
  letter-spacing:-.012em;
}
/* The wrapper is pinned to the EXACT min/max-height the title box occupied
   on its own before this change (49px desktop, 44px at <=900px, from the
   page's own <style>) - so whether or not a hotel-name line is present, the
   title block as a whole never grows past what it already used to be. */
.compact-title-block{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:1px!important;
  min-height:49px!important;
  max-height:49px!important;
  overflow:hidden!important;
}
@media(max-width:900px){
  .compact-title-block{ min-height:44px!important; max-height:44px!important; }
}
/* Two lines (the card's original behaviour, using the title's own existing
   min/max-height) when there's no hotel-name line under the title; one line,
   with the title's own height freed so the wrapper above controls the total,
   when there is. */
.compact-title-block:has(.compact-hotel-name) .compact-deal-title{
  -webkit-line-clamp:1!important;
  min-height:0!important;
  max-height:none!important;
}
.compact-hotel-name{
  margin:0;
  font-size:12.5px;
  font-weight:var(--fw-name);
  color:#5c6b7a;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Price, centered under its own row rather than pinned to the start edge -
   this alone does not change the row's height. */
.compact-deal-price{
  justify-self:center!important;
  margin-inline:auto!important;
}

@media (max-width:900px){
  .compact-hotel-name{ font-size:11.5px; }
}

/* --- Destination label on the card image ---------------------------------
 * The reference (Albania screenshot) shows this as the loudest thing on the
 * photo, not a caption - large, black-weight, white, with a strong shadow for
 * legibility over any photo. Every declaration needs !important because the
 * card's own breakpoint block already sets this rule with !important, which
 * specificity cannot beat.
 *
 * inline-flex (not inline) so a long name wraps as a block beside the flag
 * instead of pushing the flag onto its own line. The label is anchored to the
 * bottom of the photo and the photo is 192px/166px tall, so even a four-line
 * name stays clear of the promo banner at the top - measured, not assumed.
 *
 * Desktop only grows here; mobile already read correctly against the
 * reference and is intentionally left as-is per instruction.
 *
 * This carousel's own card is 318-350px wide (the "V94" block further down
 * in this same <style>). 42px was the largest size that still technically
 * fit without clipping, but sized for maximum presence rather than visual
 * balance - it read as oversized and dominated the photo. 31px is the
 * corrected size: still clearly bold and prominent, but proportionate to the
 * card rather than filling it. Two-line wrapping for long names is still
 * fine at this size and stays well clear of the promo banner. */
.compact-image-destination{
  display:inline-flex!important;
  align-items:flex-start!important;
  gap:8px!important;
  font-size:23px!important;
  font-weight:900!important;
  line-height:1.08!important;
  letter-spacing:-.02em!important;
  color:#fff!important;
  white-space:normal!important;
  overflow:hidden!important;
  padding:6px 11px!important;
  max-width:calc(100% - 24px)!important;
  text-shadow:0 3px 14px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.6)!important;
}
/* The label is bottom-anchored (position:absolute + bottom, set by the page's
   own CSS), so a name long enough to wrap keeps growing UPWARD - at 38px an
   unrealistically long string can climb past the photo's top edge into the
   promo banner. Two lines covers every real destination in the data
   ("אוסטריה וחבל טירול" etc. are one line); this is a hard safety cap for the
   pathological case, not the normal behaviour. */
.compact-image-destination .dest-flag-label-text{
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}

/* --- Country flag chip ---------------------------------------------------
 * Self-hosted SVG. Sized off the label so it stays optically matched to the
 * text at every breakpoint. !important is required for the same reason as
 * above, plus the card's cover-image rule
 * `.deal.compact-deal-card .deal-img img{width:100%!important;height:100%!important}`
 * also matches this <img> and would otherwise stretch it across the label. */
.compact-image-destination img.dest-flag,
.deal-img .compact-image-destination img.dest-flag{
  height:20px!important;
  width:30px!important;
  max-width:30px!important;
  min-width:30px!important;
  min-height:0!important;
  margin:0!important;
  display:block!important;
  border-radius:4px;
  object-fit:fill!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.75), 0 2px 6px rgba(0,0,0,.4);
  flex:none;
}

/* --- Multi-country flag group ---------------------------------------------
 * Organized tours can cover several countries at once (see
 * shiran_deal_destination_countries() in app/public_helpers.php); the badge
 * still has to fit the same card width, so when 2+ flags are shown the
 * destination text shrinks a step and the flags shrink and sit closer
 * together instead of at single-flag size. Higher specificity than the base
 * .dest-flag rule above so it wins regardless of source order. */
.dest-flag-group{
  display:inline-flex!important;
  align-items:center!important;
  gap:3px!important;
  flex:none!important;
}
.compact-image-destination.has-multi-flag{
  gap:6px!important;
}
.compact-image-destination.has-multi-flag .dest-flag-label-text{
  font-size:18px!important;
}
.compact-image-destination.has-multi-flag img.dest-flag,
.deal-img .compact-image-destination.has-multi-flag img.dest-flag{
  height:16px!important;
  width:24px!important;
  max-width:24px!important;
  min-width:24px!important;
}

@media (max-width:900px){
  .compact-image-destination{
    font-size:16px!important;
    gap:6px!important;
    padding:5px 11px!important;
    max-width:calc(100% - 20px)!important;
  }
  .compact-image-destination img.dest-flag,
  .deal-img .compact-image-destination img.dest-flag{
    height:15px!important; width:22px!important; max-width:22px!important; min-width:22px!important;
  }
  .compact-image-destination.has-multi-flag .dest-flag-label-text{
    font-size:13px!important;
  }
  .compact-image-destination.has-multi-flag img.dest-flag,
  .deal-img .compact-image-destination.has-multi-flag img.dest-flag{
    height:12px!important; width:18px!important; max-width:18px!important; min-width:18px!important;
  }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------------------------------------------------------------------------
 * Brand flow background system.
 *
 * One shared "navy + soft flowing white/pale-blue streak" texture, reused
 * (not reinvented per section) across the homepage Hero, deal-page Hero,
 * the gallery stage, and a soft variant behind "פרטי הדיל" - one
 * recognizable identity at three intensities rather than four different
 * background treatments. Loaded after each page's inline <style>, so these
 * classes win on equal specificity without needing !important.
 *
 * Pure CSS: one inline SVG per tier (four blurred, gently curved strokes -
 * never straight beams/lightning/glow blobs) layered over a gradient/solid
 * base. No images, video, canvas or JS - background-size:cover lets the
 * same asset adapt to any container's aspect ratio, and because the
 * strokes are soft/blurred, minor stretching is imperceptible.
 * ------------------------------------------------------------------------- */
.brand-flow-bg{background-repeat:no-repeat;background-position:center;background-size:cover}
.brand-flow-bg--strong{background-color:var(--brand-navy);background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20620'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Cdefs%3E%3Cfilter%20id='f'%20x='-20%25'%20y='-20%25'%20width='140%25'%20height='140%25'%3E%3CfeGaussianBlur%20stdDeviation='6.5'/%3E%3C/filter%3E%3C/defs%3E%3Cg%20fill='none'%20stroke='%23d7e6ff'%20stroke-linecap='round'%20filter='url%28%23f%29'%3E%3Cpath%20d='M-60,150%20C240,60%20460,240%20760,140%20C960,70%201120,170%201320,110'%20stroke-width='3.6'%20opacity='0.68'/%3E%3Cpath%20d='M-90,320%20C210,250%20470,410%20790,310%20C990,250%201140,330%201320,280'%20stroke-width='3.0'%20opacity='0.5'/%3E%3Cpath%20d='M-70,470%20C270,400%20510,550%20830,460%20C1010,410%201150,470%201320,440'%20stroke-width='2.4'%20opacity='0.38'/%3E%3Cpath%20d='M-50,40%20C190,0%20410,110%20670,40%20C870,-10%201010,60%201240,30'%20stroke-width='2.0'%20opacity='0.3'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(160deg,var(--brand-navy) 0%,#0B3252 55%,var(--brand-navy-secondary) 100%)}
.brand-flow-bg--medium{background-color:#04364e;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20620'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Cdefs%3E%3Cfilter%20id='f'%20x='-20%25'%20y='-20%25'%20width='140%25'%20height='140%25'%3E%3CfeGaussianBlur%20stdDeviation='7'/%3E%3C/filter%3E%3C/defs%3E%3Cg%20fill='none'%20stroke='%23cfe0ff'%20stroke-linecap='round'%20filter='url%28%23f%29'%3E%3Cpath%20d='M-60,150%20C240,60%20460,240%20760,140%20C960,70%201120,170%201320,110'%20stroke-width='3.2'%20opacity='0.34'/%3E%3Cpath%20d='M-90,320%20C210,250%20470,410%20790,310%20C990,250%201140,330%201320,280'%20stroke-width='2.6'%20opacity='0.24'/%3E%3Cpath%20d='M-70,470%20C270,400%20510,550%20830,460%20C1010,410%201150,470%201320,440'%20stroke-width='2.0'%20opacity='0.18'/%3E%3Cpath%20d='M-50,40%20C190,0%20410,110%20670,40%20C870,-10%201010,60%201240,30'%20stroke-width='1.6'%20opacity='0.14'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(135deg,#021827,#04364e 48%,#087086)}
.brand-flow-bg--soft{background-color:var(--bg-page);background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20620'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Cdefs%3E%3Cfilter%20id='f'%20x='-20%25'%20y='-20%25'%20width='140%25'%20height='140%25'%3E%3CfeGaussianBlur%20stdDeviation='7'/%3E%3C/filter%3E%3C/defs%3E%3Cg%20fill='none'%20stroke='%230a2a46'%20stroke-linecap='round'%20filter='url%28%23f%29'%3E%3Cpath%20d='M-60,150%20C240,60%20460,240%20760,140%20C960,70%201120,170%201320,110'%20stroke-width='3.2'%20opacity='0.16'/%3E%3Cpath%20d='M-90,320%20C210,250%20470,410%20790,310%20C990,250%201140,330%201320,280'%20stroke-width='2.6'%20opacity='0.11'/%3E%3Cpath%20d='M-70,470%20C270,400%20510,550%20830,460%20C1010,410%201150,470%201320,440'%20stroke-width='2.0'%20opacity='0.09'/%3E%3Cpath%20d='M-50,40%20C190,0%20410,110%20670,40%20C870,-10%201010,60%201240,30'%20stroke-width='1.6'%20opacity='0.07'/%3E%3C/g%3E%3C/svg%3E")}
@media(max-width:900px){
  /* Mobile: same identity, visibly calmer. The base gradient is untouched
     (so text-contrast math doesn't change) - only the strongest tier's
     streak layer is swapped for the already-fainter --medium asset (reused,
     not a new one), giving fewer/softer visible streaks exactly where a
     small screen has the least room to spare behind centered Hero text. */
  .brand-flow-bg--strong{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20620'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Cdefs%3E%3Cfilter%20id='f'%20x='-20%25'%20y='-20%25'%20width='140%25'%20height='140%25'%3E%3CfeGaussianBlur%20stdDeviation='7'/%3E%3C/filter%3E%3C/defs%3E%3Cg%20fill='none'%20stroke='%23cfe0ff'%20stroke-linecap='round'%20filter='url%28%23f%29'%3E%3Cpath%20d='M-60,150%20C240,60%20460,240%20760,140%20C960,70%201120,170%201320,110'%20stroke-width='3.2'%20opacity='0.34'/%3E%3Cpath%20d='M-90,320%20C210,250%20470,410%20790,310%20C990,250%201140,330%201320,280'%20stroke-width='2.6'%20opacity='0.24'/%3E%3Cpath%20d='M-70,470%20C270,400%20510,550%20830,460%20C1010,410%201150,470%201320,440'%20stroke-width='2.0'%20opacity='0.18'/%3E%3Cpath%20d='M-50,40%20C190,0%20410,110%20670,40%20C870,-10%201010,60%201240,30'%20stroke-width='1.6'%20opacity='0.14'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(135deg,var(--brand-navy),var(--brand-navy-secondary))}
  .brand-flow-bg--strong,.brand-flow-bg--medium{background-position:center 35%}
}


/* =====================================================================================================================================
   FACELIFT (2026-10) - four small visual changes on top of the existing design. Presentation only: no markup, script or data is touched.
   Loaded last on every public page. Where the pages' own inline CSS already uses !important for the SAME property, this block must use it too
   (marked "!" below); everything else wins on specificity (html body ...).
   Sections: A sticky header . B hero . C deal cards . (D footer lives in app/accessibility.php next to its markup)
   ===================================================================================================================================== */

/* ---------- A. STICKY HEADER ----------
   The header was already position:sticky, but index.php (home + catalog) sets overflow-x:hidden on BOTH html and body, which turns the body into a
   scroll container and silently disables sticky. overflow-x:clip clips the same way without creating one. (Browsers without clip keep today's behaviour.)
   Compact sizing keeps a permanently visible header light: ~84px desktop (was 119); phone: only the navigation row stays pinned (logo scrolls away) - no JS. */
@supports (overflow:clip){html,body{overflow-x:clip}}
html{scroll-padding-top:92px}
@media(min-width:761px){
  html body .topbar-inner{padding:10px 5%!important}
  html body .topbar .nav a{min-height:42px!important;font-size:18px!important}
}
@media(min-width:1440px){html body .brand-logo,html body .topbar .brand-logo{width:189px;height:63px}}
@media(max-width:760px){
  html{scroll-padding-top:70px}
  html body .topbar{top:-58px}
  html body .topbar-inner,html body .topbar .topbar-inner{padding:8px 4% 4px!important;gap:6px!important}
  html body .brand-logo,html body .topbar .brand-logo{width:187px;height:44px}
}

/* ---------- B. HERO ----------
   Desktop: the picture used to stop at ~74% of the width (background-size:auto 100%) with a solid navy panel for the text. Now it spans the whole width
   (cover, anchored slightly above centre so skies / skylines stay intact) and a controlled navy ramp on the text side keeps the copy readable.
   Phone: the 110px strip becomes a real picture band. */
@media(min-width:761px){
  html body .hero{min-height:clamp(560px,43vw,720px);display:grid;align-items:center}
  html body .hero-slide{background-size:cover;background-position:center 38%}
  html body .hero:before{background:linear-gradient(270deg,rgba(7,31,54,.88) 0%,rgba(7,31,54,.8) 28%,rgba(7,31,54,.52) 52%,rgba(7,31,54,.14) 78%,rgba(7,31,54,0) 100%)}
  html body .hero-slideshow:after{background:linear-gradient(180deg,rgba(7,31,54,.18) 0%,rgba(7,31,54,0) 30%,rgba(7,31,54,0) 70%,rgba(7,31,54,.34) 100%)}
}
@media(max-width:760px){
  html body .hero-slideshow{height:clamp(200px,60vw,260px)}
}

/* ---------- C. DEAL CARDS ----------
   Same markup, same two explicit actions, same behaviour (full-card click, video / sound, ribbons, hooks, data-attributes) - only the presentation moves toward the
   cleaner card of the redesign. Sizes come from variables. Legacy note: the inline CSS of index.php / destination.php pins most card properties with !important (nine
   successive layers), so the declarations below that touch those same properties carry !important too; every other declaration wins on specificity alone. */
html body .deal.compact-deal-card{--fl-img:196px;--fl-line:#efe8da}
html body .deal.compact-deal-card,html body .deal.compact-deal-card.organized-tour-card{
  height:auto!important;min-height:0!important;max-height:none!important;grid-template-rows:var(--fl-img) minmax(0,1fr)!important;
  border:1px solid #ece5d6;border-radius:22px;background:#fff;
  box-shadow:0 1px 2px rgba(11,26,51,.06),0 16px 32px -18px rgba(11,26,51,.34);
  transition:transform .16s cubic-bezier(.23,1,.32,1),box-shadow .16s cubic-bezier(.23,1,.32,1)}
html body .deal.compact-deal-card:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(11,26,51,.06),0 22px 40px -18px rgba(11,26,51,.42)}
html body .deal.compact-deal-card:active{transform:scale(.99)}
html body .deal.compact-deal-card .deal-img,html body .deal.compact-deal-card.organized-tour-card .deal-img{height:var(--fl-img)!important;min-height:var(--fl-img)!important;max-height:var(--fl-img)!important}
html body .deal.compact-deal-card .deal-body,html body .deal-grid .deal.compact-deal-card .deal-body{padding:16px!important;gap:10px!important}
html body .compact-deal-title{font-size:17px;line-height:1.28;font-weight:800;min-height:44px}
html body .compact-hotel-name{font-size:13px;font-weight:600;color:#6b7a8c}
/* destination tag over the picture: a quiet white chip instead of a heavy translucent block */
html body .compact-image-destination{right:12px!important;bottom:12px!important;padding:6px 12px!important;border:0!important;background:rgba(255,255,255,.95)!important;color:var(--brand-navy)!important;font-size:13px!important;font-weight:800!important;text-shadow:none!important;box-shadow:0 6px 16px rgba(7,31,54,.22)!important}
html body .compact-image-destination img.dest-flag,html body .deal-img .compact-image-destination img.dest-flag{height:16px!important;width:24px!important;min-width:24px!important;max-width:24px!important}
html body .compact-image-destination .dest-flag-label-text{font-size:inherit!important}
/* an empty hook line no longer reserves a blank band */
html body .premium-card-hook.is-empty{display:none!important}
/* facts: one calm row - date | nights | board - separated by hairlines instead of three boxes */
html body .compact-deal-meta.premium-card-facts,html body .compact-deal-meta{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;min-height:0!important;padding:10px 0!important;border-top:1px solid var(--fl-line);border-bottom:1px solid var(--fl-line)}
html body .compact-deal-meta span{display:grid!important;justify-items:center;align-content:start;gap:2px!important;width:auto!important;flex:none!important;padding:0 6px!important;border:0!important;border-radius:0!important;background:none!important;text-align:center}
html body .compact-deal-meta span+span{border-inline-start:1px solid var(--fl-line)!important}
html body .compact-deal-meta b{font-size:11px!important;font-weight:600!important;color:#7b8794!important}
html body .compact-deal-meta em{font-size:13.5px!important;font-weight:800!important;color:var(--text-primary)!important}
html body .compact-deal-meta span.date-fact em.days-centered{font-size:11px!important;font-weight:600!important;color:#7b8794!important}
html body .compact-deal-meta span.date-fact em.days-centered.more-dates{color:#0b6b73!important;font-weight:800!important}
html body .compact-deal-meta span.nights-fact em{color:var(--text-primary)!important}
/* price: large and plain (the dark pill is gone) */
html body .premium-card-bottom{gap:12px!important;min-height:0!important}
html body .compact-deal-price{justify-self:start!important;align-self:auto!important;margin-inline:0!important;min-height:0!important;padding:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:var(--brand-navy)!important;font-size:23px!important;font-weight:900!important}
/* the two explicit actions stay: equal, calm, pressable */
html body .compact-deal-actions{gap:10px!important}
html body .compact-action{min-height:46px!important;border-radius:13px!important;font-size:14.5px!important;font-weight:800!important;transition:transform .14s cubic-bezier(.23,1,.32,1),box-shadow .14s cubic-bezier(.23,1,.32,1)}
html body .compact-action:active{transform:scale(.97)}
html body .compact-action.details{background:#fff!important;color:var(--brand-navy)!important;border:1.5px solid #cfdde0!important}
html body .compact-action.whatsapp{box-shadow:0 8px 18px -10px rgba(18,160,84,.75)}
@media(max-width:760px){
  html body .deal.compact-deal-card{--fl-img:122px}
  html body .deal.compact-deal-card,html body .deal.compact-deal-card.organized-tour-card,html body .deal-grid .deal.compact-deal-card,html body .deal-grid .deal.compact-deal-card.organized-tour-card{height:auto!important;min-height:0!important;max-height:none!important;grid-template-rows:var(--fl-img) minmax(0,1fr)!important;border-radius:18px!important}
  html body .deal.compact-deal-card .deal-img,html body .deal.compact-deal-card.organized-tour-card .deal-img,html body .deal-grid .deal.compact-deal-card .deal-img{height:var(--fl-img)!important;min-height:var(--fl-img)!important;max-height:var(--fl-img)!important}
  html body .deal.compact-deal-card .deal-body,html body .deal-grid .deal.compact-deal-card .deal-body{padding:11px 11px 12px!important;gap:8px!important}
  html body .compact-deal-title{font-size:14px;line-height:1.25;min-height:35px}
  html body .compact-hotel-name{font-size:11.5px}
  html body .compact-image-destination{right:8px!important;bottom:8px!important;padding:4px 9px!important;font-size:11.5px!important}
  html body .compact-deal-meta.premium-card-facts,html body .compact-deal-meta{padding:7px 0!important}
  html body .compact-deal-meta span{padding:0 3px!important}
  html body .compact-deal-meta b{font-size:9.5px!important}
  html body .compact-deal-meta em{font-size:11.5px!important}
  html body .compact-deal-meta span.date-fact em.days-centered,html body .compact-deal-meta span.date-fact em.days-centered.more-dates{font-size:9.5px!important}
  html body .compact-deal-price{font-size:18px!important}
  html body .compact-action{min-height:42px!important;font-size:13px!important;border-radius:12px!important}
}
@media(prefers-reduced-motion:reduce){html body .deal.compact-deal-card,html body .compact-action{transition:none}html body .deal.compact-deal-card:hover{transform:none}}

/* =====================================================================================================================================
   FACELIFT PART 2 - hero loading + compact deal cards (desktop, tablet, mobile) + the strip of controls above them.
   Presentation only: no markup, script or data is touched (the one hero change is the slideshow's picture loading, see index.php).
   Legacy note as in section C: where the page's inline CSS pins a property with !important (nine successive card layers), the matching declaration below
   carries !important too; everything else wins on specificity (html body ...).
   ===================================================================================================================================== */

/* ---------- E. HERO: a slide's picture is requested only when it is the active or the next slide (see the slideshow controller in index.php) ---------- */
html body .hero-slide:not(.is-active):not(.is-loaded){background-image:none}

/* ---------- H. COMPACT DEAL CARD (all widths) ----------
   White surface, 3:2 picture, destination pill top-left, benefits pill bottom-right, inline icon facts, thin separator, price + the two explicit actions in one row
   (they wrap under each other only when the card is too narrow). Heights are natural: nothing is pinned, so there is no dead space. */
html body .deal.compact-deal-card{--c-line:#e9eef1;--c-ink:var(--brand-navy);--c-mute:#6b7a8c;--c-accent:#0f8f95;container-type:inline-size}
html body .deal.compact-deal-card,html body .deal.compact-deal-card.organized-tour-card,html body .deal-grid .deal.compact-deal-card,html body .deal-grid .deal.compact-deal-card.organized-tour-card,html body .catalog-section .deal-grid.catalog-grid .deal.compact-deal-card{
  display:flex!important;flex-direction:column!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
  border:1px solid var(--c-line)!important;border-radius:20px!important;background:#fff!important;overflow:hidden!important;
  box-shadow:0 1px 2px rgba(7,31,54,.05),0 14px 28px -18px rgba(7,31,54,.3)!important}
@media(hover:hover) and (pointer:fine){
  html body .deal.compact-deal-card:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(7,31,54,.05),0 20px 34px -18px rgba(7,31,54,.38)!important}
}
@media(hover:none){html body .deal.compact-deal-card:hover{transform:none}}
/* picture */
html body .deal.compact-deal-card .deal-img,html body .deal.compact-deal-card.organized-tour-card .deal-img,html body .deal-grid .deal.compact-deal-card .deal-img{
  flex:none!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:3/2!important}
html body .deal.compact-deal-card .deal-img:after{background:linear-gradient(180deg,rgba(7,31,54,0) 68%,rgba(7,31,54,.2) 100%)!important}
/* destination: white pill, top-left (a pin for Israel; the flag stays for abroad) */
html body .compact-image-destination{top:10px!important;left:10px!important;right:auto!important;bottom:auto!important;max-width:calc(100% - 64px)!important;padding:5px 12px!important;border:0!important;border-radius:999px!important;background:#fff!important;color:var(--c-ink)!important;font-size:13px!important;font-weight:800!important;text-shadow:none!important;box-shadow:0 4px 12px rgba(7,31,54,.18)!important;backdrop-filter:none!important}
html body .compact-image-destination .dest-flag-label-text{font-size:inherit!important}
html body .compact-image-destination:not(:has(.dest-flag))::after{content:"";width:13px;height:13px;margin-inline-start:5px;background:var(--c-accent);-webkit-mask:var(--ic-pin) center/contain no-repeat;mask:var(--ic-pin) center/contain no-repeat}
html body .compact-image-destination img.dest-flag,html body .deal-img .compact-image-destination img.dest-flag{height:14px!important;width:21px!important;min-width:21px!important;max-width:21px!important}
html body .deal.compact-deal-card:has(.ended-ribbon) .compact-image-destination{top:auto!important;bottom:10px!important}
/* benefits: the diagonal turquoise ribbon across the upper-right corner of the picture (same element, same text).
   Geometry (u = 1% of the card width, capped at 3.1px so it never gets big on wide cards): the ribbon's centre line meets the top edge 40u from the corner and the right edge 28u down
   (35deg), i.e. a chord of 48.8u. The band is 9u thick, so for BOTH ends to lie completely outside the picture (and be cut off cleanly by its rounded edge) it must be
   chord + 1.17 * thickness + a small margin = 60.8u long, centred on the middle of the chord = (20u from the right edge, 14u from the top). The text (<= ~38u) sits well inside the chord.
   Its light sweep (::before) and glowing top edge (::after) come from the page's own ribbon rules. */
html body .deal.compact-deal-card .deal-img .cover-promo-banner{--u:min(1cqw,3.1px);display:flex!important;align-items:center!important;justify-content:center!important;position:absolute!important;z-index:7!important;
  top:calc(var(--u) * 9.5)!important;right:calc(var(--u) * -10.4)!important;left:auto!important;bottom:auto!important;
  width:calc(var(--u) * 60.8)!important;height:calc(var(--u) * 9)!important;min-height:0!important;max-width:none!important;box-sizing:border-box!important;padding:0 calc(var(--u) * 8)!important;transform:rotate(35deg)!important;transform-origin:50% 50%!important;
  font-size:calc(var(--u) * 4.2)!important;font-weight:900!important;line-height:1!important;letter-spacing:0!important;color:#fff!important;text-align:center!important;text-shadow:0 1px 6px rgba(0,0,0,.32)!important;
  background:linear-gradient(0deg,rgba(7,60,74,.97) 0%,rgba(12,122,130,.96) 42%,rgba(36,176,180,.95) 74%,rgba(140,236,232,.9) 100%)!important;
  border-top:1px solid rgba(255,255,255,.6)!important;border-bottom:1px solid rgba(255,255,255,.3)!important;border-left:0!important;border-right:0!important;border-radius:0!important;
  box-shadow:0 8px 18px rgba(3,31,43,.3),0 0 14px rgba(40,186,190,.35)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis}
/* video + ribbon: the page moves the sound button to the left, so the destination pill drops to the bottom-left corner; the sound button of an ended deal sits bottom-right */
html body .deal.compact-deal-card:has(.video-sound-toggle-left) .compact-image-destination{top:auto!important;bottom:10px!important}
html body .deal.compact-deal-card:has(.ended-ribbon) .video-sound-toggle,html body .deal.compact-deal-card:has(.ended-ribbon) .video-sound-toggle.video-sound-toggle-left{top:auto!important;bottom:10px!important;left:auto!important;right:10px!important}
/* the benefits text under the picture duplicated the pill: shown only where the pill is replaced by a sold-out sign */
html body .deal.compact-deal-card .premium-card-hook{display:none!important}
html body .deal.compact-deal-card:has(.sold-out-ribbon,.sold-out-badge) .premium-card-hook:not(.is-empty){display:block!important;position:absolute!important;z-index:9;right:10px;left:auto;top:calc(66.667cqw - 40px);width:auto;max-width:calc(100% - 20px);min-height:0!important;max-height:none!important;margin:0!important;padding:5px 12px!important;border:0!important;border-radius:999px!important;background:#fff!important;color:#0c656d!important;font-size:12.5px!important;font-weight:850!important;line-height:1.25!important;text-align:center;box-shadow:0 4px 12px rgba(7,31,54,.18)}
/* body */
html body .deal.compact-deal-card .deal-body,html body .deal-grid .deal.compact-deal-card .deal-body,html body .catalog-section .deal-grid.catalog-grid .deal.compact-deal-card .deal-body{
  display:flex!important;flex-direction:column!important;flex:1 1 auto!important;height:auto!important;min-height:0!important;gap:9px!important;padding:14px 15px 14px!important;overflow:visible!important}
html body .compact-title-block{display:grid!important;align-content:start;justify-items:center;gap:4px!important;height:auto!important;min-height:0!important;max-height:none!important;text-align:center!important}
html body .compact-deal-title,html body .compact-title-block .compact-deal-title,html body .compact-title-block:has(.compact-hotel-name) .compact-deal-title{font-size:18px!important;line-height:1.25!important;font-weight:850!important;min-height:2.5em!important;max-height:none!important;text-align:center!important;color:var(--c-ink)!important;-webkit-line-clamp:2!important}
html body .compact-hotel-name{display:flex!important;align-items:center;justify-content:center;gap:6px;max-width:100%;font-size:13px!important;font-weight:500!important;color:var(--c-mute)!important;text-align:center!important}
html body .compact-hotel-name::before{content:"";flex:none;width:14px;height:14px;background:currentColor;-webkit-mask:var(--ic-building) center/contain no-repeat;mask:var(--ic-building) center/contain no-repeat}
/* facts: inline with icons */
html body .compact-deal-meta.premium-card-facts,html body .compact-deal-meta{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:center!important;gap:6px 16px!important;min-height:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important}
html body .compact-deal-meta span,html body .compact-deal-meta span+span{display:inline-flex!important;flex-direction:row!important;align-items:center!important;gap:5px!important;width:auto!important;flex:none!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;text-align:start!important;color:var(--c-ink)}
html body .compact-deal-meta span::before{content:"";flex:none;width:15px;height:15px;background:var(--c-accent);-webkit-mask:var(--ic-board) center/contain no-repeat;mask:var(--ic-board) center/contain no-repeat}
html body .compact-deal-meta span.date-fact::before{-webkit-mask-image:var(--ic-cal);mask-image:var(--ic-cal)}
html body .compact-deal-meta span.nights-fact::before{-webkit-mask-image:var(--ic-moon);mask-image:var(--ic-moon)}
html body .compact-deal-meta em{order:1;font-size:13.5px!important;font-weight:700!important;color:var(--c-ink)!important}
html body .compact-deal-meta span.date-fact em.days-centered{order:2;font-size:12px!important;font-weight:500!important;color:var(--c-mute)!important}
html body .compact-deal-meta span.date-fact em.days-centered.more-dates{color:#0b6b73!important;font-weight:800!important}
html body .compact-deal-meta b{order:3;font-size:13.5px!important;font-weight:500!important;color:var(--c-ink)!important}
/* labels whose icon already says it stay for screen readers only (date, board); "5 לילות" keeps its word */
html body .compact-deal-meta span.date-fact b,html body .compact-deal-meta span:not(.date-fact):not(.nights-fact) b{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* footer: separator, price, actions */
html body .premium-card-bottom{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;justify-content:flex-start!important;text-align:center;gap:10px!important;margin:auto 0 0!important;padding:12px 0 0!important;min-height:0!important;border-top:1px solid var(--c-line)!important;background:none!important}
html body .compact-deal-price{justify-self:center!important;align-self:center!important;text-align:center!important;margin:0!important;min-height:0!important;padding:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:var(--c-ink)!important;font-size:21px!important;font-weight:900!important;line-height:1.1!important;letter-spacing:-.01em;white-space:nowrap!important;flex:0 0 auto;max-width:100%!important;overflow:hidden;text-overflow:ellipsis}
html body .compact-deal-actions{display:flex!important;justify-content:center!important;flex:0 0 auto!important;gap:6px!important;grid-template-columns:none!important;min-height:0!important;align-self:auto!important;flex-wrap:nowrap}
html body .compact-deal-actions .compact-action{flex:1 1 0!important;min-width:0}
html body .compact-action{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;min-height:38px!important;padding:0 13px!important;border-radius:12px!important;font-size:13.5px!important;font-weight:800!important;line-height:1.1!important;transition:transform .14s cubic-bezier(.23,1,.32,1),background-color .14s ease}
html body .compact-action:active{transform:scale(.97)}
html body .compact-action.whatsapp{background:#e6f6ed!important;color:#0e7a43!important;border:0!important;box-shadow:none!important}
html body .compact-action.whatsapp .wa-symbol{display:inline-flex;width:17px;height:17px;background:none!important;color:inherit!important;box-shadow:none!important}
html body .compact-action.whatsapp .wa-symbol svg{width:17px;height:17px}
html body .compact-action.details{background:#fff!important;color:var(--c-ink)!important;border:1px solid #d6dfe4!important;box-shadow:none!important}
@media(hover:hover) and (pointer:fine){
  html body .compact-action.whatsapp:hover{background:#d6f0e1!important}
  html body .compact-action.details:hover{background:#f4f8f9!important}
}
@media(prefers-reduced-motion:reduce){html body .compact-action{transition:none}html body .deal.compact-deal-card:hover{transform:none}}

@container (min-width:330px){
  .premium-card-bottom{flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:14px!important}
  .compact-deal-actions{flex:0 1 210px!important}
}

/* icons (CSS masks, no markup): pin, building, calendar, moon, board */
html body .deal.compact-deal-card{
  --ic-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --ic-building:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M9 22v-4h6v4M8 6h.01M12 6h.01M16 6h.01M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01'/%3E%3C/svg%3E");
  --ic-cal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  --ic-moon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
  --ic-board:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7a3 3 0 0 0 3 3v10M9 2v7a3 3 0 0 1-3 3M6 2v7M19 22V2c-3 1-5 4-5 8v4h5'/%3E%3C/svg%3E")}

/* ---------- I. HOW MANY CARDS FIT: four across on a normal desktop, three / two on narrower screens, one (with a peek of the next) on a phone ----------
   Columns are fractions of the available width (never a fixed pixel width), so nothing overflows at in-between widths. The 1px margin keeps the carousel script's
   whole-card measurement (it rounds the card step) from dropping to one column fewer. */
/* the catalogue frame (heading + filters + results) used to be exactly as wide as a whole number of fixed 318px tracks; it now simply takes the available width */
@media(min-width:761px){html body .cat-frame,html body .catalog-section .cat-results{grid-template-columns:minmax(0,1fr)}}
@media(min-width:1260px){
  html body .deal-grid,html body .deal-grid.deal-count-1,html body .deal-grid.deal-count-2,html body .deal-grid.deal-count-3,html body .deal-grid.deal-count-4{grid-template-rows:auto!important;grid-auto-columns:calc((100% - 54px) / 4 - 1px)!important;gap:18px!important}
  html body .catalog-section .deal-grid.catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-columns:auto!important;grid-auto-rows:auto!important;gap:18px!important}
}
@media(min-width:900px) and (max-width:1259px){
  html body .deal-grid,html body .deal-grid.deal-count-1,html body .deal-grid.deal-count-2,html body .deal-grid.deal-count-3,html body .deal-grid.deal-count-4{grid-template-rows:auto!important;grid-auto-columns:calc((100% - 36px) / 3 - 1px)!important;gap:18px!important}
  html body .catalog-section .deal-grid.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-columns:auto!important;grid-auto-rows:auto!important;gap:18px!important}
}
@media(min-width:761px) and (max-width:899px){
  html body .deal-grid,html body .deal-grid.deal-count-1,html body .deal-grid.deal-count-2,html body .deal-grid.deal-count-3,html body .deal-grid.deal-count-4{grid-template-rows:auto!important;grid-auto-columns:calc((100% - 34px) / 2 - 1px)!important;gap:16px!important}
  html body .catalog-section .deal-grid.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-columns:auto!important;grid-auto-rows:auto!important;gap:16px!important}
}
@media(max-width:760px){
  html body .deal-grid,html body .deal-grid.deal-count-1,html body .deal-grid.deal-count-2,html body .deal-grid.deal-count-3,html body .deal-grid.deal-count-4{grid-template-rows:auto!important;grid-auto-columns:84%!important;gap:14px!important;padding:4px 4% 22px!important}
  html body .deal.compact-deal-card .deal-body,html body .deal-grid .deal.compact-deal-card .deal-body{padding:13px 14px 14px!important;gap:8px!important}
  html body .compact-deal-title,html body .compact-title-block .compact-deal-title,html body .compact-title-block:has(.compact-hotel-name) .compact-deal-title{font-size:17px!important}
  html body .compact-deal-price{font-size:20px!important}
  html body .compact-action{min-height:40px!important}
}

/* the home carousel loops endlessly (assets/deal-carousel.js): the turquoise bar follows the LOGICAL deal position (two thumbs: the part that runs past the end re-enters at the start) */
html body .deal-carousel.is-looping .carousel-rail-thumb:not(.loop-thumb){display:none}
html body .deal-carousel .carousel-rail-thumb.loop-thumb{cursor:grab;transition:inset-inline-start .85s cubic-bezier(.65,0,.35,1),width .3s ease;touch-action:none}
html body .deal-carousel .carousel-rail{touch-action:none}
html body .deal-carousel .carousel-loop-hit{position:absolute;z-index:4;touch-action:none;cursor:pointer;background:transparent}
html body .deal-carousel .carousel-rail-thumb.loop-thumb::after{content:"";position:absolute;top:3px;bottom:3px;left:50%;width:22px;margin-left:-11px;border-radius:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.8) 0 2px,transparent 2px 6px);opacity:.85;pointer-events:none}   /* grip: the thumb can be dragged */
html body .deal-carousel .carousel-rail.is-dragging,html body .deal-carousel .carousel-rail.is-dragging .loop-thumb{cursor:grabbing}
html body .deal-carousel .carousel-rail-thumb.loop-thumb.is-dragging{transition:none!important}
@media(hover:hover) and (pointer:fine){html body .deal-carousel .carousel-rail-thumb.loop-thumb:hover{filter:brightness(1.08)}}

/* active deal: ONE card of the carousel is the focal deal (desktop: the second card from the right; phone: the main card). Pure transform / shadow / filter - the card keeps its physical size.
   Desktop: lift 8px, scale 1.022, 3px turquoise ring + a thin teal border, deep shadow (+ a teal glow), slightly clearer colours; the other visible cards are only very slightly calmer
   (saturate .94). Phone: no lift or scale (the track has a few px of room only) - stronger ring and shadow. The change moves together with the carousel glide (.7s). */
html body .deal-carousel .deal.compact-deal-card{transition:transform .7s cubic-bezier(.22,.61,.36,1),box-shadow .7s cubic-bezier(.22,.61,.36,1),border-color .7s ease,filter .7s ease}
html body .deal-carousel.is-looping .deal.compact-deal-card:not(.is-active-deal){filter:saturate(.94)}
html body .deal-carousel.is-looping .deal.compact-deal-card.is-active-deal{transform:translateY(-8px) scale(1.022);filter:saturate(1.06) contrast(1.02);border-color:rgba(15,143,149,.85)!important;
  box-shadow:0 0 0 3px rgba(15,143,149,.42),0 36px 54px -22px rgba(7,31,54,.62),0 14px 26px -14px rgba(15,143,149,.4)!important}
/* room for the lift + scale above the cards (the track clips vertically): taller padding, pulled back up by the same amount, so nothing moves */
@media(min-width:761px){html body .deal-carousel.is-looping .deal-grid{padding-top:20px!important;margin-top:-12px!important}}
@media(max-width:760px){
  html body .deal-carousel.is-looping .deal.compact-deal-card:not(.is-active-deal){filter:none}
  html body .deal-carousel.is-looping .deal.compact-deal-card.is-active-deal{transform:none;filter:saturate(1.05);border-color:rgba(15,143,149,.85)!important;
    box-shadow:0 0 0 3px rgba(15,143,149,.4),0 22px 34px -18px rgba(7,31,54,.55)!important}
}
@media(prefers-reduced-motion:reduce){html body .deal-carousel .deal.compact-deal-card,html body .deal-carousel .carousel-rail-thumb.loop-thumb{transition:none}}

/* ---------- G. THE STRIP OF CONTROLS ABOVE THE DEALS (phone): same controls, same behaviour, less height ---------- */
@media(max-width:760px){
  html body .destinations-top{padding-block:8px!important}
  html body .region-board .panel-head{padding:8px 8px 9px!important;min-height:0!important}
  html body .region-board .panel-head b{font-size:16px!important}
  html body .region-board .panel-choose{height:30px!important;min-height:30px!important;margin-top:6px!important;padding:0 12px!important;font-size:12px!important}
  html body .deals-section .section-head{padding-bottom:8px!important;margin-bottom:8px!important}
  html body .deals-section .kicker{margin-bottom:2px!important;font-size:12px!important}
  html body .deals-section .section-head h2{font-size:24px!important}
  html body .deals-section .tabs{margin-top:8px!important}
  html body .deals-section .tabs a,html body .df-chip{padding:6px 14px!important;min-height:32px!important;font-size:13px!important}
  html body .date-filter{margin-bottom:8px!important}
  html body .deals-stage{padding:8px 8px!important}
  html body .deal-category{padding:12px 0 12px!important;margin-bottom:8px!important}
  html body .deal-category-title{margin-bottom:6px!important}
  html body .carousel-controls{margin:0 0 4px!important}
  html body .carousel-btn{width:32px!important;height:32px!important;font-size:18px!important}
}