/* ============================================================
   THE INKTOPUS - Main Stylesheet
   Pixel-perfect recreation of the original Tailwind design
   ============================================================ */

/* === CSS Custom Properties (Tailwind-style tokens) === */
:root {
  --font-sans: 'Inter';
  --font-display: 'Inter';
  --color-black: #000000;
  --color-white: #ffffff;
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-800: #1f2937;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --max-width: 1400px;
  --navbar-height: 80px;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-sans); line-height: 1; min-height: 100vh; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; color: inherit; background: none; border: none; }
input, select, textarea { font: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6, h7 { line-height: 1; }

/* === BODY THEMES === */
.body-dark { background-color: var(--color-black); color: var(--color-white); }
.body-light { background-color: var(--color-white); color: var(--color-black); }
body { background-color: var(--color-black); color: var(--color-white); min-height: 100vh; font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; }

/* === SELECTION === */
::selection { background: var(--color-white); color: var(--color-black); }
.body-light ::selection { background: var(--color-black); color: var(--color-white); }

/* === APP ROOT === */
.app-root { display: flex; flex-direction: column; min-height: 100vh; }
.main-content { flex: 1; }
.main-content.with-navbar { padding-top: var(--navbar-height); }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background-color 0.3s, padding 0.3s, border-color 0.3s;
  display: flex; flex-direction: column;
}
.navbar-dark { color: var(--color-white); }
.navbar-light { color: var(--color-black); }

.navbar.scrolled {
  background-color: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.navbar-light.scrolled { color: var(--color-white); }

.navbar-inner {
  padding: 1.5rem 1.5rem;
  transition: padding 0.3s;
}
.navbar.scrolled .navbar-inner { padding: 1rem 1.5rem; }

@media (min-width: 1024px) {
  .navbar-inner { padding-left: 3rem; padding-right: 3rem; }
}

.navbar-row {
  max-width: var(--max-width); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 3rem;
}

/* Logo */
.navbar-logo {
  --navbar-logo-size: 2.25rem;
  display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0;
}
.navbar-logo-img {
  width: var(--navbar-logo-size); height: var(--navbar-logo-size);
  object-fit: contain; opacity: 1;
}
.logo-invert { filter: invert(1) brightness(1.2) contrast(1.05); }

@media (min-width: 768px) {
  .navbar-logo { --navbar-logo-size: 2.8125rem; }
}

/* Logotipo tipográfico: una sola geometría, escalada desde el hero. */
.inktopus-wordmark {
  display: inline-flex; flex-direction: column;
  font-family: var(--font-display); font-weight: 800;
  line-height: 0.75; letter-spacing: -0.05em;
  text-transform: uppercase; white-space: nowrap; user-select: none;
}
.inktopus-wordmark-line { display: flex; align-items: center; }
.inktopus-wordmark-ink,
.inktopus-wordmark-topus { display: block; }
.inktopus-wordmark-the {
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 0.2272727em; line-height: 1.23;
  height: 3.3em; margin-left: 0.2em; margin-bottom: 0.76em;
  padding: 0.1em 0; font-weight: 600; letter-spacing: 0;
}

.navbar-logo-text {
  height: var(--navbar-logo-size);
  font-size: 1.3rem;
  justify-content: center;
}
@media (min-width: 768px) {
  .navbar-logo-text { font-size: 1.3rem; }
}

/* Desktop Menu */
.navbar-desktop-menu {
  display: none;
  align-items: center; gap: 2rem;
}
@media (min-width: 1024px) {
  .navbar-desktop-menu { display: flex; }
}
@media (min-width: 1280px) {
  .navbar-desktop-menu { gap: 2.5rem; }
}

/* Nav Links */
.nav-link {
  font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 500; position: relative; transition: color 0.3s;
}
.navbar-dark .nav-link { color: var(--color-gray-300); }
.navbar-dark .nav-link:hover { color: var(--color-white); }
.navbar-light .nav-link { color: var(--color-zinc-700); }
.navbar-light .nav-link:hover { color: var(--color-black); }

.nav-link-line {
  position: absolute; bottom: -0.5rem; left: 0; width: 0; height: 1px;
  transition: width 0.3s;
}
.navbar-dark .nav-link-line { background-color: var(--color-white); }
.navbar-light .nav-link-line { background-color: var(--color-black); }
.nav-link:hover .nav-link-line,
.nav-dropdown:hover .nav-link-line { width: 100%; }

/* Dropdown - fixed hover bridge to prevent menu from disappearing */
.nav-dropdown { position: relative; padding-bottom: 1.25rem; margin-bottom: -1.25rem; }
.nav-dropdown-btn {
  display: flex; align-items: center; gap: 0.25rem;
  font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 500; position: relative; transition: color 0.3s;
}
.navbar-dark .nav-dropdown-btn { color: var(--color-gray-300); }
.navbar-dark .nav-dropdown-btn:hover { color: var(--color-white); }
.navbar-light .nav-dropdown-btn { color: var(--color-zinc-700); }
.navbar-light .nav-dropdown-btn:hover { color: var(--color-black); }

.nav-chevron { transition: transform 0.3s; }
.nav-dropdown:hover .nav-chevron { transform: rotate(180deg); }

.nav-dropdown-menu {
  display: none; position: absolute;
  top: 100%; left: 0; margin-top: 0;
  min-width: 18rem; max-width: 24rem;
  background: rgba(0,0,0,0.95); backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 1rem 0; z-index: 50;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
}
.nav-dropdown:hover > .nav-dropdown-menu { display: flex; flex-direction: column; }

.nav-sub-link {
  padding: 0.75rem 1.5rem;
  font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-gray-400); transition: all 0.3s;
  white-space: normal; word-wrap: break-word; line-height: 1.4;
}
.nav-sub-link:hover { color: var(--color-white); background: rgba(255,255,255,0.05); }

/* Sub-dropdown (3rd level) - fixed hover bridge + wider for long text */
.nav-sub-dropdown { position: relative; }
.nav-sub-dropdown::after {
  content: ''; position: absolute; top: 0; right: -0.75rem;
  width: 1rem; height: 100%; z-index: 1;
}
.nav-sub-btn {
  width: 100%; padding: 0.75rem 1.5rem;
  font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-gray-400); transition: all 0.3s;
  display: flex; align-items: center; justify-content: space-between; text-align: left;
  white-space: normal; line-height: 1.4;
}
.nav-sub-btn:hover { color: var(--color-white); background: rgba(255,255,255,0.05); }
.nav-chevron-right { transition: transform 0.3s; flex-shrink: 0; margin-left: 0.5rem; }
.nav-sub-dropdown:hover .nav-chevron-right { transform: rotate(90deg); }

.nav-sub-menu {
  display: none; position: absolute;
  top: 0; left: 100%; margin-left: 0.25rem;
  min-width: 20rem; max-width: 26rem;
  background: rgba(0,0,0,0.95); backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 1rem 0; z-index: 50;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
}
.nav-sub-dropdown:hover > .nav-sub-menu { display: flex; flex-direction: column; }

/* Pink text for solidario */
.text-pink { color: var(--color-pink-400) !important; }
.text-pink:hover { color: var(--color-pink-300) !important; }

/* Right Actions */
.navbar-actions {
  display: flex; align-items: center; gap: 1.5rem;
}
.navbar-lang-btn {
  font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 500; transition: color 0.3s;
}
.navbar-dark .navbar-lang-btn { color: var(--color-gray-300); }
.navbar-dark .navbar-lang-btn:hover { color: var(--color-white); }
.navbar-light .navbar-lang-btn { color: var(--color-zinc-700); }
.navbar-light .navbar-lang-btn:hover { color: var(--color-black); }

.navbar-admin-link {
  font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 500; color: var(--color-red-500); transition: color 0.3s;
  display: flex; align-items: center; gap: 0.25rem;
}
.navbar-admin-link:hover { color: var(--color-red-400); }

.navbar-icon-link {
  display: flex; align-items: center; gap: 0.25rem;
  font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 500; transition: color 0.3s;
}
.navbar-dark .navbar-icon-link { color: var(--color-gray-300); }
.navbar-dark .navbar-icon-link:hover { color: var(--color-white); }
.navbar-light .navbar-icon-link { color: var(--color-zinc-700); }
.navbar-light .navbar-icon-link:hover { color: var(--color-black); }

.navbar-hamburger {
  transition: opacity 0.3s; margin-left: 0.5rem;
}
.navbar-hamburger:hover { opacity: 0.8; }

/* Show right actions only on lg+ */
.navbar-actions { display: none; }
@media (min-width: 1024px) {
  .navbar-actions { display: flex; }
}

/* Mobile hamburger (visible only < lg) */
.navbar-mobile-trigger { display: flex; }
@media (min-width: 1024px) {
  .navbar-mobile-trigger { display: none; }
}

/* ===== MOBILE MENU ===== */
.mobile-menu-overlay {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  background: var(--color-black); color: var(--color-white);
  z-index: 50; display: none; flex-direction: column;
  overflow-y: auto;
}
.mobile-menu-overlay.active { display: flex; }
.mobile-menu-overlay.animating-in { animation: slideDown 0.5s cubic-bezier(0.76, 0, 0.24, 1); }
.mobile-menu-overlay.animating-out { animation: slideUp 0.5s cubic-bezier(0.76, 0, 0.24, 1); }

@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-100%); opacity: 0; }
}

.mobile-menu-header {
  position: sticky; top: 0; right: 0; width: 100%;
  display: flex; justify-content: flex-end;
  padding: 2rem; z-index: 10;
  background: linear-gradient(to bottom, black, rgba(0,0,0,0.8), transparent);
}
.mobile-menu-close { color: var(--color-white); transition: color 0.3s; }
.mobile-menu-close:hover { color: var(--color-gray-300); }

.mobile-menu-content {
  display: flex; flex-direction: column;
  padding: 0 2rem 6rem;
  width: 100%; max-width: 56rem; margin: 0 auto;
  gap: 2rem; margin-top: 1rem;
}
@media (min-width: 768px) {
  .mobile-menu-content { padding-left: 6rem; padding-right: 6rem; }
}

.mobile-nav-link { display: block; text-align: left; width: 100%; transition: color 0.3s; }
.mobile-nav-top {
  font-size: 2.25rem; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.05em;
}
@media (min-width: 768px) {
  .mobile-nav-top { font-size: 3rem; }
}
.mobile-nav-sub {
  font-size: 1.125rem; font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-gray-300); margin-top: 1rem;
}
@media (min-width: 768px) {
  .mobile-nav-sub { font-size: 1.5rem; }
}
.mobile-nav-link:hover { color: var(--color-gray-400); }

.mobile-nav-group { width: 100%; display: flex; flex-direction: column; }
.mobile-nav-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left; transition: color 0.3s;
}
.mobile-nav-btn:hover { color: var(--color-gray-400); }
.mobile-chevron { transition: transform 0.3s; margin-left: 0.5rem; }
.mobile-chevron.open { transform: rotate(180deg); }

.mobile-nav-children {
  display: none; flex-direction: column;
  padding-left: 1.5rem; gap: 1rem; padding-top: 1rem;
  border-left: 2px solid rgba(255,255,255,0.2); margin-top: 1rem;
}
@media (min-width: 768px) {
  .mobile-nav-children { padding-left: 2.5rem; }
}
.mobile-nav-children.open { display: flex; }

.mobile-menu-bottom {
  padding-top: 4rem; margin-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-direction: column; gap: 2rem;
  align-items: flex-start; width: 100%;
}
.mobile-lang-btn, .mobile-menu-link {
  font-size: 0.875rem; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 500; color: var(--color-gray-400); transition: color 0.3s;
}
.mobile-lang-btn:hover, .mobile-menu-link:hover { color: var(--color-white); }

/* ===== SITE BANNER ===== */
.site-banner {
  width: 100%; text-align: center;
  padding: 0.5rem 1rem;
  display: flex; align-items: center; justify-content: center;
}
.banner-inner { overflow: hidden; }
.banner-text { font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.375rem; }
.banner-link { font-weight: 900; margin-left: 0.5rem; text-decoration: underline; opacity: 0.9; }
.banner-link:hover { opacity: 0.7; }
.marquee-container { overflow: hidden; white-space: nowrap; width: 100%; }
.marquee-content { display: inline-block; animation: marquee 15s linear infinite; }

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* ============================================================
   HERO SECTION (Homepage)
   ============================================================ */
.hero-fullscreen {
  position: relative; height: 100vh; width: 100%;
  overflow: hidden; display: flex; align-items: center;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.8; }
.hero-bg-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }

.hero-text-container {
  position: relative; z-index: 10;
  width: 100%; max-width: var(--max-width);
  margin: 0 auto; padding: 0 1.5rem;
  display: flex; flex-direction: column;
  justify-content: flex-end; height: 100%; padding-bottom: 8rem;
}
@media (min-width: 1024px) {
  .hero-text-container { padding-left: 3rem; padding-right: 3rem; }
}

.hero-text {
  width: 100%; color: var(--color-white);
}
.hero-title {
  display: flex; flex-direction: column;
  font-size: 22vw; line-height: 0.75;
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.05em;
}
.hero-title-line { display: flex; align-items: center; }
.hero-title-the,
.hero-title-main .inktopus-wordmark-the {
  display: flex; flex-direction: column;
  font-size: 5vw; line-height: 1.09;
  margin-left: 1vw; font-weight: 600;
  margin-bottom: 19px;
  justify-content: space-between;
  height: 16.5vw; padding: 0.5vw 0;
}

.hero-foreground {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 20; pointer-events: none;
}
.hero-foreground img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.hero-cta {
  display: none; position: absolute;
  right: 3rem; bottom: 8rem; z-index: 30;
  pointer-events: auto;
}
@media (min-width: 768px) { .hero-cta { display: block; } }

.hero-scroll-indicator {
  display: none; position: absolute;
  right: 3rem; top: 50%; transform: translateY(-50%);
  flex-direction: column; align-items: center; gap: 1rem;
  z-index: 30; opacity: 0.7; pointer-events: none;
}
@media (min-width: 768px) { .hero-scroll-indicator { display: flex; } }
.hero-scroll-text {
  writing-mode: vertical-rl;
  text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 0.75rem; font-weight: 300; color: var(--color-white);
}
.hero-scroll-line {
  width: 1px; height: 8rem; background: rgba(255,255,255,0.2);
  position: relative; overflow: hidden; margin-top: 1rem;
}
.hero-scroll-line::after {
  content: ''; position: absolute; inset: 0; background: var(--color-white);
  animation: scrollLine 2s linear infinite;
}
@keyframes scrollLine {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* ============================================================
   LIGHT HERO (Gallery, Contact, Appointments, Gift Cards, Guest Artists)
   ============================================================ */
.light-hero {
  position: relative; min-height: 100vh; width: 100%;
  background: var(--color-white); color: var(--color-black);
  padding-top: 7rem; padding-bottom: 5rem;
  display: flex; flex-direction: column; justify-content: center;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.light-hero-container {
  width: 100%; max-width: var(--max-width); margin: 0 auto;
  padding: 0 1.5rem; display: flex; flex-direction: column;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .light-hero-container { gap: 3.5rem; }
}
@media (min-width: 1024px) {
  .light-hero-container { padding: 0 3rem; }
}

.light-hero-image {
  position: relative; width: 100%;
  aspect-ratio: 16/9; overflow: hidden;
  border-radius: 1rem; background: var(--color-zinc-100);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
@media (min-width: 768px) {
  .light-hero-image { aspect-ratio: 21/9; }
}
.light-hero-image img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
  will-change: transform, opacity;
}

.light-hero-content {
  display: flex; flex-direction: column; gap: 2rem;
  justify-content: space-between; align-items: flex-start;
  width: 100%;
}
@media (min-width: 768px) {
  .light-hero-content { flex-direction: row; align-items: flex-end; }
}

.light-hero-logo {
  font-size: 13vw;
  color: var(--color-black); user-select: none;
}
@media (min-width: 768px) {
  .light-hero-logo { font-size: 9vw; }
}
.light-hero-logo .inktopus-wordmark-the { color: var(--color-zinc-500); }

.light-hero-sub {
  display: flex; flex-direction: column; gap: 1.5rem;
  align-items: flex-start; max-width: 24rem;
}
@media (min-width: 768px) {
  .light-hero-sub { align-items: flex-end; }
}
.light-hero-desc {
  color: var(--color-zinc-600); font-size: 0.875rem;
  font-weight: 300; line-height: 1.5;
}
@media (min-width: 768px) {
  .light-hero-desc { text-align: right; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 0.75rem;
  padding: 1rem 2rem; transition: all 0.3s;
  cursor: pointer; border: none;
}
.btn-primary { background: var(--color-white); color: var(--color-black); }
.btn-primary:hover { background: var(--color-gray-200); }
.btn-outline { border: 1px solid var(--color-white); color: var(--color-white); }
.btn-outline:hover { background: var(--color-white); color: var(--color-black); }
.btn-dark { background: var(--color-black); color: var(--color-white); }
.btn-dark:hover { background: var(--color-zinc-800); }
.btn-dark-outline { border: 1px solid var(--color-black); color: var(--color-black); }
.btn-dark-outline:hover { background: var(--color-black); color: var(--color-white); }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { width: 100%; }
.section-inner {
  width: 100%; max-width: var(--max-width); margin: 0 auto;
  padding: 0 1.5rem;
}
@media (min-width: 1024px) {
  .section-inner { padding: 0 3rem; }
}

.section-py { padding-top: 6rem; padding-bottom: 6rem; }
.section-py-lg { padding-top: 8rem; padding-bottom: 8rem; }
@media (min-width: 1024px) {
  .section-py { padding-top: 8rem; padding-bottom: 8rem; }
  .section-py-lg { padding-top: 12rem; padding-bottom: 12rem; }
}

.section-header {
  display: flex; flex-direction: column; gap: 2rem;
  margin-bottom: 3rem; padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (min-width: 1024px) {
  .section-header { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
.section-label {
  font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--color-zinc-400); font-weight: 500;
}
.section-title {
  font-size: 2.25rem; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.05em;
}
@media (min-width: 768px) {
  .section-title { font-size: 3.75rem; }
}
@media (min-width: 1024px) {
  .section-title { font-size: 4.5rem; }
}
.section-desc {
  color: var(--color-gray-400); font-weight: 300;
  font-size: 1rem; max-width: 28rem; line-height: 1.5;
}
@media (min-width: 768px) {
  .section-desc { font-size: 1.125rem; }
}

/* ============================================================
   INTRO SECTION (Homepage)
   ============================================================ */
.intro-section {
  position: relative; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.intro-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 3rem; position: relative; z-index: 10;
}
@media (min-width: 768px) {
  .intro-grid { grid-template-columns: repeat(12, 1fr); gap: 3rem; }
}
@media (min-width: 1024px) {
  .intro-grid { gap: 6rem; }
}

.intro-title-col { display: flex; align-items: flex-start; gap: 1.5rem; }
@media (min-width: 768px) {
  .intro-title-col { grid-column: span 4; }
}

.intro-title {
  font-size: 2.25rem; font-family: var(--font-display); margin-top: 0.5rem;
}
@media (min-width: 768px) {
  .intro-title { font-size: 3rem; }
}

.intro-content-col { display: flex; flex-direction: column; gap: 3rem; }
@media (min-width: 768px) {
  .intro-content-col { grid-column: span 8; }
}

.intro-subtitle {
  font-size: 2.25rem; font-family: var(--font-display); font-weight: 500;
  line-height: 0.95; letter-spacing: -0.025em; white-space: pre-line;
}
@media (min-width: 768px) {
  .intro-subtitle { font-size: 3rem; }
}
@media (min-width: 1024px) {
  .intro-subtitle { font-size: 4.5rem; }
}

.intro-text {
  color: var(--color-gray-400); font-size: 1.125rem; font-weight: 300;
  line-height: 1.55; max-width: 42rem;
}
@media (min-width: 768px) {
  .intro-text { font-size: 1.25rem; }
}

/* ============================================================
   FILTER TABS
   ============================================================ */
.filter-bar {
  display: flex; align-items: center; gap: 0.75rem;
  overflow-x: auto; padding-bottom: 1.5rem; margin-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  -ms-overflow-style: none; scrollbar-width: none;
}
.filter-bar::-webkit-scrollbar { display: none; }
.filter-label {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-zinc-500); margin-right: 0.5rem;
  display: flex; align-items: center; gap: 0.25rem;
}
.filter-btn {
  padding: 0.625rem 1.25rem; font-size: 0.75rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  font-weight: 500; transition: all 0.3s;
  border: 1px solid var(--color-zinc-800); white-space: nowrap;
  background: rgba(24,24,27,0.8); color: var(--color-zinc-400);
}
.filter-btn:hover { border-color: var(--color-zinc-500); color: var(--color-white); }
.filter-btn.active {
  background: var(--color-white); color: var(--color-black);
  border-color: var(--color-white); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

/* ============================================================
   PROJECT GRID (Homepage Gallery)
   ============================================================ */
.project-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 1.5rem; margin-bottom: 6rem;
}
@media (min-width: 640px) {
  .project-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .project-grid { grid-template-columns: repeat(4, 1fr); }
}

.project-card {
  position: relative; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column;
  aspect-ratio: 3/4;
}
@media (min-width: 640px) {
  .project-card { aspect-ratio: 4/5; }
}

.project-card-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s;
}
.project-card:hover .project-card-image { transform: scale(1.05); }

.project-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0.5), transparent);
  opacity: 0.9; transition: opacity 0.5s;
}
.project-card:hover .project-card-overlay { opacity: 1; }

.project-card-badges {
  position: absolute; top: 1rem; left: 1rem; right: 1rem;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 10; pointer-events: none;
}
.project-badge {
  background: rgba(0,0,0,0.6); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-white); font-size: 0.625rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 700; padding: 0.375rem 0.75rem; border-radius: 0.125rem;
}

.like-btn {
  pointer-events: auto; padding: 0.5rem; border-radius: 9999px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s;
  background: rgba(0,0,0,0.4); color: var(--color-white);
}
.like-btn:hover { background: var(--color-white); color: var(--color-black); }
.like-btn.liked { background: rgba(239,68,68,0.2); color: var(--color-red-500); }

.project-card-quick-view {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s; z-index: 10; pointer-events: none;
}
.project-card:hover .project-card-quick-view { opacity: 1; }
.quick-view-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.1); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--color-white); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.2em;
  font-weight: 700; padding: 0.75rem 1.5rem;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
  transform: translateY(1rem); transition: transform 0.3s;
}
.project-card:hover .quick-view-btn { transform: translateY(0); }

.project-card-footer {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1.25rem; display: flex; flex-direction: column;
  justify-content: flex-end; z-index: 20;
}
.project-card-title {
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 700;
  color: var(--color-white); text-transform: uppercase;
  letter-spacing: -0.025em; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
  margin-bottom: 0.25rem; transition: color 0.3s;
}
.project-card:hover .project-card-title { color: var(--color-gray-200); }
.project-card-artist {
  font-size: 0.75rem; color: var(--color-zinc-300); font-weight: 300; margin-bottom: 0.75rem;
}
.project-card-artist span { color: white; font-weight: 500; }

.project-card-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.2);
  font-size: 0.75rem; color: var(--color-zinc-300);
}
.project-card-likes { display: flex; align-items: center; gap: 0.25rem; }
.project-card-details {
  display: inline-flex; align-items: center;
  color: white; font-weight: 500; transition: transform 0.3s;
}
.project-card:hover .project-card-details { transform: translateX(0.25rem); }

/* ============================================================
   TEAM SLIDER (Homepage)
   ============================================================ */
.team-section {
  background: rgba(9,9,11,0.8); border-top: 1px solid rgba(255,255,255,0.1);
}
.team-slider { position: relative; width: 100%; }
.team-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 2rem; align-items: center;
}
@media (min-width: 768px) {
  .team-grid { grid-template-columns: repeat(12, 1fr); gap: 2rem; }
}
@media (min-width: 1024px) {
  .team-grid { gap: 4rem; }
}

.team-image-col { position: relative; aspect-ratio: 3/4; width: 100%; overflow: hidden; }
@media (min-width: 768px) {
  .team-image-col { grid-column: span 5; }
}
.team-image-col img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--artist-focus, 50% 30%);
  filter: grayscale(1); transform: scale(1.001);
  transition: object-position .55s ease, transform .7s cubic-bezier(.22,1,.36,1), filter .5s ease;
}
.team-image-col:hover img { transform: scale(1.025); filter: grayscale(0); }

.team-info-col { display: flex; flex-direction: column; gap: 2rem; z-index: 10; }
@media (min-width: 768px) {
  .team-info-col { grid-column: span 5; }
}
.team-name {
  font-size: 3rem; font-family: var(--font-display); font-weight: 500;
  margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
  .team-name { font-size: 4.5rem; }
}
.team-role {
  font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-gray-400);
}
.team-desc {
  color: var(--color-gray-400); font-weight: 300; line-height: 1.5;
  font-size: 1.125rem; margin-top: 2rem;
}
.team-details { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 2rem; }
.team-detail { font-size: 0.875rem; }
.team-detail-label { color: var(--color-gray-400); }
.team-actions { display: flex; flex-wrap: wrap; gap: 1rem; padding-top: 2rem; }

.team-nav { display: flex; align-items: center; gap: 1rem; padding-top: 2rem; }
.team-nav-btn {
  padding: 0.5rem; border: 1px solid rgba(255,255,255,0.2); border-radius: 9999px;
  transition: all 0.3s;
}
.team-nav-btn:hover { background: var(--color-white); color: var(--color-black); }

.team-next-col {
  display: none; position: relative;
  aspect-ratio: 1/3; width: 100%; overflow: hidden;
  cursor: pointer;
}
@media (min-width: 768px) {
  .team-next-col { display: block; grid-column: span 2; }
}
.team-next-col img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--artist-focus, 50% 30%); filter: grayscale(1); transition: object-position .55s ease, transform .7s cubic-bezier(.22,1,.36,1), filter .5s ease; }
.team-next-col:hover img { transform: scale(1.035); filter: grayscale(0); }
.team-next-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.4);
  transition: background-color 0.3s; z-index: 10;
}
.team-next-col:hover .team-next-overlay { background: transparent; }

/* ============================================================
   BOOKING FORM (Homepage + Appointments)
   ============================================================ */
.booking-section { width: 100%; background: var(--color-black); }
.booking-grid {
  display: grid; grid-template-columns: 1fr; gap: 4rem;
}
@media (min-width: 1024px) {
  .booking-grid { grid-template-columns: repeat(12, 1fr); gap: 6rem; }
}

.booking-info-col { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 1024px) {
  .booking-info-col { grid-column: span 5; }
}

.booking-title {
  font-size: 3rem; font-family: var(--font-display); font-weight: 500;
  letter-spacing: -0.025em; margin-bottom: 2rem;
}
@media (min-width: 768px) {
  .booking-title { font-size: 4.5rem; }
}

.booking-desc {
  font-size: 1.125rem; color: var(--color-gray-600);
  font-weight: 300; line-height: 1.5; margin-bottom: 2rem;
}

.booking-form-col { }
@media (min-width: 1024px) {
  .booking-form-col { grid-column: span 7; }
}

.form-group {
  position: relative; border-bottom: 1px solid var(--color-gray-400);
  padding: 0.5rem 0; margin-bottom: 1.5rem;
}
.form-input, .form-select {
  width: 100%; background: transparent; border: none; outline: none;
  font-size: 1.25rem; padding: 0.5rem 0;
}
.body-dark .form-input, .body-dark .form-select { color: var(--color-white); }
.body-dark .form-input::placeholder { color: var(--color-gray-500); }
.body-light .form-input, .body-light .form-select { color: var(--color-black); }
.body-light .form-input::placeholder { color: var(--color-gray-500); }

.form-select {
  -webkit-appearance: none; appearance: none;
  cursor: pointer; padding-right: 2rem;
}
.form-select-wrapper { position: relative; }
.form-select-icon {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  pointer-events: none;
}

.form-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
}

.form-success {
  background: var(--color-black); color: var(--color-white);
  padding: 1.5rem; text-align: center;
  text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.75rem;
}

/* ============================================================
   SERVICE HERO (Service detail pages)
   ============================================================ */
.service-hero {
  position: relative; min-height: 100vh; width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding-top: 8rem;
}
.service-hero-bg { position: absolute; inset: 0; z-index: 0; }
.service-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.service-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--color-black), rgba(0,0,0,0.6), transparent);
}
.service-hero-overlay-2 {
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--color-black), rgba(0,0,0,0.4), transparent);
}

.service-hero-content {
  position: relative; z-index: 10;
  width: 100%; max-width: var(--max-width);
  margin: 0 auto; padding: 0 1.5rem 5rem;
  display: flex; flex-direction: column; justify-content: center;
}
@media (min-width: 1024px) {
  .service-hero-content { padding: 0 3rem 5rem; }
}

.service-breadcrumb {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-gray-400); margin-bottom: 2rem;
}
.service-breadcrumb a { transition: color 0.3s; }
.service-breadcrumb a:hover { color: var(--color-white); }
.service-breadcrumb .current { color: var(--color-white); }

.service-title {
  font-size: 3.75rem; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.05em;
  margin-bottom: 2rem; line-height: 0.85;
}
@media (min-width: 768px) {
  .service-title { font-size: 6rem; }
}
@media (min-width: 1024px) {
  .service-title { font-size: 8rem; }
}

.service-subtitle {
  font-size: 1.25rem; color: var(--color-gray-300); font-weight: 300;
  max-width: 42rem; line-height: 1.5;
}
@media (min-width: 768px) {
  .service-subtitle { font-size: 1.5rem; }
}

/* ============================================================
   SERVICE CONTENT
   ============================================================ */
.service-content-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 4rem; align-items: center;
}
@media (min-width: 1024px) {
  .service-content-grid { grid-template-columns: 1fr 1fr; gap: 6rem; }
}

.service-content-title {
  font-size: 1.875rem; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.05em;
}
@media (min-width: 768px) {
  .service-content-title { font-size: 3rem; }
}

.service-content-text {
  display: flex; flex-direction: column; gap: 1.5rem;
  color: var(--color-gray-400); font-size: 1.125rem; font-weight: 300; line-height: 1.5;
}

.service-content-image {
  position: relative; aspect-ratio: 4/5; width: 100%;
  border: 1px solid rgba(255,255,255,0.1); padding: 0.5rem;
}
.service-content-image-inner {
  position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--color-zinc-900);
}
.service-content-image-inner img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(1); opacity: 0.8;
  transform: scale(1);
  transition: filter .7s cubic-bezier(.22,1,.36,1), opacity .7s ease, transform .9s cubic-bezier(.22,1,.36,1);
  will-change: filter, opacity, transform;
}
.service-content-image-inner:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.025);
}

@media (prefers-reduced-motion: reduce) {
  .service-content-image-inner img { transition-duration: .01ms; }
}

/* ============================================================
   WHY SECTION (Service pages - 3 feature cards)
   ============================================================ */
.why-section {
  background: var(--color-zinc-950);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.why-header {
  display: flex; flex-direction: column; gap: 1.5rem;
  margin-bottom: 4rem; padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (min-width: 768px) {
  .why-header { flex-direction: row; justify-content: space-between; align-items: flex-end; }
}
.why-title {
  font-size: 2.25rem; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.05em;
}
@media (min-width: 768px) {
  .why-title { font-size: 3.75rem; }
}
.why-subtitle {
  color: var(--color-gray-400); font-weight: 300; font-size: 1.125rem;
  max-width: 24rem;
}

.why-grid {
  display: grid; grid-template-columns: 1fr;
  border-left: 1px solid rgba(255,255,255,0.1);
  border-top: 1px solid rgba(255,255,255,0.1);
}
@media (min-width: 768px) {
  .why-grid { grid-template-columns: repeat(3, 1fr); }
}

.why-card {
  padding: 2.5rem; border-right: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: background-color 0.3s; display: flex; flex-direction: column;
}
.why-card:hover { background: rgba(255,255,255,0.05); }
.why-card-number {
  color: rgba(255,255,255,0.2); font-family: var(--font-display);
  font-size: 3rem; font-weight: 700; margin-bottom: 1.5rem;
  transition: color 0.3s;
}
.why-card:hover .why-card-number { color: rgba(255,255,255,0.4); }
.why-card-title {
  font-size: 1.5rem; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.025em;
  margin-bottom: 1rem;
}
.why-card-desc { color: var(--color-gray-400); font-weight: 300; line-height: 1.5; }

@media (min-width: 768px) {
  .why-card { padding: 2.5rem 3.5rem; }
  .why-card-number { font-size: 3.75rem; }
  .why-card-title { font-size: 1.875rem; }
}

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section { text-align: center; }
.cta-title {
  font-size: 2.25rem; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.05em;
  margin-bottom: 2rem; max-width: 48rem; margin-left: auto; margin-right: auto;
}
@media (min-width: 768px) {
  .cta-title { font-size: 3.75rem; }
}
.cta-desc {
  font-size: 1.25rem; color: var(--color-gray-400); font-weight: 300;
  margin-bottom: 3rem; max-width: 42rem; margin-left: auto; margin-right: auto;
}
.cta-btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  background: var(--color-white); color: var(--color-black);
  padding: 1.25rem 2.5rem; text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 0.875rem; font-weight: 700;
  transition: background-color 0.3s;
}
.cta-btn:hover { background: var(--color-gray-200); }

/* ============================================================
   GALLERY PAGE
   ============================================================ */
.gallery-page-title {
  font-size: 3.75rem; font-family: var(--font-display); font-weight: 500;
  letter-spacing: -0.025em; margin-bottom: 2rem;
}
@media (min-width: 768px) {
  .gallery-page-title { font-size: 6rem; }
}

.gallery-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;
}
@media (min-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
@media (min-width: 1024px) {
  .gallery-grid { gap: 2rem; }
}

.gallery-item {
  position: relative; aspect-ratio: 1;
  overflow: hidden; cursor: pointer;
  background: #000;
}
.gallery-item img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform 1s;
  filter: grayscale(1);
}
.gallery-item:hover img { transform: scale(1.05); filter: grayscale(0); }

.gallery-item-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.92), rgba(0,0,0,0.12) 65%, transparent);
  opacity: 0; transition: opacity 0.5s;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.5rem;
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }

.gallery-work-meta { min-width: 0; transform: translateY(1rem); transition: transform .35s ease; }
.gallery-item:hover .gallery-work-meta { transform: translateY(0); }
.gallery-work-meta span { display: block; margin-bottom: .35rem; color: #d4d4d8; font-size: .58rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.gallery-work-meta strong { display: block; overflow: hidden; color: #fff; font-family: var(--font-display); font-size: 1rem; line-height: 1.05; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.gallery-work-meta small { display: block; margin-top: .35rem; color: #a1a1aa; font-size: .68rem; }

.gallery-like-btn {
  display: flex; align-items: center; gap: 0.5rem;
  color: #fff; transition: all 0.3s;
  transform: translateY(1rem);
}
.gallery-item:hover .gallery-like-btn { transform: translateY(0); }
.gallery-like-btn.liked { color: #ef4444; }
.gallery-like-btn.liked .gallery-like-count { color: #f87171; font-weight: 600; }

.floating-heart {
  position: absolute; bottom: -20px; pointer-events: none;
  animation: floatHeart 1.2s ease-out forwards;
  font-size: 1.5rem; z-index: 20;
}
@keyframes floatHeart {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-120px) scale(1.5); }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid {
  display: grid; grid-template-columns: 1fr; gap: 3rem;
}
@media (min-width: 768px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
}
.contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-title {
  font-size: 2.25rem; font-family: var(--font-display); font-weight: 700;
  letter-spacing: -0.025em; text-transform: uppercase;
  margin-bottom: 2rem; padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-align: left;
}
.contact-info-block { }
.contact-info-label {
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.875rem; margin-bottom: 0.5rem;
  color: var(--color-white);
}
.contact-info-text { color: var(--color-gray-400); }

.contact-form-box {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  padding: 2rem;
}
.contact-form-title {
  font-size: 1.5rem; font-family: var(--font-display); font-weight: 700;
  letter-spacing: -0.025em; text-transform: uppercase; margin-bottom: 1.5rem;
}

/* ============================================================
   ASTROLOGY RINGS
   ============================================================ */
.astrology-rings {
  pointer-events: none; user-select: none; position: relative;
}
.astrology-rings img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
}
.astrology-ring-outer { animation: spinClockwise 240s linear infinite; }
.astrology-ring-middle { animation: spinCounterClockwise 180s linear infinite; }
.astrology-ring-inner { animation: spinClockwise 120s linear infinite; }

@keyframes spinClockwise { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spinCounterClockwise { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* Screen blend (dark bg) / multiply (light bg) */
.astrology-screen { mix-blend-mode: screen; filter: invert(1); }
.astrology-multiply { mix-blend-mode: multiply; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: #e2e2e2; padding-top: 3rem; padding-bottom: 2.5rem;
  overflow: hidden; border-top: 1px solid rgba(0,0,0,0.1);
  color: var(--color-black);
}
@media (min-width: 768px) {
  .footer { padding-top: 5rem; }
}
.footer-container {
  max-width: 1440px; margin: 0 auto;
  padding: 0 1.5rem; display: flex; flex-direction: column;
}
@media (min-width: 768px) {
  .footer-container { padding: 0 3rem; }
}
@media (min-width: 1024px) {
  .footer-container { padding: 0 4rem; }
}

/* Footer Roulette */
.footer-roulette {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: -0.05em; user-select: none;
  margin-bottom: 3rem; padding: 0.5rem 0; overflow-x: hidden;
}
@media (min-width: 768px) {
  .footer-roulette { margin-bottom: 5rem; }
}
.footer-ink {
  color: var(--color-black); flex-shrink: 0; font-weight: 800;
  font-size: 16vw; line-height: 0.82; letter-spacing: -0.05em;
}
@media (min-width: 640px) {
  .footer-ink { font-size: 17vw; }
}
@media (min-width: 1024px) {
  .footer-ink { font-size: 18.5vw; }
}

.footer-studio {
  display: flex; align-items: center; flex-shrink: 0;
  font-size: 12.5vw; letter-spacing: -0.05em;
}
@media (min-width: 640px) {
  .footer-studio { font-size: 13vw; }
}
@media (min-width: 1024px) {
  .footer-studio { font-size: 13.8vw; }
}

.roulette-char {
  position: relative; overflow: hidden;
  height: 1.62em; display: inline-flex; align-items: center; justify-content: center;
}
.roulette-reel {
  display: flex; flex-direction: column;
  line-height: 0.82; user-select: none; text-align: center;
  transform: translateY(-40%);
}
.roulette-item { display: block; }
.roulette-char:nth-child(odd) .roulette-item {
  color: rgba(0,0,0,0.1); font-weight: 900;
}
.roulette-char:nth-child(even) .roulette-item {
  color: rgba(0,0,0,0.1); font-weight: 900;
}
/* Specific positions for the target */
.roulette-char:nth-child(odd) .roulette-reel .roulette-item:nth-child(5) { color: var(--color-black); font-weight: 900; }
.roulette-char:nth-child(odd) .roulette-reel .roulette-item:nth-child(6) { color: rgba(0,0,0,0.25); font-weight: 900; }
.roulette-char:nth-child(even) .roulette-reel .roulette-item:nth-child(5) { color: rgba(0,0,0,0.25); font-weight: 900; }
.roulette-char:nth-child(even) .roulette-reel .roulette-item:nth-child(6) { color: var(--color-black); font-weight: 900; }

/* Footer Grid */
.footer-grid {
  width: 100%; display: grid; grid-template-columns: 1fr;
  gap: 3rem; padding-bottom: 3.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(12, 1fr); gap: 2rem; }
}
.footer-info-cols { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 640px) { .footer-info-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .footer-info-cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) {
  .footer-info-cols { grid-column: span 7; }
}
.footer-info-col { display: flex; flex-direction: column; gap: 1.5rem; }

.footer-info { }
.footer-label {
  font-weight: 700; color: var(--color-black); text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 0.75rem; margin-bottom: 0.375rem;
  display: flex; align-items: center; gap: 0.375rem;
}
.footer-value {
  color: var(--color-gray-800); font-weight: 500; font-size: 0.85rem; max-width: 28rem; line-height: 1.5;
}
.footer-link { transition: color 0.3s; }
.footer-link:hover { color: var(--color-black); }

.footer-socials { display: flex; align-items: center; gap: 0.625rem; margin-top: 0.5rem; }
.social-icon {
  width: 2.25rem; height: 2.25rem;
  background: rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center;
  transition: all 0.3s; color: rgba(0,0,0,0.8);
}
.social-icon:hover { background: var(--color-black); color: var(--color-white); }

.footer-hours-closed { color: var(--color-gray-500); font-size: 0.75rem; font-weight: 300; }
.footer-hours-note { color: var(--color-gray-400); font-size: 0.625rem; margin-top: 0.5rem; font-style: italic; max-width: 150px; }

/* FAQ Callout */
.footer-faq {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 1024px) {
  .footer-faq { grid-column: span 5; align-items: flex-end; text-align: right; }
}
.footer-faq-title {
  font-size: 1.5rem; font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.025em; color: var(--color-black);
  margin-bottom: 0.75rem; line-height: 1.25;
}
@media (min-width: 640px) {
  .footer-faq-title { font-size: 1.875rem; }
}
@media (min-width: 768px) {
  .footer-faq-title { font-size: 2.25rem; }
}
.footer-faq-desc {
  color: var(--color-gray-600); font-weight: 300;
  font-size: 0.75rem; max-width: 28rem; line-height: 1.5;
}
@media (min-width: 640px) {
  .footer-faq-desc { font-size: 0.875rem; }
}
.footer-faq-btn {
  background: var(--color-black); color: var(--color-white);
  padding: 0.875rem 2rem; text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 0.75rem; font-weight: 700;
  transition: background-color 0.3s; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  display: inline-block; text-align: center;
}
.footer-faq-btn:hover { background: var(--color-gray-800); }

/* Footer Bottom */
.footer-bottom {
  width: 100%; display: flex; flex-direction: column;
  justify-content: space-between; align-items: center;
  padding-top: 2rem; gap: 1rem;
  font-size: 0.75rem; color: var(--color-gray-500); font-weight: 500;
}
@media (min-width: 640px) {
  .footer-bottom { flex-direction: row; }
}
.back-to-top {
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--color-black); transition: color 0.3s;
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 600;
}
.back-to-top:hover { color: var(--color-gray-600); }
.back-to-top-icon {
  width: 1.5rem; height: 1.5rem;
  background: rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center;
  transition: all 0.3s;
}
.back-to-top:hover .back-to-top-icon { background: var(--color-black); color: var(--color-white); }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { inset: 0; }
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-50 { z-index: 50; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.font-display { font-family: var(--font-display); line-height: 0.95; }
.font-sans { font-family: var(--font-sans); }
.uppercase { text-transform: uppercase; }
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.overflow-hidden { overflow: hidden; }
.pointer-events-none { pointer-events: none; }
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }

@media (min-width: 768px) {
  .md\:block { display: block; }
  .md\:flex { display: flex; }
  .md\:hidden { display: none; }
}
@media (min-width: 1024px) {
  .lg\:block { display: block; }
  .lg\:flex { display: flex; }
  .lg\:hidden { display: none; }
}

.bg-black { background-color: var(--color-black); }
.bg-white { background-color: var(--color-white); }
.bg-zinc-950 { background-color: var(--color-zinc-950); }
.text-white { color: var(--color-white); }
.text-black { color: var(--color-black); }
.text-gray-400 { color: var(--color-gray-400); }
.text-gray-500 { color: var(--color-gray-500); }
.text-zinc-400 { color: var(--color-zinc-400); }
.text-zinc-500 { color: var(--color-zinc-500); }
.text-zinc-600 { color: var(--color-zinc-600); }
.border-white\/10 { border-color: rgba(255,255,255,0.1); }
.border-white\/5 { border-color: rgba(255,255,255,0.05); }
.bg-white\/5 { background: rgba(255,255,255,0.05); }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.max-w-\[1400px\] { max-width: 1400px; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-24 { margin-bottom: 6rem; }
.pt-24 { padding-top: 6rem; }
.pt-32 { padding-top: 8rem; }
.pb-20 { padding-bottom: 5rem; }
.pb-32 { padding-bottom: 8rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.transition-all { transition: all 0.3s; }
.transition-colors { transition: color 0.3s, background-color 0.3s; }
.transition-transform { transition: transform 0.3s; }
.line-clamp-1 {
  overflow: hidden; display: -webkit-box;
  -webkit-box-orient: vertical; -webkit-line-clamp: 1;
}

/* Gradient text helper */
.mix-blend-difference { mix-blend-mode: difference; }
.mix-blend-luminosity { mix-blend-mode: luminosity; }

/* Aspect ratios */
.aspect-\[3\/4\] { aspect-ratio: 3/4; }
.aspect-\[4\/5\] { aspect-ratio: 4/5; }
.aspect-\[16\/9\] { aspect-ratio: 16/9; }
.aspect-square { aspect-ratio: 1; }

/* ============================================================
   SHOP PAGE — parity with the original Next.js storefront
   ============================================================ */
.shop-page { min-height: 100vh; padding-bottom: 8rem; background: #fff; color: #000; }
.shop-hero { padding-top: 13rem; padding-bottom: 5rem; background: #09090b; }
.shop-hero-content { padding-top: 1rem; }
.shop-hero-content h1 {
  margin-bottom: 1rem; color: #fff; font-family: var(--font-display);
  font-size: 2.25rem; line-height: 1; font-weight: 900;
  letter-spacing: -0.05em; text-transform: uppercase;
}
.shop-hero-content p { max-width: 36rem; margin: 0 auto; color: #9ca3af; font-size: 0.875rem; line-height: 1.5; }
.shop-promo {
  width: 100%; padding: 0.875rem 1rem; display: flex; align-items: center;
  justify-content: center; gap: 0.75rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.shop-promo a { text-decoration: underline; }
.shop-container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; }
.shop-heading { max-width: 42rem; margin: 0 0 4rem; padding-top: 0; }
.shop-heading h2 {
  margin: 0 0 1rem; font-family: var(--font-display); font-size: 3rem; line-height: 1;
  font-weight: 700; letter-spacing: -0.025em; text-transform: uppercase;
}
.shop-heading p { color: #4b5563; font-size: 1.125rem; line-height: 1.625; }
.shop-toolbar {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 1.5rem; margin-bottom: 3rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(0,0,0,0.1);
}
.shop-filters { display: flex; width: 100%; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.5rem; }
.shop-filter {
  flex: none; padding: 0.625rem 1.25rem; background: #f3f4f6; color: #6b7280;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background-color .2s, color .2s;
}
.shop-filter:hover { background: #e5e7eb; }
.shop-filter.active { background: #000; color: #fff; }
.shop-search { position: relative; display: block; width: 100%; }
.shop-search svg { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: #9ca3af; }
.shop-search input { width: 100%; padding: 0.75rem 1rem 0.75rem 2.5rem; border: 1px solid #e5e7eb; background: #f9fafb; color: #111; font-size: 0.875rem; outline: none; }
.shop-search input:focus { border-color: #000; }
.shop-product-grid { grid-template-columns: 1fr; gap: 2rem; }
.shop-product-card { background: #f9fafb; border: 1px solid #e5e7eb; }
.shop-product-card[hidden] { display: none; }
.shop-product-category { display: block; margin-bottom: 0.5rem; color: #9ca3af; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.shop-product-info h3 { margin-bottom: 0.5rem; color: #000; font-size: 1.125rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.025em; text-transform: uppercase; }
.shop-product-info > p { flex-grow: 1; margin-bottom: 1rem; color: #6b7280; font-size: 0.75rem; line-height: 1.5; }
.shop-product-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 1rem; border-top: 1px solid #e5e7eb; }
.shop-product-bottom strong { color: #000; font-family: var(--font-display); font-size: 1.25rem; }
.shop-add-to-cart { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; background: #000; color: #fff; transition: background .2s, opacity .2s; }
.shop-add-to-cart:hover { background: #27272a; }
.shop-add-to-cart:disabled { opacity: .5; cursor: not-allowed; }
.shop-empty { padding: 8rem 1.5rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; border: 1px solid #e5e7eb; background: #f9fafb; text-align: center; }
.shop-empty[hidden] { display: none; }
.shop-empty strong { font-size: 1.25rem; letter-spacing: .05em; text-transform: uppercase; }
.shop-empty span { color: #6b7280; font-size: .875rem; }
.shop-cart-fab { position: fixed; right: 2rem; bottom: 2rem; z-index: 40; width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; background: #000; color: #fff; box-shadow: 0 20px 30px rgba(0,0,0,.22); transition: transform .2s; }
.shop-cart-fab:hover { transform: scale(1.05); }
.shop-cart-count { position: absolute; top: -.5rem; right: -.5rem; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 50%; background: #ef4444; color: #fff; font-size: .625rem; font-weight: 700; }
.shop-cart-count[hidden] { display: none; }
.shop-cart-overlay { position: fixed; inset: 0; z-index: 60; visibility: hidden; opacity: 0; background: rgba(0,0,0,.4); backdrop-filter: blur(4px); transition: opacity .25s, visibility .25s; }
.shop-cart-overlay.open { visibility: visible; opacity: 1; }
.shop-cart-drawer { position: fixed; top: 0; right: 0; z-index: 70; width: 100%; max-width: 28rem; height: 100%; display: flex; flex-direction: column; background: #fff; color: #000; box-shadow: -20px 0 40px rgba(0,0,0,.15); transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.shop-cart-drawer.open { transform: translateX(0); }
.shop-cart-header { padding: 1.5rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #f3f4f6; }
.shop-cart-header h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -.025em; text-transform: uppercase; }
.shop-cart-header button { width: 2.25rem; height: 2.25rem; font-size: 1.75rem; line-height: 1; }
.shop-cart-items { flex-grow: 1; overflow-y: auto; padding: 1.5rem; }
.shop-cart-empty { padding: 3rem 0; color: #6b7280; text-align: center; }
.shop-cart-item { display: grid; grid-template-columns: 5rem 1fr auto; gap: 1rem; padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid #f3f4f6; }
.shop-cart-item img { width: 5rem; height: 5rem; object-fit: cover; background: #f9fafb; }
.shop-cart-item h3 { margin-bottom: .25rem; font-size: .875rem; line-height: 1.25; text-transform: uppercase; }
.shop-cart-item span { color: #6b7280; font-size: .75rem; }
.shop-cart-item > b { font-size: .875rem; white-space: nowrap; }
.shop-cart-quantity { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; }
.shop-cart-quantity button { width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; background: #f3f4f6; }
.shop-cart-quantity strong { font-size: .875rem; }
.shop-cart-summary { padding: 1.5rem; border-top: 1px solid #f3f4f6; background: #f9fafb; }
.shop-cart-summary[hidden] { display: none; }
.shop-cart-summary label { display: block; margin-bottom: .5rem; color: #6b7280; font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.shop-coupon-row { display: flex; gap: .5rem; }
.shop-coupon-row input { flex: 1; min-width: 0; padding: .625rem; border: 1px solid #e5e7eb; background: #fff; text-transform: uppercase; }
.shop-coupon-row button { padding: .625rem 1rem; background: #000; color: #fff; font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.shop-coupon-message { min-height: 1.25rem; margin-top: .5rem; color: #dc2626; font-size: .75rem; }
.shop-total-row { display: flex; align-items: center; justify-content: space-between; margin: .75rem 0 1rem; padding-top: .75rem; border-top: 1px solid #e5e7eb; font-size: 1.125rem; }
.shop-checkout { width: 100%; padding: 1rem; background: #000; color: #fff; font-size: .875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
@media (min-width: 640px) {
  .shop-hero { padding-top: 15rem; padding-bottom: 6rem; }
  .shop-product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .shop-hero { padding-top: 16rem; padding-bottom: 6rem; }
  .shop-hero-content { padding-top: 1.5rem; }
  .shop-hero-content h1 { font-size: 3.75rem; }
  .shop-hero-content p { font-size: 1rem; }
  .shop-container { padding-left: 3rem; padding-right: 3rem; }
  .shop-heading h2 { font-size: 4.5rem; }
  .shop-toolbar { flex-direction: row; }
  .shop-filters { width: auto; }
  .shop-search { width: 18rem; }
}
@media (min-width: 1024px) {
  .shop-hero { padding-top: 18rem; padding-bottom: 6rem; }
  .shop-product-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   ADMIN — light dashboard used by the original application
   ============================================================ */
body.admin-body { background: #f5f5f5; color: #000; }
.admin-layout { min-height: 100vh; display: flex; overflow: visible; background: #f5f5f5; color: #000; }
.admin-sidebar { display: none; position: sticky; top: 0; width: 16rem; height: 100vh; padding: 0; flex: none; flex-direction: column; overflow: hidden; background: #fff; color: #000; border-right: 1px solid rgba(0,0,0,.1); }
.admin-sidebar-head { padding: 1.5rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(0,0,0,.1); }
.admin-brand { display: inline-flex; color: inherit; }
.admin-wordmark { font-size: 1.25rem; }
.admin-badge { padding: .25rem .5rem; border-radius: .25rem; background: #000; color: #fff; font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.admin-nav { flex: 1; padding: 1.5rem 1rem; overflow-y: auto; display: flex; flex-direction: column; gap: .25rem; }
.admin-sidebar-link { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: .5rem; color: #4b5563; font-size: .875rem; font-weight: 500; letter-spacing: .025em; transition: background .2s, color .2s; }
.admin-sidebar-link svg { width: 1.125rem; height: 1.125rem; flex: none; }
.admin-sidebar-link:hover { background: #f3f4f6; color: #000; }
.admin-sidebar-link.active { background: #000; color: #fff; }
.admin-sidebar-foot { padding: 1rem; border-top: 1px solid rgba(0,0,0,.1); }
.admin-main { flex: 1; min-width: 0; margin-left: 0; padding: 0; background: #f5f5f5; }
.admin-topbar { position: sticky; top: 0; z-index: 20; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid rgba(0,0,0,.1); }
.admin-content { padding: 1.5rem; }
.admin-page-heading { margin-bottom: 2rem; }
.admin-page-heading h1 { margin-bottom: .5rem; font-family: var(--font-display); font-size: 1.875rem; font-weight: 700; letter-spacing: -.025em; text-transform: uppercase; }
.admin-page-heading p { color: #6b7280; }
.admin-stats { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2rem; }
.admin-stat-card { height: 8rem; padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(0,0,0,.05); border-radius: 1rem; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.admin-stat-top { display: flex; align-items: flex-start; justify-content: space-between; }
.admin-stat-top span:first-child { color: #6b7280; font-size: .875rem; font-weight: 500; }
.admin-stat-icon { width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: .5rem; }
.admin-stat-icon.blue { background:#dbeafe;color:#2563eb; }.admin-stat-icon.purple{background:#f3e8ff;color:#9333ea}.admin-stat-icon.green{background:#d1fae5;color:#059669}.admin-stat-icon.amber{background:#fef3c7;color:#d97706}
.admin-stat-value { font-size: 1.875rem; font-weight: 700; }
.dashboard-card, .admin-card { margin-bottom: 0; padding: 2rem; border: 1px solid rgba(0,0,0,.05); border-radius: 1rem; background: #fff; color: #000; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.admin-chart-card { margin-bottom: 2rem; }
.admin-chart-card h2, .admin-list-card h2 { margin-bottom: 1.5rem; font-size: 1.125rem; font-weight: 700; }
.admin-chart { width: 100%; height: 300px; }
.admin-chart svg { width: 100%; height: 100%; overflow: visible; }
.admin-chart text { fill: #a1a1aa; font-family: var(--font-sans); font-size: 12px; }
.admin-columns { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.admin-activity { display: flex; align-items: center; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid #f3f4f6; }
.admin-activity:last-child { border: 0; padding-bottom: 0; }
.admin-avatar { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background: #f3f4f6; color: #6b7280; }
.admin-activity-copy { flex: 1; }.admin-activity-copy p { font-size: .875rem; font-weight: 500; }.admin-activity-copy span { color: #6b7280; font-size: .75rem; }
.admin-action { padding: .375rem .75rem; border: 1px solid rgba(0,0,0,.1); border-radius: .5rem; background: #f9fafb; color: #1f2937; font-size: .75rem; font-weight: 500; }
.admin-action:hover { background:#000;color:#fff; }
.admin-panel-list { display: flex; flex-direction: column; gap: .75rem; }
.admin-panel-row { padding: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid #e5e7eb; border-radius: .75rem; background: #fff; }
.admin-panel-row h3 { font-size: .9375rem; }.admin-panel-row p { color:#6b7280;font-size:.8125rem;line-height:1.5; }
.admin-panel-row img { width:4rem;height:4rem;object-fit:cover;border-radius:.5rem; }
.admin-form-grid { display:grid;grid-template-columns:1fr;gap:1rem; }
.admin-field { display:flex;flex-direction:column;gap:.5rem; }.admin-field label{font-size:.75rem;font-weight:700;text-transform:uppercase;color:#6b7280}.admin-field input,.admin-field textarea,.admin-field select{width:100%;padding:.75rem;border:1px solid #e5e7eb;border-radius:.5rem;background:#fff;color:#000;outline:none}.admin-field input:focus,.admin-field textarea:focus,.admin-field select:focus{border-color:#000}
.admin-primary-button { display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.25rem;border-radius:.5rem;background:#000;color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; }
@media (min-width: 768px) {
  .admin-sidebar { display: flex; }
  .admin-topbar { display: none; }
  .admin-content { padding: 2.5rem; }
  .admin-stats { grid-template-columns: repeat(2,1fr); }
  .admin-form-grid { grid-template-columns:repeat(2,1fr); }
}
@media (min-width: 1024px) {
  .admin-stats { grid-template-columns: repeat(4,1fr); }
  .admin-columns { grid-template-columns: repeat(2,1fr); }
}

/* ============================================================
   ADMIN SIDEBAR
   ============================================================ */
.admin-layout { display: flex; min-height: 100vh; background: var(--color-black); overflow: hidden; }
.admin-sidebar {
  width: 16rem; background: rgba(9,9,11,0.95);
  border-right: 1px solid rgba(255,255,255,0.05);
  padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem;
  position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto;
  z-index: 40;
}
.admin-main { margin-left: 16rem; flex: 1; padding: 2rem; }
.admin-sidebar-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; border-radius: 0.5rem;
  font-size: 0.875rem; color: var(--color-gray-400);
  transition: all 0.3s;
}
.admin-sidebar-link:hover { background: rgba(255,255,255,0.05); color: var(--color-white); }
.admin-sidebar-link.active { background: rgba(255,255,255,0.1); color: var(--color-white); }

/* ============================================================
   LOGIN PAGE (Split layout matching Next.js)
   ============================================================ */
.login-split {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--color-black); color: var(--color-white);
}
@media (min-width: 768px) {
  .login-split { flex-direction: row; }
}
.login-image-side {
  width: 100%; min-height: 40vh; position: relative;
  display: none;
}
@media (min-width: 768px) {
  .login-image-side { display: block; width: 50%; min-height: 100vh; }
}
.login-image-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(1);
}
.login-image-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--color-black), rgba(0,0,0,0.5), transparent);
}
@media (min-width: 768px) {
  .login-image-gradient { background: linear-gradient(to right, var(--color-black), rgba(0,0,0,0.5), transparent); }
}

.login-form-side {
  width: 100%; display: flex; flex-direction: column;
  justify-content: center; padding: 3rem 2rem;
  position: relative; z-index: 10;
}
@media (min-width: 768px) {
  .login-form-side { width: 50%; padding: 3rem 4rem; }
}
@media (min-width: 1024px) {
  .login-form-side { padding: 3rem 6rem; }
}
.login-form-inner {
  max-width: 28rem; width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; gap: 2rem;
}

.login-back-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-gray-400); transition: color 0.3s;
}
.login-back-link:hover { color: var(--color-white); }

.login-heading {
  font-size: 2.25rem; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.05em; margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
  .login-heading { font-size: 3rem; }
}
.login-subheading { color: var(--color-gray-400); }

.login-demo-box {
  padding: 1rem; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-direction: column; gap: 0.75rem;
}
.login-demo-label {
  font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-gray-400); font-weight: 600; display: block;
}
.login-demo-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.login-demo-btn {
  padding: 0.375rem 0.75rem; background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2); color: var(--color-white);
  font-size: 0.75rem; font-family: monospace; text-transform: uppercase;
  letter-spacing: 0.05em; transition: all 0.3s; cursor: pointer;
}
.login-demo-btn:hover { background: var(--color-white); color: var(--color-black); }

.login-error { color: var(--color-red-400); font-size: 0.875rem; }

.login-form { display: flex; flex-direction: column; gap: 1.5rem; }
.login-label {
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-gray-400); display: block;
}
.login-input-icon { position: relative; }
.login-input-icon-svg {
  position: absolute; left: 1rem; top: 50%;
  transform: translateY(-50%); color: var(--color-gray-500);
  pointer-events: none;
}
.login-input {
  width: 100%; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0.75rem 1rem; color: var(--color-white);
  font-size: 0.875rem; outline: none; transition: border-color 0.3s;
}
.login-input.has-icon { padding-left: 2.75rem; }
.login-input:focus { border-color: var(--color-white); }
.login-input::placeholder { color: var(--color-gray-500); }

.login-submit {
  width: 100%; background: var(--color-white); color: var(--color-black);
  padding: 1rem; text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 0.75rem; font-weight: 700; transition: background-color 0.3s;
  cursor: pointer; border: none;
}
.login-submit:hover { background: var(--color-gray-200); }

.login-divider {
  position: relative; display: flex; align-items: center;
  justify-content: center; border-top: 1px solid rgba(255,255,255,0.1);
  padding: 1.5rem 0;
}
.login-divider span {
  position: absolute; background: var(--color-black); padding: 0 1rem;
  font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-gray-500);
}

.login-google-btn {
  width: 100%; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); color: var(--color-white);
  padding: 1rem; text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 0.75rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  transition: background-color 0.3s;
}
.login-google-btn:hover { background: rgba(255,255,255,0.1); }

/* ============================================================
   GIFT CARDS
   ============================================================ */
.gift-card-preview {
  background: linear-gradient(135deg, var(--color-black), var(--color-zinc-900));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1rem; padding: 2rem;
  color: var(--color-white); text-align: center;
  aspect-ratio: 16/10; display: flex; flex-direction: column;
  justify-content: center; align-items: center;
}
.gift-amount-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
}
.gift-amount-btn {
  padding: 1.5rem; border: 1px solid rgba(255,255,255,0.1);
  text-align: center; transition: all 0.3s; cursor: pointer;
}
.gift-amount-btn:hover { border-color: rgba(255,255,255,0.3); }
.gift-amount-btn.selected { background: var(--color-white); color: var(--color-black); border-color: var(--color-white); }

/* ============================================================
   SHOP
   ============================================================ */

/* Shop Dark Hero (matching Next.js: bg-zinc-950 text-white centered) */
.shop-hero {
  width: 100%; padding-top: 13rem; padding-bottom: 5rem;
  background: var(--color-zinc-950); color: var(--color-white);
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
@media (min-width: 640px) {
  .shop-hero { padding-top: 15rem; padding-bottom: 6rem; }
}
@media (min-width: 768px) {
  .shop-hero { padding-top: 16rem; padding-bottom: 6rem; }
}
@media (min-width: 1024px) {
  .shop-hero { padding-top: 18rem; padding-bottom: 6rem; }
}
.shop-hero::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,0.5); z-index: 0;
}
.shop-hero-content {
  position: relative; z-index: 10; text-align: center;
  padding: 0 1rem; max-width: 56rem; margin: 0 auto;
}

/* Shop Product Grid - Light theme (bg-white page) */
.shop-product-grid {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
}
@media (min-width: 640px) {
  .shop-product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .shop-product-grid { grid-template-columns: repeat(4, 1fr); }
}
.shop-product-card {
  overflow: hidden; transition: box-shadow 0.3s, border-color 0.3s;
  display: flex; flex-direction: column;
}
.shop-product-card:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); border-color: rgba(0,0,0,0.2); }
.shop-product-image {
  aspect-ratio: 1; position: relative; overflow: hidden;
}
.shop-product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }
.shop-product-card:hover .shop-product-image img { transform: scale(1.05); }
.shop-product-info { padding: 1.25rem; display: flex; flex-direction: column; flex-grow: 1; }

.shop-out-of-stock {
  position: absolute; inset: 0; background: rgba(255,255,255,0.6);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; z-index: 10;
}
.shop-out-of-stock span {
  background: var(--color-black); color: var(--color-white);
  padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.2em;
}

/* Dark form inputs (guest-artists, contact, gift-cards, login) */
.form-input-dark {
  width: 100%; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0.75rem 1rem; color: var(--color-white);
  font-size: 0.875rem; outline: none; transition: border-color 0.3s;
  font-family: var(--font-sans);
}
.form-input-dark:focus { border-color: var(--color-white); }
.form-input-dark::placeholder { color: var(--color-gray-500); }

/* Light form inputs (appointments - border-bottom style) */
.form-input-light {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid var(--color-gray-400);
  padding: 0.5rem 0; color: var(--color-black);
  font-size: 1.25rem; outline: none;
}
.form-input-light::placeholder { color: var(--color-gray-500); }
.form-input-light:focus { border-bottom-color: var(--color-black); }

/* Dark select */
.form-select-dark {
  width: 100%; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0.75rem 1rem; color: var(--color-white);
  font-size: 0.875rem; outline: none; transition: border-color 0.3s;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.form-select-dark:focus { border-color: var(--color-white); }
.form-select-dark option { background: var(--color-black); color: var(--color-white); }

/* ============================================================
   GIFT CARD V2 (matching Next.js design)
   ============================================================ */
.gift-card-preview-v2 {
  aspect-ratio: 1.6/1; width: 100%; max-width: 28rem; margin: 0 auto;
  background: linear-gradient(to bottom right, var(--color-zinc-900), var(--color-black));
  border: 1px solid rgba(255,255,255,0.2);
  padding: 1.5rem; display: flex; flex-direction: column;
  justify-content: space-between; position: relative; overflow: hidden;
  border-radius: 0.75rem;
}
.gift-card-preview-v2::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.15) 0%, transparent 100%);
  opacity: 0.1; mix-blend-mode: overlay; pointer-events: none;
}
.gift-card-preview-inner {
  position: relative; z-index: 10;
  display: flex; justify-content: space-between; align-items: flex-start;
}
.gift-card-preview-to { position: relative; z-index: 10; }

.gift-amount-btn-v2 {
  text-align: center; cursor: pointer;
  font-family: var(--font-sans); font-size: 0.875rem;
}
.shop-cart-sidebar {
  position: fixed; right: 0; top: 0; height: 100vh;
  width: 24rem; max-width: 90vw; background: var(--color-black);
  border-left: 1px solid rgba(255,255,255,0.1);
  padding: 2rem; z-index: 60; overflow-y: auto;
  transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}
.shop-cart-sidebar.open { transform: translateX(0); }

/* ============================================================
   DASHBOARD
   ============================================================ */
.dashboard-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 2rem; }
.dashboard-tab {
  padding: 1rem 1.5rem; font-size: 0.875rem; text-transform: uppercase;
  letter-spacing: 0.1em; border-bottom: 2px solid transparent;
  transition: all 0.3s; color: var(--color-gray-400);
}
.dashboard-tab:hover { color: var(--color-white); }
.dashboard-tab.active { color: var(--color-white); border-bottom-color: var(--color-white); }
.dashboard-card {
  border: 1px solid rgba(255,255,255,0.1); padding: 1.5rem;
  margin-bottom: 1rem; transition: border-color 0.3s;
}
.dashboard-card:hover { border-color: rgba(255,255,255,0.2); }

/* ============================================================
   ANIMATIONS & TRANSITIONS
   ============================================================ */
.fade-in {
  animation: fadeIn 0.8s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.slide-in-left {
  animation: slideInLeft 0.8s ease-out;
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

.slide-in-right {
  animation: slideInRight 0.8s ease-out;
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Scroll-triggered animations */
.animate-on-scroll {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.animate-on-scroll.visible {
  opacity: 1; transform: translateY(0);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .hero-fullscreen { height: 100vh; }
  .service-hero { min-height: 100vh; }
}

@media (max-width: 767px) {
  .hero-title { font-size: 18vw; }
  .hero-title-the { font-size: 3vw; height: 13.5vw; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 0.125rem; }
  .service-title { font-size: 2.5rem; }
  .booking-title { font-size: 2.5rem; }
}

/* ============================================================
   NEW HOMEPAGE SECTIONS (Pixel-Perfect additions)
   ============================================================ */

/* --- Hero Mix Blend --- */
.hero-mix-blend { width: 100%; mix-blend-mode: difference; color: var(--color-white); pointer-events: auto; }
.hero-title-main { font-size: 20vw; }
.hero-title-main .inktopus-wordmark-ink { margin-left: -11px; }
.selection-white-black ::selection { background: var(--color-white); color: var(--color-black); }

/* --- Intro Section enhancements --- */
.intro-section { padding-top: 8rem; padding-bottom: 8rem; }
@media (min-width: 1024px) { .intro-section { padding-top: 12rem; padding-bottom: 12rem; } }

/* --- Astrology Rings Wrapper --- */
.astrology-rings-wrapper { position: absolute; z-index: 0; pointer-events: none; }
.astrology-rings-wrapper.left { width: 800px; height: 800px; left: -400px; bottom: -200px; }
.astrology-rings-wrapper.right { width: 800px; height: 800px; right: -400px; bottom: -200px; }
@media (max-width: 767px) { .astrology-rings-wrapper { display: none; } }

/* --- Section Header Left --- */
.section-header-left { }
.section-header-left .space-y-4 { display: flex; flex-direction: column; gap: 1rem; max-width: 42rem; }
.section-label-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--color-zinc-400); font-weight: 500; }
.section-label-text { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-gray-400); display: inline; }

/* --- Recent Work Section --- */
.recent-work-section { width: 100%; padding-top: 6rem; background: rgba(9,9,11,0.8); border-top: 1px solid rgba(255,255,255,0.1); position: relative; }
@media (min-width: 1024px) { .recent-work-section { padding-top: 9rem; } }

/* --- Gallery CTA Banner --- */
.gallery-cta-banner { position: relative; overflow: hidden; width: 100%; background: var(--color-zinc-900); padding: 2rem; border: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 8rem; }
@media (min-width: 768px) { .gallery-cta-banner { padding: 3rem; flex-direction: row; } }
.gallery-cta-bg { position: absolute; inset: 0; z-index: 0; }
.gallery-cta-bg img { width: 100%; height: 100%; object-fit: cover; object-position: right; opacity: 0.6; filter: grayscale(1); }
@media (min-width: 768px) { .gallery-cta-bg img { opacity: 0.75; } }
.gallery-cta-gradient { position: absolute; inset: 0; background: linear-gradient(to right, var(--color-black), rgba(0,0,0,0.7), rgba(0,0,0,0.2)); }
.gallery-cta-text { position: relative; z-index: 10; text-align: center; }
@media (min-width: 768px) { .gallery-cta-text { text-align: left; } }
.gallery-cta-text h3 { font-size: 1.5rem; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.025em; color: var(--color-white); margin-bottom: 0.5rem; }
@media (min-width: 768px) { .gallery-cta-text h3 { font-size: 2.25rem; } }
.gallery-cta-text p { color: var(--color-gray-300); font-weight: 300; font-size: 0.875rem; max-width: 36rem; }
@media (min-width: 768px) { .gallery-cta-text p { font-size: 1rem; } }
.gallery-cta-btn { position: relative; z-index: 10; display: inline-flex; align-items: center; gap: 0.75rem; background: var(--color-white); color: var(--color-black); padding: 1rem 2rem; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.75rem; font-weight: 700; transition: background-color 0.3s; white-space: nowrap; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
.gallery-cta-btn:hover { background: var(--color-gray-200); }

/* --- Featured Styles --- */
.featured-styles { }
.featured-style { position: relative; padding-top: 6rem; padding-bottom: 6rem; min-height: 550px; width: 100%; display: flex; align-items: center; overflow: hidden; border-top: 1px solid rgba(255,255,255,0.1); background: #0a0a0a; }
@media (min-width: 768px) { .featured-style { padding-top: 8rem; padding-bottom: 8rem; min-height: 620px; } }
@media (min-width: 1024px) { .featured-style { padding-top: 9rem; padding-bottom: 9rem; } }
.featured-style-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.featured-style-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: 0.5; object-position: right; }
@media (min-width: 768px) { .featured-style:nth-child(3) .featured-style-bg img { object-position: center; } }
.featured-style-gradient { position: absolute; inset: 0; background: linear-gradient(to right, var(--color-black), rgba(0,0,0,0.8), transparent); }
.featured-style-gradient-top { position: absolute; inset: 0; background: linear-gradient(to top, #0a0a0a, transparent, rgba(10,10,10,0.6)); }
.featured-style-content { max-width: 36rem; display: flex; flex-direction: column; gap: 1.5rem; margin-left: 0; margin-right: auto; }
.featured-badge { display: inline-block; background: rgba(255,255,255,0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 0.25rem 1rem; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: white; font-weight: 700; border: 1px solid rgba(255,255,255,0.2); width: fit-content; }
.featured-title { font-size: 3.75rem; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; text-transform: uppercase; line-height: 0.9; }
@media (min-width: 768px) { .featured-title { font-size: 6rem; } }
.featured-artist { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-gray-400); font-weight: 600; }
.featured-desc { color: var(--color-gray-300); font-size: 1.125rem; font-weight: 300; line-height: 1.5; }
.featured-actions { display: flex; flex-wrap: wrap; gap: 1rem; padding-top: 0.5rem; }

/* --- Team Section Page --- */
.team-section-page { padding-top: 8rem; padding-bottom: 8rem; background: #0a0a0a; overflow: hidden; border-top: 1px solid rgba(255,255,255,0.1); }
.team-section-page .section-header { margin-bottom: 4rem; }

/* --- Booking Section Page (white bg) --- */
.booking-section-page { padding-top: 8rem; padding-bottom: 8rem; background: var(--color-white); color: var(--color-black); position: relative; overflow: hidden; }
.booking-section-page .booking-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; }
@media (min-width: 1024px) { .booking-section-page .booking-grid { grid-template-columns: repeat(12, 1fr); gap: 6rem; } }
.booking-section-page .booking-info-col { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 1024px) { .booking-section-page .booking-info-col { grid-column: span 5; } }
.booking-section-page .booking-title { font-size: 3rem; font-family: var(--font-display); font-weight: 500; line-height: 0.95; letter-spacing: -0.025em; }
@media (min-width: 768px) { .booking-section-page .booking-title { font-size: 4.5rem; } }
.booking-section-page .booking-desc { color: var(--color-gray-600); font-weight: 300; line-height: 1.5; font-size: 1.125rem; }
.booking-contact-info { padding-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.booking-contact-label { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-gray-500); margin-bottom: 0.25rem; }
.booking-contact-value { font-weight: 500; }
@media (min-width: 1024px) { .booking-section-page .booking-form-col { grid-column: span 7; } }
.booking-form { display: flex; flex-direction: column; gap: 1.5rem; position: relative; z-index: 10; }

/* Form inputs on white bg */
.form-input-dark { color: var(--color-black) !important; }
.form-input-dark::placeholder { color: var(--color-gray-500) !important; }
.form-select-dark { color: var(--color-black) !important; }
.form-select-icon-dark { color: var(--color-gray-600); }
.form-input-date { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.875rem; color: var(--color-gray-500) !important; }
.form-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } }

/* Booking color toggle */
.booking-toggle-group { display: flex; flex-direction: column; gap: 1rem; padding-top: 1.5rem; }
.booking-toggle { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; width: 100%; text-align: left; }
.booking-toggle span { font-size: 1.125rem; color: var(--color-gray-700); font-weight: 500; transition: color 0.3s; }
.booking-toggle:hover span { color: var(--color-black); }
.toggle-switch { width: 3rem; height: 1.5rem; border-radius: 9999px; background: var(--color-gray-400); transition: background-color 0.3s; position: relative; flex-shrink: 0; }
.toggle-switch::after { content: ""; position: absolute; top: 0.25rem; left: 0.25rem; width: 1rem; height: 1rem; border-radius: 50%; background: white; transition: transform 0.3s; }
.toggle-switch.active { background: var(--color-black); }
.toggle-switch.active::after { transform: translateX(1.5rem); }
.booking-submit { padding-top: 2rem; }
.btn-dark-submit { background: var(--color-black); color: var(--color-white); padding: 1.25rem 3rem; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.875rem; font-weight: 500; transition: opacity 0.3s; cursor: pointer; border: none; }
.btn-dark-submit:hover { opacity: 0.8; }

/* --- Project Modal --- */
.project-modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.95); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); display: none; align-items: center; justify-content: center; padding: 1rem; }
.project-modal-overlay.active { display: flex; }
@media (min-width: 768px) { .project-modal-overlay { padding: 2rem; } }
.project-modal { background: var(--color-zinc-900); border: 1px solid rgba(255,255,255,0.2); max-width: 56rem; width: 100%; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); position: relative; display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .project-modal { grid-template-columns: 1fr 1fr; } }
.project-modal-close { position: absolute; top: 1rem; right: 1rem; z-index: 20; background: rgba(0,0,0,0.8); color: white; padding: 0.5rem; border: 1px solid rgba(255,255,255,0.2); transition: all 0.3s; }
.project-modal-close:hover { background: white; color: black; }
.project-modal-image { position: relative; aspect-ratio: 3/4; width: 100%; background: var(--color-black); min-height: 350px; }
@media (min-width: 768px) { .project-modal-image { aspect-ratio: auto; } }
.project-modal-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-modal-category { position: absolute; top: 1rem; left: 1rem; background: rgba(0,0,0,0.8); border: 1px solid rgba(255,255,255,0.2); padding: 0.25rem 0.75rem; font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: white; font-weight: 700; }
.project-modal-details { padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; }
.project-modal-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-zinc-400); font-weight: 500; }
.project-modal-title { font-size: 1.875rem; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: white; letter-spacing: -0.025em; line-height: 1; }
.project-modal-artist-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.project-modal-desc { color: var(--color-zinc-300); font-weight: 300; font-size: 1rem; line-height: 1.5; padding-top: 0.5rem; }
.project-modal-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 1rem; }
.modal-tag { font-size: 0.688rem; text-transform: uppercase; letter-spacing: 0.05em; background: var(--color-zinc-800); color: var(--color-zinc-300); padding: 0.25rem 0.75rem; border: 1px solid rgba(255,255,255,0.05); }
.project-modal-actions { padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 0.75rem; }
.project-modal-close-text { width: 100%; text-align: center; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-zinc-400); padding: 0.5rem 0; transition: color 0.3s; background: none; border: none; cursor: pointer; }
.project-modal-close-text:hover { color: white; }

/* --- Parallax --- */
.parallax-bg { will-change: transform, opacity; }

/* --- Utility --- */
.relative { position: relative; }
.z-10 { z-index: 10; }
.space-y-4 { display: flex; flex-direction: column; gap: 1rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-xl { max-width: 36rem; }
.text-zinc-500 { color: var(--color-zinc-500); }
.font-semibold { font-weight: 600; }

/* --- No navbar offset for homepage --- */
.no-navbar .main-content { padding-top: 0; }


.min-h-screen { min-height: 100vh; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-\[1400px\] { max-width: 1400px; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.text-6xl { font-size: 3.75rem; }
.font-light { font-weight: 300; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.leading-relaxed { line-height: 1.5; }
.leading-snug { line-height: 1.375; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-widest { letter-spacing: 0.1em; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.tracking-\[0\.1em\] { letter-spacing: 0.1em; }
.tracking-\[0\.25em\] { letter-spacing: 0.25em; }
.tracking-\[0\.15em\] { letter-spacing: 0.15em; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
.bg-zinc-100 { background-color: #f4f4f5; }
.bg-zinc-800 { background-color: #27272a; }
.bg-zinc-900 { background-color: #18181b; }
.text-gray-300 { color: #d1d5db; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #3f3f46; }
.text-gray-800 { color: #1f2937; }
.border-black\/5 { border-color: rgba(0,0,0,0.05); }
.border-black\/10 { border-color: rgba(0,0,0,0.1); }
.border-gray-400 { border-color: #9ca3af; }
.border-white\/20 { border-color: rgba(255,255,255,0.2); }
.bg-white\/5 { background-color: rgba(255,255,255,0.05); }
.bg-white\/10 { background-color: rgba(255,255,255,0.1); }
.bg-black\/40 { background-color: rgba(0,0,0,0.4); }
.bg-black\/60 { background-color: rgba(0,0,0,0.6); }
.bg-black\/80 { background-color: rgba(0,0,0,0.8); }
.bg-red-500\/20 { background-color: rgba(239,68,68,0.2); }
.bg-red-500\/90 { background-color: rgba(239,68,68,0.9); }
.bg-green-500\/20 { background-color: rgba(34,197,94,0.2); }
.text-green-500 { color: #22c55e; }
.text-red-400 { color: #f87171; }
.text-red-500 { color: #ef4444; }
.text-pink-400 { color: #f472b6; }
.border-transparent { border-color: transparent; }
.border-b-2 { border-bottom-width: 2px; border-bottom-style: solid; }
.pt-20 { padding-top: 5rem; }
.pt-24 { padding-top: 6rem; }
.pt-28 { padding-top: 7rem; }
.pt-32 { padding-top: 8rem; }
.pb-20 { padding-bottom: 5rem; }
.pb-24 { padding-bottom: 6rem; }
.pb-32 { padding-bottom: 8rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-12 { padding-left: 3rem; padding-right: 3rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-24 { margin-bottom: 6rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-\[0\.8vw\] { margin-left: 0.8vw; }
.mr-2 { margin-right: 0.5rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid { display: grid; }
.border { border-width: 1px; border-style: solid; }
.border-b { border-bottom: 1px solid; }
.border-t { border-top: 1px solid; }
.resize-none { resize: none; }
.focus\:outline-none:focus { outline: none !important; }
.focus\:border-white:focus { border-color: #fff !important; }
.focus\:border-black:focus { border-color: #000 !important; }
.cursor-pointer { cursor: pointer; }
.select-none { user-select: none; }
.-translate-y-1\/2 { transform: translateY(-50%); }
.top-1\/2 { top: 50%; }
.right-2 { right: 0.5rem; }
.left-3 { left: 0.75rem; }
.top-3 { top: 0.75rem; }
.placeholder-gray-500::placeholder { color: #6b7280; }
.hover\:opacity-80:hover { opacity: 0.8; }
.hover\:opacity-90:hover { opacity: 0.9; }
.hover\:text-gray-300:hover { color: #d1d5db; }
.hover\:text-gray-400:hover { color: #9ca3af; }
.hover\:text-gray-600:hover { color: #4b5563; }
.hover\:text-white:hover { color: #fff; }
.hover\:text-black:hover { color: #000; }
.hover\:text-pink-300:hover { color: #f9a8d4; }
.hover\:bg-white:hover { background-color: #fff; }
.hover\:bg-gray-200:hover { background-color: #e5e7eb; }
.hover\:bg-zinc-800:hover { background-color: #27272a; }
.hover\:bg-white\/5:hover { background-color: rgba(255,255,255,0.05); }
.hover\:bg-white\/10:hover { background-color: rgba(255,255,255,0.1); }
.hover\:bg-black\/80:hover { background-color: rgba(0,0,0,0.8); }
.hover\:border-white:hover { border-color: #fff; }
.hover\:border-white\/30:hover { border-color: rgba(255,255,255,0.3); }
.hover\:border-zinc-500:hover { border-color: #71717a; }
.hover\:border-black\/30:hover { border-color: rgba(0,0,0,0.3); }
.hover\:border-white\/20:hover { border-color: rgba(255,255,255,0.2); }
.hover\:scale-105:hover { transform: scale(1.05); }
.transition-colors { transition: color 0.3s, background-color 0.3s, border-color 0.3s; }
.transition-all { transition: all 0.3s; }
.transition-opacity { transition: opacity 0.3s; }
.transition-transform { transition: transform 0.5s; }
.duration-500 { transition-duration: 0.5s; }
.duration-1000 { transition-duration: 1s; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.whitespace-nowrap { white-space: nowrap; }
.object-cover { object-fit: cover; }
.object-center { object-position: center; }
.object-right { object-position: right; }
.text-\[10px\] { font-size: 10px; }
.text-\[13vw\] { font-size: 13vw; }
.text-\[2\.5vw\] { font-size: 2.5vw; }
.h-\[9\.5vw\] { height: 9.5vw; }
.py-\[0\.2vw\] { padding-top: 0.2vw; padding-bottom: 0.2vw; }
.aspect-\[16\/9\] { aspect-ratio: 16/9; }
.aspect-\[16\/10\] { aspect-ratio: 16/10; }
.bg-\[\#0a0a0a\] { background-color: #0a0a0a; }
.pr-8 { padding-right: 2rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.bg-transparent { background-color: transparent; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.absolute { position: absolute; }
.relative { position: relative; }
.inset-0 { inset: 0; }
.space-x-2 > * + * { margin-left: 0.5rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.flex-wrap { flex-wrap: wrap; }
.text-right { text-align: right; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-4xl { font-size: 2.25rem; }
.text-6xl { font-size: 3.75rem; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-widest { letter-spacing: 0.1em; }
.font-semibold { font-weight: 600; }
.font-black { font-weight: 900; }
.gap-6 { gap: 1.5rem; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.backdrop-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.backdrop-blur-2xl { backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); }
.mix-blend-difference { mix-blend-mode: difference; }
.grayscale { filter: grayscale(1); }
.hover\:grayscale-0:hover { filter: grayscale(0); }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.opacity-0 { opacity: 0; }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:translate-y-0 { transform: translateY(0); }
.group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }
.group:hover .group-hover\:text-gray-200 { color: #e5e7eb; }
.group:hover .group-hover\:grayscale-0 { filter: grayscale(0); }
.disabled\:opacity-50:disabled { opacity: 0.5; }
.font-mono { font-family: monospace; }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops, #000, #18181b)); }
.from-black { --tw-gradient-from: #000; }
.to-zinc-900 { --tw-gradient-to: #18181b; }
.self-start { align-self: flex-start; }
.flex-shrink-0 { flex-shrink: 0; }
@media (min-width: 768px) {
  .md\:text-right { text-align: right; }
  .md\:text-xl { font-size: 1.25rem; }
  .md\:text-base { font-size: 1rem; }
  .md\:text-6xl { font-size: 3.75rem; }
  .md\:text-8xl { font-size: 6rem; }
  .md\:text-\[9vw\] { font-size: 9vw; }
  .md\:text-\[1\.8vw\] { font-size: 1.8vw; }
  .md\:h-\[6\.5vw\] { height: 6.5vw; }
  .md\:block { display: block; }
  .md\:flex { display: flex; }
  .md\:items-end { align-items: flex-end; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:aspect-\[21\/9\] { aspect-ratio: 21/9; }
  .md\:gap-4 { gap: 1rem; }
  .md\:gap-14 { gap: 3.5rem; }
}
@media (min-width: 1024px) {
  .lg\:px-12 { padding-left: 3rem; padding-right: 3rem; }
  .lg\:flex { display: flex; }
  .lg\:flex-row { flex-direction: row; }
  .lg\:items-end { align-items: flex-end; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
  .lg\:col-span-5 { grid-column: span 5; }
  .lg\:col-span-7 { grid-column: span 7; }
  .lg\:gap-4 { gap: 1rem; }
  .lg\:gap-8 { gap: 2rem; }
  .lg\:gap-24 { gap: 6rem; }
}
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .max-md\:hidden { display: none; }
}
.overflow-y-auto { overflow-y: auto; }
.whitespace-pre-line { white-space: pre-line; }
.aspect-square { aspect-ratio: 1; }

/* Final cascade guards for the migrated storefront and admin shell. */
.shop-hero-content { padding-top: 1rem; }
@media (min-width: 768px) { .shop-hero-content { padding-top: 1.5rem; } }
body.admin-body .admin-layout { min-height: 100vh; display: flex; overflow: visible; background: #f5f5f5; color: #000; }
body.admin-body .admin-sidebar { display: none; position: sticky; top: 0; left: auto; width: 16rem; height: 100vh; padding: 0; flex: none; flex-direction: column; overflow: hidden; background: #fff; color: #000; border-right: 1px solid rgba(0,0,0,.1); }
body.admin-body .admin-main { flex: 1; min-width: 0; margin-left: 0; padding: 0; background: #f5f5f5; }
body.admin-body .admin-sidebar-link { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: .5rem; color: #4b5563; background: transparent; font-size: .875rem; font-weight: 500; letter-spacing: .025em; }
body.admin-body .admin-sidebar-link:hover { background: #f3f4f6; color: #000; }
body.admin-body .admin-sidebar-link.active { background: #000; color: #fff; }
body.admin-body .dashboard-card, body.admin-body .admin-card { padding: 2rem; border: 1px solid rgba(0,0,0,.05); border-radius: 1rem; background: #fff; color: #000; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
@media (min-width: 768px) { body.admin-body .admin-sidebar { display: flex; } }
.navbar-light.scrolled .nav-link,
.navbar-light.scrolled .nav-dropdown-btn,
.navbar-light.scrolled .navbar-lang-btn,
.navbar-light.scrolled .navbar-icon-link { color: var(--color-gray-300); }
.navbar-light.scrolled .nav-link:hover,
.navbar-light.scrolled .nav-dropdown-btn:hover,
.navbar-light.scrolled .navbar-lang-btn:hover,
.navbar-light.scrolled .navbar-icon-link:hover { color: var(--color-white); }
.navbar-light.scrolled .nav-link-line { background-color: var(--color-white); }
.navbar-light.scrolled .navbar-logo-img { filter: invert(1) brightness(1.2) contrast(1.05); }

/* ============================================================
   FINAL PUBLIC-PAGE ALIGNMENT
   Stable three-column header and exact 1400px content axis.
   ============================================================ */
@media (min-width: 1024px) {
  .navbar-inner,
  .navbar.scrolled .navbar-inner { padding: 1rem 3rem; }
  .navbar-row {
    display: grid;
    grid-template-columns: minmax(13rem, 1fr) auto minmax(13rem, 1fr);
    min-height: 3rem;
  }
  .navbar-logo { justify-self: start; }
  .navbar-desktop-menu { justify-self: center; }
  .navbar-actions { justify-self: end; }
  .service-hero-content,
  .appointments-container,
  .guest-artists-container { padding-left: 3rem; padding-right: 3rem; }
}

.navbar-service:not(.scrolled) { background: transparent; }
.service-hero { padding-top: 5rem; }
.service-hero-content { transform: translateY(-2.25rem); }

.appointments-title {
  margin: 0 0 2rem;
  font-family: var(--font-display);
  font-size: 3.75rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -.04em;
}
.appointments-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 6rem; align-items: start; }
.appointments-copy, .appointments-form-wrap, .appointments-form, .appointment-row, .appointment-field { min-width: 0; }
.appointments-form { width: 100%; }
.appointment-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.appointment-field {
  position: relative;
  padding: .5rem 0;
  border-bottom: 1px solid #9ca3af;
}
.appointment-field input,
.appointment-field select,
.appointment-field textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  color: #000;
  font: inherit;
  font-size: 1.25rem;
  line-height: 1.5;
  min-width: 0;
}
.appointment-field input::placeholder,
.appointment-field textarea::placeholder { color: #6b7280; opacity: 1; text-overflow: ellipsis; }
.appointment-field textarea { min-height: 7.5rem; resize: none; }
.appointment-select select { padding-right: 2rem; appearance: none; cursor: pointer; }
.appointment-select svg {
  position: absolute; right: .5rem; top: 50%;
  transform: translateY(-50%); pointer-events: none; color: #4b5563;
}
.appointment-field:focus-within { border-bottom-color: #000; }
.form-legal-consent { display: flex; align-items: flex-start; gap: .75rem; color: #a1a1aa; font-size: .75rem; line-height: 1.55; }
.form-legal-consent input { width: 1rem; height: 1rem; margin-top: .1rem; flex: none; accent-color: #fff; }
.form-legal-consent a { color: #fff; text-decoration: underline; text-underline-offset: .15em; }
.form-legal-consent.light { color: #52525b; }
.form-legal-consent.light input { accent-color: #000; }
.form-legal-consent.light a { color: #000; }
.form-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.admin-mini-stats { margin-bottom: 1.25rem; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .8rem; }
.admin-mini-stats article { padding: 1rem; border: 1px solid #e5e7eb; border-radius: .8rem; background: #fff; }
.admin-mini-stats span,.admin-mini-stats strong { display: block; }.admin-mini-stats span{color:#6b7280;font-size:.62rem;text-transform:uppercase}.admin-mini-stats strong{margin-top:.35rem;font-size:1.35rem}
.admin-tabs { margin-bottom: 1rem; display: flex; gap: .35rem; border-bottom: 1px solid #ddd; }
.admin-tabs button { padding: .7rem .9rem; border-bottom: 2px solid transparent; color: #6b7280; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.admin-tabs button.active { border-color: #000; color: #000; }
.admin-responsive-table small { display: block; margin-top: .2rem; color: #9ca3af; font-size: .62rem; }
.admin-empty { padding: 2rem; color: #6b7280; text-align: center; font-size: .75rem; }
.admin-toggle-row { padding: 1rem; display: flex; align-items: center; justify-content: space-between; border: 1px solid #e5e7eb; border-radius: .7rem; }
.admin-toggle-row strong,.admin-toggle-row span{display:block}.admin-toggle-row strong{font-size:.78rem;text-transform:uppercase}.admin-toggle-row span{margin-top:.2rem;color:#6b7280;font-size:.65rem}.admin-toggle-row input{width:1.25rem;height:1.25rem;accent-color:#000}
.admin-field.checkbox { justify-content: center; }.admin-field.checkbox input{width:1.25rem;height:1.25rem;accent-color:#000}
@media(max-width:700px){.admin-mini-stats{grid-template-columns:repeat(2,1fr)}}
.admin-panel-toolbar { margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.admin-panel-toolbar p{color:#6b7280;font-size:.7rem}
.admin-product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.admin-product-grid article { overflow: hidden; border: 1px solid #e5e7eb; border-radius: 1rem; background: #fff; }
.admin-product-image { position: relative; height: 12rem; overflow: hidden; background: #111; }.admin-product-image img{width:100%;height:100%;object-fit:cover}.admin-product-image span{position:absolute;right:.65rem;bottom:.65rem;padding:.3rem .5rem;border-radius:999px;background:#000;color:#fff;font-size:.6rem;font-weight:700}
.admin-product-copy { padding: 1rem; }.admin-product-copy small{color:#6b7280;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase}.admin-product-copy h3{margin:.25rem 0;font-size:.9rem;text-transform:uppercase}.admin-product-copy p{min-height:2.5rem;color:#6b7280;font-size:.7rem;line-height:1.5}.admin-product-copy>div{margin-top:.8rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem}.admin-product-copy strong{font-size:1rem}
.admin-inline-status select { padding: .45rem; border: 1px solid #ddd; border-radius: .4rem; background: #fff; font-size: .7rem; }
@media(max-width:900px){.admin-product-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:580px){.admin-product-grid{grid-template-columns:1fr}.admin-panel-toolbar{align-items:stretch;flex-direction:column}}
.admin-heading-actions { display: flex; gap: .5rem; }
.admin-menu-help { margin-bottom: 1rem; padding: .75rem 1rem; display: flex; flex-wrap: wrap; gap: 1rem; border-radius: .7rem; background: #e5e7eb; color: #4b5563; font-size: .65rem; }
.admin-menu-builder { display: grid; gap: .45rem; }
.admin-menu-level { display: grid; gap: .45rem; }
.admin-menu-children { margin-left: clamp(.7rem,3vw,2.4rem); padding-left: .75rem; border-left: 1px solid #d1d5db; }
.admin-menu-node { padding: .65rem; display: flex; align-items: center; gap: .65rem; border: 1px solid #e5e7eb; border-radius: .7rem; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.025); }
.admin-menu-grip { width: 1.3rem; flex: none; color: #9ca3af; font-size: .7rem; text-align: center; }
.admin-menu-inputs { flex: 1; display: grid; grid-template-columns: minmax(10rem,.75fr) minmax(10rem,1fr); gap: .6rem; }
.admin-menu-inputs label { color: #9ca3af; font-size: .55rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.admin-menu-inputs input { width: 100%; margin-top: .2rem; padding: .5rem .6rem; border: 1px solid #e5e7eb; border-radius: .4rem; color: #111; font-size: .72rem; }
.admin-menu-actions { display: flex; gap: .25rem; }.admin-menu-actions button{width:1.8rem;height:1.8rem;border-radius:.35rem;background:#f3f4f6;color:#374151;font-weight:800}.admin-menu-actions button:hover{background:#000;color:#fff}.admin-menu-actions button.danger{color:#dc2626}.admin-menu-actions button.danger:hover{background:#dc2626;color:#fff}
@media(max-width:700px){.admin-heading-actions{align-items:stretch;flex-direction:column}.admin-menu-node{align-items:flex-start;flex-wrap:wrap}.admin-menu-inputs{grid-template-columns:1fr}.admin-menu-actions{margin-left:auto}}
.admin-chart-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:1rem }.admin-chart-heading h2{margin:0!important}.admin-chart-heading p{margin-top:.25rem;color:#6b7280;font-size:.7rem}.admin-chart-heading>div:last-child{display:flex;gap:.8rem;color:#6b7280;font-size:.65rem}.admin-chart-heading span:before{content:'';width:.55rem;height:.55rem;margin-right:.3rem;display:inline-block;border-radius:50%;background:#111}.admin-chart-heading span.orders:before{background:#c4b5fd}
.admin-live-chart { height: 260px; padding: 1.5rem 1rem 0; display: grid; grid-template-columns: repeat(7,1fr); gap: 1rem; border-bottom: 1px solid #ddd; background: repeating-linear-gradient(to bottom,transparent 0,transparent 63px,#eee 64px); }
.admin-live-column { display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.55rem }.admin-live-column>span{height:1rem;color:#9ca3af;font-size:.62rem}.admin-live-bars{height:210px;display:flex;align-items:flex-end;gap:.3rem}.admin-live-bars i{width:clamp(.5rem,1.4vw,1.1rem);display:block;border-radius:.25rem .25rem 0 0;background:#111;min-height:4px}.admin-live-bars i.orders{background:#c4b5fd}
.admin-record-card { margin-bottom: .75rem; padding: 1.15rem 1.25rem !important; border-color: #e5e7eb !important; box-shadow: none !important; }

.guest-artists-title {
  margin: 0 0 2rem;
  padding: 0 0 2rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-wrap: balance;
}

.shop-heading { padding-top: clamp(3.5rem, 6vw, 6rem); }
.shop-heading h2 { margin-bottom: 1.5rem; line-height: .88; letter-spacing: -.05em; }
.shop-heading p { max-width: 40rem; }
.shop-toolbar { margin-bottom: 3.5rem; }
.shop-product-card { display: flex; flex-direction: column; min-height: 100%; }
.shop-hero { isolation: isolate; overflow: hidden; }
.shop-hero::after {
  content: ''; position: absolute; z-index: 0; inset: 0;
  background-image: var(--shop-hero-image);
  background-size: cover; background-position: center 42%;
  filter: grayscale(1) contrast(1.08); opacity: .16; transform: scale(1.03);
}
.shop-hero::before { z-index: 1; background: rgba(0,0,0,.73); }

.floating-heart {
  bottom: auto;
  margin: 0;
  transform: translate(-50%, -50%);
  transform-origin: center;
}
@keyframes floatHeart {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -10rem) scale(1.6); }
}

@media (min-width: 768px) {
  .appointments-title { font-size: 6rem; }
}
@media (max-width: 1023px) {
  .service-hero-content { transform: translateY(-1rem); }
  .appointments-layout { grid-template-columns: 1fr; gap: 4rem; }
}
@media (max-width: 767px) { .appointment-row { grid-template-columns: 1fr; } }

/* Legal documents and consent centre */
.footer-legal {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  padding: 2rem 0 0; border-top: 1px solid rgba(0,0,0,.1);
  font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.footer-legal a, .footer-legal button { color: #52525b; transition: color .2s; }
.footer-legal a:hover, .footer-legal button:hover { color: #000; }
.legal-page { width: 100%; max-width: 1120px; margin: 0 auto; padding: 8rem 3rem 10rem; color: #fff; }
.legal-header { max-width: 52rem; margin-bottom: 5rem; }
.legal-kicker { margin-bottom: 1rem; color: #a1a1aa; font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.legal-header h1 { margin-bottom: 1.5rem; font-family: var(--font-display); font-size: clamp(3.5rem, 8vw, 7.5rem); line-height: .85; letter-spacing: -.06em; text-transform: uppercase; }
.legal-header > p:last-child { color: #a1a1aa; font-size: 1.25rem; line-height: 1.65; }
.legal-page section { padding: 2.5rem 0; border-top: 1px solid rgba(255,255,255,.12); }
.legal-page h2 { margin-bottom: 1.25rem; font-family: var(--font-display); font-size: 1.65rem; letter-spacing: -.03em; word-spacing: .1em; text-transform: uppercase; }
.legal-page p, .legal-page li { max-width: 58rem; color: #b4b4bb; line-height: 1.8; }
.legal-page p + p { margin-top: 1rem; }
.legal-page strong { color: #fff; }
.legal-page a { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.legal-page ol { padding-left: 1.25rem; display: grid; gap: .75rem; list-style: decimal; }
.legal-table-wrap { overflow-x: auto; }
.legal-page table { width: 100%; min-width: 720px; border-collapse: collapse; }
.legal-page th, .legal-page td { padding: 1rem; border: 1px solid rgba(255,255,255,.12); color: #b4b4bb; text-align: left; vertical-align: top; font-size: .875rem; line-height: 1.55; }
.legal-page th { color: #fff; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.cookie-banner {
  position: fixed; z-index: 100; left: 1rem; right: auto; bottom: 1rem;
  width: min(calc(100vw - 2rem), 23rem); margin: 0; padding: .75rem; display: flex; flex-direction: column; align-items: stretch; gap: .65rem;
  border: 1px solid rgba(255,255,255,.16); background: #000; color: #fff; box-shadow: 0 14px 38px rgba(0,0,0,.3);
}
.cookie-banner[hidden], .cookie-modal[hidden] { display: none; }
.cookie-banner-copy { max-width: 42rem; }
.cookie-banner-copy strong { display: block; margin-bottom: .25rem; font-family: var(--font-display); font-size: .76rem; text-transform: uppercase; }
.cookie-banner-copy p { color: #a1a1aa; font-size: .64rem; line-height: 1.4; }
.cookie-banner-copy a { display: inline-block; margin-top: .25rem; color: #d4d4d8; font-size: .58rem; text-decoration: underline; }
.protected-email { color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.protected-email[data-email-reversed],
[data-login-email-reversed] .protected-email-text { direction: rtl; unicode-bidi: bidi-override; }
.cookie-banner-actions, .cookie-dialog-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.cookie-banner-actions button, .cookie-dialog-actions button { min-height: 2.1rem; padding: .4rem .35rem; border: 1px solid #52525b; color: #fff; font-size: .49rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.cookie-banner-actions { gap: .35rem; }
.cookie-banner-actions button { flex: 1 1 0; min-width: 0; }
.cookie-banner-actions .cookie-primary, .cookie-dialog-actions .cookie-primary { border-color: #fff; background: #fff; color: #000; }
.cookie-banner-actions [data-cookie-choice], .cookie-dialog-actions [data-cookie-choice] { border-color: #fff; background: #fff; color: #000; }
.cookie-modal { position: fixed; z-index: 110; inset: 0; padding: 1.25rem; display: grid; place-items: center; background: rgba(0,0,0,.72); backdrop-filter: blur(8px); }
.cookie-dialog { position: relative; width: min(100%, 640px); max-height: calc(100vh - 2.5rem); overflow: auto; padding: 2rem; background: #fff; color: #000; }
.cookie-dialog h2 { margin-bottom: 2rem; font-family: var(--font-display); font-size: 2.25rem; letter-spacing: -.04em; text-transform: uppercase; }
.cookie-dialog .legal-kicker { color: #71717a; }
.cookie-close { position: absolute; top: 1rem; right: 1rem; width: 2rem; height: 2rem; font-size: 1.75rem; }
.cookie-category { padding: 1.25rem 0; display: flex; justify-content: space-between; align-items: center; gap: 2rem; border-top: 1px solid #e4e4e7; }
.cookie-category strong { text-transform: uppercase; }
.cookie-category p { margin-top: .25rem; color: #71717a; font-size: .8rem; line-height: 1.5; }
.cookie-category span { flex: none; color: #71717a; font-size: .7rem; text-transform: uppercase; }
.cookie-category input { width: 1.25rem; height: 1.25rem; accent-color: #000; }
.cookie-dialog-actions { padding-top: 1.5rem; border-top: 1px solid #e4e4e7; }
.cookie-dialog-actions button { border-color: #a1a1aa; color: #000; }
body.cookie-open { overflow: hidden; }
@media (max-width: 767px) {
  .legal-page { padding: 6rem 1.5rem 8rem; }
  .cookie-banner { align-items: stretch; flex-direction: column; gap: 1rem; }
  .cookie-banner-actions button { flex: 1 1 0; }
}
.admin-json-editor { margin-top: 1.5rem; }
.admin-json-editor summary { cursor: pointer; font-weight: 700; text-transform: uppercase; }
.admin-json-editor p { margin: 1rem 0; color: #6b7280; font-size: .8rem; }
.admin-json-editor textarea { width: 100%; min-height: 28rem; margin-bottom: 1rem; padding: 1rem; border: 1px solid #d1d5db; background: #111827; color: #e5e7eb; font: .75rem/1.55 Consolas, monospace; tab-size: 2; }
.admin-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.admin-row-actions select { padding: .5rem; border: 1px solid #d1d5db; background: #fff; color: #111; text-transform: uppercase; font-size: .7rem; }
.admin-danger { color: #dc2626; }
.admin-flash { margin-bottom: 1rem; padding: .75rem 1rem; border: 1px solid #a7f3d0; background: #ecfdf5; color: #047857; font-size: .8rem; font-weight: 600; }
.admin-shop-tab { border-radius: 0; border-bottom: 2px solid transparent; background: transparent; color: #9ca3af; }
.admin-shop-tab.active { border-bottom-color: #000; color: #000; }
.admin-shop-panel[hidden] { display: none; }
.admin-mail-status { margin-bottom: 1.5rem; padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid #fed7aa; background: #fff7ed; color: #9a3412; font-size: .8rem; }
.admin-mail-status.ready { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.admin-editor-heading { margin-bottom: 1.75rem; padding-bottom: 1.5rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; border-bottom: 1px solid rgba(0,0,0,.1); }
.admin-editor-heading h1 { margin: .25rem 0 .35rem; font-family: var(--font-display); font-size: clamp(1.9rem,3vw,2.65rem); line-height: 1; letter-spacing: -.045em; text-transform: uppercase; }
.admin-editor-heading p { color: #6b7280; font-size: .86rem; }
.admin-kicker { color: #6b7280; font-size: .64rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.admin-secondary-button { display: inline-flex; align-items: center; justify-content: center; padding: .7rem 1.1rem; border: 1px solid #d1d5db; border-radius: .55rem; background: #fff; color: #111; font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.admin-flash.error { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.admin-upload-zone { margin-bottom: 1.5rem; min-height: 8rem; padding: 1.25rem; display: flex; align-items: center; justify-content: center; gap: 1rem; border: 1px dashed #9ca3af; border-radius: 1rem; background: #fff; text-align: left; cursor: pointer; transition: .2s ease; }
.admin-upload-zone:hover,.admin-upload-zone.active { border-color: #000; background: #f0fdf4; box-shadow: inset 0 0 0 1px #000; }
.admin-upload-zone strong { display: block; font-size: .72rem; letter-spacing: .12em; }
.admin-upload-zone p { margin-top: .25rem; color: #6b7280; font-size: .72rem; }
.admin-upload-mark { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; flex: none; border-radius: 50%; background: #000; color: #fff; font-size: 1.35rem; }
.admin-gallery-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.admin-gallery-card { overflow: hidden; border: 1px solid #e5e7eb; border-radius: 1rem; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: opacity .2s, transform .2s; }
.admin-gallery-card.dragging { opacity: .45; transform: scale(.98); }
.admin-gallery-image { position: relative; aspect-ratio: 1; overflow: hidden; background: #111; }
.admin-gallery-image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: .4s; }
.admin-gallery-card:hover img { filter: grayscale(0); transform: scale(1.025); }
.admin-drag-handle { position: absolute; top: .65rem; right: .65rem; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.75); color: #fff; font-size: .85rem; cursor: grab; }
.admin-home-badge { position:absolute; left:.65rem; top:.65rem; z-index:2; padding:.4rem .6rem; border-radius:999px; background:#fff; color:#000; box-shadow:0 4px 16px rgba(0,0,0,.25); font-size:.58rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.admin-gallery-meta { padding: .85rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.admin-gallery-meta strong,.admin-gallery-meta span { display: block; }
.admin-gallery-meta strong { font-size: .75rem; text-transform: uppercase; }
.admin-gallery-meta span { margin-top: .2rem; color: #6b7280; font-size: .62rem; }
.admin-card-actions { display: flex; align-items: center; gap: .35rem; }
.admin-card-actions button { padding: .45rem .55rem; border-radius: .4rem; background: #f3f4f6; color: #374151; font-size: .62rem; font-weight: 700; text-transform: uppercase; }
.admin-card-actions button:hover { background: #000; color: #fff; }
.admin-card-actions button.danger { background: #fef2f2; color: #dc2626; }
.admin-card-actions button.danger:hover { background: #dc2626; color: #fff; }
.admin-editor-dialog { width: min(94vw,42rem); max-height: 90vh; padding: 0; overflow: auto; border: 0; border-radius: 1.35rem; background: #fff; color: #111; box-shadow: 0 24px 80px rgba(0,0,0,.38); }
.admin-editor-dialog::backdrop { background: rgba(0,0,0,.76); backdrop-filter: blur(5px); }
.admin-editor-form > header { padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee; }
.admin-editor-form > header h2 { margin-top: .2rem; font-family: var(--font-display); font-size: 1.55rem; text-transform: uppercase; }
.admin-editor-form > header button { width: 2rem; height: 2rem; color: #6b7280; font-size: 1.55rem; }
.admin-editor-form > .admin-form-grid { padding: 1.5rem; }
.admin-form-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.admin-form-grid .wide { grid-column: 1/-1; }
.admin-editor-form > footer { padding: 1rem 1.5rem 1.4rem; display: flex; justify-content: flex-end; gap: .6rem; border-top: 1px solid #eee; }
.admin-image-picker { margin: 1.5rem 1.5rem 0; min-height: 6rem; padding: 1rem; display: grid; place-items: center; border: 1px dashed #9ca3af; border-radius: .75rem; text-align: center; cursor: pointer; }
.admin-image-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.admin-image-picker span { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.admin-image-picker small { display: block; margin-top: .2rem; color: #6b7280; }
.admin-image-picker.compact { min-height: 3rem; }
.admin-dialog-preview { margin: 1.5rem 1.5rem 0; height: 13rem; overflow: hidden; border-radius: .75rem; background: #111; }
.admin-dialog-preview img { width: 100%; height: 100%; object-fit: cover; }
.admin-category-grid { display: grid; gap: 1rem; }
.admin-category-card { overflow: hidden; border: 1px solid #e5e7eb; border-radius: 1rem; background: #fff; }
.admin-category-card > header { padding: 1.1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #fafafa; border-bottom: 1px solid #eee; }
.admin-category-card > header h2 { margin-top: .18rem; font-size: 1rem; text-transform: uppercase; }
.admin-category-card > header span { color: #6b7280; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.admin-service-list article { padding: .85rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #f1f1f1; }
.admin-service-list article:last-child { border-bottom: 0; }
.admin-service-list strong,.admin-service-list span { display: block; }
.admin-service-list strong { font-size: .8rem; text-transform: uppercase; }
.admin-service-list article > div:first-child span { margin-top: .2rem; color: #6b7280; font: .65rem Consolas,monospace; }
.admin-status-pill { padding: .3rem .5rem; border-radius: 999px; background: #d1fae5 !important; color: #047857 !important; font-size: .55rem !important; }
.admin-status-pill.off { background: #f3f4f6 !important; color: #6b7280 !important; }
.admin-table-card { overflow: hidden; border: 1px solid #e5e7eb; border-radius: 1rem; background: #fff; }
.admin-responsive-table { overflow-x: auto; }
.admin-responsive-table table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.admin-responsive-table th { padding: .9rem 1rem; background: #fafafa; color: #6b7280; font-size: .62rem; letter-spacing: .1em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.admin-responsive-table td { padding: .9rem 1rem; border-top: 1px solid #f1f1f1; color: #4b5563; vertical-align: middle; }
.admin-responsive-table td:last-child { width: 1%; white-space: nowrap; }
.admin-person { display: flex; align-items: center; gap: .7rem; min-width: 13rem; }
.admin-person img { width: 2.6rem; height: 2.6rem; flex: none; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.admin-person strong,.admin-person span { display: block; }
.admin-person strong { color: #111; font-size: .75rem; text-transform: uppercase; }
.admin-person span { margin-top: .15rem; color: #9ca3af; font-size: .62rem; }
.admin-dialog-preview.portrait { height: 10rem; }
.admin-role-pill { padding: .3rem .55rem; border-radius: 999px; background: #f3f4f6; color: #4b5563; font-size: .58rem; font-weight: 800; text-transform: uppercase; }
.admin-role-pill.admin { background: #fee2e2; color: #991b1b; }
.admin-warning { margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid #fed7aa; border-radius: .65rem; background: #fff7ed; color: #9a3412; font-size: .75rem; }
.admin-settings-form { display: grid; gap: 1rem; }
.admin-settings-form .admin-card h2 { margin: .25rem 0 1.15rem; font-size: 1.15rem; text-transform: uppercase; }
.admin-section-note { margin: -.6rem 0 1.1rem; color: #6b7280; font-size: .72rem; }
.admin-sticky-save { position: sticky; z-index: 10; bottom: 1rem; padding: .8rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid #ddd; border-radius: .8rem; background: rgba(255,255,255,.94); box-shadow: 0 10px 30px rgba(0,0,0,.1); backdrop-filter: blur(10px); }
.admin-sticky-save span { color: #6b7280; font-size: .7rem; }
@media (min-width: 700px) { .admin-gallery-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (min-width: 1150px) { .admin-gallery-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width: 640px) { .admin-editor-heading { align-items: stretch; flex-direction: column; } .admin-form-grid.two { grid-template-columns: 1fr; } .admin-gallery-grid { grid-template-columns: 1fr; } .admin-upload-zone { text-align:center;flex-direction:column; } }
.admin-mail-status span { color: #6b7280; }
.admin-email-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(22rem, .7fr); gap: 1.5rem; align-items: start; }
.admin-email-events { min-width: 0; display: grid; gap: .75rem; }
.admin-email-card { padding: 0 !important; overflow: hidden; }
.admin-email-card summary { padding: 1.15rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; }
.admin-email-card summary::-webkit-details-marker { display: none; }
.admin-email-card summary > span { display: grid; gap: .2rem; }
.admin-email-card summary strong { font-size: .85rem; text-transform: uppercase; }
.admin-email-card summary small { color: #9ca3af; font-size: .68rem; }
.admin-email-switch { display: flex; align-items: center; gap: .5rem; font-size: .65rem; text-transform: uppercase; }
.admin-email-switch input { width: 1rem; height: 1rem; accent-color: #000; }
.admin-email-fields { padding: 1.25rem; display: grid; gap: 1rem; border-top: 1px solid #f0f0f0; background: #fafafa; }
.admin-email-fields textarea { width: 100%; padding: .75rem; border: 1px solid #d1d5db; background: #fff; color: #111; resize: vertical; }
.admin-email-help { color: #6b7280; font-size: .7rem; }
.admin-email-help code { padding: .1rem .25rem; background: #e5e7eb; color: #111; }
.admin-email-save { justify-self: start; margin-top: .5rem; }
.admin-email-preview { position: sticky; top: 1.5rem; }
.admin-email-preview h2 { margin-bottom: .25rem; font-size: 1.1rem; text-transform: uppercase; }
.admin-email-preview > p { margin-bottom: 1rem; color: #6b7280; font-size: .75rem; }
.admin-email-preview iframe { width: 100%; height: 680px; border: 1px solid #e5e7eb; background: #ededed; }
@media (max-width: 1100px) { .admin-email-layout { grid-template-columns: 1fr; } .admin-email-preview { position: static; } }

/* ============================================================
   COMPACT PUBLIC NAVIGATION
   ============================================================ */
.nav-sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}
.navbar-actions { gap: .85rem; }
.navbar-action-icon {
  width: 2rem; height: 2rem; display: inline-grid; place-items: center;
  flex: none; border-radius: 50%; transition: color .2s, background-color .2s;
}
.navbar-dark .navbar-action-icon:hover { background: rgba(255,255,255,.1); }
.navbar-light .navbar-action-icon:hover { background: rgba(0,0,0,.07); }
.navbar-light.scrolled .navbar-action-icon:hover { background: rgba(255,255,255,.1); }
.navbar-language { position: relative; }
.navbar-language summary { list-style: none; }
.navbar-language summary::-webkit-details-marker { display: none; }
.navbar-lang-btn {
  height: 2rem; padding: 0 .35rem; display: flex; align-items: center; gap: .4rem;
  cursor: pointer; letter-spacing: .12em;
}
.flagpack-icon { width: 1.5rem; height: 1.125rem; display: block; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.13); }
.navbar-language-menu {
  position: absolute; z-index: 80; top: calc(100% + .7rem); right: 0; width: 10.5rem;
  padding: .45rem; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.96);
  box-shadow: 0 18px 45px rgba(0,0,0,.28); backdrop-filter: blur(16px);
}
.navbar-language-menu a { padding: .65rem .7rem; display: flex; align-items: center; gap: .65rem; color: #a1a1aa; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.navbar-language-menu a:hover,.navbar-language-menu a.active { color: #fff; background: rgba(255,255,255,.08); }
.mobile-language-picker { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; margin-bottom: 1.5rem; }
.mobile-language-picker a { padding: .8rem; display: flex; align-items: center; justify-content: center; gap: .55rem; border: 1px solid rgba(255,255,255,.15); color: #a1a1aa; font-size: .72rem; text-transform: uppercase; }
.mobile-language-picker a.active { border-color: #fff; color: #fff; }
.nav-link.active .nav-link-line,.nav-dropdown-btn.active .nav-link-line { width: 100%; }
@media (min-width: 1180px) {
  .navbar-desktop-menu { gap: clamp(1rem,1.45vw,1.75rem); }
  .nav-link,.nav-dropdown-btn { font-size: .7rem; letter-spacing: .16em; white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1179px) {
  .navbar-row { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
  .navbar-desktop-menu,.navbar-actions { display: none; }
  .navbar-mobile-trigger { display: flex; grid-column: 3; justify-self: end; }
}

/* ============================================================
   APPOINTMENTS — original 5/7 editorial layout
   ============================================================ */
.appointments-layout { grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(4.5rem,6.25vw,6rem); }
.appointments-copy { max-width: 32rem; }
.appointments-title { margin-bottom: 2rem; font-size: clamp(4.25rem,6.25vw,6rem); white-space: nowrap; }
.appointments-title.is-long { font-size: clamp(3.45rem,5.25vw,5rem); letter-spacing: -.06em; }
.appointments-intro { max-width: 31rem; margin: 0 0 2rem; color: #52525b; font-size: 1.06rem; font-weight: 300; line-height: 1.6; }
.appointments-notes { padding-top: 1.5rem; display: grid; gap: 2rem; border-top: 1px solid rgba(0,0,0,.9); }
.appointments-label { margin-bottom: .4rem; color: #6b7280; font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.appointments-strong { max-width: 30rem; font-size: .95rem; font-weight: 600; line-height: 1.45; }
.appointments-contact { display: inline-block; padding-bottom: .2rem; border-bottom: 1px solid #000; font-size: .95rem; font-weight: 600; transition: color .2s; }
.appointments-contact:hover { color: #71717a; }
.appointments-form-wrap { width: 100%; }
#appointment-request { scroll-margin-top: 5.5rem; }
@media (max-width: 1023px) {
  .appointments-layout { grid-template-columns: 1fr; gap: 4rem; }
  .appointments-copy { max-width: 38rem; }
  .appointments-title,.appointments-title.is-long { font-size: clamp(4rem,12vw,6rem); white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 560px) {
  .appointments-title,.appointments-title.is-long { font-size: clamp(3.45rem,18vw,5rem); }
}

/* ============================================================
   CLIENT PROFILE — history and compact calendar from the original
   ============================================================ */
.profile-page { min-height: 100vh; padding: 4.5rem 0 8rem; background: #000; color: #fff; }
.profile-shell { width: min(100% - 3rem,1200px); margin: 0 auto; }
.profile-heading { margin-bottom: 4.5rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.profile-heading h1 { margin: 0; font-family: var(--font-display); font-size: clamp(4rem,7vw,6.25rem); font-weight: 500; line-height: .9; letter-spacing: -.055em; }
.profile-heading p { margin-top: 1.25rem; color: #71717a; font-size: .93rem; }
.profile-heading p span { color: #d4d4d8; }
.profile-logout { padding: .78rem 1.1rem; border: 1px solid rgba(255,255,255,.25); color: #d4d4d8; font-size: .62rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; transition: .2s; }
.profile-logout:hover { border-color: #fff; background: #fff; color: #000; }
.profile-grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(19rem,1fr); gap: clamp(3rem,6vw,6rem); align-items: start; }
.profile-history { min-width: 0; }
.profile-section-heading { min-height: 3rem; margin-bottom: 1.5rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.profile-section-heading h2 { padding-bottom: 1rem; font-size: .77rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.profile-tabs { display: flex; align-items: flex-end; gap: 1.25rem; }
.profile-tab { padding: 0 0 1rem; border-bottom: 1px solid transparent; color: #52525b; font-size: .65rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; transition: .2s; }
.profile-tab:hover,.profile-tab.active { color: #fff; border-bottom-color: #fff; }
.profile-record { position: relative; min-height: 9rem; margin-bottom: .85rem; padding: 1.4rem 1.5rem 1.4rem 1.7rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; overflow: hidden; border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.018); transition: border-color .2s, background .2s; }
.profile-record::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 2px; background: #71717a; }
.profile-record.status-confirmed::before { background: #fff; }
.profile-record.status-completed::before { background: #52525b; }
.profile-record.status-cancelled::before { background: #7f1d1d; }
.profile-record:hover { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.03); }
.profile-record-main { min-width: 0; display: flex; align-items: flex-start; gap: 1.15rem; }
.profile-record-icon { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; flex: none; border: 1px solid rgba(255,255,255,.15); color: #a1a1aa; }
.profile-kicker { display: block; margin-bottom: .4rem; color: #71717a; font-size: .56rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.profile-record h3 { overflow: hidden; color: #f4f4f5; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.profile-record p { max-width: 30rem; margin-top: .35rem; overflow: hidden; color: #71717a; font-size: .73rem; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.profile-record small { display: block; margin-top: .45rem; color: #52525b; font-size: .62rem; }
.profile-record-meta { min-width: 8.5rem; display: grid; justify-items: end; gap: .35rem; text-align: right; }
.profile-record-meta strong { color: #d4d4d8; font-size: .72rem; font-weight: 500; }
.profile-record-meta small { margin: 0; }
.profile-status { margin-top: .35rem; padding: .35rem .55rem; border: 1px solid rgba(255,255,255,.13); color: #a1a1aa; font-size: .53rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.profile-status.status-confirmed { border-color: rgba(255,255,255,.35); color: #fff; }
.profile-status.status-cancelled { border-color: rgba(239,68,68,.35); color: #f87171; }
.profile-empty { min-height: 13rem; padding: 3rem; display: grid; place-items: center; align-content: center; gap: 1.25rem; border: 1px solid rgba(255,255,255,.1); text-align: center; }
.profile-empty p { color: #71717a; font-size: .86rem; }
.profile-empty a { padding-bottom: .25rem; border-bottom: 1px solid #fff; font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.profile-calendar { position: sticky; top: 7rem; }
.profile-calendar-card { padding: 1.75rem; border: 1px solid rgba(255,255,255,.12); background: #050505; }
.profile-calendar-title { margin-bottom: 2.4rem; display: flex; align-items: center; justify-content: space-between; color: #71717a; font-size: .6rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.profile-calendar-title svg { color: #a1a1aa; }
.profile-calendar-card h2 { margin-bottom: 1.8rem; font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; text-transform: uppercase; }
.profile-calendar-card h2 span { color: #52525b; font-weight: 400; }
.profile-week-labels,.profile-week-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); text-align: center; }
.profile-week-labels { margin-bottom: .6rem; color: #52525b; font-size: .55rem; font-weight: 700; }
.profile-week-days span { position: relative; aspect-ratio: 1; display: grid; place-items: center; color: #71717a; font-size: .67rem; }
.profile-week-days b { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; font-weight: 500; }
.profile-week-days .today b { background: #fff; color: #000; }
.profile-week-days .has-appointment::after { content: ''; position: absolute; bottom: .15rem; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: #fff; transform: translateX(-50%); }
.profile-week-days .today.has-appointment::after { background: #000; }
.profile-calendar-divider { height: 1px; margin: 2rem 0 1.5rem; background: rgba(255,255,255,.1); }
.profile-upcoming-list { margin-top: .85rem; display: grid; gap: .3rem; }
.profile-upcoming-item { padding: .8rem 0; display: flex; align-items: center; gap: .8rem; border-top: 1px solid rgba(255,255,255,.07); }
.profile-upcoming-item:first-child { border-top: 0; }
.profile-upcoming-item i { width: 5px; height: 5px; flex: none; border-radius: 50%; background: #fff; }
.profile-upcoming-item strong,.profile-upcoming-item span { display: block; }
.profile-upcoming-item strong { max-width: 14rem; overflow: hidden; color: #d4d4d8; font-size: .68rem; font-style: normal; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.profile-upcoming-item span { margin-top: .22rem; color: #52525b; font-size: .58rem; }
.profile-upcoming-empty { padding: 1rem 0; color: #52525b; font-size: .72rem; }
@media (max-width: 900px) {
  .profile-grid { grid-template-columns: 1fr; }
  .profile-calendar { position: static; }
}
@media (max-width: 620px) {
  .profile-page { padding-top: 3rem; }
  .profile-shell { width: min(100% - 2rem,1200px); }
  .profile-heading { margin-bottom: 3rem; align-items: flex-start; flex-direction: column; }
  .profile-section-heading { align-items: flex-start; flex-direction: column; }
  .profile-tabs { width: 100%; }
  .profile-record { align-items: flex-start; flex-direction: column; gap: 1.25rem; }
  .profile-record-meta { width: 100%; grid-template-columns: 1fr auto; justify-items: start; text-align: left; }
  .profile-record-meta .profile-status { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* Visual scheduling inside the appointments admin editor. */
.admin-appointments-list { display: grid; gap: 1rem; }
.admin-appointment-card { padding: 1.35rem !important; }
.admin-appointment-summary { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.admin-appointment-name { color: #111; font-size: .9rem; font-weight: 700; }
.admin-appointment-service { margin-left: .35rem; color: #6b7280; font-size: .8rem; }
.admin-appointment-summary p { margin-top: .3rem; color: #6b7280; font-size: .7rem; }
.admin-appointment-summary blockquote { max-width: 48rem; margin-top: .75rem; padding-left: .75rem; border-left: 2px solid #d1d5db; color: #4b5563; font-size: .8rem; line-height: 1.5; }
.admin-appointment-summary small { display: block; margin-top: .75rem; color: #9ca3af; font-size: .62rem; }
.admin-schedule-form { margin-top: 1.15rem; padding-top: 1rem; display: flex; align-items: flex-end; flex-wrap: wrap; gap: .75rem; border-top: 1px solid #eee; }
.admin-schedule-form label { min-width: 10rem; display: grid; gap: .35rem; }
.admin-schedule-form label span { color: #6b7280; font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.admin-schedule-form input { min-height: 2.35rem; padding: .45rem .65rem; border: 1px solid #d1d5db; border-radius: .4rem; background: #fff; color: #111; font-size: .75rem; }
.admin-schedule-form .admin-primary-button { min-height: 2.35rem; }
.admin-scheduled-note { margin-left: auto; align-self: center; color: #047857; font-size: .65rem; font-weight: 700; }
.admin-scheduled-note.pending { color: #9a3412; }
@media (max-width: 700px) { .admin-scheduled-note { width: 100%; margin-left: 0; } }

/* ============================================================
   FIXED PUBLIC HEADER STACK — banner + navigation
   ============================================================ */
.site-header-stack {
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
}
.site-header-stack .site-banner {
  position: relative;
  z-index: 2;
  min-height: 2.5rem;
  padding: .5rem 1rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-repeat: no-repeat;
}
.site-header-stack .banner-inner { width: 100%; }
.site-header-stack .banner-text { white-space: nowrap; }
.site-header-stack .navbar {
  position: relative;
  z-index: 1;
  top: auto;
  right: auto;
  left: auto;
  width: 100%;
}
body.has-site-banner main.pt-20 { padding-top: 7.5rem; }

/* ============================================================
   ADMIN CONTROLS — unified switches and banner editor
   ============================================================ */
.admin-toggle-row,
.admin-field.checkbox {
  min-height: 4.25rem;
  padding: .9rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: .7rem;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.admin-toggle-row:hover,
.admin-field.checkbox:hover { border-color: #b9bec7; background: #fafafa; }
.admin-toggle-row:focus-within,
.admin-field.checkbox:focus-within { border-color: #111; box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.admin-toggle-row > div { min-width: 0; }
.admin-toggle-row strong,
.admin-toggle-row span { display: block; }
.admin-toggle-row strong { color: #111; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.admin-toggle-row span { margin-top: .22rem; color: #6b7280; font-size: .65rem; line-height: 1.45; }

.admin-toggle-row input[type="checkbox"],
.admin-field.checkbox input[type="checkbox"],
.admin-email-switch input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 2.75rem !important;
  min-width: 2.75rem;
  height: 1.5rem !important;
  margin: 0;
  padding: 0 !important;
  flex: none;
  border: 1px solid #c9cdd3 !important;
  border-radius: 999px !important;
  outline: none;
  background: #e5e7eb !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.admin-toggle-row input[type="checkbox"]::after,
.admin-field.checkbox input[type="checkbox"]::after,
.admin-email-switch input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: .2rem;
  left: .2rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.28);
  transition: transform .2s cubic-bezier(.2,.8,.2,1);
}
.admin-toggle-row input[type="checkbox"]:checked,
.admin-field.checkbox input[type="checkbox"]:checked,
.admin-email-switch input[type="checkbox"]:checked {
  border-color: #000 !important;
  background: #000 !important;
}
.admin-toggle-row input[type="checkbox"]:checked::after,
.admin-field.checkbox input[type="checkbox"]:checked::after,
.admin-email-switch input[type="checkbox"]:checked::after { transform: translateX(1.25rem); }
.admin-toggle-row input[type="checkbox"]:focus-visible,
.admin-field.checkbox input[type="checkbox"]:focus-visible,
.admin-email-switch input[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(0,0,0,.16);
  outline-offset: 2px;
}
.admin-email-switch { display: flex; align-items: center; gap: .65rem; cursor: pointer; }
.admin-switch-status { min-width: 3.5rem; color: #6b7280; font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.admin-switch-status .is-on { display: none; color: #111; }
.admin-email-switch input:checked + .admin-switch-status .is-on { display: inline; }
.admin-email-switch input:checked + .admin-switch-status .is-off { display: none; }

.admin-banner-editor { display: grid; gap: 1.5rem; }
.admin-banner-preview {
  position: relative;
  isolation: isolate;
  min-height: 5.25rem;
  padding: 1.35rem 1.5rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: .8rem;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  text-align: center;
  transition: opacity .2s ease, filter .2s ease, background-color .2s ease, color .2s ease;
}
.admin-banner-preview::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(0,0,0,.08);
  pointer-events: none;
}
.admin-banner-preview > div { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .45rem; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
.admin-banner-preview > div strong { font-weight: 700; }
.admin-banner-preview-state { position: absolute; top: .55rem; right: .6rem; padding: .3rem .5rem; border: 1px solid currentColor; border-radius: 999px; font-size: .5rem; font-weight: 800; letter-spacing: .08em; line-height: 1; text-transform: uppercase; }
.admin-banner-preview.is-disabled { opacity: .48; filter: grayscale(.8); }
.admin-color-control { display: grid; grid-template-columns: 3.25rem minmax(0,1fr); gap: .55rem; }
.admin-color-control input[type="color"] { width: 3.25rem !important; height: 2.75rem; padding: .2rem !important; border: 1px solid #d1d5db; border-radius: .45rem; background: #fff; cursor: pointer; }
.admin-color-control input[type="text"] { font-family: Consolas, Monaco, monospace; letter-spacing: .05em; text-transform: uppercase; }
.admin-color-control input.is-invalid { border-color: #dc2626 !important; background: #fef2f2; box-shadow: 0 0 0 2px rgba(220,38,38,.1); }
.admin-banner-actions { padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid #ececec; }
.admin-banner-actions p { max-width: 32rem; color: #6b7280; font-size: .68rem; line-height: 1.45; }

@media (max-width: 640px) {
  .site-header-stack .site-banner { min-height: 2.25rem; padding: .45rem .75rem; }
  body.has-site-banner main.pt-20 { padding-top: 7.25rem; }
  .site-header-stack .banner-text { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .admin-toggle-row,.admin-field.checkbox { min-height: 4rem; }
  .admin-banner-actions { align-items: stretch; flex-direction: column; }
  .admin-banner-actions .admin-primary-button { width: 100%; }
}

/* ============================================================
   ADMIN APPOINTMENTS — visible agenda and delivery status
   ============================================================ */
.admin-appointments-heading { align-items: center; }
.admin-mail-health {
  min-width: 15rem;
  padding: .8rem 1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  background: #fff;
  color: #111;
  transition: border-color .2s ease, transform .2s ease;
}
.admin-mail-health:hover { border-color: #111; transform: translateY(-1px); }
.admin-mail-health > i { width: .6rem; height: .6rem; flex: none; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 5px rgba(245,158,11,.13); }
.admin-mail-health.is-ready > i { background: #10b981; box-shadow: 0 0 0 5px rgba(16,185,129,.13); }
.admin-mail-health span,.admin-mail-health strong,.admin-mail-health small { display: block; }
.admin-mail-health strong { font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; }
.admin-mail-health small { margin-top: .2rem; color: #6b7280; font-size: .6rem; }
.admin-appointment-stats { margin-bottom: 1.25rem; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .8rem; }
.admin-appointment-stats article { min-height: 7rem; padding: 1.05rem 1.15rem; display: flex; flex-direction: column; border: 1px solid #e5e7eb; border-radius: .85rem; background: #fff; }
.admin-appointment-stats article > span { color: #6b7280; font-size: .6rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.admin-appointment-stats article > strong { margin: auto 0 .2rem; color: #111; font-family: var(--font-display); font-size: 2rem; line-height: 1; }
.admin-appointment-stats article > small { color: #9ca3af; font-size: .62rem; }
.admin-appointment-stats article.mail-ok { border-color: #a7f3d0; background: #ecfdf5; }
.admin-appointment-stats article.mail-ok > strong { color: #047857; font-size: 1rem; }
.admin-appointment-stats article.mail-warning { border-color: #fed7aa; background: #fff7ed; }
.admin-appointment-stats article.mail-warning > strong { color: #9a3412; font-size: 1rem; }
.admin-appointment-dashboard { margin-bottom: 2rem; display: grid; grid-template-columns: minmax(0,1fr) minmax(18rem,22rem); gap: 1rem; align-items: start; }
.admin-calendar-panel { padding: 0 !important; overflow-x: auto; }
.admin-calendar-header { min-width: 44rem; padding: 1.2rem 1.3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #e5e7eb; }
.admin-calendar-header h2 { margin-top: .22rem; font-family: var(--font-display); font-size: 1.35rem; text-transform: uppercase; }
.admin-calendar-header nav { display: flex; align-items: center; gap: .35rem; }
.admin-calendar-header nav a { min-width: 2.25rem; height: 2.25rem; padding: 0 .7rem; display: grid; place-items: center; border: 1px solid #e5e7eb; border-radius: .45rem; color: #374151; font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.admin-calendar-header nav a:hover { border-color: #000; background: #000; color: #fff; }
.admin-calendar-weekdays,.admin-calendar-grid { min-width: 44rem; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.admin-calendar-weekdays { border-bottom: 1px solid #e5e7eb; background: #fafafa; }
.admin-calendar-weekdays span { padding: .65rem .55rem; color: #9ca3af; font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.admin-calendar-day { position: relative; min-height: 7.2rem; padding: .55rem; border-right: 1px solid #ededed; border-bottom: 1px solid #ededed; background: #fff; }
.admin-calendar-day:nth-child(7n) { border-right: 0; }
.admin-calendar-day.is-outside { background: #fafafa; }
.admin-calendar-day.is-outside .admin-calendar-date { color: #c7cbd1; }
.admin-calendar-date { width: 1.65rem; height: 1.65rem; display: grid; place-items: center; border-radius: 50%; color: #6b7280; font-size: .65rem; font-weight: 700; }
.admin-calendar-day.is-today .admin-calendar-date { background: #000; color: #fff; }
.admin-calendar-events { margin-top: .25rem; display: grid; gap: .24rem; }
.admin-calendar-events a { padding: .32rem .4rem; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: .3rem; border-left: 2px solid #f59e0b; border-radius: .25rem; background: #fffbeb; color: #78350f; font-size: .54rem; line-height: 1.2; }
.admin-calendar-events a.status-confirmed { border-color: #10b981; background: #ecfdf5; color: #065f46; }
.admin-calendar-events a.status-completed { border-color: #6b7280; background: #f3f4f6; color: #4b5563; }
.admin-calendar-events a.status-cancelled { border-color: #ef4444; background: #fef2f2; color: #991b1b; text-decoration: line-through; }
.admin-calendar-events a time { font-weight: 800; }
.admin-calendar-events a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-calendar-events > small { color: #6b7280; font-size: .53rem; }
.admin-agenda-quick { padding: 0 !important; overflow: hidden; }
.admin-agenda-section { padding: 1.2rem; }
.admin-agenda-section + .admin-agenda-section { border-top: 1px solid #e5e7eb; }
.admin-agenda-section > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.admin-agenda-section > header h2 { margin-top: .2rem; font-size: .9rem; text-transform: uppercase; }
.admin-agenda-section > header > strong { min-width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: #111; color: #fff; font-size: .62rem; }
.admin-agenda-list { margin-top: .8rem; display: grid; }
.admin-agenda-list > a { padding: .7rem 0; display: flex; align-items: center; gap: .75rem; border-top: 1px solid #f0f0f0; }
.admin-agenda-list > a:first-child { border-top: 0; }
.admin-agenda-list time { width: 2.6rem; min-height: 2.8rem; display: grid; place-items: center; align-content: center; flex: none; border: 1px solid #e5e7eb; border-radius: .5rem; }
.admin-agenda-list time b { font-size: .9rem; line-height: 1; }
.admin-agenda-list time span { margin-top: .18rem; color: #9ca3af; font-size: .48rem; text-transform: uppercase; }
.admin-agenda-list a > div { min-width: 0; }
.admin-agenda-list a > div strong,.admin-agenda-list a > div span { display: block; }
.admin-agenda-list a > div strong { overflow: hidden; color: #111; font-size: .67rem; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.admin-agenda-list a > div span { margin-top: .25rem; overflow: hidden; color: #6b7280; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-agenda-list.compact > a > i { width: .5rem; height: .5rem; flex: none; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.12); }
.admin-agenda-empty { margin-top: .8rem; padding: 1rem; border: 1px dashed #d1d5db; color: #9ca3af; font-size: .65rem; line-height: 1.5; text-align: center; }
.admin-list-heading { margin: 0 0 .85rem; display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.admin-list-heading h2 { margin-top: .2rem; font-family: var(--font-display); font-size: 1.2rem; text-transform: uppercase; }
.admin-list-heading > span { color: #9ca3af; font-size: .62rem; text-transform: uppercase; }
.admin-appointment-card { scroll-margin-top: 1rem; border-left: 3px solid #f59e0b !important; }
.admin-appointment-card.status-confirmed { border-left-color: #10b981 !important; }
.admin-appointment-card.status-completed { border-left-color: #6b7280 !important; }
.admin-appointment-card.status-cancelled { border-left-color: #ef4444 !important; opacity: .72; }
.admin-appointment-main { min-width: 0; }
.admin-appointment-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.admin-appointment-status { padding: .28rem .45rem; border-radius: 999px; background: #fffbeb; color: #92400e; font-size: .5rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.status-confirmed .admin-appointment-status { background: #ecfdf5; color: #047857; }
.status-completed .admin-appointment-status { background: #f3f4f6; color: #4b5563; }
.status-cancelled .admin-appointment-status { background: #fef2f2; color: #b91c1c; }
.admin-appointment-contact { margin-top: .4rem; display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; color: #6b7280; font-size: .68rem; }
.admin-appointment-contact a { padding-bottom: .1rem; border-bottom: 1px solid #d1d5db; }
.admin-appointment-contact a:hover { border-color: #111; color: #111; }
.admin-delivery-row { margin-top: 1rem; padding: .65rem .75rem; display: flex; align-items: center; flex-wrap: wrap; gap: .55rem 1rem; border: 1px solid #ececec; border-radius: .5rem; background: #fafafa; }
.admin-delivery-row > span { display: inline-flex; align-items: center; gap: .38rem; color: #6b7280; font-size: .58rem; font-weight: 700; text-transform: uppercase; }
.admin-delivery-row i { width: .42rem; height: .42rem; flex: none; border-radius: 50%; background: #9ca3af; }
.admin-delivery-row .delivery-accepted { color: #047857; }.admin-delivery-row .delivery-accepted i{background:#10b981}
.admin-delivery-row .delivery-failed { color: #b91c1c; }.admin-delivery-row .delivery-failed i{background:#ef4444}
.admin-mail-status > div { display: grid; gap: .22rem; }
.admin-mail-status strong,.admin-mail-status span,.admin-mail-status small { display: block; }
.admin-mail-status small { color: #9a3412; font-size: .63rem; }
.admin-mail-status code { font-family: Consolas,monospace; color: inherit; }
.admin-mail-status form { flex: none; }
.admin-mail-status button:disabled { cursor: not-allowed; opacity: .42; }
.admin-smtp-config { margin-bottom: 1.25rem; padding: 0 !important; overflow: hidden; }
.admin-smtp-config > summary { padding: 1.05rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; }
.admin-smtp-config > summary::-webkit-details-marker { display: none; }
.admin-smtp-config > summary span,.admin-smtp-config > summary strong,.admin-smtp-config > summary small { display: block; }
.admin-smtp-config > summary strong { font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; }
.admin-smtp-config > summary small { margin-top: .2rem; color: #6b7280; font-size: .63rem; }
.admin-smtp-config > summary b { padding: .35rem .55rem; border-radius: 999px; background: #f3f4f6; color: #6b7280; font-size: .55rem; text-transform: uppercase; }
.admin-smtp-config > form { padding: 1.2rem; display: grid; gap: 1rem; border-top: 1px solid #e5e7eb; background: #fafafa; }
.admin-smtp-config .admin-field > small { color: #9ca3af; font-size: .58rem; line-height: 1.45; }
.admin-smtp-config .admin-primary-button { justify-self: start; }

@media (max-width: 1100px) {
  .admin-appointment-dashboard { grid-template-columns: 1fr; }
  .admin-agenda-quick { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-agenda-section + .admin-agenda-section { border-top: 0; border-left: 1px solid #e5e7eb; }
}
@media (max-width: 820px) {
  .admin-appointment-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-appointments-heading { align-items: stretch; flex-direction: column; }
  .admin-mail-health { width: 100%; }
}
@media (max-width: 620px) {
  .admin-appointment-stats { grid-template-columns: 1fr 1fr; }
  .admin-appointment-stats article { min-height: 6rem; }
  .admin-agenda-quick { grid-template-columns: 1fr; }
  .admin-agenda-section + .admin-agenda-section { border-top: 1px solid #e5e7eb; border-left: 0; }
  .admin-mail-status { align-items: stretch; flex-direction: column; }
  .admin-mail-status form,.admin-mail-status button { width: 100%; }
  .admin-appointment-title-row { align-items: flex-start; flex-direction: column; }
}

/* ============================================================
   ADMIN SYSTEM DIAGNOSTICS AND LOGS
   ============================================================ */
.admin-request-id { padding: .4rem .6rem; border: 1px solid #e5e7eb; border-radius: .45rem; background: #fff; color: #6b7280; font: .6rem Consolas,monospace; }
.admin-system-summary { margin-bottom: 1rem; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .8rem; }
.admin-system-summary article { min-width: 0; padding: 1rem; border: 1px solid #e5e7eb; border-radius: .75rem; background: #fff; }
.admin-system-summary span,.admin-system-summary strong,.admin-system-summary small { display: block; }
.admin-system-summary span { color: #9ca3af; font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.admin-system-summary strong { margin-top: .5rem; overflow: hidden; color: #111; font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-system-summary small { margin-top: .25rem; color: #6b7280; font-size: .6rem; }
.admin-system-paths,.admin-system-checks { margin-bottom: 1rem; }
.admin-image-optimization { margin-bottom: 1rem; }
.admin-image-optimization > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.admin-image-optimization h2 { margin: .25rem 0 0; font-size: 1rem; text-transform: uppercase; }
.admin-optimization-stats { margin: 1rem 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid #eee; }
.admin-optimization-stats article { padding: .9rem; border-right: 1px solid #eee; }
.admin-optimization-stats article:last-child { border-right: 0; }
.admin-optimization-stats strong,.admin-optimization-stats span { display: block; }
.admin-optimization-stats strong { color: #111; font-size: 1rem; }
.admin-optimization-stats span { margin-top: .2rem; color: #6b7280; font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.admin-image-optimization p,.admin-image-optimization details { color: #6b7280; font-size: .66rem; line-height: 1.6; }
.admin-image-optimization summary { cursor: pointer; color: #111; font-weight: 700; }
.admin-system-paths h2,.admin-system-checks h2,.admin-log-section > header h2 { margin: .25rem 0 1rem; font-size: 1rem; text-transform: uppercase; }
.admin-system-paths dl { display: grid; }
.admin-system-paths dl > div { padding: .65rem 0; display: grid; grid-template-columns: 9rem minmax(0,1fr); gap: 1rem; border-top: 1px solid #eee; }
.admin-system-paths dt { color: #6b7280; font-size: .62rem; font-weight: 700; text-transform: uppercase; }
.admin-system-paths dd { min-width: 0; overflow-wrap: anywhere; color: #111; font: .68rem Consolas,monospace; }
.admin-system-paths a { text-decoration: underline; text-underline-offset: .2em; }
.admin-system-check { display: inline-flex; align-items: center; gap: .3rem; }
.admin-check { padding: .28rem .45rem; border-radius: 999px; font-size: .55rem; font-weight: 800; text-transform: uppercase; }
.admin-check.ok { background: #ecfdf5; color: #047857; }
.admin-check.fail { background: #fef2f2; color: #b91c1c; }
.admin-log-section > header { margin: 1.5rem 0 .75rem; display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.admin-log-section > header h2 { margin-bottom: 0; }
.admin-log-section > header > span { color: #9ca3af; font-size: .6rem; }
.admin-log-card { margin-bottom: .65rem; padding: 0 !important; overflow: hidden; }
.admin-log-card summary { padding: .9rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; }
.admin-log-card summary::-webkit-details-marker { display: none; }
.admin-log-card summary span,.admin-log-card summary strong,.admin-log-card summary small { display: block; }
.admin-log-card summary strong { font: .7rem Consolas,monospace; }
.admin-log-card summary small { margin-top: .18rem; color: #9ca3af; font-size: .58rem; }
.admin-log-card summary b { color: #6b7280; font-size: .58rem; text-transform: uppercase; }
.admin-log-card pre { max-height: 26rem; margin: 0; padding: 1rem; overflow: auto; border-top: 1px solid #27272a; background: #09090b; color: #d4d4d8; font: .64rem/1.6 Consolas,Monaco,monospace; white-space: pre-wrap; word-break: break-word; }
@media (max-width: 1050px) { .admin-system-summary,.admin-optimization-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } .admin-optimization-stats article:nth-child(2) { border-right: 0; } }
@media (max-width: 620px) { .admin-system-summary,.admin-optimization-stats { grid-template-columns: 1fr; } .admin-optimization-stats article { border-right: 0; border-bottom: 1px solid #eee; } .admin-optimization-stats article:last-child { border-bottom: 0; } .admin-system-paths dl > div { grid-template-columns: 1fr; gap: .3rem; } .admin-log-section > header { align-items: flex-start; flex-direction: column; } }