/* ============================================================
   HOESCAPE THEME OVERRIDES
   Applied only when html[data-skin="hoe"].
   Keeps InfoIschia default styles untouched.
   Brand:
     primary  #1e3c72 (navy)
     accent   #9CC53C (lime)
     bg       #FFFFFF
     text     #1A1A1A
   ============================================================ */

html[data-skin="hoe"] {
    --primary: #1e3c72;
    --primary-dark: #163d7d;
    --secondary: #2a66c2;
    --accent: #9CC53C;
    --accent-hover: #82ab2e;
    --light-bg: #f6faef;
    --text-dark: #1A1A1A;
}

/* ---------- Header ---------- */
html[data-skin="hoe"] .top-bar {
    background: var(--primary);
}
html[data-skin="hoe"] .top-bar a:hover {
    color: var(--accent);
}
html[data-skin="hoe"] .navbar-brand img {
    height: 56px !important;
}
@media (max-width: 991px) {
    html[data-skin="hoe"] .navbar-brand img {
        height: 44px !important;
    }
}
html[data-skin="hoe"] .header-nav-links .nav-link {
    color: var(--primary) !important;
}
html[data-skin="hoe"] .header-nav-links .nav-link:hover {
    background: rgba(30, 77, 156, 0.08);
    color: var(--accent) !important;
}
html[data-skin="hoe"] .header-nav-cta a {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    box-shadow: 0 4px 14px rgba(30, 77, 156, 0.25);
}
html[data-skin="hoe"] .header-nav-cta a:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important;
    color: var(--text-dark) !important;
}

/* Mobile offcanvas */
html[data-skin="hoe"] #mobileMenu .offcanvas-header {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
}
html[data-skin="hoe"] #mobileMenu .offcanvas-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
html[data-skin="hoe"] #mobileMenu .offcanvas-logo img {
    height: 32px;
    width: auto;
    display: block;
}
html[data-skin="hoe"] .mobile-nav-item {
    color: var(--primary);
}
html[data-skin="hoe"] .mobile-nav-item:hover,
html[data-skin="hoe"] .mobile-nav-item.active {
    background: rgba(156, 197, 60, 0.12);
    border-left-color: var(--accent);
}
html[data-skin="hoe"] .mobile-nav-item i { color: var(--secondary); }
html[data-skin="hoe"] .mobile-nav-item:hover i,
html[data-skin="hoe"] .mobile-nav-item.active i { color: var(--accent); }

/* ---------- Search form / CTA buttons ---------- */
html[data-skin="hoe"] .v2-search-btn,
html[data-skin="hoe"] .btn-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}
html[data-skin="hoe"] .v2-search-btn:hover,
html[data-skin="hoe"] .btn-primary:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--text-dark) !important;
}
html[data-skin="hoe"] .v2-section-tag {
    background: rgba(156, 197, 60, 0.18);
    color: var(--primary);
}
html[data-skin="hoe"] .v2-urgency-banner {
    background: rgba(156, 197, 60, 0.18);
    color: var(--primary);
    border-left: 3px solid var(--accent);
}
html[data-skin="hoe"] .v2-urgency-banner i { color: var(--accent); }

/* ---------- Hoescape Hero ---------- */
html[data-skin="hoe"] .hoescape-hero {
    position: relative;
    padding: 72px 0 56px;
    background:
        radial-gradient(circle at 12% 20%, rgba(156,197,60,0.18) 0%, transparent 45%),
        radial-gradient(circle at 88% 80%, rgba(30,77,156,0.10) 0%, transparent 50%),
        linear-gradient(135deg, #ffffff 0%, #f6faef 100%);
    overflow: hidden;
}
html[data-skin="hoe"] .hoescape-hero-eyebrow {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
html[data-skin="hoe"] .hoescape-hero-eyebrow .dot {
    color: var(--accent);
    margin-right: 6px;
}
html[data-skin="hoe"] .hoescape-hero h1 {
    font-size: 3rem;
    line-height: 1.1;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 18px;
    letter-spacing: -0.02em;
}
html[data-skin="hoe"] .hoescape-hero h1 em {
    font-style: normal;
    color: var(--accent);
    background: linear-gradient(120deg, transparent 0%, transparent 65%, rgba(156,197,60,0.25) 65%, rgba(156,197,60,0.25) 100%);
    padding: 0 4px;
}
html[data-skin="hoe"] .hoescape-hero-sub {
    font-size: 1.15rem;
    color: #4a4a4a;
    max-width: 620px;
    margin-bottom: 32px;
    line-height: 1.55;
}
html[data-skin="hoe"] .hoescape-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 36px;
}
html[data-skin="hoe"] .hoescape-cta-primary {
    background: var(--primary);
    color: #fff;
    padding: 14px 28px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 8px 24px rgba(30,77,156,0.28);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
html[data-skin="hoe"] .hoescape-cta-primary:hover {
    background: var(--accent);
    color: var(--text-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(156,197,60,0.4);
}
html[data-skin="hoe"] .hoescape-cta-secondary {
    background: transparent;
    color: var(--primary);
    padding: 14px 26px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    border: 2px solid var(--primary);
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
html[data-skin="hoe"] .hoescape-cta-secondary:hover {
    background: var(--primary);
    color: #fff;
}
html[data-skin="hoe"] .hoescape-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    color: #6b6b6b;
    font-size: 0.88rem;
    align-items: center;
}
html[data-skin="hoe"] .hoescape-hero-trust .item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
html[data-skin="hoe"] .hoescape-hero-trust i {
    color: var(--accent);
    font-size: 1.05rem;
}

@media (max-width: 767px) {
    html[data-skin="hoe"] .hoescape-hero { padding: 48px 0 36px; }
    html[data-skin="hoe"] .hoescape-hero h1 { font-size: 2.1rem; }
    html[data-skin="hoe"] .hoescape-hero-sub { font-size: 1rem; }
}

/* ---------- Audience cards ("Per chi sono le nostre offerte") ---------- */
html[data-skin="hoe"] .hoescape-audience {
    padding: 56px 0;
    background: #ffffff;
}
html[data-skin="hoe"] .hoescape-audience-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 36px;
}
html[data-skin="hoe"] .hoescape-audience-header h2 {
    color: var(--primary);
    font-weight: 800;
    font-size: 2rem;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}
html[data-skin="hoe"] .hoescape-audience-header p {
    color: #555;
    font-size: 1.02rem;
}
html[data-skin="hoe"] .hoescape-audience-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 991px) {
    html[data-skin="hoe"] .hoescape-audience-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    html[data-skin="hoe"] .hoescape-audience-grid { grid-template-columns: 1fr; }
}
html[data-skin="hoe"] .hoescape-audience-card {
    border: 1px solid #e7eef5;
    border-radius: 18px;
    padding: 24px;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    background: #fff;
    text-decoration: none;
    color: inherit;
    display: block;
}
html[data-skin="hoe"] .hoescape-audience-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(30,77,156,0.12);
    border-color: var(--accent);
}
html[data-skin="hoe"] .hoescape-audience-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 14px;
}
html[data-skin="hoe"] .hoescape-audience-card:nth-child(2) .hoescape-audience-icon { background: linear-gradient(135deg, #c44569, #f78ca0); }
html[data-skin="hoe"] .hoescape-audience-card:nth-child(3) .hoescape-audience-icon { background: linear-gradient(135deg, #d4a017, #f5c45c); }
html[data-skin="hoe"] .hoescape-audience-card:nth-child(4) .hoescape-audience-icon { background: linear-gradient(135deg, var(--accent), #6ea425); }
html[data-skin="hoe"] .hoescape-audience-card h3 {
    font-size: 1.1rem;
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 6px;
}
html[data-skin="hoe"] .hoescape-audience-card p {
    font-size: 0.92rem;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* ---------- Footer ---------- */
html[data-skin="hoe"] .v2-footer { background: #1d1e22; }
html[data-skin="hoe"] .v2-footer-contact a:hover,
html[data-skin="hoe"] .v2-footer-links a:hover { color: var(--accent); }
html[data-skin="hoe"] .v2-footer-contact i { color: var(--accent); }
html[data-skin="hoe"] .v2-footer-social a:hover { background: var(--accent); color: var(--text-dark); }

/* Hero overrides on other pages: keep accent for non-home pages */
html[data-skin="hoe"] .v2-hero-tag { color: var(--accent); }
html[data-skin="hoe"] .v2-hero h1 em { color: var(--accent); }

/* ─────────────────────────────────────────────────────────────────────────
   /cerca search results page — repaint orange CTAs with Hoescape green.
   Preserves price displays.
   ───────────────────────────────────────────────────────────────────────── */
html[data-skin="hoe"] .btn-cta-primary {
    background: var(--accent) !important;
    color: var(--primary) !important;
}
html[data-skin="hoe"] .btn-cta-primary:hover {
    background: #8AB52D !important;
    color: var(--primary) !important;
    box-shadow: 0 4px 12px rgba(156, 197, 60, 0.35) !important;
}

/* Search hero pill button: lock to green (overrides any blue/orange) */
html[data-skin="hoe"] .v2-search-btn,
html[data-skin="hoe"] .hoe-search-card .v2-search-btn {
    background: linear-gradient(135deg, var(--accent) 0%, #8AB52D 100%) !important;
    color: var(--primary) !important;
}
html[data-skin="hoe"] .v2-search-btn i,
html[data-skin="hoe"] .hoe-search-card .v2-search-btn i { color: var(--primary) !important; }

/* Filter chips + active state */
html[data-skin="hoe"] .filter-icon-stars {
    background: rgba(156, 197, 60, 0.15) !important;
    color: var(--accent) !important;
}
html[data-skin="hoe"] .filter-chip.active,
html[data-skin="hoe"] .filter-pill.active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--primary) !important;
}

/* Trust strip + scattered orange icons in search */
html[data-skin="hoe"] .ads-trust-strip i { color: var(--accent) !important; }

/* Generic .btn-primary used by mobile filter offcanvas etc. */
html[data-skin="hoe"] .btn-primary:not(.price):not([class*="price"]) {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--primary) !important;
}
html[data-skin="hoe"] .btn-primary:not(.price):not([class*="price"]):hover {
    background: #8AB52D !important;
    border-color: #8AB52D !important;
    color: var(--primary) !important;
}
/* IMPORTANT: price displays are intentionally NOT recoloured. */

/* ─── /cerca search bar (rectangular) — overrides the inline page CSS ─── */
html[data-skin="hoe"] .v2-search-btn {
    background: var(--accent) !important;
    color: var(--primary) !important;
}
html[data-skin="hoe"] .v2-search-btn:hover {
    background: #8AB52D !important;
    color: var(--primary) !important;
}
/* Search bar field icons (📍, 📅, 👥) */
html[data-skin="hoe"] .v2-search-field-icon { color: var(--accent) !important; }

/* "Vedi sulla mappa" outline button */
html[data-skin="hoe"] .btn-outline-primary {
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}
html[data-skin="hoe"] .btn-outline-primary:hover {
    background: var(--accent) !important;
    color: var(--primary) !important;
    border-color: var(--accent) !important;
}

/* "Resetta" filter link (was red/danger) */
html[data-skin="hoe"] .filters-sidebar .btn-link.text-danger {
    color: var(--accent) !important;
}

/* Location link/badge under hotel name (Mazara del Vallo etc.) */
html[data-skin="hoe"] .v3-meta a,
html[data-skin="hoe"] .hotel-location a,
html[data-skin="hoe"] .text-accent { color: var(--accent) !important; }

/* Map link / geo button */
html[data-skin="hoe"] [class*="geo-alt"] { color: inherit; }

/* Override .price-display-xl — used a var(--accent) tint, force orange
   so the price stays orange on Hoescape (per spec). */
html[data-skin="hoe"] .price-display-xl { color: #f5a623 !important; }

/* ─────────────────────────────────────────────────────────────────────────
   CTA BUTTONS — REVERT TO ORANGE
   The earlier blocks force CTA buttons (Cerca Hotel, Vedi camere disponibili,
   filter chips, v2-search) to lime green. Operator preference is to keep the
   CTA orange across the site, including Hoescape. These rules sit at the
   bottom of the file so they win on source order (same specificity).
   ───────────────────────────────────────────────────────────────────────── */
:root {
    --hoe-cta-orange: #f5a623;
    --hoe-cta-orange-hover: #e09000;
}
/* Operator changed mind: CTA buttons + search-field icons back to brand
   green. Prices/stars/locality stay orange (handled by separate blocks
   further down). */
html[data-skin="hoe"] .v2-search-btn,
html[data-skin="hoe"] .hoe-search-card .v2-search-btn,
html[data-skin="hoe"] .btn-cta-primary,
html[data-skin="hoe"] .btn-primary:not(.price):not([class*="price"]) {
    background: var(--hoescape-accent) !important;
    background-image: none !important;
    border-color: var(--hoescape-accent) !important;
    color: #fff !important;
}
html[data-skin="hoe"] .v2-search-btn:hover,
html[data-skin="hoe"] .hoe-search-card .v2-search-btn:hover,
html[data-skin="hoe"] .btn-cta-primary:hover,
html[data-skin="hoe"] .btn-primary:not(.price):not([class*="price"]):hover {
    background: var(--hoescape-accent-hover) !important;
    border-color: var(--hoescape-accent-hover) !important;
    color: #fff !important;
}
html[data-skin="hoe"] .v2-search-btn i,
html[data-skin="hoe"] .hoe-search-card .v2-search-btn i {
    color: #fff !important;
}
html[data-skin="hoe"] .v2-search-field-icon {
    color: var(--hoescape-accent) !important;
}

/* /cerca search submit: hide the "Cerca Hotel" text label on desktop so
   the button matches the lens-only pill used on the home motor.
   On mobile keep the label visible (button is full-width so the icon
   alone would look odd). */
@media (min-width: 992px) {
    html[data-skin="hoe"] .v2-search-btn span {
        display: none;
    }
    html[data-skin="hoe"] .v2-search-btn i {
        font-size: 22px;
    }
    html[data-skin="hoe"] .v2-search-btn {
        min-width: 64px;
        justify-content: center;
    }
}

/* Additional orange overrides on /cerca cards */
/* Price per-night small label */
html[data-skin="hoe"] .price-display-xl,
html[data-skin="hoe"] .price-per-night,
html[data-skin="hoe"] [class*="price-per-night"],
html[data-skin="hoe"] .v3-pkg-price small,
html[data-skin="hoe"] .v3-pkg-price .per-night {
    color: var(--hoe-cta-orange) !important;
}
/* Stars rating */
html[data-skin="hoe"] .v3-stars,
html[data-skin="hoe"] .stars,
html[data-skin="hoe"] [class*="bi-star"] {
    color: var(--hoe-cta-orange) !important;
}
/* Remove the pale-green page background on hotel detail pages.
   hotel-detail.css sets `body { background: var(--light-bg); }`, and on
   Hoescape `--light-bg` is the brand pale green (#f6faef), which leaks
   onto every detail page (native + AVES). Force neutral white instead. */
html[data-skin="hoe"] body { background: #ffffff !important; }

/* Locality in card meta — covers all card variants:
   - .v3-meta a/v3-loc  (native hotel cards built via Jinja)
   - .location-tag      (AVES hotel cards built via JS, hotel-card-horizontal)
   - .hotel-card-location (legacy native card alt path)                          */
html[data-skin="hoe"] .v3-meta a,
html[data-skin="hoe"] .v3-meta .v3-loc,
html[data-skin="hoe"] .v3-meta i.bi-geo-alt,
html[data-skin="hoe"] .location-tag,
html[data-skin="hoe"] .location-tag i,
html[data-skin="hoe"] .hotel-card-location a {
    color: var(--hoe-cta-orange) !important;
}
html[data-skin="hoe"] .v3-meta a:hover,
html[data-skin="hoe"] .hotel-card-location a:hover {
    color: var(--hoe-cta-orange-hover) !important;
}
/* "Vedi sulla mappa" outline button */
html[data-skin="hoe"] .btn-outline-primary {
    color: var(--hoe-cta-orange) !important;
    border-color: var(--hoe-cta-orange) !important;
    background: transparent !important;
}
html[data-skin="hoe"] .btn-outline-primary:hover {
    background: var(--hoe-cta-orange) !important;
    color: #fff !important;
    border-color: var(--hoe-cta-orange) !important;
}
/* ============================================
   HOESCAPE — PORTAL CSS
   Scoped via html[data-skin="hoe"]
   No SCSS, no PostCSS. Plain CSS.
   ============================================ */

/* ---- CSS Variables ---- */
html[data-skin="hoe"] {
    --hoescape-primary: #1e3c72;
    --hoescape-primary-dark: #152a4f;
    --hoescape-accent: #a4c639;
    --hoescape-accent-hover: #8fb02e;
    --hoescape-white: #ffffff;
    --hoescape-gray-100: #f8f9fa;
    --hoescape-gray-200: #e9ecef;
    --hoescape-gray-500: #6c757d;
    --hoescape-gray-700: #495057;
    --hoescape-text: #1e3c72;
    --hoescape-topbar-bg: #152a4f;
    --hoescape-topbar-text: rgba(255,255,255,0.85);
    --hoescape-shadow: 0 4px 24px rgba(26, 58, 92, 0.12);
    --hoescape-shadow-lg: 0 8px 40px rgba(26, 58, 92, 0.18);
    --hoescape-radius: 16px;
    --hoescape-radius-sm: 12px;
    --hoescape-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Reset Scoped ---- */
html[data-skin="hoe"] body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    color: var(--hoescape-text);
    background: var(--hoescape-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   TOP BAR
   ============================================ */
html[data-skin="hoe"] .top-bar {
    background: var(--hoescape-topbar-bg);
    padding: 8px 0;
    font-size: 13px;
}

html[data-skin="hoe"] .top-bar-link {
    color: var(--hoescape-topbar-text);
    text-decoration: none;
    transition: var(--hoescape-transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

html[data-skin="hoe"] .top-bar-link:hover {
    color: var(--hoescape-white);
}

html[data-skin="hoe"] .top-bar-social {
    gap: 16px;
}

html[data-skin="hoe"] .top-bar-contact {
    margin-left: auto;
}

/* ============================================
   NAVBAR
   ============================================ */
html[data-skin="hoe"] .navbar-main {
    background: var(--hoescape-white);
    padding: 16px 0;
    position: relative;
    z-index: 100;
    box-shadow: 0 1px 0 rgba(26, 58, 92, 0.06);
}

html[data-skin="hoe"] .navbar-logo {
    display: inline-block;
    text-decoration: none;
}

html[data-skin="hoe"] .navbar-logo svg {
    display: block;
}

html[data-skin="hoe"] .navbar-menu {
    gap: 32px;
}

html[data-skin="hoe"] .navbar-link {
    color: var(--hoescape-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    transition: var(--hoescape-transition);
    padding: 8px 0;
    position: relative;
}

html[data-skin="hoe"] .navbar-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--hoescape-accent);
    transition: var(--hoescape-transition);
}

html[data-skin="hoe"] .navbar-link:hover::after,
html[data-skin="hoe"] .navbar-link.active::after {
    width: 100%;
}

html[data-skin="hoe"] .navbar-link:hover {
    color: var(--hoescape-accent);
}

html[data-skin="hoe"] .navbar-toggle {
    background: none;
    border: none;
    color: var(--hoescape-primary);
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    transition: var(--hoescape-transition);
}

html[data-skin="hoe"] .navbar-toggle:hover {
    background: var(--hoescape-gray-100);
}

/* Dropdown */
html[data-skin="hoe"] .dropdown-menu {
    border: none;
    box-shadow: var(--hoescape-shadow-lg);
    border-radius: var(--hoescape-radius-sm);
    padding: 8px 0;
    min-width: 200px;
}

html[data-skin="hoe"] .dropdown-item {
    padding: 10px 20px;
    font-size: 14px;
    color: var(--hoescape-primary);
    transition: var(--hoescape-transition);
}

html[data-skin="hoe"] .dropdown-item:hover {
    background: var(--hoescape-gray-100);
    color: var(--hoescape-accent);
}

/* Mobile Offcanvas */
html[data-skin="hoe"] .offcanvas {
    max-width: min(420px, 100vw);
    width: min(420px, 100vw);
}

html[data-skin="hoe"] .mobile-nav-link {
    color: var(--hoescape-primary);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 12px 0;
    border-bottom: 1px solid var(--hoescape-gray-200);
    display: block;
    transition: var(--hoescape-transition);
}

/* Inline contact items inside the offcanvas keep their natural case
   (telephone number, email address) — strip the uppercase only there. */
html[data-skin="hoe"] .mobile-nav-contact .mobile-nav-link {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
}

html[data-skin="hoe"] .mobile-nav-link:hover {
    color: var(--hoescape-accent);
    padding-left: 8px;
}

/* ============================================
   HERO SECTION
   ============================================ */
html[data-skin="hoe"] .hero-section {
    position: relative;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* No overflow:hidden here — would clip the guests dropdown that
       extends below the hero. The hero-bg layer has its own clipping. */
}

/* Search-box wrapper anchored to the hero's bottom edge and pulled
   down 50% of its own height — so the motor straddles the boundary
   (half on the photo, half on the OFFERTE TOP section below).
   The wrapper is the second .container-fluid inside .hero-section. */
@media (min-width: 992px) {
    html[data-skin="hoe"] .hero-section > .container-fluid:last-of-type {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        transform: translateY(50%);
        z-index: 10;
    }
}

html[data-skin="hoe"] .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

html[data-skin="hoe"] .hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

html[data-skin="hoe"] .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(15, 38, 64, 0.92) 0%,
        rgba(15, 38, 64, 0.75) 40%,
        rgba(15, 38, 64, 0.4) 100%
    );
    z-index: 2;
}

html[data-skin="hoe"] .hero-content {
    position: relative;
    z-index: 3;
    padding-top: 60px;
    padding-bottom: 40px;
}

html[data-skin="hoe"] .hero-title {
    color: var(--hoescape-white);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

html[data-skin="hoe"] .hero-dot {
    color: var(--hoescape-accent);
}

html[data-skin="hoe"] .hero-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.6;
    font-weight: 400;
    max-width: 500px;
}

/* USP Desktop */
html[data-skin="hoe"] .hero-usp {
    gap: 32px;
}

html[data-skin="hoe"] .usp-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

html[data-skin="hoe"] .usp-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

html[data-skin="hoe"] .usp-icon svg {
    width: 100%;
    height: 100%;
}

html[data-skin="hoe"] .usp-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.3px;
}

/* USP Mobile */
html[data-skin="hoe"] .hero-usp-mobile {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

html[data-skin="hoe"] .usp-mobile-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
}

html[data-skin="hoe"] .usp-mobile-item svg {
    flex-shrink: 0;
}

/* ============================================
   SEARCH BOX  (Logitravel-style: rounded pill fields,
   inline icon+label, grey-tinted box, no inner shadows)
   ============================================ */
/* .search-summary is the InfoIschia mobile-only "compact summary"
   chip ("Cerca hotel… Modifica"). Hoescape doesn't use it (its mobile
   flow lives in _search_hero_mobile.html which has its own hide rule).
   On Ischia search.css:975 hides it on desktop, but Hoescape no longer
   loads search.css — without this rule the chip leaks onto Hoescape
   desktop /cerca above the real search form. */
html[data-skin="hoe"] .search-summary {
    display: none !important;
}

html[data-skin="hoe"] .search-box {
    position: relative;
    z-index: 10;
    /* On desktop the parent .container-fluid is absolutely positioned at
       hero bottom (see media query above) — no margins needed here. On
       mobile/tablet the parent is back in normal flow and the responsive
       media query sets margin-top/bottom appropriately. */
    margin: 0;
    /* Override `overflow: hidden` from static/css/search.css (InfoIschia
       Logitravel pill). That rule clipped the destination autocomplete
       dropdown on /cerca because the pill's bottom edge cut off anything
       extending below. Hoescape uses its own .search-form pill with
       visible overflow so the dropdown can extend over the page. */
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

html[data-skin="hoe"] .search-form {
    background: var(--hoescape-white);
    border-radius: 14px;
    box-shadow: var(--hoescape-shadow-lg);
    padding: 14px;
}

html[data-skin="hoe"] .search-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: nowrap;
}

html[data-skin="hoe"] .search-field {
    flex: 1;
    min-width: 0;
    background: #f7f8fa;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 14px;
    transition: var(--hoescape-transition);
    cursor: pointer;
}

html[data-skin="hoe"] .search-field:hover {
    border-color: #cbd5e1;
}

html[data-skin="hoe"] .search-field:focus-within {
    border-color: var(--hoescape-accent);
    background: var(--hoescape-white);
}

/* Validation error state — applied by hoescape-home.js when user
   clicks Cerca with empty destination/dates. Red border + red
   inline message pinned below the field's content. */
html[data-skin="hoe"] .search-field.search-field-error {
    border-color: #e74c3c;
    background: #fff5f5;
    position: relative;
}
html[data-skin="hoe"] .search-field-error-msg {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    color: #e74c3c;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 14px 0;
    line-height: 1.3;
    pointer-events: none;
}

html[data-skin="hoe"] .search-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--hoescape-primary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 4px;
    cursor: pointer;
}

html[data-skin="hoe"] .search-label svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

html[data-skin="hoe"] .search-input-wrap {
    position: relative;
}

html[data-skin="hoe"] .search-select,
html[data-skin="hoe"] .search-input,
html[data-skin="hoe"] .search-guests-btn {
    width: 100%;
    padding: 0 22px 0 0;
    border: none;
    border-radius: 0;
    /* 16px prevents iOS Safari auto-zoom on focus. */
    font-size: 16px;
    font-weight: 600;
    color: var(--hoescape-primary);
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: var(--hoescape-transition);
    line-height: 1.3;
    min-height: 22px;
}

html[data-skin="hoe"] .search-input::placeholder {
    color: var(--hoescape-gray-500);
    font-weight: 500;
}

html[data-skin="hoe"] .search-select:focus,
html[data-skin="hoe"] .search-input:focus,
html[data-skin="hoe"] .search-guests-btn:focus {
    outline: none;
    box-shadow: none;
}

html[data-skin="hoe"] .search-select option:first-child {
    color: var(--hoescape-gray-500);
}

html[data-skin="hoe"] .search-chevron {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--hoescape-gray-500);
    font-size: 12px;
    pointer-events: none;
}

html[data-skin="hoe"] .search-guests-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    font-weight: 500;
}

/* Guests Dropdown */
html[data-skin="hoe"] .guests-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--hoescape-white);
    border-radius: var(--hoescape-radius-sm);
    box-shadow: var(--hoescape-shadow-lg);
    padding: 16px;
    z-index: 1000;
    display: none;
    border: 1px solid var(--hoescape-gray-200);
}

html[data-skin="hoe"] .guests-dropdown.active {
    display: block;
}

html[data-skin="hoe"] .guests-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--hoescape-gray-200);
}

html[data-skin="hoe"] .guests-row:last-child {
    border-bottom: none;
}

html[data-skin="hoe"] .guests-row span {
    font-size: 15px;
    font-weight: 500;
    color: var(--hoescape-primary);
}

html[data-skin="hoe"] .guests-counter {
    display: flex;
    align-items: center;
    gap: 16px;
}

html[data-skin="hoe"] .guests-minus,
html[data-skin="hoe"] .guests-plus {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--hoescape-gray-200);
    background: var(--hoescape-white);
    color: var(--hoescape-primary);
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--hoescape-transition);
    padding: 0;
    line-height: 1;
}

/* ============================================
   MULTI-ROOM GUESTS DROPDOWN (Logitravel-style)
   ============================================ */
html[data-skin="hoe"] .rooms-multi-dropdown {
    min-width: 360px;
    padding: 0;
    max-height: 480px;
    overflow-y: auto;
}

html[data-skin="hoe"] .rooms-multi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--hoescape-gray-200);
    background: var(--hoescape-white);
    position: sticky;
    top: 0;
    z-index: 2;
}

html[data-skin="hoe"] .rooms-multi-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--hoescape-primary);
}

html[data-skin="hoe"] .rooms-add-btn {
    background: transparent;
    border: none;
    color: var(--hoescape-primary);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: var(--hoescape-transition);
}

html[data-skin="hoe"] .rooms-add-btn:hover:not([disabled]) {
    background: var(--hoescape-gray-100);
    color: var(--hoescape-accent-hover);
}

html[data-skin="hoe"] .rooms-add-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

html[data-skin="hoe"] .rooms-list {
    padding: 4px 16px 16px;
}

html[data-skin="hoe"] .room-card {
    padding: 8px 0 12px;
    border-bottom: 1px solid var(--hoescape-gray-200);
}

html[data-skin="hoe"] .room-card:last-child {
    border-bottom: none;
}

html[data-skin="hoe"] .room-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px -8px 6px;
    padding: 6px 12px;
    background: var(--hoescape-gray-100);
    border-radius: 6px;
}

html[data-skin="hoe"] .room-card-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--hoescape-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

html[data-skin="hoe"] .room-card-close {
    background: transparent;
    border: none;
    color: var(--hoescape-gray-500);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 0 4px;
    transition: var(--hoescape-transition);
}

html[data-skin="hoe"] .room-card-close:hover {
    color: var(--hoescape-primary);
}

html[data-skin="hoe"] .room-counter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

html[data-skin="hoe"] .room-counter-label {
    font-size: 15px;
    color: var(--hoescape-primary);
}

html[data-skin="hoe"] .room-counter-label strong {
    font-weight: 600;
}

html[data-skin="hoe"] .room-counter-hint {
    color: var(--hoescape-gray-500);
    font-size: 13px;
    margin-left: 4px;
}

html[data-skin="hoe"] .room-counter {
    display: flex;
    align-items: center;
    gap: 14px;
}

html[data-skin="hoe"] .room-counter-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--hoescape-primary);
    background: var(--hoescape-white);
    color: var(--hoescape-primary);
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: var(--hoescape-transition);
}

html[data-skin="hoe"] .room-counter-btn:hover:not([disabled]) {
    background: var(--hoescape-primary);
    color: var(--hoescape-white);
}

html[data-skin="hoe"] .room-counter-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}

html[data-skin="hoe"] .room-counter-value {
    min-width: 18px;
    text-align: center;
    font-weight: 700;
    color: var(--hoescape-primary);
    font-size: 15px;
}

html[data-skin="hoe"] .room-card-ages {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--hoescape-gray-200);
}

html[data-skin="hoe"] .room-card-ages-label {
    font-size: 13px;
    color: var(--hoescape-gray-500);
    margin-bottom: 6px;
}

html[data-skin="hoe"] .room-card-ages-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

html[data-skin="hoe"] .room-child-age {
    min-width: 64px;
    padding: 6px 8px;
    border: 1px solid var(--hoescape-gray-200);
    border-radius: 6px;
    background: var(--hoescape-white);
    color: var(--hoescape-primary);
    font-size: 14px;
    cursor: pointer;
}

html[data-skin="hoe"] .room-child-age:focus {
    outline: none;
    border-color: var(--hoescape-accent);
}

html[data-skin="hoe"] .rooms-multi-footer {
    padding: 12px 16px 14px;
    border-top: 1px solid var(--hoescape-gray-200);
    background: var(--hoescape-white);
    position: sticky;
    bottom: 0;
    z-index: 2;
}

html[data-skin="hoe"] .rooms-confirm-btn {
    width: 100%;
    padding: 10px 16px;
    background: var(--hoescape-accent);
    color: var(--hoescape-white);
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--hoescape-transition);
    box-shadow: 0 2px 8px rgba(164, 198, 57, 0.3);
}

html[data-skin="hoe"] .rooms-confirm-btn:hover {
    background: var(--hoescape-accent-hover);
    box-shadow: 0 4px 12px rgba(164, 198, 57, 0.4);
}

html[data-skin="hoe"] .rooms-confirm-btn:active {
    transform: translateY(1px);
}

html[data-skin="hoe"] .guests-minus:hover,
html[data-skin="hoe"] .guests-plus:hover {
    border-color: var(--hoescape-accent);
    color: var(--hoescape-accent);
}

html[data-skin="hoe"] .guests-counter span {
    font-size: 16px;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
    color: var(--hoescape-primary);
}

/* Search Submit Button */
html[data-skin="hoe"] .search-submit {
    min-width: 64px;
    padding: 0 22px;
    height: auto;
    align-self: stretch;
    border-radius: 10px;
    background: var(--hoescape-accent);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--hoescape-transition);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(164, 198, 57, 0.3);
    color: var(--hoescape-white);
    font-weight: 700;
}

html[data-skin="hoe"] .search-submit:hover {
    background: var(--hoescape-accent-hover);
    transform: scale(1.05);
    box-shadow: 0 6px 24px rgba(164, 198, 57, 0.5);
}

html[data-skin="hoe"] .search-submit:active {
    transform: scale(0.98);
}

/* ============================================
   FOOTER
   ============================================ */
html[data-skin="hoe"] .footer-main {
    background: #1d1e22;
    color: rgba(255, 255, 255, 0.7);
    padding: 48px 0 24px;
    margin-top: auto;
}

html[data-skin="hoe"] .footer-title {
    color: var(--hoescape-white);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

html[data-skin="hoe"] .footer-text {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
}

html[data-skin="hoe"] .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

html[data-skin="hoe"] .footer-links li {
    margin-bottom: 10px;
}

html[data-skin="hoe"] .footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    transition: var(--hoescape-transition);
}

html[data-skin="hoe"] .footer-links a:hover {
    color: var(--hoescape-accent);
}

html[data-skin="hoe"] .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

html[data-skin="hoe"] .footer-copy {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

/* ============================================
   DESKTOP TYPOGRAPHY BOOST (≥992px)
   ============================================ */
@media (min-width: 992px) {
    /* Bigger HoEscape logo in the header (inline style sets 36px, so we
       need !important to win the cascade without editing the template). */
    html[data-skin="hoe"] .navbar-logo img {
        height: 56px !important;
    }

    /* Whole search-form: wider, deeper padding, more pronounced shadow */
    html[data-skin="hoe"] .search-form {
        padding: 22px 22px;
        border-radius: 18px;
        box-shadow: 0 18px 50px rgba(15, 38, 64, 0.22);
    }
    html[data-skin="hoe"] .search-row {
        gap: 14px;
    }
    html[data-skin="hoe"] .search-label {
        font-size: 14px;
        letter-spacing: 0.8px;
        margin-bottom: 8px;
        gap: 8px;
    }
    html[data-skin="hoe"] .search-label svg {
        width: 22px;
        height: 22px;
    }
    html[data-skin="hoe"] .search-select,
    html[data-skin="hoe"] .search-input,
    html[data-skin="hoe"] .search-guests-btn {
        font-size: 21px;
        font-weight: 700;
        min-height: 32px;
        padding-right: 26px;
    }
    html[data-skin="hoe"] .search-input::placeholder {
        font-size: 19px;
        font-weight: 500;
    }
    html[data-skin="hoe"] .search-field {
        padding: 16px 20px;
        border-radius: 12px;
    }
    html[data-skin="hoe"] .search-chevron {
        font-size: 14px;
    }
    html[data-skin="hoe"] .search-submit {
        min-width: 110px;
        padding: 0 30px;
        border-radius: 12px;
        box-shadow: 0 4px 14px rgba(164, 198, 57, 0.4);
    }
    html[data-skin="hoe"] .search-submit svg {
        width: 30px;
        height: 30px;
    }
    html[data-skin="hoe"] .rooms-multi-dropdown {
        min-width: 420px;
    }
    html[data-skin="hoe"] .rooms-multi-title { font-size: 17px; }
    html[data-skin="hoe"] .rooms-add-btn { font-size: 15px; }
    html[data-skin="hoe"] .room-card-title { font-size: 13px; }
    html[data-skin="hoe"] .room-counter-label { font-size: 16px; }
    html[data-skin="hoe"] .room-counter-hint { font-size: 14px; }
    html[data-skin="hoe"] .room-counter-value {
        font-size: 17px;
        min-width: 22px;
    }
    html[data-skin="hoe"] .room-counter-btn {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
    html[data-skin="hoe"] .room-card-ages-label { font-size: 14px; }
    html[data-skin="hoe"] .room-child-age {
        font-size: 15px;
        padding: 7px 10px;
    }

    /* Flatpickr range picker: bigger calendar with breathing room. The
       .flatpickr-calendar is appended to <body>, so the
       html[data-portal=offertehoescape] scope still matches it via the
       descendant selector. */
    html[data-skin="hoe"] .flatpickr-calendar {
        padding: 14px 18px 22px;
        font-size: 15px;
        box-shadow: 0 18px 50px rgba(15, 38, 64, 0.22);
        border-radius: 14px;
        width: auto !important;
    }
    html[data-skin="hoe"] .flatpickr-calendar.multiMonth .flatpickr-days {
        width: auto !important;
    }
    html[data-skin="hoe"] .flatpickr-innerContainer,
    html[data-skin="hoe"] .flatpickr-rContainer {
        width: auto !important;
    }
    html[data-skin="hoe"] .flatpickr-months .flatpickr-month {
        height: 46px;
    }
    html[data-skin="hoe"] .flatpickr-current-month {
        font-size: 18px;
        padding: 8px 0 4px;
    }
    html[data-skin="hoe"] .flatpickr-weekday {
        font-size: 13px;
        height: 34px;
        line-height: 34px;
    }
    html[data-skin="hoe"] .flatpickr-day {
        height: 42px;
        line-height: 42px;
        font-size: 15px;
        max-width: 46px;
    }
    /* Each month occupies one .dayContainer + one .flatpickr-weekdaycontainer.
       Widen ONLY the per-month containers to 322px (7 × 46px). The parent
       row containers (.flatpickr-rContainer / -weekdays / -days) must keep
       their N-month total width — never force a fixed width on them. */
    html[data-skin="hoe"] .flatpickr-weekdaycontainer,
    html[data-skin="hoe"] .dayContainer {
        width: 322px !important;
        min-width: 322px !important;
        max-width: 322px !important;
    }
    html[data-skin="hoe"] .dayContainer {
        padding-bottom: 8px;
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 991.98px) {
    html[data-skin="hoe"] .hero-section {
        min-height: 500px;
        padding-bottom: 32px;
    }

    html[data-skin="hoe"] .hero-content {
        padding-top: 40px;
        padding-bottom: 16px;
    }

    /* No negative margin on mobile — the search box must sit below the
       USP bullets, not on top of them. */
    html[data-skin="hoe"] .search-box {
        margin-top: 8px;
        margin-bottom: 32px;
        padding: 0 16px;
    }

    html[data-skin="hoe"] .search-form {
        padding: 20px;
        border-radius: var(--hoescape-radius-sm);
    }

    html[data-skin="hoe"] .search-row {
        flex-direction: column;
        align-items: stretch;
    }

    html[data-skin="hoe"] .search-field {
        min-width: 100%;
    }

    html[data-skin="hoe"] .search-submit {
        width: 100%;
        min-height: 52px;
        border-radius: 10px;
        margin-top: 4px;
        padding: 12px 22px;
    }

    html[data-skin="hoe"] .search-submit span {
        font-weight: 700;
        font-size: 16px;
    }

    /* Multi-room dropdown: fit inside viewport instead of forcing 360-420px */
    html[data-skin="hoe"] .rooms-multi-dropdown {
        min-width: 0;
        width: 100%;
        max-width: calc(100vw - 32px);
        max-height: 70vh;
    }
    html[data-skin="hoe"] .rooms-multi-header {
        padding: 12px 14px;
    }
    html[data-skin="hoe"] .rooms-multi-title {
        font-size: 15px;
    }
    html[data-skin="hoe"] .rooms-add-btn {
        font-size: 14px;
        padding: 4px 6px;
        white-space: nowrap;
    }
    html[data-skin="hoe"] .rooms-list {
        padding: 4px 14px 12px;
    }
}

/* Mobile (≤767.98px): hide hero background photo, keep title+subtitle
   + clean search engine. Hoescape mobile = no Positano image,
   white background, dark text, motor inline below subtitle. */
@media (max-width: 767.98px) {
    html[data-skin="hoe"] .hero-section {
        min-height: auto;
        background: var(--hoescape-white);
        padding-top: 16px;
        padding-bottom: 0;
    }

    html[data-skin="hoe"] .hero-bg,
    html[data-skin="hoe"] .hero-overlay {
        display: none;
    }

    html[data-skin="hoe"] .hero-content {
        padding-top: 8px;
        padding-bottom: 16px;
    }

    html[data-skin="hoe"] .hero-title {
        color: var(--hoescape-primary);
    }

    html[data-skin="hoe"] .hero-dot {
        color: var(--hoescape-accent);
    }

    html[data-skin="hoe"] .hero-subtitle {
        color: var(--hoescape-gray-500);
    }

    html[data-skin="hoe"] .search-box {
        margin-top: 0;
    }
}

@media (max-width: 575.98px) {
    html[data-skin="hoe"] .top-bar {
        font-size: 12px;
    }

    html[data-skin="hoe"] .hero-section {
        min-height: auto;
    }

    html[data-skin="hoe"] .hero-title {
        font-size: 32px;
    }

    html[data-skin="hoe"] .hero-subtitle {
        font-size: 15px;
    }

    html[data-skin="hoe"] .search-form {
        padding: 12px;
    }

    /* Footer mobile: contain horizontal overflow on long emails/links
       and tighten vertical padding so the column stack reads naturally. */
    html[data-skin="hoe"] .v2-footer {
        padding-top: 32px;
        overflow-x: hidden;
    }

    html[data-skin="hoe"] .v2-footer .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    html[data-skin="hoe"] .v2-footer-contact a,
    html[data-skin="hoe"] .v2-footer-links a {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    html[data-skin="hoe"] .v2-footer-bottom {
        margin-top: 24px;
    }
}

/* ============================================
   /CERCA SEARCH MOTOR — Hoescape restyle (CSS-only override).
   The results page uses the V2 search motor (.v2-search / .v2-search-field
   / .v2-search-btn) shared with InfoIschia. For Hoescape we restyle it to
   match the home motor look: pill-rounded grey-tinted boxes, uppercase
   labels, bold values, green pill submit button. HTML and JS V2 stay
   untouched so the calendar/guest dropdowns keep working as before.
   ============================================ */
html[data-skin="hoe"] .v2-search {
    background: var(--hoescape-white);
    border-radius: 14px;
    box-shadow: var(--hoescape-shadow-lg);
    padding: 14px;
    gap: 10px;
}

html[data-skin="hoe"] .v2-search-field {
    background: #f7f8fa;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 14px;
    transition: var(--hoescape-transition);
}

html[data-skin="hoe"] .v2-search-field:hover {
    border-color: #cbd5e1;
}

html[data-skin="hoe"] .v2-search-field:focus-within {
    border-color: var(--hoescape-accent);
    background: var(--hoescape-white);
}

html[data-skin="hoe"] .v2-search-field-icon {
    color: var(--hoescape-primary);
}

html[data-skin="hoe"] .v2-search-field-body label {
    font-size: 11px;
    font-weight: 700;
    color: var(--hoescape-primary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

html[data-skin="hoe"] .v2-search-field-value,
html[data-skin="hoe"] .v2-search-field-body input,
html[data-skin="hoe"] .v2-search-field-body select {
    font-size: 16px;
    font-weight: 600;
    color: var(--hoescape-primary);
    background: transparent;
}

/* The vertical divider between fields is redundant when each box has
   its own border + background. */
html[data-skin="hoe"] .v2-search-divider {
    display: none;
}

html[data-skin="hoe"] .v2-search-btn {
    background: var(--hoescape-accent);
    border-radius: 10px;
    color: var(--hoescape-white);
    font-weight: 700;
    padding: 0 24px;
    border: none;
    box-shadow: 0 2px 8px rgba(164, 198, 57, 0.3);
    transition: var(--hoescape-transition);
}

html[data-skin="hoe"] .v2-search-btn:hover {
    background: var(--hoescape-accent-hover);
    box-shadow: 0 4px 12px rgba(164, 198, 57, 0.4);
}

@media (min-width: 992px) {
    html[data-skin="hoe"] .v2-search {
        padding: 18px;
        border-radius: 16px;
        gap: 12px;
    }
    html[data-skin="hoe"] .v2-search-field {
        padding: 14px 18px;
    }
    html[data-skin="hoe"] .v2-search-field-body label {
        font-size: 13px;
        letter-spacing: 0.7px;
    }
    html[data-skin="hoe"] .v2-search-field-value,
    html[data-skin="hoe"] .v2-search-field-body input,
    html[data-skin="hoe"] .v2-search-field-body select {
        font-size: 18px;
        font-weight: 700;
    }
    html[data-skin="hoe"] .v2-search-btn {
        padding: 0 32px;
        border-radius: 12px;
        font-size: 16px;
    }
}

/* ============================================
   /CERCA LOCATION AUTOCOMPLETE DROPDOWN
   /cerca uses .hoe-loc-field / .hoe-loc-dropdown / .hoe-loc-item-* (the
   home equivalent is .destination-*). No CSS was shipping for these so
   the dropdown fell back to default browser styling (no absolute
   positioning, no shadow, "Destinazioni" label spilling beside the
   input). Mirror the home destination-dropdown look.
   ============================================ */
html[data-skin="hoe"] .hoe-loc-field {
    position: relative;
}

html[data-skin="hoe"] .hoe-loc-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    color: var(--hoescape-primary);
    font-weight: 600;
    font-size: 16px;
}

html[data-skin="hoe"] .hoe-loc-input::placeholder {
    color: var(--hoescape-gray-500);
    font-weight: 500;
}

html[data-skin="hoe"] .hoe-loc-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--hoescape-white);
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
    border: 1px solid var(--hoescape-gray-200);
    padding: 8px 0;
    z-index: 1000;
    max-height: 380px;
    overflow-y: auto;
}

html[data-skin="hoe"] .hoe-loc-section-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--hoescape-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 8px 16px 6px;
}

html[data-skin="hoe"] .hoe-loc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: var(--hoescape-primary);
}

html[data-skin="hoe"] .hoe-loc-item:hover,
html[data-skin="hoe"] .hoe-loc-item:focus {
    background: rgba(164, 198, 57, 0.10);
    outline: none;
}

html[data-skin="hoe"] .hoe-loc-item-icon {
    color: var(--hoescape-accent);
    flex-shrink: 0;
}

html[data-skin="hoe"] .hoe-loc-item-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

html[data-skin="hoe"] .hoe-loc-item-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--hoescape-primary);
}

html[data-skin="hoe"] .hoe-loc-item-sub {
    font-size: 12px;
    color: var(--hoescape-gray-500);
    margin-top: 2px;
}

html[data-skin="hoe"] .hoe-loc-empty {
    padding: 14px 16px;
    color: var(--hoescape-gray-500);
    font-size: 14px;
}

@media (min-width: 992px) {
    html[data-skin="hoe"] .hoe-loc-input { font-size: 18px; font-weight: 700; }
    html[data-skin="hoe"] .hoe-loc-dropdown { max-height: 460px; padding: 10px 0; }
    html[data-skin="hoe"] .hoe-loc-section-label { font-size: 13px; padding: 10px 20px 8px; }
    html[data-skin="hoe"] .hoe-loc-item { padding: 14px 20px; }
    html[data-skin="hoe"] .hoe-loc-item-title { font-size: 18px; font-weight: 700; }
    html[data-skin="hoe"] .hoe-loc-item-sub { font-size: 14px; margin-top: 3px; }
}

/* ============================================
   /CERCA + HOME — DESTINATION AUTOCOMPLETE
   Classi usate da templates/public/partials/_search_motor_hoescape.html
   + static/js/hoescape-home.js initLocationAutocomplete(). Senza queste
   regole il dropdown restava in flusso normale dentro .search-input-wrap
   (solo header "Destinazioni" visibile, contenuto clippato).
   ============================================ */
html[data-skin="hoe"] .destination-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--hoescape-white);
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
    border: 1px solid var(--hoescape-gray-200);
    padding: 8px 0;
    z-index: 1000;
    max-height: 380px;
    overflow-y: auto;
}

html[data-skin="hoe"] .destination-section-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--hoescape-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 8px 16px 6px;
}

html[data-skin="hoe"] .destination-results {
    display: flex;
    flex-direction: column;
}

html[data-skin="hoe"] .destination-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: var(--hoescape-primary);
}

html[data-skin="hoe"] .destination-item:hover,
html[data-skin="hoe"] .destination-item:focus {
    background: rgba(164, 198, 57, 0.10);
    outline: none;
}

html[data-skin="hoe"] .destination-item-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--hoescape-primary);
}

html[data-skin="hoe"] .destination-item-sub {
    font-size: 12px;
    color: var(--hoescape-gray-500);
    margin-top: 2px;
}

html[data-skin="hoe"] .destination-empty {
    padding: 14px 16px;
    color: var(--hoescape-gray-500);
    font-size: 14px;
}

@media (min-width: 992px) {
    html[data-skin="hoe"] .destination-dropdown {
        max-height: 460px;
        padding: 10px 0;
    }
    html[data-skin="hoe"] .destination-section-label {
        font-size: 13px;
        padding: 10px 20px 8px;
    }
    html[data-skin="hoe"] .destination-item { padding: 14px 20px; }
    html[data-skin="hoe"] .destination-item-title { font-size: 16px; }
    html[data-skin="hoe"] .destination-item-sub { font-size: 13px; margin-top: 3px; }
}

/* ============================================================
   Mobile date sheet — Logitravel-style fullscreen
   ============================================================ */
.hoe-date-sheet[hidden] { display: none !important; }
.hoe-date-sheet {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    overscroll-behavior: contain;
}
.hoe-date-sheet-header {
    flex: 0 0 auto;
    background: #1e3c72;
    color: #ffffff;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.hoe-date-sheet-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.1px;
}
.hoe-date-sheet-close {
    background: transparent;
    border: 0;
    color: #ffffff;
    font-size: 28px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}
.hoe-date-sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 12px 20px;
    background: #ffffff;
}
.hoe-date-sheet-mount .flatpickr-calendar.inline {
    box-shadow: none !important;
    border: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    background: #ffffff !important;
    border-radius: 0 !important;
}
.hoe-date-sheet-mount .flatpickr-rContainer,
.hoe-date-sheet-mount .flatpickr-days,
.hoe-date-sheet-mount .dayContainer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
.hoe-date-sheet-mount .flatpickr-day {
    max-width: 14.2857% !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 16px !important;
    border-radius: 0 !important;
}
.hoe-date-sheet-mount .flatpickr-day.selected,
.hoe-date-sheet-mount .flatpickr-day.startRange,
.hoe-date-sheet-mount .flatpickr-day.endRange {
    background: #1e3c72 !important;
    border-color: #1e3c72 !important;
    color: #ffffff !important;
}
.hoe-date-sheet-mount .flatpickr-day.inRange {
    background: #e7eef7 !important;
    border-color: #e7eef7 !important;
    color: #1e3c72 !important;
    box-shadow: none !important;
}
.hoe-date-sheet-mount .flatpickr-current-month {
    font-size: 18px !important;
    font-weight: 700 !important;
    padding-top: 14px !important;
}
.hoe-date-sheet-mount .flatpickr-weekday {
    font-size: 13px !important;
    color: #6b7280 !important;
    text-transform: uppercase;
}
.hoe-date-sheet-footer {
    flex: 0 0 auto;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}
.hoe-date-sheet-confirm {
    width: 100%;
    background: #1e3c72;
    color: #ffffff;
    border: 0;
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
}
body.hoe-no-scroll { overflow: hidden; }
/* Hide site chrome when a fullscreen sheet is open on mobile so the
   sticky/fixed Hoescape header doesn't bleed on top of the sheet. */
@media (max-width: 767.98px) {
    body.hoe-no-scroll .top-bar,
    body.hoe-no-scroll .navbar-main,
    body.hoe-no-scroll header.site-header { display: none !important; }
}

/* ============================================================
   Mobile guests sheet — fullscreen Logitravel-style
   ============================================================ */
@media (max-width: 767.98px) {
    html[data-skin="hoe"] .rooms-multi-dropdown.active {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        /* iOS Safari: 100vh is taller than the visible viewport (excludes the
           dynamic toolbar), so with overflow:hidden the bottom .rooms-multi-
           footer (Conferma) is pushed below the fold and disappears. dvh
           tracks the *visible* height → footer stays on screen. Declared
           after the vh fallback so non-supporting browsers keep 100vh. */
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        z-index: 9999 !important;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: none !important;
        transform: none !important;
        overflow: hidden !important;
    }
    html[data-skin="hoe"] .rooms-multi-dropdown.active .rooms-multi-header {
        flex: 0 0 auto;
        background: #1e3c72;
        color: #ffffff;
        padding: 18px 20px;
        position: sticky;
        top: 0;
        z-index: 2;
    }
    html[data-skin="hoe"] .rooms-multi-dropdown.active .rooms-multi-title {
        color: #ffffff;
        font-size: 17px;
        font-weight: 700;
    }
    html[data-skin="hoe"] .rooms-multi-dropdown.active .rooms-multi-header .rooms-add-btn {
        color: #ffffff;
        border-color: rgba(255,255,255,0.5);
        background: transparent;
    }
    /* The "+ Aggiungi camera" pill lives in .rooms-add-row (outside the
       header) — preserve the blue filled style inside the mobile sheet. */
    html[data-skin="hoe"] .rooms-multi-dropdown.active .rooms-add-row .rooms-add-btn {
        background: #1e3c72;
        color: #ffffff;
        border: 0;
    }
    html[data-skin="hoe"] .rooms-multi-dropdown.active .rooms-sheet-close {
        background: transparent;
        border: 0;
        color: #ffffff;
        font-size: 28px;
        line-height: 1;
        padding: 0 4px;
        cursor: pointer;
        margin-left: 8px;
    }
    html[data-skin="hoe"] .rooms-multi-dropdown.active .rooms-list {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 14px 16px 20px;
    }
    html[data-skin="hoe"] .rooms-multi-dropdown.active .rooms-multi-footer {
        flex: 0 0 auto;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #e5e7eb;
        background: #ffffff;
        position: sticky;
        bottom: 0;
    }
    html[data-skin="hoe"] .rooms-multi-dropdown.active .rooms-confirm-btn {
        width: 100%;
        background: #1e3c72;
        color: #ffffff;
        border: 0;
        padding: 16px;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        border-radius: 0;
    }
}

/* ============================================================
   Logitravel-style mobile calendar inside .hoe-date-sheet
   ============================================================ */
.hoe-cal-mount {
    width: 100%;
}
.hoe-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 2;
    border-bottom: 1px solid #e5e7eb;
    padding: 10px 0;
}
.hoe-cal-wd {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: 0.5px;
}
.hoe-cal-month {
    padding: 8px 0 18px;
}
.hoe-cal-month-label {
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: #1f2937;
    padding: 14px 0 10px;
}
.hoe-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 4px;
}
.hoe-cal-day {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #1f2937;
    cursor: pointer;
    user-select: none;
    border-radius: 0;
    position: relative;
}
.hoe-cal-day.is-blank { visibility: hidden; cursor: default; }
.hoe-cal-day.is-past {
    color: #d1d5db;
    cursor: not-allowed;
}
.hoe-cal-day.is-today {
    outline: 1px dashed #1e3c72;
    outline-offset: -3px;
    border-radius: 6px;
}
.hoe-cal-day.is-inrange {
    background: #e7eef7;
    color: #1e3c72;
}
.hoe-cal-day.is-start,
.hoe-cal-day.is-end {
    background: #1e3c72;
    color: #ffffff;
    font-weight: 700;
}
/* Override Flatpickr inline rules that previously targeted the mount */
.hoe-date-sheet-mount.hoe-cal-mount .flatpickr-calendar { display: none !important; }

/* "+ Aggiungi camera" row above the rooms list (blue filled pill) */
html[data-skin="hoe"] .rooms-add-row {
    padding: 8px 16px 4px;
    display: flex;
    justify-content: flex-end;
}
html[data-skin="hoe"] .rooms-add-row .rooms-add-btn {
    background: #1e3c72;
    border: 0;
    color: #ffffff;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.2px;
}
html[data-skin="hoe"] .rooms-add-row .rooms-add-btn:hover {
    background: #15304b;
}
html[data-skin="hoe"] .rooms-add-row .rooms-add-btn[disabled] {
    background: #9ca3af;
    cursor: not-allowed;
}
/* Tighten space between sheet header and first camera on mobile */
@media (max-width: 767.98px) {
    html[data-skin="hoe"] .rooms-multi-dropdown.active .rooms-add-row {
        padding: 6px 16px 0;
    }
    html[data-skin="hoe"] .rooms-multi-dropdown.active .rooms-list {
        padding-top: 6px;
    }
}

/* ============================================================
   /cerca mobile: hide motor by default, open as fullscreen on Cambia
   ============================================================ */
@media (max-width: 767.98px) {
    /* Hide motor by default; open inline under cerca-hero (Logitravel-style
       blue background, white compact fields, yellow CERCARE button). */
    html[data-skin="hoe"] .hoe-cerca-form-wrap { display: none; }
    html[data-skin="hoe"] .hoe-cerca-form-wrap.is-open {
        display: block;
        background: var(--primary, #1e3c72);
        padding: 14px 14px 18px;
        margin: 0;
    }
    /* Kill container padding above the open motor so it sits flush
       under the cerca-hero (no white gap). */
    body.hoe-cerca-edit-open .container.pt-3.pb-0 {
        padding: 0 !important;
        max-width: 100% !important;
    }
    /* Hide the Ordina/Filtra/Mappa toolbar while editing the search. */
    body.hoe-cerca-edit-open .cerca-actions { display: none !important; }
    html[data-skin="hoe"] .hoe-cerca-form-wrap.is-open .search-box,
    html[data-skin="hoe"] .hoe-cerca-form-wrap.is-open .search-form {
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    html[data-skin="hoe"] .hoe-cerca-form-wrap.is-open .search-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        background: transparent !important;
    }
    html[data-skin="hoe"] .hoe-cerca-form-wrap.is-open .search-field {
        background: #ffffff !important;
        border: 0 !important;
        border-radius: 4px !important;
        padding: 10px 14px !important;
        min-height: 56px;
        box-shadow: none !important;
        flex: 0 0 auto !important;
    }
    html[data-skin="hoe"] .hoe-cerca-form-wrap.is-open .search-label {
        color: #6b7280 !important;
        font-size: 11px !important;
        text-transform: uppercase;
        font-weight: 600;
        margin-bottom: 2px;
    }
    html[data-skin="hoe"] .hoe-cerca-form-wrap.is-open .search-label svg { display: none !important; }
    html[data-skin="hoe"] .hoe-cerca-form-wrap.is-open .search-input,
    html[data-skin="hoe"] .hoe-cerca-form-wrap.is-open .search-guests-btn {
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        font-size: 15px !important;
        color: #1f2937 !important;
        font-weight: 500;
    }
    html[data-skin="hoe"] .hoe-cerca-form-wrap.is-open .search-chevron { display: none !important; }
    html[data-skin="hoe"] .hoe-cerca-form-wrap.is-open .search-submit {
        width: 100% !important;
        background: var(--hoescape-accent, #9CC53C) !important;
        color: #ffffff !important;
        border: 0 !important;
        border-radius: 4px !important;
        padding: 16px !important;
        margin-top: 8px !important;
        height: auto !important;
        min-height: 0 !important;
    }
    html[data-skin="hoe"] .hoe-cerca-form-wrap.is-open .search-submit svg { display: none !important; }
    html[data-skin="hoe"] .hoe-cerca-form-wrap.is-open .search-submit span { display: none !important; }
    html[data-skin="hoe"] .hoe-cerca-form-wrap.is-open .search-submit::after {
        content: 'CERCARE';
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.6px;
    }
    /* Hide the JS-injected close button — Cambia ↔ × swap lives on cerca-hero */
    html[data-skin="hoe"] .hoe-cerca-form-close { display: none !important; }
}

/* Mobile: bigger HoEscape logo in header */
@media (max-width: 767.98px) {
    html[data-skin="hoe"] .navbar-logo img {
        height: 44px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   AVES Hotel Detail — Hero polish (offerte.hoescape.com)
   Strip dark overlay + anchor title/back-button to the bottom of the hero.
   Scoped via `.hero-image > .hero-overlay` so it does NOT collide with the
   home-page hero (which uses `.hero-bg-img` + `.hero-content`).
═══════════════════════════════════════════════════════════════════ */
html[data-skin="hoe"] .hero-image { background: #152a4f; }
html[data-skin="hoe"] .hero-image::before { display: none; }
html[data-skin="hoe"] .hero-image > .hero-overlay {
    background: linear-gradient(transparent 55%, rgba(0, 0, 0, 0.55) 100%);
    padding: 0;
    top: 0;
    display: flex;
    align-items: flex-end;
}
html[data-skin="hoe"] .hero-image > .hero-overlay .container.hero-bottom {
    padding-bottom: 28px;
    padding-top: 0;
}
html[data-skin="hoe"] .hero-image > .hero-overlay h1 {
    color: #fff;
    font-weight: 800;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
html[data-skin="hoe"] .hero-image > .hero-overlay .back-to-results {
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    backdrop-filter: blur(4px);
}
html[data-skin="hoe"] .hero-image > .hero-overlay .back-to-results:hover {
    background: rgba(0, 0, 0, 0.65);
}

/* ============================================
   MOBILE OFFCANVAS MENU — Hoescape theme
   The shared `_header.html` partial hardcodes inline navy gradients
   (`#1e3c72 → #2a5298`) and an orange CTA button. Override here so
   the mobile menu reads Hoescape brand: navy `#1e3c72` + lime accent
   `#a4c639`, rounded surfaces.
   ============================================ */
html[data-skin="hoe"] #mobileMenu .offcanvas-header {
    background: linear-gradient(135deg, #1e3c72 0%, #2c63b8 100%) !important;
    border-bottom: 3px solid #a4c639 !important;
    padding: 20px !important;
}
html[data-skin="hoe"] #mobileMenu .offcanvas-body {
    background: #ffffff;
}
html[data-skin="hoe"] #mobileMenu .mobile-nav-item {
    color: #1e3c72;
    font-weight: 600;
    border-bottom: 1px solid #f0f3f8;
    padding: 14px 20px;
}
html[data-skin="hoe"] #mobileMenu .mobile-nav-item:hover,
html[data-skin="hoe"] #mobileMenu .mobile-nav-item:focus {
    background: #f3f6fb;
    color: #1e3c72;
}
html[data-skin="hoe"] #mobileMenu .mobile-nav-item i {
    color: #a4c639;
    margin-right: 10px;
    font-size: 1.05rem;
}
html[data-skin="hoe"] #mobileMenu .mobile-divider {
    border-top: 1px solid #e8edf3;
    margin: 8px 0;
}
/* Hoescape CTA in offcanvas: replace the orange "Richiedi preventivo"
   button with the lime/navy Hoescape pairing. Inline styles in the
   partial require !important to override. */
html[data-skin="hoe"] #mobileMenu .btn[href="/richiedi-preventivo"],
html[data-skin="hoe"] #mobileMenu .btn[href*="preventivo"] {
    background: var(--hoescape-accent, #a4c639) !important;
    color: #1e3c72 !important;
    box-shadow: 0 4px 15px rgba(164, 198, 57, 0.3) !important;
    border-radius: 12px !important;
}
html[data-skin="hoe"] #mobileMenu .btn-close-white {
    filter: brightness(0) invert(1);
}

/* ============================================
   MOBILE HEADER REDESIGN (Hoescape only)
   Hide the blue top bar with phone/email entirely on mobile/tablet
   and rebuild the navbar as a 3-column grid:
     [ hamburger blue circle ]   [ logo centered ]   [ search lime circle ]
   Desktop (>=992px) is untouched.
   ============================================ */
@media (max-width: 991.98px) {
    html[data-skin="hoe"] .top-bar {
        display: none !important;
    }
    html[data-skin="hoe"] .navbar {
        background: #ffffff !important;
        padding: 10px 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }
    html[data-skin="hoe"] .navbar .container {
        display: grid !important;
        grid-template-columns: 48px 1fr 48px;
        align-items: center;
        column-gap: 12px;
    }
    /* Hamburger = 48px blue circle */
    html[data-skin="hoe"] .navbar .navbar-toggler {
        width: 48px !important;
        height: 48px !important;
        background: var(--hoescape-primary, #1e3c72) !important;
        border: 0 !important;
        border-radius: 50% !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: none !important;
        margin: 0;
        grid-column: 1;
    }
    html[data-skin="hoe"] .navbar .navbar-toggler i,
    html[data-skin="hoe"] .navbar .navbar-toggler .bi-list {
        color: #ffffff !important;
        font-size: 22px !important;
        line-height: 1 !important;
    }
    html[data-skin="hoe"] .navbar .navbar-toggler .mobile-header-label {
        display: none !important;
    }
    /* Logo centered */
    html[data-skin="hoe"] .navbar .navbar-brand {
        grid-column: 2;
        justify-self: center;
        margin: 0 !important;
        padding: 0;
    }
    html[data-skin="hoe"] .navbar .navbar-brand img {
        height: 36px !important;
        width: auto;
        max-width: 100%;
    }
    /* Mobile search = 48px lime circle on the right (Hoescape branch
       in _header.html renders <a class="btn-mobile-search"> here). */
    html[data-skin="hoe"] .navbar .btn-mobile-search {
        grid-column: 3;
        width: 48px !important;
        height: 48px !important;
        background: var(--hoescape-accent, #a4c639) !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        color: #ffffff !important;
        margin: 0;
    }
    html[data-skin="hoe"] .navbar .btn-mobile-search i,
    html[data-skin="hoe"] .navbar .btn-mobile-search .bi {
        color: #ffffff !important;
        font-size: 20px !important;
        line-height: 1 !important;
    }
}

/* =====================================================================
   HOESCAPE GLOBAL THEME OVERRIDE (header bigger + all CTAs blue)
   Audit request: logo +25-30%, logo always left-aligned, hamburger
   bigger / thicker, ALL primary CTAs in Hoescape brand blue with white
   text. CSS-only, no markup/route changes.
   ===================================================================== */

/* ----- Mobile/tablet header: revise from previous centered-logo
   layout to LEFT-aligned logo right after the hamburger; search stays
   on the far right. ----- */
@media (max-width: 991.98px) {
    html[data-skin="hoe"] .navbar .container {
        grid-template-columns: 56px auto 1fr 56px !important;
        column-gap: 14px !important;
    }
    html[data-skin="hoe"] .navbar .navbar-toggler {
        width: 56px !important;
        height: 56px !important;
        grid-column: 1 !important;
    }
    html[data-skin="hoe"] .navbar .navbar-toggler i,
    html[data-skin="hoe"] .navbar .navbar-toggler .bi-list {
        font-size: 28px !important;
        font-weight: 700;
        -webkit-text-stroke: 0.6px currentColor; /* thicker hamburger bars */
    }
    html[data-skin="hoe"] .navbar .navbar-brand {
        grid-column: 2 !important;
        justify-self: start !important;
    }
    html[data-skin="hoe"] .navbar .navbar-brand img {
        height: 48px !important; /* +33% vs prev 36px */
    }
    html[data-skin="hoe"] .navbar .btn-mobile-search {
        grid-column: 4 !important;
        width: 56px !important;
        height: 56px !important;
    }
    html[data-skin="hoe"] .navbar .btn-mobile-search i {
        font-size: 22px !important;
    }
}

/* ----- Desktop header: bigger logo (+25-30%), always left aligned ----- */
@media (min-width: 992px) {
    html[data-skin="hoe"] .navbar .navbar-brand img {
        height: 64px !important; /* was 50px → +28% */
    }
}

/* ----- Global Hoescape CTA recolor: brand navy blue ---- */
html[data-skin="hoe"] .v2-search-btn,
html[data-skin="hoe"] .hoe-search-card .v2-search-btn,
html[data-skin="hoe"] .search-submit,
html[data-skin="hoe"] .btn-primary,
html[data-skin="hoe"] .btn-search,
html[data-skin="hoe"] .btn-prenota,
html[data-skin="hoe"] .btn-cta,
html[data-skin="hoe"] .btn-cta-primary,
html[data-skin="hoe"] .btn-book,
html[data-skin="hoe"] .btn-scopri,
html[data-skin="hoe"] .v3-btn-go {
    background: var(--hoescape-primary, #1e3c72) !important;
    background-color: var(--hoescape-primary, #1e3c72) !important;
    border-color: var(--hoescape-primary, #1e3c72) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(26, 58, 92, 0.18);
    border-radius: 10px !important;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
html[data-skin="hoe"] .v2-search-btn:hover,
html[data-skin="hoe"] .hoe-search-card .v2-search-btn:hover,
html[data-skin="hoe"] .search-submit:hover,
html[data-skin="hoe"] .btn-primary:hover,
html[data-skin="hoe"] .btn-search:hover,
html[data-skin="hoe"] .btn-prenota:hover,
html[data-skin="hoe"] .btn-cta:hover,
html[data-skin="hoe"] .btn-cta-primary:hover,
html[data-skin="hoe"] .btn-book:hover,
html[data-skin="hoe"] .btn-scopri:hover,
html[data-skin="hoe"] .v3-btn-go:hover {
    background: var(--hoescape-primary-dark, #152a4f) !important;
    background-color: var(--hoescape-primary-dark, #152a4f) !important;
    border-color: var(--hoescape-primary-dark, #152a4f) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(26, 58, 92, 0.28);
}
/* Icons inside primary CTAs: force white (some legacy rules paint
   them with the old accent lime). */
html[data-skin="hoe"] .v2-search-btn i,
html[data-skin="hoe"] .hoe-search-card .v2-search-btn i,
html[data-skin="hoe"] .search-submit i,
html[data-skin="hoe"] .btn-cta-primary i {
    color: #ffffff !important;
}

/* =====================================================================
   MOBILE DRAWER REDESIGN (Hoescape) — applies to <div id="mobileMenu">
   The old offcanvas had an inline navy-gradient header with a "Menu"
   title and a green accent strip; that markup was inline-styled so a
   pure CSS override could not theme it. The template now drops the
   inline style and uses these classes for the new layout.
   ===================================================================== */
html[data-skin="hoe"] #mobileMenu.hoe-mobile-drawer {
    width: 88vw !important;
    max-width: 380px;
    background: #ffffff !important;
    border-right: 0;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.12);
    border-radius: 0 16px 16px 0;
}
html[data-skin="hoe"] .hoe-mobile-drawer-header {
    background: #ffffff !important;
    border-bottom: 1px solid #eef1f5 !important;
    padding: 18px 20px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
html[data-skin="hoe"] .hoe-mobile-drawer-logo img {
    height: 36px;
    width: auto;
    display: block;
}
html[data-skin="hoe"] .hoe-mobile-drawer-close {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f3f6fb;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hoescape-primary, #1e3c72);
    transition: background 0.18s ease;
    padding: 0;
}
html[data-skin="hoe"] .hoe-mobile-drawer-close:hover {
    background: #e6ecf4;
}
html[data-skin="hoe"] .hoe-mobile-drawer-close i {
    font-size: 20px;
    line-height: 1;
}

/* Nav items */
html[data-skin="hoe"] #mobileMenu .mobile-nav-item {
    color: var(--hoescape-primary, #1e3c72) !important;
    font-weight: 600;
    font-size: 0.98rem;
    border-bottom: 0;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
html[data-skin="hoe"] #mobileMenu .mobile-nav-item:hover,
html[data-skin="hoe"] #mobileMenu .mobile-nav-item:active {
    background: #f7f9fc;
    color: var(--hoescape-primary, #1e3c72) !important;
}
html[data-skin="hoe"] #mobileMenu .mobile-nav-item i {
    color: var(--hoescape-accent, #a4c639);
    font-size: 1.05rem;
    width: 22px;
    text-align: center;
}
html[data-skin="hoe"] #mobileMenu .mobile-divider {
    border: 0;
    border-top: 1px solid #eef1f5;
    margin: 8px 20px;
}

/* "Hai bisogno di aiuto?" box */
html[data-skin="hoe"] .hoe-mobile-help {
    margin: 12px 20px 16px;
    padding: 14px 16px;
    border: 1px solid #e6ecf4;
    border-radius: 12px;
    background: #f7f9fc;
}
html[data-skin="hoe"] .hoe-mobile-help-title {
    margin: 0 0 10px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    font-weight: 700;
}
html[data-skin="hoe"] .hoe-mobile-help-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    color: var(--hoescape-primary, #1e3c72);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}
html[data-skin="hoe"] .hoe-mobile-help-row i {
    color: var(--hoescape-primary, #1e3c72);
    font-size: 1.05rem;
    width: 22px;
    text-align: center;
}
html[data-skin="hoe"] .hoe-mobile-help-row:hover {
    color: var(--hoescape-primary-dark, #152a4f);
}

/* Bottom CTA inherits .btn-cta-primary global navy via portal CSS;
   strip the legacy inline orange gradient if present (template no
   longer injects it but the rule is harmless as a safety). */
html[data-skin="hoe"] #mobileMenu .hoe-mobile-cta {
    background: var(--hoescape-primary, #1e3c72) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(30, 60, 114, 0.22) !important;
    font-size: 1.02rem !important;
}
html[data-skin="hoe"] #mobileMenu .hoe-mobile-cta:hover {
    background: var(--hoescape-primary-dark, #152a4f) !important;
}

/* ============================================================
   SCHEDA HOTEL AVES — interventi chirurgici HoEscape
   (spec 2026-05-15-1145-hoescape-aves-hotel-detail-surgical)
   Tutto scoped html[data-skin="hoe"]; il path
   non-HoEscape resta invariato.
   ============================================================ */

/* 1. Stelle accanto al nome (hero, testo bianco).
   Colore oro esplicito #f5a623: la classe globale .stars usa
   var(--accent) che su questo portale è verde lime — qui serve
   l'oro accent richiesto, quindi literal volutamente. */
html[data-skin="hoe"] .hero-overlay h1 .hoe-hero-stars {
    color: #f5a623;
    font-size: 1.5rem;
    letter-spacing: 2px;
    margin-left: .45rem;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
    white-space: nowrap;
    vertical-align: middle;
}
@media (max-width: 768px) {
    html[data-skin="hoe"] .hero-overlay h1 .hoe-hero-stars {
        font-size: 1.1rem;
        letter-spacing: 1px;
        display: inline-block;
    }
}

/* 2. Fix slider: .hero-overlay (no z-index, dopo il carosello nel
   DOM) copriva i controlli Bootstrap intercettando i click. Si
   neutralizza il pointer dell'overlay tranne sui suoi link, e si
   alzano i controlli/indicatori sopra l'overlay. */
html[data-skin="hoe"] .hero-image .hero-overlay {
    pointer-events: none;
}
html[data-skin="hoe"] .hero-image .hero-overlay a,
html[data-skin="hoe"] .hero-image .hero-overlay h1 {
    pointer-events: auto;
}
html[data-skin="hoe"] .hero-image .carousel-control-prev,
html[data-skin="hoe"] .hero-image .carousel-control-next,
html[data-skin="hoe"] .hero-image .carousel-indicators {
    z-index: 15;
    pointer-events: auto;
}

/* 4. Badge "N notti" col blu ufficiale HoEscape (var(--primary)
   = #1e3c72), non il blu Bootstrap di .badge.bg-primary. Il badge
   occupanti adiacente (bg-secondary) resta invariato. */
html[data-skin="hoe"] .badge.hoe-nights-badge {
    background-color: var(--primary);
    color: #ffffff;
}

/* 6. Box "Gli ospiti adorano…" — eredita .info-card; chip plus. */
html[data-skin="hoe"] .hoe-loved-box h5 {
    color: var(--primary);
    display: flex;
    align-items: center;
}
html[data-skin="hoe"] .hoe-loved-box h5 .bi-heart-fill {
    color: #f5a623;
}
html[data-skin="hoe"] .hoe-loved-chip {
    display: inline-flex;
    align-items: center;
    background: var(--light-bg, #f6faef);
    color: var(--primary);
    border: 1px solid rgba(30, 60, 114, .15);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: .9rem;
    font-weight: 600;
}
html[data-skin="hoe"] .hoe-loved-chip .bi {
    color: var(--accent);
}

/* 7. P2 — Titoli dentro la descrizione markdown in blu ufficiale HoEscape.
   La copy personalizzata usa heading markdown (## Trattamento) o righe in
   grassetto come pseudo-titoli (**La quota comprende**). Di default
   .hotel-description eredita il grigio #374151: qui coloriamo SOLO i
   titoli/sezioni, NON i paragrafi né le liste. */
html[data-skin="hoe"] .hotel-description h1,
html[data-skin="hoe"] .hotel-description h2,
html[data-skin="hoe"] .hotel-description h3,
html[data-skin="hoe"] .hotel-description h4,
html[data-skin="hoe"] .hotel-description h5,
html[data-skin="hoe"] .hotel-description h6 {
    color: var(--primary);
    font-weight: 700;
}
/* Pseudo-titolo: paragrafo il cui unico contenuto è un <strong> (riga in
   grassetto isolata, es. "**Trattamento**"). Il grassetto inline dentro
   una frase NON è :only-child quindi resta grigio. */
html[data-skin="hoe"] .hotel-description p > strong:only-child {
    color: var(--primary);
}

/* 8. P6 — "Torna ai risultati" come pill bianco evidente sopra la hero.
   Override del default scuro di hotel-detail.css (.back-to-results),
   SOLO portale HoEscape: InfoIschia resta invariato. Logica/JS/href
   non toccati. */
html[data-skin="hoe"] .back-to-results {
    color: var(--primary);
    background: #ffffff;
    border: 1px solid rgba(30, 60, 114, .35);
    box-shadow: 0 2px 8px rgba(15, 30, 60, .18);
    backdrop-filter: none;
    padding: 10px 18px;
    font-size: .95rem;
    font-weight: 700;
    border-radius: 999px;
    transition: background .2s, color .2s, box-shadow .2s;
}
html[data-skin="hoe"] .back-to-results:hover,
html[data-skin="hoe"] .back-to-results:focus {
    color: #ffffff;
    background: var(--primary);
    box-shadow: 0 3px 12px rgba(15, 30, 60, .28);
}
html[data-skin="hoe"] .back-to-results i {
    font-size: 1rem;
}
@media (max-width: 575.98px) {
    html[data-skin="hoe"] .back-to-results {
        padding: 9px 16px;
        font-size: .9rem;
    }
}

/* ── "Richiedi preventivo" CTA — navbar (desktop) + offcanvas (mobile) ──
   Mirrors the prominent quote CTA InfoIschia exposes in its header. */
html[data-skin="hoe"] .navbar-cta-hoe {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: .92rem;
    padding: 9px 20px;
    border-radius: 999px;
    white-space: nowrap;
    transition: background .2s, transform .2s;
}
html[data-skin="hoe"] .navbar-cta-hoe:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    transform: translateY(-1px);
}
html[data-skin="hoe"] .mobile-nav-cta-hoe {
    display: block;
    margin-top: 18px;
    text-align: center;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    padding: 14px 18px;
    border-radius: 12px;
}
html[data-skin="hoe"] .mobile-nav-cta-hoe:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #fff;
}

/* ============================================================
   TIPOGRAFIA — Inter, più morbida e leggibile (solo HoEscape)
   Font globale Inter (caricato via Google Fonts nelle head dei
   template HoEscape). Pesi alleggeriti: niente 900/troppo bold;
   titoli eleganti a 700, prezzi forti ma max 800. Solo
   font-family/font-weight/micro-tipografia — nessun cambio di
   layout, dimensioni, colori o logica. Scoped: InfoIschia non
   carica queste regole con priorità (selettori data-portal).
   ============================================================ */
html[data-skin="hoe"] body,
html[data-skin="hoe"] .hoe-hero,
html[data-skin="hoe"] .search-box,
html[data-skin="hoe"] .hotel-card-horizontal,
html[data-skin="hoe"] .hotel-description,
html[data-skin="hoe"] .filter-label,
html[data-skin="hoe"] .filters-sidebar,
html[data-skin="hoe"] .hoe-section-title {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* Testi descrittivi / filtri: più morbidi (400/500) */
html[data-skin="hoe"] .hotel-description,
html[data-skin="hoe"] .filters-sidebar .form-check-label,
html[data-skin="hoe"] .price-dates {
    font-weight: 400;
}
/* Titoli hotel / card: evidenti ma eleganti (700, non schiacciati) */
html[data-skin="hoe"] .hotel-card-title,
html[data-skin="hoe"] .hotel-card-horizontal h5,
html[data-skin="hoe"] .hoe-section-title {
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
}
/* Label del motore ricerca: 700 con letter-spacing leggero */
html[data-skin="hoe"] .search-label,
html[data-skin="hoe"] .filter-label {
    font-weight: 700;
    letter-spacing: .02em;
}
/* Prezzi: impatto forte ma peso massimo 800 (mai 900) */
html[data-skin="hoe"] .price-display-xl,
html[data-skin="hoe"] .price-display-sm,
html[data-skin="hoe"] .hotel-card-horizontal .price-display-xl {
    font-weight: 800;
}

/* ============================================================
   SCHEDA HOTEL AVES — interventi MOBILE (solo HoEscape).
   Tutto scoped html[data-portal] + @media mobile → desktop e
   InfoIschia invariati.
   ============================================================ */
/* P1 — località + regione sotto il nome (hero, mobile) */
html[data-skin="hoe"] .hero-bottom .hoe-hero-place {
    margin-top: 6px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
html[data-skin="hoe"] .hero-bottom .hoe-hero-place i {
    margin-right: 5px;
    opacity: .9;
}

@media (max-width: 991.98px) {
    /* P2 — date check-in/check-out molto più grandi e dominanti.
       !important per battere gli style inline (font-size:2rem). */
    html[data-skin="hoe"] .aves-stay-box {
        gap: 1.25rem !important;
        justify-content: center;
    }
    html[data-skin="hoe"] .aves-stay-box .aves-stay-day {
        font-size: 3rem !important;
        line-height: 1 !important;
    }
    html[data-skin="hoe"] .aves-stay-box .aves-stay-day span {
        font-size: 1.7rem !important;
    }
    html[data-skin="hoe"] .aves-stay-box .aves-stay-label {
        font-size: .9rem;
        font-weight: 600;
        display: block;
        margin-top: 4px;
    }
    html[data-skin="hoe"] .aves-stay-box .aves-stay-sep {
        font-size: 1.6rem !important;
    }

    /* P7 — niente "Apri in Google Maps" su HoEscape mobile
       (partial condiviso non toccato; nascosto solo qui, niente
       spazio vuoto perché collassa il wrapper). */
    html[data-skin="hoe"] .hoe-aves-mapcard .text-center.py-2 {
        display: none !important;
    }
}

/* P3 — sticky bar mobile: "Prenota ora", prezzo e telefono più grandi/forti
   per leggibilità, SENZA cambiare l'altezza del box: il padding resta quello
   base di hotel-detail.css (.sticky-btn 12px 18px). .sticky-price-bar è già
   solo mobile (hidden >768px). */
html[data-skin="hoe"] .sticky-price-bar .sticky-btn {
    font-size: 16px;
    font-weight: 800;
    padding: 12px 18px;
}
html[data-skin="hoe"] .sticky-price-bar .sticky-price-big,
html[data-skin="hoe"] .sticky-price-bar .sticky-price-amount {
    font-size: 22px;
    font-weight: 800;
}
html[data-skin="hoe"] .sticky-price-bar a[href^="tel:"] {
    font-size: 16px;
    font-weight: 800;
}

/* Parità mobile scheda hotel: nascondi i duplicati dell'hero (valutazione,
   stelle) e la distanza nel sottotitolo hero, così la pagina CON ricerca
   (aves_hotel_detail.html) e SENZA ricerca (hotel_detail.html) condividono
   un unico layout mobile. Le distanze restano nella sezione dedicata.
   Scoped HoEscape → zero regressione InfoIschia (portale 1) e desktop. */
@media (max-width: 768px) {
    html[data-skin="hoe"] .hero-subtitle-distance,
    html[data-skin="hoe"] .quick-info-item--rating,
    html[data-skin="hoe"] .quick-info-item--stars {
        display: none !important;
    }
    /* Località solo nel badge in alto (.hero-badges-top): rimuovi tutto il
       sottotitolo località dall'hero su mobile. Scoped alla scheda hotel
       (body.page-hotel-detail) → home/altre pagine HoEscape intatte. */
    html[data-skin="hoe"] body.page-hotel-detail .hero-subtitle {
        display: none !important;
    }
    /* Stelle su riga propria SOTTO il nome (non a fianco). */
    html[data-skin="hoe"] body.page-hotel-detail .hero-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: .35rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   PARITÀ SCHEDA HOTEL AVES con/senza date (2026-05-16) — scoped HoEscape.
   Hero left-align + stelle sotto (anche desktop), no dots slider, barra
   distanze, CTA no-date, sticky bar più compatta con testo più grande.
═══════════════════════════════════════════════════════════════════ */

/* Hero: titolo sempre a sinistra in title-case; stelle SOTTO il nome con
   interlinea ridotta — su mobile E desktop (solo scheda hotel). */
html[data-skin="hoe"] body.page-hotel-detail .hero-overlay .container {
    text-align: left;
    /* Stacca il blocco titolo/stelle dalla barra distanze sottostante. */
    padding-bottom: 20px;
}
/* !important: il markup .hero-title-row porta le utility Bootstrap
   `align-items-center gap-3` che hanno !important e centrerebbero
   nome+stelle. Forziamo allineamento a sinistra e gap compatto. */
html[data-skin="hoe"] body.page-hotel-detail .hero-title-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .2rem !important;
}
html[data-skin="hoe"] body.page-hotel-detail .hero-title-row .hotel-name-title {
    text-align: left;
    text-transform: capitalize;
    line-height: 1.15;
    /* Titolo più grande + ombra marcata per leggibilità sopra la foto. */
    font-size: 2rem;
    text-shadow: 0 2px 6px rgba(0,0,0,.55), 0 1px 16px rgba(0,0,0,.5);
}
@media (min-width: 992px) {
    html[data-skin="hoe"] body.page-hotel-detail .hero-title-row .hotel-name-title {
        font-size: 2.85rem;
    }
}
html[data-skin="hoe"] body.page-hotel-detail .hero-title-row .stars {
    line-height: 1;
    /* Un po' di respiro tra le stelle e il badge/barra distanze sotto. */
    padding-top: 4px;
    text-shadow: 0 1px 4px rgba(0,0,0,.45);
}
/* Badge "N foto": allineato in basso a destra, sulla stessa riga delle
   stelle (era a metà hero). top:auto perché il base usa bottom:100px. */
html[data-skin="hoe"] .hero-image .hero-gallery-btn {
    top: auto !important;
    bottom: 20px !important;
}

/* Slider hero: nessun pallino/dot. */
html[data-skin="hoe"] .hero-image .carousel-indicators {
    display: none !important;
}

/* Barra distanze (sotto hero, prima del box prezzo) — chip puliti, una sola
   barra mobile + desktop. Stile base portale-neutro + accento HoEscape. */
.hotel-distances-bar {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 14px 0;
}
.hotel-distances-bar .hotel-distances-items {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .9rem;
    align-items: center;
}
.hotel-distances-bar .hotel-distance-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
    color: #34495e;
}
.hotel-distances-bar .hotel-distance-icon i { color: #2a5298; }
html[data-skin="hoe"] .hotel-distances-bar .hotel-distance-icon i {
    color: var(--accent);
}

/* CTA "Verifica disponibilità" (scheda senza date) — al posto del box prezzo. */
.no-dates-cta-card {
    background: var(--light-bg, #f8f9fa);
    border: 1px solid #e9ecef;
    border-radius: 14px;
    padding: 28px 20px;
    margin: 20px 0 8px;
}
.no-dates-cta-card .no-dates-cta-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #1e3c72;
}
html[data-skin="hoe"] .no-dates-cta-card .no-dates-cta-title {
    color: var(--primary);
}
html[data-skin="hoe"] .no-dates-cta-card .no-dates-cta-btn {
    background: var(--accent);
    border: none;
    color: #fff;
}
html[data-skin="hoe"] .no-dates-cta-card .no-dates-cta-btn:hover {
    background: var(--accent-hover);
}

/* Sticky bar mobile: box PIÙ COMPATTO (meno alto/invasivo) ma testo PIÙ
   GRANDE e leggibile. Override del padding base (hotel-detail.css 12px 18px).
   .sticky-price-bar è già solo mobile (hidden >768px). */
html[data-skin="hoe"] .sticky-price-bar {
    padding-top: 0;
    padding-bottom: 0;
}
html[data-skin="hoe"] .sticky-price-bar .sticky-bottom-row {
    gap: 10px;
    align-items: center;
}
html[data-skin="hoe"] .sticky-price-bar .sticky-btn {
    font-size: 18px;
    font-weight: 800;
    padding: 9px 16px;
    line-height: 1.1;
}
html[data-skin="hoe"] .sticky-price-bar .sticky-price-big,
html[data-skin="hoe"] .sticky-price-bar .sticky-price-amount {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.05;
}
html[data-skin="hoe"] .sticky-price-bar a[href^="tel:"] {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
}

/* "Apri in Google Maps": rimosso su HoEscape (mappa interna sufficiente).
   Resta su InfoIschia/altri portali (partial condiviso). */
html[data-skin="hoe"] .hotel-map-extlink {
    display: none !important;
}