/* Hide the grey placeholder layer inside product thumbnails */
#products .aspect-square .bg-stone-200 { display: none !important; }

/* Fill thumbnails with your uploaded images */
#products .grid > div:nth-child(1) .aspect-square { background-image: url("/assets/img/collection/IMG1.webp"); background-size: cover; background-position: bottom center; }
#products .grid > div:nth-child(2) .aspect-square { background-image: url("/assets/img/collection/IMG2.webp"); background-size: cover; background-position: bottom center; }
#products .grid > div:nth-child(3) .aspect-square { background-image: url("/assets/img/collection/IMG3.webp"); background-size: cover; background-position: bottom center; }
#products .grid > div:nth-child(4) .aspect-square { background-image: url("/assets/img/collection/IMG4.webp"); background-size: cover; background-position: bottom center; }
#products .grid > div:nth-child(5) .aspect-square { background-image: url("/assets/img/collection/IMG5.webp"); background-size: cover; background-position: bottom center; }
#products .grid > div:nth-child(6) .aspect-square { background-image: url("/assets/img/collection/IMG6.webp"); background-size: cover; background-position: bottom center; }

/* Hero background */
#home {
  background: url("/assets/img/hero-bg.jpg") no-repeat center 40%;
  background-size: cover;
  position: relative;
}
#home::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.3); /* white overlay for text readability */
}
#home > div {
  position: relative;
  z-index: 1;
}

/* Make hero section taller */
#home {
  min-height: 100vh;   /* full viewport height */
  display: flex;
  align-items: center; /* vertically center text */
}

/* Improve hero text readability */
#home::before {
  background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2));
}

#home h1, 
#home p {
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* Hero heading color adjustment */
#home h1 {
  color: #F5F0E6;   /* Beige for "Your Moment" */
}

/* Hero subheading text color */
#home p {
  color: #F5F0E6 !important;
}

/* Outline effect for "Our Art" */

/* Outline effect for "Our Art" */

/* Add subtle shadow only to "Our Art" */
#home h1 span {
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* Subtle background strip behind hero text */
#home .max-w-4xl {
  background: rgba(0,0,0,0.15);
  padding: 1rem 2rem;
  border-radius: 8px;
  display: inline-block;
}

/* Centered box styling for hero text */
#home .max-w-4xl {
  background: rgba(0,0,0,0.15);
  padding: 2rem 3rem;       /* more space inside */
  border-radius: 12px;      /* softer corners */
  margin: 0 auto;           /* center the box */
  display: table;           /* shrink to fit content */
}

/* Glass effect for hero text */
#home .max-w-4xl {
  background: rgba(0,0,0,0.15);
  padding: 2rem 3rem;
  border-radius: 12px;
  margin: 0 auto;
  display: table;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px); /* Safari support */
}

/* Add beige border to hero text box */
#home .max-w-4xl {
  border: 1px solid #F5F0E6;
}

/* About section with optimized WebP */
#about .rounded-lg {
  background-image: url("/assets/img/about_img1.webp");
  background-size: cover;
  background-position: center;
}
#about .rounded-lg span { display: none; }

/* Subtle drop shadow for About image */
#about .rounded-lg {
  box-shadow: 0 6px 24px rgba(0,0,0,0.2);
}

/* Beige glow for About image */
#about .rounded-lg {
  box-shadow: 0 6px 24px rgba(0,0,0,0.2), 0 0 36px rgba(245,240,230,0.6);
}

/* Glow + shadow for hero text box */
#home .max-w-4xl {
  box-shadow: 0 6px 24px rgba(0,0,0,0.2), 0 0 36px rgba(245,240,230,0.6);
}

/* --- Event Gallery: replace placeholders with real images --- */
#gallery .grid > div {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* Map the 8 tiles to IMG8..IMG14 + IMG1 */
#gallery .grid > div:nth-child(1) { background-image: url("/assets/img/collection/IMG8.webp"); }
#gallery .grid > div:nth-child(2) { background-image: url("/assets/img/collection/IMG9.webp"); }
#gallery .grid > div:nth-child(3) { background-image: url("/assets/img/collection/IMG10.webp"); }
#gallery .grid > div:nth-child(4) { background-image: url("/assets/img/collection/IMG11.webp"); }
#gallery .grid > div:nth-child(5) { background-image: url("/assets/img/collection/IMG12.webp"); }
#gallery .grid > div:nth-child(6) { background-image: url("/assets/img/collection/IMG13.webp"); }
#gallery .grid > div:nth-child(7) { background-image: url("/assets/img/collection/IMG14.webp"); }
#gallery .grid > div:nth-child(8) { background-image: url("/assets/img/collection/IMG1.webp"); }

/* Hide the inner gray placeholder box and text */
#gallery .grid > div > div { display: none !important; }

/* --- Fix Event Gallery to use IMG7 → IMG14 in sequence --- */
#gallery .grid > div:nth-child(1) { background-image: url("/assets/img/collection/IMG7.webp"); }
#gallery .grid > div:nth-child(2) { background-image: url("/assets/img/collection/IMG8.webp"); }
#gallery .grid > div:nth-child(3) { background-image: url("/assets/img/collection/IMG9.webp"); }
#gallery .grid > div:nth-child(4) { background-image: url("/assets/img/collection/IMG10.webp"); }
#gallery .grid > div:nth-child(5) { background-image: url("/assets/img/collection/IMG11.webp"); }
#gallery .grid > div:nth-child(6) { background-image: url("/assets/img/collection/IMG12.webp"); }
#gallery .grid > div:nth-child(7) { background-image: url("/assets/img/collection/IMG13.webp"); }
#gallery .grid > div:nth-child(8) { background-image: url("/assets/img/collection/IMG14.webp"); }

/* --- Event Gallery fallback for browsers without WebP --- */
#gallery .grid > div:nth-child(1) { background-image: url("/assets/img/collection/IMG7.jpg"); }
#gallery .grid > div:nth-child(2) { background-image: url("/assets/img/collection/IMG8.jpg"); }
#gallery .grid > div:nth-child(3) { background-image: url("/assets/img/collection/IMG9.jpg"); }
#gallery .grid > div:nth-child(4) { background-image: url("/assets/img/collection/IMG10.jpg"); }
#gallery .grid > div:nth-child(5) { background-image: url("/assets/img/collection/IMG11.jpg"); }
#gallery .grid > div:nth-child(6) { background-image: url("/assets/img/collection/IMG12.jpg"); }
#gallery .grid > div:nth-child(7) { background-image: url("/assets/img/collection/IMG13.jpg"); }
#gallery .grid > div:nth-child(8) { background-image: url("/assets/img/collection/IMG14.jpg"); }

/* Modern browsers will override these with .webp above */

/* ===== Event Gallery overlays (IMG7 → IMG14) ===== */
#gallery .grid > div {
  position: relative !important;
}
#gallery .grid > div::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
  color: #F5F0E6;
  font-size: 13px;
  line-height: 1.25;
  white-space: pre-line; /* allow \A newlines */
  pointer-events: none;
}

/* Per-tile captions */
#gallery .grid > div:nth-child(1)::after { content: "Zoonique @ THE HOST\A Zoonique x Ali Fazal"; }
#gallery .grid > div:nth-child(2)::after { content: "Zoonique @ THE HOST\A Conversations with Sanjay Suri"; }
#gallery .grid > div:nth-child(3)::after { content: "Zoonique @ THE HOST\A Conversations with Sanjay Suri"; }
#gallery .grid > div:nth-child(4)::after { content: "Zoonique @ THE HOST\A Conversations with Sanjay Suri"; }
#gallery .grid > div:nth-child(5)::after { content: "Zoonique @ THE HOST\A Styled by @dilsetraveller_"; }
#gallery .grid > div:nth-child(6)::after { content: "Zoonique @ THE HOST\A Zoonique Moments"; }
#gallery .grid > div:nth-child(7)::after { content: "Zoonique @ THE HOST\A Our Photobooth @ THE HOST"; }
#gallery .grid > div:nth-child(8)::after { content: "Zoonique @ THE HOST\A Visitors @ THE HOST"; }

/* Overlay text: normal top line + bold caption line */
#gallery .grid > div::after {
  font-weight: normal;
}
#gallery .grid > div span {
  display: block;
  font-weight: bold;
}
/* ZQ-FLOAT-HOTFIX v2025-09-22 — ensure the Question panel floats bottom-right */
#zq-menu{position:fixed;right:16px;bottom:16px;z-index:9999;width:min(92vw,360px);font:inherit}
#zq-menu[hidden]{display:none!important}
#zq-scrim{position:fixed;inset:0;background:rgba(0,0,0,.25);backdrop-filter:saturate(120%) blur(2px);z-index:9998}
#zq-scrim[hidden]{display:none!important}
#zq-menu .zq-mi{display:flex;align-items:center;gap:.5rem;background:var(--bg-elevated,#fff);border:1px solid rgba(0,0,0,.08);border-radius:999px;padding:.6rem .9rem;box-shadow:0 6px 24px rgba(0,0,0,.08);cursor:pointer}
#zq-menu .zq-mi svg{width:20px;height:20px;flex:0 0 20px}
#zq-menu .zq-caret{margin-left:auto;opacity:.6}
#zq-menu .zq-sub{display:none;margin-top:.5rem}
#zq-menu .zq-sub.show{display:block}
#zq-menu .zq-pills{display:flex;gap:.5rem;flex-wrap:wrap}
#zq-menu .zq-pill{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:.5rem .8rem;text-decoration:none;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.06)}
#zq-menu .zq-pill svg{width:18px;height:18px}
#zq-menu .zq-foot{margin-top:.6rem;font-size:12px;opacity:.75;text-align:right}
#zq-menu .zq-nub{display:none} /* reserved, hidden unless used */
@media (max-width:480px){
  #zq-menu{right:12px;bottom:12px;width:min(92vw,360px)}
}
/* /ZQ-FLOAT-HOTFIX */
/* ZQ-GFAB-HOTFIX v2025-09-22 — float the Question trigger button */
#zq-gfab{
  position:fixed; right:16px; bottom:16px; z-index:10000;
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:999px;
  padding:.6rem .9rem; text-decoration:none; color:inherit;
  box-shadow:0 6px 24px rgba(0,0,0,.08); cursor:pointer;
}
#zq-gfab .txt{font-weight:600; letter-spacing:.1px}
@media (max-width:480px){
  #zq-gfab{right:12px; bottom:12px}
}
/* /ZQ-GFAB-HOTFIX */
/* ZQ-THEME-TUNE v2025-09-22 — unify floating Question + menu styling */
:root{
  --zq-gold:#B6863C;            /* Zoonique gold */
  --zq-champagne:#E0CBAF;       /* soft accent */
  --zq-ink:#1E1E1E;
  --zq-pill-bg:#FFFFFF;
  --zq-pill-border:rgba(0,0,0,.10);
  --zq-shadow-lg:0 10px 30px rgba(0,0,0,.12);
  --zq-shadow-sm:0 4px 14px rgba(0,0,0,.10);
}
#zq-gfab{
  font-size:15px; line-height:1; height:44px;
  padding:.65rem .95rem; border-radius:999px;
  background:var(--zq-pill-bg); color:var(--zq-ink);
  border:1px solid var(--zq-pill-border);
  box-shadow:var(--zq-shadow-sm);
}
#zq-gfab .txt{font-weight:600;}

/* Panel container */
#zq-menu{
  width:min(92vw,360px);
  filter:saturate(110%);
}
#zq-scrim{backdrop-filter:saturate(120%) blur(2px);}

/* Main rows */
#zq-menu .zq-mi{
  font-size:15px; height:44px; border-radius:999px;
  padding:.65rem .95rem; box-shadow:var(--zq-shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease;
}
#zq-menu .zq-mi:hover{transform:translateY(-1px); box-shadow:var(--zq-shadow-lg);}
#zq-menu .zq-mi svg{width:20px;height:20px}

/* Sub pills (Call / WhatsApp) */
#zq-menu .zq-pills{gap:.5rem}
#zq-menu .zq-pill{
  height:40px; padding:.45rem .8rem; border-radius:999px;
  border:1px solid var(--zq-pill-border); background:#fff;
  box-shadow:var(--zq-shadow-sm);
}
#zq-menu .zq-pill svg{width:18px;height:18px}

/* Accents */
#zq-menu .zq-mi:first-of-type{background:linear-gradient(0deg, var(--zq-gold), var(--zq-gold)); color:#fff; border-color:transparent;}
#zq-menu .zq-mi:first-of-type .zq-caret{opacity:.9}

/* Footer note */
#zq-menu .zq-foot{opacity:.70}

/* Mobile tweaks */
@media (max-width:480px){
  #zq-gfab{right:12px;bottom:12px}
  #zq-menu{right:12px;bottom:12px;width:min(94vw,360px)}
}
/* /ZQ-THEME-TUNE */
/* ZQ-THEME-REFINE v2025-09-22 — compact, right-aligned white pills (like before) */
#zq-menu{display:flex;flex-direction:column;align-items:flex-end}
#zq-menu .zq-mi{display:inline-flex;width:fit-content;align-self:flex-end;background:#fff;border:1px solid var(--zq-pill-border);color:var(--zq-ink)}
#zq-menu .zq-mi:first-of-type{background:#fff;border-color:var(--zq-pill-border);color:var(--zq-ink)}
#zq-menu .zq-caret{opacity:.55}
#zq-menu .zq-sub{width:auto}
#zq-menu .zq-pills{justify-content:flex-end}
#zq-menu .zq-pill{background:#fff;border:1px solid var(--zq-pill-border)}
#zq-menu .zq-foot{text-align:right}
#zq-gfab{background:#fff;border:1px solid var(--zq-pill-border)}
/* /ZQ-THEME-REFINE */
/* ZQ-RESTORE v2025-09-22 — bring back compact menu look */
#zq-menu{
  background:#fff; border-radius:12px; padding:12px; 
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
#zq-menu .zq-mi{
  display:flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid rgba(0,0,0,.1);
  border-radius:999px; padding:.5rem .9rem;
  font-size:15px; font-weight:500;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  width:auto; margin:.3rem 0;
}
#zq-menu .zq-mi svg{width:18px;height:18px}
#zq-menu .zq-pills{display:flex;gap:.5rem;justify-content:flex-end}
#zq-menu .zq-pill{
  background:#fff;border:1px solid rgba(0,0,0,.1);
  border-radius:999px;padding:.45rem .8rem;
  font-size:14px;
  box-shadow:0 1px 6px rgba(0,0,0,.05);
}
#zq-menu .zq-foot{
  margin-top:.6rem;font-size:12px;
  opacity:.75;text-align:center;
}
/* /ZQ-RESTORE */
/* ZQ-GFAB-UX-DELUXE v2025-09-22 — elegant floating trigger + menu */
:root{
  --zq-gold:#B6863C;          /* Zoonique gold */
  --zq-beige:#F5F0E6;         /* warm beige */
  --zq-ink:#1F1F1F;
  --zq-pill-bg:#FFFFFF;
  --zq-pill-br:rgba(0,0,0,.12);
  --zq-shadow-sm:0 6px 22px rgba(0,0,0,.10);
  --zq-shadow-lg:0 14px 38px rgba(0,0,0,.18);
  --wa-green:#25D366;         /* WhatsApp brand green */
}

/* 1) Floating "Question?" trigger — hover Gold→Beige, subtle lift */
#zq-gfab{
  position:fixed!important; right:16px!important; bottom:16px!important; z-index:10000!important;
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--zq-pill-bg); color:var(--zq-ink); border:1px solid var(--zq-pill-br);
  border-radius:999px; padding:.65rem .95rem; font-weight:600; line-height:1;
  box-shadow:var(--zq-shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
#zq-gfab .txt{letter-spacing:.12px}
#zq-gfab:hover{
  background:linear-gradient(90deg, var(--zq-gold), var(--zq-beige));
  color:#1b1b1b; border-color:transparent; transform:translateY(-1px);
  box-shadow:var(--zq-shadow-lg);
}
/* 2) Hide trigger when menu opens (JS toggles .zq-menu-open on <html>) */
.zq-menu-open #zq-gfab{opacity:0; pointer-events:none; transform:translateY(8px); transition:.18s ease}

/* 3) Menu: compact right-aligned white chips; smooth open/close */
#zq-menu{position:fixed; right:16px; bottom:16px; z-index:9999; width:min(92vw,360px); display:flex; flex-direction:column; align-items:flex-end; filter:saturate(110%)}
#zq-menu[hidden]{display:none!important}
#zq-scrim{position:fixed; inset:0; background:rgba(0,0,0,.28); backdrop-filter:saturate(120%) blur(2px); z-index:9998}
#zq-scrim[hidden]{display:none!important}

/* Menu rows (Call/WhatsApp, Email, Book Now) */
#zq-menu .zq-mi{
  display:inline-flex; align-items:center; gap:.6rem; align-self:flex-end;
  height:44px; padding:.65rem .95rem; border-radius:999px;
  background:#fff; color:var(--zq-ink); border:1px solid var(--zq-pill-br);
  box-shadow:var(--zq-shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  will-change:transform;
}
#zq-menu .zq-mi:hover{transform:translateY(-1px); box-shadow:var(--zq-shadow-lg)}
#zq-menu .zq-mi svg{width:20px;height:20px;flex:0 0 20px}
#zq-menu .zq-caret{margin-left:.4rem; opacity:.55; transition:transform .18s ease}

/* Submenu container (animated open/close) */
#zq-menu .zq-sub{
  width:auto; overflow:hidden; max-height:0; opacity:0; transform:translateY(-4px);
  transition:max-height .25s ease, opacity .18s ease, transform .18s ease;
  margin-top:.45rem;
}
#zq-menu .zq-sub.show{max-height:200px; opacity:1; transform:translateY(0)}

/* Submenu pills (Call / WhatsApp) */
#zq-menu .zq-pills{display:flex; gap:.5rem; flex-wrap:wrap; justify-content:flex-end}
#zq-menu .zq-pill{
  display:inline-flex; align-items:center; gap:.45rem; height:40px;
  padding:.45rem .85rem; border-radius:999px;
  background:#fff; border:1px solid var(--zq-pill-br); color:var(--zq-ink);
  box-shadow:var(--zq-shadow-sm); text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
#zq-menu .zq-pill:hover{transform:translateY(-1px); box-shadow:var(--zq-shadow-lg)}
#zq-menu .zq-pill svg{width:18px;height:18px}

/* WhatsApp pill in brand green */
#zq-menu .zq-pill.wa{background:var(--wa-green); color:#fff; border-color:transparent}
#zq-menu .zq-pill.wa:hover{filter:saturate(115%)}

/* Rotate caret when submenu is open */
#zq-mi-callwa[aria-expanded="true"] .zq-caret{transform:rotate(90deg)}

/* Footer note right-aligned + softer */
#zq-menu .zq-foot{margin-top:.55rem; font-size:12px; opacity:.72; text-align:right}

/* Mobile nudge */
@media (max-width:480px){
  #zq-gfab{right:12px; bottom:12px}
  #zq-menu{right:12px; bottom:12px; width:min(94vw,360px)}
}
/* ZQ-GFAB-DELUXE-REFINE v2025-09-22 — smaller container, beige panel, tidy icons, slimmer pills, row-style Email/Book */
:root{
  --zq-gold:#B6863C; --zq-beige:#F5F0E6; --zq-ink:#1F1F1F;
  --zq-pill-br:rgba(0,0,0,.12); --zq-shadow-sm:0 6px 18px rgba(0,0,0,.10); --zq-shadow-lg:0 12px 28px rgba(0,0,0,.16);
  --wa-green:#25D366;
}

/* Panel smaller + beige card */
#zq-menu{
  right:16px; bottom:16px; width:min(88vw,320px);
  background:var(--zq-beige); border:1px solid rgba(0,0,0,.06); border-radius:18px;
  padding:14px 12px; gap:10px; box-shadow:var(--zq-shadow-sm);
  display:flex; flex-direction:column; align-items:stretch;
}

/* Make header text (if any) inside panel align nicely */
#zq-menu h1,#zq-menu h2,#zq-menu h3{margin:0 6px 2px 6px; font-size:16px; font-weight:700; color:var(--zq-ink)}

/* Universal icon sizing/alignment */
#zq-menu .zq-mi svg, #zq-menu .zq-pill svg{width:18px;height:18px;display:block}
#zq-menu .zq-mi, #zq-menu .zq-pill{gap:.5rem}

/* Main row buttons (pills) – compact */
#zq-menu .zq-mi{
  align-items:center; height:40px; padding:.55rem .8rem; border-radius:999px;
  background:#fff; color:var(--zq-ink); border:1px solid var(--zq-pill-br);
  box-shadow:var(--zq-shadow-sm);
}
#zq-menu .zq-mi:hover{transform:translateY(-1px); box-shadow:var(--zq-shadow-lg)}
#zq-menu .zq-caret{margin-left:.35rem; opacity:.6;}

/* Submenu (Call / WhatsApp) slimmer pills */
#zq-menu .zq-sub{margin-top:6px}
#zq-menu .zq-pills{justify-content:flex-end}
#zq-menu .zq-pill{
  height:36px; padding:.4rem .75rem; border-radius:999px;
  background:#fff; border:1px solid var(--zq-pill-br); color:var(--zq-ink);
}
#zq-menu .zq-pill.wa{background:var(--wa-green); color:#fff; border-color:transparent}

/* Email + Book as flat rows (not pills) with 8px divider */
#zq-menu .zq-mi-email, #zq-menu .zq-mi[data-cta="book"]{
  background:transparent; border:none; box-shadow:none; height:auto; padding:0 6px;
  border-radius:8px; align-items:center;
}
#zq-menu .zq-mi-email svg, #zq-menu .zq-mi[data-cta="book"] svg{opacity:.9}
#zq-menu .zq-mi-email + .zq-mi[data-cta="book"]{margin-top:8px; padding-top:8px; border-top:1px solid rgba(0,0,0,.10)}

/* Ensure the floating trigger still looks neat and small */
#zq-gfab{height:40px; padding:.55rem .85rem; box-shadow:var(--zq-shadow-sm)}
#zq-gfab:hover{box-shadow:var(--zq-shadow-lg)}

/* Mobile nudge */
@media (max-width:480px){
  #zq-menu{right:12px; bottom:12px; width:min(92vw,320px); padding:12px 10px}
}
/* ZQ-CLASSY-TUNE v2025-09-22 — quieter primary, tighter spacing, baseline-aligned icons, refined Email/Book rows */
:root{
  --zq-gold:#B6863C; --zq-beige:#F5F0E6; --zq-ink:#1F1F1F;
  --zq-br:rgba(0,0,0,.10); --zq-shadow-sm:0 5px 16px rgba(0,0,0,.10); --zq-shadow-lg:0 10px 26px rgba(0,0,0,.16);
  --wa-green:#25D366;
}

/* Panel — a touch smaller, crisper edge, subtle inner stroke */
#zq-menu{width:min(88vw,304px); padding:12px 10px; gap:6px; background:var(--zq-beige);
  border-radius:16px; border:1px solid rgba(0,0,0,.06); box-shadow:var(--zq-shadow-sm), inset 0 0 0 1px rgba(0,0,0,.06)}

/* Consistent icon size/baseline for all controls */
#zq-menu .zq-mi svg, #zq-menu .zq-pill svg{width:18px;height:18px;display:block}

/* Main rows — compact height and spacing */
#zq-menu .zq-mi{height:38px; padding:.5rem .75rem; border-radius:999px; gap:.5rem;
  background:#fff; color:var(--zq-ink); border:1px solid var(--zq-br); box-shadow:var(--zq-shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease}
#zq-menu .zq-mi:hover{transform:translateY(-1px); box-shadow:var(--zq-shadow-lg)}

/* Primary (Call / WhatsApp) — calm by default, gold only on hover */
#zq-mi-callwa{background:#fff; border-color:var(--zq-gold); color:var(--zq-ink)}
#zq-mi-callwa svg path{fill:currentColor}
#zq-mi-callwa .zq-caret{margin-left:.35rem; color:var(--zq-gold)}
#zq-mi-callwa:hover{background:var(--zq-gold); color:#fff; border-color:transparent}
#zq-mi-callwa:hover .zq-caret{color:#fff}

/* Submenu animation + slimmer pills */
#zq-menu .zq-sub{margin-top:6px}
#zq-menu .zq-pills{justify-content:flex-end}
#zq-menu .zq-pill{height:34px; padding:.4rem .7rem; border-radius:999px; background:#fff; border:1px solid var(--zq-br)}
#zq-menu .zq-pill.wa{background:var(--wa-green); color:#fff; border-color:transparent}
#zq-mi-callwa[aria-expanded="true"] .zq-caret{transform:rotate(180deg); transition:transform .18s ease}

/* Email & Book as clean rows with inset divider and aligned baselines */
#zq-menu .zq-mi-email, #zq-menu .zq-mi[data-cta="book"]{background:transparent; border:none; box-shadow:none; height:auto; padding:0 6px; align-items:center}
#zq-menu .zq-mi-email + .zq-mi[data-cta="book"]{margin-top:8px; position:relative; padding-top:10px}
#zq-menu .zq-mi-email + .zq-mi[data-cta="book"]::before{content:""; position:absolute; left:12px; right:12px; top:0; height:1px; background:rgba(0,0,0,.10); border-radius:1px}

/* Floating trigger — keep compact; gold→beige hover already defined */
#zq-gfab{height:40px; padding:.55rem .85rem}

/* Subtle open motion for the stack */
@keyframes zqPop{from{opacity:.0; transform:scale(.98)} to{opacity:1; transform:scale(1)}}
.zq-menu-open #zq-menu{animation:zqPop .18s ease both}

/* Focus visibility for accessibility */
#zq-gfab:focus-visible, #zq-menu .zq-mi:focus-visible, #zq-menu .zq-pill:focus-visible, #zq-menu .zq-copy:focus-visible{
  outline:2px solid #B6863C55; outline-offset:2px; border-radius:12px
}
/* ZQ-CLASSY-TITLE+LAYOUT v2025-09-22 — title bar, full-width primary, left-aligned rows, gold line icons, foot left */
:root{ --zq-gold:#B6863C; --zq-beige:#F5F0E6; --zq-ink:#1F1F1F; --zq-br:rgba(0,0,0,.10); }

/* 1) Title bar behind heading (no HTML change) */
#zq-menu{position:fixed; right:16px; bottom:16px; background:var(--zq-beige); padding-top:52px;}
#zq-menu::before{
  content:"Welcome to Zoonique.";
  position:absolute; left:12px; right:12px; top:10px; z-index:0;
  display:block; height:36px; line-height:36px; padding:0 12px;
  background:#fff; border:1px solid var(--zq-br); border-radius:12px;
  color:var(--zq-ink); font-weight:700; letter-spacing:.1px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
/* Try to hide any pre-existing heading text inside the panel (if present) */
#zq-menu > :where(h1,h2,h3,p):first-child{display:none}

/* 2) Primary "Call / WhatsApp" spans across container */
#zq-mi-callwa{align-self:stretch; width:100%; justify-content:space-between;}
#zq-mi-callwa .zq-caret{margin-left:auto}

/* 3) Email row: left-aligned with gold line icon; not a pill */
#zq-menu .zq-mi-email{
  background:transparent; border:none; box-shadow:none; padding:0 6px; height:auto; align-items:center; gap:.6rem;
}
#zq-menu .zq-mi-email svg path{fill:none; stroke:var(--zq-gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
#zq-menu .zq-mi-email .zq-mail{margin-left:.25rem}

/* 4) Book Now row: left-aligned with gold line icon; not a pill */
#zq-menu .zq-mi[data-cta="book"]{
  background:transparent; border:none; box-shadow:none; padding:0 6px; height:auto; align-items:center; gap:.6rem;
}
#zq-menu .zq-mi[data-cta="book"] svg path{fill:none; stroke:var(--zq-gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
/* Keep the divider tight and elegant */
#zq-menu .zq-mi-email + .zq-mi[data-cta="book"]{margin-top:10px; position:relative; padding-top:10px;}
#zq-menu .zq-mi-email + .zq-mi[data-cta="book"]::before{left:12px; right:12px;}

/* 1+2+3+4) Icon consistency everywhere */
#zq-menu .zq-mi svg, #zq-menu .zq-pill svg{width:18px; height:18px; display:block;}

/* 5) Opening hours left-aligned */
#zq-menu .zq-foot{text-align:left; margin-left:6px}
/* ZQ-CLASSY-TUNE–V2 (2025-09-22) — title weight, dedupe heading, full-width primary, left-aligned rows, clearer divider */
:root{ --zq-gold:#B6863C; --zq-beige:#F5F0E6; --zq-ink:#1F1F1F; --zq-br:rgba(0,0,0,.10); }

/* Title bar: lighter weight + align paddings with content */
#zq-menu{padding:52px 12px 12px !important;}
#zq-menu::before{
  font-weight:600;            /* lighter than bold */
  font-size:15px;
}

/* Remove duplicate static "Welcome to Zoonique ." line if present */
#zq-menu > p:first-of-type{display:none !important}

/* Primary Call/WhatsApp spans exactly the content width (matches title bar) */
#zq-mi-callwa{
  display:flex !important;            /* override older inline-flex rule */
  align-self:stretch !important;
  width:100% !important;
  justify-content:space-between;
  margin:0;                           /* no side gaps */
}

/* Email row: left-aligned (not a pill) */
#zq-menu .zq-mi-email{
  justify-content:flex-start; 
  padding-left:6px; padding-right:6px;
}

/* Book Now row: left-aligned (not a pill) */
#zq-menu .zq-mi[data-cta="book"]{
  justify-content:flex-start; 
  padding-left:6px; padding-right:6px;
}

/* Clearer, elegant separator between Email and Book Now */
#zq-menu .zq-mi-email + .zq-mi[data-cta="book"]{
  margin-top:10px; position:relative; padding-top:12px;
}
#zq-menu .zq-mi-email + .zq-mi[data-cta="book"]::before{
  content:""; position:absolute; left:12px; right:12px; top:0; height:1px;
  background:rgba(0,0,0,.14); border-radius:1px;
}
/* ZQ-FIX–V3 (2025-09-22): remove duplicate welcome line, center submenu pills, keep Email/Book as left-aligned rows (no pills) */

/* 1) Remove the duplicated "Welcome to Zoonique" text line inside the panel */
#zq-menu > p{display:none !important}

/* 2) Center-align the Call/WhatsApp submenu pills */
#zq-menu .zq-sub .zq-pills{justify-content:center !important}

/* 3) Ensure Email and Book Now are not pills and are left-aligned */
#zq-menu .zq-mi-email,
#zq-menu .zq-mi[data-cta="book"]{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  height:auto !important;
  padding:0 6px !important;
  align-items:center !important;
  justify-content:flex-start !important;
  border-radius:0 !important;
}
/* ZQ-FINAL-FIX v2025-09-22 — remove dup title, center submenu, left-align rows (no pills) */
#zq-menu .zq-title{display:none !important;}                      /* 1) remove duplicate "Welcome to Zoonique" */
#zq-menu .zq-sub .zq-pills{justify-content:center !important;}    /* 2) center Call / WhatsApp pills */
#zq-menu .zq-mi-email,
#zq-menu .zq-mi[data-cta="book"]{
  background:transparent !important; border:none !important; box-shadow:none !important;
  padding:0 6px !important; height:auto !important; align-items:center !important;
  justify-content:flex-start !important; border-radius:0 !important; /* 3) left-aligned rows, not pills */
}
/* ZQ-LEFT-LOCK v2025-09-22 — hard-left align Email & Book rows to panel edge */
#zq-menu .zq-mi-email,
#zq-menu .zq-mi[data-cta="book"]{
  align-self:stretch !important;
  width:100% !important;
  padding-left:12px !important;
  padding-right:12px !important;
  text-align:left !important;
}
#zq-menu .zq-mi-email + .zq-mi[data-cta="book"]::before{
  left:12px !important;
  right:12px !important;
}
/* ZQ-PACK-A v2025-09-22 — refined title, calmer primary, centered equal pills, elegant rows, rhythm, and motion */

/* Palette & rhythm */
:root{
  --zq-gold:#B6863C; --zq-beige:#F5F0E6; --zq-ink:#1F1F1F;
  --zq-br:rgba(0,0,0,.10); --zq-br-weak:rgba(0,0,0,.08);
  --zq-shadow-sm:0 4px 14px rgba(0,0,0,.10); --zq-shadow-lg:0 10px 26px rgba(0,0,0,.16);
  --wa-green:#21C65C; /* slightly calmer than #25D366 */
  --space-6:6px; --space-8:8px; --space-12:12px;
}

/* PANEL — lighter title bar, smaller radius & shadow, tighter padding */
#zq-menu{padding:52px var(--space-12) var(--space-12) !important; gap:var(--space-8) !important; box-shadow:var(--zq-shadow-sm) !important; border-radius:12px !important;}
#zq-menu::before{
  font-weight:500 !important; font-size:15px !important; line-height:34px !important; height:34px !important;
  border-radius:12px !important; box-shadow:0 3px 10px rgba(0,0,0,.06) !important; padding:0 var(--space-12) !important;
}

/* PRIMARY (Call/WhatsApp) — calm by default, gold on hover; perfect vertical alignment; full-width */
#zq-mi-callwa{
  align-self:stretch !important; width:100% !important; justify-content:space-between !important;
  height:36px !important; padding:.45rem .7rem !important; border-radius:999px !important;
  background:#fff !important; color:var(--zq-ink) !important; border:1px solid var(--zq-gold) !important;
  box-shadow:var(--zq-shadow-sm) !important; gap:.5rem !important;
}
#zq-mi-callwa:hover{background:var(--zq-gold) !important; color:#fff !important; border-color:transparent !important;}
#zq-mi-callwa svg{width:18px;height:18px;display:block}
#zq-mi-callwa .zq-caret{margin-left:auto; align-self:center;}

/* SUBMENU — centered, equal-sized pills, a notch calmer */
#zq-menu .zq-sub{margin-top:var(--space-6) !important;}
#zq-menu .zq-sub .zq-pills{justify-content:center !important; gap:var(--space-8) !important;}
#zq-menu .zq-pill{
  height:32px !important; padding:.35rem .7rem !important; border-radius:999px !important;
  background:#fff !important; border:1px solid var(--zq-br) !important; color:var(--zq-ink) !important;
  min-width:96px !important; text-align:center; justify-content:center;
}
#zq-menu .zq-pill.wa{background:var(--wa-green) !important; color:#fff !important; border-color:transparent !important;}
#zq-mi-callwa[aria-expanded="true"] .zq-caret{transform:rotate(180deg); transition:transform .2s cubic-bezier(.22,1,.36,1);}

/* EMAIL ROW — left-aligned, perfect spacing, improved contrast, outline Copy chip */
#zq-menu .zq-mi-email{
  align-self:stretch !important; width:100% !important; padding:0 var(--space-12) !important;
  background:transparent !important; border:none !important; box-shadow:none !important; height:auto !important;
  align-items:center !important; justify-content:flex-start !important; gap:8px !important;
}
#zq-menu .zq-mi-email svg path{fill:none; stroke:var(--zq-gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
#zq-menu .zq-mi-email .zq-mail{color:#7a5a23;} /* slightly darker for contrast */
#zq-menu .zq-mi-email + .zq-mi[data-cta="book"]{margin-top:var(--space-8) !important; position:relative; padding-top:var(--space-12) !important;}
#zq-menu .zq-mi-email + .zq-mi[data-cta="book"]::before{
  content:""; position:absolute; left:12px; right:12px; top:0; height:1px; background:var(--zq-br); border-radius:1px;
}
#zq-menu .zq-copy{
  background:transparent !important; border:1px solid var(--zq-gold) !important; color:var(--zq-ink) !important;
  border-radius:999px !important; padding:.2rem .5rem !important; box-shadow:none !important;
}

/* BOOK ROW — left-aligned, chevron affordance via pseudo-element */
#zq-menu .zq-mi[data-cta="book"]{
  align-self:stretch !important; width:100% !important; padding:0 var(--space-12) !important;
  background:transparent !important; border:none !important; box-shadow:none !important; height:auto !important;
  align-items:center !important; justify-content:flex-start !important; gap:8px !important;
}
#zq-menu .zq-mi[data-cta="book"] svg path{fill:none; stroke:var(--zq-gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
#zq-menu .zq-mi[data-cta="book"]::after{
  content:"›"; margin-left:auto; color:var(--zq-gold); font-size:18px; line-height:1; opacity:.9;
}

/* SPACING SCALE across items */
#zq-menu .zq-mi{gap:var(--space-6) !important;}

/* MOTION — premium easing for panel; scrim slightly slower */
@keyframes zqPop{from{opacity:.0; transform:scale(.985)} to{opacity:1; transform:scale(1)}}
.zq-menu-open #zq-menu{animation:zqPop .22s cubic-bezier(.22,1,.36,1) both}
#zq-scrim{transition:opacity .28s cubic-bezier(.22,1,.36,1)}

/* ACCESSIBILITY — keep tap targets comfy on mobile */
@media (max-width:480px){
  #zq-mi-callwa{height:40px !important;}
  #zq-menu .zq-pill{height:36px !important;}
}
/* ZQ-POLISH-PACK v2025-09-22 — last-10% refinements */

/* 1) Panel + title: slightly smaller/softer; elegant backdrop for busy photos */
#zq-menu{
  border-radius:11px !important;
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0)) /* subtle glaze */,
    var(--zq-beige) !important;
  box-shadow:var(--zq-shadow-sm) !important;
}
#zq-menu::before{
  height:32px !important; line-height:32px !important;
  border-radius:10px !important; box-shadow:0 2px 8px rgba(0,0,0,.05) !important;
}

/* 2) Primary row: tactile hover, crisp alignment */
#zq-mi-callwa{height:34px !important; padding:.4rem .65rem !important;}
#zq-mi-callwa:hover{
  background:linear-gradient(0deg, var(--zq-gold), color-mix(in srgb, var(--zq-gold) 88%, #ffffff)) !important;
}
#zq-mi-callwa svg{width:18px;height:18px;display:block}
#zq-mi-callwa .zq-caret{align-self:center}

/* 3) Sub-pills: centered, equal width, calmer WA green */
#zq-menu .zq-sub .zq-pills{gap:8px !important; justify-content:center !important}
#zq-menu .zq-pill{
  flex:0 0 120px !important; min-width:120px !important;
  height:32px !important; justify-content:center; text-align:center;
}
#zq-menu .zq-pill.wa{background:#20BF58 !important} /* a touch deeper than #21C65C */

/* 4) Email/Book rows: refined hover/affordance; chevron touch target */
#zq-menu .zq-mi-email:hover,
#zq-menu .zq-mi[data-cta="book"]:hover{background:rgba(182,134,60,.06) !important; border-radius:8px}
#zq-menu .zq-mi[data-cta="book"]{position:relative}
#zq-menu .zq-mi[data-cta="book"]::after{
  content:"›"; position:absolute; right:12px; top:50%; translate:0 -50%;
  color:var(--zq-gold); font-size:18px; line-height:1; padding:6px 4px; border-radius:6px;
}

/* 5) Copy success style (future-proof if JS toggles a class) */
#zq-menu .zq-copy.is-copied,
#zq-menu .zq-copy.copied{
  background:var(--zq-gold) !important; color:#fff !important; border-color:transparent !important;
}

/* 6) Motion & accessibility: premium easing; respect reduced motion */
@media (prefers-reduced-motion:no-preference){
  @keyframes zqPop2{from{opacity:.0; transform:scale(.985)} to{opacity:1; transform:scale(1)}}
  .zq-menu-open #zq-menu{animation:zqPop2 .22s cubic-bezier(.22,1,.36,1) both}
  #zq-scrim{transition:opacity .28s cubic-bezier(.22,1,.36,1)}
}
@media (prefers-reduced-motion:reduce){
  .zq-menu-open #zq-menu{animation:none}
  #zq-scrim{transition:none}
}

/* 7) Mobile: keep comfortable tap targets */
@media (max-width:480px){
  #zq-mi-callwa{height:38px !important}
  #zq-menu .zq-pill{height:36px !important}
}
/* ZQ-GFAB-ICON v2025-09-22 — add elegant line icon before "Question?" and refine spacing (URL-encoded SVG) */
#zq-gfab{gap:.55rem !important; padding-left:.9rem !important; padding-right:.95rem !important;}
#zq-gfab::before{
  content:"";
  width:18px; height:18px; flex:0 0 18px; display:block;
  background-repeat:no-repeat; background-size:18px 18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 15a4 4 0 0 1-4 4H8l-4 4V6a4 4 0 0 1 4-4h9a4 4 0 0 1 4 4z%22/%3E%3Cpath d=%22M10 8a3 3 0 0 1 6 0c0 1.5-1 2-2 2%22/%3E%3Cpath d=%22M13 14h.01%22/%3E%3C/svg%3E");
}
/* ensure contrast on hover gradient */
#zq-gfab:hover{color:#1B1B1B !important}
/* ZQ-GFAB-ICON-FIX v2025-09-22 — remove tiny white tick before the icon */
#zq-gfab{
  overflow:hidden;           /* clip any sub-pixel bleed */
  isolation:isolate;         /* isolate stacking for cleaner edges */
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  transform:translateZ(0);   /* nudge GPU to avoid hairline seams */
}
#zq-gfab::before{
  background-position:center center !important; /* center the SVG precisely */
  background-color:transparent !important;      /* no fill behind the SVG */
}
/* ZQ-GFAB-ICON-FIX v2025-09-22 — remove tiny white tick before the icon */
#zq-gfab{
  overflow:hidden;           /* clip any sub-pixel bleed */
  isolation:isolate;         /* isolate stacking for cleaner edges */
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  transform:translateZ(0);   /* nudge GPU to avoid hairline seams */
}
#zq-gfab::before{
  background-position:center center !important; /* center the SVG precisely */
  background-color:transparent !important;      /* no fill behind the SVG */
}
/* ZQ-GFAB-ICON-MASK v2025-09-22 — pixel-perfect mask for the Question icon */
#zq-gfab::before{
  background-image:none !important;           /* kill previous background-image */
  background-color:currentColor !important;   /* icon inherits text color */
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 15a4 4 0 0 1-4 4H8l-4 4V6a4 4 0 0 1 4-4h9a4 4 0 0 1 4 4z%22/%3E%3Cpath d=%22M10 8a3 3 0 0 1 6 0c0 1.5-1 2-2 2%22/%3E%3Cpath d=%22M13 14h.01%22/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 15a4 4 0 0 1-4 4H8l-4 4V6a4 4 0 0 1 4-4h9a4 4 0 0 1 4 4z%22/%3E%3Cpath d=%22M10 8a3 3 0 0 1 6 0c0 1.5-1 2-2 2%22/%3E%3Cpath d=%22M13 14h.01%22/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;              mask-repeat:no-repeat;
  -webkit-mask-size:18px 18px;               mask-size:18px 18px;
  -webkit-mask-position:center;              mask-position:center;
}
/* ZQ-GFAB-BREATH v2025-09-22 — subtle one-shot attention cue after idle */
@media (prefers-reduced-motion:no-preference){
  @keyframes zqBreath {
    0%   { transform:translateZ(0) scale(1);   box-shadow:var(--zq-shadow-sm); }
    40%  { transform:translateZ(0) scale(1.035); box-shadow:var(--zq-shadow-lg); }
    100% { transform:translateZ(0) scale(1);   box-shadow:var(--zq-shadow-sm); }
  }
  #zq-gfab{
    animation-name:zqBreath;
    animation-duration:800ms;
    animation-timing-function:cubic-bezier(.22,1,.36,1);
    animation-delay:6s;              /* play after idle */
    animation-iteration-count:1;     /* once */
    animation-fill-mode:both;
  }
  /* If user hovers or menu is open, cancel the cue */
  #zq-gfab:hover,
  .zq-menu-open #zq-gfab{ animation:none !important; }
}
@media (prefers-reduced-motion:reduce){
  #zq-gfab{ animation:none !important; }
}
/* ZQ-GFAB-ICON-2BUB v2025-09-22 — two-bubble chat icon before "Question?" */
#zq-gfab{gap:.55rem !important; padding-left:.9rem !important;}
#zq-gfab::before{
  content:"";
  width:18px; height:18px; flex:0 0 18px; display:block;
  background-color:currentColor !important; /* icon inherits text color */
  /* Two overlapping chat bubbles (outline) — mask = pixel-perfect edges */
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27000%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 13a4 4 0 0 0 4 4h4l3 2v-2h1a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v5Z%27/%3E%3Crect x=%279%27 y=%273%27 width=%2712%27 height=%279%27 rx=%273%27/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27000%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 13a4 4 0 0 0 4 4h4l3 2v-2h1a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v5Z%27/%3E%3Crect x=%279%27 y=%273%27 width=%2712%27 height=%279%27 rx=%273%27/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:18px 18px; mask-size:18px 18px;
  -webkit-mask-position:center; mask-position:center;
}
/* ZQ-GFAB-ICON-FALLBACK v2025-09-22 — show the 2-bubble icon everywhere; upgrade to mask when supported */

/* Base: background-image fallback (always renders) */
#zq-gfab{display:inline-flex !important; align-items:center !important; gap:.55rem !important; padding-left:.9rem !important;}
#zq-gfab::before{
  content:"";
  width:18px; height:18px; flex:0 0 18px; display:block;
  background-repeat:no-repeat; background-position:center; background-size:16px 16px;
  /* two-bubble outline, follows currentColor */
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 13a4 4 0 0 0 4 4h4l3 2v-2h1a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v5Z%27/%3E%3Crect x=%279%27 y=%273%27 width=%2712%27 height=%279%27 rx=%273%27/%3E%3C/svg%3E");
}

/* Upgrade: use vector mask when supported (edge-perfect) */
@supports (mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27/%3E")) {
  #zq-gfab::before{
    background-image:none !important;
    background-color:currentColor !important;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27000%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 13a4 4 0 0 0 4 4h4l3 2v-2h1a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v5Z%27/%3E%3Crect x=%279%27 y=%273%27 width=%2712%27 height=%279%27 rx=%273%27/%3E%3C/svg%3E");
            mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27000%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 13a4 4 0 0 0 4 4h4l3 2v-2h1a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v5Z%27/%3E%3Crect x=%279%27 y=%273%27 width=%2712%27 height=%279%27 rx=%273%27/%3E%3C/svg%3E");
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-size:16px 16px;   mask-size:16px 16px;
    -webkit-mask-position:center;  mask-position:center;
  }
}
/* ZQ-GFAB-ICON-FORCE v2025-09-22 — element-bg fallback; disable ::before */
#zq-gfab::before{content:none !important}
#zq-gfab{
  padding-left:2.1rem !important;                 /* make room for icon */
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 13a4 4 0 0 0 4 4h4l3 2v-2h1a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v5Z%27/%3E%3Crect x=%279%27 y=%273%27 width=%2712%27 height=%279%27 rx=%273%27/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:12px center !important;
  background-size:16px 16px !important;
}
/* ZQ-GFAB-PROPORTION v2025-09-22 — tighten Question trigger */
#zq-gfab{
  height:38px !important;                         /* a touch slimmer */
  padding-left:1.7rem !important;                 /* less push from icon */
  padding-right:.9rem !important;
  border-color:rgba(0,0,0,.12) !important;        /* softer ring */
  letter-spacing:.08px;                            /* calmer text */
}
#zq-gfab{background-size:14px 14px !important; background-position:11px center !important;}
/* swap to slightly thinner-stroke 2-bubble icon */
#zq-gfab{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 13a4 4 0 0 0 4 4h4l3 2v-2h1a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v5Z%27/%3E%3Crect x=%279%27 y=%273%27 width=%2712%27 height=%279%27 rx=%273%27/%3E%3C/svg%3E") !important;}
@media (max-width:480px){
  #zq-gfab{height:40px !important; background-size:16px 16px !important;}
}
/* ZQ-GFAB-MICRO v2025-09-22 — vertical nudge, color nuance, hover depth, mobile padding */
#zq-gfab{color:var(--zq-ink) !important;}
#zq-gfab{background-position:11px calc(50% + 1px) !important;} /* icon down 1px */
#zq-gfab:hover{color:#fff !important; box-shadow:0 2px 6px rgba(0,0,0,.15), var(--zq-shadow-sm) !important;}
@media (max-width:480px){
  #zq-gfab{padding-left:1.9rem !important;} /* a touch more thumb room */
}
/* ZQ-TOPBAR-POLISH v2025-09-23 */
#zq-topbar:not(*){backdrop-filter:saturate(1.2) blur(3px);}
#zq-topbar:not(*) a{font-size:.95rem; text-decoration:none; color:#111;}
#zq-topbar:not(*) a:hover{text-decoration:underline;}
@media (max-width: 768px){
  #zq-topbar:not(*) nav a[href="/"], 
  #zq-topbar:not(*) nav a[href="#gallery"]{display:none;} /* keep Book Now on mobile */
}
/* ZQ-TOPBAR-FORCE v2025-09-23 */
#zq-topbar:not(*){
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 2147483647 !important; /* sit above any overlay */
  background:#fff !important;
  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
body{ padding-top: 64px; } /* prevent overlap with content */
/* ZQ-TOPBAR-TUNE v2025-09-23 — keep only Book Now, remove extra white band */
body{ padding-top:0 !important; }
#zq-topbar:not(*){
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  height: 56px;
}
#zq-topbar:not(*) > div{ padding: 8px 16px !important; }
/* Hide temporary brand + nav so only Book Now remains */
#zq-topbar:not(*) nav a[href="/"],
#zq-topbar:not(*) nav a[href="#gallery"]{ display:none !important; }
#zq-topbar:not(*) > div > a[href="/"]{ display:none !important; }
/* ZQ CLEAN TOPBAR v2025-09-23 */
:root{ --zq-topbar-h:56px; }

#zq-topbar:not(*){
  position:fixed; top:0; left:0; right:0; height:var(--zq-topbar-h);
  z-index:10020; background:#fff; border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
#zq-topbar:not(*) .inner{
  max-width:1200px; margin:0 auto; padding:8px 16px;
  display:flex; align-items:center; justify-content:space-between;
}
#zq-topbar:not(*) .brand{ font-weight:600; letter-spacing:.5px; color:#111; text-decoration:none; }
#zq-topbar:not(*) .cta{
  background:#B6863C; color:#fff; text-decoration:none;
  padding:8px 12px; border-radius:999px; font-weight:500;
}
/* push content down so bar doesnt
/* ZQ CLEAN TOPBAR v2025-09-23 */
:root{ --zq-topbar-h:56px; }

#zq-topbar:not(*){
  position:fixed; top:0; left:0; right:0; height:var(--zq-topbar-h);
  z-index:10020; background:#fff; border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
#zq-topbar:not(*) .inner{
  max-width:1200px; margin:0 auto; padding:8px 16px;
  display:flex; align-items:center; justify-content:space-between;
}
#zq-topbar:not(*) .brand{ font-weight:600; letter-spacing:.5px; color:#111; text-decoration:none; }
#zq-topbar:not(*) .cta{
  background:#B6863C; color:#fff; text-decoration:none;
  padding:8px 12px; border-radius:999px; font-weight:500;
}
#root{ margin-top:0 !important; }
/* ZQ DESKTOP NAV FIX */
@media (min-width: 768px){
  header nav.md\:flex { display: flex !important; }
  /* optional polish */
  header nav.md\:flex a { color:#3b342c; font-weight:500; text-decoration:none; }
  header nav.md\:flex a:hover { color:#B6863C; }
}
/* === ZQ: force desktop nav visible (Option A) === */
@media (min-width: 768px){
  /* Elements using Tailwind-style class "md:flex" */
  nav.md\:flex{ display: flex !important; }

  /* Safety: any element with md:flex inside header */
  header .md\:flex{ display: flex !important; }
}

/* Optional: a touch of styling so links look right */
header nav a{ color:#444; text-decoration:none; font-weight:500; }
header nav a:hover{ color:#B6863C; }
/* ZQ: force desktop nav visible */
@media (min-width: 768px){
  nav.md\:flex { display: flex !important; }
}

/* kill legacy top bar */
#zq-topbar:not(*){display:none!important}
/* ZQ: remove legacy sticky top strip */
#zq-topbar:not(*), .zq-topbar:not(*), .top-strip:not(*) { display:none !important; }
/* ensure no layout offset from old strip */
body { padding-top:0 !important; }

/* ZQ: remove old topbar offset */
#root{margin-top:0!important}
/* ZQ: remove legacy topbar spacing */
:root{ --zq-topbar-h:0px !important; }
#root{ margin-top:0 !important; }
/* ZQ-GFAB-NO-JUMP v2025-09-23 — lock size/position; prevent hover shift */
#zq-gfab{
  position:fixed; right:12px; bottom:12px;
  height:40px; padding:.55rem .85rem; /* freeze padding */
  display:inline-flex; align-items:center; gap:.55rem;
  border-width:1px; box-sizing:border-box;
  transform:none !important; will-change:auto;
}
#zq-gfab:hover{
  transform:none !important;                 /* no translate on hover */
  padding:.55rem .85rem !important;          /* no padding change */
  border-width:1px !important;               /* no border growth */
}
#zq-gfab::before{ transform:none !important; } /* keep icon steady */
/* ZQ-GFAB-HOVER-LOCK v2025-09-23 — fix hover transparency/white text */
#zq-gfab,
#zq-gfab:hover,
#zq-gfab:focus{
  background: var(--zq-beige,#F5F0E6) !important;
  color: #1B1B1B !important;
  border: 1px solid var(--zq-gold,#B6863C) !important;
  text-decoration: none !important;
  opacity: 1 !important;
}
#zq-gfab:hover,
#zq-gfab:focus{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
#zq-gfab::before{ opacity:1 !important; filter:none !important; }
/* end ZQ-GFAB-HOVER-LOCK */
/* ZQ-GFAB FIX v2025-09-23b — lock border & padding to stop jump and remove outline */
#zq-gfab{
  box-sizing:border-box;
  border:1px solid transparent !important; /* keep 1px width always */
  outline:none !important;
  padding-left:.9rem !important;
  padding-right:.95rem !important;
}
#zq-gfab:hover{
  border-color:transparent !important;      /* same width on hover */
  outline:none !important;
}

/* ZQ-MENU-TOGGLE hard hide */
.zq-menu-open #zq-gfab{opacity:0!important;pointer-events:none!important;transform:translateY(8px)!important}
/* ZQ-GFAB-HOVER-FIX v2025-09-24 — consistent size + gold hover */
#zq-gfab{
  background:#F2E9DC !important;
  color:#1B1B1B !important;
  border:1px solid transparent !important;   /* prevents width jump */
  box-sizing:border-box;
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.55rem .95rem !important;          /* fixed padding so it won’t shrink */
  white-space:nowrap; font-weight:600;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
#zq-gfab:hover{
  background:#B6863C !important;             /* gold */
  color:#fff !important;
  transform:translateY(-1px);                 /* subtle lift only */
}
#zq-gfab:hover .txt{ color:inherit; }
/* ZQ-GFAB-SINGLE-BUB v2025-09-24 */
#zq-gfab{display:inline-flex; align-items:center; gap:.55rem; padding-left:.9rem;}
#zq-gfab::before{
  content:""; display:inline-block; width:18px; height:18px;
  background:currentColor; opacity:.9;
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 14a4 4 0 0 1-4 4H8-4 4V6a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4z'/></svg>");
  -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain;
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 14a4 4 0 0 1-4 4H8l-4 4V6a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4z'/></svg>");
          mask-repeat:no-repeat;     mask-position:center;     mask-size:contain;
}
/* End ZQ-GFAB-SINGLE-BUB *//* ZQ-GFAB-UNICODE-BUB v2025-09-24 — simple single bubble icon */
#zq-gfab{display:inline-flex;align-items:center;gap:.55rem;padding-left:.9rem;}
#zq-gfab::before{
  content:"\01F4AC"; /* 💬 */
  display:inline-block;
  font-size:18px; line-height:1; opacity:.95;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  transform:translateY(1px); /* small optical align */
}
/* End ZQ-GFAB-UNICODE-BUB */
/* ZQ-GFAB-INLINE-ICON v2025-09-24 */
#zq-gfab{display:inline-flex;align-items:center;gap:.55rem;}
#zq-gfab .zq-icon{
  width:18px;height:18px;flex:0 0 18px;
  display:inline-block;vertical-align:middle;
}
/* ZQ-GFAB-TIGHTER v2025-09-24d */
#zq-gfab{ gap:.25rem !important; }
#zq-gfab::before{ width:14px !important; height:14px !important; flex:0 0 14px !important; }
/* ZQ-GFAB-TIGHTER v2025-09-24d */
#zq-gfab{ gap:.25rem !important; }
#zq-gfab::before{ width:14px !important; height:14px !important; flex:0 0 14px !important; }
/* ==========================
   ZQ-CLEAN v2025-09-25
   Final, production overrides
   ========================== */
:root{--zq-gold:#B6863C;--zq-beige:#F5F0E6;--zq-ink:#1B1B1B;}

/* Desktop nav visible */
header nav.md\:flex, nav.md\:flex{display:flex!important}
header nav.md\:flex a{color:#3b342c;font-weight:500;text-decoration:none}
header nav.md\:flex a:hover{color:#B6863C}

/* Remove legacy top strip */
#zq-topbar,.zq-topbar,.top-strip{display:none!important}

/* Floating “Question?” button */
#zq-gfab{
  position:fixed;right:16px;bottom:16px;z-index:9998;
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.50rem .85rem .50rem .72rem;border-radius:999px;
  border:1px solid rgba(0,0,0,.10);background:#fff;color:var(--zq-ink);
  font-weight:600;box-shadow:0 6px 24px rgba(0,0,0,.08);
  transition:transform .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease;
}
#zq-gfab:hover{background:linear-gradient(90deg,var(--zq-gold),var(--zq-beige));color:var(--zq-ink);border-color:transparent;transform:translateY(-1px)}
#zq-gfab:active{transform:translateY(0)}
#zq-gfab .txt{font-weight:700;letter-spacing:.12px}

/* Single bubble icon (tight, emoji—robust) */
#zq-gfab::before{
  content:"\01F4AC"; /* 💬 */
  display:inline-block; font-size:14px; line-height:1; translate:0 .5px;
}
/* ========================== end ZQ-CLEAN ========================== */

/* ==========================
   ZQ-RESPONSIVE-FIX v2025-09-26
   Keep desktop menu desktop-only; ensure logo shows on mobile
   ========================== */

/* Desktop ≥768px: show the md:flex menu */
@media (min-width: 768px){
  header nav.md\:flex, nav.md\:flex{ display:flex !important; }
}

/* Mobile <768px: hide the desktop menu block */
@media (max-width: 767.98px){
  header nav.md\:flex, nav.md\:flex{ display:none !important; }

  /* Make sure brand/logo remains visible */
  header .logo,
  header .brand,
  header a[aria-label="Zoonique"]{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  header .logo img{ max-height:40px; width:auto; }
}

/* ZQ-MOBILE-HAMBURGER v2025-09-26 — ensure header hamburger shows on mobile */
@media (max-width: 767.98px){
  header .md\:hidden{ display:block !important; }
  header nav.hidden{ display:none !important; }
}

/* ZQ-RESPONSIVE-FIX v2025-09-26 — complete mobile block */
@media (max-width: 767.98px){
  /* hide desktop nav on phones */
  header nav.md\:flex, nav.md\:flex{ display:none !important; }
  /* show brand/logo */
  header .logo,
  header .brand,
  header a[aria-label="Zoonique"]{ display:block !important; opacity:1 !important; }
  header .logo img{ max-height:40px; height:auto; width:auto; }
}