/**
 * 22 HUES - Main Stylesheet
 * Complete styling from original HTML files
 */

/* ========================================
   CSS VARIABLES
   ======================================== */
:root {
  --black: #191919;
  --white: #FFFFFF;
  --cream: #F6F1EB;
  --cream-header: #FAF8F5;
  --cream-light: #FAF8F5;
  --cream-dark: #F0EBE3;
  --warm-gray: #6B6B6B;
  --gray-light: #E8E6E3;
  --gray-medium: #9A9A9A;
  --gray-dark: #4A4A4A;
  --charcoal: #191919;
  --gold: #A37E2C;
  --gold-light: #B8923F;
  --success: #2D7D46;
  --warning: #D4A017;
  --error: #C0392B;
  --font-logo: 'Playfair Display', Georgia, serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-accent: 'Cormorant Garamond', Georgia, serif;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   RESET & BASE
   ======================================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.panel-open {
  overflow: hidden;
}

body.page-template-page-account,
body.page-template-page-schedule,
body.page-template-page-inquire,
body.page-template-page-wallet {
  background: var(--cream);
  color: var(--charcoal);
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ========================================
   LOADER
   ======================================== */
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-text {
  font-family: var(--font-logo);
  font-size: clamp(40px, 10vw, 80px);
  color: var(--white);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ========================================
   BACKDROP
   ======================================== */
.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}

.backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* ========================================
   SEARCH OVERLAY (header.php markup)
   ======================================== */
.search-overlay {
  position: fixed;
  inset: 0;
  background: var(--cream, #F6F1EB);
  z-index: 1500;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.search-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ========================================
   HEADER
   ======================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  height: calc(72px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(60px, env(safe-area-inset-right, 0px)) 0 max(60px, env(safe-area-inset-left, 0px));
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cream, #F6F1EB);
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

/* Logged-in WP toolbar: keep bar below admin bar (32px desktop, 46px mobile WP breakpoint). */
body.admin-bar .header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .header {
    top: 46px;
  }
}

/* Centered logo (header.php); mobile overrides in logo inject + @media below. */
.header-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(220px, 36vw);
  color: var(--charcoal, #191919);
  -webkit-tap-highlight-color: transparent;
}

.header-logo:focus-visible {
  outline: 2px solid var(--gold, #A37E2C);
  outline-offset: 3px;
}

/* Home + any other template that needs the over-hero look opts in via
   `.header.header-transparent` — header.php attaches that class only on
   `is_front_page()`. */
.header.header-transparent {
  background: transparent;
  border-bottom-color: transparent;
}

.header.header-transparent.scrolled,
.header.scrolled {
  background: var(--white);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* Header Left */
.header-left {
  display: flex;
  align-items: center;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

/* On the homepage hero we hide "Contact Us" until the user scrolls past
   the hero so it doesn't compete with the centerpiece logo. Interior
   pages always show it. */
.header-transparent .header-left {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
}

.header-transparent.scrolled .header-left {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.contact-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  cursor: pointer;
}

.contact-btn span {
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--black);
}

/* Plus Icon */
.plus-icon {
  width: 12px;
  height: 12px;
  position: relative;
  transition: transform 0.6s var(--ease);
}

.plus-icon::before,
.plus-icon::after {
  content: '';
  position: absolute;
  background: var(--black);
  transition: transform 0.3s var(--ease);
}

.plus-icon::before {
  width: 12px;
  height: 1px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.plus-icon::after {
  width: 1px;
  height: 12px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.contact-btn:hover .plus-icon {
  transform: rotate(90deg);
}

.contact-btn.active .plus-icon {
  transform: rotate(45deg);
}

/* Header Right */
.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-icon {
  color: var(--black);
  transition: color 0.3s var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* On the homepage hero (transparent header) icons are white over the dark image */
.header-transparent .header-icon {
  color: var(--white);
}

/* When scrolled past the hero, switch back to dark for legibility on the cream nav */
.header.scrolled .header-icon,
.header-transparent.scrolled .header-icon {
  color: var(--black);
}

.header-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* Menu Button */
.menu-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  color: inherit;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.menu-btn-text {
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--black);
  transition: color 0.3s var(--ease);
}

.header-transparent .menu-btn-text {
  color: var(--white);
}

.header.scrolled .menu-btn-text,
.header-transparent.scrolled .menu-btn-text {
  color: var(--black);
}

.hamburger {
  width: 22px;
  height: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--black);
  border-radius: 1px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.header-transparent .hamburger span {
  background: var(--white);
}

.header.scrolled .hamburger span,
.header-transparent.scrolled .hamburger span {
  background: var(--black);
}

.menu-btn.active .hamburger span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-btn.active .hamburger span:nth-child(2) {
  opacity: 0;
}

.menu-btn.active .hamburger span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ========================================
   MAIN LOGO
   ======================================== */
.main-logo {
  position: fixed;
  top: 21%;
  left: 50%;
  z-index: 101;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
}

.logo-text {
  font-family: var(--font-logo);
  font-size: clamp(60px, 20vw, 320px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--white);
  line-height: 0.85;
  transition: color 0.3s var(--ease);
}

.header.scrolled ~ .main-logo .logo-text {
  color: var(--black);
}

/* ========================================
   HERO SECTION
   ======================================== */
.hero {
  height: 100vh;
  position: relative;
  background: var(--black);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 60px;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
}

.hero-title {
  font-family: var(--font-logo);
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 400;
  font-style: italic;
  color: var(--white);
  margin-bottom: 32px;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.hero-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.hero-btn {
  padding: 16px 40px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px solid var(--white);
  color: var(--white);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}

.hero-btn:hover {
  background: var(--white);
  color: var(--black);
}

.hero-btn-filled {
  padding: 16px 40px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px solid var(--white);
  color: var(--black);
  background: var(--white);
  cursor: pointer;
  transition: all 0.3s var(--ease);
}

.hero-btn-filled:hover {
  background: transparent;
  color: var(--white);
}

/* ========================================
   RIGHT PANEL (Contact & Menu)
   ======================================== */
.right-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 100%;
  height: 100%;
  height: 100vh;
  height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--cream);
  color: var(--black);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.right-panel.active {
  transform: translateX(0);
}

.panel-close {
  position: absolute;
  top: calc(20px + env(safe-area-inset-top, 0px));
  right: max(24px, calc(24px + env(safe-area-inset-right, 0px)));
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  background: var(--black);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, transform 0.15s ease;
}

.panel-close:hover {
  background: var(--charcoal, #191919);
}

.panel-close:focus-visible {
  outline: 2px solid var(--gold, #A37E2C);
  outline-offset: 3px;
}

.panel-close svg {
  width: 16px;
  height: 16px;
  stroke: var(--white);
  stroke-width: 2;
}

.panel-content {
  padding: calc(80px + env(safe-area-inset-top, 0px)) max(40px, env(safe-area-inset-right, 0px)) calc(40px + env(safe-area-inset-bottom, 0px)) max(40px, env(safe-area-inset-left, 0px));
}

.panel-title {
  font-family: var(--font-logo);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-bottom: 40px;
}

/* Contact Panel */
.contact-item {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-item-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.contact-item-header svg {
  width: 18px;
  height: 18px;
  stroke: var(--black);
  fill: none;
  stroke-width: 1.5;
}

.contact-item-header a,
.contact-item-header span {
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  color: var(--black);
}

.contact-item p {
  font-size: 12px;
  color: var(--warm-gray);
  line-height: 1.6;
  margin-left: 30px;
}

.contact-footer {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.contact-footer p {
  font-size: 14px;
  margin-bottom: 16px;
}

.contact-footer a {
  font-size: 14px;
  text-decoration: underline;
  color: var(--black);
}

/* Menu Panel */
.menu-nav {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
}

.menu-nav li {
  margin: 0;
}

.menu-nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-size: 18px;
  font-weight: 400;
  color: var(--black);
  padding: 14px 0;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: rgba(163, 126, 44, 0.12);
}

.menu-nav a:hover {
  color: var(--gold, #A37E2C);
}

.menu-nav-secondary {
  list-style: none;
  margin: 0 0 40px;
  padding: 24px 0 0;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.menu-nav-secondary a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  color: var(--black);
  padding: 12px 0;
  -webkit-tap-highlight-color: rgba(163, 126, 44, 0.12);
  transition: color 0.2s ease;
}

.menu-nav-secondary a:hover {
  color: var(--gold, #A37E2C);
}

.menu-footer {
  padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.menu-footer a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  text-decoration: underline;
  color: var(--black);
  padding: 10px 0;
}

/* ========================================
   SEARCH DROPDOWN
   ======================================== */
.search-dropdown {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  width: 580px;
  max-width: calc(100% - 48px);
  background: var(--white);
  color: var(--black);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s var(--ease);
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

.search-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.search-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--gray-light);
}

.search-header label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-medium);
  margin-bottom: 12px;
}

.search-header input {
  width: 100%;
  border: none;
  font-size: 18px;
  padding: 8px 0;
  background: transparent;
  outline: none;
}

.search-cancel {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 13px;
  color: var(--black);
}

.search-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 24px;
}

.search-column h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-medium);
  margin-bottom: 12px;
}

.search-column ul {
  list-style: none;
}

.search-column a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--black);
  padding: 8px 0;
}

.search-column svg {
  width: 14px;
  height: 14px;
  stroke: var(--gray-medium);
  fill: none;
  stroke-width: 1.5;
}

/* ========================================
   CONTENT SECTION
   ======================================== */
.content {
  background: var(--cream);
  color: var(--black);
  padding: 100px 80px;
}

.content-header {
  text-align: center;
  margin-bottom: 60px;
}

.content-header h2 {
  font-family: var(--font-logo);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 400;
  color: var(--black);
}

.content-inner {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.content-inner p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--warm-gray);
  margin-bottom: 24px;
}

.cta-btn {
  display: inline-block;
  padding: 16px 40px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--black);
  transition: all 0.3s var(--ease);
  margin-top: 20px;
}

.cta-btn:hover {
  background: transparent;
  color: var(--black);
}

/* ========================================
   FOOTER
   ======================================== */
.footer {
  background: var(--black);
  color: var(--white);
  padding: 80px 80px 40px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 60px;
  margin-bottom: 60px;
}

.footer-brand {
  max-width: 280px;
}

.footer-logo {
  font-family: var(--font-logo);
  font-size: 24px;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 16px;
}

.footer-brand p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--gray-medium);
}

.footer-links h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 20px;
  color: var(--gray-medium);
}

.footer-links a {
  display: block;
  font-size: 14px;
  color: var(--white);
  padding: 8px 0;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--gold);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 12px;
  color: var(--gray-medium);
}

/* ========================================
   BUTTONS (Global)
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  text-decoration: none;
}

.btn-primary {
  background: var(--charcoal);
  color: var(--white);
  border: 1px solid var(--charcoal);
}

.btn-primary:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}

.btn-secondary {
  background: transparent;
  color: var(--charcoal);
  border: 1px solid var(--charcoal);
}

.btn-secondary:hover {
  background: var(--charcoal);
  color: var(--white);
}

.btn-sm {
  padding: 10px 20px;
  font-size: 12px;
}

/* ========================================
   GLOBAL BACK LINK (.tt-back-link)
   Small editorial "← Back to ..." affordance
   used at the top of leaf pages so deep-linked
   visitors can escape the flow without browser back.
   ======================================== */
.tt-back-link,
a.tt-back-link {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body, 'Inter', -apple-system, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-medium, #9A9A9A);
  text-decoration: none;
  padding: 8px 4px 8px 0;
  margin: 0;
  margin-right: auto;
  transition: color 0.2s ease, transform 0.2s ease;
  width: auto !important;
  max-width: max-content;
  min-height: 44px;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0,0,0,0.04);
}

.tt-back-link svg,
a.tt-back-link svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px;
  min-height: 14px;
  max-width: 14px;
  max-height: 14px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: transform 0.2s ease;
}

.tt-back-link:hover {
  color: var(--black, #191919);
}

.tt-back-link:hover svg {
  transform: translateX(-3px);
}

/* Optional wrapper for self-contained DOCTYPE templates that have the
   fixed 72px .header. Pads the link below the fixed header so it
   doesn't get hidden underneath. Templates that already supply their
   own top padding (e.g. .cart-page padding-top: 72px) can use a slim
   variant via .tt-back-bar--inset. */
.tt-back-bar {
  padding: 88px 60px 0;
  background: transparent;
  text-align: left;
}

.tt-back-bar--inset {
  padding: 16px 60px 0;
}

.tt-back-bar--dark .tt-back-link {
  color: rgba(255, 255, 255, 0.7);
}

.tt-back-bar--dark .tt-back-link:hover {
  color: var(--white, #ffffff);
}

@media (max-width: 768px) {
  .tt-back-bar {
    padding: calc(76px + env(safe-area-inset-top, 0px)) 16px 0;
  }
  .tt-back-bar--inset {
    padding: 12px 16px 0;
  }
  /* On narrow screens, give the back link a touch of horizontal padding
     so the tap target extends slightly past the chevron and label. */
  .tt-back-link,
  a.tt-back-link {
    padding: 12px 12px 12px 4px;
    font-size: 12px !important;
  }
}

/* ========================================
   MOBILE-STICKY BACK BAR (.tt-back-bar--mobile-sticky)
   Keeps the back affordance inside thumb reach on long pages whose
   only desktop back link lives in a sidebar that collapses on
   mobile (e.g. account dashboard, employee dashboard). Render the
   bar at the top of <body> on those templates and rely on this
   utility to pin it to the top of the viewport under the safe-area
   inset. Hidden on >=1025px so the desktop sidebar/header stays
   the canonical placement.
   ======================================== */
.tt-back-bar--mobile-sticky {
  display: none;
}
@media (max-width: 1024px) {
  .tt-back-bar--mobile-sticky {
    display: block;
    position: sticky;
    top: 0;
    z-index: 120;
    padding: 8px 16px;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    background: var(--white, #ffffff);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    backdrop-filter: saturate(180%) blur(8px);
  }
  .tt-back-bar--mobile-sticky .tt-back-link,
  .tt-back-bar--mobile-sticky a.tt-back-link {
    color: var(--charcoal, #191919);
  }
}

/* Dark variant — for charcoal headers (e.g. employee dashboard). */
@media (max-width: 1024px) {
  .tt-back-bar--mobile-sticky.tt-back-bar--dark {
    background: var(--charcoal, #191919);
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
  .tt-back-bar--mobile-sticky.tt-back-bar--dark .tt-back-link,
  .tt-back-bar--mobile-sticky.tt-back-bar--dark a.tt-back-link {
    color: rgba(255, 255, 255, 0.85);
  }
  .tt-back-bar--mobile-sticky.tt-back-bar--dark .tt-back-link:hover {
    color: var(--white, #ffffff);
  }
}

/* ========================================
   APPLE BUSINESS CHAT BUTTON
   ======================================== */
.apple-chat-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
}

.apple-chat-btn {
  width: 50px;
  height: 44px;
  background: #1a1a1a;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  position: relative;
  border-radius: 22px 22px 4px 22px;
}

.apple-chat-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

.chat-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.chat-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.chat-logo {
  position: absolute;
  font-family: var(--font-logo);
  font-size: 16px;
  color: #fff;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.apple-chat-btn.show-logo .chat-dots {
  opacity: 0;
  transform: scale(0.8);
}

.apple-chat-btn.show-logo .chat-logo {
  opacity: 1;
  transform: scale(1);
}

.chat-dot {
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1024px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .header {
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
  }

  /* Interior pages: stronger separation when scrolled (no height jump). */
  .header:not(.header-transparent).scrolled {
    box-shadow: 0 4px 16px rgba(25, 25, 25, 0.08);
    border-bottom-color: rgba(0, 0, 0, 0.1);
  }

  .header-left {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 32%;
  }

  .header-right {
    gap: 4px;
    flex-shrink: 0;
  }

  .header-icon {
    color: var(--charcoal, #191919);
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    margin: 0;
    box-sizing: border-box;
    border-radius: 8px;
    transition: background 0.2s ease, opacity 0.2s ease;
  }

  .header-icon:hover,
  .header-icon:active {
    opacity: 1;
    background: rgba(25, 25, 25, 0.06);
  }

  .header-icon:focus-visible {
    outline: 2px solid var(--gold, #A37E2C);
    outline-offset: 1px;
  }

  .header-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.65;
  }

  .bag-icon .bag-count {
    top: 4px;
    right: 2px;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 11px;
    font-weight: 600;
  }

  .contact-btn {
    min-height: 44px;
    padding: 8px 10px 8px 4px;
    margin: 0;
    border-radius: 8px;
    transition: background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .contact-btn:active {
    background: rgba(25, 25, 25, 0.06);
  }

  .contact-btn:focus-visible {
    outline: 2px solid var(--gold, #A37E2C);
    outline-offset: 2px;
  }

  .menu-btn {
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    padding: 6px 12px;
    border: 1px solid rgba(25, 25, 25, 0.18);
    background: rgba(255, 255, 255, 0.35);
    border-radius: 8px;
  }

  .menu-btn:focus-visible {
    outline: 2px solid var(--gold, #A37E2C);
    outline-offset: 2px;
  }

  .menu-btn.active {
    border-color: var(--gold, #A37E2C);
    background: rgba(163, 126, 44, 0.12);
  }

  .header-transparent .menu-btn {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(0, 0, 0, 0.2);
  }

  .header-transparent .menu-btn-text {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  }

  .header-transparent.scrolled .menu-btn {
    border-color: rgba(25, 25, 25, 0.18);
    background: rgba(255, 255, 255, 0.35);
  }

  .header-transparent.scrolled .menu-btn-text {
    text-shadow: none;
  }

  .header-transparent .menu-btn.active {
    border-color: var(--gold, #A37E2C);
    background: rgba(163, 126, 44, 0.22);
  }

  .header-transparent.scrolled .menu-btn.active {
    background: rgba(163, 126, 44, 0.12);
  }

  /*
   * Opaque interior bar (anything not `.header-transparent`):
   * hide redundant scheduler shortcut (booking links live in drawer),
   * icon-only cues with existing aria-labels, tighter icon row gaps.
   */
  .header:not(.header-transparent) .contact-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Plus control stays reachable; drawer also lists Contact paths */
  .header:not(.header-transparent) .contact-btn {
    gap: 0;
    padding-inline: 6px 8px;
  }

  .header:not(.header-transparent) .header-left {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
  }

  .header:not(.header-transparent) .header-right > a.header-icon[href*="schedule"] {
    display: none !important;
  }

  /* Bag / Woo row item stays rendered; compaction is padding-only upstream */
  .header:not(.header-transparent) .menu-btn {
    gap: 0;
    justify-content: center;
    padding: 8px;
    border-color: rgba(25, 25, 25, 0.12);
    position: relative;
  }

  .header:not(.header-transparent) .menu-btn-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .header:not(.header-transparent) .header-right {
    gap: 4px;
  }

  @media (max-width: 380px) {
    .menu-btn-text {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .menu-btn {
      padding: 10px;
    }
  }

  .right-panel {
    width: 100%;
    padding-left: env(safe-area-inset-left, 0px);
  }

  .search-dropdown {
    width: calc(100% - 32px);
    top: calc(56px + env(safe-area-inset-top, 0px));
  }

  .search-columns {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 12px;
  }

  .hero-btn,
  .hero-btn-filled {
    width: 220px;
    text-align: center;
  }

  .hero-title {
    padding: 0 20px;
  }

  .content {
    padding: 60px 24px;
  }

  .footer {
    padding: 60px 24px 30px;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .apple-chat-container {
    bottom: max(20px, env(safe-area-inset-bottom, 0px));
    right: max(20px, env(safe-area-inset-right, 0px));
  }

  .apple-chat-btn {
    width: 44px;
    height: 38px;
    border-radius: 19px 19px 3px 19px;
  }

  .chat-dot {
    width: 5px;
    height: 5px;
  }
}

@media (max-width: 480px) {
  .header:not(.header-transparent) .header-right {
    gap: 2px;
  }

  .header:not(.header-transparent) .header-logo {
    max-width: min(102px, 26vw);
  }
}

/* ========================================
   PASSWORD VISIBILITY TOGGLE
   Auto-decorated by main.js for every <input type="password">.
   The wrapper preserves the input's original block flow so checkout /
   account / reset-password forms keep their existing layout.
   ======================================== */
.tt-pwd-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.tt-pwd-wrap > input[type="password"],
.tt-pwd-wrap > input[type="text"] {
  padding-right: 44px !important;
  width: 100%;
}
.tt-pwd-eye {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  border-radius: 6px;
  color: #6b6b6b;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.tt-pwd-eye:hover,
.tt-pwd-eye:focus {
  color: #191919;
  background: rgba(25, 25, 25, 0.06);
  outline: none;
}
.tt-pwd-eye svg {
  width: 18px;
  height: 18px;
  display: block;
}
@media (max-width: 480px) {
  .tt-pwd-wrap > input[type="password"],
  .tt-pwd-wrap > input[type="text"] {
    padding-right: 42px !important;
  }
  .tt-pwd-eye {
    width: 36px;
    height: 36px;
  }
  .tt-pwd-eye svg {
    width: 20px;
    height: 20px;
  }
}