@import url('https://fonts.googleapis.com/css2?family=Arapey:ital,wght@0,400;0,700;1,400&display=swap');

/* ============================================================
   0. GLOBAL PALETTE & RESET  (KEEP HEADER + HERO)
============================================================ */



:root {
    /* Old HBM palette */
    --hbm-deep-teal:   #004047;
    --hbm-deep-teal-2: #00363D;
    --hbm-cream:       #E3E5E0;
    --hbm-brown:       #3A332D;
    --hbm-charcoal:    #181A1B;
    --hbm-gold:        #F4B246;
    --hbm-gold-soft:   #F6C56A;
    --hbm-border-soft: rgba(227,229,224,0.35);
    --hbm-text-soft:   #F5F5F2;

    /* Emerald UI system */
    --emerald: #003c34;
    --emerald-light: #0b7b6c;
    --emerald-dark: #052e25;
    --black-emerald: #050a09;

    /* Gold system */
    --gold-main:  #d6ad61;
    --gold-light: #f3e1b8;

    /* NEW: Gebeta-style dark luxury base */
    --lux-bg:        #0d0f0e;
    --lux-bg-2:      #111615;
    --lux-card:      rgba(17, 21, 20, 0.88);
    --lux-card-2:    rgba(12, 16, 15, 0.92);
    --lux-line:      rgba(214,173,97,0.24);
    --lux-line-2:    rgba(255,255,255,0.08);
    --lux-text:      rgba(245,245,242,0.92);
    --lux-text-dim:  rgba(245,245,242,0.72);

    /* UI */
    --radius-xl: 26px;
    --radius-lg: 20px;
    --radius-md: 14px;
    --card-shadow: 0 30px 90px rgba(0,0,0,0.72);
    --soft-shadow: 0 14px 40px rgba(0,0,0,0.35);

    --maxw: 1180px;
}

/* Hide ONLY theme headers, NOT HBM header */
body.single-hbm_business header:not(.hbm-header-bar),
body.single-hbm_business .site-header,
body.single-hbm_business .ct-header,
body.single-hbm_business #header {
    display: none !important;
}

body.single-hbm_business .site-content,
body.single-hbm_business .content-area,
body.single-hbm_business .entry-content,
body.single-hbm_business .ast-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Remove extra theme wrappers */
body.single-hbm_business .site-content,
body.single-hbm_business .content-area,
body.single-hbm_business .entry-content,
body.single-hbm_business article,
body.single-hbm_business .container,
body.single-hbm_business main {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    display: block !important;
}

body.single-hbm_business .entry-header,
body.single-hbm_business .page-header,
body.single-hbm_business .post-header,
body.single-hbm_business .ct-container,
body.single-hbm_business .wp-block-group {
    display: none !important;
}

/* Global typography + full page background (GEBETA STYLE) */
body.single-hbm_business {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--lux-text);
/* ============================================================
   FORCE LUXURY BACKGROUND — NO OVERRIDE POSSIBLE
============================================================ */


background:
    /* subtle top gold ambience (very soft) */
    radial-gradient(
        900px 400px at 50% -120px,
        rgba(214,173,97,0.22),
        rgba(214,173,97,0.10) 35%,
        transparent 65%
    ),

    /* dark vignette edges (this makes cards pop) */
    radial-gradient(
        circle at center,
        rgba(255,255,255,0.04),
        rgba(0,0,0,0.55) 75%
    ),

    /* matte luxury base — NOT pitch black */
    linear-gradient(
        180deg,
        #141716 0%,
        #181c1b 45%,
        #101211 100%
    );

background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
overflow-x: hidden;

}



/* Wrapper under fixed header */
.hbm-page-wrap {
    padding-bottom: 110px;
    margin-top: 0px;
    position: relative;
}

/* Headings: Arapey serif */
.hbm-page-wrap h1,
.hbm-page-wrap h2,
.hbm-page-wrap h3,
.hbm-page-wrap h4 {
    font-family: 'Arapey', serif;
    letter-spacing: 0.04em;
}/* ================================
   HEADER LANGUAGE FLAGS – SIZE FIX
================================ */

.hbm-header-lang .fi {
    width: 24px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
}

















/* ============================================================
   1. HEADER (PRO + MOBILE READY) — FINAL SAFE BUILD
   Fixes:
   - hamburger visible & clickable
   - menu opens under header (no grey overlay)
   - close icon stays in header
   - no layout jump / no destroy
============================================================ */

:root{
  --hbm-header-h: 72px;
  --hbm-gold:#d6ad61;
  --hbm-gold2:#f3e1b8;
  --hbm-ink:#060a09;
}

/* push content below fixed header */
body{
  padding-top: var(--hbm-header-h);
}

/* BAR */
.hbm-header-bar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--hbm-header-h);

  z-index: 9999999; /* HIGH — always on top */
  background: linear-gradient(180deg, rgba(6,10,9,.94), rgba(6,10,9,.82));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(214,173,97,.32);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

/* GRID */
.hbm-header-inner{
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
  padding: 0 14px;

  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

/* LEFT */
.hbm-header-left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

.hbm-header-logo{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(214,173,97,.42);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

.hbm-logo-text{
  font-family: 'Arapey', serif;
  font-size: 1.05rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hbm-gold2);
  white-space: nowrap;
}

/* CENTER — LANGUAGE */
.hbm-header-lang{
  justify-self: center;
  position: relative;
  z-index: 10000001;
}

.hbm-lang-current{
  display:inline-flex;
  align-items:center;
  gap:10px;

  border: 1px solid rgba(214,173,97,.42);
  background: rgba(255,255,255,.06);
  color: var(--hbm-gold2);

  padding: 8px 14px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 800;
  letter-spacing: .10em;
  cursor: pointer;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

.hbm-lang-list{
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  display: none;

  min-width: 200px;
  overflow: hidden;

  background: rgba(8,12,11,.98);
  border: 1px solid rgba(214,173,97,.22);
  border-radius: 14px;

  box-shadow: 0 24px 70px rgba(0,0,0,.72);
}

.hbm-lang-list a{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;

  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-weight: 700;
}

.hbm-lang-list a:hover{
  background: rgba(214,173,97,.14);
  color: var(--hbm-gold2);
}

.hbm-header-lang.open .hbm-lang-list{ display:block; }

/* RIGHT NAV (DESKTOP) */
.hbm-header-right{
  display:flex;
  align-items:center;
  gap: 12px;
  justify-self: end;
}

.hbm-hbtn{
  font-size: .92rem;
  font-weight: 700;
  color: rgba(245,245,242,.78);
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 8px;
}
.hbm-hbtn:hover{ color:#fff; }

.hbm-cta-green{
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(145deg,#0aa38f,#064f45);
  color:#ecfffb;
  border: 1px solid rgba(10,163,143,.35);
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

.hbm-cta-gold{
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(145deg,#E9DBBD,#CBB682);
  color:#181510;
  border: 1px solid rgba(203,182,130,.55);
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(0,0,0,.32);
}

/* HAMBURGER — ALWAYS IN HEADER RIGHT */
.hbm-hamburger{
  display:none; /* desktop hidden */
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(214,173,97,.35);
  background: rgba(255,255,255,.06);
  cursor:pointer;

  position: relative;
  z-index: 10000002; /* above menu panel */
}

.hbm-hamburger span{
  display:block;
  width: 18px;
  height: 2px;
  background: var(--hbm-gold2);
  margin: 5px auto;
  border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}

/* hamburger -> X when menu open */
body.hbm-menu-open .hbm-hamburger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.hbm-menu-open .hbm-hamburger span:nth-child(2){ opacity:0; }
body.hbm-menu-open .hbm-hamburger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* MOBILE MENU PANEL */
@media (max-width:900px){

  /* hide desktop right links row (we use it as drawer) */
  .hbm-hamburger{ display:flex; align-items:center; justify-content:center; }

  .hbm-header-right{
    position: fixed;
    left: 0;
    right: 0;
    top: var(--hbm-header-h);

    display: none; /* closed by default */
    flex-direction: column;
    gap: 12px;

    padding: 18px 14px 22px;

    background: rgba(6,10,9,.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    border-bottom: 1px solid rgba(214,173,97,.25);

    z-index: 9999998;

    max-height: calc(100vh - var(--hbm-header-h));
    overflow: auto;
  }

  .hbm-header-right.open{ display:flex; }

  .hbm-header-right .hbm-hbtn,
  .hbm-header-right .hbm-cta-green,
  .hbm-header-right .hbm-cta-gold{
    width: min(520px, 100%);
    text-align: center;
  }
}

/* IMPORTANT: kill any pseudo overlays that cause grey screen */
.hbm-header-right::before,
.hbm-header-right::after{
  content: none !important;
  display: none !important;
}

/* OPTIONAL: lock scroll when menu open (professional) */
body.hbm-menu-open{
  overflow: hidden;
}

/* FLAGS */
.hbm-header-lang .fi,
.hbm-lang-list .fi{
  display:inline-block;
  width: 20px;
  height: 14px;
  border-radius: 3px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14);
}
.fi-us{ background-image:url("../flags/4x3/us.svg"); }
.fi-de{ background-image:url("../flags/4x3/de.svg"); }
.fi-fr{ background-image:url("../flags/4x3/fr.svg"); }
.fi-it{ background-image:url("../flags/4x3/it.svg"); }
.fi-se{ background-image:url("../flags/4x3/se.svg"); }
.fi-er{ background-image:url("../flags/4x3/er.svg"); }
.fi-et{ background-image:url("../flags/4x3/et.svg"); }








/* ============================================================
   ✅ HBM LISTING SINGLE (JNEWS) — FULL FIX PACK
   Goal:
   1) REMOVE JNEWS HEADER / STICKY / MOBILE HEADER on SINGLE listing pages
   2) REMOVE ALL extra spacing/holders (gap you marked)
   3) KEEP ONLY your HBM custom header (.hbm-header-bar)
   4) HERO: modern + premium (NOT black UI), Google/Michelin-style SCRIM
   Scope: ONLY listing singles -> body.single-hbm_business
============================================================ */


/* ============================================================
   0) TOKENS
============================================================ */
body.single-hbm_business{
  --hbm-header-h:72px;
  --hbm-gold:#d6ad61;
  --hbm-gold2:#f3e1b8;
  --hbm-ink:#0a0c0b;
  --hbm-txt:#ffffff;
  --hbm-card:rgba(255,255,255,.10);
  --hbm-stroke:rgba(255,255,255,.16);
  --hbm-shadow:0 20px 60px rgba(0,0,0,.45);
}


/* ============================================================
   1) HARD KILL: JNEWS HEADER (DESKTOP + STICKY + MOBILE) + Elementor headers
   (This removes the TOP header you still see)
============================================================ */

/* JNews desktop + sticky */
body.single-hbm_business .jeg_header,
body.single-hbm_business header.jeg_header,
body.single-hbm_business .jeg_header_wrapper,
body.single-hbm_business .jeg_header__wrap,
body.single-hbm_business .jeg_header_container,
body.single-hbm_business .jeg_header_normal,
body.single-hbm_business .jeg_header_sticky,
body.single-hbm_business .jeg_header_sticky_wrapper,
body.single-hbm_business .jeg_sticky_header,
body.single-hbm_business .jeg_stickybar,
body.single-hbm_business .jeg_stickybar_wrapper,
body.single-hbm_business .jeg_topbar,
body.single-hbm_business .jeg_navbar,
body.single-hbm_business .jeg_main_menu,
body.single-hbm_business .jnews-header,
body.single-hbm_business .jnews-header-sticky{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  height:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}

/* JNews mobile header */
body.single-hbm_business .jeg_mobile_wrapper,
body.single-hbm_business .jeg_mobile_nav_wrapper,
body.single-hbm_business .jeg_mobile_menu_wrapper,
body.single-hbm_business .jeg_mobile_header,
body.single-hbm_business .jeg_mobile_topbar,
body.single-hbm_business .jeg_mobile_header_wrapper{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  height:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}

/* Elementor / WP template headers (just in case) */
body.single-hbm_business header#masthead,
body.single-hbm_business #masthead,
body.single-hbm_business .site-header,
body.single-hbm_business .elementor-location-header,
body.single-hbm_business .wp-block-template-part,
body.single-hbm_business .ast-header-sticky-active,
body.single-hbm_business .ast-primary-header-bar,
body.single-hbm_business .ast-header-break-point{
  display:none !important;
  height:0 !important;
  overflow:hidden !important;
}


/* ============================================================
   2) REMOVE ALL “HOLDER / PLACEHOLDER / GAP” ELEMENTS
   (This is the empty spacing you marked)
============================================================ */
body.single-hbm_business .jeg_header_sticky_holder,
body.single-hbm_business .jeg_sticky_holder,
body.single-hbm_business .jeg_sticky--holder,
body.single-hbm_business .jeg_header_placeholder,
body.single-hbm_business .jeg_sticky_placeholder,
body.single-hbm_business .sticky-wrapper,
body.single-hbm_business .header-sticky,
body.single-hbm_business .sticky-header{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* Remove theme top padding/margins that push content down */
body.single-hbm_business,
body.single-hbm_business #page,
body.single-hbm_business .site,
body.single-hbm_business .jeg_main,
body.single-hbm_business .jeg_main_content,
body.single-hbm_business .container,
body.single-hbm_business .content-inner{
  margin-top:0 !important;
  padding-top:0 !important;
}


/* ============================================================
   3) YOUR CUSTOM HEADER — FORCE ON TOP + SINGLE SPACING
============================================================ */

/* Ensure YOUR header is always above everything */
body.single-hbm_business .hbm-header-bar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  height:var(--hbm-header-h) !important;
  z-index:2147483647 !important;
}

/* Add ONLY one offset for your fixed header */
body.single-hbm_business{
  padding-top:var(--hbm-header-h) !important;
}


/* ============================================================
   4) HERO — MODERN PREMIUM + RATING INSIDE HERO (TOP-LEFT)
   - Elegant line accent (top-left)
   - Rating pill sits on hero (not sticky on page)
   - Bigger premium typography + spacing
============================================================ */

/* ============================================================
   HERO — MOBILE FIX (no gap, no overflow, better sizing)
============================================================ */
@media (max-width: 720px){

  /* HERO wrapper: reduce height + add safe top for sticky header */
  body.single-hbm_business .hbm-hero{
    min-height: 72vh !important;                 /* was too tall on phones */
    padding: 12px 12px 18px !important;          /* small padding works on mobile */
    background-position: center top !important;  /* better crop */
  }

  /* HERO INNER: full width, less padding, smaller radius */
  body.single-hbm_business .hbm-hero-inner{
    width: calc(100% - 16px) !important;
    margin: 0 auto !important;
    border-radius: 20px !important;
    padding: 18px 14px 14px !important;

    /* stronger readability on mobile photos */
    background:
      linear-gradient(180deg, rgba(10,12,11,.68), rgba(10,12,11,.42) 60%, rgba(10,12,11,.28)),
      rgba(255,255,255,.04) !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  /* Title scaling (prevents huge card + weird gaps) */
  body.single-hbm_business .hbm-hero-title{
    font-size: clamp(28px, 9vw, 44px) !important;
    line-height: 1.05 !important;
    margin: 8px 0 10px !important;
  }

  body.single-hbm_business .hbm-hero-subtitle{
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin-bottom: 12px !important;
  }

  body.single-hbm_business .hbm-hero-address{
    font-size: 13px !important;
    margin-bottom: 14px !important;
  }

  /* CTA buttons: stack nicely */
  body.single-hbm_business .hbm-hero-cta-center{
    gap: 10px !important;
  }
  body.single-hbm_business .hbm-hero .hbm-hero-cta{
    width: 100% !important;
    max-width: 420px !important;
    justify-content: center !important;
  }
}

/* ============================================================
   HBM SINGLE — HERO (PRO / MODERN / CLEAN TOP)
   Fixes:
   - removes “galaxy strip” behind header/hero
   - cinematic hero image with proper top fade
   - premium glass card (crisp text, blur behind)
   - buttons modern
   - rating small + integrated
============================================================ */

/* 0) NEVER show galaxy behind hero area */
/* FORCE gradient on the real page canvas (theme-safe) */
html, body{
  height: 100%;
}

body.single-hbm_business,
body.single-hbm_business #page,
body.single-hbm_business .site,
body.single-hbm_business .site-content{
  background-image:
    radial-gradient(900px 520px at 15% 10%, rgba(10,163,143,.40), transparent 60%),
    radial-gradient(900px 520px at 85% 15%, rgba(203,182,130,.12), transparent 62%),
    linear-gradient(135deg, #000000 0%, #edd098 48%, #071012 100%) !important;

  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: scroll !important; /* FIX: avoid “tiling/stripes” effect */
  background: 
  radial-gradient(900px 520px at 18% 12%, rgba(10,163,143,.35), transparent 62%),
  radial-gradient(900px 520px at 82% 14%, rgba(214,173,97,.14), transparent 64%),
  linear-gradient(135deg, #000000 0%, #0b2a6b 42%, #edd098 100%) !important;      /* fallback */
}

/* 1) HERO wrapper: creates its own clean top zone */
body.single-hbm_business .hbm-hero{
  position:relative;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden;
}

/* hard top cover (kills the visible galaxy strip above hero) */
body.single-hbm_business .hbm-hero::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-140px;
  height:240px;
  background: linear-gradient(180deg, rgba(7,10,10,.98) 0%, rgba(7,10,10,.92) 55%, rgba(7,10,10,0) 100%);
  z-index:0;
  pointer-events:none;
}

/* 2) HERO INNER: modern cinematic module */
body.single-hbm_business .hbm-hero-inner{
  position:relative;
  z-index:1;

  width:min(1320px, calc(100% - 32px));
  margin: 0 auto;

  border-radius: 30px;
  overflow:hidden;

  /* IMPORTANT: don’t paint “background:” here if you have an image behind */
  background: transparent;

  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 34px 120px rgba(0,0,0,.72);

  /* make hero feel premium and full */
  padding: clamp(18px, 2.2vw, 28px);
}

/* cinematic overlay across the hero image/collage */
body.single-hbm_business .hbm-hero-inner::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  background:
    /* top fade (clean under header) */
    linear-gradient(180deg,
      rgba(7,10,10,.88) 0%,
      rgba(7,10,10,.22) 42%,
      rgba(7,10,10,.78) 100%
    ),
    /* subtle premium tint */
    radial-gradient(900px 420px at 20% 12%, rgba(214,173,97,.10), transparent 62%),
    radial-gradient(900px 420px at 82% 12%, rgba(10,163,143,.08), transparent 62%);
}

/* ensure hero content above overlay */
body.single-hbm_business .hbm-hero-inner > *{
  position:relative;
  z-index:1;
}

/* 3) HERO CARD: REAL premium glass (crisp text) */
body.single-hbm_business .hbm-hero-inner .hbm-hero-content,
body.single-hbm_business .hbm-hero-inner .hbm-hero-center,
body.single-hbm_business .hbm-hero-inner .hbm-hero-wrap{
  position:relative;
  max-width: 980px;
  margin: 0 auto;

  border-radius: 26px;
  padding: clamp(20px, 2.4vw, 32px);

  /* clean glass base */
  background: rgba(12,14,14,.52);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 26px 90px rgba(0,0,0,.62);
}

/* blur only BEHIND the card (not text) */
body.single-hbm_business .hbm-hero-inner .hbm-hero-content::before,
body.single-hbm_business .hbm-hero-inner .hbm-hero-center::before,
body.single-hbm_business .hbm-hero-inner .hbm-hero-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);

  /* add depth */
  background: linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.10));
}

/* keep card content above its blur layer */
body.single-hbm_business .hbm-hero-inner .hbm-hero-content > *,
body.single-hbm_business .hbm-hero-inner .hbm-hero-center > *,
body.single-hbm_business .hbm-hero-inner .hbm-hero-wrap > *{
  position:relative;
  z-index:1;
}

/* 4) Typography: crisp + high contrast (fix “washed title”) */
body.single-hbm_business .hbm-hero-title{
  text-align:center;
  margin: 10px auto 10px;

  font-family: "Playfair Display", serif;
  font-weight: 900;
  letter-spacing: .12px;
  line-height: 1.03;

  font-size: clamp(34px, 5vw, 66px);
  color: #FFF1C9;

  /* sharper and more premium than the muddy shadow */
  text-shadow:
    0 2px 0 rgba(0,0,0,.35),
    0 18px 70px rgba(0,0,0,.72);
}

body.single-hbm_business .hbm-hero-subtitle{
  text-align:center;
  margin: 0 auto 14px;
  max-width: 920px;
  font-size: clamp(15px, 2vw, 19px);
  line-height: 1.6;
  color: rgba(255,255,255,.88);
}

body.single-hbm_business .hbm-hero-address{
  text-align:center;
  margin: 0 auto 18px;
  max-width: 920px;
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,255,255,.84);
}

/* 5) Badges: modern, clean */
body.single-hbm_business .hbm-hero-badge-row{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin: 6px 0 14px;
}

body.single-hbm_business .hbm-hero .hbm-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .18px;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
}

body.single-hbm_business .hbm-hero .hbm-pill--accent{
  background: rgba(214,173,97,.16);
  border-color: rgba(214,173,97,.38);
  color: #FFF1C9;
}

/* 6) CTAs: modern button system (less 2010, more product UI) */
body.single-hbm_business .hbm-hero-cta-center{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 10px;
}

body.single-hbm_business .hbm-hero .hbm-hero-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 16px;

  font-size: 14px;
  font-weight: 900;
  text-decoration:none;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.94);

  box-shadow: 0 16px 48px rgba(0,0,0,.52);
  transition: transform .14s ease, filter .14s ease, border-color .14s ease;
}

body.single-hbm_business .hbm-hero .hbm-hero-cta:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  border-color: rgba(255,255,255,.24);
}

body.single-hbm_business .hbm-hero .hbm-hero-cta-gold{
  background: linear-gradient(135deg, #E9DBBD, #CBB682);
  border-color: rgba(203,182,130,.75);
  color: #181510;
}

body.single-hbm_business .hbm-hero .hbm-hero-cta-green{
  background: linear-gradient(135deg, #0aa38f, #064f45);
  border-color: rgba(10,163,143,.48);
  color: #ECFFFB;
}

body.single-hbm_business .hbm-hero .hbm-hero-cta-ghost{
  background: rgba(0,0,0,.22);
  border-color: rgba(214,173,97,.28);
  color: #FFF1C9;
}

/* 7) Rating: small + premium, integrated (not sitting on galaxy) */
body.single-hbm_business .hbm-rating-pill{
  position:absolute;
  top: 14px;
  left: 14px;
  z-index: 5;

  display:inline-flex;
  align-items:center;
  gap:8px;

  padding: 6px 9px;
  border-radius: 999px;

  background: rgba(10,12,12,.46);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  color: rgba(255,255,255,.94);
  text-decoration:none;
}

body.single-hbm_business .hbm-rating-chip{
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .18px;

  background: rgba(214,173,97,.18);
  border: 1px solid rgba(214,173,97,.34);
  color: #FFF1C9;
}

/* ===== RATING LINE — elegant typography ===== */
body.single-hbm_business .hbm-rating-score{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  line-height:1;
}

/* 4.3 in elegant gold */
body.single-hbm_business .hbm-rating-num{
  font-size: 15px;
  font-weight: 950;
  letter-spacing: .12px;
  color: #F4E6C1;
  text-shadow: 0 10px 26px rgba(0,0,0,.45);
}

/* “/5” subtle */
body.single-hbm_business .hbm-rating-max{
  font-size: 12px;
  font-weight: 800;
  opacity: .70;
  color: rgba(255,255,255,.86);
}

/* reviews line (smaller + clean) */
body.single-hbm_business .hbm-rating-count{
  font-size: 12px;
  font-weight: 750;
  opacity: .78;
  color: rgba(255,255,255,.84);
  margin-left: 6px;
  padding-left: 10px;
  position: relative;
}

/* small dot separator before review count */
body.single-hbm_business .hbm-rating-count::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  opacity:.55;
  color: rgba(214,173,97,.90);
}

/* keep bar hidden */
body.single-hbm_business .hbm-rating-bar,
body.single-hbm_business .hbm-rating-bar-fill{
  display:none !important;
}

/* 8) Mobile */
@media (max-width: 720px){
  body.single-hbm_business .hbm-hero-inner{
    width: calc(100% - 20px);
    padding: 40px;
    border-radius: 22px;
    top: 0px;
  }
  body.single-hbm_business .hbm-hero-inner .hbm-hero-content,
  body.single-hbm_business .hbm-hero-inner .hbm-hero-center,
  body.single-hbm_business .hbm-hero-inner .hbm-hero-wrap{
    padding: 18px 14px 16px;
    border-radius: 20px;
  }
  body.single-hbm_business .hbm-rating-pill{
    top: 10px;
    left: 10px;
  }
}












/* ============================================================
   6) MOBILE / SMALL — STACK PERFECT
============================================================ */
@media (max-width: 520px){

  body.single-hbm_business .hbm-hero-inner{
    padding:18px 14px 16px !important;
    border-radius:18px !important;
  }

  body.single-hbm_business .hbm-hero-cta-center{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  body.single-hbm_business .hbm-hero .hbm-hero-cta{
    width:100% !important;
    max-width:420px !important;
    margin:0 auto !important;
    padding:15px 18px !important;
    border-radius:18px !important;
    font-size:1rem !important;
  }
}


/* ============================================================
   7) OPTIONAL: HIDE JNEWS FOOTER ON LISTING SINGLE
============================================================ */
body.single-hbm_business .jeg_footer,
body.single-hbm_business footer.jeg_footer,
body.single-hbm_business .jeg_footer_wrapper,
body.single-hbm_business .jeg_footer_content,
body.single-hbm_business .jeg_footer_bottom,
body.single-hbm_business .jnews-footer,
body.single-hbm_business .site-footer,
body.single-hbm_business #jeg_footer,
body.single-hbm_business #footer{
  display:none !important;
  height:0 !important;
  overflow:hidden !important;
}




/* ============================================================
   3. SECTION BOXES (YOUR .hbm-section-box) — GEBETA CARD LOOK
============================================================ */

.hbm-section-box {
    max-width: var(--maxw);
    padding: 58px 54px 52px;
    border-radius: var(--radius-xl);
    margin: 70px auto;

    background:
        radial-gradient(circle at 20% 0%, rgba(214,173,97,0.10), transparent 55%),
        radial-gradient(circle at 90% 110%, rgba(0,0,0,0.65), transparent 60%),
        linear-gradient(160deg, rgba(17,21,20,0.90), rgba(12,16,15,0.96));
    box-shadow:
        0 36px 95px rgba(0,0,0,0.80),
        inset 0 0 40px rgba(0,0,0,0.40);
    border: 1px solid rgba(214,173,97,0.24);

    color: rgba(245,245,242,0.92);
    position: relative;
    overflow: hidden;

    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.hbm-section-box:hover {
    transform: translateY(-6px);
    border-color: rgba(214,173,97,0.42);
    box-shadow:
        0 45px 110px rgba(0,0,0,0.88),
        0 0 28px rgba(214,173,97,0.12),
        inset 0 0 40px rgba(0,0,0,0.45);
}

/* SECTION TITLES (gold, center) */
.hbm-section-title {
    text-align: center;
    font-size: 2.05rem;
    margin: 0 0 30px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-light);
    text-shadow:
        0 0 12px rgba(214,173,97,0.25),
        0 18px 60px rgba(0,0,0,0.65);
}

.hbm-section-title::after {
    content: "";
    width: 120px;
    height: 2px;
    margin: 16px auto 0;
    background: linear-gradient(90deg, transparent, rgba(214,173,97,0.85), transparent);
    display: block;
    border-radius: 99px;
}

/* muted text */
.hbm-text-muted {
    font-size: 1.05rem;
    line-height: 1.85;
    color: rgba(245,245,242,0.84);
    max-width: 920px;
    margin: 0 auto 10px;
}

/* ============================================================
   4. ACTIONS (Call / Order) IN SECTION 4
============================================================ */

.hbm-box-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.hbm-primary-btn,
.hbm-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 1.02rem;
    font-weight: 800;
    padding: 14px 30px;
    text-decoration: none;
    transition: 0.25s ease;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 5px 1px rgb(214, 173, 97);
}

.hbm-primary-btn {
    background: linear-gradient(145deg, var(--gold-main), #fff);
    color: #120b05 !important;
}
.hbm-primary-btn:hover { transform: translateY(-3px); filter: brightness(1.05); }

.hbm-secondary-btn {
    background: rgba(0,0,0,0.28);
    color: var(--gold-light) !important;
    border-color: rgba(214,173,97,0.28);
}
.hbm-secondary-btn:hover { transform: translateY(-2px); background: rgb(250, 250, 250); }

/* ============================================================
   5. INFO GRID + INFO BLOCKS (HOURS + CONTACT) — PRO FINAL
============================================================ */

/* grid */
.hbm-info-grid{
  max-width: var(--maxw);
  margin: 0 auto 70px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:26px;
}
@media (max-width: 960px){
  .hbm-info-grid{
    grid-template-columns: 1fr;
    gap:18px;
    padding: 0 16px;
  }
}

/* card */
.hbm-info-block{
  background:
    radial-gradient(circle at 20% 0%, rgba(214,173,97,0.10), transparent 55%),
    linear-gradient(160deg, rgba(17,21,20,0.92), rgba(12,16,15,0.97));
  border-radius: var(--radius-xl);
  padding: 28px 30px;
  border: 1px solid rgba(214,173,97,0.24);
  box-shadow:
    0 28px 80px rgba(0,0,0,0.78),
    inset 0 0 22px rgba(0,0,0,0.40);
  color: rgba(245,245,242,0.92);
  position: relative;
  overflow: hidden;
}

/* title */
.hbm-info-block h3{
  font-size: 1.10rem;
  font-weight: 900;
  margin: 0 0 14px;
  color: var(--gold-light, #f3e1b8);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* subtle top shine */
.hbm-info-block::after{
  content:"";
  position:absolute;
  left:-20%;
  top:-35%;
  width:140%;
  height:80%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), transparent 55%);
  pointer-events:none;
}

/* ---------- LIVE OPEN/CLOSED ---------- */
.hbm-hours-live{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.06);
  margin: 0 0 14px;
}
.hbm-hours-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(180,180,180,0.75);
  box-shadow: 0 0 0 4px rgba(180,180,180,0.12);
}
.hbm-hours-live-text{
  font-size: 0.95rem;
  color: rgba(245,245,242,0.82);
  font-weight: 650;
}
.hbm-hours-live.is-open .hbm-hours-dot{
  background: rgba(80,220,150,0.95);
  box-shadow: 0 0 0 4px rgba(80,220,150,0.14);
}
.hbm-hours-live.is-closed .hbm-hours-dot{
  background: rgba(240,120,120,0.95);
  box-shadow: 0 0 0 4px rgba(240,120,120,0.14);
}

/* helper text */
.hbm-hours-sub{
  font-size: 0.92rem;
  color: rgba(245,245,242,0.70);
  margin: 0 0 12px;
}

/* ---------- HOURS TABLE ---------- */
.hbm-hours-table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(0,0,0,0.26);
  border-radius: 16px;
  overflow:hidden;
  font-size: 0.95rem;
  border: 1px solid rgba(255,255,255,0.06);
}
.hbm-hours-table tr{
  background: rgba(0,0,0,0.36);
}
.hbm-hours-table tr:nth-child(even){
  background: rgba(0,0,0,0.46);
}
.hbm-hours-table td{
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hbm-hours-table tr:last-child td{ border-bottom:none; }

/* ✅ IMPORTANT: kill any "0..6" index column if it ever appears */
.hbm-hours-table td:first-child{
  /* if your PHP is correct, this does nothing.
     if your PHP accidentally prints index column, it hides it. */
}
.hbm-hours-table.has-index td:first-child{
  display:none !important;
}

/* columns */
.hbm-hours-day{
  font-weight: 800;
  color: rgba(243,225,184,0.92);
  letter-spacing: 0.02em;
}
.hbm-hours-time{
  text-align:right;
  color: rgba(220,230,235,0.92);
  white-space: nowrap;
  font-weight: 650;
}

/* TODAY highlight */
.hbm-today-row{
  background: rgba(214,173,97,0.14) !important;
  box-shadow: inset 3px 0 0 rgba(214,173,97,0.95);
}
.hbm-today-badge{
  padding: 2px 7px;
  margin-left: 8px;
  font-size: 11px;
  border-radius: 7px;
  background: rgba(214,173,97,0.18);
  border: 1px solid rgba(214,173,97,0.35);
  color: rgba(214,173,97,0.95);
}

/* muted */
.hbm-text-muted{
  margin: 0;
  color: rgba(245,245,242,0.70);
  font-size: 0.95rem;
}

/* ---------- CONTACT LIST (keep, just polish) ---------- */
.hbm-contact-list{
  list-style:none;
  margin: 12px 0 0;
  padding:0;
  font-size: 0.98rem;
}
.hbm-contact-list li{
  display:flex;
  gap:14px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
  align-items:flex-start;
}
.hbm-contact-list li:last-child{ border-bottom:none; }

.hbm-label{
  min-width: 92px;
  font-weight: 900;
  color: rgba(243,225,184,0.88);
  letter-spacing: 0.02em;
}

.hbm-contact-list a{
  color: rgba(214,173,97,0.95);
  text-decoration: none;
  font-weight: 750;
}
.hbm-contact-list a:hover{
  text-decoration: underline;
}

/* ---------- MOBILE ---------- */
@media (max-width: 768px){
  .hbm-info-grid{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 14px;
    margin-bottom: 50px;
  }

  .hbm-info-block{
    padding: 20px 18px;
    border-radius: 20px;
    box-shadow: 0 20px 55px rgba(0,0,0,0.75);
  }

  .hbm-info-block h3{
    font-size: 1.02rem;
    letter-spacing: 0.14em;
    margin-bottom: 12px;
  }

  .hbm-hours-table{
    font-size: 0.88rem;
  }
  .hbm-hours-table td{
    padding: 9px 10px;
  }

  .hbm-contact-list li{
    gap:10px;
    font-size: 0.92rem;
    flex-wrap: wrap;
  }

  .hbm-label{
    min-width: auto;
    font-size: 0.85rem;
  }
}


/* ============================================================
   6. RESERVATION FORM (YOUR .hbm-res-form)
============================================================ */

.hbm-res-form {
    max-width: 780px;
    margin: 0 auto;
}

.hbm-res-form label {
    display: block;
    margin: 12px 0 6px;
    font-weight: 700;
    color: rgba(245,245,242,0.82);
}

.hbm-res-form input[type="text"],
.hbm-res-form input[type="date"],
.hbm-res-form input[type="time"],
.hbm-res-form input[type="number"],
.hbm-res-form input[type="email"],
.hbm-res-form textarea,
.hbm-res-form select {
    width: 100%;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid rgba(214,173,97,0.18);
    background: rgba(0,0,0,0.35);
    color: rgba(245,245,242,0.92);
    outline: none;
    box-shadow: inset 0 0 0 999px rgba(0,0,0,0.00);
}

.hbm-res-form input:focus,
.hbm-res-form textarea:focus,
.hbm-res-form select:focus {
    border-color: rgba(214,173,97,0.45);
    box-shadow: 0 0 0 3px rgba(214,173,97,0.10);
}

.hbm-res-form button[type="submit"] {
    margin-top: 18px;
    width: 100%;
    padding: 14px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(145deg, var(--gold-main), #b88a3a);
    color: #120b05;
    font-weight: 900;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 22px 60px rgba(0,0,0,0.72);
    transition: 0.25s ease;
}
.hbm-res-form button[type="submit"]:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}







/* ============================================================
   8. LOCATION + NEARBY (YOUR .hbm-box-row + map + list)
============================================================ */

.hbm-box-row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
    gap: 26px;
}

@media (max-width: 960px) {
    .hbm-box-row { grid-template-columns: 1fr; }
}

#hbm-map {
    border-radius: 14px;
    border: 1px solid rgba(214,173,97,0.22);
    box-shadow: 0 18px 50px rgba(0,0,0,0.70);
}

/* Nearby list scroll (Gebeta-style vertical list) */
.hbm-nearby-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
    max-height: 520px;
    overflow-y: auto;
    padding-right: 6px;
}

/* scrollbar (nice) */
.hbm-nearby-list::-webkit-scrollbar { width: 10px; }
.hbm-nearby-list::-webkit-scrollbar-thumb {
    background: rgba(214,173,97,0.22);
    border-radius: 99px;
    border: 2px solid rgba(0,0,0,0.30);
}
.hbm-nearby-list::-webkit-scrollbar-track { background: rgba(0,0,0,0.20); border-radius: 99px; }

.hbm-nearby-heading {
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--gold-light);
    margin: 0 0 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hbm-nearby-card {
    background:
        radial-gradient(circle at 20% 0%, rgba(214,173,97,0.08), transparent 55%),
        linear-gradient(160deg, rgba(0,0,0,0.35), rgba(0,0,0,0.18));
    border-radius: 16px;
    padding: 10px 12px;
    border: 1px solid rgba(214,173,97,0.20);
    box-shadow: 0 16px 45px rgba(0,0,0,0.70);
    transition: 0.22s ease;
}

.hbm-nearby-card:hover {
    transform: translateY(-2px);
    border-color: rgba(214,173,97,0.36);
    box-shadow: 0 22px 60px rgba(0,0,0,0.82);
}

.hbm-nearby-card a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.hbm-nearby-img-wrap img {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid rgba(214,173,97,0.30);
    box-shadow: 0 10px 26px rgba(0,0,0,0.65);
}

.hbm-nearby-info { flex: 1; }

.hbm-nearby-title {
    font-size: 0.98rem;
    font-weight: 900;
    margin: 0 0 4px;
    color: rgba(245,245,242,0.95);
}

.hbm-nearby-meta {
    font-size: 0.82rem;
    color: rgba(245,245,242,0.70);
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.hbm-meta-dot { opacity: 0.55; }
.hbm-meta-rating { font-weight: 800; color: rgba(244,192,69,0.95); }

@media (max-width: 520px) {
    .hbm-nearby-img-wrap img { width: 62px; height: 62px; }
}




/* ============================================================
   10. SMALL FIXES (FOR CLEAN LOOK)
============================================================ */

.hbm-section-box,
.hbm-menu-contact-row,
.hbm-info-grid {
    padding-left: 16px;
    padding-right: 16px;
}

.hbm-section-box { padding-left: 54px; padding-right: 54px; }
@media (max-width: 768px) {
    .hbm-section-box { padding: 34px 22px 30px; }
}

/* Make sure buttons in header stay clickable */
.hbm-header-right button { -webkit-appearance: none; appearance: none; }

/* prevent leaflet from breaking card corners */
.leaflet-container { border-radius: 14px; }

/* FULL WIDTH CANVAS LAYER */
.hbm-page-wrap::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;

    background:
        radial-gradient(1200px 600px at 50% 0%, rgba(214,173,97,0.10), transparent 65%),
        linear-gradient(180deg, #0b0d0d 0%, #0f1111 45%, #0a0c0c 100%);

    pointer-events: none;
}

/* ============================================================
   HERO BOOKING HIGHLIGHT — MODERN PREMIUM
============================================================ */

.hbm-hero-booking{
    margin-top: 60px;
    padding: clamp(28px,4vw,42px);
    border-radius: 26px;

    background:
        radial-gradient(600px 240px at 85% 10%, rgba(214,173,97,.18), transparent 65%),
        linear-gradient(160deg, rgba(12,18,16,.92), rgba(6,10,9,.97));

    border: 1px solid rgba(214,173,97,.24);
    box-shadow:
        0 40px 120px rgba(0,0,0,.75),
        inset 0 1px 0 rgba(255,255,255,.05);

    backdrop-filter: blur(10px);
}

/* GRID LAYOUT */
.hbm-booking-inner{
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    align-items: center;
    gap: clamp(24px,4vw,60px);
}

/* ---------------- TEXT SIDE ---------------- */

.hbm-booking-eyebrow{
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    color: rgba(214,173,97,.9);
}

.hbm-booking-title{
    margin: 10px 0 14px;
    font-size: clamp(22px,2.4vw,32px);
    font-weight: 700;
    color: #fff;
}

.hbm-booking-desc{
    max-width: 480px;
    line-height: 1.65;
    color: rgba(240,240,240,.82);
    font-size: 15px;
}

/* CTA BUTTON */
.hbm-booking-btn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 14px 26px;
    border-radius: 999px;

    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    color: #111;

    background: linear-gradient(135deg, #e9dbbd, #d6ad61);
    box-shadow:
        0 12px 34px rgba(214,173,97,.35);

    transition: all .25s ease;
}

.hbm-booking-btn:hover{
    transform: translateY(-2px);
    box-shadow:
        0 18px 46px rgba(214,173,97,.45);
}

/* ---------------- BADGE SIDE ---------------- */

.hbm-booking-badge{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* CIRCLE HOLDER */
.hbm-circle-wrap{
    width: clamp(180px,20vw,240px);
    height: clamp(180px,20vw,240px);
    position: relative;
    border-radius: 50%;
}

/* ROTATING TEXT */
.hbm-circle-rotator{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: hbm-spin 22s linear infinite;
}

.hbm-circle-rotator text{
    font-family: 'Arapey', serif;
    font-size: 13px;
    letter-spacing: 3px;
    fill: rgba(214,173,97,.95);
}

/* CENTER LOGO */
.hbm-circle-image{
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: clamp(85px,9vw,120px);
    height: clamp(85px,9vw,120px);
    object-fit: contain;
    border-radius: 50%;
    padding: 10px;

    background: rgba(0,0,0,.35);
    border: 1px solid rgba(214,173,97,.35);
    box-shadow:
        0 20px 60px rgba(0,0,0,.6);
    z-index: 2;
}

/* OUTER RING GLOW */
.hbm-circle-wrap::after{
    content:"";
    position:absolute;
    inset: 14px;
    border-radius:50%;
    border:1px solid rgba(214,173,97,.25);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.05),
        0 0 30px rgba(214,173,97,.15);
}

/* SPIN ANIMATION */
@keyframes hbm-spin{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
}

/* ============================
   MOBILE
============================ */

@media (max-width: 900px){
    .hbm-booking-inner{
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hbm-booking-desc{
        margin: 0 auto;
    }

    .hbm-booking-badge{
        margin-top: 28px;
    }
}




/* ============================================================
   VALUES SECTION — CLEAN MODERN PREMIUM
============================================================ */

.hbm-values-section{
    max-width: 1200px;
    margin: 110px auto;
    padding: 0 24px;
}

.hbm-values-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 50px;
}

/* CARD */
.hbm-value-block{
    text-align: center;
    padding: 46px 36px;
    border-radius: 28px;

    background:
        linear-gradient(160deg, rgba(18,22,21,.92), rgba(8,10,9,.98));

    border: 1px solid rgba(214,173,97,.18);

    box-shadow:
        0 36px 120px rgba(0,0,0,.8);

    transition: all .35s ease;
}

.hbm-value-block:hover{
    transform: translateY(-8px);
    box-shadow:
        0 50px 140px rgba(0,0,0,.9),
        0 0 40px rgba(214,173,97,.12);
}

/* ICON */
.hbm-value-icon{
    display:inline-flex;
    width:48px;
    height:48px;
    margin-bottom:22px;
}

.hbm-value-icon svg{
    width:100%;
    height:100%;
    fill:#d6ad61;
    filter: drop-shadow(0 6px 18px rgba(214,173,97,.35));
}

/* TITLE */
.hbm-value-title{
    font-family:'Arapey',serif;
    font-size:1.5rem;
    letter-spacing:.06em;
    margin:0 0 16px;
    color:#e9dbbd;
}

/* TEXT */
.hbm-value-text{
    font-size:.96rem;
    line-height:1.7;
    color:rgba(240,240,240,.82);
}

/* RESPONSIVE */
@media (max-width: 900px){
    .hbm-values-grid{
        grid-template-columns:1fr;
        gap:32px;
    }
}











/* ============================================================
   ALLERGY NOTICE — PREMIUM AUTO SLIDER (FINAL)
============================================================ */

.hbm-allergy-note{
  max-width:1100px;
  margin:28px auto 0;
  padding:0 14px;
}

/* MAIN BOX */
.hbm-allergy-inner{
  position:relative;
  overflow:hidden;
  border-radius:18px;

  background:
    radial-gradient(900px 260px at 20% 20%, rgba(214,173,97,.18), transparent 60%),
    linear-gradient(135deg, #021b1f 0%, #042c2f 55%, #021b1f 100%);

  /* STRONG BORDER */
  border:1.6px solid rgba(214,173,97,.75);

  box-shadow:
    0 18px 55px rgba(0,0,0,.6),
    0 0 0 1px rgba(214,173,97,.35),
    inset 0 0 0 1px rgba(255,255,255,.06);

  transition: box-shadow .4s ease, border-color .4s ease;
}

/* GOLD HOVER GLOW */
.hbm-allergy-inner:hover{
  border-color: rgba(214,173,97,.95);
  box-shadow:
    0 22px 70px rgba(0,0,0,.7),
    0 0 0 1px rgba(214,173,97,.8),
    0 0 22px rgba(214,173,97,.35),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

/* EDGE FADE */
.hbm-allergy-inner::before,
.hbm-allergy-inner::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:70px;
  z-index:2;
  pointer-events:none;
}
.hbm-allergy-inner::before{
  left:0;
  background:linear-gradient(90deg,#021b1f,rgba(2,27,31,0));
}
.hbm-allergy-inner::after{
  right:0;
  background:linear-gradient(270deg,#021b1f,rgba(2,27,31,0));
}

/* SLIDER TRACK */
.hbm-allergy-track{
  display:flex;
  gap:16px;
  padding:18px;
  width:max-content;
  animation:hbmAllergyLoop 14s linear infinite;
}

/* PAUSE ON HOVER */
.hbm-allergy-inner:hover .hbm-allergy-track{
  animation-play-state:paused;
}

/* SLIDE ANIMATION */
@keyframes hbmAllergyLoop{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* CARD */
.hbm-allergy-card{
  min-width:520px;
  max-width:520px;
  padding:18px 18px 16px;
  border-radius:16px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));

  border:1px solid rgba(255,255,255,.08);

  color:#f1f1f1;
}

/* BADGE */
.hbm-allergy-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.6px;
  text-transform:uppercase;
  padding:7px 12px;
  border-radius:999px;

  background:rgba(214,173,97,.15);
  border:1px solid rgba(214,173,97,.55);
  color:#d6ad61;
  margin-bottom:10px;
}

/* TITLE */
.hbm-allergy-card h3{
  margin:0 0 8px;
  font-size:18px;
  color:#ffe6b0;
}

/* TEXT */
.hbm-allergy-card p{
  margin:0 0 10px;
  font-size:14px;
  line-height:1.55;
  color:rgba(255,255,255,.8);
}

/* SIGNATURE */
.hbm-allergy-sign{
  font-size:13px;
  font-weight:600;
  color:#d6ad61;
}

/* MOBILE */
@media (max-width:768px){
  .hbm-allergy-card{
    min-width:85vw;
    max-width:85vw;
  }
}




.hbm-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  max-width:900px;
  margin:48px auto;
}

.hbm-divider::before,
.hbm-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(214,173,97,.35),
    rgba(214,173,97,.9),
    rgba(214,173,97,.35),
    transparent
  );
}

/* Mesob icon (woven basket look) */
.hbm-mesob{
  width:54px;
  height:54px;
  border-radius:50%;
  position:relative;

  border:1px solid rgba(214,173,97,.75);
  box-shadow:0 10px 22px rgba(0,0,0,.45);

  background:
    radial-gradient(circle at 50% 35%, rgba(214,173,97,.28), rgba(214,173,97,.06) 60%),
    repeating-conic-gradient(
      from 0deg,
      rgba(214,173,97,.95) 0 10deg,
      rgba(2,27,31,1) 10deg 20deg
    );
}

/* inner ring like basket edge */
.hbm-mesob::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:50%;
  border:1px solid rgba(214,173,97,.55);
  background:
    repeating-radial-gradient(
      circle,
      rgba(214,173,97,.15) 0 2px,
      rgba(2,27,31,0) 2px 5px
    );
}

/* small top cap (mesob lid feeling) */
.hbm-mesob::after{
  content:"";
  position:absolute;
  left:50%;
  top:-6px;
  transform:translateX(-50%);
  width:22px;
  height:10px;
  border-radius:0 0 12px 12px;
  border:1px solid rgba(214,173,97,.65);
  background:linear-gradient(180deg, rgba(214,173,97,.35), rgba(2,27,31,.9));
}



/* ===============================
   GASH(A) / JEBENA DIVIDER — V2
================================ */

.hbm-divider-gasha{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  max-width:820px;
  margin:60px auto;
}

/* Gold gradient lines */
.hbm-divider-gasha::before,
.hbm-divider-gasha::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(214,173,97,.25),
    rgba(214,173,97,.9),
    rgba(214,173,97,.25),
    transparent
  );
}

/* =====================================
   HABESHA MESOB DIVIDER
===================================== */

.hbm-divider-mesob{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  max-width:880px;
  margin:56px auto;
}

/* side lines */
.hbm-divider-mesob::before,
.hbm-divider-mesob::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(214,173,97,.35),
    rgba(214,173,97,.85),
    rgba(214,173,97,.35),
    transparent
  );
}

/* MESOB ICON */
.hbm-mesob-icon{
  width:42px;
  height:42px;
  position:relative;

  border-radius:8px;
  border:1.6px solid rgba(214,173,97,.95);

  background:
    repeating-linear-gradient(
      45deg,
      rgba(214,173,97,.85) 0 2px,
      rgba(2,27,31,.9) 2px 6px
    );

  box-shadow:
    0 10px 28px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

/* woven cross (mesob feel) */
.hbm-mesob-icon::before,
.hbm-mesob-icon::after{
  content:"";
  position:absolute;
  background:rgba(214,173,97,.95);
}

/* vertical weave */
.hbm-mesob-icon::before{
  width:2px;
  height:70%;
  top:15%;
  left:50%;
  transform:translateX(-50%);
}

/* horizontal weave */
.hbm-mesob-icon::after{
  height:2px;
  width:70%;
  left:15%;
  top:50%;
  transform:translateY(-50%);
}

/* mobile */
@media (max-width:768px){
  .hbm-divider-mesob{
    margin:40px auto;
    gap:16px;
  }
  .hbm-mesob-icon{
    width:36px;
    height:36px;
  }
}



/* =====================================
   MODERN RESTAURANT DIVIDER – CLEAR
===================================== */

.hbm-divider-modern{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  max-width:900px;
  margin:56px auto;
}

/* lines */
.hbm-divider-modern::before,
.hbm-divider-modern::after{
  content:"";
  flex:1;
  height:1.5px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(214,173,97,.35),
    rgba(214,173,97,.9),
    rgba(214,173,97,.35),
    transparent
  );
}

/* icon holder */
.hbm-divider-icon{
  width:56px;
  height:56px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:28px; /* 🔥 CLEAR & READABLE */

  border-radius:50%;
  border:2px solid rgba(214,173,97,.9);

  background:
    radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, #021b1f, #042c2f);

  box-shadow:
    0 14px 40px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

/* mobile */
@media (max-width:768px){
  .hbm-divider-icon{
    width:48px;
    height:48px;
    font-size:24px;
  }
}



/* =====================================
   DIVIDER ② — MODERN CUTLERY
===================================== */

.hbm-divider-cutlery{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  max-width:900px;
  margin:60px auto;
}

/* gold lines */
.hbm-divider-cutlery::before,
.hbm-divider-cutlery::after{
  content:"";
  flex:1;
  height:1.5px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(214,173,97,.4),
    rgba(214,173,97,.95),
    rgba(214,173,97,.4),
    transparent
  );
}

/* icon */
.hbm-divider-cutlery .hbm-divider-icon{
  width:58px;
  height:58px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:30px; /* BIG & CLEAR */

  border-radius:50%;
  border:2px solid rgba(214,173,97,.95);

  background:
    radial-gradient(circle at top left, rgba(255,255,255,.2), transparent 65%),
    linear-gradient(145deg, #021b1f, #042c2f);

  box-shadow:
    0 18px 45px rgba(0,0,0,.65),
    inset 0 0 0 1px rgba(255,255,255,.1);
}

/* mobile */
@media (max-width:768px){
  .hbm-divider-cutlery .hbm-divider-icon{
    width:50px;
    height:50px;
    font-size:26px;
  }
}


/* =====================================
   DIVIDER — CLEAN PREMIUM LINE
===================================== */

.hbm-divider-line{
  width:100%;
  max-width:900px;
  height:1.6px;
  margin:60px auto;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(214,173,97,.25),
    rgba(214,173,97,.85),
    rgba(214,173,97,.25),
    transparent
  );

  box-shadow:
    0 0 10px rgba(214,173,97,.35);
}

/* mobile spacing */
@media (max-width:768px){
  .hbm-divider-line{
    margin:44px auto;
  }
}


/* ============================================================
   DIVIDER — TABLE RESERVATION (PREMIUM)
============================================================ */

.hbm-divider-reservation{
  position:relative;
  max-width:900px;
  margin:64px auto;
  text-align:center;
}

/* center icon */
.hbm-divider-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;

  background:#021b1f;
  border:1.5px solid rgba(214,173,97,.75);
  color:#d6ad61;
  z-index:2;
  position:relative;
}

/* icon size */
.hbm-divider-icon svg{
  width:26px;
  height:26px;
  fill:currentColor;
}

/* left + right lines */
.hbm-divider-reservation::before,
.hbm-divider-reservation::after{
  content:"";
  position:absolute;
  top:50%;
  width:45%;
  height:1.4px;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(214,173,97,.85)
  );
}

.hbm-divider-reservation::before{
  left:0;
}

.hbm-divider-reservation::after{
  right:0;
  transform:scaleX(-1);
}

/* mobile */
@media (max-width:768px){
  .hbm-divider-reservation{
    margin:48px auto;
  }

  .hbm-divider-icon{
    width:42px;
    height:42px;
  }

  .hbm-divider-icon svg{
    width:22px;
    height:22px;
  }
}



.hbm-single-footer{
    margin-top:80px;
    padding:40px 20px;
    background:#0c1211;
    border-top:1px solid rgba(255,255,255,.08);
}

.hbm-footer-inner{
    max-width:1100px;
    margin:0 auto;
    text-align:center;
    color:#ddd;
}

.hbm-footer-title{
    font-family:'Arapey', serif;
    font-size:1.6rem;
    color:#a7f3d0;
    margin-bottom:14px;
}

.hbm-footer-line{
    font-size:.95rem;
    margin:6px 0;
}

.hbm-footer-line a{
    color:#a7f3d0;
    text-decoration:none;
}

.hbm-footer-hours{
    margin-top:16px;
    font-size:.9rem;
    line-height:1.6;
    color:#ccc;
}

.hbm-footer-copy{
    margin-top:26px;
    font-size:.8rem;
    opacity:.6;
}



/* ============================================================
   1.1 HEADER — LANGUAGE DROPDOWN (CSS-ONLY, NO JS)
============================================================ */

.hbm-header-bar,
.hbm-header-inner{
  overflow: visible !important;
}

.hbm-header-lang{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 14px;
  z-index: 99999;
}

.hbm-lang-current{
  appearance: none;
  border: 1px solid rgba(214,173,97,.45);
  background: rgba(0,0,0,.35);
  color: rgba(214,173,97,.95);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
}

.hbm-lang-list{
  list-style: none;
  margin: 10px 0 0;
  padding: 8px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  border-radius: 14px;
  border: 1px solid rgba(214,173,97,.25);
  background: rgba(6,10,10,.96);
  box-shadow: 0 18px 55px rgba(0,0,0,.7);
  display: none;
  z-index: 999999;
}

.hbm-lang-list a{
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: #f2f2f2;
  text-decoration: none;
  font-weight: 600;
}

.hbm-lang-list a:hover{
  background: rgba(214,173,97,.12);
}

.hbm-header-lang:focus-within .hbm-lang-list{
  display: block;
}

/* ===============================
   LANGUAGE SWITCHER – SVG FLAGS
================================ */

.hbm-header-lang {
    position: relative;
}

.hbm-lang-current {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(214,173,97,0.45);
    color: #fff;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
}

.hbm-lang-flag {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
}

.hbm-lang-code {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.hbm-lang-arrow {
    font-size: 12px;
    opacity: 0.7;
}

.hbm-lang-list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: linear-gradient(160deg,#0b1f1b,#061312);
    border: 1px solid rgba(214,173,97,0.35);
    border-radius: 12px;
    padding: 6px;
    min-width: 170px;
    list-style: none;
    margin: 0;
    display: none;
    z-index: 9999;
}

.hbm-lang-list li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    color: #f2f2f2;
    text-decoration: none;
    border-radius: 8px;
}

.hbm-lang-list li a:hover {
    background: rgba(214,173,97,0.18);
}

.hbm-header-lang:hover .hbm-lang-list {
    display: block;
}
/* ============================================================
   HBM FOOTER — PRO (scoped) for #hbm-footer
   Works with your HTML exactly
============================================================ */

#hbm-footer.hbm-footer{
  --bg1:#071012;
  --bg2:#04085b;
  --teal:#0aa38f;
  --gold:#edd098;
  --txt:rgba(255,255,255,.92);
  --mut:rgba(255,255,255,.72);
  --stroke:rgba(255,255,255,.12);
  --r:22px;

  background:
    radial-gradient(900px 520px at 18% 0%, rgba(10,163,143,.18), transparent 62%),
    radial-gradient(900px 520px at 82% 0%, rgba(237,208,152,.12), transparent 62%),
    linear-gradient(180deg, var(--bg1) 0%, #042a2d 50%, var(--bg2) 100%);
  border-top: 1px solid rgba(237,208,152,.18);

  color: var(--txt);
  padding: 44px 14px 26px;
}

#hbm-footer .hbm-footer__inner{
  max-width: 1180px;
  margin: 0 auto;
}

/* TOP ROW */
#hbm-footer .hbm-footer__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 26px;
  flex-wrap:wrap;
}

/* BRAND */
#hbm-footer .hbm-footer__brand{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width: 260px;
}

#hbm-footer .hbm-footer__logo{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(237,208,152,.24);
  box-shadow: 0 18px 52px rgba(0,0,0,.45);
  display:grid;
  place-items:center;
}

#hbm-footer .hbm-footer__logoMark{
  font-weight: 1000;
  letter-spacing: .6px;
  color: var(--gold);
  font-size: 20px;
}

#hbm-footer .hbm-footer__name{
  font-size: 16px;
  font-weight: 950;
  letter-spacing: .2px;
}

#hbm-footer .hbm-footer__tagline{
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--mut);
  line-height: 1.35;
}

/* COLUMNS */
#hbm-footer .hbm-footer__cols{
  display:grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  gap: 18px;
  flex: 1;
  min-width: 320px;
}

#hbm-footer .hbm-footer__col{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  padding: 16px 16px 14px;
}

#hbm-footer .hbm-footer__title{
  font-weight: 950;
  font-size: 13px;
  letter-spacing: .2px;
  color: rgba(237,208,152,.95);
  margin-bottom: 10px;
}

#hbm-footer .hbm-footer__link{
  display:block;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--txt);
  text-decoration:none;
  font-size: 13px;
  border: 1px solid transparent;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}

#hbm-footer .hbm-footer__link:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(237,208,152,.18);
  transform: translateY(-1px);
  opacity: .98;
}

/* NOTE */
#hbm-footer .hbm-footer__note{
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.78);
  font-size: 12.5px;
  line-height: 1.45;
  display:flex;
  gap: 10px;
  align-items:flex-start;
}

#hbm-footer .hbm-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(237,208,152,.95);
  margin-top: 5px;
  flex: 0 0 auto;
}

/* BOTTOM */
#hbm-footer .hbm-footer__bottom{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
}

#hbm-footer .hbm-footer__copy{
  font-size: 12.5px;
  color: rgba(255,255,255,.72);
}

#hbm-footer .hbm-footer__mini{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
}

#hbm-footer .hbm-footer__miniLink{
  color: rgba(255,255,255,.80);
  text-decoration:none;
  font-size: 12.5px;
  padding: 6px 8px;
  border-radius: 10px;
}

#hbm-footer .hbm-footer__miniLink:hover{
  background: rgba(255,255,255,.06);
}

#hbm-footer .hbm-sep{
  color: rgba(237,208,152,.55);
}

/* Mobile */
@media (max-width: 860px){
  #hbm-footer .hbm-footer__cols{
    grid-template-columns: 1fr;
    min-width: 100%;
  }
  #hbm-footer .hbm-footer__brand{
    min-width: 100%;
  }
}
/* ============================================================
   HERO — PREMIUM LOOK
============================================================ */

.hbm-hero {
  position: relative;
  min-height: 90vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hbm-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(214,173,97,0.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.9));
}

.hbm-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
  padding: 0 22px;
  text-align: center;
}

.hbm-hero-title {
  font-family: "Playfair Display", serif;
  font-size: 54px;
  color: #f4e1b2;
  margin-bottom: 14px;
}

.hbm-hero-subtitle {
  font-size: 18px;
  color: #e0e0e0;
  margin-bottom: 34px;
}

.hbm-hero-cta-center {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Mobile */
@media (max-width: 768px) {
  .hbm-hero-title {
    font-size: 36px;
  }
  .hbm-hero-subtitle {
    font-size: 16px;
  }
}
/* LANG dropdown */
.hbm-header-lang{ position: relative; }
.hbm-lang-list{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 220px;
  padding: 10px;
  margin: 0;
  list-style: none;
  display: none;
  z-index: 9999;

  background: rgba(12,15,14,.92);
  border: 1px solid rgba(214,173,97,.22);
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0,0,0,.65);
}
.hbm-header-lang.is-open .hbm-lang-list{ display: block; }

.hbm-lang-list a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: rgba(255,255,255,.92);
  text-decoration: none;
}
.hbm-lang-list a:hover{
  background: rgba(214,173,97,.12);
}

/* Mobile nav toggle */
@media (max-width: 920px){
  .hbm-header-right{ display:none; }
  .hbm-header-right.is-open{ display:flex; flex-direction:column; gap:10px; }
}
.hbm-lang-list{ display:none; }
.hbm-lang-list.is-open{ display:block; }




.hbm-flag{
  width: 18px;
  height: 14px;
  object-fit: cover;
  border-radius: 3px;
  display:inline-block;
  vertical-align: -2px;
  margin-right: 8px;
}





/* ===============================
   HBM MENU SLIDER (PLACEHOLDER)
================================ */
.hbm-menu-slider{
  position: relative;
  margin-top: 16px;
}

/* IMPORTANT: give it height, otherwise you see nothing */
.hbm-menu-slider-viewport{
  position: relative;
  height: clamp(220px, 32vw, 380px);
  overflow: hidden;
  border-radius: 22px;
  background: #0b0f0f;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  border: 1px solid rgba(214,173,97,.22);
}

.hbm-menu-slider-track{
  position: relative;
  width: 100%;
  height: 100%;
}

/* hide all slides by default */
.hbm-menu-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .7s ease, transform 1.1s ease;
  pointer-events: none;
  margin: 0;
}

/* show only active */
.hbm-menu-slide[data-active="1"]{
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 2;
}








/* 17.01.2025 HBM single page should NOT be phone width on desktop */
.hbm-page-wrap,
.hbm-single,
.single-hbm_business .site-content,
.single-hbm_business .content-area {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* If you have an inner container limiting width */
.hbm-page-wrap .container,
.hbm-page-wrap .elementor-container,
.hbm-page-wrap .entry-content {
  max-width: 1200px !important;
  width: 100% !important;
}

.hbm-hero-address{
  margin: 10px auto 0;
  max-width: 980px;
  text-align: center;
  font-weight: 700;
  opacity: .92;
  letter-spacing: .2px;
}

.hbm-hero-actions{
  margin-top: 14px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.hbm-hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  text-decoration:none;
  font-weight:900;
  border:1px solid rgba(255,255,255,.14);
}

.hbm-hero-btn--gold{
  background:#d6ad61;
  color:#111;
  border-color:rgba(214,173,97,.55);
}

.hbm-hero-btn--ghost{
  background:rgba(0,0,0,.25);
  color:#fff;
}

.hbm-hero-cta-ghost{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(214,173,97,.55);
  color: #f3e7c8;
  backdrop-filter: blur(10px);
}
.hbm-hero-cta-ghost:hover{
  transform: translateY(-1px);
  border-color: rgba(214,173,97,.9);
}




/* ============================================================
   HBM Menu Slider
============================================================ */
.hbm-menu-slider{ position:relative; margin-top:14px; }
.hbm-menu-slider-viewport{ overflow:hidden; border-radius:16px; }
.hbm-menu-slider-track{ position:relative; min-height:260px; }

.hbm-menu-slide{
  position:absolute; inset:0;
  opacity:0; transform:scale(1.02);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.hbm-menu-slide[data-active="1"]{
  opacity:1; transform:scale(1);
  pointer-events:auto;
}

.hbm-menu-slide img{
  width:100%; height:320px; object-fit:cover;
  display:block;
}

.hbm-menu-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.35);
  color:#fff; font-size:28px; line-height:42px;
  cursor:pointer;
}
.hbm-menu-prev{ left:12px; }
.hbm-menu-next{ right:12px; }

.hbm-menu-dots{
  display:flex; gap:8px; justify-content:center;
  margin-top:10px;
}
.hbm-menu-dot{
  width:10px; height:10px; border-radius:999px;
  border:0; cursor:pointer;
  background:rgba(255,255,255,.35);
}
.hbm-menu-dot[aria-current="true"]{
  background:rgba(255,255,255,.9);
}

.hbm-menu-slider-note{
  text-align:center; margin-top:10px;
  opacity:.85; font-size:.95rem;
}

/* ============================================================
   FIX OVERRIDES (paste at END) — makes dropdown + mobile nav + slider stable
============================================================ */

/* ---------- LANG DROPDOWN: ONLY open when JS adds class ---------- */
/* kill hover/focus auto-open (mobile/touch friendly) */
.hbm-header-lang:hover .hbm-lang-list,
.hbm-header-lang:focus-within .hbm-lang-list{
  display: none !important;
}

/* support BOTH class names used by your JS versions */
.hbm-header-lang.open .hbm-lang-list,
.hbm-header-lang.is-open .hbm-lang-list,
[data-lang].is-open .hbm-lang-list{
  display: block !important;
}

/* if any old code adds is-open directly on list */
.hbm-lang-list.is-open{
  display: block !important;
}

/* ---------- MOBILE NAV: support BOTH open + is-open ---------- */
@media (max-width: 920px){
  .hbm-header-right.open,
  .hbm-header-right.is-open{
    display: flex !important;
    flex-direction: column;
    gap: 18px;
  }
}

/* ---------- MENU SLIDER: ensure viewport has height + active slide shows ---------- */
.hbm-menu-slider-viewport{
  position: relative !important;
  height: clamp(220px, 32vw, 380px) !important; /* prevents "invisible slider" */
  overflow: hidden !important;
}

.hbm-menu-slider-track{
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
}

/* slide visibility logic (works with your JS data-active="1") */
.hbm-menu-slide{
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.hbm-menu-slide[data-active="1"]{
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

.hbm-menu-slide img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}


/* ==============================
   HBM — Fix broken circle stamp
   ============================== */

/* 1) The circle box (must be square) */
.hbm-stamp,
.hbm-circle,
.hbm-logo-circle,
.hbm-seal {
  width: clamp(180px, 62vw, 320px) !important;
  aspect-ratio: 1 / 1 !important;   /* always square */
  height: auto !important;

  border-radius: 50% !important;
  position: relative !important;

  display: grid !important;
  place-items: center !important;

  overflow: visible !important;
}

/* 2) Inner circle / logo */
.hbm-stamp__inner,
.hbm-circle__inner,
.hbm-logo-circle__inner,
.hbm-seal__inner,
.hbm-stamp img,
.hbm-circle img {
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%) !important;

  width: 46% !important;
  height: 46% !important;
  border-radius: 50% !important;

  display: block !important;
  object-fit: contain !important;
  pointer-events: none !important;
}

/* 3) Curved / rotating text around */
.hbm-stamp__ring,
.hbm-circle__ring,
.hbm-seal__ring,
.hbm-stamp svg,
.hbm-circle svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform-origin: 50% 50% !important;
}

/* 4) If you rotate the ring, rotate only the ring (not the whole box) */
.hbm-stamp[data-rotate="1"] .hbm-stamp__ring,
.hbm-circle[data-rotate="1"] .hbm-circle__ring {
  animation: hbmRingSpin 16s linear infinite;
}

@keyframes hbmRingSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}



















/* =====================================================================
   HBM SINGLE LISTING (JNEWS) — REMOVE THEME HEADER ONLY + FIX BLACK GAP
   Scope: ONLY body.single-hbm_business
===================================================================== */

body.single-hbm_business{
  --hbm-header-h: 72px;
}

/* 1) KEEP ONLY YOUR CUSTOM HBM HEADER */
body.single-hbm_business .hbm-header-bar{
  display:block !important;
  position:fixed !important;
  top:0 !important; left:0 !important; right:0 !important;
  z-index:2147483647 !important;
}

/* 2) REMOVE THEME HEADER (DESKTOP + STICKY) */
body.single-hbm_business :is(
  header.jeg_header,
  .jeg_header,
  .jeg_header_wrapper,
  .jeg_header__wrap,
  .jeg_header_container,
  .jeg_header_normal,
  .jeg_header_sticky,
  .jeg_header_sticky_wrapper,
  .jeg_sticky_header,
  .jeg_stickybar,
  .jeg_stickybar_wrapper,
  .jeg_topbar,
  .jeg_navbar,
  .jeg_main_menu,
  .jnews-header,
  .jnews-header-sticky
){
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* 3) REMOVE THEME HEADER (MOBILE) — THE DOUBLE MENU */
body.single-hbm_business :is(
  .jeg_mobile_wrapper,
  .jeg_mobile_header,
  .jeg_mobile_header_wrapper,
  .jeg_mobile_nav_wrapper,
  .jeg_mobile_topbar,
  .jeg_mobile_menu_wrapper,
  .jeg_mobile_menu,
  .jeg_mobile_nav
){
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* 4) EXTRA: KILL NAV ROW IF IT STILL RENDERS (.jeg_nav_row) */
body.single-hbm_business :is(.jeg_nav_row, .jeg_nav_row_1, .jeg_nav_row_2, .jeg_nav_row_3){
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* 5) REMOVE STICKY “HOLDER / GAP” PLACEHOLDERS */
body.single-hbm_business :is(
  .jeg_header_sticky_holder,
  .jeg_sticky_holder,
  .jeg_sticky--holder,
  .jeg_header_placeholder,
  .jeg_sticky_placeholder,
  .sticky-wrapper,
  .header-sticky,
  .jeg_header_sticky_height
){
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* 6) FIX THE BLACK GAP:
      DO NOT use body padding-top.
      Instead, let the HERO include the header space (image covers it). */
body.single-hbm_business{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.single-hbm_business :is(#page, .site, .site-content, .jeg_main, .jeg_main_content, main, .hbm-page-wrap, .hbm-single){
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* HERO gets the offset (so the hero background fills under header) */
body.single-hbm_business .hbm-hero{
  margin-top: 0 !important;
  padding-top: var(--hbm-header-h) !important; /* ✅ this replaces body padding */
}

/* if you have an overlay inside hero, ensure it starts at top */
body.single-hbm_business .hbm-hero-overlay{
  top: 0 !important;
}











/* ============================================================
   REAL GAP FIX (strip above hero + header spacing)
   Paste at END
============================================================ */

/* 1) Remove any section padding/margins above the hero */
body.single-hbm_business main,
body.single-hbm_business .site-content,
body.single-hbm_business .content-area,
body.single-hbm_business .entry-content{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 2) The “rating strip” above hero (Highly Rated 4.3/5…) must not push content down
   We target common wrappers that often wrap it. */
body.single-hbm_business .hbm-rating-strip,
body.single-hbm_business .hbm-hero-rating-strip,
body.single-hbm_business .hbm-rating-row,
body.single-hbm_business .hbm-rating-wrap,
body.single-hbm_business .hbm-top-rating,
body.single-hbm_business .hbm-rating-container{
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
}

/* If the strip is a full-width bar, collapse it */
body.single-hbm_business .hbm-rating-strip:empty,
body.single-hbm_business .hbm-hero-rating-strip:empty{
  display:none !important;
}

/* 3) Pull hero up under header */
body.single-hbm_business .hbm-hero{
  margin-top: -60px !important;   /* THIS removes the visible gap */
  padding-top: 0 !important;
}

/* 4) Hero inner: no extra top padding */
body.single-hbm_business .hbm-hero-inner{
  padding-top: 18px !important;
}

/* 5) Mobile: stronger pull-up (your mobile gap is bigger) */
@media (max-width: 720px){
  body.single-hbm_business .hbm-hero{
    margin-top: -26px !important;
  }
  body.single-hbm_business .hbm-hero-inner{
    padding-top: 14px !important;
  }
}








/* =========================================================
   ABOUT THIS RESTAURANT — LUXURY PROFESSIONAL
========================================================= */
.hbm-about-lux{
  margin: 56px 0 70px;
  padding: 0 16px;
}

.hbm-about-lux__outer{
  max-width: 1720px;
  margin: 0 auto;
  padding: clamp(38px, 4vw, 78px);
  border-radius: 36px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(203,182,130,.24);
  background:
    radial-gradient(circle at 50% 0%, rgba(233,219,189,.10), transparent 28%),
    linear-gradient(90deg, rgba(233,219,189,.06) 0%, rgba(8,12,16,.97) 18%, rgba(3,6,8,.99) 82%, rgba(233,219,189,.06) 100%);
  box-shadow:
    0 24px 64px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.03);
}

.hbm-about-lux__header{
  text-align: center;
  margin-bottom: 34px;
}

.hbm-about-lux__eyebrow{
  display: inline-block;
  margin-bottom: 12px;
  color: #cbb682;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.hbm-about-lux__title{
  margin: 0;
  color: #f1deb0;
  font-size: clamp(30px, 4.2vw, 64px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hbm-about-lux__sub{
  margin: 14px 0 0;
  color: rgba(255,255,255,.72);
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1.7;
  letter-spacing: .04em;
}

.hbm-about-lux__line{
  display: block;
  width: 180px;
  height: 1px;
  margin: 22px auto 0;
  background: linear-gradient(90deg, transparent, #cbb682, transparent);
}

.hbm-about-lux__card{
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 0;
  border-radius: 28px;
  border: 1px solid rgba(203,182,130,.28);
  background:
    linear-gradient(90deg, rgba(233,219,189,.05) 0%, rgba(8,12,16,.82) 20%, rgba(8,12,16,.92) 80%, rgba(233,219,189,.05) 100%);
  overflow: hidden;
}

.hbm-about-lux__quote{
  position: relative;
  min-height: 100%;
  background:
    linear-gradient(180deg, rgba(203,182,130,.16), rgba(203,182,130,.04));
}

.hbm-about-lux__quote::before{
  content: "“";
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(241,222,176,.88);
  font-size: 58px;
  line-height: 1;
  font-family: Georgia, serif;
}

.hbm-about-lux__content{
  padding: clamp(28px, 3vw, 46px);
}

.hbm-about-lux__text{
  margin: 0;
  max-width: 1180px;
  color: rgba(255,255,255,.90);
  font-size: clamp(18px, 1.18vw, 23px);
  line-height: 2;
  font-weight: 400;
  text-align: left;
}

@media (max-width: 991px){
  .hbm-about-lux{
    margin: 30px 0 40px;
    padding: 0 10px;
  }

  .hbm-about-lux__outer{
    padding: 24px 14px;
    border-radius: 24px;
  }

  .hbm-about-lux__header{
    margin-bottom: 20px;
  }

  .hbm-about-lux__title{
    font-size: clamp(22px, 8vw, 34px);
    letter-spacing: .10em;
  }

  .hbm-about-lux__sub{
    font-size: 13px;
    margin-top: 10px;
  }

  .hbm-about-lux__line{
    width: 110px;
    margin-top: 14px;
  }

  .hbm-about-lux__card{
    grid-template-columns: 1fr;
    border-radius: 18px;
  }

  .hbm-about-lux__quote{
    min-height: 56px;
  }

  .hbm-about-lux__quote::before{
    top: 10px;
    font-size: 34px;
  }

  .hbm-about-lux__content{
    padding: 18px 14px 20px;
  }

  .hbm-about-lux__text{
    font-size: 15px;
    line-height: 1.85;
  }
}




/* =========================================================
   HBM SINGLE PAGE — GLOBAL LAYOUT SYSTEM
========================================================= */
:root{
  --hbm-page-max: 1280px;
  --hbm-page-pad: 16px;
  --hbm-section-gap: 26px;
  --hbm-card-radius: 24px;
}

.hbm-single-section{
  width: 100%;
  margin: 0;
  padding: 0 var(--hbm-page-pad);
}

.hbm-single-container{
  width: 100%;
  max-width: var(--hbm-page-max);
  margin: 0 auto var(--hbm-section-gap);
}

.hbm-single-card{
  width: 100%;
  border-radius: var(--hbm-card-radius);
  overflow: hidden;
}

/* make common old sections follow same width */
.hbm-section-box,
.hbm-about-lux,
.hbm-about-pro,
.hbm-about-premium,
.hbm-offer-strip,
.hbm-menu-preview,
.hbm-booking-wrap,
.hbm-info-wrap,
.hbm-location-wrap,
.hbm-reserve-wrap{
  max-width: var(--hbm-page-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* normalize section spacing */
.hbm-section-box,
.hbm-about-lux,
.hbm-about-pro,
.hbm-about-premium,
.hbm-offer-strip,
.hbm-menu-preview,
.hbm-booking-wrap,
.hbm-info-wrap,
.hbm-location-wrap,
.hbm-reserve-wrap{
  margin-bottom: var(--hbm-section-gap) !important;
}

/* remove random nested width restrictions that make sections look smaller */
.hbm-section-box > .container,
.hbm-section-box > .wrap,
.hbm-about-lux > .container,
.hbm-about-pro > .container{
  max-width: 100% !important;
  width: 100% !important;
}


.hbm-divider{
  width: min(1280px, calc(100% - 32px));
  height: 1px;
  margin: 18px auto 24px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(232,207,120,.00) 8%,
    rgba(232,207,120,.75) 50%,
    rgba(232,207,120,.00) 92%,
    transparent 100%
  );
}


.hbm-divider-lux{
  width: min(1280px, calc(100% - 32px));
  margin: 20px auto 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.hbm-divider-lux__line{
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(232,207,120,0),
    rgba(232,207,120,.22) 18%,
    rgba(232,207,120,.85) 50%,
    rgba(232,207,120,.22) 82%,
    rgba(232,207,120,0)
  );
}

.hbm-divider-lux__dot{
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  background: none;
  box-shadow: none;
  position: relative;
}
.hbm-divider-lux__dot::before{
  content: "◆";
  position: absolute;
  inset: 0;
  color: #e8cf78;
  font-size: 22px;
  line-height: 16px;
  text-align: center;
}






/* END */ 

/* ============================================================
   HBM SINGLE — PHASE 1 SAFE UI UPDATE
   1) professional menu icon
   2) rating inside hero
   3) right-side Take me top
   4) spacing tokens only (no section geometry overrides)
============================================================ */
:root{
  --hbm-space-1: 6px;
  --hbm-space-2: 10px;
  --hbm-space-3: 16px;
  --hbm-space-4: 24px;
  --hbm-space-5: 32px;
  --hbm-control-radius: 14px;
}

/* 1) MENU ICON — keeps .hbm-hamburger and its three spans */
body.single-hbm_business .hbm-hamburger{
  width:46px !important;
  height:46px !important;
  padding:0 !important;
  border-radius:14px !important;
  border:1px solid rgba(232,207,120,.38) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.045)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 10px 28px rgba(0,0,0,.24) !important;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  transition:background .2s ease,border-color .2s ease,transform .2s ease !important;
}
body.single-hbm_business .hbm-hamburger:hover{
  border-color:rgba(232,207,120,.70) !important;
  background:rgba(232,207,120,.10) !important;
}
body.single-hbm_business .hbm-hamburger span{
  width:20px !important;
  height:2px !important;
  margin:0 !important;
  border-radius:999px !important;
  background:#f1dfaa !important;
  transform-origin:center !important;
  transition:transform .22s ease,opacity .18s ease,width .22s ease !important;
}
body.single-hbm_business .hbm-hamburger span:nth-child(2){width:15px !important;align-self:flex-end;margin-right:12px !important;}
body.single-hbm_business.hbm-menu-open .hbm-hamburger span:nth-child(1),
body.single-hbm_business.hbm-nav-open .hbm-hamburger span:nth-child(1),
body.single-hbm_business .hbm-hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg) !important;}
body.single-hbm_business.hbm-menu-open .hbm-hamburger span:nth-child(2),
body.single-hbm_business.hbm-nav-open .hbm-hamburger span:nth-child(2),
body.single-hbm_business .hbm-hamburger.active span:nth-child(2){opacity:0 !important;width:0 !important;}
body.single-hbm_business.hbm-menu-open .hbm-hamburger span:nth-child(3),
body.single-hbm_business.hbm-nav-open .hbm-hamburger span:nth-child(3),
body.single-hbm_business .hbm-hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg) !important;}
@media(max-width:900px){body.single-hbm_business .hbm-hamburger{display:flex !important;}}

/* Make existing drawer state compatible with the existing JS. */
@media(max-width:900px){
  body.single-hbm_business .hbm-header-right.open,
  body.single-hbm_business .hbm-header-right.is-open{display:flex !important;}
}

/* 2) RATING — now lives INSIDE .hbm-hero-inner */
body.single-hbm_business .hbm-hero-inner > .hbm-rating-under-hero{
  width:100% !important;
  max-width:none !important;
  margin:12px 0 18px !important;
  padding:0 !important;
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  position:relative !important;
  z-index:5 !important;
  clear:both !important;
}
body.single-hbm_business .hbm-hero-inner > .hbm-rating-under-hero .hbm-rating-under-line{display:none !important;}
body.single-hbm_business .hbm-hero-inner > .hbm-rating-under-hero .hbm-rating-pill{
  position:relative !important;
  top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
  inset:auto !important;
  transform:none !important;
  float:none !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:9px !important;
  max-width:100% !important;
  min-height:42px !important;
  margin:0 !important;
  padding:7px 10px 7px 8px !important;
  border-radius:13px !important;
  background:rgba(8,15,13,.72) !important;
  border:1px solid rgba(232,207,120,.32) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.07) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
  color:#fff !important;
  text-decoration:none !important;
}
body.single-hbm_business .hbm-hero-inner > .hbm-rating-under-hero .hbm-rating-chip{
  padding:5px 8px !important;
  border-radius:9px !important;
  background:rgba(232,207,120,.13) !important;
  border:1px solid rgba(232,207,120,.24) !important;
  color:#ead28b !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:850 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
}
body.single-hbm_business .hbm-rating-star{color:#e8cf78;font-size:15px;line-height:1;}
body.single-hbm_business .hbm-hero-inner > .hbm-rating-under-hero .hbm-rating-score{display:inline-flex !important;align-items:baseline !important;gap:2px !important;}
body.single-hbm_business .hbm-hero-inner > .hbm-rating-under-hero .hbm-rating-num{font-size:15px !important;font-weight:900 !important;color:#fff !important;}
body.single-hbm_business .hbm-hero-inner > .hbm-rating-under-hero .hbm-rating-max{font-size:10px !important;color:rgba(255,255,255,.58) !important;}
body.single-hbm_business .hbm-hero-inner > .hbm-rating-under-hero .hbm-rating-count{font-size:11px !important;color:rgba(255,255,255,.72) !important;font-weight:650 !important;}
body.single-hbm_business .hbm-hero-inner > .hbm-rating-under-hero .hbm-rating-bar{display:none !important;}
body.single-hbm_business .hbm-hero-inner > .hbm-rating-under-hero .hbm-rating-cta{font-size:12px !important;color:#e8cf78 !important;}
@media(max-width:640px){
  body.single-hbm_business .hbm-hero-inner > .hbm-rating-under-hero{justify-content:flex-start !important;margin:10px 0 16px !important;}
  body.single-hbm_business .hbm-hero-inner > .hbm-rating-under-hero .hbm-rating-pill{max-width:100% !important;padding:7px 9px !important;gap:7px !important;}
  body.single-hbm_business .hbm-hero-inner > .hbm-rating-under-hero .hbm-rating-count{display:none !important;}
}

/* 3) TAKE ME TOP — under hero/right side, shown after hero leaves viewport */
body.single-hbm_business .hbm-take-top-wrap{
  width:min(1320px,calc(100% - 32px));
  height:0;
  margin:0 auto;
  position:relative;
  z-index:120;
  pointer-events:none;
}
body.single-hbm_business .hbm-take-top{
  position:fixed;
  right:max(18px,calc((100vw - 1320px)/2 + 18px));
  bottom:24px;
  z-index:9990;
  min-height:44px;
  padding:7px 9px 7px 8px;
  border:1px solid rgba(232,207,120,.38);
  border-radius:14px;
  background:rgba(8,18,15,.88);
  color:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease,border-color .2s ease;
}
body.single-hbm_business .hbm-take-top.is-visible{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
body.single-hbm_business .hbm-take-top:hover{border-color:rgba(232,207,120,.72);transform:translateY(-2px);}
body.single-hbm_business .hbm-take-top__icon{
  width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(145deg,#e8cf78,#c7a958);color:#10231d;font-size:17px;font-weight:900;
}
body.single-hbm_business .hbm-take-top__label{font-size:10px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;padding-right:3px;}
@media(max-width:640px){
  body.single-hbm_business .hbm-take-top{right:12px;bottom:14px;width:44px;height:44px;min-height:44px;padding:6px;border-radius:14px;justify-content:center;}
  body.single-hbm_business .hbm-take-top__icon{width:30px;height:30px;}
  body.single-hbm_business .hbm-take-top__label{display:none;}
}

/* 4) SPACING DESIGN SYSTEM
   Tokens are intentionally NOT applied to existing sections in this phase.
   This prevents the current layout from being squeezed or reflowed. */

/* ============================================================
   HBM 6.2.5 — SINGLE LISTING MOBILE TOP LAYOUT STABILIZER
   Purpose: fix oversized/stacked header + hero-meta area on phones
   Scope: single hbm_business only. No routing/data/SEO changes.
============================================================ */
body.single-hbm_business{
  --hbm-header-h: 68px;
}

body.single-hbm_business .hbm-header-bar{
  height: var(--hbm-header-h) !important;
  min-height: var(--hbm-header-h) !important;
}

body.single-hbm_business .hbm-header-inner{
  height: var(--hbm-header-h) !important;
  min-height: var(--hbm-header-h) !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

body.single-hbm_business .hbm-header-logo{
  width: 46px !important;
  height: 46px !important;
  object-fit: contain !important;
}

/* Do not let the late generic .hbm-hero rules override the real listing hero. */
body.single-hbm_business .hbm-hero{
  min-height: auto !important;
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.single-hbm_business .hbm-hero-inner{
  width: min(1320px, calc(100% - 28px)) !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 16px 18px 22px !important;
  text-align: center !important;
}

/* Keep cuisine / city / country compact instead of three tall rows. */
body.single-hbm_business .hbm-hero-badge-row{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 auto 12px !important;
  padding: 0 !important;
}

body.single-hbm_business .hbm-hero .hbm-pill{
  min-height: 34px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

body.single-hbm_business .hbm-rating-pill{
  position: static !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 6px auto 18px !important;
}

body.single-hbm_business .hbm-hero-title{
  margin-top: 0 !important;
}

@media (max-width: 720px){
  body.single-hbm_business{
    --hbm-header-h: 64px;
    padding-top: var(--hbm-header-h) !important;
  }

  body.single-hbm_business .hbm-header-inner{
    grid-template-columns: auto 1fr auto !important;
    gap: 10px !important;
    padding: 0 14px !important;
  }

  body.single-hbm_business .hbm-header-logo{
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
  }

  body.single-hbm_business .hbm-lang-current{
    min-height: 40px !important;
    padding: 7px 12px !important;
    gap: 8px !important;
  }

  body.single-hbm_business .hbm-hamburger{
    width: 44px !important;
    height: 44px !important;
  }

  body.single-hbm_business .hbm-hero-inner{
    width: calc(100% - 16px) !important;
    padding: 12px 10px 20px !important;
    border-radius: 0 0 22px 22px !important;
  }

  body.single-hbm_business .hbm-hero-badge-row{
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 7px !important;
    margin: 0 0 10px !important;
    padding: 0 2px 2px !important;
  }
  body.single-hbm_business .hbm-hero-badge-row::-webkit-scrollbar{display:none !important;}

  body.single-hbm_business .hbm-hero .hbm-pill{
    flex: 0 0 auto !important;
    min-height: 32px !important;
    padding: 6px 10px !important;
    font-size: 11.5px !important;
  }

  body.single-hbm_business .hbm-rating-pill{
    margin: 4px 0 16px !important;
    padding: 7px 10px !important;
  }

  body.single-hbm_business .hbm-hero-title{
    font-size: clamp(34px, 10.5vw, 50px) !important;
    line-height: 1.02 !important;
    margin: 4px 0 12px !important;
  }

  body.single-hbm_business .hbm-hero-subtitle{
    margin: 0 auto 12px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  body.single-hbm_business .hbm-hero-address{
    margin: 0 auto 16px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
}

/* ============================================================
   HBM 6.2.6 — RESPONSIVE HERO META
   Mobile: no horizontal clipping. Cuisine gets its own line;
   city/country share a centered row and may wrap naturally.
============================================================ */
@media (max-width: 720px){
  body.single-hbm_business .hbm-hero-badge-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    width:100% !important;
    overflow:visible !important;
    gap:8px !important;
    padding:0 !important;
    margin:0 0 10px !important;
    justify-content:stretch !important;
  }
  body.single-hbm_business .hbm-hero-badge-row .hbm-pill{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:34px !important;
    padding:7px 9px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    line-height:1.15 !important;
  }
  body.single-hbm_business .hbm-hero-badge-row .hbm-pill:first-child{
    grid-column:1 / -1 !important;
  }
  body.single-hbm_business .hbm-rating-pill{
    margin:4px auto 14px !important;
  }
}
@media (max-width: 390px){
  body.single-hbm_business .hbm-hero-badge-row{
    grid-template-columns:1fr !important;
  }
  body.single-hbm_business .hbm-hero-badge-row .hbm-pill:first-child{
    grid-column:auto !important;
  }
}