:root{
  --mc-bg: rgba(0,0,0,.70);
  --mc-fg: #fff;
  --mc-br: rgba(255,255,255,.55);
  --mc-shadow: 0 8px 24px rgba(0,0,0,.35);
  --mc-gap: 18px;
  --mc-size: 44px;
  --mc-size-sm: 36px;
}
#lightbox-overlay .control,
#lightbox-close,
.lightbox .lb-nav,
.lightbox .lb-close {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  width: var(--mc-size); height: var(--mc-size);
  border-radius: 50% !important;
  border: 1px solid var(--mc-br) !important;
  background: var(--mc-bg) !important;
  color: var(--mc-fg) !important;
  font-size: 20px; line-height: 1; font-weight: 600;
  box-shadow: var(--mc-shadow) !important; aspect-ratio: 1 / 1; padding: 0 !important; line-height: 1 !important;
  user-select: none;
}
#lightbox-prev, .lightbox .lb-nav.prev { left: var(--mc-gap); top: 50%; transform: translateY(-50%); }
#lightbox-next, .lightbox .lb-nav.next { right: var(--mc-gap); top: 50%; transform: translateY(-50%); }
#lightbox-close, .lightbox .lb-close { top: 14px; right: 14px; }
.cover-nav, .p-nav, .m-hero .m-nav, .slider button.arrow, #gallery button.arrow, #testimonials button.tn, .arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: var(--mc-size-sm); height: var(--mc-size-sm);
  border-radius: 50% !important;
  border: 1px solid var(--mc-br) !important;
  background: var(--mc-bg) !important;
  color: var(--mc-fg) !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; font-weight: 600;
  box-shadow: var(--mc-shadow) !important; aspect-ratio: 1 / 1; padding: 0 !important; line-height: 1 !important;
  cursor: pointer;
}
.cover-nav.prev, .p-nav.prev, .m-hero .m-nav.prev, .slider .arrow.left { left: 10px; }
.cover-nav.next, .p-nav.next, .m-hero .m-nav.next, .slider .arrow.right { right: 10px; }
#gallery .arrow.left { left: 10px; }
#gallery .arrow.right { right: 10px; }
#testimonials button.tn.left{ left:10px; }
#testimonials button.tn.right{ right:10px; }
#testimonials button.tn{ z-index:2; }
#lightbox-overlay .control:focus-visible, #lightbox-close:focus-visible,
.lightbox .lb-nav:focus-visible, .lightbox .lb-close:focus-visible,
.cover-nav:focus-visible, .p-nav:focus-visible, .m-hero .m-nav:focus-visible,
.slider button.arrow:focus-visible, #gallery button.arrow:focus-visible, #testimonials button.tn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
@media (max-width: 820px){
  #lightbox-close, .lightbox .lb-close{
    top: calc(env(safe-area-inset-top, 0) + 10px);
    right: calc(env(safe-area-inset-right, 0) + 10px);
  }
}

/* Selected menu pill */
header .menus a[aria-current="page"]{
  background: rgba(230,211,154,.18);
  color: var(--gold);
  border: 1px solid rgba(230,211,154,.45);
  padding: 6px 12px;
  border-radius: 999px;
}

/* === Lightbox arrows & close — match gallery/testimonials (36x36 dark disc) === */
#lightbox-overlay .control,
#lightbox-close{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  position: relative;
  z-index: 4;
}
#lightbox-overlay .control::before,
#lightbox-close::before{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 36px; height: 36px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.70);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  pointer-events: none;
}


/* === Lightbox controls positional + icon centering fixes === */
#lightbox-overlay{ position: fixed; inset: 0; } /* ensure a containing block */

#lightbox-overlay #lightbox-prev,
#lightbox-overlay #lightbox-next,
#lightbox-overlay #lightbox-close{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: #fff !important;
}

/* Absolute placement (override any legacy rules) */
#lightbox-overlay #lightbox-prev{
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
}
#lightbox-overlay #lightbox-next{
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
}
#lightbox-overlay #lightbox-close{
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 6 !important;
}

/* Draw identical 36x36 discs for arrows and close */
#lightbox-overlay #lightbox-prev::before,
#lightbox-overlay #lightbox-next::before,
#lightbox-overlay #lightbox-close::before{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 36px; height: 36px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.70);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  pointer-events: none;
}
/* Mobile notch-safe close placement */
@media (max-width: 820px){
  #lightbox-overlay #lightbox-close{
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    right: calc(env(safe-area-inset-right, 0px) + 12px) !important;
  }
}


/* === Popup controls: make glyphs + circle borders pure white for higher contrast === */
#lightbox-overlay #lightbox-prev,
#lightbox-overlay #lightbox-next,
#lightbox-overlay #lightbox-close{
  color: #fff !important;
  opacity: 1 !important;
}

#lightbox-overlay #lightbox-prev::before,
#lightbox-overlay #lightbox-next::before,
#lightbox-overlay #lightbox-close::before{
  border: 1px solid #fff !important;
}

/* Force our own white glyphs; hide any legacy text/SVG inside */
#lightbox-overlay #lightbox-prev,
#lightbox-overlay #lightbox-next,
#lightbox-overlay #lightbox-close {
  color: transparent !important; /* hide any legacy text color */
}

/* White glyphs for prev/next/close, shown via ::after */
#lightbox-overlay #lightbox-prev::after,
#lightbox-overlay #lightbox-next::after,
#lightbox-overlay #lightbox-close::after {
  display: block;
  line-height: 1;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #fff !important;
  pointer-events: none;
  content: ""; /* will be overridden below per control */
}

/* Actual symbols */
#lightbox-overlay #lightbox-prev::after  { content: "\2039"; } /* ‹ */
#lightbox-overlay #lightbox-next::after  { content: "\203A"; } /* › */
#lightbox-overlay #lightbox-close::after { content: "\00D7"; } /* × */


/* Ensure nav controls themselves have no background (fixes tall oval on iOS) */
#lightbox-overlay #lightbox-prev,
#lightbox-overlay #lightbox-next,
#lightbox-overlay #lightbox-close{
  background: transparent !important;
  border: 0 !important;
}


/* Cart badge (ensure visible on all pages & viewports) */
.badge{ display:inline-block; min-width:16px; padding:0 6px; border-radius:10px;
  background: var(--gold, #E6D39A); color:#111; font-size:11px; line-height:18px; text-align:center }
.badge.hidden{ display:none }

/* Kill any background/backdrop on the large tap targets (prevents tall oval on iOS) */
#lightbox-overlay #lightbox-prev,
#lightbox-overlay #lightbox-next,
#lightbox-overlay #lightbox-close{
  background: transparent !important;
  border: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}


/* Mobile nav close button: 36x36 disc like popup controls */
#menuClose{
  position:absolute; right:16px; top:12px;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:20px; font-weight:600; line-height:1;
  background:transparent; border:0; z-index:1001;
}
#menuClose::before{
  content:""; position:absolute; left:50%; top:50%;
  width:36px; height:36px; transform:translate(-50%, -50%);
  border-radius:50%;
  border:1px solid #fff; background:rgba(0,0,0,.70);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  pointer-events:none;
}


/* === Reassert unified popup + menu-close glyphs and discs === */

/* Lightbox controls: ensure disc + white glyph always present */
#lightbox-overlay #lightbox-prev,
#lightbox-overlay #lightbox-next,
#lightbox-overlay #lightbox-close{
  color: transparent !important;
  background: transparent !important;
  border: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#lightbox-overlay #lightbox-prev::before,
#lightbox-overlay #lightbox-next::before,
#lightbox-overlay #lightbox-close::before{
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 36px; height: 36px; transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid #fff;
  background: rgba(0,0,0,.70);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  pointer-events: none; z-index: 1;
}
#lightbox-overlay #lightbox-prev::after,
#lightbox-overlay #lightbox-next::after,
#lightbox-overlay #lightbox-close::after{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -52%);
  display: block; line-height: 1;
  font-size: 20px; font-weight: 600;
  color: #fff;
  pointer-events: none; z-index: 2;
  content: "";
}
#lightbox-overlay #lightbox-prev::after{ content: "\2039"; }  /* ‹ */
#lightbox-overlay #lightbox-next::after{ content: "\203A"; }  /* › */
#lightbox-overlay #lightbox-close::after{ content: "\00D7"; } /* × */

/* Mobile menu close 'X' in matching disc */
#menuClose{
  position: absolute;
  top: calc(env(safe-area-inset-top,0px) + 20px);
  right: calc(env(safe-area-inset-right,0px) + 20px);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; z-index: 1001;
  color: transparent !important; /* hide any legacy color */
}
#menuClose::before{
  content: ""; position: absolute; left:50%; top:50%;
  width:36px; height:36px; transform:translate(-50%,-50%);
  border-radius:50%; border:1px solid #fff; background:rgba(0,0,0,.70);
  box-shadow:0 8px 24px rgba(0,0,0,.35); pointer-events:none;
}
#menuClose::after{
  content: "\00D7"; position:absolute; left:50%; top:50%;
  transform: translate(-50%, -52%);
  font-size:20px; font-weight:600; line-height:1; color:#fff;
  pointer-events:none;
}