/* =========================================================
   GLAYZE — SHARED COMPONENTS
   One preloader, one header, one footer for every page.

   This is the homepage header and footer, lifted out and made
   portable. Two rules governed the port:

   1. Everything is namespaced `gz-`. The four pages each define
      their own `.container`, `.logo`, `header {}` and `footer {}`
      with different values, so the shared component cannot borrow
      any of them — it carries its own layout.

   2. Every colour is var(--token, fallback). The pages that define
      the Glayze tokens pick them up; anything that doesn't still
      renders correctly off the fallbacks.

   Pair with shared/glayze.js, which injects the markup.
   ========================================================= */

:root {
  --gz-nav-h: 104px;

  /* The fixed layers, in one place. They were literals scattered through
     the file, and the homepage happened to have an overlay at exactly
     999 too — on a tie DOM order decides, and the header lost. */
  --gz-z-grain:     700;
  --gz-z-cursor:    9500;
  --gz-z-menu:      998;
  --gz-z-header:    1000;
  --gz-z-preloader: 10000;
  --gz-z-skip:      10001;
}

/* =========================================================
   PRELOADER

   Two layers, and the order matters.

   The BOOT SHIELD is pure CSS on <html>, keyed on the *absence* of
   .gz-loaded. That means it is painted on the very first frame the browser
   produces — before any script has run, before the DOM has finished
   parsing. The real preloader used to be injected on DOMContentLoaded,
   which is after the browser has already painted most of the page: you saw
   the site, and then the loading screen dropped over it.

   It self-destructs at 6s through an animation rather than waiting for a
   class, so a page whose JavaScript never arrives can't be left behind a
   dark rectangle forever.
   ========================================================= */

html:not(.gz-loaded)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9990;                       /* just under the real preloader */
  background: var(--choc-deep, #1C0F06);
  pointer-events: none;
  animation: gzBootLift 400ms linear 6s forwards;
}

@keyframes gzBootLift { to { opacity: 0; visibility: hidden; } }

/* the shield fades with the preloader rather than snapping away */
html.gz-loaded::before { content: none; }

@media (prefers-reduced-motion: reduce) {
  html:not(.gz-loaded)::before { content: none; }
}

.gz-preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: var(--choc-deep, #1C0F06);
  transition: opacity 800ms ease 150ms, visibility 800ms ease 150ms;
}

.gz-preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.gz-preloader__word {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(48px, 10vw, 140px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--gold, #C8922A);
  white-space: nowrap;
  overflow: hidden;
  animation: gzPreloadReveal 1.3s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.gz-preloader__bar {
  position: absolute;
  left: 50%;
  bottom: 22%;
  transform: translateX(-50%);
  width: min(220px, 40vw);
  height: 1px;
  background: rgba(250, 247, 242, 0.14);
  overflow: hidden;
}

.gz-preloader__bar::after {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  background: var(--gold, #C8922A);
  transform: scaleX(0);
  transform-origin: left center;
  animation: gzPreloadBar 1.5s ease-out forwards;
}

@keyframes gzPreloadReveal {
  0%   { clip-path: inset(0 100% 0 0); opacity: 0; }
  40%  { opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes gzPreloadBar {
  to { transform: scaleX(1); }
}

/* =========================================================
   HEADER
   Transparent over the hero; on scroll it lands on cream with a
   blur and everything inverts to black. Scrolling down hides it,
   scrolling back up brings it in.
   ========================================================= */

.gz-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--gz-z-header, 1000);
  padding-block: 10px;
  transition: top 0.5s ease-in-out, background 0.5s ease-in-out,
              padding 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}

/* Three tracks — logo, nav, socials. The homepage did this with three
   flex children at width: 40% each, which only stays centred while the
   nav is short. Grid keeps the nav exactly centred and, more usefully,
   stops it overflowing now that there are seven links in it. */
.gz-header__bar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 5px 15px;
}

.gz-header__logo   { grid-column: 1; }
.gz-header__nav    { grid-column: 2; }
.gz-header__social { grid-column: 3; justify-self: end; }
.gz-burger         { grid-column: 3; justify-self: end; }

/* --- landed state --- */
.gz-header.is-stuck {
  background: rgba(250, 247, 242, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  padding-block: 5px;
  box-shadow: 10px 10px 30px #00000015;
}

/* --- hidden on the way down --- */
.gz-header.is-hidden { top: -200px; }

/* --- logo --- */
.gz-header__logo {
  display: block;
  max-width: 250px;
  line-height: 0;
}

.gz-header__logo img {
  width: 97px;
  height: auto;
  display: block;
  transition: max-width 0.9s ease-in-out, filter 0.9s ease-in-out;
}

.gz-header.is-stuck .gz-header__logo img {
  max-width: 88px;
  filter: brightness(0);
}

/* --- nav --- */
.gz-header__nav ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gz-header__nav li { padding: 0 5px; }

.gz-header__nav a {
  display: block;
  padding: 5px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream, #FAF7F2);
  text-decoration: none;
  transition: color 200ms ease;
}

.gz-header__nav a:hover,
.gz-header__nav a[aria-current="page"] { color: var(--gold, #C8922A); }

.gz-header.is-stuck .gz-header__nav a { color: var(--text, #2A1608); }
.gz-header.is-stuck .gz-header__nav a:hover,
.gz-header.is-stuck .gz-header__nav a[aria-current="page"] { color: var(--gold, #C8922A); }

/* --- socials --- */
.gz-header__social {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  max-width: 350px;
}

.gz-header__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--cream, #FAF7F2);
  transition: transform 200ms ease, background 200ms ease, color 200ms ease;
}

.gz-header__social a:hover {
  transform: scale(1.05);
  background: var(--gold, #C8922A);
  color: var(--cream, #FAF7F2);
}

.gz-header__social svg { width: 19px; height: 19px; fill: currentColor; }

.gz-header.is-stuck .gz-header__social a { color: var(--text, #2A1608); }
.gz-header.is-stuck .gz-header__social a:hover { color: var(--cream, #FAF7F2); }

/* --- burger, desktop-hidden --- */
.gz-burger {
  display: none;
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gz-burger span {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 2px;
  background: var(--cream, #FAF7F2);
  transition: transform 0.25s ease-out, opacity 0.15s ease-out, background 0.2s ease-out;
}

.gz-burger span:nth-child(1) { top: 14px; }
.gz-burger span:nth-child(2) { top: 19px; }
.gz-burger span:nth-child(3) { top: 24px; }

.gz-header.is-stuck .gz-burger span,
.gz-header.menu-open .gz-burger span { background: var(--choc-deep, #1C0F06); }

.gz-burger.is-open span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.gz-burger.is-open span:nth-child(2) { opacity: 0; }
.gz-burger.is-open span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* --- full-screen mobile menu --- */
.gz-menu {
  position: fixed;
  inset: 0;
  z-index: 998;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--cream, #FAF7F2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out 0.1s, visibility 0s linear 0.5s;
}

.gz-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in-out 0.1s, visibility 0s linear 0s;
}

.gz-menu__list {
  margin: 0;
  padding: 0 5vw;
  list-style: none;
}

.gz-menu__list a {
  display: block;
  padding: 6px 0;
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-weight: 300;
  font-size: 10vw;
  line-height: 1.15;
  color: var(--text, #2A1608);
  text-decoration: none;
  transform: translate(10px, 100%) rotate(6deg);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.gz-menu.is-open .gz-menu__list a {
  transform: none;
  opacity: 1;
  transition: all 0.8s cubic-bezier(0.65, 0.05, 0.36, 1) 0.25s;
}

.gz-menu.is-open .gz-menu__list li:nth-child(1) a { transition-delay: 0.25s; }
.gz-menu.is-open .gz-menu__list li:nth-child(2) a { transition-delay: 0.32s; }
.gz-menu.is-open .gz-menu__list li:nth-child(3) a { transition-delay: 0.39s; }
.gz-menu.is-open .gz-menu__list li:nth-child(4) a { transition-delay: 0.46s; }
.gz-menu.is-open .gz-menu__list li:nth-child(5) a { transition-delay: 0.53s; }

.gz-menu__list a:hover,
.gz-menu__list a[aria-current="page"] {
  color: var(--gold, #C8922A);
  font-style: italic;
}

.gz-menu__social {
  display: flex;
  gap: 14px;
  padding: 30px 5vw 0;
}

.gz-menu__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--text, #2A1608);
}

.gz-menu__social svg { width: 20px; height: 20px; fill: currentColor; }

/* =========================================================
   FOOTER
   ========================================================= */

.gz-footer {
  position: relative;
  background: var(--choc-deep, #1C0F06);
  overflow: hidden;
}

.gz-footer__box {
  position: relative;
  padding-bottom: 100px;
}

.gz-footer__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1650px;
  margin: 0 auto;
  padding: 70px 15px 0;
}

.gz-footer__brand {
  margin: 0;
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-weight: 300;
  font-size: clamp(48px, 8vw, 120px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--cream, #FAF7F2);
}

.gz-footer__brand em {
  font-style: normal;
  color: var(--gold, #C8922A);
}

.gz-footer a,
.gz-footer p {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-block: 25px;
  font-size: 16px;
  font-weight: 300;
  color: rgba(250, 247, 242, 0.7);
  text-decoration: none;
  transition: 0.3s ease;
}

.gz-footer a:hover { color: var(--gold-light, #E8C97A); }

.gz-footer__links {
  display: flex;
  align-items: center;
  gap: 35px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gz-footer__links li { position: relative; }

.gz-footer__links li + li::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -20px;
  margin: auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold, #C8922A);
}

.gz-footer__address {
  max-width: 370px;
  font-size: 20px;
  line-height: 26px;
}

.gz-footer__social {
  display: flex;
  align-items: center;
  gap: 20px;
}

.gz-footer__social a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-block: 0;
  border-radius: 50%;
  color: rgba(250, 247, 242, 0.7);
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.gz-footer__social a:hover {
  transform: scale(1.1);
  background: var(--gold, #C8922A);
  color: var(--cream, #FAF7F2);
}

.gz-footer__social svg { width: 17px; height: 17px; fill: currentColor; }

.gz-footer__mark {
  position: absolute;
  right: 90px;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  height: auto;
  opacity: 0.95;
}

.gz-footer__copyright {
  position: relative;
  background: var(--choc-deep, #1C0F06);
  border-top: 1px solid rgba(200, 146, 42, 0.2);
  padding-block: 15px;
}

.gz-footer__copyright small {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 15px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 14px;
  font-weight: 400;
  color: var(--cream, #FAF7F2);
  text-align: center;
}

/* =========================================================
   FORM FEEDBACK
   Shared by every WhatsApp form on the site, so validation looks
   the same wherever it appears.
   ========================================================= */

.gz-form-note {
  margin: 14px 0 0;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 13.5px;
  line-height: 1.6;
  min-height: 0;
}

.gz-form-note:empty { display: none; }

.gz-form-note.is-error { color: #C0492F; }
.gz-form-note.is-ok    { color: var(--gold, #C8922A); }

.gz-invalid input,
.gz-invalid select,
.gz-invalid textarea {
  border-color: #C0492F !important;
  box-shadow: 0 0 0 3px rgba(192, 73, 47, 0.12);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1550px) {
  .gz-footer__mark { right: 40px; width: 190px; }
}

/* seven links is a lot of tracking — tighten as the bar narrows */
@media (max-width: 1400px) {
  .gz-header__bar { gap: 20px; }
  .gz-header__nav a { font-size: 10px; letter-spacing: 0.15em; }
  .gz-header__nav li { padding: 0 3px; }
}

@media (max-width: 1150px) {
  .gz-header__nav a { font-size: 9.5px; letter-spacing: 0.1em; }
  .gz-header__logo img { width: 82px; }
  .gz-header__social { display: none; }
}
.formFoot .gzE-btn:hover{
  color: #fff !important;
 }
@media (max-width: 992px) {
  .gz-header { background: var(--choc-deep, #1C0F06); }
  .gz-header.is-stuck { box-shadow: none; }
  .gz-header__bar { gap: 0; justify-content: space-between; }

  .gz-header__logo img { width: 84px; }
  .gz-header.is-stuck .gz-header__logo img { max-width: 76px; }
  .gz-header__nav, .gz-header__social { display: none; }
  .gz-burger { display: block; }

  /* the cream overlay sits behind the bar, so the bar goes dark-on-cream */
  .gz-header.menu-open { background: transparent; box-shadow: none; }
  .gz-header.menu-open .gz-header__logo img { filter: brightness(0); }

  .gz-footer__box { padding-bottom: 0; }
  .gz-footer__brand { font-size: 48px; }
  .gz-footer__links { display: block; }
  .gz-footer__links li + li::before { display: none; }
  .gz-footer__links a { margin-block: 0; line-height: 30px; }
  .gz-footer__address { font-size: 16px; }

  .gz-footer__mark {
    position: static;
    transform: none;
    display: block;
    width: 150px;
    margin: 30px 0 0;
    opacity: 1;
  }

  .gz-footer__copyright small { display: block; }
}

@media (max-width: 500px) {
  .gz-footer__mark { width: 130px; }
  .gz-menu__list a { font-size: 13vw; }
}

@media (prefers-reduced-motion: reduce) {
  .gz-preloader { display: none; }
  .gz-preloader__word,
  .gz-preloader__bar::after { animation: none; }
  .gz-header { transition: none; }
  .gz-header.is-hidden { top: 0; }
  .gz-menu,
  .gz-menu__list a { transition: none; }
}

/* =========================================================
   CUSTOM CURSOR

   A gold dot that tracks the pointer exactly, and a ring that lags
   behind it on an eased loop. The system cursor is hidden so only these
   two are visible.

   Conditions, all of which matter:

   - `(hover: hover) and (pointer: fine)` only. On a touch screen there
     is no pointer to replace, and hiding the cursor there would hide
     nothing while still costing a rAF loop.
   - Under `prefers-reduced-motion` the whole thing is off and the real
     cursor comes back. Someone who has asked for less movement should
     not be given a lagging ring to follow.
   - `html.gz-cursor` is added by JS, so if the script never runs the
     system cursor is never hidden. Hiding it with CSS alone would leave
     a page with no pointer at all if the JS failed.
   - Text inputs keep a visible caret cursor: you cannot reasonably ask
     someone to type into a field with no insertion point.
   ========================================================= */

@media (hover: hover) and (pointer: fine) {
  html.gz-cursor,
  html.gz-cursor body,
  html.gz-cursor a,
  html.gz-cursor button,
  html.gz-cursor label,
  html.gz-cursor summary,
  html.gz-cursor select,
  html.gz-cursor [role="button"],
  html.gz-cursor .zone,
  html.gz-cursor [class*="cursor-pointer"] { cursor: none; }

  /* …except where the caret carries real information */
  html.gz-cursor input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
  html.gz-cursor textarea { cursor: text; }

  html.gz-cursor input[type="date"],
  html.gz-cursor input[type="checkbox"],
  html.gz-cursor input[type="radio"] { cursor: none; }
}

.gz-cur,
.gz-cur-ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9500;              /* over the grain (700), under the preloader (10000) */
  opacity: 0;
  transition: opacity 260ms ease;
  will-change: transform;
}

/* only visible once the pointer has actually moved, so it never sits
   parked in the top-left corner on load */
html.gz-cursor-live .gz-cur,
html.gz-cursor-live .gz-cur-ring { opacity: 1; }

.gz-cur {
  width: 7px;
  height: 7px;
  background: var(--gold, #C8922A);
  transition: opacity 260ms ease, width 220ms ease, height 220ms ease;
}

.gz-cur-ring {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(200, 146, 42, 0.5);
  transition: opacity 260ms ease, width 320ms var(--ease-out, cubic-bezier(0.22,0.61,0.36,1)),
              height 320ms var(--ease-out, cubic-bezier(0.22,0.61,0.36,1)),
              background 320ms ease, border-color 320ms ease;
}

/* over something clickable the ring opens up and the dot shrinks away,
   so the ring itself becomes the pointer */
.gz-cur-ring.is-over {
  width: 62px;
  height: 62px;
  background: rgba(200, 146, 42, 0.12);
  border-color: rgba(200, 146, 42, 0.75);
}

html.gz-cursor-over .gz-cur { width: 4px; height: 4px; }

/* pressed */
.gz-cur-ring.is-down { width: 28px; height: 28px; background: rgba(200, 146, 42, 0.26); }

/* over a text field the ring collapses — the caret is doing the work */
.gz-cur-ring.is-text { width: 0; height: 0; border-color: transparent; }

/* leaving the window */
html.gz-cursor-out .gz-cur,
html.gz-cursor-out .gz-cur-ring { opacity: 0; }

/* no pointer to replace, or motion turned down: stand down entirely */
@media (hover: none), (pointer: coarse) {
  .gz-cur, .gz-cur-ring { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gz-cur, .gz-cur-ring { display: none; }
}

/* =========================================================
   FOCUS

   This matters more than usual here, for two reasons: the site kills
   `outline` in several places (a habit inherited from the original
   template), and the custom cursor hides the system pointer. Without a
   visible focus ring, someone navigating by keyboard has no idea where
   they are on the page at all.

   :focus-visible, not :focus — so a mouse click doesn't leave a ring
   behind, but Tab always does. Two colours because the site alternates
   cream and near-black grounds, and one ring can't serve both; the
   double box-shadow puts a dark halo outside a light ring so it stays
   visible either way.

   Declared with !important deliberately. The page sheets set
   `outline: none` on :focus and load after this file; without the flag
   the ring would lose on source order, which is exactly the bug this
   block exists to close.
   ========================================================= */

:where(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible {
  outline: 2px solid var(--gold-light, #E8C97A) !important;
  outline-offset: 3px !important;
  border-radius: 1px;
  box-shadow: 0 0 0 5px rgba(20, 11, 4, 0.55) !important;
}

/* the SVG floor-plan zones are focusable <g> elements, which can't take
   an outline — give them a ring on the shape instead */
.zone[tabindex]:focus-visible { outline: none !important; }
.zone[tabindex]:focus-visible .zoneShape {
  stroke: var(--gold-light, #E8C97A);
  stroke-width: 3;
}

/* keep the ring visible even where the custom cursor is active */
html.gz-cursor :focus-visible { cursor: none; }

/* =========================================================
   SKIP LINK
   First thing in the tab order, invisible until focused.
   ========================================================= */

.gz-skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10001;              /* above the preloader, or it's unreachable */
  padding: 12px 20px;
  background: var(--choc-deep, #1C0F06);
  color: var(--cream, #FAF7F2);
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 220ms ease;
}

.gz-skip:focus { transform: none; }

/* =========================================================
   SCREEN-READER-ONLY
   Removed from the visual flow but still read out and still findable
   by search engines. Not `display: none`, which hides it from both.
   ========================================================= */

.gz-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* =========================================================
   FLOATING WHATSAPP BUTTON  (markup + settings: glayze.js, WA_WIDGET)
   Sits under the header (1000) and mobile menu (998) layers.
   ========================================================= */

.gz-wa {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
}
.gz-wa--left  { left: 24px;  align-items: flex-start; }
.gz-wa--right { right: 24px; align-items: flex-end; }

.gz-wa__btn {
  order: 2;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.gz-wa__btn svg { width: 30px; height: 30px; }
.gz-wa__btn:hover { transform: scale(1.07); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55); }
.gz-wa__btn:focus-visible,
.gz-wa__close:focus-visible,
.gz-wa__bubble a:focus-visible {
  outline: 2px solid var(--gold-light, #E8C97A);
  outline-offset: 3px;
}

.gz-wa__bubble {
  order: 1;
  position: relative;
  max-width: 250px;
  padding: 14px 38px 14px 16px;
  background: var(--cream, #FAF7F2);
  color: var(--choc-deep, #1C0F06);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 280ms ease, transform 280ms ease;
}
.gz-wa__bubble[hidden] { display: none; }
.gz-wa__bubble.is-open { opacity: 1; transform: none; }
.gz-wa__bubble a {
  color: inherit;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.45;
}
.gz-wa__close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  opacity: 0.55;
  cursor: pointer;
}
.gz-wa__close:hover { opacity: 1; }

@media (max-width: 600px) {
  .gz-wa { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .gz-wa--left  { left: 16px; }
  .gz-wa--right { right: 16px; }
  .gz-wa__btn { width: 54px; height: 54px; }
  .gz-wa__bubble { max-width: 215px; }
}

@media (prefers-reduced-motion: reduce) {
  .gz-wa__btn, .gz-wa__bubble { transition: none; }
}